/* Thalassa — die eine Stilvorlage der Startseite und der Landingpages
 * (W3, 11.09.2026; W5 ergaenzt die Landingpage-Bauteile).
 *
 * WARUM EINE DATEI. Die alte Startseite trug 291 KB mit erzeugten
 * Klassennamen (ch04, scp2) aus der React-Konvertierung; niemand konnte
 * eine Regel finden, ohne sie zu suchen. Hier hat jede Klasse einen Namen,
 * der sagt, was sie ist, und die Datei bleibt unter 900 Zeilen.
 *
 * LADEREIHENFOLGE (scripts/chrome/templates/assets.html): fonts.css, die
 * Token-Dateien, base.css, die Palette 2026-09, rahmen.css (Kopf und Fuss),
 * dann diese Datei. Sie kommt zuletzt, damit ihre Regeln gewinnen — und
 * sie schreibt nichts in .kopf oder .fuss hinein.
 *
 * KEINE EIGENEN FARBWERTE. Jede Farbe ist ein Token aus der Palette;
 * tests/test_website_kontrast.py sucht ab W10 nach Hex-Werten in dieser
 * Datei. Die wenigen rgba()-Schleier sind Weiss oder Tinte mit Deckkraft,
 * wie sie auch die Palette und rahmen.css benutzen — keine dritte Farbe.
 *
 * ABSCHNITTSRHYTHMUS (Tibi: Sand als Ergaenzung zu den hellen Grautoenen):
 *   CTA-Leiste      --surface-inverse
 *   Hero            Verlauf --surface-inverse -> --surface-deep
 *   Trust-Leiste    --surface-page
 *   Overview        --surface-warm
 *   CTA-Band        --accent, Tinte darauf, nie Weiss (2,54:1)
 *   Produkt         --surface-inverse
 *   Preise          --surface-warm
 *   FAQ             --surface-page
 *   Kontakt         --surface-muted
 *   Fuss            --surface-inverse (rahmen.css)
 * Nichts ist dunkler als --color-primary-900; --surface-inverse IST dieser
 * Wert, und ein zweiter, dunklerer kommt hier nicht vor.
 */

/* ==================================================================
   GRUNDLAGEN
   ================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* SILBENTRENNUNG. Deutsche Komposita haben keine Bruchstelle, an der ein
   Browser von sich aus umbricht — auf der Kampagnenseite lief
   „BEWERBUNGSVERFAHREN" bei 390 px 55 px ueber den Rand (Befund D3). Die
   Regel haengt an :lang(de), Englisch braucht sie nicht. Erst ab zehn
   Buchstaben, nie weniger als vier je Seite: `text-wrap: balance` nimmt
   sonst jede Trennstelle, die eine Zeile ausgleicht. overflow-wrap ist
   der harte Rueckfall fuer beide Sprachen (Eigennamen, Produktnamen). */
:lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(de) .fall__titel {
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
h1, h2, h3, h4, p, li, summary, dt, dd { overflow-wrap: break-word; }

/* NICHT, WAS NIEMAND SIEHT. Gemessen 22.09.2026 im Fenster (Chromium, 1440,
   768 und 390 px): die deutsche About-Seite trug `H2.sr-only hy=auto` — das
   Vorleseschild „Team und Unternehmen" erbte die Regel darueber. Sichtbar
   wird davon nichts, `.sr-only` steht auf 1x1 px mit clip und
   `white-space: nowrap`; ein Trennstrich koennte dort nie erscheinen. Genau
   deshalb ist die Trennregel hier falsch und nicht bloss folgenlos: sie
   sagt etwas ueber Text aus, den es als Text auf dem Schirm nicht gibt.
   Die seiteneigenen Dateien raeumen je nur ihre sichtbaren Ueberschriften
   aus (team.css: `main.team h1`), das sr-only-h2 kam mit bd9965e dazu und
   fiel durch — auf fuenf Seitenpaaren steht so ein Schild, geprueft wird
   bisher nur eines davon. Darum hier an der Quelle.
   `:lang(de) .sr-only` (0,2,0) schlaegt `:lang(de) h2` (0,1,1). */
:lang(de) .sr-only { hyphens: manual; -webkit-hyphens: manual; }

/* Ueberschriften: Gewicht und Schrift aus base.css (--type-h1/2/3, seit D1
   700 in Inter). Die Groesse ist die Typoskala des Konzepts, je Stufe ein
   clamp() in typography.css (D1, 12.09.2026): h2 = .section-title, h3 =
   die Kartenueberschrift (.moment-card h3). Die eigenen clamp()-Stufen
   von W3 sind damit weg — sie deckelten h2 bei 3,2 vw. */
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* 1240 px INHALT. Seit K1 (12.09.2026) kommen Breite und Rand aus
   bauteile.css, woertlich aus dem Konzept: width: min(calc(100% - 40px),
   1240px), unter 760 px calc(100% - 32px) — Rand statt Innenrand. Die
   D1-Fassung (content-box + 32 px Innenrand) lag OBENDRAUF und ergab
   792 px in 768: Querlauf auf der Startseite (Bericht K1, Teil 4, gemessen).
   Hier bleibt nur die Zentrierung. rahmen.css rechnet zwischen 761 und
   1304 px noch mit 32 px Innenrand — 12 px Versatz der Kopfzeile, gemeldet,
   gehoert dem Rahmen-Auftrag. */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
}
/* Abschnittsmass des Konzepts: .section { padding: 112px 0 } (D1). */
.abschnitt { padding-block: var(--pad-section); }

.grund--page { background: var(--surface-page); }
.grund--muted { background: var(--surface-muted); }
.grund--warm { background: var(--surface-warm); }
.grund--inverse { background: var(--surface-inverse); }
.grund--accent { background: var(--accent); color: var(--text-on-accent); }

/* Auf dunklem Grund: Weiss, und der Fokusring wechselt auf die helle
   Fassung — #047857 auf #064E3B waeren 1,45:1. Auf der Akzentflaeche ist
   die Tinte der Ring: #0A0F1C auf #10B981 sind 7,54:1. */
