/* Holzbach Ventures: Seite (Rahmen, Kopfzeile, statische Sektionen, Impressum, Datenschutz).
   Präfix .s-, baut auf den Tokens aus basis.css auf. Zeitfunktion ausschließlich ease-in-out.
   Raster: 12 Spalten ab 720 px (Abstand 32 px), 4 Spalten mobil (Abstand 16 px), Inhaltsbreite = .wrap.
   Hilfslinien liegen 24 px außerhalb der Inhaltskante und laufen als eine Ebene durch die ganze Seite. */

:root {
  --s-kopf-h: 64px;
  --s-raster-linie: rgba(134, 147, 166, 0.17);   /* ergibt auf Papier etwa --hilfslinie, auf Nacht etwa --nacht-hilfslinie */
  --s-kreuz-hell: var(--tinte-3);
  --s-kreuz-nacht: #46556c;
  --s-champagner-licht: #f2e6c8;   /* Hover des Hauptknopfs auf Nacht, eine Stufe heller als --messing-hell */
  --s-luft: clamp(2.25rem, 1.4rem + 2.4vw, 4rem);
  --s-luft-gross: clamp(3.5rem, 2rem + 4.6vw, 7rem);
  --s-zeile-gr: clamp(1.25rem, 1rem + 0.85vw, 1.875rem);

  /* H2 als gemeinsame Handschrift für Seite und Szenen (F, M richten sich danach) */
  --s-h2-groesse: var(--gr-h2);       /* 30 bis 56 px */
  --s-h2-gewicht: 600;
  --s-h2-laufweite: -0.032em;
  --s-h2-zeilenabstand: 1.04;
}
@media (min-width: 720px) { :root { --s-kopf-h: 72px; } }

/* Anker landen unter der Kopfzeile; die gepinnten Bühnen reservieren den Platz selbst
   und landen deshalb genau auf ihrer Oberkante. */
main > section, body > footer { scroll-margin-top: var(--s-kopf-h); }
#vorgehen, #menschen { scroll-margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.s-menue-offen { overflow: hidden; }
body { position: relative; overflow-x: clip; }

.s-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.s-sprung {
  position: absolute; left: 16px; top: -120px; z-index: 100;
  padding: 12px 18px; background: var(--tinte); color: var(--weiss);
  font-weight: 600; text-decoration: none;
}
.s-sprung:focus { top: 12px; }

/* ---------- Zeichenrahmen: Hilfslinien und Passkreuze ---------- */
.s-raster { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; }
.s-raster__rahmen {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-inline: auto;
  width: min(100% - 32px, var(--max) - 32px);
  border-inline: 1px solid var(--s-raster-linie);
}
@media (min-width: 720px) { .s-raster { display: block; } }
.s-kreuz { position: absolute; width: 11px; height: 11px; margin-top: -5px; }
.s-kreuz::before, .s-kreuz::after { content: ""; position: absolute; background: var(--s-kreuz-hell); }
.s-kreuz::before { left: 5px; top: 0; width: 1px; height: 11px; }
.s-kreuz::after { left: 0; top: 5px; width: 11px; height: 1px; }
.s-kreuz--l { left: -6px; }
.s-kreuz--r { right: -6px; }
.s-kreuz--nacht::before, .s-kreuz--nacht::after { background: var(--s-kreuz-nacht); }

/* ---------- Bildmarke ---------- */
.s-marke__zeichen { width: 30px; height: 30px; flex: none; color: inherit; --s-strom: var(--messing-tief); --s-punkt: var(--signal); }

