/* Zeitbuch – Gestaltungsentwurf (nur Beispieldaten) */
@font-face{font-family:"Atkinson";src:url(atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Atkinson";src:url(atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2");font-weight:700}
@font-face{font-family:"Serif4";src:url(source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600}

:root{
  --lila:#821072; --lila-tief:#5c0b50; --lila-zart:#f3e8f1; --lila-mittel:#e4cfe0;
  --grund:#f4eff1; --flaeche:#fbf9fa; --karte:#fffdfe; --linie:#e5dbe2; --linie-stark:#d3c3cf;
  --text:#2a2128; --grau:#6b5f68; --grau-hell:#9a8e97;
  /* Zeitarten */
  --arbeit:#821072; --arbeit-zart:#f1e3ef;
  --ruf:#1f6f6b; --ruf-zart:#dcefed;
  --nacht:#3d3f8a; --nacht-zart:#e2e3f4;
  --urlaub:#b8741a; --urlaub-zart:#f8ead3;
  --abw:#8a7b86; --abw-zart:#ece6ea;
  --fei:#c9bcc5;
  --gut:#2f7a46; --gut-zart:#e0f0e4;
  --warn:#b45309; --warn-zart:#fdecd6;
  --alarm:#b42335; --alarm-zart:#fbe3e6;
  --radius:14px; --radius-k:9px;
  --schatten:0 1px 2px rgba(60,20,55,.06),0 4px 14px rgba(60,20,55,.06);
}
.dunkel{
  --grund:#1c161b; --flaeche:#241c22; --karte:#2b2229; --linie:#3a2f37; --linie-stark:#4a3d46;
  --text:#f2eaf0; --grau:#bfb1bb; --grau-hell:#8f818b;
  --lila:#d07ac2; --lila-tief:#e9a6de; --lila-zart:#3a2436; --lila-mittel:#563250;
  --arbeit:#d07ac2; --arbeit-zart:#3a2436;
  --ruf:#6cc3bc; --ruf-zart:#1d3735; --nacht:#a3a6f0; --nacht-zart:#2a2b48;
  --urlaub:#e8b25e; --urlaub-zart:#3d2f1a; --abw:#b3a5af; --abw-zart:#342b31;
  --gut:#7cc893; --gut-zart:#1f3326; --warn:#f0a352; --warn-zart:#3b2a17;
  --schatten:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--grund);color:var(--text);font:400 15px/1.45 "Atkinson",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.zahl{font-variant-numeric:tabular-nums;letter-spacing:.01em}
h1,h2,h3{font-weight:700;line-height:1.2}
.serif{font-family:"Serif4",Georgia,serif;font-weight:600;letter-spacing:-.01em}
a{color:var(--lila);text-decoration:none}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.klein{font-size:13px;color:var(--grau)}
.winzig{font-size:11.5px;color:var(--grau);letter-spacing:.02em}
.gross{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--grau);font-weight:700}

/* Marke */
.marke{display:flex;align-items:center;gap:10px}
.marke img{height:28px;width:auto}
.marke b{font-family:"Serif4",Georgia,serif;font-size:19px;color:var(--lila-tief);letter-spacing:-.01em}
.marke span{display:block;font-size:11px;color:var(--grau);letter-spacing:.03em;margin-top:-2px}

/* Karten, Knöpfe, Chips */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:11px 18px;font:700 15px "Atkinson",sans-serif;background:var(--lila);color:#fff;cursor:pointer}
.dunkel .knopf{color:#1c161b}
.knopf.zweit{background:transparent;color:var(--lila);box-shadow:inset 0 0 0 1.5px var(--lila-mittel)}
.knopf.leise{background:var(--lila-zart);color:var(--lila-tief)}
.knopf.voll{width:100%}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.arbeit{background:var(--arbeit-zart);color:var(--arbeit)}
.chip.ruf{background:var(--ruf-zart);color:var(--ruf)}
.chip.nacht{background:var(--nacht-zart);color:var(--nacht)}
.chip.urlaub{background:var(--urlaub-zart);color:var(--urlaub)}
.chip.abw{background:var(--abw-zart);color:var(--abw)}
.chip.gut{background:var(--gut-zart);color:var(--gut)}
.chip.warn{background:var(--warn-zart);color:var(--warn)}
.chip.alarm{background:var(--alarm-zart);color:var(--alarm)}
.chip.ohne::before{display:none}
.punkt{display:inline-block;width:9px;height:9px;border-radius:50%}

/* ================= HANDY ================= */
.handy{width:390px;height:844px;overflow:hidden;position:relative;background:var(--grund);display:flex;flex-direction:column}
.statusleiste{height:44px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 26px 6px;font-size:14px;font-weight:700}
.statusleiste .sym{display:flex;gap:6px;align-items:center}
.kopf-h{padding:8px 20px 6px;display:flex;align-items:center;justify-content:space-between}
.kopf-h .av{width:36px;height:36px;border-radius:50%;background:var(--lila-mittel);color:var(--lila-tief);display:grid;place-items:center;font-weight:700;font-size:14px}
.inhalt-h{flex:1;overflow:hidden;padding:6px 16px 16px;display:flex;flex-direction:column;gap:12px}
.navleiste{height:82px;background:var(--karte);border-top:1px solid var(--linie);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px 22px}
.navleiste a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:var(--grau);font-weight:700}
.navleiste a.an{color:var(--lila)}
.navleiste a.an svg{background:var(--lila-zart);border-radius:999px;padding:3px 14px;width:52px;height:28px}
.navleiste a svg{width:52px;height:28px;padding:3px 14px}

