/* Noxberg · Startseite
   Richtung: „Die bewährte Ruhe“ (.impeccable/surfaces/obrox-index-html.md)
   Farben und Maße nur über die Variablen in :root ändern. Eigene Anpassungen in tweaks.css. */

@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/funnel-display-300-800.woff2") format("woff2"); }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/funnel-sans-300-800.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Marke */
  --nightshade: #181914;
  --olivine: #a8b28f;
  --smoke: #f3f3f5;
  --weiss: #ffffff;

  /* Abgeleitet */
  --ink: var(--nightshade);
  --ink-2: #575853;          /* Fließtext zweite Ebene, 6.6:1 auf Smoke */
  --ink-3: #85867f;          /* nur Linien und Zeichen, nie Text */
  --olive-ink: #525645;      /* Oliv als Schrift auf hell */
  --olive-soft: #dce0d6;
  --olive-mist: #eceee8;
  --line: #e2e3e5;
  --line-2: #cfd0d2;
  --fehler: #9b3b2e;

  --night-1: #f3f3f5;
  --night-2: #c6c7c1;
  --night-3: #a3a49d;        /* kleine Schrift auf Nightshade, 6.9:1 */
  --line-night: rgba(243, 243, 245, .14);

  /* Schrift */
  --font-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --font-text: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hero: clamp(3rem, .9rem + 6.2vw, 6.75rem);
  --t-h2: clamp(2.25rem, 1.2rem + 2.9vw, 4rem);
  --t-h3: clamp(1.375rem, 1.15rem + .6vw, 1.75rem);
  --t-lead: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --t-text: 1.0625rem;
  --t-klein: .9375rem;
  --t-mini: .8125rem;
  --t-steuer: 1rem;                                      /* Knöpfe und Eingabefelder (iOS zoomt unter 16 px) */
  --t-gross: clamp(1.0625rem, 1rem + .25vw, 1.25rem);   /* Sätze unter dem Einstieg, Fragen */
  --t-titel-klein: 1.25rem;                             /* Rollen, Datenpunkte */
  --t-figur: clamp(2rem, 1.6rem + 1vw, 2.5rem);         /* Preise */
  --t-marke: .6875rem;                                  /* Symbolbild-Marke */

  /* Raum */
  --gx: clamp(16px, 5vw, 72px);
  --max: 1296px;
  --sektion: clamp(88px, 11vw, 168px);
  --radius: 14px;
  --radius-gross: 22px;

  /* Bewegung */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dauer: 700ms;

  /* Schatten */
  --schatten-karte: 0 0 0 1px rgba(24, 25, 20, .04), 0 2px 4px rgba(24, 25, 20, .05), 0 18px 36px -18px rgba(24, 25, 20, .26);
  --schatten-knopf: 0 1px 1px rgba(24, 25, 20, .12), 0 8px 20px -8px rgba(24, 25, 20, .45);

  --kopf-h: 72px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0;
  background: var(--smoke);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-text);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--olive-soft); color: var(--ink); }
:root { accent-color: var(--nightshade); }
input, textarea { caret-color: var(--nightshade); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.dunkel :focus-visible { outline-color: var(--smoke); }
.dunkel .formular :focus-visible { outline-color: var(--ink); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-defs { position: absolute; overflow: hidden; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--ink); color: var(--smoke); padding: 12px 18px; border-radius: 10px;
  text-decoration: none; font-weight: 600; transition: top .2s;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gx)); margin-inline: auto; padding-inline: var(--gx); }
.sektion { padding-block: var(--sektion); }

.ziffern { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Typografie ---------- */
.titel-hero, .titel-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.titel-hero { font-size: var(--t-hero); line-height: .96; }
.titel-h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.035em; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; max-width: 40ch; }
.dunkel .lead { color: var(--night-2); }

.hinweis { font-size: var(--t-klein); line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.hinweis--dunkel { color: var(--night-2); }

/* ---------- Knöpfe und Links ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: var(--smoke);
  font-weight: 600; font-size: var(--t-steuer); letter-spacing: -0.005em; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--schatten-knopf);
  transition: background-color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.knopf svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease-out); }
.knopf:hover { background: #2c2d27; }
.knopf:hover svg { transform: translateX(3px); }
.knopf:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(24, 25, 20, .12); }
.knopf--klein { min-height: 42px; padding: 0 18px; font-size: var(--t-klein); box-shadow: none; }
.knopf--voll { width: 100%; }
.knopf[disabled], .knopf[aria-busy="true"] { opacity: .6; cursor: progress; }

.telefon-link { color: var(--ink-2); text-decoration: none; font-size: var(--t-klein); }
.telefon-link span { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; transition: border-color .2s; }
.telefon-link:hover span { border-color: var(--ink); }
.telefon-link--dunkel { color: var(--night-2); }
.telefon-link--dunkel span { color: var(--smoke); border-color: var(--line-night); }
.telefon-link--dunkel:hover span { border-color: var(--smoke); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-2); padding-bottom: 3px;
  transition: border-color .2s;
}
.text-link svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.text-link:hover { border-color: var(--ink); }
.text-link:hover svg { transform: translateX(3px); }

.mini-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: var(--smoke);
  font-size: .8125rem; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s, transform .15s;
}
.mini-knopf:hover { background: #2c2d27; }
.mini-knopf:active { transform: scale(.97); }
.mini-knopf--statisch { cursor: default; }

/* ---------- Status-Punkte (Oliv nur für freigegeben) ---------- */
.status { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.status--wartet { border: 2px solid var(--ink); background: transparent; }
.status--laeuft { background: var(--line-2); }
.status--frei { background: var(--olivine); box-shadow: 0 0 0 3px var(--olive-soft); }

/* ---------- Fotos ---------- */
.foto { position: relative; overflow: hidden; border-radius: var(--radius-gross); background: #dfe0dc; isolation: isolate; }
.foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(.98); }
.foto::after {
  content: "Symbolbild";
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(24, 25, 20, .7); color: rgba(243, 243, 245, .95);
  font-size: var(--t-marke); font-weight: 500; letter-spacing: .01em; line-height: 1.3;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--smoke);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.kopf.ist-gescrollt { border-bottom-color: var(--line); }
.kopf__innen {
  display: flex; align-items: center; gap: 28px;
  max-width: calc(var(--max) + 2 * var(--gx)); margin-inline: auto; padding-inline: var(--gx);
  height: var(--kopf-h);
}
.kopf__logo { display: block; flex: none; margin-right: auto; border-radius: 6px; }
.kopf__logo img { height: 30px; width: auto; }
.kopf__nav { display: flex; gap: 30px; }
.kopf__nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-klein); font-weight: 500; transition: color .2s; padding-block: 6px; }
.kopf__nav a:hover { color: var(--ink); }
.kopf__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: var(--t-klein); font-weight: 600; font-variant-numeric: tabular-nums; }
.kopf__tel svg { width: 16px; height: 16px; color: var(--ink-2); }
.kopf__menue {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--weiss); cursor: pointer;
}
.kopf__menue svg { width: 20px; height: 20px; overflow: visible; }
.kopf__menue path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease-out); }
.kopf__menue[aria-expanded="true"] .strich-1 { transform: translateY(4px) rotate(45deg); }
.kopf__menue[aria-expanded="true"] .strich-2 { transform: translateY(-4px) rotate(-45deg); }
.kopf__nav-tel { display: none; }

/* ---------- Einstieg ---------- */
.einstieg { padding-top: var(--einstieg-oben, clamp(32px, 4.5vw, 72px)); padding-bottom: clamp(72px, 8vw, 128px); }
.einstieg__raster { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.einstieg__text { display: flex; flex-direction: column; align-items: flex-start; }
.einstieg__text .titel-hero { max-width: 9.2em; font-size: var(--h1-groesse, var(--t-hero)); }
.einstieg__unter { margin-top: var(--unter-abstand, clamp(24px, 2.4vw, 36px)); font-size: var(--unter-groesse, var(--t-lead)); line-height: 1.5; color: var(--ink); max-width: 38ch; text-wrap: pretty; }
.einstieg__wen { margin-top: 14px; font-size: var(--t-klein); color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
.einstieg__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: var(--aktion-abstand, clamp(28px, 3vw, 40px)); }
.einstieg__garantie {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-2);
  font-size: var(--t-klein); line-height: 1.55; color: var(--ink-2); max-width: 58ch; text-wrap: pretty;
}

.einstieg__buehne { position: relative; padding-bottom: 72px; }
.einstieg__foto { aspect-ratio: 1 / 1; height: var(--foto-hoehe, auto); }
.foto picture { display: contents; }
.einstieg__foto img { object-position: 42% 50%; }

/* Morgenbericht */
.bericht {
  position: absolute; z-index: 3;
  left: var(--karte-x, clamp(-88px, -5vw, -24px)); bottom: 0;
  width: var(--karte-breite, min(490px, 100%));
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 18px 18px 0;
  overflow: hidden;
  box-shadow: var(--schatten-karte);
}
.bericht__kopf { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.bericht__titel { font-weight: 600; font-size: .9375rem; }
.bericht__zeit { margin-left: auto; font-size: .8125rem; color: var(--ink-2); }
.bericht__gruss { font-size: var(--t-steuer); line-height: 1.5; color: var(--ink); padding-bottom: 6px; text-wrap: pretty; }
.bericht__gruss [data-zaehler] { transition: color .3s; }
.bericht__liste { margin-top: 6px; }
.bericht__punkt {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.bericht__punkt .status { margin-top: 6px; transition: background-color .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease-out); }
.bericht__zeile { font-size: .9375rem; line-height: 1.45; font-weight: 500; }
.bericht__neben { font-size: var(--t-mini); line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.bericht__punkt .mini-knopf { align-self: center; }
.bericht__hinweis { margin: 0 -18px; padding: 12px 18px 12px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

.frei-vermerk {
  display: inline-flex; align-items: center; gap: 5px; align-self: center;
  min-height: 34px; font-size: .8125rem; font-weight: 600; color: var(--olive-ink); white-space: nowrap;
  animation: frei-ein .45s var(--ease-out) both;
}
.frei-vermerk svg { width: 15px; height: 15px; }
.bericht__punkt.ist-frei .status { border-color: transparent; background: var(--olivine); box-shadow: 0 0 0 3px var(--olive-soft); animation: punkt-pop .5s var(--ease-out); }
.bericht__punkt.ist-frei .bericht__zeile { color: var(--ink-2); }
@keyframes frei-ein { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@keyframes punkt-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- Problem ---------- */
.tisch__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.tisch__bild { aspect-ratio: 4 / 5; }

/* ---------- Schrittstrecke (Fallseite) ---------- */
/* .ablauf__kopf ist seit der Kürzung nicht mehr auf der Startseite; die Regel bleibt, weil sie .lead der Fallseite nennt (wortgleich zum Archiv) */
.ablauf__kopf .lead { max-width: 44ch; }
.strecke {
  --g: clamp(24px, 4vw, 64px);
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g);
  margin-top: clamp(48px, 6vw, 88px); padding-top: 40px;
}
.strecke::before {
  content: ""; position: absolute; top: 8px; left: 8px; height: 2px; border-radius: 2px;
  width: calc((100% - 2 * var(--g)) / 3 * 2 + 2 * var(--g));
  background: linear-gradient(90deg, var(--line-2) 0 52%, var(--olivine) 100%);
}
.strecke__schritt { position: relative; }
.strecke__knoten {
  position: absolute; top: -40px; left: 0;
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--smoke); border: 2px solid var(--ink);
}
.strecke__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; }
.strecke__schritt p { color: var(--ink-2); max-width: 32ch; text-wrap: pretty; }

/* ---------- Ein Montag ---------- */
.dunkel { background-color: var(--nightshade); color: var(--night-1); }
.montag__kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; }
.montag__kopf .titel-h2 { grid-row: span 2; max-width: 14ch; }
.montag__kopf .hinweis { align-self: start; }
.montag__raster { display: grid; grid-template-columns: minmax(160px, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(64px, 8vw, 120px); }
.montag__uhr { position: relative; }
.montag__uhr-innen { position: sticky; top: calc(var(--kopf-h) + 48px); }
.montag__uhrzeit {
  display: block;
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  font-size: clamp(3rem, 1.6rem + 3.2vw, 5.25rem); color: var(--smoke);
}
.montag__marken { margin-top: 22px; display: grid; gap: 4px; }
.montag__marken li { font-size: var(--t-mini); color: var(--night-3); font-variant-numeric: tabular-nums; padding-left: 16px; position: relative; transition: color .3s; }
.montag__marken li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--line-night); transition: background-color .3s; }
.montag__marken li.ist-jetzt { color: var(--smoke); }
.montag__marken li.ist-jetzt::before { background: var(--olivine); }
.montag__uhrzeit.tick { animation: tick .5s var(--ease-out); }
@keyframes tick { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.montag__momente { display: grid; gap: clamp(72px, 9vw, 136px); }
.moment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.moment__text { max-width: 40ch; transition: opacity .4s; }
.moment__zeit { color: var(--night-3); margin-right: .35em; }
.js .moment__zeit { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.moment__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; color: var(--smoke); margin-bottom: 14px; text-wrap: balance; }
.moment__text p:not(.moment__zeit) { color: var(--night-2); text-wrap: pretty; }
.moment__bild { aspect-ratio: 4 / 5; overflow: visible; background: transparent; }
.moment__bild img { border-radius: var(--radius-gross); }
.moment__bild.foto::after { top: 12px; right: 12px; }

.karte {
  background: var(--weiss); color: var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  box-shadow: var(--schatten-karte);
}
.karte--schwebt { position: absolute; z-index: 3; left: clamp(-56px, -3.5vw, -20px); bottom: 28px; width: min(300px, 86%); }
.karte__kopf { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--ink-2); font-weight: 500; margin-bottom: 10px; }
.karte__haupt { font-size: .9375rem; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.karte__klein { font-size: .8125rem; color: var(--ink-2); margin-top: 2px; }
.karte__betrag { font-family: var(--font-display); font-size: 1.875rem; letter-spacing: -0.03em; line-height: 1.1; }
.karte__daten { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.karte__daten div { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; }
.karte__daten dt { color: var(--ink-2); }
.karte__daten dd { font-weight: 500; text-align: right; }
.karte__marke { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .8125rem; font-weight: 600; }
.karte .mini-knopf { margin-top: 14px; }


/* ---------- Was sich im Alltag ändert (früher „Deine Leute“) ---------- */
/* Weiß als Flächenwechsel zwischen dem hellen Aufruf nach dem Montag und dem Preisblatt */
.leute { background: var(--weiss); }
.leute__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.leute__text .lead { margin-top: 20px; }
.leute__satz { margin-top: 28px; font-size: var(--t-lead); line-height: 1.45; font-weight: 500; text-wrap: pretty; }

/* ---------- Über uns ---------- */
.paul { background: var(--weiss); }
.paul__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.paul__bild { border-radius: var(--radius-gross); overflow: hidden; background: #e9e9e6; aspect-ratio: 4 / 3; }
.paul__bild img { width: 100%; height: 100%; object-fit: cover; }
.paul__text .titel-h2 { margin-bottom: clamp(24px, 3vw, 36px); max-width: 15ch; }
.paul__text > p { color: var(--ink); font-size: var(--t-lead); line-height: 1.5; max-width: 52ch; text-wrap: pretty; }

/* ---------- Preise ---------- */
.preise__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; }
.garantie {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(40px, 5vw, 64px); padding: 20px 24px;
  background: var(--ink); color: var(--smoke); border-radius: var(--radius-gross) var(--radius-gross) 0 0;
  font-size: var(--t-gross); line-height: 1.45; font-weight: 500; text-wrap: pretty;
}
.garantie svg { width: 28px; height: 28px; flex: none; color: var(--olivine); }
.garantie span { text-wrap: pretty; }
.stufen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--weiss); border: 1px solid var(--line); border-top: 0;
}
.stufe { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
.stufe + .stufe { border-left: 1px solid var(--line); }
.stufe__titel { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.02em; }
.stufe__zahl {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--ink); font-family: var(--font-text); font-size: var(--t-mini); font-weight: 600; letter-spacing: 0;
}
.stufe__daten { display: flex; flex-direction: column; flex: 1; margin-top: 22px; }
.stufe__daten > div { padding: 12px 0; border-top: 1px solid var(--line); }
.stufe__daten dt { font-size: var(--t-mini); color: var(--ink-2); margin-bottom: 3px; }
.stufe__daten dd { font-size: var(--t-klein); line-height: 1.5; text-wrap: pretty; }
.stufe__daten dd.stufe__frage { font-family: var(--font-display); font-size: var(--t-lead); line-height: 1.3; letter-spacing: -0.01em; }
.stufe__daten--preis { flex: none; margin-top: 0; }
.stufe__daten > .stufe__preis { padding-top: 18px; }
.preis { font-family: var(--font-display); font-size: var(--t-figur); line-height: 1.05; letter-spacing: -0.035em; font-weight: 500; }
.preis__ab, .preis__zusatz { font-size: var(--t-klein); color: var(--ink-2); }
.preis__zusatz { margin-left: .3em; }
.preis__ab { margin-right: .15em; }
.preis__satz { display: block; margin-top: 8px; font-size: var(--t-mini); color: var(--ink-2); line-height: 1.5; }
.stufe .text-link { margin-top: 20px; align-self: flex-start; font-size: var(--t-klein); }
.preise__danach { margin-top: 20px; font-size: var(--t-klein); color: var(--ink-2); max-width: 74ch; text-wrap: pretty; }