/* ---------- Kopfzeile ---------- */
.s-kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--s-kopf-h);
  background-color: var(--s-kopf-grund, var(--nacht)); color: var(--auf-nacht);
  border-bottom: 1px solid var(--nacht-linie);
  transition: background-color var(--t-ui) ease-in-out, border-color var(--t-ui) ease-in-out, color var(--t-ui) ease-in-out;
}
.s-kopf--hell { background-color: var(--s-kopf-grund, var(--papier)); color: var(--tinte); border-bottom-color: var(--linie); }
/* frei = ganz oben, ohne Fläche. Nur mit JS, sonst bleibt die Kopfzeile immer deckend. */
.js .s-kopf--frei:not(.ist-offen) { background-color: rgba(10, 21, 36, 0); border-bottom-color: rgba(38, 51, 70, 0); }
.js .s-kopf--hell.s-kopf--frei:not(.ist-offen) { background-color: rgba(245, 247, 250, 0); border-bottom-color: rgba(214, 221, 230, 0); }
@media (min-width: 720px) {
  .s-kopf::before {
    content: ""; position: absolute; top: 0; bottom: -1px; left: 0; right: 0; margin-inline: auto;
    width: min(100% - 32px, var(--max) - 32px);
    border-inline: 1px solid var(--s-raster-linie);
    pointer-events: none;
  }
  .js .s-kopf--frei:not(.ist-offen)::before { border-color: transparent; }
}
.s-kopf :focus-visible { outline-color: var(--signal-nacht); }
.s-kopf--hell :focus-visible { outline-color: var(--signal); }
.s-kopf .s-marke__zeichen { --s-strom: var(--messing); --s-punkt: var(--signal-nacht); }
.s-kopf--hell .s-marke__zeichen { --s-strom: var(--messing-tief); --s-punkt: var(--signal); }

.s-kopf__innen { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.s-marke {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: inherit; text-decoration: none;
}
.s-marke__name { font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.012em; line-height: 1; white-space: nowrap; }
.s-marke__name b { font-weight: 650; }

.s-nav__liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.s-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.003em;
  color: var(--auf-nacht-2); text-decoration: none;
  transition: color var(--t-micro) ease-in-out, border-color var(--t-micro) ease-in-out, background-color var(--t-micro) ease-in-out;
}
.s-nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-ui) ease-in-out;
}
.s-nav__link:hover, .s-nav__link[aria-current="true"] { color: var(--auf-nacht); }
.s-nav__link:hover::after, .s-nav__link[aria-current="true"]::after { transform: scaleX(1); }
.s-kopf--hell .s-nav__link { color: var(--tinte-2); }
.s-kopf--hell .s-nav__link:hover, .s-kopf--hell .s-nav__link[aria-current="true"] { color: var(--tinte); }
.s-nav__link--kontakt { margin-left: 14px; padding: 0 18px; color: var(--auf-nacht); border: 1px solid rgba(238, 242, 248, 0.34); }
.s-nav__link--kontakt::after { display: none; }
.s-nav__link--kontakt:hover, .s-nav__link--kontakt[aria-current="true"] { border-color: var(--auf-nacht); }
.s-kopf--hell .s-nav__link--kontakt { color: var(--tinte); border-color: var(--linie); }
.s-kopf--hell .s-nav__link--kontakt:hover, .s-kopf--hell .s-nav__link--kontakt[aria-current="true"] { border-color: var(--tinte); color: var(--tinte); }
.s-nav .s-nav__anfrage { display: none; }

