/* ==========================================================================
   Bremen SysCom – Layout der durchgehenden Inszenierung (Startseite)
   Grundsatz: Eine fixierte, bildschirmfüllende Bühne. Jede Station ist ein
   hoher Abschnitt mit einem klebenden Rahmen; die Karte liegt immer in einer
   bewusst abgedunkelten Zone (Desktop links/rechts, Hochformat unten).
   Ohne JavaScript/WebGL: kurze Abschnitte mit Standbild – alles bleibt lesbar.
   Nur Startseite. Kopfzeile, Menü, Buttons, Kontaktlinks, Fuß und Schnellzugriff: site.css (alle Seiten).
   ========================================================================== */


/* Fortschrittslinie unter der Kopfzeile */
.progress { position: fixed; top: var(--header-h); left: 0; right: 0; height: 2px; z-index: 49; pointer-events: none; }
.progress::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--petrol), var(--signal)); transform-origin: left; transform: scaleX(var(--progress, 0)); }

/* ---------- Bühne ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage__canvas { width: 100%; height: 100%; height: 100lvh; display: block; opacity: 0; transition: opacity .35s ease; }
.webgl .stage__canvas { opacity: 1; }
.no-webgl .stage, html:not(.js) .stage { display: none; }
.stage-off .stage__canvas { visibility: hidden; }

/* Lesezonen: weiche Abdunklung auf der Textseite */
.stage__scrim { position: absolute; inset: 0; pointer-events: none; }
.stage__scrim::before, .stage__scrim::after { content: ""; position: absolute; inset: 0; transition: opacity .7s ease; }
.stage__scrim::before { background: linear-gradient(90deg, rgba(7, 9, 19, .9) 0%, rgba(7, 9, 19, .72) 26%, rgba(7, 9, 19, .25) 44%, rgba(7, 9, 19, 0) 58%); }
.stage__scrim::after { background: linear-gradient(270deg, rgba(7, 9, 19, .9) 0%, rgba(7, 9, 19, .72) 26%, rgba(7, 9, 19, .25) 44%, rgba(7, 9, 19, 0) 58%); opacity: 0; }
[data-active-station="0"] .stage__scrim::before { background: linear-gradient(90deg, rgba(7, 9, 19, .95) 0%, rgba(7, 9, 19, .86) 30%, rgba(7, 9, 19, .45) 46%, rgba(7, 9, 19, 0) 60%); }
[data-side="right"] .stage__scrim::before { opacity: 0; }
[data-side="right"] .stage__scrim::after { opacity: 1; }

