/* ==========================================================================
   PAXSON UI v5 – „Dark Ops"
   Dunkles Dashboard-Theme: Indigo-Seitenleiste, blauer Verlauf, Panels mit
   Kopfleiste, Mint-Akzent, Gold als Zweitakzent. Sans-Serif (Nunito).
   ========================================================================== */

/* ---------- Palette: Schwarz / Anthrazit, edel – Zahlen farbig ---------- */
:root{
  --side:#0B0C0F; --side-2:#131519;
  --bg-a:#101114; --bg-b:#15171B; --bg-c:#1B1D22;
  --panel:#16181D; --panel-head:#1C1F25; --panel-2:rgba(255,255,255,.03);
  --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.13);
  --ink:#F2F1EE; --ink-2:#D6D4CE; --ink-3:#B4B1A9; --muted:#8B8983; --muted-2:#66645F;
  --mint:#5EEAD4; --mint-2:#2DD4BF; --mint-3:rgba(94,234,212,.14);
  --gold:#D9B65C; --gold-2:#EACB7E; --gold-3:rgba(217,182,92,.16); --gold-ink:var(--gold);
  --violet:#A78BFA; --pink:#FB7185; --sky:#60A5FA; --lime:#A3E635; --coral:#FB923C;
  --green:#5EEAD4; --green-3:rgba(94,234,212,.14); --red:#FB7185; --red-3:rgba(251,113,133,.16); --amber:#D9B65C; --amber-3:rgba(217,182,92,.16);
  --navy:var(--gold); --bg:transparent; --line:var(--hair-2); --blue:var(--gold); --primary:var(--gold); --card:var(--panel); --paper:transparent;
  --r-s:8px; --r:12px; --r-l:14px;
  --sh-1:none; --sh-2:0 8px 24px rgba(0,0,0,.35); --sh-3:0 28px 70px rgba(0,0,0,.6);
  --font-b:'Jost',system-ui,sans-serif; --font-d:'Jost',system-ui,sans-serif;
  --tap:42px; --sidebar:236px; --tabbar:60px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}

/* ---------- Basis ---------- */
html{-webkit-text-size-adjust:100%}
body{background:radial-gradient(1200px 600px at 0% 0%,rgba(217,182,92,.06),transparent 55%),linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 55%,var(--bg-c) 100%) fixed;color:var(--ink);font-family:var(--font-b);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-b);font-weight:600;line-height:1.15;letter-spacing:0;color:var(--ink)}
h1{font-size:26px} h2{font-size:18px} h3{font-size:15px}
.g{color:var(--gold);font-style:normal} .sub,.hint{color:var(--muted);font-size:12.5px} a{color:var(--gold-2)} img{max-width:100%}
.eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px}

/* ---------- Formularelemente ---------- */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;border:1px solid var(--hair-2);border-radius:var(--r-s);background:rgba(255,255,255,.06);color:var(--ink);
  font-family:inherit;font-size:16px;padding:9px 12px;min-height:var(--tap);outline:none;transition:border-color .12s,box-shadow .12s,background .12s}
