/* Einkaufs-Radar 2.0 – TCG-Direkt-Gewand (Navy, Ultramarin, Volt, Archivo) mit Cockpit-Dichte und -Lampen. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:italic;font-weight:700 900;font-stretch:100% 125%;font-display:swap;src:url(fonts/archivo-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:400 600;font-stretch:75% 112%;font-display:swap;src:url(fonts/martian-mono-latin.woff2) format("woff2")}

:root{
  --navy:#0B1230; --navy-2:#141C44; --night:#04050F;
  --ultra:#1B2BC9; --ultra-deep:#101C8F; --volt:#FFD21A; --volt-press:#F0C000; --volt-ink:#0F1222;
  --grund:#ECEDF0; --karte:#FFFFFF; --karte-2:#F4F5F7; --mulde:#E2E4E9;
  --linie:#D5D8DF; --linie-2:#C2C5CD;
  --ink:#0F1222; --ink-2:#3C4153; --ink-3:#5B6072;
  --link:var(--ultra); --wahl:var(--ultra); --wahl-ink:#fff;
  --an:#16924F; --an-hof:#16924F33; --knapp:#D9A400; --minus:#B3331A; --fehler:#C2321F;
  --t-water:#1A6CC8; --t-fire:#C8361F; --t-grass:#177A42; --t-psy:#8A3BCF; --t-bolt:#C99A00; --t-fight:#B4572A;
  --schatten:0 1px 2px #0f122214,0 8px 24px -16px #0f122240;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans CJK JP","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rand:clamp(16px,2.4vw,36px); --max:1520px; --r:12px; --r-s:8px;
  --kurve:cubic-bezier(.16,1,.3,1); --t:180ms;
  --kopf-h:60px; --unten-h:0px;
  --blatt:#FFFFFF; --blatt-ink:#1B1E2B; --blatt-ink-2:#474C5C; --blatt-linie:#E3E4E8; --blatt-link:#1B2BC9; --blatt-mulde:#0F12220D; --blatt-mulde-2:#0F12221A; --an-ink:#0B6634; --wahl-ton:#E7E9FB;
  --rein:.42s; --tritt:120ms;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --grund:#060A1C; --karte:#0D1433; --karte-2:#121A3E; --mulde:#0A1029;
  --linie:#1E2752; --linie-2:#2A3463;
  --ink:#ECEEF7; --ink-2:#B9BED6; --ink-3:#8E95B5;
  --link:#9AA8FF; --wahl:#3F4FE8; --wahl-ink:#fff;
  --an:#38D47C; --an-hof:#38D47C40; --knapp:#FFD21A; --minus:#FF8A6B; --fehler:#FF7A66;
  --t-water:#5AA2F0; --t-fire:#F0715A; --t-grass:#4CC67F; --t-psy:#B784F0; --t-bolt:#FFD21A; --t-fight:#E0915E;
  --schatten:0 1px 0 #ffffff0a inset,0 12px 32px -20px #000;
  --blatt:#ECEAE4; --blatt-linie:#D6D3CA; --an-ink:#6BE3A0; --wahl-ton:#1A2456;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:#060A1C; --karte:#0D1433; --karte-2:#121A3E; --mulde:#0A1029;
    --linie:#1E2752; --linie-2:#2A3463;
    --ink:#ECEEF7; --ink-2:#B9BED6; --ink-3:#8E95B5;
    --link:#9AA8FF; --wahl:#3F4FE8; --wahl-ink:#fff;
    --an:#38D47C; --an-hof:#38D47C40; --knapp:#FFD21A; --minus:#FF8A6B; --fehler:#FF7A66;
    --t-water:#5AA2F0; --t-fire:#F0715A; --t-grass:#4CC67F; --t-psy:#B784F0; --t-bolt:#FFD21A; --t-fight:#E0915E;
    --schatten:0 1px 0 #ffffff0a inset,0 12px 32px -20px #000;
    --blatt:#ECEAE4; --blatt-linie:#D6D3CA; --an-ink:#6BE3A0; --wahl-ton:#1A2456;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 16px)}
body{margin:0;background:var(--grund);color:var(--ink);font:400 15px/1.45 var(--font);font-variant-numeric:tabular-nums;min-height:100dvh;padding-bottom:var(--unten-h);overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,p,dl,dd,figure{margin:0}
:focus-visible{outline:3px solid var(--wahl);outline-offset:2px;border-radius:4px}
.kopf :focus-visible,.unten :focus-visible{outline-color:var(--volt)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--volt);color:var(--volt-ink);padding:12px 16px;border-radius:var(--r-s);font-weight:700}
.skip:focus{top:8px}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--mono);font-size:.82em;letter-spacing:-.01em}
.disp{font-style:italic;font-weight:900;font-stretch:116%;text-transform:uppercase;letter-spacing:-.012em;line-height:.92}
.lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.leise{color:var(--ink-3)}
.zahl{font-weight:700;white-space:nowrap}

/* ---------- Kopf (Navy-Rahmen in beiden Themen) ---------- */
.kopf{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff;box-shadow:0 1px 0 #ffffff14,0 10px 24px -18px #000c}
.kopf-zeile{display:flex;align-items:center;gap:12px;height:var(--kopf-h);max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.marke{display:inline-flex;align-items:center;gap:9px;color:#fff;font:italic 900 19px/1 var(--font);font-stretch:116%;letter-spacing:-.012em;white-space:nowrap;min-height:44px;margin-right:auto;text-decoration:none!important}
.marke b{font-weight:900;color:var(--volt);margin-left:.18em}
.marke .radar{width:28px;height:28px;stroke-width:1.7}
.marke .radar .fill,.radar .fill{fill:var(--volt);stroke:none}
.kopf-suche{display:none}
.lauf{display:flex;align-items:center;gap:8px;font-size:13px;color:#C9CEE6;white-space:nowrap}
.lauf .teil,.lauf .lang{display:none}
.lauf b{color:#fff;font-weight:700}
.knopf-icon{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer;flex:none}
.knopf-icon:hover{background:#ffffff1a}
.reiter{position:fixed;inset:auto 0 0 0;z-index:41;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--navy);border-top:1px solid #ffffff1a;padding-bottom:env(safe-area-inset-bottom)}
.reiter a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:58px;color:#AEB4D2;font-size:10.5px;font-weight:600;white-space:nowrap;text-decoration:none;transition:color var(--t)}
.reiter a>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.reiter a:active .ico{transform:scale(.88)}
.reiter a .ico{transition:transform var(--tritt) var(--kurve)}
.reiter a .ico{width:22px;height:22px}
.reiter a[aria-current="page"]{color:var(--volt)}
.reiter-strich{position:absolute;top:-1px;left:0;width:100px;height:3px;border-radius:0 0 3px 3px;background:var(--volt);transform-origin:0 0;opacity:0;pointer-events:none;transition:transform .45s var(--kurve),opacity .2s}
.reiter-strich.still{transition:none}
.reiter em{position:absolute;top:6px;left:calc(50% + 1px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--volt);color:var(--volt-ink);font:800 10.5px/18px var(--font);font-style:normal;text-align:center}
.reiter em:empty{display:none}
.reiter em.null{background:#2A3463;color:#C9CEE6}
:root{--unten-h:calc(59px + env(safe-area-inset-bottom));--kopf-ges:var(--kopf-h)}

@media (min-width:900px){
  :root{--kopf-h:64px;--unten-h:0px;--kopf-ges:110px}
  .marke{font-size:24px;margin-right:0}
  .marke .radar{width:32px;height:32px}
  .kopf-suche{display:flex;position:relative;flex:1;max-width:520px;margin-inline:auto}
  .kopf-suche input{width:100%;height:42px;border-radius:999px;border:1.5px solid #ffffff2e;background:#ffffff10;color:#fff;padding:0 18px 0 44px;font-size:14.5px}
  .kopf-suche input::placeholder{color:#AEB4D2;opacity:1}
  .kopf-suche input:focus{outline:3px solid var(--volt);outline-offset:1px;border-color:transparent}
  .kopf-suche .ico{position:absolute;left:15px;top:11px;color:#AEB4D2;pointer-events:none}
  .lauf .teil,.lauf .lang{display:inline}
  .reiter{position:relative;display:flex;gap:4px;max-width:var(--max);margin-inline:auto;padding:0 var(--rand);border:0;background:none}
  .reiter a{flex-direction:row;gap:8px;min-height:46px;padding:0 14px;font-size:14px;font-weight:600;color:#C9CEE6}
  .reiter a .ico{width:18px;height:18px}
  .reiter a:hover{color:#fff;text-decoration:none}
  .reiter a[aria-current="page"]{color:#fff}
  .reiter-strich{top:auto;bottom:0;border-radius:3px 3px 0 0}
  .reiter em{position:static;height:20px;line-height:20px;font-size:11px}
  .reiter em.null{background:#ffffff1f}
}

/* ---------- Lampen (Cockpit-Grammatik) ---------- */
.lampe{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--an);box-shadow:0 0 0 3px var(--an-hof)}
.lampe.knapp{background:var(--knapp);box-shadow:0 0 0 3px color-mix(in srgb,var(--knapp) 25%,transparent)}
.lampe.aus{background:transparent;box-shadow:inset 0 0 0 2px var(--linie-2)}
.lampe.fehler{background:var(--fehler);box-shadow:0 0 0 3px color-mix(in srgb,var(--fehler) 22%,transparent)}
.lampe.nie{background:var(--linie-2);box-shadow:none}
.lampe.alt{opacity:.45}
.kopf .lampe.aus{box-shadow:inset 0 0 0 2px #5A6390}
@media (prefers-reduced-motion:no-preference){
  .lampe.puls{animation:puls 2.4s var(--kurve) infinite}
  @keyframes puls{0%{box-shadow:0 0 0 0 var(--an-hof),0 0 0 3px var(--an-hof)}70%{box-shadow:0 0 0 9px transparent,0 0 0 3px var(--an-hof)}100%{box-shadow:0 0 0 0 transparent,0 0 0 3px var(--an-hof)}}
}

/* ---------- Seite ---------- */
main{max-width:var(--max);margin-inline:auto;padding:20px var(--rand) 48px;outline:none}
.seite-kopf{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.seite-kopf h1{font-size:clamp(26px,3.4vw,38px)}
.seite-kopf h1 em{font-style:inherit;color:var(--ultra)}
:root[data-theme="dark"] .seite-kopf h1 em{color:var(--volt)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seite-kopf h1 em{color:var(--volt)}}
.seite-kopf .anzahl{font-size:15px;color:var(--ink-3);font-weight:600;padding-bottom:3px}
.seite-kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zurueck{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--ink-2)}
.zurueck .ico{width:18px;height:18px}

/* Filterleiste */
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.filter .trenn{width:1px;height:24px;background:var(--linie-2);margin-inline:4px}
.chip,.wahl select,.feld,.knopf{min-height:38px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;border:1px solid var(--linie-2);background:var(--karte);color:var(--ink-2);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--t),color var(--t),border-color var(--t),transform var(--tritt) var(--kurve)}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip:active,.seg button:active{transform:scale(.96)}
.seg button{transition:background var(--t),color var(--t),box-shadow var(--t),transform var(--tritt) var(--kurve)}
.chip[aria-pressed="true"]{background:var(--wahl);border-color:var(--wahl);color:var(--wahl-ink)}
.chip small{font-weight:600;opacity:.75;font-size:12px}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--mulde);gap:2px}
.seg button{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ink-2);font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--karte);color:var(--ink);box-shadow:0 1px 2px #0f122226}
.seg button .ico{width:16px;height:16px}
.seg button small{font-weight:700;color:var(--ink-3)}
.wahl{position:relative;display:inline-flex}
.wahl select{appearance:none;-webkit-appearance:none;border:1px solid var(--linie-2);border-radius:999px;background:var(--karte);padding:0 34px 0 14px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;max-width:220px}
.wahl::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.wahl.aktiv select{border-color:var(--wahl);color:var(--ink);box-shadow:inset 0 0 0 1px var(--wahl)}
.feld{width:100%;border:1px solid var(--linie-2);border-radius:10px;background:var(--karte);padding:0 14px;font-size:15px}
.feld:focus{outline:3px solid var(--wahl);outline-offset:0;border-color:transparent}
.suche{position:relative;flex:1 1 280px;max-width:460px}
.suche .feld{padding-left:42px;min-height:42px;border-radius:999px}
.suche .ico{position:absolute;left:14px;top:11px;color:var(--ink-3);pointer-events:none}
@media (max-width:759px){
  .filter.wisch{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--rand) * -1);padding:2px var(--rand) 6px;scrollbar-width:none;scroll-padding-inline:var(--rand)}
  .filter.wisch::-webkit-scrollbar{display:none}
  .filter.wisch>*{flex:none}
  .chip,.wahl select,.seg button{min-height:44px}
  .suche{flex-basis:100%;max-width:none}
}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border-radius:999px;border:1px solid transparent;background:var(--volt);color:var(--volt-ink);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none!important;transition:background var(--t),border-color var(--t),transform var(--tritt) var(--kurve)}
.knopf:hover{background:var(--volt-press)}
.knopf:active{transform:scale(.97)}
.knopf .ico{width:17px;height:17px}
.knopf.zweit{background:var(--karte);border-color:var(--linie-2);color:var(--ink)}
.knopf.zweit:hover{border-color:var(--ink-3)}
.knopf.blau{background:var(--wahl);color:#fff}
.knopf.blau:hover{background:var(--ultra-deep)}
.knopf.still{background:none;color:var(--ink-2)}
.knopf.still:hover{background:var(--mulde)}
.knopf:disabled,.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.knopf.laedt{opacity:.7;pointer-events:none}
@media (max-width:759px){.knopf{min-height:44px}}

/* Tafel + Zeilen */
.tafel{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten);overflow:clip}
.zeile{display:grid;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--linie);color:inherit;text-decoration:none!important;transition:background var(--t)}
.zeile:first-child{border-top:0}
a.zeile:hover,.zeile.klick:hover{background:var(--karte-2)}
.kopfzeile{padding-block:9px;background:var(--karte-2);position:sticky;top:var(--kopf-ges);z-index:2}
.kopfzeile>*{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.kopfzeile button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.kopfzeile button[aria-sort]{color:var(--ink)}
.r{text-align:right;justify-self:end}
.bild{width:56px;height:56px;border-radius:var(--r-s);background:#fff;border:1px solid var(--linie);object-fit:contain;padding:3px}
.bild.leer{background:var(--mulde)}
.name{font-weight:650;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.name-zeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.sp{display:inline-grid;place-items:center;height:18px;min-width:26px;padding:0 5px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.04em;background:var(--navy);color:#fff}
.sp-jp{background:#C8361F}.sp-cn,.sp-tw{background:#B4572A}.sp-en{background:#1A6CC8}.sp-kr{background:#8A3BCF}.sp-de{background:var(--navy)}
:root[data-theme="dark"] .sp-de{background:#2A3463}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp-de{background:#2A3463}}
.marke-b2b{display:inline-grid;place-items:center;height:18px;padding:0 6px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.05em;background:var(--volt);color:var(--volt-ink)}
.land{display:inline-grid;place-items:center;height:18px;min-width:24px;padding:0 4px;border-radius:5px;font-size:10.5px;font-weight:700;border:1px solid var(--linie-2);color:var(--ink-2)}
.land.noneu{border-color:var(--minus);color:var(--minus)}
.haendler{display:flex;flex-direction:column;gap:3px;min-width:0}
.haendler b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.haendler .unter{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.wert{font-size:16px;font-weight:700;white-space:nowrap}
.wert small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-top:1px}
.pille{display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;background:var(--mulde);color:var(--ink-2)}
.pille.m3{background:var(--volt);color:var(--volt-ink)}
.pille.m2{background:color-mix(in srgb,var(--volt) 30%,var(--karte));color:var(--ink);box-shadow:inset 0 0 0 1px var(--volt)}
.pille.m0{background:color-mix(in srgb,var(--minus) 12%,var(--karte));color:var(--minus)}
.minus{color:var(--minus)}
.score{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;font-weight:800;font-size:14px;background:var(--mulde);color:var(--ink-2)}
.score.chance{background:var(--volt);color:var(--volt-ink)}
.meter{display:flex;align-items:center;gap:8px}
.meter i{display:block;width:42px;height:4px;border-radius:2px;background:var(--mulde);overflow:hidden}
.meter i::before{content:"";display:block;height:100%;width:var(--w);background:var(--ultra);border-radius:2px}
:root[data-theme="dark"] .meter i::before{background:#7F8CFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .meter i::before{background:#7F8CFF}}
.bestand{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.m-lbl{display:none}

/* Kaufchancen */
.ch{grid-template-columns:36px 56px minmax(200px,2.3fr) minmax(170px,1.4fr) 100px 100px 128px 92px 76px 128px}
.ch.alt{opacity:.62}
@media (max-width:1279px){
  .ch{grid-template-columns:36px 56px minmax(180px,2fr) minmax(150px,1.3fr) 92px 92px 118px 112px}
  .ch .c-beg,.ch .c-seit{display:none}
}
@media (max-width:759px){
  .tafel.karten{background:none;border:0;box-shadow:none;overflow:visible;display:grid;gap:10px}
  .tafel.karten .kopfzeile{display:none}
  .ch{grid-template-columns:repeat(6,1fr);grid-template-areas:"bild prod prod prod prod score" "bild hd hd hd hd hd" "ein ein vk vk marge marge" "beg beg seit seit seit seit" "knopf knopf knopf knopf knopf knopf";gap:10px 10px;padding:14px;border:1px solid var(--linie);border-radius:var(--r);background:var(--karte);box-shadow:var(--schatten)}
  .ch .c-beg,.ch .c-seit{display:block}
  .ch .c-score{grid-area:score;justify-self:end;align-self:start}
  .ch .c-bild{grid-area:bild;align-self:start}
  .ch .c-prod{grid-area:prod}
  .ch .c-hd{grid-area:hd}
  .ch .c-ein{grid-area:ein}.ch .c-vk{grid-area:vk}.ch .c-marge{grid-area:marge}
  .ch .c-ein,.ch .c-vk,.ch .c-marge{justify-self:stretch;text-align:left;padding:8px 10px;border-radius:var(--r-s);background:var(--karte-2)}
  .ch .c-marge{background:color-mix(in srgb,var(--volt) 14%,var(--karte))}
  .ch .c-beg{grid-area:beg}.ch .c-seit{grid-area:seit;justify-self:start;align-self:center;font-size:12.5px}
  .ch .c-knopf{grid-area:knopf;justify-self:stretch}
  .ch .c-knopf .knopf{width:100%}
  .ch .c-beg{align-self:center}
  .m-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
  .ch .wert{font-size:17px}
  .ch .c-marge .pille{margin-top:4px}
}
.leer-zustand{padding:40px 24px;text-align:center;display:grid;gap:14px;justify-items:center;color:var(--ink-2)}
.leer-zustand h2{font-size:22px}
.leer-zustand p{max-width:52ch;color:var(--ink-3)}
.mehr{display:flex;justify-content:center;padding:16px}

/* Katalog */
.kt{grid-template-columns:56px minmax(240px,3fr) 96px 96px 120px 150px 110px}
@media (max-width:1099px){.kt{grid-template-columns:56px minmax(200px,3fr) 92px 112px 140px}.kt .c-uvp,.kt .c-markt{display:none}}
@media (max-width:759px){
  .kt{grid-template-columns:56px 1fr auto;grid-template-areas:"bild prod preis" "bild best preis";gap:4px 12px;padding:12px 14px}
  .kt .c-bild{grid-area:bild}.kt .c-prod{grid-area:prod}.kt .c-preis{grid-area:preis;align-self:center}.kt .c-best{grid-area:best}.kt .c-beg{display:none}
  .kt.kopfzeile{display:none}
}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
@media (max-width:759px){.kacheln{grid-template-columns:1fr 1fr;gap:10px}}
.kachel{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;color:inherit;text-decoration:none!important;box-shadow:var(--schatten);transition:transform var(--t) var(--kurve),box-shadow var(--t)}
.kachel:hover{transform:translateY(-3px);box-shadow:0 2px 4px #0f12221a,0 18px 36px -20px #0f122266}
.kachel:active{transform:translateY(-1px) scale(.985)}
.kachel .foto img{transition:transform .5s var(--kurve)}
.kachel:hover .foto img{transform:scale(1.04)}
.kachel .foto{position:relative;aspect-ratio:1;min-height:0;overflow:hidden;background:#fff;border-bottom:1px solid var(--linie)}
.kachel .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px}
.kachel .foto .sp{position:absolute;left:10px;top:10px}
.kachel .foto .best-ecke{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:#ffffffe6;color:#0F1222;font-size:12px;font-weight:700;box-shadow:0 1px 2px #0002}
.kachel .text{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.kachel .name{font-size:14px}
.kachel .typ{font-size:12px;color:var(--ink-3)}
.kachel .fuss{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:6px}
.kachel .preis{font-size:19px;font-weight:800}
.kachel .preis small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.kachel .uvp{font-size:12px;color:var(--ink-3);text-align:right}

/* Produkt-Detail */
.detail-kopf{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:28px;align-items:start;margin-bottom:24px}
.detail-foto{background:#fff;border:1px solid var(--linie);border-radius:16px;aspect-ratio:1;display:grid;place-items:center;box-shadow:var(--schatten)}
.detail-foto img{width:100%;height:100%;object-fit:contain;padding:22px}
.detail-titel{display:grid;gap:10px}
.detail-titel h1{font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.detail-titel .orig{color:var(--ink-3);font-size:13.5px}
.mess{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;margin-top:6px}
.mess>div{padding:12px 16px;border-left:1px solid var(--linie);border-top:1px solid var(--linie);margin:-1px 0 0 -1px}
.mess dt{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.mess dd{font-size:22px;font-weight:800;margin-top:2px;white-space:nowrap}
.mess dd small{font-size:12px;font-weight:600;color:var(--ink-3);margin-left:4px}
.mess .haupt dd{color:var(--ink)}
.mess .haupt{background:color-mix(in srgb,var(--volt) 16%,var(--karte))}
.aktionen{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
@media (max-width:899px){.detail-kopf{grid-template-columns:minmax(0,1fr);gap:16px}.detail-foto{max-width:300px;width:100%;justify-self:center}}
@media (max-width:759px){.mess{grid-template-columns:repeat(2,minmax(0,1fr))}.mess dd{font-size:19px}}
.abschnitt{margin-top:28px}
.abschnitt>h2{display:flex;align-items:baseline;gap:10px;font-size:20px;margin-bottom:12px}
.abschnitt>h2 small{font:600 13.5px var(--font);color:var(--ink-3);text-transform:none;letter-spacing:0}
.ag{grid-template-columns:20px minmax(180px,1.6fr) 110px 86px 92px 104px 120px 100px 84px 132px}
.ag.aus-v{color:var(--ink-3)}
.ag.aus-v .wert{color:var(--ink-3)}
@media (max-width:1279px){.ag{grid-template-columns:20px minmax(160px,1.6fr) 104px 104px 116px 96px 132px}.ag .c-vers,.ag .c-zoll,.ag .c-stand{display:none}}
@media (max-width:759px){
  .ag{grid-template-columns:20px 1fr auto;grid-template-areas:"lampe hd ein" "lampe preis marge" "knopf knopf knopf";gap:6px 10px;padding:14px}
  .ag .c-lampe{grid-area:lampe;align-self:start;margin-top:5px}
  .ag .c-hd{grid-area:hd}.ag .c-preis{grid-area:preis;font-size:13px;color:var(--ink-3)}.ag .c-ein{grid-area:ein}.ag .c-marge{grid-area:marge}
  .ag .c-best{display:none}
  .ag .c-knopf{grid-area:knopf}.ag .c-knopf .knopf{width:100%}
}
.rechnung{font-size:12px;color:var(--ink-3);cursor:help;border-bottom:1px dotted var(--ink-3)}
.verlauf{padding:18px 18px 12px}
.verlauf svg{width:100%;height:220px;overflow:visible}
.verlauf .gitter line{stroke:var(--linie);stroke-width:1;vector-effect:non-scaling-stroke}
.verlauf .linie{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.verlauf .achse{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:6px}
.verlauf .legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:13px;color:var(--ink-2)}
.verlauf .legende span{display:inline-flex;align-items:center;gap:7px}
.verlauf .legende i{width:14px;height:3px;border-radius:2px;background:var(--f)}
.verlauf .tief{fill:var(--volt);stroke:var(--navy);stroke-width:2}
.verlauf-flaeche{position:relative}
.verlauf-flaeche .y{position:absolute;left:0;font-size:11px;color:var(--ink-3);transform:translateY(-50%);background:var(--karte);padding-right:6px}
.verlauf-flaeche .tief-text{position:absolute;font-size:12px;font-weight:800;background:var(--volt);color:var(--volt-ink);padding:2px 7px;border-radius:999px;transform:translate(-50%,-150%);white-space:nowrap}

/* Händler */
.fehlertext{font-size:12.5px;color:var(--fehler);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plattform{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.plattform.unbekannt{color:var(--ink-3);font-weight:400}

/* Formulare (B2B, Händler hinzufügen) */
.raster-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.raster-2>*,.feld-gruppe{min-width:0}
select.feld{width:100%;text-overflow:ellipsis}
@media (max-width:1099px){.raster-2{grid-template-columns:1fr}}
.feldsatz{padding:18px;display:grid;gap:14px}
.feldsatz>h2{font-size:18px;display:flex;align-items:center;gap:10px}
.feldsatz>h2 .ico{width:20px;height:20px;color:var(--ink-3)}
.feld-gruppe{display:grid;gap:6px}
.feld-gruppe>span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.feld-gruppe .feld,.feld-gruppe select.feld{min-height:44px}
select.feld{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:519px){.feld-reihe{grid-template-columns:1fr}}
.feld-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.schloss{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.schloss .ico{width:15px;height:15px}
.hinweis-zeile{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-s);font-size:13.5px;background:var(--mulde);color:var(--ink-2)}
.hinweis-zeile.fehler{background:color-mix(in srgb,var(--fehler) 12%,var(--karte));color:var(--fehler)}
.hinweis-zeile.gut{background:color-mix(in srgb,var(--an) 12%,var(--karte));color:var(--ink)}
.datei{position:relative;display:grid;place-items:center;gap:6px;min-height:96px;border:1.5px dashed var(--linie-2);border-radius:var(--r);background:var(--karte-2);color:var(--ink-2);font-weight:600;text-align:center;padding:14px;cursor:pointer;transition:border-color var(--t),background var(--t)}
.datei:hover,.datei.drueber{border-color:var(--wahl);background:color-mix(in srgb,var(--wahl) 6%,var(--karte))}
.datei input{position:absolute;inset:0;opacity:0;cursor:pointer}
.datei small{font-weight:400;color:var(--ink-3)}
.vorschau{overflow:auto;border:1px solid var(--linie);border-radius:var(--r-s);max-height:340px}
.vorschau table{border-collapse:collapse;font-size:12.5px;min-width:100%}
.vorschau th,.vorschau td{padding:6px 10px;border-bottom:1px solid var(--linie);white-space:nowrap;text-align:left}
.vorschau thead th{position:sticky;top:0;background:var(--karte-2);vertical-align:top}
.vorschau thead select{min-height:34px;border-radius:8px;border:1px solid var(--linie-2);background:var(--karte);font-size:12.5px;font-weight:600;padding:0 6px;margin-top:4px;max-width:150px}
.vorschau thead select.gesetzt{border-color:var(--wahl);box-shadow:inset 0 0 0 1px var(--wahl)}
.kt-b2b{grid-template-columns:20px minmax(180px,2fr) 120px 150px 130px 80px 110px 220px}
@media (max-width:899px){
  .kt-b2b{grid-template-columns:20px 1fr;grid-template-areas:"lampe name" "lampe info" "lampe akt";gap:6px 10px}
  .kt-b2b .c-lampe{grid-area:lampe;align-self:start;margin-top:5px}.kt-b2b .c-name{grid-area:name}
  .kt-b2b .c-art,.kt-b2b .c-login,.kt-b2b .c-art2,.kt-b2b .c-liste{display:none}
  .kt-b2b .c-info{grid-area:info;display:block!important;font-size:12.5px;color:var(--ink-3)}
  .kt-b2b .c-akt{grid-area:akt;justify-self:start}
  .kt-b2b.kopfzeile{display:none}
}
.kt-b2b .c-info{display:none}

/* Prüfliste */
.pruef-liste{display:grid;gap:12px}
.pruef{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 200px;align-items:center;gap:16px;padding:14px 16px;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten);transition:opacity .26s var(--kurve),transform .26s var(--kurve)}
.pruef.weg{opacity:0;transform:translateX(32px)}
.pruef.weg.ign{transform:translateX(-24px)}
.pruef .seite{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;min-width:0}
.pruef .seite .titel{font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pruef .seite .unter a{display:inline-flex;align-items:center;gap:3px}
.pruef .seite .unter a .ico{width:14px;height:14px}
.pruef .seite .unter{font-size:12.5px;color:var(--ink-3);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:3px}
.pruef .mitte{display:grid;justify-items:center;gap:4px;color:var(--ink-3)}
.pruef .mitte b{font-size:15px;color:var(--ink)}
.pruef .mitte .ico{width:22px;height:22px}
.pruef .knoepfe{display:grid;gap:6px}
.pruef .kein{color:var(--ink-3);font-style:italic}
.pruef .anders{grid-column:1/-1;display:grid;gap:8px;border-top:1px solid var(--linie);padding-top:12px}
.treffer{display:grid;gap:4px;max-height:280px;overflow:auto}
.treffer button{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;text-align:left;padding:6px;border:0;border-radius:var(--r-s);background:none;cursor:pointer;min-height:44px}
.treffer button:hover,.treffer button:focus-visible{background:var(--karte-2)}
.treffer img{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:6px;border:1px solid var(--linie)}
@media (max-width:899px){
  .pruef{grid-template-columns:minmax(0,1fr);gap:12px}
  .pruef .mitte{grid-auto-flow:column;justify-content:start;gap:8px}
  .pruef .mitte .ico{transform:rotate(90deg)}
  .pruef .knoepfe{grid-template-columns:1fr 1fr}
  .pruef .knoepfe [data-akt=passt]{grid-column:1/-1}
}

/* Laden, Fehler, Toast */
.skelett{display:grid;gap:10px}
.skelett i{display:block;height:68px;border-radius:var(--r);background:linear-gradient(90deg,var(--karte) 0%,var(--karte-2) 50%,var(--karte) 100%);background-size:200% 100%;border:1px solid var(--linie)}
@media (prefers-reduced-motion:no-preference){.skelett i{animation:schimmer 1.4s linear infinite}@keyframes schimmer{to{background-position:-200% 0}}}
.toast{position:fixed;left:50%;bottom:calc(var(--unten-h) + 16px);z-index:60;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--navy);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:0 12px 32px -12px #000a;transition:opacity .2s,transform .3s var(--kurve);max-width:calc(100vw - 32px)}
.toast.da{opacity:1;transform:translate(-50%,0)}
.toast.fehler{background:var(--fehler)}
@media (max-width:429px){.marke{font-size:16.5px;gap:7px}.marke .radar{width:24px;height:24px}.kopf-zeile{gap:6px}.lauf>span:last-child{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important}}

/* Hinweis an Angeboten (Grenzfall, gesperrt, Fake-Verdacht) */
.warn-zeile{margin-top:4px;font-size:12px;font-weight:700;color:var(--minus)}
@media (max-width:479px){
  .seite-kopf .rechts{width:100%}
  .seg{display:flex;width:100%}
  .seg button{flex:1 1 auto;justify-content:center;padding:0 8px;font-size:13px}
  .seg button .ico,.seg .lang{display:none}
}

/* Anmelden und Einrichten */
.abgemeldet .reiter,.abgemeldet .kopf-suche,.abgemeldet .lauf,.abgemeldet #abmelden{display:none!important}
.zugang{max-width:420px;margin:clamp(24px,6vh,64px) auto;display:grid;gap:14px;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten);padding:clamp(20px,4vw,32px)}
.zugang h1{font-size:clamp(28px,6vw,38px);margin:0 0 4px}
.zugang label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.zugang .feld{min-height:46px;font-size:16px}
.zugang .knopf{min-height:48px;justify-content:center}
.zugang-fehler{min-height:1.2em;margin:0;color:var(--fehler);font-size:14px;font-weight:600}
.zugang-fehler:empty{display:none}
.schritte{margin:0;padding-left:20px;display:grid;gap:16px}
.schritte li{display:grid;gap:10px}
.qr{width:200px;max-width:100%;background:#fff;border-radius:10px;padding:6px;border:1px solid var(--linie)}
.qr svg{display:block;width:100%;height:auto}
.geheim{display:block;font-size:15px;letter-spacing:.06em;word-break:break-all;user-select:all}
.zugang details summary{cursor:pointer;color:var(--link);font-size:14px}

/* Postfach: Liste wie ein Mailprogramm, ab 1000 px Liste links und Mail rechts; Mail auf hellem Lesegrund */
.post-split{display:block}
.post-liste{display:grid;align-content:start}
.post{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:10px;row-gap:2px;padding:12px 16px 12px 12px;border-bottom:1px solid var(--linie);color:inherit;text-decoration:none!important;transition:background var(--t)}
.post:last-child{border-bottom:0}
.post>*{grid-column:2}
.post-punkt{grid-column:1;grid-row:1;align-self:center;width:8px;height:8px;border-radius:50%}
.post.neu .post-punkt{background:var(--link)}
.post:hover{background:var(--karte-2)}
.post:active{background:var(--mulde)}
.post[aria-current]{background:var(--wahl-ton)}
.post-kopf{display:flex;align-items:baseline;gap:10px;min-width:0}
.post-von{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post.neu .post-von{font-weight:800}
.post-zeit{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.post.neu .post-zeit{color:var(--ink);font-weight:700}
.post-betreff{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post.neu .post-betreff{font-weight:700}
.post-anriss{font-size:13px;line-height:1.4;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-marken{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
.post-h{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;color:var(--ink-2);min-width:0;max-width:100%}
.post-h .ico{width:14px;height:14px;color:var(--ink-3)}
.post-marken .pille{height:20px;font-size:11.5px;font-weight:750}
.pille.b2b-registrieren,.pille.b2b-registriert,.pille.b2b-konto{background:var(--volt);color:var(--volt-ink)}
.pille.b2b-freigeschaltet{display:inline-flex;gap:4px;background:color-mix(in srgb,var(--an) 16%,var(--karte));color:var(--an-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--an) 45%,transparent)}
.pille.b2b-freigeschaltet .ico{width:13px;height:13px;stroke-width:2.6}
.pille.b2b-antwort{background:color-mix(in srgb,var(--link) 14%,var(--karte));color:var(--link)}
.pille.b2b-absage,.pille.b2b-bounce{background:color-mix(in srgb,var(--minus) 12%,var(--karte));color:var(--minus)}
.post-nichts{display:grid;justify-items:center;gap:10px;padding:96px 24px;color:var(--ink-3);font-weight:600}
.post-nichts .ico{width:40px;height:40px;stroke-width:1.4;opacity:.6}
.post-split.offen .post-liste,.post-split:not(.offen) .post-lesen{display:none}
@media (max-width:999px){main:has(.post-split.offen) .post-kopfbereich{display:none}}
@media (min-width:1000px){
  .post-split{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:20px;align-items:start}
  .post-split.offen .post-liste,.post-split:not(.offen) .post-lesen{display:grid}
  .post-liste{position:sticky;top:calc(var(--kopf-ges) + 12px);max-height:calc(100dvh - var(--kopf-ges) - 24px);overflow:auto;overscroll-behavior:contain;view-transition-name:post-liste}
  .post-lesen{view-transition-name:post-lesen;min-width:0}
  .post-lesen>.post-nichts{background:var(--karte);border:1px dashed var(--linie-2);border-radius:var(--r)}
  .mail-leiste .zurueck{visibility:hidden}
}

.mail{display:grid;gap:16px;min-width:0}
.mail-leiste{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.zurueck{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:600;color:var(--ink-2)}
.zurueck .ico{width:18px;height:18px}
.mail-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mail-knoepfe .knopf{min-height:42px}
.mail-kopf{display:grid;gap:12px}
.mail-kopf h1{font-size:clamp(21px,2.2vw,27px);font-weight:750;line-height:1.22;letter-spacing:-.012em;overflow-wrap:anywhere;text-wrap:balance}
.mail-von{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.mail-ini{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--volt);font:italic 900 17px/1 var(--font)}
.mail-wer{min-width:0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.mail-wer b{font-weight:700}
.mail-zeit{font-size:13px;white-space:nowrap;align-self:start;padding-top:2px}
.mail-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r);background:var(--karte);border:1px solid var(--linie)}
.mail-h-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.mail-h-name .ico{width:18px;height:18px;color:var(--ink-3)}
.mail-h .feld{grid-column:1/-1;min-height:40px}
.blatt{background:var(--blatt);color:var(--blatt-ink);border:1px solid var(--blatt-linie);border-radius:var(--r);box-shadow:var(--schatten);padding:clamp(18px,3.4vw,40px);display:grid;gap:14px;min-width:0}
.blatt a{color:var(--blatt-link)}
.mail-html{display:block;width:100%;height:120px;border:0;background:transparent;color-scheme:light}
.mail-text{max-width:70ch;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.65}
.mail-text .zitat-weg{display:none;margin-top:1em;padding-left:1em;border-left:2px solid var(--blatt-linie);color:var(--blatt-ink-2)}
.mail-text.zitat-auf .zitat-weg{display:block}
.blatt-fuss{display:flex;flex-wrap:wrap;gap:8px}
.blatt-fuss:not(:has(.knopf:not([hidden]))){display:none}
.blatt .knopf.still{color:var(--blatt-ink-2);background:var(--blatt-mulde);font-size:13px}
@media (min-width:760px){.blatt .knopf.still{min-height:36px}}
.blatt .knopf.still:hover{background:var(--blatt-mulde-2)}
.mail-anh{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--blatt-linie);display:flex;flex-wrap:wrap;gap:8px}
.mail-anh li{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:32px;padding:0 12px 0 10px;border-radius:999px;background:var(--blatt-mulde);color:var(--blatt-ink-2);font-size:13px;font-weight:600}
.mail-anh li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-anh .ico{width:15px;height:15px}
.antwort{display:grid;gap:10px;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:clamp(14px,2.4vw,22px)}
.antwort textarea.feld{min-height:220px;padding:12px 14px;line-height:1.55;resize:vertical;font:inherit}
.knopf.warn{background:var(--minus);color:#fff}
.mail-verlauf{display:grid;gap:2px}
.mail-verlauf h2{font-size:15px;margin:0 0 6px}
.mail-verlauf a{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;padding:9px 8px;border-radius:8px;font-size:14px;color:inherit;text-decoration:none!important}
.mail-verlauf a:hover{background:var(--karte-2)}
.mail-verlauf a>span:first-child{color:var(--ink-3);font-size:12.5px}
.mail-verlauf b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:519px){
  .mail-von{grid-template-columns:36px minmax(0,1fr)}
  .mail-ini{width:36px;height:36px;font-size:15px}
  .mail-zeit{grid-column:2;padding:0}
  .mail-h{grid-template-columns:1fr}
  .mail-h .wahl,.mail-h .wahl select{width:100%;max-width:none}
  .mail-verlauf a{grid-template-columns:minmax(0,1fr) auto}.mail-verlauf a>span:first-child{display:none}
}

/* ---------- Seitenwechsel (View Transitions wie im Shop): Kopf und Reiter stehen, Inhalt blendet und gleitet ---------- */
.kopf{view-transition-name:kopf}
@media (max-width:899px){.reiter{view-transition-name:reiter}}
@keyframes vt-weg{to{opacity:0}}
@keyframes vt-rein{from{opacity:0;transform:translate(var(--vx,0),var(--vy,10px))}}
::view-transition-old(root){animation:.16s ease-out both vt-weg}
::view-transition-new(root){animation:.36s var(--kurve) both vt-rein}
:root[data-vt="rechts"]{--vx:18px;--vy:0}
:root[data-vt="links"]{--vx:-18px;--vy:0}
:root[data-vt="tiefer"]{--vx:28px;--vy:0}
:root[data-vt="hoch"]{--vx:-28px;--vy:0}
::view-transition-group(kopf),::view-transition-group(reiter){animation:none}
::view-transition-old(kopf),::view-transition-new(kopf),::view-transition-old(reiter),::view-transition-new(reiter){animation:none;mix-blend-mode:normal}
::view-transition-old(kopf),::view-transition-old(reiter){display:none}
::view-transition-group(post-liste),::view-transition-group(post-lesen){animation-duration:.36s;animation-timing-function:var(--kurve)}
::view-transition-old(post-lesen){animation:.14s ease-out both vt-weg}
::view-transition-new(post-lesen){animation:.36s var(--kurve) both vt-rein}
:root[data-vt="gleich"]::view-transition-old(post-liste){display:none}
:root[data-vt="gleich"]::view-transition-new(post-liste){animation:none}
:root[data-vt="gleich"]::view-transition-new(post-lesen){--vx:0;--vy:8px}

/* Listen und Karten gestaffelt einblenden (die ersten 12, der Rest steht sofort) */
@keyframes rein{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){
  :is(.tafel>.zeile:not(.kopfzeile),.kacheln>.kachel,.post-liste>.post,.pruef-liste>.pruef,.mess>div):nth-child(-n+13){animation:rein var(--rein) var(--kurve) backwards;animation-delay:calc(var(--i,0) * 26ms)}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(2){--i:1}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(3){--i:2}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(4){--i:3}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(5){--i:4}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(6){--i:5}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(7){--i:6}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(8){--i:7}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(9){--i:8}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(10){--i:9}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(11){--i:10}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(12){--i:11}
  :is(.tafel,.kacheln,.post-liste,.pruef-liste,.mess)>:nth-child(13){--i:12}
  a.zeile:active{transform:scale(.995)}
  a.zeile{transition:background var(--t),transform var(--tritt) var(--kurve)}
}
/* Wechsel innerhalb des Postfachs: Liste steht, nur die Mail kommt herein */
:root[data-vt="gleich"] .post-liste>.post{animation:none}

/* 2.5: Info-Knopf und Popover an Kennzahlen */
.info{display:inline-grid;place-items:center;width:22px;height:22px;margin:-4px -4px -4px 2px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink-3);cursor:pointer;vertical-align:middle;transition:color var(--t),background var(--t)}
.info .ico{width:15px;height:15px}
.info:hover{color:var(--link);background:var(--mulde)}
.filter>.info{width:36px;height:36px;margin:0}
@media (max-width:759px){.filter>.info{width:44px;height:44px}}
.info-pop{position:fixed;inset:auto;margin:0;width:min(320px,calc(100vw - 24px));padding:14px 16px;border:1px solid var(--linie-2);border-radius:var(--r);background:var(--karte);color:var(--ink);box-shadow:0 2px 6px #0f12221f,0 18px 40px -18px #0f122266;font-size:14px;line-height:1.5}
.info-pop b{display:block;margin-bottom:4px;font-size:14.5px}
.info-pop p{color:var(--ink-2)}
.info-pop a{display:inline-block;margin-top:8px;font-weight:600}
@media (prefers-reduced-motion:no-preference){.info-pop:popover-open{animation:rein .22s var(--kurve)}}

/* Händlerpreis verifiziert (freigeschalteter Händler, per Login gelesen): gleiche grüne Sprache wie „Freigeschaltet“ */
.marke-hp{display:inline-flex;align-items:center;gap:4px;width:fit-content;margin-top:5px;padding:2px 8px 2px 6px;border-radius:999px;font-size:11.5px;font-weight:750;line-height:1.35;background:color-mix(in srgb,var(--an) 16%,var(--karte));color:var(--an-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--an) 45%,transparent)}
.marke-hp .ico{width:13px;height:13px;stroke-width:2.6}
.marke-hp.klein{margin-top:0;padding:0 7px 0 5px;font-size:11px}
.kachel .marke-hp.klein{margin-bottom:4px}
.haendler .marke-hp{white-space:normal}

/* Grenzfälle unter den Kaufchancen: eingeklappt, keine Aufgabe */
.grenz{margin-top:22px}
.grenz>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer;list-style:none;font-weight:650;color:var(--ink-2)}
.grenz>summary::-webkit-details-marker{display:none}
.grenz>summary::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform var(--t)}
.grenz[open]>summary::before{transform:rotate(45deg)}
.grenz>summary:hover{background:var(--mulde)}
.grenz>summary small{font-weight:700;color:var(--ink-3)}
.grenz .tafel{margin-top:8px}
.grenz .zeile.ch{opacity:.86}

/* Händler: Liste mit Ampel */
.hz{grid-template-columns:20px minmax(220px,2.4fr) minmax(140px,1fr) 56px minmax(140px,1.3fr) 128px 70px}
.hz .c-pruef{font-size:13.5px;font-weight:600}
.hz .c-scan{min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hz .c-ang small{font-size:11.5px;font-weight:600}
@media (max-width:1099px){.hz{grid-template-columns:20px minmax(200px,2fr) minmax(130px,1fr) 56px minmax(120px,1fr)}.hz .c-ang,.hz .c-chancen{display:none}}
@media (max-width:759px){
  .hz{grid-template-columns:20px 1fr;grid-template-areas:"lampe name" "lampe pruef" "lampe scan";gap:2px 10px;padding:12px 14px}
  .hz.kopfzeile{display:none}
  .hz .c-lampe{grid-area:lampe;align-self:start;margin-top:5px}.hz .c-name{grid-area:name}.hz .c-pruef{grid-area:pruef;font-size:12.5px}.hz .c-scan{grid-area:scan;font-size:12.5px}
  .hz .c-land{display:none}
}
.hd-neu-reihe{grid-template-columns:2fr 1fr 1fr auto;align-items:end}
.hd-neu-reihe .knopf{min-height:44px}
#hd-form{margin-bottom:14px}
.seg .lampe{width:8px;height:8px;box-shadow:none}
.seg button .ico{width:15px;height:15px}

/* Händlerseite */
.monogramm{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:var(--r-s);background:var(--navy);color:var(--volt);font:italic 900 21px/1 var(--font);font-stretch:116%;letter-spacing:-.02em}
.monogramm.klein{width:40px;height:40px;font-size:15px}
.hs-kopf{align-items:center;gap:12px 16px}
.hs-titel{min-width:0}
.hs-titel h1{font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.15}
.hs-titel .unter{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:4px;font-size:13.5px;color:var(--ink-3)}
.hs-karte{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 40px;padding:20px 22px}
@media (max-width:899px){.hs-karte{grid-template-columns:1fr;padding:16px}}
.hs-spalte>h2.lbl{display:flex;align-items:center;gap:2px;margin-bottom:8px}
.hd-k-urteil{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:12px}
.hd-k-urteil b{font-size:17px}
.signale{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.signale li{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 6px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--karte-2);box-shadow:inset 0 0 0 1px var(--linie)}
.signale .ico{width:14px;height:14px;stroke-width:2.6}
.signale .ja .ico{color:var(--an-ink)}
.signale .nein{color:var(--ink-3)}
.signale .nein .ico{color:var(--minus)}
.gruende{margin:12px 0 0;padding-left:18px;color:var(--ink-2);font-size:13.5px;display:grid;gap:2px}
.hd-k-daten{display:grid;gap:8px;font-size:14px;align-content:start}
.hd-k-daten div{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:baseline}
.hd-k-daten dt{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.hd-k-daten dd{min-width:0;overflow-wrap:anywhere}
.hd-k-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hd-k-knoepfe .knopf{min-height:40px}
.hs-konto{display:grid;grid-template-columns:14px 1fr;gap:4px 10px;align-items:start;padding:12px;border-radius:var(--r-s);background:var(--karte-2);font-size:14px}
.hs-konto>.lampe{margin-top:5px}
.hs-konto-knoepfe{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hs-zugang>summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:650;color:var(--link)}
.hs-zugang form{display:grid;gap:12px;margin-top:6px}
#liste-box h3{margin-bottom:2px}

/* Chancen: freigeschaltete Händler oben */
.frei-leiste{margin-bottom:14px}
.frei-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px}
.frei-h+.frei-h{border-top:1px solid var(--linie)}
.frei-name{display:grid;flex:1 1 200px;min-width:0;color:var(--ink)}
.frei-name b{font-weight:700}
.frei-name .leise{font-size:13px}
.frei-h .knopf{min-height:38px}
@media (max-width:519px){.frei-h .knopf{flex:1 1 100%}}

/* Mehr, Einstellungen */
.mehr-liste .zeile{grid-template-columns:22px 1fr auto 18px;min-height:60px;font-size:15.5px}
.mehr-liste .zeile>.ico:last-child{width:18px;height:18px;color:var(--ink-3)}
.mehr-liste .zeile b{font-weight:650}
.einst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px 20px;max-width:900px}
.einst .feld-fuss{grid-column:1/-1}
.einheit{display:flex;align-items:center;gap:8px}
.einheit .feld{flex:1;min-width:0}
.einheit i{font-style:normal;color:var(--ink-3);font-weight:600;min-width:28px}

/* Händlerpreise eines Händlers */
.ba{grid-template-columns:56px minmax(220px,2.6fr) 112px 104px 96px 136px 100px 112px 216px}
.ba.aus-v .wert{color:var(--ink-3)}
.ba .name-zeile .leise{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36ch}
@media (max-width:1279px){.ba{grid-template-columns:56px minmax(200px,2fr) 110px 104px 136px 112px 216px}.ba .c-markt,.ba .c-ein{display:none}}
@media (max-width:759px){
  .ba{grid-template-columns:repeat(6,1fr);grid-template-areas:"bild prod prod prod prod prod" "best best best um um um" "preis preis ein ein marge marge" "knopf knopf knopf knopf knopf knopf";gap:10px;padding:14px;border:1px solid var(--linie);border-radius:var(--r);background:var(--karte);box-shadow:var(--schatten)}
  .ba .c-bild{grid-area:bild;align-self:start}.ba .c-prod{grid-area:prod}.ba .c-best{grid-area:best;align-self:center}.ba .c-um{grid-area:um;justify-self:end;align-self:center}
  .ba .c-preis{grid-area:preis}.ba .c-ein{grid-area:ein;display:block}.ba .c-marge{grid-area:marge}.ba .c-markt{display:none}
  .ba .c-preis,.ba .c-ein,.ba .c-marge{justify-self:stretch;align-self:stretch;text-align:left;padding:8px 10px;border-radius:var(--r-s);background:var(--karte-2)}
  .ba .c-um .m-lbl{display:none}
  .ba .c-knopf{grid-area:knopf;justify-self:stretch}.ba .c-knopf .knopf{width:100%}
}

/* Handbuch (Lesemodus) */
.hb{display:grid;grid-template-columns:240px minmax(0,76ch);gap:40px;align-items:start}
.hb-inhalt{position:sticky;top:calc(var(--kopf-ges,var(--kopf-h)) + 16px)}
.hb-inhalt ol{margin:0;padding:0;list-style:none;display:grid;gap:2px;counter-reset:hb}
.hb-inhalt a{display:block;padding:7px 12px;border-radius:var(--r-s);color:var(--ink-2);font-size:14px;font-weight:600}
.hb-inhalt a:hover{background:var(--mulde);text-decoration:none;color:var(--ink)}
.hb-text{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten);padding:8px 32px 28px}
.hb-text section{padding-top:24px}
.hb-text section+section{margin-top:8px;border-top:1px solid var(--linie)}
.hb-text h2{font-size:21px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em}
.hb-text p{color:var(--ink-2);font-size:15.5px;line-height:1.62;margin-bottom:10px;max-width:70ch}
.hb-liste{display:grid;gap:12px;margin-bottom:12px}
.hb-liste dt{display:flex;align-items:center;gap:8px;font-weight:750}
.hb-liste dd{color:var(--ink-2);font-size:15px;line-height:1.6;margin-top:2px}
.hb-tabelle{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:14.5px}
.hb-tabelle th,.hb-tabelle td{text-align:left;vertical-align:top;padding:9px 0;border-top:1px solid var(--linie)}
.hb-tabelle tr:first-child>*{border-top:0}
.hb-tabelle th{font-weight:650;padding-right:18px;width:32%}
.hb-tabelle td{color:var(--ink-2)}
@media (max-width:899px){
  .hb{grid-template-columns:minmax(0,1fr);gap:14px}
  .hb-inhalt{position:static}
  .hb-inhalt ol{display:flex;overflow-x:auto;gap:6px;margin-inline:calc(var(--rand) * -1);padding:2px var(--rand) 6px;scrollbar-width:none}
  .hb-inhalt li{flex:none}
  .hb-inhalt a{border:1px solid var(--linie-2);border-radius:999px;background:var(--karte);white-space:nowrap;min-height:40px;display:flex;align-items:center}
  .hb-text{padding:4px 18px 22px}
  .hb-tabelle th{width:40%}
}

.zugang-hinweis{margin:0;padding:10px 14px;border-radius:var(--r-s);background:var(--wahl-ton);color:var(--ink);font-weight:600;font-size:14.5px}
.info-pop form{display:grid;gap:10px}
.info-pop form .knopf{justify-self:start}
.mehr-liste .mehr-t{display:grid;gap:2px;min-width:0}
.mehr-liste .mehr-t small{font-size:13px;color:var(--ink-3);font-weight:500}
.hz .c-pruef{display:grid;min-width:0;gap:1px}
.hz .c-pruef b{font-weight:650}
.hz .c-pruef small{font-size:12.5px;font-weight:500;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hz .c-name .unter{flex-wrap:wrap}
.hs-sortiment{margin-top:0;margin-bottom:24px}
@media (max-width:759px){
  .hs-kopf .monogramm{width:44px;height:44px;font-size:17px}
  .hs-kopf .hs-titel{flex:1 1 0}
  .hs-kopf .rechts{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .hs-kopf .rechts>.knopf:first-child{grid-column:1/-1}
  .hs-kopf .rechts .knopf{justify-content:center;padding-inline:10px}
}
@media (max-width:759px){
  .hz{grid-template-columns:20px auto minmax(0,1fr);grid-template-areas:"lampe name name" "lampe pruef scan";gap:2px 0}
  .hz .c-name{margin-left:10px}.hz .c-pruef{margin-left:10px}
  .hz .c-scan::before{content:"·";margin:0 6px}
  .hz .c-pruef small{display:none}
}
.mehr-liste{max-width:760px}

/* Rolle „lesen“: nur ansehen */
.nur-lesen :is(#hd-neu, #pf-abruf, #m-code, [data-kopie], [data-vertrauen], [data-akt], #m-antw, #m-erl, #m-form, #m-verwerfen, #m-senden, .feld-fuss, #pw-form){display:none!important}
.nur-lesen :is(#m-b2b, #m-notiz){pointer-events:none;opacity:.7}

/* Tabellen: jede Zeile ist ein eigenes Raster. Darum nie max-content/auto als Spur, sonst sitzen Kopf und Zeilen verschieden (Rico 19.10.) */
.zeile{font-variant-numeric:tabular-nums}
.ba .c-knopf .knopf,.ag .c-knopf .knopf{max-width:100%;white-space:nowrap}
.detail-titel{min-width:0;grid-template-columns:minmax(0,1fr)}.detail-titel h1,.detail-titel .orig{overflow-wrap:anywhere}
.detail-titel .aktionen{flex-wrap:wrap}.detail-titel .aktionen .knopf{max-width:100%;white-space:normal;text-align:center}

/* Händler: angemeldet/wartet und per Hand (unter „Freigeschaltet“) */
.b2b-gruppe{margin-top:28px}
.b2b-gruppe h2{font-size:18px;margin:0 0 10px}
.b2b-gruppe h2 small{color:var(--ink-3);font-weight:600}
.b2b-zeile{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--linie)}
.b2b-zeile:last-child{border-bottom:0}
.b2b-zeile>a:first-child{display:grid;color:inherit;text-decoration:none}
.b2b-zeile p{margin:0;font-size:14px;color:var(--ink-2)}
@media (max-width:759px){.b2b-zeile{grid-template-columns:minmax(0,1fr)}}