.gruss h1{font-size:25px}
.gruss p{color:var(--grau);font-size:14px}
.aufgabe{display:flex;gap:12px;align-items:center;padding:14px 16px;background:linear-gradient(135deg,var(--lila) 0%,#9b2a8a 100%);color:#fff;border-radius:var(--radius);box-shadow:0 6px 20px rgba(130,16,114,.25)}
.dunkel .aufgabe{background:linear-gradient(135deg,#6a1660,#8a2a7e)}
.aufgabe .ring{width:46px;height:46px;flex:none}
.aufgabe b{display:block;font-size:16px}
.aufgabe small{opacity:.85;font-size:13px}
.aufgabe .pfeil{margin-left:auto;background:rgba(255,255,255,.18);border-radius:50%;width:34px;height:34px;display:grid;place-items:center}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kenn{padding:14px}
.kenn .wert{font-size:28px;font-weight:700;margin:2px 0 0}
.kenn .wert small{font-size:14px;color:var(--grau);font-weight:400;margin-left:2px}
.balken{height:6px;border-radius:9px;background:var(--linie);overflow:hidden;margin-top:8px}
.balken i{display:block;height:100%;border-radius:9px;background:var(--lila)}
.liste-h{padding:4px 0}
.liste-h li{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--linie)}
.liste-h li:first-child{border-top:0}
.liste-h .av-k{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--abw-zart);color:var(--grau)}
.liste-h .rechts{margin-left:auto;text-align:right}
.abschnitt{display:flex;justify-content:space-between;align-items:baseline;margin:4px 2px -4px}
.abschnitt h2{font-size:15px}

/* Woche */
.wochenwahl{display:flex;align-items:center;justify-content:space-between;padding:4px 4px}
.wochenwahl .rund{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--karte);border:1px solid var(--linie)}
.wochenwahl h1{font-size:20px;text-align:center}
.wochenwahl p{text-align:center;font-size:13px;color:var(--grau)}
.summe{display:grid;grid-template-columns:repeat(3,1fr);padding:12px 6px}
.summe div{text-align:center;border-left:1px solid var(--linie)}
.summe div:first-child{border-left:0}
.summe b{display:block;font-size:19px}
.tag{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--linie)}
.tag:first-child{border-top:0}
.tag .datum{text-align:center;line-height:1.1}
.tag .datum b{display:block;font-size:19px}
.tag .datum span{font-size:11.5px;color:var(--grau);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.tag .zeilen{display:flex;flex-direction:column;gap:4px;min-width:0}
.tag .zeile{display:flex;gap:7px;align-items:center;font-size:14px}
.tag .ist{text-align:right}
.tag .ist b{display:block;font-size:16px}
.tag.frei{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(130,16,114,.035) 7px 14px)}
.tag.frei .zeile{color:var(--grau)}
.tag.offen .ist b{color:var(--grau-hell)}
.tag.heute .datum b{color:var(--lila)}
.plus{display:flex;align-items:center;gap:8px;color:var(--lila);font-weight:700;font-size:14px}
.leer{border:1.5px dashed var(--linie-stark);border-radius:var(--radius-k);padding:6px 10px;color:var(--lila);font-weight:700;font-size:13.5px;display:inline-flex;gap:6px;align-items:center}

