/* Damerau Büro – Oberfläche
   Marke: Tinte #0F1A20, Papier #F3F5F2, Bernstein #FFBD3F · Figtree + Bricolage Grotesque */

@font-face{font-family:"Figtree";src:url(fonts/figtree-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-600.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --ink:#0F1A20; --ink-2:#26343B; --muted:#56656C; --faint:#7C8A90;
  --paper:#F3F5F2; --surface:#FFFFFF; --sunken:#E9EDE9; --line:#D9DFDA; --line-strong:#BCC6C0;
  --amber:#FFBD3F; --amber-ink:#5C3B00; --amber-soft:#FFF1D2;
  --ok:#1F7A4D; --ok-soft:#E1F2E8; --warn:#9A5B00; --warn-soft:#FDF0D9; --err:#B3261E; --err-soft:#FBE6E4; --info:#245C8F; --info-soft:#E3EEF8;
  --nav-bg:#0F1A20; --nav-ink:#E8ECEA; --nav-muted:#93A2A8; --nav-active:#1E2C33;
  --r:8px; --r-sm:6px;
  --shadow:0 1px 2px rgba(15,26,32,.06),0 4px 14px rgba(15,26,32,.06);
  --shadow-lg:0 2px 6px rgba(15,26,32,.08),0 16px 40px rgba(15,26,32,.14);
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Bricolage","Figtree",system-ui,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E9EEEB; --ink-2:#C9D3CF; --muted:#9DABB1; --faint:#7D8B91;
    --paper:#0D161B; --surface:#141F25; --sunken:#0A1216; --line:#24323A; --line-strong:#36464F;
    --amber-soft:#3A2C0D; --amber-ink:#FFD27A;
    --ok:#5FD39A; --ok-soft:#12301F; --warn:#F2B45A; --warn-soft:#33250C; --err:#FF8A80; --err-soft:#3A1614; --info:#8CC4F5; --info-soft:#132A3D;
    --nav-bg:#081014; --nav-active:#16232A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.25);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--line-strong) transparent}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;accent-color:var(--ink);caret-color:var(--ink)}
::selection{background:var(--amber);color:#0F1A20}
a{color:inherit;text-decoration-color:var(--line-strong);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0 0 .75em}
small,.small{font-size:13px}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.num,td.r,th.r,.tnum{font-variant-numeric:tabular-nums}
.r{text-align:right}.c{text-align:center}
.nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
.ic{flex:none;display:block}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

/* ---------- Grundlayout ---------- */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh;min-height:100dvh;background:linear-gradient(to right,var(--nav-bg) 232px,transparent 232px)}
.side{background:var(--nav-bg);color:var(--nav-ink);position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:20px 12px}
.brand{display:flex;flex-direction:column;gap:6px;padding:4px 10px 22px;text-decoration:none}
.brand svg{width:132px;height:auto}
.brand span{font-size:12px;color:var(--nav-muted);letter-spacing:.01em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-sm);color:var(--nav-muted);text-decoration:none;font-weight:500;transition:background .15s,color .15s}
.nav a:hover{color:var(--nav-ink);background:var(--nav-active)}
.nav a[aria-current="page"]{color:#fff;background:var(--nav-active)}
.nav a[aria-current="page"] .ic{color:var(--amber)}
.nav .sep{height:1px;background:#22313A;margin:10px 6px}
.nav a.open{color:var(--nav-ink)}
.nav a.open .ic{color:var(--amber)}
.nav-h{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--nav-muted);opacity:.7;padding:2px 10px 6px}
.subnav{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 21px;padding-left:12px;border-left:1px solid #2A3A42}
.subnav a{padding:6px 10px;font-size:14px;font-weight:500;position:relative}
.subnav a[aria-current="page"]{background:transparent;color:#fff}
.subnav a[aria-current="page"]::before{content:"";position:absolute;left:-13.5px;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--amber)}
.side{overflow-y:auto;scrollbar-width:thin}
.nav .badge{margin-left:auto}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.side-timer{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);background:var(--nav-active);color:var(--nav-ink);text-decoration:none;font-size:13px}
.side-timer.running{background:var(--amber);color:#0F1A20}
.side-timer b{font-family:var(--display);font-size:16px;font-variant-numeric:tabular-nums}
.side-timer .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.side-timer.running .dot{animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{50%{opacity:.25}}
.side-user{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;color:var(--nav-muted);font-size:13px}
.side-user button{background:none;border:0;color:inherit;cursor:pointer;padding:6px;border-radius:6px;display:flex}
.side-user button:hover{color:#fff;background:var(--nav-active)}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding:14px 32px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:20}
.top form{flex:1;max-width:420px;position:relative}
.top input[type=search]{padding-left:36px;background:var(--paper)}
.top form .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint)}
.top .actions{margin-left:auto;display:flex;gap:8px}
.content{padding:28px 32px 64px;max-width:1280px;width:100%}
.content.narrow{max-width:880px}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head .sub{color:var(--muted);margin-top:6px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13px;margin-bottom:10px}
.back:hover{color:var(--ink)}

/* ---------- Bausteine ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel + .panel{margin-top:20px}
.grid > .panel + .panel,.stack > .panel + .panel{margin-top:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:1rem}
.panel-body{padding:18px}
.panel-body.tight{padding:0}
.grid{display:grid;gap:20px;align-items:start}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,1fr) 340px}
.g-side.wide-main{grid-template-columns:minmax(0,1fr) 270px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.spacer{flex:1}

.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:20px}
.figures > a,.figures > div{padding:16px 18px;text-decoration:none;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.figures > :last-child{border-right:0}
.figures > a:hover{background:var(--paper)}
.figures .label{font-size:13px;color:var(--muted)}
.figures .value{font-family:var(--display);font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.figures .note{font-size:12.5px;color:var(--faint)}
.figures .value.warn{color:var(--warn)} .figures .value.err{color:var(--err)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 14px/1.2 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .12s var(--ease)}
.btn:hover{background:var(--paper);border-color:var(--faint)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--ink-2)}
.btn.accent{background:var(--amber);border-color:var(--amber);color:#0F1A20}
.btn.accent:hover{background:#F5B02A}
.btn.danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 35%,var(--line))}
.btn.danger:hover{background:var(--err-soft)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--sunken)}
.btn.sm{min-height:32px;padding:5px 10px;font-size:13px}
.btn.icon{padding:8px;min-width:38px}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}
.btn.loading{position:relative;color:transparent!important}
.btn.loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
form.inline{display:inline}

/* Formulare */
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field{margin-bottom:14px;min-width:0}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px;font-weight:400}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 11px;min-height:38px;transition:border-color .15s,box-shadow .15s}
textarea{min-height:84px;resize:vertical;line-height:1.45}
input:hover,select:hover,textarea:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 55%,transparent)}
input[readonly],input:disabled,select:disabled,textarea:disabled{background:var(--sunken);color:var(--muted)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;vertical-align:-3px}
.check{display:flex;gap:9px;align-items:flex-start;font-weight:500;font-size:14px;color:var(--ink);cursor:pointer}
.check input{margin-top:2px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2356656C' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 14px}
.c12{grid-column:span 12}.c9{grid-column:span 9}.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}.c2{grid-column:span 2}
.input-suffix{position:relative}
.input-suffix input{padding-right:34px;text-align:right}
.input-suffix span{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
.form-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:6px;flex-wrap:wrap}
fieldset{border:0;padding:0;margin:0 0 6px}
legend{font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:12px;padding:0}
.err-text{color:var(--err);font-size:13px;margin-top:4px}

