/* ==========================================================================
   TD Carbontec / TD Suspension
   Stilfundament — natives CSS, keine Fremdbibliotheken, kein Build.
   Aufbau:
     1  Schriften
     2  Farb- und Maßwerte (Tokens)
     3  Grundlagen und Barrierefreiheit
     4  Raster und Abschnitte
     5  Typografie
     6  Schaltflächen und Verweise
     7  Kopfzeile und Navigation
     8  Bewegung (Einblenden, Übergänge)
     9  Bausteine
    10  Formular
    11  Fußzeile
    12  Bewegung reduzieren
   ========================================================================== */

/* -- 1  Schriften ---------------------------------------------------------- */
/* Selbst gehostet. Keine externen Dienste, keine Google-Fonts-Einbindung. */

@font-face {
  font-family: "Archivo";
  src: url("../schrift/archivo-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../schrift/inter-tight-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Nur für Messwerte und technische Angaben. Bewusst nicht für Beschriftungen,
   sonst kippt die Seite ins Entwicklerwerkzeug. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../schrift/jbmono-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* -- 2  Farb- und Maßwerte ------------------------------------------------- */
/*
   Ein Akzent für die ganze Seite: das Rot der Wortmarke, aus der Logodatei
   ausgelesen (#E30613). Drei Stufen, damit die Kontrastwerte überall halten:
     rot-600  Flächen mit weißer Schrift      (Weiß darauf 4,9:1)
     rot-500  Linien, Balken, große Zahlen
     rot-300  kleine Akzenttexte auf dunkel   (6,1:1)

   Die Grundtöne sind bewusst kühl gehalten. Carbongewebe bricht das Licht
   blaustichig, ein neutrales Grau wirkt daneben tot.

   Ein Radiensystem: alles 2px. Runde Elemente sind Kreise, sonst nichts.
*/

:root {
  color-scheme: dark;

  /* Grundton der Marke. Die drei Flächen darüber tragen denselben Blaustich,
     nur schrittweise aufgehellt, damit die Abstufung als ein Material wirkt. */
  --grund: #020d19;
  --flaeche: #071526;
  --flaeche-2: #0d1e33;
  --flaeche-3: #142842;

  --linie: rgb(255 255 255 / 0.10);
  --linie-stark: rgb(255 255 255 / 0.20);

  --text: #eef0f3;
  --text-2: #a4aab4;
  --text-3: #7b828d;

  --rot-600: #e30613;
  --rot-500: #e30613;
  --rot-300: #ff5147;
  --auf-rot: #ffffff;

  --r: 2px;

  --breite: 1320px;
  --rand: clamp(1.25rem, 5vw, 3.5rem);

  --schrift-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --schrift-text: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --schrift-mass: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --weich: cubic-bezier(0.16, 1, 0.3, 1);
  --feder: cubic-bezier(0.34, 1.4, 0.64, 1);

  --kopf-hoehe: 72px;

  --z-kopf: 100;
  --z-menue: 200;
  --z-korn: 300;
}

/* Dunkel ist der Auftritt der Marke und damit der Ausgangszustand, unabhängig
   von der Systemvorgabe. Wer es hell braucht, schaltet oben um; die Wahl bleibt
   im Browser gespeichert. Beide Fassungen halten die Kontrastwerte nach
   WCAG 2.2 AA ein. */
:root[data-thema="hell"] {
  color-scheme: light;
  --grund: #f2f3f5;
  --flaeche: #fafbfc;
  --flaeche-2: #e7eaee;
  --flaeche-3: #d9dde3;
  --linie: rgb(11 13 16 / 0.14);
  --linie-stark: rgb(11 13 16 / 0.30);
  --text: #12151a;
  --text-2: #4d545d;
  --text-3: #5c6268;
  --rot-600: #c00510;
  --rot-500: #c00510;
  --rot-300: #c00510;
}

/* -- 3  Grundlagen und Barrierefreiheit ------------------------------------ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1.5rem);
  /* clip statt hidden: verhindert waagerechtes Scrollen, ohne die
     angeheftete Kopfzeile zu brechen. */
  overflow-x: clip;
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
picture,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

/* Sichtbarer Fokus ist Pflicht, nicht Zierde. */
:focus-visible {
  outline: 3px solid var(--rot-500);
  outline-offset: 3px;
  border-radius: var(--r);
}

:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--rot-600);
  color: var(--auf-rot);
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: calc(var(--z-menue) + 10);
  background: var(--rot-600);
  color: var(--auf-rot);
  padding: 0.85rem 1.6rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s var(--weich);
}

.sprung:focus { transform: translate(-50%, 0); }

/* Symbole */
.sym {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* -- 4  Raster und Abschnitte ---------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: clamp(4.5rem, 11vw, 9rem); }
.abschnitt--eng { padding-block: clamp(3.5rem, 8vw, 6rem); }

.linie-oben { border-top: 1px solid var(--linie); }

/* -- 5  Typografie --------------------------------------------------------- */

h1, h2, h3, h4,
.d1, .d2, .d3, .d4 {
  font-family: var(--schrift-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.2rem, 4.2vw, 3.55rem); }
.d2 { font-size: clamp(1.95rem, 3.6vw, 3rem); }
.d3 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.14; }
.d4 { font-size: clamp(1.18rem, 1.7vw, 1.4rem); line-height: 1.2; }

.fuehrung {
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 56ch;
}

.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.mass { max-width: 62ch; }

.rot { color: var(--rot-300); }

/* Messwerte und technische Angaben. Bewusst sparsam eingesetzt. */
.mass-schrift,
.zahl {
  font-family: var(--schrift-mass);
  font-variant-numeric: tabular-nums;
  font-size: 0.94em;
  letter-spacing: -0.02em;
}

/* -- 6  Schaltflächen und Verweise ----------------------------------------- */

