@charset "UTF-8";
/* =============================================================================
   ACKR — Landingpage Stylesheet
   Version 1.0 · 08.08.2026
   Grundlage: Ackr Brand Book 0.2

   Der Schrifteinbau steht in ackr-schriften.css — dieselbe Datei nutzen
   auch Impressum und Datenschutzerklärung.

   INHALT
   01  Tokens ............ Farben, Schrift, Maße
   02  Grundlagen ........ Reset, Body, Fokus
   03  Layout ............ Raster, Abschnitte
   04  Typografie ........ Überschriften, Fließtext, Rubriken
   05  Hilfsklassen ...... Farbe, Abstand, Textbreite, Flächen
   06  Schaltflächen
   07  Navigation ........ Kopfzeile, Fortschritt, Punktnavigation
   08  Bewegung .......... Auftritt, Zeilenmasken
   09  Hero .............. Ornament, Kennzeichen
   10  Telefon ........... WhatsApp-Mockup
   11  Ablaufende Frist .. Scrollbahn mit stehender Bühne
   12  Angeheftete Szene . Gerät bleibt, Schritte wechseln
   13  Signature ......... Satz wird Datensatz
   14  ackr.log
   15  Freigabe
   16  Formular
   17  Fußbereich
   18  Bewegungsreduzierung

   REGELN AUS DEM BRAND BOOK
   · Grün, Gelb und Rot sind ausschließlich Statusfarben. Sie erscheinen nicht
     als Marken-, Flächen- oder Schaltflächenfarbe.
   · Löss ist ein Flächenton, nie ein Signal (kein Punkt, kein Badge).
   · Die --wa-* Werte gehören zur fremden WhatsApp-Oberfläche und dürfen
     ausschließlich innerhalb der Mockups verwendet werden.
   · Keine Farbverläufe, keine Schlagschatten als Schmuck, Radien 2–3 px.
   · Schriften im Produktivbetrieb selbst hosten, nicht über eine Fremd-CDN.
   ============================================================================= */


/* =============================================================================
   01  TOKENS
   ============================================================================= */
:root{
  /* Boden — neutrale Skala, warm-grau gebrochen */
  --boden-0:#FCFCFA;  --boden-50:#F3F5F3;  --boden-100:#E6EAE7;
  --boden-200:#D2D8D4; --boden-300:#B0B9B4; --boden-400:#8A948F;
  --boden-500:#67716C; --boden-600:#4C5551; --boden-700:#363E3A;
  --boden-800:#232A27; --boden-900:#14181A;

  /* Feldblau — Primärfarbe */
  --blau-50:#EDF1FA;  --blau-100:#D3DEF4; --blau-300:#7E9AD9;
  --blau-600:#1A45A8; --blau-800:#0E265C;
  --blau-tint:#F1F5FD;                  /* Zeilenmarkierung "noch offen" */

  /* Löss — Flächenton, nur großflächig */
  --loess-100:#F4EEE0; --loess-200:#E4D9BE; --loess-rand:#CFC0A0;

  /* Status — für die Marke gesperrt */
  --gruen:#17683F; --gruen-fl:#E3F1E9;
  --gelb:#99610A;  --gelb-fl:#FBEDD5; --gelb-rand:#E3C27E;
  --rot:#A82B21;

  /* Fremdoberfläche WhatsApp — ausschließlich in den Mockups */
  --wa-bar:#008069; --wa-bg:#EFE7DE; --wa-out:#D9FDD3; --wa-in:#FFFFFF;
  --wa-meta:#667781; --wa-check:#53BDEB; --wa-icon:#54656F;

  /* Schrift */
  --grotesk:"Archivo",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Fira Sans",system-ui,sans-serif;
  --mono:"Fira Mono",ui-monospace,monospace;

  /* Maße — alles Größere skaliert mit der Fensterhöhe,
     damit jeder Abschnitt vollständig in den Viewport passt */
  --mx:clamp(20px,4.6vw,60px);          /* Seitenrand */
  --navh:60px;                          /* Höhe der Kopfzeile */
  --luft:clamp(14px,2.4svh,30px);       /* vertikale Grundluft */
  /* Telefonbreite: die Höhe ist daran gekoppelt (1 : 2,061), deshalb teilt
     der Wert die verfügbare Fensterhöhe durch gut das Seitenverhältnis */
  --telw:clamp(230px,calc((100svh - 230px) / 2.25),300px);
  --kurve:cubic-bezier(.16,.84,.28,1);  /* Standardkurve */
}


/* =============================================================================
   02  GRUNDLAGEN
   ============================================================================= */
*{box-sizing:border-box}

/* Gescrollt wird normal. Nur Sprungmarken (Kopfzeile, Punkte, Schaltflächen)
   gleiten weich — vom Browser gerechnet, dadurch jederzeit unterbrechbar. */
html{
  scroll-padding-top:calc(var(--navh) + 8px);
  scroll-behavior:smooth;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  background:var(--boden-0);
  color:var(--boden-900);
  font-family:var(--sans);
  font-size:clamp(15.5px,1.15vw,17px);
  line-height:1.52;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

svg{max-width:100%}
a{color:var(--blau-600)}
:focus-visible{outline:2px solid var(--blau-600);outline-offset:3px}


/* =============================================================================
   03  LAYOUT
   ============================================================================= */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding-left:var(--mx);
  padding-right:var(--mx);
}

/* Ein Abschnitt füllt mindestens einen Bildschirm, wächst aber mit dem Inhalt.
   Gescrollt wird frei; es rastet nichts ein.
   Der Anschlag unter der Kopfzeile kommt aus scroll-padding-top am Dokument
   (Abschnitt 02). Ein zusätzliches scroll-margin hier würde sich addieren. */
.tafel{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--navh) + var(--luft));
  padding-bottom:var(--luft);
}
.tafel > .wrap{width:100%;position:relative;z-index:1}

/* Abschnitte mit wenig Inhalt sitzen zentriert deutlich tiefer als die
   dicht gefüllten — bei 900 px Fensterhöhe rund 175 px. Das zusätzliche
   Polster unten schiebt den Inhalt nach oben, bis seine Oberkante ungefähr
   dort liegt wie in den übrigen Abschnitten.
   Nur für breite und hohe Fenster: schmal steht der Inhalt untereinander
   und ist dann selbst hoch genug — dort würde das Polster ihn unter die
   Kopfzeile drücken. */
@media(min-width:981px) and (min-height:700px){
  .tafel--kurz{padding-bottom:calc(var(--luft) + min(30svh,320px))}
}