.passt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: clamp(64px, 8vw, 112px); }
.passt__spalte { padding-right: clamp(24px, 4vw, 64px); }
.passt__spalte--nicht { padding-right: 0; padding-left: clamp(24px, 4vw, 64px); border-left: 1px solid var(--line-2); }
.passt__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 18px; }
.passt__liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 12px 0; text-wrap: pretty; }
.passt__liste svg { width: 20px; height: 20px; margin-top: 3px; color: var(--olive-ink); }
.passt__spalte--nicht svg { color: var(--ink-2); }
.passt__spalte--nicht li { color: var(--ink-2); }

/* ---------- Zusagen unter „Über uns“ (früher „Deine Daten“) ---------- */
.daten__raster .titel-h2 { max-width: 12ch; }
.daten__liste li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; padding: 24px 0; border-top: 1px solid var(--line-2); }
.daten__liste li:first-child { border-top: 0; padding-top: 6px; }
.daten__liste svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--weiss); border: 1px solid var(--line); color: var(--ink); }
.daten__liste h3 { font-family: var(--font-display); font-size: var(--t-titel-klein); line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 6px; }
.daten__liste p { color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }

/* ---------- Fragen ---------- */
/* Seit der Kürzung auf White Smoke: „Über uns“ davor ist weiß, so bleibt ein Flächenwechsel vor dem dunklen Schluss */
.fragen__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 112px); align-items: start; }
.fragen__raster .titel-h2 { grid-column: 1 / -1; max-width: 25ch; margin-bottom: clamp(8px, 2vw, 32px); }
.fragen__liste { grid-column: 2; }
.frage { border-top: 1px solid var(--line-2); }
.frage:last-child { border-bottom: 1px solid var(--line-2); }
.frage summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: var(--t-gross); line-height: 1.4; font-weight: 500; text-wrap: pretty;
  transition: color .2s;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--ink-2); transition: transform .3s var(--ease-out), color .2s; }
.frage summary:hover svg { color: var(--ink); }
.frage[open] summary svg { transform: rotate(45deg); color: var(--ink); }
.frage p a { color: var(--ink); text-underline-offset: 3px; }
.frage p { padding: 0 48px 26px 0; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

/* ---------- Schluss und Formular ---------- */
.schluss { position: relative; }
.schluss__bild { margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 3 / 2; max-width: 460px; }
.schluss__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.schluss__text { position: sticky; top: calc(var(--kopf-h) + 48px); }
.schluss__text .titel-h2 { color: var(--smoke); max-width: 13ch; }
.schluss__text .lead { margin-top: 24px; }
.schluss__text .telefon-link { display: inline-block; margin-top: 28px; }

.formular {
  background: var(--weiss); color: var(--ink);
  border-radius: var(--radius-gross); padding: clamp(24px, 3.2vw, 44px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.formular__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
.formular__text { margin-top: 10px; color: var(--ink-2); font-size: var(--t-klein); text-wrap: pretty; }
.formular form > * + * { margin-top: 18px; }
.formular form > .formular__text { margin-top: 10px; }
.formular form > .feld:first-of-type { margin-top: 26px; }

.feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.feld label, .feld legend { font-size: var(--t-klein); font-weight: 600; line-height: 1.35; }
.feld legend { padding: 0; margin-bottom: 2px; }
.frei { font-weight: 400; color: var(--ink-2); margin-left: 4px; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--weiss); border: 1px solid var(--ink-3); border-radius: 12px;
  font-size: var(--t-steuer); line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.feld textarea { resize: vertical; min-height: 96px; }
.feld select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23575853' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--ink); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(24, 25, 20, .12); }
.feld__hinweis { font-size: var(--t-mini); color: var(--ink-2); }
.feld__fehler { display: none; font-size: var(--t-mini); font-weight: 500; color: var(--fehler); }
.feld.ist-fehler input, .feld.ist-fehler select, .feld.ist-fehler textarea { border-color: var(--fehler); box-shadow: 0 0 0 3px rgba(155, 59, 46, .12); }
.feld.ist-fehler .feld__fehler { display: block; }

.feld-gruppe { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.feld-gruppe__hinweis { font-size: var(--t-klein); font-weight: 600; margin-bottom: 10px; }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.feld-paar .feld label { font-weight: 500; color: var(--ink-2); }
.feld-gruppe .feld-paar .feld label { font-weight: 600; color: var(--ink); }
.feld-gruppe.ist-fehler .feld-paar input { border-color: var(--fehler); }
.feld__fehler--gruppe { margin-top: 8px; }
.feld-gruppe.ist-fehler .feld__fehler--gruppe { display: block; }

.mehr { border: 1px solid var(--line); border-radius: 14px; background: #fafafb; }
.mehr summary {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 600; border-radius: 14px;
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary svg { width: 18px; height: 18px; margin-left: auto; color: var(--ink-2); transition: transform .3s var(--ease-out); }
.mehr[open] summary svg { transform: rotate(45deg); }
.mehr__inhalt { display: grid; gap: 18px; padding: 4px 16px 18px; }
.mehr .feld-paar { grid-template-columns: minmax(0, 1fr); }
.feld--auswahl { border: 0; padding: 0; margin: 0; }
.auswahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.auswahl label { position: relative; display: inline-flex; cursor: pointer; font-weight: 400; }
.auswahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auswahl span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--weiss);
  font-size: var(--t-klein); line-height: 1.3; transition: background-color .2s, border-color .2s, color .2s;
}
.auswahl label:hover span { border-color: var(--ink-3); }
.auswahl input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--smoke); }
.auswahl input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Spam-Fangfeld: seit 24.10.2026 ein Label „Bitte leer lassen“ um das Feld „website“, damit KI-Agenten es nicht
   ausfüllen (sonst zeigt das Formular Erfolg und sendet nichts). Bleibt außerhalb des Bildes, nicht display:none. */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; overflow: hidden; white-space: nowrap; }
.formular__datenschutz { font-size: var(--t-mini); color: var(--ink-2); text-wrap: pretty; }
.formular__datenschutz a { color: var(--ink); text-underline-offset: 2px; }
.formular__status { font-size: var(--t-klein); font-weight: 500; color: var(--fehler); }
.formular__status:empty { display: none; }
.formular__danke { padding: 12px 0; outline: none; }
.formular__danke svg { width: 48px; height: 48px; padding: 11px; border-radius: 50%; background: var(--olivine); color: var(--nightshade); box-shadow: 0 0 0 6px var(--olive-soft); }
.formular__danke-titel { margin-top: 24px; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; }
.formular__danke p:last-child { margin-top: 10px; color: var(--ink-2); }
.formular__danke a { color: var(--ink); font-weight: 600; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--line-night); padding-block: 44px 52px; }
.fuss__raster { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 48px; align-items: center; }
.fuss__marke { display: flex; align-items: center; gap: 18px; }
.fuss__marke img { height: 26px; width: auto; }
.fuss__marke p, .fuss__kontakt, .fuss__links a { font-size: var(--t-klein); color: var(--night-3); }
.fuss__kontakt { justify-self: center; }
.fuss__kontakt a, .fuss__links a { text-decoration: none; transition: color .2s; }
.fuss__kontakt a { color: var(--night-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-night); white-space: nowrap; }
.fuss__kontakt a:hover, .fuss__links a:hover { color: var(--smoke); text-decoration-color: currentColor; }
.fuss__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------- Einblenden ---------- */
.js .einblenden { opacity: 0; transform: translateY(18px); transition: opacity var(--dauer) var(--ease-out), transform var(--dauer) var(--ease-out); }
.js .einblenden.ist-da { opacity: 1; transform: none; }

