/* ==========================================================================
   Fahrer-Bereich · basis/schale.css (lane 618, VERTRAG.md § 4)
   Shell (side rail · icon rail · bottom bar), panorama head, stage grid and the shared
   components of karten.js. Built from the approved mockups (offene_fragen/HP-Loginbereich/mockups/lb.css).
   Breakpoints: tablet ≤ 1100 px, phone ≤ 700 px. No horizontal scroll at any width.
   ========================================================================== */

/* ── skip link ─────────────────────────────────────────────────────────── */
.sprung { position: absolute; left: var(--ab3); top: -60px; z-index: 60; background: var(--ton); color: var(--auf-ton);
  padding: var(--ab2) var(--ab3); border-radius: var(--rd-k); font-weight: 650; }
.sprung:focus { top: var(--ab3); }

/* ── shell: rail | content ─────────────────────────────────────────────── */
.schale { display: grid; grid-template-columns: var(--leiste-breit) minmax(0, 1fr); min-height: 100vh; }
.leiste { background: linear-gradient(180deg, var(--grund2), var(--grund)); border-right: 1px solid var(--rand); padding: var(--ab3);
  display: flex; flex-direction: column; gap: var(--ab1); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marke { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 1.22rem; letter-spacing: -.01em; color: var(--text);
  padding: 6px var(--ab2) 14px; }
.marke:hover { text-decoration: none; }
.marke-bild { width: 34px; height: 34px; flex: none; }
/* ✏️ B-W160b: logo C carries its own colours (navy plate, gold mark) — the old ring/truck colouring rules are gone */
.marke-logo-c { border-radius: 20%; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-eintrag { display: flex; align-items: center; gap: 11px; padding: 9px 10px; min-height: 38px; border-radius: 10px;
  color: var(--matt); font-weight: 580; font-size: .92rem; position: relative; transition: color var(--flott), background var(--flott); }
.nav-eintrag:hover { color: var(--text); background: var(--karte); text-decoration: none; }
.nav-eintrag .sym { width: 20px; height: 20px; flex: none; }
.nav-eintrag[aria-current] { color: var(--text); background: linear-gradient(90deg, var(--tonhauch2), transparent); }
.nav-eintrag[aria-current] .sym { color: var(--text-gold); }
.nav-eintrag[aria-current]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-verlauf); }
.zaehler { margin-left: auto; background: var(--gold-verlauf); color: var(--auf-gold); font-size: .72rem; font-weight: 700; font-style: normal;
  border-radius: 99px; padding: 0 7px; line-height: 18px; min-width: 18px; text-align: center; }

.fuss { margin-top: var(--ab3); border-top: 1px solid var(--rand); padding-top: var(--ab3); display: flex; gap: var(--ab3); align-items: center; min-height: 52px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--gold-verlauf); color: var(--auf-gold); box-shadow: var(--schatten-klein); }
.wer { min-width: 0; }
.wer-name { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wer-firma { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schalter { display: flex; gap: var(--ab2); margin-top: auto; padding-top: var(--ab3); }

.inhalt { min-width: 0; }

/* ── panorama head: sky, sun, far view, stars at night ────────────────── */
.panorama { position: relative; height: 168px; overflow: hidden; border-bottom: 1px solid var(--rand); }
.panorama .himmel { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-himmel1 { stop-color: var(--himmel1); }
.st-himmel2 { stop-color: var(--himmel2); }
.st-sonne-innen { stop-color: var(--sonne); stop-opacity: .45; }
.st-sonne-aussen { stop-color: var(--sonne); stop-opacity: 0; }
.panorama .sterne { fill: var(--stern); opacity: var(--stern-deckung); }
.panorama .sonne { fill: var(--sonne); }
.panorama .fernstes { fill: var(--fernstes); stroke: var(--ton); stroke-opacity: .25; }
.panorama .ferne { fill: var(--ferne); }
.panorama .bauten { fill: var(--fernstes); opacity: .9; }
.panorama .boden { fill: var(--grund); }
.kopf { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ab4);
  height: 100%; padding: 0 var(--ab6) var(--ab4); max-width: 1320px; margin: 0 auto; }
.kopf-text { min-width: 0; }
.kopf h1 { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; font-weight: 560; letter-spacing: -.015em; overflow-wrap: anywhere; }
.knopfe { display: flex; gap: var(--ab2); flex: none; }
.rund { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rand); cursor: pointer; padding: 0;
  background: color-mix(in srgb, var(--karte) 80%, transparent); color: var(--text); position: relative; backdrop-filter: blur(8px); box-shadow: var(--schatten-klein); }
.rund:hover { border-color: var(--ton); text-decoration: none; }
.rund .sym { width: 18px; height: 18px; }
.rund .punkt { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ton); border: 2px solid var(--karte); }
.klein-rund { width: 36px; height: 36px; backdrop-filter: none; background: var(--karte); }

/* ── stage: 12-column grid ─────────────────────────────────────────────── */
.buehne { max-width: 1320px; margin: 0 auto; padding: var(--ab5) var(--ab6) 96px; display: grid; gap: var(--ab4);
  grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.buehne:focus { outline: none; }
.s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s6 { grid-column: span 6; }
.s5 { grid-column: span 5; } .s4 { grid-column: span 4; } .s3 { grid-column: span 3; }
.nur-handy { display: none; }

/* frameless (login / pairing) */
.vollbild { min-height: 100vh; }

/* ── premium card: gloss line instead of a shadow ──────────────────────── */
.karte { background: var(--karte-verlauf); border: 1px solid var(--rand); border-radius: var(--rd-g); padding: var(--ab4);
  position: relative; min-width: 0; overflow: hidden; box-shadow: var(--schatten); }
.karte::before { content: ""; position: absolute; left: var(--ab4); right: var(--ab4); top: 0; height: 1px;
  background: var(--gold-linie); opacity: .5; }
.kkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--ab3); margin-bottom: var(--ab3); flex-wrap: wrap; }
.kkopf h2 { margin: 0; font-size: 1.12rem; font-weight: 580; letter-spacing: -.005em; display: flex; align-items: center; gap: var(--ab2); min-width: 0; }
.kkopf h2 .sym { width: 18px; height: 18px; color: var(--text-gold); flex: none; }
.kkopf-rechts { display: flex; align-items: center; gap: var(--ab2); margin-left: auto; }
.kkoerper { min-width: 0; }
.mulde-feld { background: var(--mulde); border: 1px solid var(--rand); border-radius: var(--rd); padding: var(--ab3); }

.marker { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px;
  border: 1px solid var(--rand); color: var(--matt); white-space: nowrap; }
.marker.app { border-color: var(--rand); color: var(--kante); }
/* ✏️ L0-BASIS (08.10.2026, Marco: „anstelle nur ansehen dort zum Privatkonto zum Firmenkonto … Postfach öffnen … zum
   Fahrtenschreiber usw.“): the passive badges „Nur ansehen“ / „Aktion“ are no longer shown (DOM kept until the page lanes
   remove their `marker:`); `app` and `spiel` stay. Instead a card names its way: the gold action link `ziel` (basis/karten.js).
   ✏️ MERGE-9 L-END (08.10.2026): `marker()` no longer builds `lesen`/`tun` → their looks and the hiding line are removed. */
.kziel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; min-height: 32px; padding: 4px 12px 4px 12px;
  border-radius: 99px; border: 1px solid color-mix(in srgb, var(--ton) 55%, transparent); color: var(--text-gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ton) 16%, transparent), color-mix(in srgb, var(--ton) 6%, transparent));
  font-size: .86rem; font-weight: 650; letter-spacing: .01em; text-decoration: none; line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.kziel .sym { width: 16px; height: 16px; flex: none; }
.kziel-pfeil { font-size: 1.15em; line-height: 1; transform: translateY(-1px); transition: transform .15s ease; }
.kziel:hover { text-decoration: none; border-color: var(--ton); background: color-mix(in srgb, var(--ton) 22%, transparent); }
.kziel:hover .kziel-pfeil { transform: translate(2px, -1px); }
.kziel:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; border-radius: 99px; }
@media (prefers-reduced-motion: reduce) { .kziel, .kziel-pfeil { transition: none; } }
/* phone: title first, the link right under it as a whole — never broken inside its words */
@media (max-width: 700px) {
  .karte.mit-ziel > .kkopf { align-items: flex-start; }
  .kziel { min-height: 36px; font-size: .84rem; }
}
/* ✏️ L0-BASIS (08.10.2026, Marco: „Deine Laufbahn ETS2 wenn man umschaltet ATS“): the world tag right of the page title */
.kopf-titelzeile { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.kopf-titelzeile h1 { min-width: 0; flex: 0 1 auto; }
.kopf-welt { flex: none; font-family: inherit; font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 650; letter-spacing: .02em;
  color: var(--text-gold); white-space: nowrap; }
.kopf-welt[hidden] { display: none; }
/* ATS reads in the ATS colour of the world chips (blue), ETS2 in gold — text only, never the chip's box (walk 08.10.) */
.kopf-titelzeile .kopf-welt.welt-ats { color: var(--signal2); background: none; border: 0; padding: 0; }
/* ✏️ L0-BASIS (08.10.2026): the OWNER TAG beside the world tag — „Privat“ (own colour, blue) · „VTC · <company>“ (gold) */
.kopf-besitz { flex: 0 1 auto; min-width: 0; align-self: center; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--rand); color: var(--matt); }
.kopf-besitz.besitz-privat { border-color: color-mix(in srgb, var(--signal2) 55%, transparent); color: var(--signal2);
  background: color-mix(in srgb, var(--signal2) 10%, transparent); }
