:root{--kbg:14,20,33;--ink:#EEF3FA;--mut:#A9B6C8;--fnt:#7C8AA0;--t2:#C5D0DF;--t3:#D5DDE8;--t4:#E3E9F2;--dim:#5A6678;--acc:#8FD3FF;--acc2:#CFEBFF;--acc3:#A8DDFF;--blu:#7CC4FF;--blu2:#5EB8FF;--grn:#5FE3A1;--red:#FF6B6B;--amb:#FFB547;--pur:#B9A6FF;--pur2:#C9B6FF;--pur3:#D8CCFF;--mint:#7FE7C4;--red2:#FF9C9C;--red3:#FFB0B0;--amb2:#FFD08A;--grn2:#BFF5DA;--grn3:#D9FBEA;--grn4:#CFFCE6;--grn5:#E3F4EC;--amb3:#F4E3C8;--bl4:#BFD3E6;--tms:#C9CCF7;--tms2:#8D93A8;--tms3:#8B91F0;--tms4:#8D93C9;--spt:#A6E6E3;--pbi1:#A9A38C;--pbi2:#E9DDA0;--onink:#0a0f18;--onacc:#04101c;--ongrn:#04140c;--onred:#1a0505;--onamb:#1c1203;--ontms:#0b0d1f;--bg:#05080e;--water:#070b12;--c0:#0f1522;--c1:#0e1420;--c2:#101624;--c3:#0b111c;--ph1:#0a0e16;--ph2:#0a0e17;--tm:#141722;--tm2:#11151f;--sp:#10161f;--pb:#15130c;--sc1:#1d2533;--sc2:#070a10;--core:#EAF6FF;--dotst:#F5F9FF;--fg:255,255,255;--accr:143,211,255;--grnr:95,227,161;--redr:255,107,107;--ambr:255,181,71;--blur:94,184,255;--pur2r:201,182,255;--purr:185,166,255;--mintr:127,231,196;--grnhr:160,255,210;--redhr:255,140,140;--mutr:169,182,200;--cityr:205,214,228;--sear:143,170,210;--g1:24,33,52;--g1b:20,28,44;--g1c:15,21,34;--g1d:22,24,38;--g2:11,16,27;--g2b:10,14,22;--g2c:10,14,23;--g2d:10,15,25;--redc:60,18,24;--tst:12,26,22;--bgr:5,8,14;--bgr2:3,5,10;--bgr3:8,12,20;--sh:0,0,0;--gk:1;--shk:1;--halo:#000;--lblsh:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6);--land:#131a27;--coast:#2a3448;--bord:#3a465c;color-scheme:dark}
html[data-theme="light"]{--kbg:243,246,250;--ink:#101828;--mut:#4B5768;--fnt:#535D6C;--t2:#2F3B4D;--t3:#283445;--t4:#1F2B3C;--dim:#5A677A;--acc:#145998;--acc2:#0F4E86;--acc3:#1C69B4;--blu:#205B98;--blu2:#1C69B4;--grn:#0B6842;--red:#A8262D;--amb:#7E4900;--pur:#6A51CF;--pur2:#613DCE;--pur3:#613DCE;--mint:#086C52;--red2:#A52930;--red3:#B3262E;--amb2:#7A4A00;--grn2:#0D6B47;--grn3:#0F5E40;--grn4:#10764F;--grn5:#1F4F3C;--amb3:#6B4710;--bl4:#3A5470;--tms:#4B4FB0;--tms2:#5F6680;--tms3:#5157D3;--tms4:#5E64A3;--spt:#0B6B67;--pbi1:#6B6450;--pbi2:#6A5810;--onink:#FFFFFF;--onacc:#FFFFFF;--ongrn:#FFFFFF;--onred:#FFFFFF;--onamb:#FFFFFF;--ontms:#FFFFFF;--bg:#E8EDF2;--water:#D3DCE6;--c0:#FFFFFF;--c1:#FFFFFF;--c2:#F2F5F9;--c3:#FFFFFF;--ph1:#DFE5EC;--ph2:#F7F9FB;--tm:#FFFFFF;--tm2:#FFFFFF;--sp:#FFFFFF;--pb:#FFFCEE;--sc1:#E3E9F0;--sc2:#B8C2CF;--core:#FFFFFF;--dotst:#FFFFFF;--fg:16,28,48;--accr:23,105,179;--grnr:14,138,87;--redr:210,58,66;--ambr:183,107,0;--blur:30,111,191;--pur2r:122,91,214;--purr:106,81,207;--mintr:11,135,102;--grnhr:14,138,87;--redhr:210,58,66;--mutr:75,87,104;--cityr:32,42,58;--sear:52,90,140;--g1:255,255,255;--g1b:255,255,255;--g1c:255,255,255;--g1d:255,255,255;--g2:246,248,251;--g2b:246,248,251;--g2c:246,248,251;--g2d:246,248,251;--redc:255,236,237;--tst:236,250,243;--bgr:232,237,242;--bgr2:232,237,242;--bgr3:232,237,242;--sh:30,42,64;--gk:1.5;--shk:.28;--halo:rgba(255,255,255,.95);--lblsh:0 0 3px rgba(255,255,255,.95),0 0 8px rgba(255,255,255,.75);--land:#F5F7FA;--coast:#C3CDD9;--bord:#AEB9C7;color-scheme:light}
/* Hell/Dunkel: eine Überblendung der ganzen Seite, 0,45 s ease-in-out, ohne Schnappschuss. Die Farbtokens sind registriert (@property) und
   blenden zentral auf body; alles darunter erbt sie in jedem Bild, darum laufen keine verschachtelten Texte nach, und Glas (backdrop-filter) bleibt
   lebendig weichgezeichnet. Keine View Transition: Safari und Firefox zeichnen backdrop-filter in deren Schnappschüssen nicht (WebKit Bug 302256).
   html behält sofort die Zielwerte, die Karten lesen dort (cc-login-karte.js, cc-map.js) und blenden ihre Bilder selbst. --lblsh bleibt unregistriert. */
@property --ink{syntax:'<color>';inherits:true;initial-value:#EEF3FA}@property --mut{syntax:'<color>';inherits:true;initial-value:#A9B6C8}@property --fnt{syntax:'<color>';inherits:true;initial-value:#7C8AA0}@property --t2{syntax:'<color>';inherits:true;initial-value:#C5D0DF}@property --t3{syntax:'<color>';inherits:true;initial-value:#D5DDE8}@property --t4{syntax:'<color>';inherits:true;initial-value:#E3E9F2}@property --dim{syntax:'<color>';inherits:true;initial-value:#5A6678}@property --acc{syntax:'<color>';inherits:true;initial-value:#8FD3FF}@property --acc2{syntax:'<color>';inherits:true;initial-value:#CFEBFF}@property --acc3{syntax:'<color>';inherits:true;initial-value:#A8DDFF}@property --blu{syntax:'<color>';inherits:true;initial-value:#7CC4FF}@property --blu2{syntax:'<color>';inherits:true;initial-value:#5EB8FF}@property --grn{syntax:'<color>';inherits:true;initial-value:#5FE3A1}@property --red{syntax:'<color>';inherits:true;initial-value:#FF6B6B}@property --amb{syntax:'<color>';inherits:true;initial-value:#FFB547}@property --pur{syntax:'<color>';inherits:true;initial-value:#B9A6FF}@property --pur2{syntax:'<color>';inherits:true;initial-value:#C9B6FF}@property --pur3{syntax:'<color>';inherits:true;initial-value:#D8CCFF}@property --mint{syntax:'<color>';inherits:true;initial-value:#7FE7C4}@property --red2{syntax:'<color>';inherits:true;initial-value:#FF9C9C}@property --red3{syntax:'<color>';inherits:true;initial-value:#FFB0B0}@property --amb2{syntax:'<color>';inherits:true;initial-value:#FFD08A}@property --grn2{syntax:'<color>';inherits:true;initial-value:#BFF5DA}@property --grn3{syntax:'<color>';inherits:true;initial-value:#D9FBEA}@property --grn4{syntax:'<color>';inherits:true;initial-value:#CFFCE6}@property --grn5{syntax:'<color>';inherits:true;initial-value:#E3F4EC}@property --amb3{syntax:'<color>';inherits:true;initial-value:#F4E3C8}@property --bl4{syntax:'<color>';inherits:true;initial-value:#BFD3E6}@property --tms{syntax:'<color>';inherits:true;initial-value:#C9CCF7}@property --tms2{syntax:'<color>';inherits:true;initial-value:#8D93A8}@property --tms3{syntax:'<color>';inherits:true;initial-value:#8B91F0}@property --tms4{syntax:'<color>';inherits:true;initial-value:#8D93C9}@property --spt{syntax:'<color>';inherits:true;initial-value:#A6E6E3}@property --pbi1{syntax:'<color>';inherits:true;initial-value:#A9A38C}@property --pbi2{syntax:'<color>';inherits:true;initial-value:#E9DDA0}@property --onink{syntax:'<color>';inherits:true;initial-value:#0a0f18}@property --onacc{syntax:'<color>';inherits:true;initial-value:#04101c}@property --ongrn{syntax:'<color>';inherits:true;initial-value:#04140c}@property --onred{syntax:'<color>';inherits:true;initial-value:#1a0505}@property --onamb{syntax:'<color>';inherits:true;initial-value:#1c1203}@property --ontms{syntax:'<color>';inherits:true;initial-value:#0b0d1f}@property --bg{syntax:'<color>';inherits:true;initial-value:#05080e}@property --water{syntax:'<color>';inherits:true;initial-value:#070b12}@property --c0{syntax:'<color>';inherits:true;initial-value:#0f1522}@property --c1{syntax:'<color>';inherits:true;initial-value:#0e1420}@property --c2{syntax:'<color>';inherits:true;initial-value:#101624}@property --c3{syntax:'<color>';inherits:true;initial-value:#0b111c}@property --ph1{syntax:'<color>';inherits:true;initial-value:#0a0e16}@property --ph2{syntax:'<color>';inherits:true;initial-value:#0a0e17}@property --tm{syntax:'<color>';inherits:true;initial-value:#141722}@property --tm2{syntax:'<color>';inherits:true;initial-value:#11151f}@property --sp{syntax:'<color>';inherits:true;initial-value:#10161f}@property --pb{syntax:'<color>';inherits:true;initial-value:#15130c}@property --sc1{syntax:'<color>';inherits:true;initial-value:#1d2533}@property --sc2{syntax:'<color>';inherits:true;initial-value:#070a10}@property --core{syntax:'<color>';inherits:true;initial-value:#EAF6FF}@property --dotst{syntax:'<color>';inherits:true;initial-value:#F5F9FF}@property --halo{syntax:'<color>';inherits:true;initial-value:#000}@property --land{syntax:'<color>';inherits:true;initial-value:#131a27}@property --coast{syntax:'<color>';inherits:true;initial-value:#2a3448}@property --bord{syntax:'<color>';inherits:true;initial-value:#3a465c}
@property --kbg{syntax:'<number>#';inherits:true;initial-value:14,20,33}@property --fg{syntax:'<number>#';inherits:true;initial-value:255,255,255}@property --accr{syntax:'<number>#';inherits:true;initial-value:143,211,255}@property --grnr{syntax:'<number>#';inherits:true;initial-value:95,227,161}@property --redr{syntax:'<number>#';inherits:true;initial-value:255,107,107}@property --ambr{syntax:'<number>#';inherits:true;initial-value:255,181,71}@property --blur{syntax:'<number>#';inherits:true;initial-value:94,184,255}@property --pur2r{syntax:'<number>#';inherits:true;initial-value:201,182,255}@property --purr{syntax:'<number>#';inherits:true;initial-value:185,166,255}@property --mintr{syntax:'<number>#';inherits:true;initial-value:127,231,196}@property --grnhr{syntax:'<number>#';inherits:true;initial-value:160,255,210}@property --redhr{syntax:'<number>#';inherits:true;initial-value:255,140,140}@property --mutr{syntax:'<number>#';inherits:true;initial-value:169,182,200}@property --cityr{syntax:'<number>#';inherits:true;initial-value:205,214,228}@property --sear{syntax:'<number>#';inherits:true;initial-value:143,170,210}@property --g1{syntax:'<number>#';inherits:true;initial-value:24,33,52}@property --g1b{syntax:'<number>#';inherits:true;initial-value:20,28,44}@property --g1c{syntax:'<number>#';inherits:true;initial-value:15,21,34}@property --g1d{syntax:'<number>#';inherits:true;initial-value:22,24,38}@property --g2{syntax:'<number>#';inherits:true;initial-value:11,16,27}@property --g2b{syntax:'<number>#';inherits:true;initial-value:10,14,22}@property --g2c{syntax:'<number>#';inherits:true;initial-value:10,14,23}@property --g2d{syntax:'<number>#';inherits:true;initial-value:10,15,25}@property --redc{syntax:'<number>#';inherits:true;initial-value:60,18,24}@property --tst{syntax:'<number>#';inherits:true;initial-value:12,26,22}@property --bgr{syntax:'<number>#';inherits:true;initial-value:5,8,14}@property --bgr2{syntax:'<number>#';inherits:true;initial-value:3,5,10}@property --bgr3{syntax:'<number>#';inherits:true;initial-value:8,12,20}@property --sh{syntax:'<number>#';inherits:true;initial-value:0,0,0}
@property --gk{syntax:'<number>';inherits:true;initial-value:1}@property --shk{syntax:'<number>';inherits:true;initial-value:1}
html.cc-theming body{transition-property:--ink,--mut,--fnt,--t2,--t3,--t4,--dim,--acc,--acc2,--acc3,--blu,--blu2,--grn,--red,--amb,--pur,--pur2,--pur3,--mint,--red2,--red3,--amb2,--grn2,--grn3,--grn4,--grn5,--amb3,--bl4,--tms,--tms2,--tms3,--tms4,--spt,--pbi1,--pbi2,--onink,--onacc,--ongrn,--onred,--onamb,--ontms,--bg,--water,--c0,--c1,--c2,--c3,--ph1,--ph2,--tm,--tm2,--sp,--pb,--sc1,--sc2,--core,--dotst,--halo,--land,--coast,--bord,--kbg,--fg,--accr,--grnr,--redr,--ambr,--blur,--pur2r,--purr,--mintr,--grnhr,--redhr,--mutr,--cityr,--sear,--g1,--g1b,--g1c,--g1d,--g2,--g2b,--g2c,--g2d,--redc,--tst,--bgr,--bgr2,--bgr3,--sh,--gk,--shk;transition-duration:.45s;transition-timing-function:ease-in-out}
/* Eigene Farb-Übergänge der Elemente liefen dem Token nach; während des Wechsels gelten nur Bewegung und Deckkraft (Schalterknopf, Kartenebenen) */
html.cc-theming body *,html.cc-theming body *::before,html.cc-theming body *::after{transition-property:transform,opacity!important}

html .cc-noscroll::-webkit-scrollbar{display:none}
/* Rand des Displays (Entwurf 44): Abstände zu Notch, Rundung und Home-Leiste aus env(safe-area-inset-*). Ohne viewport-fit=cover hält der Browser die
   Seite selbst aus diesen Bereichen, die Werte sind dann 0. --nb: Abstand der unteren Leiste am Handy zum unteren Rand, wie bei iOS: 8 px über dem Rand, mit
   Home-Leiste etwas in deren Bereich hinein (34 px Inset ergeben 22 px). */
:root{--sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);--nb:max(8px,calc(env(safe-area-inset-bottom,0px) - 12px))}
.cc-sa{padding:max(16px,var(--sa-t)) max(16px,var(--sa-r)) max(16px,var(--sa-b)) max(16px,var(--sa-l))}
.cc-sa-beleg{padding:max(24px,var(--sa-t)) max(16px,var(--sa-r)) max(24px,var(--sa-b)) max(16px,var(--sa-l))}
/* Wischleisten (Navigation, Kennzahlen am Handy): läuft eine Leiste seitlich über, blendet der Rand weich aus, auf der Seite, wo noch etwas folgt (data-rand setzt
   wischRand in Main). Zeigt, dass man wischen kann, statt eine Karte hart abzuschneiden. */
[data-wisch][data-rand="r"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
[data-wisch][data-rand="l"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
[data-wisch][data-rand="lr"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(var(--fg),.16) transparent;-webkit-tap-highlight-color:transparent;}
a{color:var(--acc);text-decoration:none}a:hover{color:var(--acc2)}
button{font-family:inherit;color:inherit}
input[type=range]{accent-color:var(--acc)}
/* Vom Browser ausgefüllte Felder (Entwurf 38, Eddie 18.10.: „die markierten zeilen, in die die daten automatisch eingetragen wurden sehen ziemlich unpassend aus“):
   Safari und Chrome malen ihren eigenen Hintergrund (gelb bzw. blau) mit !important. Die Farbe kommt erst nach einer sehr langen Übergangszeit an,
   so bleibt das Feld durchsichtig auf seiner Glashülle; Schrift und Schreibmarke in der Farbe der App, auch in der Vorschau beim Überfahren.
   !important, weil die Felder all:unset tragen (cc-login.css .an-in input, Inline-Stil in Main) und das jede Angabe ohne !important schlägt.
   Zwei Regeln, weil ein Browser, der eine der beiden Schreibweisen nicht kennt, sonst die ganze Liste verwirft. */
input:-webkit-autofill{-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink)!important;transition:background-color 600000s ease-in-out 0s,color 600000s ease-in-out 0s!important}
input:autofill{-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink)!important;transition:background-color 600000s ease-in-out 0s,color 600000s ease-in-out 0s!important}
/* Karte auf WebGL (Entwurf 39, cc-gl.js): Fläche und Schrift; MapLibre-Marken blenden ease-in-out */
.maplibregl-map{background:var(--water);font:12px/1.5 Geist,sans-serif}.maplibregl-marker{transition:opacity .2s ease-in-out}
/* Quellenangabe der Karte im eigenen Glas (Entwurf 40, cc-gl.js quellen): unten rechts in der Leiste unter den Glasflächen. Am Handy (.schmal: Karte unter 760 px)
   eingeklappt zum Knopf „i“, seit Entwurf 44 oben rechts auf der Karte unter Kopfzeile und Kennzahlen (Eddie 20.10.: die untere Leiste rückt tiefer, unter ihr ist
   kein Platz mehr); Tippfläche 36 px um den 22-px-Kreis. Aufgeklappt steht der ganze Text als Glasblase links daneben, mehrzeilig nach unten, unter dem Fenster
   des Moduls (z-index 17 unter 18), damit ein hochgezogenes Fenster sie nie verdeckt anzeigt (0,3 s ease-in-out). */
.cc-quellen{position:absolute;right:0;bottom:0;z-index:33;display:flex;align-items:flex-end;max-width:calc(100% - 16px);font:10.5px/1.4 Geist,sans-serif;color:var(--fnt)}
.cc-quellen-t,.cc-quellen-k{box-sizing:border-box;border:1px solid rgba(var(--fg),.08);background:linear-gradient(160deg,rgba(var(--g1),calc(.56*var(--gk))),rgba(var(--g2),calc(.48*var(--gk))));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cc-quellen-t{min-width:0;padding:1px 8px;border-width:1px 0 0 1px;border-radius:9px 0 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-quellen-k{display:none}
.cc-quellen.schmal{left:calc(16px + var(--sa-l));right:calc(12px + var(--sa-r));top:calc(128px + var(--sa-t));bottom:auto;z-index:17;max-width:none;justify-content:flex-end;align-items:flex-start;pointer-events:none}.cc-quellen.schmal>*{pointer-events:auto}
.cc-quellen.schmal .cc-quellen-k{all:unset;pointer-events:auto;box-sizing:border-box;display:grid;place-items:center;position:relative;width:22px;height:22px;border:1px solid rgba(var(--fg),.12);border-radius:50%;cursor:pointer;
  background:linear-gradient(160deg,rgba(var(--g1),calc(.56*var(--gk))),rgba(var(--g2),calc(.48*var(--gk))));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font:italic 600 12px/1 Geist,sans-serif;color:var(--mut);transition:color .2s ease-in-out}
.cc-quellen.schmal .cc-quellen-k::before{content:'';position:absolute;inset:-7px;border-radius:50%}
.cc-quellen.schmal .cc-quellen-k:hover,.cc-quellen.schmal .cc-quellen-k:focus-visible,.cc-quellen.schmal.auf .cc-quellen-k{color:var(--ink)}
.cc-quellen.schmal .cc-quellen-t{position:absolute;right:28px;top:0;width:max-content;max-width:calc(100% - 24px);padding:5px 10px;border-width:1px;border-radius:11px;white-space:normal;
  box-shadow:0 10px 24px -10px rgba(var(--sh),.55);opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility 0s ease-in-out .3s}
.cc-quellen.schmal.auf .cc-quellen-t{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility 0s ease-in-out}

@media (prefers-reduced-motion:reduce){.cc-quellen-t,.cc-quellen.schmal.auf .cc-quellen-t{transition:none}}
/* Namen auf der Karte (Entwurf 39, cc-beschriftung.js): je Name ein Element mit id, blendet 0,35 s ease-in-out; ausgeblendet ohne Treffer, damit nichts darunter verdeckt wird */
.cc-lbl{display:flex;align-items:center;gap:5px;white-space:nowrap;width:max-content;text-shadow:var(--lblsh);opacity:0;pointer-events:none;transition:opacity .35s ease-in-out}.cc-lbl.an{opacity:1;pointer-events:auto}
.cc-lbl-land{font:600 11px/1 Geist,sans-serif;letter-spacing:.32em;color:rgba(var(--mutr),.6)}.cc-lbl-meer{font:italic 400 13px/1 'Instrument Serif',Georgia,serif;letter-spacing:.06em;color:rgba(var(--sear),.6)}
.cc-lbl-stadt{font:500 11.5px/1 Geist,sans-serif;color:rgba(var(--cityr),.82)}.cc-lbl-ort{font:500 10.5px/1 Geist,sans-serif;color:rgba(var(--cityr),.7)}
.cc-lbl-p{width:4px;height:4px;border-radius:50%;background:rgba(var(--cityr),.7);flex-shrink:0}.cc-lbl-ort .cc-lbl-p{width:3px;height:3px}
/* Baustellen (grün), Werke (hell) und Lieferanten (gedämpft) als Raute mit Name; der Name sitzt rechts, links, oben oder unten (data-k), kurz ohne Unterzeile.
   Kein position hier: MapLibre setzt die Marke absolut (.maplibregl-marker), sonst stünden die Marken im Fluss untereinander. */
.cc-ort{width:16px;height:16px;padding:0;border:0;background:none;cursor:pointer;--k:var(--grn);transition:opacity .3s ease-in-out}.cc-ort-werk{--k:var(--ink)}.cc-ort-lief{--k:var(--mut)}.cc-ort.aus{opacity:0;pointer-events:none}
.cc-ort-r{position:absolute;left:3px;top:3px;width:10px;height:10px;transform:rotate(45deg);background:var(--k);box-shadow:0 0 0 3px rgba(var(--bgr),.85),0 0 14px var(--k)}
.cc-ort:focus-visible{outline:none}.cc-ort:focus-visible .cc-ort-r{box-shadow:0 0 0 3px rgba(var(--bgr),.85),0 0 0 5px var(--acc)}
.cc-sl{position:absolute;white-space:nowrap;font:600 11.5px/1.45 Geist,system-ui,sans-serif;letter-spacing:.02em;color:var(--ink);text-align:left;text-shadow:0 1px 8px var(--halo),0 0 2px var(--halo);opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.cc-sl.an{opacity:1;pointer-events:auto}
.cc-sl[data-k="r"]{left:18px;top:50%;transform:translateY(-50%)}.cc-sl[data-k="l"]{right:18px;top:50%;transform:translateY(-50%);text-align:right}.cc-sl[data-k="t"]{left:50%;bottom:16px;transform:translateX(-50%);text-align:center}.cc-sl[data-k="b"]{left:50%;top:16px;transform:translateX(-50%);text-align:center}
.cc-ss{display:block;font-weight:500;color:var(--mut);font-size:10.5px}.cc-sl.kurz .cc-ss{display:none}
/* Fahrzeuge (Entwurf 39, cc-map.js fahrzeuge): Knopf 22 px (Trefferfläche wie bisher Punkt plus 6 px), Glanz und Punkt in der Farbe des Status; gewählt größer,
   gedimmt leise, ausgeblendet weg, jeder Wechsel 0,3 s ease-in-out. Der Glanz fängt keine Klicks. */
.cc-lkw{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;--c:var(--blu);transition:opacity .3s ease-in-out,visibility 0s}
.cc-lkw::before,.cc-lkw::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-sizing:border-box;transition:width .3s ease-in-out,height .3s ease-in-out,opacity .3s ease-in-out,border-width .3s ease-in-out}
.cc-lkw::before{width:22px;height:22px;background:var(--c);opacity:.3}.cc-lkw::after{width:10.8px;height:10.8px;background:var(--c);border:1.2px solid var(--dotst)}
.cc-lkw.sel::before{width:40px;height:40px}.cc-lkw.sel::after{width:17.5px;height:17.5px;border-width:2.5px}.cc-lkw.dim::before{opacity:.04}.cc-lkw.dim::after{opacity:.2}
.cc-lkw.aus{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease-in-out,visibility 0s .3s}.cc-lkw:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cc-lbl,.cc-sl,.cc-ort,.cc-lkw,.cc-lkw::before,.cc-lkw::after{transition:none}}
/* Kein Zoom beim Tippen, auch nicht beim Einblenden (Entwurf 37, Eddie 17.10.: „Auf dem iPhone wird noch immer leicht heran gezoomt, wenn ich Text
   eingebe“): Safari zoomt beim Fokus, wenn die Schrift am Bildschirm unter 16 px liegt, und rechnet die Skalierung der Vorfahren mit. Ein Dialog, der mit
   pop (scale .92) aufgeht und sein Feld nach 80 ms fokussiert, stand bei 14,9 px. Die Einblend-Animationen skalieren deshalb über eigene, nicht vererbte
   Größen; ein Behälter mit Eingabefeld blendet nur mit Deckkraft und Versatz ein, alles andere unverändert. */
@property --ein-rise{syntax:'<number>';inherits:false;initial-value:.985}
@property --ein-pop0{syntax:'<number>';inherits:false;initial-value:.92}
@property --ein-pop1{syntax:'<number>';inherits:false;initial-value:1.02}
@property --ein-sp{syntax:'<number>';inherits:false;initial-value:.97}
/* Nur Behälter prüfen, nicht jedes Element (Ruckeln 0.3, Eddie 18.10.): ohne Subjekt galt :has für jedes Element, jede Stilberechnung suchte den ganzen
   Teilbaum nach Feldern ab, beim Zoomen in jedem Bild. Behälter mit Feld und Einblend-Animation tragen data-ansicht (Ansichten, Dialoge, Formulare) oder
   eine der Klassen; ein neuer solcher Behälter bekommt data-ansicht (fokus.js findet ihn sonst). Kein [style*=…]: das ließe den Browser bei jeder
   Änderung eines Inline-Stils (Kartenmarken in jedem Bild) den Stil als Text bauen. */
:is([data-ansicht],[role=dialog],.blatt,.pf,.an-err,.an-wait,.fg-status,.sp-info):has(:is(input:not([type=range],[type=file],[type=checkbox],[type=radio],[type=hidden]),textarea,select,[contenteditable]:not([contenteditable=false]))){--ein-rise:1;--ein-pop0:1;--ein-pop1:1;--ein-sp:1}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(var(--ein-rise))}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.8);opacity:0}}
@keyframes slideR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes sheen{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes scan{0%{transform:translateY(0)}50%{transform:translateY(150px)}100%{transform:translateY(0)}}
@keyframes pop{0%{opacity:0;transform:scale(var(--ein-pop0))}60%{opacity:1;transform:scale(var(--ein-pop1))}100%{transform:scale(1)}}
/* Bestätigung mit Passkey (SIM-Karten): Ring atmet, solange das Gerät fragt. Ohne Bewegung (Systemeinstellung) stehen die neuen Teile still. */
@keyframes pkPuls{0%,100%{box-shadow:0 0 0 0 rgba(var(--accr),.35);transform:scale(1)}50%{box-shadow:0 0 0 14px rgba(var(--accr),0);transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){[data-ui="sim"] *,[data-ui="sim-dlg"],[data-ui="sim-dlg"] *,[data-ui="meld"] *{animation:none!important;transition:none!important}}
/* Eingabefelder am iPhone ohne Zoom (Eddie 15.10.): iOS Safari zoomt in jedes Feld unter 16 px. Auf Touch-Geräten haben darum alle Text-Felder
   mindestens 16 px; größere Felder (Code der Anmeldung, cc-login.css) behalten ihre Größe. Der Zoom der Seite bleibt erlaubt (kein maximum-scale). */
@media (hover:none) and (pointer:coarse){input:not([type=range]):not([type=file]):not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px!important}}
/* Gefahrene Strecke (Entwurf 32, cc-map.js strecke): Beschriftung „kein Netz“ an der gestrichelten Linie, Punkt-Info beim Antippen einer Ortung,
   Legende unter den Ebenen. Alles DOM mit eigener id (einzeln kommentierbar), Farben aus den Variablen, Übergänge ease-in-out. */
@keyframes spEin{from{opacity:0}to{opacity:1}}
@keyframes spAuf{from{opacity:0;transform:translate(-50%,6px) scale(var(--ein-sp))}to{opacity:1;transform:translate(-50%,0)}}
.sp-kn{all:unset;box-sizing:border-box;position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 7px));white-space:nowrap;cursor:pointer;padding:2px 8px;border-radius:999px;
 font:600 11px/1.45 Geist,system-ui,sans-serif;letter-spacing:.02em;color:var(--ink);background:rgba(var(--g2d),calc(.62*var(--gk)));border:1px dashed rgba(var(--accr),.7);
 box-shadow:0 4px 14px -6px rgba(var(--sh),.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:spEin .5s ease-in-out backwards;transition:opacity .3s ease-in-out,background .25s ease-in-out}
