/* ==========================================================================
   Zeitspuren, ein Stylesheet für alles.
   Neu gebaut 04.08.2026 nach Ferdis Vorgabe: weiß, klinisch, ruhig, nicht
   verwirrend. Referenz für die Haltung: nomastudios.at, wo das Bild die
   Bühne ist und die Typografie darüber schwebt.

   Grundregeln dieses Designs:
   - Weiß trägt, Bilder tragen, sonst nichts.
   - Eine Serif für Überschriften, eine Sans für alles Bedienbare.
   - Genau ein Aktionsknopf pro Ansicht, schwarz auf weiß, nichts blinkt.
   - Linien statt Kästen, Luft statt Rahmen.
   ========================================================================== */

/* V2-Optik (02.09.2026): warmes Papier und Tinte statt Klinikweiss, EINE variable
   Grotesk (Archivo, selbst gehostet) fuer alles, Haarlinien in warmem Ton.
   Vorbild: julius.flowmade.cloud, uebersetzt auf Zeitspuren. Die Token-Umstellung
   traegt die neue Sprache in ALLE Seiten, die Regeln unten bleiben unveraendert. */
@font-face {
  font-family: "Archivo";
  src: url("/v2-assets/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --weiss: #f2efe8;
  --papier: #ece8df;
  --tinte: #0e0d0b;
  --grau: #6d685f;
  --linie: rgba(14, 13, 11, 0.14);
  --linie-stark: rgba(14, 13, 11, 0.28);
  --akzent: #0e0d0b;
  --gut: #17683a;
  --warn: #8a5a00;
  --fehler: #a32020;

  --serif: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rand: 22px;
  --breit: 1180px;
  --schmal: 660px;
  --ruhe: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: var(--tinte); color: var(--weiss); }

/* Das hidden-Attribut muss jede display-Regel schlagen, sonst tauchen versteckte
   Elemente auf, sobald eine Klasse display setzt (JS steuert damit ganze Ansichten) */
[hidden] { display: none !important; }

/* Kein Browser-Blau: Links tragen die Textfarbe und eine feine Linie */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; text-decoration-color: var(--linie-stark);
    transition: text-decoration-color .18s var(--ruhe); }
a:hover { text-decoration-color: var(--tinte); }
a.knopf, a.marke, a.listenzeile--link { text-decoration: none; }

:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

/* ---------- Grundraster ---------------------------------------------- */

.seite { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.seite--schmal { max-width: var(--schmal); }
/* Steht ein schmaler Block unter einem breiten, muss er dessen linke Kante halten,
   sonst springt das Layout in der Mitte. Nicht die Seite verschmälern, nur den Inhalt. */
.seite--links { max-width: var(--breit); }
.seite--links > * { max-width: var(--schmal); }

/* Nur vertikal setzen, sonst wird das seitliche Padding von .seite still überschrieben */
.abschnitt { padding-top: 72px; padding-bottom: 72px; }
.abschnitt--eng { padding-top: 44px; padding-bottom: 44px; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }

/* ---------- Kopfzeile ------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px var(--rand);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf--transparent {
  position: absolute; left: 0; right: 0; background: none;
  backdrop-filter: none; border-bottom: 0;
}
.marke {
  font-family: var(--serif); font-size: 20px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: inherit; font-weight: 400;
}
.kopf--transparent .marke, .kopf--transparent .kopf-rechts { color: var(--weiss); }
/* Faellt das Buehnenbild aus, gibt es keinen dunklen Grund mehr und die weisse
   Kopfzeile waere unsichtbar. Die Klasse setzt der Ausfall-Handler am Bild. */
.ohne-buehnenbild .kopf--transparent { border-bottom: 1px solid var(--linie); }
.ohne-buehnenbild .kopf--transparent .marke,
.ohne-buehnenbild .kopf--transparent .kopf-rechts { color: var(--tinte); }
.ohne-buehnenbild .kopf--transparent .kopf-rechts a { color: var(--grau); }
.kopf-rechts { font-size: 14px; color: var(--grau); }
.kopf-rechts a { color: inherit; text-decoration: none; }
.kopf-rechts a:hover { color: var(--tinte); }

/* ---------- Typografie ------------------------------------------------ */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 6.5vw, 62px); line-height: 1.04; }
h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.12; }
h3 { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.25; }

