/* 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)}

/* ----- Weitere Hintergründe (15.11.2026, Brian: „ich will viel mehr Hintergründe haben“) -----
   Alle nehmen die Farben des Farbthemas (--blob1/2/3, --goldf, --vio) und liegen nicht dichter unter dem Glas als die
   Lichtflecken: test/farben.test.ts rechnet jeden Hintergrund mit jedem Thema, hell und dunkel, nach (Schichten in
   test/farben-paare.ts, bei Änderungen dort mitpflegen). Leistung: Fast alle stehen still; der Browser rechnet das Bild
   einmal, beim Scrollen nichts. Muster liegen auf der festen Ebene .tiefe (Masken und Rauschen als kleine SVG-Bilder,
   CSP: img-src data:). Bewegt sind nur Aurora und Sternenstaub, und nur über transform und opacity; bei „Bewegung
   reduzieren“ oder „Animationen: Aus“ stehen sie still. Vorschaubilder auf der Seite Darstellung: .hg-bild weiter unten. */
:root{--fleck1:color-mix(in srgb,var(--blob1) 70%,transparent);--fleck2:color-mix(in srgb,var(--blob2) 70%,transparent);--fleck3:color-mix(in srgb,var(--blob3) 70%,transparent);--muster:rgba(255,255,255,.05);--muster-stark:rgba(255,255,255,.08);--linie1:color-mix(in srgb,var(--goldf) 30%,transparent);--linie2:color-mix(in srgb,var(--vio) 34%,transparent);--stern:rgba(255,255,255,.24)}
:root[data-theme="light"]{--muster:rgba(40,30,20,.05);--muster-stark:rgba(40,30,20,.075);--linie1:color-mix(in srgb,var(--goldf) 38%,transparent);--linie2:color-mix(in srgb,var(--vio) 30%,transparent);--stern:color-mix(in srgb,var(--gold) 32%,transparent)}
.tiefe,.hg-bild{--hg-wellen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-80 -106C-53 -91 27 -36 80 -14C133 8 187 27 240 28C293 30 347 6 400 -5C453 -16 507 -34 560 -38C613 -43 667 -31 720 -31C773 -31 827 -27 880 -39C933 -51 987 -84 1040 -105C1093 -126 1147 -159 1200 -165C1253 -171 1307 -158 1360 -140C1413 -123 1467 -80 1520 -60C1573 -40 1653 -26 1680 -19M-80 -57C-53 -41 27 12 80 37C133 61 187 88 240 92C293 96 347 75 400 61C453 48 507 19 560 10C613 0 667 4 720 3C773 2 827 13 880 5C933 -3 987 -25 1040 -43C1093 -61 1147 -95 1200 -102C1253 -110 1307 -103 1360 -88C1413 -72 1467 -29 1520 -7C1573 15 1653 36 1680 44M-80 -5C-53 10 27 58 80 84C133 110 187 143 240 149C293 156 347 139 400 124C453 109 507 73 560 59C613 44 667 39 720 37C773 35 827 50 880 47C933 44 987 33 1040 20C1093 6 1147 -25 1200 -34C1253 -42 1307 -43 1360 -30C1413 -17 1467 23 1520 45C1573 68 1653 94 1680 103M-80 51C-53 64 27 104 80 129C133 154 187 191 240 200C293 208 347 198 400 183C453 168 507 127 560 109C613 91 667 76 720 73C773 69 827 86 880 87C933 89 987 90 1040 82C1093 74 1147 48 1200 40C1253 32 1307 23 1360 33C1413 42 1467 76 1520 97C1573 117 1653 147 1680 157M-80 109C-53 119 27 149 80 172C133 194 187 232 240 242C293 253 347 250 400 236C453 222 507 181 560 160C613 139 667 117 720 111C773 106 827 122 880 127C933 133 987 146 1040 144C1093 142 1147 124 1200 116C1253 109 1307 94 1360 99C1413 104 1467 129 1520 147C1573 164 1653 195 1680 204M-80 168C-53 176 27 194 80 213C133 231 187 267 240 279C293 290 347 294 400 283C453 272 507 233 560 211C613 190 667 160 720 153C773 146 827 160 880 168C933 177 987 200 1040 204C1093 208 1147 199 1200 194C1253 188 1307 169 1360 170C1413 170 1467 184 1520 197C1573 209 1653 238 1680 246M-80 229C-53 233 27 240 80 253C133 266 187 297 240 309C293 321 347 332 400 324C453 317 507 284 560 263C613 242 667 208 720 199C773 190 827 200 880 211C933 221 987 252 1040 262C1093 272 1147 274 1200 271C1253 267 1307 246 1360 242C1413 238 1467 240 1520 246C1573 253 1653 276 1680 282M-80 289C-53 289 27 285 80 293C133 301 187 324 240 335C293 346 347 364 400 360C453 356 507 332 560 313C613 295 667 259 720 250C773 240 827 245 880 256C933 268 987 304 1040 318C1093 333 1147 346 1200 345C1253 345 1307 324 1360 315C1413 307 1467 296 1520 296C1573 296 1653 310 1680 313M-80 347C-53 344 27 331 80 333C133 335 187 349 240 358C293 368 347 389 400 390C453 391 507 377 560 363C613 348 667 314 720 305C773 295 827 294 880 305C933 317 987 354 1040 372C1093 391 1147 413 1200 416C1253 418 1307 399 1360 387C1413 376 1467 353 1520 346C1573 338 1653 342 1680 341M-80 401C-53 397 27 377 80 373C133 370 187 373 240 380C293 387 347 411 400 416C453 421 507 419 560 410C613 401 667 372 720 363C773 354 827 348 880 358C933 368 987 404 1040 425C1093 445 1147 475 1200 481C1253 486 1307 471 1360 457C1413 442 1467 410 1520 395C1573 380 1653 371 1680 366M-80 452C-53 445 27 422 80 414C133 406 187 398 240 403C293 407 347 431 400 439C453 448 507 458 560 456C613 453 667 431 720 424C773 417 827 406 880 415C933 423 987 455 1040 475C1093 496 1147 532 1200 539C1253 547 1307 537 1360 521C1413 505 1467 466 1520 444C1573 422 1653 399 1680 391M-80 497C-53 490 27 466 80 454C133 443 187 426 240 427C293 428 347 449 400 461C453 473 507 494 560 498C613 503 667 490 720 487C773 483 827 469 880 475C933 481 987 505 1040 525C1093 544 1147 582 1200 591C1253 600 1307 597 1360 580C1413 564 1467 520 1520 492C1573 465 1653 428 1680 415M-80 537C-53 530 27 509 80 495C133 481 187 456 240 454C293 452 347 469 400 484C453 498 507 528 560 539C613 550 667 549 720 549C773 549 827 534 880 538C933 542 987 557 1040 573C1093 590 1147 626 1200 636C1253 645 1307 648 1360 632C1413 616 1467 570 1520 539C1573 507 1653 458 1680 442M-80 571C-53 565 27 549 80 535C133 520 187 490 240 485C293 481 347 492 400 508C453 523 507 560 560 577C613 594 667 606 720 610C773 614 827 600 880 602C933 603 987 609 1040 621C1093 633 1147 665 1200 674C1253 683 1307 691 1360 675C1413 660 1467 617 1520 583C1573 549 1653 490 1680 471M-80 600C-53 596 27 587 80 574C133 560 187 528 240 521C293 515 347 520 400 535C453 550 507 591 560 613C613 635 667 659 720 668C773 677 827 666 880 665C933 665 987 661 1040 668C1093 674 1147 699 1200 706C1253 713 1307 725 1360 711C1413 698 1467 659 1520 625C1573 590 1653 524 1680 504M-80 625C-53 623 27 622 80 611C133 601 187 569 240 561C293 554 347 552 400 567C453 581 507 623 560 649C613 675 667 709 720 722C773 735 827 729 880 728C933 726 987 713 1040 714C1093 715 1147 729 1200 733C1253 737 1307 751 1360 739C1413 728 1467 696 1520 663C1573 630 1653 561 1680 541M-80 647C-53 647 27 655 80 648C133 641 187 613 240 605C293 598 347 591 400 604C453 617 507 656 560 684C613 711 667 754 720 771C773 788 827 789 880 786C933 784 987 764 1040 759C1093 754 1147 756 1200 756C1253 756 1307 770 1360 760C1413 751 1467 728 1520 698C1573 668 1653 601 1680 581M-80 667C-53 670 27 685 80 683C133 680 187 659 240 653C293 647 347 635 400 646C453 657 507 691 560 719C613 747 667 794 720 815C773 835 827 842 880 840C933 838 987 812 1040 802C1093 791 1147 781 1200 777C1253 773 1307 784 1360 776C1413 768 1467 755 1520 730C1573 705 1653 643 1680 625M-80 688C-53 692 27 714 80 716C133 719 187 707 240 704C293 700 347 685 400 694C453 702 507 728 560 755C613 782 667 831 720 853C773 875 827 890 880 888C933 886 987 858 1040 843C1093 828 1147 806 1200 797C1253 787 1307 794 1360 787C1413 781 1467 777 1520 758C1573 739 1653 687 1680 673M-80 710C-53 716 27 742 80 749C133 757 187 756 240 756C293 755 347 740 400 746C453 752 507 770 560 793C613 816 667 863 720 886C773 908 827 929 880 928C933 928 987 900 1040 881C1093 862 1147 830 1200 816C1253 802 1307 802 1360 797C1413 791 1467 796 1520 784C1573 771 1653 733 1680 722M-80 736C-53 743 27 770 80 782C133 794 187 805 240 808C293 812 347 798 400 802C453 806 507 814 560 832C613 851 667 892 720 914C773 935 827 961 880 961C933 962 987 936 1040 916C1093 895 1147 855 1200 836C1253 818 1307 811 1360 806C1413 801 1467 813 1520 807C1573 802 1653 779 1680 774M-80 766C-53 775 27 800 80 816C133 831 187 853 240 860C293 868 347 858 400 861C453 863 507 861 560 874C613 887 667 919 720 938C773 957 827 985 880 986C933 988 987 968 1040 946C1093 925 1147 880 1200 858C1253 837 1307 822 1360 817C1413 813 1467 829 1520 830C1573 832 1653 827 1680 826M-80 803C-53 811 27 833 80 851C133 869 187 900 240 911C293 923 347 919 400 920C453 921 507 911 560 917C613 924 667 945 720 959C773 974 827 1002 880 1004C933 1007 987 993 1040 973C1093 952 1147 906 1200 883C1253 859 1307 837 1360 832C1413 828 1467 847 1520 854C1573 862 1653 875 1680 879M-80 847C-53 854 27 870 80 889C133 907 187 945 240 960C293 975 347 978 400 978C453 978 507 962 560 962C613 962 667 970 720 979C773 988 827 1014 880 1016C933 1019 987 1012 1040 995C1093 977 1147 933 1200 909C1253 885 1307 858 1360 853C1413 848 1467 867 1520 880C1573 893 1653 922 1680 931M-80 897C-53 903 27 911 80 929C133 948 187 989 240 1007C293 1024 347 1034 400 1034C453 1034 507 1013 560 1007C613 1001 667 995 720 998C773 1001 827 1021 880 1023C933 1026 987 1027 1040 1013C1093 998 1147 960 1200 938C1253 915 1307 884 1360 879C1413 874 1467 892 1520 909C1573 926 1653 970 1680 982M-80 954C-53 958 27 958 80 974C133 990 187 1032 240 1051C293 1069 347 1086 400 1087C453 1087 507 1063 560 1052C613 1040 667 1022 720 1018C773 1014 827 1026 880 1028C933 1029 987 1037 1040 1027C1093 1017 1147 988 1200 969C1253 950 1307 917 1360 913C1413 908 1467 923 1520 943C1573 963 1653 1018 1680 1033' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");--hg-hoehen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M1567 0C1569 2 1577 11 1580 15C1583 18 1582 17 1585 20C1589 23 1598 32 1600 35M264 1000C258 993 242 972 228 960C215 948 198 938 180 928C162 918 138 909 121 900C104 891 93 886 80 875C67 863 51 846 40 830C29 815 18 788 13 780M842 0C850 7 868 31 888 40C908 49 936 57 960 54C984 50 1018 26 1029 20M1502 0C1505 3 1515 16 1518 20C1521 24 1517 20 1520 23C1523 26 1530 36 1534 40C1537 44 1537 45 1540 49C1543 52 1546 56 1549 60C1552 64 1557 71 1560 74C1563 78 1561 76 1565 80C1568 84 1577 97 1580 100C1582 103 1577 97 1580 100C1583 104 1592 116 1595 120C1598 124 1599 126 1600 127M342 1000C338 993 330 972 320 956C310 939 293 915 280 901C267 887 257 881 240 872C223 862 197 850 180 842C163 833 154 830 140 820C126 810 108 795 95 780C81 765 70 746 60 730C50 713 43 698 33 680C23 662 6 630 0 620M42 0C41 0 42 -0 40 3C38 6 34 14 31 20C28 26 23 36 21 40C19 44 22 39 20 42C18 46 15 54 12 60C9 66 6 75 4 80C2 85 1 88 0 89M770 0C775 7 791 27 804 40C817 53 831 69 847 80C863 91 879 100 900 103C921 107 954 104 974 100C994 96 1004 90 1020 80C1036 70 1054 53 1068 40C1083 27 1101 7 1107 0M1454 0C1460 7 1476 26 1487 40C1498 54 1508 69 1520 86C1532 102 1547 124 1557 140C1567 156 1576 173 1580 180M412 1000C407 990 390 958 382 940C373 922 370 912 360 895C350 878 335 854 322 840C308 826 297 818 280 808C263 798 237 788 220 780C203 772 195 770 180 760C165 750 144 733 130 720C117 707 111 697 100 680C88 663 74 637 64 620C54 603 50 593 40 576C30 560 11 529 5 520M1600 895C1600 896 1600 896 1599 900C1598 904 1597 913 1595 920C1594 927 1593 933 1592 940C1590 947 1589 953 1587 960C1586 967 1583 975 1582 980C1581 985 1581 984 1580 988C1579 991 1577 998 1576 1000M93 0C88 9 69 35 60 52C51 68 46 82 38 100C31 118 24 139 18 160C11 181 3 217 0 229M691 0C699 7 723 27 736 40C750 53 758 67 772 80C785 93 801 110 816 120C830 130 839 136 860 141C881 145 917 148 940 147C963 146 981 140 1000 132C1019 124 1037 112 1053 100C1069 88 1083 73 1096 60C1110 47 1129 27 1135 20M1408 0C1414 7 1434 26 1446 40C1458 54 1468 68 1480 85C1492 102 1505 123 1515 140C1525 157 1532 169 1540 186C1548 202 1557 221 1564 240C1571 259 1577 277 1583 300C1588 323 1594 367 1597 380M487 1000C481 993 464 977 453 960C442 943 430 918 421 900C413 882 409 870 400 853C391 837 380 816 368 800C355 784 340 771 325 760C310 749 297 744 280 735C263 726 237 716 220 707C203 698 193 691 179 680C166 669 153 655 140 638C127 622 112 596 102 580C92 564 89 556 80 540C71 523 58 499 48 480C38 461 28 442 20 424C12 406 3 381 0 372M1600 512C1599 524 1597 555 1594 580C1591 605 1585 637 1581 660C1577 683 1573 700 1570 720C1566 740 1563 757 1558 780C1554 803 1548 837 1543 860C1538 883 1535 900 1529 920C1522 940 1508 970 1504 980M157 0C150 7 127 23 115 40C102 57 90 80 80 100C71 120 65 140 60 160C55 180 50 197 48 220C45 243 43 274 46 300C48 326 54 352 60 373C66 395 73 411 80 429C87 446 94 461 103 480C112 499 125 523 134 540C144 557 149 566 160 580C171 595 185 612 200 625C215 639 233 650 249 660C266 670 282 676 300 686C318 695 343 707 360 720C377 732 389 745 400 759C411 772 416 783 425 800C434 817 443 841 452 860C461 879 469 898 480 915C491 932 503 948 516 960C530 972 553 983 560 988M543 0C556 3 601 13 620 20C639 27 646 31 660 41C674 51 691 67 704 80C718 93 726 107 740 120C754 134 769 150 785 160C802 170 818 177 840 181C862 185 897 185 920 184C943 183 960 181 980 175C1000 169 1023 159 1040 150C1057 141 1067 132 1081 120C1094 108 1107 93 1121 80C1134 67 1144 53 1160 40C1176 27 1207 7 1216 0M1350 0C1358 6 1385 22 1400 36C1415 49 1428 66 1439 80C1451 94 1457 103 1467 120C1477 137 1491 162 1500 180C1508 198 1513 210 1520 229C1527 248 1535 274 1540 296C1545 317 1548 336 1551 360C1553 384 1555 413 1555 440C1555 467 1553 493 1551 520C1548 547 1544 577 1541 600C1538 623 1536 637 1533 660C1529 683 1524 715 1520 738C1516 762 1513 780 1509 800C1504 820 1500 840 1494 860C1487 880 1479 903 1470 920C1461 937 1455 947 1440 960C1425 974 1390 992 1380 999M1234 1000C1245 997 1279 990 1300 983C1321 976 1342 969 1359 960C1376 951 1387 945 1400 932C1413 918 1430 897 1440 880C1450 863 1454 851 1460 831C1466 811 1473 782 1478 760C1482 738 1484 723 1487 700C1490 677 1494 643 1496 620C1498 597 1499 583 1500 560C1501 537 1503 507 1504 480C1505 453 1507 427 1506 400C1506 373 1504 343 1502 320C1499 297 1496 280 1491 260C1486 240 1480 220 1472 200C1464 180 1452 157 1443 140C1434 123 1427 113 1417 100C1406 87 1396 72 1380 60C1364 48 1337 32 1320 25C1303 18 1293 18 1276 20C1258 22 1233 30 1214 40C1196 50 1179 67 1164 80C1150 93 1139 107 1126 120C1113 133 1099 149 1084 160C1070 171 1057 180 1040 188C1023 196 1003 203 980 208C957 213 923 217 900 219C877 222 860 223 840 222C820 221 799 221 780 214C761 207 741 192 726 180C712 168 703 153 692 140C680 127 670 113 655 100C640 87 619 72 600 62C581 52 560 47 540 41C520 36 500 33 480 29C460 26 441 23 418 20C394 17 366 12 340 11C314 9 283 7 260 10C237 13 218 17 200 26C182 34 166 46 153 60C140 74 129 91 120 108C111 125 105 140 100 162C95 183 89 214 88 240C87 266 90 297 93 320C97 343 102 360 108 380C114 400 121 420 130 440C139 460 150 483 159 500C168 517 174 526 184 540C195 554 205 568 220 581C235 595 256 609 272 620C289 631 302 636 320 645C338 655 363 667 380 678C397 689 408 698 420 712C432 726 442 742 452 760C462 778 470 802 478 820C486 838 490 851 500 867C510 884 523 906 536 920C550 934 563 944 580 952C597 961 620 968 640 973C660 978 677 979 700 981C723 983 753 984 780 987C807 989 847 994 860 995M229 60C216 67 193 80 180 94C167 107 157 122 149 140C141 158 135 177 131 200C127 223 126 254 127 280C129 306 135 333 140 356C145 378 153 399 160 417C167 434 170 444 180 461C190 478 205 504 217 520C230 536 242 548 256 560C270 572 283 580 300 590C317 600 343 612 359 620C376 628 385 631 400 641C415 651 437 666 450 680C464 694 471 707 480 724C489 741 495 761 504 780C512 799 519 822 529 840C538 858 548 874 560 887C572 900 584 911 601 920C617 929 637 937 660 942C683 947 713 949 740 950C767 951 793 949 820 949C847 949 875 949 900 950C925 952 945 956 968 960C992 964 1015 970 1040 973C1065 976 1093 978 1120 977C1147 976 1177 972 1200 969C1223 965 1240 962 1260 956C1280 951 1301 945 1320 936C1339 926 1359 913 1373 900C1388 887 1396 877 1406 860C1415 843 1425 820 1432 800C1439 780 1442 763 1446 740C1450 717 1453 687 1454 660C1456 633 1456 607 1455 580C1455 553 1452 527 1451 500C1451 473 1450 447 1451 420C1451 393 1455 367 1454 340C1454 313 1453 283 1449 260C1446 237 1441 220 1434 200C1426 180 1415 157 1405 140C1395 123 1388 113 1373 100C1359 87 1338 71 1320 64C1302 58 1281 57 1264 60C1246 63 1232 70 1217 80C1202 90 1185 107 1172 120C1158 133 1148 147 1135 160C1121 173 1105 189 1090 200C1074 211 1059 218 1040 225C1021 232 1000 236 976 240C953 244 923 248 900 251C877 255 863 258 840 260C817 263 782 268 760 265C738 262 724 251 710 240C697 229 688 215 677 200C665 185 653 166 640 151C627 137 617 125 600 113C583 101 560 89 540 81C520 73 500 69 480 64C460 60 443 57 420 54C397 51 367 46 340 46C313 45 278 48 260 50C242 53 243 53 229 60ZM243 100C229 108 211 122 200 136C189 149 182 159 176 180C170 201 163 233 163 260C162 287 167 317 171 340C176 363 181 380 189 400C197 420 208 443 218 460C227 477 234 487 246 500C258 513 274 528 289 540C305 552 322 561 340 570C358 580 382 588 400 597C418 605 432 609 448 620C464 631 483 646 495 660C507 674 512 689 520 707C528 725 533 747 540 766C547 785 552 803 562 820C572 837 585 858 600 871C615 884 629 893 649 900C669 907 695 912 720 913C745 915 777 911 800 909C823 906 837 902 860 898C883 895 916 889 940 889C964 889 980 895 1002 900C1023 905 1044 915 1068 920C1091 925 1115 930 1140 932C1165 933 1197 931 1220 927C1243 924 1260 920 1280 912C1300 904 1322 892 1337 880C1353 868 1363 856 1374 840C1384 824 1393 804 1400 784C1407 764 1411 744 1414 720C1417 696 1418 667 1417 640C1416 613 1411 583 1407 560C1403 537 1398 523 1394 500C1389 477 1382 447 1382 420C1382 393 1391 363 1394 340C1398 317 1402 300 1402 280C1403 260 1402 240 1397 220C1392 200 1382 177 1372 160C1362 143 1354 129 1335 120C1317 111 1282 103 1260 106C1238 109 1221 128 1206 140C1191 152 1182 167 1170 180C1158 193 1147 208 1132 220C1117 232 1099 243 1080 251C1061 258 1043 261 1020 265C997 269 963 272 940 276C917 280 900 282 880 287C860 292 840 298 820 304C800 311 780 322 760 324C740 326 717 326 700 316C683 306 671 281 660 265C649 249 645 236 635 220C625 204 613 184 600 170C587 156 577 145 560 134C543 124 520 113 500 105C480 98 463 94 440 90C417 86 387 81 360 80C333 80 300 83 280 86C260 90 256 92 243 100ZM305 120C292 124 272 130 258 140C244 150 230 164 220 181C210 198 203 221 200 243C197 264 197 287 200 310C203 333 209 359 216 380C223 401 230 416 240 433C250 450 260 466 274 480C287 494 306 509 320 519C334 529 343 534 360 541C377 548 400 556 420 562C440 569 460 572 480 581C500 590 526 603 540 616C554 629 555 639 561 660C568 681 572 717 578 740C584 763 591 783 599 800C608 817 617 829 631 840C644 851 658 861 680 866C702 871 737 872 760 870C783 867 800 860 820 853C840 845 860 832 880 825C900 817 920 807 940 806C960 805 981 812 1001 820C1021 828 1040 843 1060 853C1080 863 1100 873 1120 879C1140 885 1158 889 1180 889C1202 889 1232 885 1252 880C1272 875 1285 869 1300 859C1315 849 1329 836 1341 820C1352 804 1363 781 1370 760C1376 739 1379 713 1380 693C1381 673 1381 660 1377 640C1374 620 1367 592 1360 572C1353 552 1345 539 1335 520C1326 501 1311 480 1302 460C1293 440 1283 421 1282 400C1282 379 1292 355 1300 335C1308 315 1324 302 1329 280C1333 258 1335 218 1326 200C1318 182 1296 169 1280 169C1264 169 1242 188 1229 200C1215 212 1211 227 1199 240C1187 253 1178 270 1158 280C1138 290 1103 295 1080 298C1057 302 1043 299 1020 301C997 302 963 304 940 307C917 311 900 314 880 322C860 329 837 340 820 350C803 359 792 368 776 380C760 392 744 413 726 420C708 427 683 430 669 420C656 410 650 380 642 360C635 340 631 320 624 300C617 280 608 259 600 242C592 226 585 214 574 200C562 186 547 171 531 160C515 149 499 141 480 134C461 127 443 122 420 119C397 116 359 114 340 115C321 115 319 116 305 120ZM310 160C296 168 272 184 260 197C248 210 244 220 239 240C235 260 233 297 235 320C237 343 243 361 251 380C258 399 268 418 280 435C292 451 307 465 320 477C333 488 343 494 360 501C377 509 397 517 420 521C443 524 478 527 500 523C522 520 537 513 550 500C563 487 573 468 580 448C587 428 590 404 590 380C590 356 585 325 580 304C575 282 570 268 560 250C550 233 535 213 522 200C508 187 497 180 480 172C463 164 443 156 420 153C397 149 358 150 340 152C322 153 323 152 310 160ZM953 340C930 343 900 352 882 360C863 368 854 375 840 388C826 401 810 422 800 437C790 453 787 463 780 480C773 498 768 521 758 540C748 559 733 579 720 593C707 607 693 609 680 624C667 638 649 661 642 680C635 699 636 722 639 740C642 758 646 774 660 786C674 799 700 813 720 815C740 817 762 808 780 799C798 790 812 773 827 760C842 747 849 730 868 720C887 710 918 700 940 700C962 701 982 711 1000 721C1018 731 1033 747 1048 760C1064 773 1078 789 1093 800C1108 811 1122 822 1140 829C1158 836 1180 842 1200 842C1220 842 1243 837 1260 830C1277 823 1289 815 1301 800C1313 785 1327 763 1332 740C1338 717 1339 683 1336 660C1333 637 1325 619 1316 600C1306 581 1293 564 1280 548C1267 532 1253 520 1240 506C1227 492 1212 477 1200 462C1188 448 1179 434 1168 420C1156 406 1144 391 1130 380C1115 369 1098 360 1080 354C1062 347 1040 342 1019 340C998 338 976 337 953 340ZM326 200C307 209 294 223 285 240C276 257 272 280 271 300C270 320 274 340 281 360C288 380 301 404 314 420C327 436 342 449 360 458C378 468 397 477 420 477C443 478 478 470 496 460C514 450 521 437 529 420C537 403 542 380 543 360C545 340 543 320 537 300C530 280 518 256 506 240C493 224 478 213 460 204C442 196 422 188 400 187C378 187 345 191 326 200ZM902 400C889 409 872 423 862 440C853 457 846 480 847 500C847 520 852 544 865 560C877 576 901 588 920 597C939 605 960 606 980 613C1000 619 1023 625 1040 635C1057 645 1067 657 1080 671C1093 685 1103 705 1115 720C1128 735 1137 750 1154 760C1172 770 1201 781 1220 777C1239 774 1261 756 1271 740C1281 724 1283 698 1281 680C1279 662 1270 645 1260 630C1250 615 1233 601 1220 590C1207 578 1193 572 1179 560C1165 548 1150 536 1137 520C1124 504 1112 479 1100 462C1088 446 1080 432 1067 420C1053 408 1041 397 1020 391C999 385 960 384 940 385C920 387 914 391 902 400ZM361 240C348 248 329 263 322 280C316 297 317 323 320 340C323 357 328 370 340 383C352 397 371 414 389 420C407 426 430 427 447 420C463 413 480 400 486 380C493 360 492 320 487 300C483 280 475 270 460 259C445 248 417 237 400 234C383 231 374 232 361 240Z' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");--hg-waben:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51.96' height='90' viewBox='0 0 51.96 90'%3E%3Cpath d='M25.98 -15.00L25.98 15.00L0.00 30.00L-25.98 15.00L-25.98 -15.00L-0.00 -30.00ZM77.94 -15.00L77.94 15.00L51.96 30.00L25.98 15.00L25.98 -15.00L51.96 -30.00ZM51.96 30.00L51.96 60.00L25.98 75.00L-0.00 60.00L0.00 30.00L25.98 15.00ZM25.98 75.00L25.98 105.00L0.00 120.00L-25.98 105.00L-25.98 75.00L-0.00 60.00ZM77.94 75.00L77.94 105.00L51.96 120.00L25.98 105.00L25.98 75.00L51.96 60.00Z' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");--hg-korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.16 0 0 0 -0.065'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E")}
:root[data-theme="light"] :is(.tiefe,.hg-bild){--hg-korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.2 0 0 0 0.135'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E")}

/* Mit Kristallglas schimmerten Linien, Bänder und Sterne zu deutlich durch: Das Glas wird hier etwas dichter (wie bei „Tiefe“). */
:root[data-hintergrund="raster"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="verlauf"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="horizont"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="lichtkegel"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="gitter"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="linien"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="wellen"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="hoehenlinien"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="waben"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="koernung"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="aurora"][data-glas="stark"]:not([data-kontrast="hoch"]),:root[data-hintergrund="sternenstaub"][data-glas="stark"]:not([data-kontrast="hoch"]){
  --glass:color-mix(in srgb,var(--glass-solid) 56%,transparent);--glass-side:color-mix(in srgb,var(--glass-solid) 58%,transparent);
  --glass2:color-mix(in srgb,color-mix(in srgb,var(--glass-solid) 93%,var(--fg)) 68%,transparent);--glass3:color-mix(in srgb,color-mix(in srgb,var(--glass-solid) 88%,var(--fg)) 70%,transparent)}
:root[data-hintergrund="raster"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="verlauf"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="horizont"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="lichtkegel"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="gitter"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="linien"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="wellen"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="hoehenlinien"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="waben"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="koernung"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="aurora"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]),:root[data-hintergrund="sternenstaub"][data-glas="stark"][data-theme="light"]:not([data-kontrast="hoch"]){
  --glass:rgba(255,255,255,.67);--glass2:rgba(255,255,255,.77);--glass3:rgba(255,255,255,.85);--glass-side:rgba(255,255,255,.62)}

