/* Layout: sticky header + one working column (max 1180px); order tables scroll inside their own frame. */
:root{
  --bg:#FAF9F7; --surface:#FFFFFF; --fg:#111111; --muted:#5F655D; --line:#E2E0D9; --line-strong:#C9CCC3;
  --primary:#113E21; --on-primary:#FAF9F7; --accent:#2F7045; --tint:#EDF1EB; --tint-strong:#DCE6DA;
  --sun:#FFB749; --bad:#A8321F; --warn:#8A5A00; --focus:#2F7045;
  --st-g:#2E9A55; --st-y:#E0A100; --st-r:#C8382B;
  --tile1:#113E21; --tile2:#2F7045; --tile3:#E6ECE3; --tile4:#E8E4E2; --on-tile:#FAF9F7; --on-tile3:#113E21; --on-tile4:#113E21;
  --font:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --r:10px; --gutter:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1410; --surface:#141D17; --fg:#ECEBE6; --muted:#A2A89F; --line:#26322A; --line-strong:#3A493F;
  --primary:#A9D3B3; --on-primary:#0D1410; --accent:#8CC59B; --tint:#18241C; --tint-strong:#223327;
  --sun:#FFB749; --bad:#FF8C78; --warn:#F2B95C; --focus:#8CC59B; --st-g:#4CC27A; --st-y:#F2BE3A; --st-r:#FF6B5C;
  --tile1:#173F25; --tile2:#24573A; --tile3:#1A271E; --tile4:#2B2926; --on-tile:#F3F2EC; --on-tile3:#CFE6D5; --on-tile4:#F0EBE6; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1410; --surface:#141D17; --fg:#ECEBE6; --muted:#A2A89F; --line:#26322A; --line-strong:#3A493F;
  --primary:#A9D3B3; --on-primary:#0D1410; --accent:#8CC59B; --tint:#18241C; --tint-strong:#223327;
  --sun:#FFB749; --bad:#FF8C78; --warn:#F2B95C; --focus:#8CC59B; --st-g:#4CC27A; --st-y:#F2BE3A; --st-r:#FF6B5C;
  --tile1:#173F25; --tile2:#24573A; --tile3:#1A271E; --tile4:#2B2926; --on-tile:#F3F2EC; --on-tile3:#CFE6D5; --on-tile4:#F0EBE6; color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tint-strong:#223327}}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(26px,3.4vw,38px);line-height:1.15}
h2{font-size:20px;line-height:1.3}
h3{font-size:16px;line-height:1.35}
p{margin:0}
a{color:var(--accent)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.eyebrow{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Header */
.protosw{border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);border-radius:999px;padding:1px 10px;font:inherit;font-size:12px;cursor:pointer}
.proto{background:var(--tint);color:var(--muted);font-size:12.5px;padding:7px var(--gutter);display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:center;text-align:center}
.proto b{color:var(--fg);font-weight:500}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:baseline;gap:10px;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.brand .wm{font-weight:600;letter-spacing:.16em;font-size:14px;color:var(--fg)}
.brand .b2b{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--on-primary);background:var(--primary);padding:2px 7px;border-radius:4px}
nav.main{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
nav.main::-webkit-scrollbar{display:none}
nav.main button{background:none;border:0;padding:8px 12px;border-radius:999px;cursor:pointer;color:var(--muted);font-weight:500;white-space:nowrap}
nav.main button:hover{color:var(--fg);background:var(--tint)}
nav.main button[aria-current="page"]{color:var(--fg);background:var(--tint-strong)}
.cartbtn{display:flex;align-items:center;gap:10px;background:var(--primary);color:var(--on-primary);border:0;border-radius:999px;padding:9px 16px 9px 14px;cursor:pointer;font-weight:500;white-space:nowrap}
.cartbtn .sum{opacity:.85;font-weight:400}
.langbtn{display:flex;gap:5px;align-items:center;background:none;border:1px solid var(--line-strong);border-radius:999px;padding:7px 12px;font-size:12.5px;letter-spacing:.06em;color:var(--muted);cursor:pointer;margin-left:auto;white-space:nowrap}
.langbtn .on{color:var(--fg);font-weight:600}
.langbtn:hover{border-color:var(--accent)}
.langbtn+.cartbtn{margin-left:0}
.cartbtn svg{width:18px;height:18px}
@media (max-width:980px){.top-in{flex-wrap:wrap;gap:10px}.brand{order:1}.langbtn{order:2;margin-left:auto}.cartbtn{order:2;margin-left:0}nav.main{order:3;flex-basis:100%}}
@media (max-width:720px){.cartbtn .sum{display:none}}
@media (max-width:520px){.cartbtn .cbl{display:none}.cartbtn{padding:8px 12px;gap:6px}.langbtn{padding:6px 9px}.top-in{gap:8px}.brand{gap:7px}.brand .wm{font-size:12px;letter-spacing:.1em}.brand .b2b{font-size:10px;padding:2px 5px}}

main{max-width:1180px;margin:0 auto;padding-inline:var(--gutter);padding-block:28px 140px}
.crumbs{display:flex;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs button{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-weight:500}
.crumbs span.sep{opacity:.5}

/* Home */
.hello{display:grid;gap:8px;margin-bottom:26px}
.tiles{display:grid;gap:14px}
.tile{--tc:var(--tile1);position:relative;overflow:hidden;border-radius:14px;background:var(--tc);color:var(--on-tile);min-height:280px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);isolation:isolate}
.tile{cursor:pointer;transition:box-shadow .2s ease}
.tile:hover{box-shadow:0 0 0 2px var(--accent)}
.tile.sleep{--tc:var(--tile2)}
.tile.eat{--tc:var(--tile3);color:var(--on-tile3)}
.tile.wear{--tc:var(--tile4);color:var(--on-tile4)}
.tile.wear .photo img{object-position:100% 35%}
.tile .new{display:inline-block;vertical-align:top;margin-left:10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#111111;padding:3px 9px;border-radius:999px;position:relative;top:8px}
.tile .photo{position:absolute;top:0;bottom:0;right:0;width:70%;z-index:-1;overflow:hidden}
.tile .photo img{width:100%;height:100%;object-fit:cover;display:block}
.tile .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tc) 0%,color-mix(in srgb,var(--tc) 85%,transparent) 9%,color-mix(in srgb,var(--tc) 45%,transparent) 21%,color-mix(in srgb,var(--tc) 12%,transparent) 31%,color-mix(in srgb,var(--tc) 0%,transparent) 40%)}
.tile .txt{padding:26px 28px 24px;display:grid;gap:14px;align-content:space-between}
.tile .open{display:grid;gap:6px;text-align:left;background:none;border:0;padding:0;color:inherit;cursor:pointer}
.tile .word{font-size:clamp(44px,5.4vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1}
.tile .meta{font-size:13.5px;opacity:.85;max-width:34ch}
.tile ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;max-width:280px}
.tile li button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;background:none;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);padding:6px 0;color:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.tile li button span{opacity:.6;font-size:12px}
.tile li button:hover{border-bottom-color:currentColor}
.tile{--tf:var(--on-tile)}
.tile.eat{--tf:var(--on-tile3)}
.tile.wear{--tf:var(--on-tile4)}
.tile .acts{display:flex;flex-wrap:wrap;gap:8px}
.tbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:500;border:1px solid var(--tf);background:color-mix(in srgb,var(--tc) 60%,transparent);color:var(--tf);cursor:pointer;white-space:nowrap}
.tbtn svg{width:17px;height:17px}
.tbtn:hover{background:color-mix(in srgb,var(--tf) 12%,var(--tc))}
.tbtn.fill{background:var(--tf);color:var(--tc)}
.tbtn.fill:hover{filter:brightness(.94);background:var(--tf)}
@media (max-width:760px){
  .tile{grid-template-columns:1fr}
  .tile .txt{padding:22px 20px 20px}
  .tile ul{max-width:230px}
  .tile .photo{width:64%}
  .tile .photo::after{background:linear-gradient(90deg,var(--tc) 0%,color-mix(in srgb,var(--tc) 88%,transparent) 20%,color-mix(in srgb,var(--tc) 40%,transparent) 38%,color-mix(in srgb,var(--tc) 0%,transparent) 54%)}
}
@media (max-width:420px){
  .tile{min-height:0}
  .tile ul{max-width:none}
  .tile .photo{position:relative;inset:auto;width:auto;height:180px;order:-1;z-index:0}
  .tile .photo::after{background:linear-gradient(0deg,var(--tc) 0%,color-mix(in srgb,var(--tc) 0%,transparent) 55%)}
  .tile .txt{padding-top:6px}
}
.second{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:720px){.second{grid-template-columns:1fr}}
/* Startseiten-Varianten (Test) */
.laysw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:10px;font-size:12.5px;color:var(--muted)}
.laysw span{margin-right:4px}
.laysw button{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.laysw button[aria-current="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.ctiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.ctile{--tf:var(--on-tile);--tc:var(--tile1);background:var(--tc);color:var(--on-tile);border-radius:14px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;cursor:pointer;transition:box-shadow .2s}
.ctile:hover{box-shadow:0 0 0 2px var(--accent)}
.ctile.sleep{--tc:var(--tile2)}.ctile.eat{--tc:var(--tile3);--tf:var(--on-tile3);color:var(--on-tile3)}.ctile.wear{--tc:var(--tile4);--tf:var(--on-tile4);color:var(--on-tile4)}
.ctile .cph{position:relative;aspect-ratio:16/10;overflow:hidden}
.ctile .cph img{width:100%;height:100%;object-fit:cover;display:block}
.ctile.wear .cph img{object-position:100% 35%}
.ctile .cph .new{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#111;padding:3px 8px;border-radius:999px}
.ctile .cbd{padding:14px 16px 16px;display:grid;gap:6px;align-content:start}
.ctile .cw{background:none;border:0;padding:0;color:inherit;font:inherit;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.05;text-align:left;cursor:pointer}
.ctile .cm{font-size:13px;opacity:.85}
.ctile .cs{font-size:12px;opacity:.85;line-height:1.5;display:flex;flex-wrap:wrap;gap:3px 12px}
.ctile .cs button{text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.ctile .cs span{margin:0 5px;opacity:.6}
.ctile .ca{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ctile .tbtn{font-size:12.5px;padding:6px 11px}
.stiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stile{--tc:var(--tile1);--tf:var(--on-tile);display:grid;grid-template-rows:auto 1fr;border-radius:14px;overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left;background:var(--tc);color:var(--tf);transition:box-shadow .2s}
.stile.sleep{--tc:var(--tile2)}.stile.eat{--tc:var(--tile3);--tf:var(--on-tile3)}.stile.wear{--tc:var(--tile4);--tf:var(--on-tile4)}
.stile:hover{box-shadow:0 0 0 2px var(--accent)}
.stile .si{display:block;aspect-ratio:16/10;overflow:hidden;background:#EEE}
.stile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.stile:hover img{transform:scale(1.03)}
.stile.walk img{object-position:30% 85%}.stile.sleep img{object-position:50% 60%}.stile.eat img{object-position:50% 70%}.stile.wear img{object-position:40% 70%}
.stile .sb{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px 12px}
.stile .sw{display:grid;gap:1px;min-width:0}
.stile .sw b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.stile .sw i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#111;padding:2px 7px;border-radius:999px;vertical-align:middle;position:relative;top:-3px;margin-left:4px}
.stile .sw small{font-size:12.5px;opacity:.85;line-height:1.35}
.stile .sa{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 35%,transparent);display:grid;place-items:center;transition:background .15s,color .15s}
.stile:hover .sa{background:var(--tf);color:var(--tc)}

.ctile{position:relative}
.ctile .cbd{padding-right:52px}
.ctile .cgo{position:absolute;right:14px;bottom:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 35%,transparent);transition:background .15s,color .15s}
.ctile .cgo svg{width:16px;height:16px}
.ctile:hover .cgo{background:var(--tf);color:var(--tc)}
.ctile:focus-visible,.dcard.dlink:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dcard.dlink{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.dcard.dlink:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* Kategorie: Set-Konfigurator vs. Einzelartikel */
.choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:4px 0 26px}
.choose.one{grid-template-columns:1fr}
.chs{position:relative;display:grid;grid-template-columns:1fr;gap:16px;align-items:start;padding:20px 22px 56px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.chs:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.chs:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chs.set{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.chs.set .eyebrow,.chs.set .note{color:color-mix(in srgb,var(--on-primary) 78%,transparent)}
.chs .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tint);color:var(--primary)}
.chs.set .ic{background:color-mix(in srgb,var(--on-primary) 14%,transparent);color:var(--on-primary)}
.chs .ic svg{width:22px;height:22px}
.chs h2{font-size:21px;margin:2px 0 6px}
.chs .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chs .go{position:absolute;right:20px;bottom:16px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.chs .go svg{width:16px;height:16px}
.choose.one .chs{grid-template-columns:auto 1fr auto;align-items:center;padding:18px 22px}
.choose.one .chs .go{position:static;white-space:nowrap}
@media (max-width:560px){.choose.one .chs{grid-template-columns:auto 1fr;padding:16px 16px 50px}.choose.one .chs .go{position:absolute}}
.matpanel .matbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 28px;padding:4px 18px 4px}
.matpanel .matbody h4{margin:0 0 4px;font-size:14px;font-weight:600}
.matpanel .matbody p{color:var(--muted);font-size:13.5px}
.matpanel>.note{padding:10px 18px 16px}
@media (max-width:760px){.choose{grid-template-columns:1fr}.chs{padding:16px 16px 50px}}
.stile .sa svg{width:16px;height:16px}
@media (max-width:980px){.ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}.stiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ctile .cs{display:none}.ctile .cw{font-size:24px}.stile .sw b{font-size:18px}.stile .sw small{display:none}.stile .sb{padding:9px 11px 10px}.stile .sa{width:26px;height:26px}}

.action{display:flex;gap:16px;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;cursor:pointer}
.action:hover{border-color:var(--line-strong)}
.action .ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--tint);display:grid;place-items:center;color:var(--accent)}
.action .ic svg{width:22px;height:22px}
.action div{display:grid;gap:3px;min-width:0}
.terms{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}
.terms b{color:var(--fg);font-weight:500}

/* Category */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head .lead{max-width:60ch;color:var(--muted);margin-top:6px}
.subnav{display:flex;gap:6px;flex-wrap:wrap}
.subnav .dlchip{margin-left:auto;display:inline-flex;align-items:center;gap:6px}.subnav .dlchip svg{width:15px;height:15px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-current="page"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.sec{margin-top:30px;scroll-margin-top:100px}
.sec > h2{margin-bottom:12px;display:flex;gap:10px;align-items:baseline}
.sec > h2 small{font-size:13px;font-weight:400;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{position:relative;overflow:hidden;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;cursor:pointer;display:grid;gap:10px;align-content:start;min-height:158px}
/* Produktkarte: Freisteller oben, Text darunter – kein Verlauf */
.card.wimg{padding:0;gap:0;grid-template-rows:auto 1fr}
.card .pimg{position:relative;display:block;aspect-ratio:1/1;background:#F2F2F2;overflow:hidden}
.card .pimg .dotcap{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);color:#111;font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;pointer-events:none}
.card .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:transform .35s ease,opacity .2s}
.card:hover .pimg img{transform:scale(1.04)}
.card .pimg.mood img{object-fit:cover;object-position:28% 40%}
.card .cbody{padding:14px 16px 14px;display:grid;gap:9px;align-content:start}
.card .cbody .facts{border-top:1px solid var(--line);padding-top:9px}
.card .facts span:last-child{white-space:nowrap}
/* Set-Karten */
.collage{display:grid;gap:2px;background:var(--line);aspect-ratio:4/3;overflow:hidden}
.collage .pc{background:#F2F2F2;position:relative;overflow:hidden;min-height:0}
.collage .pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.collage.mood .pc img{object-fit:cover;object-position:30% 40%}
.collage.n1{grid-template-columns:1fr}
.collage.n2{grid-template-columns:1fr 1fr}
.collage.n3{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}.collage.n3 .pc:first-child{grid-row:1/3}
.collage.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.collage.n3 .pc:not(:first-child) img,.collage.n4 .pc img{transform:scale(1.15)}
.setcard .facts .parts{display:flex;flex-wrap:wrap;gap:4px;white-space:normal}
.setcard .facts .parts span{font-size:11.5px;color:var(--muted);background:var(--tint);border-radius:999px;padding:2px 8px;white-space:nowrap}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .collage .pc{background:#C2C2C2}:root:not([data-theme="light"]) .collage img{filter:brightness(.8)}}
:root[data-theme="dark"] .collage .pc{background:#C2C2C2}:root[data-theme="dark"] .collage img{filter:brightness(.8)}
.card .incart{z-index:2}
.card.wimg .incart{position:absolute;top:10px;left:10px;right:auto}
.card .sw .dot.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--fg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pimg img,:root:not([data-theme="light"]) .slide img{filter:brightness(.8)}:root:not([data-theme="light"]) .pimg,:root:not([data-theme="light"]) .slides{background:#C2C2C2}}
:root[data-theme="dark"] .pimg img,:root[data-theme="dark"] .slide img{filter:brightness(.8)}
:root[data-theme="dark"] .pimg,:root[data-theme="dark"] .slides{background:#C2C2C2}
/* Artikelkopf: Text links, Bestseller-Slideshow rechts */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:0;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:8px;overflow:hidden}
.hero.noimg{grid-template-columns:1fr}
.hero .htxt{padding:28px 30px;display:grid;gap:8px;align-content:center}
.hero .lead{color:var(--muted)}
.hero .bs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hero .bs button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px 5px 6px;font-size:13px;cursor:pointer;color:var(--fg)}
.hero .bs button:hover{border-color:var(--line-strong)}
.hero .bs button[aria-current="true"]{border-color:var(--fg)}
.hero .bs .dot{width:16px;height:16px}
.hero .bs small{color:var(--muted);font-size:12px}
.slides{position:relative;background:#F2F2F2;aspect-ratio:4/3;overflow:hidden}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .3s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:contain;display:block}
.slides.mood .slide img{object-fit:cover;object-position:30% 40%}
.slides .nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid rgba(17,17,17,.12);background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;cursor:pointer;z-index:2;transition:background .15s}
.slides .nav:hover{background:#fff}
.slides .nav svg{width:18px;height:18px}
.slides .prev{left:12px}.slides .next{right:12px}
.slides .cap{position:absolute;left:12px;bottom:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:2;font-size:13px;color:#111}
.slides .cap .tag{background:rgba(255,255,255,.92);border-radius:999px;padding:5px 11px 5px 7px;display:inline-flex;gap:7px;align-items:center}
.slides .cap .tag .dot{width:14px;height:14px}
.slides .cap .cnt{background:rgba(255,255,255,.92);border-radius:999px;padding:5px 10px;font-variant-numeric:tabular-nums}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero .slides{order:-1;aspect-ratio:4/3}}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,540px)}
.hero .gallery{display:grid;grid-template-rows:auto auto;align-content:start;background:var(--surface);min-width:0}
.hero .slides{aspect-ratio:1/1}
.slide.look img{object-fit:cover}
.slides .cap .tag[hidden]{display:none}
.gthumbs{display:flex;flex-wrap:nowrap;gap:6px;padding:8px;overflow-x:auto;scrollbar-width:thin;border-top:1px solid var(--line)}
.gthumbs button{flex:0 0 auto;width:58px;height:58px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#F2F2F2;cursor:pointer;opacity:.75;transition:opacity .15s,border-color .15s}
.gthumbs button img{width:100%;height:100%;object-fit:contain;display:block}
.gthumbs button.lk img{object-fit:cover}
.gthumbs button:hover{opacity:1}
.gthumbs button[aria-current="true"]{opacity:1;border:2px solid var(--fg)}
.lookjump{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;border:0;background:var(--tint);color:var(--primary);border-radius:999px;padding:7px 14px 7px 11px;font-size:13px;font-weight:500;cursor:pointer}
.lookjump:hover{background:var(--tint-strong)}
.lookjump svg{width:17px;height:17px}
.finfo{display:grid;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.finfo>p{color:var(--fg)}
.finfo .hl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
.finfo .hl li{display:flex;gap:7px;align-items:flex-start;font-size:13.5px;line-height:1.4}
.finfo .hl svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--accent)}
.finfo .more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:13.5px;color:var(--primary)}
.finfo .more summary::-webkit-details-marker{display:none}
.finfo .more .chev svg{width:14px;height:14px;transition:transform .2s}
.finfo .more[open] .chev svg{transform:rotate(90deg)}
.finfo .more h4{margin:12px 0 2px;font-size:13.5px;font-weight:600}
.finfo .more p{color:var(--muted);font-size:13.5px}
.finfo .more .note{margin-top:10px;font-size:12px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .gthumbs button{background:#C2C2C2}:root:not([data-theme="light"]) .gthumbs img,:root:not([data-theme="light"]) .slide.look img{filter:brightness(.85)}}
:root[data-theme="dark"] .gthumbs button{background:#C2C2C2}
@media (max-width:980px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,420px)}}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero .gallery{order:-1}.hero .slides{aspect-ratio:5/4}.finfo .hl{grid-template-columns:1fr}}

@media (max-width:560px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card .cbody{padding:11px 12px;gap:7px}.card .cbody h3{font-size:15px}.card .cbody .facts{flex-direction:column;gap:2px;font-size:12px}.card .sw .dot{width:13px;height:13px}}
.card:hover{border-color:var(--line-strong)}
.card .line{font-size:12.5px;color:var(--muted)}
.card .facts{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);align-items:baseline}
.card .facts b{color:var(--fg);font-weight:500}
.incart{position:absolute;top:12px;right:12px;font-size:11.5px;font-weight:600;background:var(--sun);color:#111111;padding:2px 8px;border-radius:999px}
.sw{display:flex;gap:5px;flex-wrap:wrap}
.dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--line-strong);flex:none}
.dot.lg{width:20px;height:20px}

/* Matrix */
.toolbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin:18px 0 10px}
.hint{font-size:13px;color:var(--muted);max-width:70ch;min-width:0}
.hint kbd{font-family:inherit;font-size:11.5px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13.5px;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--tint)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn.primary:hover{filter:brightness(1.08);background:var(--primary)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.ghost:hover{color:var(--fg);background:var(--tint)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.frame{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.mx{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
.mx th,.mx td{border-bottom:1px solid var(--line);padding:0}
.mx thead th{position:sticky;top:0;background:var(--surface);font-weight:500;text-align:center;padding:10px 6px 8px;vertical-align:bottom;white-space:nowrap}
.mx thead .grp th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:10px 6px 4px;border-bottom:0}
.mx thead .grp th.gstart,.mx td.gstart,.mx thead .cols th.gstart{border-left:1px solid var(--line)}
.mx .colhead{display:grid;gap:1px;justify-items:center}
.mx .colhead .ek{font-size:11.5px;color:var(--muted);font-weight:400}
.mx .colhead .uvp{font-size:10.5px;color:var(--muted);font-weight:400;opacity:.8}
.mx th.rowh{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;padding:8px 14px 8px 14px;min-width:170px;border-right:1px solid var(--line)}
.mx thead th.rowh{z-index:3}
.mx th.rowh .rn{display:flex;align-items:center;gap:10px}
.mx th.rowh .rn span{display:grid;line-height:1.25}
.mx th.rowh .rn small{font-size:11.5px;color:var(--muted);font-weight:400}
.mx td.cell{text-align:center;padding:6px 4px;min-width:64px}
.mx td.cell input{width:54px;height:36px;text-align:center;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-variant-numeric:tabular-nums;font-size:14px;padding:0 4px}
.mx td.cell input:hover{border-color:var(--line-strong)}
.mx td.cell input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 30%,transparent);background:var(--surface)}
.mx td.cell.has input{background:var(--tint-strong);border-color:var(--accent);font-weight:600}
.mx td.cell .pr{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.mx td.cell{position:relative}
.st{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.st.g{background:var(--st-g)}.st.y{background:var(--st-y)}.st.r{background:var(--st-r)}
.mx td.cell .st{position:absolute;top:11px;left:calc(50% + 16px);width:7px;height:7px;z-index:1;pointer-events:none}
.mx td.cell.red .st{display:none}
.mx td.cell.red{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--st-r) 16%,transparent) 6px 8px)}
.mx td.cell.red .out{display:inline-grid;place-items:center;width:54px;height:36px;font-size:11px;color:var(--st-r);font-weight:500}
.mx td.na{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--tint) 6px 7px);text-align:center;color:var(--muted);font-size:12px}
.mx td.rsum{text-align:right;padding:6px 12px;white-space:nowrap;border-left:1px solid var(--line)}
.mx td.rsum b{display:block;font-weight:600}
.mx td.rsum span{font-size:12px;color:var(--muted)}
.mx td.racts{padding:4px 8px;white-space:nowrap}
.mx td.racts .ra{display:flex;gap:2px}
.ib{background:none;border:0;border-radius:6px;padding:6px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.ib:hover{background:var(--tint);color:var(--fg)}
.ib[disabled]{opacity:.3;cursor:not-allowed}
.ib svg{width:17px;height:17px}
.mx tfoot td,.mx tfoot th{background:var(--tint);border-bottom:0;font-weight:600;text-align:center;padding:9px 4px}
.mx tfoot th.rowh{background:var(--tint)}
.mx tr.copied th.rowh{box-shadow:inset 3px 0 0 var(--sun)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px;border:1px solid var(--line-strong)}
.legend i.o{background:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--st-r) 35%,transparent) 3px 4px)}
.legend .st{margin-right:6px;vertical-align:0}
.legend i.n{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line-strong) 3px 4px)}

