/* ==========================================================================
   Tiefstart — projekt-tiefstart.de
   Fundament: Schriften, Reset, Tokens, Fokus, Layout-Bausteine.
   Werte 1:1 aus dem Prototyp "Tiefstart Landingpage.dc.html" übernommen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Schriften (self-hosted, kein Request an Dritte)
   Newsreader: variable opsz-Achse 6–72 wie in der Prototyp-Einbindung.
   Source Sans 3: variable wght-Achse 200–900, genutzt werden 400 und 600.
   Latin-Subset deckt ä ö ü ß · „ " — € vollständig ab.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2 · Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Flächen */
  --papier: #FAF6F1;
  --sand: #F2EAE0;
  --warnfeld: #F5EBD8;
  --tiefdunkel: #1D2427;
  --waldgruen: #2E4238;

  /* Akzente */
  --feuerschein: #E8A05C;
  --feuerschein-hell: #F2B87A;
  --terrakotta: #8F4726;
  --terrakotta-dunkel: #7A3C20;

  /* Text auf hellem Grund */
  --text: #22201D;
  --text-2: #4A443E;
  --label: #6E6660;

  /* Text auf Tiefdunkel */
  --text-invers: #F5EFE7;
  --text-invers-2: #CFC5B8;
  --text-invers-3: #A79C90;

  /* Text auf Waldgrün */
  --text-wald: #F1F5F1;
  --text-wald-2: #DCE5DD;
  --label-wald: #A9BFAF;

  /* Warnfeld (Notfall-Banner, Sektion 08) */
  --warn-text: #5C4116;
  --warn-link: #7A5520;
  --warn-link-linie: rgba(122, 85, 32, 0.4);

  /* Linien */
  --linie: #E2D6C6;
  --linie-zart: #EDE3D6;
  --linie-warm: #E7D6B8;
  --linie-terrakotta: #D9BBA5;
  --linie-dunkel: #313A3E;

  /* Schriftfamilien */
  --serif: 'Newsreader', Georgia, serif;

  /* Layout */
  --breite: min(100%, 1160px);
  --pad-x: clamp(24px, 5vw, 80px);
  --pad-y: clamp(64px, 9vw, 128px);
  --radius: 4px;
  --uebergang: 160ms ease;

  /* Schriftgrößen */
  --fs-body: clamp(18px, 1.35vw, 20px);
  --fs-fliess: clamp(19px, 1.6vw, 21px);
  --fs-klein: clamp(18px, 1.5vw, 20px);
  --fs-label: 15px;

  /* Abstände innerhalb einer Sektion */
  --gap-sektion: clamp(32px, 4vw, 48px);
  --gap-spalte: clamp(20px, 2.4vw, 28px);
  --gap-raster: clamp(28px, 4vw, 56px);
  --gap-raster-weit: clamp(32px, 5vw, 72px);
}

/* --------------------------------------------------------------------------
   3 · Reset und Basis
   Im Prototyp trägt jedes h1/h2/p ein eigenes margin:0 — der Reset hier ist
   dazu rechnerisch identisch.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

img {
  max-width: 100%;
}

a {
  color: var(--terrakotta);
  text-decoration: none;
}

a:hover {
  color: var(--terrakotta-dunkel);
}

::selection {
  background: rgba(232, 160, 92, 0.35);
}

/* --------------------------------------------------------------------------
   4 · Fokus
   Im Prototyp fehlen Fokus-Styles komplett. Kontrast des Rings:
   Terrakotta auf Papier 6,3:1 · Feuerschein auf Tiefdunkel 7,2:1 —
   beide deutlich über den von WCAG geforderten 3:1.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--terrakotta);
  outline-offset: 3px;
  border-radius: 2px;
}

.sektion--dunkel :focus-visible,
.sektion--wald :focus-visible,
.seitenfuss :focus-visible {
  outline-color: var(--feuerschein);
}

/* --------------------------------------------------------------------------
   5 · Bewegung reduzieren
   Die Seite animiert nur die 160-ms-Übergänge der Buttons. Wer im System
   weniger Bewegung wünscht, bekommt auch die nicht.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   6 · Sprungmarke (WCAG 2.4.1)
   Unsichtbar, bis sie den Fokus bekommt.
   -------------------------------------------------------------------------- */

.sprungmarke {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px 22px;
  background: var(--tiefdunkel);
  color: var(--text-invers);
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 600;
  clip-path: inset(50%);
}

.sprungmarke:focus {
  clip-path: none;
}

