@layer reset, tokens, base, layout, components, utilities, marketing;

/* Das Marketing-Blatt erweitert app.css (Tokens, Reset, Basis, Komponenten) und
   nennt selbst keine Farbe literal — jede Farbe kommt aus einem --c-*-Token. */
@layer marketing {
  /* ---------- Grundraster ---------- */
  .wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--s-5); }
  @media (min-width: 768px) { .wrap { padding-inline: 40px; } }
  @media (min-width: 1024px) { .wrap { padding-inline: 64px; } }
  @media (min-width: 1440px) { .wrap { max-width: 78rem; } }

  /* Die Seitenflaeche ist der tiefste Ton; Panele heben sich mit --c-surface davon ab.
     Vor dem Console-Thema war --c-surface Weiss und stand hier richtig — jetzt waeren
     Panel und Seite dieselbe Farbe. */
  .marketing { background: var(--c-bg); }
  .section { padding-block: var(--s-7); }
  .section + .section { border-top: 1px solid var(--c-line); }
  @media (min-width: 1024px) { .section { padding-block: 72px; } }
  /* Ein schmalerer Abschnitt fuer einen einzelnen erklaerenden Absatz zwischen zwei
     schwereren Bloecken (Rechner/Vergleich und FAQ auf /pricing) — sonst traegt er
     dieselbe Luft wie ein voller Abschnitt und wirkt wie ein eigenes Kapitel. */
  .section--tight { padding-block: var(--s-5); }
  @media (min-width: 1024px) { .section--tight { padding-block: var(--s-6); } }

  /* Der Rasterhintergrund ist Dekoration und traegt keine Bedeutung — deshalb kein
     Kontrastanspruch und kein eigenes Element, nur eine Klasse auf dem Abschnitt. */
  .grid-bg {
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  @media (min-width: 768px) { .grid-bg { background-size: 48px 48px; } }

  .eyebrow { font-family: var(--f-mono); font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--s-3); }
  .display { font-weight: 700; letter-spacing: -.035em; line-height: .99; font-size: clamp(2.625rem, 1.6rem + 4.6vw, 4.75rem); margin: 0; color: var(--c-text-strong); }
  .display--sub { font-size: clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem); line-height: 1; }
  .lede { font-size: clamp(1rem, .95rem + .5vw, 1.25rem); line-height: 1.5; color: var(--c-text-muted); max-width: 35em; margin: var(--s-4) 0 0; }
  .rule { height: 1px; background: var(--c-accent); opacity: .35; border: 0; margin-block: var(--s-6); }
  .section__title { font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); letter-spacing: -.03em; margin: 0 0 var(--s-2); color: var(--c-text-strong); }
  .section__lede { color: var(--c-text-muted); max-width: 46em; margin: 0 0 var(--s-6); }

  /* Die Gitter der Fliess-Sektionen stehen mitten im Text; keiner der Nachbarn bringt
     die Luecke mit (.lede hat nur einen Abstand nach OBEN, .section__title nur nach
     UNTEN), also traegt sie das Gitter. */
  .wrap > :is(.props, .langgrid, .pairgrid) { margin-top: var(--s-6); }
  /* Gegenrichtung: eine Zwischenueberschrift, die nicht als erstes im Band steht,
     beginnt einen neuen Abschnitt. Ein margin-bottom des Vorgaengers faellt im
     Block-Fluss damit zusammen, verdoppelt also nichts. */
  .wrap > * + .section__title { margin-top: var(--s-7); }

  /* ---------- Kopf und Fuss ---------- */
  /* --header-h steht in der Token-Schicht von app.css, nicht hier: ein zweites :root im
     Marketing-Blatt waere ein Token ausserhalb der Token-Schicht. */
  .site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--c-line); }
  .site-header__inner { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }
  /* Auch die Marke ist ein Bedienziel — inline-flex, damit min-height auf ihr wirkt. */
  .site-header__brand { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--f-mono); font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; color: var(--c-text-strong); text-decoration: none; }
  .site-header__brand:hover { color: var(--c-text-strong); text-decoration: none; }
  .site-header__mark { color: var(--c-accent); }
  @media (min-width: 1024px) { .site-header__brand { font-size: 1.25rem; } }

  /* Unter 1024px liegt die Navigation hinter einem Klapper — aber es bleibt EINE Liste:
     eine zweite Kopie fuer Mobil hiesse zwei aria-current und zwei Landmarken. Getragen
     wird er von details/summary, das ohne eine Zeile JavaScript auf- und zuklappt. */
  .site-header__burger { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); cursor: pointer; list-style: none; }
  .site-header__burger::-webkit-details-marker { display: none; }
  .site-header__bars, .site-header__bars::before, .site-header__bars::after { display: block; width: 20px; height: 2px; background: var(--c-text); }
  .site-header__bars { position: relative; }
  .site-header__bars::before, .site-header__bars::after { content: ""; position: absolute; left: 0; }
  .site-header__bars::before { top: -6px; }
  .site-header__bars::after { top: 6px; }
  /* Der Klapper rutscht optisch an den rechten Rand (Daumenweite), steht im Dokument aber
     vor dem Hauptknopf. Diese eine Verschiebung bleibt bewusst stehen: die Umkehr — Knopf
     vor Klapper im Markup — verschoebe den Bruch nur auf den Schreibtisch, wo er teurer
     ist. Auf 390px liegen beide in derselben 65px-Leiste, der Tabsprung ist rund 130px
     weit; auf 1440px laege er zwischen x=1162 (Knopf) und x=282 (erster Verweis), also
     ueber fast die volle Breite. Der kleinere Bruch gewinnt. */
  .site-header__menu { order: 3; }
  .site-header__nav { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: var(--s-2) var(--s-5) var(--s-4); }
  .site-header__nav a { display: flex; align-items: center; min-width: var(--tap); min-height: var(--tap); color: var(--c-text-muted); text-decoration: none; font-size: .9375rem; }
  .site-header__nav a:hover, .site-header__nav a[aria-current="page"] { color: var(--c-text-strong); text-decoration: none; }
  .site-header__signin { border-top: 1px solid var(--c-line); margin-top: var(--s-2); padding-top: var(--s-2); }
  .site-header__cta { margin-left: auto; display: flex; gap: var(--s-3); align-items: center; }

  /* Ab 1024px steht die Navigation wieder in der Zeile: Reihe statt Spalte, im Fluss statt
     ueber der Seite. Diese Regeln gelten IMMER — sie beschreiben nur, wie die Navigation
     aussieht, sobald sie sichtbar ist, und richten deshalb auch dann nichts an, wenn der
     Klapper aufgeklappt werden muss. */
  @media (min-width: 1024px) {
    .site-header__menu { order: 0; }
    .site-header__nav { flex-direction: row; position: static; background: none; border-bottom: 0; padding: 0; gap: var(--s-4); margin-left: var(--s-5); }
    .site-header__nav a { display: inline-flex; justify-content: center; }
    .site-header__signin { margin-left: auto; border-top: 0; margin-top: 0; padding-top: 0; }
  }

  /* Der Klapper verschwindet auf dem Schreibtisch NUR dann, wenn der Browser ihn auch
     dauerhaft geoeffnet halten kann. ::details-content ist der einzige Griff dafuer
     (Chrome 131, Safari 18.4, Firefox 139); wer ihn nicht kennt, laesst das geschlossene
     details geschlossen. Stuende `display: none` auf dem Klapper ausserhalb dieser
     Abfrage, waeren dort Preise, Doku, Sprachen, Status UND "Anmelden" ueberhaupt nicht
     mehr erreichbar — /login steht in keiner Fusszeile. Deshalb liegen beide Regeln im
     selben @supports-Block: kennt der Browser das Pseudo-Element nicht, ist die Abfrage
     falsch, der Klapper bleibt sichtbar und die Navigation einen Klick entfernt. Aus
     demselben Grund steht `flex: 1 1 auto` hier — eine gewachsene, aber leere Huelle
     neben der Marke waere ohne die eingeblendete Navigation nur eine Luecke. */
  @supports selector(::details-content) {
    @media (min-width: 1024px) {
      .site-header__burger { display: none; }
      .site-header__menu { flex: 1 1 auto; }
      .site-header__menu::details-content { content-visibility: visible; block-size: auto; }
    }
  }

  /* Die Fusszeile ist ein ruhiges Band: die dritte Flaeche, damit sie sich von der
     Seitenflaeche abhebt, ohne wie ein weiteres Panel zu wirken. */
  .site-footer { background: var(--c-surface-2); border-top: 1px solid var(--c-line); padding-block: var(--s-7) var(--s-6); margin-top: var(--s-8); }
  .site-footer__brand { font-family: var(--f-mono); font-weight: 700; font-size: 1.125rem; color: var(--c-text-strong); margin: 0 0 var(--s-2); }
  .site-footer__cols { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .site-footer__cols { grid-template-columns: 1.4fr repeat(3, 1fr); } }
  .site-footer h2 { font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); margin-bottom: var(--s-3); }
  .site-footer li + li { margin-top: var(--s-2); }
  .site-footer a { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); color: var(--c-text-muted); text-decoration: none; }
  .site-footer a:hover { color: var(--c-accent); text-decoration: none; }
  .site-footer__legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-line); color: var(--c-text-dim); font-size: .8125rem; }

  /* Kein `display` auf .locale-banner selbst — das [hidden]-Attribut des Servers muss
     gewinnen, sonst saehe ein Besucher ohne JS den Hinweis dauerhaft (MarketingCssTest). */
  .locale-banner { background: var(--c-accent-weak); border-bottom: 1px solid var(--c-line); font-size: .875rem; }
  .locale-banner__inner { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding-block: var(--s-2); }
  .locale-banner p { margin: 0; color: var(--c-text); }

  /* ---------- Hero ---------- */
  /* Der Rasterhintergrund traegt die Polsterung, nicht der Abschnitt: sonst laege das
     Muster nur hinter dem Inhalt und nicht hinter der Luft darum. */
  .hero__bg { padding-block: var(--s-7); }
  @media (min-width: 1024px) { .hero__bg { padding-block: 96px 88px; } }
  .hero__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: center; }
  @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
  .hero__intro { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
  /* Die Zierde "// " kommt aus .eyebrow--mark (app.css) — auf jeder Augenbraue dieselbe
     Regel, hier keine seitenbezogene Sonderfassung mehr. */
  .hero__intro .eyebrow, .hero__intro .lede { margin: 0; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
  /* Der zweite Knopf ist ein Befehl, kein Satz: Mono, normales Gewicht. Linksbuendig und
     mit etwas Luft nach oben und unten, weil der vollstaendige Aufruf auf schmalen
     Schirmen nach "-X POST" umbricht — zentriert saehe ein zweizeiliger Befehl aus
     wie zwei Halbsaetze. */
  .button--mono { justify-content: flex-start; text-align: left; padding-block: var(--s-2); font-family: var(--f-mono); font-weight: 400; font-size: .875rem; color: var(--c-text); }

  .stats { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); margin: 0; }
  .stat-tile { display: flex; flex-direction: column; gap: var(--s-1); }
  .stat-tile__value { font-family: var(--f-mono); font-size: 1.375rem; line-height: 1.1; color: var(--c-text-strong); margin: 0; }
  @media (min-width: 1024px) { .stat-tile__value { font-size: 1.625rem; } }
  .stat-tile__label { font-size: .75rem; color: var(--c-text-dim); margin: 0; }
  @media (min-width: 1024px) { .stat-tile__label { font-size: .8125rem; } }

  /* ---------- Terminal (= das Demo-Formular) ---------- */
  /* Zwei lokale Token statt einer Handvoll Einzelregeln: auf 390px sitzt der Kasten in
     einem 342px breiten Blatt, und eine Antwort in 14px sprengt ihn. Prompt und Eingabe
     bleiben zwangslaeufig buendig — sie lesen dieselben Token. */
  .hero__terminal { --term-pad: var(--s-4); --term-fs: .78125rem; display: flex; flex-direction: column; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-1); overflow: hidden; }
  @media (min-width: 768px) { .hero__terminal { --term-pad: var(--s-5); --term-fs: .8125rem; } }
  @media (min-width: 1024px) { .hero__terminal { --term-fs: .875rem; } }
  .term__bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--term-pad); border-bottom: 1px solid var(--c-line); }
  /* Drei Punkte als EIN Element: sie sind reine Fensterzierde — drei leere Spans waeren
     drei bedeutungslose Knoten im Baum. */
  .term__dots { width: 46px; height: 10px; background-image: radial-gradient(circle 5px at 5px 5px, var(--c-line-strong) 98%, transparent 100%); background-size: 18px 10px; background-repeat: repeat-x; }
  .term__caption { font-family: var(--f-mono); font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--c-text-dim); margin: 0; }

  /* Das statische Beispiel (Ruling R8). Unter 1024px ausgeblendet: dort ist das Panel nur
     das Formular — so auch der Mobil-Artboard —, und dieselbe Anfrage steht in voller
     Laenge im Abschnitt "Code" weiter unten. */
  .term__sample { display: none; margin: 0; padding: var(--s-4) var(--term-pad); border-bottom: 1px solid var(--c-line); overflow-x: auto; font-family: var(--f-mono); font-size: .75rem; line-height: 1.7; color: var(--c-code); }
  @media (min-width: 1024px) { .term__sample { display: block; } }
  .term__dim { color: var(--c-text-dim); }
  .term__key { color: var(--c-code-key); }
  .term__str { color: var(--c-code-string); }
  .term__val { color: var(--c-accent); }

  /* Das Prompt-Zeichen ist Zierde: nie markierbar, nie vorlesbar — deshalb ein
     ::before und kein Textknoten. */
  .term__req { position: relative; padding: var(--s-4) var(--term-pad); border-bottom: 1px solid var(--c-line); }
  .term__req::before { content: "$"; position: absolute; left: var(--term-pad); top: var(--s-4); font-family: var(--f-mono); font-size: var(--term-fs); line-height: 1.7; color: var(--c-text-dim); }
  .term__input { display: block; width: 100%; min-height: 5.5rem; padding: 0 0 0 1.25em; border: 0; background: transparent; color: var(--c-code); font-family: var(--f-mono); font-size: var(--term-fs); line-height: 1.7; resize: vertical; }
  .term__input::placeholder { color: var(--c-text-dim); }
  .term__input:focus-visible { outline-offset: 4px; }
  .term__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
  .term__flag { font-family: var(--f-mono); font-size: .75rem; color: var(--c-text-dim); }
  .term__select { min-height: var(--tap); padding-inline: var(--s-2); border: 1px solid var(--c-control-border); border-radius: var(--r-1); background: var(--c-bg); color: var(--c-text); font-family: var(--f-mono); font-size: .8125rem; }
  .term__count { margin-left: auto; font-family: var(--f-mono); font-size: .6875rem; color: var(--c-text-dim); }

  .term__res { padding: var(--s-4) var(--term-pad); min-height: 5.5rem; font-size: var(--term-fs); line-height: 1.7; }
  .term__res p { margin: 0; }
  .term__out { font-family: var(--f-mono); color: var(--c-text-strong); overflow-wrap: anywhere; }
  .term__idle { font-family: var(--f-mono); color: var(--c-text-dim); }
  /* Ausdruecklich die Oberflaechenschrift: eine Fehlermeldung ist Prosa, kein Konsolen-
     auswurf. Sie erbt sie heute schon, aber .term__res koennte morgen Mono setzen. */
  .term__error { font-family: var(--f-ui); color: var(--c-danger); }
  /* Der blinkende Zeiger haengt an der Antwortzeile — nie an der Fehlermeldung. */
  .term__out::after, .term__idle::after { content: ""; display: inline-block; width: 9px; height: 1.05em; margin-left: 4px; vertical-align: -.18em; background: var(--c-accent); animation: term-blink 1s steps(1) infinite; }
  @keyframes term-blink { 50% { opacity: 0; } }

  .term__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--term-pad); border-top: 1px solid var(--c-line); }
  .term__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; font-family: var(--f-mono); font-size: .6875rem; color: var(--c-text-dim); }
  .button--ghost { margin-left: auto; background: var(--c-accent-weak); border-color: transparent; color: var(--c-accent); }
  .button--ghost:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

  /* ---------- Sprachband (der Sprachlauf in Bandoptik) ---------- */
  /* Der Artboard zeigt hier ein statisches Band aus kurzen Gruessen. Unsere 36 Eintraege
     sind ganze Saetze und passen nebeneinander nie — der Lauf bleibt deshalb ein Lauf und
     bekommt nur die Bandoptik: Kuerzel vorn, Satz dahinter, eine Zeile hoch. */
  .langband { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  /* Kein `margin: 0` hier: das Band traegt zugleich .wrap, und dessen margin-inline: auto
     zentriert es — eine Kurzform ueberschriebe sie und das Band klebte am linken Rand.
     Die Blockraender sind ohnehin schon aus dem Reset heraus null. */
  /* Zwei Zeilen hoch, ab 768px eine: bei 360px stossen das Kuerzel und ein ganzer Satz
     aneinander und der Eintrag bricht um. Umbrechen darf er (flex-wrap steht auf dem span),
     aber der Kasten darf dabei nicht bei jedem Wechsel springen. */
  .hero__cycle { display: grid; align-items: center; min-height: 5rem; padding-block: var(--s-4); font-family: var(--f-mono); font-size: .8125rem; line-height: 1.5; color: var(--c-code); }
  @media (min-width: 768px) { .hero__cycle { min-height: 3.5rem; } }
  .hero__cycle > span { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); opacity: 0; animation: hero-cycle 72s linear infinite; animation-delay: calc(var(--hero-i, 0) * 2s); }
  .hero__cycle > span:first-child { opacity: 1; }
  /* 36 Verzoegerungen, aber nur EINE Regel, die rechnet: die nth-child-Regeln setzen den
     Index, animation-delay oben multipliziert ihn. Ausgeschrieben waren das 36 fast
     gleiche Zeilen. Ein style-Attribut kaeme nicht in Frage — die CSP erlaubt keines. */
  .hero__cycle>span:nth-child(1){--hero-i:0} .hero__cycle>span:nth-child(2){--hero-i:1}
  .hero__cycle>span:nth-child(3){--hero-i:2} .hero__cycle>span:nth-child(4){--hero-i:3}
  .hero__cycle>span:nth-child(5){--hero-i:4} .hero__cycle>span:nth-child(6){--hero-i:5}
  .hero__cycle>span:nth-child(7){--hero-i:6} .hero__cycle>span:nth-child(8){--hero-i:7}
  .hero__cycle>span:nth-child(9){--hero-i:8} .hero__cycle>span:nth-child(10){--hero-i:9}
  .hero__cycle>span:nth-child(11){--hero-i:10} .hero__cycle>span:nth-child(12){--hero-i:11}
  .hero__cycle>span:nth-child(13){--hero-i:12} .hero__cycle>span:nth-child(14){--hero-i:13}
  .hero__cycle>span:nth-child(15){--hero-i:14} .hero__cycle>span:nth-child(16){--hero-i:15}
  .hero__cycle>span:nth-child(17){--hero-i:16} .hero__cycle>span:nth-child(18){--hero-i:17}
  .hero__cycle>span:nth-child(19){--hero-i:18} .hero__cycle>span:nth-child(20){--hero-i:19}
  .hero__cycle>span:nth-child(21){--hero-i:20} .hero__cycle>span:nth-child(22){--hero-i:21}
  .hero__cycle>span:nth-child(23){--hero-i:22} .hero__cycle>span:nth-child(24){--hero-i:23}
  .hero__cycle>span:nth-child(25){--hero-i:24} .hero__cycle>span:nth-child(26){--hero-i:25}
  .hero__cycle>span:nth-child(27){--hero-i:26} .hero__cycle>span:nth-child(28){--hero-i:27}
  .hero__cycle>span:nth-child(29){--hero-i:28} .hero__cycle>span:nth-child(30){--hero-i:29}
  .hero__cycle>span:nth-child(31){--hero-i:30} .hero__cycle>span:nth-child(32){--hero-i:31}
  .hero__cycle>span:nth-child(33){--hero-i:32} .hero__cycle>span:nth-child(34){--hero-i:33}
  .hero__cycle>span:nth-child(35){--hero-i:34} .hero__cycle>span:nth-child(36){--hero-i:35}
  /* Der Sprachname rueckt vor den Satz — im Band steht das Kuerzel links. */
  .hero__cycle small { order: -1; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); }

  @keyframes hero-cycle {
    0%, 0.4%   { opacity: 0; transform: translateY(.2em); }
    1%, 2.1%   { opacity: 1; transform: none; }
    2.7%, 100% { opacity: 0; transform: translateY(-.2em); }
  }

  /* ---------- Nutzenversprechen ---------- */
  .props { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .props { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
  .prop { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2); }
  @media (min-width: 1024px) { .prop { padding: var(--s-6); } }
  .prop__num { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; color: var(--c-accent); margin: 0; }
  .prop h3 { font-size: 1.1875rem; font-weight: 500; letter-spacing: -.01em; color: var(--c-text-strong); margin: 0; }
  @media (min-width: 1024px) { .prop h3 { font-size: 1.375rem; } }
  .prop p { color: var(--c-text-muted); font-size: .9375rem; line-height: 1.55; margin: 0; }

  /* ---------- Preis-Teaser ---------- */
  .teaser { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); }
  @media (min-width: 1024px) { .teaser { flex-wrap: nowrap; gap: var(--s-6); padding: var(--s-6); } }
  .teaser__body { flex: 1 1 20rem; min-width: 0; }
  .teaser__body .section__lede { margin-bottom: 0; }
  .teaser__cta { margin: 0; }

  /* ---------- Code-Tabs ---------- */
  /* Reine Anzeige, kein Hervorheber: der Panel-Inhalt ist eskaptes Klartext-Markdown/
     Repo-Material (code_tabs.php, Markdown::render()) — keine Sprachfaerbung, nur ein
     einheitlicher --c-code-Ton. Rand und Reiter nutzen dieselben Tokens wie das statische
     Terminal-Beispiel (Task 4: --c-code, --c-code-key, --c-code-string). */
  .tabs { background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-2); overflow: hidden; }
  /* Die dritte Flaeche hebt die Reiterleiste vom Feld darunter ab; die Trennlinie traegt
     den Rest des Schritts (der Helligkeitssprung allein ist 1,03:1). padding-top --s-2
     statt --s-1: .tabs schneidet mit overflow: hidden, und der Fokusring eines Reiters in
     der obersten Zeile liegt 2px ausserhalb seines Kastens. */
  .tabs__list { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-2) var(--s-2) 0; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
  .tabs__tab { appearance: none; border: 0; background: none; min-width: var(--tap); min-height: var(--tap); padding-inline: var(--s-3); font-family: var(--f-mono); font-size: .75rem; color: var(--c-text-dim); cursor: pointer; border-bottom: 2px solid transparent; }
  .tabs__tab:hover { color: var(--c-text); }
  .tabs__tab[aria-selected="true"] { color: var(--c-text-strong); border-bottom-color: var(--c-accent); }
  .tabs__panel pre { margin: 0; padding: var(--s-5); overflow-x: auto; background: none; border: 0; border-radius: 0; color: var(--c-code); }
  .tabs__panel h3 { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding: var(--s-3) var(--s-5) 0; color: var(--c-text-dim); }
  .tabs__panel + .tabs__panel { border-top: 1px solid var(--c-line); }
  .tabs[data-enhanced="true"] .tabs__panel h3 { display: none; }
  .tabs[data-enhanced="true"] .tabs__panel[hidden] { display: none; }
  .tabs[data-enhanced="true"] .tabs__panel + .tabs__panel { border-top: 0; }

  /* ---------- Sprachraster ---------- */
  .langgrid, .pairgrid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 360px) { .langgrid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 768px) { .langgrid { grid-template-columns: repeat(4, 1fr); } .pairgrid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1024px) { .langgrid { grid-template-columns: repeat(6, 1fr); } .pairgrid { grid-template-columns: repeat(4, 1fr); } }
  /* min-width: 0 und flex-wrap: wrap: bei 3 Spalten ab 360px reicht die Spaltenbreite
     fuer laengere Namen ("Portuguese", "Ukrainian" …) neben dem Code nicht auf einer
     Zeile — ohne das zwaenge das Standard-Minimum von Flex-Kindern die Kachel (und mit
     ihr das Blatt) ueber die Spaltenbreite hinaus. Mit wrap faellt der Name in eine
     zweite Zeile statt die Seite zu sprengen; min-height (kein height) laesst die
     Kachel dafuer wachsen. */
  .langgrid__item, .pairgrid__item { display: flex; flex-wrap: wrap; min-width: 0; min-height: var(--tap); align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-2); background: transparent; color: var(--c-code); text-decoration: none; font-size: .875rem; }
  .langgrid__item:hover, .pairgrid__item:hover { border-color: var(--c-control-border); background: var(--c-surface); color: var(--c-text-strong); text-decoration: none; }
  .langgrid__code { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; color: var(--c-text-dim); }
  .langgrid__name { font-size: .875rem; }

  /* ---------- Preise ---------- */
  /* Der Kopf steht mittig: Titel, Lede und die beiden Umschalter gehoeren zusammen und
     haben unter sich nichts, was links buendig anschliessen muesste. */
  .pricing-head { max-width: 46rem; margin: 0 auto var(--s-7); text-align: center; }
  .pricing-head .lede { margin-inline: auto; }
  .pricing-head .form__note { margin-top: var(--s-4); }

  .switcher { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: center; margin-top: var(--s-6); }
  .switcher--segment { display: inline-flex; gap: var(--s-1); padding: var(--s-1); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-2); }
  .switcher--segment a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-4); border-radius: var(--r-1); font-size: .8125rem; color: var(--c-text-muted); text-decoration: none; }
  .switcher--segment a:hover { color: var(--c-text); text-decoration: none; }
  /* Dieselbe Markierung wie die Doku-Navigation: Lime auf --c-accent-weak. */
  .switcher--segment a[aria-current="true"] { background: var(--c-accent-weak); color: var(--c-accent); font-weight: 600; }
  /* Dreizehn Waehrungen als Knoepfe waeren dreizehn Handlungsaufforderungen; flach mit
     Lime-Unterstrich sind sie eine Reihe mit genau einer Markierung. Sie umbricht auf
     schmalen Schirmen, statt die Seite waagerecht zu schieben. */
  .switcher--flat { gap: 0 var(--s-1); margin-top: var(--s-4); }
  .switcher__cur { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding-inline: var(--s-3); font-size: .8125rem; color: var(--c-text-dim); text-decoration: none; border-bottom: 2px solid transparent; }
  .switcher__cur:hover { color: var(--c-text); text-decoration: none; }
  .switcher__cur[aria-current="true"] { color: var(--c-text-strong); border-bottom-color: var(--c-accent); }

  .pricing { display: grid; gap: var(--s-5); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1024px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
  .plan { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-3); background: transparent; }
  .plan--featured { border-color: var(--c-accent); background: var(--c-surface); box-shadow: var(--shadow-1); }
  .plan__badge { position: absolute; top: -12px; left: var(--s-6); margin: 0; padding: 4px var(--s-3); background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--r-1); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  /* Der Name ist die Ueberschrift der Karte (h2), der Preis ein Absatz: die Ebene sagt, was
     die Karte IST, die Groesse, worauf das Auge faellt. font-weight ausdruecklich, weil h2
     aus der Basis 700 mitbringt. */
  .plan__name { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted); }
  .plan__price { margin: 0; font-size: 2.25rem; line-height: 1.05; letter-spacing: -.03em; font-weight: 400; color: var(--c-text-strong); }
  @media (min-width: 1024px) { .plan__price { font-size: 2.75rem; } }
  .plan__period { margin: 0; font-size: .875rem; color: var(--c-text-dim); }
  .plan__list { display: grid; gap: var(--s-3); font-size: .875rem; color: var(--c-code); }
  .plan__list li { display: grid; grid-template-columns: 1.2em 1fr; gap: var(--s-2); }
  .plan__list li::before { content: "\2713"; color: var(--c-accent); }
  .plan__list li[data-no] { color: var(--c-text-dim); }
  .plan__list li[data-no]::before { content: "\2014"; color: var(--c-text-dim); }
  .plan .button { margin-top: auto; width: 100%; }

  /* Ruling R5: Rechner und Vergleich stehen ab 1024px nebeneinander — die Tabelle
     beantwortet genau die Frage, die der Rechner aufwirft. Darunter stapeln sie. */
  .pricing-tools { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .pricing-tools { grid-template-columns: 1fr 1.2fr; align-items: start; } }
  .pricing-tools .section__title { font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); }
  .pricing-tools .section__lede { margin-bottom: 0; }

  /* Der Rechner liegt auf der Seitenflaeche, nicht in einem Panel: die dritte Flaeche
     traegt ihn mit 1,07:1 gegen --c-bg. */
  .calc { display: grid; gap: var(--s-5); align-content: start; min-width: 0; padding: var(--s-5); background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-3); }
  @media (min-width: 768px) { .calc { padding: var(--s-6); } }
  .calc__head { display: grid; gap: var(--s-2); }
  .calc__in { display: grid; gap: var(--s-3); }
  .calc__value { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-4); background: var(--c-bg); border: 1px solid var(--c-control-border); border-radius: var(--r-1); }
  .calc__value:focus-within { border-color: var(--c-accent); }
  .calc__value .field__input { flex: 1 1 auto; min-width: 0; padding-inline: 0; border: 0; background: transparent; font-size: 1.375rem; color: var(--c-text-strong); }
  .calc__pages { flex: none; font-size: .75rem; color: var(--c-text-dim); white-space: nowrap; }
  /* Der Schieber wird erst von calculator.js eingeblendet: die Regel setzt deshalb kein
     display und laesst das hidden-Attribut des Servers unangetastet. */
  .calc__slider { width: 100%; min-height: var(--tap); accent-color: var(--c-accent); background: transparent; }
  .calc__out { display: grid; gap: 0; }
  .calc__row { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); font-size: .9375rem; color: var(--c-text-muted); }
  .calc__row:last-of-type { border-bottom: 0; }
  /* Der Knopf steht im selben Raster wie die Ergebniszeilen (gap: 0 wegen der
     Trennlinien) und klebte ohne diese Zeile an der letzten Summe. */
  .calc__out > .button { margin-top: var(--s-4); }
  /* Der Tarifname darf umbrechen, aber die Zeile nie breiter machen als den Rechner. */
  .calc__plan { min-width: 0; overflow-wrap: anywhere; }
  .calc__sum { margin-left: auto; color: var(--c-text-strong); }
  .calc__flag { flex: none; padding: 2px var(--s-2); border-radius: var(--r-1); background: var(--c-accent-weak); color: var(--c-accent); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  .calc__row--best { color: var(--c-text-strong); }
  .calc__row--best .calc__sum { color: var(--c-accent); }

  .compare-panel { min-width: 0; }
  .compare__scroll { overflow-x: auto; margin-top: var(--s-4); }
  .compare { width: 100%; border-collapse: collapse; font-size: .875rem; }
  .compare th, .compare td { text-align: left; padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--c-line); vertical-align: top; }
  .compare thead th { font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); }
  .compare tbody th { font-weight: 400; color: var(--c-text-muted); }
  .compare td { font-family: var(--f-mono); color: var(--c-text); }

  /* ---------- FAQ ---------- */
  .faq-split { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .faq-split { grid-template-columns: 1fr 2fr; gap: var(--s-8); } }
  .faq-split__head { min-width: 0; }
  .faq-split__head .section__title { margin-bottom: 0; }
  @media (min-width: 1024px) { .faq-split__head { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; } }
  .faq { display: grid; min-width: 0; }
  .faq__item { border-bottom: 1px solid var(--c-line); padding-block: var(--s-5); }
  .faq__item:first-child { padding-top: 0; }
  .faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
  .faq__item h3 { margin: 0 0 var(--s-2); font-size: 1.0625rem; font-weight: 600; color: var(--c-text-strong); }
  .faq__item p { margin: 0; color: var(--c-text-muted); font-size: .9375rem; line-height: 1.55; }

  /* ---------- Docs ---------- */
  .docs { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .docs { grid-template-columns: 15rem minmax(0, 1fr) 13rem; gap: var(--s-6); } }
  .docs__nav { font-size: .875rem; display: flex; flex-direction: column; }
  .docs__nav-group + .docs__nav-group { margin-top: var(--s-5); }
  .docs__nav-title { font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); margin: 0 0 var(--s-2); }
  .docs__nav a { display: flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-3); border-radius: var(--r-1); color: var(--c-text-muted); text-decoration: none; }
  /* --c-surface-2 war in Task 2 ein Alias von --c-surface: der Hinweis auf den Zeiger
     lag damit unsichtbar auf der Seitenflaeche. Die Navigation nimmt --c-accent-weak,
     dieselbe Flaeche wie der aktive Eintrag (Ruling R9: sie traegt starken Text). */
  .docs__nav a:hover { background: var(--c-accent-weak); color: var(--c-text-strong); text-decoration: none; }
  .docs__nav a[aria-current="page"] { background: var(--c-accent-weak); color: var(--c-text-strong); font-weight: 600; }

  .docs__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: .75rem; color: var(--c-text-dim); margin-bottom: var(--s-4); }
  .docs__crumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-text-dim); text-decoration: none; }
  .docs__crumb a:hover { color: var(--c-text); }
  .docs__crumb-sep { color: var(--c-line-strong); }
  .docs__crumb-here { color: var(--c-accent); }

  .docs__body { min-width: 0; max-width: 46rem; color: var(--c-code); }
  .docs__body h1 { margin-bottom: var(--s-4); }
  .docs__body h2 { font-size: 1.5rem; letter-spacing: -.01em; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); color: var(--c-text-strong); }
  .docs__body h3 { font-size: 1.125rem; margin-top: var(--s-5); color: var(--c-text-strong); }
  .docs__body p, .docs__body ul, .docs__body ol, .docs__body table, .docs__body pre, .docs__body blockquote { margin-block: var(--s-4); font-size: 1rem; line-height: 1.65; }
  .docs__body ul, .docs__body ol { padding-left: var(--s-5); }
  .docs__body ul li { list-style: disc; }
  .docs__body ol li { list-style: decimal; }
  .docs__body li + li { margin-top: var(--s-1); }
  .docs__body code { font-size: .8125rem; background: var(--c-accent-weak); border: 0; border-radius: var(--r-1); padding: 2px 6px; color: var(--c-code-string); }
  .docs__body pre { overflow-x: auto; padding: var(--s-5); background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-2); font-size: .84375rem; line-height: 1.7; }
  .docs__body pre code { background: none; border: 0; padding: 0; color: var(--c-code); }
  .docs__body blockquote { border-left: 2px solid var(--c-accent); padding-left: var(--s-4); color: var(--c-text-muted); }
  .docs__body table { width: 100%; border-collapse: collapse; }
  .docs__body th, .docs__body td { text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--c-line); }
  .docs__table { overflow-x: auto; }

  .toc { display: none; position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; font-size: .8125rem; }
  @media (min-width: 1024px) { .toc { display: block; } }
  .toc h2 { font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); margin-bottom: var(--s-3); }
  .toc a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-1) 0 var(--s-1) var(--s-3); border-left: 2px solid var(--c-line); color: var(--c-text-muted); text-decoration: none; }
  .toc a:hover { color: var(--c-text-strong); border-left-color: var(--c-accent); text-decoration: none; }
  .toc li[data-level="3"] a { padding-left: var(--s-5); }

  /* Kein Statuskasten (Ruling R3): nur ein schlichter Verweis auf /status, ohne jede
     Live-Kennzahl — dieselbe Zeilenhoehe wie ein TOC-Eintrag, damit er sich als
     Fortsetzung der Liste liest statt als eigener Block. */
  .docs__status-link { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
  .docs__status-link a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-1) 0 var(--s-1) var(--s-3); color: var(--c-text-dim); text-decoration: none; }
  .docs__status-link a:hover { color: var(--c-text-strong); text-decoration: none; }

  .pagenav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
  /* Vor und Zurueck sind die meistbenutzten Verweise der Doku und waren 20px hoch. */
  .pagenav a { display: inline-flex; align-items: center; min-height: var(--tap); }

  /* ---------- Sprachpaar ---------- */
  .pair__head { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1024px) { .pair__head { grid-template-columns: 1fr 1fr; gap: 56px; } }
  /* Der gap eines Gitters trennt die ZELLEN, nie den Inhalt IN einer Zelle: eine Spalte
     mit Fliesstext stiftet ihren Abstand selbst, sonst klebt der Knopf am Text. */
  .pair__head > div > * + *, .pair__notes > div > * + *, .pair__more > div > * + * { margin-top: var(--s-4); }
  /* Bei 390px (Spec §9) reicht die Spaltenbreite je Kachel nicht fuer den Preistext
     ("From €8.00 / million characters") — eine Spalte auf dem Telefon, drei Kacheln ab dem
     Tablet. Das war einmal ein eigener Haltepunkt bei 480px, die einzige fuenfte Breite des
     Blattes; drei gestapelte Kacheln bis 767px sind billiger als ein Haltepunkt, den
     niemand mitpflegt. */
  .pair__facts { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin: var(--s-5) 0 0; }
  @media (min-width: 768px) { .pair__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .fact-tile { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-2); }
  .fact-tile__label { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); }
  .fact-tile__value { font-size: .9375rem; color: var(--c-text-strong); }

  .sample { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-3); overflow: hidden; }
  .sample__bar { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-family: var(--f-mono); font-size: .75rem; color: var(--c-text-dim); }
  .sample__bar--top { border-bottom: 1px solid var(--c-line); }
  .sample__bar--bottom { border-top: 1px solid var(--c-line); }
  /* Die Zellen sind die dritte Flaeche, die Leisten bleiben das Panel: so liest sich die
     Probe als Inhalt IM Terminal und nicht als eine durchgehende Flaeche. */
  .sample__cell { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); background: var(--c-surface-2); }
  .sample__cell + .sample__cell { border-top: 1px solid var(--c-line); }
  .sample__label { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); }
  .sample__cell--target .sample__label { color: var(--c-accent); }
  .sample__text { font-size: 1.0625rem; line-height: 1.5; color: var(--c-code); margin: 0; }
  .sample__cell--target .sample__text { color: var(--c-text-strong); }

  /* Die zwei Sprachbeschreibungen (eine je Sprache dieses Paars) — nicht mit
     .pair__facts (die drei Faktenkacheln) zu verwechseln. */
  .pair__notes { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-top: var(--s-6); }
  @media (min-width: 768px) { .pair__notes { grid-template-columns: 1fr 1fr; } }

  /* "Was zu wissen ist" (Formalitaet) neben der fertigen Anfrage. min-width: 0 auf den
     Spalten: ohne das setzt <pre class="code"> (nicht umbrechende curl-Zeilen) die
     automatische Mindestbreite der Grid-Spalte auf ihren Inhalt und sprengt das Blatt
     auf Mobil — .code scrollt dann selbst (overflow-x: auto, app.css), statt die Seite
     breiter zu ziehen. */
  .pair__more { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-top: var(--s-6); }
  @media (min-width: 768px) { .pair__more { grid-template-columns: 1fr 1fr; } }
  .pair__more > * { min-width: 0; }

  /* ---------- Status ---------- */
  .status { display: grid; gap: var(--s-6); }
  .status__kpis { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 768px) { .status__kpis { grid-template-columns: repeat(4, 1fr); } }
  .status__tile { padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2); }
  /* Dasselbe in der Statuskachel: Titel, Diagramm und Bildunterschrift. */
  .status__tile > * + * { margin-top: var(--s-3); }
  /* Derselbe Haltepunkt wie .prop und .teaser: ab 1024px atmen alle Panele gleich. */
  @media (min-width: 1024px) { .status__tile { padding: var(--s-6); } }
  .status__tile-title { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); margin: 0 0 var(--s-3); }
  .status__value { font-family: var(--f-mono); font-size: 1.75rem; line-height: 1.1; color: var(--c-text-strong); }
  .status__dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--c-success); margin-right: var(--s-3); vertical-align: .08em; }
  .status__dot--down { background: var(--c-danger); }
  .status__dot--unknown { background: var(--c-warning); }
  .status__chart-title { margin-bottom: var(--s-3); }

  /* ---------- Rechtstexte ---------- */
  .legal { max-width: 44rem; color: var(--c-code); }
  .legal h2 { font-size: 1.5rem; margin-top: var(--s-6); color: var(--c-text-strong); }
  .legal h3 { font-size: 1.0625rem; margin-top: var(--s-5); color: var(--c-text-strong); }
  .legal p, .legal ul, .legal ol, .legal table { margin-block: var(--s-3); }
  .legal ul, .legal ol { padding-left: var(--s-5); }
  .legal ul li { list-style: disc; }
  .legal ol li { list-style: decimal; }
  .legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
  .legal th, .legal td { border-bottom: 1px solid var(--c-line); padding: var(--s-2); text-align: left; vertical-align: top; }

  /* ---------- Responsive und Bewegung ---------- */
  /* 390px ist die Referenzbreite des mobilen Artboards und bewusst kein Haltepunkt: darunter
     wird nur enger gesetzt, nie umgebaut. Was mit der Breite waechst, waechst bei seinem
     Bauteil (--term-pad/--term-fs, .pair__facts, .hero__cycle); hier steht nur der Rest.
     Ab 1440px darf der Held atmen — die Zeilenlaenge des Fliesstextes nicht: .lede und
     .section__lede haben ihr Maximum in em, die Spalten hier in fr. */
  @media (min-width: 1440px) { .hero__grid { gap: 80px; } }

  /* EIN Riegel fuer alles, was sich bewegt — nicht einer je Animation, sonst wird der
     naechste vergessen. app.css kuerzt im Reset jede Dauer auf .01ms; das genuegt einem
     Uebergang, aber nicht einer Endlosschleife, die ihren Endzustand nie erreicht: der
     Sprachlauf bliebe bei opacity: 0 stehen und das Band waere leer. Also ausdruecklich:
     Lauf aus und der erste Eintrag sichtbar (alle 36 liegen in derselben Rasterzelle),
     Zeiger stehend, Kopfleiste ohne den Weichzeichner, der auf jedem Bildlauf neu
     gerechnet wird. */
  @media (prefers-reduced-motion: reduce) {
    .hero__cycle > span { animation: none; opacity: 0; }
    .hero__cycle > span:first-child { opacity: 1; }
    .term__out::after, .term__idle::after { animation: none; }
    .site-header { backdrop-filter: none; }
  }
}