/* Zweispaltig: Text links, Anschauung rechts */
.zwei{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,3.6vw,54px);
  align-items:center;
}
@media(max-width:980px){
  .zwei{grid-template-columns:1fr;gap:30px}
}


/* =============================================================================
   04  TYPOGRAFIE
   Überschriften Serife, Fließtext und Bedienelemente serifenlos,
   Kennungen und Zahlen dicktengleich.
   ============================================================================= */
/* Schriftbild aus der Scroll-Vorschau: feiner Schnitt, enge Laufweite,
   dicht gestapelte Zeilen. Die Größe bleibt bei der Spaltenbreite —
   die Seite ist zweigeteilt, die Überschrift hat die halbe Breite.
   Die Gewichte sind Zwischenwerte auf der wght-Achse (200–900): fein
   genug für den Eindruck aus der Vorschau, aber mit etwas mehr Strich
   als der reine 300er-Schnitt. */
h1{
  font-family:var(--serif);
  font-variation-settings:"opsz" 60,"wght" 350;
  font-size:clamp(32px,3.9vw,55px);
  line-height:1.03;
  letter-spacing:-.028em;
  margin:0;
}
h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 40,"wght" 330;
  font-size:clamp(26px,3.25vw,42px);
  line-height:1.13;
  letter-spacing:-.012em;
  margin:0;
}
h3{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20,"wght" 400;
  font-size:19px;
  line-height:1.3;
  margin:0 0 4px;
}

.sub{
  font-size:clamp(15.5px,1.32vw,18px);
  color:var(--boden-600);
  max-width:52ch;
  margin:clamp(10px,1.6svh,18px) 0 0;
  line-height:1.5;
}
/* Nach der Hauptüberschrift steht mehr Luft als nach einer Zwischenzeile —
   die enge Zeilenhöhe der h1 nimmt ihr sonst die Luft nach unten */
h1 + .sub{margin-top:clamp(16px,2.8svh,30px)}

.klein{font-size:13px;color:var(--boden-500);line-height:1.48;margin:0}
.mikro{font-size:11.5px;color:var(--boden-400);line-height:1.42;margin:0}

/* Rubrik über der Überschrift, mit laufender Nummer */
.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--boden-500);
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--boden-300)}
.eyebrow .idx{color:var(--blau-600)}

/* Kennungen, Beträge, Prüfsummen */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}


/* =============================================================================
   05  HILFSKLASSEN
   Ersetzen wiederkehrende Einzelfälle, damit im Markup kein style-Attribut
   nötig ist. Bewusst knapp gehalten — kein vollständiges Utility-System.
   ============================================================================= */

/* Textfarbe */
.t-blau{color:var(--blau-600)}
.t-blau-hell{color:var(--blau-300)}
.t-gruen{color:var(--gruen)}
.t-check{color:var(--wa-check)}
.t-boden-400{color:var(--boden-400)}
.t-boden-500{color:var(--boden-500)}
.t-boden-600{color:var(--boden-600)}
.t-weiss{color:#fff}
.stark{color:var(--boden-900);font-weight:600}

/* Abstand nach oben */
.mt-1{margin-top:8px}
.mt-2{margin-top:10px}
.mt-3{margin-top:14px}
.mt-luft{margin-top:clamp(10px,1.6svh,16px)}
.mt-block{margin-top:clamp(18px,3svh,28px)}
.mb-block{margin-bottom:clamp(20px,3.6svh,44px)}

/* Textbreite — Lesbarkeit vor Ausnutzung der Spalte */
.eng-s{max-width:46ch}
.eng-m{max-width:56ch}
.eng-l{max-width:62ch}
.eng-xl{max-width:70ch}

/* Ausrichtung */
.zentriert{text-align:center}

/* Abschnittsflächen */
.flaeche--nebel{
  background:var(--boden-50);
  border-top:1px solid var(--boden-200);
  border-bottom:1px solid var(--boden-200);
}
.flaeche--loess{
  background:var(--loess-100);
  border-top:1px solid var(--loess-rand);
  border-bottom:1px solid var(--loess-rand);
}
.flaeche--tinte{background:var(--boden-900);color:var(--boden-100)}
.flaeche--tinte h2{color:#fff}
.flaeche--tinte .sub{color:var(--boden-300)}
.flaeche--tinte .eyebrow{color:var(--boden-400)}
.flaeche--tinte .eyebrow .idx{color:var(--blau-300)}
.flaeche--tinte .satz{color:var(--boden-100)}
.flaeche--tinte .q{color:#fff}
.flaeche--tinte .mikro{color:var(--boden-500)}

.dunkel{background:var(--blau-800);color:var(--boden-0)}
.dunkel h2{color:#fff}
.dunkel .sub{color:var(--blau-100)}


/* =============================================================================
   06  SCHALTFLÄCHEN
   ============================================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--sans);
  font-size:15.5px;
  font-weight:500;
  line-height:1.2;
  padding:12px 24px;
  border:1px solid transparent;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.btn--p{background:var(--blau-600);color:#fff}
.btn--p:hover{background:var(--blau-800)}
.btn--s{background:transparent;color:var(--boden-700);border-color:var(--boden-300)}
.btn--s:hover{border-color:var(--boden-600);color:var(--boden-900)}
.btn--hell{background:#fff;color:var(--blau-800)}
.btn--hell:hover{background:var(--blau-100)}
.btn--k{padding:8px 15px;font-size:13.5px}

/* Pfeil rückt beim Überfahren nach */
.btn .pf{transition:transform .22s var(--kurve)}
.btn:hover .pf{transform:translateX(3px)}

.cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:clamp(14px,2.2svh,24px)}


/* =============================================================================
   07  NAVIGATION
   ============================================================================= */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:40;
  height:var(--navh);
  background:rgba(252,252,250,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--boden-200);
}
.nav .inner{display:flex;align-items:center;gap:20px;height:var(--navh)}

.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;margin-right:auto}
.brand .wm{
  font-family:var(--grotesk);
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:22px;
  letter-spacing:-.04em;
  line-height:1;
}

.nav .link{
  font-size:14px;
  color:var(--boden-600);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
}
.nav .link::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-5px;
  height:1px;
  background:var(--blau-600);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--kurve);
}
.nav .link:hover::after,
.nav .link[aria-current="true"]::after{transform:none}
@media(max-width:1020px){.nav .link{display:none}}

/* Lesefortschritt */
.fortschritt{
  position:fixed;
  top:var(--navh);left:0;
  height:2px;width:0;
  background:var(--blau-600);
  z-index:41;
  transition:width .12s linear;
}