/* Blatt (Bottom Sheet) */
.abdunkeln{position:absolute;inset:0;background:rgba(40,15,35,.38)}
.blatt{position:absolute;left:0;right:0;bottom:0;background:var(--karte);border-radius:22px 22px 0 0;padding:10px 18px 26px;box-shadow:0 -10px 40px rgba(40,10,35,.2)}
.blatt .griff{width:40px;height:5px;border-radius:9px;background:var(--linie-stark);margin:0 auto 12px}
.blatt h2{font-size:19px}
.feld{display:flex;flex-direction:column;gap:5px}
.feld label{font-size:12.5px;font-weight:700;color:var(--grau)}
.eingabe{border:1.5px solid var(--linie-stark);border-radius:var(--radius-k);padding:10px 12px;font-size:17px;font-weight:700;background:var(--flaeche);display:flex;justify-content:space-between;align-items:center}
.eingabe.aktiv{border-color:var(--lila);box-shadow:0 0 0 3px var(--lila-zart)}
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--grund);border-radius:12px;padding:4px;gap:4px}
.segment span{text-align:center;padding:9px 4px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--grau);display:flex;flex-direction:column;align-items:center;gap:2px}
.segment span.an{background:var(--karte);color:var(--text);box-shadow:var(--schatten)}
.hinweis{display:flex;gap:10px;padding:10px 12px;border-radius:var(--radius-k);font-size:13.5px;align-items:flex-start}
.hinweis.info{background:var(--lila-zart);color:var(--lila-tief)}
.hinweis.warn{background:var(--warn-zart);color:var(--warn)}
.hinweis.gut{background:var(--gut-zart);color:var(--gut)}
.hinweis svg{margin-top:1px}
.schnell{display:flex;gap:6px;flex-wrap:wrap}
.schnell span{border:1px solid var(--linie-stark);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:700;color:var(--grau)}

/* Kalender mini */
.mkal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:13.5px}
.mkal .wt{font-size:11px;color:var(--grau);font-weight:700;padding:2px 0}
.mkal span{padding:5px 0;border-radius:8px}
.mkal .we{color:var(--grau-hell)}
.mkal .frei{color:var(--grau-hell);text-decoration:line-through}
.mkal .wahl{background:var(--urlaub-zart);color:var(--urlaub);font-weight:700;border-radius:0}
.mkal .wahl.anf{border-radius:8px 0 0 8px}.mkal .wahl.end{border-radius:0 8px 8px 0}
.mkal .fei{color:var(--alarm)}
.mkal .heute{box-shadow:inset 0 0 0 1.5px var(--lila)}

/* Anmeldung */
.anmeldung{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 28px;gap:16px;flex:1;background:var(--grund) var(--muster) repeat;}
.anmeldung .logo-gross{width:74px;margin-top:40px}
.anmeldung h1{font-size:28px}
.passkey{width:100%;padding:22px 18px;display:flex;flex-direction:column;gap:12px;align-items:center}
.finger{width:76px;height:76px;border-radius:50%;background:var(--lila-zart);display:grid;place-items:center;color:var(--lila)}
.finger svg{width:42px;height:42px;stroke-width:1.5}
.trenn{display:flex;align-items:center;gap:10px;width:100%;color:var(--grau);font-size:13px}
.trenn::before,.trenn::after{content:"";flex:1;height:1px;background:var(--linie-stark)}

