/* IPEK Entwurf 7: Endfassung. Liegt über seite.css. Alle Werte aus tokens.css. */

:root { --giebel-h: 24px; --giebel-w: 34.3px; --strich-ruhe: 60%; --karte-rand: var(--c-linie); }
@media (max-width: 760px) { :root { --giebel-h: 16px; --giebel-w: 22.9px; } }

/* Fase oben rechts: Dachneigung 35 Grad, ersetzt jede Abrundung an dieser Ecke */
.knopf, .wahlknopf, .karte, .karte-bild, .karte-zeichen, .vergleich, .formular, .rollen, .messpunkt, .ebene, .haus-info-karte, .bildpaar img, .bild-mass img, .anfrage-seite img, .rund-knopf, .hero-platte, .hero-schatten, .schiene a, .skala-senkrecht a {
  clip-path: polygon(0 0, calc(100% - var(--fase-w, 34.3px)) 0, 100% var(--fase, 24px), 100% 100%, 0 100%);
}
.marke-platte { border-radius: 0 0 24px 8px; }

/* ---------- Knopf: eckig mit Fase, Ladestrich am Ende ---------- */
.knopf { --fase: 12px; --fase-w: 17.1px; --fort: 0%; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--a-3); min-block-size: 3rem; min-inline-size: 2.75rem; padding: 0 var(--a-5); background: var(--c-orange); color: var(--c-navy); font: 600 var(--t-text)/1.2 var(--f-titel); text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: 0; transition: background-color var(--d-2) var(--kurve), color var(--d-2) var(--kurve); }
.knopf::after { content: ""; flex: none; width: var(--strich-l); height: var(--strich-h); background: linear-gradient(currentColor, currentColor) left / var(--fort) 100% no-repeat, color-mix(in srgb, currentColor var(--strich-ruhe), transparent); transition: background-size var(--d-3) var(--kurve); }
.knopf:hover, .knopf:focus-visible { --fort: 100%; background-color: color-mix(in srgb, var(--c-orange) 82%, var(--c-weiss)); }
.knopf:focus-visible, .wahlknopf:focus-visible, .schiene a:focus-visible, .skala-senkrecht a:focus-visible, .rund-knopf:focus-visible { outline: var(--fokus-breite) solid currentColor; outline-offset: -4px; }
.knopf--zwei { background: var(--c-grund-2); color: var(--c-navy); }
.knopf--zwei:hover, .knopf--zwei:focus-visible { background-color: var(--c-grund-3); }
.dunkel .knopf--zwei { background: var(--c-navy-2); color: var(--c-weiss); }
.dunkel .knopf--zwei:hover, .dunkel .knopf--zwei:focus-visible { background-color: color-mix(in srgb, var(--c-navy-2) 82%, var(--c-weiss)); }
.knopf--klein { --fase: 8px; --fase-w: 11.4px; min-block-size: 2.75rem; padding: 0 var(--a-4); }
.plakette, .rund-knopf { border-radius: 0; }
.rund-knopf { --fase: 8px; --fase-w: 11.4px; }

/* ---------- Kopf ---------- */
.schiene { justify-content: center; align-items: center; gap: var(--a-1); }
.schiene a { --fase: 8px; --fase-w: 11.4px; display: grid; place-items: center; min-block-size: 2.75rem; padding: 0 var(--a-4); font: 500 var(--t-text)/1.2 var(--f-titel); color: var(--marke); transition: background-color var(--d-2) var(--kurve); }
.schiene a:hover, .schiene a[aria-current="true"] { background: var(--c-grund-2); }
.laeufer { bottom: 0; }
.kopf-aktion { display: flex; align-items: center; gap: var(--a-2); }
.kopf .menue-knopf { display: none; }
.kopf .knopf::after { display: none; }
@media (max-width: 1199px) { .kopf .menue-knopf { display: inline-flex; } .kopf-innen { column-gap: var(--a-4); } .kopf-aktion { grid-column: 3; } }
@media (max-width: 760px) { .kopf .kopf-anfrage { display: none; } .kopf .knopf { padding: 0 var(--a-4); } }