.sp-kn:hover,.sp-kn:focus-visible{background:rgba(var(--g2d),calc(.9*var(--gk)))}
.sp-kn.verdeckt{opacity:0;pointer-events:none}
.sp-kn.sp-kp{border-style:solid;border-color:rgba(var(--fg),.28)}
.sp-info{position:absolute;left:0;bottom:16px;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:min(270px,72vw);padding:10px 12px 11px;border-radius:14px;
 font:500 12.5px/1.45 Geist,system-ui,sans-serif;color:var(--ink);background:rgba(var(--g2d),calc(.62*var(--gk)));border:1px solid rgba(var(--fg),.16);
 box-shadow:0 16px 34px -12px rgba(var(--sh),.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:default;transition:opacity .25s ease-in-out,transform .25s ease-in-out}
.sp-info.neu{animation:spAuf .32s ease-in-out backwards}
.sp-info.zu{opacity:0;transform:translate(-50%,6px)}
.sp-info-k{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-info-t{font:600 12.5px 'Geist Mono',ui-monospace,monospace}
.sp-info-zu{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;color:var(--mut);transition:background .2s ease-in-out,color .2s ease-in-out}
.sp-info-zu:hover,.sp-info-zu:focus-visible{background:rgba(var(--fg),.1);color:var(--ink)}
.sp-info-o{color:var(--mut);margin:1px 0 6px}
.sp-info-z{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:18px}
.sp-info-z>span:first-child{white-space:nowrap}
.sp-info-z>span:last-child{margin-left:auto;min-width:0;text-align:right;overflow-wrap:anywhere}
.sp-info-z>span:first-child{color:var(--mut)}
.sp-akku{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--grn)}
.sp-akku[data-stufe="bald"]{background:var(--amb2)}
.sp-akku[data-stufe="tauschen"]{background:var(--red2)}
.sp-info-a{margin-top:7px;font-weight:600;color:var(--red2)}
.sp-info-n{margin-top:7px;padding-top:7px;border-top:1px dashed rgba(var(--accr),.45);color:var(--t2);text-wrap:pretty}
.sp-leg{flex-basis:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;padding:2px 4px 0;font-size:11.5px;color:var(--mut);animation:spEin .4s ease-in-out}
.sp-leg-m{flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap;padding:0 4px 0 6px}
.sp-leg-l,.sp-leg-k{display:inline-block;width:18px;flex-shrink:0}
.sp-leg-l{height:3px;border-radius:2px;background:var(--acc3)}
.sp-leg-k{height:0;border-top:2.5px dashed var(--acc3);margin-left:6px}
@media (prefers-reduced-motion:reduce){.sp-kn,.sp-info,.sp-info.neu,.sp-leg{animation:none;transition:none}}
/* Breitenwechsel des linken Fensters (Main.pwWechsel, Eddie 15.10.): Inhalt aus, Breite, Inhalt ein. „weg“ ohne Übergang, wenn der Inhalt schon neu ist. */
@keyframes pwEin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
section[data-pw="aus"]>*{opacity:0;transition:opacity .15s ease-in-out}
section[data-pw="weg"]>*{opacity:0;transition:none}
section[data-pw="ein"]>*{animation:pwEin .2s ease-in-out both}
@media (prefers-reduced-motion:reduce){section[data-pw]>*{opacity:1;animation:none;transition:none}}
/* Freie Geräte auf der Karte (cc-map.js frei): ruhiges Quadrat mit Rand, deutlich anders als der gefüllte Punkt einer Sendung; still = 48 Stunden ohne Meldung */
.fg-mk{all:unset;box-sizing:border-box;position:absolute;left:calc(-8px + var(--fg-dx,0px));top:-8px;width:16px;height:16px;border-radius:4px;cursor:pointer;background:rgba(var(--g2d),calc(.7*var(--gk)));
 border:1.6px solid var(--mut);box-shadow:0 2px 8px -2px rgba(var(--sh),.5);animation:spEin .4s ease-in-out backwards;transition:transform .2s ease-in-out,border-color .2s ease-in-out}
.fg-mk::after{content:"";position:absolute;left:5px;top:5px;width:3.6px;height:3.6px;border-radius:1px;background:var(--mut)}
.fg-mk.still{border-color:var(--amb2)}.fg-mk.still::after{background:var(--amb2)}
.fg-mk:hover,.fg-mk:focus-visible,.fg-mk.an{transform:scale(1.25)}
.fg-mk-klein{display:inline-block;width:10px;height:10px;border-radius:3px;box-sizing:border-box;border:1.5px solid var(--mut)}
.sp-info-w{margin-top:7px;font-weight:600;color:var(--amb2)}
.sp-info-l{all:unset;cursor:pointer;display:block;margin-top:8px;padding-top:7px;border-top:1px solid rgba(var(--fg),.1);width:100%;color:var(--acc);font-weight:600;transition:color .2s ease-in-out}
.sp-info-l:hover,.sp-info-l:focus-visible{color:var(--acc2)}
@media (prefers-reduced-motion:reduce){.fg-mk{animation:none;transition:none}}
/* ===== Entwurf 34 ===== */
/* Schilder auf der Strecke weichen Ortsnamen aus (cc-map knPlatz): vier Plätze um den Punkt, Wechsel weich */
.sp-kn,.sp-halt.mit{transition:opacity .3s ease-in-out,background .25s ease-in-out,transform .3s ease-in-out}
.sp-kn[data-platz="unten"],.sp-halt.mit[data-platz="unten"]{transform:translate(-50%,7px)}
.sp-kn[data-platz="rechts"],.sp-halt.mit[data-platz="rechts"]{transform:translate(10px,-50%)}
.sp-kn[data-platz="links"],.sp-halt.mit[data-platz="links"]{transform:translate(calc(-100% - 10px),-50%)}
/* Halte (AVL 240): mit Dauer als Schild, sonst ein kleines Quadrat am Punkt. Am Handy ist die Tippfläche größer als das Zeichen */
.sp-halt{all:unset;box-sizing:border-box;position:absolute;left:0;top:0;cursor:pointer;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:2px;background:var(--c0);
 border:1.6px solid var(--mut);animation:spEin .4s ease-in-out backwards;transition:opacity .3s ease-in-out,transform .2s ease-in-out}
.sp-halt:not(.mit):hover,.sp-halt:not(.mit):focus-visible{transform:translate(-50%,-50%) scale(1.35)}
.sp-halt.mit{width:auto;height:auto;display:flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border-radius:999px;white-space:nowrap;transform:translate(-50%,calc(-100% - 7px));
 font:600 11px/1.45 Geist,system-ui,sans-serif;color:var(--ink);background:rgba(var(--g2d),calc(.62*var(--gk)));border:1px solid rgba(var(--fg),.28);box-shadow:0 4px 14px -6px rgba(var(--sh),.55);
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sp-halt.mit i{width:7px;height:7px;border-radius:1.5px;background:var(--mut)}
.sp-halt.mit:hover,.sp-halt.mit:focus-visible{background:rgba(var(--g2d),calc(.9*var(--gk)))}
.sp-halt.verdeckt{opacity:0;pointer-events:none}
@media (pointer:coarse){.sp-halt::after,.sp-kn::after{content:"";position:absolute;inset:-14px -8px}.sp-halt:not(.mit)::after{inset:-18px}}
@media (prefers-reduced-motion:reduce){.sp-halt,.sp-halt.mit{animation:none;transition:none}}

/* Blätter über der App (Scanner, Gerät): Mitte am Desktop, unten am Handy; Schließen mit ×, Escape oder Tippen daneben */
.ov{position:absolute;inset:0;z-index:64;display:grid;place-items:center;padding:max(16px,var(--sa-t)) max(16px,var(--sa-r)) max(16px,var(--sa-b)) max(16px,var(--sa-l));box-sizing:border-box;background:rgba(var(--bgr2),.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .3s ease-in-out}
.blatt{width:100%;max-width:440px;max-height:calc(100% - 32px);overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;border-radius:22px;
 background:var(--c0);border:1px solid rgba(var(--fg),.12);box-shadow:0 30px 80px -24px rgba(var(--sh),calc(.8*var(--shk)));animation:pop .45s ease-in-out;color:var(--ink);font-family:Geist,system-ui,sans-serif;container-type:inline-size}
.blatt-k{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.blatt-t{font-size:18px;font-weight:600;margin:0}
.blatt-s{font-size:13px;color:var(--mut);margin:3px 0 0;text-wrap:pretty}
.blatt-zu{all:unset;cursor:pointer;flex-shrink:0;width:40px;height:40px;margin:-6px -8px 0 0;border-radius:12px;display:grid;place-items:center;font-size:20px;line-height:1;color:var(--mut);transition:background .25s ease-in-out,color .25s ease-in-out}
.blatt-zu:hover,.blatt-zu:focus-visible{background:rgba(var(--fg),.08);color:var(--ink)}
.ov.m{place-items:end center;padding:var(--sa-t) var(--sa-r) 0 var(--sa-l)}.ov.m .blatt{max-width:none;max-height:94%;border-radius:22px 22px 0 0;animation:slideUp .45s ease-in-out;padding-bottom:calc(26px + var(--sa-b))}.ov.m .blatt-zu{width:44px;height:44px}
/* Scanner */
.scan-bild{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 45%,var(--sc1),var(--sc2))}
.scan-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fade .4s ease-in-out}
.scan-rahmen{position:absolute;inset:16% 24%;border:2px solid rgba(var(--accr),.9);border-radius:18px;box-shadow:0 0 0 999px rgba(var(--sh),calc(.32*var(--shk)));pointer-events:none}
.scan-linie{position:absolute;left:24%;right:24%;top:16%;height:2px;background:var(--acc);box-shadow:0 0 14px var(--acc);animation:scanZug 1.6s ease-in-out infinite;pointer-events:none}
@keyframes scanZug{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--h,180px) * .68))}}
.scan-ohne{position:absolute;inset:0;display:grid;place-items:center;padding:22px;box-sizing:border-box;text-align:center;font-size:13.5px;line-height:1.45;color:var(--t2);text-wrap:pretty}
.scan-start{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--mut)}
.scan-wege{display:flex;flex-direction:column;gap:10px}
.scan-foto{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:13px;font-size:14px;font-weight:600;
 border:1px solid rgba(var(--accr),.5);color:var(--acc);transition:background .25s ease-in-out}
