/* IBV Stundenerfassung – Gestaltung angelehnt an ibv-hd.de (aus dem Prototyp übernommen) */
/* Layout: weiße Kopfzeile mit roter Linie wie auf ibv-hd.de, Logo links, Reiter rechts; hellgraue Arbeitsfläche, weiße Karten, Versalien-Überschriften */
:root{
  --bg:#f8f8f8; --surface:#ffffff; --surface-2:#f0f0f1; --fg:#111111; --muted:#5f6064; --line:#e3e3e4; --logo-grey:#a7a8ab;
  --accent:#e2001a; --accent-hover:#c00008; --accent-ink:#ffffff; --accent-soft:#fde6e8; --accent-text:#b8001a; --accent-fill:#e2001a;
  --feld:#808186;
  --bar:#3c3d40; --bar-soft:#e6e6e8;
  --o1:#3c3d40; --o2:#9a9ca1; --o3:#c98a14; --o4:#3f7cac; --o5:#7a5ea8; --o6:#4f8a55; --o7:#a0522d; --o8:#2a9d8f;
  --good:#2b7a3b; --good-soft:#e3f2e5; --warn:#8c5a00; --warn-soft:#f8edd3; --bad:#b3001b; --bad-soft:#fbe3e6;
  --font-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --r:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121213; --surface:#1b1b1d; --surface-2:#252528; --fg:#f1f1f2; --muted:#a3a4a8; --line:#323236; --logo-grey:#8e8f93;
    --accent:#ff3d55; --accent-hover:#ff6075; --accent-ink:#ffffff; --accent-soft:#3a1519; --accent-text:#ff6075; --accent-fill:#d81b36; --feld:#76777c;
    --bar:#d0d1d4; --bar-soft:#2c2c30;
    --o1:#d0d1d4; --o2:#8a8c91; --o3:#e5a93a; --o4:#6ea8d6; --o5:#a88ad4; --o6:#7fbf84; --o7:#d08560; --o8:#55c2b4;
    --good:#74c585; --good-soft:#17301d; --warn:#e4b45c; --warn-soft:#33280f; --bad:#ff7a8a; --bad-soft:#3d161c;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121213; --surface:#1b1b1d; --surface-2:#252528; --fg:#f1f1f2; --muted:#a3a4a8; --line:#323236; --logo-grey:#8e8f93;
  --accent:#ff3d55; --accent-hover:#ff6075; --accent-ink:#ffffff; --accent-soft:#3a1519; --accent-text:#ff6075; --accent-fill:#d81b36; --feld:#76777c;
  --bar:#d0d1d4; --bar-soft:#2c2c30;
  --o1:#d0d1d4; --o2:#8a8c91; --o3:#e5a93a; --o4:#6ea8d6; --o5:#a88ad4; --o6:#7fbf84; --o7:#d08560; --o8:#55c2b4;
  --good:#74c585; --good-soft:#17301d; --warn:#e4b45c; --warn-soft:#33280f; --bad:#ff7a8a; --bad-soft:#3d161c;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:15px;line-height:1.5}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num,.mono{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
h3{font-size:13px;font-weight:700;color:var(--muted)}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Kopf */
.top{background:var(--surface);border-bottom:1px solid var(--accent);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.topin{display:flex;align-items:stretch;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;padding-block:12px;min-width:0;text-decoration:none;color:inherit}
.ibv{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:40px;line-height:.9;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.3px var(--logo-grey);paint-order:stroke}
@supports not (-webkit-text-stroke:1px black){.ibv{color:var(--logo-grey)}}
.brandtxt{display:grid;line-height:1.15;border-left:1px solid var(--line);padding-left:10px}
.brandtxt small{font-size:11px;color:var(--muted);font-weight:700}
.brandtxt strong{font-size:14px;color:var(--accent);font-weight:700}
.brandtxt em{font-style:normal;font-size:11px;color:var(--muted)}
.tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;align-self:stretch;min-width:0;max-width:100%}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 14px;color:var(--fg);font-weight:600;font-size:14px;white-space:nowrap;min-height:48px}
.tabs button[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabs button:hover{color:var(--accent)}

main{padding-block:16px 56px;display:grid;gap:16px}
.banner{display:flex;gap:10px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface-2);border-radius:var(--r);padding:10px 14px;font-size:13px}
.banner p{margin:0;max-width:72ch;color:var(--muted)}
.banner .row{align-items:center}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0;flex:1 1 280px;max-width:420px}
.who select{min-width:0;width:100%}

/* Bausteine */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px;min-width:0;align-content:start}
.cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:16px}
@media (max-width:860px){.grid2{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:grid;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.field > span{font-weight:600}
input[type=time],input[type=number],input[type=text],input[type=date],input[type=email],input[type=search],input[type=password],select,textarea{
  background:var(--surface);border:1px solid var(--feld);border-radius:var(--r);padding:7px 9px;min-height:38px;max-width:100%;color:var(--fg);font-size:14px}
input[type=time],input[type=number]{font-variant-numeric:tabular-nums}
input:disabled,select:disabled{background:var(--surface-2);color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--fg);background:var(--surface);border-radius:var(--r);padding:7px 14px;min-height:38px;font-weight:600;font-size:14px;color:var(--fg)}
.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}
.btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent-fill) 85%,#000);border-color:color-mix(in srgb,var(--accent-fill) 85%,#000);color:var(--accent-ink)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.ghost:hover:not(:disabled){color:var(--accent);border-color:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon{border:0;background:none;color:var(--muted);width:32px;height:38px;border-radius:var(--r);font-size:16px}
.icon:hover{background:var(--surface-2);color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:12px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.run{background:var(--bar-soft);color:var(--fg)}
.pill.done{background:none;border:1px solid var(--good);color:var(--good)}

/* Tagesnavigation */
.daynav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.daynav .date{font-size:24px;font-weight:700;margin-right:6px;line-height:1.2}

.meter{height:6px;border-radius:3px;background:var(--bar-soft);overflow:visible;position:relative}
.meter i{display:block;height:100%;background:var(--bar);border-radius:3px}
.meter.over i{background:var(--bad)}
.meter.full i{background:var(--good)}
.tolmark{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--accent);border-radius:1px}

/* Prüfungen */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.checks li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:var(--r);font-size:14px}
.checks li.bad{background:var(--bad-soft)}
.checks li.warn{background:var(--warn-soft)}
.checks li.ok{background:var(--good-soft)}
.checks li b{font-weight:700;font-size:13px;min-width:62px;padding-top:2px}
.checks li.bad b{color:var(--bad)}.checks li.warn b{color:var(--warn)}.checks li.ok b{color:var(--good)}

/* Tabellen */
.tw{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:13px;font-weight:700;color:var(--muted);background:var(--surface-2)}
td.r,th.r{text-align:right}
tbody tr:last-child td{border-bottom:0}
tfoot td{font-weight:700;border-top:1px solid var(--fg);border-bottom:0}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--surface-2)}
tr.sel td{background:var(--accent-soft)}
tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
tr.dim td{color:var(--muted)}
.pos{color:var(--good)}.neg{color:var(--bad)}

