/* Monitor „Klassisch“ im iPhone-Stil (Chef 11.10.: „ca. 40 % vergrößern, iPhone-Style, Apple iPhone 18 Design, alles“).
 * Gilt NUR, wenn body.klassisch gesetzt ist (Reiter Monitor + Ansicht Klassisch) — N Trans, Leitstelle usw. bleiben wie sie sind.
 * Ohne Neustart änderbar (Versionsstempel ?v= am Link). Größe: --k-zoom. Farben = iOS-Systemfarben, hell und dunkel. */

body.klassisch{
  --k-zoom:1.4;
  --k-grund:#f2f2f7; --k-karte:#fff; --k-karte2:#f9f9fb; --k-tx:#000; --k-tx2:rgba(60,60,67,.6); --k-tx3:rgba(60,60,67,.3);
  --k-trenn:rgba(60,60,67,.18); --k-fuell:rgba(118,118,128,.12); --k-fuell2:rgba(118,118,128,.2);
  --k-blau:#007aff; --k-gruen:#34c759; --k-gruen-tx:#248a3d; --k-rot:#ff3b30; --k-rot-tx:#d70015; --k-orange:#ff9500; --k-orange-tx:#c93400;
  --k-lila:#af52de; --k-gelb:#ffcc00; --k-wahl:#fff;
  --k-schatten:0 1px 2px rgba(0,0,0,.04),0 6px 24px rgba(0,0,0,.06);
  background:var(--k-grund);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
@media (prefers-color-scheme:dark){
  body.klassisch{
    --k-grund:#000; --k-karte:#1c1c1e; --k-karte2:#2c2c2e; --k-tx:#fff; --k-tx2:rgba(235,235,245,.6); --k-tx3:rgba(235,235,245,.3);
    --k-trenn:rgba(84,84,88,.6); --k-fuell:rgba(118,118,128,.24); --k-fuell2:rgba(118,118,128,.36);
    --k-blau:#0a84ff; --k-gruen:#30d158; --k-gruen-tx:#30d158; --k-rot:#ff453a; --k-rot-tx:#ff6961; --k-orange:#ff9f0a; --k-orange-tx:#ffb340;
    --k-lila:#bf5af2; --k-gelb:#ffd60a; --k-wahl:#636366;
    --k-schatten:none;
  }
}

/* Kopfzeile wie eine iOS-Navigationsleiste: durchscheinend, unscharf dahinter, Haarlinie */
body.klassisch .kopf{background:color-mix(in srgb,var(--k-karte) 78%,transparent);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--k-trenn)}
body.klassisch .kopf .lkw{font-weight:700;letter-spacing:-.02em}

