/* Die Rechtstext-Form der zehn Rechts- und Betriebsseiten (Auftrag S5,
 * 12.09.2026): privacy, privacy-policy, security, terms, withdrawal, imprint,
 * library, glossary, help, connectors — EN und DE.
 *
 * ARPADS VORGABE, woertlich: „Sieht aus wie ein legaler Text, in Bloecken
 * geschrieben, kleine Buchstaben, Absaetze klar getrennt, Absatzueberschriften
 * fett, Rest normal. Blockabsaetze!" Fuer diese Seiten gilt die Boxregel
 * NICHT (AUFTRAG-S-GEMEINSAM-1209.md, Ausnahme).
 *
 * WORAUS DAS GEBAUT IST — nur aus dem Konzept (docs/konzept/2026-09-11-
 * konzept.html) und seinen Bauteilen in bauteile.css:
 *   - Seitenkopf: .section > .narrow > .section-head (eyebrow, section-title,
 *     section-lede). Die Spaltenform des Kopfes (flex-direction: column) ist
 *     die, die das Konzept unter 1080 px nimmt; in der 780-px-Spalte gilt sie
 *     immer, sonst stuenden h1 und Einleitung nebeneinander in 370 px.
 *   - Kleinschrift 14 px, Zeile 1.6, Absatzueberschriften 800 in 17/15 px:
 *     die Werte des Auftrags; 14, 15 und 17 px sind die Kleinschriftstufen
 *     des Konzepts (.price-card > p, .feature-list li, summary).
 *   - Abstaende: 32 px Blockabstand (Auftrag), 14/8/18/5 px aus dem
 *     Konzept (margin-Werte von .moment-card h3, .proof-item strong,
 *     .eyebrow, .brand-copy). Nichts ist gerundet oder erfunden.
 *   - Farben: --paper als Grund, --ink fuer Fettes, --ink-2 fuer den Lauftext,
 *     --line fuer Trennstriche, --muted fuer die Einleitung (die p-Farbe des
 *     Konzepts). --ink-2 auf --paper: 14,0:1 (Bericht S5).
 *   - Links im Text: .text-link des Konzepts, hier als `display: inline`,
 *     weil das Konzept den Verweis nur freistehend kennt (inline-flex) und
 *     ein Verweis im Satz mit der Zeile umbrechen muss.
 *
 * WAS DIESE DATEI NEUTRALISIERT, und warum: Die Altschicht (premium.css,
 * mobil.css, landing.css, styles.css, thalassa.css) traegt Regeln mit
 * `body[data-page]`-Vorsatz, die die Bauteile des Konzepts stechen —
 * Abschnittsrhythmus, Ueberschriftengroessen unter 768 px, `hyphens: auto`
 * auf Ueberschriften, Kartenoptik der Tabellen, der eingerueckte Kasten der
 * `.legal-note`. Jede Regel hier traegt deshalb denselben Vorsatz und steht
 * hinter dem Mittelblock, damit sie zuletzt kommt und gewinnt.
 *
 * SILBENTRENNUNG: `hyphens: manual` — kein Wort wird von selbst getrennt
 * (Arpad). Die drei deutschen h1, die bei 390 px in keine Zeile passen,
 * tragen ein ­ an der Wortfuge (privacy-policy, terms, withdrawal).
 *
 * Jede Regel ist auf die zehn `body[data-page="…"]` eingegrenzt; die Liste
 * steht in RECHTSTEXT-SEITEN, damit sie an einer Stelle gepflegt wird.
 */

/* ==================================================================
   RECHTSTEXT-SEITEN — der Vorsatz jeder Regel:
   body:is([data-page="privacy"], [data-page="privacy-policy"],
           [data-page="security"], [data-page="terms"],
           [data-page="withdrawal"], [data-page="imprint"],
           [data-page="library"], [data-page="glossary"],
           [data-page="help"], [data-page="connectors"])
   ================================================================== */

/* ------------------------------------------------------------------
   1. Grund und Rhythmus
   ------------------------------------------------------------------ */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]),
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main {
  background: var(--paper);
}

/* Der Abschnittsrhythmus des Konzepts (112 px, unter 760 px 78 px) — premium.css
   setzt fuer body[data-page] .section seinen eigenen (--rhythm-base). */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .section {
  padding: 112px 0;
  position: static;
}
@media (max-width: 760px) {
  body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .section {
    padding: 78px 0;
  }
}

