/* agora Website Relaunch v6: Bausteine. Werte kommen aus tokens.css. */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 var(--t-text) / 1.55 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.kopf :focus-visible, .hero :focus-visible, .abschnitt--dunkel :focus-visible, .fuss :focus-visible { outline-color: var(--weiss); }

.rahmen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.inhalt-kompakt { --abschnitt: var(--abschnitt-kompakt); }
.inhalt-kompakt .abschnitt--nah { padding-top: var(--abschnitt); }
.inhalt-kompakt .pfad { padding-top: var(--abschnitt-innen); }
.inhalt-kompakt .pfad:not([hidden]) ~ .pfad { margin-top: var(--abschnitt-innen); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--dunkel { background: var(--schiefer); color: var(--weiss); }
.abschnitt--weiss { background: var(--weiss); }

/* ---------- Schrift ---------- */
.titel { font: 500 var(--t-gross) / 1.12 var(--sans); letter-spacing: -0.015em; max-width: 22ch; text-wrap: balance; }
.titel--breit { max-width: 30ch; }
.vorspann { font-size: var(--t-mittel); line-height: 1.45; max-width: 54ch; }
.nebentext { color: var(--grau); }
.abschnitt--dunkel .nebentext { color: var(--nebel); }
.titel + .vorspann, .titel + .nebentext { margin-top: 1.25rem; }

/* ---------- Knopf und Textlink ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.7rem 1.4rem;
  background: var(--orange); color: var(--tinte); border: 0; border-radius: var(--radius);
  font: 600 1rem / 1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background 200ms var(--weich), color 200ms var(--weich), scale 200ms var(--weich);
}
.knopf:hover { background: var(--weiss); }
/* Gibt beim Drücken leicht nach, wie bei Supabase (97 %, 200 ms) */
.knopf:active { scale: 0.97; }
@media (prefers-reduced-motion: reduce) { .knopf:active { scale: 1; } }
.abschnitt:not(.abschnitt--dunkel) .knopf:hover, .kopf--hell .knopf:hover { background: var(--tinte); color: var(--weiss); }
.textlink { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
.textlink:hover { text-decoration-color: var(--orange); }
.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }

/* ---------- Kopf ---------- */
.kopf { position: absolute; inset: 0 0 auto 0; z-index: 10; color: var(--weiss); }
.kopf__innen { display: flex; align-items: center; gap: 2rem; min-height: 5rem; }
.kopf__logo { display: block; flex-shrink: 0; }
.kopf__logo img { display: block; height: 1.5rem; width: auto; translate: 0 3px; } /* Rand aus dem SVG geschnitten: Zeichen 24 px statt 19,5. 3 px tiefer: optische Mitte auf die Versalhöhe der Menüschrift statt gleicher Grundlinie, sonst wirkt das große Zeichen zu hoch */
.kopf__nav { display: flex; gap: clamp(0.9rem, 1.5vw, 1.75rem); margin-inline: auto; }
.kopf__nav a, .kopf__neben a:not(.knopf) { font-size: 0.975rem; font-weight: 500; text-decoration: none; padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"], .kopf__neben a:not(.knopf):hover { border-bottom-color: var(--orange); }
.kopf__neben { display: flex; align-items: center; gap: 1.5rem; }
.kopf .knopf { min-height: 2.6rem; padding: 0.5rem 1.1rem; font-size: 0.95rem; }
.kopf__schalter { display: none; }
/* Sieben Menüpunkte brauchen Platz: Darunter klappt das Menü ein. */
@media (max-width: 1280px) {
  .kopf__innen { gap: 1rem; min-height: 4.25rem; }
  .kopf__schalter { display: inline-flex; margin-left: auto; align-items: center; min-height: 2.75rem; padding: 0 0.9rem; background: transparent; border: 1.5px solid currentColor; border-radius: var(--radius); font-weight: 500; cursor: pointer; }
  .kopf__nav, .kopf__neben { display: none; }
  .kopf[data-offen="true"] .kopf__menue { display: grid; }
  .kopf__menue { display: none; position: absolute; inset: 100% 0 auto 0; gap: 0; padding: 0.5rem var(--rand) 1.5rem; background: var(--tinte); }
  .kopf__menue .kopf__nav, .kopf__menue .kopf__neben { display: grid; gap: 0; margin: 0; }
  .kopf__menue a:not(.knopf) { display: block; padding-block: 0.9rem; border-bottom: 1px solid var(--linie-hell); font-size: 1.1rem; }
  .kopf__menue .knopf { margin-top: 1.25rem; min-height: 3rem; }
}
/* Menü klappt schon unter 1360 px ein, weil Anmelden und Registrieren Platz brauchen (05.10.2026).
   Die Höhe der Leiste wechselt weiter bei 1280 px, gleich wie im Konto. */
@media (min-width: 1281px) and (max-width: 1360px) {
  .kopf__schalter { display: inline-flex; margin-left: auto; align-items: center; min-height: 2.75rem; padding: 0 0.9rem; background: transparent; border: 1.5px solid currentColor; border-radius: var(--radius); font-weight: 500; cursor: pointer; }
  .kopf__nav, .kopf__neben { display: none; }
  .kopf[data-offen="true"] .kopf__menue { display: grid; }
  .kopf__menue { display: none; position: absolute; inset: 100% 0 auto 0; gap: 0; padding: 0.5rem var(--rand) 1.5rem; background: var(--tinte); }
  .kopf__menue .kopf__nav, .kopf__menue .kopf__neben { display: grid; gap: 0; margin: 0; }
  .kopf__menue a:not(.knopf) { display: block; padding-block: 0.9rem; border-bottom: 1px solid var(--linie-hell); font-size: 1.1rem; }
  .kopf__menue .knopf { margin-top: 1.25rem; min-height: 3rem; }
}
@media (min-width: 1361px) { .kopf__menue { display: contents; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--schiefer); color: var(--weiss); overflow: hidden; isolation: isolate; }
.hero__innen { position: relative; z-index: 2; display: grid; align-content: center; min-height: min(52rem, 100svh); padding-block: 8.5rem 5rem; }
.hero__zeile { font: 500 var(--t-hero) / 1.24 var(--mono); text-transform: uppercase; letter-spacing: -0.01em; }
.hero__zeile span { display: table; padding: 0.04em 0.3em 0.02em; margin-left: -0.3em; background: var(--tinte); }
.hero__zeile span + span { margin-top: 0.14em; }
.hero__unter { margin-top: 1.75rem; max-width: 27rem; font-size: var(--t-mittel); line-height: 1.5; }
/* Text liegt auf dunklen Balken, damit Zeichnung und Video dahinter nie stören. */
.hero__unter span, .hero__hinweis { background: rgb(27 29 33 / 0.82); padding: 0.12em 0.35em; margin-left: -0.35em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .knopfzeile { margin-top: 2.25rem; }
.hero__hinweis { color: var(--nebel); font-size: 0.95rem; }
.hero__hinweis .textlink { color: var(--weiss); }
.hero__bild { position: absolute; right: 0; bottom: 0; z-index: 1; width: auto; max-width: none; height: min(88%, 54vw); }
.hero--klein .hero__innen { min-height: min(38rem, 82svh); }
.hero--klein .hero__bild { top: 5rem; height: calc(100% - 5rem); width: min(56%, 52rem); object-fit: cover; object-position: 50% 50%; }
/* Weiche Ränder: Bild und Video laufen in den Grund aus, auch wenn ihr Grauton leicht abweicht. */
.hero__bild, .hero__figur img, .hero__figur video {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%), linear-gradient(to bottom, transparent, #000 12%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%), linear-gradient(to bottom, transparent, #000 12%, #000 92%, transparent);
  mask-composite: intersect;
}
/* Zeichnung mit Beschriftung: Rahmen im Seitenverhältnis des Bildes, damit die Fahne an der Linie sitzt. */
.hero__figur { position: absolute; right: 0; bottom: 0; z-index: 1; width: min(50%, 44rem); aspect-ratio: 1600 / 1194; }
.hero__figur img, .hero__figur video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; }
  .hero__innen, .hero--klein .hero__innen { min-height: 0; padding-block: 6.25rem 2rem; }
  .hero__bild, .hero__figur { order: 2; }
  .hero__figur { position: relative; width: 100%; }
  /* Hero-Film: links liegt die leere Textfläche im Video; 4:3 zeigt die Zeichnung mittig. */
  .hero__bild, .hero--klein .hero__bild { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: right center; }
  .hero--klein .hero__bild { aspect-ratio: 4 / 3; object-fit: contain; object-position: center; }
}

/* ---------- Plankopf: Raster mit Kennwerten ---------- */
.plankopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border: 1px solid var(--linie); background: var(--weiss); }
.plankopf > * { padding: 0.85rem 1rem 0.95rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 0 -1px -1px 0; }
.plankopf dt { font-size: var(--t-klein); color: var(--grau); }
.plankopf dd { font: 500 1.05rem / 1.3 var(--mono); margin-top: 0.15rem; }
.abschnitt--dunkel .plankopf { background: transparent; border-color: var(--linie-hell); }
.abschnitt--dunkel .plankopf > * { border-color: var(--linie-hell); }
.abschnitt--dunkel .plankopf dt { color: var(--nebel); }

