/* v3-Buendel: ERZEUGT von werkzeuge\v3_bauen.py — nicht hier bearbeiten. Alte Regeln: zwischen\www\hp.css, v3: werkzeuge\v3\ds\*.css */
/* ═══ alt: hp.css der bisherigen Seiten (Widgets .live-* .fb-* .vl-* …) ═══ */
/* ==========================================================================
   dispolotse.de — Homepage zum Beta-Start
   --------------------------------------------------------------------------
   Farbwelt DUNKEL = woertlich die der heutigen Platzhalterseite
   (VTC\bruecke\index.php): --grund #0e1116, --karte #161b22, --rand #262d38,
   --text #e6edf3, --matt #8b98a8, --ton #f0a02a.
   Farbwelt HELL   = die Pinsel der App (ENTWURF_DESIGNSPRACHE_LUXUS.md 0.1):
   F.Nacht #EEF1F5, F.Kabine #FFFFFF, F.Naht #D3DAE2, F.Licht #16202B,
   F.Nebel #5A6674, F.Signal #9A5A00.

   Abstaende: nur die sechs Stufen aus 0.4 (4 / 8 / 12 / 20 / 28 / 32).
   Schatten:  keiner. Statt dessen ein 1px Glanzstrich oben (F.Glanz, 0.3).
   Schriften: nur Systemschriften. Kein Schriftdienst, kein fremder Host.
   ========================================================================== */

/* ── Grundwerte: DUNKEL ist die Vorgabe ─────────────────────────────────── */
:root {
  color-scheme: dark;

  --grund:      #0e1116;
  --karte:      #161b22;
  --mulde:      #10151b;
  --rand:       #262d38;
  --naht:       #2a323c;
  --text:       #e6edf3;
  --matt:       #8b98a8;
  --ton:        #f0a02a;
  --ton-knopf:  #f0a02a;
  --ton-knopf2: #d98d16;
  --auf-ton:    #1a1200;
  --frei:       #4cc38a;
  --glanz:      rgba(255, 255, 255, .12);
  --tonhauch:   rgba(240, 160, 42, .10);
  --grund-halb: rgba(14, 17, 22, .74);
  --grund-hauch:rgba(14, 17, 22, .88);

  /* Panorama des Kopfes — dieselben Rollen wie F.Himmel/F.Abendglut/F.Ferne */
  --himmel1:    #131c28;
  --himmel2:    #2a2030;
  --sonne:      #f0a02a;
  --fernstes:   #1b232e;
  --ferne:      #141a23;
  --boden:      #0e1116;

  /* hpb1 29.09.: der Discord-Knopf in der Kopfleiste (Discord-Blau, auf
     beiden Farbwelten mit >= 4.5:1 Kontrast zum Grund der Leiste) */
  --discord:       #8c96f7;
  --discord-hauch: rgba(88, 101, 242, .16);
  --auf-discord:   #0e1116;

  /* Abstandsraster — sechs Stufen, sonst keine Zahl */
  --ab-winzig:  4px;
  --ab-klein:   8px;
  --ab-normal:  12px;
  --ab-gross:   20px;
  --ab-karte:   28px;
  --ab-seite:   32px;

  --rd-knopf:   7px;
  --rd-karte:   10px;
  --rd-gross:   16px;

  --breite:     1120px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Farbwelt HELL: per Systemwahl … ───────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]) {
    color-scheme: light;
    --grund:      #eef1f5;
    --karte:      #ffffff;
    --mulde:      #f4f7fa;
    --rand:       #d3dae2;
    --naht:       #d3dae2;
    --text:       #16202b;
    --matt:       #5a6674;
    --ton:        #9a5a00;
    --ton-knopf:  #9a5a00;
    --ton-knopf2: #7d4900;
    --auf-ton:    #ffffff;
    --frei:       #1a7f4b;
    --glanz:      rgba(255, 255, 255, .90);
    --tonhauch:   rgba(154, 90, 0, .07);
    --grund-halb: rgba(238, 241, 245, .80);
    --grund-hauch:rgba(238, 241, 245, .92);
    --himmel1:    #cfe0ef;
    --himmel2:    #f3dcc0;
    --sonne:      #f4c266;
    --fernstes:   #b9c8d6;
    --ferne:      #a8b8c8;
    --boden:      #eef1f5;
    --discord:       #4450c0;
    --discord-hauch: rgba(68, 80, 192, .08);
    --auf-discord:   #ffffff;
  }
}

/* … und per Schalter im Kopf (damit beide Welten lokal pruefbar sind) */
:root[data-farbe="hell"] {
  color-scheme: light;
  --grund:      #eef1f5;
  --karte:      #ffffff;
  --mulde:      #f4f7fa;
  --rand:       #d3dae2;
  --naht:       #d3dae2;
  --text:       #16202b;
  --matt:       #5a6674;
  --ton:        #9a5a00;
  --ton-knopf:  #9a5a00;
  --ton-knopf2: #7d4900;
  --auf-ton:    #ffffff;
  --frei:       #1a7f4b;
  --glanz:      rgba(255, 255, 255, .90);
  --tonhauch:   rgba(154, 90, 0, .07);
  --grund-halb: rgba(238, 241, 245, .80);
  --grund-hauch:rgba(238, 241, 245, .92);
  --himmel1:    #cfe0ef;
  --himmel2:    #f3dcc0;
  --sonne:      #f4c266;
  --fernstes:   #b9c8d6;
  --ferne:      #a8b8c8;
  --boden:      #eef1f5;
  --discord:       #4450c0;
  --discord-hauch: rgba(68, 80, 192, .08);
  --auf-discord:   #ffffff;
}

/* ── Grundgeruest ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* ⚠️ height:auto ist PFLICHT, nicht Kosmetik. Jedes Bild traegt width- und
   height-Attribute (damit beim Laden nichts springt). Ohne height:auto haelt
   der Browser die Attributhoehe fest und zieht das Bild in die Laenge, sobald
   es schmaler wird — auf dem ersten Vorschaubild waren die Screenshots in den
   Karten sichtbar gestreckt. */
img { max-width: 100%; height: auto; display: block; }

/* Raster-Kinder duerfen schmaler werden als ihr Inhalt: sonst zwingt ein
   948 px breites Bild die Spalte auf 948 px und die Seite laeuft seitlich
   ueber (die klassische Grid-Sprengung). */
.raster3 > *, .raster6 > *, .schritte > *, .zweispalt > *, .bilderpaar > * {
  min-width: 0;
}
a { color: var(--ton); }

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--ab-gross);
}

/* ── Kopfleiste: Marke, Sprache, Farbwahl ──────────────────────────────── */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--grund);                 /* Rueckfall fuer alte Browser */
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
.kopfleiste .bahn {
  display: flex;
  align-items: center;
  gap: var(--ab-normal);
  min-height: 60px;
  flex-wrap: wrap;
  padding-top: var(--ab-klein);
  padding-bottom: var(--ab-klein);
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--ab-klein);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.marke svg { width: 30px; height: 30px; flex: none; }

.schalter {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--mulde);
  border: 1px solid var(--rand);
  border-radius: var(--rd-knopf);
  padding: 2px;
}
.schalter a,
.schalter button {
  font: inherit;
  font-size: .78rem;
  line-height: 1;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--matt);
  cursor: pointer;
  text-decoration: none;
}
.schalter a:hover,
.schalter button:hover { color: var(--text); }
.schalter a[aria-current="true"],
.schalter button[aria-pressed="true"] {
  background: var(--karte);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--glanz);
}

/* ── M6: der Knopf „Anmelden" in der Kopfleiste ───────────────────────── */
.knopf-klein {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 8px 16px;
  border: 1px solid var(--ton);
  border-radius: var(--rd-knopf);
  background: var(--tonhauch);
  color: var(--ton);
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.knopf-klein:hover {
  background: var(--ton-knopf);
  color: var(--auf-ton);
  border-color: var(--ton-knopf);
}

/* ⭐ hpb1 29.09.2026 — der Discord-Knopf in der Kopfleiste, links neben
   „Anmelden", auf JEDER Seite. Marco: „wo ist auf der HP die möglichkeit bei
   dispolotse in den Discord zu gehen?" Nur ein gewoehnlicher Link auf die
   Einladung: kein Skript, kein Einbetten, nichts laedt von Discord vor dem Klick.
   ⚠️ Nicht in der Menueleiste: bei 1440 px ist sie voll, der Knopf brach dort in
      eine eigene zweite Zeile um (auf dem Probebild gesehen).
   Handy (< 700 px): nur das Zeichen, sonst bricht die zweite Kopfzeile
   (Farbwahl + Anmelden) um; das Wort bleibt fuer Vorleseprogramme. */
.knopf-discord {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--discord);
  border-radius: var(--rd-knopf);
  background: var(--discord-hauch);
  color: var(--discord);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.knopf-discord:hover,
.knopf-discord:focus-visible {
  background: var(--discord);
  color: var(--auf-discord);
}
.knopf-discord svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 699px) {
  .knopf-discord span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* Die kleinen Nebenseiten (Anmelden, Danke) — ein Gedanke, kein Gedränge */
.kleinseite { padding: 56px 0 var(--ab-seite); }
.kleinseite h1 {
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  margin: var(--ab-klein) 0 0;
}
.kleinseite .vorspann { margin-bottom: var(--ab-gross); }
.kleinseite .knopfreihe { margin-top: var(--ab-karte); }

/* ── M1: die Menueleiste ───────────────────────────────────────────────
   Vier gewoehnliche Anker.
   ⚠️ Sie liegt INNERHALB von <header class="kopfleiste">, erbt also deren
      Regel `.kopfleiste .bahn` mit — samt `min-height: 60px`. Auf dem Handy
      standen die Menuepunkte dadurch in zwei Zeilen von je 60 px Hoehe
      (auf dem Vorschaubild gesehen, 08.09.2026).
   ⭐ Umbrechen ist hier richtig und Rollen waere schlechter: alle vier Punkte
      bleiben sichtbar, statt dass zwei hinter dem Rand verschwinden. Nur die
      geerbte Mindesthoehe muss weg. */
.menue {
  border-top: 1px solid var(--rand);
  background: var(--mulde);
}
.menue .bahn {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ab-winzig);
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.menue .bahn::-webkit-scrollbar { display: none; }
.menue a {
  flex: none;
  position: relative;
  padding: 13px var(--ab-normal) 12px;
  font-size: .88rem;
  font-weight: 550;
  color: var(--matt);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.menue a:hover { color: var(--text); }
/* B-HPF 30.09.: 12+ menu items (with „Fahrtenbuch"/„Speditionen") fit one row at 1440 px */
.menue[data-eng] a { padding-left: 6px; padding-right: 6px; }
.menue a.hier {
  color: var(--text);
  border-bottom-color: var(--ton);
}
/* Damit ein Sprungziel nicht unter der klebenden Kopfleiste landet.
   ⚠️ Auf dem Handy ist die Leiste hoeher (der Anmelden-Knopf und das Menue
      brechen um) — deshalb dort mehr Abstand. */
section[id] { scroll-margin-top: 190px; }
@media (min-width: 700px) {
  section[id] { scroll-margin-top: 122px; }
}
/* HPFIX 01.10.2026: hp.js misst die echte Hoehe der Kopfleiste (bricht das Menue um,
   reichten 122 px nicht — der Sprung landete im Abschnitt davor). Ohne JS gilt das Obige. */
html[data-sprung] section[id] { scroll-margin-top: var(--sprung, 122px); }

/* ── M2: der Satz zum Geld ─────────────────────────────────────────────── */
.geldsatz {
  margin: var(--ab-gross) 0 0;
  max-width: 62ch;
  font-size: .95rem;
  color: var(--matt);
  border-left: 3px solid var(--ton);
  padding-left: var(--ab-normal);
}
.geldsatz b { color: var(--text); font-weight: 650; }
.geldsatz-band {
  max-width: none;
  margin: 0 0 var(--ab-karte);
  background: var(--tonhauch);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--ton);
  border-radius: var(--rd-knopf);
  padding: var(--ab-normal) var(--ab-gross);
}

/* ── Kopf mit Panorama ─────────────────────────────────────────────────── */
.kopf { position: relative; overflow: hidden; border-bottom: 1px solid var(--rand); }
.panorama {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* Schleier ueber dem Panorama — die Schrift muss in BEIDEN Welten tragen.
   Links deckend, nach rechts offen: die Sonne bleibt sichtbar. */
.kopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                               /* ⚠️ MUSS ueber dem Panorama liegen.
                                               Bei z-index 0 lag der Schleier als
                                               erstes Kind UNTER dem SVG — die
                                               Silhouette schnitt durch den Text
                                               (an den Vorschaubildern gesehen). */
  background: linear-gradient(100deg,
              var(--grund-hauch) 6%,
              var(--grund-halb) 46%,
              transparent 88%);
}
.kopf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--grund));
}
.kopf .bahn {
  position: relative;
  z-index: 2;
  /* ⚠️ Hier standen 56 / 72 / 96 px. Marco am 08.09.2026 12:48 zum Bild:
     „warum ist da soviel platz oben kann ruhig höher rutschen … sehr viel
     leer raum". Jetzt das Abstandsraster (28 / 32) statt freier Zahlen —
     der ganze Kopf rutscht damit rund 64 px hoch. */
  padding-top: var(--ab-karte);
  padding-bottom: var(--ab-seite);
}

.beta-band {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-klein);
  background: var(--tonhauch);
  border: 1px solid var(--ton);
  color: var(--ton);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.beta-band .punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ton); flex: none;
}
.beta-band .zusatz { text-transform: none; font-weight: 500; letter-spacing: 0; opacity: .95; }
/* ✏️ 01.10. gate chat: „Dispolotse ist gestartet" — beta-day pill on its own line above „Beta" */
.beta-band.gestartet { display: flex; width: fit-content; margin: 0 0 var(--ab-klein); }

h1 {
  /* ⭐ Zwei Zeilen, jede ein eigener Block: Zeile 1 traegt den Namen mit,
     Zeile 2 steht in der Hausfarbe (Marco 08.09.2026 12:48).
     ⛔ Keine max-width mehr — sie hat die laengere erste Zeile umgebrochen. */
  font-size: clamp(2rem, 7.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: var(--ab-gross) 0 0;
}
h1 .zeile, h1 .ton { display: block; }
h1 .ton { color: var(--ton); }
/* ⭐ N-SEO1 04.10.2026: the search words as a quiet third line of the start page H1 (the brand
   line above stays the big statement) + the quotable „Was ist Dispolotse?" paragraph */
h1 .h1-suchworte {
  display: block;
  margin-top: .55em;
  font-size: clamp(1.02rem, 2.6vw, 1.28rem);
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--matt);
}
.was-ist {
  font-size: 1.06rem;
  max-width: 56ch;
  margin: 0 0 var(--ab-normal);
}
.was-ist b { color: var(--ton); }

.glanzstrich {
  width: 54px; height: 3px;
  background: var(--ton);
  border-radius: 2px;
  margin: var(--ab-gross) 0;
}

.vorspann {
  font-size: 1.06rem;
  color: var(--matt);
  max-width: 56ch;
  margin: 0 0 var(--ab-karte);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-normal) var(--ab-gross);
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-klein);
  background: var(--ton-knopf);
  color: var(--auf-ton);
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--rd-knopf);
  border: 1px solid var(--ton-knopf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.knopf:hover { background: var(--ton-knopf2); border-color: var(--ton-knopf2); }
.knopf svg { width: 18px; height: 18px; flex: none; }

.knopf-zeile { font-size: .82rem; color: var(--matt); }
.knopf-zeile b { color: var(--text); font-weight: 600; }
.pruefsumme {
  margin: var(--ab-gross) 0 0;
  font-size: .74rem;
  color: var(--matt);
  word-break: break-all;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* HPFIX 01.10.2026: the hint under „App herunterladen" (browser / SmartScreen warning) */
.download-hinweis {
  margin: var(--ab-klein) 0 0;
  max-width: 60ch;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--matt);
}
.download-hinweis a { color: var(--ton); }

.sattelzug { width: 100%; max-width: 420px; margin: var(--ab-karte) 0 0; }

/* ── Abschnitte ────────────────────────────────────────────────────────── */
section { padding: var(--ab-seite) 0; }
section + section { border-top: 1px solid var(--rand); }

.aufschrift {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--matt);
  margin: 0 0 var(--ab-klein);
}
h2 {
  font-size: clamp(1.5rem, 5vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 var(--ab-normal);
  font-weight: 700;
}
.hinfuehrung {
  color: var(--matt);
  max-width: 60ch;
  margin: 0 0 var(--ab-karte);
}

/* ── Karten ────────────────────────────────────────────────────────────── */
.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
  box-shadow: inset 0 1px 0 var(--glanz);   /* Glanzstrich statt Schatten */
  overflow: hidden;
}

.raster3 {
  display: grid;
  gap: var(--ab-karte);
  grid-template-columns: 1fr;
}
.raster3 > .karte { display: flex; flex-direction: column; }
.raster3 figure { margin: 0; background: var(--mulde); border-bottom: 1px solid var(--rand); }
.raster3 .inhalt { padding: var(--ab-gross); }
.raster3 h3 { margin: 0 0 var(--ab-klein); font-size: 1.12rem; font-weight: 650; }
.raster3 p  { margin: 0; color: var(--matt); font-size: .95rem; }

/* Ein Bild, das der Farbwahl folgt — dieselben drei Regeln wie die Farbwelt,
   damit auch der Schalter im Kopf es umschaltet (nicht nur die Systemwahl). */
.nur-dunkel { display: block; }
.nur-hell   { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]) .nur-dunkel { display: none; }
  :root:not([data-farbe="dunkel"]) .nur-hell   { display: block; }
}
:root[data-farbe="hell"] .nur-dunkel { display: none; }
:root[data-farbe="hell"] .nur-hell   { display: block; }

/* Kacheln „So realistisch ist es" */
.raster6 {
  display: grid;
  gap: var(--ab-normal);
  grid-template-columns: 1fr;
  margin-bottom: var(--ab-karte);
}
.kachel {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
  box-shadow: inset 0 1px 0 var(--glanz);
  padding: var(--ab-gross);
  display: flex;
  gap: var(--ab-normal);
  align-items: flex-start;
}
.kachel svg { width: 26px; height: 26px; flex: none; color: var(--ton); margin-top: 2px; }
.kachel .laut  { display: block; font-weight: 650; font-size: 1.02rem; margin-bottom: var(--ab-winzig); }
.kachel .leise { display: block; color: var(--matt); font-size: .9rem; line-height: 1.5; }

.bilderpaar { display: grid; gap: var(--ab-karte); grid-template-columns: 1fr; }
figure.schau { margin: 0; }
figure.schau img {
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
  background: var(--mulde);
}
figure.schau figcaption {
  margin-top: var(--ab-klein);
  font-size: .84rem;
  color: var(--matt);
}

/* ── Schritte ──────────────────────────────────────────────────────────── */
.schritte {
  display: grid;
  gap: var(--ab-normal);
  grid-template-columns: 1fr;
  counter-reset: schritt;
  margin: 0 0 var(--ab-karte);
  padding: 0;
  list-style: none;
}
.schritte li {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
  box-shadow: inset 0 1px 0 var(--glanz);
  padding: var(--ab-gross);
}
.schritte li::before {
  counter-increment: schritt;
  content: counter(schritt);
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ton);
  margin-bottom: var(--ab-klein);
}
.schritte b { display: block; margin-bottom: var(--ab-winzig); font-weight: 650; }
.schritte span { color: var(--matt); font-size: .92rem; }

/* align-items: start — sonst wird der kuerzere Kasten auf die Hoehe des
   laengeren gezogen und hat unten ein leeres Drittel (gesehen 08.09.). */
.zweispalt {
  display: grid;
  gap: var(--ab-karte);
  grid-template-columns: 1fr;
  align-items: start;
}

.liste { margin: 0; padding: 0; list-style: none; }
.liste li {
  display: flex; gap: var(--ab-klein);
  padding: var(--ab-klein) 0;
  border-bottom: 1px solid var(--naht);
  font-size: .95rem;
}
.liste li:last-child { border-bottom: 0; }
.liste .haken { color: var(--frei); flex: none; font-weight: 700; }
.liste .leise { color: var(--matt); }

.kasten { padding: var(--ab-gross); }
.kasten h3 { margin: 0 0 var(--ab-normal); font-size: 1.05rem; font-weight: 650; }
.kasten p:last-child { margin-bottom: 0; }

.warnkasten {
  border-color: var(--ton);
  background: var(--tonhauch);
}
.warnkasten h3 { color: var(--ton); }
.warnkasten p { color: var(--text); margin: 0 0 var(--ab-klein); font-size: .95rem; }

/* ══ M3: das Kontaktformular ══════════════════════════════════════════ */
.formularkarte { margin-top: var(--ab-karte); }
.formularkarte h3 { font-size: 1.15rem; }
.formular-hin {
  color: var(--matt);
  font-size: .95rem;
  max-width: 68ch;
  margin: 0 0 var(--ab-gross);
}
.formular-vorschau {
  margin: 0 0 var(--ab-gross);
  padding: var(--ab-normal) var(--ab-gross);
  background: var(--tonhauch);
  border: 1px solid var(--ton);
  border-radius: var(--rd-knopf);
  color: var(--text);
  font-size: .92rem;
  font-weight: 550;
}

.formular { max-width: 880px; }

.feld { margin: 0 0 var(--ab-gross); }
.feld > label {
  display: block;
  margin-bottom: var(--ab-klein);
  font-size: .9rem;
  font-weight: 600;
}
.feld .leise { font-weight: 400; color: var(--matt); }

.feld input[type="text"],
.feld input[type="email"],
.feld textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--mulde);
  border: 1px solid var(--rand);
  border-radius: var(--rd-knopf);
  padding: 11px 13px;
}
.feld textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.feld input:focus, .feld textarea:focus, .feld input[type="file"]:focus {
  outline: 2px solid var(--ton);
  outline-offset: 1px;
  border-color: var(--ton);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--matt); opacity: .8; }
.feld input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: .88rem;
  color: var(--matt);
  background: var(--mulde);
  border: 1px dashed var(--rand);
  border-radius: var(--rd-knopf);
  padding: var(--ab-normal);
}

.feldpaar { display: grid; gap: 0 var(--ab-gross); grid-template-columns: 1fr; }

.feld-art {
  border: 0;
  padding: 0;
  margin: 0 0 var(--ab-gross);
}
.feld-art legend {
  padding: 0;
  margin-bottom: var(--ab-klein);
  font-size: .9rem;
  font-weight: 600;
}
.feld-art .wahl {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-klein);
  margin: 0 var(--ab-klein) var(--ab-klein) 0;
  padding: 9px 14px;
  background: var(--mulde);
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-size: .9rem;
  cursor: pointer;
}
.feld-art .wahl:has(input:checked) {
  border-color: var(--ton);
  background: var(--tonhauch);
  color: var(--text);
}
.feld-art input { accent-color: var(--ton); }

.feld.haken > label {
  display: flex;
  gap: var(--ab-klein);
  align-items: flex-start;
  font-weight: 400;
  font-size: .9rem;
  color: var(--matt);
  cursor: pointer;
}
.feld.haken input { margin-top: 3px; flex: none; accent-color: var(--ton); }
.feld.haken a { color: var(--ton); }

/* ⛔ Der Honigtopf. Er darf NICHT display:none sein — manche Roboter
   ueberspringen genau das. Er steht ausserhalb des Bildes, ist nicht
   fokussierbar und fuer Vorleseprogramme ausgeblendet. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-schluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-normal) var(--ab-gross);
  margin: 0;
}
.formular-schluss .knopf { border: 0; cursor: pointer; font-family: inherit; }
.formular-schluss .knopf[disabled] { opacity: .55; cursor: not-allowed; }
.formular-lage { font-size: .9rem; color: var(--matt); }
.formular-lage.gut { color: var(--frei); font-weight: 600; }
.formular-lage.schlecht { color: var(--ton); font-weight: 600; }

/* ══ M4: die Rechtsseiten ═════════════════════════════════════════════ */
.rechtsseite { padding: var(--ab-seite) 0 0; }
.rechtsseite .aufschrift { margin-bottom: var(--ab-klein); }

.inhaltsliste { margin: var(--ab-karte) 0; }
.inhaltsliste h2 { font-size: 1.05rem; margin: 0 0 var(--ab-normal); }
.inhaltsliste ul {
  margin: 0;
  padding-left: 0;
  list-style: none;                 /* die Nummer steht schon im Text */
  columns: 1;
  font-size: .92rem;
  line-height: 1.9;
}
.inhaltsliste li { break-inside: avoid; margin-bottom: var(--ab-winzig); }
.inhaltsliste a { color: var(--text); text-decoration: none; }
.inhaltsliste a:hover { color: var(--ton); text-decoration: underline; }

.rechtstext { max-width: 74ch; padding-bottom: var(--ab-seite); }
.rechtstext h1 {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  max-width: none;
  margin: 0 0 var(--ab-karte);
}
.rechtstext h2 {
  font-size: 1.35rem;
  margin: 44px 0 var(--ab-normal);
  padding-top: var(--ab-normal);
  border-top: 1px solid var(--rand);
  scroll-margin-top: 90px;
}
.rechtstext h3 { font-size: 1.08rem; margin: var(--ab-karte) 0 var(--ab-klein); }
.rechtstext h4 { font-size: .98rem; margin: var(--ab-gross) 0 var(--ab-winzig); }
.rechtstext p, .rechtstext li { font-size: .96rem; line-height: 1.72; }
.rechtstext p { margin: 0 0 var(--ab-normal); }
.rechtstext ul, .rechtstext ol { margin: 0 0 var(--ab-gross); padding-left: 1.35em; }
.rechtstext li { margin-bottom: var(--ab-klein); }
.rechtstext strong { color: var(--text); font-weight: 650; }
.rechtstext a { color: var(--ton); }
.rechtstext code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .88em;
  background: var(--mulde);
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 1px 5px;
}
.rechtstext blockquote {
  margin: 0 0 var(--ab-gross);
  padding: var(--ab-normal) var(--ab-gross);
  background: var(--mulde);
  border-left: 3px solid var(--ton);
  border-radius: 0 var(--rd-knopf) var(--rd-knopf) 0;
  color: var(--matt);
  font-size: .93rem;
}
.rechtstext hr { border: 0; border-top: 1px solid var(--rand); margin: var(--ab-karte) 0; }

/* Breite Tabellen rollen in SICH, nie die ganze Seite */
.tabellenrolle {
  overflow-x: auto;
  margin: 0 0 var(--ab-gross);
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
}
.rechtstext table { border-collapse: collapse; width: 100%; font-size: .89rem; }
.rechtstext th, .rechtstext td {
  padding: var(--ab-normal);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--naht);
}
.rechtstext th { background: var(--mulde); font-weight: 650; white-space: nowrap; }
.rechtstext tbody tr:last-child td { border-bottom: 0; }

.zurueck { margin: var(--ab-karte) 0 var(--ab-seite); }
.zurueck a { color: var(--ton); text-decoration: none; font-weight: 550; }
.zurueck a:hover { text-decoration: underline; }
.recht-hinweis { color: var(--matt); }

/* ── Fuss ──────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rand);
  background: var(--mulde);
  padding: var(--ab-seite) 0;
}
.fusszeilen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-normal) var(--ab-gross);
  align-items: center;
  margin-bottom: var(--ab-gross);
}
.fusszeilen a { color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 550; }
.fusszeilen a:hover { color: var(--ton); text-decoration: underline; }
.kleingedruckt {
  color: var(--matt);
  font-size: .82rem;
  line-height: 1.6;
  max-width: 78ch;
  margin: 0 0 var(--ab-normal);
}

/* ── Groessere Bildschirme ─────────────────────────────────────────────── */
@media (min-width: 700px) {
  .bahn { padding: 0 var(--ab-seite); }
  .feldpaar { grid-template-columns: 1fr 1fr; }
  .inhaltsliste ul { columns: 2; column-gap: var(--ab-karte); }
  section { padding: 56px 0; }
  .kopf .bahn { padding-top: var(--ab-seite); padding-bottom: 56px; }
  .raster6 { grid-template-columns: 1fr 1fr; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .zweispalt { grid-template-columns: 1fr 1fr; }
  .bilderpaar { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .raster3 { grid-template-columns: repeat(3, 1fr); }
  .raster6 { grid-template-columns: repeat(3, 1fr); }
  .schritte { grid-template-columns: repeat(4, 1fr); }
  .kopf .bahn { padding-top: var(--ab-seite); padding-bottom: 72px; }
}

/* ── Bewegung ──────────────────────────────────────────────────────────
   ⛔⛔ HIER STAND EINE EINBLENDUNG BEIM SCROLLEN — SIE IST RAUS (08.09.2026).
   Warum: sie begann bei opacity 0 und wurde erst von JavaScript sichtbar
   gemacht. Auf dem ersten Vorschaubild war deshalb ALLES unter dem Kopf
   schwarz — der ganze Inhalt hing an einem Beobachter, der noch nicht
   gefeuert hatte. Genau das darf auf einer Seite, die Spieler zum ersten
   Mal sehen, nie passieren: kein Inhalt haengt an JavaScript.
   ⭐ Und es passt zur Designsprache 0.7 B2: „Nichts bewegt sich im Leerlauf."
   Die Klasse .einblenden bleibt im HTML stehen — als Haken, falls Marco
   spaeter doch eine Bewegung will. Sie tut jetzt nichts.               */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ⭐ BETA-ENTWURF 26.09.2026 (Bahn HP-BETA) — auf der bestehenden Seite
   aufgebaut: dieselben Farbschluessel, dasselbe Abstandsraster, dieselbe
   Regel „Glanzstrich statt Schatten". Neu sind nur Bausteine:
   Kopf mit App-Fenster · drei Versprechen · Bildreise · Bereiche ·
   Ausblick · Beta-Fahrplan · Schlussband · Platzhalter.
   ⛔ Keine neue Farbe ausserhalb der drei Farbbloecke (Farbparitaet).
   ══════════════════════════════════════════════════════════════════════════ */

/* Menue: der eine Punkt, der auf eine eigene Seite fuehrt */
.menue a.menue-seite { color: var(--ton); }
.menue a.menue-seite:hover { color: var(--text); }

/* Leiser Knopf neben dem Hauptknopf */
.knopf-leise {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-klein);
  padding: 13px 20px;
  border: 1px solid var(--rand);
  border-radius: var(--rd-knopf);
  background: var(--karte);
  box-shadow: inset 0 1px 0 var(--glanz);
  color: var(--text);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.knopf-leise:hover { border-color: var(--ton); color: var(--ton); }

/* ── ⭐ N-HPKURZ 04.10.2026: weniger Text, weniger Scrollen — SAME premium look ──────────────
   Marco 04.10.: „in einer luxus premium version so wie sie es ja schon ist aber einfach zu viel
   text. und scrollerei". Only existing tokens (--karte, --rand, --glanz, --ton, --tonhauch);
   no new colour, no new font. <details class="mehr"> = native, keyboard + screen reader ready. */
details.mehr {
  margin: var(--ab-gross) 0 0;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
  box-shadow: inset 0 1px 0 var(--glanz);
}
details.mehr > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--ab-klein);
  min-height: 44px;
  padding: var(--ab-normal) var(--ab-gross);
  font-weight: 650;
  font-size: .95rem;
  color: var(--text);
}
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::before {
  content: "";
  width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--ton);
  border-bottom: 2px solid var(--ton);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
details.mehr[open] > summary::before { transform: rotate(45deg); }
details.mehr > summary:hover { color: var(--ton); }
details.mehr > summary:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; border-radius: var(--rd-karte); }
details.mehr[open] > summary { border-bottom: 1px solid var(--naht); }
.mehr-inhalt { padding: var(--ab-gross); }
.mehr-inhalt > .hinfuehrung { margin-bottom: var(--ab-normal); }
.mehr-inhalt > .hinfuehrung:last-child { margin-bottom: 0; }
.mehr-kopf { max-width: 62ch; }
.mehr-formular .formularkarte { border: 0; box-shadow: none; margin: 0; }
.mehr-zeile { display: grid; gap: var(--ab-klein); margin: var(--ab-gross) 0; }
.mehr-zeile details.mehr { margin: 0; }
.wiki-link {
  display: inline-flex; align-items: center; gap: var(--ab-winzig);
  margin-top: var(--ab-normal);
  font-weight: 600; font-size: .92rem; text-decoration: none;
}
.wiki-link:hover { text-decoration: underline; }
.wiki-link svg { width: 16px; height: 16px; }

/* kurze Stichpunkte (≤ 3) — wie .liste, nur ohne Kasten */
.kurz-punkte { margin: var(--ab-gross) 0 0; padding: 0; list-style: none; display: grid; gap: var(--ab-klein); max-width: 70ch; }
.kurz-punkte li { display: flex; gap: var(--ab-klein); font-size: 1rem; }
.kurz-punkte .haken { color: var(--ton); font-weight: 700; flex: none; }
@media (min-width: 1000px) {
  #live .kurz-punkte { grid-template-columns: repeat(3, 1fr); max-width: none; gap: var(--ab-gross); }
}

/* Symbol-Kacheln (Dein Leben: 4 · Das kann Dispolotse heute: 8) — Optik wie .kachel */
.kurz-kacheln, .funktions-kacheln {
  margin: var(--ab-gross) 0; padding: 0; list-style: none;
  display: grid; gap: var(--ab-normal);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .kurz-kacheln, .funktions-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ab-gross); }
}
.kurz-kachel {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
  box-shadow: inset 0 1px 0 var(--glanz);
  padding: var(--ab-gross);
  display: grid; gap: var(--ab-winzig);
  transition: border-color .18s ease, transform .18s ease;
}
.kurz-kachel:hover { border-color: var(--ton); transform: translateY(-2px); }
.kurz-kachel .kk-zeichen { font-size: 1.5rem; line-height: 1; }
.kurz-kachel b { font-weight: 650; font-size: 1.02rem; }
.kurz-kachel > span:last-child { color: var(--matt); font-size: .88rem; line-height: 1.45; }

/* „i"-Knopf an „Wie reich ist der Händler?" — ein Satz im Klappfeld */
.live-reich-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ab-klein); }
.live-reich-zeile .live-reich { flex: 1 1 auto; }
.i-knopf {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--ton); background: var(--tonhauch); color: var(--ton);
  font: italic 700 .95rem/1 Georgia, serif; cursor: pointer;
}
.i-knopf:hover, .i-knopf[aria-expanded="true"] { background: var(--ton-knopf); color: var(--auf-ton); }
.i-knopf:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.i-feld {
  flex-basis: 100%; margin: 0;
  background: var(--karte); border: 1px solid var(--rand); border-left: 3px solid var(--ton);
  border-radius: var(--rd-knopf); padding: var(--ab-normal) var(--ab-gross); font-size: .92rem; color: var(--text);
}

/* „A− A A+" — ONE text size for all pages (groesse.js); same .schalter look as the colour choice */
.groesse-wahl button { min-width: 34px; font-weight: 650; }
.groesse-wahl button:disabled { opacity: .4; cursor: default; }
.groesse-wahl button:focus-visible { outline: 2px solid var(--ton); outline-offset: 1px; }

/* ↑ nach oben */
.nach-oben {
  position: fixed; right: 16px; bottom: 16px; z-index: 19;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ton); background: var(--karte); color: var(--ton);
  box-shadow: inset 0 1px 0 var(--glanz); font-size: 1.2rem; cursor: pointer;
}
.nach-oben:hover { background: var(--ton-knopf); color: var(--auf-ton); }
.nach-oben[hidden] { display: none; }

/* ☰ — nur am Handy; am PC bleibt die Kopfleiste wie sie ist */
.kopf-burger {
  display: none; flex: none;
  width: 40px; height: 36px; border-radius: var(--rd-knopf);
  border: 1px solid var(--rand); background: var(--mulde); color: var(--text);
  font-size: 1.15rem; cursor: pointer;
}
.kopf-burger[aria-expanded="true"] { border-color: var(--ton); color: var(--ton); }
@media (max-width: 699px) {
  .kopfleiste .bahn { flex-wrap: nowrap; min-height: 52px; gap: var(--ab-klein); padding-top: 6px; padding-bottom: 6px; }
  .kopfleiste .marke span { font-size: 1rem; }
  .kopfleiste .knopf-klein { padding: 7px 10px; }
  .kopf-burger { display: inline-block; }
  .kopf-extra { display: none; }
  .kopfleiste[data-offen] .bahn { flex-wrap: wrap; }
  .kopfleiste[data-offen] .kopf-extra { display: flex; order: 9; margin-left: auto; }
  /* the section menu: ONE swipeable row instead of 4–5 wrapped rows */
  .menue .bahn { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .menue a { padding: 11px 10px 10px; }
  section[id] { scroll-margin-top: 110px; }
  /* Discord folds into ☰ too (concept § 6) — otherwise ☰ is pushed off the 390-px row (seen on the render) */
  .kopfleiste .knopf-discord { display: none; }
  .kopfleiste[data-offen] .knopf-discord { display: inline-flex; order: 10; }
  .marke { min-width: 0; }
}
/* phone: the three promise words as ONE row of small cards, the four step titles as a 2 × 2 grid */
@media (max-width: 699px) {
  .versprechen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab-klein); }
  .versprechen-band .versprechen-karte { padding: var(--ab-normal) var(--ab-klein); text-align: center; }
  .versprechen-band .versprechen-karte svg { width: 24px; height: 24px; margin: 0 auto var(--ab-winzig); }
  .versprechen-band .versprechen-karte h3 { font-size: .84rem; line-height: 1.25; margin: 0; }
  .schritte-kurz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-klein); }
}
.schritte-kurz li { padding-top: var(--ab-normal); padding-bottom: var(--ab-normal); }
.schritte-kurz b { margin-bottom: 0; }
@media print {
  details.mehr > .mehr-inhalt, details.mehr > div { display: block !important; }
  .nach-oben, .kopf-burger { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  details.mehr > summary::before, .kurz-kachel { transition: none; }
  .kurz-kachel:hover { transform: none; }
}
.knopf-leise svg, .knopf svg { width: 18px; height: 18px; flex: none; }
/* ⭐ N-HPKURZ2 04.10.2026: beta.html + ats.html — same Klappfeld look; a heading/count inside the summary
   („Schon drin" groups), the road map list inside ONE Klappfeld, the groups two per row on wide screens */
details.mehr > summary h3 { margin: 0; font-size: 1.02rem; font-weight: 650; flex: 1 1 auto; }
details.mehr > summary .etappe-zahl { margin-left: auto; flex: none; }
.fp-alle > .mehr-inhalt, .bereich-klapp > .mehr-inhalt { padding: var(--ab-normal); }
.bereich-klapp .liste { margin: 0; }
.fp-naechst { margin-top: var(--ab-klein); margin-bottom: 0; }
.fp-naechst-titel { margin: var(--ab-gross) 0 0; font-weight: 650; color: var(--text); }
@media (min-width: 900px) {
  .bereiche-klapp { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ── Kopf: Text links, App im Fenster rechts ──────────────────────────── */
.held { display: grid; gap: var(--ab-karte); grid-template-columns: 1fr; align-items: center; }
.held > * { min-width: 0; }
.held .knopf-zeile { margin: var(--ab-normal) 0 0; }
.held .pruefsumme { margin-top: var(--ab-klein); }
.held h1 { font-size: clamp(2rem, 6.4vw, 3.3rem); }

.held-bild { margin: 0; }
.held-bild figcaption {
  margin-top: var(--ab-normal);
  font-size: .84rem;
  color: var(--matt);
  text-align: center;
}
/* Das App-Fenster: ein Rahmen wie unter Windows, ⛔ kein Schlagschatten —
   Tiefe entsteht aus Rand, Glanzstrich und einer getoenten Buehne. */
.fenster {
  border: 1px solid var(--rand);
  border-radius: 12px;
  overflow: hidden;
  background: var(--karte);
  box-shadow: inset 0 1px 0 var(--glanz);
  outline: 6px solid var(--tonhauch);       /* ein Saum, kein Schatten */
}
.fenster-leiste {
  display: flex;
  align-items: center;
  gap: var(--ab-klein);
  padding: 7px 12px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--matt);
  background: var(--mulde);
  border-bottom: 1px solid var(--rand);
}
.fenster-leiste .mz { width: 16px; height: 16px; flex: none; }
.fenster-leiste span { margin-right: auto; }
.fenster-leiste i {
  width: 10px; height: 10px;
  border: 1.5px solid var(--matt);
  border-radius: 2px;
  opacity: .55;
}
.fenster-leiste i:first-of-type { border-width: 0 0 1.5px 0; border-radius: 0; height: 6px; margin-bottom: 4px; }
.fenster img { width: 100%; }

/* ── Die drei Versprechen ─────────────────────────────────────────────── */
.versprechen-band { padding: var(--ab-karte) 0; background: var(--mulde); }
.versprechen { display: grid; gap: var(--ab-normal); grid-template-columns: 1fr; }
.versprechen-karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-top: 3px solid var(--ton);
  border-radius: var(--rd-karte);
  box-shadow: inset 0 1px 0 var(--glanz);
  padding: var(--ab-gross);
}
.versprechen-karte svg { width: 30px; height: 30px; color: var(--ton); display: block; margin-bottom: var(--ab-normal); }
.versprechen-karte h3 { margin: 0 0 var(--ab-klein); font-size: 1.12rem; font-weight: 700; }
.versprechen-karte p { margin: 0; color: var(--matt); font-size: .95rem; }
.versprechen-karte p b { color: var(--text); font-weight: 650; }

/* Abschnitte mit leicht abgesetzter Flaeche */
section.flaeche { background: var(--mulde); }

/* ── Bildreise: grosse Reihen, abwechselnd links/rechts ───────────────── */
.schau-reihe {
  display: grid;
  gap: var(--ab-gross);
  grid-template-columns: 1fr;
  align-items: center;
  margin: 0 0 var(--ab-seite);
}
.schau-reihe > * { min-width: 0; }
.schau-bild { margin: 0; }
.schau-bild img,
.bildraster figure img,
.raster3 figure img { width: 100%; }
.schau-bild img {
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
  background: var(--karte);
  outline: 6px solid var(--tonhauch);       /* ein Saum, kein Schatten */
}
.schau-text h3 { font-size: clamp(1.3rem, 3.6vw, 1.7rem); line-height: 1.2; margin: 0 0 var(--ab-normal); }
.schau-text > p { color: var(--matt); margin: 0 0 var(--ab-normal); }

/* Karten mit Bild: alle Bilder im selben Seitenverhaeltnis, oben
   angeschlagen — sonst stehen ein flaches und ein hohes Bild nebeneinander. */
.raster3 figure img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
/* In der Bildreise zeigt jedes Bild ALLES (contain) — die Buehne nimmt die
   Restflaeche auf, damit flache und hohe Bilder gleich hoch stehen. */
.bildraster figure { padding: var(--ab-normal); }
.bildraster figure img { aspect-ratio: 16 / 10; object-fit: contain; }
.bildraster { display: grid; gap: var(--ab-karte); grid-template-columns: 1fr; }
.bildraster > * { min-width: 0; }
.bildraster .karte { display: flex; flex-direction: column; }
.bildraster figure { margin: 0; background: var(--mulde); border-bottom: 1px solid var(--rand); }
.bildraster .inhalt { padding: var(--ab-gross); }
.bildraster h3 { margin: 0 0 var(--ab-klein); font-size: 1.1rem; font-weight: 650; }
.bildraster p { margin: 0; color: var(--matt); font-size: .95rem; }

/* ── Schon drin: Bereiche ─────────────────────────────────────────────── */
.bereiche { display: grid; gap: var(--ab-normal); grid-template-columns: 1fr; }
.bereiche > * { min-width: 0; }
.bereich h3 { color: var(--ton); }
.bereich .liste li { font-size: .92rem; }

/* ── Ausblick auf den Fahrplan ────────────────────────────────────────── */
.ausblick {
  display: grid;
  gap: var(--ab-karte);
  grid-template-columns: 1fr;
  padding: var(--ab-karte);
  border-color: var(--ton);
  background: linear-gradient(135deg, var(--tonhauch), transparent 70%), var(--karte);
}
.ausblick > * { min-width: 0; }
.ausblick-text p:not(.aufschrift) { color: var(--matt); margin: 0 0 var(--ab-gross); }
.ausblick-liste { margin: 0; padding: 0; list-style: none; align-self: center; }
.ausblick-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-klein);
  padding: var(--ab-normal) 0;
  border-bottom: 1px solid var(--naht);
  font-weight: 600;
}
.ausblick-liste li:last-child { border-bottom: 0; }

.etikett {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ton);
  background: var(--tonhauch);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ── Beta-Fahrplan (Seite beta.html) ──────────────────────────────────── */
.kopf-klein .bahn { padding-bottom: var(--ab-seite); }
.kopf-klein h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
.etappe-kopf {
  display: flex;
  align-items: center;
  gap: var(--ab-normal);
  margin: 0 0 var(--ab-gross);
}
.etappe-kopf h2 { margin: 0; }
.etappe-punkt {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ton);
  outline: 5px solid var(--tonhauch);
  flex: none;
}
.etappe-zahl {
  font-size: .8rem;
  font-weight: 700;
  color: var(--matt);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 2px 10px;
}
.etappe-spaeter .etappe-punkt { background: var(--matt); }
.etappe-start .vorhaben { border-color: var(--ton); background: linear-gradient(135deg, var(--tonhauch), transparent 70%), var(--karte); }
.vorhaben-raster { display: grid; gap: var(--ab-normal); grid-template-columns: 1fr; }
.vorhaben-raster > * { min-width: 0; }
.vorhaben { padding: var(--ab-gross); }
.vorhaben h3 { margin: 0 0 var(--ab-klein); font-size: 1.08rem; font-weight: 650; }
.vorhaben .etikett + h3 { margin-top: var(--ab-normal); }
.etappe-start .vorhaben-raster { max-width: 760px; grid-template-columns: 1fr; }
.etappe-start .vorhaben h3 { font-size: 1.3rem; }
.etappe-start .vorhaben p { font-size: 1rem; }
.vorhaben p { margin: 0; color: var(--matt); font-size: .93rem; }
.etappe-spaeter .etikett { color: var(--matt); }

/* ── Dein Leben: der Schlusssatz unter den Karten ─────────────────────── */
.leben-schluss {
  margin: var(--ab-karte) 0 0;
  padding: var(--ab-normal) var(--ab-gross);
  border-left: 3px solid var(--ton);
  background: var(--tonhauch);
  border-radius: 0 var(--rd-knopf) var(--rd-knopf) 0;
  color: var(--text);
}

/* ── Schlussband ──────────────────────────────────────────────────────── */
.schlussband { text-align: center; background: var(--mulde); }
.schlussband h2 { margin-bottom: var(--ab-klein); }
.schlussband p { color: var(--matt); margin: 0 0 var(--ab-gross); }
.schlussband .knopfreihe { justify-content: center; flex-direction: column; }
.schlussband .knopf-zeile { margin: 0; }

/* Die sechste Kachel bei „Schon drin": der Weg zum Fahrplan */
.bereich-mehr {
  display: flex; flex-direction: column; justify-content: center; gap: var(--ab-normal);
  border-style: dashed; border-color: var(--ton);
  background: var(--tonhauch);
}
.bereich-mehr p { margin: 0; color: var(--matt); font-size: .95rem; }
.bereich-mehr a { font-weight: 650; text-decoration: none; display: inline-flex; gap: var(--ab-klein); align-items: center; }
.bereich-mehr a svg { width: 18px; height: 18px; }

/* ── Discord-Kasten und sein Platzhalter ──────────────────────────────── */
.discord {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--ab-normal); margin-top: var(--ab-karte);
}
.discord h3 { margin-bottom: var(--ab-winzig); }
.discord p { margin: 0; color: var(--matt); }
/* ⏳ Nur im Entwurf sichtbar: sagt Marco, dass hier noch ein Link fehlt. */
.platzhalter {
  margin-top: var(--ab-karte);
  padding: var(--ab-normal) var(--ab-gross);
  border: 2px dashed var(--ton);
  border-radius: var(--rd-karte);
  background: var(--tonhauch);
  font-size: .88rem;
  color: var(--text);
}

@media (min-width: 700px) {
  .versprechen { grid-template-columns: repeat(3, 1fr); }
  .bildraster { grid-template-columns: 1fr 1fr; }
  .bereiche { grid-template-columns: 1fr 1fr; }
  .vorhaben-raster { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .held { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: var(--ab-seite); }
  .schau-reihe { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--ab-seite); }
  .schau-reihe.umgekehrt .schau-bild { order: 2; }
  .bereiche { grid-template-columns: repeat(3, 1fr); }
  .ausblick { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: var(--ab-seite); }
  .vorhaben-raster { grid-template-columns: repeat(3, 1fr); }
}

/* Nur fuer Vorleseprogramme */
.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;
}

/* ⏳ Bild-Platzhalter (26.09.2026): Stelle eines Bildes aus dem Haendler-Portal,
   das nach Marcos Regel raus ist. Wird auf 0.4.25 durch eine Spieleransicht ersetzt. */
.bildplatz {
  margin-top: 0;
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--ab-klein); text-align: center;
}
.bildplatz span { color: var(--matt); font-size: .85rem; max-width: 40ch; }
.schau-bild .bildplatz { border-radius: var(--rd-karte); }

/* ══ hp4 28.09.2026: the ATS guide page (ats.html) ══════════════════════
   Only existing colour tokens — both colour worlds stay equal.
   ⭐ B→A 564: in the wiki the first table column broke words mid-word
      („Verbrauc-h", „Bußgeld-er") because wiki.css sets overflow-wrap:anywhere.
      Here nothing breaks a word without a hyphenation point: overflow-wrap and
      word-break stay normal, the topic column has a fixed width and never
      hyphenates, the two value columns hyphenate by the page language
      (lang="de"/"en"). On the phone the table becomes stacked cards (mobile
      first), so no column ever gets squeezed. hp_pruef p_ats_css guards it. */
.ats-bald { margin: var(--ab-gross) 0 0; max-width: 760px; }
.ats-bald p, .ats-netz p { margin: 0; }
.ats-netz { margin-top: var(--ab-karte); }

.vergleich-rahmen { padding: 0; overflow: hidden; }
.vergleich { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vergleich th, .vergleich td {
  text-align: left; vertical-align: top;
  overflow-wrap: normal; word-break: normal;
}
.vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0, 0, 0, 0); white-space: nowrap; }
.vergleich colgroup { display: none; }
.vergleich tbody, .vergleich tr, .vergleich th, .vergleich td { display: block; }
.vergleich tr { padding: var(--ab-normal) var(--ab-gross); border-bottom: 1px solid var(--naht); }
.vergleich tr:last-child { border-bottom: 0; }
.vergleich tbody th { font-weight: 650; margin-bottom: var(--ab-winzig); -webkit-hyphens: manual; hyphens: manual; }
.vergleich td { padding: 2px 0; -webkit-hyphens: auto; hyphens: auto; }
.vergleich td::before {
  content: attr(data-titel); display: block;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--matt);
}
.vergleich td + td { margin-top: var(--ab-klein); }
.vergleich-fuss { color: var(--matt); font-size: .92rem; margin: var(--ab-normal) 0 0; }

@media (min-width: 700px) {
  .vergleich { display: table; table-layout: auto; }
  .vergleich colgroup { display: table-column-group; }
  .vergleich col.vg-thema { width: 11.5em; }
  .vergleich thead { position: static; width: auto; height: auto; overflow: visible;
                     clip: auto; white-space: normal; display: table-header-group; }
  .vergleich tbody { display: table-row-group; }
  .vergleich tr { display: table-row; padding: 0; border: 0; }
  .vergleich th, .vergleich td { display: table-cell; padding: 12px var(--ab-gross);
                                 border-bottom: 1px solid var(--naht); }
  .vergleich tr:last-child > * { border-bottom: 0; }
  .vergleich td::before { content: none; }
  .vergleich td + td { margin-top: 0; }
  .vergleich thead th {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--matt); background: var(--mulde);
  }
  .vergleich tbody th { margin: 0; }
  .vergleich td:nth-of-type(1) { color: var(--matt); }
}
@media (min-width: 1000px) {
  .schritte-drei { grid-template-columns: repeat(3, 1fr); }
}

/* ── ⭐ hps 28.09.2026: „Dispolotse in Zahlen" (#zahlen, zahlen.js) ─────────
   Nur vorhandene Farbschluessel (Farbparitaet bleibt unberuehrt). Der Abschnitt
   steht auf hidden, bis der Server Zahlen liefert. */
section.zahlen { background: var(--mulde); }
section.zahlen[hidden] { display: none; }
.zahlen-reiter {
  display: inline-flex;
  gap: var(--ab-winzig);
  padding: var(--ab-winzig);
  margin: 0 0 var(--ab-gross);
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rd-knopf);
  max-width: 100%;
}
.zahlen-reiter[hidden] { display: none; }
.zahlen-reiter button {
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  color: var(--matt);
  background: transparent;
  border: 0;
  border-radius: 5px;
  padding: var(--ab-klein) var(--ab-gross);
  cursor: pointer;
  min-height: 40px;
}
.zahlen-reiter button:hover { color: var(--text); }
.zahlen-reiter button[aria-selected="true"] { background: var(--ton-knopf); color: var(--auf-ton); }
.zahlen-reiter button:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.zahlen-raster {
  display: grid;
  gap: var(--ab-normal);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zahl-kachel {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-top: 3px solid var(--ton);
  border-radius: var(--rd-karte);
  box-shadow: inset 0 1px 0 var(--glanz);
  padding: var(--ab-gross);
  min-width: 0;
}
.zahl-wert {
  display: block;
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  word-break: normal;
}
.zahl-zusatz {
  display: block;
  font-size: .95rem;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.zahl-zusatz[hidden] { display: none; }
.zahl-name { display: block; color: var(--matt); font-size: .9rem; margin-top: var(--ab-winzig); }
.zahlen-fuss { color: var(--matt); font-size: .88rem; margin: var(--ab-normal) 0 0; }
@media (min-width: 900px) {
  .zahlen-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ── ⭐ N-HPS 02.10.2026: per period (Woche · Monat · Jahr · Gesamt), no names.
      Only existing colour keys; the period row sits above the world row. ── */
.zahlen-zeitraum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-winzig);
  padding: var(--ab-winzig);
  margin: 0 0 var(--ab-normal);
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rd-knopf);
  width: fit-content;
  max-width: 100%;
}
.zahlen-zeitraum[hidden] { display: none; }
.zahlen-zeitraum button {
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  color: var(--matt);
  background: transparent;
  border: 0;
  border-radius: 5px;
  padding: var(--ab-klein) var(--ab-normal);
  cursor: pointer;
  min-height: 40px;
}
.zahlen-zeitraum button:hover { color: var(--text); }
.zahlen-zeitraum button[aria-selected="true"] { background: var(--ton-knopf); color: var(--auf-ton); }
.zahlen-zeitraum button:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
@media (max-width: 519px) {   /* phone: four periods as a tidy 2 × 2 instead of a ragged wrap */
  .zahlen-zeitraum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; }
}
.zahlen-zeitraum ~ .zahlen-reiter { display: flex; width: fit-content; }
.zahlen-zeitraum ~ .zahlen-reiter[hidden] { display: none; }
.zahl-kachel[hidden], .zahlen-raster[hidden], .zahlen-stil-text span[hidden],
.zahlen-klein[hidden], .zahl-zusatz[hidden] { display: none; }
.zahlen-raster.drei > .zahl-kachel:nth-child(3) { grid-column: span 2; }
.zahlen-leer {
  margin: 0;
  padding: var(--ab-gross);
  background: var(--karte);
  border: 1px dashed var(--rand);
  border-radius: var(--rd-karte);
  color: var(--matt);
}
.zahlen-leer[hidden], .zahlen-mehr-block[hidden] { display: none; }
.zahlen-h3 { font-size: 1.05rem; margin: var(--ab-gross) 0 var(--ab-normal); }
.zahlen-raster-mehr .zahl-wert { font-size: clamp(1.15rem, 4.2vw, 1.6rem); }
.zahlen-zwei { display: grid; gap: var(--ab-normal); grid-template-columns: minmax(0, 1fr); margin-top: var(--ab-normal); }
/* ✏️ N-HPS 02.10.: „Zum Fahrtenbuch →" had no size for its arrow — the SVG filled the whole width
   (seen in the local screenshot, live since B-HPF). Same look as „.bereich-mehr a". */
.zahlen-mehr { margin: var(--ab-normal) 0 0; }
.zahlen-mehr a { font-weight: 650; text-decoration: none; display: inline-flex; gap: var(--ab-klein); align-items: center; }
.zahlen-mehr a svg { width: 18px; height: 18px; flex: none; }
.zahlen-stil, .zahlen-fracht {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rd-karte);
  padding: 0 var(--ab-gross) var(--ab-gross);
  min-width: 0;
}
.zahlen-fracht[hidden] { display: none; }
.zahlen-balken {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--mulde);
  border: 1px solid var(--rand);
}
.zahlen-balken[hidden] { display: none; }
.zahlen-balken span { display: block; height: 100%; width: 0; }
.zb-standard { background: var(--ton); }
.zb-renn { background: var(--matt); }
.zb-punkt { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin: 0 .35em 0 0; vertical-align: baseline; }
.zahlen-stil-text { margin: var(--ab-normal) 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.zahlen-stil-text span[data-zr] { margin-right: var(--ab-normal); }
.zahlen-klein { color: var(--matt); font-size: .88rem; margin: var(--ab-normal) 0 0; }
.zahlen-liste { margin: 0; padding-left: 1.4em; }
.zahlen-liste li { padding: 3px 0; overflow-wrap: break-word; }
.zahlen-liste .zl-n { color: var(--matt); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 900px) {
  .zahlen-raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zahlen-raster.drei > .zahl-kachel:nth-child(3) { grid-column: auto; }
  .zahlen-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── hpu 29.09.2026: „Beta startet am …" (Marco 29.09. 17:3x) — the band under the
      header of every page + the closed download badge. Only existing colour keys. ── */
.beta-start-band {
  background: var(--tonhauch);
  border-bottom: 1px solid var(--naht);
  color: var(--text);
  font-size: .9rem;
}
.beta-start-band .bahn {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ab-winzig) var(--ab-klein);
  padding-top: var(--ab-klein); padding-bottom: var(--ab-klein);
}
.beta-start-band b { color: var(--ton); font-weight: 700; letter-spacing: .01em; }
.beta-start-band span:last-child { color: var(--matt); }
.bsb-punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ton); flex: none;
  animation: bsb-puls 2.4s ease-in-out infinite;
}
@keyframes bsb-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.knopf.knopf-gesperrt, .knopf-leise.knopf-gesperrt {
  cursor: default;
  background: transparent;
  color: var(--ton);
  border: 1px dashed var(--ton);
}
.knopf.knopf-gesperrt:hover, .knopf-leise.knopf-gesperrt:hover {
  background: transparent; border-color: var(--ton); color: var(--ton);
}
@media (prefers-reduced-motion: reduce) { .bsb-punkt { animation: none; } }

/* ── hpw 29.09.: beta.html in drei Teilen — Überblick + „Schon drin" ──── */
.etappe-hin { margin: calc(-1 * var(--ab-normal)) 0 var(--ab-gross); color: var(--matt); max-width: 70ch; }
.etappe-drin .etappe-punkt { background: var(--frei); }
section.blick { padding-top: var(--ab-karte); }
.blick-raster { display: grid; gap: var(--ab-normal); grid-template-columns: 1fr; }
.blick-raster > * { min-width: 0; }
.blick-spalte {
  padding: var(--ab-gross);
  display: flex; flex-direction: column; gap: var(--ab-normal);
  border-top: 3px solid var(--ton);
}
.blick-drin { border-top-color: var(--frei); }
.blick-spaeter { border-top-color: var(--matt); }
.blick-drin .etappe-punkt { background: var(--frei); }
.blick-spaeter .etappe-punkt { background: var(--matt); }
.blick-kopf { display: flex; align-items: center; gap: var(--ab-normal); margin: 0; flex-wrap: wrap; }
.blick-kopf b { font-size: 1.15rem; }
.blick-spalte ul { margin: 0; padding: 0; list-style: none; flex: 1; }
.blick-spalte li {
  padding: 6px 0; border-bottom: 1px solid var(--naht);
  font-size: .93rem; font-weight: 550;
}
.blick-spalte li:last-child { border-bottom: 0; }
.blick-spalte li .leise { color: var(--matt); font-weight: 400; margin-left: 4px; }
.blick-spalte a { font-weight: 650; text-decoration: none; display: inline-flex; gap: var(--ab-klein); align-items: center; }
.blick-spalte a svg { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .blick-raster { grid-template-columns: repeat(3, 1fr); }
  .blick-raster-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── hpr 30.09.: Update-Kasten + geordnete Liste mit voraussichtlichem Datum ── */
section.update { padding-top: var(--ab-karte); padding-bottom: 0; }
.update-kasten {
  display: grid; gap: var(--ab-gross); grid-template-columns: 1fr;
  padding: var(--ab-karte);
  border-color: var(--ton);
  background: linear-gradient(135deg, var(--tonhauch), transparent 70%), var(--karte);
}
.update-kasten > * { min-width: 0; }
.update-kasten h2 { margin: 0 0 var(--ab-klein); font-size: clamp(1.3rem, 4vw, 1.7rem); }
.update-satz { margin: 0; font-size: 1.05rem; }
.update-wie { margin: 0 0 var(--ab-klein); font-weight: 650; }
.update-wege .liste li { font-size: .95rem; }
.update-wege a { font-weight: 650; }
.ausblick-update { color: var(--text) !important; }
/* hpr v2: the small jump bar instead of the overview columns (no repeated titles) */
.sprungleiste { display: flex; flex-wrap: wrap; gap: var(--ab-normal); }
.sprungleiste a {
  display: inline-flex; align-items: center; gap: var(--ab-klein); flex-wrap: wrap;
  padding: 8px 14px; border: 1px solid var(--rand); border-radius: 999px;
  background: var(--karte); color: var(--text); font-weight: 650; text-decoration: none;
}
.sprungleiste a:hover { border-color: var(--ton); }
.sprung-drin .etappe-punkt { background: var(--frei); }
.fp-schaetzung {
  color: var(--text); font-weight: 550;
  border-left: 3px solid var(--ton); padding: 2px 0 2px var(--ab-normal);
  margin-top: 0;
}
.fp-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ab-normal); }
.fp-liste > * { min-width: 0; }
.fp-punkt { display: grid; gap: var(--ab-klein) var(--ab-gross); grid-template-columns: 1fr; }
.fp-punkt h3 { margin: 0 0 var(--ab-klein); }
.fp-inhalt p { margin: 0; }
.vorhaben .fp-stand {
  margin: 0; align-self: start; justify-self: start;
  font-size: .82rem; font-weight: 700; color: var(--ton);
  background: var(--tonhauch); border: 1px solid var(--rand); border-radius: 999px;
  padding: 4px 11px; line-height: 1.35;
}
.vorhaben.fp-art-fertig .fp-stand { color: var(--frei); border-color: var(--frei); background: transparent; }
.vorhaben.fp-art-fertig { border-left: 3px solid var(--frei); }
.vorhaben.fp-art-beta_start .fp-stand { color: var(--auf-ton); background: var(--ton-knopf); border-color: var(--ton-knopf); }
.vorhaben.fp-art-laufend .fp-stand, .vorhaben.fp-art-busse .fp-stand, .vorhaben.fp-art-bedarf .fp-stand { color: var(--matt); background: transparent; }
.fp-haken { font-weight: 800; margin-right: 5px; }
.fp-datum { white-space: nowrap; }
.etikett-fertig { color: var(--frei); }
.blick-spalte li .fp-kurz { font-size: .82rem; }
@media (min-width: 760px) {
  .update-kasten { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .fp-punkt { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .vorhaben .fp-stand { justify-self: stretch; text-align: center; }
}

/* T-HPFIX 06.10.2026 (Fund T-HPNEU, mit 1000 Test-Fahrern): karte-reiter.js blendet Zeilen ueber das
   hidden-Attribut aus, aber Zeilen wie .hk2b-fahrt setzen selbst display — sie blieben ALLE sichtbar
   („Alle anzeigen (n)" stand ueber n offenen Zeilen, live 30). Im Reiterbereich gilt hidden jetzt wirklich. */
.live-inhalt [hidden] { display: none !important; }

/* ═══ v3: ds/tokens.css ═══ */
/* ==========================================================================
   Dispolotse · Design system v3 „Luxus" · ds/tokens.css
   ONE token set for homepage, web login area and (later) the app.
   07.10.2026, second PC, design lane rd_design.

   Contract
   · Superset of web_neu/basis/tokens.css: every old name still exists with the
     same meaning, so the login area switches by swapping this file.
   · Dark is the default. Light by system choice or by the switch
     (data-farbe="hell" | "dunkel" on <html>) — same mechanism as today.
   · Serif only for headings and big numbers (Fraunces, OFL, self-hosted,
     ds/schrift/). Body text stays the fast system sans.
   · Depth = soft shadow + gloss edge, ONLY on cards and buttons
     (--schatten*, --glanzkante). List rows never get a shadow (1000+ rows).
   · No inline styles, no external requests: CSP-friendly.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("ds/schrift/fraunces-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2013-2014,
                 U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2192;
}

:root {
  color-scheme: dark;

  /* ── Surfaces (dark: ink with a warm undertone) ─────────────────────── */
  --grund: #08090d;          /* page */
  --grund2: #0c0f15;         /* second page tone (bands, rail) */
  --flaeche: #0f131a;        /* quiet surface */
  --karte: #13171f;          /* card */
  --karte2: #191e28;         /* raised card / hover */
  --mulde: #0a0d12;          /* inset well (inputs, tracks) */
  --rand: #222833;           /* hairline */
  --naht: #2b3240;           /* stronger line */
  --schiene: #1a1f29;        /* track of bars/meters */
  --schleier: rgba(6, 7, 10, .74);   /* overlay behind sheets */
  --glas: rgba(12, 15, 21, .72);     /* frosted top bar */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --text: #f3efe6;           /* warm ivory, not pure white */
  --matt: #a4a9b2;
  --kante: #727a86;          /* quiet labels, axis */
  --text-gold: #f1c97a;      /* serif accents on dark */

  /* ── Brand gold ────────────────────────────────────────────────────── */
  --ton: #e8a63f;            /* the ONE main action + active place */
  --ton-hell: #f8d896;
  --ton2: #c4811f;
  --ton-tief: #8a5410;
  --auf-ton: #1b1306;        /* text on gold */
  --tonhauch: rgba(232, 166, 63, .10);
  --tonhauch2: rgba(232, 166, 63, .18);
  --gold-verlauf: linear-gradient(180deg, #fbe2a6 0%, #eeb14e 46%, #c98420 100%);
  --gold-linie: linear-gradient(90deg, transparent, rgba(241, 201, 122, .7) 30%, rgba(241, 201, 122, .7) 70%, transparent);
  --gold1: #3a2a10; --gold2: #0f1720;   /* legacy hero tint pair */

  /* ── Signals (colour + word, never colour alone) ───────────────────── */
  --signal2: #5cb9de;  --blau: #5cb9de;
  --frei: #52c892;     --gruen: #52c892;
  --achtung: #e8bd55;
  --rost: #f06b6f;
  --gefahr: #c63c41;
  --violett: #aa93f6;
  --reihe1: var(--ton); --reihe2: var(--blau); --reihe3: var(--gruen); --reihe4: var(--violett);
  --gitter: rgba(164, 169, 178, .12);

  /* ── Depth: gloss edge + soft shadow (cards and buttons only) ───────── */
  --glanz: rgba(255, 255, 255, .075);
  --glanzkante: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, .25));
  --glanzkante-gold: linear-gradient(180deg, rgba(248, 216, 150, .55), rgba(232, 166, 63, .14) 40%, rgba(255, 255, 255, .02) 70%, rgba(0, 0, 0, .2));
  --karte-verlauf: linear-gradient(180deg, #171c25 0%, #12161e 100%);
  --schatten: 0 1px 0 var(--glanz) inset, 0 1px 2px rgba(0, 0, 0, .45), 0 22px 44px -24px rgba(0, 0, 0, .85);
  --schatten-hoch: 0 1px 0 var(--glanz) inset, 0 2px 4px rgba(0, 0, 0, .4), 0 40px 80px -30px rgba(0, 0, 0, .95);
  --schatten-knopf: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 -1px 0 rgba(0, 0, 0, .18) inset, 0 10px 26px -12px rgba(232, 166, 63, .75);
  --schatten-klein: 0 1px 0 var(--glanz) inset, 0 6px 16px -10px rgba(0, 0, 0, .8);
  --schatten-puls-an: 0 0 0 0 rgba(82, 200, 146, .55); --schatten-puls-weit: 0 0 0 8px rgba(82, 200, 146, 0); --schatten-puls-aus: 0 0 0 0 rgba(82, 200, 146, 0);
  --leuchten: 0 0 0 1px rgba(232, 166, 63, .35), 0 0 32px -6px rgba(232, 166, 63, .45);

  /* ── Scene (hero art) ──────────────────────────────────────────────── */
  --himmel1: #0d1320; --himmel2: #2a1c26; --sonne: #e8a63f;
  --fernstes: #161d29; --ferne: #10151e; --strasse: #171b22;
  --stern: #f3efe6; --stern-deckung: .4;
  --karte-land: #161c26; --karte-wasser: #0a0e14; --karte-strasse: #2a3240;

  /* ── Type ──────────────────────────────────────────────────────────── */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --schrift: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --gr-held: clamp(2.5rem, 5.4vw, 4.6rem);   /* hero */
  --gr-titel: clamp(1.75rem, 2.8vw, 2.5rem); /* page title */
  --gr-ueber: 1.375rem;                       /* card/section heading */
  --gr-gross: 1.125rem;
  --gr-text: 1rem;
  --gr-klein: .875rem;
  --gr-mini: .75rem;
  --gr-zahl: clamp(1.6rem, 2.4vw, 2.1rem);    /* KPI number */
  --gr-zahl-xl: clamp(2.6rem, 6vw, 5rem);     /* cockpit number */
  --zh-eng: 1.05; --zh-titel: 1.15; --zh-text: 1.55;
  --sp-aufschrift: .16em;                     /* letter-spacing of small caps labels */

  /* ── Spacing (only these steps) ────────────────────────────────────── */
  --ab1: 4px; --ab2: 8px; --ab3: 12px; --ab4: 20px; --ab5: 28px; --ab6: 32px;
  --ab7: 48px; --ab8: 72px; --ab9: 112px;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --rd-k: 9px; --rd: 14px; --rd-g: 22px; --rd-voll: 999px; --rd-knopf: 12px;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --flott: 160ms; --ruhig: 380ms; --kurve: cubic-bezier(.2, .8, .2, 1); --kurve-aus: cubic-bezier(.4, 0, 1, 1);

  /* ── Shell sizes ───────────────────────────────────────────────────── */
  --leiste-breit: 256px; --leiste-schmal: 76px; --unten-hoehe: 66px; --kopf-hoehe: 64px;
  --breite: 1240px; --blatt-breite: 460px; --ziel-min: 44px;
  --sicher-oben: env(safe-area-inset-top, 0px); --sicher-unten: env(safe-area-inset-bottom, 0px);
  --sicher-links: env(safe-area-inset-left, 0px); --sicher-rechts: env(safe-area-inset-right, 0px);
  --tastatur: 0px;

  /* ── Fixed picture colours (names = rd_web basis/tokens.css „Fixed colours 07.10.2026“) ──
     v3 „night-gold“: ink/graphite materials, warm gold light, deep lacquers, ink figures.
     Dark here, light in the two light blocks. Same names → the login area stays a token swap. */
  /* Vehicles: graphite metal, chrome with a warm cast, glass with gold reflection */
  --bild-stahl: #4d5560; --bild-reifen: #111318; --bild-reifen-tief: #08090c; --bild-gummi: #23272e;
  --bild-rahmen: #252a32; --bild-rahmen-hell: #353b45; --bild-platte: #30363f; --bild-fenster: #161c25;
  --bild-scheibe: #8fb4c4; --bild-plane: #8b9097; --bild-plane-grau: #6e737b; --bild-plane-hell: #b3b1ab;
  --bild-plane-blau: #243f52; --bild-plane-gruen: #2b4a3b; --bild-roh: #7d828a; --bild-dach: #b9b6ae;
  --bild-dach-hell: #aeaba3; --bild-rippe: #6c7079; --bild-rippe-dunkel: #5c6069; --bild-gurt: #5d6168;
  --bild-nabe-hell: #a8a59e; --bild-chrom: #d9d2c3; --bild-kasten-dunkel: #2e333b; --bild-stange: #15181d;
  /* Paints: deep luxury lacquers (still clearly different from each other) */
  --bild-lack-rot: #7d2330; --bild-lack-signalrot: #9e3034; --bild-lack-grau: #56606b; --bild-lack-blau: #1f4a63;
  --bild-lack-kobalt: #2a4c84; --bild-lack-stahlblau: #33566e; --bild-lack-gelb: #c9a04e; --bild-lack-orange: #b56f2a;
  --bild-lack-gruen: #244d3a; --bild-lack-see: #2c6553; --bild-lack-weiss: #e4ded1; --bild-lack-silber: #c8c9c9;
  /* Light sources: warm gold (one gold accent per scene) */
  --bild-leuchte: #eeb14e; --bild-licht-rot: #e0565b; --bild-licht-warm: #f8e2a8; --bild-funke: #ffd88a;
  --bild-weiss: #f6f2e9; --bild-zier: #efe8da; --bild-schatten: #000000;
  /* Figures: ink silhouettes, muted warm skin, no toy colours */
  --bild-haut: #b8927a; --bild-overall: #283a4d; --bild-meistermuetze: #b8913f; --bild-jacke: #3a414c;
  --bild-jacke-bau: #4a4f57; --bild-jacke-leiter: #2e3a48; --bild-jacke-buero: #323d50; --bild-helm: #c9a04e;
  --bild-weste: #a8692c;
  /* Materials and scenes: wood, earth, halls */
  --bild-brett: #a88d62; --bild-holz: #6e5640; --bild-erde: #4f4235; --bild-erde-gruen: #36493a;
  --bild-haufen: #6a5a46; --bild-baggerarm: #b98a35; --bild-tuer: #4a525c; --bild-foerder: #22272e;
  --bild-foerder-ruhe: #3a4049; --bild-hallendach: #727a85; --bild-lampe: #5c636c;
  /* Giro card: an ink card with a gold chip in both themes */
  --giro-grund1: #1a1f2a; --giro-grund2: #07090d; --giro-chip1: #f3d79a; --giro-chip2: #a8792a;
  --giro-text: #f3efe6; --giro-hell: #ffffff; --giro-minus: #f4a0a3; --giro-gesperrt: #ffc9cb;
  --giro-marker: #e8c27a;
  /* Text/knobs on fixed colours; driver avatars */
  --auf-dunkel: #ffffff; --schalter-knopf: #ffffff; --auf-avatar: #ffffff; --avatar-1: #2f5a86;
  --avatar-2: #8a6230; --avatar-3: #2c6a50; --avatar-4: #5e3a78; --avatar-5: #87423a;
  --avatar-6: #465264;
  /* Company colours (Speditionen): jewel tones */
  --werksfarbe-1: #3d6fa8; --werksfarbe-2: #2f8060; --werksfarbe-3: #c9a04e; --werksfarbe-4: #a8403c;
  --werksfarbe-5: #6f7680; --werksfarbe-6: #7d5aa6; --auf-werksfarbe: #ffffff; --auf-werksfarbe-hell: #1a1200;
}

/* ── Light: ivory paper, ink text, deep gold ─────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]) {
    color-scheme: light;
    --grund: #f5f2eb; --grund2: #efebe2; --flaeche: #f9f7f2; --karte: #fffefb; --karte2: #fbf8f2;
    --mulde: #ede8de; --rand: #e0d8ca; --naht: #d3c9b7; --schiene: #e7e0d3;
    --schleier: rgba(34, 28, 18, .38); --glas: rgba(250, 248, 243, .8);
    --text: #18150f; --matt: #5e584e; --kante: #847b6d; --text-gold: #8a560a;
    --ton: #9c6008; --ton-hell: #c98a22; --ton2: #7c4b04; --ton-tief: #5c3702; --auf-ton: #1b1306;
    --tonhauch: rgba(156, 96, 8, .07); --tonhauch2: rgba(156, 96, 8, .13);
    --gold-verlauf: linear-gradient(180deg, #f8dc9c 0%, #e8ad4c 50%, #cc8a26 100%);
    --gold-linie: linear-gradient(90deg, transparent, rgba(156, 96, 8, .45) 30%, rgba(156, 96, 8, .45) 70%, transparent);
    --gold1: #f6e7cf; --gold2: #ffffff;
    --signal2: #1b6d8c; --blau: #1b6d8c; --frei: #187a48; --gruen: #187a48;
    --achtung: #855c00; --rost: #b0281f; --gefahr: #b0281f; --violett: #6a4cc0;
    --gitter: rgba(24, 21, 15, .08);
    --glanz: rgba(255, 255, 255, .95);
    --glanzkante: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(224, 216, 202, .9) 40%, rgba(211, 201, 183, 1));
    --glanzkante-gold: linear-gradient(180deg, rgba(232, 173, 76, .7), rgba(224, 216, 202, .9) 45%, rgba(211, 201, 183, 1));
    --karte-verlauf: linear-gradient(180deg, #ffffff 0%, #fcfaf5 100%);
    --schatten: 0 1px 0 var(--glanz) inset, 0 1px 2px rgba(70, 52, 22, .08), 0 18px 38px -22px rgba(70, 52, 22, .34);
    --schatten-hoch: 0 1px 0 var(--glanz) inset, 0 2px 6px rgba(70, 52, 22, .08), 0 34px 70px -30px rgba(70, 52, 22, .45);
    --schatten-knopf: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 rgba(120, 70, 0, .2) inset, 0 10px 22px -12px rgba(156, 96, 8, .65);
    --schatten-klein: 0 1px 0 var(--glanz) inset, 0 6px 14px -10px rgba(70, 52, 22, .35);
    --leuchten: 0 0 0 1px rgba(156, 96, 8, .3), 0 0 24px -8px rgba(156, 96, 8, .35);
    --himmel1: #d9e4ee; --himmel2: #f4dcbc; --sonne: #f2b24a; --fernstes: #c3cdd6; --ferne: #b2bcc6; --strasse: #3b3f46;
    --stern-deckung: 0;
    --karte-land: #ebe5d9; --karte-wasser: #dfe6ea; --karte-strasse: #cfc5b2;
    /* fixed picture colours — light */
    /* Vehicles: graphite metal, chrome with a warm cast, glass with gold reflection */
    --bild-stahl: #7d8590; --bild-reifen: #24272d; --bild-reifen-tief: #14161a; --bild-gummi: #3a3e45;
    --bild-rahmen: #4a4f57; --bild-rahmen-hell: #646a73; --bild-platte: #8a8f96; --bild-fenster: #3b4552;
    --bild-scheibe: #a9c6d2; --bild-plane: #b5b1a8; --bild-plane-grau: #9c988f; --bild-plane-hell: #d8d3c8;
    --bild-plane-blau: #3f5f75; --bild-plane-gruen: #4a6b58; --bild-roh: #a39f97; --bild-dach: #e2ddd2;
    --bild-dach-hell: #d6d0c4; --bild-rippe: #9a958c; --bild-rippe-dunkel: #87827a; --bild-gurt: #8a857c;
    --bild-nabe-hell: #c9c4b9; --bild-chrom: #bfb8aa; --bild-kasten-dunkel: #5a5f67; --bild-stange: #2c2f35;
    /* Paints: deep luxury lacquers (still clearly different from each other) */
    --bild-lack-rot: #8e2a35; --bild-lack-signalrot: #a8373a; --bild-lack-grau: #6b7480; --bild-lack-blau: #2a5872;
    --bild-lack-kobalt: #33589a; --bild-lack-stahlblau: #3f667f; --bild-lack-gelb: #c79a3e; --bild-lack-orange: #b8732e;
    --bild-lack-gruen: #2e5c46; --bild-lack-see: #357260; --bild-lack-weiss: #f3efe6; --bild-lack-silber: #d9d9d6;
    /* Light sources: warm gold (one gold accent per scene) */
    --bild-leuchte: #d99a2e; --bild-licht-rot: #c9444a; --bild-licht-warm: #f3d48c; --bild-funke: #f0b84a;
    --bild-weiss: #ffffff; --bild-zier: #f7f2e8; --bild-schatten: #2a2114;
    /* Figures: ink silhouettes, muted warm skin, no toy colours */
    --bild-haut: #c9a287; --bild-overall: #3a5068; --bild-meistermuetze: #a8802c; --bild-jacke: #5a616b;
    --bild-jacke-bau: #6a6f77; --bild-jacke-leiter: #47566a; --bild-jacke-buero: #4b5870; --bild-helm: #b98d35;
    --bild-weste: #b07436;
    /* Materials and scenes: wood, earth, halls */
    --bild-brett: #c2a77a; --bild-holz: #8c6f52; --bild-erde: #7a6a56; --bild-erde-gruen: #5b7357;
    --bild-haufen: #94806a; --bild-baggerarm: #b48434; --bild-tuer: #7a8088; --bild-foerder: #4a4f57;
    --bild-foerder-ruhe: #6a7079; --bild-hallendach: #a7a296; --bild-lampe: #8a8f96;
    /* Giro card: an ink card with a gold chip in both themes */
    --giro-grund1: #232a37; --giro-grund2: #0e1218; --giro-chip1: #f3d79a; --giro-chip2: #a8792a;
    --giro-text: #f3efe6; --giro-hell: #ffffff; --giro-minus: #f4a0a3; --giro-gesperrt: #ffc9cb;
    --giro-marker: #e8c27a;
    /* Text/knobs on fixed colours; driver avatars */
    --auf-dunkel: #ffffff; --schalter-knopf: #ffffff; --auf-avatar: #ffffff; --avatar-1: #2f5a86;
    --avatar-2: #8a6230; --avatar-3: #2c6a50; --avatar-4: #5e3a78; --avatar-5: #87423a;
    --avatar-6: #465264;
    /* Company colours (Speditionen): jewel tones */
    --werksfarbe-1: #335f93; --werksfarbe-2: #256e51; --werksfarbe-3: #a8802c; --werksfarbe-4: #9a3532;
    --werksfarbe-5: #5f666f; --werksfarbe-6: #6b4a93; --auf-werksfarbe: #ffffff; --auf-werksfarbe-hell: #1a1200;
  }
}
:root[data-farbe="hell"] {
  color-scheme: light;
  --grund: #f5f2eb; --grund2: #efebe2; --flaeche: #f9f7f2; --karte: #fffefb; --karte2: #fbf8f2;
  --mulde: #ede8de; --rand: #e0d8ca; --naht: #d3c9b7; --schiene: #e7e0d3;
  --schleier: rgba(34, 28, 18, .38); --glas: rgba(250, 248, 243, .8);
  --text: #18150f; --matt: #5e584e; --kante: #847b6d; --text-gold: #8a560a;
  --ton: #9c6008; --ton-hell: #c98a22; --ton2: #7c4b04; --ton-tief: #5c3702; --auf-ton: #1b1306;
  --tonhauch: rgba(156, 96, 8, .07); --tonhauch2: rgba(156, 96, 8, .13);
  --gold-verlauf: linear-gradient(180deg, #f8dc9c 0%, #e8ad4c 50%, #cc8a26 100%);
  --gold-linie: linear-gradient(90deg, transparent, rgba(156, 96, 8, .45) 30%, rgba(156, 96, 8, .45) 70%, transparent);
  --gold1: #f6e7cf; --gold2: #ffffff;
  --signal2: #1b6d8c; --blau: #1b6d8c; --frei: #187a48; --gruen: #187a48;
  --achtung: #855c00; --rost: #b0281f; --gefahr: #b0281f; --violett: #6a4cc0;
  --gitter: rgba(24, 21, 15, .08);
  --glanz: rgba(255, 255, 255, .95);
  --glanzkante: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(224, 216, 202, .9) 40%, rgba(211, 201, 183, 1));
  --glanzkante-gold: linear-gradient(180deg, rgba(232, 173, 76, .7), rgba(224, 216, 202, .9) 45%, rgba(211, 201, 183, 1));
  --karte-verlauf: linear-gradient(180deg, #ffffff 0%, #fcfaf5 100%);
  --schatten: 0 1px 0 var(--glanz) inset, 0 1px 2px rgba(70, 52, 22, .08), 0 18px 38px -22px rgba(70, 52, 22, .34);
  --schatten-hoch: 0 1px 0 var(--glanz) inset, 0 2px 6px rgba(70, 52, 22, .08), 0 34px 70px -30px rgba(70, 52, 22, .45);
  --schatten-knopf: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 rgba(120, 70, 0, .2) inset, 0 10px 22px -12px rgba(156, 96, 8, .65);
  --schatten-klein: 0 1px 0 var(--glanz) inset, 0 6px 14px -10px rgba(70, 52, 22, .35);
  --leuchten: 0 0 0 1px rgba(156, 96, 8, .3), 0 0 24px -8px rgba(156, 96, 8, .35);
  --himmel1: #d9e4ee; --himmel2: #f4dcbc; --sonne: #f2b24a; --fernstes: #c3cdd6; --ferne: #b2bcc6; --strasse: #3b3f46;
  --stern-deckung: 0;
  --karte-land: #ebe5d9; --karte-wasser: #dfe6ea; --karte-strasse: #cfc5b2;
  /* fixed picture colours — light */
  /* Vehicles: graphite metal, chrome with a warm cast, glass with gold reflection */
  --bild-stahl: #7d8590; --bild-reifen: #24272d; --bild-reifen-tief: #14161a; --bild-gummi: #3a3e45;
  --bild-rahmen: #4a4f57; --bild-rahmen-hell: #646a73; --bild-platte: #8a8f96; --bild-fenster: #3b4552;
  --bild-scheibe: #a9c6d2; --bild-plane: #b5b1a8; --bild-plane-grau: #9c988f; --bild-plane-hell: #d8d3c8;
  --bild-plane-blau: #3f5f75; --bild-plane-gruen: #4a6b58; --bild-roh: #a39f97; --bild-dach: #e2ddd2;
  --bild-dach-hell: #d6d0c4; --bild-rippe: #9a958c; --bild-rippe-dunkel: #87827a; --bild-gurt: #8a857c;
  --bild-nabe-hell: #c9c4b9; --bild-chrom: #bfb8aa; --bild-kasten-dunkel: #5a5f67; --bild-stange: #2c2f35;
  /* Paints: deep luxury lacquers (still clearly different from each other) */
  --bild-lack-rot: #8e2a35; --bild-lack-signalrot: #a8373a; --bild-lack-grau: #6b7480; --bild-lack-blau: #2a5872;
  --bild-lack-kobalt: #33589a; --bild-lack-stahlblau: #3f667f; --bild-lack-gelb: #c79a3e; --bild-lack-orange: #b8732e;
  --bild-lack-gruen: #2e5c46; --bild-lack-see: #357260; --bild-lack-weiss: #f3efe6; --bild-lack-silber: #d9d9d6;
  /* Light sources: warm gold (one gold accent per scene) */
  --bild-leuchte: #d99a2e; --bild-licht-rot: #c9444a; --bild-licht-warm: #f3d48c; --bild-funke: #f0b84a;
  --bild-weiss: #ffffff; --bild-zier: #f7f2e8; --bild-schatten: #2a2114;
  /* Figures: ink silhouettes, muted warm skin, no toy colours */
  --bild-haut: #c9a287; --bild-overall: #3a5068; --bild-meistermuetze: #a8802c; --bild-jacke: #5a616b;
  --bild-jacke-bau: #6a6f77; --bild-jacke-leiter: #47566a; --bild-jacke-buero: #4b5870; --bild-helm: #b98d35;
  --bild-weste: #b07436;
  /* Materials and scenes: wood, earth, halls */
  --bild-brett: #c2a77a; --bild-holz: #8c6f52; --bild-erde: #7a6a56; --bild-erde-gruen: #5b7357;
  --bild-haufen: #94806a; --bild-baggerarm: #b48434; --bild-tuer: #7a8088; --bild-foerder: #4a4f57;
  --bild-foerder-ruhe: #6a7079; --bild-hallendach: #a7a296; --bild-lampe: #8a8f96;
  /* Giro card: an ink card with a gold chip in both themes */
  --giro-grund1: #232a37; --giro-grund2: #0e1218; --giro-chip1: #f3d79a; --giro-chip2: #a8792a;
  --giro-text: #f3efe6; --giro-hell: #ffffff; --giro-minus: #f4a0a3; --giro-gesperrt: #ffc9cb;
  --giro-marker: #e8c27a;
  /* Text/knobs on fixed colours; driver avatars */
  --auf-dunkel: #ffffff; --schalter-knopf: #ffffff; --auf-avatar: #ffffff; --avatar-1: #2f5a86;
  --avatar-2: #8a6230; --avatar-3: #2c6a50; --avatar-4: #5e3a78; --avatar-5: #87423a;
  --avatar-6: #465264;
  /* Company colours (Speditionen): jewel tones */
  --werksfarbe-1: #335f93; --werksfarbe-2: #256e51; --werksfarbe-3: #a8802c; --werksfarbe-4: #9a3532;
  --werksfarbe-5: #5f666f; --werksfarbe-6: #6b4a93; --auf-werksfarbe: #ffffff; --auf-werksfarbe-hell: #1a1200;
}
:root[data-farbe="dunkel"] { color-scheme: dark; }

/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--grund); color: var(--text);
  font: var(--gr-text)/var(--zh-text) var(--schrift);
  font-variant-numeric: tabular-nums;
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, .serif { font-family: var(--serif); font-optical-sizing: auto; font-weight: 560; letter-spacing: -.012em; margin: 0; }
p { margin: 0; }
a { color: var(--ton); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }
::selection { background: var(--ton); color: var(--auf-ton); }
:focus-visible { outline: 2px solid var(--ton); outline-offset: 3px; border-radius: var(--rd-k); }

/* helpers kept from the old token file (same names) */
.zahl { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.matt { color: var(--matt); }
.klein { font-size: var(--gr-klein); }
.mini { font-size: var(--gr-mini); }
.aufschrift { font-size: .7rem; letter-spacing: var(--sp-aufschrift); text-transform: uppercase; color: var(--matt); font-weight: 650; margin: 0; }
.aufschrift.gold { color: var(--text-gold); }
.plus, .gut { color: var(--frei); }
.minus, .rot { color: var(--rost); }
.gelb { color: var(--achtung); }
.gold { color: var(--text-gold); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohne-js { padding: var(--ab6); color: var(--matt); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ═══ v3: ds/bild_tokens_v3.css ═══ */
/* Dispolotse · picture tokens v3 „Nacht-Gold" · proposal (lane rd_grafik, 07.10.2026)
   SAME names as rd_web basis/tokens.css (--bild-*): the login area switches by swapping values only.
   Values = rd_design ds/tokens.css v3 (dark + light) plus the scene deltas marked in schau.py.
   63 dark / 63 light declarations. */
:root {
  --bild-stahl: #4d5560; --bild-reifen: #111318; --bild-reifen-tief: #08090c; --bild-gummi: #23272e;
  --bild-rahmen: #252a32; --bild-rahmen-hell: #353b45; --bild-platte: #30363f; --bild-fenster: #161c25;
  --bild-scheibe: #8fb4c4; --bild-plane: #8b9097; --bild-plane-grau: #6e737b; --bild-plane-hell: #b3b1ab;
  --bild-plane-blau: #243f52; --bild-plane-gruen: #2b4a3b; --bild-roh: #7d828a; --bild-dach: #b9b6ae;
  --bild-dach-hell: #aeaba3; --bild-rippe: #6c7079; --bild-rippe-dunkel: #5c6069; --bild-gurt: #5d6168;
  --bild-nabe-hell: #a8a59e; --bild-chrom: #d9d2c3; --bild-kasten-dunkel: #2e333b; --bild-stange: #15181d;
  --bild-lack-rot: #7d2330; --bild-lack-signalrot: #9e3034; --bild-lack-grau: #56606b; --bild-lack-blau: #1f4a63;
  --bild-lack-kobalt: #2a4c84; --bild-lack-stahlblau: #33566e; --bild-lack-gelb: #c9a04e; --bild-lack-orange: #b56f2a;
  --bild-lack-gruen: #244d3a; --bild-lack-see: #2c6553; --bild-lack-weiss: #e4ded1; --bild-lack-silber: #c8c9c9;
  --bild-leuchte: #eeb14e; --bild-licht-rot: #e0565b; --bild-licht-warm: #f8e2a8; --bild-funke: #ffd88a;
  --bild-weiss: #f6f2e9; --bild-zier: #efe8da; --bild-schatten: #000000; --bild-haut: #b8927a;
  --bild-overall: #283a4d; --bild-meistermuetze: #b8913f; --bild-jacke: #3a414c; --bild-jacke-bau: #4a4f57;
  --bild-jacke-leiter: #2e3a48; --bild-jacke-buero: #323d50; --bild-helm: #c9a04e; --bild-weste: #a8692c;
  --bild-brett: #a88d62; --bild-holz: #6e5640; --bild-erde: #4f4235; --bild-erde-gruen: #36493a;
  --bild-haufen: #6a5a46; --bild-baggerarm: #b98a35; --bild-tuer: #4a525c; --bild-foerder: #22272e;
  --bild-foerder-ruhe: #3a4049; --bild-hallendach: #727a85; --bild-lampe: #5c636c;
}
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]) {
    --bild-stahl: #7d8590; --bild-reifen: #24272d; --bild-reifen-tief: #14161a; --bild-gummi: #3a3e45;
    --bild-rahmen: #4a4f57; --bild-rahmen-hell: #646a73; --bild-platte: #8a8f96; --bild-fenster: #3b4552;
    --bild-scheibe: #a9c6d2; --bild-plane: #b5b1a8; --bild-plane-grau: #9c988f; --bild-plane-hell: #d8d3c8;
    --bild-plane-blau: #3f5f75; --bild-plane-gruen: #4a6b58; --bild-roh: #a39f97; --bild-dach: #e2ddd2;
    --bild-dach-hell: #d6d0c4; --bild-rippe: #9a958c; --bild-rippe-dunkel: #87827a; --bild-gurt: #8a857c;
    --bild-nabe-hell: #c9c4b9; --bild-chrom: #bfb8aa; --bild-kasten-dunkel: #5a5f67; --bild-stange: #2c2f35;
    --bild-lack-rot: #8e2a35; --bild-lack-signalrot: #a8373a; --bild-lack-grau: #6b7480; --bild-lack-blau: #2a5872;
    --bild-lack-kobalt: #33589a; --bild-lack-stahlblau: #3f667f; --bild-lack-gelb: #c79a3e; --bild-lack-orange: #b8732e;
    --bild-lack-gruen: #2e5c46; --bild-lack-see: #357260; --bild-lack-weiss: #f3efe6; --bild-lack-silber: #d9d9d6;
    --bild-leuchte: #d99a2e; --bild-licht-rot: #c9444a; --bild-licht-warm: #f3d48c; --bild-funke: #f0b84a;
    --bild-weiss: #ffffff; --bild-zier: #f7f2e8; --bild-schatten: #2a2114; --bild-haut: #c9a287;
    --bild-overall: #3a5068; --bild-meistermuetze: #a8802c; --bild-jacke: #5a616b; --bild-jacke-bau: #6a6f77;
    --bild-jacke-leiter: #47566a; --bild-jacke-buero: #4b5870; --bild-helm: #b98d35; --bild-weste: #b07436;
    --bild-brett: #c2a77a; --bild-holz: #8c6f52; --bild-erde: #7a6a56; --bild-erde-gruen: #5b7357;
    --bild-haufen: #94806a; --bild-baggerarm: #b48434; --bild-tuer: #7a8088; --bild-foerder: #4a4f57;
    --bild-foerder-ruhe: #6a7079; --bild-hallendach: #a7a296; --bild-lampe: #8a8f96;
  }
}
:root[data-farbe="hell"] {
  --bild-stahl: #7d8590; --bild-reifen: #24272d; --bild-reifen-tief: #14161a; --bild-gummi: #3a3e45;
  --bild-rahmen: #4a4f57; --bild-rahmen-hell: #646a73; --bild-platte: #8a8f96; --bild-fenster: #3b4552;
  --bild-scheibe: #a9c6d2; --bild-plane: #b5b1a8; --bild-plane-grau: #9c988f; --bild-plane-hell: #d8d3c8;
  --bild-plane-blau: #3f5f75; --bild-plane-gruen: #4a6b58; --bild-roh: #a39f97; --bild-dach: #e2ddd2;
  --bild-dach-hell: #d6d0c4; --bild-rippe: #9a958c; --bild-rippe-dunkel: #87827a; --bild-gurt: #8a857c;
  --bild-nabe-hell: #c9c4b9; --bild-chrom: #bfb8aa; --bild-kasten-dunkel: #5a5f67; --bild-stange: #2c2f35;
  --bild-lack-rot: #8e2a35; --bild-lack-signalrot: #a8373a; --bild-lack-grau: #6b7480; --bild-lack-blau: #2a5872;
  --bild-lack-kobalt: #33589a; --bild-lack-stahlblau: #3f667f; --bild-lack-gelb: #c79a3e; --bild-lack-orange: #b8732e;
  --bild-lack-gruen: #2e5c46; --bild-lack-see: #357260; --bild-lack-weiss: #f3efe6; --bild-lack-silber: #d9d9d6;
  --bild-leuchte: #d99a2e; --bild-licht-rot: #c9444a; --bild-licht-warm: #f3d48c; --bild-funke: #f0b84a;
  --bild-weiss: #ffffff; --bild-zier: #f7f2e8; --bild-schatten: #2a2114; --bild-haut: #c9a287;
  --bild-overall: #3a5068; --bild-meistermuetze: #a8802c; --bild-jacke: #5a616b; --bild-jacke-bau: #6a6f77;
  --bild-jacke-leiter: #47566a; --bild-jacke-buero: #4b5870; --bild-helm: #b98d35; --bild-weste: #b07436;
  --bild-brett: #c2a77a; --bild-holz: #8c6f52; --bild-erde: #7a6a56; --bild-erde-gruen: #5b7357;
  --bild-haufen: #94806a; --bild-baggerarm: #b48434; --bild-tuer: #7a8088; --bild-foerder: #4a4f57;
  --bild-foerder-ruhe: #6a7079; --bild-hallendach: #a7a296; --bild-lampe: #8a8f96;
}

/* ═══ v3: ds/komponenten.css ═══ */
/* ==========================================================================
   Dispolotse · Design system v3 „Luxus" · ds/komponenten.css
   Components shared by homepage, login area and (later) the app.
   Only tokens from tokens.css. No inline styles anywhere (CSP).
   Order: icons · type · buttons · cards · KPI · chips · tabs · fields/search ·
          toggles · list rows · paging · meters/rings · sheet · toasts · empty ·
          shell (top bar, side rail, icon rail, bottom bar) · palette (Ctrl+K)
   ========================================================================== */

/* ── Icons ───────────────────────────────────────────────────────────── */
.i { width: 20px; height: 20px; flex: none; }
.i-k { width: 16px; height: 16px; flex: none; }
.i-g { width: 26px; height: 26px; flex: none; }

/* ── Type steps ──────────────────────────────────────────────────────── */
.t-held { font-family: var(--serif); font-size: var(--gr-held); line-height: var(--zh-eng); font-weight: 520; letter-spacing: -.028em; }
.t-held em, .t-titel em { font-style: normal; color: var(--text-gold); }
.t-titel { font-family: var(--serif); font-size: var(--gr-titel); line-height: var(--zh-titel); font-weight: 540; letter-spacing: -.02em; }
.t-ueber { font-family: var(--serif); font-size: var(--gr-ueber); line-height: 1.25; font-weight: 580; letter-spacing: -.01em; }
.t-gross { font-size: var(--gr-gross); }
.t-text { font-size: var(--gr-text); }
.zier { display: block; height: 1px; background: var(--gold-linie); border: 0; margin: 0; }

/* ── Buttons: Hauptaktion (gold, max one per screen) · Neben · Leise ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ab2);
  min-height: var(--ziel-min); padding: 0 18px;
  border-radius: var(--rd-knopf); border: 1px solid transparent;
  background: var(--karte-verlauf) padding-box, var(--glanzkante) border-box;
  box-shadow: var(--schatten-klein);
  color: var(--text); font-weight: 640; font-size: .95rem; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--flott) var(--kurve), box-shadow var(--flott) var(--kurve), background var(--flott);
}
.knopf:hover { text-decoration: none; background: linear-gradient(var(--karte2), var(--karte2)) padding-box, var(--glanzkante-gold) border-box; }
.knopf:active { transform: translateY(1px); }
.knopf.haupt {
  position: relative; overflow: hidden;
  background: var(--gold-verlauf) padding-box, linear-gradient(180deg, rgba(255, 240, 200, .9), rgba(150, 90, 10, .9)) border-box;
  color: var(--auf-ton); box-shadow: var(--schatten-knopf); font-weight: 720;
}
.knopf.haupt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 48%, transparent 60%);
  transform: translateX(-110%); transition: transform 900ms var(--kurve);
}
.knopf.haupt:hover::after { transform: translateX(110%); }
.knopf.haupt:hover { filter: brightness(1.04); }
.knopf.leise { background: none; border-color: transparent; box-shadow: none; color: var(--ton); padding: 0 var(--ab2); min-height: 36px; }
.knopf.leise:hover { background: var(--tonhauch); }
.knopf.gefahr { color: var(--rost); }
.knopf.gross { min-height: 54px; padding: 0 26px; font-size: 1.02rem; border-radius: 14px; }
.knopf.klein { min-height: 34px; padding: 0 12px; font-size: .84rem; border-radius: 10px; }
.knopf.rund { width: var(--ziel-min); padding: 0; border-radius: var(--rd-voll); }
.knopf.rund.klein { width: 34px; }
.knopf[disabled], .knopf.aus { opacity: .5; pointer-events: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--ab2); align-items: center; }

/* ── Card: gloss edge + soft shadow ──────────────────────────────────── */
.karte {
  position: relative;
  background: var(--karte-verlauf) padding-box, var(--glanzkante) border-box;
  border: 1px solid transparent; border-radius: var(--rd-g);
  box-shadow: var(--schatten);
  padding: var(--ab4);
  min-width: 0;
}
.karte.edel { background: radial-gradient(120% 90% at 100% 0%, var(--tonhauch2), transparent 55%) padding-box, var(--karte-verlauf) padding-box, var(--glanzkante-gold) border-box; }
.karte.flach { box-shadow: none; }
.karte.dicht { padding: var(--ab3) var(--ab4); }
a.karte, .karte.klickbar { color: inherit; text-decoration: none; transition: transform var(--ruhig) var(--kurve), box-shadow var(--ruhig) var(--kurve); }
a.karte:hover, .karte.klickbar:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.karte-kopf { display: flex; align-items: center; gap: var(--ab3); margin-bottom: var(--ab3); min-width: 0; }
.karte-kopf .t-ueber, .karte-kopf h2, .karte-kopf h3 { font-size: 1.08rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--ab2); margin-top: var(--ab3); padding-top: var(--ab3); border-top: 1px solid var(--rand); font-size: var(--gr-klein); }
.siegel {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 11px; color: var(--text-gold);
  background: linear-gradient(180deg, var(--tonhauch2), var(--tonhauch)) padding-box, var(--glanzkante-gold) border-box;
  border: 1px solid transparent;
}
.siegel.blau { color: var(--blau); background: linear-gradient(180deg, rgba(92, 185, 222, .16), rgba(92, 185, 222, .05)) padding-box, var(--glanzkante) border-box; }
.siegel.gruen { color: var(--gruen); background: linear-gradient(180deg, rgba(82, 200, 146, .16), rgba(82, 200, 146, .05)) padding-box, var(--glanzkante) border-box; }

/* ── KPI tile ────────────────────────────────────────────────────────── */
.kpi-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ab3); }
.kpi { padding: var(--ab3) var(--ab4) var(--ab4); display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.kpi .aufschrift { display: flex; align-items: center; gap: 6px; }
.kpi .wert { font-family: var(--serif); font-size: var(--gr-zahl); font-weight: 560; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.kpi .wert small { font-family: var(--schrift); font-size: .8rem; color: var(--matt); font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.kpi .neben { font-size: var(--gr-mini); color: var(--matt); }
.kpi[aria-pressed="true"] { box-shadow: var(--schatten), var(--leuchten); }
.kpi .spur { width: 100%; height: 26px; margin-top: 6px; color: var(--ton); }
.kpi .spur.blau { color: var(--blau); }
@media (max-width: 700px) { .kpi-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab2); } .kpi .wert { font-size: 1.45rem; } }

/* ── Live dot ────────────────────────────────────────────────────────── */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gr-mini); font-weight: 700; color: var(--frei); letter-spacing: .04em; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: puls 2.2s infinite; }
@keyframes puls { 0% { box-shadow: var(--schatten-puls-an); } 70% { box-shadow: var(--schatten-puls-weit); } 100% { box-shadow: var(--schatten-puls-aus); } }

/* ── Status chips (colour + word) ────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border-radius: var(--rd-voll); font-size: .74rem; font-weight: 680; letter-spacing: .01em; white-space: nowrap;
  background: var(--mulde); color: var(--matt); border: 1px solid var(--rand);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ohne-punkt::before { display: none; }
.chip.unterwegs { color: var(--blau); background: rgba(92, 185, 222, .1); border-color: rgba(92, 185, 222, .28); }
.chip.puenktlich { color: var(--frei); background: rgba(82, 200, 146, .1); border-color: rgba(82, 200, 146, .28); }
.chip.faellig { color: var(--achtung); background: rgba(232, 189, 85, .1); border-color: rgba(232, 189, 85, .3); }
.chip.ueberfaellig { color: var(--rost); background: rgba(240, 107, 111, .1); border-color: rgba(240, 107, 111, .3); }
.chip.erledigt { color: var(--kante); }
.chip.gesperrt { color: var(--rost); background: transparent; border-color: var(--rost); }
.chip.neu { color: var(--auf-ton); background: var(--gold-verlauf); border-color: transparent; }
.chip.neu::before { display: none; }
.chip.nur-app::before { display: none; }
.chip.spiel { color: var(--text); background: var(--karte2); font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; }
.chip.spiel::before { display: none; }
/* filter chips (toggle) */
.filter { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--rd-voll); border: 1px solid var(--rand); background: var(--karte); color: var(--matt); font-size: .84rem; font-weight: 620; cursor: pointer; white-space: nowrap; }
.filter[aria-pressed="true"] { color: var(--text); border-color: var(--ton); background: var(--tonhauch2); }

/* ── Tabs (segmented, max 5 + Mehr) ──────────────────────────────────── */
.reiter { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--mulde); border: 1px solid var(--rand); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button { border: 0; background: none; color: var(--matt); font-weight: 640; font-size: .88rem; height: 36px; padding: 0 14px; border-radius: 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.reiter button:hover { color: var(--text); }
.reiter button[aria-selected="true"] { color: var(--text); background: var(--karte-verlauf) padding-box, var(--glanzkante) border-box; border: 1px solid transparent; box-shadow: var(--schatten-klein); }
.reiter .zaehler { font-size: .7rem; color: var(--kante); font-weight: 700; }
.reiter button[aria-selected="true"] .zaehler { color: var(--text-gold); }
.reiter-flach { display: flex; gap: var(--ab4); border-bottom: 1px solid var(--rand); }
.reiter-flach button { border: 0; background: none; color: var(--matt); font-weight: 640; padding: 10px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter-flach button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--ton); }

/* ── Fields + search ─────────────────────────────────────────────────── */
.feld { display: flex; align-items: center; gap: var(--ab2); height: var(--ziel-min); padding: 0 14px; border-radius: 12px; background: var(--mulde); border: 1px solid var(--rand); color: var(--matt); min-width: 0; }
.feld:focus-within { border-color: var(--ton); box-shadow: 0 0 0 4px var(--tonhauch); }
.feld input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); height: 100%; }
.feld input::placeholder { color: var(--kante); }
.taste { font-family: var(--mono); font-size: .7rem; color: var(--matt); border: 1px solid var(--naht); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: var(--karte); white-space: nowrap; }
.suchfeld { cursor: pointer; width: min(440px, 100%); }
.suchfeld span.platz { flex: 1; color: var(--kante); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Toggle switch (real checkbox, styled) ───────────────────────────── */
.schalter { position: relative; display: inline-flex; flex: none; width: 46px; height: 28px; }
.schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.schalter span { position: absolute; inset: 0; border-radius: var(--rd-voll); background: var(--schiene); border: 1px solid var(--naht); transition: background var(--flott); }
.schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #fff, #d9d4ca); box-shadow: var(--schatten-klein); transition: transform var(--ruhig) var(--kurve); }
.schalter input:checked + span { background: var(--gold-verlauf); border-color: transparent; }
.schalter input:checked + span::after { transform: translateX(18px); }
.schalter input:focus-visible + span { outline: 2px solid var(--ton); outline-offset: 3px; }
.einstell-zeile { display: flex; align-items: center; gap: var(--ab3); padding: var(--ab3) 0; border-bottom: 1px solid var(--rand); }
.einstell-zeile:last-child { border-bottom: 0; }
.einstell-zeile .text { flex: 1; min-width: 0; }
.einstell-zeile .text b { display: block; font-weight: 640; }
.einstell-zeile .text span { font-size: var(--gr-mini); color: var(--matt); }

/* ── List rows (NO shadow — fast at 1000+ rows) ──────────────────────── */
.liste { border-radius: var(--rd); overflow: hidden; border: 1px solid var(--rand); background: var(--flaeche); }
.zeile {
  display: grid; grid-template-columns: var(--spalten, 1fr); align-items: center; gap: var(--ab3);
  min-height: 52px; padding: 0 var(--ab4); border-bottom: 1px solid var(--rand);
  color: inherit; text-decoration: none; cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; font: inherit;
}
.zeile:last-child { border-bottom: 0; }
.zeile:hover { background: var(--tonhauch); text-decoration: none; }
.zeile[aria-current="true"] { background: var(--tonhauch2); box-shadow: inset 3px 0 0 var(--ton); }
.zeile.kopfzeile { min-height: 38px; cursor: default; background: var(--grund2); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kante); font-weight: 680; }
.zeile.kopfzeile:hover { background: var(--grund2); }
.zeile .haupt-text { min-width: 0; }
.zeile .haupt-text b { display: block; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .haupt-text span { display: block; font-size: var(--gr-mini); color: var(--matt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .rechts { text-align: right; }
.zeile .geld { font-family: var(--serif); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .74rem; font-weight: 760; color: var(--auf-ton); background: var(--gold-verlauf); flex: none; }
.avatar.b { background: linear-gradient(180deg, #9fdcf3, #4aa7cf); color: #04202c; }
.avatar.g { background: linear-gradient(180deg, #a5ebc8, #3fb47d); color: #032515; }
.avatar.v { background: linear-gradient(180deg, #d3c6ff, #9378ee); color: #160b3a; }

/* ── Paging ──────────────────────────────────────────────────────────── */
.blaettern { display: flex; align-items: center; justify-content: space-between; gap: var(--ab3); flex-wrap: wrap; }
.blaettern .seiten { display: flex; gap: 4px; align-items: center; }
.blaettern button { min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--rand); background: var(--karte); color: var(--matt); font-weight: 650; font-size: .86rem; display: inline-grid; place-items: center; padding: 0 8px; }
.blaettern button[aria-current="page"] { color: var(--auf-ton); background: var(--gold-verlauf); border-color: transparent; box-shadow: var(--schatten-knopf); }
.blaettern button[disabled] { opacity: .4; }
.blaettern .luecke { color: var(--kante); padding: 0 4px; }

/* ── Meters, bars, rings ─────────────────────────────────────────────── */
meter, progress { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: var(--rd-voll); background: var(--schiene); overflow: hidden; display: block; }
meter::-webkit-meter-bar { background: var(--schiene); border: 0; border-radius: var(--rd-voll); height: 6px; }
meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--ton2), var(--ton-hell)); border-radius: var(--rd-voll); }
meter::-webkit-meter-suboptimum-value { background: var(--achtung); border-radius: var(--rd-voll); }
meter::-webkit-meter-even-less-good-value { background: var(--rost); border-radius: var(--rd-voll); }
meter::-moz-meter-bar { background: linear-gradient(90deg, var(--ton2), var(--ton-hell)); border-radius: var(--rd-voll); }
meter.blau::-webkit-meter-optimum-value { background: linear-gradient(90deg, #2f8fb8, #8fd6f1); }
meter.gruen::-webkit-meter-optimum-value { background: linear-gradient(90deg, #2c9a66, #8fe3bb); }
meter.dick { height: 10px; }
meter.dick::-webkit-meter-bar { height: 10px; }
.ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring .spur-r { fill: none; stroke: var(--schiene); stroke-width: 6; }
.ring .wert-r { fill: none; stroke: var(--ton); stroke-width: 6; stroke-linecap: round; }
.ring .wert-r.blau { stroke: var(--blau); } .ring .wert-r.gruen { stroke: var(--gruen); } .ring .wert-r.rost { stroke: var(--rost); }

/* ── Sheet (detail on the right / full on phone) ─────────────────────── */
.schleier { position: fixed; inset: 0; background: var(--schleier); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity var(--ruhig) var(--kurve); }
.schleier.offen { opacity: 1; pointer-events: auto; }
.blatt {
  position: fixed; z-index: 61; top: 10px; right: 10px; bottom: 10px; width: min(var(--blatt-breite), calc(100vw - 20px));
  display: flex; flex-direction: column; border-radius: var(--rd-g);
  background: var(--karte-verlauf) padding-box, var(--glanzkante) border-box; border: 1px solid transparent;
  box-shadow: var(--schatten-hoch);
  transform: translateX(calc(100% + 30px)); transition: transform var(--ruhig) var(--kurve);
}
.blatt.offen { transform: none; }
.blatt-kopf { display: flex; align-items: flex-start; gap: var(--ab3); padding: var(--ab4) var(--ab4) var(--ab3); }
.blatt-kopf .titel { flex: 1; min-width: 0; }
.blatt-inhalt { flex: 1; overflow: auto; padding: 0 var(--ab4) var(--ab4); }
.blatt-fuss { padding: var(--ab3) var(--ab4) calc(var(--ab4) + var(--sicher-unten)); border-top: 1px solid var(--rand); display: flex; gap: var(--ab2); }
.blatt-fuss .knopf { flex: 1; }
.griffleiste { display: none; }
@media (max-width: 700px) {
  .blatt { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92vh; border-radius: var(--rd-g) var(--rd-g) 0 0; transform: translateY(105%); }
  .griffleiste { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--naht); margin: 8px auto 0; }
}
.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rand); border: 1px solid var(--rand); border-radius: var(--rd); overflow: hidden; margin: var(--ab3) 0; }
.fakten div { background: var(--flaeche); padding: 10px 12px; }
.fakten dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kante); font-weight: 680; }
.fakten dd { margin: 2px 0 0; font-weight: 640; }
.fakten dd.serif { font-size: 1.15rem; }

/* ── Toasts ──────────────────────────────────────────────────────────── */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: var(--ab2); align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--ab3); min-height: 48px; padding: 0 8px 0 14px; border-radius: 14px; background: var(--karte-verlauf) padding-box, var(--glanzkante-gold) border-box; border: 1px solid transparent; box-shadow: var(--schatten-hoch); font-size: .9rem; font-weight: 600; animation: rein var(--ruhig) var(--kurve); }
.toast .i { color: var(--frei); }
@keyframes rein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .toasts { left: 12px; right: 12px; bottom: calc(var(--unten-hoehe) + 12px + var(--sicher-unten)); align-items: stretch; } }

/* ── Empty state ─────────────────────────────────────────────────────── */
.leer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ab3); padding: var(--ab6) var(--ab4); }
.leer .siegel { width: 56px; height: 56px; border-radius: 18px; }
.leer .siegel .i { width: 26px; height: 26px; }
.leer p { color: var(--matt); max-width: 34ch; }

/* ==========================================================================
   SHELL — one layout, three sizes. Built by ds.js from ONE nav list.
   PC > 1100: side rail with groups · tablet 701–1100: icon rail · phone ≤ 700: bottom bar
   ========================================================================== */
.rahmen { display: grid; grid-template-columns: var(--leiste-breit) minmax(0, 1fr); min-height: 100vh; }
.leiste {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--grund2), var(--grund)); border-right: 1px solid var(--rand);
  padding: var(--ab3) var(--ab3) var(--ab3);
  overflow: hidden;
}
.leiste .marke { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: var(--text); text-decoration: none; }
.marke-zeichen { width: 34px; height: 34px; border-radius: 20%; overflow: hidden; background: #16264a; box-shadow: var(--schatten-knopf); flex: none; }
.marke-zeichen svg { display: block; width: 100%; height: 100%; }
.marke-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; }
.marke-name small { display: block; font-family: var(--schrift); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--kante); font-weight: 650; margin-top: -2px; }
.vtc-knopf {
  display: flex; align-items: center; gap: 10px; margin: 0 2px var(--ab3); padding: 10px 12px; border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, var(--tonhauch2), transparent 60%) padding-box, var(--glanzkante-gold) border-box; border: 1px solid transparent;
  color: var(--text); font-weight: 680; font-size: .9rem; text-decoration: none; box-shadow: var(--schatten-klein);
}
.vtc-knopf .i { color: var(--text-gold); }
.vtc-knopf:hover { text-decoration: none; filter: brightness(1.08); }
.nav { flex: 1; overflow: auto; scrollbar-width: thin; padding-right: 2px; margin-right: -4px; }
.nav-gruppe { margin-top: var(--ab2); }
.nav-gruppe > button { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: none; padding: 8px 10px 4px; color: var(--kante); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 720; }
.nav-gruppe > button .i-k { transition: transform var(--flott); }
.nav-gruppe[data-zu="1"] > button .i-k { transform: rotate(-90deg); }
.nav-gruppe[data-zu="1"] .nav-zeilen { display: none; }
.nav a { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: 10px; color: var(--matt); font-size: .9rem; font-weight: 580; text-decoration: none; position: relative; }
.nav a:hover { color: var(--text); background: var(--karte); }
.nav a[aria-current="page"] { color: var(--text); background: linear-gradient(90deg, var(--tonhauch2), transparent); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-verlauf); }
.nav a[aria-current="page"] .i { color: var(--text-gold); }
.zahlpunkt { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rost); color: #fff; font-size: .68rem; font-weight: 760; display: grid; place-items: center; }
.leiste-fuss { border-top: 1px solid var(--rand); padding-top: var(--ab2); margin-top: var(--ab2); }
.leiste-fuss .profil { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.leiste-fuss .profil b { display: block; font-size: .88rem; }
.leiste-fuss .profil span { font-size: .72rem; color: var(--kante); }

.hauptbereich { min-width: 0; display: flex; flex-direction: column; }
.kopf {
  position: sticky; top: 0; z-index: 40; height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: var(--ab3); padding: 0 var(--ab5);
  background: var(--glas); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--rand);
}
.kopf .platz-flex { flex: 1; }
.kopf .spielstatus { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--rd-voll); border: 1px solid var(--rand); background: var(--karte); font-size: .8rem; font-weight: 620; color: var(--matt); white-space: nowrap; }
.kopf .spielstatus .live { font-size: .8rem; }
.kopf .knopf.rund { position: relative; }
.kopf .knopf.rund .zahlpunkt { position: absolute; top: -4px; right: -4px; margin: 0; min-width: 18px; height: 18px; font-size: .62rem; }
.kopf .marke-mobil { display: none; }
.inhalt { flex: 1; padding: var(--ab5) var(--ab5) var(--ab5); min-width: 0; }
.seitenkopf { display: flex; align-items: flex-end; gap: var(--ab4); margin-bottom: var(--ab4); }
.seitenkopf .titel { flex: 1; min-width: 0; }
.seitenkopf .pfad { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kante); font-weight: 680; margin-bottom: 4px; }
.seitenkopf .pfad b { color: var(--text-gold); font-weight: 680; }
.seitenkopf p { color: var(--matt); margin-top: 4px; font-size: .92rem; }
.unten { display: none; }

/* tablet: icon rail */
@media (max-width: 1100px) and (min-width: 701px) {
  .rahmen { grid-template-columns: var(--leiste-schmal) minmax(0, 1fr); }
  .leiste { padding: var(--ab3) 10px; align-items: center; }
  .leiste .marke { padding: 6px 0 14px; }
  .leiste .marke-name, .nav-gruppe > button, .nav a span, .leiste-fuss .profil div, .vtc-knopf span, .nav .zahlpunkt { display: none; }
  .vtc-knopf { width: 52px; height: 52px; padding: 0; justify-content: center; margin: 0 0 var(--ab2); }
  .nav { margin: 0; padding: 0; overflow: visible; }
  .nav .nav-zeilen.voll { display: none; }
  .nav .nav-symbole { display: flex !important; flex-direction: column; gap: 4px; }
  .nav a { width: 52px; height: 48px; justify-content: center; padding: 0; }
  .nav a[aria-current="page"]::before { left: -10px; }
  .inhalt { padding: var(--ab4); }
  .kopf { padding: 0 var(--ab4); }
}
.nav-symbole { display: none !important; }
.nav-symbole a { flex-direction: column; gap: 2px; }
.nav-symbole a small { font-size: .58rem; font-weight: 650; letter-spacing: .02em; }

/* phone: bottom bar */
@media (max-width: 700px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .leiste { display: none; }
  .kopf { padding: 0 var(--ab3); gap: var(--ab2); height: 58px; }
  .kopf .marke-mobil { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
  .kopf .marke-mobil .marke-zeichen { width: 30px; height: 30px; border-radius: 20%; }
  .kopf .suchfeld { width: 44px; padding: 0; justify-content: center; border-radius: var(--rd-voll); }
  .kopf .suchfeld .platz, .kopf .suchfeld .taste, .kopf .spielstatus { display: none; }
  .inhalt { padding: var(--ab3) var(--ab3) calc(var(--unten-hoehe) + var(--ab4) + var(--sicher-unten)); }
  .seitenkopf { margin-bottom: var(--ab3); }
  .unten {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--unten-hoehe) + var(--sicher-unten)); padding-bottom: var(--sicher-unten);
    background: var(--glas); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--rand);
  }
  .unten a, .unten button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--kante); font-size: .66rem; font-weight: 650; text-decoration: none; border: 0; background: none; position: relative; }
  .unten .i { width: 22px; height: 22px; }
  .unten [aria-current="page"] { color: var(--text-gold); }
  .unten [aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 2px; border-radius: 0 0 2px 2px; background: var(--gold-verlauf); }
  .unten .zahlpunkt { position: absolute; top: 6px; left: 54%; margin: 0; min-width: 17px; height: 17px; font-size: .6rem; }
}

/* ── „Mehr" sheet content: grouped nav ───────────────────────────────── */
.mehr-gruppen { display: grid; gap: var(--ab4); }
.mehr-gruppen .aufschrift { margin-bottom: 6px; }
.mehr-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab2); }
.mehr-gitter a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 74px; padding: 8px 4px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--rand); color: var(--text); font-size: .74rem; font-weight: 620; text-decoration: none; }
.mehr-gitter a .i { color: var(--text-gold); }

/* ── Quick search palette (Ctrl+K, also phone) ───────────────────────── */
.palette { position: fixed; z-index: 70; top: 12vh; left: 50%; width: min(640px, calc(100vw - 24px)); transform: translate(-50%, -8px) scale(.98); opacity: 0; pointer-events: none; transition: opacity var(--flott), transform var(--ruhig) var(--kurve);
  border-radius: var(--rd-g); background: var(--karte-verlauf) padding-box, var(--glanzkante-gold) border-box; border: 1px solid transparent; box-shadow: var(--schatten-hoch); overflow: hidden; }
.palette.offen { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.palette .feld { border-radius: 0; border: 0; border-bottom: 1px solid var(--rand); height: 58px; background: transparent; box-shadow: none; padding: 0 18px; }
.palette .feld input { font-size: 1.05rem; }
.palette-treffer { max-height: 52vh; overflow: auto; padding: var(--ab2); }
.palette-treffer .aufschrift { padding: 10px 10px 4px; }
.palette-treffer a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .92rem; }
.palette-treffer a .i { color: var(--matt); }
.palette-treffer a small { margin-left: auto; color: var(--kante); font-size: .74rem; }
.palette-treffer a[aria-selected="true"] { background: var(--tonhauch2); }
.palette-treffer a[aria-selected="true"] .i { color: var(--text-gold); }
.palette-fuss { display: flex; gap: var(--ab4); padding: 10px 18px; border-top: 1px solid var(--rand); font-size: .74rem; color: var(--kante); }
@media (max-width: 700px) { .palette { top: 0; width: 100vw; height: 100vh; border-radius: 0; transform: translate(-50%, 0); } .palette-treffer { max-height: calc(100vh - 110px); } }
.mehr-reiter { width: 100%; }
.mehr-reiter button { flex: 1; padding: 0 8px; }
.mehr-gitter a { position: relative; }
.mehr-gitter .zahlpunkt { position: absolute; top: 6px; right: 8px; margin: 0; }

/* ═══ v3: ds/seiten.css ═══ */
/* ==========================================================================
   Dispolotse · Design system v3 „Luxus" · ds/seiten.css
   Page layouts of the showcase pages (cockpit, drive, list, homepage,
   design system). Components live in komponenten.css.
   ========================================================================== */

/* ── shared page background: a warm glow, very quiet ─────────────────── */
body { background: radial-gradient(1200px 600px at 100% -200px, var(--tonhauch), transparent 70%) no-repeat, var(--grund); }
.nur-pc { }
@media (max-width: 700px) { .nur-pc { display: none !important; } }
.kopf-aktionen { flex: none; }

/* ==========================================================================
   02 · Cockpit — one screen, no scroll on PC/tablet
   ========================================================================== */
.cockpit-gitter {
  display: grid; gap: var(--ab3);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "f f f f f f f f k k k k"
    "a a a a l l l l l w w w";
}
.c-fahrt { grid-area: f; } .c-konten { grid-area: k; } .c-aufgaben { grid-area: a; } .c-frachten { grid-area: l; } .c-woche { grid-area: w; }
.c-fahrt { padding: var(--ab4) var(--ab5); }
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--ab4); margin: 2px 0 6px; }
.route .stadt { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; font-weight: 540; letter-spacing: -.02em; }
.route .ziel { text-align: right; }
.route-linie { display: flex; align-items: center; gap: 10px; color: var(--text-gold); padding-bottom: 10px; }
.route-linie span { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--naht) 0 6px, transparent 6px 11px); }
.route-linie span:first-child { background: var(--gold-linie); }
.fracht-zeile { display: flex; align-items: center; gap: 8px; color: var(--matt); font-size: .9rem; }
.fortschritt { margin: var(--ab3) 0 var(--ab3); }
.fortschritt-zahlen { display: flex; justify-content: space-between; margin-top: 6px; font-size: .82rem; color: var(--matt); }
.fortschritt-zahlen b { color: var(--text); font-size: 1rem; }
.ringe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ab3); padding: var(--ab3) 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.ring-box { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ring-box .ring { width: 54px; height: 54px; flex: none; }
.ring-box .zahl { font-size: 1.3rem; line-height: 1.15; }
.ring-box .zahl.gross { font-size: 1.45rem; }
.ring-box p { white-space: nowrap; }
.hinweis { display: flex; align-items: center; gap: 8px; margin-top: var(--ab3); font-size: .88rem; color: var(--text); }
.hinweis .i-k { color: var(--text-gold); }
.c-fahrt.ohne-fahrt { display: grid; place-items: center; }

.konto-gross { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.konto-gross:hover { text-decoration: none; }
.konto-gross .betrag { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 540; letter-spacing: -.025em; line-height: 1.1; margin: 2px 0; font-variant-numeric: lining-nums tabular-nums; }
.konto-gross .betrag small { font-size: .5em; color: var(--matt); font-weight: 500; letter-spacing: 0; }
.spur-gross { width: 100%; height: 54px; margin: var(--ab3) 0; }
.stop-a { stop-color: var(--ton); stop-opacity: .32; } .stop-b { stop-color: var(--ton); stop-opacity: 0; }
.flaeche-pfad { fill: url(#fl); } .linie-pfad { fill: none; stroke: var(--ton); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.konten-klein { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab2); }
.konten-klein a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--mulde); border: 1px solid var(--rand); color: var(--text); text-decoration: none; }
.konten-klein a:hover { border-color: var(--ton); }
.konten-klein .zahl { font-size: 1.12rem; }

.aufgaben, .frachten { list-style: none; margin: 0; padding: 0; }
.aufgaben li + li, .frachten li + li { border-top: 1px solid var(--rand); }
.aufgaben a { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--text); text-decoration: none; }
.aufgaben a > .i { color: var(--matt); }
.aufgaben a > span:nth-child(2) { flex: 1; min-width: 0; }
.aufgaben b { display: block; font-weight: 620; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aufgaben small { color: var(--matt); font-size: .76rem; }
.frachten li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--ab3); padding: 9px 0; }
.frachten b { display: block; font-weight: 640; font-size: .94rem; }
.frachten small { color: var(--matt); font-size: .76rem; }
.frachten .geld { font-size: 1.1rem; font-weight: 600; color: var(--text-gold); }

.woche-zahlen { display: flex; gap: var(--ab4); }
.woche-zahlen .zahl { font-size: 1.6rem; }
.woche-zahlen small { margin-left: 4px; color: var(--matt); font-size: .78rem; }
.balken { width: 100%; height: 76px; margin-top: var(--ab2); }
.balken rect { fill: var(--naht); }
.balken rect.heute { fill: var(--ton); }
.balken rect.leer-balken { fill: var(--schiene); }
.tage { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-top: 4px; }

@media (max-width: 1100px) {
  .cockpit-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "f f" "k w" "a l"; }
  .c-frachten .frachten li { grid-template-columns: 1fr auto; }
  .c-frachten .frachten .knopf { grid-column: 1 / -1; display: none; }
}
@media (max-width: 700px) {
  .cockpit-gitter { grid-template-columns: minmax(0, 1fr); grid-template-areas: "f" "k" "a" "l" "w"; gap: var(--ab2); }
  .seitenkopf { align-items: center; }
  .seitenkopf .t-titel { font-size: 1.55rem; }
  .c-fahrt { padding: var(--ab3) var(--ab4); }
  .route .stadt { font-size: 1.55rem; }
  .ringe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ab3); }
  .ring-box .ring { width: 44px; height: 44px; }
  .hinweis { font-size: .82rem; }
  .karte { padding: var(--ab3) var(--ab4); border-radius: 18px; }
  .kopf-aktionen .knopf.haupt span { display: none; }
  .kopf-aktionen .knopf.haupt { width: var(--ziel-min); padding: 0; }
}

/* ── cockpit: fit 1440×900 / 1366×768 without scrolling ──────────────── */
@media (min-width: 1101px) {
  .cockpit-seite .inhalt { padding-top: var(--ab4); padding-bottom: var(--ab4); }
  .cockpit-seite .seitenkopf { margin-bottom: var(--ab3); align-items: center; }
  .cockpit-gitter .karte-kopf { margin-bottom: var(--ab2); }
  .c-aufgaben .aufgaben a { padding: 6px 0; }
  .c-frachten .frachten li { padding: 7px 0; }
  .c-fahrt .ringe { padding: 10px 0; }
}
@media (min-width: 1101px) and (max-height: 820px) {
  .cockpit-seite .route .stadt { font-size: 2rem; }
  .cockpit-seite .c-aufgaben li:nth-child(4) { display: none; }
}
/* phone: grid children must be allowed to shrink */
.cockpit-gitter > * { min-width: 0; }
@media (max-width: 700px) {
  .route { gap: var(--ab2); }
  .route-linie { padding-bottom: 6px; }
  .fracht-zeile { flex-wrap: wrap; font-size: .82rem; }
  .karte-kopf .live { display: none; }
  .ring-box p { white-space: normal; }
}
.balken { height: auto; max-height: 120px; }
.tag-text text { fill: var(--kante); font-size: 9px; font-weight: 600; text-anchor: middle; font-family: var(--schrift); }
@media (max-width: 1100px) and (min-width: 701px) {
  .c-aufgaben li:nth-child(4) { display: none; }
  .vtc-knopf { width: 48px; height: 44px; }
}

/* ==========================================================================
   03 · Fahrt — tiles chosen by the driver
   ========================================================================== */
.pfeil-gold { color: var(--text-gold); font-weight: 400; }
.fahrt-seite .inhalt { padding-top: var(--ab4); padding-bottom: var(--ab4); }
.fahrt-seite .seitenkopf { align-items: center; margin-bottom: var(--ab3); }
.stand { display: inline-flex; align-items: center; gap: 8px; margin-right: var(--ab2); }
.reiter-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--ab3); margin-bottom: var(--ab3); }
.kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 200px; grid-auto-flow: row dense; gap: var(--ab3); }
.kachel { display: flex; flex-direction: column; padding: var(--ab3) var(--ab4) var(--ab4); overflow: hidden; }
.kachel.b2 { grid-column: span 2; } .kachel.h2 { grid-row: span 2; }
.k-kopf { display: flex; align-items: center; gap: 8px; color: var(--text-gold); margin-bottom: var(--ab2); }
.k-kopf .aufschrift { flex: 1; }
.k-kopf .chip, .k-kopf .zahlpunkt { margin-left: auto; }
.k-zahl { font-size: clamp(2rem, 2.6vw, 2.6rem); font-weight: 540; line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: lining-nums tabular-nums; }
.k-zahl small { font-family: var(--schrift); font-size: .9rem; color: var(--matt); font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.k-ziel { font-size: 1.35rem; font-weight: 560; line-height: 1.15; }
.k-fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: var(--ab2); }
.kachel meter { margin-top: var(--ab3); }
.k-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab3); margin-top: auto; }
.k-tempo { position: relative; display: grid; place-items: center; flex: 1; }
.tacho { position: absolute; inset: 0; width: 100%; height: 100%; }
.tacho-spur { fill: none; stroke: var(--schiene); stroke-width: 8; stroke-linecap: round; }
.tacho-wert { fill: none; stroke: var(--achtung); stroke-width: 8; stroke-linecap: round; }
.k-tempo .k-zahl { position: relative; margin-top: 26px; }
.schild { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #d33a3f; background: #fff; color: #111; display: grid; place-items: center; font-weight: 800; font-size: .74rem; }
.k-teile { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: var(--ab2) 0 0; font-size: .8rem; }
.k-teile div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--rand); padding-bottom: 2px; }
.k-teile dt { color: var(--matt); } .k-teile dd { margin: 0; font-weight: 650; }
.k-funk { list-style: none; margin: 0; padding: 0; font-size: .82rem; display: grid; gap: 6px; }
.k-funk b { display: block; font-size: .74rem; color: var(--text-gold); }
.minikarte { flex: 1; width: 100%; min-height: 0; border-radius: 14px; border: 1px solid var(--rand); }
.mk-wasser { fill: var(--karte-wasser); } .mk-land { fill: var(--karte-land); fill-rule: evenodd; }
.mk-fluss { fill: none; stroke: var(--karte-wasser); stroke-width: 6; }
.mk-strasse { fill: none; stroke: var(--karte-strasse); stroke-width: 2; }
.mk-route-alt { fill: none; stroke: var(--ton); stroke-width: 4; stroke-linecap: round; opacity: .35; }
.mk-route { fill: none; stroke: var(--ton); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 8; }
.mk-ich { fill: var(--ton); stroke: var(--karte); stroke-width: 3; }
.mk-halo { fill: var(--ton); opacity: .18; }
.mk-ziel { fill: var(--karte); stroke: var(--text); stroke-width: 3; }
.mk-text text { fill: var(--matt); font: 600 12px var(--schrift); }
.kachel-leer { grid-column: 1 / -1; grid-row: span 2; }

/* the „Anpassen" list */
.anpassen-liste { list-style: none; margin: 0; padding: 0; }
.anpassen-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.anpassen-zeile .griff { color: var(--kante); cursor: grab; }
.anpassen-zeile .text { flex: 1; min-width: 0; }
.anpassen-zeile .text b { display: block; font-weight: 640; font-size: .92rem; }
.anpassen-zeile .text small { color: var(--matt); font-size: .72rem; }
.anpassen-zeile.ist-aus .text b { color: var(--matt); }
.anpassen-zeile.ist-aus .klein-siegel { filter: grayscale(1); opacity: .5; }
.klein-siegel { width: 30px; height: 30px; border-radius: 9px; }
.pfeile { display: flex; gap: 4px; }
.pfeile .knopf.rund.klein { width: 30px; min-height: 30px; }

/* cockpit mode — forced dark, no nav, big numbers */
.im-cockpit .rahmen, .im-cockpit .unten { display: none; }
.cockpit-modus { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; gap: var(--ab3); padding: calc(var(--ab4) + var(--sicher-oben)) var(--ab5) calc(var(--ab4) + var(--sicher-unten));
  background: radial-gradient(900px 500px at 50% -10%, var(--tonhauch2), transparent 70%), var(--grund); }
.cm-kopf { display: flex; align-items: center; gap: var(--ab4); }
.cm-route { flex: 1; font-size: 1.6rem; font-weight: 560; }
.cm-gitter { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: var(--ab3); min-height: 0; }
.cm-kachel { display: flex; flex-direction: column; justify-content: space-between; padding: var(--ab4) var(--ab5); border-radius: var(--rd-g);
  background: var(--karte-verlauf) padding-box, var(--glanzkante) border-box; border: 1px solid transparent; box-shadow: var(--schatten); }
.cm-kachel .aufschrift { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-gold); }
.cm-zahl { font-size: clamp(3.2rem, 9vh, 6.4rem); font-weight: 520; line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.cm-zahl small { font-family: var(--schrift); font-size: .26em; color: var(--matt); margin-left: 6px; font-weight: 650; letter-spacing: 0; }
.cm-zahl.gelb { color: var(--achtung); } .cm-zahl.gut { color: var(--frei); }
.cm-fuss { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; padding: 14px 18px; border-radius: 16px; background: var(--tonhauch); border: 1px solid var(--tonhauch2); }
.cm-fuss .i { color: var(--text-gold); }

@media (max-width: 1100px) {
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 182px; }
  .kachel-zahl { display: none; }
}
@media (max-width: 700px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 158px; gap: var(--ab2); }
  .kachel { padding: var(--ab3); }
  .kachel.h2 { grid-row: span 1; }
  .k-zahl { font-size: 1.9rem; }
  .k-teile { font-size: .72rem; gap: 2px 8px; }
  .fahrt-seite .kopf-aktionen .knopf span { display: none; }
  .fahrt-seite .kopf-aktionen .knopf { width: var(--ziel-min); padding: 0; }
  .fahrt-seite .seitenkopf .t-titel { font-size: 1.5rem; }
  .cockpit-modus { padding: var(--ab3); }
  .cm-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); }
  .cm-zahl { font-size: 3rem; }
}
@media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) { .cm-zahl { font-size: clamp(3rem, 13vh, 6.4rem); } }
/* tempo: number sits in the bowl of the arc */
.k-tempo { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1; position: static; }
.k-tempo .tacho { position: static; width: 150px; height: 88px; }
.k-tempo .k-zahl { margin-top: -50px; }
@media (max-width: 700px) { .k-tempo .tacho { width: 110px; height: 64px; } .k-tempo .k-zahl { margin-top: -36px; } }

/* ==========================================================================
   04 · List page template
   ========================================================================== */
.liste-seite .inhalt { padding-top: var(--ab4); padding-bottom: var(--ab4); display: flex; flex-direction: column; gap: var(--ab3); }
.liste-seite .seitenkopf { margin-bottom: 0; align-items: center; }
.liste-seite .kpi-reihe .kpi .wert { font-size: 1.75rem; }
.werkzeug { display: flex; align-items: center; gap: var(--ab3); flex-wrap: wrap; }
.liste-suche { flex: 1; min-width: 200px; height: 46px; }
.filterreihe { display: flex; align-items: center; gap: var(--ab2); }
.sortieren select { height: 34px; border-radius: var(--rd-voll); border: 1px solid var(--rand); background: var(--karte); color: var(--text); padding: 0 12px; font-size: .84rem; font-weight: 620; }
.fracht-raster { --spalten: minmax(0, 2.2fr) minmax(0, 1.6fr) 90px 110px minmax(150px, 1fr); }
.lohn-zelle { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.lohn-zelle .geld { font-size: 1.08rem; color: var(--text-gold); min-width: 86px; text-align: right; }
.zeile b.duenn { font-weight: 560; }
.d-lohn { font-size: 2.4rem; font-weight: 540; letter-spacing: -.02em; color: var(--text-gold); margin-top: var(--ab4); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 1100px) {
  .fracht-raster { --spalten: minmax(0, 2fr) minmax(0, 1.4fr) minmax(130px, 1fr); }
  .fracht-raster .nur-breit { display: none; }
  .werkzeug .reiter { order: 0; } .liste-suche { order: 2; flex-basis: 100%; } .filterreihe { order: 1; margin-left: auto; }
}
@media (max-width: 700px) {
  .liste-seite .inhalt { gap: var(--ab2); }
  .liste-seite .kpi-reihe { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--ab3)); padding: 2px var(--ab3) 6px; }
  .liste-seite .kpi-reihe::-webkit-scrollbar { display: none; }
  .liste-seite .kpi { flex: 0 0 42%; padding: 10px 12px; }
  .liste-seite .kpi .neben { display: none; }
  .liste-seite .kpi-reihe .kpi .wert { font-size: 1.3rem; }
  .liste-seite .kopf-aktionen .knopf span { display: none; }
  .liste-seite .kopf-aktionen .knopf { width: var(--ziel-min); padding: 0; }
  .liste-seite .seitenkopf .t-titel { font-size: 1.5rem; }
  .werkzeug { gap: var(--ab2); }
  .werkzeug .reiter { flex: 1 1 100%; }
  .filterreihe { margin-left: 0; display: none; }
  .liste-suche { height: 42px; }
  .fracht-raster { --spalten: minmax(0, 1fr) auto; min-height: 62px; padding: 0 var(--ab3); }
  .fracht-raster > :nth-child(2) { display: none; }
  .zeile.kopfzeile.fracht-raster { display: none; }
  .lohn-zelle .chip.spiel { display: none; }
  .blaettern .seiten button { min-width: 34px; height: 34px; }
}
/* tablet: keep the drive head on one line and all tiles on one screen */
@media (max-width: 1100px) and (min-width: 701px) {
  .fahrt-seite .stand { display: none; }
  .fahrt-seite .pfad { white-space: nowrap; }
  .kacheln { grid-auto-rows: 166px; }
  .k-tempo .tacho { width: 130px; height: 76px; }
  .k-tempo .k-zahl { margin-top: -44px; }
}

/* ═══ v3: ds/szenen.css ═══ */
/* Dispolotse · scene set v3 „Nacht-Gold-Isometrie" · szenen.css
   ONE stylesheet for every scene SVG (HP, login area; the app maps the same names in its Farbwelt).
   Every colour comes from an existing --bild-* token (values: bild_tokens_v3.css, or the design system's tokens.css).
   CSP: no inline style anywhere — the SVGs only carry classes. Motion only here, off with prefers-reduced-motion. */

.sz-bild { display: block; width: 100%; height: auto; overflow: visible; }

/* ── pedestal + materials ─────────────────────────────────────────── */
.sz-boden { fill: var(--bild-kasten-dunkel); }
.sz-boden-l { fill: var(--bild-stange); }
.sz-boden-r { fill: var(--bild-reifen-tief); }
.sz-dach { fill: var(--bild-stahl); }
.sz-dach-hell { fill: var(--bild-hallendach); }
.sz-wand-l { fill: var(--bild-rahmen-hell); }
.sz-wand-r { fill: var(--bild-rahmen); }
.sz-stein { fill: var(--bild-tuer); }
.sz-zier-wand { fill: var(--bild-zier); }
.sz-glas { fill: var(--bild-fenster); }
.sz-glas-hell { fill: var(--bild-scheibe); fill-opacity: .35; }
.sz-glasfront { fill: var(--bild-fenster); fill-opacity: .82; stroke: var(--bild-leuchte); stroke-opacity: .35; stroke-width: .6; }
.sz-scheibe { fill: var(--bild-scheibe); fill-opacity: .5; }
.sz-tuer { fill: var(--bild-holz); }
.sz-tor { fill: var(--bild-stahl); }
.sz-dock { fill: var(--bild-stange); }
.sz-holz { fill: var(--bild-holz); }
.sz-holz-top { fill: var(--bild-brett); }
.sz-erde { fill: var(--bild-erde); }
.sz-erde-top { fill: var(--bild-haufen); }
.sz-rasen { fill: var(--bild-erde-gruen); }
.sz-hecke { fill: var(--bild-lack-gruen); }
.sz-krone { fill: var(--bild-lack-gruen); }
.sz-wasser { fill: var(--bild-plane-blau); }
.sz-container { fill: var(--bild-lack-see); }
.sz-container-2 { fill: var(--bild-lack-stahlblau); }
.sz-zapf { fill: var(--bild-lack-grau); }
.sz-buerste { fill: var(--bild-lack-blau); }
.sz-grundierung { fill: var(--bild-roh); }
.sz-schild { fill: var(--bild-rahmen-hell); }
.sz-kissen { fill: var(--bild-lack-rot); }
.sz-teppich { fill: var(--bild-lack-blau); }
.sz-brief { fill: var(--bild-zier); }
.sz-strasse { fill: var(--bild-stange); }

/* vehicles (generic own shape) */
.sz-rahmen { fill: var(--bild-reifen); }
.sz-reifen { fill: var(--bild-reifen); }
.sz-chrom { fill: var(--bild-chrom); }
.sz-stahl { fill: var(--bild-stahl); }
.sz-plane { fill: var(--bild-plane-grau); }
.sz-plane-2 { fill: var(--bild-plane-blau); }
.sz-plane-top { fill: var(--bild-plane-hell); }
.sz-lack-1 { fill: var(--bild-lack-rot); }
.sz-lack-2 { fill: var(--bild-lack-blau); }
.sz-lack-3 { fill: var(--bild-lack-gruen); }
.sz-lack-4 { fill: var(--bild-lack-weiss); }
.sz-lack-5 { fill: var(--bild-lack-gelb); }
.sz-helm { fill: var(--bild-helm); }

/* shade helpers: the third face of a box */
.sz-dunkler { filter: brightness(.68); }
.sz-heller { filter: brightness(1.22); }

/* ── light: the one gold accent per scene ─────────────────────────── */
.sz-licht { fill: var(--bild-leuchte); }
.sz-licht-warm { fill: var(--bild-licht-warm); }
.sz-licht-rot { fill: var(--bild-licht-rot); }
.sz-dim { fill-opacity: .55; }
.sz-glow, .sz-halo { mix-blend-mode: screen; }
.sz-goldlinie-f { fill: var(--bild-leuchte); }
.sz-siegel { fill: var(--bild-leuchte); stroke: var(--bild-funke); stroke-width: 1; }
.sz-pfuetze { fill: var(--bild-licht-warm); fill-opacity: .18; }

/* ── lines ────────────────────────────────────────────────────────── */
.sz-kante, .sz-goldkante, .sz-mast, .sz-lamelle, .sz-tor-rippe, .sz-dachrippe, .sz-markierung, .sz-licht-strich,
.sz-kran, .sz-seil, .sz-geruest, .sz-zaun, .sz-schranke, .sz-sprosse, .sz-gelaender, .sz-fuge, .sz-arm, .sz-stamm,
.sz-brieflinie, .sz-schwanz, .sz-randlicht, .sz-schnurrhaar, .sz-pfote, .sz-halsband, .sz-pin, .sz-schluessel {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.sz-kante { stroke: var(--bild-zier); stroke-opacity: .22; stroke-width: .7; }
.sz-goldkante { stroke: var(--bild-leuchte); stroke-opacity: .75; stroke-width: .8; }
.sz-zart { stroke-opacity: .32; }
.sz-mast { stroke: var(--bild-lampe); stroke-width: 1.2; }
.sz-lamelle { stroke: var(--bild-schatten); stroke-opacity: .35; stroke-width: .6; }
.sz-tor-rippe { stroke: var(--bild-schatten); stroke-opacity: .45; stroke-width: .7; }
.sz-dachrippe { stroke: var(--bild-schatten); stroke-opacity: .25; stroke-width: .6; }
.sz-markierung { stroke: var(--bild-leuchte); stroke-opacity: .55; stroke-width: .9; stroke-dasharray: 5 4; }
.sz-licht-strich { stroke: var(--bild-licht-warm); stroke-width: 1.4; }
.sz-licht-strich-f { fill: var(--bild-licht-warm); }
.sz-kran { stroke: var(--bild-baggerarm); stroke-width: 1.3; }
.sz-seil { stroke: var(--bild-zier); stroke-opacity: .5; stroke-width: .6; }
.sz-geruest { stroke: var(--bild-brett); stroke-opacity: .7; stroke-width: .8; }
.sz-zaun { stroke: var(--bild-stahl); stroke-width: .9; }
.sz-schranke { stroke: var(--bild-licht-rot); stroke-width: 1.6; stroke-dasharray: 4 3; }
.sz-sprosse { stroke: var(--bild-leuchte); stroke-opacity: .4; stroke-width: .6; }
.sz-gelaender { stroke: var(--bild-chrom); stroke-opacity: .7; stroke-width: .7; }
.sz-fuge { stroke: var(--bild-zier); stroke-opacity: .08; stroke-width: .6; }
.sz-arm { stroke: var(--bild-baggerarm); stroke-width: 2.2; }
.sz-stamm { stroke: var(--bild-holz); stroke-width: 2; }
.sz-buerste, .sz-zapf { stroke: none; }

/* figures: the pets */
.sz-fell { fill: var(--bild-reifen); }
.sz-fell-hund { fill: var(--bild-holz); }
.sz-ohr { fill: var(--bild-erde); }
.sz-schwanz { stroke: var(--bild-reifen); stroke-width: 4.5; }
.sz-schwanz-hund { stroke: var(--bild-holz); stroke-width: 5; }
.sz-randlicht { stroke: var(--bild-leuchte); stroke-opacity: .85; stroke-width: 1.1; }
.sz-auge { fill: var(--bild-leuchte); }
.sz-nase { fill: var(--bild-reifen-tief); }
.sz-schnurrhaar { stroke: var(--bild-zier); stroke-opacity: .55; stroke-width: .5; }
.sz-pfote { stroke: var(--bild-schatten); stroke-opacity: .5; stroke-width: .8; }
.sz-halsband { stroke: var(--bild-lack-rot); stroke-width: 2.4; }
.sz-pin { stroke: var(--bild-leuchte); stroke-width: 1.6; }
.sz-schluessel { stroke: var(--bild-leuchte); stroke-width: 1.8; }
.sz-brieflinie { stroke: var(--bild-schatten); stroke-opacity: .3; stroke-width: .8; }
.sz-schatten { fill: var(--bild-schatten); fill-opacity: .4; }

/* gradient stops */
.st-licht { stop-color: var(--bild-leuchte); }
.st-licht-warm { stop-color: var(--bild-licht-warm); }
.st-licht-rot { stop-color: var(--bild-licht-rot); }
.st-nacht { stop-color: var(--bild-reifen-tief); }
.st-nacht2 { stop-color: var(--bild-fenster); }
.st-horizont { stop-color: var(--bild-rahmen); }

/* ── HP night panorama (stays a night picture in both themes: gold and black, Marco P32) ── */
.sz-panorama { height: 100%; }
.pano-sterne { fill: var(--bild-licht-warm); opacity: .7; }
.pano-mond { fill: var(--bild-licht-warm); }
.pano-fern { fill: var(--bild-stange); }
.pano-fenster { fill: var(--bild-leuchte); opacity: .75; }
.pano-goldnaht { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .55; stroke-width: 1.2; }
.pano-fluss { fill: var(--bild-reifen-tief); }
.pano-bruecke { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .7; stroke-width: 2; }
.pano-bruecke-seil { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .35; stroke-width: 1; }
.pano-spiegel { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .38; stroke-width: 2; stroke-linecap: round; }
.pano-huegel { fill: var(--bild-reifen); }
.pano-strasse { fill: var(--bild-reifen-tief); }
.pano-spur { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 220 140; }
.pano-leitplanke { fill: none; stroke: var(--bild-chrom); stroke-opacity: .25; stroke-width: 1; }
.pano-auflieger { fill: var(--bild-rahmen); stroke: var(--bild-leuchte); stroke-opacity: .25; stroke-width: 1; }
.pano-kabine { fill: var(--bild-lack-rot); }
.pano-scheibe { fill: var(--bild-licht-warm); fill-opacity: .35; }
.pano-rahmen { fill: var(--bild-reifen-tief); }
.pano-rad { fill: var(--bild-reifen-tief); stroke: var(--bild-chrom); stroke-opacity: .5; stroke-width: 1; }
.pano-nabe { fill: var(--bild-chrom); }
.pano-markerlicht { fill: none; stroke: var(--bild-leuchte); stroke-width: 2.4; stroke-linecap: round; }
.pano-scheinwerfer { fill: var(--bild-licht-warm); }
.pano-kegel { mix-blend-mode: screen; }
.pano-vorn { fill: var(--bild-reifen-tief); }
.pano-ebene { will-change: transform; }

/* ── calm motion (CSS only) ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .pano-spur-a { animation: sz-spur 9s linear infinite; }
  .pano-spur-b { animation: sz-spur 12s linear infinite reverse; }
  .pano-fenster rect:nth-child(5n) { animation: sz-funkeln 7s ease-in-out infinite; }
  .sz-halo { animation: sz-atmen 6s ease-in-out infinite; }
  .sz-fahrt-strasse { animation: sz-strasse 1.6s linear infinite; }
}
@keyframes sz-spur { to { stroke-dashoffset: -720; } }
@keyframes sz-funkeln { 50% { opacity: .25; } }
@keyframes sz-atmen { 50% { opacity: .6; } }
@keyframes sz-strasse { to { stroke-dashoffset: -18; } }

/* ── depth, figures, stages (added 11:3x) ─────────────────────────── */
.sz-ao { pointer-events: none; }
.st-zier { stop-color: var(--bild-zier); }
.st-schatten { stop-color: var(--bild-schatten); }
.sz-person-koerper { fill: var(--bild-reifen); }
.sz-person-rand { fill: none; stroke: var(--bild-leuchte); stroke-width: .35; stroke-linecap: round; }
.sz-randlinie { fill: none; stroke: var(--bild-zier); stroke-opacity: .35; stroke-width: .8; }
.sz-leitplanke { fill: none; stroke: var(--bild-chrom); stroke-opacity: .55; stroke-width: 1; }
.sz-lampe { fill: var(--bild-lampe); stroke: var(--bild-leuchte); stroke-width: .6; }
.sz-funken { fill: none; stroke: var(--bild-funke); stroke-width: 1; stroke-linecap: round; }
.sz-haufen { fill: var(--bild-haufen); }
.sz-roh { fill: var(--bild-roh); }
@media (prefers-reduced-motion: no-preference) { .sz-funken { animation: sz-atmen 1.2s steps(2) infinite; } }
.pano-fernhuegel { fill: var(--bild-rahmen); opacity: .55; }
.pano-kante { fill: none; stroke: var(--bild-licht-warm); stroke-opacity: .4; stroke-width: 1; }
.pano-spoiler { fill: var(--bild-lack-rot); filter: brightness(.7); }
.pano-chrom { fill: var(--bild-chrom); }

/* ── v2 „Veredelung" (07.10.): light, material, figures — additive, v1 SVGs still render ── */
.sz-bodenschatten { fill: var(--bild-schatten); fill-opacity: .55; }
.sz-spot, .sz-kegel, .sz-wasch, .sz-bloom { pointer-events: none; }
.sz-kegel, .sz-wasch, .sz-bloom { mix-blend-mode: screen; }
.sz-bloom { opacity: .85; }
.sz-kegel-kuehl { fill: var(--bild-scheibe); fill-opacity: .14; mix-blend-mode: screen; }
.sz-innen { stroke: none; }
.sz-regal { fill: none; stroke: var(--bild-schatten); stroke-opacity: .45; stroke-width: .9; stroke-linecap: round; }
.sz-schildglas { fill: var(--bild-reifen-tief); fill-opacity: .92; }
.sz-schirm { fill: var(--bild-licht-warm); fill-opacity: .8; }
.sz-luefter { fill: var(--bild-reifen); stroke: var(--bild-chrom); stroke-opacity: .35; stroke-width: .5; }
.sz-oberlicht { fill: var(--bild-licht-warm); fill-opacity: .45; }
.sz-attika { fill: none; stroke: var(--bild-zier); stroke-opacity: .3; stroke-width: .9; }
.sz-dichtung { fill: var(--bild-reifen-tief); }
.sz-ampel-gruen { fill: var(--bild-lack-see); filter: brightness(1.8); }
.sz-bake { fill: var(--bild-lack-orange); filter: brightness(1.5); }
.sz-bake-halo { fill: var(--bild-lack-orange); fill-opacity: .22; mix-blend-mode: screen; }
.sz-dunst { fill: var(--bild-licht-warm); fill-opacity: .16; mix-blend-mode: screen; }
.sz-dunst-kuehl { fill: var(--bild-scheibe); fill-opacity: .16; mix-blend-mode: screen; }
.sz-dunst-staub { fill: var(--bild-haufen); fill-opacity: .4; }
.sz-kontakt { fill: var(--bild-schatten); fill-opacity: .45; }
.sz-hose { fill: var(--bild-reifen); }
.sz-stiefel { fill: var(--bild-reifen-tief); }
.sz-jacke { fill: var(--bild-jacke); } .sz-jacke-a { stroke: var(--bild-jacke); }
.sz-overall { fill: var(--bild-overall); } .sz-overall-a { stroke: var(--bild-overall); }
.sz-jacke-bau { fill: var(--bild-jacke-bau); } .sz-jacke-bau-a { stroke: var(--bild-jacke-bau); }
.sz-jacke-buero { fill: var(--bild-jacke-buero); } .sz-jacke-buero-a { stroke: var(--bild-jacke-buero); }
.sz-arme { fill: none; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.sz-weste { fill: var(--bild-weste); }
.sz-reflex { fill: none; stroke: var(--bild-licht-warm); stroke-width: .45; }
.sz-haut { fill: var(--bild-haut); }
.sz-muetze { fill: var(--bild-reifen-tief); }
.sz-schirm-kuehl { fill: var(--bild-scheibe); fill-opacity: .85; }
.sz-glanzstreif { fill: var(--bild-zier); fill-opacity: .03; }
.sz-spiegelung { fill: none; stroke-linecap: round; stroke: var(--bild-licht-warm); stroke-opacity: .28; stroke-width: 1.4; }
.sz-kette { fill: none; stroke: var(--bild-reifen-tief); stroke-width: 1.4; stroke-dasharray: .8 .6; }
.sz-gabel { fill: none; stroke: var(--bild-chrom); stroke-width: 1; stroke-linecap: round; }
.sz-ware { fill: var(--bild-brett); }
.sz-ware-2 { fill: var(--bild-plane-blau); }
.sz-ware-3 { fill: var(--bild-plane-hell); }
.sz-folie { fill: var(--bild-zier); fill-opacity: .14; }
.sz-adblue { fill: var(--bild-lack-kobalt); }
@media (prefers-reduced-motion: no-preference) {
  .sz-bake { animation: sz-atmen 1.4s ease-in-out infinite; }
  .sz-bake-halo { animation: sz-atmen 1.4s ease-in-out infinite; }
  .pano-blink { animation: sz-blink 2.4s steps(2) infinite; }
  .pano-bokeh { animation: sz-atmen 9s ease-in-out infinite; }
}
@keyframes sz-blink { 50% { opacity: .15; } }
.sz-lack-orange { fill: var(--bild-lack-orange); }
.sz-tankschlauch { fill: none; stroke: var(--bild-reifen-tief); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sz-glasdach { fill: var(--bild-scheibe); fill-opacity: .07; }
.sz-traeger { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .35; stroke-width: .7; }
/* panorama v2 */
.pano-milch { fill: var(--bild-licht-warm); opacity: .03; }
.pano-sterne-gross { opacity: .95; }
.pano-wolke { fill: var(--bild-licht-warm); opacity: .1; }
.pano-berg3 { fill: var(--bild-rahmen); opacity: .45; }
.pano-berg2 { fill: var(--bild-stange); opacity: .8; }
.pano-nah { opacity: 1; }
.pano-maswerk { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .8; stroke-width: 2; stroke-linecap: round; }
.pano-zart { stroke-opacity: .35; }
.pano-turmkorb { fill: var(--bild-leuchte); opacity: .55; }
.pano-licht-rot { fill: var(--bild-licht-rot); }
.pano-kran { fill: none; stroke: var(--bild-rahmen-hell); stroke-width: 2; stroke-linejoin: round; }
.pano-dampf { fill: var(--bild-licht-warm); opacity: .1; }
.pano-spiegelung { fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.pano-breit { stroke: var(--bild-leuchte); stroke-width: 9; opacity: .32; }
.pano-gespiegelt { stroke-opacity: .16; }
.pano-brueckenlampen { fill: none; stroke: var(--bild-licht-warm); stroke-width: 3.4; stroke-linecap: round; }
.pano-baeume { fill: var(--bild-reifen-tief); }
.pano-mittellinie { fill: none; stroke: var(--bild-zier); stroke-opacity: .28; stroke-width: 1.2; stroke-dasharray: 18 22; }
.pano-spur-glow { stroke-width: 9; opacity: .55; }
.pano-reflektor { fill: none; stroke: var(--bild-leuchte); stroke-width: 2; stroke-linecap: round; opacity: .8; }
.pano-bodenglanz { fill: var(--bild-leuchte); opacity: .18; }
.pano-nassglanz { fill: none; stroke: var(--bild-licht-warm); stroke-width: 6; stroke-linecap: round; opacity: .35; }
.pano-scheinwerfer-glut { fill: var(--bild-licht-warm); opacity: .7; }
.pano-vignette { pointer-events: none; }
.pano-lkw { color: var(--bild-lack-rot); }
.pano-bokeh { mix-blend-mode: screen; }
.sz-panorama { overflow: hidden; }
.sz-fz-af { color: var(--bild-lack-grau); }
.sz-fz-zug { color: var(--bild-lack-rot); }
.pano-himmel { fill-opacity: 1; }
.sz-tank { fill: var(--bild-chrom); }
.sz-tankring { fill: none; stroke: var(--bild-stahl); stroke-opacity: .8; stroke-width: .7; }
.sz-kaefig { fill: none; stroke: var(--bild-stahl); stroke-width: .45; }
.sz-schacht { fill: var(--bild-reifen); stroke: var(--bild-leuchte); stroke-opacity: .7; stroke-width: .6; }
.sz-nass { fill: none; stroke: var(--bild-licht-warm); stroke-opacity: .28; stroke-width: 2.2; stroke-linecap: round; }
.sz-rueckspur { fill: none; stroke: var(--bild-licht-rot); stroke-opacity: .35; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 14 6; }
.sz-schildrand { fill: var(--bild-zier); fill-opacity: .25; }
.sz-lack-silber { fill: var(--bild-lack-silber); }
.sz-lack-grau { fill: var(--bild-lack-grau); }
.sz-nachtfenster { fill: var(--bild-scheibe); fill-opacity: .16; stroke: var(--bild-scheibe); stroke-opacity: .25; stroke-width: .4; }
.sz-nachthof { fill: var(--bild-reifen-tief); stroke: var(--bild-scheibe); stroke-opacity: .3; stroke-width: .6; }
.sz-lochwand { fill: var(--bild-rahmen-hell); }
.sz-werkzeug { fill: none; stroke: var(--bild-chrom); stroke-width: 1.1; stroke-linecap: round; }
.sz-schlauchrolle { fill: var(--bild-lack-1-fallback, var(--bild-lack-rot)); stroke: var(--bild-chrom); stroke-width: .8; }
.sz-griff { fill: none; stroke: var(--bild-leuchte); stroke-width: .6; stroke-linecap: round; }
.sz-funkenglut { fill: var(--bild-funke); fill-opacity: .25; mix-blend-mode: screen; }
.sz-spur { fill: none; stroke: var(--bild-schatten); stroke-opacity: .25; stroke-width: .8; stroke-dasharray: 1.4 1; }
.sz-arm-dick { fill: none; stroke: var(--bild-baggerarm); stroke-width: 3.4; stroke-linecap: round; }
.sz-schaufel { fill: var(--bild-stahl); stroke: var(--bild-baggerarm); stroke-width: .8; }
.sz-bewehrung { fill: none; stroke: var(--bild-lack-orange); stroke-opacity: .8; stroke-width: .6; }
.sz-gitter { fill: var(--bild-zier); fill-opacity: .05; stroke: var(--bild-zier); stroke-opacity: .25; stroke-width: .4; stroke-dasharray: 1 1.4; }
@media (prefers-reduced-motion: no-preference) { .sz-funkenglut { animation: sz-atmen 1.2s steps(2) infinite; } }
.sz-drehteller { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .55; stroke-width: .8; }
/* ── Paket 3 (07.10.) — generated by _quelle/bauen.py css_paket3(); edit there, not here ── */
/* vehicles from the set (3/4 view, <use>): paint = currentColor */
.sz-fz-rot { color: var(--bild-lack-rot); } .sz-fz-blau { color: var(--bild-lack-blau); } .sz-fz-gruen { color: var(--bild-lack-gruen); }
.sz-fz-weiss { color: var(--bild-lack-weiss); } .sz-fz-gelb { color: var(--bild-lack-gelb); } .sz-fz-grau { color: var(--bild-plane-grau); }
.sz-fz-blau2 { color: var(--bild-plane-blau); }
/* dealer tank yard: bays + waiting tank trailers (0–5, diesel / AdBlue) */
.sz-buchtlicht { fill: var(--bild-leuchte); }
.sz-schlauch-ab { stroke: var(--bild-lack-kobalt); }
.sz-tr-ab { display: none; }
.sz-tr-4 .sz-tr-di, .sz-tr-5 .sz-tr-di { display: none; }
.sz-tr-4 .sz-tr-ab, .sz-tr-5 .sz-tr-ab { display: inline; }
.tr1-di .sz-tr-1 .sz-tr-di, .tr1-ab .sz-tr-1 .sz-tr-ab { display: inline; }
.tr1-di .sz-tr-1 .sz-tr-ab, .tr1-ab .sz-tr-1 .sz-tr-di { display: none; }
.tr2-di .sz-tr-2 .sz-tr-di, .tr2-ab .sz-tr-2 .sz-tr-ab { display: inline; }
.tr2-di .sz-tr-2 .sz-tr-ab, .tr2-ab .sz-tr-2 .sz-tr-di { display: none; }
.tr3-di .sz-tr-3 .sz-tr-di, .tr3-ab .sz-tr-3 .sz-tr-ab { display: inline; }
.tr3-di .sz-tr-3 .sz-tr-ab, .tr3-ab .sz-tr-3 .sz-tr-di { display: none; }
.tr4-di .sz-tr-4 .sz-tr-di, .tr4-ab .sz-tr-4 .sz-tr-ab { display: inline; }
.tr4-di .sz-tr-4 .sz-tr-ab, .tr4-ab .sz-tr-4 .sz-tr-di { display: none; }
.tr5-di .sz-tr-5 .sz-tr-di, .tr5-ab .sz-tr-5 .sz-tr-ab { display: inline; }
.tr5-di .sz-tr-5 .sz-tr-ab, .tr5-ab .sz-tr-5 .sz-tr-di { display: none; }
.tr-0 .sz-tr-1, .tr-0 .sz-tr-2, .tr-0 .sz-tr-3, .tr-0 .sz-tr-4, .tr-0 .sz-tr-5 { display: none; }
.tr-1 .sz-tr-2, .tr-1 .sz-tr-3, .tr-1 .sz-tr-4, .tr-1 .sz-tr-5 { display: none; }
.tr-2 .sz-tr-3, .tr-2 .sz-tr-4, .tr-2 .sz-tr-5 { display: none; }
.tr-3 .sz-tr-4, .tr-3 .sz-tr-5 { display: none; }
.tr-4 .sz-tr-5 { display: none; }
/* construction sites v3 */
.sz-bordbrett { fill: none; stroke: var(--bild-lack-orange); stroke-width: .7; stroke-opacity: .85; }
.sz-leiter { fill: none; stroke: var(--bild-chrom); stroke-width: .6; }
.sz-netz { fill: var(--bild-lack-gruen); fill-opacity: .16; stroke: var(--bild-lack-gruen); stroke-opacity: .35; stroke-width: .3; stroke-dasharray: .8 .8; }
.sz-warnbrett { fill: var(--bild-lack-weiss); }
.sz-warnstreif-l { fill: none; stroke: var(--bild-lack-signalrot); stroke-width: 2.4; stroke-dasharray: 1.6 1.6; }
/* Leben interiors */
.sz-parkett { fill: var(--bild-holz); } .sz-dielenfuge { fill: none; stroke: var(--bild-schatten); stroke-opacity: .22; stroke-width: .35; }
.sz-innenwand { fill: var(--bild-rahmen-hell); } .sz-fussleiste { fill: none; stroke: var(--bild-zier); stroke-opacity: .55; stroke-width: .6; }
.sz-fliese { fill: var(--bild-platte); } .sz-voll { fill-opacity: .55; }
.sz-stadtlicht { fill: var(--bild-licht-warm); }
.sz-gemaelde { fill: var(--bild-kasten-dunkel); } .sz-gemaelde-motiv { fill: var(--bild-zier); fill-opacity: .45; }
.sz-polster { fill: var(--bild-lack-stahlblau); } .sz-polster-2 { fill: var(--bild-lack-see); } .sz-polster-hell { fill: var(--bild-plane-hell); }
.sz-kissen-akzent { fill: var(--bild-zier); }
.sz-teppich-2 { fill: var(--bild-lack-signalrot); fill-opacity: .7; }
.sz-schirmlampe { fill: var(--bild-licht-warm); fill-opacity: .8; }
.sz-topf { fill: var(--bild-tuer); }
.sz-regalfach { fill: var(--bild-licht-warm); fill-opacity: .22; }
.sz-buch { fill: var(--bild-lack-rot); } .sz-buch-2 { fill: var(--bild-lack-kobalt); } .sz-buch-3 { fill: var(--bild-zier); }
.sz-arbeitsplatte { fill: var(--bild-chrom); } .sz-kuechenfront { fill: var(--bild-rahmen); }
.sz-fugeinnen { fill: none; stroke: var(--bild-schatten); stroke-opacity: .45; stroke-width: .3; }
.sz-kochfeld { fill: var(--bild-reifen-tief); stroke: var(--bild-licht-rot); stroke-opacity: .6; stroke-width: .4; }
.sz-spuele { fill: var(--bild-stahl); }
.sz-rueckwand { fill: var(--bild-platte); fill-opacity: .55; }
.sz-laken { fill: var(--bild-plane-hell); } .sz-decke { fill: var(--bild-lack-kobalt); } .sz-decke-2 { fill: var(--bild-lack-gruen); }
.sz-schrankfront { fill: var(--bild-holz); }
.sz-schirm-tv { fill: var(--bild-reifen-tief); }
.sz-korb { fill: var(--bild-holz); } .sz-feuer { fill: var(--bild-funke); }
.sz-karton { fill: var(--bild-brett); } .sz-klebeband { fill: none; stroke: var(--bild-holz); stroke-width: .8; }
.sz-pflaster { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .35; stroke-width: .5; }
.sz-wallbox { fill: var(--bild-chrom); }
.sz-lack-2-strich, .sz-lack-3-strich, .sz-lack-silber-strich { fill: none; stroke: var(--bild-schatten); stroke-width: .6; }
.sz-mondglanz { fill: none; stroke: var(--bild-licht-warm); stroke-opacity: .5; stroke-width: 1; stroke-linecap: round; }
.sz-gluehwurm { fill: var(--bild-leuchte); }
.sz-ladenboden { fill: var(--bild-kasten-dunkel); } .sz-podest { fill: var(--bild-rahmen-hell); }
.sz-wagen { fill: none; stroke: var(--bild-chrom); stroke-width: .8; stroke-linejoin: round; }
/* showroom */
.sz-schaufloor { fill: var(--bild-kasten-dunkel); }
.sz-glas-zart { fill: var(--bild-scheibe); fill-opacity: .12; stroke: var(--bild-leuchte); stroke-opacity: .45; stroke-width: .6; }
.sz-drehteller-flaeche { fill: var(--bild-leuchte); fill-opacity: .1; }
/* ATS: desert at night */
.sz-wnacht { pointer-events: none; }
.sz-mesa-g { stroke: none; } .sz-mesa-nah { opacity: .85; }
.sz-mesa-rand { fill: none; stroke: var(--bild-licht-warm); stroke-opacity: .55; stroke-width: 1.2; }
.sz-kaktus { fill: var(--bild-erde-gruen); }
.sz-sand { fill: var(--bild-haufen); fill-opacity: .32; }
.sz-fascia { fill: var(--bild-zier); }
.sz-holzmast { fill: none; stroke: var(--bild-holz); stroke-width: 1.1; }
.sz-draht { fill: none; stroke: var(--bild-stange); stroke-opacity: .7; stroke-width: .35; }
/* panorama: middle skyline */
.pano-mitte { fill: var(--bild-kasten-dunkel); }
.pano-fen { fill: var(--bild-leuchte); opacity: .8; } .pano-fen-warm { fill: var(--bild-licht-warm); } .pano-fen-aus { opacity: .22; }
.pano-fen-band { fill: none; stroke: var(--bild-licht-warm); stroke-width: 2; }
.pano-fensterfeld { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .sz-blink { animation: sz-atmen 1.6s steps(2) infinite; }
}
/* ── Paket 4 (07.10.) — generated by _quelle/bauen.py css_paket4(); edit there, not here ── */
/* vehicles from the set: their fallback fills are dark constants → map every part to --bild-* so option A
   (picture tokens stay night-dark) and option B (light picture tokens) both work without fahrzeuge.css */
.sz-bild .dl-dunkel { fill: var(--bild-rahmen); } .sz-bild .dl-tief { fill: var(--bild-reifen-tief); }
.sz-bild .dl-gummi, .sz-bild .dl-reifen { fill: var(--bild-reifen); } .sz-bild .dl-felge { fill: var(--bild-gummi); }
.sz-bild .dl-rueck { fill: var(--bild-licht-rot); } .sz-bild .dl-leuchte { fill: var(--bild-weiss); }
.sz-bild .dl-blink { fill: var(--bild-leuchte); } .sz-bild .dl-ladung { fill: var(--bild-plane-grau); }
.sz-bild .dl-akzent { fill: var(--bild-lack-kobalt); } .sz-bild .dl-warn { stroke: var(--bild-reifen); }
.sz-bild .dl-naht { stroke: var(--bild-schatten); } .sz-bild .dl-flanke, .sz-bild .dl-abdunkeln { fill: var(--bild-schatten); }
.sz-bild .dl-leitung-r { stroke: var(--bild-licht-rot); } .sz-bild .dl-leitung-g { stroke: var(--bild-lack-gelb); }
.sz-bild .dl-gelaender { stroke: var(--bild-chrom); } .sz-bild .dl-randlicht { stroke: var(--bild-funke); }
.sz-bild .dl-go { stop-color: var(--bild-funke); } .sz-bild .dl-st { stop-color: var(--bild-licht-warm); }
.sz-bild .dl-bo { stop-color: var(--bild-schatten); }
.sz-bild .dl-gl1 { stop-color: color-mix(in srgb, var(--bild-scheibe) 35%, var(--bild-fenster)); }
.sz-bild .dl-gl2 { stop-color: color-mix(in srgb, var(--bild-fenster) 60%, var(--bild-reifen-tief)); }
.sz-bild .dl-gl3 { stop-color: color-mix(in srgb, var(--bild-leuchte) 35%, var(--bild-fenster)); }
.sz-bild .dl-al1 { stop-color: var(--bild-zier); } .sz-bild .dl-al2 { stop-color: var(--bild-roh); }
/* dealer tank yard, per-kind mode: trd-0..8 / tra-0..8 */
.sz-markierung-ab { stroke: var(--bild-lack-kobalt); stroke-opacity: .8; } .sz-buchtlicht-ab { fill: var(--bild-scheibe); }
.sz-trm-art, .sz-trk, .sz-trx-di, .sz-trx-ab { display: none; }
.trd-0 .sz-trm-art, .trd-1 .sz-trm-art, .trd-2 .sz-trm-art, .trd-3 .sz-trm-art, .trd-4 .sz-trm-art, .tra-0 .sz-trm-art, .tra-1 .sz-trm-art, .tra-2 .sz-trm-art, .tra-3 .sz-trm-art, .tra-4 .sz-trm-art { display: inline; }
.trd-0 .sz-trm-5, .trd-1 .sz-trm-5, .trd-2 .sz-trm-5, .trd-3 .sz-trm-5, .trd-4 .sz-trm-5, .tra-0 .sz-trm-5, .tra-1 .sz-trm-5, .tra-2 .sz-trm-5, .tra-3 .sz-trm-5, .tra-4 .sz-trm-5 { display: none; }
.trd-1 .sz-trk-di-1, .trd-1 .sz-trk-m-1 .sz-trx-di { display: inline; }
.tra-1 .sz-trk-ab-1 { display: inline; }
.trd-2 .sz-trk-di-1, .trd-2 .sz-trk-m-1 .sz-trx-di, .trd-2 .sz-trk-di-2, .trd-2 .sz-trk-m-2 .sz-trx-di { display: inline; }
.tra-2 .sz-trk-ab-1, .tra-2 .sz-trk-ab-2 { display: inline; }
.trd-3 .sz-trk-di-1, .trd-3 .sz-trk-m-1 .sz-trx-di, .trd-3 .sz-trk-di-2, .trd-3 .sz-trk-m-2 .sz-trx-di, .trd-3 .sz-trk-di-3, .trd-3 .sz-trk-m-3 .sz-trx-di { display: inline; }
.tra-3 .sz-trk-ab-1, .tra-3 .sz-trk-ab-2, .tra-3 .sz-trk-ab-3 { display: inline; }
.trd-4 .sz-trk-di-1, .trd-4 .sz-trk-m-1 .sz-trx-di, .trd-4 .sz-trk-di-2, .trd-4 .sz-trk-m-2 .sz-trx-di, .trd-4 .sz-trk-di-3, .trd-4 .sz-trk-m-3 .sz-trx-di, .trd-4 .sz-trk-di-4, .trd-4 .sz-trk-m-4 .sz-trx-di { display: inline; }
.tra-4 .sz-trk-ab-1, .tra-4 .sz-trk-ab-2, .tra-4 .sz-trk-ab-3, .tra-4 .sz-trk-ab-4 { display: inline; }
.tra-1 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-2 .sz-trk-m-7 .sz-trx-ab, .tra-2 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-3 .sz-trk-m-6 .sz-trx-ab, .tra-3 .sz-trk-m-7 .sz-trx-ab, .tra-3 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-4 .sz-trk-m-5 .sz-trx-ab, .tra-4 .sz-trk-m-6 .sz-trx-ab, .tra-4 .sz-trk-m-7 .sz-trx-ab, .tra-4 .sz-trk-m-8 .sz-trx-ab { display: inline; }
/* hook: tank level gauges — --fuell-diesel / --fuell-adblue (0..1) on any ancestor */
.sz-pegel-glas { fill: var(--bild-reifen-tief); fill-opacity: .9; stroke: var(--bild-zier); stroke-opacity: .55; stroke-width: .5; }
.sz-pegel { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s ease; }
.sz-pegel-diesel { fill: var(--bild-leuchte); transform: scaleY(var(--fuell-diesel, .7)); }
.sz-pegel-adblue { fill: var(--bild-lack-kobalt); transform: scaleY(var(--fuell-adblue, .55)); }
.sz-pegel-skala { fill: none; stroke: var(--bild-zier); stroke-opacity: .6; stroke-width: .5; }
/* hook: rack fill levels — --lager-1 … --lager-4 (0..1, default .8) */
.sz-lg { transition: opacity .4s ease; }
.sz-lg-1-0 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 0), 1); }
.sz-lg-1-1 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 1), 1); }
.sz-lg-1-2 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 2), 1); }
.sz-lg-1-3 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 3), 1); }
.sz-lg-1-4 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 4), 1); }
.sz-lg-1-5 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 5), 1); }
.sz-lg-1-6 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 6), 1); }
.sz-lg-1-7 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 7), 1); }
.sz-lg-1-8 { opacity: clamp(0, calc(var(--lager-1, .8) * 9 - 8), 1); }
.sz-lg-2-0 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 0), 1); }
.sz-lg-2-1 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 1), 1); }
.sz-lg-2-2 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 2), 1); }
.sz-lg-2-3 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 3), 1); }
.sz-lg-2-4 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 4), 1); }
.sz-lg-2-5 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 5), 1); }
.sz-lg-2-6 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 6), 1); }
.sz-lg-2-7 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 7), 1); }
.sz-lg-2-8 { opacity: clamp(0, calc(var(--lager-2, .8) * 9 - 8), 1); }
.sz-lg-3-0 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 0), 1); }
.sz-lg-3-1 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 1), 1); }
.sz-lg-3-2 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 2), 1); }
.sz-lg-3-3 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 3), 1); }
.sz-lg-3-4 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 4), 1); }
.sz-lg-3-5 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 5), 1); }
.sz-lg-3-6 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 6), 1); }
.sz-lg-3-7 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 7), 1); }
.sz-lg-3-8 { opacity: clamp(0, calc(var(--lager-3, .8) * 9 - 8), 1); }
.sz-lg-4-0 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 0), 1); }
.sz-lg-4-1 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 1), 1); }
.sz-lg-4-2 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 2), 1); }
.sz-lg-4-3 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 3), 1); }
.sz-lg-4-4 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 4), 1); }
.sz-lg-4-5 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 5), 1); }
.sz-lg-4-6 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 6), 1); }
.sz-lg-4-7 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 7), 1); }
.sz-lg-4-8 { opacity: clamp(0, calc(var(--lager-4, .8) * 9 - 8), 1); }
/* hook: incoming rig on the approach road — .unterwegs; badge slot .sz-slot-eta for the page count/ETA */
.sz-anfahrt { display: none; } .unterwegs .sz-anfahrt { display: inline; }
.sz-fahrbahnstrich { fill: none; stroke: var(--bild-zier); stroke-opacity: .3; stroke-width: .8; }
.sz-slotplatte { fill: var(--bild-reifen-tief); fill-opacity: .92; stroke: var(--bild-leuchte); stroke-width: .8; }
.sz-slotspitze { fill: var(--bild-leuchte); }
.sz-slottext { fill: var(--bild-zier); font: 600 8px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
/* hook: workshop — .buehne-0 … .buehne-4 = occupied bays (default 4) */
.buehne-0 .sz-wb-1, .buehne-0 .sz-wb-2, .buehne-0 .sz-wb-3, .buehne-0 .sz-wb-4 { display: none; }
.buehne-1 .sz-wb-2, .buehne-1 .sz-wb-3, .buehne-1 .sz-wb-4 { display: none; }
.buehne-2 .sz-wb-3, .buehne-2 .sz-wb-4 { display: none; }
.buehne-3 .sz-wb-4 { display: none; }
/* hook: construction crews — .trupp-0 … .trupp-4 = busy crews (default 4); the crew board follows */
.sz-truppampel { fill: var(--bild-lack-see); filter: brightness(1.9); }
.trupp-0 .sz-trupp-1, .trupp-0 .sz-trupp-2, .trupp-0 .sz-trupp-3, .trupp-0 .sz-trupp-4 { display: none; }
.trupp-0 .sz-truppampel-1, .trupp-0 .sz-truppampel-2, .trupp-0 .sz-truppampel-3, .trupp-0 .sz-truppampel-4 { fill: var(--bild-reifen); filter: none; }
.trupp-1 .sz-trupp-2, .trupp-1 .sz-trupp-3, .trupp-1 .sz-trupp-4 { display: none; }
.trupp-1 .sz-truppampel-2, .trupp-1 .sz-truppampel-3, .trupp-1 .sz-truppampel-4 { fill: var(--bild-reifen); filter: none; }
.trupp-2 .sz-trupp-3, .trupp-2 .sz-trupp-4 { display: none; }
.trupp-2 .sz-truppampel-3, .trupp-2 .sz-truppampel-4 { fill: var(--bild-reifen); filter: none; }
.trupp-3 .sz-trupp-4 { display: none; }
.trupp-3 .sz-truppampel-4 { fill: var(--bild-reifen); filter: none; }
/* hook: spare-parts store — --teil-<gruppe> (0..1, default .5): 6 pallet places per compartment like Palettenstufe;
   .sz-teilzahl[data-teil] = empty number plate text the page fills; .bestellung = delivery truck + badge */
.sz-tf { transition: opacity .4s ease; } .sz-klebeband-f { fill: var(--bild-holz); fill-opacity: .7; }
.sz-teilzahl { fill: var(--bild-zier); font: 600 5px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.sz-bestellung { display: none; } .bestellung .sz-bestellung { display: inline; }
.sz-bestell-ampel { fill: var(--bild-licht-rot); filter: none; } .bestellung .sz-bestell-ampel { fill: var(--bild-lack-see); filter: brightness(1.8); }
.sz-tf-aggregat_teile-0 { opacity: clamp(0, calc(var(--regal-aggregat_teile, calc(var(--teil-aggregat_teile, .5) * 6)) * 1000), 1); } .sz-tf-aggregat_teile-1 { opacity: clamp(0, calc((var(--regal-aggregat_teile, calc(var(--teil-aggregat_teile, .5) * 6)) - 1) * 4), 1); } .sz-tf-aggregat_teile-2 { opacity: clamp(0, calc((var(--regal-aggregat_teile, calc(var(--teil-aggregat_teile, .5) * 6)) - 2) * 4), 1); } .sz-tf-aggregat_teile-3 { opacity: clamp(0, calc((var(--regal-aggregat_teile, calc(var(--teil-aggregat_teile, .5) * 6)) - 3) * 4), 1); } .sz-tf-aggregat_teile-4 { opacity: clamp(0, calc((var(--regal-aggregat_teile, calc(var(--teil-aggregat_teile, .5) * 6)) - 4) * 4), 1); } .sz-tf-aggregat_teile-5 { opacity: clamp(0, calc((var(--regal-aggregat_teile, calc(var(--teil-aggregat_teile, .5) * 6)) - 5) * 4), 1); }
.sz-tf-auflieger_teile-0 { opacity: clamp(0, calc(var(--regal-auflieger_teile, calc(var(--teil-auflieger_teile, .5) * 6)) * 1000), 1); } .sz-tf-auflieger_teile-1 { opacity: clamp(0, calc((var(--regal-auflieger_teile, calc(var(--teil-auflieger_teile, .5) * 6)) - 1) * 4), 1); } .sz-tf-auflieger_teile-2 { opacity: clamp(0, calc((var(--regal-auflieger_teile, calc(var(--teil-auflieger_teile, .5) * 6)) - 2) * 4), 1); } .sz-tf-auflieger_teile-3 { opacity: clamp(0, calc((var(--regal-auflieger_teile, calc(var(--teil-auflieger_teile, .5) * 6)) - 3) * 4), 1); } .sz-tf-auflieger_teile-4 { opacity: clamp(0, calc((var(--regal-auflieger_teile, calc(var(--teil-auflieger_teile, .5) * 6)) - 4) * 4), 1); } .sz-tf-auflieger_teile-5 { opacity: clamp(0, calc((var(--regal-auflieger_teile, calc(var(--teil-auflieger_teile, .5) * 6)) - 5) * 4), 1); }
.sz-tf-batterie-0 { opacity: clamp(0, calc(var(--regal-batterie, calc(var(--teil-batterie, .5) * 6)) * 1000), 1); } .sz-tf-batterie-1 { opacity: clamp(0, calc((var(--regal-batterie, calc(var(--teil-batterie, .5) * 6)) - 1) * 4), 1); } .sz-tf-batterie-2 { opacity: clamp(0, calc((var(--regal-batterie, calc(var(--teil-batterie, .5) * 6)) - 2) * 4), 1); } .sz-tf-batterie-3 { opacity: clamp(0, calc((var(--regal-batterie, calc(var(--teil-batterie, .5) * 6)) - 3) * 4), 1); } .sz-tf-batterie-4 { opacity: clamp(0, calc((var(--regal-batterie, calc(var(--teil-batterie, .5) * 6)) - 4) * 4), 1); } .sz-tf-batterie-5 { opacity: clamp(0, calc((var(--regal-batterie, calc(var(--teil-batterie, .5) * 6)) - 5) * 4), 1); }
.sz-tf-bremsbelag-0 { opacity: clamp(0, calc(var(--regal-bremsbelag, calc(var(--teil-bremsbelag, .5) * 6)) * 1000), 1); } .sz-tf-bremsbelag-1 { opacity: clamp(0, calc((var(--regal-bremsbelag, calc(var(--teil-bremsbelag, .5) * 6)) - 1) * 4), 1); } .sz-tf-bremsbelag-2 { opacity: clamp(0, calc((var(--regal-bremsbelag, calc(var(--teil-bremsbelag, .5) * 6)) - 2) * 4), 1); } .sz-tf-bremsbelag-3 { opacity: clamp(0, calc((var(--regal-bremsbelag, calc(var(--teil-bremsbelag, .5) * 6)) - 3) * 4), 1); } .sz-tf-bremsbelag-4 { opacity: clamp(0, calc((var(--regal-bremsbelag, calc(var(--teil-bremsbelag, .5) * 6)) - 4) * 4), 1); } .sz-tf-bremsbelag-5 { opacity: clamp(0, calc((var(--regal-bremsbelag, calc(var(--teil-bremsbelag, .5) * 6)) - 5) * 4), 1); }
.sz-tf-bremsscheibe-0 { opacity: clamp(0, calc(var(--regal-bremsscheibe, calc(var(--teil-bremsscheibe, .5) * 6)) * 1000), 1); } .sz-tf-bremsscheibe-1 { opacity: clamp(0, calc((var(--regal-bremsscheibe, calc(var(--teil-bremsscheibe, .5) * 6)) - 1) * 4), 1); } .sz-tf-bremsscheibe-2 { opacity: clamp(0, calc((var(--regal-bremsscheibe, calc(var(--teil-bremsscheibe, .5) * 6)) - 2) * 4), 1); } .sz-tf-bremsscheibe-3 { opacity: clamp(0, calc((var(--regal-bremsscheibe, calc(var(--teil-bremsscheibe, .5) * 6)) - 3) * 4), 1); } .sz-tf-bremsscheibe-4 { opacity: clamp(0, calc((var(--regal-bremsscheibe, calc(var(--teil-bremsscheibe, .5) * 6)) - 4) * 4), 1); } .sz-tf-bremsscheibe-5 { opacity: clamp(0, calc((var(--regal-bremsscheibe, calc(var(--teil-bremsscheibe, .5) * 6)) - 5) * 4), 1); }
.sz-tf-elektrik-0 { opacity: clamp(0, calc(var(--regal-elektrik, calc(var(--teil-elektrik, .5) * 6)) * 1000), 1); } .sz-tf-elektrik-1 { opacity: clamp(0, calc((var(--regal-elektrik, calc(var(--teil-elektrik, .5) * 6)) - 1) * 4), 1); } .sz-tf-elektrik-2 { opacity: clamp(0, calc((var(--regal-elektrik, calc(var(--teil-elektrik, .5) * 6)) - 2) * 4), 1); } .sz-tf-elektrik-3 { opacity: clamp(0, calc((var(--regal-elektrik, calc(var(--teil-elektrik, .5) * 6)) - 3) * 4), 1); } .sz-tf-elektrik-4 { opacity: clamp(0, calc((var(--regal-elektrik, calc(var(--teil-elektrik, .5) * 6)) - 4) * 4), 1); } .sz-tf-elektrik-5 { opacity: clamp(0, calc((var(--regal-elektrik, calc(var(--teil-elektrik, .5) * 6)) - 5) * 4), 1); }
.sz-tf-filtersatz-0 { opacity: clamp(0, calc(var(--regal-filtersatz, calc(var(--teil-filtersatz, .5) * 6)) * 1000), 1); } .sz-tf-filtersatz-1 { opacity: clamp(0, calc((var(--regal-filtersatz, calc(var(--teil-filtersatz, .5) * 6)) - 1) * 4), 1); } .sz-tf-filtersatz-2 { opacity: clamp(0, calc((var(--regal-filtersatz, calc(var(--teil-filtersatz, .5) * 6)) - 2) * 4), 1); } .sz-tf-filtersatz-3 { opacity: clamp(0, calc((var(--regal-filtersatz, calc(var(--teil-filtersatz, .5) * 6)) - 3) * 4), 1); } .sz-tf-filtersatz-4 { opacity: clamp(0, calc((var(--regal-filtersatz, calc(var(--teil-filtersatz, .5) * 6)) - 4) * 4), 1); } .sz-tf-filtersatz-5 { opacity: clamp(0, calc((var(--regal-filtersatz, calc(var(--teil-filtersatz, .5) * 6)) - 5) * 4), 1); }
.sz-tf-glas-0 { opacity: clamp(0, calc(var(--regal-glas, calc(var(--teil-glas, .5) * 6)) * 1000), 1); } .sz-tf-glas-1 { opacity: clamp(0, calc((var(--regal-glas, calc(var(--teil-glas, .5) * 6)) - 1) * 4), 1); } .sz-tf-glas-2 { opacity: clamp(0, calc((var(--regal-glas, calc(var(--teil-glas, .5) * 6)) - 2) * 4), 1); } .sz-tf-glas-3 { opacity: clamp(0, calc((var(--regal-glas, calc(var(--teil-glas, .5) * 6)) - 3) * 4), 1); } .sz-tf-glas-4 { opacity: clamp(0, calc((var(--regal-glas, calc(var(--teil-glas, .5) * 6)) - 4) * 4), 1); } .sz-tf-glas-5 { opacity: clamp(0, calc((var(--regal-glas, calc(var(--teil-glas, .5) * 6)) - 5) * 4), 1); }
.sz-tf-kuehler-0 { opacity: clamp(0, calc(var(--regal-kuehler, calc(var(--teil-kuehler, .5) * 6)) * 1000), 1); } .sz-tf-kuehler-1 { opacity: clamp(0, calc((var(--regal-kuehler, calc(var(--teil-kuehler, .5) * 6)) - 1) * 4), 1); } .sz-tf-kuehler-2 { opacity: clamp(0, calc((var(--regal-kuehler, calc(var(--teil-kuehler, .5) * 6)) - 2) * 4), 1); } .sz-tf-kuehler-3 { opacity: clamp(0, calc((var(--regal-kuehler, calc(var(--teil-kuehler, .5) * 6)) - 3) * 4), 1); } .sz-tf-kuehler-4 { opacity: clamp(0, calc((var(--regal-kuehler, calc(var(--teil-kuehler, .5) * 6)) - 4) * 4), 1); } .sz-tf-kuehler-5 { opacity: clamp(0, calc((var(--regal-kuehler, calc(var(--teil-kuehler, .5) * 6)) - 5) * 4), 1); }
.sz-tf-kupplung-0 { opacity: clamp(0, calc(var(--regal-kupplung, calc(var(--teil-kupplung, .5) * 6)) * 1000), 1); } .sz-tf-kupplung-1 { opacity: clamp(0, calc((var(--regal-kupplung, calc(var(--teil-kupplung, .5) * 6)) - 1) * 4), 1); } .sz-tf-kupplung-2 { opacity: clamp(0, calc((var(--regal-kupplung, calc(var(--teil-kupplung, .5) * 6)) - 2) * 4), 1); } .sz-tf-kupplung-3 { opacity: clamp(0, calc((var(--regal-kupplung, calc(var(--teil-kupplung, .5) * 6)) - 3) * 4), 1); } .sz-tf-kupplung-4 { opacity: clamp(0, calc((var(--regal-kupplung, calc(var(--teil-kupplung, .5) * 6)) - 4) * 4), 1); } .sz-tf-kupplung-5 { opacity: clamp(0, calc((var(--regal-kupplung, calc(var(--teil-kupplung, .5) * 6)) - 5) * 4), 1); }
.sz-tf-luftfederbalg-0 { opacity: clamp(0, calc(var(--regal-luftfederbalg, calc(var(--teil-luftfederbalg, .5) * 6)) * 1000), 1); } .sz-tf-luftfederbalg-1 { opacity: clamp(0, calc((var(--regal-luftfederbalg, calc(var(--teil-luftfederbalg, .5) * 6)) - 1) * 4), 1); } .sz-tf-luftfederbalg-2 { opacity: clamp(0, calc((var(--regal-luftfederbalg, calc(var(--teil-luftfederbalg, .5) * 6)) - 2) * 4), 1); } .sz-tf-luftfederbalg-3 { opacity: clamp(0, calc((var(--regal-luftfederbalg, calc(var(--teil-luftfederbalg, .5) * 6)) - 3) * 4), 1); } .sz-tf-luftfederbalg-4 { opacity: clamp(0, calc((var(--regal-luftfederbalg, calc(var(--teil-luftfederbalg, .5) * 6)) - 4) * 4), 1); } .sz-tf-luftfederbalg-5 { opacity: clamp(0, calc((var(--regal-luftfederbalg, calc(var(--teil-luftfederbalg, .5) * 6)) - 5) * 4), 1); }
.sz-tf-motoroel-0 { opacity: clamp(0, calc(var(--regal-motoroel, calc(var(--teil-motoroel, .5) * 6)) * 1000), 1); } .sz-tf-motoroel-1 { opacity: clamp(0, calc((var(--regal-motoroel, calc(var(--teil-motoroel, .5) * 6)) - 1) * 4), 1); } .sz-tf-motoroel-2 { opacity: clamp(0, calc((var(--regal-motoroel, calc(var(--teil-motoroel, .5) * 6)) - 2) * 4), 1); } .sz-tf-motoroel-3 { opacity: clamp(0, calc((var(--regal-motoroel, calc(var(--teil-motoroel, .5) * 6)) - 3) * 4), 1); } .sz-tf-motoroel-4 { opacity: clamp(0, calc((var(--regal-motoroel, calc(var(--teil-motoroel, .5) * 6)) - 4) * 4), 1); } .sz-tf-motoroel-5 { opacity: clamp(0, calc((var(--regal-motoroel, calc(var(--teil-motoroel, .5) * 6)) - 5) * 4), 1); }
.sz-tf-plane-0 { opacity: clamp(0, calc(var(--regal-plane, calc(var(--teil-plane, .5) * 6)) * 1000), 1); } .sz-tf-plane-1 { opacity: clamp(0, calc((var(--regal-plane, calc(var(--teil-plane, .5) * 6)) - 1) * 4), 1); } .sz-tf-plane-2 { opacity: clamp(0, calc((var(--regal-plane, calc(var(--teil-plane, .5) * 6)) - 2) * 4), 1); } .sz-tf-plane-3 { opacity: clamp(0, calc((var(--regal-plane, calc(var(--teil-plane, .5) * 6)) - 3) * 4), 1); } .sz-tf-plane-4 { opacity: clamp(0, calc((var(--regal-plane, calc(var(--teil-plane, .5) * 6)) - 4) * 4), 1); } .sz-tf-plane-5 { opacity: clamp(0, calc((var(--regal-plane, calc(var(--teil-plane, .5) * 6)) - 5) * 4), 1); }
.sz-tf-radlager-0 { opacity: clamp(0, calc(var(--regal-radlager, calc(var(--teil-radlager, .5) * 6)) * 1000), 1); } .sz-tf-radlager-1 { opacity: clamp(0, calc((var(--regal-radlager, calc(var(--teil-radlager, .5) * 6)) - 1) * 4), 1); } .sz-tf-radlager-2 { opacity: clamp(0, calc((var(--regal-radlager, calc(var(--teil-radlager, .5) * 6)) - 2) * 4), 1); } .sz-tf-radlager-3 { opacity: clamp(0, calc((var(--regal-radlager, calc(var(--teil-radlager, .5) * 6)) - 3) * 4), 1); } .sz-tf-radlager-4 { opacity: clamp(0, calc((var(--regal-radlager, calc(var(--teil-radlager, .5) * 6)) - 4) * 4), 1); } .sz-tf-radlager-5 { opacity: clamp(0, calc((var(--regal-radlager, calc(var(--teil-radlager, .5) * 6)) - 5) * 4), 1); }
.sz-tf-reifen-0 { opacity: clamp(0, calc(var(--regal-reifen, calc(var(--teil-reifen, .5) * 6)) * 1000), 1); } .sz-tf-reifen-1 { opacity: clamp(0, calc((var(--regal-reifen, calc(var(--teil-reifen, .5) * 6)) - 1) * 4), 1); } .sz-tf-reifen-2 { opacity: clamp(0, calc((var(--regal-reifen, calc(var(--teil-reifen, .5) * 6)) - 2) * 4), 1); } .sz-tf-reifen-3 { opacity: clamp(0, calc((var(--regal-reifen, calc(var(--teil-reifen, .5) * 6)) - 3) * 4), 1); } .sz-tf-reifen-4 { opacity: clamp(0, calc((var(--regal-reifen, calc(var(--teil-reifen, .5) * 6)) - 4) * 4), 1); } .sz-tf-reifen-5 { opacity: clamp(0, calc((var(--regal-reifen, calc(var(--teil-reifen, .5) * 6)) - 5) * 4), 1); }
.sz-tf-windschutzscheibe-0 { opacity: clamp(0, calc(var(--regal-windschutzscheibe, calc(var(--teil-windschutzscheibe, .5) * 6)) * 1000), 1); } .sz-tf-windschutzscheibe-1 { opacity: clamp(0, calc((var(--regal-windschutzscheibe, calc(var(--teil-windschutzscheibe, .5) * 6)) - 1) * 4), 1); } .sz-tf-windschutzscheibe-2 { opacity: clamp(0, calc((var(--regal-windschutzscheibe, calc(var(--teil-windschutzscheibe, .5) * 6)) - 2) * 4), 1); } .sz-tf-windschutzscheibe-3 { opacity: clamp(0, calc((var(--regal-windschutzscheibe, calc(var(--teil-windschutzscheibe, .5) * 6)) - 3) * 4), 1); } .sz-tf-windschutzscheibe-4 { opacity: clamp(0, calc((var(--regal-windschutzscheibe, calc(var(--teil-windschutzscheibe, .5) * 6)) - 4) * 4), 1); } .sz-tf-windschutzscheibe-5 { opacity: clamp(0, calc((var(--regal-windschutzscheibe, calc(var(--teil-windschutzscheibe, .5) * 6)) - 5) * 4), 1); }
/* ── Paket 5 (07.10.) — generated by _quelle/bauen.py css_paket5(); edit there. Contract: VTC/redesign_hp/grafik/szenen/HOOKS.md ── */
/* shared: „+k" badges show only with their class; .mit-zahlen = the page drives the picture (overlays without a default) */
.sz-mehr, .sz-spur-mehr, .sz-schlange-mehr, .sz-trupps-mehr, .sz-gebraucht-mehr, .sz-rampe-mehr { display: none; }
.trd-mehr .sz-mehr-diesel, .tra-mehr .sz-mehr-adblue, .spur-mehr .sz-spur-mehr, .schlange-mehr .sz-schlange-mehr, .trupps-mehr .sz-trupps-mehr, .gebraucht-mehr .sz-gebraucht-mehr, .rampe-mehr .sz-rampe-mehr { display: inline; }
.sz-slottext-klein { font-size: 6px; }
.sz-nur-zahlen { display: none; } .mit-zahlen .sz-nur-zahlen { display: inline; }
.mit-zahlen:not(.fertig) .sz-werk-fertig { display: none; }
/* iso progress bars: segment i lights while var · n > i */
.sz-balken-spur { fill: var(--bild-reifen-tief); fill-opacity: .85; } .sz-balken { fill: var(--bild-leuchte); transition: opacity .3s ease; }
.sz-bs-band-anteil-0 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 0) * 1000), 1); } .sz-bs-band-anteil-1 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 1) * 1000), 1); } .sz-bs-band-anteil-2 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 2) * 1000), 1); } .sz-bs-band-anteil-3 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 3) * 1000), 1); } .sz-bs-band-anteil-4 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 4) * 1000), 1); } .sz-bs-band-anteil-5 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 5) * 1000), 1); } .sz-bs-band-anteil-6 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 6) * 1000), 1); } .sz-bs-band-anteil-7 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 7) * 1000), 1); } .sz-bs-band-anteil-8 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 8) * 1000), 1); } .sz-bs-band-anteil-9 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 9) * 1000), 1); } .sz-bs-band-anteil-10 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 10) * 1000), 1); } .sz-bs-band-anteil-11 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 11) * 1000), 1); } .sz-bs-band-anteil-12 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 12) * 1000), 1); } .sz-bs-band-anteil-13 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 13) * 1000), 1); } .sz-bs-band-anteil-14 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 14) * 1000), 1); } .sz-bs-band-anteil-15 { opacity: clamp(0, calc((var(--band-anteil, 0.5) * 16 - 15) * 1000), 1); }
.sz-bs-bau-anteil-0 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 0) * 1000), 1); } .sz-bs-bau-anteil-1 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 1) * 1000), 1); } .sz-bs-bau-anteil-2 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 2) * 1000), 1); } .sz-bs-bau-anteil-3 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 3) * 1000), 1); } .sz-bs-bau-anteil-4 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 4) * 1000), 1); } .sz-bs-bau-anteil-5 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 5) * 1000), 1); } .sz-bs-bau-anteil-6 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 6) * 1000), 1); } .sz-bs-bau-anteil-7 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 7) * 1000), 1); } .sz-bs-bau-anteil-8 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 8) * 1000), 1); } .sz-bs-bau-anteil-9 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 9) * 1000), 1); } .sz-bs-bau-anteil-10 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 10) * 1000), 1); } .sz-bs-bau-anteil-11 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 11) * 1000), 1); } .sz-bs-bau-anteil-12 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 12) * 1000), 1); } .sz-bs-bau-anteil-13 { opacity: clamp(0, calc((var(--bau-anteil, 0.6) * 14 - 13) * 1000), 1); }
.sz-bs-bucht-1-anteil-0 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 0) * 1000), 1); } .sz-bs-bucht-1-anteil-1 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 1) * 1000), 1); } .sz-bs-bucht-1-anteil-2 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 2) * 1000), 1); } .sz-bs-bucht-1-anteil-3 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 3) * 1000), 1); } .sz-bs-bucht-1-anteil-4 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 4) * 1000), 1); } .sz-bs-bucht-1-anteil-5 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 5) * 1000), 1); } .sz-bs-bucht-1-anteil-6 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 6) * 1000), 1); } .sz-bs-bucht-1-anteil-7 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 7) * 1000), 1); } .sz-bs-bucht-1-anteil-8 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 8) * 1000), 1); } .sz-bs-bucht-1-anteil-9 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 9) * 1000), 1); } .sz-bs-bucht-1-anteil-10 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 10) * 1000), 1); } .sz-bs-bucht-1-anteil-11 { opacity: clamp(0, calc((var(--bucht-1-anteil, 0.7) * 12 - 11) * 1000), 1); }
.sz-bs-bucht-2-anteil-0 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 0) * 1000), 1); } .sz-bs-bucht-2-anteil-1 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 1) * 1000), 1); } .sz-bs-bucht-2-anteil-2 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 2) * 1000), 1); } .sz-bs-bucht-2-anteil-3 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 3) * 1000), 1); } .sz-bs-bucht-2-anteil-4 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 4) * 1000), 1); } .sz-bs-bucht-2-anteil-5 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 5) * 1000), 1); } .sz-bs-bucht-2-anteil-6 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 6) * 1000), 1); } .sz-bs-bucht-2-anteil-7 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 7) * 1000), 1); } .sz-bs-bucht-2-anteil-8 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 8) * 1000), 1); } .sz-bs-bucht-2-anteil-9 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 9) * 1000), 1); } .sz-bs-bucht-2-anteil-10 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 10) * 1000), 1); } .sz-bs-bucht-2-anteil-11 { opacity: clamp(0, calc((var(--bucht-2-anteil, 0.35) * 12 - 11) * 1000), 1); }
.sz-bs-bucht-3-anteil-0 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 0) * 1000), 1); } .sz-bs-bucht-3-anteil-1 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 1) * 1000), 1); } .sz-bs-bucht-3-anteil-2 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 2) * 1000), 1); } .sz-bs-bucht-3-anteil-3 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 3) * 1000), 1); } .sz-bs-bucht-3-anteil-4 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 4) * 1000), 1); } .sz-bs-bucht-3-anteil-5 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 5) * 1000), 1); } .sz-bs-bucht-3-anteil-6 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 6) * 1000), 1); } .sz-bs-bucht-3-anteil-7 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 7) * 1000), 1); } .sz-bs-bucht-3-anteil-8 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 8) * 1000), 1); } .sz-bs-bucht-3-anteil-9 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 9) * 1000), 1); } .sz-bs-bucht-3-anteil-10 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 10) * 1000), 1); } .sz-bs-bucht-3-anteil-11 { opacity: clamp(0, calc((var(--bucht-3-anteil, 0.55) * 12 - 11) * 1000), 1); }
.sz-bs-bucht-4-anteil-0 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 0) * 1000), 1); } .sz-bs-bucht-4-anteil-1 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 1) * 1000), 1); } .sz-bs-bucht-4-anteil-2 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 2) * 1000), 1); } .sz-bs-bucht-4-anteil-3 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 3) * 1000), 1); } .sz-bs-bucht-4-anteil-4 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 4) * 1000), 1); } .sz-bs-bucht-4-anteil-5 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 5) * 1000), 1); } .sz-bs-bucht-4-anteil-6 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 6) * 1000), 1); } .sz-bs-bucht-4-anteil-7 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 7) * 1000), 1); } .sz-bs-bucht-4-anteil-8 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 8) * 1000), 1); } .sz-bs-bucht-4-anteil-9 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 9) * 1000), 1); } .sz-bs-bucht-4-anteil-10 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 10) * 1000), 1); } .sz-bs-bucht-4-anteil-11 { opacity: clamp(0, calc((var(--bucht-4-anteil, 0.2) * 12 - 11) * 1000), 1); }
/* tank yard: knapp lamps (colour only), pumping hose, fill of each waiting trailer, approach tanker */
.sz-knapp { fill: var(--bild-reifen); stroke: var(--bild-zier); stroke-opacity: .4; stroke-width: .3; }
.knapp-diesel .sz-knapp-diesel, .knapp-adblue .sz-knapp-adblue { fill: var(--bild-lack-gelb); filter: brightness(1.7); }
.sz-fluss { display: none; fill: none; stroke: var(--bild-leuchte); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1.5 3; animation: sz-fluss 1.1s linear infinite; }
.sz-fluss-ab { stroke: var(--bild-scheibe); } .pumpt .sz-fluss { display: inline; }
@keyframes sz-fluss { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) { .sz-fluss { animation: none; } .sz-spurwagen { transition: none; } }
.sz-trfuell-spur { fill: var(--bild-reifen-tief); fill-opacity: .9; stroke: var(--bild-zier); stroke-opacity: .45; stroke-width: .3; }
.sz-trfuell { fill: var(--bild-leuchte); transform-box: fill-box; transform-origin: 0 50%; transition: transform .5s ease; }
.sz-trfuell-ab { fill: var(--bild-scheibe); }
.sz-trfuell-di-1 { transform: scaleX(var(--trd-1-fuell, 1)); } .sz-trfuell-ab-1 { transform: scaleX(var(--tra-1-fuell, 1)); }
.sz-trfuell-di-2 { transform: scaleX(var(--trd-2-fuell, 1)); } .sz-trfuell-ab-2 { transform: scaleX(var(--tra-2-fuell, 1)); }
.sz-trfuell-di-3 { transform: scaleX(var(--trd-3-fuell, 1)); } .sz-trfuell-ab-3 { transform: scaleX(var(--tra-3-fuell, 1)); }
.sz-trfuell-di-4 { transform: scaleX(var(--trd-4-fuell, 1)); } .sz-trfuell-ab-4 { transform: scaleX(var(--tra-4-fuell, 1)); }
.anfahrt .sz-anfahrt { display: inline; }
/* parts store: tyres, state edges, construction tape, phone plates, ramp, forklift */
.sz-rf-lauf { fill: none; stroke: var(--bild-zier); stroke-opacity: .35; stroke-width: .35; }
.sz-rf-flanke { fill: var(--bild-gummi); } .sz-rf-loch { fill: var(--bild-reifen-tief); }
.sz-rf-glanz { fill: none; stroke: var(--bild-licht-warm); stroke-opacity: .5; stroke-width: .45; stroke-linecap: round; }
.sz-fachkante { display: none; fill: none; stroke-width: 1.3; stroke-linecap: round; } .sz-fachbau { display: none; }
.sz-teilschild-m { display: none; } .sz-mobil .sz-teilschild-m { display: inline; } .sz-mobil .sz-teilschild-d { display: none; }
.sz-teilzahl-m { font-size: 10px; }
.sz-stapler-fahrt { display: none; } .stapler .sz-stapler-fahrt { display: inline; } .stapler .sz-stapler-park { display: none; }
.sz-rp-3, .sz-rp-4 { display: none; }
.anfahrt .sz-bestellung { display: inline; } .anfahrt .sz-bestell-ampel { fill: var(--bild-lack-see); filter: brightness(1.8); }
.regal-aggregat_teile-knapp .sz-fachkante-aggregat_teile { display: inline; stroke: var(--bild-lack-gelb); } .regal-aggregat_teile-knapp .sz-ts-aggregat_teile .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-aggregat_teile-minus .sz-fachkante-aggregat_teile { display: inline; stroke: var(--bild-licht-rot); } .regal-aggregat_teile-minus .sz-ts-aggregat_teile .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-aggregat_teile-bau .sz-fachbau-aggregat_teile { display: inline; }
.regal-auflieger_teile-knapp .sz-fachkante-auflieger_teile { display: inline; stroke: var(--bild-lack-gelb); } .regal-auflieger_teile-knapp .sz-ts-auflieger_teile .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-auflieger_teile-minus .sz-fachkante-auflieger_teile { display: inline; stroke: var(--bild-licht-rot); } .regal-auflieger_teile-minus .sz-ts-auflieger_teile .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-auflieger_teile-bau .sz-fachbau-auflieger_teile { display: inline; }
.regal-batterie-knapp .sz-fachkante-batterie { display: inline; stroke: var(--bild-lack-gelb); } .regal-batterie-knapp .sz-ts-batterie .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-batterie-minus .sz-fachkante-batterie { display: inline; stroke: var(--bild-licht-rot); } .regal-batterie-minus .sz-ts-batterie .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-batterie-bau .sz-fachbau-batterie { display: inline; }
.regal-bremsbelag-knapp .sz-fachkante-bremsbelag { display: inline; stroke: var(--bild-lack-gelb); } .regal-bremsbelag-knapp .sz-ts-bremsbelag .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-bremsbelag-minus .sz-fachkante-bremsbelag { display: inline; stroke: var(--bild-licht-rot); } .regal-bremsbelag-minus .sz-ts-bremsbelag .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-bremsbelag-bau .sz-fachbau-bremsbelag { display: inline; }
.regal-bremsscheibe-knapp .sz-fachkante-bremsscheibe { display: inline; stroke: var(--bild-lack-gelb); } .regal-bremsscheibe-knapp .sz-ts-bremsscheibe .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-bremsscheibe-minus .sz-fachkante-bremsscheibe { display: inline; stroke: var(--bild-licht-rot); } .regal-bremsscheibe-minus .sz-ts-bremsscheibe .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-bremsscheibe-bau .sz-fachbau-bremsscheibe { display: inline; }
.regal-elektrik-knapp .sz-fachkante-elektrik { display: inline; stroke: var(--bild-lack-gelb); } .regal-elektrik-knapp .sz-ts-elektrik .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-elektrik-minus .sz-fachkante-elektrik { display: inline; stroke: var(--bild-licht-rot); } .regal-elektrik-minus .sz-ts-elektrik .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-elektrik-bau .sz-fachbau-elektrik { display: inline; }
.regal-filtersatz-knapp .sz-fachkante-filtersatz { display: inline; stroke: var(--bild-lack-gelb); } .regal-filtersatz-knapp .sz-ts-filtersatz .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-filtersatz-minus .sz-fachkante-filtersatz { display: inline; stroke: var(--bild-licht-rot); } .regal-filtersatz-minus .sz-ts-filtersatz .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-filtersatz-bau .sz-fachbau-filtersatz { display: inline; }
.regal-glas-knapp .sz-fachkante-glas { display: inline; stroke: var(--bild-lack-gelb); } .regal-glas-knapp .sz-ts-glas .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-glas-minus .sz-fachkante-glas { display: inline; stroke: var(--bild-licht-rot); } .regal-glas-minus .sz-ts-glas .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-glas-bau .sz-fachbau-glas { display: inline; }
.regal-kuehler-knapp .sz-fachkante-kuehler { display: inline; stroke: var(--bild-lack-gelb); } .regal-kuehler-knapp .sz-ts-kuehler .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-kuehler-minus .sz-fachkante-kuehler { display: inline; stroke: var(--bild-licht-rot); } .regal-kuehler-minus .sz-ts-kuehler .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-kuehler-bau .sz-fachbau-kuehler { display: inline; }
.regal-kupplung-knapp .sz-fachkante-kupplung { display: inline; stroke: var(--bild-lack-gelb); } .regal-kupplung-knapp .sz-ts-kupplung .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-kupplung-minus .sz-fachkante-kupplung { display: inline; stroke: var(--bild-licht-rot); } .regal-kupplung-minus .sz-ts-kupplung .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-kupplung-bau .sz-fachbau-kupplung { display: inline; }
.regal-luftfederbalg-knapp .sz-fachkante-luftfederbalg { display: inline; stroke: var(--bild-lack-gelb); } .regal-luftfederbalg-knapp .sz-ts-luftfederbalg .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-luftfederbalg-minus .sz-fachkante-luftfederbalg { display: inline; stroke: var(--bild-licht-rot); } .regal-luftfederbalg-minus .sz-ts-luftfederbalg .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-luftfederbalg-bau .sz-fachbau-luftfederbalg { display: inline; }
.regal-motoroel-knapp .sz-fachkante-motoroel { display: inline; stroke: var(--bild-lack-gelb); } .regal-motoroel-knapp .sz-ts-motoroel .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-motoroel-minus .sz-fachkante-motoroel { display: inline; stroke: var(--bild-licht-rot); } .regal-motoroel-minus .sz-ts-motoroel .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-motoroel-bau .sz-fachbau-motoroel { display: inline; }
.regal-plane-knapp .sz-fachkante-plane { display: inline; stroke: var(--bild-lack-gelb); } .regal-plane-knapp .sz-ts-plane .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-plane-minus .sz-fachkante-plane { display: inline; stroke: var(--bild-licht-rot); } .regal-plane-minus .sz-ts-plane .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-plane-bau .sz-fachbau-plane { display: inline; }
.regal-radlager-knapp .sz-fachkante-radlager { display: inline; stroke: var(--bild-lack-gelb); } .regal-radlager-knapp .sz-ts-radlager .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-radlager-minus .sz-fachkante-radlager { display: inline; stroke: var(--bild-licht-rot); } .regal-radlager-minus .sz-ts-radlager .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-radlager-bau .sz-fachbau-radlager { display: inline; }
.regal-reifen-knapp .sz-fachkante-reifen { display: inline; stroke: var(--bild-lack-gelb); } .regal-reifen-knapp .sz-ts-reifen .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-reifen-minus .sz-fachkante-reifen { display: inline; stroke: var(--bild-licht-rot); } .regal-reifen-minus .sz-ts-reifen .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-reifen-bau .sz-fachbau-reifen { display: inline; }
.regal-windschutzscheibe-knapp .sz-fachkante-windschutzscheibe { display: inline; stroke: var(--bild-lack-gelb); } .regal-windschutzscheibe-knapp .sz-ts-windschutzscheibe .sz-slotplatte { stroke: var(--bild-lack-gelb); }
.regal-windschutzscheibe-minus .sz-fachkante-windschutzscheibe { display: inline; stroke: var(--bild-licht-rot); } .regal-windschutzscheibe-minus .sz-ts-windschutzscheibe .sz-slotplatte { stroke: var(--bild-licht-rot); }
.regal-windschutzscheibe-bau .sz-fachbau-windschutzscheibe { display: inline; }
.rampe-0 .sz-rp-1 { display: none; } .rampe-0 .sz-rp-2 { display: none; } .rampe-0 .sz-rp-3 { display: none; } .rampe-0 .sz-rp-4 { display: none; }
.rampe-1 .sz-rp-1 { display: inline; } .rampe-1 .sz-rp-2 { display: none; } .rampe-1 .sz-rp-3 { display: none; } .rampe-1 .sz-rp-4 { display: none; }
.rampe-2 .sz-rp-1 { display: inline; } .rampe-2 .sz-rp-2 { display: inline; } .rampe-2 .sz-rp-3 { display: none; } .rampe-2 .sz-rp-4 { display: none; }
.rampe-3 .sz-rp-1 { display: inline; } .rampe-3 .sz-rp-2 { display: inline; } .rampe-3 .sz-rp-3 { display: inline; } .rampe-3 .sz-rp-4 { display: none; }
.rampe-4 .sz-rp-1 { display: inline; } .rampe-4 .sz-rp-2 { display: inline; } .rampe-4 .sz-rp-3 { display: inline; } .rampe-4 .sz-rp-4 { display: inline; }
/* place tile ort_lager: --lager-fuell (0..1, default .75), 12 pallet places */
.sz-ol-0 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 0) * 1000), 1); } .sz-ol-1 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 1) * 1000), 1); } .sz-ol-2 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 2) * 1000), 1); } .sz-ol-3 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 3) * 1000), 1); } .sz-ol-4 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 4) * 1000), 1); } .sz-ol-5 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 5) * 1000), 1); } .sz-ol-6 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 6) * 1000), 1); } .sz-ol-7 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 7) * 1000), 1); } .sz-ol-8 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 8) * 1000), 1); } .sz-ol-9 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 9) * 1000), 1); } .sz-ol-10 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 10) * 1000), 1); } .sz-ol-11 { opacity: clamp(0, calc((var(--lager-fuell, .75) * 12 - 11) * 1000), 1); }
/* workshop: per bay state / figures / progress; queue lamps */
.sz-wbf-2, .sz-wbbau { display: none; }
.sz-wbampel { fill: var(--bild-lack-see); filter: brightness(1.9); }
.sz-schlange { fill: var(--bild-reifen); stroke: var(--bild-zier); stroke-opacity: .4; stroke-width: .3; }
.bucht-1-figuren-0 .sz-wb-1 .sz-wbf { display: none; } .bucht-1-figuren-2 .sz-wb-1 .sz-wbf-2 { display: inline; }
.bucht-1-wartet .sz-wb-1 .sz-wbf { display: none; } .bucht-1-wartet .sz-wbampel-1 { fill: var(--bild-leuchte); }
.bucht-1-frei .sz-wb-1, .bucht-1-bau .sz-wb-1 { display: none; } .bucht-1-bau .sz-wbbau-1 { display: inline; }
.bucht-1-frei .sz-wbampel-1 { fill: var(--bild-reifen); filter: none; } .bucht-1-bau .sz-wbampel-1 { fill: var(--bild-licht-rot); filter: brightness(1.3); }
.bucht-2-figuren-0 .sz-wb-2 .sz-wbf { display: none; } .bucht-2-figuren-2 .sz-wb-2 .sz-wbf-2 { display: inline; }
.bucht-2-wartet .sz-wb-2 .sz-wbf { display: none; } .bucht-2-wartet .sz-wbampel-2 { fill: var(--bild-leuchte); }
.bucht-2-frei .sz-wb-2, .bucht-2-bau .sz-wb-2 { display: none; } .bucht-2-bau .sz-wbbau-2 { display: inline; }
.bucht-2-frei .sz-wbampel-2 { fill: var(--bild-reifen); filter: none; } .bucht-2-bau .sz-wbampel-2 { fill: var(--bild-licht-rot); filter: brightness(1.3); }
.bucht-3-figuren-0 .sz-wb-3 .sz-wbf { display: none; } .bucht-3-figuren-2 .sz-wb-3 .sz-wbf-2 { display: inline; }
.bucht-3-wartet .sz-wb-3 .sz-wbf { display: none; } .bucht-3-wartet .sz-wbampel-3 { fill: var(--bild-leuchte); }
.bucht-3-frei .sz-wb-3, .bucht-3-bau .sz-wb-3 { display: none; } .bucht-3-bau .sz-wbbau-3 { display: inline; }
.bucht-3-frei .sz-wbampel-3 { fill: var(--bild-reifen); filter: none; } .bucht-3-bau .sz-wbampel-3 { fill: var(--bild-licht-rot); filter: brightness(1.3); }
.bucht-4-figuren-0 .sz-wb-4 .sz-wbf { display: none; } .bucht-4-figuren-2 .sz-wb-4 .sz-wbf-2 { display: inline; }
.bucht-4-wartet .sz-wb-4 .sz-wbf { display: none; } .bucht-4-wartet .sz-wbampel-4 { fill: var(--bild-leuchte); }
.bucht-4-frei .sz-wb-4, .bucht-4-bau .sz-wb-4 { display: none; } .bucht-4-bau .sz-wbbau-4 { display: inline; }
.bucht-4-frei .sz-wbampel-4 { fill: var(--bild-reifen); filter: none; } .bucht-4-bau .sz-wbampel-4 { fill: var(--bild-licht-rot); filter: brightness(1.3); }
.buehne-0 .sz-wbampel-1, .buehne-0 .sz-wbampel-2, .buehne-0 .sz-wbampel-3, .buehne-0 .sz-wbampel-4 { fill: var(--bild-reifen); filter: none; }
.buehne-1 .sz-wbampel-2, .buehne-1 .sz-wbampel-3, .buehne-1 .sz-wbampel-4 { fill: var(--bild-reifen); filter: none; }
.buehne-2 .sz-wbampel-3, .buehne-2 .sz-wbampel-4 { fill: var(--bild-reifen); filter: none; }
.buehne-3 .sz-wbampel-4 { fill: var(--bild-reifen); filter: none; }
.schlange-1 .sz-schlange-1 { fill: var(--bild-leuchte); filter: brightness(1.5); }
.schlange-2 .sz-schlange-1, .schlange-2 .sz-schlange-2 { fill: var(--bild-leuchte); filter: brightness(1.5); }
.schlange-3 .sz-schlange-1, .schlange-3 .sz-schlange-2, .schlange-3 .sz-schlange-3 { fill: var(--bild-leuchte); filter: brightness(1.5); }
.schlange-4 .sz-schlange-1, .schlange-4 .sz-schlange-2, .schlange-4 .sz-schlange-3, .schlange-4 .sz-schlange-4 { fill: var(--bild-leuchte); filter: brightness(1.5); }
/* construction crews: --trupps-einsatz (0..4, default 4), --trupps-frei (0..4, default 0), --haus-belegt (0..1, default .5) */
.sz-truppampel-aus { fill: var(--bild-reifen); } .sz-hausfenster { fill: var(--bild-licht-warm); }
.sz-trupp-1, .sz-truppampel-1 { opacity: clamp(0, calc((var(--trupps-einsatz, 4) - 0) * 1000), 1); } .sz-frei-1 { opacity: clamp(0, calc((var(--trupps-frei, 0) - 0) * 1000), 1); } .sz-hb-1 { opacity: clamp(0, calc((var(--haus-belegt, .5) * 4 - 0) * 1000), 1); }
.sz-trupp-2, .sz-truppampel-2 { opacity: clamp(0, calc((var(--trupps-einsatz, 4) - 1) * 1000), 1); } .sz-frei-2 { opacity: clamp(0, calc((var(--trupps-frei, 0) - 1) * 1000), 1); } .sz-hb-2 { opacity: clamp(0, calc((var(--haus-belegt, .5) * 4 - 1) * 1000), 1); }
.sz-trupp-3, .sz-truppampel-3 { opacity: clamp(0, calc((var(--trupps-einsatz, 4) - 2) * 1000), 1); } .sz-frei-3 { opacity: clamp(0, calc((var(--trupps-frei, 0) - 2) * 1000), 1); } .sz-hb-3 { opacity: clamp(0, calc((var(--haus-belegt, .5) * 4 - 2) * 1000), 1); }
.sz-trupp-4, .sz-truppampel-4 { opacity: clamp(0, calc((var(--trupps-einsatz, 4) - 3) * 1000), 1); } .sz-frei-4 { opacity: clamp(0, calc((var(--trupps-frei, 0) - 3) * 1000), 1); } .sz-hb-4 { opacity: clamp(0, calc((var(--haus-belegt, .5) * 4 - 3) * 1000), 1); }
/* drive: spur-1 … spur-6 lanes in use, --spur-n-anteil (0..1) moves the rig + tag along its lane */
.sz-spur { display: none; } .sz-spurlicht { fill: var(--bild-licht-warm); }
.sz-spurlinie { fill: none; stroke: var(--bild-leuchte); stroke-opacity: .4; stroke-width: .5; stroke-dasharray: 2 2; }
.sz-spurwagen { transition: transform .8s ease; }
.spur-1 .sz-spur-1 { display: inline; }
.sz-spurwagen-1 { transform: translate(calc(var(--spur-1-anteil, 0) * 322.5px), calc(var(--spur-1-anteil, 0) * 186.2px)); }
.spur-2 .sz-spur-1, .spur-2 .sz-spur-2 { display: inline; }
.sz-spurwagen-2 { transform: translate(calc(var(--spur-2-anteil, 0) * 322.5px), calc(var(--spur-2-anteil, 0) * 186.2px)); }
.spur-3 .sz-spur-1, .spur-3 .sz-spur-2, .spur-3 .sz-spur-3 { display: inline; }
.sz-spurwagen-3 { transform: translate(calc(var(--spur-3-anteil, 0) * 322.5px), calc(var(--spur-3-anteil, 0) * 186.2px)); }
.spur-4 .sz-spur-1, .spur-4 .sz-spur-2, .spur-4 .sz-spur-3, .spur-4 .sz-spur-4 { display: inline; }
.sz-spurwagen-4 { transform: translate(calc(var(--spur-4-anteil, 0) * 322.5px), calc(var(--spur-4-anteil, 0) * 186.2px)); }
.spur-5 .sz-spur-1, .spur-5 .sz-spur-2, .spur-5 .sz-spur-3, .spur-5 .sz-spur-4, .spur-5 .sz-spur-5 { display: inline; }
.sz-spurwagen-5 { transform: translate(calc(var(--spur-5-anteil, 0) * 322.5px), calc(var(--spur-5-anteil, 0) * 186.2px)); }
.spur-6 .sz-spur-1, .spur-6 .sz-spur-2, .spur-6 .sz-spur-3, .spur-6 .sz-spur-4, .spur-6 .sz-spur-5, .spur-6 .sz-spur-6 { display: inline; }
.sz-spurwagen-6 { transform: translate(calc(var(--spur-6-anteil, 0) * 322.5px), calc(var(--spur-6-anteil, 0) * 186.2px)); }
/* used yard: gebraucht-0 … gebraucht-13 = vehicles standing (default all) */
.gebraucht-0 .sz-gb-1, .gebraucht-0 .sz-gb-2, .gebraucht-0 .sz-gb-3, .gebraucht-0 .sz-gb-4, .gebraucht-0 .sz-gb-5, .gebraucht-0 .sz-gb-6, .gebraucht-0 .sz-gb-7, .gebraucht-0 .sz-gb-8, .gebraucht-0 .sz-gb-9, .gebraucht-0 .sz-gb-10, .gebraucht-0 .sz-gb-11, .gebraucht-0 .sz-gb-12, .gebraucht-0 .sz-gb-13 { display: none; }
.gebraucht-1 .sz-gb-2, .gebraucht-1 .sz-gb-3, .gebraucht-1 .sz-gb-4, .gebraucht-1 .sz-gb-5, .gebraucht-1 .sz-gb-6, .gebraucht-1 .sz-gb-7, .gebraucht-1 .sz-gb-8, .gebraucht-1 .sz-gb-9, .gebraucht-1 .sz-gb-10, .gebraucht-1 .sz-gb-11, .gebraucht-1 .sz-gb-12, .gebraucht-1 .sz-gb-13 { display: none; }
.gebraucht-2 .sz-gb-3, .gebraucht-2 .sz-gb-4, .gebraucht-2 .sz-gb-5, .gebraucht-2 .sz-gb-6, .gebraucht-2 .sz-gb-7, .gebraucht-2 .sz-gb-8, .gebraucht-2 .sz-gb-9, .gebraucht-2 .sz-gb-10, .gebraucht-2 .sz-gb-11, .gebraucht-2 .sz-gb-12, .gebraucht-2 .sz-gb-13 { display: none; }
.gebraucht-3 .sz-gb-4, .gebraucht-3 .sz-gb-5, .gebraucht-3 .sz-gb-6, .gebraucht-3 .sz-gb-7, .gebraucht-3 .sz-gb-8, .gebraucht-3 .sz-gb-9, .gebraucht-3 .sz-gb-10, .gebraucht-3 .sz-gb-11, .gebraucht-3 .sz-gb-12, .gebraucht-3 .sz-gb-13 { display: none; }
.gebraucht-4 .sz-gb-5, .gebraucht-4 .sz-gb-6, .gebraucht-4 .sz-gb-7, .gebraucht-4 .sz-gb-8, .gebraucht-4 .sz-gb-9, .gebraucht-4 .sz-gb-10, .gebraucht-4 .sz-gb-11, .gebraucht-4 .sz-gb-12, .gebraucht-4 .sz-gb-13 { display: none; }
.gebraucht-5 .sz-gb-6, .gebraucht-5 .sz-gb-7, .gebraucht-5 .sz-gb-8, .gebraucht-5 .sz-gb-9, .gebraucht-5 .sz-gb-10, .gebraucht-5 .sz-gb-11, .gebraucht-5 .sz-gb-12, .gebraucht-5 .sz-gb-13 { display: none; }
.gebraucht-6 .sz-gb-7, .gebraucht-6 .sz-gb-8, .gebraucht-6 .sz-gb-9, .gebraucht-6 .sz-gb-10, .gebraucht-6 .sz-gb-11, .gebraucht-6 .sz-gb-12, .gebraucht-6 .sz-gb-13 { display: none; }
.gebraucht-7 .sz-gb-8, .gebraucht-7 .sz-gb-9, .gebraucht-7 .sz-gb-10, .gebraucht-7 .sz-gb-11, .gebraucht-7 .sz-gb-12, .gebraucht-7 .sz-gb-13 { display: none; }
.gebraucht-8 .sz-gb-9, .gebraucht-8 .sz-gb-10, .gebraucht-8 .sz-gb-11, .gebraucht-8 .sz-gb-12, .gebraucht-8 .sz-gb-13 { display: none; }
.gebraucht-9 .sz-gb-10, .gebraucht-9 .sz-gb-11, .gebraucht-9 .sz-gb-12, .gebraucht-9 .sz-gb-13 { display: none; }
.gebraucht-10 .sz-gb-11, .gebraucht-10 .sz-gb-12, .gebraucht-10 .sz-gb-13 { display: none; }
.gebraucht-11 .sz-gb-12, .gebraucht-11 .sz-gb-13 { display: none; }
.gebraucht-12 .sz-gb-13 { display: none; }
/* phone crops (_mobil files): figures and badge plates larger, scaled about their feet / tip */
.sz-mobil .sz-figur { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(1.45); }
.sz-mobil .sz-slot { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(1.35); }

/* ═══ v3: ds/hp.css ═══ */
/* ==========================================================================
   Dispolotse · Design system v3 „Luxus" · ds/hp.css — homepage layout
   ========================================================================== */
.bahn { max-width: var(--breite); margin: 0 auto; padding: 0 var(--ab5); }
.hp-kopf { position: sticky; top: 0; z-index: 40; background: var(--glas); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--rand); }
.hp-kopf-innen { display: flex; align-items: center; gap: var(--ab5); height: 68px; }
.hp-marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.hp-marke:hover { text-decoration: none; }
.hp-nav { display: flex; gap: 4px; flex: 1; }
.hp-nav a { color: var(--matt); font-weight: 600; font-size: .9rem; padding: 8px 12px; border-radius: var(--rd-voll); text-decoration: none; }
.hp-nav a:hover { color: var(--text); }
.hp-nav a[aria-current="page"] { color: var(--text); background: var(--karte); box-shadow: var(--schatten-klein); }
.hp-rechts { display: flex; align-items: center; gap: var(--ab2); }

.held { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; }
.held-szene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-1 { stop-color: var(--himmel1); } .hs-2 { stop-color: var(--himmel2); }
.so-1 { stop-color: var(--sonne); stop-opacity: .45; } .so-2 { stop-color: var(--sonne); stop-opacity: 0; }
.st-1 { stop-color: var(--strasse); stop-opacity: .4; } .st-2 { stop-color: var(--strasse); stop-opacity: 1; }
.sterne circle { fill: var(--stern); opacity: var(--stern-deckung); }
.berg-fern { fill: var(--fernstes); } .berg-nah { fill: var(--ferne); }
.mittellinie { stroke: var(--ton); stroke-width: 3; stroke-dasharray: 18 22; opacity: .7; }
.held::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(transparent, var(--grund)); pointer-events: none; }
.held-innen { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--ab7); align-items: center; padding-top: var(--ab8); padding-bottom: var(--ab9); width: 100%; }
.held-text { display: flex; flex-direction: column; gap: var(--ab4); }
.chip.neu-ton { align-self: flex-start; color: var(--text-gold); background: var(--tonhauch); border-color: var(--tonhauch2); height: 30px; padding: 0 14px; font-size: .76rem; }
.held-unter { font-size: 1.12rem; color: var(--matt); max-width: 46ch; line-height: 1.6; }
.held-punkte { display: flex; gap: var(--ab4); color: var(--matt); font-size: .84rem; flex-wrap: wrap; }
.held-punkte span { display: inline-flex; align-items: center; gap: 6px; }
.held-punkte .i-k { color: var(--frei); }
.held-vorschau { padding: var(--ab5); transform: rotate(-1.5deg); box-shadow: var(--schatten-hoch), var(--leuchten); max-width: 420px; justify-self: end; width: 100%; }
.vs-route { font-size: 2rem; font-weight: 540; line-height: 1.1; margin-bottom: 4px; }
.held-vorschau meter { margin: var(--ab4) 0; }
.vs-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ab3); }
.vs-zahlen .zahl { font-size: 1.5rem; }
.vs-zahlen small { font-family: var(--schrift); font-size: .72rem; color: var(--matt); font-weight: 600; }

.live-band { position: relative; z-index: 2; margin-top: calc(-1 * var(--ab8)); }
.live-karte { padding: var(--ab4) var(--ab5) var(--ab5); }
.live-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ab3); }
.live-gitter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } /* 07.10.: + „Aktive Konten" (Marco) */
.live-kachel { padding: 0 var(--ab5); border-left: 1px solid var(--rand); }
.live-kachel:first-child { padding-left: 0; border-left: 0; }
.lw { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 520; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.spur { width: 100%; height: 26px; margin-top: 6px; }
.spur path { fill: none; stroke: var(--ton); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.spur.blau path { stroke: var(--blau); }

.hp-zwei { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--ab4); margin-top: var(--ab6); margin-bottom: var(--ab7); }
.karten-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab5); padding: var(--ab5); align-items: center; }
.teaser-text { display: flex; flex-direction: column; gap: var(--ab3); align-items: flex-start; }
.teaser-text .t-titel { font-size: 2rem; }
.teaser-liste { list-style: none; margin: 0; padding: 0; width: 100%; }
.teaser-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.teaser-liste li > span:nth-child(2) { flex: 1; min-width: 0; }
.teaser-liste b { display: block; font-size: .88rem; }
.teaser-liste small { color: var(--matt); font-size: .74rem; }
.teaser-karte { width: 100%; height: auto; }
.cluster circle { fill: var(--ton); stroke: var(--tonhauch2); stroke-width: 10; }
.cluster text { fill: var(--auf-ton); font: 800 11px var(--schrift); text-anchor: middle; }
.mk-punkt { fill: var(--ton); stroke: var(--karte); stroke-width: 2; }
.mk-punkt.blau { fill: var(--blau); }
.mk-route.blau-route { stroke: var(--blau); }

.download { display: flex; flex-direction: column; gap: var(--ab3); padding: var(--ab5); }
.download .t-titel { font-size: 1.9rem; }
.gross-siegel { width: 52px; height: 52px; border-radius: 16px; }
.schritte { list-style: none; counter-reset: s; margin: 0 0 var(--ab2); padding: 0; display: grid; gap: 10px; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.schritte li::before { content: counter(s); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; color: var(--text-gold); border: 1px solid var(--tonhauch2); background: var(--tonhauch); }
.schritte b { font-size: .92rem; }
.schritte span { font-size: .8rem; color: var(--matt); }
.knopf.breit { width: 100%; }
.mitte { text-align: center; }

.hp-fuss { border-top: 1px solid var(--rand); padding: var(--ab5) 0; }
.hp-fuss-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--ab4); flex-wrap: wrap; }
.hp-fuss a { color: var(--matt); }

@media (max-width: 1100px) {
  .hp-nav { display: none; }
  .hp-marke { flex: 1; }
  .held-innen { grid-template-columns: 1fr; gap: var(--ab5); padding-top: var(--ab7); }
  .held-vorschau { justify-self: start; }
  .hp-zwei { grid-template-columns: 1fr; }
  .bahn { padding: 0 var(--ab4); }
}
@media (max-width: 700px) {
  .bahn { padding: 0 16px; }
  .hp-kopf-innen { gap: var(--ab2); height: 60px; }
  .nur-breit-hp { display: none; }
  .held { min-height: 0; }
  .held-innen { padding-top: var(--ab6); padding-bottom: var(--ab8); }
  .t-held { font-size: 2.4rem; }
  .held-unter { font-size: 1rem; }
  .held .knopfreihe .knopf { flex: 1; }
  .held-vorschau { display: none; }
  .live-karte { padding: var(--ab3) var(--ab4) var(--ab4); }
  .live-gitter { grid-template-columns: 1fr 1fr; row-gap: var(--ab4); }
  .live-kachel { padding: 0 0 0 var(--ab3); }
  .live-kachel:first-child { grid-column: 1 / -1; }
  .live-kachel:nth-child(even) { padding-left: 0; border-left: 0; }
  .lw { font-size: 1.9rem; }
  .karten-teaser { grid-template-columns: 1fr; padding: var(--ab4); }
  .teaser-karte { order: -1; }
  .download { padding: var(--ab4); }
  .hp-fuss-innen { flex-direction: column; align-items: flex-start; }
}
.horizont { fill: none; stroke: var(--ton); stroke-width: 1.2; opacity: .35; }
.download { justify-content: center; }
.cluster text { font-size: 12px; }
/* phone: grid tracks may shrink, long chip wraps */
.held-innen { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.held-text { min-width: 0; }
@media (max-width: 1100px) { .held-innen { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .chip.neu-ton { height: auto; min-height: 28px; white-space: normal; padding: 5px 12px; line-height: 1.3; }
  .held .knopfreihe { flex-wrap: nowrap; }
  .held .knopfreihe .knopf { min-width: 0; padding: 0 12px; }
}
/* phone header: Anmelden stays visible, Download becomes an icon, theme switch moves to the footer of the menu */
@media (max-width: 700px) {
  .nur-breit-hp { display: inline-flex; }
  .hp-rechts [data-farbe-wechsel] { display: none; }
  .hp-rechts .knopf.haupt span { display: none; }
  .hp-rechts .knopf.haupt { width: 38px; padding: 0; }
}

/* 07.10.2026: live HP claim „Anders. Frischer. Dispolotse – Realismus pur.“ (Marco) + SEO line under it */
.held-suchworte { display: block; margin-top: .9rem; font-family: var(--schrift); font-size: 1rem; font-weight: 500; letter-spacing: .01em; line-height: 1.4; color: var(--matt); }

/* ==========================================================================
   07.10.2026 — HP sub pages 05–08 (Was noch kommt · Wiki · Live-Karte · Fahrtenbuch)
   Prefix „us-" (Unterseite). Live HP wording, layout only. No long scrolling:
   tabs, closed folds, filter chips, search and paging (ds/hp-seiten.js).
   ========================================================================== */
.hp-menue-knopf { display: none; }
.us-menue-liste { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--ab4); }
.us-menue-zeile { display: flex; align-items: center; gap: var(--ab3); min-height: 52px; padding: 0 var(--ab3); border-radius: 14px; color: var(--text); font-weight: 640; text-decoration: none; border: 1px solid var(--rand); background: var(--flaeche); }
.us-menue-zeile span { flex: 1; }
.us-menue-zeile .i { color: var(--text-gold); }
.us-menue-zeile .i-k { color: var(--kante); }
.us-menue-zeile[aria-current="page"] { border-color: var(--tonhauch2); background: var(--tonhauch); box-shadow: inset 3px 0 0 var(--ton); }
.us-menue-zeile:hover { text-decoration: none; background: var(--tonhauch); }
.us-menue-knoepfe .knopf { flex: 1; }
.us-menue-sprache { margin-top: var(--ab4); }

.us-kopf { position: relative; padding: var(--ab6) 0 var(--ab4); border-bottom: 1px solid var(--rand); background: radial-gradient(90% 140% at 85% -20%, var(--tonhauch2), transparent 60%), linear-gradient(180deg, var(--grund2), var(--grund)); }
.us-kopf .t-titel { font-size: clamp(2rem, 3.2vw, 2.7rem); margin: var(--ab2) 0 var(--ab2); max-width: 34ch; }
.us-kopf-knapp { padding: var(--ab6) 0 var(--ab4); }
.us-kopf-knapp .t-titel { font-size: clamp(1.8rem, 3vw, 2.5rem); max-width: 30ch; }
.us-kopf-reihe { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ab5); flex-wrap: wrap; }
.us-kopf-reihe > div:first-child { min-width: 0; flex: 1 1 420px; }
.us-vorspann { color: var(--matt); font-size: 1.02rem; line-height: 1.55; max-width: 96ch; }
.us-beta { gap: 10px; }
.us-beta .live { color: var(--text-gold); }
.us-rumpf { padding-top: var(--ab5); padding-bottom: var(--ab7); }
.us-reiterzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--ab3); flex-wrap: wrap; margin-bottom: var(--ab4); }
.us-stand-zeile { display: inline-flex; align-items: center; gap: 6px; }
.us-stand-zeile .i-k { color: var(--text-gold); }
.us-panel[hidden], .us-unterpanel[hidden] { display: none; }
.us-werkzeug { display: flex; align-items: center; justify-content: space-between; gap: var(--ab3); flex-wrap: wrap; margin: var(--ab4) 0 var(--ab3); }
.us-filter { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.us-filter .zaehler, .filter .zaehler { font-size: .7rem; color: var(--kante); font-weight: 700; margin-left: 2px; }
.us-feld { width: min(300px, 100%); height: 40px; }
.us-blaettern { margin-top: var(--ab3); }
.us-leer { padding: var(--ab4); text-align: center; }
.us-satz { margin-bottom: var(--ab2); }

/* band + list rows */
.us-band { display: flex; align-items: center; justify-content: space-between; gap: var(--ab4); flex-wrap: wrap; padding: var(--ab4) var(--ab5); }
.us-band-text { flex: 1 1 420px; min-width: 0; }
.us-band-text .t-ueber { margin-bottom: 4px; }
.us-liste { list-style: none; margin: 0; padding: 0; }
.us-eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ab3); padding: 12px var(--ab4); border-bottom: 1px solid var(--rand); min-height: 60px; }
.us-eintrag:last-child { border-bottom: 0; }
.us-eintrag[hidden] { display: none; }
.us-eintrag:hover { background: var(--tonhauch); }
.us-marke { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--rand); background: var(--karte); color: var(--text-gold); }
.us-marke.live { color: var(--frei); animation: none; }
.us-marke.live::before { display: none; }
.us-marke.neu { color: var(--achtung); }
.us-marke.laeuft { color: var(--blau); }
.us-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.us-text b { font-weight: 660; }
.us-text span { font-size: .86rem; color: var(--matt); line-height: 1.45; }
.us-text .us-voll { color: var(--text); font-size: .92rem; }
.us-text small { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 680; }
.us-eintrag .chip { white-space: nowrap; }

/* road map rows: date block + fold */
.us-vorhaben { grid-template-columns: 64px minmax(0, 1fr); }
.us-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 56px; border-radius: 14px; background: var(--karte-verlauf) padding-box, var(--glanzkante-gold) border-box; border: 1px solid transparent; box-shadow: var(--schatten-klein); }
.us-datum b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--text-gold); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.us-datum small { font-size: .66rem; color: var(--kante); font-weight: 700; letter-spacing: .08em; }
.us-datum-wort { color: var(--text-gold); }
.us-klapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--ab3); flex-wrap: wrap; }
.us-klapp > summary::-webkit-details-marker { display: none; }
.us-klapp > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--kante); border-bottom: 2px solid var(--kante); transform: rotate(45deg); margin: 0 4px 4px auto; transition: transform var(--flott); flex: none; }
.us-klapp[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.us-klapp > summary b { font-weight: 660; flex: 1 1 260px; min-width: 0; }
.us-stand { font-size: .74rem; font-weight: 650; color: var(--text-gold); background: var(--tonhauch); border: 1px solid var(--tonhauch2); border-radius: var(--rd-voll); padding: 3px 10px; white-space: nowrap; }
.us-klapp-inhalt { padding-top: var(--ab2); color: var(--matt); font-size: .92rem; line-height: 1.6; max-width: 80ch; }
.us-klapp-inhalt p + p { margin-top: var(--ab2); }
.us-klapp-inhalt b, .us-klapp-inhalt strong { color: var(--text); }

.us-zwei { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--ab4); }
.us-naechst-karte, .us-hinweis, .us-wunsch { padding: var(--ab4) var(--ab5); display: flex; flex-direction: column; gap: var(--ab2); }
.us-naechst { list-style: none; counter-reset: n; margin: 0; padding: 0; display: grid; gap: 8px; }
.us-naechst li { counter-increment: n; display: flex; align-items: center; gap: 10px; font-weight: 620; }
.us-naechst li::before { content: counter(n); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: .85rem; color: var(--auf-ton); background: var(--gold-verlauf); }
.us-hinweis { justify-content: center; border-left: 3px solid var(--ton); }
.us-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.us-wege li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--matt); line-height: 1.5; }
.us-wege .i-k { color: var(--frei); margin-top: 3px; }
.us-wege b { color: var(--text); }

/* wiki start */
.us-suche-gross { height: 58px; margin-top: var(--ab4); width: min(640px, 100%); border-radius: 16px; background: var(--karte); box-shadow: var(--schatten); }
.us-suche-gross input { font-size: 1.05rem; }
.us-treffer { padding: var(--ab3) var(--ab4); display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--ab5); }
.us-treffer[hidden] { display: none; }
.us-treffer-zeile { display: flex; flex-direction: column; gap: 2px; padding: 10px var(--ab3); border-radius: 12px; color: var(--text); text-decoration: none; }
.us-treffer-zeile:hover { background: var(--tonhauch); text-decoration: none; }
.us-treffer-zeile small { font-size: .74rem; font-weight: 650; }
.us-treffer-zeile span { font-size: .84rem; line-height: 1.45; }
.us-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab3); }
.us-raster > li[hidden] { display: none; }
.us-themenkarte { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--ab4); color: var(--text); text-decoration: none; transition: transform var(--flott), box-shadow var(--flott); }
.us-themenkarte:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--schatten-hoch), var(--leuchten); }
.us-tk-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.us-themenkarte b { font-family: var(--serif); font-size: 1.12rem; font-weight: 580; line-height: 1.25; }
.us-themenkarte > span:not(.us-tk-kopf) { color: var(--matt); font-size: .86rem; line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.us-themenkarte small { font-family: var(--mono); font-size: .66rem; }

/* wiki article: nav · text · contents */
.us-wiki { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: var(--ab6); padding-top: var(--ab5); padding-bottom: var(--ab7); align-items: start; }
.us-klebend { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--ab2); }
.us-navgruppe { border-bottom: 1px solid var(--rand); }
.us-navgruppe > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; font-weight: 660; font-size: .88rem; }
.us-navgruppe > summary::-webkit-details-marker { display: none; }
.us-navgruppe .zaehler { font-size: .7rem; color: var(--kante); font-weight: 700; }
.us-navgruppe ul { list-style: none; margin: 0 0 var(--ab2); padding: 0; }
.us-navgruppe a { display: block; padding: 5px 10px; border-radius: 8px; font-size: .82rem; color: var(--matt); text-decoration: none; line-height: 1.35; }
.us-navgruppe a:hover { color: var(--text); background: var(--tonhauch); }
.us-navgruppe a[aria-current="page"] { color: var(--text); background: var(--tonhauch2); box-shadow: inset 2px 0 0 var(--ton); }
.us-artikel { min-width: 0; max-width: 760px; }
.us-krumen a { color: var(--matt); }
.us-artikel > .t-titel { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: var(--ab2) 0; }
.us-artikel-marke { margin-bottom: var(--ab3); }
.us-artikel > p, .us-artikel > ul { line-height: 1.75; font-size: 1.02rem; margin: 0 0 var(--ab3); }
.us-artikel > ul { padding-left: 1.2em; }
.us-artikel > ul li { margin-bottom: 6px; }
.us-artikel > ul li::marker { color: var(--ton); }
.us-artikel h2 { font-size: 1.65rem; margin: var(--ab6) 0 var(--ab3); scroll-margin-top: 90px; display: flex; align-items: baseline; gap: 10px; }
.us-anker { font-family: var(--schrift); font-size: .9rem; color: var(--kante); opacity: 0; text-decoration: none; }
.us-artikel h2:hover .us-anker { opacity: 1; }
.us-bild { margin: var(--ab4) 0 var(--ab5); max-width: 640px; }
.us-bild img { width: 100%; height: auto; display: block; border-radius: var(--rd-g); border: 1px solid var(--rand); box-shadow: var(--schatten); }
.us-bild figcaption { margin-top: 8px; font-size: .82rem; color: var(--matt); }
.us-tipp { margin: var(--ab4) 0; padding: var(--ab4) var(--ab5); border-radius: var(--rd); background: var(--tonhauch); border: 1px solid var(--tonhauch2); border-left: 3px solid var(--ton); }
.us-tipp p { line-height: 1.6; }
.us-tipp p:first-child { color: var(--text-gold); margin-bottom: 4px; }
.us-toc { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rand); }
.us-toc a { display: block; padding: 6px 12px; margin-left: -1px; border-left: 2px solid transparent; font-size: .84rem; color: var(--matt); text-decoration: none; }
.us-toc a:hover { color: var(--text); }
.us-toc a[aria-current="true"] { color: var(--text-gold); border-left-color: var(--ton); }
.us-toc-handy { display: none; padding: var(--ab3) var(--ab4); margin-bottom: var(--ab4); }
.us-toc-handy > summary { cursor: pointer; font-weight: 660; display: flex; justify-content: space-between; list-style: none; }
.us-toc-handy > summary::-webkit-details-marker { display: none; }
.us-toc-handy .us-toc { margin-top: var(--ab2); }
.us-blaettern-artikel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab3); margin-top: var(--ab6); }
.us-blaettern-artikel a { padding: var(--ab3) var(--ab4); color: var(--text); text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.us-blaettern-artikel a.weiter { text-align: right; }
.us-blaettern-artikel b { font-family: var(--serif); font-weight: 580; }

/* live map */
.us-karte-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ab4); margin-bottom: var(--ab4); }
.us-buehne { position: relative; padding: 0; overflow: hidden; height: min(62vh, 560px); min-height: 360px; }
.us-karte-bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.us-ebenen { position: absolute; top: var(--ab3); left: var(--ab3); right: var(--ab3); display: flex; gap: 6px; flex-wrap: wrap; }
.us-ebenen .filter { background: var(--glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); height: 30px; font-size: .78rem; }
.us-stempel { position: absolute; top: 58px; left: var(--ab3); padding: 6px 12px; border-radius: var(--rd-voll); background: var(--glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--rand); display: inline-flex; gap: 8px; align-items: center; }
.us-platzhalter { position: absolute; left: var(--ab3); bottom: var(--ab3); padding: 6px 12px; border-radius: var(--rd-voll); background: var(--glas); color: var(--matt); border: 1px dashed var(--naht); }
.us-zoom { position: absolute; right: var(--ab3); bottom: var(--ab3); display: flex; flex-direction: column; gap: 6px; }
.us-zoom .knopf { background: var(--glas); }
.us-karte-seite { display: flex; flex-direction: column; gap: var(--ab4); min-width: 0; }
.live-reich-karte { padding: var(--ab4); display: flex; flex-direction: column; gap: 4px; }
.us-minus { color: var(--rost); }
.us-klapp-i > summary { cursor: pointer; color: var(--ton); font-weight: 650; list-style: none; }
.us-klapp-i > summary::-webkit-details-marker { display: none; }
.us-klapp-i p { margin-top: 6px; line-height: 1.5; }
.us-punkte { list-style: none; margin: 0; padding: var(--ab4); display: flex; flex-direction: column; gap: var(--ab3); flex: 1; }
.us-punkte li { line-height: 1.5; font-size: .92rem; padding-left: 14px; border-left: 2px solid var(--tonhauch2); }
.us-zahlen { padding: var(--ab4) var(--ab5); margin-bottom: var(--ab4); }
.us-zahlen-gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--ab4); }
.us-zahlen-gitter.us-fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.us-zk { padding: 0 var(--ab4); border-left: 1px solid var(--rand); min-width: 0; }
.us-zahlen-gitter > .us-zk:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.us-fuenf > .us-zk:nth-child(4n+1) { border-left: 1px solid var(--rand); padding-left: var(--ab4); }
.us-fuenf > .us-zk:first-child { border-left: 0; padding-left: 0; }
.us-zk .lw { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.us-zk.erste .lw { color: var(--text-gold); }
.us-klapp-reihe { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--ab3); align-items: start; }
.us-klapp-reihe .us-klapp { padding: var(--ab3) var(--ab4); }
.us-wiki-link { display: flex; align-items: center; gap: 10px; padding: var(--ab3) var(--ab4); color: var(--text); font-weight: 640; text-decoration: none; white-space: nowrap; }
.us-wiki-link .i { color: var(--text-gold); }

/* fahrtenbuch */
.us-welt button { font-size: .86rem; }
.us-kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ab3); }
.us-kacheln.us-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--ab4); }
.us-kachel { padding: var(--ab3) var(--ab4); min-width: 0; }
.us-kachel[hidden] { display: none; }
.us-kachel .lw { font-size: clamp(1.25rem, 1.7vw, 1.65rem); line-height: 1.2; }
.us-stil-titel { margin: var(--ab5) 0 var(--ab2); }
.us-tafel-rahmen { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--ab4); }
.us-senkrecht { flex-direction: column; align-items: stretch; align-self: start; }
.us-senkrecht button { justify-content: flex-start; }
.us-tafel-karte { padding: var(--ab4) var(--ab5); }
.us-tafel[hidden] { display: none; }
.us-rang { list-style: none; margin: var(--ab3) 0 0; padding: 0; display: grid; gap: 4px; }
.us-rang li { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(80px, 34%) 90px; align-items: center; gap: var(--ab3); min-height: 46px; border-bottom: 1px solid var(--rand); }
.us-rang li:last-child { border-bottom: 0; }
.us-rang.klein li { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 38px; }
.us-rang-nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: .85rem; color: var(--text-gold); border: 1px solid var(--tonhauch2); background: var(--tonhauch); }
.us-rang li:first-child .us-rang-nr { color: var(--auf-ton); background: var(--gold-verlauf); border-color: transparent; }
.us-rang .mini { text-align: right; }
.us-fahrt { grid-template-columns: auto minmax(0, 1fr) auto; }
.us-rekorde { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab3); }
.us-rekord { padding: var(--ab4); display: flex; flex-direction: column; gap: 4px; }
.us-rekord .siegel { margin-bottom: 4px; }
.us-rekord .lw { font-size: 1.8rem; }
.us-fussnote { margin-top: var(--ab4); max-width: 90ch; }
.us-zwei-reiter { display: flex; gap: var(--ab2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.us-zwei-reiter .reiter { min-width: 0; }
.us-mehr-stat { padding: var(--ab3) var(--ab5); }
.us-mehr-stat > summary span { flex-basis: 100%; }
.us-mehr-stat .us-zahlen-gitter { margin: var(--ab4) 0; }
.us-mehr-stat .us-zwei { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--ab3); }
.us-mehr-stat h3 { font-size: 1.05rem; margin-bottom: var(--ab2); }
.us-balken { display: flex; height: 10px; border-radius: var(--rd-voll); overflow: hidden; background: var(--schiene); margin-bottom: 8px; }
.us-b-standard { width: 78%; background: var(--gold-verlauf); }
.us-b-renn { width: 22%; background: var(--rost); }
.us-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 8px; }
.us-punkt.standard { background: var(--ton); margin-left: 0; }
.us-punkt.renn { background: var(--rost); }

@media (max-width: 1100px) {
  .hp-menue-knopf { display: inline-flex; }
  .us-wiki { grid-template-columns: minmax(0, 1fr); }
  .us-seitennav, .us-seitenrand { display: none; }
  .us-toc-handy { display: block; }
  .us-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-karte-zeile { grid-template-columns: minmax(0, 1fr); }
  .us-karte-seite { flex-direction: row; }
  .us-karte-seite > * { flex: 1; }
  .us-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .us-klapp-reihe { grid-template-columns: 1fr 1fr; }
  .us-wiki-link { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .us-kopf { padding: var(--ab5) 0 var(--ab4); }
  .us-kopf .t-titel { font-size: 1.9rem; }
  .us-vorspann { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .us-kopf-wiki .us-vorspann { display: none; }
  .us-reiterzeile .reiter { width: 100%; }
  .us-werkzeug { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .us-werkzeug > * { min-width: 0; }
  .us-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .us-filter::-webkit-scrollbar { display: none; }
  .us-filter .filter { flex: none; }
  .us-feld { width: 100%; }
  .us-eintrag { padding: 10px var(--ab3); gap: 10px; }
  .us-eintrag .chip { display: none; }
  .us-band { padding: var(--ab3) var(--ab4); }
  .us-band-text .matt { font-size: .86rem; }
  .us-zwei { grid-template-columns: minmax(0, 1fr); }
  .us-hinweis { display: none; }
  .us-raster { grid-template-columns: minmax(0, 1fr); }
  .us-themenkarte > span:not(.us-tk-kopf) { -webkit-line-clamp: 2; }
  .us-themenkarte small { display: none; }
  .us-blaettern { justify-content: center; }
  .us-blaettern > .mini { display: none; }
  .us-buehne { height: 52vh; min-height: 300px; }
  .us-ebenen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .us-ebenen .filter { flex: none; }
  .us-karte-seite { flex-direction: column; }
  .us-punkte { display: none; }
  .us-zahlen { padding: var(--ab3) var(--ab4); }
  .us-zahlen-gitter, .us-zahlen-gitter.us-fuenf { grid-template-columns: 1fr 1fr; }
  .us-zahlen-gitter > .us-zk, .us-fuenf > .us-zk:nth-child(4n+1) { padding: 0 0 0 var(--ab3); border-left: 1px solid var(--rand); }
  .us-zahlen-gitter > .us-zk:nth-child(odd) { padding-left: 0; border-left: 0; }
  .us-zahlen-gitter > .us-zk.erste { grid-column: 1 / -1; }
  .us-zahlen-gitter > .us-zk.erste ~ .us-zk:nth-child(odd) { padding-left: var(--ab3); border-left: 1px solid var(--rand); }
  .us-zahlen-gitter > .us-zk.erste ~ .us-zk:nth-child(even) { padding-left: 0; border-left: 0; }
  .us-klapp-reihe { grid-template-columns: minmax(0, 1fr); }
  .us-kacheln, .us-kacheln.us-vier { grid-template-columns: 1fr 1fr; }
  .us-tafel-rahmen { grid-template-columns: minmax(0, 1fr); }
  .us-senkrecht { flex-direction: row; }
  .us-tafel-karte { padding: var(--ab3) var(--ab4); }
  .us-rang li { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .us-rang meter { display: none; }
  .us-rekorde { grid-template-columns: 1fr 1fr; }
  .us-rekord .lw { font-size: 1.3rem; }
  .us-mehr-stat .us-zwei { grid-template-columns: minmax(0, 1fr); }
  .us-blaettern-artikel { grid-template-columns: minmax(0, 1fr); }
  .us-artikel h2 { font-size: 1.4rem; }
  .us-welt { width: 100%; }
}

/* ==========================================================================
   HP rest pages 10–22 + 99 and the shared HP header row 2 (07.10.2026, prefix rs-)
   APPENDED block — nothing above changed.
   ========================================================================== */
/* header: row 1 = mark + actions, row 2 = the live section menu (12 entries, live order) */
.rs-platz { flex: 1; }
.rs-nav { display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 44px; border-top: 1px solid var(--rand); overflow-x: auto; scrollbar-width: none; }
.rs-nav::-webkit-scrollbar { display: none; }
.rs-nav a { flex: 0 0 auto; color: var(--matt); font-weight: 620; font-size: .82rem; padding: 6px 10px; border-radius: var(--rd-voll); text-decoration: none; white-space: nowrap; }
.rs-nav a:hover { color: var(--text); background: var(--tonhauch); }
.rs-nav a[aria-current="page"] { color: var(--text-gold); background: var(--tonhauch); box-shadow: inset 0 0 0 1px var(--tonhauch2); }
.rs-kopf .hp-kopf-innen { height: 64px; }

/* menu sheet: 2-column tiles, no scrolling on a phone */
.rs-menue-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: var(--ab4); }
.rs-menue-kachel { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--rand); background: var(--karte); color: var(--text); font-weight: 620; font-size: .86rem; line-height: 1.2; text-decoration: none; }
.rs-menue-kachel .i { flex: 0 0 auto; width: 18px; height: 18px; color: var(--text-gold); }
.rs-menue-kachel:hover { text-decoration: none; background: var(--tonhauch); }
.rs-menue-kachel[aria-current="page"] { border-color: var(--tonhauch2); background: var(--tonhauch); box-shadow: inset 3px 0 0 var(--ton); }
.rs-menue-recht { margin-top: var(--ab3); }
.rs-menue-recht a { color: var(--matt); }

/* footer */
.rs-fuss-links { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.rs-fuss-links a { color: var(--matt); }
.rs-fuss-links a:hover { color: var(--text); }
.rs-kleingedruckt { margin-top: var(--ab3); }
.rs-kleingedruckt summary { cursor: pointer; color: var(--kante); }
.rs-kleingedruckt p { margin-top: var(--ab2); max-width: 110ch; line-height: 1.55; }

/* page head with a picture on the right */
.rs-kopf-gitter { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--ab6); align-items: center; }
.rs-kopf-text { min-width: 0; }
.rs-kopfband .t-titel { max-width: 26ch; }
.rs-was-ist { margin-top: var(--ab3); color: var(--matt); font-size: .9rem; line-height: 1.6; max-width: 66ch; }
.rs-was-ist b { color: var(--text); }
.rs-geldsatz { margin-top: var(--ab3); padding: var(--ab3) var(--ab4); border-radius: 14px; border: 1px solid var(--tonhauch2); background: var(--tonhauch); font-size: .86rem; line-height: 1.55; color: var(--matt); max-width: 66ch; }
.rs-geldsatz b { color: var(--text); }
.rs-kopf-text .knopfreihe { margin-top: var(--ab4); }
.rs-buehne { padding: var(--ab3); overflow: hidden; }
.rs-buehne .rs-szene { width: 100%; height: auto; max-height: 300px; }
.rs-buehne-klein .rs-szene { max-height: 240px; }
.rs-beispiel { justify-self: end; }
.rs-punkte-karte { padding: var(--ab4) var(--ab5); }
.rs-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rs-punkte li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; line-height: 1.5; font-size: .92rem; }
.rs-punkte .i-k { color: var(--text-gold); margin-top: 2px; }
.rs-rumpf { display: grid; gap: var(--ab4); align-content: start; }
.rs-zwischen { margin-top: var(--ab2); }
.rs-reiter { justify-self: start; }
.rs-panel { margin-top: 0; }

/* cards with pictures (3 in a row; phone: side-swipe carousel instead of a long column) */
.rs-karten3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab4); }
.rs-bildkarte { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.rs-bild { margin: 0; }
.rs-bild img { display: block; width: 100%; height: auto; }
.rs-bildkarte .rs-bild img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.rs-bildkarte-text { padding: var(--ab4); display: grid; gap: 6px; }
.rs-bildkarte-text p { font-size: .88rem; line-height: 1.55; }
.rs-bildkarte-text a, .rs-live a { color: var(--text-gold); }
.rs-versprechen { display: grid; grid-template-columns: auto 1fr; column-gap: var(--ab3); row-gap: 4px; align-items: center; padding: var(--ab4); }
.rs-versprechen p { grid-column: 1 / -1; line-height: 1.55; }

/* picture + text (Einblicke, Dein Leben) */
.rs-schau { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ab5); align-items: center; }
.rs-schau .rs-bild { padding: 6px; overflow: hidden; }
.rs-schau .rs-bild img { border-radius: 12px; max-height: 420px; object-fit: contain; }
.rs-schau-text h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; margin: 4px 0 var(--ab2); }
.rs-schau-text > p { color: var(--matt); line-height: 1.6; }

/* live content classes, re-styled inside .rs-live */
.rs-live .aufschrift { color: var(--text-gold); }
.rs-live .liste { list-style: none; margin: var(--ab3) 0 0; padding: 0; display: grid; gap: 8px; }
.rs-live .liste li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: .9rem; line-height: 1.5; }
.rs-live .haken { color: var(--text-gold); font-weight: 700; }
.rs-live .leise { color: var(--matt); }
.rs-live .hinfuehrung { color: var(--matt); line-height: 1.6; margin-bottom: var(--ab3); }
.rs-live .kasten { padding: var(--ab4) var(--ab5); }
.rs-live .kasten h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin-bottom: var(--ab2); }
.rs-live .kasten p + p { margin-top: var(--ab2); }
.rs-live .kasten p { line-height: 1.6; color: var(--matt); }
.rs-live .kasten b { color: var(--text); }
.rs-live .warnkasten { border-color: rgba(232, 189, 85, .35); background: linear-gradient(180deg, rgba(232, 189, 85, .08), transparent) padding-box, var(--karte-verlauf) padding-box; }
.rs-live .zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab4); margin-top: var(--ab3); }
.rs-live .schritte { list-style: none; counter-reset: s; display: grid; gap: 10px; margin: 0 0 var(--ab3); padding: 0; }
.rs-live .schritte li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.rs-live .schritte li::before { content: counter(s); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; color: var(--auf-ton); background: var(--gold-verlauf); }
.rs-live .schritte span { color: var(--matt); font-size: .88rem; line-height: 1.5; }
.rs-live .vergleich-rahmen { padding: 0; overflow-x: auto; margin-top: var(--ab3); }
.rs-live .vergleich { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rs-live .vergleich th, .rs-live .vergleich td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rand); line-height: 1.45; }
.rs-live .vergleich thead th { color: var(--text-gold); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.rs-live .vergleich tbody th { color: var(--text); width: 22%; }
.rs-live .vergleich td { color: var(--matt); }
.rs-live .vergleich-fuss { margin-top: var(--ab3); font-size: .86rem; color: var(--matt); }
.rs-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab4); }
.rs-eins { max-width: 760px; }
.rs-mehrtext { padding: var(--ab4) var(--ab5); }
.rs-mehrtext p { line-height: 1.65; color: var(--matt); }
.rs-mehrtext p + p { margin-top: var(--ab3); }
.rs-mehrtext b { color: var(--text); }

/* Dein Leben: 4 short tiles */
.rs-kacheln4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ab3); }
.rs-kacheln4 li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: var(--ab3) var(--ab4); }
.rs-kacheln4 .i { grid-row: span 2; color: var(--text-gold); width: 26px; height: 26px; }
.rs-schlusszeile { display: flex; align-items: center; justify-content: space-between; gap: var(--ab4); flex-wrap: wrap; }

/* So realistisch: 9 tiles (phone: 3 per page) */
.rs-kacheln9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab3); }
.rs-kachel { display: grid; grid-template-columns: auto 1fr; gap: var(--ab3); align-items: start; padding: var(--ab4); }
.rs-kachel[hidden] { display: none; }
.rs-kachel b { display: block; margin-bottom: 4px; }
.rs-kachel p { line-height: 1.5; }

/* steps */
.rs-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ab3); }
.rs-schritte li { display: grid; align-content: start; gap: 6px; padding: var(--ab4); }
.rs-nr { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 1.05rem; color: var(--auf-ton); background: var(--gold-verlauf); box-shadow: var(--schatten-knopf); }
.rs-schritte span.mini { line-height: 1.55; }

/* Speditionen */
.rs-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ab3); min-width: 0; }
.rs-leiste > * { box-sizing: border-box; max-width: 100%; }
.rs-rumpf > * { min-width: 0; }
.rs-leiste .reiter button[aria-pressed="true"] { color: var(--text); background: var(--karte-verlauf) padding-box, var(--glanzkante) border-box; border: 1px solid transparent; box-shadow: var(--schatten-klein); }
.rs-schalter-zeile { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--matt); cursor: pointer; }
.rs-schalter-zeile input { accent-color: var(--ton); width: 18px; height: 18px; }
.rs-sortierung { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.rs-sortierung select { height: 40px; border-radius: 12px; border: 1px solid var(--rand); background: var(--mulde); color: var(--text); padding: 0 10px; font: inherit; font-size: .88rem; }
.rs-sped-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab3); }
.rs-sped { display: grid; gap: var(--ab2); align-content: start; padding: var(--ab4); }
.rs-sped[hidden] { display: none; }
.rs-sped-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ab3); align-items: center; }
.rs-sped-name { min-width: 0; }
.rs-sped-name h3 { overflow-wrap: break-word; hyphens: auto; line-height: 1.2; }
.rs-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: .8rem; letter-spacing: .04em; color: var(--auf-ton); background: var(--gold-verlauf); }
.rs-sped-text { font-size: .86rem; line-height: 1.5; color: var(--matt); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-sped-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding: var(--ab2) 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.rs-sped-zahlen div { min-width: 0; }
.rs-sped-zahlen dt { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kante); }
.rs-sped-zahlen dd { margin: 0; font-size: .98rem; font-weight: 600; }
.rs-sped-aufbau b { color: var(--text); font-weight: 650; }
.rs-anzahl { margin: 0; }
.rs-fussklapp { padding: var(--ab3) var(--ab4); }

/* Mitmachen */
.rs-discord { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ab4); align-items: center; padding: var(--ab4) var(--ab5); }
.rs-formular { padding: var(--ab4) var(--ab5); display: grid; gap: var(--ab2); }
.rs-vorschau { justify-self: start; height: auto; min-height: 28px; white-space: normal; padding: 5px 12px; line-height: 1.3; }
.rs-form { display: grid; gap: var(--ab3); margin-top: var(--ab2); }
.rs-wahl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rs-wahl legend { margin-bottom: 6px; }
.rs-radio { cursor: pointer; }
.rs-radio input { accent-color: var(--ton); margin: 0 6px 0 0; }
.rs-feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab3); }
.rs-feld { display: grid; gap: 6px; margin: 0; }
.rs-feld label { font-size: .84rem; font-weight: 600; }
.rs-feld input, .rs-feld textarea { width: 100%; min-height: 42px; border-radius: 12px; border: 1px solid var(--rand); background: var(--mulde); color: var(--text); padding: 9px 12px; font: inherit; font-size: .9rem; }
.rs-feld textarea { resize: vertical; min-height: 96px; }
.rs-feld input:focus, .rs-feld textarea:focus { outline: 2px solid var(--ton); outline-offset: 1px; }
.rs-haken { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .84rem; color: var(--matt); margin: 0; }
.rs-haken input { accent-color: var(--ton); width: 18px; height: 18px; margin-top: 2px; }
.rs-haken a { color: var(--text-gold); }

/* ETS2 und ATS */
.rs-welten { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: var(--ab2) var(--ab3); align-items: center; padding: var(--ab4) var(--ab4) var(--ab3); }
.rs-welten .rs-gespann { grid-column: 1; }
.rs-gespann { min-height: 64px; }
.rs-gespann svg { display: block; width: 100%; height: auto; max-height: 120px; }
.rs-abzeichen { grid-column: 2; grid-row: 1 / span 2; width: 72px; height: 72px; }
.rs-ats-panel { display: grid; gap: var(--ab3); }
.rs-ats-kurz { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--ab5); align-items: start; padding: var(--ab4) var(--ab5); border-radius: 18px; background: var(--karte); border: 1px solid var(--rand); }
.rs-ats-mehr { padding: var(--ab3) var(--ab4); }
.rs-ats-mehr-inhalt { padding-top: var(--ab3); }
.rs-schlussband { display: flex; align-items: center; justify-content: space-between; gap: var(--ab4); flex-wrap: wrap; padding: var(--ab4) var(--ab5); }

/* Download */
.rs-dl { display: grid; justify-items: center; gap: var(--ab2); text-align: center; padding: var(--ab5); }
.rs-klein-klapp summary { cursor: pointer; color: var(--kante); }

/* legal pages: readable long form, contents beside the text */
.rs-recht-wahl a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; color: var(--matt); font-weight: 640; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.rs-recht-wahl a[aria-current="page"] { color: var(--text); background: var(--karte-verlauf) padding-box, var(--glanzkante) border-box; border: 1px solid transparent; box-shadow: var(--schatten-klein); }
.rs-recht.mit-toc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--ab6); align-items: start; }
.rs-recht:not(.mit-toc) { max-width: 820px; }
.rs-klebend { position: sticky; top: 128px; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 6px; }
.rs-toc { list-style: none; margin: var(--ab2) 0 0; padding: 0; display: grid; gap: 2px; }
.rs-toc a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--matt); font-size: .82rem; line-height: 1.35; text-decoration: none; }
.rs-toc a:hover { color: var(--text); background: var(--tonhauch); }
.rs-toc-handy { display: none; padding: var(--ab3) var(--ab4); }
.rs-toc-handy summary { cursor: pointer; font-weight: 650; display: flex; justify-content: space-between; }
.rs-recht-text { max-width: 78ch; line-height: 1.7; }
.rs-recht-text h2 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: var(--ab6) 0 var(--ab2); scroll-margin-top: 130px; }
.rs-recht-text h3 { font-weight: 650; margin: var(--ab4) 0 var(--ab2); }
.rs-recht-text p, .rs-recht-text li { color: var(--matt); }
.rs-recht-text p + p { margin-top: var(--ab2); }
.rs-recht-text strong, .rs-recht-text b { color: var(--text); }
.rs-recht-text ul, .rs-recht-text ol { padding-left: 1.3em; margin: var(--ab2) 0; display: grid; gap: 4px; }
.rs-recht-text a { color: var(--text-gold); overflow-wrap: anywhere; }
.rs-recht-text blockquote { margin: var(--ab4) 0; padding: var(--ab3) var(--ab4); border-left: 3px solid var(--ton); background: var(--tonhauch); border-radius: 0 12px 12px 0; color: var(--matt); }
.rs-recht-text table { width: 100%; border-collapse: collapse; margin: var(--ab3) 0; font-size: .86rem; display: block; overflow-x: auto; }
.rs-recht-text th, .rs-recht-text td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
.rs-recht-text th { color: var(--text); }
.rs-recht-text code { font-family: var(--mono); font-size: .86em; overflow-wrap: anywhere; }
.rs-zurueck { margin-top: var(--ab6); }

/* 404 */
.rs-404 { padding-top: var(--ab7); padding-bottom: var(--ab7); }
.rs-404-karte { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--ab6); align-items: center; padding: var(--ab6); }
.rs-404-bild .rs-szene { width: 100%; height: auto; max-height: 300px; }

@media (max-width: 1100px) {
  .rs-nav { display: none; }
  .rs-kopf-gitter { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: var(--ab4); }
  .rs-karten3, .rs-sped-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-karten3.rs-versprechen-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-karten3 .rs-bildkarte:nth-child(3) { display: none; }
  .rs-kacheln4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-recht.mit-toc { grid-template-columns: minmax(0, 1fr); }
  .rs-recht-seite { display: none; }
  .rs-toc-handy { display: block; }
  .rs-ats-kurz { grid-template-columns: minmax(0, 1fr); gap: var(--ab3); }
  .rs-recht-text h2 { scroll-margin-top: 84px; }
}
@media (max-width: 700px) {
  .rs-kopf .hp-kopf-innen { height: 60px; }
  .rs-kopf-gitter { grid-template-columns: minmax(0, 1fr); }
  .rs-buehne, .rs-welten, .rs-punkte-karte { display: none; }
  .rs-kopfband .us-vorspann { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .rs-was-ist { display: none; }
  .rs-beispiel { justify-self: start; }
  /* phone: cards swipe sideways instead of stacking into a long column */
  .rs-karussell { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--ab3); padding-bottom: 6px; scrollbar-width: none; }
  .rs-karussell::-webkit-scrollbar { display: none; }
  .rs-karussell > * { scroll-snap-align: start; }
  .rs-karten3 .rs-bildkarte:nth-child(3) { display: flex; }
  .rs-karten3.rs-versprechen-reihe { grid-template-columns: minmax(0, 1fr); gap: var(--ab2); }
  .rs-versprechen { padding: var(--ab3); }
  .rs-versprechen p { display: none; }
  .rs-schau { grid-template-columns: minmax(0, 1fr); gap: var(--ab3); }
  .rs-schau .rs-bild img { max-height: 220px; }
  .rs-live .liste li { font-size: .86rem; }
  .rs-live .zweispalt, .rs-zwei, .rs-feldpaar { grid-template-columns: minmax(0, 1fr); }
  .rs-kacheln9, .rs-sped-gitter { grid-template-columns: minmax(0, 1fr); }
  .rs-kacheln4 { gap: var(--ab2); }
  .rs-kacheln4 li { padding: var(--ab2) var(--ab3); }
  .rs-schritte.rs-karussell { grid-template-columns: none; }
  .rs-schritte:not(.rs-karussell) { grid-template-columns: minmax(0, 1fr); gap: var(--ab2); }
  .rs-schritte:not(.rs-karussell) li { grid-template-columns: auto 1fr; column-gap: var(--ab3); padding: var(--ab3); }
  .rs-schritte:not(.rs-karussell) li .rs-nr { grid-row: span 2; }
  .rs-sortierung { margin-left: 0; }
  .rs-leiste .reiter, .rs-leiste .us-feld { width: 100%; }
  .rs-leiste .reiter button { flex: 1; }
  .rs-discord { grid-template-columns: auto 1fr; padding: var(--ab3) var(--ab4); }
  .rs-discord .knopf { grid-column: 1 / -1; }
  .rs-formular { padding: var(--ab3) var(--ab4); }
  .rs-recht-wahl { width: 100%; }
  .rs-recht-wahl a { flex: 1; justify-content: center; }
  .rs-404-karte { grid-template-columns: minmax(0, 1fr); padding: var(--ab4); gap: var(--ab3); }
  .rs-404-bild .rs-szene { max-height: 180px; }
  .rs-schlussband, .rs-ats-kurz { padding: var(--ab3) var(--ab4); }
  .rs-live .vergleich thead { display: none; }
  .rs-live .vergleich, .rs-live .vergleich tbody, .rs-live .vergleich tr, .rs-live .vergleich th, .rs-live .vergleich td { display: block; width: 100%; }
  .rs-live .vergleich tr { padding: 8px 0; border-bottom: 1px solid var(--rand); }
  .rs-live .vergleich th, .rs-live .vergleich td { border: 0; padding: 4px 12px; }
  .rs-live .vergleich td::before { content: attr(data-titel) ": "; color: var(--kante); font-size: .74rem; }
}

/* ═══ v3: ds/zs.css ═══ */
/* ==========================================================================
   Dispolotse · rd_design ds/zs.css — merge layer (07.10.2026, lane Zusammenführung)
   Loaded last on every HP page. Prefix zs- / rt- (legal pages). Only v3 tokens.
   ========================================================================== */

/* ── header: driver profile button ── */
.zs-profil-knopf { flex: 0 0 auto; }

/* ── 01 hero: night panorama behind, text left (P32) ── */
.held .held-szene.sz-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.held::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--grund) 86%, transparent) 0%, color-mix(in srgb, var(--grund) 62%, transparent) 38%, transparent 72%); }
@media (max-width: 1100px) {
  .held::before { background: linear-gradient(180deg, color-mix(in srgb, var(--grund) 55%, transparent) 0%, color-mix(in srgb, var(--grund) 80%, transparent) 60%, var(--grund) 100%); }
}

/* ── real live map in an iframe (01 teaser, 07) ── */
.zs-karte { display: block; width: 100%; height: 320px; border: 0; background: transparent; color-scheme: normal; }
.zs-karte-huelle { min-width: 0; align-self: center; }
.zs-buehne { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.zs-buehne .zs-karte { height: 560px; }
.zs-testdaten { margin: 0; padding: 8px 14px 10px; }
@media (max-width: 700px) { .zs-buehne .zs-karte { height: 420px; } }

/* ── scenes placed in page heads ── */
.zs-szene-kopf { padding: 0; overflow: hidden; align-self: center; max-width: 360px; width: 100%; }
.zs-szene-kopf .sz-bild { width: 100%; height: auto; }
@media (max-width: 700px) { .zs-szene-kopf { display: none; } }

/* ── legal pages: one section per view ── */
.rt-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ab3) var(--ab4); padding: var(--ab3) var(--ab4); margin: 0 0 var(--ab4); position: sticky; top: calc(var(--kopf-hoehe, 64px) + 8px); z-index: 3; }
.rt-suche { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 40px; border: 1px solid var(--rand); border-radius: var(--rd-voll, 999px); background: var(--mulde); }
.rt-suche input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; padding: 8px 0; }
.rt-suche:focus-within { border-color: var(--ton); }
.rt-schritte { display: flex; align-items: center; gap: 8px; }
.rt-zahl { font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: center; color: var(--text-gold, var(--ton)); font-weight: 600; }
.rt-ganz, .rt-teilweise { color: var(--matt); }
.rt-teilweise, .rt-drucken { display: none; }
.rt-alles .rt-teilweise, .rt-alles .rt-drucken { display: inline-flex; }
.rt-alles .rt-ganz, .rt-alles .rt-schritte { display: none; }
.rt-treffer { padding: var(--ab3) var(--ab4); margin: 0 0 var(--ab4); }
.rt-treffer p { margin: 0 0 6px; }
.rt-trefferliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow: auto; }
.rt-treffer-knopf { all: unset; cursor: pointer; display: block; padding: 6px 8px; border-radius: 8px; color: var(--text); overflow-wrap: break-word; hyphens: auto; }
.rt-treffer-knopf:hover, .rt-treffer-knopf:focus-visible { background: var(--tonhauch); outline: none; }
mark.rt-mark { background: var(--tonhauch2, var(--tonhauch)); color: inherit; border-radius: 3px; box-shadow: 0 0 0 1px var(--ton); }
.rt-an .rt-teil { display: none; }
.rt-an .rt-teil.rt-zeigen { display: block; }
.rt-teil > h2:first-child { margin-top: 0; }
.rt-fuss { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab3); margin-top: var(--ab6); }
.rt-fuss .knopf { flex-direction: column; align-items: flex-start; height: auto; min-height: 56px; padding: 8px 14px; text-align: left; white-space: normal; min-width: 0; }
.rt-fuss .knopf:last-child { align-items: flex-end; text-align: right; }
.rt-fuss .knopf span:last-child { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rt-fuss .knopf:disabled { visibility: hidden; }
.rs-toc a[aria-current] { color: var(--text-gold, var(--ton)); font-weight: 600; }
@media (max-width: 700px) {
  .rt-leiste { top: calc(var(--kopf-hoehe, 56px) + 4px); padding: 8px 10px; gap: 8px; }
  .rt-suche { flex-basis: 100%; }
  .rt-schritte { flex: 1; justify-content: space-between; }
}
@media print {
  .hp-kopf, .rs-menue, .hp-fuss, .rs-recht-seite, .rs-toc-handy, .rt-leiste, .rt-treffer, .rt-fuss, .rs-recht-wahl { display: none !important; }
  .rt-teil { display: block !important; }
  mark.rt-mark { background: none; box-shadow: none; }
}

/* ── text size A− A A+ (live groesse.js, v3 look) ── */
.groesse-wahl { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--rand); border-radius: var(--rd-voll, 999px); background: var(--mulde); flex: 0 0 auto; }
.groesse-wahl button { all: unset; cursor: pointer; min-width: 28px; height: 28px; padding: 0 6px; box-sizing: border-box; text-align: center; border-radius: var(--rd-voll, 999px); font-size: .8rem; font-weight: 600; color: var(--matt); line-height: 28px; }
.groesse-wahl button:hover, .groesse-wahl button:focus-visible { color: var(--text); background: var(--tonhauch); }
.groesse-wahl button[aria-pressed="true"] { color: var(--text-gold, var(--ton)); }
.groesse-wahl button:disabled { opacity: .35; cursor: default; }
@media (max-width: 1100px) { .hp-rechts .groesse-wahl { display: none; } }

/* ── live contact form: honeypot (as live) ── */
.falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 700px) { .zs-profil-knopf { display: none; } }

/* 01 teaser: the real map gets the wider half */
.karten-teaser { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
@media (max-width: 1100px) { .karten-teaser { grid-template-columns: minmax(0, 1fr); } }
.zs-buehne { height: auto !important; min-height: 0; aspect-ratio: auto !important; max-height: none !important; }

/* ==========================================================================
   Feinschliff 07.10. (second PC) — readability, hero on the night panorama, <= 2 phone screens
   ========================================================================== */

/* -- readability (Marco 12:3x „man kann fast nichts lesen"): bigger base, labels >= 13 px, line height 1.6,
      quiet text with >= 4.5:1 on page and cards in both themes -- */
html { font-size: 106.25%; }                              /* 17 px desktop/tablet */
@media (max-width: 700px) { html { font-size: 100%; } }   /* 16 px phone */
:root { --gr-klein: .9375rem; --gr-mini: .8125rem; --zh-text: 1.6; --kante: #8d949f; --matt: #b3b8c0; }
@media (prefers-color-scheme: light) { :root:not([data-farbe="dunkel"]) { --kante: #6c6457; --matt: #4f4a41; } }
:root[data-farbe="hell"] { --kante: #6c6457; --matt: #4f4a41; }
:root[data-farbe="dunkel"] { --kante: #8d949f; --matt: #b3b8c0; }
.aufschrift { font-size: .8125rem; }
.chip { font-size: .8125rem; }
.mini { font-size: var(--gr-mini); }
.us-zk .aufschrift, .live-kachel .aufschrift { font-size: .84rem; line-height: 1.35; }
.groesse-wahl button { font-size: .875rem; }

/* -- 01 hero: everything ON the night panorama keeps night colours in BOTH themes (light theme showed dark text on
      the dark sky, screenshot 12:33) + a dark scrim behind the whole text column down to the buttons (12:37) -- */
.held .held-text {
  --text: #f3efe6; --matt: #d9dce1; --kante: #c3c7ce; --text-gold: #f1c97a; --frei: #6fd3a2;
  --tonhauch: rgba(232, 166, 63, .16); --tonhauch2: rgba(232, 166, 63, .34); --rand: rgba(255, 255, 255, .16);
  color: var(--text);
}
.held .held-text .t-held { color: var(--text); }
.held .held-text .held-unter, .held .held-text .held-suchworte, .held .held-text .held-punkte { color: var(--matt); }
.held .held-text .held-unter { max-width: 42ch; }
.held .held-text .held-punkte .i-k { color: var(--frei); }
.held .held-text .chip { color: #f6dca3; background: rgba(12, 10, 6, .6); border-color: rgba(241, 201, 122, .45); }
.held .held-text .t-held, .held .held-text p { text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 18px rgba(0, 0, 0, .6); }
.held::before { background: linear-gradient(90deg, rgba(6, 7, 10, .92) 0%, rgba(6, 7, 10, .84) 38%, rgba(6, 7, 10, .45) 56%, rgba(6, 7, 10, .08) 72%, transparent 84%) !important; }
@media (max-width: 1100px) {
  .held::before { background: linear-gradient(180deg, rgba(6, 7, 10, .7) 0%, rgba(6, 7, 10, .82) 50%, rgba(6, 7, 10, .9) 100%) !important; }
}
/* the panorama truck: out from under the buttons/chips into the right half (behind the trip card) */
.held .sz-panorama .pano-lkw { transform: translate(1010px, 459px) scale(.7); }
.held .sz-panorama .pano-lkw-glanz { transform: translateX(450px); }
@media (max-width: 1100px) { .held .sz-panorama .pano-lkw, .held .sz-panorama .pano-lkw-glanz { display: none; } }

/* -- one line instead of trip lists (Marco 12:29) -- */
.zs-live-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 0; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.zs-live-zeile b { font-size: 1.5rem; color: var(--text-gold); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.zs-trenner { color: var(--kante); }
.zs-teaser-knoepfe { flex-wrap: wrap; gap: 8px; }
.zs-haendler-knopf .live { color: inherit; }

/* -- 07 live page -- */
.zs-live-kopf { padding: var(--ab4) 0 var(--ab3); }
.zs-live-rumpf { padding-top: var(--ab4); }
.zs-haendler { padding: var(--ab4); display: flex; flex-direction: column; gap: var(--ab3); }
.zs-haendler-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.zs-haendler-kopf .aufschrift { margin: 0; }
.zs-haendler-reihe { display: flex; flex-direction: column; gap: var(--ab3); }
.zs-haendler-szene { width: 100%; height: auto; display: block; border-radius: 14px; }
.zs-haendler-zahlen { display: grid; grid-template-columns: 1fr; gap: 10px; }
.zs-haendler-zahlen .us-zk { padding: 0; border: 0; }
.zs-haendler-zahlen .us-zk .lw { font-size: 1.6rem; margin: 0; }
.zs-zahlen-knapp .us-zahlen-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zs-zahlen-knapp .us-zahlen-gitter > .us-zk:first-child { border-left: 0; padding-left: 0; }
.zs-zahlen-knapp .us-zahlen-gitter > .us-zk:first-child .lw { color: var(--text-gold); }
.zs-klapp-zeile { margin-bottom: var(--ab4); }
.zs-klapp-punkte { margin: 0 0 var(--ab3); padding-left: 1.2em; display: grid; gap: 6px; }
.zs-reich-unten { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.zs-reich-unten .us-klapp-i { flex-basis: 100%; }
.zs-buehne .zs-karte { height: 520px; }
@media (max-width: 1100px) and (min-width: 701px) {
  .zs-haendler-reihe { flex-direction: row; align-items: center; }
  .zs-haendler-szene { width: 46%; }
  .zs-haendler-zahlen { flex: 1; }
}

/* -- phone: <= 2 screens (390 x 844) -- */
@media (max-width: 700px) {
  /* footer: brand + colour button in one row */
  .hp-fuss-innen { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
  .hp-fuss-innen > .mini, .hp-fuss-innen > nav { grid-column: 1 / -1; }
  .hp-fuss { padding: var(--ab4) 0 var(--ab3); }

  /* 01 start */
  .held-innen { padding-top: var(--ab4); padding-bottom: var(--ab5); }
  .held .t-held { font-size: 2.35rem; }
  .held-suchworte { margin-top: .5rem; font-size: .95rem; }
  .held-text { gap: var(--ab3); }
  .live-band .live-karte { padding: var(--ab3) var(--ab4); }
  .live-gitter .spur { display: none; }
  .live-gitter { row-gap: var(--ab3); }
  .live-kachel .lw { font-size: 1.7rem; }
  .karten-teaser { gap: var(--ab3); }
  .teaser-text .t-titel { font-size: 1.6rem; margin: 0; }
  .teaser-text { gap: var(--ab2); }
  .hp-zwei { margin-top: var(--ab4); margin-bottom: var(--ab4); gap: var(--ab3); }
  .download { gap: var(--ab2); }
  .download .gross-siegel { display: none; }
  .download .t-titel { font-size: 1.5rem; margin: 0; }
  .download .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .download .schritte li { grid-template-columns: 1fr; }
  .download .schritte li::before { grid-row: auto; width: 26px; height: 26px; margin-bottom: 4px; }
  .download .schritte span { font-size: .8125rem; line-height: 1.4; }

  /* 07 live */
  .zs-buehne .zs-karte { height: 360px; }
  .zs-live-rumpf { padding-top: var(--ab3); padding-bottom: var(--ab4); }
  .zs-live-rumpf .us-karte-zeile { margin-bottom: var(--ab3); gap: var(--ab3); }
  .zs-haendler { padding: var(--ab3); gap: 8px; }
  .zs-haendler-reihe { flex-direction: row; align-items: center; gap: 12px; }
  .zs-haendler-szene { width: 48%; flex: 0 0 48%; }
  .zs-haendler-zahlen { gap: 6px; }
  .zs-haendler-zahlen .us-zk .lw { font-size: 1.3rem; line-height: 1.15; }
  .zs-haendler-zahlen .us-zk .aufschrift { font-size: .8125rem; letter-spacing: .04em; }
  .zs-zahlen-knapp { margin-bottom: var(--ab3); }
  .zs-zahlen-knapp .us-zahlen-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .zs-zahlen-knapp .us-zahlen-gitter > .us-zk { padding: 0 0 0 10px !important; border-left: 1px solid var(--rand) !important; }
  .zs-zahlen-knapp .us-zahlen-gitter > .us-zk:first-child { padding-left: 0 !important; border-left: 0 !important; }
  .zs-zahlen-knapp .us-zk .lw { font-size: 1.35rem; }
  .zs-zahlen-knapp .us-zk .aufschrift { font-size: .8125rem; letter-spacing: .03em; }
  .zs-zahlen-knapp .us-zk .mini { display: none; }
  .zs-klapp-zeile { grid-template-columns: 1fr 1fr !important; gap: 8px; margin-bottom: var(--ab3); }
  .zs-klapp-zeile .us-klapp { padding: 10px 12px; }
  .zs-klapp-zeile .us-klapp summary b { font-size: .875rem; }
  .zs-klapp-zeile .us-klapp[open] { grid-column: 1 / -1; order: -1; }
  .zs-klapp-zeile .us-wiki-link { grid-column: 1 / -1; padding: 10px 12px; white-space: normal; }
  .zs-reich-unten { padding: var(--ab3) var(--ab4); }
  .zs-reich-unten .lw { font-size: 1.6rem; }

  /* 11 Speditionen: compact filter bar, both world tabs fully visible */
  .rs-kopfband .us-vorspann { -webkit-line-clamp: 2; }
  .rs-leiste { gap: 8px; }
  .rs-leiste .reiter { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .rs-leiste .reiter button { white-space: normal; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; min-width: 0; }
  .rs-leiste .us-feld { flex: 1 1 55%; min-width: 0; }
  .rs-sortierung { margin-left: 0; flex: 0 1 auto; }
  .rs-sortierung > .mini { display: none; }
  .rs-sped { padding: var(--ab3); }
  .rs-sped-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* -- menu sheet: text size row (twin of the header control, ds/zs.js) -- */
.zs-groesse-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: var(--ab3) 0; padding: 8px 12px; border: 1px solid var(--rand); border-radius: 14px; }
.zs-groesse-zeile .groesse-wahl button { min-width: 44px; height: 40px; line-height: 40px; font-size: 1rem; }

/* -- start page phone tabs (ds/zs.js) -- */
.zs-handy-reiter-bahn { display: none; }
@media (max-width: 700px) {
  .zs-tafeln-an .zs-handy-reiter-bahn { display: block; margin-top: var(--ab3); }
  .zs-handy-reiter { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zs-handy-reiter button { min-width: 0; padding-left: 4px; padding-right: 4px; }
  .zs-tafel-aus { display: none !important; }
  .zs-tafeln-an .live-band { margin-top: var(--ab3); }
  .zs-tafeln-an .hp-zwei { margin-top: var(--ab3); }
  .hp-fuss-innen > [data-farbe-platz], .hp-fuss-innen > .farb-knopf, .hp-fuss-innen > :nth-child(3) { grid-row: 1; grid-column: 2; }
  .zs-live-zeile { font-size: 1.05rem; gap: 2px 10px; }
  .zs-live-zeile b { font-size: 1.3rem; }
  .zs-teaser-knoepfe { flex-wrap: nowrap; width: 100%; }
  .zs-teaser-knoepfe .knopf { flex: 1; min-width: 0; padding: 0 10px; justify-content: center; }
  .zs-testdaten { padding: 6px 12px 8px; }
}
.held { min-height: 560px; }
@media (max-width: 700px) { .held { min-height: 0; } }
.rs-rumpf { padding-bottom: var(--ab5); }

/* ═══ v3: ds/l1.css ═══ */
/* ==========================================================================
   v3 lane L1 (07.10.2026) — the few rules the pipeline pages need on top of the showcase kit
   (start-page teaser grid, hero panorama behind the live hero, language switch next to the colour button).
   Only v3 tokens. Last block of the hp.css bundle.
   ========================================================================== */
.held { position: relative; overflow: hidden; }
.held-panorama { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.held-panorama svg { display: block; width: 100%; height: 100%; }
.held-innen { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--ab6, 32px); align-items: center; }
.held-vorschau img { display: block; width: 100%; height: auto; border-radius: var(--rd-m, 12px); }
.held-vorschau figure { margin: 0; }
.held-vorschau figcaption { margin-top: 10px; font-size: .9em; opacity: .8; text-align: center; }
.rs-teaser-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.rs-teaser { display: flex; flex-direction: column; gap: 6px; padding: 20px; text-decoration: none; color: inherit; }
.rs-teaser .t-ueber { display: block; }
.rs-teaser .mini { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.sprach-schalter { display: inline-flex; gap: 2px; margin-right: 6px; }
.sprach-schalter a { padding: 4px 8px; border-radius: 999px; text-decoration: none; }
.sprach-schalter a[aria-current="true"] { outline: 1px solid currentColor; }
@media (max-width: 700px) {
  .held-innen { grid-template-columns: 1fr; }
  .rs-teaser-gitter { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rs-teaser { padding: 14px; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .rs-teaser-gitter { grid-template-columns: repeat(3, 1fr); }
}
/* phone: no sideways page scroll (shots 07.10. 12:5x: hero + header ran past 390 px) */
.held-text, .held-innen > * { min-width: 0; max-width: 100%; }
.held .beta-band, .held .gestartet { white-space: normal; max-width: 100%; }
.held h1, .held .was-ist { overflow-wrap: break-word; }
@media (max-width: 700px) {
  .hp-kopf .sprach-schalter, .hp-kopf .nur-breit-hp { display: none; }
  .held h1 .zeile, .held h1 .ton { font-size: clamp(2rem, 9vw, 2.6rem); }
}
/* the old hp.css still styles .held/.fenster (old hero) — keep the app window inside the column, never wider than the page */
.held-vorschau, .held-vorschau * { max-width: 100%; box-sizing: border-box; }
.held-innen { width: 100%; max-width: var(--bahn-max, 1200px); }
body.hp main { overflow-x: clip; }

/* ── L1b (07.10.2026): inner blocks in the showcase structure, ≤ 2 screens (Marco 12:33 „kein langes scrollen") ── */
.rs-reiter { display: flex; flex-wrap: wrap; overflow: visible; width: fit-content; max-width: 100%; }
.rs-reiter button { white-space: normal; text-align: left; min-height: 36px; height: auto; }
.rs-reiter-titel { margin: 0 0 8px; }
.us-panel > section, .rs-panel > section { padding-top: 12px; padding-bottom: 12px; background: none; }
.us-panel > section > .bahn, .rs-panel > section > .bahn { padding-left: 0; padding-right: 0; }
.l1b-start-reiter { padding-top: 8px; padding-bottom: 24px; }
.l1b-zahlen { display: block; text-decoration: none; color: inherit; }
.l1b-zahlen .live-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.l1b-zahlen .live-gitter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.l1b-zahlen .live-kachel p { margin: 0; }
.live-band { padding-top: 8px; padding-bottom: 8px; }
.l1b-live .rs-reiter { margin-top: 8px; }
.l1b-unten { margin-top: 12px; }
.l1b-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.zs-hinweis-chip .chip { text-decoration: none; }
@media (max-width: 700px) {
  .zs-hinweis-text { font-size: .82rem; line-height: 1.35; margin: 0; }
  .zs-hinweis-innen { padding-top: 6px; padding-bottom: 6px; }
  .held-vorschau { display: none; }              /* phone: the app window stays in the page, shown from 701 px */
  .held .was-ist { font-size: .9rem; }
  .rs-teaser .t-ueber { display: none; }         /* phone: the teaser card shows its page word; the heading is on the page itself */
  .rs-teaser { padding: 10px 12px; }
  .rs-teaser-gitter { padding-top: 10px; padding-bottom: 10px; gap: 8px; }
  .l1b-zahlen .live-gitter { grid-template-columns: 1fr 1fr; }
  .l1b-zahlen .live-kachel:first-child { grid-column: 1 / -1; }
  .rs-kopfband .rs-buehne { display: none; }      /* phone: the decorative scene goes, the text stays */
}
@media (min-width: 1101px) {
  .rs-teaser-gitter { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .rs-teaser .t-ueber { font-size: 1rem; }
}
/* ── L1b: Fahrtenbuch → Statistik, card „Unterwegs" (coordinator 13:2x, Marco: figures used only the left half and
      wrapped „2,9 / Mio. l") — zahlen.js draws the figures itself; here only layout: full width, 4 per row desktop +
      tablet, 2 per row phone, value + unit never wrap, the 3 blocks below in 3 columns (same rules as rd_design 08). ── */
body[data-v3] .zahlen-mehr-block, body[data-v3] .zahlen-mehr-block > .zahlen-raster-mehr { width: 100%; max-width: none; }
body[data-v3] .zahlen-raster-mehr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body[data-v3] .zahlen-raster-mehr .zahl-kachel { min-width: 0; }
body[data-v3] .zahlen-raster-mehr .zahl-wert, body[data-v3] .zahlen-raster-mehr .zahl-zusatz { white-space: nowrap; font-size: clamp(1rem, 2.4vw, 1.6rem); font-variant-numeric: tabular-nums; }
body[data-v3] .zahlen-raster-mehr .zahl-zusatz { font-size: clamp(.72rem, 1.4vw, .9rem); }
body[data-v3] .zahlen-mehr-block:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
body[data-v3] .zahlen-mehr-block > * { grid-column: 1 / -1; min-width: 0; }
body[data-v3] .zahlen-mehr-block > .zahlen-zwei { display: contents; }
body[data-v3] .zahlen-zwei > *, body[data-v3] .zahlen-mehr-block > .zahlen-spielart { grid-column: auto; min-width: 0; }
body[data-v3] .zahlen-mehr-block [hidden] { display: none; }
@media (max-width: 700px) {
  body[data-v3] .zahlen-raster-mehr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-v3] .zahlen-raster-mehr .zahl-wert { font-size: clamp(1rem, 5.2vw, 1.35rem); }
  body[data-v3] .zahlen-mehr-block:not([hidden]) { grid-template-columns: 1fr; }
}
/* ── L1b: compaction for the ≤ 2-screen rule (measured with mass_l1b.py at true 390×844 and 1440×900) ── */
body[data-v3] .held { padding-top: 20px; padding-bottom: 16px; min-height: 0; }
body[data-v3] .held-innen { gap: 24px; align-items: start; }
body[data-v3] .held h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 8px 0; }
body[data-v3] .held .was-ist { font-size: .95rem; line-height: 1.5; margin: 10px 0; }
body[data-v3] .held .knopf-zeile { margin-top: 12px; }
body[data-v3] .rs-teaser .t-ueber { font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body[data-v3] .l1b-live svg.live-karte { display: block; width: 100%; max-height: 58vh; }
@media (max-width: 700px) {
  body[data-v3] .held { padding-top: 10px; padding-bottom: 8px; }
  body[data-v3] .held-innen { gap: 10px; }
  body[data-v3] .held h1 { font-size: 1.75rem; }
  body[data-v3] .held .was-ist { font-size: .86rem; line-height: 1.42; }
  body[data-v3] .held .beta-band, body[data-v3] .held .gestartet { font-size: .68rem; padding: 4px 10px; margin: 0 0 6px; }
  body[data-v3] .rs-teaser .t-ueber { display: none; }
  body[data-v3] .rs-reiter button { font-size: .8rem; padding: 0 10px; min-height: 32px; }
  body[data-v3] .funktions-kacheln { grid-template-columns: 1fr 1fr; gap: 6px; }
  body[data-v3] .funktions-kacheln .kurz-kachel { padding: 8px; font-size: .8rem; }
  body[data-v3] .rs-kopfband .us-vorspann { font-size: .9rem; }
  body[data-v3] .rs-schlusszeile { padding-top: 6px; }
  body[data-v3] .l1b-live svg.live-karte { max-height: 52vh; }
}@media (max-width: 700px) {
  body[data-v3] .rs-kacheln4 { gap: 6px; }
  body[data-v3] .rs-kacheln4 li { padding: 8px 10px; font-size: .8rem; }
  body[data-v3] .rs-schlusszeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  body[data-v3] .rs-schlusszeile p { margin: 0; font-size: .8rem; }
}/* L1b live page: compact head + section padding (per-tab ≤ 2 screens, measured with the test world) */
body[data-v3] section.l1b-live { padding-top: 6px; padding-bottom: 12px; }
body[data-v3] .us-kopf.us-kopf-knapp { padding-top: 18px; padding-bottom: 12px; }
body[data-v3] .l1b-live .live-welten { margin-bottom: 6px; }
@media (max-width: 700px) {
  body[data-v3] .us-kopf.us-kopf-knapp { padding-top: 10px; padding-bottom: 6px; }
  body[data-v3] .l1b-live .live-zahlen { gap: 6px; }
  body[data-v3] .l1b-live .live-zahl { padding: 8px 10px; }
  body[data-v3] .l1b-live .kurz-punkte { font-size: .84rem; margin: 8px 0; }
  body[data-v3] .l1b-live .kurz-punkte li { margin: 2px 0; }
  body[data-v3] .l1b-live .mehr-zeile { gap: 6px; }
}@media (max-width: 700px) { body[data-v3] .l1b-live .live-reich svg { max-height: 150px; width: 100%; } body[data-v3] .l1b-live .live-reich { padding: 10px; } }
@media (max-width: 700px) {
  body[data-v3] .rs-fuss { padding-top: 12px; padding-bottom: 12px; }
  body[data-v3] .hp-fuss-innen { gap: 6px 10px; }
  body[data-v3] .rs-fuss-links { gap: 4px 12px; font-size: .78rem; }
  body[data-v3] .zs-hinweis-text { font-size: .76rem; }
  body[data-v3] .l1b-live .live-reich { max-height: none; }
}@media (max-width: 700px) { body[data-v3] .l1b-live .live-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-v3] .l1b-live .live-zahl b { font-size: 1.15rem; } body[data-v3] .l1b-live .live-zahl span { font-size: .7rem; line-height: 1.25; } }
/* ── L1c (07.10.2026): start page = rd_design 01 after „Feinschliff" (hero + phone/tablet tabs Live-Zahlen ·
      Live-Karte · Download), road-map lists (chips, search, paging), every page ≤ 2 screens ── */
.l1c-reiter-bahn { display: none; }
.l1c-tafeln-an .l1c-reiter-bahn { display: block; margin-top: 10px; }
.l1c-reiter { width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l1c-reiter button { min-width: 0; padding-left: 4px; padding-right: 4px; text-align: center; }
.l1c-tafel-aus { display: none !important; }
body[data-v3] .l1c-zwei { margin-top: 12px; margin-bottom: 12px; grid-template-columns: 1.3fr 1fr; align-items: stretch; }
.l1c-tafeln-an .l1c-zwei { grid-template-columns: 1fr; margin-top: 10px; }
.l1c-karte { grid-template-columns: 1fr 1fr; padding: 18px 20px; }
.l1c-karte .t-ueber { margin: 6px 0 10px; }
.l1c-karte-bild { display: block; border-radius: var(--rd-m, 12px); overflow: hidden; }
.l1c-karte-bild svg { display: block; width: 100%; height: auto; max-height: 200px; }
.l1c-download { padding: 0; justify-content: center; }
.l1c-download > .schlussband { margin: 0; padding: 18px 20px; background: none; border: 0; text-align: left; }
.l1c-download > .schlussband > .bahn { padding: 0; max-width: none; }
.l1c-download > .schlussband h2 { margin: 0 0 6px; font-size: 1.5rem; }
.l1c-download .knopfreihe { justify-content: flex-start; }
.l1c-falten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 4px; padding-bottom: 20px; align-items: start; }
.l1c-falte { padding: 12px 16px; }
.l1c-falte > section { padding: 8px 0 0; background: none; }
.l1c-falte > section > .bahn { padding: 0; max-width: none; }
.l1c-falte .karte.ausblick { box-shadow: none; border: 0; padding: 0; background: none; }
.l1c-wasist { margin: 8px 0; }
.l1c-wasist > summary { font-size: .95rem; }
.l1c-wasist .was-ist { margin: 6px 0 0; }
body[data-v3] .held .geldsatz { font-size: .88rem; line-height: 1.45; margin: 8px 0 0; }
@media (max-width: 1100px) { .l1c-karte { grid-template-columns: 1fr; } .l1c-karte-bild { display: none; } }
@media (max-width: 700px) {
  .l1c-falten { grid-template-columns: 1fr; gap: 8px; padding-bottom: 12px; }
  .l1c-falte { padding: 10px 12px; }
  body[data-v3] .held .geldsatz { font-size: .8rem; line-height: 1.4; }
  body[data-v3] .held .knopf-zeile { margin-top: 6px; font-size: .78rem; }
  .l1c-reiter button { font-size: .8rem; min-height: 34px; }
  .l1c-karte, .l1c-download > .schlussband { padding: 12px 14px; }
  .l1c-download > .schlussband h2 { font-size: 1.2rem; }
}
/* road map (beta.html) — rows re-wrapped by ds/l1c.js */
.l1c-liste { margin-top: 4px; }
.l1c-eintrag { display: block; min-height: 0; padding: 8px 12px; }
.l1c-eintrag > .us-klapp > summary { flex-wrap: nowrap; }
.l1c-eintrag > .us-klapp > summary h3 { font-size: 1rem; margin: 0; flex: 1 1 auto; min-width: 0; }
.l1c-eintrag > .us-klapp > summary .fp-stand { margin: 0; font-size: .78rem; opacity: .8; white-space: nowrap; }
.l1c-eintrag > .us-klapp > summary .haken { margin-right: 6px; }
.l1c-eintrag.karte { border-radius: 0; box-shadow: none; background: none; margin: 0; }
.l1c-blaettern { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.l1c-blaettern .seiten { display: flex; gap: 4px; flex-wrap: wrap; }
.l1c-blaettern button { min-width: 34px; min-height: 34px; }
.l1c-blaettern button[aria-current="page"] { font-weight: 700; outline: 2px solid var(--ton, #c9a24a); }
.l1c-werkzeug { margin: 10px 0 6px; }
.l1c-werkzeug .filterreihe { display: flex; flex-wrap: wrap; gap: 6px; }
.l1c-titel { margin: 10px 0 0; }
[data-l1c] .update-kasten { display: block; }
@media (max-width: 700px) {
  .l1c-eintrag > .us-klapp > summary { flex-wrap: wrap; }
  .l1c-eintrag > .us-klapp > summary .fp-stand { white-space: normal; flex-basis: 100%; }
  .l1c-werkzeug .filter { font-size: .76rem; padding: 4px 8px; }
  .l1c-werkzeug .us-feld { width: 100%; }
}
/* L1c compaction (measured with mass_l1b at 390×844 / 1440×900) */
[data-l1c-fahrplan] .us-panel { padding-top: 10px; }
[data-l1c-fahrplan] .us-panel > section { padding-top: 0; padding-bottom: 0; border-top: 0; }
[data-l1c-fahrplan] .update-kasten { padding: 14px 18px; gap: 6px; }
[data-l1c-fahrplan] .update-kasten h2 { font-size: 1.3rem; margin: 0 0 4px; }
[data-l1c-fahrplan] .update-satz { font-size: .95rem; }
[data-l1c-fahrplan] .etappe-kopf h2 { margin: 0; }
[data-l1c-fahrplan] + .schlussband { padding-top: 20px; padding-bottom: 20px; }
[data-l1c-fahrplan] + .schlussband p { margin-bottom: 10px; }
[data-l1c-fahrplan] + .schlussband .knopfreihe { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
.l1c-eintrag > .us-klapp > summary { flex-wrap: nowrap; }
.l1c-eintrag > .us-klapp > summary > b, .l1c-eintrag > .us-klapp > summary > h3 { flex: 1 1 0; min-width: 0; }
.l1c-eintrag > .us-klapp > summary > .haken { flex: none; display: inline; }
body[data-v3] .held .knopfreihe { flex-wrap: wrap; gap: 8px; margin-top: 8px; }
body[data-v3] .held .glanzstrich { margin: 10px 0; }
body[data-v3] .held .h1-suchworte { margin-top: 4px; }
body[data-v3] .held .beta-band { margin-bottom: 6px; }
body[data-v3][data-v3-start] .held { padding-top: 8px; }
body[data-v3] .l1c-falten .l1c-falte > summary { min-height: 0; }
@media (max-width: 700px) {
  .l1c-eintrag > .us-klapp > summary { flex-wrap: wrap; }
  .l1c-eintrag > .us-klapp > summary > .fp-stand { flex-basis: 100%; order: 3; }
  [data-l1c-fahrplan] .update-kasten { padding: 10px 12px; }
  [data-l1c-fahrplan] .update-satz { font-size: .86rem; line-height: 1.4; }
  [data-l1c-fahrplan] .update-kasten p { margin: 0 0 4px; }
  .l1c-eintrag { padding: 6px 8px; }
  .l1c-eintrag > .us-klapp > summary b, .l1c-eintrag > .us-klapp > summary h3 { font-size: .86rem; }
  [data-l1c-fahrplan] + .schlussband h2 { font-size: 1.25rem; }
  [data-l1c-fahrplan] + .schlussband p { font-size: .86rem; }
  body[data-v3] .held .knopfreihe .knopf, body[data-v3] .held .knopfreihe .knopf-leise { font-size: .84rem; padding: 8px 12px; min-height: 0; }
}
@media (min-width: 1101px) {
  body[data-v3] .held h1 { font-size: 2.6rem; }
  body[data-v3] .held .glanzstrich { display: none; }
  body[data-v3] .held-vorschau figcaption { margin-top: 6px; }
}
.l1c-naechst { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--rand); border-radius: 12px; }
.l1c-naechst > ul { margin: 6px 0 0; }
[data-l1c-fahrplan] .etappe-hin { margin: 4px 0; font-size: .9rem; line-height: 1.45; }
@media (max-width: 700px) {
  .l1c-werkzeug .filterreihe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .l1c-werkzeug .filter { flex: none; }
  [data-l1c-fahrplan] .etappe-hin { font-size: .8rem; line-height: 1.38; }
  [data-l1c-fahrplan] .etappe-kopf { margin: 0 0 4px; }
  /* mitmachen: the LIVE form (tab „Nachricht schreiben") compact on the phone — every field + text stays */
  body[data-v3] .formularkarte { padding: 12px; }
  body[data-v3] .formularkarte h3 { font-size: 1.1rem; margin: 0 0 4px; }
  body[data-v3] .formularkarte .formular-hin, body[data-v3] .formularkarte .formular-vorschau { font-size: .8rem; line-height: 1.38; margin: 0 0 6px; }
  body[data-v3] .formularkarte .feld-art { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; margin: 0 0 6px; }
  body[data-v3] .formularkarte .feld-art .wahl { min-height: 0; padding: 2px 0; font-size: .84rem; }
  body[data-v3] .formularkarte .feldpaar { gap: 0 8px; }
  body[data-v3] .formularkarte p.feld { margin: 4px 0; }
  body[data-v3] .formularkarte label { font-size: .84rem; }
  body[data-v3] .formularkarte .leise { font-size: .74rem; }
  body[data-v3] .formularkarte input, body[data-v3] .formularkarte select { min-height: 36px; height: 36px; }
  body[data-v3] .formularkarte textarea { height: 96px; min-height: 0; }
  body[data-v3] .formularkarte .formular-schluss { margin: 6px 0 0; }
}
@media (max-width: 700px) {
  .l1c-eintrag > .us-klapp > summary > .fp-stand { font-size: .72rem; }
  [data-l1c-fahrplan] + .schlussband { padding-top: 12px; padding-bottom: 12px; }
  [data-l1c-fahrplan] + .schlussband .knopf { font-size: .84rem; padding: 8px 12px; min-height: 0; }
}
.l1c-eintrag > .us-klapp > summary > .fp-stand { background: none; border: 0; padding: 0; }
.l1c-werkzeug { gap: 6px; }
@media (max-width: 700px) { .l1c-werkzeug { margin: 6px 0 4px; } .l1c-titel { margin-top: 4px; } }
.l1c-tafeln-an body[data-v3] .l1c-zwei { grid-template-columns: minmax(0, 1fr); }
.l1c-tafeln-an body[data-v3] .l1c-karte { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { body[data-v3] .l1c-karte .t-ueber { font-size: 1.25rem; line-height: 1.3; } }
@media (min-width: 1101px) {
  body[data-v3] .held .beta-band { font-size: .76rem; padding: 4px 12px; margin: 0 0 4px; }
  body[data-v3] .held .was-ist { margin: 6px 0; }
  body[data-v3] .held .geldsatz { margin-top: 6px; }
  body[data-v3] .held .mehr-kopf { margin-top: 8px; }
  .l1c-karte { padding: 14px 18px; }
  body[data-v3] .l1c-karte .t-ueber { font-size: 1.35rem; line-height: 1.3; }
  .l1c-karte-bild svg { max-height: 150px; }
  .l1c-download > .schlussband { padding: 14px 18px; }
  body[data-v3] .l1c-zwei { margin-top: 8px; margin-bottom: 8px; }
}

/* ═══ v3: ds/l5.css ═══ */
/* v3 lane L5-HOFKARTE 07.10.2026 — start page teaser „Händler-Hof live" (→ live.html#live-aufbau). Part of the hp.css bundle.
   HP1-FINAL 07.10. (Marco P2 „dein vorschlag"): the teaser is a slim strip INSIDE the live band, directly under the tiles card
   (same l1c tab „Live-Zahlen" on phone/tablet) — no own band, no gap. */
.live-band .l5-hof-teaser { margin-top: 8px; }
.l5-hof-teaser { display: flex; align-items: center; gap: 12px; padding: 8px 16px; text-decoration: none; color: var(--text); }
.l5-hof-teaser:hover { border-color: var(--ton); }
.l5-hof-teaser:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.l5-hof-zeichen { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--mulde); color: var(--ton); }
.l5-hof-zeichen .i { width: 22px; height: 22px; }
.l5-hof-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 0; min-width: 0; flex: 1 1 auto; }
.l5-hof-text b { font-size: 15px; }
.l5-hof-teaser > .i-k { flex: none; color: var(--ton); }
@media (max-width: 640px) {
  .l5-hof-teaser { padding: 8px 12px; gap: 10px; }
  .l5-hof-zeichen { width: 32px; height: 32px; }
  .l5-hof-text { flex-direction: column; align-items: flex-start; }
}

/* ── HP1-FINAL 07.10.2026 — two page fixes that are NOT L5's own markup. They live here because this bundle part is
   re-installed by l5_hofkarte.py after EVERY einbau_v3.py run (the L1 payload / map-lane files are overwritten by
   l1_einbauen / l1b_karte, so a fix there would be lost). Owner lanes may take them over; then delete them here. ── */

/* Fix 1 — the dealer tab strip (karte.js .live-reiter, live page › „Händler live") scrolled SIDEWAYS at 390 px.
   The map lane's wrap rule in live-szenen.css hangs on .live-seite, but the v3 live section is class „live l1b-live", so it
   never applied and karte.css @640 („flex-wrap: nowrap" + overflow-x auto) won. Marco: no sideways tab bars → wrap. */
.l1b-live .live-reiter { flex-wrap: wrap; overflow: visible; }
@media (max-width: 760px) {
  .l1b-live .live-reiter { gap: 5px; }
  .l1b-live .live-reiter button { padding: 6px 10px; font-size: 13px; gap: 6px; }
}

/* Fix 2 — the start hero sits on the NIGHT panorama in both themes (dark scrim with !important). Its text already keeps night
   colours (.held .held-text, 12:33/12:37), but the SURFACE tokens did not: in the light theme the two buttons, the „Mehr
   erfahren" fold and the beta badges took light surfaces (white buttons with ivory text, dark-gold badge text on the dark
   sky). Same pattern as 12:33: re-scope the surface tokens to their night values inside the hero text column — the dark
   theme gets exactly the values it already has, so nothing changes there. */
.held .held-text {
  --karte: #13171f; --karte2: #191e28; --mulde: #0a0d12; --naht: #2b3240;
  --karte-verlauf: linear-gradient(180deg, #171c25 0%, #12161e 100%);
  --glanz: rgba(255, 255, 255, .075);
  --glanzkante: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, .25));
  --glanzkante-gold: linear-gradient(180deg, rgba(248, 216, 150, .55), rgba(232, 166, 63, .14) 40%, rgba(255, 255, 255, .02) 70%, rgba(0, 0, 0, .2));
  --ton: #e8a63f; --ton-hell: #f8d896; --ton2: #c4811f;
}

/* ── HP4-FUNDE 07.10.2026 (pre-walk findings #2/#3/#4 + 1440 menu row). Same reason as HP1-FINAL: this bundle part survives
   every einbau_v3.py run. ── */

/* #4 — hero buttons at phone width: „App herunterladen“ / „Download the app“ was clipped (nowrap row, two buttons side by side).
   ≤ 480 px both buttons keep one row and may wrap their label onto two lines (nothing is cut, the hero does not grow). */
@media (max-width: 480px) {
  body[data-v3] .held .knopfreihe { flex-wrap: wrap; }
  body[data-v3] .held .knopfreihe .knopf, body[data-v3] .held .knopfreihe .knopf-leise {
    flex: 1 1 0; min-width: 0; white-space: normal; justify-content: center; text-align: center; line-height: 1.25; }
}

/* top menu row (12 entries) scrolled sideways at 1440: it wraps now and stays centred — never a hidden sideways strip. */
.rs-nav { flex-wrap: wrap; justify-content: center; height: auto; min-height: 44px; overflow: visible; row-gap: 0; }
.rs-nav a { padding: 6px 8px; }

/* #2/#3 — speditionen + fahrtenbuch: pager and inner tabs of www/hp4-blaettern.js (classes only set by that script). */
.hp4-aus { display: none !important; }
.hp4-blaettern { margin: 12px 0 4px; }
.hp4-blaettern .hp4-von { color: var(--matt); font-size: .86rem; font-variant-numeric: tabular-nums; }
.hp4-blaettern button { font-size: 1.1rem; cursor: pointer; }
.hp4-vl .vl-karte:not(.hp4-offen) .vl-text,
.hp4-vl .vl-karte:not(.hp4-offen) .vl-zahlen,
.hp4-vl .vl-karte:not(.hp4-offen) .vl-aufbau { display: none; }
.hp4-vl-mehr { margin-top: 8px; background: none; border: 0; padding: 4px 0; color: var(--text-gold); font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer; }
.hp4-fb-reiter, .hp4-fb-tafelwahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.hp4-fb-reiter button, .hp4-fb-tafelwahl button {
  border: 1px solid var(--rand); background: var(--karte); color: var(--matt); border-radius: var(--rd-voll);
  padding: 7px 13px; font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer; }
.hp4-fb-reiter button[aria-selected="true"], .hp4-fb-tafelwahl button[aria-selected="true"] {
  color: var(--auf-ton); background: var(--gold-verlauf); border-color: transparent; }
.hp4-fb .fb-teil:not(.hp4-aus) .fb-tafeln { display: block; }
.hp4-fb .fb-tafeln-lade .fb-lade-titel { display: none; }
.hp4-fb-alle { display: block; margin: 10px 0 0; background: none; border: 0; padding: 4px 0; color: var(--text-gold); font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer; }
@media (max-width: 600px) {
  .hp4-fb .fb-karte { height: 220px; }
  .hp4-fb .fb-kachel { padding: 10px 12px; }
}
/* closed VTC card = one compact row block (logo, name, „Sucht Fahrer“, worlds); a tap on „Mehr zeigen“ opens motto, text,
   build-up and numbers. Phone: 4 cards a page (hp4-blaettern.js), so the page stays ≤ 2 screens with 1000+ VTCs. */
.hp4-vl .vl-karte:not(.hp4-offen) { padding: 12px 14px 12px; }
.hp4-vl .vl-karte:not(.hp4-offen) .vl-motto { display: none; }
.hp4-vl .vl-karte:not(.hp4-offen) .vl-logo { flex-basis: 40px; width: 40px; height: 40px; border-radius: 10px; }
.hp4-vl .vl-karte:not(.hp4-offen) h2 { font-size: 17px; }
.hp4-vl .vl-karte:not(.hp4-offen) .vl-wo { margin-top: 6px; padding-right: 110px; }
.hp4-vl .vl-karte.hp4-offen { padding-bottom: 40px; }
.hp4-vl .vl-karte .hp4-vl-mehr { position: absolute; right: 14px; bottom: 8px; margin: 0; }
.hp4-vl .vl-liste { gap: 10px; }
/* fahrtenbuch: the 24-hour list pages now — no inner scroll box any more; phone: boards picked by a select, tighter head */
.hp4-fb .fb-zeilen { max-height: none; overflow: visible; }
.hp4-fb-tafelselect { display: none; }
@media (max-width: 600px) {
  .hp4-fb-tafelwahl { display: none; }
  .hp4-fb-tafelselect { display: block; width: 100%; margin: 12px 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--rand);
    background: var(--karte); color: var(--text); font: inherit; font-size: .95rem; font-weight: 650; }
  .hp4-fb .fb-karte { height: 150px; }
  .hp4-fb .fb-kopf-inhalt { padding-bottom: 6px; }
  .hp4-fb .fb-teil { padding-top: 14px; }
  .hp4-fb-reiter { margin-bottom: 4px; }
  .hp4-fb .fb-balken { margin-bottom: 6px; }
  .hp4-fb .fb-b-bild, .hp4-fb .fb-b-bild svg { width: 36px; height: 36px; }
}
/* pre-walk #11/#14 — no sideways chip/tab rows on the phone (Marco 12:30 „chips wrap“): road-map filter chips (beta) and the
   wiki topic tabs wrap instead of scrolling (hp.css @≤ 760 set nowrap + overflow-x on .us-filter; .reiter scrolls by default). */
@media (max-width: 760px) {
  body .us-filter, body .l1c-werkzeug .filterreihe { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .reiter[role="tablist"]:not(.rs-reiter) { display: flex; flex-wrap: wrap; overflow: visible; }
}
/* phone: one logbook row = 3 lines (route + km, load + pill, truck + time); the trailer line and the „tap a tour“ hint go
   (the map sits above the fold on the phone anyway); the board title repeats the select → hidden there */
@media (max-width: 600px) {
  .hp4-fb .fb-zeile { padding-top: 8px; padding-bottom: 8px; row-gap: 0; }
  .hp4-fb .fb-z-fracht br, .hp4-fb .fb-z-fracht .fb-leise { display: none; }
  .hp4-fb .fb-z-dauer { grid-row: 4; grid-column: 2; text-align: right; }
  .hp4-fb .fb-teil > .fb-leise { display: none; }
  .hp4-fb .fb-tafel > h3 { display: none; }
}
/* phone: the section headings repeat the inner tab that is open („Ranglisten“, „Fahrtenbuch“, „Rekorde“) → hidden there */
@media (max-width: 600px) {
  .hp4-fb .fb-teil > h2, .hp4-fb .fb-teil > .fb-teil-kopf > h2 { display: none; }
  .hp4-fb-tafelselect { margin: 8px 0; }
}
/* L5-HOFKARTE HP5-REST 07.10.2026 — pre-walk #8: at ≥ 700 px the layer chips (bottom right of the map) covered the source
   line „Straßen außerhalb des Grundspiels: Natural Earth (gemeinfrei)". It now stands in its OWN line under the map at every
   width (the phone already did that), right-aligned, never under a chip. #15: and at least 12 px. */
#live .lk-ne-quelle { position: static; display: block; max-width: none; text-align: right; padding: 4px 12px 6px; font-size: 12px; }
#live .lk-ne-quelle[hidden] { display: none; }
@media (max-width: 699px) { #live .lk-ne-quelle { text-align: left; } }
/* pre-walk #15 (Marco 12:35: bigger, readable text) — every text on the HP pages ≥ 12 px (measured 07.10. at 390 + 1440:
   hero chips 10.9, „voraussichtlich fertig" 11.2, SHA line 11.8, counters 11.2, wiki „ETS2 + ATS" 10.9, logbook tile names 11,
   map cluster numbers 9.5–11, map source line 10.5). */
body[data-v3] .held .beta-band, body[data-v3] .held .gestartet, body[data-v3] .held .beta-band .zusatz { font-size: 12px; }
.pruefsumme, .etikett.etikett-datum, .fp-datum, .fb-k-name { font-size: 12px; }
.reiter .zaehler, .us-filter .zaehler, .filter .zaehler, .us-navgruppe .zaehler, .chip.spiel { font-size: 12px; }
#live .live-karte .lk-sp-haufen text { font-size: 12px; }
#live .live-karte .lk-sp-haufen text.g3 { font-size: 12px; letter-spacing: -.5px; }
#live .live-karte .lk-pille-karte text, #live .live-karte .lk-trupp-marke text, #live .live-karte .lk-kiste text { font-size: 12px; }
@media (max-width: 699px) { #live .live-karte text.lk-name.kontext { font-size: 12px !important; } }
/* HP5-REST #8 (cont.): the legend (left) and the layer chips (right) are absolute at the bottom of the map stage — while the
   source line is shown in its own row under the map they sit one row higher, so the line is never covered (≥ 700 px). */
@media (min-width: 700px) {
  #live .live-buehne:has(.lk-ne-quelle:not([hidden])) .live-ebenen,
  #live .live-buehne:has(.lk-ne-quelle:not([hidden])) .lk-legende { bottom: calc(var(--ab-normal) + 26px); }
}
/* HP5-REST: phone height budget ≤ 2 screens — the 12 px hero chips cost 7 px on index (1682 → 1689 > 1688 = 2 × 844), the gaps
   under them pay it back; the logbook head kept 43 px of empty band under its inner tabs (EN Ranglisten 1705 = 2.02 screens). */
@media (max-width: 600px) {
  body[data-v3] .held .beta-band, body[data-v3] .held .gestartet { margin-bottom: 2px; }
  .hp4-fb .fb-kopf { padding-bottom: 10px; }
}
/* L5-HOFKARTE HP5-REST 07.10.2026 — final walk N1: the live stage buehne_tankstelle (Händler live › Bestand) is the Paket-10
   picture (www\szenen\buehne_tankstelle*.svg from this installer): per-kind trailer rules + fill bars copied VERBATIM from
   rd_grafik\szenen\szenen.css (Paket 10, 15:35) — they come after the older P47 rules of ds\szenen.css in the bundle and win.
   live-szenen.js sends trd-0..5 / tra-0..3 only (hunks T1–T4), so the P47 rules for tra-4 never match. */
/* Paket 10: drawn at most 5 diesel + 3 AdBlue; trd-0..8 / tra-0..8 accepted, above the cap = the cap */
.sz-trm-art, .sz-trk, .sz-trx-di, .sz-trx-ab { display: none; }
.trd-0 .sz-trm-art, .trd-1 .sz-trm-art, .trd-2 .sz-trm-art, .trd-3 .sz-trm-art, .trd-4 .sz-trm-art, .trd-5 .sz-trm-art, .trd-6 .sz-trm-art, .trd-7 .sz-trm-art, .trd-8 .sz-trm-art, .tra-0 .sz-trm-art, .tra-1 .sz-trm-art, .tra-2 .sz-trm-art, .tra-3 .sz-trm-art, .tra-4 .sz-trm-art, .tra-5 .sz-trm-art, .tra-6 .sz-trm-art, .tra-7 .sz-trm-art, .tra-8 .sz-trm-art { display: inline; }
.trd-0 .sz-trm-5, .trd-1 .sz-trm-5, .trd-2 .sz-trm-5, .trd-3 .sz-trm-5, .trd-4 .sz-trm-5, .trd-5 .sz-trm-5, .trd-6 .sz-trm-5, .trd-7 .sz-trm-5, .trd-8 .sz-trm-5, .tra-0 .sz-trm-5, .tra-1 .sz-trm-5, .tra-2 .sz-trm-5, .tra-3 .sz-trm-5, .tra-4 .sz-trm-5, .tra-5 .sz-trm-5, .tra-6 .sz-trm-5, .tra-7 .sz-trm-5, .tra-8 .sz-trm-5 { display: none; }
.trd-1 .sz-trk-di-1, .trd-1 .sz-trk-m-1 .sz-trx-di { display: inline; }
.tra-1 .sz-trk-ab-1 { display: inline; }
.trd-2 .sz-trk-di-1, .trd-2 .sz-trk-m-1 .sz-trx-di, .trd-2 .sz-trk-di-2, .trd-2 .sz-trk-m-2 .sz-trx-di { display: inline; }
.tra-2 .sz-trk-ab-1, .tra-2 .sz-trk-ab-2 { display: inline; }
.trd-3 .sz-trk-di-1, .trd-3 .sz-trk-m-1 .sz-trx-di, .trd-3 .sz-trk-di-2, .trd-3 .sz-trk-m-2 .sz-trx-di, .trd-3 .sz-trk-di-3, .trd-3 .sz-trk-m-3 .sz-trx-di { display: inline; }
.tra-3 .sz-trk-ab-1, .tra-3 .sz-trk-ab-2, .tra-3 .sz-trk-ab-3 { display: inline; }
.trd-4 .sz-trk-di-1, .trd-4 .sz-trk-m-1 .sz-trx-di, .trd-4 .sz-trk-di-2, .trd-4 .sz-trk-m-2 .sz-trx-di, .trd-4 .sz-trk-di-3, .trd-4 .sz-trk-m-3 .sz-trx-di, .trd-4 .sz-trk-di-4, .trd-4 .sz-trk-m-4 .sz-trx-di { display: inline; }
.tra-4 .sz-trk-ab-1, .tra-4 .sz-trk-ab-2, .tra-4 .sz-trk-ab-3 { display: inline; }
.trd-5 .sz-trk-di-1, .trd-5 .sz-trk-m-1 .sz-trx-di, .trd-5 .sz-trk-di-2, .trd-5 .sz-trk-m-2 .sz-trx-di, .trd-5 .sz-trk-di-3, .trd-5 .sz-trk-m-3 .sz-trx-di, .trd-5 .sz-trk-di-4, .trd-5 .sz-trk-m-4 .sz-trx-di, .trd-5 .sz-trk-di-5, .trd-5 .sz-trk-m-5 .sz-trx-di { display: inline; }
.tra-5 .sz-trk-ab-1, .tra-5 .sz-trk-ab-2, .tra-5 .sz-trk-ab-3 { display: inline; }
.trd-6 .sz-trk-di-1, .trd-6 .sz-trk-m-1 .sz-trx-di, .trd-6 .sz-trk-di-2, .trd-6 .sz-trk-m-2 .sz-trx-di, .trd-6 .sz-trk-di-3, .trd-6 .sz-trk-m-3 .sz-trx-di, .trd-6 .sz-trk-di-4, .trd-6 .sz-trk-m-4 .sz-trx-di, .trd-6 .sz-trk-di-5, .trd-6 .sz-trk-m-5 .sz-trx-di { display: inline; }
.tra-6 .sz-trk-ab-1, .tra-6 .sz-trk-ab-2, .tra-6 .sz-trk-ab-3 { display: inline; }
.trd-7 .sz-trk-di-1, .trd-7 .sz-trk-m-1 .sz-trx-di, .trd-7 .sz-trk-di-2, .trd-7 .sz-trk-m-2 .sz-trx-di, .trd-7 .sz-trk-di-3, .trd-7 .sz-trk-m-3 .sz-trx-di, .trd-7 .sz-trk-di-4, .trd-7 .sz-trk-m-4 .sz-trx-di, .trd-7 .sz-trk-di-5, .trd-7 .sz-trk-m-5 .sz-trx-di { display: inline; }
.tra-7 .sz-trk-ab-1, .tra-7 .sz-trk-ab-2, .tra-7 .sz-trk-ab-3 { display: inline; }
.trd-8 .sz-trk-di-1, .trd-8 .sz-trk-m-1 .sz-trx-di, .trd-8 .sz-trk-di-2, .trd-8 .sz-trk-m-2 .sz-trx-di, .trd-8 .sz-trk-di-3, .trd-8 .sz-trk-m-3 .sz-trx-di, .trd-8 .sz-trk-di-4, .trd-8 .sz-trk-m-4 .sz-trx-di, .trd-8 .sz-trk-di-5, .trd-8 .sz-trk-m-5 .sz-trx-di { display: inline; }
.tra-8 .sz-trk-ab-1, .tra-8 .sz-trk-ab-2, .tra-8 .sz-trk-ab-3 { display: inline; }
.tra-1 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-2 .sz-trk-m-7 .sz-trx-ab, .tra-2 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-3 .sz-trk-m-6 .sz-trx-ab, .tra-3 .sz-trk-m-7 .sz-trx-ab, .tra-3 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-4 .sz-trk-m-6 .sz-trx-ab, .tra-4 .sz-trk-m-7 .sz-trx-ab, .tra-4 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-5 .sz-trk-m-6 .sz-trx-ab, .tra-5 .sz-trk-m-7 .sz-trx-ab, .tra-5 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-6 .sz-trk-m-6 .sz-trx-ab, .tra-6 .sz-trk-m-7 .sz-trx-ab, .tra-6 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-7 .sz-trk-m-6 .sz-trx-ab, .tra-7 .sz-trk-m-7 .sz-trx-ab, .tra-7 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.tra-8 .sz-trk-m-6 .sz-trx-ab, .tra-8 .sz-trk-m-7 .sz-trx-ab, .tra-8 .sz-trk-m-8 .sz-trx-ab { display: inline; }
.sz-trfuell-di-1 { transform: scaleX(var(--trd-1-fuell, 1)); }
.sz-trfuell-di-2 { transform: scaleX(var(--trd-2-fuell, 1)); }
.sz-trfuell-di-3 { transform: scaleX(var(--trd-3-fuell, 1)); }
.sz-trfuell-di-4 { transform: scaleX(var(--trd-4-fuell, 1)); }
.sz-trfuell-di-5 { transform: scaleX(var(--trd-5-fuell, 1)); }
.sz-trfuell-ab-1 { transform: scaleX(var(--tra-1-fuell, 1)); }
.sz-trfuell-ab-2 { transform: scaleX(var(--tra-2-fuell, 1)); }
.sz-trfuell-ab-3 { transform: scaleX(var(--tra-3-fuell, 1)); }

/* L5-HOFKARTE HP6-REST 07.10.2026 — final walk N3: fahrtenbuch had TWO tab rows („Fahrtenbuch | Statistik" + the inner row).
   www/hp4-blaettern.js now moves the inner row into the top bar (class hp4-fb-eine) and adds „Statistik" as its last tab;
   the old top links stay in the DOM, hidden (fb-reiter.js keeps the #statistik address). */
.fb-reiterleiste .hp4-fb-reiter.hp4-fb-eine { margin: 10px 0; }
/* HP6-REST walk #20 — LIGHT mode: active chips/tabs (live world switch, dealer sub-tabs, statistics periods, .knopf) drew the v3
   dark text (--auf-ton #1b1306) on the OLD light button brown #9a5a00 = 3.36:1. The v3 light palette re-defines --auf-ton
   but never --ton-knopf; here the button tokens follow the v3 gold: #1b1306 on #e8ad4c = 9.1:1, hover #d9993a = 7.4:1. */
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]) { --ton-knopf: #e8ad4c; --ton-knopf2: #d9993a; }
}
:root[data-farbe="hell"] { --ton-knopf: #e8ad4c; --ton-knopf2: #d9993a; }
/* HP6-REST walk #16 — the stray green dot at the left page edge of live.html: the v3 kit badge rule `.live::before` (pulsing
   dot of the „live" chip) also hit the live SECTION (<section id="live" class="live l1b-live">) and drew its dot at x≈3 px. */
#live.live::before { content: none; display: none; }
/* HP6-REST walk #17 — notice band: the „✦" stood alone on its own line; it now sits in front of the sentence (all pages). */
.zs-hinweis-innen { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; }
.zs-hinweis-innen .zs-hinweis-text { flex: 1 1 auto; min-width: 0; }
/* HP6-REST walk „legal pages > 2 screens at 390" (+ #22 footer row twice): LAYOUT ONLY — not one word of a legal text is
   changed, hidden or shortened. On the phone the chrome around the one-§-per-view reader gets tighter: the reading-version
   note box, the step buttons, „back to the start page" and the legal footer row (links in one wrapping line, not a stack). */
@media (max-width: 600px) {
  .rechtsseite .recht-nur-deutsch { padding: 10px 12px; }
  .rechtsseite .recht-nur-deutsch p { margin: 0 0 4px; font-size: .9rem; line-height: 1.4; }
  .rechtsseite .aufschrift { margin-bottom: 6px; }
  body.rt-an .rt-fuss { margin: 12px 0 6px; }
  body.rt-an .rt-fuss button { min-height: 44px; padding: 6px 12px; }
  .rechtsseite .zurueck { margin: 6px 0 12px; }
  .rt-recht-fuss { padding-top: 4px; padding-bottom: 10px; }
  .rt-recht-fuss .fusszeilen { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .rt-recht-fuss .fusszeilen a { font-size: .86rem; padding: 3px 0; margin: 0; }
  .rt-recht-fuss .kleingedruckt { margin: 6px 0 0; font-size: .8rem; line-height: 1.35; }
}
/* HP6-REST walk #22 „footer row twice" on legal pages: the legal footer row repeated Impressum · Datenschutz · AGB · Startseite
   right under the site footer that already carries them. Only the links WITHOUT hreflang (= the duplicates) are hidden; the
   other-language link („Nutzungsbedingungen (Deutsch, verbindlich)“ / the EN reading versions) and the note stay. */
.rt-recht-fuss .fusszeilen a:not([hreflang]) { display: none; }

/* HP7-MARCO 07.10. Statistik (Marco „statistik ist noch nicht fertig"): cards no longer stretch to the tallest one (empty
   boxes at 1440); phone: compact tiles + one card at a time (hp4-blaettern.js chip row) → ≤ 2 screens; 12-px floor. */
body[data-v3] .zahlen-mehr-block > .zahlen-zwei > *, body[data-v3] .zahlen-mehr-block > .zahlen-spielart { align-self: start; }
.hp7-stat-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.hp7-stat-wahl[hidden] { display: none; }
.hp7-stat-wahl button { font: inherit; font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie, rgba(255,255,255,.14)); background: transparent; color: inherit; cursor: pointer; }
.hp7-stat-wahl button[aria-selected="true"] { background: var(--ton-knopf, #e8ad4c); color: var(--auf-ton, #14110b); border-color: transparent; }
@media (max-width: 599px) {
  body[data-v3] #zahlen .zahl-kachel { padding: 10px 12px; min-height: 0; }
  body[data-v3] #zahlen .zahl-name { margin-top: 2px; }
  body[data-v3] #zahlen .zahl-zusatz, body[data-v3] .zahlen-raster-mehr .zahl-zusatz { font-size: 12px; }
  body[data-v3] .zahlen-mehr-block .hp7-stat-aus { display: none; }
  body[data-v3] .zahlen-mehr-block .zahlen-liste li { margin-bottom: 4px; }
}

/* HP7-MARCO 07.10. (pre-walk item, Marco 17:0x walk): pink bar left of the live page h1 at 1440 = karte.css .live-punkt (10 px dot)
   on an INLINE span inside the v3 h1 → width/height ignored, the pulsing box-shadow drew a tall bar. Removed in the page head. */
.us-kopf h1 > .live-punkt { display: none; }
/* HP7-MARCO 07.10. EN terms of use at 390 = 2.32 screens: LAYOUT ONLY (not one word changed, hidden or folded away). The step
   button „Next" sat in the right half of a two-column row (the disabled „Previous" kept its column) and wrapped to 4 lines;
   heading, translation blockquote and the § spacing are tightened on the phone. */
@media (max-width: 600px) {
  body.rt-an .rt-fuss:has(> button:first-child:disabled) { grid-template-columns: minmax(0, 1fr); }
  body.rt-an .rt-fuss > button:disabled { display: none; }
  body.rt-an .rt-fuss > button { min-height: 40px; }
  body.rt-an .rt-spalte h1 { margin: 6px 0 6px; font-size: 1.45rem; line-height: 1.2; }
  body.rt-an .rt-spalte blockquote { margin: 4px 0 6px; padding: 6px 10px; font-size: .88rem; line-height: 1.4; }
  body.rt-an .rt-spalte blockquote p { margin: 0; }
  body.rt-an .rt-teil { margin-top: 6px; padding-top: 6px; padding-bottom: 0; }
  body.rt-an .rt-teil > h2 { margin-top: 4px; }
  body.rt-an .rt-teil > p:last-child, body.rt-an .rt-teil > ul:last-child { margin-bottom: 0; }
  body.rt-an .rt-spalte hr { margin: 8px 0; }
}
/* HP7-MARCO Statistik, phone part 2 (measured 1773 / EN 1835 px = 2.1 screens after part 1): periods in ONE row, the eight
   „Unterwegs" tiles three per row, tighter cards and chips — every text stays ≥ 12 px. */
@media (max-width: 599px) {
  body[data-v3] #zahlen .zahlen-zeitraum:not([hidden]) { display: flex; flex-wrap: nowrap; gap: 2px; }
  body[data-v3] #zahlen .zahlen-zeitraum button { flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: 12.5px; white-space: normal; line-height: 1.2; }
  body[data-v3] #zahlen .zahlen-raster-mehr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body[data-v3] #zahlen .zahlen-raster-mehr .zahl-kachel { padding: 8px 8px; }
  body[data-v3] #zahlen .zahlen-raster-mehr .zahl-wert { font-size: 1rem; }
  body[data-v3] #zahlen .zahlen-raster-mehr .zahl-zusatz { white-space: normal; line-height: 1.25; }
  body[data-v3] #zahlen .zahlen-raster-mehr .zahl-name { font-size: 12px; line-height: 1.25; }
  body[data-v3] #zahlen .zahlen-raster { gap: 8px; }
  body[data-v3] #zahlen .zahlen-h3 { margin: 4px 0 6px; }
  body[data-v3] #zahlen .zahlen-stil, body[data-v3] #zahlen .zahlen-fracht { padding: 12px 14px; }
  .hp7-stat-wahl { gap: 4px; }
  .hp7-stat-wahl button { font-size: 12.5px; padding: 5px 10px; }
  body[data-v3] .zahlen-mehr-block .zahlen-liste li { margin-bottom: 2px; line-height: 1.35; }
}
/* HP7-MARCO legal pages, phone part 2 (EN terms 1767 px = 2.09 after part 1): reading line height 1.55 and no trailing gap under
   the shown § — layout only, the words stay. */
@media (max-width: 600px) {
  body.rt-an .rt-teil p, body.rt-an .rt-teil li { line-height: 1.55; }
  body.rt-an .rt-teil { margin-bottom: 0; padding-bottom: 0; }
  body.rt-an .rt-fuss { margin-top: 6px; }
  body.rt-an .rechtsseite .aufschrift { letter-spacing: .08em; }
}
/* HP7-MARCO part 3 (worst case measured: Statistik with „Singleplayer und TMP" open 1705 px, EN terms 1712 px = 2.02) */
@media (max-width: 599px) {
  body[data-v3] .zahlen-mehr-block .zahlen-liste { font-size: .92rem; }
  body[data-v3] #zahlen .zahlen-klein, body[data-v3] #zahlen .zahlen-fuss { margin: 6px 0; }
}
@media (max-width: 600px) {
  body.rt-an .rt-teil p, body.rt-an .rt-teil li { line-height: 1.5; }
  body.rt-an .rt-teil p { margin-bottom: 10px; }
}

/* HP9-WUENSCHE 07.10.2026 (Marco 12:35 „man kann fast nichts lesen“): small texts one step bigger — start-page live tiles
   (caption + label), the yard teaser line, the tab strips (rs-reiter) on every HP page. */
.live-band .live-kachel .mini, .live-band .l5-hof-teaser .mini { font-size: 15px; line-height: 1.35; }
.live-band .live-kachel .aufschrift { font-size: 15.5px; }
html body[data-v3] .rs-reiter button { font-size: 14.5px; }
@media (max-width: 640px) {
  .live-band .live-kachel .mini, .live-band .l5-hof-teaser .mini { font-size: 14.5px; }
  .live-band .live-kachel .aufschrift { font-size: 15px; }
}