.knopf {
  --knopf-grund: var(--rot-600);
  --knopf-text: var(--auf-rot);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--knopf-grund);
  color: var(--knopf-text);
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s var(--weich),
    background-color 0.25s var(--weich),
    border-color 0.25s var(--weich),
    color 0.25s var(--weich);
}

/* Der Füllstrich läuft beim Überfahren von links durch. */
.knopf::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--weich);
}

.knopf:hover::after { transform: scaleX(1); }
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(0) scale(0.985); }

.knopf .sym { transition: transform 0.3s var(--weich); }
.knopf:hover .sym { transform: translateX(4px); }

.knopf--zweit {
  --knopf-grund: transparent;
  --knopf-text: var(--text);
  border-color: var(--linie-stark);
}

.knopf--zweit:hover {
  border-color: var(--text);
  background: color-mix(in oklab, var(--text) 7%, transparent);
}

.knopf--klein {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.92rem;
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Textverweis mit unterlaufendem Strich */
.verweis {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--rot-500), var(--rot-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.32s var(--weich), color 0.25s var(--weich);
}

.verweis:hover { background-size: 100% 2px; }
.verweis .sym { transition: transform 0.3s var(--weich); }
.verweis:hover .sym { transform: translate(3px, -3px); }

/* -- 7  Kopfzeile und Navigation ------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  background: color-mix(in oklab, var(--grund) 78%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--weich), background-color 0.3s var(--weich);
}

@media (prefers-reduced-transparency: reduce) {
  .kopf {
    background: var(--grund);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

body[data-gescrollt="ja"] .kopf {
  border-bottom-color: var(--linie);
  background: color-mix(in oklab, var(--grund) 92%, transparent);
}

.kopf__innen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Die Wortmarke kommt als Bilddatei aus dem Markenhandbuch. Für die dunkle
   und die helle Fassung liegt je eine Fassung bereit. */
.marke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  flex: none;
}

.marke img {
  width: auto;
  height: 34px;
  transition: opacity 0.25s var(--weich);
}

.marke:hover img { opacity: 0.82; }

.marke .marke__hell { display: block; }
.marke .marke__dunkel { display: none; }

:root[data-thema="hell"] .marke .marke__hell { display: none; }
:root[data-thema="hell"] .marke .marke__dunkel { display: block; }

@media (max-width: 30rem) {
  .marke img { height: 28px; }
}

/* Die Wortmarke wiederholt sich in der Fußzeile, dort etwas größer. */
.fuss__marke { display: block; margin-bottom: 1.25rem; }
.fuss__marke img { height: 40px; width: auto; }
.fuss__marke .marke__hell { display: block; }
.fuss__marke .marke__dunkel { display: none; }
:root[data-thema="hell"] .fuss__marke .marke__hell { display: none; }
:root[data-thema="hell"] .fuss__marke .marke__dunkel { display: block; }

.nav { display: flex; align-items: center; gap: 0.35rem; }

.nav__verweis {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r);
  color: var(--text-2);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--weich);
}

.nav__verweis::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.25rem;
  height: 1.5px;
  background: var(--rot-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--weich);
}

.nav__verweis:hover { color: var(--text); }
.nav__verweis:hover::before { transform: scaleX(1); transform-origin: left; }

.nav__verweis[aria-current="page"] { color: var(--text); }
.nav__verweis[aria-current="page"]::before { transform: scaleX(1); }

.kopf__rechts { display: flex; align-items: center; gap: 0.6rem; }

.themawechsel {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.25s var(--weich), border-color 0.25s var(--weich), transform 0.3s var(--feder);
}

.themawechsel:hover {
  color: var(--text);
  border-color: var(--linie-stark);
  transform: rotate(-15deg);
}

.themawechsel .sym { width: 1.15rem; height: 1.15rem; }
.themawechsel .sym--mond { display: none; }
:root[data-thema="hell"] .themawechsel .sym--sonne { display: none; }
:root[data-thema="hell"] .themawechsel .sym--mond { display: block; }

.menueknopf {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: transparent;
  color: var(--text);
  font-family: var(--schrift-display);
  font-size: 0.92rem;
  cursor: pointer;
}

.menueknopf .sym { width: 1.2rem; height: 1.2rem; }
.menueknopf .sym--zu { display: none; }
.menueknopf[aria-expanded="true"] .sym--auf { display: none; }
.menueknopf[aria-expanded="true"] .sym--zu { display: block; }

/* Vollflächiges Menü unter 62rem */
@media (max-width: 62rem) {
  .nav--haupt { display: none; }
  .menueknopf { display: inline-flex; }
  .kopf__cta { display: none; }
}

.schublade {
  position: fixed;
  inset: var(--kopf-hoehe) 0 0 0;
  z-index: var(--z-menue);
  background: var(--grund);
  padding: 2rem var(--rand) 3rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  /* Das Schließen läuft schneller als das Öffnen. Ein Menü, das beim
     Zumachen so lange braucht wie beim Aufmachen, fühlt sich träge an. */
  transition:
    opacity 0.22s var(--weich),
    transform 0.28s var(--weich),
    visibility 0s linear 0.28s;
}

.schublade[data-offen="ja"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.35s var(--weich),
    transform 0.42s var(--weich),
    visibility 0s linear 0s;
}

.schublade__nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linie);
}

.schublade__verweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  font-family: var(--schrift-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
}

.schublade[data-offen="ja"] .schublade__verweis {
  animation: hereinschieben 0.55s var(--weich) forwards;
  animation-delay: calc(60ms + var(--v, 0) * 55ms);
}

.schublade__verweis .sym {
  color: var(--text-3);
  transition: transform 0.3s var(--weich), color 0.3s var(--weich);
}

.schublade__verweis:hover .sym { transform: translateX(5px); color: var(--rot-300); }
.schublade__verweis[aria-current="page"] { color: var(--rot-300); }

@keyframes hereinschieben {
  to { opacity: 1; transform: translateY(0); }
}