.skala-senkrecht { border-left: 0; gap: var(--a-1); }
.skala-senkrecht a { --fase: 12px; --fase-w: 17.1px; align-items: center; padding: 0 var(--a-4); background: var(--c-grund); }
.skala-senkrecht a:hover { background: var(--c-grund-2); }
.skala-senkrecht a[aria-current="true"] { box-shadow: none; background: var(--c-navy); color: var(--c-weiss); }
.blatt-aktion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); }

/* ---------- Hero ---------- */
.hero { min-height: min(calc(100vh - 80px), 820px); }
.hero > img { animation: hero-fahrt 16s var(--kurve) both; transform-origin: 70% 40%; }
@keyframes hero-fahrt { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero > img { animation: none; } }
.hero-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 36, 64, .9) 0%, rgba(2, 36, 64, .55) 42%, rgba(2, 36, 64, 0) 72%), linear-gradient(0deg, rgba(2, 36, 64, .7) 0%, rgba(2, 36, 64, 0) 36%); }
.hero-giebel { position: absolute; right: 0; bottom: 0; width: min(78%, 1080px); height: 100%; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 360' fill='none'%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='.5' d='M40 360V252L360 28l320 224v108'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='.28' d='M120 360V294L360 126l240 168v66'/%3E%3Cpath stroke='%23F07225' stroke-width='2' d='M-40 280L360 0l400 280'/%3E%3C/svg%3E") right bottom / contain no-repeat; }
.hero-lamellen { position: absolute; right: calc(var(--kante) + var(--a-6)); bottom: var(--a-8); display: flex; align-items: flex-end; gap: var(--a-2); pointer-events: none; }
.hero-lamellen i { display: block; width: 16px; background: rgba(255, 255, 255, .28); }
.hero-lamellen i:nth-child(1) { height: 24px; } .hero-lamellen i:nth-child(2) { height: 35px; } .hero-lamellen i:nth-child(3) { height: 46px; } .hero-lamellen i:nth-child(4) { height: 57px; } .hero-lamellen i:nth-child(5) { height: 68px; } .hero-lamellen i:nth-child(6) { height: 79px; } .hero-lamellen i:nth-child(7) { height: 90px; background: var(--c-orange); }
.hero-stapel { position: relative; width: min(100%, 800px); margin-block: var(--a-9) var(--a-8); }
.hero-platte, .hero-schatten { --fase: 48px; --fase-w: 68.6px; border-radius: 0; }
.hero-platte { margin: 0; width: 100%; padding: var(--a-7) var(--a-8) var(--a-7) var(--a-7); gap: var(--a-5); }
.hero-schatten { position: absolute; inset: 0; background: var(--c-orange); transform: translate(12px, 12px); }
.hero-platte p { white-space: nowrap; }
.erfahrung { color: var(--c-text-hell); }
.erfahrung b { color: var(--c-weiss); font-weight: 600; }
@media (max-width: 760px) {
  .hero { min-height: min(calc(100vh - 64px), 640px); }
  .hero-giebel { width: 140%; }
  .hero-lamellen { display: none; }
  .hero-stapel { margin-block: var(--a-9) var(--a-6); width: calc(100% - 8px); }
  .hero-platte, .hero-schatten { --fase: 24px; --fase-w: 34.3px; }
  .hero-platte { padding: var(--a-5) var(--a-4); gap: var(--a-4); }
  .hero-schatten { transform: translate(8px, 8px); }
  .hero-platte p { white-space: normal; font-size: var(--t-text); text-wrap: balance; }
}

/* ---------- Sektionen: Flächen und Giebelkante an jedem Wechsel ---------- */
.sek { background: var(--flaeche); }
.sek--grund { background: var(--flaeche-2); }
.sek--tief { background: var(--flaeche-tief); }
.kante::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--giebel-h); background: inherit; background-image: none; pointer-events: none; clip-path: polygon(0 100%, var(--kante) 100%, calc(var(--kante) + var(--giebel-w)) 0, 100% 0, 100% 100%); }
.dunkel .mess { color: var(--c-text-hell); }

