/* SmeloNetics Zentrale im Liquid-Glass-Stil: durchscheinende Glasflächen über einem ruhigen Farbgrund,
   weiche Lichtkanten, runde Formen. Farben SmeloNetics: Anthrazit, Gold, Violett. Dunkel ist Standard.
   Lesbarkeit geht vor Effekt: Glas ist so dicht, dass Text überall mindestens WCAG AA erreicht.
   Wer "Transparenz reduzieren" eingestellt hat oder einen Browser ohne Unschärfe nutzt, bekommt feste Flächen.
   Schriften liegen auf dem eigenen Server (keine Google-Fonts-Abrufe, DSGVO). */
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(/schriften/geist-400.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url(/schriften/geist-500.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url(/schriften/geist-600.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:700;font-display:swap;src:url(/schriften/geist-700.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(/schriften/geist-mono-400.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:700;font-display:swap;src:url(/schriften/sora-700.woff2) format("woff2")}

:root{
  --bg:#0B0A09;
  --blob1:rgba(255,166,0,.26);--blob2:rgba(143,116,255,.32);--blob3:rgba(255,120,60,.12);
  /* Glas: Grundfarbe, Rand, Lichtkante oben, Unschärfe */
  --glass:rgba(30,27,24,.62);--glass2:rgba(44,40,36,.66);--glass3:rgba(60,55,49,.6);--glass-side:rgba(22,20,18,.58);--glass-solid:#1C1A17;
  --edge:rgba(255,255,255,.10);--edge2:rgba(255,255,255,.18);--hi:rgba(255,255,255,.14);
  --blur:blur(26px) saturate(170%);
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --fg:#F6F2EC;--fg2:#E2DBD1;--mut:#C2BAAF;--mut2:#ACA498;
  --gold:#FFBE45;--goldf:#FFA600;--goldfg:#1A1714;--goldbg:rgba(255,166,0,.16);
  --vio:#C0AEFF;--viobg:rgba(143,116,255,.18);
  --ok:#6BE3A9;--okbg:rgba(67,209,142,.15);--warn:#FFCC66;--warnbg:rgba(245,184,61,.15);
  --bad:#FF9C9C;--badbg:rgba(255,107,107,.15);--info:#9CC6FF;--infobg:rgba(106,168,255,.15);
  --shadow:0 20px 50px rgba(0,0,0,.45);--shadow-s:0 6px 22px rgba(0,0,0,.28);--scrim:rgba(5,4,4,.5);
  --r:20px;--r-s:12px;
  --body:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text",Arial,ui-sans-serif,system-ui,sans-serif;--display:"Sora","Geist",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --fs:14.5px;--fs-s:13px;--fs-xs:12px;
  color-scheme:dark
}
:root[data-theme="light"]{
  --bg:#ECE8E1;
  --blob1:rgba(255,176,40,.32);--blob2:rgba(140,110,255,.26);--blob3:rgba(255,140,90,.14);
  --glass:rgba(255,255,255,.66);--glass2:rgba(255,255,255,.78);--glass3:rgba(236,231,223,.85);--glass-side:rgba(255,255,255,.58);--glass-solid:#FBFAF8;
  --edge:rgba(255,255,255,.75);--edge2:rgba(255,255,255,.95);--hi:rgba(255,255,255,.9);
  --line:rgba(40,30,20,.09);--line2:rgba(40,30,20,.17);
  --fg:#15120E;--fg2:#2F2A24;--mut:#544D44;--mut2:#615A50;
  --gold:#8A5000;--goldf:#FFA600;--goldfg:#1A1714;--goldbg:rgba(255,166,0,.2);
  --vio:#4E31D2;--viobg:rgba(116,87,245,.13);
  --ok:#09643C;--okbg:rgba(17,128,79,.12);--warn:#7A4C00;--warnbg:rgba(245,184,61,.22);
  --bad:#A42222;--badbg:rgba(196,53,53,.11);--info:#1A4FA8;--infobg:rgba(37,99,201,.11);
  --shadow:0 20px 50px rgba(60,40,20,.16);--shadow-s:0 6px 22px rgba(60,40,20,.09);--scrim:rgba(30,25,20,.3);
  color-scheme:light
}
*{box-sizing:border-box}
/* hidden gilt immer, auch für Knöpfe und Hinweise mit eigenem display */
[hidden]{display:none!important}
/* Kein Gummiband am oberen und unteren Seitenrand: am iPhone wandern sonst Kopfzeile, Tableiste und Farbgrund beim Ziehen mit. */
html{min-height:100%;background:var(--bg);overscroll-behavior-y:none}
body{overscroll-behavior-y:none;min-height:100%;background:transparent;color:var(--fg);font-family:var(--body);font-size:var(--fs);line-height:1.5;margin:0;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Farbgrund hinter dem Glas: feste Lichtflecken in Gold und Violett */
body::before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(38vmax 34vmax at 88% 4%,var(--blob2),transparent 70%),radial-gradient(40vmax 32vmax at 6% 96%,var(--blob1),transparent 70%),radial-gradient(28vmax 24vmax at 50% 55%,var(--blob3),transparent 70%),var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:8px}
a{color:var(--gold)}
.num{font-variant-numeric:tabular-nums}
.t td.num{white-space:nowrap}
.mono{font-family:var(--mono);font-size:var(--fs-s)}
.mut{color:var(--mut)}.small{font-size:var(--fs-s)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Glas-Grundbaustein. Unscharf gerechnet wird nur, wo Inhalt unter dem Glas durchläuft: Kopfzeile, Tableiste, Menü.
   Karten liegen direkt auf den weichen Lichtflecken. Dort sieht Glas ohne Unschärfe gleich aus, aber jede unscharfe Karte
   muss beim Scrollen in jedem Bild neu gerechnet werden; am iPhone war das der Grund für ruckeliges Scrollen. */
.side,.top,.tabbar{-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.card,.kpis,.kz{background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s)}

/* Gerüst */
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh;min-height:100dvh;overflow-x:clip}
.side{background:var(--glass-side);border-right:1px solid var(--edge);box-shadow:inset -1px 0 0 var(--line);position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:18px 12px 24px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--mut2) 50%,transparent) transparent}
/* Schalter fürs aufklappbare Menü: Ein Tipp auf „Mehr“ oder das Menü-Symbol setzt den Fokus auf ihn. Stünde er oben in der
   Seite, scrollte der Browser dafür ganz nach oben (Brian, 10.11.2026). Fest im Bildschirm braucht der Fokus kein Scrollen. */
#menu{position:fixed;top:0;left:0}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;text-decoration:none;color:inherit}
.brand svg{width:38px;height:38px;flex:none;border-radius:11px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
/* Logo eines Betriebs auf seinen Seiten für Kunden (Kundvio, /ihr-angebot): auf hellem Grund, damit dunkle Logos lesbar bleiben. */
.brand img.firmenlogo{height:40px;width:auto;max-width:120px;object-fit:contain;flex:none;background:#fff;border-radius:10px;padding:4px 6px}
.brand b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;display:block;line-height:1.1}
.brand b i{font-style:normal;background:linear-gradient(135deg,#FFD27A,#FFA600 50%,#E07B00);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .brand b i{background:linear-gradient(135deg,#C77800,#A35F00);-webkit-background-clip:text;background-clip:text}
.brand small{color:var(--mut);font-size:12.5px}
.grp{font-size:calc(11.5px + var(--plus-k,0px));letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);font-weight:600;padding:14px 12px 6px}
.nav{display:flex;align-items:center;gap:11px;width:100%;border:1px solid transparent;background:transparent;padding:8px 12px;border-radius:12px;color:var(--fg2);text-align:left;font-size:calc(14px + var(--plus,0px));font-weight:500;text-decoration:none;transition:background .15s}
.nav svg{width:17px;height:17px;flex:none;color:var(--mut)}
.nav:hover{background:var(--glass2)}
.nav.on{background:var(--glass3);border-color:var(--edge);box-shadow:inset 0 1px 0 var(--hi),0 4px 14px rgba(0,0,0,.14);color:var(--fg)}
.nav.on svg{color:var(--gold)}
.nav.spaeter{color:var(--mut2);cursor:default}
.nav.spaeter:hover{background:transparent}
.nav .cnt{margin-left:auto;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:99px;background:var(--glass3);color:var(--mut)}
.side .foot{margin-top:auto;padding:16px 12px 0;font-size:12.5px;color:var(--mut);display:grid;gap:8px}
.side .foot form{margin:0}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;background:var(--glass-side);border-bottom:1px solid var(--edge);box-shadow:inset 0 -1px 0 var(--line);display:flex;align-items:center;gap:12px;padding-block:12px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.top .tt{min-width:0}
.top h1{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.top .sub{color:var(--mut);font-size:var(--fs-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Zurück oben links über dem Titel, wie in den Apps von Apple (src/ui/zurueck.ts). Tippfläche 44 pt hoch, ohne den Kopf höher zu machen. */
.zurueck-btn{display:flex;width:max-content;max-width:100%;align-items:center;gap:2px;min-height:32px;margin:-6px 0 2px -8px;padding:0 10px 0 2px;border-radius:12px;color:var(--gold);font-size:var(--fs-s);font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent}
.zurueck-btn svg{width:22px;height:22px;flex:none;stroke-width:2.2}
.zurueck-btn span{overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.zurueck-btn:hover{background:var(--glass2)}}
.zurueck-btn:active{opacity:.55}
@media (max-width:700px){.zurueck-btn{min-height:44px;margin:-10px 0 -4px -10px;font-size:17px;font-weight:500}.zurueck-btn svg{width:26px;height:26px}}
.top .acts{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-items:center;min-width:0}
.ibtn{height:38px;min-width:38px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);border-radius:99px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 11px;color:var(--fg2);position:relative;text-decoration:none}
.ibtn:hover{border-color:var(--edge2);color:var(--fg)}
.ibtn svg{width:17px;height:17px}
.menu-btn{display:none}
.scrim{display:none}
.tabbar{display:none}
.page{padding-block:24px 64px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start;max-width:1440px;width:100%}

/* Übersichtlichkeit: Suche oben, Kontozeile im Menü, ganze Tabellenzeilen klickbar, Startseite „Heute zu tun“ */
.gsuche{position:relative;flex:1 1 260px;max-width:420px;margin-left:auto}
.gsuche .inp{width:100%;padding-left:36px;padding-right:34px;border-radius:99px}
.gsuche>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mut);pointer-events:none}
.gsuche kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.gsuche .inp:focus~kbd{display:none}
.top .gsuche+.acts{margin-left:0}
@media (max-width:1150px){.gsuche{max-width:260px}.gsuche kbd{display:none}}
kbd{font-family:var(--mono);font-size:11.5px;padding:1px 6px;border-radius:6px;border:1px solid var(--line2);background:var(--glass3);color:var(--mut)}
.nur-s{display:none!important}
.suchgross{position:relative;display:flex;gap:8px;max-width:760px}
.suchgross>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mut);pointer-events:none}
.suchgross .inp{flex:1;height:46px;padding-left:42px;font-size:15.5px;border-radius:99px}
.suchgross .btn{height:46px}
.bald{margin:14px 12px 0;font-size:12px;line-height:1.45;color:var(--mut2)}
.side .foot .ich{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:12px;color:var(--fg2);text-decoration:none;border:1px solid transparent}
.side .foot .ich:hover{background:var(--glass2)}
.side .foot .ich.on{background:var(--glass3);border-color:var(--edge)}
.side .foot .ich svg{width:17px;height:17px;flex:none;color:var(--ok)}
.side .foot .ich b{display:block;font-size:13.5px;color:var(--fg);font-weight:600}
.side .foot .ich small{display:block;font-size:calc(12px + var(--plus-k,0px));color:var(--mut)}
/* Ganze Zeile anklickbar: der Hauptlink in der ersten Spalte deckt die Zeile ab, andere Links und Knöpfe bleiben darüber bedienbar. */
.t tbody tr:has(>td.first.nm>a){position:relative;cursor:pointer}
.t td.first.nm>a::after{content:"";position:absolute;inset:0}
.t td a:not(td.first.nm>a),.t td form,.t td button,.t td input,.t td select,.t td label{position:relative;z-index:1}
.schritt{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--gold);white-space:nowrap}
.schritt svg{width:15px;height:15px}
a.li:hover .schritt svg{transform:translateX(2px)}
.li .tx b .pill{margin-left:6px;vertical-align:1px}
.schnell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.schnell .btn{justify-content:flex-start;padding:0 12px;min-width:0}
.schnell .btn svg{flex:none}
.schnell .btn svg{color:var(--gold)}
.empty.fertig{display:grid;justify-items:center;gap:4px}
.empty.fertig svg{width:30px;height:30px;color:var(--ok);margin-bottom:4px}
.empty.fertig b{color:var(--fg)}
.list.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.list.zwei .li{border-bottom:0;border-top:1px solid var(--line)}
.list.zwei .li:nth-child(-n+2){border-top:0}
.kurz{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.kurz .mut{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s)}
.kurz .mut svg{width:15px;height:15px}

/* Bausteine */
.card{border-radius:var(--r);min-width:0;overflow:clip}
.card>.hd{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card>.hd h2{font-size:calc(15.5px + var(--plus,0px));font-weight:650}
.card>.hd .r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card>.bd{padding:16px 18px;display:grid;gap:12px}
.grid{display:grid;gap:18px;align-content:start}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r);overflow:clip}
.kpi{padding:18px 20px;border-left:1px solid var(--line);display:grid;gap:3px;min-width:0;color:inherit;text-decoration:none}
.kpi:first-child{border-left:0}
a.kpi:hover{background:var(--glass2)}
.kpi .v{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .l{font-weight:600;font-size:13.5px}
.kpi .h{color:var(--mut);font-size:var(--fs-xs)}
.v.gold{color:var(--gold)}.v.bad{color:var(--bad)}.v.ok{color:var(--ok)}.v.vio{color:var(--vio)}

.btn{height:38px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);padding:0 16px;font-weight:600;font-size:calc(13.5px + var(--plus,0px));display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;color:var(--fg);text-decoration:none;transition:border-color .15s,filter .15s}
.btn:hover{border-color:var(--edge2)}
/* Symbole im Text ohne eigene Regel: so groß wie die Schrift (eigene Regeln wie .btn svg gehen vor) */
.i{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
.btn svg{width:16px;height:16px}
.btn.pri{color:var(--goldfg)}
.btn.pri:hover{filter:brightness(1.05)}
.btn.vio{background:var(--viobg);border-color:color-mix(in srgb,var(--vio) 30%,transparent);color:var(--vio)}
.btn.dng{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--badbg)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.sm{height:32px;padding:0 12px;font-size:calc(13px + var(--plus,0px))}
.btn.voll{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:calc(12.5px + var(--plus-k,0px));font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;background:var(--glass3);color:var(--fg2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill.ok{background:var(--okbg);color:var(--ok)}.pill.warn{background:var(--warnbg);color:var(--warn)}
.pill.bad{background:var(--badbg);color:var(--bad)}.pill.info{background:var(--infobg);color:var(--info)}
.pill.vio{background:var(--viobg);color:var(--vio)}.pill.gold{background:var(--goldbg);color:var(--gold)}
/* E-Rechnung, XRechnung oder PDF: umrandet, damit es sich vom Zahlstatus abhebt */
.pill.eform{background:transparent;color:var(--ok);box-shadow:inset 0 0 0 1.5px currentColor}.pill.eform::before{display:none}
.pill.eform.xr{color:var(--info)}.pill.eform.pdf{color:var(--fg2)}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--edge);border-radius:99px;padding:5px 12px;font-size:calc(12.5px + var(--plus-k,0px));color:var(--fg2);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi)}
.chip .d{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.chip .d.aus{background:var(--mut2);box-shadow:none}
.tag{display:inline-block;font-size:calc(12px + var(--plus-k,0px));padding:2px 8px;border-radius:7px;background:var(--glass3);color:var(--fg2);white-space:nowrap}

/* Tabellen: am Handy als Karten */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:calc(14px + var(--plus,0px))}
.t th{text-align:left;font-size:calc(12px + var(--plus-k,0px));letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr:hover td{background:var(--glass2)}
.t .ra{text-align:right}
.t .nm{font-weight:600}
.t .nm a{color:var(--fg);text-decoration:none}
.t .nm a:hover{color:var(--gold);text-decoration:underline}
.t .s{color:var(--mut);font-size:var(--fs-s)}
.t tr.hl-bad td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.t tr.hl-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.empty{padding:30px 16px;text-align:center;color:var(--mut)}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inp{height:38px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);border-radius:12px;padding:0 12px;min-width:0}
.inp::placeholder{color:var(--mut2);opacity:1}
.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--goldbg)}
textarea.inp{height:auto;padding:10px 12px;resize:vertical;width:100%;line-height:1.5}
select.inp{padding-right:28px}
select.inp option{background:var(--glass-solid);color:var(--fg)}
.search{position:relative;flex:1 1 220px;max-width:360px}
.search input{width:100%;padding-left:34px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mut)}

.list{display:grid;grid-template-columns:minmax(0,1fr)}
.li{display:flex;gap:12px;align-items:flex-start;padding:13px 18px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.li:last-child{border-bottom:0}
a.li:hover{background:var(--glass2)}
.li .ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--glass3);color:var(--fg2);box-shadow:inset 0 1px 0 var(--hi)}
.li .ic svg{width:17px;height:17px}
.li .ic.gold{background:var(--goldbg);color:var(--gold)}.li .ic.vio{background:var(--viobg);color:var(--vio)}
.li .ic.ok{background:var(--okbg);color:var(--ok)}.li .ic.bad{background:var(--badbg);color:var(--bad)}.li .ic.warn{background:var(--warnbg);color:var(--warn)}
.li .tx{min-width:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.li .tx b{font-weight:600;overflow-wrap:anywhere}
.li .tx span{color:var(--mut);font-size:var(--fs-s);overflow-wrap:anywhere}
.li .tx p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg2)}
.li .rt{margin-left:auto;text-align:right;display:grid;gap:4px;justify-items:end;flex:none}
/* Sehr schmale Handys: lange Pillen (z. B. „Wartet auf Kunde“) rutschen unter den Text, sonst bleibt für den Text kaum Platz */
@media (max-width:380px){.li.umbruch-s{flex-wrap:wrap}.li.umbruch-s .rt{flex-basis:calc(100% - 46px);justify-items:start;text-align:left;margin:-6px 0 0 46px}}

.kv{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:9px 16px;font-size:14px;margin:0}
.kv dt{color:var(--mut);max-width:240px}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* Lange Bezeichnung: bricht um, statt die Werte in eine schmale Spalte zu drücken (Handy-Prüfung, 10.11.2026). */
.kv dd .pill{white-space:normal;max-width:100%}
.pre{white-space:pre-wrap}
.note{border-radius:16px;padding:12px 14px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;background:var(--viobg);color:var(--fg);border:1px solid color-mix(in srgb,var(--vio) 22%,transparent);box-shadow:inset 0 1px 0 var(--hi)}
.note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--vio)}
.note.warn{background:var(--warnbg);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}.note.warn svg{color:var(--warn)}
.note.bad{background:var(--badbg);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}.note.bad svg{color:var(--bad)}
.note.ok{background:var(--okbg);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}.note.ok svg{color:var(--ok)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row form{margin:0}

/* Formulare */
form.f{display:grid;gap:14px}
.felder{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.felder .breit{grid-column:1/-1}
/* Eine Spalte, die nie breiter wird als das Feld selbst: kein Inhalt (Datum, lange Auswahl, langer Hinweis) schiebt über den Rand. */
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.field label{font-size:13px;color:var(--fg2);font-weight:600}
.field label i{font-style:normal;color:var(--gold)}
.field .inp{width:100%;max-width:100%}
/* Datum und Uhrzeit: iOS zeichnet diese Felder als eigenen Knopf, gibt ihm eine Mindestbreite für das längste Datum und rechnet
   Innenabstand und Rand zur Breite dazu (content-box). Darum ragten sie am iPhone über den Kartenrand.
   Ohne die eigene Form sehen sie aus wie alle anderen Felder, das Antippen öffnet weiter die Datumsauswahl von iOS.
   Gilt nur für iOS (nur dort gibt es -webkit-touch-callout); in Chromium nicht nachstellbar, darum hier festgeschrieben. */
@supports (-webkit-touch-callout:none){
  .inp:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;min-width:0;max-width:100%;text-align:left}
  .inp::-webkit-date-and-time-value{text-align:left;margin:0}
}
.field .hilfe{font-size:12.5px;color:var(--mut)}
.field .fehler{font-size:12.5px;color:var(--bad);font-weight:600}
.field.mit-fehler .inp{border-color:var(--bad)}
.check{display:flex;gap:9px;align-items:center;font-size:14px}
.check input{width:20px;height:20px;accent-color:var(--goldf)}
.aktionen{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Rechnungen */
.abst{margin-top:14px}
.zw{font-size:15px;margin:22px 0 8px}
.maengel{margin:6px 0 0;padding-left:18px}
.summen{max-width:440px;margin-left:auto}
.summen dd{text-align:right}
.t.eingabe td{padding:6px 8px;vertical-align:top}
.t.eingabe .inp{width:100%;min-width:0}
.t.eingabe td:nth-child(2){min-width:240px;width:50%}
.t.eingabe td:nth-child(3){width:90px}
.t.eingabe td:nth-child(5){width:140px}
.t.eingabe td:nth-child(4){width:124px}.t.eingabe td:nth-child(4) select.inp{min-width:112px}
.t.eingabe td:nth-child(6){width:104px}.t.eingabe td:nth-child(6) select.inp{min-width:92px}
.t.eingabe input.num{text-align:right}
.t.eingabe .fehler{display:block;font-size:12.5px;color:var(--bad);font-weight:600;margin-top:3px}

/* Anmeldung */
.einzeln{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 16px}
.einzeln .card{width:min(440px,100%);border-radius:28px;box-shadow:inset 0 1px 0 var(--hi),var(--shadow)}
.einzeln .card.breit{width:min(620px,100%)}
.einzeln .brand{justify-content:center;padding:26px 16px 4px}
.einzeln .bd{padding:18px 24px 26px}
.einzeln h1{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;text-align:center}
.einzeln .unter{color:var(--mut);text-align:center;font-size:14px}
.qr{display:grid;place-items:center;background:#fff;border-radius:16px;padding:12px;width:220px;max-width:100%;margin:0 auto}
.qr svg{width:100%;height:auto;display:block}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;font-family:var(--mono);font-size:15px;padding:12px 14px;border:1px dashed var(--line2);border-radius:14px;background:var(--glass2);margin:0;list-style:none}
.geheim{font-family:var(--mono);font-size:14px;letter-spacing:.06em;overflow-wrap:anywhere;padding:9px 11px;background:var(--glass2);border-radius:12px;text-align:center}
.schritte{margin:0;padding-left:20px;display:grid;gap:4px;color:var(--fg2)}

@media (max-width:1100px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* Menü zum Aufklappen: deckend, darum ohne Unschärfe (gleitet so flüssig, nichts scheint durch). Zu ist es unsichtbar und nicht per Tab erreichbar. */
  .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);z-index:70;transform:translateX(-104%);visibility:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s;box-shadow:var(--shadow);background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:calc(18px + env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));border-radius:0 26px 26px 0}
  #menu:checked~.side{transform:none;visibility:visible;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  #menu:checked~.scrim{display:block;position:fixed;inset:0;background:var(--scrim);z-index:60}
  .menu-btn{display:inline-flex}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(3){border-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--line)}
}

/* Handy: größere Schrift, große Tippflächen, Tableiste unten wie bei iOS */
@media (max-width:700px){
  :root{--fs:16px;--fs-s:14.5px;--fs-xs:13.5px;--r:22px}
  body{line-height:1.5}
  .top,.page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .top{gap:10px;padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px}
  .top h1{font-size:24px}
  .top .sub{font-size:14px}
  /* Viele Knöpfe oben (z. B. Rechnungen für Admins): Knöpfe rutschen in eine zweite Zeile statt über den Titel */
  .top{flex-wrap:wrap;row-gap:8px}
  .top .tt{flex:1 1 160px;min-width:0}
  .top .acts{flex-wrap:wrap;justify-content:flex-end}
  .page{padding-block:16px calc(112px + env(safe-area-inset-bottom,0px));gap:16px}
  .hide-s{display:none!important}
  .hide-l{display:inline!important}
  .nur-s{display:inline-flex!important}
  .gsuche{display:none}
  .suchgross .btn{display:none}
  .suchgross .inp{height:50px;font-size:16px}
  .schritt{font-size:14px}
  .schnell .btn{height:50px}
  .list.zwei{grid-template-columns:minmax(0,1fr)}
  .list.zwei .li:nth-child(2){border-top:1px solid var(--line)}
  /* Nächster Schritt rutscht am Handy unter den Text, damit der Text die volle Breite hat */
  .li:has(.schritt){flex-wrap:wrap}
  .li .rt:has(.schritt){flex-basis:100%;justify-items:start;text-align:left;padding-left:51px;margin-top:-4px}
  .ibtn{min-width:44px;height:44px}
  .ibtn svg{width:20px;height:20px}
  .menu-btn{display:none}
  .g2,.g3,.felder{grid-template-columns:minmax(0,1fr)}
  .grid{gap:16px}
  .card>.hd{padding:15px 16px}
  .card>.hd h2{font-size:calc(17px + var(--plus,0px))}
  .card>.bd{padding:16px}
  .kpi{padding:16px}
  .kpi .v{font-size:32px}
  .kpi .l{font-size:15px}
  .kpi .h{font-size:13.5px}
  .li{padding:14px 16px;gap:13px}
  .li .ic{width:38px;height:38px}
  .li .tx b{font-size:calc(16px + var(--plus,0px))}
  .pill{font-size:calc(13.5px + var(--plus-k,0px));padding:4px 11px}
  .tag{font-size:calc(13px + var(--plus-k,0px))}
  .chip{font-size:calc(13.5px + var(--plus-k,0px))}
  .nav{font-size:calc(16px + var(--plus,0px));padding:11px 12px}
  .nav svg{width:19px;height:19px}
  .grp{font-size:calc(12.5px + var(--plus-k,0px))}
  .t.cards thead{display:none}
  .t.cards,.t.cards tbody,.t.cards tr,.t.cards td{display:block;width:100%}
  .t.cards .pill{white-space:normal;max-width:100%}
  .t.cards tr{border-bottom:1px solid var(--line);padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px}
  .t.cards tr:last-child{border-bottom:0}
  .t.cards td{border:0;padding:0;font-size:15px;min-width:0;background:transparent!important;overflow-wrap:anywhere}
  .t.cards td.first{grid-column:1/-1;font-size:17px}
  .t.cards td.first .s{font-size:14px}
  .t.cards td[data-l]::before{content:attr(data-l);display:block;font-size:12.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:2px}
  .t.cards td.ra{text-align:left}
  .t.cards.eingabe td{width:auto}
  .t.cards.eingabe td:nth-child(2){grid-column:1/-1}
  .t.cards tr.hl-bad{box-shadow:inset 4px 0 0 var(--bad)}
  .t.cards tr.hl-warn{box-shadow:inset 4px 0 0 var(--warn)}
  .t.cards tr.hl-bad td:first-child,.t.cards tr.hl-warn td:first-child{box-shadow:none}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px;font-size:16px}
  .kv dt{font-size:13.5px;margin-top:10px;max-width:none}
  .kv dt:first-child{margin-top:0}
  .btn{height:46px;font-size:calc(15.5px + var(--plus,0px));padding:0 18px}
  .btn.sm{height:40px;font-size:calc(14.5px + var(--plus,0px))}
  /* Lange Beschriftungen brechen am schmalen Handy um, statt über die Karte zu ragen. Kurze bleiben einzeilig und gleich hoch. */
  .btn{max-width:100%;white-space:normal;text-align:center;height:auto;min-height:46px;padding-block:5px;line-height:1.2}
  .btn.sm{height:auto;min-height:40px}
  .toolbar .btn,.toolbar .inp{flex:1 1 auto}
  .search{max-width:none;flex-basis:100%}
  /* 16 px in Eingabefeldern, sonst vergrößert iOS beim Antippen die ganze Seite */
  .inp{height:48px;font-size:calc(16px + var(--plus,0px));border-radius:14px}
  textarea.inp{font-size:calc(16px + var(--plus,0px))}
  .search svg{width:18px;height:18px;left:13px}
  .search input{padding-left:40px}
  .field label{font-size:calc(14.5px + var(--plus-k,0px))}
  .field .hilfe,.field .fehler{font-size:calc(13.5px + var(--plus-k,0px))}
  .check{font-size:calc(16px + var(--plus-k,0px))}
  .note{font-size:15px;padding:13px 15px}
  .aktionen .btn{flex:1 1 auto}
  .msg{font-size:calc(15.5px + var(--plus,0px));max-width:100%}
  .msg .kopf{font-size:calc(13.5px + var(--plus-k,0px))}
  .mono{font-size:14px}
  .codes{grid-template-columns:minmax(0,1fr);font-size:16px}
  /* Anmelden, Einladung, PIN: Karte mittig zwischen Statusleiste und Home-Balken */
  .einzeln{padding:max(24px,env(safe-area-inset-top,0px)) 14px max(24px,env(safe-area-inset-bottom,0px))}
  .einzeln .bd{padding:16px 18px 22px}
  .einzeln h1{font-size:24px}
  .einzeln .unter{font-size:15.5px}

  .tabbar{display:flex;position:fixed;z-index:50;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px;gap:2px;border-radius:30px;background:color-mix(in srgb,var(--glass-solid) 82%,transparent);border:1px solid var(--edge2);box-shadow:inset 0 1px 0 var(--hi),0 12px 34px rgba(0,0,0,.35)}
  .tabbar a,.tabbar label{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:56px;border-radius:24px;color:var(--fg2);text-decoration:none;font-size:12px;font-weight:600;position:relative;cursor:pointer}
  .tabbar svg{width:23px;height:23px}
  .tabbar .on{background:var(--glass3);color:var(--gold);box-shadow:inset 0 1px 0 var(--hi)}
  .tabbar .cnt{position:absolute;top:4px;left:calc(50% + 6px);min-width:19px;height:19px;padding:0 5px;border-radius:99px;font-size:11.5px;line-height:19px;text-align:center;background:var(--goldf);color:var(--goldfg)}
  .tabbar .cnt.bad{background:#D63A3F;color:#fff}
}
@media (max-width:360px){
  .tabbar a span:not(.cnt),.tabbar label span{font-size:11px}
  .kpi .v{font-size:28px}
}