.scan-foto:hover,.scan-foto:focus-within{background:rgba(var(--accr),.1)}
.scan-foto input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.scan-foto svg,.scan-knopf svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scan-ein{display:flex;flex-direction:column;gap:6px}
.scan-ein-k{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.scan-ein-k span:last-child{letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.scan-zeile{display:flex;gap:8px}
.scan-feld{flex:1;min-width:0;display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;background:rgba(var(--kbg),.55);border:1px solid rgba(var(--fg),.16);transition:border-color .25s ease-in-out}
.scan-feld:focus-within{border-color:rgba(var(--accr),.55)}
.scan-feld input{all:unset;flex:1;min-width:0;font:500 15px 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;color:var(--ink)}
.scan-los{all:unset;cursor:pointer;min-height:44px;padding:0 16px;border-radius:12px;display:grid;place-items:center;font-size:14px;font-weight:600;background:var(--acc);color:var(--onacc);transition:opacity .25s ease-in-out}
.scan-m{font-size:13px;line-height:1.45;padding:10px 12px;border-radius:12px;background:rgba(var(--accr),.08);border:1px solid rgba(var(--accr),.28);color:var(--t2);text-wrap:pretty;animation:fade .3s ease-in-out}
.scan-m.fehler{background:rgba(var(--redr),.10);border-color:rgba(var(--redr),.38);color:var(--red2)}
.scan-busy{font-size:12.5px;color:var(--mut);text-align:center}
.scan-knopf{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:12px;font-size:13.5px;font-weight:600;background:var(--acc);color:var(--onacc);
 transition:opacity .25s ease-in-out,transform .2s ease-in-out}
.scan-knopf:hover,.scan-knopf:focus-visible{opacity:.9}
.scan-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media (pointer:coarse){.scan-knopf{min-height:44px}}
@media (prefers-reduced-motion:reduce){.scan-linie{animation:none;opacity:.6}}
/* Gerät mit allen Infos */
.gi-zeilen{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:rgba(var(--fg),.035);border:1px solid rgba(var(--fg),.08)}
.gi-z{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:9px 12px;border-top:1px solid rgba(var(--fg),.06)}
.gi-z:first-child{border-top:0}
.gi-k{font-size:12px;color:var(--mut)}
.gi-v{font-size:13.5px;font-weight:500;min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:7px}
.gi-v.mono{font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.02em}
.gi-p{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gi-sub{grid-column:2/-1;font-size:12px;color:var(--mut);text-wrap:pretty}
.gi-kopie{all:unset;cursor:pointer;min-width:40px;height:32px;padding:0 9px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--acc);border:1px solid rgba(var(--accr),.4);transition:background .25s ease-in-out}
.gi-kopie:hover,.gi-kopie:focus-visible{background:rgba(var(--accr),.1)}
.gi-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.gi-knopf{all:unset;box-sizing:border-box;cursor:pointer;flex:1 1 180px;text-align:center;min-height:44px;padding:10px 14px;border-radius:13px;font-size:14px;font-weight:600;border:1px solid rgba(var(--fg),.18);transition:background .25s ease-in-out,opacity .25s ease-in-out}
.gi-knopf:hover,.gi-knopf:focus-visible{background:rgba(var(--fg),.06)}
.gi-knopf.haupt{background:var(--acc);color:var(--onacc);border-color:transparent}
.gi-knopf.haupt:hover,.gi-knopf.haupt:focus-visible{opacity:.9;background:var(--acc)}
@container (max-width:420px){.gi-z{grid-template-columns:minmax(0,1fr) auto}.gi-k{grid-column:1/-1}.gi-sub{grid-column:1/-1}}
@media (pointer:coarse){.gi-kopie{min-height:44px;min-width:56px}}
/* Lagebild: Ebene „Spuren“ (Admin) mit Zeitraum */
.spw{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-top:-4px}
.spw-k{all:unset;cursor:pointer;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:12.5px;font-weight:500;transition:background .25s ease-in-out,border-color .25s ease-in-out}
.spw-l{display:inline-block;width:16px;height:0;border-top:2px solid var(--acc3);border-radius:2px}
.spw-n{font:500 11.5px 'Geist Mono',ui-monospace,monospace;color:var(--mut)}
.spw-zeit{display:flex;padding:2px;border-radius:10px;background:rgba(var(--fg),.05);border:1px solid rgba(var(--fg),.1);animation:fade .35s ease-in-out}
.spw-zeit button{all:unset;cursor:pointer;padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;transition:background .3s ease-in-out,color .3s ease-in-out}
.spw-fokus{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;color:var(--t2);border:1px dashed rgba(var(--accr),.5);transition:background .25s ease-in-out;animation:fade .35s ease-in-out}
.spw-fokus:hover,.spw-fokus:focus-visible{background:rgba(var(--accr),.1)}
@media (pointer:coarse){.spw-k,.spw-zeit button,.spw-fokus{min-height:44px;box-sizing:border-box}}
/* Entwurf 48: Karte im Lagebild, Gruppen und Einzelne. Chips an, aus oder teilweise (aria-pressed mixed: gestrichelt, Punkt halb), „Alle abwählen“, Haken je Sendung
   und freiem Gerät (role checkbox), Abschnitt „Freie Geräte“ unter den Sendungen. Jeder Wechsel 0,25 s ease-in-out; am Handy 44 px Trefferfläche */
.lf-reihe{display:flex;gap:6px;flex-wrap:wrap}
.lf{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:12.5px;font-weight:500;background:rgba(var(--fg),.035);border:1px solid rgba(var(--fg),.1);transition:background .25s ease-in-out,border-color .25s ease-in-out,color .25s ease-in-out}
.lf:hover,.lf:focus-visible{border-color:rgba(var(--fg),.3)}
.lf[aria-pressed="true"]{background:rgba(var(--accr),.16);border-color:rgba(var(--accr),.55)}
.lf[aria-pressed="mixed"]{background:rgba(var(--accr),.07);border:1px dashed rgba(var(--accr),.6)}
.lf[aria-pressed="false"]{color:var(--mut)}.lf[data-leer="true"]{opacity:.55}
.lf-p{width:7px;height:7px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--c);background:var(--c);transition:background .25s ease-in-out}
.lf[aria-pressed="false"] .lf-p{background:transparent}.lf[aria-pressed="mixed"] .lf-p{background:linear-gradient(90deg,var(--c) 50%,transparent 50%)}
.lf-n{font:500 11.5px 'Geist Mono',ui-monospace,monospace;color:var(--mut)}
.lf-alle{font-weight:600;color:var(--acc);border-color:rgba(var(--accr),.35)}
.lz{display:flex;align-items:center;gap:2px}
.kh{all:unset;box-sizing:border-box;flex:none;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;transition:background .25s ease-in-out}
.kh:hover,.kh:focus-visible{background:rgba(var(--fg),.06)}.kh:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.kh-b{position:relative;width:18px;height:18px;box-sizing:border-box;border-radius:5px;border:1.5px solid rgba(var(--fg),.35);transition:background .25s ease-in-out,border-color .25s ease-in-out}
.kh-b::after{content:"";position:absolute;left:5px;top:1.5px;width:4.5px;height:9px;border:solid var(--onacc);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:opacity .25s ease-in-out,transform .25s ease-in-out}
.kh[aria-checked="true"] .kh-b{background:var(--acc);border-color:var(--acc)}.kh[aria-checked="true"] .kh-b::after{opacity:1;transform:rotate(45deg) scale(1)}
.fl{display:flex;flex-direction:column;gap:2px;margin:4px -8px 0;padding-top:12px;border-top:1px dashed rgba(var(--fg),.12)}
.fl-k{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:0 10px 6px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fl-k b{font:600 12px 'Geist Mono',ui-monospace,monospace;letter-spacing:0;color:var(--t2)}.fl-k span{margin-left:auto;letter-spacing:0;text-transform:none;color:var(--fnt)}
.fl-z{all:unset;box-sizing:border-box;flex:1;min-width:0;cursor:pointer;display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:14px;transition:background .25s ease-in-out}
.fl-z:hover,.fl-z:focus-visible{background:rgba(var(--fg),.055)}
.fl-t,.fl-r{display:flex;flex-direction:column;gap:2px;min-width:0}.fl-r{align-items:flex-end;font-size:12.5px;color:var(--t2);text-align:right}
.fl-id{font:600 13.5px 'Geist Mono',ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fl-wo{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-s{font-size:11.5px;color:var(--amb2)}
@media (pointer:coarse){.lf{min-height:44px}.kh{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.lf,.lf-p,.kh,.kh-b,.kh-b::after,.fl-z{transition:none}}
/* SIM-Karten: Abgleich, eine Zeitangabe und das Ergebnis des letzten Takts */
.ab-ok{font-size:12px;color:var(--mut)}
.ab-teil{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--amb2);padding:5px 10px;border-radius:999px;background:rgba(var(--ambr),.12);border:1px solid rgba(var(--ambr),.35);animation:fade .35s ease-in-out}
.ab-teil i{width:7px;height:7px;border-radius:50%;background:var(--amb);animation:blink 1.6s ease-in-out infinite}
.ab-takt{all:unset;cursor:pointer;font-size:12px;color:var(--acc);text-decoration:underline;text-underline-offset:3px;transition:color .25s ease-in-out}
.ab-takt:hover,.ab-takt:focus-visible{color:var(--acc2)}
/* Parameter: Takt des Abgleichs mit 1NCE (nur Admin ändert) */
.tk{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:rgba(var(--fg),.04)}
.tk-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.tk-l{font-size:12px;color:var(--mut)}
.tk-w{font:600 15px 'Geist Mono',ui-monospace,monospace}
.tk-st{display:flex;gap:6px;align-items:center}
.tk-b{all:unset;cursor:pointer;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--fg),.07);font-size:18px;transition:background .25s ease-in-out,opacity .25s ease-in-out}
.tk-b:hover,.tk-b:focus-visible{background:rgba(var(--fg),.14)}
.tk-in{all:unset;box-sizing:border-box;width:52px;height:34px;border-radius:10px;text-align:center;font:600 14px 'Geist Mono',ui-monospace,monospace;background:rgba(var(--kbg),.55);border:1px solid rgba(var(--fg),.16);transition:border-color .25s ease-in-out}
.tk-in:focus{border-color:rgba(var(--accr),.55)}
.tk-s{font-size:12px;color:var(--fnt);text-wrap:pretty}
.tk-err{font-size:12.5px;color:var(--red2)}
@media (pointer:coarse){.tk-b,.tk-in{height:44px;width:44px}.tk-in{width:56px}}
/* Geräteliste: fährt oder steht */
.gl-bew{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px}
.gl-bew i{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--mut)}
.gl-bew i[data-z="faehrt"]{background:var(--grn)}
.gl-bew i[data-z="steht"]{border-radius:1.5px;background:var(--amb)}
.gl-bew span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.par-h{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:16px 0 6px}
.scan-knopf.gross{justify-content:center;min-height:56px;font-size:15px;border-radius:16px}
.koppeln-gewaehlt{font:500 12.5px 'Geist Mono',ui-monospace,monospace;color:var(--grn);text-align:center;animation:fade .4s ease-in-out}
.akte-bew{margin-top:4px;color:var(--t2)}
.akte-ger-bew{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;padding:12px 14px;border-radius:14px;background:rgba(var(--fg),.04);font-size:13px}
.akte-ger-bew .gl-bew{font-size:14px;font-weight:500}
/* Entwurf 35. SIM-Liste am Handy: statt der Spaltenköpfe „Sortieren nach“ als Auswahl mit Richtung (die Köpfe brächen dort in zwei Reihen) */
.sw{display:none;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px 10px 16px}
.sw-l{font-size:12px;color:var(--mut)}
.sw-feld{position:relative;display:inline-flex;align-items:center;flex:1 1 140px;min-width:0}
.sw-s{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;min-height:44px;padding:0 34px 0 12px;border-radius:12px;font:500 16px Geist,sans-serif;color:var(--ink);background:rgba(var(--kbg),.55);border:1px solid rgba(var(--fg),.16);cursor:pointer;transition:border-color .25s ease-in-out}
.sw-s:focus{outline:none;border-color:rgba(var(--accr),.55)}
.sw-s option{color:var(--ink);background:var(--c0)}
.sw-chev{position:absolute;right:12px;pointer-events:none;stroke:var(--mut);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sw-dir{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:12px;font-size:13px;font-weight:600;color:var(--ink);border:1px solid rgba(var(--fg),.16);transition:background .25s ease-in-out}
.sw-dir:hover,.sw-dir:focus-visible{background:rgba(var(--fg),.06)}
.sw-dir svg{stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease-in-out}
/* Entwurf 35. Filter und Profile der Tracker-Einstellungen: am Handy groß genug zum Tippen */
@media (pointer:coarse){.tr-fp,.tr-pw{min-height:44px!important}}   /* !important: die Knöpfe setzen all:unset im style-Attribut */
/* Entwurf 35. Gerät auf der Karte: links die Infos (gleiche Zeilen wie das Blatt „Gerät“), oben der Weg zurück in die Liste */
.gk{display:flex;flex-direction:column;gap:14px;min-width:0;container-type:inline-size;animation:fade .35s ease-in-out}
.gk-zurueck{all:unset;box-sizing:border-box;cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 8px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--acc);border:1px solid rgba(var(--accr),.35);transition:background .25s ease-in-out}
.gk-zurueck:hover,.gk-zurueck:focus-visible{background:rgba(var(--accr),.1)}
.gk-zurueck svg{stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (pointer:coarse){.gk-zurueck{min-height:44px}}
/* Gerät mit Sendung auf der Karte: Ring um den Punkt der Sendung, daneben Name und Sendung */
.gk-mk{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.gk-ring{position:absolute;left:-15px;top:-15px;width:30px;height:30px;box-sizing:border-box;border-radius:50%;border:2.5px solid var(--gk-c,var(--acc));box-shadow:0 0 0 4px rgba(var(--accr),.18);animation:pulse 2.6s ease-in-out infinite}
.gk-name{position:absolute;left:20px;top:-12px;white-space:nowrap;padding:3px 8px;border-radius:8px;font:600 12px 'Geist Mono',ui-monospace,monospace;color:var(--ink);background:rgba(var(--g2d),calc(.7*var(--gk)));border:1px solid rgba(var(--fg),.16);box-shadow:0 6px 16px -8px rgba(var(--sh),.6);animation:fade .3s ease-in-out}
/* Freie Geräte am selben Ort: Marke mit Zahl, aufgefächert eine Reihe mit Namen; die gewählte trägt die Farbe des Akzents */
.fg-gr{all:unset;box-sizing:border-box;position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;cursor:pointer;font:700 11.5px 'Geist Mono',ui-monospace,monospace;color:var(--ink);
 background:rgba(var(--g2d),calc(.8*var(--gk)));border:1.6px solid var(--mut);box-shadow:0 0 0 3px rgba(var(--g2d),calc(.45*var(--gk))),0 2px 8px -2px rgba(var(--sh),.5);animation:spEin .4s ease-in-out backwards;transition:transform .2s ease-in-out}
.fg-gr.still{border-color:var(--amb2)}
.fg-gr:hover,.fg-gr:focus-visible{transform:scale(1.12)}
.fg-reihe{position:absolute;left:0;top:-13px;transform:translateX(-50%);display:flex;gap:4px;animation:fade .25s ease-in-out}
.fg-mk.fg-chip{position:relative;left:auto;top:auto;width:auto;height:26px;display:flex;align-items:center;padding:0 8px 0 17px;font:600 11px 'Geist Mono',ui-monospace,monospace;color:var(--ink);white-space:nowrap;border-radius:7px;background:var(--c0)}
.fg-mk.fg-chip::after{left:6px;top:50%;margin-top:-1.8px}
.fg-mk.fg-chip:hover,.fg-mk.fg-chip:focus-visible{transform:translateY(-1px)}
.fg-mk.an{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--accr),.35),0 2px 8px -2px rgba(var(--sh),.5)}.fg-mk.an::after{background:var(--acc)}
.fg-mk.fg-chip.an{transform:none;background:var(--acc);color:var(--onacc)}.fg-mk.fg-chip.an::after{background:var(--onacc)}
.sp-info.fg-info{left:var(--fg-dx,0px)}
/* Trefferfläche am Handy 44 px hoch, ohne das Bild zu ändern */
.fg-gr::before{content:"";position:absolute;inset:-10px}.fg-mk.fg-chip::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
@media (prefers-reduced-motion:reduce){.fg-gr,.fg-reihe,.gk-ring,.gk-name{animation:none;transition:none}}
/* Entwurf 35. Geräteliste mit freien Geräten: Filter, Name als Knopf (öffnet), „Auf Karte zeigen“ je Zeile */
.gl-f{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:10px;font-size:12.5px;font-weight:500;border:1px solid transparent;transition:background .25s ease-in-out,border-color .25s ease-in-out}
.gl-f-n{font:500 11.5px 'Geist Mono',ui-monospace,monospace;color:var(--mut)}
.gl-id{all:unset;cursor:pointer;font-family:'Geist Mono',monospace;border-radius:6px;white-space:nowrap}
.gl-id:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.gl-frei{color:var(--mut)}
.gl-kk{display:flex;justify-content:flex-end}
.gl-kz{display:flex;justify-content:flex-end;min-width:0}
.gl-karte{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:10px;font-size:12px;font-weight:600;color:var(--acc);border:1px solid rgba(var(--accr),.35);white-space:nowrap;transition:background .25s ease-in-out}
.gl-karte:hover,.gl-karte:focus-visible{background:rgba(var(--accr),.12)}
.gl-karte svg{flex-shrink:0;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gl-karte-k{display:none}
.gl-ohne{font-size:11.5px;color:var(--mut);white-space:nowrap}
@media (pointer:coarse){.gl-f{min-height:44px}.gl-karte{min-height:44px}}
/* Entwurf 35. SIM-Karten: Anfrage an das Gerät (Status, Neustart) über Daten oder per SMS, Kasten neue Karten, Parameter Einrichten */
.anf{display:flex;flex-direction:column;gap:7px}
.anf-h{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.anf-r{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.anf-l{font-size:12px;color:var(--mut);margin-right:2px}
.anf-c{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 11px;border-radius:10px;font-size:12.5px;font-weight:500;border:1px solid rgba(var(--fg),.1);transition:background .25s ease-in-out,border-color .25s ease-in-out,opacity .25s ease-in-out}
.anf-s{font-size:12px;line-height:1.4;color:var(--t3);text-wrap:pretty}
.anf-aus{color:var(--amb2)}
.anf-w{font-size:12px;color:var(--mut);text-wrap:pretty}
.anf-los{all:unset;box-sizing:border-box;cursor:pointer;align-self:flex-start;padding:8px 13px;border-radius:11px;font-size:13px;font-weight:600;background:var(--acc);color:var(--onacc);transition:opacity .25s ease-in-out}
.anf-los:disabled{cursor:default}
.anf-k{display:flex;flex-direction:column;gap:5px;margin-top:3px;padding:9px 11px;border-radius:11px;font-size:12.5px;background:rgba(var(--ambr),.10);border:1px solid rgba(var(--ambr),.35);text-wrap:pretty;animation:fade .35s ease-in-out}
.anf-k b{font-weight:600;color:var(--amb2)}
.nk{display:flex;flex-direction:column;gap:8px;padding:11px 15px;border-radius:16px;border:1px dashed rgba(var(--accr),.45)}
.nk-r{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.nk-t{font-size:13px;color:var(--t3);text-wrap:pretty;flex:1 1 220px;min-width:0}
.nk-s{font-size:12px;color:var(--mut);text-wrap:pretty}
.nk-h{padding-top:8px;border-top:1px solid rgba(var(--fg),.08)}
.nk-k{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 13px;border-radius:11px;font-size:13px;font-weight:600;border:1px solid rgba(var(--accr),.55);color:var(--acc);transition:background .25s ease-in-out,opacity .25s ease-in-out}
.nk-k:hover,.nk-k:focus-visible{background:rgba(var(--accr),.1)}
.nk-k:disabled{cursor:default;opacity:.45;background:none}
.ein-w{font-family:Geist,sans-serif}
.ein-seg{display:flex;padding:3px;border-radius:12px;background:rgba(var(--fg),.05);border:1px solid rgba(var(--fg),.1)}
.ein-seg button{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;transition:background .3s ease-in-out,color .3s ease-in-out}
@media (pointer:coarse){.anf-c,.anf-los,.nk-k,.ein-seg button{min-height:44px;display:inline-flex;align-items:center}}
/* Speicherfrist (Entwurf 44, Vault): Rückfrage vor dem Kürzen und Verlauf der Änderungen im Modul Datenschutz */
.frist-hinweis{margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(var(--ambr),.10);border:1px solid rgba(var(--ambr),.38);animation:fade .3s ease-in-out}
.frist-hinweis-t{font-size:13.5px;font-weight:600}
.frist-hinweis-s{margin-top:4px;font-size:12.5px;color:var(--mut);text-wrap:pretty}
.frist-knoepfe{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
.frist-knopf{all:unset;box-sizing:border-box;cursor:pointer;min-height:36px;padding:8px 14px;border-radius:11px;font-size:13px;font-weight:500;background:rgba(var(--fg),.06);color:var(--ink);transition:background .25s ease-in-out,color .25s ease-in-out}
.frist-knopf:hover,.frist-knopf:focus-visible{background:rgba(var(--fg),.12)}
.frist-knopf-ja{background:rgba(var(--ambr),.22);color:var(--amb2);font-weight:600}.frist-knopf-ja:hover,.frist-knopf-ja:focus-visible{background:rgba(var(--ambr),.32)}
.frist-verlauf{margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--fg),.07);display:flex;flex-direction:column;gap:6px}
.frist-verlauf-t{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.frist-verlauf-z{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;color:var(--t2)}
.frist-verlauf-w{font:500 12px 'Geist Mono',monospace;color:var(--mut);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.frist-hinweis{animation:none}}
/* Demofahrt (Entwurf 44): Eintrag im Lagebild, nur für den Admin, der sie angelegt hat; zeigt die Fahrt als Spur auf der Karte */
.demo-fahrt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 14px;border-radius:16px;border:1px dashed rgba(var(--accr),.5);background:rgba(var(--accr),.06);transition:background .25s ease-in-out,border-color .25s ease-in-out}
.demo-fahrt:hover,.demo-fahrt:focus-visible,.demo-fahrt[aria-pressed="true"]{background:rgba(var(--accr),.14);border-color:rgba(var(--accr),.75)}
.demo-fahrt-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.demo-fahrt-n{font-size:14px;font-weight:600}
.demo-fahrt-h{font-size:11.5px;font-weight:600;color:var(--acc);letter-spacing:.02em}
.demo-fahrt-t{font-size:12.5px;color:var(--mut)}
.demo-fahrt-z{font-size:12.5px;font-weight:500;color:var(--acc)}