/* Ruhig */
:root[data-hintergrund="verlauf"] body::before{background:radial-gradient(46% 40% at 50% 52%,var(--fleck3),transparent 72%),linear-gradient(135deg,var(--blob2) 8%,transparent 46%,transparent 56%,var(--blob1) 94%),var(--bg)}
:root[data-hintergrund="horizont"] body::before{background:radial-gradient(70% 38% at 50% 100%,var(--fleck1),transparent 72%),radial-gradient(130% 62% at 50% 100%,var(--fleck2),transparent 74%),var(--bg)}
:root[data-hintergrund="lichtkegel"] body::before{background:radial-gradient(30% 58% at 50% 0%,var(--fleck1),transparent 72%),conic-gradient(from 152deg at 50% 0%,transparent,var(--fleck2) 28deg,transparent 56deg),radial-gradient(32% 30% at 4% 100%,var(--blob3),transparent 70%),var(--bg)}

/* Muster: auf der Ebene .tiefe über etwas ruhigeren Lichtflecken (Linie auf Fleck bleibt so lesbar wie ein voller Fleck) */
:root[data-hintergrund="gitter"] body::before,:root[data-hintergrund="linien"] body::before,:root[data-hintergrund="wellen"] body::before,:root[data-hintergrund="hoehenlinien"] body::before,
:root[data-hintergrund="waben"] body::before,:root[data-hintergrund="koernung"] body::before{
  background:radial-gradient(38vmax 34vmax at 88% 4%,var(--fleck2),transparent 70%),radial-gradient(40vmax 32vmax at 6% 96%,var(--fleck1),transparent 70%),radial-gradient(28vmax 24vmax at 50% 55%,var(--fleck3),transparent 70%),var(--bg)}