.kopf-besitz.besitz-vtc { border-color: color-mix(in srgb, var(--ton) 60%, transparent); color: var(--text-gold);
  background: color-mix(in srgb, var(--ton) 12%, transparent); }
.kopf-besitz[hidden] { display: none; }
/* ✏️ ROLLEN-ANZEIGE (09.10.2026, NACHTSCHICHT_0810 item 4, Marco 08.10.): the ROLE TAG beside „Cockpit“ / „Fahrt“ — a small
   gold-edged pill with a soft sheen (luxury, like the owner tag's gold), the owner's „Inhaber“ in full gold, „Singlefahrer“ in
   the quiet blue of the private side. Never wider than its room: a long self-made role name ends in „…“ (the title never does). */
.kopf-rolle { display: inline-block; flex: 0 1 auto; min-width: 0; max-width: 220px; align-self: center; vertical-align: middle;
  font-family: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.35;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-gold);
  border: 1px solid color-mix(in srgb, var(--ton) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ton) 16%, transparent), color-mix(in srgb, var(--ton) 6%, transparent)); }
.kopf-rolle.rolle-inhaber { border-color: color-mix(in srgb, var(--ton) 80%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ton) 26%, transparent), color-mix(in srgb, var(--ton) 10%, transparent)); }
.kopf-rolle.rolle-solo { color: var(--signal2); border-color: color-mix(in srgb, var(--signal2) 50%, transparent);
  background: color-mix(in srgb, var(--signal2) 9%, transparent); }
.kopf-rolle[hidden] { display: none; }
/* ✏️ L0-BASIS (08.10.2026, Marco: „es muss alles sofort sichtbar sein und klar strukturiert“): the ▸ sub-rows under a place */
.unter-eintrag { display: flex; align-items: center; gap: 8px; position: relative; min-height: 30px; padding: 4px 10px 4px 42px;
  border-radius: 8px; color: var(--matt); font-size: .84rem; text-decoration: none; }
.unter-eintrag::before { content: ""; position: absolute; left: 27px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: color-mix(in srgb, var(--ton) 55%, transparent); }
.unter-eintrag:hover { color: var(--text); background: var(--karte); text-decoration: none; }
.unter-eintrag.hier { color: var(--text-gold); font-weight: 650; }
.unter-eintrag.hier::before { background: var(--ton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 25%, transparent); }
.unter-eintrag[hidden] { display: none; }
.unter-eintrag:focus-visible { outline: 2px solid var(--ton); outline-offset: 1px; }
/* Mein Leben — an own top-level point between the groups */
.nav > .nav-eintrag.eigener-punkt { margin-top: 2px; }
@media (max-width: 1100px) {
  /* the icon rail shows no sub-rows (a group icon opens the grouped sheet, which lists them) */
  .leiste .unter-eintrag { display: none; }
}
@media (max-width: 700px) {
  /* walk 08.10. (390 px): the tag squeezed the title to one letter — on the phone the overline („VTC“ / „Mein Betrieb“) names the
     owner, the tag steps back; the title keeps its room (it shrinks only after the world tag) */
  .kopf-besitz { display: none; }
}
@media (max-width: 700px) {
  .kopf-titelzeile { gap: 6px; }
  .kopf-welt { font-size: .9rem; }
}

/* hero card (running tour): karte({ klasse: 'held' }) — picture left, text right inside .kkoerper */
.held { background: radial-gradient(120% 140% at 0% 0%, var(--tonhauch2), transparent 60%), var(--karte-verlauf); border-color: color-mix(in srgb, var(--ton) 35%, var(--rand)); }
.held > .kkoerper { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--ab5); align-items: center; }
.held h3 { margin: var(--ab1) 0 0; font-size: 2.1rem; line-height: 1.1; font-weight: 560; letter-spacing: -.02em; overflow-wrap: anywhere; }
.schild { font: 700 .82rem/1 var(--mono); border: 2px solid var(--text); border-radius: 5px; padding: 4px 8px; color: var(--text);
  letter-spacing: .06em; white-space: nowrap; display: inline-block; }
.strecke { margin-top: var(--ab4); }
.strecke .band { position: relative; height: 6px; border-radius: 3px; background: var(--schiene); }
.strecke .band i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--ton2), var(--ton-hell)); }
.strecke .band b { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--karte); border: 4px solid var(--ton); }
.strecke .orte { display: flex; justify-content: space-between; gap: var(--ab2); margin-top: var(--ab2); font-size: .85rem; font-weight: 600; }

.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ab3); margin-top: var(--ab4); }
.kz { background: var(--mulde); border: 1px solid var(--rand); border-radius: var(--rd); padding: var(--ab3); min-width: 0; }
.kz .zahl { font-size: 1.45rem; font-weight: 560; display: block; line-height: 1.2; overflow-wrap: normal; } /* ✏️ BASIS-SCHALE: was anywhere („777 k / m“) — see the block at the file end */
.kz .klein { color: var(--matt); display: block; }

/* the giro card — the luxury piece */
.giro { color: var(--giro-text); border: none; min-height: 228px; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(232, 166, 63, .32), transparent 55%),
    radial-gradient(80% 90% at 0% 100%, rgba(92, 185, 222, .14), transparent 60%),
    linear-gradient(135deg, var(--giro-grund1), var(--giro-grund2) 70%); }
.giro::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
.giro > .kkoerper { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--ab3); }
.giro .chip { width: 44px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, var(--giro-chip1), var(--giro-chip2)); opacity: .9; }
.giro .betrag { font-family: var(--serif); font-size: 2.5rem; font-weight: 600; letter-spacing: -.025em; line-height: 1; overflow-wrap: normal; }
.giro .nr { font: 600 .85rem/1 var(--mono); letter-spacing: .12em; opacity: .8; }
.giro .klein { opacity: .75; }

/* lists */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: var(--ab3); padding: 10px 0; border-top: 1px solid var(--naht); min-width: 0; }
.liste li:first-child { border-top: 0; }
.liste .zeile-link { display: flex; align-items: center; gap: var(--ab3); flex: 1; min-width: 0; color: inherit; }
.liste .zeile-link:hover { text-decoration: none; }
.liste .zeile-link:hover b { color: var(--ton); }
.zeile-mitte { min-width: 0; flex: 1; }
.zeile-mitte b { display: block; overflow-wrap: anywhere; }
.liste .re { margin-left: auto; text-align: right; white-space: nowrap; }
.symbol { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--text-gold);
  background: linear-gradient(180deg, var(--tonhauch2), var(--tonhauch)); border: 1px solid color-mix(in srgb, var(--ton) 30%, var(--rand)); }
.symbol .sym { width: 18px; height: 18px; }
.liste-huelle .weitere { margin-top: var(--ab3); width: 100%; }

.balken { margin-top: 6px; height: 6px; border-radius: 3px; background: var(--schiene); overflow: hidden; }
.balken i { display: block; height: 100%; border-radius: 3px; background: var(--frei); }
.balken i.gelb { background: var(--achtung); } .balken i.rot { background: var(--rost); }

/* controls */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--ab2); border-radius: var(--rd-knopf); min-height: 44px;
  padding: 11px 18px; font: 700 .95rem var(--schrift); letter-spacing: .005em; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--gold-verlauf); color: var(--auf-gold); box-shadow: var(--schatten-knopf);
  transition: transform var(--flott) var(--kurve), filter var(--flott); }