.s-menue-knopf { display: none; }
@media (max-width: 759px) {
  html:not(.js) .s-nav { display: block; }
  html:not(.js) .s-nav__liste li:not(:last-child), html:not(.js) .s-nav .s-nav__anfrage { display: none; }
  html:not(.js) .s-nav .s-nav__link--kontakt {
    display: inline-flex; width: auto; min-height: 40px; margin: 0; padding: 0 16px;
    font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.003em;
    border: 1px solid rgba(238, 242, 248, 0.34);
  }
  .js .s-menue-knopf {
    display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px 0 14px; margin-right: -2px;
    background: none; border: 0; color: inherit; cursor: pointer;
    font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.003em;
  }
  .s-menue-knopf__icon { position: relative; width: 22px; height: 12px; }
  .s-menue-knopf__icon::before, .s-menue-knopf__icon::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
    transition: transform var(--t-ui) ease-in-out, top var(--t-ui) ease-in-out;
  }
  .s-menue-knopf__icon::before { top: 2px; }
  .s-menue-knopf__icon::after { top: 8.5px; }
  .ist-offen .s-menue-knopf__icon::before { top: 5.25px; transform: rotate(45deg); }
  .ist-offen .s-menue-knopf__icon::after { top: 5.25px; transform: rotate(-45deg); }

  .js .s-nav {
    position: fixed; top: var(--s-kopf-h); left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: 32px;
    padding: 12px 16px 32px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--s-kopf-grund, var(--nacht)); color: var(--auf-nacht);
    visibility: hidden; opacity: 0;
    transition: opacity var(--t-ui) ease-in-out, visibility var(--t-ui) ease-in-out;
  }
  .js .s-kopf--hell .s-nav { background: var(--s-kopf-grund, var(--papier)); color: var(--tinte); }
  .js .ist-offen .s-nav { visibility: visible; opacity: 1; }
  .s-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .s-nav__link, .s-kopf--hell .s-nav__link {
    display: flex; width: 100%; min-height: 64px; padding: 0;
    font-size: 1.75rem; font-weight: 500; letter-spacing: -0.024em; color: inherit;
    border-bottom: 1px solid var(--nacht-linie);
  }
  .s-kopf--hell .s-nav__link { border-bottom-color: var(--linie); }
  .s-nav__link::after { display: none; }
  .s-nav__link--kontakt, .s-kopf--hell .s-nav__link--kontakt { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--nacht-linie); color: inherit; }
  .s-kopf--hell .s-nav__link--kontakt { border-bottom-color: var(--linie); }
  .s-nav__link[aria-current="true"] { color: inherit; }
  .s-nav .s-nav__anfrage { display: inline-flex; width: 100%; }
}

/* ---------- Knöpfe (ohne Pfeile) ---------- */
.s-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.006em; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: 0;
  transition: background-color var(--t-ui) ease-in-out, border-color var(--t-ui) ease-in-out, color var(--t-ui) ease-in-out;
}
/* Hauptknopf: auf Nacht in Messing hell, der Farbe der ruhigen Strömung; auf hellem Grund in Tinte */
.s-knopf--primaer { background-color: var(--tinte); color: var(--papier); }
.s-knopf--primaer:hover { background-color: var(--nacht-2); }
[data-grund="nacht"] .s-knopf--primaer, .s-kopf:not(.s-kopf--hell) .s-knopf--primaer { background-color: var(--messing-hell); color: var(--nacht); }
[data-grund="nacht"] .s-knopf--primaer:hover, .s-kopf:not(.s-kopf--hell) .s-knopf--primaer:hover { background-color: var(--s-champagner-licht); }
/* Zweiter Weg als Textlink mit Haarlinie, gleiche Höhe wie der Knopf */
.s-knopf--text {
  padding: 0 2px; background: none; color: var(--tinte); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.34em;
  text-decoration-color: rgba(12, 26, 43, 0.35);
  transition: text-decoration-color var(--t-ui) ease-in-out, color var(--t-ui) ease-in-out;
}
.s-knopf--text:hover { text-decoration-color: currentColor; }
[data-grund="nacht"] .s-knopf--text { color: var(--auf-nacht); text-decoration-color: rgba(238, 242, 248, 0.42); }
[data-grund="nacht"] .s-knopf--text:hover { text-decoration-color: var(--auf-nacht); }

/* ---------- Gemeinsame Bausteine ---------- */
.s-sektion { position: relative; padding-block: var(--sektion); background: var(--papier); color: var(--tinte); }
.s-sektion--nacht { background: var(--nacht); color: var(--auf-nacht); }
.s-gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
.s-gitter > * { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .s-gitter { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte-abstand); }
}

