/* ST Cockpit – Frontend-App (mobil-first). CI: Dunkelgrün/Messing/Salbei/Beige. */
:root{--stc-accent:#274330;--stc-brass:#B08D57;--stc-sage:#9F9C79;--stc-ink:#2c302b;--stc-muted:#767a6e;--stc-bg:#f4efe3;--stc-card:#fff;--stc-line:#e2dbcf}
#stc-app,.stc-app-guard{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--stc-ink)}
body.page-template .stc-app-shell{max-width:1100px;margin:0 auto}
.stc-boot{padding:40px 20px;text-align:center;color:var(--stc-muted)}

/* Sperrbildschirm */
.stc-lock{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:24px}
.stc-lockcard{background:var(--stc-card);border:1px solid var(--stc-line);border-radius:18px;box-shadow:0 8px 30px rgba(20,35,28,.10);padding:28px 24px;max-width:360px;width:100%;text-align:center}
.stc-logo{margin-bottom:8px}
.stc-lockcard h1{margin:0 0 12px;font-size:22px;color:var(--stc-accent)}
.stc-lmuted{color:var(--stc-muted);font-size:14px;line-height:1.5;margin:0 0 16px}
.stc-btn{display:block;width:100%;background:var(--stc-accent);color:#fff;border:0;border-radius:10px;padding:13px 16px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;margin:8px 0;text-decoration:none}
.stc-btn:hover{background:#1b3122}
.stc-btn-bio{background:var(--stc-brass)}
.stc-btn-bio:hover{background:#96743f}
.stc-or{color:var(--stc-muted);font-size:13px;margin:14px 0 6px}
.stc-pin{width:100%;box-sizing:border-box;text-align:center;letter-spacing:.5em;font-size:22px;padding:12px;border:1px solid var(--stc-line);border-radius:10px;margin-bottom:6px}
.stc-msg{color:#a3341f;font-size:13px;min-height:18px;margin-top:8px}

/* Vollbild-App */
body.stc-fullscreen{background:var(--stc-bg);margin:0}
body.stc-fullscreen #stc-app{max-width:900px;margin:0 auto;min-height:100vh}

/* App-Kopf (zwei Zeilen) */
.stc-hd{position:sticky;top:0;z-index:5;background:var(--stc-accent);color:#fff;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0));border-radius:0 0 16px 16px;box-shadow:0 4px 14px rgba(20,35,28,.18);padding-top:calc(10px + env(safe-area-inset-top,0))}
.stc-hd-top{display:flex;align-items:center;gap:8px}
.stc-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:.01em}
.stc-brand svg{border-radius:8px}
.stc-spacer{flex:1 1 auto}
.stc-iconbtn{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:9px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.stc-iconbtn:hover{background:rgba(255,255,255,.28)}
.stc-hd-bot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.stc-hd-bot .stc-nav{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:9px;width:38px;height:38px;font-size:22px;line-height:1;cursor:pointer}
.stc-appmonth{font-weight:700;font-size:16px;min-width:150px;text-align:center}
.stc-appbody{padding:14px 12px 4px}
.stc-stand{text-align:center;color:var(--stc-muted);font-size:12px;padding:4px 0 18px}
.stc-link{background:none;border:0;color:var(--stc-accent);text-decoration:underline;font:inherit;cursor:pointer}
.stc-ios{color:var(--stc-muted);font-size:12.5px;text-align:center;padding:0 16px 18px}

/* Einstellungen (Bottom-Sheet) */
.stc-sheet{position:fixed;inset:0;z-index:50;background:rgba(20,25,20,.5);display:flex;align-items:flex-end;justify-content:center}
.stc-sheetcard{background:#fff;width:100%;max-width:460px;border-radius:18px 18px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom,0));max-height:88vh;overflow:auto}
.stc-sheethd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.stc-sheethd strong{font-size:18px;color:var(--stc-accent)}
.stc-x{background:none;border:0;font-size:26px;line-height:1;color:var(--stc-muted);cursor:pointer}
.stc-sheetsec{border-top:1px solid var(--stc-line);padding:14px 0 4px}
.stc-sheetsec:first-of-type{border-top:0}
.stc-sheeth{font-size:13px;font-weight:700;color:var(--stc-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.stc-devs{list-style:none;margin:0;padding:0}
.stc-devs li{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0eadd}
.stc-devs li:last-child{border-bottom:0}

/* Guard */
.stc-app-guard{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:24px}
.stc-guard-card{background:#fff;border:1px solid var(--stc-line);border-radius:16px;padding:28px;text-align:center;max-width:340px}
.stc-guard-card h1{color:var(--stc-accent);margin:0 0 10px}
.stc-guard-btn{display:inline-block;margin-top:10px;background:var(--stc-accent);color:#fff;text-decoration:none;padding:10px 20px;border-radius:10px}

/* Die vom Backend gelieferten Panels füllen die App-Breite */
.stc-app .stc-wrap,.stc-appbody .stc-wrap{max-width:100%}

/* ---- Verwaltung: Umschalter Zahlen/Kunden ---- */
.stc-hd-top .stc-brand{font-size:15px;white-space:nowrap;flex:0 0 auto}
.stc-hd-top .stc-iconbtn{flex:0 0 auto}
.stc-seg{display:flex;background:rgba(255,255,255,.16);border-radius:10px;padding:2px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.stc-seg::-webkit-scrollbar{display:none}
.stc-segbtn{flex:0 0 auto;background:none;border:0;color:#fff;font:inherit;font-weight:600;font-size:12.5px;padding:7px 12px;border-radius:8px;cursor:pointer;opacity:.85;white-space:nowrap}
.stc-segbtn.is-on{background:#fff;color:var(--stc-accent);opacity:1}
/* Mehrere Reiter: auf Telefonen die Wortmarke ausblenden (nur Logo), Reiter scrollbar. */
@media (max-width:560px){.stc-hd-top .stc-brand span{display:none}}
@media (max-width:380px){.stc-segbtn{padding:7px 10px;font-size:12px}}

/* Zeilen-Items (Mandate, Läufe, Positionen) */
.stc-rowitem{display:block;width:100%;box-sizing:border-box;text-align:left;background:none;border:0;border-top:1px solid #f0eadd;padding:10px 0;font:inherit;color:inherit}
.stc-sec .stc-rowitem:first-of-type,#stc-mand-list .stc-rowitem:first-child,#stc-run-list .stc-rowitem:first-child{border-top:0}
button.stc-rowitem{cursor:pointer}
button.stc-rowitem:hover{background:#faf7f0}
.stc-rowitem-main{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.stc-rowitem-main strong{color:var(--stc-accent);font-size:14.5px}
.stc-rowitem-sub{color:var(--stc-muted);font-size:12.5px;margin-top:3px}
.stc-flag-neutral{background:#e7eef6;color:#274b6e}

/* Gutscheine */
.stc-addrow{margin:0 0 12px}
.stc-addrow .stc-btn{margin:0}
.stc-codecard .stc-cust-top{align-items:center}
.stc-codecard .stc-btn{margin-top:10px}
.p-remove{white-space:nowrap}

/* Marketing */
.stc-statusrow{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 2px}
.stc-statusrow .stc-btn{width:auto;margin:0;padding:9px 16px;flex:0 0 auto}
.g-toggle{white-space:nowrap}

/* Rechnungen */
.stc-invsum{font-weight:700;color:var(--stc-accent);font-size:14.5px}
.stc-inv .stc-cust-top{align-items:baseline}
.stc-invsep{border-top:1px solid var(--stc-line);margin:8px 0}
.stc-filterchip{display:flex;align-items:center;gap:10px;color:#fff;font-size:13.5px;padding:2px 2px}
.stc-filterchip b{font-weight:700}
.stc-chipx{margin-left:auto;background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:8px;padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.stc-btn-ghost{background:none;color:var(--stc-accent);border:1px solid var(--stc-line);margin:10px 0 2px}
.stc-btn-ghost:hover{background:#f4efe3}

/* Suchzeile / Detail-Kopf in Zeile 2 */
.stc-hd-search{padding:0 2px}
.stc-search{width:100%;box-sizing:border-box;border:0;border-radius:9px;padding:10px 12px;font:inherit;font-size:15px;background:rgba(255,255,255,.92);color:var(--stc-ink)}
.stc-hd-detail .stc-dtitle{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}

/* Karten (Liste + Detail-Abschnitte) */
.stc-card{display:block;width:100%;box-sizing:border-box;background:var(--stc-card);border:1px solid var(--stc-line);border-radius:14px;padding:13px 15px;margin:0 0 12px;text-align:left}
.stc-cust{cursor:pointer;font:inherit;color:inherit;transition:box-shadow .12s}
.stc-cust:hover{box-shadow:0 4px 14px rgba(20,35,28,.10)}
.stc-cust-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.stc-cust-top strong{font-size:15.5px;color:var(--stc-accent)}
.stc-cust-sub{color:var(--stc-ink);font-size:13.5px;margin-top:3px}
.stc-cust-sub2{color:var(--stc-muted);font-size:12.5px;margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stc-empty{color:var(--stc-muted);text-align:center;padding:26px 0}

/* Badges (Klassifizierung) */
.stc-badge{font-size:11px;font-weight:700;border-radius:11px;padding:2px 9px;white-space:nowrap}
.stc-bk-paying{background:#e3efe4;color:#1f5130}
.stc-bk-free{background:#f3edda;color:#7a5a17}
.stc-bk-trial,.stc-bk-test{background:#e7eef6;color:#274b6e}
.stc-bk-none{background:#f0e2e0;color:#7a2f22}
.stc-flag{font-size:11px;border-radius:9px;padding:1px 7px}
.stc-flag-ok{background:#e3efe4;color:#1f5130}
.stc-flag-warn{background:#f7e5df;color:#8a3417}

/* Detail-Abschnitte + Formular */
.stc-sec{padding:14px 15px}
.stc-sech{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--stc-muted);margin:0 0 10px}
.stc-sech2{font-size:12px;font-weight:700;color:var(--stc-muted);margin:12px 0 6px}
.stc-ro{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px;border-bottom:1px solid #f0eadd}
.stc-ro:last-child{border-bottom:0}
.stc-ro span{color:var(--stc-muted)}
.stc-ro b{color:var(--stc-ink);text-align:right}
.stc-f{display:block;margin:0 0 11px}
.stc-f-lab{display:block;font-size:12.5px;color:var(--stc-muted);margin-bottom:4px}
.stc-f input,.stc-f select{width:100%;box-sizing:border-box;border:1px solid var(--stc-line);border-radius:9px;padding:10px 11px;font:inherit;font-size:15px;background:#fff;color:var(--stc-ink)}
.stc-f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stc-chk,.stc-mod{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--stc-ink);margin:6px 0}
.stc-mod-p{color:var(--stc-muted);font-size:13px}
.stc-fhint{color:var(--stc-muted);font-size:12.5px;margin:6px 0 0;line-height:1.45}
.stc-abosum{margin:12px 0 0;font-size:14px;color:var(--stc-ink)}
.stc-saverow{display:flex;align-items:center;gap:12px;margin:2px 0 26px}
.stc-saverow .stc-btn{width:auto;margin:0;padding:12px 26px}
.stc-saved{color:#1f5130;font-size:14px;font-weight:600}