.knopf:hover { text-decoration: none; filter: brightness(1.05); }
.knopf:active { transform: translateY(1px); }
.knopf.leise { background: var(--karte-verlauf); border-color: var(--rand); color: var(--text); box-shadow: var(--schatten-klein); font-weight: 640; }
.knopf.leise:hover { border-color: color-mix(in srgb, var(--ton) 60%, var(--rand)); }
.knopf.gefahr { background: transparent; border-color: var(--gefahr); color: var(--rost); box-shadow: none; }
.knopf.breit { width: 100%; }
.knopf[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.knopf .sym { width: 18px; height: 18px; }
.feld { display: flex; align-items: center; gap: var(--ab2); background: var(--mulde); border: 1px solid var(--rand); border-radius: var(--rd); padding: 0 var(--ab3); min-height: 50px; }
.feld:focus-within { border-color: var(--ton); box-shadow: 0 0 0 3px var(--tonhauch); }
.feld input, .feld select, .feld textarea { flex: 1; border: 0; background: transparent; color: var(--text); font: 1rem var(--schrift); outline: 0; min-width: 0; padding: var(--ab2) 0; }
.feld .sym { width: 18px; height: 18px; color: var(--matt); flex: none; }
/* ✏️ 28.09. (wbs1, NACHTRAG 447): date/time fields take the page font everywhere (the browser default is a system
   font at 13 px) — zero specificity through :where(), so every page rule (e.g. `.feld input`) still wins */
:where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"]) { font: inherit; color: inherit; }
.feld-zeile { display: grid; gap: var(--ab2); margin-top: var(--ab4); }
.feld-zeile > label { font-size: .85rem; font-weight: 600; }
.umschalter { display: inline-flex; border: 1px solid var(--rand); border-radius: 99px; padding: 3px; gap: 2px; background: var(--mulde); }
.umschalter button { border: 0; background: transparent; border-radius: 99px; padding: 6px 12px; cursor: pointer; color: var(--matt); font-weight: 600; }
.umschalter button[aria-pressed="true"] { background: var(--karte-verlauf); color: var(--text); box-shadow: var(--schatten-klein); }

/* states */
.hinweis { display: flex; gap: var(--ab2); align-items: flex-start; font-size: .85rem; color: var(--matt);
  border: 1px dashed var(--rand); border-radius: var(--rd); padding: var(--ab3); margin-top: var(--ab3); }
.hinweis .sym { width: 18px; height: 18px; flex: none; color: var(--signal2); }
.leer { display: grid; justify-items: center; text-align: center; gap: var(--ab2); padding: var(--ab5) var(--ab4); }
.leer-symbol { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--tonhauch); color: var(--ton); }
.leer-symbol .sym { width: 22px; height: 22px; }
.leer p { margin: 0; max-width: 34em; }
/* ✏️ W6-KOSMETIK (09.10.2026, w4_kosmetik (e)): the empty card's title never leaves one short word alone on its last line
   (solo #/inhaber 390: „an.“) — like the „kommt bald“ h3; browsers without support simply ignore it */
.leer > b { text-wrap: balance; max-width: 34em; }
.skelett { display: grid; gap: var(--ab3); padding: var(--ab2) 0; }
.skelett i { display: block; height: 14px; border-radius: 7px; background: var(--schiene); }
.skelett i.kurz { width: 60%; }
.fehlerkarte { border-color: color-mix(in srgb, var(--rost) 45%, var(--rand)); }
.fehlerkarte .kkopf h2 .sym { color: var(--rost); }

/* "coming soon" — a luxury card, not an error */
.kommt-bald { min-height: 320px; display: grid; place-items: center;
  background: radial-gradient(70% 90% at 80% 0%, var(--tonhauch), transparent 60%), radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--signal2) 10%, transparent), transparent 60%), var(--karte); }
.kommt-bald-innen { display: grid; justify-items: center; text-align: center; gap: var(--ab2); padding: var(--ab5) var(--ab4); max-width: 34em; }
/* ✏️ 28.09. (wbs1, NACHTRAG 447): the headline of „Kommt bald" / „Nur in der App" / „Nicht für dein Konto" breaks in
   balanced lines (no lone last word on the phone); browsers without text-wrap simply ignore it */
.kommt-bald-innen h3 { margin: 0; font-size: 1.9rem; font-weight: 560; letter-spacing: -.02em; text-wrap: balance; }
.kommt-bald-innen p { margin: 0; }
/* ✏️ 07.10.2026 L0-R5 (N9): the two ways of a driver without a VTC side by side, wrapping on the phone */
.ohne-vtc-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ab2); margin-top: var(--ab2); }
.kommt-bald-symbol { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: var(--text-gold); box-shadow: var(--leuchten);
  border: 1px solid color-mix(in srgb, var(--ton) 45%, transparent); background: var(--tonhauch); margin-bottom: var(--ab2); }
.kommt-bald-symbol .sym { width: 30px; height: 30px; }

/* ── bottom bar + "more" sheet (phone) ─────────────────────────────────── */
.unten { display: none; }
.blatt { position: fixed; inset: 0; z-index: 40; background: var(--schleier); display: flex; align-items: flex-end; }
.blatt-innen { width: 100%; background: var(--karte); border-top: 1px solid var(--rand); border-radius: var(--rd-g) var(--rd-g) 0 0;
  padding: var(--ab4) 16px calc(var(--unten-hoehe) + var(--ab4) + env(safe-area-inset-bottom, 0px)); position: relative; }
.blatt-innen::before { content: ""; position: absolute; left: var(--ab4); right: var(--ab4); top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glanz), transparent); }
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ab3); }
.blatt-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab2); }
.blatt-eintrag { display: grid; justify-items: center; gap: var(--ab1); padding: var(--ab3) var(--ab1); border-radius: 14px; background: var(--flaeche);
  border: 1px solid var(--rand); color: var(--text); font-size: .78rem; font-weight: 600; text-align: center; position: relative; }
.blatt-eintrag .sym { width: 22px; height: 22px; color: var(--text-gold); }
.blatt-eintrag[aria-current] { border-color: var(--ton); background: var(--tonhauch2); }
.blatt-eintrag .zaehler { position: absolute; top: 6px; right: 6px; margin: 0; }
.blatt-schalter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab2); margin-top: var(--ab3); }

