/* ATLAS Schreibtisch – Aussehen wie die Kanzlei: Kopf mit Uhr, links die Fächer, rechts der Arbeitsbereich */
:root{
  --navy:#1B3A68;--kopf:#16314F;--rot:#C1272D;--grund:#F4F6F9;--flaeche:#FFFFFF;--flaeche-2:#F8FAFD;--linie:#E2E8F0;--linie-2:#CBD5E1;
  --tinte:#1A2330;--weich:#5A6B7D;--leise:#8496A8;--blau:#1B6AC9;--blau-hg:#EAF2FB;--gut:#2E9E5B;--gut-hg:#E8F6ED;--warn:#B76E00;--warn-hg:#FDF3E3;
  --krit:#C1272D;--krit-hg:#FBEAEA;--grau-hg:#EEF2F6;--schatten:rgba(16,32,55,.08);--titel:#1B3A68}
:root[data-theme="dark"]{--navy:#2D5A96;--kopf:#16314F;--grund:#0B1320;--flaeche:#131E2D;--flaeche-2:#182536;--linie:#253447;--linie-2:#34485F;
  --tinte:#E4EBF3;--weich:#A7B6C7;--leise:#8C9CAF;--blau:#7DB3F0;--blau-hg:#15304F;--gut:#5BCB95;--gut-hg:#10301F;--warn:#F2B866;--warn-hg:#37270D;
  --krit:#FF8A8F;--krit-hg:#3A1618;--grau-hg:#1C2939;--schatten:rgba(0,0,0,.4);--titel:#E4EBF3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--navy:#2D5A96;--kopf:#16314F;--grund:#0B1320;--flaeche:#131E2D;--flaeche-2:#182536;--linie:#253447;--linie-2:#34485F;
  --tinte:#E4EBF3;--weich:#A7B6C7;--leise:#8C9CAF;--blau:#7DB3F0;--blau-hg:#15304F;--gut:#5BCB95;--gut-hg:#10301F;--warn:#F2B866;--warn-hg:#37270D;
  --krit:#FF8A8F;--krit-hg:#3A1618;--grau-hg:#1C2939;--schatten:rgba(0,0,0,.4);--titel:#E4EBF3}}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--tinte);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
button{font:inherit;color:inherit}

/* Kopf wie in der Kanzlei: Logo links, Mitte Uhrzeit / Datum / Bereich, rechts Tag-Nacht und Person */
.kopf{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 24px;background:var(--kopf);color:#fff;border-bottom:4px solid var(--rot)}
.kopf-links{display:flex;align-items:center;gap:14px}.kopf-links img{width:64px;height:64px}
.kopf-links b{font-size:22px;letter-spacing:.02em;display:block}.kopf-links span{font-size:13px;opacity:.8}
.kopf-mitte{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.uhr{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.05}
.datum{font-size:15px;opacity:.85;margin-bottom:4px}
.bereich{font-size:34px;font-weight:700;line-height:1.1}
.kopf-rechts{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.ich{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:5px 14px 5px 5px}
.ich i{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--kopf);display:grid;place-items:center;font-style:normal;font-weight:700}
.tn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 12px;cursor:pointer;color:#fff}

/* Aufbau: links die Fächer, rechts der Arbeitsbereich */
.rahmen{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;padding:18px 24px;align-items:start}
.faecher{position:sticky;top:130px;background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:10px;max-height:calc(100vh - 150px);overflow:auto}
.f-gruppe{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);padding:12px 10px 4px}
.fach{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:17px}
.fach:hover{background:var(--grau-hg)}.fach.an{background:var(--blau-hg);color:var(--blau);font-weight:700}
.fach .ic{width:26px;text-align:center;font-size:19px}.fach .nm{flex:1}
.fach .n{font-size:13px;font-weight:700;min-width:24px;text-align:center;padding:1px 7px;border-radius:99px;background:var(--grau-hg);color:var(--weich)}
.fach .n.rot{background:var(--krit-hg);color:var(--krit)}.fach .n.gelb{background:var(--warn-hg);color:var(--warn)}
.fach.bald{color:var(--leise)}.fach.bald .n{background:none;font-weight:500;font-size:12px}

.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:16px 18px;box-shadow:0 1px 3px var(--schatten)}
h1{font-size:28px;margin:0 0 4px;color:var(--titel)}h2{font-size:19px;margin:0 0 10px;color:var(--titel)}
.leise{color:var(--weich)}.klein{font-size:14px}
.oben{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.knopf{border:1px solid var(--linie-2);background:var(--flaeche-2);border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:600;height:42px}
.knopf.haupt{background:var(--navy);border-color:var(--navy);color:#fff}
.reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.zahl{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:12px 16px}
.zahl b{display:block;font-size:30px;line-height:1.1}.zahl span{font-size:14px;color:var(--weich)}
.zahl.rot b{color:var(--krit)}.zahl.gelb b{color:var(--warn)}

.zwei{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.spalte{display:grid;gap:16px}
.tun{display:grid}
.tun-z{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--linie);cursor:pointer}
.tun-z:last-child{border-bottom:0}.tun-z:hover{background:var(--flaeche-2)}
.chip{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--grau-hg);color:var(--weich);white-space:nowrap}
.chip.kanzlei{background:var(--blau-hg);color:var(--blau)}.chip.mpg{background:var(--gut-hg);color:var(--gut)}.chip.lager{background:var(--warn-hg);color:var(--warn)}.chip.finanzen{background:var(--gut-hg);color:var(--gut)}
.chip.personal{background:#F1E9FB;color:#7444B8}.chip.foerderer{background:#E7F6F8;color:#167E8C}
:root[data-theme="dark"] .chip.personal{background:#2B1F3D;color:#C4A5F0}:root[data-theme="dark"] .chip.foerderer{background:#0F2E33;color:#7DD3DE}
.tun-z .was b{display:block}.tun-z .was span{font-size:14px;color:var(--weich)}
.faellig{font-size:14px;font-weight:600;white-space:nowrap}.faellig.rot{color:var(--krit)}.faellig.gelb{color:var(--warn)}
.notiz{width:100%;min-height:110px;border:1px solid var(--linie-2);border-radius:8px;padding:10px;background:var(--flaeche-2);color:var(--tinte);font:inherit;resize:vertical}
.aufg{display:flex;gap:10px;align-items:flex-start;padding:6px 0}.aufg input{margin-top:4px;width:18px;height:18px}
.msg{padding:8px 0;border-bottom:1px solid var(--linie)}.msg:last-child{border-bottom:0}.msg b{font-size:15px}.msg p{margin:2px 0 0;font-size:14px;color:var(--weich)}

.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:16px}
.kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:14px 16px;cursor:pointer;text-align:left;display:grid;gap:6px}
.kachel:hover{border-color:var(--blau)}
.kachel .k1{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700}.kachel .k1 .ic{font-size:22px}
.kachel .k2{font-size:14px;color:var(--weich)}
.kachel.bald{border-style:dashed;opacity:.7}
.status{font-size:12.5px;font-weight:700}.status.lauf{color:var(--gut)}.status.bald{color:var(--leise)}

.fach-ansicht{display:grid;gap:16px}
.fenster{border:1px solid var(--linie);border-radius:12px;overflow:hidden;background:var(--flaeche)}
.fenster-leiste{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--flaeche-2);border-bottom:1px solid var(--linie);font-size:14px;color:var(--weich)}
.fenster-inhalt{padding:40px 24px;text-align:center;color:var(--weich);min-height:320px;display:grid;place-content:center;gap:10px}
.fenster-inhalt .gross{font-size:56px}
.plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan div{border:1px solid var(--linie);border-radius:10px;padding:12px;background:var(--flaeche-2);font-size:14.5px}.plan b{display:block;margin-bottom:4px}

@media (max-width:1100px){.zwei{grid-template-columns:1fr}.zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.rahmen{grid-template-columns:1fr;padding:12px}.faecher{position:static;max-height:none}.kopf{grid-template-columns:auto 1fr;padding:10px 16px}.kopf-links span,.kopf-links b{display:none}.kopf-rechts{display:none}.kopf-links img{width:44px;height:44px}.bereich{font-size:24px}.uhr{font-size:22px}.plan{grid-template-columns:1fr}}
/* Anmeldung: einmal am Schreibtisch, alle Fächer darunter */
.anmeldung{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:var(--kopf)}
.anmeldung[hidden]{display:none}
.anm-karte{width:min(440px,100%);background:var(--flaeche);color:var(--tinte);border-radius:16px;padding:32px 28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);border-top:5px solid var(--rot)}
.anm-karte img{width:96px;height:96px}.anm-karte h1{margin:8px 0 2px;font-size:26px;color:var(--titel)}
.anm-karte .leise{color:var(--weich);font-size:14px}
.anm-knopf{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:22px;padding:14px;border-radius:10px;border:0;background:var(--navy);color:#fff;font-weight:600;font-size:17px;cursor:pointer}
.anm-knopf i{display:grid;grid-template-columns:9px 9px;gap:2px}.anm-knopf i b{width:9px;height:9px;background:#F25022}.anm-knopf i b:nth-child(2){background:#7FBA00}.anm-knopf i b:nth-child(3){background:#00A4EF}.anm-knopf i b:nth-child(4){background:#FFB900}
.anm-faecher{margin-top:22px;padding-top:16px;border-top:1px solid var(--linie);font-size:13px;color:var(--weich);line-height:1.7}
.anm-fehler{margin:14px 0 0;color:var(--krit);font-size:14.5px}
.anm-ab{margin-top:12px;border:0;background:none;color:var(--blau);cursor:pointer;font-size:14px;text-decoration:underline}

/* Bedienelemente */
.knopf:disabled{opacity:.5;cursor:default}
.knopf.klein{height:32px;padding:4px 10px;font-size:14px}
.eingabe{border:1px solid var(--linie-2);border-radius:8px;padding:8px 10px;background:var(--flaeche-2);color:var(--tinte);font:inherit;min-width:0;height:42px}
textarea.eingabe{height:auto;min-height:64px;resize:vertical;width:100%}
.zeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.zeile .eingabe.breit{flex:1 1 180px}
.leer{color:var(--leise);font-size:14.5px;padding:10px 0}
.aufg{border-bottom:1px solid var(--linie)}.aufg:last-of-type{border-bottom:0}
.aufg .was{flex:1}.aufg .wann{font-size:13px;color:var(--weich);white-space:nowrap}.aufg .wann.rot{color:var(--krit);font-weight:700}.aufg .wann.gelb{color:var(--warn);font-weight:700}
.weg{border:0;background:none;color:var(--leise);cursor:pointer;font-size:15px;padding:2px 6px;border-radius:6px}.weg:hover{background:var(--krit-hg);color:var(--krit)}
.msg{cursor:default}.msg.neu{background:var(--blau-hg);margin:0 -8px;padding:8px;border-radius:8px;cursor:pointer}
.msg .kopfz{display:flex;justify-content:space-between;gap:8px}.msg .kopfz span{font-size:12.5px;color:var(--leise);white-space:nowrap}
.speicher{font-size:12.5px;color:var(--leise);text-align:right;margin-top:4px;min-height:16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--kopf);color:#fff;padding:10px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:15px}
.fenster-inhalt .knopf{justify-self:center;margin-top:8px;height:auto;padding:12px 20px;text-decoration:none}
a.knopf{display:inline-flex;align-items:center;color:inherit;text-decoration:none}.ich span,.tn{white-space:nowrap}a.knopf.haupt{color:#fff}
@media (max-width:860px){.kopf-rechts{display:flex}.kopf-rechts .ich span,#tn{display:none}}

/* Outlook am Schreibtisch: Ordner, Liste links, Mail rechts; Kontakte; Kalender; Schreibfenster */
.fehler{color:var(--krit);font-size:14.5px}
.link{border:0;background:none;color:var(--blau);cursor:pointer;padding:0;text-decoration:underline}
.knopf.gefahr{color:var(--krit)}
.chip.warn{background:var(--warn-hg);color:var(--warn)}
.pf-ordner{margin-bottom:12px}
.pf-layout{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:14px;align-items:start}
.pf-liste{padding:10px;display:grid;gap:2px;max-height:calc(100vh - 260px);overflow:auto}
.pf-liste .eingabe{width:100%;margin-bottom:6px}
.pf-zeile{display:grid;gap:1px;text-align:left;border:0;border-left:4px solid transparent;background:none;padding:8px 10px;border-radius:6px;cursor:pointer;width:100%}
.pf-zeile:hover{background:var(--grau-hg)}.pf-zeile.auf{background:var(--blau-hg)}
.pf-zeile b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pf-zeile.ungelesen b{font-weight:700}
.pf-zeile .z2{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pf-zeile .z3{font-size:12.5px;color:var(--leise)}
.pf-zeile.pf-neu{border-left-color:var(--blau)}.pf-zeile.pf-alt{border-left-color:var(--krit)}
.pf-detail{display:grid;gap:10px}.pf-detail h2{margin:0}
.pf-kopf{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0;font-size:14.5px}.pf-kopf dt{color:var(--leise)}.pf-kopf dd{margin:0;word-break:break-word}
.pf-inhalt{width:100%;min-height:60vh;border:1px solid var(--linie);border-radius:8px;background:#fff}
.nur-handy{display:none}
.pf-kontakt{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--linie)}
.pf-kname{display:grid}.pf-kwege{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.adr-vorschlag{position:absolute;z-index:70;background:var(--flaeche);border:1px solid var(--linie-2);border-radius:8px;box-shadow:0 8px 24px var(--schatten);max-width:520px;width:100%;display:grid;overflow:hidden}
.adr-vorschlag button{border:0;background:none;text-align:left;padding:8px 12px;cursor:pointer;display:grid}.adr-vorschlag button.an,.adr-vorschlag button:hover{background:var(--blau-hg)}
.adr-vorschlag span{font-size:13.5px;color:var(--weich)}.adr-vorschlag small{font-size:12px;color:var(--leise)}
.kal{padding:6px 18px}
.kal-tag{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--linie)}.kal-tag:last-child{border-bottom:0}
.kal-tag.we .kal-datum{color:var(--leise)}.kal-tag.heute .kal-datum{color:var(--blau);font-weight:700}
.kal-eintraege{display:grid;gap:4px}.kal-e{font-size:15px}.kal-zeit{display:inline-block;min-width:96px;font-size:13px;color:var(--weich);font-variant-numeric:tabular-nums}
.kal-e.aufgabe .kal-zeit{color:var(--warn);font-weight:700}
dialog#dialog{border:0;border-radius:14px;padding:0;width:min(640px,calc(100vw - 32px));background:var(--flaeche);color:var(--tinte);box-shadow:0 24px 60px rgba(0,0,0,.35)}
dialog#dialog::backdrop{background:rgba(10,20,35,.5)}
.dlg{padding:20px 22px;display:grid;gap:10px;position:relative}.dlg h2{margin:0}
.feld{display:grid;gap:4px;font-size:14px;color:var(--weich);position:relative}.feld .eingabe{width:100%;color:var(--tinte)}
.dlg-unten{justify-content:flex-end;margin-top:6px}
@media (max-width:860px){.pf-layout{grid-template-columns:1fr}.pf-layout.mit-auswahl .pf-liste{display:none}.nur-handy{display:inline-flex;justify-self:start}.pf-liste{max-height:none}.kal-tag{grid-template-columns:80px 1fr}}