/* Punktnavigation mit Beschriftung beim Überfahren */
.punkte{
  position:fixed;
  right:16px;top:50%;
  transform:translateY(-50%);
  z-index:35;
  display:flex;flex-direction:column;gap:11px;
}
.punkte a{
  display:block;
  width:8px;height:8px;
  border:1px solid var(--boden-400);
  border-radius:50%;
  position:relative;
  transition:transform .3s var(--kurve),background .3s ease,border-color .3s ease;
}
.punkte a[aria-current="true"]{
  background:var(--blau-600);
  border-color:var(--blau-600);
  transform:scale(1.45);
}
.punkte a::after{
  content:attr(data-label);
  position:absolute;right:18px;top:50%;
  transform:translateY(-50%) translateX(4px);
  white-space:nowrap;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--boden-600);
  background:rgba(252,252,250,.94);
  border:1px solid var(--boden-200);
  border-radius:2px;
  padding:3px 8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s var(--kurve);
}
.punkte a:hover::after{opacity:1;transform:translateY(-50%)}
@media(max-width:1140px){.punkte{display:none}}


/* =============================================================================
   08  BEWEGUNG
   Alle Bewegung ist an .an gebunden. Ohne JavaScript und bei aktivierter
   Bewegungsreduzierung wird der Endzustand direkt gezeigt (Abschnitt 19).
   ============================================================================= */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease,transform .6s var(--kurve);
}
.reveal.an{opacity:1;transform:none}
.reveal.v2{transition-delay:.12s}
.reveal.v3{transition-delay:.24s}

/* Überschriften treten zeilenweise aus einer Maske hervor.
   Die Maske schneidet unten ab — das Polster muss die Unterlängen von g, j
   und p aufnehmen, sonst wirken sie gekappt. */
.maske{display:block;overflow:hidden;padding-bottom:.16em}
.maske > span{display:block;transform:translateY(108%);transition:transform .82s var(--kurve)}
.an .maske > span{transform:none}
.an .maske:nth-child(2) > span{transition-delay:.09s}
.an .maske:nth-child(3) > span{transition-delay:.18s}


/* =============================================================================
   09  HERO
   ============================================================================= */
/* Die Striche der Sprachnachricht als Wasserzeichen auf der rechten Seite.
   Der viewBox im Markup ist auf die Striche zugeschnitten, die Box ist also
   genau das Zeichen — dadurch reicht es bis an den rechten Rand und läuft
   dort aus dem Bild.
   Nach links läuft es über die Maske aus und ist auf Höhe der Textspalte
   längst bei null. Der Anteil an svh begrenzt die Höhe, damit die Striche in
   niedrigen Fenstern nicht oben und unten abgeschnitten werden. */
.ornament{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ornament svg{
  position:absolute;
  right:-4vw;top:50%;
  transform:translateY(-50%);
  width:min(56vw,760px,92svh);height:auto;
  color:var(--boden-100);
  opacity:0;
  transition:opacity 1.6s ease .35s;
  -webkit-mask-image:linear-gradient(96deg,transparent 6%,rgba(0,0,0,.45) 32%,#000 68%);
          mask-image:linear-gradient(96deg,transparent 6%,rgba(0,0,0,.45) 32%,#000 68%);
}
.an-orn .ornament svg{opacity:1}

/* Kennzeichen über der Überschrift */
.badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:clamp(10px,1.6svh,16px)}
.eu-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;
  border:1px solid var(--boden-200);
  border-radius:999px;
  padding:5px 15px 5px 7px;
  font-size:13.5px;font-weight:500;
  color:var(--boden-700);
}
.eu-badge .fl{
  width:24px;height:16px;
  border-radius:2px;
  display:block;flex:none;
  border:1px solid rgba(0,0,0,.12);
}
.frist{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gelb-fl);color:var(--gelb);
  font-size:13px;font-weight:500;
  padding:5px 12px;border-radius:999px;
}
.frist b{font-family:var(--mono);font-weight:500}

.marker{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:clamp(12px,1.8svh,20px);font-size:14px;color:var(--boden-600)}
.marker span{display:flex;align-items:center;gap:7px}


/* =============================================================================
   10  TELEFON — WhatsApp-Mockup
   Fremde Oberfläche. Die --wa-* Werte gelten nur hier; das Grün ist deshalb
   keine Verletzung der Statusfarbenregel.
   ============================================================================= */
.tel-spalte{display:flex;flex-direction:column;align-items:center;gap:10px}

/* Gehäuse in den Maßen eines iPhone 15/16: 71,6 × 147,6 mm, also 1 : 2,061.
   Das Seitenverhältnis liegt auf dem Rahmen (border-box), die Eckenrundung
   entspricht mit 13,5 % der Breite dem Gerät. Der Verlauf füllt die Höhe. */
.tel{
  width:var(--telw);max-width:100%;
  aspect-ratio:71.6 / 147.6;
  display:flex;flex-direction:column;
  position:relative;
  border:7px solid #1B1B1B;
  border-radius:calc(var(--telw) * .135);
  overflow:hidden;
  background:var(--wa-bg);
}
/* Dynamic Island — 125 × 36,5 pt bei 393 pt Bildschirmbreite */
.tel::before{
  content:"";
  position:absolute;z-index:3;
  top:calc(var(--telw) * .022);
  left:50%;transform:translateX(-50%);
  width:calc(var(--telw) * .30);
  height:calc(var(--telw) * .088);
  background:#0B0B0B;
  border-radius:999px;
}
.tel-auf{
  opacity:0;
  transform:translateY(26px) scale(.97);
  transition:opacity .8s ease .15s,transform .9s var(--kurve) .15s;
}
.an .tel-auf,
.an-orn .tel-auf{opacity:1;transform:none}

