/* Mittagsdach. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, Bühnen und der Plan.
   Formsystem: Blätter, Bilder und Zeichnungen eckig, Bedienelemente als Pille. */
:root {
  --sc-canvas:     #EEF1EE;
  --sc-surface:    #F8FAF7;
  --sc-ink:        #182221;
  --sc-ink-soft:   #475553;
  --sc-accent:     #B8431D;
  --sc-accent-ink: #FFF8F3;
  --sc-font-display: "Urbanist", system-ui, sans-serif;
  --sc-font-text:    "Source Sans 3", system-ui, sans-serif;
  --sc-font-mono:    "Source Sans 3", system-ui, sans-serif;
  --sc-shadow-color: 150 12% 32%;
  --modul: #1B2533;
  --modul-rahmen: #7E8B98;
  --dach: #E8DDD6;
  --nacht: #131A1C;
  --nacht-ink: #E4EBE8;
  --nacht-soft: #A7B4B1;
  --kopf-h: 46px;
  --rand-i: 8px;
  color-scheme: light;
}
html { background: var(--sc-canvas); }
[hidden] { display: none !important; }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 3px; }

.sc-display { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.02; }
.sc-display--xl { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.8rem); }
.sc-display--lg { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.7rem); line-height: 1.05; }
.sc-display--md { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.5rem); line-height: 1.08; }
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.6; }
.sc-lede { font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -0.005em; }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.2rem, 1.3rem + 5.4vw, 3rem); }
  .sc-display--lg { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.3rem); }
  .sc-display--md { font-size: clamp(1.3rem, 1rem + 1.8vw, 1.6rem); }
  .sc-lede { font-size: 1.12rem; }
}
.vorzeile {
  font: 600 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-accent);
}
.kleingedruckt { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ---------- Knopf und Textlink ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent); box-shadow: var(--sc-e2);
}
/* Feines Mosaik im Knopf, über das alle paar Sekunden ein Lichtstreif läuft. */
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .3) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 6px);
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
@media (hover: hover) and (pointer: fine) {
  .knopf--voll:hover { background: #A63A16; transform: translateY(-2px); box-shadow: var(--sc-e3); }
}
.textlink {
  color: var(--sc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-decoration-color: var(--sc-accent); } }

/* ---------- Zeichnungsrahmen und Kopf (Feldeinteilung) ---------- */
.rahmen {
  position: fixed; inset: var(--rand-i); z-index: 55; pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent);
  transition: border-color 300ms var(--sc-ease-out);
}
.rahmen.ist-dunkel { border-color: color-mix(in oklab, var(--nacht-ink) 22%, transparent); }
.kopf {
  position: fixed; top: var(--rand-i); left: var(--rand-i); right: var(--rand-i); z-index: var(--sc-z-chrome);
  height: var(--kopf-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent);
  color: var(--sc-ink);
  transition: background-color 300ms var(--sc-ease-out), color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out);
}
.kopf.ist-dunkel { background: color-mix(in oklab, var(--nacht) 94%, transparent); color: var(--nacht-ink); border-color: color-mix(in oklab, var(--nacht-ink) 22%, transparent); }
.wortmarke {
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
  font: 800 1.12rem/1 var(--sc-font-display); letter-spacing: -0.01em; color: inherit; text-decoration: none;
  border-right: 1px solid color-mix(in oklab, currentColor 22%, transparent);
}
.wortmarke svg { width: 26px; height: 19px; }
.wortmarke__modul { fill: var(--sc-accent); }
.felder { display: flex; align-items: stretch; min-width: 0; }
.felder ol { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; }
.felder li { flex: 1; padding: 0 4px; border-right: 1px solid color-mix(in oklab, currentColor 16%, transparent); }
.felder a {
  position: relative; display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 0 8px; font-size: var(--sc-t-sm); font-weight: 500; color: inherit; text-decoration: none;
  opacity: .72; transition: opacity 160ms var(--sc-ease-out);
}
/* Die Teilungsmarke am oberen Rand eines Feldes: dünn, im aktuellen Feld als Balken. */
.felder a::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 1px; height: 7px; translate: -50% 0;
  background: currentColor; opacity: .5;
  transition: background-color 220ms var(--sc-ease-out), opacity 220ms var(--sc-ease-out);
}
.felder a.ist-hier { opacity: 1; font-weight: 700; }
.felder a.ist-hier::before { width: calc(100% - 16px); height: 3px; background: var(--sc-accent); opacity: 1; }
.kopf.ist-dunkel .felder a.ist-hier::before { background: #E07A52; }
@media (hover: hover) and (pointer: fine) { .felder a:hover { opacity: 1; } }
.felder__jetzt { display: none; }
.kopf__link {
  display: flex; align-items: center; padding: 0 18px; color: inherit; font-weight: 700; font-size: var(--sc-t-sm);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
}
@media (max-width: 1180px) { .felder a { font-size: .8rem; padding: 0 4px; } .kopf__link { display: none; } }
@media (max-width: 860px) {
  :root { --rand-i: 0px; --kopf-h: 52px; }
  .rahmen { display: none; }
  .kopf { border-width: 0 0 1px 0; grid-template-columns: auto 1fr; }
  .wortmarke { padding: 0 14px; border-right: 0; }
  .felder { flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 12px; gap: 2px; }
  .felder ol { flex: 0 0 auto; gap: 0; }
  .felder li { flex: 0 0 auto; border: 0; }
  .felder a { width: 26px; height: 22px; padding: 0; opacity: 1; }
  .felder a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .felder a::before { top: 50%; width: 2px; height: 12px; translate: -50% -50%; opacity: .35; }
  .felder a.ist-hier::before { width: 14px; height: 4px; }
  .felder__jetzt { display: block; margin: 0; font: 700 .82rem/1 var(--sc-font-text); letter-spacing: .02em; text-align: right; padding-right: 6px; }
}

/* ---------- Aufmaß (Hero) ---------- */
.aufmass { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; }
.aufmass__bild { position: absolute; inset: -5% 0; }
.aufmass__bild img, .aufmass__kontur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; max-width: none; }
.aufmass__scrim {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 55%, transparent) 26%,
    transparent 46%);
}
.km { fill: none; stroke: var(--sc-accent); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; animation: aufmass 1.8s var(--sc-ease-out) .5s forwards; }
.km--hind { stroke-width: 1.8; animation-delay: 1.4s; animation-duration: 1.2s; }
@keyframes aufmass { to { stroke-dashoffset: 0; } }
.aufmass__notiz { opacity: 0; animation: notiz .8s var(--sc-ease-out) 2.3s forwards; }
.aufmass__notiz path { fill: none; stroke: var(--sc-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.aufmass__notiz text { font: 600 9.5px var(--sc-font-text); fill: var(--sc-ink); paint-order: stroke; stroke: rgb(255 255 255 / .8); stroke-width: 2px; stroke-linejoin: round; }
@keyframes notiz { to { opacity: 1; } }
.aufmass__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: calc(var(--sc-gutter) + 6px); top: calc(var(--kopf-h) + clamp(3rem, 14vh, 9rem));
  width: min(36rem, 40vw);
}
.aufmass__text h1 { max-width: 10ch; }
.aufmass__text .sc-lede { max-width: 30ch; color: var(--sc-ink); }
.aufmass__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: var(--sc-6) !important; }
@media (max-width: 860px) {
  .aufmass { height: auto; min-height: 100svh; padding-bottom: 2rem; }
  .aufmass__bild { inset: auto; position: relative; margin-top: var(--kopf-h); height: 40svh; min-height: 230px; overflow: clip; }
  .aufmass__scrim { display: none; }
  .aufmass__text { position: relative; inset: auto; width: auto; padding: 1.4rem var(--sc-gutter) 0; }
  .aufmass__text h1 { max-width: 12ch; }
  .aufmass__notiz text { font-size: 17px; stroke-width: 3px; }
}