.s-h2 {
  margin: 0;
  font-size: var(--s-h2-groesse); line-height: var(--s-h2-zeilenabstand);
  font-weight: var(--s-h2-gewicht); letter-spacing: var(--s-h2-laufweite);
  text-wrap: balance;
}
.s-h3 { margin: 0; font-size: var(--gr-h3); line-height: 1.2; font-weight: 600; letter-spacing: -0.016em; }
.s-text-gross { margin: 0; font-size: var(--gr-lead); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.s-sektion--nacht .s-text-gross { color: var(--auf-nacht-2); }

/* Zeilenliste mit Haarlinien (Wann wir gut passen, Handschlagqualität) */
.s-zeilen { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.s-zeile {
  position: relative;
  padding-block: clamp(1.375rem, 1.1rem + 0.8vw, 2rem) clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem);
  font-size: var(--s-zeile-gr); line-height: 1.28; font-weight: 500; letter-spacing: -0.016em;
  text-wrap: pretty;
}
.s-zeile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--linie); transform-origin: 0 50%;
}
.s-zeilen--nacht { border-bottom-color: var(--nacht-linie); }
.s-zeilen--nacht .s-zeile::before { background: var(--nacht-linie); }
.s-zeile__text { display: block; }

/* Ein Enthüllungsmuster: erst zeichnen sich die Linien, dann erscheint der Text. Nur mit Bewegung. */
@media (prefers-reduced-motion: no-preference) {
  .s-bewegt .s-zeile.s-enthuellt::before { transform: scaleX(0); transition: transform var(--t-draw) ease-in-out; }
  .s-bewegt .s-zeile.s-enthuellt .s-zeile__text { opacity: 0; transition: opacity var(--t-ui) ease-in-out 250ms; }
  .s-bewegt .s-zeile.s-enthuellt.ist-sichtbar::before { transform: scaleX(1); }
  .s-bewegt .s-zeile.s-enthuellt.ist-sichtbar .s-zeile__text { opacity: 1; }
}

/* ---------- 1 Hero ---------- */
.s-held {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh;
  min-height: max(36rem, min(100svh, 90rem));
  background: var(--nacht); color: var(--auf-nacht);
}
.s-held__inhalt {
  position: relative; z-index: 2;
  container-type: inline-size;
  pointer-events: none;
  padding-top: calc(var(--s-kopf-h) + clamp(11rem, 22vh, 20rem));
  padding-bottom: clamp(4.5rem, 9vh, 6.5rem);   /* unteres Band bleibt frei für die Abbildungsunterschrift */
}
.s-held__inhalt > * { pointer-events: auto; width: fit-content; max-width: 100%; }
.s-held__zeile {
  margin: 0 0 clamp(1rem, 2.6vh, 1.75rem);
  font-size: var(--gr-klein); font-weight: 500; letter-spacing: 0.004em; color: var(--auf-nacht-2);
}
.s-held__titel {
  margin: 0 0 0 -0.045em;
  font-size: 13.4cqi; line-height: 0.98; font-weight: 640; letter-spacing: -0.04em;
}
.s-held__z1 { display: block; white-space: nowrap; }
/* Zeile 2: bis --kurs 0,35 (Intro) direkt, danach 2,2-mal so schnell, volle Breite bei 0,645,
   damit die Wirkung sichtbar ist, solange die Zeile noch im Bild steht. */
