@charset "utf-8";
/* Fahrschule Halterbach — Demo von Wild Digital Moments.
   Keine Fotos. Alles Fläche, Linie, Zahl und Schrift.
   Eine Schriftfamilie: Bricolage Grotesque variabel (opsz 12–96, wght 200–800).
   Farbbudget: Kobalt (Fläche) + Papierweiß (Schrift) + Bernstein (Signal). */

/* ---------------------------------------------------------------- Schrift */
@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-var-latin.woff2?v=ad33cbc6") format("woff2");
  font-weight: 200 800;
  font-stretch: 100%;
  font-style: normal;
  /* optional statt swap: die Schrift ist vorgeladen, gleiche Herkunft und
     klein, also steht sie praktisch immer vor dem ersten Bild. Kommt sie
     ausnahmsweise zu spaet, bleibt der metrisch angeglichene Ersatz fuer
     diesen einen Aufruf stehen, statt mitten in der Seite zu tauschen.
     Ein Tausch bricht Zeilen neu um, und kein einzelner size-adjust kann
     das fuer 250er Displayzeilen und 800er Ziffern gleichzeitig verhindern.
     Gemessen: Verhaeltnis echt/Ersatz reicht von .84 bis 1.06. */
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metrisch angeglichener Ersatz. Bricolage: upem 1000, asc 930, desc 270, gap 0.
   Die 107 % stammten aus der mittleren Kleinbuchstabenbreite. Nachgemessen im
   Browser war der Ersatz beim echten Fließtext (wght 400, opsz 14) trotzdem
   3,7 % zu breit — genug, damit die Kartentexte beim Schriftwechsel neu
   umbrechen und die Seite um 19px nachrutscht. Gemessene Verhältnisse
   echt/Ersatz: .9532 / .9694 / .9656, Mittel .9627, also 107 × .9627 ≈ 103 %.
   Die Überschreibungen werden durch dieselbe 1.03 geteilt (930/1.03, 270/1.03),
   damit die Zeilenhöhe gleich bleibt und beim Tausch nichts springt. */
@font-face {
  font-family: "BR-fb";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("DejaVu Sans");
  size-adjust: 103%;
  ascent-override: 90.3%;
  descent-override: 26.2%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- Grundlage */
/* Neuausrichtung 2026-07-29 nach der Erstfassung in Vollkobalt: Erste-Eindruck-
   Forschung (Google/IJHCS: geringe visuelle Komplexität + Prototypikalität
   entscheiden in 50 ms über Vertrauen) → helles, ruhiges Feld, Kobalt als
   TINTE statt als Wand, Bernstein nur noch für Fortschritt und die eine
   Handlung. Das Kennzeichen bleibt das einzige thematische Element. */
:root {
  --kobalt:      #1a27b8;
  --kobalt-tief: #121a86;
  --kobalt-hell: #2b3ce0;
  --kobalt-rand: #b9c2ee;
  --feld:        #f4f5fa;
  --karte:       #ffffff;
  --karte-2:     #f7f8fd;
  --wahl:        #eef1fe;
  --rand:        #e4e7f1;
  --papier:      #fffdf7;
  --papier-2:    #f5f2e9;
  --tinte:       #10132b;
  --signal:      #ffb020;

  --leise: rgba(16, 19, 43, .64);
  --linie: rgba(16, 19, 43, .14);

  --schatten: 0 1px 2px rgba(16, 19, 43, .05), 0 14px 34px -16px rgba(16, 19, 43, .16);

  /* Nur noch historisch referenziert; auf hellem Feld praktisch unsichtbar. */
  --kante-hell: rgba(255, 255, 255, .6);
  --kante-tief: rgba(16, 19, 43, .12);

  /* Zwei gerissene Papierkanten als Maske. Unregelmäßig, nicht gezahnt —
     eine Säge sieht man einer Perforation an, einem Riss nicht. */
  --riss-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='11'%3E%3Cpath d='M0 0L120 0L120 7L114 2L109 7L104 4L95 10L89 9L76 10L68 2L63 7L58 4L50 9L45 7L36 10L27 5L22 2L17 10L6 4L0 5Z' fill='%23000'/%3E%3C/svg%3E");
  --riss-oben:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='11'%3E%3Cpath d='M0 11L120 11L120 4L114 9L109 4L104 7L95 1L89 2L76 1L68 9L63 4L58 7L50 2L45 4L36 1L27 6L22 9L17 1L6 7L0 6Z' fill='%23000'/%3E%3C/svg%3E");

  /* Sprachmenü — js/i18n.js liest genau diese vier Werte. Der Vorgabeton der
     Studio-Seite ist dunkel; hier ist das Feld hell, also Karte + Tinte. */
  --wdm-lang-bg:     var(--karte);
  --wdm-lang-fg:     var(--tinte);
  --wdm-lang-border: var(--kobalt-rand);
  --wdm-lang-font:   "Bricolage", "BR-fb", Arial, sans-serif;

  --schrift: "Bricolage", "BR-fb", Arial, sans-serif;
  --rand-innen: clamp(1rem, 4vw, 3rem);
  --max: 1440px;

  /* Zwei Haus-Easings — eine Hand hat die ganze Bewegung gemacht. */
  --hb-out: cubic-bezier(.22, .9, .3, 1);
  --hb-pop: cubic-bezier(.34, 1.45, .5, 1);
}

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

html {
  background: var(--feld);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--feld);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.55;
  font-variation-settings: "wght" 400, "opsz" 14;
  font-synthesis-weight: none;
  overflow-x: clip;
  hyphens: auto;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 .8em; }
a { color: inherit; }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--kobalt);
  outline-offset: 3px;
  border-radius: 4px;
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.springlink {
  position: absolute; left: 8px; top: -60px; z-index: 60;
  background: var(--signal); color: var(--tinte);
  padding: .6rem 1rem; font-variation-settings: "wght" 700, "opsz" 14;
  text-decoration: none; transition: top .15s;
}
.springlink:focus { top: 8px; }

/* --------------------------------------------------- Typografische Klassen */
.kicker {
  font-variation-settings: "wght" 650, "opsz" 12;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kobalt);
}
.ueberschrift {
  font-variation-settings: "wght" 640, "opsz" 40;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.zahl {
  font-variation-settings: "wght" 800, "opsz" 96;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}

/* ------------------------------------------------------------- Demo-Hinweis */
/* Sichtbar, aber nicht laut: der Hinweis sitzt auf dem Kobaltfeld und meldet
   sich nur über das kleine bernsteinfarbene Wort. Die Schlagzeile gewinnt. */
.demo-note {
  background: none;
  color: var(--leise);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem var(--rand-innen) .5rem;
  border-bottom: 1px solid var(--linie);
  font-size: .8125rem;
  line-height: 1.45;
}
.demo-note p { margin: 0; max-width: 92ch; }
.demo-note strong {
  font-variation-settings: "wght" 700, "opsz" 12;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kobalt);
  margin-right: .35rem;
  white-space: nowrap;
}
.demo-note a { color: var(--tinte); text-underline-offset: 3px; }
.demo-note button {
  margin-left: auto;
  flex: none;
  align-self: center;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--leise);
  font: inherit;
  line-height: 1;
  width: 26px; height: 26px;
  cursor: pointer;
  padding: 0;
}
.demo-note button:hover { background: rgba(16, 19, 43, .06); color: var(--tinte); }
.demo-note[hidden] { display: none; }

