/* ============================================================
   ALARMETIK — Stylesheet
   Keine externen Schrift-Requests. Der helle Produktionsstand nutzt
   robuste System-Schriften; optionale Markenfonts können später lokal
   ergänzt werden, ohne Drittanbieter-CDN.
   ============================================================ */
:root{
  --ink:#07090a;
  --ink-2:#0c1012;
  --ink-3:#11161a;
  --paper:#e8eff1;
  --paper-dim:#c2ccd0;
  --paper-faint:#8a959a;
  --amber:#f5a623;
  --amber-2:#ffc25c;
  --fokus:#f5a623;        /* Fokusrahmen; in der hellen Fassung abgedunkelt */
  --line:rgba(232,239,241,.11);
  --line-2:rgba(232,239,241,.055);
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --lese:68ch;
  --mono:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(20px,4vw,60px);
  --sec:clamp(52px,5.5vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:auto;-webkit-text-size-adjust:100%;
  background:#07090a;
  color-scheme:dark;                 /* verhindert Auto-Dark-Invertierung mobiler Browser */
  forced-color-adjust:none;
}
body{
  background:var(--ink);color:var(--paper);font-family:var(--font);
  font-size:16px;line-height:1.55;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;
}
body.is-locked{overflow:hidden;height:100vh}
/* Garantierte dunkle Grundebene — unabhängig von Hintergrund-Propagierung */
body::before{content:"";position:fixed;inset:-10vh 0;background:var(--ink);z-index:-1;pointer-events:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--amber);color:#000}

/* ---------- Layer 0: Szene, Raster, Korn ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:none}
.vgrid{position:fixed;inset:0;z-index:0;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--pad)}
.vgrid span{border-left:1px solid var(--line-2)}
.vgrid span:last-child{border-right:1px solid var(--line-2)}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Cursor ---------- */
.cur,.cur-r{position:fixed;top:0;left:0;z-index:70;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cur{width:6px;height:6px;background:var(--paper);margin:-3px 0 0 -3px}
.cur-r{width:36px;height:36px;border:1px solid rgba(232,239,241,.5);margin:-18px 0 0 -18px;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),border-color .3s}
.cur-r.hot{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--amber)}
@media (hover:none),(pointer:coarse){.cur,.cur-r{display:none}}

/* Der Preloader wurde entfernt: Seine Animation lief über GSAP, das seit
   Phase 7 nicht mehr geladen wird. Übrig blieb eine deckende Fläche, die
   nur per JavaScript verschwand — ohne JavaScript blieb die Seite leer. */

/* ---------- Typografie ---------- */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim)}
.eyebrow b{color:var(--amber);font-weight:500}
h1,h2,h3{font-weight:700;letter-spacing:-.035em;line-height:.98}
.h-xl{font-size:clamp(44px,8.4vw,132px)}
.h-lg{font-size:clamp(34px,5.6vw,88px)}
/* Zweiter Rang: Abschnitte, die stützen statt zu tragen. Vorher waren alle
   sieben Abschnittsüberschriften gleich groß — dadurch beanspruchte jeder
   Abschnitt denselben Rang wie der Konfigurator. */
.h-lg--still{font-size:clamp(27px,3.4vw,48px);letter-spacing:-.03em}
.h-md{font-size:clamp(24px,3.2vw,44px);letter-spacing:-.03em;line-height:1.05}
.h-sm{font-size:clamp(19px,1.6vw,25px);letter-spacing:-.02em;line-height:1.15}
.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--paper-dim);max-width:62ch}
.body{color:var(--paper-dim);max-width:60ch}
.amber{color:var(--amber)}
.it{font-style:italic}

/* ---------- Layout ---------- */
main{position:relative;z-index:1}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad);position:relative}
section{position:relative}
.sec{padding:var(--sec) 0;background:var(--ink);position:relative;z-index:1}
.sec--alt{background:var(--ink-2)}
.sec--clear{background:linear-gradient(180deg,rgba(7,9,10,.45) 0%,rgba(7,9,10,0) 34%,rgba(7,9,10,.06) 62%,rgba(7,9,10,.6) 100%)}
.rule{height:1px;background:var(--line);width:100%}
.sec-head{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:clamp(26px,2.8vw,44px)}
@media(min-width:900px){.sec-head{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:60px;align-items:end}}
.sec-head .eyebrow{display:flex;gap:14px;align-items:center;margin-bottom:22px}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform .5s var(--ease),background .4s,border-color .4s;
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(7,9,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.hide{transform:translateY(-102%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad)}
.logo{display:flex;flex-direction:column;gap:2px;line-height:1}
.logo__row{font-style:italic;font-weight:800;font-size:clamp(19px,2vw,26px);letter-spacing:-.035em;white-space:nowrap}
.logo__row i{color:var(--amber);font-style:italic;margin-right:.12em}
.logo__tag{font-size:clamp(8.5px,.72vw,10.5px);letter-spacing:.03em;color:var(--amber);font-weight:500}
.nav__links{display:none;gap:clamp(18px,2.2vw,38px)}
@media(min-width:1040px){.nav__links{display:flex}}
.nav__links a{font-family:var(--font);font-size:13.5px;letter-spacing:.01em;color:var(--paper-dim);transition:color .25s;position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--amber);transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{width:100%}
.nav__right{display:flex;align-items:center;gap:14px}
.burger{display:grid;gap:5px;padding:10px;margin:-10px}
@media(min-width:1040px){.burger{display:none}}
.burger i{display:block;width:22px;height:1.5px;background:var(--paper);transition:transform .4s var(--ease),opacity .3s}
.burger.on i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:calc(80px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.menu.open{clip-path:inset(0 0 0 0)}
.menu a{font-size:clamp(28px,7.6vw,60px);font-weight:700;letter-spacing:-.04em;padding:7px 0;color:var(--paper);display:flex;align-items:baseline;gap:16px}
.menu a span{font-family:var(--font);font-size:13.5px;color:var(--amber);letter-spacing:.1em}
.menu__foot{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}
.menu__foot a{font-size:16px;font-weight:500;letter-spacing:0;font-family:var(--font);color:var(--paper-dim);padding:6px 0;gap:12px;align-items:center}
.menu__foot a b{color:var(--amber);font-weight:400}
.menu__foot a span{font-family:var(--font);font-size:15.5px;color:var(--paper);letter-spacing:.02em}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:15px 26px;font-family:var(--mono);font-size:13.5px;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);overflow:hidden;color:var(--paper);
  transition:color .35s var(--ease),border-color .35s}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--amber);transform:translateY(101%);transition:transform .45s var(--ease);z-index:0}
.btn:hover{color:#000;border-color:var(--amber)}
.btn:hover::before{transform:translateY(0)}
.btn--fill{background:var(--amber);color:#000;border-color:var(--amber)}
.btn--fill::before{background:var(--paper)}
.btn--sm{padding:11px 18px;font-size:10.5px}
.arrow{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- Hero ---------- */
/* Der Einstieg war auf volle Bildschirmhöhe angelegt, damit die
   3D-Szene Raum bekommt. Der Text stand deshalb ganz unten, mit
   viel Leere darüber. Jetzt beginnt er kurz unter der Kopfzeile. */
.hero{min-height:86vh;min-height:86svh;display:flex;flex-direction:column;justify-content:center;padding-bottom:clamp(24px,3vw,44px);position:relative;z-index:1}
.hero__in{padding-top:clamp(96px,11vh,140px)}
.hero h1{margin:26px 0 0;text-transform:uppercase;font-style:italic;font-weight:800}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block}
.hero h1 em{color:var(--amber);font-style:italic}
.hero__grid{display:grid;gap:34px;margin-top:clamp(30px,4vw,52px);align-items:end}
@media(min-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:60px}}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:clamp(44px,6vw,76px);background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:760px){.hero__stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--ink);padding:24px 16px 22px}
.stat__n{font-size:clamp(26px,3vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1}
.stat__n i{color:var(--amber);font-style:normal;font-size:.5em;vertical-align:super;margin-left:2px}
.stat__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-faint);margin-top:9px}

/* ---------- Manifest ---------- */
.big-quote{font-size:clamp(28px,4.4vw,66px);font-weight:700;letter-spacing:-.04em;line-height:1.02;max-width:20ch}
.big-quote em{font-style:italic;color:var(--amber)}

/* ---------- Grundriss / System ---------- */
.plan{display:grid;gap:clamp(24px,3vw,44px)}
@media(min-width:1040px){.plan{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}}
.plan__stage{border:1px solid var(--line);background:linear-gradient(180deg,rgba(245,166,35,.03),transparent 55%),var(--ink-2);padding:clamp(12px,2vw,26px);position:relative}
.plan__stage::after{content:"GRUNDRISS · SCHEMATISCH";position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--paper-faint)}
.plan svg{width:100%;height:auto}
.wall{stroke:rgba(232,239,241,.35);stroke-width:2.5;fill:none;stroke-linecap:square}
.wall--out{stroke:rgba(232,239,241,.5)}
.hatch{fill:rgba(232,239,241,.018)}
.rlabel{font-family:var(--mono);font-size:10.5px;fill:var(--paper-faint);letter-spacing:.12em}
.dim{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.node{cursor:pointer}
.node__hit{fill:transparent}
.node__dot{fill:var(--paper);transition:fill .3s}
.node__ring{fill:none;stroke:rgba(232,239,241,.3);stroke-width:1;transform-box:fill-box;transform-origin:center;transition:stroke .3s}
.node__pulse{fill:none;stroke:var(--amber);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.node__lbl{font-family:var(--mono);font-size:10.5px;fill:var(--paper-faint);letter-spacing:.08em;pointer-events:none;transition:fill .3s}
.node.on .node__dot,.node:hover .node__dot{fill:var(--amber)}
.node.on .node__ring,.node:hover .node__ring{stroke:var(--amber)}
.node.on .node__lbl,.node:hover .node__lbl{fill:var(--paper)}
.node.on .node__pulse{opacity:1;animation:ping 1.9s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.85}100%{transform:scale(3.2);opacity:0}}
.plan__side{display:flex;flex-direction:column;gap:18px}
.dev-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.dev-list button{display:flex;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--line);text-align:left;transition:padding-left .35s var(--ease),color .3s;color:var(--paper-dim)}
.dev-list button:hover,.dev-list button.on{color:var(--paper);padding-left:12px}
.dev-list b{font-weight:500;font-size:15.5px;flex:1}
.dev-list i{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--paper-faint);font-style:normal;text-transform:uppercase}
.dev-list button.on i{color:var(--amber)}
.dev-detail{border:1px solid var(--line);padding:22px;background:var(--ink-2);min-height:200px}
.dev-detail h4{font-size:20px;letter-spacing:-.02em;margin:10px 0 8px}
.dev-detail p{font-size:15.5px;color:var(--paper-dim);line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:5px 9px;color:var(--paper-dim)}
.cat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.cat-tabs button{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);color:var(--paper-dim);transition:.3s}
.cat-tabs button.on{border-color:var(--amber);color:var(--amber)}

/* ---------- 9 Sekunden ---------- */

.tech{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.tech{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.tech{grid-template-columns:repeat(3,1fr)}}

/* ---------- Objekte ---------- */
.obj{display:grid;gap:26px}
@media(min-width:900px){.obj{grid-template-columns:minmax(230px,.55fr) minmax(0,1fr);gap:clamp(30px,4vw,70px)}}
.obj__nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.obj__nav button{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;color:var(--paper-dim);transition:.35s var(--ease)}
.obj__nav button b{font-size:clamp(17px,1.6vw,22px);font-weight:600;letter-spacing:-.02em}
.obj__nav button i{font-family:var(--mono);font-size:10.5px;color:var(--paper-faint);font-style:normal}
.obj__nav button.on{color:var(--paper);padding-left:12px}
.obj__nav button.on i{color:var(--amber)}
.obj__panel{border:1px solid var(--line);padding:clamp(24px,3vw,44px);background:var(--ink-2);min-height:340px;display:flex;flex-direction:column;gap:18px}
.obj__panel h3{font-size:clamp(26px,3.4vw,46px);letter-spacing:-.035em}
.obj__list{display:grid;gap:10px;margin-top:6px}
@media(min-width:620px){.obj__list{grid-template-columns:repeat(2,1fr)}}
.obj__list li{list-style:none;display:flex;gap:11px;font-size:15.5px;color:var(--paper-dim);align-items:baseline}
.obj__list li::before{content:"//";font-family:var(--mono);font-size:10.5px;color:var(--amber)}

/* ---------- Ablauf ---------- */
.flow{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:760px){.flow{grid-template-columns:repeat(5,1fr)}}
.fstep{background:var(--ink);padding:clamp(16px,1.8vw,24px) clamp(14px,1.4vw,20px);display:flex;flex-direction:column;gap:8px;min-height:0}
.fstep__n{font-family:var(--mono);font-size:clamp(20px,2vw,28px);color:var(--line);letter-spacing:-.04em;line-height:1;transition:color .5s}
.fstep:hover .fstep__n{color:var(--amber)}
.fstep h3{font-size:17px;letter-spacing:-.02em}
.fstep p{font-size:13.5px;color:var(--paper-dim);line-height:1.65}

/* ---------- Konfigurator ---------- */
.cfg{display:grid;gap:clamp(24px,3vw,50px)}
@media(min-width:1000px){.cfg{grid-template-columns:minmax(0,1fr) minmax(320px,.85fr)}}
.q{border-top:1px solid var(--line);padding:22px 0}
.q__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--paper-faint);margin-bottom:14px;display:flex;gap:12px}
.q__l b{color:var(--amber);font-weight:400}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--line);padding:11px 16px;font-size:15.5px;color:var(--paper-dim);transition:.3s var(--ease);position:relative}
.opt:hover{border-color:rgba(232,239,241,.35);color:var(--paper)}
.opt.on{border-color:var(--amber);color:var(--amber);background:rgba(245,166,35,.06)}