/* ── tablet: rail becomes an icon rail ─────────────────────────────────── */
@media (max-width: 1100px) {
  .schale { grid-template-columns: var(--leiste-schmal) minmax(0, 1fr); }
  .leiste { padding: var(--ab4) var(--ab2); align-items: center; }
  .marke-text, .nav-eintrag .nav-text, .wer { display: none; }
  .marke { padding: 0 0 var(--ab4); }
  .nav-eintrag { justify-content: center; padding: 12px; }
  .nav-eintrag .zaehler { position: absolute; top: 4px; right: 2px; margin: 0; }
  .nav-eintrag[aria-current]::before { left: -8px; }
  .fuss { justify-content: center; }
  .schalter { flex-direction: column; }
  .buehne { padding: var(--ab4) var(--ab4) 96px; }
  .kopf { padding: 0 var(--ab4) var(--ab4); }
  .s8, .s7, .s6, .s5 { grid-column: span 12; }
  .s4, .s3 { grid-column: span 6; }
  .held > .kkoerper { grid-template-columns: 220px minmax(0, 1fr); }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── phone: bar at the bottom, one column ─────────────────────────────── */
@media (max-width: 700px) {
  .schale { grid-template-columns: minmax(0, 1fr); }
  .leiste { display: none; }
  .panorama { height: 132px; }
  .kopf { padding: 0 16px var(--ab3); }
  .kopf h1 { font-size: 1.5rem; }
  .buehne { padding: 16px 16px calc(var(--unten-hoehe) + 40px + env(safe-area-inset-bottom, 0px)); gap: var(--ab3); }
  .s4, .s3 { grid-column: span 12; }
  .held > .kkoerper { grid-template-columns: minmax(0, 1fr); gap: var(--ab3); }
  .held h3 { font-size: 1.6rem; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .giro .betrag { font-size: 2.1rem; }
  .kz { padding: 10px; }
  .kz .zahl { font-size: 1.05rem; }
  .nur-gross { display: none; }
  .nur-handy { display: initial; }
  .unten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: color-mix(in srgb, var(--mulde) 92%, transparent); backdrop-filter: blur(12px);
    border-top: 1px solid var(--rand); padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px)); min-height: var(--unten-hoehe); }
  .unten-eintrag { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68rem; font-weight: 600; color: var(--matt);
    background: transparent; border: 0; padding: 4px 0; cursor: pointer; position: relative; min-width: 0; min-height: 48px; justify-content: center; }
  .unten-eintrag:hover { text-decoration: none; color: var(--text); }
  .unten-eintrag .sym { width: 22px; height: 22px; }
  .unten-eintrag .nav-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* ✏️ BASIS-5 (08.10.2026, Marco: „es muss alles sofort sichtbar sein und klar struckturiert“; cut_texte: EN 360 „Freight mar…“):
     a two-word label (EN „Freight market“ — the app's word, never „Market“ alone) wraps at the space into a second line instead of
     an ellipsis. Icon 22 + gap 2 + 2 × 11.4 + padding 2 = 49 px ≤ the 66 px bar (6 + 49 + 10) — the bar does not grow;
     one-line labels stay centred where they were (justify-content: center). */
  .unten-eintrag { padding: 1px 0; }
  .unten-eintrag .nav-text { white-space: normal; text-align: center; line-height: 1.05; overflow-wrap: normal; word-break: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .unten-eintrag[aria-current] { color: var(--ton); }
  .unten-eintrag .zaehler { position: absolute; top: 0; left: 50%; margin: 0 0 0 6px; font-size: .62rem; line-height: 16px; padding: 0 5px; min-width: 16px; }
  .kommt-bald { min-height: 260px; }
  .kommt-bald-innen h3 { font-size: 1.5rem; }
}
/* ✏️ 2.0 (W0 `wbas1`): the sheet also opens on the TABLET (a group icon of the icon rail) — only the desktop
   (> 1100 px, the rail shows every group itself) never shows it. */
@media (min-width: 1101px) {
  .blatt { display: none !important; }
}

/* ==========================================================================
   ✏️ 2.0 — the app's groups (FAHREN · GELD · BETRIEB · HÄNDLER), Post + world, footer, sheet groups
   ========================================================================== */
.gruppe { display: flex; flex-direction: column; gap: 2px; margin-top: var(--ab1); }
.gruppe-kopf { display: flex; align-items: center; gap: var(--ab3); padding: 8px var(--ab3); border-radius: var(--rd-k); border: 0; width: 100%;
  background: transparent; color: var(--kante); font: 720 .68rem var(--schrift); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; text-align: left; }
.gruppe-kopf:hover { color: var(--text); background: color-mix(in srgb, var(--tonhauch) 45%, transparent); }
.gruppe-kopf .sym { width: 18px; height: 18px; flex: none; }
.gruppe-kopf .pfeil { width: 14px; height: 14px; margin-left: auto; transition: transform .18s ease; }
.gruppe-kopf .zaehler + .pfeil { margin-left: var(--ab2); }
.gruppe.offen .gruppe-kopf .pfeil { transform: rotate(180deg); }
.gruppe-kopf.aktiv { color: var(--text-gold); }
.gruppe-inhalt { display: flex; flex-direction: column; gap: 2px; padding-left: var(--ab2); border-left: 1px solid var(--naht); margin-left: 18px; }
.gruppe-inhalt[hidden] { display: none; }
.gruppe-inhalt .nav-eintrag { padding: 8px var(--ab3); font-size: .9rem; }
.gruppe-inhalt .nav-eintrag[aria-current]::before { left: -9px; }

/* ✏️ KLEIN-M4A (walk M2-16 „Postfach twice in the sidebar“): the rail shows the mailbox ONCE — the „Post“ shortcut under
   the groups (with its counter, always visible); its in-group twin in BETRIEB stays in the DOM (data, phone sheet, search) */
.leiste .nav .gruppe-inhalt > .nav-eintrag[data-bereich="postfach"] { display: none; }
/* … and on #/postfach the visible „Post“ row carries the gold mark of the hidden place (data and aktivSetzen unchanged) */
.leiste:has(.gruppe-inhalt > .nav-eintrag[data-bereich="postfach"][aria-current]) .post-block .nav-eintrag[data-bereich="postfach"] {
  color: var(--text); background: linear-gradient(90deg, var(--tonhauch2), transparent); }
.leiste:has(.gruppe-inhalt > .nav-eintrag[data-bereich="postfach"][aria-current]) .post-block .nav-eintrag[data-bereich="postfach"] .sym { color: var(--text-gold); }
.post-block { margin-top: var(--ab3); padding-top: var(--ab3); border-top: 1px solid var(--rand); display: flex; flex-direction: column; gap: var(--ab2); }
.welt-block { display: flex; align-items: center; gap: var(--ab2); padding: 4px var(--ab3); min-height: 36px; flex-wrap: wrap; }
.welt-kopf { display: inline-flex; align-items: center; gap: var(--ab2); color: var(--matt); font-size: .8rem; font-weight: 600; }
.welt-kopf .sym { width: 16px; height: 16px; }
.welt-umschalter { margin-left: auto; }
.welt-umschalter button { padding: 4px 10px; font-size: .78rem; letter-spacing: .04em; }
.welt-anzeige, .welt-abzeichen { margin-left: auto; font: 700 .72rem/1 var(--mono); letter-spacing: .08em; border-radius: 99px; padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--ton) 55%, transparent); color: var(--ton); background: var(--tonhauch); white-space: nowrap; }
.welt-abzeichen { margin-left: 0; display: inline-block; vertical-align: middle; }
.welt-ats, .welt-abzeichen.welt-ats { border-color: color-mix(in srgb, var(--signal2) 55%, transparent); color: var(--signal2);
  background: color-mix(in srgb, var(--signal2) 12%, transparent); }

.fuss-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--ab3); padding-top: var(--ab3); border-top: 1px solid var(--rand); }
.leise-eintrag { font-size: .88rem; padding: 7px var(--ab3); }
.leise-eintrag .sym { width: 18px; height: 18px; }

.welt-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--karte) 80%, transparent); color: var(--text); font: 700 .8rem var(--mono); letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(8px); }
.welt-chip[hidden] { display: none; }
.welt-chip:hover { border-color: var(--ton); }
.welt-chip[disabled] { cursor: default; opacity: .8; }
.welt-chip .sym { width: 16px; height: 16px; color: var(--text-gold); }
/* ✏️ W165 (01.10.2026): the short note when the view followed the world he is driving in (fahrt/weltfolge.js) */
.welt-folge { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 55;
  width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--ton) 55%, transparent); background: var(--karte); color: var(--text);
  font-size: .9rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); pointer-events: none; }
.welt-chip[data-welt="ats"] .sym { color: var(--signal2); }

.marker.spiel { border-color: color-mix(in srgb, var(--achtung) 55%, transparent); color: var(--achtung); }
.nur-app .marker { margin-bottom: var(--ab2); }
/* ✏️ BASIS-4 (08.10.2026, vorwalk_c N1): the Einrichtung card is no dead end — app download + the web's own setup places */
.nur-app-wege { display: grid; justify-items: center; gap: var(--ab2); margin-top: var(--ab3); width: 100%; }
.nur-app-wege .nur-app-laden { display: inline-flex; align-items: center; gap: var(--ab2); }
.nur-app-wege .nur-app-web { margin-top: var(--ab3); }
.nur-app-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ab2); }
/* ✏️ DOWNLOAD-KNOPF (09.10.2026, login item 19): every „Nur in der App“ card — sentence + ONE download button. Centred in
   the centred `nurInDerApp` card, left in the foot of a normal card (`kfuss-app`, after the body). */
.nur-app-laden-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ab2) var(--ab3); margin-top: var(--ab3); }
.nur-app-laden-zeile .nur-app-satz { margin: 0; flex: 1 1 16em; }
.nur-app-laden-zeile .nur-app-laden { display: inline-flex; align-items: center; gap: var(--ab2); flex: none; }
.kommt-bald-innen .nur-app-laden-zeile { flex-direction: column; justify-content: center; }
.kommt-bald-innen .nur-app-laden-zeile .nur-app-satz { flex: none; }
.kfuss-app { border-top: 1px solid var(--rand); margin-top: var(--ab3); }
@media (max-width: 600px) { .kfuss-app .nur-app-laden { width: 100%; justify-content: center; } }
/* ✏️ APP-MODUS-WEB (09.10.2026, W1 F1 BLOCKER): INSIDE the app (`html[data-app="1"]`, set by the app's shim — BRUECKE § 4) no
   download of any kind — second guard beside the code (karten.js/ablauf.js do not build it there). The browser never has the mark. */
html[data-app="1"] .nur-app-laden-zeile, html[data-app="1"] .nur-app-laden, html[data-app="1"] .kfuss-app,
html[data-app="1"] .ein-laden, html[data-app="1"] .nur-app-schon,
html[data-app="1"] a[href*="Dispolotse-einrichten"], html[data-app="1"] a[href$=".exe"] { display: none !important; }
.nur-app-oeffnen { margin-top: var(--ab3); }
.nur-app-oeffnen[hidden] { display: none; }
/* W1 F8: in the app „Live-Karte“ opens the app's own map window — no ↗ „new tab“ sign on that entry */
html[data-app="1"] .nav-eintrag[data-bereich="livekarte"] .extern-zeichen,
html[data-app="1"] .blatt-eintrag[data-bereich="livekarte"] .extern-zeichen { display: none; }
/* ✏️ BASIS-4: the report dialog covers the phone bottom bar — hidden while it is open (schale.js meldeOffen) */
body.melde-offen .unten { visibility: hidden; }

/* the grouped sheet */
.blatt-innen { max-height: 88vh; overflow-y: auto; }
.blatt-post { display: grid; gap: var(--ab2); margin-bottom: var(--ab3); padding-bottom: var(--ab3); border-bottom: 1px solid var(--naht); }
.blatt-post-eintrag { display: flex; align-items: center; gap: var(--ab3); padding: 10px var(--ab3); border-radius: var(--rd); background: var(--mulde);
  border: 1px solid var(--rand); color: var(--text); font-weight: 650; position: relative; }
