/* retailprotect Kundenportal – gleiche Farben und Maße wie die retailprotect-Oberfläche (hell und dunkel) */
:root{
  --bg:#f4f6f8; --surface:#ffffff; --sunken:#eef1f4; --line:#e2e6eb; --text:#16202a; --muted:#56616e;
  --accent:#0a64e0; --accent-ink:#ffffff; --accent-soft:#e8f1fe;
  --ok:#157a4f; --ok-soft:#e7f5ee; --warn:#8a5300; --warn-soft:#fff3dc; --crit:#b42318; --crit-soft:#fdecea; --unk:#6b7683; --unk-soft:#eef1f4;
  --focus:#0a64e0; --shadow:0 1px 2px rgba(16,32,48,.06);
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  --t-meta:.8125rem; --t-body:.9375rem; --t-h2:1.125rem; --t-h1:1.5rem;
  --r1:8px; --r2:12px; --hit:44px;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:Consolas,"Cascadia Mono","Courier New",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1318; --surface:#151c23; --sunken:#1b242d; --line:#27323d; --text:#e7ecf1; --muted:#9aa6b3;
  --accent:#5c9dff; --accent-ink:#06101f; --accent-soft:#16263b;
  --ok:#55c793; --ok-soft:#14291f; --warn:#f2b552; --warn-soft:#2c2213; --crit:#ff8478; --crit-soft:#331a18; --unk:#9aa6b3; --unk-soft:#1b242d;
  --focus:#8bb9ff; --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1318; --surface:#151c23; --sunken:#1b242d; --line:#27323d; --text:#e7ecf1; --muted:#9aa6b3;
  --accent:#5c9dff; --accent-ink:#06101f; --accent-soft:#16263b;
  --ok:#55c793; --ok-soft:#14291f; --warn:#f2b552; --warn-soft:#2c2213; --crit:#ff8478; --crit-soft:#331a18; --unk:#9aa6b3; --unk-soft:#1b242d;
  --focus:#8bb9ff; --shadow:none; color-scheme:dark}

*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--t-body);line-height:1.5}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
code,.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:var(--t-meta)}
.num{font-variant-numeric:tabular-nums}
h1{font-size:var(--t-h1);margin:0 0 var(--s3);line-height:1.25}
h2{font-size:var(--t-h2);margin:0 0 var(--s2)}
h3{font-size:var(--t-body);margin:var(--s3) 0 var(--s2)}
p{margin:0 0 var(--s2)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* Kopfzeile: Markenfarbe Navy wie in retailprotect */
.kopf{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;min-height:64px;padding:var(--s2) var(--s4);background:#0b1f35;color:#fff}
.marke{display:flex;align-items:center;gap:var(--s2);color:#fff;text-decoration:none;min-height:var(--hit)}
.markeName{font-family:"Segoe UI",Helvetica,Arial,sans-serif;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.markeName span{color:#2f8bff}
.markeZusatz{font-size:var(--t-meta);color:#c9d6e3;border-left:1px solid #2a4566;padding-left:var(--s2)}
#nav{display:flex;gap:var(--s1);flex:1;flex-wrap:wrap}
#nav a{color:#dbe6f1;text-decoration:none;padding:0 var(--s3);min-height:var(--hit);display:inline-flex;align-items:center;border-radius:var(--r1)}
#nav a:hover{background:#12304f}
#nav a[aria-current="page"]{background:#173a60;color:#fff;font-weight:600}
#kontoBox{margin-left:auto;display:flex;align-items:center;gap:var(--s2);font-size:var(--t-meta);color:#c9d6e3}
#kontoBox a{color:#fff}
#kontoBox .btn{min-height:36px;background:transparent;color:#fff;border-color:#2a4566}

main{max-width:1200px;margin:0 auto;padding:var(--s4)}
main:focus{outline:none}
body.einfach main{padding-top:var(--s5)}

.karte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);box-shadow:var(--shadow);margin-bottom:var(--s3)}
.schmal{max-width:460px;margin-left:auto;margin-right:auto}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)}
.marktKarte{display:flex;flex-direction:column;gap:var(--s2);margin:0}
.marktKarte h2{margin:0;overflow-wrap:anywhere}
.marktKarte .zeilen{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);font-size:var(--t-meta)}
.marktKarte .zeilen dt{color:var(--muted)}
.marktKarte .zeilen dd{margin:0;overflow-wrap:anywhere}
.marktKarte .aktionen{margin-top:auto;padding-top:var(--s2)}
.zeile{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.zeile .grow{flex:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--hit);padding:0 var(--s3);border-radius:var(--r1);
  border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--sunken)}