.schublade__fuss {
  display: grid;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(14px);
}

.schublade[data-offen="ja"] .schublade__fuss {
  animation: hereinschieben 0.55s var(--weich) 0.42s forwards;
}

body[data-menue="offen"] { overflow: hidden; }

/* -- 8  Bewegung ----------------------------------------------------------- */

/* Sanfte Seitenwechsel, wo der Browser sie beherrscht. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: aufloesen 0.22s var(--weich) forwards;
}

::view-transition-new(root) {
  animation: einblenden 0.4s var(--weich);
}

@keyframes aufloesen { to { opacity: 0; } }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } }

/* Einblenden beim Scrollen */
/* Einblendungen sind Auftritte, keine Rückmeldung auf einen Klick, deshalb
   dürfen sie länger laufen als die 300 Millisekunden für Mikro-Interaktionen.
   Die Staffelung bleibt bei 45 Millisekunden je Element, sonst wartet man am
   Ende einer Reihe zu lange auf den letzten Eintrag. */
.zeigt {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s var(--weich),
    transform 0.65s var(--weich);
  transition-delay: calc(var(--v, 0) * 45ms);
}

.zeigt--links { transform: translateX(-28px); }
.zeigt--rechts { transform: translateX(28px); }
.zeigt--gross { transform: translateY(44px) scale(0.985); }

/* Auf schmalen Bildschirmen nur nach oben einblenden. Eine seitliche
   Bewegung würde die Seite über den Rand hinausschieben. */
@media (max-width: 62rem) {
  .zeigt--links,
  .zeigt--rechts { transform: translateY(24px); }
}

.zeigt.ist-da {
  opacity: 1;
  transform: none;
}

/* Zeilenweiser Aufbau von Überschriften.
   Die Zeilenhöhe von 1.08 ist kleiner als das, was die Schrift tatsächlich
   belegt. Ohne Reserve schneidet overflow:hidden oben die Oberlängen und
   Umlautpunkte ab und unten die Unterlängen (g, p, j). Das negative Außenmaß
   nimmt die Reserve wieder heraus, damit der Zeilenabstand stimmt. */
.zeile {
  display: block;
  overflow: hidden;
  padding-block: 0.14em;
  margin-block: -0.14em;
}

.zeile > span {
  display: block;
  /* Nicht ausgleichen: eine gesetzte Zeile soll erst umbrechen,
     wenn der Platz wirklich nicht reicht. */
  text-wrap: normal;
  transform: translateY(105%);
  transition: transform 0.75s var(--weich);
  transition-delay: calc(var(--v, 0) * 70ms);
}

.ist-da .zeile > span,
.zeile.ist-da > span { transform: translateY(0); }

/* Köpergewebe über der ganzen Fläche.
   Carbonmatten liegen in 2/2-Köperbindung: diagonale Bündel, die im
   Schachbrett die Richtung wechseln. Genau das liegt hier als Grundton unter
   der Seite, so leise, dass man es eher als Material spürt als sieht.
   Fest verankert und ohne Mauszeigerfang, damit beim Scrollen nichts neu
   gezeichnet werden muss. */
.material {
  position: fixed;
  inset: 0;
  z-index: var(--z-korn);
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg,
      rgb(255 255 255 / 0.016) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg,
      rgb(255 255 255 / 0.016) 0 2px, transparent 2px 4px);
  background-size: 8px 8px;
}

:root[data-thema="hell"] .material {
  opacity: 0.6;
  background-image:
    repeating-linear-gradient(45deg,
      rgb(11 13 16 / 0.022) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg,
      rgb(11 13 16 / 0.022) 0 2px, transparent 2px 4px);
}

/* -- 9  Bausteine ---------------------------------------------------------- */

/* 9.1  Bildplatz
   Bis die echten Fotos da sind, steht hier eine getönte Fläche mit
   Gewebemuster. Liegt ein Bild vor, deckt es den Platz vollständig ab. */

.bildplatz {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--flaeche-2);
  isolation: isolate;
}

.bildplatz::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.028) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.028) 0 6px, transparent 6px 12px),
    radial-gradient(120% 90% at 25% 12%, rgb(226 55 44 / 0.13), transparent 62%);
}

:root[data-thema="hell"] .bildplatz::before {
  background-image:
    repeating-linear-gradient(45deg, rgb(12 13 15 / 0.035) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgb(12 13 15 / 0.035) 0 6px, transparent 6px 12px),
    radial-gradient(120% 90% at 25% 12%, rgb(200 31 24 / 0.12), transparent 62%);
}

/* Kleiner Vermerk in der Ecke, solange das Foto fehlt. Bewusst zurückhaltend,
   damit der Entwurf nicht wie eine Baustelle aussieht. */
.bildplatz__hinweis {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  margin: 0;
  padding: 0.3rem 0.6rem;
  font-family: var(--schrift-mass);
  font-size: 0.68rem;
  letter-spacing: 0;
  color: var(--text-2);
  /* Deckend, damit der Kontrast unabhängig vom Muster darunter gilt. */
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
}

.bildplatz > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Bild bewegt sich beim Überfahren minimal — nur wo bewusst gesetzt. */
.bildplatz--lebt > img,
.bildplatz--lebt::before {
  transition: transform 0.45s var(--weich);
}

a:hover .bildplatz--lebt > img,
a:hover .bildplatz--lebt::before { transform: scale(1.045); }

/* 9.2  Kopfbereich */

.kopfbild {
  position: relative;
  min-height: calc(100dvh - var(--kopf-hoehe));
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.kopfbild__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}

.kopfbild__text .fuehrung { margin-block: 1.5rem 2.3rem; max-width: 44ch; }

/* Das Bild läuft rechts aus dem Satzspiegel bis an den Fensterrand.
   Höhe führt, die Breite folgt dem Seitenverhältnis, damit der
   Kopfbereich in jedem Fenster vollständig sichtbar bleibt.

   Das Kopffoto ist im Studio vor schwarzem Grund entstanden. In der dunklen
   Fassung blendet es deshalb nach links in die Seitenfläche aus, statt in
   einem Rahmen zu stehen. In der hellen Fassung ginge das nicht auf, dort
   bekommt es eine Kante. */