.blatt-post-eintrag:hover { text-decoration: none; border-color: var(--ton); }
.blatt-post-eintrag .sym { width: 20px; height: 20px; color: var(--ton); }
.blatt-post .welt-block { background: var(--mulde); border: 1px solid var(--rand); border-radius: var(--rd); padding: 6px var(--ab3); }
.blatt-gruppe { margin-top: var(--ab3); }
.blatt-gruppe:first-child { margin-top: 0; }
.blatt-gruppe[hidden] { display: none; }
.blatt-gruppe h3 { margin: 0 0 var(--ab2); font-size: .72rem; }
.blatt[data-fokus] .blatt-gruppe { display: none; }
.blatt[data-fokus="fahren"] [data-blatt-gruppe="fahren"], .blatt[data-fokus="geld"] [data-blatt-gruppe="geld"],
.blatt[data-fokus="betrieb"] [data-blatt-gruppe="betrieb"], .blatt[data-fokus="haendler"] [data-blatt-gruppe="haendler"] { display: block; }
.blatt[data-fokus] .blatt-post, .blatt[data-fokus] .blatt-schalter, .blatt[data-fokus] .blatt-gruppe h3 { display: none; }
.blatt-eintrag[hidden] { display: none; }

/* ── tablet: icon rail — groups become icons that open the sheet at the side ── */
@media (max-width: 1100px) {
  .gruppe-kopf { justify-content: center; padding: 12px; }
  .gruppe-kopf .nav-text, .gruppe-kopf .pfeil, .leiste .welt-kopf .nav-text { display: none; }
  .gruppe-kopf .zaehler { position: absolute; margin: 0; top: 4px; right: 2px; }
  .gruppe { position: relative; margin-top: 0; }
  .gruppe-inhalt, .gruppe.offen .gruppe-inhalt { display: none; }
  .post-block { align-items: center; }
  .leiste .welt-block { flex-direction: column; padding: 0; gap: 4px; }
  .leiste .welt-umschalter { flex-direction: column; margin: 0; border-radius: var(--rd); }
  .leiste .welt-anzeige { margin: 0; }
  .fuss-nav { align-items: center; }
  .blatt.seitlich { align-items: stretch; justify-content: flex-start; padding-left: var(--leiste-schmal); }
  .blatt.seitlich .blatt-innen { width: min(360px, 100%); border-radius: 0 var(--rd-g) var(--rd-g) 0; border-top: 0; border-left: 1px solid var(--rand);
    padding: var(--ab4); max-height: none; }
  .blatt.seitlich .blatt-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .blatt:not(.seitlich) .blatt-innen { max-width: 640px; margin: 0 auto; border-radius: var(--rd-g) var(--rd-g) 0 0; padding-bottom: var(--ab4); }
}

/* ── phone: the sheet carries every group; the head chip stays small ────── */
@media (max-width: 700px) {
  .welt-chip { height: 36px; padding: 0 10px; font-size: .72rem; }
  .knopfe { gap: 6px; }
  .blatt-innen { max-height: calc(100vh - 24px); }
  /* ✏️ wfx1 F5 (B-WEB-SCHALE-BILDER, 27.09.): on the phone the head chip is the GLOBE only — the chip text squeezed
     „Guten Tag, Max" and the date onto two lines. The world's name stays in the chip's title/aria-label (schale.js)
     and in the „Mehr" sheet, where the switch already is; the globe keeps its world colour (ETS2 orange, ATS blue). */
  .welt-chip { width: 36px; padding: 0; justify-content: center; }
  .welt-chip .welt-chip-text { display: none; }
  .kopf { gap: var(--ab2); }
  /* ✏️ wfx1 F6: the sun (and its glow) moves to the right edge on the phone — at 360/390 px it sat right behind
     the small overline („FAHRER-BEREICH", the date), orange behind grey text. CSS px on an SVG element = user
     units of the 1200 × 170 view box: 930 → 1180 (the right edge of every phone width), a little higher. */
  .panorama .sonne, .panorama .sonne-hof { transform: translate(250px, -30px); }
  /* ✏️ SONNE390 (09.10.2026, bilder_audit2 item 14): at the right edge the sun sat cut off right beside the round head
     buttons (search · world · notes · bell) and read as a fifth, cut-off button. The calmer choice: no sun on the
     phone at all (sky, far view and stars at night stay). 1440 and the tablet rail are unchanged. */
  .panorama .sonne, .panorama .sonne-hof { display: none; }
}
/* ✏️ 03.10. N-VTCLINKS: the approved account picture in the foot circle (basis/kopfbild.js) over the initials;
   „VTC gründen“ heads the phone sheet (it left the BETRIEB group). */
.avatar { position: relative; overflow: hidden; }
.avatar-bild { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0; }
.avatar.mit-bild { color: transparent; }
.avatar.mit-bild .avatar-bild { opacity: 1; }
.blatt-oben { margin-bottom: var(--ab3); }
.blatt[data-fokus] .blatt-oben { display: none; }
/* ✏️ N-WEBFIX (05.10.2026, C-ZAHLEN): a collapsed group / „Mehr" carries at most one small dot, never a number (app Hinweiszahlen1004) */
.zaehler.nwf-punkt { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; }
.unten-eintrag .zaehler.nwf-punkt { min-width: 8px; padding: 0; }

/* ==========================================================================
   ✏️ 07.10.2026 step 1 Luxus v3 (second PC) — the new look of the shell, CSS ONLY (DOM of schale.js unchanged).
   In-place edits above: rail, nav, counters, cards (soft shadow + gold hairline), buttons (gold), group heads, sheet.
   This block: gold „VTC gründen" at the top of the rail · glass head bar (sticky) · phone bottom bar in glass.
   Menu order/names/„Cockpit"/„Meine VTC"/phone bar entries need schale.js → step 2 (web/BERICHT.md).
   ========================================================================== */
:root { --kopf-versatz: 104px; }   /* height of the sticky glass head — sticky page parts sit below it */

/* „VTC gründen" (OBEN, `laufbahn`) = was the gold button at the top left (Marco P35; ✏️ VTCKNOPF32 09.10.: now a plain entry, see below), place T2 = directly under
   „Übersicht" (BEDIENKONZEPT § 2a). Inside a VTC the group „VTC" (w253, first in GRUPPEN) takes the same place in gold.
   ✏️ step 2 (07.10.): schale.js now builds them in that place (OBEN order + the group at T2) — the CSS `order` rules are gone. */
/* ✏️ VTCGRUPPE33 (09.10.2026, replaces P35 for the GROUP „VTC“): Marco's rule for „VTC gründen“ applies to the group too —
   „es sollte doch normal sein wie alles andere erst wenn ich es anklicke kommt die markierung“ → the 4 rules
   `.nav > .gruppe[data-gruppe="vtc"]` (frame, light gradient box, shadow), `… > .gruppe-kopf` (sentence-case bold head),
   `… > .gruppe-kopf > .sym:first-child` (gold icon) and `… > .gruppe-inhalt` (extra gap) are GONE: the group head looks like
   FAHREN / GELD / HÄNDLER (common `.gruppe-kopf`), open/active marks come only from the common group/entry styles (light and
   dark, PC/tablet/phone). Its PLACE (T2, first in GRUPPEN, schale.js) is unchanged. */
/* ✏️ VTCKNOPF32 (09.10.2026, replaces P35 for the ENTRY „VTC gründen“): Marco 19:18 „warum ist vtc gründen immer hell
   markiert?? es sollte doch normal sein wie alles andere erst wenn ich es anklicke kommt die markierung“ → the gold
   frame/light box/gold icon of `.nav > .nav-eintrag[data-bereich="laufbahn"]` and of `.blatt-oben .blatt-eintrag[…laufbahn]`
   are GONE (here and in the ≤ 1100 px block): the entry is a plain `.nav-eintrag` / `.blatt-eintrag` like „Mein Leben“ or
   „Post“, highlighted only by the common `[aria-current]` style while `#/laufbahn` is open (light and dark alike).
   Its PLACE (OBEN / VTC_PLATZ in schale.js) is unchanged. The group „Meine VTC“ above keeps its frame (not part of the wish). */

/* glass head bar: the panorama scene stays, quieter, under frosted glass; it sticks to the top */
.panorama { position: sticky; top: 0; z-index: 20; height: var(--kopf-versatz); background: var(--glas);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.panorama .himmel { opacity: .7; }
.panorama::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--glas) 0%, color-mix(in srgb, var(--grund) 30%, transparent) 55%, transparent 100%); }
.panorama .kopf { z-index: 1; align-items: center; padding-top: 0; padding-bottom: 0; }
.panorama .kopf h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* ✏️ BASIS-SCHALE F13 (lane f12_f13_optik: every long overline was cut to one line „…“ on PC): the overline may take TWO lines at
   every width (the phone had it already) and ends in „…“ only after the second; a one-line overline keeps its height */