.s-held__z2 {
  --s-k: min(1, max(var(--kurs, 1), calc(0.35 + (var(--kurs, 1) - 0.35) * 2.2)));
  display: block;
  font-stretch: calc(62% + 50% * var(--s-k));
  font-weight: calc(380 + 280 * var(--s-k));
  letter-spacing: calc(-0.012em - 0.028em * var(--s-k));
}
.s-held__teil { display: block; white-space: nowrap; }
.s-kurs-start .s-held { --kurs: 0; }
.s-kurs-frei .s-held__z2 { transition: font-stretch 1.2s ease-in-out, font-weight 1.2s ease-in-out, letter-spacing 1.2s ease-in-out; }
.s-held__lead {
  margin: clamp(1.25rem, 3.2vh, 2.25rem) 0 0;
  max-width: 31em;
  font-size: var(--gr-lead); line-height: 1.5; color: var(--auf-nacht);
  text-wrap: pretty;
}
.s-held__knoepfe { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(1.5rem, 4vh, 2.75rem); width: 100%; }
.s-held__knoepfe .s-knopf { width: 100%; }
@media (min-width: 520px) {
  .s-held__knoepfe { flex-direction: row; flex-wrap: wrap; width: fit-content; gap: 12px 32px; }
  .s-held__knoepfe .s-knopf { width: auto; }
}
@media (min-width: 720px) {
  .s-held__titel { font-size: 8.4cqi; }
  .s-held__z2 { white-space: nowrap; }
  .s-held__teil { display: inline; }
}
@media (min-width: 1024px) {
  .s-held__inhalt { padding-top: calc(var(--s-kopf-h) + 6rem); }
  .s-held__titel { font-size: min(5.5rem, 6.3cqi); }
}
/* Große Bildschirme: H1 wächst mit, aber Zeile 2 (bei --kurs 1 rund 10,95 em breit) endet immer
   mindestens 32 px vor dem Gradbogen des Ruders (Nabe bei 64 % plus 172 px je Maßstab 1).
   Daraus: Schriftgröße höchstens 1,28vw + 72px. */
@media (min-width: 1440px) {
  .s-held__titel { font-size: min(clamp(5.5rem, 2.4rem + 3.6vw, 7.25rem), calc(1.28vw + 72px)); }
}
/* Große und hohe Bildschirme: Textblock etwas höher, damit Zeile 2 über der Ruderzeichnung endet
   (Nabe bei 82 % der Hero-Höhe) und der Hero nicht unten klebt. */
@media (min-width: 1680px) and (min-height: 1000px) {
  .s-held__inhalt { padding-bottom: clamp(6.5rem, 14vh, 14rem); }
}