.on-dark { color: var(--white); --focus-ring: var(--focus-ring-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .gedaempft { color: rgba(255, 255, 255, .8); }
.on-dark a { color: var(--white); }
/* Der Kaufknopf auf dunklem Grund: `.on-dark a` (0,1,1) schlug
   `.btn--primary` (0,1,0), und die Aufschrift des wichtigsten Knopfes
   stand auf 16 Seiten wieder WEISS auf #10B981 — 2,54:1, die Verbindung,
   die W1 gesperrt hat. Der Quelltext-Scan in tests/test_website_kontrast.py
   sieht Farbe und Flaeche nur im selben Block; hier standen sie in zweien.
   Gefunden von axe in Lighthouse und im Fenster nachgemessen (W10,
   12.09.2026); seither prueft tests/test_website_vollstaendigkeit.py die
   Knoepfe AUSGEFUEHRT. Die Tinte ist der Ring (7,54:1). */
.on-dark .btn--primary, .on-dark a.btn--primary { color: var(--text-on-accent); }
.on-dark a:hover { color: var(--color-primary-300); }
.grund--accent { --focus-ring: var(--text-on-accent); }
.grund--accent h2, .grund--accent p, .grund--accent a { color: var(--text-on-accent); }

/* Vorzeile ueber einer Ueberschrift. --text-link (5,48:1 auf Weiss und
   Sand) statt --color-primary-600 (3,77:1). */
.vorzeile {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-link);
}
.on-dark .vorzeile { color: var(--color-primary-300); }

.abschnitt__kopf { max-width: 72ch; margin-bottom: var(--space-10); }
.abschnitt__kopf p { font: var(--type-lead); color: var(--text-body); margin: var(--space-4) 0 0; }
.on-dark .abschnitt__kopf p { color: rgba(255, 255, 255, .86); }

/* Nur fuer Vorleseprogramme. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Der Sprunglink (.sprung) steht seit W10 in rahmen.css: Er gehoert zum
   Rahmen jeder Seite, nicht nur zu den Neubauseiten. */

/* ==================================================================
   KNOEPFE — die Formfamilie des Konzepts (D1, 12.09.2026): Kapsel,
   50 px hoch, 0/22 px, 15 px in 800, Zeilenhoehe 1. EINE Familie, wie
   Tibi es verlangt hat; das Konzept erfuellt sie von sich aus.
   ================================================================== */
.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-core);
  font-size: 15px;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control), transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn--lg { padding: 17px 32px; font-size: var(--fs-body-xl); }
.btn--sm { padding: 10px 18px; font-size: 0.875rem; }
.btn--block { width: 100%; }

/* Tinte auf dem Markengruen, nie Weiss. Der gedrueckte Zustand bleibt auf
   --accent-hover: auf --accent-active laege die Tinte bei 3,5:1. */
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover, .btn--primary:active {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent);
}

/* Umriss-Knopf: die Kante IST der Knopf, also --border-control (5,03:1),
   nicht die dekorative Kartenkante. */
.btn--ghost { background: transparent; border-color: var(--border-control); color: var(--text-heading); }
.btn--ghost:hover { border-color: var(--text-body); background: var(--surface-muted); color: var(--text-heading); }
.on-dark .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, .55); }
.on-dark .btn--ghost:hover { color: var(--white); border-color: var(--white); background: rgba(255, 255, 255, .08); }
.grund--accent .btn--ghost { color: var(--text-on-accent); border-color: var(--text-on-accent); }
.grund--accent .btn--ghost:hover { background: rgba(10, 15, 28, .08); color: var(--text-on-accent); }

/* Plakette: Kapsel nur fuer das, was etwas benennt. Kante in primary-700,
   damit sie sich auch auf Weiss um mehr als 3:1 abhebt. */
.plakette {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary-700);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-size: 0.656rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.plakette--ruhig { background: transparent; color: var(--text-body); border-color: var(--border-control); }

/* Symbolkachel: 36 x 36, Radius 8, Symbol in --accent auf primary-50. Das
   Symbol ist Dekoration neben einer Ueberschrift, es traegt keine
   Bedeutung — deshalb faellt es nicht unter die 3:1-Regel. */
.kachel {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--accent);
}
.kachel svg { width: 20px; height: 20px; }

/* ==================================================================
   1 · CTA-LEISTE — duenn, UNTER der Kopfzeile, nicht mehr klebend
   ==================================================================

   19.09.2026 (Auftrag 4.11): `sticky` -> `relative`. Die Leiste lief
   bisher den ganzen Weg mit und nahm auf einem Telefon zusammen mit der
   Kopfzeile fast ein Fuenftel des Bildes ein. Sie sagt eine Sache, und
   die sagt sie am Anfang.

   MIT `sticky` FAELLT `top`. An einem `relative` verschiebt `top` das
   Element, statt es zu verankern — die Leiste rutschte dann um die
   Kopfzeilenhoehe nach unten und risse eine Luecke auf. Deshalb ist auch
   die 760-px-Regel weiter unten ersatzlos gestrichen, nicht angepasst. */
.leiste {
  position: relative;
  z-index: 70;             /* unter der Kopfzeile (80), ueber dem Inhalt */
  background: var(--surface-inverse);
  color: var(--white);
  font-size: 0.9375rem;
  line-height: var(--lh-snug);
}
.leiste__innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2) var(--space-4);
  min-height: 42px;
  padding-block: var(--space-2);
  text-align: center;
}
.leiste strong { font-weight: var(--fw-semibold); }
.leiste a { color: var(--color-primary-300); font-weight: var(--fw-semibold); text-underline-offset: 3px; }
.leiste a:hover { color: var(--white); }

/* ==================================================================
   2 · HERO — links Text, rechts der Produktrahmen
   ================================================================== */
.hero {
  background: linear-gradient(160deg, var(--surface-inverse) 0%, var(--surface-deep) 100%);
  padding-block: var(--space-16) var(--space-20);
}
.hero__innen {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}
/* Die grosse Ueberschrift des Konzepts: clamp(52px, 6.8vw, 90px), Zeile .96,
   Laufweite -.058em — die negative Laufweite ist der Kern (D1). */
.hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5);
}
.hero__nutzen {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--white);
  margin: 0 0 var(--space-3);
}
.hero__text > p { color: rgba(255, 255, 255, .86); max-width: 56ch; margin: 0 0 var(--space-6); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__kompat {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  font-size: 0.9375rem; color: rgba(255, 255, 255, .8);
}
.hero__kompat li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__kompat li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary-300);
}

/* Der Produktrahmen. Weisser Grund, damit ein Standbild ohne eigenen Rand
   nicht in den Verlauf laeuft; die Kante ist Weiss mit Deckkraft — ein
   Rand, keine Farbe. */
