/* My Chicken – Standorte, Franchise-Teaser, Franchise-Seite mit Anfrage-Strecke, Rechtsseiten.
   Baut auf basis.css auf. Bewegung nur über transform und opacity. Mobil zuerst. */

/* =====================================================================
   1 · STANDORTE (Startseite)
   ===================================================================== */
.standorte .lead { margin-top: var(--r2); }
.standorte-raster { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 1100px) {
  .standorte-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .standorte-raster > .karte { position: sticky; top: calc(var(--kopf-h) + 24px); }
}

/* Karte */
.karte {
  margin: 0; position: relative; background: var(--weiss); border-radius: 24px; overflow: hidden;
  box-shadow: 0 0 0 1px oklch(0.2 0.01 40 / .07), 0 34px 70px -46px oklch(0.3 0.06 40 / .55);
}
.karte::before { content: ""; display: block; height: 12px; background: repeating-linear-gradient(90deg, var(--rot) 0 14px, var(--weiss) 14px 28px); }
.karte-svg { width: 100%; height: auto; display: block; -webkit-tap-highlight-color: transparent; }
.karte figcaption { padding: 0 clamp(1rem, 3vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem); font-size: .85rem; color: var(--text-2); }

.k-fläche { fill: url(#kPunkte); }
.karte pattern circle { fill: oklch(0.2 0.01 40 / .2); }
.k-raster line { stroke: oklch(0.2 0.01 40 / .09); stroke-width: 1.5; }
.k-raster text { font-family: var(--eng); font-weight: 600; font-size: 15px; letter-spacing: .06em; fill: var(--text-2); }
.k-land { font-family: var(--eng); font-weight: 800; font-size: 17px; letter-spacing: .32em; fill: var(--text-2); }
.k-nord path { fill: var(--text); }
.k-nord text { font-family: var(--eng); font-weight: 800; font-size: 18px; fill: var(--text); }
.k-mass rect { fill: var(--text); }
.k-mass rect.hell { fill: var(--weiss); }
.k-mass rect.rahmen { fill: none; stroke: var(--text); stroke-width: 2; }
.k-mass text { font-family: var(--eng); font-weight: 700; font-size: 17px; letter-spacing: .04em; fill: var(--text); }
@media (max-width: 699px) {
  .k-raster text { display: none; }
  /* mobil größere Schrift in Karteneinheiten; der Ausschnitt wird danach neu vermessen */
  .karte-svg .k-name { font-size: 46px; } .karte-svg .k-jahr { font-size: 31px; } .karte-svg .k-distanz { font-size: 32px; }
  .karte-svg .k-land { font-size: 21px; } .karte-svg .k-mass text { font-size: 22px; }
}

.k-strecke-mantel { stroke: var(--rot); stroke-width: 15; stroke-linecap: round; fill: none; }
.k-strecke-mitte { stroke: var(--weiss); stroke-width: 5; stroke-dasharray: 12 12; fill: none; }
.k-strecke-zug { transform-box: fill-box; transform-origin: 0 50%; transition: transform .7s var(--aus-expo); transition-delay: calc(var(--i) * .3s + .1s); }
.k-distanz {
  font-family: var(--eng); font-weight: 800; font-size: 23px; letter-spacing: .06em; fill: var(--rot-tief);
  paint-order: stroke; stroke: var(--weiss); stroke-width: 8px; stroke-linejoin: round;
  transition: opacity .45s var(--aus-quart); transition-delay: calc(var(--i) * .3s + .45s);
}

.k-punkt { cursor: pointer; outline: none; transition: opacity .3s var(--aus-quart); }
.k-ziel { fill: transparent; }
.k-körper { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--aus-expo); transition-delay: 0s; }
.k-ring { fill: var(--weiss); stroke: var(--rot); stroke-width: 5; transition: stroke .2s; }
.k-kern { fill: var(--rot); }
.k-puls { fill: none; stroke: var(--rot); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.k-beschriftung { transition: opacity .6s var(--aus-quart); }
.k-name {
  font-family: var(--slab); font-size: 37px; fill: var(--text);
  paint-order: stroke; stroke: var(--weiss); stroke-width: 9px; stroke-linejoin: round; transition: fill .25s;
}
.k-jahr {
  font-family: var(--eng); font-weight: 800; font-size: 22px; letter-spacing: .14em; fill: var(--text-2);
  paint-order: stroke; stroke: var(--weiss); stroke-width: 7px; stroke-linejoin: round;
}
.k-punkt.aktiv .k-körper { transform: scale(1.3); }
.k-punkt.aktiv .k-puls { animation: k-puls 1.7s var(--aus-quart) infinite; }
.k-punkt.aktiv .k-name { fill: var(--rot-tief); }
.k-punkt:focus-visible .k-ring { stroke: var(--text); stroke-width: 6; }
.karte.hat-aktiv .k-punkt:not(.aktiv) { opacity: .5; }
@keyframes k-puls { 0% { opacity: .75; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.7); } }

/* Einblenden: Strecke zieht sich in Gründungsreihenfolge */
.karte.vorher .k-strecke-zug { transform: scaleX(0); }
.karte.vorher .k-distanz { opacity: 0; }
.karte.vorher .k-körper { transform: scale(0); }
.karte.vorher .k-beschriftung { opacity: 0; }
.karte:not(.vorher) .k-punkt .k-körper { transition-delay: calc(var(--i) * .3s); }
.karte:not(.vorher) .k-punkt .k-beschriftung { transition-delay: calc(var(--i) * .3s + .1s); }
.karte.fertig .k-punkt .k-körper { transition-delay: 0s; }

/* Filialkarten */
.filialen { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.filiale {
  container-type: inline-size; position: relative; background: var(--weiss); border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px oklch(0.2 0.01 40 / .08), 0 26px 54px -40px oklch(0.3 0.06 40 / .55);
  transition: transform .45s var(--aus-quart), box-shadow .45s var(--aus-quart);
  scroll-margin-top: calc(var(--kopf-h) + 20px); outline: none;
}
.filiale::before { content: ""; display: block; height: 8px; background: repeating-linear-gradient(90deg, var(--rot) 0 12px, var(--weiss) 12px 24px); }
.filiale.aktiv { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--rot), 0 32px 60px -38px oklch(0.35 0.12 27 / .6); }
.filiale-innen {
  padding: clamp(1.15rem, 3.5vw, 1.75rem); display: grid; gap: 1.1rem;
  grid-template-areas: "kopf" "info" "zeiten" "knöpfe";
}
@container (min-width: 520px) {
  .filiale-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.75rem; grid-template-areas: "kopf kopf" "info zeiten" "knöpfe knöpfe"; }
}
.filiale-kopf { grid-area: kopf; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.filiale-jahr { margin: 0 0 4px; font-family: var(--eng); font-weight: 800; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.filiale-stadt { font-family: var(--slab); font-weight: 400; font-size: clamp(2rem, 7.5vw, 2.7rem); line-height: 1.02; letter-spacing: 0; text-transform: uppercase; margin: 0; overflow-wrap: anywhere; }
.filiale-format {
  margin: 0 0 4px; padding: 6px 12px; border-radius: var(--rund); border: 2px solid var(--rot-tief); color: var(--rot-tief);
  font-family: var(--eng); font-weight: 800; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1;
}
.filiale-info { grid-area: info; display: grid; gap: .7rem; align-content: start; }
.filiale-info p { margin: 0; }
.filiale-adresse, .filiale-telefon { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.filiale-telefon { color: var(--text-2); font-variant-numeric: tabular-nums; }
.filiale-adresse svg, .filiale-telefon svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--rot-tief); }
.filiale .status { font-size: 1.02rem; }
.filiale-bewertung { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.sterne { position: relative; display: inline-block; width: 98px; height: 18px; color: var(--rot); flex: none; }
.sterne-reihe { display: flex; gap: 2px; width: 98px; }
.sterne-reihe svg { width: 18px; height: 18px; flex: none; }
.sterne > .sterne-reihe { color: oklch(0.2 0.01 40 / .28); }
.sterne-voll { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.sterne-voll svg { fill: currentColor; }
.bewertung-note { font-family: var(--eng); font-weight: 800; font-size: 1.45rem; line-height: 1; }
.bewertung-text { flex-basis: 100%; font-size: .875rem; color: var(--text-2); }
.filiale-zeiten { grid-area: zeiten; }
.filiale-zeiten table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .98rem; }
.filiale-zeiten th, .filiale-zeiten td { padding: 8px 10px; border-bottom: 1px solid var(--papier-2); text-align: left; }
.filiale-zeiten th { font-family: var(--eng); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.filiale-zeiten td { text-align: right; color: var(--text-2); }
.filiale-zeiten tr.heute th, .filiale-zeiten tr.heute td { background: var(--papier); color: var(--text); font-weight: 700; }
.filiale-zeiten tr.heute th { box-shadow: inset 4px 0 0 var(--rot); }
.heute-marke { margin-left: 8px; padding: 2px 7px; border-radius: 6px; background: var(--rot-tief); color: var(--weiss); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; }
.filiale-knöpfe { grid-area: knöpfe; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filiale-knöpfe .knopf { width: 100%; padding: 0 .8em; }
.filiale-knöpfe .knopf:first-child { grid-column: 1 / -1; }
@container (min-width: 520px) {
  .filiale-knöpfe { grid-template-columns: 1.6fr 1fr 1fr; }
  .filiale-knöpfe .knopf:first-child { grid-column: auto; }
}

/* =====================================================================
   2 · KENNZAHLEN und KURZ-ZEITLEISTE (Startseite-Teaser + Franchise-Seite)
   ===================================================================== */
.kennzahlen { margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; display: grid; border-top: 1px solid oklch(1 0 0 / .14); }
.kennzahl { display: grid; grid-template-areas: "wert" "label" "text"; align-content: start; padding: clamp(1.4rem, 4vw, 2rem) 0; border-bottom: 1px solid oklch(1 0 0 / .14); }
.kennzahl dt { grid-area: label; font-family: var(--eng); font-weight: 800; font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--weiss); margin-top: .55rem; }
.kennzahl dd { margin: 0; }
.kennzahl-wert { grid-area: wert; font-family: var(--slab); font-size: clamp(3.4rem, 17vw, 5rem); line-height: 1.02; color: var(--gold); white-space: nowrap; font-variant-numeric: lining-nums; }
.kennzahl-wert small { font-family: var(--eng); font-weight: 800; font-size: .34em; letter-spacing: .04em; margin-left: .25em; vertical-align: .9em; }
.kennzahl-text { grid-area: text; margin-top: .4rem !important; color: var(--text-hell-2); font-size: .98rem; line-height: 1.5; max-width: 34ch; }
.kennzahlen-stand { margin: var(--r3) 0 0; font-size: .85rem; color: var(--text-hell-2); }
@media (min-width: 640px) and (max-width: 979px) {
  .kennzahlen { grid-template-columns: 1fr 1fr; column-gap: var(--r4); }
}
@media (min-width: 980px) {
  .kennzahlen { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); border-bottom: 1px solid oklch(1 0 0 / .14); }
  .kennzahl { border-bottom: 0; padding: var(--r4) var(--r3) var(--r4) 0; }
  .kennzahl + .kennzahl { border-left: 1px solid oklch(1 0 0 / .14); padding-left: var(--r3); }
  .kennzahl-wert { font-size: clamp(3rem, 4.8vw, 4.4rem); }
}
.kennzahl.zeigen:nth-child(2) { transition-delay: .08s; }
.kennzahl.zeigen:nth-child(3) { transition-delay: .16s; }
.kennzahl.zeigen:nth-child(4) { transition-delay: .24s; }

.weg-titel { margin: clamp(3rem, 7vw, 5rem) 0 var(--r3); color: var(--weiss); }
.weg-kurz { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.weg-kurz li { position: relative; padding: 0 0 var(--r3) 64px; min-height: 56px; display: grid; gap: 2px; align-content: start; }
.weg-kurz li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 6px; background: repeating-linear-gradient(180deg, var(--rot) 0 10px, var(--weiss) 10px 20px); border-radius: 3px; }
.weg-kurz li:last-child::before { display: none; }
.weg-kurz strong { font-family: var(--eng); font-weight: 800; font-size: 1.3rem; letter-spacing: .03em; text-transform: uppercase; color: var(--weiss); padding-top: 8px; }
.weg-kurz span:not(.weg-nr) { color: var(--text-hell-2); font-size: .98rem; max-width: 36ch; }
.weg-nr { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--rot); color: var(--weiss); display: grid; place-items: center; font-family: var(--slab); font-size: 1.35rem; line-height: 1; box-shadow: 0 0 0 4px var(--kohle); }
.weg-kurz li.zeigen:nth-child(2) { transition-delay: .07s; } .weg-kurz li.zeigen:nth-child(3) { transition-delay: .14s; }
.weg-kurz li.zeigen:nth-child(4) { transition-delay: .21s; } .weg-kurz li.zeigen:nth-child(5) { transition-delay: .28s; }
.weg-kurz li.zeigen:nth-child(6) { transition-delay: .35s; }
@media (min-width: 980px) {
  .weg-kurz { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--r3); }
  .weg-kurz li { padding: 68px 0 0; }
  .weg-kurz li::before { left: 56px; right: calc(-1 * var(--r3) + 4px); top: 21px; bottom: auto; width: auto; height: 6px; background: repeating-linear-gradient(90deg, var(--rot) 0 10px, var(--weiss) 10px 20px); }
}
.weg-dauer { margin: var(--r3) 0 0; color: var(--text-hell-2); font-size: .95rem; }

