/* dispolotse.de · Werk live · werk_live.css — lane GRAFIK-WERKLIVE (second PC), 07.10.2026
   Nacht-Gold v3 tokens (designkit_v3 DesignV3.Farben / .Hell). Dark default; light with prefers-color-scheme: light
   (unless the page forces dark) or [data-farbe="hell"] / [data-theme="light"] on <html>. Faces of every isometric box
   are shaded from ONE colour per part (--c) with color-mix: top 100 %, left face 80 %, right face 64 %. */
@font-face { font-family: "Fraunces WL"; src: url("fraunces-var-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

.wl {
  --wl-grund: #08090d; --wl-karte: #13171f; --wl-karte2: #191e28; --wl-mulde: #0a0d12; --wl-rand: #222833; --wl-naht: #2b3240;
  --wl-text: #f3efe6; --wl-matt: #a4a9b2; --wl-kante: #727a86; --wl-gold: #f1c97a; --wl-ton: #e8a63f; --wl-ton-hell: #f8d896; --wl-ton-tief: #8a5410;
  --wl-frei: #52c892; --wl-kalt: #7d8693; --wl-signal: #e8a63f; --wl-blau: #5cb9de; --wl-rot: #e0565b;
  /* scene */
  --wl-s-grund: #12161d; --wl-s-sockel: #0b0d12; --wl-s-strasse: #0c0f14; --wl-s-linie: #c9a04e; --wl-s-hof: #151a22; --wl-s-hoflinie: #c9a04e;
  --wl-s-boden: #1b2029; --wl-s-fuge: #262c37; --wl-s-wand: #2a303b; --wl-s-fenster: #f8e2a8; --wl-s-bahn: #11151c; --wl-s-foerder: #22272e;
  --wl-s-stahl: #3a414c; --wl-s-gold: #c9a04e; --wl-s-glas: rgba(143, 180, 196, .22); --wl-s-glas2: rgba(143, 180, 196, .06);
  --wl-s-kegel: rgba(248, 216, 150, .30); --wl-s-roh: #7d828a; --wl-s-rahmen: #252a32; --wl-s-reifen: #111318; --wl-s-felge: #a8a59e;
  --wl-s-scheibe: #5f8496; --wl-s-overall: #283a4d; --wl-s-haut: #b8927a; --wl-s-helm: #c9a04e; --wl-s-schatten: rgba(0, 0, 0, .45);
  --wl-l0: #7d2330; --wl-l1: #1f4a63; --wl-l2: #e4ded1; --wl-l3: #244d3a; --wl-l4: #c8c9c9; --wl-l5: #2a4c84;
  color: var(--wl-text); font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-farbe="dunkel"]):not([data-theme="dark"]) .wl {
    --wl-grund: #f5f2eb; --wl-karte: #fffefb; --wl-karte2: #fbf8f2; --wl-mulde: #ede8de; --wl-rand: #e0d8ca; --wl-naht: #d3c9b7;
    --wl-text: #18150f; --wl-matt: #5e584e; --wl-kante: #847b6d; --wl-gold: #8a560a; --wl-ton: #9c6008; --wl-ton-hell: #c98a22; --wl-ton-tief: #5c3702;
    --wl-frei: #187a48; --wl-kalt: #847b6d; --wl-signal: #9c6008; --wl-blau: #1b6d8c; --wl-rot: #b0281f;
    --wl-s-grund: #e6e0d4; --wl-s-sockel: #c9c0ae; --wl-s-strasse: #6f6a62; --wl-s-linie: #f3e7c6; --wl-s-hof: #ddd6c8; --wl-s-hoflinie: #b98d35;
    --wl-s-boden: #d9d4ca; --wl-s-fuge: #c8c1b4; --wl-s-wand: #c4bfb6; --wl-s-fenster: #fff3cf; --wl-s-bahn: #bdb7ab; --wl-s-foerder: #8f8a82;
    --wl-s-stahl: #6a717c; --wl-s-gold: #b98d35; --wl-s-glas: rgba(120, 165, 190, .30); --wl-s-glas2: rgba(120, 165, 190, .10);
    --wl-s-kegel: rgba(255, 220, 140, .45); --wl-s-roh: #a39f97; --wl-s-rahmen: #4a4f57; --wl-s-reifen: #24272d; --wl-s-felge: #c9c4b9;
    --wl-s-scheibe: #86aabb; --wl-s-overall: #3a5068; --wl-s-haut: #c9a287; --wl-s-helm: #d9a63e; --wl-s-schatten: rgba(42, 33, 20, .25);
    --wl-l0: #8e2a35; --wl-l1: #2a5872; --wl-l2: #f3efe6; --wl-l3: #2e5c46; --wl-l4: #d9d9d6; --wl-l5: #33589a;
    color-scheme: light;
  }
}
:root[data-farbe="hell"] .wl, :root[data-theme="light"] .wl {
  --wl-grund: #f5f2eb; --wl-karte: #fffefb; --wl-karte2: #fbf8f2; --wl-mulde: #ede8de; --wl-rand: #e0d8ca; --wl-naht: #d3c9b7;
  --wl-text: #18150f; --wl-matt: #5e584e; --wl-kante: #847b6d; --wl-gold: #8a560a; --wl-ton: #9c6008; --wl-ton-hell: #c98a22; --wl-ton-tief: #5c3702;
  --wl-frei: #187a48; --wl-kalt: #847b6d; --wl-signal: #9c6008; --wl-blau: #1b6d8c; --wl-rot: #b0281f;
  --wl-s-grund: #e6e0d4; --wl-s-sockel: #c9c0ae; --wl-s-strasse: #6f6a62; --wl-s-linie: #f3e7c6; --wl-s-hof: #ddd6c8; --wl-s-hoflinie: #b98d35;
  --wl-s-boden: #d9d4ca; --wl-s-fuge: #c8c1b4; --wl-s-wand: #c4bfb6; --wl-s-fenster: #fff3cf; --wl-s-bahn: #bdb7ab; --wl-s-foerder: #8f8a82;
  --wl-s-stahl: #6a717c; --wl-s-gold: #b98d35; --wl-s-glas: rgba(120, 165, 190, .30); --wl-s-glas2: rgba(120, 165, 190, .10);
  --wl-s-kegel: rgba(255, 220, 140, .45); --wl-s-roh: #a39f97; --wl-s-rahmen: #4a4f57; --wl-s-reifen: #24272d; --wl-s-felge: #c9c4b9;
  --wl-s-scheibe: #86aabb; --wl-s-overall: #3a5068; --wl-s-haut: #c9a287; --wl-s-helm: #d9a63e; --wl-s-schatten: rgba(42, 33, 20, .25);
  --wl-l0: #8e2a35; --wl-l1: #2a5872; --wl-l2: #f3efe6; --wl-l3: #2e5c46; --wl-l4: #d9d9d6; --wl-l5: #33589a;
  color-scheme: light;
}