.hero__rahmen { position: relative; }
.hero__buehne {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-page);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow-xl);
}
.hero__buehne img, .hero__buehne video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
}
/* Der Loop aus M2 ist 16:9 (W3b, 11.09.2026); die Hochkant-Regel fuer das
   M1-Standbild ist damit weg. Das Video traegt in css/szene.css seinen Grund
   (--surface-inverse), denselben wie das Standbild und der Abschnitt. */
.hero__unterschrift {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body-m);
  color: rgba(255, 255, 255, .72);
}
/* Kein eigener Abspielknopf mehr: Unter prefers-reduced-motion laesst
   js/szene.js dem Video die Bedienelemente des Browsers (`controls`) — ein
   Knopf, den es ohne Skript auch gibt, statt eines zweiten, der nur mit
   Skript erscheint. */

/* ==================================================================
   3 · TRUST-LEISTE — vier Kacheln mit Symbol (Tibis Korrektur 4)
   ================================================================== */
.trust { border-block: 1px solid var(--border-subtle); padding-block: var(--space-10); }
.trust__raster {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8);
  list-style: none; margin: 0; padding: 0;
}
.trust__kachel { display: flex; gap: var(--space-4); align-items: flex-start; }
.trust__titel {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}
.trust__titel--zahl { font-weight: var(--fw-black); }
.trust__text { margin: 0; font-size: 0.9375rem; color: var(--text-muted); }

/* ==================================================================
   4 · OVERVIEW — Problem und Loesung, je Zeile ein Verweis, keine Symbole
   ================================================================== */
.faelle { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-warm); }
.fall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-3) var(--space-10);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border-warm);
}
.fall__titel { margin: 0; font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.fall__titel a { color: var(--text-heading); }
.fall__titel a:hover { color: var(--text-link-hover); }
.fall__text p { margin: 0; color: var(--text-body); max-width: 68ch; }
.fall__text p + p { margin-top: var(--space-2); }
.fall__loesung strong { font-weight: var(--fw-semibold); color: var(--text-heading); }

/* ==================================================================
   5 · CTA-BAND — Tinte auf Gruen
   ================================================================== */
.band { padding-block: var(--space-12); }
.band__innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6);
}
.band__satz { margin: 0; font-size: var(--fs-h5); font-weight: var(--fw-bold); line-height: var(--lh-snug); max-width: 44ch; }
/* NUR das direkte Kind ist die zweite Zeile. Auf den Landingpages stehen
   in dieser Zeile Betrag und Steuerwort als eigene Spans (data-money,
   data-tax-word) — mit `.band__satz span` wurden sie am 11.09.2026 im
   gerenderten Band zu vier Zeilen, im Quelltext war nichts zu sehen. */
.band__satz > span { display: block; font-size: var(--fs-body-xl); font-weight: var(--fw-regular); margin-top: var(--space-1); }

/* ==================================================================
   6 · PRODUKT IN AKTION — drei Reiter, dahinter je eine Bildstrecke
   ================================================================== */
.produkt__reiter {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
  margin: 0 0 var(--space-8);
}
.reiter {
  display: grid; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  font: inherit;
  cursor: pointer;
  transition: var(--transition-control);
}
.reiter:hover { border-color: rgba(255, 255, 255, .55); }
.reiter[aria-selected="true"] { background: var(--surface-page); border-color: var(--surface-page); color: var(--text-heading); cursor: default; }
.reiter__nr { font-family: var(--font-mono); font-size: var(--fs-body-m); letter-spacing: var(--tracking-caps); color: var(--color-primary-300); }
.reiter[aria-selected="true"] .reiter__nr { color: var(--text-link); }
.reiter__titel { font-size: var(--fs-body-xl); font-weight: var(--fw-bold); }
.reiter__satz { font-size: 0.9375rem; color: rgba(255, 255, 255, .8); }
.reiter[aria-selected="true"] .reiter__satz { color: var(--text-muted); }

/* Die Bildstrecken (M2): Buehne, Ueberblendung, Unterschrift und Punkte
   kommen aus css/szene.css — hier steht nur, was die Startseite dazulegt:
   der Nutzensatz ueber der Strecke und ihr Mass. Die Bilder haben einen
   durchsichtigen Grund und liegen ohne Rahmen auf --surface-inverse. */
.szene__nutzen { margin: 0 0 var(--space-5); font-size: var(--fs-body-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--white); }
/* Dasselbe Mass fuer die Strecke unter den drei Schritten der Landingpages
   (interview.html, Abschnitt 5, seit dem Einbau von L1 am 11.09.2026):
   EIN Mass, eine Stelle — sonst laufen Startseite und Landingpage beim
   naechsten Nachmessen auseinander. */
.produkt__feld > .szene, .schritte ~ .szene { max-width: 1040px; margin-inline: auto; }
.produkt__hinweis {
  margin: var(--space-10) 0 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  color: rgba(255, 255, 255, .86);
  max-width: 72ch;
}
.produkt__hinweis strong { color: var(--white); font-weight: var(--fw-semibold); }

/* ==================================================================
   7 · PREISE — drei Karten, darunter die Nebenreihe
   ================================================================== */
.preise__kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); margin-bottom: var(--space-8);
}
.preise__kopf .abschnitt__kopf { margin-bottom: 0; }

/* Periodenschalter: aria-pressed traegt den Zustand, js/home.js schaltet
   das Attribut data-periode am Abschnitt; die Karten zeigen dann den einen
   oder den anderen Preis. Ohne JavaScript: monatlich, mit dem Jahrespreis
   als Zeile darunter — nichts fehlt, nichts springt. */
.periode {
  display: inline-flex; gap: 3px; padding: 3px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface-page);
}
.periode button {
  border: 0; background: transparent;
  padding: 8px 14px; border-radius: var(--radius-sm);
  font: inherit; font-weight: var(--fw-medium); color: var(--text-body);
  cursor: pointer; transition: var(--transition-control);
}
.periode button:hover { color: var(--text-heading); }
.periode button[aria-pressed="true"] { background: var(--surface-inverse); color: var(--white); cursor: default; }
.periode__rabatt { font-size: var(--fs-body-m); color: inherit; }

