/*
  Textseiten, Rescue Trade™ Website
  Gemeinsames Layout für Impressum, Datenschutzerklärung und die
  404-Seite (inc/textseite-template.php bzw. 404.php) sowie die
  Anfrage-Seite weiter unten. Reine Lesestrecken ohne Foto-Hero: ein
  dunkles Kopfband statt .hero, damit #main den Ausgleich für den
  fixierten Header behält (siehe components.css, body.has-hero-dunkel)
  und die Seite sofort mit dem Inhalt beginnt statt mit einer
  bildschirmfüllenden Fläche. Das Band ist kein Hero: $heroDunkel
  bleibt auf diesen Seiten false, siehe den Kommentar bei
  .textseite-head.

  Alle Werte aus css/tokens.css. Wiederverwendet werden .container,
  .eyebrow, .fact-list--on-light, .line-list, .link-arrow und .btn aus
  components.css – hier steht nur, was es dort noch nicht gibt.
*/

/* -----------------------------------------------------------------
   Seitenkopf
----------------------------------------------------------------- */
/* Dunkles Band statt heller Fläche. Zwei Gründe:

   Erstens der Rhythmus. Hell begann der Kopf 90px unter dem Header und
   gab der h1 nur 24px oben und unten – bei 63px Schriftgröße wirkte das
   gedrängt. Der Hero derselben Seiten arbeitet mit 28/32px um seinen
   Titel, zwischen Sektionen stehen sonst durchgehend 170px. Der Kopf
   war die einzige Stelle im Projekt, die so knapp anfing.

   Zweitens der Wechsel hell/dunkel, den die Seite ohnehin fährt
   (.produkt-daten, .statement-panel, Footer). Eine Rechtsseite sieht
   damit nach offizieller Seite aus statt nach vergessenem Unterordner.

   Die Linie unten ist ersatzlos entfallen: Der Farbwechsel trennt
   bereits, eine Linie obendrauf wäre eine doppelte Trennung an
   derselben Kante.

   Die harte Kante zum weißen Header ist gewollt. Der Header bleibt
   weiß und undurchsichtig, $heroDunkel bleibt auf diesen Seiten false –
   sonst verliert #main sein padding-top und der Kopf rutscht unter den
   Header (siehe components.css, body.has-hero-dunkel). */
.textseite-head {
  padding: var(--space-130) 0 var(--space-96);
  background: var(--color-anthracite);
  /* Wie in jeder anderen dunklen Sektion des Projekts, siehe
     .produkt-daten in css/pages/produkt.css. */
  --focus-ring-color: var(--white-a85);
}

/* Textfarben ausschließlich aus den bestehenden Weiß-Stufen. Kein
   eigener Hellgrau-Ton: reines Grau (#575756) hat auf Anthrazit nur
   Kontrast 1,96 und fällt durch, white-a65 ergibt effektiv #b5b5b4 bei
   Kontrast 6,91 – gemessen und dokumentiert in css/tokens.css. */
.textseite-head__eyebrow {
  margin: 0 0 var(--space-28);
  color: var(--white-a65);
}

.textseite-head__h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2-lg);
  line-height: var(--lh-098);
  letter-spacing: var(--ls-tight-025);
  color: var(--color-white);
  max-width: var(--measure-900);
  /* Lange deutsche Wörter, hier
     „Datenschutzerklärung", sprengen bei 390px sonst die Zeile.
     hyphens:auto setzt dabei einen echten Trennstrich, weil <html>
     lang="de" trägt; overflow-wrap bleibt als Absicherung stehen,
     falls ein Browser kein deutsches Trennwörterbuch mitbringt – dann
     bricht das Wort hart, läuft aber nicht über. Gemessen kostet der
     Trennstrich nichts: die h1 bleibt bei zwei Zeilen und 78px Höhe,
     das Band bei 452px, der Umbruch rückt nur an eine saubere
     Trennstelle. Ohne ihn stand dort „Datenschutzerkl|ärung", auf
     weißer Schrift über dunklem Grund deutlich sichtbarer als vorher
     auf Weiß. Dasselbe Muster läuft bei .produkt-vorstellung__h2 und
     .audience__h2. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Die 404-Seite endet im Band mit der Subline, ihr fehlt die
   Mono-Zeile mit dem Stand, die der Datenschutz dort trägt. Die
   vollen 96px Polster stehen darunter dann ohne Inhalt und lassen das
   Band in der unteren Hälfte leer wirken. Unterschieden wird über die
   Sektion, die ohnehin nur dort folgt (.fehlerseite statt .textseite
   oder .anfrage) – keine eigene Klasse im Markup nötig. Kennt ein
   Browser :has() nicht, bleibt es bei 96px, das ist kein Schaden.

   Gilt nur für die 96px der großen Breiten. Auf Mobil stehen dort
   ohnehin nur 56px, und weil dieser Selektor mit zwei Klassen höher
   spezifisch ist als die Mobilregel, würde er sie überschreiben und
   das Band ausgerechnet auf dem kleinen Schirm von 56 auf 72
   verlängern – das Gegenteil der Absicht. Deshalb unten im
   Mobilblock ausdrücklich zurückgesetzt. */
