:root{
  color-scheme: dark;
  --bg:#07080a; --surface:#111316; --line:#1c1e22; --line2:#22252a;
  --text:#f2efe9; --soft:#c9c4ba; --muted:#a7a39b; --dim:#6f6b64;
  --amber:#ffb547; --amber-hi:#ffd08a; --on-amber:#07080a;
  --font:'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --gut:clamp(16px, 4.5vw, 64px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-hi)}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}
.display{margin:0;font-weight:800;font-stretch:70%;text-transform:uppercase;line-height:.92;text-wrap:balance}
.kicker{font-size:13px;font-weight:600;letter-spacing:.22em;color:var(--amber);text-transform:uppercase}
.lead{margin:0;color:var(--soft);max-width:36em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--amber);color:var(--on-amber);font-weight:800;font-size:16px;border-radius:4px;border:0;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--amber-hi);color:var(--on-amber)}
.btn--ghost{background:none;color:var(--text);box-shadow:inset 0 0 0 1px rgba(242,239,233,.3)}
.btn--ghost:hover{background:none;color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.num{font-variant-numeric:tabular-nums}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(7,8,10,.97);border-bottom:1px solid var(--line)}
header .wrap{height:72px;display:flex;align-items:center;gap:40px}
.logo{display:flex}
.logo img{display:block;height:16px;width:auto}
nav{display:flex;gap:28px;flex:1;font-size:15px;font-weight:500}
nav a{color:var(--text)}
nav a[aria-current]{color:var(--amber)}
.cart{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(242,239,233,.3);border-radius:999px;color:var(--text);background:none;cursor:pointer}
.cart b{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--amber);color:var(--on-amber);font-size:12px;display:grid;place-items:center;padding:0 5px}
@media (max-width:760px){nav{display:none} header .wrap{justify-content:space-between}}

