@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url("schrift/cormorant-garamond-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url("schrift/cormorant-garamond-300-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("schrift/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("schrift/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("schrift/inter-600.woff2") format("woff2"); }

:root {
  --grund: #020609;
  --creme: #ede8df;
  --leise: #a8a296;
  --akzent: #db693f;
  --haar: rgba(237, 232, 223, .18);
  --papier: #f3efe7;
  --sand: #e9e3d8;
  --tinte: #15140f;
  --tinte-leise: #57524a;
  --akzent-papier: #b44a16;
  --schraffur: #cbbfa8;
  --plan-haar: #d9d6cf;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weich: cubic-bezier(.23, 1, .32, 1);
  --rand: 16px;
  --leiste: 0px;
  color-scheme: dark;
  scrollbar-color: #3a3d40 var(--grund);
}
@media (min-width: 720px) { :root { --rand: 48px; } }
@media (max-width: 719px) { :root { --leiste: calc(56px + env(safe-area-inset-bottom)); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--creme);
  font: 400 1rem/1.6 var(--sans);
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--akzent); color: var(--grund); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.kurz { display: none; }
@media (max-width: 599px) {
  .lang { display: none; }
  .kurz { display: inline; }
}

/* Rahmen von bravique (duzt), in bravique-Farben */
.rahmen { position: relative; z-index: 50; font: 13px/1.5 var(--sans); }
.rahmen-leiste {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 4px 24px; background: #181a17; color: #f7f5ef;
}
.rahmen-zurueck, .rahmen-bau {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0;
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.rahmen-bau { min-height: 44px; padding: 0; }
.rahmen-bau span { border-bottom: 1px solid #9da691; padding-bottom: 1px; }
@media (hover: hover) and (pointer: fine) { .rahmen-zurueck:hover, .rahmen-bau:hover { color: #d5ef9b; } }
.rahmen :focus-visible { outline-color: #d5ef9b; }
.rahmen-hinweis {
  margin: 0; padding: 7px 24px; background: #181a17; color: rgba(247, 245, 239, .72);
  border-top: 1px solid rgba(247, 245, 239, .1);
  font: 11px/1.6 var(--mono); letter-spacing: .02em;
}
.hinweis-kurz, .hinweis-mehr { display: none; }
.hinweis-mehr {
  margin: -12px 0 -12px 2px; min-width: 44px; min-height: 44px; padding: 0 4px; background: none; border: 0;
  color: #f7f5ef; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .25em;
}
@media (max-width: 719px) {
  .rahmen-leiste, .rahmen-hinweis { padding-inline: 16px; }
  .rahmen-leiste { font-size: 12px; }
  .hinweis-voll { display: none; }
  .hinweis-kurz { display: inline; }
  .hinweis-mehr { display: inline-flex; align-items: center; justify-content: center; }
  .hinweis-mehr[hidden] { display: none; }
  .rahmen-hinweis.offen .hinweis-voll { display: inline; }
  .rahmen-hinweis.offen .hinweis-kurz { display: none; }
}

.bau {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 0;
  border: 0; border-radius: 2px; background: #181a17; color: #f7f5ef; font: 14px/1.6 var(--sans);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.bau::backdrop { background: rgba(2, 6, 9, .72); }
.bau-innen { padding: 24px 24px 22px; }
.bau-kopf { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 12px; }
.bau h2 { margin: 0; font: 300 1.9rem/1.1 var(--serif); }
.bau-zu {
  width: 44px; height: 44px; margin: -8px -10px 0 0; flex: none; border: 0; background: none; color: inherit;
  font: 300 28px/1 var(--sans); cursor: pointer;
}
.bau-liste { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.bau-liste b { font-weight: 600; }
.bau-gewicht { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(247, 245, 239, .18); font: 12px/1.6 var(--mono); color: #c9c6bd; }

/* Strecke mit fester Bühne: Takt 1 bis 4 */
.speicher { position: relative; height: calc(var(--spanne, 1) * 100vh); height: calc(var(--spanne, 1) * 100svh); }
.ohne-js .ablauf { margin-top: 0; }
.ohne-js .plan-text { display: none; }
#plan { aspect-ratio: 800 / 560; }
.akt, .anker { position: absolute; left: 0; width: 1px; top: calc(var(--von, 0) * 100svh); pointer-events: none; }
.akt { height: calc(var(--dauer, 1) * 100svh); visibility: hidden; }
.buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--grund); isolation: isolate;
}
.sofort { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s var(--weich); }
@media (max-aspect-ratio: 9/10) { .sofort { object-fit: contain; } }
.sofort.weg { opacity: 0; }
.film-ebene { position: absolute; inset: 0; transform-origin: 50% 0; }
html:not(.hoch) .film-ebene { transform-origin: 50% 52%; }
/* Handy: oben ein Band für die Kapitelsätze, unten Platz für die Leiste. Film, Held und Sofortbild teilen sich diese Fläche. */
@media (max-aspect-ratio: 9/10) { .film-ebene { top: 108px; bottom: var(--leiste); } }
#leinwand, #fluss { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fluss { opacity: 0; transition: opacity .5s var(--weich); }
#fluss.an { opacity: 1; }
#marken { position: absolute; inset: 0; z-index: 4; transition: opacity .3s linear; }
#marken .marke, #marken svg > g { transition: opacity .3s linear; }
#marken.wirkung .marke:not(.bleibt), #marken.wirkung svg > g:not(.bleibt) { opacity: 0 !important; }
#marken.wirkung .marke-text { display: none; }
.hoch #marken.wirkung { opacity: 0; }
.held { animation: auftauchen .5s var(--weich) backwards; }
@keyframes auftauchen { from { opacity: 0; } }
.held.weg { visibility: hidden; }
.kegel {
  position: absolute; inset: -20%; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 30% 42% at 50% 52%, rgba(2, 6, 9, 0) 42%, rgba(2, 6, 9, .55) 70%, rgba(2, 6, 9, .9) 100%);
}
.korn {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .04;
  background: url("korn.png") repeat; background-size: 128px;
}
.ebene { position: absolute; z-index: 3; pointer-events: none; }
.ebene a, .ebene button { pointer-events: none; }
.ebene.an a, .ebene.an button { pointer-events: auto; }
/* Deckkraft je Text statt je Ebene, damit die Kontrastprüfung sieht, was sichtbar ist */
.ebene [data-sc-cue], .ebene .schutz, .ebene .zerlegen, #kurve { opacity: var(--a, 0); }

/* Takt 1 */
.held-text {
  position: absolute; left: var(--rand); top: 50%; translate: 0 -54%;
  width: min(40rem, calc(var(--frei, 30vw) - var(--rand))); transform-origin: 0 50%; pointer-events: none;
}
.held-text h1 {
  margin: 0 0 .45em; font: 300 calc(clamp(3.2rem, 5.4vw, 6.5rem) * var(--fit, 1))/.96 var(--serif); letter-spacing: -.02em;
  hyphens: manual; text-wrap: balance;
}
#kopf { opacity: 1 !important; }
.held-text h1 em { display: block; margin-top: .06em; font-style: italic; }
.held-text p { margin: 0; max-width: 32ch; color: var(--leise); text-wrap: pretty; }
@media (max-aspect-ratio: 9/10) {
  .held-text { z-index: 3; left: var(--rand); right: var(--rand); width: auto; top: calc(18px + env(safe-area-inset-top)); translate: none; }
  .held-text h1 { font-size: calc(min(10.5vw, 5.6svh, 3.4rem) * var(--fit, 1)); margin-bottom: .35em; }
  .held-text p { font-size: calc(min(.9375rem, 2.2svh) * max(var(--fit, 1), .9)); max-width: 36ch; }
}

/* Takt 2 */
.gewicht { left: var(--rand); top: 50%; translate: 0 -50%; width: min(28rem, var(--frei-l, calc(28vw - var(--rand)))); }
.g-satz { margin: 0 0 .55em; font: 300 clamp(1.7rem, 2.4vw, 2.4rem)/1.1 var(--serif); letter-spacing: -.01em; text-wrap: balance; hyphens: manual; }
.g-satz:nth-of-type(3) { margin-bottom: .8em; }
.quelle { margin: 0; font: 400 .6875rem/1.6 var(--mono); letter-spacing: .04em; color: var(--leise); }
.quelle a { white-space: nowrap; }
.hoch .gewicht { left: var(--rand); right: var(--rand); width: auto; top: calc(22px + env(safe-area-inset-top)); translate: none; }
.hoch .g-satz { font-size: calc(min(7.4vw, 3.9svh, 2rem) * var(--fit, 1)); }

/* Takt 3 */
.innen { inset: 0; }
.satz {
  position: absolute; margin: 0; max-width: 19ch;
  font: 300 clamp(1.8rem, 2.6vw, 2.6rem)/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance;
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--weich), transform .5s var(--weich);
}
.satz.an { opacity: var(--a, 1); transform: none; }
.ebene .satz:not(.an) { opacity: 0; }
/* Kapitelsätze oben in der Mitte, über dem Dach. Dort steht keine Beschriftung. */
.schutz-oben {
  left: 22%; right: 22%; top: 0; height: 24svh;
  background: linear-gradient(to bottom, rgba(2, 6, 9, .9) 35%, rgba(2, 6, 9, 0));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
.hoch .schutz-oben { display: none; }
.innen:not(:has(.satz.an)) .schutz-oben { opacity: 0 !important; }
.schutz-oben { transition: opacity .4s linear; }
.satz { left: 32%; right: 31%; top: 2.5svh; max-width: none; text-align: center; font-size: clamp(1.45rem, 2vw, 2.1rem); }
.satz p { margin: 0; }
.satz .mass { margin: 0 auto .4em; max-width: 64ch; font: 400 .9375rem/1.5 var(--sans); letter-spacing: 0; color: var(--leise); }
.hoch .satz { left: var(--rand); right: var(--rand); max-width: none; text-align: left; font-size: min(7vw, 3.6svh, 1.9rem); }
.hoch .satz { top: calc(18px + env(safe-area-inset-top)); }
.hoch .satz .mass { margin-left: 0; font-size: .875rem; }
@media (min-width: 720px) { .hoch .satz { right: calc(var(--rand) + 200px); } }
.bewegung-aus .zerlegen { left: var(--rand); translate: 0 -50%; top: 45%; bottom: auto; }
.hoch.bewegung-aus .zerlegen { left: auto; right: var(--rand); top: 57%; padding: 0 18px; }
.hoch.zerlegt-ruhig .zerlegen { top: calc(30px + env(safe-area-inset-top)); left: 50%; right: auto; translate: -50% 0; }
.andock-quer .marke { max-width: min(13rem, 12.6vw); }
.andock-hoch .marke { max-width: 6.2rem; }
.andock-hoch .marke-text { display: none; }
.andock-hoch .marke-name { hyphens: manual; }
.andock.kurz .marke-name { font-size: .625rem; letter-spacing: .06em; }
.zerlegen {
  position: absolute; left: 50%; bottom: calc(var(--leiste) + 9svh); translate: -50% 0; min-height: 48px; padding: 0 26px;
  border: 1px solid var(--akzent); border-radius: 2px; background: rgba(2, 6, 9, .7); color: var(--creme); cursor: pointer;
  font: 400 .8125rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .16s var(--weich), transform .12s var(--weich);
}
.zerlegen[hidden] { display: none; }
.zerlegen:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .zerlegen:hover { background: rgba(219, 105, 63, .16); } }
.teileliste dd > span { display: none; }
[data-lesart="eigentuemer"] .teileliste .e, [data-lesart="fachleute"] .teileliste .f { display: inline; }

/* Takt 4 */
.wirkung { inset: 0; }
.schutz { position: absolute; pointer-events: none; }
.schutz-ecke { left: 0; top: 0; width: 52vw; height: 66svh; background: radial-gradient(ellipse 100% 100% at 0 0, rgba(2, 6, 9, .94) 45%, rgba(2, 6, 9, .7) 68%, rgba(2, 6, 9, 0) 100%); }
.schutz-band { left: 0; bottom: 0; width: calc(min(48rem, 56vw) + var(--rand) + 140px); height: 30svh; -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); background: linear-gradient(to top, rgba(2, 6, 9, .97) 45%, rgba(2, 6, 9, .75) 72%, rgba(2, 6, 9, 0)); }
.wirkung-kopf { position: absolute; left: var(--rand); top: 5svh; width: min(28rem, 34vw); }
.wirkung-kopf h2 { margin: 0 0 .5em; font: 300 clamp(1.9rem, 2.8vw, 2.7rem)/1.05 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.w-zahl { margin: 0 0 4px; font-size: .9375rem; line-height: 1.5; }
.nur-f { margin: 10px 0 0; font-size: .8125rem; line-height: 1.55; color: #d6d1c7; }
.w-teil { transition: opacity .3s linear; }
.hoch .w-folge { display: grid; }
.hoch .w-teil { grid-area: 1 / 1; margin: 0; }
.hoch .wirkung[data-teil="0"] .w-teil:not([data-teil="0"]),
.hoch .wirkung[data-teil="1"] .w-teil:not([data-teil="1"]),
.hoch .wirkung[data-teil="2"] .w-teil:not([data-teil="2"]) { opacity: 0 !important; }
.hoch .wirkung[data-teil="0"] .w-teil:not([data-teil="0"]) a,
.hoch .wirkung[data-teil="1"] .w-teil:not([data-teil="1"]) a,
.hoch .wirkung[data-teil="2"] .w-teil:not([data-teil="2"]) a { pointer-events: none !important; visibility: hidden; }
[data-lesart="eigentuemer"] .nur-f { display: none; }
.wirkung-unten { position: absolute; left: var(--rand); bottom: 3svh; width: min(48rem, 56vw); }
.wirkung-unten .kurve { height: clamp(48px, 7svh, 76px); }
.wirkung-unten .kurve-zeile { margin-top: 30px; }
.wirkung-unten .kurve-zeit { color: var(--creme); }
.wirkung .kurve-wurzel { pointer-events: none; }
.wirkung.an .kurve-wurzel { pointer-events: auto; }
.hinweis { margin: 2px 0 6px; font: .75rem/1.5 var(--sans); color: var(--leise); }
.hoch .wirkung { inset: auto var(--rand) calc(var(--leiste) + 10px) var(--rand); display: flex; flex-direction: column; gap: 12px; }
.hoch .wirkung-kopf, .hoch .wirkung-unten { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
.hoch .wirkung-kopf h2 { font-size: min(7.2vw, 1.9rem); margin-bottom: .3em; }
.hoch .w-zahl { font-size: .875rem; }
.hoch .schutz-ecke { display: none; }
.hoch .schutz-band { width: auto; -webkit-mask-image: none; mask-image: none; left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); top: -56px; bottom: calc(-1 * var(--leiste) - 10px); height: auto; background: linear-gradient(to bottom, rgba(2, 6, 9, 0), rgba(2, 6, 9, .94) 56px); }
.hoch .wirkung-unten .kurve { height: clamp(56px, 10svh, 96px); }
.hoch .wirkung-unten .kurve-zeile { margin-top: 28px; }

/* Papier: Takt 5 und 6 */
.papier {
  --creme: var(--tinte); --leise: var(--tinte-leise); --akzent: var(--akzent-papier);
  position: relative; z-index: 5; background: var(--papier); color: var(--tinte); color-scheme: light;
}
.papier :focus-visible { outline-color: var(--akzent-papier); }
.papier ::selection { background: var(--akzent-papier); color: #fff; }
.ablauf { margin-top: -100vh; margin-top: -100svh; }
/* weiche, leicht schräge Papierkante statt einer geraden Linie */
.ablauf::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(90px, 16svh, 160px); pointer-events: none;
  background: linear-gradient(177deg, rgba(243, 239, 231, 0) 18%, rgba(243, 239, 231, .55) 62%, var(--papier) 96%);
}
.ohne-js .ablauf::before { display: none; }
.papier-innen { max-width: 1240px; margin: 0 auto; padding: clamp(80px, 15svh, 168px) var(--rand) clamp(48px, 8svh, 96px); }
@media (min-width: 1100px) { .papier-innen { padding-right: max(var(--rand), min(216px, calc(216px - (100vw - 1240px) / 2))); } }
.papier h2 { margin: 0 0 .5em; font: 300 clamp(2.4rem, 5vw, 4.2rem)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.lesart { display: grid; }
.lesart > .e, .lesart > .f { grid-area: 1 / 1; }
[data-lesart="eigentuemer"] .lesart > .f, [data-lesart="fachleute"] .lesart > .e { visibility: hidden; }

.ablauf-raster { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; margin-top: 40px; }
/* Der Plan trägt die Anlage aus dem Film: bei 1440 mindestens 720 px breit, rechts bleibt Platz für das Schild */
.ablauf .papier-innen { max-width: 1340px; }
@media (min-width: 1100px) { .ablauf .papier-innen { padding-right: max(var(--rand), min(216px, calc(216px - (100vw - 1340px) / 2))); } }
.plan-spalte { margin: 0; position: sticky; top: 12svh; }
.plan-hinweis { margin: 14px 0 0; font: .6875rem/1.6 var(--mono); letter-spacing: .06em; color: var(--tinte-leise); }
.plan-text { color: var(--tinte-leise); }
.plan .leitung.gestrichelt { stroke-dasharray: 4 4; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.schritte li { display: grid; gap: 6px; padding-left: 20px; border-left: 1px solid var(--plan-haar); transition: border-color .3s var(--weich); }
.schritte li.aktiv { border-left-color: var(--akzent-papier); }
.schritte b { font: 300 1.8rem/1.1 var(--serif); }
.schritte .lesart { color: var(--tinte-leise); max-width: 46ch; text-wrap: pretty; }
.ihr-teil { margin: 36px 0 0; padding: 18px 0 0 20px; border-top: 1px solid var(--plan-haar); max-width: 46ch; }

.pruefung .papier-innen { padding-top: clamp(64px, 12svh, 140px); }
.check-kopf { max-width: 40rem; margin-bottom: 40px; }
.check-kopf p { margin: 0; color: var(--tinte-leise); max-width: 52ch; }
.check-raster { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.check { display: grid; gap: 30px; }
.feld { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld[hidden] { display: none; }
.feld > label, .feld legend {
  padding: 0; font: .75rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise);
}
.feld legend { margin-bottom: 6px; text-transform: none; letter-spacing: .02em; font-size: .8125rem; max-width: 52ch; }
.feld legend::first-line { text-transform: none; }
.feld input:not([type]), .feld input[type=tel], .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 8px 0; font: 400 1.125rem/1.4 var(--sans); color: var(--tinte);
  background: transparent; border: 0; border-bottom: 1px solid var(--tinte); border-radius: 0;
  caret-color: var(--akzent-papier);
}
.check input[name=flaeche], .check input[name=abstand] { font: 300 2.4rem/1.1 var(--serif); max-width: 10ch; }
.feld textarea { resize: vertical; min-height: 96px; }
.feld select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--tinte) 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--tinte) 50%) right 0 center / 6px 6px no-repeat; padding-right: 22px; }
.feld [aria-invalid] { border-bottom-color: var(--akzent-papier); border-bottom-width: 2px; }
.feld-hinweis, .feld-fehler { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--tinte-leise); }
.feld-fehler { color: #9c3b0f; }
.feld-fehler[hidden], .feld-hinweis[hidden] { display: none; }
.wahl label {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--plan-haar); border-radius: 2px; transition: border-color .16s var(--weich), background-color .16s var(--weich);
}
.wahl label + label { margin-top: -1px; }
.wahl label:has(:checked) { border-color: var(--akzent-papier); background: rgba(180, 74, 22, .05); position: relative; }
.wahl input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--akzent-papier); }
@media (hover: hover) and (pointer: fine) { .wahl label:hover { border-color: var(--tinte-leise); } }
.wahl.reihe { grid-template-columns: repeat(3, 1fr); column-gap: 0; }
.wahl.reihe legend, .wahl.reihe .feld-hinweis { grid-column: 1 / -1; }
.wahl.reihe label + label { margin-top: 0; margin-left: -1px; }
.check-ergebnis { position: sticky; top: 10svh; }
.zeichnung { min-height: 160px; }
.plan .eigen.leer { fill: none; stroke: var(--tinte-leise); stroke-dasharray: 6 5; stroke-width: 1.2; }
.zeichnung .plan-text.titel { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte); }
.ergebnis { margin-top: 22px; padding: 18px 0 0; border-top: 1px solid var(--tinte); }
.ergebnis[hidden] { display: none; }
.ergebnis-kopf { margin: 0 0 6px; font: .75rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--akzent-papier); }
.ergebnis-text { margin: 0; font: 300 clamp(1.45rem, 2vw, 1.85rem)/1.2 var(--serif); text-wrap: pretty; }
.ergebnis-klein, .daten-hinweis { margin: 12px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--tinte-leise); }

