/* edda – Das Markenhandbuch
   Farben, Maße und Schriftgrößen als Variablen. Werte, die später im
   Regler-Panel verschoben werden, stehen im Block „Regler“. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.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: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Farben */
  --creme: #f5ede3;
  --karton: #ebe0d0;
  --rot: #952c22;
  --rot-tief: #7d241b;
  --rot-hell: #e07a5f;        /* Rot auf Schwarz, 6,4 : 1 */
  --rot-leise: #f0d2c6;       /* Text auf Rot, 5,5 : 1 */
  --schwarz: #141110;
  --tinte: #1c1716;
  --leise: #5c4f49;
  --leise-dunkel: #b3a69c;    /* leiser Text auf Schwarz, 7,9 : 1 */
  --linie: var(--tinte);

  /* Schrift */
  --schrift: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Regler: Maße */
  --leiste-breite: 260px;
  --rand: clamp(16px, 4.2vw, 64px);
  --abschnitt-abstand: clamp(72px, 9vw, 136px);
  --einstieg-oben: clamp(20px, 3.2vh, 44px);
  --einstieg-spalte: 7fr 5fr;
  --einstieg-luecke: clamp(32px, 4vw, 64px);
  --bild-hoehe: min(66vh, 600px);
  --bild-fokus-x: 50%;
  --bild-fokus-y: 30%;
  --kopfzeile-hoehe: 52px;

  /* Regler: Schriftgrößen */
  --gr-kapitelnr: clamp(4.25rem, 2.2rem + 6.2vw, 7.5rem);
  --gr-h1: clamp(2.25rem, 7.5vw - 3rem, 3.75rem);
  --gr-h2: clamp(1.875rem, 1.2rem + 2.3vw, 3.25rem);
  --gr-h3: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --gr-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --gr-text: 1.0625rem;
  --gr-klein: 0.875rem;
  --gr-etikett: 0.75rem;
  --gr-schluessel: clamp(1.5rem, 1.1rem + 1.5vw, 2.375rem);
  --gr-zitat: clamp(1.5rem, 1rem + 1.7vw, 2.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Regler: von der Person im Panel eingestellt (23.10.2026), nur breite Bildschirme */
@media (min-width: 1024px) {
  :root {
    --einstieg-oben: 20px;
    --gr-kapitelnr: 90px;
    --gr-h1: 48px;
    --gr-lead: 20px;
    --einstieg-luecke: 51px;
    --bild-hoehe: 431px;
    --abschnitt-abstand: 120px;
  }
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopfzeile-hoehe) - 2px); scrollbar-color: var(--leise) var(--creme); }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--gr-text);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--rot);
}
::selection { background: var(--rot); color: var(--creme); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--rot); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.flaeche-schwarz :focus-visible, .leiste :focus-visible { outline-color: var(--rot-hell); }
.flaeche-rot :focus-visible { outline-color: var(--creme); }
.formblatt :focus-visible { outline-color: var(--rot); }

.sprung { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--rot); color: var(--creme); padding: 10px 16px; font-weight: 700; }
.sprung:focus { top: 12px; }

/* Bausteine */
.kapitelnr {
  font-size: var(--gr-kapitelnr);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.045em;
  color: var(--rot);
}
.flaeche-schwarz .kapitelnr { color: var(--rot-hell); }
.flaeche-rot .kapitelnr { color: var(--creme); }

