/* SAFEPARKS · Vorschau „Das Gerät als Bühne".
   Ein heller, luftiger Grund mit weichem Licht in Petrol und Türkis. In der Mitte ein iPhone mit der App;
   ihr Glas (Suchkarte, Leiste unten, runde Knöpfe) bricht, was darunter durchläuft — gerechnet in seite.js. */

@font-face {
  font-family: "Archivo";
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F,
    U+20A0-20AB, U+20AD-20C0, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F,
    U+20A0-20AB, U+20AD-20C0, U+A720-A7FF;
}

/* Lage der weichen Unterkante der Bühne auf schmalen Bildschirmen (animierbar). */
@property --maske { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

/* ───────── Farben ───────── */
:root {
  /* Seite */
  --grund: #f5f8f6;
  --grund-tief: #edf3ef;
  --flaeche: #ffffff;
  --leise: #eaf3ed;
  --linie: #dae6de;
  --tinte: #193d36;
  --tinte-leise: #4a5e57;
  --wortmarke: #113e39;
  --akzent: #10777c;
  --akzent-text: #0c6a6f;
  --verlauf-mitte: #137f85;
  --tuerkis: #3dcdd3;
  /* Licht */
  --licht-a: rgba(61, 205, 211, 0.36);
  --licht-b: rgba(16, 119, 124, 0.24);
  --licht-c: rgba(185, 237, 218, 0.62);
  --boden: rgba(14, 58, 50, 0.3);
  /* Glas auf der Seite */
  --glas-ton: rgba(255, 255, 255, 0.46);
  --glas-kante: inset 0 0 0 0.5px rgba(22, 58, 50, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(255, 255, 255, 0.5);
  --glas-schatten: 0 14px 34px -16px rgba(14, 58, 50, 0.38), 0 2px 6px -2px rgba(14, 58, 50, 0.1);
  --glas-licht: linear-gradient(125deg, #ffffff, rgba(255, 255, 255, 0.2) 28%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0.8));
  --glas-schein: rgba(255, 255, 255, 0.34);
  /* App im Gerät */
  --a-grund: #f2f6f3;
  --a-flaeche: #ffffff;
  --a-tinte: #193d36;
  --a-leise: #5b7068;
  --a-linie: #dae6de;
  --a-akzent: #10777c;
  --a-wortmarke: #113e39;
  --a-marke: #076b60;
  --a-tuch: rgba(10, 30, 26, 0.1);
  /* Servicearten: dieselben Farben wie in der Kunden-App, nur am Zeichen (Selbstparker kommt im Beispiel nicht vor) */
  --svc-shuttle: #275ec0;
  --svc-valet: #8255a5;
  /* Stand „Eingecheckt" im Portal: ein leises Grün, nur am Punkt */
  --eingecheckt: #2f9a68;
  /* Gerät: iPhone 18 Pro, Rahmen aus mattem Aluminium — hell in Silber, dunkel in Schwarz (beides Farben des 18 Pro).
     Von vorn ist das Metall nur ein schmaler Ring: zwei sanfte Stufen statt Glanzstreifen, dazu die Kante (innen ein
     Lichtsaum, oben heller, unten ein Schatten, außen eine Haarlinie). Statuszeile und Heimbalken wie in iOS. */
  --rahmen: linear-gradient(140deg, #e9ebed 0%, #d6d9dc 38%, #c7cbce 72%, #b9bec2 100%);
  --rahmen-taste: linear-gradient(90deg, #b0b5b9, #dfe2e4 50%, #bfc3c6);
  --rahmen-kante: inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 1.5px 1px rgba(255, 255, 255, 0.75), inset 0 -1.5px 2px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  --a-status: #000;
  /* Platzhalter in den Rechtstexten */
  --fehlt-grund: #fff1a8;
  --fehlt-tinte: #4d3b00;
  --schrift: "Public Sans", -apple-system, system-ui, sans-serif;
  --anzeige: "Archivo", "Public Sans", system-ui, sans-serif;
  --rand: clamp(20px, 4vw, 56px);
  --breite: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #162720;
    --grund-tief: #12211b;
    --flaeche: #21352f;
    --leise: #2b4438;
    --linie: #395044;
    --tinte: #f2f8f4;
    --tinte-leise: #b9cbc1;
    --wortmarke: #b9edda;
    --akzent: #6fd6cf;
    --akzent-text: #6fd6cf;
    --verlauf-mitte: #8ee6df;
    --licht-a: rgba(61, 205, 211, 0.16);
    --licht-b: rgba(16, 119, 124, 0.42);
    --licht-c: rgba(80, 160, 140, 0.12);
    --boden: rgba(0, 0, 0, 0.55);
    --glas-ton: rgba(40, 64, 56, 0.42);
    --glas-kante: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 1px rgba(255, 255, 255, 0.06);
    --glas-schatten: 0 14px 34px -16px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
    --glas-licht: linear-gradient(125deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.3));
    --glas-schein: rgba(255, 255, 255, 0.06);
    --a-grund: #162720;
    --a-flaeche: #21352f;
    --a-tinte: #f2f8f4;
    --a-leise: #b9cbc1;
    --a-linie: #395044;
    --a-akzent: #6fd6cf;
    --a-wortmarke: #b9edda;
    --a-marke: #76d8c7;
    --a-tuch: rgba(0, 0, 0, 0.28);
    --svc-shuttle: #a5c5ff;
    --svc-valet: #d5b5fa;
    --eingecheckt: #8bd8aa;
    --rahmen: linear-gradient(140deg, #4b4e52 0%, #36393c 38%, #2b2d30 72%, #222427 100%);
    --rahmen-taste: linear-gradient(90deg, #1e2022, #484b4f 50%, #2b2d30);
    --rahmen-kante: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1.5px 1px rgba(255, 255, 255, 0.22), inset 0 -1.5px 2px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --a-status: #fff;
    --fehlt-grund: #4d3f0a;
    --fehlt-tinte: #ffe88a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #162720; --grund-tief: #12211b; --flaeche: #21352f; --leise: #2b4438; --linie: #395044;
  --tinte: #f2f8f4; --tinte-leise: #b9cbc1; --wortmarke: #b9edda; --akzent: #6fd6cf; --akzent-text: #6fd6cf; --verlauf-mitte: #8ee6df;
  --licht-a: rgba(61, 205, 211, 0.16); --licht-b: rgba(16, 119, 124, 0.42); --licht-c: rgba(80, 160, 140, 0.12); --boden: rgba(0, 0, 0, 0.55);
  --glas-ton: rgba(40, 64, 56, 0.42);
  --glas-kante: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 1px rgba(255, 255, 255, 0.06);
  --glas-schatten: 0 14px 34px -16px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
  --glas-licht: linear-gradient(125deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.3));
  --glas-schein: rgba(255, 255, 255, 0.06);
  --a-grund: #162720; --a-flaeche: #21352f; --a-tinte: #f2f8f4; --a-leise: #b9cbc1; --a-linie: #395044; --a-akzent: #6fd6cf; --a-wortmarke: #b9edda; --a-marke: #76d8c7; --a-tuch: rgba(0, 0, 0, 0.28);
  --svc-shuttle: #a5c5ff; --svc-valet: #d5b5fa; --eingecheckt: #8bd8aa;
  --rahmen: linear-gradient(140deg, #4b4e52 0%, #36393c 38%, #2b2d30 72%, #222427 100%);
  --rahmen-taste: linear-gradient(90deg, #1e2022, #484b4f 50%, #2b2d30);
  --rahmen-kante: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1.5px 1px rgba(255, 255, 255, 0.22), inset 0 -1.5px 2px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --a-status: #fff;
  --fehlt-grund: #4d3f0a; --fehlt-tinte: #ffe88a;
  color-scheme: dark;
}

/* ───────── Grundlagen ───────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--grund); }
/* Der Grund liegt auf html: So kann das Licht von „Orte" hinter der Bühne beginnen (z-index −1) und unter ihr hindurch auslaufen. */
body {
  background: transparent;
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; }
ul, ol { list-style: none; }
a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.recht a:focus-visible, .kontakt-link:focus-visible, .zurueck-link:focus-visible { border-radius: 8px; }
.breite { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
/* Gedanken- und Bindestrich vor einem Leerzeichen: Public Sans kernt das Paar und frisst so den Raum dahinter. */
.gs { font-kerning: none; }

/* ───────── Kopf ───────── */
.kopf {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--rand) 0;
  pointer-events: none;
}
.kopf a { pointer-events: auto; }
.marke { display: inline-flex; align-items: center; gap: 9px; color: var(--wortmarke); text-decoration: none; }
.wort { font-family: var(--anzeige); font-weight: 500; font-size: 21px; letter-spacing: -0.01em; line-height: 1; }
.wort b { font-weight: 800; }
/* „Bald verfügbar" ist ein Hinweis, kein Knopf: gesetzt wie die Zeilen über den Abschnitten („Orte"), ohne Fläche und Punkt. */
.status { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-text); }
.kontakt-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--tinte); text-decoration: none;
  background: var(--glas-ton);
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: var(--glas-kante), 0 4px 14px -8px rgba(14, 58, 50, 0.3);
}
.kontakt-link { padding-inline: 16px; }

/* ───────── Die Bühne ───────── */
.szene { position: relative; height: 420vh; height: 420svh; }
.buehne {
  --gw: 380px;          /* Breite des Geräts, gesetzt von seite.js */
  --gh: calc(var(--gw) * 2.0785);   /* Bildschirm 844/390 und ringsum derselbe Rand (seite.js rechnet mit demselben Faktor) */
  --s: 0.90274;         /* Maßstab des Bildschirms (390 Punkt breit): Gerätebreite · 0,9265 / 390 */
  --luft: clamp(36px, 4.4vw, 72px);
  --seite: calc((100cqi - var(--gw)) / 2);
  --spalte: min(400px, calc(var(--seite) - var(--luft) - var(--rand)));
  --gross: clamp(46px, calc(var(--seite) * 0.17), 104px);
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  container-type: inline-size;
  background: radial-gradient(120% 70% at 50% 0%, var(--flaeche) 0%, transparent 60%);
}

/* Licht: drei weiche Felder hinter dem Gerät. Sie wandern mit den Schritten. */
.licht { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Unten läuft das Licht der Bühne aus, während das Licht von „Orte" darunter schon beginnt — eine Überblendung, keine Kante. */
.buehne .licht { -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.licht-schluss { -webkit-mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.licht i { position: absolute; border-radius: 50%; transition: transform 1.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 1.6s ease; }
.buehne .licht .la { width: 74vmax; height: 74vmax; left: 50%; top: 50%; margin: -37vmax 0 0 -37vmax; background: radial-gradient(closest-side, var(--licht-a), transparent); transform: translate(18%, -22%); }
.buehne .licht .lb { width: 64vmax; height: 64vmax; left: 50%; top: 50%; margin: -32vmax 0 0 -32vmax; background: radial-gradient(closest-side, var(--licht-b), transparent); transform: translate(-22%, 24%); }
.buehne .licht .lc { width: 110vmax; height: 80vmax; left: 50%; top: 50%; margin: -40vmax 0 0 -55vmax; background: radial-gradient(closest-side, var(--licht-c), transparent); transform: translate(0, 6%); }
.buehne[data-schritt="1"] .licht .la { transform: translate(-6%, -30%); }
.buehne[data-schritt="1"] .licht .lb { transform: translate(26%, 22%); }
.buehne[data-schritt="2"] .licht .la { transform: translate(24%, 10%) scale(1.08); }
.buehne[data-schritt="2"] .licht .lb { transform: translate(-28%, -18%); }
.buehne[data-schritt="3"] .licht .la { transform: translate(-20%, -6%) scale(1.12); }
.buehne[data-schritt="3"] .licht .lb { transform: translate(10%, 30%) scale(0.9); }

/* Auftakt: die Marke links und rechts um das Gerät. */
.auftakt {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--anzeige); font-weight: 800; font-size: var(--gross);
  line-height: 0.94; letter-spacing: -0.035em; color: var(--wortmarke);
}
.auftakt span { position: absolute; display: block; will-change: transform, opacity; }
.auftakt-a { right: calc(50% + var(--gw) / 2 + var(--luft)); top: calc(50% - var(--gross) * 2.05); text-align: right; }
.auftakt-b {
  left: calc(50% + var(--gw) / 2 + var(--luft)); top: calc(50% - var(--gross) * 0.5);
  background: linear-gradient(100deg, var(--akzent) 10%, var(--verlauf-mitte) 60%, var(--akzent) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.08em;
}
.einleitung {
  position: absolute; left: calc(50% + var(--gw) / 2 + var(--luft)); top: calc(50% + var(--gross) * 1.5 + 18px);
  width: min(340px, var(--spalte));
  font-size: 17px; line-height: 1.55; color: var(--tinte-leise); text-wrap: pretty;
  will-change: transform, opacity;
}

/* Das Gerät */
.geraet-ort { position: absolute; left: 50%; top: 50%; width: var(--gw); height: var(--gh); transform: translate(-50%, -50%); will-change: transform; }
.boden { position: absolute; left: 6%; right: 6%; bottom: -3.2%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, var(--boden), transparent); filter: blur(10px); }
/* Maße nach Apples Maßzeichnung des iPhone 18 Pro (Gehäuse wie beim 17 Pro), als Anteil der Gerätebreite: Metallring 0,0167,
   schwarzer Rand 0,020, vom Gehäuserand bis zur Bildfläche ringsum 0,0367, Bildfläche 0,9265. Die Ecken sind konzentrisch:
   Gehäuse 0,1805, Glas 0,1638, Bildschirm 62 Punkt auf 402 (= 60,15 auf 390). */
.geraet {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(var(--gw) * 0.1805);
  background: var(--rahmen);
  box-shadow:
    var(--rahmen-kante),
    0 28px 40px -22px rgba(8, 52, 46, 0.5),
    0 14px 26px -14px rgba(8, 40, 34, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.12);
}
.einfassung { position: absolute; inset: calc(var(--gw) * 0.0167); border-radius: calc(var(--gw) * 0.1638); background: #020303; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.schirm, .spiegel {
  position: absolute; left: calc(var(--gw) * 0.0367); top: calc(var(--gw) * 0.0367);
  width: calc(var(--gw) * 0.9265); height: calc(var(--gw) * 0.9265 * 844 / 390);
  border-radius: calc(60.15px * var(--s));
}
.schirm { overflow: hidden; background: var(--a-grund); transform: translateZ(0); }
/* Glanz: kein Spiegelstreifen, nur ein weicher Hauch Licht vom linken Rand; Insel und Statuszeile bleiben unberührt. */
.spiegel { pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 18%, rgba(255, 255, 255, 0) 34%); }
/* Tasten (Maßzeichnung): Sie stehen 0,45 mm (0,0063 · Breite) vor, der Rest liegt hinter dem Rahmen. Links Aktionstaste,
   lauter, leiser; rechts die Seitentaste. Die Kamerasteuerung liegt bündig und ist von vorn nicht zu sehen. */
.taste { position: absolute; z-index: -1; width: calc(var(--gw) * 0.012); border-radius: 2px; background: var(--rahmen-taste); }
.taste.t1, .taste.t2, .taste.t3 { left: calc(var(--gw) * -0.0063); }
.taste.t1 { top: 20.55%; height: 4.6%; }
.taste.t2 { top: 28.55%; height: 7.47%; }
.taste.t3 { top: 38.02%; height: 7.47%; }
.taste.t4 { right: calc(var(--gw) * -0.0063); top: 31.12%; height: 11.8%; }

/* Ankommen: Das Gerät steht vom ersten Bild an da (Nabil, 17.10.: kein Einblenden, das wartet eine Sekunde). Bis die
   Seite bereit ist, gleitet es nicht — sonst sähe man, wie es an seinen Platz rückt. */
.js .buehne:not(.bereit) .geraet-ort { transition: none; }

/* Schritte: Der alte Text geht zuerst, dann kommt der neue — nie liegen zwei übereinander. */
.schritte { position: absolute; inset: 0; pointer-events: none; }
.schritt {
  position: absolute; top: 50%;
  width: var(--spalte);
  transform: translateY(calc(-50% + 14px)); opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.schritt[data-nr="1"], .schritt[data-nr="3"] { right: calc(50% + var(--gw) / 2 + var(--luft)); }
.schritt[data-nr="2"] { left: calc(50% + var(--gw) / 2 + var(--luft)); width: min(400px, calc(var(--seite) - var(--luft) - var(--rand) - 24px)); }  /* rechts bleibt Rand für den Fortschritt */
.buehne[data-schritt="1"] .schritt[data-nr="1"],
.buehne[data-schritt="2"] .schritt[data-nr="2"],
.buehne[data-schritt="3"] .schritt[data-nr="3"] {
  opacity: 1; transform: translateY(-50%); pointer-events: auto;
  transition: opacity 0.5s ease 0.24s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s;
}
.schritt-marke { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: 18px; }
.schritt-marke span { font-family: var(--anzeige); font-weight: 800; letter-spacing: 0; font-size: 13px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--glas-ton); box-shadow: var(--glas-kante); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8); }
.schritt h2 { font-family: var(--anzeige); font-weight: 800; font-size: clamp(27px, calc(var(--seite) * 0.078), 46px); line-height: 1.04; letter-spacing: -0.03em; color: var(--wortmarke); margin-bottom: 18px; text-wrap: balance; }
.schritt .lang { font-size: clamp(16px, calc(var(--seite) * 0.046), 18px); line-height: 1.55; color: var(--tinte-leise); text-wrap: pretty; }
.schritt .kurz { display: none; }

/* Fortschritt: mit eigenem Rand, nie in der Textspalte. */
.fortschritt { position: absolute; right: max(14px, calc(var(--rand) * 0.42)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity 0.5s ease; }
.fortschritt i { width: 4px; height: 22px; border-radius: 2px; background: var(--linie); transition: background 0.4s ease, height 0.4s ease; }
.buehne:not([data-schritt="0"]) .fortschritt { opacity: 1; }
.buehne[data-schritt="1"] .fortschritt i:nth-child(1),
.buehne[data-schritt="2"] .fortschritt i:nth-child(2),
.buehne[data-schritt="3"] .fortschritt i:nth-child(3) { background: var(--akzent); height: 40px; }

/* Sprünge (Pos1, Tippen auf die Statusleiste, Neuladen): ohne Übergang, damit nichts übereinander steht. */
.buehne.sofort .schritt, .buehne.sofort .seite, .buehne.sofort .seite::after, .buehne.sofort .leiste > .inhalt,
.buehne.sofort .linse, .buehne.sofort .kapsel, .buehne.sofort .statuszeile, .buehne.sofort .fortschritt,
.buehne.sofort .fortschritt i, .buehne.sofort .geraet-ort { transition: none !important; }

/* ───────── Im Gerät: die App (Punktmaß 390 × 844) ───────── */
.schirm-innen {
  --p: 1px;   /* ein iOS-Punkt (Statuszeile und Heimbalken teilen ihre Maße mit dem Team-Handy) */
  position: absolute; left: 0; top: 0; width: 390px; height: 844px;
  transform: scale(var(--s)); transform-origin: 0 0;
  font-family: var(--schrift); color: var(--a-tinte); background: var(--a-grund);
  line-height: 1.2; overflow: hidden;
}
.schirm-innen svg { stroke-width: 2; }
/* Bildschirmwechsel wie in iOS: Die neue Seite schiebt sich deckend herein, die alte rückt zurück und wird leicht abgedunkelt. */
.seite { position: absolute; inset: 0; overflow: hidden; background: var(--a-grund); box-shadow: -10px 0 30px rgba(10, 30, 26, 0.12); }
.seite[data-seite="0"] { z-index: 1; }
.seite[data-seite="1"] { z-index: 2; }
.seite[data-seite="2"] { z-index: 3; }
.seite::after { content: ""; position: absolute; inset: 0; z-index: 20; background: var(--a-tuch); opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
html:not(.js) .seite:not([data-seite="0"]) { display: none; }
.js .seite { transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.js .seite.weg { transform: translateX(-30%); }
.js .seite.weg::after { opacity: 1; }
.js .seite.da { transform: none; }
.js .seite.ruht { visibility: hidden; }
.js .seite.still, .js .seite.still::after { transition: none !important; }
/* Die gemalte Liste kommt einen Wimpernschlag nach dem Gerät (Schriften und Fotos müssen da sein) — kurz eingeblendet statt aufzuspringen. */
.streifen { position: absolute; left: 0; top: 0; width: 390px; will-change: transform; opacity: 0; transition: opacity 0.18s ease; }
.streifen.gemalt { opacity: 1; }
/* Kanten oben und unten wie in iOS 26: Der Grund fällt weich über den rollenden Inhalt, unter Kopf und Leiste. */
.kante { position: absolute; left: 0; right: 0; pointer-events: none; }
.kante-oben { top: 0; height: 126px; background: linear-gradient(var(--a-grund) 0, var(--a-grund) 100px, color-mix(in srgb, var(--a-grund) 50%, transparent) 113px, transparent 126px); }
.seite[data-seite="2"] .kante-oben { height: 124px; background: linear-gradient(var(--a-grund) 0, var(--a-grund) 104px, color-mix(in srgb, var(--a-grund) 50%, transparent) 114px, transparent 124px); }
.kante-unten { top: 690px; bottom: 0; background: linear-gradient(transparent, var(--a-grund) 80px); }

.app-kopf { position: absolute; left: 20px; right: 16px; top: 60px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.app-marke { color: var(--a-wortmarke); font-family: var(--anzeige); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; line-height: 1; }
.app-marke b { font-weight: 800; }

/* Glas im Gerät. Ruhend ist es die gerechnete Linse (.lebt); ohne Skript bleibt der Weichzeichner des Browsers. */
.glas {
  --r: 30px;
  position: absolute; overflow: hidden; isolation: isolate; border-radius: var(--r);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.7); backdrop-filter: blur(10px) saturate(1.7);
  box-shadow: 0 14px 30px -14px rgba(10, 44, 38, 0.42), 0 2px 6px -2px rgba(10, 44, 38, 0.14);
}
.glas.lebt { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.glas > .linse { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 0.42s ease; }
.glas.lebt > .linse.an { opacity: 1; }
.glanz {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.16));
  box-shadow:
    inset 0 0 0 0.5px rgba(20, 56, 48, 0.26),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 1.5px rgba(255, 255, 255, 0.7),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.3),
    inset 0 5px 9px -5px rgba(255, 255, 255, 0.7),
    inset 0 -7px 12px -8px rgba(20, 56, 48, 0.18);
}
.glanz::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.75px;
  background: linear-gradient(125deg, #ffffff, rgba(255, 255, 255, 0.22) 28%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glas > .inhalt { position: relative; z-index: 2; }

.glas-klein.pkw { --r: 18px; position: relative; display: inline-flex; height: 36px; box-shadow: 0 6px 14px -8px rgba(10, 44, 38, 0.35); }
.pkw .inhalt { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; font-size: 15px; font-weight: 600; }
.pkw svg { width: 20px; height: 20px; color: var(--a-akzent); }
.pkw svg.klein { width: 15px; height: 15px; color: var(--a-leise); }

.suchkarte { --r: 30px; left: 16px; top: 112px; width: 358px; height: 136px; }
.suchkarte .inhalt { height: 100%; padding: 0 18px 0 20px; }
.such-zeile { display: flex; align-items: center; gap: 14px; height: 68px; }
.such-zeile svg { width: 22px; height: 22px; color: var(--a-marke); flex: none; stroke-width: 1.8; }
.such-zeile span { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.such-zeile b { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.such-zeile em { font-style: normal; font-weight: 500; font-size: 13px; letter-spacing: 0.08em; color: var(--a-leise); margin-left: 7px; }
.such-zeile small { font-size: 13px; color: var(--a-leise); font-weight: 450; white-space: nowrap; }
.such-zeile svg.stift { width: 18px; height: 18px; color: var(--a-leise); }
.such-linie { position: absolute; left: 56px; right: 18px; top: 68px; height: 0.5px; background: rgba(25, 61, 54, 0.2); }

.glas-rund { --r: 22px; width: 44px; height: 44px; }
.glas-rund .inhalt { width: 100%; height: 100%; display: grid; place-items: center; }
.glas-rund svg { width: 24px; height: 24px; stroke-width: 2.3; }
.zurueck { left: 16px; top: 56px; }
.nav-titel { position: absolute; left: 80px; right: 80px; top: 56px; height: 44px; display: grid; place-items: center; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; color: var(--a-tinte); }

/* Statuszeile wie am iPhone 18 Pro (iOS 27), auf 390 umgerechnet (· 0,970). Alle Maße in --p: im großen Gerät 1 px
   (Punktmaß), im Team-Handy --u. Uhr, Insel und Zeichen liegen auf einer Mittellinie (31,4); die Uhr steht mittig im
   linken Ohr, die Zeichen spiegelbildlich im rechten. Größen nach Apples Vorlage, nicht nach der Messung am Gerät
   (dort rund 10 % größer): Nabil wollte die Zeichen kleiner. Die Formen liegen als Symbole in index.html. */
.statuszeile, .ts-status { position: absolute; left: 0; right: 0; top: 0; height: calc(60 * var(--p)); z-index: 5; pointer-events: none; }
.statuszeile { color: var(--a-status); }
.uhr, .ts-uhr {
  position: absolute; left: calc(79.2 * var(--p)); top: calc(31.4 * var(--p)); transform: translate(-50%, -50%);
  font: 600 calc(16.5 * var(--p)) / 1 system-ui, -apple-system, "Public Sans", sans-serif; letter-spacing: 0; white-space: nowrap;
}
/* Im Team-Handy ist die Uhr nur 6–7 px groß; die Systemschrift würde sie dort weit sperren. Ohne optische Größe
   steht sie fast so eng wie die große. */
.ts-uhr { font-optical-sizing: none; }
.insel { position: absolute; left: calc(149.15 * var(--p)); top: calc(13.6 * var(--p)); width: calc(91.7 * var(--p)); height: calc(35.6 * var(--p)); border-radius: 99px; background: #000; }
.zeichen, .ts-zeichen { position: absolute; right: calc(41.5 * var(--p)); top: calc(31.4 * var(--p)); transform: translateY(-50%); display: flex; align-items: center; gap: calc(6.8 * var(--p)); }
.zeichen svg, .ts-zeichen svg { fill: currentColor; stroke: none; overflow: visible; }
.balken { width: calc(18.6 * var(--p)); height: calc(11.9 * var(--p)); }
.wlan { width: calc(16.6 * var(--p)); height: calc(12 * var(--p)); }
.akku { width: calc(26.5 * var(--p)); height: calc(12.6 * var(--p)); }

/* Leiste unten: dieselbe Glaskapsel in allen Zuständen; beim Buchen wird sie zur Buchungsleiste. */
.leiste { --r: 31px; left: 16px; top: 754px; width: 358px; height: 62px; z-index: 4; }
/* Fast nacheinander: Was geht, ist in 0,12 s fort; was kommt, setzt schon nach 0,08 s ein — die Kapsel steht nie leer da,
   und beide Inhalte liegen nie lesbar übereinander. */
.leiste > .inhalt { position: absolute; inset: 0; transition: opacity 0.12s ease, transform 0.12s ease, filter 0.12s ease; }
.reiter { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 5px; }
.reiter-feld { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--a-tinte); }
.reiter-feld svg { width: 23px; height: 23px; }
.kapsel { position: absolute; left: 5px; top: 5px; width: 87px; height: 52px; transform: translateX(0); transition: transform 0.62s cubic-bezier(0.3, 1.3, 0.45, 1); }
.kapsel i {
  position: absolute; inset: 0; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.34)), rgba(17, 62, 57, 0.06);
  box-shadow: inset 0 0 0 0.5px rgba(20, 56, 48, 0.24), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95), inset 0 -1.5px 2px rgba(255, 255, 255, 0.75), inset 0 0 0 1.5px rgba(255, 255, 255, 0.36), 0 2px 6px -2px rgba(10, 44, 38, 0.16);
}
.kapsel.fliesst i { animation: tropfen 0.62s cubic-bezier(0.3, 0.6, 0.4, 1); }
@keyframes tropfen { 0% { transform: none; } 30% { transform: scale(1.24, 0.86); } 58% { transform: scale(0.96, 1.05); } 80% { transform: scale(1.02, 0.98); } 100% { transform: none; } }
.schirm-innen[data-zustand="2"] .kapsel { transform: translateX(87px); }
.reiter-feld:nth-child(2) { color: var(--a-akzent); }
.schirm-innen[data-zustand="2"] .reiter-feld:nth-child(2) { color: var(--a-tinte); }
.schirm-innen[data-zustand="2"] .reiter-feld:nth-child(3) { color: var(--a-akzent); }
.buchen { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 24px; opacity: 0; transform: scale(0.96); filter: blur(4px); }
.schirm-innen[data-zustand="1"] .reiter { opacity: 0; transform: scale(0.96); filter: blur(4px); }
.schirm-innen[data-zustand="1"] .buchen,
.schirm-innen:not([data-zustand="1"]) .reiter { transition: opacity 0.22s ease 0.08s, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s, filter 0.22s ease 0.08s; }
.schirm-innen[data-zustand="1"] .buchen { opacity: 1; transform: none; filter: none; }
.wahl { display: flex; flex-direction: column; gap: 1px; }
.wahl b { font-family: var(--anzeige); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wahl small { font-size: 12px; color: var(--a-leise); font-weight: 500; }
.gruen-knopf {
  height: 46px; padding: 0 34px; border-radius: 23px; display: grid; place-items: center;
  font-size: 16px; font-weight: 650; color: #fff;
  background: linear-gradient(180deg, rgba(36, 128, 112, 0.96), rgba(14, 64, 56, 0.98) 60%, rgba(24, 98, 86, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 10px 12px -9px rgba(255, 255, 255, 0.22), inset 0 -10px 12px -9px rgba(150, 240, 214, 0.36), 0 6px 14px -6px rgba(10, 60, 52, 0.5);
}
/* Heimbalken: 139 × 5 Punkt auf 402 (134,8 auf 390), 8 Punkt über der Unterkante. */
.heim, .ts-heim { position: absolute; left: 50%; bottom: calc(8 * var(--p)); width: calc(134.8 * var(--p)); height: max(1.5px, calc(5 * var(--p))); margin-left: calc(-67.4 * var(--p)); border-radius: 99px; z-index: 6; }
.heim { background: var(--a-status); }
.ts-heim { background: #fff; }

/* Glas im Dunkeln */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glas { background: rgba(30, 50, 44, 0.55); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.3); }
  :root:not([data-theme="light"]) .glas.lebt { background: none; }
  :root:not([data-theme="light"]) .glanz {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28), inset 0 1.5px 1px rgba(255, 255, 255, 0.42), inset 0 -1.5px 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 1.5px rgba(255, 255, 255, 0.06), inset 0 -7px 12px -8px rgba(0, 0, 0, 0.3);
  }
  :root:not([data-theme="light"]) .glanz::before { background: linear-gradient(125deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.1) 28%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.4)); }
  :root:not([data-theme="light"]) .such-linie { background: rgba(255, 255, 255, 0.2); }
  :root:not([data-theme="light"]) .kapsel i { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.26), inset 0 1.5px 1px rgba(255, 255, 255, 0.36), inset 0 -1px 1.5px rgba(255, 255, 255, 0.1), 0 2px 6px -2px rgba(0, 0, 0, 0.3); }
  :root:not([data-theme="light"]) .gruen-knopf { background: linear-gradient(180deg, rgba(62, 176, 146, 0.95), rgba(22, 108, 86, 0.98) 60%, rgba(40, 146, 116, 0.95)); }
  :root:not([data-theme="light"]) .spiegel { background: linear-gradient(100deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 18%, rgba(255, 255, 255, 0) 34%); }
}

/* ───────── Orte: Das Licht der Bühne läuft weiter, die Codes liegen auf einem Glasband ───────── */
.orte { position: relative; padding: clamp(72px, 9vw, 136px) 0 clamp(56px, 7vw, 96px); }
.licht-orte {
  top: -320px; z-index: -1;
  -webkit-mask: linear-gradient(transparent 0, #000 380px, #000 55%, transparent 96%); mask: linear-gradient(transparent 0, #000 380px, #000 55%, transparent 96%);
}
.licht-orte .la { width: 96vmax; height: 60vmax; left: -22vmax; top: 0; background: radial-gradient(closest-side, var(--licht-c), transparent); }
.licht-orte .lb { width: 62vmax; height: 42vmax; right: -14vmax; top: 30%; background: radial-gradient(closest-side, var(--licht-a), transparent); }
.licht-orte .lc { width: 50vmax; height: 34vmax; left: 4%; top: 6%; background: radial-gradient(closest-side, var(--licht-b), transparent); opacity: 0.8; }
.orte .breite { position: relative; }
.marke-klein { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: 16px; }
h2 { font-family: var(--anzeige); font-weight: 800; letter-spacing: -0.03em; color: var(--wortmarke); }
.orte h2, .anbieter h2, .schluss h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; text-wrap: balance; }
.fliess { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--tinte-leise); max-width: 560px; margin-top: 20px; text-wrap: pretty; }
.orte-kopf { max-width: 760px; }
.glasband {
  position: relative; isolation: isolate; margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(24px, 2.8vw, 38px) clamp(22px, 3.2vw, 46px);
  border-radius: clamp(24px, 2.6vw, 34px);
  background: color-mix(in srgb, var(--flaeche) 44%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.9); backdrop-filter: blur(28px) saturate(1.9);
  box-shadow: var(--glas-kante), 0 30px 60px -36px rgba(14, 58, 50, 0.42), 0 4px 12px -6px rgba(14, 58, 50, 0.12);
}
.glasband::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--glas-licht);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glasband::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--glas-schein), transparent 46%); }
.codes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: clamp(10px, 1.6vw, 24px); }
.codes li { display: flex; flex-direction: column; gap: 8px; }
.codes b {
  font-family: var(--anzeige); font-weight: 800; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--wortmarke) 30%, var(--akzent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.codes span { font-size: 15px; color: var(--tinte-leise); }
.orte-listen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(48px, 6vw, 80px); }
.orte-listen h3 { display: flex; align-items: center; gap: 10px; font-family: var(--anzeige); font-size: 20px; font-weight: 700; color: var(--wortmarke); padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.orte-listen h3 svg { width: 22px; height: 22px; color: var(--akzent); }
.orte-listen li { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 17px; color: var(--tinte); }

/* ───────── Anbieter: eine zweite Bühne ───────── */
.anbieter { position: relative; padding: clamp(72px, 9vw, 130px) 0 clamp(80px, 9vw, 130px); overflow: hidden; }
.licht-anbieter { -webkit-mask: linear-gradient(transparent, #000 22%, #000 70%, transparent); mask: linear-gradient(transparent, #000 22%, #000 70%, transparent); }
.licht-anbieter .la { width: 80vmax; height: 60vmax; left: 50%; top: 56%; margin: -30vmax 0 0 -40vmax; background: radial-gradient(closest-side, var(--licht-a), transparent); }
.licht-anbieter .lb { width: 50vmax; height: 40vmax; left: 30%; top: 70%; margin: -20vmax 0 0 -25vmax; background: radial-gradient(closest-side, var(--licht-b), transparent); }
.anbieter-kopf { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.anbieter-kopf .fliess { max-width: 600px; }
/* Knöpfe. „Partner werden" ist gefüllt: ein satter Verlauf von hell nach tief, oben eine feine Lichtkante, darunter ein
   weicher Schatten — kein Glanzband. Weiße Schrift hält im Hellen wie im Dunkeln mindestens 4,5 : 1. Die Adresse im
   Schluss ist Glas. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px;
  font-size: 17px; font-weight: 650; text-decoration: none; position: relative; isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), filter 0.2s ease;
}
.knopf svg { width: 20px; height: 20px; stroke-width: 2.2; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: scale(1.02, 0.95); filter: brightness(0.94); }
.knopf-gruen {
  color: #fff;
  background: linear-gradient(180deg, #1d7a69, #11493f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 24px -12px rgba(10, 60, 52, 0.6), 0 2px 5px -2px rgba(10, 60, 52, 0.22);
}
/* Der Pfeil zeigt, wohin es geht: Beim Überfahren rückt er ein Stück nach rechts. Der Ausgleich rechts nimmt die Luft im
   Zeichen selbst heraus, damit Wort und Pfeil in der Mitte des Knopfs stehen. */
.knopf-gruen svg { margin-right: -3px; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.knopf-gruen:hover svg { transform: translateX(3px); }
.knopf-glas {
  color: var(--tinte); background: var(--glas-ton);
  -webkit-backdrop-filter: blur(18px) saturate(1.9); backdrop-filter: blur(18px) saturate(1.9);
  box-shadow: var(--glas-kante), var(--glas-schatten);
}
.knopf-glas svg { color: var(--akzent); }
/* Im Dunkeln ein helleres Smaragd, sonst versänke der Knopf im dunkelgrünen Grund und die Glasschilder darüber wirkten lauter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knopf-gruen { background: linear-gradient(180deg, #2b9277, #156049); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 26px -12px rgba(0, 0, 0, 0.7), 0 2px 5px -2px rgba(0, 0, 0, 0.35); }
}
:root[data-theme="dark"] .knopf-gruen { background: linear-gradient(180deg, #2b9277, #156049); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 26px -12px rgba(0, 0, 0, 0.7), 0 2px 5px -2px rgba(0, 0, 0, 0.35); }

/* Das Bild: Portalfenster, davor das Team-Handy. Das Handy liegt nur über leerer Fläche des Fensters
   (unter den Menüpunkten), die Schilder stehen daneben bzw. darunter — nie über Bedienelementen. */
.anbieter-buehne {
  --tw: clamp(118px, 13vw, 170px);   /* Breite des Team-Handys */
  --fh: 470px;                       /* Höhe des Portalfensters */
  --ht: 246px;                       /* Oberkante des Team-Handys im Fenster */
  position: relative; margin-top: clamp(48px, 6vw, 84px);
}
.anbieter-bild { position: relative; width: min(100%, 920px); margin-inline: auto; padding-bottom: max(0px, calc(var(--tw) * 2.0785 + var(--ht) - var(--fh))); }
.fenster {
  position: relative; height: var(--fh); border-radius: 22px; overflow: hidden;
  background: color-mix(in srgb, var(--flaeche) 62%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: var(--glas-kante), 0 40px 80px -40px rgba(8, 52, 46, 0.5), 0 12px 30px -18px rgba(8, 52, 46, 0.3);
  font-size: 14px;
}
.f-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; padding: 0 18px; border-bottom: 1px solid color-mix(in srgb, var(--linie) 80%, transparent); }
.f-marke { display: flex; align-items: center; font-family: var(--anzeige); font-weight: 500; font-size: 16px; color: var(--wortmarke); white-space: nowrap; }
.f-marke b { font-weight: 800; }
.f-marke em { font-style: normal; font-family: var(--schrift); font-weight: 500; font-size: 13px; color: var(--tinte-leise); margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--linie); }
.f-seg { display: flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--leise) 85%, transparent); font-size: 13px; font-weight: 600; color: var(--tinte-leise); white-space: nowrap; }
.f-seg span { padding: 6px 14px; border-radius: 999px; }
.f-seg .an { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 3px rgba(10, 44, 38, 0.14); }
.f-koerper { display: grid; grid-template-columns: 172px 1fr; height: calc(100% - 58px); }
.f-nav { padding: 14px 10px; border-right: 1px solid color-mix(in srgb, var(--linie) 80%, transparent); display: flex; flex-direction: column; gap: 2px; }
.f-nav li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--tinte-leise); font-weight: 600; font-size: 13.5px; }
.f-nav li svg { width: 18px; height: 18px; flex: none; }
.f-nav li.an { background: color-mix(in srgb, var(--flaeche) 80%, transparent); color: var(--tinte); box-shadow: 0 1px 3px rgba(10, 44, 38, 0.1); }
.f-nav li.an svg { color: var(--akzent); }
.f-liste { padding: 18px 20px; min-width: 0; }
.f-titelzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.f-titel { font-family: var(--anzeige); font-weight: 700; font-size: 18px; color: var(--wortmarke); }
.f-ort { font-size: 13px; color: var(--tinte-leise); white-space: nowrap; }
/* Die Anreisen als Tabelle: eine Fläche, die Zeilen durch feine Linien getrennt. */
.f-tabelle {
  padding: 4px; border-radius: 16px;
  background: color-mix(in srgb, var(--flaeche) 72%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--linie) 90%, transparent);
}
/* Eine Anreise je Zeile: Uhrzeit, Serviceart (Zeichen und Wort in ihrer Farbe), Name, Kennzeichen, Flug, Stand.
   Jede Angabe hat ihre feste Spalte, damit Kennzeichen und Flüge in allen Zeilen an derselben Kante beginnen. */