/* --------------------------------------------------------------------------
   7 · Layout-Bausteine
   -------------------------------------------------------------------------- */

.breite {
  width: var(--breite);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}

.sektion {
  background: var(--papier);
}

.sektion--sand {
  background: var(--sand);
  border-block: 1px solid var(--linie);
}

.sektion--dunkel {
  position: relative;
  background: var(--tiefdunkel);
  overflow: hidden;
}

.sektion--wald {
  background: var(--waldgruen);
}

/* Spaltenstapel innerhalb einer Sektion */
.stapel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sektion);
}

/* Zweispaltiges Raster, bricht ohne Media Query einspaltig um.
   min(300px, 100%) statt bloßer 300px: eine Grid-Spur kann sonst nicht unter
   ihre Untergrenze schrumpfen und läuft auf sehr schmalen Displays aus dem
   Container. Ab 348px Viewport rechnerisch identisch zu 300px, darunter
   schrumpft die Spur mit, statt die Seite seitlich scrollen zu lassen. */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap-raster);
}

.raster--weit {
  gap: var(--gap-raster-weit);
  align-items: start;
}

.spalte {
  display: flex;
  flex-direction: column;
  gap: var(--gap-spalte);
}

/* Versal-Label über einer Sektion. Trägt je nach Sektion ein <h2> oder
   ein <span> — die Darstellung ist in beiden Fällen dieselbe. */
.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}

.sektion--wald .label {
  color: var(--label-wald);
}

/* Textbreiten. Der Prototyp begrenzt Textblöcke durchgehend in em, also
   relativ zur Größe des jeweiligen Elements — als Zeilenlängen-Maß, nicht
   als Layout-Breite. Die Zahl im Klassennamen ist der em-Wert. */
.mw-15 { max-width: 15em; }
.mw-16 { max-width: 16em; }
.mw-17 { max-width: 17em; }
.mw-18 { max-width: 18em; }
.mw-20 { max-width: 20em; }
.mw-28 { max-width: 28em; }
.mw-30 { max-width: 30em; }
.mw-32 { max-width: 32em; }
.mw-34 { max-width: 34em; }
.mw-36 { max-width: 36em; }
.mw-44 { max-width: 44em; }
.mw-68 { max-width: 68em; }

/* Serif-Überschriften. Modifier-Zahl = Maximalgröße des clamp(). */
.titel {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text);
}

/* Kleinste Serifen-Überschrift, für die Zwischenebene langer Textseiten.
   Gleiche Staffel wie die Etappen- und Schritt-Titel der Startseite. */
.titel--25 {
  font-size: clamp(21px, 1.9vw, 25px);
  line-height: 1.3;
}

.titel--36 {
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
}

.titel--40 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2;
}

.titel--42 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
}

.titel--52 {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.12;
}

.titel--44 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.18;
}

/* Als Utility statt im .titel-Sockel, weil genau eine Überschrift im
   Prototyp kein text-wrap trägt — "Der Boden ist weg." in Sektion 02.
   Explizit pro Element gesetzt kann das niemand versehentlich glattbügeln. */
.pretty {
  text-wrap: pretty;
}

/* Fließtext-Varianten */
.fliess {
  font-size: var(--fs-fliess);
  line-height: 1.72;
  color: var(--text-2);
  text-wrap: pretty;
}

.fliess--stark {
  color: var(--text);
  font-weight: 600;
}

/* Nur dunkler, ohne Fettung — Sektion 08 nutzt genau das. */
.fliess--dunkel {
  color: var(--text);
}

.fliess--klein {
  font-size: var(--fs-klein);
  line-height: 1.7;
}

.sektion--wald .fliess {
  color: var(--text-wald-2);
}

.sektion--wald .titel {
  color: var(--text-wald);
}

.sektion--dunkel .titel {
  color: var(--text-invers);
}

/* Zahlenblöcke von Notrufnummern nie über einen Zeilenumbruch trennen. */
.nowrap {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8 · Buttons
   Wichtig: der Prototyp lässt bewusst nur background und border-color
   übergehen, nicht color. Das ist hier 1:1 nachgebaut.
   -------------------------------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  border: 1px solid;
  border-radius: var(--radius);
  transition: background var(--uebergang), border-color var(--uebergang);
}

/* Hero und Schluss-Sektion.
   min-height statt height: das Label "Gespräch vereinbaren — 25 Minuten"
   braucht 342px und bricht unter 390px Viewport-Breite auf zwei Zeilen um —
   mit fester Höhe lief die zweite Zeile unten aus der Fläche. Auf Desktop
   ergibt das gemessen exakt dieselben 56px wie im Prototyp. */
