/* Werkbank: helle Fläche, Haarlinien wie auf einer technischen Zeichnung,
   Orange nur für Kopf, Handlung, Ring und Positionsnummern. Ein 3D-Moment im Hero,
   alles andere ruhig. Bewusst nur hell (Konzept 01.10.2026: kein Schwarz). */

@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Farbe (Kontraste gegen --bg gemessen) */
  --bg: #fbfaf8;
  --flaeche: #ffffff;
  --mulde: #f3f0ec;
  --hauch: #fdf0eb;
  --linie: #e4dfd9;
  --linie-feld: #8e867e;
  --text: #1a1714;          /* 17,9:1 */
  --text-2: #5c554f;        /* 7,3:1 */
  --text-3: #736b64;        /* 5,2:1 */
  --marke: #e74010;         /* Logo, Flächen, große Schrift */
  --marke-stark: #d73c0f;   /* Flächen mit weißer Schrift, 4,62:1 */
  --marke-hover: #bd340d;
  --akzent-text: #c2370d;   /* Links, Kicker, 5,46:1 */
  --grau: #9d9d9c;          /* nur Linien und Logo, nie Text */
  --erfolg: #1d7a4c;
  --fehler: #b4233c;

  /* Schrift */
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text-schrift: "Instrument Sans", "Segoe UI", Roboto, Arial, sans-serif;

  /* Raster */
  --breite: 1240px;
  --rand: clamp(16px, 4vw, 24px);
  --abstand: clamp(72px, 10vw, 136px);
  --kopf-h: 76px;
  --ecke: 6px;
  --ecke-karte: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Mit der Fahrt springen Menü und Sprunglinks sofort: weich scrollen hieße zehntausende Pixel Film. */
html.fahrt-3d { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--text-schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--akzent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--marke-hover); }
:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; color: var(--text); }
p { margin: 0; }

.rahmen { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.sprung { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--flaeche); padding: 8px 14px; }
.sprung:focus { left: 16px; }

/* ---------- Typo-Rollen ---------- */
.kicker {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent-text);
  margin-bottom: 18px;
}
h1 {
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.25rem);
  font-weight: 650;
  font-stretch: 108%;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.85rem);
  font-weight: 650;
  font-stretch: 105%;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
