:root{
  --bg:#0e131a; --bg2:#0a0e14; --bg-glow:#182233; --card:#161d27; --card2:#1c2531;
  --ink:#e7edf5; --muted:#93a1b3; --line:#28323f;
  --brand:#4d8dff; --brand-dark:#3a6fd4;
  --good:#35c07d; --good-bg:rgba(53,192,125,.14);
  --warn:#e6b23a; --warn-bg:rgba(230,178,58,.14);
  --bad:#e5605f; --bad-bg:rgba(229,96,95,.15);
  --free:rgba(53,192,125,.10); --free-b:rgba(53,192,125,.38);
  --booked:rgba(77,141,255,.12); --booked-b:rgba(77,141,255,.45);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:
    radial-gradient(120% 90% at 50% -10%,var(--bg-glow),transparent 55%),var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100%}
.boot{padding:4rem;text-align:center;color:var(--muted)}
button{font-family:inherit;font-size:.95rem;cursor:pointer;border:none;border-radius:9px;
  padding:.6rem 1rem;background:var(--brand);color:#fff;font-weight:600;transition:.15s}
button:hover{background:var(--brand-dark)}
button:disabled{opacity:.45;cursor:not-allowed}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.ghost:hover{background:#212b38;border-color:#3a4757}
button.sec{background:#26313f;color:var(--ink)}
button.sec:hover{background:#2f3c4d}
button.danger{background:var(--bad)}button.danger:hover{background:#c94a49}
button.sm{padding:.35rem .7rem;font-size:.82rem}
input,select,textarea{font-family:inherit;font-size:.95rem;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:9px;background:#0f151d;color:var(--ink);width:100%}
textarea{line-height:1.4}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(77,141,255,.4);border-color:var(--brand)}
input[type=date]{color-scheme:dark}
label{font-size:.82rem;font-weight:600;color:var(--muted);display:block;margin:0 0 .3rem}
a{color:var(--brand)}
.row{display:flex;gap:.8rem;flex-wrap:wrap}
.row>*{flex:1;min-width:0}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none!important}

/* ---- Header ---- */
header{position:sticky;top:0;z-index:20;background:rgba(14,19,26,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.2rem}
header .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.01em}
header .brand .logo{font-size:1.4rem}
header .who{display:flex;align-items:center;gap:.8rem;font-size:.88rem}
header .who .role{background:#212b38;padding:.2rem .6rem;border-radius:20px;color:var(--muted);font-weight:600}

/* ---- Layout ---- */
main{max-width:1080px;margin:0 auto;padding:1.4rem 1.2rem 4rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.2rem 1.3rem;margin-bottom:1.2rem}
.card h2{margin:.1rem 0 1rem;font-size:1.05rem}
.card h2 .sub{font-weight:500;color:var(--muted);font-size:.85rem;margin-left:.4rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}

/* ---- Login ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.auth{width:100%;max-width:430px}
.auth .logo-big{text-align:center;font-size:2.6rem;margin-bottom:.2rem}
.auth h1{text-align:center;margin:0 0 .1rem;font-size:1.5rem}
.auth .tag{text-align:center;color:var(--muted);margin-bottom:1.4rem}
.tabs{display:flex;gap:.3rem;background:#0f151d;padding:.3rem;border-radius:11px;margin-bottom:1.1rem}
.tabs button{flex:1;background:transparent;color:var(--muted);padding:.5rem;font-size:.85rem;border-radius:8px}
.tabs button.active{background:#26313f;color:var(--ink)}
.field{margin-bottom:.8rem}
.err{background:var(--bad-bg);color:var(--bad);padding:.6rem .8rem;border-radius:9px;font-size:.85rem;margin-bottom:.8rem;
  border:1px solid rgba(229,96,95,.3)}
.form-actions{margin-top:.4rem}
.form-actions button{width:100%;padding:.7rem}

/* ---- Slots ---- */
.dateline{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.dateline .day{font-weight:700;font-size:1rem}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.slot{border:1px solid var(--line);border-radius:11px;padding:.75rem .8rem;background:var(--card2);
  display:flex;flex-direction:column;gap:.35rem}
.slot .time{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.02rem}
.slot .dur{font-size:.75rem;color:var(--muted)}
.slot.free{background:var(--free);border-color:var(--free-b)}
.slot.booked{background:var(--booked);border-color:var(--booked-b)}
.slot.blocked,.slot.closed,.slot.past,.slot.toofar,.slot.offered{background:#131a23;color:var(--muted)}
.slot .tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.slot .tag.g{color:var(--good)}.slot .tag.b{color:var(--brand)}.slot .tag.x{color:var(--muted)}
.slot button{margin-top:.2rem;padding:.4rem}

/* ---- Buchungs-Liste ---- */
.blist{display:flex;flex-direction:column;gap:.6rem}
.bitem{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  border:1px solid var(--line);border-radius:11px;padding:.7rem .9rem;background:var(--card2)}
.bitem.warm{background:var(--warn-bg);border-color:rgba(230,178,58,.35)}
.bitem .when{font-weight:700;font-variant-numeric:tabular-nums}
.bitem .meta{font-size:.82rem;color:var(--muted)}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:20px}
.badge.schalt{background:rgba(150,110,220,.2);color:#b79cf0}
.badge.automatik{background:rgba(50,160,220,.2);color:#6fc3f0}
.badge.done{background:var(--good-bg);color:var(--good)}
.badge.booked{background:var(--booked);color:#8fb4ff}
.badge.offer{background:var(--warn-bg);color:var(--warn)}
.pill{background:#212b38;border-radius:20px;padding:.15rem .55rem;font-size:.75rem;color:var(--muted);font-weight:600}

/* ---- Tacho ---- */
.gauge-wrap{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;justify-content:center}
.gauge{text-align:center}
.gauge .val{font-size:1.7rem;font-weight:800;margin-top:-.4rem}
.gauge .cap{color:var(--muted);font-size:.82rem}
.gauge .goal{font-size:.78rem;color:var(--muted)}
.weekbars{display:flex;gap:.5rem;align-items:flex-end;height:90px;margin-top:.4rem}
.weekbars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.25rem;height:100%}
.weekbars .bar{width:70%;background:var(--brand);border-radius:5px 5px 0 0;min-height:3px;transition:height .3s}
.weekbars .bar.today{background:var(--good)}
.weekbars .lbl{font-size:.68rem;color:var(--muted)}

/* ---- Tabellen / Codes ---- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.codechip{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.05em;
  background:#0f151d;padding:.2rem .5rem;border-radius:7px;color:#8fb4ff}

/* ---- Modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(4,7,11,.65);display:flex;align-items:center;
  justify-content:center;padding:1.2rem;z-index:50;backdrop-filter:blur(3px)}
.modal{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:460px;width:100%;
  padding:1.4rem;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h3{margin:0 0 1rem}
.modal .actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem}
.modal .warnbox{background:var(--warn-bg);border:1px solid rgba(230,178,58,.3);color:#f0d089;
  padding:.7rem .9rem;border-radius:10px;font-size:.86rem;margin-bottom:.4rem}

/* ---- Toast ---- */
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:100;
  background:#26313f;color:#fff;padding:.7rem 1.1rem;border-radius:10px;font-size:.9rem;
  box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:90vw;border:1px solid var(--line)}
.toast.err{background:#3a1f22;border-color:rgba(229,96,95,.5);color:#ffb3b2}
.toast.ok{background:#12291f;border-color:rgba(53,192,125,.5);color:#9be9c1}

/* ---- Tab-Nav Fahrlehrer ---- */
.navtabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.navtabs button{background:var(--card);color:var(--muted);border:1px solid var(--line)}
.navtabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.hint{font-size:.82rem;color:var(--muted);margin:.3rem 0 .8rem}
.inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ---- Kennzahl-Kacheln ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem;margin-top:1rem}
.tile{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:.8rem .9rem}
.tile .n{font-size:1.5rem;font-weight:800}
.tile .l{font-size:.76rem;color:var(--muted);margin-top:.1rem}
.tile.good .n{color:var(--good)} .tile.bad .n{color:var(--bad)} .tile.brand .n{color:var(--brand)}

/* ---- Legende ---- */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.35rem;font-size:.8rem}
.legend-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--card2);border:1px solid var(--line);
  border-radius:20px;padding:.15rem .6rem;font-weight:600}
.legend-chip .sw{width:12px;height:12px;border-radius:3px;display:inline-block}

/* ---- Monats-Kalender ---- */
.monthgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.m-head{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);padding:.2rem 0}
.m-cell{min-height:74px;border:1px solid var(--line);border-radius:8px;padding:.3rem .35rem;background:var(--card2);
  cursor:pointer;display:flex;flex-direction:column;gap:.2rem;transition:.12s;overflow:hidden}
.m-cell:hover{border-color:var(--brand);background:#1b2430}
.m-cell.out{opacity:.4}
.m-cell.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.m-cell.off{background:#131a23}
.m-day{font-size:.8rem;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.m-day .cnt{font-size:.66rem;font-weight:700;background:var(--brand);color:#fff;border-radius:20px;padding:0 .4rem;min-width:1.1rem;text-align:center}
.m-tag{font-size:.62rem;color:var(--muted);font-weight:600}
.m-dots{display:flex;flex-wrap:wrap;gap:2px;margin-top:auto}
.m-dot{width:7px;height:7px;border-radius:50%}

/* ---- Wochen-Zeitachse ---- */
.viewtoggle{display:inline-flex;background:#0f151d;border-radius:9px;padding:.2rem;gap:.2rem}
.viewtoggle button{background:transparent;color:var(--muted);padding:.35rem .8rem;font-size:.85rem;border-radius:7px}
.viewtoggle button.active{background:#26313f;color:var(--ink)}
.weekwrap{overflow-x:auto}
.weekgrid{display:grid;grid-template-columns:46px repeat(6,minmax(96px,1fr));min-width:660px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.wk-head{padding:.4rem .3rem;text-align:center;font-size:.78rem;font-weight:700;border-bottom:1px solid var(--line);background:#131a23}
.wk-head.today{background:rgba(77,141,255,.18);color:#8fb4ff}
.wk-head .sub{display:block;font-weight:500;color:var(--muted);font-size:.68rem}
.wk-head .daytag{display:block;font-weight:600;font-size:.64rem;margin-top:.1rem}
.wk-corner{border-bottom:1px solid var(--line);background:#131a23}
.wk-body{position:relative;border-left:1px solid var(--line)}
.wk-body.today{background:rgba(77,141,255,.05)}
.wk-hour{height:42px;border-bottom:1px dashed var(--line)}
.wk-times .wk-hour{position:relative}
.wk-times .wk-hour span{position:absolute;top:-7px;right:.3rem;font-size:.66rem;color:var(--muted)}
.wk-block{position:absolute;left:3px;right:3px;border-radius:6px;padding:.15rem .35rem;font-size:.7rem;
  overflow:hidden;cursor:pointer;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);line-height:1.15}
.wk-block .t{font-weight:800;font-variant-numeric:tabular-nums}
.wk-block.blk{background:repeating-linear-gradient(45deg,#5b4a2a,#5b4a2a 6px,#4d3f24 6px,#4d3f24 12px);cursor:default}
.wk-block.closed{position:absolute;inset:0;background:rgba(10,14,20,.55);cursor:default;border-radius:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.72rem;font-weight:700}

/* ---------- Edge-Menüs (Samsung-Edge-Stil: Griffe links & rechts) ---------- */
.edge-handle{position:fixed;top:50%;transform:translateY(-50%);z-index:30;width:26px;height:74px;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;cursor:pointer;
  border:1px solid var(--line);background:linear-gradient(var(--brand),var(--brand-dark));
  box-shadow:0 2px 10px rgba(0,0,0,.4);opacity:.85;padding:0}
.edge-handle:hover{opacity:1}
.edge-handle.left{left:0;border-left:none;border-radius:0 16px 16px 0}
.edge-handle.right{right:0;border-right:none;border-radius:16px 0 0 16px}
.edge-overlay{position:fixed;inset:0;z-index:39;background:rgba(4,7,11,.5);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s}
.edge-root.open-left .edge-overlay,.edge-root.open-right .edge-overlay{opacity:1;pointer-events:auto}
.edge-panel{position:fixed;top:0;height:100%;width:min(80vw,290px);z-index:41;background:var(--card);
  border:1px solid var(--line);box-shadow:0 0 40px rgba(0,0,0,.5);padding:1rem .8rem;
  display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;transition:transform .22s ease}
.edge-panel .edge-title{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:.2rem .2rem .4rem}
.edge-panel button{background:var(--card2);color:var(--ink);border:1px solid var(--line);
  text-align:left;padding:.85rem .9rem;border-radius:11px;font-size:.95rem;font-weight:600}
.edge-panel button:hover{background:#26313f}
.edge-panel button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.edge-panel .edge-group{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:.9rem .3rem .1rem;opacity:.75}
.edge-panel .edge-group:first-child{margin-top:.2rem}
.edge-panel.left{left:0;transform:translateX(-102%);border-radius:0 16px 16px 0}
.edge-panel.right{right:0;transform:translateX(102%);border-radius:16px 0 0 16px}
.edge-root.open-left .edge-panel.left{transform:translateX(0)}
.edge-root.open-right .edge-panel.right{transform:translateX(0)}
.edge-root.open-left .edge-handle,.edge-root.open-right .edge-handle{opacity:0;pointer-events:none}

/* PWA: schwebender "App installieren"-Button */
.pwa-install{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:60;background:var(--brand);color:#fff;border:none;border-radius:999px;
  padding:.7rem 1.2rem;font-weight:600;font-size:.95rem;width:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer}
.pwa-install:hover{background:var(--brand-dark)}