/* tratzberg — Katalog-Optik in der Scansion-Farbwelt (Brand: designstudio
   art & weise): Powder-Hintergrund, Alabaster-Flaechen, Archive-Grey-Linien,
   Leather-Rot als Akzent/CTA, Eerie Black als Text. Das Scansion-Logo
   erscheint dezent im Footer (Konten-Hinweis); der Kopf gehoert Tratzberg. */

/* Brand-Schrift, selbst gehostet (kein Google-Fonts-Request, DSGVO).
   Variable Font: eine Datei deckt 400-700 ab. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

:root {
  --mz-bg:          #F6F5EE;   /* Powder — Seitenhintergrund */
  --mz-ink:         #1D1D1B;   /* Eerie Black — Text */
  --mz-accent:      #817E72;   /* Archive Grey — Rahmen, Linien */
  --mz-accent-soft: #E8E4DA;   /* Alabaster — Chips, Panels, Hover */
  --mz-accent-pale: #FDFCFA;   /* Karten-/Formularflaechen (fast weiss) */
  --mz-deep:        #55524A;   /* dunkles Archive Grey — Hover, Sekundaeres */
  --mz-muted:       #817E72;   /* Nebentext */
  --mz-cta:         #D0402A;   /* Leather — Buttons, Akzente */
  --mz-cta-hover:   #B8371F;
  --mz-cta-tint:    rgba(208, 64, 42, 0.10);
  --radius:         8px;       /* Karten/Panels (Brand: 8px) */
  --radius-s:       6px;       /* Buttons, Eingabefelder */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { font: 16px/1.55 var(--font-sans); color: var(--mz-ink); background: var(--mz-bg);
       -webkit-font-smoothing: antialiased; }
body { max-width: 76em; margin: 0 auto; padding: 0 1.2em 4em; }

a { color: var(--mz-ink); text-decoration: none; border-bottom: 1px solid var(--mz-accent-soft); }
a:hover { color: var(--mz-cta); border-bottom-color: var(--mz-cta); }

code { font: 0.9em/1.4 Menlo, Consolas, monospace; background: var(--mz-accent-soft);
       padding: 0.1em 0.35em; border-radius: 3px; color: var(--mz-deep); }

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em;
                 color: var(--mz-ink); line-height: 1.25; margin: 1.6em 0 0.5em; }
h2 { font-size: 1.45em; border-bottom: 1px solid var(--mz-accent-soft); padding-bottom: 0.25em; margin-top: 0.4em; }
h3 { font-size: 1.12em; color: var(--mz-deep); }

p.subtitle { color: var(--mz-muted); font-size: 0.95em; margin-top: -0.3em; }
p.breadcrumb { color: var(--mz-muted); font-size: 0.9em; margin: 0.4em 0; }
p.breadcrumb a { border-bottom: none; }
/* text-wrap: pretty vermeidet einzelne Woerter in der letzten Zeile
   (Chrome/Edge; anderswo folgenlos) */
p.intro { max-width: 44em; font-size: 1.05em; text-wrap: pretty; }
.rechtstext { max-width: 44em; }
.rechtstext h3 { margin-top: 1.6em; }
.rechtstext li { margin-bottom: 0.3em; }
.meta { color: var(--mz-muted); font-size: 0.88em; }
.badge { background: var(--mz-accent-soft); color: var(--mz-deep); border-radius: 3px;
         padding: 0.1em 0.45em; font-size: 0.6em; vertical-align: middle; }

/* ---- Header ---- */
header.mz-banner { background: #fff; padding: 0.9em 1.5em 0.7em; margin: 0 -1.5em 1.5em;
                   border-bottom: 1px solid var(--mz-accent-soft); }
.banner-row { display: flex; align-items: baseline; gap: 1.5em; max-width: 76em; margin: 0 auto;
              flex-wrap: wrap; }
.brand { border: none; display: flex; align-items: baseline; gap: 0.6em; }
.brand:hover { background: none; }
header.mz-banner h1 { margin: 0; font-size: 1.25em; border: none; color: var(--mz-cta);
                      letter-spacing: -0.01em; font-weight: 700; }