/* Kein Wort wird von selbst getrennt. mobil.css (Ueberschriften unter 768 px)
   und thalassa.css (:lang(de) h1–h3) setzen `hyphens: auto`; seiten.css und
   thalassa.css setzen `overflow-wrap: break-word`, das ohne Strich mitten im
   Wort bricht. Beides hier ausdruecklich zurueckgenommen. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main,
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main :is(h1, h2, h3, p, li, dt, dd, th, td, a, strong, small, span) {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

/* ------------------------------------------------------------------
   2. Der Seitenkopf: Vorzeile, h1 in Konzeptgroesse, ein Satz
   ------------------------------------------------------------------ */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .section-head {
  flex-direction: column;
  align-items: flex-start;
}
/* Konzeptgroesse der Ueberschrift, gegen mobil.css (2.125rem unter 768 px). */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .section-title {
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.02;
  color: var(--ink);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .section-lede {
  color: var(--muted);
}

/* ------------------------------------------------------------------
   3. Der Rechtstext: Spalte, Kleinschrift, Bloecke
   ------------------------------------------------------------------ */
/* DER 72ch-DECKEL IST WEG (20.09.2026, dritte Runde). Er stand hier von
   Anfang an und war typografisch richtig: 72 Zeichen je Zeile sind die
   bequeme Lesebreite, und ich habe zweimal dafuer argumentiert --
   einmal mit dem Seitenindex als Fuellung, einmal mit der Messung
   daneben.

   ARPAD HAT DREIMAL DASSELBE GESAGT: "use the complete width",
   "komplette Breite", "ueberall komplette breite". Er hat die Seite vor
   sich, er hat das Argument gehoert, und es ist seine Marke. Also volle
   Breite -- und dazu Blocksatz, weil eine lange Zeile mit flatterndem
   rechten Rand schlechter aussieht als eine lange Zeile mit geradem.

   WAS DAS KOSTET, damit es jemand weiss: Bei 1240 px und 14 px Schrift
   sind das rund 140 Zeichen je Zeile, gut das Doppelte der Empfehlung.
   Das Auge findet den Zeilenanfang schwerer. Wer es zurueckdrehen will,
   setzt hier `max-width: 72ch` wieder ein -- eine Zeile, und der Test
   dazu steht in test_rechtstexte_gerendert.py mit demselben Datum. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* BLOCKSATZ NUR IM FLIESSTEXT — UND OHNE SILBENTRENNUNG.

   Erst stand hier `hyphens: auto` dabei, mit der Begruendung, Blocksatz
   ohne Trennung reisse im Deutschen Loecher. Das war ein eigener Zusatz,
   und er widersprach einer Anweisung, die schon stand: keine
   automatische Silbentrennung, gesichert in
   test_rechtstexte_gerendert.py (`assertEqual(0, getrennt)`). Arpad hat
   Blocksatz verlangt, nicht Trennung. Der Zusatz ist wieder raus.

   Messbar war er hier ohnehin nicht: im Pruefbehaelter fehlt dem
   Chromium das Trennwoerterbuch, mit und ohne `hyphens: auto` kamen am
   20.09.2026 auf 18 Messstellen identische Wortabstaende heraus, bis auf
   die Nachkommastelle. Was nicht messbar ist, wird nicht behauptet.

   OHNE TRENNUNG GEMESSEN (20.09.2026, Wortkaesten je Zeile, deutsche und
   englische AGB und Datenschutzerklaerung):

     1440 px   groesstes Loch 10,5 bis 13,5 px  = 2,6 bis 3,4 Leerzeichen
      768 px   groesstes Loch 16,3 bis 20,8 px  = 4,1 bis 5,2 Leerzeichen
      390 px   groesstes Loch bis 141 px        = 35 Leerzeichen

   Bis 768 px traegt der Blocksatz. Bei 390 px nicht: die Spalte ist 358
   px, ein deutsches Wort von 30 Zeichen passt nicht mehr daneben, und
   die Zeile davor wird auseinandergezogen, bis ein Loch quer durch den
   Absatz steht. Deshalb endet der Blocksatz an derselben Grenze wie der
   Telefonumbruch: darunter linksbuendig, mit ruhigem Flattersatz.

   Ueberschriften bleiben ueberall linksbuendig. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(p, li, dd) {
  text-align: left;
}
@media (min-width: 761px) {
  body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(p, li, dd) {
    text-align: justify;
  }
}
/* Ein Block, ein Thema — getrennt durch --line und 32 px (Auftrag). Der
   lib-pack der Bibliothek ist selbst ein Block (Test haelt seine Klasse). */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext > * + * {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .lib-pack {
  margin-bottom: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Absatzueberschriften: fett, --ink, 17/15 px. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext h3 {
  margin: 18px 0 5px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(h2, h3):first-child {
  margin-top: 0;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .eyebrow + h2 {
  margin-top: 0;
}
/* Sprungziele (help, glossary, terms) landen unter der klebenden Kopfzeile. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext [id] {
  scroll-margin-top: 96px;
}

/* Absaetze: Abstand statt Einzug; Fettes im Satz in --ink. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext p {
  max-width: none;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(p, ul, ol, dl, table, .sheet, .rechtstext__rollen):last-child {
  margin-bottom: 0;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext strong {
  font-weight: 800;
  color: var(--ink);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext code {
  font-size: 13px;
}

/* Listen: Aufzaehlungen mit Zeichen; Datenfluss (.rechtstext__ablauf) und
   Bestandszeilen (.lib-pack) als Definitionszeilen — fett : normal. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(ul, ol) {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext li {
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  font-size: 14px;
  color: var(--ink-2);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext li p {
  margin: 0;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(.rechtstext__ablauf, .lib-pack ul) {
  list-style: none;
  padding-left: 0;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(.rechtstext__ablauf, .lib-pack ul) li {
  margin-bottom: 8px;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .lib-pack h3 {
  margin-top: 0;
}

/* Glossar: Begriff fett, Erklaerung normal, ein Absatz je Begriff. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext dl {
  margin: 0;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext dt {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* Links im Text: .text-link des Konzepts, im Satz als inline. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .text-link {
  display: inline;
  font-size: inherit;
  background-size: 0 0;
}
/* Der AVV-Download bleibt der Knopf des Konzepts (btn btn--primary). */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .btn {
  margin: 4px 0 14px;
}

/* Die legal-note war ein eingerueckter Kasten mit gruener Kante (landing.css,
   thalassa.css) — hier ein Absatz wie jeder andere. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .legal-note {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------
   4. Tabellen: Tabellen bleiben Tabellen — im Rollbehaelter, Kopfzeile
      fett, 14 px, keine Kartenoptik.
   ------------------------------------------------------------------ */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(.rechtstext__rollen, .sheet__scroll) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 14px;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .sheet {
  margin: 0 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .rechtstext__rollen table {
  display: table;
  width: 100%;
  min-width: 0;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext table {
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(th, td) {
  padding: 8px 10px 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  color: var(--ink-2);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext :is(thead th, tbody th[scope="row"]) {
  font-weight: 800;
  color: var(--ink);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext thead th {
  border-bottom: 1px solid var(--ink);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext tbody tr:is(:nth-child(even), :hover) {
  background: transparent;
}
/* Unter 760 px stapelt das Blatt (landing.css) seine Zeilen; die Spalten-
   beschriftung vor dem Wert traegt dann Tinte statt Gruen. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .sheet tbody td[data-label]::before {
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
@media (max-width: 760px) {
  body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .sheet tbody tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext .sheet :is(th, td) {
    padding: 0;
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------------
   5. Seitenbesonderheiten
   ------------------------------------------------------------------ */
/* Glossar: premium.css setzt jedem Begriff einen Trennstrich und die
   Klammerangabe in Monospace. Hier: Begriff fett, Erklaerung normal, die
   Klammer kursiv in der Laufschrift — ein Absatz je Begriff. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext dt[id] {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
  scroll-margin-top: 96px;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext dt em {
  margin-left: 0;
  font-family: inherit;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext dd {
  max-width: none;
}

/* Eine Adresse bricht nicht: E-Mail und Telefon bleiben ein Wort (sonst
   trennt der Browser „thalassa-consulting" am Bindestrich). Bei 390 px
   passen beide in die Zeile — gemessen, 800er Inter, 14 px. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="withdrawal"], [data-page="imprint"], [data-page="library"], [data-page="glossary"], [data-page="help"], [data-page="connectors"]) main .rechtstext a:is([href^="mailto:"], [href^="tel:"]) {
  white-space: nowrap;
}

/* privacy: Die gezeichnete Overlay-Vorschau der Altschicht (.product-shot,
   .mock, .overlay-card) ist am 12.09.2026 auf Arpads Entscheidung entfernt
   worden - Altdesign, ihre fuenf Zeilen waren Bildunterschriften, kein
   Datenschutztext. Keine Regel mehr noetig. */


/* ============================================================
   VERTRAUENSSEITE: FADEN, AUFKLAPPER, GLASWAND (Auftrag 4.9, 19.09.2026)
   ============================================================

   SEIT DEM 20.09.2026 AUF VIER SEITEN (F.1/F.2): privacy, privacy-policy,
   security und terms. Der Faden war fuer die Vertrauensseite gebaut; die
   anderen drei hatten dasselbe Problem und keine Loesung -- eine 648 px
   schmale Spalte, links buendig in einem 1240er Band, mit 590 px Leere
   daneben. Arpad hat die Breite eingefordert, und der Faden fuellt sie
   mit Navigation statt mit laengeren Zeilen: Die Zeilenlaenge bleibt bei
   72ch, was dazukommt, ist ein Inhaltsverzeichnis.

   OHNE AUFKLAPPER auf den drei neuen Seiten. Ein Rechtstext darf nicht
   die Haelfte seiner Abschnitte hinter einem Knopf haben -- auf privacy
   ist der Aufklapper eine Erzaehlform, in einer Datenschutzerklaerung
   waere er eine Zumutung. `data-weitere-schalter` steht dort schlicht
   nicht im Markup, und faden.js ueberspringt den Teil von selbst.

   Frueher NUR body[data-page="privacy"]. Die uebrigen neun Rechtsseiten teilen
   sich diese Datei und sollen von hier nichts abbekommen.

   OHNE SKRIPT IST NICHTS DAVON DA. Der Wirt traegt `data-faden-bereit`
   erst, wenn js/faden.js gelaufen ist; bis dahin steht die Seite im
   gewohnten einspaltigen Satz, alle acht Abschnitte offen, und weder
   Faden noch Aufklapper sind sichtbar. Ein Faden ohne Beobachter zeigt
   nichts an, und ein Knopf, der nichts zuklappt, behauptet etwas
   Falsches. Das ist keine Feinheit: Diese Seite erklaert, was mit den
   Daten geschieht.

   Der Faden liegt in Spalte eins und laeuft ueber alle Zeilen; die
   Punktliste darin klebt (`position: sticky`). Gesteckt wird nicht die
   <nav>, sondern ihre <ol> -- eine klebende Zelle, die alle Zeilen
   ueberspannt, hat keinen Weg zu kleben. */
/* `grid-row: 1 / -1` BRAUCHT AUSDRUECKLICHE ZEILEN (Befund 20.09.2026).
   Arpad: "inhaltverzeichnis ist nicht fixiert, beim nach unten scrollen
   es bewegt sich nach oben" -- und gleichzeitig "es faengt zu weit unten
   an". Zwei Klagen, EINE Ursache.

   `-1` zeigt auf die letzte Linie des AUSDRUECKLICHEN Rasters. Hier
   stand keine einzige Zeile in `grid-template-rows`, also war die letzte
   ausdrueckliche Linie zugleich die erste, und `1 / -1` fiel auf `1 / 1`
   zurueck: eine Zeile statt aller. GEMESSEN auf privacy-policy.html bei
   1440 px:

     Faden       oben 425, hoch  368   (statt 5530, der vollen Hoehe)
     ol          hoch  362, sticky, top 108px
     -> 6 px Weg zum Kleben. Deshalb scheint er mitzulaufen.

   Dieselbe Zeile eins war damit so hoch wie der Faden, und der erste
   Block -- eine einzige Zeile Text -- wurde auf 368 px gestreckt. Das
   ist die Luecke vor "1. Controller": der Block begann bei 826 statt
   bei 470.

   40 Zeilen sind die Loesung, nicht 10: `repeat(40, auto)` macht die
   Linien ausdruecklich, damit `-1` wieder das Ende meint. Die laengste
   Seite (terms.html) hat 16 Bloecke plus Faden und Aufklapper; leere
   `auto`-Zeilen sind 0 px hoch und `row-gap: 0` haelt sie auch dann
   kostenlos, wenn spaeter jemand einen Zeilenabstand setzt. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: repeat(40, auto);
  column-gap: 26px;
  row-gap: 0;
}
/* Ein Block ist so hoch wie sein Text, nicht so hoch wie seine Zeile.
   Ohne das streckt das Raster jeden Block auf die Zeilenhoehe -- was
   nichts tut, solange nichts anderes die Zeile aufblaeht, und genau
   deshalb faellt es erst auf, wenn es zu spaet ist. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] > :not(.rechtstext__faden) {
  align-self: start;
}
/* DER FADEN IST DIE AUSNAHME, und zwar genau deshalb, weil er als
   einziger ueber alle Zeilen laeuft: `align-self: start` haette ihm die
   Hoehe wieder genommen, die er gerade erst bekommen hat. GEMESSEN im
   Zwischenschritt: Luecke weg (Block eins 368 -> 22 px), Faden aber
   weiter 368 statt 5184 -- die Regel darueber hatte ihn mitgenommen. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] .rechtstext__faden {
  align-self: stretch;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] > * { grid-column: 2; }
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden { display: none; }
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] .rechtstext__faden {
  display: block;
  grid-column: 1;
  grid-row: 1 / -1;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden ol {
  position: sticky;
  top: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 6px 0 0;
  padding: 14px 0;
  list-style: none;
}
/* Die Linie hinter den Punkten: ein Strich, kein Bauteil. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden ol::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden li { position: relative; }
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__punkt {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__punkt[aria-current="true"] {
  border-color: var(--emerald-dark, #0b684e);
  background: var(--emerald-dark, #0b684e);
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__punkt:focus-visible {
  outline: 2px solid var(--focus-ring, #047857);
  outline-offset: 2px;
}

/* `display: block` OBEN SCHLAEGT `[hidden]`. Dieselbe Falle wie bei den
   Klappkarten der Startseite: Das Vorgabeblatt des Browsers sagt
   `[hidden] { display: none }` mit einer schwaecheren Auswahl, und
   faden.js setzt genau dieses Attribut an den Punkten ab dem vierten
   Abschnitt. Gemessen am 19.09.2026: acht sichtbare Punkte statt drei,
   fuenf davon Knoepfe auf zugeklappte Bloecke -- tote Knoepfe.

   Zwei Regeln, weil eine nicht reicht: Die erste nimmt dem Punkt die
   Flaeche, die zweite auch seinen Platz in der Liste (sonst laeuft die
   Linie 70 px ins Leere weiter). `:has()` kennt nicht jeder Browser;
   faellt es aus, ist der Punkt weg und nur der Abstand bleibt -- der
   Faden zeigt dann zu viel Linie, aber keinen toten Knopf. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__punkt[hidden] { display: none; }
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden li:has(> [hidden]) { display: none; }

/* Der Aufklapper. Ohne Skript unsichtbar (siehe oben), mit Skript ein
   gewoehnlicher Textknopf in der Form der .text-link des Konzepts. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__weitere { display: none; }
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] .rechtstext__weitere {
  display: inline-flex;
  align-items: center;
  margin: 8px 0 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__weitere:focus-visible {
  outline: 2px solid var(--focus-ring, #047857);
  outline-offset: 3px;
}

/* GLASWAND (4.9). Der Auftrag sagt „dunkles Glas auf dunkelgruenem
   Grund"; diese Seite ist aber hell. Helle Schrift auf
   rgba(255,255,255,.07) waere hier unsichtbar -- deshalb bekommt der
   TRAEGER den dunklen Verlauf, und die Karten sitzen als Glas darauf.
   Die Rechtstextseite selbst wird nicht umgefaerbt. */
body[data-page="privacy"] main .rechtstext .glaswand {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 22px;
  border-radius: 18px;
  background: var(--gradient-sea);
}
/* EINE LANGE KACHEL NEBEN DREI KURZEN (21.09.2026, Weisung Arpad).
   Im Abschnitt „Was wir nie behalten" stehen vier Kacheln: drei mit je
   zwei Zeilen und eine mit zwei Absaetzen (die Unterlagen samt
   MCP-Hinweis). `auto-fit` setzt sie nebeneinander, das Raster macht alle
   Zeilen so hoch wie die hoechste Kachel — drei Kaesten mit zwei Zeilen
   Text und einem halben Bildschirm Luft darunter.

   Ab 901 px stehen die drei kurzen deshalb UNTEREINANDER in der ersten
   Spalte, die lange nimmt die zweite ueber alle drei Zeilen. Die Regel
   greift ueber `:last-child`, nicht ueber `:nth-child(4)`: Kommt eine
   Kachel dazu, wandert die Spanne mit statt eine falsche Kachel zu
   treffen — und `grid-row: 1 / -1` waere hier falsch, weil die implizite
   letzte Linie mit der Zahl der Kacheln wandert.

   Darunter bleibt es bei einer Spalte: dieselbe Schwelle wie beim
   Faden-Layout weiter unten. */
@media (min-width: 901px) {
  body[data-page="privacy"] main .rechtstext .glaswand--lang {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  body[data-page="privacy"] main .rechtstext .glaswand--lang > :last-child {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}
body[data-page="privacy"] main .rechtstext .glaskachel {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
body[data-page="privacy"] main .rechtstext .glaskachel h3 {
  margin: 0 0 8px;
  color: var(--white, #fff);
}
body[data-page="privacy"] main .rechtstext .glaskachel p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .86);
}
body[data-page="privacy"] main .rechtstext .glaskachel p:last-child { margin-bottom: 0; }
body[data-page="privacy"] main .rechtstext .glaskachel a { color: var(--white, #fff); }

/* Unter 900 px gibt es keinen Platz fuer eine eigene Spalte, und ein
   Faden, der unter dem Text steht, fuehrt nirgendwohin. */
@media (max-width: 900px) {
  body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] {
    display: block;
  }
  body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] .rechtstext__faden {
    display: none;
  }
}

/* ============================================================
   A.3: DIE VIER BREITEN SEITEN (Auftrag F, 19.09.2026)
   ============================================================

   Privacy, Security, Library und Glossary nutzen die verfuegbare Breite
   besser. Der Auftrag sagt: uebermaessiges linkes Padding reduzieren,
   Kante am Logo ausrichten, lesbare Zeilenlaengen behalten.

   GEMESSEN, nicht geschaetzt: `.narrow` ist 780 px breit und zentriert,
   der Kopf ist 1240 px + 32 px Innenabstand. Bei 1440 px beginnt das Logo
   also bei 100 px und der Text bei 330 px -- 230 px Luft, die wie ein
   Einzug aussieht. Mit derselben Formel wie `.container` beginnen beide
   bei 100 px.

   DIE ZEILENLAENGE AENDERT SICH DABEI NICHT: `.rechtstext` bleibt bei
   72ch. Breiter wird die SPALTE, nicht der Satz -- sonst waere aus einer
   Ausrichtungskorrektur eine Lesbarkeitsverschlechterung geworden. Was
   die Breite wirklich braucht, holt es sich selbst. */
/* ZWEI SEITEN DAZU (20.09.2026, F.1/F.2). privacy-policy und terms
   sassen weiter im 780er Band -- gemessen bei 1440 px: Textspalte 648 px,
   Beginn bei 330 px, waehrend das Logo bei 100 px anfaengt. Arpad: "use
   the complete width. now it is only a fraction of the width we use."
   Dieselbe Formel wie oben; die Zeilenlaenge bleibt bei 72ch. Was die
   Breite fuellt, ist der Faden links -- siehe den Abschnitt darueber. */
/* DIE LETZTEN VIER (20.09.2026). Arpad: "ueberall komplette breite".
   GEMESSEN bei 1440 px, alle neun Seiten mit `.rechtstext`: sechs standen
   schon auf 1240, vier weiter auf 780 mit Textbeginn bei 330 px --
   connectors, help, imprint, withdrawal. Nebeneinander im Menue war das
   der Bruch, den er zweimal als Uneinheitlichkeit gemeldet hat. Es ist
   dieselbe Formel, kein neuer Wert. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"], [data-page="library"], [data-page="glossary"], [data-page="connectors"], [data-page="help"], [data-page="imprint"], [data-page="withdrawal"]) main .narrow {
  width: min(calc(100% - 40px), var(--container-max, 1240px));
}

/* DIE GLASWAND BLEIBT IN DER SPALTE. Erst stand hier eine Regel, die sie
   auf 980 px setzte -- gemessen kam dabei ein Kind heraus, das seinen
   Elternkasten (72ch = 636 px) nach rechts ueberragt, weil `max-width`
   am Elternteil ein breiteres Kind nicht beschneidet. Das haette bei
   jeder kuenftigen Breitenaenderung einen Querlauf riskiert, und gewonnen
   waere eine dritte Kartenspalte gewesen. Vier Karten in zwei Spalten
   sind kein Mangel. */

/* DER FADEN UND SEIN KNOPF SIND KEINE BLOECKE. Der Abschnittsrhythmus
   oben (`.rechtstext > * + *`) setzt Trennstrich, 32 px Abstand und
   32 px Innenabstand zwischen je zwei Kindern. Seit der Faden als erstes
   Kind davorsteht, traefe das den ersten Abschnitt, der vorher keinen
   Strich hatte -- und den Aufklapper gleich mit, was zwei Striche dicht
   uebereinander ergaebe. Der Strich ueber Block vier bleibt. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext > .rechtstext__faden,
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext > .rechtstext__faden + *,
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext > .rechtstext__weitere {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] > .rechtstext__weitere {
  margin: 8px 0 26px;
}


/* ============================================================
   DER SEITENINDEX (20.09.2026, F.1/F.2)
   ============================================================

   Auf privacy.html ist der Faden eine Punktreihe: acht Abschnitte, eine
   Erzaehlung, die man ohnehin von oben nach unten liest. Auf
   security.html (12 Abschnitte), privacy-policy.html (9) und terms.html
   (15) liest niemand von oben nach unten -- dort sucht man einen
   Abschnitt. Ein Punkt ohne Beschriftung hilft dabei nicht.

   Deshalb dieselbe Mechanik, andere Gestalt: Die Knoepfe tragen ihren
   Titel, die Spalte ist 260 px statt 18. `faden.js` merkt davon nichts --
   es setzt `aria-current` und rollt, mehr tut es nie.

   GEMESSEN, warum 260 px: Das Band ist 1240 px, die Textspalte bleibt
   bei 72ch (648 px). 260 + 26 Spalte plus Abstand lassen 306 px Rest --
   genug, dass der Satz nicht am rechten Rand klebt, und die Seite nutzt
   die Breite, ohne dass eine Zeile laenger wird. */
/* `max-width: none` IST HIER DER PUNKT. Die gemeinsame Regel deckelt
   `.rechtstext` auf 72ch -- das war richtig, solange der Kasten NUR den
   Text enthielt. Mit dem Index als erster Spalte deckelt es beide
   zusammen: gemessen blieben dem Satz 348 px von 648. Der Deckel wandert
   deshalb von der Grid-Flaeche auf die Textspalte, wo er hingehoert.
   Gemessen danach 260 + 40 + 648 = 948 von 1240 px. */
body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] {
  max-width: none;
  /* `1fr` statt `72ch`: Der Satz nimmt, was der Index uebriglaesst --
     980 px von 1240 bei 1440 px Fenster. Siehe die Entscheidung oben. */
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  column-gap: 40px;
}
body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden--index ol {
  align-items: stretch;
  gap: 2px;
  padding: 0;
}
/* Die Linie der Punktreihe gehoert zum Faden, nicht zum Index. */
body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden--index ol::before {
  content: none;
}
body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden--index .rechtstext__punkt {
  width: 100%;
  height: auto;
  padding: 7px 10px 7px 13px;
  border: 0;
  border-left: 2px solid var(--border, #dfe6e2);
  border-radius: 0;
  background: none;
  color: var(--text-muted, #586861);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden--index .rechtstext__punkt:hover {
  color: var(--text-heading, #071b17);
}
body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden--index .rechtstext__punkt[aria-current="true"] {
  border-left-color: var(--emerald-dark, #067a58);
  color: var(--text-heading, #071b17);
  font-weight: var(--fw-semibold, 600);
  transform: none;
}

/* AUF DEM TELEFON STEHT DER INDEX OBEN, nicht links: Eine 260-px-Spalte
   neben 604 px Text gibt es dort nicht. Er bleibt lesbar und wird zur
   Sprungliste ueber dem Text. */
@media (max-width: 900px) {
  body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] {
    grid-template-columns: minmax(0, 1fr);
  }
  body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext[data-faden-bereit] .rechtstext__faden--index {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 26px;
  }
  body:is([data-page="privacy-policy"], [data-page="security"], [data-page="terms"]) main .rechtstext__faden--index ol {
    position: static;
    top: auto;
  }
}

/* Design-Umsetzung 21.09.2026: eine lesbare Satzbreite, identisch in DE/EN.
   Die Inhalte bleiben wortgleich; Nummern, Listen und Belege erhalten
   lediglich eine eindeutige visuelle Hierarchie. */
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"]) main .rechtstext {
  font-size: 15px;
  line-height: 1.65;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"]) main .rechtstext :is(p, li, dd) {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
}
body:is([data-page="privacy"], [data-page="privacy-policy"], [data-page="security"]) main .section .rechtstext .rechtstext__block p {
  max-width: 68ch;
}
body:is([data-page="privacy-policy"], [data-page="security"]) main .rechtstext > .rechtstext__block {
  max-width: 68ch;
}
body:is([data-page="privacy-policy"], [data-page="security"]) main .rechtstext h2 {
  margin-bottom: 18px;
  font-size: 22px;
  line-height: 1.35;
}
body[data-page="privacy-policy"] main .rechtstext h3 {
  margin-top: 36px;
  margin-bottom: 14px;
  font-size: 18px;
  line-height: 1.4;
}
body[data-page="privacy-policy"] main .rechtstext .rechtstext__kernaussage {
  padding: 14px 18px;
  border-left: 3px solid var(--brand-dark);
  background: var(--surface-muted);
}
body:is([data-page="privacy-policy"], [data-page="security"]) main .rechtstext strong {
  font-weight: 700;
}

/* Eine dunkle Flaeche, ruhige Trennlinien statt Karten in Karten. */
body[data-page="privacy"] main .rechtstext .glaswand {
  gap: 0;
  padding: 28px;
  background: var(--surface-inverse);
}
body[data-page="privacy"] main .rechtstext .glaswand--geteilt {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-page="privacy"] main .rechtstext .glaswand .glaskachel {
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-page="privacy"] main .rechtstext .glaswand--geteilt .glaskachel + .glaskachel {
  border-left: 1px solid var(--text-on-dark-muted);
}
body[data-page="privacy"] main .rechtstext .glaswand .glaskachel p,
body[data-page="privacy"] main .rechtstext .glaswand .glaskachel p strong {
  color: var(--text-on-dark-muted);
}
body[data-page="privacy"] main .rechtstext .glaswand .glaskachel h3 {
  color: var(--text-on-dark);
}
body[data-page="privacy"] main .rechtstext .rechtstext__connector {
  margin-top: 26px;
  padding: 24px 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-muted);
}
body[data-page="privacy"] main .rechtstext .rechtstext__connector h3 {
  margin-top: 0;
}

/* Der Zaehler ist ein Attribut: faden.js darf den bestehenden Text des
   Controls weiterhin umschalten, ohne Badge oder Chevron zu entfernen. */
body[data-page="privacy"] main .rechtstext[data-faden-bereit] > .rechtstext__weitere {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 28px 0;
  padding: 10px 18px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-body);
  text-decoration: none;
}
body[data-page="privacy"] main .rechtstext__weitere::before {
  content: attr(data-section-count);
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-variant-numeric: tabular-nums;
}
body[data-page="privacy"] main .rechtstext__weitere::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
body[data-page="privacy"] main .rechtstext__weitere[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}
body[data-page="privacy"] main .rechtstext__weitere:hover {
  background: var(--surface-muted);
}

/* Architektur: ausschliesslich bereits vorhandene Orts-/Anbieterlabels.
   Der Verantwortungsbereich liegt separat unter dem technischen Weg. */
body[data-page="privacy"] main .rechtstext__architektur {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-muted);
}
body[data-page="privacy"] main .rechtstext__architektur-weg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
body[data-page="privacy"] main .rechtstext__architektur-weg span {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-body);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
body[data-page="privacy"] main .rechtstext__architektur-weg span + span::before {
  content: "→";
  position: absolute;
  left: -24px;
  width: 20px;
  color: var(--brand-dark);
  font-size: 20px;
}
body[data-page="privacy"] main .rechtstext__architektur-weg small {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}
body[data-page="privacy"] main .rechtstext__architektur-verantwortung {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  text-align: center;
  font-size: 14px;
}

/* Bereits vorhandene Signatur-, Regions- und Kontaktangaben am Anfang. */
body[data-page="security"] main .rechtstext__vertrauen {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0 28px;
  margin: 0 0 40px;
  padding: 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-muted);
}
body[data-page="security"] main .rechtstext__vertrauen-signatur {
  grid-row: span 2;
  padding-right: 28px;
  border-right: 1px solid var(--border-default);
}
body[data-page="security"] main .rechtstext__vertrauen-region {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
}
body[data-page="security"] main .rechtstext__vertrauen-kontakt {
  padding-top: 16px;
}
body[data-page="security"] main .rechtstext__vertrauen p {
  max-width: 68ch;
  margin: 0 0 12px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
}
body[data-page="security"] main .rechtstext__vertrauen p:last-child {
  margin-bottom: 0;
}
body[data-page="security"] main .rechtstext__vertrauen strong {
  color: var(--text-heading);
  font-weight: 700;
}
body[data-page="security"] main .rechtstext__vertrauen .rechtstext__mail {
  display: inline-block;
  max-width: 100%;
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-control);
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--text-body);
  font-size: 13px;
  overflow-wrap: anywhere;
}
body[data-page="security"] main .rechtstext .rechtstext__check {
  margin: 20px 0;
  padding: 22px;
  border: 1px solid var(--border-control);
  border-left: 4px solid var(--brand-dark);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
body[data-page="security"] main .rechtstext .rechtstext__check :is(code, a[href="/latest.json"]) {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--surface-card);
  color: var(--text-body);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  overflow-wrap: normal;
}
body[data-page="security"] main .rechtstext .rechtstext__permissions {
  padding: 0;
  margin: 18px 0 24px;
  list-style: none;
}
body[data-page="security"] main .rechtstext .rechtstext__permissions li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-default);
}
body[data-page="security"] main .rechtstext__permissions svg {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--brand-dark);
}
@media (max-width: 760px) {
  body[data-page="privacy"] main .rechtstext .glaswand--geteilt {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-page="privacy"] main .rechtstext .glaswand--geteilt .glaskachel + .glaskachel {
    border-left: 0;
    border-top: 1px solid var(--text-on-dark-muted);
  }
  body[data-page="privacy"] main .rechtstext .glaswand,
  body[data-page="privacy"] main .rechtstext .rechtstext__connector,
  body[data-page="privacy"] main .rechtstext__architektur {
    padding: 20px;
  }
  body[data-page="privacy"] main .rechtstext__architektur-weg {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  body[data-page="privacy"] main .rechtstext__architektur-weg span + span::before {
    content: "↓";
    top: -28px;
    left: calc(50% - 10px);
  }
  body[data-page="security"] main .rechtstext__vertrauen {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }
  body[data-page="security"] main .rechtstext__vertrauen-signatur {
    grid-row: auto;
    margin-bottom: 18px;
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }
}

/* Sechs Datenschutz-Zusagen: Breitenanimation bleibt auf jeder Groesse horizontal. */
/* Der erste Abschnitt beginnt direkt unter der Navigationsleiste. */
body[data-page="privacy"] main > .section:has(.how) {
  padding-top: 0;
}
body[data-page="privacy"] main .rechtstext .how {
  --acc-spine: 88px;
  --acc-gap: 10px;
  --acc-open-min: 640px;
  --acc-height: 340px;
  min-width: 0;
  padding: 36px 32px 24px;
  border: 0;
  border-radius: 28px;
  background: #060A08;
  color: #F2F4F0;
}
body[data-page="privacy"] main .how .section-head {
  display: block;
  margin: 0 0 28px;
  text-align: center;
}
body[data-page="privacy"] main .how .eyebrow {
  justify-content: center;
  color: #4ADE80;
}
body[data-page="privacy"] main .how .section-title {
  max-width: 860px;
  margin: 16px auto;
  color: #F2F4F0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  text-align: center;
}
body[data-page="privacy"] main .rechtstext .how :is(.how-intro, .section-lede) {
  max-width: 620px;
  margin: 14px auto 0;
  color: #9AA39D;
  font-size: 15.5px;
  line-height: 1.65;
  text-align: center;
}
body[data-page="privacy"] .how .acc-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #5C665F #060A08;
  padding-bottom: 12px;
}
body[data-page="privacy"] .how .acc {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--acc-gap);
  width: 100%;
  min-width: calc(var(--acc-open-min) + 5 * var(--acc-spine) + 5 * var(--acc-gap));
  min-height: var(--acc-height);
  transition: min-width .6s cubic-bezier(.65,.05,0,1);
}
/* Die Scrollbreite folgt den Karten, damit mobile Vorschauen nicht am Ende springen. */
body[data-page="privacy"] .how .acc:not(:has(.is-open)) {
  min-width: calc(6 * var(--acc-spine) + 5 * var(--acc-gap));
}
body[data-page="privacy"] .how .acc-item {
  position: relative;
  flex: 0 0 var(--acc-spine);
  min-width: var(--acc-spine);
  min-height: var(--acc-height);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 22px 22px, #0C1210;
  cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.65,.05,0,1), border-color .2s ease;
}
body[data-page="privacy"] .how .acc-item.is-open {
  flex-grow: 6;
  cursor: default;
}
/* Ohne offene Karte nutzt jede Vorschau ein Sechstel der gesamten Zeile. */
body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-item {
  flex-grow: 1;
}
body[data-page="privacy"] .how .acc-num {
  position: absolute;
  top: 18px;
  left: 12px;
  z-index: 1;
  color: #5C665F;
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  user-select: none;
}
body[data-page="privacy"] .how .is-open .acc-num {
  left: 28px;
}
body[data-page="privacy"] .how .acc-trigger {
  position: absolute;
  top: 22px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background: transparent;
  color: #9AA39D;
  cursor: pointer;
  user-select: none;
}
body[data-page="privacy"] .how .is-open .acc-trigger {
  right: 24px;
}
body[data-page="privacy"] .how .acc-plus {
  font-size: 21px;
  line-height: 1;
  transition: transform .2s ease;
}
body[data-page="privacy"] .how .is-open .acc-plus {
  transform: rotate(45deg);
}
body[data-page="privacy"] .how :is(.acc-trigger, .acc-scroll):focus-visible {
  outline: 2px solid #4ADE80;
  outline-offset: -2px;
}
body[data-page="privacy"] .how .acc-item:focus-within {
  border-color: rgba(74,222,128,.35);
}
body[data-page="privacy"] .how .acc-spine {
  position: absolute;
  inset: 86px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  user-select: none;
  transition: opacity .18s ease .3s;
}
body[data-page="privacy"] .how .is-open .acc-spine {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
body[data-page="privacy"] .how .acc-spine-title {
  writing-mode: horizontal-tb;
  color: #F2F4F0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  hyphens: auto;
}
body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-spine {
  align-items: flex-start;
}
/* Erst beim Oeffnen werden die uebrigen Karten wieder zu vertikalen Leisten. */
body[data-page="privacy"] .how .acc:has(.is-open) .acc-spine-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}
body[data-page="privacy"] .how .acc-spine-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(74,222,128,.22);
  border-radius: 14px;
  background: rgba(74,222,128,.12);
  color: #F2F4F0;
}
body[data-page="privacy"] .how .acc-spine-icon svg {
  width: 24px;
  height: 24px;
}
/* Geschlossene Inhalte beeinflussen die Hoehe nicht; offene Texte duerfen wachsen. */
body[data-page="privacy"] .how .acc-expanded {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  min-width: calc(var(--acc-open-min) - 2px);
  min-height: calc(var(--acc-height) - 2px);
  padding: 64px 28px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility 0s .15s;
}
body[data-page="privacy"] .how .is-open .acc-expanded {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease .3s, visibility 0s;
}
/* h2 SEIT DEM 22.09.2026, vorher h3. Die sechs Stationen folgen direkt
   auf die h1 der Seite; als h3 sprang die Gliederung eine Ebene
   (tests/test_website_seo.py). Der Selektor nimmt beide Ebenen, damit
   das Aussehen sich nicht aendert -- er schlaegt die allgemeine
   h2-Regel der Rechtstexte ueber die Spezifitaet (0,4,3 gegen 0,2,3). */
body[data-page="privacy"] main .rechtstext .how .acc-copy :is(h2, h3) {
  margin: 0;
  color: #F2F4F0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: left;
  overflow-wrap: anywhere;
  hyphens: auto;
}
body[data-page="privacy"] main .rechtstext .how .acc-subline {
  max-width: 380px;
  margin: 16px 0;
  color: #4ADE80;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  hyphens: auto;
}
body[data-page="privacy"] main .rechtstext .how .acc-body {
  max-width: 380px;
  margin: 0;
  color: #9AA39D;
  font-size: 15.5px;
  line-height: 1.65;
  text-align: left;
  overflow-wrap: anywhere;
  hyphens: auto;
}
body[data-page="privacy"] .how .acc-panel {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 0;
  min-height: 240px;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 55%, rgba(74,222,128,.30), transparent 72%);
}
body[data-page="privacy"] .how .acc-panel-label {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border: 1px solid rgba(74,222,128,.2);
  border-radius: 999px;
  background: rgba(74,222,128,.08);
  color: #4ADE80;
  font-size: 10.5px;
  line-height: 1.4;
  text-align: center;
}
body[data-page="privacy"] .how .acc-glass {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(74,222,128,.28);
  border-radius: 22px;
  background: rgba(12,18,16,.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(74,222,128,.08), inset 0 1px rgba(255,255,255,.06);
  color: #F2F4F0;
}
body[data-page="privacy"] .how .acc-glass svg {
  width: 40px;
  height: 40px;
}
/* Die geschlossene Vorschau zeigt dasselbe Fachsymbol als beleuchtete Icon-Flaeche. */
@media (min-width: 561px) {
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-spine {
    inset: 70px 12px 20px;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
  }
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-spine-icon {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-color: rgba(255,255,255,.08);
    border-radius: 16px;
    background:
      radial-gradient(ellipse at 10% 90%, rgba(74,222,128,.24), transparent 72%),
      linear-gradient(145deg, rgba(255,255,255,.025), transparent 55%),
      #0C1210;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
  }
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-spine-icon svg {
    width: 44px;
    height: 44px;
  }
}
@media (hover: hover) {
  body[data-page="privacy"] .how .acc-item:not(.is-open):hover {
    border-color: rgba(74,222,128,.35);
  }
}
@media (max-width: 1279px) {
  body[data-page="privacy"] main .rechtstext .how {
    --acc-spine: 56px;
    --acc-gap: 8px;
    --acc-open-min: 400px;
    padding: 36px 24px 24px;
  }
  body[data-page="privacy"] .how .acc-num {
    top: 20px;
    left: 12px;
    font-size: 24px;
  }
  body[data-page="privacy"] .how .acc-trigger {
    top: 60px;
    right: calc(50% - 14px);
  }
  body[data-page="privacy"] .how .is-open .acc-trigger {
    top: 22px;
  }
  body[data-page="privacy"] .how .acc-spine {
    inset: 108px 8px 20px;
  }
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-spine-title {
    font-size: 16px;
  }
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-trigger {
    top: 22px;
    right: 10px;
  }
  body[data-page="privacy"] .how .acc-spine-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  body[data-page="privacy"] .how .acc-expanded {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 24px;
    padding: 72px 24px 24px;
  }
  body[data-page="privacy"] .how .acc-panel {
    min-height: 180px;
  }
}
@media (max-width: 960px) {
  body[data-page="privacy"] main .rechtstext .how {
    --acc-spine: 52px;
    --acc-gap: 6px;
    --acc-open-min: 320px;
    padding-inline: 20px;
  }
  body[data-page="privacy"] .how .acc-spine {
    inset-inline: 6px;
  }
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-num {
    left: 10px;
    font-size: 20px;
  }
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-trigger {
    top: 20px;
    right: 8px;
    width: 24px;
    height: 24px;
  }
}
@media (min-width: 561px) and (max-width: 960px) {
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-spine-icon svg {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 560px) {
  body[data-page="privacy"] main .rechtstext .how {
    --acc-spine: 48px;
    --acc-open-min: 260px;
    padding: 28px 10px 16px;
    border-radius: 22px;
  }
  body[data-page="privacy"] main .how .section-head {
    padding-inline: 10px;
    margin-bottom: 28px;
  }
  body[data-page="privacy"] main .how .section-title {
    font-size: 32px;
  }
  body[data-page="privacy"] .how .acc-num {
    left: 10px;
    font-size: 20px;
  }
  body[data-page="privacy"] .how .is-open .acc-num {
    left: 18px;
  }
  body[data-page="privacy"] .how .acc-spine {
    inset-inline: 4px;
  }
  body[data-page="privacy"] .how .acc-spine-title {
    display: none;
  }
  body[data-page="privacy"] .how .acc-spine-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
  body[data-page="privacy"] .how .acc-spine-icon svg {
    width: 22px;
    height: 22px;
  }
  body[data-page="privacy"] .how .acc-item:not(.is-open) .acc-trigger {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  body[data-page="privacy"] .how .acc-item:not(.is-open) .acc-plus {
    display: none;
  }
  body[data-page="privacy"] .how .is-open .acc-trigger {
    top: 16px;
    right: 16px;
  }
  body[data-page="privacy"] .how .acc-expanded {
    gap: 20px;
    padding: 64px 18px 18px;
  }
  body[data-page="privacy"] .how .acc-panel {
    min-height: 160px;
  }
}
/* KEIN WORT MITTEN GEBROCHEN (22.09.2026). Die Titel der sechs Spalten
   trugen `overflow-wrap: anywhere` und `hyphens: auto`. Wo das
   Woerterbuch fehlt (Chromium unter Linux, und damit die CI), bricht
   `anywhere` mitten im Wort und ohne Strich: gemessen „Live transcriptio|n"
   bei 800 px, „Antwortgeneri|erung" und „Wissensdaten|bank" bei 1024 px.
   Arpads Regel fuer die Website: kein Wort mitten gebrochen.

   Getrennt wird jetzt nur noch an den weichen Trennzeichen im Quelltext
   (privacy.html, de/privacy.html), und zwar mit Strich. Zwischen 720 und
   960 px steht der geschlossene Titel eine Stufe kleiner, damit das
   laengste Silbenstueck in die Spalte passt. Darunter ist eine Spalte
   schmaler als „Gelöscht" (gemessen 561 px: 12 px zu wenig) -- dort gilt,
   was die Seite unter 561 px schon tut: Symbol und Nummer, der Titel
   steht im Knopf (aria-label) und im geoeffneten Feld. */
body[data-page="privacy"] .how .acc-spine-title,
body[data-page="privacy"] main .rechtstext .how .acc-copy :is(h2, h3),
body[data-page="privacy"] main .rechtstext .how :is(.acc-subline, .acc-body) {
  overflow-wrap: normal;
  hyphens: manual;
}
@media (min-width: 720px) and (max-width: 960px) {
  body[data-page="privacy"] .how .acc:not(:has(.is-open)) .acc-spine-title {
    font-size: 14px;
  }
}
@media (min-width: 561px) and (max-width: 719px) {
  body[data-page="privacy"] .how .acc-spine-title {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="privacy"] .how .acc,
  body[data-page="privacy"] .how .acc :is(.acc-item, .acc-spine, .acc-expanded, .acc-plus) {
    transition: none;
  }
}