.textseite-head:has(+ .fehlerseite) {
  padding-bottom: var(--space-72);
}

.textseite-head__subline {
  margin: var(--space-32) 0 0;
  max-width: var(--measure-620);
  font-size: var(--fs-18);
  line-height: var(--lh-16);
  color: var(--white-a85);
}

.textseite-head__stand {
  margin: var(--space-28) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide-012);
  color: var(--white-a65);
}

/* -----------------------------------------------------------------
   Lesestrecke: Inhaltsverzeichnis links, Text rechts.
   Zwei Spalten erst ab 1000px – darunter steht das Verzeichnis über
   dem Text, weil eine 220px-Spalte neben einer Textspalte bei 834px
   beide zu schmal macht.
----------------------------------------------------------------- */
.textseite {
  /* 90 statt 72 oben: nach einer dunklen Fläche braucht der Inhalt
     mehr Luft als nach einer Linie. */
  padding: var(--space-90) 0 var(--space-120);
}

.textseite__grid {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 1000px) {
  .textseite__grid {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-90);
    align-items: start;
  }
  .textseite__toc {
    position: sticky;
    /* Der Header ist fixiert und 64px hoch, siehe
       --size-header-height; ohne den Zuschlag klebt das Verzeichnis
       beim Scrollen unter ihm. */
    top: calc(var(--size-header-height) + var(--space-32));
  }
}

.textseite__toc {
  min-width: 0;
}

.textseite__toc-label {
  margin: 0 0 var(--space-16);
}

.textseite__toc-links {
  display: grid;
  gap: var(--space-10);
}

.textseite__toc-links a {
  font-size: var(--fs-15);
  line-height: var(--lh-155);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-base);
}

.textseite__toc-links a:hover {
  color: var(--color-red);
}

/* -----------------------------------------------------------------
   Textkörper
----------------------------------------------------------------- */
.textseite__body {
  min-width: 0;
  max-width: var(--measure-780);
}

.textseite__section + .textseite__section {
  margin-top: var(--space-60);
}

.textseite__h2 {
  margin: 0 0 var(--space-20);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-tight-015);
  color: var(--color-heading);
  overflow-wrap: break-word;
}

.textseite__text p {
  margin: 0 0 var(--space-16);
  font-size: var(--fs-16);
  line-height: var(--lh-17);
  color: var(--color-text);
  overflow-wrap: break-word;
}

.textseite__text p:last-child {
  margin-bottom: 0;
}

.textseite__text a {
  color: var(--color-gray);
}

.textseite__text a:hover {
  color: var(--color-red);
}

/* Abstand zwischen Fließtext und einer folgenden Fakten- oder
   Zeilenliste innerhalb derselben Sektion. */
.textseite__section .fact-list,
.textseite__section .line-list {
  margin-top: var(--space-24);
}

.textseite__section .textseite__text + .fact-list,
.textseite__section .textseite__text + .line-list {
  margin-top: var(--space-24);
}

.textseite__section .fact-list + .textseite__text,
.textseite__section .line-list + .textseite__text {
  margin-top: var(--space-24);
}

.textseite__section .fact-list__text a {
  color: var(--color-text-secondary);
}

.textseite__section .fact-list__text a:hover {
  color: var(--color-red);
}

