/* ============================================================================
   Tellerino — Unterseiten: Impressum, Datenschutz, Nutzungsbedingungen,
   Verträge kündigen, Konto löschen, Hilfe (alle acht Sprachen).

   Ergänzt site.css, ersetzt nichts davon: Farben, Abstände, Schriften, Kopf,
   Fuß und Knöpfe kommen von dort (Tokens --papier-warm, --tinte, --rost …).
   Hier steht nur, was Textseiten zusätzlich brauchen: eine ruhige Textspalte,
   Abschnitte mit Haarlinien, Listen, Hinweiskarten, das Kündigungsformular.

   Erzeugt werden die Seiten von assets/marketing/build-rechtliches.js — die
   Klassen unten tauchen nur dort auf. Wer eine Klasse umbenennt, muss sie
   dort mitziehen.

   Nur hell (Entscheidung 2026-09-24): Die Startseite ist immer hell, die
   Unterseiten folgen ihr. Kein prefers-color-scheme-Block, mit Absicht.

   Aufbau:
   01 Grundlagen der Textseite
   02 Abschnitte, Listen, Anschrift
   03 Hinweiskarten
   04 Hilfe (Fragen und Antworten)
   05 Knöpfe auf Unterseiten
   06 Kündigungsformular
   07 Fuß-Ergänzung
   08 Schmale Bildschirme
   ============================================================================ */

:root {
  color-scheme: light;
  /* Zweite Schriftfarbe OHNE Deckkraft-Trick: echte Mischung aus Tinte und
     Papier (Kontrast rund 7:1 auf Papier) — für Hinweise und Nebensätze. */
  --tinte-leise: color-mix(in srgb, var(--tinte) 80%, var(--papier-warm));
  /* Haarlinien zwischen Abschnitten und Fragen (Linie, kein Text). */
  --haarlinie: color-mix(in srgb, var(--tinte) 16%, transparent);
  /* Rahmen der Formularfelder: mindestens 3:1 gegen Weiß (WCAG 1.4.11). */
  --feldrahmen: color-mix(in srgb, var(--tinte) 58%, var(--papier-karte));
}

/* ---------------------------------------------------------------------------
   01 · GRUNDLAGEN DER TEXTSEITE
   --------------------------------------------------------------------------- */
.seite {
  position: relative;
  padding: var(--s8) 0 var(--s9);
  /* Lange Wörter (Datenschutzerklärung, E-Mail-Adressen) dürfen nie seitlich
     aus der Spalte laufen. */
  overflow-wrap: break-word;
}

/* Die Lese-Spalte: rund 680 px Text, plus der seitliche Rand aus .innen. */
.seite__innen { max-width: calc(680px + 2 * var(--rand)); }

.seite__kopf { margin-bottom: var(--s7); }
/* display:block statt des inline-flex aus site.css: Im Etikett steht hier ein
   <time>-Element, das sonst als eigene Spalte neben dem Text landet. */
.seite__kopf .etikett { display: block; margin-bottom: var(--s4); }

/* h1 wie auf der Startseite (Fraunces 900), nur eine Stufe kleiner: Hier
   steht der Seitenname, keine Werbezeile. hyphens greift, wo die Sprache es
   kennt; die langen Namen tragen zusätzlich weiche Trennstellen (&shy;). */
.seite h1 {
  font-size: clamp(30px, 7.5vw, 56px);
  hyphens: auto;
}
.seite__einleitung {
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.6;
  margin: var(--s5) 0 0;
}

.seite__text p { max-width: 65ch; }

/* Links im Fließtext: Rost, dezent unterstrichen, beim Zeigen kräftiger. */
.seite__text a, .seite__einleitung a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.seite__text a:hover, .seite__einleitung a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------------
   02 · ABSCHNITTE, LISTEN, ANSCHRIFT
   Haarlinien statt Kästen — wie die Fragen auf der Startseite.
   --------------------------------------------------------------------------- */