.cta--primaer {
  min-height: 56px;
  padding: 11px 32px;
  font-size: 18px;
  color: var(--tiefdunkel);
  background: var(--feuerschein);
  border-color: var(--feuerschein);
}

.cta--primaer:hover {
  background: var(--feuerschein-hell);
  border-color: var(--feuerschein-hell);
  color: var(--tiefdunkel);
}

/* Der Standard-Fokusring wäre auf dunklem Grund Feuerschein — also dieselbe
   Farbe wie der Button selbst. Hier deshalb hell, damit der Ring sichtbar
   vom Button zu unterscheiden ist (13,9:1 gegen Tiefdunkel). */
.cta--primaer:focus-visible {
  outline-color: var(--text-invers);
}

/* Header */
.cta--sekundaer {
  height: 46px;
  padding: 0 22px;
  font-size: 17px;
  color: var(--terrakotta);
  border-color: var(--linie-terrakotta);
}

.cta--sekundaer:hover {
  background: var(--sand);
  border-color: var(--terrakotta);
  color: var(--terrakotta-dunkel);
}

/* Sektion 13 — wie der sekundäre Button, nur größer. */
.cta--sekundaer-gross {
  align-self: flex-start;
  height: 52px;
  padding: 0 30px;
  font-size: 18px;
  color: var(--terrakotta);
  border-color: var(--linie-terrakotta);
}

.cta--sekundaer-gross:hover {
  background: var(--sand);
  border-color: var(--terrakotta);
  color: var(--terrakotta-dunkel);
}

/* --------------------------------------------------------------------------
   9 · Notfall-Banner
   Im Prototyp trugen alle Links eine Inline-Farbe, wodurch die globale
   a:hover-Regel dort nie gegriffen hat. Die Regel unten stellt das nach:
   die Banner-Links wechseln beim Hovern die Farbe nicht.
   -------------------------------------------------------------------------- */

.notfall {
  background: var(--warnfeld);
  border-bottom: 1px solid var(--linie-warm);
  padding: 12px var(--pad-x);
}

.notfall p {
  width: var(--breite);
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--warn-link);
  text-wrap: pretty;
}

/* nowrap: auf schmalen Displays soll keine Notrufnummer mitten im Zahlenblock
   umbrechen. Ab ca. 340px Breite ändert das an der Darstellung nichts. */
.notfall a,
.notfall a:hover {
  color: var(--warn-link);
  border-bottom: 1px solid var(--warn-link-linie);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10 · Kopfzeile
   -------------------------------------------------------------------------- */

.seitenkopf {
  border-bottom: 1px solid var(--linie);
}

.seitenkopf__innen {
  width: var(--breite);
  margin: 0 auto;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.marke {
  display: flex;
  align-items: center;
  gap: 10.3px;
}

.marke,
.marke:hover {
  color: var(--text);
}

/* height wie im Prototyp; aspect-ratio aus der viewBox 0 -21 100 121,
   damit vor dem Laden des SVG kein Layoutsprung entsteht. */
.marke__zeichen {
  height: 25px;
  aspect-ratio: 100 / 121;
}

.marke__wort {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   11 · Sektion 01 — Hero
   Der Feuerschein-Verlauf lag im Prototyp in einem eigenen leeren <div>.
   Hier ist er ein ::before, damit im DOM kein inhaltsloses Element steht.
   -------------------------------------------------------------------------- */

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 62% at 78% 14%, rgba(232, 160, 92, 0.22) 0%, rgba(29, 36, 39, 0) 62%);
}

/* Eigene Polsterung: der Hero ist oben/unten großzügiger als die übrigen
   Sektionen, und unten minimal knapper als oben (148 gegen 152). */
.hero__innen {
  position: relative;
  width: var(--breite);
  margin: 0 auto;
  padding: clamp(72px, 11vw, 152px) var(--pad-x) clamp(72px, 11vw, 148px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 40px);
  align-items: flex-start;
}

.hero__titel {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-invers);
  text-wrap: pretty;
}

.hero__text {
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.72;
  color: var(--text-invers-2);
  text-wrap: pretty;
}

/* Button plus Hinweiszeile darunter — teilen sich Hero und Schluss-Sektion. */
.aktion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.hinweis-invers {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-invers-3);
}