.plaene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: 30px 26px;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.plan--empfohlen { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan .plakette { position: absolute; top: -13px; right: 20px; }
.plan__name { margin: 0; font-size: var(--fs-h5); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.plan__satz { margin: 0; font-size: 0.9375rem; color: var(--text-muted); }

.price { margin: 0; display: grid; gap: 2px; }
.price__wert { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--text-heading); }
.price__einheit { font-size: 0.9375rem; color: var(--text-muted); }
.price__tax { display: block; font-size: var(--fs-body-m); color: var(--text-muted); }
.price__jahr { margin: 0; font-size: var(--fs-body-m); color: var(--text-body); }
.preise[data-periode="monthly"] .nur-jahr { display: none; }
.preise[data-periode="annual"] .nur-monat { display: none; }

.plan__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.plan__liste li { position: relative; padding-left: 18px; font-size: 0.9375rem; color: var(--text-body); }
.plan__liste li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; border-radius: 1px; background: var(--accent);
}
.plan > .btn { margin-top: auto; }

/* Nebenreihe: kompakt, jede Karte mit eigenem Kaufknopf. */
.nebenreihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-10); }
.plan--klein { padding: var(--space-5); gap: var(--space-3); box-shadow: none; }
.plan--klein .price__wert { font-size: var(--fs-h5); }
.plan--klein .btn { padding: 10px 18px; font-size: 0.875rem; }
.plan--klein .plakette { position: static; align-self: flex-start; }
.plan__hinweis { margin: 0; font-size: var(--fs-body-m); color: var(--text-muted); }
.warteliste { display: grid; gap: var(--space-2); }
/* Zeilen innerhalb einer kleinen Karte (Student monatlich/jaehrlich, die
   drei Gespraechspakete): je Zeile ein eigener Betrag und Knopf. */
.paket { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--border-subtle); }
.paket:first-of-type { border-top: 0; }
.paket .price { flex: 1 1 auto; }
.paket .price__wert { font-size: var(--fs-body-xl); }

.kasse__status {
  min-height: 1.5em; margin: var(--space-6) 0 0;
  font-weight: var(--fw-medium); color: var(--text-heading);
}
/* Studentenkauf ohne bestaetigte Adresse: der Weg zu den anderen Tarifen
   (js/home-wire.js, studentNichtBestaetigt, 23.09.2026). */
.kasse__weiter { margin-top: var(--space-3); }
.preise__zeile { margin: var(--space-6) 0 0; font-size: 0.9375rem; color: var(--text-body); max-width: 80ch; }
.kleingedruckt { margin: var(--space-3) 0 0; font-size: var(--fs-body-m); color: var(--text-muted); max-width: 90ch; }

/* ==================================================================
   8 · FAQ
   ================================================================== */
.faq__liste { max-width: 78ch; margin: 0; }
.faq details { border-top: 1px solid var(--border-subtle); padding: var(--space-4) 0; }
.faq details:last-child { border-bottom: 1px solid var(--border-subtle); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  list-style: none; cursor: pointer;
  font-size: var(--fs-body-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  color: var(--text-heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-top: .45em;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-link); border-bottom: 2px solid var(--text-link);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: .7em; }
.faq details p { margin: var(--space-3) 0 0; max-width: 70ch; color: var(--text-body); }

/* ==================================================================
   9 · KONTAKT — vor der Fusszeile, das einzige Formular der Website
   ================================================================== */
.kontakt__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-12); align-items: start; }
.kontakt__adresse { margin: 0; color: var(--text-body); }
.kontakt__adresse a { font-weight: var(--fw-semibold); }
.formular {
  display: grid; gap: var(--space-4);
  padding: var(--space-8);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.formular__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.feld { display: grid; gap: var(--space-2); }
.feld label { font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--text-body); }
.eingabe {
  width: 100%; height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface-page);
  color: var(--text-heading);
  font: inherit;
}
textarea.eingabe { height: auto; min-height: 140px; padding-block: var(--space-3); resize: vertical; }
.eingabe:focus-visible { border-color: var(--focus-ring); }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.formular__status { margin: 0; font-size: 0.9375rem; color: var(--text-muted); }
/* Honigtopf: fuer Menschen unsichtbar, fuer Formularroboter ein Feld. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==================================================================
   BREITEN — 1920 / 1440 / 1152 / 768 / 390
   ================================================================== */
@media (max-width: 1151px) {
  .trust__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nebenreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plaene { gap: var(--space-4); }
}
@media (max-width: 1023px) {
  .hero__innen { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__buehne--hochkant { margin-inline: 0; }
  .szene { grid-template-columns: 1fr; }
  /* Gemessen bei 768 px (DE): drei Karten nebeneinander sind je 220 px
     breit, „44,90 € / Monat" bricht mitten im Preis um und die Knoepfe
     werden zweizeilig. Unter 1024 px stehen die Karten untereinander. */
  .plaene { grid-template-columns: 1fr; }
  .kontakt__innen { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 767px) {
  /* Konzept unter 760 px: .section 78px 0, .hero h1 clamp(47px, 14vw, 66px). */
  .abschnitt { padding-block: var(--pad-section-tight); }
  .hero h1 { font-size: var(--fs-h1-schmal); }
  .hero { padding-block: var(--space-10) var(--space-12); }
  .plaene, .produkt__reiter, .formular__zeile { grid-template-columns: 1fr; }
  .fall { grid-template-columns: 1fr; gap: var(--space-2); }
  .band__innen { flex-direction: column; align-items: flex-start; }
  .preise__kopf { flex-direction: column; align-items: flex-start; }
}
/* Hier stand bis zum 19.09.2026 `.leiste { top: 56px }` fuer die
   niedrigere Kopfzeile unter 761 px. Die Leiste klebt nicht mehr (siehe
   oben), also gibt es nichts mehr auszurichten — und `top` an einem
   `relative` haette sie um 56 px nach unten geschoben. */
@media (max-width: 560px) {
  .trust__raster, .nebenreihe { grid-template-columns: 1fr; }
  .plan { padding: var(--space-6) var(--space-5); }
  .plan--klein { padding: var(--space-5) var(--space-4); }
  .formular { padding: var(--space-5); }
  .hero__knoepfe .btn { width: 100%; }
}

/* ==================================================================
   LANDINGPAGES (W5, 11.09.2026) — die Bauteile, die die Startseite
   nicht hat. Vorlage ist web/interview.html; W6 bis W8 kopieren sie.
   Abschnittsrhythmus einer Landingpage, zwoelf Abschnitte:
     Hero (Verlauf) -> Trust (page) -> Problem/Antwort (warm)
     -> Gespraechsarten (page) -> So laeuft es (inverse) -> Uebung (page)
     -> Band (accent) -> Kaufen (warm) -> Download (page)
     -> Vertrauen (warm) -> FAQ (page) -> Band (accent)
   Nichts hier hat eine eigene Farbe; jede Regel liest ein Token.
   Knoepfe, Karten, Preise, FAQ und Band kommen unveraendert von oben.
   ================================================================== */

/* VERSALIEN — nur die Interview-Seite, und nur bis Tibi entscheidet
   (Auftrag W5, B4: vorerst beibehalten, als Frage im Bericht). Haengt an
   einer Klasse am <main>, nicht am Bauteil: Faellt die Entscheidung
   gegen die Grossschreibung, ist es EIN Wort im Markup, keine Regel. */
.versal h1, .versal h2, .versal h3 { text-transform: uppercase; }

/* Der eine erlaubte Akzent je Landingpage (Auftrag W5, A2): Der
   Hero-Verlauf beginnt eine Stufe heller, bei --color-primary-800 statt
   -900. Dieselbe Palette, kein neuer Wert. */
.hero--hell { background: linear-gradient(160deg, var(--color-primary-800) 0%, var(--surface-deep) 100%); }

/* --- 3 · Problem -> Antwort: je Zeile links das Problem, rechts, was
   die Anwendung tut. Derselbe Zeilenbau wie .fall auf der Startseite,
   dieselben Sandkanten. */
.paare { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-warm); }
.paar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-10);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-warm);
}
.paar__marke {
  display: block; margin: 0 0 var(--space-1);
  font-family: var(--font-mono); font-size: var(--fs-body-m); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-link);
}
.paar p { margin: 0; max-width: 60ch; }
.paar__problem { color: var(--text-body); }
.paar__antwort { color: var(--text-heading); font-weight: var(--fw-medium); }
.paar__antwort strong { font-weight: var(--fw-semibold); }