/* ================= PC ================= */
.pc{width:1440px;height:900px;display:grid;grid-template-columns:248px 1fr;background:var(--grund);overflow:hidden}
.seitenleiste{background:var(--flaeche);border-right:1px solid var(--linie);padding:22px 16px;display:flex;flex-direction:column;gap:22px}
.seitenleiste nav{display:flex;flex-direction:column;gap:2px}
.seitenleiste nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--text);font-weight:700;font-size:14.5px}
.seitenleiste nav a.an{background:var(--lila-zart);color:var(--lila-tief)}
.seitenleiste nav a .zaehler{margin-left:auto;background:var(--lila);color:#fff;border-radius:999px;font-size:11.5px;padding:1px 7px}
.seitenleiste .gruppe{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--grau-hell);font-weight:700;padding:0 12px;margin:10px 0 4px}
.seitenleiste .ich{margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--karte);border:1px solid var(--linie)}
.seitenleiste .ich .av{width:34px;height:34px;border-radius:50%;background:var(--lila-mittel);color:var(--lila-tief);display:grid;place-items:center;font-weight:700;font-size:13px}
.haupt{padding:24px 30px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.kopf-pc{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.kopf-pc h1{font-size:28px}
.kopf-pc p{color:var(--grau)}
.werkzeuge{display:flex;gap:10px;align-items:center}
.auswahl{white-space:nowrap;border:1px solid var(--linie-stark);background:var(--karte);border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center}
.reiter{display:flex;gap:4px;background:var(--flaeche);border:1px solid var(--linie);border-radius:11px;padding:3px}
.reiter span{padding:6px 13px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--grau)}
.reiter span.an{background:var(--karte);color:var(--text);box-shadow:var(--schatten)}

/* Teamkalender */
.tk{display:grid;grid-template-columns:200px repeat(31,1fr);font-size:12.5px}
.tk>div{border-bottom:1px solid var(--linie);height:38px;display:flex;align-items:center;justify-content:center;position:relative}
.tk .kopfzeile{height:52px;flex-direction:column;font-weight:700;line-height:1.15;color:var(--text)}
.tk .kopfzeile small{font-size:10.5px;color:var(--grau);font-weight:400}
.tk .we{background:rgba(130,16,114,.035)}
.tk .fei{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(130,16,114,.08) 5px 10px)}
.tk .heute{box-shadow:inset 1.5px 0 0 var(--lila),inset -1.5px 0 0 var(--lila)}
.tk .name{justify-content:flex-start;gap:9px;padding-left:16px;font-weight:700;font-size:13.5px}
.tk .name .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--lila-zart);color:var(--lila-tief)}
.tk .name small{font-weight:400;color:var(--grau);margin-left:auto;padding-right:12px;font-size:11.5px}
.tk .bereich{grid-column:1/-1;height:34px;justify-content:flex-start;padding-left:16px;background:var(--flaeche);font-weight:700;gap:10px;font-size:13px}
.tk .bereich .regel{font-weight:400;color:var(--grau);font-size:12px}
.tk .frei-tag::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--linie-stark)}
.balk{position:absolute;top:7px;bottom:7px;left:2px;right:2px;border-radius:7px;display:flex;align-items:center;padding:0 8px;font-weight:700;font-size:11.5px;white-space:nowrap;z-index:2;overflow:hidden}
.balk.urlaub{background:var(--urlaub-zart);color:var(--urlaub);box-shadow:inset 0 0 0 1.5px var(--urlaub)}
.balk.antrag{background:repeating-linear-gradient(135deg,var(--urlaub-zart) 0 6px,var(--karte) 6px 12px);color:var(--urlaub);box-shadow:inset 0 0 0 1.5px var(--urlaub)}
.balk.abw{background:var(--abw-zart);color:var(--abw);box-shadow:inset 0 0 0 1.5px var(--abw)}
.balk.ruf{background:#7fc4be;color:var(--ruf);top:12px;bottom:12px;padding:0}
.balk.nacht{background:var(--nacht);color:#fff;top:12px;bottom:12px;padding:0 0;border-radius:4px}
.belegung{font-size:11px;font-weight:700;color:var(--grau)}
.belegung.voll{color:#fff;background:var(--alarm);border-radius:6px;padding:1px 5px}
.belegung.fast{color:var(--warn)}
.legende{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--grau);align-items:center}
.legende span{display:flex;gap:6px;align-items:center}
.legende i{width:22px;height:12px;border-radius:4px;display:inline-block}

/* Tabellen */
table.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--grau);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--linie-stark)}
.tab td{padding:11px 14px;border-bottom:1px solid var(--linie);vertical-align:middle}
.tab tr:last-child td{border-bottom:0}
.tab .r{text-align:right}
.person{display:flex;align-items:center;gap:10px;font-weight:700}
.person .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--lila-zart);color:var(--lila-tief)}
.person small{display:block;font-weight:400;color:var(--grau);font-size:12px}
.saldo{display:flex;align-items:center;gap:10px}
.saldo .skala{position:relative;width:130px;height:8px;background:var(--linie);border-radius:9px}
.saldo .skala::before{content:"";position:absolute;left:33.3%;top:-4px;bottom:-4px;width:2px;background:var(--grau-hell)}
.saldo .skala i{position:absolute;top:0;bottom:0;border-radius:9px}
.saldo .skala .schw{position:absolute;top:-5px;bottom:-5px;width:0;border-left:2px dashed var(--alarm)}
.saldo b{width:64px;text-align:right}
.spark{width:80px;height:26px}
.raster{display:grid;gap:18px}
.kpi{padding:16px 18px}
.kpi .wert{font-size:30px;font-weight:700}
.kpi .wert small{font-size:14px;color:var(--grau);font-weight:400}