.vorspann { font-size: clamp(16px, 2vw, 19px); color: var(--grau); max-width: 58ch; margin: 18px 0 0; }
.klein { font-size: 13.5px; color: var(--grau); }

.marke-zeile {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--grau); margin: 0 0 14px;
}

/* ---------- Bühne, das Bild trägt ------------------------------------- */

.buehne {
  position: relative; min-height: min(78vh, 620px);
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--tinte);
}
.buehne img.buehne-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: langsam-heran 18s var(--ruhe) forwards;
}
.buehne::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.62) 100%);
}
.buehne-inhalt {
  position: relative; z-index: 2; color: var(--weiss);
  padding: 0 var(--rand) 54px; max-width: var(--breit); margin: 0 auto; width: 100%;
}
.buehne-inhalt h1 { color: var(--weiss); }
.buehne-inhalt .vorspann { color: rgba(255, 255, 255, .88); max-width: 46ch; }

/* Halbe Bühne: der Schauplatz zeigt sich, nimmt aber nicht den ganzen Schirm */
.buehne--halb { min-height: min(52vh, 420px); }
.buehne--halb .buehne-inhalt { padding-bottom: 38px; }
.buehne-inhalt .marke-zeile { color: rgba(255, 255, 255, .72); }
/* Fehlt das Bild, bleibt kein schwarzer Block stehen */
.buehne--leer { min-height: 0; background: none; }
.buehne--leer::after { display: none; }
.buehne--leer .buehne-inhalt { color: var(--tinte); padding: 40px var(--rand) 0; }
.buehne--leer .buehne-inhalt h1 { color: var(--tinte); }
.buehne--leer .buehne-inhalt .marke-zeile { color: var(--grau); }
/* Ohne Bild traegt kein dunkler Grund mehr: der Vorspann muss von Weiss auf Grau
   umschalten, sonst steht er unsichtbar auf der Seite. */
.buehne--leer .buehne-inhalt .vorspann { color: var(--grau); }
.buehne--leer .weiterhinweis { display: none; }