.kopfbild__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  height: min(58vh, 32rem);
  width: auto;
  max-width: none;
  justify-self: end;
  margin-right: calc((100vw - min(100vw, var(--breite))) / -2 - var(--rand));
  /* Das Foto ist vor neutralem Studiogrund entstanden, der Seitengrund ist
     blaustichig. Ohne weiche Kante an allen drei sichtbaren Seiten bliebe die
     Grenze zwischen beiden erkennbar. Rechts läuft es ohnehin aus dem Fenster. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 26%),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 26%),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.kopfbild__bild .bildplatz { background: transparent; }
.kopfbild__bild .bildplatz::before { content: none; }

:root[data-thema="hell"] .kopfbild__bild {
  -webkit-mask-image: none;
  mask-image: none;
}

:root[data-thema="hell"] .kopfbild__bild .bildplatz {
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
}

@media (max-width: 62rem) {
  .kopfbild { min-height: 0; padding-block: 2.5rem 3.5rem; }
  .kopfbild__raster { grid-template-columns: 1fr; }
  .kopfbild__bild {
    aspect-ratio: 4 / 3;
    height: auto;
    width: auto;
    justify-self: stretch;
    margin-right: calc(var(--rand) * -1);
  }
}

/* 9.3  Abschnittskopf */

.kopfzeile {
  display: grid;
  gap: 1.1rem;
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* 9.4  Zwei Bereiche (Bildschirmhälften) */

.bereiche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.bereich {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
  min-height: clamp(24rem, 46vw, 34rem);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

.bereich + .bereich { border-left: 1px solid var(--linie); }

.bereich__grund {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--flaeche);
  transition: transform 0.45s var(--weich);
}

.bereich:hover .bereich__grund { transform: scale(1.04); }

.bereich__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--grund) 4%, color-mix(in oklab, var(--grund) 55%, transparent) 42%, transparent 78%);
}

.bereich__marke {
  font-family: var(--schrift-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rot-300);
}

.bereich__text {
  color: var(--text-2);
  max-width: 44ch;
}

.bereich__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--schrift-display);
  font-weight: 500;
  color: var(--text);
}

.bereich__mehr .sym { transition: transform 0.28s var(--weich); }
.bereich:hover .bereich__mehr .sym { transform: translate(4px, -4px); }

/* Ein roter Balken fährt beim Überfahren am oberen Rand ein. */
.bereich::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rot-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--weich);
  z-index: 1;
}

.bereich:hover::before,
.bereich:focus-visible::before { transform: scaleX(1); }

@media (max-width: 52rem) {
  .bereiche { grid-template-columns: 1fr; }
  .bereich + .bereich { border-left: 0; border-top: 1px solid var(--linie); }
  .bereich { min-height: 22rem; }
}

/* 9.5  Merkmalsliste ohne Kästen */

/* Zwei ungleiche Spalten statt vier gleicher Kacheln. Das liest sich als
   Text und nicht als Baukasten. */
.merkmale {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem) clamp(2rem, 5vw, 5rem);
  list-style: none;
  padding: 0;
}

@media (max-width: 46rem) {
  .merkmale { grid-template-columns: 1fr; }
}

/* Neben dem Spannungsprotokoll stehen die Merkmale untereinander. */
.merkmale--spalte {
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.merkmal {
  display: grid;
  gap: 0.7rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}

.merkmal__symbol {
  width: 2rem;
  height: 2rem;
  color: var(--rot-300);
}

.merkmal h3 { font-size: 1.16rem; letter-spacing: -0.02em; }

/* Zeilenlänge begrenzen. Neben dem Spannungsprotokoll ist die Spalte breit
   genug, dass Absätze sonst über 80 Zeichen laufen und schlecht lesbar werden. */
.merkmal p {
  color: var(--text-2);
  font-size: 0.98rem;
  max-width: 62ch;
}

/* 9.5b  Spannungsprotokoll
   Das Kennzeichen der Seite. Am Ende jedes Laufradbaus steht die gemessene
   Spannung jeder einzelnen Speiche. Die Felge zeichnet sich, dann spannen
   sich die Speichen von der Nabe nach außen, dann wachsen die Messbalken.
   Diese Reihenfolge ist der Bauablauf, nicht nur ein Effekt. */

.handarbeit {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 62rem) {
  .handarbeit { grid-template-columns: 1fr; }
  .handarbeit .rad { max-width: 26rem; margin-inline: auto; }
}

.rad { margin: 0; display: grid; gap: 1.5rem; }

.rad__bild {
  width: 100%;
  height: auto;
  overflow: visible;
}

.rad__felge {
  fill: none;
  stroke: var(--linie-stark);
  stroke-width: 13;
}

.rad__speiche {
  stroke: var(--text-3);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.rad__speiche--an { stroke: var(--text-2); stroke-width: 1; }

.rad__balken {
  stroke: var(--text-3);
  stroke-width: 3.5;
  stroke-linecap: butt;
}

.rad__balken--an { stroke: var(--rot-500); stroke-width: 4; }

.rad__flansch {
  fill: none;
  stroke: var(--linie-stark);
  stroke-width: 1.5;
}

.rad__nabe {
  fill: var(--flaeche-2);
  stroke: var(--linie-stark);
  stroke-width: 1.5;
}

/* Ruhezustand: noch nichts gezeichnet. */
@media (prefers-reduced-motion: no-preference) {
  .rad__felge {
    stroke-dasharray: var(--umfang);
    stroke-dashoffset: var(--umfang);
    transform: rotate(-90deg);
    transform-origin: center;
  }

  .rad__speiche,
  .rad__balken {
    stroke-dasharray: var(--laenge);
    stroke-dashoffset: var(--laenge);
  }

  .rad.ist-da .rad__felge {
    animation: rad-felge 1s var(--weich) forwards;
  }

  .rad.ist-da .rad__speiche {
    animation: rad-strich 0.55s var(--weich) forwards;
    animation-delay: calc(0.45s + var(--i) * 22ms);
  }

  .rad.ist-da .rad__balken {
    animation: rad-strich 0.4s var(--weich) forwards;
    animation-delay: calc(1.35s + var(--i) * 18ms);
  }
}

@keyframes rad-felge { to { stroke-dashoffset: 0; } }
@keyframes rad-strich { to { stroke-dashoffset: 0; } }

/* Das Protokoll unter dem Rad: Messwerte, wie sie im Bauprotokoll stehen. */
.rad__protokoll {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linie);
}

.rad__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.95rem;
}

