/* ============================================================
   Fylgra -- Stylesheet der Rechtsseiten
   ============================================================
   Wird von allen Rechtsseiten (impressum, datenschutz/privacy, agb/terms,
   widerruf, kuendigen) ZUSAETZLICH zu
   landing.css eingebunden. landing.css liefert Tokens, Nav, Footer und
   Buttons; hier steht nur, was die Marketing-Seiten nicht brauchen: ein
   Lesetext-Layout mit Inhaltsverzeichnis.

   Bewusst eine eigene Datei statt inline je Seite (anders als die
   seitenspezifischen <style>-Bloecke in landing.html/demo.html): drei
   Seiten teilen exakt dasselbe Layout -- dreimal dieselbe Kopie waere
   eine Pflegestelle zu viel.

   Lesbarkeit geht hier vor Marketing-Optik: schmalere Spalte (68ch),
   groessere Zeilenhoehe, ruhigere Ueberschriften. Rechtstexte werden
   gelesen und durchsucht, nicht ueberflogen.
   ============================================================ */

/* --- Kopfleiste ------------------------------------------------------
   landing.css setzt `header.nav` auf `position: fixed` mit transparentem
   Hintergrund; sichtbar wird er erst über die Klasse `.scrolled`, die das
   Skript am Ende von landing.html beim Scrollen setzt. Auf der Startseite
   ist das gewollt -- der Hero soll unter der Leiste durchscheinen.

   Die Rechtsseiten binden dieses Skript nicht ein (sie brauchen weder
   Reveal-Animationen noch die Login-Erkennung), also blieb die Leiste dort
   dauerhaft durchsichtig und der Fließtext scrollte sichtbar hindurch.

   Statt das Skript nachzubauen, bekommt die Leiste hier von vornherein
   einen Hintergrund: Auf einer reinen Textseite gibt es nichts, was
   durchscheinen soll. Deckend statt halbtransparent, weil hier
   durchlaufende Textzeilen dahinterliegen -- bei 78 % Deckung wie auf der
   Startseite bliebe ein lesbarer Schatten stehen.

   legal.css wird nach landing.css geladen, gleiche Spezifität, also
   gewinnt diese Regel -- ohne !important. */
header.nav {
  background: var(--ground);
  border-bottom-color: var(--line-soft);
}

.legal {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 104px 20px 72px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

/* --- Inhaltsverzeichnis, klebt beim Scrollen ------------------------- */
.legal-toc {
  position: sticky;
  top: 96px;
  font-size: 14px;
  border-left: 2px solid var(--line-soft);
  padding-left: 16px;
}
.legal-toc h2 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.legal-toc li {
  counter-increment: toc;
  margin: 0 0 7px;
}
.legal-toc a {
  color: var(--ink-dim);
  text-decoration: none;
  display: block;
  line-height: 1.4;
  transition: color 0.12s var(--ease);
}
.legal-toc a::before {
  content: counter(toc) ". ";
  color: var(--ink-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
}
.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--signal-bright);
}

/* Abschnitte mit Buchstabenzusatz (9a, 10a der Datenschutzerklärung).
 *
 * Die Nummer im Inhaltsverzeichnis kommt aus einem CSS-Zähler, die Nummer in
 * der Überschrift steht im Text – und ab dem ersten Zusatz liefen beide
 * auseinander: Eintrag „10." führte zu Abschnitt 9a, und wer im Fließtext
 * „siehe Abschnitt 13" las und im Verzeichnis 13 abzählte, landete bei 12.
 * Ein Eintrag mit ``data-nr`` trägt seine Nummer selbst und zählt den Zähler
 * nicht weiter; danach stimmen beide Seiten wieder überein. */
.legal-toc li[data-nr] {
  counter-increment: none;
}
.legal-toc li[data-nr] > a::before {
  /* ``attr()`` liest das Attribut des <a> selbst – es trägt deshalb dieselbe
     ``data-nr`` wie sein <li> (bis 2026-09-27 nur das <li>, sichtbar war „. “). */
  content: attr(data-nr) ". ";
}

/* --- Textspalte ------------------------------------------------------ */
.legal-body {
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-dim);
}
.legal-body h1 {
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.legal-updated {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0 0 40px;
}
.legal-body h2 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 46px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 92px;
}
.legal-body h3 {
  font-size: 16.5px;
  color: var(--ink);
  margin: 26px 0 8px;
}
.legal-body p { margin: 0 0 15px; }
.legal-body ul { margin: 0 0 15px; padding-left: 21px; }
.legal-body li { margin: 0 0 7px; }
.legal-body a { color: var(--signal-bright); }
.legal-body strong { color: var(--ink); font-weight: 600; }
/* Knöpfe in Rechtsseiten-Layout (Bestätigungsseite von /r/, Freunde werben E): langer
   Knopftext bricht um statt die Seite zu verbreitern (ute). */
.legal-body .btn { white-space: normal; line-height: 1.3; }

/* Nummerierte Absätze einer Ziffer (AGB: „Ziffer 6 Absatz 4“). Die Nummer
   kommt aus dem <ol>, nicht aus dem Text – wer einen Absatz einfügt, muss
   keine Folgenummern von Hand nachziehen. */