:root:is([data-hintergrund="gitter"],[data-hintergrund="linien"],[data-hintergrund="wellen"],[data-hintergrund="hoehenlinien"],[data-hintergrund="waben"],[data-hintergrund="koernung"],[data-hintergrund="aurora"],[data-hintergrund="sternenstaub"]) .tiefe{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
:root:is([data-hintergrund="gitter"],[data-hintergrund="linien"],[data-hintergrund="wellen"],[data-hintergrund="hoehenlinien"],[data-hintergrund="waben"],[data-hintergrund="koernung"]) .tiefe i{display:none}
:root[data-hintergrund="gitter"] .tiefe{background:linear-gradient(var(--muster-stark) 1px,transparent 1px) -1px -1px/160px 160px,linear-gradient(90deg,var(--muster-stark) 1px,transparent 1px) -1px -1px/160px 160px,
  linear-gradient(var(--muster) 1px,transparent 1px) -1px -1px/32px 32px,linear-gradient(90deg,var(--muster) 1px,transparent 1px) -1px -1px/32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 95% 80% at 50% 20%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 95% 80% at 50% 20%,#000 30%,transparent 100%)}
:root[data-hintergrund="linien"] .tiefe{background:repeating-linear-gradient(135deg,var(--muster-stark) 0 1px,transparent 1px 12px);
  -webkit-mask-image:linear-gradient(160deg,#000 25%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.15));mask-image:linear-gradient(160deg,#000 25%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.15))}
:root[data-hintergrund="wellen"] .tiefe{background:linear-gradient(100deg,var(--linie1),var(--linie2));-webkit-mask:var(--hg-wellen) center/cover no-repeat;mask:var(--hg-wellen) center/cover no-repeat}
:root[data-hintergrund="hoehenlinien"] .tiefe{background:linear-gradient(150deg,var(--linie2),var(--linie1));-webkit-mask:var(--hg-hoehen) center/cover no-repeat;mask:var(--hg-hoehen) center/cover no-repeat}
:root[data-hintergrund="waben"] .tiefe{background:color-mix(in srgb,var(--linie1) 75%,transparent);-webkit-mask-image:var(--hg-waben),radial-gradient(ellipse 80% 75% at 78% 14%,#000 15%,transparent 90%);mask-image:var(--hg-waben),radial-gradient(ellipse 80% 75% at 78% 14%,#000 15%,transparent 90%);
  -webkit-mask-size:51.96px 90px,100% 100%;mask-size:51.96px 90px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}
:root[data-hintergrund="koernung"] .tiefe{background:var(--hg-korn) 0 0/180px 180px}

/* Bewegt: Aurora (drei weiche Lichtbänder wehen langsam) und Sternenstaub (feine Punkte funkeln) */
:root[data-hintergrund="aurora"] body::before{background:radial-gradient(42% 30% at 50% 100%,var(--fleck3),transparent 70%),var(--bg)}
:root[data-hintergrund="aurora"] .tiefe i{position:absolute;left:-30vmax;width:160vmax;height:30vmax;border-radius:50%;will-change:transform;background:radial-gradient(closest-side,var(--k),transparent)}
:root[data-hintergrund="aurora"] .tiefe i:nth-child(1){--k:var(--fleck1);top:-10vh;transform:rotate(-9deg);animation:aurora1 42s ease-in-out infinite alternate}
:root[data-hintergrund="aurora"] .tiefe i:nth-child(2){--k:var(--fleck2);top:26vh;transform:rotate(7deg);animation:aurora2 54s ease-in-out infinite alternate}
:root[data-hintergrund="aurora"] .tiefe i:nth-child(3){--k:color-mix(in srgb,var(--fleck1) 50%,var(--fleck2));top:64vh;height:24vmax;transform:rotate(-5deg);animation:aurora3 47s ease-in-out infinite alternate}
@keyframes aurora1{to{transform:translate3d(9vmax,5vh,0) rotate(-3deg) scaleY(1.3)}}
@keyframes aurora2{to{transform:translate3d(-8vmax,-6vh,0) rotate(2deg) scaleY(.8)}}
@keyframes aurora3{to{transform:translate3d(6vmax,-4vh,0) rotate(-10deg) scaleY(1.2)}}
:root[data-hintergrund="sternenstaub"] body::before{background:radial-gradient(38% 34% at 88% 4%,color-mix(in srgb,var(--blob2) 45%,transparent),transparent 70%),radial-gradient(40% 32% at 6% 96%,color-mix(in srgb,var(--blob1) 45%,transparent),transparent 70%),var(--bg)}
:root[data-hintergrund="sternenstaub"] .tiefe i{position:absolute;inset:0}
:root[data-hintergrund="sternenstaub"] .tiefe i:nth-child(1){background:radial-gradient(circle at 23% 31%,var(--stern) 0 .9px,transparent 1.5px) 0 0/173px 173px,radial-gradient(circle at 71% 64%,var(--stern) 0 .7px,transparent 1.3px) 0 0/211px 211px,
  radial-gradient(circle at 48% 12%,var(--stern) 0 1px,transparent 1.6px) 0 0/263px 263px,radial-gradient(circle at 88% 83%,var(--stern) 0 .7px,transparent 1.3px) 0 0/149px 149px;opacity:.85}
:root[data-hintergrund="sternenstaub"] .tiefe i:nth-child(2){background:radial-gradient(circle at 37% 77%,var(--stern) 0 1.1px,transparent 1.8px) 0 0/307px 307px,radial-gradient(circle at 9% 46%,var(--stern) 0 .9px,transparent 1.5px) 0 0/239px 239px;
  will-change:opacity;animation:funkeln 4.6s ease-in-out infinite alternate}
:root[data-hintergrund="sternenstaub"] .tiefe i:nth-child(3){background:radial-gradient(circle at 62% 22%,var(--stern) 0 1.2px,transparent 1.9px) 0 0/359px 359px,radial-gradient(circle at 81% 53%,var(--stern) 0 .9px,transparent 1.5px) 0 0/281px 281px;
  will-change:opacity;animation:funkeln 6.2s ease-in-out 2.1s infinite alternate-reverse}
@keyframes funkeln{from{opacity:.1}to{opacity:1}}

/* Vorschaubilder auf der Seite Darstellung: derselbe Hintergrund in klein, in den Farben des aktuellen Themas. */
.hg-bild{position:relative;display:block;height:58px;margin:0 0 7px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--edge);
  background:radial-gradient(60% 75% at 92% 0%,var(--blob2),transparent 70%),radial-gradient(60% 75% at 0% 100%,var(--blob1),transparent 70%),radial-gradient(40% 55% at 50% 55%,var(--blob3),transparent 70%),var(--bg)}
.hg-bild::after{content:"";position:absolute;inset:0}
.hg-bild[data-hg="schlicht"]{background:var(--bg)}
.hg-bild[data-hg="verlauf"]{background:linear-gradient(135deg,var(--blob2),transparent 48%,transparent 54%,var(--blob1)),var(--bg)}
.hg-bild[data-hg="horizont"]{background:radial-gradient(70% 60% at 50% 100%,var(--blob1),transparent 72%),radial-gradient(130% 95% at 50% 100%,color-mix(in srgb,var(--blob2) 70%,transparent),transparent 74%),var(--bg)}
.hg-bild[data-hg="lichtkegel"]{background:radial-gradient(30% 85% at 50% 0%,var(--blob1),transparent 72%),conic-gradient(from 152deg at 50% 0%,transparent,color-mix(in srgb,var(--blob2) 55%,transparent) 28deg,transparent 56deg),var(--bg)}
.hg-bild[data-hg="raster"]::after{background:radial-gradient(circle,var(--punkt) 1px,transparent 1.5px) 0 0/9px 9px}
.hg-bild[data-hg="gitter"]::after{background:linear-gradient(var(--muster-stark) 1px,transparent 1px) -1px -1px/11px 11px,linear-gradient(90deg,var(--muster-stark) 1px,transparent 1px) -1px -1px/11px 11px}
.hg-bild[data-hg="linien"]::after{background:repeating-linear-gradient(135deg,var(--muster-stark) 0 1px,transparent 1px 6px)}
.hg-bild[data-hg="wellen"]::after{background:linear-gradient(100deg,var(--linie1),var(--linie2));-webkit-mask:var(--hg-wellen) center/cover no-repeat;mask:var(--hg-wellen) center/cover no-repeat}
.hg-bild[data-hg="hoehenlinien"]::after{background:linear-gradient(150deg,var(--linie2),var(--linie1));-webkit-mask:var(--hg-hoehen) 30% 40%/260% auto no-repeat;mask:var(--hg-hoehen) 30% 40%/260% auto no-repeat}
.hg-bild[data-hg="waben"]::after{background:var(--linie1);-webkit-mask:var(--hg-waben) 0 0/20.8px 36px;mask:var(--hg-waben) 0 0/20.8px 36px}
.hg-bild[data-hg="koernung"]::after{background:var(--hg-korn) 0 0/90px 90px}
.hg-bild[data-hg="aurora"]{background:radial-gradient(70% 34% at 40% 22%,var(--blob1),transparent 72%),radial-gradient(70% 30% at 62% 56%,var(--blob2),transparent 72%),radial-gradient(60% 26% at 45% 88%,color-mix(in srgb,var(--blob1) 50%,var(--blob2)),transparent 72%),var(--bg)}
.hg-bild[data-hg="tiefe"]{background:radial-gradient(circle at 78% 18%,var(--kugel-licht) 0,transparent 9%),radial-gradient(circle at 82% 26%,var(--kugel1) 0 22%,transparent 36%),radial-gradient(circle at 18% 86%,var(--kugel2) 0 18%,transparent 30%),radial-gradient(circle at 52% 56%,var(--kugel3) 0 10%,transparent 17%),var(--bg)}
.hg-bild[data-hg="sternenstaub"]{background:radial-gradient(circle at 18% 30%,var(--stern) 0 .9px,transparent 1.5px),radial-gradient(circle at 42% 70%,var(--stern) 0 1px,transparent 1.6px),radial-gradient(circle at 63% 22%,var(--stern) 0 .8px,transparent 1.4px),
.hg-bild[data-hg="bewegt"]{background:radial-gradient(55% 70% at 68% 28%,var(--blob1),transparent 70%),radial-gradient(60% 85% at 22% 72%,var(--blob2),transparent 70%),radial-gradient(38% 55% at 92% 92%,var(--blob3),transparent 70%),var(--bg)}
  radial-gradient(circle at 80% 58%,var(--stern) 0 1.1px,transparent 1.7px),radial-gradient(circle at 30% 50%,var(--stern) 0 .7px,transparent 1.3px),radial-gradient(circle at 90% 18%,var(--stern) 0 .8px,transparent 1.4px),radial-gradient(circle at 8% 78%,var(--stern) 0 .9px,transparent 1.5px),
  radial-gradient(circle at 55% 90%,var(--stern) 0 .7px,transparent 1.3px),radial-gradient(60% 70% at 95% 0%,var(--blob2),transparent 70%),var(--bg)}
.hg-gruppe{display:grid;gap:7px;min-width:0}
.hg-gruppe+.hg-gruppe{margin-top:6px}
.hg-titel{font-size:calc(12px + var(--plus-k,0px));font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.wahl-liste.hg-liste{grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
.hg-wahl .wahl-k{grid-template-columns:minmax(0,1fr);align-content:start;row-gap:1px;padding:7px 7px 10px;min-height:0}
.hg-wahl .wahl-k :is(b,small){grid-column:auto;padding:0 4px}
.hg-tipp{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:99px;background:var(--goldbg);color:var(--gold);font-style:normal;font-size:calc(10.5px + var(--plus-k,0px));font-weight:650;vertical-align:1px}
@media (max-width:700px){.wahl-liste.hg-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.hg-bild{height:50px}}

/* 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}
/* Leiste am PC (src/auth/darstellung-routen.ts, leisteTeil): Symbole wie in der Leiste auf Anthrazit, ziehen oder Pfeile. */
.lst-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.lst{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 6px 6px 6px;border-radius:14px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi);transition:border-color .15s,opacity .15s}
.lst.zieht{opacity:.5;border-style:dashed;border-color:var(--gold)}
.lst-griff{display:grid;place-items:center;width:22px;height:34px;flex:none;color:var(--mut2);cursor:grab}
.lst-griff svg{width:16px;height:16px}
.lst-ic{display:grid;place-items:center;width:36px;height:34px;flex:none;border-radius:11px;background:#151311;color:#E2DBD1;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.lst-ic.gruppe{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.lst-ic svg{width:17px;height:17px}
.lst-tx{flex:1;min-width:0;display:grid}
.lst-tx b{font-weight:600;font-size:calc(14px + var(--plus,0px));line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lst-tx small{color:var(--mut);font-size:calc(12.5px + var(--plus-k,0px));line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lst-knoepfe{display:flex;gap:4px;flex:none}
.lst-knoepfe .ibtn{width:36px;min-width:36px;height:36px;padding:0}
.lst-knoepfe .ibtn svg{width:16px;height:16px}
.lst-knoepfe .ibtn[disabled]{opacity:.35;cursor:default}
.lst-dazu{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.lst-unten{display:grid;gap:8px;min-width:0}
.lst-schalter{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.lst-check{align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid var(--edge);background:var(--glass2);cursor:pointer}
.lst-check>span{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:1px;align-items:center;min-width:0}
.lst-check>span svg{width:16px;height:16px;color:var(--gold)}
.lst-check b{font-weight:600}
.lst-check small{grid-column:2;color:var(--mut);font-size:calc(12.5px + var(--plus-k,0px));line-height:1.3}
.lst-fuss{justify-content:flex-start}
@media (max-width:700px){
  .lst-griff{display:none}
  .lst{gap:8px;padding-left:8px}
  .lst-ic{width:32px;height:32px}
  .lst-knoepfe{gap:2px}
  .lst-dazu{grid-template-columns:minmax(0,1fr)}
}
.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}}

/* ---------- Kundenkategorie (crm/kategorie.ts): Premium mit Krone, Standard schlicht; Schlagworte als Etiketten ---------- */
.kat{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;vertical-align:1px;white-space:nowrap;
  color:var(--fg2);background:var(--glass3);border:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.kat svg{width:12px;height:12px}
.kat-premium{color:var(--gold);background:var(--goldbg);padding-left:6px;border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.kat-klein{padding:2px 5px}
.nm>.kat{margin-left:2px}
.worte{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;min-width:0}
.tag.wort{text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tag.wort:hover{color:var(--fg);background:var(--goldbg)}
.note.vorschlag{background:var(--goldbg);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.note.vorschlag svg{color:var(--gold)}
.note.vorschlag .row{margin-top:10px}
.note.vorschlag .row svg{color:inherit;margin-top:0;width:16px;height:16px}
.premium-anteil{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:0}
/* Firmenliste (Zentrale): Aktionen am Zeilenende, Schnellfilter, Rückfrage beim Löschen */
.firmen-liste th.akt,.firmen-liste td.akt{width:1%;white-space:nowrap;text-align:right}
.firmen-liste td.akt .row{justify-content:flex-end;flex-wrap:nowrap}
.schnellfilter .btn svg{width:14px;height:14px}
.schnellfilter .btn[aria-pressed="true"] svg{color:var(--gold)}
.loesch-liste{margin:4px 0 12px;padding-left:20px;display:grid;gap:4px}
/* Schmale PC-Fenster (Windows-Programm, 1024 px): lange E-Mails und Kundvio-Stand umbrechen statt seitlich scrollen. */
.firmen-liste td[data-l="Ansprechpartner"] .s{overflow-wrap:anywhere}
.firmen-liste td[data-l="Kundvio"] .pill{white-space:normal}
.firmen-liste .am-stueck{white-space:nowrap}
@media (min-width:701px) and (max-width:1180px){.firmen-liste th,.firmen-liste td{padding-left:9px;padding-right:9px}}
@media (max-width:700px){
  .t.cards.firmen-liste td.akt{width:auto;text-align:left}
  .t.cards.firmen-liste td.akt .row{justify-content:flex-start;flex-wrap:wrap}
  .t.cards.firmen-liste td.leer{display:none}
}

/* ---------- Kunden-Verlauf, E-Mail-Vorlagen, Upsell (crm/verlauf.ts, vorlagen.ts, upsell.ts) ---------- */
/* „Zuletzt“ und „Nächster Termin“ oben auf der Firmenseite */
.zuletzt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.zl-teil{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s);color:inherit;text-decoration:none;min-width:0}
.zl-teil:hover{border-color:var(--edge2)}
.zl-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.zl-k{font-size:var(--fs-xs);font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--mut)}
.zl-tx b{font-weight:600;overflow-wrap:anywhere}
.zl-s{font-size:var(--fs-s);color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Zeitleiste: Punkt je Art, Linie zwischen den Einträgen, nach Tagen gruppiert */
.vl-punkt,.zl-ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--glass3);border:1px solid var(--edge);color:var(--mut);position:relative;z-index:1}
.vl-punkt svg,.zl-ic svg{width:15px;height:15px}
:is(.vl-punkt,.zl-ic):is(.t-anruf,.t-notiz){color:var(--gold);background:var(--goldbg)}
:is(.vl-punkt,.zl-ic).t-email{color:var(--info);background:var(--infobg)}
:is(.vl-punkt,.zl-ic):is(.t-termin,.t-projekt){color:var(--vio);background:var(--viobg)}
:is(.vl-punkt,.zl-ic):is(.t-angebot,.t-rechnung,.t-vertrag){color:var(--ok);background:var(--okbg)}
:is(.vl-punkt,.zl-ic):is(.t-ticket,.t-anfrage){color:var(--warn);background:var(--warnbg)}
.vl-punkt.vk{box-shadow:0 0 0 2px color-mix(in srgb,currentColor 50%,transparent)}
.vl-tag{margin:0;padding:12px 18px 2px;font-size:12px;font-weight:650;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.vl-liste{list-style:none;margin:0;padding:0 18px 6px}
.vl-e{position:relative}
.vl-e:not(:last-child)::before{content:"";position:absolute;left:15px;top:38px;bottom:-4px;width:2px;background:var(--line2);border-radius:2px}
.vl-e>a,.vl-e>div{display:flex;gap:12px;align-items:flex-start;padding:7px 0;color:inherit;text-decoration:none;min-width:0}
.vl-e>a:hover .vl-kopf b{color:var(--gold)}
.vl-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;padding-top:5px}
.vl-kopf{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.vl-kopf b{font-weight:600;overflow-wrap:anywhere}
.vl-text{color:var(--fg2);font-size:var(--fs-s);white-space:pre-line;overflow-wrap:anywhere}
.vl-meta{color:var(--mut);font-size:var(--fs-xs)}
.vl-filter{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px 0}
.vl-filter .chip{text-decoration:none;min-height:32px}
.vl-filter .chip.an{color:var(--fg);background:var(--goldbg);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.vl-demnaechst{border-bottom:1px solid var(--line)}
.vl-mehr{border-top:1px solid var(--line)}
.vl .empty{padding:18px}
/* Schnell eintragen: Art als Knöpfe, „Nicht erreicht“ mit einem Klick */
.vl-eingabe{border-bottom:1px solid var(--line)}
.vl-neu{display:grid;gap:10px}
.vl-arten{display:flex;gap:6px;flex-wrap:wrap;border:0;padding:0;margin:0;min-width:0}
.vl-art{position:relative}
.vl-art input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.vl-art span{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 13px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);color:var(--fg2);font-size:var(--fs-s);cursor:pointer;box-shadow:inset 0 1px 0 var(--hi)}
.vl-art span svg{width:15px;height:15px}
.vl-art input:checked+span{color:var(--fg);background:var(--goldbg);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.vl-art input:checked+span svg{color:var(--gold)}
.vl-art input:focus-visible+span{outline:2.5px solid var(--gold);outline-offset:2px}
.vl-neu .field{margin:0}
.vl-neu .aktionen{margin:0}
.vl-schnell{display:flex;gap:8px;flex-wrap:wrap}
.vl-schnell form{margin:0}
.vl-platz summary{cursor:pointer;color:var(--mut);margin:6px 0}
.vl-platz .kv{margin-top:6px}
/* Firmenliste: letzter Kontakt unter dem Ansprechpartner */
.zuletzt-k{display:flex;gap:4px;align-items:center;color:var(--mut)}
.zuletzt-k svg{width:13px;height:13px;flex:none}
/* Upsell-Hinweise: violett, damit sie sich vom (goldenen) Premium-Vorschlag abheben */
.note.vorschlag.upsell{background:var(--viobg);border-color:color-mix(in srgb,var(--vio) 30%,transparent)}
.note.vorschlag.upsell>svg{color:var(--vio)}
.note.upsell .s{margin-top:4px}
.upsell-li .row{margin-top:8px}
.upsell-li .tx .mut{font-size:var(--fs-s)}
@media (max-width:700px){
  .vl-liste{padding:0 14px 6px}.vl-tag{padding-left:14px;padding-right:14px}.vl-filter{padding:12px 14px 0}
  .vl-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vl-filter::-webkit-scrollbar{display:none}
  .vl-filter .chip{flex:none}
}

/* ---------- 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)}
/* ---------- Rollen (seit 14.11.2026 statt Lizenzen): Abzeichen, Karten, Auswahl, Rechte je Bereich, „Nur lesen“ ---------- */
.lizenz.rz{color:var(--fg2);background:var(--glass3)}
.lizenz.rz-inhaber{color:var(--gold);background:linear-gradient(135deg,color-mix(in srgb,var(--goldf) 26%,transparent),color-mix(in srgb,var(--vio) 14%,transparent))}
.lizenz.rz-geschaeftsfuehrer{color:var(--vio);background:var(--viobg)}
.lizenz.rz-buero{color:var(--info);background:var(--infobg)}
.lizenz.rz-buchhaltung{color:var(--ok);background:var(--okbg)}
.lizenz.rz-webdesign{color:var(--lz-basic);background:var(--lz-basicbg)}
.lizenz.rz-vertrieb{color:var(--warn);background:var(--warnbg)}
.rolle-karte.rk-inhaber{--lk:linear-gradient(90deg,var(--goldf),var(--vio))}.rolle-karte.rk-geschaeftsfuehrer{--lk:var(--vio)}
.rolle-karte.rk-buero{--lk:var(--info)}.rolle-karte.rk-buchhaltung{--lk:var(--ok)}.rolle-karte.rk-webdesign{--lk:var(--lz-basic)}.rolle-karte.rk-vertrieb{--lk:var(--warn)}
.lk-module li.lesen svg{color:var(--info)}
/* Lange Rollennamen („Buchhaltung & Steuerberater“) brechen am schmalen Handy um, statt über die Karte zu ragen. */
.lizenz.rz{max-width:100%}
.lizenz.rz.gross{white-space:normal;border-radius:14px;line-height:1.25}
.rolle-karte{grid-template-columns:minmax(0,1fr)}
.rolle-karte .lk-kopf{flex-wrap:wrap}
.card .hd h2:has(.lizenz.rz){min-width:0}
.rollen-wahl .lw>span{min-width:0}
.rollen-wahl .lizenz.rz{white-space:normal;border-radius:10px}
.rk-alles,.rk-aus,.rk-verwaltung{margin:0;display:flex;gap:7px;align-items:flex-start;font-size:13px;color:var(--fg2)}
.rk-alles svg,.rk-aus svg,.rk-verwaltung svg{width:14px;height:14px;flex:none;margin-top:2px}
.rk-alles svg,.rk-verwaltung.an svg{color:var(--ok)}
.rk-aus{color:var(--mut)}.rk-aus svg{opacity:.7}
.rk-verwaltung{padding-top:10px;border-top:1px solid var(--line)}
.rk-verwaltung:not(.an){color:var(--mut)}
.rollen-zeile{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0}
dd.rollen-zeile{display:flex}
.rollen-wahl .lw.gesperrt{opacity:.6;cursor:not-allowed}
.rollen-wahl legend small{font-weight:400}
@media (max-width:1100px){.rollen-wahl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rollen-wahl{grid-template-columns:minmax(0,1fr)}}
.rechte-matrix{gap:0}
.recht-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 2px;border-top:1px solid var(--line)}
.recht-zeile:first-of-type{border-top:0}
.rz-bereich{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;align-items:center;min-width:0}
.rz-bereich>svg{width:16px;height:16px;color:var(--mut)}
.rz-bereich small{grid-column:2;color:var(--mut);font-size:12px;line-height:1.35}
.recht-wahl{display:inline-flex;flex:none;padding:3px;gap:2px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);box-shadow:inset 0 1px 0 var(--hi)}
.recht-wahl label{position:relative;cursor:pointer}
.recht-wahl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.recht-wahl span{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:99px;font-size:13px;font-weight:600;color:var(--mut);transition:background-color .15s,color .15s}
.recht-wahl label:hover span{color:var(--fg)}
.recht-wahl .rw-aus input:checked+span{background:var(--glass3);color:var(--fg)}
.recht-wahl .rw-lesen input:checked+span{background:var(--infobg);color:var(--info)}
.recht-wahl .rw-voll input:checked+span{background:var(--okbg);color:var(--ok)}
.recht-wahl input:focus-visible+span{outline:2.5px solid var(--gold);outline-offset:1px}
@media (max-width:640px){.recht-zeile{flex-direction:column;align-items:stretch}.recht-wahl{align-self:flex-start}}
.rechte-uebersicht{display:grid;gap:8px;margin-top:4px}
.ru-zeile{display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 12px;font-size:13.5px;align-items:baseline}
.ru-titel{display:inline-flex;gap:6px;align-items:center;font-weight:600;color:var(--fg2)}
.ru-titel svg{width:14px;height:14px;flex:none;align-self:center}
.ru-voll .ru-titel svg{color:var(--ok)}.ru-lesen .ru-titel svg{color:var(--info)}.ru-aus .ru-liste{color:var(--mut)}
@media (max-width:480px){.ru-zeile{grid-template-columns:minmax(0,1fr)}}
.nur-lesen-hinweis{margin-bottom:2px}
.nur-lesen-hinweis svg{color:var(--info)}
/* Bereich nur zum Lesen: Formulare, die etwas ändern, und Links zum Anlegen/Bearbeiten weg (der Server sperrt sie ohnehin). */
.main.nur-lesen :is(.page,.top .acts) form[method="post"],
.main.nur-lesen :is(.page,.top .acts) :is(a[href*="/neu"],a[href*="/bearbeiten"]){display:none!important}
.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-r,.aufg-dia .ende,.aufg-dia .fk-p{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.aufg-dia .ende-r{stroke:var(--glass-solid);stroke-width:13px}
.aufg-dia .ende{stroke:var(--goldf);stroke-width:8.5px}
.aufg-dia .fk{stroke:var(--mut2);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.aufg-dia .fk-p{stroke:var(--goldf);stroke-width:9px}
[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 :is(.ende,.ende-r){animation:aufg-blende .35s 1.4s ease backwards}
@keyframes aufg-blende{from{opacity: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}

/* ----- Neue Ansicht der Zentrale (src/aufgaben/kompakt.ts, 14.11.2026): kompakte Karten, Liste nach Fälligkeit, Filter,
   „Wartet auf …“, Statistik zum Einklappen. Der Kundvio zeigt vorerst das klassische Board (ohne .v2/.kompakt). ----- */
.aufg-pfeil{display:inline-grid;place-items:center;flex:none;color:var(--mut2);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.aufg-pfeil svg{width:15px;height:15px}
details[open]>summary .aufg-pfeil{transform:rotate(90deg)}
:is(.aufg-stat-klappe,.aufg-gr-auf,.aufg-auf,.aufg-wartet)>summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(.aufg-stat-klappe,.aufg-gr-auf,.aufg-auf,.aufg-wartet)>summary::-webkit-details-marker{display:none}
:is(.aufg-stat-klappe,.aufg-gr-auf,.aufg-wartet)>summary:focus-visible{outline:2.5px solid var(--gold);outline-offset:-3px}

/* Statistik zum Einklappen */
.aufg-stat-klappe{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.aufg-stat-klappe>summary{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:6px 10px 6px 8px;margin:-6px 0 -2px -8px;border-radius:10px;font-size:var(--fs-s);font-weight:650;color:var(--mut)}
.aufg-stat-klappe>summary>svg{width:16px;height:16px;color:var(--gold)}
.aufg-stat-klappe>summary:hover{color:var(--fg);background:var(--glass2)}

/* Leiste: Liste/Board und Filter */
.aufg-leiste.v2{justify-content:flex-start;gap:10px 14px}
.aufg-modus{display:inline-flex;flex:none;padding:3px;border-radius:99px;background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi)}
.aufg-modus a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:99px;color:var(--mut);font-weight:650;font-size:calc(13px + var(--plus,0px));text-decoration:none;transition:background-color .2s,color .2s}
.aufg-modus a svg{width:15px;height:15px}
.aufg-modus a:hover{color:var(--fg)}
.aufg-modus a[aria-current]{background:var(--glass3);color:var(--fg);box-shadow:inset 0 1px 0 var(--hi)}
.aufg-modus a:focus-visible{outline:2.5px solid var(--gold);outline-offset:1px}
.aufg-leiste.v2 .aufg-chips{flex:1 1 420px;min-width:0;align-items:center}
.aufg-trenn{width:1px;height:20px;margin:0 3px;flex:none;background:var(--line2)}
.aufg-chip .avatar.mini{width:20px;height:20px;margin-left:-6px;font-size:8.5px}
.aufg-chip[data-pf][aria-current]{background:color-mix(in srgb,var(--pf) 16%,transparent);border-color:color-mix(in srgb,var(--pf) 55%,transparent)}
.aufg-leiste.v2 .aufg-tipp{flex-basis:100%}

/* Kompakte Karte: Kreis (Farbe = Priorität), Titel, Fälligkeit; aufklappbar */
.aufg-k.kompakt{align-items:start;gap:0 2px;padding:2px 8px 2px 0}
.aufg-k.kompakt .aufg-kreis{margin:0}
.aufg-k.kompakt.erledigt{padding-block:0}
.aufg-auf{min-width:0}
.aufg-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"tx wer pf" "meta meta meta";align-items:center;gap:3px 8px;min-height:40px;padding:5px 0;border-radius:10px;outline:none}
.aufg-zeile:focus-visible{outline:2.5px solid var(--gold);outline-offset:1px}
.aufg-zeile-tx{grid-area:tx;display:flex;align-items:center;gap:6px;min-width:0}
.aufg-zeile>.aufg-meta{grid-area:meta;margin:0;gap:5px 8px}
.aufg-zeile>.aufg-meta:empty{display:none}
.aufg-zeile>.aufg-fuer{grid-area:wer}
.aufg-zeile>.aufg-pfeil{grid-area:pf}
.aufg-k.kompakt .aufg-titel{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-width:0;font-size:calc(14px + var(--plus,0px));line-height:1.35}
.aufg-k.kompakt .aufg-auf[open] .aufg-titel{display:block;-webkit-line-clamp:unset;line-clamp:none}
.aufg-k.kompakt.erledigt .aufg-titel{font-size:calc(13.5px + var(--plus,0px))}
@media (hover:hover){.aufg-k.kompakt .aufg-zeile:hover .aufg-titel{color:var(--gold)}}
.aufg-hat-notiz{display:inline-grid;flex:none;color:var(--mut2)}
.aufg-hat-notiz svg{width:14px;height:14px}
.aufg-fuer{display:inline-grid;flex:none}
.aufg-fuer .avatar.mini{width:24px;height:24px;font-size:9.5px;box-shadow:0 0 0 2px color-mix(in srgb,var(--pf) 55%,transparent)}
.aufg-fuer.frei{width:24px;height:24px}
.aufg-board .aufg-zeile>.aufg-pfeil{display:none}
.aufg-k.kompakt .aufg-griff{padding-top:12px}
.aufg-details{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:2px 0 12px;min-width:0}
.aufg-notiz-voll{margin:0;color:var(--fg2);font-size:calc(14px + var(--plus,0px));line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.aufg-info{margin:0;font-size:calc(12.5px + var(--plus,0px));color:var(--mut)}
.aufg-worte{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.aufg-wort{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;background:var(--glass3);color:var(--fg2);font-size:calc(12.5px + var(--plus,0px));font-weight:650;text-decoration:none;transition:background-color .2s,color .2s}
.aufg-wort:hover{color:var(--fg);background:var(--goldbg)}
.aufg-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.aufg-aktionen form{margin:0}
.aufg-geben{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.aufg-geben-l{margin-left:4px;font-size:calc(12.5px + var(--plus,0px));font-weight:600;color:var(--mut)}
.aufg-geben .btn{gap:7px}
.aufg-geben .btn .avatar.mini{width:20px;height:20px;margin-left:-5px;font-size:8.5px;box-shadow:0 0 0 2px color-mix(in srgb,var(--pf) 55%,transparent)}
.aufg-k.kompakt[data-gruppe^="w-"]:not(.erledigt) .aufg-titel{color:var(--fg2)}

/* Liste: eine Karte je Gruppe (Überfällig, Heute, Diese Woche, Später, Ohne Termin, Wartet auf …, Erledigt) */
.aufg-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.aufg-gr{position:relative;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-gr-kopf{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 16px;border-radius:var(--r)}
.aufg-gr-kopf b{font:600 calc(15px + var(--plus,0px)) var(--display)}
.aufg-gr-kopf .aufg-pfeil{margin-left:auto}
.aufg-gr-kopf:hover .aufg-pfeil{color:var(--fg)}
.aufg-gr-auf:not([open])>.aufg-gr-kopf b{color:var(--fg2)}
.aufg-pkt.wartet,.aufg-pkt.b-wartet{--c:transparent;box-shadow:inset 0 0 0 2px var(--mut2)}
/* „In Bearbeitung“ (15.11.2026): grüne Pille mit ruhig pulsierendem Punkt, Karte mit grünem Strich links, Gruppe oben in der Liste */
.aufg-pkt.arbeit{--c:var(--ok)}
.pill.aufg-arbeit{display:inline-flex;align-items:center;gap:6px;max-width:100%;color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);border-color:color-mix(in srgb,var(--ok) 38%,transparent);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill.aufg-arbeit::before{display:none}
.aufg-arbeit-puls{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:var(--ok)}
@media (prefers-reduced-motion:no-preference){.aufg-arbeit-puls::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:aufg-puls 1.8s ease-out infinite}}
@keyframes aufg-puls{from{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}
.aufg-k.kompakt.in-arbeit{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--ok) 70%,transparent)}
.aufg-n-arbeit{color:var(--ok)}

.aufg-spur .b-wartet{fill:color-mix(in srgb,var(--mut2) 22%,transparent)}
.aufg-liste .aufg-stapel{gap:0;padding:0 8px 8px}
.aufg-liste .aufg-k.kompakt{background:transparent;border-color:transparent;box-shadow:none;border-radius:12px}
.aufg-liste .aufg-k.kompakt+.aufg-k.kompakt::before{content:"";position:absolute;left:44px;right:10px;top:0;height:1px;background:var(--line)}
@media (hover:hover){.aufg-liste .aufg-k.kompakt:hover{background:var(--glass2)}}
.aufg-liste .aufg-k.kompakt:has(.aufg-auf[open]){background:var(--glass2)}
.aufg-gr-leer{margin:0;padding:0 18px 14px;color:var(--mut);font-size:var(--fs-s)}
.aufg-gr .aufg-sp-fuss{margin:0 10px 10px}
.aufg-alles{display:flex;align-items:center;gap:14px;padding:18px 20px}
.aufg-alles>svg{width:26px;height:26px;flex:none;color:var(--ok)}
.aufg-alles>div{display:grid;gap:3px;min-width:0}
.aufg-alles span{color:var(--mut);font-size:var(--fs-s)}
@media (min-width:901px){
  .aufg-liste .aufg-zeile{display:flex}
  .aufg-liste .aufg-zeile-tx{flex:1 1 auto}
  .aufg-liste .aufg-zeile>.aufg-meta{flex:none;flex-wrap:nowrap}
  .aufg-liste .aufg-k.kompakt .aufg-titel{-webkit-line-clamp:1;line-clamp:1}
}

/* Board kompakt: Karten enger, „wartet“ eingeklappt unten in der Spalte */
.aufg-board.kompakt .aufg-stapel{gap:6px}
.aufg-wartet{margin:0 10px 10px;border-radius:var(--r-s);border:1.5px dashed var(--line2)}
.aufg-wartet>summary{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-s);font-size:calc(13px + var(--plus,0px));font-weight:650;color:var(--mut)}
.aufg-wartet>summary>svg{width:15px;height:15px;flex:none}
.aufg-wartet>summary .aufg-pfeil{margin-left:auto}
.aufg-wartet>summary:hover{color:var(--fg)}
.aufg-wartet .aufg-stapel{padding:0 6px 8px}

:root:not([data-bewegung="aus"]) .aufg-auf[open]>.aufg-details,
:root:not([data-bewegung="aus"]) :is(.aufg-gr-auf,.aufg-wartet)[open]>.aufg-stapel{animation:aufg-auf .28s cubic-bezier(.2,.8,.2,1)}
@keyframes aufg-auf{from{opacity:0;transform:translateY(-4px)}}

@media (max-width:700px){
  .aufg-leiste.v2{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .aufg-modus{justify-self:start}
  .aufg-modus a{height:36px;padding:0 16px;font-size:calc(14.5px + var(--plus,0px))}
  .aufg-trenn{height:24px}
  .aufg-k.kompakt{padding:1px 10px 1px 0}
  .aufg-k.kompakt .aufg-kreis{margin:0 -2px 0 0}
  .aufg-zeile{min-height:46px;padding:6px 0}
  .aufg-k.kompakt .aufg-titel{font-size:calc(15.5px + var(--plus,0px))}
  .aufg-k.kompakt.erledigt .aufg-titel{font-size:calc(14.5px + var(--plus,0px))}
  .aufg-liste .aufg-stapel{padding:0 4px 6px}
  .aufg-liste .aufg-k.kompakt+.aufg-k.kompakt::before{left:46px}
  .aufg-gr-kopf{min-height:54px;padding:10px 14px}
  .aufg-info,.aufg-geben-l{font-size:calc(13.5px + var(--plus,0px))}
  .aufg-notiz-voll{font-size:calc(15px + var(--plus,0px))}
  .aufg-wartet>summary{padding:12px;font-size:calc(14.5px + var(--plus,0px))}
  .aufg-stat-klappe>summary{font-size:calc(14.5px + var(--plus,0px));padding:8px 10px 8px 8px}
}

/* ===== 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-r,.sk-dia .ende,.sk-dia .fk-p{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sk-dia .ende-r{stroke:var(--glass-solid);stroke-width:13px}
.sk-dia .ende{stroke:var(--goldf);stroke-width:8.5px}
.sk-dia .fk{stroke:var(--mut2);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.sk-dia .fk-p{stroke:var(--goldf);stroke-width:9px}
.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 :is(.ende,.ende-r){animation:sk-blende .35s 1.4s ease backwards}
@keyframes sk-blende{from{opacity: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))}}
.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}
.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}
  .schnell>a{font-size:12.5px;padding:12px 4px 11px}
}
@media (max-width:360px){
  .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(--goldf);color:var(--goldfg)}
.kal-tk:hover b{background:var(--glass3)}.kal-tk.heute:hover b{background:var(--goldf)}
.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(--goldf);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(--goldf);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}
/* In meinen Kalender (Termin-Seite) */
.kal-insk{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.kal-insk-k{display:flex;flex-wrap:wrap;gap:8px}
.kal-insk-k .btn{flex:1 1 180px}
.kal-insk p{margin:0}
.kal-insk-abo{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--fg2)}
.kal-insk-abo svg{width:17px;height:17px;flex:none;color:var(--ok);margin-top:1px}
/* Abo-Hinweis und „neuer Termin“ oben im Kalender */
.kal-abo-hinweis .bd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 14px}
.kal-abo-sym{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--goldbg);color:var(--gold)}
.kal-abo-sym svg{width:20px;height:20px}
.kal-abo-tx{display:grid;gap:2px;min-width:0}
.kal-abo-tx b{overflow-wrap:anywhere}
.kal-abo-tx span{font-size:13px;color:var(--mut);overflow-wrap:anywhere}
.kal-abo-akt{display:flex;align-items:center;gap:6px}
@media (max-width:620px){
  .kal-abo-hinweis .bd{grid-template-columns:auto minmax(0,1fr)}
  .kal-abo-akt{grid-column:1/-1}
  .kal-abo-akt .btn{flex:1}
}
/* 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}
.kal-kunde{display:grid;gap:6px}
.kal-kunde .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(--goldf);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(--goldf);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(--goldf);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))}

/* ===================================================================================================
   Anleitung (Kundvio, src/kundvio/anleitung.ts): Inhaltsverzeichnis, Schritte, Bereiche je Plan. Drucken ergibt helles Papier.
   =================================================================================================== */
.anleitung{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:900px}
.anleitung .card{scroll-margin-top:84px}
.anleitung .bd>p{margin:0 0 8px;line-height:1.55}
.anleitung h3{font-family:var(--display);font-size:15.5px;letter-spacing:-.01em;margin:20px 0 0}
.anleitung .tipps{font-size:var(--fs);gap:10px;line-height:1.55}
.anleitung-inhalt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.anleitung-inhalt a{color:var(--gold);text-decoration:none;font-weight:600}
.anleitung-inhalt a:hover{text-decoration:underline}
.anleitung-bereiche{margin:0 -18px}
.anleitung-bereiche .li:last-child{border-bottom:0}
.anleitung-bereiche .tx span{font-size:var(--fs);color:var(--fg2);line-height:1.5}
.anleitung-bereiche .tx b .pill{font-size:11px}
@media (max-width:560px){.anleitung-inhalt{grid-template-columns:minmax(0,1fr)}}
@media print{
  :root:has(.anleitung){--fg:#14110E;--fg2:#2A2520;--mut:#5A524A;--mut2:#5A524A;--gold:#7A4F00;--goldbg:#F2E4C6;--line:#D8D2CA;--line2:#D8D2CA;color-scheme:light}
  :root:has(.anleitung) body{background:#fff!important;color:#14110E}
  :root:has(.anleitung) body::before,:root:has(.anleitung) .tiefe,:root:has(.anleitung) .side,:root:has(.anleitung) .tabbar,:root:has(.anleitung) .scrim,
  :root:has(.anleitung) .top .acts,:root:has(.anleitung) .gsuche,:root:has(.anleitung) .zurueck-btn,:root:has(.anleitung) .online{display:none!important}
  :root:has(.anleitung) .app{display:block}
  :root:has(.anleitung) .top{position:static;background:none;border:0;padding:0 0 12px}
  :root:has(.anleitung) .page{padding:0;max-width:none}
  :root:has(.anleitung) .anleitung{max-width:none}
  :root:has(.anleitung) .card{background:#fff!important;border:1px solid #D8D2CA;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;break-inside:avoid-page}
  :root:has(.anleitung) .pill{background:none!important;border:1px solid #BDB5AB;color:#2A2520!important}
}
/* Bankabgleich (src/bank/): Vorschlag unter der Buchung, Knöpfe rechts, aufklappbare Karten für Steuer und „ohne Zuordnung“. */
.bank-vorschlag{display:flex;gap:6px;align-items:flex-start;margin-top:4px}
.li .tx .bank-vorschlag{color:var(--fg2)}
.bank-vorschlag>svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--gold)}
.bank-vorschlag>span{min-width:0;overflow-wrap:anywhere}
.bank-knoepfe{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.li .tx .bank-hinweis{color:var(--fg2);font-weight:500}
.bank-zweck{overflow-wrap:anywhere;white-space:pre-wrap}
.bank-aufgehoben .tx b,.bank-aufgehoben .rt .num{text-decoration:line-through;color:var(--mut)}
.bank-haken{margin:4px 0 12px}
.bank-wahl-r{align-items:flex-start}
.bank-wahl-r>span{display:grid;gap:2px;min-width:0}
.bank-wahl-r b{font-weight:600;overflow-wrap:anywhere}
details.bank-karte-zu>summary{list-style:none;cursor:pointer}
details.bank-karte-zu>summary::-webkit-details-marker{display:none}
details.bank-karte-zu>summary h2{display:flex;gap:8px;align-items:center}
details.bank-karte-zu>summary::after{content:"+";margin-left:auto;color:var(--mut);font-size:18px;line-height:1}
details.bank-karte-zu[open]>summary::after{content:"–"}
details.bank-karte-zu:not([open])>summary{border-bottom:0}
details.bank-mehr{margin:8px 0}
details.bank-mehr>summary{cursor:pointer;color:var(--fg2);font-size:var(--fs-s);margin-bottom:8px}
/* Bank-Liste am Handy: Betrag und Knöpfe in eine eigene Zeile unter den Text, damit der Text die volle Breite hat. */
@media (max-width:700px){.li.bank-li{flex-wrap:wrap}.li.bank-li .rt{flex-basis:calc(100% - 46px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;text-align:left;margin:-2px 0 0 46px}}

/* ---------- Schmale Leiste und Spalte „Heute“ (nur Zentrale, src/ui/layout.ts „leiste“ und src/ui/heute-spalte.ts) ----------
   Brian (15.11.2026, Vorbild Bildschirmfoto): Links eine schmale, schwebende Leiste nur mit Symbolen, unten Suche, Hell/Dunkel
   und Abmelden; dadurch mehr Platz rechts. Die Leiste ist in beiden Modi Anthrazit (Markenfarbe, wie im Vorbild), aktive Punkte
   leuchten Gold. Die Gruppe „Heute“ steht direkt in der Leiste, jede andere Gruppe als ein Symbol mit Ausklapp-Menü daneben.
   Der Name eines Symbols kommt beim Überfahren als Hinweis (app.js „Schmale Leiste“). Erst ab 901 px; darunter bleibt das
   aufklappbare Menü und am Handy die Tableiste wie bisher (dort sind Gruppen-Knöpfe aus und die Punkte stehen offen).
   Tönen (z. B. Design-Aufwertung): --leiste-bg und --leiste-rand. Ab 1400 px steht rechts die Spalte „Heute“. */
.grp-knopf,.fly-titel,.nur-leiste,.leiste-tip,.heute-spalte{display:none}
.fly{display:contents}
@media (min-width:901px){
  :root{--leiste-bg:#151311;--leiste-rand:rgba(255,255,255,.09);--leiste-fg:#D9D2C7;--leiste-mut:#AFA79B;--leiste-hover:rgba(255,255,255,.07);
    --leiste-an:rgba(255,255,255,.12);--leiste-linie:rgba(255,255,255,.1);--leiste-schatten:0 18px 44px rgba(0,0,0,.34)}
  :root[data-theme="light"]{--leiste-bg:#1D1A17;--leiste-schatten:0 18px 40px rgba(46,32,16,.24)}
  .app.schmal{grid-template-columns:auto minmax(0,1fr)}
  /* Feste dunkle Fläche statt Glas: Ausklapp-Menüs (position:fixed) dürfen nicht in der Leiste hängen bleiben, und
     unscharf rechnen muss hier nichts. Die Farben darin sind immer die dunklen, auch im hellen Modus. */
  /* z-index: Die Leiste klebt (sticky, eigene Ebene); ihre Ausklapp-Menüs sollen über Inhalt und Kopfzeile liegen. */
  .app.schmal>.side{z-index:40;width:64px;height:calc(100vh - 24px);height:calc(100dvh - 24px);top:12px;margin:12px 0 12px 12px;padding:10px 0;align-items:center;gap:2px;
    background:var(--leiste-bg);border:1px solid var(--leiste-rand);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--leiste-schatten);
    -webkit-backdrop-filter:none;backdrop-filter:none;scrollbar-width:none;color:var(--leiste-fg);color-scheme:dark;
    --fg:#F6F2EC;--fg2:#E2DBD1;--mut:#C2BAAF;--mut2:#ACA498;--glass-solid:var(--leiste-bg)}
  .app.schmal>.side::-webkit-scrollbar{display:none}
  .app.schmal>.side>.brand{flex:none;padding:2px 0 6px}
  .app.schmal>.side>.brand svg{width:38px;height:38px}
  /* Namen bleiben für Vorleseprogramme da, sichtbar sind nur die Symbole. */
  .app.schmal>.side>.brand>span,.app.schmal>.side>.grp>span,.app.schmal>.side>.nav>span:not(.cnt),.app.schmal>.side .foot .btn>span,.app.schmal>.side .foot .ich>span:last-child{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Gruppen: eine feine Linie; die Gruppen mit Ausklapp-Menü stehen zusammen unter einer Linie. */
  .app.schmal>.side>.grp{flex:none;width:28px;height:1px;padding:0;margin:7px 0;background:var(--leiste-linie)}
  .app.schmal>.side>.fly-grp~.fly-grp{display:none}
  .app.schmal>.side>.nav,.app.schmal>.side .foot .btn,.app.schmal>.side .foot .ich{flex:none;position:relative;display:flex;align-items:center;justify-content:center;
    width:44px;height:40px;padding:0;margin:0;gap:0;border:1px solid transparent;border-radius:13px;background:transparent;box-shadow:none;color:var(--leiste-fg);font-size:0}
  .app.schmal>.side>.nav svg,.app.schmal>.side .foot .btn svg{width:19px;height:19px;color:currentColor;flex:none}
  .app.schmal>.side>.nav:hover,.app.schmal>.side .foot .btn:hover,.app.schmal>.side .foot .ich:hover,.app.schmal>.side>.grp-knopf[aria-expanded="true"]{background:var(--leiste-hover);color:#fff;transform:none}
  .app.schmal>.side>.nav.on,.app.schmal>.side>.grp-knopf.drin,.app.schmal>.side .foot .ich.on{background:var(--leiste-an);border-color:var(--leiste-rand);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:#fff}
  .app.schmal>.side>.nav.on svg,.app.schmal>.side>.grp-knopf.drin svg{color:var(--goldf)}
  /* Goldener Strich am Rand der Leiste neben dem aktiven Punkt */
  .app.schmal>.side>.nav.on::before,.app.schmal>.side>.grp-knopf.drin::before{content:"";position:absolute;left:-11px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--goldf)}
  .app.schmal>.side>.nav>.cnt{position:absolute;top:1px;right:0;margin:0;min-width:17px;height:17px;padding:0 4px;border-radius:99px;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
    background:var(--goldf);color:var(--goldfg);box-shadow:0 0 0 2px var(--leiste-bg)}
  .app.schmal>.side>.nav>.cnt.bad{background:#D63A3F;color:#fff}
  .grp-knopf{cursor:pointer;font:inherit}
  .app.schmal>.side>.grp-knopf{display:flex}
  /* Unten: Suchen, Hell/Dunkel, Spalte „Heute“, eigenes Profilbild, Abmelden */
  .app.schmal>.side>.foot{flex:none;margin-top:auto;padding:8px 0 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}
  .app.schmal>.side>.foot::before{content:"";width:28px;height:1px;margin:0 0 7px;background:var(--leiste-linie)}
  .app.schmal>.side .foot-acts{display:contents}
  .app.schmal>.side .foot .nur-leiste{display:flex}
  .app.schmal>.side .foot .l-suche{order:1}
  .app.schmal>.side .foot .l-thema{order:2}
  .app.schmal>.side .foot .l-darstellung{order:3}
  .app.schmal>.side .foot .l-heute{order:4;display:none}
  .app.schmal>.side .foot .ich{order:5;height:44px;margin-top:2px}
  .app.schmal>.side .foot .ich .avatar.klein{width:32px;height:32px;font-size:12px}
  .app.schmal>.side .foot .ich.on .avatar{box-shadow:0 0 0 2px var(--goldf)}
  .app.schmal>.side .l-ab{order:6}
  .app.schmal>.side .foot .l-heute[aria-pressed="true"]{color:#fff}
  .app.schmal>.side .foot .l-heute[aria-pressed="true"] svg{color:var(--goldf)}
  /* Ausgeblendet unter Mein Konto → Darstellung → Leiste am PC (nur in der Leiste, im Handy-Menü bleibt alles). */
  .app.schmal>.side .foot .l-aus{display:none}
  /* Eigene Leiste (data-leiste="eigen"): Die gewählten Symbole stehen als Punkte „le“ oben, die üblichen sind aus. */
  .app.schmal>.side[data-leiste="eigen"]>:is(.grp,.nav,.grp-knopf):not(.le){display:none}
  /* Hell/Dunkel steht jetzt unten in der Leiste, oben im Kopf wäre es doppelt. */
  .app.schmal .top .thema{display:none}
  /* Ausklapp-Menü einer Gruppe: schwebt neben der Leiste (Position setzt app.js), gleiche dunkle Fläche, mit Namen. */
  .app.schmal>.side .fly{display:none;position:fixed;z-index:80;left:88px;top:12px;width:252px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;padding:8px;border-radius:18px;background:var(--leiste-bg);border:1px solid var(--leiste-rand);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.45);color:var(--leiste-fg)}
  .app.schmal>.side .fly.offen{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
  .app.schmal>.side .fly-titel{display:block;padding:5px 10px 6px;font-size:calc(11.5px + var(--plus-k,0px));letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--leiste-mut)}
  .app.schmal>.side .fly-titel:not(:first-child){margin-top:8px}
  .app.schmal>.side .fly .nav{color:var(--leiste-fg);padding:8px 10px;border-radius:11px}
  .app.schmal>.side .fly .nav svg{color:var(--leiste-mut)}
  .app.schmal>.side .fly .nav:hover{background:var(--leiste-hover);color:#fff}
  .app.schmal>.side .fly .nav.on{background:var(--leiste-an);border-color:var(--leiste-rand);box-shadow:none;color:#fff}
  .app.schmal>.side .fly .nav.on svg{color:var(--goldf)}
  .app.schmal>.side .fly .nav .cnt{background:rgba(255,255,255,.1);color:var(--leiste-fg)}
  .app.schmal>.side .fly .nav .cnt.hot{background:var(--goldf);color:var(--goldfg)}
  .app.schmal>.side .fly .nav .cnt.bad{background:#D63A3F;color:#fff}
  /* Hinweis mit dem Namen beim Überfahren (app.js hängt ihn einmal an <body>) */
  .leiste-tip{display:block;position:fixed;z-index:90;left:0;top:0;pointer-events:none;padding:6px 10px;border-radius:9px;background:#2A2622;border:1px solid rgba(255,255,255,.12);
    color:#F6F2EC;font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateX(-4px);
    transition:opacity .12s,transform .12s,visibility 0s linear .12s}
  .leiste-tip.an{opacity:1;visibility:visible;transform:none;transition:opacity .12s,transform .12s}
  .leiste-tip::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;background:inherit;border-left:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);transform:translateY(-50%) rotate(45deg)}
}
/* Kleine Bildschirmhöhe (Laptop, Fenster): Symbole etwas enger, damit die Leiste ohne Scrollen passt. */
@media (min-width:901px) and (max-height:720px){
  .app.schmal>.side{padding:8px 0}
  .app.schmal>.side>.nav,.app.schmal>.side .foot .btn{height:34px}
  .app.schmal>.side>.brand{padding-bottom:2px}
  .app.schmal>.side>.brand svg{width:34px;height:34px}
  .app.schmal>.side>.grp{margin:5px 0}
  .app.schmal>.side>.nav.on::before,.app.schmal>.side>.grp-knopf.drin::before{top:7px;bottom:7px}
}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-bewegung="aus"]) .app.schmal>.side .fly.offen{animation:fly-auf .16s cubic-bezier(.2,.8,.2,1)}
}
@keyframes fly-auf{from{opacity:0;transform:translateX(-6px)}}

/* Spalte „Heute“ rechts (ab 1400 px): eigene Termine von heute und morgen, wichtigste Aufgaben. Ausblenden merkt sich das Gerät. */
@media (min-width:1400px){
  .app.schmal.mit-heute{grid-template-columns:auto minmax(0,1fr) 304px}
  :root[data-heute="aus"] .app.schmal.mit-heute{grid-template-columns:auto minmax(0,1fr)}
  .app.schmal.mit-heute>.heute-spalte{display:flex;flex-direction:column;gap:18px;grid-column:3;grid-row:1;position:sticky;top:12px;align-self:start;height:calc(100vh - 24px);height:calc(100dvh - 24px);
    margin:12px 12px 12px 0;padding:16px 14px 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--mut2) 50%,transparent) transparent;
    border-radius:22px;background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s)}
  :root[data-heute="aus"] .app.schmal.mit-heute>.heute-spalte{display:none}
  .app.schmal.mit-heute>.side .foot .l-heute{display:flex}
  /* Knopf „Spalte Heute“ ausgeblendet: Er kommt zurück, solange die Spalte zu ist, sonst ginge sie nicht mehr auf. */
  :root:not([data-heute="aus"]) .app.schmal.mit-heute>.side .foot .l-heute.l-aus{display:none}
}
/* Eigene Leiste: Ihre Punkte gibt es nur in der Leiste am PC; am Handy und im aufklappbaren Menü bleibt das übliche Menü. */
@media (max-width:900px){.side>.le{display:none!important}}
.hs-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hs-kopf b{display:block;font-family:var(--display);font-size:calc(20px + var(--plus,0px));font-weight:700;letter-spacing:-.02em;line-height:1.2}
.hs-kopf span{display:block;color:var(--mut);font-size:var(--fs-s)}
.hs-zu{height:32px;min-width:32px;padding:0 7px;flex:none}
.hs-zu svg{width:15px;height:15px}
.hs-teil{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hs-t{display:flex;align-items:center;gap:8px;margin:0;font-size:calc(12px + var(--plus-k,0px));font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.hs-t>a:first-child{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
.hs-t>a:first-child:hover{color:var(--fg)}
.hs-t svg{width:15px;height:15px}
.hs-n{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--glass3);color:var(--fg2);font-size:11.5px;line-height:20px;text-align:center;letter-spacing:0}
.hs-plus{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);color:var(--fg2)}
.hs-plus:hover{border-color:var(--edge2);color:var(--fg)}
.hs-plus svg{width:14px;height:14px}
.hs-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.hs-liste a{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:9px 11px;border-radius:13px;border:1px solid var(--edge);background:var(--glass2);color:var(--fg);text-decoration:none;transition:border-color .15s,background-color .15s}
.hs-liste a:hover{border-color:var(--edge2);background:var(--glass3)}
.hs-termin{box-shadow:inset 3px 0 0 var(--kf,var(--gold))}
.hs-termin.jetzt{border-color:color-mix(in srgb,var(--goldf) 50%,transparent)}
.hs-zeit{flex:none;min-width:46px;padding-top:1px;font-size:calc(12.5px + var(--plus-k,0px));font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg2)}
.hs-termin.jetzt .hs-zeit{color:var(--gold)}
.hs-tx{min-width:0;display:grid}
.hs-tx b{font-weight:600;font-size:calc(13.5px + var(--plus,0px));line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.hs-tx small{color:var(--mut);font-size:calc(12px + var(--plus-k,0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-tx small.hs-bad{color:var(--bad);font-weight:600}
.hs-tx small.hs-warn{color:var(--warn);font-weight:600}
.hs-punkt{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--info)}
.hs-aufgabe[data-prio="hoch"] .hs-punkt{background:var(--bad)}
.hs-aufgabe[data-prio="mittel"] .hs-punkt{background:var(--warn)}
.hs-unter{margin-top:2px;font-size:calc(12px + var(--plus-k,0px));font-weight:600;color:var(--mut)}
.hs-leer{display:flex;align-items:center;gap:7px;padding:2px;color:var(--mut);font-size:var(--fs-s)}
.hs-leer svg{width:15px;height:15px;color:var(--ok)}
.hs-hinweis{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:13px;background:var(--warnbg);color:var(--fg);text-decoration:none;font-size:var(--fs-s)}
.hs-hinweis svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--warn)}
.hs-mehr{display:inline-flex;align-items:center;gap:4px;padding:2px;font-size:var(--fs-s);font-weight:600;color:var(--gold);text-decoration:none}
.hs-mehr svg{width:14px;height:14px}

/* ===================================================================================================
   Design-Aufwertung (15.11.2026, Brian: Cockpit, ruhigere Seiten, Bewegung mit Gefühl, Befehlsleiste Strg+K,
   schöne leere Zustände, Hell-Modus, dezentes Glas). Beschreibung: docs/design-aufwertung.md.
   Gilt seit dem Kundvio-Nachzug (Brian 15.11.2026) für Zentrale und Kundvio gleich. Bewegung nur über transform und opacity.
   =================================================================================================== */

/* ----- Cockpit oben auf der Übersicht (src/start-cockpit.ts) ----- */
.cockpit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;min-width:0}
.cockpit.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cockpit.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cockpit.n1{grid-template-columns:minmax(0,1fr)}
/* Kompakt (Brian 15.11.2026: „sieht oben komisch aus“): Kopf, darunter Zahl mit kleiner Kurve rechts daneben, darunter ein Satz.
   Ohne Werte keine Kurve, die Kachel bleibt gleich hoch (.ck-mitte hat eine Mindesthöhe). */
.ck{--ct:var(--gold);position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0;padding:15px 18px 14px;border-radius:var(--r);overflow:clip;
  color:inherit;text-decoration:none;background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s)}
/* Ein Hauch der Kachelfarbe oben rechts, heller beim Überfahren */
.ck::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;transition:opacity .3s;
  background:radial-gradient(90% 80% at 100% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%)}
.ck.sk-gold{--ct:var(--gold)}.ck.sk-ok{--ct:var(--ok)}.ck.sk-warn{--ct:var(--warn)}.ck.sk-bad{--ct:var(--bad)}.ck.sk-info{--ct:var(--info)}.ck.sk-vio{--ct:var(--vio)}
.ck-kopf{display:flex;align-items:center;gap:9px;min-width:0;font-size:calc(13.5px + var(--plus-k,0px));font-weight:600;color:var(--fg2)}
.ck-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--ct);background:color-mix(in srgb,var(--c) 17%,transparent);box-shadow:inset 0 1px 0 var(--hi)}
.ck-ic svg{width:16px;height:16px}
.ck-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-kopf>svg{margin-left:auto;width:15px;height:15px;flex:none;color:var(--mut2);transition:transform .2s cubic-bezier(.2,.8,.2,1),color .2s}
.ck-marke{margin-left:auto;flex:none;font-size:calc(11.5px + var(--plus-k,0px));font-weight:700;padding:2px 8px;border-radius:99px;background:var(--badbg);color:var(--bad);white-space:nowrap}
.ck.sk-warn .ck-marke{background:var(--warnbg);color:var(--warn)}
.ck-mitte{display:flex;align-items:flex-end;gap:14px;min-width:0;min-height:46px;margin-top:8px}
.ck-v{display:block;flex:none;max-width:100%;font:700 calc(30px + var(--plus,0px)) var(--display);letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-unter{display:block;margin-top:6px;min-width:0;font-size:calc(12.5px + var(--plus-k,0px));font-weight:550;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-kurve{display:block;flex:1 1 0;min-width:0;max-width:300px;margin-left:auto;padding:0 4px 3px 0}
/* Feste Höhe, die Kurve füllt die Breite (preserveAspectRatio="none"); Striche und Punkt in Bildschirmpunkten, damit nichts verzerrt. */
.ck-svg{display:block;width:100%;height:40px;overflow:visible}
.ck-fl{fill:var(--c);fill-opacity:.14}
.ck-ln{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ck-pkt-r,.ck-pkt{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ck-pkt-r{stroke:var(--glass-solid);stroke-width:12px}
.ck-pkt{stroke:var(--c);stroke-width:7.5px}
.ck-hit{fill:transparent}
@media (hover:hover){
  .ck:hover{border-color:var(--edge2)}
  .ck:hover::before{opacity:1}
  .ck:hover .ck-kopf>svg{transform:translateX(2px);color:var(--ct)}
}
.ck:focus-visible{outline-offset:3px;border-radius:var(--r)}
@media (max-width:1180px){.cockpit,.cockpit.n3{grid-template-columns:repeat(2,minmax(0,1fr))}.cockpit.n3>:last-child{grid-column:1/-1}}
@media (max-width:700px){
  .cockpit{gap:12px}
  /* Handy: zwei Kacheln je Reihe. Symbol ohne Fläche, damit der Titel ganz passt; Kurve klein neben der Zahl. */
  .ck{padding:12px 13px}
  .ck-kopf{gap:6px;font-size:calc(13px + var(--plus-k,0px))}
  .ck-ic{width:auto;height:auto;background:none;box-shadow:none;border-radius:0}
  .ck-ic svg{width:15px;height:15px}
  .ck-kopf>svg{display:none}
  .ck-marke{display:none}
  .ck-mitte{gap:8px;min-height:34px;margin-top:6px}
  .ck-v{font-size:calc(22px + var(--plus,0px))}
  .ck-svg{height:28px}
  .ck-kurve{padding:0 2px 3px 0}
  .ck-unter{margin-top:4px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:calc(12px + var(--plus-k,0px));line-height:1.35}
}
@media (max-width:360px){.ck-v{font-size:calc(19px + var(--plus,0px))}.ck{padding:11px 11px}}
/* Beim Öffnen: Kacheln kommen nacheinander, die Kurve wächst vom Boden hoch, der Punkt am Ende blendet ein. Einmal, nur bei erlaubter Bewegung.
   (Kein Zeichnen über stroke-dasharray: Mit vector-effect bricht Chrome die Linie dabei vor dem Ende ab.) */
@media (prefers-reduced-motion:no-preference){
  :root:not([data-bewegung="aus"]) .cockpit>.ck{animation:ck-rein .55s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not([data-bewegung="aus"]) .cockpit>.ck:nth-child(2){animation-delay:.05s}
  :root:not([data-bewegung="aus"]) .cockpit>.ck:nth-child(3){animation-delay:.1s}
  :root:not([data-bewegung="aus"]) .cockpit>.ck:nth-child(4){animation-delay:.15s}
  :root:not([data-bewegung="aus"]) .ck-ln,:root:not([data-bewegung="aus"]) .ck-fl{transform-box:view-box;transform-origin:50% 100%;animation:ck-steigen .9s cubic-bezier(.2,.8,.2,1) .3s backwards}
  :root:not([data-bewegung="aus"]) .ck-pkt,:root:not([data-bewegung="aus"]) .ck-pkt-r{animation:ck-fl .35s ease 1s backwards}
}
@keyframes ck-rein{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes ck-steigen{from{opacity:0;transform:scaleY(.12)}}
@keyframes ck-fl{from{opacity:0}}

/* ----- Befehlsleiste Strg+K (public/app.js „Befehlsleiste“, src/suche-routen.ts /befehle) ----- */
dialog.bl{position:fixed;inset:0;margin:11vh auto auto;width:min(660px,calc(100vw - 32px));max-height:min(600px,78vh);max-height:min(600px,78dvh);padding:0;border-radius:22px;
  border:1px solid var(--edge2);color:var(--fg);background:color-mix(in srgb,var(--glass-solid) 90%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--hi),0 30px 90px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain}
dialog.bl:not([open]){display:none}
dialog.bl::backdrop{background:var(--scrim)}
:root[data-theme="light"] dialog.bl{box-shadow:inset 0 1px 0 var(--hi),0 30px 80px rgba(60,40,20,.22)}
.bl-kopf{position:relative;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line);flex:none}
/* Feine Lichtkante in Gold und Violett unter dem Eingabefeld */
.bl-kopf::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--goldf),var(--vio),transparent);opacity:.6;pointer-events:none}
.bl-kopf>svg{width:19px;height:19px;color:var(--gold);flex:none}
.bl-inp{flex:1;min-width:0;height:42px;border:0;background:transparent;color:var(--fg);font-size:17px;padding:0}
.bl-inp::placeholder{color:var(--mut2);opacity:1}
.bl-inp:focus,.bl-inp:focus-visible{outline:none}
.bl-hilfe-k,.bl-zu{flex:none;height:30px;min-width:30px;border-radius:99px;border:1px solid var(--edge);background:var(--glass2);color:var(--fg2);font:600 13px var(--body);padding:0 9px;box-shadow:inset 0 1px 0 var(--hi)}
.bl-hilfe-k{font-size:15px;padding:0}
.bl-hilfe-k[aria-expanded="true"]{background:var(--goldbg);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.bl-zu{font-family:var(--mono);font-size:11.5px;color:var(--mut)}
@media (hover:hover){.bl-hilfe-k:hover,.bl-zu:hover{border-color:var(--edge2);color:var(--fg)}}
.bl-liste{list-style:none;margin:0;padding:6px 8px 10px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0;scrollbar-width:thin}
.bl-gruppe{padding:12px 10px 5px;font-size:11.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--mut2)}
.bl-e{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:13px;cursor:pointer;min-width:0;scroll-margin:8px}
.bl-e.an{background:var(--glass3);box-shadow:inset 0 1px 0 var(--hi)}
.bl-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--glass2);color:var(--fg2);border:1px solid var(--line)}
.bl-ic svg{width:16px;height:16px}
.bl-ic.gold,.bl-e.an .bl-ic{background:var(--goldbg);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 25%,transparent)}
.bl-tx{min-width:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr)}
.bl-tx b{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-tx small{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-enter{flex:none;opacity:0}
.bl-e.an .bl-enter{opacity:1}
.bl-nichts{padding:26px 12px;text-align:center;color:var(--mut)}
.bl-fuss{display:flex;gap:6px 18px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--mut);flex:none}
.bl-fuss kbd{margin-right:3px}
/* Einführung beim ersten Öffnen */
.bl-anleitung{margin:12px 12px 2px;padding:14px 16px;border-radius:16px;display:grid;gap:8px;flex:none;font-size:13.5px;color:var(--fg2);
  background:linear-gradient(135deg,var(--goldbg),var(--viobg));border:1px solid color-mix(in srgb,var(--gold) 26%,transparent)}
.bl-anleitung>b{font-family:var(--display);font-size:16px;color:var(--fg);letter-spacing:-.01em}
.bl-anleitung ol{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.bl-anleitung li{display:flex;gap:10px;align-items:flex-start}
.bl-anleitung li>span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--gold);color:var(--glass-solid)}
.bl-anleitung li b{color:var(--fg)}
.bl-anl-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:12.5px;color:var(--mut)}
/* Hilfe hinter „?“ */
.bl-hilfe{padding:14px 18px 18px;display:grid;gap:10px;align-content:start;overflow:auto;overscroll-behavior:contain;font-size:13.5px;color:var(--fg2);flex:1 1 auto;min-height:0}
dialog.bl.mit-hilfe :is(.bl-liste,.bl-fuss,.bl-anleitung){display:none}
.bl-hilfe>b{color:var(--fg);font-size:14px}
.bl-tasten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;margin:0;align-items:center}
.bl-tasten dt{white-space:nowrap}.bl-tasten dd{margin:0;color:var(--mut)}
.bl-beispiele{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bl-beispiele li{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bl-beispiele button{font:500 12.5px var(--mono);padding:3px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--glass3);color:var(--fg)}
@media (hover:hover){.bl-beispiele button:hover{border-color:var(--gold);color:var(--gold)}}
.bl-beispiele span{color:var(--mut)}
.bl-klein{font-size:12.5px;color:var(--mut)}
.bl-hilfe .btn{justify-self:start}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-bewegung="aus"]) dialog.bl[open]{animation:bl-auf .22s cubic-bezier(.2,.8,.2,1)}
  :root:not([data-bewegung="aus"]) dialog.bl[open]::backdrop{animation:bl-scrim .22s ease}
  :root:not([data-bewegung="aus"]) dialog.bl.geht{opacity:.6;transition:opacity .15s}
}
@keyframes bl-auf{from{opacity:0;transform:translateY(-10px) scale(.975)}}
@keyframes bl-scrim{from{opacity:0}}
@media (max-width:700px){
  dialog.bl{margin:calc(10px + env(safe-area-inset-top,0px)) auto auto;width:calc(100vw - 20px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px));border-radius:20px}
  .bl-kopf{padding:10px 10px 10px 16px}
  .bl-hilfe-k,.bl-zu{height:36px;min-width:36px}
  .bl-zu{font-family:var(--body);font-size:13px}
  .bl-e{padding:11px 10px}
  .bl-ic{width:36px;height:36px}
  .bl-tx b{font-size:16px}
  .bl-tx small{font-size:13.5px}
  .bl-enter,.bl-fuss{display:none}
  .bl-anleitung,.bl-hilfe{font-size:14.5px}
}
/* Hinweis auf der Übersicht (Schnell starten): öffnet die Befehlsleiste, ohne Skript die Suche */
.bl-tipp{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;border:1px dashed var(--line2);color:var(--fg2);text-decoration:none;font-size:13px;font-weight:600}
.bl-tipp svg{width:16px;height:16px;color:var(--gold);flex:none}
.bl-tipp span{flex:1;min-width:0}
.bl-tipp kbd{flex:none}
@media (hover:hover){.bl-tipp:hover{border-color:var(--gold);color:var(--fg)}}
@media (max-width:700px){.bl-tipp kbd{display:none}.bl-tipp{font-size:14.5px}}

/* ----- Leere Zustände (src/ui/bausteine.ts leer()): kleine Grafik, Überschrift, ein Satz, Knopf ----- */
.empty{color:var(--mut);line-height:1.5}
.leer-z{display:grid;justify-items:center;gap:6px;padding:34px 20px 36px;text-align:center}
.leer-bild{position:relative;display:grid;place-items:center;width:140px;height:100px;margin-bottom:6px}
.leer-z .leer-svg{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:visible}
.lz-hof{fill:color-mix(in srgb,var(--goldf) 9%,transparent)}
.lz-ring{fill:none;stroke:color-mix(in srgb,var(--gold) 30%,transparent);stroke-width:1.2;stroke-dasharray:3 5}
.lz-k{fill:var(--glass2);stroke:var(--line2);stroke-width:1}
.lz-k1{fill:color-mix(in srgb,var(--vio) 12%,var(--glass2))}
.lz-z{fill:none;stroke:var(--line2);stroke-width:2.4;stroke-linecap:round}
.lz-f{fill:var(--gold)}.lz-f2,.lz-f4{fill:var(--vio)}.lz-f3{fill:color-mix(in srgb,var(--gold) 60%,transparent)}
.leer-ic{position:relative;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:var(--goldfg);background:linear-gradient(140deg,var(--pri1),var(--pri2));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px var(--pri-glow)}
.leer-z .leer-ic svg{width:24px;height:24px;margin:0;vertical-align:0;color:inherit;stroke-width:2}
.leer-t{font:700 calc(17px + var(--plus,0px)) var(--display);letter-spacing:-.015em;color:var(--fg)}
.leer-tx{max-width:46ch;color:var(--mut);font-size:calc(14px + var(--plus,0px))}
.leer-k{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-bewegung="aus"]) .leer-ic{animation:leer-pop .6s cubic-bezier(.3,1.4,.5,1) .1s backwards}
  :root:not([data-bewegung="aus"]) .leer-svg>g:nth-of-type(1){animation:leer-k1 .7s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not([data-bewegung="aus"]) .leer-svg>g:nth-of-type(2){animation:leer-k2 .7s cubic-bezier(.2,.8,.2,1) .05s backwards}
  :root:not([data-bewegung="aus"]) .lz-f{transform-box:fill-box;transform-origin:center;animation:leer-funke .5s cubic-bezier(.3,1.6,.5,1) backwards}
  :root:not([data-bewegung="aus"]) .lz-f1{animation-delay:.45s}:root:not([data-bewegung="aus"]) .lz-f2{animation-delay:.55s}
  :root:not([data-bewegung="aus"]) .lz-f3{animation-delay:.62s}:root:not([data-bewegung="aus"]) .lz-f4{animation-delay:.7s}
}
@keyframes leer-pop{from{opacity:0;transform:scale(.6) translateY(6px)}}
@keyframes leer-k1{from{opacity:0}}
@keyframes leer-k2{from{opacity:0}}
@keyframes leer-funke{from{opacity:0;transform:scale(0)}}
@media (max-width:700px){.leer-z{padding:28px 16px 30px}.leer-tx{font-size:calc(15px + var(--plus,0px))}}

/* ----- Ruhigere Seiten (Zentrale und Kundvio) -----
   app.js „Ruhigere Tabellen“ markiert Zellen, in denen nur „–“ steht, mit .leer und blendet Spalten aus, die überall leer
   sind (.sp-weg). Am PC etwas mehr Luft, Tabellen fluchten mit der Kartenüberschrift. Am Handy fallen leere Felder weg. */
.sp-weg{display:none!important}
:root .t td.leer{color:var(--mut2)}
@media (min-width:701px){
  :root:not([data-dichte="kompakt"]) .page{gap:24px}
  :root:not([data-dichte="kompakt"]) .grid{gap:22px}
  :root:not([data-dichte="kompakt"]) .card>.hd{padding:16px 20px}
  :root:not([data-dichte="kompakt"]) :is(.card>.bd,.card>form>.bd){padding:18px 20px}
  :root:not([data-dichte="kompakt"]) .card .t :is(th,td):first-child{padding-left:20px}
  :root:not([data-dichte="kompakt"]) .card .t :is(th,td):last-child{padding-right:20px}
  :root:not([data-dichte="kompakt"]) .t td{padding-top:13px;padding-bottom:13px}
  :root .card>.hd h2{letter-spacing:-.01em}
}
@media (max-width:700px){
  :root .t.cards td.leer{display:none}
}

/* ----- Bewegung mit Gefühl: Kacheln heben sich unter der Maus leicht an, Zeilen gleiten nacheinander ein -----
   Nur transform und opacity, nur mit Maus (hover:hover), nie bei „Animationen: Aus“ oder „Bewegung reduzieren“. */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  :root:not([data-bewegung="aus"]) :is(.ck,.sk,.schnell>a,.leer-k .btn){transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .2s}
  :root:not([data-bewegung="aus"]) :is(.ck,.sk):hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold) 28%,var(--edge))}
  :root:not([data-bewegung="aus"]) .schnell>a:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-bewegung="aus"]) .t tbody tr:nth-child(-n+12){animation:rein .34s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not([data-bewegung="aus"]) .t tbody tr:nth-child(2){animation-delay:.03s}
  :root:not([data-bewegung="aus"]) .t tbody tr:nth-child(3){animation-delay:.06s}
  :root:not([data-bewegung="aus"]) .t tbody tr:nth-child(4){animation-delay:.09s}
  :root:not([data-bewegung="aus"]) .t tbody tr:nth-child(5){animation-delay:.12s}
  :root:not([data-bewegung="aus"]) .t tbody tr:nth-child(n+6){animation-delay:.15s}
}