/* ---------- Pfade: drei Fälle, drei getrennte Werkzeuge ---------- */
.fahne { position: absolute; left: 62%; top: 3.5%; width: 35%; padding: 0.55rem 0.7rem; background: var(--weiss); color: var(--tinte); font: 400 clamp(0.62rem, 0.95vw, 0.82rem) / 1.35 var(--mono); }
.fahne { transition: opacity 400ms var(--aus); }
[data-stand="laeuft"] > .fahne { opacity: 0; }
.fahne strong { display: block; font-weight: 500; }
.fahne strong::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; background: var(--orange); }

.pfadwahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.5rem; border: 1.5px solid var(--tinte); }
.pfadwahl button { display: grid; gap: 0.3rem; align-content: start; padding: 1.1rem 1.25rem 1.2rem; background: transparent; border: 0; border-right: 1.5px solid var(--tinte); text-align: left; cursor: pointer; }
.pfadwahl button:last-child { border-right: 0; }
.pfadwahl button:hover { background: var(--weiss); }
.pfadwahl__fall { font: 500 var(--t-mittel) / 1.2 var(--sans); letter-spacing: -0.01em; }
.pfadwahl__werkzeug { font: 400 0.95rem / 1.4 var(--mono); color: var(--grau); }
.pfadwahl button[aria-selected="true"] { background: var(--tinte); color: var(--weiss); box-shadow: inset 0 5px 0 var(--orange); }
.pfadwahl button[aria-selected="true"] .pfadwahl__werkzeug { color: var(--nebel); }
.pfadwahl button:focus-visible { outline-offset: -6px; }
.pfadwahl button[aria-selected="true"]:focus-visible { outline-color: var(--weiss); }

.pfad { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.pfad[hidden] { display: none; }
.pfad:not([hidden]) ~ .pfad { margin-top: var(--abschnitt); }
.pfad__titel { font: 500 clamp(1.4rem, 1.1rem + 1.2vw, 2rem) / 1.18 var(--sans); letter-spacing: -0.012em; max-width: 30ch; text-wrap: balance; }
.pfad__inhalt .textlink { display: inline-block; margin-top: 1.5rem; }
.pfad__bild { position: relative; background: var(--schiefer); aspect-ratio: 1600 / 1194; }
.pfad__bild img, .pfad__bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.paare { width: 100%; margin-top: 1.75rem; border-collapse: collapse; border-top: 1.5px solid var(--tinte); text-align: left; }
.paare th { padding: 0.7rem 1.5rem 0.7rem 0; font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); border-bottom: 1px solid var(--linie); }
.paare td { width: 50%; padding: 1rem 1.5rem 1rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.paare td:first-child { color: var(--grau); }
.paare td:last-child { font-weight: 500; padding-right: 0; }
.paare th:last-child { color: var(--tinte); padding-right: 0; }

.preisbox { display: grid; gap: 0.85rem; padding: 1.25rem 1.25rem 1.4rem; border: 1.5px solid var(--tinte); border-top: 0; background: var(--weiss); }
.preisbox__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
.preisbox__kopf span:first-child { color: var(--tinte); font-weight: 500; }
.preisbox__preis { font: 500 clamp(1.35rem, 1.05rem + 1vw, 1.75rem) / 1.2 var(--mono); letter-spacing: -0.03em; }
.preisbox__preis span { display: block; }
.preisbox__takt { margin-top: -0.5rem; font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
.preisbox__zusatz { display: grid; gap: 0.3rem; padding-top: 0.85rem; border-top: 1px solid var(--linie); font-size: 0.95rem; line-height: 1.4; }
.preisbox__liste { display: grid; }
.preisbox__liste div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); }
.preisbox__liste div:first-child { border-top: 1px solid var(--linie); }
.preisbox__liste dd { font: 500 1.05rem / 1.3 var(--mono); white-space: nowrap; }
.preisbox .knopf { margin-top: 0.4rem; }
.preisbox .knopf:hover { background: var(--tinte); color: var(--weiss); }
.preisbox .textlink { justify-self: start; }