/* Muster aus dem System: Giebel-Linien, Mess-Raster, Dach-Schnitt, Lamellen */
.grafik--giebel::before { width: min(64%, 780px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 360' fill='none' stroke='%23043055' stroke-opacity='.18' stroke-width='1.5'%3E%3Cpath d='M40 360V252L360 28l320 224v108M120 360V294L360 126l240 168v66M200 360v-24l160-112 160 112v24'/%3E%3C/svg%3E"); }
.grafik--links::before { right: auto; left: 0; transform: scaleX(-1); }
.dunkel.grafik--raster::before { inset: 0; opacity: 1; background-repeat: repeat; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; }
.grafik--schraffur::before { right: 0; bottom: 0; width: min(46%, 560px); height: min(100%, 392px); background-repeat: repeat; background-image: repeating-linear-gradient(-35deg, transparent 0 11px, rgba(4, 48, 85, .14) 11px 12px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.grafik--lamellen::before { right: var(--kante); bottom: 0; width: 280px; height: 196px; background-repeat: repeat; background-image: repeating-linear-gradient(90deg, rgba(4, 48, 85, .1) 0 16px, transparent 16px 24px); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.dunkel.grafik--lamellen::before { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 16px, transparent 16px 24px); }
@media (max-width: 760px) { .grafik--giebel::before { width: 100%; } .grafik--lamellen::before { width: 160px; height: 112px; } }

/* ---------- Leistungskarten ---------- */
.leistungs-raster, .karten { display: grid; gap: var(--a-5); }
.karten--gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karten--klein { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.karte { --fase: 24px; --fase-w: 34.3px; position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--a-3); padding: var(--a-4); background: var(--c-weiss); border: var(--haar) solid var(--karte-rand); border-radius: var(--r-m) 0 var(--r-m) var(--r-m); transition: transform var(--d-3) var(--kurve), border-color var(--d-2) var(--kurve); }
.karte::before { content: ""; position: absolute; top: -1px; right: -1px; width: var(--fase-w); height: var(--fase); background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--karte-rand) calc(50% - 1.5px)); pointer-events: none; }
.karte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-orange); transform: scaleX(0); transform-origin: left; transition: transform var(--d-3) var(--kurve); }
.karte:hover, .karte:focus-within { --karte-rand: var(--c-navy); transform: translateY(-4px); }
.karte:hover::after, .karte:focus-within::after { transform: scaleX(1); }
.karte:hover .knopf, .karte:focus-within .knopf { --fort: 100%; }
.karte-bild { --fase: 16px; --fase-w: 22.9px; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-navy-3); }
.karte-bild > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-4) var(--kurve); }
.karte:hover .karte-bild > img, .karte:focus-within .karte-bild > img { transform: scale(1.06); }
.karte-bild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(2, 36, 64, .6) 0%, rgba(2, 36, 64, 0) 55%); pointer-events: none; }
/* Eck-Winkel im Foto: zwei Haarstriche, wachsen beim Überfahren */
.karte-bild::after { content: ""; position: absolute; z-index: 1; left: var(--a-2); top: var(--a-2); width: 16px; height: 16px; background: linear-gradient(var(--c-orange), var(--c-orange)) left top / 100% var(--strich-h) no-repeat, linear-gradient(var(--c-orange), var(--c-orange)) left top / var(--strich-h) 100% no-repeat; transition: width var(--d-3) var(--kurve), height var(--d-3) var(--kurve); pointer-events: none; }
.karte:hover .karte-bild::after, .karte:focus-within .karte-bild::after { width: 40px; height: 40px; }
.karte-zeichen { --fase: 8px; --fase-w: 11.4px; position: absolute; z-index: 2; left: var(--a-3); bottom: var(--a-3); display: block; padding: var(--a-1); background: var(--c-weiss); }
.karte-zeichen img { width: 48px; height: 48px; }
.karte h3 { font-size: var(--t-h4); }
.karte p { color: var(--vordergrund-2); max-width: none; }
.karte-fuss { display: flex; align-self: end; }
.karten--gross .karte { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--a-5); padding: var(--a-5); }
.karten--gross .karte-bild { grid-column: 1; grid-row: 1 / -1; aspect-ratio: 1 / 1; }
.karten--gross .karte h3 { grid-column: 2; grid-row: 2; font-size: var(--t-h3); }
.karten--gross .karte p { grid-column: 2; grid-row: 3; }
.karten--gross .karte-fuss { grid-column: 2; grid-row: 4; padding-top: var(--a-2); }
@media (max-width: 1199px) { .karten--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .karten--gross { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .leistungs-raster, .karten { gap: var(--a-3); }
  .karten--klein { grid-template-columns: minmax(0, 1fr); }
  .karten--gross .karte { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: var(--a-4); }
  .karten--gross .karte-bild { grid-row: auto; aspect-ratio: 16 / 9; }
  .karten--gross .karte h3, .karten--gross .karte p, .karten--gross .karte-fuss { grid-column: 1; grid-row: auto; }
  .karten--klein .karte { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--a-3); gap: var(--a-2) var(--a-3); padding: var(--a-3); }
  .karten--klein .karte-bild { grid-column: 1; grid-row: 1 / -1; align-self: start; width: 96px; height: 96px; aspect-ratio: auto; --fase: 8px; --fase-w: 11.4px; }
  .karten--klein .karte-zeichen, .karten--klein .karte-bild::after { display: none; }
  .karten--klein .karte h3, .karten--klein .karte p, .karten--klein .karte-fuss { grid-column: 2; }
  .karten--klein .karte p { font-size: var(--t-mess); line-height: 1.5; }
}