@media (min-width: 1021px) {
  .stufen { grid-template-rows: auto 1fr auto auto; }
  .stufe { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
}

/* ---------- Breiten ---------- */
@media (max-width: 1180px) {
  .kopf__tel { display: none; }
}

@media (max-width: 1020px) {
  :root { --kopf-h: 64px; }
  .kopf__innen { gap: 10px; }
  .kopf__menue { display: inline-flex; }
  .kopf__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px var(--gx) 20px;
    background: var(--smoke); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(24, 25, 20, .25);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s;
  }
  .kopf__nav a { padding: 14px 0; font-size: var(--t-text); color: var(--ink); border-bottom: 1px solid var(--line); }
  .kopf__nav a:last-child { border-bottom: 0; }
  .kopf__nav .kopf__nav-tel { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
  .kopf__nav-tel svg { width: 18px; height: 18px; color: var(--ink-2); }
  .kopf.ist-offen .kopf__nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
  /* Ohne JavaScript: Kopfleiste bricht um, die Menüpunkte stehen als zweite Zeile unter Logo und Knopf */
  html:not(.js) .kopf__innen--start { height: auto; min-height: var(--kopf-h); flex-wrap: wrap; row-gap: 2px; padding-block: 10px; }
  html:not(.js) .kopf__nav { position: static; order: 5; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 0 18px; padding: 0; visibility: visible; opacity: 1; transform: none; box-shadow: none; border: 0; background: none; }
  html:not(.js) .kopf__nav a { padding: 6px 0; font-size: var(--t-klein); color: var(--ink-2); border-bottom: 0; }
  html:not(.js) .kopf__menue { display: none; }

  .einstieg__raster { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .einstieg__text { display: contents; }
  .einstieg__text .titel-hero { max-width: 8.6em; }
  .einstieg__buehne { order: 5; max-width: 640px; padding-bottom: 0; margin-top: clamp(32px, 5vw, 48px); }
  .einstieg__garantie { order: 6; }
  .einstieg__foto { aspect-ratio: auto; height: 180px; }
  .bericht { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 16px 0; }

  .tisch__raster, .leute__raster, .paul__raster, .daten__raster, .fragen__raster, .schluss__raster { grid-template-columns: minmax(0, 1fr); }
  .tisch__bild { aspect-ratio: 16 / 10; order: 2; }
  .paul__bild { aspect-ratio: 16 / 10; max-width: 640px; }
  .schluss__text { position: static; }
  .fragen__liste { grid-column: 1; }

  .preise__kopf, .montag__kopf { grid-template-columns: minmax(0, 1fr); }
  .montag__kopf .titel-h2 { grid-row: auto; }

  .montag__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .montag__uhr { display: none; }
  .js .montag__uhr {
    display: block; position: sticky; top: var(--kopf-h); z-index: 5; align-self: start;
    margin: 0 calc(-1 * var(--gx)) 32px; padding: 12px var(--gx);
    background: rgba(24, 25, 20, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-night);
  }
  .js .montag__uhr-innen { position: static; display: flex; align-items: center; gap: 18px; }
  .js .montag__uhrzeit { font-size: 1.75rem; }
  .js .montag__marken { margin-top: 0; display: flex; gap: 12px; }
  .js .montag__marken li { padding-left: 12px; }

  .stufen { grid-template-columns: minmax(0, 1fr); }
  .fuss__raster { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fuss__marke { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fuss__kontakt { justify-self: start; }
  .stufe + .stufe { border-left: 0; border-top: 1px solid var(--line); }
  .stufe__preis { margin-top: 8px; }
}

@media (max-width: 760px) {
  .strecke { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 0; padding-left: 52px; }
  .strecke::before { display: none; }
  .strecke__schritt:not(:last-child)::after { content: ""; position: absolute; left: -44px; top: 20px; bottom: -38px; width: 2px; border-radius: 2px; background: var(--line-2); }
  .strecke__schritt:nth-last-child(2)::after { bottom: -27px; background: linear-gradient(180deg, var(--line-2), var(--olivine)); }
  .strecke__knoten { top: 2px; left: -52px; }

  .moment { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .moment__bild { aspect-ratio: auto; }
  .moment__bild img { aspect-ratio: 4 / 3; height: auto; }
  .karte--schwebt { position: relative; left: auto; bottom: auto; width: auto; max-width: 340px; margin: -44px 12px 0 auto; }

  .passt { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .passt__spalte, .passt__spalte--nicht { padding: 0; border: 0; }
  .passt__spalte--nicht { padding-top: 32px; border-top: 1px solid var(--line-2); }

  .garantie { align-items: flex-start; padding: 18px 20px; }
  .schluss__bild { display: none; }

}

@media (max-width: 520px) {
  .kopf__logo img { height: 22px; }
  .knopf--klein { min-height: 40px; padding: 0 14px; }
  .einstieg__aktion { flex-direction: column; align-items: flex-start; margin-top: 24px; }
  .einstieg__unter { margin-top: 20px; }
  .einstieg__foto { display: none; }
  .bericht { margin: 0; }
  .einstieg__aktion .knopf { width: 100%; }
  .bericht { padding: 16px 14px 0; }
  .bericht__hinweis { margin: 0 -14px; padding-inline: 14px; }
  .bericht__punkt { grid-template-columns: 10px minmax(0, 1fr); }
  .bericht__punkt .mini-knopf, .bericht__punkt .frei-vermerk { grid-column: 2; justify-self: start; margin-top: 4px; }
  .feld-paar { grid-template-columns: minmax(0, 1fr); }
  .frage p { padding-right: 0; }
  .daten__liste li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .daten__liste svg { width: 40px; height: 40px; padding: 9px; }
  .js .montag__marken { gap: 8px; }
  .js .montag__marken li { font-size: 0; padding: 0; width: 7px; height: 7px; }
  .js .montag__marken li::before { width: 7px; height: 7px; margin-top: 0; top: 0; }
}

@media (max-width: 520px) {
  .titel-hero, .titel-h2, .moment__titel, .strecke__titel, .daten__liste h3 { overflow-wrap: break-word; }
}

@media (max-width: 380px) {
  .knopf--klein { display: none; }
}

/* ---------- Ruhige Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .einblenden { opacity: 1; transform: none; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .formular, .skip { display: none !important; }
  .dunkel { background: none; color: #000; }
  .js .einblenden { opacity: 1; transform: none; }
}

/* ---------- Unterseiten (Impressum, Datenschutz, Bildnachweis) ---------- */
.kopf--seite .kopf__innen { gap: 16px; }
.zurueck {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--weiss);
  font-size: var(--t-klein); font-weight: 600; text-decoration: none; transition: border-color .2s;
}
.zurueck svg { width: 16px; height: 16px; transform: rotate(180deg); }
.zurueck:hover { border-color: var(--ink); }
.rechtlich { padding-block: clamp(48px, 7vw, 104px) var(--sektion); }
.rechtlich h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; }
.rechtlich__intro { margin-top: 24px; max-width: 60ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.rechtlich__inhalt { max-width: 72ch; margin-top: clamp(40px, 5vw, 64px); }
.rechtlich__inhalt h2 { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; margin-top: 40px; margin-bottom: 12px; }
.rechtlich__inhalt h2:first-child { margin-top: 0; }
.rechtlich__inhalt p, .rechtlich__inhalt li { color: var(--ink-2); text-wrap: pretty; }
.rechtlich__inhalt p + p { margin-top: 12px; }
.rechtlich__inhalt a { color: var(--ink); text-underline-offset: 3px; }
.rechtlich__inhalt ul { display: grid; gap: 6px; margin-top: 12px; padding-left: 1.1em; list-style: disc; }
.offen { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--olive-mist); border: 1px dashed var(--line-2); color: var(--ink-2); font-size: var(--t-mini); font-weight: 600; }
.nachweise { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-2); }
.nachweis { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.nachweis img { width: 112px; height: 84px; object-fit: cover; border-radius: 10px; }
.nachweis__titel { font-weight: 600; }
.nachweis__text { font-size: var(--t-klein); color: var(--ink-2); margin-top: 2px; text-wrap: pretty; }
.nachweis__text a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 520px) {
  .nachweis { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; align-items: start; }
  .nachweis img { width: 80px; height: 64px; }
}

/* ---------- Beratung statt Software (14.10.2026) ----------
   Einstieg nur mit Foto. Der Morgenbericht steht als Beispiel im Abschnitt „So kann das bei dir aussehen“. */
.einstieg__buehne--foto { padding-bottom: 0; }
/* Die Unterzeile ist mit der Beratung länger geworden: etwas breiter, damit sie in vier Zeilen bleibt */
.einstieg__unter { max-width: 44ch; }
.einstieg__wen { max-width: 70ch; }
/* Foto oben bündig mit der H1 statt senkrecht gemittelt */
@media (min-width: 1021px) { .einstieg__buehne--foto { align-self: start; margin-top: calc(var(--t-hero) * .12); } }

.beispiel__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.beispiel__text .lead { margin-top: clamp(20px, 2.2vw, 28px); }
.beispiel__teile { margin-top: clamp(28px, 3vw, 44px); }
.beispiel__teil { padding: 18px 0; border-top: 1px solid var(--line-2); }
.beispiel__teil:last-child { border-bottom: 1px solid var(--line-2); }
.beispiel__teil { color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.beispiel__teil strong { color: var(--ink); font-weight: 600; }
.beispiel__buehne { display: grid; place-items: center; padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 56px); border-radius: var(--radius-gross); background: var(--line); }
/* Regler --karte-breite und --karte-x wirken auch im Beispiel; ohne Wert steht die Karte 490px breit in der Mitte der Bühne */
.beispiel__buehne .bericht { position: relative; left: var(--karte-x, auto); bottom: auto; width: var(--karte-breite, min(490px, 100%)); margin: 0; }

@media (max-width: 1020px) {
  .einstieg__buehne--foto { order: 7; }
  .einstieg__buehne--foto .einstieg__foto { height: auto; aspect-ratio: 3 / 2; }
  .beispiel__raster { grid-template-columns: minmax(0, 1fr); }
  .beispiel__buehne { max-width: 640px; }
}
@media (max-width: 760px) {
  .strecke--beratung .strecke__schritt:nth-last-child(2)::after { bottom: -38px; background: var(--line-2); }
}
@media (max-width: 520px) {
  .einstieg__buehne--foto .einstieg__foto { display: block; }
  .beispiel__buehne { padding: 0; background: none; }
}

/* ---------- Entwurf 5: Aufbau nach novist.de (14.10.2026) ----------
   Neue Bausteine im bestehenden System: Haarlinien statt Kästen, keine neuen Farben, Oliv nur für Freigaben.
   Selektoren hier enthalten keine Klassen der Fallseite (morgenbericht.html), damit deren Regeln oben unberührt bleiben. */

/* Drei Blöcke unter dem Einstieg (ersetzen das Band „Was wir machen“) */
.bloecke { padding-bottom: clamp(24px, 3vw, 40px); }
.bloecke__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.block { padding-top: 22px; border-top: 1px solid var(--line-2); }
.block__titel { font-family: var(--font-display); font-size: var(--t-titel-klein); line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 10px; text-wrap: balance; }
.block p { color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.block .block__stand { margin-top: 12px; font-size: var(--t-mini); line-height: 1.5; }
.block__stand a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color .2s; }
.block__stand a:hover { text-decoration-color: currentColor; }

/* Problem: fünf Stellen als Haarlinien-Liste, Titel links, Absatz rechts */
.tisch__lead { margin-top: clamp(20px, 2.2vw, 28px); }
.stellen { margin-top: clamp(28px, 3vw, 44px); }
.stelle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px 32px; padding: 20px 0; border-top: 1px solid var(--line-2); }
.stelle:last-child { border-bottom: 1px solid var(--line-2); }
.stelle__titel { font-family: var(--font-display); font-size: var(--t-titel-klein); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.stelle p { color: var(--ink-2); text-wrap: pretty; }

/* Umdeutung: vier Fragen in Display-Schrift */
/* Weiß als Flächenwechsel: unterbricht die lange Strecke heller Haarlinien vor dem Montag */
.umdeutung { background: var(--weiss); }
.umdeutung__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 112px); align-items: start; }
.umdeutung__titel { max-width: 12ch; }
.umdeutung__text { margin-top: clamp(20px, 2.2vw, 28px); max-width: 30ch; }
.umdeutung__liste li { padding: 20px 0; border-top: 1px solid var(--line-2); font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.umdeutung__liste li:last-child { border-bottom: 1px solid var(--line-2); }
.umdeutung__satz { margin-top: clamp(24px, 2.6vw, 32px); font-size: var(--t-lead); line-height: 1.45; font-weight: 500; text-wrap: pretty; }

/* Beispiel: drei Ergebnisse als Haarlinien-Liste, Titel als H3 */
.beispiel__titel { font-family: var(--font-display); font-size: var(--t-titel-klein); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 6px; text-wrap: balance; }
.beispiel__tipp { margin-bottom: 14px; font-size: var(--t-klein); color: var(--ink-2); }
@media (min-width: 1021px) {
  .beispiel__seite { position: sticky; top: calc(var(--kopf-h) + 40px); align-self: start; }
}

/* Aufruf nach dem Montag: hell, voller Abschnittsabstand, Knopf mit Telefon daneben */
.aufruf__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.aufruf__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(40px, 6vw, 112px); align-items: end; }
.aufruf__titel { max-width: 16ch; }
.aufruf__rechts > .aufruf__aktion { margin-top: clamp(24px, 2.6vw, 32px); }

/* Was sich im Alltag ändert: Heute und Mit eingerichteten Abläufen */
.vergleich { margin-top: clamp(32px, 4vw, 48px); }
.vergleich__koepfe, .vergleich__paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; }
.vergleich__koepfe { padding-bottom: 14px; font-family: var(--font-display); font-size: var(--t-titel-klein); line-height: 1.25; letter-spacing: -0.015em; }
.vergleich__koepfe p:first-child { color: var(--ink-2); }
.vergleich__paar { padding: 16px 0; border-top: 1px solid var(--line-2); }
.vergleich__paar:last-child { border-bottom: 1px solid var(--line-2); }
.vergleich__heute { color: var(--ink-2); text-wrap: pretty; }
.vergleich__mit { color: var(--ink); text-wrap: pretty; }
.vergleich__wort { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Über uns: drei Zusagen unter dem Text */
.zusagen { margin-top: clamp(28px, 3vw, 40px); }
.zusagen li:first-child { border-top: 1px solid var(--line-2); padding-top: 24px; }
.zusagen li:last-child { padding-bottom: 0; }

/* Preise: Ergebnis in jeder Stufe, vierte Karte ohne Ziffer quer darunter */
.stufe__ergebnis dd { font-weight: 500; }
.weiter {
  --innen: clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  column-gap: calc(2 * var(--innen)); padding: clamp(22px, 2.6vw, 32px) var(--innen); /* doppelter Innenabstand als Spaltenabstand: Spalten stehen bündig unter den Stufen */
  background: var(--weiss); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-gross) var(--radius-gross);
}
.weiter__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.weiter__text { font-size: var(--t-klein); line-height: 1.5; text-wrap: pretty; }
.weiter__daten dt { font-size: var(--t-mini); color: var(--ink-2); margin-bottom: 3px; }
.weiter__daten dd { font-size: var(--t-klein); line-height: 1.5; text-wrap: pretty; }
/* Förderung: eine kleine sachliche Zeile direkt unter „Alle Preise netto“ */
.preise__danach.preise__foerderung { margin-top: 6px; }
.preise__foerderung a { color: var(--ink); text-underline-offset: 3px; }

/* Schluss: der Dreiklang Satz für Satz */
.schluss__titel span { display: block; }