/* --------------------------------------------------------------------------
   12 · Sektion 02 — Vielleicht kennst du das
   Fünf kurze Aussagen an einer Randlinie. Sie stehen wie im Prototyp als
   einzelne Absätze, nicht als Liste.
   -------------------------------------------------------------------------- */

/* Liste ohne Aufzählungszeichen. list-style: none entfernt in Safari die
   Listensemantik, deshalb trägt das ul im Markup ein explizites role="list".
   margin: 0 gegen die Vorgabewerte des Browsers, padding-left ersetzt den
   Einzug von 40px durch den Abstand zur Randlinie. */
.aussagen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  border-left: 2px solid var(--linie);
  padding-left: clamp(20px, 3vw, 32px);
  list-style: none;
}

.aussage {
  font-family: var(--serif);
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
/* --------------------------------------------------------------------------
   13 · Sektion 06 — Wie eine Woche aussieht
   Der Prototyp baut das aus divs, inhaltlich ist es aber eine Tabelle:
   ohne Tabellensemantik geht der Zusammenhang "Wann → Was" für Screenreader
   verloren. Also echtes <table>, dessen display-Werte auf das Flex-Layout
   des Prototyps umgestellt sind — deshalb reicht flex-wrap die zweite Spalte
   auf schmalen Displays unter die erste, was eine echte Tabelle nicht kann.
   Das Umstellen von display entfernt in Browsern allerdings die impliziten
   Tabellenrollen, darum stehen sie im Markup explizit als role-Attribute.
   -------------------------------------------------------------------------- */

.woche {
  display: block;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}

.woche thead,
.woche tbody {
  display: block;
}

.woche tr {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 32px);
}

.woche thead tr {
  background: var(--sand);
  border-bottom: 1px solid var(--linie);
  padding: 14px clamp(20px, 3vw, 32px);
}

.woche tbody tr {
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--linie-zart);
  align-items: baseline;
}

.woche th,
.woche td {
  display: block;
}

.woche th:first-child,
.woche td:first-child {
  flex: 0 0 auto;
  min-width: 120px;
}

.woche th:last-child,
.woche td:last-child {
  flex: 1 1 260px;
}

.woche th {
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}

.woche__wann {
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--terrakotta);
}

.woche__was {
  font-size: var(--fs-klein);
  line-height: 1.65;
  color: var(--text);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   14 · Sektion 07 — Wie es meistens verläuft
   Die abschließende Linie unter der letzten Etappe war im Prototyp ein
   leeres div mit border-top. Hier ist es ein border-bottom auf der letzten
   Etappe: dieselbe 1px-Linie an derselben Stelle, ohne inhaltsleeres Element.
   -------------------------------------------------------------------------- */

.etappen {
  display: flex;
  flex-direction: column;
}

.etappe {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--linie);
}

.etappe:last-child {
  border-bottom: 1px solid var(--linie);
}

.etappe__kopf {
  flex: 0 0 auto;
  min-width: 120px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.etappe__nr {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--terrakotta);
}

.etappe__titel {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 25px);
  color: var(--text);
}