/* Projizierte Gerätebeschriftung */
.stage__labels { position: absolute; inset: 0; overflow: hidden; }
.stage-label {
  position: absolute; left: 0; top: 0; opacity: 0;
  translate: 0 -50%;
  padding: 6px 9px 6px 16px;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1;
  color: var(--bone); white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background: linear-gradient(90deg, rgba(7, 9, 19, .84), rgba(7, 9, 19, .84)) no-repeat 12px 0 / calc(100% - 12px) 100%;
  will-change: transform, opacity;
}
.stage-label::before { content: ""; position: absolute; left: -4px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--signal); background: rgba(7, 9, 19, .8); }
.stage-label.is-left { translate: -100% -50%; padding: 6px 16px 6px 9px; background-position: 0 0; }
.stage-label.is-left::before { left: auto; right: -4px; }
/* Passt die Beschriftung auf keiner Seite neben ihren Punkt (schmale Fenster), bleibt sie im Bild – ohne Punkt */
.stage-label.is-free::before { display: none; }
.stage-label.is-free { padding: 6px 9px; background-position: 0 0; background-size: 100% 100%; }
.stage-label--ember::before { border-color: var(--ember); }
.stage-label--ember { color: #ffd9bd; }

/* ---------- Kapitel-Leiste (Seitenübersicht) ----------
   Einstieg, Leistungen 01–09, Support, Kontakt, Kunden. Leistungen tragen ihre Nummer, die übrigen Bereiche ein
   Wort (keine konkurrierenden Nummern); kleine Abstände trennen die drei Gruppen. Bei geringer Fensterhöhe rücken
   die Einträge enger zusammen, die Leiste bleibt zwischen Kopfzeile und unterem Rand. */
.rail { display: none; }
@media (min-width: 1100px) {
  .js .rail { display: block; position: fixed; right: clamp(14px, 1.8vw, 28px); top: calc(50% + var(--header-h) / 2); z-index: 40; transform: translateY(-50%); }
  .rail ol { display: grid; gap: 4px; justify-items: end; }
  .rail__group { margin-top: 10px; }
  .rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 5px 0 5px 12px; color: var(--mist-dim); font-family: var(--font-mono); font-size: .68rem; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
  .rail__area a { letter-spacing: .06em; }
  /* Beschriftung links neben der Nummer und außerhalb des Flusses: Die Nummern stehen bündig in einer schmalen
     Spalte am Rand (ca. 60 px), statt dass unsichtbare Beschriftungen ~200 px über Szene und Karten belegen */
  .rail__t { position: absolute; right: 100%; top: 50%; padding: 3px 7px; background: rgba(7, 9, 19, .84); opacity: 0; transform: translate(6px, -50%); transition: opacity .3s ease, transform .3s var(--ease); white-space: nowrap; pointer-events: none; }
  .rail__n { position: relative; padding-right: 22px; }
  .rail__n::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 1px; background: currentColor; transition: width .3s var(--ease); }
  /* Das aktive Kapitel nennt seinen Namen kurz beim Wechsel (is-announce, rail.js), sonst bei Hover/Fokus –
     an den Haltepunkten liegt so keine Beschriftung dauerhaft über Motiven am rechten Bildrand */
  .rail a:hover .rail__t, .rail a:focus-visible .rail__t, .rail a.is-announce .rail__t { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
  /* Karte rechts (data-side="right"): dort nur die hervorgehobene Nummer, damit die Beschriftung nicht über dem Text liegt */
  [data-side="right"] .rail a.is-announce:not(:hover):not(:focus-visible) .rail__t { opacity: 0; pointer-events: none; }
  .rail a[aria-current] { color: var(--signal); }
  .rail a[aria-current] .rail__n::after { width: 20px; }
  .rail a:hover { color: var(--bone); }
}
@media (min-width: 1100px) and (max-height: 600px) {
  .rail ol { gap: 1px; }
  .rail__group { margin-top: 6px; }
  .rail a { padding-block: 3px; }
}
@media (min-width: 1100px) and (max-height: 430px) {
  .rail ol { gap: 0; }
  .rail__group { margin-top: 4px; }
  .rail a { padding-block: 1px; font-size: .6rem; }
}

/* ---------- Stationen ---------- */
main { position: relative; z-index: 2; }
.station { position: relative; min-height: 100vh; min-height: 100svh; }
.station__frame {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: calc(var(--header-h) + 28px) var(--margin) 48px;
}
/* Mit laufender Szene: Scrollstrecke + klebender Rahmen */
.webgl .station { height: calc(var(--h) * 1vh); }
.webgl .station__frame { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .webgl .station { height: max(100vh, calc(var(--h) * .6vh)); }
}

/* Standbild (ohne WebGL / ohne Skript) */
.station__poster { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.station__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.station__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 9, 19, .88) 0%, rgba(7, 9, 19, .55) 38%, rgba(7, 9, 19, 0) 62%); }
.station[data-side="right"] .station__poster::after { background: linear-gradient(270deg, rgba(7, 9, 19, .88) 0%, rgba(7, 9, 19, .55) 38%, rgba(7, 9, 19, 0) 62%); }
.station[data-side="right"] .station__poster img { object-position: 30% 50%; }
.webgl .station__poster { display: none; }

/* Karte */
.station__card {
  --e: var(--enter, 1); --l: var(--leave, 0);
  position: relative; max-width: 31rem; width: 100%;
  padding: 1.7rem 1.9rem 1.8rem;
  background: linear-gradient(180deg, rgba(10, 13, 27, .8), rgba(10, 13, 27, .66));
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  /* Ein- und Ausblenden spiegelbildlich (voll zwischen 17 % und 83 % des Wegs): rückwärts ist der
     ankommende Text damit genauso früh lesbar wie vorwärts */
  opacity: min(calc(var(--e) * 1.5 - .25), calc(1.25 - var(--l) * 1.5));
  transform: translate3d(calc((1 - var(--e)) * -56px), 0, 0);
  will-change: transform, opacity;
}
.station__card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 56px; height: 2px; background: var(--signal); transform-origin: left; transform: scaleX(var(--e)); }
.station[data-side="right"] .station__card { justify-self: end; transform: translate3d(calc((1 - var(--e)) * 72px), 0, 0); }
.station[data-side="right"] .station__card::before { left: auto; right: -1px; transform-origin: right; }

.kicker { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin-bottom: 1rem; }
.kicker__n { color: var(--signal); font-weight: 700; font-size: .85rem; }
.kicker__of { color: var(--mist-dim); margin-right: .4rem; }