/* Tabellen */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
table.t td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr.link{cursor:pointer}
table.t tbody tr.link:hover td{background:var(--paper)}
table.t td a.cell{text-decoration:none;font-weight:600}
table.t td a.cell:hover{text-decoration:underline}
table.t tfoot td{font-weight:700;border-top:1px solid var(--line-strong);border-bottom:0;padding:11px 14px}
table.t .sub{color:var(--muted);font-size:13px;font-weight:400}
table.t td.actions{text-align:right;white-space:nowrap;width:1%}

/* Status-Markierungen */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px;background:var(--sunken);color:var(--ink-2);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.badge.plain::before{display:none}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.err{background:var(--err-soft);color:var(--err)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.amber{background:var(--amber-soft);color:var(--amber-ink)}
.nav .badge{background:var(--amber);color:#0F1A20;padding:3px 7px}
.nav .badge::before{display:none}

/* Hinweise */
.flash{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);margin-bottom:16px;font-weight:500;background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 25%,transparent)}
.flash.err{background:var(--err-soft);color:var(--err);border-color:color-mix(in srgb,var(--err) 25%,transparent)}
.flash.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.flash.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.flash p{margin:0}
.callout{padding:14px 16px;border-radius:var(--r);background:var(--sunken);font-size:14px}
.callout.amber{background:var(--amber-soft)}

.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty h3{color:var(--ink);margin-bottom:6px;font-size:1.05rem}
.empty .btn{margin-top:14px}

/* Reiter */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:10px 12px;text-decoration:none;color:var(--muted);font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--amber)}
.tabs .count{font-weight:500;color:var(--faint);margin-left:4px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filters .field{margin:0;min-width:150px}
.seg{display:inline-flex;background:var(--sunken);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg a,.seg button{padding:6px 11px;border-radius:5px;text-decoration:none;font-size:13px;font-weight:600;color:var(--muted);border:0;background:none;cursor:pointer}
.seg a[aria-current="page"],.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(15,26,32,.1)}

/* Definitionslisten */
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14px}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* Aktivitäten */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:0}
.feed .when{font-size:12.5px;color:var(--faint)}
.feed .ic{color:var(--muted);margin-top:2px}
.feed .body{white-space:pre-wrap;overflow-wrap:anywhere}