/* ---------------------------------------------------------------- Kopfzeile */
.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem var(--rand-innen) 0;
}
.masthead-oben {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-variation-settings: "wght" 700, "opsz" 24;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.marke svg { flex: none; }
.marke-ort {
  display: block;
  font-variation-settings: "wght" 450, "opsz" 12;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leise);
}
.hauptnav {
  margin-left: auto;
  display: flex;
  gap: 1.4rem;
  font-size: .875rem;
  font-variation-settings: "wght" 550, "opsz" 14;
}
.hauptnav a { text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.hauptnav a:hover { border-bottom-color: var(--kobalt); }
.hauptnav a[aria-current="page"] { border-bottom-color: var(--kobalt); }

/* Sprachmenü im Masthead. js/i18n.js schiebt seine Listbox in [data-lang-host];
   der Platz (47 × 30) steht schon vorher, sonst rückt die Navigation nach, wenn
   das Steuerelement nach dem ersten Bild erscheint — genau das kostet CLS.
   Die gelbe Vorgabe-Markierung der Liste weicht der Hausauswahl in Kobalt. */
.lang-host { display: flex; align-items: center; justify-content: flex-end; min-width: 47px; min-height: 30px; }
.lang-host .wdm-lang__btn { font-variation-settings: "wght" 550, "opsz" 14; box-shadow: var(--schatten); }
.wdm-lang__list li:hover, .wdm-lang__list li:focus { background: var(--wahl); }

.masthead-unten {
  margin-top: 1.6rem;
  padding-bottom: 1.5rem;
}
/* Die Schlagzeile ist das Nutzenversprechen und darf jetzt groß sein:
   auf hellem Feld trägt große, feste Typo die Modernität. */
.seiten-h1 {
  font-variation-settings: "wght" 720, "opsz" 48;
  font-size: clamp(1.6rem, 1.05rem + 2.2vw, 2.7rem);
  letter-spacing: -.028em;
  line-height: 1.04;
  max-width: 24ch;
  text-wrap: balance;
  margin: 0 0 .5rem;
}
.seiten-sub {
  margin: 0;
  color: var(--leise);
  font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
  max-width: 56ch;
}

/* --------------------------------------------------------- Gespeichert-Band */
/* Gleiche Inhaltsbreite wie .stage und .masthead, damit die Kante durchläuft. */
.gespeichert {
  width: calc(100% - 2 * var(--rand-innen));
  max-width: calc(var(--max) - 2 * var(--rand-innen));
  margin: 1rem auto 0;
  padding: .75rem 1rem;
  border: 1px dashed var(--kobalt-rand);
  border-radius: 10px;
  background: var(--wahl);
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  font-size: .9rem;
}
/* Die Zeile wird vom Inline-Skript im <head> freigeschaltet, noch bevor das
   erste Bild steht. Deshalb rutscht beim Laden nichts nach. */
.gespeichert { display: none; }
html.has-saved .gespeichert { display: flex; }
.gespeichert[hidden] { display: none !important; }
.gespeichert b { font-variation-settings: "wght" 700, "opsz" 14; color: var(--kobalt); }
.gespeichert button {
  background: none; border: 0; padding: 0; margin-left: auto;
  color: var(--papier); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* -------------------------------------------------------------------- Stage */
.stage {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.4rem var(--rand-innen) 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* --- Nummernschiene --- */
.rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .35rem;
}
.rail-item button {
  width: 100%;
  background: none;
  border: 0;
  border-top: 3px solid var(--linie);
  padding: .5rem .1rem .4rem;
  text-align: left;
  color: var(--leise);
  font: inherit;
  cursor: pointer;
  display: block;
}
.rail-nr {
  display: block;
  font-variation-settings: "wght" 700, "opsz" 24;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.rail-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-variation-settings: "wght" 550, "opsz" 12;
  line-height: 1.25;
  margin-top: .1rem;
}
.rail-item.is-now button { color: var(--tinte); border-top-color: var(--signal); }
.rail-item.is-done button { color: var(--tinte); border-top-color: rgba(255, 176, 32, .55); }
.rail-item button:disabled { cursor: default; opacity: .48; }
.rail-item.is-off button { opacity: .3; }
.rail-item.is-off .rail-nr { text-decoration: line-through; }

/* --- Panel --- */
.panel-wrap { min-width: 0; }
/* Eine weiße Karte mit weichem Schatten — der Rechner sieht aus wie das, was
   Leute von einem guten Buchungs-Flow erwarten, nicht wie ein Gerät. */
.panel {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 16px;
  box-shadow: var(--schatten);
  padding: clamp(1.1rem, 3vw, 2rem);
  min-height: 24rem;
  display: flex;
  flex-direction: column;
}

/* Reaktion unter der Hand: Karten heben sich dem Zeiger entgegen, Drücken
   nickt. Nur transform/opacity/box-shadow — nichts bricht um. */
.karte-inhalt, .opt, .btn, .step-btn {
  position: relative;
  transition: background .16s var(--hb-out), border-color .16s var(--hb-out),
              color .16s var(--hb-out), transform .22s var(--hb-out),
              box-shadow .22s var(--hb-out);
}
.karte:active .karte-inhalt,
.opt:active,
.btn:not(:disabled):active,
.step-btn:not(:disabled):active { transform: translateY(1px) scale(.995); }
.btn--voll:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(255, 176, 32, .55); }

/* --- Leben beim Laden: die Bühne baut sich in ~0,6 s auf. Die Schlagzeile
   steht sofort (LCP), alles Sekundäre steigt gestaffelt aus dem Feld. Läuft
   nur mit .belebt am <html>, das ein rAF nach dem ersten Frame setzt —
   ohne JS und bei reduzierter Bewegung steht einfach alles. --- */
@keyframes aufsteigen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
html.belebt .rail-item { animation: aufsteigen .5s var(--hb-out) backwards; }
html.belebt .rail-item:nth-child(1) { animation-delay: .05s; }
html.belebt .rail-item:nth-child(2) { animation-delay: .1s; }
html.belebt .rail-item:nth-child(3) { animation-delay: .15s; }
html.belebt .rail-item:nth-child(4) { animation-delay: .2s; }
html.belebt .rail-item:nth-child(5) { animation-delay: .25s; }
html.belebt .panel { animation: aufsteigen .55s var(--hb-out) backwards; animation-delay: .08s; }
html.belebt .karte { animation: aufsteigen .5s var(--hb-out) backwards; }
html.belebt .karte:nth-child(1) { animation-delay: .18s; }
html.belebt .karte:nth-child(2) { animation-delay: .24s; }
html.belebt .karte:nth-child(3) { animation-delay: .28s; }
html.belebt .karte:nth-child(4) { animation-delay: .32s; }
html.belebt .karte:nth-child(5) { animation-delay: .36s; }
html.belebt .geld .blatt { animation: aufsteigen .6s var(--hb-out) backwards; animation-delay: .22s; }

/* Schrittwechsel: der neue Inhalt kommt mit einem kurzen Atemzug herein.
   main.js setzt .schritt-frisch, wenn das Panel neu gesetzt wurde. */
@keyframes einatmen {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.panel .schritt-frisch { animation: einatmen .24s var(--hb-out) both; }
.panel-kopf {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding-bottom: .9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--linie);
  flex-wrap: wrap;
}
.panel-nr {
  font-variation-settings: "wght" 800, "opsz" 96;
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  line-height: 1;
  color: var(--kobalt);
  letter-spacing: -.04em;
}
.panel-titel {
  font-variation-settings: "wght" 680, "opsz" 40;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  letter-spacing: -.024em;
  line-height: 1.08;
}
.panel-von {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
  font-variation-settings: "wght" 550, "opsz" 12;
}
.satz { max-width: 62ch; color: var(--leise); }
.satz-klein { font-size: .875rem; }
/* Der Klassenhinweis ist ein redaktioneller Nachsatz, keine Sprechblase:
   Haarlinie darüber, Marginalie davor, sonst nichts. */
.klassen-hinweis {
  border-top: 1px solid var(--kobalt);
  padding: .55rem 0 0;
  margin: 1.2rem 0 0;
  font-size: .9rem;
  color: var(--tinte);
  max-width: 62ch;
}
.klassen-hinweis::before {
  content: "Dazu noch";
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kobalt);
  font-variation-settings: "wght" 600, "opsz" 12;
  margin-bottom: .2rem;
}
.klassen-hinweis[hidden] { display: none; }

