/* Meldezettel — schlichte Katalog-Optik, angelehnt ans KNBG-Findebuch,
   aber mit eigener, neutraler Farbwelt (Grau/Blau statt Sand/Gold). */

:root {
  --mz-accent:      #7d8ca3;   /* gedecktes Blaugrau */
  --mz-accent-soft: #e2e6ec;   /* Panels, Chips */
  --mz-accent-pale: #f5f7fa;   /* helle Flaechen */
  --mz-bg:          #f0f1f3;   /* Seitenhintergrund */
  --mz-ink:         #1a1a1a;
  --mz-deep:        #3d4657;   /* Hover, Sekundaer-Ueberschriften */
  --mz-muted:       #6d7480;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-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); }
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); }
a:hover { color: var(--mz-deep); background: var(--mz-accent-soft); }

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-serif); font-weight: 600;
                 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); padding-bottom: 0.2em; 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; }
.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: 3px solid var(--mz-accent); }
.banner-row { display: flex; align-items: baseline; gap: 1.5em; max-width: 76em; margin: 0 auto;
              flex-wrap: wrap; }
.brand { border: none; }
.brand:hover { background: none; }
header.mz-banner h1 { margin: 0; font-size: 1.3em; border: none; color: var(--mz-deep);
                      letter-spacing: 0.04em; }
.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-deep); border-bottom-color: var(--mz-accent); }

footer.mz-footer { margin-top: 4em; padding-top: 1em; border-top: 1px dashed var(--mz-accent);
                   font-size: 0.85em; color: var(--mz-muted); }

/* ---- 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); }
button.linklike:hover { color: var(--mz-deep); background: var(--mz-accent-soft); }

.login-box { max-width: 24em; background: var(--mz-accent-pale); border: 1px solid var(--mz-accent-soft);
             border-radius: 4px; 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: 1px solid var(--mz-accent); border-radius: 3px; }
.login-box button[type=submit] { padding: 0.5em 1.4em; font: inherit; font-weight: 600; cursor: pointer;
                                 background: var(--mz-deep); color: #fff; border: none; border-radius: 3px; }
.login-box button[type=submit]:hover { background: var(--mz-accent); }
.login-box .meta { margin-top: 1em; }
.form-fehler { background: #f7e3e3; border: 1px solid #c98f8f; color: #7a2e2e;
               border-radius: 3px; padding: 0.5em 0.8em; font-size: 0.92em; }
.form-ok { background: #e4efe2; border: 1px solid #8fb389; color: #2e5c2e;
           border-radius: 3px; 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: 3px; 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: 1px solid var(--mz-accent); border-radius: 3px; }
.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: 1px solid var(--mz-accent); border-radius: 3px; }
.such-seite-form button { padding: 0.45em 1.2em; font: inherit; font-weight: 600; cursor: pointer;
                          background: var(--mz-deep); color: #fff; border: none; border-radius: 3px; }
.such-seite-form button:hover { background: var(--mz-accent); }
.such-treffer th, .such-treffer td { width: auto; }
.badge-ki { background: #f5ecd9; border: 1px solid #cfa95a; color: #7a5c1e; }

/* ---- Kampagnen-Uebersicht ---- */
.kampagne-karte { background: var(--mz-accent-pale); border: 1px solid var(--mz-accent-soft);
                  border-radius: 4px; 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: #fff; border: 1px solid var(--mz-accent);
               border-radius: 4px; overflow: hidden; margin: 0.45em 0 0.25em; }
.fortschritt-balken { height: 100%; background: var(--mz-accent); }

/* ---- Sperre (Schutzfrist) ---- */
.tile-gesperrt { background: #efe9e2; }
.tile-gesperrt .tile-noimg { min-height: 8em; }
.sperr-platzhalter { background: #efe9e2; border: 1px dashed var(--mz-accent);
                     border-radius: 4px; padding: 1.2em 1.4em; max-width: 34em; }
.sperr-banner { background: #f5ecd9; border: 1px solid #cfa95a; border-radius: 4px;
                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: 1px solid var(--mz-accent); border-radius: 3px; }
.sperr-form button { padding: 0.35em 1em; font: inherit; font-weight: 600; cursor: pointer;
                     background: var(--mz-deep); color: #fff; border: none; border-radius: 3px; }
.sperr-form button:hover { background: var(--mz-accent); }
.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; }

.viewer { flex: 1; position: relative; overflow: hidden; background: #2e2e2e;
          border: 1px solid var(--mz-accent); border-radius: 4px;
          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: 3px; }
.viewer-bar button:hover { background: var(--mz-accent); color: #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: 4px;
                 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: 3px; }
.form-kopf button:hover { background: var(--mz-accent); color: #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: 1px solid var(--mz-accent); border-radius: 3px; background: #fff; }
.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-deep); color: #fff; border: none; border-radius: 3px; }
.erfassen-aktionen button:hover { background: var(--mz-accent); }
.erfassen-aktionen button.sekundaer { background: var(--mz-accent-soft); color: var(--mz-deep);
                                      border: 1px solid var(--mz-accent); }
.erfassen-aktionen button.sekundaer:hover { background: var(--mz-accent); color: #fff; }
a.erfassen-knopf { display: inline-block; padding: 0.45em 1.2em; font-weight: 600;
                   background: var(--mz-deep); color: #fff; border: none; border-radius: 3px; }
a.erfassen-knopf:hover { background: var(--mz-accent); 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; }
}

/* ---- Kartons-Index ---- */
.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: 4px; }
.karton-index-item .meta { margin-left: 0.6em; }

/* ---- 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); }
.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-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1em; min-width: 0; }
.katalog-tile { background: var(--mz-accent-pale); border: 1px solid var(--mz-accent-soft);
                border-radius: 4px; padding: 0.5em; }
.katalog-tile:target { outline: 3px solid var(--mz-deep); }
.katalog-tile a { border-bottom: none; }
.katalog-tile img { width: 100%; height: auto; display: block; border: 1px solid var(--mz-accent); }
.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: 3px;
  border-bottom: 1px solid var(--mz-accent-soft); font-size: 0.92em; }
.katalog-pager a { color: var(--mz-deep); font-weight: 600; }
.katalog-pager a:hover { background: var(--mz-accent-soft); }
.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 ---- */
.seiten-row { display: flex; gap: 1.2em; flex-wrap: wrap; align-items: flex-start; }
.seite { flex: 1 1 340px; max-width: 560px; margin: 0; }
.seite img { width: 100%; height: auto; display: block; border: 1px solid var(--mz-accent);
             background: #fff; }
.seite figcaption { font-size: 0.82em; color: var(--mz-muted); margin-top: 0.3em; }

.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; }
}