/* ---------- Haus ---------- */
.buehne { display: grid; gap: var(--a-4); }
.haus-bedienung { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--a-4) var(--a-6); }
.waehler { display: grid; gap: var(--a-2); }
.waehler-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.wahlknopf { --fase: 8px; --fase-w: 11.4px; display: inline-flex; align-items: center; gap: var(--a-2); min-block-size: 2.75rem; padding: 0 var(--a-4); background: var(--c-navy-2); color: var(--c-weiss); font: 500 var(--t-text)/1.2 var(--f-titel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: var(--d-2) var(--kurve); transition-property: background-color, color, box-shadow; }
.wahlknopf:hover { background: color-mix(in srgb, var(--c-navy-2) 78%, var(--c-weiss)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.wahlknopf[aria-pressed="true"] { background: var(--c-weiss); color: var(--c-navy); box-shadow: inset 0 -3px 0 var(--c-orange); }
.wahlknopf .sym { width: 20px; height: 20px; }
.wahlknopf .zone, symbol .zone { fill: var(--c-orange); stroke: none; }
.buehne-rahmen { position: relative; aspect-ratio: 15 / 8; background: var(--c-navy); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.buehne-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.buehne-warte { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: var(--a-3); color: var(--c-text-hell); background: var(--c-navy); }
.buehne-warte img { width: 96px; height: 96px; padding: var(--a-3); background: var(--c-weiss); }
.buehne-warte.ist-weg { display: none; }
.passmarke { position: absolute; z-index: 1; width: 16px; height: 16px; pointer-events: none; }
.passmarke--ol { left: var(--a-2); top: var(--a-2); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5); }
.passmarke--or { right: var(--a-2); top: var(--a-2); box-shadow: inset -1px 1px 0 rgba(255, 255, 255, .5); }
.passmarke--ul { left: var(--a-2); bottom: var(--a-2); box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .5); }
.passmarke--ur { right: var(--a-2); bottom: var(--a-2); box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .5); }
.haus-info-karte { --fase: 12px; --fase-w: 17.1px; border-radius: var(--r-m) 0 var(--r-m) var(--r-m); }
.haus-info-karte .mess { color: var(--c-text-2); }
@media (max-width: 760px) {
  .buehne-rahmen { aspect-ratio: 4 / 5; }
  .wahlknopf { padding: 0 var(--a-3); }
  .waehler--bauteil .waehler-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .waehler, .haus-bedienung { width: 100%; }
}

/* ---------- Vergleich, Vorbereitung ---------- */
.vergleich, .rollen, .formular { border-radius: var(--r-m) 0 var(--r-m) var(--r-m); }
.bildpaar img, .bild-mass img, .anfrage-seite img { --fase: 16px; --fase-w: 22.9px; border-radius: var(--r-m) 0 var(--r-m) var(--r-m); }
.messpunkt { --fase: 12px; --fase-w: 17.1px; border-radius: var(--r-m) 0 var(--r-m) var(--r-m); }
.messpunkt:hover { box-shadow: inset 0 0 0 1px var(--c-linie-fest); }

/* ---------- Anfrage ---------- */
.anfrage { align-items: stretch; }
.anfrage-seite { grid-template-rows: minmax(200px, 1fr) auto auto; }
.anfrage-seite img { height: 100%; aspect-ratio: auto; min-height: 200px; }
.daten dd a, .wertpaare a b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.daten dd a { color: var(--marke); }
.formular { align-content: start; }
.formular-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--a-2) var(--a-4); }
.schritte { display: flex; gap: var(--a-1); }
.schritte i { display: block; width: 32px; height: 4px; background: var(--c-linie); transition: background-color var(--d-2) var(--kurve); }
.schritte i.an { background: var(--c-orange); }
#schritt-zeile, .uebernommen { grid-column: 1 / -1; white-space: nowrap; max-width: none; }
.uebernommen { color: var(--signal-text); }
.schritt { min-block-size: 24.5rem; align-content: start; }
.wahl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wahl label { position: relative; font-weight: 500; }
.wahl label:has(input:checked) { background: var(--c-grund-2); }
.wahl--bild label { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-block-size: 9rem; }
.wahl--bild label img { width: 48px; height: 48px; }
.wahl--bild label input { position: absolute; right: var(--a-3); top: var(--a-3); }
.schritt-hinweis { color: var(--vordergrund-2); }
.fehler { color: var(--c-orange-tief); font-weight: 600; }
.zusammen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-4); }
.zusammen div { grid-template-columns: 96px minmax(0, 1fr); }
.formular-fuss span { flex: 1; }
@media (max-width: 760px) {
  .schritte i { width: 20px; }
  .schritt { min-block-size: 26rem; }
  .wahl--bild, .wahl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wahl--bild label { min-block-size: 7rem; padding: var(--a-3); }
  .zusammen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Fragen ---------- */
.rollen-liste { display: grid; }
.rollen-liste li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--a-3); align-items: baseline; padding-block: var(--a-2); border-top: var(--rand-trenner); }
.rollen-liste b { font: 600 var(--t-mess)/var(--zh-mess) var(--f-text); color: var(--vordergrund-2); }
.rollen-liste .sie b { color: var(--signal-text); }
.ebene { --fase: 24px; --fase-w: 34.3px; border-radius: var(--r-m) 0 var(--r-m) var(--r-m); }
.ebene-liste:empty { display: none; }