@keyframes langsam-heran { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ---------- Bedienelemente -------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1;
  padding: 17px 30px; border: 1px solid var(--tinte); border-radius: 2px;
  background: var(--tinte); color: var(--weiss); cursor: pointer;
  text-decoration: none; transition: background .18s var(--ruhe), color .18s var(--ruhe);
}
.knopf:hover { background: #262626; }
.knopf:disabled { opacity: .28; cursor: default; }
.knopf--leise { background: none; color: var(--tinte); border-color: var(--linie-stark); }
.knopf--leise:hover { background: var(--papier); border-color: var(--tinte); }
.knopf--breit { width: 100%; }
/* Am Handy trägt die volle Breite. Am Schreibtisch wirkt ein schwarzer Balken über
   die ganze Spalte plump, deshalb dort begrenzen. */
@media (min-width: 700px) { .knopf--breit { max-width: 420px; } }
.knopf--hell { background: var(--weiss); color: var(--tinte); border-color: var(--weiss); }
.knopf--hell:hover { background: rgba(255,255,255,.86); }

.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Formulare -------------------------------------------------- */

label { display: block; font-size: 14px; font-weight: 500; margin: 22px 0 7px; }
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--tinte);
  background: var(--weiss); border: 0; border-bottom: 1px solid var(--linie-stark);
  border-radius: 0; padding: 12px 2px; transition: border-color .18s var(--ruhe);
}
input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: var(--tinte); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grau) 50%), linear-gradient(135deg, var(--grau) 50%, transparent 50%); background-position: calc(100% - 14px) center, calc(100% - 9px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
textarea { resize: vertical; min-height: 96px; }
.feld-hinweis { font-size: 13px; color: var(--grau); margin: 6px 0 0; }

.haken {
  display: block; position: relative; padding-left: 34px; font-size: 14.5px; font-weight: 400;
  margin: 16px 0; cursor: pointer; line-height: 1.5; max-width: 62ch;
}
.haken input { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; margin: 0; accent-color: var(--tinte); }
.haken strong { font-weight: 500; }

/* ---------- Meldungen -------------------------------------------------- */

.meldung { font-size: 14.5px; padding: 14px 0 14px 16px; border-left: 2px solid var(--linie-stark); margin: 18px 0; }
.meldung--gut { border-left-color: var(--gut); color: var(--gut); }
.meldung--fehler { border-left-color: var(--fehler); color: var(--fehler); }
.meldung--warn { border-left-color: var(--warn); color: var(--warn); }

/* ---------- Personen ---------------------------------------------------- */

.personen { display: flex; flex-wrap: wrap; gap: 24px; margin: 26px 0; }
.person { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; }
.person img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; filter: grayscale(.12); }
.person-name { font-size: 13.5px; color: var(--grau); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person--neu button {
  width: 88px; height: 88px; border-radius: 50%; border: 1px solid var(--linie-stark);
  background: none; color: var(--grau); font-size: 26px; font-weight: 200; cursor: pointer;
  transition: border-color .18s var(--ruhe), color .18s var(--ruhe);
}
.person--neu button:hover { border-color: var(--tinte); color: var(--tinte); }

/* Auswählbare Personen */
.wahl { display: flex; flex-wrap: wrap; gap: 24px; margin: 26px 0; }
.wahl label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; margin: 0; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; filter: grayscale(.5) contrast(.92); transition: filter .2s var(--ruhe), box-shadow .2s var(--ruhe); }
.wahl input:checked + img { filter: none; box-shadow: 0 0 0 2px var(--weiss), 0 0 0 4px var(--tinte); }
.wahl input:focus-visible + img { box-shadow: 0 0 0 2px var(--weiss), 0 0 0 4px var(--tinte); }

/* ---------- Kacheln und Galerie ---------------------------------------- */

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px; }
.raster--weit { gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
/* Am Handy zwei Spalten: fuenfzehn Schauplaetze sind sonst eine endlose Rolle */
@media (max-width: 560px) {
  .raster--weit { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .raster--weit .kachel-text { padding: 10px 0 14px; }
  .raster--weit .kachel-text b { font-size: 15.5px; }
  /* Beschreibung auf zwei Zeilen begrenzen, sonst versetzen sich die Kachelreihen */
  .raster--weit .kachel-text span:not(.mono-klein) {
    font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .raster--weit .kachel-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .raster--weit .kachel--knopf .mono-klein { font-size: 9.5px; margin-bottom: 5px; }
}

.kachel { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden; background: var(--papier); }
.kachel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ruhe); }
/* Erinnerungsbilder sind hochformatig: oben anschneiden, damit die Gesichter drin bleiben */
#galerie .kachel img { aspect-ratio: 4 / 5; object-position: center 20%; }
.kachel:hover img { transform: scale(1.03); }
.kachel-text { padding: 14px 2px 22px; }
.kachel-text b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.kachel-text span { display: block; font-size: 13.5px; color: var(--grau); margin-top: 3px; }
.kachel--wartet { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--papier); color: var(--grau); font-size: 14px; text-align: center; padding: 20px; }
.kachel--gesperrt { opacity: .42; pointer-events: none; }

.aktionen { display: flex; gap: 20px; padding: 0 2px 22px; }
.aktionen a, .aktionen button {
  font-family: var(--sans); font-size: 14px; color: var(--tinte); background: none;
  border: 0; border-bottom: 1px solid var(--linie-stark); padding: 0 0 3px; cursor: pointer; text-decoration: none;
  transition: border-color .18s var(--ruhe);
}
.aktionen a:hover, .aktionen button:hover { border-bottom-color: var(--tinte); }

