/* V16/V17 Seite (Bauteil SEITE): 8 Abschnitte = 8 Kamera-Stationen über der festen 3D-Bühne. V17 (Block am Ende): Bühnenmodus
   mit Einrasten, Kompaktkarten am Telefon, Namensschilder, ?info. Die V16-Regeln darüber gelten unverändert (Scroll-Fallback).
   Desktop: Glasfeld abwechselnd links/rechts (Kontakt rechts, Fuß darunter in derselben Spalte, die Stadt bleibt links frei);
   Telefon (Hochformat ≤ 700 px): Stadt oben, Textblatt ab 56 % der Höhe; was nach oben scrollt, blendet an der Schnittlinie aus
   (Maske, site.js setzt --cut), damit Kasten und Stadt immer frei bleiben. Niedrige Querformate: Kopf kompakt.
   Kein Inline-Stil (Meta-CSP); Zustände kommen als data-* an <html> (szene, station, bewegung). */
:root {
  --rand: var(--layout-inset);
  --kopf-h: 88px;
  --feld-b: 35rem;
  --linie: rgba(255, 255, 255, .16);
}
/* Safari uses the document background for browser-owned edge areas. Match
   the entrance's dark backdrop instead of exposing a separate grey band. */
html { background: #080a0e; color: var(--text); }
body { background: transparent; }
::selection { background: rgba(234, 3, 19, .7); color: #fff; text-shadow: none; }

/* Deckung der Zeile an der Telefon-Schnittlinie (site.js cutSheets), registriert, damit sie weich überblendet */
@property --co { syntax: "<number>"; inherits: false; initial-value: 1; }

/* ---------- Bühne: ruhiger Grund (beim Laden), Bild der Welt (nur ohne 3D) und 3D-Leinwand ---------- */
.buehne { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #2a2c32; }
/* A live opaque canvas supplies its own background. A fixed solid-colour
   wrapper can override Safari's edge sampling even when that canvas covers it.
   Keep its viewport geometry unchanged: labels and hit tests use that space. */
html[data-szene="an"] .buehne { background: transparent; }
/* V19.13 (Rundgang 24.10., P01): beim Laden (Direktlink, Sprachwechsel, ?intro=0) kein Bild mehr, nur der ruhige Bühnengrund.
   Die Bilder der Welt (neu gerendert 23.10.) gibt es nur im echten Rückfall (data-szene="aus": kein WebGL, Fehler, Kontext weg);
   versteckt lädt der Browser sie nicht. */
.poster { position: absolute; inset: 0; display: none; background: #2a2c32 50% 50% / cover no-repeat; }
html[data-szene="aus"] .poster-start { display: block; }
.poster-start { background-image: url("../shared/media/poster-0-desktop.jpg"); }
/* V19.14 (Abnahme 24.10.): poster-7-* wieder die Fassung vom 17.10. (Live V19.10b): Ring und Logo oben bzw. links, unter Kontakttext
   und EVA-Dock ruhiger Grund. Die Neurenderung vom 23./24.10. legte Ring und Bodenlogo hinter Text und Dock (Bogen Kachel 6). */
.poster-ende { display: none; opacity: 0; transition: opacity .9s var(--ease); background-image: url("../shared/media/poster-7-desktop.jpg"); }
/* Ohne 3D: Stationen mit Feld rechts zeigen ein Standbild mit der Stadt links (Station 1), damit der Kasten nicht unterm Feld liegt.
   Nur ohne 3D sichtbar (sonst lädt der Browser das Bild nicht). */
.poster-rechts { display: none; opacity: 0; transition: opacity .9s var(--ease); background-image: url("../shared/media/poster-1-desktop.jpg"); }
html[data-szene="aus"] .poster-rechts { display: block; }
html[data-szene="aus"][data-seite="right"] .poster-rechts { opacity: 1; }
html[data-szene="aus"] .poster-ende { display: block; }
html[data-szene="aus"][data-station="7"] .poster-ende { opacity: 1; }
#szene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; }
html[data-szene="an"] #szene { visibility: visible; }
/* EN-Seite: Standbilder mit englischen Schildern in der Welt (gerendert mit dev.html?lang=en) */
html[lang="en"] .poster-start { background-image: url("../shared/media/poster-0-desktop-en.jpg"); }
html[lang="en"] .poster-rechts { background-image: url("../shared/media/poster-1-desktop-en.jpg"); }
html[lang="en"] .poster-ende { background-image: url("../shared/media/poster-7-desktop-en.jpg"); }
html[data-szene="aus"] #szene { display: none; }

/* ---------- Kopf: Logo · Stationsleiste · Schalter ---------- */
.kopf { position: fixed; z-index: 10; top: max(10px, env(safe-area-inset-top, 0px)); left: var(--layout-inset); right: var(--layout-inset); min-height: calc(var(--kopf-h) - 10px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 clamp(16px, 2.4vw, 40px);
  padding: 6px clamp(14px, 2vw, 28px); border-radius: var(--glass-radius); }
.logo { display: block; flex: none; text-decoration: none; padding: 4px 0; }
.logo img { width: clamp(118px, 10.5vw, 156px); }
.schalter { display: flex; align-items: center; gap: 0 22px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.schalter .aktion { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
#b-bewegung { min-width: 12.2em; justify-content: flex-start; }
/* Sprachlink (zwei Buchstaben): Tippfläche ≥ 44 px breit über ein unsichtbares Pseudoelement, Optik unverändert */
#a-sprache { position: relative; }
#a-sprache::after { content: ""; position: absolute; inset: -2px -15px; }

/* Stationsleiste: eine Linie, Fortschritt rot, 8 anklickbare Marken */
.stationen { position: relative; min-width: 0; }
.stationen ol { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); position: relative; z-index: 1; }
.stationen .bahn { position: absolute; top: 15px; left: 6.25%; right: 6.25%; height: 1px; background: rgba(255, 255, 255, .34); }
.stationen .fuellung { position: absolute; left: 0; top: -.5px; width: 100%; height: 2px; background: var(--ci-interaction-red);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.stationen a.aktion { position: relative; width: 100%; min-height: 48px; flex-direction: column; justify-content: flex-start; gap: 0;
  padding: 25px 2px 6px; font-size: 11.5px; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  text-align: center; color: #e1e4e8; background: none; white-space: nowrap; }
.stationen a.aktion::before { content: ""; position: absolute; top: 10px; left: 50%; width: 1px; height: 11px; transform: translateX(-50%);
  background: rgba(255, 255, 255, .6); transition: background-color var(--ci-hover-duration) var(--ease), width var(--ci-hover-duration) var(--ease); }
.stationen a.aktion[aria-current="step"] { color: #fff; }
.stationen a.aktion[aria-current="step"]::before { width: 3px; background: var(--ci-interaction-red); }
.stationen .name { padding-bottom: 3px; background: linear-gradient(var(--ci-interaction-red), var(--ci-interaction-red)) no-repeat 0 100% / 0% var(--ci-line-width);
  transition: background-size var(--ci-hover-duration) var(--ease); }
.stationen a:is(:hover, :focus-visible, [aria-current="step"]) .name { background-size: 100% var(--ci-line-width); }
.stationen .nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Abschnitte ---------- */
main { position: relative; z-index: 2; outline: none; }
.station { min-height: 108vh; display: flex; align-items: center; justify-content: flex-start;
  padding: calc(var(--kopf-h) + 28px) var(--rand) 40px; }
.station[data-side="right"] { justify-content: flex-end; }
.station[data-side="center"] { justify-content: center; }
/* Kontakt (Finale „Chip auf Platine“): Feld rechts unten, der Fuß schließt in derselben Spalte an → Stadt links frei */
.station[data-station="7"] { align-items: flex-end; min-height: calc(100vh - 9rem); padding-bottom: 20px; }
.feld { width: min(var(--feld-b), 100%); padding: 30px 32px 24px;
  transform: none; /* Stable outside edge: pointer tilt must not move it off the header frame. */
  transition: transform var(--ci-hover-duration) var(--ease); }
.feld > :last-child { margin-bottom: 0; }
.feld h1, .feld h2 { outline: none; }
.feld h1 { font-size: clamp(2.05rem, 1.2rem + 2.3vw, 3.3rem); letter-spacing: -.02em; margin: 0 0 18px; }
.feld h2 { font-size: clamp(1.65rem, 1.1rem + 1.45vw, 2.45rem); letter-spacing: -.015em; margin: 0 0 16px; }
.feld p { font-size: var(--ci-station-size); color: var(--text-2); }
.feld .lead { font-size: var(--ci-body-size); color: var(--text); }
.marke { display: flex; align-items: center; gap: 12px; margin: 0 0 14px !important; font-size: var(--ci-station-label-size) !important;
  font-weight: var(--ci-station-label-weight); letter-spacing: var(--ci-station-label-spacing); text-transform: uppercase; color: var(--text) !important; line-height: 1.3; }
.marke::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--ci-interaction-red); }

.leistungen { list-style: none; }
.leistungen li { padding: 11px 0 10px; border-top: 1px solid var(--linie); }
.leistungen h3, .schritte h3 { font-size: var(--ci-station-size); font-weight: var(--ci-station-question-weight); letter-spacing: .01em; line-height: 1.35; margin: 0 0 3px; color: var(--text); }
.feld .leistungen p, .feld .schritte p { font-size: 16px; line-height: 1.5; margin: 0; }
.beispiel { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--linie); }
.feld .satz { font-size: var(--ci-station-size); font-weight: 600; color: var(--text); margin: 0 0 6px; }
.liefer { list-style: none; }
.liefer li { position: relative; padding-left: 22px; margin: 2px 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
/* Strich pixelfest (ganze px, Rahmen statt 1-px-Fläche bei .74em → sonst grau durch Subpixel-Lage) */
.liefer li::before { content: ""; position: absolute; left: 0; top: 11px; width: 11px; height: 0; border-top: 1px solid var(--ci-interaction-red); }

.schritte { list-style: none; counter-reset: schritt; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); padding: 10px 0 9px; border-top: 1px solid var(--linie); }
.schritte li::before { content: "0" counter(schritt); font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--text); letter-spacing: .04em; }
.schritte li > * { grid-column: 2; }

.feld .klein { font-size: 14px; line-height: 1.55; margin: 14px 0 0; }
.aktionen { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 4px 0 0 !important; }
.feld .aktionen .aktion { font-size: 17px; color: var(--text); }
.feld .mail { color: var(--text); }
.feld .mail .aktion { font-size: clamp(1.1rem, .9rem + .6vw, 1.35rem); font-weight: 600; color: var(--text); }

/* ---------- Fuß ---------- */
.fuss { position: relative; z-index: 2; margin: 0 var(--rand) 14px auto; width: min(var(--feld-b), calc(100% - 2 * var(--rand))); padding: 16px 22px 14px; border-radius: 16px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.fuss p { margin: 0 0 4px; }
.fuss p:last-child { margin: 0; }
.fuss a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45);
  transition: text-decoration-color var(--ci-hover-duration) var(--ease); }
.fuss a:hover { text-decoration-color: var(--ci-interaction-red); }
.fuss .lizenzen { margin-top: 8px; }

/* Ohne 3D (Standbild): kein Bewegungsknopf, es gibt nichts zu bewegen */
html[data-szene="aus"] #b-bewegung { display: none; }

/* ---------- Bewegung aus / reduzierte Bewegung: keine Kippung, kein weiches Scrollen ---------- */
html[data-bewegung="aus"] .feld { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .feld, .feld[data-schnitt], .fuss[data-schnitt] { transition: none; } .poster-ende, .poster-rechts { transition: none; } }

/* ---------- Niedrige Fenster (Laptop 720–800 px hoch): dichter setzen ---------- */
@media (max-height: 800px) and (min-width: 701px) {
  .station { padding-top: calc(var(--kopf-h) + 16px); padding-bottom: 24px; }
  .feld { padding: 22px 26px 18px; }
  .feld h1 { font-size: clamp(1.9rem, 1.1rem + 2vw, 2.7rem); margin-bottom: 12px; }
  .feld h2 { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.05rem); margin-bottom: 10px; }
  .feld p, .feld .lead { font-size: 16px; line-height: 1.5; margin-bottom: .7em; }
  .feld .leistungen p, .feld .schritte p { font-size: 15px; line-height: 1.45; }
  .leistungen li { padding: 8px 0 7px; }
  .schritte li { padding: 7px 0 6px; }
  .feld .klein { margin-top: 10px; }
}

/* ---------- Schmalere Desktops: Stationsleiste nur mit Nummern ---------- */
@media (max-width: 1180px) {
  .stationen .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stationen .nr { position: static; width: auto; height: auto; overflow: visible; clip-path: none; padding-bottom: 3px;
    background: linear-gradient(var(--ci-interaction-red), var(--ci-interaction-red)) no-repeat 0 100% / 0% var(--ci-line-width);
    transition: background-size var(--ci-hover-duration) var(--ease); }
  .stationen a:is(:hover, :focus-visible, [aria-current="step"]) .nr { background-size: 100% var(--ci-line-width); }
}

/* ---------- Telefon (Hochformat): Stadt oben, Textblatt unten ---------- */
@media (max-width: 700px) and (orientation: portrait) {
  :root { --kopf-h: 112px; }
  .poster-start { background-image: url("../shared/media/poster-0-phone.jpg"); }
  .poster-ende { background-image: url("../shared/media/poster-7-phone.jpg"); }
  html[lang="en"] .poster-start { background-image: url("../shared/media/poster-0-phone-en.jpg"); }
  html[lang="en"] .poster-ende { background-image: url("../shared/media/poster-7-phone-en.jpg"); }
  html[data-szene="aus"] .poster-rechts { display: none; }   /* Telefon: Feld steht unten, Stadt oben – ein Standbild reicht */
  .kopf { top: max(6px, env(safe-area-inset-top, 0px)); left: var(--layout-inset); right: var(--layout-inset); grid-template-columns: auto 1fr; grid-template-rows: auto auto; padding: 4px 12px 0; border-radius: var(--glass-radius); }
  .logo img { width: 104px; }
  .schalter { justify-content: flex-end; gap: 0 14px; font-size: 12px; letter-spacing: .1em; }
  .schalter .aktion { font-size: 12px; letter-spacing: .1em; }
  #b-bewegung { min-width: 0; }
  .stationen { grid-column: 1 / -1; grid-row: 2; }
  .stationen a.aktion { padding-top: 22px; min-height: 44px; font-size: 11px; }
  .stationen .bahn { top: 13px; }
  .stationen a.aktion::before { top: 8px; }
  /* Blatt beginnt an jeder Station bei 56 % der Höhe (site.js BLATT); 46 % Lücke zum nächsten Feld */
  html { scroll-padding-top: 56vh; scroll-padding-top: 56svh; }   /* Fokus/Sprung landet nie in der Ausblendzone */
  .station, .station[data-side] { min-height: 108vh; min-height: 108svh; align-items: flex-start; justify-content: center; padding: 0 var(--rand) 46vh; padding-bottom: 46svh; }
  .station[data-station="0"] { padding-top: 56vh; padding-top: 56svh; }
  /* Seitenende: Kontaktfeld + Fuß knapp, damit das Kontaktfeld am Ende unter dem Kasten steht (400×860: Feld ab ≥ 270 px) */
  .station[data-station="7"] { min-height: 0; padding-bottom: 8px; }
  /* Ausblenden an der Schnittlinie, zeilenweise (site.js cutSheets: --ca/--cb = Zeile, die die Linie schneidet, sonst beide
     = Linie; --co = Deckung dieser Zeile, 0 → die ganze Zeile blendet in 180 ms aus, nie eine halbe). data-schnitt nur in der Nähe. */
  .feld[data-schnitt], .fuss[data-schnitt] {
    --maske: linear-gradient(to bottom, transparent var(--ca, 0px), rgba(0, 0, 0, var(--co)) var(--ca, 0px),
      rgba(0, 0, 0, var(--co)) var(--cb, 0px), #000 var(--cb, 0px));
    -webkit-mask-image: var(--maske); mask-image: var(--maske); transition: --co .18s linear; }
  .feld { width: 100%; padding: 20px 20px 16px; border-radius: var(--glass-radius); }
  .feld h1 { font-size: 1.9rem; margin-bottom: 12px; }
  .feld h2 { font-size: 1.5rem; margin-bottom: 12px; }
  .feld p, .feld .lead { font-size: 16px; line-height: 1.5; margin-bottom: .7em; }
  .feld .leistungen p, .feld .schritte p { font-size: 15px; }
  .leistungen li { padding: 8px 0 7px; }
  .schritte li { padding: 7px 0 6px; }
  .liefer li { font-size: 14px; }
  .marke { font-size: 12px !important; margin-bottom: 10px !important; }
  .fuss { margin: 0 var(--rand) 8px; width: auto; padding: 11px 16px 10px; font-size: 12px; line-height: 1.45; }
  .fuss p { margin-bottom: 3px; }
  .fuss .lizenzen { margin-top: 5px; }
  .liefer li::before { top: 10px; }
}

/* ---------- Niedrige Querformate (Telefon quer, z. B. 860×400): Kopf ≤ 64 px, Feld ≤ 50 % Breite, dichter Satz ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --kopf-h: 62px; --feld-b: min(35rem, 48vw); }
  .kopf { top: 6px; left: var(--layout-inset); right: var(--layout-inset); min-height: 50px; padding: 0 14px; border-radius: var(--glass-radius); }
  .logo { padding: 2px 0; }
  .logo img { width: 88px; }
  .stationen a.aktion { min-height: 40px; padding: 17px 2px 4px; font-size: 11px; }
  .stationen a.aktion::after { content: ""; position: absolute; inset: -2px 0; }   /* Tippfläche 44 px hoch, Optik unverändert */
  .stationen .bahn { top: 10px; }
  .stationen a.aktion::before { top: 6px; height: 9px; }
  .stationen .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stationen .nr { position: static; width: auto; height: auto; overflow: visible; clip-path: none; padding-bottom: 3px;
    background: linear-gradient(var(--ci-interaction-red), var(--ci-interaction-red)) no-repeat 0 100% / 0% var(--ci-line-width); }
  .stationen a:is(:hover, :focus-visible, [aria-current="step"]) .nr { background-size: 100% var(--ci-line-width); }
  .schalter { gap: 0 14px; }
  .schalter .aktion { font-size: 12px; letter-spacing: .1em; min-height: 40px; padding: 8px 0 10px; background-position: 0 calc(100% - 6px); }
  #b-bewegung { min-width: 0; }
  /* V19.13 (Rundgang 24.10., P05): auch 701–1100 px breit (experience.css: zwei Zeilen) eine Zeile – Logo · Nummern · Schalter;
     852×393: Kopf-Unterkante 100 → 62 px, mehr Lesefläche für Detailblatt und Gespräch */
  html .kopf { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; }
  html .stationen { grid-column: 2; grid-row: 1; }
  .station { padding: calc(var(--kopf-h) + 8px) var(--rand) 12px; }
  .station[data-station="0"] { align-items: flex-start; }
  .feld { padding: 14px 18px 8px; border-radius: var(--glass-radius); }
  .feld h1 { font-size: 1.55rem; margin-bottom: 8px; }
  .feld h2 { font-size: 1.3rem; margin-bottom: 8px; }
  .feld p, .feld .lead { font-size: 14.5px; line-height: 1.45; margin-bottom: .5em; }
  .feld .leistungen p, .feld .schritte p { font-size: 14px; line-height: 1.4; }
  .marke { font-size: 11px !important; margin-bottom: 8px !important; }
  .feld .aktionen .aktion { font-size: 15px; min-height: 40px; padding: 6px 0 10px; background-position: 0 calc(100% - 6px); }
  .leistungen li { padding: 6px 0 5px; }
  .schritte li { padding: 5px 0 4px; }
  .feld .klein { font-size: 13px; margin-top: 6px; }
  .fuss { font-size: 12px; padding: 10px 16px 8px; }
}

/* Ohne JavaScript: Schalter, die nur mit Skript wirken, nicht zeigen (data-szene setzt erst site.js) */
html:not([data-szene]) .nur-js { display: none; }
/* V19.13 (Rundgang 24.10., P11): mit Skript steht die Seite bis zum Start von site.js (setzt data-szene und, mit WebGL, im selben
   Schritt den Bühnenmodus) unsichtbar auf dem Bühnengrund – sonst springt sie bei ?intro=0, Direktlink und Sprachwechsel aus dem
   Scroll- in den Bühnenaufbau (CLS 1,0). Ohne Skript (scripting: none) bleibt alles sofort sichtbar; lädt site.js nicht, zeigt die
   Verzögerung nach 2,5 s trotzdem den Text. */
@media (scripting: enabled) {
  html:not([data-szene]) :is(.kopf, #inhalt, .fuss, .stage-legal) { visibility: hidden; animation: ohne-skript-zeigen 0s linear 2.5s forwards; }
}
@keyframes ohne-skript-zeigen { to { visibility: visible; } }

/* ======================= V17 Bühne: Einrasten (BAUPLAN-V17 §8) =======================
   html[data-modus="buehne"] (site.js, nur mit WebGL): keine native Seitenrolle, Abschnitte liegen übereinander, nur der aktive
   (data-zeigen) ist sichtbar. Desktop: Karte steht wie in V16 am Anker (mittig im Raum unter dem Kopf; data-hoch → oben
   unter dem Kopf + 12 px; Kontakt rechts unten über dem Fuß). Karten selbst unverändert (Optik pixelgleich). */
html[data-modus="buehne"], html[data-modus="buehne"] body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-modus="buehne"] body { touch-action: pinch-zoom; }
html[data-modus="buehne"] main { position: fixed; inset: 0; pointer-events: none; }
html[data-modus="buehne"] .station { position: absolute; inset: 0; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
/* Start behält Höhe und Polster aus V16 (Feld steht dort, wo es beim Laden stand), alle anderen: mittig unter dem Kopf */
html[data-modus="buehne"] .station[data-station="0"] { bottom: auto; }
html[data-modus="buehne"] .station:not([data-station="0"]) { min-height: 0; padding: var(--kopf-unten, var(--kopf-h)) var(--rand) 0; }
html[data-modus="buehne"] .station[data-zeigen] { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
/* abgehende Karte nach der Ausblende sicher weg (site.js data-weg; sonst unter Last ein Geisterbild hinter der neuen Karte) */
html[data-modus="buehne"] .station[data-weg]:not([data-zeigen]) { opacity: 0; visibility: hidden; transition: none; }
html[data-modus="buehne"] .station[data-hoch] { align-items: flex-start; padding-top: calc(var(--kopf-unten, var(--kopf-h)) + 12px); }
html[data-modus="buehne"] .station .feld { pointer-events: auto; }
html[data-modus="buehne"] .station[data-station="7"] { align-items: flex-end; padding-bottom: calc(var(--fuss-h, 0px) + 34px); }
html[data-modus="buehne"] .fuss { position: fixed; right: var(--rand); bottom: 14px; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s; }
html[data-modus="buehne"][data-station="7"] .fuss { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) .2s, visibility 0s; }
html[data-bewegung="aus"][data-modus="buehne"] .station, html[data-bewegung="aus"][data-modus="buehne"] .fuss { transition-duration: .15s, 0s; transition-delay: 0s, 0s; }
@media (prefers-reduced-motion: reduce) { html[data-modus="buehne"] .station, html[data-modus="buehne"] .fuss { transition-duration: .15s, 0s; } }

/* Knöpfe der Kompaktform: nur im Kompaktmodus sichtbar (Desktop: unsichtbar → Karten pixelgleich) */
.feld .auf, .feld .zu, .feld .mehr-zeile { display: none; }

/* ---------- Kompakt (Telefon hoch ≤ 700 px, niedrige Querformate ≤ 500 px hoch) ---------- */
html[data-kompakt] .station, html[data-kompakt] .station[data-side] { align-items: flex-end; justify-content: center;
  padding: 0 var(--rand) calc(10px + env(safe-area-inset-bottom, 0px)); }
html[data-kompakt] .station[data-station="7"] { padding-bottom: calc(var(--fuss-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); }
html[data-kompakt] .fuss { left: var(--rand); right: var(--rand); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; }
/* Desktop: Karte höher als der Raum unter dem Kopf (kleine Fenster) → scrollt selbst; Kontur als Innenschatten (die ::before-
   Kontur würde vom overflow beschnitten). Passende Karten bleiben unberührt (pixelgleich). */
html[data-modus="buehne"] .station[data-hoch] .feld { max-height: calc(100vh - var(--kopf-unten, var(--kopf-h)) - 24px); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--m-glas-schatten), var(--g-kante), var(--glass-contour); }
html[data-modus="buehne"] .station[data-hoch] .feld::before { display: none; }
/* zu: alles außer Marke, Überschrift, Zeilentiteln, Startaktionen, Mail */
html[data-kompakt] .feld:not([data-offen]) :is(.leistungen p, .schritte p, .beispiel, .klein, .lead ~ p:not(.aktionen), h2 ~ p:not(.mail):not(.mehr-zeile)) { display: none; }
html[data-kompakt] .feld:not([data-offen]) h2 { margin-bottom: 8px; }
html[data-kompakt] .feld .leistungen li, html[data-kompakt] .feld .schritte li { position: relative; padding-right: 26px; }
html[data-kompakt] .feld:not([data-offen]) :is(.leistungen, .schritte) li { padding-top: 9px; padding-bottom: 8px; }
html[data-kompakt] .feld:not([data-offen]) :is(.leistungen, .schritte) h3 { margin: 0; }
html[data-kompakt] .feld .auf { display: block; position: absolute; inset: 0; width: 100%; min-height: 44px; border: 0; background: none;
  color: var(--text); cursor: pointer; font: inherit; }
html[data-kompakt] .feld .auf::after { content: ""; position: absolute; right: 3px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--ci-hover-duration) var(--ease); }
html[data-kompakt] .feld li .auf::after { top: 21px; margin-top: -6px; }
html[data-kompakt] .feld .auf[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
html[data-kompakt] .feld .auf:focus-visible { outline: 2px solid var(--ci-interaction-red); outline-offset: -2px; border-radius: 8px; }
html[data-kompakt] .feld .mehr-zeile { display: block; margin: 2px 0 0; position: relative; border-top: 1px solid var(--linie); }
html[data-kompakt] .feld .mehr-zeile .auf { position: relative; inset: auto; text-align: left; padding: 10px 34px 8px 0; font-size: var(--ci-station-size); font-weight: 600; letter-spacing: .01em; }
html[data-kompakt] .feld[data-offen] .mehr-zeile { display: none; }
/* offen: voller Inhalt (Satz wie V16-Telefon), höchstens 55 svh bzw. Raum unter dem Kopf, scrollt selbst; Schließen oben rechts */
html[data-kompakt] .feld[data-offen] { max-height: min(55svh, calc(100svh - var(--kopf-unten, 112px) - 24px)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
/* Kontur der offenen (scrollenden) Karte als Innenschatten des Kastens: die ::before/::after-Kontur liefe sonst mit dem Inhalt mit */
html[data-kompakt] .feld[data-offen] { box-shadow: var(--m-glas-schatten), var(--g-kante), var(--glass-contour); }
html[data-kompakt] .feld[data-offen]::before, html[data-kompakt] .feld[data-offen]::after { display: none; }
/* Schließen-Kreuz nur bei Karten ohne Zeilen (dort schließt der Zeilenknopf ∧) */
html[data-kompakt] .feld[data-offen]:not(:has(li > .auf)) .zu { display: block; position: sticky; top: 0; float: right; z-index: 6; width: 44px; height: 44px; margin: -12px -12px 0 8px;
  border: 0; background: none; color: var(--text); font: 300 28px/1 inherit; cursor: pointer; }
html[data-kompakt] .feld li[data-fokus] { box-shadow: inset 2px 0 0 var(--ci-interaction-red); padding-left: 12px; }
/* Kompaktsatz Telefon hoch: Ziel Kopf + Karte ≤ 45 % der Höhe (393×852: Karte ≤ 270 px) */
@media (max-width: 700px) and (orientation: portrait) {
  html[data-kompakt] .feld { padding: 14px 18px 6px; border-radius: var(--glass-radius); }
  html[data-kompakt] .feld h1 { font-size: 1.55rem; line-height: 1.15; margin-bottom: 8px; }
  html[data-kompakt] .feld h2 { font-size: 1.25rem; line-height: 1.2; }
  html[data-kompakt] .marke { font-size: 11px !important; margin-bottom: 7px !important; }
  html[data-kompakt] .feld:not([data-offen]) .lead { font-size: 15px; line-height: 1.45; margin-bottom: 4px; }
  html[data-kompakt] .feld:not([data-offen]) :is(.leistungen, .schritte) li { padding-top: 9px; padding-bottom: 8px; min-height: 40px; }
  html[data-kompakt] .feld:not([data-offen]) :is(.leistungen, .schritte) h3 { font-size: 15.5px; }
  html[data-kompakt] .feld:not([data-offen]) .schritte li::before { font-size: 14px; line-height: 1.45; }
  html[data-kompakt] .feld:not([data-offen]) .aktionen a[href="#software"] { display: none; }
  html[data-kompakt] .feld:not([data-offen]) .aktionen .aktion { min-height: 40px; }
  html[data-kompakt] .feld:not([data-offen]) .mail { font-size: 0; margin-bottom: 4px; }   /* „Direkter Kontakt per E-Mail:“ + Umbruch nur offen */
  html[data-kompakt] .feld:not([data-offen]) .schritte h3 { font-size: 15px; letter-spacing: 0; }
  html[data-kompakt] .feld:not([data-offen]) .schritte li { grid-template-columns: 1.9em minmax(0, 1fr); }
}
/* Kompakt quer (≤ 500 px hoch): Karte an ihrer Seite wie Desktop, unten bündig */
@media (max-height: 500px) and (orientation: landscape) {
  html[data-kompakt] .station, html[data-kompakt] .station[data-side] { justify-content: flex-start; padding: 0 var(--rand) 8px; }
  html[data-kompakt] .station[data-side="right"] { justify-content: flex-end; }
  html[data-kompakt] .feld { width: var(--feld-b); }
  html[data-kompakt] .fuss { left: auto; right: var(--rand); width: var(--feld-b); }
  html[data-kompakt] .feld:not([data-offen]) .aktionen a[href="#software"] { display: none; }
  html[data-kompakt] .station[data-station="7"] { padding-bottom: calc(var(--fuss-h, 0px) + 16px); }
}
/* Fuß kompakt: nur erste Zeile + Knopf „Hinweise“, Rest per Tippen */
.fuss .auf { display: none; }
html[data-kompakt] .fuss:not([data-offen]) p:not(:first-child) { display: none; }
html[data-kompakt] .fuss { padding: 6px 12px 6px 16px; }
html[data-kompakt] .fuss p:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html[data-kompakt] .fuss:not([data-offen]) p:first-child > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[data-kompakt] .fuss .auf { display: inline-flex; align-items: center; min-height: 36px; border: 0; background: none; color: var(--text); font: 600 12px/1 inherit;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
html[data-kompakt] .station[data-station="0"] { bottom: 0; min-height: 0; }

/* ---------- Knopf „Nächste Station“ (nur Bühne): für Screenreader, sichtbar nur bei Tastaturfokus ---------- */
.station > .weiter { display: none; }
html[data-modus="buehne"] .station > .weiter { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
html[data-modus="buehne"] .station > .weiter:focus { position: fixed; z-index: 11; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: auto; height: auto; min-height: 44px; overflow: visible; clip-path: none; transform: translateX(-50%); pointer-events: auto;
  padding: 10px 18px 12px; border-radius: 12px; background: rgba(20, 21, 24, .88); color: var(--text); font: 600 15px/1.3 var(--ci-font-family);
  letter-spacing: .01em; cursor: pointer; box-shadow: inset 0 0 0 var(--ci-base-width) var(--ci-base-colour); }

/* ---------- Namensschilder der Viertel (BAUPLAN-V17 §5; site.js setzt --x/--y/--l/--lx/--f, data-an) ----------
   Rauchglas, weiße Grundkontur 0,33 px, Montserrat 600 Versalien, roter 14-px-Strich links, 1-px-Führungslinie zum Anker. */
.schilder { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
html:not([data-modus="buehne"]) .schilder, html:not([data-szene="an"]) .schilder { display: none; }
.schild { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border-radius: 7px;
  white-space: nowrap; font: 600 13px/1.1 var(--ci-font-family); letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  text-shadow: var(--t-text); background: linear-gradient(150deg, rgba(62, 65, 72, .62), rgba(28, 30, 34, .62));
  -webkit-backdrop-filter: blur(var(--t-blur)) saturate(var(--t-sat)) brightness(var(--t-dim)); backdrop-filter: blur(var(--t-blur)) saturate(var(--t-sat)) brightness(var(--t-dim));
  box-shadow: inset 0 0 0 var(--ci-base-width) var(--ci-base-colour);
  transform: translate(var(--x, 0px), var(--y, 0px)); opacity: var(--f, 0); visibility: hidden; }
.schild[data-an] { visibility: visible; }
.schild::before { content: ""; flex: none; width: 14px; height: 2px; background: var(--ci-interaction-red); }
.schild::after { content: ""; position: absolute; top: var(--stem-top, 100%); left: var(--lx, 50%); width: 1px; height: var(--l, 24px); margin-left: -.5px;
  background: rgba(255, 255, 255, .65); }
html[data-kompakt] .schild { font-size: 12px; padding: 5px 9px 5px 8px; gap: 7px; }
/* Leistungstitel ohne interne Agentennamen. */
.schild .zeilen { display: flex; flex-direction: column; gap: 3px; }

/* Real service links remain usable in the compact reading view and on the world. */
.feld .service-link { width: fit-content; max-width: 100%; min-height: 44px; justify-content: flex-start; padding: 10px 15px; font-size: 15px; font-weight: 700; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.leistungen li:has(.service-link) { border-top: 0; }
.leistungen h3:has(.service-link) { margin-bottom: 8px; }
html[data-kompakt] .feld .leistungen li:has(.service-link) { padding-right: 0; }
/* V19.7 Bodenschrift: der Leistungsname steht in der Szene auf dem vorderen Bogen der Plattform (js/scene/hologram-boden.js).
   Der Link bleibt als Tastatur-/Screenreader-Weg, unsichtbar genau über der projizierten Schrift (site.js setzt --x/--y/--w/--h,
   hidden, solange die Schrift nicht ganz steht). Bei Tastaturfokus umrandet ein Ring die Schrift. Systemzeiger (Link). */
.schild.schild-service { pointer-events: auto; display: block; width: var(--w, 0px); height: var(--h, 0px); min-height: 0; padding: 0; gap: 0;
  border: 0; border-radius: 10px; background: none; box-shadow: none; text-shadow: none; color: transparent; opacity: 1;
  -webkit-backdrop-filter: none; backdrop-filter: none; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.schild.schild-service::before, .schild.schild-service::after { display: none; }
.schild.schild-service .zeilen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.schild.schild-service[hidden] { display: none; }
/* Fokusring: der gemeinsame der Seite (shared/base.css :focus-visible, weiß mit rotem Saum) um die Schrift */
.schild.schild-service:focus-visible { box-shadow: 0 0 0 3px var(--ci-interaction-red); }
html[data-theme="light"] .schild.schild-service { background: none; }
.feld .work-entry { margin-top: 4px; }
.work-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 20px 0 6px; }
.work-tile { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 3px; min-width: 0; text-decoration: none; }
.work-tile img { width: 100%; height: clamp(64px, 9vh, 100px); object-fit: cover; object-position: top; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; background: var(--ci-black); }
.work-title { margin-top: 5px; font-size: 15px; line-height: 1.3; font-weight: 650; }
.work-kind { font-size: 12px; line-height: 1.4; color: var(--text-2); }
.work-tile:is(:hover, :focus-visible) .work-title { text-decoration: underline; text-decoration-color: var(--ci-interaction-red); text-underline-offset: 4px; }
.work-all .aktion { font-size: 15px; }
html[data-kompakt] .work-preview { gap: 10px 14px; margin-top: 12px; }
html[data-kompakt] .work-tile img { height: 56px; }
html[data-kompakt] .work-title { font-size: 13px; }
html[data-kompakt] .work-kind { font-size: 11px; }
html[data-kompakt] #start .feld .work-entry { display: block; }

/* ---------- Diagnose ?info (BAUPLAN-V17 §7E) ---------- */
.diag { position: fixed; z-index: 30; left: 6px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 12px);
  padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #e8eaed; pointer-events: none;
  font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; white-space: normal; }

/* ---------- Drehen an jeder Station (V18.1; site.js): Zeiger greift die 3D-Fläche, Hinweis an der Startstation ----------
   Karten, Kopf und Fuß liegen darüber und behalten ihren Zeiger. data-ziehen = Maus gedrückt, data-gedreht = schon gedreht. */
html[data-modus="buehne"][data-szene="an"] #szene { cursor: grab; }
html[data-modus="buehne"][data-ziehen], html[data-modus="buehne"][data-ziehen] * { cursor: grabbing !important; user-select: none; }
/* V19.6: Maus über einem Leistungs-Hologramm (site.js, data-holo): Hand statt Greifer; Ziehen dreht weiter wie zuvor */
html[data-modus="buehne"][data-szene="an"][data-holo] #szene { cursor: pointer; }
.dreh-hinweis { display: none; }
html[data-modus="buehne"][data-szene="an"] .dreh-hinweis { display: flex; position: fixed; z-index: 1; left: 50%; bottom: 22px; margin: 0;
  align-items: center; gap: 9px; padding: 7px 13px 7px 11px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  font: 600 11.5px/1.1 var(--ci-font-family); letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 238, 241, .9);
  text-shadow: var(--t-text); background: linear-gradient(150deg, rgba(62, 65, 72, .55), rgba(28, 30, 34, .55));
  -webkit-backdrop-filter: blur(5px) saturate(1.15) brightness(.6); backdrop-filter: blur(5px) saturate(1.15) brightness(.6);
  box-shadow: inset 0 0 0 var(--ci-base-width) var(--ci-base-colour);
  transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
html[data-modus="buehne"][data-szene="an"][data-station="0"]:not([data-gedreht]) .dreh-hinweis { opacity: 1; visibility: visible;
  transition: opacity .6s var(--ease) .8s, visibility 0s linear .8s; }
/* Kompakt: Karte steht unten → Hinweis unter dem Kopf */
html[data-kompakt][data-modus="buehne"][data-szene="an"] .dreh-hinweis { bottom: auto; top: calc(var(--kopf-unten, 112px) + 10px); font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { .dreh-hinweis, html[data-modus="buehne"][data-szene="an"][data-station="0"]:not([data-gedreht]) .dreh-hinweis { transition-duration: .15s, 0s; transition-delay: 0s; } }

/* Hover/focus/tap names on actual temple figures; invisible targets never catch input. */
.statue-targets { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
html:not([data-modus="buehne"]) .statue-targets,
html:not([data-szene="an"]) .statue-targets { display: none; }
.statue-target { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
  padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit;
  pointer-events: auto; cursor: default; touch-action: pinch-zoom; }   /* V19.10b (Owner 23.10.): kein „?“-Zeiger, normaler Pfeil */
.statue-target[hidden] { display: none; }
.statue-target:focus-visible { outline: 2px solid #ea0313; outline-offset: 3px; }
.statue-target .statue-label { left: var(--label-left); top: var(--label-top); transform: none; --f: 1; pointer-events: none; }
/* V19.3 Crew-Schild (Owner 21.10.): oben NAME, rote Trennlinie #ea0313, darunter die Rolle kleiner. An Über uns stehen alle
   sichtbaren Köpfe beschriftet (statue-targets[data-crew]) und blenden bei Überdeckung weich aus; sonst Name bei Zeiger/Fokus. */
.schild.crew-label { padding: 6px 11px 7px; text-align: center; }
.schild.crew-label::before { display: none; }
.crew-label .zeilen { align-items: center; gap: 0; }
.crew-label .rolle { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--ci-interaction-red);
  font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--text-2); }
.statue-targets[data-crew] .statue-label { visibility: visible; opacity: 0; transition: opacity .35s var(--ease); }
/* V19.4: fest über dem Scheitel der eigenen Figur (site.js), fernere Köpfe kleiner (--k) und blasser (--tiefe); Linie zum Kopf
   dünn und dezent weiß */
.statue-targets[data-crew] .statue-label { transform: scale(var(--k, 1)); transform-origin: 50% 100%; }
.statue-targets[data-crew] .statue-label[data-an] { opacity: var(--tiefe, 1); }
.statue-targets[data-crew] .statue-label::after { background: rgba(255, 255, 255, .38); }
@media (max-width: 700px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .schild.crew-label { padding: 4px 8px 5px; font-size: 10.5px; letter-spacing: .07em; }
  .crew-label .rolle { margin-top: 3px; padding-top: 3px; font-size: 9px; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) { .statue-targets[data-crew] .statue-label { transition: none; } }
html[data-bewegung="aus"] .statue-targets[data-crew] .statue-label { transition: none; }

/* The responsible contact stays visible in the compact contact card. */
html[data-kompakt] #contact .feld .contact-person { display: block; font-size: 14px; margin: 8px 0 4px; }

/* Bounded native actions: clear click areas without decorative arrows. */
.feld :is(.aktionen,.work-entry,.work-all,.own-work) .aktion { display: flex; width: 100%; min-height: 52px; padding: 13px 19px; margin: 6px 0; font-size: 15px; }
.feld .aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 10px 24px; }
.feld :is(.own-work,.work-all) { width: 100%; }
@media (max-width: 600px) { .feld :is(.own-work,.work-all) .aktion { min-height: 72px; } }

.legal-links { display: flex; gap: 12px 22px; flex-wrap: wrap; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
html[data-kompakt] .fuss .legal-links { display: flex; }


/* Reading a detail keeps the city running and the header reachable. */
html[data-detail-open] .station .feld { opacity: 0 !important; transform: translateY(40px) !important; pointer-events: none !important; transition: opacity 200ms ease, transform 240ms ease !important; }
html[data-detail-open] :is(.schilder,.schild,.statue-targets,.statue-target,.dreh-hinweis,.fuss,.hinweis) { visibility: hidden !important; pointer-events: none !important; }
html[data-bewegung="aus"][data-detail-open] .station .feld { transition: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-detail-open] .station .feld { transition: none !important; } }

/* Icon controls share the SVG-only red glow in base.css. */
#b-settings {
  border: 0;
  background: transparent;
}
html[data-bewegung="aus"] #b-settings { transition: none; }
@media (prefers-reduced-motion: reduce) { #b-settings { transition: none; } }
/* The mobile card close retains its existing placement and 44px target. */
html[data-kompakt] .feld[data-offen]:not(:has(li > .auf)) .zu.icon-action {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px;
  background: transparent;
}

/* Legal access stays in the same bottom-left position throughout the world. */
.stage-legal { display: none; }
html[data-modus="buehne"] .stage-legal {
  position: fixed; z-index: 10; left: max(12px, env(safe-area-inset-left, 0px));   /* Linkpolster 8 px → Text bei 20 px */
  bottom: max(8px, env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px;
  /* V19.13 (Rundgang 24.10., P04; Owner: keine Kästen): statt Differenz-Modus (über mittlerem Grau wurde die Schrift grau, Station 08
     2,6:1) weiße Schrift mit enger dunkler Kontur und weichem Schatten – über Stadt, Lichtern und weißem Boden lesbar, ohne Fläche */
  color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px #000, 0 0 12px rgb(0 0 0 / 60%);
}
.stage-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 500; text-underline-offset: 4px; }
.stage-legal a:hover { color: var(--ci-interaction-red); }
html[data-theme="light"] .stage-legal { color: #17191d; text-shadow: 0 1px 3px #fff, 0 0 8px #fff, 0 0 15px #fff; }
html[data-intro]:not([data-intro="done"]) .stage-legal { visibility: hidden; }
@media (max-width: 700px) {
  html[data-modus="buehne"] .stage-legal { left: max(8px, env(safe-area-inset-left, 0px)); bottom: env(safe-area-inset-bottom, 0px); gap: 10px; }
}

/* V19: Standbild lesbar (Fremdblick P0-2). Die Ansicht „pur“ (Owner 19.10.: die Welt trägt die Seite, Glas nur für Details)
   bleibt ohne Glasplatte. Lesbar wird es durch ein abgedunkeltes Standbild und denselben Schriftschatten wie im 3D-Modus. */
html[data-szene="aus"] :is(.poster, .poster-rechts, .poster-ende) { filter: brightness(.42) saturate(.85); }
html[data-szene="aus"] .station .feld { text-shadow: 0 2px 4px #000, 0 0 18px #000, 0 0 36px #000; }
html[data-szene="aus"] .station .feld :is(h1, h2) { font-weight: 400; }
html[data-szene="aus"] .station .feld p { color: var(--text); }

/* V19.13 (Rundgang 24.10., P01/P02): Hinweis im Rückfall; nach Kontextverlust mit „Neu laden“ in eigener Zeile */
.hinweis-3d .hinweis-neu { display: flex; width: fit-content; margin-top: 10px; }
/* V19.13 (Rundgang 24.10., P07): Schilder und Crew-Knöpfe liegen jetzt im DOM der aktiven Station (Tab-Reihenfolge). Bildunterschrift
   und Ersatz-Leistungsknöpfe bleiben darüber, wie zuvor, als die Ebenen vor <main> lagen. */
html[data-modus="buehne"] .station > :is(.clean-caption, .clean-service-fallback) { z-index: 2; }
/* V19.13 (Rundgang 24.10., P27): ohne sichtbares Schild keine leere Landmarke der Schilder-Navigation (visibility statt hidden: die
   Schilder werden weiter gemessen) */
.schilder:not(:has(> [data-an])) { visibility: hidden; }
/* V19.13 (Rundgang 24.10., P19): schmale Querformate (400 % Zoom, 320–479 px breit): acht Nummern in einer Zeile laufen zusammen
   („0102…“). Dort zeigt die Leiste nur ihre Marken und die Nummer der aktuellen Station; die übrigen Nummern bleiben für
   Screenreader im Link. */
@media (max-width: 479px) and (orientation: landscape) {
  .stationen .nr, .stationen .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stationen a.aktion[aria-current="step"] .nr { position: static; width: auto; height: auto; overflow: visible; clip-path: none; letter-spacing: .04em; }
}
/* V19.14 (Owner 24.10.: große Monitore, P43 – ab 1920 px und besonders bei 2560×1440 wuchsen Textfelder, Bildunterschriften und
   Kopfabstände nicht mit und wirkten verloren): zweite Größenstufe. --gu = 1 px bei 1440×900, wächst mit der kleineren der beiden
   Achsen (min(vw/1440, vh/900)): 1920×1080 → 1,2 px, 2560×1440 → 1,6 px. Jede Größe max(bisher, n × --gu): nie kleiner als bisher,
   das Verhältnis wie bei 1440×900. Unter 1920 px Breite oder bis 900 px Höhe (dort gelten die dichten Sätze für niedrige Fenster)
   bleibt alles unverändert. Kopf: experience.css, Bildunterschrift: clean-view.css. */
@media (min-width: 1920px) and (min-height: 901px) {
  :root { --gu: min(.0694444vw, .1111111vh); --kopf-h: max(88px, calc(88 * var(--gu))); --feld-b: max(35rem, calc(560 * var(--gu))); }
  /* Textfelder (Kartenansicht, Rückfall ohne 3D): die CI-Größen nur innerhalb des Feldes mitwachsen lassen */
  .feld { --ci-body-size: max(18px, calc(18 * var(--gu))); --ci-station-size: max(17px, calc(17 * var(--gu)));
    --ci-station-label-size: max(14px, calc(14 * var(--gu)));
    padding: max(30px, calc(30 * var(--gu))) max(32px, calc(32 * var(--gu))) max(24px, calc(24 * var(--gu))); }
  .feld h1 { font-size: max(3.3rem, calc(52.3 * var(--gu))); margin-bottom: max(18px, calc(18 * var(--gu))); }
  .feld h2 { font-size: max(2.45rem, calc(38.5 * var(--gu))); margin-bottom: max(16px, calc(16 * var(--gu))); }
  .feld .leistungen p, .feld .schritte p { font-size: max(16px, calc(16 * var(--gu))); }
  .leistungen li { padding: max(11px, calc(11 * var(--gu))) 0 max(10px, calc(10 * var(--gu))); }
  .schritte li { padding: max(10px, calc(10 * var(--gu))) 0 max(9px, calc(9 * var(--gu))); }
  .schritte li::before { font-size: max(15px, calc(15 * var(--gu))); }
  .liefer li { font-size: max(15px, calc(15 * var(--gu))); padding-left: max(22px, calc(22 * var(--gu))); }
  .liefer li::before { top: max(11px, calc(11 * var(--gu))); width: max(11px, calc(11 * var(--gu))); }
  .feld .klein { font-size: max(14px, calc(14 * var(--gu))); }
  .feld :is(.aktionen,.work-entry,.work-all,.own-work) .aktion { font-size: max(15px, calc(15 * var(--gu)));
    min-height: max(52px, calc(52 * var(--gu))); padding: max(13px, calc(13 * var(--gu))) max(19px, calc(19 * var(--gu))); }
  .feld .service-link { font-size: max(15px, calc(15 * var(--gu))); min-height: max(44px, calc(44 * var(--gu)));
    padding: max(10px, calc(10 * var(--gu))) max(15px, calc(15 * var(--gu))); }
  .feld .mail .aktion { font-size: max(1.35rem, calc(21.6 * var(--gu))); }
  .marke { gap: max(12px, calc(12 * var(--gu))); }
  .marke::before { width: max(22px, calc(22 * var(--gu))); }
  .work-title { font-size: max(15px, calc(15 * var(--gu))); }
  .work-kind { font-size: max(12px, calc(12 * var(--gu))); }
  .work-tile img { height: max(100px, calc(81 * var(--gu))); }
  .fuss { font-size: max(13px, calc(13 * var(--gu))); padding: max(16px, calc(16 * var(--gu))) max(22px, calc(22 * var(--gu))) max(14px, calc(14 * var(--gu))); }
  /* Rechtslinks unten links, Namensschilder und Crew-Schilder in der Welt, Dreh-Hinweis */
  html[data-modus="buehne"] .stage-legal { left: max(12px, calc(12 * var(--gu)), env(safe-area-inset-left, 0px)); bottom: max(8px, calc(8 * var(--gu)), env(safe-area-inset-bottom, 0px)); gap: max(10px, calc(10 * var(--gu))); }
  .stage-legal a { font-size: max(13px, calc(13 * var(--gu))); min-height: max(44px, calc(44 * var(--gu))); padding: 0 max(8px, calc(8 * var(--gu))); }
  .schild:not(.schild-service) { font-size: max(13px, calc(13 * var(--gu))); gap: max(8px, calc(8 * var(--gu)));
    padding: max(6px, calc(6 * var(--gu))) max(11px, calc(11 * var(--gu))) max(6px, calc(6 * var(--gu))) max(9px, calc(9 * var(--gu))); }
  .schild:not(.schild-service)::before { width: max(14px, calc(14 * var(--gu))); }
  .schild.crew-label { padding: max(6px, calc(6 * var(--gu))) max(11px, calc(11 * var(--gu))) max(7px, calc(7 * var(--gu))); }
  .crew-label .rolle { font-size: max(10.5px, calc(10.5 * var(--gu))); margin-top: max(5px, calc(5 * var(--gu))); padding-top: max(5px, calc(5 * var(--gu))); }
  html[data-modus="buehne"][data-szene="an"] .dreh-hinweis { bottom: max(22px, calc(22 * var(--gu))); font-size: max(11.5px, calc(11.5 * var(--gu)));
    gap: max(9px, calc(9 * var(--gu))); padding: max(7px, calc(7 * var(--gu))) max(13px, calc(13 * var(--gu))) max(7px, calc(7 * var(--gu))) max(11px, calc(11 * var(--gu))); }
}