@font-face{font-family:"Nunito";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/nunito-v25-latin-regular.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/nunito-v25-latin-600.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/nunito-v25-latin-700.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/nunito-sans-v12-latin-regular.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/nunito-sans-v12-latin-600.woff2) format("woff2")}

/* ==========================================================================
   Design-System besser.design: ruhig, warm, klar. Alles läuft über diese Variablen.
   Animiert wird nur transform und opacity; bei prefers-reduced-motion ist alles aus (Block am Ende).
   ========================================================================== */
:root{
  /* Farben */
  --ink:#222120;
  --muted:#5c5955;
  --bg:#f6f4ef;
  --bg-deep:#eeebe4;
  --surface:#fff;
  --line:#e2ded6;          /* Trennlinien, rein dekorativ */
  --line-strong:#8d8a85;   /* Feldrahmen, 3:1 gegen Weiß */
  --accent:#1a6fa8;        /* Logo-Blau #2281c4, abgedunkelt für Kontrast 4,5:1 */
  --accent-dark:#14587f;
  --accent-soft:#e8f1f8;
  --danger:#a3141c;
  --ok-bg:#e6f2e8;--ok-ink:#1d4a2b;
  --err-bg:#fbe9ea;--err-ink:#7a0f16;
  --warn-bg:#fdf1e3;--warn-ink:#5e2f05;--warn-line:#b45309;
  /* Marke: kleine Akzente, nie großflächig */
  --brand-magenta:#b7087f;--brand-blue:#2281c4;--brand-green:#73ba7f;
  --brand-line:linear-gradient(90deg,var(--brand-magenta),var(--brand-blue) 55%,var(--brand-green));
  --ink-2:#3b3b3a;         /* Logo-Grau, Nebentext stark */
  --now:#9a0a6c;--now-soft:#f9e3f1;   /* Jetzt: läuft, heute, Zeitlinie (Logo-Magenta abgedunkelt, 8:1). Nur dort, wo gerade etwas passiert. */
  --ok:#2a6e42;--ok-soft:#e3f1e6;     /* Ist: erfasst (Logo-Grün abgedunkelt, 5,6:1) */
  --danger-soft:#fbe9ea;--danger-ink:#8a1016;
  /* Projektfarben als Paar Füllung/Text plus Rahmen (Text auf Füllung jeweils über 6,5:1); gesetzt über die Klassen .c-blau bis .c-grau */
  --p-blau-f:#dcebf7;--p-blau-t:#14466b;--p-blau-b:#5f94bd;
  --p-magenta-f:#f7dcee;--p-magenta-t:#7a0a56;--p-magenta-b:#c56aa6;
  --p-gruen-f:#ddefe0;--p-gruen-t:#1f5a30;--p-gruen-b:#6daa7c;
  --p-ocker-f:#f6e8cf;--p-ocker-t:#6a4a05;--p-ocker-b:#c9a24e;
  --p-violett-f:#e8e1f5;--p-violett-t:#43307a;--p-violett-b:#9a85cc;
  --p-teal-f:#d8eeee;--p-teal-t:#0f5252;--p-teal-b:#5fa9a9;
  --p-grau-f:#ebe9e4;--p-grau-t:#3b3b3a;--p-grau-b:#a09c95;
  --rail:88px;
  /* Form */
  --radius:12px;--radius-sm:8px;--radius-pill:99px;
  --shadow-sm:0 1px 2px rgba(34,33,32,.05);
  --shadow-md:0 1px 2px rgba(34,33,32,.05),0 6px 18px rgba(34,33,32,.07);
  /* Abstände */
  --s2:.75rem;--s3:1.1rem;--s4:1.6rem;
  /* Bewegung */
  --ease:cubic-bezier(.22,.8,.3,1);
  --ease-spring:cubic-bezier(.34,1.45,.5,1);
  --t-fast:140ms;--t-mid:220ms;--t-slow:300ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 .95rem/1.5 "Nunito Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,legend,.btn,.brand-t,.clock{font-family:"Nunito",system-ui,sans-serif}
h1{font-size:1.55rem;line-height:1.15;margin:.2rem 0 var(--s3);font-weight:700;letter-spacing:-.01em}
h2{font-size:1.1rem;line-height:1.25;margin:1.5rem 0 .6rem;font-weight:700}
.card h2:first-child{margin-top:0}
p{margin:.4rem 0 .8rem}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{color:var(--accent-dark)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:30;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted);font-size:.92rem}
.small{font-size:.82rem}