.unterschrift {
  font-size: 0.8125rem;
  color: var(--leise);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.marker { display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.5em; vertical-align: 0.02em; }
.marker--offen {
  /* offen = gestrichelt, als Maske gezeichnet, damit die Striche auch bei kleiner Größe sichtbar bleiben */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 0h3v1.5H0zM4.5 0h3v1.5h-3zM9 0h3v1.5H9zM0 10.5h3V12H0zM4.5 10.5h3V12h-3zM9 10.5h3V12H9zM0 4.5h1.5v3H0zM10.5 4.5H12v3h-1.5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 0h3v1.5H0zM4.5 0h3v1.5h-3zM9 0h3v1.5H9zM0 10.5h3V12H0zM4.5 10.5h3V12h-3zM9 10.5h3V12H9zM0 4.5h1.5v3H0zM10.5 4.5H12v3h-1.5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.marker--voll { background: var(--rot); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  min-height: 52px;
  padding: 14px 22px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.knopf--rot { background: var(--rot); color: var(--creme); border-color: var(--rot); }
.knopf--rot:hover { background: var(--rot-tief); border-color: var(--rot-tief); }
.knopf--linie { border-color: var(--tinte); color: var(--tinte); }
.knopf--linie:hover { background: var(--tinte); color: var(--creme); }
.knopf::after {
  content: "";
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: width 0.25s var(--ease);
}
.knopf:hover::after { width: 28px; }

.pfeil-link { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.pfeil-link:hover { color: var(--rot); }
.flaeche-schwarz .pfeil-link:hover { color: var(--rot-hell); }

/* Spezifikationsfelder: kleine Versal-Etiketten über Werten, Haarlinie oben */
.spez { display: grid; border-top: 1px solid var(--linie); }
.spez > div { padding: 14px 20px 0 0; }
.spez dt {
  font-size: var(--gr-etikett);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 6px;
}
.spez dd { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; }
.spez--drei { grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
.einstieg .knopfreihe { margin-top: 22px; }
.spez--zwei { grid-template-columns: repeat(2, 1fr); row-gap: 20px; margin-top: 36px; }

/* Kapitelleiste */
.leiste {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--leiste-breite);
  z-index: 20;
  background: var(--schwarz);
  color: var(--creme);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.leiste__marke img { width: 116px; }
.leiste__zaehler, .leiste__schalter, .leiste__frei { display: none; }
.kapitel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kapitel ol { font-size: 0.9375rem; }
.kapitel a {
  display: flex;
  align-items: baseline;
  padding: 6px 0;
  text-decoration: none;
  color: rgba(245, 237, 227, 0.62);
  transition: color 0.25s var(--ease);
}
.kapitel a span { width: 44px; flex: none; color: rgba(245, 237, 227, 0.6); transition: color 0.25s var(--ease); }
.kapitel a:hover { color: var(--creme); }
.kapitel a[aria-current="true"] { color: #fff; font-weight: 700; }
.kapitel a[aria-current="true"] span { color: var(--rot-hell); }
.leiste__status { margin-top: auto; font-size: var(--gr-klein); color: var(--leise-dunkel); padding-bottom: 14px; }
.kapitel .leiste__knopf { justify-content: flex-start; gap: 12px; width: 100%; padding: 14px 16px; font-size: 0.9375rem; color: var(--creme); }
.kapitel .leiste__knopf:hover { color: var(--creme); }
.kapitel .leiste__knopf span { width: auto; font-weight: 500; color: var(--rot-leise); }
.leiste__knopf::after { display: none; }
.kapitel .leiste__knopf[aria-current="true"] { background: var(--rot-tief); border-color: var(--rot-tief); outline: 1.5px solid var(--creme); outline-offset: -1.5px; }
.kapitel .leiste__knopf[aria-current="true"] span { color: var(--rot-leise); }
/* Sprachwechsel: unten in der Leiste, auf dem Handy im Menü unter dem Knopf */
.sprache { margin-top: auto; padding-top: 24px; display: flex; align-items: baseline; gap: 10px; font-size: var(--gr-klein); color: var(--leise-dunkel); }
.sprache a { color: var(--leise-dunkel); text-decoration: none; }
.sprache a:hover { color: var(--creme); text-decoration: underline; }
.sprache [aria-current] { color: var(--creme); font-weight: 700; }

/* Blatt: alles rechts der Leiste */
.blatt { margin-left: var(--leiste-breite); }
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--kopfzeile-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--rand);
  background: var(--creme);
  color: var(--leise);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.kopfzeile::after {
  content: "";
  position: absolute;
  left: var(--rand);
  right: var(--rand);
  bottom: 0;
  border-bottom: 2px solid var(--tinte);
  transition: border-color 0.35s var(--ease);
}
.kopfzeile[data-flaeche="schwarz"] { background: var(--schwarz); color: var(--leise-dunkel); }
.kopfzeile[data-flaeche="schwarz"]::after { border-color: var(--creme); }
.kopfzeile[data-flaeche="rot"] { background: var(--rot); color: var(--rot-leise); }
.kopfzeile[data-flaeche="rot"]::after { border-color: var(--creme); }
.kopfzeile [data-kapitel-nr] { color: var(--rot); font-weight: 700; }
.kopfzeile[data-flaeche="schwarz"] [data-kapitel-nr] { color: var(--rot-hell); }
.kopfzeile[data-flaeche="rot"] [data-kapitel-nr] { color: var(--creme); }

[data-kapitel-nr].rollt { animation: rollen 0.45s var(--ease); display: inline-block; }
@keyframes rollen { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Flächen: jeder Abschnitt füllt die volle Breite in genau einer Fläche */
.flaeche-creme { background: var(--creme); }
/* Zwei Creme-Abschnitte hintereinander trennt eine Linie in Tinte, wie unter der Kopfzeile */
.flaeche-creme + .flaeche-creme { background: linear-gradient(var(--tinte), var(--tinte)) top center / calc(100% - 2 * var(--rand)) 2px no-repeat var(--creme); }
.flaeche-schwarz { background: var(--schwarz); color: var(--creme); }
.flaeche-rot { background: var(--rot); color: var(--creme); }
main > section { margin-bottom: -2px; padding: var(--abschnitt-abstand) var(--rand); }

.kapitel-kopf { display: grid; gap: 22px; margin-bottom: clamp(32px, 4vw, 56px); max-width: 920px; }
.kapitel-kopf h2 { font-size: var(--gr-h2); line-height: 1.05; }
.einleitung { font-size: var(--gr-lead); max-width: 62ch; color: var(--leise); margin-bottom: clamp(36px, 4vw, 56px); }
.einleitung strong { color: var(--rot); font-weight: 600; }

/* 1.0 Einstieg */
.einstieg { padding-top: var(--einstieg-oben); padding-bottom: clamp(56px, 6vw, 88px); }
.einstieg__raster {
  display: grid;
  grid-template-columns: var(--einstieg-spalte);
  gap: var(--einstieg-luecke);
  align-items: start;
}
.nb { white-space: nowrap; }
.einstieg h1 { font-size: var(--gr-h1); line-height: 1.02; margin-top: 20px; max-width: 17ch; }
.einstieg__lead { margin-top: 18px; font-size: var(--gr-lead); line-height: 1.5; color: var(--leise); max-width: 58ch; }
.einstieg__bild { padding-top: 22px; }

.abb { position: relative; }
.abb img { width: 100%; height: var(--bild-hoehe); object-fit: cover; object-position: var(--bild-fokus-x) var(--bild-fokus-y); background: var(--karton); }
.abb figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--leise); display: flex; justify-content: space-between; }
/* rote Maßlinie mit Endstrichen über der Abbildung */
.masslinie { position: absolute; top: 0; left: 0; right: 0; height: 11px; }
.masslinie::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 5px;
  border-top: 1px solid var(--rot);
  transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.masslinie::after {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px solid var(--rot);
  border-right: 1px solid var(--rot);
}

/* 1.2 Auf einen Blick */
.blick { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); }
.tabelle-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--tinte); }
.h-klein { font-size: var(--gr-h3); letter-spacing: -0.01em; }
.blick__raster { display: grid; grid-template-columns: 1fr 1fr 1.15fr 1.15fr; }
.blick__feld { padding: 20px 24px 0 0; border-right: 1px solid rgba(28, 23, 22, 0.25); }
.blick__feld + .blick__feld { padding-left: 24px; }
.blick__feld:last-child { border-right: 0; }
.blick__feld h3 {
  font-size: var(--gr-etikett);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 12px;
}
.blick__feld li { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; padding: 8px 0; border-top: 1px solid rgba(28, 23, 22, 0.18); }
.blick__feld li:first-child { border-top: 0; padding-top: 0; }
.blick__namen { font-size: 0.9375rem; font-weight: 500; line-height: 1.6; }

/* 2.0 Situationen */
.situationen__raster { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.situationen__satz { position: sticky; top: calc(var(--kopfzeile-hoehe) + 32px); }
.schluesselsatz { font-size: var(--gr-schluessel); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; max-width: 18ch; }
.schluesselsatz em { font-style: normal; color: var(--rot); }
.luecke { position: relative; margin-top: 40px; max-width: 420px; padding-top: 20px; }
.luecke__band { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 6px; height: 28px; margin-bottom: 10px; }
.luecke__band i { background: var(--tinte); }
.luecke__band .luecke__offen { background: transparent; border: 1.5px dashed var(--tinte); position: relative; overflow: hidden; }
.luecke__band .luecke__offen::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: var(--rot);
  transform: scaleX(var(--fuellung, 1));
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.faelle { counter-reset: none; border-top: 2px solid var(--tinte); }
.fall { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; padding: 26px 0 28px; border-bottom: 1px solid rgba(28, 23, 22, 0.25); }
.fall__nr { grid-row: span 2; font-weight: 800; color: var(--rot); font-size: 1.125rem; padding-top: 2px; }
.fall h3 { font-size: var(--gr-h3); margin-bottom: 8px; }
.fall p { color: var(--leise); max-width: 60ch; }

/* 3.0 Leistungen */
.aufgaben { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--tinte); }
.aufgabe { padding: 24px 28px 32px 0; border-bottom: 1px solid rgba(28, 23, 22, 0.25); }
.aufgabe:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid rgba(28, 23, 22, 0.25); }
.aufgabe__nr { display: block; font-weight: 800; color: var(--rot); margin-bottom: 18px; }
.aufgabe h3 { font-size: var(--gr-h3); margin-bottom: 10px; }
.aufgabe p { color: var(--leise); }