/* ── frame ─────────────────────────────────────────────────────────────────────────────────────────────── */
.wl { min-width: 0; max-width: 100%; }
.wl *, .wl *::before, .wl *::after { box-sizing: border-box; }
.wl-kacheln > *, .wl-unten > *, .wl-schlange li, .wl-karte-haupt { min-width: 0; }
.wl-leiste { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 10px; margin-bottom: 4px; scroll-snap-type: x proximity; }
.wl-tab { flex: 0 0 auto; scroll-snap-align: start; font: 600 14px/1 system-ui, "Segoe UI", sans-serif; color: var(--wl-matt); background: var(--wl-karte);
  border: 1px solid var(--wl-rand); border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.wl-tab:hover { color: var(--wl-text); border-color: var(--wl-kante); }
.wl-tab:focus-visible { outline: 2px solid var(--wl-gold); outline-offset: 2px; }
.wl-tab-an { color: var(--wl-gold); border-color: var(--wl-ton); background: linear-gradient(180deg, color-mix(in srgb, var(--wl-ton) 16%, var(--wl-karte)), var(--wl-karte));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-ton) 35%, transparent), 0 6px 18px -10px var(--wl-ton); }
.wl-karte-haupt { background: linear-gradient(180deg, var(--wl-karte2), var(--wl-karte)); border: 1px solid var(--wl-rand); border-radius: 20px; padding: 22px 22px 16px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--wl-gold) 18%, transparent) inset, 0 24px 60px -36px rgba(0, 0, 0, .6); }
.wl-titel { font: 600 26px/1.15 "Fraunces WL", Georgia, serif; margin: 0 0 4px; letter-spacing: .005em; }
.wl-art { margin: 0; color: var(--wl-gold); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.wl-produkte { margin: 6px 0 0; color: var(--wl-matt); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-zeile { margin: 4px 0 0; color: var(--wl-text); font-size: 14px; }
.wl-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; max-width: 860px; }
.wl-kachel { background: var(--wl-mulde); border: 1px solid var(--wl-rand); border-radius: 14px; padding: 10px 14px 9px; position: relative; overflow: hidden; }
.wl-kachel::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wl-gold) 55%, transparent), transparent); }
.wl-kachel-zahl { display: flex; align-items: center; gap: 8px; }
.wl-kachel-zahl b { font: 600 28px/1.05 "Fraunces WL", Georgia, serif; font-variant-numeric: tabular-nums; }
/* WERKLIVE-ZAEHLER (07.10.): a plate word breaks only at a space or at its soft hyphen (Warte-schlange), never mid-word */
.wl-kachel-wort { display: block; color: var(--wl-matt); font-size: 12.5px; margin-top: 2px; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.wl-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--wl-kalt); }
.wl-punkt-laeuft { background: var(--wl-frei); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-frei) 22%, transparent); }
.wl-punkt-frei { background: var(--wl-kalt); }
.wl-punkt-schlange { background: var(--wl-blau); }
.wl-punkt-abholung { background: var(--wl-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-signal) 22%, transparent); }
.wl-buehne { margin: 6px -8px 0; }
.wl-svg { display: block; width: 100%; height: auto; }
.wl-unten { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 8px; }
.wl-info { background: var(--wl-mulde); border: 1px solid var(--wl-rand); border-left: 4px solid var(--wl-blau); border-radius: 14px; padding: 12px 16px; }
.wl-info-abholung { border-left-color: var(--wl-signal); }
.wl-info-titel { margin: 0 0 6px; font: 600 17px/1.2 "Fraunces WL", Georgia, serif; }
.wl-info-start { margin: 0 0 6px; color: var(--wl-gold); font-size: 13.5px; }
.wl-schlange { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.wl-schlange li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; min-width: 0; padding: 3px 0; border-bottom: 1px dashed var(--wl-naht); }
.wl-pos { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--wl-blau);
  border: 1px solid color-mix(in srgb, var(--wl-blau) 60%, transparent); font-variant-numeric: tabular-nums; }