.chapter-mark {
  display: flex; flex-direction: column; gap: .2rem;
  margin: -.2rem 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-style: italic; font-weight: 420; font-size: 1.06rem; color: var(--bone-dim);
  clip-path: inset(0 calc((1 - var(--e)) * 100%) 0 0);
}
.chapter-mark span { font-family: var(--font-mono); font-style: normal; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }

.card__title { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); margin-bottom: 1rem; overflow-wrap: break-word; hyphens: auto; }
.card__title .line { display: inline; }
.card__title--xl { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); }
.card__title--xl .line { display: block; }
.card__title .line--accent { font-style: italic; font-weight: 420; color: var(--signal-soft); }
.card__title, .card__sub { clip-path: inset(-.25em calc((1 - var(--e)) * 100% - .3em) -.3em -.3em); }
.card__sub { font-size: clamp(1.35rem, 1rem + .9vw, 1.8rem); margin: 1.2rem 0 .6rem; color: var(--bone); }
.card__sub::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; background: var(--ember); vertical-align: .08em; }
.station__card > p:not([class]) { color: #dfe3f2; max-width: 34em; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.tags li { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--signal-soft); border: 1px solid rgba(95, 228, 200, .32); padding: .3rem .55rem; border-radius: var(--radius); }

.svc-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.svc-index a { display: flex; gap: .55rem; padding: .45rem 0; font-size: .88rem; font-weight: 560; color: var(--bone-dim); border-bottom: 1px solid rgba(170, 182, 255, .08); }
.svc-index a span { font-family: var(--font-mono); font-size: .72rem; color: var(--signal); padding-top: .15em; }
.svc-index a:hover { color: var(--bone); }

/* ---------- Einstieg ---------- */
.station--hero .station__card { background: none; border: 0; box-shadow: none; padding: 0; max-width: 40rem; opacity: 1; transform: none; }
.station--hero .station__card::before { display: none; }
.hero__title { font-size: clamp(3rem, 1.4rem + 5.2vw, 6.6rem); line-height: .96; margin-bottom: 1.5rem; }
.hero__line { display: block; }
.hero__line:first-child { font-weight: 360; color: var(--mist); }
.hero__line--strong { font-weight: 720; }
.hero__lead { font-size: clamp(1.07rem, .95rem + .45vw, 1.3rem); color: #d6dbee; max-width: 27em; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.4rem; }
.hero__support { font-size: .95rem; color: var(--mist); }
.hero__support a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 660; color: var(--signal-soft); margin-left: .3rem; }
.hero__support .icon { width: 1em; height: 1em; }
.scroll-cue {
  position: absolute; left: var(--margin); bottom: 28px;
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist-dim);
  opacity: calc(1 - var(--leave, 0) * 3 - var(--scrolled, 0));
}
.scroll-cue__line { width: 1px; height: 38px; background: linear-gradient(var(--signal), transparent); transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
html:not(.webgl) .scroll-cue { display: none; }

/* ---------- Tafeln für Support und Kontakt ---------- */
.station__card--panel { max-width: 40rem; background: linear-gradient(180deg, var(--panel-strong), rgba(8, 10, 21, .86)); }

.hours { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 1.3rem; font-size: .95rem; color: var(--mist); }
.hours .icon { color: var(--signal); margin-top: .2em; }
.routes { display: grid; border-top: 1px solid var(--line); }
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem .2rem; border-bottom: 1px solid var(--line); transition: background .2s ease; }
.route:hover { background: rgba(95, 228, 200, .06); }
.route__idx { font-family: var(--font-mono); font-size: .72rem; color: var(--signal); }
.route__body { display: grid; gap: .15rem; }
.route__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.route__meta { font-size: .86rem; color: var(--mist); }
.route__icon { color: var(--signal); }

.contact__form { margin: -.5rem 0 1.6rem; }

/* ---------- Kunden (letzte Station, gemeinsam mit dem Fuß; keine 3D-Szene dahinter) ---------- */
.site-end { position: relative; z-index: 3; background: #05060d; }
.clients { background: var(--ink); border-top: 1px solid var(--line); padding: clamp(2.2rem, 5vh, 3.4rem) 0 clamp(1.6rem, 3.5vh, 2.6rem); }
.clients__title { display: flex; align-items: center; gap: .8rem; font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.35rem); margin-bottom: clamp(1rem, 2.6vh, 1.6rem); }
.clients__title::before { content: ""; width: 1.75rem; height: 1px; background: var(--signal); flex: none; }
/* Logo-Wand: gleich große helle Felder (die Logos bleiben in ihren Originalfarben, auch mit weißem Grund);
   --box = Höhe der Logofläche, --lh je Logo = optisch ausgeglichene Höhe; max-width + contain verhindern Verzerrung */