@media (max-width: 1020px) {
  .umdeutung__raster, .aufruf__raster { grid-template-columns: minmax(0, 1fr); }
  .weiter { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: var(--innen); }
  .weiter__daten > div { padding-top: 12px; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .bloecke__reihe { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .stelle { grid-template-columns: minmax(0, 1fr); }
  .vergleich__koepfe { display: none; }
  .vergleich__paar { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vergleich__wort { position: static; display: block; width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip: auto; white-space: normal; font-size: var(--t-mini); font-weight: 600; color: var(--ink-2); }
}
@media (max-width: 520px) {
  .aufruf__aktion { flex-direction: column; align-items: flex-start; }
  .aufruf__aktion > :first-child { width: 100%; }
  .stelle { padding: 16px 0; }
}
/* Der Dreiklang ist länger als die alte Schluss-Überschrift: etwas mehr Breite, damit jeder Satz ruhig bricht */
.schluss__text .schluss__titel { max-width: 16ch; }

/* Einstieg am Desktop: links H1, Unterzeile, Zeile für wen, Button und Preiszeile, rechts das Foto oben bündig
   mit der H1 und so hoch wie die ganze Textspalte (seit der Kürzung ohne Liste darunter). DOM-Reihenfolge unverändert,
   am Handy gilt weiter Button, Preiszeile, Foto. */
@media (min-width: 1021px) {
  .einstieg__raster { align-items: start; grid-template-rows: auto auto auto auto auto; row-gap: 0; }
  .einstieg__text { display: contents; }
  .einstieg__text > * { grid-column: 1; }
  .einstieg__text > h1 { grid-row: 1; }
  .einstieg__text > .einstieg__unter { grid-row: 2; }
  .einstieg__text > .einstieg__wen { grid-row: 3; }
  .einstieg__text > .einstieg__garantie { grid-row: 5; }
  .einstieg__buehne--foto { grid-column: 2; grid-row: 1 / 6; align-self: stretch; contain: size; }
  .einstieg__buehne--foto .einstieg__foto { aspect-ratio: auto; height: var(--foto-hoehe, 100%); }
}

/* Kopf-Button auf schmalen Handys (Bau-Zeile Abschnitt 3: bleibt sichtbar). Die Regel für .knopf--klein oben bleibt
   wegen der Fallseite stehen; die Startseite holt den Button über eigene Klassen zurück. */
@media (max-width: 380px) {
  .kopf__innen--start { gap: 8px; }
  .kopf__anfrage { display: inline-flex; padding: 0 12px; font-size: var(--t-mini); white-space: nowrap; }
}
@media (max-width: 340px) {
  .kopf__innen--start { gap: 6px; }
  .kopf__logo--start img { height: 16px; }
  .kopf__anfrage { padding: 0 10px; }
}

/* ---------- Nachbesserung nach der Prüfung (15.10.2026) ----------
   Selektoren ohne Klassen der Fallseite (morgenbericht.html). */

/* Ohne JavaScript läuft die Uhr im Montag nicht mit: ausblenden, die Zeiten stehen dann sichtbar in den H3 */
html:not(.js) .montag__uhr { display: none; }
html:not(.js) .montag__raster { grid-template-columns: minmax(0, 1fr); }

/* Tastaturfokus in Formularfeldern deutlich vom Hover unterscheiden */
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Lange Wörter in der Fragen-H2 auf schmalen Handys an der Silbe trennen statt mitten im Wort */
@media (max-width: 520px) {
  #h-fragen { -webkit-hyphens: auto; hyphens: auto; }
}

/* Erster Bildschirm am Desktop (1440 × 900): die Preis- und Garantiezeile steht ganz im Bild.
   Abstände lesen weiter die Tweak-Variablen, nur die Rückfallwerte sind knapper. */
@media (min-width: 1021px) {
  .einstieg { padding-top: var(--einstieg-oben, clamp(32px, 2.6vw, 48px)); }
  .einstieg__unter { max-width: 50ch; }
  .einstieg__garantie { margin-top: 22px; padding-top: 16px; max-width: 70ch; }
}

/* Problem: die Textspalte ist viel höher als das Foto. Foto oben bündig mit der H2 statt senkrecht gemittelt,
   sonst wirkt der Versatz zur Überschrift wie verrutscht. */
@media (min-width: 1021px) {
  .tisch__raster { align-items: start; }
  .tisch__bild { margin-top: calc(var(--t-h2) * .12); }
}

/* Über uns: KI-Porträt statt Metallzeichen (Paul, 15.10.2026). Quadratisch, damit Gesicht und Schultern ganz im
   Rahmen sitzen. Die Kennzeichnung nutzt die Symbolbild-Marke von .foto, nur mit eigenem Wort. */
.foto--echt::after { display: none; }
.foto--ki::after { content: "KI-Porträt"; }
.paul__bild.foto--ki, .paul__bild.foto--echt { aspect-ratio: 1 / 1; }
.paul__bild.foto--ki img, .paul__bild.foto--echt img { object-position: 50% 30%; }
@media (max-width: 1020px) {
  .paul__bild.foto--ki, .paul__bild.foto--echt { max-width: 420px; }
}

/* Schluss: „Im Erstgespräch klären wir:“ als Haarlinien-Liste auf Nightshade, ohne Häkchen und ohne Oliv */
.klaeren { margin-top: 24px; max-width: 40ch; }
.klaeren__titel { font-size: var(--t-lead); line-height: 1.5; color: var(--night-2); }
.klaeren__liste { margin-top: 14px; border-top: 1px solid var(--line-night); }
.klaeren__liste li { padding: 12px 0; border-bottom: 1px solid var(--line-night); color: var(--smoke); line-height: 1.45; text-wrap: pretty; }

/* Erster Bildschirm bei mittlerer Höhe (etwa 1280 × 800, 1536 × 864): engere Abstände, damit die Preis- und
   Garantiezeile ganz im Bild steht statt mitten in der Zeile abzureißen. Über die Tweak-Variablen auf :root,
   damit das Regler-Panel weiter greift. Unter 800 px Höhe endet der erste Bildschirm sauber über der Zeile. */
@media (min-width: 1021px) and (min-height: 800px) and (max-height: 899px) {
  :root { --einstieg-oben: 20px; --unter-abstand: 20px; --aktion-abstand: 24px; }
  .einstieg__garantie { margin-top: 14px; padding-top: 12px; }
}

/* Fall aus der Praxis (15.10.2026): hellgraue Fläche im weißen Abschnitt, Haarlinien statt Kästen */
.fall { background: var(--smoke); border-radius: var(--radius-gross); padding: clamp(24px, 3vw, 40px); }
.fall h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.fall__liste { list-style: none; margin: 20px 0 0; padding: 0; }
.fall__liste li { padding: 14px 0; border-top: 1px solid var(--line-2); font-size: var(--t-text); line-height: 1.5; text-wrap: pretty; }
.fall__liste li:last-child { border-bottom: 1px solid var(--line-2); }
.fall__satz { margin-top: 18px; font-size: var(--t-text); line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.fall__stand { margin-top: 10px; font-size: var(--t-klein); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* Garantie als eigene Zeile direkt unter der Unterzeile (15.10.2026, stärkstes Argument ohne Referenzen aus Elektro und SHK).
   Schild in Nightshade, Oliv bleibt der Freigabe vorbehalten. Desktop-Raster bekommt dafür eine Zeile mehr. */
.einstieg__zusage { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; max-width: 46ch; font-size: var(--t-gross); line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.einstieg__zusage svg { flex: none; width: 24px; height: 24px; margin-top: 1px; }
@media (min-width: 1021px) {
  .einstieg__raster { grid-template-rows: auto auto auto auto auto auto; }
  .einstieg__text > .einstieg__zusage { grid-row: 3; }
  .einstieg__text > .einstieg__wen { grid-row: 4; }
  .einstieg__text > .einstieg__aktion { grid-row: 5; }
  .einstieg__text > .einstieg__garantie { grid-row: 6; }
  .einstieg__buehne--foto { grid-row: 1 / 7; }
}
/* Erster Bildschirm mit Garantie-Zeile: engere Abstände, damit die Zeile unter dem Button ganz im Bild bleibt
   (1440 × 900 und 1280 × 800). Über die Tweak-Variablen, damit das Regler-Panel weiter greift. */
@media (min-width: 1021px) {
  :root { --aktion-abstand: 28px; }
  .einstieg__zusage { margin-top: 14px; max-width: 56ch; }
  .einstieg__wen { margin-top: 10px; }
  .einstieg__garantie { margin-top: 16px; padding-top: 12px; }
}
@media (min-width: 1021px) and (max-height: 899px) {
  :root { --einstieg-oben: 12px; --unter-abstand: 16px; --aktion-abstand: 18px; }
  .einstieg__zusage { margin-top: 12px; }
  .einstieg__wen { margin-top: 8px; }
  .einstieg__garantie { margin-top: 10px; padding-top: 10px; }
}

/* Abstände nachgezogen (15.10.2026): Nach den zwei Blöcken beginnt der Problem-Abschnitt auf demselben Grund.
   Der volle Abschnittsabstand ergab dort eine leere Bahn von rund 200 px; jetzt gehören die Blöcke sichtbar zum Einstieg. */
.bloecke + .tisch { padding-top: clamp(56px, 7vw, 104px); }

/* Bild und Karte oben bündig mit der H2 wie im Problem-Abschnitt, statt senkrecht gemittelt */
@media (min-width: 1021px) {
  .leute__raster { align-items: start; }
  .leute__raster .fall { margin-top: calc(var(--t-h2) * .12); }
  .paul__raster { align-items: start; }
  .paul__raster .paul__bild { margin-top: calc(var(--t-h2) * .12); }
}

/* --------------------------------------------------------------------------
   Mehrseitige Website (15.10.2026)
   Richtungsvertrag: .impeccable/surfaces/noxberg-mehrseitig.md. Muster (Menü-Pille mit Untermenüs, Bildbühne mit Szenen,
   Manifest mit Collage, Fußzeile) nach dem eigenen Nachbau in v3-original, umgerechnet auf dieses System:
   rem auf 16px-Basis, Noxberg-Farben und -Schriften, Radien 12/14/22 und Bühne 36. Keine Mono-Schrift.
   Alle Regeln dieses Blocks gelten nur für neue Klassen oder sind mit html.nx begrenzt; die Regeln oben,
   die Klassen der Fallseite morgenbericht.html nennen, bleiben unverändert.
   -------------------------------------------------------------------------- */

html.nx {
  --kopf-h: 92px;                 /* Höhe des Kopfbereichs: 16px Abstand, 60px Pille, 16px Luft */
  --radius-buehne: 36px;
  --pille-max: 1080px;
}
/* Nur den Seiten-Scroll sperren: overflow am body würde den Bezug der sticky-Pille ändern. */
html.nx.ist-gesperrt { overflow: hidden; }
.weiss { background: var(--weiss); }

/* ---------- Menü-Pille ---------- */
.pille { position: sticky; top: 0; z-index: 60; height: var(--kopf-h); pointer-events: none; }
.pille__nav {
  position: absolute; top: 16px; left: 0; right: 0; margin-inline: auto;
  width: min(var(--pille-max), calc(100% - 32px));
  pointer-events: auto;
  background: var(--nightshade); color: var(--smoke);
  border-radius: 16px; overflow: hidden;
  clip-path: inset(0 0 0 0 round 16px);
  transition: background-color .25s, color .25s;
}
.pille__oben { display: flex; align-items: center; gap: 4px; height: 60px; padding: 0 9px 0 18px; }
.pille__logo { display: flex; align-items: center; flex: none; height: 40px; margin-right: 6px; padding: 0 4px; border-radius: 12px; }
.pille__logo img { height: 26px; width: auto; }
.pille__logo-dunkel { display: none; }
.pille__liste { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.pille__link {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 12px;
  background: transparent; color: inherit;
  font-family: var(--font-text); font-size: var(--t-klein); font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s;
}
.pille__link svg { width: 14px; height: 14px; opacity: .72; transition: transform .3s var(--ease-out); }
.pille__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.pille__link[aria-expanded="true"] { background: rgba(243, 243, 245, .08); }
@media (hover: hover) { .pille__link:hover { background: rgba(243, 243, 245, .08); } }
/* aktiver Punkt links vom Wort (springt mit Überschwinger herein) */
.pille__link::before {
  content: ""; position: absolute; left: 3px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor;
  transform: scale(0); transition: transform .35s var(--ease-out);
}
.pille__link[aria-current="page"]::before, .pille__link.ist-aktuell::before { transform: none; }
.pille__tel {
  display: none; align-items: center; gap: 7px; flex: none; height: 40px; padding: 0 10px; border-radius: 12px;
  color: inherit; text-decoration: none; font-size: var(--t-klein); font-weight: 500; white-space: nowrap;
}
.pille__tel svg { width: 15px; height: 15px; opacity: .72; }
@media (hover: hover) { .pille__tel:hover { background: rgba(243, 243, 245, .08); } }
.pille__knopf {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 42px; padding: 0 18px; border-radius: 12px;
  background: var(--weiss); color: var(--nightshade);
  font-size: var(--t-klein); font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
@media (hover: hover) { .pille__knopf:hover { background: var(--smoke); } }
.pille__knopf--voll { width: 100%; height: 52px; font-size: var(--t-steuer); }
.pille__menue {
  position: relative; display: none; flex: none; width: 40px; height: 40px;
  border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer;
}
.pille__strich { position: absolute; left: 11px; right: 11px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s var(--ease-out); }
.pille__strich--1 { top: 15px; }
.pille__strich--2 { top: 23px; }
.pille__menue[aria-expanded="true"] .pille__strich--1 { transform: translateY(4px) rotate(45deg); }
.pille__menue[aria-expanded="true"] .pille__strich--2 { transform: translateY(-4px) rotate(-45deg); }
.pille__notlink { display: none; }
.pille :focus-visible { outline-color: var(--smoke); }

/* Untermenüs: die Pille wächst nach unten (clip-path, main.js), darin dunkle Karten */
.unter { padding: 0 9px 9px; }
.unter[hidden] { display: none; }
.unter__innen { display: grid; gap: 9px; opacity: 0; transition: opacity .18s linear; }
.unter.ist-sichtbar .unter__innen { opacity: 1; transition-delay: .14s; }
.unter__innen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.unter__innen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unter__karte {
  display: flex; flex-direction: column; gap: 3px; height: 100%;
  padding: 18px 20px 20px; border-radius: 12px;
  background: rgba(243, 243, 245, .06); color: inherit; text-decoration: none;
  transition: background-color .25s .08s;
}
.unter__innen:has(.unter__karte:hover) .unter__karte:not(:hover) { background: transparent; }
.unter__karte:hover { transition-delay: 0s; }
.unter__titel { font-size: var(--t-klein); font-weight: 500; line-height: 1.35; }
.unter__zeile { font-size: var(--t-klein); line-height: 1.45; color: var(--night-3); text-wrap: pretty; }
.unter__karte[aria-current="page"] .unter__titel { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.unter__bild { display: block; margin-top: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
.unter__zeile + .unter__bild { margin-top: auto; }
.unter__karte:has(.unter__bild) .unter__zeile { margin-bottom: 12px; }
.unter__bild.foto::after { top: 8px; right: 8px; }

/* Helle Pille über dunklen Flächen */
.pille.ist-invertiert .pille__nav { background: var(--weiss); color: var(--nightshade); box-shadow: 0 0 0 1px var(--line); }
.pille.ist-invertiert .pille__logo-hell { display: none; }
.pille.ist-invertiert .pille__logo-dunkel { display: block; }
.pille.ist-invertiert .pille__link[aria-expanded="true"] { background: rgba(24, 25, 20, .05); }
@media (hover: hover) {
  .pille.ist-invertiert .pille__link:hover, .pille.ist-invertiert .pille__tel:hover { background: rgba(24, 25, 20, .05); }
  .pille.ist-invertiert .pille__knopf:hover { background: var(--nightshade-hover, #2c2d27); }
}
.pille.ist-invertiert .pille__knopf { background: var(--nightshade); color: var(--smoke); }
.pille.ist-invertiert .unter__karte { background: rgba(24, 25, 20, .04); }
.pille.ist-invertiert .unter__zeile { color: var(--ink-2); }
.pille.ist-invertiert :focus-visible { outline-color: var(--ink); }

/* Handy-Menü: dunkle Fläche unter der Pille, fast Vollbild */
.handymenue {
  position: absolute; left: 12px; right: 12px; top: 76px;
  height: calc(100vh - 88px); height: calc(100dvh - 88px);
  pointer-events: auto; overflow-y: auto; overscroll-behavior: contain;
  background: var(--nightshade); color: var(--smoke); border-radius: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.handymenue[hidden] { display: none; }
.handymenue.ist-offen { opacity: 1; transform: none; }
.handymenue__innen { display: flex; flex-direction: column; gap: 26px; min-height: 100%; padding: 24px 22px 22px; }
.handymenue__kopf { margin-bottom: 4px; font-size: var(--t-mini); font-weight: 500; color: var(--night-3); }
.handymenue__link {
  display: block; padding: 5px 0;
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--smoke); text-decoration: none;
}
.handymenue__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.handymenue__fuss { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-night); }
.handymenue__tel { display: inline-flex; align-items: center; gap: 10px; color: var(--smoke); font-weight: 600; text-decoration: none; }
.handymenue__tel svg { width: 18px; height: 18px; color: var(--night-2); }
.handymenue :focus-visible { outline-color: var(--smoke); }
.pille.ist-menue-offen .pille__nav { background: var(--nightshade); color: var(--smoke); box-shadow: none; }
.pille.ist-menue-offen .pille__logo-hell { display: block; }
.pille.ist-menue-offen .pille__logo-dunkel { display: none; }
.pille.ist-menue-offen .pille__knopf { background: var(--weiss); color: var(--nightshade); }

@media (min-width: 1181px) {
  .pille__tel { display: inline-flex; }
  .pille__link { padding: 0 10px 0 13px; }
}
@media (min-width: 1021px) {
  .handymenue { display: none !important; }
}
@media (max-width: 1020px) {
  html.nx { --kopf-h: 80px; }
  .pille__nav { top: 12px; width: calc(100% - 24px); border-radius: 14px; clip-path: inset(0 0 0 0 round 14px); }
  .pille__oben { height: 56px; gap: 8px; padding: 0 8px 0 14px; }
  .pille__liste, .pille__tel, .pille__unter { display: none; }
  .pille__logo { margin-right: auto; }
  .pille__logo img { height: 24px; }
  .pille__knopf { height: 40px; padding: 0 14px; }
  .pille__menue { display: inline-block; }
  html:not(.js) .pille__menue { display: none; }
  html:not(.js) .pille__notlink { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 520px) {
  .pille__oben .pille__knopf { display: none; }
  .pille__logo img { height: 22px; }
}
/* Ohne JavaScript: Untermenüs am Desktop per Fokus erreichbar bleiben über die Fußzeile; Auslöser zeigen keinen Winkel */
html:not(.js) .pille__ausloeser svg { display: none; }

/* ---------- Brotkrumen ---------- */
.brotkrumen { margin-bottom: clamp(20px, 2.4vw, 32px); }
.brotkrumen ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; font-size: var(--t-mini); line-height: 1.4; color: var(--ink-2); }
.brotkrumen li { display: inline-flex; align-items: center; gap: 6px; }
.brotkrumen svg { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.brotkrumen a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.brotkrumen a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.brotkrumen [aria-current="page"] { color: var(--ink); }
.person .brotkrumen ol, .anfrage .brotkrumen ol, .rechtlich .brotkrumen ol { justify-content: flex-start; }

/* ---------- Einstieg (zentriert) ---------- */
.auftakt { padding-block: clamp(40px, 6vw, 96px) clamp(48px, 6vw, 88px); }
.auftakt__innen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.auftakt .titel-hero { max-width: 13em; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); }
.auftakt--start .titel-hero { max-width: 11em; font-size: var(--t-hero); }
.auftakt .auftakt__titel--mittel { max-width: 18em; font-size: var(--t-h2); line-height: 1; }
.auftakt--lang .titel-hero { max-width: 19em; font-size: var(--t-h2); line-height: 1; }
.auftakt__unter { margin-top: clamp(20px, 2.2vw, 28px); max-width: 60ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.auftakt--start .auftakt__unter { max-width: 62ch; }
.auftakt__garantie { margin-top: clamp(20px, 2.2vw, 28px); max-width: 56ch; font-size: var(--t-gross); line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: balance; }
.auftakt__garantie svg { display: inline-block; width: 24px; height: 24px; margin-right: 8px; vertical-align: -6px; }
.auftakt__mess { margin-top: 6px; font-size: var(--t-klein); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.auftakt__mess:hover { color: var(--ink); text-decoration-color: currentColor; }
.auftakt__wen { margin-top: 18px; max-width: 64ch; font-size: var(--t-klein); color: var(--ink-2); text-wrap: pretty; }
.auftakt__aktion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: clamp(22px, 2.4vw, 30px); }
.auftakt__notiz { margin-top: 16px; max-width: 62ch; font-size: var(--t-klein); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.auftakt--start { padding-block: clamp(24px, 3vw, 44px) clamp(32px, 3.4vw, 48px); }
.auftakt--start .auftakt__unter { margin-top: clamp(18px, 1.8vw, 24px); }
.auftakt--start .auftakt__wen { max-width: 80ch; }
.auftakt__wen, .auftakt__notiz { text-wrap: balance; }
.auftakt--start .auftakt__aktion { margin-top: clamp(20px, 2vw, 26px); }
.auftakt__zusage { display: flex; flex-direction: column; align-items: center; }
/* Erster Bildschirm am Desktop: H1 eine Stufe kleiner und einzeilig, Garantie mit Link in einer Zeile, die Zeile unter dem
   Knopf einzeilig. So beginnt die Bildbühne bei 1440 × 900 und 1280 × 800 deutlich sichtbar (Reihenfolge und Wortlaut wie A). */
@media (min-width: 1021px) {
  .auftakt--start { padding-block: 12px 40px; }
  .auftakt--start .titel-hero { max-width: none; font-size: clamp(3rem, 1rem + 4.4vw, 5rem); line-height: 1; }
  .auftakt--start .auftakt__unter { margin-top: 16px; max-width: 66ch; }
  .auftakt--start .auftakt__zusage { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; margin-top: 18px; }
  .auftakt--start .auftakt__garantie { margin-top: 0; max-width: none; font-size: var(--t-text); text-wrap: pretty; }
  .auftakt--start .auftakt__garantie svg { width: 22px; height: 22px; vertical-align: -5px; }
  .auftakt--start .auftakt__mess { margin-top: 0; }
  .auftakt--start .auftakt__wen { margin-top: 10px; max-width: none; }
  .auftakt--start .auftakt__aktion { margin-top: 20px; }
  .auftakt--start .auftakt__notiz { margin-top: 12px; max-width: none; }
}
.auftakt--branche { padding-bottom: 0; }
.auftakt--branche .auftakt__innen { padding-bottom: clamp(40px, 5vw, 72px); }
.auftakt--branche + .zweispalter { padding-top: var(--sektion); }

/* ---------- Bildbühne ---------- */
.buehne-abschnitt { padding-bottom: clamp(24px, 3vw, 40px); }
.buehne-rahmen { position: relative; }
.buehne { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-buehne); background: #2b2c27; }
.buehne.foto::after { top: 20px; right: 20px; }
.buehne--still { aspect-ratio: 21 / 9; }
.buehne--still img { object-position: 50% 45%; }
.buehne__szenen { position: absolute; inset: 0; }
.szene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.szene.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.szene img { position: absolute; inset: 0; transform: scale(1.06); transition: transform 7s linear; }
.szene.ist-aktiv img { transform: scale(1); }
html:not(.js) .szene:first-child { opacity: 1; visibility: visible; }
.karte__beispiel {
  position: absolute; top: -10px; right: 14px; z-index: 2;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--smoke);
  font-size: var(--t-marke); font-weight: 500; line-height: 1.3; letter-spacing: .01em; color: var(--ink-2); white-space: nowrap;
}
.karte--buehne {
  position: absolute; z-index: 3; right: clamp(24px, 4.5vw, 64px); top: 50%;
  width: min(360px, 36%);
  opacity: 0; transform: translate3d(16px, calc(-50% + 18px), 0);
  transition: opacity .6s var(--ease-out) .3s, transform .9s var(--ease-out) .3s;
}
.szene.ist-aktiv .karte--buehne { opacity: 1; transform: translate3d(0, -50%, 0); }
html:not(.js) .karte--buehne { opacity: 1; transform: translate3d(0, -50%, 0); }
.karte__punkte { margin-top: 10px; }
.karte__punkte li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--t-klein); line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.karte__punkte .status { margin-top: 5px; }
.buehne__leiste {
  position: absolute; z-index: 5; left: clamp(16px, 2.2vw, 32px); right: clamp(16px, 2.2vw, 32px); bottom: clamp(16px, 2.2vw, 32px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; pointer-events: none;
}
.buehne__marken {
  display: flex; gap: 2px; padding: 5px; border-radius: 999px; pointer-events: auto;
  background: rgba(24, 25, 20, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.zeitmarke {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 8px 12px 9px; border: 0; border-radius: 999px; background: transparent;
  color: var(--night-3); font-size: var(--t-mini); font-weight: 600; line-height: 1; cursor: pointer;
  transition: color .2s, background-color .2s;
}
.zeitmarke:hover { color: var(--smoke); }
.zeitmarke.ist-aktiv { color: var(--smoke); background: rgba(243, 243, 245, .08); }
.zeitmarke__balken { position: relative; display: block; width: 40px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(243, 243, 245, .22); }
.zeitmarke__fortschritt { position: absolute; inset: 0; background: var(--smoke); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.buehne__pause {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; pointer-events: auto;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(24, 25, 20, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--smoke); font-size: var(--t-mini); font-weight: 600; line-height: 1;
  transition: background-color .2s;
}
.buehne__pause:hover { background: rgba(24, 25, 20, .85); }
.buehne__pause svg { width: 14px; height: 14px; }
.buehne__icon-play, .buehne__pause.ist-angehalten .buehne__icon-pause { display: none; }
.buehne__pause.ist-angehalten .buehne__icon-play { display: block; }
.buehne__leiste :focus-visible { outline-color: var(--smoke); }
html:not(.js) .buehne__leiste { display: none; }
.buehne__hinweis { margin-top: 14px; font-size: var(--t-mini); color: var(--ink-2); }

/* ---------- Manifest mit gepinnter Collage (Startseite) ---------- */
.manifest { position: relative; }
.manifest__pin { position: relative; height: 320vh; }
.manifest__buehne { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; --cs: 1; }
.manifest__zeichen { position: absolute; z-index: 2; left: 50%; top: 34%; width: 112px; height: 104px; margin: -52px 0 0 -56px; color: var(--ink); }
.manifest__zeichen svg { width: 100%; height: 100%; overflow: visible; }
.manifest__zeichen path { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.manifest__text { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; padding: 0 var(--gx); text-align: center; will-change: transform, opacity; }
.manifest__titel { max-width: 22ch; margin: 0 auto; }
.manifest__titel span { display: block; }
.manifest__collage { position: absolute; inset: 0; }
.mk { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: calc(var(--w) * var(--cs) * 1px); will-change: transform; }
.mk--vorne { z-index: 4; }
.mk--foto { height: calc(var(--h) * var(--cs) * 1px); border-radius: 14px; }
.mk--foto img { position: absolute; inset: 0; }
.mk--foto.foto::after { top: 8px; right: 8px; }
.mk--karte, .mk--dunkel {
  display: block; padding: 1.1em 1.25em 1.2em; border-radius: 14px;
  background: var(--weiss); color: var(--ink); box-shadow: var(--schatten-karte);
  font-size: calc(13px * var(--cs)); line-height: 1.4;
}
.mk--dunkel { background: var(--nightshade); color: var(--smoke); box-shadow: 0 30px 60px -30px rgba(24, 25, 20, .6); }
.mk__kopf { display: flex; justify-content: space-between; gap: 1em; margin-bottom: .7em; font-size: .92em; font-weight: 500; color: var(--ink-2); }
.mk--dunkel .mk__kopf { color: var(--night-3); }
.mk__haupt { display: block; font-size: 1.08em; font-weight: 500; text-wrap: pretty; }
.mk__klein { display: block; margin-top: .2em; font-size: .92em; color: var(--ink-2); }
.mk__betrag { display: block; font-family: var(--font-display); font-size: 2.1em; line-height: 1.1; letter-spacing: -0.03em; }
.mk__marke { display: flex; align-items: center; gap: .65em; margin-top: .9em; font-size: .92em; font-weight: 600; }
.mk__marke i { width: .77em; height: .77em; flex: none; border-radius: 50%; background: var(--olivine); box-shadow: 0 0 0 .23em var(--olive-soft); }
.mk--dunkel .mk__marke i { box-shadow: 0 0 0 .23em rgba(168, 178, 143, .28); }
.mk__marke--wartet i { background: transparent; border: .16em solid currentColor; box-shadow: none; }
.mk--chip { display: flex; align-items: flex-end; padding: calc(16px * var(--cs)); }
.mk__chip {
  position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 12px; background: var(--weiss); color: var(--ink);
  font-size: var(--t-mini); font-weight: 600; box-shadow: 0 4px 14px rgba(24, 25, 20, .18);
}
.mk__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--olivine); box-shadow: 0 0 0 3px var(--olive-soft); }
.manifest__nach { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: clamp(32px, 4vw, 56px) var(--sektion); text-align: center; }
.manifest__satz { max-width: 40ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 1020px) {
  .manifest__pin { height: 300vh; }
  .manifest__buehne { --cs: .62; }
  .manifest__zeichen { width: 92px; height: 85px; margin: -42px 0 0 -46px; }
}
@media (max-width: 760px) {
  .manifest__buehne { --cs: .5; }
  .mk--karte, .mk--dunkel, .mk__chip { display: none; }
  .manifest__zeichen { width: 68px; height: 63px; margin: -31px 0 0 -34px; top: 36%; }
}
/* Ohne Bewegung oder ohne JavaScript: kein Pin, keine Collage, das Manifest steht */
@media (prefers-reduced-motion: reduce) {
  .manifest__pin { height: auto; }
  .manifest__buehne { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 32px; padding-top: var(--sektion); }
  .manifest__collage { display: none; }
  .manifest__zeichen, .manifest__text { position: relative; left: auto; top: auto; margin: 0; }
}
html:not(.js) .manifest__pin { height: auto; }
html:not(.js) .manifest__buehne { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 32px; padding-top: var(--sektion); }
html:not(.js) .manifest__collage { display: none; }
html:not(.js) .manifest__zeichen, html:not(.js) .manifest__text { position: relative; left: auto; top: auto; margin: 0; }

/* ---------- Drei Leistungen ---------- */
.leistungen__titel { max-width: 16ch; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }

/* ---------- Branchen-Kacheln ---------- */
.branchen__titel { max-width: 16ch; margin-bottom: clamp(36px, 4.5vw, 64px); }
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.kachel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bild bild" "text pfeil";
  align-items: start; column-gap: 16px; color: inherit; text-decoration: none; border-radius: var(--radius-gross);
}
.kachel:focus-visible { outline-offset: 6px; }
.kachel__bild { grid-area: bild; display: block; aspect-ratio: 4 / 5; }
.kachel__bild img { transition: transform 1.2s var(--ease-out); }
.kachel__text { grid-area: text; display: block; padding-top: 18px; }
.kachel__titel { display: block; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
.kachel__unter { display: block; margin-top: 6px; font-size: var(--t-klein); color: var(--ink-2); text-wrap: pretty; }
.kachel__pfeil { grid-area: pfeil; width: 22px; height: 22px; margin-top: 24px; transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .kachel:hover .kachel__bild img { transform: scale(1.04); }
  .kachel:hover .kachel__pfeil { transform: translateX(3px); }
}

/* ---------- Dunkler Bildabschnitt ---------- */
.bildabschnitt__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.bildabschnitt--gespiegelt .bildabschnitt__raster, .bildabschnitt--schritte .bildabschnitt__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bildabschnitt__bild { aspect-ratio: 4 / 5; }
.bildabschnitt__bild--quer { aspect-ratio: 3 / 2; }
.bildabschnitt__bild--karte { overflow: visible; background: transparent; }
.bildabschnitt__bild--karte img { border-radius: var(--radius-gross); }
.bildabschnitt__text .titel-h2, .bildabschnitt__kopf .titel-h2 { color: var(--smoke); max-width: 16ch; }
.bildabschnitt__text .lead { margin-top: 20px; }
.bildabschnitt__text .hinweis { margin-top: 16px; }
.bildabschnitt__text .text-link, .schritte__link { margin-top: 26px; }
.bildabschnitt__statement { margin-top: 24px; max-width: 30ch; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.015em; color: var(--night-2); text-wrap: pretty; }
.bildabschnitt__kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 64px; align-items: end; margin-bottom: clamp(44px, 5.5vw, 80px); }
.bildabschnitt__kopf .titel-h2 { max-width: 18ch; }
.bildabschnitt__spalte { display: flex; flex-direction: column; align-items: flex-start; }
.zeitleiste { margin-top: 28px; border-top: 1px solid var(--line-night); }
.zeitleiste li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-night); color: var(--smoke); line-height: 1.45; }
.zeitleiste__zeit { font-weight: 600; color: var(--night-3); }
.schritte { align-self: stretch; border-top: 1px solid var(--line-night); }
.schritt { padding: 22px 0; border-bottom: 1px solid var(--line-night); }
.schritt__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; color: var(--smoke); text-wrap: balance; }
.schritt p { margin-top: 8px; max-width: 56ch; color: var(--night-2); text-wrap: pretty; }
.karte--bild { position: absolute; z-index: 3; left: clamp(-56px, -3.5vw, -20px); bottom: 28px; width: min(320px, 86%); }
.text-link--hell { color: var(--smoke); border-color: var(--line-night); }
.text-link--hell:hover { border-color: var(--smoke); }
.weg { margin-top: 32px; border-top: 1px solid var(--line-night); }
.weg__schritt { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-night); color: var(--smoke); }
.weg__zahl { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--night-2); font-size: var(--t-mini); font-weight: 600; }
.weg__schritt p { padding-top: 4px; line-height: 1.5; text-wrap: pretty; }

/* ---------- Zweispalter (Gewerke-Seiten) ---------- */
.zweispalter__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.zweispalter--rechts .zweispalter__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.zweispalter__bild { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--kopf-h) + 24px); margin-top: calc(var(--t-h2) * .12); }
.zweispalter__lead { margin-top: clamp(20px, 2.2vw, 28px); }
.zweispalter__absatz { margin-top: clamp(20px, 2.2vw, 28px); max-width: 56ch; font-size: var(--t-gross); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.zweispalter__satz { margin-top: 28px; max-width: 52ch; font-size: var(--t-gross); line-height: 1.45; font-weight: 500; text-wrap: pretty; }

/* ---------- Preiszeile ---------- */
.preiszeile { padding-block: clamp(56px, 7vw, 104px); }
.preiszeile__innen { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; row-gap: 14px; padding: 26px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.preiszeile__posten { padding: 0 clamp(16px, 2.4vw, 36px); font-size: var(--t-gross); color: var(--ink-2); }
.preiszeile__posten + .preiszeile__posten { border-left: 1px solid var(--line-2); }
.preiszeile__betrag { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.preiszeile__link { margin-left: clamp(16px, 2.4vw, 36px); font-size: var(--t-klein); }

/* ---------- Schlussband ---------- */
.schlussband { padding-block: clamp(96px, 12vw, 176px); }
.schlussband__innen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.schlussband__zeichen { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 32px; border-radius: var(--radius-gross); background: rgba(243, 243, 245, .08); color: var(--smoke); }
.schlussband__zeichen svg { width: 44px; height: 41px; }
.schlussband__titel { max-width: 18ch; color: var(--smoke); }
.schlussband__titel span { display: block; }
.schlussband__aktion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 40px; }
.knopf--hell { background: var(--smoke); color: var(--ink); box-shadow: none; }
.knopf--hell:hover { background: var(--weiss); }

/* ---------- Fußzeile ---------- */
.fusszeile { position: relative; padding-block: clamp(56px, 7vw, 96px) 44px; border-top: 1px solid var(--line-night); }
.beleg-abschnitt.sektion { padding-bottom: clamp(16px, 2vw, 32px); }
.fusszeile__raster { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; align-items: start; }
.fusszeile__marke img { height: 26px; width: auto; }
.fusszeile__marke p { margin-top: 16px; max-width: 32ch; font-size: var(--t-klein); line-height: 1.6; color: var(--night-2); text-wrap: pretty; }
.fusszeile__marke .fusszeile__kontakt { margin-top: 8px; color: var(--night-3); }
.fusszeile__kontakt a { color: var(--night-2); text-decoration: underline; text-decoration-color: var(--line-night); text-underline-offset: 3px; white-space: nowrap; transition: color .2s; }
.fusszeile__kopf { margin-bottom: 12px; font-size: var(--t-mini); font-weight: 500; color: var(--night-3); }
.fusszeile__spalte a { display: inline-block; padding: 3px 0; font-size: var(--t-klein); line-height: 1.6; color: var(--night-2); text-decoration: none; transition: color .2s; }
.fusszeile a:hover, .fusszeile [aria-current="page"] { color: var(--smoke); }

/* ---------- Ablauf und Preise ---------- */
.preisblatt { padding-bottom: var(--sektion); }
.fragen-start__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 112px); align-items: start; }
.fragen-start { background: var(--weiss); }
.fragen-start__titel { max-width: 14ch; }
.passt-abschnitt .passt { margin-top: 0; }
.hinweis-zeile { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.hinweis-zeile a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Praxis ---------- */
.bereiche { padding-bottom: var(--sektion); }
.bereiche__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.bereiche__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.bereich { padding-top: 20px; border-top: 1px solid var(--line-2); }
.bereich__titel { margin-bottom: 8px; font-family: var(--font-display); font-size: var(--t-titel-klein); line-height: 1.25; letter-spacing: -0.015em; }
.bereich p { color: var(--ink-2); text-wrap: pretty; }
.alltag { max-width: 960px; }
.fall-kurz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(48px, 6vw, 80px); padding: 22px 26px; border-radius: var(--radius-gross); background: var(--smoke); }
.fall-kurz p { font-weight: 500; text-wrap: pretty; }

/* ---------- Beleg (Startseite) und Fall (Bäckerei & Konditorei) ---------- */
.beleg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(32px, 5vw, 96px); padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: var(--radius-gross); background: var(--weiss); }
.beleg__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.beleg__text p { max-width: 52ch; text-wrap: pretty; }
.beleg__text .beleg__stand { margin-top: 10px; font-size: var(--t-klein); color: var(--ink-2); }
.beleg__text .text-link { margin-top: 20px; }
.fall--seite { max-width: 880px; margin-inline: auto; }
.fall__titel { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- Über uns ---------- */
.person { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.person .titel-hero { max-width: 9em; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); }
.person__satz { margin-top: 28px; max-width: 40ch; font-size: var(--t-lead); line-height: 1.5; text-wrap: pretty; }
.person__bild { aspect-ratio: 1 / 1; }
.person__bild img { object-position: 50% 40%; }
.zusagen-abschnitt__titel { margin-bottom: clamp(40px, 5vw, 64px); }
.name-abschnitt__text p { max-width: 46ch; font-size: var(--t-lead); line-height: 1.5; text-wrap: pretty; }
.name-abschnitt__text p + p { margin-top: 20px; }

/* ---------- Fragen ---------- */
.fragen-gruppe { padding-block: clamp(40px, 5vw, 72px); }
.fragen-gruppe + .fragen-gruppe { padding-top: 0; }
.fragen-gruppe__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(40px, 6vw, 112px); align-items: start; }
.fragen-gruppe__titel { position: sticky; top: calc(var(--kopf-h) + 24px); padding-top: 18px; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.fragen-gruppe__liste .frage:last-of-type { border-bottom: 1px solid var(--line-2); }
.frage__mehr { padding-top: 18px; }
.fragen-gruppe:nth-last-child(2) { padding-bottom: var(--sektion); }

/* ---------- Erstgespräch ---------- */
.anfrage { padding-block: clamp(32px, 5vw, 72px) var(--sektion); }
.anfrage__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.anfrage__text { position: sticky; top: calc(var(--kopf-h) + 24px); }
.anfrage .titel-hero { max-width: 10em; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); }
.anfrage__lead { margin-top: 24px; max-width: 40ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.klaeren--hell .klaeren__titel { color: var(--ink); }
.klaeren--hell .klaeren__liste { border-top-color: var(--line-2); }
.klaeren--hell .klaeren__liste li { color: var(--ink); border-bottom-color: var(--line-2); }
.anfrage__tel { display: inline-block; margin-top: 24px; }
.formular--hell { border: 1px solid var(--line); box-shadow: none; }
.formular--hell form > .feld:first-of-type { margin-top: 0; }

/* ---------- Journal ---------- */
.beitraege-abschnitt { padding-bottom: var(--sektion); }
.beitraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 40px); }
.beitrag { display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.beitrag:focus-visible { outline-offset: 6px; }
.beitrag__bild { display: block; aspect-ratio: 3 / 2; margin-bottom: 20px; border-radius: var(--radius); }
.beitrag__bild img { transition: transform 1.5s ease, opacity .35s ease; }
@media (hover: hover) { .beitrag:hover .beitrag__bild img { transform: scale(1.05); opacity: .86; } }
.beitrag__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.beitrag__text { margin-top: 8px; color: var(--ink-2); text-wrap: pretty; }
.beitrag__stand { margin-top: 10px; font-size: var(--t-mini); color: var(--ink-2); }
.auftakt--artikel { padding-bottom: clamp(32px, 4vw, 56px); }
.artikel__stand { margin-top: 20px; font-size: var(--t-klein); line-height: 1.6; color: var(--ink-2); }
.artikel__bild { aspect-ratio: 21 / 9; border-radius: var(--radius-buehne); }
.artikel__inhalt { max-width: 68ch; margin: clamp(48px, 6vw, 88px) auto var(--sektion); font-size: var(--t-text); line-height: 1.7; }
.artikel__inhalt > * + * { margin-top: 18px; }
.artikel__inhalt .artikel__lead { font-size: var(--t-lead); line-height: 1.5; }
.artikel__inhalt h2 { margin-top: clamp(40px, 5vw, 56px); font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.artikel__inhalt h2 + p, .artikel__inhalt h2 + ul { margin-top: 14px; }
.artikel__inhalt p, .artikel__inhalt li { text-wrap: pretty; }
.artikel__inhalt ul { padding-left: 1.2em; list-style: disc; }
.artikel__inhalt li + li { margin-top: 6px; }
.artikel__inhalt a:not(.text-link) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color .2s; }
.artikel__inhalt a:not(.text-link):hover { text-decoration-color: currentColor; }
.artikel__quellen { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-2); font-size: var(--t-klein); line-height: 1.6; color: var(--ink-2); }
.artikel__quellen h2 { margin: 0 0 10px; font-family: var(--font-text); font-size: var(--t-klein); font-weight: 600; letter-spacing: 0; color: var(--ink); }
.artikel__inhalt .artikel__quellen h2 + ul { margin-top: 0; }
.artikel__weiter { padding-top: 16px; }

/* ---------- Rechtliches mit neuem Kopf ---------- */
.nx .rechtlich { padding-top: clamp(32px, 5vw, 72px); }

/* ---------- Breiten ---------- */
@media (max-width: 1020px) {
  .bildabschnitt__raster, .bildabschnitt--gespiegelt .bildabschnitt__raster, .bildabschnitt--schritte .bildabschnitt__raster,
  .bildabschnitt__kopf, .zweispalter__raster, .zweispalter--rechts .zweispalter__raster, .fragen-start__raster,
  .person, .anfrage__raster, .fragen-gruppe__raster, .beleg, .bereiche__kopf { grid-template-columns: minmax(0, 1fr); }
  .bildabschnitt__bild { max-width: 560px; aspect-ratio: 16 / 10; }
  .bildabschnitt__bild--quer { aspect-ratio: 3 / 2; }
  .bildabschnitt--gespiegelt .bildabschnitt__bild, .bildabschnitt--schritte .bildabschnitt__bild { order: 2; }
  .zweispalter__bild { order: 2; position: static; margin-top: 0; aspect-ratio: 16 / 10; max-width: 640px; }
  .zweispalter__raster { gap: 40px; }
  .person__bild { max-width: 420px; }
  .anfrage__text, .fragen-gruppe__titel { position: static; }
  .fragen-gruppe__titel { padding-top: 0; }
  .fusszeile__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fusszeile__marke { grid-column: 1 / -1; }
  .buehne--still { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .buehne { aspect-ratio: 4 / 5; border-radius: var(--radius-gross); }
  .buehne--still { aspect-ratio: 4 / 5; }
  .buehne.foto::after { top: 14px; right: 14px; }
  .karte--buehne { left: 14px; right: 14px; top: auto; bottom: 14px; width: auto; transform: translate3d(0, 16px, 0); }
  .szene.ist-aktiv .karte--buehne, html:not(.js) .karte--buehne { transform: none; }
  .karte--buehne .karte__punkte li:nth-child(n+3) { display: none; }
  .buehne__leiste { position: static; margin-top: 12px; align-items: center; pointer-events: auto; }
  .buehne__marken { padding: 0; gap: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .zeitmarke { padding: 8px 6px; color: var(--ink-2); }
  .zeitmarke:hover, .zeitmarke.ist-aktiv { color: var(--ink); background: transparent; }
  .zeitmarke__balken { width: 100%; min-width: 32px; background: var(--line-2); }
  .zeitmarke__fortschritt { background: var(--ink); }
  .buehne__pause { background: var(--weiss); color: var(--ink); border: 1px solid var(--line-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .buehne__pause:hover { background: var(--weiss); border-color: var(--ink); }
  .buehne__leiste :focus-visible { outline-color: var(--ink); }
  .beitraege, .bereiche__liste { grid-template-columns: minmax(0, 1fr); }
  .kacheln {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gx)); padding-inline: var(--gx); scroll-padding-inline: var(--gx);
  }
  .kacheln::-webkit-scrollbar { display: none; }
  .kacheln > li { flex: 0 0 78%; scroll-snap-align: start; }
  .karte--bild { position: relative; left: auto; bottom: auto; width: auto; max-width: 340px; margin: -44px 12px 0 auto; }
  .bildabschnitt__bild--karte { aspect-ratio: auto; }
  .bildabschnitt__bild--karte img { aspect-ratio: 16 / 10; height: auto; }
  .preiszeile__innen { flex-direction: column; align-items: flex-start; }
  .preiszeile__posten { padding: 0; }
  .preiszeile__posten + .preiszeile__posten { border-left: 0; }
  .preiszeile__link { margin: 6px 0 0; }
  .artikel__bild { aspect-ratio: 16 / 10; border-radius: var(--radius-gross); }
  .fall-kurz { padding: 20px; }
}
@media (max-width: 520px) {
  .auftakt__aktion { flex-direction: column; align-items: stretch; width: 100%; }
  .auftakt__aktion .knopf { width: 100%; }
  .schlussband__aktion { flex-direction: column; width: 100%; }
  .schlussband__aktion .knopf { width: 100%; }
  .fusszeile__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .buehne__pause { padding: 0; width: 38px; justify-content: center; }
  .buehne__pause-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zeitmarke { padding: 8px 4px; }
}
@media (max-width: 380px) {
  .nx .titel-hero { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
}

@media print {
  .pille, .handymenue, .buehne__leiste, .manifest__collage { display: none !important; }
  .manifest__pin { height: auto; }
  .manifest__buehne { position: relative; height: auto; }
  .manifest__zeichen, .manifest__text { position: relative; top: auto; left: auto; margin: 0; }
}

/* Einstieg der Startseite, mit Paul überarbeitet (15.10.2026): weniger Text. H1, ein Satz, Knopf, Garantie als Plakette. */
.auftakt--start .auftakt__unter { max-width: 46ch; margin-inline: auto; }
.auftakt__plakette { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 9px 16px 9px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--weiss); color: var(--ink); font-size: var(--t-klein); font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color .2s, transform .2s var(--ease-out); }
.auftakt__plakette svg { width: 18px; height: 18px; flex: none; }
.auftakt__plakette:hover { border-color: var(--ink-3); }
.auftakt__plakette:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 520px) { .auftakt__plakette { text-align: left; border-radius: 16px; } }
@media (min-width: 761px) {
  .auftakt--start .auftakt__unter { max-width: 52rem; text-wrap: pretty; }
  .auftakt__fuer { display: block; }
}

/* Einstieg der Startseite: eine Abstandsskala statt Einzelwerte (15.10.2026, mit Paul).
   S = innerhalb einer Gruppe (H1 zu Unterzeile, Knopf zu Garantie), M = zwischen Text und Handlung,
   L = Luft unter der Menü-Pille und vor der Bildbühne. Alle drei skalieren mit der Breite. */
.auftakt.auftakt--start {
  --luft-s: clamp(18px, 1.7vw, 24px);
  --luft-m: clamp(28px, 2.8vw, 40px);
  --luft-l: clamp(40px, 5vw, 72px);
  padding-top: var(--luft-l);
  padding-bottom: var(--luft-l);
}
.auftakt.auftakt--start .auftakt__innen > * { margin-top: 0; margin-bottom: 0; }
.auftakt.auftakt--start .auftakt__unter { margin-top: var(--luft-s); }
.auftakt.auftakt--start .auftakt__aktion { margin-top: var(--luft-m); }
.auftakt.auftakt--start .auftakt__plakette { margin-top: var(--luft-s); }

/* --------------------------------------------------------------------------
   Nachbesserung nach der Abschlussprüfung (15.10.2026)
   Funktionszeilen auf Ablauf und Preise und Startseite, Collage sichtbar mit ruhigem Zustand, Foto-Bühne auf Praxis,
   Ziffernkreise in den Beispielabläufen, Oliv nur für Freigabe, Zusagen als Haarlinien-Liste.
   Steht nach den Blöcken zum Einstieg der Startseite und ändert diese nicht.
   -------------------------------------------------------------------------- */

/* Funktionszeilen (Baustein 6): großes 16:10-Foto mit schwebender Karte, Bild abwechselnd links und rechts */
.fzeilen { padding-block: clamp(24px, 3vw, 48px) var(--sektion); }
.fzeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.fzeile + .fzeile { margin-top: clamp(88px, 10vw, 152px); }
.fzeile--rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fzeile--rechts .fzeile__bild { order: 2; }
.fzeile__bild { position: relative; }
.fzeile__foto { aspect-ratio: 16 / 10; }
.fzeile__karte { position: absolute; z-index: 3; right: clamp(-40px, -2.6vw, -16px); bottom: clamp(-40px, -3vw, -20px); width: min(320px, 70%); }
.fzeile--rechts .fzeile__karte { right: auto; left: clamp(-40px, -2.6vw, -16px); }
.fzeile__kartentitel { margin-bottom: 8px; font-size: var(--t-klein); font-weight: 600; }
.fzeile__punkte li { padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--t-klein); line-height: 1.45; text-wrap: pretty; }
.fzeile__kartentext { font-size: var(--t-klein); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.fzeile__kartenzahl { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--t-klein); font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.fzeile__titel { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: var(--t-figur); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.fzeile__absatz { margin-top: 18px; max-width: 46ch; font-size: var(--t-gross); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.fzeile__daten { margin-top: 22px; }
.fzeile__daten > div { padding: 12px 0; border-top: 1px solid var(--line-2); }
.fzeile__daten > div:last-child { border-bottom: 1px solid var(--line-2); }
.fzeile__daten dt { margin-bottom: 3px; font-size: var(--t-mini); color: var(--ink-2); }
.fzeile__daten dd { line-height: 1.55; text-wrap: pretty; }
.fzeile__daten dd.fzeile__frage { font-family: var(--font-display); font-size: var(--t-lead); line-height: 1.3; letter-spacing: -0.01em; }
.fzeile__ergebnis dd { font-weight: 500; }
.fzeile__knopf { margin-top: 28px; }
.fzeile__text .text-link { margin-top: 22px; }

/* Preisblatt als Zusammenfassung unter den Funktionszeilen */
.garantie__link { color: var(--smoke); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line-night); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.garantie__link:hover { text-decoration-color: currentColor; }
.weiter--kurz { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* Startseite: eine große Funktionszeile, darunter zwei kleinere Einträge statt eines zweiten Dreier-Rasters */
.leistungen .leistungen__titel { margin: 0 0 clamp(40px, 5vw, 72px); text-align: left; }
.leistungen__klein { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 64px); margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line-2); }
.leistung-klein { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; }
.leistung-klein__bild { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.leistung-klein__titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
.leistung-klein__text p { margin-top: 8px; color: var(--ink-2); text-wrap: pretty; }
.leistung-klein__text .fzeile__daten { margin-top: 14px; }
.leistung-klein__text .text-link { margin-top: 16px; font-size: var(--t-klein); }

/* Praxis: Morgenbericht auf einer Foto-Bühne */
.fotobuehne { position: relative; }
.fotobuehne__bild { aspect-ratio: 16 / 9; border-radius: var(--radius-buehne); }
.fotobuehne__bild img { object-position: 60% 50%; }
.fotobuehne__karte { position: absolute; z-index: 3; left: clamp(24px, 4.5vw, 64px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: min(490px, 44%); }
.fotobuehne .bericht { position: relative; left: auto; bottom: auto; width: 100%; margin: 0; }
.fotobuehne__tipp {
  padding: 5px 12px; border-radius: 999px; background: rgba(24, 25, 20, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--smoke); font-size: var(--t-mini); font-weight: 500;
}

/* Beispielabläufe: Ziffernkreis neben dem Titel wie im Preisblatt, „Schritt“ nur für Screenreader */
.schritt__titel { display: flex; align-items: flex-start; gap: 14px; }
.schritt__zahl {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid var(--night-2); color: var(--smoke);
  font-family: var(--font-text); font-size: var(--t-mini); font-weight: 600; letter-spacing: 0;
}
.schritt p { margin-left: 46px; }

/* Über uns: Zusagen als Haarlinien-Liste mit Symbol links */
.zusagen-abschnitt__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 112px); align-items: start; }
.zusagen-abschnitt__raster .zusagen-abschnitt__titel { margin-bottom: 0; max-width: 12ch; }
.zusagen-abschnitt .zusagen { margin-top: 0; }

/* Collage: Punktraster wie im Richtungsvertrag, Karten von Anfang an sichtbar */
.manifest__buehne { background-image: radial-gradient(var(--line-2) 1px, transparent 1.2px); background-size: 24px 24px; background-position: center; }
/* Ohne Bewegung oder ohne JavaScript: ruhiger, gesetzter Zustand mit vier Fotos und zwei Karten um das Statement */
@media (prefers-reduced-motion: reduce) {
  .manifest__buehne { min-height: 760px; overflow: hidden; justify-content: center; padding-block: var(--sektion); }
  .manifest__collage { display: block; }
  .mk { display: none; }
  .mk[data-ruhig] { display: block; z-index: 1; left: var(--sx); top: var(--sy); transform: none; }
}
html:not(.js) .manifest__buehne { min-height: 760px; overflow: hidden; justify-content: center; padding-block: var(--sektion); }
html:not(.js) .manifest__collage { display: block; }
html:not(.js) .mk { display: none; }
html:not(.js) .mk[data-ruhig] { display: block; z-index: 1; left: var(--sx); top: var(--sy); transform: none; }

/* Oliv nur für Freigabe: neutrale Zeichen, Marken und Auswahl auf den neuen Seiten (die Fallseite bleibt, wie sie ist) */
html.nx ::selection { background: var(--line-2); color: var(--ink); }
.garantie svg { color: var(--smoke); }
.montag__marken li.ist-jetzt::before { background: var(--smoke); }
.passt__spalte:not(.passt__spalte--nicht) .passt__liste svg { color: var(--ink); }
.offen { background: var(--weiss); }

@media (max-width: 1020px) {
  .fzeile, .fzeile--rechts, .zusagen-abschnitt__raster { grid-template-columns: minmax(0, 1fr); }
  .fzeile--rechts .fzeile__bild { order: 0; }
  .fzeile__karte, .fzeile--rechts .fzeile__karte { right: 16px; left: auto; bottom: -32px; }
  .fzeile__bild { margin-bottom: 32px; }
  .fotobuehne__bild { aspect-ratio: 16 / 10; }
  .fotobuehne__karte { position: relative; left: auto; top: auto; transform: none; width: min(490px, calc(100% - 32px)); margin: -110px 0 0 16px; }
}
@media (max-width: 760px) {
  .leistungen__klein { grid-template-columns: minmax(0, 1fr); }
  .fzeile__karte, .fzeile--rechts .fzeile__karte { position: relative; right: auto; left: auto; bottom: auto; width: auto; max-width: 340px; margin: -44px 12px 0 auto; }
  .fzeile__bild { margin-bottom: 0; }
  .fotobuehne__bild { aspect-ratio: 4 / 5; border-radius: var(--radius-gross); }
  .fotobuehne__karte { margin: -96px 0 0; width: 100%; }
  .schritt p { margin-left: 0; }
  .weiter--kurz { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mk[data-ruhig] { display: none; }
  .mk[data-ruhig]:nth-child(1) { display: block; left: 4%; top: 4%; }
  .mk[data-ruhig]:nth-child(4) { display: block; left: 50%; top: 76%; }
}
@media (max-width: 760px) {
  html:not(.js) .mk[data-ruhig] { display: none; }
  html:not(.js) .mk[data-ruhig]:nth-child(1) { display: block; left: 4%; top: 4%; }
  html:not(.js) .mk[data-ruhig]:nth-child(4) { display: block; left: 50%; top: 76%; }
}

/* --------------------------------------------------------------------------
   Stufen-Check (15.10.2026)
   Funnel auf stufen-check.html, Treppe als Teil (vorlagen/teile/treppe.html, auch im Teaser der Startseite),
   vierter Eintrag im Untermenü Leistungen, Hinweis-Link auf dem Erstgespräch.
   Nur neue Klassen (sc-, treppe, unter__innen--vier, anfrage__selbst); Regeln oben bleiben unverändert.
   Olivine nur für den Haken nach dem Absenden (Freigabe-Zustand), „Du bist hier“ und Auswahl in Nightshade.
   -------------------------------------------------------------------------- */

.unter__innen--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.anfrage__selbst { margin-top: 20px; }
.anfrage__selbst .text-link { font-size: var(--t-klein); }

/* ---------- Treppe: sechs Stufen, nach oben dunkler (White Smoke bis Nightshade, OKLab-Verlauf) ---------- */
.treppe { --treppe-h: clamp(120px, 13vw, 188px); --treppe-min: 32px; }
.treppe__stufen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 0; row-gap: 14px; }
.treppe__stufe { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.treppe__block {
  position: relative; display: block; align-self: end; padding: 9px 11px;
  height: calc(var(--treppe-min) + var(--n) * (var(--treppe-h) - var(--treppe-min)) / 5);
  border-radius: 12px 0 0 0; background: var(--farbe); color: var(--schrift);
  transform-origin: 50% 100%;
}
.treppe__stufe[data-stufe="5"] .treppe__block { border-radius: 12px 12px 0 0; }
.treppe__zahl { display: block; font-size: var(--t-mini); font-weight: 600; line-height: 1; }
.treppe__name { align-self: start; padding: 0 8px 0 11px; font-size: var(--t-klein); font-weight: 500; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.treppe__stufe[data-stufe="0"] { --n: 0; --farbe: #f3f3f5; --schrift: var(--ink); }
.treppe__stufe[data-stufe="1"] { --n: 1; --farbe: #c2c2c2; --schrift: var(--ink); }
.treppe__stufe[data-stufe="2"] { --n: 2; --farbe: #939392; --schrift: var(--ink); }
.treppe__stufe[data-stufe="3"] { --n: 3; --farbe: #666764; --schrift: var(--smoke); }
.treppe__stufe[data-stufe="4"] { --n: 4; --farbe: #3d3e3a; --schrift: var(--smoke); }
.treppe__stufe[data-stufe="5"] { --n: 5; --farbe: var(--nightshade); --schrift: var(--smoke); }
.treppe__stufe[data-stufe="0"] .treppe__block { box-shadow: inset 0 0 0 1px var(--line-2); }
.treppe__legende { display: none; }

/* „Du bist hier“ im Ergebnis: Marke in Nightshade über der Stufe, Ring um den Block */
.treppe--marke .treppe__stufen { padding-top: 50px; }
.treppe__marke {
  position: absolute; bottom: calc(100% + 13px); left: 50%; translate: -50% 0; z-index: 2;
  padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--smoke);
  font-size: var(--t-mini); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.treppe__marke::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.treppe__stufe[data-stufe="0"] .treppe__marke { left: 0; translate: none; }
.treppe__stufe[data-stufe="0"] .treppe__marke::after { left: 20px; }
.treppe__stufe[data-stufe="5"] .treppe__marke { left: auto; right: 0; translate: none; }
.treppe__stufe[data-stufe="5"] .treppe__marke::after { left: auto; right: 15px; }
.treppe__stufe.ist-hier .treppe__block { z-index: 1; box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--ink); }
.treppe__stufe.ist-hier .treppe__name, .treppe__legende li.ist-hier { font-weight: 600; color: var(--ink); }
.treppe__stufe.ist-ueber .treppe__name { color: var(--ink-2); }

/* Ergebnis: die Stufen wachsen bis zur eigenen, dann fällt die Marke ein (nur ohne reduzierte Bewegung) */
@keyframes treppe-wachsen { from { transform: scaleY(.06); } to { transform: none; } }
@keyframes treppe-marke { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.treppe.ist-wachsend .treppe__block { animation: treppe-wachsen .7s var(--ease-out) both; animation-delay: calc(var(--n) * 70ms + 120ms); }
.treppe.ist-wachsend .treppe__marke { animation: treppe-marke .45s var(--ease-out) both; animation-delay: .75s; }

/* ---------- Stufen-Check: Seite und Startbildschirm ---------- */
.sc { padding-block: clamp(28px, 4.4vw, 72px) var(--sektion); overflow-x: clip; }
/* hidden gilt immer, auch gegen display-Regeln der Ansichten (Start ist flex) */
.sc [hidden] { display: none !important; }
.sc-start { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc-start__text { display: flex; flex-direction: column; align-items: center; }
.sc-start__titel { max-width: 11em; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); }
.sc-start__unter { margin-top: clamp(18px, 1.8vw, 24px); max-width: 44ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sc-start__aktion { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(28px, 2.8vw, 40px); }
.sc-start__klein { font-size: var(--t-klein); color: var(--ink-2); }
html:not(.js) .sc-start__aktion { display: none; }
.sc-ohne-js { margin-top: 28px; max-width: 46ch; font-size: var(--t-gross); line-height: 1.5; text-wrap: pretty; }
.sc-ohne-js a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
.sc-buehne {
  width: 100%; margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(24px, 3.6vw, 56px) clamp(16px, 3.6vw, 56px) clamp(22px, 3vw, 44px);
  background: var(--weiss); border: 1px solid var(--line); border-radius: var(--radius-buehne, 36px);
  text-align: left;
}

/* ---------- Fragen ---------- */
.sc-frage__spalte { max-width: 820px; margin-inline: auto; }
.sc-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.sc-zurueck {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--weiss); color: var(--ink);
  font-size: var(--t-klein); font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color .2s;
}
.sc-zurueck svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .25s var(--ease-out); }
.sc-zurueck:hover { border-color: var(--ink); }
.sc-zurueck:hover svg { transform: rotate(180deg) translateX(3px); }
.sc-neu {
  min-height: 42px; padding: 0; white-space: nowrap; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font-size: var(--t-klein); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}
.sc-neu:hover { color: var(--ink); text-decoration-color: currentColor; }
.sc-stand { font-size: var(--t-klein); font-weight: 500; color: var(--ink-2); }
.sc-leiste { margin-top: 18px; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sc-leiste span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--anteil, 0)); transition: transform .6s var(--ease-out); }
.sc-frage__inhalt { padding-top: clamp(36px, 4.4vw, 64px); }
.sc-frage__titel {
  max-width: 24ch; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
.sc-frage__titel:focus, .sc-ergebnis__titel:focus { outline: none; }
.sc-frage__hinweis { margin-top: 12px; max-width: 52ch; font-size: var(--t-gross); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sc-antworten { display: grid; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 640px) { .sc-antworten--kurz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Antwortkarte: die ganze Karte ist der Knopf (role=radio) bzw. das Label der Checkbox */
.sc-antwort {
  position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 68px; padding: 16px 20px 16px 18px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--weiss); color: var(--ink);
  font-size: var(--t-gross); font-weight: 400; line-height: 1.4; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, box-shadow .2s, transform .15s var(--ease-out);
}
.sc-antwort__text { flex: 1; min-width: 0; text-wrap: pretty; }
.sc-antwort__punkt, .sc-wahl__kreis {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--ink-3); background: var(--weiss); color: var(--weiss);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.sc-wahl__kreis svg { width: 14px; height: 14px; opacity: 0; transition: opacity .15s; }
.sc-antwort__pfeil { flex: none; width: 18px; height: 18px; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s var(--ease-out); }
@media (hover: hover) {
  .sc-antwort:hover { border-color: var(--ink-3); }
  .sc-antwort:hover .sc-antwort__pfeil { opacity: 1; transform: none; }
}
.sc-antwort:active { transform: scale(.995); }
@media (hover: none) { .sc-antwort:not([aria-checked="true"]) .sc-antwort__pfeil { display: none; } }
.sc-antwort:focus-visible, .sc-antwort--wahl:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--radius); }
.sc-antwort[aria-checked="true"], .sc-antwort--wahl:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sc-antwort[aria-checked="true"] .sc-antwort__punkt { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 5px var(--weiss); }
.sc-antwort[aria-checked="true"] .sc-antwort__pfeil { opacity: 1; transform: none; }
.sc-antwort--wahl input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sc-antwort--wahl input:checked + .sc-wahl__kreis { border-color: var(--ink); background: var(--ink); }
.sc-antwort--wahl input:checked + .sc-wahl__kreis svg { opacity: 1; }
.sc-zusatz { padding: 2px 0 8px 56px; }
.sc-zusatz[hidden] { display: none; }
.sc-frei { margin-top: clamp(24px, 3vw, 36px); }
.sc-frei textarea { min-height: 136px; }
.sc-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.sc-fehler { font-size: var(--t-klein); font-weight: 500; color: var(--fehler); }
.sc-fehler:empty { display: none; }

/* Übergänge: vorwärts von rechts, zurück von links, Ansichten von unten. Ohne reduzierte Bewegung. */
@keyframes sc-vor { from { opacity: 0; transform: translate3d(22px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sc-zurueck { from { opacity: 0; transform: translate3d(-22px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sc-auf { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.sc-anim-vor { animation: sc-vor .45s var(--ease-out) both; }
.sc-anim-zurueck { animation: sc-zurueck .45s var(--ease-out) both; }
.sc-anim-auf { animation: sc-auf .6s var(--ease-out) both; }

/* ---------- Ergebnis ---------- */
.sc-buehne--ergebnis { margin-top: clamp(24px, 3vw, 40px); }
.sc-ergebnis__kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; margin-top: clamp(48px, 6vw, 88px); }
.sc-ergebnis__titel { max-width: 14ch; }
.sc-ergebnis__satz { max-width: 26ch; font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }
.sc-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 96px); margin-top: clamp(40px, 5vw, 72px); }
.sc-block { padding-top: 22px; border-top: 1px solid var(--line-2); }
.sc-block__titel { font-family: var(--font-display); font-size: var(--t-titel-klein); line-height: 1.25; letter-spacing: -0.015em; }
.sc-block > p { margin-top: 10px; max-width: 54ch; color: var(--ink-2); text-wrap: pretty; }
.sc-block > .sc-weiter { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--t-klein); font-weight: 500; line-height: 1.5; color: var(--ink); }
.sc-weiter__label { font-weight: 400; color: var(--ink-2); }
.sc-weiter[hidden] { display: none; }
.sc-punkte { margin-top: 8px; }
.sc-punkte li { padding: 12px 0; border-bottom: 1px solid var(--line); line-height: 1.45; text-wrap: pretty; }
.sc-punkte li:last-child { border-bottom: 0; }
.sc-merksatz {
  max-width: 22ch; margin: clamp(72px, 9vw, 136px) auto 0; text-align: center;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance;
}
.sc-merksatz + .sc-raster { margin-top: clamp(72px, 9vw, 136px); }

/* Erstgespräch zum Ergebnis (Stufe 5: Austausch, mehr als 30 Leute: Hinweis ohne Formular) */
.sc-angebot { margin-top: clamp(72px, 9vw, 136px); }
.sc-angebot__raster, .sc-gross { padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line-2); }
.sc-angebot__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(40px, 6vw, 112px); align-items: start; }
.sc-angebot__raster[hidden], .sc-gross[hidden] { display: none; }
.sc-angebot__text { position: sticky; top: calc(var(--kopf-h) + 24px); }
.sc-angebot__titel { max-width: 13ch; }
.sc-angebot__lead { margin-top: 20px; max-width: 40ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sc-angebot__links { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 28px; }
.sc-gross .sc-angebot__titel { max-width: 18ch; }

/* ---------- Teaser auf der Startseite ---------- */
.sc-teaser__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 112px); align-items: center; }
/* ruhiger als eine Abschnittsüberschrift: eine Stufe kleiner, damit sie in der schmalen Spalte in drei Zeilen bleibt */
.sc-teaser__titel { max-width: none; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); }
.sc-teaser__satz { margin-top: 20px; max-width: 40ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sc-teaser .knopf { margin-top: 32px; }
.sc-teaser__treppe { padding: clamp(24px, 3.4vw, 48px) clamp(16px, 3vw, 44px) clamp(22px, 3vw, 40px); border-radius: var(--radius-gross); background: var(--smoke); }
.treppe--teaser { --treppe-h: clamp(112px, 11vw, 168px); }

/* ---------- Breiten ---------- */
@media (max-width: 1020px) {
  .sc-ergebnis__kopf, .sc-angebot__raster, .sc-teaser__raster { grid-template-columns: minmax(0, 1fr); }
  .sc-angebot__text { position: static; }
}
@media (max-width: 760px) {
  .sc-raster { grid-template-columns: minmax(0, 1fr); }
  .sc-buehne { border-radius: var(--radius-gross); }
}
@media (max-width: 639px) {
  .treppe__stufen { row-gap: 0; }
  .treppe__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .treppe__block { padding-inline: 4px; text-align: center; }
  .treppe__legende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 16px; font-size: var(--t-mini); line-height: 1.35; color: var(--ink-2); }
  .treppe__legende .ziffern { margin-right: 3px; font-weight: 600; color: var(--ink); }
}
@media (max-width: 520px) {
  .sc-start__aktion, .sc-start__aktion .knopf, .sc-aktion .knopf, .sc-teaser .knopf { width: 100%; }
  .sc-antwort { min-height: 62px; padding: 14px 16px; gap: 14px; }
  .sc-zusatz { padding-left: 0; }
}
@media (max-width: 379px) {
  .treppe__legende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-neu { font-size: var(--t-mini); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-anim-vor, .sc-anim-zurueck, .sc-anim-auf, .treppe.ist-wachsend .treppe__block, .treppe.ist-wachsend .treppe__marke { animation: none; }
  .sc-leiste span, .sc-antwort, .sc-antwort__pfeil, .sc-zurueck svg { transition: none; }
}
.treppe__stufe[data-stufe="0"].ist-hier .treppe__block { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 3px var(--weiss), 0 0 0 5px var(--ink); }

/* Phase 7 (15.10.2026): Stand-Zeile der Rechtstexte, Linkliste der 404-Seite */
.rechtlich__stand { margin-top: 40px; color: var(--ink-2); font-size: var(--t-klein); }
.rechtlich__wege { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Auftragsfluss-Check ---------- */
.af-page { background: var(--weiss); }
.af-hero { padding: clamp(52px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); background: var(--smoke); }
.af-hero__grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr); gap: clamp(48px, 8vw, 128px); align-items: center; }
.af-hero__copy .brotkrumen { margin-bottom: clamp(24px, 3vw, 42px); }
.af-hero__copy .titel-hero { max-width: 13ch; margin-top: 14px; }
.af-hero__intro { max-width: 54ch; margin-top: 24px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.52; text-wrap: pretty; }
.af-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.af-hero__actions p { color: var(--ink-2); font-size: var(--t-klein); }
.af-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; color: var(--ink-2); font-size: var(--t-klein); }
.af-hero__facts li { display: flex; align-items: center; gap: 8px; }
.af-hero__facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.af-hero__visual { padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-gross); background: var(--ink); color: var(--weiss); }
.af-route { display: grid; gap: 0; }
.af-route > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.af-route > div:last-of-type { border-bottom: 0; }
.af-route > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-size: var(--t-mini); }
.af-route strong { font-family: var(--font-display); font-size: var(--t-titel-klein); font-weight: 500; }
.af-route small { color: rgba(255,255,255,.62); line-height: 1.35; }
.af-route > i { display: none; }
.af-route__focus > span { background: var(--weiss); color: var(--ink); }
.af-hero__note { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.72); font-size: var(--t-klein); line-height: 1.55; }
.af-hero__note strong { color: var(--weiss); font-weight: 500; }

.af-preview { padding: clamp(72px, 9vw, 136px) 0; }
.af-preview .titel-h2 { max-width: 15ch; margin-top: 14px; }
.af-preview__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(44px, 6vw, 76px); background: var(--line-2); border: 1px solid var(--line-2); }
.af-preview__grid article { min-height: 260px; padding: clamp(26px, 3vw, 42px); background: var(--weiss); }
.af-preview__grid article > span { font-family: var(--font-mono); color: var(--ink-3); font-size: var(--t-klein); }
.af-preview__grid h3 { max-width: 14ch; margin-top: 42px; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.16; letter-spacing: -.02em; }
.af-preview__grid p { max-width: 36ch; margin-top: 16px; color: var(--ink-2); line-height: 1.55; }

.af-proofline { padding: 22px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--weiss); }
.af-proofline p { overflow: hidden; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-klein); line-height: 1.5; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.af-section-head { max-width: 760px; }
.af-section-head .titel-h2 { max-width: 15ch; margin-top: 14px; }
.af-section-head > p:not(.np-kicker) { max-width: 58ch; margin-top: 22px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.55; }
.af-section-head .knopf { margin-top: 30px; }
.af-section-head--center { margin-inline: auto; text-align: center; }
.af-section-head--center .titel-h2 { margin-inline: auto; }

.af-problem { padding: clamp(84px, 10vw, 150px) 0; }
.af-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(48px, 7vw, 86px); border: 1px solid var(--line-2); background: var(--line-2); }
.af-scenes article { min-height: 300px; padding: clamp(26px, 3vw, 44px); background: var(--weiss); }
.af-scenes article > span { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--t-klein); }
.af-scenes h3 { max-width: 14ch; margin-top: 54px; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.14; letter-spacing: -.02em; }
.af-scenes p { margin-top: 18px; color: var(--ink-2); line-height: 1.58; }

.af-reframe { padding: clamp(84px, 10vw, 152px) 0; }
.af-reframe__grid, .af-trust__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(52px, 9vw, 140px); align-items: start; }
.af-reframe .titel-h2, .af-trust .titel-h2 { max-width: 14ch; margin-top: 14px; }
.af-reframe__copy > p { max-width: 50ch; color: var(--hell-2); font-size: var(--t-lead); line-height: 1.58; }
.af-reframe__copy > p + p { margin-top: 22px; }
.af-reframe__copy .knopf { margin-top: 34px; }