.rad__was { color: var(--text-2); }

.rad__wert {
  font-family: var(--schrift-mass);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.rad__einheit {
  font-size: 0.72rem;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.rad__zeile:first-child .rad__wert { color: var(--rot-300); }

.rad__fussnote {
  padding-top: 0.85rem;
  font-family: var(--schrift-mass);
  font-size: 0.74rem;
  color: var(--text-3);
}

/* 9.6  Programm-Raster (vier Zellen, vier Einsatzbereiche) */

.programm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 1.25rem;
}

.programm > *:nth-child(1) { grid-column: span 2; }
.programm > *:nth-child(2) { grid-column: span 2; }
.programm > *:nth-child(3) { grid-column: span 2; }
.programm > *:nth-child(4) { grid-column: span 2; }

@media (min-width: 62rem) {
  .programm > *:nth-child(1) { grid-column: span 3; }
  .programm > *:nth-child(2) { grid-column: span 1; }
  .programm > *:nth-child(3) { grid-column: span 1; }
  .programm > *:nth-child(4) { grid-column: span 3; }
}

@media (max-width: 44rem) {
  .programm { grid-template-columns: 1fr; }
  .programm > * { grid-column: span 1 !important; }
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  min-height: 19rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s var(--weich), transform 0.3s var(--weich);
}

.karte:hover {
  border-color: var(--linie-stark);
  transform: translateY(-4px);
}

.karte__grund {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 0.45s var(--weich);
}

.karte:hover .karte__grund { transform: scale(1.05); }

.karte__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--flaeche) 6%, color-mix(in oklab, var(--flaeche) 45%, transparent) 48%, transparent 80%);
}

.karte h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
.karte p { color: var(--text-2); font-size: 0.97rem; max-width: 40ch; }

.karte__zeile {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--schrift-display);
  font-size: 0.9rem;
  color: var(--rot-300);
}

.karte__zeile .sym { transition: transform 0.28s var(--weich); }
.karte:hover .karte__zeile .sym { transform: translateX(4px); }

/* 9.7  Ablauf als Zeitachse mit mitwachsender Linie */

.ablauf {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-left: clamp(2.5rem, 5vw, 4.5rem);
  list-style: none;
  margin: 0;
}

.ablauf::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: clamp(0.6rem, 1.4vw, 1.2rem);
  width: 1px;
  background: var(--linie);
}

/* Die rote Linie wächst mit dem Scrollstand, wo der Browser Scrollzeitachsen kennt. */
.ablauf__fortschritt {
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: clamp(0.6rem, 1.4vw, 1.2rem);
  width: 1px;
  background: var(--rot-500);
  transform-origin: top;
  transform: scaleY(0);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ablauf__fortschritt {
      animation: linie-waechst linear both;
      animation-timeline: view();
      animation-range: entry 55% exit 30%;
    }
  }
}

@keyframes linie-waechst {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.schritt { position: relative; display: grid; gap: 0.7rem; }

.schritt__punkt {
  position: absolute;
  top: 0.35rem;
  left: calc(clamp(2.5rem, 5vw, 4.5rem) * -1 + clamp(0.6rem, 1.4vw, 1.2rem) - 5px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grund);
  border: 2px solid var(--rot-500);
}

.schritt h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.schritt p { color: var(--text-2); max-width: 58ch; }

/* 9.8  Athleten */

.athleten {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.athlet {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.athlet--gross { grid-column: span 6; }
.athlet--gross .athlet__bild { aspect-ratio: 4 / 3; }

.athlet__bild { aspect-ratio: 3 / 4; }

.athlet h3 { font-size: 1.25rem; }

.athlet__rolle {
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rot-300);
  font-family: var(--schrift-display);
}

.athlet__erfolge {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--text-2);
}

.athlet__erfolge li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.athlet__erfolge .sym {
  color: var(--rot-300);
  margin-top: 0.42em;
  width: 0.75rem;
  height: 0.75rem;
}

@media (max-width: 62rem) {
  .athlet, .athlet--gross { grid-column: span 6; }
}

@media (max-width: 40rem) {
  .athlet, .athlet--gross { grid-column: span 12; }
  .athlet__bild, .athlet--gross .athlet__bild { aspect-ratio: 4 / 3; }
}

/* 9.8b  Filme
   Die Aufnahmen liegen auf dem eigenen Server, nicht bei einem Videodienst.
   Deshalb ist kein Einwilligungsbanner nötig. Mit preload="none" wird nichts
   geladen, bevor jemand auf Abspielen tippt: die Seite bleibt leicht. */

.filme {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.filme > *:first-child { grid-column: 1 / -1; }

@media (max-width: 46rem) {
  .filme { grid-template-columns: 1fr; }
  .filme > *:first-child { grid-column: auto; }
}

.film {
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.film video {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  display: block;
}

.filme > *:first-child video { aspect-ratio: 16 / 9; }

.film figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--text-2);
}

.film__dauer {
  font-family: var(--schrift-mass);
  font-size: 0.8rem;
  color: var(--text-3);
  white-space: nowrap;
}

/* 9.8b2  Fächer
   Die Karten liegen wie ein aufgefächerter Stapel Abzüge: von der Mitte nach
   außen zunehmend gedreht und nach unten versetzt. Beim Überfahren richtet sich
   die Karte auf, wächst und kommt nach vorn.

   Die Werte je Karte rechnet der Generator aus und schreibt sie als
   --dreh, --x, --y und --z ins Markup. Hier steht nur, was damit passiert.
   Gehalten wird alles von CSS, dafür braucht es kein Skript. */

.faecher {
  position: relative;
  margin-inline: auto;
  /* Der Generator setzt Breite und Höhe passend zur Kartenzahl. */
  width: var(--buehne-breite);
  height: var(--buehne-hoehe);
}

.faecher__karte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--karte-breite);
  height: var(--karte-hoehe);
  margin-left: calc(var(--karte-breite) / -2);
  margin-top: calc(var(--karte-hoehe) / -2);
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche-2);
  overflow: hidden;
  cursor: pointer;
  transform:
    translate(calc(var(--x) * 1px), calc(var(--y) * 1px))
    rotate(calc(var(--dreh) * 1deg));
  z-index: var(--z);
  box-shadow:
    0 12px 28px rgb(0 0 0 / 0.34),
    0 2px 8px rgb(0 0 0 / 0.22);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.faecher__karte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.faecher__karte:hover,