.qselect{display:flex;align-items:center}
.qselect label{display:inline-flex;align-items:center;gap:12px;min-width:min(100%,330px)}
.qselect select{appearance:none;-webkit-appearance:none;min-width:112px;padding:12px 42px 12px 15px;border:1px solid var(--line);border-radius:3px;background-color:var(--ink-2);color:var(--paper);font-family:var(--font);font-size:16px;font-weight:650;line-height:1.2;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--paper-faint) 50%),linear-gradient(135deg,var(--paper-faint) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.qselect select:hover,.qselect select:focus{border-color:var(--amber);outline:none}
.qselect__suffix{font-size:14px;color:var(--paper-dim);white-space:nowrap}
@media(max-width:520px){.qselect label{width:100%}.qselect select{flex:0 0 100px}.qselect__suffix{font-size:13.5px}}
.result{border:1px solid var(--line);background:var(--ink-2);padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;position:sticky;top:100px}
.result__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px}
.result__head span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--paper-faint)}
.bom{display:flex;flex-direction:column;max-height:320px;overflow:auto}
.bom__row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:15.5px}
.bom__row span{color:var(--paper-dim)}
.bom__row b{font-family:var(--font);font-size:13.5px;color:var(--amber);font-weight:400}
.bom__row small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint);margin-top:2px}

/* ---------- Kontakt ---------- */
.contact{display:grid;gap:clamp(30px,4vw,70px)}
@media(min-width:960px){.contact{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr)}}
.field{border-bottom:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;gap:6px;transition:border-color .35s}
.field:focus-within{border-color:var(--amber)}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)}
.field input,.field textarea,.field select{background:none;border:none;outline:none;color:var(--paper);font-family:var(--font);font-size:16px;width:100%;resize:none}
.field input::placeholder,.field textarea::placeholder{color:var(--paper-faint)}
.field select option{background:var(--ink-2)}
.ok{border:1px solid var(--amber);background:rgba(245,166,35,.07);padding:18px;font-size:15.5px;color:var(--paper);display:none;gap:12px;align-items:flex-start}
.ok.on{display:flex}
.cinfo{display:flex;flex-direction:column;gap:20px}
.cinfo__b{border-top:1px solid var(--line);padding-top:16px}
.cinfo__b span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-bottom:8px}
.cinfo__b p,.cinfo__b a{font-size:16px;color:var(--paper);line-height:1.5}
.cinfo__b a:hover{color:var(--amber)}

/* ---------- Permanenter Direktkontakt ---------- */
.crail{position:fixed;right:0;top:50%;transform:translate(0,-50%);z-index:55;display:none;flex-direction:column;gap:1px;
  transition:transform .8s var(--ease),opacity .5s}
@media(min-width:1040px){.crail{display:flex}}
.crail__lbl{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper-faint);padding:14px 12px 6px 0;text-align:center;display:flex;align-items:center;gap:12px;justify-content:center}
.crail__lbl::before{content:"";display:block;width:1px;height:26px;background:var(--amber)}
.crail__i{display:flex;align-items:center;gap:0;height:54px;padding:0 17px;color:var(--paper);
  background:rgba(12,16,18,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-right:none;position:relative;overflow:hidden;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .3s}
.crail__i svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.crail__i span{max-width:0;opacity:0;white-space:nowrap;font-family:var(--font);font-size:13.5px;letter-spacing:.01em;
  transition:max-width .55s var(--ease),opacity .35s var(--ease),margin .55s var(--ease)}
.crail__i:hover,.crail__i:focus-visible{background:var(--amber);color:#000;border-color:var(--amber);outline:none}
.crail__i:hover span,.crail__i:focus-visible span{max-width:260px;opacity:1;margin-left:14px}
.crail__i:hover svg{transform:scale(1.08)}
.crail__i::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--amber);opacity:.5;transition:opacity .3s}
.crail__i:hover::after{opacity:0}

.cdock{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1fr;
  background:rgba(7,9,10,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);transform:translateY(0);transition:transform .6s var(--ease);
  padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:1040px){.cdock{display:none}}
body.is-locked .cdock{transform:translateY(115%)}
.cdock__b{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.cdock__b+.cdock__b{border-left:1px solid var(--line)}
.cdock__b svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cdock__b--pri{background:var(--amber);color:#000}
.cdock__b:active{opacity:.75}
@media(max-width:1039px){footer{padding-bottom:calc(30px + 62px)}.hero{padding-bottom:calc(24px + 66px)}}

/* ============================================================
   MOBILE & TOUCH
   ============================================================ */
/* Hover-Effekte nur dort, wo es echten Hover gibt */
@media (hover:none){
  .dev-list button:hover,.obj__nav button:hover{padding-left:4px}
  .fcol a:hover{padding-left:0}
}

@media (max-width:899px){
  /* --- Kopfzeile: Platz für Logo + Burger --- */
  .nav__in{padding:13px var(--pad);padding-top:calc(13px + env(safe-area-inset-top))}
  .nav__right .btn{display:none}
  .logo__row{font-size:19px}
  .logo__tag{font-size:10.5px}

  /* --- Hero --- */
  .h-xl{font-size:clamp(38px,11.5vw,64px)}
  .hero__in{padding-top:calc(112px + env(safe-area-inset-top))}
  .hero__stats{margin-top:34px}
  .stat{padding:16px 12px 15px 0}
  .stat__l{font-size:10.5px;letter-spacing:.07em}
  .lead{font-size:16.5px}
  .hero__cta{gap:10px}
  .hero__cta .btn{flex:1 1 100%;justify-content:center}

  /* --- Abschnittsköpfe --- */
  .sec-head{margin-bottom:24px;gap:16px}
  .big-quote{font-size:clamp(28px,8.6vw,44px)}

  /* --- Grundriss: Beschriftungen raus, Marker größer --- */
  .node__lbl{display:none}
  .node__ring,.node__pulse{stroke-width:2.5}
  .plan__stage{padding:10px}
  .plan__stage::after{display:none}
  .rlabel{font-size:20px;letter-spacing:.1em}
  .wall{stroke-width:4}
  .wall--out{stroke-width:5}
  .dev-list button{padding:15px 4px}
  .dev-list b{font-size:15.5px}
  .dev-detail{padding:18px}

  /* --- Alarm-Timeline ohne Pinning --- */

  /* --- Objekte / Konfigurator --- */
  .obj__panel{padding:20px;min-height:0}
  .obj__nav button{padding:15px 0}
  .result{position:static}
  .opt{padding:13px 16px}
  .cat-tabs button{padding:11px 14px}
  .bom{max-height:none}

  /* --- Sonstiges --- */
  .grain{display:none}
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .fstep{min-height:0}
  .field{padding:12px 0}
}

@media (max-width:420px){
  .hero__stats{grid-template-columns:1fr 1fr}
  .stat__n{font-size:24px}
  .menu a{font-size:26px}
}

/* ---------- Footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line);padding:clamp(50px,6vw,90px) 0 30px;position:relative;z-index:1}
.fgrid{display:grid;gap:36px;margin-bottom:50px}
@media(min-width:860px){.fgrid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.fcol span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-bottom:14px}
.fcol a{display:block;padding:5px 0;color:var(--paper-dim);font-size:15.5px;transition:color .25s,padding-left .3s var(--ease)}
.fcol a:hover{color:var(--amber);padding-left:8px}
.fbot{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--paper-faint)}
.fmark{font-size:clamp(46px,13vw,190px);font-style:italic;font-weight:800;letter-spacing:-.05em;line-height:.82;color:rgba(232,239,241,.05);text-transform:uppercase;margin-top:40px;user-select:none;overflow:hidden}
.fmark i{color:rgba(245,166,35,.16);font-style:italic}

/* ---------- Reveal ---------- */
html.gsap-ready [data-rv]{opacity:0}
html.gsap-ready .ln>span{transform:translateY(105%)}

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.subhero{padding:calc(140px + env(safe-area-inset-top)) 0 clamp(46px,6vw,90px);position:relative;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(245,166,35,.05),transparent 60%),var(--ink)}
.subhero .eyebrow{margin-bottom:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.subhero h1{font-size:clamp(36px,6.4vw,86px);text-transform:uppercase;font-style:italic;font-weight:800;letter-spacing:-.04em;line-height:.98}
.subhero h1 em{color:var(--amber);font-style:italic}
.subhero .lead{margin-top:26px}

/* Brotkrumen */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font);font-size:10.5px;
  letter-spacing:.01em;color:var(--paper-faint)}
.crumbs a{color:var(--paper-faint);transition:color .25s}
.crumbs a:hover{color:var(--amber)}
.crumbs i{font-style:normal;color:var(--amber)}

/* Fließtext-Bereiche */
.prose{max-width:74ch}
.prose h2{font-size:clamp(24px,3vw,40px);letter-spacing:-.03em;line-height:1.06;margin:clamp(42px,5vw,72px) 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(18px,1.7vw,23px);letter-spacing:-.02em;margin:32px 0 10px}
.prose p{color:var(--paper-dim);margin-bottom:16px;line-height:1.65}
.prose p strong,.prose li strong{color:var(--paper);font-weight:600}
.prose a{color:var(--amber);border-bottom:1px solid rgba(245,166,35,.35)}
.prose a:hover{border-bottom-color:var(--amber)}
.prose ul,.prose ol{margin:0 0 20px 0;padding:0;list-style:none}
.prose ul li{display:flex;gap:12px;color:var(--paper-dim);margin-bottom:10px;line-height:1.6;align-items:baseline}
.prose ul li::before{content:"//";font-family:var(--font);font-size:10.5px;color:var(--amber);flex:none}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n;display:flex;gap:14px;color:var(--paper-dim);margin-bottom:12px;line-height:1.6;align-items:baseline}
.prose ol li::before{content:counter(n,decimal-leading-zero);font-family:var(--font);font-size:10.5px;color:var(--amber);flex:none}

/* Zweispaltiges Seitenlayout */
.page-grid{display:grid;gap:clamp(34px,4vw,70px)}
@media(min-width:1000px){.page-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.42fr)}}
.aside{display:flex;flex-direction:column;gap:22px;align-self:start}
@media(min-width:1000px){.aside{position:sticky;top:96px}}
.aside__box{border:1px solid var(--line);background:var(--ink-2);padding:24px}
.aside__box h3{font-size:19px;letter-spacing:-.02em;margin-bottom:12px}
.aside__box p{font-size:15.5px;color:var(--paper-dim);line-height:1.7;margin-bottom:16px}
.aside__box .btn{width:100%;justify-content:center}
.aside__nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.aside__nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--paper-dim);
  display:flex;align-items:center;gap:12px;transition:color .25s,padding-left .3s var(--ease)}
.aside__nav a i{font-family:var(--mono);font-size:10.5px;color:var(--paper-faint);font-style:normal}
.aside__nav a:hover{color:var(--paper);padding-left:8px}
.aside__nav a[aria-current]{color:var(--amber)}
.aside__nav a[aria-current] i{color:var(--amber)}

/* Faktenraster */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:clamp(30px,4vw,50px) 0}
@media(min-width:620px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{background:var(--ink);padding:22px}
.fact b{display:block;font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:8px}
.fact span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:19px 0;cursor:pointer;list-style:none;display:flex;gap:16px;align-items:baseline;
  font-size:clamp(16px,1.5vw,19px);font-weight:600;letter-spacing:-.015em;color:var(--paper);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--font);color:var(--amber);font-weight:400;font-size:15.5px;flex:none}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--amber)}
.faq__a{padding:0 0 20px 30px;color:var(--paper-dim);line-height:1.65;max-width:70ch}
.faq__a p{margin-bottom:12px}
.faq__a p:last-child{margin-bottom:0}

/* Querverweise */
.xlinks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.xlinks{grid-template-columns:repeat(3,1fr)}}
.xlink{background:var(--ink);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:10px;
  min-height:190px;transition:background .4s;position:relative;overflow:hidden}
.xlink:hover{background:var(--ink-3)}
.xlink span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--amber)}
.xlink h3{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.025em}
.xlink p{font-size:15.5px;color:var(--paper-dim);line-height:1.55;flex:1}
.xlink em{font-family:var(--mono);font-size:10.5px;font-style:normal;letter-spacing:.1em;color:var(--paper-faint);
  text-transform:uppercase;margin-top:auto}
.xlink::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--amber);transition:width .6s var(--ease)}
.xlink:hover::after{width:100%}

/* Abschluss-Aufruf */
.cta-band{border-top:1px solid var(--line);background:var(--ink-2);padding:clamp(50px,6vw,90px) 0}
.cta-band__in{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.cta-band__in{grid-template-columns:minmax(0,1fr) auto;gap:50px}}
.cta-band h2{font-size:clamp(26px,3.4vw,46px);letter-spacing:-.035em;line-height:1.04}
.cta-band p{color:var(--paper-dim);margin-top:14px;max-width:56ch}
.cta-band__btns{display:flex;flex-wrap:wrap;gap:12px}

/* Rechtstexte */
.legal{max-width:80ch}
.legal h2{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.025em;margin:44px 0 14px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:17px;letter-spacing:-.015em;margin:26px 0 8px}
.legal p,.legal li{color:var(--paper-dim);line-height:1.7;margin-bottom:13px;font-size:15.5px}
.legal ul{list-style:none;padding:0;margin-bottom:18px}
.legal ul li{display:flex;gap:11px;align-items:baseline}
.legal ul li::before{content:"//";font-family:var(--font);font-size:10.5px;color:var(--amber);flex:none}
.legal a{color:var(--amber);word-break:break-word}
.legal strong{color:var(--paper);font-weight:600}
.todo{border:1px dashed var(--amber);background:rgba(245,166,35,.06);padding:16px 18px;margin:18px 0;
  font-family:var(--font);font-size:13.5px;line-height:1.7;color:var(--amber-2);letter-spacing:.02em}
.todo b{color:var(--amber);display:block;margin-bottom:6px;letter-spacing:.12em;text-transform:uppercase;font-size:10.5px}

@media(max-width:899px){
  .subhero{padding-top:calc(116px + env(safe-area-inset-top))}
  .prose h2{margin-top:38px}
  .aside__box{padding:20px}
}

/* ============================================================
   ERGÄNZUNGEN — Social, Über uns, Auszeichnungen
   ============================================================ */
