/* Grundregeln (eigenständige Seite) */
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Layout: ruhige Seitenleiste (Arbeit · Verkauf · Buchhaltung), eine klare Spalte pro Seite, Details in Tabs statt nebeneinander; Dokumente als weisses A4-Papier wie die PDFs. */
:root{
  --deep:#0B1A2B; --bg:#11263B; --surface:#152D46; --surface-2:#1B3959; --raise:#21405F;
  --line:rgba(188,228,250,.11); --line-2:rgba(188,228,250,.22);
  --fg:#F2F7FC; --muted:#9FB6CC; --dim:#7590AB;
  --accent:#80CFF5; --accent-ink:#0B1A2B; --accent-soft:rgba(128,207,245,.13);
  --ok:#7FDDB0; --ok-soft:rgba(127,221,176,.12);
  --warn:#F3C77A; --warn-soft:rgba(243,199,122,.13);
  --bad:#F59393; --bad-soft:rgba(245,147,147,.13);
  --paper:#FFFFFF; --paper-ink:#111111; --paper-line:#DADDE0;
  --scrim:rgba(5,13,22,.66);
  --display:"Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.min0{min-width:0}
.i{flex:none;display:block}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small{font-size:12px}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;height:100dvh;background:var(--deep);border-right:1px solid var(--line);padding:24px 14px 16px;display:flex;flex-direction:column;gap:20px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:2px 10px;text-decoration:none}
.brand svg{height:22px;width:auto;color:var(--fg)}
.brand b{display:block;font-family:var(--display);font-weight:700;font-size:14px;line-height:1.1}
.brand span{display:block;font-size:12px;color:var(--accent);line-height:1.2}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:16px 12px 6px;font-weight:600}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:999px;color:var(--muted);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--surface);color:var(--fg)}
.nav a.on{background:var(--accent-soft);color:var(--fg)}
.nav a.on .i{color:var(--accent)}
.nav a .count{margin-left:auto;font-size:12px;color:var(--dim)}
.nav a .count.bad{color:var(--bad)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.sync{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);padding:0 12px}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.sync.saving i{background:var(--warn)} .sync.error i{background:var(--bad)} .sync.local i{background:var(--dim)}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;gap:12px;align-items:center;padding:14px 36px;background:rgba(17,38,59,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.cmd-btn{flex:1;max-width:460px;display:flex;align-items:center;gap:10px;height:40px;padding:0 8px 0 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);text-align:left}
.cmd-btn:hover{border-color:var(--line-2);color:var(--fg)}
.cmd-btn span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
kbd{font-family:var(--body);font-size:11px;padding:3px 8px;border-radius:999px;background:var(--raise);color:var(--muted);border:1px solid var(--line)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.mobile-brand{display:none}
.view{padding:36px 36px 80px;max-width:1180px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:28px}

/* ---------- Type ---------- */
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.035em;line-height:1.05;margin:6px 0 0;text-wrap:balance}
.h2{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.015em;margin:0;line-height:1.25}
.h3{font-family:var(--display);font-weight:600;font-size:15px;margin:0}
.lede{color:var(--muted);font-size:15.5px;max-width:62ch;margin:10px 0 0;text-wrap:pretty}
.lede b{color:var(--fg);font-weight:500}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.page-head .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Controls ---------- */
.btn{height:40px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;border:1px solid var(--line-2);background:transparent;color:var(--fg);white-space:nowrap;text-decoration:none}
.btn:hover:not(:disabled){background:var(--surface-2)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.pri:hover:not(:disabled){filter:brightness(1.07);background:var(--accent)}
.btn.okb{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.btn.sm{height:32px;padding:0 13px;font-size:13px;gap:6px}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--fg)}
.btn.stop{background:var(--bad);color:var(--accent-ink);border-color:transparent}
.btn.block{width:100%}
.ibtn{width:34px;height:34px;border-radius:999px;display:inline-grid;place-items:center;border:1px solid transparent;background:transparent;color:var(--dim);flex:none}
.ibtn:hover{background:var(--raise);color:var(--fg)}
.ibtn.outline{border-color:var(--line-2);color:var(--fg)}
.in{height:42px;border-radius:12px;background:var(--deep);border:1px solid var(--line);color:var(--fg);padding:0 12px;width:100%;min-width:0}
.in::placeholder{color:var(--dim)}
.in:focus{outline:none;border-color:var(--accent)}
.in.sm{height:34px;border-radius:999px;font-size:13px;width:auto}
textarea.in{height:auto;padding:10px 12px;resize:vertical;line-height:1.45}
input[type=date].in{color-scheme:dark}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.flabel{font-size:12px;color:var(--muted);font-weight:500}
.help{font-size:12px;color:var(--dim)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--deep);border:1px solid var(--line)}
.seg button{white-space:nowrap;height:30px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:500}
.seg button.on{background:var(--raise);color:var(--fg)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--raise);color:var(--muted);white-space:nowrap}
.chip.ok{color:var(--ok);background:var(--ok-soft)} .chip.warn{color:var(--warn);background:var(--warn-soft)} .chip.bad{color:var(--bad);background:var(--bad-soft)} .chip.acc{color:var(--accent);background:var(--accent-soft)}
.chip .dot{width:6px;height:6px;background:currentColor}
.dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--accent));display:inline-block;flex:none}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:transparent;color:var(--muted);padding:12px 14px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:7px;align-items:center}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--fg);border-bottom-color:var(--accent)}
.tabs button span{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;background:var(--raise);border-radius:999px;padding:0 7px;line-height:18px}
.toggle{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--line);cursor:pointer}
.toggle:first-child{border-top:0;padding-top:0}
.toggle input{accent-color:var(--accent);width:18px;height:18px;margin-top:2px;flex:none}
.toggle b{display:block;font-weight:500}
.toggle small{display:block;color:var(--muted);font-size:12.5px}