/* Sticky bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);padding:12px var(--gutter);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.bar-in{max-width:calc(1180px - 2 * var(--gutter));margin:0 auto;display:flex;gap:12px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.bar .stat{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline}
.bar .stat div{display:grid;line-height:1.2}
.bar .stat small{font-size:11.5px;color:var(--muted)}
.bar .stat b{font-size:17px;font-weight:600}
.bar .acts{display:flex;gap:8px;flex-wrap:wrap}

/* Sets */
.setcfg{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;margin:18px 0 26px}
.setcfg .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:10px}
.setcfg > *{min-width:0}
.setitem{display:grid;gap:6px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg)}
.setitem label.cb{display:flex;gap:8px;align-items:center;font-weight:500;font-size:14px;cursor:pointer}
.setitem select{width:100%;border:1px solid var(--line-strong);border-radius:6px;padding:6px 8px;background:var(--surface);font-size:13.5px}
.setitem .p{font-size:12px;color:var(--muted)}
.setgrid .mx th.rowh{min-width:140px}
.setitem.lead{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.setitem .leadtag{color:var(--accent);font-weight:500}
.setitem .hint{font-size:11.5px;line-height:1.35}
.stephead{display:flex;gap:14px;align-items:flex-start}
.stephead h2{margin:0}
.stephead .note{margin-top:3px}
.stepno{flex:none;width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:600;font-size:14px;margin-top:1px}
.stepno.ghost{background:var(--tint-strong);color:var(--fg)}
.setcfg .parts{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.part{display:grid;grid-template-columns:auto 56px minmax(140px,1fr) minmax(0,1.6fr) 96px;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid var(--line);transition:background .15s,opacity .15s}
.part:first-child{border-top:0}
.part:not(.on){opacity:.55}
.part:not(.on) .ctl{display:none}
.part.lead{background:var(--tint)}
.part .tog,.tower .tog{position:relative;display:grid;place-items:center;cursor:pointer}
.part .tog input,.tower .tog input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.part .tog .box,.tower .tog .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:transparent;background:var(--surface)}
.part .tog input:checked + .box,.tower .tog input:checked + .box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.part .tog input:focus-visible + .box,.tower .tog input:focus-visible + .box{box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent)}
.part .tog .box svg,.tower .tog .box svg{width:15px;height:15px}
.part .th{width:56px;height:56px;border-radius:8px;background:#F2F2F2;overflow:hidden;display:block}
.part .th img{width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.15)}
.part .nm{display:grid;line-height:1.3;min-width:0}
.part .nm b{font-weight:600;font-size:15px}
.part .nm small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part .ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.part .pill{font-size:12.5px;color:var(--muted);background:var(--tint);border-radius:999px;padding:4px 10px}
.part .pill.lead{background:var(--primary);color:var(--on-primary)}
.part .szl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.part select{border:1px solid var(--line-strong);border-radius:7px;padding:5px 8px;background:var(--surface);color:var(--fg);font-size:13.5px}
.part .why{flex-basis:100%;font-size:11.5px;color:var(--muted)}
.hoverhint{}
@media (hover:none){.hoverhint{display:none}}
.picsw{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
@media (max-width:560px){.picsw{margin-left:0}}
.seg.pcol{margin-bottom:8px}.seg.pcol button{display:inline-flex;gap:6px;align-items:center}.seg.pcol .dot{width:12px;height:12px}
.perq{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:5px 10px;font-size:13px;cursor:pointer;color:var(--fg)}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.part .pr{text-align:right;font-weight:600;white-space:nowrap;display:grid;line-height:1.2}
.part .pr small{font-weight:400;color:var(--muted);font-size:11px}
.setcfg .setfoot{position:sticky;bottom:84px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:12px 16px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.setfoot .sum1{font-size:13px}
.setfoot .sum2{margin-top:3px;font-size:15px}
.setfoot .miss{font-size:12px;color:var(--st-r);margin-top:3px}
.setfoot .btn:disabled{opacity:.45;cursor:not-allowed}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .part .th{background:#C2C2C2}:root:not([data-theme="light"]) .part .th img{filter:brightness(.8)}}
:root[data-theme="dark"] .part .th{background:#C2C2C2}:root[data-theme="dark"] .part .th img{filter:brightness(.8)}
@media (max-width:760px){.part{grid-template-columns:auto 48px 1fr auto;gap:8px 12px;padding:10px 12px}.part .th{width:48px;height:48px}.part .ctl{grid-column:3/5;grid-row:2}.part .pr{grid-column:4;grid-row:1}.setcfg .setfoot{position:static;box-shadow:none}}
.szgrps{display:grid;gap:10px;width:100%}
.szgrp{display:grid;grid-template-columns:84px 1fr;align-items:end;gap:10px}
.szgrp .gl{font-size:13px;font-weight:600;padding-bottom:9px}
@media (max-width:560px){.szgrp{grid-template-columns:1fr;gap:4px}.szgrp .gl{padding-bottom:0}}
.cathead{align-items:flex-start}
.catacts{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px}
.setbtn{padding:9px 14px;font-size:14px}
.setbtn svg{width:18px;height:18px}
.setbtn .cnt{background:rgba(255,255,255,.22);border-radius:999px;font-size:11.5px;padding:1px 7px;margin-left:2px}
.catsub{margin:-8px 0 6px}
.packs{display:grid;gap:10px;margin:0 0 22px}
.twbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.plist.tower .twrow{grid-template-columns:auto 44px 56px 1fr auto auto;align-items:center}
.plist.tower .twrow.off{opacity:.45}
.twsz{font-weight:600;font-size:15px;text-align:center}
.twsel{display:flex;gap:8px;flex-wrap:wrap}
#poref{border:1px solid var(--line-strong);border-radius:7px;padding:6px 9px;background:var(--surface);color:var(--fg);font:inherit;font-size:13.5px}
.twsel select{border:1px solid var(--line-strong);border-radius:6px;padding:5px 8px;background:var(--surface);color:var(--fg);font:inherit;font-size:13.5px}
.plist.tower .tog{margin-right:2px}
@media (max-width:640px){.plist.tower .twrow{grid-template-columns:auto 34px 1fr auto;row-gap:8px}.plist.tower .twrow .th{display:none}.plist.tower .twsel{grid-column:3/-1}.plist.tower .pe{grid-column:3}}
.packbanner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;text-align:left;background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 12px 12px;cursor:pointer;color:var(--fg)}
.packbanner:hover{border-color:var(--line-strong)}
.pbimgs{display:flex}
.pbimgs span{width:64px;height:64px;border-radius:8px;background:#F2F2F2;overflow:hidden;border:2px solid var(--tint);margin-left:-14px}
.pbimgs span:first-child{margin-left:0}
.pbimgs img{width:100%;height:100%;object-fit:contain;transform:scale(1.2)}
.pbtxt{display:grid;gap:2px}
.pbtxt b{font-size:16px}
.packbanner .tbtn{white-space:nowrap}
@media (max-width:620px){.packbanner{grid-template-columns:1fr}.pbimgs span{width:52px;height:52px}}
.pack{display:grid;gap:26px}
.pgroup{display:grid;gap:12px}
.pgroup h2 small{font-weight:400;margin-left:8px}
.plist{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.prow{display:grid;grid-template-columns:56px 1fr auto 70px 90px;align-items:center;gap:14px;padding:8px 16px 8px 10px;border-top:1px solid var(--line)}
.prow:first-child{border-top:0}
.prow .th{width:56px;height:56px;border-radius:8px;background:#F2F2F2;overflow:hidden}
.prow .th img{width:100%;height:100%;object-fit:contain;transform:scale(1.15)}
.prow .nm{display:grid;line-height:1.3}
.prow .nm small{color:var(--muted);font-size:12.5px}
.prow .st{position:static;width:8px;height:8px}
.pq input{width:56px;height:36px;text-align:center;border:1px solid var(--line-strong);border-radius:7px;background:var(--bg);color:var(--fg);font-size:14px}
.pq.has input{background:var(--tint-strong);border-color:var(--accent);font-weight:600}
.prow .pe{text-align:right;display:grid;line-height:1.2;font-weight:600}
.prow .pe small{font-weight:400;color:var(--muted);font-size:11px}
.pgrid td.cell input{width:54px}
.packfoot{position:sticky;bottom:84px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:12px 16px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.packfoot .sum2{font-size:15px}.packfoot .sum1{font-size:13px;margin-top:3px}
.packfoot .pacts{display:flex;gap:8px;flex-wrap:wrap}
#packinfo{flex:1 1 360px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .prow .th,:root:not([data-theme="light"]) .pbimgs span{background:#C2C2C2}:root:not([data-theme="light"]) .prow .th img,:root:not([data-theme="light"]) .pbimgs img{filter:brightness(.8)}}
:root[data-theme="dark"] .prow .th,:root[data-theme="dark"] .pbimgs span{background:#C2C2C2}
@media (max-width:760px){.packfoot{position:static}.prow{grid-template-columns:48px 1fr auto 60px;gap:10px}.prow .th{width:48px;height:48px}.prow .pe{grid-column:2/5;text-align:left;display:block}}
/* Dashboard */
.dash{display:grid;grid-template-columns:1.15fr 1.15fr .9fr;gap:14px;margin-bottom:26px}
@media (max-width:980px){.dash{grid-template-columns:1fr 1fr}.dash .contact{grid-column:1/-1}}
@media (max-width:640px){.dash{grid-template-columns:1fr}}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:12px;align-content:start}
.dh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dh h2{font-size:17px;margin:0}
.demo{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--warn);border:1px solid currentColor;border-radius:999px;padding:1px 8px;vertical-align:middle}
.lo{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lo>div{display:grid}
.pill{font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--tint);white-space:nowrap}
.pill.s-versendet{background:color-mix(in srgb,var(--st-y) 22%,transparent)}
.pill.s-zugestellt{background:var(--tint-strong);color:var(--accent)}
.pill.s-offen{background:var(--tint)}
.thumbs{display:flex;gap:6px;flex-wrap:wrap}
.thumbs span{width:48px;height:48px;border-radius:8px;background:#F2F2F2;overflow:hidden;display:grid;place-items:center}
.thumbs img{width:100%;height:100%;object-fit:contain;transform:scale(1.15)}
.thumbs .more{font-size:12px;color:var(--muted);background:var(--tint)}
.dacts{display:flex;gap:8px;flex-wrap:wrap}
.chk{display:grid;gap:8px}
.ci{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center}
.ci .th,.ol .th,.tcard .th{border-radius:8px;background:#F2F2F2;overflow:hidden;display:block}
.ci .th{width:40px;height:40px}
.ci .th img,.ol .th img,.tcard .th img{width:100%;height:100%;object-fit:contain;transform:scale(1.15)}
.ci .nm{display:grid;line-height:1.25;min-width:0}
.ci .nm b{font-size:13.5px;font-weight:600}
.ci .nm small{font-size:12px;color:var(--muted)}
.ib.add{width:auto;padding:0 10px;height:30px;border-radius:999px;border:1px solid var(--line-strong);font-weight:600;font-size:12.5px}
.ib.add:hover{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.dcard.contact{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.dcard.contact h2{color:var(--on-primary)}
.contact .who{display:flex;gap:14px;align-items:center}
.contact .who b{font-size:17px}
.contact .role{font-size:13px;opacity:.78}
.contact .who>div{display:grid}
.contact .av{width:52px;height:52px;border-radius:50%;background:var(--on-primary);color:var(--primary);display:grid;place-items:center;font-weight:600;font-size:17px;letter-spacing:.02em}
.contact .cl2{display:grid;gap:8px;font-size:14px;padding:4px 0}
.contact .cl2 a{color:var(--on-primary);text-decoration:none;display:flex;gap:10px;align-items:center}
.contact .cl2 a:hover span{text-decoration:underline}
.contact .cl2 svg{width:17px;height:17px;opacity:.8;flex:0 0 auto}
.contact .book{justify-content:center;text-decoration:none;background:var(--on-primary);color:var(--primary);border-color:var(--on-primary);margin-top:4px}
.contact .book:hover{background:#fff}
.trend{margin-top:26px;display:grid;gap:12px}
.trow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.tcard{position:relative;display:grid;gap:4px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;color:var(--fg)}
.tcard:hover{border-color:var(--line-strong)}
.tcard .th{aspect-ratio:1/1;width:100%}
.tcard b{font-size:13px;line-height:1.25}
.tcard small{font-size:12px;color:var(--muted)}
.tcard .rk{position:absolute;top:8px;left:8px;z-index:1;background:var(--primary);color:var(--on-primary);border-radius:999px;font-size:11px;font-weight:600;padding:1px 7px}
.orders{display:grid;gap:10px}
.order{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.order summary{display:grid;grid-template-columns:1fr auto auto auto 20px;gap:16px;align-items:center;padding:14px 18px;cursor:pointer;list-style:none}
.order summary::-webkit-details-marker{display:none}
.order .ono{display:grid}
.order .chev svg{width:16px;height:16px;transition:transform .2s}
.order[open] .chev svg{transform:rotate(90deg)}
.obody{padding:0 18px 16px;display:grid;gap:12px}
.olines{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ol{display:grid;grid-template-columns:40px 1fr 50px 80px 90px;gap:12px;align-items:center;padding:7px 12px;border-top:1px solid var(--line);font-size:13.5px}
.ol:first-child{border-top:0}
.ol .th{width:40px;height:40px}
.ol.gone{color:var(--muted)}.ol.gone .th{background:var(--line)}
.order .osrc{display:inline-block;vertical-align:2px;font-weight:500;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:8px;white-space:nowrap}
.orders .more{justify-self:start;margin-top:4px}
.ol .nm{display:grid;line-height:1.25}
.ol .nm small{color:var(--muted);font-size:12px}
.ol .num{text-align:right}
@media (max-width:640px){.order summary{grid-template-columns:1fr auto;gap:6px 12px}.order summary>.num{grid-column:1}.order .chev{display:none}.ol{grid-template-columns:40px 1fr auto}.ol>.num:nth-of-type(2){display:none}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .thumbs span,:root:not([data-theme="light"]) .ci .th,:root:not([data-theme="light"]) .ol .th,:root:not([data-theme="light"]) .tcard .th{background:#C2C2C2}:root:not([data-theme="light"]) .thumbs img,:root:not([data-theme="light"]) .ci .th img,:root:not([data-theme="light"]) .ol .th img,:root:not([data-theme="light"]) .tcard .th img{filter:brightness(.8)}}
.prow.chkrow{grid-template-columns:56px 1fr auto auto 90px}
@media (max-width:760px){.prow.chkrow{grid-template-columns:48px 1fr auto}.prow.chkrow .st{display:none}.prow.chkrow .pe{grid-column:2/4}}
/* Größentabelle */
.szi{margin-left:4px;width:15px;height:15px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);font-size:10px;font-weight:600;line-height:13px;padding:0;cursor:pointer;vertical-align:1px;font-family:Georgia,serif;font-style:italic}
.szi:hover{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.sizepanel{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:14px 0;scroll-margin-top:110px}
.sizepanel summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;flex-wrap:wrap}
.sizepanel summary::-webkit-details-marker{display:none}
.sizepanel summary svg{width:20px;height:20px;color:var(--accent)}
.sizepanel summary .chev{margin-left:auto}
.sizepanel summary .chev svg{width:16px;height:16px;transition:transform .2s;color:var(--muted)}
.sizepanel[open] summary .chev svg{transform:rotate(90deg)}
.sizetab{display:grid;border-top:1px solid var(--line)}
.sz{display:grid;grid-template-columns:70px minmax(170px,.8fr) 2fr;gap:14px;padding:10px 16px;border-top:1px solid var(--line);font-size:13.5px;align-items:start}
.sz:first-child{border-top:0}
.sz .s{font-weight:700;font-size:15px}
.sz .d{color:var(--fg)}
.sz .b{color:var(--muted)}
.sz.hl{background:var(--tint-strong)}
.sizepanel>p{padding:10px 16px 14px;margin:0;border-top:1px solid var(--line)}
@media (max-width:640px){.sz{grid-template-columns:52px 1fr}.sz .b{grid-column:2}}
/* Lookbook */
.looks{margin-top:26px;display:grid;gap:12px}
.lrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:12px;overflow-x:auto;padding-bottom:4px}
.lcard{display:grid;gap:4px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--fg)}
.lcard .li{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--tint)}
.lcard .li img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.lcard:hover .li img{transform:scale(1.03)}
.lcard b{font-size:15px;margin-top:4px}
.lcard small{color:var(--muted);font-size:12.5px}
.lookhead{margin-bottom:18px}
.shoot{columns:3 260px;column-gap:12px;margin:0 0 28px}
.shoot .sh{display:block;width:100%;margin:0 0 12px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--tint);cursor:zoom-in;break-inside:avoid}
.shoot .sh img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.shoot .sh:hover img{transform:scale(1.02)}
.lbx{position:fixed;inset:0;z-index:80;background:rgba(10,20,14,.92);display:grid;place-items:center;padding:48px 56px}
.lbx img{max-width:100%;max-height:calc(100vh - 96px);object-fit:contain;border-radius:8px}
.lbx button{position:absolute;border:0;background:rgba(250,249,247,.12);color:#FAF9F7;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;font-size:26px;line-height:1}
.lbx button:hover{background:rgba(250,249,247,.24)}
.lbx-x{top:14px;right:14px}.lbx-x svg{width:20px;height:20px}
.lbx-p{left:10px;top:50%;transform:translateY(-50%)}.lbx-n{right:10px;top:50%;transform:translateY(-50%)}
.lbx-c{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#FAF9F7;font-size:13px;opacity:.8}
@media (max-width:560px){.lbx{padding:56px 8px}.shoot{columns:2 140px;column-gap:8px}.shoot .sh{margin-bottom:8px}}
.lookhero{display:grid;grid-template-columns:1.3fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:10px}
.lh-img{min-height:340px;background:var(--tint)}
.lh-img img{width:100%;height:100%;object-fit:cover;display:block}
.lh-txt{padding:30px;display:grid;gap:10px;align-content:center}
@media (max-width:760px){.lookhero{grid-template-columns:1fr}.lh-img{min-height:240px;max-height:320px}}
/* Vororder */
.preorder{margin-top:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;background:var(--tile3);color:var(--on-tile3);border-radius:14px;padding:22px 24px}
.preorder h2{margin:4px 0 6px}
.preorder p{margin:0;max-width:62ch}
.po-dates{display:flex;gap:26px;margin-top:12px}
.po-dates span{display:grid}
.po-dates small{font-size:12px;opacity:.8}
.po-dates b{font-size:18px}
.cathead + .packs + .preorder, .cathead + .preorder{margin:0 0 22px}
/* Danke + Kit */
.thanks{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px;display:grid;gap:12px;justify-items:start}
.thanks .ok{width:48px;height:48px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center}
.thanks .ok svg{width:26px;height:26px}
.kitbox{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;width:100%;background:var(--tint);border-radius:12px;padding:18px 20px;margin:8px 0}
.kitbox h2{margin:0 0 4px;font-size:18px}
.kitdl{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:16px 20px;margin:0 0 22px;border-radius:14px;background:var(--tint)}
.kitdl>div{display:grid;gap:2px}.kitdl b{font-size:16px}
.kitpics{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.kitpics figure{margin:0;display:grid;gap:6px}
.kitpics a{display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#F2F2F2}
.kitpics img{width:100%;height:100%;object-fit:contain}
.kitpics figcaption{display:grid;line-height:1.3}
.kitpics small{color:var(--muted);font-size:12px}
.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cap{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:8px}
.cap .ch{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cap pre{white-space:pre-wrap;font-family:var(--font);font-size:13.5px;margin:0;color:var(--fg)}
.kitt{width:100%;border-collapse:collapse;font-size:13.5px}
.kitt th,.kitt td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}
.kitt th{font-weight:600;background:var(--tint)}
.addrl{margin-top:-6px}
.setcfg.one{gap:16px}
.colorbar{display:flex;gap:12px;align-items:flex-start}
.colorbar .cbl{font-weight:600;padding-top:7px;min-width:56px;border:0}
.sws{display:flex;flex-wrap:wrap;gap:6px}
.swb{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:5px 12px 5px 6px;font-size:13.5px;cursor:pointer}
.swb:hover{border-color:var(--line-strong)}
.swb[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.swb .dot{width:18px;height:18px}
.swb .badge{background:var(--primary);color:var(--on-primary);border-radius:999px;font-size:11px;font-weight:600;padding:1px 7px;margin-left:2px}
.szq{display:flex;flex-wrap:wrap;gap:6px}
.sq{display:grid;justify-items:center;gap:3px;cursor:text;min-width:52px}
.sq span{font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.sq .st{position:static;display:inline-block;width:6px;height:6px}
.sq input{width:52px;height:36px;text-align:center;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);color:var(--fg);font-size:14px;font-variant-numeric:tabular-nums}
.sq input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 30%,transparent)}
.sq.has input{background:var(--tint-strong);border-color:var(--accent);font-weight:600}
.sq.na i,.sq.red i{display:grid;place-items:center;width:52px;height:36px;border-radius:7px;font-style:normal;font-size:11px;color:var(--muted);background:repeating-linear-gradient(135deg,transparent 0 6px,var(--tint) 6px 7px)}
.sq.red i{color:var(--st-r);background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--st-r) 16%,transparent) 6px 8px)}
.setcfg.one .part{grid-template-columns:auto 56px minmax(130px,.8fr) minmax(0,2fr) 90px}
.setcfg.one .part.lead{background:var(--tint)}
@media (max-width:760px){.setcfg.one .part{grid-template-columns:auto 48px 1fr auto}.colorbar{flex-direction:column;gap:6px}.colorbar .cbl{padding-top:0}}
.setrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--bg)}
.setrow .l{display:flex;gap:8px;align-items:center;font-size:13.5px;min-width:0}
.setrow input{width:52px;height:34px;text-align:center;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);font-variant-numeric:tabular-nums}
.setfoot{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.note{font-size:13px;color:var(--muted)}
.note b{color:var(--fg);font-weight:500}

/* Cart */
.cart{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
@media (max-width:900px){.cart{grid-template-columns:1fr}}
.cgroup{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.cgroup .gh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cgroup .gh button{background:none;border:0;padding:0;font-weight:600;cursor:pointer;text-align:left;color:var(--fg)}
.cgroup .gh button:hover{color:var(--accent)}
.cl{display:grid;grid-template-columns:minmax(0,1fr) auto 70px 92px 32px;gap:10px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.cl:last-child{border-bottom:0}
.cl .what{display:flex;gap:10px;align-items:center;min-width:0}
.cl .what span{display:grid;line-height:1.25;min-width:0}
.cl .what small{font-size:11.5px;color:var(--muted)}
.cl .what small .st{display:inline-block;width:7px;height:7px;margin-right:3px;vertical-align:1px}
.cl input{width:62px;height:32px;text-align:center;border:1px solid var(--line-strong);border-radius:7px;background:var(--bg);font-variant-numeric:tabular-nums}
.cl .ek{color:var(--muted);text-align:right;font-size:12.5px}
.cl .tot{text-align:right;font-weight:500}
@media (max-width:560px){.cl{grid-template-columns:minmax(0,1fr) 62px 80px 28px;row-gap:6px}.cl .ek{display:none}.cl .what{grid-column:1/-1}.cl input{grid-column:2}}
.summary{position:sticky;top:90px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px}
.summary .row{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.summary .row.total{font-size:17px;font-weight:600;border-top:1px solid var(--line);padding-top:12px}
.summary select{border:1px solid var(--line-strong);border-radius:6px;padding:6px 8px;background:var(--bg);font-size:13.5px;max-width:100%}
.prog{height:8px;background:var(--tint);border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .25s}
.msg{font-size:13px;padding:10px 12px;border-radius:8px;background:var(--tint)}
.msg.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.msg.ok{color:var(--accent)}
.empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r);padding:36px 24px;display:grid;gap:12px;justify-items:start}
.checkout{display:grid;gap:10px;border:1px solid var(--accent);border-radius:var(--r);padding:16px;background:var(--tint)}
textarea.qo{width:100%;min-height:200px;border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 14px;background:var(--surface);font-variant-numeric:tabular-nums;font-size:14px;line-height:1.6;resize:vertical}
.qores{margin-top:16px}
.qores table{width:100%;border-collapse:collapse;font-size:13.5px}
.qores td,.qores th{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
.qores th{font-weight:500;color:var(--muted);font-size:12.5px}
.bad{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:50;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:560px){.proto span:nth-child(2){display:none}.mx th.rowh{min-width:124px;padding-inline:10px}.mx th.rowh .rn{gap:8px}}
.foot{max-width:1180px;margin:0 auto;padding-inline:var(--gutter);padding-block:0 120px;font-size:12px;color:var(--muted)}

/* v39: Testansicht-Auswahl, Admin-Leiste, Startpakete, Konto, Reklamationen, Preisschilder */
.protosw{display:inline-flex;align-items:center;gap:6px}
.protosw select{font-size:12px;border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px;background:var(--surface);max-width:290px}
.adminbar{background:var(--primary);color:var(--on-primary)}
.adminbar .ab-in{max-width:1180px;margin:0 auto;padding:8px var(--gutter);display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;font-size:13px}
.ab-tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:1px 9px}
.ab-sel{display:flex;gap:8px;align-items:center}
.ab-sel select{background:var(--on-primary);color:#111;border:0;border-radius:8px;padding:5px 8px;font-size:13px;max-width:260px}
.ab-info{opacity:.9}
.adminbar .btn.ghost{color:var(--on-primary);border-color:color-mix(in srgb,var(--on-primary) 45%,transparent);margin-left:auto;padding:5px 12px;font-size:13px}
.prepnote{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin:0 0 22px;border-radius:14px;background:var(--tint);border:1px solid var(--tint-strong)}
.prepnote .ic{width:38px;height:38px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:none}
.prepnote .ic svg{width:19px;height:19px}
.prepnote>div{display:grid;gap:1px;flex:1;min-width:200px}
.startcta{display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap;background:var(--primary);color:var(--on-primary);border-radius:14px;padding:22px 24px;margin:18px 0 26px}
.startcta h2{margin:2px 0 4px;color:inherit}
.startcta .eyebrow,.startcta .note{color:color-mix(in srgb,var(--on-primary) 78%,transparent)}
.startcta .btn.primary{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary)}
.starts{margin:0 0 30px;scroll-margin-top:120px}
.starts .dh{margin-bottom:12px}
.starts .dh{display:flex;align-items:baseline;gap:12px}
.sgrid{display:grid;grid-template-columns:minmax(120px,1.1fr) repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
.sgh{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.sgcat{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;text-align:left;font:inherit;color:var(--fg)}
.sgcat .th{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none;background:#F3F2EF}
.sgcat .th img{width:100%;height:100%;object-fit:cover}
.sgcat b{font-size:15px}
.sgc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;align-items:stretch;min-width:0}
.sgc:hover{border-color:var(--line-strong)}
.sgv{flex:1;min-width:0;border:0;background:none;padding:10px 12px;display:grid;gap:1px;text-align:left;cursor:pointer;font:inherit;color:var(--fg)}
.sgv b{font-size:15px;font-weight:600}
.sgv span{font-size:12.5px;color:var(--muted)}
.sgadd{align-self:center;margin-right:6px;flex:none;color:var(--primary);width:34px;height:34px;border-radius:50%}
.sgadd:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.sgadd svg{width:18px;height:18px}
.sall{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) 1fr}
.simg{display:grid;gap:2px;border:0;padding:0;background:var(--line);cursor:pointer}
.simg span{background:#F3F2EF;overflow:hidden}
.sbody{padding:14px 16px 16px;display:grid;gap:6px;align-content:start}
.sfacts{font-size:14px}
.sbody .dacts{margin-top:6px}
.sall .simg{grid-template-columns:repeat(4,minmax(0,1fr));aspect-ratio:auto;height:180px;overflow:hidden}
.sall .simg span{height:180px;min-width:0}
.sall .simg img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;display:block}
@media (max-width:700px){.sgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sgrid>span:first-child{display:none}.sgh{text-align:center}.sgcat{grid-column:1/-1;margin-top:6px}.sgcat .th{width:32px;height:32px;border-radius:8px}
  .sgc{flex-direction:column}.sgv{padding:8px 9px}.sgv b{font-size:14px}.sgadd{align-self:flex-end;margin:0 6px 6px 0}.sall{grid-template-columns:1fr}.sall .simg,.sall .simg span{height:110px}}
.acchead{align-items:flex-end}
.dash2{grid-template-columns:1.3fr 1fr}
@media (max-width:760px){.dash2{grid-template-columns:1fr}}
.addrs{display:grid;gap:10px}
.addrs>div{display:grid;gap:1px}
.custlist{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.cuh,.cur{display:grid;grid-template-columns:1.6fr .9fr 1.2fr 1fr auto;gap:12px;align-items:center;padding:12px 16px}
.cuh{font-size:12.5px;color:var(--muted);font-weight:500;background:var(--tint)}
.cur{border-top:1px solid var(--line)}
.cur.on{background:color-mix(in srgb,var(--tint) 55%,var(--surface))}
.cur small{display:block;color:var(--muted);font-size:12px}
.cn{display:grid}
.cact{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){.cuh{display:none}.cur{grid-template-columns:1fr auto;row-gap:6px}.cur .cact{grid-column:1/-1;justify-content:flex-start}}
.pill.s-neu{background:color-mix(in srgb,var(--sun) 28%,transparent)}
.pill.s-pruefung{background:color-mix(in srgb,var(--st-y) 22%,transparent)}
.pill.s-erledigt{background:var(--tint-strong);color:var(--accent)}
.claimform [hidden]{display:none!important}
.claimform{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:14px}
.cfgrid{display:grid;grid-template-columns:1.25fr 2fr 80px 1.4fr;gap:12px}
@media (max-width:900px){.cfgrid{grid-template-columns:1fr 1fr}.cfgrid .wide{grid-column:1/-1}}
@media (max-width:520px){.cfgrid{grid-template-columns:1fr}}
.fld{display:grid;gap:5px;font-size:13px;font-weight:500;min-width:0}
.fld>span{color:var(--muted)}
.fld select,.fld input,.fld textarea{width:100%;font-weight:400;font-size:14.5px;border:1px solid var(--line-strong);border-radius:8px;padding:9px 10px;background:var(--surface);min-width:0}
.fld textarea{resize:vertical}
.cfitem{display:flex;gap:12px;align-items:center}
.cfitem .th,.crow2 .th{width:52px;height:52px;border-radius:8px;background:#F3F2EF;overflow:hidden;flex:none}
.cfitem .th img,.crow2 .th img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cfitem .nm,.crow2 .nm{display:grid;min-width:0}
.cfitem small,.crow2 small{color:var(--muted);font-size:12.5px}
.phs{display:flex;gap:8px;flex-wrap:wrap}
.phs:empty{display:none}
.ph{position:relative;width:88px;height:88px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .ib{position:absolute;top:4px;right:4px;width:26px;height:26px;background:rgba(17,17,17,.7);color:#fff;border-radius:50%}
.phbtns{display:flex;gap:8px;flex-wrap:wrap}
.phbtns .btn{position:relative}
.drop{display:grid;justify-items:center;gap:4px;padding:22px;border:1.5px dashed var(--line-strong);border-radius:12px;cursor:pointer;text-align:center;position:relative;font-weight:400}
.drop svg{width:26px;height:26px;color:var(--accent)}
.drop.over,.drop:hover{border-color:var(--accent);background:var(--tint)}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.claims{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.claims.mini{border:0;border-radius:0}
.crow2{display:grid;grid-template-columns:52px 1fr auto auto auto;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.crow2:first-child{border-top:0}
.claims.mini .crow2{padding:8px 0;grid-template-columns:44px 1fr auto}
.claims.mini .cph,.claims.mini .demo{display:none}
.claims.mini .th{width:44px;height:44px}
.cph{display:flex;gap:4px}
.cph img{width:34px;height:34px;border-radius:6px;object-fit:cover}
@media (max-width:640px){.crow2{grid-template-columns:44px 1fr auto}.crow2 .cph,.crow2 .demo{display:none}}
.tagrow{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.tagprev{width:280px;height:148px;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06);background:#fff}
.tagctl{display:grid;gap:10px;justify-items:start}

/* v40 */
.rq{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.rq .sq{width:70px}
.sq.ovr input{border-color:var(--accent);background:color-mix(in srgb,var(--tint) 60%,var(--surface))}
.sugg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.sugg b{color:var(--fg)}
.rqbar{width:54px;height:6px;border-radius:999px;background:var(--line);overflow:hidden;display:inline-block}
.rqbar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.ovrtag{font-size:11px;font-weight:600;color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:0 8px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:12.5px}
.bedupd{margin-left:auto}
.twbar{flex-wrap:wrap}
.addonrow{display:grid;grid-template-columns:auto 52px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface);cursor:pointer;position:relative}
.addonrow.on{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--tint) 50%,var(--surface))}
.addonrow .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:transparent}
.addonrow.on .box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.addonrow .box svg{width:14px;height:14px}
.addonrow .th{width:52px;height:52px;border-radius:8px;overflow:hidden}
.addonrow .th img{width:100%;height:100%}
.addonrow .nm{display:grid}.addonrow small{color:var(--muted);font-size:12.5px}
.addonrow .pe small{display:block;font-size:11px;color:var(--muted)}
.addtobar{background:var(--tint);border-bottom:1px solid var(--tint-strong)}
.addtobar .ab-in{max-width:1180px;margin:0 auto;padding:8px var(--gutter);display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.addtobar .ab-in>span{display:flex;gap:8px;align-items:center;margin-right:auto}
.addtobar svg{width:17px;height:17px}
.addtobar .btn{padding:5px 12px;font-size:13px}

/* v41: Empfehlungen, Live-Showroom */
.recos{display:grid;gap:22px;margin:22px 0 8px}
.reco .rh{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;margin-bottom:10px}
.reco h2{font-size:17px}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:640px){.rgrid{grid-template-columns:1fr}}
.rcard{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rth{width:56px;height:56px;border:0;padding:0;border-radius:8px;background:#F3F2EF;overflow:hidden;cursor:pointer}
.rth img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.rnm{display:grid;min-width:0}.rnm b{font-size:14px}.rnm small{color:var(--muted);font-size:12.5px}
.rev{font-size:12px;color:var(--accent);font-weight:500}
.rbuy{display:grid;gap:6px;justify-items:end}.rbuy .num{font-size:13px}
.rbuy .btn{padding:5px 12px}
.srpage{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:14px;margin-top:8px}
.srpage h2 small{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.srcard{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.srcard>div{display:grid;gap:2px;flex:1;min-width:200px}
.srcard .ic{width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:none}
.srcard .ic svg{width:19px;height:19px}
.srwait{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.srwait i{width:8px;height:8px;border-radius:50%;background:var(--sun);animation:srpulse 1.6s infinite}
@keyframes srpulse{50%{opacity:.3}}
.srdays,.srslots{display:flex;flex-wrap:wrap;gap:8px}
.srdays .chip{display:grid;justify-items:center;gap:0;padding:7px 12px;border-radius:12px;min-width:64px}
.srdays .chip small{font-size:11px;color:var(--muted)}
.srslots .chip{min-width:66px}
.srdays .chip[aria-pressed="true"],.srslots .chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.srdays .chip[aria-pressed="true"] small{color:inherit}
.srslots .chip:disabled{opacity:.35;cursor:default;text-decoration:line-through}
.cn .srt{display:flex;align-items:center;gap:5px;color:var(--primary)!important}
.cn .srt svg{width:13px;height:13px}
.srbook{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--on-primary) 10%,transparent);border-radius:12px;padding:10px 12px}
.srbook .ic{width:32px;height:32px;border-radius:50%;background:var(--on-primary);color:var(--primary);display:grid;place-items:center;flex:none}
.srbook .ic svg{width:17px;height:17px}
.srbook>div{display:grid;flex:1;min-width:140px}.srbook .note{color:inherit;opacity:.85}
.srbook .btn{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.live i{width:8px;height:8px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:srp 1.6s infinite}
@keyframes srp{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}70%{box-shadow:0 0 0 8px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}
.ab-live{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:600;margin-left:auto}
.ab-live i{width:8px;height:8px;border-radius:50%;background:#E5484D}
.adminbar .btn.ab-sr{margin-left:auto}
.adminbar .ab-sr+.btn.ghost,.adminbar .ab-live+.btn.ghost{margin-left:0}
.adminbar .btn svg{width:15px;height:15px}
.srdock{position:fixed;right:16px;bottom:96px;z-index:60;width:320px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 10px 32px rgba(0,0,0,.18);overflow:hidden}
.srh{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;background:var(--primary);color:var(--on-primary)}
.srh .srwho{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srh .ib{color:inherit;width:28px;height:28px}
.srbody{padding:12px;display:grid;gap:10px}
.srdock.min .srbody{display:none}
.srdock.min{width:auto}
.srv{display:grid;grid-template-columns:2fr 1fr;gap:6px}
.srtile{position:relative;aspect-ratio:4/3;border-radius:10px;background:#1E2B22;color:#FAF9F7;display:grid;place-items:center;align-content:center;gap:4px;overflow:hidden}
.srtile.me{background:#2C3A30}
.srtile .av{width:46px;height:46px;border-radius:50%;background:#2F7045;display:grid;place-items:center;font-weight:600;font-size:15px}
.srtile.me .av{width:30px;height:30px;font-size:11px}
.srtile small{font-size:11px;opacity:.85;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srtile .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#8A8F88}
.srtile.on .dot{background:#3CCB7F}
.srs{font-size:13px}
.src{display:flex;gap:6px;flex-wrap:wrap}
.src .btn{padding:6px 10px;font-size:12.5px}
.src .btn svg{width:15px;height:15px}
.srnote{font-size:11.5px;color:var(--muted)}
.srinvite{position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:70;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:10px 14px;box-shadow:0 10px 32px rgba(0,0,0,.18)}
.srinvite>div{display:grid}
@media (max-width:560px){.srdock{bottom:88px;right:8px;left:8px;width:auto;max-width:none}.srv{grid-template-columns:1fr 1fr}.srtile{aspect-ratio:16/10}}

/* v42 */
.proof{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--accent);flex-basis:100%}
.proof .rqbar{width:54px;flex:none}
.proof [data-rqtxt]:empty{display:none}
.chs.pres .eyebrow{color:var(--accent)}
.wzsteps{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 18px;flex-wrap:wrap}
.wzsteps li{flex:1;min-width:120px}
.wzsteps button{width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px 7px 7px;font:inherit;font-size:13.5px;color:var(--muted);text-align:left;cursor:pointer}
.wzsteps button:disabled{cursor:default}
.wzsteps button small{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.wzsteps .stepno{width:24px;height:24px;font-size:12px;flex:none;background:var(--line);color:var(--fg)}
.wzsteps li.on button{border-color:var(--primary);color:var(--fg);font-weight:600}
.wzsteps li.on .stepno,.wzsteps li.done .stepno{background:var(--primary);color:var(--on-primary)}
.wzsteps li.done button{color:var(--fg)}
.wz h2{margin:0 0 14px}
.wz h2 small{font-weight:400;font-size:13px;margin-left:6px}
.wzlines{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.wzline,.wzcol,.wzopt{position:relative;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0;cursor:pointer;font:inherit;color:var(--fg);overflow:hidden;display:grid;align-content:start;transition:border-color .15s,box-shadow .15s}
.wzline:hover,.wzcol:hover,.wzopt:hover{border-color:var(--line-strong)}
.wzline.on,.wzcol.on,.wzopt.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.wzimg{position:relative;display:block;aspect-ratio:16/10;background:#F2F2F2;overflow:hidden}
.wzimg img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.wzimg img.cut{mix-blend-mode:normal;padding:8% 7% 6%;box-sizing:border-box}
.wzbadge{position:absolute;left:10px;top:10px;z-index:1;background:var(--sun);color:#111;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.wzbody{display:grid;gap:8px;padding:12px 14px 14px}
.wzbody b{font-size:17px}
.wzbody ul{margin:0;padding-left:16px;display:grid;gap:3px;font-size:13px;color:var(--muted)}
.wzfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.wzopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wzopt{padding:16px 18px;gap:6px;min-height:120px}
.wzopt b{font-size:17px}
.wzopt span{font-size:13.5px;color:var(--muted);line-height:1.45}
.wzopt small{font-size:13px;margin-top:auto}
.wzcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.wzcn{display:flex;align-items:center;gap:7px;padding:10px 12px}
.wzcn small{color:var(--muted);font-size:12px}
.wzcn .tick{margin-left:auto;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:transparent}
.wzcn .tick svg{width:13px;height:13px}
.wzcol.on .tick{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.wz .dacts{margin-top:18px}
.wzsum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.wzsum span{background:var(--tint);border-radius:999px;padding:4px 12px;font-size:13px}
@media (max-width:700px){.wzcols{grid-template-columns:repeat(2,minmax(0,1fr))}.wzopts{grid-template-columns:1fr}.wzsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.wzsteps li{min-width:0}.wzsteps button{padding:5px 6px 5px 5px;gap:5px;font-size:12px;overflow:hidden}.wzsteps .stepno{width:20px;height:20px;font-size:11px}.wzsteps button small{display:none}}
.bx{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 26px}
.bx h2{margin:0 0 14px}
.bxgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bxgrid article{display:grid;gap:8px;align-content:start}
.bxgrid b{display:flex;align-items:center;gap:8px;font-size:15px}
.bxgrid b .stepno{width:22px;height:22px;font-size:12px}
.bxgrid p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.bxv{height:270px;border-radius:12px;background:#F2F2F2;overflow:hidden;position:relative}
.bxtower{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:10px 12px 10px;height:270px}
.bxbed{display:block;position:relative;aspect-ratio:2.5/1;overflow:hidden;flex:none;min-height:0}
.bxtower>*{position:relative}
.bxtower>*+*{margin-top:-2.4%}
.twcut{display:block;height:auto;flex:none}
.bxbed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;mix-blend-mode:multiply;transform:scale(1.1)}
.bxbed i{position:absolute;right:2px;bottom:4px;font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);background:rgba(242,242,242,.85);padding:0 4px;border-radius:4px}
.bxlib{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px;align-content:center}
.bxsw{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#e9e8e5}
.bxsw img{width:100%;height:100%;object-fit:cover;transform:scale(5);transform-origin:24% 57%}
.bxinl{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px}
.bxinl em{font-style:normal;font-size:20px;font-weight:600;color:var(--muted)}
.bxinl .bxsw.one{width:64px;flex:none}
.bxbox{display:grid;justify-items:center;gap:2px;color:var(--primary);width:70px;flex:none}
.bxbox svg{width:62px;height:40px}
.bxbox small{font-size:11px;color:var(--muted)}
.bxinl .bxbed.solo,.bxinl .twcut.solo{width:42%;flex:none}
.bxfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bxfacts span{display:grid;gap:2px;font-size:13px;color:var(--muted)}
.bxfacts b{font-size:22px;font-weight:600;color:var(--fg);letter-spacing:-.01em}
@media (max-width:820px){.bxgrid,.bxfacts{grid-template-columns:1fr}.bxv{height:220px}.bxtower{height:270px}}
.stepx{font-size:13.5px;color:var(--muted);margin-top:4px;max-width:760px}
.stepx b{color:var(--fg)}

/* Portal (live): Status ohne Prototyp-Entsprechung, Abmelden, Ladezustand */
.pill.s-zahlung{background:color-mix(in srgb,var(--sun) 28%,transparent)}
.pill.s-geplant{background:var(--tint)}
.pill.s-storniert{background:color-mix(in srgb,var(--st-r) 18%,transparent);color:var(--bad)}
.logout{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;padding:6px 8px;text-decoration:none}
.logout:hover{color:var(--fg)}
.foot .logout:first-child{padding-left:0}
#foot{padding-block:0 6px}
main{padding-block-end:56px}
.boot{max-width:560px;margin:80px auto;padding:0 var(--gutter);text-align:center;color:var(--muted)}
.boot b{display:block;color:var(--fg);font-size:18px;margin-bottom:6px}