/* Aufgaben */
.todo{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.todo:last-child{border-bottom:0}
.todo form{display:flex}
.todo .circle{width:20px;height:20px;border-radius:50%;border:1.6px solid var(--line-strong);background:none;cursor:pointer;margin-top:1px;flex:none;padding:0}
.todo .circle:hover{border-color:var(--ok);background:var(--ok-soft)}
.todo .due{font-size:12.5px;color:var(--muted)}
.todo .due.over{color:var(--err);font-weight:600}

/* Dokument-Editor */
.totals [data-t="taxrows"]{display:block;padding:0}
.totals{margin-left:auto;width:min(360px,100%);font-size:14px}
.totals div{display:flex;justify-content:space-between;padding:6px 0;font-variant-numeric:tabular-nums}
.totals .grand{border-top:1px solid var(--line-strong);margin-top:4px;padding-top:10px;font-family:var(--display);font-weight:700;font-size:1.15rem}
.doc-preview{width:100%;height:78vh;border:1px solid var(--line);border-radius:var(--r);background:#525659}
.locked-note{display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--sunken);border-radius:var(--r);font-size:14px;color:var(--ink-2);margin-bottom:16px}

/* Timer */
.timer-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:22px;margin-bottom:20px}
.timer-card.running{border-color:color-mix(in srgb,var(--amber) 70%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 35%,transparent),var(--shadow)}
.timer-clock{font-family:var(--display);font-size:clamp(2.6rem,9vw,3.6rem);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.timer-meta{color:var(--muted);margin-top:6px;min-height:1.5em}
.timer-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end;margin-top:16px}
.timer-form .field{margin:0}
.timer-btn{min-height:46px;min-width:130px;font-size:15px;border-radius:10px}
.recent{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.recent button{font:500 13px/1.2 var(--font);padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;display:inline-flex;gap:6px;align-items:center;max-width:100%}
.recent button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent button:hover{border-color:var(--line-strong);background:var(--surface)}
.day-head{display:flex;justify-content:space-between;padding:10px 14px;background:var(--paper);font-size:13px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line)}
.bar{height:6px;background:var(--sunken);border-radius:3px;overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.bar.over i{background:var(--err)}

/* Balkendiagramm (eine Reihe, Tinte; laufender Monat in Bernstein) */
.bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;height:180px;align-items:end;padding-top:8px}
.bar-col{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;outline:none}
.bar-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line-strong)}
.bar-track i{display:block;width:min(70%,26px);background:var(--ink);border-radius:4px 4px 0 0;min-height:0;transition:opacity .15s}
.bar-col.current .bar-track i{background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bar-label{font-size:11px;color:var(--muted);margin-top:6px}
.bar-col.current .bar-label{color:var(--ink);font-weight:600}
.bar-tip{position:absolute;bottom:calc(100% - 10px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:12px;line-height:1.35;padding:6px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:5;box-shadow:var(--shadow)}
.bar-tip{display:none}
.bar-col:hover .bar-tip,.bar-col:focus .bar-tip{display:block;opacity:1}
.bar-col:nth-child(-n+2) .bar-tip{left:0;transform:none}
.bar-col:nth-last-child(-n+2) .bar-tip{left:auto;right:0;transform:none}
.bars:hover .bar-track i{opacity:.55}
.bars .bar-col:hover .bar-track i,.bars .bar-col:focus .bar-track i{opacity:1}

/* Jahresauswertung – Farben geprüft (Farbfehlsichtigkeit, Kontrast) für hell und dunkel */
:root{--viz-in:#1A6FA0;--viz-out:#C7840A;--viz-line:#0F1A20;--viz-muted:#8B979C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--viz-in:#3A8FC0;--viz-out:#C98500;--viz-line:#E9EEEB;--viz-muted:#66757C}}
.viz{padding:12px 14px}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{stroke:var(--line-strong);stroke-width:1.2}
.chart .tick{font:11px var(--font);fill:var(--muted)}
.chart .hit{fill:transparent}
.chart .col:hover .hit{fill:color-mix(in srgb,var(--ink) 5%,transparent)}
.chart .dot{stroke:var(--surface);stroke-width:2}
.legend{display:flex;gap:14px;font-size:13px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legend i.line{height:0;width:18px;border-top:2px solid var(--viz-line);border-radius:0}
.legend i.line.dash{border-top:2px dashed var(--viz-muted)}
.hbars{display:flex;flex-direction:column;gap:10px}
.hbar{display:grid;grid-template-columns:minmax(0,190px) 1fr auto;gap:12px;align-items:center;font-size:13.5px;outline:none}
.hbar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.hbar-t{height:14px;background:var(--sunken);border-radius:0 4px 4px 0;overflow:hidden}
.hbar-t i{display:block;height:100%;border-radius:0 4px 4px 0}
.hbar-v{font-weight:600;min-width:86px;text-align:right}
.hbar:hover .hbar-l,.hbar:focus .hbar-l{color:var(--ink)}
.viz-tip{position:fixed;z-index:100;pointer-events:none;background:var(--ink);color:var(--paper);font-size:12.5px;line-height:1.45;padding:7px 10px;border-radius:6px;box-shadow:var(--shadow-lg);white-space:pre-line;max-width:260px}
@media (max-width:860px){
  .hbar{grid-template-columns:minmax(0,1fr) auto}.hbar-t{grid-column:1/-1;grid-row:2}
  .viz{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .viz .chart{min-width:540px}
  .chart .tick{font-size:16px}
  .panel-head{flex-wrap:wrap}
}

/* Login */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--nav-bg)}
.auth-box{width:min(400px,100%);background:var(--surface);border-radius:12px;box-shadow:var(--shadow-lg);padding:32px}
.auth-box .logo{margin-bottom:26px}
.auth-box .logo svg{width:150px;height:auto;color:var(--ink)}
.auth-box h1{font-size:1.4rem;margin-bottom:6px}
.auth-box .btn{width:100%;min-height:44px;margin-top:6px}
.qr{background:#fff;padding:12px;border-radius:var(--r);width:200px;margin:4px auto 14px;border:1px solid var(--line)}
.qr svg,.qr img{display:block;width:100%;height:auto}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-family:ui-monospace,Menlo,monospace;font-size:15px;padding:16px;background:var(--sunken);border-radius:var(--r);margin:10px 0 16px}

/* Mobil */
.mnav{display:none}
@media (max-width:1100px){
  .g-side,.g-side.wide-main{grid-template-columns:minmax(0,1fr)}
  .g3{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr;background:none}
  .side{display:none}
  .top{padding:10px 16px;gap:10px}
  .top .brand-m{display:flex;align-items:center}
  .top .brand-m svg{width:100px;height:auto;color:var(--ink)}
  .top form{max-width:none}
  .content{padding:18px 16px 110px}
  .g2,.g3{grid-template-columns:1fr}
  .c9,.c8,.c6,.c4,.c3{grid-column:span 12}
  .c2{grid-column:span 6}
  .figures{grid-template-columns:1fr 1fr}
  .figures > a,.figures > div{border-bottom:1px solid var(--line)}
  .figures > :nth-child(2n){border-right:0}
  .timer-form{grid-template-columns:1fr 1fr}
  .timer-form > *{grid-column:span 2!important;grid-row:auto!important;min-width:0}
  .timer-form > .field:nth-child(2),.timer-form > .field:nth-child(3){grid-column:span 1!important}
  .timer-form > div:has(> .timer-btn){order:9}
  .timer-btn{width:100%}
  .hide-m{display:none!important}
  .doc-preview{display:none}
  .file-first > aside{order:-1}
  table.t th,table.t td{padding:10px}
  .mnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;min-height:48px;justify-content:center;border-radius:8px}
  .mnav a[aria-current="page"]{color:var(--ink)}
  .mnav a[aria-current="page"] .ic{color:var(--ink)}
  .mnav a.timer-tab .ic{background:var(--amber);color:#0F1A20;border-radius:50%;padding:5px;width:30px;height:30px;margin:-4px 0 -1px}
  .mnav a.timer-tab.running .ic{animation:pulse 1.6s var(--ease) infinite}
  .page-head{align-items:flex-start}
  .page-head .actions{width:100%}
}
@media (min-width:861px){.brand-m,.show-m{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff}
  .side,.top,.mnav,.actions,.btn,.no-print,.flash{display:none!important}
  .app{display:block;background:none}.content{padding:0;max-width:none}
  .panel,.figures{box-shadow:none;break-inside:avoid}
  details.panel{display:block}
  details.panel > :not(summary){display:block}
  body{font-size:11px}
  .content{padding:0!important}
  .page-head{margin-bottom:10px}
  .grid{gap:10px}
  .grid.g2{grid-template-columns:1fr 1fr!important}
  .grid.g-side{grid-template-columns:minmax(0,1fr) 260px!important}
  dl.kv dd{white-space:nowrap}
  .grid + .grid,.panel{margin-top:10px!important}
  .figures{grid-template-columns:repeat(5,1fr)!important}
  .figures > div,.figures > a{border-bottom:0!important;border-right:1px solid var(--line)!important;padding:10px}
  .figures .value{font-size:1.05rem}
  .hbar{grid-template-columns:minmax(0,110px) 1fr auto!important;gap:6px;font-size:10px}
  .hbar-t{grid-column:auto!important;grid-row:auto!important;height:9px}
  .hbars{gap:5px}
  .viz{padding:6px 8px}
  .chart .hit{fill:transparent!important}
  .chart .tick{font-size:11px!important}
  .viz .chart{min-width:0!important}
  .viz{overflow:visible!important}
  .mnav{display:none!important}
}

/* ---------- Mehr (mobil) ---------- */
.more-h{font-size:12px;font-family:var(--font);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 4px 8px}
.more-h:first-of-type{margin-top:4px}
.more{overflow:hidden}
.more-row{border-top:1px solid var(--line);padding:4px 0}
.more-row:first-child{border-top:0}
.more-main{display:flex;align-items:center;gap:14px;padding:11px 16px;text-decoration:none;font-weight:600}
.more-main .ic{color:var(--muted)}
.more-kids{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px 50px}
.more-kids a{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--sunken);text-decoration:none;color:var(--ink-2)}
tr.dim td{opacity:.55}
.suggest{border-color:color-mix(in srgb,var(--viz-in) 35%,var(--line))}
.suggest .panel-head h2{display:flex;align-items:center;gap:8px}
.suggest .panel-head .ic{color:var(--viz-in)}

/* ---------- Übersicht: farbige Kacheln, verschiebbar ---------- */
:root{--cat-1:#2a78d6;--cat-2:#eb6834;--cat-3:#1baf7a;--cat-4:#eda100;--cat-5:#e87ba4;--cat-7:#6250d6;--cat-rest:#A5B0B4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cat-1:#3987e5;--cat-2:#d95926;--cat-3:#199e70;--cat-4:#c98500;--cat-5:#d55181;--cat-7:#9085e9;--cat-rest:#56656C}}
.chip{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none}
.chip.t1{--c:var(--cat-1)}.chip.t2{--c:var(--cat-2)}.chip.t3{--c:var(--cat-3)}.chip.t4{--c:var(--cat-4)}.chip.t5{--c:var(--cat-5)}.chip.t7{--c:var(--cat-7)}
.chip{background:color-mix(in srgb,var(--c,var(--cat-1)) 15%,var(--surface));color:color-mix(in srgb,var(--c,var(--cat-1)) 82%,var(--ink))}

.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.quick a{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);text-decoration:none;font-weight:600;font-size:14px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.quick a:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.quick .chip{width:36px;height:36px;border-radius:10px}

.dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.tile{position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.tile.w2{grid-column:1/-1}
.tile-bare{background:transparent;border:0;box-shadow:none}
.tile-bare > .timer-card,.tile-bare > .figures{margin-bottom:0}
.tile-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line)}
.tile-head h2{font-size:1.02rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-meta{margin-left:auto;display:flex;align-items:center;gap:8px}
.tile-body{padding:16px}
.tile-link{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:10px 16px 14px}
.tile-link:hover{color:var(--ink)}
.grip{display:inline-grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--faint);cursor:grab;touch-action:none;flex:none}
.grip:hover,.grip:focus-visible{background:var(--sunken);color:var(--ink)}
.grip-float{position:absolute;z-index:3;top:-12px;left:50%;transform:translateX(-50%);height:22px;width:40px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);opacity:0;transition:opacity .15s}
.grip-float .ic{transform:rotate(90deg)}
.tile-bare:hover > .grip-float,.grip-float:focus-visible,.dash.sorting .grip-float{opacity:1}
@media (hover:none){.grip-float{opacity:1}}
.tile.dragging{opacity:.55;outline:2px dashed var(--cat-1);outline-offset:3px;border-radius:12px}
.dash.sorting,.dash.sorting *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.tile.moved{animation:tilein .35s var(--ease)}
@keyframes tilein{from{transform:scale(.98);opacity:.7}}
.dash-reset{display:flex;justify-content:center;margin-top:16px}

.kpis > a{position:relative}
.kpis > a::before{content:"";position:absolute;left:18px;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--c)}
.kpis .k1{--c:var(--cat-1)}.kpis .k2{--c:var(--cat-2)}.kpis .k3{--c:var(--cat-3)}.kpis .k7{--c:var(--cat-7)}