.legal-body ol.legal-clauses { margin: 0 0 15px; padding-left: 26px; }
.legal-body ol.legal-clauses > li { margin: 0 0 11px; padding-left: 4px; }
.legal-body ol.legal-clauses > li::marker {
  color: var(--ink-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
}
.legal-body ol.legal-clauses ul { margin: 8px 0 0; }

/* Kontaktblock im Impressum und Verantwortlicher in der
   Datenschutzerklaerung -- als Panel abgesetzt, weil das die Angabe ist,
   die Besucher tatsaechlich suchen. */
.legal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 22px;
  color: var(--ink);
  line-height: 1.66;
}
.legal-card .k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 3px;
}
.legal-card + .legal-card { margin-top: -6px; }

/* Offener Punkt, der vor dem oeffentlichen Start gefuellt werden muss.
   Sichtbar gelb statt stiller Platzhalter: ein unvollstaendiges
   Impressum soll beim Drueberschauen auffallen, nicht untergehen. */
.legal-todo {
  border-left: 3px solid var(--warn);
  background: rgba(255, 207, 92, 0.07);
  padding: 13px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--ink);
}
.legal-todo b { color: var(--warn); }

/* Datentabellen (Speicherdauer, Empfaenger) */
.legal-table-wrap { overflow-x: auto; margin: 0 0 20px; }
.legal-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 440px;
  font-size: 14.5px;
  line-height: 1.5;
}
.legal-body th,
.legal-body td {
  text-align: left;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.legal-body th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--line);
  white-space: nowrap;
}
.legal-body td:first-child { color: var(--ink); }

@media (max-width: 900px) {
  .legal {
    /* minmax(0, …) statt 1fr: Sonst bestimmt die Mindestbreite der Tabellen
       (min-width 440px) die Spalte, und die ganze Seite ließ sich auf dem
       Handy seitlich verschieben – statt nur die Tabelle in ihrem Rahmen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-top: 88px;
  }
  .legal-toc {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding: 16px 0 0;
  }
  .legal-body { font-size: 16px; }
}

/* --- Druck -----------------------------------------------------------
   Befund 2026-09-21 (Betreiber: „drei leere Seiten"): Diese Seiten sind
   dunkel gestaltet. Browser drucken Hintergruende standardmaessig nicht,
   die Schriftfarbe behalten sie aber -- aus fast weissem Text auf weissem
   Papier werden leere Blaetter. Nachgemessen in der Druckansicht: agb,
   impressum und datenschutz liefern rgb(238,241,246) fuer Ueberschriften
   und rgb(124,132,148) fuer Fliesstext, kuendigen dasselbe fuer Feld-
   beschriftungen.

   Bewusst grob (`.legal *`, `.kd *`) statt auf Vererbung zu bauen: Farbe
   wird an vielen Stellen direkt gesetzt (`.legal-updated`, `.legal-card
   .k`, Tabellenkoepfe, Links, Formularbeschriftungen). Eine Farbe am
   Elternteil erreicht solche Regeln nicht -- genau daran scheiterte der
   erste, seitenlokale Versuch in widerruf.html.

   Hier statt viermal inline, weil alle Rechtsseiten dasselbe Papier
   brauchen: impressum, datenschutz, agb, widerruf und die Kuendigungs-
   seite (die zusaetzlich eigene Regeln fuer ihren Beleg mitbringt). */
@media print {
  /* Kein dunkles Farbschema auf Papier. */
  :root {
    color-scheme: light;
  }
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Bildschirm-Beiwerk: Kopfleiste, Fuss, Inhaltsverzeichnis, Banner. */
  header.nav,
  footer,
  .legal-toc,
  .consent,
  .auth-note {
    display: none !important;
  }
  /* Der blaue Schein und das Raster von landing.css (`body::before/::after`)
     landen mit eingeschalteten Hintergrundgrafiken sonst auf dem Papier. */
  body::before,
  body::after {
    display: none !important;
  }

  /* Zwei Spalten mit klebender Spalte ergeben auf Papier keinen Sinn. */
  .legal {
    display: block !important;
    max-width: none;
    padding: 0 !important;
  }
  .legal-body {
    max-width: none;
    font-size: 11pt;
    line-height: 1.5;
  }

  /* Der Kern: jede Schrift schwarz, jede Flaeche durchsichtig -- auch
     wenn im Druckdialog "Hintergrundgrafiken" eingeschaltet ist. */
  .legal,
  .legal *,
  .kd,
  .kd * {
    color: #000 !important;
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  .legal a,
  .kd a {
    text-decoration: underline;
  }

  /* Kaesten bleiben als Kasten erkennbar und werden nicht zerrissen. */
  .legal-card {
    border: 1px solid #999 !important;
    break-inside: avoid;
  }
  .legal-body h2 {
    border-top: 1px solid #999 !important;
  }
  .legal-body h1,
  .legal-body h2,
  .legal-body h3 {
    break-after: avoid;
  }
  .legal-body th,
  .legal-body td {
    border-bottom: 1px solid #999 !important;
  }
}