@media (max-width: 900px) {
  .pfadwahl { grid-template-columns: 1fr; }
  .pfadwahl button { border-right: 0; border-bottom: 1.5px solid var(--tinte); }
  .pfadwahl button:last-child { border-bottom: 0; }
  .pfadwahl button[aria-selected="true"] { box-shadow: inset 5px 0 0 var(--orange); }
  .pfad { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .paare thead { display: none; }
  .paare tr { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
  .paare td { display: block; width: auto; padding: 0; border: 0; }
  .paare td:last-child { position: relative; margin-top: 0.35rem; padding-left: 1.1rem; }
  .paare td:last-child::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; background: var(--orange); }
}

/* ---------- Feste Leiste auf dem Handy: der Weg zum Erstgespräch bleibt sichtbar ---------- */
.leiste { display: none; }
@media (max-width: 900px) {
  .mit-leiste, body:has(> .leiste) { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
  .leiste { display: flex; position: fixed; inset: auto 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); z-index: 20; min-height: 3rem; padding: 0.7rem 1rem; border: 1.5px solid var(--tinte); }
  html[data-ready="true"] .leiste:not([data-sichtbar="ja"]) { visibility: hidden; }
}

/* ---------- Film: Zeichnung, die sich aufbaut. Standbild als Rückfall, Video spielt einmal beim Sichtbarwerden. ---------- */
.film { position: relative; background: var(--schiefer); aspect-ratio: 1600 / 1194; overflow: hidden; }
.film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film--frei { background: none; }

/* ---------- Zwei weitere Werkzeuge und Geräte mit Film ---------- */
.zusatz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); margin-top: 3rem; }
.zusatz h3 { margin-top: 1.4rem; font: 500 var(--t-mittel) / 1.2 var(--sans); letter-spacing: -0.01em; }
.zusatz h3 span { display: block; margin-top: 0.3rem; font: 400 0.95rem / 1.4 var(--mono); color: var(--grau); }
.zusatz .werkzeug__punkte { margin-top: 0.9rem; }
.zusatz__fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1.5px solid var(--tinte); }
.zusatz__preis { font: 500 1.15rem / 1.3 var(--mono); }
@media (max-width: 760px) { .zusatz { grid-template-columns: 1fr; } }
.geraete .geraet--film { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 900px) { .geraete .geraet--film { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .geraete .geraet--film .film { grid-column: 1 / -1; max-width: 26rem; } }
@media (max-width: 760px) { .geraete .geraet--film { grid-template-columns: 1fr; } }

/* ---------- Preis ---------- */
.preiszeile { font: 500 clamp(1.3rem, 0.55rem + 3vw, 2.85rem) / 1.18 var(--mono); letter-spacing: -0.03em; }
.preiszeile span { display: block; }
.preis { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.preis__text { margin-top: 1.5rem; max-width: 46ch; }
.rechner { border: 1.5px solid var(--tinte); background: var(--papier); }
.rechner__zeile { display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem 1rem; align-items: center; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--linie); }
.rechner__zeile label, .rechner__zeile > span:first-child { font-weight: 500; }
.rechner__einzel { color: var(--grau); font: 400 var(--t-klein) / 1.3 var(--mono); }
.rechner__betrag { font: 500 1.05rem / 1 var(--mono); min-width: 5.5rem; text-align: right; }
.zaehler { display: inline-grid; grid-template-columns: 2.5rem 3rem 2.5rem; border: 1.5px solid var(--tinte); border-radius: var(--radius); background: var(--weiss); }
.zaehler button { height: 2.5rem; background: none; border: 0; font: 500 1.2rem / 1 var(--mono); cursor: pointer; }
.zaehler button:hover { background: var(--tinte); color: var(--weiss); }
.zaehler output { display: grid; place-items: center; font: 500 1.05rem / 1 var(--mono); border-inline: 1.5px solid var(--tinte); }
.rechner__summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem; background: var(--tinte); color: var(--weiss); }
.rechner__summe output { font: 500 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem) / 1 var(--mono); }
.rechner__fuss { padding: 0.85rem 1.1rem; font-size: var(--t-klein); color: var(--grau); }
.rechner .rechner__auswahl { min-width: 0; padding: 0.9rem 1.1rem 1.1rem; border-bottom: 1px solid var(--linie); }
.rechner .rechner__auswahl legend { padding: 0; margin-bottom: 0.6rem; font-weight: 500; }
.auswahl__preis { margin-left: auto; font: 500 1rem / 1.3 var(--mono); white-space: nowrap; }
.rechner__kaufen { display: flex; margin: 1.1rem 1.1rem 0; }
/* Platz auch ohne gewählte Einrichtung reservieren, damit der Abschnitt nicht springt. */
.rechner__einmalig[hidden] { display: flex; visibility: hidden; }
.rechner__einmalig output { min-width: 5ch; text-align: right; }
.abschnitt:not(.abschnitt--weiss) .rechner { background: var(--weiss); }
@media (max-width: 860px) { .preis { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .rechner__zeile { grid-template-columns: 1fr auto; } .rechner__einzel { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Menschen ---------- */
.menschen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.75rem); margin-top: var(--abschnitt-innen); grid-auto-rows: 1fr; }
.mensch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.05); background: var(--nebel); }
.mensch__name { margin-top: 0.8rem; font-weight: 600; overflow-wrap: anywhere; }
.mensch__rolle { margin-top: 0.4rem; font-weight: 600; color: var(--grau); font-size: 0.95rem; line-height: 1.4; }
.zusagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; border-top: 1.5px solid var(--tinte); }
.zusagen li { padding: 1.1rem 1.5rem 0 0; }
.zusagen strong { display: block; font-weight: 600; }
.zusagen span { color: var(--grau); }
@media (max-width: 760px) { .menschen { grid-template-columns: 1fr; gap: var(--abschnitt); } .zusagen { grid-template-columns: 1fr; } }

.kennzeile { margin-top: 2rem; }

/* ---------- Fragen ---------- */
.fragen { margin-top: 2.25rem; max-width: 52rem; border-top: 1.5px solid var(--tinte); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font: 500 var(--t-mittel) / 1.3 var(--sans); cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font: 400 1.5rem / 1 var(--mono); color: var(--grau); }
.fragen details[open] summary::after { content: "\2212"; }
.fragen details p { padding-bottom: 1.3rem; max-width: 62ch; }