/* ---------- Surfaces ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;min-width:0}
.panel.flush{padding:0;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;min-height:32px}
.panel-head .h2{flex:1;min-width:0}
.panel.flush>.panel-head{padding:20px 24px 0}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.grid-2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.grid-half{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left;color:inherit}
button.stat:hover{border-color:var(--line-2)}
.stat span{font-size:12.5px;color:var(--muted)}
.stat b{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat small{font-size:12px;color:var(--dim)}
.stat.ok b{color:var(--ok)} .stat.bad b{color:var(--bad)} .stat.acc b{color:var(--accent)}
.empty{padding:28px 20px;border:1px dashed var(--line-2);border-radius:14px;color:var(--muted);text-align:center;font-size:13.5px;display:flex;flex-direction:column;gap:10px;align-items:center}
.empty b{color:var(--fg);font-weight:500;font-size:14.5px}
.note-box{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--accent-soft);font-size:13px}
.note-box .i{color:var(--accent);margin-top:2px}
.note-box.warn{background:var(--warn-soft)} .note-box.warn .i{color:var(--warn)}
.quick{display:flex;gap:8px;flex-wrap:wrap}
.loading{padding:80px 0;text-align:center;color:var(--muted)}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600;text-align:left;padding:12px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:var(--surface-2)}
.tbl .sub{font-size:12px;color:var(--muted)}
.tbl-wrap{overflow-x:auto}
.tbl-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap}
.tbl-foot b{color:var(--fg)}
.namecell{display:flex;align-items:center;gap:12px;min-width:0}
.mono{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:14px;background:var(--c);color:var(--accent-ink);flex:none}
.mono.lg{width:64px;height:64px;border-radius:18px;font-size:22px}
.amt-in{color:var(--ok)} .amt-out{color:var(--bad)}

/* ---------- Lists ---------- */
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);min-width:0}
.row:first-child{border-top:0;padding-top:0}
.row .grow{flex:1;min-width:0}
button.row{width:100%;background:transparent;border-left:0;border-right:0;border-bottom:0;text-align:left;color:inherit}
button.row:hover .rt{color:var(--accent)}
.rt{font-weight:500}
.rs{font-size:12.5px;color:var(--muted)}
.when{display:flex;flex-direction:column;align-items:center;line-height:1;width:44px;flex:none}
.when b{font-family:var(--display);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.when span{font-size:10.5px;color:var(--dim);margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.note{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.note:first-child{border-top:0}
.note p{flex:1;margin:2px 0 0;min-width:0;overflow-wrap:anywhere}
.note.done p{color:var(--dim);text-decoration:line-through}
.check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);background:transparent;display:grid;place-items:center;flex:none;margin-top:1px;color:var(--accent-ink);padding:0}
.check.on{background:var(--accent);border-color:var(--accent)}
.add-row{display:flex;gap:8px;flex-wrap:wrap}
.dl{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px 16px;margin:0}
.dl dt{color:var(--muted);font-size:13px}
.dl dd{margin:0;overflow-wrap:anywhere}

/* ---------- Client header ---------- */
.c-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.c-head .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.c-meta{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:13.5px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13px;width:max-content}
.back:hover{color:var(--fg)}
.linkrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.linkrow:first-child{border-top:0;padding-top:0}
.linkrow .lic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--raise);color:var(--accent);flex:none}
.linkrow a{text-decoration:none}
.linkrow a:hover b{color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stepc{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.stepc .n{font-family:var(--display);font-weight:700;color:var(--accent)}
.stepc.done{border-color:rgba(127,221,176,.4)}
.stepc.done .n{color:var(--ok)}
.vhero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 24px;border-radius:16px;background:var(--accent);color:var(--accent-ink)}
.vhero .big{font-family:var(--display);font-weight:700;font-size:40px;line-height:.9;text-align:center;min-width:64px;font-variant-numeric:tabular-nums}
.vhero .big small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:6px}
.vhero .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.7}
.vhero h3{margin:2px 0 0;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;overflow-wrap:anywhere}
.vhero p{margin:4px 0 0;font-size:13px;opacity:.8}
.vhero .acts{display:flex;gap:8px;flex-wrap:wrap}
.vhero .btn{border-color:rgba(11,26,43,.3);color:var(--accent-ink)}
.vhero .btn:hover{background:rgba(11,26,43,.08)}
.vrow{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.vrow:first-of-type{border-top:0}
.vrow .acts{display:flex;gap:6px;justify-content:flex-end}
.vgroup{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600;padding:20px 0 6px;display:flex;gap:8px;align-items:center}
.vgroup:first-child{padding-top:0}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(127,221,176,.5);animation:livep 2s infinite;flex:none}
.live-dot.stale{background:var(--warn);animation:none}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(127,221,176,.5)}70%{box-shadow:0 0 0 8px rgba(127,221,176,0)}100%{box-shadow:0 0 0 0 rgba(127,221,176,0)}}
.gsheet{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.gsheet table{border-collapse:collapse;font-size:12.5px;width:100%;min-width:640px}
.gsheet td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 10px;white-space:nowrap;color:var(--muted);height:34px}
.gsheet td.n{color:var(--dim);text-align:center;width:40px;background:var(--deep)}
.gsheet td.h{color:var(--fg);font-weight:600;background:var(--deep)}
.gsheet a{color:var(--accent);text-decoration:none}
.xl-empty{border:1px dashed var(--line-2);border-radius:14px;overflow:hidden}
.xl-empty table{width:100%;border-collapse:collapse;font-size:12px;color:var(--dim)}
.xl-empty th,.xl-empty td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 12px;height:36px}
.xl-empty th{background:var(--deep);font-weight:500;text-align:left}