/* =====================================================================
   3 · UNTERSEITEN (Franchise, Impressum, Datenschutz): Fuß wie Startseite
   ===================================================================== */
.unterseite .fuss-raster { display: grid; gap: var(--r5) var(--r4); grid-template-columns: 1fr 1fr; }
.unterseite .fuss-marke { grid-column: 1 / -1; }
.unterseite .fuss-marke img { width: 110px; height: 110px; }
.unterseite .fuss ul { list-style: none; margin: 12px 0 0; padding: 0; }
.unterseite .fuss li a { display: inline-flex; align-items: center; min-height: 44px; }
.unterseite .fuss-app { margin: 12px 0 0; }
.unterseite .fuss-unten { border-top: 1px solid oklch(1 0 0 / .1); margin-top: var(--r5); padding-top: var(--r3); font-size: .85rem; }
@media (min-width: 900px) { .unterseite .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .unterseite .fuss-marke { grid-column: auto; } }

/* =====================================================================
   4 · FRANCHISE-SEITE
   ===================================================================== */
.fr-symbol { width: 28px; height: 28px; flex: none; }

/* Held als Leuchtschild (wie in den Filialen): Weinrot, weiße Hahn-Silhouette aus der Bildmarke, leichtes Leuchten */
.fr-held {
  position: relative; overflow: hidden; color: var(--weiss);
  padding: clamp(2.75rem, 8vw, 6rem) var(--rand) clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(60% 70% at 74% 42%, oklch(0.42 0.15 25 / .95), transparent 70%),
    linear-gradient(180deg, oklch(0.36 0.13 25), var(--rot-dunkel) 60%, oklch(0.29 0.11 25));
}
.fr-held::before { /* feine Lichtkante oben wie beim Leuchtkasten */
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, oklch(1 0 0 / .35), transparent);
}
.fr-held::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, var(--rot) 0 16px, var(--weiss) 16px 32px); }
.fr-held :focus-visible { outline-color: var(--weiss); }
.fr-held .innen { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
.fr-held .marke-zeile { color: oklch(0.95 0.03 30); }
.fr-held h1 { font-size: clamp(2.6rem, 10.5vw, 6.4rem); line-height: 1.02; max-width: 12ch; text-shadow: 0 0 28px oklch(0.6 0.2 27 / .35); }
.fr-held .lead { color: oklch(0.93 0.025 30); max-width: 40ch; }
.fr-held-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--r4); }
.fr-held-aktionen .knopf.rand { color: var(--weiss); }
.fr-held-schild { position: relative; justify-self: center; width: min(100%, 560px); display: grid; justify-items: center; }
.fr-schild-hahn { position: relative; width: clamp(200px, 56vw, 400px); color: var(--weiss); animation: schild-an 2.2s linear; }
/* Leuchten als günstiger Verlauf statt großer Filter (iPhone: flüssig, kein Neuzeichnen großer Ebenen) */
.fr-schild-hahn::before { content: ""; position: absolute; inset: -16% -24% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, oklch(0.66 0.2 27 / .55), oklch(0.52 0.19 27 / .28) 55%, transparent 78%); }
.fr-hahn { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 7px oklch(1 0 0 / .6)); }
@keyframes schild-an { 0% { opacity: .08; } 6% { opacity: .9; } 9% { opacity: .25; } 13% { opacity: 1; } 16% { opacity: .55; } 22%, 100% { opacity: 1; } }
.fr-held-bild { position: relative; z-index: 1; width: min(80%, 400px); margin: -13% 0 0 -12%; transform: rotate(-5deg); }
.fr-held-bild img { width: 100%; height: auto; filter: drop-shadow(0 24px 22px oklch(0.12 0.06 25 / .65)); }
@media (min-width: 980px) {
  .fr-held .innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .fr-held h1 { font-size: clamp(3.6rem, 6.2vw, 5.8rem); max-width: 13ch; }
  .fr-held-bild { margin: -5% 0 0 -46%; width: min(64%, 360px); }
}

