/* ================= M.A.G.I.C. – KI-HUD (Film-Optik), überschreibt die Grundgestaltung ================= */
html { background: var(--bg) !important; }
body {
  font-family: var(--ui); font-weight: 500; font-size: 16.5px; letter-spacing: .01em;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(70,222,204,.16), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 115%, rgba(70,222,204,.08), transparent 60%),
    linear-gradient(rgba(70,222,204,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,222,204,.035) 1px, transparent 1px);
  background-size: auto, auto, 30px 30px, 30px 30px;
  background-attachment: fixed;
}
/* Bildschirm-Zeilen und Randabdunklung */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); opacity: .35; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 49;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
::selection { background: rgba(70,222,204,.35); }

/* Kopf */
header { border-bottom: 1px solid var(--linie); margin-bottom: 6px; position: relative; }
header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 90px; height: 2px; background: var(--gold); box-shadow: var(--glow); }
.marke { font-family: var(--hud); font-weight: 700; font-size: 15px; letter-spacing: .32em; color: var(--hell); text-shadow: var(--glow-text); }
.marke img { width: 34px; height: 34px; box-shadow: 0 0 16px rgba(70,222,204,.6), 0 0 0 1px rgba(70,222,204,.5); }
.uhr { font-family: var(--hud); font-size: 21px; font-weight: 600; letter-spacing: .06em; color: #fff; text-shadow: var(--glow-text); }
.datum { font-family: var(--hud); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.modus { border-color: var(--linie2); color: var(--gold); background: rgba(70,222,204,.06); box-shadow: inset 0 0 10px rgba(70,222,204,.12); }

/* Überschriften: technische Etiketten mit Leitlinie */
h2 { font-family: var(--hud); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; color: var(--gold);
  display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; text-shadow: 0 0 8px rgba(70,222,204,.4); }
h2::before { content: ""; width: 6px; height: 6px; background: var(--gold); box-shadow: var(--glow); transform: rotate(45deg); flex: none; }
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--linie2), transparent); }
h2 b { color: #fff; }
h2.rot { color: var(--rot); text-shadow: 0 0 8px rgba(255,90,110,.5); }
h2.rot::before { background: var(--rot); box-shadow: 0 0 10px var(--rot); }

/* Panels mit HUD-Ecken */
.tag, .block, .kz, .wk, .tgr, .ma-karte, .ak-karte, .karte-abfahrt, .zeile-info, .sb-block:not(.sb-gespraech), .blatt-innen, .umschalter {
  position: relative; background: linear-gradient(180deg, rgba(8,38,40,.78), rgba(3,18,20,.86));
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(70,222,204,.05), inset 0 0 26px rgba(70,222,204,.05), 0 0 18px rgba(0,0,0,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tag::before, .block::before, .kz::before, .wk::before, .tgr::before, .ma-karte::before, .ak-karte::before, .karte-abfahrt::before, .zeile-info::before, .sb-block:not(.sb-gespraech)::before, .blatt-innen::before,
.tag::after, .block::after, .kz::after, .wk::after, .tgr::after, .ma-karte::after, .ak-karte::after, .karte-abfahrt::after, .zeile-info::after, .sb-block:not(.sb-gespraech)::after, .blatt-innen::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; z-index: 3; border: 2px solid var(--gold); filter: drop-shadow(0 0 4px rgba(70,222,204,.8)); }
.tag::before, .block::before, .kz::before, .wk::before, .tgr::before, .ma-karte::before, .ak-karte::before, .karte-abfahrt::before, .zeile-info::before, .sb-block:not(.sb-gespraech)::before, .blatt-innen::before {
  top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.tag::after, .block::after, .kz::after, .wk::after, .tgr::after, .ma-karte::after, .ak-karte::after, .karte-abfahrt::after, .zeile-info::after, .sb-block:not(.sb-gespraech)::after, .blatt-innen::after {
  bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.tag, .wk, .tgr { overflow: visible; }
.zeile, .pj-zeile, .akt-zeile, .sys-zeile, .liste-frist, .frist-chip { border-top-color: var(--linie) !important; }

/* Zahlen und große Werte */
.karte-abfahrt { padding: 18px 18px 16px; background: linear-gradient(135deg, rgba(70,222,204,.16), rgba(4,22,24,.9) 60%); border-color: var(--linie2); }
.karte-abfahrt .klein, .blatt-art, .sb-block h3 { font-family: var(--hud); font-size: 10px; letter-spacing: .2em; color: var(--gold); }
.karte-abfahrt .gross { font-family: var(--hud); font-size: 40px; font-weight: 700; color: #fff; text-shadow: var(--glow-text); letter-spacing: .02em; }
.countdown { font-family: var(--hud); font-size: 11px; letter-spacing: .12em; background: rgba(70,222,204,.14); border: 1px solid var(--linie2); color: var(--hell); }
.kz b { font-family: var(--hud); font-size: 21px; font-weight: 700; color: #fff; text-shadow: var(--glow-text); letter-spacing: .01em; }
.kz span { font-family: var(--hud); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.kz.gruen b { color: var(--gruen); text-shadow: 0 0 10px rgba(62,240,160,.6); }
.kz.akzent b { color: var(--hell); }
.zeit, .tg-zeit, .wk-h, .tg-h, .mt-n, .rest, .pj-wert { font-family: var(--hud); letter-spacing: .04em; }
.zeit { font-size: 13px; color: var(--hell); }
.titel, .pj-haupt b, .ma-text b, .ak-kopf b { font-weight: 700; letter-spacing: .02em; }
.kal-titel, .blatt-titel, .sb-kopf b, .wz-leiste b { font-family: var(--hud); font-weight: 700; font-size: 17px; letter-spacing: .08em; color: #fff; text-shadow: var(--glow-text); text-transform: uppercase; }
.kal-titel span { font-family: var(--ui); text-transform: none; letter-spacing: .02em; color: var(--gold); text-shadow: none; }
.blatt-titel { text-transform: none; font-size: 19px; }

/* Knöpfe */
.knopf { font-family: var(--hud); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: 2px;
  background: linear-gradient(180deg, #4fe6d4, #1fa596); color: var(--akzent-kontrast); box-shadow: 0 0 16px rgba(70,222,204,.45); border: 1px solid #8ff5ea; }
.knopf.zweit { background: rgba(70,222,204,.06); color: var(--hell); border: 1px solid var(--linie2); box-shadow: inset 0 0 12px rgba(70,222,204,.1); }
.knopf.loeschen { background: rgba(255,90,110,.1); color: var(--rot); border-color: rgba(255,90,110,.5); box-shadow: 0 0 12px rgba(255,90,110,.2); }
.pfeil, .heute-knopf, .erledigt, .chip-frage, .link-knopf { font-family: var(--hud); letter-spacing: .1em; }
.pfeil, .heute-knopf { background: rgba(70,222,204,.06); border-color: var(--linie2); color: var(--hell); border-radius: 2px; }
.heute-knopf, .erledigt, .chip-frage { font-size: 10px; text-transform: uppercase; }
.chip-frage { background: rgba(70,222,204,.05); border-color: var(--linie2); color: var(--text); }
.chip-frage.an { background: rgba(70,222,204,.18); color: #fff; box-shadow: var(--glow); }
.link-knopf { font-size: 11px; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 8px rgba(70,222,204,.5); }

/* Umschalter als Film-Reiter */
.umschalter { padding: 4px; gap: 4px; }
.umschalter button { font-family: var(--hud); font-size: 9.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--leise);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); border-radius: 0; }
.umschalter button[aria-pressed=true] { background: linear-gradient(180deg, rgba(70,222,204,.55), rgba(31,165,150,.55)); color: #fff; box-shadow: none; text-shadow: 0 0 8px rgba(255,255,255,.6); }

/* Untere Leiste */
nav { background: linear-gradient(180deg, rgba(4,20,22,.82), rgba(2,10,11,.96)) !important; border-top: 1px solid var(--linie2); box-shadow: 0 -6px 24px rgba(70,222,204,.12); }
nav::before { content: ""; position: absolute; top: -1px; left: 50%; width: 140px; height: 2px; transform: translateX(-50%); background: var(--gold); box-shadow: var(--glow); }
nav button { font-family: var(--hud); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; position: relative; }
nav button[aria-current=page] { color: var(--hell); text-shadow: var(--glow-text); }
nav button[aria-current=page] svg { filter: drop-shadow(0 0 6px rgba(70,222,204,.9)); }
nav button[aria-current=page]::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--gold); box-shadow: var(--glow); }

/* Termine, Fahrten, Fristen */
.frist-chip, .liste-frist.ueber { background: linear-gradient(90deg, rgba(255,90,110,.16), rgba(255,90,110,.04)); }
.marker { font-family: var(--hud); font-size: 9px; letter-spacing: .16em; color: var(--rot); text-shadow: 0 0 8px rgba(255,90,110,.7); }
.frist-chip .titel { color: #ffd6dc; }
.zeile.fahrt .titel, .zeile.fahrt .zeit { color: var(--leise); }
.blk, .tg-blk { background: linear-gradient(90deg, rgba(70,222,204,.28), rgba(70,222,204,.10)); border-left-color: var(--hell); box-shadow: 0 0 12px rgba(70,222,204,.18); }
.blk.fahrt, .tg-blk.fahrt { background: repeating-linear-gradient(135deg, rgba(70,222,204,.10) 0 5px, rgba(70,222,204,.03) 5px 10px); border-left-color: var(--leise); box-shadow: none; }
.wk-tag.heute b, .mt.heute .mt-n { background: var(--gold); color: var(--akzent-kontrast); box-shadow: var(--glow); }
.mt { background: rgba(6,30,32,.6); border-color: var(--linie); }
.mt.gew { box-shadow: 0 0 0 1px var(--gold) inset, var(--glow); }
.mt-b { background: rgba(70,222,204,.22); color: var(--hell); }
.jetzt-linie, .tg-jetzt { background: var(--rot); box-shadow: 0 0 8px var(--rot); }
.rest.knapp { color: var(--rot); text-shadow: 0 0 8px rgba(255,90,110,.6); } .rest.bald { color: var(--amber); } .rest.locker { color: var(--gruen); }

/* Büro */
.pj-status { font-family: var(--hud); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.balken { background: rgba(70,222,204,.12); }
.balken > i { background: linear-gradient(90deg, #1fa596, var(--gruen)); box-shadow: 0 0 8px var(--gruen); }
.led.an { box-shadow: 0 0 8px var(--gruen), 0 0 2px #fff inset; animation: atmen 2.4s ease-in-out infinite; }
.ak-karte .tg { font-family: var(--hud); font-size: 9px; background: none; backdrop-filter: none; box-shadow: none; }
.ak-karte .tg::before, .ak-karte .tg::after { display: none; }
.ak-karte .tg.hoch { color: var(--gruen); border-color: var(--gruen); box-shadow: 0 0 8px rgba(62,240,160,.3); }
.zaehler { font-family: var(--hud); border-radius: 2px; box-shadow: 0 0 10px var(--rot); }

/* Mitarbeiter */
.ma-av { box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 0 14px color-mix(in srgb, var(--ma) 70%, transparent); }
.ma-text small { font-family: var(--hud); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.msg.ich { background: linear-gradient(180deg, #4fe6d4, #1fa596); color: var(--akzent-kontrast); box-shadow: 0 0 14px rgba(70,222,204,.35); }
.msg.er { background: rgba(6,30,32,.85); border-color: var(--linie2); }
.sb-eingabe { background: rgba(2,12,13,.95); border-top-color: var(--linie2); }
.steckbrief, .werkzeug { background-color: var(--bg); background-image: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(70,222,204,.14), transparent 60%); }

/* Formulare */
input[type=text], .fz input, .fz select, .fz textarea, .sb-zeile textarea, .ak-fuss select {
  background: rgba(1,10,11,.85) !important; border: 1px solid var(--linie2) !important; color: var(--hell) !important; font-family: var(--ui); font-weight: 600; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--glow); border-color: var(--gold) !important; }
.fz span { font-family: var(--hud); font-size: 9px; letter-spacing: .16em; color: var(--gold); }

/* Detailfenster */
.blatt { background: rgba(0,6,8,.72); backdrop-filter: blur(3px); }
.blatt-innen { border-bottom: 0; border-radius: 4px 4px 0 0; }
.blatt-griff { background: var(--gold); box-shadow: var(--glow); }

/* Magic: HUD rund um die Kugel */
.orb-status { font-family: var(--hud); letter-spacing: .4em; font-size: 11px; color: var(--hell); text-shadow: var(--glow-text); }
.orb-hud { position: absolute; font-family: var(--hud); font-size: 9px; letter-spacing: .18em; color: var(--gold); opacity: .85; pointer-events: none; text-transform: uppercase; line-height: 1.6; }
.orb-hud b { display: block; color: #fff; font-size: 13px; letter-spacing: .08em; text-shadow: var(--glow-text); }
.orb-hud.lo { top: 14px; left: 16px; } .orb-hud.ro { top: 14px; right: 16px; text-align: right; }
.orb-hud.lu { bottom: 44px; left: 16px; } .orb-hud.ru { bottom: 44px; right: 16px; text-align: right; }
.orb-hud.lo::before, .orb-hud.ro::before { content: ""; display: block; width: 46px; height: 2px; background: var(--gold); box-shadow: var(--glow); margin-bottom: 6px; }
.orb-hud.ro::before { margin-left: auto; }
.orb-hud i { font-style: normal; color: var(--gruen); }
.zeile-info b { color: var(--hell); font-family: var(--hud); letter-spacing: .06em; }
.hinweis-klein { font-family: var(--hud); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; }

/* Bewegung: Einblenden beim Ansichtswechsel, atmende Lichter, Abtastlinie */
@keyframes hudEin { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes atmen { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes scan { from { transform: translateY(-120px); } to { transform: translateY(100vh); } }
main > section:not(.versteckt) > *, #buero-inhalt > *, #team-liste > * { animation: hudEin .45s cubic-bezier(.2,.7,.2,1) both; }
main > section:not(.versteckt) > *:nth-child(2), #buero-inhalt > *:nth-child(2), #team-liste > *:nth-child(2) { animation-delay: .05s; }
main > section:not(.versteckt) > *:nth-child(3), #buero-inhalt > *:nth-child(3), #team-liste > *:nth-child(3) { animation-delay: .1s; }
main > section:not(.versteckt) > *:nth-child(4), #buero-inhalt > *:nth-child(4), #team-liste > *:nth-child(4) { animation-delay: .15s; }
main > section:not(.versteckt) > *:nth-child(n+5), #buero-inhalt > *:nth-child(n+5), #team-liste > *:nth-child(n+5) { animation-delay: .2s; }
.scanlinie { position: fixed; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; z-index: 48;
  background: linear-gradient(180deg, transparent, rgba(70,222,204,.06) 70%, rgba(70,222,204,.16) 99%, transparent); animation: scan 8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  main > section > *, #buero-inhalt > *, #team-liste > * { animation: none !important; }
  .led.an { animation: none; } .scanlinie { display: none; }
}

/* Fünf Büro-Reiter passen auch auf schmale Handys */
.umschalter.fuenf { gap: 2px; padding: 3px; }
.umschalter.fuenf button { font-size: 7.6px !important; letter-spacing: .04em; padding: 9px 0; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }

/* ---------- Büro/Privat, Konflikte, Wetter, Erinnerungen ---------- */
:root { --privat: #c79bff; --privat-rgb: 199,155,255; }
.privat-tag, .buero-tag { display: inline-block; font-family: var(--hud); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 2px; vertical-align: 2px; border: 1px solid; }
.privat-tag { color: var(--privat); border-color: rgba(var(--privat-rgb),.6); box-shadow: 0 0 8px rgba(var(--privat-rgb),.25); }
.buero-tag { color: var(--gold); border-color: var(--linie2); }
.zeile.privat { box-shadow: inset 3px 0 0 var(--privat); }
.blk.privat, .tg-blk.privat { border-left-color: var(--privat); background: linear-gradient(90deg, rgba(var(--privat-rgb),.28), rgba(var(--privat-rgb),.08)); box-shadow: 0 0 12px rgba(var(--privat-rgb),.18); }
.mt-b.privat { background: rgba(var(--privat-rgb),.25); color: #ecdcff; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 2px; }
.konflikt-tag, .wetter-tag { font-family: var(--hud); font-size: 9px; letter-spacing: .08em; padding: 2px 6px; border-radius: 2px; }
.konflikt-tag { color: #fff; background: rgba(255,90,110,.35); border: 1px solid var(--rot); box-shadow: 0 0 8px rgba(255,90,110,.5); text-transform: uppercase; animation: atmen 1.8s ease-in-out infinite; }
.wetter-tag { color: var(--hell); background: rgba(70,222,204,.08); border: 1px solid var(--linie); }
.zeile.erinnerung .titel { display: flex; align-items: center; gap: 6px; color: var(--amber); }
.tg-blk.erinnerung { border-left-color: var(--amber); background: rgba(255,191,77,.14); }
.kat-schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.kat-schalter button { font-family: var(--hud); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 10px; border-radius: 2px;
  background: rgba(70,222,204,.05); border: 1px solid var(--linie2); color: var(--leise); cursor: pointer; }
.kat-schalter button[aria-pressed=true] { color: #fff; background: rgba(70,222,204,.25); box-shadow: var(--glow); }
.kat-schalter button[data-kat=privat][aria-pressed=true] { background: rgba(var(--privat-rgb),.3); border-color: var(--privat); box-shadow: 0 0 12px rgba(var(--privat-rgb),.4); }

/* ---------- Aufgaben: Listen und Erinnerungen ---------- */
.umschalter.drei { grid-template-columns: repeat(3, 1fr); }
.liste-block { padding: 10px 12px 12px; }
.liste-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.punkt { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 8px 2px; border-top: 1px solid var(--linie); font-size: 16px; cursor: pointer; }
.punkt:first-of-type { border-top: 0; }
.punkt input { appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--gold); border-radius: 2px; margin: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 6px rgba(70,222,204,.3); }
.punkt input:checked { background: var(--gold); }
.punkt input:checked::after { content: "✓"; color: var(--akzent-kontrast); font-size: 14px; font-weight: 700; line-height: 1; }
.punkt.fertig span { color: var(--leise); text-decoration: line-through; }
.punkt-neu { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.punkt-neu .knopf { margin: 0; padding: 10px 14px; }
.zaehler.neutral { background: rgba(70,222,204,.25); box-shadow: none; color: #fff; }
.fz-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fz input[type=date], .fz input[type=time] { color-scheme: dark; }
.kat-wahl { display: flex; gap: 18px; font-family: var(--hud); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--hell); }
.kat-wahl input { accent-color: var(--gold); }
.er-datum { font-family: var(--hud); font-size: 9px; letter-spacing: .12em; color: var(--leise); padding: 0 12px 8px 86px; text-transform: uppercase; }

/* ---------- Wissen, Zeiterfassung, Briefing ---------- */
.fg-text { width: 100%; min-height: 55vh; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--hell); background: rgba(1,10,11,.9);
  border: 1px solid var(--linie2); border-radius: 2px; padding: 10px; margin-top: 8px; resize: vertical; }
.g-zeile .titel { font-weight: 600; }
.zeit-block { margin-top: 14px; }
.zeit-summe { display: flex; align-items: baseline; gap: 12px; margin: 6px 0; }
.zeit-summe b { font-family: var(--hud); font-size: 26px; color: #fff; text-shadow: var(--glow-text); }
.zeit-summe span { color: var(--leise); font-size: 14px; }
.timer-zeile { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-color: rgba(62,240,160,.5); }
.timer-zeile .knopf { margin: 0; padding: 8px 12px; }
.briefing-knopf { display: block; margin: 10px auto 0; padding: 10px 22px; }

/* Werkzeuge (Kalkulation, Vergabe) liegen über Scanlines und Randabdunklung */
.werkzeug { z-index: 60; }