.fsocial{display:flex;gap:10px;margin-top:18px}
.fsocial a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
  color:var(--paper-dim);transition:color .3s,border-color .3s,background .3s;padding:0}
.fsocial a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
.fsocial a:hover{color:#000;background:var(--amber);border-color:var(--amber);padding-left:0}

/* Über uns */
.about{display:grid;gap:clamp(30px,4vw,64px)}
@media(min-width:960px){.about{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)}}
.about__claim{font-size:clamp(24px,3.4vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.06;max-width:22ch}
.about__claim em{font-style:italic;color:var(--amber)}
.creds{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.creds div{display:flex;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.creds b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--amber);flex:none;width:26px}
.creds span{font-size:15.5px;color:var(--paper-dim);line-height:1.5}
.creds span i{display:block;font-style:normal;color:var(--paper);font-weight:600;margin-bottom:2px;font-size:16px}

/* Auszeichnung / Zertifizierung */
.badges{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,4vw,56px)}
@media(min-width:700px){.badges{grid-template-columns:repeat(3,1fr)}}
.badge{background:var(--ink);padding:24px;display:flex;flex-direction:column;gap:7px}
.badge b{font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;font-weight:700}
.badge span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint)}
.badge p{font-size:13.5px;color:var(--paper-dim);line-height:1.5;margin-top:4px}

/* Einsatzgebiet */
.area{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.area span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);padding:8px 13px;color:var(--paper-dim)}
.area span:first-child{border-color:var(--amber);color:var(--amber)}

/* ============================================================
   VERFEINERUNG — ruhigere, minimalistischere Anmutung
   Weniger Dekoration, mehr Weißraum, klarere Hierarchie.
   ============================================================ */

/* Raster und Korn deutlich zurücknehmen */
:root{--line:rgba(232,239,241,.09);--line-2:rgba(232,239,241,.038)}
.grain{opacity:.03}
.vgrid span{border-left-color:rgba(232,239,241,.028)}
.vgrid span:last-child{border-right-color:rgba(232,239,241,.028)}

/* Der Abstandswert steht ausschließlich oben bei den Tokens (Zeile 23).
   Hier stand zuvor eine zweite, größere Definition — zwei konkurrierende
   Werte für dieselbe Sache. */

/* Ruhigere Typografie: Zeilen atmen, Untertitel leiser */
.lead{color:var(--paper-dim);line-height:1.55}
.body{line-height:1.68}

/* Ticker: leiser und langsamer statt marktschreierisch */

/* Karten: Rahmen nur dort, wo sie Struktur geben */

/* Kontaktleiste zurückhaltender im Ruhezustand */
.crail__i{background:rgba(7,9,10,.6);border-color:rgba(232,239,241,.1)}
.crail__i::after{opacity:.3}

/* Buttons schlanker */
.btn{padding:16px 28px;letter-spacing:.12em}
.btn--sm{padding:11px 18px}

/* Fußbereich leiser */
.fmark{color:rgba(232,239,241,.035);margin-top:56px}
.fmark i{color:rgba(245,166,35,.1)}

/* Formularfelder klarer */
.field{padding:16px 0}
.field label{color:var(--paper-faint)}

/* Auf Mobil: weniger Rahmen, mehr Luft */
@media(max-width:899px){
  .vgrid{display:none}
  .sec-head{margin-bottom:24px}
}

/* ============================================================
   ANIMATIONEN OHNE ZUSATZBIBLIOTHEK
   Greifen, wenn GSAP nicht geladen ist. Die Klasse setzt das
   Skript selbst — ohne JavaScript bleibt alles sichtbar.
   ============================================================ */
html.fallback-motion [data-rv],
html.fallback-motion .fstep,
html.fallback-motion .xlink,
html.fallback-motion .badge,
html.fallback-motion .fact,
html.fallback-motion .creds div,
html.fallback-motion .sec-head h2,
html.fallback-motion .big-quote,
html.fallback-motion .hero .eyebrow,
html.fallback-motion .hero .stat,
html.fallback-motion .subhero .eyebrow,
html.fallback-motion .subhero h1,
html.fallback-motion .subhero .lead{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  will-change:opacity,transform;
}
html.fallback-motion .ln>span{
  transform:translateY(105%);
  transition:transform 1.1s var(--ease);
  will-change:transform;
}
html.fallback-motion .rv-in{opacity:1!important;transform:translateY(0)!important}

/* Farbstreifen über den Karten weiterhin animiert */
html.fallback-motion .xlink.rv-in::after{transition:width .6s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html.fallback-motion *{transition-duration:.01ms!important}
  html.fallback-motion [data-rv],html.fallback-motion .ln>span{opacity:1;transform:none}
}

/* ============================================================
   HILFSKLASSEN
   Ersetzen die früheren style="…"-Attribute. Notwendig, weil die
   Content-Security-Policy in der .htaccess Inline-Styles blockiert
   (style-src 'self') — sie wurden sonst stillschweigend ignoriert.
   ============================================================ */
.u-mt-sm{margin-top:14px}
.u-mt{margin-top:22px}
.u-mt-md{margin-top:24px}
.u-mt-lg{margin-top:30px}
.u-mb-sm{margin-bottom:10px}
.u-mb{margin-bottom:14px}
.u-mb-md{margin-bottom:26px}
.u-pt-0{padding-top:0}
.u-pb{padding-bottom:clamp(30px,4vw,60px)}
.u-no-border{border-bottom:none}
.u-center{justify-content:center}
.u-amber{color:var(--amber)}
.u-small{font-size:13.5px}
.u-xs{font-size:10.5px}
.u-note{color:var(--paper-dim);font-size:15.5px}
.u-foot-text{font-size:15.5px;max-width:36ch}
.u-h2-space{margin:clamp(48px,6vw,80px) 0 22px}
.u-contact{color:var(--paper);font-family:var(--mono);font-size:15.5px;word-break:break-word}
.u-contact--sm{font-size:15.5px}

/* Bot-Falle: für Menschen unsichtbar, für Bots ausfüllbar.
   Bewusst nicht display:none — das erkennen viele Bots. */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}

/* ============================================================
   FORMULAR — klarere Felder, sauberer Abschluss
   ============================================================ */
.field{position:relative;padding:18px 0 14px;border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease)}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);transition:color .3s;display:block;margin-bottom:8px}
.field:focus-within label{color:var(--amber)}
.field:focus-within{border-bottom-color:var(--amber)}
.field input,.field textarea,.field select{
  font-size:17px;line-height:1.4;color:var(--paper);padding:2px 0;
  min-height:30px;letter-spacing:-.005em}
.field input::placeholder,.field textarea::placeholder{color:rgba(232,239,241,.3)}
.field textarea{min-height:76px}

/* Auswahlfeld: eigener Pfeil, damit es überall gleich aussieht */
.field--select{position:relative}
.field--select select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:34px;cursor:pointer}
.field--select::after{
  content:"";position:absolute;right:2px;bottom:22px;width:9px;height:9px;pointer-events:none;
  border-right:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);
  transform:rotate(45deg);transform-origin:center}

/* Pflichtfeld-Stern zurückhaltend */
.field label em{font-style:normal;color:var(--amber);margin-left:3px}

/* Fehlerzustand */
.field.is-error{border-bottom-color:var(--amber)}
.field.is-error label{color:var(--amber)}
.field__hint{font-family:var(--font);font-size:10.5px;letter-spacing:0;color:var(--amber);
  margin-top:8px;display:none}
.field.is-error .field__hint{display:block}

/* Abschluss: Schaltfläche und Hinweis klar getrennt, untereinander */
.form-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin-top:34px}
.form-actions .btn{min-width:250px;justify-content:center}
.form-note{font-family:var(--font);font-size:10.5px;letter-spacing:0;
  color:var(--paper-faint);line-height:1.7}
.form-note a{color:var(--amber);border-bottom:1px solid rgba(245,166,35,.4)}
.form-note a:hover{border-bottom-color:var(--amber)}

/* Rückmeldungen */
.ok{margin-top:22px;padding:18px 20px;line-height:1.6;align-items:flex-start;gap:14px}
.ok b{flex:none;line-height:1.5}

/* Kontaktspalte: klarer abgesetzt */
.cinfo__b{padding-top:20px}
.cinfo__b span{margin-bottom:10px}
.cinfo__b p{font-size:16.5px;line-height:1.55}
.cinfo__b p+p{margin-top:4px}

@media(max-width:899px){
  .field{padding:16px 0 12px}
  .field input,.field textarea,.field select{font-size:16px}   /* verhindert Zoom auf iOS */
  .form-actions{margin-top:28px;gap:16px}
  .form-actions .btn{width:100%;min-width:0}
  .field--select::after{bottom:20px}
}

/* ============================================================
   KONFIGURATOR-VORSCHLAG IN DER ANFRAGE
   ============================================================ */
.attach{border:1px solid rgba(245,166,35,.45);background:rgba(245,166,35,.05);
  padding:18px 20px;margin-bottom:26px;display:none}
.attach.on{display:block}
.attach__head{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}
.attach__t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin-bottom:8px}
.attach__n{font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--paper)}
.attach__m{font-family:var(--mono);font-size:10.5px;color:var(--paper-faint);margin-top:5px}
.attach__toggle{flex:none;display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 0}
.attach__box{width:19px;height:19px;border:1px solid var(--line);display:grid;place-items:center;
  flex:none;transition:background .25s,border-color .25s}
.attach__box svg{width:11px;height:11px;stroke:#000;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.attach__toggle[aria-pressed="true"] .attach__box{background:var(--amber);border-color:var(--amber)}
.attach__toggle[aria-pressed="true"] .attach__box svg{opacity:1}
.attach__toggle span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-dim)}
.attach__toggle:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
.attach__list{margin-top:14px;padding-top:14px;border-top:1px solid rgba(245,166,35,.22);
  display:grid;gap:5px}
.attach__list div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  color:var(--paper-dim)}
.attach__list b{font-family:var(--mono);font-size:10.5px;color:var(--amber);font-weight:400;flex:none}
.attach.is-off{opacity:.42}
.attach.is-off .attach__list{display:none}

@media(max-width:899px){
  .attach{padding:16px}
  .attach__head{flex-direction:column;gap:12px}
  .attach__toggle{align-self:flex-start}
}

/* Erläuterung im Konfigurator-Ergebnis */
.cfg-note{font-size:13.5px;line-height:1.65;color:var(--paper);
  border-left:2px solid var(--amber);padding:2px 0 2px 14px;margin:2px 0 4px}

/* ============================================================
   WHATSAPP — dauerhaft erreichbar, Leiste und Dock
   ============================================================ */
.crail__i--wa:hover,.crail__i--wa:focus-visible{background:#25D366;border-color:#25D366;color:#08130c}
.crail__i--wa svg{stroke-width:1.3}

/* Dock jetzt dreispaltig */
.cdock{grid-template-columns:repeat(3,1fr)}
.cdock__b{padding:16px 6px;font-size:10.5px;letter-spacing:.09em;gap:8px}
.cdock__b--wa{background:#25D366;color:#08130c}
.cdock__b--wa svg{stroke-width:1.3}
@media(max-width:380px){
  .cdock__b{flex-direction:column;gap:5px;font-size:10.5px;padding:11px 4px}
  .cdock__b svg{width:17px;height:17px}
}
@media(max-width:1039px){footer{padding-bottom:calc(30px + 74px)}.hero{padding-bottom:calc(24px + 78px)}}

/* WhatsApp-Weg im Formularabschluss */
.wa-send{display:inline-flex;align-items:center;gap:11px;padding:15px 24px;border:1px solid #25D366;
  color:#25D366;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s}
.wa-send svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3}
.wa-send:hover{background:#25D366;color:#08130c}
.wa-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--paper-faint);
  margin-top:10px;line-height:1.6;display:none}
.wa-hint.on{display:block}

/* WhatsApp-Weg nach dem Absenden */
.wa-after{display:none;margin-top:20px}
.wa-after.on{display:block}
@media(max-width:899px){.wa-send{width:100%;justify-content:center}}

/* ============================================================
   GOOGLE-BEWERTUNGEN
   ============================================================ */
.rev{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:860px){.rev{grid-template-columns:minmax(280px,.85fr) minmax(0,1fr)}}
.rev__score{background:var(--ink);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;
  justify-content:center;gap:14px}
.rev__g{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint)}
.rev__g svg{width:17px;height:17px;flex:none}
.rev__stars{display:flex;gap:5px}
.rev__stars svg{width:21px;height:21px;fill:var(--amber)}
.rev__num{font-size:clamp(30px,3.6vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1}
.rev__num small{font-size:.36em;font-weight:400;color:var(--paper-faint);letter-spacing:.02em;margin-left:6px}
.rev__cta{background:var(--ink);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;
  justify-content:center;gap:16px}
.rev__cta h3{font-size:clamp(19px,2vw,26px);letter-spacing:-.025em}
.rev__cta p{font-size:15.5px;color:var(--paper-dim);line-height:1.7;max-width:46ch}
.rev__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media(max-width:859px){.rev__btns .btn{width:100%;justify-content:center}}

/* Solange keine Bewertungen hinterlegt sind: Sterne und Note dezent */
.rev__score--leer .rev__stars svg{fill:none;stroke:var(--paper-faint);stroke-width:1.4}
.rev__score--leer .rev__num{font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.02em}
.rev__score--leer .rev__num small{display:none}

/* Bewertungszitate */
.quotes{display:none;gap:1px;background:var(--line);border:1px solid var(--line);border-top:none;margin-top:-1px}
.quotes.on{display:grid}
@media(min-width:760px){.quotes.on{grid-template-columns:repeat(2,1fr)}}
.quote{background:var(--ink);padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;gap:18px;margin:0}
.quote blockquote{margin:0;font-size:clamp(15.5px,1.5vw,18px);line-height:1.62;color:var(--paper);
  letter-spacing:-.008em;position:relative;padding-left:20px}
.quote blockquote::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--amber)}
.quote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--line)}
.quote figcaption b{font-size:15.5px;font-weight:600;color:var(--paper)}
.quote figcaption span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--paper-faint)}
.quote figcaption em{display:flex;gap:2px;margin-left:auto;font-style:normal}
.quote figcaption em svg{width:13px;height:13px;fill:var(--amber)}
@media(max-width:759px){
  .quote figcaption em{margin-left:0;width:100%}
}