/* Schriftwand wie in den Filialen */
.fr-schriftwand { padding: clamp(2.5rem, 7vw, 5rem) var(--rand); overflow: hidden; }
.fr-schriftwand p { margin: 0 auto; max-width: var(--breite); display: grid; gap: .1em; font-family: var(--slab); text-transform: uppercase; font-size: clamp(1.9rem, 7.3vw, 7rem); line-height: 1.02; color: var(--weiss); }
.fr-schriftwand span { white-space: nowrap; }
.fr-schriftwand .kontur { color: transparent; -webkit-text-stroke: 2px var(--weiss); }
.fr-schriftwand .gold { color: var(--gold); font-size: .52em; white-space: normal; }

/* Kennzahlenleiste */
.fr-zahlen { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.fr-zahlen .kennzahlen { margin-top: 0; }

/* Warum */
.fr-warum-liste { list-style: none; margin: clamp(2rem, 6vw, 4rem) 0 0; padding: 0; display: grid; gap: clamp(2.5rem, 7vw, 5rem); }
.fr-warum-liste > li { display: grid; gap: var(--r3); align-items: center; }
.fr-warum-bild { margin: 0; aspect-ratio: 4 / 3; border-radius: 24px; background: radial-gradient(110% 90% at 50% 20%, oklch(0.32 0.06 40), var(--kohle) 72%); display: grid; place-items: center; overflow: hidden; }
.fr-warum-bild img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 26px 30px oklch(0 0 0 / .45)); }
.fr-warum-nr { font-family: var(--eng); font-weight: 800; letter-spacing: .14em; color: var(--rot-tief); margin: 0 0 var(--r1); }
.fr-warum-liste h3 { font-family: var(--slab); font-weight: 400; font-size: var(--fs-2); line-height: 1.04; letter-spacing: 0; max-width: 16ch; }
.fr-warum-liste p { color: var(--text-2); }
.fr-noten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; width: 100%; aspect-ratio: auto; }
.fr-noten-feld { margin: 0; aspect-ratio: auto; border-radius: 24px; background: var(--kohle); color: var(--text-hell); padding: clamp(1.25rem, 4vw, 2rem); display: grid; gap: var(--r2); }
.fr-noten li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 16px; padding: var(--r2) 0; border-bottom: 1px solid oklch(1 0 0 / .14); }
.fr-noten li:last-child { border-bottom: 0; }
.fr-noten .note { font-family: var(--slab); font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; color: var(--gold); grid-row: span 2; }
.fr-noten .stadt { font-family: var(--eng); font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; color: var(--weiss); }
.fr-noten .anzahl { color: var(--text-hell-2); font-size: .92rem; }
.fr-noten .sterne { color: var(--gold); }
.fr-noten .sterne > .sterne-reihe { color: oklch(1 0 0 / .25); }
.fr-noten-quelle { margin: 0; font-size: .82rem; color: var(--text-hell-2); }
@media (min-width: 900px) {
  .fr-warum-liste > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
  .fr-warum-liste > li:nth-child(even) .fr-warum-bild, .fr-warum-liste > li:nth-child(even) .fr-noten-feld { order: 2; }
}

