/*
 * ══════════════════════════════════════════════════════════════════════════
 *  Die Erscheinung der oeffentlichen Seiten
 *  (Startseite, ihre Unterseiten, Anfrage, Rechtstexte, Anmeldemaske)
 * ══════════════════════════════════════════════════════════════════════════
 *
 * EIGENE DATEI, NICHT EIN ABSCHNITT IN app.css -- aus drei Gruenden:
 *
 *   1. SIE WIRD NUR AUF DIESEN SEITEN GELADEN (public/_layout.html.twig,
 *      Block `stylesheets`). Was hier steht, kann die Arbeitsbildschirme
 *      hinter der Anmeldung nicht veraendern, weil es dort gar nicht
 *      ankommt.
 *   2. SIE LAEUFT NICHT DURCH TAILWIND. Die Seiten sind gestaltete Flaechen
 *      mit eigener Geometrie (Tafel, Blattstapel, Fristenstreifen), keine
 *      Bildschirme aus Hilfsklassen.
 *   3. EIGENER NAMENSRAUM, DIESELBEN FARBEN. Die Werte der Marke stehen
 *      einmal in brand.css. Die Anwendung nennt ihren Zweck `--color-*`
 *      (app.css), diese Seiten nennen ihn `--public-*`, gesetzt an
 *      `.public-page` (die Klasse am <body>). Beide verweisen nur.
 *
 * WIE SIE SICH GEGEN app.css DURCHSETZT: app.css wird auf jeder Seite
 * geladen, und zwar NACH dieser Datei. Tailwinds Hilfsklassen liegen in
 * Kaskadenschichten, diese Datei in keiner -- ungeschichtete Regeln
 * schlagen geschichtete. Das gilt seit dem 2026-10-10 auch fuer die
 * Vorgaben fuer Felder und Beschriftungen (`label`, `input[type=…]`): sie
 * liegen in app.css in `@layer base`, und JEDE Regel hier gewinnt gegen
 * sie, gleich wie genau ihr Selektor ist. Nur gegen die ungeschichteten
 * Grundregeln (`body`, `h1, h2, h3`, der Fokusring fuer Verweise und
 * Knoepfe) zaehlt weiter die Spezifitaet: dort stehen Elementselektoren,
 * hier immer mindestens eine Klasse mehr.
 *
 * DIE REGELN DER ERSCHEINUNG (Entwurf E, vom Auftraggeber gewaehlt am
 * 2026-10-09; Bauart der Schwesterprodukte Waidwart und Apiara):
 *   - PETROL TRAEGT: Tafel, Knopf, Marke. Sand ist der Grund, Nebel-Mint
 *     der helle Akzent.
 *   - LINDENLAUB-OCKER GEHOERT DEN FRISTEN und dem Hinweisband, das etwas
 *     als Beispiel ausweist. Sonst ist nichts auf den Seiten ocker.
 *   - MASCHINENSCHRIFT HEISST "IM BLATT EINGETRAGEN": sie steht nur im
 *     Musterblatt. Was in der Erfassung steht, steht in der Grotesk -- wie
 *     in der Anwendung.
 *   - TEXT STEHT NIE DIREKT AUF DEM BILD. Er steht auf der Tafel oder auf
 *     einem eigenen Grund; die Kontraste sind gerechnet (docs/bilder.md).
 *   - KLEINE RUNDUNGEN, RAENDER VON EINEM PIXEL, kein Schatten als Zierde:
 *     Schatten haben nur die Tafel und das Produktfenster, weil sie ueber
 *     dem Bild liegen.
 *
 * OHNE JAVASCRIPT UND BEI `prefers-reduced-motion: reduce` STEHT ALLES
 * FERTIG DA: Erfassung und Blatt ausgefuellt, Woche gezeichnet, die Allee
 * in Massstab 1. Der Ruhezustand ist der Endzustand; die Bewegung
 * (assets/alpine/landingMotion.js) spult von dort zurueck und laeuft wieder
 * hin.
 */

/* ══════════════════════════════════════════════════════════════════════════
 *  Schriften -- selbst ausgeliefert
 * ══════════════════════════════════════════════════════════════════════════
 *
 * NICHT VON GOOGLE GELADEN. Die Datenschutzerklaerung sagt zu, dass beim
 * Aufruf einer Seite kein Dritter erfaehrt, wer sie aufgerufen hat;
 * PublicPagesTest haelt es fuer jede oeffentliche Seite fest. Herkunft und
 * Lizenz: assets/fonts/README.md.
 *
 * HIER STEHT NUR DIE MASCHINENSCHRIFT (Courier Prime 400, 11 KB): sie
 * kommt allein im Musterblatt vor. Archivo, die Schrift von allem anderen,
 * erklaert brand.css -- einmal, fuer beide Welten.
 */
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-400-yc7gvQc.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  Tokens und Grundlagen
 * ══════════════════════════════════════════════════════════════════════════ */
/* DIE WERTE STEHEN IN brand.css, hier steht ihr ZWECK auf diesen Seiten.
   Die Datei kommt ueber app.css an, das auf jeder Seite geladen wird. */