.af-sample { padding: clamp(84px, 10vw, 152px) 0; }
.af-sample__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); gap: clamp(52px, 9vw, 132px); align-items: center; }
.af-sample-card { border-radius: var(--radius-gross); background: var(--ink); color: var(--weiss); box-shadow: 0 28px 80px rgba(16,18,20,.14); overflow: hidden; }
.af-sample-card > .af-label { padding: 28px clamp(26px, 4vw, 44px) 0; color: rgba(255,255,255,.48); }
.af-sample-card > div { display: grid; gap: 12px; padding: 26px clamp(26px, 4vw, 44px); border-bottom: 1px solid rgba(255,255,255,.14); }
.af-sample-card > div span { color: rgba(255,255,255,.58); font-size: var(--t-klein); }
.af-sample-card > div strong { max-width: 24ch; font-family: var(--font-display); font-size: var(--t-titel-klein); font-weight: 500; line-height: 1.2; }
.af-sample-card > div p { max-width: 48ch; color: rgba(255,255,255,.82); line-height: 1.55; }
.af-sample-card__status { background: var(--weiss); color: var(--ink); }
.af-sample-card__status span { color: var(--ink-3) !important; }
.af-sample-card > small { display: block; padding: 20px clamp(26px, 4vw, 44px) 26px; color: rgba(255,255,255,.72); font-size: var(--t-klein); line-height: 1.5; }