h4 { font-size: 1.125rem; font-weight: 600; }
.lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); color: var(--text-2); line-height: 1.55; margin-top: 20px; max-width: 62ch; }
.lead.schmal { max-width: 56ch; }
.pos-nr {
  font-family: var(--display);
  font-stretch: 72%;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--ecke);
  font-family: var(--text-schrift); font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.knopf-primaer { background: var(--marke-stark); color: #fff; }
.knopf-primaer:hover { background: var(--marke-hover); color: #fff; }
.knopf-linie { border-color: var(--marke-stark); color: var(--akzent-text); background: transparent; }
.knopf-linie:hover { background: var(--hauch); color: var(--marke-hover); }
.knopf-weiss { background: #fff; color: #b4320c; min-height: 42px; padding: 0 18px; }
.knopf-weiss:hover { background: var(--hauch); color: var(--marke-hover); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--marke-stark); color: #fff;
  transition: transform .25s ease;
}
.kopf.weg { transform: translateY(-100%); box-shadow: none; }
.kopf.kompakt { box-shadow: 0 1px 0 var(--marke-hover); }
.kopf-zeile { display: flex; align-items: center; gap: 24px; min-height: var(--kopf-h); transition: min-height .2s; }
.kopf.kompakt .kopf-zeile { min-height: 60px; }
.marke { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; color: #fff; text-decoration: none; }
.marke img { height: 44px; width: auto; transition: height .2s; }
/* Voller Firmenname neben dem Logo (Guido, 05.10.2026) */
.marke-name { font-family: var(--display); font-weight: 600; font-size: 0.82rem; line-height: 1.15; letter-spacing: 0.02em; color: #fff; }
.kopf.kompakt .marke img { height: 34px; }
.hauptnav { display: flex; gap: 26px; margin-left: auto; }
.hauptnav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; padding-block: 10px; }
.hauptnav a:hover { text-decoration: underline; color: #fff; }
.nav-mobil { display: none; }
.kopf-aktion { display: flex; align-items: center; gap: 18px; }
.kopf-tel { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kopf-tel:hover { color: #fff; text-decoration: underline; }
.kopf :focus-visible { outline-color: #fff; }
.menue-knopf { display: none; font: inherit; font-weight: 600; color: #fff; background: transparent; border: 2px solid #fff; border-radius: var(--ecke); min-height: 44px; padding: 0 14px; cursor: pointer; }

@media (max-width: 1080px) {
  .hauptnav { gap: 18px; }
  .kopf-tel { display: none; }
}
@media (max-width: 920px) {
  :root { --kopf-h: 60px; }
  .marke img { height: 34px; }
  .menue-knopf { display: inline-flex; align-items: center; }
  .kopf-aktion { margin-left: auto; gap: 10px; }
  .kopf-aktion .knopf-weiss { display: none; }
  .hauptnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--bg); padding: 8px var(--rand) 20px;
    border-bottom: 1px solid var(--linie); box-shadow: 0 12px 24px rgba(26, 23, 20, .08);
  }
  .hauptnav.offen { display: flex; }
  .hauptnav a { color: var(--text); padding-block: 14px; border-bottom: 1px solid var(--linie); }
  .hauptnav a:hover { color: var(--akzent-text); }
  .nav-mobil { display: block; color: var(--akzent-text) !important; }
}
/* Schmale Handys: Kopfzeile passt sonst erst ab 412 px und schiebt die ganze
   Seite seitlich (gemessen 06.10.2026 bei 360 und 390 px). */
@media (max-width: 440px) {
  .kopf-zeile { gap: 12px; }
  .marke { gap: 8px; }
  .marke-name { font-size: 0.72rem; }
  .menue-knopf { padding: 0 12px; }
}
@media (max-width: 380px) {
  .marke img, .kopf.kompakt .marke img { height: 28px; }
  .marke-name { font-size: 0.66rem; }
}

/* ---------- Die Fahrt (Hero + ein Tag in Ihrer IT) ----------
   Ohne 3D: Hero mit Symbol, darunter die Stationen als ruhige Liste.
   Mit 3D (html.fahrt-3d): die Bühne klebt hinter dem Inhalt, jede Etappe ist
   einen Bildschirm hoch, die Texte scrollen normal darüber hinweg. */
.fahrt { position: relative; }
.fahrt-buehne { display: none; }
.fahrt-inhalt { position: relative; z-index: 1; }

.etappe-hero { padding-block: clamp(40px, 6vw, 72px) clamp(40px, 6vw, 72px); }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 24px; align-items: center; }
.hero-text { min-width: 0; }
.symbol { width: min(100%, 340px); justify-self: center; }

.etappe:not(.etappe-hero) { width: 100%; max-width: var(--breite); margin-inline: auto; padding: 0 var(--rand) 20px; }
.etappe:not(.etappe-hero) .station { max-width: 720px; }
#station-1 { padding-top: 8px; }
#station-8 { padding-bottom: var(--abstand); }

.station {
  position: relative; display: grid; gap: 10px; align-content: start;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px;
  padding: clamp(22px, 3vw, 30px);
}
.station-zeit {
  font-family: var(--display); font-stretch: 125%; font-weight: 500;
  font-size: clamp(2.4rem, 2rem + 1.4vw, 3.25rem); line-height: 1; color: var(--marke);
  font-variant-numeric: tabular-nums;
}
.station-ort {
  font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: 8px;
}
.station h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 650; font-stretch: 105%; line-height: 1.12; }
.station > p:not(.station-zeit):not(.station-ort) { color: var(--text-2); }
.ki {
  display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--marke-stark); color: #fff;
  letter-spacing: 0.08em; font-size: 0.75rem;
}
.station-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.station-tags li { font-size: 0.875rem; border: 1px solid var(--linie-feld); border-radius: 4px; padding: 1px 9px; background: var(--flaeche); }
.station-ende h3 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.85rem); }

.fahrplan { display: none; }

/* Agenten antippen (ohne Hinweis, sie erklären sich beim Scrollen selbst): Klicks gehen
   durch die Textschicht zur Szene, nur Karten, Knöpfe und Titel fangen sie selbst ab. */
.fahrt-3d .fahrt-inhalt { pointer-events: none; }
.fahrt-3d .station, .fahrt-3d .hero-text, .fahrt-3d .fahrt-titel { pointer-events: auto; }
.sprechblase {
  position: fixed; z-index: 30; left: 0; top: 0; width: max-content; max-width: min(280px, calc(100vw - 32px));
  transform: translate(-50%, calc(-100% - 14px)); pointer-events: none;
  background: var(--flaeche); color: var(--text); border: 1.5px solid var(--marke); border-radius: 14px;
  padding: 10px 14px; font-size: 0.9375rem; line-height: 1.4; box-shadow: 0 12px 30px rgba(26, 23, 20, 0.14);
}
.sprechblase::after {
  content: ""; position: absolute; left: calc(50% + var(--spitze-x, 0px)); bottom: -8px; width: 14px; height: 14px; margin-left: -7px;
  background: var(--flaeche); border-right: 1.5px solid var(--marke); border-bottom: 1.5px solid var(--marke);
  transform: rotate(45deg);
}
.sprechblase.neu { animation: blase-auf .28s ease-out; }
@keyframes blase-auf { from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)) scale(.92); } }
/* Zu nah am oberen Rand: unter dem Kopf, Spitze nach oben. */
.sprechblase.unten { transform: translate(-50%, 84px); }
.sprechblase.unten::after { bottom: auto; top: -8px; transform: rotate(225deg); }
.sprechblase.unten.neu { animation-name: blase-auf-unten; }
@keyframes blase-auf-unten { from { opacity: 0; transform: translate(-50%, 74px) scale(.92); } }

