/* KAYKU Locker — Verkaufsseite in der Registertafel-Welt.
   UI bleibt monochrom (Haarlinien, Slate); Farbe lebt ausschließlich im
   3D-Produkt (Content). Kein box-shadow im UI; Schattierung am Locker ist
   Beleuchtung des Objekts, nicht Elevation. */

/* ── Hero-Ergänzungen ── */
.zurueck-oben{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 26px;color:var(--dim);font-size:.9rem;transition:color 160ms var(--ease)}
.zurueck-oben:hover{color:var(--text)}
.zurueck-oben svg{width:14px;height:14px;transform:rotate(180deg)}
.hero.locker-hero{padding-bottom:clamp(22px,3vw,34px)}
.locker-hero h1{font-size:clamp(2.1rem,4.4vw,3.45rem);max-width:19ch;text-wrap:pretty}
.held-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:clamp(24px,4vw,60px);align-items:center}
.held-buehne{position:relative;height:clamp(320px,30vw,440px);align-self:stretch}
.held-buehne .szene{perspective:1200px}
.held-buehne .bodenlinie{position:absolute;left:6%;right:6%;bottom:9%;height:1px;background:var(--line)}
@media (max-width:960px){.held-grid{grid-template-columns:1fr}.held-buehne{display:none}}
.held-buehne .tuer{cursor:default;pointer-events:none}
/* Weiches Umfärben des Produkts (progressive enhancement) */
@property --korpus{syntax:'<color>';inherits:true;initial-value:#2e3238}
@property --tuer{syntax:'<color>';inherits:true;initial-value:#e25303}
.schrank{transition:--korpus 500ms var(--ease),--tuer 500ms var(--ease)}

/* CTA in Zeilen-Grammatik: eine Registerzeile als Handlung */
.cta-zeile{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(20px,2.6vw,30px) clamp(10px,1.4vw,18px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  --akzent:#3c3e46;transition:background 200ms var(--ease)}
.cta-zeile:hover{background:color-mix(in srgb,var(--akzent) 6%,transparent)}
.cta-zeile b{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:800;letter-spacing:-.02em}
.cta-zeile .ziel{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;color:var(--muted);white-space:nowrap}
.cta-zeile .ziel svg{width:15px;height:15px;transition:transform 200ms var(--ease)}
.cta-zeile:hover .ziel svg{transform:translateX(4px)}
.cta-zeile::after{content:"";position:absolute;inset:0}

/* ── Sektionen ── */
.sek{padding:clamp(40px,6vw,84px) 0}
.sek .kopfzeile{max-width:56ch;margin-bottom:clamp(24px,3.4vw,40px)}
.sek h2{margin:0;font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.022em;line-height:1.12;text-wrap:balance}
.sek h2 .leise{color:var(--dim)}
.sek .kopfzeile p{margin:.9rem 0 0;color:var(--muted);text-wrap:pretty}

/* ── Konfigurator-Layout ── */
.konfig{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,64px);align-items:start}
.buehne-halter{position:sticky;top:86px}
.buehne{position:relative;height:clamp(380px,46vw,560px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.buehne:active{cursor:grabbing}
.buehne .boden{position:absolute;left:8%;right:8%;bottom:12%;height:1px;background:var(--line)}
.buehne .hinweis{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:var(--dim);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;pointer-events:none}
/* Technische Eckmarken der Bühne (Haarlinien-Welt) */
.ecke{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.9}
.ecke::before,.ecke::after{content:"";position:absolute;background:var(--line-2)}
.ecke::before{width:14px;height:1px}
.ecke::after{width:1px;height:14px}
.ecke.olinks{top:10px;left:10px}.ecke.orechts{top:10px;right:10px}
.ecke.ulinks{bottom:10px;left:10px}.ecke.urechts{bottom:10px;right:10px}
.ecke.orechts::before,.ecke.urechts::before{right:0}
.ecke.orechts::after{right:0}.ecke.urechts::after{right:0}
.ecke.ulinks::before,.ecke.urechts::before{bottom:0}
.ecke.ulinks::after{bottom:0}.ecke.urechts::after{bottom:0}
/* Bodenschatten des Produkts (Content-Beleuchtung, kein UI-Schatten) */
.grundschatten{position:absolute;left:50%;bottom:8%;width:min(72%,520px);height:34px;transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);pointer-events:none}

/* ── Der Locker (CSS-3D) ── */
.szene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1400px}
.dreher{transform-style:preserve-3d;transform:scale(var(--skala,1)) rotateX(calc(var(--rx,6deg))) rotateY(var(--ry,-24deg))}
@keyframes wiegen{0%,100%{transform:rotateY(-7deg)}50%{transform:rotateY(7deg)}}
.js .pendel{transform-style:preserve-3d;animation:wiegen 14s ease-in-out infinite}
.js .pendel.still{animation:none}
@media (prefers-reduced-motion:reduce){.js .pendel{animation:none}}

.schrank{position:relative;transform-style:preserve-3d;display:flex;align-items:flex-end}
/* Produktfarben (JS setzt --korpus/--tuer); Ableitungen = Beleuchtung des Objekts */
.schrank{--korpus:#2e3238;--tuer:#e25303;
  --k-front:var(--korpus);
  --k-seite:color-mix(in srgb,var(--korpus) 72%,black);
  --k-oben:color-mix(in srgb,var(--korpus) 86%,white 6%);
  --t-front:var(--tuer);
  --t-dunkel:color-mix(in srgb,var(--tuer) 62%,black);
  --hoehle:#0a0b0d}
.saeule{position:relative;transform-style:preserve-3d;width:var(--w);height:var(--h)}
.flaeche{position:absolute;backface-visibility:hidden}
.f-front{inset:0;transform:translateZ(calc(var(--d)/2));background:linear-gradient(100deg,color-mix(in srgb,var(--k-front) 92%,white 4%),var(--k-front) 46%,color-mix(in srgb,var(--k-front) 84%,black))}
.f-ruecken{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:var(--k-seite)}
.f-links,.f-rechts{top:0;bottom:0;width:var(--d);left:calc(50% - var(--d)/2)}
.f-links{transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:linear-gradient(90deg,color-mix(in srgb,var(--k-seite) 88%,black),var(--k-seite))}
.f-rechts{transform:rotateY(90deg) translateZ(calc(var(--w)/2));background:linear-gradient(90deg,var(--k-seite),color-mix(in srgb,var(--k-seite) 88%,black))}
.f-deckel{left:0;right:0;height:var(--d);top:calc(var(--d)/-2 + 0px);transform:translateY(calc(var(--d)/2)) rotateX(90deg);background:var(--k-oben)}

/* Seitenwand-Beschriftung (Folierung des echten Lockers) */
.seitenschrift{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:800;font-size:.6rem;letter-spacing:.26em;white-space:nowrap;overflow:hidden;
  color:var(--t-front);opacity:.85;padding:26px 0}

/* Kopfband + Sockel je Säule (laufen optisch durch) */
.kopfband{position:absolute;left:0;right:0;top:0;height:44px;transform:translateZ(calc(var(--d)/2 + .5px));
  background:linear-gradient(100deg,color-mix(in srgb,var(--t-front) 94%,white 5%),var(--t-front) 55%,var(--t-dunkel));
  display:flex;align-items:center;justify-content:center}
.kopfband span{font-weight:800;letter-spacing:.34em;text-indent:.34em;font-size:.72rem;color:#fff;opacity:.94;white-space:nowrap;overflow:hidden}
.sockel{position:absolute;left:0;right:0;bottom:0;height:22px;transform:translateZ(calc(var(--d)/2 + .5px));background:#141519}

/* Fächer-Raster auf der Front */
.fachraster{position:absolute;left:7px;right:7px;top:52px;bottom:30px;transform:translateZ(calc(var(--d)/2 + 1px));
  display:flex;flex-direction:column;gap:6px}
.fach{position:relative;flex:var(--fx,1);perspective:900px;background:var(--hoehle)}
@media (prefers-reduced-motion:no-preference){
  .js .fach,.js .klappe,.js .logo-platte,.js .display,.js .scanner{animation:fach-auf 480ms var(--ease) backwards;animation-delay:var(--vz,0ms)}
}
@keyframes fach-auf{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.display i:nth-child(3){animation:disp-puls 2.6s ease-in-out infinite}
@keyframes disp-puls{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.display i:nth-child(3){animation:none}}
.fach .innen{position:absolute;inset:2px;background:linear-gradient(180deg,#101216,#07080a 70%)}
.fach .tuer{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;
  background:linear-gradient(100deg,color-mix(in srgb,var(--t-front) 96%,white 4%),var(--t-front) 52%,color-mix(in srgb,var(--t-front) 78%,black));
  border:1px solid color-mix(in srgb,var(--t-dunkel) 70%,transparent);
  display:flex;align-items:center;justify-content:space-between;padding:0 9px;
  transition:transform 600ms var(--ease);cursor:pointer}
.fach .tuer:hover{background:linear-gradient(100deg,color-mix(in srgb,var(--t-front) 90%,white 9%),color-mix(in srgb,var(--t-front) 96%,white 3%) 52%,color-mix(in srgb,var(--t-front) 82%,black))}
.fach.offen .tuer{transform:rotateY(-96deg)}
.fach .nr{font-weight:800;font-size:.66rem;color:#fff;opacity:.85;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.fach .griff{width:3px;height:38%;max-height:26px;background:color-mix(in srgb,var(--t-dunkel) 55%,white 20%);opacity:.9}
.fach:focus-within .tuer{outline:2px solid var(--text);outline-offset:2px}

/* Terminal-Säule */
.terminal .fachraster{display:flex;flex-direction:column;gap:8px}
.logo-platte{flex:0 0 46px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--k-front) 88%,black)}
.logo-platte span{font-weight:800;letter-spacing:.3em;text-indent:.3em;font-size:.6rem;color:#fff;opacity:.85;white-space:nowrap}
.logo-platte.eigen{background:transparent;border:1px dashed rgba(255,255,255,.45)}
.logo-platte.eigen span{opacity:.75;letter-spacing:.18em;text-indent:.18em}
.display{flex:0 0 auto;aspect-ratio:3/4.1;background:linear-gradient(160deg,#182029,#0c1117 60%);border:2px solid #191b20;
  display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px}
.display i{display:block;height:5px;background:rgba(160,200,235,.5)}
.display i:nth-child(1){width:72%;height:8px;background:rgba(200,225,248,.75)}
.display i:nth-child(2){width:52%}
.display i:nth-child(3){width:38%;background:color-mix(in srgb,var(--t-front) 75%,white 10%)}
.scanner{flex:0 0 12px;background:#101216;display:flex;align-items:center;justify-content:center}
.scanner i{width:56%;height:2px;background:rgba(120,190,140,.8)}
.klappe{position:relative;flex:1.15;perspective:900px;background:var(--hoehle)}
.klappe .innen{position:absolute;inset:2px;background:linear-gradient(180deg,#101216,#07080a 70%)}
.klappe .tuer{position:absolute;inset:0;transform-origin:bottom center;transform-style:preserve-3d;
  background:linear-gradient(120deg,color-mix(in srgb,var(--k-front) 90%,white 6%),color-mix(in srgb,var(--k-front) 80%,black));
  border:1px solid rgba(0,0,0,.4);display:flex;align-items:flex-start;justify-content:center;padding-top:8px;
  transition:transform 600ms var(--ease);cursor:pointer}
.klappe.offen .tuer{transform:rotateX(-72deg)}
.klappe .griff{width:44%;height:4px;background:rgba(255,255,255,.4)}
.klappe:focus-within .tuer{outline:2px solid var(--text);outline-offset:2px}

/* ── Bedienfeld ── */
.regler > .gruppe{border-top:1px solid var(--line);padding:clamp(16px,2vw,22px) 0}
.regler > .gruppe:last-of-type{border-bottom:1px solid var(--line)}
.gruppe .gtitel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.gruppe .gtitel b{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.gruppe .gtitel small{color:var(--dim);font-size:.85rem;font-variant-numeric:tabular-nums}
.gruppe .gtitel small b{color:var(--muted);letter-spacing:0;text-transform:none;font-size:.85rem}

/* Stepper (Säulen) */
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line)}
.stepper button{appearance:none;background:transparent;border:0;color:var(--text);font:inherit;font-weight:800;font-size:1.05rem;
  width:44px;height:44px;cursor:pointer;transition:background 160ms var(--ease),color 160ms var(--ease)}
.stepper button:hover{background:rgba(255,255,255,.06)}
.stepper button:disabled{color:var(--dim);opacity:.5;cursor:default;background:transparent}
.stepper output{min-width:150px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;font-size:.95rem;color:var(--muted);
  border-inline:1px solid var(--line);height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px}

/* Segment-Wahl (Fächermix) */
.segmente{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line)}
.segmente label{position:relative;flex:1 1 40%;min-width:96px}
.segmente label:nth-child(n+3) span{border-top:1px solid var(--line)}
.segmente label:nth-child(3) span{border-left:0}
.segmente input{position:absolute;opacity:0;pointer-events:none}
.segmente span{display:flex;flex-direction:column;gap:2px;padding:.72rem .9rem;cursor:pointer;text-align:left;
  border-left:1px solid var(--line);transition:background 160ms var(--ease),color 160ms var(--ease)}
.segmente label:first-child span{border-left:0}
.segmente b{font-weight:600;font-size:.95rem;color:var(--muted)}
.segmente small{color:var(--dim);font-size:.78rem}
.segmente span:hover{background:rgba(255,255,255,.05)}
.segmente input:checked + span{background:rgba(255,255,255,.07)}
.segmente input:checked + span b{color:var(--text)}
.segmente input:focus-visible + span{outline:2px solid var(--text);outline-offset:3px}

/* Farbfelder — rechteckige Welt, Auswahl per Linienstärke */
.farben{display:flex;flex-wrap:wrap;gap:10px}
.farben label{position:relative}
.farben input{position:absolute;opacity:0;pointer-events:none}
.farben span{display:flex;align-items:center;gap:.6rem;padding:6px 12px 6px 6px;border:1px solid var(--line);cursor:pointer;
  color:var(--dim);font-size:.85rem;transition:border-color 160ms var(--ease),color 160ms var(--ease)}
.farben i{width:26px;height:26px;background:var(--f);display:block;border:1px solid rgba(255,255,255,.14)}
.farben span:hover{border-color:var(--line-2);color:var(--muted)}
.farben input:checked + span{border-color:var(--text);color:var(--text)}
.farben input:focus-visible + span{outline:2px solid var(--text);outline-offset:3px}
.farbnotiz{margin:10px 0 0;color:var(--dim);font-size:.82rem}

/* Ausstattung (Haken-Zeilen) */
.haken{display:grid;gap:0}
.haken label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:.7rem 2px;cursor:pointer;
  border-top:1px solid transparent;transition:background 160ms var(--ease)}
.haken label:hover{background:rgba(255,255,255,.04)}
.haken input{appearance:none;width:19px;height:19px;margin-top:3px;border:1px solid var(--line-2);background:transparent;cursor:pointer;
  display:inline-grid;place-content:center;transition:border-color 160ms var(--ease)}
.haken input::before{content:"";width:9px;height:9px;background:var(--text);transform:scale(0);transition:transform 160ms var(--ease)}
.haken input:checked{border-color:var(--text)}
.haken input:checked::before{transform:scale(1)}
.haken input:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.haken b{font-weight:600;font-size:.95rem;color:var(--muted)}
.haken label:has(input:checked) b{color:var(--text)}
.haken small{display:block;color:var(--dim);font-size:.82rem;line-height:1.5}

/* Live-Zusammenfassung */
.zusammen{border-top:1px solid var(--line);padding-top:clamp(16px,2vw,22px)}
.zusammen dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin:0}
.zusammen dt{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.zusammen dd{margin:.3rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.5;font-variant-numeric:tabular-nums}
.zusammen dd b{color:var(--text);font-weight:600}
.zusammen dd.frisch{animation:wert-frisch 650ms var(--ease)}
@keyframes wert-frisch{0%{color:#fff}100%{color:var(--muted)}}
@media (prefers-reduced-motion:reduce){.zusammen dd.frisch{animation:none}}
.uebernahme{margin-top:clamp(18px,2.4vw,26px)}

/* ── Einsatz / System / Ablauf: Zeilen-Grammatik ── */
.paar-zeilen .zeile{grid-template-columns:minmax(240px,.62fr) 1.38fr;align-items:baseline;cursor:default}
.paar-zeilen .zeile:hover{background:color-mix(in srgb,var(--akzent) 5%,transparent)}
.paar-zeilen .zeile .marke{font-size:clamp(1.2rem,2vw,1.5rem);white-space:normal}
.paar-zeilen .zeile:hover .marke{color:var(--text)}
.paar-zeilen .zeile p{max-width:62ch}
.schritt-nr{color:var(--dim);font-weight:800;font-variant-numeric:tabular-nums;font-size:.9rem;letter-spacing:.1em;display:block;margin-bottom:6px}

/* Referenz-Zeile: längere Überschrift darf umbrechen */
.ref-zeile .marke{white-space:normal}

/* Preis-Zeile */
.preis-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(20px,2.6vw,30px) clamp(10px,1.4vw,18px)}
.preis-zeile .ab{font-weight:800;font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.preis-zeile .ab small{font-size:.55em;color:var(--dim);font-weight:600;letter-spacing:0}
.preis-zeile p{margin:0;color:var(--muted);max-width:52ch;font-size:.95rem}

/* ── Anfrage-Formular ── */
.anfrage-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,64px);align-items:start}
.anfrage-info p{color:var(--muted);max-width:46ch;text-wrap:pretty}
.anfrage-info .kontaktliste{margin:1.4rem 0 0;padding:0;list-style:none;color:var(--muted)}
.anfrage-info .kontaktliste li{padding:.35rem 0}
.anfrage-info .kontaktliste b{color:var(--text);font-weight:600}
.anfrage-info a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-decoration-color 160ms var(--ease)}
.anfrage-info a:hover{text-decoration-color:var(--text)}
.rekap{border:1px solid var(--line);padding:16px 18px;margin-top:1.6rem}
.rekap .rtitel{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.rekap .rtitel a{font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.rekap p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6;font-variant-numeric:tabular-nums}
.rekap p b{color:var(--text);font-weight:600}

form.anfrage{display:grid;gap:16px}
.feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{display:grid;gap:6px}
.feld label{font-size:.85rem;font-weight:600;color:var(--muted)}
.feld input,.feld textarea{appearance:none;background:transparent;border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:.98rem;padding:.72rem .85rem;width:100%;
  transition:border-color 160ms var(--ease),background 160ms var(--ease)}
.feld input:hover,.feld textarea:hover{border-color:var(--line-2)}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--line-2);background:rgba(255,255,255,.03)}
.feld input:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.feld input::placeholder,.feld textarea::placeholder{color:var(--dim)}
.feld textarea{resize:vertical;min-height:110px}
.sendezeile{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.senden{appearance:none;cursor:pointer;background:var(--text);color:var(--bg);border:1px solid var(--text);
  font:inherit;font-weight:800;font-size:1rem;letter-spacing:.01em;padding:.95rem 1.7rem;
  display:inline-flex;align-items:center;gap:.6rem;transition:background 160ms var(--ease),transform 160ms var(--ease)}
.senden:hover{background:#fff}
.senden:active{transform:scale(.98)}
.senden svg{width:15px;height:15px}
.sendezeile small{color:var(--dim);font-size:.82rem;max-width:38ch}
.erfolg{border:1px solid var(--line-2);padding:22px 24px;margin-bottom:22px}
.erfolg b{font-weight:800;font-size:1.1rem}
.erfolg p{margin:.5rem 0 0;color:var(--muted)}

/* ── Schmal ── */
@media (max-width:960px){
  .konfig{grid-template-columns:1fr}
  .buehne-halter{position:static}
  .anfrage-raster{grid-template-columns:1fr}
}
@media (max-width:520px){
  .cta-zeile{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:640px){
  .feldreihe{grid-template-columns:1fr}
  .zusammen dl{grid-template-columns:1fr 1fr}
  .buehne{height:min(420px,118vw)}
  .paar-zeilen .zeile{grid-template-columns:1fr}
}