/* -----------------------------------------------------------------
   Anfrage-Seite: derselbe Seitenkopf, darunter zweispaltig das
   Kundenformular und die direkten Kontaktwege. Zweispaltig erst ab
   1000px, wie die Lesestrecke oben – darunter steht das Formular
   zuerst, die Kontaktwege darunter: Wer die Seite über einen
   Handlungsaufruf erreicht, will das Formular, nicht erst die
   Telefonnummer.

   Die Formularspalte bleibt bewusst ohne eigene Gestaltung, dort
   hängt der Kunde sein Formular ein (#anfrage-formular-embed, siehe
   inc/anfrage-template.php). Kein min-height o. Ä.: eine leere,
   reservierte Fläche würde auf der Vorschau wie ein Ladefehler
   wirken, solange das Formular noch fehlt.
----------------------------------------------------------------- */
.anfrage {
  /* 90 statt 72 oben, wie .textseite und .fehlerseite: nach einer
     dunklen Fläche braucht der Inhalt mehr Luft als nach einer Linie. */
  padding: var(--space-90) 0 var(--space-120);
}

.anfrage__grid {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 1000px) {
  .anfrage__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-90);
    align-items: start;
  }
}

.anfrage__formular,
.anfrage__kontakt {
  min-width: 0;
}

.anfrage__label {
  margin: 0 0 var(--space-16);
}

/* Nur auf der Vorschau im Markup (rt_is_preview(), siehe
   inc/anfrage-template.php) – gestrichelter Rahmen, damit sofort
   erkennbar ist, dass hier etwas eingehängt wird und nicht etwas
   fehlt. In der Kunden-Auslieferung existiert das Element nicht. */
.anfrage__vorschau-hinweis {
  margin: 0;
  padding: var(--space-24);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-15);
  line-height: var(--lh-155);
  color: var(--color-text-secondary);
}

.anfrage__kontakt-text {
  margin: 0 0 var(--space-24);
  font-size: var(--fs-16);
  line-height: var(--lh-17);
  color: var(--color-text-secondary);
}

.anfrage__kontakt .fact-list__text a {
  color: var(--color-text-secondary);
}

.anfrage__kontakt .fact-list__text a:hover {
  color: var(--color-red);
}

/* -----------------------------------------------------------------
   404-Seite: derselbe Seitenkopf, darunter statt einer Lesestrecke
   eine Liste der Wege zurück.
----------------------------------------------------------------- */
.fehlerseite {
  /* 90 statt 72 oben, gleicher Grund wie bei .textseite. */
  padding: var(--space-90) 0 var(--space-120);
}

.fehlerseite__label {
  margin: 0 0 var(--space-16);
}

.fehlerseite__links {
  display: grid;
  max-width: var(--measure-620);
}

.fehlerseite__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-20);
  padding: var(--space-20) 0;
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

.fehlerseite__link:last-child {
  border-bottom: 1px solid var(--color-line);
}

.fehlerseite__link:hover {
  color: var(--color-red);
}

.fehlerseite__link-note {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide-012);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: right;
}

@media (max-width: 560px) {
  .textseite-head {
    padding: var(--space-72) 0 var(--space-56);
  }
  /* Gleiche Spezifität wie die :has()-Regel weiter oben, damit die
     404 auf Mobil dieselben 56px bekommt wie die übrigen Textseiten
     und nicht die 72px der großen Breiten erbt. */
  .textseite-head:has(+ .fehlerseite) {
    padding-bottom: var(--space-56);
  }
  .textseite,
  .fehlerseite,
  .anfrage {
    padding: var(--space-48) 0 var(--space-72);
  }
  .fehlerseite__link {
    flex-direction: column;
    gap: var(--space-6);
  }
  .fehlerseite__link-note {
    text-align: left;
  }
}

/* Rechtstexte 1:1 aus der Altwebsite (inc/rechtstext-template.php):
   Listen und Abstaende fuer das uebernommene Markup. */
.rechtstext h2.textseite__h2 {
  margin-top: var(--space-60);
}
.rechtstext ul {
  margin: 0 0 var(--space-16);
  padding-left: 1.25em;
  font-size: var(--fs-16);
  line-height: var(--lh-17);
  color: var(--color-text);
}
.rechtstext li {
  margin: 0 0 0.5em;
}