/* Statuszeile so hoch wie am Gerät (54 pt), damit die Insel hineinpasst */
.wa-status{
  background:var(--wa-bar);color:rgba(255,255,255,.9);
  font-size:10px;
  height:calc(var(--telw) * .125);
  flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
}
.wa-bar{background:var(--wa-bar);color:#fff;padding:6px 10px 8px;display:flex;align-items:center;gap:8px;flex:none}
.wa-ava{width:29px;height:29px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.wa-bar .nm{font-size:14px;font-weight:500;line-height:1.15;display:block}
.wa-bar .on{font-size:10px;color:rgba(255,255,255,.78);line-height:1.15}
.wa-bar .ic{margin-left:auto;display:flex;gap:13px;align-items:center;opacity:.95}

/* Der Verlauf nimmt den Rest der Gerätehöhe ein — Nachrichten sitzen unten */
.wa-chat{
  background:var(--wa-bg);
  padding:10px 7px 8px;
  display:flex;flex-direction:column;gap:6px;
  flex:1;min-height:0;
  overflow-y:auto;
  scrollbar-width:none;
  justify-content:flex-end;
}
.wa-chat::-webkit-scrollbar{display:none}

/* Der Ablauf läuft in Schleife. Zwischen zwei Durchgängen blendet der
   Verlauf kurz ab, damit der Neuanfang nicht als Sprung wirkt. */
[data-ablauf]{transition:opacity .34s ease}
[data-ablauf].wechsel{opacity:0}

/* Noch nicht eingeblendete Schritte belegen keinen Platz */
[data-ablauf] [data-s]{display:none}

.wa-tag{align-self:center;background:#E1F2FB;color:#5A6A72;font-size:10px;padding:2px 9px;border-radius:6px;flex:none}

.wa-msg{
  max-width:85%;
  padding:6px 8px 5px;
  border-radius:8px;
  font-size:13px;line-height:1.38;
  position:relative;flex:none;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
  opacity:0;
  transform:translateY(9px) scale(.985);
  transition:opacity .3s ease,transform .38s var(--kurve);
}
.wa-msg.zeig{opacity:1;transform:none}
.wa-out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:0}
.wa-in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:0}
.wa-out::after,
.wa-in::after{content:"";position:absolute;top:0;width:8px;height:11px}
.wa-out::after{right:-8px;background:var(--wa-out);clip-path:polygon(0 0,100% 0,0 100%)}
.wa-in::after{left:-8px;background:var(--wa-in);clip-path:polygon(0 0,100% 0,100% 100%)}
.wa-in.breit{max-width:94%}

.wa-meta{
  font-size:10px;color:var(--wa-meta);
  display:flex;gap:3px;justify-content:flex-end;align-items:center;
  margin-top:2px;font-variant-numeric:tabular-nums;
}

.wa-tippt{
  align-self:flex-start;
  display:none;gap:4px;
  background:var(--wa-in);
  border-radius:8px;border-top-left-radius:0;
  padding:10px 12px;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
  opacity:0;transition:opacity .22s;flex:none;
}
.wa-tippt.zeig{opacity:1}
.wa-tippt i{width:6px;height:6px;border-radius:50%;background:#9AA6AC;display:block;animation:hup 1.15s infinite}
.wa-tippt i:nth-child(2){animation-delay:.17s}
.wa-tippt i:nth-child(3){animation-delay:.34s}
@keyframes hup{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-4px);opacity:1}
}

/* Sprachnotiz */
.vn{display:flex;align-items:center;gap:7px;min-width:158px}
.vn .pl{color:var(--wa-icon);flex:none}
.vn .kopf{width:24px;height:24px;border-radius:50%;background:#C8D3D8;display:flex;align-items:center;justify-content:center;flex:none}
.vn .dauer{font-size:10px;color:var(--wa-meta);font-variant-numeric:tabular-nums}
.welle{flex:1;height:18px}
.welle line{stroke:#9FB0B8;stroke-width:2.5;stroke-linecap:round}
.welle line.hell{stroke:#4FC3F7}
.vn-text{font-size:12px;color:#5A6A72;font-style:italic;margin-top:5px;line-height:1.36}

/* Eingabezeile */
/* Eingabezeile plus Platz für den Home-Balken des Geräts */
.wa-eingabe{background:var(--wa-bg);padding:6px 8px calc(var(--telw) * .055);display:flex;align-items:center;gap:6px;flex:none;position:relative}
.wa-eingabe::after{
  content:"";
  position:absolute;left:50%;bottom:calc(var(--telw) * .022);
  transform:translateX(-50%);
  width:36%;height:3px;border-radius:999px;
  background:rgba(11,20,26,.32);
}
.wa-feld{
  flex:1;background:#fff;border-radius:20px;
  padding:7px 11px;font-size:12px;color:#8696A0;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 1px .5px rgba(11,20,26,.1);
}
.wa-mik{width:33px;height:33px;border-radius:50%;background:var(--wa-bar);display:flex;align-items:center;justify-content:center;flex:none}

/* Aufzeichnungskarte in der Antwortblase */
.akte-kopf{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--boden-500);margin-bottom:6px;
}
.akte-z{
  display:flex;align-items:center;gap:7px;
  padding:4px 0;border-bottom:1px solid var(--boden-100);
  font-size:12px;color:var(--boden-800);
}
.akte-z:last-of-type{border-bottom:0}
.akte-z .w{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--boden-500);font-variant-numeric:tabular-nums}
.hk{
  width:14px;height:14px;border-radius:50%;
  background:var(--gruen-fl);color:var(--gruen);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.vollst{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--gruen-fl);color:var(--gruen);
  font-size:10.5px;font-weight:600;
  padding:3px 8px;border-radius:2px;margin-top:7px;
}

/* Rückfrage mit zwei Kandidaten */
.wahl{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.wahl > span{
  font-size:12px;padding:6px 9px;
  border:1px solid var(--boden-200);
  background:#F7F9F8;border-radius:4px;
  display:flex;justify-content:space-between;gap:10px;
  transition:background .3s ease,border-color .3s ease;
}
.wahl > span.aktiv{border-color:var(--blau-600);background:var(--blau-50);color:var(--blau-800);font-weight:500}


/* =============================================================================
   11  ABLAUFENDE FRIST
   Der Abschnitt ist eine hohe Bahn, in der die Buehne stehen bleibt. Der
   Scrollweg zieht den Zeitstrahl von "bis Ende 2025" ueber 2026 bis zum
   01.01.2027. Die Feldbreiten 1 : 1,5 : 1 stehen so auch im Skript — dort
   werden daraus die Schwellen fuer Zahl und Kaesten gerechnet.
   ============================================================================= */
.tafel--bahn{
  display:block;
  min-height:0;
  height:var(--bahn,260svh);
  padding:0;
}
.bahn-buehne{
  position:sticky;top:0;
  height:100svh;
  display:flex;align-items:center;
  padding-top:calc(var(--navh) + var(--luft));
  padding-bottom:var(--luft);
}
.bahn-buehne > .wrap{width:100%}

/* Zahl und Einordnung */
.frist-anzeige{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(16px,2.6svh,30px);
}
.frist-zahl{
  font-family:var(--grotesk);
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:clamp(50px,7.6vw,108px);
  line-height:.86;letter-spacing:-.045em;
  color:var(--blau-600);
  font-variant-numeric:tabular-nums;
  flex:none;
  min-width:3.1ch;text-align:right;
}
.frist-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--boden-500);
  margin-bottom:7px;
}
.frist-neben .klein{max-width:54ch}

/* Zeitstrahl: drei Felder, dahinter die laufende Fuellung */
.zeit-balken{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr;
  height:clamp(46px,6.2svh,58px);
  margin-top:clamp(30px,4.4svh,48px);
  border:1px solid var(--boden-300);
  border-radius:2px;
  background:#fff;
  overflow:visible;
}
.zeit-fuell{
  position:absolute;left:0;top:0;bottom:0;
  width:0;
  background:var(--blau-600);
  z-index:0;
}
.zeit-feld{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--boden-600);
  border-right:1px solid var(--boden-200);
  transition:color .3s ease;
}
.zeit-feld:last-child{border-right:0}
.zeit-feld.hell{color:#fff;border-right-color:rgba(255,255,255,.28)}

/* Der heutige Tag als feste Marke — sie wandert nicht mit dem Scrollen */
.zeit-heute{
  position:absolute;top:-28px;z-index:2;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:11.5px;font-weight:600;
  color:var(--boden-700);
}
.zeit-heute i{
  position:absolute;left:50%;top:16px;
  width:1px;height:14px;
  background:var(--boden-400);
}

/* Die Folgen je Zeitabschnitt — sie stehen unter ihrem Feld und treten
   hervor, sobald die Fuellung den Abschnitt erreicht hat. */
.folgen{
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr;
  gap:2px;
  margin-top:clamp(14px,2.2svh,26px);
}
.folge{
  border:1px solid var(--boden-200);
  background:#fff;
  padding:14px 16px 16px;
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .55s var(--kurve);
}
.folge.an{opacity:1;transform:none}
.folge-kt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--boden-500);
  margin-bottom:8px;
}
.folge p{margin:0;font-size:13.5px;line-height:1.45;color:var(--boden-600)}
.folge p + p{margin-top:7px}
.folge b{color:var(--boden-900);font-weight:600}

