/* ==========================================================================
   Fahrer-Bereich · basis/tokens.css (lane 618, VERTRAG.md § 4)
   ✏️ 07.10.2026 step 1 „Luxus v3" (second PC): values = design system v3 (rd_design/ds/tokens.css), one token
   set for HP, login area and later the app. Every old name kept with the same meaning (+ the 89 fixed colours,
   now with a light value), new v3 tokens added. Fraunces (SIL OFL 1.1, basis/schrift/OFL.txt) for headings and
   numbers only; body text stays the system sans. Dark is the default; light by system choice or by the switch
   (data-farbe on <html>). Depth = soft shadow + gloss edge on cards and buttons only, never on list rows.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("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 solid gold (--ton) */
  --auf-gold: #1b1306;       /* text on the gold gradient (--gold-verlauf), both themes */
  --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: #e4585d;           /* ✏️ 07.10. step 1: v3 #c63c41 gave 3.3:1 as text (Abgelehnt, red sums) — 4.6:1 on --karte2 */
  --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);
  --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;
}

/* ✏️ 07.10. step 1 (rd_web): light --mulde, --frei/--gruen, --ton a touch deeper than rd_design v3 — 4.5:1 on the light wells (measured) */
/* ── 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: #f0ece4; --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: #925806; --ton-hell: #c98a22; --ton2: #7c4b04; --ton-tief: #5c3702; --auf-ton: #ffffff;
    --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: #146c3f; --gruen: #146c3f;
    --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: #f0ece4; --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: #925806; --ton-hell: #c98a22; --ton2: #7c4b04; --ton-tief: #5c3702; --auf-ton: #ffffff;
  --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: #146c3f; --gruen: #146c3f;
  --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 (rd_web) ─────────────────────────────────────────────────────
   ✏️ 07.10.2026 step 1 Luxus v3: the v3 base rules WITHOUT its margin resets (h1–h3/p margin 0) — the pages
   of the login area were laid out with the browser margins and keep their structure. */
*, *::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: 16px/1.55 var(--schrift); font-variant-numeric: tabular-nums;
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* P2 (Marco 07.10.): serif headings — family only, every page keeps its own sizes, weights and margins */
h1, h2, h3, .serif { font-family: var(--serif); font-optical-sizing: auto; letter-spacing: -.01em; }
a { color: var(--ton); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
::selection { background: var(--ton); color: var(--auf-ton); }
:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; border-radius: var(--rd-k); }

.zahl { font-family: var(--serif); font-weight: 650; letter-spacing: -.015em; font-variant-numeric: lining-nums tabular-nums; }
.matt { color: var(--matt); }
.klein { font-size: .82rem; }
.mini { font-size: var(--gr-mini); }
/* small caps labels stay sans, also when they sit on an h3 (sheet groups) */
.aufschrift { font-family: var(--schrift); font-size: .72rem; letter-spacing: var(--sp-aufschrift); text-transform: uppercase; color: var(--matt); font-weight: 650; margin: 0; }
.aufschrift.gold, .gold { color: var(--text-gold); }
.plus, .gut { color: var(--frei); }
.minus, .rot { color: var(--rost); }
.gelb { color: var(--achtung); }
.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; }
}