.wl-was { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-wann { color: var(--wl-matt); font-size: 12.5px; white-space: nowrap; }
.wl-weitere { margin: 6px 0 0; color: var(--wl-matt); font-size: 13px; }
.wl-abholliste { margin: 0; padding: 0 0 0 18px; font-size: 14px; }
.wl-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 12px 0 0; padding: 8px 14px; border: 1px solid var(--wl-rand); border-radius: 999px;
  color: var(--wl-matt); font-size: 12.5px; width: fit-content; max-width: 100%; }
.wl-legende span { display: inline-flex; align-items: center; gap: 6px; }
.wl-leise { color: var(--wl-matt); }

/* ── scene parts (fill from --c, shaded per face) ─────────────────────────────────────────────────────── */
.wl-svg .wl-o { fill: var(--c); }
.wl-svg .wl-l { fill: color-mix(in srgb, var(--c) 80%, #000); }
.wl-svg .wl-r { fill: color-mix(in srgb, var(--c) 64%, #000); }
.wl-svg text { font-family: system-ui, "Segoe UI", sans-serif; }
.wl-grund { fill: var(--wl-s-grund); }
.wl-sockel { --c: var(--wl-s-sockel); fill: var(--wl-s-sockel); }
.wl-strasse { fill: var(--wl-s-strasse); }
.wl-mittellinie { stroke: var(--wl-s-linie); stroke-width: 1.4; stroke-dasharray: 14 12; opacity: .55; }
.wl-laternenlicht { opacity: .55; }
.wl-hofflaeche { fill: var(--wl-s-hof); stroke: color-mix(in srgb, var(--wl-s-gold) 40%, transparent); stroke-width: 1; }
.wl-hoflinie { stroke: var(--wl-s-hoflinie); stroke-width: 1.3; opacity: .7; }
.wl-hof0 { stop-color: var(--wl-signal); stop-opacity: .16; } .wl-hof1 { stop-color: var(--wl-signal); stop-opacity: 0; }
.wl-boden { fill: var(--wl-s-boden); }
.wl-fuge { stroke: var(--wl-s-fuge); stroke-width: 1; }
.wl-wand { --c: var(--wl-s-wand); }
.wl-schnitt { fill: var(--wl-s-gold); opacity: .8; }
.wl-fenster { fill: var(--wl-s-fenster); opacity: .55; }
.wl-fenster-seite { opacity: .4; }
.wl-bahn { fill: var(--wl-s-bahn); }
.wl-bahnkante { stroke: var(--wl-s-gold); stroke-width: 1.1; stroke-dasharray: 7 6; opacity: .75; }
.wl-band-frei .wl-bahnkante { stroke: var(--wl-kalt); opacity: .45; }
.wl-foerder { fill: var(--wl-s-foerder); }
.wl-pfeile { stroke: var(--wl-s-gold); stroke-width: 2; stroke-dasharray: 3 9; opacity: .5; }
.wl-pfeile.wl-laeuft { animation: wl-band 1.6s linear infinite; opacity: .9; }
.wl-station { stroke: var(--wl-naht); stroke-width: 1.4; }
.wl-station-an { stroke: var(--wl-s-gold); stroke-width: 2.4; filter: drop-shadow(0 0 3px var(--wl-ton)); }
.wl-kegel0 { stop-color: var(--wl-s-kegel); stop-opacity: 1; } .wl-kegel1 { stop-color: var(--wl-s-kegel); stop-opacity: 0; }
.wl-bandlicht { mix-blend-mode: screen; }
.wl-nummer-ring { fill: var(--wl-grund); stroke: var(--wl-s-gold); stroke-width: 2; }
.wl-nummer-text { fill: var(--wl-gold); font-weight: 700; }
.wl-band-frei .wl-nummer-ring { stroke: var(--wl-kalt); } .wl-band-frei .wl-nummer-text { fill: var(--wl-matt); }
.wl-lampe { fill: var(--wl-kalt); }
.wl-band-laeuft .wl-lampe, .wl-band-fertig .wl-lampe { fill: var(--wl-frei); filter: drop-shadow(0 0 4px var(--wl-frei)); animation: wl-puls 2.4s ease-in-out infinite; }
.wl-frei-text { fill: var(--wl-matt); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.wl-vorn-platte { fill: var(--wl-grund); stroke: var(--wl-frei); stroke-width: 1.4; }
.wl-band-frei .wl-vorn-platte { stroke: var(--wl-kalt); }
.wl-vorn-text { fill: var(--wl-text); font-weight: 700; }
.wl-stuetze { --c: var(--wl-s-stahl); }
.wl-traufe { --c: var(--wl-s-stahl); }
.wl-goldkante { stroke: var(--wl-s-gold); stroke-width: 1.4; opacity: .9; }
.wl-binder { fill: none; stroke: var(--wl-s-stahl); stroke-width: 2.2; }
.wl-pfette { stroke: color-mix(in srgb, var(--wl-s-stahl) 70%, transparent); stroke-width: 1.2; }
.wl-glas0 { stop-color: var(--wl-s-glas); } .wl-glas1 { stop-color: var(--wl-s-glas2); }
.wl-glasdach { stroke: color-mix(in srgb, var(--wl-s-gold) 30%, transparent); stroke-width: .8; }
.wl-kran { --c: var(--wl-s-gold); }
.wl-kranseil { stroke: var(--wl-s-stahl); stroke-width: 1.2; }
.wl-plakette rect { fill: var(--wl-grund); stroke: var(--wl-s-gold); stroke-width: 1.4; } .wl-plakette text { fill: var(--wl-gold); font-weight: 700; }
/* vehicles */
.wl-rahmen { --c: var(--wl-s-rahmen); }
.wl-bock { --c: var(--wl-s-gold); }
.wl-roh { --c: var(--wl-s-roh); }
.wl-lack0 { --c: var(--wl-l0); } .wl-lack1 { --c: var(--wl-l1); } .wl-lack2 { --c: var(--wl-l2); } .wl-lack3 { --c: var(--wl-l3); } .wl-lack4 { --c: var(--wl-l4); } .wl-lack5 { --c: var(--wl-l5); }
.wl-chrom { --c: #d9d2c3; }
.wl-scheibe { --c: var(--wl-s-scheibe); }
.wl-mulde { --c: #15181d; }
.wl-kaelte { --c: #d9d6cf; }
.wl-reifen { fill: var(--wl-s-reifen); } .wl-felge { fill: var(--wl-s-felge); } .wl-nabe { fill: #3a3e45; }
.wl-rippe { stroke: rgba(0, 0, 0, .28); stroke-width: 1; } .wl-kante { stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.wl-ring { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: 1.2; } .wl-glanz { fill: rgba(255, 255, 255, .18); }
.wl-scheinwerfer { --c: #fff3cf; filter: drop-shadow(0 0 4px #ffd88a); }
.wl-ruecklicht { --c: var(--wl-rot); filter: drop-shadow(0 0 3px var(--wl-rot)); }
.wl-markierung { --c: #ffb347; }
.wl-pruefrolle { --c: var(--wl-s-gold); }
/* people + robot */
.wl-schatten { fill: var(--wl-s-schatten); }
.wl-hose { fill: #1d2733; } .wl-overall { fill: var(--wl-s-overall); } .wl-reflex { fill: #d9c27a; opacity: .9; }
.wl-haut { fill: var(--wl-s-haut); } .wl-helm { fill: var(--wl-s-helm); }
.wl-arm { transform-box: fill-box; transform-origin: 10% 10%; animation: wl-arm 1.8s ease-in-out infinite; }
.wl-mech-b .wl-arm { animation-delay: -.6s; } .wl-mech-c .wl-arm { animation-delay: -1.1s; animation-duration: 2.3s; }
.wl-robo { --c: #3d4552; }
.wl-robo-arm { fill: none; stroke: var(--wl-s-gold); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.wl-robo-gelenk { fill: var(--wl-s-stahl); }
.wl-funke { fill: #ffd88a; opacity: .85; filter: drop-shadow(0 0 6px #ffb347); animation: wl-schweiss .35s steps(2) infinite; }
.wl-funken line { stroke: #ffd88a; stroke-width: 1.2; stroke-linecap: round; animation: wl-schweiss .5s steps(3) infinite; }
.wl-roboarm.wl-an { transform-box: fill-box; transform-origin: 0% 100%; animation: wl-robo 3.2s ease-in-out infinite; }
/* signs */
.wl-stelenmast { stroke: var(--wl-s-stahl); stroke-width: 2.4; }
.wl-stele-platte { fill: var(--wl-grund); stroke: var(--wl-blau); stroke-width: 1.6; }
.wl-stele-abholung .wl-stele-platte { stroke: var(--wl-signal); }
.wl-stele-titel { fill: var(--wl-matt); font-weight: 600; }
.wl-stele-zahl { fill: var(--wl-text); font-weight: 700; font-family: "Fraunces WL", Georgia, serif !important; }
/* cards in the wide picture */
.wl-karte-flaeche { fill: var(--wl-karte); stroke: var(--wl-rand); stroke-width: 1; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28)); }
.wl-karte-akzent { fill: var(--wl-kalt); } .wl-karte-an .wl-karte-akzent { fill: var(--wl-frei); }
/* font-size comes from the svg attribute (grows with the shown width so it never drops below 12.5 px — WERKLIVE-SCHRIFT) */
.wl-karte-titel { fill: var(--wl-text); font-weight: 650; }
.wl-karte-zeile { fill: var(--wl-matt); }
.wl-karte-zeit { fill: var(--wl-gold); font-weight: 600; }
.wl-karte-spur { fill: var(--wl-naht); } .wl-karte-teil { fill: var(--wl-karte); }
.wl-balken0 { stop-color: var(--wl-ton); } .wl-balken1 { stop-color: var(--wl-frei); }
.wl-leitung { fill: none; stroke: var(--wl-kalt); stroke-width: 1.2; opacity: .55; }
.wl-leitung-an { stroke: var(--wl-frei); opacity: .7; }
.wl-leitpunkt { fill: var(--wl-kalt); } .wl-leitpunkt.wl-an { fill: var(--wl-frei); }

/* ── phone (the component's own width < 640 → .wl-schmal) ─────────────────────────────────────────────── */
/* phone (WERKLIVE-SCHRIFT 07.10.: every text >= 12 px, and shorter): head in two lines — title, then kind + products in
   one ellipsed line; the „n Bänder, n in Arbeit, n frei" line is left out because the five plates right below say the same */
.wl-schmal .wl-karte-haupt { padding: 12px 10px 8px; border-radius: 16px; }
.wl-schmal .wl-kopf { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.wl-schmal .wl-titel { font-size: 20px; flex: 0 0 100%; margin-bottom: 2px; }
.wl-schmal .wl-art { font-size: 12px; flex: 0 0 auto; }
.wl-schmal .wl-produkte { font-size: 13px; margin: 0; flex: 1 1 0; min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-schmal .wl-zeile { display: none; }
.wl-schmal .wl-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 8px 0 2px; }
.wl-schmal .wl-kachel { padding: 6px 3px 5px 5px; border-radius: 11px; }
.wl-schmal .wl-kachel-zahl { gap: 4px; } .wl-schmal .wl-kachel-zahl b { font-size: 20px; }
.wl-schmal .wl-kachel-wort { font-size: 12px; line-height: 1.12; hyphens: manual; overflow-wrap: normal; }
/* WERKLIVE-ZAEHLER: below ~350 px card width five plates leave a word less room than „schlange“ needs -> 3 + 2 plates
   (by design, measured on the card itself, so a narrow Leitstand column gets it too) */
.wl-schmal .wl-karte-haupt { container-type: inline-size; }
@container (max-width: 329px) {
  .wl-schmal .wl-kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wl-schmal .wl-kachel { grid-column: span 2; }
  .wl-schmal .wl-kachel:nth-child(n+4) { grid-column: span 3; }
}
.wl-schmal .wl-punkt { width: 7px; height: 7px; }
.wl-schmal .wl-buehne { margin: 2px -5px 0; }
.wl-wisch { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 4px; scrollbar-width: none; }
.wl-wisch::-webkit-scrollbar { display: none; }
.wl-mini { flex: 0 0 72%; scroll-snap-align: start; background: var(--wl-mulde); border: 1px solid var(--wl-rand); border-left: 4px solid var(--wl-frei); border-radius: 12px;
  padding: 7px 10px; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.wl-mini-frei { border-left-color: var(--wl-kalt); flex-basis: 44%; color: var(--wl-matt); }
.wl-mini-titel { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-mini-zeile { font-size: 12.5px; color: var(--wl-matt); }
.wl-mini-zeit { font-size: 12.5px; color: var(--wl-gold); font-weight: 600; }
.wl-balken { display: block; height: 4px; border-radius: 2px; background: var(--wl-naht); margin-top: 5px; overflow: hidden; }
.wl-balken-voll { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--wl-ton), var(--wl-frei)); }
.wl-schmal .wl-unten { grid-template-columns: 1fr; gap: 6px; margin-top: 0; }
.wl-schmal .wl-info { padding: 7px 10px 7px 12px; }
.wl-schmal .wl-info-titel { font-size: 15px; margin-bottom: 2px; }
/* queue card: „+n weitere" moves up next to the title (saves a line) */
.wl-schmal .wl-info-schlange { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; }
.wl-schmal .wl-info-schlange > * { grid-column: 1 / -1; }
.wl-schmal .wl-info-schlange > .wl-info-titel { grid-column: 1; grid-row: 1; }
.wl-schmal .wl-info-schlange > .wl-weitere { grid-column: 2; grid-row: 1; margin: 0; }
.wl-schmal .wl-weitere { font-size: 13px; }
.wl-schmal .wl-schlange { grid-template-columns: 1fr; gap: 0; }
.wl-schmal .wl-schlange li { font-size: 13px; padding: 1px 0; }
.wl-schmal .wl-wann { font-size: 12.5px; }
.wl-schmal .wl-abholliste { font-size: 13px; }
.wl-schmal .wl-legende { border-radius: 12px; font-size: 12px; padding: 5px 10px; gap: 2px 10px; margin-top: 5px; line-height: 1.35; }
.wl-schmal .wl-leiste { padding-bottom: 6px; margin-bottom: 2px; }
.wl-schmal .wl-tab { padding: 8px 13px; font-size: 13px; }

/* ── motion ───────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes wl-band { to { stroke-dashoffset: -24; } }
@keyframes wl-puls { 50% { opacity: .55; } }
@keyframes wl-arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-28deg); } }
@keyframes wl-schweiss { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: .9; } }
@keyframes wl-robo { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
.wl-still *, .wl-still *::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wl *, .wl *::before, .wl *::after { animation: none !important; transition: none !important; } }