:root{--bg:#0f1620;--card:#1b2735;--fg:#f2f6fa;--muted:#9fb3c8;
    --green:#1f9d55;--red:#d64545;--amber:#e0a106;--blue:#2b6cb0;--line:#2c3e50;--acc:#7ab8ff;
    /* --sunk: die "vertiefte" Flaeche unter der Karte (Eingabefelder, Kacheln, Pausenbalken).
       Als Variable, damit der Hell-Modus sie mitdrehen kann. */
    --sunk:#0c1219;}
  /* ---- Hell-Modus: NUR als Alarmzustand vor der Pflichtpause ----
     Eine Viertelstunde vor der Pausenfrist springt die App aus dem Dunkel- in den Hell-Modus
     (body.hellModus) - der abrupte Helligkeitswechsel ist im Fahrerhaus auch aus dem Augenwinkel
     nicht zu uebersehen, anders als eine blosse Farbaenderung an einem Knopf. Sobald die Pause
     beginnt, geht es zurueck ins Dunkle (siehe setPauseOverlay). Es ist bewusst KEIN vom Nutzer
     waehlbares Design: der Hell-Modus bedeutet immer "Pause steht an". */
  body.hellModus{--bg:#f4f7fb;--card:#ffffff;--fg:#14202c;--muted:#4c5f73;
    --line:#c4d2e0;--acc:#12539c;--amber:#9a6f00;--sunk:#e9eff6;}
  body.hellModus header .who .userMenuItem:hover{background:#dde6f0}
  /* Warn-Kacheln: auf hellem Grund helle Toene mit dunkler Schrift statt der dunklen Fuellungen. */
  body.hellModus .flag.WARN{background:#fdf1c9}
  body.hellModus .flag.ALERT{background:#fde3c4}
  body.hellModus .flag.CRITICAL{background:#fbd5d5}
  *{box-sizing:border-box}
  /* Die SEITE scrollt nie seitlich (Rueckmeldung Michael Elvey, 26.08.2026: "ich kann das
     Fenster noch nach links und rechts leicht verschieben"). Was zu Recht breiter ist als
     der Bildschirm, hat einen EIGENEN Scrollbereich: die Reiterleiste (.tabbar) und die
     Dispo-Tabellen (Wrapper mit overflow:auto). Alles andere soll passen - und wenn doch
     einmal etwas uebersteht, verschiebt es nicht mehr die ganze App.
     Bewusst 'clip' und nicht 'hidden': hidden macht daraus einen Scrollcontainer und wuerde
     position:sticky brechen. */
  html{overflow-x:clip}
  /* Lange, nicht umbrechbare Zeichenketten (Adressen, Links, zusammengesetzte Ortsnamen)
     brechen um, statt ihren Kasten aufzuziehen. */
  body{overflow-wrap:break-word}
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);-webkit-tap-highlight-color:transparent}
  header{position:relative;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line);display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:nowrap}
  /* Titel immer mittig in der Leiste (aus dem Fluss genommen), die who-Gruppe bleibt rechtsbündig. */
  header h1{position:absolute;left:50%;transform:translateX(-50%);font-size:1rem;margin:0;white-space:nowrap;pointer-events:none}
  /* Rechts nur noch eine Silhouette; Name/Rolle/Einstellungen/Abmelden im Dropdown. */
  header .who{position:relative;font-size:.8rem;color:var(--muted);display:flex;align-items:center}
  header .who .userMenuBtn{background:none;border:1px solid var(--line);color:var(--fg);border-radius:50%;width:36px;height:36px;padding:0;font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
  header .who .userMenuBtn:active{filter:brightness(.85)}
  header .who .userMenu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.4);padding:4px;z-index:60}
  header .who .userMenu.hidden{display:none}
  header .who .userMenuHead{padding:9px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  header .who .userMenuHead .umName{font-weight:700;color:var(--fg);font-size:.92rem;white-space:nowrap}
  header .who .userMenuHead .umRole{font-size:.76rem;color:var(--muted);margin-top:2px}
  header .who .userMenuItem{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--fg);padding:10px 12px;font-size:.85rem;cursor:pointer;border-radius:8px;white-space:nowrap}
  header .who .userMenuItem:hover{background:#25313f}
  header .who .userMenuItem .umTag{font-weight:700;color:var(--acc)}
  header .who .userMenuItem.roleItem[disabled]{cursor:default;opacity:.75}
  header .who .userMenuItem.roleItem[disabled]:hover{background:none}
  main{padding:16px;max-width:760px;margin:0 auto;display:grid;gap:14px}
  /* Dispo/Admin: Breite passt sich fluessig der Bildschirmauflösung an - auf grossen
     PC-Monitoren deutlich breiter (bis 1600px), auf Handy/Tablet automatisch schmaler
     (fast volle Breite, wie beim Fahrer-Layout). */
  body.dispoView main{max-width:min(1600px,96vw)}
  @media (min-width:1000px){
    body.dispoView .tiles{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  }
  .status{background:var(--card);border-radius:14px;padding:16px;display:grid;gap:6px}
  .status .big{font-size:2rem;font-weight:700}
  .status .row{display:flex;justify-content:space-between;font-size:.95rem;color:var(--muted)}
  .pausebar{height:14px;border-radius:8px;background:var(--sunk);overflow:hidden}
  .pausebar > i{display:block;height:100%;background:var(--green);width:0%}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  button.action{border:none;border-radius:16px;color:#fff;font-size:1.25rem;font-weight:700;padding:26px 10px;min-height:96px;cursor:pointer;transition:filter .1s}
  button.action:active{filter:brightness(.85)}
  button:disabled{opacity:.4;cursor:not-allowed}
  .b-start{background:var(--green)} .b-end{background:var(--red)}
  .b-pause{background:var(--amber);color:#20160a} .b-resume{background:var(--blue)}
  /* Pause ueberfaellig (Pflichtpause-Frist ab Schichtbeginn erreicht/ueberschritten):
     Pause-Start-Button blinkt zusaetzlich rot, GANZER Bildschirm pulsiert signalrot
     (#pauseWarnOverlay.due). Die 15-Min-Vorwarnung davor pulsiert signalgelb
     (#pauseWarnOverlay.warn) und schaltet zusaetzlich in den Hell-Modus (body.hellModus) -
     beides bildschirmfuellend, ganz oben (ueber allem, inkl. Modals), aber ohne Klicks
     abzufangen. */
  @keyframes pauseDue{0%,49%{background:var(--red);color:#fff;box-shadow:0 0 0 0 rgba(224,49,49,.7)}50%,100%{background:#7a1010;color:#fff;box-shadow:0 0 0 8px rgba(224,49,49,0)}}
  button.action.pauseDue{animation:pauseDue 1s steps(1,end) infinite;font-weight:800}
  @keyframes pauseWarnScreen{0%,49%{opacity:0}50%,100%{opacity:1}}
  #pauseWarnOverlay{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;display:none}
  /* Signalwirkung UND Lesbarkeit - beides zugleich, indem sie getrennt werden:
     - Der breite Rahmen am Bildschirmrand traegt das Signal. Er ist VOLL deckendes Signalgelb
       bzw. Signalrot und liegt ueber keinem Text, kostet also nichts an Lesbarkeit.
     - Die Flaeche darueber ist nur ein leichter Schleier (18 %), damit der ganze Bildschirm
       sichtbar mitreagiert, ohne den Text zuzudecken.
     Vorher lag das Signal allein in der Flaeche: bei der fuer die Lesbarkeit noetigen geringen
     Deckkraft wurde daraus auf hellem Grund ein blasses Rosa (rgb(236,168,170)) - kein Signalrot.
     Deshalb jetzt der Rahmen als Traeger des Signals. */
  #pauseWarnOverlay.warn{display:block;background:rgba(255,213,0,.18);
    box-shadow:inset 0 0 0 16px #ffd500;animation:pauseWarnScreen 1s steps(1,end) infinite}
  #pauseWarnOverlay.due{display:block;background:rgba(225,6,0,.18);
    box-shadow:inset 0 0 0 16px #e10600;animation:pauseWarnScreen 1s steps(1,end) infinite}
  /* Auf schmalen Handys einen etwas schlankeren Rahmen, damit er nicht halbe Knoepfe verdeckt. */
  @media (max-width:480px){
    #pauseWarnOverlay.warn,#pauseWarnOverlay.due{box-shadow:inset 0 0 0 10px currentColor}
    #pauseWarnOverlay.warn{color:#ffd500} #pauseWarnOverlay.due{color:#e10600}
  }
  /* Handy Hochformat: Hauptbuttons etwas kompakter, damit das 2x2-Raster ohne viel
     Scrollen im Blick ist. */
  @media (max-width:760px){
    button.action{min-height:76px;padding:18px 8px;font-size:1.12rem}
  }
  /* Handy Querformat (niedrige Bauhöhe): der Kernbereich - Status + die vier
     Hauptbuttons - muss ohne Scrollen sichtbar bleiben. Buttons in eine kompakte
     Reihe, Status- und KFZ-Zeile schrumpfen. */
  @media (max-height:600px) and (orientation:landscape){
    main{padding:8px}
    #driverHome{gap:8px !important}
    .status{padding:8px 12px;gap:2px}
    .status .big{font-size:1.2rem}
    .status .row{font-size:.8rem}
    .pausebar{height:8px}
    .mainbtns{grid-template-columns:repeat(4,1fr)}
    .mainbtns button.action{min-height:54px;padding:8px 4px;font-size:.92rem}
  }
  .events{background:var(--card);border-radius:14px;padding:8px 0;overflow:hidden}
  .events h2{font-size:.85rem;color:var(--muted);margin:8px 16px;text-transform:uppercase;letter-spacing:.05em}
  .ev{display:flex;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);font-size:.95rem}
  .ev .t{color:var(--muted)}
  .flags{display:grid;gap:8px}
  .flag{border-radius:12px;padding:12px 14px;font-size:.95rem;font-weight:600}
  .flag.WARN{background:#5a4a12;border-left:5px solid var(--amber)}
  .flag.ALERT{background:#5a3a12;border-left:5px solid #e07a06}
  .flag.CRITICAL{background:#5a1616;border-left:5px solid var(--red)}
  .export{background:var(--card);border-radius:14px;padding:16px;display:grid;gap:10px}
  .export h2{font-size:.85rem;color:var(--muted);margin:0;text-transform:uppercase;letter-spacing:.05em}
  .export .dates{display:flex;gap:10px;flex-wrap:wrap}
  .export label{font-size:.8rem;color:var(--muted);display:grid;gap:3px}
  .export input{background:var(--sunk);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px}
  .export .btns{display:flex;gap:10px}
  .export .btns a{flex:1;text-align:center;text-decoration:none;background:var(--blue);color:#fff;border-radius:10px;padding:12px;font-weight:600}
  .export .btns a.xlsx{background:var(--green)}
  .login{max-width:380px;margin:9vh auto;background:var(--card);border-radius:16px;padding:24px;display:grid;gap:14px}
  .login h1{margin:0 0 2px;font-size:1.3rem;text-align:center}
  input.f,textarea.f{background:var(--sunk);border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:14px;font-size:1rem;width:100%}
  textarea.f{resize:vertical;font-family:inherit}
  select.f{background:var(--sunk);border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:12px;font-size:1rem;width:100%}
  button.p{background:var(--green);border:none;color:#fff;border-radius:12px;padding:14px;font-size:1.05rem;font-weight:700;cursor:pointer;width:100%}
  button.sec{background:none;border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:10px;cursor:pointer}
  .link{background:none;border:none;color:var(--blue);cursor:pointer;font-size:.9rem;text-decoration:underline;padding:0}
  .err{color:#ff9b9b;font-size:.9rem;min-height:1.1em;text-align:center}
  .ok{color:#8be6a8;font-size:.9rem;text-align:center}
  .hidden{display:none !important}
  .toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#000;color:#fff;padding:12px 18px;border-radius:10px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:60}
  .toast.show{opacity:.95}
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow:auto;z-index:50}
  .modal .box{background:var(--card);border-radius:16px;padding:20px;max-width:520px;width:100%;display:grid;gap:14px}
  .modal h2{margin:0;font-size:1.1rem}
  .modal .close{position:absolute;top:16px;right:16px}
  .card2{background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:10px}
  .card2 h3{margin:0;font-size:.95rem}
  /* Suchbare Auswahl (Combobox) fuer grosse Listen (Fahrzeuge/Landkreise/Muellsorten). */
  .combo{position:relative}
  .combo .comboInput{width:100%}
  .combo .comboClear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:2px 4px;line-height:1}
  .comboList{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--card);border:1px solid var(--line);border-radius:10px;max-height:240px;overflow:auto;box-shadow:0 10px 28px rgba(0,0,0,.45);margin-top:3px}
  .comboList.hidden{display:none}
  .comboOpt{padding:10px 12px;cursor:pointer;font-size:.9rem;border-top:1px solid var(--line);white-space:normal;overflow-wrap:anywhere;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tcCat.active{background:var(--blue);color:#fff;border-color:var(--blue)}
  .comboOpt:first-child{border-top:none}
  .comboOpt:hover,.comboOpt.active{background:#25313f}
  .comboOpt.none{color:var(--muted)}
  .comboEmpty{padding:10px 12px;color:var(--muted);font-size:.85rem}
  .qr{display:block;margin:0 auto;background:#fff;padding:8px;border-radius:8px;max-width:200px}
  .codes{font-family:ui-monospace,monospace;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:.95rem}
  .section{background:var(--card);border-radius:14px;padding:16px;display:grid;gap:12px}
  .section h2{margin:0;font-size:1rem}
  table.users{width:100%;border-collapse:collapse;font-size:.85rem}
  table.users th,table.users td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
  table.users .act{display:flex;gap:6px;flex-wrap:wrap}
  table.users .act button{font-size:.75rem;padding:4px 8px}
  .muted{color:var(--muted);font-size:.85rem}
  .checks{display:flex;gap:16px;flex-wrap:wrap}
  .checks label{display:flex;gap:6px;align-items:center;font-size:.95rem;color:var(--fg)}
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
  .tile{background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
  .tile .n{font-size:1.6rem;font-weight:700} .tile .l{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
  .pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:700}
  .pill.IM_DIENST{background:#123d24;color:#67e29a} .pill.IN_PAUSE{background:#4a3a0a;color:#ffcf5c}
  .pill.AUSSER_DIENST{background:#25313f;color:#9fb3c8}
  .pill.ABWESEND_VACATION{background:#123a4a;color:#67c8e2} .pill.ABWESEND_SICK{background:#4a1230;color:#e267a0}
  .pill.ABWESEND_OTHER{background:#33254a;color:#b79fe2}
  .absbox{border-radius:12px;padding:12px 14px;font-weight:600;background:#123a4a;border-left:5px solid #2b6cb0}
  /* Reiter stehen IMMER in EINER Zeile. Passen sie nicht (die Dispo hat sieben), laesst sich
     die Zeile seitlich schieben - mit dem Finger wischen bzw. am Rechner mit Shift+Mausrad.
     Frueher brachen sie in eine zweite Zeile um; auf dem Handy sprang der Inhalt darunter
     dadurch je nach Rolle unterschiedlich weit nach unten. */
  .tabbar{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
    border-bottom:2px solid var(--line);padding-bottom:2px}
  /* Schiebe-Knoepfe an den Enden der Reiterleiste. Die Bildlaufleiste allein reicht als
     Hinweis nicht - am Telefon ist sie oft unsichtbar, und dann sieht niemand, dass es
     seitlich weitergeht (Rueckmeldung Michael Elvey, 24.08.2026). Die Knoepfe erscheinen
     NUR, wenn es in die jeweilige Richtung wirklich etwas zu sehen gibt. */
  /* min-width:0 ist hier NICHT kosmetisch: die Leisten liegen in Rastern (driverHome,
     dispoHome, die Reiterinhalte). Ein Raster-Element mit overflow:visible bekommt als
     automatische Mindestbreite seine INHALTSBREITE - der Wrapper weigerte sich deshalb zu
     schrumpfen, die Leiste lief nie ueber, kein Pfeil erschien, und die ganze Seite wurde
     breiter als der Bildschirm. Vorher war die Leiste selbst das Raster-Element; als
     Scroll-Container hatte sie diese Mindestbreite nicht. */
  .tabbarWrap{position:relative;min-width:0;max-width:100%}
  /* Reiter-Panels sind Rasterfelder. Ohne min-width:0 ist ihre Mindestbreite die ihres
     INHALTS - ein einziges nicht schrumpfbares Element macht damit die ganze Seite breiter
     als den Bildschirm, und der Fahrer muss seitlich schieben. Genau das war der TMS-Reiter:
     das Bemerkungsfeld hat eine Eigenbreite von rund 470 px (textarea, cols-Voreinstellung)
     und zog die Seite auf 552 px bei 360 px Bildschirm (gemessen 26.08.2026).
     Dasselbe Muster wie bei .tabbarWrap - dort ist es schon einmal passiert. */
  .tabpanel{min-width:0}
  /* Gleiches gilt fuer Eingabefelder: ein Monatsfeld (input type=month) bringt rund 200 px
     Eigenbreite mit und sprengte damit die Auswertung. */
  textarea,input,select{max-width:100%;min-width:0}
  .tabNav{position:absolute;top:0;bottom:4px;width:38px;border:none;padding:0;z-index:6;
    display:none;align-items:center;cursor:pointer;color:var(--fg);font-size:1.3rem;line-height:1;
    -webkit-tap-highlight-color:transparent}
  .tabNav.an{display:flex}
  .tabNav.links{left:0;justify-content:flex-start;
    background:linear-gradient(90deg,var(--bg) 0,var(--bg) 60%,transparent 100%)}
  .tabNav.rechts{right:0;justify-content:flex-end;
    background:linear-gradient(270deg,var(--bg) 0,var(--bg) 60%,transparent 100%)}
  /* Der Pfeil selbst sitzt in einem kleinen Feld - so wirkt er wie ein Knopf und nicht wie
     ein Zeichen, das zufaellig ueber den Reitern liegt. */
  .tabNav span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
    border:1px solid var(--line);border-radius:999px;background:var(--card);
    box-shadow:0 1px 4px rgba(0,0,0,.35);font-size:.95rem;padding-bottom:2px}
  .tabNav:hover span{border-color:var(--acc);color:var(--acc)}
  .tabNav:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:8px}
  /* Schmale, unaufdringliche Bildlaufleiste - sie zeigt an, DASS es seitlich weitergeht. */
  .tabbar::-webkit-scrollbar{height:4px}
  .tabbar::-webkit-scrollbar-track{background:transparent}
  .tabbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
  /* flex:0 0 auto - die Reiter behalten ihre natuerliche Breite, statt sich zu quetschen;
     erst dadurch entsteht ueberhaupt etwas zum Schieben. nowrap haelt die Beschriftung
     einzeilig. */
  .tabbar .tab{flex:0 0 auto;white-space:nowrap;background:none;border:1px solid var(--line);border-bottom:none;color:var(--muted);border-radius:10px 10px 0 0;padding:10px 16px;font-size:.9rem;font-weight:600;cursor:pointer}
  .tabbar .tab.active{background:var(--card);color:var(--fg);border-color:var(--blue);border-bottom:2px solid var(--card);margin-bottom:-2px}
  /* Badge fuer Anzahl offener Vorgaenge (z.B. "Meine Meldungen & Verlauf"). */
  .tabBadge{display:inline-block;min-width:20px;margin-left:6px;padding:1px 6px;border-radius:999px;
    background:var(--amber);color:#20160a;font-size:.75rem;font-weight:800;text-align:center;vertical-align:middle}
  .tabBadge.red{background:var(--red);color:#fff;animation:badgeBlink .9s ease-in-out infinite}
  @keyframes badgeBlink{0%,100%{opacity:1}50%{opacity:.25}}
  /* Liegen gebliebene Tonnenmeldungen: der ganze Reiter pulsiert, damit es auch dann auffaellt,
     wenn die Dispo gerade auf einem anderen Reiter arbeitet. Gelb ab 30 Min, rot ab 60 Min bzw.
     sobald eine Meldung vom Vortag noch offen ist. Nur der Rahmen/Hintergrund pulsiert - die
     Schrift bleibt durchgehend lesbar. */
  @keyframes tabPulseGelb{0%,100%{background:transparent;box-shadow:none}
    50%{background:rgba(255,145,0,.30);box-shadow:0 0 0 3px rgba(255,145,0,.45)}}
  @keyframes tabPulseRot{0%,100%{background:transparent;box-shadow:none}
    50%{background:rgba(224,49,49,.35);box-shadow:0 0 0 3px rgba(224,49,49,.55)}}
  /* Warnband des Fahrzeugs. Rot pulsiert, gelb nicht - sonst gewoehnt man sich an das
     Blinken und die Sperre geht darin unter. */
  #kfzWarnBand{cursor:pointer;border-radius:12px;padding:10px 12px;font-size:.92rem;
    display:grid;gap:3px;border:1px solid var(--line);background:var(--sunk)}
  #kfzWarnBand.rot{border-color:var(--red);background:rgba(224,49,49,.16);
    animation:kfzBandPuls 1.4s ease-in-out infinite}
  #kfzWarnBand.gelb{border-color:var(--amber);background:rgba(255,145,0,.14)}
  #kfzWarnBand .kfzBandKopf{font-weight:700}
  #kfzWarnBand .kfzBandHin{font-size:.8rem;color:var(--muted)}
  @keyframes kfzBandPuls{0%,100%{background:rgba(224,49,49,.16)}50%{background:rgba(224,49,49,.34)}}
  @media (prefers-reduced-motion:reduce){#kfzWarnBand.rot{animation:none;background:rgba(224,49,49,.30)}}
  .tabbar .tab.tmsGelb{animation:tabPulseGelb 1.2s ease-in-out infinite;color:var(--fg);border-color:var(--amber)}
  .tabbar .tab.tmsRot{animation:tabPulseRot 1s ease-in-out infinite;color:var(--fg);border-color:var(--red)}
  /* Wer Bewegung im Bild nicht vertraegt, bekommt denselben Hinweis statisch. */
  @media (prefers-reduced-motion: reduce){
    .tabbar .tab.tmsGelb{animation:none;background:rgba(255,145,0,.30)}
    .tabbar .tab.tmsRot{animation:none;background:rgba(224,49,49,.35)}
  }
  /* Tabelle fuellt die volle Breite und verteilt die Spalten automatisch (Textspalten
     brechen um, damit nichts ueberlaeuft); auf kleinen Screens scrollt der Wrapper. */
  .dispo table{width:100%;border-collapse:collapse;font-size:.85rem;table-layout:auto;min-width:680px}
  .dispo th,.dispo td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
  /* schmale Zahlenspalten (Arbeit/Pause/Anwes.) nicht umbrechen */
  .dispo td:nth-child(4),.dispo td:nth-child(5),.dispo td:nth-child(6),
  .dispo th:nth-child(4),.dispo th:nth-child(5),.dispo th:nth-child(6){white-space:nowrap}
  .dispo tr.warn td{background:#2a1e0a}
  .dispo .fl{color:#ffcf5c;font-size:.78rem;white-space:normal}
  /* Landing */
  .landing{max-width:480px;margin:7vh auto;padding:16px;display:grid;gap:16px}
  .landing h1{text-align:center;margin:0 0 4px}
  .landing .sub{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:6px}
  .rolecard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;gap:16px;align-items:center;cursor:pointer;transition:filter .1s}
  .rolecard:active{filter:brightness(.9)}
  .rolecard .ic{font-size:2.2rem}
  .rolecard .t{font-size:1.2rem;font-weight:700}
  .rolecard .d{font-size:.82rem;color:var(--muted)}

/* Schichtbeginn-Rueckfrage: zu korrigierende Felder in der Tourenauswahl */
.asgPruefen{outline:2px solid #ffb54a;outline-offset:4px;border-radius:8px}