/* IPEK Entwurf 5: Seitenaufbau. Alle Werte aus tokens.css. */

/* ---------- Rücksetzen (Browser-Standardwerte liegen außerhalb der Skala) ---------- */
ul, ol, dl, dd, figure, fieldset, legend, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-inline-size: 0; }
button, input, select, textarea { font: inherit; font-size: var(--t-text); color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 0; text-align: left; font-weight: inherit; }
dialog { padding: 0; border: 0; color: inherit; max-width: none; max-height: none; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Rahmen der Seite ---------- */
.huelle { width: min(100% - 2 * var(--rand), var(--rahmen-max)); }
.huelle--platz { display: grid; grid-template-columns: minmax(0, 1fr); }
.huelle--platz > * { grid-column: 1; }
@media (min-width: 1200px) {
  .huelle--platz { grid-template-columns: minmax(0, 1fr) var(--leiste); column-gap: var(--a-6); }
}

.entwurf { background: var(--c-grund-2); color: var(--vordergrund-2); padding: var(--a-1) var(--rand); font-size: var(--t-mess); line-height: var(--zh-mess); }
.entwurf span { display: block; width: min(100%, var(--rahmen-max)); margin-inline: auto; }

/* ---------- Knopf: Giebel-Ecke oben rechts, Ladestrich am Ende ---------- */

/* Maßknopf (Text): Maßlinie mit Endmarken, fährt beim Überfahren aus */
.massknopf { position: relative; display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: 0 0 var(--a-1); font: 600 var(--t-text)/1.2 var(--f-titel); color: var(--marke); text-decoration: none; cursor: pointer; white-space: nowrap; }
.massknopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 5px; border-inline: var(--haar) solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% var(--haar) no-repeat; transform-origin: left; transform: scaleX(.35); transition: transform var(--d-3) var(--kurve), color var(--d-2) var(--kurve); }
.massknopf:hover::after, .massknopf:focus-visible::after { transform: scaleX(1); color: var(--signal-text); }
.dunkel .massknopf { color: var(--c-weiss); }
.dunkel .massknopf:hover::after, .dunkel .massknopf:focus-visible::after { color: var(--c-orange); }