/* --- Optionen --- */
.opts { display: grid; gap: .5rem; margin: 1.1rem 0 0; }
.opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem .9rem;
  padding: .8rem .95rem;
  background: var(--karte-2);
  border: 1px solid var(--rand);
  border-radius: 12px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.opt:hover { background: var(--karte); border-color: var(--kobalt-rand); }
.opt:has(input:checked) {
  background: var(--wahl);
  border-color: var(--kobalt);
}
.tick {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 20px; height: 20px;
  border: 2px solid rgba(16, 19, 43, .38);
  border-radius: 50%;
  background: var(--karte);
  cursor: pointer;
  flex: none;
  display: grid;
  place-content: center;
}
.tick::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--kobalt);
  transform: scale(0);
  transition: transform .14s ease;
}
.tick:checked { border-color: var(--kobalt); }
.tick:checked::after { transform: scale(1); }
.opt-body { min-width: 0; }
.opt-title {
  display: block;
  font-variation-settings: "wght" 620, "opsz" 18;
  font-size: 1rem;
  letter-spacing: -.008em;
}
.opt-note { display: block; font-size: .85rem; color: var(--leise); margin-top: .1rem; }
.opt-right {
  font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" 620, "opsz" 16;
  font-size: .95rem;
  color: var(--kobalt);
  white-space: nowrap;
}

/* Die Klassenwahl ist kein Formular, sondern eine Gewichtung: B bekommt die
   ganze Breite und eine Versalie in Anzeigengröße, der Rest teilt sich zwei
   Spalten. Das echte Radio liegt unsichtbar darunter und bleibt bedienbar. */
.klassen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 1.1rem 0 0;
}
.karte { position: relative; display: block; cursor: pointer; min-width: 0; }
.karte--haupt { grid-column: 1 / -1; }
.klasse-input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.karte-inhalt {
  display: grid;
  gap: .15rem .95rem;
  padding: .85rem .95rem .9rem;
  height: 100%;
  background: var(--karte-2);
  border: 1px solid var(--rand);
  border-radius: 12px;
  transition: background .14s ease, border-color .14s ease, transform .1s ease, box-shadow .14s ease;
}
.karte--haupt .karte-inhalt {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 1.05rem 1.15rem 1.1rem;
}
.karte--klein .karte-inhalt { align-content: start; }
.karte:hover .karte-inhalt {
  background: var(--karte);
  border-color: var(--kobalt-rand);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(16, 19, 43, .22);
}
/* Das Schild neigt sich dem Zeiger zu — das eine Augenzwinkern der Seite. */
.karte-schild { will-change: transform; }
.karte:hover .karte-schild { transform: rotate(-2.5deg) translateY(-1px); }
@keyframes stempel {
  0%   { transform: scale(.92); }
  60%  { transform: scale(1.05); }
  100% { transform: none; }
}
.klasse-input:checked ~ .karte-inhalt .karte-schild { animation: stempel .3s var(--hb-pop); }

.karte-mono {
  font-variation-settings: "wght" 800, "opsz" 96;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: .82;
  letter-spacing: -.06em;
  color: var(--kobalt);
  display: block;
  transition: color .14s ease;
}
.karte--haupt .karte-mono {
  font-size: clamp(3.2rem, 2rem + 4vw, 5rem);
  padding-right: .1em;
}
/* B, A und BE stehen nicht als graue Versalien herum, sondern als das, worum
   es hier geht: die Tafel, die man haben will. Weißes Schild, Tintenzeichen,
   blaues Band mit dem A — alles Fläche, Linie und Schrift, kein Bild. */
.karte-schild {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-self: start;
  background: #fff;
  color: var(--tinte);
  border: .045em solid rgba(16, 19, 43, .75);
  border-radius: .12em;
  padding: .1em .18em .12em 0;
  line-height: .95;
  letter-spacing: -.02em;
  overflow: hidden;
  box-shadow: 0 .06em 0 rgba(16, 19, 43, .22);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.karte-schild::before {
  content: "A";
  align-self: stretch;
  display: grid;
  align-content: end;
  justify-content: center;
  background: var(--kobalt);
  color: #fff;
  font-size: .26em;
  line-height: 1;
  font-variation-settings: "wght" 650, "opsz" 12;
  letter-spacing: 0;
  padding: .55em .5em .4em;
  margin-right: .55em;
}
.klasse-input:checked ~ .karte-inhalt .karte-mono.karte-schild {
  color: var(--tinte);
  border-color: var(--kobalt);
  box-shadow: 0 .06em 0 rgba(16, 19, 43, .25), 0 0 0 .055em rgba(26, 39, 184, .3);
}
.karte-mono svg { width: .92em; height: .92em; display: block; }
.karte-text { min-width: 0; }
.karte-kicker {
  display: block;
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kobalt);
  font-variation-settings: "wght" 620, "opsz" 12;
}
.karte-titel {
  display: block;
  font-variation-settings: "wght" 680, "opsz" 32;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  letter-spacing: -.02em;
  line-height: 1.08;
}
.karte--haupt .karte-titel {
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem);
  letter-spacing: -.03em;
}
.karte-note {
  display: block;
  font-size: .82rem;
  color: var(--leise);
  margin-top: .2rem;
  line-height: 1.35;
}
.karte--haupt .karte-note { font-size: .9rem; max-width: 46ch; }