/* ---------- Untere Leiste (nur mobil): Anrufen und Anfrage ---------- */
@media (max-width: 760px) {
  .unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-leiste); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); padding: var(--a-2) var(--rand) calc(var(--a-2) + env(safe-area-inset-bottom, 0px)); background: var(--c-weiss); box-shadow: 0 -1px 0 var(--c-linie); transition: transform var(--d-3) var(--kurve), visibility var(--d-3) var(--kurve); }
  .unten.ist-weg { transform: translateY(100%); visibility: hidden; }
  .unten .knopf::after { display: none; }
}

/* ==================== Runde 5 ==================== */

/* 1. Ruhiger Kartenrahmen: keine Linie, getönte Fläche, Dachschräge nur als Schnitt */
.karte { background: var(--c-grund); border: 0; transition: transform var(--d-3) var(--kurve), background-color var(--d-2) var(--kurve); }
.karte::before { content: none; }
.karte:hover, .karte:focus-within { background: var(--c-grund-2); }
.messpunkt { background: var(--c-weiss); box-shadow: none; transition: background-color var(--d-2) var(--kurve); }
.messpunkt:hover { box-shadow: none; background: color-mix(in srgb, var(--c-weiss) 55%, var(--c-grund-2)); }
.messpunkt:has(input:checked) { box-shadow: none; background: var(--c-grund-3); }
.messpunkt:has(input:focus-visible) { outline: var(--fokus-breite) solid var(--c-navy); outline-offset: 2px; }

