/* App styles: classes taken verbatim from the agreed UI draft (referenz/ui-entwurf),
   plus layout classes that replace the draft's inline styles (CSP forbids inline styles). */
@import url(/css/schriften.css);
@import url(/css/farben.css);

body{margin:0;background:var(--bg-e8e8e6)}
a{color:var(--fg-171717)}a:hover{color:var(--fg-000000)}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.num{box-sizing:border-box;width:100%;height:34px;border:1px solid transparent;border-radius:8px;background:var(--bg-f4f4f2);color:var(--fg-171717);font:500 13px 'JetBrains Mono',ui-monospace,Menlo,monospace;text-align:right;padding:0 8px;outline:none;transition:background .12s,border-color .12s,box-shadow .12s}
.num::placeholder{color:var(--fg-b3b3ae)}
.num:hover{background:var(--bg-efefec)}
.num:focus{background:var(--bg-ffffff);border-color:var(--bd-171717);box-shadow:0 0 0 3px rgb(var(--tinte) / .08)}
.row-empty .num{background:var(--bg-fafaf8);border-color:var(--bd-efefec)}
.row-empty .num:focus{background:var(--bg-ffffff);border-color:var(--bd-171717)}
.vg{background:transparent!important;border:1px dashed var(--bd-dcdcd7)!important;color:var(--fg-5f5f5a)}
.vg:focus{border-style:solid!important;border-color:var(--bd-171717)!important;color:var(--fg-171717);background:var(--bg-ffffff)!important}
.ovr{background:var(--bg-fff3e3)!important;border-color:var(--bd-efcf9f)!important;padding-left:28px}
.ovr:focus{background:var(--bg-ffffff)!important;border-color:var(--bd-171717)!important}
.reset{position:absolute;left:4px;top:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:var(--fg-8a4b00);cursor:pointer}
.reset:hover{background:var(--bg-fde3bf)}
.aus{background:var(--bg-eef3fb)}
.row-empty .aus{background:var(--bg-f5f8fd);border-color:var(--bd-e6edf8)}
.txt{box-sizing:border-box;width:100%;height:34px;border:1px solid var(--bd-e4e4e0);border-radius:8px;background:var(--bg-ffffff);color:var(--fg-171717);font:500 14px Inter,system-ui,sans-serif;padding:0 10px;outline:none}
.txt:focus{border-color:var(--bd-171717);box-shadow:0 0 0 3px rgb(var(--tinte) / .08)}
.note{font-weight:400;font-size:13px;background:var(--bg-fcfcfb)}
.sel{box-sizing:border-box;width:100%;height:34px;border:1px solid transparent;border-radius:8px;background:var(--bg-eef3fb);color:var(--fg-171717);font:500 13px 'JetBrains Mono',ui-monospace,Menlo,monospace;padding:0 6px;outline:none}
.sel:focus{border-color:var(--bd-171717)}
.chip{flex:none;box-sizing:border-box;height:26px;min-width:30px;padding:0 8px;border-radius:999px;border:1px solid var(--bd-e1e1dd);background:var(--bg-ffffff);color:var(--fg-5f5f5a);font:600 10px Inter,system-ui,sans-serif;letter-spacing:0;line-height:1;cursor:pointer}
.chip:hover{border-color:var(--bd-171717);color:var(--fg-171717)}
.chip-on{background:var(--bg-171717);border-color:var(--bd-171717);color:var(--fg-ffffff)}
.chip-on:hover{color:var(--fg-ffffff)}
.tg{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--bd-e4e4e0);background:var(--bg-ffffff);color:var(--fg-3f3f3b);font:500 13px Inter,system-ui,sans-serif;cursor:pointer}
.tg:hover{border-color:var(--bd-bdbdb8)}
.tg .track{position:relative;width:30px;height:18px;border-radius:999px;background:var(--bg-dcdcd8);transition:background .15s}
.tg .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--bg-ffffff);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.tg-on{border-color:var(--bd-171717);color:var(--fg-171717)}
.tg-on .track{background:var(--bg-171717)}
.tg-on .knob{left:14px}
.nav{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--fg-4a4a46);font:500 13.5px Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.nav:hover{background:var(--bg-ececea)}
.nav-on{background:var(--bg-ffffff);color:var(--fg-171717);box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px var(--bd-ebebe8)}
.nav-on:hover{background:var(--bg-ffffff)}
.nav-zero{color:var(--fg-737370)}
.ghost{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--fg-55554f);font:500 12.5px Inter,system-ui,sans-serif;cursor:pointer}
.ghost:hover{background:var(--bg-f0f0ed);color:var(--fg-171717)}
.danger{color:var(--fg-b42318)}
.danger:hover{background:var(--bg-fdecea);color:var(--fg-912018)}
.solid-danger{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--bg-b42318);color:var(--fg-ffffff);font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer}
.solid-danger:hover{background:var(--bg-912018)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--fg-55554f);cursor:pointer}
.icon-btn:hover{background:var(--bg-f0f0ed);color:var(--fg-171717)}
.act{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--fg-6b6b66);cursor:pointer;opacity:0;transition:opacity .12s}
.act:hover{background:var(--bg-efefec);color:var(--fg-171717)}
.rowline:hover .act,.rowline:focus-within .act,.act:focus{opacity:1}
.act-on{opacity:1;color:var(--fg-171717)}
.act-del:hover{background:var(--bg-fdecea);color:var(--fg-b42318)}
.rowline{border-top:1px solid var(--bd-f1f1ee)}
.rowline:hover{background:var(--bg-fbfbfa)}
.search{box-sizing:border-box;width:100%;height:42px;border:1px solid var(--bd-e4e4e0);border-radius:999px;background:var(--bg-ffffff);padding:0 38px 0 40px;font:400 13.5px Inter,system-ui,sans-serif;color:var(--fg-171717);outline:none}
.search:focus{border-color:var(--bd-171717)}
.search::placeholder{color:var(--fg-7a7a75)}
.primary{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--bg-171717);color:var(--fg-ffffff);font:600 13px Inter,system-ui,sans-serif;cursor:pointer}
.primary:hover{background:var(--bg-000000)}
.gname{border:0;background:transparent;padding:0;font:600 15px Inter,system-ui,sans-serif;color:var(--fg-171717);cursor:pointer;text-align:left}
.mini{box-sizing:border-box;width:56px;height:32px;border:1px solid var(--bd-e4e4e0);border-radius:8px;background:var(--bg-ffffff);color:var(--fg-171717);font:500 13px 'JetBrains Mono',ui-monospace,Menlo,monospace;text-align:right;padding:0 8px;outline:none}
.mini:focus{border-color:var(--bd-171717);box-shadow:0 0 0 3px rgb(var(--tinte) / .08)}
.fld{display:flex;flex-direction:column;gap:6px;font:500 12.5px Inter,system-ui,sans-serif;color:var(--fg-5f5f5a);min-width:0}
.unit{position:relative}
.unit .num{padding-right:30px;background:var(--bg-f4f4f2)}
.unit .u{position:absolute;right:10px;top:9px;font:500 12px 'JetBrains Mono',ui-monospace,Menlo,monospace;color:var(--fg-8a8a85);pointer-events:none}
.card{background:var(--bg-ffffff);border-radius:24px;box-shadow:0 0 0 1px var(--bd-ececea);padding:22px 24px;display:flex;flex-direction:column;gap:18px;scroll-margin-top:16px;min-width:0}
.anc{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--bd-e4e4e0);background:var(--bg-ffffff);color:var(--fg-3f3f3b);font:500 13px Inter,system-ui,sans-serif;text-decoration:none}
.anc:hover{border-color:var(--bd-171717);color:var(--fg-171717)}
.selt{box-sizing:border-box;width:100%;height:34px;border:1px solid var(--bd-e4e4e0);border-radius:8px;background:var(--bg-ffffff);color:var(--fg-171717);font:500 14px Inter,system-ui,sans-serif;padding:0 8px;outline:none}
.selt:focus{border-color:var(--bd-171717);box-shadow:0 0 0 3px rgb(var(--tinte) / .08)}
.line{border-top:1px solid var(--bd-f1f1ee)}
@media (hover:hover) and (min-width:1025px){
.kvhead span[class^="h-"]{transition:color .2s ease .3s}
section:has(.c-mq:hover) .kvhead span[class^="h-"]:not(.h-mq){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-mq:hover) .kvhead .h-mq{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-p:hover) .kvhead span[class^="h-"]:not(.h-p){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-p:hover) .kvhead .h-p{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-hin:hover) .kvhead span[class^="h-"]:not(.h-hin){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-hin:hover) .kvhead .h-hin{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-td:hover) .kvhead span[class^="h-"]:not(.h-td){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-td:hover) .kvhead .h-td{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-rueck:hover) .kvhead span[class^="h-"]:not(.h-rueck){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-rueck:hover) .kvhead .h-rueck{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-w:hover) .kvhead span[class^="h-"]:not(.h-w){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-w:hover) .kvhead .h-w{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-vg:hover) .kvhead span[class^="h-"]:not(.h-vg){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-vg:hover) .kvhead .h-vg{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-satz:hover) .kvhead span[class^="h-"]:not(.h-satz){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-satz:hover) .kvhead .h-satz{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-oth:hover) .kvhead span[class^="h-"]:not(.h-oth){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-oth:hover) .kvhead .h-oth{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-otd:hover) .kvhead span[class^="h-"]:not(.h-otd){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-otd:hover) .kvhead .h-otd{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-amq:hover) .kvhead span[class^="h-"]:not(.h-amq){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-amq:hover) .kvhead .h-amq{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-atd:hover) .kvhead span[class^="h-"]:not(.h-atd){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-atd:hover) .kvhead .h-atd{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-arate:hover) .kvhead span[class^="h-"]:not(.h-arate){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-arate:hover) .kvhead .h-arate{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-acur:hover) .kvhead span[class^="h-"]:not(.h-acur){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-acur:hover) .kvhead .h-acur{color:var(--fg-171717)!important;transition:color .12s ease 0s}
section:has(.c-abg:hover) .kvhead span[class^="h-"]:not(.h-abg){color:var(--fg-c9c9c4)!important;transition:color .12s ease 0s}
section:has(.c-abg:hover) .kvhead .h-abg{color:var(--fg-171717)!important;transition:color .12s ease 0s}
}