/* Zustand über die Karte selbst, per Geschwisterselektor - kein :has nötig. */
.klasse-input:checked ~ .karte-inhalt {
  background: var(--wahl);
  border-color: var(--kobalt);
  box-shadow: 0 0 0 1px var(--kobalt);
}
.klasse-input:focus-visible ~ .karte-inhalt {
  outline: 3px solid var(--kobalt);
  outline-offset: 3px;
}

.sub-box {
  margin: .7rem 0 0;
  padding-left: 1rem;
  border-left: 1px solid var(--linie);
}
.sub-box[hidden] { display: none; }
.sub-box legend, .sub-legende {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
  font-variation-settings: "wght" 550, "opsz" 12;
  margin-bottom: .4rem;
  display: block;
}
.sub-box .opts { margin-top: 0; }
.sub-box .opt { padding: .55rem .8rem; }

/* --- Stepper --- */
.stepper-box { margin: 1.2rem 0 0; }
.stepper {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: stretch;
  border: 1px solid var(--rand);
  border-radius: 12px;
  overflow: hidden;
  background: var(--karte);
}
.step-btn {
  width: 3.25rem;
  background: none;
  border: 0;
  color: var(--kobalt);
  font-family: var(--schrift);
  font-size: 1.6rem;
  font-variation-settings: "wght" 600, "opsz" 40;
  line-height: 1;
  cursor: pointer;
}
.step-btn:hover:not(:disabled) { background: var(--wahl); }
.step-btn:disabled { color: var(--linie); cursor: default; }
.step-field {
  padding: .55rem 1rem .5rem;
  border-inline: 1px solid var(--rand);
  text-align: center;
  background: var(--karte-2);
}
.step-legend {
  display: block;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
  font-variation-settings: "wght" 550, "opsz" 12;
}
.step-input {
  width: 3.6rem;
  background: none;
  border: 0;
  color: var(--tinte);
  font-family: var(--schrift);
  font-variation-settings: "wght" 800, "opsz" 96;
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  line-height: 1.1;
  text-align: center;
  padding: 0;
  -moz-appearance: textfield;
}
.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-hint {
  margin: .7rem 0 0;
  color: var(--leise);
  font-size: .9rem;
  min-height: 2.8em;
  max-width: 48ch;
}

/* --- Panel-Navigation --- */
.panel-nav {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}
.btn {
  font-family: var(--schrift);
  font-size: .95rem;
  font-variation-settings: "wght" 650, "opsz" 16;
  padding: .72rem 1.5rem;
  border: 1.5px solid var(--kobalt);
  border-radius: 999px;
  background: none;
  color: var(--kobalt);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .14s ease, color .14s ease, transform .1s ease, border-color .14s ease;
}
.btn:hover { background: var(--kobalt); color: #fff; }
/* Bernstein gehört ausschließlich der einen Handlung, die weiterführt. */
.btn--voll { background: var(--signal); border-color: var(--signal); color: var(--tinte); }
.btn--voll:hover { background: #eda512; border-color: #eda512; color: var(--tinte); }
.btn--still { border-color: var(--rand); color: var(--tinte); }
.btn--still:hover { background: rgba(16, 19, 43, .05); color: var(--tinte); }
/* Gesperrt heißt "wartet auf Ihre Antwort", nicht "kaputt". */
.btn:disabled {
  cursor: default;
  background: none;
  border-style: dashed;
  border-color: var(--linie);
  color: rgba(16, 19, 43, .38);
}
.btn:disabled:hover { background: none; color: rgba(16, 19, 43, .38); }
.btn--still:disabled:hover { background: none; color: rgba(16, 19, 43, .38); }
.btn[hidden] { display: none; }

/* ----------------------------------------------------------- Die Maschine */
/* Die Aufstellung ist kein Kasten mit Zahlen. Sie ist Endlospapier, das aus
   einer Maschine kommt: Randlochung, Kopfleiste, Perforation. Beim Sichern
   reißt das Blatt an genau der Stelle, an der auch das Argument reißt —
   oben, was uns gehört, unten, was der Behörde gehört. */

/* Die Aufstellung ist ein Blatt Papier, das auf dem Feld liegt: warmweiß auf
   kühlem Hellgrau, weicher Schatten, oben eine schmale Bernstein-Fortschritts-
   kante. drop-shadow statt box-shadow, damit der Schatten der Risskante folgt. */
.geld {
  min-width: 0;
  align-self: start;
}
.geld .blatt {
  filter: drop-shadow(0 2px 3px rgba(16, 19, 43, .07))
          drop-shadow(0 18px 28px rgba(16, 19, 43, .13));
}

.blatt {
  --lochrand: clamp(1rem, 3.4vw, 1.5rem);
  --p-linie: rgba(18, 26, 134, .3);
  --p-leise: rgba(16, 19, 43, .72);
  position: relative;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

.blatt-teil {
  position: relative;
  padding: 0 var(--lochrand);
  background: var(--papier);
}
.blatt-oben { border-top: 3px solid var(--signal); }
.blatt-unten {
  background: var(--papier-2);
  padding-top: .55rem;
  padding-bottom: .55rem;
  transition: transform .34s cubic-bezier(.2, .75, .3, 1);
}

/* --- Briefkopf und die Zahl, wegen der man hier ist --- */
.blatt-kopf { padding: .95rem .3rem .85rem; }
.blatt-marke {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  margin: 0 0 .5rem;
  padding-bottom: .32rem;
  border-bottom: 2px solid var(--kobalt-tief);
  font-variation-settings: "wght" 780, "opsz" 24;
  font-size: 1.02rem;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--kobalt-tief);
}
.blatt-marke span {
  font-variation-settings: "wght" 500, "opsz" 12;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-leise);
}
.blatt-h {
  font-variation-settings: "wght" 660, "opsz" 12;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--p-leise);
}
.blatt-summe-label {
  margin: .45rem 0 .05rem;
  font-variation-settings: "wght" 620, "opsz" 12;
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kobalt-tief);
}
.label-spanne, .label-gesamt { display: none; }
.geld.ist-skelett .label-spanne { display: inline; }
.geld:not(.ist-skelett) .label-gesamt { display: inline; }

.blatt-summe {
  display: flex;
  align-items: baseline;
  gap: .1rem;
  margin: 0;
}
.blatt-summe .zahl {
  font-size: clamp(2.4rem, 1.45rem + 3.6vw, 3.6rem);
  line-height: 1.02;
  color: var(--kobalt-tief);
}
.blatt .eurozeichen {
  font-variation-settings: "wght" 550, "opsz" 24;
  font-size: .74rem;
  letter-spacing: .1em;
  margin-left: .35em;
  color: var(--p-leise);
}
.geld-leer {
  display: none;
  margin: .6rem 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--p-leise);
  max-width: 42ch;
}
.geld.ist-skelett .geld-leer { display: block; }

/* --- Posten --- */
.geld-block { padding: .1rem .3rem 1rem; }
.block-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 .1rem;
  padding-bottom: .28rem;
  border-bottom: 1.5px solid var(--kobalt-tief);
  font-variation-settings: "wght" 700, "opsz" 12;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kobalt-tief);
}
.block-h-eur { font-variation-settings: "wght" 500, "opsz" 12; color: var(--p-leise); }

.zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem 1rem;
  align-items: baseline;
  padding: .32rem 0;
  border-bottom: 1px dotted rgba(16, 19, 43, .16);
  font-size: .875rem;
}
.zeile:last-child { border-bottom: 0; }
.zeile-l { min-width: 0; }
.zeile-label { display: block; line-height: 1.3; }
.zeile-detail {
  display: block;
  font-size: .78rem;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  margin-top: .05rem;
}
.zeile-r {
  font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" 620, "opsz" 16;
  white-space: nowrap;
}
.zeile.ist-gutschrift .zeile-r { color: var(--kobalt); }

.blatt .zeile { border-bottom-color: var(--p-linie); }
.blatt .zeile-detail { color: var(--p-leise); }
.blatt .zeile-r,
.blatt .zeile.ist-gutschrift .zeile-r {
  color: var(--kobalt-tief);
  font-variation-settings: "wght" 660, "opsz" 16;
}

.geld-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: .65rem;
  padding-top: .45rem;
  border-top: 1.5px solid var(--kobalt-tief);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variation-settings: "wght" 640, "opsz" 12;
  color: var(--kobalt-tief);
}
.geld-summe b {
  font-size: 1.3rem;
  letter-spacing: -.02em;
  text-transform: none;
  font-variation-settings: "wght" 760, "opsz" 40;
  font-variant-numeric: tabular-nums;
  color: var(--kobalt-tief);
}

.blatt .raten-titel, .blatt .raten-zeile, .blatt .richtwert { color: var(--p-leise); }
.blatt .raten-zeile strong { color: var(--kobalt-tief); }
.raten-box { margin-top: .55rem; }
.raten-zeile {
  margin: 0 0 .2rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.raten-zeile strong { font-variation-settings: "wght" 680, "opsz" 14; }
.raten-titel {
  margin: 1.1rem 0 0;
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600, "opsz" 12;
}
.richtwert { margin: .9rem 0 0; font-size: .74rem; line-height: 1.45; }
.geld.ist-skelett .raten-titel,
.geld.ist-skelett .raten-box { display: none; }

/* --- Perforation: hier reißt das Blatt, und hier reißt das Argument --- */
.perf {
  position: relative;
  height: 24px;
  margin: .5rem calc(-1 * var(--lochrand)) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.perf::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 2px dotted rgba(16, 19, 43, .42);
  transition: opacity .2s;
}
.perf span {
  position: relative;
  background: var(--papier);
  padding: 0 .55rem;
  font-variation-settings: "wght" 620, "opsz" 12;
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(16, 19, 43, .62);
  transition: opacity .2s;
}

/* --- Der abtrennbare Teil: ein Formularfeld, das jemand anderem gehört --- */
.geld-behoerde-block {
  position: relative;
  margin: 1.55rem .3rem 1.15rem;
  padding: 1.15rem .8rem .95rem;
  border: 1.5px solid rgba(16, 19, 43, .5);
  color: var(--tinte);
}
.nicht-an-uns {
  position: absolute;
  top: 0; left: .7rem;
  transform: translateY(-52%);
  margin: 0;
  padding: 0 .42rem;
  background: var(--papier-2);
  white-space: nowrap;
  font-variation-settings: "wght" 760, "opsz" 18;
  font-size: clamp(.85rem, .77rem + .3vw, 1rem);
  letter-spacing: -.012em;
  line-height: 1.1;
}
.nicht-an-uns-sub { font-size: .8rem; color: var(--p-leise); margin: 0 0 .7rem; }
.behoerde-null { font-size: .86rem; margin: .35rem 0 0; }
.behoerde-null[hidden] { display: none; }

/* --- Leerzustand: ein eingelegtes, noch unbedrucktes Formular --- */
.geld.ist-skelett .zeile-r,
.geld.ist-skelett .geld-summe b { color: rgba(16, 19, 43, .3); }
.geld.ist-skelett .zeile-label { color: rgba(16, 19, 43, .68); }
.geld.ist-skelett .blatt-summe .zahl { color: rgba(18, 26, 134, .68); }

/* --- Der Druckvorgang ------------------------------------------------- */
/* Der Kopf fährt einmal über das Blatt, die Zeilen schlagen nacheinander an,
   die Beträge kommen einen Takt nach ihrer Beschriftung. */
.druckkopf {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 176, 32, .16) 0 10px,
    var(--signal) 10px 12px,
    transparent 12px);
}
@keyframes kopffahrt {
  from { opacity: 1; transform: translateY(-12px); }
  86%  { opacity: 1; }
  to   { opacity: 0; transform: translateY(100%); }
}
@keyframes vorschub {
  from { transform: translateY(-7px); }
  to   { transform: none; }
}
@keyframes zeilendruck {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
@keyframes einschlag {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.geld.druckt-voll .druckkopf { animation: kopffahrt .72s cubic-bezier(.38, 0, .3, 1) both; }
.geld.druckt-voll .blatt { animation: vorschub .26s cubic-bezier(.25, .9, .3, 1); }
.geld.druckt .zeile {
  animation: zeilendruck .17s cubic-bezier(.2, .85, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 34ms);
}
.geld.druckt .zeile .zeile-r {
  animation: einschlag .16s cubic-bezier(.2, .85, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 34ms + 46ms);
}
/* Vorgedruckt ist das Formular: Briefkopf, Linien, Spaltenköpfe, Perforation.
   Die Maschine setzt nur die veränderlichen Werte darauf. */
.geld.druckt-voll .blatt-summe .zahl,
.geld.druckt-voll .geld-summe,
.geld.druckt-voll .raten-zeile,
.geld.druckt-voll .behoerde-null {
  animation: einschlag .18s cubic-bezier(.2, .85, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 34ms);
}
.frisch { animation: einschlag .19s cubic-bezier(.2, .85, .3, 1); }
/* Auf schmalen Geräten liegt das Blatt unter der Falz. Sichtbar ist dort die
   Anzeige des Geräts — also druckt die mit, sonst passiert beim Ankommen
   nichts. */
.bar.druckt-voll .bar-zahl {
  animation: einschlag .2s cubic-bezier(.2, .85, .3, 1) backwards;
  animation-delay: 70ms;
}

/* --- Der Riss ---------------------------------------------------------- */
/* Beim Sichern trennt sich der Behördenteil wirklich ab: die Perforation
   verschwindet, beide Kanten werden gezackt, der untere Teil rutscht weg. */
.geld.ist-gerissen .perf::before,
.geld.ist-gerissen .perf span { opacity: 0; }
.geld.ist-gerissen .blatt-unten {
  transform: translateY(12px) rotate(.32deg);
  transform-origin: 0 0;
}
.geld.ist-gerissen .blatt-oben {
  -webkit-mask-image: linear-gradient(#000, #000), var(--riss-unten);
          mask-image: linear-gradient(#000, #000), var(--riss-unten);
  -webkit-mask-size: 100% calc(100% - 11px), 120px 11px;
          mask-size: 100% calc(100% - 11px), 120px 11px;
  -webkit-mask-position: left top, left bottom;
          mask-position: left top, left bottom;
  -webkit-mask-repeat: no-repeat, repeat-x;
          mask-repeat: no-repeat, repeat-x;
}
.geld.ist-gerissen .blatt-unten {
  -webkit-mask-image: linear-gradient(#000, #000), var(--riss-oben);
          mask-image: linear-gradient(#000, #000), var(--riss-oben);
  -webkit-mask-size: 100% calc(100% - 11px), 120px 11px;
          mask-size: 100% calc(100% - 11px), 120px 11px;
  -webkit-mask-position: left bottom, left top;
          mask-position: left bottom, left top;
  -webkit-mask-repeat: no-repeat, repeat-x;
          mask-repeat: no-repeat, repeat-x;
}

/* ------------------------------------------------------------- Mobile-Leiste */
.bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--karte);
  border-top: 1px solid var(--rand);
  box-shadow: 0 -10px 30px -12px rgba(16, 19, 43, .18);
  padding: .55rem var(--rand-innen) calc(.55rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: .8rem;
}
.bar-l { min-width: 0; }
.bar-klasse {
  display: block;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
  font-variation-settings: "wght" 550, "opsz" 12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-zahl {
  font-size: 1.5rem;
  line-height: 1.15;
  display: block;
  color: var(--kobalt);
}
.bar a {
  margin-left: auto;
  flex: none;
  font-size: .85rem;
  padding: .55rem 1rem;
}

/* ----------------------------------------------------------------- Ergebnis */
/* Was gesichert wurde, ist das abgetrennte Blatt selbst: Papier, oben
   gerissen, mit der Nummer im Kopf. Kein zweiter Kasten in Kobalt. */
.ergebnis {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--rand-innen) 2.5rem;
}
.ergebnis[hidden] { display: none; }
.ergebnis-karte {
  --p-leise: rgba(16, 19, 43, .72);
  --p-linie: rgba(18, 26, 134, .26);
  position: relative;
  background: var(--papier);
  color: var(--tinte);
  padding-top: 11px;
  -webkit-mask-image: linear-gradient(#000, #000), var(--riss-oben);
          mask-image: linear-gradient(#000, #000), var(--riss-oben);
  -webkit-mask-size: 100% calc(100% - 11px), 120px 11px;
          mask-size: 100% calc(100% - 11px), 120px 11px;
  -webkit-mask-position: left bottom, left top;
          mask-position: left bottom, left top;
  -webkit-mask-repeat: no-repeat, repeat-x;
          mask-repeat: no-repeat, repeat-x;
}
.ergebnis-karte .kicker { color: var(--p-leise); }
.erg-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  padding: clamp(1rem, 3vw, 1.8rem);
  border-bottom: 1.5px solid var(--kobalt-tief);
}
.erg-ref {
  font-variation-settings: "wght" 800, "opsz" 96;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--kobalt-tief);
}
.ergebnis .satz { color: var(--p-leise); }
.erg-kopf-r { margin-left: auto; text-align: right; }
.erg-gesamt-zahl {
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem);
  line-height: 1;
  color: var(--kobalt-tief);
}
.eurozeichen {
  font-variation-settings: "wght" 550, "opsz" 24;
  font-size: .5em;
  margin-left: .12em;
  color: var(--p-leise, var(--leise));
}
.erg-gitter { display: grid; grid-template-columns: 1fr; gap: 0; }
.erg-spalte { padding: clamp(1rem, 3vw, 1.8rem); border-top: 1px solid var(--p-linie); }
.erg-spalte:first-child { border-top: 0; }
.erg-h {
  font-variation-settings: "wght" 700, "opsz" 12;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kobalt-tief);
  border-bottom: 1.5px solid var(--kobalt-tief);
  padding-bottom: .28rem;
  margin: 1.4rem 0 .15rem;
}
.erg-h:first-child { margin-top: 0; }
.plan-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem 1rem;
  padding: .45rem 0;
  border-bottom: 1px dotted var(--p-linie);
  font-size: .88rem;
}
.plan-zeile:last-child { border-bottom: 0; }
.plan-datum {
  font-variant-numeric: tabular-nums;
  color: var(--kobalt-tief);
  font-variation-settings: "wght" 640, "opsz" 14;
  white-space: nowrap;
}
.erg-kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding: clamp(1rem, 3vw, 1.8rem);
  border-top: 1px solid var(--p-linie);
}
.kennzahl .kicker { display: block; margin-bottom: .1rem; }
.kennzahl b {
  font-variation-settings: "wght" 750, "opsz" 40;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: var(--kobalt-tief);
}
.erg-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  padding: clamp(1rem, 3vw, 1.8rem);
  border-top: 1px solid var(--p-linie);
}
.ergebnis-karte .btn--still {
  border-color: rgba(16, 19, 43, .4);
  color: var(--tinte);
}
.ergebnis-karte .btn--still:hover { background: rgba(16, 19, 43, .1); color: var(--tinte); }
.ergebnis-karte .zeile { border-bottom-color: var(--p-linie); }
.ergebnis-karte .zeile-detail { color: var(--p-leise); }
.ergebnis-karte .zeile-r,
.ergebnis-karte .zeile.ist-gutschrift .zeile-r {
  color: var(--kobalt-tief);
  font-variation-settings: "wght" 660, "opsz" 16;
}