.clients__list { --cols: 6; --gap: 12px; --box: 5rem; --pad-x: 14px; --pad-y: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.client {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid; place-items: center; min-width: 0;
  height: calc(var(--box) + 2 * var(--pad-y)); padding: var(--pad-y) var(--pad-x);
  background: #fff; border-radius: var(--radius);
}
.client img { height: calc(var(--lh, .5) * var(--box)); width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 1099px) { .clients__list { --cols: 4; --box: 4.2rem; } }
@media (max-width: 599px) { .clients__list { --cols: 2; --gap: 10px; --box: 3.6rem; --pad-x: 10px; --pad-y: 9px; } }
/* Rechts Platz für die Kapitel-Leiste (Nummern und Beschriftung „Kunden“), damit sie nie über einem Logo liegt */
@media (min-width: 1100px) {
  .js .site-end > .clients, .js .site-end > .site-footer { padding-right: max(0px, 12rem - var(--margin)); }
}

/* ==========================================================================
   Hochformat / schmale Fenster
   ========================================================================== */
@media (max-width: 899px) {
  /* Lesezone unten */
  .stage__scrim::before, [data-active-station] .stage__scrim::before { background: linear-gradient(0deg, rgba(7, 9, 19, .96) 0%, rgba(7, 9, 19, .86) 34%, rgba(7, 9, 19, .2) 56%, rgba(7, 9, 19, 0) 66%); }
  .stage__scrim::after { display: none; }
  [data-side="right"] .stage__scrim::before { opacity: 1; }

  .station__frame { align-items: end; padding: calc(var(--header-h) + 20px) var(--margin) calc(var(--dock-h) + 18px + env(safe-area-inset-bottom)); }
  .station__card, .station[data-side="right"] .station__card { justify-self: stretch; max-width: none; padding: 1.15rem 1.15rem 1.25rem; transform: translate3d(0, calc((1 - var(--e)) * 36px), 0); background: rgba(9, 12, 25, .9); }
  .card__title { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.3rem); margin-bottom: .6rem; }
  .card__sub { margin: .7rem 0 .35rem; }
  .kicker { margin-bottom: .6rem; }
  .chapter-mark { margin-bottom: .8rem; padding-bottom: .6rem; font-size: .95rem; }
  .station__card > p:not([class]) { font-size: .98rem; line-height: 1.5; }
  .tags { margin-top: .8rem; }
  .station:not(.station--hero) .tags li:nth-child(n+4) { display: none; }
  /* Querverweise zu den anderen Leistungen (IT-Betreuung, Server & Systeme) auch mobil: kompakt, zwei Spalten
     (schmale Geräte: eine), Touchflächen ≥ 44 px. Wird die Karte dadurch länger als der Platz, scrollt sie wie
     andere lange Karten im eigenen Bereich (stations.js, is-scroll) – der Abstand unten hält den Schnellzugriff frei. */
  .svc-index { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25rem), 1fr)); gap: 0 .9rem; margin-top: .9rem; padding-top: .25rem; }
  .svc-index a { align-items: center; min-height: 44px; font-size: .88rem; line-height: 1.25; padding: .35rem 0; }
  .svc-index a span { padding-top: 0; }

  .station--hero .station__frame { align-items: end; }
  .hero__title { font-size: clamp(2.5rem, 1.2rem + 7.6vw, 3.6rem); margin-bottom: 1rem; }
  .hero__lead { font-size: 1rem; margin-bottom: 1.2rem; }
  .hero__actions { flex-wrap: nowrap; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; padding-inline: .9rem; font-size: .92rem; }
  .scroll-cue { display: none; }
  .station__poster img { object-position: 50% 30%; }
  .station__poster::after, .station[data-side="right"] .station__poster::after { background: linear-gradient(0deg, rgba(7, 9, 19, .96) 0%, rgba(7, 9, 19, .7) 40%, rgba(7, 9, 19, 0) 65%); }

  /* Textreiche Tafeln laufen im Hochformat frei über die Bühne (ohne Stationsführung, z. B. Entwicklungsmodi) */
  html:not(.guided).webgl .station--flow-m { height: auto; padding-top: 62vh; padding-bottom: 30vh; }
  html:not(.guided).webgl .station--flow-m .station__frame { position: relative; height: auto; min-height: 0; padding-top: 0; }
  html:not(.guided) .station--flow-m .station__card { transform: none; opacity: 1; }
  /* Mit Stationsführung: dieselbe Wirkung im eigenen Scrollbereich – Karte beginnt unter dem Motiv und läuft darüber */
  .guided .station.is-scroll .station__frame { padding-top: 52vh; padding-top: 52svh; }
  .route__title { font-size: 1.15rem; }
  .stage-label { font-size: .62rem; }
}
/* Hochformat (Handy): Die Karte beginnt etwas höher (46 % statt 52 % der Höhe) – direkt unter dem Motiv, das bei etwa
   47 % endet (timeline.js › REGION.port). So sind beim Ankommen rund zwei Textzeilen mehr zu sehen. Im Querformat
   bleibt es bei 52 %, dort reicht das Motiv bis an die Karte. */