.panorama .kopf .aufschrift { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-overflow: ellipsis; overflow-wrap: normal; }
.panorama::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; z-index: 1; background: var(--gold-linie); opacity: .55; }

@media (max-width: 1100px) {
  :root { --kopf-versatz: 92px; }
  /* ✏️ VTCKNOPF32 (09.10.2026): the rail rule for the gold „VTC gründen“ box is gone — it is a normal entry now */
  /* avatar + account button side by side were 84 px in the 76 px icon rail (avatar cut at the left, also in w253) */
  .fuss { flex-direction: column; gap: var(--ab2); }
}
@media (max-width: 700px) {
  :root { --kopf-versatz: 68px; }
  .panorama { height: var(--kopf-versatz); }
  .kopf h1 { font-size: 1.3rem; }
  .kopf .aufschrift { font-size: .62rem; }
  /* ✏️ KLEIN-M4A (walk M2-19: „PROFIL, ALLE EINSTELLUNG…“, „Reparatur: Repa…“): the overline may take two lines and a long
     title (`kopf-lang`, schale.js setzeTitel) sets smaller in up to two — 2 × 12 px + 2 × 18 px stays inside the 68 px head */
  .panorama .kopf .aufschrift { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  .panorama .kopf h1.kopf-lang { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 1.02rem; line-height: 1.12; overflow-wrap: anywhere; }
  .unten { background: var(--glas); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
  /* ✏️ 07.10.2026 L0-R3 (rundgang_m2 #13): labels --kante were 3.84–3.97:1 light / 4.39–4.48:1 dark on the glass bar → --matt
     6.48–6.70:1 light / 8.07–8.23:1 dark (WCAG AA small text ≥ 4.5; rd_web_tmp/l0r3/kontrast.py) */
  .unten-eintrag { color: var(--matt); }
  .unten-eintrag[aria-current] { color: var(--text-gold); }
  .unten-eintrag[aria-current]::before { content: ""; position: absolute; top: -6px; left: 50%; width: 28px; margin-left: -14px; height: 2px;
    border-radius: 0 0 2px 2px; background: var(--gold-verlauf); }
}

/* ==========================================================================
   ✏️ 07.10.2026 L0 step 2 (second PC) — menu JS: quick search (Strg+K), „Mehr“ group tabs, name → profile, v3 icon accents.
   ========================================================================== */
/* v3 icon accents (basis/symbole.js classes `sg` gold fill, `st` tint) — default = currentColor, no tint */
.sym .sg { fill: var(--sym-gold, currentColor); }
.sym .st { fill-opacity: var(--sym-tint, 0); }

/* search field in the head: a field on PC/tablet, the magnifier alone on the phone (P18) */
.such-knopf { display: inline-flex; align-items: center; gap: 10px; height: 40px; min-width: 220px; padding: 0 10px 0 14px; border-radius: 99px;
  border: 1px solid var(--rand); background: color-mix(in srgb, var(--karte) 80%, transparent); color: var(--matt); cursor: pointer;
  font: 500 .88rem var(--schrift); box-shadow: var(--schatten-klein); }
.such-knopf:hover { border-color: var(--ton); color: var(--text); }
.such-knopf .sym { width: 18px; height: 18px; flex: none; }
.such-text { flex: 1; text-align: left; }
/* ✏️ KLEIN-M4A (walk M2-17: --kante measured 3.54:1 light / 4.49:1 dark): the key hint reads in --matt */
/* ✏️ KNOPF-OBEN 07.10.2026 (WALK-M2 #17): „Strg K" read 3.54:1 light / 4.49:1 dark in --matt on --mulde — now the text colour */
.taste { font: 600 .68rem/1 var(--mono); color: var(--text); border: 1px solid var(--rand); border-radius: 6px; padding: 4px 6px; background: var(--mulde); }
@media (max-width: 1100px) { .such-knopf { min-width: 0; } .such-knopf .taste { display: none; } }
@media (max-width: 700px) {
  .such-knopf { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .such-knopf .such-text { display: none; }
}

/* the palette (v3 komponenten.css „Quick search palette“, mapped onto the shell) */
.palette-huelle { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--grund) 55%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.palette-huelle[hidden] { display: none; }
.palette { position: absolute; top: 12vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); max-height: 76vh;
  display: flex; flex-direction: column; background: var(--karte-verlauf); border: 1px solid var(--rand); border-radius: var(--rd-g);
  box-shadow: var(--schatten); overflow: hidden; }
.palette-feld { border-radius: 0; border: 0; border-bottom: 1px solid var(--rand); min-height: 58px; background: transparent; padding: 0 12px 0 18px; }
.palette-feld:focus-within { box-shadow: none; }
.palette-feld > .sym { width: 20px; height: 20px; color: var(--text-gold); flex: none; }
.palette-eingabe { font-size: 1.05rem !important; }
.palette-eingabe::-webkit-search-cancel-button { display: none; }
.palette-treffer { overflow: auto; padding: var(--ab2); min-height: 0; }
.palette-abschnitt { padding: 10px 10px 4px; font-size: .68rem; }
.palette-zeile { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .92rem; min-width: 0; }
.palette-zeile:hover { text-decoration: none; background: var(--tonhauch); }
.palette-zeile .i { width: 18px; height: 18px; color: var(--matt); flex: none; }
.palette-zeile .palette-wort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-zeile small { margin-left: auto; color: var(--kante); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.palette-zeile[aria-selected="true"] { background: var(--tonhauch2); }
.palette-zeile[aria-selected="true"] .i { color: var(--text-gold); }
.palette-leer, .palette-laedt { padding: 12px 10px; margin: 0; }
.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; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .palette-fuss { display: none; }
}

/* „Mehr“ sheet: one tab per group (no long sheet scrolling) */
.mehr-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--ab3); }
.mehr-reiter-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--rand); background: var(--mulde); color: var(--matt); font: 650 .8rem var(--schrift); }
.mehr-reiter-knopf .sym { width: 16px; height: 16px; }
.mehr-reiter-knopf[aria-selected="true"] { background: var(--gold-verlauf); color: var(--auf-gold); border-color: transparent; }
.mehr-reiter-knopf[hidden] { display: none; }
.mehr-reiter-knopf:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.blatt-gruppe.reiter-aus { display: none; }
.blatt:not([data-fokus]) .blatt-gruppe > h3 { display: none; }
.blatt[data-fokus] .mehr-reiter { display: none; }
.blatt[data-fokus="vtc"] [data-blatt-gruppe="vtc"] { display: block; }

/* the name at the bottom is the way to the own profile */
.fuss-profil { display: flex; align-items: center; gap: var(--ab3); min-width: 0; flex: 1; color: var(--text); text-decoration: none;
  border-radius: var(--rd-k); padding: 4px; margin: -4px; }
.fuss-profil:hover { text-decoration: none; background: var(--tonhauch); }
.fuss-profil:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.fuss-profil .wer { min-width: 0; }
@media (max-width: 1100px) { .fuss-profil { flex: none; } .fuss-profil .wer { display: none; } }

/* ✏️ 07.10.2026 L0-R2 — page head (basis/kopf.js, default off): purpose line under the title + ONE gold main action */
.kopf .sk-zweck, .seitenkopf .sk-zweck { margin: 2px 0 0; font-size: .9rem; line-height: 1.35; max-width: 70ch; overflow-wrap: anywhere; }
.sk-aktion-platz { display: flex; align-items: center; flex: none; margin-left: auto; }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ab2); min-width: 0; }
.seitenkopf .sk-zweck { flex: 1 1 260px; }
@media (max-width: 700px) {
  .kopf .sk-zweck { font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sk-aktion-platz .knopf { min-height: 40px; padding: 8px 14px; }
}

/* ==========================================================================
   ✏️ 07.10.2026 Lane A (MENUE_NEU) — rail = scrolling part + FIXED bottom.
   ⛔⛔⛔ FROZEN (Marco 07.10.2026 ~20:0x: „das darf nie wieder verändert werden“): the world switch ETS2 | ATS sits in the
   non-scrolling bottom part (`.leiste-fest`: language/colour · Post · WORLD · profile), directly above the profile box,
   ALWAYS visible — also with every group open, at 1180×780 and larger. Only `.leiste-roll` scrolls.
   ========================================================================== */
.leiste { overflow: hidden; }
.leiste-roll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--ab1);
  scrollbar-width: thin; }