@media(min-width:901px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:13.5px;min-height:36px;padding:7px 11px}}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-3);background:rgba(255,255,255,.07)}
input[type=checkbox],input[type=radio]{accent-color:var(--gold);width:16px;height:16px}
input:disabled,select:disabled{opacity:.5}
label{font-size:11px;letter-spacing:.06em;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A3ACD6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
select option{background:#1C1F25;color:#fff}

/* ---------- Buttons ---------- */
.btn,button.btn,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 16px;border-radius:999px;
  border:1px solid var(--hair-2);background:rgba(255,255,255,.06);color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;
  white-space:nowrap;transition:background .12s,border-color .12s,color .12s,transform .08s}
@media(min-width:901px){.btn,button.btn,a.btn{min-height:36px;font-size:13px;padding:0 15px}}
.btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.btn:active{transform:scale(.985)}
.btn.gold,.btn.primary,button.btn.gold,a.btn.gold{background:linear-gradient(180deg,#E3C46E,#C9A54A);border-color:#C9A54A;color:#141414;box-shadow:0 8px 22px rgba(217,182,92,.22)}
.btn.gold:hover,.btn.primary:hover,button.btn.gold:hover{background:linear-gradient(180deg,#EACB7E,#D3AF55);border-color:#D3AF55}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.danger{color:var(--pink);border-color:rgba(240,88,123,.45)}
.btn.danger:hover{background:var(--red-3);border-color:var(--pink)}
.btn.sm{min-height:30px;padding:0 11px;font-size:12px}
@media(max-width:900px){.btn.sm{min-height:34px}}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:default}

/* ---------- Panels ---------- */
.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--sh-2);margin-bottom:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden}
@media(max-width:760px){.card{padding:14px;margin-bottom:12px}}
/* Kopfleiste im Panel */
.card>h2:first-child,.card>h3:first-child{font-family:var(--font-b);margin:-16px -18px 14px;padding:12px 18px;background:var(--panel-head);border-bottom:1px solid var(--hair);font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
@media(max-width:760px){.card>h2:first-child,.card>h3:first-child{margin:-14px -14px 12px;padding:11px 14px}}
.card>h2:first-child .g,.card>h3:first-child .g{color:var(--gold)}
.card>h2:first-child+.sub,.card>h3:first-child+.sub{margin-top:-6px}
.card h2::after{display:none}
.card .sub{font-size:12.5px;margin-bottom:12px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:760px){.toolbar .btn{flex:1 1 auto}}

/* ---------- Kopfzeile je Bereich ---------- */
.dashhead,.mkthead{position:relative;color:var(--ink);margin:0 0 16px;padding:0;background:none;border:none;border-radius:0;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.dashhead::after,.mkthead::after{display:none}
.dashhead h1,.dashhead h2,.mkthead h1,.mkthead h2{color:#fff;margin:0;font-size:28px;font-weight:600}
.dashhead .sub,.mkthead .sub{color:var(--muted);font-size:13px;margin:2px 0 0;max-width:70ch}
.dashhead .eyebrow,.mkthead .eyebrow{color:var(--muted)}
.dashctl,.mktact{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dashctl label{margin:0}
/* Segment-Look für die Ansicht-Auswahl */
.dashctl select{width:auto;min-width:120px;background-color:rgba(255,255,255,.12);border-color:transparent;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px;padding:8px 32px 8px 16px}
@media(max-width:900px){
  .dashhead h1,.dashhead h2,.mkthead h1,.mkthead h2{font-size:22px}
  .dashctl{width:100%}.dashctl select{flex:1}
  .mktact{width:100%}.mktact .btn{flex:1}
}
/* Reiter als Segment */
.mkttabs{position:relative;z-index:1;margin:0 0 14px;padding:4px;display:inline-flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;border:none;background:rgba(255,255,255,.06);border-radius:999px;max-width:100%;-webkit-overflow-scrolling:touch}
.mkttabs::-webkit-scrollbar{display:none}
.mkttab{flex:0 0 auto;background:none;border:none;color:var(--ink-3);font:700 11.5px var(--font-b);letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:999px;white-space:nowrap;cursor:pointer;min-height:auto;box-shadow:none}
.mkttab.on{background:#2A2D34;color:#fff}
.mkttab:hover{color:#fff}
.mkttab .tabbadge{background:var(--coral);color:#141414}

/* ---------- Kennzahlen ---------- */
.kpi2,#kpiRow>div{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-l);padding:0;position:relative;overflow:hidden;box-shadow:var(--sh-2);backdrop-filter:blur(6px)}
.kpi2::before,#kpiRow>div::before{display:none}
.kpi2 .lb,#kpiRow>div .lb{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:700;background:var(--panel-head);padding:10px 14px;border-bottom:1px solid var(--hair)}
.kpi2 .vl,#kpiRow>div b{display:block;font-size:26px;font-weight:700;line-height:1.1;color:var(--mint);padding:14px 14px 4px;white-space:nowrap;letter-spacing:-.01em}
.kpi2 .sb,#kpiRow>div .sb{display:block;font-size:11.5px;color:var(--muted);padding:0 14px 12px}
.kpi2 .sb::before,#kpiRow>div .sb::before{display:none}
.kpi2.dark,#kpiRow>div.dark,.kpi2.gold{background:var(--panel)!important;border-color:var(--hair)!important}
.kpi2.dark .lb,#kpiRow>div.dark .lb,.kpi2.gold .lb{background:var(--panel-head);color:var(--ink-2)}
.kpi2.dark .sb,#kpiRow>div.dark .sb,.kpi2.gold .sb{color:var(--muted)}
.kpi2.dark .vl,#kpiRow>div.dark b{color:#fff}
.kpi2.gold{border-color:rgba(217,182,92,.45)!important}.kpi2.gold .vl{color:var(--gold)}
/* Farbrotation für Kennzahlen */
.kpirow>.kpi2:nth-child(6n+1) .vl,#kpiRow>div:nth-child(6n+1) b{color:var(--mint)}
.kpirow>.kpi2:nth-child(6n+2) .vl,#kpiRow>div:nth-child(6n+2) b{color:var(--gold)}
.kpirow>.kpi2:nth-child(6n+3) .vl,#kpiRow>div:nth-child(6n+3) b{color:var(--sky)}
.kpirow>.kpi2:nth-child(6n+4) .vl,#kpiRow>div:nth-child(6n+4) b{color:var(--violet)}
.kpirow>.kpi2:nth-child(6n+5) .vl,#kpiRow>div:nth-child(6n+5) b{color:var(--coral)}
.kpirow>.kpi2:nth-child(6n+6) .vl,#kpiRow>div:nth-child(6n+6) b{color:var(--lime)}
.kpi2.gold .vl{color:var(--gold)!important}
/* Farbige Akzentlinie oben je Kachel */
.kpi2 .lb::before,#kpiRow>div .lb::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:currentColor;opacity:.0}
.kpirow>.kpi2:nth-child(6n+1)::after,#kpiRow>div:nth-child(6n+1)::after{background:var(--mint)}
.kpirow>.kpi2:nth-child(6n+2)::after,#kpiRow>div:nth-child(6n+2)::after{background:var(--gold)}
.kpirow>.kpi2:nth-child(6n+3)::after,#kpiRow>div:nth-child(6n+3)::after{background:var(--sky)}
.kpirow>.kpi2:nth-child(6n+4)::after,#kpiRow>div:nth-child(6n+4)::after{background:var(--violet)}
.kpirow>.kpi2:nth-child(6n+5)::after,#kpiRow>div:nth-child(6n+5)::after{background:var(--coral)}
.kpirow>.kpi2:nth-child(6n+6)::after,#kpiRow>div:nth-child(6n+6)::after{background:var(--lime)}
.kpi2::after,#kpiRow>div::after{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--gold)}
.kpirow,#kpiRow{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:14px}
@media(min-width:761px){.kpirow,#kpiRow{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.kpirow,#kpiRow{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}}

/* ---------- Badges / Chips / Suche ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}
.badge::before{display:none}
.badge.ok{background:var(--green-3);color:var(--mint)}.badge.no{background:var(--red-3);color:var(--pink)}.badge.neu{background:var(--amber-3);color:var(--gold)}
.pfchip,.chip{border:1px solid var(--hair-2);background:rgba(255,255,255,.05);color:var(--ink-2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;min-height:32px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .12s;white-space:nowrap}
@media(max-width:900px){.pfchip,.chip{min-height:36px}}
.pfchip:hover,.chip:hover{border-color:rgba(255,255,255,.35)}
.pfchip.on,.chip.on{background:var(--ink);color:#111;border-color:var(--ink)}
.pfchip span{font-size:10.5px;opacity:.7}
.pfchips,.chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:10px}
.pfchips::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
@media(min-width:761px){.pfchips,.chips{flex-wrap:wrap;overflow:visible}}
.pfsearch{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--hair-2);border-radius:999px;padding:0 14px;min-height:var(--tap);color:var(--muted)}
@media(min-width:901px){.pfsearch{min-height:36px}}
.pfsearch:focus-within{border-color:var(--gold)}
.pfsearch input{border:none!important;box-shadow:none!important;min-height:0!important;padding:6px 0!important;background:transparent!important}
.pfbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.tabbadge,.cbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:10.5px;font-weight:800}
.tabbadge{background:var(--pink);color:#fff}

/* ---------- Sammelaktionen ---------- */
.bulkbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--gold);color:#141414;border-radius:999px;padding:6px 8px 6px 16px;margin:0 0 12px;font-size:12.5px;font-weight:700}
.bulkbar .btn{min-height:30px;background:#141414;color:#fff;border-color:#141414}
.bulkbar .btn.ghost{background:transparent;color:#141414;border-color:rgba(20,20,20,.35)}
.bulkbar .btn.gold{background:#141414;color:#fff}
@media(max-width:760px){
  .bulkbar{position:fixed;left:10px;right:10px;bottom:calc(var(--tabbar) + var(--safe-b) + 8px);z-index:38;margin:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;box-shadow:var(--sh-3)}
  .bulkbar .btn{flex:0 0 auto;min-height:34px}
}

/* ---------- Tabellen ---------- */
table.cards{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;color:var(--ink-2)}
table.cards th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--hair-2);background:transparent}
table.cards td{padding:9px 10px;border-bottom:1px solid var(--hair);vertical-align:middle}
table.cards td b{color:#fff}
table.cards tbody tr:last-child td{border-bottom:none}
table.cards tbody tr:hover td{background:rgba(255,255,255,.04)}
tr.rowsel td{background:var(--gold-3)!important}
.card table thead tr th{background:transparent}
@media(max-width:760px){
  table.cards tr{border:1px solid var(--hair);background:rgba(255,255,255,.03);border-radius:var(--r);padding:10px 12px;margin-bottom:8px}
  table.cards td{padding:4px 0}
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px}
  .tblwrap table{min-width:640px}
}

/* ---------- Modale ---------- */
.modal{position:fixed;inset:0;background:rgba(6,10,30,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:60;padding:18px}
.modal.on{display:flex}
.modal .box{background:#16181D;color:var(--ink);border:1px solid var(--hair-2);border-radius:var(--r-l);width:100%;max-width:620px;max-height:92vh;overflow-y:auto;padding:18px 20px;box-shadow:var(--sh-3)}
.modal .box h3{margin-bottom:4px;color:#fff}
@media(max-width:760px){
  .modal{align-items:flex-end;padding:0}
  .modal .box{max-width:none;border-radius:16px 16px 0 0;max-height:94vh;padding:14px 14px calc(14px + var(--safe-b))}
  .modal .toolbar{position:sticky;bottom:calc(-14px - var(--safe-b));background:#16181D;padding:10px 0 0;margin-top:12px;border-top:1px solid var(--hair)}
  .modal .toolbar .btn{flex:1}
}

/* ---------- App-Shell: Seitenleiste (Desktop) ---------- */
body header{background:var(--side);color:var(--ink);width:var(--sidebar);box-shadow:none;border-right:1px solid var(--hair)}
body header .brand{padding:22px 20px 18px;border-bottom:1px solid var(--hair)}
body header .brand .wm .lg{color:#fff}
body header .paxlogo img{height:30px}
body header nav{padding:10px 0 10px 0}
body header nav button,body header nav .navlink{border-left:none;border-right:2px solid transparent;border-radius:0;padding:10px 20px;margin:0;color:var(--muted);font-size:13.5px;font-weight:500;gap:14px;position:relative;transition:background .12s,color .12s;min-height:42px}
body header nav button .ic,body header nav .navlink .ic{width:20px;opacity:.7;font-size:16px}
body header nav button:hover,body header nav .navlink:hover{background:rgba(255,255,255,.05);color:#fff}
body header nav button.active{background:rgba(255,255,255,.06);color:#fff;font-weight:700;box-shadow:none;border-right-color:var(--gold)}
body header nav button.active .ic{opacity:1;color:var(--gold)}
body header nav button.active::before{display:none}
body header .cbadge{background:rgba(255,255,255,.1);color:var(--ink-2);font-weight:800;margin-left:auto;font-size:10.5px}
body header nav button.active .cbadge{background:var(--gold);color:#141414}
body header .usermenu{padding:14px;border-top:1px solid var(--hair);color:var(--muted);font-size:12px}
body header .usermenu #whoami{color:#fff}
body header .usermenu .btn.ghost{color:var(--ink);border-color:var(--hair-2);min-height:32px;font-size:12px}
main{margin-left:var(--sidebar);padding:22px 26px 80px}

/* Speichern-Dock */
#stickySave{position:fixed;left:auto!important;right:18px!important;bottom:18px!important;width:auto!important;max-width:none!important;transform:none!important;z-index:35;display:flex;align-items:center;gap:8px;background:#16181D;border-radius:999px;padding:5px 5px 5px 14px;box-shadow:var(--sh-3);border:1px solid var(--hair-2)}
#stickySave .save-badge{font-size:11.5px;color:var(--muted)}
#stickySave .save-btn{background:var(--gold);color:#141414;border:none;border-radius:999px;min-height:30px;padding:0 12px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
@media(max-width:900px){#stickySave{display:none!important}}

/* ---------- App-Shell: Mobile ---------- */
#mtop{background:var(--side);padding:calc(8px + var(--safe-t)) 12px 8px;gap:10px;box-shadow:none;border-bottom:1px solid var(--hair)}
#mtop .mwm{flex:1;display:flex;justify-content:center}
#mtop .paxlogo img{height:22px}
#hamburger{order:3;width:30px;height:26px}
#mtop .mtop-avatar{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#141414;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;order:1;position:relative}
#mtop .mtop-avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:var(--mint);border:2px solid var(--side)}
body.dirty #mtop .mtop-avatar::after{background:var(--coral)}
.tabbar{display:none}
@media(max-width:900px){
  main{margin-left:0;padding:14px 14px calc(var(--tabbar) + var(--safe-b) + 16px)}
  body header{width:272px;box-shadow:var(--sh-3)}
  body header .brand{display:none}
  body header nav{padding-top:calc(12px + var(--safe-t))}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none;
    background:var(--side);border-top:1px solid var(--hair);padding:4px 4px calc(4px + var(--safe-b));height:calc(var(--tabbar) + var(--safe-b))}
  body:not(.loggedin) .tabbar{display:none}
  .tabbar button{background:none;border:none;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:10px;font-weight:700;padding:3px 0;cursor:pointer;position:relative}
  .tabbar button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar button.on{color:var(--gold)}
  .tabbar button.on::after{content:"";position:absolute;top:-4px;width:18px;height:2px;background:var(--gold)}
  .tabbar button.tb-main{margin:0}
  .tabbar button.tb-main svg{width:20px;height:20px;background:none;padding:0;border-radius:0;box-shadow:none;stroke:currentColor}
  .tabbar .tb-badge{position:absolute;top:1px;right:calc(50% - 18px);background:var(--pink);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;padding:0 4px;border-radius:8px;display:flex;align-items:center;justify-content:center}
}

/* ---------- Login (Tool) ---------- */
#loginView{background:radial-gradient(900px 500px at 50% -10%,rgba(217,182,92,.10),transparent 60%),linear-gradient(160deg,var(--bg-a),var(--bg-c))}
#loginView .loginbox{background:#16181D;color:var(--ink);border-radius:var(--r-l);box-shadow:var(--sh-3);padding:28px 26px;border:1px solid var(--hair-2);backdrop-filter:blur(8px)}
#loginView .loginbox h2{color:#fff}
/* Login-Logo kommt aus api/index.php?a=login_logo (Admin → Briefkopf & Logo) */
@media(max-width:760px){#loginView{padding:24px 14px;align-items:flex-start;padding-top:calc(48px + var(--safe-t))}#loginView .loginbox{padding:22px 18px}}

/* ---------- Grids / Diagramm-Farben ---------- */
.grid.g2,.grid.g3,.grid.g4,.grid2{display:grid;gap:10px}
.grid.g2,.grid2{grid-template-columns:repeat(2,1fr)} .grid.g3{grid-template-columns:repeat(3,1fr)} .grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.grid.g2,.grid.g3,.grid.g4,.grid2{grid-template-columns:1fr}}
.bar.u{background:var(--mint)} .bar.p{background:var(--gold)}
.legend .sw.u{background:var(--mint)}.legend .sw.p{background:var(--gold)}
.fnbar{background:rgba(255,255,255,.08)} .fnbar>div{background:linear-gradient(90deg,var(--gold),var(--mint))}
.fnlb,.barlb,.legend{color:var(--muted)} .fnv{color:#fff}
.scbar{background:rgba(255,255,255,.08)} .scbar>div{background:linear-gradient(90deg,var(--gold),var(--mint))}
.chlogo{box-shadow:none}
.dcard,.ccard,.chcard,.dcard.pend{background:rgba(255,255,255,.04);border-color:var(--hair)}
.dcard.pend{border-color:var(--gold)}
.dgrid label,.chmeta label{color:var(--muted)}
.maprow{border-bottom-color:var(--hair)} .maprow.maphead{border-bottom-color:var(--hair-2);color:var(--muted)}
.sellist{border-color:var(--hair)} .selitem{border-bottom-color:var(--hair);color:var(--ink)} .selitem:hover{background:rgba(255,255,255,.04)} .selitem.on{background:var(--gold-3)}
.seg label{background:rgba(255,255,255,.05);border-color:var(--hair-2);color:var(--ink-2)}
.seg label:has(input:checked){background:var(--gold);border-color:var(--gold);color:#141414}
.feedprev{background:#0B0C0F;color:var(--ink-2)}
.revealbar{background:rgba(255,255,255,.05);border-color:var(--hair-2);color:var(--ink-2)}
.metarow{border-bottom-color:var(--hair)}
.uploadbox,.qbox{background:rgba(255,255,255,.04);border-color:var(--hair-2)}
.igres span{color:var(--muted)}
.chcatitem{background:rgba(255,255,255,.05);border-color:var(--hair-2)} .chcatitem:hover{border-color:var(--gold)} .chcatinfo b{color:#fff} .chcatinfo em{color:var(--gold)}
.chcatgrp{color:var(--gold)}
.chempty{background:rgba(255,255,255,.04);border-color:var(--hair-2)}
.scrank{color:var(--gold)}
.thumbs img,.igres img,.selitem img{background:#0B0C0F;border-color:var(--hair-2)}
.mqtable td,.mqtable th{border-bottom-color:var(--hair)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Sweep: verbliebene helle Komponenten (Editor, Wizard, Admin) ---------- */
.wizstepper,.wizfoot,.invchoice .ic-card,.co-results,.lbx-box,.aicostbox,.margebtn,.chk,.kpi .k,.dcard,.ccard,.chcard,.subnav button,.docsw button,.pfsort select{background:var(--panel)!important;border-color:var(--hair)!important;color:var(--ink);box-shadow:none!important}
.wizstepper .st .n{background:rgba(255,255,255,.06)!important;border-color:var(--hair-2)!important;color:var(--muted)}
.wizstepper .st.active .n{background:var(--gold)!important;border-color:var(--gold)!important;color:#141414!important;box-shadow:0 0 0 4px var(--gold-3)!important}
.wizstepper .st.done .n{background:var(--mint)!important;border-color:var(--mint)!important;color:#141414!important}
.wizstepper .st.active .tx .t{color:var(--gold)!important}
.wizstepper .cn{background:var(--hair-2)!important}.wizstepper .cn.done{background:var(--mint)!important}
.wizstepper .st .tx .t{color:var(--ink-2)}
.docsw{border-color:var(--hair-2)!important;overflow:hidden}
.docsw button{color:var(--ink-3)!important}
.docsw button.on{background:var(--gold)!important;color:#141414!important}
.subnav button{color:var(--ink-3)!important}
.subnav button.on{background:var(--gold)!important;color:#141414!important;border-color:var(--gold)!important}
.kpi .k{padding:12px 14px!important}
.kpi .k::before{background:var(--gold)!important}
.kpi .k .v,.kpi .k b{color:var(--mint)}
.co-item{color:var(--ink);border-color:var(--hair)!important}
.co-item:hover,.co-item.info:hover{background:rgba(255,255,255,.06)!important}
.invchoice .ic-card:hover{border-color:var(--gold)!important;box-shadow:0 6px 22px rgba(217,182,92,.15)!important}
.invchoice .ic-ico{background:linear-gradient(135deg,var(--gold),#8A6E2A)!important;color:#141414!important}
.chk.on{background:var(--gold-3)!important;border-color:var(--gold)!important}
.aicostbox{color:var(--ink-2)}
.savedot{background:var(--muted-2)}
.save-badge{color:var(--muted)!important}
.lbx-box h3,.lbx-box h2{color:#fff}
/* Positionstabelle im Editor */
.pos-tbl,.postable,table.pos{color:var(--ink-2)}
.pos-tbl th,.postable th,table.pos th{background:var(--panel-head)!important;color:var(--muted)!important;border-color:var(--hair-2)!important}
.pos-tbl td,.postable td,table.pos td{border-color:var(--hair)!important}
/* Textareas/Inputs mit Inline-Weiß */
input[style*="background:#fff"],select[style*="background:#fff"],div[style*="background:#fff"]:not(.doc):not(.doc *){background:var(--panel)!important;color:var(--ink)}
/* Gelbe/cremefarbene Hinweisboxen */
div[style*="#FBF7EC"],div[style*="#FBF1D8"],.revealbar,.tipbox,.notice{background:var(--gold-3)!important;border-color:rgba(217,182,92,.35)!important;color:var(--ink-2)}
/* Tabellen generisch (nicht .cards) */
main table:not(.cards):not(.doc *) th{color:var(--muted);border-bottom:1px solid var(--hair-2);background:transparent}
main table:not(.cards):not(.doc *) td{border-bottom:1px solid var(--hair);color:var(--ink-2)}
main table:not(.cards) tbody tr:hover td{background:rgba(255,255,255,.03)}
/* Dokumentvorschau bleibt weiß (Druckbild) */
.doc,.doc *{color:initial}
.doc{background:#fff!important;color:#111!important;box-shadow:0 20px 60px rgba(0,0,0,.6)!important}
/* Hilfstexte / Labels in Cards */
.card label,.lbx-box label{color:var(--muted)}
.card .hint,.card .sub{color:var(--muted)}
.card b,.card strong{color:var(--ink)}
/* Schrift-Rendering auf dunklem Grund */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- Nachzügler: helle Inline-Regeln überschreiben ---------- */
body header nav button.active{background:rgba(255,255,255,.06)!important;border-left-color:transparent!important}
.cbadge{background:rgba(255,255,255,.1)!important;color:var(--ink-2)!important}
body header nav button.active .cbadge{background:var(--gold)!important;color:#141414!important}
.bar-row .track{background:rgba(255,255,255,.08)!important}
.bar-row .fill,.bar-row .track>div{background:linear-gradient(90deg,var(--gold),var(--mint))!important}
#dashGran,#dashPeriod,.dashctl select{background-color:rgba(255,255,255,.08)!important;color:var(--ink)!important;border-color:var(--hair-2)!important}
/* Sonstige helle Flächen im dunklen Theme */
.doc-wrap,.previewbg{background:transparent}
.sigbox,.uploadbox{background:rgba(255,255,255,.04)!important;border-color:var(--hair-2)!important}
hr{border-color:var(--hair)}
/* Ghost-Buttons: Inline-Regel `button.btn.ghost{background:#fff}` überschreiben */
button.btn.ghost,a.btn.ghost,.btn.ghost{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--hair-2)}
button.btn.ghost:hover,a.btn.ghost:hover,.btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:var(--ink)}
button.btn.danger.ghost,.btn.danger.ghost,.btn.ghost.danger{background:transparent;color:var(--red);border-color:rgba(251,113,133,.4)}
button.btn.danger.ghost:hover,.btn.danger.ghost:hover{background:var(--red-3);border-color:var(--red);color:var(--red)}
.usermenu .btn.ghost{background:rgba(255,255,255,.06)}
/* Kontrollkästchen sichtbar auf dunklem Grund */
input[type=checkbox],input[type=radio]{accent-color:var(--gold);background:transparent;border:1px solid var(--hair-2)}
/* Rollover in Tabellen: nie hell auf dunklem Theme */
main tbody tr:hover{background:rgba(255,255,255,.05)!important}
main tbody tr:hover td{color:var(--ink)}
#posBody tr:hover td,#tierBody tr:hover td,#imBody tr:hover td{background:rgba(255,255,255,.05)!important}
main tr.sel td,main tr.active td,main tbody tr.on td{background:var(--gold-3)!important;color:var(--ink)!important}
/* Provisionssätze */
.rtcatrow{display:flex;flex-wrap:wrap;gap:6px}
.rtcat{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:999px;padding:4px 10px 4px 12px;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600;margin:0}
.rtcat.on{border-color:var(--gold);background:var(--gold-3);color:var(--ink)}
.rtcat input{width:58px;min-height:28px!important;padding:2px 6px!important;text-align:right;font-size:12px;border-radius:6px!important}
.rtcat .pz{color:var(--muted-2)}
tr.rtsub td{border-bottom:1px solid var(--hair-2)}
/* Shopify-Statistik */
.ssbars{display:flex;gap:3px;align-items:flex-end;height:130px;margin:10px 0 4px;overflow-x:auto;padding-bottom:2px}
.sscol{flex:1 0 14px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:14px}
.ssstack{display:flex;align-items:flex-end;gap:2px;height:112px}
.ssb{display:block;width:6px;border-radius:2px 2px 0 0}
.ssb.ums{background:var(--mint)} .ssb.bes{background:var(--sky);opacity:.8}
.sscol span{font-size:9px;color:var(--muted-2);white-space:nowrap}
@media(max-width:760px){.sscol span{display:none}.ssbars{height:120px}}
/* Tooltip im Dashboard: dunkel mit hellem Text */
#tip{background:#0B0C0F!important;color:var(--ink)!important;border:1px solid var(--hair-2);
     box-shadow:var(--sh-3)!important;border-radius:10px!important;max-width:320px}
#tip .th{color:var(--gold)!important;font-weight:700;border-bottom:1px solid var(--hair);padding-bottom:5px;margin-bottom:6px}
#tip .tr span:first-child{color:var(--ink-2)!important}
#tip .tr span:last-child{color:#fff!important;font-weight:600}

/* ===== Shopify-Statistik: Analytics-Optik im dunklen Design ===== */
#ssKpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ssmetric{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:14px 16px 0;overflow:hidden;position:relative}
.ssmetric .lb{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ssmetric .vrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px}
.ssmetric .vl{font-size:26px;font-weight:700;line-height:1.1;white-space:nowrap}
.ssmetric .delta{font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:5px}
.ssmetric .delta.up{background:var(--green-3);color:var(--mint)}
.ssmetric .delta.down{background:var(--red-3);color:var(--red)}
.ssmetric .spark{display:block;width:100%;height:34px;margin:8px -16px -1px;width:calc(100% + 32px)}
.ssmetric .sparkhole{height:26px}
.ssarea{display:block;width:100%;height:190px}
.ssxaxis{position:relative;height:16px;margin-top:2px}
.ssxaxis span{position:absolute;transform:translateX(-50%);font-size:10.5px;color:var(--muted-2);white-space:nowrap}
.sslegend{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.sslegend.row{flex-direction:row;gap:16px;margin-top:8px}
.sslegend div{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.sslegend i{width:9px;height:9px;border-radius:2px;flex:none}
.sslegend b{margin-left:auto;color:#fff;font-weight:700}
.sslegend em{font-style:normal;color:var(--muted);width:44px;text-align:right}
.ssdonutwrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ssdonut{width:140px;height:140px;flex:none}
.ssdonut .dv{fill:#fff;font:700 20px 'Jost',sans-serif}
.ssdonut .dl{fill:#8B8983;font:600 10px 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.ssdonutwrap .sslegend{flex:1;min-width:190px}
.ssbar{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:13px}
.ssbar:last-child{border-bottom:none}
.ssbar .n{width:150px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssbar .t{flex:1;height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.ssbar .t i{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--mint));border-radius:4px}
.ssbar .v{width:72px;text-align:right;font-weight:700;color:#fff}
.ssprod{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13px}
.ssprod:last-child{border-bottom:none}
.ssprod .r{width:22px;text-align:right;color:var(--gold);font-weight:700}
.ssprod .n{flex:1;min-width:0;color:#fff;position:relative;padding-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssprod .n i{position:absolute;left:0;bottom:0;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--mint));opacity:.75}
.ssprod .q{width:74px;text-align:right;color:var(--muted)}
.ssprod .v{width:104px;text-align:right;font-weight:700;color:#fff}
@media(max-width:760px){
  .ssbar .n{width:104px}.ssbar .v{width:58px}
  .ssprod .q{display:none}.ssprod .v{width:92px}
  .ssdonut{width:116px;height:116px}
}
.ssprodhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ssprodctl{display:flex;gap:8px;flex-wrap:wrap}
.seg.sm label{padding:5px 11px;font-size:12px;min-height:30px}
@media(max-width:760px){.ssprodctl{width:100%}.seg.sm{flex:1}.seg.sm label{flex:1;justify-content:center}}
/* Abschnittsüberschrift innerhalb eines Bereichs */
.secthead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;
  margin:26px 0 14px;padding-top:18px;border-top:1px solid var(--hair-2)}
.secthead h2{margin:0;font-size:22px;font-weight:600}
.secthead .eyebrow{margin-bottom:2px}
@media(max-width:900px){.secthead{margin-top:20px}.secthead .dashctl{width:100%}.secthead .dashctl select{flex:1}}
.ssmetric .vgl{font-size:11px;color:var(--muted-2);margin-top:2px}
.ssprod.clk{cursor:pointer}
.ssprod.clk:hover{background:rgba(255,255,255,.04)}
.ssprod .p{width:52px;text-align:right;color:var(--muted)}
.ssvarsum{display:flex;gap:18px;flex-wrap:wrap;padding:10px 12px;margin-bottom:10px;background:rgba(255,255,255,.04);border-radius:10px}
.ssvarsum div{display:flex;flex-direction:column}
.ssvarsum span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ssvarsum b{font-size:18px;color:#fff}
/* Radar: Produktprüfung, Liste, Sale-Planer */
.ideekopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--hair)}
.ideescore{font-size:38px;font-weight:700;line-height:1}
.ideescore span{font-size:14px;color:var(--muted);font-weight:400}
.lipunkt{position:relative;padding:6px 0 6px 20px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--hair)}
.lipunkt:last-child{border-bottom:none}
.lipunkt::before{content:"›";position:absolute;left:4px;color:var(--gold);font-weight:700}
.lipunkt.ok::before{content:"✓";color:var(--mint)}
.lipunkt.warn::before{content:"!";color:var(--coral)}
.saphase{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--hair)}
.saphase:last-child{border-bottom:none}
.saphase .ph b{display:block;color:#fff}
@media(max-width:760px){.saphase{grid-template-columns:1fr;gap:4px}}
input[type=file]{padding:8px 10px;font-size:13px}
/* Rollover in den Diagrammen */
.ssareawrap{position:relative}
.ssarea rect{cursor:crosshair}
.ssdonut .dseg{cursor:pointer;transition:opacity .12s}
.ssdonut:hover .dseg{opacity:.55}
.ssdonut .dseg:hover{opacity:1}
.ssbar.hov{cursor:default;border-radius:6px;padding-left:6px;padding-right:6px;margin-left:-6px;margin-right:-6px}
.ssbar.hov:hover{background:rgba(255,255,255,.04)}
.ssmetric{cursor:default}
.ssmetric:hover{background:rgba(255,255,255,.02)}
#tip .tr span:last-child{min-width:64px;text-align:right}
.fnrow.hov{cursor:default;border-radius:6px;padding:2px 6px;margin:0 -6px}
.fnrow.hov:hover{background:rgba(255,255,255,.04)}
.kpi2.klick{cursor:pointer;transition:border-color .12s,background .12s}
.kpi2.klick:hover{border-color:var(--hair-2)}
.kpi2.klick.an{border-color:var(--gold)!important;background:var(--gold-3)}
.kpi2.klick.an .lb{background:rgba(217,182,92,.22)}
/* Fortschrittsanzeige */
.card.pgr{border-color:var(--hair-2)}
.pgrkopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pgrkopf b{color:#fff}
.pgrzeit{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700}
.pgrbar{height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin:12px 0 8px}
.pgrbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--mint));
  transition:width .35s ease;position:relative}
.pgrbar i::after{content:"";position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:pgrGlanz 1.6s linear infinite}
@keyframes pgrGlanz{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.pgrphase{font-size:13px;color:var(--ink-2)}
.pgrfuss{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.pgrfuss span{font-size:12px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.pgrbar i::after{animation:none}}
/* Shopify-App: Codes in der Händlerverwaltung */
.appcode{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.appcode code{background:rgba(217,182,92,.14);color:#E3C878;border-radius:8px;padding:6px 12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:700;letter-spacing:.04em}
.appcode .hint{flex-basis:100%;margin-top:2px}
/* Marktplatz: Produktbearbeitung */
.prname{cursor:pointer;border-bottom:1px dotted rgba(255,255,255,.25)}
.prname:hover{color:var(--gold)}
.mevorschau{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mevorschau img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--hair)}
.eigen{display:inline-block;margin-left:6px;background:rgba(217,182,92,.18);color:#E3C878;
  border-radius:999px;padding:1px 8px;font-size:10px;font-weight:700;letter-spacing:.03em;
  text-transform:none;cursor:pointer;vertical-align:middle}
.eigen:hover{background:rgba(217,182,92,.3)}

/* ===== Marktplatz · Auszahlungen ===== */
.badge.paid{background:rgba(96,165,250,.16);color:var(--sky)}
.paytop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.pfchip.paygold{border-color:var(--gold-3);color:var(--gold)}
.pfchip.paygold:hover{border-color:var(--gold)}
.payerr{color:var(--red);font-weight:600}
.paydl{border:1px solid var(--hair);border-radius:var(--r);background:var(--panel-2);margin:0 0 10px;overflow:hidden;transition:border-color .12s}
.paydl.on{border-color:var(--gold)}
.paydh{display:grid;grid-template-columns:22px minmax(160px,1fr) auto auto;align-items:center;gap:14px;padding:12px 14px;background:var(--panel-head)}
.paysums{display:flex;gap:22px}
.paydh .payname b{color:#fff;font-size:14px}
.paydh .payname .hint{margin-top:2px}
.paysum{text-align:right;line-height:1.25}
.paysum span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.paysum b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.paysum b.f{color:var(--mint)}
.paychk,.paychk0{width:18px;height:18px;margin:0;accent-color:var(--gold);cursor:pointer}
.paychk0{display:inline-block}
.paytbl{overflow-x:auto;padding:4px 6px 6px}
.paytbl table.cards{table-layout:fixed}
.paytbl table.cards td.num,.paytbl table.cards th.num{white-space:nowrap}
.paytbl tr.paysel td{background:var(--gold-3)}
#payModal table.cards td.num{white-space:nowrap}
#payModal table.cards tfoot td{border-top:1px solid var(--hair-2);padding:9px 10px}
.paysrc{margin-top:12px;padding:10px 12px;border:1px solid var(--hair);border-radius:var(--r-s);background:var(--panel-2);font-size:12.5px;color:var(--ink-2)}
#payModal .btn[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:900px){
  .paydh{grid-template-columns:22px 1fr auto;gap:10px 12px}
  .paysums{grid-column:2/-1;grid-row:2;gap:16px;flex-wrap:wrap}
  .paysum{text-align:left}
}
@media(max-width:760px){
  #payList .paytbl{padding:8px}
  #payList .paytbl table.cards,#payList .paytbl tbody{display:block;table-layout:auto}
  #payList .paytbl thead,#payList .paytbl colgroup{display:none}
  #payList .paytbl table.cards tr{display:grid;grid-template-columns:24px 1fr auto;gap:4px 10px;align-items:start;padding:10px 12px;margin:0 0 8px;border:1px solid var(--hair);border-radius:var(--r);background:rgba(255,255,255,.03)}
  #payList .paytbl table.cards td{display:block;padding:0;border:none;text-align:left;width:auto}
  #payList .paytbl td:nth-child(1){grid-column:1;grid-row:1/span 4}
  #payList .paytbl td:nth-child(2){grid-column:2;grid-row:1}
  #payList .paytbl td:nth-child(5){grid-column:3;grid-row:1;text-align:right;font-size:14px}
  #payList .paytbl td:nth-child(3){grid-column:2/-1;grid-row:2}
  #payList .paytbl td:nth-child(4){grid-column:2/-1;grid-row:3}
  #payList .paytbl td:nth-child(6){grid-column:2/-1;grid-row:4;margin-top:4px}
  #payList .paytbl td:nth-child(7){grid-column:2/-1;grid-row:5}
  #payList .paytbl td:nth-child(7):empty{display:none}
  #payList .paytbl td[data-l]::before{content:attr(data-l) " ";color:var(--muted);font-size:11px}
  #payList .paytbl td:nth-child(6) br{display:none}
  #payList .paytbl td:nth-child(6) .hint{margin-left:6px}
}
/* Händlerkonto (Buchungsjournal) */
.paysum b.neg{color:var(--pink)}
.paykonto{padding:6px 14px 14px;border-top:1px solid var(--hair)}
.paykh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 4px 4px}
.paykh h4{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.paykonto .paytbl table.cards{table-layout:auto}
.lgtbl td.lgpos{color:var(--mint);font-weight:600;white-space:nowrap}
.lgtbl td.lgneg{color:var(--ink);white-space:nowrap}
.lgtbl tr.lgaus td{opacity:.62}
@media(max-width:760px){
  .paykonto{padding:4px 8px 10px}
  .paykonto .paytbl table.cards tr{display:block}
  .paykonto .paytbl table.cards td{display:inline-block;border:none;padding:2px 8px 2px 0}
  .paykonto .paytbl thead{display:none}
}
/* Logo für Dokumente: Vorschau auf weißem Papier */
.prev.logodoc{width:220px;height:72px;background:#fff;border:1px solid var(--hair-2);border-radius:8px;padding:8px 12px}
.prev.logodoc img{max-width:100%;max-height:100%;object-fit:contain}
.prev.logodoc span{color:#8B8983;font-size:12px}
.hint.logowarn{color:var(--gold-2);margin:10px 0 0;max-width:620px}
.hint.logowarn a{color:var(--gold);text-decoration:underline}
/* Logo für die Anmeldung: Vorschau auf dunklem Grund */
.prev.logologin{width:220px;height:72px;background:#16181D;border:1px solid var(--hair-2);border-radius:8px;padding:8px 12px}
.prev.logologin img{max-width:100%;max-height:100%;object-fit:contain}
/* Speicheranzeige erst nach der Anmeldung */
body:not(.loggedin) #stickySave{display:none}
.prev.loginbild{width:220px;height:110px;padding:0;background:#16181D;border:1px solid var(--hair-2);border-radius:8px;overflow:hidden}
.prev.loginbild img{width:100%;height:100%;object-fit:cover}
/* Kennzahlen über der Angebotsliste: dunkle Kacheln statt Gold auf Gold */
.stat div{background:var(--panel);border:1px solid var(--hair);color:var(--ink);box-shadow:var(--sh-2)}
.stat div span{color:var(--muted);opacity:1}
.stat div b{color:#fff}
.stat div.gd b{color:var(--gold)}
.pwzeile{display:flex;gap:6px;align-items:center}
.pwzeile input{flex:1;min-width:0}
.pwzeile .btn{flex:0 0 auto;white-space:nowrap}