/* --- 4 · Gespraechsarten: eine Karte je Vorbereitungstyp aus
   modes.VORBEREITUNGS_TYPEN. Inhalt, kein Kaufgegenstand — deshalb kein
   Knopf in der Karte (Auftrag W5, A4). */
.arten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.art {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-8);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.art h3 { margin: 0; }
.art__satz { margin: 0; color: var(--text-body); }
.art__daten { margin: var(--space-2) 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); font-size: 0.9375rem; }
.art__daten dt { padding-top: .2em; font-family: var(--font-mono); font-size: var(--fs-body-m); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.art__daten dd { margin: 0; color: var(--text-heading); }
.arten__hinweis { margin: var(--space-8) 0 0; max-width: 76ch; color: var(--text-body); }
/* Drei Karten (W6, Sales): im Zweierraster stuende die dritte allein in
   der linken Spalte neben einem Loch. Unter 1024 px untereinander — zwei
   und eine waere dasselbe Loch eine Stufe tiefer. */
.arten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Die ausgesprochene Grenze in einer Karte (W6, Legal auf der
   Advisors-Seite): derselbe Bau in der Gespraechsarten-Karte und in der
   Preiskarte, damit der Satz an beiden Stellen gleich aussieht. */
.art__grenze { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--border-control); font-size: 0.9375rem; color: var(--text-body); }
.art__grenze strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

/* --- 5 · So laeuft es: drei Schritte auf dunklem Grund, darunter die
   Bildstrecke (.szene, unveraendert von der Startseite). */
.schritte { list-style: none; margin: 0 0 var(--space-10); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.schritt {
  display: grid; gap: var(--space-2); align-content: start;
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .05);
}
.schritt__nr { font-family: var(--font-mono); font-size: var(--fs-body-m); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-primary-300); }
.schritt h3 { margin: 0; font-size: var(--fs-body-xl); }
.schritt p { margin: 0; font-size: 0.9375rem; color: rgba(255, 255, 255, .86); }

/* --- 6 · Uebungsmodus: Text links, ein Standbild der Anwendung rechts,
   darunter die Quellen, aus denen geuebt wird. Entscheidung vom
   03.09.2026, auf jeder Landingpage (Auftrag W5, A6). */
.uebung__innen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.uebung__innen .abschnitt__kopf { margin-bottom: var(--space-5); }
.uebung__text > p { margin: 0 0 var(--space-4); color: var(--text-body); max-width: 60ch; }
.uebung__text .uebung__hinweis {
  margin: var(--space-2) 0 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  background: var(--surface-sunken);
}
.uebung__hinweis strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
.uebung__bild { margin: 0; }
.uebung__bild img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: var(--radius-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg);
}
.uebung__bild figcaption { margin: var(--space-3) 0 0; font-size: var(--fs-body-m); color: var(--text-muted); }
.quellen { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.quelle { padding: var(--space-5) var(--space-6); border-left: 3px solid var(--accent); background: var(--surface-sunken); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.quelle h3 { margin: 0 0 var(--space-2); font-size: var(--fs-body-xl); }
.quelle p { margin: 0; font-size: 0.9375rem; color: var(--text-body); }

/* --- 8 · Kaufen. Die Karten sind die der Startseite; neu ist der
   Kreditblock nach Tibis Entwurf vom 10.09.2026: zwei gleich grosse
   90-Minuten-Kacheln, ein Plus, eine Klammer, darunter „1 Credit · 180
   Minuten". Beide Einheiten sind dasselbe, keine ist hervorgehoben. Die
   Klammer haengt als ::after an den Einheiten, damit sie ohne Zutun so
   breit ist wie beide zusammen und kein Vorleseprogramm einen leeren
   Behaelter findet. */
.plan__art { font-family: var(--font-mono); font-size: var(--fs-body-m); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.plan .periode { align-self: flex-start; }
.kredit {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  display: grid; gap: var(--space-5);
}
.kredit__satz { margin: 0; color: var(--text-body); max-width: 80ch; }
.kredit__satz strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
.kredit__rechnung { display: grid; justify-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.kredit__einheiten { position: relative; display: flex; align-items: stretch; justify-content: center; gap: var(--space-6); padding-bottom: var(--space-6); }
.kredit__einheiten::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 16px;
  border: 1px solid var(--border-default); border-top: 0;
  border-radius: 0 0 12px 12px;
}
.kredit__einheit {
  display: grid; justify-items: center; gap: var(--space-1);
  min-width: 168px; padding: var(--space-4) var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--accent); border-radius: var(--radius-md);
}
.kredit__zahl { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: 1; color: var(--text-heading); }
.kredit__wort { font-family: var(--font-mono); font-size: var(--fs-body-m); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.kredit__plus { align-self: center; font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-link); }
.kredit__summe { margin: 0; font-family: var(--font-mono); font-size: var(--fs-body-m); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-body); }
.kredit__summe strong { color: var(--text-heading); font-weight: var(--fw-bold); }
.kredit__regeln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.kredit__regeln li { position: relative; padding-left: 18px; font-size: 0.9375rem; color: var(--text-body); }
.kredit__regeln li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 1px; background: var(--accent); }
.nebenreihe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- 9 · Download: zwei Karten, data-dl-home fuer js/download.js. Die
   Knoepfe stehen nebeneinander, solange die Karte breit genug ist, und
   brechen sonst als ganze Zeile um — nie ein Text, der aus dem Kasten
   laeuft (Befund D1, 09.09.2026). */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dl__karte {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.dl__system { display: flex; align-items: center; gap: var(--space-3); }
.dl__system svg { width: 26px; height: 26px; flex: none; color: var(--text-link); }
.dl__system h3 { margin: 0; }
.dl__anforderungen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-body-m); color: var(--text-body); }
/* Die Label-Spalte war 96 px fest: „Voraussetzung“ (94 px in Mono) brach bei
   390 px als „Voraussetzun / g“ — auf allen sechs deutschen Landingpages,
   im Fenster gesehen (W10, 12.09.2026). max-content laesst sie mit dem
   laengsten Label wachsen; 96 px bleiben das Mindestmass fuer Englisch. */