/* Zitate: Absätze, langer Text zunächst gekürzt */
.quote blockquote p{margin:0 0 12px}
.quote blockquote p:last-child{margin-bottom:0}
.quote--lang blockquote{max-height:190px;overflow:hidden;position:relative;
  transition:max-height .5s var(--ease)}
.quote--lang blockquote::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(to bottom,rgba(7,9,10,0),var(--ink));pointer-events:none;transition:opacity .3s}
.quote--lang.is-open blockquote{max-height:1600px}
.quote--lang.is-open blockquote::after{opacity:0}
.quote__more{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);padding:4px 0;border-bottom:1px solid rgba(245,166,35,.4);
  transition:border-color .3s}
.quote__more:hover{border-bottom-color:var(--amber)}
.quote__more:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
@media(max-width:759px){.quote--lang blockquote{max-height:230px}}

/* ============================================================
   HINWEIS ZU COOKIES UND DATENSCHUTZ
   Erscheint einmalig. Ablehnen und Zustimmen sind bewusst
   gleich gestaltet — eine hervorgehobene Zustimmung wäre
   nach DSGVO angreifbar.
   ============================================================ */
.cbar{
  position:fixed;z-index:58;left:var(--pad);bottom:var(--pad);
  width:min(430px,calc(100vw - var(--pad) * 2));
  background:rgba(10,14,16,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);padding:24px;
  transform:translateY(calc(100% + var(--pad) + 20px));opacity:0;
  transition:transform .7s var(--ease),opacity .5s var(--ease);
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.cbar.on{transform:none;opacity:1}
.cbar__t{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px;display:flex;align-items:center;gap:9px}
.cbar__t::before{content:"//";color:var(--amber)}
.cbar h2{font-size:19px;letter-spacing:-.025em;margin-bottom:10px;line-height:1.2}
.cbar p{font-size:13.5px;line-height:1.6;color:var(--paper-dim);margin-bottom:6px}
.cbar p a{color:var(--amber);border-bottom:1px solid rgba(245,166,35,.4)}
.cbar p a:hover{border-bottom-color:var(--amber)}
.cbar__btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.cbar__btns button{
  padding:13px 10px;border:1px solid var(--line);background:transparent;color:var(--paper);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  transition:background .3s var(--ease),border-color .3s,color .3s}
.cbar__btns button:hover{background:var(--amber);border-color:var(--amber);color:#000}
.cbar__btns button:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.cbar__more{display:block;margin-top:13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper-faint);transition:color .25s}
.cbar__more:hover{color:var(--amber)}

/* Über dem mobilen Kontakt-Dock einschweben */
@media(max-width:1039px){
  .cbar{left:12px;right:12px;width:auto;bottom:calc(74px + env(safe-area-inset-bottom));padding:20px}
  .cbar h2{font-size:17px}
}
@media(max-width:380px){
  .cbar__btns{grid-template-columns:1fr}
}

/* Fußzeilen-Link zum erneuten Öffnen */
.cbar-reopen{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-align:left;display:block}

.legal code{font-family:var(--mono);font-size:13.5px;background:rgba(232,239,241,.06);
  padding:2px 6px;color:var(--paper);word-break:break-all}

/* ============================================================
   HINWEISLEISTE — deutlicher sichtbar
   Hellerer Grund, kräftige Umrandung in der Hausfarbe.
   ============================================================ */
.cbar{
  background:rgba(26,31,35,.985);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:2px solid var(--amber);
  box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(245,166,35,.14),
             0 0 44px rgba(245,166,35,.1);
  padding:26px}
/* Der Kasten ist in beiden Fassungen bewusst dunkel. Seine Textfarben
   werden deshalb fest gesetzt und NICHT aus --paper abgeleitet: --paper
   kippt in der hellen Fassung auf Fast-Schwarz und ergäbe dann schwarze
   Schrift auf schwarzem Grund. */
.cbar h2{color:#eef3f5}
.cbar p{color:#b9c4c9}
.cbar__t{color:var(--amber);letter-spacing:.18em}

/* Schaltflächen auf hellerem Grund klarer abgesetzt —
   beide weiterhin gleichwertig gestaltet */
.cbar__btns button{
  border-color:rgba(232,239,241,.45);
  background:rgba(232,239,241,.05);
  color:#eef3f5;font-weight:500}
.cbar__btns button:hover{background:var(--amber);border-color:var(--amber);color:#000}
.cbar__more{color:#8c979c}
.cbar__more:hover{color:var(--amber)}

/* Kurzer Impuls beim Erscheinen, damit die Leiste auffällt */
@media (prefers-reduced-motion: no-preference){
  .cbar.on{animation:cbarPuls 2.4s var(--ease) .45s 1}
  @keyframes cbarPuls{
    0%,100%{box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(245,166,35,.14),
                       0 0 44px rgba(245,166,35,.1)}
    45%    {box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 0 3px rgba(245,166,35,.3),
                       0 0 62px rgba(245,166,35,.24)}
  }
}

/* ============================================================
   KONFIGURATOR — veränderbare Mengen
   ============================================================ */
.result__head{align-items:flex-start}
.cfg-reset{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--amber);border-bottom:1px solid rgba(245,166,35,.4);padding:3px 0;flex:none;
  transition:border-color .3s}
.cfg-reset.on{display:block}
.cfg-reset:hover{border-bottom-color:var(--amber)}
.cfg-reset:focus-visible{outline:1px solid var(--amber);outline-offset:3px}

.cfg-tipp{font-size:13.5px;line-height:1.65;color:var(--paper-faint);margin:-4px 0 2px}

.bom__row{align-items:center;gap:16px;transition:opacity .3s}
.bom__row span{flex:1;min-width:0}

/* Mengenauswahl */
.bom__menge{position:relative;flex:none;display:block}
.bom__menge select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:rgba(232,239,241,.05);border:1px solid var(--line);
  color:var(--paper);font-family:var(--mono);font-size:15.5px;
  padding:8px 26px 8px 12px;min-width:62px;cursor:pointer;text-align:left;
  transition:border-color .25s,background .25s,color .25s}
.bom__menge select:hover{border-color:rgba(232,239,241,.32)}
.bom__menge select:focus{outline:none;border-color:var(--amber);background:rgba(245,166,35,.08)}
.bom__menge::after{
  content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;pointer-events:none;
  border-right:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);
  transform:translateY(-70%) rotate(45deg)}
.bom__menge select option{background:var(--ink-2);color:var(--paper)}

/* Zustände */
.bom__row.is-geaendert .bom__menge select{border-color:var(--amber);color:var(--amber);
  background:rgba(245,166,35,.1)}
.bom__row.is-null{opacity:.4}
.bom__row.is-null span{text-decoration:line-through;text-decoration-color:var(--paper-faint)}
.bom__row.is-null.is-geaendert{opacity:.55}

/* Für Bildschirmleser, optisch verborgen */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bom{max-height:none;padding-right:2px}

@media(max-width:899px){
  .bom__menge select{font-size:16px;padding:10px 28px 10px 12px;min-width:68px}
  .bom__row{gap:12px;padding:11px 0}
  .result__head{flex-wrap:wrap;gap:10px}
}
.attach__list div.ist-angepasst b{position:relative}
.attach__list div.ist-angepasst b::after{content:"angepasst";position:absolute;right:0;top:100%;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);white-space:nowrap;margin-top:2px}
.attach__list div.ist-angepasst{padding-bottom:12px}

/* ============================================================
   GERÄTEDETAIL IM GRUNDRISS
   Nimmt die Angaben auf, die zuvor bei den Bausteinen standen.
   ============================================================ */
.dev-detail{min-height:0;display:flex;flex-direction:column;gap:16px}
.dev-detail__kopf{display:flex;gap:18px;align-items:flex-start}
.dev-detail__bild{flex:none;width:76px;height:76px;display:grid;place-items:center;
  border:1px solid var(--line-2);
  background:radial-gradient(120% 90% at 50% 20%,rgba(245,166,35,.12),transparent 62%),#0a0d0f}
.dev-detail__bild svg{width:62%;height:auto;overflow:visible}
.dev-detail h4{margin:8px 0 3px;font-size:clamp(19px,1.9vw,24px);letter-spacing:-.025em;line-height:1.15}
.dev-detail__prod{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper-faint)}
.dev-detail p{font-size:15.5px;line-height:1.7;color:var(--paper-dim);margin:0}

/* Technische Daten */
.dev-specs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.dev-specs div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line-2)}
.dev-specs span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper-faint)}
.dev-specs b{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--paper);text-align:right}

.chips{margin-top:0}

@media(max-width:899px){
  .dev-detail__bild{width:60px;height:60px}
  .dev-detail__kopf{gap:14px}
  .dev-specs b{font-size:10.5px}
}

/* ============================================================
   KONFIGURATOR IM FOKUS
   ============================================================ */
.btn--gross{padding:19px 34px;font-size:13.5px;letter-spacing:.13em}
.btn--gross .arrow{width:13px;height:13px}

.hero__hint{font-size:13.5px;line-height:1.65;color:var(--paper-dim);margin-top:14px;max-width:44ch}

/* Der Konfigurator bekommt einen eigenen Rahmen */
#konfigurator{border-top:1px solid rgba(245,166,35,.28);
  background:linear-gradient(180deg,rgba(245,166,35,.055),transparent 40%),var(--ink-2)}
#konfigurator .sec-head .eyebrow b{color:var(--amber)}

/* Sprungmarke in der Kontaktleiste (Desktop) */
.crail__i--cfg{background:var(--amber);color:#000;border-color:var(--amber)}
.crail__i--cfg::after{background:#000;opacity:.25}
.crail__i--cfg:hover,.crail__i--cfg:focus-visible{background:var(--amber-2);border-color:var(--amber-2)}

@media(max-width:899px){
  .btn--gross{width:100%;justify-content:center;padding:17px 24px}
  .hero__hint{font-size:13.5px;margin-top:12px}
}

/* ============================================================
   KONFIGURATOR — Pflichtangabe und Hinweise
   ============================================================ */
.q{transition:border-color .35s var(--ease)}
.q__l{align-items:baseline}
.q__pflicht{display:none;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#000;background:var(--amber);
  padding:2px 7px;margin-left:10px}
.q.is-pflicht{border-top-color:var(--amber)}
.q.is-pflicht .q__pflicht{display:inline-block}
.q.is-pflicht .q__l{color:var(--paper)}

.q__hinweis{font-size:13.5px;line-height:1.65;color:var(--amber);margin-top:12px;
  padding-left:13px;border-left:2px solid rgba(245,166,35,.5);max-width:62ch}
.q__hinweis:empty{display:none}

@media(max-width:899px){
  .q__pflicht{margin-left:0;margin-top:6px;display:none}
  .q.is-pflicht .q__l{flex-wrap:wrap}
  .q__hinweis{font-size:13.5px}
}

/* ============================================================
   HAUPTSCHALTFLÄCHE — soll sofort ins Auge springen
   Deutlich größere Schrift, dafür weniger Sperrung, damit die
   Zeile trotz der Größe ruhig bleibt.
   ============================================================ */
.btn--gross{
  padding:22px 40px;
  font-size:19px;
  font-family:var(--font);
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none;
  gap:16px}
.btn--gross .arrow{width:17px;height:17px;stroke-width:1.8}

@media(max-width:899px){
  .btn--gross{width:100%;justify-content:center;padding:20px 24px;font-size:18px}
  .btn--gross .arrow{width:16px;height:16px}
}
@media(max-width:380px){
  .btn--gross{font-size:16.5px;padding:18px 18px;gap:12px}
}

/* Beide Schaltflächen auf gleicher Grundlinie, ohne die kleinere zu strecken */
.hero__cta{align-items:center}
@media(max-width:899px){.hero__cta{align-items:stretch}}

/* Abschluss des Konfigurators — gleiche Wirkung wie im Hero */
.result .btn--gross{width:100%;margin-top:6px}
.cfg-hinweis{font-size:15.5px;line-height:1.55;color:var(--paper);margin-top:14px;
  padding-left:15px;border-left:2px solid var(--amber)}
@media(max-width:899px){
  .cfg-hinweis{font-size:13.5px;padding-left:13px}
}

/* ============================================================
   PRODUKTBILDER
   Solange keine Datei vorliegt, bleibt die gezeichnete Skizze
   stehen — die Seite sieht in beiden Fällen vollständig aus.
   ============================================================ */
.dev-detail__bild{position:relative;overflow:hidden}
.dev-foto{width:100%;height:100%;object-fit:contain;display:block;
  opacity:0;transition:opacity .45s var(--ease)}
.hat-foto .dev-foto{opacity:1}
.dev-detail__bild .dev-skizze{position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .3s}
.dev-detail__bild.hat-foto .dev-skizze{opacity:0;pointer-events:none}
.dev-detail__bild.hat-foto{padding:6px}

/* Variantenkarten */

/* ============================================================
   PRODUKTFOTOS AUF WEISSEM GRUND
   Die Herstellerfotos sind auf Weiß freigestellt. Statt sie
   mühsam auszuschneiden, bekommen sie eine helle Fläche —
   das wirkt wie eine Produktkachel und bleibt sauber.
   ============================================================ */
.dev-detail__bild.hat-foto{background:#f4f7f8;border-color:rgba(232,239,241,.2);padding:4px}
.dev-foto{mix-blend-mode:normal}

/* Absenden im Kontaktbereich so kräftig wie im Konfigurator */
.form-actions .btn--gross{min-width:300px}
@media(max-width:899px){.form-actions .btn--gross{width:100%;min-width:0}}

/* ============================================================
   VARIANTENBILDER — feste, ruhige Höhe statt Seitenverhältnis
   Über das Seitenverhältnis wuchsen die Bilder mit der Spalten-
   breite mit und nahmen mobil fast den halben Bildschirm ein.
   ============================================================ */

/* ============================================================
   TERMINVORSCHLAG
   ============================================================ */
.term{display:grid;gap:clamp(30px,4vw,60px)}
@media(min-width:1000px){.term{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr)}}

.term__lade{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;color:var(--paper-faint);
  padding:20px 0}
.term__leer{font-size:15.5px;color:var(--paper-dim);line-height:1.7;padding:16px 0}
.term__hinweis{font-size:13.5px;line-height:1.6;color:var(--paper-faint);margin-top:20px;
  padding-left:15px;border-left:2px solid var(--line);max-width:60ch}

.term__tage{display:flex;flex-direction:column;border-top:1px solid var(--line);
  max-height:600px;overflow-y:auto;transition:opacity .4s}
.term__tage.is-fertig{opacity:.45;pointer-events:none}
.term__tage::-webkit-scrollbar{width:4px}
.term__tage::-webkit-scrollbar-thumb{background:var(--line)}

.tag{display:grid;gap:12px;padding:16px 2px;border-bottom:1px solid var(--line)}
@media(min-width:620px){.tag{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}}
.tag__kopf{display:flex;align-items:baseline;gap:14px;min-width:0}
.tag__datum{display:flex;align-items:baseline;gap:8px;flex:none}
.tag__datum b{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--paper)}
.tag__datum span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-faint)}
.tag__gebiet{font-size:13.5px;line-height:1.4;color:var(--paper-dim);min-width:0}