/* ---------- Bausteine ---------- */
.pegel { display: inline-flex; align-items: flex-end; gap: var(--pegel-fuge); height: 16px; flex: none; color: var(--c-navy); }
.pegel i { display: block; width: var(--pegel-b); background: currentColor; opacity: .3; transition: background-color var(--d-2) var(--kurve), opacity var(--d-2) var(--kurve); }
.pegel i:nth-child(1) { height: 8px; } .pegel i:nth-child(2) { height: 11px; } .pegel i:nth-child(3) { height: 14px; } .pegel i:nth-child(4) { height: 16px; }
.pegel i.an { background: var(--c-orange); opacity: 1; }
.plakette { display: inline-grid; gap: 2px; padding: var(--a-2) var(--a-5) var(--a-2) var(--a-3); background: var(--c-orange); color: var(--c-navy); border-radius: var(--r-s) var(--r-giebel-s) var(--r-s) var(--r-s); }
.plakette b { font: 600 var(--t-h4)/1.1 var(--f-titel); font-variant-numeric: tabular-nums; }
.plakette span { font-size: var(--t-mess); letter-spacing: var(--lw-mess); text-transform: uppercase; font-weight: 600; line-height: var(--zh-mess); }
.masslinie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--a-3); color: var(--vordergrund-2); }
.masslinie::before, .masslinie::after { content: ""; height: 9px; background: linear-gradient(currentColor, currentColor) center / 100% var(--haar) no-repeat; }
.masslinie::before { border-left: var(--haar) solid currentColor; } .masslinie::after { border-right: var(--haar) solid currentColor; }
.dunkel .masslinie { color: var(--c-text-hell); }
.waerme { background: linear-gradient(var(--c-orange), var(--c-orange)) left 0 bottom 0.06em / 100% 0.12em no-repeat; }
.sym { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Dezente Grafik für Flächen: Giebel-Linien (Dachneigung 35 Grad) und Wärme-Wellen aus dem Logo */
.grafik { position: relative; isolation: isolate; }
.grafik::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; }
.grafik--giebel::before { right: 0; top: 0; width: min(60%, 720px); height: 100%; 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='.09'%3E%3Cpath d='M40 360V252L360 28l320 224v108M120 360V294L360 126l240 168v66M200 360v-24l160-112 160 112v24'/%3E%3C/svg%3E"); background-position: right top; background-size: contain; }
.dunkel.grafik--giebel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 360' fill='none' stroke='%23FFFFFF' stroke-opacity='.08'%3E%3Cpath d='M40 360V252L360 28l320 224v108M120 360V294L360 126l240 168v66M200 360v-24l160-112 160 112v24'/%3E%3C/svg%3E"); }
.grafik--wellen::before { right: var(--a-4); bottom: var(--a-4); width: 64px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 48' fill='none' stroke='%23F07225' stroke-opacity='.3' stroke-width='1.5'%3E%3Cpath d='M2 10c16-8 30 8 46 0s30-8 46 0M2 24c16-8 30 8 46 0s30-8 46 0M2 38c16-8 30 8 46 0s30-8 46 0'/%3E%3C/svg%3E"); background-size: contain; }
.grafik--raster::before { inset: 0; background-image: radial-gradient(var(--c-linie) 1px, transparent 1px); background-size: 24px 24px; background-repeat: repeat; opacity: .6; }

/* ---------- Kopf: Mess-Schiene ---------- */
.kopf { position: sticky; top: 0; z-index: var(--z-kopf); background: var(--flaeche); border-bottom: var(--rand-trenner); }
.kopf-innen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--a-7); align-items: stretch; height: 80px; }
.marke { position: relative; width: 112px; }
.marke-platte { position: absolute; left: 0; top: 0; display: block; padding: var(--a-2) var(--a-3) var(--a-3); background: var(--flaeche); border: var(--rand-trenner); border-top: 0; border-radius: 0 0 var(--r-giebel) var(--r-m); }
.marke-platte img { width: 88px; height: auto; }
.schiene { position: relative; display: flex; justify-content: space-between; align-items: stretch; }
.schiene a { display: grid; align-content: center; gap: var(--a-1); color: var(--vordergrund-2); text-decoration: none; white-space: nowrap; transition: color var(--d-2) var(--kurve); }
.schiene a b { font: 500 var(--t-h4)/1.1 var(--f-titel); letter-spacing: var(--lw-titel); }
.schiene a .mess { font-weight: 400; transition: color var(--d-2) var(--kurve); }
.schiene a:hover, .schiene a[aria-current="true"] { color: var(--marke); }
.schiene a[aria-current="true"] .mess { color: var(--signal-text); }
.schiene-weg, .laeufer { position: absolute; left: 0; bottom: -1px; transform-origin: left; pointer-events: none; }
.schiene-weg { width: 100%; height: 1px; background: var(--c-navy); transform: scaleX(0); transition: transform var(--d-3) var(--kurve); }
.laeufer { width: 100px; height: 3px; background: var(--c-orange); transform: scaleX(0); transition: transform var(--d-3) var(--kurve); }
.kopf-ruf { display: flex; align-items: center; }
.ruf { display: grid; gap: 2px; text-decoration: none; color: var(--marke); padding: var(--a-2) 0; }
.ruf b { font: 600 var(--t-h4)/1.1 var(--f-titel); font-variant-numeric: tabular-nums; }
.menue-knopf { display: none; align-self: center; }