.leiste-fest { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--ab1); }
.leiste-fest .post-block { margin-top: var(--ab2); padding-top: var(--ab2); }
.leiste-fest .fuss { margin-top: var(--ab2); padding-top: var(--ab2); }
@media (max-width: 1100px) { .leiste-roll, .leiste-fest { align-items: center; width: 100%; } }
/* external ↗ entries (Live-Karte, Händler-Karte → the HP) */
.extern-zeichen { margin-left: auto; color: var(--text-gold); font-size: .85em; }

/* ✏️ L0B-BASIS-NACHTRAG (08.10.2026, parity A5 — the app's head chips): „Laufende Tour“ (gold, → #/fahrt) and „Funk ungelesen (n)“
   (blue, → #/funk), left of the search; hidden while empty (schale.js kopfChipsZeigen). Below 1600 px the icon + the number only
   (the walk at 1440 showed the worded chip squeezing the page title to „Mieten der Sp…“); the words stay in title + aria-label. */
.kopf-chips { display: flex; gap: var(--ab2); align-items: center; flex: none; }
.kopf-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 99px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ton) 60%, transparent); background: color-mix(in srgb, var(--karte) 80%, transparent);
  color: var(--text-gold); font-size: .82rem; font-weight: 700; text-decoration: none; backdrop-filter: blur(8px); position: relative; }
.kopf-chip[hidden] { display: none; }
.kopf-chip .sym { width: 18px; height: 18px; flex: none; }
.kopf-chip:hover { border-color: var(--ton); background: color-mix(in srgb, var(--ton) 14%, var(--karte)); }
.kopf-chip:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.kopf-chip.kchip-funk { color: var(--signal2); border-color: color-mix(in srgb, var(--signal2) 55%, transparent); }
.kopf-chip.kchip-funk:hover { border-color: var(--signal2); background: color-mix(in srgb, var(--signal2) 12%, var(--karte)); }
.kchip-zahl { display: none; }
@media (max-width: 1599px) {
  .kopf-chip { width: 40px; padding: 0; justify-content: center; }
  .kopf-chip .kchip-text { display: none; }
  .kchip-zahl:not([hidden]) { display: block; position: absolute; top: -4px; right: -4px; background: var(--signal2); color: #fff; font-size: .66rem;
    font-weight: 700; font-style: normal; border-radius: 99px; padding: 0 5px; line-height: 16px; min-width: 16px; text-align: center; }
}
@media (max-width: 700px) {
  .kopf-chip { width: 36px; height: 36px; }
  .kopf-chips { gap: 6px; }
}

/* ✏️ L0B-BASIS-NACHTRAG (08.10.2026): the sheet (phone „Mehr“ / tablet group icon) — a place with ▸ rows starts a line, its rows
   stand together in one box beside its tile (never scattered over the tile grid); a box without a visible row disappears */
.blatt-nav .blatt-eintrag.mit-unter { grid-column: 1; }
.blatt-nav .unter-gruppe { grid-column: 2 / -1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 0;
  border-left: 1px solid var(--rand); padding-left: 6px; min-width: 0; }
.blatt-nav .unter-gruppe:not(:has(.unter-eintrag:not([hidden]))) { display: none; }
.blatt-nav .unter-eintrag { min-height: 40px; padding: 4px 8px 4px 24px; font-size: .9rem; }
.blatt-nav .unter-eintrag::before { left: 10px; }

/* ✏️ TITEL-HANDY (08.10.2026, Marco: „es muss alles sofort sichtbar sein und klar struckturiert“; walks merge 8 / 5A: „Mein F…“,
   „Touren der …“ cut at 390 px — the five head buttons left the title 66–140 px): on the phone the head is TWO rows inside the
   SAME fixed 68 px — row 1: overline left, buttons right (36 px, like the search and world chips) · row 2: the title row over the
   FULL width. The title row is ONE flowing text — H1 + world tag „· ETS2“ inline, whole words, never an ellipsis. Its size is the
   largest step that fits in one line, set by schale.js `kopfEinpassen`: none 1.3rem · s1 1.12rem · s2 1.02rem · s3 .9rem (s3 may
   take a second line — not reached by any title of the menu, BERICHT § 3). No growth, nothing jumps (fit runs before paint). */
@media (max-width: 700px) {
  .panorama .kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 36px auto; align-content: center;
    column-gap: var(--ab2); row-gap: 1px; }
  .panorama .kopf .kopf-text { display: contents; }
  .panorama .kopf .aufschrift { grid-column: 1; grid-row: 1; align-self: center; margin: 0; min-width: 0; }
  .panorama .kopf .knopfe { grid-column: 2; grid-row: 1; align-self: center; }
  .panorama .kopf .knopfe .rund { width: 36px; height: 36px; }
  .panorama .kopf .knopfe .rund .punkt { top: 6px; right: 7px; }
  .panorama .kopf .kopf-titelzeile { grid-column: 1 / -1; grid-row: 2; display: block; min-width: 0; font-size: 1.3rem; line-height: 1.12;
    max-height: 2.24em; overflow: hidden; overflow-wrap: normal; word-break: normal; }
  .panorama .kopf .kopf-titelzeile h1, .panorama .kopf .kopf-titelzeile h1.kopf-lang { display: inline; font-size: inherit; line-height: inherit;
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; -webkit-line-clamp: none; }
  .panorama .kopf .kopf-titelzeile .kopf-welt { font-size: .72em; margin-left: .35em; white-space: nowrap; }
  .panorama .kopf .kopf-titelzeile.kopf-s1 { font-size: 1.12rem; }
  .panorama .kopf .kopf-titelzeile.kopf-s2 { font-size: 1.02rem; }
  .panorama .kopf .kopf-titelzeile.kopf-s3 { font-size: .9rem; }
  /* ✏️ ROLLEN-ANZEIGE: on the phone the role tag STAYS (unlike the owner tag) — small, inline after the title, capped at 45 % */
  .panorama .kopf .kopf-titelzeile .kopf-rolle:not([hidden]) { font-size: .58rem; max-width: 45%; margin-left: 8px; padding: 2px 8px; line-height: 1.3; }
  .panorama .kopf .kopf-titelzeile.kopf-mess .kopf-rolle:not([hidden]),
  .panorama .kopf .kopf-titelzeile.kopf-besitz-weg .kopf-rolle:not([hidden]) { display: none; }
  .panorama .kopf .kopf-titelzeile.kopf-besitz-unten .kopf-rolle:not([hidden]) { display: block; width: fit-content; margin: 2px 0 0; }
}
/* ✏️ BASIS-5 (08.10.2026, Marco: „es muss alles sofort sichtbar sein und klar struckturiert“; cut_texte: „SONNTAG, 4. / OKTOBER“
   in two lines at 360): a narrow phone shows the SHORT day title (`data-kurz`, schale.js setzeTitel → dom.js tagTitelKurz) in
   ONE line — „SO., 4. OKT.“ / „SUN 4 OCT“. The long text stays in the element (screen readers, tab title); wider screens unchanged. */
@media (max-width: 480px) {
  .panorama .kopf .aufschrift[data-kurz] { display: block; font-size: 0; letter-spacing: 0; white-space: nowrap; -webkit-line-clamp: none; }
  .panorama .kopf .aufschrift[data-kurz]::after { content: attr(data-kurz); font-size: .62rem; letter-spacing: var(--sp-aufschrift); line-height: 1.2; }
}
/* ✏️ TITEL-HANDY (main chat 08.10.2026, MERGE-10: „Firmenko…“ at 820 px — the owner tag and the H1 shrank together, the H1 lost):
   above the phone the title row flows the same way — H1 + world tag + owner tag inline, whole words, never an ellipsis on the H1;
   the owner tag is the part that steps to the next line (and alone may end in „…“ when the company name is very long).
   Steps by schale.js `kopfEinpassen` (KOPF_STUFEN_BREIT): big one line → s1 → s2 one line → big two lines → … → s3 two lines;
   two lines stay inside the 92 px (tablet) / 104 px (desktop) head. */