/* Gerüst: Leiste links (Rechner) bzw. Tableiste unten (Handy), Inhalt rechts. Alles ohne JavaScript bedienbar ("Mehr" ist ein Aufklappmenü aus details). */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.page-col{min-width:0}
.rail{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;z-index:25;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:.9rem 0 .8rem}
.rail-logo{display:block;margin:0 0 .9rem;border-radius:var(--radius-sm)}
.rail-logo img{display:block;width:62px;height:auto}
.rail-bd{display:block;width:28px;margin:.6rem auto 1rem;opacity:.85;transition:opacity .15s}
.rail-bd:hover{opacity:1}
.rail-bd img{display:block;width:28px;height:28px}
.mehr-bd img{display:block;width:104px;height:auto}
.rail nav{flex:1 1 auto;min-height:0;width:100%;display:flex}
.rail-list{list-style:none;margin:0;padding:0 .5rem;width:100%;display:flex;flex-direction:column;gap:.15rem}
.rail-list>li{display:block}
.rail-list>li>a,.mehr-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-decoration:none;color:var(--ink-2);padding:.55rem .2rem .5rem;border-radius:var(--radius-sm);font:600 .7rem/1.2 "Nunito",system-ui,sans-serif;letter-spacing:.01em;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.rail-list svg{display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rail-list>li>a:hover,.mehr-btn:hover,.mehr[open]>.mehr-btn{background:var(--bg);color:var(--ink)}
.rail-list>li>a:active{transform:scale(.96)}
.rail-list>li>a[aria-current],.mehr-btn.is-current{background:var(--ink);color:#fff}
.rail-more{margin-top:auto}
.mehr{position:relative}
.mehr-btn{list-style:none;cursor:pointer;color:var(--muted)}
.mehr-btn::-webkit-details-marker{display:none}
.mehr-panel{position:absolute;left:calc(100% + .6rem);bottom:0;min-width:13.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:.4rem;z-index:40}
.mehr[open] .mehr-panel{animation:drop var(--t-mid) var(--ease)}
.mehr-panel ul{list-style:none;margin:0;padding:0}
.mehr-panel a{display:flex;align-items:center;min-height:2.6rem;padding:.55rem .9rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.mehr-panel a:hover{background:var(--bg);color:var(--ink)}
.mehr-panel a[aria-current]{background:var(--ink);color:#fff}
.mehr-m{display:none}
.mehr-logout{margin:.3rem 0 0;padding-top:.3rem;border-top:1px solid var(--line)}
.mehr-logout button.link{display:flex;align-items:center;width:100%;min-height:2.6rem;padding:.55rem .9rem;border-radius:var(--radius-sm);text-align:left;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink)}
.mehr-logout button.link:hover{background:var(--bg);color:var(--ink)}
.mtop{display:none}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand img{display:block;height:auto;width:72px}
.brand-t{font-weight:700;font-size:1rem;color:var(--muted)}
:where(.page-col) nav a{display:block;padding:.45rem .8rem;border-radius:var(--radius-pill);color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;transition:transform var(--t-fast) var(--ease)}
:where(.page-col) nav a:hover{background:var(--bg-deep);color:var(--ink)}
:where(.page-col) nav a:active{transform:scale(.96)}
:where(.page-col) nav a[aria-current=page]{background:var(--ink);color:#fff}
:where(.page-col) nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.15rem .25rem}
@media (max-width:700px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;top:auto;left:0;right:0;bottom:0;height:auto;align-self:auto;flex-direction:row;padding:.3rem .3rem calc(.3rem + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);z-index:30}
  .rail-logo,.rail-bd,.rail-list>li.rail-only{display:none}
  .rail nav{display:block}
  .rail-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:0}
  .rail-list>li>a,.mehr-btn{width:100%;min-height:2.9rem;padding:.3rem .1rem;font-size:.68rem}
  .rail-list>li>a[aria-current],.mehr-btn.is-current{background:var(--now-soft);color:var(--now)}
  .rail-list>li>a[aria-current] span,.mehr-btn.is-current span:not(.vh){font-weight:700}
  .rail-more{margin-top:0}
  .mehr{position:static}
  .mehr-panel{position:fixed;left:.6rem;right:.6rem;bottom:calc(3.8rem + env(safe-area-inset-bottom));min-width:0;max-height:calc(100dvh - 5.5rem);overflow:auto}
  .mehr-panel ul{display:grid;grid-template-columns:1fr 1fr}
  .mehr-m{display:block}
  .mehr-bd{grid-column:1/-1;padding:.5rem .9rem .2rem}
  .mtop{display:flex;align-items:center;padding:.8rem 1rem 0}
}
@media print{.rail,.mtop,.skip{display:none}.app{display:block}}

/* KI-Zeilen (nur intern): ganze Zeile violett getönt plus Kennzeichen "KI", nicht in Summen */
.list tr.ki-row>td{background:#efe9f7}
.list tr.ki-row:hover>td{background:#efe9f7}
.badge.badge-ki{background:#4b2d7a;border-color:#4b2d7a;color:#fff;font-weight:700;letter-spacing:.04em}
.ki-row .act .btn{white-space:normal;text-align:left;line-height:1.25;max-width:11rem}
@media (max-width:700px){.stack-sm tr.ki-row{background:#efe9f7}}
.kpi.ki-tile{background:#efe9f7}
.kpis.duo{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.grp-detail>td{padding:0 .9rem .6rem;background:var(--surface)}
.grp-detail details>summary{cursor:pointer;color:var(--accent);font-weight:600;padding:.4rem 0;min-height:2.75rem;display:flex;align-items:center}
.grp-entries{list-style:none;margin:.2rem 0 .6rem;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm)}
.ge{display:grid;grid-template-columns:11rem minmax(10rem,1.3fr) minmax(8rem,2fr) 9.5rem 7rem;gap:.2rem .9rem;padding:.55rem .8rem;border-bottom:1px solid var(--line);align-items:start;font-size:.95rem}
.ge:last-child{border-bottom:0}
.ge-num{text-align:right;white-space:nowrap}
.ge-act{text-align:right}
.grp-entries .ki-row{background:#efe9f7}
@media (max-width:900px){.ge{grid-template-columns:1fr 1fr}.ge-desc,.ge-who{grid-column:1/-1}.ge-num,.ge-act{text-align:left}}
@media (max-width:700px){.stack-sm tr.grp-detail{padding:.2rem 0}.stack-sm .grp-detail>td{display:block;text-align:left}}
.ki-print{display:none}
@media print{.ki-block,.ki-row,.ki-switch,.ki-tile,.grp-detail,.grp-all-row,.ki-screen{display:none}.ki-print{display:inline}}

.wrap{max-width:96rem;margin:0 auto;padding:1.1rem 1.5rem 3rem}
.wrap:not(.narrow)>p,.wrap:not(.narrow)>.note-box{max-width:62rem}
.wrap.narrow{max-width:28rem;padding:3.5rem 1.2rem 4rem}
.head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.head h1{margin-bottom:.6rem}

/* Karten und Formulare */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin:0 0 1.2rem;box-shadow:none}
.stack>*+*{margin-top:1.05rem}
.stack>p{margin-top:.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem 1.2rem}
.grid.compact{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
label{font-weight:600;font-size:.95rem}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.6rem .8rem;min-height:2.75rem}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=date]:focus,input[type=time]:focus,input[type=number]:focus,select:focus,textarea:focus{
  outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23222120' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .85rem center/.85rem}
textarea{resize:vertical}
input[type=checkbox],input[type=radio]{width:1.2rem;height:1.2rem;accent-color:var(--accent);vertical-align:middle}
.check label,.radios label{font-weight:400;display:inline-flex;gap:.5rem;align-items:center;margin-right:1rem;min-height:1.9rem}
.radios{margin:.2rem 0 .8rem}
fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem 1.1rem 1rem;margin:0}
fieldset.card{padding:1.2rem;border-radius:var(--radius)}
legend{font-weight:700;padding:0 .4rem}
details.card summary{cursor:pointer;font-family:"Nunito",sans-serif;font-weight:700;font-size:1.1rem;padding:.1rem 0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:"";width:.6rem;height:.6rem;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-mid) var(--ease);flex:0 0 auto}
details.card[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details.card[open] summary{margin-bottom:1rem}
details[open]>.stack,details[open]>.table-wrap{animation:rise var(--t-slow) var(--ease)}
.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* Knöpfe */
.btn{position:relative;display:inline-block;font-weight:700;font-size:.95rem;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--accent);color:#fff;border:2px solid var(--accent);border-radius:var(--radius-sm);padding:.55rem 1.1rem;min-height:2.75rem;
  transition:transform var(--t-fast) var(--ease)}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.97)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--bg);color:var(--ink);border-color:var(--ink)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:#7e0f15;border-color:#7e0f15}
.btn-lg{font-size:1.05rem;padding:.75rem 1.8rem;min-height:3.1rem;border-radius:var(--radius-sm)}
button.link{background:none;border:0;padding:.3rem .2rem;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
button.link:hover{color:var(--accent-dark)}
button.link.danger,.danger{color:var(--danger)}

/* Meldungen: gleiten ein; Erfolg bekommt einmalig einen Haken */
.flash{position:relative;overflow:hidden;padding:.85rem 1.2rem;border-radius:var(--radius-sm);margin:0 0 1.2rem;font-weight:600;animation:drop var(--t-slow) var(--ease)}
.flash-ok{background:var(--ok-bg);color:var(--ok-ink);padding-left:3.2rem}
.flash-ok::before{content:"\2713";position:absolute;left:.9rem;top:50%;width:1.55rem;height:1.55rem;margin-top:-.775rem;border-radius:50%;background:var(--ok-ink);color:#fff;
  display:grid;place-items:center;font-size:.9rem;line-height:1;animation:pop .5s var(--ease-spring) both .1s}
.flash-err{background:var(--err-bg);color:var(--err-ink)}
.badge{display:inline-block;font-size:.8rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-pill);padding:0 .6rem;color:var(--muted);white-space:nowrap}

/* Projektfarben als Klassen: setzen --pf (Füllung), --pt (Text), --pb (Rahmen). Ohne Projekt gilt .c-grau (Intern). */
.c-blau{--pf:var(--p-blau-f);--pt:var(--p-blau-t);--pb:var(--p-blau-b)}
.c-magenta{--pf:var(--p-magenta-f);--pt:var(--p-magenta-t);--pb:var(--p-magenta-b)}
.c-gruen{--pf:var(--p-gruen-f);--pt:var(--p-gruen-t);--pb:var(--p-gruen-b)}
.c-ocker{--pf:var(--p-ocker-f);--pt:var(--p-ocker-t);--pb:var(--p-ocker-b)}
.c-violett{--pf:var(--p-violett-f);--pt:var(--p-violett-t);--pb:var(--p-violett-b)}
.c-teal{--pf:var(--p-teal-f);--pt:var(--p-teal-t);--pb:var(--p-teal-b)}
.c-grau{--pf:var(--p-grau-f);--pt:var(--p-grau-t);--pb:var(--p-grau-b)}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--pb,var(--line-strong));flex:0 0 auto}

/* ---------- Heute ---------- */
.pagehead{display:flex;align-items:center;gap:.8rem 1.2rem;margin-bottom:1rem;flex-wrap:wrap}
.pagehead .title{display:flex;flex-direction:column;gap:.1rem}
.pagehead .over{font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.pagehead h1{margin:0}
.qc-wrap{margin-left:auto;position:relative;flex:1 1 24rem;max-width:38rem;display:flex;align-items:center;gap:.4rem}
.qc{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:.3rem .35rem .3rem 1rem;color:var(--muted)}
.qc:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.qc svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex:0 0 auto}
.qc input[type=text],.qc input[type=text]:hover,.qc input[type=text]:focus{flex:1;min-width:0;width:auto;border:0;border-radius:0;background:none;padding:.3rem 0;min-height:2.2rem;outline:0}
.qc input::placeholder{color:#6b6762;opacity:1}
.qc kbd{margin-left:auto}
kbd{font:600 .75rem/1 "Nunito Sans",system-ui,sans-serif;color:var(--muted);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;padding:.2rem .45rem;background:#fff;white-space:nowrap}
.qc .btn{flex:0 0 auto;border-radius:var(--radius-pill)}
.qc-help summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px solid var(--line-strong);border-radius:50%;background:#fff;font-weight:700;color:var(--ink-2)}
.qc-help summary::-webkit-details-marker{display:none}
.qc-help[open] p{position:absolute;right:0;top:calc(100% + .4rem);width:min(26rem,100%);background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .9rem;box-shadow:var(--shadow-md);z-index:5;margin:0}
.heute{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem;align-items:start}
.col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;margin:0}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.panel-h h2{margin:0;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.panel-h .act{font-size:.85rem}
.panel-h .sub{font-size:.8rem;font-weight:400;color:var(--muted)}

/* Stoppuhr: der Mittelpunkt der Seite */
.timer{position:relative;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);padding:1.1rem 1.2rem;margin:0;box-shadow:none}
.timer.is-running{border-color:var(--p-magenta-b);background:linear-gradient(180deg,#fff 0,#fdf7fb 100%)}
.timer.is-paused{background:var(--bg)}
.timer-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-weight:700;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase}
.timer-top h2{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.timer.is-running .timer-top{color:var(--now)}
.live{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--now);position:relative}
.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--now);opacity:.45;animation:pulse 2s ease-out infinite}
.clock{font-size:4.2rem;font-weight:700;line-height:1;margin:.35rem 0 .3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.clock small{font-size:1.6rem;color:var(--muted);font-weight:600;letter-spacing:0}
.clock-paused{font-size:clamp(2rem,6vw,3.2rem);color:var(--muted)}
.timer-what{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:1rem}
.timer-what .proj{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--pt);background:var(--pf);border-radius:var(--radius-pill);padding:.5rem .9rem .5rem .75rem}
.timer-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.6rem;align-items:end;margin-top:.9rem}
.timer-form .field label{font-size:.85rem}
.timer-hint{margin:.5rem 0 0}
.timer .edit-times{margin-top:.4rem}
.timer-discard{margin:0}
.timer-discard button.link{font-size:.85rem}
.timer .stack{margin-top:.4rem}
.timer .btn-now{background:var(--now);border-color:var(--now)}
.timer .btn-now:hover{background:#7a0a56;border-color:#7a0a56}
.plan-next{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .9rem;margin-top:1rem;padding:.7rem .9rem;border-radius:var(--radius-sm);background:var(--bg)}
.plan-next .when{font-weight:700;white-space:nowrap;color:var(--pt)}
.plan-what{flex:1 1 14rem;min-width:0}
.plan-form{display:flex;align-items:flex-end;gap:.5rem;flex-wrap:wrap}
.plan-form .field label{font-size:.78rem}
.plan-form select{min-height:2.2rem;padding:.25rem 2rem .25rem .6rem;max-width:12rem}
.plan-note{flex-basis:100%;margin:0}

/* Tag: Plan und Ist als Linie (SVG, Positionen als Attribute) */
.tl{position:relative;margin:.9rem 0 .6rem 2.6rem}
.tl-lab{position:absolute;left:-2.7rem;width:2.4rem;text-align:right;font-size:.75rem;line-height:1.5;color:var(--muted);font-weight:600}
.tl-lab-plan{top:28px}
.tl-lab-ist{top:67px}
.tl-svg{display:block;overflow:visible;font-family:"Nunito Sans",system-ui,sans-serif}
.tl-svg .gl{stroke:var(--line);stroke-width:1}
.tl-svg .ax{font-size:11.5px;fill:var(--muted)}
.tl-svg .lane{fill:var(--bg-deep)}
.tl-svg .win{fill:#fff}
.tl-svg .blk .b-r{fill:var(--pf);stroke:var(--pb);stroke-width:2}
.tl-svg .blk.ist .b-r{stroke:var(--pt);stroke-width:1.5}
.tl-svg .blk.ist.running .b-r{stroke:var(--now);stroke-dasharray:5 3}
.tl-svg .b-t{font-size:12px;font-weight:700;fill:var(--pt)}
.tl-svg .blk.ist.running .b-t{fill:var(--now)}
.tl-svg .now{stroke:var(--now);stroke-width:2}
.tl-svg .now-t{font-size:11.5px;font-weight:700;fill:var(--now)}
.entries{list-style:none;margin:.9rem 0 0;padding:0}
.entries>li{display:grid;grid-template-columns:7.4rem minmax(0,1fr) auto auto;gap:.2rem .8rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line)}
.entries>li:last-child{border-bottom:0}
.entries .t{font-weight:600;white-space:nowrap}
.entries .what{min-width:0}
.entries .p{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--pt)}
.entries .d{display:block;color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entries .dur{font-weight:700;white-space:nowrap;text-align:right}
.entries .dur.run{color:var(--now)}
.entries .act{white-space:nowrap;font-size:.85rem;min-width:4.5rem;text-align:right}
.entries .row-warn{grid-column:1/-1;background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--radius-sm);padding:.6rem .8rem;margin:.2rem 0}
.entries .row-warn .warns{margin:0 0 .4rem}
.tag-empty{margin:.6rem 0 0}