.f-zeile {
  position: relative;
  display: grid; grid-template-columns: 42px 70px 122px 106px minmax(0, 1fr) 112px; align-items: center; column-gap: 10px;
  height: 54px; padding: 0 10px 0 14px; border-radius: 12px;
  font-size: 14px;
}
.f-zeile + .f-zeile::before { content: ""; position: absolute; left: 14px; right: 10px; top: 0; height: 1px; background: var(--linie); }
.f-zeile time { font-weight: 650; color: var(--tinte); font-variant-numeric: tabular-nums; }
.f-art { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.f-art.shuttle { color: var(--svc-shuttle); }
.f-art.valet { color: var(--svc-valet); }
.f-art svg { width: 16px; height: 16px; flex: none; stroke-width: 1.9; }
.f-art em { font-style: normal; }
.f-wer { display: contents; }
.f-wer b { min-width: 0; font-weight: 650; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-wer .schild { justify-self: start; }
.f-reise { min-width: 0; color: var(--tinte-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
/* Stand als ruhiges Etikett, Punkt und Wort wie im Parkausweis: „Eingecheckt" mit grünem, „Bestätigt" mit neutralem Punkt.
   Links in seiner Spalte, damit die Punkte untereinander stehen. */
.f-status { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--tinte-leise); white-space: nowrap; }
.f-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--tinte-leise) 45%, transparent); }
.f-status.ok::before { background: var(--eingecheckt); }
/* Die Anreise, um die es geht, hebt sich aus der Tabelle; die Linien an ihr entfallen. */
.f-zeile.neu { background: var(--flaeche); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--akzent) 60%, transparent), 0 8px 18px -10px rgba(10, 60, 52, 0.4); }
.f-zeile.neu::before, .f-zeile.neu + .f-zeile::before { content: none; }
/* Kennzeichen: weißes Schild mit blauem Euroband, Sternenkranz und „D" — dasselbe Schild wie in den gemalten
   Handy-Bildschirmen (auch im Dunkeln weiß), nur ohne die beiden Plaketten: Bei dieser Größe (Portal 12,5 px, im
   Team-Handy kleiner) wären sie nur graue Flecken, an ihrer Stelle bleibt ein schmaler Abstand. Alle Maße in em:
   Die Schriftgröße bestimmt die Größe. Die Sterne sind ein Vektor in der Datei, nichts wird geladen. */