/* Hero mit Lichtschalter */
.hero{position:relative;background:#000;min-height:clamp(460px,58vw,680px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;background:#000;transition:filter .8s ease}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,8,10,.95) 0%,rgba(7,8,10,.4) 45%,rgba(7,8,10,0) 75%)}
.hero img{filter:brightness(1.08) contrast(1.05)}
.hero[data-light="off"] img{filter:brightness(.02) saturate(0)}
.hero-copy{position:relative;z-index:1;padding-block:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:18px;width:100%}
.hero h1{font-size:clamp(60px,9vw,136px)}
.hero h1 em{font-style:normal;color:var(--amber);transition:color .4s,text-shadow .4s}
.hero[data-light="on"] h1 em{text-shadow:0 0 40px rgba(255,181,71,.45)}
.hero[data-light="off"] h1 em{color:#5a5040}
.switch{display:inline-flex;align-items:center;gap:14px;background:none;border:0;color:var(--text);font:600 14px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:0;align-self:flex-start}
.switch i{position:relative;width:64px;height:34px;border-radius:17px;background:#2a2c31;box-shadow:inset 0 0 0 1px #3a3d44;transition:.3s}
.switch i::after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#6f6b64;transition:.3s}
.switch[aria-checked="true"] i{background:#3a2a0c;box-shadow:inset 0 0 0 1px var(--amber)}
.switch[aria-checked="true"] i::after{left:34px;background:var(--amber);box-shadow:0 0 18px var(--amber)}

section.block{padding-block:clamp(56px,8vw,100px);display:flex;flex-direction:column;gap:32px}
.block h2{font-size:clamp(44px,5.5vw,80px)}
.head{display:flex;flex-direction:column;gap:14px}

/* Set-Finder */
.finder{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.span-box{background:var(--surface);border:1px solid var(--line2);border-radius:8px;padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:22px}
.span-val{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.span-val b{font-size:clamp(64px,7vw,96px);line-height:1;font-weight:800;font-stretch:70%;color:var(--amber)}
.span-val span{color:var(--muted);font-size:18px}
input[type=range]{width:100%;accent-color:var(--amber);height:28px}
.scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
#galerie{scroll-margin-top:96px}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tiers button{padding:10px 4px;border-radius:4px;border:1px solid var(--line2);background:none;color:var(--muted);font:600 13px/1.2 var(--font);cursor:pointer}
.tiers button[aria-pressed="true"]{border-color:var(--amber);color:var(--text);background:#1d1709}
.result{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.result-img{position:relative;background:#f4f4f2;display:grid;place-items:center;padding:20px;min-height:260px}
.result-img.is3d{background:radial-gradient(circle at 50% 45%,#1d1f25,#08090b 75%);padding:0;min-height:clamp(320px,50vw,440px)}
.light3d{position:absolute;inset:0;cursor:grab;touch-action:none}
.light3d:active{cursor:grabbing}
.light3d canvas{display:block;width:100%!important;height:100%!important}
.switch--sm{position:absolute;left:16px;top:16px;font-size:12px;gap:10px}
.switch--sm i{width:48px;height:26px}
.switch--sm i::after{width:18px;height:18px}
.switch--sm[aria-checked="true"] i::after{left:26px}
.hint3d{position:absolute;left:16px;bottom:12px;font-size:12px;color:var(--muted);pointer-events:none}
.result-img img{max-width:100%;max-height:240px;object-fit:contain}
.result-body{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:16px;background:var(--surface)}
.result-body h3{margin:0;font-size:30px;line-height:1;font-weight:800;font-stretch:75%;text-transform:uppercase}
.result-body p{margin:0;color:var(--soft);font-size:15px}
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px;margin:0}
.specs dt{color:var(--muted)}
.specs dd{margin:0;font-weight:600}
.addon{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--soft);cursor:pointer}
.addon input{accent-color:var(--amber);width:18px;height:18px}
.total{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--line2)}
.total b{font-size:34px;font-weight:800;font-stretch:80%}
.total small{display:block;font-size:12px;color:var(--muted);font-weight:400}
@media (min-width:981px){.finder{align-items:start}.span-box{position:sticky;top:96px}}
@media (max-width:980px){.finder{grid-template-columns:1fr}}
@media (max-width:640px){.result-img:not(.is3d){min-height:200px}}

/* Produkte */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line2);border-radius:8px;overflow:hidden;color:var(--text)}
.card:hover{border-color:#3a3d44;color:var(--text)}
.card-img{aspect-ratio:4/3;background:#0d0e11;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.04)}
.card-img.light{background:#f4f4f2}
.card-img.light img{object-fit:contain;padding:18px}
.card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{margin:0;font-size:22px;font-weight:700}
.card-body p{margin:0;font-size:15px;color:var(--muted)}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px}
.card-foot b{font-size:22px;font-weight:800;font-stretch:85%}
.chip{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--amber);border:1px solid rgba(255,181,71,.35);border-radius:999px;padding:3px 10px}
@media (max-width:980px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

/* Größentabelle */
.table{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:640px}
th{font-size:12px;font-weight:700;letter-spacing:.14em;color:#8f8b83;text-align:left;padding:0 14px 14px 0;text-transform:uppercase}
td{padding:16px 14px 16px 0;border-top:1px solid var(--line2);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:1px solid var(--line2)}
td:first-child{font-weight:700}
tr.on td{color:var(--amber)}

/* Galerie */
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;aspect-ratio:1.6/1}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:6px;background:#0d0e11}
.gallery figure:first-child{grid-row:span 3}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr;aspect-ratio:auto}.gallery figure{aspect-ratio:4/3}.gallery figure:first-child{grid-column:span 2;grid-row:auto}}

/* Steuerungen */
.ctrl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ctrl .card-body h3{font-size:22px}
.ctrl .card-foot .more{font-weight:700;font-size:15px;color:var(--amber)}
@media (max-width:980px){.ctrl{grid-template-columns:1fr}.ctrl .card-img{aspect-ratio:16/10}}

footer{border-top:1px solid var(--line);padding-block:36px;font-size:14px;color:#8f8b83}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#8f8b83;margin-left:24px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;transition:.25s;background:var(--surface);border:1px solid var(--amber);color:var(--text);padding:12px 20px;border-radius:6px;font-size:15px;pointer-events:none;z-index:20;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
[hidden]{display:none!important}

.o_lucid_beleuchtung .guides{display:flex;flex-direction:column;gap:10px}
.o_lucid_beleuchtung .guides .g{margin:0;font-size:18px}