.faecher__karte:focus-visible {
  transform:
    translate(calc(var(--x) * 1px), calc((var(--y) - 16) * 1px))
    rotate(0deg)
    scale(1.08);
  z-index: 99;
}

.faecher__karte:focus-visible {
  outline: 3px solid var(--rot-500);
  outline-offset: 3px;
}

/* Filme bekommen ein Abspielzeichen, damit man sie von Bildern unterscheidet. */
.faecher__film {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), transparent);
  color: #fff;
  font-family: var(--schrift-mass);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.faecher__film .sym { width: 0.9rem; height: 0.9rem; }

/* Auf schmalen Schirmen ist für einen Fächer kein Platz. Dort wird daraus ein
   Streifen, den man seitwärts wischt und der einrastet. */
@media (max-width: 52rem) {
  .faecher {
    width: auto;
    height: auto;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: 0.5rem 1.25rem;
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
    scrollbar-width: thin;
  }

  .faecher__karte {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    width: 14rem;
    height: 18.5rem;
    transform: none;
    scroll-snap-align: center;
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.28);
  }

  .faecher__karte:hover,
  .faecher__karte:focus-visible { transform: none; }
}

/* 9.8b3  Leuchtkasten
   Ein natives dialog-Element. Es bringt Fokusfalle, Abdunklung und das
   Schließen mit der Escape-Taste von Haus aus mit, dafür ist keine Bibliothek
   nötig. */

.leuchtkasten {
  width: min(92vw, 68rem);
  max-height: 92dvh;
  padding: 0;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  background: var(--flaeche);
  color: var(--text);
  overflow: hidden;
  /* Der Browser zentriert Dialoge über margin:auto. Das Zurücksetzen aller
     Außenabstände ganz oben in dieser Datei nimmt ihm diese Möglichkeit,
     deshalb hier ausdrücklich wieder herstellen. */
  margin: auto;
}

.leuchtkasten::backdrop {
  background: rgb(0 0 0 / 0.82);
  backdrop-filter: blur(3px);
}

.leuchtkasten__inhalt {
  display: grid;
  place-items: center;
  background: #000;
  min-height: 12rem;
}

.leuchtkasten__inhalt img,
.leuchtkasten__inhalt video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78dvh;
  object-fit: contain;
}

.leuchtkasten__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--linie);
  font-size: 0.96rem;
  color: var(--text-2);
}

.leuchtkasten__zu {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.25s var(--weich), background-color 0.25s var(--weich);
}

.leuchtkasten__zu:hover {
  border-color: var(--linie-stark);
  background: color-mix(in oklab, var(--text) 8%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .faecher__karte { transition: none; }
}

/* 9.8c  Bildstreifen für Aufnahmen ohne feste Zuordnung */

.streifen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.streifen figure { margin: 0; display: grid; gap: 0.6rem; }

.streifen img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--linie);
}

.streifen figure:nth-child(4n + 1) img,
.streifen figure:nth-child(4n + 4) img { aspect-ratio: 4 / 5; }

.streifen figcaption { font-size: 0.9rem; color: var(--text-2); }

/* 9.9  Zitat */

.zitat-block {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.zitat-block__bild { aspect-ratio: 1 / 1; }

.zitat {
  font-family: var(--schrift-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.24;
  letter-spacing: -0.03em;
  font-weight: 400;
  text-wrap: balance;
}

.zitat__wer {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.15rem;
  font-size: 0.95rem;
}

.zitat__wer strong { font-weight: 600; }
.zitat__wer span { color: var(--text-3); }

@media (max-width: 56rem) {
  .zitat-block { grid-template-columns: 1fr; }
  .zitat-block__bild { aspect-ratio: 3 / 2; max-width: 22rem; }
}

/* 9.10  Aufruf-Band */

.aufruf {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  padding: clamp(2.25rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  overflow: hidden;
}

.aufruf::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--rot-500);
}

.aufruf__wege {
  display: grid;
  gap: 0.9rem;
}

.wegzeile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 44px;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  font-size: 1.02rem;
  /* transform statt padding: eine Verschiebung über padding zwingt den
     Browser in jedem Bild zu einer neuen Layoutberechnung. */
  transition: transform 0.28s var(--weich), color 0.25s var(--weich);
}

.wegzeile:first-child { border-top: 1px solid var(--linie); }
.wegzeile:hover { transform: translateX(0.5rem); }
.wegzeile .sym { color: var(--rot-300); width: 1.25rem; height: 1.25rem; }
.wegzeile span:last-child { margin-left: auto; color: var(--text-3); font-size: 0.86rem; }