/* ---------- Inhaltszeilen der Unterseiten ---------- */
.werkzeug__punkte li { position: relative; padding: 0.3rem 0 0.3rem 1.4rem; }
.werkzeug__punkte li::before { content: ""; position: absolute; left: 0; top: 0.92em; width: 0.6rem; height: 1.5px; background: var(--tinte); }
.sprungziele { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.75rem; }
.sprungziele a { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
.sprungziele a:hover { text-decoration-color: var(--orange); }
.zeilen { display: grid; gap: clamp(3rem, 7vw, 6rem); margin-top: 3rem; }
.zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.zeile:nth-child(even) .zeile__text { order: 2; }
.zeile h3 { font: 500 var(--t-mittel) / 1.2 var(--sans); letter-spacing: -0.01em; }
.zeile p { margin-top: 0.75rem; max-width: 44ch; }
.zeile .werkzeug__punkte { margin-top: 0.9rem; }
.bildschirm { border: 1.5px solid var(--tinte); background: var(--weiss); }
.bildschirm img { width: 100%; }
.bildschirm figcaption { padding: 0.6rem 0.9rem; border-top: 1px solid var(--linie); font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
@media (max-width: 760px) { .zeile { grid-template-columns: 1fr; } .zeile:nth-child(even) .zeile__text { order: 0; } }

/* ---------- Kurzer Seitenkopf ohne Bild (Rechtstexte, Ratgeber, Kontakt) ---------- */
.hero--kurz .hero__innen { min-height: 0; padding-block: 8rem 3.25rem; }
@media (max-width: 900px) { .hero--kurz .hero__innen { padding-block: 6.25rem 2rem; } }

/* ---------- Lesetext: Ratgeber, Rechtstexte ---------- */
.text { max-width: 46rem; }
.text--breit { max-width: 58rem; }
.text > * + *, .text section > * + * { margin-top: 1.1rem; }
.text section + section { margin-top: 3.25rem; }
.text > p + section, .text > div + section { margin-top: 3rem; }
.text h2 { font: 500 clamp(1.4rem, 1.15rem + 1vw, 1.9rem) / 1.2 var(--sans); letter-spacing: -0.012em; text-wrap: balance; }
.text h3 { margin-top: 2rem; font: 600 1.15rem / 1.3 var(--sans); }
.text h2 + *, .text h3 + * { margin-top: 0.75rem; }
.text > h2 { margin-top: 3rem; }
.text > h2:first-child { margin-top: 0; }
.text p, .text li { max-width: 68ch; }
.text a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; overflow-wrap: anywhere; }
.text a:hover { text-decoration-color: var(--orange); }
.text a.knopf { text-decoration: none; }
.text ul, .text ol { padding-left: 1.3rem; }
.text ul { list-style: none; padding-left: 0; }
.text ul > li { position: relative; padding-left: 1.4rem; }
.text ul > li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.6rem; height: 1.5px; background: var(--tinte); }
.text ol { list-style: decimal; }
.text li + li { margin-top: 0.4rem; }
.text address { font-style: normal; }
.text sup { font: 400 0.7em / 1 var(--mono); color: var(--grau); }
.text strong, .text b { font-weight: 600; }
.text .vorspann { max-width: 60ch; }
.tabellenrahmen { overflow-x: auto; margin-top: 1.5rem; }
.text tbody th { min-width: 8.5rem; }
.text th a, .text td a { overflow-wrap: normal; }
.text pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem 1.2rem; background: var(--papier); border-left: 4px solid var(--tinte); font: 400 0.9rem / 1.55 var(--mono); }
/* Rechner und Formulare innerhalb eines Lesetexts (z. B. Förderrechner im Ratgeber) */
.text form { display: grid; gap: 1.1rem; max-width: 40rem; padding: 1.25rem; border: 1.5px solid var(--tinte); background: var(--papier); }
.text fieldset { display: grid; gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.text legend { margin-bottom: 0.4rem; padding: 0; font-weight: 600; }
.text label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.text input[type="number"], .text input[type="text"], .text select { min-height: 2.75rem; padding: 0.5rem 0.7rem; background: var(--weiss); border: 1.5px solid var(--tinte); border-radius: var(--radius); }
.text input[type="radio"], .text input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--orange-tief); }
.text form button { justify-self: start; min-height: 3rem; padding: 0.7rem 1.4rem; background: var(--orange); color: var(--tinte); border: 0; border-radius: var(--radius); font-weight: 600; cursor: pointer; }
.text form button:hover { background: var(--tinte); color: var(--weiss); }
.text output { font: 500 1.1rem / 1.3 var(--mono); }
.text table { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--tinte); text-align: left; font-size: 0.975rem; }
.text caption { caption-side: top; padding-bottom: 0.6rem; text-align: left; font-weight: 600; }
.text th, .text td { padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.text thead th { font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
.text tbody th { font-weight: 600; }
.merk { padding: 1rem 1.2rem; border-left: 4px solid var(--orange); background: var(--papier); }
.abschnitt:not(.abschnitt--weiss) .merk { background: var(--weiss); }
.text details { border-bottom: 1px solid var(--linie); margin-top: 0; }
.text details:first-of-type { border-top: 1.5px solid var(--tinte); margin-top: 1rem; }
.text summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.text summary::-webkit-details-marker { display: none; }
.text summary::after { content: "+"; font: 400 1.4rem / 1 var(--mono); color: var(--grau); }
.text details[open] summary::after { content: "\2212"; }
.text details > *:not(summary) { padding-bottom: 1rem; }
.weiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2.5rem; margin-top: 1rem; border-top: 1.5px solid var(--tinte); }
.weiter a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.weiter a:hover .weiter__titel { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.25em; }
.weiter__titel { display: block; font-weight: 600; }
.weiter__text { display: block; color: var(--grau); font-size: 0.95rem; }
.offen, .text strong.offen { background: rgb(255 107 0 / 0.22); font-weight: 600; padding: 0.05em 0.25em; }
.fuss__ki { margin-top: 0.75rem; color: var(--nebel); font-size: var(--t-klein); max-width: 70ch; }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 1.1rem; max-width: 34rem; }
.formular[hidden] { display: none; }
.feld { display: grid; gap: 0.35rem; }
.feld label, .feld legend { font-weight: 500; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem; background: var(--weiss); border: 1.5px solid var(--tinte); border-radius: var(--radius); }
.feld textarea { min-height: 7rem; resize: vertical; }
.feld__hilfe { font-size: var(--t-klein); color: var(--grau); }
.auswahl { display: grid; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
.auswahl label { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border: 1.5px solid var(--tinte); border-radius: var(--radius); background: var(--weiss); font-weight: 400; cursor: pointer; }
.auswahl input { width: 1.15rem; height: 1.15rem; min-height: 0; accent-color: var(--orange-tief); }
.auswahl label:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--tinte); font-weight: 500; }
.meldung { padding: 1rem 1.1rem; border-left: 4px solid var(--orange); background: var(--weiss); }
.meldung[hidden] { display: none; }

/* ---------- Abschluss und Fuß ---------- */
.abschluss { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 2rem 4rem; align-items: end; }
.abschluss .titel { max-width: 26ch; }
@media (max-width: 760px) { .abschluss { grid-template-columns: 1fr; } }
.fuss { background: var(--tinte); color: var(--weiss); padding-block: 3rem 2rem; font-size: 0.95rem; }
.fuss__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border: 1px solid var(--linie-hell); }
.fuss__feld { padding: 1rem 1.1rem 1.2rem; border-right: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell); margin: 0 -1px -1px 0; }
.fuss__feld h2 { font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--nebel); margin-bottom: 0.5rem; }
.fuss__feld a { display: block; padding-block: 0.22rem; text-decoration: none; }
.fuss__feld a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.3em; }
.fuss__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 1.5rem; color: var(--nebel); font: 400 var(--t-klein) / 1.5 var(--mono); }

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

/* ---------- Kopf: eigene, feste Leiste (AP-153) ---------- */
.kopf {
  position: fixed; background: rgb(27 29 33 / 0.9); border-bottom: 1px solid var(--linie-hell);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.kopf__innen { transition: min-height 250ms var(--weich); }
.kopf[data-flach="ja"] .kopf__innen { min-height: 3.75rem; }
.kopf__nav a { position: relative; border-bottom: 0; }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { border-bottom-color: transparent; }
.kopf__linie { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--orange); }
@media (max-width: 1280px) { .kopf[data-flach="ja"] .kopf__innen { min-height: 3.75rem; } }