.schild {
  display: inline-flex; align-items: center; flex: none; height: 1.6em; padding-right: 0.48em; border-radius: 0.28em;
  background: #fff; color: #15191b; box-shadow: inset 0 0 0 max(0.5px, 0.08em) #2a3033;
  font: 700 12.5px/1 var(--anzeige); letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; font-stretch: 85%;
}
/* Das Band trägt 0,56 em Schrift: Seine eigenen Maße beziehen sich darauf (1 em hier = 7 px bei 12,5 px Schild). */
.schild i {
  align-self: stretch; width: 1.571em; margin-right: 0.714em; padding-bottom: 0.33em; border-radius: 0.5em 0 0 0.5em;
  display: flex; align-items: flex-end; justify-content: center;
  background: #1d4fb8 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="%23f5cd1a"%3E%3Ccircle cx="11.10" cy="6.00" r=".85"/%3E%3Ccircle cx="10.42" cy="8.55" r=".85"/%3E%3Ccircle cx="8.55" cy="10.42" r=".85"/%3E%3Ccircle cx="6.00" cy="11.10" r=".85"/%3E%3Ccircle cx="3.45" cy="10.42" r=".85"/%3E%3Ccircle cx="1.58" cy="8.55" r=".85"/%3E%3Ccircle cx="0.90" cy="6.00" r=".85"/%3E%3Ccircle cx="1.58" cy="3.45" r=".85"/%3E%3Ccircle cx="3.45" cy="1.58" r=".85"/%3E%3Ccircle cx="6.00" cy="0.90" r=".85"/%3E%3Ccircle cx="8.55" cy="1.58" r=".85"/%3E%3Ccircle cx="10.42" cy="3.45" r=".85"/%3E%3C/svg%3E') no-repeat 50% 0.42em / 0.9em 0.9em;
  color: #fff; font: normal 700 0.56em/1 var(--schrift);
}
/* Der Abstand zwischen Kreis und Buchstaben, wo am echten Schild die Plaketten sitzen */
.schild s { width: 0.5em; }