/* Kennzahlen */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
/* Kennzahlen als eine Leiste mit feinen Trennlinien statt einzelner Karten; Bezeichnung über dem Wert, linksbündig */
.tiles{display:flex;flex-wrap:wrap;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tile{background:var(--surface);padding:14px 16px 16px;flex:1 1 180px;display:grid;gap:4px;text-align:left;align-content:start;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.tile .k{font-size:13px;color:var(--muted);font-weight:600;order:1}
.tile .v{font-size:32px;font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums;order:2}
.tile .s{font-size:13px;color:var(--muted);order:3}
.tile .meter{order:4}
input.req{border-color:var(--accent);background:var(--accent-soft)}
.zgrid td.c,.zgrid th.c{text-align:center}
.zgrid input{width:18px;height:18px;accent-color:var(--accent)}
.lnk{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--fg);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
.lnk:hover{color:var(--accent)}
.ztxt{white-space:normal;min-width:240px}.ztxt input{width:100%}
.doc{border:1px solid var(--line);background:var(--surface);padding:20px;display:grid;gap:12px;border-top:3px solid var(--accent)}
.doc p{margin:0}
.dochead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.dochead .brand{padding:0}
.dochead .r{text-align:right}
.legend{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i,.dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend i.hatch{background:repeating-linear-gradient(45deg,var(--muted) 0 1.5px,transparent 1.5px 4px)}
.pbar{display:inline-flex;align-items:center;gap:8px}
.pbar .meter{width:110px}
.warnc{color:var(--warn)}
tr.grp td{font-weight:700;background:var(--surface-2)}
.bgrid input{width:72px;min-height:32px;padding:4px 6px;text-align:right}
.rings{display:flex;gap:16px 48px;flex-wrap:wrap}
.ring{display:flex;gap:14px;align-items:center}
.ring svg{flex:none}
.ringtxt{display:grid;gap:3px;font-size:13px;color:var(--muted)}
.ringtxt b{color:var(--fg);font-size:15px}

/* Admin */
.sub{display:flex;gap:6px;flex-wrap:wrap}
.sub button{border:1px solid var(--fg);background:var(--surface);border-radius:var(--r);padding:5px 14px;font-size:13px;font-weight:600;color:var(--fg)}
.sub button[aria-pressed="true"]{background:var(--fg);color:var(--surface)}
.adm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px;align-items:start}
@media (max-width:900px){.adm{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.form .wide{grid-column:1 / -1}
.form input,.form select{width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chk{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:5px 9px;font-size:13px;color:var(--fg);cursor:pointer;background:var(--surface)}
.chk:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.chk:has(input:disabled){opacity:.6;cursor:not-allowed}
.chk input{margin:0;accent-color:var(--accent)}
.model{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:12px}
.model.current{border-color:var(--fg)}
.model legend{font-size:13px;font-weight:700;padding:0 6px}
.note{font-size:12px;color:var(--muted);margin:0}
.empty{padding:24px;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion: no-preference){.meter i{transition:width .2s ease}}

/* Ergänzungen für die App (Links als Reiter, Meldungen, Speicherstatus) */
a.brand{text-decoration:none;color:inherit}
.tabs .tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 14px;color:var(--fg);font-weight:600;font-size:14px;white-space:nowrap;min-height:48px;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;font-family:inherit}
.tabs .tab[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabs .tab:hover{color:var(--accent)}
.tabform{display:flex;margin:0;margin-left:6px;border-left:1px solid var(--line)}
.tabform .tab{color:var(--muted);font-weight:500}  /* Abmelden ist eine Aktion, kein Reiter */
.tabs{flex:1 1 auto}
.tabs .rechts{margin-left:auto}   /* Darstellung und Abmelden rechtsbündig, die Reiter bleiben links */
.tabs .tab.thema{font-size:18px;min-width:48px;justify-content:center;padding:0 12px}
/* Mein Konto → Darstellung: drei Knöpfe, der gewählte ist hervorgehoben */
.thema-wahl{display:flex;flex-wrap:wrap;gap:8px}
.thema-wahl .btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.meldungen{display:flex;gap:8px;flex-wrap:wrap}
.meldungen p{margin:0}
.meldungen .pill,.pill.lang{white-space:normal;border-radius:var(--r)}
.speicher{font-size:12px;color:var(--muted);margin-left:auto}
.speicher.fehler{color:var(--bad);font-weight:600}
td a{color:inherit;text-decoration:none}

/* --- Projektquote als Ring, Konto, Übersicht, Auswertungen --- */
.ringe{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.ring{margin:0;display:grid;justify-items:center;gap:6px;text-align:center}
.ring svg{width:130px;height:130px}
.ring-bg{fill:none;stroke:var(--surface-2);stroke-width:10}
.ring-v{fill:none;stroke:var(--muted);stroke-width:10;stroke-linecap:round;transition:stroke-dasharray .4s}
.ring.voll .ring-v{stroke:var(--good)}
.ring-t{font-size:20px;font-weight:300;fill:var(--fg)}
.ring figcaption{display:grid;gap:4px;justify-items:center}
.fremd{background:var(--warn-soft);color:var(--fg);border-left:4px solid var(--warn);padding:10px 14px;border-radius:var(--r)}
.kal{border-collapse:separate;border-spacing:2px;width:100%}
.kal td,.kal th{padding:0;text-align:center;font-size:11px}
.kal th.n,.kal td.n{text-align:left;white-space:nowrap;padding-right:8px;font-size:13px}
.kal th.we{color:var(--muted)}
.z{display:block;border-radius:3px;background:var(--surface-2)}
.z.ok{background:var(--good)}.z.done{background:var(--good);opacity:.55}
.z.warn{background:linear-gradient(to top,var(--warn) 55%,var(--surface-2) 55%)}  /* halb gefüllt = offen */
.z.bad{background:var(--bad);color:#fff;font-weight:800;text-decoration:none}
.z.bad::after{content:"!";font-size:12px;font-style:normal}  /* nicht nur über die Farbe erkennbar */
.legende i.z.bad{text-align:center;line-height:12px}.legende i.z.bad::after,.tl-wert .z.bad::after{font-size:10px;display:block;text-align:center;line-height:12px}
.z.run{background:var(--bar,#999)}
.z.abw{background:repeating-linear-gradient(45deg,var(--muted) 0 3px,var(--surface-2) 3px 6px)}
.z.frei{background:transparent;border:1px dashed var(--feld)}
.legende{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-2px}
.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filter .field{min-width:150px}
.berichte{display:flex;flex-wrap:wrap;gap:6px}
.berichte a{padding:6px 12px;border:1px solid var(--feld);border-radius:999px;font-size:13px;text-decoration:none;color:var(--fg)}
.berichte a[aria-current]{background:var(--fg);color:var(--bg,#fff);border-color:var(--fg)}
.ampel{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px}
.ampel.gruen{background:var(--good)}.ampel.gelb{background:var(--warn)}.ampel.rot{background:var(--bad)}
tr.grp td{font-weight:700;background:var(--surface-2)}
[hidden]{display:none!important}

/* --- Verwaltung --- */
.vnav{margin-bottom:4px}
.vform{display:grid;gap:16px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px 18px;align-items:start}
.vfeld{display:grid;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.vfeld .vlabel{font-weight:600}
.vfeld input:not([type=checkbox]):not([type=color]),.vfeld select,.vfeld textarea{width:100%}
.vfeld small{font-size:12px;color:var(--muted);line-height:1.35}
.vbreit{grid-column:1/-1}
.vcheck{align-self:end}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.errorlist{list-style:none;margin:2px 0 0;padding:0;color:var(--bad);font-size:12px;font-weight:600}
.vfeld.fehler input,.vfeld.fehler select{border-color:var(--bad)}
.vleiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.vleiste .rechts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vkarte{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--fg)}
.vkarte:hover{border-color:var(--accent)}
.vkarte b{font-size:28px;font-weight:300}
.vkarte span{font-size:13px;color:var(--muted)}
.rollen{display:flex;gap:4px;flex-wrap:wrap}
.rolle{font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;background:var(--surface-2);color:var(--muted)}
.rolle.gf{background:var(--accent-soft);color:var(--accent-text)}
.rolle.pl{background:var(--bar-soft);color:var(--fg)}
tr.aus td{color:var(--muted)}
.matrix{border-collapse:collapse;font-size:13px}
.matrix th,.matrix td{border:1px solid var(--line);padding:4px 6px;text-align:center;vertical-align:middle}
.matrix thead th{background:var(--surface-2);font-size:11px;font-weight:600;min-width:84px}
.matrix th.l{text-align:left;white-space:nowrap;min-width:220px;background:var(--surface)}
.matrix td.aus,.matrix th.aus{background:var(--surface-2)}
.matrix td.aus *{visibility:hidden}
.matrix input[type=number]{width:64px;padding:4px 6px;min-height:30px;text-align:right}
.rollen-matrix thead input{width:9em;padding:4px 6px;min-height:30px;font-weight:600}
.rollen-matrix th.bereich{background:var(--surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.rollen-matrix tbody th.l{white-space:normal;min-width:200px;font-weight:400}
.matrix .zn{display:block;font-size:11px;color:var(--muted);margin-top:3px;cursor:pointer;white-space:nowrap}
.matrix .zn input{accent-color:var(--accent);vertical-align:-2px}
.matrix .zn:has(input:checked){color:var(--accent-text);font-weight:700}
.matrix tfoot td{font-weight:700;background:var(--surface-2)}
.matrix label.kopf{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.ftab{border-collapse:collapse;width:100%}
.ftab th{font-size:11px;text-align:left;color:var(--muted);padding:6px;border-bottom:1px solid var(--line)}
.ftab td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.ftab input:not([type=checkbox]):not([type=color]),.ftab select{width:100%}
.ftab tr.neu td{background:var(--surface-2)}
.modelle li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.modelle{list-style:none;margin:0;padding:0}
.matrix th{text-transform:none;letter-spacing:0}
.matrix th.l{font-weight:500;font-size:13px}
.matrix thead th{min-width:72px}
.matrix input[type=number]{width:58px}
a.btn{text-decoration:none}
.vfeld .chk{white-space:normal;max-width:100%}
.anpassen{border:1px solid var(--warn);background:var(--warn-soft);border-radius:var(--r);padding:12px 14px;display:grid;gap:10px;font-size:14px;margin-bottom:10px}
.anpassen .row{gap:8px}


/* Stoppuhr: schwebt unten rechts, auf allen Seiten an derselben Stelle */
.uhr{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:grid;justify-items:end;gap:10px;pointer-events:none}
.uhr>*{pointer-events:auto}
.uhr-koerper{position:relative;width:108px;height:108px}
.uhr-face{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.22);padding:0;display:grid;place-items:center;cursor:pointer;color:var(--fg)}
.uhr-face:hover{box-shadow:0 10px 28px rgba(0,0,0,.3)}
.uhr-face svg{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);transform:rotate(-90deg)}
.uhr-face .bg{fill:none;stroke:var(--surface-2);stroke-width:7}
.uhr-face .ring{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke .25s}
.uhr-face .sek{fill:var(--fg)}
.uhr-in{position:relative;display:grid;justify-items:center;line-height:1.15;gap:1px}
.uhr-ort{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uhr-zeit{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.uhr-proj{font-size:11px;font-weight:700;max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uhr-proj.ohne{color:var(--accent)}
.uhr-face.vorschau{outline:2px dashed var(--fg);outline-offset:3px}
.uhr-face.aus .uhr-zeit{font-size:15px}
.uhr-krone{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:26px;height:14px;border-radius:4px 4px 1px 1px;border:none;padding:0;cursor:pointer;
  background:repeating-linear-gradient(90deg,var(--fg) 0 2px,var(--muted) 2px 4px);box-shadow:0 -1px 3px rgba(0,0,0,.2)}
.uhr-krone::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:5px;margin-left:-4px;background:var(--muted)}
.uhr-tipp{font-size:11px;font-weight:600;background:var(--fg);color:var(--bg);padding:3px 8px;border-radius:3px;max-width:240px;text-align:right;line-height:1.35}
.uhr-pop{width:min(330px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.25);padding:10px;display:grid;gap:2px;max-height:calc(100vh - 170px);overflow:auto}
.uhr-pop .kopfz{font-size:12px;color:var(--muted);padding:2px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.uhr-pop .kopfz b{color:var(--fg)}
.uhr-pop h3{margin:6px 8px 2px;font-size:12px;color:var(--muted)}
.uhr-opt{display:flex;gap:10px;align-items:center;text-align:left;padding:8px;border:none;background:none;border-radius:var(--r);font-size:14px;width:100%;color:var(--fg)}
.uhr-opt:hover,.uhr-opt:focus-visible{background:var(--surface-2)}
.uhr-opt i{flex:0 0 12px;height:12px;border-radius:50%}
.uhr-opt i.pz{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 4px);border:1px solid var(--muted)}
.uhr-opt small{display:block;color:var(--muted);font-size:12px}
.uhr-opt kbd{margin-left:auto;font:inherit;font-size:11px;color:var(--muted)}
.uhr-fuss{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.uhr-fuss .btn{flex:1 1 auto}
@media print{.uhr{display:none}}
/* Platz für die Uhr: rechts ein Streifen, damit sie keinen Text verdeckt (Uhr 108 px + 16 px Rand + Abstand).
   Auf breiten Bildschirmen reicht der freie Rand neben der Seite, dann bleibt die Seite unverändert. */
@media (min-width:701px){
  body.mit-uhr main.wrap{padding-right:clamp(16px,calc(150px - (100vw - 1140px) / 2),150px)}
}
/* Einklappen „›“ an der Uhr und Griff „‹“ am Rand, wenn sie eingeklappt ist */
.uhr-einklappen{position:absolute;left:-8px;bottom:-2px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.18);color:var(--fg);font-size:17px;font-weight:700;line-height:1;padding:0 0 2px;display:grid;place-items:center;z-index:1}
.uhr-einklappen:hover{color:var(--accent);border-color:var(--accent)}
.uhr-auf{width:30px;height:64px;margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px;
  background:var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.2);color:var(--fg);font-size:22px;font-weight:700;line-height:1;padding:0 0 3px}
.uhr-auf:hover{color:var(--accent);border-color:var(--accent)}
.uhr-auf.w1{border-color:var(--warn);background:var(--warn-soft)}
.uhr-auf.w2{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
body.uhr-zu .uhr-hinweis::after{right:8px}
body.uhr-zu .uhr-platz[data-art="wieder"]{right:calc(46px + env(safe-area-inset-right,0px))}
@media (pointer:coarse){.uhr-einklappen{width:36px;height:36px;left:-12px;bottom:-6px}.uhr-auf{width:40px;height:72px}}
/* Handy: keine Uhr – gestempelt wird in „Mein Tag“. Pausen-Hinweise erscheinen weiter, als Leiste unten.
   Nicht im abgedockten Fenster (.pip): Es ist schmal, gilt also auch als „Handy“, soll aber die Uhr zeigen. */
@media (max-width:700px){
  .uhr:not(.pip){left:max(16px,env(safe-area-inset-left,0px));justify-items:stretch}
  .uhr:not(.pip) :is(.uhr-koerper,.uhr-auf,.uhr-pop,.uhr-tipp,.uhr-hinweis.frage){display:none!important}
  .uhr:not(.pip) :is(.uhr-hinweis,.uhr-toast){width:auto;max-width:none}
  .uhr:not(.pip) .uhr-hinweis::after{display:none}
}
.uhr[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.uhr *{transition:none!important}}
.uhr-toast{display:flex;gap:12px;align-items:center;background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:var(--r);box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:14px;max-width:min(360px,calc(100vw - 32px))}
.uhr-toast button{background:none;border:none;color:var(--bg);font-weight:700;text-decoration:underline;padding:0;white-space:nowrap}
.uhr .btn{min-height:38px}
.meter i{position:relative;overflow:hidden}
.meter i b.vt{position:absolute;top:0;right:0;bottom:0;background:var(--surface);opacity:.55}
.vt-k{color:var(--muted);font-style:italic}

/* Pausen- und Ruhezeit-Erinnerung der Stoppuhr (P-08) */
.uhr-hinweis{width:min(300px,calc(100vw - 32px));display:grid;gap:8px;padding:10px 12px;border-radius:var(--r);font-size:13px;line-height:1.4;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.2);position:relative}
.uhr-hinweis::after{content:"";position:absolute;right:46px;bottom:-7px;width:12px;height:12px;background:inherit;border-right:inherit;border-bottom:inherit;transform:rotate(45deg)}
.uhr-hinweis.s0{font-size:12px;color:var(--muted);padding:7px 10px}
.uhr-hinweis.s1{border-color:var(--warn);background:var(--warn-soft)}
.uhr-hinweis.s2,.uhr-hinweis.s3{border-color:var(--bad);background:var(--bad-soft);font-weight:600}
.uhr-hinweis.ruhe{border-color:#3f7cac;background:var(--surface)}
.uhr-hw-k{display:flex;gap:6px;flex-wrap:wrap}
.uhr .btn.sm{min-height:30px;padding:3px 10px;font-size:13px}
.uhr-face.w1{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft),0 8px 24px rgba(0,0,0,.22)}
.uhr-face.w2{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-soft),0 8px 24px rgba(0,0,0,.22)}
.uhr-proj.pz{font-weight:600;color:var(--muted);font-size:10px}
.uhr-koerper.wackeln,.uhr-auf.wackeln{animation:uhr-wackeln 1.2s ease-in-out}
@keyframes uhr-wackeln{0%,100%{transform:rotate(0)}10%{transform:rotate(-14deg) scale(1.06)}20%{transform:rotate(12deg) scale(1.06)}
  30%{transform:rotate(-10deg)}40%{transform:rotate(8deg)}50%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}}
.uhr-face.schlaeft .uhr-in{position:static}
.zzz{position:absolute;top:-30px;left:-22px;display:flex;align-items:flex-end;gap:2px;font-weight:800;color:#3f7cac;pointer-events:none;text-shadow:0 0 3px var(--surface)}
.zzz i{font-style:normal;display:inline-block;animation:uhr-zzz 2.4s ease-in-out infinite;opacity:0}
.zzz i:nth-child(1){font-size:15px}.zzz i:nth-child(2){font-size:19px;animation-delay:.6s}.zzz i:nth-child(3){font-size:24px;animation-delay:1.2s}
.zzz.klein{top:-26px;left:-16px}
@keyframes uhr-zzz{0%{opacity:0;transform:translate(0,8px)}30%{opacity:1}100%{opacity:0;transform:translate(6px,-14px)}}
.uhr-face.schlaeft .uhr-zeit{font-size:14px}
.uhr-pop-hw{margin:6px 8px 0;padding:8px 10px;border-radius:var(--r);font-size:12px;background:var(--warn-soft);border:1px solid var(--warn)}
.uhr-pop-hw.s2,.uhr-pop-hw.s3{background:var(--bad-soft);border-color:var(--bad)}
.uhr-optionen{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12px;color:var(--muted);padding:8px 8px 2px}
.uhr-optionen label{display:inline-flex;gap:5px;align-items:center;cursor:pointer;color:var(--fg)}
.uhr-optionen input{accent-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.uhr-koerper.wackeln,.uhr-auf.wackeln{animation:none}.zzz i{animation:none;opacity:1}}

/* P-08a: Uhr immer sichtbar (eigenes Fenster), Platzhalter, Erlaubnis-Frage */
.uhr-pin{position:absolute;top:-4px;left:-6px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:13px;line-height:1;padding:0;display:grid;place-items:center;opacity:0;transition:opacity .15s;z-index:1}
.uhr-koerper:hover .uhr-pin,.uhr-pin:focus-visible{opacity:1}
@media (hover:none){.uhr-pin{display:none}}
.uhr-link{border:none;background:none;padding:2px 0;color:var(--fg);font-size:12px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.uhr-link:hover{color:var(--accent)}
.uhr-optionen small{color:var(--muted)}
.uhr-hinweis.frage{font-size:13px;color:var(--fg);padding:10px 12px}
.uhr-platz{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:69;display:flex;gap:6px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.15);padding:4px 6px 4px 12px;font-size:13px}
.uhr-platz button{border:none;background:var(--surface-2);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;color:var(--fg)}
.uhr-platz button:hover{background:var(--accent-soft);color:var(--accent-text)}
.uhr-platz[data-art="wieder"]{padding-left:6px}
.uhr-platz[data-art="wieder"] button[data-p="nein"]{padding:4px 8px;background:none;color:var(--muted)}
body.mit-uhr .uhr-platz[data-art="wieder"]{right:calc(140px + env(safe-area-inset-right,0px))}
/* im kleinen Fenster */
html.pip,html.pip body.pip{height:100%;margin:0}
body.pip{overflow:auto;background:var(--bg)}
.uhr.pip{position:static;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:8px;min-height:100%;padding:14px 8px 8px;pointer-events:auto}
.uhr.pip .uhr-koerper{--k:clamp(80px,min(calc(100vw - 28px),calc(100vh - 36px)),240px);width:var(--k);height:var(--k);flex:0 0 auto;container-type:size}
.uhr.pip.oben .uhr-koerper{--k:84px}   /* Rückfall; uhr.js setzt die Größe nach dem freien Platz (pipMass) */
.uhr.pip .uhr-hw-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}   /* ganzer Text im Tooltip */
.uhr.pip .uhr-hinweis{font-size:12px;padding:8px 10px;gap:6px}
.uhr.pip .uhr-hinweis::after{bottom:-6px;width:10px;height:10px;margin-left:-5px}
.uhr.pip .btn.sm{padding:2px 8px;font-size:12px;min-height:28px}
.uhr.pip .uhr-zeit{font-size:clamp(15px,17cqw,40px)}
.uhr.pip .uhr-ort{font-size:clamp(9px,9.5cqw,18px);max-width:68cqw}
.uhr.pip .uhr-proj{font-size:clamp(10px,10.5cqw,20px);max-width:72cqw}
.uhr.pip .uhr-hinweis,.uhr.pip .uhr-pop,.uhr.pip .uhr-toast{width:100%;max-width:none}
.uhr.pip .uhr-hinweis::after{right:auto;left:50%;margin-left:-6px}
.uhr.pip .uhr-pop{max-height:none;box-shadow:none}
.uhr.pip .uhr-tipp{white-space:normal;text-align:center}
.uhr-leer{display:grid;gap:10px;justify-items:center;text-align:center;font-size:14px;font-weight:600;color:var(--muted)}
/* Bewertung der LPH: nicht beauftragte Phasen blass, per Haken beauftragen */
#bewertung tr.aus td{background:var(--surface-2)}
#bewertung tr.aus td:not(:first-child){opacity:.45}
#bewertung td.l{text-align:left;white-space:nowrap}
#bewertung .lph-an{display:inline-flex;gap:8px;align-items:center;cursor:pointer;font-weight:600}
#bewertung .lph-an input{accent-color:var(--accent);width:16px;height:16px}
#bewertung tr.aus .lph-an{font-weight:400;color:var(--muted)}
/* Abwesenheitsarten in den Einstellungen (E-07a) */
.abwtab td.c{text-align:center}
.abwtab input[type=text]{width:100%;min-width:180px}
.abwtab tr.aus td{background:var(--surface-2)}
.abwtab tr.neu td{border-top:2px solid var(--line)}
/* P-08b: zweite Krone rechts oben (Projekt), wie ein Drücker bei 2 Uhr */
.uhr-krone2{top:6px;left:auto;right:-9px;transform:rotate(45deg);z-index:2}
.uhr-krone2::after{background:var(--accent)}
.uhr.pip .uhr-krone2{top:9%;right:-2%}
/* E-07b: Abwesenheiten in Farbe und Muster ihrer Art (Übersicht, Legende, Einstellungen) */
.z.abw,.legende i.abw,.abw-muster{background-color:var(--surface)}
.z.abw.m-voll,.legende i.abw.m-voll,.abw-muster.m-voll{background:var(--f)}
.z.abw.m-schraffiert,.legende i.abw.m-schraffiert,.abw-muster.m-schraffiert{background:repeating-linear-gradient(45deg,var(--f) 0 3px,var(--surface) 3px 6px)}
.z.abw.m-punkte,.legende i.abw.m-punkte,.abw-muster.m-punkte{background:radial-gradient(circle,var(--f) 1.6px,var(--surface) 2px) 0 0/5px 5px}
.z.abw{box-shadow:inset 0 0 0 1px var(--f)}
.z.abw.beantragt,.legende i.abw.beantragt{opacity:.4}   /* noch nicht genehmigt: Halbton */
.z.abw.fest{opacity:.75}
.legende.abw-leg{margin:-4px 0 10px;flex-wrap:wrap}
.legende.abw-leg a{margin-left:auto}
.abw-muster{display:inline-block;width:26px;height:18px;border-radius:3px;vertical-align:middle;box-shadow:inset 0 0 0 1px var(--f)}
.abw-dar{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.abw-dar input[type=color]{width:36px;height:32px;padding:2px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer}
.abwtab select[name$=_wirkung]{min-width:200px;max-width:220px}
.abwtab select[name$=_muster]{min-width:110px}
.abwtab input[type=text]{min-width:150px}
.abwtab th{font-size:11px;letter-spacing:.04em}
.abwtab td,.abwtab th{padding-left:6px;padding-right:6px}
.abwtab input[type=number]{width:64px;min-width:0}
/* E-16: Projekte eines Mitarbeiters / Mitglieder eines Projekts */
.pm-filter{gap:12px;margin-bottom:8px}.pm-filter input[type=search]{flex:1 1 260px;min-height:38px;border:1px solid var(--feld);border-radius:var(--r);padding:0 10px;background:var(--surface)}
.pm-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px 16px;max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);padding:8px}
.pm{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:baseline;padding:5px 6px;border-radius:var(--r);cursor:pointer}
.pm:hover{background:var(--surface-2)}.pm.an{background:var(--accent-soft)}.pm small{grid-column:2;font-size:11px}
.pm[hidden]{display:none}
.mitgl{list-style:none;margin:0;padding:0;display:grid}
.mitgl li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.mitgl form{margin:0}
/* Mein Konto → Meine Projekte: eigene gebuchte Stunden je Projekt */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mprj td:first-child{white-space:normal;min-width:200px}
.mprj td.unter{padding-left:30px;position:relative}
.mprj td.unter::before{content:"↳";position:absolute;left:12px;color:var(--muted)}
.mprj tr.grp th{color:var(--fg)}
.mprj tfoot th{border-top:1px solid var(--fg);border-bottom:0;background:none;color:var(--fg);font-size:14px}
.mprj form{margin:0}
.mprj .pill{margin-left:4px}
/* A-03b: Phasen in der Projektansicht */
.phtab tr.ph-zu td{color:var(--muted)}
.phtab tr.ph-zu td:first-child,.phtab tr.ph-zu td:nth-child(2){text-decoration:none}
.phtab .ph-akt{white-space:nowrap}.phtab .ph-akt form{margin:0;display:inline}
.phtab .ph-ok{color:var(--good);font-weight:600;font-size:12px}
.tile .v.phase{font-size:22px;line-height:1.3}
.warnc{color:var(--warn)}
.tiles{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* Bedienbarkeit am Handy, hohe Kontraste, weniger Bewegung (Prüfung nach Apple-Richtlinien, 26.10.2026) */
/* Fingerbedienung: Bedienelemente mind. 44 px hoch; Eingabefelder mit 16 px, sonst vergrößert das iPhone die Seite beim Antippen */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{font-size:16px}
  .btn,.tn .stempel .btn{min-height:44px}
  .icon{width:44px;height:44px}
  .sub button,.berichte a{min-height:40px;display:inline-flex;align-items:center}
  .chk{min-height:40px}
  /* Textlinks: größere Tippfläche, ohne das Layout zu verschieben */
  .lnk,.uhr-link,.tn .hinweise li button,.tn .ptab .tz button,.tn .ph-tx button,.tn .anteil .lw .lnk{padding-block:10px;margin-block:-10px}
}
/* Systemeinstellung „Kontrast erhöhen“ */
@media (prefers-contrast:more){
  :root{--muted:#3f4044;--line:#a7a8ab;--feld:#55565a;--logo-grey:#6b6c70}
  :root[data-theme="dark"]{--muted:#c9cacd;--line:#5a5b60;--feld:#9a9ba0}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--muted:#c9cacd;--line:#5a5b60;--feld:#9a9ba0;--logo-grey:#a7a8ab}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Handy: alle Reiter sichtbar (umbrechen statt seitlich wischen), Überschrift über den Pfeilen ‹ › */
@media (max-width:700px){
  .tabs{flex-wrap:wrap;overflow:visible}
  .tabs .tab{min-height:44px;padding:0 10px}
  .daynav .date,.tn .nav h1{flex-basis:100%}
  .tabform{border-left:0;margin-left:0}
}
/* Projektname als Überschrift: normale Schreibweise, Versalien bleiben den kurzen Kartentiteln vorbehalten */
.cardhead h2.name{text-transform:none;letter-spacing:0;font-size:20px}
/* Handy: Kennzahlen zweispaltig statt untereinander */
@media (max-width:700px){.tile{flex-basis:140px;padding:12px 14px 14px}.tile .v{font-size:26px}.daynav .date,.tn .nav h1{font-size:20px}}

/* Seitentitel: auf allen Seiten gleich (wie die Tagesansicht) */
h1.date,.daynav .date{font-size:24px;font-weight:700;margin:0 6px 0 0;line-height:1.2;text-transform:none;letter-spacing:0}
/* Woche: heutiger Tag markiert */
tr.heute td{background:var(--surface-2)}
tr.heute td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.pill.heute-m{padding:0 8px;margin-left:4px}
.pill.heute-m::before{display:none}

/* Handy (Prüfung der Bedienbarkeit, 27.10.2026) */
@media (max-width:700px){
  /* Kopfleiste scrollt mit, statt ein Viertel des Bildschirms zu belegen; kompakter Firmenblock */
  .top{position:static}
  .brand{padding-block:8px}
  .ibv{font-size:32px}
  .brandtxt small{display:none}
  h1.date,.daynav .date{font-size:20px}
  /* Woche: Kommen, Gehen, Soll und Projekte nur am PC (stehen auch in der Tagesansicht), damit Ist, +/− und Status ohne Wischen passen */
  .wochentab .nh,.mprj .nh{display:none}
  .wochentab th,.wochentab td{padding-inline:8px}
  .wochentab td:first-child{white-space:normal}
  /* Tabellen mit Aktionen (z. B. Anträge) als Karten untereinander */
  table.karten,table.karten tbody,table.karten tr,table.karten td{display:block;width:auto}
  table.karten thead{display:none}
  table.karten tr{padding:12px;border-bottom:1px solid var(--line)}
  table.karten tbody tr:last-child{border-bottom:0}
  table.karten td{border:0;padding:2px 0;white-space:normal;text-align:left}
  table.karten td.kt{font-weight:700;font-size:15px;padding-bottom:4px}
  table.karten td[data-k]::before{content:attr(data-k) ": ";color:var(--muted);font-size:13px}
  table.karten td.kf{padding-top:10px}
  table.karten td.kf input[type=text]{flex:1 1 100%}
}

/* Lesbarkeit: Hilfetexte, Legenden und Beschriftungen mindestens 13 px, Kleinstes 12 px (Prüfung 27.10.2026) */
.note,.small,.legend,.legende,.field,.vfeld,.vfeld small,.pill,.errorlist,.speicher,.uhr-optionen,.uhr-opt small,.uhr-pop .kopfz{font-size:13px}
.brandtxt small,.brandtxt em,.rolle,.ftab th,.abwtab th,.pm small,.matrix thead th,.matrix .zn{font-size:12px}

/* Ring „Anteil Kundenprojekte“ (R-08): ganzer Kreis = Arbeitszeit; Kundenprojekte kräftig, interne Konten hell,
   Striche beim Ziel (durchgezogen) und bei der Mindestbuchung (gestrichelt) */
.ring-v{stroke:var(--good);stroke-linecap:butt}
.ring-i{fill:none;stroke:var(--good);stroke-opacity:.35;stroke-width:10}
.ring-mz,.ring-mm{stroke:var(--fg);stroke-width:1.6}
.ring-mm{stroke-dasharray:2 1.6}
.ring-leg{justify-content:center}
.ring-leg i.k{background:var(--good)}
.ring-leg i.in{background:color-mix(in srgb,var(--good) 35%,var(--surface))}
.ring-leg i.mz,.ring-leg i.mm{width:0;height:14px;border-radius:0;margin:0 8px 0 4px;vertical-align:-3px}
.ring-leg i.mz{border-left:2px solid var(--fg)}
.ring-leg i.mm{border-left:2px dashed var(--fg)}

/* Einstiegsseiten (Anmelden, Abgemeldet): links Marke und ein stilisierter Arbeitstag, rechts eine Karte mit einer Aktion */
.einstieg{min-height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,400px);gap:56px;
  align-items:center;max-width:980px;width:100%;margin:0 auto;padding-block:32px}
.ein-logo{font-size:104px;-webkit-text-stroke:2px var(--logo-grey);display:block}
.ein-firma{font-size:13px;font-weight:700;color:var(--muted);margin:18px 0 4px;letter-spacing:.02em}
.ein-titel{font-size:42px;line-height:1.05;font-weight:700;color:var(--accent-text);letter-spacing:-.01em}
.ein-satz{font-size:18px;max-width:30ch;margin:14px 0 32px}
.ein-tag{margin:0;max-width:440px}
.ein-spur{position:relative;height:30px;background:var(--surface-2);border-radius:var(--r)}
.ein-spur i{position:absolute;top:5px;bottom:5px;border-radius:2px}
.ein-spur i.pz{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 6px)}
.ein-achse{position:relative;height:18px;font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.ein-achse span{position:absolute;top:0}
.ein-karte{padding:32px;gap:16px;border-top:3px solid var(--accent)}
.ein-karte p{margin:0}
.btn-ms{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 20px;background:var(--fg);
  color:var(--bg);border-radius:var(--r);font-weight:700;font-size:16px;text-decoration:none}
.btn-ms:hover{background:color-mix(in srgb,var(--fg) 82%,var(--accent))}
.btn-ms:focus-visible{outline-offset:3px}
.ein-hinweis{padding:10px 12px;border-radius:var(--r);font-size:14px}
.ein-hinweis.bad{background:var(--bad-soft);color:var(--bad)}
.ein-haken{width:52px;height:52px;border-radius:50%;background:var(--good-soft);color:var(--good);display:grid;place-items:center;
  font-size:26px;font-weight:700}
.ein-knopf{justify-content:center;min-height:48px;font-size:16px}
.ein-form{display:grid;gap:12px}
.ein-form input{min-height:44px}
.ein-form .btn{justify-content:center;min-height:48px}
@media (max-width:760px){
  .einstieg{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;padding-block:12px}
  .ein-logo{font-size:64px;-webkit-text-stroke-width:1.6px}
  .ein-titel{font-size:30px}
  .ein-satz{font-size:16px;margin-bottom:20px}
  .ein-karte{padding:22px}
  .btn-ms{padding:0 12px;gap:10px;font-size:15px;white-space:nowrap}
}
/* iPhone/iPad: Safari vergrößert die Seite beim Antippen von Feldern unter 16 px Schrift – auf Touch-Geräten daher 16 px */
@media (pointer:coarse){input,select,textarea{font-size:16px}}
/* Woche/Monat: Umschalter, Zwischensumme je KW, kompakte Zeile Kundenanteil, Karten Abschließen/Nachweis */
.umschalter{display:inline-flex;border:1px solid var(--fg);border-radius:var(--r);overflow:hidden;margin-right:4px}
.umschalter a{padding:6px 14px;min-height:38px;display:inline-flex;align-items:center;text-decoration:none;color:var(--fg);font-weight:600;font-size:14px}
.umschalter a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.wochentab tr.zws td{background:var(--surface-2);font-weight:700;border-bottom:1px solid var(--line)}
.wochentab tr.zws a{color:inherit}
.anteilzeile{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;margin:0}
.card.abschluss,.card.nachweis{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.card.abschluss > div,.card.nachweis > div{flex:1 1 280px}
.monatswerte th{background:none;color:var(--muted);font-weight:600}
@media (max-width:700px){.umschalter{flex-basis:100%;width:max-content}}
/* Urlaubsantrag in Mein Konto (E-07a) */
#urlaub{scroll-margin-top:72px}
.antrag{display:grid;gap:10px}
.mailwahl{display:grid;gap:10px;justify-items:start}
.mailwahl .chk{white-space:normal}
.mailwahl .field{width:min(100%,280px)}
.einladung{margin-bottom:12px}
.mailliste{display:grid;gap:10px}
.mailvorlage{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0 14px}
.mailvorlage>summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;cursor:pointer;font-weight:600}
.mailvorlage[open]>summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.mv-chips{display:inline-flex;gap:6px}
.mv-info{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px;font-size:13px}
.mv-info dt{color:var(--muted);font-weight:600}.mv-info dd{margin:0}
.mv-form{display:grid;gap:10px;justify-items:start}
.mv-form .field{width:100%}
.mv-form input[type=text],.mv-form textarea{width:100%;box-sizing:border-box}
.mv-form textarea{font:14px/1.5 ui-monospace,Consolas,monospace;min-height:220px;resize:vertical}
.mv-form .chk{white-space:normal}
.mv-platz ul{margin:6px 0 0;padding-left:18px;font-size:13px}.mv-platz li{margin:2px 0}
.mv-vorschau{margin:14px 0;display:grid;gap:6px}
.mv-vorschau iframe{width:100%;height:520px;border:1px solid var(--line);border-radius:var(--r);background:#f3f3f4}
.antrag input[type=date]{min-height:38px}
.vorschau{display:grid;gap:8px;padding:14px;border:1px solid var(--accent);border-radius:var(--r);background:var(--accent-soft)}
.vorschau p{margin:0}
.uebersprungen{margin:0;padding-left:18px}
details > summary{cursor:pointer;font-weight:600;padding:4px 0}
details > .tw{margin-top:8px}

/* Woche/Monat: Leiste rechts über der Tabelle – Nachweis als kleine Knöpfe, Abschließen bzw. Stand der Woche */
.daynav .leiste{margin-left:auto;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.daynav .nachweis-links{display:inline-flex;align-items:center;gap:4px}
.daynav .nachweis-links .muted{margin-right:2px}
.daynav .leiste form{margin:0}
@media (max-width:700px){.daynav .leiste{margin-left:0;flex-basis:100%;justify-content:space-between}}

/* Woche/Monat: „Was fehlt noch?“, Monatskalender (nur PC), zwei halbe Felder (Rad, Stunden nach Projekt) */
.fehltliste{border-left:4px solid var(--warn);border-radius:0}
.fehltliste h2{margin:0 0 6px}
.fehltliste ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fehltliste li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:4px 0}
.fehltliste li a{font-weight:700;min-width:78px}
.fehltliste li span{color:var(--muted)}

.kal{table-layout:fixed;width:100%}
.kal th,.kal td{border:1px solid var(--line);padding:0;vertical-align:top}
.kal thead th{padding:6px 8px;font-size:12px;color:var(--muted);text-align:left}
.kal thead th:first-child{width:92px}
.kal th.kw{padding:8px;text-align:left;display:table-cell;font-size:13px}
.kal th.kw a{display:block;font-weight:700}
.kal th.kw span{display:block}
.kal td.kt a{display:flex;flex-direction:column;gap:2px;min-height:84px;padding:6px 8px;color:var(--fg);text-decoration:none}
.kal td.kt a:hover,.kal td.kt a:focus-visible{background:var(--surface-2)}
.kal .kn{font-weight:700;font-size:13px}
.kal .kf{font-size:11px;color:var(--muted);line-height:1.2}
.kal .ki{font-size:15px;font-weight:600;margin-top:auto}
.kal .kd{font-size:12px}
.kal .ks{font-size:12px;color:var(--muted);margin-top:auto}
.kal .pill{margin-top:auto;align-self:flex-start;font-size:11px;padding:1px 8px}
.kal td.leer{background:var(--surface-2)}
.kal td.st-frei,.kal td.st-vorher{background:var(--surface-2)}
.kal td.st-frei .kn,.kal td.st-vorher .kn,.kal td.st-zukunft .kn{color:var(--muted)}
.kal td.heute{box-shadow:inset 0 0 0 2px var(--accent)}
.kal td.st-fehlt{box-shadow:inset 3px 0 0 var(--bad)}
.kal td.st-offen,.kal td.st-beantragt{box-shadow:inset 3px 0 0 var(--warn)}
.kal td.heute.st-fehlt,.kal td.heute.st-offen{box-shadow:inset 0 0 0 2px var(--accent)}
.nur-handy{display:none}
@media (max-width:700px){.nur-pc{display:none}.nur-handy{display:block}}

.saldozeile{display:flex;gap:10px;align-items:baseline;justify-content:flex-end;margin:6px 4px 0;font-size:14px}
.halb{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;margin-top:16px;align-items:start}
.halb .card{margin:0}
.ring-einzel svg{width:150px;height:150px}
.ring-einzel figcaption{font-size:13px}
.projbalken{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.projbalken li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;font-size:14px}
.projbalken .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.projbalken .balken{grid-column:1/-1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.projbalken .balken i{display:block;height:100%;background:var(--fg);border-radius:3px}
.projbalken .balken.intern i{background:var(--o2)}

/* Projektring (Woche/Monat): Bögen je Projekt – Kundenprojekte blau abgestuft (grün, wenn das Ziel erreicht ist),
   interne Konten grau; Legende rechts, am Handy darunter. ⓘ öffnet die Erklärung per Klick (auch am Handy). */
.pkarte{margin-top:16px}
.pring{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 28px;align-items:center}
.pring svg{width:170px;height:170px}
.pring .seg{fill:none;stroke-width:10}
.pring .ring-u{font-size:7px;fill:var(--muted)}
.seg-k{stroke:var(--o4);background:var(--o4)}
.pring.voll .seg-k{stroke:var(--good);background:var(--good)}
.seg-i{stroke:var(--o2);background:var(--o2)}
.st0{opacity:1}.st1{opacity:.78}.st2{opacity:.6}.st3{opacity:.45}.st4,.st5,.st6{opacity:.32}
.pring.voll .ring-t{fill:var(--good)}
.pleg .pziel{margin:0 0 8px;font-size:14px;font-weight:600}
.pleg ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pleg li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 44px;gap:8px;align-items:center;font-size:14px}
.pleg .pt{width:12px;height:12px;border-radius:3px;display:block}
.pleg .pt.leer{background:none;border:1.5px dashed var(--feld)}
.pleg .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pleg .num{text-align:right}
details.info{position:relative}
details.info summary{list-style:none;cursor:pointer;color:var(--muted);font-size:16px;min-width:32px;min-height:32px;display:grid;place-items:center;border-radius:50%}
details.info summary::-webkit-details-marker{display:none}
details.info summary:hover,details.info[open] summary{color:var(--fg);background:var(--surface-2)}
details.info p{position:absolute;right:0;top:36px;z-index:5;width:min(360px,80vw);margin:0;padding:12px 14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;line-height:1.5;color:var(--fg)}
@media (max-width:700px){.pring{grid-template-columns:1fr;justify-items:center}.pleg{width:100%}}
/* Projektring, Feinschliff: größerer Ring, Legende in zwei Gruppen mit Summenzeile, ausgewogene Breiten */
.pring{grid-template-columns:240px minmax(0,460px);justify-content:start;gap:16px 40px}
.pring svg{width:240px;height:240px}
.pring .ring-t{font-size:17px}
.pring .ring-u{font-size:5.6px}
.pleg{display:grid;gap:14px}
.pleg .pziel{margin:0;display:flex;gap:6px}
.pleg .pgr{display:grid;gap:6px}
.pleg .pgk{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 64px 44px;gap:8px;font-size:13px;font-weight:700;
  padding-bottom:4px;border-bottom:1px solid var(--line)}
.pleg .pgk .num{text-align:right}
.pleg .pgk.nz{color:var(--muted);border-bottom:none;font-weight:600}
.pleg li{grid-template-columns:12px minmax(0,1fr) 64px 44px}
@media (max-width:700px){.pring{grid-template-columns:1fr}.pring svg{width:220px;height:220px}}
@media (max-width:700px){.mprj td:first-child{min-width:0}}

/* Textlinks in Schriftfarbe (schwarz bzw. im dunklen Modus hell) statt Browser-Blau/-Lila, auch besuchte Links;
   rot erst beim Darüberfahren. Knöpfe, Reiter und Tabellenzellen haben eigene Farben. */
a,a:visited{color:var(--fg)}
a:hover{color:var(--accent-text)}
/* Meine Projekte: Entfernen als schlichtes ✕ (Hinweis beim Darüberfahren), Fläche groß genug für den Finger */
.mprj .entf{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid transparent;border-radius:var(--r);
  background:none;color:var(--muted);font-size:15px;cursor:pointer}
.mprj .entf:hover,.mprj .entf:focus-visible{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
@media (pointer:coarse){.mprj .entf{width:44px;height:44px}}
@media (max-width:700px){.mprj th,.mprj td{padding-inline:8px}}
details.info.links p{left:0;right:auto}
/* ⓘ mit mehreren Absätzen (z. B. unter dem Balken „Projekte heute“) */
details.info .info-text{position:absolute;right:0;top:36px;z-index:5;width:min(380px,85vw);padding:12px 14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;line-height:1.5;color:var(--fg)}
details.info .info-text p{position:static;width:auto;margin:0 0 6px;padding:0;border:0;box-shadow:none;background:none}
details.info .info-text p:last-child{margin-bottom:0}

/* Schnellwahl der Stoppuhr: Hauptaktionen als drei Knöpfe oben, Vorschläge leise darunter, Einstellungen hinter ⚙ */
.uhr-pop .kopfz{display:flex;align-items:center;gap:8px;justify-content:space-between}
.uhr-pop .kopfz .ohne{color:var(--accent-text)}
.uhr-zahnrad{flex:none;width:32px;height:32px;border:1px solid transparent;border-radius:50%;background:none;color:var(--muted);font-size:17px;cursor:pointer;display:grid;place-items:center}
.uhr-zahnrad:hover,.uhr-zahnrad:focus-visible,.uhr-zahnrad[aria-expanded=true]{color:var(--fg);background:var(--surface-2)}
.uhr-einst{display:grid;gap:6px;padding:8px 10px;margin:0 0 6px;background:var(--surface-2);border-radius:var(--r);font-size:13px}
.uhr-einst label{display:flex;gap:8px;align-items:center;cursor:pointer}
.uhr-einst input{accent-color:var(--accent)}
.uhr-einst .uhr-link{justify-self:start}
.uhr-haupt{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;padding:4px 0 8px}
.uhr-haupt .btn{justify-content:center;min-height:44px;padding:6px 8px;font-size:14px}
.uhr-haupt .btn i.pz{width:12px;height:12px;border-radius:50%;display:inline-block;background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 4px);border:1px solid var(--muted)}
.uhr-haupt .btn.primary{grid-column:1/-1}
.uhr-pop h3{margin:4px 8px 0;font-size:12px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.uhr-pop .uhr-opt{padding:6px 8px;font-size:13px;color:var(--muted)}
.uhr-pop .uhr-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uhr-pop .uhr-opt:hover,.uhr-pop .uhr-opt:focus-visible{color:var(--fg)}
.uhr-pop .uhr-opt i{flex-basis:10px;height:10px}
.uhr-schliessen{justify-self:center;margin-top:6px;border:none;background:none;color:var(--muted);font-size:13px;padding:8px 12px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.uhr-schliessen:hover{color:var(--fg)}
.uhr-haupt{grid-template-columns:1fr 1fr}
.uhr-haupt .btn{white-space:nowrap}
.uhr-haupt .btn:only-child,.uhr-haupt .btn:first-child:nth-last-child(2):not([data-k]){grid-column:1/-1}

/* Schnellwahl, zweite Runde: kein Scrollen (Vorschläge passen sich an), Hauptaktionen unten, keiner rot */
.uhr-pop{overflow:hidden;max-height:calc(100vh - 190px)}
.uhr.pip .uhr-pop{max-height:calc(100vh - 20px)}
.uhr-pop .kopfz>span{flex:1;min-width:0}
.uhr-pop .kopfz .uhr-zahnrad+.uhr-zahnrad{margin-left:-6px}
.uhr-vs{display:grid;gap:0;min-width:0}
.uhr-haupt{border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.uhr-haupt .btn.primary{grid-column:auto}
.uhr-haupt .btn.wichtig{grid-column:1/-1;border-width:2px;font-weight:700}
.uhr-haupt .btn:only-child{grid-column:1/-1}

/* Uhr: Hover deutet an, dass ein Klick einen neuen Abschnitt beginnt */
.uhr-plus{position:absolute;left:50%;bottom:16%;transform:translate(-50%,4px);font-size:10px;font-weight:700;white-space:nowrap;padding:2px 7px;
  border-radius:999px;background:var(--fg);color:var(--surface);opacity:0;transition:opacity .15s,transform .15s;pointer-events:none}
.uhr-face:hover .uhr-plus,.uhr-face:focus-visible .uhr-plus{opacity:1;transform:translate(-50%,0)}
.uhr-face:hover .uhr-proj,.uhr-face:focus-visible .uhr-proj{opacity:0}
.uhr-face.drehen .uhr-plus,.uhr-face.drehen:hover .uhr-plus{opacity:0}
.uhr.pip .uhr-plus{font-size:clamp(10px,7cqw,16px)}

/* Kronen-Drehmenü: Liste dreht senkrecht über das Zifferblatt, der gewählte Eintrag steht in der Mitte */
.uhr-face.drehen{border-color:var(--fg)}
.uhr-face.drehen .uhr-in{position:absolute;inset:14%;display:block;overflow:hidden;border-radius:50%}
.rot-k{position:absolute;top:6%;left:0;right:0;text-align:center;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);z-index:1}
.uhr-face .rot{position:absolute;inset:0;--h:22px;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.rot-l{position:absolute;left:0;right:0;top:calc(50% - var(--h) / 2);display:block;transform:translateY(calc(var(--i,0) * var(--h) * -1));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.rot-i{display:flex;align-items:center;justify-content:center;gap:4px;height:var(--h);padding:0 6px;font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .2s,font-size .2s}
.rot-i i{flex:none;width:7px;height:7px;border-radius:50%}
.rot-i.an{font-size:12px;font-weight:800;color:var(--fg)}
.uhr.pip .rot{--h:clamp(22px,13cqw,40px)}
.uhr.pip .rot-i{font-size:clamp(10px,7cqw,18px)}
.uhr.pip .rot-i.an{font-size:clamp(12px,9cqw,22px)}
.uhr.pip .rot-k{font-size:clamp(9px,6cqw,14px)}
@media (prefers-reduced-motion:reduce){.rot-l,.rot-i{transition:none}}

/* Ruhe-Zifferblatt (nichts läuft): klassisch, hochwertig, schlicht – IBV, Indizes, Zeiger, roter Sekundenzeiger */
.uhr-face.analog{background:var(--zb-gehaeuse);border-color:var(--zb-rand)}
.uhr-face.analog>svg:not(.zb){display:none}
.uhr-face .zb{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);transform:none}
.zb-rand{fill:none;stroke:var(--zb-rand);stroke-width:1.2}
.zb-g1{stop-color:var(--zb-1)}.zb-g2{stop-color:var(--zb-2)}
.zb-m{stroke:var(--zb-index);stroke-width:.45;opacity:.55}
.zb-i{fill:var(--zb-index)}
.zb-logo{font:300 7.4px/1 var(--font-sans);letter-spacing:1.6px;text-anchor:middle;fill:none;stroke:var(--zb-index);stroke-width:.38}
.zb-sub{font:600 2.1px/1 var(--font-sans);letter-spacing:.55px;text-anchor:middle;fill:var(--zb-index);opacity:.7}
.zb-ruhe{font:600 3.4px/1 var(--font-sans);text-anchor:middle;fill:var(--o4)}
.zb-h rect,.zb-mz rect{fill:var(--zb-zeiger);stroke:var(--zb-zeigerrand);stroke-width:.35}
.zb-s line{stroke:var(--accent-fill);stroke-width:.6;stroke-linecap:round}
.zb-s circle{fill:none;stroke:var(--accent-fill);stroke-width:.6}
.zb-k{fill:var(--zb-zeiger);stroke:var(--accent-fill);stroke-width:.7}
.uhr-face.analog .uhr-in{display:none}
.uhr-face.analog .uhr-plus{bottom:22%}
:root{--zb-gehaeuse:#f3f3f4;--zb-rand:#c9cacd;--zb-1:#ffffff;--zb-2:#e6e7ea;--zb-index:#2a2b2f;--zb-zeiger:#2a2b2f;--zb-zeigerrand:#2a2b2f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--zb-gehaeuse:#1b1c1f;--zb-rand:#4a4b50;--zb-1:#2c2d32;--zb-2:#0e0f11;--zb-index:#d9dadd;--zb-zeiger:#e9eaec;--zb-zeigerrand:#9c9da2}}
:root[data-theme="dark"]{--zb-gehaeuse:#1b1c1f;--zb-rand:#4a4b50;--zb-1:#2c2d32;--zb-2:#0e0f11;--zb-index:#d9dadd;--zb-zeiger:#e9eaec;--zb-zeigerrand:#9c9da2}

/* Schnellwahl-Kopf: zwei saubere Zeilen (Stand, dann Ort · Projekt), Knöpfe oben rechts */
.uhr-pop .kopfz{align-items:flex-start;gap:10px;padding:2px 4px 10px 8px}
.uhr-pop .kz-t{display:grid;gap:2px;min-width:0;flex:1}
.uhr-pop .kz-1{font-size:12px;color:var(--muted)}
.uhr-pop .kz-1 b{color:var(--fg)}
.uhr-pop .kz-2{font-size:14px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uhr-pop .kz-k{display:flex;gap:2px;flex:none;margin-top:-2px}
.uhr-pop .kz-k .uhr-zahnrad+.uhr-zahnrad{margin-left:0}

/* Drehmenü: kurze Texte, lange Ortsnamen mit „…“ */
.rot-i{max-width:100%;box-sizing:border-box}
.rot-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ⚙ direkt an der Uhr (wie die Pinnadel nur beim Darüberfahren) */
.uhr-rad{position:absolute;right:-6px;bottom:-2px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:14px;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:2}
.uhr-koerper:hover .uhr-rad,.uhr-rad:focus-visible,.uhr-rad[aria-expanded=true]{opacity:1}
.uhr-rad:hover{color:var(--fg);border-color:var(--fg)}
@media (hover:none){.uhr-rad{opacity:1}}
.uhr.pip .uhr-rad{opacity:.85}

/* Einstellungen: Farbwahl */
.uhr-einst .zb-wahl{display:flex;gap:14px}
.zb-punkt{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:2px;vertical-align:-1px}
.zb-punkt.rot{background:linear-gradient(#ff6b6b,#e2001a 45%,#9c0412)}
.zb-punkt.gold{background:linear-gradient(#f8e7a2,#d4af37 45%,#8f6d1c)}

/* Krone auf dem Zifferblatt; Stundenstriche in Kronenfarbe */
.zb-krone .zb-met{stroke:none}
.zb.rot .zb-met{fill:url(#zb-met-rot)}
.zb.gold .zb-met{fill:url(#zb-met-gold)}
.zb-ibv{font:900 30px/1 var(--font-sans);text-anchor:middle;fill:var(--zb-2);letter-spacing:-1px}
.zb.rot .zb-i{fill:#c8101d}
.zb.gold .zb-i{fill:#c9a13a}
.zb.rot .zb-k{stroke:#c8101d}
.zb.gold .zb-k{stroke:#c9a13a}
.zb-sub{font-size:1.8px;letter-spacing:.5px}

/* Zifferblatt kurz zwischendurch: weich über die laufende Anzeige blenden */
.uhr-face .zb{opacity:1;transition:opacity .6s}
.uhr-face:not(.analog):not(.blick) .zb{opacity:0;pointer-events:none}
.uhr-face.blick{background:var(--zb-gehaeuse)}
.uhr-face.blick .uhr-in,.uhr-face.blick .uhr-plus{opacity:0}
@media (prefers-reduced-motion:reduce){.uhr-face .zb{transition:none}}
/* Schnellwahl-Kopf, dritte Runde: Farbpunkt für den Ort, Projekt als Text; ⚙ und ✕ zurückhaltend grau */
.uhr-pop .kz-2{display:flex;align-items:center;gap:7px;min-width:0}
.uhr-pop .kz-2 .kz-ort{flex:none;width:10px;height:10px;border-radius:50%}
.uhr-pop .kz-2 .kz-ort.pz{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 4px);border:1px solid var(--muted)}
.uhr-pop .kz-2 .ohne{color:var(--accent-text)}
.uhr-pop .kz-2{overflow:hidden;text-overflow:ellipsis}
.uhr-pop .kz-k .uhr-zahnrad{color:var(--muted);opacity:.7;width:28px;height:28px;font-size:15px}
.uhr-pop .kz-k .uhr-zahnrad:hover,.uhr-pop .kz-k .uhr-zahnrad:focus-visible,.uhr-pop .kz-k .uhr-zahnrad[aria-expanded=true]{opacity:1;color:var(--fg)}
.uhr-pop .kz-2{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uhr-pop .kz-2 .kz-ort{display:inline-block;vertical-align:0;margin-right:7px}
.uhr-pop .kz-2 .kz-ort{box-shadow:0 0 0 1px var(--feld)}

/* Pausen-/Ruhezeit-Hinweis an der Uhr, schlank: eine Zeile, Farbpunkt, Kurztext, kleine Knöpfe – kein großer Kasten */
.uhr-hinweis.schlank{display:flex;align-items:center;gap:8px;width:auto;max-width:min(320px,calc(100vw - 32px));padding:5px 6px 5px 10px;
  border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.2;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.uhr-hinweis.schlank::after{display:none}
.uhr-hinweis.schlank .uhr-hw-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.uhr-hinweis.schlank .hw-p{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn)}
.uhr-hinweis.schlank.s2 .hw-p,.uhr-hinweis.schlank.s3 .hw-p{background:var(--bad)}
.uhr-hinweis.schlank.ruhe .hw-p{background:var(--o4)}
.uhr-hinweis.schlank.s1,.uhr-hinweis.schlank.s2,.uhr-hinweis.schlank.s3,.uhr-hinweis.schlank.ruhe{background:var(--surface);border-color:var(--line)}
.uhr-hinweis.schlank.s2,.uhr-hinweis.schlank.s3{border-color:var(--bad)}
.uhr-hinweis.schlank .hw-b{flex:none;border:1px solid var(--fg);background:none;color:var(--fg);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;cursor:pointer}
.uhr-hinweis.schlank .hw-b:hover{background:var(--fg);color:var(--surface)}
.uhr-hinweis.schlank .hw-x{flex:none;width:24px;height:24px;border:none;background:none;color:var(--muted);border-radius:50%;cursor:pointer;font-size:13px}
.uhr-hinweis.schlank .hw-x:hover{color:var(--fg);background:var(--surface-2)}
@media (pointer:coarse){.uhr-hinweis.schlank .hw-x{width:36px;height:36px}.uhr-hinweis.schlank .hw-b{padding:7px 12px}}

/* Pausen-/Ruhezeit-Hinweis kompakt: Punkt · zwei kurze Zeilen · Knöpfe; nichts wird abgeschnitten */
.uhr-hinweis.kompakt{display:flex;align-items:center;gap:10px;width:max-content;max-width:min(300px,calc(100vw - 32px));padding:8px 8px 8px 12px;
  border-radius:12px;font-size:13px;line-height:1.25;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.uhr-hinweis.kompakt::after{display:none}
.uhr-hinweis.kompakt.s1,.uhr-hinweis.kompakt.s2,.uhr-hinweis.kompakt.s3,.uhr-hinweis.kompakt.ruhe{background:var(--surface);font-weight:400}
.uhr-hinweis.kompakt.s2,.uhr-hinweis.kompakt.s3{border-color:var(--bad)}
.uhr-hinweis.kompakt .hw-p{flex:none;width:9px;height:9px;border-radius:50%;background:var(--warn)}
.uhr-hinweis.kompakt.s2 .hw-p,.uhr-hinweis.kompakt.s3 .hw-p{background:var(--bad)}
.uhr-hinweis.kompakt.ruhe .hw-p{background:var(--o4)}
.uhr-hinweis.kompakt .hw-txt{display:grid;gap:1px;min-width:0}
.uhr-hinweis.kompakt .hw-txt b{font-weight:700;color:var(--fg)}
.uhr-hinweis.kompakt .hw-txt>span:not(.sr){font-size:12px;color:var(--muted)}
.uhr-hinweis.kompakt .hw-k{display:flex;align-items:center;gap:2px;flex:none}
.uhr-hinweis.kompakt .hw-b{border:1px solid var(--fg);background:none;color:var(--fg);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer}
.uhr-hinweis.kompakt .hw-b:hover{background:var(--fg);color:var(--surface)}
.uhr-hinweis.kompakt .hw-x{width:26px;height:26px;border:none;background:none;color:var(--muted);border-radius:50%;cursor:pointer;font-size:13px}
.uhr-hinweis.kompakt .hw-x:hover{color:var(--fg);background:var(--surface-2)}
@media (pointer:coarse){.uhr-hinweis.kompakt .hw-x{width:36px;height:36px}.uhr-hinweis.kompakt .hw-b{padding:7px 12px}}
/* Abgedocktes Fenster: ⚙ klein und nur beim Darüberfahren; Hinweis passt sich der Fensterbreite an */
.uhr.pip .uhr-rad{width:clamp(18px,10cqw,24px);height:clamp(18px,10cqw,24px);font-size:clamp(10px,5.5cqw,13px);right:0;bottom:0;opacity:0}
.uhr.pip .uhr-koerper:hover .uhr-rad,.uhr.pip .uhr-rad:focus-visible,.uhr.pip .uhr-rad[aria-expanded=true]{opacity:.9}
.uhr.pip .uhr-hinweis.kompakt{width:100%;max-width:none;box-shadow:none}
.uhr.pip .uhr-hinweis.kompakt .hw-txt{flex:1}
/* Abgedocktes Fenster: kein ⚙ im Fenster */
.uhr.pip .uhr-rad{display:none}

/* Team (GF): Liste je Mitarbeiter, Woche oder Monat, ohne seitliches Scrollen */
.tfilter{margin:10px 0 4px}
.tfilter .field{flex:1 1 170px;max-width:240px}
.tfilter select{width:100%}
.tfilter-knoepfe{display:flex;gap:6px;align-items:center}
.tgespeichert{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:6px 0 12px}
.tchips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tchip{display:inline-flex;align-items:center;border:1px solid var(--feld);border-radius:999px;background:var(--surface);min-height:34px}
.tchip a{padding:4px 2px 4px 12px;color:var(--fg);text-decoration:none;font-weight:600;font-size:14px}
.tchip a:hover{color:var(--accent-text)}
.tchip form{margin:0;display:flex}
.tchip-x{border:0;background:none;color:var(--muted);font-size:18px;line-height:1;width:32px;height:32px;border-radius:50%}
.tchip-x:hover{color:var(--bad)}
.tchip.an{background:var(--fg);border-color:var(--fg)}
.tchip.an a,.tchip.an .tchip-x{color:var(--bg)}
.tspeichern summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--accent-text);min-height:34px;display:inline-flex;align-items:center}
.tspeichern form{margin-top:6px}
.tspeichern input[type=text]{flex:1 1 240px;max-width:360px}
.tspeichern .note{margin:6px 0 0}
.tl{margin-top:12px;--spalten:repeat(var(--tage),minmax(0,1fr))}
.tl-kopf,.tl-kopf7{display:grid;grid-template-columns:var(--spalten);gap:2px;position:sticky;top:var(--kopf-h,0px);z-index:2;
  background:var(--surface);padding:6px 0 4px;border-bottom:1px solid var(--line);font-size:11px;text-align:center;font-variant-numeric:tabular-nums}
.tl-kopf span{display:grid;line-height:1.15;font-weight:700}
.tl-kopf small{font-weight:400;color:var(--muted);font-size:10px}
.tl-kopf .we{color:var(--muted)}
.tl-kopf7{display:none;grid-template-columns:repeat(7,minmax(0,1fr));font-weight:700}
.tl-liste{list-style:none;margin:0;padding:0}
.tl-ma{padding:10px 0 12px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.tl-ma:last-child{border-bottom:0}
.tl-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.tl-wer{display:grid;flex:1 1 180px;min-width:0;line-height:1.3}
.tl-name{font-weight:700;color:var(--fg)}
.tl-werte{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}
.tl-werte div{display:grid;line-height:1.25}
.tl-werte dt{font-size:12px;color:var(--muted)}
.tl-werte dd{margin:0;font-weight:700;font-size:14px}
.tl-akt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-left:auto}
.tl-akt form{margin:0;display:inline-flex;align-items:center;gap:6px}
.btn.sm{min-height:32px;padding:4px 10px;font-size:13px}
.tl-tage{display:grid;grid-template-columns:var(--spalten);gap:2px}
.tl-monat .z{height:24px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.tl-monat .z .tl-n{display:none}
.tl .z.heute,.tl-zelle.heute{outline:2px solid var(--fg);outline-offset:1px}
.tl a:focus-visible{outline:3px solid var(--accent);outline-offset:1px;position:relative;z-index:1}
.tl-woche .tl-tage{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.tl-zelle{display:grid;gap:2px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);text-decoration:none;min-width:0}
.tl-zelle:hover{background:var(--surface-2)}
.tl-zelle.frei{background:var(--surface-2)}
.tl-tag{font-size:12px;color:var(--muted);white-space:nowrap}
.tl-wert{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;min-width:0;font-variant-numeric:tabular-nums}
.tl-wert span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-wert .z{flex:0 0 12px;width:12px;height:12px}
.legende i.z{display:inline-block}
@media (max-width:700px){
  .tfilter .field{flex:1 1 calc(50% - 10px);max-width:none;min-width:0}
  .tfilter-knoepfe{flex-basis:100%}
  .tl-info{gap:6px 14px}
  .tl-wer{flex-basis:100%}
  .tl-akt{margin-left:0}
  .tl-monat .tl-kopf{display:none}
  .tl-monat .tl-kopf7{display:grid}
  .tl-monat .tl-tage{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .tl-monat .tl-tage > :first-child{grid-column-start:var(--versatz)}
  .tl-monat .z{height:30px;justify-content:flex-start;align-items:flex-start;padding:2px}
  .tl-monat .z .tl-n{display:inline-block;font-size:11px;font-weight:700;line-height:1;padding:2px 3px;border-radius:2px;background:var(--surface);color:var(--fg)}
  .tl-monat .z.bad::after{margin-left:auto;margin-right:3px;line-height:24px}
  .tl-woche .tl-tage{gap:2px}
  .tl-zelle{padding:4px 3px;text-align:center}
  .tl-wert{flex-direction:column;gap:3px;font-size:12px}
  .tl-wert span{max-width:100%}
}