.btn.primaer{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primaer:hover{filter:brightness(1.08)}
.btn.klein{min-height:32px;padding:0 var(--s2);font-size:var(--t-meta)}
.btn.gefahr{color:var(--crit)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

label.f{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s3);font-weight:500}
label.f small{font-weight:400;color:var(--muted)}
input,select,textarea{min-height:var(--hit);padding:0 var(--s2);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface)}
textarea{padding:var(--s2);min-height:80px}
input.code{font-family:var(--mono);font-size:1.25rem;letter-spacing:.2em;max-width:200px}
select.klein{min-height:32px;font-size:var(--t-meta)}
.formZeile{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:flex-end}
.formZeile label.f{margin-bottom:0;flex:1;min-width:160px}

.pill{display:inline-flex;align-items:center;gap:var(--s1);padding:0 var(--s2);border-radius:999px;font-size:var(--t-meta);font-weight:600;line-height:1.7;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.crit{background:var(--crit-soft);color:var(--crit)}
.pill.neutral{background:var(--unk-soft);color:var(--unk)}

.hinweis{padding:var(--s2) var(--s3);border-radius:var(--r1);background:var(--accent-soft);margin-bottom:var(--s3)}
.hinweis.warn{background:var(--warn-soft);color:var(--warn)}
.hinweis.crit{background:var(--crit-soft);color:var(--crit)}
.fehler{color:var(--crit);min-height:1.5em;margin:0 0 var(--s2)}

table.tab{width:100%;border-collapse:collapse;font-size:var(--t-meta)}
.tabWrap{overflow-x:auto}
table.tab th,table.tab td{text-align:left;padding:var(--s2);border-bottom:1px solid var(--line);vertical-align:top}
table.tab th{color:var(--muted);font-weight:600;white-space:nowrap}
table.tab td.akt{white-space:nowrap;text-align:right}

.schluessel{font-family:var(--mono);font-size:1.1rem;letter-spacing:.08em;background:var(--sunken);padding:var(--s2) var(--s3);border-radius:var(--r1);
  overflow-wrap:anywhere;user-select:all}
ol.schritte{padding-left:1.25em;margin:0 0 var(--s3)}
ol.schritte li{margin-bottom:var(--s2)}

.abstandOben{margin-top:var(--s3)}
.abstandK{margin-top:var(--s2)}
.abstandUnten{margin-bottom:var(--s3)}
.links{margin-left:0}
.kontoZeilen{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s3);margin:0}
.kontoZeilen dt{color:var(--muted)}
.kontoZeilen dd{margin:0}

#dialog:empty{display:none}
#dialog{position:fixed;inset:0;background:rgba(5,12,20,.55);display:flex;align-items:center;justify-content:center;padding:var(--s3);z-index:20}
#dialog .karte{max-width:560px;width:100%;max-height:90vh;overflow:auto;margin:0}
.knoepfe{display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--s3)}

#meldung{position:fixed;bottom:var(--s4);left:50%;transform:translateX(-50%);z-index:30}
#meldung:empty{display:none}
#meldung div{background:#0b1f35;color:#fff;padding:var(--s2) var(--s3);border-radius:var(--r1);box-shadow:0 4px 12px rgba(0,0,0,.25)}

@media (max-width:640px){
  .kopf{padding:var(--s2) var(--s3)}
  main{padding:var(--s3)}
  .karte{padding:var(--s3)}
  #kontoBox{margin-left:0;width:100%}
}