/* Schrift Inter (SIL Open Font License), selbst gehostet – keine Verbindung zu Google */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/public/InterVariable.woff2) format("woff2")}
*{box-sizing:border-box}
:root{--bg:#0C0D12;--card:#171923;--line:#262A38;--line2:#3A3F52;--text:#F2F3F7;--muted:#9AA0B4;--soft:#C9CDDB;--lime:#C6F432;--lime-dk:#1E2A1A;--lime-ln:#2F4A22;--amber:#FFB65B;--green:#2E7D4F}
html,body{margin:0;background:#000;color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--lime);text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:15px}
.phone{max-width:430px;min-height:100dvh;margin:0 auto;background:var(--bg);display:flex;flex-direction:column}
.top{padding:calc(16px + env(safe-area-inset-top)) 20px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brandname{font-size:18px;font-weight:800;letter-spacing:-.5px}
.content{flex:1;padding:4px 20px 24px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.card.hl{border:2px solid var(--lime);background:var(--lime-dk)}
.card.warn{border-color:var(--line2)}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:3px}
.muted{color:var(--muted);font-size:12px}
.soft{color:var(--soft)}
.small{font-size:12px}
.tiny{font-size:11px}
.bold{font-weight:700}
.heavy{font-weight:800}
.lime{color:var(--lime)}
.amber{color:var(--amber)}
.big{font-size:42px;font-weight:800;letter-spacing:-1.5px;line-height:1.1}
.h1{font-size:22px;font-weight:800;letter-spacing:-.5px}
.h2{font-size:15px;font-weight:800}
.bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--lime);border-radius:999px}
.bar.amber>i{background:var(--amber)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:16px;padding:12px 16px;font-weight:800;font-size:15px;border:0;cursor:pointer;background:var(--lime);color:var(--bg);text-align:center;width:100%}
.btn.ghost{background:var(--card);color:var(--text);border:1px solid var(--line)}
.btn.dark{background:var(--line);color:var(--text)}
.btn.sm{min-height:40px;padding:8px 14px;font-size:12px;border-radius:999px;width:auto}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;background:var(--line);color:var(--soft)}
.pill.lime{background:var(--lime-dk);color:var(--lime)}
.pill.amber{background:#2A2212;color:var(--amber)}
.avatar{width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;background:#3B4A8A}
.logo{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:var(--bg);flex-shrink:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.input{background:var(--card);border:1px solid var(--line2);color:var(--text);border-radius:14px;padding:12px 14px;min-height:48px;width:100%}
label.lbl{font-size:12px;font-weight:600;color:var(--muted)}
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px}
.tabs a{border-radius:10px;padding:10px;font-size:13px;font-weight:800;text-align:center;color:var(--soft);min-height:44px;display:flex;align-items:center;justify-content:center}
.tabs a.on{background:var(--lime);color:var(--bg)}
.bubble{background:#1F3B2A;border-radius:18px 18px 18px 4px;padding:14px 16px;font-size:14px;line-height:1.45;max-width:320px;white-space:pre-wrap}
.list{display:flex;flex-direction:column}
.list>.item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #1E2130}
.list>.item:last-child{border-bottom:0}
.flash{margin:8px 20px 0;padding:12px 14px;border-radius:14px;font-size:13px;font-weight:600;background:var(--lime-dk);color:var(--lime);border:1px solid var(--lime-ln)}
.flash.err{background:#2A1515;color:#FF9A9A;border-color:#5A2626}
nav.bottom{position:sticky;bottom:0;display:flex;justify-content:space-around;align-items:center;padding:10px 8px calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid #1E2130}
nav.bottom a{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;min-height:44px;font-size:11px;font-weight:600;color:var(--muted)}
nav.bottom a.on{color:var(--lime);font-weight:700}
.path{display:flex;gap:14px}
.path .rail{display:flex;flex-direction:column;align-items:center;width:48px;flex-shrink:0}
.path .rail i{width:3px;flex:1;min-height:20px;background:var(--line)}
.path .rail i.on{background:var(--lime)}
.moment{background:var(--lime);color:var(--bg);min-height:100dvh;padding:24px;display:flex;flex-direction:column;gap:20px;max-width:430px;margin:0 auto}
.moment .btn{background:var(--bg);color:var(--text)}
.moment .btn.ghost{background:rgba(12,13,18,.1);color:var(--bg);border:0}
.share-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.share-grid a,.share-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);font-size:11px;font-weight:600;background:none;border:0;cursor:pointer;padding:0}
.share-grid .ic{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);font-weight:800;font-size:12px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--lime);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:800;font-size:13px;display:none}
code.code{font-size:20px;font-weight:800;letter-spacing:1px}
/* Öffentliche Seiten (Freund-Landingpage, Demo-Shop): hell, Marke im Vordergrund */
.pub{max-width:430px;min-height:100dvh;margin:0 auto;background:#F4F5F7;color:#14161C;padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.pub .card{background:#fff;border-color:#E4E6EB;color:#14161C}
.pub .muted{color:#5B6170}
.pub .btn{background:#14161C;color:#fff}
.pub .input{background:#fff;border-color:#D9DCE3;color:#14161C}
.pub .pill.lime{background:#E6F4DF;color:#2F6B2A}
/* Marken-Dashboard */
.dash{display:flex;min-height:100dvh;background:#F4F5F7;color:#14161C;flex-wrap:wrap}
.dash .side{flex:1 1 220px;max-width:240px;background:var(--bg);color:var(--text);padding:28px 20px;display:flex;flex-direction:column;gap:6px}
.dash .side a{padding:11px 12px;border-radius:10px;color:var(--soft);font-size:14px;font-weight:600;min-height:44px;display:flex;align-items:center}
.dash .side a.on{background:var(--lime);color:var(--bg);font-weight:700}
.dash main{flex:999 1 560px;min-width:0;padding:32px;display:flex;flex-direction:column;gap:20px}
.dash .card{background:#fff;border-color:#E4E6EB;color:#14161C}
.dash .muted{color:#5B6170}
.dash .lime{color:#2F6B2A}
.dash a{color:#2F6B2A}
.dash .btn{background:#14161C;color:#fff;width:auto;min-height:44px;border-radius:10px;font-size:14px;padding:10px 16px}
.dash .btn.ghost{background:#fff;color:#14161C;border:1px solid #D9DCE3}
.dash .input,.dash select.input,.dash textarea.input{background:#fff;border-color:#D9DCE3;color:#14161C;min-height:44px;border-radius:10px}
.dash .bar{background:#E9EBF0}.dash .bar>i{background:#14161C}
.dash table{width:100%;border-collapse:collapse;font-size:13px}
.dash th{text-align:left;color:#5B6170;font-weight:600;padding:8px 6px;border-bottom:1px solid #E4E6EB}
.dash td{padding:10px 6px;border-bottom:1px solid #F0F1F4;vertical-align:top}
.dash .kpi{display:flex;flex-direction:column;gap:6px}
.dash .kpi .v{font-size:28px;font-weight:800;letter-spacing:-.5px}
.dash .kpi.dark{background:#14161C;color:#fff}
.dash .kpi.dark .muted{color:#B8BCC8}
.dash .pill.ok{background:#E6F4DF;color:#2F6B2A}.dash .pill.warn{background:#FFE4D9;color:#9A3B12}.dash .pill.plan{background:#E7F1FB;color:#1F4E8A}
.dash .flash{margin:0;background:#E6F4DF;color:#2F6B2A;border-color:#BFE3B4}
.dash .flash.err{background:#FBEBEB;color:#9A1F1F;border-color:#F0C0C0}
.dash .chart{display:flex;align-items:flex-end;gap:10px;height:160px}
.dash .chart>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.dash .chart b{width:100%;background:#B8BCC8;border-radius:6px 6px 0 0;display:block}
.dash .chart>div:last-child b{background:#14161C}
.scroll{overflow-x:auto}
@media (max-width:700px){.dash .side{max-width:none}.dash main{padding:20px}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}