.profit-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.big{font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;white-space:nowrap}
.big.neg{color:var(--err)}
.pchips{display:flex;gap:8px;flex-wrap:wrap}
.pchip{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:6px 10px;border-radius:999px;background:var(--sunken);color:var(--muted)}
.pchip i{width:9px;height:9px;border-radius:3px}
.pchip strong{color:var(--ink);font-weight:600}
.tile .viz{padding:4px 0 6px}

.stat-box{background:var(--sunken);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat-box .label{font-size:13px;color:var(--muted)}
.stat-box .big{font-size:1.45rem}
.stat-box.split{display:grid;grid-template-columns:1fr auto;gap:16px}
.stat-box.split > div + div{border-left:1px solid var(--line-strong);padding-left:16px}
.stat-box.split > div{display:flex;flex-direction:column;gap:2px}
.share{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;margin:12px 0 4px}
.st-err{background:var(--err)}.st-warn{background:var(--cat-4)}.st-info{background:var(--cat-1)}
.rows{list-style:none;margin:8px 0 0;padding:0}
.rows li{border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.rows a,.rows.plain li{display:flex;align-items:center;gap:10px;padding:10px 2px;text-decoration:none;font-size:14px}
.rows a:hover{background:var(--paper)}
.rows .dot{width:9px;height:9px;border-radius:50%}
.rows .cnt{font-size:12px;color:var(--muted);background:var(--sunken);padding:1px 7px;border-radius:999px}
.rows .num{margin-left:auto;font-weight:600}
.rows a .ic{color:var(--faint)}
.rows.plain li{justify-content:space-between}
.rows.plain li.sum{font-weight:700}

.tile-body:has(> .donut-wrap){display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.donut-wrap{position:relative;width:150px;height:150px}
.donut{width:100%;height:100%;display:block}
.donut .seg{fill:none;stroke-width:15}
.donut .donut-empty{fill:none;stroke:var(--sunken);stroke-width:15}
.donut .cs1,.dlegend .cs1{stroke:var(--cat-1);background:var(--cat-1)}
.donut .cs2,.dlegend .cs2{stroke:var(--cat-2);background:var(--cat-2)}
.donut .cs3,.dlegend .cs3{stroke:var(--cat-3);background:var(--cat-3)}
.donut .cs4,.dlegend .cs4{stroke:var(--cat-4);background:var(--cat-4)}
.donut .cs5,.dlegend .cs5{stroke:var(--cat-5);background:var(--cat-5)}
.donut .cs-rest,.dlegend .cs-rest{stroke:var(--cat-rest);background:var(--cat-rest)}
.donut .seg:hover{stroke-width:18}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.donut-center strong{font-family:var(--display);font-size:15px;font-variant-numeric:tabular-nums}
.donut-center span{font-size:11.5px;color:var(--muted)}
.dlegend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px;min-width:0}
.dlegend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 38px;gap:8px;align-items:center}
.dlegend i{width:10px;height:10px;border-radius:3px}
.dl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-val{font-weight:600}
.dl-pct{color:var(--muted);text-align:right;font-size:12.5px}

.timeline{list-style:none;margin:0;padding:14px 16px 4px 16px}
.timeline li{position:relative;padding:0 0 14px 22px;border-left:2px solid var(--line);margin-left:5px;font-size:14px}
.timeline li:last-child{border-left-color:transparent}
.timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--cat-7)}
.timeline li.k-document::before{border-color:var(--cat-1)}
.timeline li.k-voucher::before,.timeline li.k-recurring_voucher::before{border-color:var(--cat-2)}
.timeline li.k-tax_period::before{border-color:var(--cat-3)}
.timeline .when{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px}
.timeline a{text-decoration:none;font-weight:500}
.timeline a:hover{text-decoration:underline}

.hbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hb-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.hb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.hb-top .num{font-weight:600}
.hb-track{height:6px;border-radius:3px;background:var(--sunken);margin:5px 0 2px;overflow:hidden}
.hb-track i{display:block;height:100%;border-radius:3px;background:var(--cat-1)}
.hbars .sub{font-size:12px;color:var(--muted)}

@media (max-width:1000px){.dash{grid-template-columns:minmax(0,1fr)}.quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .dash{gap:12px}
  .quick{gap:8px;margin-bottom:12px}
  .quick a{padding:10px;font-size:13px;gap:10px}
  .quick .chip{width:32px;height:32px}
  .tile-body:has(> .donut-wrap){grid-template-columns:120px minmax(0,1fr);gap:12px}
  .donut-wrap{width:120px;height:120px}
  .donut-center strong{font-size:12.5px}
  .stat-box.split{grid-template-columns:1fr}
  .stat-box.split > div + div{border-left:0;padding-left:0;border-top:1px solid var(--line-strong);padding-top:10px}
}
@media (max-width:640px){.tile-meta .small{display:none}}
.dupe-row{display:flex;align-items:flex-start;gap:12px;padding:12px 18px;border-top:1px solid var(--line);cursor:pointer}
.dupe-row:first-of-type{border-top:0}
.dupe-row:hover{background:var(--paper)}
.dupe-row input{margin-top:4px}
.dupe-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dupe-main .sub{font-size:13px;color:var(--muted)}
.callout.warn-c{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dupe-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:520px}