/* --- mit 3D --- */
.fahrt-3d .fahrt-buehne {
  display: block; position: sticky; top: 0; height: 100vh; height: 100svh;
  margin-bottom: -100vh; margin-bottom: -100svh; z-index: 0; overflow: hidden;
}
.welt { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.welt-bereit .welt { opacity: 1; }
.fahrt-3d .symbol { visibility: hidden; }
.fahrt-3d .etappe {
  min-height: 100vh; min-height: 100svh; max-width: none; margin: 0;
  display: flex; align-items: center;
  padding: calc(var(--kopf-h) + 24px) max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))) 24px;
}
.fahrt-3d .etappe-hero { padding-bottom: 72px; }
.fahrt-3d .etappe-hero .hero-raster { width: 100%; padding: 0; max-width: none; }
.fahrt-3d .etappe[data-seite="rechts"] { justify-content: flex-end; }
.fahrt-3d .etappe[data-seite="mitte"] { justify-content: center; }
.fahrt-3d .etappe:not(.etappe-hero) .station {
  max-width: 440px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 48px rgba(26, 23, 20, 0.08);
}
.fahrt-3d .station-ende { max-width: 560px !important; text-align: center; justify-items: center; }
/* Abschlusszeile in EINER Zeile (Guido, 05.10.2026); auf schmalen Schirmen bricht sie um */
@media (min-width: 900px) {
  .fahrt-3d .station-ende { max-width: 820px !important; }
  .station-ende h3 { font-size: clamp(1.6rem, 1rem + 1.4vw, 2.2rem); white-space: nowrap; }
}
/* Ausklang: die Zentrale-Karte steht unten, danach blendet die Szene in den
   Seitengrund aus, bevor der nächste Abschnitt kommt (kein Text "unter" dem Film). */
.fahrt-3d #station-8 { align-items: flex-start; min-height: 150vh; min-height: var(--zentrale-h, 150svh); padding-top: 48vh; padding-top: 48svh; padding-bottom: 0; }
/* Scrollweg für die Runde um jede Station (Höhe setzt app.js je nach Zahl der Sprecher). */
.runden-platz { display: none; }
.fahrt-3d .runden-platz { display: block; }
.fahrt-buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 250, 248, 0), var(--bg));
}
/* Der Titel der Fahrt als eigene Etappe (der Einstiegsknopf im Hero ist seit 06.10.2026 weg, Daniel): scrollt ins Bild, während die
   Kamera durch das Tor fliegt. Ohne 3D ist er die Überschrift über der Liste. */
.fahrt-titel { display: grid; justify-items: start; gap: 12px; padding-block: 24px 32px; }
.fahrt-3d .fahrt-titel {
  justify-items: center; text-align: center; padding: 48px clamp(16px, 6vw, 96px);
  background: radial-gradient(ellipse at center, rgba(251, 250, 248, 0.92) 0%, rgba(251, 250, 248, 0.75) 45%, rgba(251, 250, 248, 0) 72%);
}
.fahrt-3d .etappe-titel { justify-content: center; }
.fahrt-titel-vor {
  font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-text);
}
.fahrt-titel-text {
  font-family: var(--display); font-stretch: 112%; font-weight: 700; line-height: 1;
  font-size: clamp(2.8rem, 1.6rem + 6vw, 7rem); letter-spacing: -0.02em; color: var(--text);
  text-shadow: 0 2px 30px rgba(251, 250, 248, 0.9);
}
.fahrt-titel-nach { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--text-2); max-width: 34ch; }