/* ---------- 2 Ausgangslage ---------- */
.s-ausgangslage__h { font-size: clamp(2rem, 1rem + 3.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.036em; }
.s-breit { font-stretch: 125%; letter-spacing: -0.028em; }
.s-ausgangslage__text { margin-top: var(--s-luft-gross); max-width: 29em; }
@media (min-width: 720px) {
  .s-ausgangslage__h { grid-column: 1 / span 11; }
  .s-ausgangslage__text { grid-column: 5 / span 8; }
}
@media (min-width: 1024px) {
  .s-ausgangslage__h { grid-column: 1 / span 10; }
  .s-ausgangslage__text { grid-column: 7 / span 6; }
}

/* ---------- 3 Übernehmen oder beteiligen ---------- */
.s-einstieg { background: var(--weiss); border-top: 1px solid var(--hilfslinie); }
.s-wege {
  container-type: inline-size;
  display: grid;
  margin-top: var(--s-luft-gross);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.s-weg { padding-block: clamp(2.75rem, 2rem + 2.4vw, 4.5rem) clamp(2.5rem, 2rem + 2vw, 4rem); min-width: 0; }
.s-weg + .s-weg { border-top: 1px solid var(--linie); }
.s-weg__kopf { position: relative; width: fit-content; max-width: 100%; padding-top: 3.5rem; font-size: min(14cqi, 7rem); }
.s-weg__wort { margin: 0 0 0 -0.04em; font-size: 1em; line-height: 0.9; letter-spacing: -0.03em; white-space: nowrap; }
.s-weg--uebernahme .s-weg__wort { font-stretch: 125%; font-weight: 760; }
.s-weg--beteiligung .s-weg__wort { font-stretch: 62%; font-weight: 300; letter-spacing: -0.012em; }
.s-weg__text { margin-top: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); max-width: 26em; color: var(--tinte-2); }

/* Maßlinie: misst die gesetzte Breite des Worts (45-Grad-Endstriche, Wert mittig darüber) */
.s-mass { --s-mass-a: 27px; position: absolute; top: 0; left: 0; right: 0.01em; height: 3.5rem; pointer-events: none; }
.s-mass__linie { position: absolute; left: 0; right: 0; bottom: var(--s-mass-a); height: 1px; background: var(--tinte-3); transform-origin: 50% 50%; }
.s-mass__linie::before, .s-mass__linie::after { content: ""; position: absolute; top: -6px; width: 1px; height: 18px; background: var(--tinte-3); }
.s-mass__linie::before { left: 0; }
.s-mass__linie::after { right: 0; }
.s-mass::before, .s-mass::after {
  content: ""; position: absolute; bottom: calc(var(--s-mass-a) - 4.5px); width: 1px; height: 11px;
  background: var(--tinte); transform: rotate(45deg);
}
.s-mass::before { left: -0.5px; }
.s-mass::after { right: -0.5px; }
.s-mass__wert { position: absolute; left: 50%; bottom: calc(var(--s-mass-a) + 8px); transform: translateX(-50%); white-space: nowrap; color: var(--tinte-2); }
@media (prefers-reduced-motion: no-preference) {
  .s-bewegt .s-enthuellt .s-mass__linie { transform: scaleX(0); transition: transform var(--t-draw) ease-in-out; }
  .s-bewegt .s-enthuellt .s-mass::before, .s-bewegt .s-enthuellt .s-mass::after,
  .s-bewegt .s-enthuellt .s-mass__wert { opacity: 0; transition: opacity var(--t-ui) ease-in-out 700ms; }
  .s-bewegt .s-enthuellt.ist-sichtbar .s-mass__linie { transform: scaleX(1); }
  .s-bewegt .s-enthuellt.ist-sichtbar .s-mass::before, .s-bewegt .s-enthuellt.ist-sichtbar .s-mass::after,
  .s-bewegt .s-enthuellt.ist-sichtbar .s-mass__wert { opacity: 1; }
  .s-bewegt .s-enthuellt .s-weg--beteiligung .s-mass__linie { transition-delay: 150ms; }
  .s-bewegt .s-enthuellt .s-weg--beteiligung .s-mass__wert { transition-delay: 850ms; }
}

@media (min-width: 1024px) {
  .s-wege { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte-abstand); }
  .s-weg__kopf { font-size: 8cqi; }
  .s-weg--uebernahme { grid-column: 1 / span 7; padding-right: 8px; }
  .s-weg--beteiligung {
    grid-column: 8 / span 5;
    border-left: 1px solid var(--linie);
    padding-left: calc((100cqi - 11 * var(--spalte-abstand)) / 12 + var(--spalte-abstand) - 1px);
  }
  .s-weg + .s-weg { border-top: 0; }
}

.s-passung { margin-top: var(--s-luft-gross); row-gap: 1.25rem; }
.s-passung__h { font-size: var(--s-zeile-gr); line-height: 1.28; font-weight: 640; letter-spacing: -0.018em; }
/* Kopfspalte als Tabellenkopf: eigene Haarlinie auf Höhe der ersten Zeilenlinie (nur wenn nebeneinander) */
@media (min-width: 1024px) {
  .s-passung__h.s-kopfspalte { border-top: 1px solid var(--linie); padding-top: clamp(1.375rem, 1.1rem + 0.8vw, 2rem); }
}
@media (min-width: 1200px) {
  .s-grundsaetze__kopf.s-kopfspalte { border-top: 1px solid var(--nacht-linie); padding-top: clamp(1.375rem, 1.1rem + 0.8vw, 2rem); }
}
.s-passung__liste .s-zeile { font-weight: 400; color: var(--tinte); }
@media (min-width: 1024px) {
  .s-passung__h { grid-column: 1 / span 4; }
  .s-passung__liste { grid-column: 5 / span 8; }
}