/* ----- Hell-Modus: klarere Kanten und ruhigere Schatten, damit Karten auf dem hellen Grund sauber stehen ----- */
:root[data-theme="light"]:not([data-kontrast="hoch"]) :is(.card,.kpis,.kz,.ck){border-color:rgba(70,50,30,.11);
  box-shadow:inset 0 1px 0 var(--hi),0 1px 2px rgba(60,40,20,.05),0 12px 30px -10px rgba(60,40,20,.14)}
:root[data-theme="light"] .t tbody tr:hover td{background:color-mix(in srgb,var(--goldf) 6%,transparent)}
:root[data-theme="light"] .t th{color:var(--mut)}
:root[data-theme="light"]:not([data-kontrast="hoch"]) .card>.hd{border-bottom-color:rgba(70,50,30,.08)}
:root[data-theme="light"]:not([data-kontrast="hoch"]) .t :is(th,td){border-bottom-color:rgba(70,50,30,.075)}
:root[data-theme="light"] .lz-k{stroke:rgba(70,50,30,.16)}
:root[data-theme="light"] .lz-hof{fill:color-mix(in srgb,var(--goldf) 14%,transparent)}

/* ----- Dezenter Glas-Effekt: Kopfleiste und Handy-Leiste mit einem Hauch Gold und Violett und einer feinen Lichtkante -----
   Die Tönung liegt als eigene Ebene unter dem Text (::before) und ist höchstens 8 % stark: Lesbarkeit bleibt wie vorher.
   Bei „Glas: Fest“, hohem Kontrast oder „Transparenz reduzieren“ bleibt nur die Kante. */