/* kleiner Leather-Stempel als Bildmarke, solange das Archiv kein Logo liefert */
header.mz-banner h1::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em;
                              margin-right: 0.45em; background: var(--mz-cta); border-radius: 2px; }
.brand-claim { color: var(--mz-muted); font-size: 0.82em; white-space: nowrap; }
.main-nav { display: flex; gap: 1.2em; font-size: 0.92em; font-weight: 600; }
.main-nav a { border-bottom: 2px solid transparent; }
.main-nav a:hover { background: none; color: var(--mz-cta); border-bottom-color: var(--mz-cta); }
.main-nav a.weitermachen { color: var(--mz-cta); }

footer.mz-footer { margin-top: 4em; padding-top: 1em; border-top: 1px solid var(--mz-accent-soft);
                   font-size: 0.85em; color: var(--mz-muted); }
footer.mz-footer a { color: var(--mz-muted); }
footer.mz-footer a.scansion-link { border-bottom: none; }
/* Wortmarke laeuft in der Fusszeile mit (Original 3000x657 -> Hoehe genuegt) */
footer.mz-footer .scansion-logo { height: 1.05em; vertical-align: -0.18em; }

/* ---- Login ---- */
.user-nav { margin-left: auto; display: flex; align-items: baseline; gap: 0.8em; font-size: 0.92em; }
.user-nav form { display: inline; }
button.linklike { background: none; border: none; padding: 0; font: inherit; cursor: pointer;
                  color: var(--mz-ink); border-bottom: 1px solid var(--mz-accent-soft); }
button.linklike:hover { color: var(--mz-cta); border-bottom-color: var(--mz-cta); }

.login-box { max-width: 24em; background: var(--mz-accent-pale); border: 1px solid var(--mz-accent-soft);
             border-radius: var(--radius); padding: 1.2em 1.4em; margin-top: 1em; }
.login-box label { display: block; margin-bottom: 0.9em; font-weight: 600; font-size: 0.92em; }
.login-box input { display: block; width: 100%; margin-top: 0.25em; padding: 0.45em 0.6em;
                   font: inherit; border: 1.5px solid var(--mz-accent-soft); border-radius: var(--radius-s); }