/* Fahrplan: eine Linie mit Haltestellen am unteren Rand, wie im Bahnplan. */
.fahrt-3d .fahrplan {
  display: flex; align-items: center; gap: 16px; position: fixed; left: 50%; bottom: 18px;
  transform: translateX(-50%); z-index: 15; opacity: 0; pointer-events: none;
  visibility: hidden; transition: opacity .3s, visibility 0s .3s;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--linie); border-radius: 999px; padding: 10px 22px 8px;
  box-shadow: 0 10px 30px rgba(26, 23, 20, 0.08);
}
.fahrt-3d .fahrplan.an { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .3s; }
/* Ausstieg aus der Fahrt, auch per Tastatur: der unsichtbare Fahrplan ist nicht fokussierbar. */
.fahrplan-weiter {
  font-family: var(--display); font-stretch: 112%; font-weight: 650; font-size: 0.875rem;
  color: var(--akzent-text); text-decoration: none; white-space: nowrap;
  padding: 6px 0 6px 18px; border-left: 1px solid var(--linie);
}
.fahrplan-weiter:hover { text-decoration: underline; }
.fahrplan ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; position: relative; }
.fahrplan ol::before { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 2px; background: var(--linie); }
.fahrplan li a {
  position: relative; display: grid; justify-items: center; gap: 2px; min-width: 92px;
  font-size: 0.75rem; color: var(--text-3); text-decoration: none; padding: 0 4px;
}
.fahrplan li a::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--linie-feld); background: var(--flaeche); position: relative; }
.fahrplan li a span { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 0.6875rem; color: var(--text-3); margin-top: 2px; }
.fahrplan li a.aktiv { color: var(--text); font-weight: 600; }
.fahrplan li a.aktiv::before { background: var(--marke); border-color: var(--marke); box-shadow: 0 0 0 4px var(--hauch); }
.fahrplan li a.aktiv span { color: var(--akzent-text); }
/* Unter 1000 px passen die acht Halte nicht in eine Zeile: dort nur der Knopf zum Überspringen. */
/* Unter 1000 px: statt der Haltestellen nur der Knopf zum Überspringen, links unten. */
@media (max-width: 1000px) {
  .fahrt-3d .fahrplan { left: 12px; transform: none; padding: 8px 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fahrt-3d .fahrplan ol { display: none; }
  .fahrplan-weiter { border-left: 0; padding: 6px 0; }
}
/* Der Fahrplan verdeckte sonst das Ende der Stationskarten (09:40). */
@media (min-width: 1001px) { .fahrt-3d .etappe:not(.etappe-hero) { padding-bottom: 104px; } }

/* Nach oben: rechts unten, rückt über den Fahrplan, solange der zu sehen ist. */
.nach-oben {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 16;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marke-stark); color: #fff; box-shadow: 0 8px 22px rgba(26, 23, 20, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility 0s .25s, bottom .25s, background-color .2s;
}
.nach-oben.an { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, bottom .25s, background-color .2s; }
.nach-oben:hover { background: var(--marke-hover); color: #fff; }
.nach-oben svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1001px) { .fahrplan-an .nach-oben { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1000px) { .nach-oben { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

@media (max-width: 860px) {
  .hero-raster { grid-template-columns: 1fr; }
  .symbol { max-width: 240px; order: -1; }
  .fahrt-3d .etappe { align-items: flex-end; padding-bottom: 72px; }
  /* Handy: der Text darf nicht über das Gyroskop scrollen (Philipp, 02.10.2026).
     Der Text steht unter dem Gyroskop (oberes Drittel, welt.js) und füllt den
     Schirm bis unten. Die Etappe ist einen Viertelbildschirm länger: so lange
     klebt der Text und blendet aus (app.js), während das Tor aufgeht. Ist er
     höher als der Schirm, setzt app.js --hero-klebt so, dass er mit der
     Unterkante klebt. */
  .fahrt-3d .etappe-hero { display: block; min-height: 0; padding: 0; }
  /* Spielraum als Inhalt, nicht als Padding: sticky bleibt in der Inhaltsbox. */
  .fahrt-3d .etappe-hero::after { content: ""; display: block; height: 25vh; height: 25svh; }
  /* Der Titel "Ein Tag in Ihrer IT" rückt einen Dreiviertelbildschirm nach oben: er
     steigt von unten auf, während der Hero-Text ausblendet und das Tor aufgeht, statt
     nach einer leeren Strecke (Daniel, 03.10.2026). */
  .fahrt-3d .etappe-hero { margin-bottom: -75vh; margin-bottom: -75svh; }
  .fahrt-3d .etappe-hero .hero-raster {
    position: sticky; top: var(--hero-klebt, var(--kopf-h)); align-content: end;
    min-height: calc(100vh - var(--kopf-h)); min-height: calc(100svh - var(--kopf-h));
    padding: calc(38vh - var(--kopf-h)) var(--rand) 32px;
    padding-top: calc(38svh - var(--kopf-h));
  }
  /* Bühne schon in Ruhelage unter den Kopf legen, sonst steht das Logo erst
     60 px tiefer und rutscht beim ersten Scrollen hoch, auf den Text zu. */
  .fahrt-3d .fahrt-buehne {
    margin-top: calc(-1 * var(--kopf-h));
    margin-bottom: calc(var(--kopf-h) - 100vh); margin-bottom: calc(var(--kopf-h) - 100svh);
  }
  .fahrt-3d .etappe:not(.etappe-hero) .station { max-width: none; width: 100%; }
  .fahrt-3d .symbol { display: none; }
}
@media (max-width: 860px) and (max-height: 720px) {
  /* Kleine Handys (SE und kleiner): ohne Kickerzeile, etwas tiefer, sonst reicht der Platz unter dem Logo nicht. */
  .fahrt-3d .etappe-hero .kicker { display: none; }
  .fahrt-3d .etappe-hero .hero-raster { padding-top: calc(41vh - var(--kopf-h)); padding-top: calc(41svh - var(--kopf-h)); }
}

/* ---------- Kennzahlen ---------- */
.kennzahlen { border-block: 1px solid var(--linie); background: var(--flaeche); }
.kennzahlen-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kz { padding: 28px 24px 26px 0; border-right: 1px solid var(--linie); min-width: 0; }
.kz + .kz { padding-left: 24px; }
.kz:last-child { border-right: 0; }
.kz-wert { font-family: var(--display); font-stretch: 125%; font-weight: 500; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.kz-text { color: var(--text-2); margin-top: 8px; font-size: 0.9688rem; }
@media (max-width: 860px) {
  .kennzahlen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz { border-right: 0; border-bottom: 1px solid var(--linie); padding-left: 0 !important; }
  .kz:nth-child(odd) { border-right: 1px solid var(--linie); }
  .kz:nth-child(even) { padding-left: 20px !important; }
  .kz:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); }
.abschnitt-mulde { background: var(--mulde); border-block: 1px solid var(--linie); }

/* Zusammenarbeit */
.wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.weg { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--ecke-karte); padding: 28px 26px; display: grid; gap: 12px; align-content: start; }
.weg p { color: var(--text-2); }
.weg-mass { display: flex; gap: 6px; }
.weg-mass span { width: 28px; height: 6px; border-radius: 2px; background: var(--linie); }
.weg-mass span.an { background: var(--marke); }
.weg .weg-fuer { color: var(--text-3); font-size: 0.9375rem; border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 4px; }
@media (max-width: 860px) { .wege { grid-template-columns: 1fr; } }

/* Leistungen als Stückliste */
.stueckliste { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); margin-top: 52px; align-items: start; }
.schrank { margin: 0; position: sticky; top: calc(var(--kopf-h) + 32px); }
.schrank svg { width: 100%; max-width: 420px; height: auto; }
.s-rahmen { fill: var(--flaeche); stroke: var(--text-3); stroke-width: 1.5; }
.s-schiene { fill: var(--mulde); stroke: var(--linie-feld); stroke-width: 1; }
.s-geraet { fill: var(--flaeche); stroke: var(--text-3); stroke-width: 1.2; transition: fill .25s, stroke .25s; }
.s-detail, .s-ports rect, .s-platten rect { fill: var(--mulde); stroke: var(--linie-feld); stroke-width: 0.8; }
.s-detail-linie { fill: none; stroke: var(--linie-feld); stroke-width: 1.2; }
.s-led { fill: var(--grau); transition: fill .25s; }
.s-fuehrung { stroke: var(--text-3); stroke-width: 1; }
.s-ballon { fill: var(--flaeche); stroke: var(--text-3); stroke-width: 1.2; transition: fill .25s, stroke .25s; }
.s-nr { font-family: var(--display); font-weight: 650; font-size: 15px; text-anchor: middle; fill: var(--text); transition: fill .25s; }
.s-frei { fill: none; stroke: var(--marke); stroke-width: 1.4; stroke-dasharray: 6 5; }
.s-frei-text { font-family: var(--display); font-stretch: 80%; font-size: 14px; font-weight: 600; text-anchor: middle; fill: var(--akzent-text); }
.s-schriftfeld { font-family: var(--display); font-stretch: 72%; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-3); }
.einheit.aktiv .s-geraet { fill: var(--hauch); stroke: var(--marke); }
.einheit.aktiv .s-led { fill: var(--marke); }
.einheit.aktiv .s-ballon { fill: var(--marke-stark); stroke: var(--marke-stark); }
.einheit.aktiv .s-nr { fill: #fff; }

.positionen { list-style: none; margin: 0; padding: 0; display: grid; }
.position { padding-block: 28px; border-top: 1px solid var(--linie); display: grid; gap: 10px; transition: background-color .25s; }
.position:last-child { border-bottom: 1px solid var(--linie); }
.position .pos-frage { font-weight: 600; color: var(--text); }
.position p { color: var(--text-2); }
.position ul { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.position li { font-size: 0.9375rem; border: 1px solid var(--linie-feld); border-radius: 4px; padding: 2px 10px; color: var(--text); background: var(--flaeche); }
.position.aktiv h3 { color: var(--akzent-text); }
@media (max-width: 860px) {
  .stueckliste { grid-template-columns: 1fr; }
  .schrank { position: static; max-width: 320px; }
}

/* Ablauf */
.ablauf { position: relative; margin-top: 48px; }
.ablauf-bahn { position: absolute; left: 0; right: 0; top: -8px; width: 100%; height: 96px; overflow: visible; }
.bahn-grund { fill: none; stroke: var(--linie); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bahn-zug { fill: none; stroke: var(--marke); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.schritte { list-style: none; margin: 0; padding: 104px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.schritte li { display: grid; gap: 10px; align-content: start; }
.schritt-nr { font-family: var(--display); font-stretch: 125%; font-weight: 500; font-size: 2.5rem; color: var(--marke); line-height: 1; font-variant-numeric: tabular-nums; }
.schritte p:not(.schritt-nr) { color: var(--text-2); }
@media (max-width: 860px) {
  .ablauf-bahn { display: none; }
  .schritte { grid-template-columns: 1fr; padding-top: 0; gap: 28px; }
  .schritte li { border-left: 2px solid var(--marke); padding-left: 18px; }
}

/* Klappzeilen: E-Rechnung, KI und Praxisbeispiele stehen zugeklappt da */
.klappen { margin-top: 36px; border-top: 1px solid var(--linie-feld); }
.klapp { border-bottom: 1px solid var(--linie-feld); }
.klapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 24px 4px; }
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary::after {
  content: "+"; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--linie-feld); display: grid; place-items: center;
  font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--marke); transition: transform .25s, background-color .2s;
}
.klapp[open] > summary::after { transform: rotate(45deg); background: var(--hauch); border-color: var(--marke); }
.klapp > summary:hover h3 { color: var(--akzent-text); }
.klapp-kopf { display: grid; gap: 6px; flex: 1; min-width: 0; }
.klapp-kopf h3 { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); }
.klapp-marke {
  flex: none; white-space: nowrap; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 0.8125rem;
  color: #fff; background: var(--marke-stark); padding: 4px 12px; border-radius: 999px;
}
.klapp-inhalt { margin: 0; padding: 0 64px 28px 4px; display: grid; gap: 12px; max-width: 78ch; }
.klapp-inhalt p { color: var(--text-2); }
dl.klapp-inhalt div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 16px; padding-block: 8px; border-top: 1px solid var(--linie); }
dl.klapp-inhalt dt { font-family: var(--display); font-stretch: 72%; font-weight: 600; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
dl.klapp-inhalt dd { margin: 0; }
@media (max-width: 640px) {
  .klapp-marke { display: none; }
  .klapp-inhalt { padding-right: 4px; }
  dl.klapp-inhalt div { grid-template-columns: 1fr; gap: 2px; }
}
.ereg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px 48px; padding: 0 4px 32px; }
.ereg-text { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ereg-text p:not(.pos-nr) { color: var(--text-2); }
.frist { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--linie); }
.frist-zahl { font-family: var(--display); font-stretch: 125%; font-weight: 500; font-size: 3.25rem; line-height: 1; color: var(--marke); font-variant-numeric: tabular-nums; }
.frist-text { color: var(--text-2); font-weight: 600; }
.check { background: var(--mulde); border-radius: var(--ecke-karte); padding: 22px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.check-titel { font-family: var(--display); font-weight: 650; font-size: 1.125rem; }
.check fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.check legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.check label { display: flex; gap: 10px; align-items: center; min-height: 36px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--marke-stark); margin: 0; }
.check-ergebnis { background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--grau); border-radius: var(--ecke); padding: 12px 14px; }
.check-ergebnis.klar { border-left-color: var(--marke); }
.check-hinweis { color: var(--text-3); font-size: 0.875rem; }
@media (max-width: 860px) { .ereg { grid-template-columns: 1fr; } }