.dl__anforderungen li { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: var(--space-3); }
.dl__anforderungen strong { font-weight: var(--fw-medium); color: var(--text-heading); }
.dl__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dl__knoepfe .btn { flex: 1 1 180px; }
.dl__hinweis { margin: auto 0 0; padding-left: var(--space-3); border-left: 2px solid var(--accent); font-size: var(--fs-body-m); color: var(--text-body); }

/* --- 10 · Vertrauen: zwei Karten — was die Anwendung tut, was sie nicht
   tut —, darunter der Film und die Fussnoten. Die Vorbehalte stehen in
   den Fussnoten und nicht im Fliesstext; weggelassen wird keiner. */
.vertrauen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.vertrauen__karte { padding: var(--space-6) var(--space-8); background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.vertrauen__karte h3 { margin: 0 0 var(--space-4); font-size: var(--fs-h5); }
.vertrauen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.vertrauen__liste li { position: relative; padding-left: 20px; color: var(--text-body); }
.vertrauen__liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 1px; background: var(--accent); }
.vertrauen__karte--nicht .vertrauen__liste li::before { width: 6px; height: 6px; top: .55em; border-radius: 50%; background: transparent; border: 2px solid var(--border-control); }
.film__rahmen { margin: var(--space-10) 0 0; }
.film { display: block; width: 100%; height: auto; border-radius: var(--radius-card); background: var(--surface-inverse); }
.film__zeile { margin: var(--space-3) 0 0; font-size: var(--fs-body-m); color: var(--text-body); }
.fussnoten { list-style: none; margin: var(--space-8) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--border-warm); display: grid; gap: var(--space-2); font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--text-body); }
.fussnoten li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); }
.fussnote__nr { font-family: var(--font-mono); }
sup.fn { font-size: 0.7em; line-height: 0; }
sup.fn a { color: var(--text-link); text-decoration: none; padding: 0 1px; }
sup.fn a:hover, sup.fn a:focus-visible { text-decoration: underline; }
.on-dark sup.fn a { color: var(--color-primary-300); }

/* --- 5 · Bildstrecke aus M2 (W6, 11.09.2026). Das Markup ist der Vertrag
   aus js/szene.js und tests/test_szenen.py: figure.szene > .szene__buehne >
   picture.szene__bild, die Unterschriften als Liste darunter; szene.css
   fuehrt Ueberblendung und Punkte. Die .szene-Regeln oben gelten dem
   Standbild-Bau der Startseite und der Interview-Seite (Raster, weisser
   Rahmen um ein 16:9-Bild); fuer die durchsichtigen 16:10-Bilder aus M2
   waeren sie ein weisser Kasten hinter dem Schatten. Der Rahmen .strecke
   hebt sie auf — an einer eigenen Klasse, nicht am Vertrag: das <figure>
   traegt weiter genau class="szene". */
/* 15.09.2026: volle Containerbreite statt 1040 px. Die Overlay-Fenster
   stehen seit heute GANZ auf der Leinwand (tools/szenen_render.py) und
   sind dadurch kleiner darin: 770 von 1600 Punkten statt angeschnitten
   ueber die ganze Hoehe. Bei 1040 px Anzeigebreite waere das Fenster
   500 CSS-Punkte breit gewesen, 81 % seiner echten 620 — bei voller
   Containerbreite sind es 578, also 93 %. Die Verkleinerung auf der
   Leinwand wird hier wieder eingesammelt. */
.strecke { margin-inline: auto; }
.strecke .szene { display: block; }
.strecke .szene__bild { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.strecke .szene__bild img { aspect-ratio: auto; }
.strecke .szene__text { display: block; padding: var(--space-5) 0 0; text-align: center; font-size: var(--fs-body-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.strecke .szene__punkte { justify-content: center; padding-top: var(--space-4); }

/* --- 3 · Konnektoren-Hinweis (W6): der Stand der CRM-Anbindung steht unter
   den Paaren, abgesetzt wie der Uebungshinweis — kein Kaufgegenstand und
   kein Versprechen ueber das hinaus, was /connectors.html deckt. */
.konnektoren { margin: var(--space-8) 0 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); background: var(--surface-sunken); color: var(--text-body); max-width: 80ch; }
.konnektoren strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
/* Die Statuschips je System: dasselbe Wort wie auf legal.html und in
   docs/W3-AUSGELAGERT-0911.md (A) — tests/test_konnektor_aussagen.py haelt
   es ueber alle Seiten einheitlich („zwei Woerter fuer denselben Zustand
   liest ein Kunde als zwei Zustaende"). Die Klassennamen stammen von den
   Bestandsseiten (site.css), die Regeln hier sind neu und lesen Tokens. */
.uc-konnektoren { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin-inline-end: var(--space-1); color: var(--text-heading); font-weight: var(--fw-medium); }
.uc-beta { display: inline-block; padding: 2px 8px; border: 1px solid var(--border-control); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.656rem; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-body); }

/* --- 8 · Eine Karte ohne Kaufknopf (W6, Legal auf der Advisors-Seite):
   backend/catalog.py haelt `purchasable` hinter _LEGAL_RELEASE_APPROVED =
   False. Die Karte bleibt lesbar und bepreist, tritt aber zurueck — Sand
   statt Weiss, kein Schatten —, damit niemand sie fuer die dritte Wahl
   haelt; die Grenze steht als Satz in der Karte, nicht als Grauton. */
.plan--gesperrt { background: var(--surface-sunken); box-shadow: none; }
.plan__sperre { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--border-control); font-size: var(--fs-body-m); color: var(--text-body); }