/* Woche: sieben Säulen (SVG), Kapazität als Umriss */
.wk-defs{position:absolute}
.hp-a{fill:#dbe9f5}.hp-b{fill:#8fb8d8}
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;margin:.4rem 0 .6rem}
.wk .d{display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:inherit;border-radius:var(--radius-sm)}
.wk .col{display:block;height:7.5rem;min-width:0;border-radius:6px 6px 3px 3px;overflow:hidden}
.wk .col.off{height:1.6rem;background:var(--bg-deep)}
.wk-svg{display:block;width:100%;height:100%}
.wk-svg .cap{fill:#fff;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 3}
.wk-svg .f-ist{fill:var(--ok)}
.wk-svg .f-plan{fill:url(#hatch-plan);stroke:var(--accent);stroke-width:1}
.wk-svg .f-over{fill:var(--danger)}
.wk .lab{margin-top:.35rem;font-size:.78rem;line-height:1.25;text-align:center}
.wk .lab b{display:block;font-weight:700}
.wk .lab.today b{color:var(--now)}
.wk .lab .danger{color:var(--danger-ink);font-weight:600}
.legend{list-style:none;margin:0 0 .6rem;padding:0;display:flex;gap:.3rem 1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legend li{display:inline-flex;align-items:center;gap:.35rem}
.legend i{display:inline-block;width:.9rem;height:.55rem;border-radius:3px}
.legend .l-ist{background:var(--ok)}
.legend .l-plan{background:repeating-linear-gradient(135deg,#8fb8d8 0 3px,#dbe9f5 3px 6px);border:1px solid var(--accent)}
.legend .l-over{background:var(--danger)}
.legend .l-cap{background:#fff;border:1px dashed var(--line-strong)}
.wk-sum{display:flex;justify-content:space-between;gap:.3rem 1rem;font-size:.85rem;padding-top:.6rem;margin-top:.6rem;border-top:1px solid var(--line);flex-wrap:wrap}
.danger-t{color:var(--danger-ink);font-weight:600}
.s-week .chart-table{margin-top:.6rem}

/* Hinweise als ruhige Zeilen */
.hints{list-style:none;margin:0;padding:0}
.hints>li{display:flex;gap:.7rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.hints>li:last-child{border-bottom:0}
.hints .k{flex:0 0 6.6rem;font-weight:700;font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.hints .k.warn{color:var(--warn-ink)}
.hints .t{flex:1;min-width:0}
.hints>li a{white-space:nowrap}
.hints-more{border-top:1px solid var(--line)}
.hints-more summary{cursor:pointer;font-weight:600;color:var(--accent);padding:.5rem 0;min-height:2.5rem;display:flex;align-items:center}
.hints-hide{margin:.3rem 0 0}

/* Zuletzt verwendet */
.recent{list-style:none;margin:0 0 .9rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.recent form{height:100%}
.recent-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;height:100%;text-align:left;font:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55rem .7rem;cursor:pointer;color:var(--ink);transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.recent-btn:hover{border-color:var(--accent)}
.recent-btn:active{transform:scale(.98)}
.recent-btn strong{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--pt);text-align:left}
.recent-btn span{font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
details.fold{border-top:1px solid var(--line);padding-top:.7rem}
details.fold summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:2.4rem}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::after{content:"";width:.5rem;height:.5rem;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
details.fold[open]>summary{margin-bottom:.8rem}
details.fold[open]>summary::after{transform:rotate(-135deg)}
.sub-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;font-size:1rem;margin:1.1rem 0 .6rem}
.sub-h .muted{font-size:.82rem;font-weight:400}
.timer .recent{margin-bottom:.9rem}
details.start-other{margin-top:.3rem}
@keyframes pulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.6);opacity:0}}

@media (max-width:980px){
  .heute{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .col{display:contents}
  .s-timer{order:1}.s-tag{order:2}.s-week{order:3}.s-hints{order:4}.s-recent{order:5}
}
@media (max-width:700px){
  .qc-wrap{flex-basis:100%;max-width:none;margin-left:0}
  .qc kbd{display:none}
  .clock{font-size:3.4rem}
  .timer{padding:.9rem .95rem}
  .timer-form{grid-template-columns:1fr 1fr}
  .timer-form .field{grid-column:1/-1}
  .tl{margin-left:2.6rem}
  .tl-svg .ax-odd{display:none}
  .wk{gap:.3rem}
  .wk .col{height:6rem}
  .wk .lab{font-size:.75rem}
  .recent{grid-template-columns:minmax(0,1fr)}
  .hints .k{flex-basis:5.4rem}
  .entries>li{grid-template-columns:minmax(0,1fr) auto}
  .entries .t{grid-column:1/-1;font-size:.82rem;color:var(--muted)}
  .entries .act{grid-column:1/-1;text-align:left}
  .panel{padding:.9rem .95rem}
}

/* Tabellen: ruhige Zeilen, Ziffern gleich breit */
.table-wrap{overflow-x:auto;margin:0 0 .8rem}
table.list{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.list th,.list td{padding:.6rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.list thead th{background:var(--bg-deep);font-weight:700;font-size:.82rem;color:var(--muted);white-space:nowrap}
.list.cmp thead th{white-space:normal;vertical-align:bottom;min-width:5.5rem}
.list.cmp thead th:first-child{min-width:7rem}
@media (min-width:701px){.list.cmp td.num{white-space:normal}}
.cmp .cvw{min-width:0;text-align:right;white-space:normal}
.cmp .cv,.cmp .cvt{white-space:nowrap;display:inline-block}
@media (max-width:700px){.stack-sm.cmp td[data-label]::before{flex:1 1 auto;min-width:0}.cmp .cvw{flex:0 0 auto}}
.list thead th:first-child{border-top-left-radius:calc(var(--radius) - 1px)}
.list thead th:last-child{border-top-right-radius:calc(var(--radius) - 1px)}
.list tfoot th,.list tfoot td{font-weight:700;border-bottom:0;background:var(--bg-deep)}
.list tfoot tr:last-child>:first-child{border-bottom-left-radius:calc(var(--radius) - 1px)}
.list tfoot tr:last-child>:last-child{border-bottom-right-radius:calc(var(--radius) - 1px)}
.list tbody tr:last-child>*{border-bottom:0}
.list tbody th{font-weight:400}
.list tbody tr:hover>td,.list tbody tr:hover>th{background:#faf8f5}
.list .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.list td[data-label=Dauer]{font-weight:700}
.list td[data-label=Kunde] strong{font-weight:700}
.list .chk{width:2.4rem}
.list .act{white-space:nowrap}
.list .act form{display:inline}
tr.today th,tr.today td{background:var(--accent-soft)!important;font-weight:600}
.sum{font-weight:400;margin:.6rem 0 1.4rem;font-variant-numeric:tabular-nums}

/* Handy: Tabellen als Karten */
@media (max-width:700px){
  .wrap{padding:.6rem 1rem 6.5rem}
  h1{font-size:1.45rem}
  .card{padding:1rem}
  .btn-lg{width:100%}
  table.stack-sm,.stack-sm tbody,.stack-sm tr,.stack-sm td{display:block;width:100%}
  table.stack-sm{border:0;background:none;box-shadow:none}
  .stack-sm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .stack-sm tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin:0 0 .8rem;padding:.4rem 0;box-shadow:var(--shadow-sm)}
  .stack-sm td{border:0;padding:.3rem 1rem;display:flex;justify-content:space-between;gap:1rem;text-align:right}
  .stack-sm tbody tr:hover>td{background:none}
  .stack-sm td[data-label]::before{content:attr(data-label);font-weight:600;text-align:left;color:var(--muted);flex:0 0 auto}
  .stack-sm td.chk{width:auto}
  .stack-sm td.act{justify-content:flex-start;gap:.9rem;flex-wrap:wrap}
  .stack-sm .num{text-align:right}
  .stack-sm td.pb-cell{display:block;text-align:left;min-width:0}
  .stack-sm td.pb-cell::before{display:block;margin-bottom:.2rem}
  .stack-sm tfoot,.stack-sm tfoot tr,.stack-sm tfoot td{display:block;width:100%}
  .stack-sm tfoot tr{background:var(--bg-deep)}
  .stack-sm tfoot td[data-label]{display:flex}   /* Summenzeile: Bezeichnung links, Wert rechts wie in den Karten (sonst kleben beide aneinander) */
  /* Karten mit langen Werten (mehrteilige Zellen, z. B. Zahl plus Hinweis): Wert darf umbrechen statt rechts über die Karte zu laufen */
  .stack-wrap td{display:block;text-align:right}
  .stack-wrap td::before{float:left;margin-right:1rem;max-width:60%}
  .stack-wrap td.num{white-space:normal}
}
/* Auswertung */
.btn-sm{font-size:.9rem;padding:.35rem .9rem;min-height:2.3rem;border-radius:var(--radius-pill)}
.btn[aria-current=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.quick{margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem;margin:0 0 1.4rem}
.kpi{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem;margin:0;box-shadow:var(--shadow-sm);transition:transform var(--t-mid) var(--ease)}
.kpi:hover{transform:translateY(-2px)}
.kpi dt{font-size:.9rem;color:var(--muted);font-weight:600}
.kpi dd{margin:.1rem 0 0;font:700 1.7rem/1.2 "Nunito",sans-serif;font-variant-numeric:tabular-nums}
.kpi dd.sub{font:400 .85rem/1.3 "Nunito Sans",sans-serif;color:var(--muted);margin-top:.2rem}
.kpi .unit{font-size:1rem;font-weight:600;color:var(--muted)}
figure.chart{margin:0 0 1.4rem}
/* Farbpunkt vor Gruppennamen (Tabellen); die Farbe steht im SVG-Attribut fill, der Name daneben trägt die Information */
svg.dot,.chart svg.dot{display:inline-block;width:.75rem;height:.75rem;margin-right:.45rem;vertical-align:-.08em;flex:none}
.chart svg{display:block;width:100%;max-width:66.5rem;height:auto}   /* nie größer als früher bei 72rem Seitenbreite, sonst wächst die Beschriftung mit */
.chart svg,.budget-meter svg{font-family:"Nunito Sans",system-ui,sans-serif}
.chart-narrow{display:none}
.chart-table{margin-top:.8rem}
.chart-table summary{cursor:pointer;font-weight:600;color:var(--accent);padding:.3rem 0}
.chart-table .table-wrap{margin-top:.5rem}
.budgets{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1rem}
.budget{margin:0;transition:transform var(--t-mid) var(--ease)}
.budget:hover{transform:translateY(-2px)}
.budget-head{display:flex;flex-direction:column;margin-bottom:.5rem}
.budget-meter svg{display:block;width:100%;max-width:26rem;height:auto}
.budget-line{margin:.6rem 0 0}
.pb-cell{min-width:14rem}
.pb-cell .budget-meter svg{max-width:15rem}
.pb-line{margin:.25rem 0 0}
.pb-summary{margin:.2rem 0 1rem}
.lvl{display:inline-block;font-weight:700;border:2px solid var(--accent);border-radius:var(--radius-pill);padding:0 .65rem;margin-right:.4rem;font-size:.9rem}
.lvl-warn{border-color:var(--warn-line);color:#7c3a06;background:var(--warn-bg)}
.lvl-full{border-color:var(--danger);background:var(--danger);color:#fff}
@media (max-width:700px){.chart-wide{display:none}.chart-narrow{display:block}.kpis{grid-template-columns:1fr 1fr}.kpi dd{font-size:1.35rem}}

/* Stundennachweise und Import */
h3{font-size:1.05rem;margin:1rem 0 .3rem}
ul.plain{margin:.3rem 0 .6rem;padding-left:1.2rem}
.note-box{background:var(--warn-bg);color:var(--warn-ink);border:1px solid #d9a06a;border-radius:var(--radius-sm);padding:.75rem 1rem;margin:.4rem 0 1rem}
.badge-ok{background:var(--ok-bg);color:var(--ok-ink);border-color:#b9d8c0}
.badge-warn{background:var(--warn-bg);color:var(--warn-ink);border-color:#d9a06a;font-weight:600}
.badge-void{background:var(--err-bg);color:var(--err-ink);border-color:#e3b4b7;font-weight:600}
tr.is-void td{color:var(--muted)}
tr.is-void td:first-child strong{text-decoration:line-through}
.list .act a{margin-right:.6rem}
input[type=file]{width:100%;font:inherit;padding:.6rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff}
button:disabled{opacity:.55;cursor:not-allowed}

/* Warnungen für auffällige Einträge: immer Symbol und Text, nie nur Farbe */
.flash-warn{background:var(--warn-bg);color:var(--warn-ink);border:1px solid #d9a06a}
.flash-warn a{color:var(--warn-ink);font-weight:700}
.warn-timer{margin:.4rem 0 .8rem;font-size:1.05rem;border-width:2px}
.warns{list-style:none;margin:0 0 .4rem;padding:0}
.list tr.has-warn td{border-bottom:0}
.list tr.warn-row td{background:var(--warn-bg);color:var(--warn-ink);border-top:0}
.list tr.warn-row:hover>td{background:var(--warn-bg)}
.list tr.warn-row .btn{margin-top:.2rem}
form.inline{display:inline}
.warn-list{list-style:none;margin:.4rem 0;padding:0}
.warn-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1rem;padding:.5rem 0;border-top:1px solid #d9a06a}
.warn-list li>span:first-child{flex:1 1 20rem;min-width:0;overflow-wrap:anywhere}
.warn-box a,.note-box a{color:var(--warn-ink)}
.field>.label{font-weight:600;font-size:.95rem}
@media (max-width:700px){
  .stack-sm tr.has-warn{margin-bottom:0;border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;padding-bottom:0;box-shadow:none}
  .stack-sm tr.warn-row{margin-top:0;border-top:0;border-radius:0 0 var(--radius) var(--radius);background:var(--warn-bg);padding:.3rem 0 .5rem}
  .stack-sm tr.warn-row td{display:block;text-align:left;padding:.2rem 1rem}
}

/* ==========================================================================
   Bewegung (nur transform und opacity)
   ========================================================================== */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes pop{from{opacity:0;transform:scale(.3)}}
@keyframes pop-in{from{transform:scale(.97)}}
@keyframes sweep{from{transform:scaleX(0)}}
@keyframes flow{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.6);opacity:0}}
@keyframes grow-y{from{transform:scaleY(0)}}
@keyframes grow-x{from{transform:scaleX(0)}}

/* Seitenwechsel: Inhalt blendet sanft ein. (@view-transition wurde erprobt, erzeugte im Browser aber Konsolenfehler "Transition was skipped" und ist deshalb nicht aktiv.) */
main{animation:rise var(--t-slow) var(--ease)}

/* Listen: die ersten Zeilen erscheinen leicht gestaffelt */
.list tbody tr:nth-child(-n+10){animation:rise var(--t-slow) var(--ease) backwards}
.list tbody tr:nth-child(2){animation-delay:35ms}
.list tbody tr:nth-child(3){animation-delay:70ms}
.list tbody tr:nth-child(4){animation-delay:105ms}
.list tbody tr:nth-child(5){animation-delay:140ms}
.list tbody tr:nth-child(6){animation-delay:175ms}
.list tbody tr:nth-child(7){animation-delay:210ms}
.list tbody tr:nth-child(8){animation-delay:245ms}
.list tbody tr:nth-child(9){animation-delay:280ms}
.list tbody tr:nth-child(10){animation-delay:315ms}
.recent li{animation:rise var(--t-slow) var(--ease) backwards}
.recent li:nth-child(2){animation-delay:40ms}
.recent li:nth-child(3){animation-delay:80ms}
.recent li:nth-child(4){animation-delay:120ms}
.recent li:nth-child(n+5){animation-delay:160ms}

/* Diagramme: Balken wachsen. Die SVGs aus charts.php bleiben unverändert, Auswahl über das Attribut data-m an den Datenmarken. */
.chart svg[aria-labelledby^="ch-time"] [data-m]{
  transform-box:fill-box;transform-origin:50% 100%;animation:grow-y .6s var(--ease) backwards}
.chart svg:not([aria-labelledby^="ch-time"]) [data-m]{
  transform-box:fill-box;transform-origin:0 50%;animation:grow-x .6s var(--ease) backwards}
.chart svg g:nth-of-type(2) :is(path,rect){animation-delay:40ms!important}
.chart svg g:nth-of-type(3) :is(path,rect){animation-delay:80ms!important}
.chart svg g:nth-of-type(4) :is(path,rect){animation-delay:120ms!important}
.chart svg g:nth-of-type(5) :is(path,rect){animation-delay:160ms!important}
.chart svg g:nth-of-type(6) :is(path,rect){animation-delay:200ms!important}
.chart svg g:nth-of-type(7) :is(path,rect){animation-delay:240ms!important}
.chart svg g:nth-of-type(8) :is(path,rect){animation-delay:280ms!important}
.chart svg g:nth-of-type(n+9) :is(path,rect){animation-delay:320ms!important}
.budget-meter svg rect[rx]:not([fill="#cfe0ee"]){transform-box:fill-box;transform-origin:0 50%;animation:grow-x .9s var(--ease) .15s backwards}

/* Unterkunden am Kunden */
ul.subclients{list-style:none;padding:0;margin:0}
.subclient-row{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;padding:.6rem 0;border-top:1px solid var(--line)}
.subclient-row>form.row{flex:1 1 20rem;flex-wrap:nowrap}
.subclient-row input[type=text]{min-width:0}
@media (max-width:700px){.subclient-row>form.row{flex-wrap:wrap}}
[data-subclient-field][hidden],[data-quota-field][hidden]{display:none!important}

/* Abwesenheit: modaler Dialog (mit JavaScript), sonst Box im Seitenfluss. Keine eigene display-Regel am dialog, sonst bliebe er im geschlossenen Zustand sichtbar. */
dialog.absence{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:0;box-shadow:var(--shadow-md);overflow:hidden}
dialog.absence:not(:modal){position:static;width:auto;max-width:none;margin:0 0 1.4rem}
dialog.absence:modal{position:fixed;width:calc(100% - 2rem);max-width:38rem;max-height:calc(100dvh - 2rem);overflow:auto;margin:auto;animation:rise var(--t-slow) var(--ease)}
dialog.absence::backdrop{background:rgba(34,33,32,.55)}
.absence-in{position:relative;padding:1.6rem 1.4rem 1.2rem}
.absence-in h2{margin-top:0}
.absence-in h2:focus{outline:none}
.absence-q{font-size:1.1rem}
.absence-choices{display:grid;gap:.8rem;margin-top:1rem}
.absence-choices form{margin:0}
.absence-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;text-align:left;font-weight:400;cursor:pointer;list-style:none}
.absence-btn::-webkit-details-marker{display:none}
.absence-btn strong{font-family:"Nunito",system-ui,sans-serif;font-size:1.05rem}
.absence-btn span{font-size:.9rem;overflow-wrap:anywhere}
.btn-secondary.absence-btn span{color:var(--muted)}
.absence-other[open]>summary{border-color:var(--ink)}
.absence-form{margin-top:1rem;padding:1rem;background:var(--bg);border-radius:var(--radius-sm)}
.absence-later{margin:.8rem 0 0;text-align:right}
.absence-reminder{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:center}
.absence-reminder[hidden]{display:none}
.btn[hidden]{display:none}
.idle-box{padding:.2rem 1rem;background:var(--bg);border-radius:var(--radius-sm)}
@media (max-width:700px){.absence-in{padding:1.4rem 1rem 1rem}}

/* Stundennachweis-Vorschau: Einträge prüfen, ändern, herausnehmen */
.edit-table tr.grp>th{padding:.55rem .9rem;text-align:left;font-weight:700;border-bottom:1px solid var(--line)}
.edit-table tr.grp-sub>th{background:var(--ink);color:#fff}
.edit-table tr.grp-svc>th{background:var(--bg-deep);color:var(--ink);font-size:.95rem}
.list.edit-table tbody tr.grp-sub:hover>th{background:var(--ink)}
.list.edit-table tbody tr.grp-svc:hover>th{background:var(--bg-deep)}
.grp-in{display:flex;justify-content:space-between;align-items:baseline;gap:.2rem 1rem;flex-wrap:wrap}
.grp-sum{font-weight:400;font-variant-numeric:tabular-nums}
.edit-table th,.edit-table td{padding:.65rem .6rem}
.edit-table .desc{overflow-wrap:anywhere}
.edit-table .chk{width:2rem}
.edit-table .act{padding-right:.9rem}
.list.edit-table tbody tr.entry-row:target>td,.list.edit-table tbody tr.entry-row.is-editing>td{background:var(--accent-soft)}
.list.edit-table tbody tr.entry-row.is-saved>td{background:var(--ok-bg)}
tr.entry-row:focus{outline:3px solid var(--accent);outline-offset:-3px}
tr.entry-row,#pv-h{scroll-margin-top:4.5rem}
.list.edit-table tbody tr.edit-row>td{background:var(--accent-soft);padding:1rem}
.edit-row[hidden]{display:none}
.field[hidden]{display:none}   /* .field setzt display:flex und hob das hidden-Attribut auf: Von-bis/Dauer-Umschaltung blendete nichts aus */
.inline-edit.stack>*+*{margin-top:.8rem}
.inline-edit .grid{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.similar fieldset{border:0;padding:0;margin:0}
.similar legend{padding:0;font-weight:700}
.similar .radios label{display:flex;margin:.25rem 0}
.sel-bar fieldset{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)}
.sel-grid{display:grid;grid-template-columns:minmax(14rem,1fr) auto auto;gap:.6rem 1rem;align-items:end}
.sel-bar p{margin-bottom:0}
@media (min-width:701px) and (min-height:760px){.sel-bar{position:sticky;bottom:0;z-index:5;background:var(--surface);padding:.5rem 0}}
@media (max-width:700px){
  .sel-grid{grid-template-columns:1fr}
  .stack-sm tr.grp{background:none;border:0;box-shadow:none;padding:0;margin:.9rem 0 .3rem}
  .stack-sm tr.grp>th{display:block;width:100%;border-radius:var(--radius-sm);border:0}
  .stack-sm tr.edit-row>td{display:block;text-align:left;padding:.8rem 1rem}
  .stack-sm tr.edit-row{background:var(--accent-soft)}
  .stack-sm tr.entry-row.is-editing{margin-bottom:0;border-radius:var(--radius) var(--radius) 0 0;border-bottom:0}
  .stack-sm tr.edit-row{margin-top:0;border-top:0;border-radius:0 0 var(--radius) var(--radius)}
}

/* Ohne Animation: alles aus, Inhalte stehen sofort da */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Cockpit */
.cockpit-table tbody+tbody tr:first-child>*{border-top:1px solid var(--line)}
.cockpit-table tbody tr:last-child>*{border-bottom:0}
.cockpit-table tr.sub-row td{background:#faf8f5;font-size:.95rem}
.cockpit-table tr.sub-row[hidden]{display:none}
.cockpit-table .sub-name{padding-left:1.1rem;display:inline-block}
.cockpit-table [hidden]{display:none}
button.subs-toggle{text-align:left;text-decoration:none;color:var(--ink);padding:.1rem 0}
button.subs-toggle strong{text-decoration:underline;text-underline-offset:.15em}
.goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem;margin:0 0 1.4rem}
.goal{margin:0}
.goal h3{margin-top:0}
.goal-line{margin:.6rem 0 0;font-variant-numeric:tabular-nums}
progress{display:block;width:100%;height:.9rem;appearance:none;-webkit-appearance:none;border:0;border-radius:var(--radius-pill);background:var(--accent-soft);overflow:hidden}
progress::-webkit-progress-bar{background:var(--accent-soft);border-radius:var(--radius-pill)}
progress::-webkit-progress-value{background:var(--accent);border-radius:var(--radius-pill)}
progress::-moz-progress-bar{background:var(--accent);border-radius:var(--radius-pill)}
h3+figure.chart,h3+p.muted{margin-top:.2rem}
@media (max-width:700px){
  .cockpit-table tbody+tbody tr:first-child>*{border-top:0}
  .cockpit-table tr.sub-row{margin-left:1rem;width:calc(100% - 1rem)}
  .cockpit-table .sub-name{padding-left:0}
  .stack-sm tr.cust-row{margin-bottom:.3rem}
}

/* Pause der Stoppuhr und Zeiten ändern. Keine eigene Animation: der Pausenzustand ist ruhig. */
.timer-pause{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-top:1rem}
.timer-pause .muted{margin:0;font-size:.9rem}
.edit-times{margin-top:1rem}
.edit-times>summary{cursor:pointer;color:var(--accent);font-weight:600;padding:.4rem 0;min-height:2.75rem;display:flex;align-items:center}
.edit-times[open]>summary{margin-bottom:.6rem}
.timer dialog.absence:not(:modal){margin:1rem 0 0}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* KI-Eingang: Auswahlfelder in der Tabelle nicht zusammenquetschen */
.ki-sel{min-width:9rem;max-width:13rem}
@media (max-width:700px){.ki-sel{min-width:0;max-width:none;flex:1 1 auto}}
.list .act form.ki-act{display:flex;flex-direction:column;gap:.4rem}
@media (max-width:700px){.ki-act{flex-direction:row;flex-wrap:wrap}}

.plan-bar{display:block;width:100%;height:1.1rem;border-radius:4px}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:.15rem 0}
.prewrap{white-space:pre-wrap;overflow-wrap:anywhere}
code{overflow-wrap:anywhere}

/* Reiter und Knopfzeilen mit aktueller Seite */
.quick a[aria-current=page]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Planung: Raster, Spalte "Noch nicht eingeplant", Inspektor (UX-Umbau Etappe 2) ----------
   Positionen im Raster: Viertelstunden-Zeilen (16 px). gs<N> = Startzeile, gl<N> = Länge in Zeilen, no<N> = Minuten-Versatz der Jetzt-Linie. Kein style-Attribut, kein Skript. */
.pl-head-row{display:flex;align-items:center;gap:.8rem 1.2rem;flex-wrap:wrap;margin-bottom:.6rem}
.pl-bar{display:flex;align-items:center;gap:.6rem .8rem;flex-wrap:wrap;margin:0 0 .9rem}
.pl-ib{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink);text-decoration:none}
.pl-ib:hover{border-color:var(--ink)}
.pl-ib svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pl-toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:#fff;padding:2px}
.pl-toggle a{display:inline-flex;align-items:center;min-height:2rem;padding:.2rem .85rem;border-radius:var(--radius-pill);text-decoration:none;color:var(--ink);font-weight:600;font-size:.88rem}
.pl-toggle a:hover{background:var(--bg-deep)}
.pl-toggle a[aria-current=true]{background:var(--ink);color:#fff}
.pl-cap{display:flex;gap:.2rem 1.1rem;flex-wrap:wrap;margin-left:auto;font-size:.85rem;color:var(--muted)}
.pl-cap b{color:var(--ink)}
.pl-cap .danger{color:var(--danger-ink);font-weight:700}
.pl-jump{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:1.2rem 0 1rem;font-size:.9rem;color:var(--muted)}
.pl-wrap{display:grid;grid-template-columns:16.5rem minmax(0,1fr);gap:1rem;align-items:start;margin-bottom:1.6rem}
.pl-wrap.has-insp{grid-template-columns:15.5rem minmax(0,1fr) 18.5rem}
.pl-main{min-width:0}
@media (max-width:1180px){.pl-wrap.has-insp{grid-template-columns:16.5rem minmax(0,1fr)}.pl-wrap.has-insp .pl-insp{grid-column:1/-1}}
@media (max-width:980px){.pl-wrap,.pl-wrap.has-insp{grid-template-columns:minmax(0,1fr)}.pl-main{order:1}.pl-insp{order:2}.pl-backlog{order:3}}

/* Raster */
.pl-grid{display:grid;grid-template-columns:2.8rem repeat(5,minmax(0,1fr)) repeat(2,minmax(0,.5fr));background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pl-axis,.pl-day{display:flex;flex-direction:column;min-width:0}
.pl-day{border-left:1px solid var(--line)}
.pl-head,.pl-axis-head{height:4.4rem;border-bottom:1px solid var(--line-strong);background:var(--bg)}
.pl-head{padding:.5rem .6rem;overflow:hidden}
.pl-head h3{margin:0;font-size:.95rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-head h3 small{font:400 .78rem "Nunito Sans",system-ui,sans-serif;color:var(--muted);margin-left:.2rem}
.pl-day.today .pl-head h3,.pl-day.today .pl-head h3 small{color:var(--now)}
.pl-meter{display:block;width:100%;height:.55rem;margin:.35rem 0 .3rem;border-radius:3px}
.pl-meter .m-track{fill:var(--bg-deep)}
.pl-meter .m-plan{fill:var(--accent)}
.pl-meter .m-over{fill:var(--danger)}
.pl-meter .m-ist{fill:var(--ok)}
.pl-meter .m-cap{fill:var(--line-strong)}
.pl-ht{margin:0;font-size:.76rem;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-ht .danger{color:var(--danger-ink);font-weight:700}
.pl-day.over .pl-head{background:var(--danger-soft)}
.pl-day.off .pl-head h3{color:var(--muted)}
.pl-foot,.pl-axis-foot{height:3rem;border-top:1px solid var(--line-strong);background:var(--bg)}
.pl-foot{padding:.35rem .6rem;font-size:.76rem;line-height:1.35;color:var(--muted);overflow:hidden}
.pl-foot span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-foot b{color:var(--ink)}
.pl-body,.pl-axbody{--qh:16px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:var(--qh)}
.pl-body.has-ist{grid-template-columns:minmax(0,1fr) 11px}
.pl-body>li,.pl-axbody>span{min-width:0}
.pl-frame,.pl-win,.pl-nowline,.pl-axbody>span{grid-column:1/-1}
.pl-frame{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 63px,var(--line) 63px,var(--line) 64px),repeating-linear-gradient(135deg,rgba(34,33,32,.05) 0 5px,transparent 5px 10px)}
.pl-win{background-color:#fff;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 63px,var(--line) 63px,var(--line) 64px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.pl-day.today .pl-win{background-color:#fffaf6}
.pl-axbody span{font-size:.75rem;line-height:1;color:var(--muted);text-align:right;padding:3px .4rem 0 0;font-variant-numeric:tabular-nums}
.pl-blk{grid-column:1;position:relative;z-index:2;margin:1px 3px;border-radius:7px;background:var(--pf);border:1px solid var(--pb);color:var(--pt);overflow:hidden}
.pl-blk>a{display:block;height:100%;padding:8px;color:inherit;text-decoration:none;font-size:.78rem;line-height:1.25;overflow:hidden}
.pl-blk>a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.pl-blk:hover{box-shadow:var(--shadow-sm)}
.pl-blk.sel{outline:3px solid var(--ink);outline-offset:0;z-index:4}
.pl-blk .n{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-blk .p,.pl-blk .t{display:block;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-blk:is(.gl1,.gl2,.gl3)>a{padding:4px 8px}
.pl-blk:is(.gl1,.gl2,.gl3,.gl4) .p{display:none}
.pl-blk:is(.gl1,.gl2,.gl3) .t{display:none}
.pl-flag{position:absolute;right:4px;top:3px;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--danger);color:#fff;font:700 .72rem/1.1rem "Nunito",sans-serif;text-align:center}
.pl-over{grid-column:1;z-index:3;pointer-events:none;margin:0 3px;background:repeating-linear-gradient(135deg,rgba(163,20,28,.22) 0 5px,rgba(163,20,28,.05) 5px 10px);border-radius:4px}
.pl-busy{grid-column:1;z-index:2;margin:1px 3px;padding:3px 8px;border-radius:7px;border:1px solid #bdb8b0;background:repeating-linear-gradient(135deg,#e9e6e0 0 5px,#d9d5ce 5px 10px);color:#3b3b3a;font-size:.74rem;line-height:1.25;overflow:hidden}
.pl-busy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-busy:is(.gl1,.gl2) .t{display:none}
.pl-free{grid-column:1;z-index:1;margin:2px 3px}
.pl-free a{display:flex;align-items:center;justify-content:center;height:100%;border:1px dashed var(--line-strong);border-radius:7px;color:var(--muted);font-size:.75rem;text-align:center;text-decoration:none;padding:4px 8px;line-height:1.25}
.pl-free a:hover{color:var(--ink);border-color:var(--ink);background:#fff}
.pl-lane{grid-column:2;z-index:2;margin:1px 0;border-radius:3px;background:var(--pf);border:1px solid var(--pt)}
.pl-lane.run{border-style:dashed;border-color:var(--now)}
.pl-nowline{z-index:5;align-self:start;height:2px;background:var(--now);pointer-events:none}
.no1{margin-top:1px}.no2{margin-top:2px}.no3{margin-top:3px}.no4{margin-top:4px}.no5{margin-top:5px}.no6{margin-top:6px}.no7{margin-top:7px}.no8{margin-top:8px}.no9{margin-top:9px}.no10{margin-top:10px}.no11{margin-top:11px}.no12{margin-top:12px}.no13{margin-top:13px}.no14{margin-top:14px}
.pl-legend{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-top:.6rem;font-size:.8rem;color:var(--muted)}
.pl-legend ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.pl-legend li{display:inline-flex;align-items:center;gap:.35rem}
.pl-legend i{display:inline-block;width:.9rem;height:.55rem;border-radius:3px;border:1px solid var(--line-strong)}
.pl-legend .k-plan{background:var(--p-blau-f);border-color:var(--p-blau-b)}
.pl-legend .k-ist{background:var(--ok);border-color:var(--ok)}
.pl-legend .k-busy{background:repeating-linear-gradient(135deg,#e9e6e0 0 3px,#d9d5ce 3px 6px)}
.pl-legend .k-over{background:repeating-linear-gradient(135deg,rgba(163,20,28,.35) 0 3px,rgba(163,20,28,.08) 3px 6px);border-color:var(--danger)}
.pl-legend .k-now{background:var(--now);border-color:var(--now);height:.2rem}

/* Mehrere Wochen: Tabelle, Wochen als Zeilen */
.pl-month{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pl-month th,.pl-month td{vertical-align:top;border-left:1px solid var(--line);border-top:1px solid var(--line);padding:.4rem .5rem;font-size:.8rem;text-align:left}
.pl-month thead th{background:var(--bg);border-top:0;font-size:.82rem}
.pl-month th[scope=row]{width:3.6rem;background:var(--bg);border-left:0;font-size:.78rem;color:var(--muted)}
.pl-month td.off{background:var(--bg)}
.pl-month td.today{background:#fffaf6}
.pl-month td.over .sum{color:var(--danger-ink);font-weight:700}
.pl-month .d{font-weight:700}
.pl-month td.today .d{color:var(--now)}
.pl-month .sum{display:block;color:var(--muted);margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-month ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.pl-month li a{display:block;padding:3px 8px;border-radius:5px;background:var(--pf);border:1px solid var(--pb);color:var(--pt);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}
.pl-month li a[aria-current=true]{outline:3px solid var(--ink)}
.pl-month li.busy{padding:3px 8px;border-radius:5px;background:repeating-linear-gradient(135deg,#e9e6e0 0 5px,#d9d5ce 5px 10px);color:#3b3b3a;font-size:.74rem}

/* Spalte: noch nicht eingeplant */
.pl-backlog h2{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:1.05rem}
.pl-backlog h2 .sum{font-size:.85rem;color:var(--muted);font-weight:600}
.pl-bl{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.65rem .75rem;margin-top:.55rem;background:#fff}
.pl-bl h3{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.95rem;color:var(--pt)}
.pl-bl .cust{margin:.1rem 0 0;font-size:.8rem;color:var(--muted)}
.pl-bl .rest{display:flex;justify-content:space-between;align-items:baseline;margin:.35rem 0 .2rem;font-size:.85rem;color:var(--muted)}
.pl-bl .rest b{font-size:1.05rem;color:var(--ink);font-family:"Nunito",system-ui,sans-serif}
.pl-bl .pl-meter{height:.4rem;margin:.2rem 0 .4rem}
.pl-bl-ph{list-style:none;margin:.3rem 0 .5rem;padding:0;display:flex;flex-direction:column;gap:.2rem}
.pl-bl-ph li{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--ink-2);padding:.2rem .5rem;border-radius:5px;background:var(--pf)}
.pl-bl-ph li.done{background:transparent;color:var(--muted)}
.pl-bl details>summary{list-style:none;cursor:pointer;display:inline-block}
.pl-bl details>summary::-webkit-details-marker{display:none}
.pl-bl details form{margin-top:.6rem}
.pl-hint{font-size:.78rem;color:var(--muted);margin:.8rem 0 0;padding-top:.6rem;border-top:1px solid var(--line)}

/* Inspektor */
.pl-insp h2{margin:0;font-size:1.05rem}
.pl-proj{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--pt);background:var(--pf);border-radius:var(--radius-pill);padding:.15rem .8rem .15rem .55rem;font-size:.9rem}
.pl-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem .8rem;font-size:.88rem;margin:.7rem 0}
.pl-kv dt{color:var(--muted)}
.pl-kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.pl-sec{border-top:1px solid var(--line);padding-top:.7rem;margin-top:.8rem}
.pl-sec h3{margin:0 0 .4rem;font-size:.95rem}
.pl-sec .grid{grid-template-columns:minmax(0,1fr);gap:.5rem}
.pl-sec p{font-size:.82rem;margin:.3rem 0}
.pl-sync-err{background:var(--err-bg);color:var(--err-ink);border-radius:var(--radius-sm);padding:.5rem .7rem;font-size:.84rem;margin:.5rem 0}

/* Tagesliste am Handy */
.pl-daylist{display:none}
.pl-daynav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.pl-daynav strong{font-family:"Nunito",system-ui,sans-serif}
.pl-rows{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.pl-rows li{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:.2rem .6rem;align-items:center;padding:.55rem .7rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff}
.pl-rows li.blk-row{background:var(--pf);border-color:var(--pb);color:var(--pt)}
.pl-rows li.blk-row a{color:inherit;font-weight:700;text-decoration:none}
.pl-rows li.busy-row{background:repeating-linear-gradient(135deg,#e9e6e0 0 5px,#d9d5ce 5px 10px);color:#3b3b3a}
.pl-rows li.free-row{border-style:dashed;color:var(--muted)}
.pl-rows .tm{font-weight:700;font-size:.88rem}
.pl-rows .sm{grid-column:2;font-size:.8rem}
@media (max-width:700px){
  .pl-grid,.pl-month,.pl-legend,.pl-toggle,.pl-fullbtn{display:none}
  .pl-daylist{display:block}
  .pl-cap{margin-left:0}
  .pl-bar>.pl-ib{display:none}
}
/* Etappe 3: Ziehen, Länge, Schnittlinie, Rückgängig. Gilt nur mit plan.js (Klasse js-plan am Raster); ohne Skript bleibt alles wie vorher. Bewegung nur transform und opacity, 160 ms. */
.pl-js{display:none}
.js .pl-js{display:inline}
.js-plan .pl-blk{overflow:visible;cursor:grab}
.js-plan .pl-blk,.js-plan .pl-bl>h3,.js-plan .pl-bl>p{-webkit-user-select:none;user-select:none}
.js-plan .pl-blk:is(:hover,:focus-within,.sel){z-index:6}
.js-plan .pl-blk>a{cursor:inherit}
.js-plan .pl-blk[data-fixed]{cursor:default}
.js-plan .pl-bl{cursor:grab}
.js-plan .pl-bl details,.js-plan .pl-bl summary{cursor:default}
.pl-blk.drag{opacity:.55;z-index:8;cursor:grabbing}
.pl-blk.snap{transition:transform .16s ease}
.pl-blk.wait,.pl-bl.drag{opacity:.55}
.pl-blk.pend{opacity:.6}
.pl-grip{position:absolute;left:0;right:0;bottom:-10px;height:24px;z-index:3;cursor:ns-resize}
.pl-grip::after{content:"";position:absolute;left:50%;top:9px;width:28px;height:4px;margin-left:-14px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .16s ease}
.pl-blk:is(:hover,:focus-within,.sel) .pl-grip::after,.pl-grip:hover::after{opacity:.55}
.pl-shadow{grid-column:1;z-index:5;margin:1px 3px;padding:3px 8px;border:2px dashed var(--ink);border-radius:7px;background:rgba(34,33,32,.08);color:var(--ink);font:700 .74rem/1.25 "Nunito Sans",system-ui,sans-serif;white-space:nowrap;overflow:hidden;pointer-events:none}
.pl-shadow.bad{border-color:var(--danger);background:rgba(163,20,28,.12);color:var(--danger-ink)}
.pl-cut{grid-column:1;z-index:7;padding:5px 8px 0;background:linear-gradient(var(--ink),var(--ink)) top/100% 3px no-repeat;color:var(--ink);font:700 .7rem/1 "Nunito Sans",system-ui,sans-serif;white-space:nowrap;overflow:hidden;pointer-events:none}
.pl-blk.splitting{outline:3px solid var(--ink);outline-offset:0;cursor:crosshair}
.pl-ghost{position:fixed;left:0;top:0;z-index:70;pointer-events:none;padding:.4rem .8rem;border-radius:var(--radius-sm);background:var(--pf);border:1px solid var(--pb);color:var(--pt);font-weight:700;font-size:.85rem;box-shadow:var(--shadow-sm);opacity:.92}
body.pl-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
.pl-undo{position:fixed;left:50%;bottom:1rem;z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:.9rem;max-width:calc(100vw - 2rem);padding:.45rem .5rem .45rem 1.1rem;border-radius:var(--radius-pill);background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);font-weight:600;font-size:.92rem}
.pl-undo[hidden],.pl-toast[hidden]{display:none}
.pl-undo form{display:flex;align-items:center;gap:.6rem;margin:0}
.pl-undo .btn{background:#fff;color:var(--ink);border-color:#fff}
.pl-undo .btn:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.pl-undo-k{font-size:.78rem;color:#d8d5ce}
.pl-toast{position:fixed;left:50%;bottom:4.6rem;z-index:61;transform:translateX(-50%);max-width:min(38rem,calc(100vw - 2rem));margin:0;animation:none;box-shadow:var(--shadow-sm)}
@media (max-width:700px){.pl-undo{bottom:5rem}.pl-toast{bottom:8.6rem}.pl-undo-k{display:none}}
@media (prefers-reduced-motion:reduce){.pl-blk.snap,.pl-grip::after{transition:none}}
.gs1{grid-row-start:1}.gs2{grid-row-start:2}.gs3{grid-row-start:3}.gs4{grid-row-start:4}.gs5{grid-row-start:5}.gs6{grid-row-start:6}.gs7{grid-row-start:7}.gs8{grid-row-start:8}.gs9{grid-row-start:9}.gs10{grid-row-start:10}.gs11{grid-row-start:11}.gs12{grid-row-start:12}
.gs13{grid-row-start:13}.gs14{grid-row-start:14}.gs15{grid-row-start:15}.gs16{grid-row-start:16}.gs17{grid-row-start:17}.gs18{grid-row-start:18}.gs19{grid-row-start:19}.gs20{grid-row-start:20}.gs21{grid-row-start:21}.gs22{grid-row-start:22}.gs23{grid-row-start:23}.gs24{grid-row-start:24}
.gs25{grid-row-start:25}.gs26{grid-row-start:26}.gs27{grid-row-start:27}.gs28{grid-row-start:28}.gs29{grid-row-start:29}.gs30{grid-row-start:30}.gs31{grid-row-start:31}.gs32{grid-row-start:32}.gs33{grid-row-start:33}.gs34{grid-row-start:34}.gs35{grid-row-start:35}.gs36{grid-row-start:36}
.gs37{grid-row-start:37}.gs38{grid-row-start:38}.gs39{grid-row-start:39}.gs40{grid-row-start:40}.gs41{grid-row-start:41}.gs42{grid-row-start:42}.gs43{grid-row-start:43}.gs44{grid-row-start:44}.gs45{grid-row-start:45}.gs46{grid-row-start:46}.gs47{grid-row-start:47}.gs48{grid-row-start:48}
.gs49{grid-row-start:49}.gs50{grid-row-start:50}.gs51{grid-row-start:51}.gs52{grid-row-start:52}.gs53{grid-row-start:53}.gs54{grid-row-start:54}.gs55{grid-row-start:55}.gs56{grid-row-start:56}.gs57{grid-row-start:57}.gs58{grid-row-start:58}.gs59{grid-row-start:59}.gs60{grid-row-start:60}
.gs61{grid-row-start:61}.gs62{grid-row-start:62}.gs63{grid-row-start:63}.gs64{grid-row-start:64}.gs65{grid-row-start:65}.gs66{grid-row-start:66}.gs67{grid-row-start:67}.gs68{grid-row-start:68}.gs69{grid-row-start:69}.gs70{grid-row-start:70}.gs71{grid-row-start:71}.gs72{grid-row-start:72}
.gs73{grid-row-start:73}.gs74{grid-row-start:74}.gs75{grid-row-start:75}.gs76{grid-row-start:76}.gs77{grid-row-start:77}.gs78{grid-row-start:78}.gs79{grid-row-start:79}.gs80{grid-row-start:80}.gs81{grid-row-start:81}.gs82{grid-row-start:82}.gs83{grid-row-start:83}.gs84{grid-row-start:84}
.gs85{grid-row-start:85}.gs86{grid-row-start:86}.gs87{grid-row-start:87}.gs88{grid-row-start:88}.gs89{grid-row-start:89}.gs90{grid-row-start:90}.gs91{grid-row-start:91}.gs92{grid-row-start:92}.gs93{grid-row-start:93}.gs94{grid-row-start:94}.gs95{grid-row-start:95}.gs96{grid-row-start:96}
.gl1{grid-row-end:span 1}.gl2{grid-row-end:span 2}.gl3{grid-row-end:span 3}.gl4{grid-row-end:span 4}.gl5{grid-row-end:span 5}.gl6{grid-row-end:span 6}.gl7{grid-row-end:span 7}.gl8{grid-row-end:span 8}.gl9{grid-row-end:span 9}.gl10{grid-row-end:span 10}.gl11{grid-row-end:span 11}.gl12{grid-row-end:span 12}
.gl13{grid-row-end:span 13}.gl14{grid-row-end:span 14}.gl15{grid-row-end:span 15}.gl16{grid-row-end:span 16}.gl17{grid-row-end:span 17}.gl18{grid-row-end:span 18}.gl19{grid-row-end:span 19}.gl20{grid-row-end:span 20}.gl21{grid-row-end:span 21}.gl22{grid-row-end:span 22}.gl23{grid-row-end:span 23}.gl24{grid-row-end:span 24}
.gl25{grid-row-end:span 25}.gl26{grid-row-end:span 26}.gl27{grid-row-end:span 27}.gl28{grid-row-end:span 28}.gl29{grid-row-end:span 29}.gl30{grid-row-end:span 30}.gl31{grid-row-end:span 31}.gl32{grid-row-end:span 32}.gl33{grid-row-end:span 33}.gl34{grid-row-end:span 34}.gl35{grid-row-end:span 35}.gl36{grid-row-end:span 36}
.gl37{grid-row-end:span 37}.gl38{grid-row-end:span 38}.gl39{grid-row-end:span 39}.gl40{grid-row-end:span 40}.gl41{grid-row-end:span 41}.gl42{grid-row-end:span 42}.gl43{grid-row-end:span 43}.gl44{grid-row-end:span 44}.gl45{grid-row-end:span 45}.gl46{grid-row-end:span 46}.gl47{grid-row-end:span 47}.gl48{grid-row-end:span 48}
.gl49{grid-row-end:span 49}.gl50{grid-row-end:span 50}.gl51{grid-row-end:span 51}.gl52{grid-row-end:span 52}.gl53{grid-row-end:span 53}.gl54{grid-row-end:span 54}.gl55{grid-row-end:span 55}.gl56{grid-row-end:span 56}.gl57{grid-row-end:span 57}.gl58{grid-row-end:span 58}.gl59{grid-row-end:span 59}.gl60{grid-row-end:span 60}
.gl61{grid-row-end:span 61}.gl62{grid-row-end:span 62}.gl63{grid-row-end:span 63}.gl64{grid-row-end:span 64}.gl65{grid-row-end:span 65}.gl66{grid-row-end:span 66}.gl67{grid-row-end:span 67}.gl68{grid-row-end:span 68}.gl69{grid-row-end:span 69}.gl70{grid-row-end:span 70}.gl71{grid-row-end:span 71}.gl72{grid-row-end:span 72}
.gl73{grid-row-end:span 73}.gl74{grid-row-end:span 74}.gl75{grid-row-end:span 75}.gl76{grid-row-end:span 76}.gl77{grid-row-end:span 77}.gl78{grid-row-end:span 78}.gl79{grid-row-end:span 79}.gl80{grid-row-end:span 80}.gl81{grid-row-end:span 81}.gl82{grid-row-end:span 82}.gl83{grid-row-end:span 83}.gl84{grid-row-end:span 84}
.gl85{grid-row-end:span 85}.gl86{grid-row-end:span 86}.gl87{grid-row-end:span 87}.gl88{grid-row-end:span 88}.gl89{grid-row-end:span 89}.gl90{grid-row-end:span 90}.gl91{grid-row-end:span 91}.gl92{grid-row-end:span 92}.gl93{grid-row-end:span 93}.gl94{grid-row-end:span 94}.gl95{grid-row-end:span 95}.gl96{grid-row-end:span 96}


/* ---------- Projektseite und Projektliste (Etappe 4) ---------- */
.pj-dot{width:.8rem;height:.8rem;margin-right:.5rem;vertical-align:baseline}
.pj-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto}
.pj-meta{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0 0 .2rem;padding:0;color:var(--ink-2)}
.pj-meta b{color:var(--ink)}
.pj-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0 1rem}
.pj-tabs a{display:inline-block;padding:.4rem .95rem;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:600 .92rem/1.3 "Nunito",system-ui,sans-serif;text-decoration:none}
.pj-tabs a:hover{background:var(--bg);border-color:var(--ink)}
.pj-tabs a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}
.pj-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:1rem;align-items:start}
.pj-col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.pj-nums{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.4rem 2rem;margin:.2rem 0 .7rem}
.pj-n{margin:0;display:flex;flex-direction:column;gap:.15rem}
.pj-n .l{font-size:.85rem;color:var(--muted)}
.pj-big{font:700 2rem/1 "Nunito",system-ui,sans-serif;letter-spacing:-.01em}
.pj-big.pj-mid{font-size:1.4rem}
.pj-ist .pj-big{color:var(--ok)}
.pj-plan .pj-big{color:var(--accent)}
.pj-r{margin-left:auto;text-align:right;align-items:flex-end}
.pj-bar{height:.8rem;border-radius:4px;margin:.2rem 0 .6rem}
.pj-line{margin:.2rem 0 .4rem}
.pj-set{margin:.6rem 0 0}
.pj-set summary{cursor:pointer;color:var(--accent);font-weight:600}
.pj-set[open] summary{margin-bottom:.6rem}
.pj-chip{font-weight:600;color:var(--ink-2)}
.pj-phases tbody th,.pj-phases tfoot th{min-width:8.5rem;font-weight:600;background:none;text-align:left;color:inherit;font-size:inherit;white-space:normal;vertical-align:top;border-bottom:1px solid var(--line)}
.pj-phases .num{text-align:right;white-space:nowrap}
.pj-phases .pj-barcell{min-width:8rem;width:30%}
.pj-phases .pj-bar{height:.6rem;margin:.35rem 0 0}
.pj-phases .pj-diff{white-space:nowrap}
.pj-phases tr.pj-cur>*{background:var(--pf)}
.pj-phases tr.pj-sub>*{color:var(--muted)}
.pj-phases tfoot th,.pj-phases tfoot td{border-top:2px solid var(--line-strong);font-weight:700}
.pj-bad{color:var(--danger-ink);font-weight:700}
.pj-blocks{list-style:none;margin:0;padding:0}
.pj-blocks li{display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line)}
.pj-blocks li:last-child{border-bottom:0}
.pj-blocks .d{font-weight:700;white-space:nowrap}
.badge.pj-now{background:var(--now-soft);border-color:#e3b3d3;color:var(--now);font-weight:700}
.pj-btns{margin-top:.8rem}
.pj-btns form{margin:0}
.pj-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1rem;margin:0}
.pj-kv dt{color:var(--muted)}
.pj-kv dd{margin:0}
.pj-note{margin:0}
.pj-list .pb-cell{min-width:14rem}
.pj-list .pj-bar{max-width:15rem;height:.6rem;margin:.1rem 0 .25rem}
.pj-name{font-weight:700}
@media (max-width:980px){.pj-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .pj-actions{margin-left:0}
  .pj-meta{gap:.05rem 1.2rem;font-size:.9rem}
  .pj-big{font-size:1.6rem}
  .pj-r{margin-left:0;text-align:left;align-items:flex-start}
  .pj-phases tbody th,.pj-phases tfoot th{display:block;width:100%;border:0;padding:.3rem 1rem .1rem}
  .pj-phases tfoot,.pj-phases tfoot tr,.pj-phases tfoot td,.pj-phases tfoot th{display:block;width:100%}
  .stack-sm td.pj-barcell{display:block;width:100%;min-width:0;padding:.2rem 1rem}
  .stack-sm td.pj-barcell:empty{display:none}
  .stack-sm td.pj-barcell::before{display:none}
  .pj-phases .pj-diff{white-space:normal}
  .pj-blocks li{grid-template-columns:4.2rem minmax(0,1fr)}
  .pj-blocks li .badge{grid-column:2}
  .pj-list .pj-bar{max-width:none}
  .stack-sm td.pj-title{display:block;text-align:left}
  .stack-sm td.pj-title::before{display:none}
}

/* Etappe 5: Reiter (Zahlen, Planung, Einträge), Kennzahlenzeilen, Erklärung hinter "?" */
.eyebrow{margin:0;font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.tabs{display:flex;gap:.15rem;margin:.2rem 0 1.1rem;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;max-width:100%;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tabs a{flex:0 0 auto;display:block;padding:.6rem .95rem;margin:0 0 -1px;border:1px solid transparent;border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;color:var(--muted);font:600 .95rem/1.3 "Nunito",system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--ink);background:var(--bg-deep)}
.tabs a[aria-current=page]{color:var(--ink);background:var(--surface);border-color:var(--line);box-shadow:inset 0 -1px 0 var(--surface)}
.wrap,.page-col{min-width:0}
.sec-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;position:relative;margin:1.5rem 0 .6rem}
.sec-h>h2,.sec-h>h3{margin:0}
.sec-h>p{margin:0}
.why{display:inline-block}
.why>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:1.9rem;height:1.9rem;border:1px solid var(--line-strong);border-radius:50%;background:#fff;font:700 .85rem/1 "Nunito",system-ui,sans-serif;color:var(--ink-2)}
.why>summary::-webkit-details-marker{display:none}
.why>summary:hover{border-color:var(--ink);color:var(--ink)}
.why[open]>summary{background:var(--ink);border-color:var(--ink);color:#fff}
.why-t{position:absolute;left:0;right:0;top:calc(100% + .35rem);max-width:40rem;z-index:6;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .9rem;box-shadow:var(--shadow-md);font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.why-t p{margin:0 0 .5rem;max-width:none}
.why-t p:last-child{margin-bottom:0}
.kz{margin:0 0 1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.kz-row{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(8rem,auto) minmax(0,1fr) auto;gap:.15rem 1.2rem;align-items:center;padding:.7rem 1rem;border-bottom:1px solid var(--line);position:relative}
.kz-row:last-child{border-bottom:0}
.kz dt{font-weight:600;color:var(--ink-2)}
.kz dd{margin:0}
.kz-main{font:700 1.55rem/1.2 "Nunito",system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.kz-main .unit{font-size:.95rem;font-weight:600;color:var(--muted)}
.kz-sub{color:var(--muted);font-size:.92rem}
.kz-row .why-t{top:calc(100% - .2rem);left:1rem;right:1rem}
.offen-zeile{display:flex;align-items:baseline;gap:.4rem 1.2rem;flex-wrap:wrap;margin:0 0 1rem}
.offen-zeile strong{font:700 1.3rem/1.2 "Nunito",system-ui,sans-serif}
@media (max-width:700px){
  .tabs a{padding:.65rem .85rem}
  .kz-row{grid-template-columns:minmax(0,1fr) auto;gap:.1rem .8rem;padding:.65rem .85rem}
  .kz-row dt{grid-column:1}
  .kz-main{grid-column:2;grid-row:1;text-align:right}
  .kz-sub{grid-column:1 / 2;grid-row:2}
  .kz-q{grid-column:2;grid-row:2;justify-self:end}
  .kz-row .why>summary{width:2.2rem;height:2.2rem}
  .why>summary{width:2.2rem;height:2.2rem}
  .why-t{max-width:none}
}
@media print{.tabs,.why{display:none}}

/* ---------- Uhr-Widget und Drehuhr (public/assets/clock.js, templates/_uhr.php, _uhr_dial.php) ----------
   Schwebt unten rechts, am Handy über der Tableiste. Bewegung nur transform, opacity und Strichlänge; prefers-reduced-motion schaltet alles ab (Block weiter oben). */
.has-dial .uhr-nojs{display:none}
.uhr{position:fixed;right:1rem;bottom:1rem;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;max-width:calc(100vw - 2rem)}
.uhr-d{position:relative;display:flex;justify-content:flex-end}
.uhr-pill{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;min-height:3rem;max-width:100%;padding:.3rem .95rem .3rem .45rem;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);border:2px solid var(--line-strong);box-shadow:var(--shadow-md);font-family:"Nunito",system-ui,sans-serif;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.uhr-pill::-webkit-details-marker{display:none}
.uhr-pill:hover{border-color:var(--ink)}
.uhr-pill:active{transform:scale(.97)}
.uhr-ring{width:2.2rem;height:2.2rem;flex:0 0 auto;fill:none;stroke-linecap:round}
.uhr-ring-bg{stroke:var(--line);stroke-width:3}
.uhr-ring-fg{stroke:currentColor;stroke-width:3.5}
.uhr-ring-hand{stroke:currentColor;stroke-width:2.4;fill:none}
.uhr-pill-t{display:flex;flex-direction:column;line-height:1.15;min-width:0;text-align:left}
.uhr-pill-t strong{font-size:1.05rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.uhr-pill-t small{font-size:.76rem;font-weight:600;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uhr.is-running .uhr-pill{background:var(--pf);color:var(--pt);border-color:var(--pb)}
.uhr.is-running .uhr-ring-bg{stroke:rgba(255,255,255,.75)}
.uhr.is-paused .uhr-pill{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.uhr.is-idle .uhr-pill{flex-direction:column;justify-content:center;gap:0;width:4.2rem;height:4.2rem;padding:.2rem;border-radius:50%}
.uhr.is-idle .uhr-ring{width:1.9rem;height:1.9rem}
.uhr.is-idle .uhr-pill-t strong{font-size:.8rem}
.uhr.is-new .uhr-ring-fg{animation:uhr-fill 700ms var(--ease) both}
@keyframes uhr-fill{from{stroke-dashoffset:94.25}}
.has-uhr .wrap{padding-bottom:6rem}
.uhr-panel{position:absolute;right:0;bottom:calc(100% + .6rem);width:min(24rem,calc(100vw - 2rem));max-height:calc(100vh - 8rem);max-height:calc(100dvh - 8rem);overflow:auto;overscroll-behavior:contain;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:.9rem 1rem 1rem;animation:drop var(--t-mid) var(--ease)}
.uhr-ph{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.uhr-ph h2{margin:0;font-size:1.05rem}
.uhr-panel .sub-h{margin:1rem 0 .5rem;font-size:.95rem}
.uhr-panel .grid{grid-template-columns:minmax(0,1fr)}
.uhr-panel .recent{grid-template-columns:minmax(0,1fr);margin-bottom:.4rem}
.uhr-panel .field{margin-bottom:.5rem}
.uhr-what{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
.uhr-what .proj{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--pt);background:var(--pf);border-radius:var(--radius-pill);padding:.3rem .8rem .3rem .65rem}
.uhr-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--pb,var(--line-strong));flex:0 0 auto}
.uhr-big{margin:.3rem 0 .2rem;font:700 2.6rem/1 "Nunito",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--now)}
.uhr-btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.5rem}
.uhr-go{background:var(--now);border-color:var(--now);color:#fff}
.uhr-go:hover{background:#7a0a56;border-color:#7a0a56;color:#fff}
.uhr-go.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.uhr-go.btn-secondary:hover{background:var(--bg);color:var(--ink);border-color:var(--ink)}
.uhr-quick .uhr-go{display:flex;flex-direction:column;align-items:center;width:100%;gap:.15rem;line-height:1.25}
.uhr-quick .uhr-go span{font-size:.8rem;font-weight:600;overflow-wrap:anywhere}
a.uhr-go{display:flex;width:100%}
.uhr-pause{margin:.2rem 0 .7rem}
.uhr-more{margin:.8rem 0 0}
.uhr-assign{margin-top:.9rem}
.uhr-times .row{margin-top:.3rem}
.uhr-dialbox{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:.5rem 0}
.uhr-panel .uhr-dial{width:min(13rem,100%)}
.uhr-dial{width:min(15rem,100%);height:auto;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%}
.uhr-dialbox.is-live .uhr-dial{cursor:grab}
.uhr-dialbox.is-drag .uhr-dial{cursor:grabbing}
.uhr-face{fill:var(--surface);stroke:var(--line-strong);stroke-width:2}
.uhr-track{fill:none;stroke:var(--bg-deep);stroke-width:8}
.uhr-arc{fill:none;stroke:var(--pt,var(--now));stroke-width:8;stroke-linecap:round}
.uhr-tick{stroke:var(--line-strong);stroke-width:1}
.uhr-tick.maj{stroke:var(--ink-2);stroke-width:2}
.uhr-lab{font:600 11px "Nunito Sans",system-ui,sans-serif;fill:var(--muted)}
.uhr-hand{stroke:var(--pt,var(--now));stroke-width:5;stroke-linecap:round}
.uhr-knob{fill:var(--pt,var(--now));stroke:#fff;stroke-width:3;transform-box:fill-box;transform-origin:center}
.uhr-hand-in{transform-origin:120px 120px}
.uhr-t1{font:700 19px "Nunito",system-ui,sans-serif;fill:var(--ink)}
.uhr-t2{font:600 12.5px "Nunito Sans",system-ui,sans-serif;fill:var(--muted)}
.uhr-steps{display:none;gap:.5rem}
.js .uhr-steps{display:flex}
.uhr-dlimit{margin:0;text-align:center}
.uhr-toast{margin:0;max-width:min(22rem,calc(100vw - 2rem));padding:.6rem 1rem;border-radius:var(--radius-sm);background:var(--ink);color:#fff;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-md);animation:drop var(--t-slow) var(--ease)}
.uhr-toast.is-err{background:var(--err-bg);color:var(--err-ink);border:2px solid var(--danger)}
.uhr-toast[hidden]{display:none}
.timer-dial{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;margin:.4rem 0 1rem}
.timer-dial .uhr-dialbox{margin:0}
.timer-dial .uhr-dial{width:min(11.5rem,100%)}
.timer-dial>p{flex:1 1 12rem;margin:0}
@media (max-width:700px){
  .uhr{right:.75rem;bottom:calc(4.4rem + env(safe-area-inset-bottom))}
  .uhr-panel{width:calc(100vw - 1.5rem);max-height:calc(100vh - 11rem);max-height:calc(100dvh - 11rem)}
  .has-uhr .wrap{padding-bottom:9rem}
  .uhr-pill-t small{max-width:6.5rem}
}
@media print{.uhr{display:none}}

/* Demo-Modus: Leiste ganz oben auf jeder Seite (dunkles Braun mit weißem Text, 12:1), auf dem Rechner mitlaufend, am Handy mitscrollend */
.demo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding:.6rem 1rem;background:var(--warn-ink);color:#fff;z-index:24}
.demo-bar-t{margin:0;flex:1 1 13rem;font-size:.92rem;line-height:1.35}
.demo-bar form{margin:0}
.demo-bar-b{font:700 .9rem/1.2 "Nunito",system-ui,sans-serif;background:#fff;color:var(--ink);border:2px solid #fff;border-radius:var(--radius-pill);padding:.5rem 1.1rem;min-height:2.75rem;cursor:pointer}
.demo-bar-b:hover{background:var(--bg-deep);border-color:var(--bg-deep)}
.demo-bar-b:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (min-width:701px){.demo-bar{position:sticky;top:0}}

/* Projektarten selbst verwalten: Liste in den Einstellungen und kleine Schnellanlage am Formular (alle Rahmen rundum, nie einseitig) */
.art-liste{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.art-liste>li{border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.75rem;background:var(--surface)}
.art-liste>li.is-archiv{background:var(--bg)}
.art-zeile{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}
.art-zeile .field{flex:1 1 14rem}
.art-zeile .row{gap:.5rem}
details.art-neu{margin:.4rem 0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 .75rem;background:var(--surface)}
details.art-neu>summary{cursor:pointer;color:var(--accent-dark);font-weight:600;min-height:2.75rem;display:flex;align-items:center}
details.art-neu[open]{padding-bottom:.75rem}
details.art-neu[open]>summary{margin-bottom:.5rem}
details.art-neu .field{margin:0 0 .6rem}
.tpl-art{border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 .75rem;background:var(--surface)}
.tpl-art>summary{cursor:pointer;font-weight:600;min-height:2.75rem;display:flex;align-items:center}
.tpl-art[open]{padding-bottom:.75rem}
.tpl-art textarea{width:100%}
details.art-neu+a.btn{align-self:flex-start}

.tool-ic{display:block;border-radius:8px;flex:none}
.rail-logo .tool-ic{width:32px;height:32px;margin:0 0 .5rem}
.brand .tool-ic{width:28px;height:28px}

/* Kundendesign am Kunden: Farben als SVG-Felder (kein Inline-Style wegen CSP), Logo daneben */
.kd-leiste{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:center;padding:.6rem .8rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)}
.kd-logo{display:block;max-width:12rem;height:44px;width:auto}
.kd-farbe{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;line-height:1.25}
.kd-farbe svg{flex:none}

.kd-druck{border-collapse:collapse;width:100%;font-size:.9rem}
.kd-druck th,.kd-druck td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line,#ddd);vertical-align:top}
.kd-druck form{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.3rem}

/* Werkbank im Kopf: Punkt plus immer das Wort (Farbe allein sagt nichts), schlicht und rechtsbündig */
.wb-kopf{max-width:96rem;margin:0 auto;padding:.7rem 1.5rem 0;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.wb-kopf p{margin:0}
.wb-stand{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem .6rem;font:600 .85rem/1.4 "Nunito",system-ui,sans-serif;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.1rem .8rem .1rem .65rem}
.wb-punkt{display:inline-block;width:.65rem;height:.65rem;border-radius:50%;flex:none;background:var(--line-strong)}
.wb-gruen .wb-punkt{background:var(--ok)}
.wb-gelb .wb-punkt{background:var(--warn-line)}
.wb-rot .wb-punkt{background:var(--danger)}
.wb-offen{color:var(--ink-2);font-weight:600;border-left:1px solid var(--line-strong);padding-left:.6rem}
.wb-zeile{font-size:.82rem;color:var(--ink);font-weight:600}
.wb-gelb~.wb-zeile{color:var(--warn-ink)}
.wb-rot~.wb-zeile{color:var(--err-ink)}
.wb-keine .wb-punkt{background:var(--muted)}

@media (max-width:480px){.wb-stand{font-size:.8rem;gap:.1rem .5rem;padding:.1rem .65rem .1rem .55rem}.wb-offen{padding-left:.5rem}}
/* Nachweis: Haken "Nach Beschreibung gruppieren" als hervorgehobene Option */
.opt-group{background:var(--accent-soft);border:1px solid #bcd6e8;border-radius:var(--radius-sm);padding:.6rem 1rem .2rem;margin:.6rem 0}
.opt-group .muted{margin:.1rem 0 .5rem 1.75rem}
.badge.badge-new{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem}
[data-kind-fieldset]:disabled{opacity:.55}
.opt-group .check{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.opt-group .field{margin:.2rem 0 .7rem 1.75rem;max-width:30rem}
.grp-sub2 td:first-child{padding-left:1.4rem}
.opt-group .field select{width:100%}
@media (max-width:480px){.opt-group .field{margin-left:0}}

/* Reservierte Zeitfenster je Kunde (Beschluss 10.11.2026): Band im Raster, freie Reststücke, Kennzeichen außerhalb, Kundenformular und Planungsabschnitt */
.pl-res{grid-column:1/-1;background-color:#fbf3e4;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 63px,rgba(180,83,9,.18) 63px,rgba(180,83,9,.18) 64px);outline:1px solid var(--warn-line);outline-offset:-1px}
.pl-free.res a{flex-direction:column;border-color:var(--warn-line);color:var(--warn-ink);background:rgba(255,255,255,.4);font-size:.7rem;padding:2px 6px;line-height:1.2}
.pl-free.res a:hover{background:#fff;border-color:var(--warn-ink)}
.pl-grid.has-res .pl-head,.pl-grid.has-res .pl-axis-head{height:5.5rem}
.pl-rt{margin:.15rem 0 0;font-size:.72rem;line-height:1.25;font-weight:700;color:var(--warn-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-blk.out{border:2px dotted var(--pt)}
.pl-blk .o{display:block;margin-top:3px;font-size:.7rem;line-height:1.2;font-weight:700;color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;padding:1px .45rem;width:max-content;max-width:100%}
.pl-blk:is(.gl1,.gl2,.gl3,.gl4) .o{display:none}
.pl-legend .k-res{background:#fbf3e4;border-color:var(--warn-line)}
.pl-kv .lock{display:inline-flex;align-items:center;gap:.35rem}
.pl-kv .lock svg{width:15px;height:15px;stroke:var(--warn-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.pl-kv .o-text{color:var(--warn-ink)}
.pl-rows li.free-row.res-row{border-color:var(--warn-line);background:#fbf3e4;color:var(--warn-ink)}
.fz-badge{margin:.35rem 0 0}
.fz-day{margin:.2rem 0;font-weight:700;color:var(--warn-ink)}
.fz-sum{margin:.2rem 0 0;font-weight:700}
.fz-add{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:.8rem;align-items:end}
@media (max-width:900px){.fz-add{grid-template-columns:repeat(2,minmax(0,1fr))}.fz-add .btn{grid-column:1/-1}}
.fz-bound{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.fz-bound li{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:center}
.fz-bound label{display:inline-flex;gap:.5rem;align-items:center;font-weight:400;min-height:1.9rem}
.fz-rowdel{background:none;border:0;padding:0;font:inherit;color:var(--danger);text-decoration:underline;cursor:pointer}
.fz-rowdel.fz-link{color:var(--accent-ink,var(--accent))}
.fz-free{margin:.4rem 0 0}
.fz-note{margin:.7rem 0 0}
.pl-rt::before{content:"";display:inline-block;width:.7rem;height:.5rem;margin-right:.3rem;background:#fbf3e4;border:1px solid var(--warn-line);border-radius:2px;vertical-align:-1px}

/* Hilfe (src/hilfe.php, hilfe.css): Leistenpunkt über "Mehr", Punkt für Neues */
.rail-hilfe>a{position:relative}
.hilfe-punkt{position:absolute;top:.4rem;left:calc(50% + .5rem);width:.55rem;height:.55rem;border-radius:50%;background:var(--now);box-shadow:0 0 0 2px var(--surface)}
.hilfe-punkt.mobil{display:none}
@media (min-width:701px){.rail-hilfe{margin-top:auto}.rail-hilfe+.rail-more{margin-top:.15rem}}
@media (max-width:700px){
  .mehr-btn{position:relative}
  .hilfe-punkt.mobil{display:block;top:.3rem;left:calc(50% + .4rem)}
  .mehr-btn.is-hilfe{background:var(--now-soft);color:var(--now)}
  .mehr-panel a .badge-new{margin-left:.4rem}
}

.ki-pick{width:2.2rem;text-align:center}.ki-bulk .row{flex-wrap:wrap;gap:.5rem}

/* Planung: Hover auf einem Block hebt ihn hervor, dämpft die anderen und zeigt eine Karte mit den Einzelheiten (nur mit Maus, nur mit Plan-Skript) */
.pl-tip{display:none}
@media (hover:hover){
  .js-plan .pl-grid:has(.pl-blk:not(.drag):hover) .pl-blk:not(:hover){opacity:.55}
  .js-plan .pl-blk:not(.drag):hover{box-shadow:var(--shadow-md);outline:2px solid var(--ink);outline-offset:0;z-index:7}
  .js-plan .pl-blk:not(.drag):hover .pl-tip{display:flex;flex-direction:column;gap:.15rem;position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:12rem;max-width:18rem;padding:.55rem .7rem;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm,6px);box-shadow:var(--shadow-md);font-size:.8rem;line-height:1.3;pointer-events:none}
  .js-plan .pl-day:nth-last-of-type(-n+2) .pl-blk:hover .pl-tip{left:auto;right:0}
  .js-plan .pl-tip .muted{color:var(--muted)}
}

/* Planung: Prüfknopf in der Kopfzeile, Knopf zu „Neues Projekt einplanen“ in der Leiste */
.pl-cap form{display:inline}
.pl-newbtn{margin-top:.8rem}


/* Ziele (Etappe 1a): ruhig, kein Schmuck, keine Bewegung. Ampel als kleiner Punkt mit Text. */
.ziel-ampel{white-space:nowrap}
.ziel-punkt{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.4rem;background:var(--muted);vertical-align:baseline}
.ziel-ampel-auf_kurs .ziel-punkt{background:var(--ok)}
.ziel-ampel-knapp .ziel-punkt{background:var(--warn-line)}
.ziel-ampel-daneben .ziel-punkt{background:var(--danger)}
.ziel-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem 1.4rem;margin:0}
.ziel-fakten dt{font-size:.85rem;color:var(--muted);font-weight:600}
.ziel-fakten dd{margin:.15rem 0 0;overflow-wrap:anywhere}
.ziel-zahl{font:700 1.4rem/1.25 "Nunito",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.ziel-status{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;margin:0 0 1rem}
.ziel-kopf{margin:.4rem 0 .8rem;padding:.2rem 0}
.ziel-kopf p{margin:0 0 .5rem}
/* Ziele (Etappe 1b): Mini-Verlauf als Inline-SVG, nur Textfarbe, keine Animation */
.ziel-verlauf{display:block;max-width:100%;height:auto;color:var(--muted)}
.ziel-verlauf-klein{margin-top:.3rem}
.ziel-verlauf-gross{margin:.4rem 0 .2rem}
.ziel-termine{margin:.4rem 0 0}
.katalog-form-liste{max-width:46rem}
.inline-form{display:inline;margin-left:.6rem}
.ziel-kopf .field{margin:0}
.ziel-kunde,.ziel-katalog{list-style:none;margin:0;padding:0}
.ziel-kunde li,.ziel-katalog li{padding:.6rem 0;border-bottom:1px solid var(--line)}
.ziel-kunde li:last-child,.ziel-katalog li:last-child{border-bottom:0}
.ziel-gesperrt{color:var(--muted)}
.ziel-meldungen li{margin:.2rem 0}
.ziel-pflicht{margin-top:.4rem}
.ziel-mehr>summary{cursor:pointer;font-weight:600}
.ziel-ausgang .grid{margin-left:1.75rem}
@media (max-width:700px){.stack-sm td.zl-zelle{display:block;text-align:left}.stack-sm td.zl-zelle::before{display:block}}

/* Neu-Markierungen am Menü (src/neububbles.php). Zahl = neue Daten (blau, wie Trail), Punkt = neue Funktion (magenta, links oben). Keine Bewegung. */
.rail-list>li>a{position:relative}
.nb-zahl{position:absolute;top:.15rem;right:.4rem;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:var(--radius-pill);background:var(--accent);color:var(--surface);font-weight:700;font-size:.75rem;line-height:1.35rem;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.rail-list>li>a[aria-current] .nb-zahl{box-shadow:0 0 0 2px var(--ink)}
/* Punkt sitzt wie .hilfe-punkt rechts; trägt der Punkt schon eine Zahl, entfällt er */
.navi-neu{position:absolute;top:.4rem;left:calc(50% + .5rem);width:.55rem;height:.55rem;border-radius:50%;background:var(--now);box-shadow:0 0 0 2px var(--surface)}
.rail-list>li>a:has(.nb-zahl) .navi-neu{display:none}
.rail-list>li>a[aria-current] .navi-neu{box-shadow:0 0 0 2px var(--ink)}
@media (max-width:700px){
  .nb-zahl{top:.05rem;right:auto;left:calc(50% + .55rem)}
  .navi-neu{top:.3rem;left:calc(50% + .4rem)}
  .rail-list>li>a[aria-current] .nb-zahl,.rail-list>li>a[aria-current] .navi-neu{box-shadow:0 0 0 2px var(--now-soft)}
}
.nb-box ul{margin:.3rem 0}