/* Verwaltung */
.zeitstrahl{display:flex;gap:0;align-items:stretch;margin-top:6px}
.zeitstrahl .abschn{flex:1;padding:12px 14px;border:1px solid var(--linie);background:var(--flaeche);position:relative}
.zeitstrahl .abschn:first-child{border-radius:12px 0 0 12px}
.zeitstrahl .abschn:last-child{border-radius:0 12px 12px 0}
.zeitstrahl .abschn.aktuell{background:var(--lila-zart);border-color:var(--lila-mittel)}
.zeitstrahl .abschn.neu{border-style:dashed;background:transparent;color:var(--lila);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;flex:.55}
.wochenraster{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wtag{border:1px solid var(--linie);border-radius:12px;padding:10px;text-align:center;background:var(--karte)}
.wtag .n{font-size:12px;font-weight:700;color:var(--grau);text-transform:uppercase;letter-spacing:.06em}
.wtag .h{font-size:22px;font-weight:700;margin:4px 0 2px}
.wtag .h small{font-size:12px;color:var(--grau);font-weight:400}
.wtag .z{font-size:11.5px;color:var(--grau)}
.wtag.aus{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(130,16,114,.04) 6px 12px);color:var(--grau-hell)}
.wtag.aus .h{color:var(--grau-hell)}
.schalter{width:40px;height:23px;border-radius:999px;background:var(--linie-stark);position:relative;flex:none}
.schalter::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.schalter.an{background:var(--lila)}
.schalter.an::after{left:20px}
.zeile-s{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linie)}
.zeile-s:first-child{border-top:0}
.zeile-s .txt{flex:1}
.zeile-s .txt small{display:block;color:var(--grau);font-size:12.5px}
.rechnung{display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:14px}
.rechnung .summe-z{border-top:1.5px solid var(--linie-stark);padding-top:6px;font-weight:700}

/* Beispiel-Hinweis */
.beispiel{position:absolute;right:14px;top:48px;background:rgba(42,33,40,.82);color:#fff;font-size:10.5px;padding:3px 8px;border-radius:6px;letter-spacing:.04em;z-index:9}
.pc .beispiel{top:auto;bottom:12px;right:16px}

/* ===== Ergänzungen für die echte Anwendung ===== */
body{min-height:100vh}
.rahmen{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative}
.rahmen .inhalt-h{overflow:visible;padding-bottom:110px}
.rahmen .navleiste{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:20}
.navleiste a{text-decoration:none}
.tag{color:inherit;text-decoration:none}
a.tag:hover{background:var(--lila-zart)}
.meldung{padding:10px 14px;border-radius:var(--radius-k);font-size:14px;font-weight:700}
.meldung.success{background:var(--gut-zart);color:var(--gut)}
.meldung.error{background:var(--alarm-zart);color:var(--alarm)}
.blatt{position:fixed;max-width:520px;margin:0 auto;z-index:31}
.abdunkeln{position:fixed;z-index:30;display:block}
input.eingabe,select.eingabe,textarea.eingabe{width:100%;font-family:inherit;color:var(--text);appearance:none}
input.eingabe:focus,select.eingabe:focus{outline:none;border-color:var(--lila);box-shadow:0 0 0 3px var(--lila-zart)}
.segment input{position:absolute;opacity:0;pointer-events:none}
.segment label{text-align:center;padding:9px 4px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--grau);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.segment input:checked+label{background:var(--karte);color:var(--text);box-shadow:var(--schatten)}
.segment input:focus-visible+label{outline:2px solid var(--lila)}
.knopf{text-decoration:none}
.knopf:focus-visible,a:focus-visible{outline:3px solid var(--lila-mittel);outline-offset:2px}
.loeschen{background:none;border:0;color:var(--alarm);font:700 14px "Atkinson",sans-serif;cursor:pointer;padding:8px}
.abgeschlossen{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--gut);font-weight:700}
@media (prefers-color-scheme: dark){
  :root:not(.hell){
  --grund:#1c161b; --flaeche:#241c22; --karte:#2b2229; --linie:#3a2f37; --linie-stark:#4a3d46;
  --text:#f2eaf0; --grau:#bfb1bb; --grau-hell:#8f818b;
  --lila:#d07ac2; --lila-tief:#e9a6de; --lila-zart:#3a2436; --lila-mittel:#563250;
  --arbeit:#d07ac2; --arbeit-zart:#3a2436; --ruf:#6cc3bc; --ruf-zart:#1d3735; --nacht:#a3a6f0; --nacht-zart:#2a2b48;
  --urlaub:#e8b25e; --urlaub-zart:#3d2f1a; --abw:#b3a5af; --abw-zart:#342b31;
  --gut:#7cc893; --gut-zart:#1f3326; --warn:#f0a352; --warn-zart:#3b2a17;
  --alarm:#ff8a98; --alarm-zart:#3d1d23;
  }
  :root:not(.hell) .knopf{color:#1c161b}
}
.feld{min-width:0}
input[type=date].eingabe,input[type=time].eingabe{min-width:0;max-width:100%}