/* 10. Hero-Bild: Blick nach rechts, Text links */
.hero > img { object-position: 70% 60%; }

/* 3. Raster nur rechts, läuft nach links in Navy aus */
.dunkel.grafik--raster::before { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 85%); mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 85%); }

/* 2. Leitlinie durch die ganze Seite */
.leitlinie { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.leitlinie path { fill: none; stroke-linejoin: miter; stroke-linecap: square; }
.leitlinie .spur { stroke: var(--c-linie); stroke-width: 1; opacity: .5; }
.leitlinie .zug { stroke: var(--c-orange); stroke-width: 2; transition: stroke-dashoffset var(--d-3) linear; }
.leitlinie rect { fill: var(--c-linie); transition: fill var(--d-3) var(--kurve); }
.leitlinie rect.ist-an { fill: var(--c-orange); }

/* 4. Systeme im Vergleich */
.systeme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-5); }
.system { --fase: 24px; --fase-w: 34.3px; display: grid; grid-template-rows: auto 1fr auto; background: var(--c-weiss); clip-path: polygon(0 0, calc(100% - var(--fase-w)) 0, 100% var(--fase), 100% 100%, 0 100%); transition: background-color var(--d-2) var(--kurve); }
.system:hover, .system:focus-within { background: color-mix(in srgb, var(--c-weiss) 55%, var(--c-grund-2)); }
.system-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--a-4); padding: var(--a-4) var(--a-7) var(--a-4) var(--a-4); background: var(--c-navy); color: var(--c-weiss); }
.system-zeichen { display: block; padding: var(--a-1); background: var(--c-weiss); }
.system-zeichen img { display: block; width: 48px; height: 48px; }
.system-kopf h3 { color: var(--c-weiss); font-size: var(--t-h3); white-space: nowrap; }
.system-nr { font: 600 var(--t-mess)/var(--zh-mess) var(--f-text); letter-spacing: .06em; color: var(--c-orange); }
.system-werte { display: grid; padding: var(--a-2) var(--a-5); }
.system-werte div { display: grid; gap: var(--a-1); padding-block: var(--a-3); border-top: var(--rand-trenner); }
.system-werte div:first-child { border-top: 0; }
.system-werte dt { font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--vordergrund-2); }
.system-werte dd { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.system-fuss { display: flex; padding: 0 var(--a-5) var(--a-4); }
@media (max-width: 960px) { .systeme { grid-template-columns: minmax(0, 1fr); gap: var(--a-3); } .system-kopf { padding: var(--a-3) var(--a-7) var(--a-3) var(--a-3); } .system-zeichen img { width: 32px; height: 32px; } .system-werte div { padding-block: var(--a-2); } .system-fuss { padding-bottom: var(--a-3); } }

/* 5. Ortskarte neben dem Formular */
.ortskarte { --fase: 24px; --fase-w: 34.3px; display: grid; gap: var(--a-3); padding: var(--a-4); background: var(--c-navy-3); color: var(--c-weiss); clip-path: polygon(0 0, calc(100% - var(--fase-w)) 0, 100% var(--fase), 100% 100%, 0 100%); }
.ortskarte-kopf { display: grid; gap: var(--a-1); padding-right: var(--a-6); }
.ortskarte-kopf h3 { color: var(--c-weiss); font-size: var(--t-h4); }
.ortskarte-kopf .mess { color: var(--c-text-hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.ortskarte-flaeche { position: relative; }
.ortskarte-svg { display: block; width: 100%; height: auto; }
.ortskarte .zelle { fill: var(--c-navy-2); stroke: var(--c-navy-3); stroke-width: 2; cursor: pointer; transition: fill var(--d-2) var(--kurve); }
.ortskarte .zelle:hover, .ortskarte .zelle.ist-nah { fill: color-mix(in srgb, var(--c-navy-2) 70%, var(--c-weiss)); }
.ortskarte .zelle.ist-wahl { fill: var(--c-orange); }
.ortskarte .ring { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; pointer-events: none; }
.ortskarte .strahl { stroke: var(--c-weiss); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.ortskarte .ring-zahl { font-size: var(--t-mess); line-height: 1.2; color: var(--c-text-hell); background: var(--c-navy-3); }
.ortmarke { position: absolute; width: 0; height: 0; pointer-events: none; }
.ortmarke i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: var(--r-kreis); background: var(--c-weiss); transition: transform var(--d-2) var(--kurve), background-color var(--d-2) var(--kurve); }
.ortmarke > span { position: absolute; left: 0; bottom: 8px; transform: translateX(-50%); padding: 0 var(--a-1); font: 600 var(--t-mess)/1.6 var(--f-text); white-space: nowrap; color: var(--c-navy); background: var(--c-weiss); visibility: hidden; }
.ortmarke.ist-nah > span, .ortmarke.ist-wahl > span { visibility: visible; }
.ortmarke.ist-wahl i { background: var(--c-navy); outline: 2px solid var(--c-weiss); transform: scale(1.5); }
.ortskarte-start { position: absolute; width: 0; height: 0; pointer-events: none; }
.ortskarte-start::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: var(--r-kreis); background: var(--c-orange); outline: 2px solid var(--c-weiss); }
.ortskarte-start > span { position: absolute; left: 0; top: 12px; transform: translateX(-50%); padding: 0 var(--a-1); font: 600 var(--t-mess)/1.6 var(--f-text); white-space: nowrap; color: var(--c-navy); background: var(--c-orange); }
.ortskarte-quelle { font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--c-text-hell); max-width: none; }
.anfrage-seite { grid-template-rows: none; align-content: start; }
@media (max-width: 960px) { .anfrage-seite { order: 2; } }

/* 6. Knopf nach dem Abhaken */
.bereit-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-4); padding-top: var(--a-2); transition-property: translate, visibility; transition-duration: var(--d-3); transition-timing-function: var(--kurve); }
.bereit-weiter:not(.ist-an) { visibility: hidden; translate: 0 8px; }
#formular { }