/* Formate */
.fr-formate-raster { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: var(--r3); }
.fr-format { position: relative; border-radius: 26px; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: var(--r2); align-content: start; }
.fr-format.grill { background: var(--kohle); color: var(--text-hell); }
.fr-format.junior { background: var(--rot); color: var(--weiss); }
.fr-format-bild { margin: 0 0 var(--r1); height: clamp(180px, 42vw, 280px); }
.fr-format-bild img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 26px oklch(0 0 0 / .45)); }
.fr-format h3 { font-family: var(--slab); font-weight: 400; font-size: clamp(2.1rem, 7vw, 3.2rem); letter-spacing: 0; line-height: 1.02; }
.fr-format p { margin: 0; }
.fr-format .fr-format-lead { font-size: 1.12rem; }
.fr-format.grill .fr-format-lead { color: var(--text-hell); }
.fr-format dl { margin: var(--r1) 0 0; display: grid; gap: 0; }
.fr-format dl div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid oklch(1 0 0 / .18); }
.fr-format dt { font-family: var(--eng); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .92rem; }
.fr-format dd { margin: 0; }
.fr-format.grill dd { color: var(--text-hell-2); }
.fr-format.junior dd { color: oklch(0.97 0.02 30); }
.fr-formate-satz { margin: var(--r3) 0 0; font-family: var(--eng); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
@media (min-width: 900px) { .fr-formate-raster { grid-template-columns: 1fr 1fr; } }

/* Zahlen auf dem Tisch */
.fr-tisch-tabelle { width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 5vw, 3rem); font-size: 1.02rem; }
.fr-tisch-tabelle th, .fr-tisch-tabelle td { text-align: left; vertical-align: top; padding: 18px 0; border-bottom: 1px solid oklch(1 0 0 / .14); }
.fr-tisch-tabelle th { font-family: var(--eng); font-weight: 800; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--weiss); width: 34%; padding-right: 20px; }
.fr-tisch-tabelle td { color: var(--text-hell-2); }
.fr-tisch-tabelle td strong { display: block; font-family: var(--slab); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.1; color: var(--gold); margin-bottom: 4px; }
.fr-folgt { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--rund); border: 1.5px dashed oklch(1 0 0 / .4); color: var(--text-hell-2); font-family: var(--eng); font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.fr-tisch-satz { margin: var(--r3) 0 0; color: var(--text-hell); font-size: 1.08rem; max-width: 60ch; }
@media (max-width: 599px) {
  .fr-tisch-tabelle, .fr-tisch-tabelle tbody, .fr-tisch-tabelle tr, .fr-tisch-tabelle th, .fr-tisch-tabelle td { display: block; width: auto; }
  .fr-tisch-tabelle tr { padding: 16px 0; border-bottom: 1px solid oklch(1 0 0 / .14); }
  .fr-tisch-tabelle th, .fr-tisch-tabelle td { border: 0; padding: 0; }
  .fr-tisch-tabelle th { margin-bottom: 6px; }
}

/* Leistungen */
.fr-leistungen { list-style: none; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; border-top: 2px solid var(--text); }
.fr-leistungen li { display: grid; grid-template-columns: 52px 1fr; gap: 6px 16px; padding: var(--r3) 0; border-bottom: 1px solid oklch(0.2 0.01 40 / .14); }
.fr-leistungen .fr-symbol { width: 40px; height: 40px; color: var(--rot); grid-row: span 2; margin-top: 2px; }
.fr-leistungen h3 { font-size: 1.45rem; }
.fr-leistungen p { margin: 0; color: var(--text-2); }
@media (min-width: 760px) { .fr-leistungen { grid-template-columns: 1fr 1fr; column-gap: var(--r5); } }
@media (min-width: 1100px) { .fr-leistungen { grid-template-columns: repeat(3, 1fr); } }

/* Wen wir suchen */
.fr-wen blockquote { margin: var(--r3) 0 0; font-family: var(--slab); font-size: clamp(1.9rem, 6.2vw, 4rem); line-height: 1.06; text-transform: uppercase; max-width: 22ch; }
.fr-wen-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: var(--r4) 0 0; padding: 0; }
.fr-wen-chips li { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 1.15em; border-radius: var(--rund); background: var(--weiss); color: var(--rot-tief); font-family: var(--eng); font-weight: 800; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; }
.fr-wen-chips svg { width: 20px; height: 20px; }
.fr-wen-fuss { margin: var(--r3) 0 0; color: oklch(0.97 0.02 30); }

/* Der Weg (10 Etappen) */
.fr-weg-liste { list-style: none; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; counter-reset: weg; }
.fr-weg-liste li { position: relative; padding: 0 0 var(--r4) 72px; }
.fr-weg-liste li::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 6px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--rot) 0 10px, var(--weiss) 10px 20px); }
.fr-weg-liste li:last-child::before { display: none; }
.fr-weg-liste .weg-nr { width: 56px; height: 56px; font-size: 1.5rem; }
.fr-weg-wann { margin: 0; font-family: var(--eng); font-weight: 800; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding-top: 4px; }
.fr-weg-liste h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--weiss); margin: 2px 0 6px; }
.fr-weg-liste p { margin: 0; color: var(--text-hell-2); max-width: 46ch; }
.fr-weg-liste .fr-weg-zitat { color: var(--text-hell); font-weight: 600; margin-top: 6px; }
.fr-weg-liste li.wichtig .weg-nr { background: var(--gold); color: var(--kohle); }
.fr-weg-hinweis { margin: var(--r2) 0 0; color: var(--text-hell-2); font-size: .92rem; }
@media (min-width: 1100px) {
  .fr-weg-liste { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--r5) var(--r3); }
  .fr-weg-liste li { padding: 78px 0 0; }
  .fr-weg-liste li::before { left: 64px; right: calc(-1 * var(--r3) + 6px); top: 25px; bottom: auto; width: auto; height: 6px; background: repeating-linear-gradient(90deg, var(--rot) 0 10px, var(--weiss) 10px 20px); }
  .fr-weg-liste li:nth-child(5n)::before { display: none; }
}