@media (min-width: 701px) {
  .panorama .kopf .kopf-text { flex: 1 1 auto; }
  .panorama .kopf .kopf-titelzeile { display: block; min-width: 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15;
    max-height: 2.6em; overflow: hidden; overflow-wrap: normal; word-break: normal; }
  .panorama .kopf .kopf-titelzeile h1 { display: inline; font-size: inherit; line-height: inherit; white-space: normal; overflow: visible;
    text-overflow: clip; overflow-wrap: normal; }
  .panorama .kopf .kopf-titelzeile .kopf-welt { font-size: .62em; margin-left: .4em; white-space: nowrap; }
  .panorama .kopf .kopf-titelzeile .kopf-besitz:not([hidden]) { display: inline-block; max-width: 100%; margin-left: 10px; vertical-align: middle;
    line-height: 1.3; }
  .panorama .kopf .kopf-titelzeile.kopf-s1 { font-size: 1.35rem; }
  .panorama .kopf .kopf-titelzeile.kopf-s2 { font-size: 1.2rem; }
  .panorama .kopf .kopf-titelzeile.kopf-s3 { font-size: 1.05rem; }
}
/* ✏️ TITEL-HANDY: the owner tag's place (schale.js kopfEinpassen) — measured away, on its own line, or stepped back */
@media (min-width: 701px) {
  .panorama .kopf .kopf-titelzeile { max-height: none; overflow: visible; }
  .panorama .kopf .kopf-titelzeile.kopf-mess .kopf-besitz:not([hidden]),
  .panorama .kopf .kopf-titelzeile.kopf-besitz-weg .kopf-besitz:not([hidden]) { display: none; }
  .panorama .kopf .kopf-titelzeile.kopf-besitz-unten .kopf-besitz:not([hidden]) { display: block; width: fit-content; margin: 3px 0 0; }
  /* ✏️ ROLLEN-ANZEIGE: the role tag takes the owner tag's place rules (measured away · own line · stepped back) */
  .panorama .kopf .kopf-titelzeile .kopf-rolle:not([hidden]) { margin-left: 10px; }
  .panorama .kopf .kopf-titelzeile.kopf-mess .kopf-rolle:not([hidden]),
  .panorama .kopf .kopf-titelzeile.kopf-besitz-weg .kopf-rolle:not([hidden]) { display: none; }
  .panorama .kopf .kopf-titelzeile.kopf-besitz-unten .kopf-rolle:not([hidden]) { display: block; width: fit-content; margin: 3px 0 0; }
}

/* ✏️ BASIS-2 (08.10.2026, Marco: „No click may make the page jump“ — lane HB-SPRUNG's finding, now for EVERY page):
   Chrome's scroll anchoring re-applied an old offset when a fold near the page end was closed (page got shorter, the
   browser clamped scrollY) and the next fold opened → the page jumped back down. The pages keep scrollY themselves
   (redraw in place / save + restore), so the document opts out of anchoring. The property is not inherited — it sits on
   the scrolling document itself (proven by HB-SPRUNG: on inner boxes it is not enough). Inner scroll boxes keep the default. */
html { overflow-anchor: none; }
/* ✏️ BASIS-MENUE (menue_audit D7, Marco: „jedes Ding hat genau EINEN Platz“): the phone sheet shows „Post“ on top — not a second time
   inside Gemeinschaft (the rail hides it the same way) */
.blatt [data-blatt-gruppe] [data-bereich="postfach"] { display: none; }

/* ✏️ APP-MODUS-WEB (09.10.2026, walk W1 F4 — Marco: no scrolling, every menu point at once): the app's WebView is 1208×877
   device px = 966×702 CSS px at 125 % Windows scaling → the ICON rail (701–1100 px) on a LOW window. There the rail's scroll
   part got 184 px for 561 px of entries (4 icons visible, the rest behind an inner scroll bar; at solo a horizontal bar too).
   ONLY for that width range on a low window (≤ 820 px) the icon rail is packed tighter so every entry stands at once: smaller
   logo and paddings, language/colour side by side, the world sentence (it wrapped word by word in 59 px) left out — the
   world switch itself stays in the FROZEN bottom part, always visible (Lane A rule). Desktop (> 1100 px) and phone (≤ 700 px)
   are untouched; a taller tablet window keeps today's rail. */
@media (min-width: 701px) and (max-width: 1100px) and (max-height: 820px) {
  .leiste { padding: var(--ab2) var(--ab2); gap: 0; }
  .leiste .marke { display: none; } /* low window: no logo (dealer/operator roles need the room; in the app the frame carries the brand); Cockpit stays first */
  .leiste-roll { overflow-x: hidden; gap: 0; }
  .leiste .nav { gap: 0; }
  .leiste .nav-eintrag, .leiste .gruppe-kopf { padding: 4px 12px; min-height: 28px; }
  .leiste .fuss-nav { margin-top: 4px; padding-top: 4px; gap: 0; }
  .leiste .fuss-nav .leise-eintrag { padding: 3px 12px; min-height: 26px; }
  .leiste-fest { gap: 0; }
  .leiste .schalter { flex-direction: row; gap: 3px; padding-top: 4px; justify-content: center; }
  .leiste .schalter .klein-rund { width: 28px; height: 28px; }
  .leiste .schalter .klein-rund .sym { width: 15px; height: 15px; }
  .leiste-fest .post-block { margin-top: 4px; padding-top: 4px; gap: 2px; }
  .leiste .welt-spielhinweis { display: none; }
  .leiste-fest .fuss { margin-top: 4px; padding-top: 4px; gap: 4px; min-height: 0; }
  .leiste .fuss .avatar { width: 30px; height: 30px; }
  .leiste .fuss .klein-rund { width: 28px; height: 28px; }
}
/* ✏️ BASIS-SCHALE (09.10.2026, second PC „YES please“, ZWEIT_AN_GAMING 12:05): the app window at 150 % Windows scaling is
   805×585 CSS px — the packed icon rail above still scrolled there (inhaber 25 px / 1 entry hidden, solo 37 px / 2, dealer and
   operator 103 px / 4). Below 660 px height the same rail is packed once more: tighter rows (24 px, the icon stays 20 px), the
   globe icon above the world switch is left out (the switch names itself: aria-label „Welt umschalten“, both worlds visible),
   world buttons and the round buttons a little lower. Every entry keeps its name as tooltip (`title`, beschriftungen()).
   The world switch stays in the FROZEN bottom part, always visible (Lane A rule). 966×702 (125 %) and every other size: unchanged. */
@media (min-width: 701px) and (max-width: 1100px) and (max-height: 660px) {
  .leiste { padding-top: 4px; padding-bottom: 4px; }
  .leiste .nav-eintrag, .leiste .gruppe-kopf { padding: 2px 12px; min-height: 24px; }
  .leiste .fuss-nav { margin-top: 2px; padding-top: 2px; }
  .leiste .fuss-nav .leise-eintrag { padding: 2px 12px; min-height: 24px; }
  .leiste .schalter { padding-top: 2px; }
  .leiste .schalter .klein-rund, .leiste .fuss .klein-rund { width: 26px; height: 26px; }
  .leiste-fest .post-block { margin-top: 2px; padding-top: 2px; gap: 0; }
  .leiste .welt-kopf { display: none; }
  .leiste .welt-block { gap: 2px; min-height: 0; }
  .leiste .welt-umschalter button { padding: 2px 8px; min-height: 24px; font-size: .72rem; }
  .leiste-fest .fuss { margin-top: 2px; padding-top: 2px; gap: 2px; }
  .leiste .fuss .avatar { width: 26px; height: 26px; font-size: .72rem; }
}

/* ✏️ APP-MODUS-2 (09.10.2026, W3-1): inside the app the world switch asks the app — busy while the call runs, and ONE short
   sentence when the app refuses while driving (8 s, no dialog). Outside the app neither class/attribute ever appears. */
.welt-umschalter[aria-busy="true"] { opacity: .6; cursor: progress; }
.welt-apphinweis { display: block; margin-top: 4px; line-height: 1.3; white-space: normal; }
.welt-apphinweis .wah-kurz { display: none; }
@media (max-width: 1100px) {
  .leiste .welt-apphinweis { margin-top: 0; text-align: center; line-height: 1.2; max-width: 100%; }
  .leiste .welt-apphinweis .wah-lang { display: none; }
  .leiste .welt-apphinweis .wah-kurz { display: inline; }
}
/* ✏️ W4-ATS-HINWEIS (09.10.2026, walk W4-1): inside the app with the operator's ATS switch off the ATS button is GREY (reason in
   its title + the sentence after a click) — never hidden, still clickable. Outside the app the class never appears. */
.welt-umschalter .welt-knopf-zu { opacity: .55; filter: grayscale(1); }
.welt-umschalter .welt-knopf-zu[aria-pressed="true"] { opacity: 1; filter: none; }

/* ✏️ BASIS-SCHALE (09.10.2026, W1 word break — lanes f6_statistik_kacheln + touren_optik: „777 k / m“, „289 k|m“, „03.10.20|26“):
   a figure box never breaks INSIDE a number, an amount with its currency, a unit or a date (they are joined by no-break spaces
   in dom.js / einheiten.js). On EVERY page — `!important`, because several page sheets still give their tiles
   `overflow-wrap: anywhere`. A figure wider than its box is made smaller by basis/zahlpass.js (only that box, by measure, at
   most to 62 %); only when even that is not enough the box gets `zp-bruch` and may break again — never a horizontal scroll.
   Words in labels, titles and sentences keep breaking where they would otherwise run out of their box. */
.kz .zahl, .giro .betrag, .li-kpi-w { overflow-wrap: normal !important; word-break: normal !important; }
.kz .zahl.zp-bruch, .giro .betrag.zp-bruch, .li-kpi-w.zp-bruch { overflow-wrap: anywhere !important; }