.af-process { padding: clamp(84px, 10vw, 150px) 0; background: var(--smoke); }
.af-process__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(48px, 7vw, 82px); counter-reset: none; }
.af-process__steps li { min-height: 280px; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius); background: var(--weiss); }
.af-process__steps li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--weiss); font-family: var(--font-mono); font-size: var(--t-mini); }
.af-process__steps h3 { margin-top: 48px; font-family: var(--font-display); font-size: var(--t-titel-klein); font-weight: 500; line-height: 1.18; }
.af-process__steps p { margin-top: 16px; color: var(--ink-2); line-height: 1.55; }

.af-fit { padding: clamp(84px, 10vw, 150px) 0; }
.af-fit__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(48px, 8vw, 120px); align-items: start; }
.af-fit .titel-h2 { max-width: 13ch; margin-top: 14px; }
.af-fit__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.af-fit__cards article { padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line-2); border-radius: var(--radius); }
.af-fit__cards article:first-child { background: var(--smoke); }
.af-fit__cards h3 { font-family: var(--font-display); font-size: var(--t-titel-klein); font-weight: 500; }
.af-fit__cards ul { margin-top: 24px; }
.af-fit__cards li { position: relative; padding: 12px 0 12px 20px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); line-height: 1.5; }
.af-fit__cards li::before { content: ""; position: absolute; top: 21px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.af-fit__cards li:last-child { border-bottom: 0; }

.af-trust { padding: clamp(84px, 10vw, 150px) 0; }
.af-trust__grid > div:last-child > p { max-width: 52ch; color: var(--hell-2); font-size: var(--t-lead); line-height: 1.58; }
.af-trust__grid ul { margin-top: 34px; border-top: 1px solid var(--dunkel-linie); }
.af-trust__grid li { padding: 16px 0; border-bottom: 1px solid var(--dunkel-linie); color: var(--hell-2); }
.af-trust__plain { margin-top: 28px; font-size: var(--t-klein) !important; }
.af-trust__plain strong { color: var(--weiss); }

.af-faq { padding: clamp(84px, 10vw, 150px) 0; }
.af-faq__grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 8vw, 120px); align-items: start; }
.af-faq .titel-h2 { max-width: 10ch; margin-top: 14px; }
.af-faq__items { border-top: 1px solid var(--line-2); }
.af-faq__items details { border-bottom: 1px solid var(--line-2); }
.af-faq__items summary { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; font-weight: 650; list-style: none; }
.af-faq__items summary::-webkit-details-marker { display: none; }
.af-faq__items summary svg { flex: 0 0 auto; width: 18px; height: 18px; transition: transform .2s; }
.af-faq__items details[open] summary svg { transform: rotate(45deg); }
.af-faq__items details p { max-width: 60ch; padding: 0 34px 24px 0; color: var(--ink-2); line-height: 1.58; }