.tag__zeiten{display:flex;flex-wrap:wrap;gap:8px}
.slot{border:1px solid var(--line);padding:11px 17px;font-family:var(--mono);font-size:15.5px;
  letter-spacing:.04em;color:var(--paper-dim);transition:.25s var(--ease)}
.slot:hover{border-color:rgba(232,239,241,.4);color:var(--paper)}
.slot.on{background:var(--amber);border-color:var(--amber);color:#000;font-weight:500}
.slot:focus-visible{outline:1px solid var(--amber);outline-offset:2px}

/* Gewählter Zeitraum */
.term__form{align-self:start}
.term__gewaehlt{border:2px solid var(--line);background:var(--ink-2);padding:20px 22px;margin-bottom:28px;
  transition:border-color .35s var(--ease),background .35s}
.term__gewaehlt.is-an{border-color:var(--amber);background:rgba(245,166,35,.06)}
.term__gewaehlt-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.term__gewaehlt strong{display:block;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.02em;
  line-height:1.25;color:var(--paper);font-weight:600}
.term__gewaehlt em{display:block;font-style:normal;font-size:13.5px;color:var(--paper-dim);margin-top:6px}

.term__zwei{display:grid;gap:0 20px}
@media(min-width:520px){.term__zwei{grid-template-columns:120px 1fr}}

@media(min-width:1000px){
  .term__form{position:sticky;top:96px}
}
@media(max-width:999px){
  .term__tage{max-height:none}
}
@media(max-width:619px){
  .tag__kopf{flex-wrap:wrap;gap:6px 12px}
  .tag__gebiet{width:100%;font-size:13.5px}
  .slot{flex:1;min-width:88px;text-align:center;justify-content:center}
}

/* Formular auf der Zusageseite */
.zusage__form{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.zusage__form .btn--gross{width:100%;justify-content:center;margin-top:8px}
.zusage__zwei{display:grid;gap:0 20px}
@media(min-width:520px){.zusage__zwei{grid-template-columns:130px 1fr}}
.zusage__fern{font-size:15.5px;line-height:1.75;color:var(--paper);margin-top:18px;
  padding-left:15px;border-left:2px solid var(--amber);max-width:56ch}

/* Vorbereitungshinweise im Konfigurator */
.cfg-vorb{margin-top:22px}
.cfg-vorb:empty{display:none}
.cfg-vorb__t{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px}
.cfg-vorb__i{border-left:2px solid rgba(245,166,35,.45);padding:2px 0 2px 14px;margin-bottom:14px}
.cfg-vorb__i:last-child{margin-bottom:0}
.cfg-vorb__i b{display:block;font-size:15.5px;font-weight:600;color:var(--paper);margin-bottom:4px}
.cfg-vorb__i span{display:block;font-size:13.5px;line-height:1.6;color:var(--paper-dim)}

/* ============================================================
   FESTE KOPFLEISTE
   Die Leiste bleibt beim Scrollen sichtbar. Bei einer Seite,
   deren Hauptziel der Konfigurator ist, soll der Weg dorthin
   nie mehr als einen Blick entfernt sein.
   ============================================================ */
.nav.hide{transform:none}

/* ============================================================
   BESCHRIFTUNGEN IM KONFIGURATOR
   Größer und in der Hausschrift statt in der Monospace —
   das sind Fragen an den Besucher, keine technischen Marken.
   ============================================================ */
.q__l{font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--paper);margin-bottom:16px;text-transform:none}
.q__l b{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--amber);
  letter-spacing:.1em;position:relative;top:-1px}

@media(max-width:899px){
  .q__l{font-size:15.5px}
}

/* ============================================================
   BESTÄTIGUNG NACH DEM ABSENDEN

   Mittig eingeblendet, mit abgedunkeltem Hintergrund. Der
   Haken zeichnet sich einmal nach — kurz genug, um nicht zu
   verzögern, deutlich genug, um den Erfolg zu quittieren.
   ============================================================ */
.danke{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.danke[hidden]{display:none}
body.danke-offen{overflow:hidden}

.danke__grund{position:absolute;inset:0;background:rgba(4,6,7,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s var(--ease)}
.danke.on .danke__grund{opacity:1}

.danke__karte{position:relative;width:100%;max-width:540px;background:var(--ink-2);
  border:1px solid var(--line);overflow:hidden;
  max-height:calc(100vh - 40px);overflow-y:auto;
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .4s var(--ease),transform .45s var(--ease)}
.danke.on .danke__karte{opacity:1;transform:none}
.danke__karte::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber)}

.danke__x{width:38px;height:38px;display:grid;place-items:center;margin:-8px -8px -8px 0;
  color:var(--paper-faint);transition:color .25s}
.danke__x:hover{color:var(--paper)}
.danke__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.danke__x:focus-visible{outline:1px solid var(--amber);outline-offset:2px}

.danke__haken{width:52px;height:52px;margin-bottom:22px}
.danke__haken svg{width:100%;height:100%;fill:none;stroke:var(--amber);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.danke__haken circle{opacity:.35;stroke-dasharray:151;stroke-dashoffset:151}
.danke__haken path{stroke-dasharray:34;stroke-dashoffset:34}
.danke.on .danke__haken circle{animation:hakenKreis .6s var(--ease) forwards}
.danke.on .danke__haken path{animation:hakenStrich .45s var(--ease) .35s forwards}
@keyframes hakenKreis{to{stroke-dashoffset:0}}
@keyframes hakenStrich{to{stroke-dashoffset:0}}

.danke__karte h2{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.03em;line-height:1.12;margin:12px 0 14px}
.danke__karte > p{font-size:15.5px;line-height:1.75;color:var(--paper-dim);margin-bottom:24px}

.danke__schritte{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;margin-bottom:24px}
.danke__schritte b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.danke__schritte span{font-size:15.5px;line-height:1.7;color:var(--paper-dim)}

.danke__wa:empty{display:none}
.danke__wa{margin-bottom:24px}
.danke__wa .wa-after{margin:0;border:0;padding:0}
.danke__wa .wa-after.on{display:block}
.danke__wa .wa-send{width:100%;justify-content:center}

.danke__fuss{display:flex;flex-wrap:wrap;gap:12px}
.danke__fuss .btn--gross{flex:1;min-width:190px;justify-content:center}

@media(max-width:560px){
  .danke{padding:12px;align-items:flex-start;padding-top:24px}
  .danke__karte{padding:26px 22px;max-height:calc(100vh - 24px)}
  .danke__karte h2{font-size:25px}
  .danke__fuss .btn{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .danke__grund,.danke__karte{transition:none}
  .danke__karte{transform:none}
  .danke.on .danke__haken circle,.danke.on .danke__haken path{animation:none;stroke-dashoffset:0}
}

/* ============================================================
   VORGEHALTEN: Fallbeispiele und Gegenüberstellung
   Wird für den späteren Bereich Schließanlagen gebraucht.
   Stört nicht, solange keine Seite die Klassen verwendet.
   ============================================================ */

/* Drei kurze Fälle nebeneinander */
.fakten{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,3vw,44px)}
@media(min-width:820px){.fakten{grid-template-columns:repeat(3,1fr)}}
.fakt{background:var(--ink);padding:clamp(22px,2.4vw,32px);position:relative;transition:background .4s}
.fakt:hover{background:var(--ink-3)}
.fakt b{display:block;font-size:clamp(16px,1.7vw,19px);font-weight:600;letter-spacing:-.02em;
  color:var(--paper);margin-bottom:10px}
.fakt p{font-size:15.5px;line-height:1.75;color:var(--paper-dim)}
.fakt::after{content:"";position:absolute;top:0;left:0;height:1px;width:0;background:var(--amber);
  transition:width .6s var(--ease)}
.fakt:hover::after{width:100%}

/* Mechanisch gegen elektronisch */
.wege{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(28px,3vw,44px)}
@media(min-width:900px){.wege{grid-template-columns:repeat(2,1fr)}}
.weg{background:var(--ink);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.weg__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber)}
.weg h3{font-size:clamp(22px,2.4vw,29px);letter-spacing:-.03em;line-height:1.12}
.weg > p{font-size:15.5px;line-height:1.75;color:var(--paper-dim)}
.weg ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:9px}
.weg li{display:flex;gap:11px;align-items:baseline;font-size:15.5px;line-height:1.55;color:var(--paper)}
.weg li::before{content:"—";color:var(--amber);flex:none}
.weg__f{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper-faint)}

.wege__fazit{margin-top:26px;padding-left:16px;border-left:2px solid var(--amber);
  font-size:15.5px;line-height:1.7;color:var(--paper-dim);max-width:72ch}
.wege__fazit b{color:var(--paper);font-weight:600}

@media(max-width:819px){
  .fakt{padding:20px}
  .weg{padding:24px 20px}
}

/* ============================================================
   SANFTE KANTEN

   Zwei bis drei Pixel Radius genügen. Die Seite bleibt klar
   gegliedert, wirkt aber zugänglicher — bei einem Gewerk, das
   Vertrauen braucht, ist das den Aufwand wert.
   ============================================================ */
.btn,
.opt,
.slot,
.field input,
.field textarea,
.field select,
.bom__menge select,
.cat-tabs button,
.obj__nav button,
.chip{border-radius:3px}

.fakt,
.weg,
.dev-detail,
.result,
.cfg-attach,
.zusage__box,
.term__gewaehlt,
.danke__karte,
.cta-band__in,
.pcard,
.xlink,
.aside{border-radius:4px}

.dev-detail__bild,
.vcard__bild,
.dev-foto{border-radius:3px}

/* Die großen Flächen bleiben kantig — sonst verliert die Seite
   ihre Ruhe und wirkt weich statt klar. */
.nav,.sec,.subhero,.hero,footer{border-radius:0}

/* ============================================================
   HELLE FASSUNG

   Wird über data-theme="hell" am <html>-Element aktiviert.
   Die Hausfarben bleiben: Amber als Akzent, dieselbe Schrift,
   dieselbe Anordnung. Nur die Grundflächen kehren sich um.

   Hero und Fußbereich bleiben bewusst dunkel — das gibt der
   Seite eine Klammer und erhält die 3D-Szene, die auf hellem
   Grund unsichtbar wäre.
   ============================================================ */

html[data-theme="hell"]{
  forced-color-adjust:none;
  --ink:#f4f6f7;          /* Seitengrund */
  --ink-2:#ffffff;        /* Karten und Kästen */
  --ink-3:#eaeef0;        /* Überfahren */
  --paper:#101619;        /* Fließtext */
  --paper-dim:#48545a;    /* Nebentext */
  --paper-faint:#5f6a6f;  /* leise Hinweise */
  --line:#dde2e5;
  --line-2:#e8ecee;
  --amber:#f5a623;        /* Flächen und Marken */
  --amber-ink:#8a4f08;    /* Amber als Text, dunkel genug zum Lesen */
  --fokus:#8a4f08;        /* Fokusrahmen: 6,6:1 auf Weiß statt 2,0:1 bei Amber */
  --trennlinie:#c9d2d6;   /* Abschnittskante: sichtbar, aber leise */
  color-scheme:light;
}

html[data-theme="hell"] body{background:var(--ink);color:var(--paper)}

/* Amber als Textfarbe abdunkeln — auf Weiß wäre das Original
   mit 2,1:1 nicht lesbar. */