.sclear{position:absolute;right:7px;top:8px;width:26px;height:26px;border:0;border-radius:50%;background:var(--bg-efefec);color:var(--fg-55554f);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sclear:hover{background:var(--bg-e2e2de);color:var(--fg-171717)}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.cbx{width:18px;height:18px;accent-color:var(--fg-171717);cursor:pointer;flex:none;margin:0}
.cmpbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:var(--bg-171717);color:var(--fg-ffffff);font:500 13px Inter,system-ui,sans-serif;box-shadow:0 16px 40px -12px rgba(0,0,0,.4);max-width:calc(100vw - 32px);box-sizing:border-box}
.cmpbar .primary{background:var(--bg-ffffff);color:var(--fg-171717);height:36px}
.cmpbar .primary:disabled{opacity:.4;cursor:default}
.cmpbar .ghost{color:var(--fg-d4d4cf)}
.cmpbar .ghost:hover{background:var(--bg-2a2a28);color:var(--fg-ffffff)}
.diffrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--bd-f1f1ee);font-size:13px;align-items:baseline}
.vgmark{position:absolute;left:4px;top:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;cursor:pointer}
.vgm-pull{background:var(--bg-dbe7fb);color:var(--fg-1e3a8a)}
.vgm-pull:hover{background:var(--bg-c7d9f8)}
.vgm-push{background:var(--bg-ececea);color:var(--fg-3f3f3b)}
.vgm-push:hover{background:var(--bg-e0e0dc)}
.vgpad{padding-left:30px!important}
.locked{border:1.5px solid var(--bd-7c3aed)!important;background:var(--bg-f5f3ff)!important;color:var(--fg-5b21b6)!important;cursor:not-allowed}
.locktag{position:absolute;top:-9px;right:6px;height:16px;padding:0 6px;border-radius:999px;background:var(--bg-7c3aed);color:var(--fg-ffffff);font:600 10px Inter,system-ui,sans-serif;display:inline-flex;align-items:center;pointer-events:none;white-space:nowrap}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 4px rgba(124,58,237,.45);background:var(--bg-ede9fe)}100%{box-shadow:0 0 0 0 rgba(124,58,237,0)}}
.av{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 11px Inter,system-ui,sans-serif;color:#fff;border:2px solid var(--bd-f5f5f3);cursor:pointer;padding:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;max-width:min(560px,calc(100vw - 32px));box-sizing:border-box;padding:12px 16px;border-radius:14px;background:var(--bg-171717);color:var(--fg-ffffff);font:500 13px Inter,system-ui,sans-serif;box-shadow:0 16px 40px -12px rgba(0,0,0,.4);display:flex;gap:10px;align-items:center}
.icon-btn:disabled{opacity:.35;cursor:default;background:transparent}
.savepill{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;font:500 12px Inter,system-ui,sans-serif;white-space:nowrap}
.save-ok{color:var(--fg-14532d);background:var(--bg-ecfdf3)}
.save-busy{color:var(--fg-5f5f5a);background:var(--bg-f1f1ee)}
.save-busy .dot{width:7px;height:7px;border-radius:50%;background:var(--bg-8a8a85);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.hentry{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--bd-f1f1ee)}
.hentry-cur{background:var(--bg-fafaf9)}
.trmark{flex:none;height:20px;padding:0 7px;border:1px solid var(--bd-efcf9f);border-radius:999px;background:var(--bg-fff4e6);color:var(--fg-8a4b00);font:600 10.5px Inter,system-ui,sans-serif;cursor:pointer}
.trmark:hover{background:var(--bg-fde3bf)}
.linkbtn{border:0;background:none;padding:0;text-align:left;font:600 14.5px Inter,system-ui,sans-serif;color:var(--fg-171717);cursor:pointer}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}
.crumb{border:0;background:none;padding:0;font:500 12.5px Inter,system-ui,sans-serif;color:var(--fg-5f5f5a);cursor:pointer}
.crumb:hover{color:var(--fg-171717);text-decoration:underline;text-underline-offset:3px}
.pill{height:30px;border:1px solid transparent;border-radius:999px;padding:0 8px;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;outline:none;max-width:100%}
.pill:focus{border-color:var(--bd-171717)}
.st-entwurf{background:var(--bg-f1f1ee);color:var(--fg-3f3f3b)}
.st-versendet{background:var(--bg-eef3fb);color:var(--fg-1e3a8a)}
.st-beauftragt{background:var(--bg-ecfdf3);color:var(--fg-14532d)}
.st-abgelehnt{background:var(--bg-fdecea);color:var(--fg-912018)}
.fchip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--bd-e4e4e0);background:var(--bg-ffffff);color:var(--fg-3f3f3b);font:500 13px Inter,system-ui,sans-serif;cursor:pointer}
.fchip:hover{border-color:var(--bd-171717)}
.fchip-on{background:var(--bg-171717);border-color:var(--bd-171717);color:var(--fg-ffffff)}
.fchip .c{font:500 11.5px 'JetBrains Mono',ui-monospace,Menlo,monospace;opacity:.75}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--bd-e4e4e0);border-radius:14px;cursor:pointer}
.opt-on{border-color:var(--bd-171717);box-shadow:0 0 0 1px var(--bd-171717)}
.pchip{height:30px;padding:0 12px;border-radius:999px;border:1px dashed var(--bd-cfcfca);background:var(--bg-ffffff);font:500 12.5px Inter,system-ui,sans-serif;color:var(--fg-3f3f3b);cursor:pointer}
.pchip:hover{border-style:solid;border-color:var(--bd-171717);color:var(--fg-171717)}
.kvcard{border:1px solid var(--bd-ececea);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--bg-ffffff);transition:box-shadow .15s,border-color .15s}
.kvcard:hover{border-color:var(--bd-d9d9d4);box-shadow:0 8px 24px -12px rgba(0,0,0,.18)}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--bg-171717);color:var(--fg-ffffff);display:flex;align-items:center;justify-content:center;font:600 12px Inter,system-ui,sans-serif}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--bg-efefec);gap:2px}
.seg button{height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;font:500 13px Inter,system-ui,sans-serif;color:var(--fg-55554f);cursor:pointer}
.seg button:hover{color:var(--fg-171717)}
.seg .seg-on{background:var(--bg-ffffff);color:var(--fg-171717);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.outline{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--bd-e4e4e0);border-radius:999px;background:var(--bg-ffffff);color:var(--fg-171717);font:500 13px Inter,system-ui,sans-serif;cursor:pointer}
.outline:hover{border-color:var(--bd-171717)}
.desk{background:var(--bg-ebebe8);border-radius:24px;padding:32px}
.paper{max-width:860px;margin:0 auto;background:var(--bg-ffffff);border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.08),0 24px 48px -24px rgba(0,0,0,.2);padding:56px}
@media (max-width:760px){.desk{padding:10px;border-radius:18px}.paper{padding:24px 18px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.side{flex:0 0 264px;width:264px;transition:flex-basis .2s ease,width .2s ease}
.side-c{flex-basis:76px;width:76px}
.brandtxt{display:flex}
.side-c .lbl,.side-c .tot,.side-c .sidefoot,.side-c .brandtxt{display:none}
.side-c .nav{justify-content:center;padding:0}
.side-c .kicker{text-align:center;margin:18px 0 8px!important}
.kshort{display:none}
.side-c .kshort{display:inline}
.side-c .brand{flex-direction:column;gap:12px!important;padding:6px 0 14px!important}
.mob-only{display:none!important}
.scrim{display:none}
.kvtitle{top:env(safe-area-inset-top,0px)!important}
.kvhead{top:calc(84px + env(safe-area-inset-top,0px))!important}
@media (max-width:1024px){
.outer{padding:8px!important}
.shell{padding:10px!important;border-radius:20px!important}
.side{position:fixed;top:0;bottom:0;left:0;width:288px!important;max-width:86vw;z-index:60;background:var(--bg-f5f5f3);padding:16px 12px!important;overflow-y:auto;transform:translateX(-105%);transition:transform .25s ease;box-shadow:0 20px 60px rgba(0,0,0,.25);box-sizing:border-box}
.side.side-open{transform:translateX(0)}
.side.side-c .lbl,.side.side-c .tot{display:inline}
.side.side-c .brandtxt{display:flex}
.side.side-c .sidefoot{display:block}
.side.side-c .nav{justify-content:flex-start;padding:0 12px}
.side.side-c .kicker{text-align:left;margin:18px 12px 8px!important}
.side.side-c .kshort{display:none}
.side.side-c .brand{flex-direction:row;gap:10px!important;padding:6px 10px 18px!important}
.mob-only{display:inline-flex!important}
.scrim{display:block;position:fixed;inset:0;z-index:55;border:0;padding:0;background:rgba(23,23,23,.35);cursor:pointer}
}

/* ---------------------------------------------------------------- layout (from the draft's inline styles) */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { color: var(--fg-171717); font: 400 14px/1.45 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.outer { min-height: 100vh; padding: 24px; }
.shell { max-width: 1640px; transition: max-width .35s ease; margin: 0 auto; background: var(--bg-f5f5f3); border-radius: 28px; padding: 16px; display: flex; flex-wrap: nowrap; gap: 16px; align-items: flex-start; box-shadow: 0 30px 60px -30px rgba(0,0,0,.18); }
.haupt { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.laden { padding: 40px; color: var(--fg-6b6b66); }

.seitenleiste { display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.ham { width: 36px; height: 36px; flex: none; }
.logo { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--bg-171717); color: var(--fg-ffffff); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.brandtxt { flex-direction: column; gap: 2px; min-width: 0; }
.brandtxt .b1 { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.brandtxt .b2 { display: block; font-size: 12px; color: var(--fg-6b6b66); }
.trenner { height: 1px; background: var(--bg-e6e6e2); margin: 6px 12px; }
.kicker { margin: 18px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-6b6b66); }
.nav-nr { min-width: 20px; text-align: center; font-size: 11.5px; }
.nav-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .tot { font-size: 11.5px; }
.sidefoot { margin: 14px 12px 0; padding-top: 14px; border-top: 1px solid var(--bd-e6e6e2); font-size: 12px; line-height: 1.5; color: var(--fg-6b6b66); }
.mob-btn { width: 44px; height: 44px; background: var(--bg-ffffff); box-shadow: 0 0 0 1px var(--bd-e4e4e0); }

.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 8px 4px 0; }
.titelblock { display: flex; flex-direction: column; gap: 4px; margin-right: auto; min-width: 0; }
.titelzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.titel { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.unter { font-size: 12.5px; color: var(--fg-6b6b66); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-8a8a85); }
.versionbadge { height: 24px; padding: 0 9px; border-radius: 999px; background: var(--bg-ffffff); border: 1px solid var(--bd-e4e4e0); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; }
.suchfeld { position: relative; flex: 1 1 180px; max-width: 250px; }
.suchfeld > svg { position: absolute; left: 15px; top: 13px; color: var(--fg-7a7a75); }
.kopf-werkzeuge { display: flex; align-items: center; gap: 4px; }
.save-fehler { color: var(--fg-912018); background: var(--bg-fdecea); }
.primary:disabled { opacity: .45; cursor: default; }

.karten3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.summenkarte { background: var(--bg-ffffff); border-radius: 20px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 0 0 1px var(--bd-ececea); min-width: 0; }
.summenkarte .l { font-size: 12.5px; color: var(--fg-6b6b66); }
.summenkarte .w { font-size: 22px; font-weight: 600; }
.summenkarte.dunkel { background: var(--bg-171717); color: var(--fg-ffffff); box-shadow: none; }
.summenkarte.dunkel .l { color: var(--fg-c9c9c4); }

.card-filter { padding: 16px 20px; gap: 14px; }
.card-flach { padding: 0; gap: 0; overflow: hidden; }
.card-leer { align-items: center; text-align: center; padding: 48px 24px; }
.card-leer h2 { margin: 0; font-size: 18px; font-weight: 600; }
.card-leer p { margin: 0; font-size: 14px; color: var(--fg-6b6b66); }
.filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sortierung { display: flex; align-items: center; gap: 8px; }
.sortierung label { font-size: 13px; color: var(--fg-5f5f5a); white-space: nowrap; }
.pill-select { width: auto; height: 40px; border-radius: 999px; padding: 0 12px; }
.sortierung .mono { font-size: 12.5px; }
.chips, .chips-klein { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips-klein { gap: 6px; }
.rechts { margin-left: auto; }
.rechts-frei { margin-right: auto; }
.rechtsbuendig { text-align: right; }

.ordnerkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px 14px 12px; }
.chevron { display: flex; transition: transform .15s; }
.chevron-auf { transform: rotate(90deg); }
.ordnerikone { display: flex; color: var(--fg-3f3f3b); }
.ordnertitel { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.linkbtn.gross { font-size: 16px; }
.liste-scroll { overflow-x: auto; }
.liste-kopf { display: grid; gap: 12px; align-items: center; padding: 10px 20px; background: var(--bg-fafaf9); border-top: 1px solid var(--bd-ececea); border-bottom: 1px solid var(--bd-ececea); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-5f5f5a); }
.liste-zeile { display: grid; gap: 12px; align-items: center; min-height: 64px; padding: 6px 20px; font-size: 13.5px; }
.zelle-titel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zelle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zelle-knoepfe { display: flex; justify-content: flex-end; gap: 4px; }
.summe-zelle { text-align: right; font-size: 13.5px; font-weight: 600; }
.abgeschnitten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klein { font-size: 12.5px; }
.grau { color: var(--fg-6b6b66); }
.gruen { color: var(--fg-14532d); }
.fett { font-size: 14.5px; font-weight: 600; }
.abgelaufen { color: var(--fg-9a3412); }
.knopf-klein { height: 34px; padding: 0 14px; }
.kartenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 0 20px 20px; }
.kartenraster.ohne-kopf { padding: 20px; }
.kvcard-kopf { display: flex; align-items: center; gap: 8px; }
.kvcard-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 0; border-top: 1px solid var(--bd-f1f1ee); border-bottom: 1px solid var(--bd-f1f1ee); }
.kvcard-daten > div { display: flex; flex-direction: column; gap: 2px; }
.kvcard-fuss { display: flex; align-items: center; gap: 8px; }
.mini-l { font-size: 11px; color: var(--fg-6b6b66); }
.kartensumme { font-size: 18px; font-weight: 600; }
.korb-intro { padding: 16px 20px; font-size: 13px; line-height: 1.5; color: var(--fg-5f5f5a); border-bottom: 1px solid var(--bd-ececea); }
.korb-leer { padding: 36px 20px; text-align: center; font-size: 14px; color: var(--fg-6b6b66); }
.korb-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 20px; }

/* dialogs */
.dlg-hintergrund { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; background: rgba(23,23,23,.42); }
.dlg { width: 100%; max-width: 640px; background: var(--bg-ffffff); border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.dlg-klein { max-width: 460px; }
.dlg-breit { max-width: 920px; }
.dlg-kopf { display: flex; align-items: flex-start; gap: 12px; }
.dlg-titel { margin: 0; font-size: 20px; font-weight: 600; }
.dlg-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-3f3f3b); }
.dlg-quelle { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-f7f7f5); font-size: 13px; color: var(--fg-3f3f3b); }
.dlg-fehler { padding: 10px 14px; border-radius: 12px; background: var(--bg-fdecea); color: var(--fg-912018); font-size: 13px; }
.dlg-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.stapel-8 { display: flex; flex-direction: column; gap: 8px; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.optionen { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.optionen legend { font-size: 12.5px; font-weight: 500; color: var(--fg-5f5f5a); padding: 0 0 8px; }
.opt input { margin-top: 3px; accent-color: var(--fg-171717); }
.vgl-summen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.vgl-gruppe h3 { margin: 8px 0 4px; font-size: 14px; font-weight: 600; }
.diff-kopf { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-5f5f5a); }

.toast-fehler { background: var(--bg-912018); }
.toast-ok { background: var(--bg-14532d); }
.abschnitt-titel { margin: 0; font-size: 18px; font-weight: 600; }

@media (max-width: 600px) {
  .raster-2 { grid-template-columns: 1fr; }
  .titel { font-size: 20px; }
}
@media (max-width: 1024px) {
  .seitenleiste { position: fixed; top: 0; max-height: none; }
}

/* ---------------------------------------------------------------- section view */
.abschnitt { background: var(--bg-ffffff); border-radius: 24px; box-shadow: 0 0 0 1px var(--bd-ececea); display: flex; flex-direction: column; overflow: clip; }
.kvtitle { position: sticky; top: 0; z-index: 21; height: 84px; background: var(--bg-ffffff); display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 16px; padding: 0 24px 16px; }
.abschnitt-h2 { margin: 0; font-size: 22px; font-weight: 600; }
.abschnitt-summe { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gross-zahl { font-size: 22px; font-weight: 600; }
.werkzeugleiste { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 18px; }
.werkzeug-rechts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tr-zaehler { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-8a4b00); }
.tr-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-e8a24a); }
.kvhead { position: sticky; top: 84px; z-index: 20; overflow: hidden; background: var(--bg-ffffff); box-shadow: 0 6px 12px -10px rgba(0,0,0,.18); }
.kvhead-innen { width: 100%; }
.kopfraster { display: grid; column-gap: 8px; align-items: end; padding: 10px 24px; border-top: 1px solid var(--bd-ececea); border-bottom: 1px solid var(--bd-ececea); background: var(--bg-fafaf9); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kopfraster span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-info { margin: 14px 24px 2px; padding: 12px 16px; border-radius: 16px; background: var(--bg-f7f7f5); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fett-klein { font-size: 13.5px; font-weight: 600; }
.hinweis-orange { margin: 12px 24px 0; padding: 10px 14px; border-radius: 12px; background: var(--bg-fff7ed); color: var(--fg-7c2d12); font-size: 13px; }
.tabelle-scroll { overflow-x: auto; padding-bottom: 12px; }
.keine-treffer { padding: 40px 24px; text-align: center; font-size: 14px; color: var(--fg-6b6b66); }
.block { border-bottom: 1px solid var(--bd-ececea); }
.blockkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 24px 10px 14px; }
.blockname-eingabe { max-width: 340px; }
.blockaktionen { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.blocksumme { min-width: 124px; text-align: right; font-size: 14px; font-weight: 600; padding-left: 8px; }
.loeschen-frage { font-size: 13px; color: var(--fg-912018); margin-right: 6px; }
.badge { height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.badge.blau { background: var(--bg-eef3fb); color: var(--fg-1e3a8a); }
.badge.gruen { background: var(--bg-ecfdf3); color: var(--fg-14532d); }
.blockinhalt { padding-bottom: 8px; }
.kvzeile { display: grid; column-gap: 8px; align-items: center; min-height: 46px; padding: 0 24px; }
.zeilennr { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-6b6b66); }
.punkt { flex: none; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.punkt.an { background: var(--bg-16a34a); }
.zeilenname { display: flex; align-items: center; gap: 2px; min-width: 0; }
.name-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.name-zeile { display: flex; align-items: center; gap: 6px; min-width: 0; }
.name { font-size: 14px; font-weight: 400; color: var(--fg-6b6b66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name.besetzt { font-weight: 500; color: var(--fg-171717); }
.name.leer { color: var(--fg-8f8f8a); font-style: italic; }
.notiz-vorschau { font-size: 12px; color: var(--fg-6b6b66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abg-chips { display: flex; gap: 3px; }
.chip:disabled { opacity: .5; cursor: default; }
.zelle-rel { position: relative; }
.num.verkn { background: var(--bg-f4f7f4); color: var(--fg-14532d); }
.num:disabled { opacity: .35; }
.row-empty .num:disabled { opacity: .3; }
.zahl-rechts { text-align: right; font-size: 13px; }
.total { font-size: 13.5px; font-weight: 500; }
.autozeile { display: grid; column-gap: 8px; align-items: center; min-height: 40px; padding: 0 24px; background: var(--bg-fafaf9); }
.auto-nr { font-size: 12px; color: var(--fg-6b6b66); padding-left: 14px; }
.auto-name { grid-column: 2 / 7; font-size: 13.5px; color: var(--fg-3f3f3b); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-text { grid-column: 7 / -2; text-align: right; font-size: 12.5px; color: var(--fg-6b6b66); display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.auto-wert { grid-column: -2 / -1; font-size: 13.5px; font-weight: 500; }
.auto-eingabe { display: inline-flex; align-items: center; gap: 4px; }
.auto-eingabe .num { width: 64px; height: 30px; }
.zeile-zusatz { display: grid; column-gap: 8px; padding: 0 24px 10px; }
.zusatz-inhalt { grid-column: 2 / -1; display: flex; gap: 8px; align-items: center; }

/* batch change */
.dlg-mittel { max-width: 620px; }
.sammel-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, .7fr); gap: 12px; align-items: end; }
.stapel-10 { display: flex; flex-direction: column; gap: 10px; }
.haekchen { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3f3f3b); cursor: pointer; }
.sammel-bloecke { border: 1px solid var(--bd-ececea); border-radius: 14px; max-height: 230px; overflow-y: auto; }
.sammel-block { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: 13.5px; }
.sammel-nr { width: 22px; }
.sammel-vorschau { padding: 12px 14px; border-radius: 14px; background: var(--bg-f4f4f2); color: var(--fg-3f3f3b); font-size: 13px; line-height: 1.5; }
.sammel-vorschau.aktiv { background: var(--bg-eef3fb); color: var(--fg-1e3a8a); }
@media (max-width: 600px) {
  .sammel-raster { grid-template-columns: 1fr; }
  .kvtitle { height: auto; padding-top: 12px; }
  .kvhead { top: 0; }
}

/* standard rate hints */
.vg-panel { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; }
.vg-pull { background: var(--bg-eef3fb); color: var(--fg-1e3a8a); }
.vg-push { background: var(--bg-f4f4f2); color: var(--fg-3f3f3b); }
.knopf-32 { height: 32px; padding: 0 12px; }

/* project settings page */
.vs-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.vs-titel { max-width: 560px; }
.vs-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-5f5f5a); }
.gespeichert { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-14532d); }
.umrandet { border: 1px solid var(--bd-e4e4e0); height: 40px; padding: 0 16px; }
.weiss-bg { background: var(--bg-ffffff); }
.spalten-vs { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.spalte-vs { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.stapel-4 { display: flex; flex-direction: column; gap: 4px; }
.karten-h3 { margin: 0; font-size: 16px; font-weight: 600; }
.vs-daten { border-top: 1px solid var(--bd-f1f1ee); padding-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.vs-aufklapp { align-self: stretch; justify-content: flex-start; gap: 10px; height: 48px; padding: 0 8px; border-radius: 12px; text-align: left; }
.vs-tabkopf { display: grid; gap: 10px; padding: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-5f5f5a); }
.vs-zeile { display: grid; gap: 10px; align-items: center; min-height: 46px; font-size: 13.5px; }
.ohne-linie { border-top: 0; }
.vs-abg-raster { grid-template-columns: minmax(0, 1fr) 96px 96px; }
.vs-mu-raster { grid-template-columns: minmax(0, 1fr) 92px 112px; }
.vs-cur-raster { grid-template-columns: minmax(0, 1fr) 96px 150px; min-height: 52px; }
.vs-cat-raster { grid-template-columns: minmax(0, 1fr) 110px; }
.vs-ctrl-raster { grid-template-columns: minmax(0, 1fr) auto; min-height: 50px; }
.blau-text { color: var(--fg-1e3a8a); }
.ot-profil { border-radius: 16px; background: var(--bg-f7f7f5); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.reihe-basis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ot-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.num.weiss { background: var(--bg-ffffff); }
.fett-14 { font-size: 14px; font-weight: 600; }
.fett-18 { font-size: 18px; font-weight: 600; }
.vs-mu-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.rechts-ausgerichtet { align-items: flex-end; }
.vs-alle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--bg-f7f7f5); }
.vs-alle-feld { width: 84px; }
.vs-nr { display: inline-block; width: 24px; font-size: 12px; color: var(--fg-6b6b66); }
.zentriert { text-align: center; }
.kurs { display: flex; align-items: center; gap: 8px; }
.kurs .unit { flex: 1; }
@media (max-width: 600px) { .ot-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* summary */
.reihe-8 { display: flex; flex-wrap: wrap; gap: 8px; }
.reihe-8.unten { align-self: flex-end; }
.stapel-6 { display: flex; flex-direction: column; gap: 6px; }
.sm-label { font-size: 12px; font-weight: 500; color: var(--fg-5f5f5a); }
.sm-einstellungen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 16px; border-top: 1px solid var(--bd-f1f1ee); }
.sm-rabatt { width: 140px; }
.hinweis-uebersetzung { padding: 10px 14px; border-radius: 12px; background: var(--bg-fff4e6); font-size: 13px; color: var(--fg-8a4b00); }
.hinweis-grau { padding: 10px 14px; border-radius: 12px; background: var(--bg-f7f7f5); font-size: 13px; color: var(--fg-3f3f3b); }
.papier-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 24px; border-bottom: 2px solid var(--bd-171717); }
.papier-firma { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.papier-klein { font-size: 12px; color: var(--fg-5f5f5a); }
.papier-titel { padding: 28px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.papier-titel h3 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.papier-titel p { margin: 0; font-size: 13px; color: var(--fg-5f5f5a); }
.papier-meta { margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; padding: 16px 0; border-top: 1px solid var(--bd-ececea); border-bottom: 1px solid var(--bd-ececea); }
.papier-meta div { display: flex; flex-direction: column; gap: 3px; }
.papier-meta dt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-6b6b66); }
.papier-meta dd { margin: 0; font-size: 13.5px; }
.papier-scroll { overflow-x: auto; }
.papier-tabelle.pos-sep { min-width: 560px; }
.papier-tabelle.pos-ohne { min-width: 460px; }
.papier-zeile { display: grid; gap: 12px; align-items: baseline; }
.pos-sep .papier-zeile { grid-template-columns: 44px minmax(0, 1fr) 124px 124px; }
.pos-ohne .papier-zeile { grid-template-columns: 44px minmax(0, 1fr) 140px; }
.papier-kopfzeile { padding: 0 0 10px; border-bottom: 1px solid var(--bd-171717); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3f3f3b); }
.papier-abschnitt { border-bottom: 1px solid var(--bd-ececea); padding: 4px 0 8px; break-inside: avoid; }
.papier-abschnittszeile { padding: 10px 0 4px; font-size: 13.5px; font-weight: 600; }
.papier-abschnittszeile .mono:first-child { font-size: 12.5px; }
.papier-abschnittsname { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.papier-unterzeile { padding: 3px 0; font-size: 13px; }
.papier-buchstabe { display: inline-block; width: 26px; color: var(--fg-8a8a85); }
.grau-druck { color: var(--fg-9a9a95); }
.papier-fuss { padding-top: 12px; display: flex; flex-direction: column; }
.papier-fusszeile { padding: 8px 0; font-size: 13px; font-weight: 500; }
.papier-fusszeile > span:nth-child(2) { letter-spacing: .03em; text-transform: uppercase; }
.papier-fusszeile.zwischen { border-top: 1px solid var(--bd-171717); font-weight: 700; }
.papier-fusszeile.ende { margin-top: 6px; padding: 16px 0; border-radius: 6px; background: var(--bg-171717); color: var(--fg-ffffff); font-size: 14px; font-weight: 700; }
.papier-wetter { margin-top: 18px; padding: 14px 0 12px; border-top: 1px dashed var(--bd-bdbdb8); border-bottom: 1px dashed var(--bd-bdbdb8); font-size: 13.5px; font-weight: 600; }
/* inner side padding on every row keeps the columns aligned with the filled total box */
.papier-tabelle .papier-zeile { padding-left: 14px; padding-right: 14px; }
.papier-fussnote { margin: 28px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--fg-6b6b66); }

/* weather day */
.sw-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 22px 24px 18px; }
.sw-kopf .titelblock { max-width: 640px; }
.sw-summen { display: flex; gap: 24px; }
.sw-tabelle { min-width: 720px; padding: 0 24px; }
.sw-zeile { display: grid; grid-template-columns: 72px minmax(200px, 1fr) 72px 72px 48px 110px 124px; column-gap: 8px; align-items: center; min-height: 44px; font-size: 13.5px; }
.mit-ausland .sw-zeile { grid-template-columns: 72px minmax(200px, 1fr) 72px 72px 48px 110px 110px 124px; }
.sw-tabkopf { min-height: 38px; border-top: 1px solid var(--bd-ececea); border-bottom: 1px solid var(--bd-ececea); background: var(--bg-fafaf9); margin: 0 -24px; padding: 0 24px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-5f5f5a); }
.sw-gruppe { border-bottom: 1px solid var(--bd-ececea); padding-bottom: 8px; }
.sw-gruppenkopf { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 6px; }
.sw-aus { opacity: .45; }
.autozeile-sw { background: var(--bg-fafaf9); margin: 0 -24px; padding: 0 24px; min-height: 38px; }
.autozeile-sw .sw-abgabe-text { grid-column: 3 / -2; text-align: right; }
.sw-fuss { margin: 0; padding: 14px 24px 20px; font-size: 12.5px; color: var(--fg-6b6b66); }