.af-final-cta { padding: clamp(64px, 8vw, 110px) 0; background: var(--ink); color: var(--weiss); }
.af-final-cta__inner { display: flex; justify-content: space-between; gap: 40px; align-items: center; }
.af-final-cta .titel-h2 { max-width: 13ch; margin-top: 12px; }
.af-final-cta .np-kicker { color: rgba(255,255,255,.58); }
.af-final-cta .knopf { flex: 0 0 auto; }

.af-check { padding: clamp(68px, 8vw, 120px) 0; background: var(--smoke); scroll-margin-top: var(--kopf-h); }
.af-check__shell { max-width: 920px; min-height: 560px; margin: 0 auto; padding: clamp(28px, 5vw, 72px); border-radius: var(--radius-gross); background: var(--weiss); box-shadow: 0 22px 70px rgba(16,18,20,.07); }
.af-check__intro[hidden], .af-question[hidden], .af-leadgate[hidden], .af-result[hidden], .af-contact[hidden] { display: none !important; }
.af-check__intro { display: grid; justify-items: start; align-content: center; min-height: 410px; }
.af-check__intro .titel-h2 { max-width: 13ch; margin-top: 14px; }
.af-check__intro > p:not(.np-kicker) { max-width: 48ch; margin-top: 20px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; }
.af-check__intro .knopf { margin-top: 30px; }
.af-progress { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.af-progress p { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-klein); }
.af-back, .af-restart { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; font-size: var(--t-klein); }
.af-back svg { width: 15px; height: 15px; transform: rotate(180deg); }
.af-back:hover, .af-restart:hover { color: var(--ink); }
.af-back:focus-visible, .af-restart:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.af-progress__bar { height: 3px; margin-top: 18px; overflow: hidden; border-radius: 3px; background: var(--line-2); }
.af-progress__bar span { display: block; width: 0; height: 100%; background: var(--ink); transition: width .35s var(--ease-out); }
.af-question__body { padding-top: clamp(44px, 6vw, 76px); }
.af-question__area { color: var(--ink-3); font-size: var(--t-klein); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.af-question__title { max-width: 18ch; margin-top: 12px; }
.af-options { display: grid; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.af-option { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; min-height: 68px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--weiss); color: var(--ink); cursor: pointer; font: inherit; line-height: 1.4; text-align: left; transition: border-color .2s, box-shadow .2s, transform .15s; }
.af-option:hover { border-color: var(--ink-3); }
.af-option:active { transform: scale(.995); }
.af-option:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.af-option[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.af-option__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--smoke); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-klein); }
.af-option[aria-pressed="true"] .af-option__mark { background: var(--ink); color: var(--weiss); }