/* ---------- Zahlen und Zeitreise ---------------------------------------- */

.zeitreise { text-align: center; padding: 56px 0; }
.jahr { font-family: var(--serif); font-size: clamp(72px, 17vw, 148px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jahr .zehner { color: var(--linie-stark); }
.epoche { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--grau); margin-top: 16px; }
.fortschritt { height: 1px; background: var(--linie); margin: 34px auto 0; max-width: 420px; }
.fortschritt i { display: block; height: 100%; background: var(--tinte); transition: width 1s var(--ruhe); }
.warte-hinweis { font-size: 14px; color: var(--grau); margin-top: 26px; }

.schritte { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.schritte span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); padding: 5px 12px; border: 1px solid var(--linie); }
.schritte span.done { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 30%, var(--linie)); }
.schritte span.run { color: var(--tinte); border-color: var(--tinte); }
.schritte span.fail { color: var(--fehler); border-color: var(--fehler); }

/* ---------- Auswahl der Fassungen --------------------------------------- */

.fassungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; margin-top: 34px; }
.fassung { margin: 0; }
.fassung img { width: 100%; cursor: zoom-in; }
.fassung button { margin-top: 14px; width: 100%; }
.fassung--vorschau { opacity: .55; }

.ergebnis { margin-top: 34px; }
.ergebnis img { width: 100%; cursor: zoom-in; }

/* ---------- Tabellen und Listen ----------------------------------------- */

.liste { border-top: 1px solid var(--linie); }
.listenzeile { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; padding: 15px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px; }
.listenzeile .mono { font-family: var(--mono); font-size: 12px; color: var(--grau); }
.listenzeile b { font-weight: 500; }

/* ---------- Raster für Textspalten und Schritte -------------------------- */

.zweispalt { display: grid; gap: 64px; }
@media (min-width: 900px) { .zweispalt { grid-template-columns: 1fr 1fr; gap: 84px; } }