/* -------------------------------------------------------------- Die Stimme */
/* Zwölf Zeilen, in denen jemand redet. Also vier Gewichte statt einem:
   250 für den Satz, den er zuerst sagt, 380 fürs Erzählen, 520 für den
   Satz, auf den es hinausläuft, 720 für die Wörter, die er betont. */
.stimme {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.4rem var(--rand-innen) 2.6rem;
}
.stimme-innen {
  border-top: 1px solid var(--linie);
  padding-top: 1.5rem;
  max-width: 48rem;
}
.stimme-kicker {
  margin: 0 0 .55rem;
  font-variation-settings: "wght" 600, "opsz" 12;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kobalt);
}
.stimme-h {
  margin: 0 0 1.3rem;
  font-variation-settings: "wght" 600, "opsz" 24;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--leise);
}
.stimme-laut {
  margin: 0 0 1.4rem;
  max-width: 19ch;
  font-variation-settings: "wght" 250, "opsz" 96;
  font-size: clamp(1.95rem, 1.1rem + 3.6vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -.038em;
  color: var(--kobalt);
}
.stimme-satz {
  max-width: 58ch;
  color: var(--leise);
  font-variation-settings: "wght" 380, "opsz" 14;
}
.stimme-satz b {
  font-variation-settings: "wght" 720, "opsz" 16;
  color: var(--tinte);
}
.stimme-mittel {
  margin: 1.4rem 0;
  max-width: 32ch;
  padding-left: 1.05rem;
  border-left: 2px solid var(--kobalt);
  font-variation-settings: "wght" 520, "opsz" 40;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem);
  line-height: 1.28;
  letter-spacing: -.018em;
  color: var(--tinte);
}