/* ===== AP-153: Komponenten aus Magic UI und SmoothUI ===== */

/* Kopf: weiche Unschärfe unter der Leiste */
.kopf__unschaerfe { top: 100% !important; }

/* 1 Pfad-Wechsel: Inhalt blendet weich ein (Werte aus Magic UI "Blur Fade": 6 px, 6 px Unschärfe, 0,4 s) */
.pfad:not([hidden]) { animation: pfad-ein 400ms ease-out both; }
@keyframes pfad-ein { from { opacity: 0; translate: 0 6px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .pfad:not([hidden]) { animation: none; } }

/* 2 Schmerzpunkte: Ziel-Text für den Marker */
.paare tbody tr { cursor: default; }
.paare__ziel { position: relative; }

/* 5 Zwei Werkzeuge: die Karte unter der Maus wird minimal breiter (Prinzip SmoothUI "Hover Expand").
   Nur mit Maus, kurze Verzögerung beim Eintritt, damit Scrollen darüber nichts auslöst. */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .zusatz { display: flex !important; align-items: flex-start; }
  .zusatz > article { flex: 1 1 0; min-width: 0; transition: flex-grow 600ms var(--weich) 0ms; }
  .zusatz > article:hover { flex-grow: 1.05; transition-delay: 120ms; }
  @media (prefers-reduced-motion: reduce) { .zusatz > article { transition: none; } }
}