/* 4.0 Stationen: Spezifikationstabelle */
.stationen .tabelle-kopf { border-bottom: 0; padding-bottom: 20px; }

.station__zeit { font-variant-numeric: tabular-nums; }

.spalten-kopf, .station dl { display: grid; grid-template-columns: 112px minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.6fr); column-gap: 28px; }
.spalten-kopf { padding: 12px 0; font-size: var(--gr-etikett); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--leise); border-bottom: 1px solid var(--tinte); }
.station { position: relative; padding: 22px 0 24px; border-bottom: 1px solid rgba(28, 23, 22, 0.25); transition: background-color 0.25s var(--ease); }
.station dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.station dd { font-size: 0.9375rem; line-height: 1.45; }
.station__zeit dd { font-weight: 700; }
.station__rolle strong { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 2px; }
.station__marken dd { color: var(--leise); font-weight: 500; }
.station__mandate { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--leise); }
.station__beleg dd { color: var(--leise); }
.station--offen { background: var(--creme); }
.station--offen .station__zeit dd, .station--offen strong { color: var(--rot); }
.station--offen dd { color: var(--tinte); }
.station:not(.station--offen):hover { background: color-mix(in srgb, var(--karton) 60%, transparent); }
.nachsatz { margin-top: 32px; }

/* 5.0 Beratung */
.beratung__raster { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.beratung__text p { max-width: 62ch; }
.beratung__text p + p { margin-top: 18px; color: var(--leise); }
.beratung__text p:first-child { font-size: var(--gr-lead); }
.themenblatt {
  position: relative;
  background: var(--creme);
  padding: 28px 28px 22px;
  border: 1px solid var(--tinte);
}
.themen li { display: grid; grid-template-columns: 52px 1fr; padding: 16px 0; border-bottom: 1px solid rgba(28, 23, 22, 0.25); }
.themen li:first-child { padding-top: 0; }
.themen span { font-weight: 800; color: var(--rot); }
.themen h3 { font-size: var(--gr-h3); line-height: 1.3; }
.themenblatt .unterschrift { margin-top: 14px; }

/* 6.0 Über mich */
.person__raster { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.person__zitat p { font-size: var(--gr-zitat); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; max-width: 22ch; text-indent: -0.42em; }
.person__zitat .anf { color: var(--rot); }
.person__quelle { margin-top: 14px; font-size: 0.875rem; font-weight: 500; color: var(--leise); }
.person__text p { color: var(--leise); max-width: 60ch; }
.person__text p + p { margin-top: 16px; }
.person__links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 32px; }

/* 7.0 Ablauf: Strecke mit Linie, die sich beim Scrollen füllt */
.strecke { --fortschritt: 1; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 44px; }
.strecke::before, .strecke::after { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; }
.strecke::before { background: repeating-linear-gradient(90deg, var(--tinte) 0 6px, transparent 6px 11px); }
.strecke::after { background: var(--rot); transform-origin: left; transform: scaleX(var(--fortschritt)); }
.schritt { position: relative; }
.schritt__punkt {
  position: absolute;
  top: -44px;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--creme);
  border: 2px solid var(--tinte);
  z-index: 1;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.schritt.ist-erreicht .schritt__punkt { background: var(--rot); border-color: var(--rot); }
.schritt--ziel .schritt__punkt { width: 28px; height: 28px; top: -48px; }
.schritt__nr { display: block; font-size: clamp(3rem, 2rem + 3vw, 4.75rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--tinte); margin-bottom: 14px; transition: color 0.3s var(--ease); }
.schritt.ist-erreicht .schritt__nr { color: var(--rot); }
.schritt p { max-width: 26ch; }
.schritt--ziel p { font-weight: 700; }
.strecke__mass { position: relative; display: block; margin-top: 48px; padding-top: 10px; border-top: 1px solid var(--rot); font-size: 0.8125rem; color: var(--leise); }
.strecke__mass::before, .strecke__mass::after { content: ""; position: absolute; top: -6px; height: 11px; border-left: 1px solid var(--rot); }
.strecke__mass::before { left: 0; }
.strecke__mass::after { right: 0; }

/* 8.0 Fragen */
.fragenliste { border-top: 2px solid var(--tinte); max-width: 1040px; }
.fragenliste details { border-bottom: 1px solid rgba(28, 23, 22, 0.3); }
.fragenliste summary {
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: baseline;
  gap: 12px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.fragenliste summary::-webkit-details-marker { display: none; }
.frage__nr { font-weight: 800; color: var(--rot); }
.fragenliste summary h3 { font-size: var(--gr-h3); line-height: 1.3; transition: color 0.2s; }
.fragenliste summary:hover h3 { color: var(--rot); }
.frage__zeichen { position: relative; width: 16px; height: 16px; align-self: center; justify-self: end; }
.frage__zeichen::before, .frage__zeichen::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--tinte); transition: transform 0.3s var(--ease); }
.frage__zeichen::after { transform: rotate(90deg); }
details[open] .frage__zeichen::after { transform: rotate(0deg); }
.fragenliste details p { padding: 0 40px 26px 68px; max-width: calc(68ch + 68px); color: var(--leise); }