.abschnitt {
  border-top: 1px solid var(--haarlinie);
  padding-top: var(--s6);
  margin-top: var(--s6);
}
.abschnitt:first-child { margin-top: 0; }
.abschnitt h2 {
  font-size: clamp(23px, 3vw, 30px);
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: var(--s4);
  hyphens: auto;
}
.abschnitt h3 {
  font-size: clamp(18px, 2vw, 21px);
  margin: var(--s5) 0 var(--s2);
}

.seite__text ul, .seite__text ol {
  margin: 0 0 var(--s4);
  padding-left: 1.3em;
  max-width: 65ch;
}
.seite__text li { margin-bottom: var(--s3); padding-left: 0.2em; }
.seite__text li:last-child { margin-bottom: 0; }
.seite__text li::marker { color: var(--rost); }
.seite__text ol li::marker { font-weight: 600; }
.seite__text strong { font-weight: 600; }

.seite address {
  font-style: normal;
  margin: 0 0 var(--s4);
  line-height: 1.7;
}

/* Hervorgehobener Satz innerhalb eines Abschnitts (z. B. „Wichtig: …"). */
.hinweis-zeile {
  border-left: 3px solid var(--rost);
  padding-left: var(--s4);
}

/* Zweiter Block derselben Seite in anderer Sprache (Impressum: deutsche
   Pflichtangaben und englische Wiedergabe) — mit Luft dazwischen. */
.block-sprache + .block-sprache { margin-top: var(--s7); }

/* ---------------------------------------------------------------------------
   03 · HINWEISKARTEN
   Die weiße Karte mit dem kleinen harten Versatzschatten — dieselbe Machart
   wie das Sprachmenü und die Aufnahmen der Startseite. Nur EINE Kartenebene.
   --------------------------------------------------------------------------- */
.karte {
  background: var(--papier-karte);
  border-radius: 10px;
  padding: var(--s5);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tinte) 14%, transparent),
    5px 5px 0 var(--schatten);
}
.karte > :last-child { margin-bottom: 0; }

/* Sprachhinweis vor dem englischen Rechtstext (fr/es/it/nl/no/da). */
.karte--sprache { margin: 0 0 var(--s7); }
.karte--sprache p { max-width: none; }

/* ---------------------------------------------------------------------------
   04 · HILFE — Fragen und Antworten als Haarlinien-Reihen
   Eigene Klassennamen: .frage/.fragen gehören der Startseite (details).
   --------------------------------------------------------------------------- */
.antworten { border-top: 1px solid var(--haarlinie); }
.antwort {
  border-bottom: 1px solid var(--haarlinie);
  padding: var(--s6) 0;
}
.antwort h2 {
  font-size: clamp(20px, 2.4vw, 25px);
  font-variation-settings: 'opsz' 40;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--s3);
  hyphens: auto;
}
.antwort p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   05 · KNÖPFE AUF UNTERSEITEN
   .knopf und .knopf--primaer stammen aus site.css. Neu ist nur der
   Zweitknopf: Umriss in Tinte (1 px, als Innenschatten, damit beide Knöpfe
   exakt gleich groß sind).
   --------------------------------------------------------------------------- */
.knopf--rand {
  background: transparent;
  color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--tinte);
}
.knopf--rand:hover { background: color-mix(in srgb, var(--tinte) 7%, transparent); }

/* <button> bringt eigene Browser-Stile mit — auf die Knopf-Optik zurücksetzen. */
button.knopf {
  border: 0;
  cursor: pointer;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s5) 0;
}
/* Sicherheitsnetz: Lieber ein zweizeiliger Knopf als ein Knopf, der seitlich
   aus dem Bild läuft (die Beschriftungen sind so kurz, dass es praktisch nie
   greift — aber es sind acht Sprachen). */
.knopfreihe .knopf {
  white-space: normal;
  text-align: center;
  max-width: 100%;
  min-height: 48px;
}

/* ---------------------------------------------------------------------------
   06 · KÜNDIGUNGSFORMULAR (/cancel)
   --------------------------------------------------------------------------- */
.karte--formular {
  margin-top: var(--s5);
  padding: var(--s6) var(--s5);
}