@media (max-width: 56rem) {
  .aufruf { grid-template-columns: 1fr; }
}

/* 9.11  Angaben-Paare (technische Eckdaten) */

.angaben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
}

.angabe {
  display: grid;
  gap: 0.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}

.angabe__wert {
  font-family: var(--schrift-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.angabe__was {
  font-size: 0.9rem;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--schrift-display);
}

.angabe p { font-size: 0.96rem; color: var(--text-2); }

/* 9.12  Klappliste (häufige Fragen) */

.klapp {
  border-top: 1px solid var(--linie);
}

.klapp__frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
  padding: 1.15rem 0;
  border: 0;
  border-bottom: 1px solid var(--linie);
  background: transparent;
  color: var(--text);
  font-family: var(--schrift-display);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s var(--weich);
}

.klapp__frage:hover { color: var(--rot-300); }

.klapp__frage .sym {
  flex: none;
  color: var(--rot-300);
  transition: transform 0.3s var(--weich);
}

.klapp__frage[aria-expanded="true"] .sym { transform: rotate(180deg); }

.klapp__antwort {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--weich);
  border-bottom: 1px solid transparent;
}

.klapp__antwort[data-offen="ja"] {
  grid-template-rows: 1fr;
  border-bottom-color: var(--linie);
}

.klapp__antwort > div { overflow: hidden; }

.klapp__antwort p {
  color: var(--text-2);
  max-width: 62ch;
  padding: 0.25rem 0 1.5rem;
}

/* 9.13  Leistungsliste TD Suspension */

/* Die erste Leistung liegt breit, die übrigen daneben. So bekommt die
   Reihe einen Schwerpunkt statt drei gleich großer Kästen. */
.leistungen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.leistungen > *:first-child { grid-column: 1 / -1; }

.leistungen > *:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.leistung__bild { aspect-ratio: 4 / 3; }

@media (max-width: 48rem) {
  .leistungen { grid-template-columns: 1fr; }
  .leistungen > *:first-child { grid-column: auto; grid-template-columns: 1fr; }
}

.leistung {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  transition: border-color 0.3s var(--weich), transform 0.3s var(--weich);
}

.leistung:hover { border-color: var(--linie-stark); transform: translateY(-3px); }
.leistung .sym { width: 1.9rem; height: 1.9rem; color: var(--rot-300); }
.leistung h3 { font-size: 1.2rem; }
.leistung p { color: var(--text-2); font-size: 0.97rem; }

.leistung ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-2);
}

.leistung li { display: flex; gap: 0.6rem; align-items: flex-start; }

.leistung li .sym {
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.45em;
  color: var(--rot-300);
}

/* 9.14  Seitenkopf der Unterseiten */

.seitenkopf {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}

.seitenkopf__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

.seitenkopf .fuehrung { margin-top: 1.4rem; }

@media (max-width: 56rem) {
  .seitenkopf__raster { grid-template-columns: 1fr; }
}

/* 9.15  Sprungleiste */

.sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}

.sprungleiste a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  color: var(--text-2);
  font-family: var(--schrift-display);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.25s var(--weich), border-color 0.25s var(--weich), background-color 0.25s var(--weich);
}

.sprungleiste a:hover {
  color: var(--text);
  border-color: var(--rot-500);
  background: color-mix(in oklab, var(--rot-500) 10%, transparent);
}

/* 9.16  Auslegungen: Bild oben, Angaben unten */

.auslegungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.auslegung {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  scroll-margin-top: calc(var(--kopf-hoehe) + 2rem);
}

.auslegung__bild { aspect-ratio: 16 / 10; }

.auslegung h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.auslegung > p { color: var(--text-2); }

.auslegung__daten {
  display: grid;
  gap: 0;
  margin: 0;
  font-size: 0.96rem;
}

.auslegung__daten > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-top: 1px solid var(--linie);
}

.auslegung__daten dt { color: var(--text-3); }

.auslegung__daten dd {
  margin: 0;
  color: var(--text);
  text-align: right;
  font-family: var(--schrift-mass);
  font-size: 0.88rem;
}

/* 9.17  Bausteine untereinander */

.bausteine { display: grid; gap: 0; }

.baustein {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--linie);
  align-items: start;
}

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

.baustein h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.baustein h3 .sym { color: var(--rot-300); width: 1.5rem; height: 1.5rem; flex: none; }
.baustein p { color: var(--text-2); max-width: 62ch; }
.baustein p + p { margin-top: 0.85rem; }

@media (max-width: 52rem) {
  .baustein { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* 9.18  Fließtext für Impressum und Datenschutz */

.rechtstext { max-width: 46rem; }

.rechtstext h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}

.rechtstext h3 {
  font-size: 1.1rem;
  margin-top: 2rem;
}

.rechtstext h2 + p,
.rechtstext h3 + p { margin-top: 0.9rem; }

.rechtstext p,
.rechtstext ul,
.rechtstext dl { margin-top: 1rem; color: var(--text-2); }

.rechtstext p:first-child { margin-top: 0; }

.rechtstext strong { color: var(--text); font-weight: 600; }
.rechtstext a { color: var(--text); }

.rechtstext ul {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.rechtstext dl { display: grid; gap: 0.6rem; }

.rechtstext dl > div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0.35rem 1.5rem;
}

.rechtstext dt { color: var(--text-3); }
.rechtstext dd { margin: 0; color: var(--text); }

@media (max-width: 34rem) {
  .rechtstext dl > div { grid-template-columns: 1fr; }
  .rechtstext dd { margin-bottom: 0.5rem; }
}

/* 9.19  Hinweisband für offene Inhalte */

.hinweis {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r);
  background: var(--flaeche);
  color: var(--text-2);
  font-size: 0.94rem;
}

.hinweis .sym { color: var(--rot-300); width: 1.2rem; height: 1.2rem; margin-top: 0.2em; }