/* ---------- 6 Handschlagqualität ---------- */
.s-grundsaetze { border-top: 1px solid var(--nacht-linie); }
.s-grundsaetze__kopf { margin-bottom: var(--s-luft); }
.s-grundsaetze__kopf .s-h2 { line-height: 1; }
.s-grundsaetze__unter { margin-top: 1rem; }
.s-grundsaetze__liste .s-zeile { font-size: clamp(1.375rem, 1rem + 1.15vw, 2.125rem); line-height: 1.24; font-weight: 450; letter-spacing: -0.02em; color: var(--auf-nacht); }
@media (min-width: 720px) {
  .s-grundsaetze__liste { grid-column: 3 / span 10; }
}
@media (min-width: 1200px) {
  .s-grundsaetze__kopf { grid-column: 1 / span 5; align-self: start; margin: 0; }
  .s-grundsaetze__liste { grid-column: 6 / span 7; }
}

/* ---------- 8 Grundsatz ---------- */
.s-grundsatz > .wrap { container-type: inline-size; }
.s-grundsatz__satz { margin: 0 0 0 -0.04em; font-size: 14.2cqi; line-height: 1; letter-spacing: -0.035em; font-weight: 700; }
.s-grundsatz__ki { display: block; font-stretch: 62%; font-weight: 300; letter-spacing: -0.012em; color: var(--signal); }
.s-grundsatz__mensch { display: block; font-stretch: 112%; font-weight: 700; color: var(--tinte); }
.s-grundsatz__teil { display: block; white-space: nowrap; }
.s-grundsatz__text { margin-top: var(--s-luft); max-width: 24em; }
@media (min-width: 720px) {
  .s-grundsatz__satz { font-size: 8cqi; }
  .s-grundsatz__teil { display: inline; }
  .s-grundsatz__mensch { white-space: nowrap; }
  .s-grundsatz__text { grid-column: 7 / span 6; }
}
@media (min-width: 1024px) {
  .s-grundsatz__text { grid-column: 8 / span 5; }
}

/* ---------- 9 Kontakt ---------- */
.s-kontakt { background: var(--weiss); border-top: 1px solid var(--hilfslinie); }
.s-kontakt > .wrap { container-type: inline-size; }
.s-kontakt__text { margin-top: 1.5rem; }
.s-kontakt__mail { margin: var(--s-luft-gross) 0 0; }
.s-mail {
  position: relative; display: inline-block;
  margin-left: -0.045em; padding-bottom: 0.1em;
  font-size: 9.6cqi; font-weight: 600; letter-spacing: -0.045em; line-height: 1;
  color: var(--tinte); text-decoration: none; white-space: nowrap;
  transition: color var(--t-ui) ease-in-out;
}
.s-mail::after {
  content: ""; position: absolute; left: 0.045em; right: 0; bottom: 0; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-reveal) ease-in-out;
}
.s-mail:hover, .s-mail:focus-visible { color: var(--signal); }
.s-mail:hover::after, .s-mail:focus-visible::after { transform: scaleX(1); }
.s-kontakt__adresse {
  margin-top: var(--s-luft); padding-top: 1.25rem; border-top: 1px solid var(--linie);
  font-style: normal; font-size: var(--gr-text); color: var(--tinte-2);
}
@media (min-width: 720px) {
  .s-kontakt__h { grid-column: 1 / span 10; }
  .s-kontakt__text { grid-column: 1 / span 8; }
}
@media (min-width: 1024px) {
  .s-kontakt__h { grid-column: 1 / span 8; }
  .s-kontakt__text { grid-column: 1 / span 6; }
}