/* Kontakt + Fläche */
.fr-kontakt-raster { display: grid; gap: var(--r3); }
.fr-kontakt-feld { border-radius: 26px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: var(--r2); align-content: start; }
.fr-kontakt-feld.hell { background: var(--weiss); box-shadow: 0 0 0 1px oklch(0.2 0.01 40 / .08); }
.fr-kontakt-feld.dunkel { border-radius: 26px; }
.fr-kontakt-feld h2 { font-size: clamp(1.8rem, 4.6vw, 2.8rem); }
.fr-kontakt-feld p { margin: 0; }
.fr-kontakt-person { display: flex; align-items: center; gap: 16px; }
.fr-kontakt-person img { width: 72px; height: 72px; flex: none; }
.fr-kontakt-person strong { display: block; font-family: var(--eng); font-weight: 800; font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; }
.fr-kontakt-person span { color: var(--text-2); font-size: .95rem; }
.fr-kontakt-wege { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .fr-kontakt-raster { grid-template-columns: 1.2fr 1fr; } }

/* FAQ */
.fr-faq-kopf { display: grid; gap: var(--r3); align-items: end; }
.fr-suche { position: relative; max-width: 520px; }
.fr-suche label { display: block; font-family: var(--eng); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; margin-bottom: 8px; }
.fr-suche input {
  width: 100%; min-height: 56px; padding: 12px 16px 12px 52px; font-size: 1.125rem; border-radius: 14px;
  border: 2px solid oklch(0.2 0.01 40 / .22); background: var(--weiss); color: var(--text); -webkit-appearance: none; appearance: none;
}
.fr-suche input:focus { border-color: var(--text); outline: 3px solid var(--gold); outline-offset: 2px; }
.fr-suche svg { position: absolute; left: 16px; bottom: 16px; width: 24px; height: 24px; color: var(--text-2); pointer-events: none; }
.fr-faq-gruppen { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: var(--r4); }
.fr-faq-gruppe h3 { font-size: 1rem; letter-spacing: .14em; color: var(--rot-tief); margin-bottom: var(--r1); }
.fr-faq-gruppe .klapp:last-child { border-bottom: 2px solid var(--papier-2); }
.fr-faq-gruppe .klapp summary { gap: 16px; padding: 12px 0; min-height: 60px; text-transform: none; letter-spacing: .01em; font-size: 1.15rem; line-height: 1.25; }
.fr-faq-gruppe .klapp summary::after { flex: none; }
.fr-faq-gruppe .klapp p { font-size: 1rem; color: var(--text-2); max-width: 70ch; }
.fr-faq-leer { margin: var(--r3) 0 0; font-size: 1.05rem; }
@media (min-width: 1000px) {
  .fr-faq-kopf { grid-template-columns: 1fr auto; }
  .fr-faq-gruppen { grid-template-columns: 1fr 1fr; column-gap: var(--r5); }
}

/* Rechtlicher Hinweis */
.fr-recht { padding-top: var(--r5); padding-bottom: var(--r5); }
.fr-recht p { font-size: .92rem; color: var(--text-2); margin: 0 0 var(--r2); max-width: 80ch; }
.fr-recht h2 { font-size: 1.1rem; font-family: var(--eng); font-weight: 800; letter-spacing: .1em; margin-bottom: var(--r2); }

/* Platzhalter-Kennzeichnung */
.platzhalter { display: inline; padding: 1px 6px; border-radius: 6px; background: oklch(0.83 0.13 85 / .28); box-shadow: inset 0 0 0 1.5px oklch(0.6 0.12 85); color: inherit; font-weight: 600; }
.dunkel .platzhalter { background: oklch(0.83 0.13 85 / .16); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--text-hell); }

/* =====================================================================
   5 · ANFRAGE-STRECKE
   ===================================================================== */
.anfrage { position: relative; padding: clamp(3.5rem, 9vw, 6.5rem) 0 0; }
.anfrage-rahmen { max-width: 1040px; margin: 0 auto; }
.anfrage-form { margin: 0; }
.anfrage-noscript { padding: 0 var(--rand) var(--r5); }