/* ---------- Bühnen mit Plan ---------- */
.buehne {
  background-color: var(--sc-canvas);
  background-image:
    linear-gradient(color-mix(in oklab, var(--sc-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--sc-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}
.buehne__text { display: grid; }
.buehne__text > * { grid-area: 1 / 1; }
.buehne__text .sc-body { margin-top: var(--sc-4); max-width: 40ch; }
.raender > .buehne__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: calc(var(--sc-gutter) + 6px); top: calc(var(--kopf-h) + clamp(3rem, 16vh, 10rem));
  width: min(29rem, 32vw);
}
.plan { margin: 0; position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.plan--raender, .plan--belegung {
  right: calc(var(--sc-gutter) + 6px); top: calc(var(--kopf-h) + var(--rand-i) + 4vh); bottom: 5vh;
  left: calc(var(--sc-gutter) + min(29rem, 32vw) + clamp(2rem, 4vw, 4.5rem));
}
.plan__svg { flex: 0 1 auto; min-height: 0; width: 100%; height: auto; max-height: calc(100% - 3.5rem); overflow: visible; }
.plan__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.plan__legende em { font-style: normal; margin-left: auto; font-variant-numeric: tabular-nums; }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ""; width: 18px; height: 12px; flex: none; }
.lg--rand::before { background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--sc-accent) 70%, transparent) 0 1.5px, transparent 1.5px 5px); outline: 1px dashed var(--sc-accent); }
.lg--sparren::before { height: 0; border-top: 1.5px dashed color-mix(in oklab, var(--sc-ink) 45%, transparent); }
.lg--flaeche::before { background: color-mix(in oklab, var(--sc-accent) 12%, transparent); outline: 1.5px dashed var(--sc-accent); }
.lg--schiene::before { height: 4px; background: #8F99A1; box-shadow: 4px 0 0 -0px #4F5B60 inset; }
.lg--modul::before { width: 12px; height: 18px; background: var(--modul); outline: 1px solid var(--modul-rahmen); }
.lg--frei::before { outline: 1.5px dashed var(--sc-accent); }

/* Der Plan selbst. --k ist der Maßstab (Planeinheiten pro Bildschirmpixel). */
.plan__svg { --k: 1; font-family: var(--sc-font-text); }
.p-dachflaeche { fill: var(--dach); }
.p-ziegellinie { fill: none; stroke: color-mix(in oklab, #8C4A30 22%, transparent); stroke-width: calc(1px * var(--k)); }
.p-kontur { fill: none; stroke: var(--sc-ink); stroke-width: calc(1.7px * var(--k)); stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--a, 1)); }
.p-sparren { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 34%, transparent); stroke-width: calc(1px * var(--k));
  stroke-dasharray: calc(7px * var(--k)) calc(5px * var(--k)); opacity: .7; }