.public-page {
  --public-brand: var(--brand-petrol); /* Petrol: Tafel, Knopf, Marke */
  --public-brand-deep: var(--brand-petrol-deep); /* Feld hinter Tafel und Fristenstreifen */
  --public-night: var(--brand-night); /* Fusszeile */
  --public-ground: var(--brand-sand); /* Sand: Seitengrund */
  --public-ground-deep: var(--brand-sand-deep); /* abgesetzte Flaechen */
  --public-surface: var(--brand-paper); /* Karten, Kopfzeile, Blatt */
  --public-mist: var(--brand-mist); /* Nebel-Mint: heller Akzent */
  --public-mist-soft: var(--brand-mist-soft);
  --public-deadline: var(--brand-linden); /* Lindenlaub: Fristen und Hinweisband */
  --public-deadline-soft: var(--brand-linden-soft);
  --public-ink: var(--brand-ink);
  --public-ink-soft: var(--brand-ink-soft); /* 6,2:1 auf Sand */
  --public-line: var(--brand-line);
  --public-line-strong: var(--brand-line-strong); /* Schreiblinien im Blatt, Eingabefelder */
  --public-on-dark: var(--brand-on-dark);
  --public-on-dark-quiet: var(--brand-on-dark-quiet); /* 7,2:1 auf dem tiefen Petrol */
  --public-sheet-ink: var(--brand-sheet-ink); /* was im Blatt eingetragen ist */
  --public-error: var(--brand-error);
  --public-error-soft: var(--brand-error-soft);

  --public-sans: var(--brand-sans);
  --public-typed: "Courier Prime", "Courier New", Courier, monospace;

  --public-gutter: clamp(1rem, 4vw, 2.5rem);
  --public-radius: var(--brand-radius);
  --public-radius-large: var(--brand-radius-large);

  background: var(--public-ground);
  color: var(--public-ink);
  font-family: var(--public-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.public-page :focus-visible {
  outline: 3px solid var(--public-deadline);
  outline-offset: 3px;
  border-radius: 3px;
}
/* EIN TEXTFELD ZEIGT SEINEN FOKUS SELBST: Kante in Petrol, Ring in
   Nebel-Mint (app.css bzw. `.form-sheet` weiter unten). Der Umriss oben
   kaeme sonst als zweites Zeichen dazu -- auf der Anmeldemaske, deren erstes
   Feld den Fokus schon beim Laden traegt, als ockerfarbener Rahmen um die
   E-Mail. Bis zum 2026-10-10 nahm ihn die ungeschichtete Feldregel aus
   app.css ueber ihre Spezifitaet weg; seit sie in `@layer base` liegt, muss
   es hier stehen. */
.public-page :is(input, textarea, select):not([type="checkbox"], [type="radio"]):focus-visible {
  outline: none;
}

.page-wrap {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--public-gutter);
}

/* Titel: schmal und fett, in gemischter Schreibweise.
   `font-family` steht ausdruecklich da: app.css setzt h1 bis h3 in die
   Titelschrift der Anwendung, und eine Klasse wiegt mehr als das Element.
   Eine Regel fuer ALLE Ueberschriften der Seite naehme der Anmeldemaske
   ihre Wortmarke. */
.display {
  font-family: var(--public-sans);
  font-stretch: 78%;
  font-weight: 760;
  letter-spacing: -0.012em;
  line-height: 1.04;
  text-wrap: balance;
}

.typed {
  font-family: var(--public-typed);
  font-stretch: 100%;
  font-weight: 400;
  color: var(--public-sheet-ink);
}

/* Eine Frist im Fliesstext (App\Landing\Phrase). Ocker als Schrift truege
   auf Sand nicht (2,4:1) -- deshalb als Hinterlegung. */
.deadline-ink {
  padding: 0.05em 0.3em;
  border-radius: 3px;
  background: var(--public-deadline-soft);
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-link {
  color: var(--public-brand);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ── Knopf ─────────────────────────────────────────────────────────────
   Hell mit feiner Innenlinie: so steht er auf der Tafel. `button-solid`
   ist dieselbe Form in Petrol, fuer hellen Grund (Formular). */
.button {
  display: inline-block;
  padding: 0.8rem 1.35rem;
  border: 0;
  border-radius: var(--public-radius);
  background: var(--public-surface);
  color: var(--public-brand-deep);
  font: 720 1.02rem/1.2 var(--public-sans);
  font-stretch: 88%;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--public-surface), inset 0 0 0 3px var(--public-brand);
}
.button:hover { background: var(--public-mist-soft); box-shadow: inset 0 0 0 2px var(--public-mist-soft), inset 0 0 0 3px var(--public-brand); }
.button-solid {
  background: var(--public-brand);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--public-brand), inset 0 0 0 3px rgba(191, 227, 211, 0.6);
}
.button-solid:hover { background: var(--public-brand-deep); box-shadow: inset 0 0 0 2px var(--public-brand-deep), inset 0 0 0 3px rgba(191, 227, 211, 0.6); }

/* Das Bildzeichen (`brand-mark`) steht in app.css: auch die Kopfzeile der
   Anwendung traegt es. */

/* ══════════════════════════════════════════════════════════════════════════
 *  Kopfzeile
 * ══════════════════════════════════════════════════════════════════════════
 *
 * SCHMAL OHNE SKRIPT UND OHNE AUFKLAPPER: Marke und Zugang bleiben oben,
 * die Unterseiten ruecken als eigene Zeile darunter. Fuenf kurze Verweise
 * brauchen kein Menue, hinter dem man sie suchen muss.
 */
.public-header { background: var(--public-surface); border-bottom: 1px solid var(--public-line); }
.public-header-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem 2rem;
  max-width: 75rem;
  min-height: 4rem;
  margin-inline: auto;
  padding-inline: var(--public-gutter);
}
.public-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--public-ink);
  font-stretch: 82%;
  font-weight: 760;
  font-size: 1.3rem;
  letter-spacing: 0.005em;
  text-decoration: none;
}
.public-wordmark .brand-mark { color: var(--public-brand); }
.public-header-pages,
.public-header-nav { display: flex; align-items: center; gap: 0.25rem 1.6rem; font-size: 0.95rem; font-weight: 500; }
.public-header-link { padding-block: 0.4rem; color: var(--public-ink-soft); text-decoration: none; white-space: nowrap; }
.public-header-link:hover { color: var(--public-ink); text-decoration: underline; text-underline-offset: 0.3em; }
/* Die aktuelle Seite: `aria-current` setzt PHP (App\Twig\PublicNavigation). */
.public-header-link[aria-current="page"] { color: var(--public-ink); font-weight: 700; box-shadow: 0 2px 0 var(--public-brand); }
.public-header-nav .public-header-link { color: var(--public-ink); font-weight: 700; }
/* Der eine Weg hinein fuer jemanden ohne Zugang (NavigationLink::$primary). */
.public-header-link[data-primary] {
  padding: 0.45rem 0.95rem;
  border-radius: var(--public-radius);
  background: var(--public-brand);
  color: #fff;
  font-weight: 650;
}
.public-header-link[data-primary]:hover { background: var(--public-brand-deep); color: #fff; text-decoration: none; }
.public-header-link[data-primary][aria-current="page"] { box-shadow: inset 0 0 0 2px var(--public-brand), inset 0 0 0 3px rgba(191, 227, 211, 0.7); }

/* ══════════════════════════════════════════════════════════════════════════
 *  Tafel
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Petrol mit feiner Innenlinie in Nebel-Mint. Sie ist der Grund fuer jeden
 * Text, der sonst auf dem Bild laege: Weiss auf Petrol sind 9,9:1.
 */
.plaque {
  padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 7px;
  background: var(--public-brand);
  color: #fff;
  box-shadow:
    inset 0 0 0 6px var(--public-brand),
    inset 0 0 0 7px rgba(191, 227, 211, 0.6),
    0 1.2rem 2.4rem -1rem rgba(7, 37, 36, 0.55);
}
.plaque :focus-visible { outline-color: #fff; }
.plaque p { color: var(--public-on-dark); }
.plaque-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.5rem; }
.plaque-link { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
.plaque-link:hover { text-decoration-thickness: 2px; }

/* ── Die Allee hinter einer Tafel (startseite/_backdrop.html.twig) ─────── */
/* `overflow: hidden` haelt das Zurueckweichen im Aufmacher im Rahmen: das
   Bild waechst nur (Massstab 1,08 bis 1), um einen Punkt im Bild, also
   zeigt sich nie eine Kante. Der Grund darunter ist das tiefe Petrol, falls
   das Bild noch laedt. */
.backdrop { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--public-brand-deep); }
.backdrop-media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* Nur solange das Skript die Bewegung fuehrt (landingMotion.js setzt und
   nimmt `data-live`). */
.backdrop[data-live] .backdrop-media { will-change: transform; }
/* "Symbolbild" steht auf eigenem Grund, nicht auf dem Bild: 9,4:1 selbst
   ueber einer weissen Stelle. */
.backdrop-caption {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  background: rgba(7, 37, 36, 0.86);
  color: var(--public-on-dark);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  Aufmacher der Startseite
 * ══════════════════════════════════════════════════════════════════════════
 *
 * BREIT FUELLT DIE ALLEE DIE GANZE BUEHNE, randlos; die Tafel steht unten
 * auf dem Bild, ueber dem Rand, an dem sich das Produktfenster hineinschiebt.
 * Die Hoehe kommt aus dem Fenster, nicht aus einem Seitenverhaeltnis: ein
 * `aspect-ratio` mit Hoechstmass schrumpfte im Prototyp die Breite und liess
 * rechts einen Streifen frei.
 *
 * SCHMAL (unter 48rem) steht das Bild als Band oben, die Tafel darunter auf
 * dem tiefen Petrol und greift ein Stueck ins Band. Dort bewegt sich nichts
 * -- landingMotion.js fragt dieselbe Grenze ab.
 */
.hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 5vw, 3.25rem) 9.5rem; background: var(--public-brand-deep); }
.hero .page-wrap { position: relative; }
@media (min-width: 48rem) {
  .hero { display: flex; align-items: flex-end; min-height: clamp(34rem, 86vh, 60rem); padding-top: 3rem; }
  .hero .page-wrap { flex: 1 1 auto; }
}
@media (max-width: 47.99rem) {
  .hero { padding-top: 0; }
  .hero .backdrop { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .hero .backdrop-caption { top: 0.5rem; right: 0.5rem; }
  .hero .page-wrap { margin-top: -2.5rem; }
}
.hero .plaque { max-width: 32.5rem; }
.hero-title { font-size: clamp(2.1rem, 4.1vw, 3.15rem); }
.hero-lede { margin-top: 1rem; max-width: 26rem; font-size: 1.1rem; line-height: 1.5; }

/* ── Das Produktbild schiebt sich von unten ins Bild ────────────────── */
.demo { position: relative; margin-top: -6.75rem; }
.window {
  overflow: hidden;
  border: 1px solid var(--public-line);
  border-radius: var(--public-radius-large);
  background: var(--public-surface);
  box-shadow: 0 2rem 3.5rem -1.8rem rgba(7, 37, 36, 0.5), 0 0.25rem 0.75rem -0.25rem rgba(7, 37, 36, 0.18);
}
.demo-panes { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.pane { min-width: 0; padding: clamp(1.1rem, 2.2vw, 1.75rem); }
.pane-papers { border-left: 1px solid var(--public-line); background: var(--public-ground-deep); }
.pane-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; margin-bottom: 1.1rem; }
.pane-title { font-stretch: 84%; font-weight: 720; font-size: 1.02rem; }
.pane-hint { font-size: 0.8rem; color: var(--public-ink-soft); }
.demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1rem clamp(1.1rem, 2.2vw, 1.75rem);
  border-top: 2px solid var(--public-ink);
}
.demo-claim { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.demo-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.demo-note { font-size: 0.82rem; color: var(--public-ink-soft); }
.replay {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--public-brand);
  border-radius: var(--public-radius);
  background: transparent;
  color: var(--public-brand);
  font: 650 0.86rem/1.2 var(--public-sans);
  cursor: pointer;
}
.replay:hover { background: var(--public-mist-soft); }