:root .top::before,:root .top::after{content:"";position:absolute;pointer-events:none}
:root .top::before{inset:0;z-index:-1;
  background:linear-gradient(100deg,color-mix(in srgb,var(--goldf) 7%,transparent),transparent 38%,transparent 62%,color-mix(in srgb,var(--vio) 8%,transparent))}
:root .top::after{left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 40%,transparent) 22%,color-mix(in srgb,var(--vio) 40%,transparent) 78%,transparent)}
@media (max-width:700px){
  :root:not([data-glas="fest"]):not([data-kontrast="hoch"]) .tabbar{
    background-image:linear-gradient(100deg,color-mix(in srgb,var(--goldf) 8%,transparent),transparent 42%,transparent 58%,color-mix(in srgb,var(--vio) 9%,transparent))}
}
:root:is([data-glas="fest"],[data-kontrast="hoch"]) .top::before{display:none}
@media (prefers-reduced-transparency:reduce){:root .top::before{display:none}:root .tabbar{background-image:none}}
/* iPhone als App: Kopf ohne eigene Fläche (siehe oben), also auch ohne Tönung und Kante */
@media (display-mode:standalone){@supports (-webkit-touch-callout:none){:root .top::before,:root .top::after{display:none}}}

/* ===================================================================================================
   Breite Bildschirme und Handy (15.11.2026, Brian zum Bildschirmfoto: „das sieht oben vorallem komisch aus und rechts ist noch
   soviel platz“, „hier genau dasselbe problem“, „auf dem handy soll es ähnlich sein“). Zentrale und Kundvio (Nachzug 15.11.2026).
   Beschreibung: docs/design-aufwertung.md, Abschnitt „Breite Bildschirme“.
   =================================================================================================== */