/* Partner */
.partner-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: start; }
.tabelle-huelle { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--ecke-karte); }
.partner { width: 100%; border-collapse: collapse; font-size: 1rem; }
.partner th, .partner td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.partner thead th { font-family: var(--display); font-stretch: 72%; font-weight: 600; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.partner tbody tr:last-child > * { border-bottom: 0; }
.partner td:first-child { font-family: var(--display); font-weight: 600; color: var(--akzent-text); font-variant-numeric: tabular-nums; }
.partner tbody th { font-family: var(--display); font-weight: 600; }
@media (max-width: 860px) { .partner-raster { grid-template-columns: 1fr; } }
/* Handy: lange Wörter („Netzwerksicherheit“) liefen rechts aus der Tabelle. */
@media (max-width: 480px) {
  .partner { font-size: 0.9375rem; }
  .partner th, .partner td { padding: 12px 10px; }
  .partner td { -webkit-hyphens: auto; hyphens: auto; }
}

/* Über uns */
.ueber-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px 72px; align-items: end; }
.ueber-raster > div > p:not(.kicker) { color: var(--text-2); margin-top: 20px; max-width: 62ch; }
/* Geschichte: bewusst unscheinbar (Daniel, 05.10.2026), kleiner grauer Aufklapper */
.ueber-raster .geschichte { margin-top: 12px; max-width: 62ch; font-size: 0.875rem; color: var(--text-3); }
.ueber-raster .geschichte summary { padding-block: 4px; cursor: pointer; width: fit-content; text-decoration: underline dotted; text-underline-offset: 3px; }
.ueber-raster .geschichte p { margin-top: 6px; }
.gewohnheiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gewohnheiten li { display: flex; gap: 16px; align-items: baseline; padding-block: 14px; border-top: 1px solid var(--linie); font-family: var(--display); font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.gewohnheiten li:last-child { border-bottom: 1px solid var(--linie); }
.gw-nr { color: var(--akzent-text); font-stretch: 125%; font-weight: 500; font-size: 1.375rem; width: 1.2em; flex: none; }
.team-titel { margin-top: 64px; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.person { display: flex; gap: 18px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--ecke-karte); padding: 20px; }
.person > div:last-child { display: grid; gap: 2px; min-width: 0; }
.person p:last-child { color: var(--text-2); margin-top: 4px; font-size: 0.9688rem; }
.rolle { color: var(--akzent-text); font-weight: 600; font-size: 0.9375rem; }
.avatar {
  width: 84px; height: 84px; flex: none; border-radius: 50%;
  background: var(--marke-stark); color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-stretch: 125%; font-weight: 500; font-size: 1.6rem; letter-spacing: 0.02em;
}
.avatar-klein { width: 56px; height: 56px; font-size: 1.05rem; }
@media (max-width: 860px) {
  .ueber-raster { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; max-width: 360px; }
}

/* Fragen */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 32px 64px; align-items: start; }
.fragen-kopf p:not(.kicker) { color: var(--text-2); margin-top: 16px; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary h3 { font-size: 1.1875rem; display: inline; }
.fragen summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--display); font-size: 1.75rem; color: var(--marke); line-height: 1; }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { color: var(--text-2); padding: 0 40px 22px 0; max-width: 64ch; }
@media (max-width: 860px) { .fragen-raster { grid-template-columns: 1fr; } }