/* Fortschritt in Verpackungsstreifen-Optik */
.fortschritt { padding: 0 calc(var(--rand) + var(--sicher-rechts)) 0 calc(var(--rand) + var(--sicher-links)); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.fortschritt-text { margin: 0 0 6px; font-family: var(--eng); font-weight: 800; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-hell-2); min-height: 1.5em; }
.fortschritt-text b { color: var(--weiss); font-weight: 800; }
.fortschritt-leiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.fortschritt-leiste li { min-width: 0; }
.fortschritt-leiste button {
  width: 100%; min-height: 44px; padding: 10px 0 0; border: 0; background: none; color: var(--text-hell-2); text-align: left;
  display: grid; gap: 8px; align-content: start; -webkit-tap-highlight-color: transparent; cursor: default;
}
.fortschritt-leiste button[data-besucht] { cursor: pointer; }
.fortschritt-leiste button:disabled { opacity: 1; }
.fortschritt-band { display: block; height: 12px; border-radius: 3px; background: var(--kohle-3); overflow: hidden; position: relative; }
.fortschritt-band::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: repeating-linear-gradient(90deg, var(--rot) 0 9px, var(--weiss) 9px 18px);
  transition: transform .5s var(--aus-expo);
}
.fortschritt-leiste .erledigt .fortschritt-band::after { transform: none; }
.fortschritt-leiste .aktuell .fortschritt-band::after { transform: none; background: var(--rot); }
.fortschritt-name { display: none; font-family: var(--eng); font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fortschritt-leiste .aktuell .fortschritt-name { color: var(--weiss); }
.fortschritt-leiste button[data-besucht]:hover .fortschritt-name { color: var(--weiss); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 760px) { .fortschritt-name { display: block; } }

/* Bildschirme */
.schritt { border: 0; margin: 0; padding: 0 calc(var(--rand) + var(--sicher-rechts)) clamp(2rem, 5vw, 3rem) calc(var(--rand) + var(--sicher-links)); min-width: 0; min-height: min(62svh, 640px); }
.schritt.rein { animation: schritt-rein .55s var(--aus-expo) both; }
.schritt.rein.zurück { animation-name: schritt-zurück; }
@keyframes schritt-rein { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes schritt-zurück { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.schritt-kopf { position: relative; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.schritt-kopf .marke-zeile { color: var(--gold); margin-bottom: var(--r1); }
.schritt-titel { font-size: clamp(2.2rem, 9vw, 4.4rem); line-height: 1.02; max-width: 15ch; outline: none; color: var(--weiss); }
.schritt-titel:focus, .schritt-titel:focus-visible { outline: none; }
.schritt-einleitung { margin: var(--r2) 0 0; color: var(--text-hell-2); font-size: 1.1rem; max-width: 56ch; }
@media (min-width: 1000px) {
  .schritt-kopf[data-nr]::after {
    content: attr(data-nr); position: absolute; right: 0; top: -.15em; font-family: var(--slab); font-size: 9rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 2px var(--kohle-3); pointer-events: none;
  }
  .schritt-kopf[data-nr] .schritt-titel { max-width: min(18ch, calc(100% - 230px)); }
  .schritt-kopf[data-nr] .schritt-einleitung { max-width: min(56ch, calc(100% - 230px)); }
}

/* Felder */
.felder { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
.feld { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; scroll-margin-top: calc(var(--kopf-h) + 24px); }
.feld[hidden] { display: none; }
.feld.neu { animation: feld-rein .45s var(--aus-expo) both; }
@keyframes feld-rein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.feld-frage { padding: 0; font-family: var(--eng); font-weight: 800; font-size: 1.28rem; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; color: var(--weiss); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.feld-frage .optional { font-family: var(--text-font); font-weight: 500; font-size: .85rem; letter-spacing: .02em; text-transform: none; color: var(--text-hell-2); }
.feld-hilfe { margin: -4px 0 2px; color: var(--text-hell-2); font-size: .98rem; max-width: 60ch; }
.feld-fehler { margin: 2px 0 0; display: flex; gap: 8px; align-items: flex-start; color: var(--glut); font-weight: 600; font-size: 1rem; }
.feld-fehler svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.feld-hinweis { margin: 2px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--kohle-2); border-left: 4px solid var(--gold); color: var(--text-hell); font-size: .98rem; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.feld-hinweis svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.feld-hinweis span { flex: 1 1 200px; }
.feld-hinweis button { min-height: 44px; padding: 0 14px; border-radius: var(--rund); border: 2px solid var(--gold); background: none; color: var(--gold); font-family: var(--eng); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.felder-paar { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 700px) { .felder-paar { grid-template-columns: 1fr 1fr; gap: var(--r3); } }

/* Eingabefelder (≥ 16 px gegen iOS-Zoom) */
.eingabe {
  width: 100%; min-height: 56px; padding: 14px 16px; font-size: 1.125rem; line-height: 1.35; border-radius: 14px;
  border: 2px solid transparent; background: var(--weiss); color: var(--text); -webkit-appearance: none; appearance: none;
  box-shadow: inset 0 0 0 1px oklch(0.2 0.01 40 / .12); transition: border-color .2s, box-shadow .2s;
  scroll-margin-top: calc(var(--kopf-h) + 90px); scroll-margin-bottom: 120px;
}
.eingabe::placeholder { color: oklch(0.5 0.01 40); opacity: 1; }
.eingabe:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.eingabe[aria-invalid="true"] { border-color: var(--glut); box-shadow: 0 0 0 1px var(--glut); }
textarea.eingabe { min-height: 168px; resize: vertical; }
select.eingabe { padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1513' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 22px; }
.eingabe-einheit { position: relative; max-width: 240px; }
.eingabe-einheit .eingabe { padding-right: 56px; }
.eingabe-einheit span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-weight: 600; pointer-events: none; }
.zähler { margin: 0; text-align: right; font-size: .9rem; color: var(--text-hell-2); font-variant-numeric: tabular-nums; }
.zähler.knapp { color: var(--gold); }
.monat-paar { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; max-width: 420px; }

/* Auswahl: Karten und Chips statt Mini-Radios */
.wahlen { display: grid; gap: 10px; }
.wahlen.karten { grid-template-columns: 1fr; }
@media (min-width: 760px) { .wahlen.karten.zwei { grid-template-columns: 1fr 1fr; } .wahlen.karten.drei { grid-template-columns: repeat(3, 1fr); } }
.wahlen.chips-art { display: flex; flex-wrap: wrap; gap: 10px; }
.wahl { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wahl-fläche {
  display: flex; align-items: center; gap: 14px; min-height: 60px; height: 100%; padding: 14px 18px; border-radius: 16px;
  background: var(--kohle-2); color: var(--text-hell); box-shadow: inset 0 0 0 2px var(--kohle-3);
  transition: background-color .2s, box-shadow .2s, color .2s, transform .25s var(--aus-quart);
}
.wahl:hover .wahl-fläche { box-shadow: inset 0 0 0 2px var(--text-hell-2); }
.wahl:active .wahl-fläche { transform: scale(.985); }
.wahl input:focus-visible + .wahl-fläche { outline: 3px solid var(--gold); outline-offset: 3px; }
.wahl input:checked + .wahl-fläche { background: var(--rot); color: var(--weiss); box-shadow: inset 0 0 0 2px var(--rot); }
.wahl[aria-invalid="true"] .wahl-fläche, .wahlen[data-fehler] .wahl-fläche { box-shadow: inset 0 0 0 2px var(--glut); }
.wahl-marke { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; display: grid; place-items: center; }
.wahl-marke svg { width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--aus-expo); color: var(--rot); stroke-width: 3.2; }
.wahl input[type="checkbox"] + .wahl-fläche .wahl-marke { border-radius: 7px; }
.wahl input:checked + .wahl-fläche .wahl-marke { background: var(--weiss); box-shadow: none; }
.wahl input:checked + .wahl-fläche .wahl-marke svg { opacity: 1; transform: none; }
.wahl-text { display: grid; gap: 3px; min-width: 0; }
.wahl-text strong { font-weight: 700; font-size: 1.06rem; line-height: 1.3; }
.wahl-text small { font-size: .94rem; line-height: 1.4; color: var(--text-hell-2); }
.wahl input:checked + .wahl-fläche small { color: oklch(0.97 0.02 30); }
.chips-art .wahl-fläche { min-height: 52px; padding: 10px 18px 10px 14px; border-radius: var(--rund); gap: 10px; }
.chips-art .wahl-marke { width: 22px; height: 22px; }
.chips-art .wahl-text strong { font-size: 1.02rem; }
/* Eigenkapital als Leiste */
.wahlen.leiste { grid-template-columns: 1fr 1fr; }
.wahlen.leiste .wahl:last-child { grid-column: 1 / -1; }
.leiste .wahl-fläche { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 104px; }
.leiste-balken { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.leiste-balken i { width: 7px; border-radius: 2px; background: currentColor; opacity: .25; }
.leiste-balken i.an { opacity: 1; }
.leiste-balken i:nth-child(1) { height: 7px; } .leiste-balken i:nth-child(2) { height: 11px; } .leiste-balken i:nth-child(3) { height: 15px; }
.leiste-balken i:nth-child(4) { height: 20px; } .leiste-balken i:nth-child(5) { height: 26px; }
.leiste .wahl:last-child .wahl-fläche { min-height: 60px; flex-direction: row; align-items: center; justify-content: flex-start; }
@media (min-width: 860px) { .wahlen.leiste { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Schalter (Merken) */
.schalter { display: flex; align-items: center; gap: 14px; cursor: pointer; min-height: 56px; -webkit-tap-highlight-color: transparent; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-bahn { flex: none; position: relative; width: 58px; height: 34px; border-radius: 17px; background: var(--kohle-3); box-shadow: inset 0 0 0 2px var(--text-hell-2); transition: background-color .25s; }
.schalter-bahn::after { content: ""; position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--weiss); transition: transform .35s var(--aus-expo); }
.schalter input:checked + .schalter-bahn { background: var(--rot); box-shadow: none; }
.schalter input:checked + .schalter-bahn::after { transform: translateX(24px); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid var(--gold); outline-offset: 3px; }
.schalter-text { font-weight: 700; font-size: 1.08rem; }

/* Fehlerliste oben im Schritt */
.fehlerliste { margin: 0 0 var(--r4); padding: 18px 20px; border-radius: 16px; background: var(--kohle-2); box-shadow: inset 0 0 0 2px var(--glut); outline: none; }
.fehlerliste:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.fehlerliste p { margin: 0 0 8px; font-weight: 700; color: var(--weiss); display: flex; gap: 10px; align-items: center; }
.fehlerliste p svg { width: 22px; height: 22px; color: var(--glut); }
.fehlerliste ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.fehlerliste a { display: block; padding: 7px 0 7px 32px; color: var(--text-hell); text-underline-offset: 3px; min-height: 44px; }

/* Startbildschirm */
.start-raster { display: grid; gap: var(--r4); margin-top: var(--r4); }
.start-liste-titel { font-family: var(--eng); font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--r2); color: var(--weiss); }
.haken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.haken-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.08rem; }
.haken-liste svg { width: 24px; height: 24px; flex: none; color: var(--gold); margin-top: 1px; }
.merken-feld { padding: 20px; border-radius: 18px; background: var(--kohle-2); display: grid; gap: 10px; align-content: start; }
.merken-feld p { margin: 0; color: var(--text-hell-2); font-size: .95rem; }
.start-schritte { list-style: none; margin: var(--r4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-hell-2); font-family: var(--eng); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; }
.start-schritte b { color: var(--gold); margin-right: 6px; }
.wiederkehr { margin: 0 0 var(--r4); padding: 20px; border-radius: 18px; background: var(--weiss); color: var(--text); display: grid; gap: 14px; }
.wiederkehr p { margin: 0; font-weight: 700; font-size: 1.12rem; }
.wiederkehr div { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 860px) { .start-raster { grid-template-columns: 1fr 1fr; } }

/* Vorab-Einschätzung */
.einschätzung { display: grid; gap: var(--r3); }
.einschätzung-kopf { margin: 0; font-family: var(--eng); font-weight: 800; font-size: clamp(1.35rem, 3.6vw, 1.8rem); line-height: 1.2; color: var(--weiss); max-width: 40ch; }
.einschätzung-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.einschätzung-punkte li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding: 18px; border-radius: 18px; background: var(--kohle-2); box-shadow: inset 4px 0 0 var(--ton, var(--text-hell-2)); }
.einschätzung-punkte .ein-symbol { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--kohle-3); color: var(--ton); }
.einschätzung-punkte .ein-symbol svg { width: 26px; height: 26px; }
.einschätzung-punkte .ein-titel { margin: 0; font-family: var(--eng); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 1.05rem; color: var(--weiss); }
.einschätzung-punkte .ein-titel b { color: var(--ton); margin-left: 6px; }
.einschätzung-punkte .ein-text { margin: 0; color: var(--text-hell-2); }
.einschätzung-punkte li.passt { --ton: oklch(0.8 0.16 150); }
.einschätzung-punkte li.besprechen { --ton: var(--gold); }
.einschätzung-punkte li.knapp { --ton: var(--glut); }
.einschätzung-fuss { margin: 0; font-size: .92rem; color: var(--text-hell-2); }
.einschätzung.kompakt .einschätzung-punkte li { padding: 12px 14px; grid-template-columns: 36px 1fr; }
.einschätzung.kompakt .ein-symbol { width: 36px; height: 36px; }
.einschätzung.kompakt .ein-symbol svg { width: 20px; height: 20px; }

/* Prüfen */
.prüf-karten { display: grid; gap: 14px; }
.prüf-karte { border-radius: 18px; background: var(--kohle-2); padding: 18px 20px; }
.prüf-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.prüf-karte h3 { font-size: 1.2rem; color: var(--weiss); }
.prüf-karte h3 span { color: var(--gold); margin-right: 8px; }
.prüf-ändern { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--rund); border: 2px solid var(--text-hell-2); background: none; color: var(--text-hell); font-family: var(--eng); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .95rem; }
.prüf-ändern:hover { border-color: var(--weiss); color: var(--weiss); }
.prüf-ändern svg { width: 16px; height: 16px; }
.prüf-karte dl { margin: 0; display: grid; }
.prüf-karte dl div { display: grid; gap: 2px 16px; padding: 10px 0; border-top: 1px solid oklch(1 0 0 / .1); }
.prüf-karte dt { color: var(--text-hell-2); font-size: .92rem; }
.prüf-karte dd { margin: 0; color: var(--text-hell); overflow-wrap: anywhere; white-space: pre-line; }
@media (min-width: 700px) { .prüf-karte dl div { grid-template-columns: 200px 1fr; } }
.prüf-abschnitt-titel { font-size: 1.15rem; color: var(--weiss); margin: var(--r4) 0 var(--r2); }
.datenschutz-hinweis { margin: var(--r4) 0 0; padding: 18px 20px; border-radius: 16px; background: var(--kohle-2); color: var(--text-hell-2); font-size: .95rem; line-height: 1.55; display: flex; gap: 14px; }
.datenschutz-hinweis svg { width: 24px; height: 24px; flex: none; color: var(--text-hell); margin-top: 2px; }
.datenschutz-hinweis p { margin: 0; max-width: none; }
.datenschutz-hinweis a { color: var(--weiss); text-underline-offset: 3px; }

/* Fußleiste der Strecke: sticky, mit Safe-Area */
.anfrage-fuss {
  position: sticky; bottom: 0; z-index: 20;
  padding: 12px calc(var(--rand) + var(--sicher-rechts)) calc(12px + var(--sicher-unten)) calc(var(--rand) + var(--sicher-links));
  background: oklch(0.17 0.008 40 / .97); box-shadow: 0 -1px 0 oklch(1 0 0 / .1), 0 -18px 30px -18px oklch(0 0 0 / .6);
}
.anfrage-fuss-knöpfe { display: flex; gap: 10px; align-items: center; max-width: 1040px; margin: 0 auto; }
.anfrage-fuss .knopf { min-height: 56px; white-space: nowrap; padding: 0 1.15em; }
.anfrage-fuss .weiter { flex: 1 1 auto; }
.anfrage-fuss .zurück { flex: 0 0 auto; color: var(--text-hell); padding: 0 1.1em; }
.anfrage-fuss .zurück svg { width: 1.1em; height: 1.1em; }
@media (max-width: 419px) {
  .anfrage-fuss .zurück { width: 56px; padding: 0; }
  .zurück-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 700px) { .anfrage-fuss .weiter { flex: 0 0 auto; margin-left: auto; min-width: 280px; } }
.anfrage-fuss.statisch { position: static; box-shadow: none; background: none; }
.tastatur .anfrage-fuss { position: static; }
.anfrage-fuss[hidden] { display: none; }
.senden-unterzeile { margin: 10px auto 0; max-width: 1040px; display: grid; gap: 2px; font-size: .92rem; color: var(--text-hell-2); text-align: right; }
.senden-unterzeile strong { color: var(--gold); font-weight: 700; }
@media (max-width: 699px) { .senden-unterzeile { text-align: left; } }
.anfrage-speicher { margin: 0 auto; max-width: 1040px; padding: var(--r3) calc(var(--rand) + var(--sicher-rechts)) calc(var(--r5) + var(--sicher-unten)) calc(var(--rand) + var(--sicher-links)); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .92rem; color: var(--text-hell-2); }
.anfrage-speicher button { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--text-hell); text-decoration: underline; text-underline-offset: 3px; font-size: .92rem; }
.anfrage-speicher button:hover { color: var(--weiss); }
.honigtopf { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Bestätigung */
.musterbanner { margin: 0 0 var(--r4); padding: 16px 18px; border-radius: 16px; background: var(--gold); color: var(--kohle); font-weight: 700; display: flex; gap: 12px; align-items: flex-start; }
.musterbanner svg { width: 24px; height: 24px; flex: none; }
.vorgang { display: inline-grid; gap: 4px; margin: var(--r3) 0 0; padding: 16px 22px; border-radius: 14px; border: 2px dashed oklch(1 0 0 / .35); }
.vorgang span { font-family: var(--eng); font-weight: 700; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-hell-2); }
.vorgang strong { font-family: var(--slab); font-weight: 400; font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: .04em; color: var(--gold); }
.danke-titel { margin-top: var(--r4) !important; }
.danke-liste { list-style: none; margin: var(--r2) 0 0; padding: 0; display: grid; gap: 0; }
.danke-liste li { position: relative; padding: 0 0 var(--r3) 60px; }
.danke-liste li::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: 0; width: 6px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--rot) 0 10px, var(--weiss) 10px 20px); }
.danke-liste li:last-child::before { display: none; }
.danke-liste strong { display: block; font-family: var(--eng); font-weight: 800; font-size: 1.2rem; letter-spacing: .03em; text-transform: uppercase; color: var(--weiss); padding-top: 9px; }
.danke-liste span:not(.weg-nr) { color: var(--text-hell-2); }
.bis-dahin { list-style: none; margin: var(--r2) 0 0; padding: 0; display: grid; gap: 12px; }
.bis-dahin li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.05rem; }
.bis-dahin svg { width: 24px; height: 24px; flex: none; color: var(--gold); margin-top: 1px; }
.bis-dahin a { color: var(--weiss); text-underline-offset: 3px; }
.danke-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--r4); }
.druck-zusammenfassung { display: none; }