/* ---------- Listen wie in sevDesk ---------- */
.list-head{align-items:flex-end}
.list-head .sub strong{color:var(--ink)}
.split{display:inline-flex;align-items:stretch}
.split > .btn{border-top-right-radius:0;border-bottom-right-radius:0}
.split > details > summary{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid color-mix(in srgb,var(--paper) 25%,transparent);padding-left:10px;padding-right:10px;height:100%}
details.menu{position:relative;display:inline-block}
details.menu > summary{list-style:none;cursor:pointer}
details.menu > summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column}
.menu-pop.right{left:auto;right:0}
.menu-pop a,.menu-pop button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;border-radius:7px;font:inherit;font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.menu-pop a:hover,.menu-pop button:hover{background:var(--sunken)}
.menu-pop form{margin:0}
.list-card{overflow:visible}
.list-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.pills{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pills > a,.pill-more{display:inline-flex;align-items:center;padding:7px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;min-height:34px}
.pills > a:hover,.pill-more:hover{background:var(--sunken)}
.pills > a[aria-current="page"],.pill-more.on{background:var(--sunken);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.list-tools{display:flex;gap:8px}
.btn.on{box-shadow:inset 0 0 0 2px var(--cat-1)}
.list-filter{padding:12px 14px;margin:0;border-bottom:1px solid var(--line);background:var(--paper)}
.doclist th{white-space:nowrap}
.doclist tr.draft td{background:color-mix(in srgb,var(--amber-soft) 35%,transparent)}
.docnr{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.docnr .lock{color:var(--faint);display:inline-flex}
.cust{min-width:200px}
.cust-name{font-weight:500}
.err-t{color:var(--err);font-weight:500}
.warn-t{color:var(--warn);font-weight:500}
.row-acts{white-space:nowrap}
.row-acts > *{display:inline-flex;vertical-align:middle}
.row-acts form{display:inline}
.badge svg{flex:none}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:14px}
.pager-nav{display:flex;align-items:center;gap:10px}
.pager-per{justify-self:end}
.pager-per select{min-width:140px}
.btn.disabled{opacity:.35;pointer-events:none}
@media (max-width:640px){
  .list-head .actions{width:100%}
  .list-head .actions > *{flex:1}
  .list-tools{width:100%}
  .list-tools > *{flex:1}
  .pager{grid-template-columns:1fr auto}
  .pager > span:first-child{display:none}
  .cust{min-width:0}
}

/* ---------- Belege hochladen ---------- */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:48px 20px;border:2px dashed var(--line-strong);border-radius:16px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over{border-color:var(--cat-1);background:color-mix(in srgb,var(--cat-1) 6%,var(--surface))}
.inbox{list-style:none;margin:0;padding:0}
.inbox li{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line);font-size:14px}
.inbox li:first-child{border-top:0}
.inbox .fn{flex:0 1 38%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.inbox .res{flex:1;min-width:0}
.inbox .st{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;flex:none;font-size:12px;font-weight:700}
.inbox .st.wait{border:2px solid var(--line);border-top-color:var(--cat-1);animation:spin 1s linear infinite}
.inbox .st.new{background:var(--ok-soft);color:var(--ok)}
.inbox .st.attached{background:var(--info-soft);color:var(--info)}
.inbox .st.dup,.inbox .st.manual{background:var(--warn-soft);color:var(--warn)}
.inbox .st.err{background:var(--err-soft);color:var(--err)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.inbox li{flex-wrap:wrap}.inbox .fn{flex-basis:100%}}
[hidden]{display:none!important}
@media (max-width:640px){
  .doclist thead{display:none}
  .doclist,.doclist tbody{display:block;width:100%}
  .doclist tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nr am" "cu cu" "st ac";gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .doclist td{padding:0!important;border:0!important;background:none!important}
  .doclist .c-st{grid-area:st;align-self:center}.doclist .c-nr{grid-area:nr}.doclist .c-cu{grid-area:cu}.doclist .c-am{grid-area:am}.doclist .c-ac{grid-area:ac;justify-self:end}
  .doclist tr.draft{background:color-mix(in srgb,var(--amber-soft) 35%,transparent)}
  .list-head .actions{flex-wrap:wrap}
  .list-head .actions > .split{flex:1 1 100%}
  .split > .btn{flex:1}
}
.callout > .ic{display:inline-block;vertical-align:-3px;margin-right:4px}
@media (max-width:640px){
  .doclist tr{box-sizing:border-box;width:100%}
  .doclist td.c-ac{display:flex!important;gap:2px;justify-content:flex-end;align-items:center;width:auto!important;min-width:0}
  .doclist td.c-cu,.doclist td.c-nr{min-width:0;white-space:normal}
}

/* ---------- PDF-Vorschau im Büro ---------- */
.viewer-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.viewer-title{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer{background:var(--sunken);border:1px solid var(--line);border-radius:12px;overflow:hidden;height:calc(100vh - 190px);min-height:520px;-webkit-overflow-scrolling:touch}
.viewer iframe{width:100%;height:100%;border:0;display:block;background:#fff}
@media (max-width:640px){.viewer{height:calc(100dvh - 230px)}.viewer-title{order:3;flex-basis:100%}}
.product-pick{width:auto;min-width:220px;max-width:100%;flex:1 1 220px}
.viewer.as-page{height:auto;min-height:0;overflow:hidden;background:#fff;position:relative}
.viewer.as-page iframe{position:absolute;left:0;top:0;background:#fff}
.menu-pop .danger-t{color:var(--err)}
.swipe-cell{display:none}
@media (max-width:640px){
  .list-card .table-wrap{overflow:hidden}
  .doclist tr{position:relative;transition:transform .25s var(--ease);touch-action:pan-y}
  .doclist tr.dragging{transition:none}
  .doclist td.swipe-cell{display:flex!important;position:absolute;top:0;bottom:0;left:100%;align-items:stretch;gap:0}
  .swipe-cell form{display:flex}
  .sw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:84px;border:0;font:600 12px var(--font);color:#fff;background:var(--ink-2)}
  .sw.del{background:var(--err)}
  .sw.ok{background:var(--ok)}
}

/* ---------- Kompakte Listen auf dem Handy (wie die sevDesk-App) ---------- */
.m-head{display:none}
.mlist{display:none;list-style:none;margin:0;padding:0}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.icon-btn:active{background:var(--sunken)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;background:var(--sunken);color:var(--ink-2);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.pill.warn{background:color-mix(in srgb,var(--cat-4) 22%,transparent);color:var(--warn)}
.pill.err{background:var(--err);color:#fff}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
@media (max-width:640px){
  .m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 14px}
  .m-head h1{font-size:2rem;font-weight:700;font-family:var(--font);letter-spacing:-.02em}
  .m-acts{display:flex;gap:8px}
  .m-acts details.menu > summary{list-style:none}
  .list-card{background:transparent;border:0;box-shadow:none;overflow:visible}
  .list-card .list-bar{padding:0 0 10px;border:0}
  .list-card .list-tools{display:none}
  .pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;gap:6px}
  .pills::-webkit-scrollbar{display:none}
  .pills > a{flex:none;font-size:15px;padding:9px 15px;border-radius:999px}
  .pills > a[aria-current="page"]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
  .list-card .list-filter{margin:0 0 10px;border:1px solid var(--line);border-radius:12px}
  .mlist{display:block}
  .mgroup{font-size:15px;font-weight:600;color:var(--muted);padding:16px 2px 6px}
  .mrow{position:relative;overflow:hidden;border-radius:12px}
  .mrow-main{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:10px 2px;background:var(--paper);text-decoration:none;color:inherit;transition:transform .25s var(--ease)}
  .av{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--sunken);color:var(--ink-2);font-weight:600;font-size:15px}
  .mrow-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .mrow-txt strong{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrow-txt .sub{font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrow-txt .sub .ic{display:inline;vertical-align:-1px}
  .mrow-end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .mrow-end .amt{font-size:16px;font-weight:600}
  .mlist .swipe-cell{display:flex;position:absolute;top:0;right:0;bottom:0;z-index:0}
  .list-card .pager{border:0;padding:12px 0}
  .page-head.hide-m{display:none}
}
.m-capture{display:none}
@media (max-width:640px){
  .v-filters .field,.k-filters .field{display:none}
  .v-filters.open .field,.k-filters.open .field{display:block}
  .v-filters,.k-filters{gap:8px;margin-bottom:6px}
  .v-filters .seg,.k-filters .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:transparent;padding:0;gap:6px;margin:0 -16px;padding:0 16px;width:calc(100% + 32px);max-width:none}
  .v-filters .seg > a,.k-filters .seg > a{flex:none;font-size:15px;padding:9px 15px;border-radius:999px;background:transparent;box-shadow:none}
  .v-filters .seg > a[aria-current="page"],.k-filters .seg > a[aria-current="page"]{box-shadow:inset 0 0 0 1.5px var(--ink-2);background:transparent}
  .m-capture{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .cap{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line-strong);border-radius:14px;font-weight:600;font-size:16px;cursor:pointer}
  .cap.primary{background:color-mix(in srgb,var(--cat-1) 16%,var(--surface));border-color:color-mix(in srgb,var(--cat-1) 40%,var(--line))}
  .mrow .letter{flex:none;width:16px;font-weight:700;font-size:14px;color:var(--muted)}
  .k-filters + .panel .mlist,.list-card .mlist{margin-top:4px}
}
.io-list .more-main > span{display:flex;flex-direction:column;gap:2px}
.io-list .more-main .sub{font-weight:400;font-size:13px;color:var(--muted)}
.io-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-right:16px}
.io-form .more-main{flex:1 1 260px}
.io-form .row{flex:1 1 260px;padding:0 0 8px 16px;gap:8px}
.io-form input[type=file]{flex:1;min-width:0}
@media (max-width:640px){
  .mlist .swipe-cell{visibility:hidden}
  .mlist .mrow.swiping .swipe-cell,.mlist .mrow.swiped .swipe-cell{visibility:visible}
}

/* ---------- Positionen (kompakt wie sevDesk) ---------- */
.items{--ig:28px minmax(180px,1fr) 160px 120px 82px 0 110px 36px}
.items.with-disc{--ig:28px minmax(160px,1fr) 160px 120px 82px 84px 110px 36px}
.items-head,.irow{display:grid;grid-template-columns:var(--ig);gap:8px;align-items:center}
.items:not(.with-disc) .col-disc{visibility:hidden;overflow:hidden;width:0}
.items-head{font-size:12.5px;color:var(--muted);font-weight:500;padding:0 0 6px}
.items-head .r{text-align:right}
.irow{padding:5px 0;border-radius:8px}
.irow input,.irow select,.irow textarea{min-height:38px;padding:7px 10px}
.i-pos{position:relative;align-self:start;height:38px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.i-move{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center}
.i-move button{border:0;background:none;padding:0;height:17px;color:var(--muted);cursor:pointer;line-height:0}
.i-move button:hover{color:var(--ink)}
.irow:hover .i-move,.irow:focus-within .i-move{display:flex}
.irow:hover .i-no,.irow:focus-within .i-no{visibility:hidden}
.i-title{position:relative}
.i-search{position:absolute;left:11px;top:11px;color:var(--faint);pointer-events:none;line-height:0}
.i-title input{padding-left:34px}
.text-row .i-title input{padding-left:10px;font-style:italic}
.i-qty{display:flex}
.i-qty input{border-top-right-radius:0;border-bottom-right-radius:0;text-align:right;min-width:0;flex:1}
.i-qty select{width:88px;flex:none;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;padding-right:22px}
.i-price input{text-align:right}
.irow .input-suffix input{padding-right:26px}
.irow .input-suffix span{right:10px}
.i-sum{text-align:right;font-weight:600;white-space:nowrap}
.i-textnote{grid-column:3/7}
.i-act .rm{color:var(--faint)}
.i-act .rm:hover{color:var(--err)}
.i-desc{grid-column:2/-2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0}
.i-desc textarea{display:none;width:100%;min-height:58px;font-size:14px}
.i-desc .i-prev{display:block;max-width:100%;border:0;background:none;padding:0 0 0 2px;margin-top:-2px;font:inherit;font-size:13px;color:var(--muted);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text}
.i-desc .i-prev:empty{display:none}
.i-desc .i-save{display:none;align-items:center;gap:5px;border:0;background:none;padding:2px 0;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
.i-desc .i-save:hover{color:var(--ink)}
.i-desc .i-save.done{color:var(--ok);cursor:default}
.irow.open .i-desc textarea{display:block}
.irow.open .i-desc .i-prev{display:none}
.irow.open .i-desc .i-save{display:inline-flex}
.irow.open{background:color-mix(in srgb,var(--sunken) 55%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--sunken) 55%,transparent)}
.text-row .i-desc textarea{display:block}
.text-row .i-desc .i-prev{display:none}
.ac-list{position:absolute;z-index:45;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:5px;max-height:320px;overflow:auto}
.ac-list button{display:flex;justify-content:space-between;gap:12px;width:100%;border:0;background:none;padding:9px 10px;border-radius:7px;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.ac-list button:hover,.ac-list button[aria-selected="true"]{background:var(--sunken)}
.ac-list small{color:var(--muted);font-size:12px}
.ac-list .num{color:var(--muted);white-space:nowrap}
.ac-empty{padding:9px 10px;font-size:13px;color:var(--muted)}
.items-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px}
.link-btn{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:4px 0;font:inherit;font-size:14px;font-weight:500;color:var(--accent-ink,var(--info));text-decoration:none;cursor:pointer}
.link-btn:hover{text-decoration:underline}
.items-totals{margin:22px 0 0 auto;max-width:380px}
.panel-head .seg button{padding:5px 12px}

/* Wiederkehrende Rechnung: Editor mit fester Kopfleiste */
.editbar{position:sticky;top:69px;z-index:15;display:flex;align-items:center;gap:16px;margin:-8px 0 20px;padding:12px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.editbar .back{margin:0;flex:none}
.editbar h1{flex:1;min-width:0;margin:0;font-size:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:10px}
.editbar h1 .pill{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0}
.editbar-acts{display:flex;align-items:center;gap:8px;flex:none}
.abo-body{display:flex;flex-direction:column;gap:20px;max-width:1180px}
.abo-body textarea{min-height:90px}
.radio-list{display:flex;flex-direction:column;gap:10px}

@media (max-width:900px){
  .items,.items.with-disc{--ig:24px 1fr 1fr 1fr 32px}
  .items-head{display:none}
  .irow{grid-template-columns:var(--ig);row-gap:8px;padding:12px 0;border-bottom:1px solid var(--line);border-radius:0}
  .i-pos{grid-row:1}
  .i-title{grid-column:2/5;grid-row:1}
  .i-act{grid-column:5;grid-row:1}
  .i-qty{grid-column:2/4;grid-row:2}
  .i-price{grid-column:4/6;grid-row:2}
  .i-tax{grid-column:2;grid-row:3}
  .i-disc{grid-column:3;grid-row:3}
  .items:not(.with-disc) .col-disc{display:none}
  .i-sum{grid-column:4/6;grid-row:3}
  .i-textnote{grid-column:2/-1;grid-row:2}
  .i-desc{grid-column:2/-1;grid-row:4}
  .irow.open{box-shadow:none;background:none}
  .i-move{display:none!important}
  .i-no{visibility:visible!important}
}
@media (max-width:640px){
  .editbar{top:57px;flex-wrap:wrap;gap:8px 12px;margin-top:-4px}
  .editbar h1{font-size:21px;order:1;flex-basis:100%}
  .editbar .back{order:0}
  .editbar-acts{order:0;margin-left:auto}
  .editbar-acts .btn{padding:8px 12px}
  .items-totals{max-width:none}
}
.share-help h3{font-size:15px;margin:0 0 8px}
.share-help ol{padding-left:20px;margin:0 0 12px;line-height:1.6}
.share-help ol.steps li{margin-bottom:8px}
.share-help ul{padding-left:18px;margin:6px 0 0}
.share-help code{font-size:12.5px;background:var(--sunken);padding:2px 6px;border-radius:5px;word-break:break-all}
.share-help summary{cursor:pointer}
.t .c{text-align:center}