.feldzeile { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.feldzeile input[type="text"] { flex: 1; min-width: 190px; margin: 0; }

.schrittfolge { display: grid; gap: 48px; margin-top: 40px; }
@media (min-width: 820px) { .schrittfolge { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
.schrittfolge h3 { margin-top: 14px; }
.schrittfolge p { color: var(--grau); font-size: 15px; margin: 12px 0 0; max-width: 40ch; }
.schrittnr {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--grau);
  display: block; padding-bottom: 14px; border-bottom: 1px solid var(--linie);
}

a.listenzeile--link {
  color: inherit; text-decoration: none; justify-content: space-between;
  transition: padding-left .2s var(--ruhe);
}
a.listenzeile--link:hover { padding-left: 8px; }
a.listenzeile--link b { border-bottom: 1px solid transparent; }
a.listenzeile--link:hover b { border-bottom-color: var(--tinte); }

/* ---------- Kachel als Knopf, Aufnahmefeld, Hinweisliste ---------------- */

.kachel--knopf {
  border: 0; padding: 0; margin: 0; background: none; font: inherit; text-align: left; cursor: pointer;
  outline-offset: 3px;
}
.kachel--knopf .kachel-text { padding: 14px 2px 20px; }
.kachel--knopf .mono-klein {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grau); display: block; margin-bottom: 8px;
}
.kachel--gewaehlt img { box-shadow: inset 0 0 0 3px var(--tinte); transform: scale(1.03); }
.kachel--gewaehlt .kachel-text b { border-bottom: 1px solid var(--tinte); display: inline-block; }

.aufnahme {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 190px; margin-top: 26px; padding: 30px 22px; cursor: pointer; text-align: center;
  border: 1px dashed var(--linie-stark); background: var(--papier);
  transition: border-color .2s var(--ruhe), background .2s var(--ruhe);
}
.aufnahme:hover { border-color: var(--tinte); background: var(--weiss); }
.aufnahme strong { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.aufnahme span { font-size: 13px; color: var(--grau); }
.aufnahme img.preview { max-width: 190px; max-height: 190px; object-fit: cover; margin-bottom: 6px; }

.hinweise { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.hinweise li { display: flex; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px; color: var(--grau); }
.hinweise .nr { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--linie-stark); flex: none; padding-top: 3px; }

/* ---------- Kennzahlen, Formularfelder, breite Listenzeilen -------------- */

.kennzahlen { display: flex; flex-wrap: wrap; gap: 52px; margin-top: 38px; }
.kennzahl b { display: block; font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.kennzahl span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin-top: 10px; }

.formfeld { margin-top: 34px; }
.formfeld > label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 4px; }
.formfeld input[type="text"], .formfeld textarea, .formfeld select { margin: 0; }
.formfeld .feld-hinweis { margin-top: 8px; }

.listenzeile--breit { align-items: center; gap: 20px; }
.listenzeile--breit .mono { display: block; margin-top: 3px; }
.listenzeile--still { opacity: .5; }
.zeilenbild { width: 96px; height: 64px; object-fit: cover; flex: none; background: var(--papier); }
.knopf--klein { padding: 9px 16px; font-size: 12.5px; }

/* ---------- Druckbogen mit QR-Schildern ---------------------------------- */

.qrbogen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 26px; padding-bottom: 70px; }
.qrschild { border: 1px solid var(--linie); padding: 26px 20px 24px; text-align: center; break-inside: avoid; }
.qrschild--eingang { border-color: var(--tinte); border-width: 2px; }
.qrschild img { width: 186px; height: 186px; image-rendering: pixelated; }
.qr-marke { display: block; font-family: var(--serif); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--grau); margin-top: 18px; }
.qrschild b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 400; margin-top: 10px; }
.qr-sub { display: block; font-size: 12.5px; color: var(--grau); margin-top: 6px; }

/* ---------- Knopfgruppe in Zeilen, Passwort-Ausgabe ---------------------- */

.zeilenknoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.zeilenknoepfe .knopf { text-decoration: none; }

.geheimnis { border: 1px solid var(--tinte); padding: 20px 22px; margin-top: 26px; font-size: 14px; }
.geheimnis code { display: block; font-family: var(--mono); font-size: 16px; margin-top: 12px; user-select: all; word-break: break-all; }
.geheimnis span { display: block; font-size: 12.5px; color: var(--grau); margin-top: 14px; }

/* ---------- Ampelfarben und Chips im Monitor ----------------------------- */

.kennzahl--rot b { color: var(--fehler); }
.kennzahl--gruen b { color: var(--gut); }
.marke-chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); border: 1px solid var(--linie); padding: 3px 9px; }
.status-ok { color: var(--gut); }
.status-err { color: var(--fehler); }

/* ---------- Tabellen ------------------------------------------------------ */

.tabellenrahmen { overflow-x: auto; margin-top: 30px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grau); font-weight: 400; text-align: left; padding: 0 18px 12px 0;
  border-bottom: 1px solid var(--linie-stark); white-space: nowrap;
}
.tabelle td { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle img { width: 84px; height: 56px; object-fit: cover; display: block; }
.tabelle a { color: inherit; }
.status-failed { color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 34%, var(--linie)); }
.status-done { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 34%, var(--linie)); }

/* ---------- Grosse Auswahlliste, Scroll-Hinweis, gegliederter Hinweistext -- */

.liste--gross .listenzeile { padding: 22px 0; }
.liste--gross b { font-family: var(--serif); font-size: clamp(21px, 3vw, 26px); font-weight: 400; }
.liste--gross .pfeil { font-size: 20px; color: var(--linie-stark); transition: color .18s var(--ruhe), transform .2s var(--ruhe); display: inline-block; }
.liste--gross a.listenzeile--link:hover .pfeil { color: var(--tinte); transform: translateX(5px); }
.liste--gross a.listenzeile--link:hover b { border-bottom-color: transparent; }