/* Alle Seiten nutzen die ganze Breite neben der Leiste (und neben der Spalte „Heute“). Vorher war bei 1440 px Schluss. */
@media (min-width:901px){
  :root .page{max-width:none}
}
/* Säulen und Verlauf höchstens 150 px hoch; auf breiten Karten werden sie nur noch breiter (src/ui/statistik-karten.ts).
   Die Linie wächst beim Öffnen vom Boden hoch (Zeichnen über stroke-dasharray bricht mit vector-effect vor dem Ende ab). */
:root :is(.sk-dia,.aufg-dia) svg{max-height:150px}
:root :is(.sk-dia,.aufg-dia) .ln{vector-effect:non-scaling-stroke}
:root:not([data-bewegung="aus"]) .sk-dia :is(.ln,.fl),
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-dia :is(.ln,.fl){stroke-dasharray:none;transform-box:view-box;transform-origin:50% 100%;animation:ck-steigen 1s cubic-bezier(.2,.8,.2,1) .25s backwards}
:root:not([data-bewegung="aus"]) .sk-dia :is(.ende,.ende-r),
:root:not([data-bewegung="aus"]) .aufg-stat:not(.still) .aufg-dia :is(.ende,.ende-r){animation-delay:1s}
/* Karten einer Reihe sind gleich hoch: Was kürzer ist (Ring mit Legende, Balken), steht in der Mitte statt oben mit Loch darunter. */
:root :is(.sk-raster>.card,.aufg-stat>.card){display:flex;flex-direction:column}
:root :is(.sk-raster>.card,.aufg-stat>.card)>.bd{flex:1;align-content:center}