/* print: only the A4 summary */
@media print {
  @page { size: A4; margin: 18mm 18mm 16mm; }
  body { background: var(--bg-ffffff); }
  .seitenleiste, .kopfzeile, .karten3, .nicht-drucken, .toast, .mob-only, .scrim { display: none !important; }
  .outer, .shell, .haupt { padding: 0 !important; margin: 0 !important; background: var(--bg-ffffff) !important; box-shadow: none !important; display: block !important; max-width: none !important; }
  .desk { background: none; padding: 0; border-radius: 0; }
  .paper { box-shadow: none; padding: 0; max-width: none; border-radius: 0; }
  .papier-scroll { overflow: visible; }
  .papier-fusszeile.ende { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* settings */
.person { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; }
.person-name { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.badge.orange { background: var(--bg-fff4e6); color: var(--fg-8a4b00); }
.badge.grau-bg { background: var(--bg-f1f1ee); color: var(--fg-3f3f3b); }
.selt.auto { width: auto; }
.menue { position: relative; }
.menue-liste { position: absolute; right: 0; top: 36px; z-index: 10; min-width: 240px; padding: 6px; border-radius: 14px; background: var(--bg-ffffff); box-shadow: 0 12px 32px -8px rgba(0,0,0,.25), 0 0 0 1px var(--bd-ececea); display: flex; flex-direction: column; }
.menue-liste button { text-align: left; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: 500 13px Inter, system-ui, sans-serif; color: var(--fg-3f3f3b); cursor: pointer; }
.menue-liste button:hover { background: var(--bg-f4f4f2); color: var(--fg-171717); }
.projekte-auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding-left: 48px; }
.pchip-fest { border-style: solid; display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.pchip-fest button { border: 0; background: none; cursor: pointer; color: var(--fg-6b6b66); width: 20px; height: 20px; border-radius: 50%; }
.projekt-eingabe { width: 230px; height: 30px; }
.einladen-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 14px; background: var(--bg-f7f7f5); }
.einladen-form .txt { flex: 1 1 200px; width: auto; }
.knopf-36 { height: 36px; }
.meldung-ok, .meldung-fehler { padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.meldung-ok { background: var(--bg-ecfdf3); color: var(--fg-14532d); }
.meldung-fehler { background: var(--bg-fdecea); color: var(--fg-912018); }
.klein-link { font-size: 12.5px; font-weight: 500; align-self: flex-start; }
.spanne-2 { grid-column: 1 / -1; }
.selbst-start { align-self: flex-start; }
.oben-abstand { padding-top: 14px; }
.code-feld { width: 140px; font-family: 'JetBrains Mono', monospace; letter-spacing: .2em; text-align: center; }
.codes-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg-f7f7f5); font-size: 14px; }

/* collaboration (stage 4): presence, history panel, conflicts */
.anwesende { position: relative; display: flex; align-items: center; margin-right: 6px; }
.av-folge { margin-left: -8px; }
.av-aktiv { box-shadow: 0 0 0 2px var(--bd-c4b5fd); }
.av-still { cursor: default; }
.anwesende-pop { position: absolute; top: 42px; right: 0; z-index: 40; width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 16px; border-radius: 16px; background: var(--bg-ffffff); box-shadow: 0 0 0 1px var(--bd-ececea), 0 20px 40px -16px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 10px; }
.pop-kicker { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-6b6b66); }
.anwesend-zeile { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.verlauf-scrim { position: fixed; inset: 0; z-index: 69; border: 0; padding: 0; background: rgba(23,23,23,.25); cursor: pointer; }
.verlauf { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: 400px; max-width: 92vw; box-sizing: border-box; background: var(--bg-ffffff); box-shadow: -20px 0 60px -20px rgba(0,0,0,.3); padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.verlauf-kopf { display: flex; align-items: flex-start; gap: 12px; }
.hentry { align-items: center; padding: 12px 8px; }
.hentry-text { font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.hentry-aktuell { font-size: 11.5px; font-weight: 600; color: var(--fg-14532d); }
.knopf-40 { height: 40px; }
.avatar-30 { width: 30px; height: 30px; font-size: 11px; }
.konflikte { display: flex; flex-direction: column; gap: 12px; }
.konflikt { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bg-fafaf9); box-shadow: inset 0 0 0 1px var(--bd-ececea); }
.konflikt-werte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.badge.lila { background: var(--bg-f5f3ff); color: var(--fg-5b21b6); }
@media (max-width: 760px) { .nur-breit { display: none; } .anwesende-pop { right: auto; left: 0; } }

/* Stage 5: export menu */
.menue-export { top: 46px; min-width: 250px; z-index: 30; }
.menue-hinweis { padding: 8px 12px 4px; font-size: 11px; color: var(--fg-8a8a85); border-top: 1px solid var(--bd-f0f0ee); margin-top: 4px; }
.knopf-link { text-decoration: none; }
@media (max-width: 760px) { .menue-export { left: 0; right: auto; } }
@media (prefers-reduced-motion: reduce) { .shell { transition: none; } }

/* selects: own arrow with room to the edge (the native one sits right at the border) */
select.selt, select.pill, select.sel {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-size: 10px 6px !important; background-position: right 12px center !important;
  padding-right: 32px;
}
select.pill { padding-left: 12px; padding-right: 30px; background-position: right 11px center !important; }
select.sel { padding-right: 24px; background-position: right 8px center !important; }

/* collapsed sidebar: project number under the folder icon */
.nav-kurz { display: none; font-size: 9.5px; line-height: 1; color: var(--fg-6b6b66); white-space: nowrap; }
.side-c .nav-kurz { display: block; }
.side-c .nav.nav-mit-kurz { flex-direction: column; gap: 4px; padding: 7px 0; }
@media (max-width: 1024px) {
  .side.side-c .nav-kurz { display: none; }
  .side.side-c .nav.nav-mit-kurz { flex-direction: row; gap: 10px; padding: 0 12px; }
}

/* settings: role, access, menu and delete stay together in one line */
.person-aktionen { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; }
/* long names and e-mail addresses are shortened (tooltip shows them) so the controls fit beside them */
.person .person-name { flex: 1 1 120px; }
.person .person-name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-aktionen { flex: none; }
.knopf-abstand { flex: none; width: 6px; }
/* sharing a KV with single people */
.freigabe-liste { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.freigabe-person { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.freigabe-person:hover { background: var(--bg-f7f7f5); }
.kv-hinzu { max-width: 320px; height: 30px; font-size: 13px; }

/* view-only page for customers (ansicht.html) */
.ansicht { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.ansicht-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 0; }
.mitte { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.schmal { width: 100%; max-width: 420px; }
/* view-only links (summary) */
.flex-1 { flex: 1; min-width: 0; }
.link-neu-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; background: var(--bg-f7f7f5); }
.link-zeile { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; box-shadow: 0 0 0 1px var(--bd-ececea); }
.link-zeile.link-neu { box-shadow: 0 0 0 2px var(--bd-171717); }
.link-zeile.link-alt { opacity: .7; }
.link-merkmale, .link-fuss { align-items: center; }
.link-fuss .klein { margin-right: auto; }
.link-url { display: flex; gap: 8px; }
.link-url .txt { flex: 1; min-width: 0; font-size: 12.5px; }
.link-alte summary { cursor: pointer; padding: 4px 0 10px; }
.hinweis-uebersetzung.reihe-8 { align-items: center; }