/* Nur wo seitlich Platz ist, sonst laeuft der Hinweis in den Vorspann */
.weiterhinweis { display: none; }
@media (min-width: 760px) { .weiterhinweis { display: block; } }
.weiterhinweis {
  position: absolute; right: var(--rand); bottom: 30px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); writing-mode: vertical-rl;
  padding-bottom: 46px;
}
.weiterhinweis::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 36px;
  background: rgba(255, 255, 255, .45); animation: hinweis-gleiten 2.4s var(--ruhe) infinite;
}
@keyframes hinweis-gleiten { 0%, 100% { transform: translateY(-8px); opacity: .3; } 50% { transform: translateY(0); opacity: 1; } }

/* Rechtshinweis im Besucherfluss: gegliedert statt Textwand, aber vollstaendig sichtbar */
.einwilligung-info { margin: 16px 0 0; max-width: 62ch; border-top: 1px solid var(--linie); }
.einwilligung-info div { display: flex; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; color: var(--grau); }
.einwilligung-info dt, .einwilligung-info .was {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--linie-stark); flex: none; width: 92px; padding-top: 2px;
}
.einwilligung-info strong { color: var(--tinte); font-weight: 500; }

/* ---------- Fließtext für Rechtliches ------------------------------------ */

.rechtstext { margin-top: 48px; max-width: 68ch; }
.rechtstext h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0;
  margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--linie);
  display: flex; gap: 14px; align-items: baseline;
}
.rechtstext h3:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.rechtstext h3 .nr { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--grau); }
.rechtstext p { font-size: 15px; line-height: 1.62; color: var(--grau); margin: 14px 0 0; }
.rechtstext strong { color: var(--tinte); font-weight: 500; }

/* ---------- Fußzeile ----------------------------------------------------- */

.fuss { border-top: 1px solid var(--linie); margin-top: 80px; padding: 30px var(--rand) 46px; }
.fuss-inhalt { max-width: var(--breit); margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--grau); }
.fuss a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie); }
.fuss a:hover { border-bottom-color: var(--grau); }

/* ---------- Einblenden beim Scrollen ------------------------------------- */

/* Kurz genug, dass nach einem schnellen Scroll-Sprung kein blasser Text stehen bleibt */
.auftauchen { opacity: 0; transform: translateY(11px); transition: opacity .42s var(--ruhe), transform .42s var(--ruhe); }
.auftauchen.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .auftauchen { opacity: 1; transform: none; }
}

/* ---------- Anmeldeansichten -------------------------------------------- */
/* Der Verwaltungsstrang hat kein Foto zu zeigen, ein Museums-Werkzeug soll auch
   keins vortaeuschen. Statt eines Bildes traegt hier die Satzarchitektur: ein
   gesetzter Block mit sichtbarer Kante, ein Mono-Etikett als Kennung und eine
   stehende Randnotiz wie ein Kolumnentitel. Die leere Flaeche wird dadurch als
   Absicht lesbar statt als Versaeumnis. Alles nur mit vorhandenen Tokens.
   Unter 760px bleibt die schlichte Anmeldung unangetastet, der Befund betraf
   ausdruecklich die grossen Schirme. */

.anmeldung {
  position: relative; isolation: isolate;
  min-height: calc(100vh - 210px);
  display: flex; flex-direction: column; justify-content: center;
}
.anmeldung .feldgruppe { max-width: 380px; margin-top: 30px; }

/* Das Pult: gibt dem Block eine Kante und einen definierten Platz */
.anmeldung-pult {
  position: relative; z-index: 1;
  max-width: 520px; padding: 42px 40px 44px;
  border: 1px solid var(--linie); background: var(--weiss);
}
.anmeldung-pult .marke-zeile { margin-top: 0; }
.anmeldung-pult h1 { font-size: clamp(30px, 4.4vw, 44px); margin-top: 14px; }
.anmeldung-pult .vorspann { font-size: 15.5px; margin-top: 12px; }