.folge--alt{background:var(--boden-50)}
.folge--alt .folge-kt,
.folge--alt p{color:var(--boden-500)}
.folge--alt b{color:var(--boden-700)}

.folge--ziel{border-color:var(--blau-600)}
.folge--ziel .folge-kt{color:var(--blau-600)}
.folge--ziel b{color:var(--blau-800)}

/* Angedeutete Pflichtangaben — grau bestehend, blau neu */
.mini{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.mini span{
  border:1px solid var(--boden-300);
  background:#fff;
  font-size:11.5px;
  padding:3px 8px;border-radius:2px;
  color:var(--boden-600);
}
.mini span.neu{border-color:var(--blau-600);background:var(--blau-50);color:var(--blau-600);font-weight:500}
.mini span.neu::before{content:"+";font-family:var(--mono);margin-right:4px;opacity:.75}
.mini .weiter{border-style:dashed;color:var(--boden-400)}
.folge--mehr .klein{margin-top:9px;font-size:12px}

/* Die Loesung, gemeinsam mit dem dritten Kasten */
.loesung{
  display:flex;align-items:center;gap:12px;
  margin:clamp(12px,2svh,20px) 0 0;
  background:var(--gruen-fl);
  border:1px solid #BFDBCB;
  border-radius:2px;
  padding:13px 17px;
  font-size:14.5px;color:var(--boden-800);
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease .22s,transform .55s var(--kurve) .22s;
}
.loesung.an{opacity:1;transform:none}
.loesung b{color:var(--gruen)}
.loesung .hk{
  width:24px;height:24px;border-radius:50%;flex:none;
  background:#fff;color:var(--gruen);
  display:flex;align-items:center;justify-content:center;
}

@media(max-width:860px){
  .tafel--bahn{--bahn:230svh}
  .zeit-balken{grid-template-columns:1fr 1.3fr 1fr;font-size:11px}
  .zeit-feld{font-size:10.5px;text-align:center;padding:0 4px}
  .folgen{grid-template-columns:1fr;gap:6px}
}


/* =============================================================================
   12  ANGEHEFTETE SZENE
   Das Geraet bleibt stehen, der Scrollweg schaltet die drei Schritte weiter.
   Text und Bildschirminhalt liegen jeweils uebereinander und werden
   ueberblendet — deshalb absolut positioniert und mit fester Mindesthoehe,
   damit beim Wechsel nichts springt.
   ============================================================================= */
.szene{--bahn:300svh}

/* Die Überschrift steht in der Textspalte, nicht darüber. Nur so werden
   Text und Gerät gegeneinander zentriert — sonst begänne das Gerät erst
   unterhalb der Überschrift und hinge nach unten aus dem Bild. */
.szene-raster{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(26px,3.6vw,60px);
  align-items:center;
}
.szene-spalte{align-self:center}
.szene-kopf{margin-bottom:clamp(18px,3svh,34px)}

.szene-texte{position:relative;min-height:clamp(190px,26svh,250px)}
.szene-text{
  position:absolute;inset:0;
  opacity:0;transform:translateY(18px);
  transition:opacity .45s ease,transform .6s var(--kurve);
  pointer-events:none;
}
.szene-text.an{opacity:1;transform:none;pointer-events:auto}
.szene-nr{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blau-600);
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
}
.szene-nr::before{content:"";width:20px;height:1px;background:var(--blau-300)}
.szene-text h3{
  font-size:clamp(21px,2.2vw,30px);
  line-height:1.18;
  letter-spacing:-.014em;
  margin:0 0 9px;
}
.szene-text p{
  margin:0;
  font-size:clamp(15px,1.3vw,17.5px);
  line-height:1.5;
  color:var(--boden-600);
  max-width:38ch;
}

/* Schiene: drei Striche, der laufende fuellt sich mit dem Fortschritt */
.szene-schiene{display:flex;gap:8px;margin-top:clamp(14px,2.4svh,26px)}
.szene-schiene b{
  width:46px;height:2px;
  background:var(--boden-200);
  display:block;position:relative;overflow:hidden;
}
.szene-schiene i{
  position:absolute;inset:0;
  background:var(--blau-600);
  transform:scaleX(0);transform-origin:left;
}
.szene-fuss{margin-top:clamp(12px,2svh,20px)}