.login-box input:focus { outline: none; border-color: var(--mz-cta); }
.login-box button[type=submit] { padding: 0.5em 1.4em; font: inherit; font-weight: 600; cursor: pointer;
                                 background: var(--mz-cta); color: #fff; border: none; border-radius: var(--radius-s); }
.login-box button[type=submit]:hover { background: var(--mz-cta-hover); }
.login-box .meta { margin-top: 1em; }
.form-fehler { background: #f7e3e3; border: 1px solid #c98f8f; color: #7a2e2e;
               border-radius: var(--radius-s); padding: 0.5em 0.8em; font-size: 0.92em; }
.form-ok { background: #e4efe2; border: 1px solid #8fb389; color: #2e5c2e;
           border-radius: var(--radius-s); padding: 0.5em 0.8em; font-size: 0.92em; }
.form-hinweis { background: var(--mz-accent-soft); border: 1px solid var(--mz-accent);
                color: var(--mz-deep); border-radius: var(--radius-s); padding: 0.5em 0.8em; font-size: 0.92em; }

/* ---- Suche ---- */
.such-form { margin-left: auto; }
.such-form input { padding: 0.3em 0.6em; font: inherit; font-size: 0.88em; width: 13em;
                   border: 1.5px solid var(--mz-accent-soft); border-radius: var(--radius-s);
                   background: var(--mz-bg); }
.such-form input:focus { outline: none; border-color: var(--mz-cta); background: #fff; }
.user-nav { margin-left: 0; }  /* Suchfeld uebernimmt das auto-Margin */
.such-seite-form { display: flex; gap: 0.5em; margin: 0.8em 0 1.2em; max-width: 28em; }
.such-seite-form input { flex: 1; padding: 0.45em 0.6em; font: inherit;
                         border: 1.5px solid var(--mz-accent-soft); border-radius: var(--radius-s); }
.such-seite-form input:focus { outline: none; border-color: var(--mz-cta); }
.such-seite-form button { padding: 0.45em 1.2em; font: inherit; font-weight: 600; cursor: pointer;
                          background: var(--mz-cta); color: #fff; border: none; border-radius: var(--radius-s); }
.such-seite-form button:hover { background: var(--mz-cta-hover); }
.such-treffer th, .such-treffer td { width: auto; }
.badge-ki { background: var(--mz-cta-tint); border: 1px solid #dfa396; color: var(--mz-cta-hover); }

/* ---- Kampagnen-Uebersicht ---- */
.kampagne-karte { background: var(--mz-accent-pale); border: 1px solid var(--mz-accent-soft);
                  border-radius: var(--radius); padding: 0.8em 1.1em; margin: 0.8em 0; }
.kampagne-inaktiv { opacity: 0.6; }
.kampagne-kopf { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; }
.kampagne-kopf .badge { font-size: 0.75em; }
.kampagne-kopf .erfassen-knopf { font-size: 0.88em; padding: 0.3em 0.9em; }
.kampagne-anleitung { white-space: pre-line; margin: 0.4em 0; font-size: 0.95em; }
.fortschritt { height: 0.7em; background: var(--mz-accent-soft); border: none;
               border-radius: 4px; overflow: hidden; margin: 0.45em 0 0.25em; }
.fortschritt-balken { height: 100%; background: var(--mz-cta); }

/* ---- Sperre (Schutzfrist) ---- */
.tile-gesperrt { background: var(--mz-accent-soft); }
.tile-gesperrt .tile-noimg { min-height: 8em; }
.sperr-platzhalter { background: var(--mz-accent-soft); border: 1px dashed var(--mz-accent);
                     border-radius: var(--radius); padding: 1.2em 1.4em; max-width: 34em; }
.sperr-banner { background: var(--mz-cta-tint); border: 1px solid #dfa396; border-radius: var(--radius-s);
                padding: 0.7em 1em; margin: 0.6em 0 1em; }
.sperr-form { display: flex; gap: 0.5em; margin-top: 0.6em; max-width: 34em; }
.sperr-form input[name=grund] { flex: 1; padding: 0.35em 0.55em; font: inherit;
                                border: 1.5px solid var(--mz-accent-soft); border-radius: var(--radius-s); }
.sperr-form input[name=grund]:focus { outline: none; border-color: var(--mz-cta); }
.sperr-form button { padding: 0.35em 1em; font: inherit; font-weight: 600; cursor: pointer;
                     background: var(--mz-cta); color: #fff; border: none; border-radius: var(--radius-s); }
.sperr-form button:hover { background: var(--mz-cta-hover); }
.sperr-details { margin: 0.4em 0 1em; }
.sperr-details summary { cursor: pointer; }

/* ---- Erfassungs-Ansicht (Vollbreite, Viewer + Teiler + Formular) ---- */
body.vollbreit { max-width: none; padding: 0 0.8em 1em; }
body.vollbreit header.mz-banner { margin: 0 -0.8em 0.8em; }
body.vollbreit footer.mz-footer { display: none; }  /* Arbeitsansicht: jede Zeile zaehlt */

.erfassen-kopfzeile { display: flex; align-items: baseline; gap: 1em; flex-wrap: wrap;
                      margin-bottom: 0.5em; }
.erfassen-kopfzeile .form-ok, .erfassen-kopfzeile .form-fehler,
.erfassen-kopfzeile .form-hinweis { padding: 0.15em 0.6em; }

.erfassen-layout { display: flex; align-items: stretch;
                   height: calc(100vh - 8.5em); min-height: 24em; }
.erfassen-scans { flex: 0 0 58%; min-width: 0; display: flex; flex-direction: column; }

/* Wrapper aus _viewer.html: fuellt seinen Container (Erfassungs-Spalte oder
   .dokument-viewer) und ist das Vollbild-Element */
.viewer-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Dokumentseite: kompakte Kopfzeile, der Platz gehoert dem Scan */
.dok-kopf { display: flex; align-items: baseline; gap: 0.9em; flex-wrap: wrap;
            margin: 0.5em 0 0.4em; font-size: 0.9em; }
.dok-kopf .meta { font-size: 1em; }   /* eine Groesse fuer die ganze Zeile */
.dok-kopf .dok-titel { margin: 0; font-size: 1em; border: none; padding: 0;
                       color: var(--mz-cta); font-weight: 600; }
/* Dokumentseite: unaufgeregte Zeile, nur Bildnummer und Dossier in Rot */
.dok-kopf .dok-zeile { margin: 0; font-size: 1em; font-weight: 400; border: none;
                       padding: 0; color: var(--mz-ink); letter-spacing: 0; }
.rot { color: var(--mz-cta); }
.dok-dossier { color: var(--mz-cta); }
.dok-kopf .dok-nav { margin-left: auto; display: flex; gap: 1.1em; white-space: nowrap; }
.dossier-anlegen { color: var(--mz-cta); border-bottom: 1px dashed var(--mz-cta); }
.dossier-panel { margin: 0.3em 0 0.6em; padding: 0.6em 0.9em;
                 background: var(--mz-cta-tint); border: 1px solid var(--mz-accent-soft);
                 border-radius: var(--radius); }
.dossier-panel > .meta { margin: 0 0 0.4em; }
.dossier-form { display: flex; gap: 0.9em; align-items: flex-end; flex-wrap: wrap; }
.dossier-form label { display: block; position: relative; flex: 1 1 11em;
                      max-width: 20em; font-size: 0.88em; color: var(--mz-deep); }
.dossier-form .df-kopf { display: block; padding-right: 5.2em; white-space: nowrap;
                         overflow: hidden; text-overflow: ellipsis; }
.dossier-form .df-unsicher { position: absolute; top: 0; right: 0; font-weight: 400;
                             font-size: 0.85em; color: var(--mz-muted); white-space: nowrap; }
.dossier-form input:not([type=checkbox]) {
  width: 100%; box-sizing: border-box; margin-top: 0.15em; padding: 0.35em 0.5em;
  border: 1px solid var(--mz-accent); border-radius: var(--radius-s);
  font: inherit; background: #fff; }
.dossier-form .erfassen-aktionen { margin: 0; display: flex; gap: 0.5em; }
.dossier-form .erfassen-aktionen button { white-space: nowrap; padding: 0.42em 0.9em; }

/* Dokumentseite: kein fester Kasten — der Rahmen folgt dem Seitenverhaeltnis
   des Bilds (viewer.js setzt aspect-ratio), die SEITE scrollt bei Bedarf */
.dokument-viewer { margin: 0 0 1.2em; }
.dokument-viewer .viewer-wrap { display: block; }
.dokument-viewer .viewer { width: 100%; min-height: 12em; }

/* Vollbild schlaegt jedes Kontext-Layout (steht deshalb NACH den
   .dokument-viewer-Regeln): Wrapper fuellt den Schirm, Viewer den Rest */
.viewer-wrap:fullscreen, .dokument-viewer .viewer-wrap:fullscreen {
  display: flex; flex-direction: column;
  background: var(--mz-bg); padding: 0.5em; }
.viewer-wrap:fullscreen .viewer, .dokument-viewer .viewer-wrap:fullscreen .viewer {
  flex: 1; width: auto; min-height: 0; }
.viewer-wrap:fullscreen .viewer-bar { padding-bottom: 0.35em; }

.viewer { flex: 1; position: relative; overflow: hidden; background: var(--mz-ink);
          border: 1px solid var(--mz-accent); border-radius: var(--radius);
          cursor: grab; touch-action: none; }
.viewer:active { cursor: grabbing; }
.viewer img { position: absolute; left: 0; top: 0; transform-origin: 0 0;
              max-width: none; user-select: none; }
.viewer-leer { position: absolute; inset: 0; display: flex; align-items: center;
               justify-content: center; color: #ccc; }
.viewer-bar { display: flex; align-items: center; gap: 0.45em; padding: 0.35em 0.1em 0;
              flex-wrap: wrap; }
.viewer-bar button { min-width: 2em; padding: 0.15em 0.5em; font: inherit; cursor: pointer;
                     background: var(--mz-accent-soft); color: var(--mz-deep);
                     border: 1px solid var(--mz-accent); border-radius: var(--radius-s); }
.viewer-bar button:hover { border-color: var(--mz-cta); color: var(--mz-cta); background: #fff; }
.viewer-spacer { flex: 1; }

.split-griff { flex: 0 0 9px; cursor: col-resize; margin: 0 2px; border-radius: 4px;
               background: var(--mz-accent-soft); touch-action: none; }
.split-griff:hover, .split-griff:active { background: var(--mz-accent); }

.erfassen-form { flex: 1 1 auto; min-width: 0; overflow-y: auto;
                 background: var(--mz-accent-pale);
                 border: 1px solid var(--mz-accent-soft); border-radius: var(--radius);
                 padding: 0.8em 1.1em; }
.form-kopf { display: flex; align-items: center; gap: 0.45em; justify-content: flex-end;
             margin-bottom: 0.6em; }
.form-kopf button { padding: 0.1em 0.5em; font: inherit; cursor: pointer;
                    background: var(--mz-accent-soft); color: var(--mz-deep);
                    border: 1px solid var(--mz-accent); border-radius: var(--radius-s); }
.form-kopf button:hover { border-color: var(--mz-cta); color: var(--mz-cta); background: #fff; }

.erfassen-form label { display: block; margin-bottom: 0.6em; font-weight: 600; font-size: 0.88em; }
/* Haekchen: optisch rechts oben beim Label, im DOM aber NACH dem Eingabefeld
   (Tab-Reihenfolge: Feld -> unsicher -> naechstes Feld) */
.erfassen-form label.feld { position: relative; }
.erfassen-form .feld-kopf { display: block; padding-right: 6em; }
.erfassen-form .feld-unsicher { position: absolute; top: 0; right: 0;
                                font-weight: 400; font-size: 0.85em; color: var(--mz-muted);
                                white-space: nowrap; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
                     overflow: hidden; clip: rect(0 0 0 0); }
.erfassen-form input:not([type=checkbox]), .erfassen-form textarea {
  display: block; width: 100%; margin-top: 0.15em; padding: 0.3em 0.5em;
  font: inherit; border: 1.5px solid var(--mz-accent-soft); border-radius: var(--radius-s); background: #fff; }
.erfassen-form input:not([type=checkbox]):focus, .erfassen-form textarea:focus {
  outline: none; border-color: var(--mz-cta); }
.erfassen-form .feld-hinweis { display: block; font-weight: 400; color: var(--mz-muted); }
.erfassen-form .unsicher-zeile { font-weight: 600; margin: 0.9em 0 0.6em; }
.erfassen-form .unsicher-zeile input { margin-right: 0.4em; }
.erfassen-aktionen { display: flex; align-items: baseline; gap: 1em; margin-top: 0.9em;
                     flex-wrap: wrap; }
.erfassen-aktionen button { padding: 0.5em 1.2em; font: inherit; font-weight: 600; cursor: pointer;
                            background: var(--mz-cta); color: #fff; border: none; border-radius: var(--radius-s); }
.erfassen-aktionen button:hover { background: var(--mz-cta-hover); }
.erfassen-aktionen button.sekundaer { background: transparent; color: var(--mz-deep);
                                      border: 1.5px solid var(--mz-accent); }
.erfassen-aktionen button.sekundaer:hover { border-color: var(--mz-cta); color: var(--mz-cta);
                                            background: transparent; }
a.erfassen-knopf { display: inline-block; padding: 0.45em 1.2em; font-weight: 600;
                   background: var(--mz-cta); color: #fff; border: none; border-radius: var(--radius-s); }
a.erfassen-knopf:hover { background: var(--mz-cta-hover); color: #fff; }

@media (max-width: 55em) {
  .erfassen-layout { flex-direction: column; height: auto; }
  .erfassen-scans { flex: 0 0 auto; }
  .viewer { height: 55vh; }
  .split-griff { display: none; }
}

/* ---- Startseiten-Schaufenster: Intro + Beispiel-Scan ---- */
.schaufenster { display: flex; gap: 2.5em; align-items: flex-start; margin-bottom: 1.5em; }
.schaufenster-text { flex: 1 1 24em; min-width: 0; }
/* enger Block: Balken, Zahl direkt darunter, dann der Knopf */
.schaufenster-text .fortschritt { max-width: 24em; margin: 1.3em 0 0; }
.schaufenster-text .fortschritt-zahl { margin: 0.35em 0 1.2em; }
.schaufenster-text .erfassen-knopf { margin-top: 0; }
.schaufenster-scan { flex: 0 1 24em; min-width: 14em; margin: 0.8em 0 0; }
.schaufenster-scan a { border-bottom: none; }
.schaufenster-scan img { width: 100%; height: auto; display: block; background: #fff;
                         border: 1px solid var(--mz-accent-soft); border-radius: var(--radius);
                         box-shadow: 0 8px 24px rgba(29, 29, 27, 0.10); }
.schaufenster-scan figcaption { font-size: 0.85em; color: var(--mz-muted); margin-top: 0.5em; }

@media (max-width: 55em) {
  .schaufenster { flex-direction: column; gap: 1em; }
  .schaufenster-scan { flex-basis: auto; width: 100%; max-width: 26em; }
}

/* Beim internen Navigieren (von_intern, app.py) faellt das Schaufenster auf
   niedrigen Bildschirmen weg — die Faszikel-Liste soll ohne Scrollen
   erreichbar sein (14"-Laptop ~800px Viewport). Grosse Monitore behalten es. */
@media (max-height: 999px) {
  .schaufenster.schaufenster-kompakt { display: none; }
}

/* ---- Projektseite: EINE Artikel-Spalte, Bilder buendig zum Text ---- */
.projekt-artikel { max-width: 46em; }
.projekt-artikel h3 { clear: both; }   /* Abschnitte beginnen unter dem Float */
.projekt-liste li { margin-bottom: 0.5em; }
.projekt-figur { margin: 1.4em 0; }
.projekt-figur img { width: 100%; height: auto; display: block; background: #fff;
                     border: 1px solid var(--mz-accent-soft); border-radius: var(--radius);
                     box-shadow: 0 8px 24px rgba(29, 29, 27, 0.10); }
.projekt-figur figcaption { font-size: 0.85em; color: var(--mz-muted); margin-top: 0.45em; }
/* Aufmacher: Querformat-Zuschnitt statt hohem Quadrat */
.projekt-figur-hero img { aspect-ratio: 3 / 2; object-fit: cover; }
/* Hochformat (Familienfoto) neben den Schlossherr-Absatz, IN der Spalte */
.projekt-figur-rechts { float: right; width: 15em; max-width: 44%;
                        margin: 0.3em 0 0.8em 1.4em; }
/* Bildpaare: gleiche Hoehe ueber quadratischen Zuschnitt; 30 % von oben
   haelt bei Hochformaten den interessanten Teil (Haende, Zelt) im Bild */
.foto-paar { display: flex; gap: 1.4em; align-items: flex-start; clear: both; }
.foto-paar .projekt-figur { flex: 1 1 0; min-width: 0; margin: 1.4em 0 0.8em; }
.foto-paar img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; }
@media (max-width: 42em) {
  .foto-paar { flex-direction: column; gap: 0; }
  .projekt-figur-rechts { float: none; width: 100%; max-width: 24em; margin: 1.4em 0; }
}

/* ---- Faszikel-Index (nach Bestand gruppiert, CONTRACT §11.1) ---- */
/* Abteilungen als <details>: zugeklappt eine kompakte Zeile mit Zaehlern */
.bestand-gruppe { margin-top: 0.9em; }
.bestand-gruppe > summary { cursor: pointer; padding: 0.35em 0.2em; border-radius: var(--radius-s); }
.bestand-gruppe > summary:hover { background: var(--mz-accent-soft); }
.bestand-gruppe > summary .meta { margin-left: 0.5em; }
.bestand-titel { display: inline; margin: 0; border: none; font-size: 1.05em;
                 color: var(--mz-deep); letter-spacing: 0; }
.bestand-hinweis { max-width: 46em; margin-top: -0.2em; }

/* Faszikel-Zeile als <details>: Summary = Link + Kurzinhalt + Status,
   aufgeklappt Fortschritt und Dossiers mit Direktsprung */
.faszikel-details > summary { cursor: pointer; }
.faszikel-details > summary .faszikel-status { display: block; margin-left: 1.1em; }
.faszikel-detailkoerper { margin: 0.5em 0 0.2em 1.1em; }
.fortschritt-schmal { max-width: 22em; margin: 0.3em 0 0.2em; }
.dossier-liste { list-style: none; padding-left: 0; margin: 0.4em 0 0;
                 columns: 2 22em; column-gap: 2em; }
.dossier-liste li { margin-bottom: 0.15em; break-inside: avoid; font-size: 0.92em; }
.faszikel-ort { font-weight: 400; color: var(--mz-muted); }
.faszikel-beschreibung { max-width: 46em; }
.altmetadaten { margin: 0.6em 0 1em; padding: 0.6em 0.9em; max-width: 46em;
                background: var(--mz-accent-pale); border: 1px solid var(--mz-accent-soft);
                border-radius: var(--radius); }
.altmetadaten summary { cursor: pointer; color: var(--mz-deep); font-size: 0.92em; }
.altmetadaten dt { font-weight: 600; font-size: 0.85em; color: var(--mz-muted);
                   margin-top: 0.6em; }
.altmetadaten dd { margin: 0.1em 0 0; }
.rotbuch-liste { margin: 0.2em 0 0; padding-left: 1.2em; }
.faszikel-treffer { list-style: none; padding-left: 0; }
.bearbeiten-link { margin-left: 0.6em; font-weight: 400; font-size: 0.8em; }
.inline-form { display: inline; }
/* Aufgabenboerse (CONTRACT §9.5): Faszikel-Commitments auf der Karton-Seite */
.faszikel-aufgaben { margin: 0.4em 0 0.8em; padding: 0.45em 0.8em;
                     background: var(--mz-accent-pale); border: 1px solid var(--mz-accent-soft);
                     border-radius: var(--radius-s); font-size: 0.92em; }
.aufgabe-zeile { margin: 0.15em 0; }
.aufgabe-art { font-weight: 600; margin-right: 0.3em; }
.aufgabe-eigen { color: var(--mz-cta); font-weight: 600; }
.aufgabe-meldung { background: #eef3e9; border: 1px solid #b6c9a6; color: #3d5230;
                   padding: 0.5em 0.9em; border-radius: var(--radius-s); max-width: 46em; }
.dossier-trenner { grid-column: 1 / -1; padding: 0.4em 0.2em 0; margin-top: 0.4em;
                   border-bottom: 2px solid var(--mz-accent); font-weight: 600; }
.dossier-trenner .dossier-beschreibung { display: block; font-weight: 400; }
.beschreibung-form label { display: block; margin: 0.8em 0; }
.beschreibung-form input, .beschreibung-form textarea {
  display: block; width: 100%; max-width: 46em; margin-top: 0.25em;
  padding: 0.45em 0.6em; border: 1px solid var(--mz-accent); border-radius: var(--radius-s);
  font: inherit; background: var(--mz-accent-pale); }
.katalog-register .reg-dossier { display: block; color: var(--mz-cta); font-weight: 600; }
.katalog-register .reg-bereich { display: block; font-size: 0.85em; color: var(--mz-muted); }
.faszikel-treffer > li { padding: 0.6em 0.9em; margin: 0.5em 0; background: var(--mz-accent-pale);
                         border: 1px solid var(--mz-accent-soft); border-radius: var(--radius); }
.karton-index { list-style: none; padding-left: 0; }
.karton-index-item { padding: 0.7em 0.9em; margin: 0.5em 0; background: var(--mz-accent-pale);
                     border: 1px solid var(--mz-accent-soft); border-radius: var(--radius); }
.karton-index-item .meta { margin-left: 0.6em; }
.karton-index-item .karton-spanne { margin-left: 0.6em; font-weight: 600; }

/* ---- Katalog: Register + Grid + Pager (Muster KNBG-Findebuch) ---- */
.katalog-layout { display: flex; gap: 1.6em; align-items: flex-start; }
.katalog-register { flex: 0 0 230px; position: sticky; top: 0.5em; max-height: 95vh; overflow-y: auto;
                    font-size: 0.85em; }
.katalog-register a { display: block; padding: 0.14em 0.3em; border-bottom: none;
                      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.katalog-register a:hover { background: var(--mz-accent-soft); color: var(--mz-ink); }
.katalog-register a.active { background: var(--mz-accent-soft); font-weight: 700; }
.katalog-register .blocknr { color: var(--mz-muted); font-size: 0.85em;
                             display: inline-block; min-width: 2.8em; }

.katalog-inhalt { flex: 1; min-width: 0; }
.katalog-inhalt .katalog-pager:first-child { margin-top: 0; }
.katalog-grid { display: grid; gap: 1.1em; min-width: 0;
                grid-template-columns: repeat(auto-fill, minmax(21em, 1fr)); }
.katalog-tile { background: var(--mz-accent-pale); border: 1px solid var(--mz-accent-soft);
                border-radius: var(--radius); padding: 0.5em; }
.katalog-tile:target { outline: 3px solid var(--mz-cta); }
/* Dossier-Anfang (Deckblatt): beim Durchblaettern sofort erkennbar */
.katalog-tile.tile-dossier-anfang { border: 2px solid var(--mz-cta); }
.tile-caption .tile-dossier { display: block; clear: both; margin-top: 0.2em;
                              color: var(--mz-cta); font-weight: 600; }
.katalog-tile a { border-bottom: none; }
.katalog-tile img { width: 100%; height: auto; display: block; border: 1px solid var(--mz-accent-soft); }
.katalog-tile .tile-noimg { display: flex; flex-direction: column; align-items: center; justify-content: center;
                            min-height: 8em; color: var(--mz-muted); text-align: center; font-size: 0.85em; }
.katalog-tile .tile-caption { font-size: 0.82em; margin-top: 0.35em; }
.katalog-tile .tile-nr { float: right; color: var(--mz-muted); }

.katalog-nav { display: flex; justify-content: space-between; align-items: center; margin: 0.8em 0 1em; }

.katalog-pager { display: flex; justify-content: center; align-items: center; gap: 0.35em;
                 margin: 1em 0; }
.katalog-pager a, .katalog-pager .disabled {
  padding: 0.25em 0.7em; border: 1px solid var(--mz-accent-soft); border-radius: var(--radius-s);
  font-size: 0.92em; }
.katalog-pager a { color: var(--mz-deep); font-weight: 600; }
.katalog-pager a:hover { background: var(--mz-accent-soft); color: var(--mz-ink); }
.katalog-pager .disabled { color: var(--mz-muted); opacity: 0.45; }
.katalog-pager .pager-current { margin: 0 0.7em; color: var(--mz-muted); font-size: 0.92em; }

/* ---- Dokument-Ansicht: Seiten nebeneinander ---- */
.erfassung-tabelle { border-collapse: collapse; margin: 0.6em 0; }
.erfassung-tabelle th, .erfassung-tabelle td { border: 1px solid var(--mz-accent-soft);
                                                padding: 0.3em 0.7em; text-align: left; }
.erfassung-tabelle th { background: var(--mz-accent-soft); font-weight: 600; width: 12em; }

.historie { list-style: none; padding-left: 0; }
.historie li { padding: 0.3em 0; border-bottom: 1px dashed var(--mz-accent-soft); }
.historie-eintrag { padding: 0.3em 0; border-bottom: 1px dashed var(--mz-accent-soft); }
.historie-eintrag summary { cursor: pointer; }
.diff-tabelle { margin: 0.5em 0 0.3em 1.2em; }
.diff-tabelle td { white-space: pre-line; }
.diff-tabelle .diff-alt { color: var(--mz-muted); }
.diff-tabelle .diff-neu { background: #eef4ea; }

@media (max-width: 55em) {
  .katalog-layout { flex-direction: column; }
  .katalog-register { position: static; max-height: 14em; flex-basis: auto; width: 100%; }
  .katalog-grid { grid-template-columns: 1fr; }
}