/* ------------------------------------------------------------- Preisblatt */
/* Die vier Zahlen sind die meistzitierte Stelle der Seite. Also bekommen sie
   ihr eigenes Material: ein Tintenfeld, auf dem die Ziffern die Anzeige sind
   und der Text die Fußnote. Die Null steht auf Papier, weil sie der leer
   gebliebene Abschnitt ist. */
.preisblatt {
  background: var(--tinte);
  color: var(--papier);
  padding: 2.6rem 0 3rem;
}
.preisblatt-innen {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--rand-innen);
}
.preisblatt-kicker {
  margin: 0 0 .5rem;
  font-variation-settings: "wght" 600, "opsz" 12;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
}
.preisblatt-h {
  margin: 0;
  max-width: 24ch;
  font-variation-settings: "wght" 640, "opsz" 40;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.ziffern { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.ziffer {
  display: grid;
  gap: .35rem;
  padding: 1.1rem 0 1.3rem;
  border-top: 1px solid rgba(244, 242, 236, .2);
}
.ziffer-zahl {
  display: block;
  font-variation-settings: "wght" 800, "opsz" 96;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 1.9rem + 6.4vw, 6.4rem);
  line-height: .82;
  letter-spacing: -.052em;
  color: var(--signal);
}
.ziffer-einheit {
  font-variation-settings: "wght" 400, "opsz" 40;
  font-size: .3em;
  letter-spacing: 0;
  margin-left: .14em;
  vertical-align: 1.85em;
  color: rgba(255, 176, 32, .75);
}
.ziffer-text {
  font-size: .95rem;
  line-height: 1.5;
  max-width: 44ch;
  color: rgba(244, 242, 236, .72);
}
.ziffer-text b {
  font-variation-settings: "wght" 700, "opsz" 18;
  color: var(--papier);
}

.stub {
  position: relative;
  margin: 2.1rem 0 0;
  background: var(--papier-2);
  color: var(--tinte);
  padding: 1.6rem clamp(1.1rem, 4vw, 2rem) 1.7rem;
  -webkit-mask-image: linear-gradient(#000, #000), var(--riss-oben);
          mask-image: linear-gradient(#000, #000), var(--riss-oben);
  -webkit-mask-size: 100% calc(100% - 11px), 120px 11px;
          mask-size: 100% calc(100% - 11px), 120px 11px;
  -webkit-mask-position: left bottom, left top;
          mask-position: left bottom, left top;
  -webkit-mask-repeat: no-repeat, repeat-x;
          mask-repeat: no-repeat, repeat-x;
}
.stub-kicker {
  display: block;
  margin-bottom: .3rem;
  font-variation-settings: "wght" 620, "opsz" 12;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(16, 19, 43, .72);
}
.stub-zahl {
  margin: 0;
  font-variation-settings: "wght" 800, "opsz" 96;
  font-variant-numeric: tabular-nums;
  font-size: clamp(5rem, 2.8rem + 10vw, 12rem);
  line-height: .78;
  letter-spacing: -.06em;
  color: var(--kobalt-tief);
}
.stub-zahl .ziffer-einheit { color: rgba(18, 26, 134, .55); }
.stub-text {
  margin: .9rem 0 0;
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(16, 19, 43, .82);
}
.preisblatt-fuss {
  margin: 1.6rem 0 0;
  font-size: .8rem;
  color: rgba(244, 242, 236, .6);
  max-width: 60ch;
}

/* Zahlenreihe ohne Karten: nur Linien und Ziffern. */
.fakten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.fakten li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem 1rem;
  align-items: baseline;
  padding: .7rem 0;
  border-top: 1px solid var(--linie);
}
.fakten li:last-child { border-bottom: 1px solid var(--linie); }
.fakten b {
  font-variation-settings: "wght" 800, "opsz" 96;
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--kobalt);
  min-width: 3.6rem;
}
.fakten span { color: var(--leise); font-size: .92rem; }

/* --------------------------------------------------------------- Ablaufseite */
.ablauf {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem var(--rand-innen) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 3rem;
}
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: sch; }
.schritte > li {
  counter-increment: sch;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: .3rem 1.2rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--linie);
}
.schritte > li:last-child { border-bottom: 1px solid var(--linie); }
.schritte > li::before {
  content: counter(sch, decimal-leading-zero);
  font-variation-settings: "wght" 800, "opsz" 96;
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--kobalt);
  grid-row: span 3;
}
.schritte h2 {
  font-variation-settings: "wght" 650, "opsz" 24;
  font-size: 1.15rem;
  letter-spacing: -.015em;
}
.schritte p { margin: .35rem 0 0; color: var(--leise); max-width: 60ch; }
.schritte .dauer {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kobalt);
  font-variation-settings: "wght" 600, "opsz" 12;
  margin-top: .35rem;
  display: block;
}
.warnbox {
  align-self: start;
  position: sticky;
  top: 1.5rem;
  background: var(--karte);
  color: var(--tinte);
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--rand);
  border-top: 3px solid var(--kobalt);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--schatten);
}
.warnbox h2 {
  font-variation-settings: "wght" 700, "opsz" 24;
  font-size: 1.15rem;
  letter-spacing: -.015em;
  margin-bottom: .6rem;
}
.warnbox ul { margin: 0; padding-left: 1.05rem; }
.warnbox li { margin-bottom: .6rem; font-size: .9rem; line-height: 1.45; }
.warnbox li:last-child { margin-bottom: 0; }
.warnbox b { font-variation-settings: "wght" 700, "opsz" 14; }
.warnbox-zurueck { margin: 1rem 0 0; font-size: .9rem; }
.warnbox-zurueck a { text-underline-offset: 3px; }

/* Zwei Abstandshelfer, damit im Markup keine style-Attribute stehen. */
.abstand-oben { margin-top: 1rem; }
.abstand-eng { margin: .3rem 0 0; }