/* Bildschirm des Geraets: drei Staende uebereinander */
.schirm{
  position:relative;
  flex:1;min-height:0;
  background:var(--wa-bg);
  overflow:hidden;
}
.schirm .wa-tag{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:2}
.bild{
  position:absolute;inset:0;
  padding:32px 7px 8px;
  display:flex;flex-direction:column;gap:6px;justify-content:flex-end;
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .4s ease,transform .55s var(--kurve);
  pointer-events:none;
}
.bild.an{opacity:1;transform:none}
.bild .wa-msg{opacity:1;transform:none}
.wa-msg.verblasst{opacity:.5}
.akte-fuss{font-size:11.5px;color:#5A6A72;margin-top:7px}

@media(max-width:980px){
  .szene{--bahn:auto}
  .szene .bahn-buehne{position:static;height:auto}
  .szene-raster{grid-template-columns:1fr;gap:28px}
  .szene-texte{min-height:0}
  .szene-text{position:static;opacity:1;transform:none;margin-bottom:24px}
  .szene-text:last-child{margin-bottom:0}
  .szene-schiene{display:none}
  /* Standbild statt Ablauf — greift auch ohne JavaScript */
  .schirm .bild{opacity:0}
  .schirm .bild:last-child{opacity:1}
}


/* =============================================================================
   13  SIGNATURE — Satz wird Datensatz
   Die Verbindungslinien werden per JavaScript aus den tatsächlichen
   Elementpositionen berechnet und starten an der Kante der Textspalte,
   damit keine Linie durch den Satz läuft.
   ============================================================================= */
.buehne{position:relative;margin-top:clamp(12px,2.2svh,26px)}
.buehne-linien{position:absolute;inset:0;z-index:0;pointer-events:none}

.bl{fill:none;stroke:var(--blau-300);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.buehne.an .bl{animation:ziehen .85s var(--kurve) forwards;animation-delay:calc(.25s + var(--i) * .13s)}
@keyframes ziehen{to{stroke-dashoffset:0}}

.bp{fill:var(--blau-600);opacity:0}
.buehne.an .bp{animation:auf .3s ease forwards;animation-delay:calc(1.05s + var(--i) * .13s)}
@keyframes auf{to{opacity:1}}

.buehne-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 90px minmax(0,.92fr);
  gap:0;align-items:center;
}
@media(max-width:980px){
  .buehne-grid{grid-template-columns:1fr;gap:24px}
  .buehne-linien{display:none}
}

.satz{
  font-family:var(--serif);
  font-variation-settings:"opsz" 28,"wght" 300;
  font-size:clamp(17px,1.6vw,23px);
  line-height:1.68;
  color:var(--boden-800);
  letter-spacing:-.005em;
}
.q{position:relative;white-space:nowrap;color:var(--blau-800)}
.q::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--blau-600);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--kurve);
}
.buehne.an .q::after{transform:none;transition-delay:calc(.2s + var(--i) * .13s)}

/* Ziffern verbinden Satz und Datensatz auch ohne Linien */
.idxq{font-family:var(--mono);font-size:.5em;vertical-align:super;color:var(--blau-300);margin-left:3px;letter-spacing:0}

/* ---------------------------------------------------------------------------
   Textmarker beim Überfahren
   Gesprochenes Wort und Zielfeld leuchten gemeinsam auf. Der Marker liegt als
   Schlagschatten außen an, damit der Satz beim Überfahren nicht umbricht.
   Auf dem hellen Marker steht dunkles Blau (#0E265C auf #D3DEF4) — Kontrast
   10,5:1, also deutlich über der Anforderung von 4,5:1.
   --------------------------------------------------------------------------- */
.q,
.ds-z .val{transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}

.q.leuchtet{
  background:var(--blau-100);
  box-shadow:0 0 0 3px var(--blau-100);
  border-radius:2px;
  color:var(--blau-800);
}
.flaeche--tinte .q.leuchtet{color:var(--blau-800)}
.q.leuchtet .idxq{color:var(--blau-600)}

.ds-z.leuchtet{background:var(--blau-50)}
.ds-z.leuchtet .lbl{color:var(--blau-800)}
.ds-z.leuchtet .val{
  background:var(--blau-100);
  box-shadow:0 0 0 3px var(--blau-100);
  border-radius:2px;
  color:var(--blau-800);
}
.ds-z.leuchtet .val em{color:var(--blau-800)}

/* Die zugehörige Verbindungslinie tritt mit hervor */
.bl.leuchtet{stroke:var(--blau-100);stroke-width:2.2}
.bp.leuchtet{fill:var(--blau-100)}

.karte-ds{border:1px solid var(--boden-200);background:#fff;border-radius:3px;overflow:hidden}
.karte-ds .kopf{
  padding:8px 14px;
  background:var(--boden-50);
  border-bottom:1px solid var(--boden-200);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--boden-500);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.ds-z{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:clamp(5px,1svh,9px) 14px;
  border-bottom:1px solid var(--boden-100);
  font-size:13.5px;
}
.ds-z .lbl{color:var(--boden-500);font-size:12px}
.ds-z .nr{
  font-family:var(--mono);font-size:9.5px;
  color:var(--blau-600);
  border:1px solid var(--blau-100);
  background:var(--blau-50);
  border-radius:2px;
  padding:1px 4px;margin-right:7px;
  vertical-align:1px;
}
.ds-z .val{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--boden-900)}
.ds-z .val em{font-style:normal;color:var(--boden-900)}

.ds-abgeleitet{padding:10px 14px 12px;background:var(--boden-50)}
.ds-abgeleitet .kt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--boden-500);margin-bottom:6px;
}
.ds-chips{display:flex;flex-wrap:wrap;gap:5px}
.ds-chips span{
  font-size:11px;
  background:#fff;
  border:1px solid var(--boden-200);
  color:var(--boden-600);
  padding:2px 7px;border-radius:2px;
  opacity:0;transform:translateY(5px);
  transition:opacity .3s ease,transform .3s var(--kurve);
}
.buehne.an .ds-chips span{opacity:1;transform:none}
/* Die acht abgeleiteten Angaben erscheinen nacheinander, nach den Linien */
.buehne.an .ds-chips span:nth-child(1){transition-delay:1.20s}
.buehne.an .ds-chips span:nth-child(2){transition-delay:1.26s}
.buehne.an .ds-chips span:nth-child(3){transition-delay:1.32s}
.buehne.an .ds-chips span:nth-child(4){transition-delay:1.38s}
.buehne.an .ds-chips span:nth-child(5){transition-delay:1.44s}
.buehne.an .ds-chips span:nth-child(6){transition-delay:1.50s}
.buehne.an .ds-chips span:nth-child(7){transition-delay:1.56s}
.buehne.an .ds-chips span:nth-child(8){transition-delay:1.62s}