/* Dieselbe Gerätesprache wie das große iPhone, als Anteil von --tw (Maße siehe dort). */
.team {
  position: absolute; left: clamp(-28px, calc(12px - var(--rand)), 0px); top: var(--ht); width: var(--tw); height: calc(var(--tw) * 2.0785);
  border-radius: calc(var(--tw) * 0.1805); background: var(--rahmen); padding: calc(var(--tw) * 0.0367);
  box-shadow: var(--rahmen-kante), 0 40px 70px -34px rgba(8, 40, 34, 0.6), 0 14px 30px -18px rgba(8, 40, 34, 0.4);
}
.team::before { content: ""; position: absolute; inset: calc(var(--tw) * 0.0167); border-radius: calc(var(--tw) * 0.1638); background: #020303; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
/* Der Bildschirm „Einchecken" der Anbieter-App, gebaut in iPhone-Punkten: 1 Punkt = --u (Bildschirm 390 Punkt breit).
   Oben Statuszeile und großer Titel, in der Mitte das ruhige, dunkle Kamerabild mit dem Rahmen und dem erkannten
   Ausweis (gerade, wie man ein Handy hinhält), unten das Blatt mit Name, Kennzeichen und dem Knopf. */
.team { --u: calc(var(--tw) * 0.9265 / 390); --p: var(--u); }
.team-schirm {
  position: relative; width: 100%; height: 100%; border-radius: calc(var(--tw) * 0.1429); overflow: hidden; color: #fff;
  background: radial-gradient(140% 70% at 50% 40%, #2a2f2d 0%, #171b1a 52%, #0c0e0d 100%);
}
/* Die Insel liegt im Gerät, nicht im Bildschirm: Ihr Abstand zählt deshalb vom Gehäuserand. Statuszeile und Heimbalken
   teilen die Regeln des großen Geräts (--p = --u). */
.team-insel { position: absolute; left: 50%; top: calc(var(--tw) * 0.0367 + 13.6 * var(--u)); width: calc(91.7 * var(--u)); height: calc(35.6 * var(--u)); margin-left: calc(-45.85 * var(--u)); border-radius: 99px; background: #000; }
.ts-kopf { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(96 * var(--u)); }
.ts-kopf b { display: block; font-family: var(--anzeige); font-size: calc(34 * var(--u)); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.ts-kopf small { display: block; margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.ts-sucher { position: absolute; left: calc(55 * var(--u)); right: calc(55 * var(--u)); top: calc(200 * var(--u)); aspect-ratio: 1; }
.ts-ausweis { position: absolute; inset: 16%; padding: 9%; background: #fff; border-radius: calc(16 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, 0.65); }
.ts-ausweis img { display: block; width: 100%; height: auto; }
.ecke { position: absolute; width: 20%; height: 20%; border: max(1.5px, calc(4 * var(--u))) solid rgba(255, 255, 255, 0.92); }
.ecke.e1 { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: calc(22 * var(--u)); }
.ecke.e2 { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: calc(22 * var(--u)); }
.ecke.e3 { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: calc(22 * var(--u)); }
.ecke.e4 { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: calc(22 * var(--u)); }
/* Das Blatt: dunkles iOS-Blatt von unten, oben gerundet, mit Platz für den Heimbalken. */
.team-blatt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(34 * var(--u));
  border-radius: calc(36 * var(--u)) calc(36 * var(--u)) 0 0;
  display: flex; flex-direction: column; align-items: stretch; gap: calc(10 * var(--u));
  background: rgba(30, 34, 33, 0.94);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.22), 0 calc(-8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
  font-size: calc(15 * var(--u));
}
.tb-zeile { display: flex; align-items: center; gap: calc(6 * var(--u)); color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.tb-zeile svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #8bd8aa; flex: none; }
.tb-name { display: block; font-family: var(--anzeige); font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }
.tb-info { display: flex; align-items: center; gap: calc(12 * var(--u)); white-space: nowrap; }
.team .schild { font-size: calc(13 * var(--u)); }
.tb-art { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); color: #a5c5ff; font-weight: 650; }
.tb-art svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); flex: none; }
.tb-knopf { display: grid; place-items: center; height: calc(50 * var(--u)); margin-top: calc(4 * var(--u)); border-radius: 99px; font-size: calc(17 * var(--u)); font-weight: 650; color: #fff;
  background: linear-gradient(180deg, rgba(36, 128, 112, 0.98), rgba(14, 76, 66, 1) 60%, rgba(24, 104, 90, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgba(0, 0, 0, 0.5); }

/* Schilder: Glas, das erklärt, was das Bild zeigt. */
.notizen { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.notiz {
  padding: 16px 18px 17px; border-radius: 20px;
  background: var(--glas-ton);
  -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: var(--glas-kante), var(--glas-schatten);
}
.notiz dt { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--tinte); font-size: 16px; }
.notiz dt svg { width: 20px; height: 20px; color: var(--akzent); flex: none; }
.notiz dd { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--tinte-leise); }

/* „Partner werden" schließt das Bild ab, dort, wo der Blick nach Fenster, Team-Handy und Schildern ankommt — mit den
   Kanten der Schilder, nicht allein auf eigener Zeile. Stehen die Schilder als Reihe darunter (Laptop, Tablet): mittig
   unter der Reihe auf der Achse von Überschrift und Fenster, so breit wie ein Schild und genau unter dem mittleren. */
.anbieter-knopf { display: flex; justify-content: center; width: calc((100% - 32px) / 3); margin: 32px auto 0; }

/* Breit: Die Schilder stehen rechts neben dem Fenster, oben, mittig und unten an seinen Kanten ausgerichtet. Der Knopf
   steht mittig auf der Achse von Überschrift und Seite, so breit wie ein Schild, und endet auf der Unterkante des
   Team-Handys (die zweite Zeile ist dessen Überstand) — Nabil, 17.10.: „auf der gleichen Höhe, aber mittig". */
@media (min-width: 1281px) {
  .anbieter-buehne { display: grid; grid-template-columns: minmax(0, 1fr) 268px; grid-template-rows: var(--fh) auto; column-gap: clamp(40px, 4vw, 64px); align-items: start; }
  .anbieter-bild { width: 100%; grid-column: 1; grid-row: 1 / 3; }
  .notizen { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; height: var(--fh); margin-top: 0; }
  .anbieter-knopf { grid-column: 1 / -1; grid-row: 2; align-self: end; justify-self: center; width: 268px; margin: 24px 0 0; }
}

/* ───────── Schluss und Fuß ───────── */
.schluss { position: relative; padding: clamp(64px, 8vw, 120px) 0 clamp(96px, 11vw, 150px); text-align: center; overflow: hidden; }
.licht-schluss .la { width: 80vmax; height: 60vmax; left: 50%; top: 40%; margin: -30vmax 0 0 -40vmax; background: radial-gradient(closest-side, var(--licht-c), transparent); }
.schluss-innen { position: relative; display: flex; flex-direction: column; align-items: center; }
.schluss .fliess { margin-inline: auto; margin-bottom: 36px; }
.fuss { border-top: 1px solid var(--linie); padding: 28px 0 36px; font-size: 14px; color: var(--tinte-leise); }
.fuss-innen { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.marke-fuss .wort { font-size: 16px; }
.firma { flex: 1 1 auto; }
.recht { display: flex; gap: 24px; }
.recht a { text-decoration: none; color: var(--tinte); font-weight: 600; padding: 6px 0; }
.recht a:hover, .recht a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ───────── Rechtsseiten (Impressum, Datenschutz) ───────── */
.rechtsseite { position: relative; overflow: hidden; padding: clamp(104px, 12vw, 150px) 0 clamp(64px, 8vw, 110px); }
.licht-recht { -webkit-mask: linear-gradient(#000 30%, transparent 85%); mask: linear-gradient(#000 30%, transparent 85%); }
.licht-recht .la { width: 80vmax; height: 56vmax; right: -24vmax; top: -24vmax; background: radial-gradient(closest-side, var(--licht-a), transparent); }
.licht-recht .lb { width: 70vmax; height: 50vmax; left: -26vmax; top: -10vmax; background: radial-gradient(closest-side, var(--licht-c), transparent); }
.rechtsseite .breite { position: relative; max-width: 820px; }
.zurueck-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 2px; font-size: 15px; font-weight: 650; color: var(--akzent-text); text-decoration: none; }
.zurueck-link svg { width: 18px; height: 18px; stroke-width: 2.2; }
.zurueck-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.rechtskarte {
  position: relative; isolation: isolate;
  padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 60px) clamp(32px, 5vw, 60px);
  border-radius: clamp(22px, 3vw, 32px);
  background: color-mix(in srgb, var(--flaeche) 70%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: var(--glas-kante), 0 30px 60px -36px rgba(14, 58, 50, 0.4), 0 4px 12px -6px rgba(14, 58, 50, 0.1);
}
.rechtskarte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--glas-licht);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.rechtskarte h1 { font-family: var(--anzeige); font-weight: 800; font-size: clamp(36px, 5.4vw, 56px); line-height: 1.02; letter-spacing: -0.03em; color: var(--wortmarke); }
.rechtskarte .stand { margin-top: 10px; font-size: 15px; color: var(--tinte-leise); }
.rechtskarte h2 { font-size: clamp(19px, 2vw, 22px); line-height: 1.25; letter-spacing: -0.015em; margin: 38px 0 10px; }
.rechtskarte p, .rechtskarte address, .rechtskarte ul { font-size: 17px; line-height: 1.65; color: var(--tinte); font-style: normal; text-wrap: pretty; }
.rechtskarte p + p, .rechtskarte address + p, .rechtskarte ul + p, .rechtskarte p + ul { margin-top: 12px; }
.rechtskarte ul { list-style: disc; padding-left: 1.3em; }
.rechtskarte li::marker { color: var(--akzent); }
.rechtskarte a { color: var(--akzent-text); font-weight: 600; text-underline-offset: 3px; }
.fehlt { background: var(--fehlt-grund); color: var(--fehlt-tinte); padding: 1px 7px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Einblenden beim Rollen */
.js .erscheint { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .erscheint.da { opacity: 1; transform: none; }

/* ───────── Bis 1280: Schilder als Reihe unter dem Bild ───────── */
@media (max-width: 999px) {
  .kopf { padding-top: 16px; }
  .wort { font-size: 19px; }
  .status { font-size: 12px; }
  .kontakt-link { font-size: 13px; padding: 6px 12px 6px 10px; }
  .kontakt-link { padding-inline: 14px; }
  .codes { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
  /* Portal zweizeilig: oben Uhrzeit, Name und Stand, darunter Serviceart (als Wort), Kennzeichen und Flug. */
  .anbieter-buehne { --fh: 614px; }
  .f-zeile { grid-template-columns: 46px 106px minmax(0, 1fr) auto; column-gap: 12px; grid-template-rows: auto auto; row-gap: 5px; height: auto; padding: 11px 12px 12px 14px; }
  .f-zeile + .f-zeile::before { right: 12px; }
  .f-zeile time { grid-area: 1 / 1; }
  .f-art { grid-area: 2 / 1; font-size: 12px; }
  .f-art svg { display: none; }
  .f-wer b { grid-area: 1 / 2 / 2 / 4; }
  .f-wer .schild { grid-area: 2 / 2; }
  .f-reise { grid-area: 2 / 3 / 3 / 5; font-size: 13px; }
  .f-status { grid-area: 1 / 4; }
}
@media (max-width: 760px) {
  .notizen { grid-template-columns: 1fr; }
  /* Schilder untereinander (darunter neben bzw. unter dem Team-Handy): Auf dem Handy nimmt der Knopf die ganze Breite des
     Fensters und schließt das Bild über alle seine Kanten ab; auf schmalen Tablets wird er nicht zum Balken, sondern
     bleibt eine mittige Pille. */
  .anbieter-knopf { width: 100%; max-width: 440px; margin: 20px auto 0; }
}
/* Ohne Menü: Das Fenster wird so hoch wie seine Liste, das Team-Handy steht ganz darunter, die Schilder daneben. */
@media (max-width: 700px) {
  .f-koerper { grid-template-columns: 1fr; height: auto; }
  .f-nav { display: none; }
  .fenster { height: auto; }
  .anbieter-bild { padding-bottom: 0; }
  .team { top: calc(100% + 20px); left: 0; }
  .notizen { margin: 20px 0 0 calc(var(--tw) + 24px); min-height: calc(var(--tw) * 2.0785); }
}
/* Handy: Fenster in voller Breite, das Team-Handy nur an der unteren Ecke, die Schilder daneben. */
@media (max-width: 560px) {
  .glasband { padding: 20px 18px 22px; border-radius: 24px; }
  .codes { column-gap: 10px; row-gap: 18px; }
  .codes li { gap: 6px; }
  .codes b { font-size: clamp(22px, 6.6vw, 30px); }
  .codes span { font-size: 13px; }
  .orte-listen { grid-template-columns: 1fr; }
  .anbieter-buehne { --tw: 104px; }
  .f-kopf { padding: 0 14px; }
  .f-marke em { display: none; }
  .f-liste { padding: 14px 12px 12px; }
  .f-titelzeile { flex-direction: column; gap: 2px; margin: 0 2px 12px; }
  .f-tabelle { padding: 3px; border-radius: 15px; }
  .f-zeile { grid-template-columns: 44px 102px minmax(0, 1fr) auto; column-gap: 9px; row-gap: 5px; padding: 10px 10px 11px 11px; font-size: 13.5px; }
  .f-zeile + .f-zeile::before { left: 11px; right: 10px; }
  .f-art { font-size: 11.5px; }
  .f-reise { font-size: 12.5px; }
  .f-status { gap: 6px; font-size: 12.5px; }
  .notizen { gap: 10px; }
  .notiz { padding: 14px 15px 15px; border-radius: 18px; }
  .notiz dt { font-size: 15px; }
  .notiz dd { font-size: 14px; }
  .fuss-innen { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 360px) {
  .wort { font-size: 17px; }
  .status { font-size: 11px; letter-spacing: 0.07em; }
}
/* Sehr schmal: die Schilder unter dem Team-Handy. */
@media (max-width: 380px) {
  .f-marke { font-size: 15px; }
  .f-seg span { padding: 6px 11px; }
  .team { left: 50%; margin-left: calc(var(--tw) / -2); }
  .notizen { margin: calc(var(--tw) * 2.0785 + 40px) 0 0; min-height: 0; }
  .codes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ───────── Hoch: Text oben, Gerät darunter, nach der Breite bemessen und unten weich angeschnitten ─────────
   Die Weiche (html.hoch) setzt SP_WEICHE im Kopf von index.html: Textspalte neben dem Gerät unter 260 px. */
html.hoch .szene { height: 360vh; height: 360svh; }
/* Weich angeschnitten nur, wo das Gerät wirklich über den Rand reicht; der Übergang wandert mit. */
html.hoch .buehne {
  --gross: clamp(36px, 10.4vw, 64px);
  -webkit-mask: linear-gradient(#000 var(--maske), transparent calc(var(--maske) + 16%));
  mask: linear-gradient(#000 var(--maske), transparent calc(var(--maske) + 16%));
  transition: --maske 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.hoch .buehne.schnitt-0[data-schritt="0"], html.hoch .buehne.schnitt-s:not([data-schritt="0"]) { --maske: 84%; }
html.hoch .geraet-ort { top: var(--top-s, 190px); transform: translateX(-50%); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.hoch .buehne[data-schritt="0"] .geraet-ort { transform: translateX(-50%) translateY(calc(var(--top-0, 270px) - var(--top-s, 190px))); }
html.hoch .auftakt { inset: auto var(--rand) auto var(--rand); top: 76px; line-height: 0.98; }
html.hoch .auftakt br { display: none; }
html.hoch .auftakt span { position: static; text-align: left; }
html.hoch .einleitung { left: var(--rand); right: var(--rand); width: auto; top: calc(76px + var(--gross) * 2.05 + 14px); font-size: 15.5px; max-width: 460px; }
html.hoch .schritt, html.hoch .schritt[data-nr] { left: var(--rand); right: var(--rand); width: auto; max-width: 520px; top: 76px; transform: translateY(14px); }
html.hoch .buehne[data-schritt="1"] .schritt[data-nr="1"],
html.hoch .buehne[data-schritt="2"] .schritt[data-nr="2"],
html.hoch .buehne[data-schritt="3"] .schritt[data-nr="3"] { transform: none; }
html.hoch .schritt-marke { margin-bottom: 10px; font-size: 12.5px; }
html.hoch .schritt-marke span { width: 28px; height: 28px; font-size: 11.5px; }
html.hoch .schritt h2 { font-size: clamp(26px, 7.4vw, 40px); margin-bottom: 0; }
/* Der volle Absatz bleibt für Bildschirmleser; zu sehen ist eine kurze Fassung (bei wenig Höhe keine, damit das Gerät Platz hat). */
html.hoch .schritt .lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.hoch .schritt .kurz { display: block; margin-top: 10px; max-width: 460px; font-size: 15.5px; line-height: 1.45; color: var(--tinte-leise); text-wrap: pretty; }
@media (max-height: 639px) { html.hoch .schritt .kurz { display: none; } }
html.hoch .fortschritt { display: none; }

/* ───────── Im Fluss: ohne Skript, und wenn die Höhe für eine stehende Bühne nicht reicht (quer, starker Zoom) ───────── */
:is(html:not(.js), html.fluss) .szene { height: auto; }
:is(html:not(.js), html.fluss) .buehne {
  position: relative; height: auto; display: flex; flex-direction: column; align-items: center;
  padding: 104px var(--rand) clamp(40px, 6vw, 72px);
  -webkit-mask: none; mask: none;
}
:is(html:not(.js), html.fluss) .auftakt,
:is(html:not(.js), html.fluss) .einleitung,
:is(html:not(.js), html.fluss) .schritte { position: relative; inset: auto; width: min(100%, 680px); }
:is(html:not(.js), html.fluss) .auftakt { font-size: clamp(40px, 7vw, 72px); line-height: 0.98; }
:is(html:not(.js), html.fluss) .auftakt br { display: none; }
:is(html:not(.js), html.fluss) .auftakt span { position: static; text-align: left; opacity: 1 !important; transform: none !important; }
:is(html:not(.js), html.fluss) .einleitung { left: auto; top: auto; margin-top: 18px; font-size: 17px; opacity: 1 !important; transform: none !important; }
:is(html:not(.js), html.fluss) .buehne .geraet-ort { position: relative; left: auto; top: auto; transform: none; margin: 44px auto 12px; flex: none; }
:is(html:not(.js), html.fluss) .schritte { margin-top: 44px; display: grid; gap: 36px; pointer-events: auto; }
:is(html:not(.js), html.fluss) .buehne .schritt[data-nr] { position: static; width: auto; max-width: none; opacity: 1; transform: none; transition: none; }
:is(html:not(.js), html.fluss) .schritt h2 { font-size: clamp(28px, 4.4vw, 40px); margin-bottom: 12px; }
:is(html:not(.js), html.fluss) .schritt .lang { font-size: 17px; }
:is(html:not(.js), html.fluss) .fortschritt { display: none; }
/* Quer mit Skript: links der Text, rechts das Gerät, so hoch wie der Bildschirm und stehend. Es zeigt den Schritt, der gerade im Blick ist. */
@media (min-width: 520px) {
  html.fluss .buehne {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(28px, 6vw, 72px); align-items: start;
    max-width: 1040px; margin-inline: auto; padding-top: 84px;
    overflow: clip;   /* hidden machte die Bühne zum Rollbehälter, dann stünde das Gerät nicht */
  }
  html.fluss .auftakt, html.fluss .einleitung, html.fluss .schritte { grid-column: 1; width: auto; }
  html.fluss .auftakt { grid-row: 1; font-size: clamp(36px, 5.6vw, 60px); }
  html.fluss .einleitung { grid-row: 2; }
  html.fluss .schritte { grid-row: 3; padding-bottom: calc(50vh - 60px); padding-bottom: calc(50svh - 60px); }
  html.fluss .buehne .geraet-ort { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: max(12px, calc(50svh - var(--gh) / 2)); margin: 0; }
}
html:not(.js) .buehne { --gw: 320px; --s: 0.76021; }
@media (max-width: 440px) { html:not(.js) .buehne { --gw: 280px; --s: 0.66518; } }
@media (max-width: 350px) { html:not(.js) .buehne { --gw: 250px; --s: 0.59391; } }

/* Weniger Bewegung: keine Wanderungen, nur harte Wechsel und kurzes Überblenden. */
@media (prefers-reduced-motion: reduce) {
  .licht i, .schritt, .seite, .seite::after, .kapsel, .leiste > .inhalt, .geraet-ort, .streifen { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .kapsel.fliesst i { animation: none !important; }
  .js .erscheint { transform: none; transition: opacity 0.3s ease; }
  .knopf, .knopf svg { transition: none; }
}