/* 7 Fragen: SmoothUI Accordion in agora-Form */
.fragen__eintrag { border-bottom: 1px solid var(--linie); }
.fragen__frage { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; background: none; border: 0; color: inherit; text-align: left; font: 500 var(--t-mittel) / 1.3 var(--sans); cursor: pointer; }
.fragen__frage:hover span:first-child { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
.fragen__zeichen { font: 400 1.5rem / 1 var(--mono); color: var(--grau); }
.fragen__antwort { display: grid; gap: 1.1rem; padding-bottom: 1.3rem; max-width: 62ch; }



/* 6 Gründer-Karten (Verhalten nach SmoothUI Social Hover Card) */
.mensch { position: relative; container-type: inline-size; }
/* Am Foto ausgerichtet, nicht am ganzen Eintrag: das Foto ist 4:5, also 125 % der Breite hoch.
   So bleibt die Karte im Bild, egal wie lang der Text darunter ist. */
.mensch__karte {
  position: absolute; left: 0.75rem; right: 0.75rem; top: calc(125cqw - 0.75rem); translate: 0 -100%; z-index: 5;
  display: grid; gap: 0.35rem; padding: 0.9rem 1rem 1rem; background: var(--weiss); color: var(--tinte);
  border: 1.5px solid var(--tinte); transform-origin: 50% 100%;
}
.mensch__karte-name { font-weight: 600; }
.mensch__karte-rolle { color: var(--grau); font-size: 0.95rem; line-height: 1.4; }
.mensch__karte .textlink { justify-self: start; margin-top: 0.25rem; font-size: 0.95rem; }
/* Mit Maus: Link nur in der Karte (Tastatur erreicht ihn trotzdem). Ohne Maus: sichtbar unter der Rolle. */
@media (hover: hover) and (pointer: fine) {
  .mensch__fokus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (hover: none), (pointer: coarse) {
  .mensch__fokus { display: inline-block; margin-top: 0.35rem; font-size: 0.95rem; }
  .mensch__karte { display: none; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* nur für Vorleseprogramme */

/* ---------- Planraster auf allen grauen Flächen (AP-153) ---------- */
.planraster-host { position: relative; isolation: isolate; }
.planraster { position: absolute; inset: 0; z-index: 0; pointer-events: auto; } /* ganz unten; die Zeichnung liegt darüber */
/* Inhalt liegt darüber; nur echte Inhalte fangen die Maus, die Lücken gehören dem Raster. */
.planraster-host > :not(.planraster, .planraster__aussparung, .hero__bild, .hero__figur) { position: relative; z-index: 2; }
.planraster-host > :not(.planraster), .planraster-host > :not(.planraster) * { pointer-events: none; }
/* Aussparung: Flächenfarbe in Form der Zeichnung, über dem Raster, unter der Zeichnung */
.planraster__aussparung { position: absolute; z-index: 0; background: var(--schiefer); pointer-events: none; transition: opacity 700ms var(--weich); }
/* Solange sich die Zeichnung aufbaut, bleibt das Raster ganz; ist sie fertig, weicht es aus der Zeichnung. */
.planraster-host[data-stand="laeuft"] > .planraster__aussparung, .hero__figur[data-stand="laeuft"] ~ .planraster__aussparung { opacity: 0; }
@media (max-width: 900px) { .planraster__aussparung { display: none; } }
.planraster-host > :not(.planraster) :is(h1, h2, h3, h4, p, li, a, button, input, select, textarea, label, legend, summary, dt, dd, th, td, img, figcaption, span, strong, em) { pointer-events: auto; } /* Spezifität höher als die Sperrregel darüber, sonst ist Text nicht markierbar */
/* Zeichnungen: ihr Grau fällt weg (aufhellen), das Raster läuft bis an die Striche. Sie fangen keine Maus. */
.planraster-host :is(.hero__bild, .hero__figur) { z-index: 1; }
.planraster-host :is(.hero__bild, .hero__figur, .hero__figur img, .hero__figur video) { mix-blend-mode: lighten; pointer-events: none; }
/* Der Dunst um die Zeichnung ist heller als der Grund und deckte das Raster ab.
   Kontrast hoch, Helligkeit runter: Dunst und Grund werden dunkler als die Fläche und fallen beim Aufhellen weg,
   Striche und Orange bleiben. Die weichen Ränder braucht es dann nicht mehr. */
.planraster-host :is(.hero__bild, .hero__figur img, .hero__figur video) { filter: brightness(0.9) contrast(1.2) saturate(0.9); -webkit-mask-image: none; mask-image: none; }
@media (max-width: 900px) { .planraster { display: none; } }

/* Seitenkopf der Produktseiten so hoch wie auf der Startseite (Leon, AP-153) */
@media (min-width: 901px) {
  .hero--klein:not(.hero--kurz) .hero__innen { min-height: min(52rem, 100svh); }
  .hero--klein:not(.hero--kurz) .hero__figur { width: min(50%, 52rem); bottom: 1.5rem; }
  /* Zeichnung nur rechts neben dem Text: feste linke Kante, Bild passt sich ein */
  .hero--klein:not(.hero--kurz) .hero__bild { top: 6rem; left: auto; right: var(--rand); bottom: auto; width: calc(50% - var(--rand)); height: calc(100% - 8rem); max-width: none; object-fit: contain; object-position: 50% 55%; }
  /* Site und CRM (kurze Überschriften): Zeichnung an der rechten Inhaltskante statt am Fensterrand,
     damit sie auf breiten Bildschirmen nicht vom Text wegwandert, und etwas größer (Leon, 05.10.).
     Video ist ein ersetztes Element: ohne feste Breite hält es die rechte Kante nicht ein. */
  .hero--nah { --hero-rechts: max(var(--rand), (100% - var(--breite)) / 2); }
  /* Senkrecht auf die Mitte des Textblocks: der Inhalt hat oben 8,5 rem und unten 5 rem Abstand, seine Mitte liegt also 1,75 rem unter der Mitte des Kopfs */
  .hero--klein.hero--nah .hero__figur { width: min(44%, 44rem); right: var(--hero-rechts); top: calc(50% + 1.75rem); bottom: auto; translate: 0 -50%; }
  .hero--klein.hero--nah .hero__bild { top: 5.5rem; right: var(--hero-rechts); width: calc(60% - var(--hero-rechts)); height: calc(100% - 7rem); }
}
/* Schmale Desktops: lange Überschriften brauchen Platz, die Zeichnung rückt nach rechts unten */
@media (min-width: 901px) and (max-width: 1280px) {
  .hero--klein:not(.hero--kurz) .hero__bild { width: calc(44% - 1rem); right: 1rem; height: calc(100% - 8rem); object-position: 50% 80%; }
  .hero--klein:not(.hero--kurz) .hero__figur { width: 40%; right: 0; }
}
/* Produktseiten: Überschrift etwas kleiner als auf der Startseite, damit die Zeichnung Platz hat */
@media (min-width: 901px) { .hero--klein:not(.hero--kurz) .hero__zeile { font-size: clamp(1.75rem, 0.6rem + 3vw, 3.1rem); } }
.bildschirm--gross { margin-top: 2.5rem; max-width: 64rem; }

/* ---------- Produktfilm mit Zooms (AP-153) ---------- */
.zoomfilm { margin-top: 2.5rem; max-width: 64rem; border: 1.5px solid var(--tinte); background: var(--weiss); }
/* Fenster schneidet die Browserleiste der Aufnahme oben ab (--oben) */
.zoomfilm__fenster { position: relative; overflow: hidden; }
.zoomfilm__video { position: absolute; left: 0; width: 100%; object-fit: cover; transform-origin: 50% 50%; transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; /* weich rein und raus, wie eine Kamerafahrt */ }
@media (prefers-reduced-motion: reduce) { .zoomfilm__video { transition: none; } }
.zoomfilm__titel { margin-top: 3rem; font: 500 var(--t-mittel) / 1.3 var(--sans); }

/* ---------- Film-Reiter: einzelne runde Knöpfe wie bei Supabase (Leon, 03.10.) ---------- */
.filmreiter { margin-top: 2.5rem; max-width: 64rem; }
.filmreiter__liste { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.filmreiter__reiter { padding: 0.6rem 1.6rem; background: transparent; border: 1px solid var(--linie); border-radius: 999px; color: var(--tinte); font: 400 1rem / 1.3 var(--sans); cursor: pointer; transition: border-color 200ms var(--weich), background 200ms var(--weich); }
.filmreiter__reiter:hover { border-color: var(--grau); }
.filmreiter__reiter[aria-selected="true"] { border-color: var(--tinte); background: var(--weiss); font-weight: 500; }
.filmreiter__reiter:active { scale: 0.97; }
.filmreiter .zoomfilm { margin-top: 0; }
/* Ende des Produktfilms: Ausblendung auf das Logo, bleibt stehen */
.zoomfilm__ende { position: absolute; inset: 0; display: grid; place-items: center; background: var(--papier); opacity: 0; pointer-events: none; transition: opacity 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.zoomfilm__ende img { width: min(30%, 14rem); height: auto; opacity: 0; translate: 0 6px; transition: opacity 600ms var(--weich) 600ms, translate 600ms var(--weich) 600ms; }
.zoomfilm__ende[data-sichtbar="ja"] { opacity: 1; }
.zoomfilm__ende[data-sichtbar="ja"] img { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .zoomfilm__ende, .zoomfilm__ende img { transition: none; } }

/* 9 Ziffern rollen (Prinzip SmoothUI "Price Flow"): Rechner und Aufmaßblatt */
.rolle { display: inline-flex; white-space: pre; user-select: none; }
.rolle__spalte { display: inline-block; height: 1lh; overflow: hidden; }
.rolle__band { display: block; white-space: pre; translate: 0 calc(var(--ziffer, 0) * -1lh); transition: translate 260ms var(--weich); }
@media (prefers-reduced-motion: reduce) { .rolle__band { transition: none; } }

/* 10 Abschnitte blenden ein (Werte wie 1 Pfad-Wechsel) */
.einblenden { opacity: 0; translate: 0 6px; filter: blur(6px); }
.einblenden--da { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity 400ms var(--weich), translate 400ms var(--weich), filter 400ms var(--weich); }

/* 11 Reiter der Produktfilme: gleitender Hintergrund (Prinzip SmoothUI "Animated Tabs") */
.filmreiter__reiter { position: relative; isolation: isolate; }
.filmreiter__reiter[aria-selected="true"] { background: transparent; border-color: transparent; }
.filmreiter__pille { position: absolute; inset: -1px; z-index: -1; border: 1px solid var(--tinte); border-radius: inherit; background: var(--weiss); }

/* 13 Pfadwahl: gleitender Hintergrund (wie 11 Film-Reiter) */
.pfadwahl--gleitend { position: relative; isolation: isolate; }
.pfadwahl--gleitend button { position: relative; transition: color 250ms var(--weich); }
.pfadwahl--gleitend button[aria-selected="true"] { background: transparent; box-shadow: none; }
.pfadwahl--gleitend button:not([aria-selected="true"]):hover { background: rgb(255 255 255 / 0.6); }
.pfadwahl__pille { position: absolute; left: 0; top: 0; z-index: -1; background: var(--tinte); box-shadow: inset 0 5px 0 var(--orange); pointer-events: none; }
.pfadwahl__pille--bereit { transition: translate 250ms var(--weich), width 250ms var(--weich), height 250ms var(--weich); }
@media (max-width: 760px) { .pfadwahl__pille { box-shadow: inset 5px 0 0 var(--orange); } }
@media (prefers-reduced-motion: reduce) { .pfadwahl__pille--bereit, .pfadwahl--gleitend button { transition: none; } }

/* 14 Preise: feste Sprungleiste mit Markierung des Abschnitts */
.sprungleiste { position: fixed; inset: 3.75rem 0 auto 0; z-index: 9; background: rgb(255 255 255 / 0.92); border-bottom: 1px solid var(--linie);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; translate: 0 -4px; pointer-events: none;
  transition: opacity 200ms var(--weich), translate 200ms var(--weich); }
.sprungleiste[data-sichtbar="ja"] { opacity: 1; translate: 0 0; pointer-events: auto; }
.sprungleiste__innen { display: flex; gap: 1.75rem; overflow-x: auto; scrollbar-width: none; }
.sprungleiste__innen a { position: relative; flex: none; padding: 0.8rem 0; font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--grau); transition: color 200ms var(--weich); }
.sprungleiste__innen a:hover, .sprungleiste__innen a[aria-current] { color: var(--tinte); }
.sprungleiste__innen a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); scale: 0.9 1; opacity: 0; transition: opacity 200ms var(--weich), scale 200ms var(--weich); }
.sprungleiste__innen a[aria-current]::after { opacity: 1; scale: 1 1; }
section[id] { scroll-margin-top: 7rem; }
@media (prefers-reduced-motion: reduce) { .sprungleiste, .sprungleiste__innen a::after { transition: none; translate: none; } }

/* 15 Ratgeber: Lesefortschritt am oberen Rand (Prinzip Magic UI "Scroll Progress") */
.lesefortschritt { display: none; }
@supports (animation-timeline: scroll()) {
  .lesefortschritt { display: block; position: fixed; inset: 0 0 auto 0; z-index: 11; height: 3px; background: var(--orange); transform-origin: 0 50%;
    animation: lesen linear both; animation-timeline: scroll(root); }
}
@keyframes lesen { from { scale: 0 1; } to { scale: 1 1; } }

/* 16 Kontakt: Mailadresse kopieren (Prinzip SmoothUI "Button Copy") */
.kopieren { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-left: 0.35rem; padding: 0; background: transparent; border: 0; border-radius: var(--radius);
  color: var(--grau); cursor: pointer; vertical-align: middle; transition: color 200ms var(--weich), background 200ms var(--weich); }
.kopieren:hover { color: var(--tinte); background: rgb(27 29 33 / 0.06); }
.kopieren__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kopieren:active { scale: 0.97; }
.kopieren__symbol { flex: none; transition: opacity 200ms var(--weich), scale 200ms var(--weich); }
.kopieren__symbol--haken { position: absolute; inset: 0; margin: auto; opacity: 0; scale: 0.9; color: var(--orange-tief); }
.kopieren { position: relative; }
.kopieren[data-kopiert="ja"] .kopieren__symbol--kopie { opacity: 0; scale: 0.9; }
.kopieren[data-kopiert="ja"] .kopieren__symbol--haken { opacity: 1; scale: 1; }


/* 17 Nach oben: unten rechts, auf dem Handy über der Erstgespräch-Leiste */
.nach-oben { position: fixed; right: var(--rand); bottom: 1.5rem; z-index: 19; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem;
  background: var(--tinte); color: var(--weiss); border: 1.5px solid var(--weiss); border-radius: var(--radius); font: 500 0.95rem / 1 var(--sans); cursor: pointer;
  box-shadow: 0 2px 10px rgb(27 29 33 / 0.18); opacity: 0; scale: 0.95; translate: 0 6px; pointer-events: none;
  transition: opacity 200ms var(--weich), scale 200ms var(--weich), translate 200ms var(--weich), background 200ms var(--weich); }
.nach-oben[data-sichtbar="ja"] { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; }
.nach-oben:hover { background: #000; }
.nach-oben:active { scale: 0.97; }
.nach-oben:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 900px) {
  .nach-oben { bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); padding: 0; width: 2.75rem; justify-content: center; }
  .nach-oben__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: opacity 200ms linear; scale: 1; translate: none; } }

/* 18 Menü am Handy: gleitet herein, Punkte kommen leicht versetzt (Prinzip SmoothUI "Expandable Navbar").
   display wechselt diskret mit, @starting-style liefert den Startzustand beim Öffnen. */
@media (max-width: 1360px) and (prefers-reduced-motion: no-preference) {
  .kopf__menue { opacity: 0; translate: 0 -6px; transition: opacity 200ms var(--weich), translate 200ms var(--weich), display 200ms allow-discrete; }
  .kopf[data-offen="true"] .kopf__menue { opacity: 1; translate: 0 0; }
  @starting-style { .kopf[data-offen="true"] .kopf__menue { opacity: 0; translate: 0 -6px; } }
  .kopf__menue a { transition: opacity 200ms var(--weich), translate 200ms var(--weich); }
  .kopf[data-offen="true"] .kopf__menue a { transition-delay: calc(var(--punkt, 0) * 30ms); }
  @starting-style { .kopf[data-offen="true"] .kopf__menue a { opacity: 0; translate: 0 -4px; } }
  .kopf__nav a:nth-child(2) { --punkt: 1; } .kopf__nav a:nth-child(3) { --punkt: 2; } .kopf__nav a:nth-child(4) { --punkt: 3; }
  .kopf__nav a:nth-child(5) { --punkt: 4; } .kopf__nav a:nth-child(6) { --punkt: 5; } .kopf__nav a:nth-child(7) { --punkt: 6; }
  .kopf__neben a:nth-child(1) { --punkt: 7; } .kopf__neben a:nth-child(2) { --punkt: 8; }
}

/* 19 Absende-Knopf: Ladepunkte, dann Haken mit "Gesendet" (Prinzip SmoothUI "Dot Morph Button") */
.absenden { position: relative; display: inline-grid; place-items: center; }
.absenden > * { grid-area: 1 / 1; transition: opacity 200ms var(--weich), scale 200ms var(--weich); }
.absenden__laden, .absenden__fertig { opacity: 0; scale: 0.9; }
.absenden__laden { display: flex; gap: 0.3rem; }
.absenden__laden i { width: 0.4rem; height: 0.4rem; background: currentColor; animation: punkt 900ms var(--weich) infinite both; }
.absenden__laden i:nth-child(2) { animation-delay: 150ms; } .absenden__laden i:nth-child(3) { animation-delay: 300ms; }
@keyframes punkt { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.absenden__fertig { display: inline-flex; align-items: center; gap: 0.45rem; }
.absenden[data-zustand="senden"] .absenden__text, .absenden[data-zustand="fertig"] .absenden__text { opacity: 0; scale: 0.9; }
.absenden[data-zustand="senden"] .absenden__laden, .absenden[data-zustand="fertig"] .absenden__fertig { opacity: 1; scale: 1; }
.absenden:disabled { opacity: 1; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .absenden > * { transition: none; } .absenden__laden i { animation: none; opacity: 1; } }
.uebergang--404 { list-style: none; padding: 0; }

/* Menü am Handy offen: die Unschärfe unter der Kopfleiste läge sonst über dem ersten Punkt */
.kopf[data-offen="true"] .kopf__unschaerfe { display: none; }

/* Förderrechner: Ergebnis mit klarer Summe (war ungestaltet, alles in Schreibmaschinenschrift) */
#db-out { display: block; margin-top: 1.5rem; max-width: 40rem; font: inherit; }
.calc-res { display: grid; gap: 0.6rem; padding: 1.25rem 1.4rem 1.4rem; background: var(--weiss); border: 1.5px solid var(--tinte); border-left: 5px solid var(--orange); }
.calc-res.stop { border-left-color: var(--tinte); }
.calc-res h3 { margin: 0; font: 600 1.05rem / 1.35 var(--sans); }
.calc-sum { font: 500 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem) / 1.1 var(--mono); }
.calc-res > p:not(.calc-sum) { color: var(--grau); line-height: 1.5; }
.calc-res ul { display: grid; gap: 0.35rem; margin: 0.25rem 0 0; padding: 0.75rem 0 0; list-style: none; border-top: 1px solid var(--linie); }
.calc-res li { font-size: 0.95rem; line-height: 1.45; }

/* Produktseiten: Weg zur App mit der heutigen Anmeldung, bis sie am Konto hängt */
.hero__app { font-weight: 500; font-size: 0.95rem; color: var(--weiss); text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--linie-hell); text-underline-offset: 0.3em; }
.hero__app:hover { text-decoration-color: var(--orange); }
/* Sieben Punkte, Erstgespräch und Avatar: Abstände leicht enger statt eines Umbruchs */
@media (min-width: 1361px) {
  .kopf__innen { gap: 1.25rem; }
  .kopf .knopf { padding-inline: 0.95rem; }
  .kopf__nav a, .kopf__neben a:not(.knopf) { font-size: 0.9375rem; }
  .kopf__nav { gap: clamp(0.9rem, 1.25vw, 1.125rem); } /* gedeckelt: die Inhaltsbreite wächst ab 1440 px nicht mehr mit */
  .kopf__neben { gap: 1rem; }
  .kopf__neben > *, .kopf__nav a { white-space: nowrap; }
}