.zaehler{
  font-family:var(--serif);
  font-variation-settings:"opsz" 32,"wght" 300;
  font-size:23px;color:var(--blau-600);
  line-height:1;letter-spacing:-.02em;
}


/* =============================================================================
   14  ACKR.LOG
   Der Bildschirm zeigt die Liste eines Erntejahres. Die Handlung ist der
   Haken rechts: ein Klick schreibt die Zeile fest. Fehlt eine Pflichtangabe,
   bleibt er gesperrt und die Lücke steht als gelbes Feld in der Zeile.
   ============================================================================= */
.lap-schirm{border:1px solid var(--boden-300);border-radius:6px 6px 0 0;background:#fff;overflow:hidden}
.lap-fuss{height:10px;background:var(--boden-200);border:1px solid var(--boden-300);border-top:0;border-radius:0 0 9px 9px}
.lap-bar{display:flex;align-items:center;gap:7px;padding:7px 12px;background:var(--boden-50);border-bottom:1px solid var(--boden-200)}
.lap-bar .pkt{width:7px;height:7px;border-radius:50%;background:var(--boden-300)}
.lap-bar .url{
  margin-left:7px;
  font-family:var(--mono);font-size:11px;color:var(--boden-500);
  background:#fff;border:1px solid var(--boden-200);border-radius:2px;
  padding:2px 9px;
}

/* Kopf der Anwendung: wer angemeldet ist und für welchen Betrieb */
.apphead{display:flex;align-items:center;gap:10px;padding:clamp(8px,1.3svh,12px) 14px;border-bottom:1px solid var(--boden-100)}
.apphead .name{font-family:var(--grotesk);font-variation-settings:"wdth" 110,"wght" 700;font-size:15px;letter-spacing:-.03em}
.apphead .mandant{margin-left:auto;text-align:right;font-size:11px;color:var(--boden-500);line-height:1.35}
.apphead .mandant b{display:block;color:var(--boden-800);font-weight:500;font-size:12px}
.apphead .out{font-size:11.5px;color:var(--boden-500);border-left:1px solid var(--boden-200);padding-left:12px;margin-left:12px}

/* Reiter — der Zähler zeigt, wie viel noch offen ist */
.reiter{display:flex;align-items:center;gap:2px;padding:0 14px;border-bottom:1px solid var(--boden-200);background:#fff}
.reiter button{
  font-family:var(--sans);font-size:12.5px;color:var(--boden-500);
  background:none;border:0;padding:clamp(8px,1.2svh,11px) 12px;cursor:pointer;position:relative;
}
.reiter button.aktiv{color:var(--boden-900);font-weight:500}
.reiter button.aktiv::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--blau-600)}
.reiter .zahl{
  font-family:var(--mono);font-size:10.5px;
  background:var(--boden-100);color:var(--boden-600);
  border-radius:9px;padding:1px 7px;margin-left:6px;
}
.reiter .rechts{margin-left:auto;font-size:11.5px;color:var(--boden-500)}

.tab-huelle{overflow-x:auto}
table.log{width:100%;border-collapse:collapse;font-size:12.5px;min-width:800px}
table.log th{
  text-align:left;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--boden-500);font-weight:500;
  padding:8px 11px;
  border-bottom:1px solid var(--boden-300);
  white-space:nowrap;
}
table.log td{
  padding:clamp(7px,1.3svh,12px) 11px;
  border-bottom:1px solid var(--boden-100);
  vertical-align:middle;white-space:nowrap;
  transition:background .5s ease,box-shadow .5s ease;
}
table.log tr:last-child td{border-bottom:0}
table.log .z{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px}

/* Zeilen fliegen beim Einscrollen leicht herein */
table.log tr.zeile{
  opacity:0;
  transform:translate3d(-16px,8px,0);
  transition:opacity .45s ease,transform .5s var(--kurve);
}
table.log tr.zeile.an{opacity:1;transform:none}

/* Noch offen: blasser Blauton mit Akzent links. Beim Bestätigen fällt beides weg. */
table.log tr.offen td{background:var(--blau-tint)}
table.log tr.offen td:first-child{box-shadow:inset 3px 0 0 var(--blau-600)}
table.log tr.bestaetigt td{background:transparent}
table.log tr.bestaetigt td:first-child{box-shadow:none}

/* Ampel: bewertet die Vollständigkeit des Eintrags, nicht die Zulässigkeit */
.lampe{width:10px;height:10px;border-radius:50%;display:inline-block}
.lampe.g{background:var(--gruen)}
.lampe.y{background:var(--gelb)}
.lampe.r{background:var(--rot)}
.nv{color:var(--boden-400)}

/* Fehlende Pflichtangabe: anklickbare Lücke mit Stift */
.luecke{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gelb-fl);border:1px solid var(--gelb-rand);
  border-radius:3px;padding:3px 8px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;color:var(--gelb);
}
.luecke:hover{border-color:var(--gelb)}
.nachtrag{display:inline-flex;align-items:center;gap:6px}
.nachtrag input{
  font-family:var(--mono);font-size:12px;width:78px;padding:4px 7px;
  border:1px solid var(--blau-600);border-radius:3px;background:#fff;color:var(--boden-900);
}
.nachtrag button{
  font-family:var(--sans);font-size:11.5px;padding:5px 9px;border-radius:2px;
  border:1px solid var(--blau-600);background:var(--blau-600);color:#fff;cursor:pointer;
}
.handnotiz{display:block;font-size:10px;color:var(--boden-500);font-style:italic;margin-top:3px;white-space:normal}

/* Die Handlung: ein Haken je Zeile */
.haken{
  width:24px;height:24px;border-radius:50%;
  border:1px solid var(--boden-300);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--boden-400);cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.haken:hover{border-color:var(--blau-600);color:var(--blau-600)}
.haken.fertig{background:var(--gruen-fl);border-color:var(--gruen);color:var(--gruen);cursor:default}
.haken.gesperrt{border-color:var(--boden-200);color:var(--boden-200);background:var(--boden-50);cursor:not-allowed}
.haken.gesperrt:hover{border-color:var(--boden-200);color:var(--boden-200)}
.hakenzeit{font-family:var(--mono);font-size:10px;color:var(--boden-500);margin-left:8px;vertical-align:middle}

.legende{
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;
  padding:10px 14px;
  background:var(--boden-50);
  border-top:1px solid var(--boden-200);
  font-size:11.5px;color:var(--boden-600);
}
.legende i{margin-right:5px;vertical-align:middle}
/* Die Zeichen der Legende tragen dieselben Flächen wie die Haken in den
   Zeilen. Ohne eigenes Weiß schlägt der warme Grundton der Legende durch
   und der offene Haken wirkt grünlich statt neutral grau. */
