/* Design-System v2 – gemeinsam für alle 30 Apps. Akzentfarbe je App: ui.theme('#hex') oder <html style="--acc-h:160"> */
[hidden]{display:none!important}
:root{--acc-h:160;--acc-s:38%;--acc:hsl(var(--acc-h) var(--acc-s) 32%);--acc-2:hsl(var(--acc-h) var(--acc-s) 94%);--acc-fg:#fff;
--bg:#f5f6f4;--surface:#fff;--card:#fff;--fg:#17191c;--mut:#5f666e;--line:#e3e5e1;--line-2:#eef0ec;--warn:#b45309;--warn-bg:#fff4e0;--bad:#b42318;--bad-bg:#fdecea;--ok:#177245;--ok-bg:#e6f5ec;--info:#1d5fa8;--info-bg:#e8f1fb;
--r:14px;--r-s:10px;--sh:0 1px 2px rgba(20,25,20,.05),0 4px 14px rgba(20,25,20,.05);--side:244px;--top:56px;--bot:64px;
--font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--acc:hsl(var(--acc-h) 45% 62%);--acc-2:hsl(var(--acc-h) 25% 18%);--acc-fg:#0d1512;--bg:#121415;--surface:#1a1d1f;--card:#1a1d1f;--fg:#ecedea;--mut:#9aa1a8;--line:#2c3033;--line-2:#23272a;--warn:#f0a53c;--warn-bg:#35290f;--bad:#f07167;--bad-bg:#3a1b19;--ok:#5ec98a;--ok-bg:#12301f;--info:#79b4f0;--info-bg:#14283d;--sh:none}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font:15.5px/1.55 var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;letter-spacing:-.01em}h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}p{margin:0 0 .75em}a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* App-Shell: Desktop = Seitenleiste, Mobil = untere Tableiste */
.shell{min-height:100vh;display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:var(--top) 1fr}
.shell>header.top{grid-column:1/3;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.shell .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.02rem;flex:1;min-width:0}.shell .brand i{flex:0 0 32px;height:32px;border-radius:9px;background:var(--acc);color:var(--acc-fg);display:grid;place-items:center;font-style:normal}.shell .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side{background:var(--surface);border-right:1px solid var(--line);padding:14px 10px;position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow:auto}
.side button,.bottom button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:var(--r-s);cursor:pointer;color:var(--mut);font-weight:500;min-height:44px}
.side button:hover{background:var(--line-2);color:var(--fg)}.side button.on,.bottom button.on{background:var(--acc-2);color:var(--acc);font-weight:600}
.content{padding:24px;min-width:0}.content>.inner{max-width:1040px;margin:0 auto}
.bottom{display:none}
@media(max-width:860px){.shell{grid-template-columns:minmax(0,1fr)}.shell>header.top{grid-column:1;padding:0 14px}.side{display:none}.content{padding:16px 14px calc(var(--bot) + 24px)}
.bottom{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--bot);background:var(--surface);border-top:1px solid var(--line);z-index:30;padding:4px 6px env(safe-area-inset-bottom);gap:2px;overflow-x:auto}
.bottom button{flex:1 0 64px;flex-direction:column;gap:2px;padding:6px 4px;font-size:.68rem;text-align:center;justify-content:center;min-height:52px}}
/* Seitenkopf */
.page-h{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}.page-h h1{margin:0}.page-h .sub{color:var(--mut);margin:2px 0 0}.page-h .acts{display:flex;gap:8px;flex-wrap:wrap}
/* Karten, Raster, Kennzahlen */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 14px;box-shadow:var(--sh)}.card>h2:first-child,.card>h3:first-child{margin-top:0}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.grid .card{margin:0}.cols-2{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media(max-width:760px){.cols-2{grid-template-columns:minmax(0,1fr)}}
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}.stat b{display:block;font-size:1.7rem;line-height:1.1;letter-spacing:-.02em}.stat span{color:var(--mut);font-size:.85rem}
.item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}.item:last-child{border-bottom:0}.item .grow{flex:1;min-width:0}.item .t{font-weight:600}.item .m{color:var(--mut);font-size:.88rem}
.item.click{cursor:pointer;margin:0 -8px;padding:12px 8px;border-radius:var(--r-s)}.item.click:hover{background:var(--line-2)}
/* Formulare */
label,.field>label{display:block;font-size:.82rem;font-weight:600;color:var(--mut);margin:12px 0 5px}
input,select,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--fg);min-height:44px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}textarea{min-height:92px;resize:vertical}input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--acc)}
.field .hint{color:var(--mut);font-size:.8rem;margin-top:4px}.field .err{color:var(--bad);font-size:.82rem;margin-top:4px}.check{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--fg);margin:10px 0}.check label{margin:0;color:var(--fg);font-size:.95rem;font-weight:500}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.row>*{flex:1 1 150px;min-width:0}.row>button,.row>.btn{flex:0 0 auto}
/* Buttons */
button,.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:var(--r-s);padding:9px 16px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background .12s,border-color .12s}
button:hover,.btn:hover{border-color:var(--mut)}button.primary,.btn.primary{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}button.primary:hover{filter:brightness(1.08)}
button.danger,.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}button.danger.solid{background:var(--bad);color:#fff;border-color:var(--bad)}button.ghost{border-color:transparent;background:transparent}button.sm{min-height:36px;padding:5px 11px;font-size:.88rem}button:disabled{opacity:.5;cursor:not-allowed}
/* Status */
.tag,.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:99px;font-size:.76rem;font-weight:600;background:var(--line-2);color:var(--mut);border:0;white-space:nowrap}
.tag.ok,.badge.ok{background:var(--ok-bg);color:var(--ok)}.tag.warn,.badge.warn{background:var(--warn-bg);color:var(--warn)}.tag.bad,.badge.bad{background:var(--bad-bg);color:var(--bad)}.tag.info,.badge.info{background:var(--info-bg);color:var(--info)}
.banner{background:var(--warn-bg);color:var(--warn);border-radius:var(--r-s);padding:9px 14px;margin:0 0 14px;font-size:.88rem;display:flex;gap:10px;align-items:flex-start}.banner.info{background:var(--info-bg);color:var(--info)}.banner.bad{background:var(--bad-bg);color:var(--bad)}.banner.ok{background:var(--ok-bg);color:var(--ok)}
.muted{color:var(--mut);font-size:.9rem}.empty{text-align:center;padding:36px 16px;color:var(--mut)}.empty svg{width:40px;height:40px;opacity:.5;margin-bottom:8px}.empty h3{color:var(--fg);margin-bottom:4px}
/* Tabellen: mobil als Karten */
.tbl{width:100%;border-collapse:collapse}.tbl th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}.tbl td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}.tbl tr:last-child td{border-bottom:0}
@media(max-width:640px){.tbl.stack thead{display:none}.tbl.stack tr{display:block;border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:10px;padding:6px 10px;background:var(--surface)}.tbl.stack td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 0;text-align:right}.tbl.stack td::before{content:attr(data-l);color:var(--mut);font-weight:600;text-align:left}}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line-2);vertical-align:top}
img.thumb{width:72px;height:72px;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line)}.photos{display:flex;gap:8px;flex-wrap:wrap}.photos img{width:96px;height:96px;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line);cursor:zoom-in}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:.85rem;background:var(--surface);cursor:pointer;min-height:36px}.chip.on{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}
/* Tabs (innerhalb einer Seite) */
nav.tabs,.seg{display:flex;gap:4px;padding:4px;background:var(--line-2);border-radius:var(--r-s);overflow-x:auto;margin-bottom:14px}nav.tabs button,.seg button{flex:1;border:0;background:transparent;min-height:38px;padding:6px 12px;white-space:nowrap;color:var(--mut)}nav.tabs button.on,.seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--sh)}
/* Dialoge */
.modal-bg{position:fixed;inset:0;background:rgba(10,12,14,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100;animation:fade .12s}.modal{background:var(--surface);border-radius:var(--r);width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h2{margin-top:0}.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
@media(max-width:560px){.modal-bg{align-items:flex-end;padding:0}.modal{border-radius:var(--r) var(--r) 0 0;width:100%}}
#toast{position:fixed;left:50%;bottom:calc(var(--bot) + 14px);transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;display:none;z-index:200;font-weight:500;box-shadow:0 6px 24px rgba(0,0,0,.25);max-width:92vw}@media(min-width:861px){#toast{bottom:24px}}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,var(--acc-2),var(--bg))}.login .card{width:min(400px,100%);padding:26px}.login .logo{width:48px;height:48px;border-radius:14px;background:var(--acc);color:var(--acc-fg);display:grid;place-items:center;font-size:1.4rem;margin-bottom:12px}
.skel{background:linear-gradient(90deg,var(--line-2),var(--line),var(--line-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;height:1em}@keyframes sk{to{background-position:-200% 0}}@keyframes fade{from{opacity:0}}
.spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:rot .7s linear infinite;display:inline-block}@keyframes rot{to{transform:rotate(360deg)}}
.public{max-width:640px;margin:0 auto;padding:20px 16px 40px}.public header{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-weight:700}
@media print{.side,.bottom,header.top,.acts,button{display:none!important}.shell{display:block}.card{box-shadow:none;break-inside:avoid}}
/* Abwärtskompatibel zu v1 */
header.top:not(.shell>header){display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5}header.top h1{font-size:1.1rem;margin:0;flex:1}main{max-width:960px;margin:0 auto;padding:16px}

.tab-n{margin-left:auto;background:var(--acc);color:var(--acc-fg);border-radius:99px;font-size:.7rem;padding:0 7px;min-width:20px;text-align:center;line-height:20px}.bottom .tab-n{position:absolute;margin:0;transform:translate(14px,-14px)}.bottom button{position:relative}
.public{min-height:100vh}.public .card{box-shadow:var(--sh)}.public .pub-h{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-weight:700;font-size:1.05rem}.public .pub-h i{width:34px;height:34px;border-radius:10px;background:var(--acc);color:var(--acc-fg);display:grid;place-items:center}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.fgrid .full{grid-column:1/-1}@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.shell>main.content{max-width:none;margin:0;padding:24px}@media(max-width:860px){.shell>main.content{padding:16px 14px calc(var(--bot) + 24px)}}