/* 7. Formular: knapp, feste Bühne, nichts springt */
.formular { gap: var(--a-4); padding: var(--a-5); }
.formular-kopf { padding-bottom: var(--a-3); }
.uebernommen { overflow: hidden; text-overflow: ellipsis; }
.ist-leer { visibility: hidden; }
.schritt-buehne { display: grid; }
.schritt-buehne > .schritt, .schritt-buehne > .meldung { grid-area: 1 / 1; }
.schritt { min-block-size: 0; gap: var(--a-4); }
.schritt:not(.ist-an), .meldung:not(.ist-an) { visibility: hidden; }
.meldung { align-self: start; }
.schritt > legend { margin-bottom: var(--a-2); }
.wahl label { min-block-size: 3.5rem; padding: var(--a-2) var(--a-3); }
.wahl--bild label { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--a-2); min-block-size: 3.5rem; }
.wahl--bild label img { width: 32px; height: 32px; flex: none; }
.wahl--bild label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wahl--bild label:has(input:focus-visible) { outline: var(--fokus-breite) solid var(--c-navy); outline-offset: 2px; }
.wahl--bild label:has(input:checked) { background: var(--c-navy); color: var(--c-weiss); border-color: var(--c-navy); }
.wahl--bild label:has(input:checked) img { background: var(--c-weiss); }
.felder-2 { gap: var(--a-3); }
.felder-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3); }
.feld { gap: var(--a-1); }
.zusammen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-2) var(--a-4); }
.zusammen div { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--a-1); }
.zusammen dt { padding-top: 0; }
.zusammen dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fehler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.formular-fuss { padding-top: var(--a-3); }
@media (max-width: 760px) {
  .schritt { min-block-size: 0; }
  .formular { padding: var(--a-4); }
  .wahl--bild { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wahl--3:not(.wahl--bild) { grid-template-columns: minmax(0, 1fr); }
  .wahl--3:not(.wahl--bild) label { min-block-size: 2.75rem; }
  .felder-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .felder-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .felder-3 .feld--breit { grid-column: 1 / -1; }
  .zusammen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zusammen div { grid-template-columns: minmax(0, 1fr); }
}

/* 8. Förderung: zweispurige Zeitleiste */
.bahnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-4); }
.bahnen span { font: 600 var(--t-mess)/var(--zh-mess) var(--f-text); letter-spacing: .06em; color: var(--vordergrund-2); padding-bottom: var(--a-2); border-bottom: 2px solid var(--c-navy); }
.bahnen span + span { border-bottom-color: var(--c-orange); }
.zeitleiste { counter-reset: schritt; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-4); row-gap: var(--a-2); background: linear-gradient(var(--c-linie), var(--c-linie)) calc((100% - 16px) / 4) 0 / 1px 100% no-repeat, linear-gradient(var(--c-linie), var(--c-linie)) calc(100% - (100% - 16px) / 4) 0 / 1px 100% no-repeat; }
.zeitleiste li { counter-increment: schritt; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; padding: var(--a-2) var(--a-3); border-top: 0; background: var(--c-grund); font-weight: 500; line-height: 1.4; }
.zeitleiste li.wir { grid-column: 1; }
.zeitleiste li.sie { grid-column: 2; background: var(--c-navy); color: var(--c-weiss); }
.zeitleiste b { display: block; font: 600 var(--t-mess)/var(--zh-mess) var(--f-text); color: var(--vordergrund-2); }
.zeitleiste b::before { content: counter(schritt, decimal-leading-zero) "  "; white-space: pre; color: var(--c-orange-tief); }
.rollen-liste.zeitleiste .sie b { color: var(--c-text-hell); }
.zeitleiste .sie b::before { color: var(--c-orange); }
.zeitleiste .wir + .sie, .zeitleiste .sie + .wir { margin-top: var(--a-4); }
.zeitleiste .wir + .sie::before, .zeitleiste .sie + .wir::before { content: ""; position: absolute; bottom: 100%; height: var(--a-5); width: calc(100% + 16px); pointer-events: none; transition: clip-path var(--d-4) var(--kurve) .2s; }
.zeitleiste .wir + .sie::before { left: calc(-50% - 16px); background: linear-gradient(var(--c-orange), var(--c-orange)) left top / 2px 50% no-repeat, linear-gradient(var(--c-orange), var(--c-orange)) left center / 100% 2px no-repeat, linear-gradient(var(--c-orange), var(--c-orange)) right bottom / 2px 50% no-repeat; }
.zeitleiste .sie + .wir::before { left: 50%; background: linear-gradient(var(--c-orange), var(--c-orange)) right top / 2px 50% no-repeat, linear-gradient(var(--c-orange), var(--c-orange)) left center / 100% 2px no-repeat, linear-gradient(var(--c-orange), var(--c-orange)) left bottom / 2px 50% no-repeat; }
.js .zeitleiste.zeigt .wir + .sie::before { clip-path: inset(0 100% 0 0); }
.js .zeitleiste.zeigt .sie + .wir::before { clip-path: inset(0 0 0 100%); }
.js .zeitleiste.zeigt.ist-da li::before { clip-path: inset(0 0 0 0); }

/* 11. Einblendungen beim Scrollen */
.js .zeigt { transition: opacity var(--d-4) var(--kurve), translate var(--d-4) var(--kurve); }
.js .zeigt:not(.ist-da):not(.zeitleiste) { translate: 0 24px; }
@media (prefers-reduced-motion: reduce) {
  .js .zeigt:not(.ist-da):not(.zeitleiste) { opacity: 1; translate: none; }
  .js .zeigt, .leitlinie .zug, .bereit-weiter, .zeitleiste li::before { transition: none; }
  .js .zeitleiste.zeigt li::before { clip-path: none; }
  .hero > img { translate: none !important; }
}
.js .karte.zeigt, .js .system.zeigt, .js .messpunkt.zeigt { transition-property: opacity, translate, transform, background-color; transition-duration: var(--d-4), var(--d-4), var(--d-3), var(--d-2); transition-timing-function: var(--kurve); }