/* Menü-Blatt (bis 1199 px): senkrechte Schiene */
.blatt-menue { position: fixed; inset: 0; width: 100%; height: 100%; background: var(--flaeche); z-index: var(--z-overlay); overflow: auto; }
.blatt-menue::backdrop { background: var(--c-weiss); }
.blatt-menue-innen { display: grid; gap: var(--a-6); padding: var(--a-4) var(--rand) var(--a-7); }
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; }
.blatt-kopf img { width: 56px; height: auto; }
.rund-knopf { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-s) var(--r-giebel-s) var(--r-s) var(--r-s); background: var(--c-grund-2); color: var(--c-navy); }
.skala-senkrecht { position: relative; display: grid; border-left: var(--haar) solid var(--c-linie); }
.skala-senkrecht a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-4); padding: var(--a-3) 0 var(--a-3) var(--a-5); min-block-size: 3.5rem; font: 500 var(--t-h3)/1.2 var(--f-titel); color: var(--marke); text-decoration: none; }
.skala-senkrecht a .mess { font-weight: 400; }
.skala-senkrecht a[aria-current="true"] { box-shadow: -3px 0 0 var(--c-orange); }
.wertpaare { display: grid; gap: var(--a-2); }
.wertpaare a { display: grid; gap: 2px; padding: var(--a-2) 0; color: var(--marke); text-decoration: none; min-block-size: 2.75rem; }
.wertpaare a b { font: 600 var(--t-h4)/1.1 var(--f-titel); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(80vh, 720px); display: grid; align-items: end; color: var(--c-weiss); background: var(--c-navy-3); overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-platte { position: relative; margin-block: var(--a-9) var(--a-8); width: min(100%, 760px); padding: var(--a-6) var(--a-7) var(--a-6) var(--a-6); background: var(--c-navy); border-radius: var(--r-m) var(--r-giebel-l) var(--r-m) var(--r-m); display: grid; gap: var(--a-5); }
.hero-platte h1 { color: var(--c-weiss); }
.hero-platte p { color: var(--c-text-hell); font-size: var(--t-h4); line-height: 1.4; max-width: none; }
.hero-fuss { display: flex; flex-wrap: wrap; gap: var(--a-5); align-items: center; }
.hero-mass { position: absolute; right: var(--kante); top: var(--a-6); bottom: var(--a-6); width: 9px; border-block: var(--haar) solid rgba(255,255,255,.7); background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) center / 1px 100% no-repeat; }
.bildhinweis { position: absolute; right: calc(var(--kante) + var(--a-5)); bottom: var(--a-4); font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--c-weiss); background: rgba(2, 36, 64, .72); padding: var(--a-1) var(--a-2); border-radius: var(--r-s); }

/* ---------- Sektionen: Dichte-Stufen und Übergänge ---------- */
.sek { padding-block: var(--sek-normal); position: relative; }
.sek--weit { padding-block: var(--sek-weit); }
.sek--dicht { padding-block: var(--sek-dicht); }
.sek--grund { background: var(--flaeche-2); }
.sek--tief { background: var(--flaeche-tief); color: var(--c-weiss); }
.sek--tief h2, .sek--tief h3, .sek--tief h4 { color: var(--c-weiss); }
.sek-inhalt { display: grid; gap: var(--kopf-zu-inhalt); }
.kopfblock { display: grid; gap: var(--a-4); }
.kopfblock p { color: var(--vordergrund-2); }
.sek--tief .kopfblock p { color: var(--c-text-hell); }
/* Giebel-Übergang: die dunkle Fläche steigt an der linken Inhaltskante mit 35 Grad an */
.giebel-oben::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; background: inherit; pointer-events: none;
  clip-path: polygon(0 100%, var(--kante) 100%, calc(var(--kante) + 45.7px) 0, 100% 0, 100% 100%); }
.giebel-unten { z-index: 1; }
.giebel-unten > .giebel-fuss { position: absolute; left: 0; right: 0; top: 100%; height: 32px; background: inherit; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--kante) + 45.7px) 100%, var(--kante) 0); }
.giebel-unten + .sek { padding-top: var(--a-9); }

/* ---------- Leistungen ---------- */

/* Detail-Ebene */
.ebene { width: min(100% - 2 * var(--rand), 560px); padding: var(--a-6); background: var(--flaeche); border-radius: var(--r-m) var(--r-giebel) var(--r-m) var(--r-m); }
.ebene::backdrop { background: rgba(2, 36, 64, .72); }
.ebene-innen { display: grid; gap: var(--a-4); justify-items: start; }
.ebene-kopf { display: flex; justify-content: space-between; align-items: start; gap: var(--a-4); width: 100%; }
.ebene-kopf img { width: 64px; height: 64px; }
.ebene p { color: var(--vordergrund-2); }