.legende .hk{
  width:15px;height:15px;border-radius:50%;
  border:1px solid var(--boden-300);
  background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:6px;vertical-align:-3px;color:var(--boden-400);
}
.legende .hk.fertig{background:var(--gruen-fl);border-color:var(--gruen);color:var(--gruen)}
.legende .hk.gesperrt{background:var(--boden-50);border-color:var(--boden-200);color:var(--boden-200)}
.legende .hinw{color:var(--boden-500);flex-basis:100%}

/* Rückmeldung nach einer Handlung, kurz eingeblendet */
.meldung{
  position:fixed;left:50%;bottom:26px;z-index:60;
  transform:translateX(-50%) translateY(14px);
  background:var(--boden-900);color:#fff;
  font-size:13.5px;padding:11px 18px;border-radius:3px;
  max-width:calc(100vw - 40px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s var(--kurve);
}
.meldung.zeig{opacity:1;transform:translateX(-50%)}


/* =============================================================================
   15  FREIGABE
   ============================================================================= */
.frei-karte{
  border:1px solid var(--boden-200);
  background:#fff;border-radius:3px;
  max-width:500px;
  transition:border-color .4s ease;
}
.frei-karte.fest{border-color:var(--gruen)}
.frei-kopf{
  padding:14px 18px 12px;
  border-bottom:1px solid var(--boden-100);
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:2px;font-size:12px;font-weight:500}
.pill.g{background:var(--gruen-fl);color:var(--gruen)}
.pill.stempel{animation:stempeln .5s var(--kurve)}
@keyframes stempeln{
  0%{transform:scale(1.35);opacity:0}
  55%{transform:scale(.96);opacity:1}
  100%{transform:scale(1)}
}

.frei-liste{padding:5px 18px 10px;margin:0}
.frei-liste .r{
  display:grid;grid-template-columns:120px 1fr;gap:12px;
  padding:clamp(5px,.9svh,8px) 0;
  border-bottom:1px solid var(--boden-50);
  font-size:13.5px;
}
.frei-liste dt{color:var(--boden-500);font-size:12px}
.frei-liste dd{margin:0;font-variant-numeric:tabular-nums}

/* Verbatimer Ausschnitt aus dem Transkript, aus dem der Wert stammt */
.beleg{display:block;font-size:11.5px;font-style:italic;color:var(--boden-500);margin-top:1px}

.frei-fuss{padding:12px 18px 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Festgeschrieben — das Skript setzt diese Zeile an die Stelle der Knöpfe */
.schloss{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--boden-500);font-family:var(--mono)}


/* =============================================================================
   16  FORMULAR
   ============================================================================= */
.form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
  margin-top:clamp(14px,2.4svh,22px);
  max-width:700px;
}
.form label{display:block;font-size:12px;color:var(--blau-100);margin-bottom:4px}
.form input,
.form select{
  width:100%;
  font-family:var(--sans);font-size:15.5px;
  padding:10px 13px;
  border:1px solid var(--blau-300);
  border-radius:2px;
  background:#fff;color:var(--boden-900);
  min-height:44px;                 /* Bedienung am Handy, auch mit Handschuh */
  transition:border-color .2s ease;
}
.form input:focus,
.form select:focus{border-color:#fff}
.voll{grid-column:1 / -1}

/* Koederfeld: aus dem Bild geschoben statt display:none, damit einfache
   Automaten es im Quelltext finden und ausfuellen. Menschen sehen es nie. */
.f-koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.zustimm,
.f-haken{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;color:var(--blau-100);line-height:1.42;
  max-width:700px;
  margin-top:clamp(10px,1.6svh,16px);
  cursor:pointer;
}
.zustimm input,
.f-haken input{margin-top:3px;width:18px;height:18px;flex:none}
/* flex-basis:0, damit der lange Text neben dem Kaestchen schrumpft statt es
   aus der Zeile zu draengen. */
.zustimm>span,
.f-haken>span{flex:1 1 0;min-width:0}
/* Die Pilotfrage ist eine Angabe zum Betrieb, keine Einwilligung. Der groessere
   Abstand darunter trennt sie sichtbar vom rechtlich gemeinten Haekchen. */
.f-haken{margin-bottom:clamp(4px,.8svh,8px)}


/* =============================================================================
   17  FUSSBEREICH
   ============================================================================= */
footer{
  background:var(--boden-900);
  color:var(--boden-300);
  padding-top:44px;padding-bottom:36px;
  font-size:13px;
}
footer a{color:var(--boden-100);text-decoration:none}
footer a:hover{text-decoration:underline}

.foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:24px;margin-bottom:26px}
.foot h5{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--boden-500);margin:0 0 9px;font-weight:500;
}
.foot ul{list-style:none;padding:0;margin:0;line-height:1.95}
footer .brand{color:#fff;margin-bottom:8px}
footer .brand .wm{font-size:20px}

/* Rechtsgrundlagen und Markenhinweise */
.quellen{
  border-top:1px solid var(--boden-700);
  padding-top:16px;
  color:var(--boden-500);
  font-size:11.5px;line-height:1.6;
}


/* =============================================================================
   18  BEWEGUNGSREDUZIERUNG
   Endzustände werden sofort gezeigt. Muss am Ende stehen.
   ============================================================================= */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  .maske > span{transform:none !important}
  .ds-chips span,
  .tel-auf{opacity:1 !important;transform:none !important}
  .bl{stroke-dashoffset:0 !important}
  .bp{opacity:1 !important}
  .q::after{transform:none !important}
  .ornament svg{opacity:1 !important}

  /* Die Frist läuft nicht mit dem Scrollen ab, sie steht auf dem heutigen
     Wert. Die Bahn wird zum gewöhnlichen Abschnitt. */
  .tafel--bahn{height:auto;min-height:100svh}
  .bahn-buehne{position:static;height:auto}
  .folge,
  .loesung{opacity:1 !important;transform:none !important}

  /* Angeheftete Szene wird zur gewöhnlichen Aufzählung, auf dem Gerät
     bleibt der letzte Stand stehen — auch ohne JavaScript */
  .szene{--bahn:auto}
  .szene-raster{grid-template-columns:1fr}
  .szene-texte{min-height:0}
  .szene-text{position:static;opacity:1 !important;transform:none !important;margin-bottom:24px}
  .szene-schiene{display:none}
  .schirm .bild{opacity:0}
  .schirm .bild:last-child{opacity:1}
}