/* ---------- 10 Fuß mit Impressum (Schriftfeld) ---------- */
.s-fuss {
  position: relative;
  background: var(--papier); color: var(--tinte-2);
  border-top: 1px solid var(--hilfslinie);
  padding-top: clamp(4rem, 2.5rem + 4vw, 7rem);
  font-size: var(--gr-klein); line-height: 1.55;
}
.s-fuss__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.75rem; }
.s-fuss__h { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--tinte); }
.s-fuss__angaben { margin: 0; }
.s-schriftfeld {
  margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
}
.s-feld { min-width: 0; padding: 0.875rem 1.125rem 1rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.s-feld dt { font-stretch: 70%; font-weight: 500; font-size: var(--gr-mess); letter-spacing: 0.01em; line-height: 1.35; color: var(--tinte-2); }
.s-feld dd { margin: 0.375rem 0 0; color: var(--tinte); overflow-wrap: break-word; }
@media (max-width: 599px) {
  .s-feld { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: 12px; padding: 0.75rem 0.875rem 0.8125rem; }
  .s-feld dt { padding-top: 0.15em; }
  .s-feld dd { margin: 0; }
  .s-feld--breit { display: block; }
  .s-feld--breit dd { margin-top: 0.375rem; }
}
.s-feld a { text-decoration-color: var(--linie); }
.s-feld a:hover { color: var(--signal); text-decoration-color: currentColor; }
@media (min-width: 600px) {
  .s-schriftfeld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-feld--breit { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .s-schriftfeld { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-feld { padding: 1rem 1.25rem 1.125rem; }
}
.s-fuss__offenlegung { margin: 1.5rem 0 0; max-width: 62em; }
.s-fuss--kurz { padding-top: 0; }
.s-fuss--kurz .s-fuss__leiste { margin-top: 0; border-top: 0; padding-block: 1.75rem 2rem; }
.s-fuss__leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-block: 1.25rem 1.75rem;
  border-top: 1px solid var(--linie);
}
.s-fuss__marke { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.s-fuss__marke .s-marke__zeichen { width: 24px; height: 24px; color: var(--tinte); }
.s-fuss__link, .s-recht a {
  color: var(--tinte); text-decoration-color: var(--linie); text-underline-offset: 0.22em;
  transition: color var(--t-micro) ease-in-out, text-decoration-color var(--t-micro) ease-in-out;
}
.s-fuss__link { display: inline-flex; align-items: center; min-height: 44px; }
.s-fuss__link:hover, .s-recht a:hover { color: var(--signal); text-decoration-color: currentColor; }

/* ---------- Datenschutz ---------- */
.s-recht { padding-top: calc(var(--s-kopf-h) + clamp(4rem, 2rem + 6vw, 8rem)); }
.s-recht__h { margin: 0; font-size: clamp(2.75rem, 1rem + 6vw, 6rem); line-height: 0.98; font-weight: 640; letter-spacing: -0.04em; }
.s-recht__text { margin-top: var(--s-luft-gross); }
.s-recht__text { max-width: 44rem; }
.s-recht__absatz { margin: 0; padding-block: 1.375rem 1.5rem; border-top: 1px solid var(--linie); color: var(--tinte-2); text-wrap: pretty; }
.s-recht__absatz:last-child { border-bottom: 1px solid var(--linie); }
.s-recht__absatz strong { color: var(--tinte); font-weight: 600; }
.s-recht__absatz--lead { font-size: var(--gr-lead); line-height: 1.5; color: var(--tinte); }
@media (min-width: 1024px) {
  .s-recht__text { grid-column: 5 / span 8; }
}

/* ---------- Druck ---------- */
@media print {
  .s-kopf, .s-raster, .s-sprung { display: none !important; }
  .s-zeile__text, .s-mass__wert, .s-mass::before, .s-mass::after { opacity: 1 !important; }
  .s-zeile::before, .s-mass__linie { transform: none !important; }
}