[data-plan="raender"] .p-sparren { opacity: var(--d, 1); }
.p-schrafflinie { stroke: var(--sc-accent); stroke-width: calc(1.1px * var(--k)); opacity: .6; }
.p-rand { opacity: var(--c, 1); }
.p-innen { fill: color-mix(in oklab, var(--sc-accent) 5%, transparent); stroke: var(--sc-accent); stroke-width: calc(1.3px * var(--k));
  stroke-dasharray: calc(6px * var(--k)) calc(4px * var(--k)); }
[data-plan="raender"] .p-innen { opacity: var(--c, 1); fill: color-mix(in oklab, var(--sc-accent) calc(var(--d, 1) * 12%), transparent); }
.p-frei { fill: none; stroke: var(--sc-accent); stroke-width: calc(1.3px * var(--k)); stroke-dasharray: calc(5px * var(--k)) calc(4px * var(--k)); }
.p-schornstein { fill: #59625F; stroke: var(--sc-ink); stroke-width: calc(1px * var(--k)); }
.p-fugen { fill: none; stroke: color-mix(in oklab, var(--dach) 60%, transparent); stroke-width: calc(.9px * var(--k)); }
.p-gaube { fill: #D8D2C9; stroke: var(--sc-ink); stroke-width: calc(1.2px * var(--k)); stroke-linejoin: round; }
.p-gaubefirst { stroke: var(--sc-ink); stroke-width: calc(1px * var(--k)); }
.p-fenster { fill: #5E6A72; stroke: var(--sc-ink); stroke-width: calc(1px * var(--k)); }
.p-glas { fill: #B6C5CF; }
.p-schiene path { fill: none; stroke: #8F99A1; stroke-width: calc(3.2px * var(--k)); stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--s, 1)); }
.p-haken { fill: #3F4A4F; opacity: var(--s, 1); }
.p-modul rect { fill: var(--modul); stroke: var(--modul-rahmen); stroke-width: calc(1px * var(--k)); transition: stroke 400ms var(--sc-ease-out); }
.p-modul path { fill: none; stroke: rgb(190 208 230 / .17); stroke-width: calc(.8px * var(--k)); }
.p-modul.ist-neu rect { stroke: var(--sc-accent); stroke-width: calc(1.6px * var(--k)); }
.p-mass path { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 60%, transparent); stroke-width: calc(1px * var(--k)); }
.p-mass text { font-size: calc(13px * var(--k)); font-weight: 600; fill: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.p-mass .p-unter { font-weight: 500; font-style: italic; }
[data-plan="raender"] .p-mass { opacity: var(--b, 1); }

@media (max-width: 860px) {
  .raender > .buehne__text {
    left: var(--sc-gutter); right: var(--sc-gutter); width: auto;
    top: calc(var(--kopf-h) + 44svh + 1.2rem);
  }
  .plan--raender { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--kopf-h) + 1rem); bottom: auto; height: 42svh; gap: 8px; }
  .plan__legende { font-size: .8rem; gap: 4px 12px; }
  .plan__legende em { margin-left: 0; width: 100%; }
}

/* ---------- Hindernisse ---------- */
.hindernisse { padding-top: calc(var(--sc-section) * .8); }
.hindernisse__raster { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: var(--sc-7); align-items: start; }
.hindernisse__gross { grid-column: 1 / 6; grid-row: 1 / 3; margin: 0; }
.hindernisse__text { grid-column: 7 / 13; }
.hindernisse__klein { grid-column: 8 / 12; margin: 0; }
.hindernisse figure img { width: 100%; height: auto; box-shadow: var(--sc-e2); }
.hindernisse figcaption, .speicher figcaption, .wand figcaption { margin-top: 12px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 46ch; line-height: 1.5; }
.hindernisse__liste { list-style: none; padding: 0; margin: var(--sc-6) 0 0 !important; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.hindernisse__liste li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); align-items: start; }
.hindernisse__liste svg { width: 64px; height: 64px; }
.hindernisse__liste h3 { margin: 0 0 4px; font: 700 1.2rem/1.2 var(--sc-font-display); }
.hindernisse__liste p { margin: 0; color: var(--sc-ink-soft); max-width: 46ch; }
.mini-frei { fill: color-mix(in oklab, var(--sc-accent) 6%, transparent); stroke: var(--sc-accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mini-schornstein { fill: #59625F; }
.mini-gaube { fill: #D8D2C9; stroke: var(--sc-ink); stroke-width: 1.5; stroke-linejoin: round; }
.mini-linie { stroke: var(--sc-ink); stroke-width: 1.2; }
.mini-fenster { fill: #5E6A72; }
.mini-glas { fill: #B6C5CF; }
@media (max-width: 860px) {
  .hindernisse__raster { grid-template-columns: 1fr; row-gap: var(--sc-6); }
  .hindernisse__gross, .hindernisse__text, .hindernisse__klein { grid-column: 1; grid-row: auto; }
  .hindernisse__gross { order: 2; }
  .hindernisse__klein { order: 3; width: 78%; justify-self: end; }
}

/* ---------- Belegung (Höhepunkt) ---------- */
.belegung__links {
  position: absolute; z-index: var(--sc-z-copy);
  left: calc(var(--sc-gutter) + 6px); top: calc(var(--kopf-h) + var(--rand-i) + 4vh); bottom: 5vh;
  width: min(29rem, 32vw);
  display: flex; flex-direction: column; gap: clamp(1.2rem, 4vh, 2.6rem);
}
.belegung__text { align-content: start; }
.wahl { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 20px; background: var(--sc-surface);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); box-shadow: var(--sc-e1), var(--sc-edge); }
.wahl__gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.wahl__gruppe legend { padding: 0; margin-bottom: 8px; font: 600 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.wahl__reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wahl__reihe--chips { display: flex; flex-wrap: wrap; }
.form-wahl, .chip { position: relative; cursor: pointer; }
.form-wahl input, .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.form-wahl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 7px; border-radius: 12px;
  font-size: .82rem; font-weight: 600; color: var(--sc-ink-soft); transition: background-color 160ms var(--sc-ease-out), color 160ms; }
.form-wahl svg { width: 44px; height: 28px; overflow: visible; }
.form-wahl path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.form-wahl:has(input:checked) { background: color-mix(in oklab, var(--sc-accent) 11%, transparent); color: var(--sc-ink); }
.form-wahl:has(input:checked) path { stroke: var(--sc-accent); fill: color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); color: var(--sc-ink-soft);
  transition: background-color 160ms var(--sc-ease-out), color 160ms, border-color 160ms; }
.chip input:checked + span { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--sc-canvas); }
.chip input[type="checkbox"]:not(:checked) + span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.form-wahl:has(input:focus-visible), .chip:has(input:focus-visible) span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.chip:active span, .form-wahl:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .form-wahl:hover { color: var(--sc-ink); }
  .chip:hover span { border-color: var(--sc-ink); }
}
.belegung__text b { color: var(--sc-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .plan--belegung { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--kopf-h) + .8rem); bottom: auto; height: 33svh; gap: 6px; }
  .plan--belegung .plan__legende .lg { display: none; }
  .belegung__links { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: calc(var(--kopf-h) + 33svh + 2.4rem); bottom: auto; gap: 14px; }
  .wahl { padding: 10px 10px 12px; gap: 8px; }
  .wahl__gruppe legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wahl__gruppe { display: contents; }
  .wahl { display: grid; grid-template-columns: 1fr; }
  .form-wahl { padding: 5px 2px; font-size: .74rem; gap: 3px; }
  .form-wahl svg { width: 36px; height: 22px; }
  .wahl__reihe--chips { gap: 6px; }
  .chip span { min-height: 32px; padding: 0 11px; font-size: .82rem; }
  .belegung__text .sc-body { margin-top: var(--sc-2); font-size: .98rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .plan--belegung { height: 30svh; }
  .belegung__links { top: calc(var(--kopf-h) + 30svh + 2.2rem); }
}

/* ---------- Speicher (dunkler Anker) ---------- */
.speicher { background: var(--nacht); color: var(--nacht-ink); --sc-ink: var(--nacht-ink); --sc-ink-soft: var(--nacht-soft); }
.speicher .sc-display, .speicher .sc-lede { color: var(--nacht-ink); }
.speicher .sc-body, .speicher figcaption, .speicher dd { color: var(--nacht-soft); }
.speicher .sc-lede, .speicher .sc-body { letter-spacing: .005em; line-height: 1.62; }
.speicher__raster { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: var(--sc-7); align-items: start; }
.speicher__bild { grid-column: 1 / 6; grid-row: 1 / 3; margin: 0; }
.speicher__bild img { width: 100%; height: auto; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .5); }
.speicher__text { grid-column: 7 / 13; }
.speicher__text h2 { max-width: 12ch; }
.speicher__text .sc-stack { margin-top: var(--sc-6); }
.pruefliste { margin: var(--sc-6) 0 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.pruefliste div { padding: 12px 0; border-top: 1px solid color-mix(in oklab, var(--nacht-ink) 18%, transparent); }
.pruefliste dt { font: 700 1.05rem/1.2 var(--sc-font-display); color: var(--nacht-ink); }
.pruefliste dd { margin: 4px 0 0; font-size: var(--sc-t-sm); }
.wand { grid-column: 7 / 12; margin: 0; padding: 18px 18px 16px; border: 1px solid color-mix(in oklab, var(--nacht-ink) 16%, transparent);
  background-image: linear-gradient(color-mix(in oklab, var(--nacht-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--nacht-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 20px 20px; }
.wand svg { width: 100%; height: auto; }
.w-boden { stroke: var(--nacht-soft); stroke-width: 1.5; }
.w-frei { fill: rgb(224 122 82 / .07); stroke: #E07A52; stroke-width: 1.3; stroke-dasharray: 5 4; }
.w-geraet { fill: #E9EEEC; }
.w-geraet-linie { stroke: #B9C3C0; stroke-width: 1.5; }
.w-wr { fill: #DCE2E0; }
.w-kanal { stroke: #7D8A88; stroke-width: 6; }
.w-mass path { fill: none; stroke: var(--nacht-soft); stroke-width: 1; }
.w-mass .w-hilf { stroke: #E07A52; stroke-dasharray: 3 3; }
.w-mass text { font: 600 12px var(--sc-font-text); fill: var(--nacht-ink); text-anchor: middle; }
@media (max-width: 860px) {
  .speicher__raster { grid-template-columns: 1fr; row-gap: var(--sc-6); }
  .speicher__bild, .speicher__text, .wand { grid-column: 1; grid-row: auto; }
  .speicher__bild { width: 82%; }
  .pruefliste { grid-template-columns: 1fr; }
}

/* ---------- Ablauf (pan über Planblätter) ---------- */
.ablauf { display: flex; align-items: center; }
.ablauf__schiene { gap: clamp(1.2rem, 2.4vw, 2.4rem); padding: calc(var(--kopf-h) + 2rem) calc(var(--sc-gutter) + 6px) 2rem; align-items: center; }
.blatt {
  --i: 0;
  flex: 0 0 auto; width: clamp(17rem, 23vw, 21rem); padding: 18px 20px 22px; position: relative;
  background-color: var(--sc-surface);
  background-image:
    linear-gradient(color-mix(in oklab, var(--sc-ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--sc-ink) 4%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 24%, transparent);
  box-shadow: var(--sc-e2), inset 0 0 0 6px var(--sc-surface), inset 0 0 0 7px color-mix(in oklab, var(--sc-ink) 14%, transparent);
}
.blatt svg { width: 100%; height: auto; margin-bottom: 10px; }
.blatt h3 { margin: 0 0 6px; font: 700 1.5rem/1.1 var(--sc-font-display); letter-spacing: -0.015em; }
.blatt p { margin: 0; color: var(--sc-ink-soft); line-height: 1.5; }
.blatt--kopf, .blatt--schluss { background: none; border: 0; box-shadow: none; width: clamp(18rem, 30vw, 27rem); }
.blatt--kopf .sc-body { margin-top: var(--sc-4); }
.blatt--schluss .textlink { display: inline-block; margin-top: var(--sc-4); }
.b-dach { fill: none; stroke: var(--sc-ink); stroke-width: 2; stroke-linejoin: round; }
.b-mass { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 45%, transparent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.b-akzent { fill: color-mix(in oklab, var(--sc-accent) 25%, transparent); stroke: var(--sc-accent); stroke-width: 1.6; }
.b-akzent--leer { fill: none; stroke-dasharray: 4 3; }
.b-schiene { stroke: #8F99A1; stroke-width: 3; stroke-linecap: round; }
.b-module rect { fill: var(--modul); }
.ablauf__schiene > :nth-child(2) { --i: 1; } .ablauf__schiene > :nth-child(3) { --i: 2; } .ablauf__schiene > :nth-child(4) { --i: 3; }
.ablauf__schiene > :nth-child(5) { --i: 4; } .ablauf__schiene > :nth-child(6) { --i: 5; } .ablauf__schiene > :nth-child(7) { --i: 6; }
/* Die Blätter legen sich nacheinander hin, wie auf den Tisch gelegt. Das erste ist schon da. */
@media (prefers-reduced-motion: no-preference) {
  .ablauf__schiene > :not(:first-child) {
    opacity: clamp(.55, calc(var(--sc-p, 0) * 7.5 - var(--i) + 2.4), 1);
    translate: 0 calc(clamp(0, calc(var(--i) - var(--sc-p, 0) * 7.5 - 1.4), 1) * 18px);
  }
}
@media (max-width: 860px) {
  .blatt { width: 76vw; }
  .blatt--kopf, .blatt--schluss { width: 80vw; }
}

/* ---------- Begehung (Schluss) ---------- */
.begehung { padding-bottom: 0; }
.begehung__kopf { max-width: 44rem; }
.begehung__kopf .sc-lede { max-width: 40ch; }
.planblatt {
  margin-top: var(--sc-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
  background: var(--sc-surface); border: 1.5px solid var(--sc-ink);
  box-shadow: var(--sc-e2), inset 0 0 0 8px var(--sc-surface), inset 0 0 0 9px color-mix(in oklab, var(--sc-ink) 40%, transparent);
  padding: 9px;
}
.planblatt__zeichnung { padding: clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center;
  background-image: linear-gradient(color-mix(in oklab, var(--sc-ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--sc-ink) 4%, transparent) 1px, transparent 1px);
  background-size: 20px 20px; }
.planblatt__zeichnung .plan__svg { height: auto; aspect-ratio: 1.6; max-height: 26rem; }
.schriftfeld { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: color-mix(in oklab, var(--sc-ink) 40%, var(--sc-surface)); border-left: 1.5px solid var(--sc-ink); align-content: end; }
.sf { margin: 0; padding: 8px 12px 10px; min-width: 0; background: var(--sc-surface); }
.sf--titel, .sf--breit, .sf--knopf, .sf--hinweis { grid-column: 1 / -1; }
.sf--titel { background: color-mix(in oklab, var(--sc-ink) 5%, var(--sc-surface)); }
.sf__l { display: block; margin-bottom: 3px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.sf b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sf--feld input, .sf--feld select {
  width: 100%; min-height: 40px; padding: 4px 0; border: 0; border-bottom: 1.5px solid color-mix(in oklab, var(--sc-ink) 35%, transparent);
  background: transparent; font-size: 1.05rem; border-radius: 0; color: var(--sc-ink);
}
.sf--feld input:focus, .sf--feld select:focus { outline: none; border-bottom-color: var(--sc-accent); }
.sf--feld input:focus-visible, .sf--feld select:focus-visible { box-shadow: 0 2px 0 0 var(--sc-accent); }
.sf--feld input[aria-invalid="true"] { border-bottom-color: #A3301A; }
.sf__fehler { display: block; margin-top: 4px; color: #A3301A; font-size: .86rem; }
.sf--knopf { padding: 14px 12px; }
.sf--knopf .knopf { width: 100%; }
.sf--hinweis { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.begehung__zurueck { display: inline-block; margin-top: var(--sc-5); }
.fuss {
  margin-top: var(--sc-7); padding: 22px calc(var(--sc-gutter) + 6px) 30px; display: flex; gap: 10px 28px; flex-wrap: wrap; align-items: baseline;
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.fuss__marke { font: 800 1rem/1 var(--sc-font-display); color: var(--sc-ink); }
@media (max-width: 860px) {
  .planblatt { grid-template-columns: 1fr; }
  .schriftfeld { border-left: 0; border-top: 1.5px solid var(--sc-ink); }
}
@media (max-width: 420px) {
  .schriftfeld { grid-template-columns: 1fr; }
  .sf { grid-column: 1 / -1; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .km { animation: none; stroke-dashoffset: 0; }
  .aufmass__notiz { animation: none; opacity: 1; }
  .knopf--voll::before { animation: none; }
  .p-modul rect { transition: none; }
}