.formular__legende {
  font-size: 15px;
  color: var(--tinte-leise);
  margin: 0 0 var(--s5);
}

.feld {
  margin: 0 0 var(--s5);
  padding: 0;
  border: 0;
  min-width: 0;
}
/* :not(.wahl) — die Optionszeilen sind ebenfalls <label> direkt im <fieldset>; ohne den
   Ausschluss würden sie fett und als Block gesetzt, und umbrechender Text liefe unter
   das Optionsfeld statt daneben. */
.feld > label:not(.wahl), .feld > legend {
  display: block;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 var(--s2);
  padding: 0;
}
.pflicht { color: var(--rost); font-weight: 600; }

.eingabe {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 16px; /* 16 px: darunter zoomt Safari auf dem iPhone beim Antippen hinein */
  line-height: 1.5;
  color: var(--tinte);
  background: var(--papier-karte);
  border: 1px solid var(--feldrahmen);
  border-radius: 10px;
}
textarea.eingabe { min-height: 120px; resize: vertical; }
/* border-radius hier wiederholt: die globale Fokus-Regel in site.css setzt
   sonst 3 px und das Feld spränge beim Fokus in eine andere Form. */
.eingabe:focus-visible { outline: 2px solid var(--rost); outline-offset: 2px; border-radius: 10px; }
.eingabe[aria-invalid="true"] { border: 2px solid var(--rost); padding: 10px 13px; }

/* Auswahl als Optionsfelder statt Klappliste: Jede Option steht voll lesbar
   da, in allen acht Sprachen, auch bei 320 px — eine Klappliste schnitt die
   langen Optionen ab (Audit 2026-09-24). Jede Zeile ist mindestens 44 px hoch. */
.wahl {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 400;
  line-height: 1.45;
}
.wahl input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--rost);
}

.feld__hinweis {
  font-size: 15px;
  color: var(--tinte-leise);
  margin: var(--s2) 0 0;
}
.feld__fehler {
  font-size: 15px;
  font-weight: 600;
  color: var(--rost);
  margin: var(--s2) 0 0;
}

.formular__pro {
  font-size: 15px;
  background: color-mix(in srgb, var(--sand) 45%, var(--papier-karte));
  border-radius: 10px;
  padding: var(--s4);
  margin: var(--s5) 0;
}
.formular__absenden { margin-top: var(--s5); }
.formular__absende-hinweis {
  font-size: 15px;
  color: var(--tinte-leise);
  margin: var(--s3) 0 0;
}

/* Rückmeldung nach „Jetzt kündigen": die Live-Region bleibt leer, bis
   kuendigen.js sie füllt — leer nimmt sie keinen Platz ein. */
.status:not(:empty) {
  margin-top: var(--s5);
  border-left: 3px solid var(--olive);
  padding-left: var(--s4);
}
.status p { margin: 0 0 var(--s2); }
.status p:first-child { font-weight: 600; }
.status p:last-child { margin-bottom: 0; }

.erklaerung { margin-top: var(--s5); }
.erklaerung label { display: block; font-weight: 600; margin: 0 0 var(--s2); }
.erklaerung textarea { min-height: 260px; font-size: 15px; }

/* 07 · KOPF UND FUSS — seit 2026-09-24 komplett in site.css (Sprachmenü 44 px, aktuelle
   Sprache in voller Tinte mit Haken, Macher-Zeile im Fuß) — gilt damit für ALLE Seiten. */

/* ---------------------------------------------------------------------------
   08 · SCHMALE BILDSCHIRME
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .seite { padding: var(--s7) 0 var(--s8); }
  .seite__kopf { margin-bottom: var(--s6); }
  .abschnitt { padding-top: var(--s5); margin-top: var(--s5); }
  .antwort { padding: var(--s5) 0; }
}

/* Knöpfe untereinander, volle Breite, 12 px Abstand. */
@media (max-width: 560px) {
  .knopfreihe { flex-direction: column; align-items: stretch; }
  .knopfreihe .knopf { width: 100%; }
  .karte { padding: var(--s4); }
  .karte--formular { padding: var(--s5) var(--s4); }
}