/* Ohne Unschärfe (ältere Browser) oder mit "Transparenz reduzieren": feste, gut lesbare Flächen */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:#1C1A17;--glass2:#26231F;--glass3:#302C27;--glass-side:#151311}
  :root[data-theme="light"]{--glass:#FFFFFF;--glass2:#F6F3EE;--glass3:#ECE7DF;--glass-side:#FBFAF8}
}
@media (prefers-reduced-transparency:reduce){
  :root{--glass:#1C1A17;--glass2:#26231F;--glass3:#302C27;--glass-side:#151311}
  :root[data-theme="light"]{--glass:#FFFFFF;--glass2:#F6F3EE;--glass3:#ECE7DF;--glass-side:#FBFAF8}
}
@media (prefers-contrast:more){
  :root{--glass:#1A1816;--glass2:#24211D;--edge:rgba(255,255,255,.3);--mut:#D2CBC1}
  :root[data-theme="light"]{--glass:#FFFFFF;--glass2:#F6F3EE;--edge:rgba(0,0,0,.3);--mut:#3F3933}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Zähler im Menü */
.nav .cnt.hot{background:var(--goldbg);color:var(--gold)}
.nav .cnt.bad{background:var(--badbg);color:var(--bad)}

/* Ticket-Verlauf */
.msgs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.msg{border-radius:18px;padding:11px 14px;background:var(--glass2);border:1px solid var(--edge);font-size:14px;max-width:92%;overflow-wrap:anywhere}
.msg .kopf{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin-bottom:4px}
.msg .kopf b{color:var(--fg2);font-weight:600}
.msg.antwort{background:var(--goldbg);border-color:color-mix(in srgb,var(--goldf) 25%,transparent);justify-self:end}
.msg.notiz{background:var(--viobg);justify-self:end;border:1px dashed var(--vio)}
.msg.system{background:transparent;border:0;padding:2px 4px;color:var(--mut);font-size:var(--fs-s);max-width:100%}
.msg.system .kopf{margin:0}
code.sel{user-select:all;padding:2px 6px;border-radius:7px;background:var(--glass3);overflow-wrap:anywhere}
.inp.wachsen{flex:1 1 180px;min-width:0;width:auto}
/* Kassenbuch: Korrektur aufklappen, Zählprotokoll */
details.korrektur>summary{list-style:none;cursor:pointer}
details.korrektur>summary::-webkit-details-marker{display:none}
details.korrektur[open]>summary{margin-bottom:8px}
details.korrektur form{min-width:220px}
table.zaehlung{max-width:360px}
table.zaehlung td:first-child{white-space:nowrap}
.prose{max-width:72ch;font-size:15px;line-height:1.6}.prose h2{font-size:18px;margin:26px 0 8px}.prose h2:first-child,.prose p.mut+h2{margin-top:6px}.prose h3{font-size:16px;margin:18px 0 6px}.prose h4{font-size:15px;margin:14px 0 4px}.prose p{margin:0 0 10px}.prose ul{margin:0 0 12px;padding-left:20px}.prose li{margin:4px 0}.prose mark{background:var(--goldbg);color:inherit;border-radius:4px;padding:0 3px}
/* GoldSum (Büro-App): elegantes Braun mit Kupfer statt Anthrazit und Violett. Gold bleibt die Handlungsfarbe. */
:root.goldsum{--bg:#0F0907;--blob1:rgba(255,166,0,.2);--blob2:rgba(240,122,72,.26);--blob3:rgba(120,58,30,.32);--glass:rgba(38,25,19,.62);--glass2:rgba(54,36,27,.66);--glass3:rgba(72,48,36,.6);--glass-side:rgba(30,19,14,.58);--glass-solid:#22150F;--fg:#F7F0EA;--fg2:#E6D9CE;--mut:#C2B1A3;--mut2:#A39183;--vio:#FFB08A;--viobg:rgba(240,122,72,.2)}
:root.goldsum[data-theme="light"]{--bg:#EFE6DF;--glass:rgba(255,255,255,.66);--glass2:rgba(255,255,255,.78);--glass-side:rgba(255,255,255,.58);--blob1:rgba(255,176,40,.28);--blob2:rgba(240,122,72,.24);--blob3:rgba(160,90,50,.14);--glass-solid:#FBF7F4;--glass3:rgba(238,226,217,.85);--fg:#1C120D;--fg2:#36261D;--mut:#5C4A3E;--mut2:#705C4F;--vio:#9E431B;--viobg:rgba(240,122,72,.14)}
.goldsum .brand b{color:var(--vio)}
/* Kundvio: „Kund“ in Schriftfarbe, „vio“ in Gold (umgekehrt zu Smelo|Netics, darum das <i> zurücksetzen). */
/* Kundvio: „Kund“ in Textfarbe, „vio“ in Gold (einfarbig, damit der Kontrast messbar und sicher ist). */
.kundvio .brand b{background:none;color:#FFB224}
.kundvio .brand b i{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fg)}
:root.kundvio[data-theme="light"] .brand b{color:#9A5A00}
.t td svg{width:14px;height:14px;vertical-align:-2px;color:var(--mut2)}
@media (max-width:700px){.kpi .v{font-size:22px;white-space:nowrap}}
/* Ausgaben: Belegfoto, stornierte Zeilen */
.belegbild{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:calc(var(--r) - 6px);background:var(--glass3);margin-bottom:12px}
.t tr.storno td{text-decoration:line-through;color:var(--mut)}.t tr.storno td:last-child{text-decoration:none}
.v.warn{color:var(--warn)}
/* Auswertung: Säulen je Monat. Farben geprüft auf Farbsehschwäche (hell und dunkel). */
:root{--c-ein:#BD7F12;--c-aus:#4F8CC9}
:root[data-theme="light"]{--c-ein:#A86A00;--c-aus:#2F6DB3}
.dia{margin:0}.dia svg{display:block;width:100%;height:auto}
.dia-gitter{stroke:var(--edge);stroke-width:1}.dia-achse{stroke:var(--mut2);stroke-width:1}
.dia-ein{fill:var(--c-ein)}.dia-aus{fill:var(--c-aus)}
.dia-treffer{fill:transparent}.dia-monat:hover .dia-treffer{fill:var(--glass3)}
.dia-text{fill:var(--mut);font-size:12px}
.dia-legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:var(--fs-s);color:var(--fg2)}
.dia-legende span{display:inline-flex;align-items:center;gap:6px}
.dia-legende i{display:inline-block;width:12px;height:12px;border-radius:3px}
i.dia-ein{background:var(--c-ein)}i.dia-aus{background:var(--c-aus)}
.t tr.summe td{font-weight:700;border-top:1px solid var(--edge)}
.t td.neg{color:var(--bad)}
/* Bank-Abgleich */
.bank-wahl{display:grid;gap:8px;min-width:0}.bank-wahl .inp{min-width:0;max-width:100%}
.bank-wahl form.row{display:grid;grid-template-columns:minmax(0,1fr) auto}.bank-wahl select.inp{width:100%;min-width:0;text-overflow:ellipsis}
.t.cards td.voll{grid-column:1/-1}
.t td select.inp{max-width:100%}
@media (max-width:1100px){.g21>.vorn{order:-1}}
.num .pos{color:var(--ok)}.num .neg{color:var(--fg)}
/* Übersicht: Zu tun */
.todo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.todo li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--edge)}
.todo li:last-child{border-bottom:0}
.todo li>span{flex:1 1 auto;min-width:0}
.todo li>svg{flex:none;width:18px;height:18px;color:var(--vio)}
.todo .btn{flex:none}
.empty svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.dz{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 12px;border:1.5px dashed var(--edge);border-radius:14px;background:var(--glass2);cursor:pointer;min-width:0;transition:border-color .15s}
.dz:hover,.dz.drauf{border-color:var(--gold)}.dz.voll{border-style:solid}
.dz-n{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dz.voll .dz-n{color:var(--fg);font-weight:600}
.sr:focus-visible+.dz{outline:2px solid var(--gold);outline-offset:2px}
/* Das versteckte Dateifeld bleibt 1 px groß, auch in .field (sonst ragt es am PC rechts über die Seite). */
.inp.sr,.field .inp.sr{width:1px;max-width:1px;height:1px;min-width:0;padding:0;border:0;margin:-1px}
.hide-l{display:none}

/* Statistik (src/statistik/routen.ts): Diagramme als SVG, Farben aus den Tokens */
.toolbar .trenner{width:1px;align-self:stretch;background:var(--line2);margin:0 4px}
.trend{font-weight:600;color:var(--mut)}.trend.up{color:var(--ok)}.trend.down{color:var(--bad)}
.live{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s);color:var(--mut);padding:4px 10px;border-radius:99px;border:1px solid var(--line2)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--mut2)}
.live.an{color:var(--ok)}.live.an i{position:relative;background:var(--ok);box-shadow:0 0 0 3px var(--okbg)}
/* Puls nur über transform und opacity: läuft auf der Grafikkarte, ohne die Seite in jedem Bild neu zu zeichnen */
.live.an i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:puls 2s ease-out infinite}
@keyframes puls{from{transform:scale(1);opacity:.45}to{transform:scale(2.8);opacity:0}}
.verlauf{width:100%;height:auto;display:block}
.verlauf .s{fill:var(--goldf);fill-opacity:.75}.verlauf .s:hover{fill-opacity:1}
.verlauf .b{fill:none;stroke:var(--vio);stroke-width:2.2;stroke-linejoin:round}
.verlauf .z{fill:var(--ok)}
.verlauf .ax{stroke:var(--line2)}
.verlauf text,.heat text{fill:var(--mut);font-size:11px;font-family:var(--body)}
.legende{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:var(--fs-xs);color:var(--mut);margin:0}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:-8px}
.lg.s{background:var(--goldf)}.lg.b{background:var(--vio)}.lg.z{background:var(--ok);border-radius:50%}
/* Kennzahlen (src/kennzahlen/routen.ts): gestapelte Säulen Abo (gold) und einmalig (violett), unsichtbare Trefferfläche je Monat */
.verlauf .e{fill:var(--vio);fill-opacity:.7}.verlauf g:hover .e{fill-opacity:1}.verlauf g:hover .s{fill-opacity:1}
.verlauf .t{fill:transparent}.verlauf .gl{stroke:var(--line);stroke-dasharray:3 4}
.lg.e{background:var(--vio)}
.rang{list-style:none;margin:0;padding:10px 18px 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.rang li{display:grid;gap:5px}
.rz{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rn{min-width:0;overflow-wrap:anywhere;display:grid}
.rn small{color:var(--mut);font-size:var(--fs-xs)}
.weg{font-size:12px}
.anteil{width:100%;height:6px;display:block}
.anteil .bg{fill:var(--glass3)}.anteil .fg{fill:var(--gold)}
.heat{width:100%;max-width:520px;height:auto}
.heat .h{fill:var(--goldf)}.heat .h0{fill:var(--glass3)}
.card .bd .s svg{width:15px;height:15px;vertical-align:-3px;color:var(--ok)}

/* Webseiten und Projekte (src/webseiten/): Prüf-Streifen und Phasen */
.streifen{width:100%;height:22px;display:block}
.streifen .ok{fill:var(--ok);fill-opacity:.8}.streifen .bad{fill:var(--bad)}
.phasen{list-style:none;margin:0;padding:14px 18px 18px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;counter-reset:ph}
.phasen.sechs{grid-template-columns:repeat(6,minmax(0,1fr))}
.phasen li{display:grid;gap:4px;align-content:start;min-width:0;font-size:var(--fs-s);color:var(--mut)}
.phasen li::before{content:"";height:6px;border-radius:3px;background:var(--glass3)}
.phasen li b{color:var(--fg);font-weight:600;overflow-wrap:anywhere}
.phasen li small{font-size:var(--fs-xs);overflow-wrap:anywhere}
.phasen li.fertig::before{background:var(--ok)}
.phasen li.jetzt::before{background:var(--gold)}
.phasen li.jetzt b{color:var(--gold)}
.phasen li.spaet small{color:var(--bad);font-weight:600}
@media (max-width:700px){.phasen{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:12px}.phasen.sechs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:440px){.phasen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.oeffentlich .phasen{padding:6px 0 14px}

/* Kundenprüfung */
.pruef-titel{font-size:14px;margin:18px 0 8px}
.pruef-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.check.pruef{align-items:flex-start}
.check.pruef input{margin-top:2px;flex:none}
.check.pruef small{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.schritte{margin:0 0 10px;padding-left:20px;display:grid;gap:8px}

/* ===================================================================================================
   Darstellung je Benutzer (src/ui/darstellung.ts, Mein Konto → Darstellung)
   Die Werte stehen als data-Attribute am <html>: data-farbe, data-glas, data-bewegung, data-hintergrund,
   data-schrift, data-dichte; data-theme="light" schaltet die hellen Farben. Alle Farbthemen sind auf
   WCAG AA geprüft (Akzent auf Glas und auf Akzentfläche, Text auf Knopf), auch mit „Kristall“-Glas.
   Gerätewünsche („Bewegung reduzieren“, „Transparenz reduzieren“, „Mehr Kontrast“) haben immer Vorrang.
   =================================================================================================== */

/* Primärknopf über Tokens, damit die Farbthemen ihn mitfärben (Standard: Gold wie bisher) */
:root{--pri1:#FFC24D;--pri2:#FFA600;--pri-rand:rgba(255,214,140,.7);--pri-glow:rgba(255,166,0,.28);--reflex:rgba(255,255,255,.075)}
:root[data-theme="light"]{--reflex:rgba(255,255,255,.7)}
.btn.pri{background:linear-gradient(180deg,var(--pri1),var(--pri2));border-color:var(--pri-rand);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px var(--pri-glow)}

/* Farbthemen (nur Zentrale; GoldSum behält seine Markenfarben) */
:root[data-farbe="violett"]{--gold:#C9B8FF;--goldf:#9B80FF;--goldfg:#140D33;--goldbg:rgba(143,116,255,.2);--pri1:#BBA8FF;--pri2:#9B80FF;--pri-rand:rgba(187,168,255,.6);--pri-glow:rgba(155,128,255,.3);--vio:#FFC870;--viobg:rgba(255,166,0,.16);--blob1:rgba(143,116,255,.34);--blob2:rgba(255,166,0,.2);--blob3:rgba(190,90,255,.12)}
:root[data-farbe="violett"][data-theme="light"]{--gold:#5434CF;--goldf:#9B80FF;--goldfg:#140D33;--goldbg:rgba(116,87,245,.14);--pri1:#BBA8FF;--pri2:#9B80FF;--pri-rand:rgba(187,168,255,.6);--pri-glow:rgba(155,128,255,.3);--vio:#8A5000;--viobg:rgba(255,166,0,.2);--blob1:rgba(140,110,255,.3);--blob2:rgba(255,176,40,.24);--blob3:rgba(200,120,255,.12)}
:root[data-farbe="saphir"]{--gold:#8EC1FF;--goldf:#4D94FF;--goldfg:#06142A;--goldbg:rgba(77,148,255,.18);--pri1:#8CC0FF;--pri2:#4D94FF;--pri-rand:rgba(140,192,255,.6);--pri-glow:rgba(77,148,255,.3);--vio:#C4B4FF;--viobg:rgba(143,116,255,.17);--blob1:rgba(77,148,255,.28);--blob2:rgba(143,116,255,.26);--blob3:rgba(60,200,255,.1)}
:root[data-farbe="saphir"][data-theme="light"]{--gold:#1C55B3;--goldf:#4D94FF;--goldfg:#06142A;--goldbg:rgba(37,99,201,.13);--pri1:#8CC0FF;--pri2:#4D94FF;--pri-rand:rgba(140,192,255,.6);--pri-glow:rgba(77,148,255,.3);--vio:#4E31D2;--viobg:rgba(116,87,245,.14);--blob1:rgba(80,150,255,.28);--blob2:rgba(140,110,255,.22);--blob3:rgba(80,200,255,.12)}
:root[data-farbe="ozean"]{--gold:#5FD8E3;--goldf:#22B5C7;--goldfg:#03181B;--goldbg:rgba(34,181,199,.16);--pri1:#7BE4EE;--pri2:#22B5C7;--pri-rand:rgba(123,228,238,.6);--pri-glow:rgba(34,181,199,.3);--vio:#A9B8FF;--viobg:rgba(110,130,255,.2);--blob1:rgba(34,181,199,.26);--blob2:rgba(60,110,255,.24);--blob3:rgba(40,220,170,.1)}
:root[data-farbe="ozean"][data-theme="light"]{--gold:#0A6672;--goldf:#22B5C7;--goldfg:#03181B;--goldbg:rgba(20,150,165,.14);--pri1:#7BE4EE;--pri2:#22B5C7;--pri-rand:rgba(123,228,238,.6);--pri-glow:rgba(34,181,199,.3);--vio:#3B4FC4;--viobg:rgba(80,100,230,.12);--blob1:rgba(34,181,199,.26);--blob2:rgba(80,120,255,.2);--blob3:rgba(40,220,170,.12)}
:root[data-farbe="rose"]{--gold:#FF9DC4;--goldf:#F7609C;--goldfg:#2B0716;--goldbg:rgba(247,96,156,.17);--pri1:#FFA9CB;--pri2:#F7609C;--pri-rand:rgba(255,169,203,.6);--pri-glow:rgba(247,96,156,.3);--vio:#C3A8FF;--viobg:rgba(143,116,255,.2);--blob1:rgba(247,96,156,.24);--blob2:rgba(143,116,255,.26);--blob3:rgba(255,160,90,.12)}
:root[data-farbe="rose"][data-theme="light"]{--gold:#A61E58;--goldf:#F7609C;--goldfg:#2B0716;--goldbg:rgba(230,70,130,.12);--pri1:#FFA9CB;--pri2:#F7609C;--pri-rand:rgba(255,169,203,.6);--pri-glow:rgba(247,96,156,.3);--vio:#5034C9;--viobg:rgba(116,87,245,.13);--blob1:rgba(247,96,156,.22);--blob2:rgba(140,110,255,.2);--blob3:rgba(255,170,100,.14)}
:root[data-farbe="graphit"]{--gold:#E9E4DC;--goldf:#D9D3CA;--goldfg:#151310;--goldbg:rgba(255,255,255,.1);--pri1:#F4F0EA;--pri2:#CFC8BE;--pri-rand:rgba(244,240,234,.6);--pri-glow:rgba(207,200,190,.3);--vio:#AFC0D8;--viobg:rgba(150,170,200,.16);--blob1:rgba(255,255,255,.06);--blob2:rgba(140,150,170,.14);--blob3:rgba(255,255,255,.04)}
:root[data-farbe="graphit"][data-theme="light"]{--gold:#2C2823;--goldf:#3A3530;--goldfg:#FFFFFF;--goldbg:rgba(40,35,30,.08);--pri1:#4A443D;--pri2:#24201C;--pri-rand:rgba(0,0,0,.25);--pri-glow:rgba(0,0,0,.18);--vio:#3D5478;--viobg:rgba(60,84,120,.12);--blob1:rgba(0,0,0,.04);--blob2:rgba(120,135,160,.14);--blob3:rgba(255,255,255,0)}

/* Glas: Kristall (mehr Durchblick und Glanz) und Fest (ohne Transparenz, am schnellsten) */
:root[data-glas="stark"]{
  --glass:color-mix(in srgb,var(--glass-solid) 30%,transparent);
  --glass2:color-mix(in srgb,color-mix(in srgb,var(--glass-solid) 84%,var(--fg)) 46%,transparent);
  --glass3:color-mix(in srgb,color-mix(in srgb,var(--glass-solid) 76%,var(--fg)) 46%,transparent);
  --glass-side:color-mix(in srgb,var(--glass-solid) 32%,transparent);
  --blur:blur(40px) saturate(210%);--edge:rgba(255,255,255,.17);--edge2:rgba(255,255,255,.28);--hi:rgba(255,255,255,.26)
}
:root[data-glas="stark"][data-theme="light"]{--glass:rgba(255,255,255,.48);--glass2:rgba(255,255,255,.62);--glass3:rgba(255,255,255,.74);--glass-side:rgba(255,255,255,.42);--edge:rgba(255,255,255,.85);--edge2:#fff;--hi:#fff}
:root[data-glas="stark"] :is(.card,.kpis,.kz){background-image:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,0) 42%);box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px rgba(255,255,255,.03),var(--shadow-s)}
:root[data-glas="stark"][data-theme="light"] :is(.card,.kpis,.kz){background-image:linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,0) 45%)}
:root[data-glas="stark"] :is(.btn,.ibtn){box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 rgba(255,255,255,.04)}
:root[data-glas="fest"]{
  --glass:var(--glass-solid);--glass2:color-mix(in srgb,var(--glass-solid) 94%,var(--fg));--glass3:color-mix(in srgb,var(--glass-solid) 90%,var(--fg));
  --glass-side:color-mix(in srgb,var(--glass-solid) 55%,var(--bg));--blur:none
}
:root[data-glas="fest"][data-theme="light"]{--glass2:color-mix(in srgb,var(--glass-solid) 97%,var(--fg));--glass3:color-mix(in srgb,var(--glass-solid) 93%,var(--fg));--glass-side:var(--glass-solid)}

/* Hintergrund: schlicht ohne Lichtflecken oder langsam wandernd */
:root[data-hintergrund="schlicht"] body::before{background:var(--bg)}
:root[data-hintergrund="bewegt"] body::before{animation:treiben 46s ease-in-out infinite alternate;will-change:transform}
@keyframes treiben{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  35%{transform:translate3d(-4vmax,3vmax,0) scale(1.07) rotate(4deg)}
  70%{transform:translate3d(3vmax,-2vmax,0) scale(.97) rotate(-3deg)}
  100%{transform:translate3d(-2vmax,-3.5vmax,0) scale(1.05) rotate(2deg)}
}

/* Schriftgröße: Groß */
/* --plus und --plus-k legen bei Bauteilen mit eigener Schriftgröße (Knöpfe, Felder, Pillen …) etwas drauf.
   Früher stand hier calc(1em + …): 1em ist aber die Schrift der Eltern, dadurch wurden z. B. Spaltenköpfe und Pillen
   viel zu groß und Seiten ragten am kleinen Handy über. */
:root[data-schrift="gross"]{--fs:16px;--fs-s:14.5px;--fs-xs:13px;--plus:1.5px;--plus-k:1px}
@media (min-width:701px){:root[data-schrift="gross"] .kpi .v{font-size:33px}}
@media (max-width:700px){:root[data-schrift="gross"] .kpi .v{font-size:23px}}
@media (max-width:700px){:root[data-schrift="gross"]{--fs:17.5px;--fs-s:15.5px;--fs-xs:14px}}

/* Abstände: Kompakt (nur am PC, am Handy bleiben die Tippflächen groß) */
@media (min-width:701px){
  :root[data-dichte="kompakt"] .page{gap:14px;padding-block:16px 48px}
  :root[data-dichte="kompakt"] .grid{gap:14px}
  :root[data-dichte="kompakt"] .card>.hd{padding:10px 14px}
  :root[data-dichte="kompakt"] .card>.bd{padding:12px 14px;gap:9px}
  :root[data-dichte="kompakt"] .t th{padding:8px 12px}
  :root[data-dichte="kompakt"] .t td{padding:7px 12px}
  :root[data-dichte="kompakt"] .li{padding:8px 14px}
  :root[data-dichte="kompakt"] .kpi{padding:12px 16px}
  :root[data-dichte="kompakt"] .kpi .v{font-size:25px}
  :root[data-dichte="kompakt"] .nav{padding:6px 12px}
  :root[data-dichte="kompakt"] .btn{height:34px}
  :root[data-dichte="kompakt"] .top{padding-bottom:9px;padding-top:max(9px,env(safe-area-inset-top,0px))}
}

/* Bewegung. „Sanft“ (Standard): weiche Übergänge und ein kurzes Überblenden beim Seitenwechsel.
   „Voll“: zusätzlich Einblenden der Inhalte, Lichtreflex unter der Maus, gleitende Menü-Auswahl.
   „Aus“: nichts bewegt sich. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.15s}

/* Antippen am Handy: sofort sichtbare Rückmeldung statt grauem iOS-Kasten. iOS zeigt :active nur, wenn die Seite
   auf Berührungen hört (macht app.js). touch-action: kein Warten auf einen möglichen Doppeltipp, Zoomen mit zwei Fingern geht weiter. */
html{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:none){
  a.li:active,.t tbody tr:has(>td.first.nm>a):active,.nav:active,.side .foot .ich:active{background:var(--glass3)}
  .tabbar a:active,.tabbar label:active{background:var(--glass2)}
}

/* Seitenwechsel: dünner Balken oben, sobald ein Wechsel länger als einen Augenblick dauert (app.js setzt die Klasse). */
.ladebalken{position:fixed;z-index:300;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,var(--goldf),var(--vio));transition:opacity .2s}
:root.laedt .ladebalken{opacity:1;transform:scaleX(.6);animation:laden 10s cubic-bezier(.05,.7,.1,1) both}
@keyframes laden{from{transform:scaleX(.06)}to{transform:scaleX(.95)}}
:root[data-bewegung="aus"]::view-transition-group(*),:root[data-bewegung="aus"]::view-transition-old(*),:root[data-bewegung="aus"]::view-transition-new(*){animation:none!important}
:root[data-bewegung="aus"] *,:root[data-bewegung="aus"] *::before,:root[data-bewegung="aus"] *::after{transition:none!important;animation:none!important}

.btn,.ibtn{transition:border-color .15s,transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s,background-color .2s}
:root:not([data-bewegung="aus"]) :is(.btn,.ibtn):active:not([disabled]){transform:scale(.96)}
:root:not([data-bewegung="aus"]) .tabbar a:active svg,:root:not([data-bewegung="aus"]) .tabbar label:active svg{transform:scale(.88)}
.tabbar svg{transition:transform .15s}
:root:not([data-bewegung="aus"]) .page>.note{animation:einschweben .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes einschweben{from{opacity:0;transform:translateY(-6px)}}

/* „Sanft“ (Standard) und „Voll“: Beim Öffnen einer Seite gleiten die Inhalte kurz ein, Kacheln und Zeilen geben beim
   Antippen spürbar nach, die Auswahl in der Tableiste gleitet zum neuen Punkt. Nur transform und opacity, nur einmal beim
   Laden: Scrollen bleibt so flüssig wie vorher. „backwards“: Nach dem Einblenden bleibt keine Verschiebung stehen. */
:root:not([data-bewegung="aus"]) .page>:not(.note){animation:rein .38s cubic-bezier(.2,.8,.2,1) backwards}
:root:not([data-bewegung="aus"]) .page>:nth-child(2){animation-delay:.03s}
:root:not([data-bewegung="aus"]) .page>:nth-child(3){animation-delay:.06s}
:root:not([data-bewegung="aus"]) .page>:nth-child(4){animation-delay:.09s}
:root:not([data-bewegung="aus"]) .page>:nth-child(n+5){animation-delay:.12s}
@keyframes rein{from{opacity:0;transform:translateY(8px)}}
:root:not([data-bewegung="aus"]) :is(a.kz,a.kpi,a.li){transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .2s}
@media (hover:none){
  :root:not([data-bewegung="aus"]) :is(a.kz,a.kpi):active{transform:scale(.97)}
  :root:not([data-bewegung="aus"]) a.li:active{transform:scale(.99)}
}
:root:not([data-bewegung="aus"]) .tabbar .on{view-transition-name:tab-auswahl}

:root[data-bewegung="voll"] .page>:not(.note){animation:auftauchen .5s cubic-bezier(.2,.8,.2,1) backwards}
:root[data-bewegung="voll"] .page>*:nth-child(2){animation-delay:.04s}
:root[data-bewegung="voll"] .page>*:nth-child(3){animation-delay:.08s}
:root[data-bewegung="voll"] .page>*:nth-child(4){animation-delay:.12s}
:root[data-bewegung="voll"] .page>*:nth-child(5){animation-delay:.16s}
:root[data-bewegung="voll"] .page>*:nth-child(n+6){animation-delay:.2s}
:root[data-bewegung="voll"] .grid>*{animation:auftauchen .5s cubic-bezier(.2,.8,.2,1) backwards}
:root[data-bewegung="voll"] .grid>*:nth-child(2){animation-delay:.06s}
:root[data-bewegung="voll"] .grid>*:nth-child(3){animation-delay:.12s}
:root[data-bewegung="voll"] .grid>*:nth-child(n+4){animation-delay:.16s}
@keyframes auftauchen{from{opacity:0;transform:translateY(12px) scale(.985)}}
:root[data-bewegung="voll"] .btn:hover:not([disabled]){transform:translateY(-1px)}
:root[data-bewegung="voll"] .btn.pri:hover:not([disabled]){box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 28px var(--pri-glow)}
:root[data-bewegung="voll"] :is(a.kpi,a.li,.nav){transition:background-color .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
:root[data-bewegung="voll"] .nav:hover:not(.on):not(.spaeter){transform:translateX(3px)}
:root[data-bewegung="voll"] .nav.on{view-transition-name:menue-auswahl}
:root[data-bewegung="voll"] .tabbar .on{view-transition-name:tab-auswahl}
::view-transition-group(menue-auswahl),::view-transition-group(tab-auswahl){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
:root[data-bewegung="voll"]::view-transition-new(root){animation:.3s cubic-bezier(.2,.8,.2,1) both seite-rein}
:root[data-bewegung="voll"]::view-transition-old(root){animation:.16s ease both seite-raus}
@keyframes seite-rein{from{opacity:0}}
@keyframes seite-raus{to{opacity:0}}

/* Lichtreflex: ein weicher Lichtfleck folgt der Maus auf Glasflächen (Position setzt app.js als --mx/--my) */
:root[data-bewegung="voll"] :is(.card,.kpis,.kz){position:relative;isolation:isolate}
:root[data-bewegung="voll"] :is(.card,.kpis,.kz)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(540px circle at var(--mx,50%) var(--my,-300px),color-mix(in srgb,var(--goldf) 9%,var(--reflex)),transparent 46%)}
:root[data-bewegung="voll"] :is(.card,.kpis,.kz):hover::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  :root[data-bewegung="voll"] .btn:not(.pri):not(.ghost):hover{background-image:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),var(--reflex),transparent 70%)}
  :root[data-bewegung="voll"] .btn.pri:hover{background-image:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 70%),linear-gradient(180deg,var(--pri1),var(--pri2))}
}

/* Hell/Dunkel umschalten: Sonne im Dunkeln, Mond im Hellen; mit Animation deckt die neue Farbe kreisförmig vom Knopf her auf */
.thema svg+svg{display:none}
:root[data-theme="light"] .thema svg:first-child{display:none}
:root[data-theme="light"] .thema svg+svg{display:block}
:root.vt-thema .thema svg{animation:drehen .5s cubic-bezier(.2,.8,.2,1)}
@keyframes drehen{from{transform:rotate(-120deg) scale(.5);opacity:0}}
:root.vt-thema::view-transition-old(root){animation:none}
:root.vt-thema::view-transition-new(root){animation:aufdecken .6s cubic-bezier(.4,0,.2,1)}
@keyframes aufdecken{from{clip-path:circle(0 at var(--vt-x,100%) var(--vt-y,0))}to{clip-path:circle(150vmax at var(--vt-x,100%) var(--vt-y,0))}}
:root.wechsel,:root.wechsel *{transition:background-color .35s,color .35s,border-color .35s,fill .35s!important}

/* ----- Farbthemen aus einem Farbton (OKLCH, 10.11.2026) -----
   Smaragd, Limette, Nordlicht, Indigo, Rubin, Abendrot, Kupfer, Champagner und „Eigene Farbe“ entstehen aus einem Farbton (--ton)
   und einem zweiten für Hinweise und Lichtflecken (--ton2); --satt und --satt2 machen ein Thema ruhiger oder kräftiger.
   Helligkeit und Sättigung sind fest: In OKLCH heißt gleiche Helligkeit auch gleich gut lesbar. test/farben.test.ts prüft jeden
   Farbton von 0 bis 359 Grad, hell und dunkel, mit jedem Glas. Ohne OKLCH (sehr alte Browser) bleibt es bei Gold. */
@supports (color:oklch(0 0 0)){
  :root[data-farbe="smaragd"]{--ton:158;--ton2:85;--satt:1;--satt2:.8}
  :root[data-farbe="limette"]{--ton:128;--ton2:195;--satt:1;--satt2:.8}
  :root[data-farbe="nordlicht"]{--ton:168;--ton2:300;--satt:1;--satt2:1}
  :root[data-farbe="indigo"]{--ton:282;--ton2:205;--satt:1;--satt2:.8}
  :root[data-farbe="rubin"]{--ton:20;--ton2:80;--satt:1.1;--satt2:.8}
  :root[data-farbe="abendrot"]{--ton:52;--ton2:355;--satt:1.05;--satt2:1}
  :root[data-farbe="kupfer"]{--ton:48;--ton2:250;--satt:.9;--satt2:.7}
  :root[data-farbe="champagner"]{--ton:82;--ton2:35;--satt:.42;--satt2:.45}
  :root[data-farbe="eigen"]{--ton:265;--ton2:calc(var(--ton) + 150);--satt:1;--satt2:.85}
  :root[data-farbe="smaragd"],:root[data-farbe="limette"],:root[data-farbe="nordlicht"],:root[data-farbe="indigo"],:root[data-farbe="rubin"],
  :root[data-farbe="abendrot"],:root[data-farbe="kupfer"],:root[data-farbe="champagner"],:root[data-farbe="eigen"]{
    --gold:oklch(.84 calc(var(--satt) * .13) var(--ton));--goldf:oklch(.76 calc(var(--satt) * .15) var(--ton));--goldfg:oklch(.2 calc(var(--satt) * .04) var(--ton));
    --goldbg:oklch(.7 calc(var(--satt) * .15) var(--ton) / .18);
    --pri1:oklch(.87 calc(var(--satt) * .11) var(--ton));--pri2:oklch(.76 calc(var(--satt) * .15) var(--ton));
    --pri-rand:oklch(.92 calc(var(--satt) * .07) var(--ton) / .6);--pri-glow:oklch(.72 calc(var(--satt) * .16) var(--ton) / .3);
    --vio:oklch(.83 calc(var(--satt2) * .12) var(--ton2));--viobg:oklch(.66 calc(var(--satt2) * .15) var(--ton2) / .2);
    --blob1:oklch(.68 calc(var(--satt) * .17) var(--ton) / .3);--blob2:oklch(.6 calc(var(--satt2) * .17) var(--ton2) / .32);
    --blob3:oklch(.72 calc(var(--satt) * .12) calc(var(--ton) + 35) / .12)
  }
  :root[data-farbe="smaragd"][data-theme="light"],:root[data-farbe="limette"][data-theme="light"],:root[data-farbe="nordlicht"][data-theme="light"],
  :root[data-farbe="indigo"][data-theme="light"],:root[data-farbe="rubin"][data-theme="light"],:root[data-farbe="abendrot"][data-theme="light"],
  :root[data-farbe="kupfer"][data-theme="light"],:root[data-farbe="champagner"][data-theme="light"],:root[data-farbe="eigen"][data-theme="light"]{
    --gold:oklch(.44 calc(var(--satt) * .14) var(--ton));--goldbg:oklch(.72 calc(var(--satt) * .14) var(--ton) / .18);
    --pri-rand:oklch(.7 calc(var(--satt) * .1) var(--ton) / .55);--pri-glow:oklch(.65 calc(var(--satt) * .15) var(--ton) / .28);
    --vio:oklch(.44 calc(var(--satt2) * .15) var(--ton2));--viobg:oklch(.68 calc(var(--satt2) * .14) var(--ton2) / .15);
    --blob1:oklch(.8 calc(var(--satt) * .13) var(--ton) / .36);--blob2:oklch(.74 calc(var(--satt2) * .13) var(--ton2) / .28);
    --blob3:oklch(.82 calc(var(--satt) * .1) calc(var(--ton) + 35) / .16)
  }
}

/* Kontrast „Hoch“: feste Flächen, deutliche Ränder, graue Schrift fast so kräftig wie normale, Links unterstrichen.
   Steht nach dem Glas, damit es auch „Kristall“ schlägt. Die Akzentfarben bleiben, sie sind schon geprüft. */
:root[data-kontrast="hoch"]{--glass:var(--glass-solid);--glass2:color-mix(in srgb,var(--glass-solid) 91%,var(--fg));--glass3:color-mix(in srgb,var(--glass-solid) 84%,var(--fg));--glass-side:var(--glass-solid);--blur:none;
  --edge:rgba(255,255,255,.32);--edge2:rgba(255,255,255,.5);--hi:rgba(255,255,255,.14);--line:rgba(255,255,255,.2);--line2:rgba(255,255,255,.32);--fg:#FFFFFF;--fg2:#F2EDE6;--mut:#DCD5CB;--mut2:#CEC6BB}
:root[data-kontrast="hoch"][data-theme="light"]{--glass-solid:#FFFFFF;--glass:#FFFFFF;--glass2:#F2EFEA;--glass3:#E5E0D8;--glass-side:#FFFFFF;
  --edge:rgba(0,0,0,.34);--edge2:rgba(0,0,0,.5);--hi:rgba(255,255,255,.9);--line:rgba(0,0,0,.18);--line2:rgba(0,0,0,.3);--fg:#0B0907;--fg2:#1D1915;--mut:#38322B;--mut2:#443E36}
:root[data-kontrast="hoch"] :is(p,li,dd,td,.note,.hilfe,.sub,.small,.tipps) a:not([class]){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
:root[data-kontrast="hoch"] :focus-visible{outline-width:3.5px;outline-offset:3px}
:root[data-kontrast="hoch"] :is(.pill,.tag,.lizenz){box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 55%,transparent)}
:root[data-kontrast="hoch"] .tabbar{background:var(--glass-solid)}
:root[data-kontrast="hoch"] .t th{color:var(--fg2)}

/* Hintergrund „Raster“: feines Punktraster über den Lichtflecken (steht still, kostet nichts beim Scrollen) */
:root{--punkt:rgba(255,255,255,.08)}
:root[data-theme="light"]{--punkt:rgba(40,30,20,.13)}
:root[data-hintergrund="raster"] body::before{background:radial-gradient(circle,var(--punkt) 1.2px,transparent 1.8px) 0 0/24px 24px,
  radial-gradient(38vmax 34vmax at 88% 4%,var(--blob2),transparent 70%),radial-gradient(40vmax 32vmax at 6% 96%,var(--blob1),transparent 70%),radial-gradient(28vmax 24vmax at 50% 55%,var(--blob3),transparent 70%),var(--bg)}

/* Hintergrund „Tiefe“: drei weiche Glaskugeln schweben in verschiedenen Tiefen (perspective) langsam durch den Raum.
   Nur transform, je Kugel eine eigene Ebene: Der Grafikchip schiebt sie, Scrollen bleibt flüssig. Bei „Bewegung reduzieren“
   oder „Animationen: Aus“ stehen sie still. Die Kugeln sind so durchscheinend wie die Lichtflecken (Kontrast geprüft). */
:root{--kugel1:color-mix(in srgb,var(--goldf) 18%,transparent);--kugel2:color-mix(in srgb,var(--vio) 15%,transparent);--kugel3:color-mix(in srgb,var(--pri1) 13%,transparent);--kugel-licht:rgba(255,255,255,.08)}
:root[data-theme="light"]{--kugel1:color-mix(in srgb,var(--goldf) 28%,transparent);--kugel2:color-mix(in srgb,var(--vio) 16%,transparent);--kugel3:color-mix(in srgb,var(--pri1) 30%,transparent);--kugel-licht:rgba(255,255,255,.55)}
:root[data-farbe="graphit"][data-theme="light"]{--kugel1:rgba(255,255,255,.5);--kugel2:rgba(60,84,120,.1);--kugel3:rgba(255,255,255,.6)}
.tiefe{display:none}
:root[data-hintergrund="tiefe"] .tiefe{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:900px;perspective-origin:50% 35%}
:root[data-hintergrund="tiefe"] .tiefe i{position:absolute;border-radius:50%;will-change:transform;
  background:radial-gradient(circle at 35% 29%,var(--kugel-licht) 0,transparent 24%),radial-gradient(circle at 46% 42%,var(--k) 0,var(--k) 46%,transparent 70%)}
:root[data-hintergrund="tiefe"] .tiefe i:nth-child(1){--k:var(--kugel1);width:52vmax;height:52vmax;right:-16vmax;top:-18vmax;transform:translate3d(0,0,-160px);animation:schweben1 46s ease-in-out infinite alternate}
:root[data-hintergrund="tiefe"] .tiefe i:nth-child(2){--k:var(--kugel2);width:38vmax;height:38vmax;left:-14vmax;bottom:-12vmax;transform:translate3d(0,0,20px);animation:schweben2 54s ease-in-out infinite alternate}
:root[data-hintergrund="tiefe"] .tiefe i:nth-child(3){--k:var(--kugel3);width:20vmax;height:20vmax;left:46%;top:44%;transform:translate3d(0,0,120px);animation:schweben3 38s ease-in-out infinite alternate}
@keyframes schweben1{to{transform:translate3d(-9vmax,7vmax,90px) rotate(18deg)}}
@keyframes schweben2{to{transform:translate3d(11vmax,-8vmax,-180px) rotate(-14deg)}}
@keyframes schweben3{0%{transform:translate3d(0,0,120px)}50%{transform:translate3d(-16vmax,-10vmax,-120px)}to{transform:translate3d(10vmax,8vmax,60px)}}
:root[data-hintergrund="tiefe"] body::before{background:radial-gradient(40vmax 32vmax at 6% 96%,var(--blob1),transparent 70%),var(--bg)}
/* Mit Kristallglas wären die Kugeln unter Karten zu hell für graue Schrift: Das Glas wird hier etwas dichter. */
:root[data-hintergrund="tiefe"][data-glas="stark"]:not([data-kontrast="hoch"]){--glass:color-mix(in srgb,var(--glass-solid) 52%,transparent);--glass-side:color-mix(in srgb,var(--glass-solid) 54%,transparent);
  --glass2:color-mix(in srgb,color-mix(in srgb,var(--glass-solid) 93%,var(--fg)) 64%,transparent);--glass3:color-mix(in srgb,color-mix(in srgb,var(--glass-solid) 88%,var(--fg)) 66%,transparent)}
:root[data-hintergrund="tiefe"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]){--glass:rgba(255,255,255,.6);--glass2:rgba(255,255,255,.72);--glass3:rgba(255,255,255,.82);--glass-side:rgba(255,255,255,.56)}

/* Ecken: „Weich“ und „Eckig“ (Standard „Rund“ wie bisher). Karten, Knöpfe, Felder und Pillen folgen der Wahl. */
:root[data-ecken="weich"]{--r:14px;--r-s:10px;--r-k:11px;--r-p:8px}
:root[data-ecken="eckig"]{--r:6px;--r-s:5px;--r-k:6px;--r-p:4px}
@media (max-width:700px){:root[data-ecken="weich"]{--r:16px}:root[data-ecken="eckig"]{--r:7px}}
:root:is([data-ecken="weich"],[data-ecken="eckig"]) :is(.btn,.ibtn,.chip,.gsuche .inp,.suchgross .inp,.schrittleiste li,.tabbar a,.tabbar label,.stil){border-radius:var(--r-k)}
:root:is([data-ecken="weich"],[data-ecken="eckig"]) :is(.inp,.nav,.side .foot .ich,.li .ic,.wahl-k,.lw,.bereich,.anbieter-k,.firma-kachel,.geraete li,.bereit li,.codes,.geheim,.haken-gruppe .check,.msg,.note,.app-wege details,.email-technik,.wahl-karte,.wahl-ic,.ton-wahl,.stil-bild,.qr,.sig-vorschau){border-radius:var(--r-s)}
:root:is([data-ecken="weich"],[data-ecken="eckig"]) :is(.pill,.tag,.lizenz,.nav .cnt,.tabbar .cnt,kbd){border-radius:var(--r-p)}
:root:is([data-ecken="weich"],[data-ecken="eckig"]) :is(.card,.kpis,.kz,.lizenz-karte,.einzeln .card,.blatt,.ds-probe){border-radius:var(--r)}
:root:is([data-ecken="weich"],[data-ecken="eckig"]) .tabbar{border-radius:calc(var(--r-k) + 7px)}
@media (max-width:900px){:root:is([data-ecken="weich"],[data-ecken="eckig"]) .side{border-radius:0 var(--r) var(--r) 0}}

/* Schriftart: „System“ nimmt die Schrift des Geräts (San Francisco am iPhone und Mac, Segoe UI unter Windows) */
:root[data-schriftart="system"]{--body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* Schriftgröße „Sehr groß“: noch ein Stück größer als „Groß“, am Handy fast 20 px */
:root[data-schrift="sehrgross"]{--fs:17.5px;--fs-s:16px;--fs-xs:14.5px;--plus:2.5px;--plus-k:1.5px}
@media (min-width:701px){:root[data-schrift="sehrgross"] .kpi .v{font-size:34px}}
@media (max-width:700px){
  :root[data-schrift="sehrgross"]{--fs:19px;--fs-s:17px;--fs-xs:15.5px}
  :root[data-schrift="sehrgross"] .kpi .v{font-size:24px}
  :root[data-schrift="sehrgross"] .tabbar a span:not(.cnt),:root[data-schrift="sehrgross"] .tabbar label span{font-size:12.5px}
}

/* ----- 3D-Effekte (Einstellung „3D-Effekte“, data-raum) -----
   Dezent (Standard): Kacheln kippen leicht zur Maus (PC) oder geben unter dem Finger räumlich nach (Handy), Inhalte klappen
   beim Öffnen einer Seite sanft aus der Tiefe auf. Räumlich: größere Winkel, mehr Schwung, Symbole in der Tableiste drehen sich.
   Nur transform und opacity, nur bei :hover, :active und einmal beim Laden: Scrollen bleibt so flüssig wie vorher.
   Bei „Animationen: Aus“, „3D-Effekte: Aus“ oder „Bewegung reduzieren“ am Gerät bleibt alles flach. */
@media (prefers-reduced-motion:no-preference){
  :root:not([data-raum="aus"]):not([data-bewegung="aus"]) :is(a.kz,a.kpi,.wahl-karte,.anbieter-k,.firma-kachel,.lizenz-karte,label.wahl>.wahl-k,.stil,.ds-probe){
    transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .15s,background-color .2s,box-shadow .25s}
  @media (hover:hover) and (pointer:fine){
    :root:not([data-raum="aus"]):not([data-bewegung="aus"]) :is(a.kz,a.kpi,.wahl-karte,.anbieter-k,.firma-kachel,.lizenz-karte,.stil,.ds-probe):hover,
    :root:not([data-raum="aus"]):not([data-bewegung="aus"]) label.wahl:hover>.wahl-k{transform:perspective(800px) rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg)) translateY(-2px)}
    :root:not([data-raum="aus"]):not([data-bewegung="aus"]) .brand:hover svg{animation:logo-drehen .9s cubic-bezier(.3,.9,.3,1)}
  }
  @media (hover:none){
    :root:not([data-raum="aus"]):not([data-bewegung="aus"]) :is(a.kz,a.kpi,.wahl-karte,.anbieter-k,.firma-kachel,.lizenz-karte,.stil):active,
    :root:not([data-raum="aus"]):not([data-bewegung="aus"]) label.wahl:active>.wahl-k{transform:perspective(600px) rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg)) scale(.97)}
  }
  /* Beim Öffnen: Inhalte klappen von oben aus der Tiefe auf (Verzögerungen bleiben die von „Sanft“ und „Voll“) */
  :root[data-raum="dezent"]:not([data-bewegung="aus"]) .page>:not(.note){animation-name:rein-3d;animation-duration:.48s;transform-origin:50% 0}
  :root[data-raum="stark"]:not([data-bewegung="aus"]) .page>:not(.note){animation-name:aufklappen;animation-duration:.62s;transform-origin:50% 0}
  :root[data-raum="dezent"][data-bewegung="voll"] .grid>*{animation-name:rein-3d;animation-duration:.5s;transform-origin:50% 0}
  :root[data-raum="stark"][data-bewegung="voll"] .grid>*{animation-name:aufklappen;animation-duration:.62s;transform-origin:50% 0}
  :root[data-raum="stark"]:not([data-bewegung="aus"]) .tabbar .on svg{animation:tab-drehen .6s cubic-bezier(.3,1.3,.5,1) .05s backwards}
  :root[data-raum="stark"]:not([data-bewegung="aus"]) .stil.gewaehlt .stil-bild{animation:stil-dreh .6s cubic-bezier(.3,1.2,.5,1)}
}
@keyframes rein-3d{from{opacity:0;transform:perspective(1200px) rotateX(8deg) translateY(10px)}}
@keyframes aufklappen{from{opacity:0;transform:perspective(1000px) rotateX(16deg) translateY(20px) scale(.97)}}
@keyframes tab-drehen{from{transform:perspective(160px) rotateY(-180deg) scale(.7)}}
@keyframes logo-drehen{from{transform:perspective(240px) rotateY(0)}to{transform:perspective(240px) rotateY(360deg)}}
@keyframes stil-dreh{from{transform:perspective(200px) rotateY(-120deg)}}

/* Einstellungsseite Darstellung: links die Abschnitte, rechts die Vorschau (am PC mitlaufend). Am Handy steht die Vorschau oben. */
.ds-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:18px;align-items:start}
.ds-spalte{display:grid;gap:18px;min-width:0}
.ds-seite{display:grid;gap:18px;min-width:0;position:sticky;top:88px}
@media (max-width:1100px){
  .ds-raster{grid-template-columns:minmax(0,1fr)}
  .ds-seite{display:contents}
  .ds-vorschau{order:-1}
  .ds-tipps{order:1}
}
.darstellung .bd{gap:20px}
.ds-teil .hd h2{display:flex;align-items:center;gap:8px}
.ds-teil .hd h2 svg{color:var(--gold);width:18px;height:18px;margin:0}
.ds-unter{margin:-4px 0 -2px}
.ds-aktionen{align-items:center}
.wahlen{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.wahlen legend{font-weight:650;font-size:15px;padding:0;margin-bottom:2px}
.wahlen .hilfe{color:var(--mut);font-size:var(--fs-s);margin:-2px 0 2px}
.wahl-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wahl{position:relative;display:block;cursor:pointer}
.wahl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.wahl-k{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;align-content:center;min-height:56px;padding:10px 12px;border-radius:14px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);transition:border-color .15s,background-color .15s,box-shadow .2s}
.wahl-k b{grid-column:-2;font-size:14px;font-weight:600;line-height:1.25}
.wahl-k small{grid-column:-2;color:var(--mut);font-size:calc(12.5px + var(--plus-k,0px));line-height:1.3}
.wahl-k .muster{grid-row:span 2}
@media (hover:hover){.wahl:hover .wahl-k{border-color:var(--edge2)}}
/* Gewählt ist, was app.js als „an“ markiert (aus den Werten an <html>), nicht :checked: Safari am iPhone ließ beim
   Wechseln der Farbe die vorher gewählte Kachel markiert (Brian, 10.11.2026: „bleiben die Kästchen ausgewählt“). */
.wahl.an>.wahl-k{border-color:var(--gold);background:var(--goldbg);box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px var(--gold)}
.wahl input:focus-visible+.wahl-k{outline:2.5px solid var(--gold);outline-offset:2px}
/* Farbmuster als kleine Glaskugeln: Farbverlauf, Lichtpunkt oben links, Schatten unten rechts */
.muster{position:relative;width:30px;height:30px;border-radius:50%;flex:none;box-shadow:0 3px 9px rgba(0,0,0,.32)}
.muster::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.72),rgba(255,255,255,0) 42%);box-shadow:inset -3px -5px 9px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.35)}
.muster[data-muster="gold"]{background:conic-gradient(from 200deg,#FFC24D,#FFA600,#8F74FF,#FFC24D)}
.muster[data-muster="violett"]{background:conic-gradient(from 200deg,#BBA8FF,#7E5CF5,#FFB340,#BBA8FF)}
.muster[data-muster="saphir"]{background:conic-gradient(from 200deg,#8CC0FF,#2F77F0,#8F74FF,#8CC0FF)}
.muster[data-muster="ozean"]{background:conic-gradient(from 200deg,#7BE4EE,#159DB0,#4F6BFF,#7BE4EE)}
.muster[data-muster="rose"]{background:conic-gradient(from 200deg,#FFA9CB,#E84C8B,#8F74FF,#FFA9CB)}
.muster[data-muster="graphit"]{background:conic-gradient(from 200deg,#F4F0EA,#8E877D,#3A3530,#F4F0EA)}
.muster[data-muster="smaragd"]{background:conic-gradient(from 200deg,#7FE3B8,#12A06B,#D8B04A,#7FE3B8)}
.muster[data-muster="limette"]{background:conic-gradient(from 200deg,#D2F07A,#7DB31C,#3FB8B0,#D2F07A)}
.muster[data-muster="nordlicht"]{background:conic-gradient(from 200deg,#7AF0C8,#19B38A,#9D6BFF,#7AF0C8)}
.muster[data-muster="indigo"]{background:conic-gradient(from 200deg,#B4AEFF,#5B4BE0,#38B6D8,#B4AEFF)}
.muster[data-muster="rubin"]{background:conic-gradient(from 200deg,#FF9E9A,#D7263D,#E0A93A,#FF9E9A)}
.muster[data-muster="abendrot"]{background:conic-gradient(from 200deg,#FFC08A,#F2731C,#F0508C,#FFC08A)}
.muster[data-muster="kupfer"]{background:conic-gradient(from 200deg,#F7B98A,#C2662B,#4C6FB8,#F7B98A)}
.muster[data-muster="champagner"]{background:conic-gradient(from 200deg,#F1E2C2,#C2A773,#B98E7A,#F1E2C2)}
.muster[data-muster="eigen"]{background:conic-gradient(#FF6B6B,#FFB347,#F5E04A,#5FD068,#3FC1C9,#4F7BFF,#A35BFF,#FF5CC8,#FF6B6B)}
@supports (color:oklch(0 0 0)){
  .muster[data-muster="eigen"]{background:conic-gradient(oklch(.74 .16 0),oklch(.74 .16 60),oklch(.74 .16 120),oklch(.74 .16 180),oklch(.74 .16 240),oklch(.74 .16 300),oklch(.74 .16 360))}
}
/* Farbthemen am PC als Kacheln mit Erklärung, am Handy als Kugeln mit Namen (vier nebeneinander) */
.wahl-liste.farben{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
@media (max-width:700px){
  .wahl-liste.farben{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .farben .wahl-k{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:6px;padding:10px 4px 9px;min-height:0}
  .farben .wahl-k .muster{grid-row:auto;width:38px;height:38px}
  .farben .wahl-k b{grid-column:auto;font-size:12px;letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
  .farben .wahl-k small{display:none}
}
/* Eigene Farbe: Regenbogen-Regler. Die Helligkeit stellt die Zentrale selbst ein (OKLCH), darum bleibt jeder Farbton lesbar. */
.ton-wahl{display:grid;gap:8px;margin-top:4px;padding:12px 14px;border-radius:14px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi)}
:root[data-farbe="eigen"] .ton-wahl{border-color:var(--gold)}
.ton-titel{display:flex;gap:12px;align-items:center;cursor:pointer}
.ton-titel>span{display:grid;gap:1px;min-width:0}
.ton-titel b{font-size:14px;font-weight:600}
.ton-titel small{color:var(--mut);font-size:12.5px;line-height:1.35}
input.ton{-webkit-appearance:none;appearance:none;display:block;width:100%;height:40px;margin:0;background:transparent;cursor:pointer}
input.ton:focus{outline:none}
input.ton:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:99px}
input.ton::-webkit-slider-runnable-track{height:14px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 1px 2px rgba(0,0,0,.25);
  background:linear-gradient(90deg,#FF6B6B,#FFB347,#F5E04A,#5FD068,#3FC1C9,#4F7BFF,#A35BFF,#FF5CC8,#FF6B6B)}
input.ton::-moz-range-track{height:14px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);background:linear-gradient(90deg,#FF6B6B,#FFB347,#F5E04A,#5FD068,#3FC1C9,#4F7BFF,#A35BFF,#FF5CC8,#FF6B6B)}
input.ton::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ECE8E1);border:3px solid var(--goldf);box-shadow:0 3px 10px rgba(0,0,0,.4)}
input.ton::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--goldf);box-shadow:0 3px 10px rgba(0,0,0,.4)}
@supports (color:oklch(0 0 0)){
  input.ton::-webkit-slider-runnable-track{background:linear-gradient(90deg,oklch(.74 .15 0),oklch(.74 .15 45),oklch(.74 .15 90),oklch(.74 .15 135),oklch(.74 .15 180),oklch(.74 .15 225),oklch(.74 .15 270),oklch(.74 .15 315),oklch(.74 .15 359))}
  input.ton::-moz-range-track{background:linear-gradient(90deg,oklch(.74 .15 0),oklch(.74 .15 45),oklch(.74 .15 90),oklch(.74 .15 135),oklch(.74 .15 180),oklch(.74 .15 225),oklch(.74 .15 270),oklch(.74 .15 315),oklch(.74 .15 359))}
}
/* Fertige Stile: Kachel mit kleinem Bild aus Farbkugeln */
.stile{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.stil{display:flex;gap:12px;align-items:center;min-width:0;min-height:68px;padding:10px 12px;text-align:left;font:inherit;color:var(--fg);border-radius:16px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);cursor:pointer}
@media (hover:hover){.stil:hover{border-color:var(--edge2)}}
.stil.an{border-color:var(--gold);background:var(--goldbg);box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px var(--gold)}
.stil>span{display:grid;gap:2px;min-width:0}
.stil b{font-size:14.5px;font-weight:650}
.stil small{color:var(--mut);font-size:12.5px;line-height:1.3}
.stil.gewaehlt{border-color:var(--gold);box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px var(--gold)}
.stil-bild{position:relative;width:48px;height:48px;flex:none;border-radius:14px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px rgba(0,0,0,.28);background:var(--sb,#17130E)}
.stil-bild i{position:absolute;border-radius:50%}
.stil-bild i:nth-child(1){width:36px;height:36px;right:-8px;top:-8px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 30%),radial-gradient(circle,var(--s1) 40%,transparent 72%)}
.stil-bild i:nth-child(2){width:30px;height:30px;left:-6px;bottom:-6px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),transparent 30%),radial-gradient(circle,var(--s2) 40%,transparent 72%)}
.stil-bild i:nth-child(3){width:12px;height:12px;left:20px;top:20px;background:radial-gradient(circle at 35% 30%,#fff,var(--s1) 70%)}
[data-stil-bild="smelonetics"]{--sb:#17130E;--s1:#FFB42E;--s2:#8F74FF}
[data-stil-bild="tiefsee"]{--sb:#051419;--s1:#22C3D6;--s2:#3C6EFF}
[data-stil-bild="nordlicht"]{--sb:#08150F;--s1:#2FD6A0;--s2:#A06BFF}
[data-stil-bild="abendrot"]{--sb:#1B0D0A;--s1:#FF8A3D;--s2:#FF4F8B}
[data-stil-bild="buero"]{--sb:#2B2824;--s1:#D9D3CA;--s2:#8C96A8}
[data-stil-bild="lesen"]{--sb:#F7F4EF;--s1:#1C55B3;--s2:#2C2823}
@media (max-width:700px){
  .stile{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stil{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 11px 11px}
  .stil b{font-size:15px}
  .stil small{font-size:13px}
}
/* Tableiste am Handy: vier Plätze */
.tab-plaetze{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1300px){.tab-plaetze{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Vorschau: eine kleine Zentrale mit den gewählten Farben */
.ds-probe{display:grid;gap:12px;min-width:0}
.ds-probe-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ds-probe-kopf b{font-family:var(--display);font-size:18px;letter-spacing:-.02em}
.ds-probe-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ds-probe .kz{padding:12px 14px}
.ds-probe .kz-v{font-size:24px}
.ds-probe-liste{border:1px solid var(--edge);border-radius:var(--r-s);background:var(--glass)}
.ds-probe-liste .li{padding:11px 12px}
.ds-probe .row .btn{flex:0 1 auto}
.tipps{margin:0;padding-left:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;color:var(--fg2);font-size:var(--fs-s)}

/* Mein Konto: App auf Handy und PC */
.app-karte{display:grid;gap:12px}
/* Software herunterladen (src/software-routen.ts) */
.software{display:grid;gap:14px;max-width:640px}
.software p{margin:0;line-height:1.55}
.software-kopf{display:flex;gap:14px;align-items:center;min-width:0}
.software-kopf img{width:64px;height:64px;border-radius:16px;flex:none;display:block;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.software-kopf>div{display:grid;gap:3px;min-width:0}
.software-kopf b{font-size:17px}
.app-karte .note{margin:0}
.app-wege{display:grid;gap:6px}
.app-wege details{border:1px solid var(--edge);border-radius:14px;background:var(--glass2);padding:0 14px}
.app-wege summary{cursor:pointer;font-weight:600;padding:11px 0;list-style:none;display:flex;align-items:center;justify-content:space-between}
.app-wege summary::-webkit-details-marker{display:none}
.app-wege summary::after{content:"+";font-weight:400;color:var(--mut);font-size:18px;line-height:1}
.app-wege details[open] summary::after{content:"–"}
.app-wege ol{margin:0 0 12px;padding-left:20px;display:grid;gap:4px;font-size:var(--fs-s)}
.app-qr{display:flex;gap:14px;align-items:center}
.qr.klein{width:132px;padding:8px;margin:0;flex:none;border-radius:12px}
.qr.klein svg{display:block;width:100%;height:auto}
@media (max-width:700px){.app-qr{display:none}}
.side .foot .foot-acts{display:flex;flex-wrap:wrap;gap:6px}
.side .foot .foot-acts form{margin:0}

/* Als App: Platz für Statusleiste und Notch, auch am iPad. Im Hellen liegt hinter der weißen Uhrzeit ein dunkler Streifen. */
@media (min-width:701px){
  .top{padding-top:max(12px,env(safe-area-inset-top,0px))}
  main.einzeln{padding-top:max(32px,env(safe-area-inset-top,0px))}
}
.side{padding-top:calc(18px + env(safe-area-inset-top,0px))}
/* iPhone als App: iOS rechnet die Seitenhöhe ohne die Statusleiste. Ist eine Seite kürzer als der Bildschirm (Tickets ohne Einträge, Anmelden),
   hängen Tableiste und Farbgrund um genau diese Höhe zu weit oben und unten bleibt ein leerer Streifen. Darum reicht die Seite als App immer
   über den ganzen Bildschirm, und die Anmeldekarte steht in der Mitte des ganzen Bildschirms. */
@media (display-mode:standalone){
  html{min-height:calc(100% + env(safe-area-inset-top,0px))}
  .einzeln{min-height:calc(100dvh + env(safe-area-inset-top,0px))}
}
@media (display-mode:standalone){
  :root[data-theme="light"] body::after{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:#15120E;z-index:200;pointer-events:none}
}
/* iPhone und iPad als App (ab iOS 26): iOS legt eine weiche Unschärfe über den oberen Rand der App, von der Statusleiste bis
   etwa 40 pt darunter. Das lässt sich nicht abschalten, und alles, was dort steht, wird unscharf, auch der Seitentitel.
   Darum steht der Kopf als App etwas tiefer, ohne eigene Glasfläche, und scrollt mit dem Inhalt nach oben weg (wie die großen
   Titel in den Apps von Apple). Was dann unter die Statusleiste gleitet, verwischt iOS absichtlich. Das Menü beginnt ebenso
   tiefer. Nur auf iPhone und iPad (-webkit-touch-callout gibt es nur dort), am PC bleibt alles wie gewohnt. */
@media (display-mode:standalone){
  @supports (-webkit-touch-callout:none){
    :root .top,:root[data-dichte] .top{position:relative;padding-top:calc(env(safe-area-inset-top,0px) + 46px);background:transparent;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
    :root .side{padding-top:calc(env(safe-area-inset-top,0px) + 46px)}
    .zieh-neu{top:calc(env(safe-area-inset-top,0px) + 30px)}
  }
}

/* Gerätewünsche haben Vorrang vor der eigenen Wahl */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-glas]{--glass:var(--glass-solid);--glass2:color-mix(in srgb,var(--glass-solid) 94%,var(--fg));--glass3:color-mix(in srgb,var(--glass-solid) 90%,var(--fg));--glass-side:var(--glass-solid)}
}
@media (prefers-reduced-transparency:reduce){
  :root[data-glas],:root[data-glas][data-theme="light"]{--glass:var(--glass-solid);--glass2:color-mix(in srgb,var(--glass-solid) 94%,var(--fg));--glass3:color-mix(in srgb,var(--glass-solid) 90%,var(--fg));--glass-side:var(--glass-solid)}
  :root[data-glas] :is(.card,.kpis,.kz){background-image:none}
}
@media (prefers-reduced-motion:reduce){
  :root[data-hintergrund="bewegt"] body::before{animation:none}
  :root[data-bewegung] .page>*,:root[data-bewegung] .grid>*{animation:none}
}

/* Automatische Abrechnung (src/rechnungen/automatik-routen.ts) */
.auto-stand{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.auto-kopf{display:flex;gap:6px;flex-wrap:wrap}
.bereit{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.bereit li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--glass2);border:1px solid var(--edge);font-size:var(--fs-s)}
.bereit li>svg{width:17px;height:17px;flex:none}
.bereit li.ok>svg{color:var(--ok)}.bereit li.warn>svg{color:var(--warn)}
.bereit li>span{flex:1;min-width:0}
.bereit li .btn{flex:none}
.auto-einst .felder{grid-template-columns:minmax(0,1fr)}
.auto-jetzt{display:grid;gap:10px}
.auto-jetzt .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}

/* ---------- Anmeldung: Schritte, PIN, Auswahl des zweiten Schritts, Geräte ---------- */
.schrittleiste{display:flex;justify-content:center;gap:6px;margin:0 0 14px;padding:0;list-style:none;font-size:12.5px;color:var(--mut);flex-wrap:wrap}
.schrittleiste li{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:99px;background:var(--glass2);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi)}
.schrittleiste li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:11.5px;background:var(--glass3);color:var(--fg2)}
.schrittleiste li span svg{width:13px;height:13px}
.schrittleiste li.an{color:var(--fg);font-weight:600;border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.schrittleiste li.an span{background:linear-gradient(180deg,var(--pri1),var(--pri2));color:var(--goldfg)}
.schrittleiste li.fertig span{background:var(--okbg);color:var(--ok)}
.unter-links{text-align:center;margin:14px 0 0;font-size:13.5px}
.unter-links a{color:var(--mut);text-decoration:none}.unter-links a:hover{color:var(--gold)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-family:var(--display);letter-spacing:.02em;
  background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--gold) 40%,transparent),color-mix(in srgb,var(--vio) 34%,transparent));color:var(--fg);border:1px solid var(--edge2);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s)}
.avatar.gross{width:76px;height:76px;font-size:26px;margin:4px auto 2px}
.pin-form{text-align:center}
.pin-feld{position:relative;justify-items:center}
.pin-feld label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pin-feld .inp.pin{text-align:center;font-size:26px;letter-spacing:.6em;font-family:var(--mono);height:58px;max-width:240px;padding-left:.6em}
.pin-punkte{display:none}
.pin-unten{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.pin-unten form{margin:0}
.wahl{display:grid;gap:12px;margin-top:6px}
.wahl form{margin:0}
.wahl-karte{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:20px;border:1px solid var(--edge);
  background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s);color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s}
.wahl-karte:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent);transform:translateY(-1px)}
.wahl-karte b{display:block;font-size:15.5px}
.wahl-karte small{display:block;color:var(--mut);font-size:13px;line-height:1.45;margin-top:2px}
.wahl-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--goldbg);color:var(--gold);flex:none}
.wahl-ic svg{width:21px;height:21px}
@media (max-width:520px){.wahl-karte{grid-template-columns:auto minmax(0,1fr)}.wahl-karte .pill{grid-column:2;justify-self:start}}
.aktionen.zwei{justify-content:space-between;margin-top:4px}
.f.schmal{max-width:520px}
.sicherheit{display:grid;gap:14px}
.sicherheit .zeile{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sicherheit .dehn{flex:1 1 220px;min-width:0}
.sicherheit .dehn b{display:block}.sicherheit .dehn small{display:block;color:var(--mut);font-size:13px}
.unterkopf{margin:6px 0 0;font-size:13px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.geraete{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.geraete li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:14px;background:var(--glass2);border:1px solid var(--line);flex-wrap:wrap}
.geraete li>span{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.geraete li>span svg{width:17px;height:17px;color:var(--mut)}
.geraete li small{flex-basis:100%;color:var(--mut);font-size:12.5px;padding-left:25px}
.geraete form{margin:0}
/* Passkeys (Face ID): Trennlinie „oder“ auf der Anmeldeseite, Name ändern und Löschen in der Liste unter „Mein Konto“ */
.passkey-oder{display:flex;align-items:center;gap:10px;margin:0;color:var(--mut);font-size:12.5px}
.passkey-oder::before,.passkey-oder::after{content:"";flex:1 1 0;min-width:12px;height:1px;background:var(--line2)}
.passkey-aktionen{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;min-width:0}
.passkey-aktionen form{margin:0}
.umbenennen>summary{list-style:none}.umbenennen>summary::-webkit-details-marker{display:none}
.geraete li:has(.umbenennen[open]) .passkey-aktionen{flex-basis:100%}
.umbenennen[open]{flex:1 1 100%;min-width:0}
.umbenennen form{margin:2px 0 0}
@media print{.einzeln .card{box-shadow:none;border:0}.aktionen,.schrittleiste,.brand{display:none!important}body::before{display:none}.codes{border-color:#999}}

/* ---------- Lizenzen: Abzeichen neben dem Namen, Karten im Admin-Bereich ---------- */
:root{--lz-basic:#93E0D6;--lz-basicbg:rgba(90,200,185,.14);--lz-pro:var(--vio);--lz-probg:var(--viobg);--lz-max:var(--gold);--lz-maxbg:var(--goldbg)}
:root[data-theme="light"]{--lz-basic:#085E55;--lz-basicbg:rgba(20,150,135,.12)}
.lizenz{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px 2px 6px;border-radius:99px;vertical-align:1px;white-space:nowrap;
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);box-shadow:inset 0 1px 0 var(--hi)}
.lizenz svg{width:12px;height:12px}
.lizenz-basic{color:var(--lz-basic);background:var(--lz-basicbg)}
.lizenz-pro{color:var(--lz-pro);background:var(--lz-probg)}
.lizenz-max{color:var(--lz-max);background:linear-gradient(135deg,color-mix(in srgb,var(--goldf) 26%,transparent),color-mix(in srgb,var(--vio) 14%,transparent))}
.lizenz.gross{font-size:13px;padding:5px 12px 5px 9px;gap:6px}.lizenz.gross svg{width:15px;height:15px}
.ich b .lizenz{margin-left:4px}
.abschnitt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 2px -4px}
.abschnitt h2{font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.abschnitt p{margin:0}
.lizenz-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.lizenz-raster{grid-template-columns:minmax(0,1fr)}}
.lizenz-karte{position:relative;display:grid;gap:12px;align-content:start;padding:20px;border-radius:var(--r);background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s);overflow:clip}
.lizenz-karte::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--lk,var(--gold));opacity:.9}
.lizenz-karte.lz-basic{--lk:var(--lz-basic)}.lizenz-karte.lz-pro{--lk:var(--lz-pro)}.lizenz-karte.lz-max{--lk:linear-gradient(90deg,var(--goldf),var(--vio))}
.lk-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lk-anzahl{font-size:12.5px;color:var(--mut)}
.lk-preis{display:grid}
.lk-preis b{font-family:var(--display);font-size:28px;letter-spacing:-.03em;line-height:1.15}
.lk-preis span{font-size:12.5px;color:var(--mut)}
.lk-text{margin:0;color:var(--fg2);font-size:13.5px}
.lk-module{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;font-size:13px}
.lk-module li{display:flex;gap:6px;align-items:center;min-width:0}
.lk-module svg{width:14px;height:14px;flex:none}
.lk-module li.an svg{color:var(--ok)}
.lk-module li.aus{color:var(--mut2)}.lk-module li.aus svg{opacity:.6}
.personen td.first.nm a{display:flex;gap:10px;align-items:center}
.personen td.first.nm a>span:last-child{display:grid;gap:1px}
.personen .nm-zeile{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.personen .avatar{width:36px;height:36px;font-size:13px;flex:none}
.einladung-fertig{border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.einladung-fertig .bd{gap:14px}
.ef-kopf{display:flex;gap:14px;align-items:flex-start}
.ef-kopf h2{font-size:16px;margin:0 0 2px}.ef-kopf p{margin:0}
.wahl-ic.ok{background:var(--okbg);color:var(--ok)}
.ef-link{display:flex;gap:8px;flex-wrap:wrap}
.ef-link .inp{flex:1 1 260px;min-width:0;font-size:12.5px}
.ef-qr summary{cursor:pointer;color:var(--fg2);font-size:13.5px}
.ef-qr .qr{margin:10px 0 6px}
.lizenz-wahl,.bereiche{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.lizenz-wahl legend,.bereiche legend{font-size:13px;color:var(--fg2);font-weight:600;padding:0;margin-bottom:8px}
.lizenz-wahl{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.lizenz-wahl{grid-template-columns:minmax(0,1fr)}}
.lw{position:relative;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;border:1px solid var(--edge);background:var(--glass2);cursor:pointer;transition:border-color .15s}
.lw input{margin-top:3px;accent-color:var(--goldf)}
.lw>span{display:grid;gap:4px;justify-items:start}
.lw small{color:var(--mut);font-size:12.5px}
.lw:has(input:checked){border-color:color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--goldf) 14%,transparent)}
.bereich-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.bereich{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--glass2);cursor:pointer}
.bereich input{margin-top:3px;accent-color:var(--goldf)}
.bereich>span{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;align-items:center}
.bereich>span>svg{width:16px;height:16px;color:var(--mut)}
.bereich small{grid-column:2;color:var(--mut);font-size:12px;line-height:1.35}
.bereich:has(input:checked:not(:disabled)){border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.bereich.in-lizenz{opacity:.85;cursor:default}
.bereich.in-lizenz>span>svg{color:var(--ok)}
.person-kopf{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.person-kopf>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:0}
.person-kopf .avatar.gross{margin:0;width:60px;height:60px;font-size:21px}
.person-kopf .row{margin-top:6px}
.zugang-aktionen{display:flex;gap:8px;flex-wrap:wrap}
.zugang-aktionen form{margin:0}
.leer-lizenz .bd{justify-items:center;text-align:center;padding:40px 20px;gap:12px}
.leer-lizenz h2{font-family:var(--display);font-size:19px;margin:0}
.leer-lizenz p{max-width:480px;margin:0}
/* ===== E-Mail ===== (src/mail/: Versand, E-Mail verbinden, Anleitung, Signatur-Vorschau) */
.card>form>.bd{padding:16px 18px;display:grid;gap:12px}
.anbieter{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.anbieter-k{display:grid;gap:2px;min-height:64px;align-content:center;padding:11px 14px;border-radius:16px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);color:var(--fg);text-decoration:none;transition:border-color .15s,background-color .15s}
.anbieter-k b{font-size:15.5px;font-weight:650}
.anbieter-k small{color:var(--mut);font-size:12.5px;overflow-wrap:anywhere}
.anbieter-k:hover{border-color:var(--edge2)}
.anbieter-k.on{border-color:var(--gold);background:var(--goldbg);box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px var(--gold)}
.email-technik{border:1px solid var(--edge);border-radius:14px;background:var(--glass2);padding:0 14px}
.email-technik summary{cursor:pointer;font-weight:600;padding:11px 0;font-size:var(--fs-s)}
.email-technik[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.email-technik .felder{padding-bottom:14px}
.email-neu{border-top:1px solid var(--line)}
.email-neu .zw{margin:0}
.email-knoepfe{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line)}
.email-knoepfe form{margin:0;min-width:0;max-width:100%}
.email-knoepfe .note{flex:1 1 100%}
.email-fehler{color:var(--bad)!important;font-weight:500;white-space:normal}
.email-fuss{padding:12px 18px 16px}
.email-absender .rt{flex-direction:row;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Signatur-Vorschau: wie in der E-Mail, aber mit App-Farben (hell und dunkel lesbar) */
.sig-vorschau{display:grid;gap:12px;padding:16px;border:1px dashed var(--line2);border-radius:var(--r-s);background:var(--glass2)}
.sig-kopf{display:flex;gap:14px;align-items:flex-start}
.sig-logo svg{width:52px;height:52px;display:block;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.sig-text{display:grid;gap:1px;padding-left:14px;border-left:2px solid var(--goldf);min-width:0;font-size:var(--fs-s);line-height:1.4}
.sig-name{font-size:15px;color:var(--fg)}
.sig-zusatz,.sig-adresse{color:var(--mut);white-space:pre-line}
.sig-firma{color:var(--mut);padding-top:5px}
.sig-firma b{color:var(--gold)}
.sig-kontakt{display:flex;flex-wrap:wrap;gap:2px 8px;color:var(--gold);overflow-wrap:anywhere}
.sig-kontakt i{font-style:normal;color:var(--mut2)}
.sig-hinweis{font-size:11.5px;line-height:1.45;color:var(--mut);max-width:62ch}

/* Anleitung: große, gut lesbare Schritte mit Nummern */
.anl{display:grid;gap:16px;max-width:920px}
.anl-gross{font-size:16px;line-height:1.55;color:var(--fg)}
.anl-schritte{list-style:none;counter-reset:schritt;margin:0;padding:0;display:grid;gap:10px}
.anl-schritte>li{counter-increment:schritt;position:relative;padding:3px 0 3px 46px;min-height:34px;font-size:15px;line-height:1.5;color:var(--fg2)}
.anl-schritte>li::before{content:counter(schritt);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--goldfg);background:linear-gradient(180deg,var(--pri1),var(--pri2));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 12px var(--pri-glow)}
.anl-schritte b{color:var(--fg)}
.anl-schritte,.anl-liste{min-width:0}
.anl-schritte>li,.anl-liste>li,.anl-zitat{overflow-wrap:anywhere}
.anl-liste{margin:0;padding-left:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;font-size:15px;line-height:1.5;color:var(--fg2)}
.anl-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.anl-sprung .chip{text-decoration:none;color:var(--fg)}
.anl-sprung .chip:hover{border-color:var(--edge2)}
.anl-zitat{margin:0;padding:12px 14px;border-left:3px solid var(--goldf);background:var(--glass2);border-radius:0 var(--r-s) var(--r-s) 0;font-size:var(--fs-s);color:var(--fg2)}
.anl-karte{scroll-margin-top:90px}
.anl-karte .bd>p{line-height:1.55}
@media (max-width:700px){
  .anbieter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anbieter-k{min-height:70px}
  .anl-gross{font-size:17px}
  .anl-schritte>li{font-size:16.5px;padding-left:48px}
  .anl-liste{font-size:16.5px}
  .sig-kopf{flex-direction:column}
  .sig-text{padding-left:12px}
  .email-knoepfe .btn{flex:1 1 auto}
}

.card>.hd h2 svg{width:17px;height:17px;vertical-align:-3px;margin-right:2px}

/* ===== Absender-Firmen ===== */
/* Firmenwahl im Rechnungseditor: große Kacheln zum Antippen, Logo oder Anfangsbuchstabe. */
.firmenwahl{border:0;margin:0 0 6px;padding:0;min-width:0}
.firmenwahl legend{font-weight:600;font-size:15px;margin-bottom:8px;padding:0}
.firmenwahl legend i{color:var(--bad);font-style:normal}
.firmen-kacheln{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.firma-kachel{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-s);border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);cursor:pointer;min-height:64px;transition:border-color .15s,background .15s}
.firma-kachel:hover{background:var(--glass3)}
.firma-kachel input{position:absolute;opacity:0;pointer-events:none}
.firma-kachel:has(input:checked){border-color:var(--goldf);background:var(--goldbg);box-shadow:inset 0 0 0 1px var(--goldf)}
.firma-kachel:has(input:focus-visible){outline:2px solid var(--goldf);outline-offset:2px}
.firma-kachel span{display:flex;flex-direction:column;min-width:0}
.firma-kachel b{font-size:15px}
.firma-kachel small,.firma-fest small{color:var(--mut);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.firma-fest{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.firma-fest span{display:flex;flex-direction:column}
.firma-logo{width:48px;height:48px;object-fit:contain;border-radius:10px;background:#fff;padding:4px;flex:none;border:1px solid var(--edge)}
.firma-zeichen{width:48px;height:48px;border-radius:12px;flex:none;display:inline-grid;place-items:center;font-weight:700;font-size:20px;background:var(--goldbg);color:var(--gold);border:1px solid var(--edge)}
.firma-logo.klein,.firma-zeichen.klein{width:26px;height:26px;font-size:13px;border-radius:7px;padding:2px}
/* Logos sind meist quer (Zeichen und Schriftzug): in der Firmenwahl breiter, damit man sie erkennt. */
:is(.firma-kachel,.firma-fest)>.firma-logo{width:88px}
.von-firma{display:inline-flex;align-items:center;gap:8px}
/* Firmenkarten */
.firmen-karten{align-items:start}
.firma-karte .bd{display:grid;gap:12px}
.firma-karte.archiv{opacity:.7}
.firma-kopf{display:flex;align-items:center;gap:12px}
.firma-kopf>div{flex:1;min-width:0}
.firma-kopf h2{font-size:17px;margin:0}
.firma-kopf p{margin:2px 0 0}
.logo-vorschau{display:flex;justify-content:center;padding:6px 0 12px}
.logo-vorschau .firma-logo{width:160px;height:90px}
/* Farben zum Antippen (feste Farben je Knopf, keine Inline-Stile) */
.farbwahl-liste{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.farbwahl{width:44px;height:44px;border-radius:12px;border:2px solid var(--edge2);cursor:pointer;padding:0;box-shadow:var(--shadow-s)}
.farbwahl:focus-visible{outline:2px solid var(--goldf);outline-offset:2px}
.fw-nacht{background:linear-gradient(135deg,#1F3A5F 60%,#B8892B 60%)}
.fw-petrol{background:linear-gradient(135deg,#0F5E63 60%,#E0A526 60%)}
.fw-gruen{background:linear-gradient(135deg,#2E6B3A 60%,#9BBF3B 60%)}
.fw-himmel{background:linear-gradient(135deg,#1565C0 60%,#29B6F6 60%)}
.fw-bordeaux{background:linear-gradient(135deg,#7B1E3A 60%,#C9A227 60%)}
.fw-anthrazit{background:linear-gradient(135deg,#2F3437 60%,#E07A1F 60%)}
.fw-violett{background:linear-gradient(135deg,#4B2E83 60%,#D4A017 60%)}
.fw-schwarz{background:linear-gradient(135deg,#0B0A09 60%,#B8892B 60%)}
.firma-form input[type=color].inp{height:46px;padding:4px;cursor:pointer}
.nutzer-wahl{display:grid;gap:6px}
.nummer-beispiel{margin:0;font-size:14px}
/* Weitere Angaben aufklappen */
details.mehr{border:1px solid var(--edge);border-radius:var(--r-s);background:var(--glass2);padding:0 14px;margin:12px 0}
details.mehr>summary{cursor:pointer;font-weight:600;padding:11px 0;list-style:none;display:flex;align-items:center;justify-content:space-between}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary::after{content:"+";font-weight:400;color:var(--mut);font-size:18px;line-height:1}
details.mehr[open]>summary::after{content:"–"}
/* Automatisierung: Mahnstufen, Ereignisliste, Abo-Einnahmen */
fieldset.stufe{border:1px solid var(--edge);border-radius:var(--r-s);background:var(--glass2);padding:10px 14px 4px;margin:14px 0 0;min-width:0}
fieldset.stufe>legend{font-weight:650;font-size:15px;padding:0 6px;color:var(--fg)}
.ereignisse{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.ereignisse li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;padding:10px 0;border-top:1px solid var(--line);font-size:var(--fs-s)}
.ereignisse li:first-child{border-top:0;padding-top:2px}
.ereignisse li>span{min-width:0;overflow-wrap:anywhere}
.ereignisse li>:is(time,.btn){grid-column:2;justify-self:start}
.balken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.balken li{display:grid;grid-template-columns:3.4em minmax(0,1fr) auto;gap:10px;align-items:center;font-size:var(--fs-s)}
.balken li>span{color:var(--mut)}
details.mehr[open]>.felder,details.mehr[open]>form.f{padding-bottom:14px}
.empf-frei details.mehr{margin:0}
.pos-einfach textarea.inp{min-height:44px;resize:vertical}
.firmen-filter{margin-bottom:0}
@media (max-width:720px){
  .firmen-kacheln{grid-template-columns:minmax(0,1fr)}
  .firma-kachel{min-height:58px}
  .farbwahl{width:48px;height:48px}
}


/* ===== Aufgaben ===== (src/aufgaben/: Checkliste mit Priorität, Benachrichtigungen auf dem Gerät)
   Priorität als Farbe über --prio: hoch rot, mittel orange, niedrig blau; erledigt grün. */
:is(.aufg-k,.aufg-prio label,.aufg-kurz li,.aufg-chip,.aufg-hb-zeile,.aufg-last rect)[data-prio="hoch"]{--prio:var(--bad);--priobg:var(--badbg)}
:is(.aufg-k,.aufg-prio label,.aufg-kurz li,.aufg-chip,.aufg-hb-zeile,.aufg-last rect)[data-prio="mittel"]{--prio:var(--warn);--priobg:var(--warnbg)}
:is(.aufg-k,.aufg-prio label,.aufg-kurz li,.aufg-chip,.aufg-hb-zeile,.aufg-last rect)[data-prio="niedrig"]{--prio:var(--info);--priobg:var(--infobg)}

/* Schnell eintragen */
.aufg-neu{padding:14px;display:grid;gap:10px}
.aufg-neu-zeile{display:flex;gap:8px;align-items:center}
.aufg-neu-zeile .inp{flex:1;min-width:0;height:46px;padding:0 18px;border-radius:99px;font-size:15.5px}
.aufg-neu-zeile .btn{height:46px;flex:none}
.aufg-neu-zeile.mit-fehler .inp{border-color:var(--bad)}
.aufg-neu>.fehler{font-size:12.5px;color:var(--bad);font-weight:600;padding-left:18px;margin-top:-4px}
.aufg-neu-opt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.aufg-prio{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.aufg-prio-l{font-size:var(--fs-s);font-weight:600;color:var(--mut);margin-right:2px}
.aufg-prio label{position:relative;cursor:pointer}
.aufg-prio input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.aufg-prio label span{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);font-size:13px;font-weight:600;color:var(--fg2);transition:background-color .15s,border-color .15s,color .15s}
.aufg-prio label span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--prio)}
.aufg-prio label:hover span{border-color:var(--edge2)}
.aufg-prio input:checked+span{background:var(--priobg);border-color:color-mix(in srgb,var(--prio) 55%,transparent);color:var(--fg);box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px color-mix(in srgb,var(--prio) 35%,transparent)}
.aufg-prio input:focus-visible+span{outline:2.5px solid var(--gold);outline-offset:2px}
.aufg-mehr{flex:1 1 200px;min-width:0}
.aufg-mehr[open]{flex-basis:100%}
.aufg-mehr>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 4px;border-radius:8px;font-size:var(--fs-s);font-weight:600;color:var(--mut)}
.aufg-mehr>summary::-webkit-details-marker{display:none}
.aufg-mehr>summary svg{width:15px;height:15px}
.aufg-mehr>summary:hover,.aufg-mehr[open]>summary{color:var(--fg)}
.aufg-mehr[open]>summary{margin-bottom:10px}
.aufg-label{font-size:13px;font-weight:600;color:var(--fg2)}
.aufg-form .aufg-prio-l{display:none}
:is(.aufg-neu,.aufg-form) .felder .field{align-content:start}

.aufg-zahl{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:99px;background:var(--glass3);color:var(--mut);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.aufg-punkt{width:10px;height:10px;border-radius:50%;flex:none;background:var(--prio,var(--mut2));box-shadow:0 0 0 4px var(--priobg,transparent)}
.aufg-kreis{width:40px;height:40px;margin:-7px 0;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;color:inherit}
.aufg-kreis>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--prio,var(--mut2));background:color-mix(in srgb,var(--prio,var(--mut2)) 9%,transparent);color:transparent;transition:background-color .18s,border-color .18s,color .18s,transform .2s cubic-bezier(.2,.8,.2,1)}
.aufg-kreis svg{width:15px;height:15px;stroke-width:3}
.aufg-kreis:hover>span{background:var(--priobg,var(--glass3));color:var(--prio,var(--mut))}
.aufg-kreis:focus-visible{outline:none}
.aufg-kreis:focus-visible>span{outline:2.5px solid var(--gold);outline-offset:3px}
@keyframes aufg-haken{45%{transform:scale(1.2)}}
.aufg-tx::after{content:"";position:absolute;inset:0}
.aufg-tx:focus-visible{outline:none}
.aufg-tx:focus-visible::after{outline:2.5px solid var(--gold);outline-offset:-3px;border-radius:12px}
.aufg-notiz{color:var(--mut);font-size:var(--fs-s);line-height:1.45;white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.aufg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:3px}
.aufg-wer{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--mut)}
.aufg-wer svg{width:13px;height:13px}

/* Personen-Farben (fest nach Anlage-Reihenfolge, src/aufgaben/routen.ts spaltenLeute). Geprüft auf Farbsehschwäche,
   hell und dunkel (dataviz-Prüfung 11.11.2026). Für alle und Ehemalige grau. */
.aufg-seite,.aufg-dock{--pf0:#C98400;--pf1:#8E70FA;--pf2:#1FA870;--pf3:#3D86E8}
:root[data-theme="light"] :is(.aufg-seite,.aufg-dock){--pf0:#B06F00;--pf1:#7454E6;--pf2:#0F8456;--pf3:#2F6FD8}
[data-pf]{--pf:var(--mut2)}
[data-pf="0"]{--pf:var(--pf0)}[data-pf="1"]{--pf:var(--pf1)}[data-pf="2"]{--pf:var(--pf2)}[data-pf="3"]{--pf:var(--pf3)}[data-pf="ok"]{--pf:var(--ok)}
[data-pf="alle"],[data-pf="x"]{--pf:color-mix(in srgb,var(--mut2) 62%,transparent)}

/* ----- Statistik oben (Entwurf „Cockpit“, src/aufgaben/statistik.ts) ----- */
.aufg-stat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1.12fr);gap:18px}
@media (min-width:701px) and (max-width:1180px){.aufg-stat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.aufg-s>.hd h2{display:flex;align-items:center;gap:8px;min-width:0}
.aufg-s>.hd h2>svg{width:17px;height:17px;color:var(--gold);flex:none}
.aufg-s-r{font-size:var(--fs-s);font-weight:600;color:var(--mut);white-space:nowrap}
.aufg-s-r .trend{font-variant-numeric:tabular-nums}
.card>.bd.aufg-ring-wrap{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
.aufg-ring{position:relative;width:110px;height:110px;flex:none}
.aufg-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.aufg-ring circle{fill:none;stroke-width:11}
.aufg-ring .spur{stroke:var(--glass3)}
.aufg-ring .bogen{stroke:var(--goldf);stroke-linecap:round}
.aufg-ring-mitte{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.aufg-ring-mitte b{font:700 calc(25px + var(--plus,0px)) var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.aufg-ring-mitte>span{font-size:12px;color:var(--mut);font-weight:600}
@media (max-width:380px){.card>.bd.aufg-ring-wrap{gap:12px}.aufg-ring{width:84px;height:84px}.aufg-ring-mitte b{font-size:calc(19px + var(--plus,0px))}.aufg-ring-mitte>span{font-size:11px}.aufg-ring-wrap .aufg-leg{font-size:calc(13px + var(--plus,0px));gap:6px}}
.aufg-leg,.aufg-bahn-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:calc(13.5px + var(--plus,0px));color:var(--fg2)}
.aufg-leg li,.aufg-bahn-liste li{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.aufg-leg b,.aufg-bahn-liste b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:650;color:var(--fg)}
.aufg-pkt{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;background:var(--c,var(--mut2))}
.aufg-pkt.gold{--c:var(--goldf)}.aufg-pkt.grau{--c:var(--glass3);box-shadow:inset 0 0 0 1.5px var(--line2)}.aufg-pkt.bad,.aufg-pkt.b-ueber{--c:var(--bad)}.aufg-pkt.warn,.aufg-pkt.b-heute{--c:var(--warn)}
.aufg-pkt.b-woche{--c:var(--info)}.aufg-pkt.b-spaeter{--c:var(--vio)}.aufg-pkt.b-ohne{--c:color-mix(in srgb,var(--mut2) 45%,transparent)}.aufg-pkt.pf{--c:var(--pf)}
/* Säulen und Linie: SVG 300 × 140, Zahlen der Hilfslinien als HTML links daneben (gleiche Höhe wie im viewBox) */
.aufg-dia{position:relative;margin-left:22px}
.aufg-dia svg{display:block;width:100%;height:auto;overflow:visible}
.aufg-tick{position:absolute;right:calc(100% + 7px);font-size:11px;line-height:1;color:var(--mut2);font-variant-numeric:tabular-nums;transform:translateY(50%)}
.aufg-tick.t0{bottom:0}.aufg-tick.t50{bottom:47.14%}.aufg-tick.t100{bottom:94.29%}
.aufg-dia .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.aufg-dia .gl.basis{stroke:var(--line2);stroke-dasharray:none}
.aufg-band .hit{fill:transparent}
.aufg-band .s{fill:var(--goldf);fill-opacity:.42;transition:fill-opacity .2s}
.aufg-band.jetzt .s{fill-opacity:1}
.aufg-band:hover .s{fill-opacity:.7}.aufg-band.jetzt:hover .s{fill-opacity:1}
.aufg-dia .fl{fill:var(--goldf);fill-opacity:.12}
.aufg-dia .ln{fill:none;stroke:var(--goldf);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.aufg-dia .ende{fill:var(--goldf);stroke:var(--glass-solid);stroke-width:2.5}
.aufg-dia .fk{stroke:var(--mut2);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.aufg-dia .fk-p{fill:var(--glass-solid);stroke:var(--goldf);stroke-width:2.2}
[data-verlauf]{touch-action:pan-y}
.aufg-achse{display:grid;margin:8px 0 0 22px;font-size:11.5px;color:var(--mut2);font-variant-numeric:tabular-nums}
.aufg-achse.n6{grid-template-columns:repeat(6,minmax(0,1fr));text-align:center}
.aufg-achse.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.aufg-achse.n3>:nth-child(2){text-align:center}
.aufg-achse.n3>:last-child{text-align:right}
.aufg-achse .jetzt,.aufg-achse.n3>:last-child{color:var(--fg);font-weight:650}
/* Waagerechte Balken (SVG 300 × 10) */
.aufg-hb{display:grid;gap:13px}
.aufg-hb-zeile{display:grid;gap:6px;min-width:0}
.aufg-hb-kopf{display:flex;align-items:center;gap:8px;font-size:calc(13.5px + var(--plus,0px));font-weight:600;min-width:0}
.aufg-hb-kopf .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aufg-hb-kopf .n{margin-left:auto;padding-left:8px;font-size:12.5px;color:var(--mut);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.aufg-hb-kopf .aufg-punkt{width:9px;height:9px;box-shadow:none}
.aufg-spur{display:block;width:100%;height:10px;overflow:visible}
.aufg-spur .bg{fill:var(--glass3)}
.aufg-spur .voll{fill:var(--prio)}
.aufg-spur .hell{fill:var(--prio);fill-opacity:.38}
.aufg-spur .pf{fill:var(--pf)}
.aufg-spur .pf-0{fill:var(--pf0)}.aufg-spur .pf-1{fill:var(--pf1)}.aufg-spur .pf-2{fill:var(--pf2)}.aufg-spur .pf-3{fill:var(--pf3)}.aufg-spur .pf-x{fill:var(--mut2)}
.aufg-spur .b-ueber{fill:var(--bad)}.aufg-spur .b-heute{fill:var(--warn)}.aufg-spur .b-woche{fill:var(--info)}.aufg-spur .b-spaeter{fill:var(--vio)}.aufg-spur .b-ohne{fill:color-mix(in srgb,var(--mut2) 45%,transparent)}
.aufg-mini-leg{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--mut)}
.aufg-mini-leg span{display:inline-flex;align-items:center;gap:6px}
.aufg-mini-leg i{width:10px;height:10px;border-radius:3px;background:var(--fg2)}
.aufg-mini-leg i.hell{background:color-mix(in srgb,var(--fg2) 38%,transparent)}
.aufg-anteil{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.aufg-anteil small{font-size:12.5px;font-weight:600;color:var(--mut)}
.aufg-anteil-spur .aufg-spur,.aufg-bahn-spur .aufg-spur{height:14px}
.aufg-anteil-txt{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;font-weight:600}
.aufg-anteil-txt span{display:inline-flex;align-items:center;gap:6px}
.aufg-hb-zeile .avatar.mini,.aufg-alle.mini{width:20px;height:20px}
.avatar.aufg-alle{background:var(--glass3);color:var(--mut);border:0}
.avatar.aufg-alle svg{width:58%;height:58%}
.avatar.aufg-ok-bild{background:var(--okbg);color:var(--ok);border:0}
.avatar.aufg-ok-bild svg{width:55%;height:55%;stroke-width:2.6}
/* Punkte unter der Statistik am Handy (wo die Karten nebeneinander wischen) */
.aufg-punkte{display:none}

/* ----- Leiste über dem Board: Filter nach Priorität und Hinweis zum Ziehen ----- */
.aufg-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.aufg-chips{display:flex;flex-wrap:wrap;gap:6px}
.aufg-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 8px 0 13px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);color:var(--fg2);font-weight:600;font-size:calc(13px + var(--plus,0px));text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.aufg-chip:hover{border-color:var(--edge2);color:var(--fg)}
.aufg-chip[aria-current]{background:var(--goldbg);border-color:color-mix(in srgb,var(--gold) 50%,transparent);color:var(--fg)}
.aufg-chip[data-prio][aria-current]{background:var(--priobg);border-color:color-mix(in srgb,var(--prio) 55%,transparent)}
.aufg-chip .aufg-punkt{width:8px;height:8px;box-shadow:none}
.aufg-chip[aria-current] .aufg-zahl{background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
.aufg-tipp{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-s);color:var(--mut);font-weight:500;min-width:0}
.aufg-tipp>svg{width:16px;height:16px;color:var(--gold);flex:none}
.aufg-tipp .finger{display:none}
@media (hover:none){.aufg-tipp .maus{display:none}.aufg-tipp .finger{display:inline}}
.aufg-tabs{display:none}

/* ----- Team-Board: eine Spalte je Person, „Für alle“ und „Erledigt“ ----- */
.aufg-board{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
@media (min-width:1201px){
  .aufg-board.sp3,.aufg-board.sp-viele{grid-template-columns:repeat(3,minmax(0,1fr))}
  .aufg-board.sp4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .aufg-board.sp5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .aufg-board.sp6{grid-template-columns:repeat(6,minmax(0,1fr))}
}
.aufg-sp{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r);background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s)}
.aufg-sp::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--pf);opacity:.85}
.aufg-sp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:2px dashed color-mix(in srgb,var(--pf) 75%,transparent);background:color-mix(in srgb,var(--pf) 9%,transparent);opacity:0;transition:opacity .2s}
body.aufg-zieht .aufg-sp[data-ziel]::after{opacity:.35}
body.aufg-zieht .aufg-sp[data-ziel].ziel-an::after{opacity:1;border-style:solid;background:color-mix(in srgb,var(--pf) 13%,transparent)}
body.aufg-zieht .aufg-sp.quelle::after{opacity:0}
.aufg-sp-kopf{display:flex;align-items:center;gap:10px;padding:15px 12px 10px 16px}
.aufg-sp-name{display:grid;flex:1;min-width:0;line-height:1.3}
.aufg-sp-name b{font:600 calc(15px + var(--plus,0px)) var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.aufg-sp-name>span{font-size:12.5px;color:var(--mut)}
.aufg-sp-plus{width:32px;height:32px;flex:none}
.aufg-sp-plus svg{width:16px;height:16px}
.aufg-last{display:block;width:calc(100% - 32px);height:5px;margin:0 16px 10px;clip-path:inset(0 round 99px)}
.aufg-last .bg{fill:var(--glass3)}
.aufg-last rect[data-prio]{fill:var(--prio)}
.aufg-stapel{list-style:none;margin:0;padding:2px 10px 10px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
.aufg-stapel:empty{display:none}
.aufg-leer{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 10px 12px;min-height:84px;padding:14px;border-radius:var(--r-s);border:1.5px dashed var(--line2);color:var(--mut2);font-size:13px;font-weight:600;text-align:center}
.aufg-leer svg{width:15px;height:15px;flex:none;transform:rotate(90deg)}
.aufg-sp-fuss{display:flex;align-items:center;gap:7px;margin:auto 10px 10px;padding:9px 10px;border-radius:12px;font-size:13px;font-weight:600;color:var(--mut);text-decoration:none}
.aufg-sp-fuss:hover{background:var(--glass2);color:var(--fg)}
.aufg-sp-fuss svg{width:15px;height:15px}

/* Karte */
.aufg-k{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 4px;align-items:start;padding:8px 10px 9px 2px;border-radius:var(--r-s);background:var(--glass2);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi);transition:border-color .2s,box-shadow .2s,opacity .25s}
.aufg-k[data-zieh]{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.aufg-k .aufg-haken{margin:0;position:relative;z-index:1}
.aufg-k .aufg-kreis{margin:-3px 0 -5px}
.aufg-k .aufg-tx{display:grid;gap:3px;min-width:0;padding-top:5px;color:inherit;text-decoration:none;-webkit-user-drag:none}
.aufg-k .aufg-tx::after{border-radius:inherit}
.aufg-titel{font-weight:600;line-height:1.35;overflow-wrap:anywhere;transition:color .3s}
.aufg-titel>span{background:no-repeat 0 58%/0 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .35s cubic-bezier(.2,.8,.2,1)}
.aufg-k .aufg-tx:hover .aufg-titel{color:var(--gold)}
.aufg-k .aufg-meta{margin-top:2px;gap:5px 8px}
.aufg-k .aufg-meta .pill{font-size:11.5px;padding:1px 8px}
.aufg-prio-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.aufg-griff{opacity:0;color:var(--mut2);padding-top:7px;transition:opacity .2s;pointer-events:none}
.aufg-griff svg{width:15px;height:15px;display:block}
@media (hover:hover){.aufg-k[data-zieh]:hover{border-color:var(--edge2);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s)}.aufg-k:hover .aufg-griff{opacity:1}}
@media (hover:none){.aufg-griff{opacity:.5}}
.aufg-k.erledigt{background:transparent;border-color:transparent;box-shadow:none;padding-block:3px 4px}
.aufg-k.erledigt .aufg-titel{color:var(--mut);font-weight:500;font-size:calc(13.5px + var(--plus,0px))}
.aufg-k.erledigt .aufg-meta{margin-top:0}
.aufg-k.erledigt .aufg-tx{padding-top:6px}
.aufg-k.erledigt .aufg-titel>span,.aufg-k.hakt .aufg-titel>span{background-image:linear-gradient(currentColor,currentColor);background-size:100% 1.5px}
.aufg-k.hakt .aufg-titel{color:var(--mut)}
.aufg-erl-zeit svg{width:13px;height:13px;color:var(--ok)}
.aufg-k.druck{opacity:.85}
.aufg-k.weg{opacity:.3;border-style:dashed;box-shadow:none}
.aufg-k.weg>*{visibility:hidden}
/* Häkchen: wird beim Darüberfahren und Abhaken gezeichnet (pathLength=1) */
.aufg-kreis svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.aufg-kreis svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s cubic-bezier(.2,.8,.2,1) .05s}
.aufg-kreis:hover svg path,.aufg-k.erledigt .aufg-kreis svg path,.aufg-k.hakt .aufg-kreis svg path{stroke-dashoffset:0}
.aufg-k.erledigt .aufg-kreis>span,.aufg-k.hakt .aufg-kreis>span{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.aufg-k.erledigt .aufg-kreis:hover>span{background:var(--okbg);color:var(--ok)}
:root:not([data-bewegung="aus"]) .aufg-k.hakt .aufg-kreis>span{animation:aufg-haken .4s cubic-bezier(.34,1.56,.64,1)}

/* Beim Ziehen: Karte am Zeiger, Leiste unten (Handy), Meldung mit „Rückgängig“, Hinweis über Diagrammen */
.aufg-geist{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;will-change:transform}
.aufg-geist>.aufg-k{background:var(--glass-solid);border-color:color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:var(--shadow);cursor:grabbing}
.aufg-geist>.aufg-k.erledigt{padding-block:8px 9px}
:root:not([data-bewegung="aus"]) .aufg-geist>.aufg-k{animation:aufg-heben .22s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes aufg-heben{to{transform:rotate(1.6deg) scale(1.04)}}
body.aufg-zieht,body.aufg-zieht *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
.aufg-dock{position:fixed;left:0;right:0;bottom:0;z-index:1050;display:flex;justify-content:center;pointer-events:none;padding:0 max(10px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));transform:translateY(135%);transition:transform .38s cubic-bezier(.34,1.3,.64,1)}
.aufg-dock.auf{transform:none}
.aufg-dock-in{pointer-events:auto;display:flex;gap:4px;padding:7px;border-radius:26px;width:100%;max-width:520px;background:color-mix(in srgb,var(--glass-solid) 90%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--edge2);box-shadow:var(--shadow)}
.aufg-dz{position:relative;flex:1 1 0;min-width:0;display:grid;justify-items:center;align-content:center;gap:5px;padding:10px 4px 8px;border-radius:19px;font-size:12px;font-weight:650;color:var(--fg2);transition:transform .2s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.aufg-dz>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aufg-dz .avatar{width:38px;height:38px;font-size:13px;box-shadow:0 0 0 2px color-mix(in srgb,var(--pf) 70%,transparent)}
.aufg-dz.ziel-an{transform:scale(1.08);background:color-mix(in srgb,var(--pf) 20%,transparent)}
.aufg-dz.quelle{opacity:.4}
.aufg-toast{position:fixed;z-index:950;left:calc(50% + 130px);bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;width:max-content;max-width:min(560px,calc(100vw - 320px));padding:7px 7px 7px 14px;border-radius:20px;background:color-mix(in srgb,var(--glass-solid) 92%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--edge2);box-shadow:inset 0 1px 0 var(--hi),0 12px 34px rgba(0,0,0,.3);font-size:var(--fs-s);font-weight:600;transform:translate(-50%,170%);visibility:hidden;transition:transform .42s cubic-bezier(.34,1.3,.64,1),visibility 0s .42s}
.aufg-toast.auf{transform:translate(-50%,0);visibility:visible;transition:transform .42s cubic-bezier(.34,1.3,.64,1)}
.aufg-toast>svg{width:18px;height:18px;flex:none;color:var(--ok)}
.aufg-toast.bad>svg{color:var(--bad)}
.aufg-toast>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aufg-toast .btn{flex:none}
@media (max-width:900px){.aufg-toast{left:50%;max-width:calc(100vw - 32px)}}
.aufg-tip{position:fixed;left:0;top:0;z-index:1100;pointer-events:none;padding:7px 10px;border-radius:10px;background:var(--glass-solid);border:1px solid var(--edge2);box-shadow:var(--shadow-s);font-size:12.5px;line-height:1.4;color:var(--fg);max-width:250px}
.aufg-funke{position:fixed;left:0;top:0;z-index:1200;width:7px;height:7px;border-radius:2px;pointer-events:none;background:var(--c);animation:aufg-funke .8s cubic-bezier(.15,.75,.3,1) forwards}
.aufg-funke.rund{border-radius:50%}
@keyframes aufg-funke{from{transform:translate(var(--x0),var(--y0)) scale(1);opacity:1}to{transform:translate(var(--x1),var(--y1)) rotate(var(--r)) scale(.5);opacity:0}}

/* Was zuletzt passiert ist */
.aufg-feed-karte>.hd h2{display:flex;align-items:center;gap:8px}
.aufg-feed-karte>.hd h2>svg{width:18px;height:18px;color:var(--gold);flex:none}
.aufg-feed{list-style:none;margin:0;padding:4px 0}
.aufg-feed li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 18px;align-items:start}
.aufg-feed li+li{border-top:1px solid var(--line)}
.aufg-feed p{margin:0;font-size:calc(13.5px + var(--plus,0px));line-height:1.4;color:var(--fg2);overflow-wrap:anywhere}
.aufg-feed p b{color:var(--fg);font-weight:650}
.aufg-feed time{font-size:12px;color:var(--mut)}

/* Animationen (nur mit Bewegung; „Bewegung reduzieren“ am Gerät schaltet sie oben in der Datei ab) */
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-band .s{transform-box:fill-box;transform-origin:50% 100%;animation:aufg-hoch .8s cubic-bezier(.2,.8,.2,1) backwards}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-band:nth-of-type(1) .s{animation-delay:.15s}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-band:nth-of-type(2) .s{animation-delay:.2s}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-band:nth-of-type(3) .s{animation-delay:.25s}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-band:nth-of-type(4) .s{animation-delay:.3s}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-band:nth-of-type(5) .s{animation-delay:.35s}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-band:nth-of-type(6) .s{animation-delay:.4s}
@keyframes aufg-hoch{from{transform:scaleY(0)}}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-spur rect:not(.bg){transform-box:fill-box;transform-origin:0 50%;animation:aufg-breit .9s .25s cubic-bezier(.2,.8,.2,1) backwards}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-hb-zeile:nth-child(2) .aufg-spur rect:not(.bg){animation-delay:.32s}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-hb-zeile:nth-child(3) .aufg-spur rect:not(.bg){animation-delay:.39s}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-hb-zeile:nth-child(n+4) .aufg-spur rect:not(.bg){animation-delay:.46s}
@keyframes aufg-breit{from{transform:scaleX(0)}}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-ring .bogen{animation:aufg-ring 1.2s .2s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes aufg-ring{from{stroke-dashoffset:100}}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-dia .ln{stroke-dasharray:1;animation:aufg-zeichnen 1.3s .25s cubic-bezier(.4,0,.2,1) backwards}
@keyframes aufg-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-dia .fl{animation:aufg-blende .8s .9s ease backwards}
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-dia .ende{transform-box:fill-box;transform-origin:center;animation:aufg-pop .45s 1.4s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes aufg-blende{from{opacity:0}}
@keyframes aufg-pop{from{transform:scale(0)}}
:root:not([data-bewegung="aus"]) .aufg-last rect[data-prio]{transform-box:fill-box;transform-origin:0 50%;animation:aufg-breit .8s .35s cubic-bezier(.2,.8,.2,1) backwards}
:root:not([data-bewegung="aus"]) .aufg-board.still .aufg-last rect[data-prio]{animation:none}
:root:not([data-bewegung="aus"]) .aufg-n.puls{display:inline-block;animation:aufg-puls .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes aufg-puls{40%{transform:scale(1.25)}}
:root:not([data-bewegung="aus"]) .aufg-k.landet{animation:aufg-landen .9s cubic-bezier(.2,.8,.2,1)}
@keyframes aufg-landen{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 65%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
:root:not([data-bewegung="aus"]) .aufg-sp.puls{animation:aufg-zpuls .55s cubic-bezier(.2,.8,.2,1)}
@keyframes aufg-zpuls{40%{transform:scale(1.012)}}
:root:not([data-bewegung="aus"]) :is(.aufg-tabs em,.aufg-tabs button,.aufg-neu).puls{animation:aufg-puls .5s cubic-bezier(.34,1.56,.64,1)}
:root:not([data-bewegung="aus"]) .aufg-neu.puls{animation-name:aufg-zpuls}
:root:not([data-bewegung="aus"]) .aufg-feed li.frisch{animation:aufg-frisch 1.4s ease}
@keyframes aufg-frisch{from{background:var(--goldbg)}}
@keyframes aufg-rein-r{from{opacity:0;transform:translateX(18px)}}
@keyframes aufg-rein-l{from{opacity:0;transform:translateX(-18px)}}

.pill.aufg-datum::before{display:none}
.pill.aufg-datum svg{width:13px;height:13px;margin-left:-2px}

/* ===== Statistik-Karten auf allen Seiten (src/ui/statistik-karten.ts): derselbe Stil wie die Statistik der Aufgaben ===== */
/* Kategorienfarben in fester Reihenfolge (dieselben wie die Personenfarben der Aufgaben, geprüft auf Farbsehschwäche, hell und dunkel). */
[data-sk]{--p0:#C98400;--p1:#8E70FA;--p2:#1FA870;--p3:#3D86E8}
:root[data-theme="light"] [data-sk]{--p0:#B06F00;--p1:#7454E6;--p2:#0F8456;--p3:#2F6FD8}
.sk-gold{--c:var(--goldf)}.sk-ok{--c:var(--ok)}.sk-warn{--c:var(--warn)}.sk-bad{--c:var(--bad)}.sk-info{--c:var(--info)}.sk-vio{--c:var(--vio)}
.sk-grau{--c:color-mix(in srgb,var(--mut2) 45%,transparent)}.sk-px{--c:var(--mut2)}
.sk-p0{--c:var(--p0)}.sk-p1{--c:var(--p1)}.sk-p2{--c:var(--p2)}.sk-p3{--c:var(--p3)}
.sk-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-width:0}
.sk-raster.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sk-raster.n1{grid-template-columns:minmax(0,1fr)}
@media (min-width:701px) and (max-width:1180px){
  .sk-raster.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-raster.n3>:last-child:nth-child(odd){grid-column:1/-1}
}
/* Kopf: Symbol in Gold, Titel (als Link mit Pfeil), rechts eine kurze Info */
.sk>.hd h2{display:flex;align-items:center;gap:8px;min-width:0}
.sk>.hd h2>a{display:inline-flex;align-items:center;gap:8px;min-width:0;color:inherit;text-decoration:none}
.sk>.hd h2 svg{width:17px;height:17px;margin:0;color:var(--gold);flex:none}
.sk>.hd h2>a>svg:last-child{width:15px;height:15px;color:var(--mut2);transition:transform .2s cubic-bezier(.2,.8,.2,1),color .2s}
.sk>.hd h2>a:hover{color:var(--gold)}
.sk>.hd h2>a:hover>svg:last-child{color:var(--gold);transform:translateX(2px)}
.sk>.hd h2 span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-r{font-size:var(--fs-s);font-weight:600;color:var(--mut);white-space:nowrap}
.sk-r .trend{font-variant-numeric:tabular-nums}
/* Große Zahl */
.sk-gross{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-width:0}
.sk-gross b{font:700 calc(28px + var(--plus,0px)) var(--display);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.sk-gross>span{min-width:0;font-size:13px;font-weight:600;color:var(--mut)}
/* Ring mit Legende */
.sk-ring-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;min-width:0}
.sk-ring{position:relative;width:110px;height:110px;flex:none}
.sk-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.sk-ring circle{fill:none;stroke-width:11}
.sk-ring .spur{stroke:var(--glass3)}
.sk-ring .b{stroke:var(--c);stroke-linecap:round}
.sk-ring.teile .b{stroke-linecap:butt}
.sk-ring .b.hell{stroke-opacity:.38}
.sk-ring-mitte{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1;pointer-events:none}
.sk-ring-mitte b{font:700 calc(25px + var(--plus,0px)) var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sk-ring-mitte>span{font-size:12px;color:var(--mut);font-weight:600}
/* Längere Zahl oder längeres Wort in der Mitte: kleiner, damit alles im Kreis bleibt (test/handy/ueberstand.mjs misst es nach) */
.sk-ring-mitte.mittel b{font-size:22px}.sk-ring-mitte.lang b{font-size:19px}.sk-ring-mitte.wort>span{font-size:10.5px}
@media (max-width:380px){.sk-ring-wrap{gap:12px}.sk-ring{width:84px;height:84px}.sk-ring-mitte b{font-size:calc(19px + var(--plus,0px))}.sk-ring-mitte>span{font-size:11px}.sk-ring-mitte.mittel b{font-size:17px}.sk-ring-mitte.lang b{font-size:15px}.sk-ring.wort{width:96px;height:96px}.sk-ring-mitte.wort>span{font-size:9px;letter-spacing:-.01em}.sk-ring-wrap .sk-leg{font-size:calc(13px + var(--plus,0px));gap:6px}}
.sk-leg{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:0;font-size:calc(13.5px + var(--plus,0px));color:var(--fg2)}
.sk-leg li,.sk-leg li>a{display:flex;align-items:center;gap:8px;min-width:0}
.sk-leg li>a{flex:1;color:inherit;text-decoration:none}
.sk-leg li>a:hover .t{color:var(--gold)}
.sk-leg .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-leg b{margin-left:auto;padding-left:8px;font-weight:650;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.sk-pkt{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;background:var(--c,var(--mut2))}
.sk-pkt.hell{background:color-mix(in srgb,var(--c) 38%,transparent)}
.sk-pkt.sk-grau{background:var(--glass3);box-shadow:inset 0 0 0 1.5px var(--line2)}
.sk-mini-leg{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--mut)}
.sk-mini-leg span{display:inline-flex;align-items:center;gap:6px}
.sk-mini-leg .sk-pkt{width:10px;height:10px;border-radius:3px}
/* Säulen und Verlauf (300 × 140 im viewBox, Zahlen der Achse als HTML links daneben) */
.sk-dia{position:relative;margin-left:22px}
.sk-dia.breit{margin-left:44px}
.sk-dia svg{display:block;width:100%;height:auto;overflow:visible}
.sk-tick{position:absolute;right:calc(100% + 7px);font-size:11px;line-height:1;color:var(--mut2);font-variant-numeric:tabular-nums;white-space:nowrap;transform:translateY(50%)}
.sk-tick.t0{bottom:0}.sk-tick.t50{bottom:47.14%}.sk-tick.t100{bottom:94.29%}
.sk-dia .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.sk-dia .gl.basis{stroke:var(--line2);stroke-dasharray:none}
.sk-band .hit{fill:transparent}
.sk-band .s{fill:var(--c);transition:fill-opacity .2s}
.sk-band:not(.gestapelt) .s{fill-opacity:.42}
.sk-band.jetzt .s,.sk-band.jetzt:hover .s{fill-opacity:1}
.sk-band:not(.gestapelt):hover .s{fill-opacity:.7}
.sk-band.gestapelt:hover .s{fill-opacity:.8}
.sk-dia .fl{fill:var(--goldf);fill-opacity:.12}
.sk-dia .ln{fill:none;stroke:var(--goldf);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.sk-dia .ende{fill:var(--goldf);stroke:var(--glass-solid);stroke-width:2.5}
.sk-dia .fk{stroke:var(--mut2);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.sk-dia .fk-p{fill:var(--glass-solid);stroke:var(--goldf);stroke-width:2.2}
.sk-achse{display:grid;margin:8px 0 0 22px;font-size:11.5px;color:var(--mut2);font-variant-numeric:tabular-nums;text-align:center}
.sk-achse.breit{margin-left:44px}
.sk-achse>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-achse.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.sk-achse.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sk-achse.n4{grid-template-columns:repeat(4,minmax(0,1fr))}.sk-achse.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sk-achse.n6{grid-template-columns:repeat(6,minmax(0,1fr))}.sk-achse.n7{grid-template-columns:repeat(7,minmax(0,1fr))}
.sk-achse.n8{grid-template-columns:repeat(8,minmax(0,1fr))}.sk-achse.n12{grid-template-columns:repeat(12,minmax(0,1fr))}
.sk-achse.v3{grid-template-columns:repeat(3,minmax(0,1fr));text-align:left}
.sk-achse.v3>:nth-child(2){text-align:center}.sk-achse.v3>:last-child{text-align:right}
.sk-achse .jetzt,.sk-achse.v3>:last-child{color:var(--fg);font-weight:650}
/* Waagerechte Balken und Anteile */
.sk-hb{display:grid;gap:13px}
.sk-hb-zeile{display:grid;gap:6px;min-width:0}
.sk-hb-kopf,.sk-hb-kopf>a{display:flex;align-items:center;gap:8px;min-width:0;font-size:calc(13.5px + var(--plus,0px));font-weight:600;color:inherit;text-decoration:none}
.sk-hb-kopf>a{flex:1}
.sk-hb-kopf>a:hover .nm{color:var(--gold)}
.sk-hb-kopf .nm{display:flex;align-items:center;gap:8px;min-width:0}
.sk-hb-kopf .nm>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-hb-kopf .n{margin-left:auto;padding-left:8px;font-size:12.5px;font-weight:600;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.sk-hb-kopf .avatar.mini{width:20px;height:20px}
.sk-spur{display:block;width:100%;height:10px;overflow:visible}
.sk-spur.dick{height:14px}
.sk-spur .bg{fill:var(--glass3)}
.sk-spur rect:not(.bg){fill:var(--c)}
.sk-spur rect.hell{fill-opacity:.38}
.sk-fuss{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--mut);min-width:0}
.sk-fuss a{color:inherit;text-decoration:none}
.sk-fuss a:hover{color:var(--gold)}
.sk-fuss b{color:var(--fg);font-weight:650;font-variant-numeric:tabular-nums}
.sk-leer{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-s);color:var(--mut)}
.sk-leer svg{width:16px;height:16px;flex:none;color:var(--mut2)}
/* Statistik ohne Google im Kundenbereich (src/portal/statistik.ts): Kopf mit Zeitraum, Versprechen ohne Abschneiden */
.stat-kunde{display:grid;gap:12px;min-width:0;scroll-margin-top:80px}
.stat-kunde .toolbar{margin:0 2px}
.stat-versprechen li{align-items:flex-start}
.stat-versprechen .t{white-space:normal;overflow:visible}
.stat-versprechen svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ok)}
.stat-werbung .hd h2{display:flex;align-items:center;gap:8px}
.stat-werbung .hd h2 svg{width:18px;height:18px;color:var(--gold)}
.sk-tip{position:fixed;left:0;top:0;z-index:1100;pointer-events:none;padding:7px 10px;border-radius:10px;background:var(--glass-solid);border:1px solid var(--edge2);box-shadow:var(--shadow-s);font-size:12.5px;line-height:1.4;color:var(--fg);max-width:250px}
.sk-punkte{display:none}
@media (max-width:700px){
  /* Karten nebeneinander zum Wischen, darunter Punkte (wie bei den Aufgaben) */
  .sk-raster,.sk-raster.n2{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 4px;scroll-padding-inline:16px;scrollbar-width:none}
  .sk-raster.n1{grid-auto-columns:100%}
  .sk-raster::-webkit-scrollbar{display:none}
  .sk-raster>.card{scroll-snap-align:start}
  .sk-punkte{display:flex;justify-content:center;gap:7px;margin-top:-6px}
  .sk-punkte i{width:7px;height:7px;border-radius:99px;background:var(--line2);transition:width .3s cubic-bezier(.2,.8,.2,1),background-color .3s}
  .sk-punkte i.an{width:20px;background:var(--gold)}
}
/* Animationen (nur mit Bewegung): Säulen wachsen, Balken fahren aus, der Ring füllt sich, die Linie zeichnet sich */
:root:not([data-bewegung="aus"]) .sk-band{transform-box:fill-box;transform-origin:50% 100%;animation:sk-hoch .8s .15s cubic-bezier(.2,.8,.2,1) backwards}
:root:not([data-bewegung="aus"]) .sk-band:nth-of-type(2){animation-delay:.2s}
:root:not([data-bewegung="aus"]) .sk-band:nth-of-type(3){animation-delay:.25s}
:root:not([data-bewegung="aus"]) .sk-band:nth-of-type(4){animation-delay:.3s}
:root:not([data-bewegung="aus"]) .sk-band:nth-of-type(5){animation-delay:.35s}
:root:not([data-bewegung="aus"]) .sk-band:nth-of-type(6){animation-delay:.4s}
:root:not([data-bewegung="aus"]) .sk-band:nth-of-type(n+7){animation-delay:.45s}
@keyframes sk-hoch{from{transform:scaleY(0)}}
:root:not([data-bewegung="aus"]) .sk-spur rect:not(.bg){transform-box:fill-box;transform-origin:0 50%;animation:sk-breit .9s .25s cubic-bezier(.2,.8,.2,1) backwards}
:root:not([data-bewegung="aus"]) .sk-hb-zeile:nth-child(2) .sk-spur rect:not(.bg){animation-delay:.32s}
:root:not([data-bewegung="aus"]) .sk-hb-zeile:nth-child(3) .sk-spur rect:not(.bg){animation-delay:.39s}
:root:not([data-bewegung="aus"]) .sk-hb-zeile:nth-child(n+4) .sk-spur rect:not(.bg){animation-delay:.46s}
@keyframes sk-breit{from{transform:scaleX(0)}}
:root:not([data-bewegung="aus"]) .sk-ring .b{animation:sk-bogen 1.1s .2s cubic-bezier(.2,.8,.2,1) backwards}
:root:not([data-bewegung="aus"]) .sk-ring .b:nth-of-type(3){animation-delay:.35s}
:root:not([data-bewegung="aus"]) .sk-ring .b:nth-of-type(4){animation-delay:.5s}
:root:not([data-bewegung="aus"]) .sk-ring .b:nth-of-type(n+5){animation-delay:.65s}
@keyframes sk-bogen{from{stroke-dasharray:0 100}}
:root:not([data-bewegung="aus"]) .sk-dia .ln{stroke-dasharray:1;animation:sk-zeichnen 1.3s .25s cubic-bezier(.4,0,.2,1) backwards}
@keyframes sk-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
:root:not([data-bewegung="aus"]) .sk-dia .fl{animation:sk-blende .8s .9s ease backwards}
:root:not([data-bewegung="aus"]) .sk-dia .ende{transform-box:fill-box;transform-origin:center;animation:sk-pop .45s 1.4s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes sk-blende{from{opacity:0}}
@keyframes sk-pop{from{transform:scale(0)}}

/* Kurzliste für die Übersicht (offeneAufgabenKurz) */
.card:has(>.aufg-kurz)>.hd h2,.card:has(.push)>.hd h2{display:flex;align-items:center;gap:8px}
.card:has(>.aufg-kurz)>.hd h2>svg,.card:has(.push)>.hd h2>svg{width:18px;height:18px;color:var(--gold);flex:none}
.aufg-kurz{list-style:none;margin:0;padding:4px 0}
.aufg-kurz li a{display:flex;align-items:center;gap:12px;padding:10px 18px;color:inherit;text-decoration:none}
.aufg-kurz li a:hover{background:var(--glass2)}
.aufg-kurz li a:hover b{color:var(--gold)}
.aufg-kurz-t{flex:1;min-width:0}
.aufg-kurz-t b{font-weight:600;overflow-wrap:anywhere}
.aufg-kurz-mehr{display:flex;align-items:center;gap:6px;padding:11px 18px 14px;border-top:1px solid var(--line);font-size:var(--fs-s);font-weight:600;text-decoration:none}
.aufg-kurz-mehr svg{width:15px;height:15px}

/* Benachrichtigungen auf diesem Gerät */
.push-anker,.aufg-sp,.aufg-k,.aufg-neu,#beleg{scroll-margin-top:calc(84px + env(safe-area-inset-top,0px))}
.push-tipp{align-items:center}
.push-tipp>div{flex:1;min-width:0}
.push-tipp a{font-weight:600}
.push-tipp .btn{flex:none}
.push{display:grid;gap:12px}
.push-teil{display:grid;gap:10px;justify-items:start}
.push-teil .note{justify-self:stretch}
.push-teil .row{margin:0}
.push-meldung{margin:0}
.push-meldung:empty{display:none}
.push-meldung.ok{color:var(--ok)}
.push-meldung.bad{color:var(--bad)}
.push-geraete{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.push-geraete h3{font-size:var(--fs-s);font-weight:600;color:var(--mut)}
.push-geraete>form{margin:0}
.push-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.push-liste li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:14px;background:var(--glass2);border:1px solid var(--edge)}
.push-liste li>svg{width:18px;height:18px;flex:none;color:var(--mut)}
.push-liste li>span{flex:1;min-width:0;display:grid}
.push-liste b{font-size:var(--fs-s)}
.push-liste small{font-size:var(--fs-xs);color:var(--mut)}
.push-liste form{margin:0}
.push-hier{font-style:normal;font-size:var(--fs-xs);font-weight:600;color:var(--ok)}
/* Mein Konto → Benachrichtigungen: je Art ein Schalter (ganze Zeile tippbar), Ruhezeit mit zwei Uhrzeiten nebeneinander */
.push-arten{grid-template-columns:minmax(0,1fr)}
.push-arten .check{min-height:52px;padding:10px 12px}
.push-arten .check b{font-size:14px;font-weight:600}
.push-arten .pill{margin-left:4px;vertical-align:1px}
.felder.push-ruhe{grid-template-columns:repeat(2,minmax(0,1fr))}
.push-stand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:12px;border-top:1px solid var(--line)}
.push-stand>span{flex:1 1 200px;min-width:0}

/* Nach dem Abhaken: Leiste unten mit „Rückgängig“ (über der Mitte des Inhalts, auf dem Handy über der Tableiste) */
.aufg-rueck{position:fixed;z-index:45;left:calc(50% + 130px);bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100vw - 320px));display:flex;align-items:center;gap:10px;padding:7px 7px 7px 14px;border-radius:20px;background:color-mix(in srgb,var(--glass-solid) 86%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--edge2);box-shadow:inset 0 1px 0 var(--hi),0 12px 34px rgba(0,0,0,.3)}
.aufg-rueck>svg{width:18px;height:18px;flex:none;color:var(--ok)}
.aufg-rueck-tx{min-width:0;display:grid;line-height:1.25;font-size:var(--fs-s)}
.aufg-rueck-tx small{font-size:var(--fs-xs);color:var(--mut)}
.aufg-rueck-tx b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aufg-rueck form{margin:0;flex:none}
.aufg-rueck .ibtn{height:32px;min-width:32px;padding:0;flex:none}
.aufg-rueck .ibtn svg{width:16px;height:16px}
:root:not([data-bewegung="aus"]) .aufg-rueck{animation:aufg-rueck-ein .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes aufg-rueck-ein{from{opacity:0;transform:translate(-50%,14px)}}
.app:has(.aufg-rueck:not([hidden])) .page{padding-bottom:120px}
@media (max-width:900px){.aufg-rueck{left:50%;max-width:calc(100vw - 32px)}}

@media (max-width:700px){
  .aufg-neu{padding:12px}
  .aufg-neu-zeile .inp{height:50px;font-size:16px}
  .aufg-neu-zeile .btn{height:50px;width:50px;padding:0}
  .aufg-neu-zeile .btn svg{width:22px;height:22px}
  .aufg-prio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .aufg-prio-l{grid-column:1/-1}
  .aufg-prio label span{width:100%;justify-content:center;height:42px;padding:0 10px;font-size:15px}
  .aufg-label{font-size:14.5px}
  .aufg-mehr>summary{font-size:14.5px;padding:8px 4px}
  .aufg-kreis{width:46px;height:46px;margin:-9px 0}
  .aufg-kreis>span{width:28px;height:28px}
  .aufg-kreis svg{width:16px;height:16px}
  .aufg-k .aufg-kreis{margin:-5px -2px -7px 0}
  .aufg-titel{font-size:calc(16px + var(--plus,0px))}
  .aufg-k .aufg-meta .pill{font-size:12.5px;padding:2px 9px}
  .aufg-k{padding:9px 12px 10px 2px}
  /* Statistik: Karten nebeneinander zum Wischen, darunter Punkte */
  .aufg-stat{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 4px;scroll-padding-inline:16px;scrollbar-width:none}
  .aufg-stat::-webkit-scrollbar{display:none}
  .aufg-stat>.card{scroll-snap-align:start}
  .aufg-punkte{display:flex;justify-content:center;gap:7px;margin-top:-6px}
  .aufg-punkte i{width:7px;height:7px;border-radius:99px;background:var(--line2);transition:width .3s cubic-bezier(.2,.8,.2,1),background-color .3s}
  .aufg-punkte i.an{width:20px;background:var(--gold)}
  .aufg-leiste{display:grid;gap:8px}
  .aufg-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
  .aufg-chips::-webkit-scrollbar{display:none}
  .aufg-chip{flex:0 0 auto;height:38px;font-size:calc(14px + var(--plus,0px))}
  /* Board: Reiter je Spalte, immer nur eine Spalte (app.js schaltet um; ohne JavaScript stehen alle untereinander) */
  .aufg-board{grid-template-columns:minmax(0,1fr)}
  .aufg-board.reiter>.aufg-sp:not(.aktiv){display:none}
  .aufg-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:4px;border-radius:22px;background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi);position:relative;isolation:isolate}
  .aufg-tabs button{position:relative;display:grid;justify-items:center;gap:4px;min-width:0;padding:8px 2px 7px;border:0;border-radius:18px;background:none;color:var(--mut);font-size:12.5px;font-weight:650;line-height:1.2;-webkit-tap-highlight-color:transparent}
  .aufg-tabs button>span:not(.avatar){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .aufg-tabs button[aria-pressed="true"]{color:var(--fg)}
  .aufg-tabs:not(.mit-zeiger) button[aria-pressed="true"]{background:var(--glass3)}
  .aufg-tabs .avatar{width:28px;height:28px;font-size:11px;box-shadow:0 0 0 2px color-mix(in srgb,var(--pf) 70%,transparent)}
  .aufg-tabs em{position:absolute;top:3px;left:calc(50% + 7px);min-width:19px;height:18px;padding:0 5px;border-radius:99px;background:var(--glass-solid);border:1px solid var(--edge2);font-style:normal;font-size:11px;font-weight:700;line-height:16px;color:var(--fg);font-variant-numeric:tabular-nums}
  .aufg-zeiger{position:absolute;z-index:-1;left:0;top:4px;bottom:4px;width:0;border-radius:18px;background:var(--glass3);box-shadow:inset 0 1px 0 var(--hi);transition:transform .35s cubic-bezier(.34,1.2,.64,1),width .35s cubic-bezier(.34,1.2,.64,1)}
  :root:not([data-bewegung="aus"]) .aufg-sp.rein-r{animation:aufg-rein-r .32s cubic-bezier(.2,.8,.2,1)}
  :root:not([data-bewegung="aus"]) .aufg-sp.rein-l{animation:aufg-rein-l .32s cubic-bezier(.2,.8,.2,1)}
  .aufg-toast{bottom:calc(90px + env(safe-area-inset-bottom,0px));width:calc(100vw - 32px);font-size:15px}
  .aufg-leer{min-height:96px}
  .aufg-kurz li a{padding:12px 16px}
  .push-liste li{flex-wrap:wrap}
  .aufg-rueck{bottom:calc(90px + env(safe-area-inset-bottom,0px));width:calc(100vw - 32px);padding:6px 6px 6px 14px}
  .aufg-rueck-tx{flex:1;font-size:15px}
  .aufg-rueck .btn svg{display:none}
  .aufg-rueck .ibtn{height:40px;min-width:40px}
  .app:has(.aufg-rueck:not([hidden])) .page{padding-bottom:calc(180px + env(safe-area-inset-bottom,0px))}
}

/* ===== Übersicht ===== */
/* Als installierte App ist „Als App installieren“ erledigt. */
@media (display-mode: standalone){.nur-browser{display:none!important}}
:root.als-app .nur-browser{display:none!important}
/* Ist die App auf diesem Gerät schon installiert (Chrome und Edge erkennen das), braucht es keinen Installieren-Knopf. */
:root.app-da [data-installieren]{display:none!important}
/* Windows-Programm der Zentrale: Download nur am Windows-PC, Hinweis „gibt es für Windows“ nur woanders.
   app.js setzt ist-windows oder kein-windows; bis dahin ist beides aus, damit nichts kurz aufblitzt. */
:root:not(.ist-windows) .nur-windows{display:none!important}
:root:not(.kein-windows) .nicht-windows{display:none!important}
.start{display:grid;gap:18px;min-width:0}
/* Zwei Spalten, Karten wachsen nicht mit der Nachbarspalte; am Handy untereinander: Heute, Aufgaben, Erste Schritte, Schnell starten, Finanzen. */
.start-spalte{display:grid;gap:18px;align-content:start;min-width:0}
/* Kartenköpfe überall gleich: Symbol in der Akzentfarbe, Titel, Anzahl als gleich große Marke, rechts Knopf oder Info */
.start .card>.hd{min-height:56px;padding-block:11px}
.start .card>.hd h2{display:flex;align-items:center;gap:9px;min-width:0}
.start .card>.hd h2>svg{width:18px;height:18px;color:var(--gold);flex:none}
.start .card>.hd h2>span:not(.zahl){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zahl{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--glass3);color:var(--fg2);font-family:var(--body);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1;flex:none}
.kopf-info{font-size:13px;color:var(--mut);white-space:nowrap}
.start .list>:last-child{border-bottom:0}
.start .empty.fertig{padding:22px 16px}
.empty.klein{padding:18px 16px;font-size:var(--fs-s)}

/* Kennzahlen: die Zahl ist das Diagramm. Wert in der Grundschrift mit normalen Ziffern, darunter der Stand mit Punkt in der Zustandsfarbe. */
.kz-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kz{display:grid;gap:4px;align-content:start;padding:16px 18px;border-radius:var(--r);min-width:0;color:inherit;text-decoration:none}
a.kz:hover{background-color:var(--glass2)}
.kz-l{display:flex;align-items:center;gap:8px;font-size:calc(13px + var(--plus-k,0px));font-weight:600;color:var(--mut);min-width:0}
.kz-l svg{width:16px;height:16px;color:var(--gold);flex:none}
.kz-l span,.kz-h span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz-v{font-family:var(--body);font-size:30px;font-weight:650;letter-spacing:-.025em;line-height:1.15;margin-top:4px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz-h{display:flex;align-items:center;gap:7px;font-size:calc(12.5px + var(--plus-k,0px));color:var(--mut);min-width:0}
.kz-h i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--mut2)}
.kz-h.ok i{background:var(--ok)}
.kz-h.warn{color:var(--warn)}.kz-h.warn i{background:var(--warn)}
.kz-h.bad{color:var(--bad)}.kz-h.bad i{background:var(--bad)}

/* Kompakte Zeilen (Heute zu tun, Erste Schritte, Firmen): ganze Zeile tippbar, Titel und Text einzeilig */
.li.zl{align-items:center;flex-wrap:nowrap;gap:12px;padding:11px 14px 11px 18px}
.li.zl .ic{width:34px;height:34px}
.li.zl .tx{gap:1px}
.li.zl .tx b,.li.zl .tx>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.li.zl .tx b{font-size:14.5px}
.li.zl .tx>span{font-size:13px}
.li.zl>.schritt{font-size:13px;color:var(--mut)}
.li.zl>svg{width:16px;height:16px;flex:none;color:var(--mut2)}
a.li.zl:hover{background:var(--glass2)}
a.li.zl:hover>.schritt,a.li.zl:hover>svg{color:var(--gold)}

/* Erste Schritte: Fortschritt in Abschnitten, je Schritt einer */
.fortschritt{display:flex;gap:4px;padding:12px 18px 6px}
.fortschritt i{flex:1;height:5px;border-radius:99px;background:var(--goldbg)}
.fortschritt i.an{background:var(--gold)}

/* Aufgaben: Titel einzeilig, kleine Fälligkeit rechts */
.aufg-kurz{padding:2px 0}
.aufg-kurz li a{padding:10px 14px 10px 18px}
.aufg-kurz-t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;font-size:14.5px}
.aufg-kurz .pill{font-size:12px;padding:2px 8px;flex:none}
.aufg-kurz-mehr{justify-content:flex-start}

/* Schnell starten: Kacheln mit Symbol, Beschriftung darf zweizeilig sein */
.start .schnell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:1100px){.start .schnell{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}}
.start .schnell a{display:grid;justify-items:center;align-content:start;gap:7px;padding:12px 6px 11px;border-radius:16px;background:var(--glass2);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi);color:var(--fg);text-decoration:none;text-align:center;font-size:13px;font-weight:600;line-height:1.25;min-width:0;hyphens:auto}
.start .schnell a:hover{border-color:var(--edge2);background:var(--glass3)}
.start .schnell .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--goldbg);color:var(--gold)}
.start .schnell .ic svg{width:17px;height:17px}
.start-raster{align-items:start}

/* Finanzen: Umsatz je Firma mit sechs Säulen, der laufende Monat in der Akzentfarbe */
.umsatz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"z n s" "z w s";column-gap:12px;row-gap:1px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
a.umsatz:hover{background:var(--glass2)}
.umsatz>:is(.firma-logo,.firma-zeichen){grid-area:z}
.umsatz-n{grid-area:n;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umsatz-w{grid-area:w;font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umsatz-w b{color:var(--fg);font-weight:650}
.saeulen{grid-area:s;width:68px;height:30px;overflow:visible}
.saeulen .frueher{fill:var(--mut2);opacity:.55}
.saeulen .null{fill:var(--mut2);opacity:.25}
.saeulen .jetzt{fill:var(--gold)}

/* Kunden und Abos: vier kleine Zahlen in einer Karte */
.kz-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.kz-mini a{display:grid;gap:2px;align-content:start;padding:14px 18px;border-left:1px solid var(--line);color:inherit;text-decoration:none;min-width:0}
.kz-mini a:first-child{border-left:0}
.kz-mini a:hover{background:var(--glass2)}
.kz-mini span{font-size:13px;font-weight:600;color:var(--mut)}
.kz-mini b{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.kz-mini small{font-size:12px;color:var(--mut)}

@media (max-width:900px){
  .kz-reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kz-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kz-mini a:nth-child(odd){border-left:0}
  .kz-mini a:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:700px){
  .start{gap:16px}
  .start .card>.hd{min-height:54px}
  .kz{padding:14px;gap:3px}
  .kz-l{font-size:13px;gap:7px}
  .kz-v{font-size:27px}
  .kz-h{font-size:13px}
  .li.zl{padding:12px 12px 12px 16px}
  .li.zl>.schritt{display:none}
  .li.zl .ic{width:36px;height:36px}
  .li.zl .tx b{font-size:15.5px}
  .li.zl .tx>span{font-size:13.5px}
  .fortschritt{padding:12px 16px 6px}
  .aufg-kurz li a{padding:12px 14px 12px 16px}
  .aufg-kurz-t b{font-size:15.5px}
  .aufg-kurz .pill{font-size:12.5px}
  .umsatz{padding:12px 16px}
  .umsatz-n{font-size:15.5px}
  .umsatz-w{font-size:13.5px}
  .kz-mini a{padding:13px 16px}
  .kz-mini small{font-size:12.5px}
  .start .schnell a{font-size:12.5px;padding:12px 4px 11px}
}
@media (max-width:360px){
  .start .schnell a{font-size:12px}
  .kz{padding:12px}
  .kz-v{font-size:23px}
  .kz-l{font-size:12.5px}
  .kz-h{font-size:12px}
}

/* ===== Neu laden (nur als App, im Browser gibt es den Knopf des Browsers) ===== */
.nur-app{display:none!important}
@media (display-mode:standalone){.nur-app{display:inline-flex!important}}
:root.als-app .nur-app{display:inline-flex!important}
/* Zum Neuladen oben herunterziehen: Der Inhalt folgt dem Finger, ein runder Knopf zeigt, wann Loslassen neu lädt. */
.zieh-neu{position:fixed;z-index:90;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);width:40px;height:40px;margin-left:-20px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-solid);border:1px solid var(--edge2);box-shadow:inset 0 1px 0 var(--hi),0 8px 22px rgba(0,0,0,.28);color:var(--mut);opacity:0;pointer-events:none;transform:translateY(-12px) scale(.6)}
.zieh-neu svg{width:20px;height:20px}
.zieh-neu.bereit{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--edge2))}
.zieh-neu.dreht svg{animation:zieh-drehen .7s linear infinite}
@keyframes zieh-drehen{to{transform:rotate(360deg)}}
.zieh-zurueck{transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s}
.zieht .main{will-change:transform}

/* ===== Datei-Ansicht (PDF, Bild, Text) in der App ===== */
.ansicht{display:grid;gap:14px;min-width:0}
.ansicht-leiste{display:flex;flex-wrap:wrap;gap:10px}
.ansicht-leiste:not(:has(>:not([hidden]))){display:none}
.ansicht-seiten{display:grid;gap:14px;justify-items:center;min-width:0}
.ansicht-seiten canvas{display:block;width:100%;max-width:900px;height:auto;background:#fff;border-radius:6px;box-shadow:0 1px 0 var(--edge),0 10px 30px rgba(0,0,0,.28)}
.ansicht-seiten img{display:block;max-width:100%;height:auto;border-radius:10px;background:#fff}
.ansicht-seiten pre{width:100%;max-height:none;margin:0;padding:14px 16px;border-radius:var(--r);background:var(--glass2);border:1px solid var(--edge);font-family:var(--mono);font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg2)}
.ansicht-status{color:var(--mut);padding:28px 8px;text-align:center}
.ansicht-status.fehler{color:var(--bad)}

/* ---------- Postfach (src/mail/postfach-routen.ts) ---------- */
.pf-ordner{margin-bottom:12px}
.pf-n{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:var(--goldf);color:var(--goldfg);font-size:12px;font-weight:600;line-height:18px;text-align:center}
.pf-suche{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.pf-suche .inp{flex:1;min-width:0;width:0}
.pf-li .tx{gap:1px}
.pf-z1{display:flex;align-items:baseline;gap:10px;min-width:0}
.pf-z1 b{display:flex;align-items:center;gap:7px;min-width:0;flex:1;font-weight:500}
.pf-wer{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .tx .pf-z1 .pf-zeit,.pf-kopf .pf-z1 .pf-zeit{margin-left:auto;flex:none}
.pf-li.neu .tx b,.pf-li.neu .pf-betreff{font-weight:650;color:var(--fg)}
.pf-punkt{width:8px;height:8px;border-radius:50%;background:var(--goldf);flex:none}
.li .tx .pf-meta,.pf-kopf .tx .pf-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
/* Als Block (nicht inline-flex), damit lange Namen mit „…“ enden statt über die Karte zu ragen */
.pf-meta .pill{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-meta .pill svg{width:12px;height:12px;margin-right:5px;vertical-align:-1px}
.li .tx .pf-betreff{color:var(--fg2);font-size:var(--fs)}
.li .tx .pf-vor,.pf-mail .pf-vor{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pf-anz{display:inline-block;padding:0 6px;margin-left:4px;border-radius:99px;background:var(--glass3);color:var(--mut);font-size:var(--fs-xs)}
.pf-zeit{font-size:var(--fs-xs);color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.pf-aktionen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pf-aktionen form{display:contents}
.pf-firma{max-width:100%;min-width:0}
.pf-firma span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-mail{margin-bottom:14px}
.pf-mail.zu>summary{list-style:none;cursor:pointer;display:grid;gap:4px}
.pf-mail.zu>summary::-webkit-details-marker{display:none}
.pf-mail.zu>summary .pf-vor{color:var(--mut);font-size:var(--fs-s)}
.pf-kopf{display:flex;gap:12px;align-items:flex-start}
.pf-kopf .ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--glass3);color:var(--fg2)}
.pf-kopf .ic.gold{background:var(--goldbg);color:var(--gold)}.pf-kopf .ic.vio{background:var(--viobg);color:var(--vio)}
.pf-kopf .ic svg{width:17px;height:17px}
.pf-kopf .tx{min-width:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr)}
.pf-kopf .pf-z1{flex-wrap:wrap;column-gap:10px;row-gap:0}
.pf-kopf .tx b{overflow-wrap:anywhere}
.pf-kopf .tx span{color:var(--mut);font-size:var(--fs-s);overflow-wrap:anywhere}
.pf-kv{margin:12px 0 14px;font-size:var(--fs-s);grid-template-columns:auto minmax(0,1fr)}
.pf-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:15px}
.pf-text a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.pf-text.pf-klein{font-size:var(--fs-s);color:var(--fg2);max-height:320px;overflow:auto}
.pf-zitat{border-left:3px solid var(--line2);padding-left:12px;margin:6px 0;color:var(--mut)}
.pf-html{display:block;width:100%;height:70vh;min-height:380px;border:0;border-radius:12px;background:#fff}
.pf-umschalten{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pf-anhaenge{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pf-anhaenge .chip{max-width:100%;overflow-wrap:anywhere;text-decoration:none}
.pf-anhaenge .chip svg{width:14px;height:14px;flex:none}
.pf-schreiben textarea{min-height:220px}
@media (max-width:700px){
  .pf-ordner{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pf-ordner::-webkit-scrollbar{display:none}
  .toolbar.pf-ordner .btn{flex:0 0 auto}
  .pf-text{font-size:16px}
  .pf-html{height:65vh}
  .pf-aktionen .btn{flex:1 1 auto}
}
.pf-kopf .pf-z1 b{font-weight:600;color:var(--fg)}
.pf-sigs{display:grid;gap:8px}
.pf-sigs [hidden]{display:none}

/* ===== Als App installieren: Blatt mit den Schritten fürs Gerät (iPhone, Mac-Safari, Firefox) ===== */
.blatt{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--edge2);border-radius:22px;
  background:var(--glass-solid);color:var(--fg);box-shadow:inset 0 1px 0 var(--hi),0 24px 60px rgba(0,0,0,.45);overflow:auto;overscroll-behavior:contain}
.blatt::backdrop{background:rgba(0,0,0,.55)}
:root:not([data-bewegung="aus"]) .blatt[open]{animation:blatt-rein .34s cubic-bezier(.2,.8,.2,1)}
@keyframes blatt-rein{from{opacity:0;transform:translateY(28px)}}
.blatt-kopf{display:flex;gap:14px;align-items:center;padding:22px 22px 4px}
.blatt-kopf img{width:52px;height:52px;border-radius:13px;flex:none;display:block;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.blatt-kopf h2{margin:0;font-size:19px;line-height:1.25}
.blatt-kopf p{margin:3px 0 0;color:var(--mut);font-size:var(--fs-s)}
.blatt-weg{padding:8px 22px 0}
.blatt-weg>p{margin:10px 0;line-height:1.55}
.blatt-info{color:var(--mut);font-size:var(--fs-s)}
.schritte{list-style:none;counter-reset:schritt;margin:12px 0 6px;padding:0;display:grid;gap:14px}
.schritte li{counter-increment:schritt;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;line-height:1.5}
.schritte li::before{content:counter(schritt);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--goldbg);color:var(--gold);font-weight:650;font-size:14px}
.schritte li>span{padding-top:4px}
.schritte svg{width:17px;height:17px;vertical-align:-3px;color:var(--gold)}
.blatt-fuss{padding:16px 22px 22px}
/* Am Handy kommt das Blatt von unten, wie die Blätter von iOS. */
@media (max-width:560px){
  .blatt{width:100%;max-width:none;max-height:calc(100dvh - 48px);margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}
  .blatt-fuss{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
}
/* Knopf, der wie ein Link aussieht (z. B. unter der Anmeldung) */
.text-knopf{display:inline-flex;align-items:center;gap:6px;padding:6px 4px;border:0;background:none;color:var(--mut);font:inherit;cursor:pointer}
.text-knopf:hover{color:var(--gold)}
.text-knopf svg{width:16px;height:16px}

/* ===== Rückmeldung mit Animation (public/app.js, „Rückmeldung mit Animation“) =====
   Nur transform, opacity und kurze Strich-Animationen an einem kleinen Symbol: bleibt auch am iPhone flüssig.
   Bei „Animationen: Aus“ oder „Bewegung reduzieren“ legt app.js nichts davon an. */

/* Knopf beim Abschicken: Inhalt blendet aus, ein Ring dreht sich. Bei „Senden“ fliegt der Papierflieger erst los. */
.btn.laeuft{position:relative;pointer-events:none;color:transparent!important;--lauf:var(--fg)}
.btn.pri.laeuft{--lauf:var(--goldfg)}
.btn.dng.laeuft{--lauf:var(--bad)}
.btn.laeuft>*{opacity:0;transition:opacity .15s}
.btn.laeuft::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--lauf) 28%,transparent);border-top-color:var(--lauf);animation:e-drehen .7s linear infinite,e-ein .2s ease both}
.btn.laeuft[data-laeuft="senden"]>svg{opacity:1;animation:e-knopf-flieger .5s cubic-bezier(.5,0,.75,0) both;color:var(--lauf)}
.btn.laeuft[data-laeuft="senden"]::after{animation:e-drehen .7s linear infinite,e-ein .2s ease .38s both}
@keyframes e-knopf-flieger{30%{transform:translate(-3px,2px) rotate(4deg)}to{transform:translate(34px,-26px) rotate(-12deg) scale(.6);opacity:0}}
@keyframes e-drehen{to{transform:rotate(360deg)}}
@keyframes e-ein{from{opacity:0}}

/* Fehlermeldung: kurz schütteln */
:root:not([data-bewegung="aus"]) .page>.note.bad{animation:einschweben .35s cubic-bezier(.2,.8,.2,1) both,e-wackeln .45s ease .3s}
@keyframes e-wackeln{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* Stempel in der Mitte nach einer Aktion */
.erfolg{position:fixed;inset:0;z-index:400;display:grid;place-content:center;justify-items:center;gap:14px;pointer-events:none;color:var(--gold);
  --fd:.55s;animation:e-ein .2s ease both}
.erfolg::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.34),transparent 58%)}
:root[data-theme="light"] .erfolg::before{background:radial-gradient(circle at 50% 50%,rgba(60,40,20,.14),transparent 58%)}
.erfolg.weg{animation:e-raus .38s ease both}
@keyframes e-raus{to{opacity:0}}
.erfolg-k{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:var(--glass-solid);border:1px solid var(--edge2);
  box-shadow:inset 0 1px 0 var(--hi),var(--shadow),0 0 0 6px color-mix(in srgb,var(--goldf) 10%,transparent);animation:e-plopp .55s cubic-bezier(.3,1.5,.5,1) both}
.erfolg.weg .erfolg-k{animation:e-klein .38s cubic-bezier(.5,0,.75,0) both}
@keyframes e-plopp{from{transform:scale(.4);opacity:0}60%{opacity:1}}
@keyframes e-klein{to{transform:scale(.85)}}
/* Welle, wenn es geklappt hat */
.erfolg-k::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--goldf);opacity:0;animation:e-welle .7s cubic-bezier(.2,.8,.2,1) var(--fd) both}
@keyframes e-welle{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
.erfolg-glanz{position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(circle,var(--goldbg),transparent 68%);opacity:0;animation:e-glanz 1.2s ease var(--fd) both}
@keyframes e-glanz{30%{opacity:1}to{opacity:.35}}
.erfolg-k svg{position:relative;width:74px;height:74px;overflow:visible}
.erfolg-k svg g,.erfolg-k svg path,.erfolg-k svg rect,.erfolg-k svg circle{transform-box:fill-box;transform-origin:center}
.erfolg-t{font-family:var(--font-d,inherit);font-size:16px;font-weight:650;letter-spacing:.01em;color:var(--fg);padding:7px 16px;border-radius:99px;
  background:var(--glass-solid);border:1px solid var(--edge);box-shadow:var(--shadow-s);animation:e-text .45s cubic-bezier(.2,.8,.2,1) calc(var(--fd) - .15s) both}
@keyframes e-text{from{opacity:0;transform:translateY(10px) scale(.95)}}
/* Funken fliegen nach außen (Richtung setzt app.js) */
.erfolg-funken{position:absolute;inset:0}
.erfolg-funken i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--goldf);opacity:0;
  animation:e-funke .75s cubic-bezier(.15,.75,.3,1) var(--fd) both}
.erfolg-funken i:nth-child(2n){background:var(--vio);width:6px;height:6px;margin:-3px}
.erfolg-funken i:nth-child(3n){width:5px;height:5px;margin:-2.5px;animation-duration:.9s}
@keyframes e-funke{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}70%{opacity:1}to{opacity:0;transform:translate(var(--fx),var(--fy)) scale(1)}}

/* Gezeichnete Linien: Ring, Haken, Kreuz */
.e-ring,.e-haken,.e-x1,.e-x2{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:e-zeichnen .42s cubic-bezier(.6,0,.3,1) .08s forwards}
.e-ring{--l:164;opacity:.35;transform:rotate(-90deg)}
.e-haken{--l:36;animation-delay:.36s;animation-duration:.3s}
.e-x1,.e-x2{--l:27;animation-delay:.36s;animation-duration:.22s}
.e-x2{animation-delay:.52s}
@keyframes e-zeichnen{to{stroke-dashoffset:0}}

/* Senden: Papierflieger fliegt durch und hinaus, danach Haken */
.erfolg[data-art="senden"]{--fd:.98s}
.e-flieger{animation:e-flug 1.05s cubic-bezier(.45,0,.3,1) both}
@keyframes e-flug{0%{opacity:0;transform:translate(-38px,30px) scale(.45) rotate(8deg)}28%{opacity:1;transform:none}46%{transform:translate(-5px,4px) rotate(4deg)}
  78%{opacity:1}100%{opacity:0;transform:translate(64px,-56px) scale(.5) rotate(-14deg)}}
.e-spur path{stroke-dasharray:2 7;opacity:0;animation:e-spur .9s ease .3s both}
@keyframes e-spur{30%{opacity:.55}to{opacity:0;transform:translate(14px,-12px)}}
.erfolg[data-art="senden"] .e-ring{animation-delay:.74s}
.erfolg[data-art="senden"] .e-haken{animation-delay:1s}

/* Angelegt: Plus dreht sich hinein */
.erfolg[data-art="angelegt"]{--fd:.5s}
.e-plus{animation:e-plus .5s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes e-plus{from{opacity:0;transform:rotate(-135deg) scale(.2)}}

/* Archiv: Kiste kommt hoch, Deckel fällt drauf */
.erfolg[data-art="archiv"]{--fd:.5s}
.e-kiste{animation:e-hoch .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes e-hoch{from{opacity:0;transform:translateY(10px)}}
.e-deckel{animation:e-deckel .5s cubic-bezier(.5,0,.4,1.4) .12s both}
@keyframes e-deckel{from{opacity:0;transform:translateY(-28px) rotate(-14deg)}55%{opacity:1}}
.erfolg[data-art="archiv"] svg{animation:e-stauchen .3s ease .52s}
@keyframes e-stauchen{40%{transform:scale(1.08,.9)}}

/* Löschen: Deckel klappt auf, Blatt fällt hinein, Deckel zu */
.erfolg[data-art="loeschen"]{--fd:.78s;color:var(--bad)}
.erfolg[data-art="loeschen"] .e-deckel{transform-box:view-box;transform-origin:13px 22px;animation:e-klappe .8s cubic-bezier(.4,0,.2,1) both}
@keyframes e-klappe{0%{transform:none}25%,55%{transform:rotate(-32deg)}75%{transform:rotate(3deg)}to{transform:none}}
.e-blatt{animation:e-fallen .55s cubic-bezier(.5,0,.8,.4) .18s both}
@keyframes e-fallen{0%{opacity:0;transform:translateY(-10px) rotate(-12deg)}20%{opacity:1}80%{opacity:1}to{opacity:0;transform:translateY(30px) rotate(10deg) scale(.7)}}
.erfolg[data-art="loeschen"] .e-eimer{animation:e-ruetteln .3s ease .72s}
@keyframes e-ruetteln{30%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}}

/* Wiederhergestellt / wieder offen: Pfeil dreht zurück */
.erfolg[data-art="zurueck"]{--fd:.62s}
.e-dreh{animation:e-zurueck .7s cubic-bezier(.3,1.2,.5,1) both}
@keyframes e-zurueck{from{opacity:0;transform:rotate(300deg) scale(.5)}}

/* Storniert: Ring und Kreuz */
.erfolg[data-art="storniert"]{--fd:.7s;color:var(--bad)}

/* Bezahlt: Münze fällt und dreht sich */
.erfolg[data-art="bezahlt"]{--fd:.85s}
.erfolg[data-art="bezahlt"] svg{animation:e-muenze .95s cubic-bezier(.2,.8,.2,1) both}
@keyframes e-muenze{0%{opacity:0;transform:translateY(-34px) rotateY(0)}30%{opacity:1}to{transform:rotateY(720deg)}}

/* Abgeholt: Brief fällt herein */
.erfolg[data-art="abholen"]{--fd:.5s}
.e-brief{animation:e-brief .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes e-brief{from{opacity:0;transform:translateY(-34px) rotate(-8deg)}}

/* Schloss: zu (gesperrt) oder auf (entsperrt, angemeldet) */
.erfolg[data-art="gesperrt"]{--fd:.45s}
.erfolg[data-art="gesperrt"] .e-buegel{animation:e-zu .4s cubic-bezier(.5,0,.4,1.6) .1s both}
@keyframes e-zu{from{transform:translateY(-9px)}}
.erfolg[data-art="gesperrt"] .e-schloss,.erfolg[data-art="entsperrt"] .e-schloss,.erfolg[data-art="hallo"] .e-schloss{animation:e-ruetteln .25s ease .38s}
:is(.erfolg[data-art="entsperrt"],.erfolg[data-art="hallo"]){--fd:.5s}
:is(.erfolg[data-art="entsperrt"],.erfolg[data-art="hallo"]) .e-buegel{transform-box:view-box;transform-origin:42px 29px;animation:e-auf .45s cubic-bezier(.3,1.4,.5,1) .15s both}
@keyframes e-auf{to{transform:translateY(-6px) rotate(24deg)}}

/* Abgeschlossen: Blatt kommt hoch, Haken */
.erfolg[data-art="fertig"]{--fd:.62s}
.e-blatt2{animation:e-hoch .4s cubic-bezier(.2,.8,.2,1) both}
.erfolg[data-art="fertig"] .e-haken{--l:28;animation-delay:.32s}

/* Willkommen: Stern dreht sich auf */
.erfolg[data-art="willkommen"]{--fd:.4s}
.e-stern{animation:e-stern .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes e-stern{from{opacity:0;transform:rotate(-200deg) scale(.2)}}

/* Abgemeldet: Pfeil geht zur Tür hinaus, keine Funken */
.erfolg[data-art="tschuess"]{--fd:.4s}
.erfolg[data-art="tschuess"] .erfolg-funken,.erfolg[data-art="tschuess"] .erfolg-k::after{display:none}
.e-pfeil{animation:e-hinaus 1.1s cubic-bezier(.4,0,.2,1) .15s both}
@keyframes e-hinaus{0%{opacity:0;transform:translateX(-14px)}30%,60%{opacity:1;transform:none}to{opacity:0;transform:translateX(18px)}}

/* Kleine Pille oben, z. B. nach „Neu laden“ */
.erfolg-pille{position:fixed;z-index:400;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);display:flex;align-items:center;gap:7px;padding:8px 15px 8px 12px;
  border-radius:99px;background:var(--glass-solid);border:1px solid var(--edge2);box-shadow:var(--shadow-s);font-size:14px;font-weight:600;color:var(--fg);pointer-events:none;
  transform:translateX(-50%);animation:e-pille .45s cubic-bezier(.3,1.4,.5,1) both}
.erfolg-pille svg{width:17px;height:17px;color:var(--ok)}
.erfolg-pille path{stroke-dasharray:22;stroke-dashoffset:22;animation:e-zeichnen .3s ease .2s forwards}
.erfolg-pille.weg{animation:e-pille-weg .35s ease both}
@keyframes e-pille{from{opacity:0;transform:translate(-50%,-16px) scale(.9)}}
@keyframes e-pille-weg{to{opacity:0;transform:translate(-50%,-10px)}}
@media (prefers-reduced-motion:reduce){.erfolg,.erfolg-pille{display:none}}

/* Verträge (src/vertraege/routen.ts) */
.vt-wahl{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.vt-wahl .wahl-k{grid-template-columns:1fr;align-items:start;align-content:start;row-gap:3px;position:relative;padding-right:42px}
/* Mehrere Vorlagen ankreuzen: sichtbares Kästchen oben rechts, damit klar ist, dass mehrere gehen */
.vt-wahl .wahl-k::after{content:"";position:absolute;top:11px;right:12px;width:20px;height:20px;box-sizing:border-box;border-radius:6px;border:1.5px solid var(--mut2);background:var(--glass2);transition:background-color .15s,border-color .15s}
.vt-wahl .wahl-k::before{content:"";position:absolute;top:14px;right:19px;width:6px;height:11px;box-sizing:border-box;border:solid var(--goldfg);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;z-index:1;transition:opacity .15s,transform .15s}
.vt-wahl input:checked+.wahl-k::after{border-color:var(--goldf);background:var(--goldf)}
.vt-wahl input:checked+.wahl-k::before{opacity:1;transform:rotate(45deg)}
.vt-zurueck{margin:0 0 14px}
.vt-liste{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.vt-liste .s,.vt-verlauf .s{color:var(--mut);font-size:var(--fs-s);margin-top:2px}
.card>.bd>.vt-liste:last-child{margin-bottom:0}
.vt-verlauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.vt-verlauf li{padding-left:12px;border-left:2px solid var(--line2)}
/* Nachweis der Online-Annahme: lange Prüfsummen und Browser-Kennungen brechen überall um */
.kv dd .s{color:var(--mut);font-size:var(--fs-s);margin-top:2px}
.vt-nachweis .mono{overflow-wrap:anywhere}
.vt-nachweis .bd>p.small{margin:14px 0 0}
.vt-erklaert{margin:0;padding-left:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.vt-checks{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:12px}
.vt-summe td{border-top:1px solid var(--line2)}
.vt-schritt{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line2)}
.vt-schritt>div{flex:1 1 220px;min-width:0}
.vt-schritt .s{color:var(--mut);font-size:var(--fs-s);margin-top:2px}
.vt-schritt form{flex:none}
details.mehr.loeschen>summary{color:var(--bad)}
details.mehr.loeschen .aktionen{padding-bottom:14px}
.f>.fehler,.vt-annahme .fehler{display:block;font-size:12.5px;color:var(--bad);font-weight:600;margin:4px 0 10px}
.vt-checks.mit-fehler .check{color:var(--bad)}
/* Annahmeseite für Kunden (öffentlich, ohne app.js) */
.oeffentlich .kv{margin:18px 0}
.oeffentlich .bd>.btn.voll{margin:4px 0 18px}
.oeffentlich .bd>p.small{margin:14px 0}
.vt-annahme fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.vt-annahme fieldset[disabled]{opacity:.65}
.vt-annahme .check{align-items:flex-start}
.vt-annahme .check input{margin-top:1px;flex:none}
.vt-annahme .check.mit-fehler{color:var(--bad)}
.vt-annahme .fehler{margin-top:-6px}
details.mehr.vt-info .vt-info-text{padding-bottom:12px;font-size:14px;color:var(--fg2);overflow-wrap:anywhere}
details.mehr.vt-info .vt-info-text p{margin:0 0 9px}
.vt-annahme .btn{white-space:normal;height:auto;min-height:44px;padding:10px 16px;line-height:1.3;text-align:center}
.bd>.vt-schritt:first-child{border-top:0;padding-top:0}
/* Pakete (mehrere Verträge zusammen): Vertragsnummern nicht am Bindestrich umbrechen */
.vt-nr{white-space:nowrap}

/* ===== Formulare ordnen (10.11.2026, Brian: „die Pillen gehen bis zum Rand, das sieht unübersichtlich aus“) =====
   1. Kein Feld klebt am Kartenrand: Ein Formular direkt in der Karte bekommt denselben Innenabstand wie .bd.
   2. Reine Formularseiten (nur eine Karte mit Formular: Neu, Bearbeiten) werden nicht breiter als nötig. Auf großen Bildschirmen
      liefen einzelne Felder sonst über 1100 px; das Auge findet den Anfang der nächsten Zeile nicht mehr.
   3. Felder einer Zeile stehen oben bündig, auch wenn nur eines einen Hinweis darunter hat.
   4. Haken stehen nebeneinander in Spalten statt einzeln untereinander, Abschnitte bekommen eine Überschrift. */
.card>form.f:not(:has(>.bd)){padding:16px 18px 18px}
.page:has(form.f):not(:has(.grid,table,.tw,.kpis,.list,.voll-breit,.card~.card)){max-width:1000px}
/* Auch in breiten Karten (z. B. Rechnung mit Positionen) laufen Felder nicht über 1000 px. */
.felder{align-items:start;max-width:1000px}
.field{align-content:start}
.haken-gruppe{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px 20px;min-width:0}
.haken-gruppe .check{min-height:36px;padding:6px 12px 6px 10px;border:1px solid var(--edge);border-radius:var(--r-s);background:var(--glass2);cursor:pointer;transition:border-color .15s,background-color .15s}
.haken-gruppe .check:hover{border-color:var(--edge2)}
.haken-gruppe .check:has(input:checked){border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:var(--goldbg)}
/* „Zuständig“ bei Projekten: mehrere Personen, Überschrift wie ein Feld-Label, schmalere Kacheln. */
.zust-wahl{gap:6px}
.zust-wahl legend{font-size:13px;color:var(--fg2);font-weight:600;margin-bottom:6px}
.zust-wahl .haken-gruppe{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:8px 10px}
.zust-wahl .hilfe{font-size:12.5px;margin:0}
.felder>.abschnitt{grid-column:1/-1;margin:10px 0 -2px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.felder>.abschnitt:first-of-type{margin-top:0;padding-top:0;border-top:0}
.felder>.breit:has(>.check)+.breit:has(>.check){margin-top:-4px}
.felder>.breit:not(.field)>.hilfe{display:block;font-size:12.5px;color:var(--mut);margin:4px 0 0 29px}
.aktionen{padding-top:4px}
/* Eine Spalte, die nie breiter wird als die Karte: Langer Text ohne Leerzeichen (Adressen wie http://…/api/v1/anfragen, E-Mails)
   machte die Spalte sonst so breit wie das längste Wort, und die Karte schnitt Felder und Knöpfe rechts ab (Handy). */
.card>.bd,form.f,.card>form>.bd,.aufg-neu{grid-template-columns:minmax(0,1fr)}
.aufg-prio label{min-width:0}
.card code,.field .hilfe,.card p{overflow-wrap:anywhere}
@media (max-width:700px){
  .card>form.f:not(:has(>.bd)){padding:16px}
  .haken-gruppe{grid-template-columns:minmax(0,1fr);gap:8px}
  .haken-gruppe .check{min-height:48px}
  .felder>.abschnitt{font-size:13.5px}
  .felder>.breit:not(.field)>.hilfe{font-size:13.5px}
}

/* ---------- Profil: Profilbild, Titelbild, Status (src/ui/person.ts, src/auth/profil-routen.ts) ----------
   Bilder sind auf dem Gerät schon zugeschnitten (rund 512 px bzw. 1500 × 500 px) und füllen ihre Fläche ganz aus.
   Auf Titelflächen steht nie Text, nur Knöpfe mit eigener dunkler Fläche: So bleibt alles auf jedem Bild lesbar. */
.avatar{position:relative;flex:none}
.avatar.mit-bild{background:var(--glass2)}
.avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.avatar.mini{width:22px;height:22px;font-size:9px;border-width:1px;box-shadow:none}
.avatar.klein{width:34px;height:34px;font-size:12.5px}
.avatar.riesig{width:104px;height:104px;font-size:36px;margin:0}
/* Status-Punkt unten rechts, mit Rand in der Farbe der Fläche darunter. */
.avatar .st{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:9px;min-height:9px;border-radius:50%;background:var(--mut);box-shadow:0 0 0 2px var(--glass-solid)}
.avatar.riesig .st{right:4px;bottom:4px;width:22px;height:22px;box-shadow:0 0 0 3px var(--glass-solid)}
[data-st="buero"]{--st:var(--ok)}[data-st="homeoffice"]{--st:var(--info)}[data-st="unterwegs"]{--st:var(--gold)}
[data-st="termin"]{--st:var(--bad)}[data-st="abwesend"]{--st:var(--warn)}[data-st="urlaub"]{--st:var(--vio)}
.avatar .st[data-st]{background:var(--st)}
.st-pille::before{display:none}
.st-pille svg{width:13px;height:13px;flex:none}
.side .foot .ich .avatar{box-shadow:none}
.side .foot .ich>span:last-child{min-width:0}
.side .foot .ich small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar .avatar.mini{width:24px;height:24px}
.tabbar .on .avatar.mini{box-shadow:0 0 0 2px var(--gold)}
.aufg-wer .avatar.mini{width:18px;height:18px}
.personen .st-text{display:flex;align-items:center;gap:6px;color:var(--fg2)}
.personen .st-text::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--st);flex:none}

/* Titelfläche: eigenes Bild oder ein Muster. Seitenverhältnis wie das zugeschnittene Bild (3 : 1). */
.titelbild{position:relative;display:block;aspect-ratio:3/1;overflow:hidden;background:var(--sb,#17130E)}
.titelbild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.titelbild:not(:has(>img))::before,.titelbild:not(:has(>img))::after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}
.titelbild:not(:has(>img))::before{width:70%;aspect-ratio:1;right:-12%;top:-80%;background:radial-gradient(circle,var(--s1) 0,color-mix(in srgb,var(--s1) 40%,transparent) 38%,transparent 70%)}
.titelbild:not(:has(>img))::after{width:60%;aspect-ratio:1;left:-14%;bottom:-110%;background:radial-gradient(circle,var(--s2) 0,color-mix(in srgb,var(--s2) 40%,transparent) 38%,transparent 70%)}
.titelbild[data-muster="thema"]{--sb:color-mix(in srgb,var(--bg) 70%,#000);--s1:var(--goldf);--s2:var(--vio)}
:root[data-theme="light"] .titelbild[data-muster="thema"]{--sb:color-mix(in srgb,var(--bg) 80%,var(--goldf))}
.titelbild[data-muster="smelonetics"]{--sb:#17130E;--s1:#FFB42E;--s2:#8F74FF}
.titelbild[data-muster="tiefsee"]{--sb:#051419;--s1:#22C3D6;--s2:#3C6EFF}
.titelbild[data-muster="nordlicht"]{--sb:#08150F;--s1:#2FD6A0;--s2:#A06BFF}
.titelbild[data-muster="abendrot"]{--sb:#1B0D0A;--s1:#FF8A3D;--s2:#FF4F8B}
.titelbild[data-muster="graphit"]{--sb:#1E1C1A;--s1:#6F6A63;--s2:#3E3A35}
.titelbild[data-muster="linien"]{--sb:color-mix(in srgb,var(--bg) 75%,#000);--s1:transparent;--s2:transparent;
  background:repeating-radial-gradient(circle at 85% 120%,transparent 0 14px,color-mix(in srgb,var(--goldf) 34%,transparent) 14px 15.5px),var(--sb)}
:root[data-theme="light"] .titelbild[data-muster="linien"]{--sb:color-mix(in srgb,var(--bg) 85%,var(--goldf))}

/* Profilkopf: Titelfläche oben, das Profilbild ragt hinein, darunter Name, Position, Status. */
.profil-kopf .titelbild{max-height:260px;width:100%}
/* Nur das Bild ragt in die Titelfläche, Name und Knöpfe stehen immer darunter (Text auf einem Foto wäre nicht sicher lesbar). */
.pk-inhalt{display:flex;align-items:flex-start;gap:16px;padding:0 20px 18px;margin-top:-46px;position:relative;flex-wrap:wrap}
.pk-bild{position:relative;flex:none}
.pk-bild .avatar.riesig{box-shadow:0 0 0 4px var(--glass-solid),var(--shadow-s)}
.pk-text{flex:1 1 220px;min-width:0;display:grid;gap:4px;padding-bottom:2px;margin-top:56px}
.pk-text h2{margin:0;font-family:var(--display);font-size:calc(22px + var(--plus,0px));line-height:1.2;overflow-wrap:anywhere}
.pk-unter{margin:0;color:var(--mut);font-size:var(--fs-s)}
.pk-zeile{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:2px}
.pk-notiz{color:var(--fg2);font-size:var(--fs-s)}
.pk-akt{display:flex;gap:8px;flex-wrap:wrap;margin-top:60px}
/* Knöpfe auf Bildern: eigene dunkle Fläche, weiße Schrift, auf jedem Bild lesbar. */
.pk-titel-knopf,.pk-bild-knopf{position:absolute;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:#fff;background:rgba(12,10,8,.72);border:1px solid rgba(255,255,255,.28);text-decoration:none;font-weight:600}
.pk-titel-knopf{top:12px;right:12px;min-height:38px;padding:0 14px;border-radius:99px;font-size:calc(13px + var(--plus-k,0px));z-index:1}
.pk-titel-knopf svg,.pk-bild-knopf svg{width:16px;height:16px}
.pk-bild-knopf{right:-2px;bottom:-2px;width:38px;height:38px;border-radius:50%;z-index:1}
.pk-titel-knopf:hover,.pk-bild-knopf:hover{background:rgba(12,10,8,.86)}
.pk-titel-knopf:focus-visible,.pk-bild-knopf:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}
@media (max-width:700px){
  .pk-inhalt{padding:0 16px 16px;margin-top:-40px;gap:12px}
  .avatar.riesig{width:88px;height:88px;font-size:30px}
  .avatar.riesig .st{width:20px;height:20px;right:2px;bottom:2px}
  .pk-text{flex-basis:100%;margin-top:0}
  .pk-akt{width:100%;margin-top:0}
  .pk-titel-knopf{top:10px;right:10px;min-height:40px}
  .pk-bild-knopf{width:40px;height:40px}
}

/* Profil bearbeiten: Bilder, Status, Muster. */
.profil-raster{align-items:start}
.bild-zeilen{display:grid;gap:14px}
.bild-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center}
.bz-vorschau .titelbild{width:132px;border-radius:12px;border:1px solid var(--edge)}
.bz-text{display:grid;gap:2px;min-width:0}
.bz-text small{color:var(--mut);font-size:var(--fs-xs)}
.bz-akt{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bz-akt form{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.bz-akt input[type=file]:focus-visible+label{outline:2.5px solid var(--gold);outline-offset:2px}
.status-wahl{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px;min-width:0}
.status-wahl legend{font-size:13px;color:var(--fg2);font-weight:600;padding:0;margin-bottom:8px}
.sw{position:relative;display:block;cursor:pointer}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sw>span{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border-radius:var(--r-s);border:1px solid var(--edge);background:var(--glass2);font-weight:600;font-size:calc(13.5px + var(--plus,0px));color:var(--fg)}
.sw>span svg{width:17px;height:17px;flex:none;color:var(--st,var(--mut))}
.sw input:checked+span{border-color:var(--st,var(--gold));box-shadow:0 0 0 1px var(--st,var(--gold));background:var(--glass3)}
.sw input:focus-visible+span{outline:2.5px solid var(--gold);outline-offset:2px}
.muster-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.muster-wahl{position:relative;display:grid;gap:6px;padding:8px;border-radius:var(--r-s);border:1px solid var(--edge);background:var(--glass2);cursor:pointer}
.muster-wahl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.muster-wahl .titelbild{border-radius:8px}
.mw-text{display:grid;gap:1px;min-width:0}
.mw-text small{color:var(--mut);font-size:var(--fs-xs)}
.muster-wahl:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:var(--goldbg)}
.muster-wahl:has(input:focus-visible){outline:2.5px solid var(--gold);outline-offset:2px}

/* Bild zuschneiden (app.js zeichnet in die Fläche). */
.blatt.zuschnitt{width:min(560px,calc(100vw - 24px))}
.zs-rahmen{padding:10px 22px 0;display:grid;justify-items:center}
.zs-rahmen canvas{display:block;width:100%;max-width:100%;border-radius:14px;touch-action:none;cursor:grab;background:#000}
.zs-rahmen canvas:active{cursor:grabbing}
.zs-rahmen canvas:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}
.zs-zoom{display:flex;align-items:center;gap:10px;padding:14px 22px 0;color:var(--mut)}
.zs-zoom input{flex:1;accent-color:var(--goldf);min-height:32px}
.zs-zoom svg{width:18px;height:18px;flex:none}
.zs-fehler{margin:12px 22px 0}
.zs-fuss{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:16px 22px 20px}
.blatt.zuschnitt[aria-busy="true"] .zs-fuss .btn{opacity:.6;pointer-events:none}
@media (max-width:700px){
  .zs-rahmen,.zs-zoom{padding-left:16px;padding-right:16px}
  .zs-fuss{padding:16px}
  .zs-fuss .btn{flex:1 1 0}
}

/* Übersicht: Team heute. */
.team{list-style:none;margin:0;padding:0;display:grid;gap:4px;grid-template-columns:minmax(0,1fr)}
.team li{display:flex;align-items:center;gap:8px;min-width:0}
.tm-p{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-s);color:inherit;text-decoration:none}
a.tm-p:hover{background:var(--glass2)}
.tm-text{display:grid;min-width:0}
.tm-text b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-text small{color:var(--mut);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-tel svg{width:17px;height:17px}

/* ===== Online-Status (src/anwesenheit.ts): grüner Ring, Zeile „Online“, Block „Gerade online“ im Menü ===== */
.avatar.online{box-shadow:0 0 0 2px var(--glass-solid),0 0 0 4px var(--ok)}
.avatar.mini.online{box-shadow:0 0 0 1.5px var(--glass-solid),0 0 0 3px var(--ok)}
.anw{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anw.an{color:var(--ok);font-weight:600}
.anw.an::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.anw[hidden]{display:none}
.anw-pille[hidden]{display:none}
/* Oben rechts: bis zu drei Profilbilder mit grünem Ring, dazu die Zahl. Antippen öffnet das Menü „Gerade online“. */
.onl{flex:none;position:static}
.onl[hidden]{display:none}
.onl-kopf{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 8px 0 8px;border-radius:999px;border:1px solid var(--edge);background:var(--glass2);color:var(--ok);font-weight:700;font-size:13px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.onl-kopf::-webkit-details-marker{display:none}
.onl-kopf::marker{content:""}
.onl-kopf>svg{width:14px;height:14px;color:var(--mut);transform:rotate(90deg);transition:transform .2s}
.onl[open]>.onl-kopf{background:var(--glass3);border-color:var(--edge2)}
.onl[open]>.onl-kopf>svg{transform:rotate(-90deg)}
@media (hover:hover){.onl-kopf:hover{background:var(--glass3)}}
.onl-stapel{display:inline-flex;align-items:center;padding-left:4px}
.onl-stapel .avatar.mini{width:24px;height:24px;font-size:9.5px;margin-left:-6px}
.onl-zahl{display:inline-flex;align-items:center;gap:5px}
.onl-zahl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
/* Das Menü hängt am Seitenkopf (nicht am Knopf): So passt es am Handy immer auf den Bildschirm, egal wo der Knopf steht. */
.onl-menue{position:absolute;z-index:30;top:calc(100% + 6px);right:max(12px,env(safe-area-inset-right,0px));width:min(340px,calc(100% - 24px));max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
  display:grid;gap:6px;grid-template-columns:minmax(0,1fr);padding:12px 14px 14px;border-radius:var(--r);border:1px solid var(--edge2);background:var(--glass-solid);box-shadow:var(--shadow);color:var(--fg)}
.onl-titel{margin:2px 0 0;color:var(--mut);font-size:var(--fs-xs);font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.onl-menue .tm-p{margin:0 -6px;padding:6px}
.onl-weg .tm-text b{font-weight:550}
.onl-alle{justify-self:start;margin-top:4px}
@media (prefers-reduced-motion:no-preference){:root:not([data-bewegung="aus"]) .onl[open]>.onl-menue{animation:onl-auf .18s cubic-bezier(.2,.8,.2,1)}}
@keyframes onl-auf{from{opacity:0;transform:translateY(-6px) scale(.98)}}
/* Handy: neben dem Seitentitel (erste Zeile), die Knöpfe bleiben darunter wie bisher. */
@media (max-width:700px){.top .acts{order:1}.onl-kopf{height:34px;padding:0 6px 0 6px;gap:4px}.onl-kopf>svg{width:12px;height:12px}}
@media (max-width:440px){.onl-stapel .avatar.mini:nth-child(n+3){display:none}}
@media (prefers-reduced-motion:no-preference){.anw.an::before{animation:anw-puls 2.4s ease-in-out infinite}}
@keyframes anw-puls{0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 26%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 8%,transparent)}}
:root[data-bewegung="aus"] .anw.an::before{animation:none}

/* ===== Angebote (src/angebote/) und Unterlagen vom Kunden (src/webseiten/unterlagen-routen.ts) ===== */
.lbl{display:block;font-size:13px;font-weight:600;color:var(--fg2);margin-bottom:6px}
.ag-preise{margin:16px 0 4px}
.ag-preise td:first-child{overflow-wrap:anywhere}
.ag-weiter{margin:4px 0 14px;padding-left:22px;display:grid;gap:6px;font-size:var(--fs-s)}
details.mehr>.ag-weiter{margin-top:0}
.ul-fort{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.ul-fort progress{flex:1 1 160px;min-width:0;height:10px;border:0;border-radius:6px;overflow:hidden;background:var(--glass3);accent-color:var(--goldf);-webkit-appearance:none;appearance:none}
.ul-fort progress::-webkit-progress-bar{background:var(--glass3);border-radius:6px}
.ul-fort progress::-webkit-progress-value{background:var(--goldf);border-radius:6px}
.ul-fort progress::-moz-progress-bar{background:var(--goldf);border-radius:6px}
.ul-fort .s{color:var(--mut)}
.ul-dateien{list-style:none;margin:8px 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ul-dateien li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.ul-dateien li>a{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.ul-dateien li>a svg{width:16px;height:16px;flex:none}
.ul-dateien form{margin-left:auto}
details.ul-punkt>summary>span{flex:1 1 auto;min-width:0}
details.ul-punkt>summary .pill{margin:0 10px}
details.ul-punkt[open]{padding-bottom:14px}
details.ul-punkt fieldset .check,details.ul-punkt .felder .check{align-items:flex-start}
.ul-code{font-size:1.15em;display:inline-block;max-width:100%}
.ul-kopf{justify-content:space-between}
.ul-wahl{border:0;padding:0;margin:0;display:grid;gap:6px;min-width:0}

/* Ausgaben (src/ausgaben/routen.ts): Belege fotografieren, noch zu erfassen, weitere Seiten */
.beleg-knoepfe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0}
.beleg-form{display:grid;gap:6px;min-width:0;margin:0}
.btn.beleg-knopf{height:auto;min-height:58px;width:100%;border-radius:16px;padding:10px 12px;white-space:normal;text-align:center;line-height:1.25}
.beleg-knopf .i{width:22px;height:22px;flex:none}
.beleg-knopf:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.beleg-knoepfe .beleg-status{grid-column:1/-1;margin:0}
.beleg-knoepfe.laedt .beleg-knopf{opacity:.55;pointer-events:none}
.belege-offen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.belege-offen li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--edge)}
.belege-offen li:last-child{border-bottom:0}
.belege-offen .vorschau{display:block;width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--glass3)}
.belege-offen img{display:block;width:56px;height:56px;object-fit:cover}
.belege-offen .ic,.weiterer .ic{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--mut)}
.belege-offen .nm{min-width:0;display:grid;gap:2px}.belege-offen .nm>a{font-weight:600;overflow-wrap:anywhere}
.belege-offen .s{color:var(--mut);font-size:var(--fs-xs)}
.belege-offen .aktion{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:700px){.belege-offen li{grid-template-columns:56px minmax(0,1fr)}.belege-offen .aktion{grid-column:1/-1;justify-content:flex-start}}
fieldset.weitere{border:1px solid var(--edge);border-radius:var(--r-s);padding:10px 12px 12px;margin:14px 0 0;min-width:0}
fieldset.weitere legend{font-weight:600;padding:0 6px}
.weitere-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:8px}
.weiterer{display:grid;gap:4px;align-content:start;min-width:0;cursor:pointer;position:relative}
.weiterer input{position:absolute;top:6px;left:6px;width:20px;height:20px;margin:0}
.weiterer img,.weiterer .ic{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:var(--glass3);border:2px solid transparent}
.weiterer input:checked~img,.weiterer input:checked~.ic{border-color:var(--gold)}
.weiterer .small{overflow-wrap:anywhere;color:var(--mut)}
.beleg-ansicht+.beleg-ansicht{border-top:1px solid var(--edge);padding-top:14px;margin-top:14px}
.beleg-ansicht .kv{margin-bottom:10px}
.toolbar.monate b{padding:0 6px}

/* ---------- Zeiterfassung (src/zeiten/): Streifen oben, große Stoppuhr, Start mit einem Tipp, Einträge, Auswertung ---------- */
.uhr{font-variant-numeric:tabular-nums}
.uhr-streifen{display:flex;align-items:center;gap:10px;margin:0;padding:6px 6px 6px 16px;min-width:0;border-radius:99px;background:var(--goldbg);border:1px solid var(--edge)}
.uhr-ziel{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:inherit;text-decoration:none}
.uhr-ziel .uhr{font-weight:700;color:var(--gold);flex:none}
.uhr-was{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg2)}
.uhr-punkt{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
:root:not([data-bewegung="aus"]) .uhr-punkt{animation:uhr-puls 2s ease-in-out infinite}
@keyframes uhr-puls{50%{opacity:.35;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.uhr-punkt{animation:none!important}}
.uhr-streifen .btn{flex:none}
.uhr-bd{justify-items:center;text-align:center}
.uhr-gross{font-family:var(--display);font-size:56px;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--gold)}
.uhr-info{display:grid;gap:2px;min-width:0;max-width:100%}
.uhr-info b{overflow-wrap:anywhere}
.uhr-info span{color:var(--mut);font-size:var(--fs-s);overflow-wrap:anywhere}
.uhr-art{justify-content:center}
.uhr-stopp{display:grid;gap:10px;width:100%;max-width:520px;margin:0}
.uhr-stopp .row{justify-content:center}
.btn.gross{height:50px;padding:0 30px;font-size:calc(16px + var(--plus,0px))}
.uhr-wechsel{margin:0}
.uhr-wechsel .ziel-liste{margin:0 -14px}
.uhr-wechsel .andere-start{padding:12px 0 14px}
.ziel-liste form{margin:0}
.ziel-liste form:not(:last-child) .li{border-bottom:1px solid var(--line)}
.ziel-liste form:last-child .li{border-bottom:0}
.ziel-knopf{width:100%;border:0;border-radius:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ziel-knopf:hover:not([disabled]){background:var(--glass2)}
.ziel-knopf:hover:not([disabled]) .z-start{color:var(--fg)}
.ziel-knopf[disabled]{cursor:default;opacity:1}
.z-start{flex:none;font-weight:650;font-size:var(--fs-s);color:var(--gold)}
.ziel-knopf.an .z-start{color:var(--ok)}
.ziel-hinweis{margin:0;padding-bottom:4px!important}
.andere-start .felder{grid-template-columns:minmax(0,1fr)}
.z-dauer{flex:none;font-weight:650}
.zeit-tag+.zeit-tag{border-top:1px solid var(--line)}
.zeit-tag-kopf{display:flex;justify-content:space-between;gap:12px;margin:0;padding:12px 18px 4px;font-size:var(--fs-s);font-weight:600;color:var(--mut)}
.zeit-vonbis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.zeit-summe{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.zeit-summe b{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.02em}
.zeit-teile{margin:0;color:var(--fg2);font-size:var(--fs-s)}
.zeit-teile.mut{color:var(--mut)}
.zeit-budget{display:grid;gap:5px}
.zeit-budget .rz>span{color:var(--mut);font-size:var(--fs-s);min-width:0}
.zeit-kv .s,.zeit-fuss,.zeit-unter{font-size:var(--fs-s)}
.zeit-unter{margin:0;padding-bottom:0!important;font-weight:600}
.anteil.warn .fg{fill:var(--warn)}.anteil.bad .fg{fill:var(--bad)}
b.num.warn,.warn-text{color:var(--warn)}b.num.bad{color:var(--bad)}
.btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.zeit-tab td .s{white-space:normal}
/* Bau und Pflege nur zwischen den beiden Teilen umbrechen, sonst wird die Zeit-Spalte am PC (1024 px) nur 40 px breit. */
.zeit-tab td .s .ganz{white-space:nowrap}
.t td svg.anteil{width:100%;min-width:80px;height:6px;margin-top:5px;vertical-align:0}
.rang .rz>.num{white-space:nowrap;flex:none}
a.rn{color:var(--fg);text-decoration:none}a.rn:hover{color:var(--gold)}
@media (max-width:700px){
  .uhr-streifen{padding:6px 6px 6px 14px;gap:8px}
  .uhr-gross{font-size:52px}
  .uhr-stopp .row .btn{flex:1 1 auto}
  .btn.gross{min-height:54px}
  .zeit-tag-kopf{padding:12px 16px 4px}
  .li.zl .z-dauer{font-size:15px}
}
@media (max-width:360px){
  .zeit-vonbis{grid-template-columns:minmax(0,1fr)}
  .uhr-gross{font-size:44px}
}

/* Monatsbericht: Vorschau der E-Mail im Rahmen (hell und dunkel), Listen mit Knopf am Ende */
.bericht-rahmen{display:block;width:100%;height:80vh;min-height:520px;border:0;border-radius:12px;background:#fff}
.bericht-rahmen.dunkel{background:#1A1714}
.ereignisse.mit-knopf li{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.ereignisse.mit-knopf li form{margin:0}
@media (max-width:700px){.bericht-rahmen{height:72vh;min-height:420px;border-radius:10px}}
@media (max-width:440px){.ereignisse.mit-knopf li{grid-template-columns:auto minmax(0,1fr)}.ereignisse.mit-knopf li>:last-child:not(:nth-child(2)){grid-column:2;justify-self:start}}

/* Postfach live (public/app.js „Postfach: neue E-Mails erscheinen von selbst“): Die austauschbaren Teile haben keinen eigenen
   Kasten, ihre Inhalte stehen im Raster der Seite wie vorher. Nach einem Austausch gleitet nur die neue Zeile ein. */
.pf-teil{display:contents}
:root:not([data-bewegung="aus"]) .page>.pf-teil>.note{animation:einschweben .35s cubic-bezier(.2,.8,.2,1) both}
:root:not([data-bewegung="aus"]) .page>.pf-teil>:not(.note){animation:rein .38s cubic-bezier(.2,.8,.2,1) backwards}
.page>.pf-teil.pf-still>*{animation:none!important}
:root:not([data-bewegung="aus"]) .pf-li.pf-frisch{animation:pf-frisch .5s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes pf-frisch{from{opacity:0;transform:translateY(-6px)}}
.kunden-sicht{margin:0;padding:0 18px 16px;display:flex;gap:6px;align-items:flex-start}
.kunden-sicht .i{flex:none;width:16px;height:16px;margin-top:2px}
/* Postfach: Versandstand einer aus der Zentrale gesendeten E-Mail (src/mail/senden.ts) */
.pf-versand{margin:10px 0 0}
.pf-mail .note{margin:12px 0 0}
.pf-mail .pf-aktionen{margin:10px 0 0}
/* Blog: Liste, Bearbeiten, Vorschau (src/blog/routen.ts, public/app.js „Blog“). Die Webseite hat eigene Stile: public/blog/blog.css */
.bl-suche{margin-left:auto;min-width:0;flex:1 1 220px;max-width:340px}
.bl-suche .inp{width:100%}
.bl-zeilen{list-style:none;margin:0;padding:0}
.bl-zeile{display:grid;grid-template-columns:96px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
.bl-zeile:first-child{border-top:0}
.bl-zeile__bild{display:grid;place-items:center;width:96px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--glass3);color:var(--mut)}
.bl-zeile__bild img{width:100%;height:100%;object-fit:cover;display:block}
.bl-zeile__bild svg{width:20px;height:20px}
.bl-zeile__titel{font-weight:650;color:var(--fg);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-zeile__titel:hover{text-decoration:underline}
.bl-zeile .s{color:var(--mut);font-size:var(--fs-s);margin-top:3px}
.bl-zeile__stand,.bl-zeile__seo{text-align:right}
@media (max-width:760px){
  .bl-zeile{grid-template-columns:72px minmax(0,1fr);gap:6px 12px;padding:12px 14px}
  .bl-zeile__bild{width:72px;grid-row:span 2}
  .bl-zeile__stand,.bl-zeile__seo{text-align:left;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .bl-zeile__seo{grid-column:2}
  .bl-zeile__stand .s,.bl-zeile__seo .s{margin:0}
}
.bl-bildwahl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bl-bildwahl .hilfe{flex-basis:100%}
.bl-bildwahl__vorschau{flex-basis:100%;max-width:420px;aspect-ratio:16/9;border-radius:var(--r-s);overflow:hidden;background:var(--glass3)}
.bl-bildwahl__vorschau img{width:100%;height:100%;object-fit:cover;display:block}
.bl-werkzeug{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px}
.bl-werkzeug .btn svg{width:15px;height:15px}
.bl-textfeld{min-height:420px;font-family:var(--mono);font-size:calc(14px + var(--plus-k,0px));line-height:1.6;resize:vertical}
.bl-hilfe{margin:8px 0 0}
.bl-hilfe__liste{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.bl-hilfe__liste li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:10px;align-items:baseline;font-size:var(--fs-s)}
.bl-hilfe__liste code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.bl-hilfe__liste li{grid-template-columns:minmax(0,1fr)}}
.bl-zaehler{float:right;font-weight:500;font-size:var(--fs-xs,12px);color:var(--mut);font-variant-numeric:tabular-nums}
.bl-zaehler.zu-lang{color:var(--bad)}
.bl-bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bl-bilder:empty{display:none}
.bl-bilder__bild{margin:0;border:1px solid var(--edge);border-radius:var(--r-s);overflow:hidden;background:var(--glass2);min-width:0}
.bl-bilder__bild img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.bl-bilder__bild figcaption{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px}
.bl-bilder__bild code{font-size:var(--fs-s);margin-right:auto}
.bl-hoch{gap:8px}
.bl-hoch label.btn{cursor:pointer}
.bl-hoch label.btn:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.bl-hoch__status{margin:0}
.bl-hoch__status.bad{color:var(--bad)}
.bl-stand{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0}
.bl-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.bl-titelbild{border-radius:var(--r-s);overflow:hidden;background:var(--glass3);aspect-ratio:16/9}
.bl-titelbild img{width:100%;height:100%;object-fit:cover;display:block}
.bl-titelbild__leer{height:100%;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--mut);font-size:var(--fs-s)}
.bl-titelbild__leer svg{width:26px;height:26px}
.bl-google{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--edge);border-radius:var(--r-s);background:var(--glass2);font-family:Arial,Helvetica,sans-serif;min-width:0}
.bl-google__url{font-size:12.5px;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-google__titel{font-size:18px;line-height:1.3;color:#8ab4f8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
:root[data-theme="light"] .bl-google__titel{color:#1a0dab}
.bl-google__text{font-size:13.5px;line-height:1.5;color:var(--fg2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bl-seo__kopf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.bl-seo ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.bl-seo li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;font-size:var(--fs-s)}
.bl-seo li svg{width:16px;height:16px;margin-top:1px}
.bl-seo li.ok svg{color:var(--ok)}
.bl-seo li.offen svg{color:var(--warn)}
.bl-seo li b{font-weight:550}
.bl-seo li small{display:block;color:var(--mut);margin-top:2px;font-size:inherit}
.bl-vorschau{max-width:72ch;font-size:calc(16px + var(--plus,0px));line-height:1.7;overflow-wrap:break-word}
.bl-vorschau>*{margin:0 0 .9em}
.bl-vorschau h2{font-size:1.35em;line-height:1.3;margin-top:1.4em}
.bl-vorschau h3{font-size:1.12em;margin-top:1.2em}
.bl-vorschau ul,.bl-vorschau ol{padding-left:1.3em}
.bl-vorschau li{margin:.25em 0}
.bl-vorschau a{color:var(--gold)}
.bl-vorschau blockquote{padding:12px 16px;border-left:3px solid var(--gold);background:var(--goldbg);border-radius:0 var(--r-s) var(--r-s) 0}
.bl-vorschau blockquote p{margin:0}
.bl-vorschau blockquote p+p{margin-top:.5em}
.bl-vorschau figure{margin:1.2em 0}
.bl-vorschau img{max-width:100%;height:auto;border-radius:var(--r-s);display:block}
.bl-vorschau figcaption{font-size:var(--fs-s);color:var(--mut);margin-top:6px}
.bl-vorschau hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
/* Webseiten-Check (src/webseiten/check-routen.ts): Prüfpunkte mit Ampel, Sätze fürs Gespräch, Preise */
.wc-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wc-liste li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:10px;align-items:start}
.wc-liste li>.pill{min-width:72px;justify-content:center;margin-top:1px}
.wc-liste li b{font-weight:600;overflow-wrap:anywhere}
.wc-liste li .s{color:var(--mut);font-size:var(--fs-s);margin-top:2px;overflow-wrap:anywhere}
.card .bd>.wc-liste+details.mehr{margin-bottom:0}
details.mehr>.wc-liste{margin:0 0 14px}
.wc-argumente{margin:0;padding-left:1.25em;display:grid;gap:10px}
.wc-argumente li{padding-left:2px}
.wc-preise{margin:4px 0 14px;font-size:14px;display:grid;gap:7px}
.wc-preise>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px}
.wc-preise>div>:first-child{flex:1 1 9em;min-width:0}
.wc-preise .num{margin-left:auto;white-space:nowrap}
.wc-preise .summe{border-top:1px solid var(--line);padding-top:7px}
.wc-preise .summe+.summe{border-top:0;padding-top:0}
.wc-zuordnen{margin:14px 0 10px}
.wc-zuordnen select.inp{min-width:0;flex:1 1 200px;width:auto}
@media (max-width:700px){
  .wc-liste li{grid-template-columns:minmax(0,1fr);gap:4px}
  .wc-liste li>.pill{justify-self:start;min-width:0}
}

/* ===== Kalender (src/kalender/) ===== */
/* Farben je Art: --kf Strich und Text, --kb Fläche. */
.kat-termin{--kf:var(--gold);--kb:var(--goldbg)}
.kat-call{--kf:var(--vio);--kb:var(--viobg)}
.kat-kunde{--kf:var(--ok);--kb:var(--okbg)}
.kat-intern{--kf:var(--info);--kb:var(--infobg)}
.kat-abwesend{--kf:var(--mut2);--kb:var(--glass3)}
.kal{gap:16px}
.kal-karte{overflow:hidden}
.kal-pc{display:block}.kal-handy{display:none}
/* Leiste: Blättern, Titel, Ansicht, Personen */
.kal-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.kal-nav{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 300px}
.kal-nav .ibtn svg,.buch-kal-kopf .ibtn svg{width:17px;height:17px}
.kal-titel{min-width:0;margin-left:6px;display:grid}
.kal-titel h2{font-family:var(--display);font-size:calc(18px + var(--plus,0px));font-weight:650;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-titel small{color:var(--mut);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-seg{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:var(--glass2);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi)}
.kal-seg a{padding:6px 13px;border-radius:99px;font-size:13px;font-weight:600;color:var(--fg2);text-decoration:none;white-space:nowrap}
.kal-seg a:hover{color:var(--fg)}
.kal-seg a[aria-current]{background:var(--glass3);color:var(--fg);box-shadow:inset 0 1px 0 var(--hi),0 2px 8px rgba(0,0,0,.12)}
.kal-wer{display:flex;flex-wrap:wrap;gap:6px}
.kal-wer a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px 0 5px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);font-size:13px;font-weight:600;color:var(--fg2);text-decoration:none}
.kal-wer a svg{width:16px;height:16px;margin-left:4px}
.kal-wer a[aria-current]{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:var(--goldbg);color:var(--fg)}
.kal-bd{padding:0}
.kal-fuss{display:flex;gap:8px;align-items:flex-start;margin:0}
.kal-fuss svg{width:15px;height:15px;flex:none;margin-top:2px}
/* Zeitraster: Zeile = Viertelstunde (--z hoch), Spalte = Tag; Termine liegen per Klasse (kr, kn, kc, kb) im Raster. */
.kal-raster{--z:12px;--rand:52px}
.kal-kopf,.kal-ganz,.kal-koerper{display:grid;grid-template-columns:var(--rand) repeat(7,minmax(0,1fr))}
.kal-raster.t1 :is(.kal-kopf,.kal-ganz,.kal-koerper){grid-template-columns:var(--rand) minmax(0,1fr)}
.kal-kopf{position:sticky;top:0;z-index:3;background:var(--glass-solid);border-bottom:1px solid var(--line)}
.kal-tk{display:grid;justify-items:center;gap:1px;padding:8px 2px 7px;text-decoration:none;color:var(--fg2);border-left:1px solid var(--line);min-width:0}
.kal-tk small{font-size:11.5px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kal-tk b{font-family:var(--display);font-size:19px;font-weight:600;line-height:1.25;min-width:32px;height:32px;display:grid;place-items:center;border-radius:99px}
.kal-tk em{font-style:normal;font-size:10.5px;color:var(--vio);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.kal-tk.heute b{background:var(--gold);color:var(--goldfg)}
.kal-tk:hover b{background:var(--glass3)}.kal-tk.heute:hover b{background:var(--gold)}
.kal-tk.we small{color:var(--mut2)}
.kal-raster.t1 .kal-tk{justify-items:start;grid-auto-flow:column;align-items:center;gap:8px;padding-left:12px;justify-content:start}
.kal-ganz{border-bottom:1px solid var(--line)}
.kal-ganz-l{font-size:10px;color:var(--mut);padding:6px 5px 0 0;text-align:right;hyphens:manual}
.kal-ganz-tag{display:grid;gap:3px;padding:4px 3px;border-left:1px solid var(--line);align-content:start;min-width:0}
.kal-gt{display:block;padding:3px 7px;border-radius:7px;background:var(--kb);border-left:3px solid var(--kf);font-size:12px;font-weight:600;color:var(--fg);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-std,.kal-spalte{display:grid;grid-template-rows:repeat(52,var(--z))}
.kal-std span{font-size:11px;color:var(--mut);text-align:right;padding-right:8px;transform:translateY(-7px);font-variant-numeric:tabular-nums}
.kal-std span:first-child{transform:none}
.kal-spalte{grid-template-columns:repeat(12,minmax(0,1fr));border-left:1px solid var(--line);position:relative;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--line) 45%,transparent) 1px,transparent 1px);
  background-size:100% calc(var(--z) * 4),100% calc(var(--z) * 2)}
.kal-spalte.we{background-color:color-mix(in srgb,var(--glass3) 35%,transparent)}
.kal-spalte.heute{background-color:color-mix(in srgb,var(--goldbg) 40%,transparent)}
@media (pointer:fine){.kal-spalte[data-kal-neu]{cursor:cell}}
.kal-ev{grid-column-end:span 12;display:flex;flex-direction:column;gap:1px;margin:1px 2px 1px 1px;padding:3px 7px;border-radius:8px;background:var(--kb);border-left:3px solid var(--kf);
  color:var(--fg);text-decoration:none;font-size:12px;line-height:1.3;overflow:hidden;min-width:0;min-height:0;z-index:1;cursor:pointer;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--kf) 18%,transparent);transition:filter .15s,box-shadow .15s}
.kal-ev:hover{filter:brightness(1.12);box-shadow:0 0 0 1px color-mix(in srgb,var(--kf) 45%,transparent),var(--shadow-s);z-index:2}
.kal-ev b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-ev span{color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.kal-ev-ort{display:flex;align-items:center;gap:4px}.kal-ev-ort svg{width:12px;height:12px;flex:none}
.kal-ev.knapp{padding:1px 6px;flex-direction:row;align-items:center}
.kal-ev.knapp b{font-size:11.5px}
:is(.kal-ev,.kal-gt,.kal-me,.kal-ag).frage,:is(.kal-ev,.kal-gt).anf{border-left-style:dashed;
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--kf) 14%,transparent) 6px 12px)}
:is(.kal-ev,.kal-gt,.kal-me).ab{opacity:.55}
:is(.kal-ev,.kal-gt,.kal-me).ab :is(b,span){text-decoration:line-through}
.kal-jetzt{grid-column:1/-1;align-self:start;height:0;border-top:2px solid var(--bad);position:relative;z-index:2;pointer-events:none}
.kal-jetzt::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--bad)}
/* Monat */
.kal-monat{display:grid}
.kal-mk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.kal-mk span{padding:8px 10px;font-size:11.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.kal-mw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.kal-mw:last-child{border-bottom:0}
.kal-mt{min-height:112px;padding:6px 5px 6px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.kal-mt:first-child{border-left:0}
.kal-mt.we{background:color-mix(in srgb,var(--glass3) 35%,transparent)}
.kal-mt.aus>.kal-mt-n{color:var(--mut2)}
.kal-mt.aus>.kal-mt-n b{font-weight:500}
.kal-mt-n{align-self:flex-start;text-decoration:none;color:var(--fg2)}
.kal-mt-n b{display:grid;place-items:center;min-width:26px;height:26px;border-radius:99px;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.kal-mt-n:hover b{background:var(--glass3)}
.kal-mt.heute .kal-mt-n b{background:var(--gold);color:var(--goldfg)}
.kal-mt-ft{font-size:10.5px;color:var(--vio);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.kal-mt-p{display:none}
.kal-mt-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:0}
.kal-mt-l li{min-width:0}
.kal-me{display:flex;gap:5px;align-items:baseline;padding:2px 6px;border-radius:6px;font-size:12px;color:var(--fg);text-decoration:none;min-width:0;border-left:3px solid var(--kf);background:var(--kb)}
.kal-me time{font-size:11px;color:var(--fg2);font-variant-numeric:tabular-nums;flex:none}
.kal-me span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.kal-me:hover{filter:brightness(1.12)}
.kal-me-mehr{font-size:11.5px;color:var(--mut);padding:1px 6px;text-decoration:none}
.kal-me-mehr:hover{color:var(--fg)}
/* Liste (Agenda) */
.kal-agenda{display:grid}
.kal-ag-tag h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:12px 16px 4px;font-size:13px;font-weight:650;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.kal-ag-tag h3 a{color:inherit;text-decoration:none}.kal-ag-tag h3 a:hover{color:var(--fg)}
.kal-ag-tag.heute h3{color:var(--gold)}
.kal-ft{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--vio)}
.kal-ag-tag ul,.kal-liste{list-style:none;margin:0;padding:0 8px 6px}
.kal-ag{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;color:inherit;text-decoration:none}
.kal-ag:hover{background:var(--glass2)}
.kal-ag-zeit{display:grid;font-variant-numeric:tabular-nums;text-align:right}
.kal-ag-zeit b{font-size:14px;font-weight:650}
.kal-ag-zeit span{font-size:12px;color:var(--mut)}
.kal-ag-zeit b.gt{font-size:12.5px}
.kal-ag-tx{display:grid;gap:3px;min-width:0;padding-left:11px;border-left:3px solid var(--kf)}
.kal-ag.frage .kal-ag-tx{border-left-style:dashed}
.kal-ag-tx>b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-ag-meta{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12.5px;color:var(--mut);min-width:0}
.kal-ag-meta>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kal-ort{display:inline-flex;align-items:center;gap:5px;min-width:0}
.kal-ort svg{width:13px;height:13px;flex:none}
.kal-ort span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-ag-hinweise{display:flex;flex-wrap:wrap;gap:5px}
.kal-ag.ab .kal-ag-tx>b{text-decoration:line-through;color:var(--mut)}
.kal-koepfe{display:flex;align-items:center}
.kal-koepfe .avatar{margin-left:-6px;border:2px solid var(--glass-solid)}
.kal-koepfe .avatar:first-child{margin-left:0}
.kal-koepfe i{font-style:normal;font-size:11px;color:var(--mut);margin-left:4px}
.kal-leer{display:grid;justify-items:center;gap:6px}
.kal-leer svg{width:28px;height:28px;color:var(--mut2)}
/* Wochenleiste am Handy */
.kal-wl{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:10px 10px 6px;border-bottom:1px solid var(--line)}
.kal-wl a{display:grid;justify-items:center;gap:2px;padding:6px 0 7px;border-radius:14px;text-decoration:none;color:var(--fg2)}
.kal-wl small{font-size:11px;color:var(--mut);font-weight:600}
.kal-wl b{font-size:17px;font-family:var(--display);font-weight:600}
.kal-wl a.heute b{color:var(--gold)}
.kal-wl a.an{background:var(--gold);color:var(--goldfg)}
.kal-wl a.an :is(small,b){color:inherit}
.kal-wl-p{width:5px;height:5px;border-radius:50%;background:transparent}
.kal-wl-p.n1,.kal-wl-p.n2,.kal-wl-p.n3{background:var(--mut)}
.kal-wl a.an .kal-wl-p:not(.n0){background:var(--goldfg)}
/* Einladungen */
.kal-einl .hd h2{display:flex;align-items:center;gap:8px}
.kal-einl-l{list-style:none;margin:0;padding:6px 8px}
.kal-einl-l li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:9px 8px;border-radius:12px}
.kal-einl-l li+li{border-top:1px solid var(--line)}
.kal-einl-t{display:grid;gap:3px;min-width:0;flex:1 1 260px;padding-left:11px;border-left:3px dashed var(--kf);color:inherit;text-decoration:none}
.kal-einl-t b{font-weight:650}
.kal-einl-t span{font-size:13px;color:var(--mut)}
.kal-einl-t .pill{justify-self:start}
.kal-antw{display:flex;gap:6px;flex-wrap:wrap}
/* Karten auf Übersicht, Firma, Projekt, Ticket */
.kal-kurz .kal-ag-tag h3{padding-top:10px}
.kal-kurz-einl{display:flex;align-items:center;gap:10px;margin:10px 14px 0;padding:10px 12px;border-radius:12px;background:var(--warnbg);color:var(--fg);text-decoration:none;font-size:13.5px}
.kal-kurz-einl svg{width:17px;height:17px;color:var(--warn);flex:none}
.kal-kurz-einl span{flex:1}
.kal-karte-k{padding:6px 0 8px}
.kal-nix{padding:10px 18px;margin:0}
.kal-frueher{padding:0 10px}
.kal-frueher summary{cursor:pointer;color:var(--mut);padding:6px 8px}
/* Termin ansehen */
.kal-detail .bd{display:grid;gap:12px}
.kal-detail{border-top:4px solid var(--kf)}
.kal-detail-t{font-family:var(--display);font-size:calc(22px + var(--plus,0px));font-weight:650;margin:0;overflow-wrap:anywhere}
.kal-detail.ab .kal-detail-t{text-decoration:line-through;color:var(--mut)}
.kal-detail-l{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.kal-detail-l li{display:flex;align-items:flex-start;gap:10px;min-width:0;overflow-wrap:anywhere}
.kal-detail-l svg{width:17px;height:17px;flex:none;color:var(--mut);margin-top:2px}
.pill.kal-katpill{background:var(--kb);color:var(--kf)}
.kal-notiz h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin:0 0 4px}
.kal-notiz p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.kal-tn{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kal-tn li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.kal-tn-tx{display:grid;gap:1px;min-width:0}
.kal-tn-tx small{color:var(--mut);font-size:12.5px;overflow-wrap:anywhere}
.kal-tn-tx q{font-size:13px;color:var(--fg2);font-style:italic}
.kal-gast svg{width:16px;height:16px}
.kal-meine .bd{display:grid;gap:10px}
.kal-meine details summary{cursor:pointer;color:var(--mut);margin-bottom:6px}
.kal-akt{display:grid;gap:8px}
.kal-absagen>summary{list-style:none;cursor:pointer}
.kal-absagen>summary::-webkit-details-marker{display:none}
.kal-absagen[open]>summary{margin-bottom:10px}
.kal-stand{margin:12px 0 0}
/* Formular */
.kal-formseite{max-width:760px}
.kal-form .bd{display:grid;gap:16px}
.kal-label,.kal-team legend{font-size:var(--fs-s);font-weight:600;color:var(--fg2)}
.kal-kat,.kal-ortwahl{display:flex;flex-wrap:wrap;gap:6px}
.kal-kat label,.kal-ortwahl label{position:relative;cursor:pointer}
.kal-kat input,.kal-ortwahl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kal-kat span,.kal-ortwahl span{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);font-size:13px;font-weight:600;color:var(--fg2);transition:background-color .15s,border-color .15s}
.kal-kat i{width:9px;height:9px;border-radius:50%;background:var(--kf)}
.kal-ortwahl span svg{width:15px;height:15px}
.kal-kat label:hover span,.kal-ortwahl label:hover span{border-color:var(--edge2)}
.kal-kat input:checked+span{background:var(--kb);border-color:color-mix(in srgb,var(--kf) 55%,transparent);color:var(--fg)}
.kal-ortwahl input:checked+span{background:var(--goldbg);border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--fg)}
:is(.kal-kat,.kal-ortwahl) input:focus-visible+span{outline:2.5px solid var(--gold);outline-offset:2px}
.kal-zeit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:12px;align-items:end}
.kal-zeiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kal-zeiten[hidden]{display:none}
.kal-ganztags{height:38px}
.kal-mehrtag>summary,.kal-abschnitt>summary{cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;color:var(--fg2)}
.kal-mehrtag>summary svg,.kal-abschnitt>summary svg{width:16px;height:16px}
.kal-mehrtag[open]>summary,.kal-abschnitt[open]>summary{margin-bottom:12px}
.kal-abschnitt{border-top:1px solid var(--line);padding-top:14px}
.kal-abschnitt[open]{display:grid;gap:14px}
.kal-abschnitt[open]>summary{margin-bottom:0}
.kal-team{border:0;margin:0;padding:0}
.kal-team legend{padding:0;margin-bottom:6px}
.kal-team-l{display:flex;flex-wrap:wrap;gap:6px}
.kal-team-l label{position:relative;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 9px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);font-size:13.5px;font-weight:600;color:var(--fg2);cursor:pointer}
.kal-team-l input{margin:0;accent-color:var(--goldf)}
.kal-team-l label:has(input:checked){background:var(--goldbg);border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--fg)}
.kal-ext{display:grid;gap:10px}
.kal-ext-z{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:end}
.kal-ext-st{grid-column:1/-1}
.kal-ext .hilfe{margin:0}
/* Einstellungen */
.kal-az{display:grid;gap:8px;margin:10px 0 14px}
.kal-az-z{display:grid;grid-template-columns:130px minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.kal-az-z .inp{width:100%}
.kal-abo{gap:12px}
.kal-abo-l{margin:0;padding-left:18px;display:grid;gap:6px}
.kal-kopie{display:flex;gap:8px;align-items:flex-start}
.kal-kopie .inp{flex:1;min-width:0}
.kal-kopie textarea.inp{height:auto;padding:8px 12px;font-size:12px}
.kal-bs{gap:12px}
.kal-bs-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kal-bs-l a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--edge);background:var(--glass2);color:inherit;text-decoration:none}
.kal-bs-l a:hover{border-color:var(--edge2)}
.kal-bs-tx{display:grid;gap:2px;min-width:0}
.kal-bs-tx small{color:var(--mut);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kal-schalter{gap:10px}
.kal-schalter .check{align-items:flex-start}
.kal-schalter .check .hilfe{display:block;margin-top:2px}
/* Öffentliche Buchung */
.einzeln .card.breit:has(.buch-raster),.einzeln .card.breit:has(.buch-gast){width:min(940px,100%)}
.einzeln .card.breit:has(.buch-gast){width:min(620px,100%)}
.buch{display:grid;gap:16px}
.buch-raster{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:28px;align-items:start}
.buch-info{display:grid;gap:8px;position:sticky;top:16px}
.buch-info small{color:var(--mut);font-weight:600}
.buch-info h1,.buch-gast h1{font-family:var(--display);font-size:calc(23px + var(--plus,0px));font-weight:650;margin:0;line-height:1.2;overflow-wrap:anywhere}
.buch-koepfe{display:flex}
.buch-koepfe .avatar{margin-left:-8px;border:2px solid var(--glass-solid)}
.buch-koepfe .avatar:first-child{margin-left:0}
.buch-fakten{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px;color:var(--fg2);font-size:14px}
.buch-fakten li{display:flex;align-items:flex-start;gap:9px;overflow-wrap:anywhere}
.buch-fakten svg{width:17px;height:17px;flex:none;color:var(--gold);margin-top:1px}
.buch-fakten.gross{font-size:15px}
.buch-text{margin:6px 0 0;color:var(--fg2);white-space:pre-wrap}
.buch-haupt{display:grid;gap:14px;min-width:0}
.buch-schritt{display:flex;align-items:center;gap:10px;font-size:16px;margin:0}
.buch-schritt span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--goldbg);color:var(--gold);font-size:13px;font-weight:700}
.buch-wahl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.buch-kal{display:grid;gap:6px}
.buch-kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.buch-kal-kopf b{font-size:14.5px;text-align:center}
.buch-kal-kopf .ibtn.aus{opacity:.35}
.buch-kal-wt,.buch-kal-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.buch-kal-wt span{font-size:11.5px;color:var(--mut);font-weight:600}
.buch-kal-tage>*{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;font-size:14px;font-variant-numeric:tabular-nums;text-decoration:none;max-width:46px;width:100%;justify-self:center}
.buch-kal-tage .zu{color:var(--mut2);opacity:.55}
.buch-kal-tage .frei{background:var(--goldbg);color:var(--gold);font-weight:700}
.buch-kal-tage .frei:hover{background:color-mix(in srgb,var(--gold) 30%,transparent)}
.buch-kal-tage .an{background:var(--gold);color:var(--goldfg);font-weight:700}
.buch-zeiten h2{font-size:14.5px;margin:0 0 10px}
.buch-zeiten ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.buch-zeiten a{display:grid;place-items:center;height:42px;border-radius:12px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold);font-weight:650;text-decoration:none;font-variant-numeric:tabular-nums}
.buch-zeiten a:hover{background:var(--gold);color:var(--goldfg)}
.buch-zeiten p{margin:10px 0 0}
.buch-gewaehlt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--goldbg);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.buch-gewaehlt svg{width:20px;height:20px;color:var(--gold);flex:none}
.buch-gewaehlt span{flex:1}
.buch-form{display:grid;gap:14px}
.buch-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.buch-ds{margin:0}
.buch-gast{display:grid;gap:14px}
.buch-akt{display:grid;gap:8px}
.buch-absagen>summary{list-style:none;cursor:pointer}
.buch-absagen>summary::-webkit-details-marker{display:none}
.buch-absagen[open]>summary{margin-bottom:10px}
.buch-leer{display:grid;justify-items:center;gap:8px;text-align:center;padding:10px 0}
.buch-leer svg{width:34px;height:34px;color:var(--gold)}
.buch-leer h1{margin:0;font-size:22px}
@media (max-width:900px){
  .kal-raster{--rand:44px}
  .buch-wahl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .buch-raster{grid-template-columns:minmax(0,1fr);gap:18px}
  .buch-info{position:static}
}
@media (max-width:700px){
  .kal-pc{display:none}.kal-handy{display:block}
  .kal-leiste{padding:12px 12px;gap:10px}
  .kal-nav{flex-basis:100%}
  .kal-titel h2{font-size:calc(16.5px + var(--plus,0px))}
  .kal-seg{width:100%;justify-content:space-between}
  .kal-seg a{flex:1;text-align:center;padding:7px 6px}
  .kal-wer{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .kal-wer a{flex:none}
  .kal-raster{--z:14px;--rand:42px}
  .kal-raster.t1 .kal-kopf{display:none}
  .kal-mt{min-height:52px;align-items:center;padding:4px 2px;gap:2px}
  .kal-mt-l,.kal-mt-ft{display:none}
  .kal-mt-n{align-self:center}
  .kal-mt-n b{min-width:30px;height:30px;font-size:14px}
  .kal-mt.an .kal-mt-n b{background:var(--fg);color:var(--bg,#000)}
  .kal-mt.heute.an .kal-mt-n b{background:var(--gold);color:var(--goldfg)}
  .kal-mt-p{display:flex;gap:3px;min-height:5px}
  .kal-mt-p i{width:5px;height:5px;border-radius:50%;background:var(--kf)}
  .kal-mt-p i.ab{opacity:.4}
  .kal-mk span{text-align:center;padding:8px 2px}
  .kal-ag{grid-template-columns:50px minmax(0,1fr);gap:10px;padding:9px 6px}
  .kal-ag .kal-koepfe{display:none}
  .kal-zeit{grid-template-columns:minmax(0,1fr)}
  .kal-ext-z{grid-template-columns:minmax(0,1fr)}
  .kal-az-z{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);row-gap:4px}
  .kal-az-z .check{grid-column:1/-1}
  .kal-tn li{grid-template-columns:auto minmax(0,1fr)}
  .kal-tn li>.pill{grid-column:2;justify-self:start}
  .kal-kopie{flex-direction:column;align-items:stretch}
}
/* Lage im Zeitraster (generiert): kr = Startzeile, kn = Zeilen, kc = Startspalte, kb = Spalten, kh = Stunden. */
.kr1{grid-row-start:1}.kr2{grid-row-start:2}.kr3{grid-row-start:3}.kr4{grid-row-start:4}.kr5{grid-row-start:5}.kr6{grid-row-start:6}.kr7{grid-row-start:7}.kr8{grid-row-start:8}.kr9{grid-row-start:9}.kr10{grid-row-start:10}.kr11{grid-row-start:11}.kr12{grid-row-start:12}.kr13{grid-row-start:13}.kr14{grid-row-start:14}.kr15{grid-row-start:15}.kr16{grid-row-start:16}.kr17{grid-row-start:17}.kr18{grid-row-start:18}.kr19{grid-row-start:19}.kr20{grid-row-start:20}.kr21{grid-row-start:21}.kr22{grid-row-start:22}.kr23{grid-row-start:23}.kr24{grid-row-start:24}.kr25{grid-row-start:25}.kr26{grid-row-start:26}.kr27{grid-row-start:27}.kr28{grid-row-start:28}.kr29{grid-row-start:29}.kr30{grid-row-start:30}.kr31{grid-row-start:31}.kr32{grid-row-start:32}.kr33{grid-row-start:33}.kr34{grid-row-start:34}.kr35{grid-row-start:35}.kr36{grid-row-start:36}.kr37{grid-row-start:37}.kr38{grid-row-start:38}.kr39{grid-row-start:39}.kr40{grid-row-start:40}.kr41{grid-row-start:41}.kr42{grid-row-start:42}.kr43{grid-row-start:43}.kr44{grid-row-start:44}.kr45{grid-row-start:45}.kr46{grid-row-start:46}.kr47{grid-row-start:47}.kr48{grid-row-start:48}.kr49{grid-row-start:49}.kr50{grid-row-start:50}.kr51{grid-row-start:51}.kr52{grid-row-start:52}.kr53{grid-row-start:53}.kr54{grid-row-start:54}.kr55{grid-row-start:55}.kr56{grid-row-start:56}.kr57{grid-row-start:57}.kr58{grid-row-start:58}.kr59{grid-row-start:59}.kr60{grid-row-start:60}.kr61{grid-row-start:61}.kr62{grid-row-start:62}.kr63{grid-row-start:63}.kr64{grid-row-start:64}.kr65{grid-row-start:65}.kr66{grid-row-start:66}.kr67{grid-row-start:67}.kr68{grid-row-start:68}.kr69{grid-row-start:69}.kr70{grid-row-start:70}.kr71{grid-row-start:71}.kr72{grid-row-start:72}.kr73{grid-row-start:73}.kr74{grid-row-start:74}.kr75{grid-row-start:75}.kr76{grid-row-start:76}.kr77{grid-row-start:77}.kr78{grid-row-start:78}.kr79{grid-row-start:79}.kr80{grid-row-start:80}.kr81{grid-row-start:81}.kr82{grid-row-start:82}.kr83{grid-row-start:83}.kr84{grid-row-start:84}.kr85{grid-row-start:85}.kr86{grid-row-start:86}.kr87{grid-row-start:87}.kr88{grid-row-start:88}.kr89{grid-row-start:89}.kr90{grid-row-start:90}.kr91{grid-row-start:91}.kr92{grid-row-start:92}.kr93{grid-row-start:93}.kr94{grid-row-start:94}.kr95{grid-row-start:95}.kr96{grid-row-start:96}
.kn1{grid-row-end:span 1}.kn2{grid-row-end:span 2}.kn3{grid-row-end:span 3}.kn4{grid-row-end:span 4}.kn5{grid-row-end:span 5}.kn6{grid-row-end:span 6}.kn7{grid-row-end:span 7}.kn8{grid-row-end:span 8}.kn9{grid-row-end:span 9}.kn10{grid-row-end:span 10}.kn11{grid-row-end:span 11}.kn12{grid-row-end:span 12}.kn13{grid-row-end:span 13}.kn14{grid-row-end:span 14}.kn15{grid-row-end:span 15}.kn16{grid-row-end:span 16}.kn17{grid-row-end:span 17}.kn18{grid-row-end:span 18}.kn19{grid-row-end:span 19}.kn20{grid-row-end:span 20}.kn21{grid-row-end:span 21}.kn22{grid-row-end:span 22}.kn23{grid-row-end:span 23}.kn24{grid-row-end:span 24}.kn25{grid-row-end:span 25}.kn26{grid-row-end:span 26}.kn27{grid-row-end:span 27}.kn28{grid-row-end:span 28}.kn29{grid-row-end:span 29}.kn30{grid-row-end:span 30}.kn31{grid-row-end:span 31}.kn32{grid-row-end:span 32}.kn33{grid-row-end:span 33}.kn34{grid-row-end:span 34}.kn35{grid-row-end:span 35}.kn36{grid-row-end:span 36}.kn37{grid-row-end:span 37}.kn38{grid-row-end:span 38}.kn39{grid-row-end:span 39}.kn40{grid-row-end:span 40}.kn41{grid-row-end:span 41}.kn42{grid-row-end:span 42}.kn43{grid-row-end:span 43}.kn44{grid-row-end:span 44}.kn45{grid-row-end:span 45}.kn46{grid-row-end:span 46}.kn47{grid-row-end:span 47}.kn48{grid-row-end:span 48}.kn49{grid-row-end:span 49}.kn50{grid-row-end:span 50}.kn51{grid-row-end:span 51}.kn52{grid-row-end:span 52}.kn53{grid-row-end:span 53}.kn54{grid-row-end:span 54}.kn55{grid-row-end:span 55}.kn56{grid-row-end:span 56}.kn57{grid-row-end:span 57}.kn58{grid-row-end:span 58}.kn59{grid-row-end:span 59}.kn60{grid-row-end:span 60}.kn61{grid-row-end:span 61}.kn62{grid-row-end:span 62}.kn63{grid-row-end:span 63}.kn64{grid-row-end:span 64}.kn65{grid-row-end:span 65}.kn66{grid-row-end:span 66}.kn67{grid-row-end:span 67}.kn68{grid-row-end:span 68}.kn69{grid-row-end:span 69}.kn70{grid-row-end:span 70}.kn71{grid-row-end:span 71}.kn72{grid-row-end:span 72}.kn73{grid-row-end:span 73}.kn74{grid-row-end:span 74}.kn75{grid-row-end:span 75}.kn76{grid-row-end:span 76}.kn77{grid-row-end:span 77}.kn78{grid-row-end:span 78}.kn79{grid-row-end:span 79}.kn80{grid-row-end:span 80}.kn81{grid-row-end:span 81}.kn82{grid-row-end:span 82}.kn83{grid-row-end:span 83}.kn84{grid-row-end:span 84}.kn85{grid-row-end:span 85}.kn86{grid-row-end:span 86}.kn87{grid-row-end:span 87}.kn88{grid-row-end:span 88}.kn89{grid-row-end:span 89}.kn90{grid-row-end:span 90}.kn91{grid-row-end:span 91}.kn92{grid-row-end:span 92}.kn93{grid-row-end:span 93}.kn94{grid-row-end:span 94}.kn95{grid-row-end:span 95}.kn96{grid-row-end:span 96}
.kc1{grid-column-start:1}.kc2{grid-column-start:2}.kc3{grid-column-start:3}.kc4{grid-column-start:4}.kc5{grid-column-start:5}.kc6{grid-column-start:6}.kc7{grid-column-start:7}.kc8{grid-column-start:8}.kc9{grid-column-start:9}.kc10{grid-column-start:10}.kc11{grid-column-start:11}.kc12{grid-column-start:12}
.kal-ev.kb1{grid-column-end:span 1}.kal-ev.kb2{grid-column-end:span 2}.kal-ev.kb3{grid-column-end:span 3}.kal-ev.kb4{grid-column-end:span 4}.kal-ev.kb5{grid-column-end:span 5}.kal-ev.kb6{grid-column-end:span 6}.kal-ev.kb7{grid-column-end:span 7}.kal-ev.kb8{grid-column-end:span 8}.kal-ev.kb9{grid-column-end:span 9}.kal-ev.kb10{grid-column-end:span 10}.kal-ev.kb11{grid-column-end:span 11}.kal-ev.kb12{grid-column-end:span 12}
.kh1 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(4,var(--z))}.kh2 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(8,var(--z))}.kh3 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(12,var(--z))}.kh4 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(16,var(--z))}.kh5 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(20,var(--z))}.kh6 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(24,var(--z))}.kh7 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(28,var(--z))}.kh8 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(32,var(--z))}.kh9 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(36,var(--z))}.kh10 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(40,var(--z))}.kh11 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(44,var(--z))}.kh12 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(48,var(--z))}.kh13 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(52,var(--z))}.kh14 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(56,var(--z))}.kh15 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(60,var(--z))}.kh16 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(64,var(--z))}.kh17 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(68,var(--z))}.kh18 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(72,var(--z))}.kh19 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(76,var(--z))}.kh20 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(80,var(--z))}.kh21 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(84,var(--z))}.kh22 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(88,var(--z))}.kh23 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(92,var(--z))}.kh24 :is(.kal-std,.kal-spalte){grid-template-rows:repeat(96,var(--z))}