/* 21 Kopf: runder Avatar ganz rechts (Leon, 06.10.2026). Abgemeldet zur Anmeldung, angemeldet ein Menü */
.kopf__konto { position: relative; }
.kopf__avatar { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.kopf__neben a.kopf__avatar { padding: 0; border-bottom: 0; }
.kopf__kreis { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgb(255 255 255 / 0.06); color: var(--weiss); box-shadow: inset 0 0 0 1.5px var(--linie-hell); transition: box-shadow 200ms var(--weich), background 200ms var(--weich); }
.kopf__kreis--kuerzel { background: var(--grau); color: var(--weiss); box-shadow: inset 0 0 0 1.5px var(--linie-hell); font: 600 0.85rem / 1 var(--mono); letter-spacing: 0.02em; }
img.kopf__kreis { object-fit: cover; box-shadow: inset 0 0 0 1.5px var(--linie-hell); }
.kopf__avatar:hover .kopf__kreis, .kopf__avatar[aria-expanded="true"] .kopf__kreis { box-shadow: 0 0 0 2px var(--tinte), 0 0 0 3.5px var(--weiss); }
.kopf__avatar:focus-visible { outline: none; }
.kopf__avatar:focus-visible .kopf__kreis { box-shadow: 0 0 0 2px var(--tinte), 0 0 0 4px var(--orange); }
.kopf__avatar-text { font-weight: 500; font-size: 1.1rem; }
@media (min-width: 1361px) { .kopf__avatar-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 1360px) { .kopf__menue a.kopf__avatar, .kopf__menue .kopf__avatar { display: flex; width: 100%; padding-block: 0.9rem; border-bottom: 1px solid var(--linie-hell); } .kopf__menue .kopf__neben .knopf { order: 2; } }
.kopf__menue-konto { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 30; display: grid; min-width: 15rem; padding: 0.35rem; background: var(--weiss); color: var(--tinte); border: 1px solid var(--tinte); box-shadow: 0 8px 24px rgb(27 29 33 / 0.16); transform-origin: 100% 0; animation: menue-auf 200ms var(--weich); }
@keyframes menue-auf { from { opacity: 0; scale: 0.97; translate: 0 -4px; } }
.kopf__menue-kopf { display: grid; padding: 0.55rem 0.6rem 0.6rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--linie); font-size: 0.875rem; }
.kopf__menue-kopf span { font: 400 0.78rem / 1.4 var(--mono); color: var(--grau); }
.kopf__menue-konto a, .kopf__menue-konto button { display: block; width: 100%; padding: 0.55rem 0.6rem; background: none; border: 0; border-radius: var(--radius); color: inherit; font: 500 0.9rem / 1.3 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.kopf__menue-konto a:hover, .kopf__menue-konto button:hover { background: var(--papier); }
.kopf__neben a.kopf__menue-konto, .kopf__menue-konto a { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .kopf__menue-konto { animation: none; } }
@media (max-width: 1360px) { .kopf__menue .kopf__konto { display: grid; } .kopf__menue .kopf__menue-konto { position: static; box-shadow: none; margin-top: 0.5rem; } }

/* 22 Anmelden und Registrieren (Entwurf der Auth0-Seite im Website-Stil) */
.anmeldung-seite { min-height: 100vh; display: grid; place-items: center; padding: 2rem var(--rand); background: var(--schiefer); color: var(--weiss); }
.anmeldung { display: grid; justify-items: center; gap: 1.5rem; width: min(100%, 26rem); }
.anmeldung__marke img { display: block; height: 1.5rem; width: auto; }
.anmeldung__karte { width: 100%; padding: 2rem 1.75rem 1.75rem; background: var(--weiss); color: var(--tinte); border: 1.5px solid var(--tinte); }
.anmeldung__titel { font: 600 1.6rem / 1.2 var(--sans); letter-spacing: -0.015em; }
.anmeldung__satz { margin-top: 0.35rem; color: var(--grau); }
.anmeldung__formular { display: grid; gap: 1rem; margin-top: 1.5rem; }
.anmeldung__knopf { width: 100%; margin-top: 0.25rem; }
.anmeldung__link { justify-self: start; font-size: var(--t-klein); color: var(--grau); }
.anmeldung__wechsel { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: 0.95rem; color: var(--grau); }
.anmeldung__fuss { font-size: var(--t-klein); color: var(--nebel); text-align: center; }
.anmeldung__fuss a { color: var(--weiss); }

.preis__knopfzeile { margin-top: 1.75rem; }

/* Zweiter Knopf neben dem orangen: Rahmen statt Fläche (Kaufen im Hero der Produktseiten, 07.10.2026) */
.knopf--rahmen { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.knopf--rahmen:hover, .abschnitt:not(.abschnitt--dunkel) .knopf--rahmen:hover { background: var(--weiss); color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--weiss); }
.hero__neben { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; margin-top: 1.25rem; }

.mensch__text { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.6; }

/* Partnerleiste: Titel links, laufendes Band rechts, Ränder weich ausgeblendet. Zwei gleiche Hälften ergeben die Schleife. */
.partner { background: var(--papier); border-bottom: 1px solid var(--linie); }
.partner__innen { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 3rem; padding-block: 2.5rem; }
.partner__titel { margin: 0; flex: 0 0 auto; font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
.partner__bahn { flex: 1 1 30rem; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partner__spur { display: flex; flex-flow: row nowrap; align-items: center; width: max-content; will-change: transform; animation: partner-lauf var(--kundenband-dauer) linear infinite; }
.partner__spur img { display: block; flex: 0 0 auto; max-width: none; margin-right: 6rem; }
@keyframes partner-lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .partner__spur { animation: none; width: auto; flex-wrap: wrap; row-gap: 1.5rem; }
  .partner__spur img[aria-hidden="true"] { display: none; }
}