html[data-theme="hell"] .cur-r.hot,
html[data-theme="hell"] .pre__mark i,
html[data-theme="hell"] .eyebrow b,
html[data-theme="hell"] .amber,
html[data-theme="hell"] .logo__row i,
html[data-theme="hell"] .logo__tag,
html[data-theme="hell"] .menu a span,
html[data-theme="hell"] .menu__foot a b,
html[data-theme="hell"] .btn:hover,
html[data-theme="hell"] .btn--fill,
html[data-theme="hell"] .hero h1 em,
html[data-theme="hell"] .stat__n i,
html[data-theme="hell"] .big-quote em,
html[data-theme="hell"] .dev-list button.on i,
html[data-theme="hell"] .cat-tabs button.on,
html[data-theme="hell"] .obj__nav button.on i,
html[data-theme="hell"] .obj__list li::before,
html[data-theme="hell"] .fstep:hover .fstep__n,
html[data-theme="hell"] .q__l b,
html[data-theme="hell"] .opt.on,
html[data-theme="hell"] .bom__row b,
html[data-theme="hell"] .field:focus-within,
html[data-theme="hell"] .cinfo__b a:hover,
html[data-theme="hell"] .crail__i:hover,.crail__i:focus-visible,
html[data-theme="hell"] .fcol a:hover,
html[data-theme="hell"] .subhero h1 em,
html[data-theme="hell"] .crumbs a:hover,
html[data-theme="hell"] .crumbs i,
html[data-theme="hell"] .prose a,
html[data-theme="hell"] .prose a:hover,
html[data-theme="hell"] .prose ul li::before,
html[data-theme="hell"] .prose ol li::before,
html[data-theme="hell"] .aside__nav a[aria-current],
html[data-theme="hell"] .aside__nav a[aria-current] i,
html[data-theme="hell"] .faq summary::before,
html[data-theme="hell"] .faq summary:hover,
html[data-theme="hell"] .xlink span,
html[data-theme="hell"] .legal ul li::before,
html[data-theme="hell"] .legal a,
html[data-theme="hell"] .todo b,
html[data-theme="hell"] .fsocial a:hover,
html[data-theme="hell"] .about__claim em,
html[data-theme="hell"] .creds b,
html[data-theme="hell"] .area span:first-child,
html[data-theme="hell"] .u-amber,
html[data-theme="hell"] .field:focus-within label,
html[data-theme="hell"] .field label em,
html[data-theme="hell"] .field.is-error,
html[data-theme="hell"] .field.is-error label,
html[data-theme="hell"] .field__hint,
html[data-theme="hell"] .form-note a,
html[data-theme="hell"] .form-note a:hover,
html[data-theme="hell"] .attach__t,
html[data-theme="hell"] .attach__toggle[aria-pressed="true"] .attach__box,
html[data-theme="hell"] .attach__list b,
html[data-theme="hell"] .quote__more,
html[data-theme="hell"] .quote__more:hover,
html[data-theme="hell"] .cfg-reset,
html[data-theme="hell"] .cfg-reset:hover,
html[data-theme="hell"] .bom__menge select:focus,
html[data-theme="hell"] .bom__row.is-geaendert .bom__menge select,
html[data-theme="hell"] .attach__list div.ist-angepasst b::after,
html[data-theme="hell"] #konfigurator .sec-head .eyebrow b,
html[data-theme="hell"] .crail__i--cfg,
html[data-theme="hell"] .q.is-pflicht,
html[data-theme="hell"] .q__hinweis,
html[data-theme="hell"] .slot.on,
html[data-theme="hell"] .term__gewaehlt.is-an,
html[data-theme="hell"] .term__gewaehlt-l,
html[data-theme="hell"] .cfg-vorb__t,
html[data-theme="hell"] .danke__schritte b,
html[data-theme="hell"] .weg__k,
html[data-theme="hell"] .weg li::before{color:var(--amber-ink)}

/* Nur der Fußbereich bleibt dunkel — als ruhiger Abschluss */
html[data-theme="hell"] footer{
  --ink:#07090a;
  --ink-2:#0c1012;
  --ink-3:#11161a;
  --paper:#e8eff1;
  --paper-dim:#c2ccd0;
  --paper-faint:#8a959a;
  --line:#232a2e;
  --line-2:#1a2024;
  --amber-ink:#f5a623;
  background:var(--ink);
  color:var(--paper);
}

/* ---- Kopfzeile: bleibt dunkel ----
   Sie ist dauerhaft eingeblendet und trägt die Wortmarke. Dunkel
   gesetzt hebt sie sich klar vom hellen Inhalt ab und behält den
   Wiedererkennungswert. */