/* ---------- Haus: Zeichnungsblatt ---------- */

/* ---------- Vergleich ---------- */
.vergleich-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--a-6); align-items: start; }
.vergleich { background: var(--flaeche); border-radius: var(--r-m) var(--r-giebel) var(--r-m) var(--r-m); padding: var(--a-4) var(--a-5) var(--a-5); }
.vergleich th, .vergleich td { padding: var(--a-3) var(--a-3) var(--a-3) 0; vertical-align: top; }
.vergleich thead th { font: 600 var(--t-h4)/1.2 var(--f-titel); color: var(--marke); vertical-align: bottom; }
.vergleich thead img { width: 48px; height: 48px; margin-bottom: var(--a-2); }
.vergleich tbody tr { border-top: var(--rand-trenner); }
.vergleich tbody th { font-size: var(--t-mess); line-height: var(--zh-mess); font-weight: 600; color: var(--vordergrund-2); padding-top: var(--a-4); }
.bildpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4); }
.bildpaar figure { display: grid; gap: var(--a-2); }
.bildpaar img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-m) var(--r-giebel) var(--r-m) var(--r-m); }
.bildpaar figcaption, .bildzeile { font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--vordergrund-2); }
.bildpaar + p { grid-column: 2; }
.vergleich-seite { display: grid; gap: var(--a-4); }

/* ---------- Region ---------- */
.region { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--a-6); align-items: start; }
.orte-tafel th, .orte-tafel td { border-top: var(--rand-trenner); }
.orte-tafel thead th { border-top: 0; font-size: var(--t-mess); line-height: var(--zh-mess); font-weight: 600; color: var(--vordergrund-2); padding-bottom: var(--a-2); }
.orte-tafel td:last-child, .orte-tafel th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orte-tafel button { display: flex; align-items: center; width: 100%; min-block-size: 2.75rem; text-align: left; font-weight: 500; color: var(--marke); }
.orte-tafel tr[aria-selected="true"] td { background: var(--flaeche-2); box-shadow: inset 0 -2px 0 var(--c-orange); }
.orte-tafel tr.ist-nah td { background: var(--flaeche-2); }
.gebiet { position: relative; display: grid; gap: var(--a-3); }
.gebiet-flaeche { position: relative; }
.gebiet-flaeche svg { display: block; width: 100%; height: auto; overflow: hidden; }
.gebiet .zelle { fill: var(--c-grund-2); stroke: var(--c-weiss); stroke-width: 2; transition: fill var(--d-2) var(--kurve); }
.sek--grund .gebiet .zelle { fill: var(--c-weiss); stroke: var(--c-grund); }
.gebiet .zelle.ist-nah { fill: var(--c-linie); }
.gebiet .zelle.ist-wahl { fill: var(--c-navy); }
.gebiet .ring { fill: none; stroke: var(--c-linie-fest); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.gebiet .strahl { stroke: var(--c-orange-tief); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ort { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; color: var(--c-navy); }
.ort i { display: block; width: 12px; height: 12px; border-radius: var(--r-kreis); background: var(--c-weiss); outline: 2px solid var(--c-navy); transition: background-color var(--d-2) var(--kurve), transform var(--d-2) var(--kurve); }
.ort span { position: absolute; white-space: nowrap; font: 500 var(--t-text)/1.1 var(--f-text); color: var(--c-text); pointer-events: none; transition: opacity var(--d-2) var(--kurve); }
.ort[data-lage="o"] span { bottom: 32px; left: 50%; transform: translateX(-50%); }
.ort[data-lage="u"] span { top: 32px; left: 50%; transform: translateX(-50%); }
.ort[data-lage="l"] span { right: 34px; }
.ort[data-lage="r"] span { left: 34px; }
.ort:hover i, .ort:focus-visible i, .ort.ist-nah i { background: var(--c-orange); transform: scale(1.5); }
.ort[aria-pressed="true"] i { background: var(--c-orange); outline-color: var(--c-weiss); transform: scale(1.5); }
.ort[aria-pressed="true"] span { color: var(--c-weiss); font-weight: 600; }
.gebiet-flaeche.hat-nah .ort:not(.ist-nah):not([aria-pressed="true"]) { opacity: .4; }
.start { position: absolute; transform: translate(-12px, -100%); pointer-events: none; z-index: 2; }
.start::after { content: ""; position: absolute; left: 6px; top: 100%; width: 12px; height: 12px; margin-top: -6px; border-radius: var(--r-kreis); background: var(--c-orange); outline: 2px solid var(--c-navy); }
.ring-zahl { position: absolute; transform: translate(-50%, -50%); padding: 0 var(--a-1); font: 400 var(--t-text)/1.2 var(--f-text); color: var(--vordergrund-2); background: var(--flaeche); pointer-events: none; white-space: nowrap; }
.ablesung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-3) var(--a-5); min-block-size: 3.5rem; }
.ablesung p { color: var(--vordergrund-2); font-size: var(--t-mess); line-height: var(--zh-mess); }