/* -- 10  Formular ---------------------------------------------------------- */

.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.kontakt-spalte {
  position: sticky;
  top: calc(var(--kopf-hoehe) + 2rem);
  display: grid;
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
}

.kontakt-spalte h2 {
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}

@media (max-width: 62rem) {
  .kontakt-raster { grid-template-columns: 1fr; }
  .kontakt-spalte { position: static; }
}

.formular {
  display: grid;
  gap: 2rem;
}

.feldgruppe {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}

.feldgruppe > legend {
  font-family: var(--schrift-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 0;
  margin-bottom: 0.35rem;
}

.feldreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.feld { display: grid; gap: 0.5rem; }

.feld > label {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.feld__hilfe { font-size: 0.86rem; color: var(--text-3); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="number"],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  background: var(--flaeche);
  color: var(--text);
  font-size: 1rem;
  transition: border-color 0.25s var(--weich), background-color 0.25s var(--weich);
}

.feld textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.feld select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23a6abb3'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
  padding-right: 2.6rem;
}

.feld input::placeholder,
.feld textarea::placeholder { color: var(--text-3); opacity: 1; }

.feld input:hover,
.feld select:hover,
.feld textarea:hover { border-color: var(--text-3); }

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible { border-color: var(--rot-500); }

.feld [aria-invalid="true"] { border-color: var(--rot-500); border-width: 2px; }

.feld__fehler {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--rot-300);
}

.feld__fehler .sym { width: 1rem; height: 1rem; }
.feld__fehler[data-sichtbar="ja"] { display: flex; }

/* Auswahl als antippbare Schalter statt Radiopunkte */
.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.wahl input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.wahl label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  background: var(--flaeche);
  font-size: 0.96rem;
  cursor: pointer;
  transition: border-color 0.25s var(--weich), background-color 0.25s var(--weich), color 0.25s var(--weich);
}

.wahl label:hover { border-color: var(--text-3); }

.wahl input:checked + label {
  border-color: var(--rot-500);
  background: color-mix(in oklab, var(--rot-500) 14%, transparent);
  color: var(--text);
  font-weight: 500;
}

.wahl input:focus-visible + label {
  outline: 3px solid var(--rot-500);
  outline-offset: 3px;
}

/* Zustimmung */
.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.94rem;
  color: var(--text-2);
}

/* Das Kästchen selbst ist 26 Pixel groß. Weil das Label über for verknüpft
   ist, zählt sein gesamter Text als Trefferfläche mit. */
.zustimmung input[type="checkbox"] {
  width: 26px;
  height: 26px;
  margin-top: 0.05rem;
  accent-color: var(--rot-600);
  cursor: pointer;
}

.zustimmung label { cursor: pointer; padding-block: 0.15rem; }

.zustimmung a { color: var(--text); }

/* Falle für Maschinen — für Menschen unsichtbar und nicht erreichbar. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rückmeldung nach dem Absenden */
.rueckmeldung {
  display: none;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.1rem 1.35rem;
  border-radius: var(--r);
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
}

.rueckmeldung[data-sichtbar="ja"] { display: flex; }
.rueckmeldung .sym { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; flex: none; }
.rueckmeldung[data-art="gut"] { border-color: var(--rot-500); }
.rueckmeldung[data-art="gut"] .sym { color: var(--rot-300); }
.rueckmeldung[data-art="schlecht"] .sym { color: var(--rot-300); }
.rueckmeldung strong { display: block; margin-bottom: 0.15rem; color: var(--text); }
.rueckmeldung p { color: var(--text-2); font-size: 0.95rem; }

/* Ladezustand der Absendeschaltfläche. Die Sperre selbst setzt das Skript
   über das disabled-Attribut, damit auch die Eingabetaste nichts mehr auslöst. */
.knopf[data-laedt="ja"],
.knopf:disabled { pointer-events: none; opacity: 0.7; }
.knopf .sym--dreht { display: none; }
.knopf[data-laedt="ja"] .sym--dreht { display: block; animation: dreht 0.9s linear infinite; }
.knopf[data-laedt="ja"] .sym--ruhe { display: none; }

@keyframes dreht { to { transform: rotate(360deg); } }

/* -- 11  Fußzeile ---------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--flaeche);
}

.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.fuss__spalte h2 {
  font-family: var(--schrift-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.1rem;
}

/* 8 Pixel Abstand zwischen den Verweisen, damit auf dem Handy niemand
   den falschen trifft. */
.fuss__liste {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

/* Die Fußzeile ist auf dem Handy genauso in Gebrauch wie am Rechner. Ihre
   Verweise brauchen deshalb dieselbe Zielgröße wie alles andere: 44 Pixel
   hoch, mit Abstand dazwischen. */
.fuss__liste a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.98rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-block: 0.35rem;
  transition: color 0.25s var(--weich);
}

.fuss__liste a:hover { color: var(--text); }
.fuss__liste .sym { color: var(--text-3); width: 1rem; height: 1rem; }

.fuss__wort {
  font-family: var(--schrift-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 0.85rem;
}

.fuss__wort .marke__td { color: var(--rot-300); }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie);
  font-size: 0.88rem;
  color: var(--text-3);
}

.fuss__unten nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.fuss__unten a {
  color: var(--text-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.25rem;
}

.fuss__unten a:hover { color: var(--text); }

@media (max-width: 62rem) {
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 34rem) {
  .fuss__raster { grid-template-columns: 1fr; }
}

/* -- 12  Bewegung reduzieren ----------------------------------------------- */
/* Wer im Betriebssystem weniger Bewegung wünscht, bekommt eine ruhige Seite. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .zeigt { opacity: 1; transform: none; }
  .zeile > span { transform: none; }
  .ablauf__fortschritt { transform: scaleY(1); }
  .schublade__verweis,
  .schublade__fuss { opacity: 1; transform: none; }

  @view-transition { navigation: none; }
}