/* Fernwartung */
.abschnitt-support { background: var(--marke-stark); color: #fff; }
.abschnitt-support h2 { color: #fff; max-width: 22ch; }
.kicker-hell { color: #fff; opacity: .92; }
.support { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
@media (max-width: 1080px) { .support { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skachel {
  display: grid; gap: 10px; align-content: start; background: #fff; color: var(--text);
  border-radius: var(--ecke-karte); padding: 24px; text-decoration: none; border: 2px solid transparent;
  transition: border-color .15s, transform .15s;
}
.skachel:hover { color: var(--text); border-color: var(--text); }
.skachel span:not(.skachel-titel):not(.skachel-ziel) { color: var(--text-2); }
.skachel-titel { font-family: var(--display); font-weight: 650; font-size: 1.25rem; }
.skachel-ziel { margin-top: 6px; font-weight: 600; color: var(--akzent-text); text-decoration: underline; text-underline-offset: .18em; }
.skachel-gross { font-family: var(--display); font-stretch: 112%; font-size: 1.5rem; text-decoration: none; }
.abschnitt-support :focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .support { grid-template-columns: 1fr; } }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: start; }
.ansprechpartner { margin-top: 28px; font-weight: 600; color: var(--text); }
.adresse { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.adresse div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--linie); }
.adresse dt { color: var(--text-3); font-weight: 600; }
.adresse dd { margin: 0; }

/* Statt Kontaktformular (Spam, Meeting 05.10.2026): Karte mit mailto und Telefon */
.kontakt-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--ecke-karte); padding: clamp(22px, 4vw, 36px); display: grid; gap: 14px; }
.kontakt-karte p { color: var(--text-2); }
@media (max-width: 860px) { .kontakt-raster { grid-template-columns: 1fr; } }

/* ---------- Fuß als Schriftfeld ---------- */
.fuss { padding-block: 56px 40px; border-top: 1px solid var(--linie); background: var(--bg); }
.schriftfeld {
  display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  border: 1.5px solid var(--text-3); border-radius: 2px; background: var(--flaeche);
}
.schriftfeld > div { padding: 12px 14px; border-right: 1px solid var(--linie-feld); border-bottom: 1px solid var(--linie-feld); min-width: 0; }
.sf-logo { grid-row: span 2; background: var(--marke-stark); display: grid; place-items: center; }
.sf-logo img { width: min(220px, 100%); height: auto; }
/* Voller Firmenname unter dem Logo (Guido, 05.10.2026) */
.sf-logo-inhalt { display: grid; justify-items: center; gap: 10px; padding: 12px; }
.sf-logo-name { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; color: #fff; text-align: center; }
.sf-kopf { font-family: var(--display); font-stretch: 72%; font-weight: 600; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.sf-zelle p:not(.sf-kopf) { font-size: 0.9375rem; overflow-wrap: anywhere; }
/* Rechtliches als durchgehende Schlusszeile, seit die Kundenhilfe eine eigene Zelle hat (06.10.2026) */
.schriftfeld > .sf-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; border-bottom: 0; }
@media (max-width: 960px) {
  .schriftfeld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-logo { grid-column: 1 / -1; grid-row: auto; padding: 18px !important; }
}
@media (max-width: 480px) { .schriftfeld { grid-template-columns: 1fr; } }

/* ---------- Impressum und Datenschutz (eigene Seiten) ---------- */
.rechtstext { max-width: 820px; padding-block: clamp(40px, 8vw, 88px); }
.rechtstext h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: 24px; }
.rechtstext h2 { font-size: 1.375rem; margin: 36px 0 10px; letter-spacing: 0; }
.rechtstext p, .rechtstext li { color: var(--text-2); }
.rechtstext p + p { margin-top: 12px; }
.rechtstext ul { margin: 8px 0 12px; padding-left: 1.2em; }
.rechtstext-stand { margin-top: 36px !important; font-size: 0.9375rem; color: var(--text-3) !important; }
.rechtstext-fuss { border-top: 1px solid var(--linie); padding-block: 24px; font-size: 0.9375rem; }

/* ---------- Review 06.10.2026: Wege aus dem Hero, Kennzahlen vorn ---------- */
.hero-wege { margin-top: 24px; font-size: 0.9688rem; color: var(--text-3); }
.hero-wege a { font-weight: 600; }
.hero-wege span { margin-inline: 10px; }
.hero-fakten { display: none; }
@media (min-width: 861px) and (min-height: 700px) {
  /* Auf großen Schirmen stehen die Kennzahlen im Hero, das Band nach der Fahrt entfällt. */
  .hero-fakten {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px 0 0;
    border-top: 1px solid var(--linie); max-width: 760px;
  }
  .hero-fakten div { padding: 14px 16px 0 0; min-width: 0; }
  .hero-fakten div + div { padding-left: 16px; border-left: 1px solid var(--linie); }
  .hero-fakten dt { font-family: var(--display); font-stretch: 125%; font-weight: 500; font-size: 1.625rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .hero-fakten dd { margin: 4px 0 0; color: var(--text-2); font-size: 0.8125rem; line-height: 1.35; }
  .kennzahlen { display: none; }
}
@media (max-width: 860px) { .fahrt-3d .etappe-hero .hero-wege { display: none; } }
/* Handy: Stationskarte oben, damit sie über die leere untere Bildhälfte zieht und der Film kürzer wird (app.js misst die Kartenlage). */
@media (max-width: 860px) { .fahrt-3d .etappe:not(.etappe-hero):not(.etappe-titel):not(#station-8) { align-items: flex-start; } }
.station-hilfe { margin-top: 14px; font-size: 0.9688rem; }
.station-hilfe a { font-weight: 600; }