/* Breiten der Landingpage-Bauteile, dieselben Stufen wie oben. */
@media (max-width: 1151px) {
  .nebenreihe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .uebung__innen { grid-template-columns: 1fr; gap: var(--space-8); }
  .arten--drei { grid-template-columns: 1fr; }
  .vertrauen, .quellen, .nebenreihe--drei { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .paar { grid-template-columns: 1fr; gap: var(--space-2); }
  .arten, .schritte, .dl { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kredit { padding: var(--space-5) var(--space-4); }
  .kredit__einheiten { flex-direction: column; align-items: center; gap: var(--space-3); padding-bottom: 0; width: 100%; }
  .kredit__einheiten::after { display: none; }
  .kredit__einheit { width: 100%; max-width: 280px; }
  .art, .dl__karte, .vertrauen__karte { padding: var(--space-5); }
}

/* ==================================================================
   LANDINGPAGES STUDENT UND EXECUTIVE (W7, 11.09.2026) — drei Bauteile,
   die die Vorlage aus W5 nicht hatte. Nichts hier hat eine eigene
   Farbe; jede Regel liest ein Token.
   ================================================================== */

/* --- Einzelbilder aus den Bildstrecken (M2) im Hero und im Uebungs-
   block. Die M2-Aufnahmen sind 1600 x 1000 mit durchsichtigem Grund; im
   16:9-Rahmen der Vorlage wuerden sie beschnitten (cover) oder verzerrt
   (aspect-ratio ohne object-fit). Deshalb: das Mass des Bildes, und
   contain — kein neues Bild, nur der richtige Rahmen. */
.hero__buehne--szene img, .uebung__bild--szene img { aspect-ratio: 16 / 10; object-fit: contain; }

/* --- Das Hochschul-Tor der Studentenseite (Abschnitt 8). Es steht VOR
   den drei Karten, weil jeder Studententarif den Nachweis braucht
   (backend/catalog.py: requires_student_verification) und der Kaufweg
   ohne ihn ablehnt — ein Hinweis NACH dem Knopf liesse den Kunden im
   Checkout auflaufen. js/home-wire.js sperrt die Kaufknoepfe, bis hier
   eine Hochschuladresse steht; entschieden wird im Checkout. */
.tor {
  display: grid; gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
}
.tor label { font-size: var(--fs-body-xl); font-weight: var(--fw-semibold); color: var(--text-heading); }
.tor__hinweis { margin: 0; max-width: 70ch; color: var(--text-body); }
.tor__zeile { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tor__zeile .eingabe { flex: 1 1 260px; width: auto; }
.tor__status { margin: 0; min-height: 1.5em; font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--text-heading); }

/* --- Enterprise auf der Executive-Seite: keine Preiskarte (catalog.py:
   purchasable false, kein Preis), sondern eine Zeile unter den Karten
   mit demselben Wartelisten-Formular wie auf der Startseite. */
.enterprise {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8); align-items: center;
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
}
.enterprise__text { margin: var(--space-2) 0 0; color: var(--text-body); max-width: 60ch; }
.enterprise__text strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

@media (max-width: 767px) {
  .enterprise { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tor, .enterprise { padding: var(--space-5) var(--space-4); }
}
/* Die schliessende Klammer darueber fehlte nach dem Merge von W7 und W8
   (88693af): Der Block stand offen, und jede Regel bis zum Dateiende —
   die W8-Bauteile, .plaene--zwei, .standbild — galt nur unter 560 px.
   Gemessen in W10 (12.09.2026): das Standbild auf legal.html stand bei
   1440 px mit 1600 px Breite ueber dem Rand. Ein Zustandsautomat ueber
   die Datei zaehlte am Ende Tiefe 1, offen seit dieser Zeile.

   W8 (11.09.2026) — Compliance-Landingpage, Legal als Warteliste,
   Bibliothek im neuen System. Dieselbe Vorlage wie W5 (zwoelf
   Abschnitte, dieselben Knoepfe und Karten); neu sind nur die Bauteile,
   die diese drei Seiten brauchen und die Vorlage nicht hatte: eine
   Tabelle im Kartenformat, die Bestandskarten, die Bildstrecke im
   M2-Markup, der Wartelistenblock und die Bibliothekskarten. Keine
   eigene Farbe — jede Regel liest ein Token.
   ================================================================== */

/* --- Hero-Standbild aus M2 (16:10, durchsichtiger Grund). Kein weisser
   Kasten wie bei den M1-Aufnahmen: Das Bild traegt seinen Schatten im
   Alphakanal und liegt auf dem Verlauf richtig (M2-SZENEN-EINBAU). */
.hero__buehne--frei { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.hero__buehne--frei img { aspect-ratio: 16 / 10; object-fit: contain; }


/* --- Tabelle im Kartenformat (12 px, 1 px Rand). Auf dem Telefon rollt
   der Behaelter waagerecht, nie die Seite — deshalb die Mindestbreite
   an der Tabelle und overflow am Behaelter (Auftrag W8, Seite 3). */
.tabelle {
  margin-top: var(--space-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.tabelle table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9375rem; }
.tabelle th, .tabelle td {
  padding: var(--space-3) var(--space-4);
  text-align: left; vertical-align: top;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-body);
}
.tabelle th {
  border-top: 0;
  background: var(--surface-sunken);
  font-family: var(--font-mono); font-size: var(--fs-body-m); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-body);
}
.tabelle td:first-child { font-weight: var(--fw-semibold); color: var(--text-heading); }
.abschnitt__kopf + .tabelle { margin-top: 0; }
.tabelle__nach { margin: var(--space-6) 0 0; max-width: 72ch; color: var(--text-body); }

/* --- Bestandskarten: die fuenf Korpora, jede mit Zustand, Text und
   Kennzeile — dieselbe Karte wie .art, nur mit Plakette. */
.bestaende { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.bestand {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
}
.bestand .plakette { align-self: flex-start; margin-bottom: var(--space-1); }
.bestand h3 { margin: 0; font-size: var(--fs-body-xl); }
.bestand p { margin: 0; font-size: 0.9375rem; color: var(--text-body); }
.bestand__meta { margin-top: auto; padding-top: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-body-m); color: var(--text-muted); }
.bestand--wip { background: var(--surface-sunken); }
.abschnitt__kopf--nach { margin-top: var(--space-16); }
.arten--eine { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.quellen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quelle .plakette { margin-bottom: var(--space-3); }

/* --- „Im Abonnement": vier Punkte unter den Karten, derselbe Kasten
   wie der Kreditblock (.kredit), nur mit Ueberschrift je Punkt. */
.enthalten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); }
.enthalten li { position: relative; padding-left: 18px; font-size: 0.9375rem; color: var(--text-body); }
.enthalten li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 1px; background: var(--accent); }
.enthalten strong { display: block; color: var(--text-heading); font-weight: var(--fw-semibold); }

