/* 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:#BBB3A8;--mut2:#9D958A;
  --gold:#FFBE45;--goldf:#FFA600;--goldfg:#1A1714;--goldbg:rgba(255,166,0,.16);
  --vio:#B5A0FF;--viobg:rgba(143,116,255,.2);
  --ok:#52DB9A;--okbg:rgba(67,209,142,.17);--warn:#FFC452;--warnbg:rgba(245,184,61,.17);
  --bad:#FF7B7B;--badbg:rgba(255,107,107,.17);--info:#7DB4FF;--infobg:rgba(106,168,255,.17);
  --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:#575047;--mut2:#6B645A;
  --gold:#8A5000;--goldf:#FFA600;--goldfg:#1A1714;--goldbg:rgba(255,166,0,.2);
  --vio:#4E31D2;--viobg:rgba(116,87,245,.14);
  --ok:#0B7044;--okbg:rgba(17,128,79,.13);--warn:#855300;--warnbg:rgba(245,184,61,.24);
  --bad:#B42B2B;--badbg:rgba(196,53,53,.12);--info:#1D56B5;--infobg:rgba(37,99,201,.12);
  --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}
html{min-height:100%;background:var(--bg)}
body{min-height:100%;background:transparent;color:var(--fg);font-family:var(--body);font-size:var(--fs);line-height:1.5;margin:0;-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 */
.side,.top,.card,.kpis,.tabbar{-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.card,.kpis{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;padding:18px 12px 24px;display:flex;flex-direction:column;gap:2px}
.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)}
.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:11.5px;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:14px;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}
.top .sub{color:var(--mut);font-size:var(--fs-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.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;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:12px;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:15.5px;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:13.5px;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)}
.btn svg{width:16px;height:16px}
.btn.pri{background:linear-gradient(180deg,#FFC24D,#FFA600);border-color:rgba(255,214,140,.7);color:var(--goldfg);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(255,166,0,.28)}
.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:13px}
.btn.voll{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;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)}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--edge);border-radius:99px;padding:5px 12px;font-size:12.5px;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:12px;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:14px}
.t th{text-align:left;font-size:12px;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}
.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;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}

.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)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.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}
.field{display:grid;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%}
.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 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)}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);z-index:70;transform:translateX(-104%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow);background:color-mix(in srgb,var(--glass-solid) 94%,transparent);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}
  #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}
  .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:17px}
  .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:16px}
  .pill{font-size:13.5px;padding:4px 11px}
  .tag{font-size:13px}
  .chip{font-size:13.5px}
  .nav{font-size:16px;padding:11px 12px}
  .nav svg{width:19px;height:19px}
  .grp{font-size:12.5px}
  .t.cards thead{display:none}
  .t.cards,.t.cards tbody,.t.cards tr,.t.cards td{display:block;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}
  .kv dt:first-child{margin-top:0}
  .btn{height:46px;font-size:15.5px;padding:0 18px}
  .btn.sm{height:40px;font-size:14.5px}
  .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:16px;border-radius:14px}
  textarea.inp{font-size:16px}
  .search svg{width:18px;height:18px;left:13px}
  .search input{padding-left:40px}
  .field label{font-size:14.5px}
  .field .hilfe,.field .fehler{font-size:13.5px}
  .check{font-size:16px}
  .note{font-size:15px;padding:13px 15px}
  .aktionen .btn{flex:1 1 auto}
  .msg{font-size:15.5px;max-width:100%}
  .msg .kopf{font-size:13.5px}
  .mono{font-size:14px}
  .codes{grid-template-columns:minmax(0,1fr);font-size:16px}
  .einzeln{padding:max(24px,env(safe-area-inset-top,0px)) 14px 24px;align-items:start}
  .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:#E5484D;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;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)}
.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}
@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;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}
.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{background:var(--ok);box-shadow:0 0 0 3px var(--okbg);animation:puls 2s infinite}
@keyframes puls{50%{box-shadow:0 0 0 6px transparent}}
.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%}
.rang{list-style:none;margin:0;padding:10px 18px 16px;display:grid;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)}

/* Kundenprüfung */
.pruef-titel{font-size:14px;margin:18px 0 8px}
.pruef-liste{display:grid;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:#B5A0FF;--viobg:rgba(143,116,255,.2);--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:#5B3CD9;--viobg:rgba(116,87,245,.14);--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){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){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ß */
:root[data-schrift="gross"]{--fs:16px;--fs-s:14.5px;--fs-xs:13px}
:root[data-schrift="gross"] :is(.nav,.btn,.inp,.li .tx b,.t td,.card>.hd h2){font-size:calc(1em + 1.5px)}
:root[data-schrift="gross"] :is(.t th,.grp,.pill,.side .foot .ich small){font-size:calc(1em + 1px)}
:root[data-schrift="gross"] .kpi .v{font-size:33px}
@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:.2s}
: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)}}

:root[data-bewegung="voll"] .page>*{animation:auftauchen .5s cubic-bezier(.2,.8,.2,1) both}
: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) both}
: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){position:relative;isolation:isolate}
:root[data-bewegung="voll"] :is(.card,.kpis)::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):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}

/* Einstellungsseite Darstellung */
.darstellung .bd{gap:18px}
.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}
.wahl-k{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items: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:12.5px;line-height:1.3}
.wahl-k .muster{grid-row:span 2}
.wahl:hover .wahl-k{border-color:var(--edge2)}
.wahl input:checked+.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}
.muster{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 8px rgba(0,0,0,.3)}
.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)}
.darstellung .aktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.darstellung .ds-status{margin-right:auto}
.vorschau{display:grid;gap:14px}
.vorschau .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.vorschau .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vorschau .field{display:grid;gap:6px}
.vorschau .field span{font-size:var(--fs-s);font-weight:600}
.tipps{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--fg2);font-size:var(--fs-s)}

/* Mein Konto: App auf Handy und PC */
.app-karte{display:grid;gap:12px}
.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))}
@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}
}

/* 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){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;gap:8px}
.auto-kopf{display:flex;gap:6px;flex-wrap:wrap}
.bereit{list-style:none;margin:4px 0 0;padding:0;display:grid;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}