/* IBV Stundenerfassung – Gestaltung angelehnt an ibv-hd.de (aus dem Prototyp übernommen) */
/* Layout: weiße Kopfzeile mit roter Linie wie auf ibv-hd.de, Logo links, Reiter rechts; hellgraue Arbeitsfläche, weiße Karten, Versalien-Überschriften */
:root{
  --bg:#f8f8f8; --surface:#ffffff; --surface-2:#f0f0f1; --fg:#111111; --muted:#5f6064; --line:#e3e3e4; --logo-grey:#a7a8ab;
  --accent:#e2001a; --accent-hover:#c00008; --accent-ink:#ffffff; --accent-soft:#fde6e8; --accent-text:#b8001a; --accent-fill:#e2001a;
  --feld:#808186; --rand:#b4b5b9;
  --bar:#3c3d40; --bar-soft:#e6e6e8;
  --o1:#3c3d40; --o2:#9a9ca1; --o3:#c98a14; --o4:#3f7cac; --o5:#7a5ea8; --o6:#4f8a55; --o7:#a0522d; --o8:#2a9d8f;
  --good:#2b7a3b; --good-soft:#e3f2e5; --warn:#8c5a00; --warn-soft:#f8edd3; --bad:#b3001b; --bad-soft:#fbe3e6;
  /* Anlagengruppen (D-034): -flaeche Hintergrund, -mark Streifen/Balken, -text Schrift auf der Fläche.
     Nur für Gewerke, nie für Zustände; immer zusammen mit der Beschriftung „AG n“. */
  --ag1-flaeche:#e2f7e5; --ag1-mark:#7fc08c; --ag1-text:#286037;
  --ag2-flaeche:#ffe8e6; --ag2-mark:#e79491; --ag2-text:#7d3c3c;
  --ag3-flaeche:#dff3ff; --ag3-mark:#76b5e9; --ag3-text:#1f5781;
  --ag4-flaeche:#f7f0d9; --ag4-mark:#ead070; --ag4-text:#625101;
  --ag5-flaeche:#ffe8f7; --ag5-mark:#d995c2; --ag5-text:#733d62;
  --ag6-flaeche:#eef0f3; --ag6-mark:#a6afbb; --ag6-text:#4e535a;
  --ag7-flaeche:#eee6e0; --ag7-mark:#886f5e; --ag7-text:#513e31;
  --ag8-flaeche:#ffecdb; --ag8-mark:#f2a866; --ag8-text:#754614;
  --font-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --r:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121213; --surface:#1b1b1d; --surface-2:#252528; --fg:#f1f1f2; --muted:#a3a4a8; --line:#323236; --logo-grey:#8e8f93;
    --accent:#ff3d55; --accent-hover:#ff6075; --accent-ink:#ffffff; --accent-soft:#3a1519; --accent-text:#ff6075; --accent-fill:#d81b36; --feld:#76777c; --rand:#55565b;
    --bar:#d0d1d4; --bar-soft:#2c2c30;
    --o1:#d0d1d4; --o2:#8a8c91; --o3:#e5a93a; --o4:#6ea8d6; --o5:#a88ad4; --o6:#7fbf84; --o7:#d08560; --o8:#55c2b4;
    --good:#74c585; --good-soft:#17301d; --warn:#e4b45c; --warn-soft:#33280f; --bad:#ff7a8a; --bad-soft:#3d161c;
    --ag1-flaeche:#1c3422; --ag1-text:#b7e5bf; --ag2-flaeche:#422423; --ag2-text:#ffc6c3;
    --ag3-flaeche:#193043; --ag3-text:#b1ddff; --ag4-flaeche:#352e11; --ag4-mark:#cfb656; --ag4-text:#e6d8a3;
    --ag5-flaeche:#3d2535; --ag5-text:#f8c6e6; --ag6-flaeche:#2c2e31; --ag6-text:#d3d8de;
    --ag7-flaeche:#352c25; --ag7-mark:#9a8070; --ag7-text:#e4d4c7; --ag8-flaeche:#3e2815; --ag8-mark:#eea563; --ag8-text:#facea9;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121213; --surface:#1b1b1d; --surface-2:#252528; --fg:#f1f1f2; --muted:#a3a4a8; --line:#323236; --logo-grey:#8e8f93;
  --accent:#ff3d55; --accent-hover:#ff6075; --accent-ink:#ffffff; --accent-soft:#3a1519; --accent-text:#ff6075; --accent-fill:#d81b36; --feld:#76777c; --rand:#55565b;
  --bar:#d0d1d4; --bar-soft:#2c2c30;
  --o1:#d0d1d4; --o2:#8a8c91; --o3:#e5a93a; --o4:#6ea8d6; --o5:#a88ad4; --o6:#7fbf84; --o7:#d08560; --o8:#55c2b4;
  --good:#74c585; --good-soft:#17301d; --warn:#e4b45c; --warn-soft:#33280f; --bad:#ff7a8a; --bad-soft:#3d161c;
  --ag1-flaeche:#1c3422; --ag1-text:#b7e5bf; --ag2-flaeche:#422423; --ag2-text:#ffc6c3;
  --ag3-flaeche:#193043; --ag3-text:#b1ddff; --ag4-flaeche:#352e11; --ag4-mark:#cfb656; --ag4-text:#e6d8a3;
  --ag5-flaeche:#3d2535; --ag5-text:#f8c6e6; --ag6-flaeche:#2c2e31; --ag6-text:#d3d8de;
  --ag7-flaeche:#352c25; --ag7-mark:#9a8070; --ag7-text:#e4d4c7; --ag8-flaeche:#3e2815; --ag8-mark:#eea563; --ag8-text:#facea9;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:15px;line-height:1.5}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num,.mono{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
h3{font-size:13px;font-weight:700;color:var(--muted)}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

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

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

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

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

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

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

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

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

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

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

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

/* --- Verwaltung --- */
.vnav{margin-bottom:4px}
.vfeld.verborgen{display:none}
h1.seite{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.pfad{font-size:13px;color:var(--muted);margin:2px 0 6px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline}
.pfad a{color:var(--muted)}
.pfad a:hover{color:var(--accent)}
.pfad [aria-current]{color:var(--fg)}
.aktionen{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:6px 0 14px}
.aktionen .gruppe{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.aktionen .lbl{font-size:12px;color:var(--muted);margin-right:2px}
.pill.umbruch{display:block;white-space:normal;border-radius:var(--r);padding:8px 12px;font-weight:500}
td.verborgen>*{visibility:hidden}
.vform{display:grid;gap:16px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px 18px;align-items:start}
.vfeld{display:grid;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.vfeld .vlabel{font-weight:600}
.vfeld input:not([type=checkbox]):not([type=radio]):not([type=color]),.vfeld select,.vfeld textarea{width:100%}
.vfeld small{font-size:12px;color:var(--muted);line-height:1.35}
.vbreit{grid-column:1/-1}
.vcheck{align-self:end}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.errorlist{list-style:none;margin:2px 0 0;padding:0;color:var(--bad);font-size:12px;font-weight:600}
.vfeld.fehler input,.vfeld.fehler select{border-color:var(--bad)}
.vleiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.vleiste .rechts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vkarte{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--fg)}
.vkarte:hover{border-color:var(--accent)}
.vkarte b{font-size:28px;font-weight:300}
.vkarte span{font-size:13px;color:var(--muted)}
/* Startseite Honorar (Bewertung 07.11.2026): kräftige Zahl, Titel dunkel, nur der Fußtext grau; deutlicherer Rand,
   Hover ohne Rot (Rot = Warnung) */
.kennzahlen .vkarten{align-items:stretch}
.kennzahlen .vkarte{grid-template-rows:auto auto 1fr;align-content:start;border-color:var(--rand)}
.kennzahlen .vkarte:hover{border-color:var(--fg)}
.kennzahlen .vkarte b{font-size:26px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kennzahlen .vkarte b small{font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
.kennzahlen .vkarte span.vk-titel{font-size:14px;font-weight:600;color:var(--fg)}
.kennzahlen .vkarte span.vk-fuss{font-size:13px;color:var(--muted)}
.kennzahlen .vkarte span.vk-balken{display:block;height:8px;margin:2px 0;grid-area:auto}   /* nicht das Raster aus .ab-z am Handy */
.kennzahlen .vkarte span.vk-vormonat{font-size:13px;font-weight:700;color:var(--fg);align-self:end}
.kennzahlen .vkarte span.vk-vormonat.vgl-gut{color:var(--good)}
.kennzahlen .vkarte span.vk-vormonat.vgl-achtung{color:var(--warn)}
.kennzahlen .vkarte span.vk-vormonat.vgl-schlecht{color:var(--bad)}
.kennzahlen .vkarte span.nowrap{font-size:inherit;color:inherit}
.kennzahlen .vkarte strong.neg span,.kennzahlen .vkarte span.vk-vormonat span{color:inherit;font-size:inherit}
/* Handy: 2 × 2 kompakt, damit „Zu tun“ früher kommt (Bewertung 5) */
@media (max-width:640px){
  .kennzahlen .vkarten{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kennzahlen .vkarte{padding:10px 12px;gap:4px}
  .kennzahlen .vkarte b{font-size:20px}
  .kennzahlen .vkarte b small{font-size:12px}
  .kennzahlen .vkarte span.vk-titel{font-size:13px}
  .kennzahlen .vkarte span.vk-fuss,.kennzahlen .vkarte span.vk-vormonat{font-size:12px;line-height:1.35}
}
/* Seitentitel größer als die Abschnitte (Bewertung 8) */
.start-titel h1.seite{font-size:20px}
.rollen{display:flex;gap:4px;flex-wrap:wrap}
.rolle{font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;background:var(--surface-2);color:var(--muted)}
.rolle.gf{background:var(--accent-soft);color:var(--accent-text)}
.rolle.pl{background:var(--bar-soft);color:var(--fg)}
tr.aus td{color:var(--muted)}
.matrix{border-collapse:collapse;font-size:13px}
.matrix th,.matrix td{border:1px solid var(--line);padding:4px 6px;text-align:center;vertical-align:middle}
.matrix thead th{background:var(--surface-2);font-size:11px;font-weight:600;min-width:84px}
.matrix th.l{text-align:left;white-space:nowrap;min-width:220px;background:var(--surface)}
.matrix td.aus,.matrix th.aus{background:var(--surface-2)}
.matrix td.aus *{visibility:hidden}
.matrix input[type=number]{width:64px;padding:4px 6px;min-height:30px;text-align:right}
.rollen-matrix thead input{width:9em;padding:4px 6px;min-height:30px;font-weight:600}
.rollen-matrix th.bereich{background:var(--surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.rollen-matrix tbody th.l{white-space:normal;min-width:200px;font-weight:400}
.matrix .zn{display:block;font-size:11px;color:var(--muted);margin-top:3px;cursor:pointer;white-space:nowrap}
.matrix .zn input{accent-color:var(--accent);vertical-align:-2px}
.matrix .zn:has(input:checked){color:var(--accent-text);font-weight:700}
.matrix tfoot td{font-weight:700;background:var(--surface-2)}
.matrix label.kopf{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
/* IBV-014 (D-041): Leistungsumfang je Anlagengruppe – Farbe der AG nach D-034 als Randmarke, Kopfspalte bleibt stehen */
.matrix.umfang thead th{min-width:48px}
.matrix.umfang th.l{position:sticky;left:0;z-index:1;min-width:210px}
.matrix.umfang tr[class^="ag"] > th.l{box-shadow:inset 4px 0 0 var(--ag-mark)}
.matrix.umfang tr.aus td{background:var(--surface-2)}
.matrix.umfang tr.aus td > *{opacity:.45}
.matrix.umfang td input[type=checkbox]{width:20px;height:20px;cursor:pointer}
@media (max-width:600px){.matrix.umfang th.l{min-width:120px;max-width:150px;white-space:normal}
  .matrix.umfang th.l label.kopf{flex-wrap:wrap}}
.matrix td.alt{background:var(--surface-2)}
.matrix td.alt input{opacity:.75}
.ftab{border-collapse:collapse;width:100%}
.ftab th{font-size:11px;text-align:left;color:var(--muted);padding:6px;border-bottom:1px solid var(--line)}
.ftab td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.ftab input:not([type=checkbox]):not([type=color]),.ftab select{width:100%}
.ftab tr.neu td{background:var(--surface-2)}
.modelle li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.modelle{list-style:none;margin:0;padding:0}
.matrix th{text-transform:none;letter-spacing:0}
.matrix th.l{font-weight:500;font-size:13px}
.matrix thead th{min-width:72px}
.matrix input[type=number]{width:58px}
a.btn{text-decoration:none}
.vfeld .chk{white-space:normal;max-width:100%}
.anpassen{border:1px solid var(--warn);background:var(--warn-soft);border-radius:var(--r);padding:12px 14px;display:grid;gap:10px;font-size:14px;margin-bottom:10px}
.anpassen .row{gap:8px}


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

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

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

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

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

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

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

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

/* Einstiegsseiten (Anmelden, Abgemeldet): links Marke und ein stilisierter Arbeitstag, rechts eine Karte mit einer Aktion */
.einstieg{min-height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,400px);gap:56px;
  align-items:center;max-width:980px;width:100%;margin:0 auto;padding-block:32px}
.ein-logo{font-size:104px;-webkit-text-stroke:2px var(--logo-grey);display:block}
.ein-firma{font-size:13px;font-weight:700;color:var(--muted);margin:18px 0 4px;letter-spacing:.02em}
.ein-titel{font-size:42px;line-height:1.05;font-weight:700;color:var(--accent-text);letter-spacing:-.01em}
.ein-satz{font-size:18px;max-width:30ch;margin:14px 0 32px}
.ein-tag{margin:0;max-width:440px}
.ein-spur{position:relative;height:30px;background:var(--surface-2);border-radius:var(--r)}
.ein-spur i{position:absolute;top:5px;bottom:5px;border-radius:2px}
.ein-spur i.pz{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 6px)}
/* Honorar: Honorarkette statt Arbeitstag – Linie mit Punkten (Angebot, Auftrag, AB), Quadraten (Abschläge) und Ring */
.ein-kette-fig{padding:0 10px}
.ein-kette{position:relative;height:30px}
.ein-kette::before{content:"";position:absolute;left:0;right:0;top:14px;border-top:2px dashed var(--o2)}
.ein-kette b{position:absolute;left:0;top:13px;height:4px;border-radius:2px;background:var(--o1)}
.ein-kette i{position:absolute;top:15px;transform:translate(-50%,-50%);box-sizing:border-box;background:var(--o1)}
.ein-kette i.pk{width:18px;height:18px;border-radius:50%}
.ein-kette i.ab{width:16px;height:16px;border-radius:3px}
.ein-kette i.lauf{width:20px;height:20px;border:3px solid var(--o3);background:var(--o3);box-shadow:inset 0 0 0 3px var(--bg)}
.ein-kette i.offen{border:2px dashed var(--o2);background:var(--bg)}
.ein-kette i.schluss{width:22px;height:22px;border-radius:50%;border:3px solid var(--accent);background:var(--bg)}
/* Projekte, Mitarbeiter, Apps: Motiv als SVG in denselben Farben (dunkel erledigt, gelb aktuell, gestrichelt offen, rot Akzent) */
.ein-bild svg{display:block;width:100%;height:auto}
.motiv .b-blatt{fill:var(--surface);stroke:var(--rand);stroke-width:1.2}
.motiv .b-dunkel{fill:var(--o1)}
.motiv .b-grau{fill:var(--o2)}
.motiv .b-gelb{fill:var(--o3)}
.motiv .b-rot{fill:var(--accent)}
.motiv .b-hohl{fill:var(--bg)}
.motiv .b-gelb-rand{stroke:var(--o3);stroke-width:2.5}
.motiv .b-rot-rand{stroke:var(--accent);stroke-width:2}
.motiv .b-offen{stroke:var(--o2);stroke-width:1.5;stroke-dasharray:4 4}
.motiv .b-linie{fill:none;stroke:var(--o1);stroke-width:2}
.motiv .b-text{font:600 11px var(--font,system-ui,sans-serif);fill:var(--muted);text-anchor:middle}
.motiv .b-weiss{fill:#fff}
.motiv .b-plus{fill:none;stroke:var(--o2);stroke-width:2;stroke-linecap:round}

/* Apps-Startseite: Kacheln mit dem Motiv der App oben (wie auf den Anmeldeseiten), geplante Apps gestrichelt */
.app-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:12px}
.app-kachel{display:grid;grid-template-rows:auto auto 1fr;gap:6px;padding:0 0 18px;background:var(--surface);
  border:1px solid var(--line);border-top:3px solid transparent;border-radius:var(--r);color:var(--fg);text-decoration:none;overflow:hidden}
.app-kachel .app-bild{--bg:var(--surface-2);display:grid;place-items:center;height:112px;background:var(--surface-2);margin-bottom:10px}
.app-kachel .app-bild svg{height:64px;width:auto;display:block}
.app-kachel b{font-size:24px;font-weight:700;color:var(--accent-text);padding:0 18px;line-height:1.15}
.app-kachel .app-text{font-size:14px;color:var(--muted);padding:0 18px}
a.app-kachel:hover{border-top-color:var(--accent)}
a.app-kachel:focus-visible{outline-offset:3px}
.app-kachel.spaeter{background:transparent;border:1.5px dashed var(--rand)}
.app-kachel.spaeter .app-bild{background:transparent}
.app-kachel.spaeter .b-hohl{fill:none}
.app-kachel.spaeter b{color:var(--muted);font-weight:600}
@media (max-width:760px){
  .app-kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .app-kachel{padding-bottom:12px;gap:4px}
  .app-kachel .app-bild{height:76px;margin-bottom:6px}
  .app-kachel .app-bild svg{height:44px}
  .app-kachel b{font-size:18px;padding:0 12px}
  .app-kachel .app-text{font-size:13px;padding:0 12px}
}
.ein-achse{position:relative;height:18px;font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.ein-achse span{position:absolute;top:0}
.ein-karte{padding:32px;gap:16px;border-top:3px solid var(--accent)}
.ein-karte p{margin:0}
.btn-ms{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 20px;background:var(--fg);
  color:var(--bg);border-radius:var(--r);font-weight:700;font-size:16px;text-decoration:none}
.btn-ms:hover{background:color-mix(in srgb,var(--fg) 82%,var(--accent))}
.btn-ms:focus-visible{outline-offset:3px}
.ein-hinweis{padding:10px 12px;border-radius:var(--r);font-size:14px}
.ein-hinweis.bad{background:var(--bad-soft);color:var(--bad)}
.ein-haken{width:52px;height:52px;border-radius:50%;background:var(--good-soft);color:var(--good);display:grid;place-items:center;
  font-size:26px;font-weight:700}
.ein-knopf{justify-content:center;min-height:48px;font-size:16px}
.ein-form{display:grid;gap:12px}
.ein-form input{min-height:44px}
.ein-form .btn{justify-content:center;min-height:48px}
@media (max-width:760px){
  .einstieg{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;padding-block:12px}
  .ein-logo{font-size:64px;-webkit-text-stroke-width:1.6px}
  .ein-titel{font-size:30px}
  .ein-satz{font-size:16px;margin-bottom:20px}
  .ein-karte{padding:22px}
  .btn-ms{padding:0 12px;gap:10px;font-size:15px;white-space:nowrap}
}
/* iPhone/iPad: Safari vergrößert die Seite beim Antippen von Feldern unter 16 px Schrift – auf Touch-Geräten daher 16 px */
@media (pointer:coarse){input,select,textarea{font-size:16px}}
/* Woche/Monat: Umschalter, Zwischensumme je KW, kompakte Zeile Kundenanteil, Karten Abschließen/Nachweis */
.umschalter{display:inline-flex;border:1px solid var(--fg);border-radius:var(--r);overflow:hidden;margin-right:4px}
.umschalter a{padding:6px 14px;min-height:38px;display:inline-flex;align-items:center;text-decoration:none;color:var(--fg);font-weight:600;font-size:14px}
.umschalter a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.wochentab tr.zws td{background:var(--surface-2);font-weight:700;border-bottom:1px solid var(--line)}
.wochentab tr.zws a{color:inherit}
.anteilzeile{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;margin:0}
.card.abschluss,.card.nachweis{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.card.abschluss > div,.card.nachweis > div{flex:1 1 280px}
.monatswerte th{background:none;color:var(--muted);font-weight:600}
@media (max-width:700px){.umschalter{flex-basis:100%;width:max-content}}
/* Urlaubsantrag in Mein Konto (E-07a) */
#urlaub{scroll-margin-top:72px}
.antrag{display:grid;gap:10px}
.mailwahl{display:grid;gap:10px;justify-items:start}
.mailwahl .chk{white-space:normal}
.mailwahl .field{width:min(100%,280px)}
.einladung{margin-bottom:12px}
.mailliste{display:grid;gap:10px}
.mailvorlage{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0 14px}
.mailvorlage>summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;cursor:pointer;font-weight:600}
.mailvorlage[open]>summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.mv-chips{display:inline-flex;gap:6px}
.mv-info{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px;font-size:13px}
.mv-info dt{color:var(--muted);font-weight:600}.mv-info dd{margin:0}
.mv-form{display:grid;gap:10px;justify-items:start}
.mv-form .field{width:100%}
.mv-form input[type=text],.mv-form textarea{width:100%;box-sizing:border-box}
.mv-form textarea{font:14px/1.5 ui-monospace,Consolas,monospace;min-height:220px;resize:vertical}
.mv-form .chk{white-space:normal}
.mv-platz ul{margin:6px 0 0;padding-left:18px;font-size:13px}.mv-platz li{margin:2px 0}
.mv-vorschau{margin:14px 0;display:grid;gap:6px}
.mv-vorschau iframe{width:100%;height:520px;border:1px solid var(--line);border-radius:var(--r);background:#f3f3f4}
.antrag input[type=date]{min-height:38px}
.vorschau{display:grid;gap:8px;padding:14px;border:1px solid var(--accent);border-radius:var(--r);background:var(--accent-soft)}
.vorschau p{margin:0}
.uebersprungen{margin:0;padding-left:18px}
details > summary{cursor:pointer;font-weight:600;padding:4px 0}
details > .tw{margin-top:8px}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.matrix.eingabe th.l{white-space:normal;min-width:140px;max-width:190px;font-weight:600}
.matrix.eingabe input{width:3.8em}
.ftab.anlagen select[name$='-gewerk']{min-width:15em;max-width:22em}
.ftab.anlagen input[name$='-bezeichnung']{width:9em}
.ftab.anlagen input[name$='-kosten']{width:9em;text-align:right}
.ftab.anlagen input[name$='-umbauzuschlag']{width:5em;text-align:right}
.ftab.anlagen select[name$='-zone']{min-width:4.8em}
.ftab.anlagen select[name$='-stufe']{min-width:12em}
form[data-matrix]{min-width:0;max-width:100%}
#teilleistungen{min-width:0;grid-template-columns:minmax(0,1fr)}
.matrix.eingabe tr.alle>*{background:var(--surface-2)}
.matrix.eingabe tr.alle input{border-style:dashed}
summary h2.inline{display:inline;margin:0;font-size:inherit}
/* Aufgabe 14c: Positionen (Pauschale) und Stunden (Zeitnachweis) – lesbare Mindestbreiten, auf dem Handy scrollt die Tabelle */
.eingabe14 td:first-of-type input{min-width:10rem}
.eingabe14 td textarea{min-width:12rem}
.eingabe14 td.r input{min-width:6rem;text-align:right}
.nowrap{white-space:nowrap}
.werkzeuge{flex-wrap:wrap}.werkzeuge select{max-width:100%;min-width:0}
.vform>*{min-width:0}
.ftab td.lph{white-space:normal;min-width:8rem}
.prozentwahl{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
/* Schrittleiste auf der Seite eines Stands (Manuel 04.11.2026) */
.ablauf{gap:10px}
.ablauf ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ablauf .schritt a{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);color:var(--fg);text-decoration:none;min-height:44px;height:100%;box-sizing:border-box}
.ablauf .schritt a:hover,.ablauf .schritt a:focus-visible{border-color:var(--fg)}
.ablauf .nr{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;border:2px solid var(--line);color:var(--muted)}
.ablauf .txt{display:grid;gap:2px;min-width:0}
.ablauf .txt b{font-size:13px}
.ablauf .txt small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.ablauf .ok .nr{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.ablauf .warn .nr{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.ablauf .warn small{color:var(--warn)}
.ablauf .optional .nr{border-style:dashed}
.ablauf-summe{margin:0;font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.anlagen-edit input{width:9rem;text-align:right}
.anlagen-edit td.r input[name^="u_"]{width:4.5rem}
.anlagen-edit select{max-width:12rem}
[id]{scroll-margin-top:140px}
section.verborgen,div.verborgen{display:none}
@media (max-width:700px){[id]{scroll-margin-top:12px}}
@media (max-width:700px){.ablauf ol{grid-template-columns:1fr 1fr;gap:6px}.ablauf .schritt a{padding:6px 8px;gap:8px}.ablauf .nr{flex-basis:22px;height:22px;font-size:12px}}
.anlagen-edit th.l{white-space:normal;min-width:9rem}
/* Angebot als Ablauf in Reitern (Manuel 04.11.2026) */
.ablauf-fuss{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.ablauf .schritt.aktiv a{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.ablauf .schritt.aktiv b{color:var(--fg)}
[data-schritt][hidden]{display:none!important}
.schritt-nav{justify-content:flex-end}
/* Knopfleisten der übrigen Formulare wie im Ablauf: Hauptknopf rechts, Löschen links (Abschnitt 1, 05.11.2026) */
.row.knopfleiste{justify-content:flex-end;align-items:center}
/* Farbstreifen der Anlagengruppe (D-034) in Anlagentabelle und Teilleistungs-Matrix (Manuel 06.11.2026): 4 px am
   linken Rand, sonst nichts – hilft beim Wiederfinden derselben AG in Tabelle, Matrix, Liste. */
.ag1{--ag-mark:var(--ag1-mark)}.ag2{--ag-mark:var(--ag2-mark)}.ag3{--ag-mark:var(--ag3-mark)}.ag4{--ag-mark:var(--ag4-mark)}.ag5{--ag-mark:var(--ag5-mark)}.ag6{--ag-mark:var(--ag6-mark)}.ag7{--ag-mark:var(--ag7-mark)}.ag8{--ag-mark:var(--ag8-mark)}
.anlagentab tbody.anl[class*=" ag"] > tr > td:first-of-type{box-shadow:inset 4px 0 0 var(--ag-mark)}
.ablauf-matrix tr[class^="ag"] > th.l{box-shadow:inset 4px 0 0 var(--ag-mark)}
@media (max-width:700px){
  .anlagentab tbody.anl[class*=" ag"] > tr > td:first-of-type{box-shadow:none}
  .anlagentab tbody.anl[class*=" ag"] > tr.anl-zeile{box-shadow:inset 4px 0 0 var(--ag-mark)}
  .ablauf-matrix tr[class^="ag"]{box-shadow:inset 4px 0 0 var(--ag-mark)}
}
/* Startseite Honorar: Umschalter „Ich“ (Kürzel) / „IBV“ (Manuel 06.11.2026) */
.ansicht-wahl{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);margin-left:12px;vertical-align:middle}
.ansicht-wahl a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font-weight:600;font-size:14px;color:var(--fg);text-decoration:none}
.ansicht-wahl a + a{border-left:1px solid var(--line)}
.ansicht-wahl a{color:var(--muted);font-weight:500}
.ansicht-wahl a:hover{color:var(--fg);background:var(--surface-2)}
.ansicht-wahl a[aria-current]{background:var(--fg);color:var(--bg);font-weight:700}   /* Auswahl deutlich (Manuel 07.11.2026) */
/* Startseite: Überschrift mit den Umschaltern in einer Zeile */
.start-titel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.start-titel .ansicht-wahl{margin-left:0}
/* Vorjahresvergleich: Pfeil und Vorzeichen tragen die Aussage, die Farbe unterstützt */
td.vgl-gut{color:var(--good)}
td.vgl-achtung{color:var(--warn)}
td.vgl-schlecht{color:var(--bad)}
.kb-jahr{min-width:4ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.kb-jahr-tabelle td a{font-weight:600}
.kbj-handy{display:none}
.kbj-rahmen{overflow-x:auto}
@media (max-width:600px){.kbj-pc{display:none}.kbj-handy{display:block;font-size:12px;font-weight:400}
  th .kbj-handy{font-size:inherit;font-weight:inherit}
  .kb-jahr-tabelle{font-size:13px;width:100%}
  .kb-jahr-tabelle th,.kb-jahr-tabelle td{padding:6px 4px}
  .kb-jahr-tabelle tbody td:first-child,.kb-jahr-tabelle tfoot th{white-space:normal}
  .kb-jahr-tabelle td:first-child .small{display:block}}
.ansicht-wahl a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (pointer:coarse){.ansicht-wahl a{min-height:44px}}
/* Listen ohne seitliches Scrollen (Manuel 06.11.2026): Text darf umbrechen, Zahlen nicht; am Handy je Zeile ein Block */
.tw.ohne-scroll{overflow-x:visible}
.liste-karten td{white-space:normal;vertical-align:top}
.liste-karten td.num,.liste-karten td .pill{white-space:nowrap}
.liste-karten .zeile2{display:block;margin-top:2px}
@media (max-width:700px){
  .tw.ohne-scroll{border:0;background:none}
  .liste-karten,.liste-karten tbody,.liste-karten tr,.liste-karten td{display:block;width:100%;box-sizing:border-box}
  .liste-karten thead{display:none}
  .liste-karten tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;border:1px solid var(--line);border-radius:var(--r);
    padding:10px 12px;margin-bottom:8px;background:var(--surface)}
  .liste-karten td{border:0;padding:0}
  .liste-karten td.haupt{grid-column:1/-1;font-weight:600}
  .liste-karten td[data-titel]:not(.haupt)::before{content:attr(data-titel);display:block;font-size:11px;color:var(--muted)}
  .liste-karten td.num{text-align:left}
}
.row.knopfleiste .links{margin-right:auto}
/* Touch (Prüfung 05.11.2026, HIG: 44 pt Standard): kleine Knöpfe und Felder der Abläufe am Handy höher */
@media (pointer:coarse){
  main .btn.sm{min-height:40px}
  .anlagentab select,.anlagentab input:not([type=checkbox]),.schrittform .vfeld input:not([type=checkbox]):not([type=radio]),
  .schrittform .vfeld select{min-height:44px}
}
.pdfvorschau iframe{width:100%;height:80vh;min-height:520px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
@media (max-width:700px){.pdfvorschau iframe{height:70vh;min-height:360px}}
/* Angebot in Schritten (Manuel 04.11.2026) */
.ablauf .schritt .a{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);min-height:44px;height:100%;box-sizing:border-box}
.ablauf .schritt.aktiv .a{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.ablauf .schritt.aktiv .nr{border-color:var(--accent);color:var(--fg)}
.schritt-titel{margin:4px 0 0;font-size:15px}
.schritt-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.schritt-nav .zurueck{order:-1;margin-right:auto}
.anlage-block{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin-bottom:8px}
.anlage-block>summary{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between;cursor:pointer;padding:4px 0;min-height:32px;align-items:center}
.anlage-block[open]>summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.anl-werte{font-weight:400;color:var(--muted)}
/* Bemerkung je LPH in der Tabelle „Teilleistungen“ */
.matrix input.bem{display:block;width:100%;min-width:5.5rem;margin-top:4px;font-size:12px;padding:3px 5px;text-align:left}
/* Tabelle „Teilleistungen“ im Angebotsablauf: ohne seitliches Scrollen (Manuel 04.11.2026) */
.ablauf-matrix{table-layout:fixed;width:100%}
.ablauf-matrix col.c-anlage{width:16%}
.ablauf-matrix col.c-summe{width:6%}
.ablauf-matrix col.c-honorar{width:10%}
.ablauf-matrix th,.ablauf-matrix td{padding:4px 3px}
.ablauf-matrix thead th{min-width:0;font-size:11px}
.ablauf-matrix th.l{white-space:normal;min-width:0;font-size:12px;overflow-wrap:anywhere}
.ablauf-matrix input{width:100%;min-width:0;box-sizing:border-box;text-align:right;padding:3px 4px;min-height:28px}
.ablauf-matrix input.bem{text-align:left;font-size:11px;margin-top:3px;min-width:0}
.ablauf-matrix .zk{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:4px}
.ablauf-matrix .zk .btn{padding:2px 6px}
.ablauf-matrix .wert{display:block;text-align:right;padding:3px 4px}
.ablauf-matrix [data-honorar]{white-space:nowrap}
@media (max-width:700px){
  .ablauf-matrix,.ablauf-matrix tbody,.ablauf-matrix tfoot{display:block;width:100%}
  .ablauf-matrix thead,.ablauf-matrix colgroup{display:none}
  .ablauf-matrix tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:8px;margin-bottom:8px}
  .ablauf-matrix th,.ablauf-matrix td{border:0;padding:0;text-align:left}
  .ablauf-matrix th.l{grid-column:1/-1;font-size:14px}
  .ablauf-matrix td.leer{display:none}
  .ablauf-matrix td[data-lph]::before,.ablauf-matrix td[data-titel]::before{display:block;font-size:11px;color:var(--muted)}
  .ablauf-matrix td[data-lph]::before{content:attr(data-lph)}
  .ablauf-matrix td[data-titel]::before{content:attr(data-titel)}
  .ablauf-matrix td[data-titel]{grid-column:span 1;text-align:left}
  .ablauf-matrix tfoot tr{grid-template-columns:1fr auto}
  .ablauf-matrix tfoot th.l{grid-column:auto}
}
/* Vorschau der Angebotsseiten als Bilder */
.seiten{display:grid;gap:12px;justify-items:center}
.seiten img{width:100%;max-width:820px;height:auto;border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.25);background:#fff}
.anhang-wahl{flex-wrap:wrap;gap:8px 12px}
.matrix.ablauf-matrix input{width:100%;min-width:0}
/* Angebotsablauf nach den Prüfberichten (05.11.2026) */
.ablauf button.a{font:inherit;color:var(--fg);background:none;text-align:left;width:100%;cursor:pointer}
.ablauf button.a:hover,.ablauf button.a:focus-visible{border-color:var(--fg)}
.ablauf ol[hidden],[data-art-zeige][hidden]{display:none}
/* Anlagen: gespeicherte und neue in einer Tabelle, ohne seitliches Scrollen */
.anlagentab{table-layout:fixed;width:100%}
.anlagentab th,.anlagentab td{padding:4px 3px;vertical-align:top}
.anlagentab thead th{font-size:12px;white-space:normal}
.anlagentab thead th:nth-child(1){width:34px}.anlagentab thead th:nth-child(2){width:25%}
.anlagentab thead th:nth-child(3){width:11%}.anlagentab thead th:nth-child(4){width:14%}
.anlagentab thead th:nth-child(5){width:7%}.anlagentab thead th:nth-child(6){width:17%}
.anlagentab thead th:nth-child(7){width:8%}.anlagentab thead th:nth-child(8){width:11%}.anlagentab thead th:nth-child(9){width:52px}
.anlagentab select,.anlagentab input{width:100%;min-width:0;max-width:none;box-sizing:border-box}
.anlagentab input[type=checkbox]{width:auto;min-height:0}
.anlagentab input[name$='-kosten'],.anlagentab input[name$='-betrag'],.anlagentab input[name$='-umbauzuschlag'],.anlagentab input[name$='-satz']{text-align:right}
.anlagentab .satzfrei{display:block;position:relative;margin-top:4px}
.satzfrei input{padding-right:26px}
.satzfrei .einheit{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.satzfrei.verborgen,.zusatzfeld.verborgen{display:none}
.zusatzfeld{display:block;margin-top:4px}
.anlagentab tbody.anl{border-top:1px solid var(--line)}
.anlagentab tbody.anl.weg .anl-zeile{opacity:.55}
.anlagentab .anl-details>td{padding:10px}
.anlagentab .kostentab{table-layout:auto;width:100%}
.anlagentab tbody.neu tr:first-child td{border-top:2px solid var(--line)}
@media (max-width:700px){
  .anlagentab,.anlagentab tbody,.anlagentab tr,.anlagentab td{display:block;width:100%;box-sizing:border-box}
  .anlagentab thead{display:none}
  .anlagentab tr.anl-zeile{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:8px;margin-bottom:6px}
  .anlagentab tr.anl-zeile td:nth-of-type(-n+4){grid-column:1/-1}
  .anlagentab tr.anl-zeile{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}   /* Platz für „Basishonorarsatz“ */
  .anlagentab td[data-titel]::before{content:attr(data-titel);display:block;font-size:11px;color:var(--muted)}
  .anlagentab td.xzelle{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:8px}
  .anlagentab .kostentab thead{display:none}
  .anlagentab .kostentab tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-bottom:1px solid var(--line);padding:6px 0}
  .anlagentab .kostentab tfoot{display:block}
  .anlagentab .kostentab tfoot th,.anlagentab .kostentab tfoot td{display:block;border:0;width:auto}
  .anlagentab .kostentab .kp-plus td{grid-column:1/-1}
  .anlagentab .kostentab .kp-summenzeile{border-bottom:0}
  .anlagentab .kostentab .kp-summenzeile td:empty{display:none}
}
/* Konditionen neben der Summe */
.kond-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.kond-summe .tw{overflow:visible}
.kond-summe .summen{width:100%;min-width:0;table-layout:auto}
.kond-summe .summen td,.kond-summe .summen th{white-space:normal}
.kond-summe .summen td.num{white-space:nowrap}
@media (max-width:800px){.kond-raster{grid-template-columns:minmax(0,1fr)}}
/* Teilleistungen: falsche Werte markieren */
.ablauf-matrix td.fehler input:not(.bem){border-color:var(--bad,#b00020);background:var(--bad-soft,#fdecee)}
.fehlertext{display:block;color:var(--bad,#b00020);font-size:11px}
/* Prüfung und Fertigstellung: Angaben für das Dokument */
/* Angaben fürs Dokument (Prüfschritt): Felder oben bündig, Anhang als ruhige Umschaltfläche statt roter Auswahl
   (Manuel 05.11.2026 – Rot heißt in der App Aktion/Fehler) */
.exportwahl{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;margin-bottom:16px}
.exportwahl .vfeld{margin:0}
.exportwahl input[type=date]{min-height:40px;box-sizing:border-box;width:11.5em}
.exportwahl fieldset{border:0;padding:0;margin:0;min-width:0}
.exportwahl legend{padding:0;margin-bottom:4px}
.exportwahl .segment{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.exportwahl .segment .chk{border:0;border-radius:0;min-height:40px;padding:0 14px;background:none;font-size:14px}
.exportwahl .segment .chk + .chk{border-left:1px solid var(--line)}
.exportwahl .segment .chk:has(input:checked){background:var(--surface-2);font-weight:600}
.exportwahl .segment .chk:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
/* Besondere Leistungen im Ablauf: ohne seitliches Scrollen, am Handy je Zeile ein Block */
.besondertab{width:100%;table-layout:fixed}
.besondertab input,.besondertab select{width:100%;min-width:0;box-sizing:border-box}
.besondertab input[type=checkbox]{width:auto}
.besondertab thead th:nth-child(1){width:22%}.besondertab thead th:nth-child(2){width:19%}.besondertab thead th:nth-child(5){width:22%}.besondertab thead th:nth-child(6){width:11%}
/* Bezug bei „Prozent der Grundleistungen“: alle bzw. einzelne Anlagengruppen untereinander */
.bezug{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.bezug .chk{white-space:normal;padding:3px 8px}
td.verborgen>.bezug{display:none}
@media (max-width:700px){
  .besondertab,.besondertab tbody,.besondertab td{display:block;width:100%;box-sizing:border-box}
  .besondertab thead{display:none}
  .besondertab tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:8px;margin-bottom:6px}
  .besondertab td{border:0;padding:0}
  .besondertab td:first-of-type,.besondertab td[data-titel="Bezug"],.besondertab td[data-titel^="Betrag"],.besondertab td[data-titel="Abrechnung"]{grid-column:1/-1}   /* Stunden je Qualifikation brauchen die Breite */
  .besondertab td.verborgen{display:none}
  .besondertab td[data-titel]::before{content:attr(data-titel);display:block;font-size:11px;color:var(--muted)}
}
.ablauf-matrix tr[hidden]{display:none}
/* Stundensätze im Dokument: nur die Spalten der gewählten Listen (honorar.js, data-satz-aus) */
[data-satz-aus~="satz_neben"] [data-satzspalte="satz_neben"],[data-satz-aus~="satz_zeit"] [data-satzspalte="satz_zeit"]{display:none}
@media (max-width:700px){.ablauf-matrix tr[data-leer] td{grid-column:1/-1}}
/* Siemon-Tabelle im Ablauf: ohne seitliches Scrollen, am Handy je Grundleistung ein Block */
.ftab.gl{width:100%}
.ftab.gl input{width:100%;min-width:0;box-sizing:border-box}
@media (max-width:700px){
  .ftab.gl,.ftab.gl tbody,.ftab.gl tfoot,.ftab.gl td,.ftab.gl th{display:block;width:100%;box-sizing:border-box}
  .ftab.gl thead{display:none}
  .ftab.gl tr{display:grid;grid-template-columns:1.6em repeat(3,minmax(0,1fr));gap:4px 8px;border-bottom:1px solid var(--line);padding:6px 0}
  .ftab.gl td,.ftab.gl th{border:0;padding:0;text-align:left;min-width:0}
  .ftab.gl td:first-of-type{grid-column:1/2;font-weight:700}
  .ftab.gl td.gltext{grid-column:2/-1;white-space:normal;overflow-wrap:anywhere}
  .ftab.gl td:nth-of-type(3){grid-column:2}.ftab.gl td:nth-of-type(4){grid-column:3}.ftab.gl td:nth-of-type(5){grid-column:4}
  .ftab.gl td[data-titel]::before{content:attr(data-titel);display:block;font-size:11px;color:var(--muted)}
  .ftab.gl tfoot tr{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 16px}
  .ftab.gl tfoot td,.ftab.gl tfoot th{grid-column:auto !important}
  .ftab.gl tfoot th{grid-column:auto}
}
/* Anlagen: Details klar aufklappbar, Entfernen als „ד (Manuel 05.11.2026) */
.anlagentab .aufklapp{display:flex;width:fit-content;align-items:flex-start;gap:6px;max-width:100%;text-align:left;white-space:normal;box-sizing:border-box;margin-top:6px;padding:4px 8px;min-height:32px;font:inherit;font-size:13px;font-weight:600;color:var(--fg);background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.anlagentab .aufklapp:hover,.anlagentab .aufklapp:focus-visible{border-color:var(--fg)}
.anlagentab .aufklapp .pfeil{display:inline-block;transition:transform .15s}
.anlagentab .aufklapp[aria-expanded=true]{border-color:var(--accent)}
.anlagentab .aufklapp[aria-expanded=true] .pfeil{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.anlagentab .aufklapp .pfeil{transition:none}}
.anlagentab td.xzelle{text-align:center;vertical-align:top}
.xknopf{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;font-size:20px;line-height:1;color:var(--muted)}
.xknopf input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.xknopf:hover,.xknopf:focus-within{border-color:var(--bad);color:var(--bad)}
.xknopf:has(input:checked){background:var(--bad);border-color:var(--bad);color:#fff}
.anlagentab tbody.anl:has(input[name=weg]:checked) .anl-zeile td:not(.aktionen){opacity:.45;text-decoration:line-through}
.anlagentab tbody.anl:has(input[name=weg]:checked) .anl-zeile td.xzelle::after{content:"wird entfernt";display:block;font-size:10px;line-height:1.15;white-space:normal;color:var(--bad);margin-top:2px}
@media (max-width:700px){.anlagentab td.xzelle:empty{display:none}}
.anlagentab .anl-zeile td.num{padding-top:14px}
.anlagentab td.xzelle{padding-top:6px}
/* ---- Angebotsablauf: UX-Prüfung 05.11.2026 (HIG + WCAG) ---------------------------------------------------- */
/* Gliederung: Projekt als Kontextzeile, Schritt als Hauptüberschrift */
.ablauf-kontext{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--muted)}
h1.schritt-titel{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin:4px 0 0}
/* Kleine Knöpfe: erkennbar als Knopf (Rand) und groß genug (Desktop ≥ 26 px, Handy ≥ 32 px) */
.ablauf-matrix .btn.xs,.anlagentab .btn.xs,.btn.umrandet{border:1px solid color-mix(in srgb,var(--muted) 55%,transparent);color:var(--fg);background:var(--surface)}
.ablauf-matrix .btn.xs,.anlagentab .btn.xs{min-height:26px;padding:3px 8px;font-size:12px}
.ablauf-matrix .btn.xs:hover,.anlagentab .btn.xs:hover,.btn.umrandet:hover{border-color:var(--accent);color:var(--accent)}
.nur-handy{display:none}
@media (max-width:700px){
  .ablauf-matrix .btn.xs,.anlagentab .btn.xs,.ablauf .btn.xs{min-height:34px;padding:5px 10px;font-size:13px}
  .xknopf{width:40px;height:40px}
  .anlagentab .aufklapp{min-height:40px}
  .ablauf-matrix .nur-handy{display:flex;justify-content:center;width:100%;box-sizing:border-box;margin-top:4px;min-height:34px}
}
/* Fehler zusätzlich mit Zeichen, nicht nur rot */
.meldungen .pill.bad::before,.errorlist li::before,.fehlertext::before{content:"⚠\FE0E";margin-right:4px}
/* Handy: Schrittleiste als eine Zeile mit Fortschritt */
.ablauf-kurz{display:none}
@media (max-width:700px){
  .ablauf-kurz{display:grid;grid-template-columns:1fr auto;grid-template-areas:"text pfeil" "balken balken";gap:6px 10px;width:100%;
    min-height:48px;padding:6px 4px;font:inherit;color:var(--fg);background:none;border:0;text-align:left;cursor:pointer}
  .ablauf-kurz-text{grid-area:text;display:grid;gap:1px}
  .ablauf-kurz-text small{font-size:12px;color:var(--muted)}
  .ablauf-kurz-text b{font-size:15px}
  .ablauf-kurz .pfeil{grid-area:pfeil;align-self:center;font-size:16px;transition:transform .15s}
  .ablauf.auf .ablauf-kurz .pfeil{transform:rotate(180deg)}
  .ablauf-fortschritt{grid-area:balken;height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}
  .ablauf-fortschritt i{display:block;height:100%;background:var(--good)}
  .ablauf:not(.auf) .ablauf-schritte{display:none}
  .ablauf.auf .ablauf-schritte{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.ablauf-kurz .pfeil{transition:none}}
/* Bemerkungen je LPH: leere ausgeblendet, bis man sie einschaltet */
.ohne-bem input.bem:placeholder-shown{display:none}
.matrix-werkzeuge{margin:0 0 8px}
/* Neues Angebot: Link „Neues Projekt zentral anlegen“ unter dem Projekt (Manuel 07.11.2026) */
.projekt-neu{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:-4px 0 12px}
@media (pointer:coarse){.projekt-neu a{display:inline-flex;align-items:center;min-height:44px}.projekt-neu .btn{min-height:44px}}
/* Schritt 2: Sortieren und Gliederung im Dokument (Plan Gliederung, Manuel 07.11.2026) */
.anl-ordnen{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:flex-end;margin:0 0 12px}
.anl-ordnen-feld{display:flex;flex-direction:column;gap:4px;min-width:0}
.anl-ordnen-feld label{font-size:13px;font-weight:600;color:var(--muted)}
.anl-ordnen-paar{display:flex;gap:8px;align-items:center;min-width:0}
.anl-ordnen select{min-width:0;max-width:100%}
@media (max-width:640px){.anl-ordnen{flex-direction:column;align-items:stretch}
  .anl-ordnen-paar select{flex:1 1 auto;width:0}}
@media (pointer:coarse){.anl-ordnen .btn.sm,.anl-ordnen select{min-height:44px}}
/* Hinweise zum Aufklappen statt langer Absätze */
details.hinweise{margin-top:8px}
details.hinweise>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);min-height:32px;display:flex;align-items:center}
details.hinweise>summary:hover{color:var(--fg)}
/* Kosten: beim Bearbeiten den ganzen Betrag zeigen („240.000 + 15.000“) */
.anlagentab input[name$='-kosten']:focus,.anlagentab input[name$='-betrag']:focus{position:relative;z-index:2;min-width:13em}
/* Stundensätze eingeklappt mit Zusammenfassung */
details.klappkarte>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;cursor:pointer;list-style:none;min-height:32px}
details.klappkarte>summary::-webkit-details-marker{display:none}
details.klappkarte>summary::before{content:"▸";color:var(--muted);transition:transform .15s}
details.klappkarte[open]>summary::before{transform:rotate(90deg)}
details.klappkarte .klapp-hinweis{margin-left:auto;font-size:13px;font-weight:600;color:var(--accent)}
details.klappkarte[open] .klapp-hinweis{display:none}
details.klappkarte[open]>summary{margin-bottom:12px}
details.klappkarte .card{border:0;padding:0;margin:12px 0 0;box-shadow:none;background:none}
@media (prefers-reduced-motion:reduce){details.klappkarte>summary::before{transition:none}}
/* Textbausteine: Lesetext oder Feld */
.textbausteine{display:grid;gap:10px}
.textbaustein{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.textbaustein.offen{border-color:color-mix(in srgb,var(--muted) 55%,transparent)}
.tb-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tb-kopf .vlabel{margin:0}
.tb-knoepfe{margin-left:auto;display:flex;gap:6px}
.tb-lesen{margin-top:6px;font-size:14px;line-height:1.45;color:var(--fg)}
.tb-feld{margin-top:6px}
.tb-feld textarea{width:100%;box-sizing:border-box;min-height:3.5em;resize:vertical;overflow:hidden;font:inherit;line-height:1.45}
/* Vorschau: Ladehinweis je Seite */
.seiten figure.seite{position:relative;margin:0;width:100%;max-width:820px;aspect-ratio:210/297;background:var(--surface-2);border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.seiten figure.seite .laedt{position:absolute;inset:0;display:grid;place-items:start center;padding-top:18%;color:var(--muted);font-size:14px}
.seiten figure.seite img{position:absolute;inset:0;width:100%;height:100%;border:0;box-shadow:none;background:none;object-fit:contain}
/* Querformat-Seite (Plan Querformat): Rahmen nach dem Laden im Seitenverhältnis A4 quer */
.seiten figure.seite.quer{aspect-ratio:297/210}
#vorschau[aria-busy=true] .seiten{opacity:.5}
/* Fertigstellung läuft beim Durchsehen unten mit */
.fertig-leiste .fertig-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.fertig-leiste .fertig-zeile .vfeld{flex:1 1 18rem;margin:0}
.fertig-leiste .note{margin:6px 0 0}
@media (min-width:701px){
  .fertig-leiste{position:sticky;bottom:0;z-index:5;box-shadow:0 -4px 16px rgba(0,0,0,.12)}
}
/* Eigene Rückfrage (statt OK/Abbrechen des Browsers) */
dialog.bestaetigung{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;max-width:440px;background:var(--surface);color:var(--fg);box-shadow:0 12px 40px rgba(0,0,0,.3)}
dialog.bestaetigung::backdrop{background:rgba(0,0,0,.35)}
dialog.bestaetigung p{margin:0 0 14px;line-height:1.45}
dialog.bestaetigung .row{justify-content:flex-end;gap:8px}
dialog.bestaetigung .btn.primary.gefahr{background:var(--bad);border-color:var(--bad)}
/* Ingenieurvertrag, Grunddaten: Termine und Beteiligte (Manuel 08.11.2026) */
.va-titel{font-size:14px;margin:18px 0 6px}
.va-tabelle{width:100%;border-collapse:collapse}
.va-tabelle th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:0 6px 4px}
.va-tabelle td{padding:3px 6px;vertical-align:top}
.va-tabelle td:first-child{width:60%}
.va-tabelle input{width:100%;box-sizing:border-box}
.va-tabelle td.fehler input{border-color:var(--bad)}
@media (max-width:700px){
  .va-tabelle thead{display:none}
  .va-tabelle tr{display:grid;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}
  .va-tabelle td,.va-tabelle td:first-child{padding:0;width:auto}
  .va-tabelle td::before{content:attr(data-titel);display:block;font-size:11px;color:var(--muted);margin-bottom:2px}}
/* „Wie wird beauftragt?“ (Plan Ingenieurvertrag, Manuel 08.11.2026): Auswahl der Grundlage beim Anlegen des Auftrags */
dialog.zusage-wahl{max-width:520px;width:calc(100% - 32px)}
dialog.zusage-wahl h2{margin:0 0 6px;font-size:17px}
dialog.zusage-wahl fieldset{border:0;padding:0;margin:0 0 14px;min-width:0}
.zw-option{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;cursor:pointer}
.zw-option.abgeraten{padding-right:66px}
/* „nicht empfohlen“ als Band diagonal in der Ecke (Manuel 08.11.2026); Text für Screenreader im Titel */
.zw-band{position:absolute;top:28px;right:-48px;width:170px;transform:rotate(45deg);background:var(--warn-soft);color:var(--warn);border-block:1px solid var(--warn);font-size:9px;font-weight:700;line-height:16px;letter-spacing:.02em;text-transform:uppercase;text-align:center;white-space:nowrap;pointer-events:none}
.zw-option input{grid-row:span 2;margin:3px 0 0;accent-color:var(--fg)}
.zw-option:has(input:checked){border-color:var(--fg);background:var(--surface-2)}
.zw-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.zw-titel{font-weight:600}
.zw-hinweis{font-size:13px;color:var(--muted);line-height:1.4}
/* ⓘ-Hinweise statt langer Erläuterungen (Manuel 05.11.2026); Text erscheint auf Klick/Antippen */
.info-knopf{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:4px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--muted) 60%,transparent);
  background:var(--surface);color:var(--muted);font:italic 700 13px/1 Georgia,"Times New Roman",serif;text-transform:none;letter-spacing:0;vertical-align:middle;cursor:pointer;position:relative}
.info-knopf::after{content:"";position:absolute;inset:-11px}                  /* Trefferfläche 44 px */
.info-knopf:hover,.info-knopf:focus-visible{border-color:var(--accent);color:var(--accent)}
.info-text{position:fixed;inset:auto;margin:0;max-width:min(380px,calc(100vw - 32px));padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.18);font-weight:400;font-size:13px;line-height:1.5;font-style:normal;text-transform:none;letter-spacing:0;text-align:left}
.info-text:not(:popover-open){display:none}
/* Handy: die Schrittleiste nennt den Schritt schon – Überschrift nur für Bildschirmleser */
@media (max-width:700px){h1.schritt-titel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Reihenfolge der Anlagengruppen: Griff zum Ziehen (Maus, Finger) und Pfeiltasten (Manuel 05.11.2026) */
.anlagentab td.griff-sp{padding-left:0;padding-right:0;text-align:center}
.griff{display:inline-grid;place-items:center;width:28px;height:36px;padding:0;border:1px solid transparent;border-radius:var(--r);background:none;
  color:var(--muted);font-size:18px;line-height:1;cursor:grab;touch-action:none;user-select:none}
.griff:hover,.griff:focus-visible{border-color:color-mix(in srgb,var(--muted) 55%,transparent);color:var(--fg)}
.anlagentab tbody.anl.zieht{opacity:.85;outline:2px solid var(--accent);outline-offset:-2px;background:var(--surface-2)}
.anlagentab tbody.anl.zieht .griff{cursor:grabbing}
.anlagentab .kp-summe{display:block;margin-top:3px;color:var(--muted);white-space:nowrap}
@media (max-width:700px){
  .anlagentab td.griff-sp{display:flex;justify-content:flex-end;margin-bottom:-4px}
  .griff{width:44px;height:36px}
}
@media (max-width:700px){
  .anlagentab tr.anl-zeile{position:relative}
  .anlagentab td.griff-sp{position:absolute;top:2px;right:2px;margin:0;padding:0;background:none;width:auto}
}

/* Projekt suchen wie in „Mein Tag“ (Manuel 05.11.2026) */
.projektsuche{position:relative;display:block}
.projektsuche-feld{width:100%;box-sizing:border-box}
select.projektsuche-original{display:none}
.projektsuche-liste{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 2px);max-height:320px;overflow:auto;margin:0;padding:4px 0;list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.projektsuche-liste li{padding:8px 12px;cursor:pointer;min-height:24px;line-height:1.35}
.projektsuche-liste li b{font-variant-numeric:tabular-nums;margin-right:4px}
.projektsuche-liste li.aktiv,.projektsuche-liste li[role=option]:hover{background:var(--surface-2)}
.projektsuche-liste li[aria-selected=true] b{color:var(--accent)}
.projektsuche-liste li.grp{cursor:default;padding:6px 12px 2px;font-size:12px;font-weight:700;color:var(--muted);min-height:0}
.projektsuche-liste li.leer{cursor:default;color:var(--muted)}
input.kurzfeld{max-width:14em}

/* Angebotsablauf: Design-Review 05.11.2026 – eine Karte „Angebot“, klare Hierarchie, 8er-Abstände, gleiche Feldhöhen */
.card.grunddaten{gap:16px}
.gd-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;align-items:start}
.gd-spalte{display:grid;gap:16px;align-content:start;min-width:0}
.gd-wert{font-size:15px;color:var(--fg);margin:0}
.gd-auftraggeber .kundenbox p,.gd-auftraggeber p{margin:0 0 4px;font-size:14px;color:var(--fg)}
.gd-auftraggeber p.note,.gd-auftraggeber .kundenbox p.note{color:var(--muted);font-size:13px}
@media (max-width:700px){.gd-raster{grid-template-columns:minmax(0,1fr)}}
main:has(h1.schritt-titel) h1.schritt-titel{font-size:20px;text-transform:none;letter-spacing:0;margin:8px 0 0}
main:has(h1.schritt-titel) .card h2{font-size:14px}
main:has(h1.schritt-titel) .card{padding:16px;gap:16px}
main:has(h1.schritt-titel) .vgrid{gap:16px}
main:has(h1.schritt-titel) .vfeld select{min-height:40px;box-sizing:border-box}
.schritt-nav{justify-content:flex-end}

/* Aufgeklappte Anlage (Design-Review 05.11.2026): eine eingerückte Fläche direkt unter der Zeile, mit Spitze zum
   Knopf „Weitere Angaben“; die Spalten der Kostenpositionen stehen genau unter den Spalten der Zeile (Betrag unter
   „Anrechenbare Kosten“), die Summe mit Summenstrich darunter. Neutral statt Rot: Rot heißt in der App Aktion/Fehler. */
.anlagentab tbody.anl:has(> tr.anl-details:not([hidden])) > tr.anl-zeile > td{border-bottom-color:transparent}
.anlagentab tr.anl-details > td{border-bottom:0;padding:0 0 14px}
.anlagentab tr.anl-details > td.griff-sp{padding:0}
.anl-panel{position:relative;contain:inline-size;margin-top:2px;background:var(--surface-2);border-radius:var(--r);padding:10px 0 8px}
.anl-panel::before{content:"";position:absolute;top:-7px;left:22px;border:7px solid transparent;border-top:0;border-bottom-color:var(--surface-2)}
.anlagentab tbody.anl:has(> tr.anl-details:not([hidden])) .aufklapp{background:var(--surface-2);border-color:transparent}
.anl-wortlaut{width:var(--k-wort,100%);max-width:100%;padding:0 6px;box-sizing:border-box}
.anl-wortlaut .vfeld{margin:0}
.anl-panel .vlabel,.anl-panel .kostentab th{font-size:12px;font-weight:600;color:var(--muted)}
.anl-panel h3{margin:14px 6px 2px;font-size:13px;font-weight:700;color:var(--fg);text-transform:none;letter-spacing:0}
.anl-panel .kostentab{table-layout:fixed;width:100%;background:none}
.anl-panel .kostentab col.k-bez{width:var(--k-bez,auto)}
.anl-panel .kostentab col.k-betrag{width:var(--k-betrag,auto)}
.anl-panel .kostentab col.k-quelle{width:var(--k-quelle,auto)}
.anl-panel .kostentab col.k-stand{width:var(--k-stand,auto)}
.anl-panel .kostentab col.k-x{width:var(--k-x,auto)}
.anl-panel .kostentab th,.anl-panel .kostentab td{background:none;border-bottom:0;border-top:0}
.anl-panel .kostentab thead th{padding-bottom:2px}
.anl-panel .kostentab tr.neu td{background:none}
.anl-panel .kp-plus td{padding-top:2px;padding-bottom:2px}
.anl-panel .kp-plus .btn{padding-left:0;color:var(--fg);font-weight:600}
.anl-panel .kp-plus .btn:hover{color:var(--accent)}
.anl-panel .kp-summenzeile th{text-align:right;font-size:13px;color:var(--muted);font-weight:600;padding-top:6px}
.anl-panel .kp-summenzeile td.num{padding-top:6px}
.anl-panel .kp-summenzeile td.num b{display:block;padding-top:4px;border-top:2px solid var(--fg);font-size:14px}
.anl-panel .xknopf{width:32px;height:32px;background:var(--surface);font:inherit;font-size:18px;padding:0}
.anl-panel .kostentab tr:has(input[name$="-DELETE"]:checked) td:not(.xzelle){opacity:.45}
.anlagentab tbody.anl + tbody.anl > tr:first-child > td{border-top:2px solid var(--line)}
input.kosten-proxy{width:100%;text-align:right}
input.kosten-proxy.ist-summe{background:var(--surface-2);border-style:dashed;cursor:pointer;font-weight:700}
@media (max-width:700px){.anlagentab tr.anl-details > td.griff-sp{display:none}
  .anlagentab tr.anl-details > td{padding:0 0 8px}
  .anl-panel{padding:10px 8px 8px}
  .anl-wortlaut{width:100%;padding:0}
  .anl-panel h3{margin:14px 0 2px}
  .anl-panel .kostentab{table-layout:auto}
  .anl-panel .kostentab tr{border-bottom:1px solid var(--line)}
  .anl-panel .kostentab tfoot tr{border-bottom:0}
  .anl-panel .kp-summenzeile{display:flex;justify-content:space-between;align-items:baseline}
  .anl-panel .kp-summenzeile th{text-align:left}}
/* Angebotsliste (Manuel 06.11.2026): Mehrfach-Filter als Blatt in der Kopfzeile, aktive Filter als Chips */
.afilter{position:relative;display:flex;flex-wrap:nowrap;gap:8px;align-items:center}
.afilter input[type=search]{width:15rem}
.afilter-blatt>summary{list-style:none;user-select:none}
.afilter-blatt>summary::-webkit-details-marker{display:none}
.afilter-blatt[open]>summary{border-color:var(--accent);color:var(--accent-text)}
.zaehler{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent-fill);color:var(--accent-ink);font-size:12px;font-weight:700;line-height:1}
.afilter-inhalt{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(560px,calc(100vw - 32px));display:grid;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.afilter-inhalt fieldset{border:0;margin:0;padding:0;min-width:0}
.afilter-inhalt legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--muted)}
.afilter-inhalt .chk{min-height:32px}
.afilter-paar{display:flex;flex-wrap:wrap;gap:10px}
.afilter-paar .field{flex:1 1 150px}
.afilter-paar input{width:100%}
.afilter-paar .field:only-child{flex:0 1 calc(50% - 5px)}
.afilter-knoepfe{display:flex;justify-content:flex-end;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.afilter-aktiv{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.fchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:2px 4px 2px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.fchip .muted{font-weight:500}
.fchip .x{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--muted);font-size:16px;line-height:1}
.fchip:hover,.fchip:focus-visible{border-color:var(--fg)}
.fchip:hover .x,.fchip:focus-visible .x{background:var(--accent-soft);color:var(--accent-text)}
.afilter-standard{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.afilter-standard form{margin:0}
.afilter-anzahl{margin-left:auto}
@media (max-width:700px){
  .vleiste .rechts:has(.afilter){width:100%}
  .afilter{width:100%;flex-wrap:wrap}
  .afilter input[type=search]{flex:1 1 100%;width:auto;min-width:0}
  .afilter-blatt[open]{flex-basis:100%}
  .afilter-inhalt{position:static;width:auto;margin-top:8px;box-shadow:none;background:var(--surface-2);border-color:transparent}
  .afilter-inhalt .chk{background:var(--surface)}
  .afilter-anzahl{margin-left:0;flex-basis:100%}
}
@media (pointer:coarse){.afilter-inhalt .chk,.fchip{min-height:40px}.afilter-blatt>summary{min-height:44px}}

/* Zeile aufklappen – Angebote, Aufträge, Rechnungen (Manuel 06.11.2026) – in der Formensprache von „Mein Tag“ (tag.css): Pfeil am Zeilenende dreht sich,
   die offene Zeile und ihr Inhalt liegen auf surface-2 wie der Editor eines Abschnitts; die Leiste zeigt die Verteilung
   des Honorars wie die Blöcke der Zeitleiste, die Liste darunter trägt dieselbe Farbmarke (6 px) wie die Abschnitte. */
.klappliste th.auf,.klappliste td.auf{width:44px;padding:2px 4px;text-align:right;vertical-align:top}
.hl-auf{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:var(--r);background:none;color:var(--muted);cursor:pointer}
.hl-auf:hover{background:var(--surface-2);color:var(--fg)}
.hl-auf .pfeil{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.hl-auf[aria-expanded=true]{color:var(--fg)}
.hl-auf[aria-expanded=true] .pfeil{transform:rotate(90deg)}
.klappliste tbody.klapp:has(> tr.hl-zeile:not([hidden])) > tr.click > td{background:var(--surface-2);border-bottom-color:transparent}
.klappliste tr.hl-zeile > td{background:var(--surface-2);padding:0 16px 16px 16px;white-space:normal}
.klappliste tbody.klapp:last-child > tr.hl-zeile > td{border-bottom:0}
.hl-in{display:grid;gap:14px;max-width:960px}
.hl-in .note{margin:0}
/* Leiste: Segmente proportional zum Honorar; Farben aus der Palette --o*, Schrift je Farbe mit Kontrast ≥ 4,5:1 */
.hl-leiste{display:flex;gap:2px;height:32px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.hl-seg{flex:0 1 0;min-width:4px;display:flex;align-items:center;padding:0 7px;overflow:hidden;border-radius:2px;background:var(--seg);color:var(--ink)}
.hl-seg>span{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Anlagengruppen nach D-034 (eine Farbe je AG in allen IBV-Apps): Leiste und Streifen in der Markierung `--agN-mark`,
   Schrift #111 darauf (gerechnet mindestens 5,1 : 1, hell und dunkel). Die Bedeutung trägt die Beschriftung „AG n“. */
.hl-in .ag1{--seg:var(--ag1-mark);--ink:#111}.hl-in .ag2{--seg:var(--ag2-mark);--ink:#111}.hl-in .ag3{--seg:var(--ag3-mark);--ink:#111}.hl-in .ag4{--seg:var(--ag4-mark);--ink:#111}
.hl-in .ag5{--seg:var(--ag5-mark);--ink:#111}.hl-in .ag6{--seg:var(--ag6-mark);--ink:#111}.hl-in .ag7{--seg:var(--ag7-mark);--ink:#111}.hl-in .ag8{--seg:var(--ag8-mark);--ink:#111}
/* Positionen (Pauschale) bzw. Qualifikationen (Zeitnachweis) haben keine feste Bedeutung: Folge der Palette */
.hl-in .f1{--seg:color-mix(in srgb,var(--o4) 90%,#000);--ink:#fff}
.hl-in .f2{--seg:var(--o3);--ink:#111}
.hl-in .f3{--seg:var(--o6);--ink:#111}
.hl-in .f4{--seg:var(--o5);--ink:#fff}
.hl-in .f5{--seg:var(--o8);--ink:#111}
.hl-in .f6{--seg:var(--o7);--ink:#fff}
/* Besondere Leistungen: grau schraffiert wie „intern“ in „Mein Tag“ – sichtbar keine Anlagengruppe */
.hl-in .fb{--seg:repeating-linear-gradient(135deg,color-mix(in srgb,var(--o2) 70%,transparent) 0 3px,transparent 3px 7px);--ink:var(--fg)}
.hl-in .hl-seg.fb,.hl-in .hl-farbe.fb{box-shadow:inset 0 0 0 1px var(--o2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hl-in :is(.f1,.f4,.f6){--ink:#111}}
:root[data-theme="dark"] .hl-in :is(.f1,.f4,.f6){--ink:#111}
/* Liste: Farbmarke · Kürzel · Name mit Angaben · Kosten · Honorar (rechtsbündig, Ziffern gleich breit) */
.hl-gruppe{display:grid;gap:4px}
.hl-liste{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.hl-p{display:grid;grid-template-columns:6px 3.25rem minmax(0,1fr) 10rem 9.5rem;gap:10px;align-items:start;padding:8px 4px;border-bottom:1px solid var(--line);font-size:14px}
.hl-in.nur-text .hl-p{grid-template-columns:6px 3.25rem minmax(0,1fr)}
.hl-farbe{align-self:stretch;width:6px;border-radius:2px;background:var(--seg,transparent)}
.hl-kurz{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hl-name{min-width:0;overflow-wrap:break-word;hyphens:auto}
.hl-angaben{display:block;font-size:13px;color:var(--muted)}
.hl-kosten{grid-column:4;text-align:right;white-space:nowrap;color:var(--muted)}
.hl-k{font-size:12px}
.hl-betrag{grid-column:5;text-align:right;white-space:nowrap;font-weight:600}
.hl-betrag small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.hl-leer{padding:8px 4px;font-size:13px;color:var(--muted);margin:0}
.hl-fuss{margin:0;font-size:13px;color:var(--muted);text-align:right}
.hl-fuss b{color:var(--fg)}
/* Aufgeklappte Rechnung: Summenzeile und Rechnungsweg als Begriffsliste */
.hl-p.hl-summe .hl-name,.hl-p.hl-summe .hl-betrag{font-weight:700}
.hl-p.hl-summe{border-top:1px solid var(--fg);margin-top:-1px}
.hl-p.hl-summe .hl-angaben{font-weight:400}
.hl-name .pill{margin-left:4px;vertical-align:1px}
/* Gleiche Anlagengruppe mehrfach (Plan AG-Gruppen): Kopf mit Farbe und Summe, darunter die Teile eingerückt */
.hl-teile{grid-column:1/-1;list-style:none;margin:-6px 0 0;padding:0;display:grid}
.hl-p.hl-teil{padding:3px 0;border-bottom:0;font-size:13px}
.hl-p.hl-teil .hl-name{padding-left:14px}
.hl-p.hl-teil .hl-angaben{font-size:12px}
.hl-p.hl-teil .hl-betrag{font-weight:500}
/* Abrechnungsstand zum Auftrag (Manuel 07.11.2026): Kürzel · Balken · Prozent · „abgerechnet von beauftragt“;
   gesamt in neutralem Grau, je Anlagengruppe in ihrer Farbe nach D-034 (`--seg`). Die Zahl trägt die Aussage. */
.ab-bezug{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
.ab-liste{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.ab-z{display:grid;grid-template-columns:3.25rem minmax(4rem,1fr) 3.5rem minmax(0,17rem);gap:10px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--line);font-size:14px}
.ab-kurz{font-weight:700;white-space:nowrap}
.ab-balken{height:8px;border-radius:4px;background:color-mix(in srgb,var(--fg) 14%,transparent);overflow:hidden}
.ab-balken i{display:block;height:100%;border-radius:4px;background:var(--seg,color-mix(in srgb,var(--fg) 55%,transparent))}
.ab-proz{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ab-betrag{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ab-von{color:var(--muted)}
.ab-z.ab-gesamt{padding:8px 4px}
.ab-z.ab-gesamt .ab-balken{height:12px;border-radius:6px}
.ab-z.ab-gesamt .ab-balken i{border-radius:6px;background:color-mix(in srgb,var(--fg) 70%,transparent)}
@media (max-width:700px){
  .ab-z{grid-template-columns:3.5rem minmax(0,1fr) auto;grid-template-areas:"k b p" ". e e";row-gap:2px}
  .ab-kurz{grid-area:k}.ab-balken{grid-area:b}.ab-proz{grid-area:p}
  .ab-betrag{grid-area:e;text-align:left;white-space:normal;font-size:13px}
}
/* „Zu tun“ auf der Startseite (Manuel 07.11.2026, reduziert): drei Spalten, je Fall Name und Anzahl als Link */
.zt-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.zt-spalte{min-width:0}
.zt-spalte h3{margin:0 0 4px;font-size:14px}
.zt-spalte h3 a{color:var(--fg);text-decoration:none}
.zt-spalte h3 a:hover{text-decoration:underline}
.zt-faelle{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.zt-faelle li{border-bottom:1px solid var(--line)}
.zt-fall{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 6px;color:var(--fg);text-decoration:none;font-size:14px}
.zt-fall:hover,.zt-fall:focus-visible{background:var(--surface-2)}
.zt-text{flex:1;min-width:0}
.zt-zahl{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.zt-fall::after{content:"›";flex:none;color:var(--muted)}
.zt-fall.dringend .zt-text,.zt-fall.dringend .zt-zahl{color:var(--bad);font-weight:700}
.zt-leer{padding:10px 6px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.zt-spalten{grid-template-columns:1fr;gap:12px}}
@media (pointer:coarse){.zt-fall{min-height:44px}}
/* Schnellfilter „Zu tun“ oben auf den Listen */
.zt-filter{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0 0 10px}
.zt-filter-titel{font-size:13px;font-weight:600;color:var(--muted);margin-right:2px}
.zt-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-size:13px;text-decoration:none}
.zt-chip:hover{background:var(--surface-2)}
.zt-chip.aktiv{background:var(--surface-2);border-color:var(--fg);font-weight:600}
.zt-chip.dringend{border-color:var(--bad)}
@media (pointer:coarse){.zt-chip{min-height:44px}}
/* Kassenbuch auf der Startseite (Plan Kassenbuch, Manuel 07.11.2026) */
.kb-steuerung{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.kb-steuerung .ansicht-wahl{margin-left:0}
.kb-steuerung{row-gap:8px}
.kb-zeit{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.kb-steuerung .kb-zuordnung a{font-size:13px;min-height:32px;padding:0 10px}
.kb-steuerung .kb-zuordnung a[aria-current]{background:var(--surface);color:var(--fg);box-shadow:inset 0 -3px 0 var(--fg)}   /* zweitrangig: Auswahl unterstrichen statt gefüllt */
@media (pointer:coarse){.kb-steuerung .kb-zuordnung a{min-height:44px}}
.kb-monat{display:inline-flex;gap:6px;align-items:center}
.kb-monat .btn{min-width:36px;justify-content:center;font-size:18px;line-height:1}
.kb-monat input[type=month]{min-height:36px;padding:0 8px}
.kb-summen{margin:4px 0 10px;font-size:14px;color:var(--muted)}
.kb-summen b{color:var(--fg)}
.kb-tabelle tfoot th,.kb-tabelle tfoot td{border-top:1.5px solid var(--fg);font-weight:600;padding-top:8px}
.kb-tabelle .kb-bem{max-width:16rem;overflow-wrap:anywhere;font-size:13px;color:var(--muted)}
.kb-storniert td{color:var(--muted)}
.kb-storniert td.num{text-decoration:line-through}
.kb-formulare{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px 32px;align-items:stretch}
.kb-titel{margin:0 0 6px;font-size:14px;font-weight:600}
.kb-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;align-items:start}
.kb-felder > :last-child{grid-column:1/-1}            /* Bemerkung zur Zahlung über die ganze Breite */
.kb-felder .vfeld{margin:0}
.kb-gruppe{display:flex;flex-direction:column}
.kb-form{display:flex;flex-direction:column;gap:12px;flex:1;padding-top:10px}
.kb-form .knopfleiste{margin-top:auto}            /* Knöpfe beider Formulare auf einer Linie */
.kb-textfeld{flex:1;display:flex;margin:0}.kb-textfeld textarea{flex:1;min-height:6rem}
.kb-hinweis{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);margin-left:6px}
@media (max-width:1000px){.kb-formulare{grid-template-columns:1fr}}
@media (max-width:560px){.kb-felder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kb-felder > :first-child,.kb-felder > :last-child{grid-column:1/-1}
  .kb-form .knopfleiste .btn{flex:1;justify-content:center}}
.kb-felder input{width:100%;min-width:0;box-sizing:border-box}
.kb-form textarea{width:100%;box-sizing:border-box;font:inherit}
/* Spalten: Projekt und Rechnung bekommen Platz, Zahlenköpfe brechen um statt die Spalte breit zu machen */
.kb-tabelle thead th{white-space:normal;vertical-align:bottom}
.kb-tabelle thead th.r{max-width:8rem}
.kb-tabelle th:nth-child(2){width:17%}
.kb-tabelle th:nth-child(4){width:15%}
@media (max-width:700px){.kb-tabelle tfoot{display:none}.kb-steuerung{width:100%}
  .kb-tabelle td.haupt{order:-1}                  /* Karte: Projekt zuerst */
  .kb-tabelle td.kb-bem:empty{display:none}
  .kb-tabelle th:nth-child(2),.kb-tabelle th:nth-child(4){width:auto}}
@media (min-width:701px){.kb-summen{display:none}}
/* Summenzeilen (Monat und Jahr) einheitlich: ohne grauen Kopf-Hintergrund, durchgehende Linie (Manuel 07.11.2026) */
.kb-tabelle tfoot th,.kb-jahr-tabelle tfoot th{background:none;color:var(--fg);font-size:14px;font-weight:600;border-bottom:0}
.kb-jahr-tabelle tfoot th,.kb-jahr-tabelle tfoot td{border-top:1.5px solid var(--fg);border-bottom:0;padding-top:8px}
@media (pointer:coarse){.kb-monat .btn,.kb-monat input[type=month],main .kb-monat .btn.sm{min-height:44px}main .kb-monat .btn.sm{min-width:44px}}
.hl-daten{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin:0;padding:8px 4px;border-top:1px solid var(--line);font-size:14px}
.hl-daten dt{color:var(--muted)}
.hl-daten dd{margin:0;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.hl-auf .pfeil{transition:none}}
@media (pointer:coarse){.hl-auf{width:44px;height:44px}}
@media (max-width:700px){
  .klappliste tbody.klapp > tr.click{position:relative}
  .klappliste tbody.klapp > tr.click > td.haupt{padding-right:44px}
  .klappliste td.auf{position:absolute;top:2px;right:2px;width:auto;padding:0}
  .klappliste tbody.klapp:has(> tr.hl-zeile:not([hidden])) > tr.click{margin-bottom:0;border-bottom:0;border-radius:var(--r) var(--r) 0 0;background:var(--surface-2)}
  .klappliste tr.hl-zeile{display:block;margin-bottom:8px;padding:0 12px 12px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);background:var(--surface-2)}
  .klappliste tr.hl-zeile[hidden]{display:none}
  .klappliste tr.hl-zeile > td{padding:0;border:0}
  .klappliste tr.hl-zeile > td::before{display:none}
  .hl-p,.hl-in.nur-text .hl-p{grid-template-columns:6px 2.75rem minmax(0,1fr) auto;grid-template-areas:"f k n n" "f ko ko be";row-gap:2px}
  .hl-farbe{grid-area:f}.hl-kurz{grid-area:k}.hl-name{grid-area:n}
  .hl-kosten{grid-area:ko;text-align:left;font-size:13px}
  .hl-betrag{grid-area:be}
  .hl-fuss{text-align:left}
}
/* Honorar-Listen Angebote, Aufträge, Rechnungen nach den Vorgaben der Startseite (Plan Listen 07.11.2026) */
.nur-handy-inline{display:none}
@media (max-width:700px){.nur-pc-inline{display:none}.nur-handy-inline{display:inline}}
.liste-kopf .start-titel h1.seite{display:inline-flex;align-items:center;gap:4px}
.l-summen{margin:0;font-size:14px;color:var(--muted)}
.l-summen b{color:var(--fg)}
.l-summen a{color:var(--fg);font-weight:600}
.l-summen a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.liste-honorar tfoot th{background:none;color:var(--fg);font-size:14px;font-weight:600;border-bottom:0}
.liste-honorar tfoot th,.liste-honorar tfoot td{border-top:1.5px solid var(--fg);border-bottom:0;padding-top:8px}
@media (max-width:700px){
  .liste-kopf{gap:8px}
  .liste-kopf .rechts{width:100%;flex-wrap:nowrap}
  .liste-kopf .afilter{flex:1;min-width:0}
  .liste-kopf .afilter input[type=search]{flex:1;width:auto;min-width:0}
  .liste-kopf .afilter-suchen{display:none}             /* Suche startet mit der Eingabetaste */
  .liste-honorar .liste-karten tfoot{display:none}       /* Summen stehen über der Liste */
  .liste-honorar .liste-karten tr.click{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
  .liste-honorar .liste-karten td.leer,.liste-honorar .liste-karten td.pc-feld{display:none}   /* leer bzw. im Titel */
  .liste-honorar .liste-karten tr.click{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) max-content}
  .liste-honorar .liste-karten td.haupt .zeile2{margin-top:0}
  .liste-kopf .start-titel h1.seite{font-size:18px}
  .liste-kopf .ansicht-wahl a{padding:0 10px}
  .liste-honorar .liste-karten td[data-titel]:not(.haupt)::before{font-size:11px}
}
/* Knopf „… öffnen“ im aufgeklappten Inhalt (Manuel 07.11.2026: Zeile klappt auf, Öffnen ist ein eigener Schritt) */
/* Kopfzeile im Aufklappen: Kennung links, Öffnen rechts (Manuel 08.11.2026) */
.hl-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0 10px;border-bottom:1px solid var(--line)}
.hl-kopf-text{margin:0;font-size:14px;color:var(--muted)}.hl-kopf-text b{color:var(--fg)}
.hl-kopf-text span{white-space:nowrap}
@media (max-width:700px){.hl-kopf .btn{flex:1 1 100%;justify-content:center}}
@media (pointer:coarse){main .hl-kopf .btn.sm{min-height:44px}}
/* „Weitere anzeigen“ unter den Honorar-Listen (Manuel 07.11.2026) */
.l-mehr{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;font-size:14px}
@media (max-width:700px){.l-mehr .btn{flex:1 1 100%;justify-content:center}}
@media (pointer:coarse){.l-mehr .btn{min-height:44px}}
/* Übersicht einer gestellten Rechnung (Manuel 07.11.2026) */
.r-kopf{gap:10px}
.r-status{gap:6px}
.r-angaben{margin:0;font-size:14px}
.r-dateien{gap:8px;flex-wrap:wrap}
.r-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.r-zahlen>div{border:1px solid var(--rand);border-radius:var(--r);padding:12px 14px;background:var(--surface)}
.r-zahlen dt{font-size:13px;color:var(--muted)}
.r-zahlen dd{margin:4px 0 0;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.r-zahlen>div.neg dd{color:var(--bad)}
@media (max-width:700px){.r-zahlen{grid-template-columns:1fr}.r-zahlen>div{display:flex;justify-content:space-between;align-items:baseline}
  .r-zahlen dd{font-size:18px;margin:0}.r-dateien .btn.dunkel,.r-dateien .btn.umrandet{flex:1 1 100%;justify-content:center}}
/* Rechnungsübersicht: nächste Rechnung neben dem Titel (Manuel 07.11.2026) */
.schritt-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.schritt-kopf .schritt-titel{margin:0}
.r-folgen{gap:8px;flex-wrap:wrap}
.r-ab .hl-gruppe h3{margin-top:0}
@media (max-width:700px){.r-folgen{width:100%;gap:6px}.r-folgen .btn{flex:1 1 auto;justify-content:center;padding:6px 10px;font-size:13px}}
/* Rechnungsübersicht: Titel wie die Listen (20 px, auch am Handy sichtbar) */
.r-seitenkopf h1.seite{font-size:20px;text-transform:none;letter-spacing:0;margin:4px 0 0}
.r-ab .hl-in{max-width:none}
.r-ab .hl-gruppe>h3{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--fg)}
.r-ab .hl-gruppe>h3 .ab-bezug{font-size:13px}
/* Besondere Leistungen: Erläuterung und Stunden je Qualifikation (Manuel 08.11.2026) */
.bl-erl{display:block;margin-top:6px}.bl-erl textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;min-height:2.6rem}
.std-zeile{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem 6.5rem;align-items:center;gap:4px 8px;margin:4px 0;font-size:13px;text-align:left}
.besondertab thead th:nth-child(2){width:18%}.besondertab thead th:nth-child(3){width:29%}.besondertab thead th:nth-child(4){width:9%}.besondertab thead th:nth-child(5){width:13%}   /* Stunden je Qualifikation brauchen Platz */
.besondertab thead th{white-space:normal;vertical-align:bottom}
.std-zeile{white-space:normal}.std-q{overflow-wrap:anywhere}
.bl-fortschritt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:6px 0 0;font-size:13px}   /* D-048 */
.bl-fortschritt input{width:6.5rem}
@media (min-width:701px) and (max-width:1150px){.std-zeile{grid-template-columns:4.5rem minmax(0,1fr)}.std-q{grid-column:1/-1}}   /* mittlere Breite: Name über dem Feld */
.std-zeile .std-feld{width:100%;box-sizing:border-box;text-align:right}
.std-q{color:var(--fg)}.std-satz{color:var(--muted);white-space:nowrap}
.std-schaetzung{grid-column:2/-1;color:var(--muted);font-size:12px}
.std-liste{display:flex;align-items:center;gap:8px;margin:2px 0 6px;font-size:13px;color:var(--muted)}.std-liste select{width:auto;flex:1}
/* Angebotsübersicht (Manuel 08.11.2026) */
.r-verlauf{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.r-verlauf li{padding:8px 4px;border-bottom:1px solid var(--line);font-size:14px}
.r-verlauf li[aria-current]{font-weight:600}
.kb-formulare > .card{margin:0}
.absage[hidden]{display:none}
#status fieldset{border:0;padding:0;margin:0;min-width:0}   /* ohne Kasten des Browsers um die Auswahl */
#status .segment{display:flex;flex-wrap:wrap;gap:8px}
#status .segment .chk:has(input:checked){border-color:var(--fg);background:var(--surface-2);color:var(--fg);font-weight:600}   /* Auswahl neutral, Rot nur für Warnungen */
#status .segment .chk input{accent-color:var(--fg)}
@media (pointer:coarse){#status .segment .chk{min-height:44px}}

/* Import Auftragsbuch (IBV-014 Schritt 4) */
.importtabelle td{vertical-align:top}
.meldliste{margin:0;padding-left:16px;font-size:12px;min-width:220px}
.zeilenwahl{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:12px 0 0}
.vkarten.klein{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin:0 0 10px}
.vkarten.klein .vkarte{padding:10px 12px}
.vkarten.klein .vkarte:hover{border-color:var(--line)}
.vkarten.klein .vkarte b{font-size:22px}

/* Fußzeile (Impressum, Datenschutz, Cookies) auf allen Seiten, 08.11.2026. Unten an der Seite auch bei wenig Inhalt;
   Links links, weil rechts unten die Stoppuhr sitzt. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
.fuss{border-top:1px solid var(--line);background:var(--surface);font-size:12px;color:var(--muted)}
.fussin{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:6px calc(6px + env(safe-area-inset-bottom,0px))}
.fuss nav{display:flex;flex-wrap:wrap;gap:0 4px}
.fuss a,.fuss button{color:var(--muted);background:none;border:0;padding:6px 6px;font-size:12px;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.fuss a:hover,.fuss button:hover{color:var(--fg);text-decoration:underline}
.fuss a:focus-visible,.fuss button:focus-visible{outline:2px solid var(--fg);outline-offset:1px;color:var(--fg)}
@media (pointer:coarse){.fuss a,.fuss button{min-height:44px}}
@media (min-width:701px){body.mit-uhr .fuss .wrap{padding-right:clamp(16px,calc(150px - (100vw - 1140px) / 2),150px)}}
@media print{.fuss,.cookie-hinweis{display:none !important}}
@media (min-width:761px){.einstieg{min-height:calc(100vh - 170px)}}   /* Platz für die Fußzeile */

/* Cookie-Hinweis unten, über der Stoppuhr; nur ein Hinweis (nur notwendige Cookies), ein Knopf */
.cookie-hinweis{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;
  max-width:min(520px,calc(100vw - 32px));display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--surface);color:var(--fg);
  border:1px solid var(--rand,var(--line));border-radius:var(--r);padding:14px 16px;box-shadow:0 8px 28px rgba(0,0,0,.22);font-size:14px}
.cookie-hinweis[hidden]{display:none}
.cookie-hinweis p{margin:0;flex:1 1 260px}
.cookie-hinweis a{color:var(--fg);text-decoration:underline}

/* Impressum, Datenschutz: Lesetext */
.recht{max-width:78ch;gap:10px}
.recht h1{font-size:24px;font-weight:700}
.recht h2{margin-top:14px}
.recht h3{margin-top:6px}
.recht p,.recht ul{margin:0}
.recht ul{padding-left:20px}
.recht a{color:var(--accent-text)}
.recht td{white-space:normal;vertical-align:top}
.recht code{font-size:13px}
@media (max-width:640px){   /* Cookie-Tabelle am Handy als Liste statt seitlich scrollen */
  .recht thead{display:none}
  .recht tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding:10px;border-bottom:1px solid var(--line)}
  .recht tbody tr:last-child{border-bottom:0}
  .recht tbody td{border:0;padding:0}
  .recht tbody td:nth-child(2){color:var(--muted)}
  .recht tbody td:nth-child(n+3){grid-column:1/-1}
}
/* Projektseite gegliedert (D-057, Prüfung 09.11.2026) */
.projektkopf .kopfstatus{display:inline-flex;gap:6px;flex-wrap:wrap;margin-right:auto}
.hinweisleiste{border-color:var(--warn);background:var(--warn-soft)}
.speicherleiste{position:sticky;bottom:0;z-index:4;background:var(--bg);padding:10px 0;border-top:1px solid var(--line)}
.unterkopf{margin:6px 0 0;font-size:15px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.auswahlsuche{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:2px 0 4px}
.auswahlsuche input{max-width:240px}
.suche-aus{display:none !important}   /* Personensuche; nicht .weg (Honorar: vorgemerkte Anlage) */
#umfang details.klappkarte>summary h2{margin:0}
/* Übersicht einer Leistung (Plan Vertragsübersicht, Manuel 09.11.2026) */
.r-zahlen.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.r-zahlen.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.r-zahlen.vier{grid-template-columns:1fr}}
.v-gruppe{font-size:14px;font-weight:600;margin:18px 0 6px}
.cardhead + .v-gruppe{margin-top:4px}
.v-verlauf tr.blass td,.v-verlauf tr.blass a{color:var(--muted)}
@media (min-width:701px){.v-verlauf{table-layout:fixed;width:100%}   /* gleiche Spalten in allen Gruppen */
  .v-verlauf th:nth-child(1){width:24%}.v-verlauf th:nth-child(2){width:18%}.v-verlauf th:nth-child(3){width:13%}
  .v-verlauf th:nth-child(4){width:19%}.v-verlauf th:nth-child(5){width:14%}.v-verlauf th:nth-child(6){width:12%}
  .v-verlauf td{overflow-wrap:anywhere}}
@media (max-width:700px){.v-verlauf td.leer{display:none}}
.v-angaben{margin-bottom:8px}
/* Änderungen am Auftrag (Manuel 09.11.2026): je Speichern ein Block mit Kopfzeile und Tabelle bisher → neu */
.aend-liste{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
.aend{border-left:3px solid var(--line);padding-left:12px}
.aend-kopf{margin:0 0 6px}
.aend-tab{font-size:14px}
.aend-tab td:first-child{min-width:40%}
@media (max-width: 720px){
  .aend-tab thead{display:none}
  .aend-tab tr{display:block;border-top:1px solid var(--line);padding:6px 0}
  .aend-tab td{display:block;border:0;padding:2px 0}
  .aend-tab td:not(:first-child)::before{content:attr(data-titel) ": ";color:var(--muted);font-size:12px}
  .aend-tab td:first-child{font-weight:600;min-width:0}
  .aend-kopf{overflow-wrap:anywhere}
}
/* Liste „Projekte“ und Projektakte (Konzept Projekte, Manuel 09.11.2026) */
.p-stand{font-size:14px}
.projektliste .pill{margin-top:4px}
.r-seitenkopf h1.seite .p-nr{font-weight:400;font-size:16px}
.p-links{gap:8px;flex-wrap:wrap}
.p-fortschritt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:12px}
.p-fortschritt .ab-balken{height:12px;border-radius:6px;grid-area:auto}   /* nicht das Raster aus .ab-z am Handy */
.p-fortschritt .ab-balken i{border-radius:6px;background:color-mix(in srgb,var(--fg) 70%,transparent)}
.p-balken{display:block;width:100%;max-width:9rem;margin:4px 0 0 auto;height:6px}
.p-gruppe{margin-top:6px;border-top:1px solid var(--line);padding-top:4px}
.p-gruppe>summary .v-gruppe{margin:6px 0}
.p-gruppe>summary .klapp-hinweis{margin-left:auto}
.p-gruppe[open]>summary .klapp-hinweis{visibility:hidden}
.p-leistungen tr.blass td,.p-leistungen tr.blass a{color:var(--muted)}
@media (min-width:701px){.p-leistungen th:nth-child(1){width:22%}.p-leistungen th:nth-child(2){width:36%}
  .p-leistungen th:nth-child(3){width:16%}.p-leistungen th:nth-child(4){width:14%}.p-leistungen th:nth-child(5){width:12%}
  .p-belege th:nth-child(1){width:30%}}
@media (max-width:700px){.p-balken{margin:4px 0 0;grid-area:auto}.p-fortschritt{grid-template-columns:1fr}
  .liste-honorar .projektliste tr.click{grid-template-columns:repeat(3,minmax(0,1fr))}   /* Liste „Projekte“ am Handy */
  .projektliste td[data-titel="Leistungen"]{grid-column:1/-1}
  .projektliste td[data-titel="Auftraggeber"]{display:none}            /* steht am Handy unter dem Namen */
  .projektliste td.num{white-space:normal}
  .p-leistungen td.num{white-space:normal}
  .p-leistungen tr.click{grid-template-columns:repeat(3,minmax(0,1fr))}       /* Status über die ganze Breite, Beträge in einer Reihe */
  .p-leistungen td[data-titel="Status"]{grid-column:1/-1}
  .p-leistungen td[data-titel]:not(.haupt)::before{font-size:11px}
  .p-leistungen .pill{white-space:normal}
  .p-leistungen td.leer,.p-belege td.leer{display:none}
  .p-links .btn{flex:1 1 auto;justify-content:center}}
/* Liste „Angebote“ am Handy: Datum ganz, Status darf umbrechen (Hinweis „V1 angeboten“, Manuel 09.11.2026) */
@media (max-width:700px){.liste-honorar .angebotsliste tr.click{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr)}
  .angebotsliste td[data-titel="Status"] .pill{white-space:normal}}