@media (max-width: 899px) and (orientation: portrait) {
  .guided .station.is-scroll .station__frame { padding-top: 46vh; padding-top: 46svh; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .station__card { padding: 1.3rem 1.5rem 1.4rem; }
  .card__title { font-size: clamp(1.8rem, 1rem + 2.2vw, 2.8rem); }
  .hero__title { font-size: clamp(2.8rem, 1rem + 4.8vw, 5.4rem); margin-bottom: 1.1rem; }
  .hero__lead { margin-bottom: 1.4rem; }
}

/* ---------- Stationsführung (stations.js, nur mit JavaScript und WebGL) ----------
   Eine Geste führt zur nächsten Station; die Führung scrollt selbst. Abschnitte je eine Bildschirmhöhe,
   Rahmen in sichtbarer Bildschirmhöhe (dvh: Browserleisten), Karten mit mehr Inhalt als Platz
   scrollen in ihrem eigenen Bereich (is-scroll), ohne dass die Seite mitläuft. */
html.guided.webgl { scroll-behavior: auto; overflow-anchor: none; overscroll-behavior-y: none; }
/* Einfinger-Wischen verarbeitet die Führung; Pinch-Zoom bleibt beim Browser. Hineingezoomt: frei verschieben. */
html.guided.webgl, html.guided.webgl body { touch-action: pinch-zoom; }
html.guided.guided-zoomed, html.guided.guided-zoomed body { touch-action: auto; }
/* Je Station genau eine Bildschirmhöhe: Die Führung schiebt Abschnitt für Abschnitt weich ein, ohne Klebestrecke */
html.guided.webgl .station { height: 100vh; height: 100dvh; }
html.guided.webgl .station__frame {
  height: 100vh; height: 100dvh;
  padding-left: max(var(--margin), env(safe-area-inset-left));
  padding-right: max(var(--margin), env(safe-area-inset-right));
}
/* Rechtsbündige Karte (data-side="right", derzeit keine Station) mit Abstand zur Kapitel-Leiste */
@media (min-width: 1100px) {
  .js .station[data-side="right"] .station__frame { padding-right: max(var(--margin), 7.5rem, env(safe-area-inset-right)); }
}
.guided .station.is-scroll .station__frame {
  align-items: start;
  overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: thin; scrollbar-color: rgba(170, 182, 255, .3) transparent;
}
/* Kunden + Fuß = letzte Station: füllt den Schirm unter der Kopfzeile, damit am Haltepunkt keine halbe Karte
   darüber steht; längerer Inhalt scrollt im eigenen Bereich (Kunden oben, Fuß darunter) */
.guided .site-end {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h));
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
  scrollbar-width: thin; scrollbar-color: rgba(170, 182, 255, .3) transparent;
}
/* Fuß: Gestaltung aus site.css (wie auf allen Seiten); hier nur die Einordnung in die letzte Station – er füllt
   den Rest des Schirms, die Schlusszeile steht unten (Abstand zum Text darüber mindestens wie sonst) */
.guided .site-footer { flex: 1 0 auto; display: flex; flex-direction: column; }
.guided .site-footer > .wrap { flex: 1 0 auto; display: flex; flex-direction: column; }
.guided .footer-bottom { margin-top: auto; }
.guided .footer-note { margin-bottom: 1.4rem; }
/* Überblendung bei Kapitelsprüngen und reduzierter Bewegung (Kopfzeile, Leiste, Schnellzugriff bleiben sichtbar) */
.stage-veil { position: fixed; inset: 0; z-index: 30; background: var(--ink); opacity: 0; pointer-events: none; }
html:not(.guided) .stage-veil { display: none; }
/* Per Link angesteuerte Abschnitte erhalten den Fokus (Screenreader, Tab-Reihenfolge), aber keinen Rahmen */
[data-guide-focus]:focus { outline: none; }

/* ---------- Bewegung aus ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__line { animation: none; }
  .station__card { transition: none; }
}
.motion-paused .scroll-cue__line { animation: none; }