/* =====================================================================
   6 · RECHTSSEITEN (Platzhalter)
   ===================================================================== */
.recht-seite main { background: var(--papier); }
.recht-kopf { padding: clamp(3rem, 8vw, 5.5rem) var(--rand) clamp(2rem, 5vw, 3rem); }
.recht-kopf h1 { font-size: clamp(2.6rem, 10vw, 5.4rem); }
.recht-platzhalter { margin: var(--r3) 0 0; padding: 18px 20px; border-radius: 16px; background: var(--kohle); color: var(--text-hell); display: flex; gap: 14px; align-items: flex-start; max-width: 860px; }
.recht-platzhalter svg { width: 26px; height: 26px; flex: none; color: var(--gold); margin-top: 2px; }
.recht-platzhalter strong { display: block; font-family: var(--eng); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-size: 1.05rem; margin-bottom: 4px; }
.recht-platzhalter p { margin: 0; color: var(--text-hell-2); }
.recht-text { padding: 0 var(--rand) var(--abschnitt); }
.recht-text .innen { max-width: 860px; margin: 0; }
@media (min-width: 1100px) { .recht-text .innen { margin-left: max(0px, calc((100% - var(--breite)) / 2)); } }
.recht-text h2 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; font-size: clamp(1.6rem, 4.4vw, 2.3rem); margin: var(--r5) 0 var(--r2); scroll-margin-top: calc(var(--kopf-h) + 20px); }
.recht-text h3 { font-size: 1.25rem; margin: var(--r3) 0 var(--r1); }
.recht-text p, .recht-text li { color: var(--text-2); }
.recht-text ul { padding-left: 1.2em; }
.recht-text li { margin: 0 0 6px; }
.recht-text a { color: var(--rot-tief); text-underline-offset: 3px; }
.recht-tabelle { width: 100%; border-collapse: collapse; margin: var(--r2) 0; font-size: .95rem; }
.recht-tabelle th, .recht-tabelle td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--papier-2); }
.recht-tabelle th { font-family: var(--eng); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; }
.recht-inhalt { list-style: none; padding: 0 !important; margin: var(--r3) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.recht-inhalt a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--rund); background: var(--weiss); box-shadow: inset 0 0 0 2px var(--papier-2); text-decoration: none; color: var(--text) !important; font-family: var(--eng); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .92rem; }
.recht-inhalt a:hover { box-shadow: inset 0 0 0 2px var(--text); }
.recht-stand { margin-top: var(--r5); font-size: .9rem; }
@media (max-width: 599px) {
  .recht-tabelle, .recht-tabelle tbody, .recht-tabelle tr, .recht-tabelle th, .recht-tabelle td { display: block; width: auto; }
  .recht-tabelle thead { display: none; }
  .recht-tabelle tr { padding: 12px 0; border-bottom: 1px solid var(--papier-2); }
  .recht-tabelle td { border: 0; padding: 2px 0; }
  .recht-tabelle td:first-child { font-weight: 700; color: var(--text); }
}

/* =====================================================================
   7 · DRUCK (Zusammenfassung der Anfrage)
   ===================================================================== */
@media print {
  body.druckt * { visibility: hidden !important; }
  body.druckt .druck-zusammenfassung, body.druckt .druck-zusammenfassung * { visibility: visible !important; }
  body.druckt .druck-zusammenfassung { display: block; position: absolute; left: 0; top: 0; width: 100%; color: #111; background: #fff; font-size: 11pt; }
  body.druckt .hinweis, body.druckt .kopf, body.druckt .fuss { display: none !important; }
  .druck-zusammenfassung h1 { font-size: 20pt; margin: 0 0 8pt; }
  .druck-zusammenfassung h2 { font-size: 13pt; margin: 14pt 0 4pt; text-transform: none; }
  .druck-zusammenfassung dl { margin: 0; display: grid; grid-template-columns: 34% 1fr; gap: 3pt 10pt; }
  .druck-zusammenfassung dt { color: #555; }
  .druck-zusammenfassung dd { margin: 0; white-space: pre-line; }
  .druck-zusammenfassung section { break-inside: avoid; }
  @page { margin: 16mm; }
}