/* ---------- Vorbereitung ---------- */
.vorbereitung { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--a-6); align-items: center; }
.messpunkte { display: grid; gap: var(--a-3); }
.messpunkt { display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; gap: var(--a-4); align-items: center; padding: var(--a-4); background: var(--flaeche); border-radius: var(--r-m) var(--r-giebel) var(--r-m) var(--r-m); cursor: pointer; transition: box-shadow var(--d-2) var(--kurve); }
.messpunkt img { width: 48px; height: 48px; }
.messpunkt b { display: block; font: 600 var(--t-h4)/1.2 var(--f-titel); color: var(--marke); }
.messpunkt span { display: block; color: var(--vordergrund-2); }
.messpunkt input { width: 24px; height: 24px; accent-color: var(--c-navy); }
.messpunkt:has(input:checked) { box-shadow: inset 0 0 0 1px var(--c-navy); }
.bild-mass { position: relative; display: grid; gap: var(--a-3); }
.bild-mass img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m) var(--r-giebel-l) var(--r-m) var(--r-m); }

/* ---------- Anfrage ---------- */
.anfrage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--a-6); align-items: start; }
.anfrage-seite { display: grid; gap: var(--a-5); }
.anfrage-seite img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m) var(--r-giebel-l) var(--r-m) var(--r-m); }
.daten div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--a-3); padding-block: var(--a-3); border-top: var(--rand-trenner); }
.daten dt { font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--vordergrund-2); padding-top: var(--a-1); }
.daten dd { font-weight: 600; }
.formular { display: grid; gap: var(--a-5); padding: var(--a-6); background: var(--flaeche-2); border-radius: var(--r-m) var(--r-giebel) var(--r-m) var(--r-m); }
.formular-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-4); padding-bottom: var(--a-4); border-bottom: var(--rand-trenner); }
.formular-kopf h2 { font-size: var(--t-h3); }
.fortschritt { height: 2px; background: var(--c-grund-3); margin-top: calc(-1 * var(--a-5)); }
.fortschritt i { display: block; height: 100%; width: 100%; background: var(--c-orange); transform-origin: left; transform: scaleX(.25); transition: transform var(--d-3) var(--kurve); }
.schritt { display: grid; gap: var(--a-5); }
.schritt > legend, .gruppe > legend { font: 600 var(--t-h4)/1.2 var(--f-titel); color: var(--marke); margin-bottom: var(--a-3); }
.gruppe { display: grid; }
.wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); }
.wahl label { display: flex; gap: var(--a-3); align-items: center; min-block-size: 3.5rem; padding: var(--a-3) var(--a-4); background: var(--c-weiss); border: var(--rand-feld); border-radius: var(--r-m); cursor: pointer; transition: border-color var(--d-2) var(--kurve), box-shadow var(--d-2) var(--kurve); }
.wahl label:hover { border-color: var(--c-navy); }
.wahl input { accent-color: var(--c-navy); width: 20px; height: 20px; flex: none; }
.wahl label:has(input:checked) { border-color: var(--c-navy); box-shadow: inset 0 0 0 1px var(--c-navy); }
.feld { display: grid; gap: var(--a-2); }
.feld label { font-weight: 600; }
.feld input, .feld select, .feld textarea { width: 100%; min-block-size: 3rem; padding: var(--a-3) var(--a-4); border: var(--rand-feld); border-radius: var(--r-s); background: var(--c-weiss); color: var(--vordergrund); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline-offset: 0; border-color: var(--c-navy); }
.feld .hilfe { font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--vordergrund-2); }
.feld[data-fehler] input { border-color: var(--c-orange-tief); }
.feld[data-fehler] .hilfe { color: var(--c-orange-tief); }
.felder-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4); }
.zusammen div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--a-3); padding-block: var(--a-2); border-top: var(--rand-trenner); }
.zusammen dt { font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--vordergrund-2); padding-top: var(--a-1); }
.zusammen dd { font-weight: 600; }
.formular-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--a-4); padding-top: var(--a-4); border-top: var(--rand-trenner); }
.formular-hinweis { font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--vordergrund-2); max-width: none; }
.meldung { display: grid; gap: var(--a-3); padding: var(--a-4); background: var(--c-weiss); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--c-navy); }
.meldung div { display: flex; flex-wrap: wrap; gap: var(--a-5); }