/* Übersicht: drei Spalten (src/start-routen.ts): a = Heute zu tun und Aufgaben, b = Termine und Team, c = Erste Schritte und
   Schnell starten. Am Handy untereinander, ab 1101 px zwei Spalten (b links unter a), ab 1600 px drei gleich breite Spalten,
   die mit den Karten „Zahlen im Detail“ darunter fluchten. */
.start-raster.s1,.start-raster.s2,.start-raster.s3{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1101px){
  .start-raster.s2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  /* b rückt direkt unter a; c reicht über beide Reihen. Die zweite Reihe nimmt den Rest (1fr), damit zwischen a und b kein Loch entsteht. */
  .start-raster.s3{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"a c" "b c"}
  .start-raster.s3>.sp-a{grid-area:a}.start-raster.s3>.sp-b{grid-area:b}.start-raster.s3>.sp-c{grid-area:c}
}
@media (min-width:1600px){
  .start-raster.s3{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:"a b c"}
  .start-raster.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .start-unten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .start-unten>:first-child:nth-last-child(2){grid-column:span 2}
}
/* Schnell starten in der dritten Spalte: vier Knöpfe je Reihe statt zwei, damit die Karte nicht höher als ihre Nachbarn wird. */
@media (min-width:1600px){
  :root .start-raster.s3 .schnell{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
}
/* Kopfzeile schwebt wie die Leiste links und die Spalte „Heute“ rechts (Brian 15.11.2026 zum Bildschirmfoto der Aufgaben:
   „überlappt sich sieht nicht gut aus auf beiden seiten“): Vorher lief der Kopf mit Tönung und Lichtkante bis an beide
   Seitenteile heran und sah aus wie darunter geschoben. Jetzt eine eigene Karte mit 12 px Abstand zu allem, der Inhalt
   darunter fluchtet mit ihr. Sie scrollt mit (klebte sie oben, liefe der Inhalt im Spalt darüber durch); Suchen geht
   jederzeit mit „/“, Strg+K oder der Lupe in der Leiste. Nur am PC mit schmaler Leiste (ab 901 px), nicht beim Drucken. */
@media screen and (min-width:901px){
  :root .app.schmal .top{position:relative;top:auto;margin:12px 12px 0;padding-inline:20px;border:1px solid var(--edge);border-radius:22px;
    box-shadow:inset 0 1px 0 var(--hi),var(--shadow-s)}
  :root .app.schmal .top::before{border-radius:inherit}
  :root .app.schmal .top::after{left:24px;right:24px}
  :root .app.schmal .page{padding-top:18px;padding-left:12px;padding-right:12px}
}