/* ══════════════════════════════════════════════════════════════════════════
 *  Produktfenster: ein nachgezeichneter Bildschirm (App\Landing\Screen)
 * ══════════════════════════════════════════════════════════════════════════
 *
 * EINE ZEICHNUNG AUS HTML. Im Aufmacher ist er die linke Haelfte des
 * Fensters, in der Erzaehlung steht er als eigenes Fenster in der Szene.
 * Welcher Schritt der aktuelle ist, welche Auswahl getroffen und welchen
 * Zustand eine Zeile traegt, kommt aus PHP; das Aussehen haengt an
 * `aria-current`, `data-chosen` und `data-state`.
 */
.screen { container-type: inline-size; margin: 0; }
.screen-view { font-stretch: 84%; font-weight: 720; font-size: 1.02rem; color: var(--public-ink); }
.screen-steps { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.screen-step {
  padding: 0.12rem 0.55rem;
  border-radius: 3px;
  background: var(--public-ground-deep);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--public-ink-soft);
}
.screen-step[aria-current="step"] { background: var(--public-brand); color: #fff; font-weight: 650; }
.screen-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem 0.9rem; margin-top: 1rem; }
.screen-row { min-width: 0; }
.screen-row dt { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--public-ink-soft); }
.screen-mandatory { font-style: normal; color: var(--public-brand); }
.screen-input {
  display: flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--public-line);
  border-radius: var(--public-radius);
  background: #fff;
  font-weight: 500;
  color: var(--public-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.screen-input.is-writing { border-color: var(--public-brand); box-shadow: 0 0 0 3px var(--public-mist); }
.screen-choice {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  overflow: hidden;
  min-height: 2.6rem;
  border: 1px solid var(--public-line);
  border-radius: var(--public-radius);
  background: #fff;
}
.screen-option { display: flex; align-items: center; justify-content: center; padding: 0.3rem 0.5rem; font-size: 0.95rem; font-weight: 500; color: var(--public-ink-soft); transition: background-color 0.25s, color 0.25s; }
.screen-option + .screen-option { border-left: 1px solid var(--public-line); }
.screen-option[data-chosen]:not(.is-pending) { background: var(--public-brand); color: #fff; font-weight: 650; }
/* Eine Zeile mit Zustand ist eine Zeile der Checkliste: Formular links,
   Merkzeichen rechts. */
.screen-row:has(.screen-state) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--public-line);
  border-radius: var(--public-radius);
  background: #fff;
}
.screen-row:has(.screen-state) dt { margin: 0; font-size: 0.92rem; color: var(--public-ink); }
.screen-rows:has(.screen-state) { gap: 0.4rem; }
.screen-state {
  flex: none;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  background: var(--public-deadline-soft);
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--public-ink);
}
.screen-state[data-state="ausgefertigt"] { background: var(--public-brand); color: #fff; }
@container (min-width: 18rem) {
  .screen-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-row:has(.screen-choice),
  .screen-row:has(.screen-state) { grid-column: 1 / -1; }
}
.screen-note { margin-top: 1.2rem; max-width: 30rem; font-size: 0.86rem; line-height: 1.45; color: var(--public-ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
 *  Das Musterblatt und die Blaetter dahinter
 * ══════════════════════════════════════════════════════════════════════════
 *
 * DIE HINTEREN BLAETTER STEHEN IM QUELLTEXT VOM VORDEREN ZUM HINTEREN und
 * werden umgekehrt gestapelt: so ist die Reihenfolge im Dokument die
 * Reihenfolge, in der der Name nachrueckt -- das Skript braucht keine
 * Nummern.
 */
.sample-tabs { display: flex; flex-direction: column-reverse; }
.sample-tab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  /* EIN STAPEL, KEIN FAECHER: jedes Blatt weiter hinten ist auf BEIDEN Seiten
     schmaler und liegt UNTER dem davor. Vorher wanderten die Blaetter
     schraeg nach rechts, und weil das hintere im Quelltext spaeter steht,
     malte es sich UEBER das vordere -- zu sehen waren Flaechen ohne linken
     und unteren Rand, die wie abgeschnitten aussahen (Befund des
     Auftraggebers am Bildschirm, 2026-10-10). */
  position: relative;
  z-index: calc(4 - var(--depth));
  margin-bottom: -0.3rem;
  margin-inline: calc(var(--depth) * 0.72rem);
  padding: 0.32rem 0.8rem 0.5rem;
  border: 1px solid #cdc3af;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, #fff calc(100% - var(--depth) * 12%), var(--public-ground-deep));
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--public-ink-soft);
}
.sample-tab .typed { font-size: 0.86rem; white-space: nowrap; }
.sample-sheet {
  position: relative;
  z-index: 4;
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid #cdc3af;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0.8rem 1.4rem -1rem rgba(19, 36, 35, 0.45);
}
.sample-sheet-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.74rem; line-height: 1.35; color: var(--public-ink-soft); }
.sample-sheet-head b { display: block; font-weight: 700; color: var(--public-ink); }
.sample-sheet-stamp { align-self: flex-start; padding: 0.5rem 0.6rem; border: 1px dashed #b9af9b; border-radius: 2px; font-size: 0.68rem; color: #6c6759; white-space: nowrap; }
.sample-sheet-title { margin-top: 0.6rem; font-stretch: 84%; font-weight: 760; font-size: 1.12rem; }
.sample-sheet-section { margin-top: 0.75rem; padding: 0.14rem 0.5rem; background: #ece6d9; font-size: 0.72rem; font-weight: 700; }
.sample-sheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }
.sample-field { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 2.5rem; padding-top: 0.3rem; border-bottom: 1px solid var(--public-line-strong); }
.sample-field-label { font-size: 0.66rem; color: #6c6759; }
.sample-field .typed { min-height: 1.25em; font-size: 0.98rem; line-height: 1.25; border-radius: 2px; }
.sample-choices { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; padding-block: 0.55rem 0.1rem; font-size: 0.8rem; }
.sample-choice { display: inline-flex; align-items: center; gap: 0.4rem; }
.tick { width: 0.95rem; height: 0.95rem; border: 1px solid #6c6759; background: #fff; }
.tick svg { display: block; width: 100%; height: 100%; opacity: 0; }
.tick[data-chosen]:not(.is-pending) svg { opacity: 1; }
.tick path { fill: none; stroke: var(--public-sheet-ink); stroke-width: 2; stroke-linecap: round; }

/* Was das Skript noch nicht geschrieben hat, haelt seinen Platz. */
.fill-pending { visibility: hidden; }
.typed.is-writing { background: var(--public-mist-soft); }
.typed.is-writing .fill-shown { box-shadow: 0.14em 0 0 -0.02em var(--public-brand); }

/* KEIN AUFBLITZEN DES FERTIGEN BILDES. Die Seite kommt ausgefuellt vom
   Server; bis das Skript geladen ist und zurueckspult, stuende alles einen
   Augenblick fertig da und leerte sich dann. Deshalb bleiben die Eintraege
   verborgen, solange ein Skript zu erwarten ist und Bewegung erwuenscht --
   aber NUR drei Sekunden: kommt das Skript nicht (Netz, Fehler), erscheinen
   sie von selbst. Sobald es uebernimmt, setzt es `data-motion`, und die
   Regel greift nicht mehr. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-landing-demo]:not([data-motion]) [data-fill]:not([data-fill-kind="toggle"]) { animation: await-script 3s step-end both; }
}
@keyframes await-script { from { visibility: hidden; } to { visibility: visible; } }

/* ══════════════════════════════════════════════════════════════════════════
 *  Hinweisband: "Beispiel", "erfunden"
 * ══════════════════════════════════════════════════════════════════════════
 *
 * In der Farbe der Fristen, weil es dasselbe sagt wie sie: hier genau
 * hinsehen. Tinte auf Ocker sind 6,3:1.
 */
.example-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  padding: 0.55rem 1rem;
  border-radius: var(--public-radius);
  background: var(--public-deadline);
  color: var(--public-ink);
  font-size: 0.92rem;
  font-weight: 500;
}
.example-tag { font-stretch: 84%; font-weight: 760; font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
 *  Die Beispielwoche: der Fristenstreifen
 * ══════════════════════════════════════════════════════════════════════════
 *
 * BREIT: elf Tage als Spalten, darueber liegen die Fristen als Balken von
 * links nach rechts. SCHMAL: die Woche steht hochkant -- die Tage als
 * Zeilen am linken Rand, die Fristen als senkrechte Balken daneben, und
 * rechts die Fristen als Tafeln in derselben Farbe.
 *
 * DIE LAGEN KOMMEN AUS PHP (App\Landing\ExampleWeek, WeekPosition) als
 * Eigenschaften am Element: `--call` und `--conversation` an der Zeichnung,
 * `--until` an jeder Frist. Hier steht nur, WIE gezeichnet wird, nicht WO.
 * Welche Gestalt eine Frist hat, sagt `data-shape`.
 */
.week { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--public-brand-deep); color: var(--public-on-dark); }
.week :focus-visible { outline-color: #fff; }
.plan { margin: 0; }
.plan-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 1.25rem 3rem; }
.plan-title { font-size: clamp(2rem, 4.2vw, 3.2rem); color: #fff; }
.plan-lede { max-width: 30rem; font-size: 1.08rem; }
.plan .example-band { margin-top: 1.75rem; }

.plan-chart { position: relative; margin-top: 1.25rem; }
.days { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--day-count), minmax(0, 1fr)); gap: 0 5px; }
.day {
  padding: 0.5rem 0 0 0.65rem;
  border-radius: 6px;
  background: rgba(191, 227, 211, 0.09);
  font-stretch: 84%;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.day[data-kind="weekend"] {
  background: repeating-linear-gradient(135deg, rgba(191, 227, 211, 0.05) 0 6px, rgba(191, 227, 211, 0.11) 6px 7px);
  font-weight: 500;
  color: var(--public-on-dark-quiet);
}
/* Die senkrechten Balken gibt es nur hochkant. */
.rails { display: none; }
.lanes { position: relative; display: grid; gap: 0.6rem; padding-block: 2.6rem 1rem; }

.lane-events { position: relative; min-height: 1.5rem; }
.pin { display: inline-flex; align-items: center; gap: 0.45rem; padding-left: 0.65rem; font-size: 0.9rem; font-weight: 600; color: #fff; white-space: nowrap; }
.pin::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border: 2px solid #fff; border-radius: 50%; }
.pin[data-event="conversation"] { position: absolute; top: 0; left: var(--conversation); }
.pin[data-event="conversation"]::before { background: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: var(--conversation); padding-left: 0.65rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.7rem 0.38rem 0.55rem;
  border-radius: 3px;
  background: var(--public-surface);
  color: var(--public-ink);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.chip svg { flex: none; width: 1rem; height: 1rem; padding: 2px; border-radius: 50%; background: var(--public-brand); }
.chip path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* "ausgefüllt" steht da, wird aber vom Haken gezeigt. */
.chip-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Eine Frist: der Balken traegt die Kurzform, darunter steht der Satz mit
   Fundstelle. */
.deadline { --from: var(--call); display: grid; gap: 0.3rem; }
.deadline-bar {
  display: flex;
  align-items: center;
  width: calc(var(--until) - var(--from));
  min-height: 2.4rem;
  margin-left: var(--from);
  padding: 0.35rem 0.9rem;
  border-radius: 6px 2px 2px 6px;
  background: var(--public-deadline);
  box-shadow: 4px 0 0 #fff;
  color: var(--public-ink);
  font-stretch: 84%;
  font-weight: 760;
  font-size: 1.15rem;
  line-height: 1.15;
  white-space: nowrap;
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.deadline-text { margin-left: var(--from); padding-left: 0.2rem; max-width: 46rem; font-size: 0.92rem; line-height: 1.35; color: var(--public-on-dark); }
.cite { font-style: normal; white-space: nowrap; color: var(--public-on-dark-quiet); }
/* Die laengste Frist in Nebel-Mint: sie ist der Rahmen, in dem alles
   andere liegt, nicht die naechste Dringlichkeit. */
.deadline[data-shape="span"] ~ .deadline[data-shape="span"] .deadline-bar { width: calc(var(--until) - var(--from) - 4px); background: var(--public-mist); transition-duration: 1.5s; }
/* Ohne eigenen Tag: liegt in der Frist, hat in der Zeichnung keinen
   Endpunkt -- gestrichelt, und die Beischrift sagt es. */
.deadline[data-shape="undated"] .deadline-bar {
  border: 1.5px dashed var(--public-mist);
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--public-mist);
  font-size: 1rem;
}
/* Ein Zeitpunkt: eine Marke, die an ihrer Stelle beginnt. */
.deadline[data-shape="moment"] { --from: var(--until); }
.deadline[data-shape="moment"] .deadline-bar {
  width: max-content;
  border-radius: 2px 6px 6px 2px;
  background: var(--public-ground);
  box-shadow: -4px 0 0 var(--public-deadline);
  transition: opacity 0.5s ease 0.9s;
}

/* Nachzeichnen: einen Augenblick zurueckgespult, dann laeuft die Woche
   einmal durch (landingMotion.js). */
.plan-chart.is-rewound .deadline-bar,
.plan-chart.is-rewound .rail { transform: scale(var(--rewound-x, 0), var(--rewound-y, 1)); transition: none; }
.plan-chart.is-rewound .deadline[data-shape="moment"] .deadline-bar { transform: none; opacity: 0; }
.plan-chart.is-rewound .chip { opacity: 0; transform: translateY(0.4rem); transition: none; }
.chip:nth-child(2) { transition-delay: 0.15s; }
.chip:nth-child(3) { transition-delay: 0.3s; }
.chip:nth-child(4) { transition-delay: 0.45s; }

.plan-note { margin-top: 1.25rem; max-width: 47rem; font-size: 0.88rem; color: var(--public-on-dark-quiet); }

/* ══════════════════════════════════════════════════════════════════════════
 *  Wegweiser: die verbundene Leiste
 * ══════════════════════════════════════════════════════════════════════════
 *
 * EIN INHALTSVERZEICHNIS, KEINE KACHELN: eine Flaeche mit einem Rand, durch
 * Linien geteilt. Der erste Wegweiser ist hinterlegt -- auf der Startseite
 * ist das die Erzaehlung.
 */
.signposts { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.signposts-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.signpost-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  overflow: hidden;
  margin-top: 1.5rem;
  border: 1px solid var(--public-line);
  border-radius: var(--public-radius-large);
  background: var(--public-surface);
}
.signpost { position: relative; padding: 1.6rem 1.6rem 1.5rem; }
.signpost + .signpost { border-left: 1px solid var(--public-line); }
.signpost:first-child { background: var(--public-mist-soft); }
.signpost-title { font-stretch: 80%; font-weight: 760; font-size: 1.55rem; line-height: 1.1; color: var(--public-ink); text-decoration: none; }
/* Die ganze Flaeche ist der Verweis. */
.signpost-title::after { content: ""; position: absolute; inset: 0; }
.signpost:hover .signpost-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.signpost-invitation { margin-top: 0.6rem; color: var(--public-ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
 *  Schlusstafel: der eine Weg hinein
 * ══════════════════════════════════════════════════════════════════════════ */
.closing { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--public-brand-deep); }
.closing .page-wrap { position: relative; display: flex; justify-content: flex-end; }
.closing .backdrop-media { object-position: 50% 70%; }
.closing .backdrop-caption { top: auto; right: auto; bottom: 0.75rem; left: 0.75rem; }
.enquiry { max-width: 32rem; }
.enquiry-title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.enquiry-text { margin-top: 0.8rem; }

/* ══════════════════════════════════════════════════════════════════════════
 *  Kopf einer Unterseite
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Dieselbe Tafel wie im Aufmacher, auf dem tiefen Petrol -- oder, in der
 * Erzaehlung, auf der Allee, ruhig.
 */
.page-opening { position: relative; overflow: hidden; padding-block: clamp(1.75rem, 4vw, 3rem); background: var(--public-brand-deep); }
.page-opening:has(.backdrop) { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.page-opening .page-wrap { position: relative; }
.page-opening .plaque { max-width: 44rem; }
.page-title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.page-lede { margin-top: 1rem; max-width: 38rem; font-size: 1.1rem; line-height: 1.5; }
/* Das Band unter dem Kopf laeuft ueber die ganze Breite, sein Text steht in
   der Spalte der Seite. */
.page-notice { background: var(--public-deadline); }
.page-notice .page-example { padding-inline: var(--public-gutter); border-radius: 0; }
.page-example-text { flex: 1 1 20rem; }

.page-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-title { max-width: 18em; font-size: clamp(1.8rem, 3.6vw, 2.7rem); }

/* ══════════════════════════════════════════════════════════════════════════
 *  Die Erzaehlung: Szenen
 * ══════════════════════════════════════════════════════════════════════════
 *
 * JE SZENE DREI DINGE, IN DIESER REIHENFOLGE: links, wann -- rechts, was
 * geschieht; darunter, was Trauerwart dabei tut; und, wo es etwas tut, der
 * Bildschirm dazu. Nach dem Muster "Ein Tag mit Max" aus Waidwart.
 *
 * WO TRAUERWART NICHTS TUT, IST DAS ZU SEHEN: ein gestrichelter Kasten
 * statt der hinterlegten Flaeche, ein offener Punkt an der Linie, kein
 * Bildschirm. Das Merkmal kommt aus App\Landing\SoftwareInvolvement.
 */
.stations { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); --rail-x: 13.5rem; }
/* DIE LINIE FUELLT SICH BEIM SCROLLEN, wie im Entwurf: `::before` ist die
   blasse Spur, `::after` die Fuellung in Petrol darueber, gestaucht auf
   `--course-fill` (0 bis 1). Den Wert setzt landingMotion.js; fehlt er --
   ohne Skript, bei `prefers-reduced-motion` --, ist sie ganz gefuellt.
   Das Skript liest Anfang und Ende der Spur aus `::before`. */
.stations::before,
.stations::after { content: ""; position: absolute; top: 1.2rem; bottom: 1.5rem; left: var(--rail-x); width: 2px; margin-left: -1px; }
.stations::before { background: var(--public-line); }
.stations::after { background: var(--public-brand); transform: scaleY(var(--course-fill, 1)); transform-origin: center top; }
.stations[data-live]::after { will-change: transform; }
.station { position: relative; display: grid; grid-template-columns: calc(var(--rail-x) - 1.75rem) minmax(0, 1fr); column-gap: 3.5rem; align-items: start; }
.station-moment { padding-top: 0.85rem; text-align: right; font-stretch: 82%; font-weight: 720; font-size: 1.2rem; line-height: 1.2; color: var(--public-brand); }
.station-moment .deadline-ink { color: var(--public-ink); font-weight: 720; }
.station-dot {
  position: absolute;
  top: 1.05rem;
  left: var(--rail-x);
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid var(--public-brand);
  border-radius: 50%;
  background: var(--public-brand);
  box-shadow: 0 0 0 4px var(--public-ground);
  transform: translateX(-50%);
  /* Ueber der Fuellung, die als `::after` der Liste spaeter gezeichnet wird. */
  z-index: 1;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.station[data-involvement="stays-out"] .station-dot { background: var(--public-ground); }
/* Noch nicht erreicht: ein blasser, offener Punkt auf der blassen Spur. */
.station-dot[data-ahead] { border-color: var(--public-line-strong); background: var(--public-ground); }
/* KEIN SPRUNG BEIM LADEN: die Seite kommt mit voller Linie; bis das Skript
   uebernimmt (`data-live`), steht sie leer, sonst stuende sie einen
   Augenblick voll da und leerte sich dann. Nur drei Sekunden -- kommt das
   Skript nicht, steht sie von selbst ganz da. Dieselbe Regel wie beim
   Produktfenster (`await-script`). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-landing-course]:not([data-live])::after { animation: await-course 3s step-end both; }
  [data-landing-course]:not([data-live]) .station-dot { animation: await-course-stop 3s step-end both; }
}
@keyframes await-course { from { transform: scaleY(0); } }
@keyframes await-course-stop { from { border-color: var(--public-line-strong); background-color: var(--public-ground); } }
.station-scene { min-width: 0; padding: clamp(1.25rem, 2.5vw, 1.9rem); border: 1px solid var(--public-line); border-radius: var(--public-radius-large); background: var(--public-surface); }
.station-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.station-account { margin-top: 0.7rem; max-width: 40rem; color: var(--public-ink-soft); }
.station-contribution { margin-top: 1.25rem; padding: 0.9rem 1.1rem 1rem; border-radius: var(--public-radius); background: var(--public-mist-soft); }
.station-contribution-label { display: flex; align-items: center; gap: 0.5rem; font-stretch: 84%; font-weight: 720; font-size: 0.95rem; color: var(--public-brand); }
.station-contribution-label .brand-mark { width: 1.15rem; height: 1.15rem; }
.station-contribution-text { margin-top: 0.4rem; max-width: 38rem; font-size: 1.08rem; font-weight: 500; line-height: 1.45; }
.station[data-involvement="stays-out"] .station-contribution { border: 1.5px dashed var(--public-line-strong); background: transparent; }
.station[data-involvement="stays-out"] .station-contribution-label { color: var(--public-ink-soft); }
.station[data-involvement="stays-out"] .station-contribution-label .brand-mark { opacity: 0.45; }
.station .screen { margin-top: 1.25rem; max-width: 36rem; padding: 1rem 1.1rem 1.15rem; border: 1px solid var(--public-line); border-radius: var(--public-radius); background: var(--public-ground); }

.course-note { margin-top: clamp(2rem, 4vw, 3rem); margin-left: calc(13.5rem + 1.75rem); max-width: 40rem; padding-left: 1rem; border-left: 4px solid var(--public-deadline); font-size: 0.95rem; color: var(--public-ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
 *  So funktioniert's: die Schrittfolge
 * ══════════════════════════════════════════════════════════════════════════
 *
 * DIE NUMMERN SIND KEINE ZIERDE: es ist eine Reihenfolge. Was die
 * Reihenfolge allein nicht zeigt, traegt `data-rhythm` -- drei Schritte
 * fallen einmal je Formular an, zwei bei jedem Sterbefall
 * (App\Landing\StepRhythm). Die zweite Gruppe ist hinterlegt.
 */
.steps { counter-reset: step; overflow: hidden; border: 1px solid var(--public-line); border-radius: var(--public-radius-large); background: var(--public-surface); }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.3rem 1.25rem;
  padding: 1.35rem clamp(1rem, 2.5vw, 1.75rem);
}
.step + .step { border-top: 1px solid var(--public-line); }
.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--public-brand);
  color: #fff;
  font-stretch: 84%;
  font-weight: 760;
  font-size: 1.3rem;
}
.step[data-rhythm="every-case"] { background: var(--public-mist-soft); }
.step-title { grid-column: 2; font-size: clamp(1.35rem, 2.3vw, 1.7rem); }
.step-description { grid-column: 2; max-width: 40rem; color: var(--public-ink-soft); }
.step-rhythm {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  padding: 0.15rem 0.65rem;
  border: 1px solid var(--public-brand);
  border-radius: 3px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--public-brand);
  white-space: nowrap;
}
.step[data-rhythm="every-case"] .step-rhythm { background: var(--public-brand); color: #fff; }

/* ── Ihre Formulare, und die eine Zahl ─────────────────────────────── */
.own-forms { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 2.5rem 4rem; }
.own-forms-text p { margin-top: 1rem; max-width: 36rem; color: var(--public-ink-soft); }
.own-forms-text strong { color: var(--public-ink); font-weight: 700; }
.own-forms-figure { padding: 1.5rem; border: 1px solid var(--public-line); border-radius: var(--public-radius-large); background: var(--public-ground-deep); }
.field-overlay { display: block; width: 100%; max-width: 20rem; height: auto; margin-inline: auto; }
.field-overlay-sheet { fill: #fff; stroke: #cdc3af; stroke-width: 1.5; }
.field-overlay-labels { stroke: var(--public-line); stroke-width: 4; stroke-linecap: round; }
.field-overlay-fields { fill: rgba(191, 227, 211, 0.45); stroke: var(--public-brand); stroke-width: 1.5; }
.field-overlay-binding { fill: none; stroke: var(--public-brand); stroke-width: 1.5; stroke-dasharray: 3 4; }
.field-overlay-source { fill: var(--public-brand); }

.tally {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem 3rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 50rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--public-line);
  border-radius: var(--public-radius-large);
  background: var(--public-surface);
}
.tally-figure { font-stretch: 70%; font-weight: 800; font-size: clamp(5rem, 13vw, 9rem); line-height: 0.85; letter-spacing: -0.02em; font-variant-numeric: lining-nums; color: var(--public-brand); }
.tally-sum { font-size: 0.95rem; font-variant-numeric: tabular-nums lining-nums; }
.tally-line { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.9rem; padding-block: 0.3rem; }
.tally-line dt { text-align: right; font-weight: 700; }
.tally-line dd { color: var(--public-ink-soft); }
.tally-total { margin-top: 0.3rem; padding-top: 0.5rem; border-top: 2px solid var(--public-ink); }
.tally-total dd { color: var(--public-ink); font-weight: 600; }
.tally-caption { grid-column: 1 / -1; max-width: 38rem; font-size: 0.95rem; color: var(--public-ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
 *  Umfang: die Gegenueberstellung
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Links, hell, woran wir stehen; rechts, auf der Tafel, was es bewusst
 * nicht gibt. Die Tafel ist das, woran man sich erinnern soll.
 */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: 2rem clamp(1.5rem, 4vw, 3.5rem); }
.ledger-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.ledger-lede { margin-top: 0.8rem; max-width: 30rem; }
.pillars { overflow: hidden; margin-top: 1.25rem; border: 1px solid var(--public-line); border-radius: var(--public-radius-large); background: var(--public-surface); }
.pillar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.1rem; }
.pillar + .pillar { border-top: 1px solid var(--public-line); }
.pillar-name { font-stretch: 86%; font-weight: 700; font-size: 1.12rem; line-height: 1.25; }
.pillar-maturity { flex: none; padding: 0.1rem 0.6rem; border: 1px solid var(--public-brand); border-radius: 3px; background: var(--public-brand); font-size: 0.82rem; font-weight: 650; color: #fff; white-space: nowrap; }
.pillar-text { min-width: 0; }
.pillar-name { display: block; }
.pillar-note { margin-top: 0.3rem; max-width: 30rem; font-size: 0.95rem; line-height: 1.45; color: var(--public-ink-soft); }
/* Das Merkmal kommt aus App\Landing\Maturity: geplant ist leiser und
   nicht ausgefuellt; in Teilen ausgeliefert traegt die Hausfarbe nur als
   Rand und Schrift -- da, aber nicht voll. Kein Ocker: das gehoert den
   Fristen. */
.pillar[data-maturity="partly-shipped"] { align-items: flex-start; }
.pillar[data-maturity="partly-shipped"] .pillar-maturity { background: transparent; color: var(--public-brand); }
.pillar[data-maturity="planned"] .pillar-name { font-weight: 500; color: var(--public-ink-soft); }
.pillar[data-maturity="planned"] .pillar-maturity { border-color: var(--public-line-strong); background: transparent; color: var(--public-ink-soft); }
.limits-list { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.limit-title { font-family: var(--public-sans); letter-spacing: normal; font-stretch: 82%; font-weight: 720; font-size: 1.35rem; line-height: 1.15; color: #fff; }
.limit-reason { margin-top: 0.4rem; max-width: 34rem; font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
 *  Textblatt (Rechtstexte) und Formularblatt (Anfrage)
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Die Rechtstexte selbst bleiben, wie sie sind (templates/legal/*); hier
 * steht nur ihr Satz. Kein Typografie-Modul: wenige Regeln, dieselben
 * Tokens wie der Rest.
 */
.sheet-column { max-width: 50rem; }
.prose-sheet,
.form-sheet { padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--public-line); border-radius: var(--public-radius-large); background: var(--public-surface); }
.legal-prose { font-size: 1rem; color: var(--public-ink-soft); }
.legal-prose > :first-child { margin-top: 0; }
.legal-prose :is(h2, h3) { font-family: var(--public-sans); letter-spacing: normal; }
.legal-prose h2 { margin: 2.5rem 0 0.75rem; font-stretch: 82%; font-weight: 720; font-size: 1.45rem; line-height: 1.15; color: var(--public-ink); }
.legal-prose h3 { margin: 1.6rem 0 0.5rem; font-stretch: 86%; font-weight: 700; font-size: 1.12rem; line-height: 1.25; color: var(--public-ink); }
.legal-prose p { margin-bottom: 0.8rem; }
.legal-prose ul,
.legal-prose ol { display: grid; gap: 0.3rem; margin-bottom: 0.8rem; padding-left: 1.3rem; }
.legal-prose ul { list-style: disc; }
.legal-prose ol { list-style: decimal; }
.legal-prose table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; text-align: left; }
.legal-prose :is(th, td) { padding: 0.5rem 0.75rem; border: 1px solid var(--public-line); vertical-align: top; }
.legal-prose th { background: var(--public-ground); font-weight: 700; color: var(--public-ink); }
.legal-prose a { color: var(--public-brand); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.legal-prose a:hover { text-decoration-thickness: 2px; }
.legal-prose strong { font-weight: 700; color: var(--public-ink); }

/* Das Formular: Symfonys Standardbaum (Zeile = div mit label und Feld).
   `.public-page .form-sheet` wiegt mehr als die Grundregeln aus app.css. */
.form-rows { display: grid; gap: 1.2rem; }
.public-page .form-sheet label { display: block; margin: 0; font-size: 0.9rem; font-weight: 650; color: var(--public-ink); }
.public-page .form-sheet :is(input, textarea):not([type="hidden"]) {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 0.3rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--public-line-strong);
  border-radius: var(--public-radius);
  background: #fff;
  font: 500 1rem/1.4 var(--public-sans);
  color: var(--public-ink);
}
.public-page .form-sheet :is(input, textarea):not([type="hidden"]):focus {
  border-color: var(--public-brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--public-mist);
}
.public-page .form-sheet .help-text { margin-top: 0.3rem; font-size: 0.86rem; color: var(--public-ink-soft); }
/* Fehler und "optional": dieselbe Struktur wie auf den Arbeitsbildschirmen
   (form/theme.html.twig, _form_error_summary.html.twig), Farben von hier. */
.public-page .form-sheet .field-error { font-size: 0.86rem; font-weight: 600; color: var(--public-error); }
.public-page .form-sheet :is(input, textarea)[aria-invalid="true"] { border-color: var(--public-error); box-shadow: 0 0 0 1px var(--public-error); }
.public-page .form-sheet .field-requirement { font-size: 0.8rem; font-weight: 500; color: var(--public-ink-soft); }
.public-page .form-error-summary {
  margin-bottom: 1.25rem;
  border-color: var(--public-error);
  border-radius: var(--public-radius);
  background: var(--public-error-soft);
  color: var(--public-error);
}
.public-page .form-error-summary:focus-visible { outline-color: var(--public-error); }
.form-privacy { margin-top: 1.5rem; font-size: 0.88rem; line-height: 1.5; color: var(--public-ink-soft); }
.form-actions { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--public-line); }

/* Eine Meldung: der Ton kommt als `data-tone`. */
.notice { padding: 0.8rem 1rem; border: 1px solid var(--public-brand); border-radius: var(--public-radius); background: var(--public-mist-soft); font-weight: 500; }
.notice[data-tone="error"] { border-color: var(--public-error); background: var(--public-error-soft); color: var(--public-error); }
.form-sheet .notice { margin-bottom: 1.25rem; }
.sheet-aside { margin-top: 1rem; color: var(--public-ink-soft); }
.sheet-actions { margin-top: 1.75rem; }

/* ══════════════════════════════════════════════════════════════════════════
 *  Anmeldemaske: die Tuer zwischen beiden Welten
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Grund und Fuss sind die der oeffentlichen Seiten, die Wortmarke ist die
 * ihrer Kopfzeile (`public-wordmark`), nur groesser. Felder und Knopf sind
 * schon die der Anwendung (app.css). Ruhig: kein Film, keine Tafel.
 */
.door-wordmark { margin-right: 0; font-size: 1.9rem; }
.door-wordmark .brand-mark { width: 2.4rem; height: 2.4rem; }
.door-card { border: 1px solid var(--public-line); border-radius: var(--public-radius-large); background: var(--public-surface); }

/* ══════════════════════════════════════════════════════════════════════════
 *  Fusszeile
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Markup (base.html.twig) und Gewand (app.css, `site-footer`) sind auf jeder
 * Seite dieselben. Hier steht nur, was diese Seiten anders haben: ihre
 * Breite und ihren Rand.
 */
.public-page .site-footer-bar { max-width: 75rem; padding: 1.6rem var(--public-gutter) 2rem; }

/* ══════════════════════════════════════════════════════════════════════════
 *  Schmaler
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 64rem) {
  .plan-head { grid-template-columns: minmax(0, 1fr); }
  .stations { --rail-x: 0.5rem; }
  .station { grid-template-columns: minmax(0, 1fr); padding-left: 2rem; }
  .station-moment { padding-top: 0.6rem; padding-bottom: 0.5rem; text-align: left; }
  .station-dot { top: 0.8rem; }
  .course-note { margin-left: 2rem; }
}

@media (max-width: 50rem) {
  .public-header-bar { flex-wrap: wrap; padding-top: 0.6rem; }
  .public-header-pages {
    order: 1;
    flex: 0 0 calc(100% + 2 * var(--public-gutter));
    justify-content: space-between;
    margin-top: 0.6rem;
    margin-inline: calc(-1 * var(--public-gutter));
    padding: 0.2rem var(--public-gutter);
    border-top: 1px solid var(--public-line);
    background: var(--public-ground);
  }

  .hero { padding-bottom: 6.5rem; }
  .demo { margin-top: -4.5rem; }
  .demo-panes { grid-template-columns: minmax(0, 1fr); }
  .pane-papers { border-top: 1px solid var(--public-line); border-left: 0; }
  .closing .page-wrap { justify-content: stretch; }

  .signpost-bar { grid-auto-flow: row; }
  .signpost + .signpost { border-top: 1px solid var(--public-line); border-left: 0; }

  .own-forms, .ledger { grid-template-columns: minmax(0, 1fr); }
  .own-forms-figure { order: -1; }
  .tally { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.9rem; }
  .step::before { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
  .step-rhythm { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 0.3rem; }

  /* ── Der Fristenstreifen hochkant ───────────────────────────────────
     Links die Woche als schmale Zeichnung ueber die ganze Hoehe: elf Tage
     als Zeilen, die Fristen als senkrechte Balken. Rechts dieselben
     Fristen als Tafeln in der Farbe ihres Balkens. Die Zeichnung zeigt,
     wie lang; die Tafel sagt, was. */
  .plan-chart { --rewound-x: 1; --rewound-y: 0; padding-left: 6.4rem; }
  .days { right: auto; width: 5.6rem; grid-template-columns: none; grid-template-rows: repeat(var(--day-count), minmax(0, 1fr)); gap: 3px 0; }
  .day { display: flex; align-items: center; padding: 0 0 0 0.45rem; border-radius: 4px; font-size: 0.86rem; }
  .rails { display: block; position: absolute; top: 0; bottom: 0; left: 2.45rem; width: 3.15rem; }
  .rail {
    position: absolute;
    top: var(--call);
    left: calc(var(--order) * 1.05rem);
    width: 0.8rem;
    height: calc(var(--until) - var(--call));
    border-radius: 4px 4px 1px 1px;
    background: var(--public-deadline);
    box-shadow: 0 3px 0 #fff;
    transform-origin: center top;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .rail[data-shape="span"] ~ .rail[data-shape="span"] { background: var(--public-mist); transition-duration: 1.5s; }
  .rail[data-shape="undated"] { border: 1.5px dashed var(--public-mist); background: transparent; box-shadow: none; }
  .rail[data-shape="moment"] { top: var(--until); left: 0; width: 2.9rem; height: 4px; margin-top: -2px; border-radius: 0; box-shadow: none; }
  .rail[data-shape="moment"]::after { content: ""; position: absolute; top: 50%; right: -0.35rem; width: 0.7rem; height: 0.7rem; margin-top: -0.35rem; background: var(--public-ground); border: 2px solid var(--public-deadline); transform: rotate(45deg); }

  .lanes { gap: 0.6rem; padding-block: 0; }
  .lane-events { display: grid; gap: 0.3rem; }
  .pin { padding-left: 0; }
  .pin[data-event="conversation"] { position: static; }
  .chips { margin-left: 0; padding-left: 0; padding-bottom: 0.4rem; }
  .deadline { --from: 0%; gap: 0; overflow: hidden; border-radius: 6px; }
  .deadline[data-shape="moment"] { --from: 0%; }
  .deadline-bar,
  .deadline[data-shape="span"] ~ .deadline[data-shape="span"] .deadline-bar,
  .deadline[data-shape="moment"] .deadline-bar {
    width: auto;
    min-height: 0;
    padding: 0.55rem 0.8rem 0.1rem;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.3rem;
    white-space: normal;
    transform: none;
    opacity: 1;
    transition: none;
  }
  .deadline-text { max-width: none; margin: 0; padding: 0.1rem 0.8rem 0.65rem; background: var(--public-deadline); font-size: 0.92rem; color: var(--public-ink); }
  .deadline .cite { color: var(--public-ink); font-weight: 600; }
  .deadline[data-shape="span"] ~ .deadline[data-shape="span"] .deadline-text { background: var(--public-mist); }
  .deadline[data-shape="moment"] .deadline-text { background: var(--public-ground); }
  .deadline[data-shape="undated"] { border: 1.5px dashed var(--public-mist); }
  .deadline[data-shape="undated"] .deadline-bar { border: 0; }
  .deadline[data-shape="undated"] .deadline-text { background: transparent; color: var(--public-on-dark); }
  .deadline[data-shape="undated"] .cite { color: var(--public-on-dark-quiet); }
}

@media (max-width: 30rem) {
  .public-header-bar { column-gap: 0.9rem; }
  .public-wordmark { font-size: 1.15rem; }
  .public-header-nav { gap: 0.25rem 0.9rem; font-size: 0.9rem; }
  .public-header-link[data-primary] { padding-inline: 0.7rem; }
  .sample-tab .typed { font-size: 0.78rem; }
  .sample-sheet-stamp { display: none; }
  .pillar { flex-wrap: wrap; gap: 0.3rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .public-page *,
  .public-page *::before,
  .public-page *::after { animation: none !important; transition: none !important; }
  .replay { display: none; }
}