/* ---------- Fragen ---------- */
.fragen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--a-6); align-items: start; }
.fragen-liste { display: grid; }
.fragen-liste details { border-top: var(--rand-trenner); }
.fragen-liste details:last-of-type { border-bottom: var(--rand-trenner); }
.fragen-liste summary { display: flex; justify-content: space-between; align-items: center; gap: var(--a-4); min-block-size: 3.5rem; padding-block: var(--a-3); font: 600 var(--t-h4)/1.2 var(--f-titel); color: var(--marke); list-style: none; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary .sym { transition: transform var(--d-2) var(--kurve); }
.fragen-liste details[open] summary .sym { transform: rotate(180deg); }
.fragen-liste details p { padding-bottom: var(--a-4); color: var(--vordergrund-2); }
.fragen-liste .massknopf { justify-self: start; margin-top: var(--a-4); }
.rollen { display: grid; gap: var(--a-4); padding: var(--a-5); background: var(--flaeche); border-radius: var(--r-m) var(--r-giebel) var(--r-m) var(--r-m); }
.rollen-bahnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-4); row-gap: var(--a-2); }
.rollen-bahnen > b { font: 600 var(--t-mess)/var(--zh-mess) var(--f-text); color: var(--vordergrund-2); padding-bottom: var(--a-2); border-bottom: var(--rand-trenner); }
.rolle { padding: var(--a-3); border-radius: var(--r-s); background: var(--flaeche-2); font-weight: 500; line-height: 1.4; }
.rolle--wir { grid-column: 1; }
.rolle--sie { grid-column: 2; background: var(--c-navy); color: var(--c-weiss); }
.rollen p { font-size: var(--t-mess); line-height: var(--zh-mess); color: var(--vordergrund-2); }

/* ---------- Fuß ---------- */
.fuss { position: relative; background: var(--flaeche-tief); color: var(--c-text-hell); padding-block: var(--a-7); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--a-6); }
.fuss h2 { font-size: var(--t-h3); color: var(--c-weiss); }
.fuss-block { display: grid; gap: var(--a-2); align-content: start; }
.fuss a { color: var(--c-weiss); }
.fuss .wertpaare a { color: var(--c-weiss); }
.fuss-klein { font-size: var(--t-mess); line-height: 1.6; max-width: none; }
.fuss-unten { margin-top: var(--a-6); padding-top: var(--a-4); border-top: var(--haar) solid rgba(255,255,255,.28); }

/* ---------- Messblatt (mitlaufend) ---------- */

/* Untere Leiste (bis 1199 px) */
.unten { display: none; }

/* ---------- Einblendung an Abschnittsanfängen ---------- */
.js .kopfblock { transition: transform var(--d-4) var(--kurve); }
.js .kopfblock.wartet { transform: translateY(16px); }