.af-leadgate { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(36px, 6vw, 72px); align-items: start; }
.af-leadgate__copy { padding-top: 10px; }
.af-leadgate__copy .titel-h2 { max-width: 10ch; margin-top: 14px; }
.af-leadgate__copy > p:not(.np-kicker) { margin-top: 20px; color: var(--ink-2); line-height: 1.55; }
.af-leadgate__teaser { display: grid; gap: 8px; margin-top: 32px; padding: 24px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--smoke); overflow: hidden; }
.af-leadgate__teaser span { color: var(--ink-3); font-size: var(--t-mini); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.af-leadgate__teaser strong { margin-bottom: 12px; color: var(--ink); filter: blur(5px); letter-spacing: .08em; user-select: none; }
.af-leadgate__form { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--weiss); box-shadow: 0 18px 48px rgba(16,18,20,.08); }
.af-leadgate__eyebrow { margin-bottom: 22px; color: var(--ink); font-weight: 700; }
.af-leadgate__form .feld-paar { grid-template-columns: minmax(0, 1fr); }
.af-leadgate__form .formular__datenschutz { color: var(--ink-3); }
.af-leadgate__form .formular__datenschutz a { color: var(--ink); }

.af-result__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.af-result > .titel-h2 { max-width: 14ch; margin-top: 26px; }
.af-result__lead { max-width: 50ch; margin-top: 20px; font-size: var(--t-lead); line-height: 1.5; }
.af-result__basis { max-width: 68ch; margin-top: 14px; color: var(--ink-2); font-size: var(--t-klein); line-height: 1.5; }
.af-scorecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
.af-scorecards article { padding: 18px; border-radius: var(--radius); background: var(--smoke); }
.af-scorecards article[data-focus="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.af-scorecards h3 { font-size: var(--t-klein); line-height: 1.35; }
.af-scorecards p { margin-top: 12px; font-size: var(--t-mini); font-weight: 600; }
.af-scorecards article[data-tone="kritisch"] p { color: #9a3412; }
.af-scorecards article[data-tone="mittel"] p { color: #7c5c10; }
.af-scorecards article[data-tone="stabil"] p { color: #17623a; }
.af-result__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 42px; background: var(--line-2); border: 1px solid var(--line-2); }
.af-result__grid article { min-height: 230px; padding: clamp(24px, 3vw, 38px); background: var(--weiss); }
.af-result__grid .af-result__primary { background: var(--ink); color: var(--weiss); }
.af-label { color: var(--ink-3); font-size: var(--t-mini); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.af-result__primary .af-label { color: rgba(255,255,255,.55); }
.af-result__grid h3 { max-width: 18ch; margin-top: 30px; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.16; letter-spacing: -.02em; }
.af-result__grid article > p:not(.af-label), .af-result__grid ul { margin-top: 22px; line-height: 1.55; }
.af-result__grid article:not(.af-result__primary) > p:not(.af-label), .af-result__grid ul { color: var(--ink-2); }
.af-result__grid li { position: relative; padding: 8px 0 8px 18px; border-bottom: 1px solid var(--line); }
.af-result__grid li::before { content: ""; position: absolute; top: 17px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.af-result__grid li:last-child { border-bottom: 0; }
.af-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.af-result__whatsapp-note { max-width: 62ch; margin-top: 14px; color: var(--ink-3); font-size: var(--t-klein); line-height: 1.5; }
.af-print { border: 0; background: transparent; cursor: pointer; font: inherit; }
.af-print:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.af-contact { padding: clamp(72px, 9vw, 136px) 0; scroll-margin-top: var(--kopf-h); }
.af-contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(48px, 8vw, 128px); align-items: start; }
.af-contact .titel-h2 { max-width: 13ch; margin-top: 14px; }
.af-contact__intro { max-width: 48ch; margin-top: 24px; color: var(--hell-2); font-size: var(--t-lead); line-height: 1.5; }
.af-contact__points { margin-top: 32px; border-top: 1px solid var(--dunkel-linie); }
.af-contact__points li { padding: 15px 0; border-bottom: 1px solid var(--dunkel-linie); color: var(--hell-2); }
.af-note { padding: clamp(72px, 9vw, 128px) 0; }
.af-note__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 8vw, 128px); }
.af-note .titel-h2 { max-width: 14ch; margin-top: 14px; }
.af-note__grid > div:last-child { color: var(--ink-2); font-size: var(--t-lead); line-height: 1.55; }
.af-note__grid > div:last-child p + p { margin-top: 24px; }
.af-note strong { color: var(--ink); }

@media (max-width: 980px) {
  .af-hero__grid, .af-reframe__grid, .af-sample__grid, .af-fit__grid, .af-trust__grid, .af-faq__grid, .af-leadgate, .af-contact__grid, .af-note__grid { grid-template-columns: minmax(0, 1fr); }
  .af-hero__visual { max-width: 680px; }
  .af-sample__grid, .af-fit__grid, .af-faq__grid { gap: 48px; }
  .af-sample-card { max-width: 720px; }
  .af-fit__cards { max-width: 760px; }
  .af-leadgate { max-width: 720px; }
  .af-contact__grid { max-width: 760px; }
}
@media (max-width: 760px) {
  .af-scenes, .af-process__steps, .af-fit__cards, .af-preview__grid, .af-scorecards, .af-result__grid { grid-template-columns: minmax(0, 1fr); }
  .af-scenes article, .af-process__steps li, .af-preview__grid article { min-height: 0; }
  .af-scenes h3, .af-process__steps h3 { margin-top: 32px; }
  .af-final-cta__inner { align-items: flex-start; flex-direction: column; }
  .af-result__grid article { min-height: 0; }
  .af-check__shell { min-height: 0; padding: 26px 18px 32px; border-radius: var(--radius); }
  .af-contact__grid { gap: 40px; }
}
@media (max-width: 520px) {
  .af-hero__actions, .af-hero__actions .knopf, .af-section-head .knopf, .af-reframe__copy .knopf, .af-final-cta .knopf, .af-result__actions, .af-result__actions .knopf { width: 100%; }
  .af-hero__actions { align-items: flex-start; }
  .af-hero__facts { display: grid; }
  .af-option { grid-template-columns: 32px minmax(0, 1fr); min-height: 62px; padding: 12px 14px; gap: 12px; }
  .af-option__mark { width: 30px; height: 30px; }
  .af-result__top { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .af-progress__bar span, .af-option { transition: none; }
}
@media print {
  .kopfzeile, .fusszeile, .af-hero, .af-preview, .af-check__intro, .af-question, .af-contact, .af-note, .af-result__top button, .af-result__actions { display: none !important; }
  .af-check { padding: 0; background: #fff; }
  .af-check__shell { max-width: none; min-height: 0; padding: 0; box-shadow: none; }
  .af-result[hidden] { display: none !important; }
  .af-result__grid { break-inside: avoid; }
}