/* ---------- Board ---------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:14px;overflow-x:auto;padding-bottom:10px}
.col{background:var(--deep);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px;min-height:280px}
.col.over{border-color:var(--accent);background:var(--accent-soft)}
.col-head{display:flex;align-items:center;gap:8px;padding:2px 4px 4px;font-weight:600;font-size:13px}
.col-head span{color:var(--dim);font-weight:500;margin-left:auto}
.pcard{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;cursor:grab}
.pcard.dragging{opacity:.4}
.pcard .who{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.pcard h4{margin:0;font-weight:500;font-size:14px;line-height:1.3}

/* ---------- Time ---------- */
.day-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-weight:600;padding:20px 0 6px}
.day-head:first-child{padding-top:0}
.time-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) 150px 96px auto auto;gap:10px;align-items:end}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--bad);animation:pulse 1.6s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,147,147,.5)}70%{box-shadow:0 0 0 9px rgba(245,147,147,0)}100%{box-shadow:0 0 0 0 rgba(245,147,147,0)}}
.side-timer{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.side-timer .min0{flex:1}
.side-timer b{display:block;font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums;line-height:1.1}
.side-timer small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-timer{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 14px;border-radius:999px;background:var(--bad-soft);color:var(--fg);border:0;font-variant-numeric:tabular-nums;font-weight:500}
.top-timer .ibtn{background:var(--bad);color:var(--accent-ink);width:28px;height:28px}

/* ---------- Charts ---------- */
.chart{display:block;overflow:visible}
.chart text{fill:var(--muted);font-size:11px;font-family:var(--body)}
.chart .val{fill:var(--fg);font-weight:600}
.chart .grid{stroke:var(--line)} .chart .zero{stroke:var(--line-2)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.bar-line{height:6px;border-radius:6px;background:var(--raise);overflow:hidden;margin-top:7px}
.bar-line i{display:block;height:100%;background:var(--c,var(--accent));border-radius:6px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:13.5px;color:var(--muted)}
.kv b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- Documents ---------- */
.docview{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.docside{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}
.docwrap{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 40px 90px -40px #000;background:var(--paper)}
.page{width:794px;min-height:1123px;transform-origin:top left;position:absolute;left:0;top:0;background:var(--paper);color:var(--paper-ink);font-family:"Inter",Arial,sans-serif;font-size:10.5px;line-height:1.45;display:flex;flex-direction:column;padding:58px 50px 0}
.pg-logo{display:flex;align-items:center;gap:8px}
.pg-logo svg{height:30px;width:auto;color:var(--paper-ink)}
.pg-logo b{font-size:11px;line-height:1;font-weight:700}
.pg-sender{margin-top:118px;font-size:8.5px;text-decoration:underline}
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:3px}
.pg-addr{font-size:12.5px;line-height:1.3}
.pg-meta{display:grid;grid-template-columns:auto auto;column-gap:16px;row-gap:1px;align-items:baseline;font-size:12.5px;margin:0}
.pg-meta dt{font-weight:700;text-align:right}
.pg-meta dd{margin:0;font-size:9.5px;text-align:right}
.pg-h{margin-top:66px;font-size:16.5px}
.pg-title{margin-top:12px;font-size:17px;font-weight:700}
.pg-intro{margin-top:34px;font-size:9px;white-space:pre-line}
.pg-pos{margin-top:30px;font-size:16px}
.pg-t{width:100%;border-collapse:collapse;margin-top:4px;font-size:9.5px;color:var(--paper-ink)}
.pg-t th{font-weight:700;font-size:10px;text-align:left;padding:6px 0 7px;border-bottom:1px solid var(--paper-line)}
.pg-t td{padding:11px 0;border-bottom:1px solid var(--paper-line);vertical-align:top}
.pg-t .n{width:38px} .pg-t .q{width:90px;text-align:center} .pg-t .p{width:110px;text-align:center} .pg-t .s{width:96px;text-align:right;font-weight:700}
.pg-t .d{padding-right:60px}
.pg-t .notes{font-size:9px;white-space:pre-line}
.pg-tot{margin:46px 0 0 auto;width:280px;font-size:9.5px;font-variant-numeric:tabular-nums}
.pg-tot div{display:grid;grid-template-columns:1fr 40px 76px;padding:4px 0}
.pg-tot div span:last-child{text-align:right}
.pg-tot .grand{border-top:1px solid var(--paper-line);margin-top:8px;padding-top:12px;font-weight:700;font-size:15px}
.pg-tot.solo .grand{border-top:0;margin-top:0}
.pg-close{margin-top:52px;font-size:9px;white-space:pre-line}
.pg-foot{margin-top:auto;padding:40px 0 36px;font-size:10px}
.qrbill{margin:auto -50px 0;height:397px;border-top:1px dashed #000;display:grid;grid-template-columns:234px 1fr;font-family:Arial,Helvetica,sans-serif;color:#000}
.qr-rec{border-right:1px dashed #000;padding:19px;display:flex;flex-direction:column;font-size:8px;line-height:1.2}
.qr-pay{padding:19px;display:grid;grid-template-columns:200px 1fr;gap:0 10px;font-size:10px;line-height:1.25}
.qrbill h4{margin:0 0 10px;font-size:11pt;font-weight:700}
.qrbill h5{margin:8px 0 0;font-size:6pt;font-weight:700}
.qr-pay h5{font-size:8pt;margin-top:10px}
.qrbill p{margin:0}
.qr-amt{display:flex;gap:20px;margin-top:auto}
.qr-rec .acc{margin-top:auto;padding-top:20px;text-align:right;font-weight:700;font-size:6pt}
.qr-ph{width:174px;height:174px;border:1px dashed #000;display:grid;place-items:center;text-align:center;font-size:9px}

/* ---------- Editor ---------- */
.editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:28px;align-items:start}
.ed-prev{position:sticky;top:90px;display:flex;flex-direction:column;gap:10px}
.ed-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.ed-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.ed-addr{font-size:13px;line-height:1.5}
.ed-addr small{display:block;font-size:11px;color:var(--dim);text-decoration:underline;margin-bottom:4px}
.items{display:flex;flex-direction:column;gap:10px}
.item{display:grid;grid-template-columns:minmax(0,1fr) 70px 90px 100px 86px 96px 34px;gap:8px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--deep)}
.item .in{background:var(--surface)}
.item .sum{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;padding-top:11px}
.item .desc{display:flex;flex-direction:column;gap:6px}
.items-head{display:grid;grid-template-columns:minmax(0,1fr) 70px 90px 100px 86px 96px 34px;gap:8px;padding:0 13px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
.items-head .r{text-align:right}
.ed-total{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-radius:14px;background:var(--accent-soft);font-family:var(--display);font-weight:700;font-size:22px}
.ed-sec{display:flex;flex-direction:column;gap:14px;padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}

/* ---------- Menus ---------- */
details.menu{position:relative}
details.menu summary{list-style:none}
details.menu summary::-webkit-details-marker{display:none}
details.menu .menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:230px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:14px;padding:6px;box-shadow:0 30px 60px -20px #000;display:flex;flex-direction:column}
.menu-list button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;border:0;background:transparent;text-align:left;color:var(--fg);font-size:13px}
.menu-list button:hover{background:var(--raise)}
.menu-list button.dng{color:var(--bad)}
.menu-list hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.log{display:flex;flex-direction:column;gap:10px;font-size:13px}
.log div{display:flex;gap:10px}
.log i{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}
.log small{display:block;color:var(--dim);font-size:12px}

/* ---------- Settings ---------- */
.settings{display:grid;grid-template-columns:210px minmax(0,1fr);gap:32px;align-items:start}
.snav{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px}
.snav button{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:0;background:transparent;color:var(--muted);text-align:left;font-weight:500}
.snav button:hover{color:var(--fg);background:var(--surface)}
.snav button.on{color:var(--fg);background:var(--surface-2)}
.snav button.on .i{color:var(--accent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.form-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.iban-state{font-size:12px;margin-top:4px}
.qr-preview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;background:var(--paper);color:var(--paper-ink);border-radius:12px;padding:18px;font-family:Arial,sans-serif;font-size:12px;line-height:1.35}
.qr-preview h5{margin:0 0 2px;font-size:10px}
.qr-preview p{margin:0 0 8px}
.igrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.icard{display:flex;flex-direction:column;gap:10px}
.icard .lic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--raise);color:var(--accent)}
.icard p{margin:0;color:var(--muted);font-size:13px;flex:1}

/* ---------- Reports ---------- */
.er{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.er th{font-size:11px;color:var(--dim);font-weight:600;text-align:right;padding:10px 14px;background:var(--deep);white-space:nowrap}
.er th:first-child{text-align:left;font-size:14px;color:var(--fg);font-family:var(--display)}
.er td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.er td:first-child{text-align:left;white-space:normal}
.er tr.grp td{font-weight:600}
.er tr.acc td:first-child{padding-left:30px;color:var(--muted)}
.er tr.total td{font-weight:700;background:var(--surface-2)}
.er tr.result td{font-weight:700;font-family:var(--display);font-size:16px;border-bottom:0}
.er .up{color:var(--ok)} .er .down{color:var(--bad)}
details.ledger{border-top:1px solid var(--line)}
details.ledger summary{display:flex;gap:12px;align-items:center;padding:14px 20px;cursor:pointer;font-weight:500;list-style:none}
details.ledger summary::-webkit-details-marker{display:none}
details.ledger summary .i{transition:transform .15s;color:var(--dim)}
details.ledger[open] summary .i{transform:rotate(90deg)}
details.ledger summary b{margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- Overlays ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;overflow-y:auto}
.modal{width:100%;max-width:540px;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 40px 90px -30px #000}
.modal-head{display:flex;align-items:center;gap:10px}
.modal-head .h2{flex:1}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;flex-wrap:wrap}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches label{position:relative;cursor:pointer}
.swatches input{position:absolute;opacity:0;inset:0}
.swatches span{display:block;width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid transparent;box-shadow:0 0 0 2px var(--surface) inset}
.swatches input:checked+span{border-color:var(--fg)}
.swatches input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.opt{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:transparent;color:inherit;text-align:left;width:100%}
.opt:hover{border-color:var(--line-2)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt input{accent-color:var(--accent);width:18px;height:18px;flex:none}
.opt b{display:block;font-weight:500}
.opt small{display:block;color:var(--muted);font-size:12px}
.opt .lic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--raise);color:var(--accent);flex:none}
.opt .end{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;white-space:nowrap}
.mail-prev{background:var(--deep);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:13px;white-space:pre-line;color:var(--muted)}
.palette{max-width:600px;padding:0;gap:0;overflow:hidden}
.palette .pin{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.palette .pin input{flex:1;height:58px;border:0;background:transparent;font-size:16px;color:var(--fg);outline:none;min-width:0}
.plist{max-height:min(420px,55vh);overflow-y:auto;padding:8px}
.pitem{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;border:0;background:transparent;text-align:left;color:var(--fg)}
.pitem .k{font-size:12px;color:var(--dim);margin-left:auto;white-space:nowrap}
.pitem.on{background:var(--raise)}
.pitem .lic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--deep);color:var(--accent);flex:none}
.pgroup{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600;padding:10px 12px 4px}
.toasts{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{background:var(--fg);color:var(--accent-ink);padding:11px 16px;border-radius:999px;font-weight:500;font-size:13px;box-shadow:0 20px 40px -20px #000;animation:tin .25s ease-out;max-width:min(440px,calc(100vw - 40px))}
@keyframes tin{from{transform:translateY(8px);opacity:0}}

/* ---------- Responsive ---------- */
.bnav{display:none}
@media (max-width:1240px){
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .editor{grid-template-columns:minmax(0,1fr)}
  .ed-prev{position:static}
  .time-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width:1100px){
  .docview{grid-template-columns:minmax(0,1fr)}
  .docside{position:static;order:-1}
  .item,.items-head{grid-template-columns:minmax(0,1fr) 64px 84px 92px 34px}
  .item .disc,.items-head .disc,.item .sum,.items-head .sumh{display:none}
  .stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .top{padding:10px 16px}
  .mobile-brand{display:flex} .mobile-brand svg{height:20px;width:auto}
  .cmd-btn span,.cmd-btn kbd{display:none}
  .cmd-btn{flex:none;width:40px;padding:0;justify-content:center}
  .view{padding:22px 16px 110px;gap:22px}
  .panel{padding:18px}
  .panel.flush>.panel-head{padding:16px 16px 0}
  .grid-half,.ed-top,.steps,.igrid{grid-template-columns:minmax(0,1fr)}
  .stats,.stats.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:14px 16px} .stat b{font-size:19px}
  .settings{grid-template-columns:minmax(0,1fr);gap:16px}
  .snav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .snav button{white-space:nowrap}
  .form-grid{grid-template-columns:1fr}
  .time-form{grid-template-columns:minmax(0,1fr)}
  .tbl .hide-m{display:none}
  .tbl th,.tbl td{padding:12px 14px}
  .item,.items-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px}
  .items-head{display:none}
  .item .desc{grid-column:1/-1}
  .c-head .acts{margin-left:0;width:100%}
  .vhero{grid-template-columns:auto minmax(0,1fr);padding:18px}
  .vhero .acts{grid-column:1/-1}
  .vrow{grid-template-columns:44px minmax(0,1fr) auto}
  .vrow .acts{grid-column:2/-1;justify-content:flex-start}
  .dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .dl dd{margin-bottom:10px}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--deep);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .bnav a,.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:10px;color:var(--dim);text-decoration:none;border-radius:12px;min-width:0;border:0;background:transparent}
  .bnav .on{color:var(--fg)} .bnav .on .i{color:var(--accent)}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:16px;left:16px;align-items:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Anmeldung ---------- */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.gate-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 40px 90px -40px #000}
.gate-card p{margin:0}
.gate-brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.gate-brand svg{height:26px;width:auto;color:var(--fg)}
.gate-brand b{display:block;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.1}
.gate-brand span{display:block;font-size:12px;color:var(--accent)}
.enroll-qr{background:#fff;border-radius:14px;padding:12px;align-self:center}
.enroll-qr img{display:block}
.secret{display:block;margin-top:8px;padding:10px;border-radius:10px;background:var(--deep);font-size:13px;letter-spacing:.08em;overflow-wrap:anywhere}
/* ---------- Drucken / PDF ---------- */
#print{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important}
  body.printing-doc>*:not(#print){display:none!important}
  body.printing-doc #print{display:block}
  #print .page{position:static;transform:none!important;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body:not(.printing-doc) .side,body:not(.printing-doc) .top,body:not(.printing-doc) .bnav{display:none!important}
  body:not(.printing-doc) .app{display:block}
}