/* ------------------------------------------------------------------ Studio */
.studio {
  max-width: var(--max);
  margin: 2.5rem auto 0;
  padding: 0 var(--rand-innen);
}
.studio-innen {
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: var(--karte);
  box-shadow: var(--schatten);
  padding: clamp(1.2rem, 4vw, 2rem);
  display: grid;
  gap: 1rem 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
.studio h2 {
  font-variation-settings: "wght" 650, "opsz" 32;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.studio p { color: var(--leise); margin: .5rem 0 0; max-width: 52ch; }
.studio-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ------------------------------------------------------------------ Fußzeile */
.fuss {
  max-width: var(--max);
  margin: 2.5rem auto 0;
  padding: 1.2rem var(--rand-innen) 2rem;
  font-size: .84rem;
  color: var(--leise);
}
.fuss-innen { border-top: 1px solid var(--linie); padding-top: 1.2rem; }
.fuss a { text-underline-offset: 3px; }
.fuss p { margin: 0 0 .4rem; }

/* -------------------------------------------------------------- Breakpoints */
@media (min-width: 34rem) {
  .rail-label { font-size: .72rem; }
}

/* Ab hier hat die Ziffer ihre eigene Spalte: Zahl links, Erklärung rechts,
   wie in einem gesetzten Preisblatt. */
@media (min-width: 46rem) {
  .ziffer {
    grid-template-columns: minmax(7.5rem, 26%) minmax(0, 1fr);
    gap: 0 2.2rem;
    align-items: start;
  }
  .ziffer-text { padding-top: .45rem; }
  .stub {
    display: grid;
    grid-template-columns: minmax(7.5rem, 26%) minmax(0, 1fr);
    gap: 0 2.2rem;
    align-items: start;
  }
  .stub-kicker { grid-column: 1 / -1; }
  .stub-text { margin-top: .45rem; }
}

@media (min-width: 60rem) {
  .stage {
    grid-template-columns: 7rem minmax(0, 1fr);
    grid-template-areas: "rail panel";
    gap: 1.5rem 1.75rem;
  }
  /* Am Desktop wird die Schiene eine echte Spindel: eine durchgehende
     Haarlinie, auf der ein Marker sitzt. Kein Reiter am Kartenrand. */
  .rail {
    grid-area: rail;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    position: sticky;
    top: 1.25rem;
    align-self: start;
  }
  .rail::before {
    content: "";
    position: absolute;
    left: 0; top: .5rem; bottom: .5rem;
    width: 1px;
    background: var(--linie);
  }
  .rail-item button { border-top: 0; padding: .55rem .1rem .7rem .9rem; position: relative; }
  .rail-item button::before {
    content: "";
    position: absolute;
    left: -1px; top: .62rem;
    width: 3px; height: 1.15rem;
    background: transparent;
  }
  .rail-item.is-now button::before { background: var(--signal); }
  .rail-item.is-done button::before { background: rgba(255, 176, 32, .5); }
  /* Teilungsmarken: die Schiene ist eine Skala, keine Liste. */
  .rail-item button::after {
    content: "";
    position: absolute;
    left: -3px; bottom: 0;
    width: 7px; height: 1px;
    background: var(--linie);
  }
  .rail-item:last-child button::after { display: none; }
  .panel-wrap { grid-area: panel; }
  .geld { grid-column: 1 / -1; }
  .erg-gitter { grid-template-columns: 1.15fr 1fr; }
  .erg-spalte { border-top: 0; border-left: 1px solid var(--linie); }
  .erg-spalte:first-child { border-left: 0; }
  .erg-spalte { border-left-color: var(--p-linie); }
  /* Überschrift als Marginalie neben dem Text, nicht darüber. So liest sich
     der Abschnitt wie eine Seite aus einem Buch und nicht wie ein Block. */
  .stimme-innen {
    display: grid;
    grid-template-columns: minmax(8.5rem, 14rem) minmax(0, 46rem);
    gap: 0 3.2rem;
    align-content: start;
    max-width: none;
  }
  .stimme-kopf { grid-column: 1; grid-row: 1; }
  .stimme-innen > :not(.stimme-kopf) { grid-column: 2; }
  .stimme-h { margin-bottom: 0; }
  .stimme-laut { max-width: 21ch; }
  .ablauf { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .studio-innen { grid-template-columns: 1fr auto; }
}

@media (min-width: 76rem) {
  .stage {
    grid-template-columns: 7rem minmax(0, 1fr) 25rem;
    grid-template-areas: "rail panel geld";
  }
  .geld {
    grid-area: geld;
    position: sticky;
    top: 1.25rem;
  }
  .bar { display: none; }
  body { padding-bottom: 0 !important; }
}

/* Auf schmalen Geräten liegt die Summe fix unten, deshalb Platz freihalten. */
@media (max-width: 75.999rem) {
  body.seite-rechner { padding-bottom: 5.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tick::after { transition: none; }
  /* Der Druckvorgang fällt weg, das Ergebnis bleibt: das Blatt steht fertig
     da, der Riss passiert trotzdem, nur eben ohne Vorführung. */
  .druckkopf { display: none; }
}

/* ------------------------------------------------------------------- Druck */
#druck { display: none; }

@media print {
  @page { size: A4 portrait; margin: 16mm 15mm 14mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 9.6pt;
    line-height: 1.35;
    padding: 0 !important;
    overflow: visible !important;
  }
  /* Überall weg: alles, was nur am Bildschirm Sinn ergibt. */
  .demo-note, .springlink, .bar, .studio, .gespeichert, .hauptnav { display: none !important; }

  /* Auf der Rechnerseite wird ausschließlich das Dokument gedruckt. */
  .seite-rechner .masthead, .seite-rechner .stage, .seite-rechner .ergebnis,
  .seite-rechner .stimme, .seite-rechner .preisblatt,
  .seite-rechner .fuss { display: none !important; }

  /* Die Ablaufseite darf sich selbst drucken, nur eben in Schwarz auf Weiß. */
  .seite-ablauf .warnbox { position: static !important; border-top: 1pt solid #000 !important; }
  .seite-ablauf *, .seite-ablauf *::before {
    color: #000 !important;
    background: transparent !important;
    border-color: #000 !important;
  }
  .seite-ablauf .marke rect { fill: #000 !important; }
  .seite-ablauf .marke path { stroke: #fff !important; }

  #druck { display: block !important; color: #000; }
  #druck * { color: #000 !important; background: transparent !important; }

  .d-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1.6pt solid #000;
    padding-bottom: 4pt;
    margin-bottom: 10pt;
  }
  .d-marke { font-variation-settings: "wght" 750, "opsz" 24; font-size: 13pt; letter-spacing: -.01em; }
  .d-meta { text-align: right; font-size: 8.6pt; }
  .d-meta span { display: block; font-variant-numeric: tabular-nums; }
  .d-h1 { font-variation-settings: "wght" 700, "opsz" 24; font-size: 12.5pt; margin-bottom: 1pt; }
  .d-sub { font-size: 8.8pt; margin-bottom: 9pt; }

  .d-tab { width: 100%; border-collapse: collapse; margin-bottom: 8pt; }
  .d-tab caption {
    text-align: left;
    font-variation-settings: "wght" 700, "opsz" 14;
    font-size: 9.2pt;
    padding-bottom: 2.5pt;
    border-bottom: .8pt solid #000;
    margin-bottom: 2pt;
  }
  .d-tab td, .d-tab th { padding: 1.9pt 0; text-align: left; vertical-align: top; }
  .d-tab td:first-child, .d-tab th:first-child { padding-right: 8pt; }
  .d-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .d-tab tfoot th { border-top: .5pt solid #000; font-variation-settings: "wght" 700, "opsz" 14; }

  .d-gesamt {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1.6pt solid #000;
    border-bottom: 1.6pt solid #000;
    padding: 5pt 0;
    margin: 4pt 0 9pt;
    font-variation-settings: "wght" 800, "opsz" 40;
    font-size: 13pt;
    font-variant-numeric: tabular-nums;
  }
  .d-trenn {
    font-variation-settings: "wght" 750, "opsz" 18;
    font-size: 10pt;
    border-top: .8pt dashed #000;
    padding-top: 4pt;
    margin: 2pt 0 5pt;
  }
  .d-raten { font-size: 8.4pt; margin: 6pt 0 4pt; }
  .d-fuss { font-size: 7.6pt; border-top: .5pt solid #000; padding-top: 4pt; margin: 0; }

  a[href]::after { content: ""; }
}