/* Kennung: sagt in einem Wort, welches Werkzeug das hier ist */
.anmeldung-kennung {
  position: absolute; top: -1px; left: 40px; transform: translateY(-50%);
  background: var(--weiss); padding: 0 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--grau);
}

.anmeldung .initiale, .anmeldung .randnotiz { display: none; }

@media (min-width: 760px) {
  /* Wasserzeichen im Serif der Ueberschriften, in derselben Farbe wie die
     Zehnerstelle des Jahreszaehlers. Liegt hinter allem und faengt keine Klicks. */
  .anmeldung .initiale {
    display: block; position: absolute; z-index: -1; max-width: none;
    top: 50%; right: -12px; transform: translateY(-50%);
    font-family: var(--serif); font-weight: 400; line-height: .8;
    font-size: clamp(200px, 26vw, 420px); color: var(--linie);
    user-select: none; pointer-events: none;
  }
  .anmeldung .randnotiz {
    display: block; position: absolute; max-width: none;
    top: 4px; right: 0; writing-mode: vertical-rl;
    font-family: var(--mono); font-size: 10px; letter-spacing: .28em;
    text-transform: uppercase; color: var(--linie-stark);
    user-select: none; pointer-events: none;
  }
}

/* 759.98 statt 760: bei genau 760px greifen sonst beide Abfragen und der
   Anmeldeblock landet in einem Mischzustand aus Pult und Nicht-Pult. */
@media (max-width: 759.98px) {
  .anmeldung { min-height: 0; display: block; }
  /* Am Handy traegt die Kante nicht, sie engt nur ein */
  .anmeldung-pult { border: 0; padding: 0; max-width: none; }
  /* Ohne Rahmen hat die Kennung nichts zu markieren und doppelt nur die Marke-Zeile */
  .anmeldung-kennung { display: none; }
}

/* ---------- Drucken ------------------------------------------------------- */

@media print {
  .kopf, .fuss, .nicht-drucken { display: none !important; }
  body { background: #fff; }
  .abschnitt { padding-top: 0; padding-bottom: 0; border: 0; }
  /* Die Einblendung darf im Druck nichts verschlucken: der Drucker scrollt nicht */
  .auftauchen { opacity: 1 !important; transform: none !important; }
  /* QR-Boegen: Schilder nie ueber einen Seitenumbruch reissen, Linien schwarz drucken */
  .qrschild { break-inside: avoid; page-break-inside: avoid; border-color: #000; }
  .qrschild--eingang { border-width: 2.5px; }
  .qrbogen { gap: 18px; }
  /* Galerie-Ausdruck: Bilder vollstaendig statt angeschnitten */
  #galerie .kachel img { aspect-ratio: auto; object-fit: contain; }
}

/* ---------- Personen einscannen ------------------------------------------ */

.scanzeile {
  display: flex; gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--linie);
}
.scanzeile img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; flex: none; }
.scanzeile input[type="text"] { flex: 1; min-width: 0; margin: 0; border-bottom-color: transparent; }
.scanzeile input[type="text"]:focus { border-bottom-color: var(--tinte); }
.scanzeile button {
  flex: none; background: none; border: 0; color: var(--grau); font-size: 20px; line-height: 1;
  padding: 6px 8px; cursor: pointer; transition: color .18s var(--ruhe);
}
.scanzeile button:hover { color: var(--fehler); }

/* ---------- Code-Scanner --------------------------------------------------- */

#scanner {
  position: fixed; inset: 0; z-index: 200; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#scanner[hidden] { display: none; }