.rueckruf .papier-innen { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; padding-top: clamp(48px, 10svh, 120px); padding-bottom: clamp(80px, 16svh, 180px); }
.slot { width: min(100%, 420px); position: sticky; top: 10svh; }
.formular-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; align-items: start; }
@media (min-width: 600px) {
  .formular-raster .feld-email { grid-column: 2; grid-row: 2; }
  .formular-raster .feld-firma { grid-column: 1; grid-row: 2; }
}
.feld input[type=email] {
  width: 100%; min-height: 48px; padding: 8px 0; font: 400 1.125rem/1.4 var(--sans); color: var(--tinte);
  background: transparent; border: 0; border-bottom: 1px solid var(--tinte); border-radius: 0; caret-color: var(--akzent-papier);
}
.feld.breit { grid-column: 1 / -1; }
.kaestchen { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 18px; cursor: pointer; }
.kaestchen input { width: 20px; height: 20px; margin: 0; accent-color: var(--akzent-papier); }
.datenschutz { margin: 6px 0 22px; font-size: .8125rem; line-height: 1.5; color: var(--tinte-leise); max-width: 60ch; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.knopf {
  min-height: 52px; padding: 0 30px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--akzent-papier); color: #fff; font: 400 .8125rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .16s var(--weich), transform .12s var(--weich);
}
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .6; cursor: progress; }
.knopf[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: #9c3b0f; } }
.meldung { margin: 16px 0 0; max-width: 56ch; }
.meldung:empty { display: none; }
.meldung.erfolg { font: 300 1.6rem/1.2 var(--serif); }
.meldung.fehler { color: #9c3b0f; }

.fuss { background: var(--grund); color: var(--creme); }
.fuss-innen { max-width: 1240px; margin: 0 auto; padding: 40px var(--rand) calc(40px + var(--leiste)); display: grid; gap: 12px; font: .75rem/1.6 var(--mono); letter-spacing: .03em; }
.fuss p { margin: 0; color: var(--leise); }
.fuss-zeile { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { color: var(--creme); }

/* Schild: was die Seite ergänzt */
.schild-hinweis { display: block; margin-top: -4px; color: var(--schild-leise, #9c968c); text-transform: none; letter-spacing: .03em; font-size: 10px; line-height: 1.5; }
.schild-blatt .schild-hinweis { font-size: 11px; }

@media (max-width: 899px) {
  .ablauf-raster, .check-raster { grid-template-columns: 1fr; }
  .plan-spalte, .check-ergebnis { position: static; }
  .rueckruf .papier-innen { grid-template-columns: 1fr; }
  .slot { position: relative; top: auto; }
}
@media (max-width: 599px) {
  .formular-raster { grid-template-columns: 1fr; }
  .wahl.reihe { grid-template-columns: 1fr; }
  .wahl.reihe label + label { margin-left: 0; margin-top: -1px; }
  .papier-innen { padding-top: 72px; }
  .schritte b { font-size: 1.6rem; }
}

.bewegung-aus .satz { transition: opacity .3s linear; transform: none; }
.bewegung-aus .held { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .satz { transition: opacity .3s linear; transform: none; }
}

/* Handy-Leiste: wird es eng, fällt zuerst die Baugruppe weg, nie das Knopf-Wort */
.schild-leiste .schild-marke { white-space: nowrap; }
@media (max-width: 429px) {
  .schild-leiste-kopf { gap: 0; }
  .schild-leiste .schild-leiste-feld { width: 0; overflow: hidden; visibility: hidden; }
}
.wahl > label { font: 400 1rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tinte); }

/* Handy-Leiste: kein dunkler Schatten über dem Papier, Knopf 48 px hoch */
.schild-ebene[data-handy="true"] .schild-leiste { box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); }
.schild-leiste .schild-rueckruf { min-height: 48px; }

/* Das kleine Schild, das im Höhepunkt in die Leiste fliegt, sieht aus wie das Schild */
.schild-ebene[data-handy="true"] .schild-mini {
  width: 44px; height: 58px; padding: 7px 6px; gap: 5px; border-radius: 2px;
  background: linear-gradient(180deg, #26282b, #1a1b1d 45%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 18px rgba(0, 0, 0, .6);
}
.schild-mini b:last-child { margin-top: auto; height: 7px; background: var(--akzent); }

/* Film 3: die Anlage. Liegt über Film 2 und erscheint, wenn der Schrank wieder geschlossen ist. */
#leinwand3, #fluss3 { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#leinwand3:not(.an), #leinwand3:not(.an) ~ #fluss3, #leinwand3:not(.an) ~ #marken3, #leinwand3:not(.an) ~ .kante3 { visibility: hidden; }
/* Handy: Film 3 ist vergrößert und abgesenkt, die Oberkante läuft weich in den Grund aus */
.kante3 { display: none; position: absolute; left: 0; right: 0; top: -2px; height: 96px; background: linear-gradient(var(--grund) 8%, rgba(2, 6, 9, 0)); pointer-events: none; }
.hoch .kante3 { display: block; }
#fluss3 { opacity: 0; transition: opacity .5s var(--weich); }
#fluss3.an { opacity: 1; }
#marken3 { position: absolute; inset: 0; z-index: 4; }
#marken.weg { opacity: 0; }
.anlage { inset: 0; }
.hoch .anlage .schutz-oben { display: none; }

/* Handy: Satz zum hervorgehobenen Teil in der Haltezeit */
.halte {
  position: absolute; z-index: 3; left: var(--rand); right: var(--rand); bottom: calc(var(--leiste) + 12px); display: none;
  padding: 12px 0 2px; border-top: 1px solid var(--haar); pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--weich), transform .3s var(--weich);
}
.hoch .halte { display: grid; gap: 4px; }
.halte::before { content: ""; position: absolute; inset: -40px calc(-1 * var(--rand)) -16px; z-index: -1; background: linear-gradient(to bottom, rgba(2, 6, 9, 0), rgba(2, 6, 9, .92) 40px); }
.halte.an { opacity: var(--a, 1); transform: none; }
.halte-name { font: 400 .6875rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); }
.halte-text { font: 400 .9375rem/1.45 var(--sans); color: var(--creme); }
:is(#marken, #marken3) .marke.aktiv .marke-name { color: var(--akzent); }
:is(#marken, #marken3) svg > g.aktiv circle { stroke: var(--akzent); stroke-width: 7; stroke-opacity: .35; }
:is(#marken, #marken3) svg > g.aktiv line { stroke: var(--akzent); }

/* Lageplan: Schrankreihen und Kabelweg auf der freien Teilfläche */
.plan .schrank { fill: var(--papier); stroke: var(--tinte); stroke-width: 1; }
.plan .kanal { fill: none; stroke: var(--akzent-papier); stroke-width: 1.4; stroke-dasharray: 3 3; }

/* Referenznummer bricht nicht um */
.nr { white-space: nowrap; }
.schild-feld:is([data-feld="anfrage"], [data-feld="standort"]) dd { white-space: nowrap; letter-spacing: 0; font-size: .92em; }

/* Ende Film 3: die Anlage als Draufsicht in dünnen Linien über dem Foto, genau dort, wo sie gleich im Plan auf dem Papier steht */
.draufsicht { position: absolute; left: 0; top: 0; width: 50vw; overflow: visible; opacity: 0; pointer-events: none; }
.draufsicht * { fill: none; stroke: var(--akzent); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--d, 1); }
.draufsicht .kanal { stroke-dasharray: none; stroke-width: 1; opacity: .8; }
#leinwand3.dunkel { filter: brightness(.55); transition: filter .4s var(--weich); }

/* Handy: Der Plan ist schmal, die Beschriftungen eine Spur kleiner, damit sie sich nicht berühren */
@media (max-width: 520px) { #plan .plan-text { font-size: .5625rem; letter-spacing: .02em; } }