/* --- Wartelistenblock (Legal): links die Preiskarte ohne Kaufknopf, rechts
   das Formular. Das Formular ist das der Startseite (.formular, .feld,
   .eingabe) — kein zweites. */
.warte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-8); align-items: start; }
.warte .plan { box-shadow: none; }
.warte__grund { margin: 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); background: var(--surface-sunken); font-size: 0.9375rem; color: var(--text-body); }
.warte__grund strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
.formular h3 { margin: 0; }
.formular > p { margin: 0; font-size: 0.9375rem; color: var(--text-body); }
.band__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.vertrauen__karte p { margin: 0; color: var(--text-body); }
.vertrauen__karte p + p { margin-top: var(--space-3); }
.vertrauen--eins { grid-template-columns: minmax(0, 1fr); }

/* --- Bibliothek (library.html): eine schmale Spalte, jeder Rechtsraum
   eine Karte; die Zeilen darin sind das, was die Matrix ausmacht —
   Abrufstatus, Umfang, Amtlichkeit, Antwortstatus — und stehen im HTML
   Zeile fuer Zeile wie zuvor (tests/test_legal_source_registry.py liest
   sie an der Zeile „Answer status"). */
.bibliothek { max-width: 78ch; }
.zurueck { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: none; }
.zurueck:hover { color: var(--text-link-hover); text-decoration: underline; }
.zurueck svg { width: 16px; height: 16px; }
.bibliothek h1 { font-size: clamp(1.875rem, 3vw, var(--fs-h2)); line-height: var(--lh-tight); margin: 0 0 var(--space-4); }
.bibliothek h2 { margin: var(--space-12) 0 var(--space-4); }
.bibliothek__lead { margin: 0 0 var(--space-6); color: var(--text-body); max-width: 72ch; }
.lib-pack {
  margin: 0 0 var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
}
.lib-pack h3 { margin: 0 0 var(--space-3); font-size: var(--fs-body-xl); }
.lib-pack ul { list-style: none; margin: 0; padding: 0; }
.lib-pack li { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); font-size: 0.9375rem; color: var(--text-body); }
.lib-pack li:first-child { border-top: 0; padding-top: 0; }
.lib-pack li:last-child { padding-bottom: 0; }
.lib-pack li strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
.lib-pack a { color: var(--text-link); }
.legal-note { margin: var(--space-10) 0 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); background: var(--surface-sunken); font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--text-body); }

@media (max-width: 1151px) {
  .bestaende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .warte, .quellen--zwei { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .bestaende, .enthalten { grid-template-columns: 1fr; }
  .tabelle { margin-top: var(--space-6); }
}
@media (max-width: 560px) {
  .bestand, .lib-pack { padding: var(--space-5) var(--space-4); }
}

/* Zwei Karten nebeneinander (Compliance und die Alternative Premium),
   ein zweites Kartenpaar unter dem ersten, und das Standbild aus M1 in
   Abschnitt 5 der Legal-Seite (keine Bildstrecke, solange der Verkauf
   ausgesetzt ist — Auftrag W8). */
.plaene--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; }
.vertrauen--nach { margin-top: var(--space-6); }
.standbild { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-8); align-items: center; margin: var(--space-10) 0 0; }
/* Dieselbe Hochkant-Regel, die W5 fuer die M1-Aufnahmen hatte (1600 x 900,
   das schmale Fenster in der Mitte): 4:5 mit cover zeigt das Fenster mit
   etwas Leinwand. Eigene Klasse, weil .szene__bild--hochkant mit W3b
   (redesign/website-2026-09) weggefallen ist — das Standbild darf nicht
   an einer Klasse haengen, die der Merge entfernt. */
.standbild__bild {
  max-width: 420px; aspect-ratio: 4 / 5;
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--surface-page);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow-lg);
}
.standbild__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.standbild__zeile { margin: 0; font-size: var(--fs-body-xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: rgba(255, 255, 255, .86); max-width: 40ch; }
@media (max-width: 1023px) {
  .plaene--zwei { grid-template-columns: 1fr; }
  .standbild { grid-template-columns: 1fr; }
}


/* ==================================================================
   FAEHIGKEITSMATRIX: DIE ZWEITE GRUPPE (19.09.2026)
   ==================================================================

   Die zwoelf angebundenen, aber nicht antwortenden Rechtsraeume. Die
   Klasse steht nur auf capability-matrix.html, deshalb braucht es keinen
   body-Vorsatz -- und keine neue Stildatei, die der Chrome-Erzeuger erst
   in die Mittelvorlage aufnehmen muesste.

   Unter 760 px rollt die Tabelle waagerecht in ihrem eigenen Kasten
   (`overflow-x`), statt die Seite breiter zu machen: Drei Spalten mit
   Quellennamen passen in kein Telefon, und eine Bildlaufleiste an der
   ganzen Seite ist der schlechtere Tausch. */
.matrix__angebunden {
  width: 100%;
  margin: var(--space-6) 0 var(--space-4);
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: var(--lh-snug);
  text-align: left;
}
.matrix__angebunden th,
.matrix__angebunden td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.matrix__angebunden thead th {
  border-bottom-width: 2px;
  color: var(--text-heading);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.matrix__angebunden tbody th {
  white-space: nowrap;
  font-weight: var(--fw-semibold);
}
.matrix__angebunden tbody td { color: var(--text-body); }
.matrix__angebunden tbody tr:last-child th,
.matrix__angebunden tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
  .matrix__angebunden { display: block; overflow-x: auto; white-space: nowrap; }
  .matrix__angebunden td { white-space: normal; min-width: 220px; }
}