/* 9.0 Anfrage: rote Fläche, Formblatt in Creme */
.anfrage__raster { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.anfrage h2 { color: var(--creme); }
.anfrage__lead { font-size: var(--gr-lead); max-width: 44ch; }
.direkt { margin-top: 48px; }
.direkt > p { color: var(--rot-leise); max-width: 40ch; }
.spez--direkt { grid-template-columns: 1fr; margin-top: 20px; border-color: var(--creme); }
.spez--direkt > div { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(245, 237, 227, 0.4); }
.spez--direkt dt { color: var(--rot-leise); margin: 0; }
.spez--direkt dd { font-size: 1.0625rem; }
.spez--direkt a { text-decoration: none; border-bottom: 1px solid rgba(245, 237, 227, 0.6); }
.spez--direkt a:hover { border-bottom-color: var(--creme); }

.formblatt { background: var(--creme); color: var(--tinte); padding: clamp(22px, 3vw, 40px); }
.formblatt__kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: var(--leise); padding-bottom: 12px; border-bottom: 2px solid var(--tinte); margin-bottom: 24px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--breit { grid-column: 1 / -1; }
.field label { font-size: var(--gr-etikett); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--leise); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: #fbf7f2;
  border: 0;
  border-bottom: 1.5px solid var(--tinte);
  border-radius: 0;
  padding: 12px 12px 10px;
  min-height: 48px;
  width: 100%;
  transition: border-color 0.2s, background-color 0.2s;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231c1716' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover { background-color: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: #fff; border-bottom-color: var(--rot); box-shadow: inset 0 -1.5px 0 var(--rot); }
.field-hint { font-size: 0.8125rem; color: var(--leise); margin-top: 6px; }
.field-error { display: none; font-size: 0.875rem; font-weight: 600; color: var(--rot); margin-top: 6px; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom: 1.5px dashed var(--rot); background-color: #fff; }
.field.has-error label { color: var(--rot); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.formblatt__hinweis { margin-top: 26px; font-size: var(--gr-klein); color: var(--leise); max-width: 60ch; }
.knopf--senden { margin-top: 18px; }
.knopf--senden:disabled { opacity: 0.6; cursor: progress; }
.form-status { margin-top: 14px; font-size: var(--gr-klein); }
.form-status.is-error { color: var(--rot); font-weight: 600; }
#form-wrap.is-sent form { display: none; }
.formblatt__danke { padding: 12px 0; outline: none; }
.formblatt__danke .marker { width: 22px; height: 22px; margin-bottom: 20px; }
.formblatt__danke h3 { font-size: var(--gr-h2); line-height: 1.08; max-width: 14ch; }
.formblatt__danke p { margin-top: 16px; color: var(--leise); max-width: 50ch; }

/* Fußzeile */
.fuss { padding: 56px 0 64px; display: grid; gap: 6px; font-size: var(--gr-klein); color: var(--leise); margin: 0 var(--rand); }
.fuss__zeichen { width: 88px; margin-bottom: 18px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--rot); text-decoration: underline; }

/* Bewegung: nur mit JavaScript, sichtbarer Ausgangszustand ohne */
.js .masslinie.ist-wartend::before { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Mittlere Breiten */
@media (max-width: 1279px) {
  .aufgaben { grid-template-columns: repeat(2, 1fr); }
  .aufgabe:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .aufgabe:nth-child(2n) { padding-left: 28px; border-left: 1px solid rgba(28, 23, 22, 0.25); }
  .spalten-kopf, .station dl { grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1.5fr); }
  .spalten-kopf span:nth-child(3) { display: none; }
  .station__marken { grid-column: 2; grid-row: 2; margin-top: 6px; }
  .station__beleg { grid-column: 3; grid-row: 1 / span 2; }
  .blick__raster { grid-template-columns: 1fr 1fr; }
  .blick__feld:nth-child(2) { border-right: 0; }
  .blick__feld:nth-child(3) { padding-left: 0; }
  .blick__feld:nth-child(n + 3) { margin-top: 20px; border-top: 1px solid rgba(28, 23, 22, 0.25); }
}

/* Handy und Tablet: Leiste wird Kopfzeile mit Kapitelzähler */
@media (max-width: 1023px) {
  :root { --kopfzeile-hoehe: 60px; }
  .leiste {
    inset: 0 0 auto 0;
    width: auto;
    height: var(--kopfzeile-hoehe);
    padding: 0 16px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .leiste__marke img { width: 72px; }
  .leiste__zaehler { display: block; flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--leise-dunkel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .leiste__frei { display: block; flex: none; font-size: 0.8125rem; font-weight: 500; color: var(--creme); white-space: nowrap; }
  .leiste__zaehler [data-kapitel-nr] { color: var(--rot-hell); font-weight: 700; margin-right: 4px; }
  .leiste__schalter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 4px 0 12px;
    background: none;
    border: 0;
    color: var(--creme);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
  }
  .leiste__striche { position: relative; width: 20px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; transition: transform 0.3s var(--ease); }
  .leiste__schalter[aria-expanded="true"] .leiste__striche { transform: scaleY(0.2); }
  .kapitel {
    position: fixed;
    top: var(--kopfzeile-hoehe);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--schwarz);
    padding: 24px 16px 32px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .leiste.ist-offen .kapitel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .kapitel ol { font-size: 1.25rem; border-top: 1px solid rgba(245, 237, 227, 0.25); }
  .kapitel a { padding: 14px 0; border-bottom: 1px solid rgba(245, 237, 227, 0.25); }
  .kapitel a span { width: 56px; }
  .leiste__status { margin-top: 28px; }
  .sprache { margin-top: 0; padding-top: 28px; font-size: 1rem; }
  .sprache a { padding: 6px 0; border-bottom: 0; }
  .blatt { margin-left: 0; padding-top: var(--kopfzeile-hoehe); }
  .kopfzeile { display: none; }

  .einstieg__raster { grid-template-columns: 1.25fr 1fr; gap: 28px; }
  .einstieg h1 { max-width: 18ch; font-size: clamp(2rem, 0.9rem + 3.4vw, 3rem); }
  .einstieg .spez--drei { grid-template-columns: 1fr; }
  .einstieg .spez--drei > div { display: grid; grid-template-columns: 132px 1fr; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(28, 23, 22, 0.2); }
  .einstieg .spez--drei dt { margin: 0; }
  :root { --bild-hoehe: auto; }
  .abb img { aspect-ratio: 4 / 5; height: auto; }
  .situationen__raster, .beratung__raster, .person__raster, .anfrage__raster { grid-template-columns: 1fr; }
  .situationen__satz { position: static; }
  .strecke { grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-left: 48px; }
  .strecke::before, .strecke::after { top: 0; bottom: 0; left: 9px; right: auto; width: 2px; height: auto; }
  .strecke::before { background: repeating-linear-gradient(180deg, var(--tinte) 0 6px, transparent 6px 11px); }
  .strecke::after { transform-origin: top; transform: scaleY(var(--fortschritt)); }
  .schritt { padding-bottom: 32px; }
  .schritt:last-child { padding-bottom: 0; }
  .schritt__punkt { top: 4px; left: -48px; }
  .schritt--ziel .schritt__punkt { top: 0; left: -52px; }
  .schritt__nr { font-size: 2.5rem; margin-bottom: 6px; }
  .schritt p { max-width: 40ch; }
}

@media (max-width: 767px) {
  :root { --rand: 16px; --abschnitt-abstand: 72px; }
  .einstieg__raster { grid-template-columns: 1fr; gap: 24px; }
  .einstieg__bild { padding-top: 18px; }
  .abb img { aspect-ratio: 1 / 1; max-height: 38svh; object-position: 50% 22%; }
  .einstieg .kapitelnr { font-size: 3.5rem; }
  .einstieg h1 { margin-top: 14px; font-size: clamp(1.875rem, 1.2rem + 3vw, 2.5rem); }
  .spez--drei { grid-template-columns: 1fr; }
  .spez--drei > div { display: grid; grid-template-columns: 132px 1fr; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(28, 23, 22, 0.2); }
  .spez--drei dt { margin: 0; }
  .spez--zwei { grid-template-columns: 1fr; }
  .knopfreihe .knopf { flex: 1 1 100%; justify-content: space-between; }
  .blick__raster { grid-template-columns: 1fr; }
  .blick__feld, .blick__feld + .blick__feld { padding: 18px 0 16px; border-right: 0; border-top: 1px solid rgba(28, 23, 22, 0.25); margin-top: 0; }
  .blick__feld:first-child { border-top: 0; }
  .fall { grid-template-columns: 44px 1fr; column-gap: 12px; }
  .aufgaben { grid-template-columns: 1fr; }
  .aufgabe, .aufgabe:nth-child(2n) { padding: 22px 0 26px; border-left: 0; }
  .spalten-kopf { display: none; }
  .stationsliste { border-top: 2px solid var(--tinte); }
  .station { padding: 20px 0 24px; }
  .station dl { grid-template-columns: 1fr; row-gap: 6px; }
  .station__marken, .station__beleg { grid-column: auto; grid-row: auto; margin-top: 0; }
  .station__zeit dd { color: var(--rot); }
  .station--offen { padding-left: 12px; padding-right: 12px; }
  .fragenliste summary { grid-template-columns: 40px 1fr 20px; gap: 10px; }
  .fragenliste details p { padding: 0 0 22px 50px; }
  .felder { grid-template-columns: 1fr; }
  .formblatt { margin: 0 -8px; padding: 22px 16px; }
  .spez--direkt > div { grid-template-columns: 80px 1fr; }
  .spez--direkt dd { font-size: 1rem; overflow-wrap: anywhere; }
  .fuss { margin: 0 16px; }
}

/* Unterseiten: Impressum, Datenschutz */
.unterseite__kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px var(--rand); }
.unterseite__kopf img { width: 96px; }
.unterseite__kopf .pfeil-link { color: var(--creme); font-size: var(--gr-klein); }
.unterseite__blatt { padding: var(--abschnitt-abstand) var(--rand); max-width: calc(72ch + 2 * var(--rand)); }
.unterseite__blatt h1 { font-size: var(--gr-h2); line-height: 1.05; margin: 22px 0 28px; }
.unterseite__blatt h2 { font-size: var(--gr-h3); margin: 36px 0 10px; }
.unterseite__blatt p + p { margin-top: 12px; }

@media (max-width: 479px) {
  .leiste { gap: 12px; }
  .leiste__schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}