/* ---------- Bis 1199: Menü-Knopf, untere Leiste ---------- */
@media (max-width: 1199px) {
  .schiene, .kopf-ruf { display: none; }
  .menue-knopf { display: inline-flex; }
  .kopf-innen { grid-template-columns: auto 1fr auto; }
  .kopf-innen > .menue-knopf { grid-column: 3; }
}
@media (max-width: 960px) {
  .zeichnung, .vergleich-raster, .region, .vorbereitung, .anfrage, .fragen { grid-template-columns: minmax(0, 1fr); }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
  .bildpaar + p { grid-column: 1; }
}
@media (max-width: 760px) {
  .kopf { position: static; }
  .kopf-innen { height: 64px; }
  .marke { width: 64px; }
  .marke-platte { position: static; padding: var(--a-2) 0; border: 0; border-radius: 0; }
  .marke-platte img { width: 48px; }
  .hero { min-height: min(80vh, 620px); }
  .hero-platte { padding: var(--a-5) var(--a-4); margin-block: var(--a-9) var(--a-5); }
  .hero-mass { display: none; }
  .bildhinweis { right: var(--rand); bottom: auto; top: var(--a-3); }
  .vergleich { padding: var(--a-3) var(--a-4) var(--a-4); overflow-x: auto; }
  .vergleich thead th { font-size: var(--t-text); }
  .ort { pointer-events: none; }
  .ort span { display: none; }
  .ort[aria-pressed="true"] span { display: block; }
  .ring-zahl { font-size: var(--t-mess); }
  .wahl, .felder-2 { grid-template-columns: minmax(0, 1fr); }
  .formular { padding: var(--a-5) var(--a-4); }
  .messpunkt { grid-template-columns: 48px minmax(0, 1fr) 24px; gap: var(--a-3); }
  .daten div, .zusammen div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- Nachträge ---------- */
.gebiet .zelle { cursor: pointer; }
.gebiet { grid-template-columns: minmax(0, 1fr) 200px; column-gap: var(--a-5); align-items: start; }
.gebiet-flaeche { grid-row: span 2; }
.ablesung { grid-column: 2; grid-row: 2; display: grid; align-content: start; gap: var(--a-2); }
.region-bild { grid-column: 2; grid-row: 1; display: grid; gap: var(--a-2); }
.region-bild img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-m) var(--r-giebel) var(--r-m) var(--r-m); }
.ablesung b { font: 600 var(--t-h4)/1.2 var(--f-titel); color: var(--marke); }
.ort.ist-wahl i { background: var(--c-orange); outline-color: var(--c-weiss); transform: scale(1.5); }
.ort.ist-wahl span { color: var(--c-weiss); background: var(--c-navy); padding: var(--a-1) var(--a-2); border-radius: var(--r-s); font-weight: 600; z-index: 3; }
.gebiet-flaeche.hat-nah .ort:not(.ist-nah):not(.ist-wahl) { opacity: .4; }
.ort { pointer-events: none; transition: opacity var(--d-2) var(--kurve); }
.messpunkte-block { display: grid; gap: var(--a-5); }
.heute legend { font: 600 var(--t-h4)/1.2 var(--f-titel); color: var(--marke); margin-bottom: var(--a-3); }
.heute-wahl { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.haus-info { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
.haus-info-punkt { 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); }
.haus-info-linie { position: absolute; left: 0; top: 0; width: 48px; height: 1px; background: var(--c-weiss); }
.haus-info-karte { position: absolute; left: 48px; top: -32px; width: 288px; display: grid; gap: var(--a-2); padding: var(--a-4); background: var(--c-weiss); color: var(--c-text); border-radius: var(--r-m) var(--r-giebel) var(--r-m) var(--r-m); transform: translateY(var(--schub, 0px)); }
.haus-info.links .haus-info-linie { left: -48px; }
.haus-info.links .haus-info-karte { left: auto; right: 48px; }
.sek--tief .haus-info-karte h3 { color: var(--c-navy); font-size: var(--t-h4); }
.haus-info-karte p { color: var(--c-text-2); }
.haus-info-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--a-3); padding-top: var(--a-2); }
.dunkel .haus-info-karte .knopf { background: var(--c-navy); color: var(--c-weiss); }
.dunkel .haus-info-karte .knopf:hover, .dunkel .haus-info-karte .knopf:focus-visible { background-color: var(--c-navy-2); }
.dunkel .haus-info-karte .knopf::after { background: linear-gradient(var(--c-orange), var(--c-orange)) left / var(--fort) 100% no-repeat, color-mix(in srgb, currentColor 35%, transparent); }
.dunkel .haus-info-karte .massknopf { color: var(--c-navy); }
.dunkel .haus-info-karte .massknopf:hover::after { color: var(--c-orange-tief); }
.dunkel .haus-info-karte :focus-visible { outline-color: var(--fokus); }
@media (max-width: 1199px) { .gebiet { grid-template-columns: minmax(0, 1fr); } .gebiet-flaeche, .ablesung, .region-bild { grid-column: 1; grid-row: auto; } .region-bild img { aspect-ratio: 16 / 9; } }
@media (max-width: 760px) {
  .haus-info { left: var(--a-2); right: var(--a-2); bottom: var(--a-2); top: auto; width: auto; height: auto; transform: none !important; }
  .haus-info-punkt, .haus-info-linie { display: none; }
  .haus-info-karte, .haus-info.links .haus-info-karte { position: static; width: auto; transform: none; }
}
.massknopf { min-inline-size: 2.75rem; }
@media (max-width: 760px) {
  .vergleich td, .vergleich thead th { font-size: var(--t-mess); line-height: 1.4; }
  .vergleich th, .vergleich td { padding-right: var(--a-2); }
  .vergleich thead img { width: 32px; height: 32px; }
}
.karte p { text-wrap: balance; }
@media (max-width: 760px) { .giebel-unten + .sek { padding-top: var(--a-8); } }
.daten dd a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.daten dd { align-self: center; }
.start { transform: translate(-50%, 16px); padding: var(--a-1) var(--a-4) var(--a-1) var(--a-3); }
.start b { font-size: var(--t-text); white-space: nowrap; }
.start::after { left: 50%; top: auto; bottom: 100%; margin: 0 0 10px -6px; }
.ort.ohne:not(.ist-wahl) span { display: none; }
.gebiet { grid-template-columns: minmax(0, 1fr) 240px; }
.gebiet-flaeche { grid-column: 1 / -1; grid-row: 1; }
.ablesung { grid-column: 1; grid-row: 2; }
.region-bild { grid-column: 2; grid-row: 2; }
.region-bild img { aspect-ratio: 16 / 9; }
@media (max-width: 1199px) { .gebiet { grid-template-columns: minmax(0, 1fr); } .gebiet-flaeche, .ablesung, .region-bild { grid-column: 1; grid-row: auto; } }
.ort span { padding: 0 var(--a-1); border-radius: var(--r-s); background: color-mix(in srgb, var(--c-grund-2) 80%, transparent); }
.haus-info-linie { background: var(--c-orange); }
.haus-info.schmal { left: var(--a-2); right: var(--a-2); bottom: var(--a-2); top: auto; width: auto; height: auto; transform: none !important; }
.haus-info.schmal .haus-info-punkt, .haus-info.schmal .haus-info-linie { display: none; }
.haus-info.schmal .haus-info-karte { position: static; width: auto; transform: none; }
.messblatt { grid-template-columns: minmax(0, 1fr); }
.messblatt .knopf { padding-inline: var(--a-4); gap: var(--a-3); font-size: var(--t-mess); min-inline-size: 0; }
.knopf:hover, .knopf:focus-visible { --fort: 100%; }
.haus-info-linie { height: var(--strich-h); top: -1px; }
.haus-info.darunter .haus-info-linie { left: -1px; top: 0; width: var(--strich-h); height: 48px; }
.haus-info.darunter .haus-info-karte { left: -192px; top: 48px; width: 384px; transform: translate(var(--quer, 0px), var(--schub, 0px)); }