.etappe__body {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.etappe__zitat {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

.etappe__text {
  font-size: var(--fs-klein);
  line-height: 1.7;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Nachsatz in Label-Grau statt Fließtext-Grau. */
.fussnote {
  font-size: var(--fs-klein);
  line-height: 1.7;
  color: var(--label);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   15 · Sektion 08 — Für wen das ist
   Wie im Notfall-Banner wechseln die Links beim Hovern die Farbe nicht:
   im Prototyp trugen sie eine Inline-Farbe, an der die globale a:hover-Regel
   nie vorbeikam.
   -------------------------------------------------------------------------- */

.hinweisfeld {
  border: 1px solid var(--linie-warm);
  border-radius: var(--radius);
  background: var(--warnfeld);
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hinweisfeld p {
  font-size: var(--fs-klein);
  line-height: 1.7;
  color: var(--warn-text);
}

.hinweisfeld__nummern {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hinweisfeld a,
.hinweisfeld a:hover {
  color: var(--warn-link);
  font-weight: 600;
  border-bottom: 1px solid var(--warn-link-linie);
}

/* --------------------------------------------------------------------------
   16 · Sektion 09 — Wer das macht
   Diese Sektion bricht bei 290px um, nicht bei 300px wie die übrigen.
   -------------------------------------------------------------------------- */

.raster--290 {
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

/* Bildspalte mit festem 16px-Abstand statt der üblichen Spalten-Lücke. */
.spalte--bild {
  gap: 16px;
}

.portrait {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* --------------------------------------------------------------------------
   17 · Sektion 11 — Wie du dazukommst
   -------------------------------------------------------------------------- */

.raster--260 {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 3vw, 32px);
}

.schritt {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.schritt__nr {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 28px);
  color: var(--terrakotta);
}

.schritt__titel {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 25px);
  line-height: 1.3;
  color: var(--text);
}

.schritt__text {
  font-size: var(--fs-klein);
  line-height: 1.7;
  color: var(--text-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   18 · Sektion 12 — Schluss
   Eigener Verlauf: anders positioniert und schwächer als der im Hero.
   Der Absatz hat hier Zeilenhöhe 1.7, im Hero sind es 1.72.
   -------------------------------------------------------------------------- */

.schluss::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 66% at 22% 88%, rgba(232, 160, 92, 0.20) 0%, rgba(29, 36, 39, 0) 62%);
}

.schluss__innen {
  position: relative;
  width: var(--breite);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  align-items: flex-start;
}

.schluss__text {
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.7;
  color: var(--text-invers-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   19 · Sektion 13 — Mitmachen und Weitersagen
   Engerer Spaltenabstand als in den übrigen zweispaltigen Sektionen.
   -------------------------------------------------------------------------- */

.spalte--eng {
  gap: clamp(18px, 2vw, 24px);
}

/* --------------------------------------------------------------------------
   20 · Fußzeile
   Die Wortmarke ist hier bewusst kein Link — im Prototyp ein reines div.
   Abstand 9,9px statt der 10,3px im Seitenkopf.
   Die Notfall-Links wechseln beim Hovern die Farbe nicht, die Nav-Links schon.
   -------------------------------------------------------------------------- */

.seitenfuss {
  background: var(--tiefdunkel);
}

.seitenfuss__innen {
  width: var(--breite);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 76px) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}

.marke--invers {
  gap: 9.9px;
  color: var(--text-invers);
}

.marke--invers .marke__zeichen {
  height: 24px;
}

.marke--invers .marke__wort {
  font-size: 24px;
}

.seitenfuss__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.seitenfuss__nav a {
  font-size: 18px;
  color: var(--text-invers-2);
}

.seitenfuss__nav a:hover {
  color: var(--feuerschein);
}

.seitenfuss__notfall {
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--linie-dunkel);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-invers-3);
  text-wrap: pretty;
}

.seitenfuss__notfall a,
.seitenfuss__notfall a:hover {
  color: var(--feuerschein);
}

/* --------------------------------------------------------------------------
   21 · Fehlerseite
   Hält die Fußzeile unten, wenn wenig Inhalt da ist. Nur über die Klasse am
   body aktiv, die Startseite bleibt unberührt.
   -------------------------------------------------------------------------- */

.seite-kurz {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.seite-kurz main {
  flex: 1;
}

/* --------------------------------------------------------------------------
   22 · Textseiten
   Impressum, Datenschutz, Kontakt: kein Hero, keine Buttons. Die Zeilenlänge
   begrenzt mw-34 auf den Absätzen — bei 1280px sind das rund 70 Zeichen.
   Überschriftenhierarchie: h1 in Newsreader, die h2 als Versal-Label wie die
   Sektionsmarken auf der Startseite.
   -------------------------------------------------------------------------- */

.textblock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Die Datenschutzerklärung nennt Adressen wie
   privacycenter.instagram.com/policy im Fließtext. Solche URLs enthalten keine
   Stelle, an der der Browser von sich aus umbricht — bei 375px ragte die
   längste 16px aus der Textspalte. break-word greift nur dann, wenn ein Wort
   sonst überliefe, und lässt normalen Text unberührt. */
.textblock p {
  overflow-wrap: break-word;
}

/* Die h4-Zwischenüberschriften der Datenschutzerklärung brauchen etwas mehr
   Luft nach oben als die 12px, die .textblock allen Kindern gibt — sonst
   kleben sie am Absatz davor. */
.textblock h4 {
  margin-top: 10px;
}

.textblock h4:first-child {
  margin-top: 0;
}

/* Browser setzen address von Haus aus kursiv. */
.adresse {
  font-style: normal;
}

/* Aufzählungen im Fließtext. Der Browser-Einzug von 40px würde die Punkte aus
   der Textspalte herausschieben; 1.4em hält sie daran. Abstand 8px, etwas
   enger als die 12px zwischen den Blöcken. */
.textliste {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}