html[data-theme="hell"] .nav{
  --paper:#e8eff1;
  --paper-dim:#c2ccd0;
  --paper-faint:#8a959a;
  --line:#232a2e;
  --amber-ink:#f5a623;
  background:#07090a;
  border-bottom:1px solid #1a2024;
}
html[data-theme="hell"] .nav.stuck{
  background:rgba(7,9,10,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:#232a2e;
}
html[data-theme="hell"] .logo__row{color:#e8eff1}
html[data-theme="hell"] .logo__row i{color:var(--amber)}
html[data-theme="hell"] .logo__tag{color:var(--amber)}
html[data-theme="hell"] .nav__links a{color:#c2ccd0}
html[data-theme="hell"] .nav__links a:hover,
html[data-theme="hell"] .nav__links a[aria-current]{color:#e8eff1}
html[data-theme="hell"] .nav__links a::after{background:var(--amber)}
html[data-theme="hell"] .burger i{background:#e8eff1}
html[data-theme="hell"] .nav .btn{border-color:#2c3439;color:#e8eff1}
html[data-theme="hell"] .nav .btn--fill{background:var(--amber);border-color:var(--amber);color:#000}

/* ---- Mobiles Menü: gehört zur Kopfzeile, bleibt dunkel ---- */
html[data-theme="hell"] .menu{
  --paper:#e8eff1;
  --paper-dim:#c2ccd0;
  --paper-faint:#8a959a;
  --line:#232a2e;
  --amber-ink:#f5a623;
  background:#07090a;
}
html[data-theme="hell"] .menu a{color:#e8eff1;border-color:#1a2024}
html[data-theme="hell"] .menu a span{color:var(--amber)}
html[data-theme="hell"] .menu a:hover{background:#11161a}
html[data-theme="hell"] .menu__foot{border-color:#232a2e}
html[data-theme="hell"] .menu__foot a{color:#e8eff1}

/* ---- Hintergrundflächen ---- */
html[data-theme="hell"] body::before{background:var(--ink)}
html[data-theme="hell"] .vgrid i{background:var(--line-2)}
html[data-theme="hell"] .grain{opacity:.02}

/* Schaltflächen: gefüllt bleibt Amber mit schwarzer Schrift,
   die zurückhaltende Variante bekommt eine sichtbare Kante */
html[data-theme="hell"] .btn{border-color:var(--line);color:var(--paper)}
html[data-theme="hell"] .btn--fill{background:var(--amber);border-color:var(--amber);color:#000}
html[data-theme="hell"] .cta-band{background:var(--ink-2);border:1px solid var(--line)}

/* Flächen, die im Dunkeln vom Hintergrund lebten, brauchen jetzt Kanten */
html[data-theme="hell"] .fakt,
html[data-theme="hell"] .weg,
html[data-theme="hell"] .result,
html[data-theme="hell"] .dev-detail,
html[data-theme="hell"] .cfg-attach,
html[data-theme="hell"] .pcard,
html[data-theme="hell"] .fstep{background:var(--ink-2);border:1px solid var(--line)}

/* Alle Abschnitte auf einer Fläche. In der dunklen Fassung
   trennen leichte Tonwertunterschiede die Bereiche — auf hellem
   Grund wirkt das fleckig statt gegliedert. Die Gliederung
   übernehmen hier die Linien und Abstände. */
html[data-theme="hell"] .sec--alt{background:var(--ink)}

/* Die Gliederung übernehmen jetzt tatsächlich Linien — vorher stand hier
   nur die Absicht, und getrennt haben allein die Abstände. Eine feine
   Trennkante je Abschnitt erlaubt es, die Abstände deutlich zu kürzen,
   ohne dass die Bereiche ineinanderlaufen. */
html[data-theme="hell"] .sec + .sec,
html[data-theme="hell"] main + .sec,
html[data-theme="hell"] main > .sec:first-of-type{
  border-top:1px solid var(--trennlinie);
}
/* home-locks brachte eigene Kanten mit — jetzt doppelt, deshalb weg. */
html[data-theme="hell"] .home-locks{border-top:none;border-bottom:none}
html[data-theme="hell"] #konfigurator{
  background:linear-gradient(180deg,rgba(245,166,35,.09),transparent 34%),var(--ink)}

/* Eingabefelder */
html[data-theme="hell"] .field input,
html[data-theme="hell"] .field textarea,
html[data-theme="hell"] .field select,
html[data-theme="hell"] .bom__menge select,
html[data-theme="hell"] .opt{
  background:var(--ink-2);border-color:var(--line);color:var(--paper)}
html[data-theme="hell"] .opt.on{background:var(--amber);border-color:var(--amber);color:#000}

/* Produktbilder liegen ohnehin auf Weiß */
html[data-theme="hell"] .dev-detail__bild.hat-foto{background:#fff;border-color:var(--line)}

/* Bestätigung */
html[data-theme="hell"] .danke__grund{background:rgba(16,22,25,.55)}
html[data-theme="hell"] .danke__karte{background:#fff}

/* ---- Halbtransparente Flächen, die aus dem Dunklen stammen ---- */
html[data-theme="hell"] .sec--clear{
  background:linear-gradient(180deg,rgba(244,246,247,0),var(--ink) 40%)}
html[data-theme="hell"] .crail__i{
  background:rgba(255,255,255,.86);border-color:var(--line);color:var(--paper)}
html[data-theme="hell"] .crail__i:hover{background:#fff}
html[data-theme="hell"] .crail__lbl{color:var(--paper-faint)}
html[data-theme="hell"] .cdock{
  background:rgba(255,255,255,.94);border-top:1px solid var(--line)}
html[data-theme="hell"] .cdock a{color:var(--paper)}
html[data-theme="hell"] .cdock__b{color:var(--paper-dim)}
html[data-theme="hell"] .quote--lang blockquote::after{
  background:linear-gradient(180deg,rgba(244,246,247,0),var(--ink))}

/* ---- Konfigurator: Funktion unverändert, nur Flächen ---- */
html[data-theme="hell"] .q{border-color:var(--line)}
html[data-theme="hell"] .bom__row{border-color:var(--line)}
html[data-theme="hell"] .bom__row.is-optional{opacity:.62}
html[data-theme="hell"] .cfg-vorb__i{border-left-color:var(--amber)}
html[data-theme="hell"] .attach__list div{border-color:var(--line)}

/* ---- Grundriss ---- */
html[data-theme="hell"] .plan__stage{background:var(--ink-2);border-color:var(--line)}
html[data-theme="hell"] .node__dot{box-shadow:0 0 0 4px rgba(245,166,35,.18)}
html[data-theme="hell"] .dev-list button{border-color:var(--line)}
html[data-theme="hell"] .dev-list button.on{background:var(--ink-3)}

/* ---- Der grüne WhatsApp-Knopf bleibt, wie er ist ---- */
html[data-theme="hell"] .wa-send{color:#fff}

/* ---- Helle Fassung: Lesbarkeit im Einstieg ----
   Die Zeichnung liegt hinter dem Text. Damit die Schrift nicht
   über Linien läuft, legt sich ein weicher Verlauf dazwischen —
   links deckend, nach rechts auslaufend, sodass das Haus frei bleibt. */
html[data-theme="hell"] .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    var(--ink) 0%,
    var(--ink) 42%,
    rgba(244,246,247,.72) 56%,
    rgba(244,246,247,0) 72%);
  pointer-events:none;
  z-index:-1;
}

@media(max-width:899px){
  /* Auf dem Handy steht der Text über der ganzen Breite —
     dort deckt der Verlauf durchgehend ab. */
  html[data-theme="hell"] .hero::before{
    background:linear-gradient(180deg,
      rgba(244,246,247,.30) 0%,
      rgba(244,246,247,.86) 38%,
      var(--ink) 62%);
  }
}

/* ============================================================
   HAUSGRAFIK IM EINSTIEG

   Gezeichnet statt gerechnet: Die SVG-Fassung braucht keine
   Grafikkarte, ist auf jedem Gerät gleich scharf und wiegt
   unter zwei Kilobyte. In der hellen Fassung ersetzt sie die
   3D-Szene, die dort schlecht zur Geltung kommt.
   ============================================================ */
.haus{display:none}

html[data-theme="hell"] .haus{
  display:block;
  position:absolute;
  right:calc(var(--pad) * -0.2);
  top:50%;
  transform:translateY(-46%);
  width:min(46vw, 560px);
  z-index:-1;
  pointer-events:none;
}
html[data-theme="hell"] .haus svg{width:100%;height:auto;display:block}

/* Linien */
.haus .h-linie{fill:none;stroke:var(--paper);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.62}
.haus .h-fein{fill:none;stroke:var(--paper);stroke-width:1.4;
  stroke-linecap:round;opacity:.3}
.haus .h-boden{fill:none;stroke:var(--paper);stroke-width:1.6;opacity:.22}
.haus .h-boden--fein{opacity:.12}

/* Öffnungen */
.haus .h-glas{fill:var(--amber);opacity:.14}
.haus .h-rahmen{fill:none;stroke:var(--amber);stroke-width:2;opacity:.8}
.haus .h-punkt{fill:var(--amber);opacity:.85}
.haus .h-welle{fill:none;stroke:var(--amber);stroke-width:1.6;
  stroke-linecap:round;opacity:.5}

/* Die Öffnungen atmen nacheinander auf — dieselbe Idee wie in
   der 3D-Szene, nur mit CSS statt mit Rechenaufwand. */
.haus .oeffnung{animation:atmen 7s var(--ease) infinite}
.haus .o0{animation-delay:0s}
.haus .o1{animation-delay:.5s}
.haus .o2{animation-delay:1s}
.haus .o3{animation-delay:1.5s}
.haus .o4{animation-delay:2s}
.haus .o5{animation-delay:2.5s}
.haus .o6{animation-delay:3s}
.haus .o7{animation-delay:3.5s}
.haus .o8{animation-delay:4s}

@keyframes atmen{
  0%,72%,100%{opacity:.72}
  36%{opacity:1}
}

@media(max-width:899px){
  html[data-theme="hell"] .haus{
    position:relative;right:auto;top:auto;transform:none;
    width:100%;max-width:420px;margin:26px auto 0;z-index:0;opacity:.9}
}

@media(prefers-reduced-motion:reduce){
  .haus .oeffnung{animation:none;opacity:.85}
}

/* ---- Bestätigungsfenster: Kopf und Fuß dunkel, Mitte hell ----
   Dieselbe Ordnung wie die Seite. Der Kopf trägt die Wortmarke,
   die Mitte die Nachricht, der Fuß die Handlung. */
.danke__kopf{display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(22px,3vw,32px);background:#07090a;border-bottom:1px solid #1a2024}
.danke__marke{font-style:italic;font-weight:800;font-size:17px;letter-spacing:-.03em;color:#e8eff1}
.danke__marke i{color:var(--amber);font-style:italic;margin-right:.1em}
.danke__kopf .danke__x{color:#8a959a}
.danke__kopf .danke__x:hover{color:#e8eff1}

.danke__mitte{padding:clamp(26px,3.5vw,38px) clamp(22px,3vw,32px) clamp(22px,3vw,30px)}
.danke__mitte .danke__haken{margin-bottom:18px}

.danke__fuss{padding:18px clamp(22px,3vw,32px);background:#07090a;border-top:1px solid #1a2024}
.danke__fuss .btn{border-color:#2c3439;color:#e8eff1}
.danke__fuss .btn--fill{background:var(--amber);border-color:var(--amber);color:#000}

/* In der hellen Fassung bleibt die Mitte hell mit dunkler Schrift */
html[data-theme="hell"] .danke__karte{background:#fff;border-color:var(--line)}
html[data-theme="hell"] .danke__mitte h2{color:var(--paper)}
html[data-theme="hell"] .danke__schritte{border-color:var(--line)}

/* Kennzahlen mittig in ihren Feldern */
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.stat__n{text-align:center}
.stat__l{max-width:24ch;text-align:center;margin-left:auto;margin-right:auto}

/* ============================================================
   KONTAKTWEGE DEUTLICHER

   Auf hellem Grund verschwanden umrandete Knöpfe. Sie bekommen
   jetzt Fläche statt nur Kante — das gilt besonders für
   WhatsApp, das sonst nur als grüne Linie erkennbar war.
   ============================================================ */
/* Das helle WhatsApp-Grün trägt weiße Schrift nur mit 2,0:1.
   Der dunklere Ton bleibt eindeutig als WhatsApp erkennbar und
   erreicht 5,4:1. */
.wa-send{background:#0F7A3D;border-color:#0F7A3D;color:#fff;font-weight:500}
.wa-send:hover,.wa-send:focus-visible{background:#0b6432;border-color:#0b6432;color:#fff}
.wa-send svg{stroke:currentColor}

/* Seitliche Kontaktleiste: gefüllt statt umrandet, Beschriftung sichtbar */
html[data-theme="hell"] .crail__i{
  background:#101619;border-color:#101619;color:#e8eff1}
html[data-theme="hell"] .crail__i:hover,
html[data-theme="hell"] .crail__i:focus-visible{
  background:var(--amber);border-color:var(--amber);color:#000}
html[data-theme="hell"] .crail__i--wa{background:#0F7A3D;border-color:#0F7A3D;color:#fff}
html[data-theme="hell"] .crail__i--wa:hover,
html[data-theme="hell"] .crail__i--wa:focus-visible{background:#0b6432;border-color:#0b6432;color:#fff}
html[data-theme="hell"] .crail__lbl{color:var(--paper-dim)}

/* Untere Leiste auf dem Handy */
html[data-theme="hell"] .cdock{background:#101619;border-top-color:#101619}
html[data-theme="hell"] .cdock a{color:#e8eff1}
html[data-theme="hell"] .cdock__b{color:#e8eff1}
html[data-theme="hell"] .cdock__b--wa{background:#0F7A3D;color:#fff}

/* Telefonnummer und E-Mail im Kontaktbereich hervorheben */
html[data-theme="hell"] .cinfo__b a{color:var(--paper);border-bottom:1px solid rgba(138,79,8,.35)}
html[data-theme="hell"] .cinfo__b a:hover{color:var(--amber-ink);border-bottom-color:var(--amber-ink)}

/* ============================================================
   BESTÄTIGUNGSFENSTER: Fußbereich in der hellen Fassung

   Die allgemeine Regel für Schaltflächen greift dort stärker
   als die des Fußbereichs und färbte die Schrift dunkel — auf
   dunklem Grund also unsichtbar. Diese Regeln wiegen schwerer.
   ============================================================ */
html[data-theme="hell"] .danke__fuss{background:#07090a;border-top-color:#1a2024}
html[data-theme="hell"] .danke__fuss .btn{
  border-color:#39434a;color:#e8eff1;background:transparent}
html[data-theme="hell"] .danke__fuss .btn:hover{
  border-color:var(--amber);color:var(--amber)}
html[data-theme="hell"] .danke__fuss .btn--fill,
html[data-theme="hell"] .danke__fuss .btn--fill:hover{
  background:var(--amber);border-color:var(--amber);color:#000}

/* Dasselbe gilt für den Kopfstreifen */
html[data-theme="hell"] .danke__kopf .danke__x{color:#a3aeb3}
html[data-theme="hell"] .danke__kopf .danke__x:hover{color:#e8eff1}

/* Schaltflächen in den dunkel gebliebenen Bereichen der hellen Fassung */
html[data-theme="hell"] footer .btn,
html[data-theme="hell"] .menu .btn{
  border-color:#39434a;color:#e8eff1;background:transparent}
html[data-theme="hell"] footer .btn:hover,
html[data-theme="hell"] .menu .btn:hover{
  border-color:var(--amber);color:var(--amber)}
html[data-theme="hell"] footer .btn--fill,
html[data-theme="hell"] .menu .btn--fill{
  background:var(--amber);border-color:var(--amber);color:#000}

/* ============================================================
   SCHLIESSANLAGEN-KALKULATOR
   ============================================================ */
.skalk__vorlagen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-bottom:clamp(26px,3vw,40px)}
.skalk__vorlagen span{font-size:13.5px;color:var(--paper-dim);margin-right:6px}
.skalk__vorlagen button{border:1px solid var(--line);border-radius:3px;padding:10px 18px;
  font-size:14px;color:var(--paper);transition:.25s var(--ease)}
.skalk__vorlagen button:hover{border-color:var(--paper-dim)}
.skalk__vorlagen button.on{background:var(--amber);border-color:var(--amber);color:#000;font-weight:500}

.skalk__raster{display:grid;gap:clamp(28px,3.5vw,52px)}
.skalk__links,.skalk__rechts{min-width:0}
@media(min-width:1100px){
  .skalk__raster{grid-template-columns:minmax(0,1fr) minmax(330px,.8fr)}
  .skalk__rechts{position:sticky;top:96px;align-self:start}
}

.sblock{margin-bottom:clamp(30px,3.5vw,46px)}
.sblock h3{display:flex;align-items:baseline;gap:12px;font-size:clamp(17px,1.9vw,21px);
  letter-spacing:-.02em;margin-bottom:10px}
.sblock h3 b{font-family:var(--mono);font-size:11.5px;color:var(--amber);font-weight:400}
.sblock__t{font-size:13.5px;line-height:1.65;color:var(--paper-dim);max-width:64ch;margin-bottom:16px}

/* Auswahlkarten */
.skarten{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media(min-width:760px){.skarten{grid-template-columns:repeat(2,1fr)}}
@media(min-width:760px){.skarten--zwei{grid-template-columns:repeat(2,1fr)}}
.skarte{background:var(--ink-2);padding:18px 20px;text-align:left;display:flex;flex-direction:column;
  gap:7px;transition:background .3s var(--ease)}
.skarte:hover{background:var(--ink-3)}
.skarte b{font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--paper);line-height:1.3}
.skarte span{font-size:13.5px;line-height:1.6;color:var(--paper-dim)}
.skarte em{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper-faint);font-style:normal;margin-top:auto;padding-top:6px}
.skarte.on{background:rgba(245,166,35,.1);box-shadow:inset 0 0 0 2px var(--amber)}
.skarte.on em{color:var(--amber-ink,var(--amber))}

/* Türzeilen */
.stuer{border:1px solid var(--line);border-radius:4px;padding:14px 16px;margin-bottom:10px;
  background:var(--ink-2)}
.stuer__kopf{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.stuer__namefeld{flex:1;min-width:0}
.stuer__name{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:6px 2px;font-size:15.5px;font-weight:600;color:var(--paper);font-family:var(--font)}
.stuer__name:focus{outline:none;border-bottom-color:var(--amber)}
.stuer__sort{display:flex;flex:none;gap:4px}
.stuer__move{width:30px;height:30px;border:1px solid var(--line);border-radius:3px;background:transparent;
  color:var(--paper-dim);font:600 15px/1 var(--sans);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.stuer__move:hover:not(:disabled),.stuer__move:focus-visible{border-color:var(--amber);color:var(--ink);background:rgba(250,171,5,.08);outline:none}
.stuer__move:disabled{opacity:.28;cursor:not-allowed}
.stuer__weg{width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:3px;
  color:var(--paper-faint);font-size:18px;line-height:1;transition:.25s}
.stuer__weg:hover{border-color:#c0392b;color:#c0392b}

@media(max-width:480px){
  .stuer__kopf{align-items:flex-start;gap:6px}
  .stuer__sort{gap:3px}
  .stuer__move,.stuer__weg{width:32px;height:32px}
}
.stuer__typ{font-size:13px;line-height:1.55;color:var(--paper-faint);margin:-3px 0 12px}
.stuer__typ b{color:var(--paper-dim);font-weight:600}
.stuer__frage{padding-top:11px;border-top:1px solid var(--line-2)}
.stuer__frage>span{display:block;margin-bottom:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--paper-faint)}

.stuer__reihe{display:grid;gap:10px;margin-bottom:12px}
@media(min-width:560px){.stuer__reihe{grid-template-columns:1.6fr 1fr 1fr}.stuer__reihe--masse{grid-template-columns:1.35fr 1fr 1fr;max-width:620px}.stuer__reihe--halb{grid-template-columns:1.35fr 1fr;max-width:420px}}
.stuer__reihe label{display:flex;flex-direction:column;gap:5px}
.stuer__reihe span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-faint)}
.stuer__reihe select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:3px;
  background:var(--ink);color:var(--paper);font-size:14px;font-family:var(--font)}
.stuer__massintro{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 2px}
.stuer__massintro span{color:var(--paper-dim);font-size:11px}
.stuer__massintro small{font-size:11.5px;color:var(--paper-faint)}

.stuer__masshinweis{display:block;margin:-3px 0 12px;font-size:11.5px;line-height:1.55;color:var(--paper-faint)}
.stuer__sperrhinweis{margin:10px 0 0;padding:10px 12px;border-left:2px solid var(--amber);background:rgba(250,171,5,.06);font-size:12px;line-height:1.5;color:var(--paper-dim)}
.stuer__sperrhinweis>b{display:block;margin-bottom:4px;color:var(--paper);font-weight:600}
.stuer__sperrhinweis span{display:block}
.stuer__sperrhinweis strong{font-weight:600;color:var(--paper-dim)}
.stuer__funk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media(max-width:680px){.stuer__funk{grid-template-columns:1fr}}
.sfunk{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:3px;
  padding:8px 12px;font-size:13.5px;color:var(--paper-dim);cursor:pointer;position:relative}
.sfunk input{accent-color:var(--amber);width:15px;height:15px}
.sfunk--bedarf{align-items:flex-start;max-width:100%;padding:8px 10px}
.sfunk--bedarf input{margin-top:2px;flex:none}
.sfunk--bedarf>span{line-height:1.3;min-width:0}
.sfunk--bedarf>span>b{display:block;font-size:12.75px;font-weight:550;color:inherit}
.sfunk--bedarf small{display:block;margin-top:2px;font-size:10.5px;line-height:1.35;color:var(--paper-faint)}
.sfunk:has(input:checked){border-color:var(--amber);color:var(--paper)}
.sfunk.aus{opacity:.42;cursor:not-allowed}
.sfunk.aus i{display:none;position:absolute;bottom:calc(100% + 8px);left:0;width:250px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:10px 12px;
  font-style:normal;font-size:12.5px;line-height:1.5;color:var(--paper);z-index:5}
.sfunk.aus:hover i,.sfunk.aus:focus-within i{display:block}

.stuer__neu select{width:100%;padding:13px 14px;border:1px dashed var(--line);border-radius:3px;
  background:transparent;color:var(--paper-dim);font-size:14.5px;font-family:var(--font)}

/* Gruppen */
.sgruppe{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sgruppe input[type=text]{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:3px;
  background:var(--ink-2);color:var(--paper);font-size:14.5px;font-family:var(--font)}
.sgruppe label{display:flex;align-items:center;gap:8px}
.sgruppe label span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-faint)}
.sgruppe input[type=number]{width:64px;padding:10px;border:1px solid var(--line);border-radius:3px;
  background:var(--ink-2);color:var(--paper);font-size:14.5px;text-align:center;font-family:var(--font)}

/* Schließplan */
.splan{overflow-x:auto;border:1px solid var(--line);border-radius:4px}
.splan table{border-collapse:collapse;width:100%;min-width:420px}
.splan th,.splan td{border-bottom:1px solid var(--line-2);padding:10px 12px;text-align:center}
.splan thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper-faint);background:var(--ink-2);position:sticky;top:0}
.splan tbody th{text-align:left;font-size:14px;font-weight:500;color:var(--paper);white-space:nowrap}
.szelle{width:26px;height:26px;border:1px solid var(--line);border-radius:3px;display:grid;
  place-items:center;transition:.2s}
.szelle i{width:9px;height:9px;background:transparent;border-radius:1px;transition:.2s}
.szelle.on{border-color:var(--amber);background:rgba(245,166,35,.14)}
.szelle.on i{background:var(--amber)}
.szelle:hover{border-color:var(--paper-dim)}

/* Ergebnis */
.sbom{border:1px solid var(--line);border-radius:4px;background:var(--ink-2);padding:20px;margin-bottom:14px}
.sbom__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:6px}
.sbom__kopf span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber)}
.sbom__kopf b{font-size:14px;color:var(--paper)}
.sbom__meta{font-size:13px;color:var(--paper-dim);padding:8px 0 12px;border-bottom:1px solid var(--line-2);
  margin-bottom:8px}
.sbom__z{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line-2);font-size:14px;color:var(--paper-dim);line-height:1.45}
.sbom__z b{color:var(--paper);flex:none}
.sbom__z>span{min-width:0}
.sbom__z small{display:block;margin-top:2px;font-size:11.5px;line-height:1.45;color:var(--paper-faint)}
.sbom__z--sum{color:var(--paper);font-weight:500}
.sbom__leer{font-size:14px;color:var(--paper-faint);padding:14px 0}
.sbom__hinweis{font-size:12.5px;line-height:1.6;color:var(--paper-faint);margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line-2)}

@media(max-width:559px){
  .skalk__vorlagen span{width:100%;margin-bottom:2px}
  .sfunk.aus i{width:min(250px,74vw)}
}

/* Abgeleiteter Anlagentyp und gesperrte Bauformen */
.sableitung{margin-top:14px;padding-left:15px;border-left:2px solid var(--amber);
  font-size:13.5px;line-height:1.65;color:var(--paper-dim);max-width:70ch}
.sableitung:empty{display:none}
.sableitung b{color:var(--paper)}

.skarte.aus{opacity:.4;cursor:not-allowed}
.skarte.aus:hover{background:var(--ink-2)}
.skarte u{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--amber);text-decoration:none}

/* Anfrageformular für Schließanlagen */
.sform{max-width:620px;margin-top:clamp(24px,3vw,38px)}
.sform__zwei{display:grid;gap:0 20px}
@media(min-width:520px){.sform__zwei{grid-template-columns:150px 1fr}}
.sform .btn--gross{width:100%;justify-content:center}


/* ---------- Schließanlagen: Hero-CTA & Messhilfe ---------- */
.subhero__cta{margin-top:30px}
.masshilfe__grid{display:grid;gap:18px}
@media(min-width:900px){.masshilfe__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.masshilfe__card{border:1px solid var(--line);background:var(--panel);padding:18px;border-radius:4px;display:flex;flex-direction:column;gap:14px}
.masshilfe__card h3{font-size:20px;letter-spacing:-.03em}
.masshilfe__card p{font-size:15px;line-height:1.72;color:var(--paper-dim)}
.masshilfe__figure{margin:0;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border-radius:4px;padding:10px}
.masshilfe__figure svg{display:block;width:100%;height:auto}
.mh-door{fill:rgba(250,171,5,.08);stroke:rgba(250,171,5,.9);stroke-width:2}
.mh-edge{fill:rgba(250,171,5,.45)}
.mh-screw{fill:rgba(250,171,5,.92)}
.mh-axis{stroke:rgba(255,255,255,.38);stroke-width:2;stroke-linecap:round}
.mh-cylinder{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.55);stroke-width:2}
.mh-plate{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.45);stroke-width:2}
.mh-plate--soft{fill:rgba(255,255,255,.05)}
.mh-measure{stroke:var(--amber);stroke-width:3;stroke-linecap:round}
.mh-tick{stroke:var(--amber);stroke-width:3;stroke-linecap:round}
.mh-text{fill:var(--paper);font-family:var(--font);font-size:16px;font-weight:600}
.mh-text--small{font-size:13px;font-weight:500;fill:var(--paper-dim)}
.mh-text--big{font-size:28px;font-weight:800;letter-spacing:-.03em}
@media(max-width:699px){
  .subhero__cta .btn{width:100%;justify-content:center}
  .masshilfe__card{padding:15px}
  .mh-text{font-size:14px}
  .mh-text--small{font-size:12px}
  .mh-text--big{font-size:24px}
}

.masshilfe__figure img{display:block;width:100%;height:auto;border-radius:3px}


/* ---------- Startseite: Schließanlagen-Teaser ---------- */
.home-locks{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.home-locks__grid{display:grid;gap:clamp(30px,5vw,72px);align-items:center}
@media(min-width:900px){.home-locks__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.home-locks__copy .eyebrow{margin-bottom:22px}
.home-locks__copy .body{margin-top:24px;max-width:58ch}
.home-locks__cta{margin-top:28px}
.home-locks__visual{display:block;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.10);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.home-locks__visual:hover{transform:translateY(-3px);box-shadow:0 22px 58px rgba(0,0,0,.14)}
.home-locks__visual picture,.home-locks__visual img{display:block;width:100%;height:auto}
@media(max-width:899px){
  .home-locks__grid{gap:28px}
  .home-locks__visual{order:-1}
  .home-locks__cta .btn{width:100%;justify-content:center}
}


/* ============================================================
   FOKUSRAHMEN FÜR EINGABEN

   Die Felder schalten den Browser-Rahmen ab (outline:none) und
   ersetzten ihn durch eine 1 px starke Unterkante in Amber.
   Amber erreicht auf weißem Grund aber nur 2,0:1 — gefordert
   sind 3:1. Für Tastaturnutzer war das die einzige Rückmeldung.

   Diese Regeln stehen bewusst am Dateiende: Sie haben dieselbe
   Spezifität wie die :focus-Regeln weiter oben und müssen daher
   später kommen, um zu greifen.
   ============================================================ */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
.qselect select:focus-visible,
.bom__menge select:focus-visible,
.stuer__name:focus-visible{
  outline:2px solid var(--fokus);
  outline-offset:2px;
  border-radius:3px;
}


/* ============================================================
   STUFE 2 — Blöcke zusammengefasst

   Vorher trugen acht gleichrangige Abschnitte die Startseite.
   Vier davon waren für ihren Inhalt zu groß dimensioniert.
   ============================================================ */

/* Bewertungen als schmaler Vertrauensstreifen statt als eigener
   Abschnitt mit voller Kopfzeile. Er steht direkt vor dem
   Kontaktformular — dort, wo entschieden wird. */
.sec--streifen{padding-top:clamp(40px,4vw,72px);padding-bottom:0}
.streifen__kopf{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;
  margin-bottom:clamp(18px,2vw,26px);
}
.streifen__kopf .eyebrow{flex:none}
.streifen__satz{
  font-size:clamp(15px,1.5vw,18px);color:var(--paper-dim);margin:0;max-width:52ch;line-height:1.5;
}
/* Der Streifen bringt die Bewertungen kompakter unter: Note und
   Aufruf nebeneinander statt untereinander. */
@media(min-width:760px){
  .sec--streifen .rev{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .sec--streifen .quotes.on{grid-template-columns:repeat(2,1fr)}
}
.sec--streifen .rev__score{padding:clamp(18px,2vw,26px)}
.sec--streifen .rev__cta{padding:clamp(18px,2vw,26px);gap:10px}
.sec--streifen .rev__cta h3{font-size:clamp(17px,1.7vw,21px)}
.sec--streifen .rev__cta p{font-size:14.5px;line-height:1.6;max-width:52ch}
.sec--streifen .rev__num{font-size:clamp(26px,2.8vw,36px)}
.sec--streifen .quote{padding:clamp(18px,2vw,26px);gap:13px}
.sec--streifen .quote blockquote{font-size:14.5px;line-height:1.6}

/* Leistungskarten hängen jetzt am Objekt-Abschnitt statt einen
   eigenen zu bilden. Eine ruhige Fuge trennt beide Teile. */
.xlinks--angehaengt{
  margin-top:clamp(26px,3vw,44px);
  padding-top:clamp(24px,2.6vw,36px);
  border-top:1px solid var(--line);
  background:none;border-left:none;border-right:none;border-bottom:none;
}
html[data-theme="hell"] .xlinks--angehaengt{border-top-color:var(--trennlinie)}
.xlinks--angehaengt .xlink{padding:clamp(18px,2vw,26px)}
.xlinks--angehaengt .xlink p{font-size:14px;line-height:1.6}

/* Schließanlagen-Teaser: er soll auf die Unterseite führen,
   nicht selbst erklären. Bild kleiner, Block ruhiger. */
@media(min-width:900px){
  .home-locks__grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center}
}
.home-locks__visual{max-width:520px;margin-left:auto}
@media(max-width:899px){.home-locks__visual{max-width:420px;margin:0 auto}}


/* ============================================================
   KONFIGURATOR IM SCHRITTMODUS (schmale Geräte)

   Eine Frage je Schritt statt aller acht bis zehn untereinander.
   Reine Darstellungsschicht — ohne JavaScript oder auf dem Desktop
   greift nichts davon, dann stehen die Fragen wie bisher als Liste.
   ============================================================ */
.schrittkopf,.schrittfuss{display:none}

.cfg--schritte .schrittkopf{
  display:block;margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.schrittkopf__zeile{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:10px;
}
.schrittkopf__zaehler{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber-ink,var(--amber));font-weight:500;
}
.schrittkopf__stand{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--paper-faint);text-align:right;
}
.schrittkopf__balken{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.schrittkopf__balken i{
  display:block;height:100%;width:0;background:var(--amber);
  transition:width .45s var(--ease);
}

/* Nur der aktive Schritt ist zu sehen. */
.cfg--schritte #cfgQs > .q{display:none}
.cfg--schritte #cfgQs > .q.q--aktiv{display:block}
.cfg--schritte #cfgQs > .q .q__l{outline:none}
@media (prefers-reduced-motion: no-preference){
  .cfg--schritte #cfgQs > .q.q--aktiv{animation:schrittEin .3s var(--ease) both}
}
@keyframes schrittEin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cfg--schritte .schrittfuss{
  display:grid;grid-template-columns:auto 1fr;gap:10px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
.schrittfuss button{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:15px 20px;border-radius:3px;border:1px solid var(--line);
  background:none;color:var(--paper);min-height:50px;
  transition:border-color .25s,background .25s,opacity .25s;
}
.schrittfuss__zurueck:disabled{opacity:.35;cursor:default}
.schrittfuss__zurueck:not(:disabled):hover{border-color:var(--amber);color:var(--amber-ink,var(--amber))}
/* Mit Elementteil geschrieben, damit die Regel die allgemeine
   .schrittfuss button überhaupt überschreibt — sonst bliebe der
   Knopf durchsichtig. */
.schrittfuss button.schrittfuss__weiter{
  background:var(--amber);border-color:var(--amber);color:#000;font-weight:500;
}
.schrittfuss button.schrittfuss__weiter:hover{background:var(--amber-2);border-color:var(--amber-2)}
.schrittfuss button:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}

/* Im Schrittmodus trägt die Kopfzeile die Nummer — die kleine Ziffer
   an der Frage wäre doppelt. */
.cfg--schritte #cfgQs > .q .q__l b{display:none}
.cfg--schritte #cfgQs > .q{border-top:none;padding-top:0}


/* ============================================================
   ZITATREIHE — seitlich wischbar und durchklickbar

   Vier Bewertungen untereinander waren auf dem Handy 1.645 px hoch.
   Als seitliche Reihe belegen sie die Höhe einer Karte. Auf Touch
   wird gewischt, mit Maus über die Pfeile geblättert — beides
   bewegt dieselbe Scroll-Reihe, es gibt nur einen Mechanismus.
   ============================================================ */
.zitatreihe{position:relative;margin-top:-1px}

/* Aus dem Raster wird eine Reihe. Die Karten schnappen ein, damit
   nie eine halbe Bewertung stehen bleibt. */
.zitatreihe .quotes.on{
  display:grid;
  /* Die zuvor gesetzten festen Spalten müssen weg: zusammen mit
     grid-auto-flow:column entstünden sonst zwei explizite Spalten
     plus implizite dahinter — die Karten würden gestaucht. */
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--sichtbar) - 1) * 1px) / var(--sichtbar));
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  --sichtbar:1.12;                 /* Handy: die nächste Karte lugt hervor */
}
.zitatreihe .quotes.on::-webkit-scrollbar{display:none}
.zitatreihe .quote{scroll-snap-align:start}
@media(min-width:760px){ .zitatreihe .quotes.on{--sichtbar:2} }
@media(min-width:1100px){ .zitatreihe .quotes.on{--sichtbar:2} }

/* Die Reihe ist über die Tastatur erreichbar — ein Scrollbereich
   ohne Fokus wäre für Tastaturnutzer eine Sackgasse. */
.zitatreihe .quotes.on:focus-visible{outline:2px solid var(--fokus,var(--amber));outline-offset:2px}

/* In der Reihe sind alle Karten gleich hoch. Beim Aufklappen der
   langen Bewertung wächst die Reihe mit — das ist gewollt und
   bleibt nachvollziehbar. */
.zitatreihe .quote{height:100%}

/* ---------- Steuerung ---------- */
.zitatreihe__steuer{
  display:none;align-items:center;justify-content:center;gap:14px;
  margin-top:14px;
}
.zitatreihe.ist-aktiv .zitatreihe__steuer{display:flex}

.zitatreihe__pfeil{
  width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:none;color:var(--paper);
  transition:border-color .25s,color .25s,opacity .25s;
}
.zitatreihe__pfeil svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.zitatreihe__pfeil:not(:disabled):hover{border-color:var(--amber);color:var(--amber-ink,var(--amber))}
.zitatreihe__pfeil:disabled{opacity:.3;cursor:default}
.zitatreihe__pfeil:focus-visible{outline:2px solid var(--fokus,var(--amber));outline-offset:2px}

/* Auf Touch führt das Wischen — Pfeile wären dort nur im Weg.
   Die Punkte bleiben als Standortanzeige stehen. */
@media (hover:none),(pointer:coarse){
  .zitatreihe__pfeil{display:none}
}

.zitatreihe__punkte{display:flex;align-items:center;gap:7px}
.zitatreihe__punkt{
  width:7px;height:7px;padding:0;border-radius:50%;border:none;
  background:var(--line);transition:background .25s,transform .25s;
}
.zitatreihe__punkt.ist-an{background:var(--amber);transform:scale(1.35)}
.zitatreihe__punkt:focus-visible{outline:2px solid var(--fokus,var(--amber));outline-offset:3px}
/* Tippfläche vergrößern, ohne den Punkt optisch aufzublasen */
.zitatreihe__punkt{position:relative}
.zitatreihe__punkt::after{content:"";position:absolute;inset:-12px}

@media (prefers-reduced-motion: reduce){
  .zitatreihe .quotes.on{scroll-behavior:auto}
  .zitatreihe__punkt.ist-an{transform:none}
}

/* Datenschutz- und Newsletter-Checkboxen im Kontaktformular */
.consent{margin:14px 0 4px}
.consent__row{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5;cursor:pointer}
.consent__row input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;accent-color:#f5a623}
.consent__row a{text-decoration:underline}
.consent__row em{color:#f5a623;font-style:normal;margin-left:2px}