/* 40 % größer — als Ganzes, damit Abstände, Bilder und Symbole mitwachsen; Breite so, dass nichts seitlich herausläuft */
/* Chef 11.10.: auf dem breiten Bildschirm (3440 px) lagen die Spalten zu weit auseinander → feste Breite --k-breite, links bündig (Chef: „alles steht in der Mitte“) */
/* Chef 20.10.: „Monitor auf das ganze Display, die Karte soll mit drauf“ → ganze Breite; ist die Karte offen, rückt der Monitor links daneben */
body.klassisch{--k-breite:100vw}
body.klassisch:has(#seite.auf){--k-breite:calc(100vw - var(--karte-b) - 48px)}
body.klassisch main{zoom:var(--k-zoom);max-width:calc(min(100vw - 32px, var(--k-breite)) / var(--k-zoom));margin-left:calc(16px / var(--k-zoom));margin-right:0;padding-top:10px}
body.klassisch main,body.klassisch main button,body.klassisch main select{color:var(--k-tx)}

/* Reiter oben + Ansichtswahl = iOS-Segmentschalter (graue Spur, weiße Kapsel für das Gewählte) */
body.klassisch .reiter{display:inline-flex;gap:2px;padding:2px;background:var(--k-fuell);border-radius:10px;margin:2px 0 14px}
body.klassisch .reiter button{border:0;background:transparent;border-radius:8px;padding:6px 16px;font-weight:600;font-size:.92rem;color:var(--k-tx)}
body.klassisch .reiter button.an{background:var(--k-wahl);color:var(--k-tx);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
body.klassisch .leiste .awahl{border:0;border-radius:10px;padding:2px;gap:2px;background:var(--k-fuell)}
body.klassisch .leiste .awahl button{background:transparent;border:0!important;border-radius:8px;padding:5px 13px;color:var(--k-tx);font-weight:600;font-size:.85rem}
body.klassisch .leiste .awahl button.an{background:var(--k-wahl);color:var(--k-tx);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}

/* Leiste mit Tag, Filter, Legende */
body.klassisch .leiste{gap:10px;margin:0 0 14px}
body.klassisch .leiste > b{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;min-width:130px!important}
body.klassisch .kn{border:0;border-radius:999px;background:var(--k-fuell);color:var(--k-blau);font-weight:600;padding:7px 14px;
  transition:transform .12s ease,background .15s ease}
body.klassisch .kn:active{transform:scale(.96)}
body.klassisch .kn:hover{background:var(--k-fuell2)}
body.klassisch .kn[data-montag="-1"],body.klassisch .kn[data-montag="1"]{width:34px;height:34px;padding:0;display:inline-grid;place-items:center}
body.klassisch .kn.gruen{background:var(--k-gruen);color:#fff}
body.klassisch .kn.gruen:disabled{background:var(--k-fuell);color:var(--k-tx3)}
body.klassisch select#monfilter{appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:var(--k-fuell);
  color:var(--k-tx);font:inherit;font-weight:600;font-size:.88rem;padding:7px 30px 7px 14px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
body.klassisch .legende{color:var(--k-tx2);font-size:.78rem}
body.klassisch main > .klein2{color:var(--k-tx2)}
body.klassisch .hinweisband{border-radius:14px}

/* Karten: weiß, große Rundung, keine Rahmen — Gruppen wie in den iOS-Einstellungen */
body.klassisch .karte{background:var(--k-karte);border:0;border-radius:22px;box-shadow:var(--k-schatten);padding:6px 14px!important;overflow:hidden}
body.klassisch .virtbox{border:0;background:var(--k-karte);outline:1.5px dashed color-mix(in srgb,var(--k-blau) 45%,transparent);outline-offset:-6px}
body.klassisch .virtkopf b{font-size:1.05rem}
body.klassisch .virt{border-radius:999px;border-style:solid;background:color-mix(in srgb,var(--k-blau) 10%,transparent);border-color:transparent;color:var(--k-blau)}

/* Tabelle wie eine iOS-Liste: Haarlinien, eingerückt, ruhige Spaltenköpfe */
body.klassisch .mon{font-size:.95rem;border-collapse:separate;border-spacing:0}
body.klassisch .mon th{color:var(--k-tx2);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  padding:10px 10px 8px;border-bottom:.5px solid var(--k-trenn)}
body.klassisch .mon td{padding:11px 10px;border-bottom:.5px solid var(--k-trenn)}
body.klassisch .mon tr:last-child td{border-bottom:0}
body.klassisch .mon tr.klick:hover td{background:var(--k-karte2)}
body.klassisch .mon tr.frueher td:first-child{box-shadow:inset 3px 0 0 var(--k-orange)}
body.klassisch .mon .t{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
body.klassisch .mon .t .klein2{font-weight:500;color:var(--k-orange-tx)}
body.klassisch .mon .l b{font-weight:600}
body.klassisch .mon .k b{font-weight:600;letter-spacing:-.01em}
body.klassisch .mon .k span,body.klassisch .mon .l span,body.klassisch .klein2{color:var(--k-tx2)}
body.klassisch .mon .zuw{color:#fff}   /* Chef 11.10.: weißes Zeichen auf grüner iOS-Kachel (plantafel.css), sonst grün auf grün */

/* Standort-Köpfe: große, fette Abschnittstitel (iOS „Large Title“ im Kleinen) mit farbigem Punkt */
body.klassisch .mon tr.stkopf td{background:transparent;border-bottom:.5px solid var(--k-trenn);padding:18px 10px 8px;font-size:1.15rem}
body.klassisch .mon tr.stkopf b{font-weight:700;letter-spacing:-.02em}
body.klassisch .mon tr.stkopf .klein2{font-size:.8rem;margin-left:4px}
body.klassisch .stpunkt{width:12px;height:12px}

/* Häkchen: rund wie in iOS-Listen */
body.klassisch .mon input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--k-tx3);background:var(--k-karte);cursor:pointer;display:inline-grid;place-items:center;margin:0;transition:all .15s ease}
body.klassisch .mon input[type=checkbox]:checked{background:var(--k-blau);border-color:var(--k-blau)}
body.klassisch .mon input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}

/* Schilder (Überzeit, FB prüfen, kein LKW …) als Kapseln in iOS-Farben */
body.klassisch .mgrund{border-radius:999px;padding:2px 9px;font-weight:600;font-size:.72rem}
body.klassisch .mgrund.rot{background:color-mix(in srgb,var(--k-rot) 14%,transparent);color:var(--k-rot-tx)}
body.klassisch .mgrund.gelb{background:color-mix(in srgb,var(--k-orange) 16%,transparent);color:var(--k-orange-tx)}
body.klassisch .mgrund.blau{background:color-mix(in srgb,var(--k-blau) 13%,transparent);color:var(--k-blau)}
body.klassisch .mgrund.gruen{background:color-mix(in srgb,var(--k-gruen) 16%,transparent);color:var(--k-gruen-tx)}
body.klassisch button.mgrund.klickbar:hover{background:var(--k-rot);color:#fff}

/* Joker: nur das Container-Bild, kein Lila (Chef 11.10.) */
body.klassisch .mon .kn.joker{background:transparent;border:0;box-shadow:none;padding:2px;border-radius:3px}
body.klassisch .mon .kn.joker:hover{background:transparent;filter:brightness(1.1)}

/* Fahrer-App-Symbole: runde iOS-Knöpfe, Grün wie iOS */
body.klassisch .sym svg{background:var(--k-fuell)}
body.klassisch .sym.gruen svg{background:var(--k-gruen)}
body.klassisch .sym.gelb svg{background:var(--k-orange)}
body.klassisch .sym.rot svg{background:var(--k-rot)}
body.klassisch .sym.live span{color:var(--k-gruen-tx)}

/* Frachtbrief- und Container-Bilder: weiche Rundung, kein Rahmen */
body.klassisch .mini{border:0;border-radius:9px;box-shadow:0 0 0 .5px var(--k-trenn),0 2px 6px rgba(0,0,0,.08)}
body.klassisch .cfoto i{border-radius:6px;background:rgba(0,0,0,.72)}
body.klassisch .fbja{color:var(--k-gruen)}

/* Fahrtbalken und Abgabe-Zeile ruhiger */
body.klassisch .fbspur:before{border-top-color:var(--k-trenn)}
body.klassisch .abgabe{color:var(--k-tx2)}

/* Container · FB in festen Fächern (Chef 11.10.: „nicht eingeräumt“) — Foto | Nummer/Catkin | Frachtbrief ✓, in jeder Zeile gleich breit */
.cfb{display:inline-flex;align-items:center;gap:6px}
.cnr-soll{font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}.cnr-soll small{font-weight:500;opacity:.8}.cnr-falsch{color:#dc2626}
body.klassisch .cfb{display:grid;grid-template-columns:52px 190px 150px;align-items:center;gap:10px}
body.klassisch .cfb-c,body.klassisch .cfb-nr,body.klassisch .cfb-fb{display:flex;align-items:center;min-width:0}
body.klassisch .cfb-c .cfoto{margin:0}
body.klassisch .cfb-c .mini{height:44px;width:44px;object-fit:cover}
body.klassisch .cfb-nr .cnr-ok{color:var(--k-gruen-tx);margin:0;overflow:hidden;text-overflow:ellipsis}
body.klassisch .cfb-nr .cnr-soll{color:var(--k-tx2);overflow:hidden;text-overflow:ellipsis}
body.klassisch .cfb-nr .kn.cnr{background:color-mix(in srgb,var(--k-orange) 16%,transparent);color:var(--k-orange-tx);border:0;border-radius:999px;margin:0}
body.klassisch .cfb-fb .mini{height:44px;width:110px;object-fit:cover}
body.klassisch .cfb-fb .fbja{margin-left:8px}

/* Chef 21.10.: ohne Karte war der Haken neben Container/FB rechts abgeschnitten — der graue Hinweis in „Überzeit“
   („Gestellung am Terminal (…)“) brach nicht um und machte die Tabelle breiter als den Rahmen. Mit Karte bricht er schon um (plantafel.css). */
body.klassisch .mon .uzw.grau{white-space:normal}