.scanner-kopf {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px var(--rand) calc(16px + env(safe-area-inset-top));
  color: var(--weiss); font-size: 14.5px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent);
}
#scanVideo { width: 100%; height: 100%; object-fit: cover; }
.scanner-rahmen {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(74vw, 300px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.9);
  border-radius: 3px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
}
.scanner-status {
  position: absolute; left: 0; right: 0; bottom: calc(46px + env(safe-area-inset-bottom));
  text-align: center; color: var(--weiss); font-size: 14.5px; margin: 0; padding: 0 var(--rand);
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

/* ==========================================================================
   V2-OPTIK-LAYER (02.09.2026), Vorbild julius.flowmade.cloud.
   Ueberschreibt gezielt Bestandsregeln: eckige Knoepfe in Grossbuchstaben,
   Etiketten mit Sperrung, Haarlinien-Kacheln, Filmkorn, Stapfspuren im
   Wartezustand. IDs, Klassen und Ablaeufe bleiben unveraendert.
   ========================================================================== */

h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 0.98; text-transform: none; }
h2 { font-weight: 700; letter-spacing: -0.01em; }

.marke {
  font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; font-size: 15px;
}
.kopf-rechts { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }

.marke-zeile {
  font-size: 11px !important; letter-spacing: 0.32em !important;
  text-transform: uppercase; font-weight: 600; color: var(--grau);
}

.knopf {
  border-radius: 2px !important;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.knopf:hover { transform: translateY(-1px); }

.kachel { border: 1px solid var(--linie); border-radius: 2px; padding: 10px 10px 0; }
.kachel img { border-radius: 1px; }
.kachel:hover { border-color: var(--linie-stark); }

/* Filmkorn, kaum sichtbar, gibt dem Papier Textur */
body::after {
  content: ""; position: fixed; inset: -60px; pointer-events: none; z-index: 40; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Stapfspuren im Wartezustand: eine kleine Kette wandert immer wieder durch */
.spurlauf {
  display: flex; gap: 18px; justify-content: center; align-items: center;
  margin: 26px 0 4px; height: 30px;
}
.spurlauf i {
  width: 15px; height: 24px; display: block; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 46'%3E%3Cg fill='%230e0d0b'%3E%3Cpath d='M8 12 C5 5 8 0 14 0 C20 0 24 5 23 13 C22.4 19 24 24 23.4 30 C22.8 36 19 40 14.4 40 C10 40 7.4 36.4 7.6 31 C7.8 25 8.6 18 8 12 Z'/%3E%3Cellipse cx='5.4' cy='7.8' rx='2.6' ry='3.3'/%3E%3Cellipse cx='9.6' cy='3.6' rx='2.2' ry='2.7'/%3E%3Cellipse cx='14.4' cy='1.9' rx='2.1' ry='2.5'/%3E%3Cellipse cx='19.2' cy='2.6' rx='1.9' ry='2.3'/%3E%3Cellipse cx='23.2' cy='5.2' rx='1.7' ry='2.1'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  animation: spurtritt 5.6s ease-in-out infinite;
}
.spurlauf i:nth-child(even) { transform: scaleX(-1) rotate(6deg); }
.spurlauf i:nth-child(odd) { transform: rotate(-6deg); }
.spurlauf i:nth-child(1) { animation-delay: 0s; }
.spurlauf i:nth-child(2) { animation-delay: 0.35s; }
.spurlauf i:nth-child(3) { animation-delay: 0.7s; }
.spurlauf i:nth-child(4) { animation-delay: 1.05s; }
.spurlauf i:nth-child(5) { animation-delay: 1.4s; }
.spurlauf i:nth-child(6) { animation-delay: 1.75s; }
.spurlauf i:nth-child(7) { animation-delay: 2.1s; }
@keyframes spurtritt {
  0% { opacity: 0; }
  6% { opacity: 0.75; }
  45% { opacity: 0.35; }
  70%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spurlauf i { animation: none; opacity: 0.3; }
  body::after { display: none; }
}

/* Hart codierte Weisswerte des Bestands auf warmes Papier heben */
.kopf { background: rgba(242, 239, 232, 0.92); }
.knopf--hell:hover { background: rgba(242, 239, 232, 0.88); }