:root{--bg:#f3f5f8;--karte:#fff;--text:#18212f;--muted:#667085;--linie:#e4e7ec;--navy:#1e3a5f;--navy2:#2a4f7f;--akzent:#0e9f8e;--akzent-h:#e6f6f4;--rot:#d92d20;--rot-h:#fef3f2;--gelb:#b54708;--gelb-h:#fffaeb;--gruen:#067647;--gruen-h:#ecfdf3;--blau:#175cd3;--blau-h:#eff8ff;
  --u:#d1e9ff;--u-t:#1849a9;--k:#fee4e2;--k-t:#b42318;--f:#f4ebff;--f-t:#6941c6;--uu:#f2f4f7;--uu-t:#475467;--arbeit:#d1fadf;--r:10px;--schatten:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--navy2)}h1{font-size:1.55rem;margin:0;line-height:1.25}h2{font-size:1.08rem;margin:0 0 .6rem}h3{font-size:.95rem;margin:.8rem 0 .3rem}
code{background:#f2f4f7;padding:1px 5px;border-radius:4px;font-size:.9em}
.muted{color:var(--muted)}.klein{font-size:.85rem}.nowrap{white-space:nowrap}.r{text-align:right}.plus{color:var(--gruen)}.minus{color:var(--rot)}.versteckt{position:absolute;left:-9999px}
.ic{flex:none;vertical-align:middle}

/* Rahmen */
.mit-nav{padding-left:248px}
.seitenleiste{position:fixed;inset:0 auto 0 0;width:248px;background:var(--navy);color:#cbd5e1;display:flex;flex-direction:column;z-index:20}
.marke{display:flex;gap:10px;align-items:center;padding:18px 16px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
.marke small{display:block;color:#94a3b8;font-size:.78rem;font-weight:400;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--akzent);color:#fff;flex:none}
.seitenleiste nav{flex:1;padding:10px 8px;overflow:auto}
.seitenleiste nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:#cbd5e1;text-decoration:none;font-weight:500;margin-bottom:2px}
.seitenleiste nav a:hover{background:rgba(255,255,255,.06);color:#fff}.seitenleiste nav a.aktiv{background:rgba(255,255,255,.12);color:#fff}
.zaehler{margin-left:auto;background:var(--akzent);color:#fff;font-style:normal;font-size:.72rem;border-radius:20px;padding:0 7px;line-height:18px}
.nutzer{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy2);color:#fff;font-weight:600;flex:none}
.nname{flex:1;min-width:0;color:#fff;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nname small{display:block;color:#94a3b8;font-size:.75rem}
.nutzer .icon-btn{color:#cbd5e1}.nutzer .icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.mobilkopf{display:none}
.inhalt{max-width:1240px;margin:0 auto;padding:26px 28px 60px}
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}.kopfzeile p{margin:.25rem 0 0}
.aktionen{display:flex;gap:8px;flex-wrap:wrap}
.als-firma{background:#fff7e6;border:1px solid #fcd581;color:#7a4a00;padding:9px 14px;border-radius:var(--r);margin-bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.als-firma form{margin-left:auto}

/* Bausteine */
.card{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten);padding:18px 20px;margin-bottom:18px}
.card.flush{padding:0;overflow:hidden}.pad{padding:16px 20px 0}h2.pad{padding-bottom:8px}
.spalten{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.spalten>.card{margin-bottom:0}.spalten{margin-bottom:18px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.zwischen{justify-content:space-between}.unten-abstand{margin-top:12px}
.stapel{display:flex;flex-direction:column;gap:12px}.stapel>h2{margin:0}.schmal{max-width:460px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #d0d5dd;background:#fff;color:var(--text);padding:8px 14px;border-radius:8px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;line-height:1.2;white-space:nowrap}
.btn:hover{background:#f9fafb}.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn.primary:hover{background:var(--navy2)}
.btn.danger{background:var(--rot);border-color:var(--rot);color:#fff}.btn.danger.ghost{background:transparent;color:var(--rot);border-color:#fda29b}.btn.danger.ghost:hover{background:var(--rot-h)}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:#eef1f5}.btn.sm{padding:5px 10px;font-size:.82rem}.btn.gross{padding:11px 16px;font-size:1rem;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer}.icon-btn:hover{background:#eef1f5;color:var(--text)}
form.inline{display:inline}
.badge{display:inline-block;font-size:.74rem;font-weight:600;padding:1px 8px;border-radius:20px;background:#f2f4f7;color:#344054;white-space:nowrap}
.b-green{background:var(--gruen-h);color:var(--gruen)}.b-red{background:var(--rot-h);color:var(--rot)}.b-amber{background:var(--gelb-h);color:var(--gelb)}.b-blue{background:var(--blau-h);color:var(--blau)}
.chip{display:inline-block;background:var(--gelb-h);color:var(--gelb);border-radius:20px;padding:2px 10px;margin:2px;text-decoration:none;font-size:.85rem}
.flash{padding:11px 14px;border-radius:var(--r);margin-bottom:14px;border:1px solid;font-size:.93rem}
.flash.ok{background:var(--gruen-h);border-color:#abefc6;color:var(--gruen)}.flash.err{background:var(--rot-h);border-color:#fecdca;color:var(--rot)}.flash.warn{background:var(--gelb-h);border-color:#fedf89;color:var(--gelb)}.flash.info{background:var(--blau-h);border-color:#b2ddff;color:var(--blau)}
.flash form{margin-left:8px}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.hinweis-karte{background:var(--gelb-h);border-color:#fedf89}

/* Formulare */
input,select,textarea{font:inherit;color:inherit;border:1px solid #d0d5dd;border-radius:8px;padding:8px 10px;background:#fff;min-width:0;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #84caff;outline-offset:0;border-color:#84caff}
input:disabled,select:disabled{background:#f9fafb;color:#667085}
.field{display:flex;flex-direction:column;gap:5px}.field>span{font-weight:600;font-size:.86rem;color:#344054}.field>small{color:var(--muted);font-size:.8rem}.field input,.field select,.field textarea{width:100%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.form-grid h2{margin:6px 0 -4px}.span2{grid-column:1/-1}
.zwei{display:grid;grid-template-columns:110px 1fr;gap:10px}.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:.92rem}.check input{margin-top:4px}
.wochentage{display:flex;gap:6px;flex-wrap:wrap}.wochentage label{cursor:pointer;position:relative}.wochentage input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.wochentage span{display:inline-grid;place-items:center;width:40px;height:36px;border:1px solid #d0d5dd;border-radius:8px;font-weight:600;font-size:.85rem;color:var(--muted)}
.wochentage input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}.wochentage input:focus-visible+span{outline:2px solid #84caff}

/* Tabellen */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:10px 14px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:middle}
.tbl th{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600;background:#f9fafb}.tbl th.r,.tbl td.r{text-align:right}
.tbl tbody tr:last-child td{border-bottom:0}.tbl tfoot th{background:#f9fafb;border-top:1px solid var(--linie);border-bottom:0;text-transform:none;font-size:.88rem;color:var(--text)}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:#f9fafb}
.tbl.kompakt td,.tbl.kompakt th{padding:6px 8px}.tbl tr.summe td{border-top:2px solid var(--text)}
.card:not(.flush) .tbl td,.card:not(.flush) .tbl th{padding-left:0}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kachel{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:12px 14px;box-shadow:var(--schatten);border-top:3px solid #d0d5dd}
.kachel span{display:block;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:600}.kachel b{display:block;font-size:1.3rem;margin:2px 0}
.kachel small{color:var(--muted);font-size:.8rem;display:block;line-height:1.35}
.kachel.k-haupt{border-top-color:var(--navy)}.kachel.k-urlaub{border-top-color:#53b1fd}.kachel.k-krank{border-top-color:#f97066}.kachel.k-fei{border-top-color:#9e77ed}.kachel.k-plus{border-top-color:#32d583}.kachel.k-minus{border-top-color:#f97066}
.mini-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-kacheln div{background:#f9fafb;border-radius:8px;padding:10px 12px}.mini-kacheln span{display:block;font-size:.78rem;color:var(--muted)}.mini-kacheln b{font-size:1.15rem}

/* Monatswahl */
.monatwahl{display:flex;align-items:center;gap:6px;margin-bottom:14px}.monatwahl b{min-width:130px;text-align:center;font-size:1.05rem}
.ma-wahl{margin-bottom:14px}

/* Raster */
.raster-leiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--linie)}.raster-leiste.unten{border-bottom:0;border-top:1px solid var(--linie)}
.raster-tbl th,.raster-tbl td{padding:4px 8px}.raster-tbl td{border-bottom:1px solid #f0f2f5}
.raster-tbl input{width:66px;padding:5px 6px;text-align:center;border-color:#e4e7ec}.raster-tbl input.z-pause{width:56px}.raster-tbl input.z-gut{width:62px}
.raster-tbl td:last-child input{width:100%;min-width:140px;text-align:left}.raster-tbl select{padding:5px 4px;border-color:#e4e7ec;width:58px}
.raster-tbl tr.we td{background:#f7f8fa}.raster-tbl tr.frei td:first-child{color:var(--muted)}
.raster-tbl tr.fei td{background:#faf6ff}.fei-name{color:var(--f-t);font-size:.72rem}
.raster-tbl tr.heute td:first-child{box-shadow:inset 3px 0 0 var(--akzent)}
.raster-tbl tr.k-u td:nth-child(6) select,.raster-tbl tr.k-su td:nth-child(6) select{background:var(--u);color:var(--u-t);font-weight:700}
.raster-tbl tr.k-k td:nth-child(6) select{background:var(--k);color:var(--k-t);font-weight:700}.raster-tbl tr.k-f td:nth-child(6) select{background:var(--f);color:var(--f-t);font-weight:700}
.z-dauer{font-variant-numeric:tabular-nums;font-weight:600}
.warn-dot{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--gelb-h);color:var(--gelb);font-size:.72rem;font-weight:800;cursor:help;border:1px solid #fedf89}
.legende{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8rem;color:var(--muted);padding:0 16px 12px;margin:0}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:3px;background:#eee}
.lg.arbeit{background:var(--arbeit)}.lg.k-u,.lg.geplant{background:#84caff}.lg.genommen{background:var(--navy2)}.lg.k-k{background:#fda29b}.lg.k-f{background:#d6bbfb}.lg.k-uu{background:#d0d5dd}.lg.beantragt{background:repeating-linear-gradient(45deg,#fedf89 0 3px,#fff 3px 6px)}

/* Planer */
.planer{border-collapse:collapse;width:100%;font-size:.8rem}.planer th,.planer td{border:1px solid #eef0f3;text-align:center;padding:4px 2px;min-width:26px}
.planer th{background:#f9fafb;font-weight:600;color:var(--muted);line-height:1.1}.planer th small{font-weight:400}.planer .name{text-align:left;padding:6px 10px;white-space:nowrap;min-width:150px;position:sticky;left:0;background:#fff;z-index:1}
.planer th.we,.planer td.we{background:#f4f5f7}.planer th.fei{background:var(--f);color:var(--f-t)}.planer th.heute{background:var(--akzent);color:#fff}
.planer td.arbeit{background:var(--arbeit)}.planer td.k-u,.planer td.k-su{background:#84caff;color:#0b4a8b;font-weight:700}.planer td.k-k{background:#fda29b;color:#7a271a;font-weight:700}
.planer td.k-f{background:var(--f);color:var(--f-t)}.planer td.k-uu,.planer td.k-kk,.planer td.k-za,.planer td.k-sa{background:#e4e7ec;color:#344054;font-weight:600}
.planer td.beantragt{background:repeating-linear-gradient(45deg,#fedf89 0 4px,#fff 4px 8px);font-weight:700;color:var(--gelb)}
.planer td.frei:not(.we){background:#fafafa}

/* Stempeluhr */
.stempeluhr{text-align:center}.stempeluhr h2{text-align:left}
.uhr{font-size:3.4rem;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--navy);line-height:1.1;margin:8px 0}
.stempel-status{display:inline-block;padding:5px 14px;border-radius:20px;background:#f2f4f7;font-weight:600;font-size:.92rem;margin-bottom:16px}
.s-ein{background:var(--gruen-h);color:var(--gruen)}.s-pause{background:var(--gelb-h);color:var(--gelb)}.s-fertig{background:var(--blau-h);color:var(--blau)}
.stempel-knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.btn.riesig{padding:16px 26px;font-size:1.08rem;border-radius:12px;min-width:170px;justify-content:center}
.liste-einfach{margin:0;padding-left:18px}.liste-einfach li{margin:3px 0}

/* Urlaub */
.antrag{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--linie)}.antrag:first-of-type{border-top:0}
.urlaub-balken{display:flex;height:12px;border-radius:6px;background:#eef1f5;overflow:hidden}.urlaub-balken i{display:block}.urlaub-balken .genommen{background:var(--navy2)}.urlaub-balken .geplant{background:#84caff}.urlaub-balken .beantragt{background:repeating-linear-gradient(45deg,#fdb022 0 3px,#fedf89 3px 6px)}
.feiertage{columns:2;padding-left:0;list-style:none;margin:0}.feiertage li{padding:3px 0}.feiertage span{display:inline-block;width:110px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Zugang */
.zugang-box{background:var(--akzent-h);border:1px solid #99e0d7;border-radius:var(--r);padding:16px 18px;margin-bottom:18px}.zugang-box h3{margin:0 0 4px;display:flex;gap:6px;align-items:center}
.zugang-box dl{display:grid;grid-template-columns:130px 1fr;gap:4px 10px;margin:10px 0}.zugang-box dt{color:var(--muted)}.zugang-box dd{margin:0;font-weight:600}.pw{font-size:1.05rem;letter-spacing:.05em;background:#fff}
.qr{width:180px;height:180px;border:1px solid var(--linie);border-radius:8px;padding:6px;background:#fff}

/* Login */
.ohne-nav .inhalt{max-width:none;padding:0}
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;background:linear-gradient(160deg,#1e3a5f 0%,#2a4f7f 55%,#0e9f8e 140%)}
.login-wrap .flash{width:100%;max-width:400px}
.login-karte{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);padding:30px 28px;width:100%;max-width:400px}
.login-karte h1{font-size:1.25rem;margin:18px 0 14px}.login-logo{display:flex;gap:12px;align-items:center}.login-logo .logo{width:46px;height:46px;border-radius:12px}.login-logo b{font-size:1.15rem;display:block}.login-logo small{color:var(--muted)}
.login-fuss{color:rgba(255,255,255,.75);font-size:.8rem;margin-top:16px}.login-fuss a{color:#fff}
.ohne-nav .inhalt>.flash{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:5;width:calc(100% - 32px);max-width:400px}

/* Mobil */
@media (max-width:900px){
  .mit-nav{padding-left:0}
  .seitenleiste{transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.3)}.nav-offen .seitenleiste{transform:none}
  .mobilkopf{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:15;background:var(--navy);color:#fff;padding:8px 12px}.mobilkopf .icon-btn{color:#fff}
  .mobilkopf small{color:#94a3b8;margin-left:auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .inhalt{padding:18px 16px 50px}.spalten,.form-grid{grid-template-columns:1fr}.hide-sm{display:none}
  .kacheln{grid-template-columns:1fr 1fr}.tbl th,.tbl td{padding:8px 10px}h1{font-size:1.3rem}
  .feiertage{columns:1}.uhr{font-size:2.8rem}.btn.riesig{min-width:0;flex:1}
}
@media (max-width:520px){.drei{grid-template-columns:1fr 1fr}.kopfzeile .aktionen{width:100%}.monatwahl b{min-width:0}}
@media print{.seitenleiste,.mobilkopf,.aktionen,.raster-leiste,.als-firma{display:none!important}.mit-nav{padding:0}.card{box-shadow:none}}
.raster-leiste .btn{white-space:normal;text-align:left}