:root{--bg:#fff;--surface:#f3f3f1;--surface2:#e9e9e5;--text:#0b0c0c;--muted:#666864;--line:#d8d9d5;--dark:#0c0d0d;--accent:#d6ea36;--accent2:#edf59c;--max:1240px;--radius:0;--shadow:0 20px 60px rgba(0,0,0,.08)}
html[data-theme="dark"]{--bg:#121313;--surface:#1c1d1d;--surface2:#262727;--text:#f5f5f1;--muted:#aaaca7;--line:#343636;--dark:#070808;--accent:#d8ed39;--accent2:#77821f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.62 Arial,Helvetica,sans-serif;letter-spacing:-.006em}a{color:inherit}button{font:inherit}.shell{width:min(calc(100% - 40px),var(--max));margin:auto}.narrow{max-width:900px}.skip{position:fixed;top:-80px;left:12px;z-index:100;background:var(--accent);color:#111;padding:10px 14px;font-weight:700}.skip:focus{top:12px}:focus-visible{outline:3px solid #7aa500;outline-offset:3px}.site-header{position:sticky;top:0;z-index:50;background:var(--dark);color:white;border-bottom:1px solid #292b2b}.header-row{height:72px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--accent);color:#111;font-weight:900}.brand strong,.brand small{display:block}.brand strong{font-size:.92rem}.brand small{font-size:.68rem;color:#9fa19d;margin-top:1px}.nav{margin-left:auto;display:flex;gap:3px}.nav a{color:#c4c6c2;text-decoration:none;padding:9px 10px;font-size:.82rem;font-weight:700}.nav a:hover{background:#242626;color:#fff}.theme{width:38px;height:38px;border:1px solid #3f4141;background:#151616;display:grid;place-items:center;cursor:pointer}.theme span{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.kicker{margin:0 0 14px;text-transform:uppercase;letter-spacing:.16em;font-size:.67rem;font-weight:800;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(3rem,7vw,6.8rem);line-height:.93;letter-spacing:-.07em;font-weight:600;margin-bottom:28px}h2{font-size:clamp(2rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.055em;font-weight:600}h3{font-size:1.2rem;line-height:1.2}.hero{border-bottom:1px solid var(--line)}.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;min-height:650px}.hero-copy{padding:90px 7vw 90px 0;align-self:center}.hero-lead{max-width:760px;color:var(--muted);font-size:1.18rem}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 18px;text-decoration:none;font-weight:800;border:1px solid var(--text)}.btn--dark{background:var(--text);color:var(--bg)}.btn--accent{background:var(--accent);color:#111;border-color:var(--accent)}.text-link{font-weight:800;text-underline-offset:4px}.hero-visual{background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px}.hero-caption{width:100%;max-width:310px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:.77rem}.hero-caption span{color:var(--muted)}
.section{padding:104px 0}.section--dark,.demo-section{background:var(--dark);color:#fff}.section--soft{background:var(--surface)}.section-head{max-width:850px;margin-bottom:48px}.section-head>p:last-child{color:var(--muted);max-width:720px}.section-head--light .kicker{color:var(--accent)}.section-head--light>p:last-child{color:#a8aaa6}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.benefit-grid article{background:var(--bg);padding:28px}.benefit-grid article>span{font-size:.7rem;color:var(--muted);font-weight:800}.benefit-grid h3{margin:28px 0 12px}.benefit-grid p{color:var(--muted)}.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:center}.flow>div{border-top:1px solid #3a3c3c;padding:25px 0}.flow>div span{color:var(--accent);font-weight:800}.flow>div strong{display:block;font-size:1.5rem;margin:8px 0}.flow>div p{color:#a4a6a2}.flow>b{color:var(--accent);font-size:1.5rem}.split-section{display:grid;grid-template-columns:1fr 1fr;gap:80px}.prose{font-size:1.05rem;color:var(--muted)}.prose strong{color:var(--text)}.prose .btn{margin-top:18px}
.page-intro{padding:90px 0 64px;border-bottom:1px solid var(--line)}.page-intro h1{font-size:clamp(3rem,6vw,5.8rem)}.page-intro p:last-child{max-width:720px;color:var(--muted);font-size:1.1rem}.finder-section{padding:70px 0 110px;background:var(--surface)}.finder{background:var(--bg);border:1px solid var(--line)}.finder-progress{height:6px;background:var(--surface2)}.finder-progress span{display:block;height:100%;width:25%;background:var(--accent);transition:width .2s}.finder-trail{min-height:58px;border-bottom:1px solid var(--line);padding:13px 22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.trail-chip{border:1px solid var(--line);padding:5px 8px;font-size:.7rem;color:var(--muted)}.finder-stage{min-height:440px;padding:48px 30px;display:grid;align-items:center}.finder-question{max-width:720px;margin:auto;width:100%;text-align:center}.finder-question h2{font-size:clamp(2rem,4vw,3.6rem)}.finder-question>p{color:var(--muted);max-width:620px;margin:0 auto 30px}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.option{border:0;background:var(--bg);color:var(--text);padding:20px;text-align:left;cursor:pointer;min-height:110px;display:flex;gap:16px;align-items:flex-start}.option:hover{background:color-mix(in srgb,var(--accent) 15%,var(--bg))}.option-icon{width:40px;height:40px;flex:0 0 40px;border:1px solid var(--text);display:grid;place-items:center;font-weight:800}.option strong,.option small{display:block}.option small{color:var(--muted);margin-top:4px;line-height:1.4}.finder-footer{border-top:1px solid var(--line);min-height:58px;display:flex;justify-content:space-between;align-items:center;padding:12px 22px}.back-link{border:0;background:none;color:var(--muted);cursor:pointer;text-decoration:none;font-weight:700;padding:5px 0}.result-grid{display:grid;grid-template-columns:280px 1fr;gap:42px;align-items:center;max-width:760px;margin:auto}.result-visual{aspect-ratio:1;background:var(--surface);display:grid;place-items:center}.result-copy h2{font-size:2.5rem}.result-copy p{color:var(--muted)}.result-copy .btn{margin-top:15px}.result-state{display:inline-block;background:var(--accent);color:#111;padding:5px 8px;font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.combo-hero{border-bottom:1px solid var(--line)}.combo-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;min-height:600px}.combo-copy{padding:72px 70px 72px 0;align-self:center}.combo-copy h1{font-size:clamp(2.8rem,5.8vw,5.7rem)}.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:28px}.tag-row span{border:1px solid var(--line);padding:6px 9px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.combo-visual-card{background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px}.combo-visual-card small{color:var(--muted);margin-top:20px;text-align:center}.combo-layout{display:grid;grid-template-columns:1fr 340px;gap:70px;align-items:start}.content-block{padding-bottom:54px;margin-bottom:54px;border-bottom:1px solid var(--line)}.check-list{list-style:none;padding:0;margin:28px 0 0}.check-list li{padding:13px 0 13px 28px;border-top:1px solid var(--line);position:relative}.check-list li::before{content:'✓';position:absolute;left:0;font-weight:900}.parts{border-top:2px solid var(--text)}.parts article{display:grid;grid-template-columns:120px 1fr auto;gap:24px;padding:19px 0;border-bottom:1px solid var(--line);align-items:center}.parts span{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase}.parts strong{font-size:1.05rem}.parts h3{margin:0 0 4px}.parts p{color:var(--muted);margin:0;font-size:.82rem}.parts a{font-weight:800;font-size:.78rem}.note{background:var(--surface);border-left:5px solid var(--accent);padding:20px 22px}.note p{color:var(--muted);margin:6px 0 0}.fact-card{position:sticky;top:98px;background:var(--dark);color:#fff;padding:28px}.fact-card .kicker{color:#a5a7a3}.fact-card dl{margin:0}.fact-card dl div{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;padding:13px 0;border-top:1px solid #343636}.fact-card dt{color:#a5a7a3}.fact-card dd{margin:0;font-weight:700}.demo-section{padding:100px 0}.logic-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:#343636;border:1px solid #343636;margin-bottom:42px}.logic-tab{border:0;background:#171818;color:#fff;text-align:left;padding:18px;cursor:pointer}.logic-tab strong,.logic-tab span{display:block}.logic-tab span{color:#a1a39f;font-size:.78rem;margin-top:4px}.logic-tab.is-active{background:#252916;box-shadow:inset 0 0 0 1px var(--accent)}.logic-tab.is-active strong{color:var(--accent)}.demo{display:grid;grid-template-columns:420px 1fr;gap:60px;align-items:center}.demo-switch>p{text-align:center;color:#a1a39f;font-size:.78rem;margin:14px 0 0}.interactive-visual{position:relative;aspect-ratio:1;background:#ededeb}.hit-layer{position:absolute;inset:0}.hit{position:absolute;border:0;background:transparent;cursor:pointer;color:transparent}.hit::after{content:'';position:absolute;inset:5px;border:1px solid transparent}.hit:hover::after,.hit:focus-visible::after{border-color:var(--accent);background:rgba(214,234,54,.08)}.hit span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#111;color:#fff;padding:4px 7px;font-size:.65rem;font-weight:800;opacity:0}.hit:hover span,.hit:focus-visible span{opacity:1}.hit--top{left:16%;right:16%;top:16%;height:34%}.hit--bottom{left:16%;right:16%;bottom:16%;height:34%}.hit--tl{left:16%;top:16%;width:34%;height:34%}.hit--tr{right:16%;top:16%;width:34%;height:34%}.hit--bl{left:16%;bottom:16%;width:34%;height:34%}.hit--br{right:16%;bottom:16%;width:34%;height:34%}.demo-outputs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#343636;border:1px solid #343636}.output{background:#171818;padding:18px;display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:center}.output.is-on,.output[data-state="up"],.output[data-state="down"]{background:#232617}.output-icon{width:52px;height:52px;background:#252727;display:grid;place-items:center}.output strong,.output small{display:block}.output small{color:#a1a39f}.output.is-on small,.output[data-state="up"] small,.output[data-state="down"] small{color:var(--accent);font-weight:800}.ico-light{width:20px;height:20px;border:2px solid #9fa19d;border-radius:50%}.is-on .ico-light{background:#fff38a;border-color:#fff38a;box-shadow:0 0 20px rgba(255,243,138,.65)}.ico-indicator{width:13px;height:13px;border-radius:50%;background:#70726f}.is-on .ico-indicator{background:#fff38a;box-shadow:0 0 13px #fff38a}.ico-blind{width:26px;height:30px;border:2px solid #9fa19d;position:relative}.ico-blind::before,.ico-blind::after{content:'';position:absolute;left:4px;right:4px;border-top:1px solid #9fa19d}.ico-blind::before{top:9px}.ico-blind::after{top:17px}.ico-spots{display:flex;gap:4px}.ico-spots i{width:8px;height:8px;border:2px solid #9fa19d;border-radius:50%}.is-on .ico-spots i{background:#fff38a;border-color:#fff38a}.ico-socket{width:25px;height:30px;border:2px solid #9fa19d}
.switch-visual{width:min(100%,330px);aspect-ratio:1;display:grid;place-items:center}.switch-frame{width:76%;height:76%;padding:10%;background:linear-gradient(145deg,#f9f9f7,#deded9);box-shadow:0 16px 34px rgba(0,0,0,.11),inset 0 0 0 1px rgba(0,0,0,.08);display:flex;gap:3px}.rocker{position:relative;background:linear-gradient(145deg,#fff,#e9e9e4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.055),0 2px 6px rgba(0,0,0,.08)}.rocker--single{width:100%;height:100%}.rocker--half{flex:1;height:100%}.seam{position:absolute;background:rgba(0,0,0,.07)}.seam--horizontal{left:8%;right:8%;height:1px;top:50%}.rocker-arrow{position:absolute;left:50%;transform:translateX(-50%);font-size:1.1rem;color:#555}.rocker-arrow--up{top:19%}.rocker-arrow--down{bottom:19%}.status-window{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);width:20%;height:6%;background:#d9d5bd;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.switch-visual--hero{width:min(100%,360px)}.switch-visual--product{width:min(100%,400px)}.switch-visual--interactive{position:absolute;inset:0;margin:auto;width:100%;height:100%}.interactive-visual .switch-frame{width:76%;height:76%}html[data-theme="dark"] .switch-frame{background:linear-gradient(145deg,#3d3f3d,#292b29)}html[data-theme="dark"] .rocker{background:linear-gradient(145deg,#555754,#373936)}html[data-theme="dark"] .rocker-arrow{color:#ddd}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.knowledge-grid article{background:var(--bg);padding:30px}.knowledge-grid article>span{font-size:.7rem;font-weight:900;color:var(--muted);letter-spacing:.12em}.knowledge-grid h2{font-size:1.6rem;margin:24px 0 12px}.knowledge-grid p{color:var(--muted)}.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{padding:22px 42px 22px 0;font-weight:800;cursor:pointer;list-style:none;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';position:absolute;right:5px;font-size:1.4rem}.faq details[open] summary::after{content:'–'}.faq details p{color:var(--muted);padding:0 0 24px;margin:0}.not-found{min-height:65vh;display:grid;align-items:center;padding:80px 0}.not-found h1{font-size:clamp(3rem,6vw,6rem)}.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:38px 0}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;font-size:.78rem;color:var(--muted)}.footer-grid strong{color:var(--text)}.footer-grid p{margin:4px 0 0}
@media(max-width:900px){.hero-grid,.combo-hero-grid,.split-section,.combo-layout,.demo{grid-template-columns:1fr}.hero-visual,.combo-visual-card{min-height:420px}.hero-copy,.combo-copy{padding:64px 0}.benefit-grid,.knowledge-grid{grid-template-columns:repeat(2,1fr)}.combo-layout{gap:30px}.fact-card{position:static}.demo{gap:35px}.demo-switch{max-width:420px;margin:auto;width:100%}.flow{grid-template-columns:1fr}.flow>b{transform:rotate(90deg);justify-self:center}.nav{order:3;width:100%;overflow:auto}.header-row{height:auto;min-height:70px;flex-wrap:wrap;padding:10px 0}.theme{margin-left:auto}.result-grid{grid-template-columns:220px 1fr}}
@media(max-width:620px){.shell{width:min(calc(100% - 28px),var(--max))}h1{font-size:clamp(2.8rem,14vw,4.6rem)}.section{padding:76px 0}.benefit-grid,.knowledge-grid,.option-grid,.demo-outputs{grid-template-columns:1fr}.hero-visual,.combo-visual-card{min-height:350px;padding:26px}.finder-stage{padding:36px 14px}.result-grid{grid-template-columns:1fr}.result-visual{max-width:260px;margin:auto;width:100%}.parts article{grid-template-columns:1fr;gap:6px}.footer-grid{grid-template-columns:1fr;gap:25px}.nav a{font-size:.75rem}.brand small{display:none}.demo-section{padding:76px 0}.logic-tabs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* Tasterplan refinements */
.result-profile{
  display:inline-block;
  margin-left:8px;
  padding:5px 8px;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.65rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.product-view-grid{
  width:100%;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.product-view{
  margin:0;
  min-width:0;
  min-height:310px;
  padding:18px;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.product-view figcaption{
  align-self:flex-start;
  margin-bottom:auto;
  color:var(--muted);
  font-size:.67rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.product-view .switch-visual{margin:auto}
.product-view--side{background:var(--surface)}
.side-visual{
  position:relative;
  width:min(100%,170px);
  height:250px;
  margin:auto;
}
.side-wall{
  position:absolute;
  left:18%;
  top:8%;
  bottom:8%;
  width:8px;
  background:var(--text);
  opacity:.14;
}
.side-box{
  position:absolute;
  left:22%;
  top:27%;
  width:34%;
  height:46%;
  border:1px solid var(--line);
  background:var(--surface2);
}
.side-box span{
  position:absolute;
  left:25%;
  right:25%;
  top:50%;
  border-top:1px solid var(--muted);
  opacity:.35;
}
.side-frame-profile{
  position:absolute;
  left:49%;
  top:20%;
  width:15%;
  height:60%;
  background:linear-gradient(90deg,#d6d6d1,#f3f3ef);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.side-rocker-profile{
  position:absolute;
  left:62%;
  top:26%;
  width:16%;
  height:48%;
  background:linear-gradient(90deg,#f0f0ec,#fff);
  border:1px solid rgba(0,0,0,.07);
  transform-origin:center left;
}
.side-visual--straight .side-rocker-profile{
  width:12%;
  transform:rotate(0deg);
}
.side-visual--classic .side-rocker-profile{
  width:17%;
  clip-path:polygon(0 4%,100% 0,88% 100%,0 96%);
  transform:rotate(-1.8deg);
}
html[data-theme="dark"] .side-frame-profile{
  background:linear-gradient(90deg,#303230,#494b48)
}
html[data-theme="dark"] .side-rocker-profile{
  background:linear-gradient(90deg,#3b3d3a,#5a5c58)
}

.mirror-row{
  margin:-20px 0 36px;
  padding:15px 17px;
  border:1px solid #343636;
  background:#171818;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.mirror-row[hidden]{display:none!important}
.mirror-row strong,.mirror-row span{display:block}
.mirror-row>div>span{
  margin-top:3px;
  color:#a1a39f;
  font-size:.76rem;
}
.mirror-toggle{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:#a1a39f;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-weight:800;
}
.mirror-toggle__track{
  position:relative;
  width:46px;
  height:24px;
  border:1px solid #5b5d59;
  background:#292b2a;
}
.mirror-toggle__track i{
  position:absolute;
  left:3px;
  top:3px;
  width:16px;
  height:16px;
  background:#9b9d99;
  transition:transform .16s ease,background .16s ease;
}
.mirror-toggle.is-active{color:var(--accent)}
.mirror-toggle.is-active .mirror-toggle__track{
  border-color:var(--accent);
  background:#252916;
}
.mirror-toggle.is-active .mirror-toggle__track i{
  transform:translateX(22px);
  background:var(--accent);
}

@media(max-width:900px){
  .product-view-grid{grid-template-columns:1fr 220px}
}
@media(max-width:620px){
  .product-view-grid{grid-template-columns:1fr}
  .product-view{min-height:270px}
  .product-view--side{min-height:230px}
  .side-visual{height:190px}
  .mirror-row{align-items:flex-start;flex-direction:column}
}


/* Side view v2: only frame + rocker profile */
.side-visual{
  position:relative;
  width:170px;
  height:220px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.side-visual .side-wall,.side-visual .side-box{display:none!important}
.side-frame-profile{
  position:absolute;
  left:52px;
  top:34px;
  width:22px;
  height:152px;
  background:linear-gradient(90deg,#d5d5d0 0 35%,#f3f3ef 36% 100%);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.side-rocker-profile{
  position:absolute;
  left:73px;
  top:49px;
  width:34px;
  height:122px;
  background:linear-gradient(90deg,#ecece7,#fff);
  border:1px solid rgba(0,0,0,.08);
  transform-origin:center left;
  box-shadow:5px 8px 14px rgba(0,0,0,.07);
}
.side-visual--straight .side-rocker-profile{
  transform:rotate(0deg);
}
.side-visual--classic .side-rocker-profile{
  transform:rotate(-4.5deg);
}
.side-visual::after{
  content:attr(data-label);
}
html[data-theme="dark"] .side-frame-profile{background:linear-gradient(90deg,#343634,#555753)}
html[data-theme="dark"] .side-rocker-profile{background:linear-gradient(90deg,#414340,#62645f)}

/* Self-drawn symbol rockers */
.rocker-symbol{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#555854;
  font-weight:600;
  line-height:1;
}
.rocker-symbol--light{
  width:20px;height:20px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:0;
  top:46%;
}
.rocker-symbol--light::before{
  content:"";
  position:absolute;
  left:5px;right:5px;bottom:-7px;
  height:5px;
  border-top:2px solid currentColor;
  border-bottom:2px solid currentColor;
}
.rocker-symbol--light::after{
  content:"";
  position:absolute;
  left:8px;bottom:-11px;
  width:4px;height:3px;
  background:currentColor;
}
.rocker-symbol--bell{
  width:22px;height:16px;
  border:2px solid currentColor;
  border-radius:12px 12px 5px 5px;
  font-size:0;
  top:47%;
}
.bell-stem{
  position:absolute;left:50%;top:58%;
  width:13px;height:2px;background:#555854;
  transform:translateX(-50%);
}
.bell-stem::after{
  content:"";position:absolute;left:5px;top:3px;width:3px;height:3px;border-radius:50%;background:#555854
}
.rocker-symbol--door{
  width:18px;height:28px;border:2px solid currentColor;font-size:0
}
.door-dot{
  position:absolute;left:55%;top:50%;width:3px;height:3px;border-radius:50%;background:#555854
}
.rocker-label-field{
  position:absolute;left:17%;right:17%;bottom:12%;
  height:15px;border:1px solid rgba(0,0,0,.22);
  display:grid;place-items:center;
  font-size:.42rem;letter-spacing:.08em;color:#777
}
.switch-visual--single-light-status .status-window,
.switch-visual--single-status .status-window{z-index:2}

.audit-table{border-top:1px solid var(--line)}
.audit-row{
  display:grid;
  grid-template-columns:180px 160px minmax(0,1fr) 80px;
  gap:20px;
  align-items:start;
  padding:19px 0;
  border-bottom:1px solid var(--line);
}
.audit-row>div:first-child strong,.audit-row>div:first-child span{display:block}
.audit-row>div:first-child span{margin-top:4px;color:var(--muted);font-size:.78rem}
.audit-row p{margin:5px 0 0;color:var(--muted);font-size:.83rem;line-height:1.55}
.audit-row a{font-weight:800;font-size:.75rem}
.audit-status{
  display:inline-block;padding:5px 7px;border:1px solid var(--line);
  font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em
}
.audit-status--yes{background:var(--accent);color:#0d0e0e;border-color:var(--accent)}
.audit-status--maybe{background:var(--surface2)}
.audit-status--no{opacity:.65}
@media(max-width:760px){
  .audit-row{grid-template-columns:1fr;gap:9px}
  .audit-row a{justify-self:start}
}


/* ---------- V3 customer journey & landing ---------- */
.home-hero{padding:54px 0 0;background:var(--bg)}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:54px;align-items:stretch}
.home-hero-copy{padding:56px 0 70px;display:flex;flex-direction:column;justify-content:center}
.home-hero-copy h1{margin:10px 0 20px;max-width:760px;font-size:clamp(3.3rem,6.6vw,6.6rem);line-height:.91;letter-spacing:-.065em}
.home-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px}
.home-proof span{padding:7px 10px;border:1px solid var(--line);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.home-photo{margin:0;position:relative;overflow:hidden;background:var(--surface2)}
.home-photo img{width:100%;height:100%;object-fit:cover;display:block}
.home-photo--hero{min-height:610px}
.home-photo figcaption{position:absolute;left:18px;right:18px;bottom:18px;padding:12px 14px;background:rgba(13,14,14,.84);color:#fff;font-size:.76rem;backdrop-filter:blur(8px)}
.home-benefits .section-head{max-width:780px}
.benefit-grid--icons article{min-height:255px}
.benefit-icon{display:grid!important;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--text);color:var(--bg)!important;font-size:.68rem!important}
.section--photo{padding-top:0}
.editorial-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:56px;align-items:center}
.editorial-grid--reverse{grid-template-columns:minmax(320px,.72fr) minmax(300px,.48fr)}
.editorial-photo{margin:0;min-height:390px;overflow:hidden;background:var(--surface2)}
.editorial-photo img{width:100%;height:100%;min-height:390px;object-fit:cover;display:block}
.editorial-photo--small{min-height:320px}
.editorial-photo--small img{min-height:320px}
.editorial-copy h2{font-size:clamp(2rem,4vw,4.3rem);line-height:.98;letter-spacing:-.045em;margin:10px 0 23px}
.editorial-copy p{font-size:1rem;line-height:1.75;color:var(--muted)}
.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#303232;border:1px solid #303232}
.journey-grid article{background:#111212;padding:28px 24px;min-height:230px}
.journey-grid article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#111;font-weight:900;font-size:.74rem}
.journey-grid h3{margin:38px 0 9px;color:#fff;font-size:1.1rem}
.journey-grid p{margin:0;color:#a8aaa7;font-size:.86rem;line-height:1.6}
.center-action{text-align:center;margin-top:34px}
.usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.usecase-grid article{padding:22px;background:var(--surface);border:1px solid var(--line)}
.usecase-grid .switch-visual{height:220px;margin-bottom:22px}
.usecase-grid h3{margin:0 0 8px;font-size:1.05rem}
.usecase-grid p{margin:0;color:var(--muted);line-height:1.55;font-size:.84rem}
.final-cta{text-align:center;padding-block:110px}
.final-cta h2{font-size:clamp(2.5rem,5vw,5.7rem);line-height:.96;letter-spacing:-.055em;margin:10px 0 20px}
.final-cta p{max-width:680px;margin:0 auto 28px;color:var(--muted);line-height:1.7}

/* Original-product-informed symbol placement: all symbols bottom right. */
.gira-symbol{
  position:absolute;
  right:9.5%;
  bottom:9%;
  width:28px;
  height:28px;
  fill:none;
  stroke:#4e504d;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.gira-symbol--key{width:31px;height:22px;right:8.5%;bottom:10.5%}
.gira-symbol--socket{width:31px;height:26px;right:8.5%;bottom:8.5%}
.status-window{
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  transform:translate(-50%,-50%);
  background:#a7a9a4;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:none;
}
.rocker-label-field{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:18%;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.16);
  background:rgba(255,255,255,.42);
}
.rocker-label-field i{
  position:absolute;
  left:6%;
  right:6%;
  top:18%;
  bottom:18%;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
}
.arrow-symbol{position:absolute;left:50%;transform:translateX(-50%);width:20px;height:12px}
.arrow-symbol svg{width:100%;height:100%;fill:none;stroke:#555754;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.arrow-symbol--up{top:13%}
.arrow-symbol--down{bottom:13%}
.touch-divider{position:absolute;left:10%;right:10%;top:50%;border-top:1px solid rgba(0,0,0,.05)}

/* Side view: frame and rocker only. */
.side-visual{
  position:relative!important;
  width:155px!important;
  height:210px!important;
}
.side-frame-profile{
  left:40px!important;
  top:27px!important;
  width:28px!important;
  height:156px!important;
  border-radius:1px;
}
.side-rocker-profile{
  left:67px!important;
  top:42px!important;
  width:38px!important;
  height:126px!important;
  clip-path:none!important;
  border-radius:1px;
}
.side-visual--straight .side-rocker-profile{transform:rotate(0deg)!important}
.side-visual--classic .side-rocker-profile{transform:rotate(-5.3deg)!important}

/* Colour catalogue on combination pages */
.colour-intro{max-width:700px;color:var(--muted);line-height:1.65;margin:-8px 0 24px}
.colour-part-title{margin:26px 0 12px;font-size:.92rem}
.colour-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.colour-chip{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);background:var(--surface)}
.colour-chip>i{width:28px;height:28px;flex:0 0 auto;background:var(--swatch);border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.colour-chip span,.colour-chip strong,.colour-chip small{display:block}
.colour-chip strong{font-size:.75rem}
.colour-chip small{margin-top:2px;color:var(--muted);font-size:.66rem}

/* Finder refinements */
.option small{line-height:1.45}
.result-copy p{max-width:540px}
.finder-question>p:not(.kicker){max-width:680px}

/* dark symbol contrast */
html[data-theme="dark"] .gira-symbol,html[data-theme="dark"] .arrow-symbol svg{stroke:#c8c9c4}
html[data-theme="dark"] .rocker-label-field{background:rgba(255,255,255,.05)}

@media(max-width:980px){
  .home-hero-grid,.editorial-grid,.editorial-grid--reverse{grid-template-columns:1fr}
  .home-photo--hero{min-height:460px}
  .journey-grid,.usecase-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .home-hero{padding-top:18px}
  .home-hero-copy{padding:38px 0 42px}
  .home-hero-copy h1{font-size:clamp(3rem,15vw,4.8rem)}
  .home-photo--hero{min-height:390px}
  .journey-grid,.usecase-grid,.colour-grid{grid-template-columns:1fr}
  .editorial-grid{gap:28px}
}


/* v4: rendering fidelity and editorial polish */
.arrow-symbol{
  width:26px!important;
  height:32px!important;
}
.arrow-symbol svg{
  stroke-width:1.05!important;
}
.arrow-symbol--up{top:8.5%!important}
.arrow-symbol--down{bottom:8.5%!important}

.gira-symbol{
  right:8.8%!important;
  bottom:7.9%!important;
  width:25px!important;
  height:25px!important;
  stroke-width:1.15!important;
}
.gira-symbol--key{
  width:29px!important;
  height:20px!important;
  right:7.7%!important;
  bottom:9.4%!important;
}
.status-window{
  width:8px!important;
  height:8px!important;
  background:#b8bab6!important;
}
.rocker-label-field{
  top:0!important;
  height:17%!important;
  background:#f6f6f2!important;
  border-bottom:1px solid rgba(0,0,0,.12)!important;
}
.rocker-label-field i{
  left:5%!important;right:5%!important;top:20%!important;bottom:20%!important;
  background:#fff!important;
}
.symbol-story{overflow:hidden}
.symbol-story-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(440px,1.2fr);gap:70px;align-items:center}
.symbol-story-grid>div:first-child h2{font-size:clamp(2.3rem,4.2vw,4.8rem);line-height:.97;letter-spacing:-.05em;margin:10px 0 24px}
.symbol-story-grid>div:first-child p{color:var(--muted);line-height:1.75}
.symbol-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.symbol-showcase>div{padding:18px;background:var(--surface);border:1px solid var(--line);text-align:center}
.symbol-showcase .switch-visual{height:250px}
.symbol-showcase>div>span{display:block;margin-top:10px;font-size:.78rem;font-weight:800}
.card-link{display:inline-block;margin-top:15px;font-size:.74rem;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor}
.system-section .split-section{align-items:start}

@media(max-width:980px){
  .symbol-story-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .symbol-showcase{grid-template-columns:1fr}
  .symbol-showcase .switch-visual{height:210px}
}


/* v5: dimming simulation */
.output.is-dim .ico-light{
  border-color:#fff38a;
  background:rgb(255 243 138 / var(--level,0));
  box-shadow:0 0 24px rgb(255 243 138 / calc(var(--level,0) * .65));
  transition:background .08s linear,box-shadow .08s linear,transform .08s linear;
  transform:scale(calc(.88 + var(--level,0) * .16));
}
.output.is-dim[data-level="0"] .ico-light{
  border-color:#9fa19d;
  background:transparent;
  box-shadow:none;
  transform:scale(.88);
}
.output.is-dim small{color:var(--accent);font-weight:800}
.output.is-dim[data-level="0"] small{color:#a1a39f;font-weight:400}
.dim-meter{
  width:min(220px,100%);
  height:4px;
  margin-top:10px;
  background:#343636;
  overflow:hidden;
}
.dim-meter i{
  display:block;
  width:calc(var(--level,0) * 100%);
  height:100%;
  background:var(--accent);
  transition:width .08s linear;
}
.hit.is-holding::after{
  border-color:var(--accent);
  background:rgba(214,234,54,.13);
}
.hit.is-holding span{
  opacity:1;
  color:#111;
  background:var(--accent);
}


/* v6: planning-tool landing and schematic side profile */
.tool-hero{padding:clamp(78px,10vw,145px) 0 clamp(70px,9vw,125px);border-bottom:1px solid var(--line);background:var(--bg)}
.tool-hero h1{max-width:900px;margin:12px 0 24px;font-size:clamp(3.4rem,7.7vw,7.5rem);line-height:.91;letter-spacing:-.065em}
.tool-hero .hero-lead{max-width:820px}
.quick-value .section-head{max-width:840px}
.decision-section{border-top:1px solid var(--line)}
.result-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);background:var(--line)}
.result-benefits article{padding:26px 22px;background:var(--surface);min-height:170px}
.result-benefits strong{display:block;font-size:.92rem}
.result-benefits p{margin:10px 0 0;color:var(--muted);font-size:.82rem;line-height:1.6}

.side-visual{display:none!important}

@media(max-width:900px){.result-benefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tool-hero{padding:68px 0 70px}.tool-hero h1{font-size:clamp(3rem,15vw,5rem)}.result-benefits{grid-template-columns:1fr}}


/* v7 physical consistency */
.hit--left{left:16%;top:16%;bottom:16%;width:34%}
.hit--right{right:16%;top:16%;bottom:16%;width:34%}
.arrow-symbol--single{
  top:50%!important;
  bottom:auto!important;
  width:27px!important;
  height:34px!important;
  transform:translate(-50%,-50%)!important;
}


/* v8: consistent momentary actions and short/long dimming */
.ico-bell,.ico-door{
  position:relative;
  display:block;
  width:30px;
  height:30px;
}
.ico-bell::before{
  content:"";
  position:absolute;
  left:7px;right:7px;top:6px;height:15px;
  border:2px solid currentColor;
  border-radius:12px 12px 5px 5px;
}
.ico-bell::after{
  content:"";
  position:absolute;
  left:13px;bottom:4px;width:4px;height:4px;
  border-radius:50%;
  background:currentColor;
}
.ico-door::before{
  content:"";
  position:absolute;
  left:8px;top:3px;width:15px;height:23px;
  border:2px solid currentColor;
}
.ico-door::after{
  content:"";
  position:absolute;
  right:9px;top:14px;width:3px;height:3px;
  border-radius:50%;
  background:currentColor;
}
.output[data-kind="bell"].is-on .output-icon,
.output[data-kind="door"].is-on .output-icon{
  color:var(--accent);
}
.output[data-kind="bell"].is-on small,
.output[data-kind="door"].is-on small{
  color:var(--accent);
  font-weight:800;
}


/* v11: site architecture, legal pages and footer */
.main-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.main-nav a{font-size:.76rem;font-weight:800;text-decoration:none;color:inherit}
.page-hero{padding:clamp(70px,9vw,120px) 0 clamp(52px,7vw,86px);border-bottom:1px solid var(--line)}
.page-hero--compact{padding-bottom:50px}
.page-hero h1{max-width:950px;margin:10px 0 20px;font-size:clamp(3rem,6.8vw,6.2rem);line-height:.94;letter-spacing:-.055em}
.page-hero--compact h1{font-size:clamp(3rem,5.5vw,5rem)}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.contact-card{background:var(--surface);padding:clamp(28px,4vw,48px);min-height:300px}
.contact-card h2{font-size:clamp(1.7rem,3vw,2.7rem);margin:10px 0 18px}
.contact-card p{max-width:590px;color:var(--muted);line-height:1.7}
.contact-link{display:inline-block;margin-top:4px;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:800;color:var(--text);text-decoration-thickness:1px;text-underline-offset:5px}
.legal-page .prose{max-width:820px}
.legal-page h2{margin-top:42px;font-size:1.35rem}
.legal-page p{line-height:1.75}
.legal-notice{padding:18px 20px;margin-bottom:38px;border:1px solid var(--line);background:var(--surface);font-size:.82rem;line-height:1.6}
.site-footer{margin-top:0;background:#151716;color:#f2f2ed}
.footer-main{display:grid;grid-template-columns:minmax(280px,1.7fr) repeat(3,minmax(130px,1fr));gap:48px;padding-top:64px;padding-bottom:56px}
.footer-brand{max-width:420px}
.footer-logo{display:inline-block;margin-bottom:18px;font-size:1.4rem;font-weight:900;letter-spacing:-.03em;color:#fff;text-decoration:none}
.footer-brand p{margin:0 0 20px;color:#aeb1ac;font-size:.82rem;line-height:1.7}
.footer-group{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-group h2{margin:0 0 8px;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#7f837d}
.footer-group a{font-size:.8rem;color:#e8e9e4;text-decoration:none}
.footer-group a:hover,.footer-logo:hover{text-decoration:underline;text-underline-offset:4px}
.text-link--light{color:#f4f5ef}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:28px;border-top:1px solid #2b2e2b}
.footer-bottom p{margin:0;color:#858984;font-size:.66rem}
@media(max-width:900px){
  .main-nav a:nth-child(4){display:none}
  .footer-main{grid-template-columns:1.5fr 1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .main-nav{gap:13px}
  .main-nav a{font-size:.69rem}
  .main-nav a:nth-child(3){display:none}
  .footer-main{grid-template-columns:1fr 1fr;gap:38px 24px;padding-top:50px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{display:block}
  .footer-bottom p+p{margin-top:7px}
}


/* v12: physical status indicator follows the demo status output */
.interactive-visual .status-window{
  transition:background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.interactive-visual .status-window.is-on{
  background:#fff18a;
  box-shadow:
    inset 0 0 0 1px rgba(132,116,22,.28),
    0 0 7px rgba(255,241,138,.8),
    0 0 16px rgba(255,241,138,.42);
}
html[data-theme="dark"] .interactive-visual .status-window.is-on{
  background:#fff18a;
  box-shadow:
    inset 0 0 0 1px rgba(132,116,22,.35),
    0 0 8px rgba(255,241,138,.85),
    0 0 18px rgba(255,241,138,.46);
}


/* v13: primary planning CTA + categorized combination overview */
.main-nav .header-plan-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  background:var(--text);
  color:var(--surface);
  font-weight:900;
  text-decoration:none;
}
.main-nav .header-plan-btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}
.overview-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:48px;
}
.overview-jump a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text);
  text-decoration:none;
  font-size:.75rem;
  font-weight:800;
}
.overview-jump a:hover{background:var(--surface)}
.overview-section{scroll-margin-top:100px;margin-top:64px}
.overview-section:first-of-type{margin-top:0}
.overview-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}
.overview-heading h2{
  margin:4px 0 0;
  font-size:clamp(2rem,4vw,3.6rem);
  letter-spacing:-.04em;
}
.overview-heading>span{
  padding-bottom:7px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
}
.table-wrap{
  overflow-x:auto;
  border-top:1px solid var(--line);
}
.combo-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.combo-table th{
  padding:14px 16px 12px 0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.06em;
  text-align:left;
  text-transform:uppercase;
}
.combo-table td{
  padding:20px 16px 20px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-size:.8rem;
}
.combo-table td:first-child{width:42%}
.combo-table td:nth-child(2){width:18%}
.combo-table td:nth-child(3){width:25%}
.combo-table td:last-child{text-align:right;white-space:nowrap}
.combo-name{
  display:inline-block;
  color:var(--text);
  font-size:1rem;
  font-weight:900;
  line-height:1.25;
  text-decoration:none;
}
.combo-name:hover{text-decoration:underline;text-underline-offset:4px}
.combo-table small{
  display:block;
  max-width:620px;
  margin-top:6px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.55;
}
.article-codes{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;
}
.table-detail-link{
  color:var(--text);
  font-size:.74rem;
  font-weight:900;
  text-decoration:none;
}
.table-detail-link:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){
  .main-nav .header-plan-btn{min-height:38px;padding:0 15px}
  .main-nav a:nth-child(4){display:none}
}
@media(max-width:620px){
  .main-nav a:nth-child(1),
  .main-nav a:nth-child(3),
  .main-nav a:nth-child(4){display:none}
  .main-nav .header-plan-btn{display:inline-flex}
  .overview-heading{align-items:flex-start;flex-direction:column;gap:4px}
}


/* v14: illuminated control LED on the rocker itself.
   Must override the product-fidelity base rule that uses !important. */
.interactive-visual .rocker .status-window.is-on{
  background:#fff18a!important;
  border-color:rgba(132,116,22,.34)!important;
  box-shadow:
    0 0 0 1px rgba(255,241,138,.32),
    0 0 8px rgba(255,241,138,.95),
    0 0 18px rgba(255,241,138,.58)!important;
}
html[data-theme="dark"] .interactive-visual .rocker .status-window.is-on{
  background:#fff18a!important;
  border-color:rgba(132,116,22,.42)!important;
  box-shadow:
    0 0 0 1px rgba(255,241,138,.34),
    0 0 9px rgba(255,241,138,.98),
    0 0 20px rgba(255,241,138,.62)!important;
}


/* ==========================================================================
   v15 production UI finishing pass
   ========================================================================== */
:root{
  --primary:#d6ea36;
  --primary-hover:#c7db27;
  --primary-ink:#0b0c0c;
  --control-h:46px;
  --header-h:72px;
}
html[data-theme="dark"]{
  --primary:#d8ed39;
  --primary-hover:#e2f34f;
  --primary-ink:#090a09;
}
body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
button,a{-webkit-tap-highlight-color:transparent}
button,.btn,.header-plan-btn,.option,.logic-tab,.theme,.back-link,.overview-jump a,.mirror-toggle{
  border-radius:0!important;
}
.lucide{width:18px;height:18px;flex:0 0 auto;stroke-width:1.9}
.lucide--sm{width:15px;height:15px}
.icon-link{display:inline-flex;align-items:center;gap:8px}

/* Buttons */
.btn{
  min-height:var(--control-h);
  gap:10px;
  padding:11px 16px;
  border:1px solid var(--text);
  border-radius:0!important;
  font-size:.79rem;
  font-weight:850;
  letter-spacing:-.01em;
  transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn--primary,.btn--accent{
  background:var(--primary);
  color:var(--primary-ink);
  border-color:var(--primary);
}
.btn--primary:hover,.btn--accent:hover{
  background:var(--primary-hover);
  border-color:var(--primary-hover);
}
.btn--secondary{
  background:transparent;
  color:var(--text);
  border-color:var(--line);
}
.btn--secondary:hover{background:var(--surface);border-color:var(--text)}
.btn--dark{background:var(--text);color:var(--bg)}
.text-link{transition:color .14s ease}
.text-link:hover{color:color-mix(in srgb,var(--text) 70%,var(--primary))}
.text-link .lucide{transition:transform .14s ease}
.text-link:hover .lucide{transform:translateX(2px)}

/* Header */
.site-header{
  height:var(--header-h);
  background:rgba(12,13,13,.98);
  backdrop-filter:saturate(130%) blur(10px);
}
.header-row{height:var(--header-h);gap:22px}
.brand{flex:0 0 auto}
.brand-mark{width:36px;height:36px;font-size:.78rem;letter-spacing:-.02em}
.brand strong{font-size:.9rem;letter-spacing:-.02em}
.brand small{font-size:.62rem;letter-spacing:.01em}
.main-nav{margin-left:auto;gap:2px}
.main-nav>a:not(.header-plan-btn){
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  color:#c9cbc7;
  font-size:.74rem;
  font-weight:760;
  transition:background .14s ease,color .14s ease;
}
.main-nav>a:not(.header-plan-btn):hover{
  background:#222424;
  color:#fff;
  text-decoration:none;
}
.main-nav .header-plan-btn{
  min-height:42px;
  margin-left:8px;
  padding:0 16px;
  gap:8px;
  border:1px solid var(--primary);
  border-radius:0!important;
  background:var(--primary)!important;
  color:var(--primary-ink)!important;
  font-size:.76rem;
  font-weight:900;
  box-shadow:none;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.main-nav .header-plan-btn:hover{
  background:var(--primary-hover)!important;
  border-color:var(--primary-hover);
  transform:translateY(-1px);
}
.main-nav .header-plan-btn:active{transform:none}
.theme{
  width:42px;
  height:42px;
  border:1px solid #3a3c3b;
  background:#161818;
  color:#d5d7d2;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.theme:hover{background:#242626;border-color:#555854;color:#fff}
.theme span{display:none}

/* Typography and spacing */
.kicker{margin-bottom:12px;font-size:.64rem;font-weight:850;letter-spacing:.155em}
.hero-lead{line-height:1.62}
.section-head{margin-bottom:44px}
.section-head>p:last-child,.prose{line-height:1.72}

/* Sharper cards */
.benefit-grid article,.contact-card{transition:background .14s ease}
.benefit-grid article:hover{background:var(--surface)}
.benefit-icon,.journey-grid article>span{border-radius:0!important}

/* Finder */
.finder{box-shadow:0 18px 60px rgba(0,0,0,.05)}
.finder-progress{height:4px}
.finder-stage{padding:52px 34px 56px}
.finder-question h2{margin-bottom:14px}
.option{
  position:relative;
  min-height:116px;
  padding:22px;
  gap:16px;
  align-items:center;
  border-radius:0!important;
  transition:background .13s ease,color .13s ease;
}
.option:hover,.option:focus-visible{
  background:color-mix(in srgb,var(--primary) 13%,var(--bg));
}
.option-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:1px solid var(--line);
  color:var(--text);
}
.option-icon .lucide{width:19px;height:19px}
.option-copy{min-width:0;flex:1}
.option strong{font-size:.9rem;line-height:1.3}
.option small{margin-top:5px;font-size:.71rem}
.option-arrow{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:var(--muted);
  transition:transform .14s ease,color .14s ease;
}
.option:hover .option-arrow{transform:translateX(3px);color:var(--text)}
.finder-footer{min-height:62px;padding:12px 20px}
.back-link{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:7px 4px;
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
}
.back-link:hover{color:var(--text)}
.trail-chip{padding:5px 8px;background:var(--surface);border-color:var(--line)}
.result-state{padding:5px 8px;background:var(--primary)}

/* Combination detail */
.tag-row span{padding:6px 9px;background:var(--surface)}
.parts{border-top-width:1px}
.parts article{transition:background .13s ease}
.parts article:hover{background:var(--surface)}
.note{border-left:3px solid var(--primary)}
.fact-card{border-top:3px solid var(--primary)}
.logic-tab{min-height:86px;transition:background .13s ease,box-shadow .13s ease}
.logic-tab:hover{background:#202222}
.logic-tab.is-active{background:#252916;box-shadow:inset 0 -3px 0 var(--primary)}
.logic-tab.is-active strong{color:var(--primary)}
.hit:hover::after,.hit:focus-visible::after{
  border-color:var(--primary);
  background:rgba(214,234,54,.10);
}
.hit.is-holding::after{
  border-color:var(--primary);
  background:rgba(214,234,54,.16);
}
.output{min-height:88px}

/* Overview */
.overview-jump{
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.overview-jump a{
  min-height:40px;
  border-top:0;
  border-left:0;
  border-radius:0!important;
  font-size:.7rem;
}
.combo-table tbody tr{transition:background .12s ease}
.combo-table tbody tr:hover{background:var(--surface)}
.combo-table td:first-child,.combo-table th:first-child{padding-left:12px}
.table-detail-link{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 8px;
  border:1px solid transparent;
}
.table-detail-link:hover{border-color:var(--line);text-decoration:none}

/* Footer */
.site-footer{border-top:4px solid var(--primary)}
.footer-logo{font-size:1.35rem}
.footer-group a{color:#cfd1cc;transition:color .12s ease}
.footer-group a:hover{color:#fff}
.footer-bottom{align-items:center}

/* Mobile */
@media(max-width:980px){
  .header-row{gap:14px}
  .main-nav>a:not(.header-plan-btn){padding:0 8px}
  .main-nav .header-plan-btn{margin-left:4px}
}
@media(max-width:760px){
  :root{--header-h:64px}
  .shell{width:min(calc(100% - 28px),var(--max))}
  .brand small{display:none}
  .header-row{gap:10px}
  .main-nav>a:not(.header-plan-btn){display:none}
  .main-nav .header-plan-btn{
    display:inline-flex!important;
    min-height:40px;
    margin-left:0;
    padding:0 14px;
  }
  .theme{width:40px;height:40px}
  .finder-stage{padding:38px 18px 42px}
  .option-grid{grid-template-columns:1fr}
  .option{min-height:96px;padding:18px}
  .hero-actions{align-items:stretch;flex-direction:column;gap:12px}
  .hero-actions .btn{width:100%}
  .hero-actions .text-link{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}


/* v16: hochkante Jalousie-Fahranzeige */
.output.is-blind{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  column-gap:14px;
  min-height:118px;
}
.output.is-blind .output-copy{
  min-width:0;
}
.blind-drive{
  display:grid;
  grid-template-columns:24px 12px;
  grid-template-rows:78px auto;
  column-gap:7px;
  align-items:start;
  width:52px;
  color:var(--muted);
}
.blind-drive-icon{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  color:var(--muted);
  transition:color .12s ease;
}
.blind-drive[data-direction="up"] .blind-drive-icon,
.blind-drive[data-direction="down"] .blind-drive-icon{
  color:var(--primary);
}
.blind-drive-track{
  position:relative;
  display:block;
  width:10px;
  height:76px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  overflow:hidden;
}
.blind-drive-fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:block;
  background:var(--primary);
  opacity:.72;
  transition:height .09s linear;
}
.blind-drive-marker{
  position:absolute;
  left:-2px;
  display:block;
  width:12px;
  height:6px;
  border:1px solid var(--text);
  background:var(--bg);
  transition:bottom .09s linear,background .12s ease,border-color .12s ease;
}
.blind-drive[data-direction="up"] .blind-drive-marker,
.blind-drive[data-direction="down"] .blind-drive-marker{
  background:var(--primary);
  border-color:var(--primary);
}
.blind-drive-value{
  grid-column:1 / 3;
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:.58rem;
  font-style:normal;
  font-weight:850;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
@media(max-width:620px){
  .output.is-blind{
    grid-template-columns:28px minmax(0,1fr) auto;
    min-height:108px;
    column-gap:11px;
  }
  .blind-drive{
    grid-template-rows:68px auto;
    width:48px;
  }
  .blind-drive-track{height:66px}
}


/* v17: nur Frontansicht; Bauform als dezenter Badge */
.visual-card{position:relative}
.view-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:0;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  color:var(--text);
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.025em;
  line-height:1;
  backdrop-filter:blur(6px);
}

.product-view-grid--front-only{
  grid-template-columns:1fr;
}
.product-view-grid--front-only .product-view{
  width:100%;
  max-width:420px;
  margin-inline:auto;
}


/* v18: Bauform-Badge direkt an der Tasterabbildung */
.product-view{
  position:relative;
}
.product-view .view-badge{
  top:10px;
  right:10px;
  left:auto;
}


/* v19: Farbvarianten als ruhige, scanbare Tabelle */
.colour-table-wrap{
  width:100%;
  margin-top:18px;
  overflow-x:auto;
  border-top:1px solid var(--line);
}
.colour-part-title + .colour-table-wrap{
  margin-top:12px;
}
.colour-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.colour-table th{
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.08em;
  text-align:left;
  text-transform:uppercase;
}
.colour-table td{
  padding:14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  font-size:.75rem;
}
.colour-table th:first-child,
.colour-table td:first-child{
  width:72px;
}
.colour-table th:last-child,
.colour-table td:last-child{
  width:150px;
}
.colour-table tbody tr{
  transition:background .12s ease;
}
.colour-table tbody tr:hover{
  background:var(--surface);
}
.colour-swatch-cell{
  text-align:center;
}
.colour-swatch{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid color-mix(in srgb,var(--text) 18%,var(--line));
  border-radius:0;
  background:var(--swatch);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.article-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;
  font-variant-numeric:tabular-nums;
}
@media(max-width:620px){
  .colour-table{
    min-width:480px;
  }
}


/* v20: Bauform-Badge in Primary */
.product-view .view-badge{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--primary-ink);
  backdrop-filter:none;
}


/* v21: kompakte Blendenfarbentabelle ohne separate Farbmuster-Spalte */
.colour-table th:first-child,
.colour-table td:first-child{
  width:auto;
  padding-left:14px;
}
.colour-table th:nth-child(2),
.colour-table td:nth-child(2){
  width:150px;
}
.colour-table th:last-child,
.colour-table td:last-child{
  width:170px;
}
.colour-link-cell{
  text-align:right;
}
.gira-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-height:34px;
  color:var(--text);
  font-size:.69rem;
  font-weight:820;
  white-space:nowrap;
}
.gira-link:hover{
  text-decoration:none;
}
.gira-link .lucide{
  transition:transform .14s ease;
}
.gira-link:hover .lucide{
  transform:translateX(2px);
}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@media(max-width:620px){
  .colour-table{
    min-width:500px;
  }
}


/* v23: direkter Einstieg von der Kombination in die Funktionsdemo */
.combo-hero-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
}
#ausprobieren{
  scroll-margin-top:calc(var(--header-h) + 18px);
}


/* v26: robuste Jalousie-Bedienung auf Maus und Touch */
.hit{
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.hit.is-holding::after{
  border-color:var(--accent);
  background:rgba(214,234,54,.12);
}


/* v28: Demo als klarer 3-Spalten-Workbench – Logik | Taster | Ergebnis */
.demo-workbench{
  display:grid;
  grid-template-columns:minmax(250px,.9fr) minmax(330px,1.15fr) minmax(280px,1fr);
  align-items:stretch;
  margin-top:34px;
  border:1px solid var(--line);
  background:var(--panel);
}
.demo-logic-panel,
.demo-switch-panel,
.demo-result-panel{
  min-width:0;
  padding:22px;
}
.demo-switch-panel,
.demo-result-panel{
  border-left:1px solid var(--line);
}
.demo-column-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:52px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.demo-column-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:1px solid var(--line);
  color:var(--primary);
  font-size:.62rem;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.demo-column-head strong,
.demo-column-head small{
  display:block;
}
.demo-column-head strong{
  color:var(--text);
  font-size:.78rem;
  line-height:1.25;
}
.demo-column-head small{
  margin-top:3px;
  color:var(--muted);
  font-size:.65rem;
  line-height:1.35;
}
.demo-workbench .logic-tabs{
  display:flex;
  flex-direction:column;
  margin:0;
  border:0;
}
.demo-workbench .logic-tab{
  width:100%;
  min-height:0;
  padding:15px 0 15px 16px;
  border:0;
  border-bottom:1px solid var(--line);
  border-left:3px solid transparent;
  background:transparent;
  text-align:left;
}
.demo-workbench .logic-tab:first-child{
  border-top:0;
}
.demo-workbench .logic-tab:hover{
  background:color-mix(in srgb,var(--primary) 5%,transparent);
}
.demo-workbench .logic-tab.is-active{
  border-left-color:var(--primary);
  border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--primary) 9%,transparent);
}
.demo-workbench .logic-tab.is-active::after{
  display:none;
}
.demo-workbench .logic-tab strong{
  font-size:.73rem;
  line-height:1.35;
}
.demo-workbench .logic-tab span{
  margin-top:5px;
  font-size:.64rem;
  line-height:1.45;
}
.demo-workbench .mirror-row{
  margin:18px 0 0;
}
.demo-switch-panel .demo{
  display:block;
  margin:0;
}
.demo-switch-panel .demo-switch{
  width:100%;
  padding-top:28px;
}
.demo-switch-panel .interactive-visual{
  margin-inline:auto;
}
.demo-result-panel .demo-outputs{
  display:flex;
  flex-direction:column;
  width:100%;
  margin:0;
  padding-top:16px;
  border:0;
}
.demo-result-panel .output{
  width:100%;
  min-height:92px;
  border:0;
  border-bottom:1px solid var(--line);
}
.demo-result-panel .output:last-child{
  border-bottom:0;
}
.demo-result-panel .output.is-blind{
  grid-template-columns:auto minmax(0,1fr) auto;
}
.demo-result-panel .blind-drive{
  min-width:58px;
}
.demo-result-panel .blind-drive-value{
  font-size:.6rem;
}
@media(max-width:1050px){
  .demo-workbench{
    grid-template-columns:minmax(220px,.8fr) minmax(310px,1.2fr);
  }
  .demo-result-panel{
    grid-column:1/-1;
    border-left:0;
    border-top:1px solid var(--line);
  }
  .demo-result-panel .demo-outputs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .demo-result-panel .output:nth-child(odd){
    border-right:1px solid var(--line);
  }
}
@media(max-width:720px){
  .demo-workbench{
    display:flex;
    flex-direction:column;
  }
  .demo-switch-panel,
  .demo-result-panel{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .demo-logic-panel,
  .demo-switch-panel,
  .demo-result-panel{
    padding:18px;
  }
  .demo-result-panel .demo-outputs{
    display:flex;
  }
  .demo-result-panel .output:nth-child(odd){
    border-right:0;
  }
}


/* v29: Demo-Workbench – ruhiger, hochwertiger, mit weichen Flächen statt Linienraster */
.demo-workbench{
  gap:16px;
  padding:0;
  border:0;
  background:transparent;
}
.demo-logic-panel,
.demo-switch-panel,
.demo-result-panel{
  position:relative;
  min-width:0;
  padding:24px;
  border:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--panel) 98%,var(--bg)) 0%,
      color-mix(in srgb,var(--panel) 92%,var(--bg)) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.025) inset,
    0 12px 34px rgba(0,0,0,.07);
}
.demo-switch-panel,
.demo-result-panel{
  border-left:1px solid color-mix(in srgb,var(--line) 55%,transparent);
}
.demo-switch-panel{
  overflow:hidden;
}
.demo-switch-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 47%,
    color-mix(in srgb,var(--primary) 7%,transparent),
    transparent 48%);
}
.demo-column-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  gap:11px;
  min-height:44px;
  margin-bottom:18px;
  padding:0;
  border:0;
}
.demo-column-index{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:0;
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  color:var(--primary);
  font-size:.57rem;
  font-weight:900;
}
.demo-column-head strong{
  font-size:.8rem;
  font-weight:850;
  letter-spacing:-.015em;
}
.demo-column-head small{
  margin-top:3px;
  color:var(--muted);
  font-size:.63rem;
}
.demo-workbench .logic-tabs{
  gap:7px;
}
.demo-workbench .logic-tab{
  position:relative;
  padding:13px 14px 13px 15px;
  border:1px solid transparent;
  background:transparent;
  box-shadow:none;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}
.demo-workbench .logic-tab::before{
  content:"";
  position:absolute;
  top:13px;
  bottom:13px;
  left:0;
  width:2px;
  background:transparent;
}
.demo-workbench .logic-tab:hover{
  border-color:color-mix(in srgb,var(--line) 55%,transparent);
  background:color-mix(in srgb,var(--surface) 54%,transparent);
  transform:translateX(2px);
}
.demo-workbench .logic-tab.is-active{
  border-color:color-mix(in srgb,var(--primary) 20%,var(--line));
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
}
.demo-workbench .logic-tab.is-active::before{
  background:var(--primary);
}
.demo-workbench .logic-tab strong{
  color:var(--text);
  font-size:.72rem;
}
.demo-workbench .logic-tab.is-active strong{
  color:var(--primary);
}
.demo-workbench .logic-tab span{
  margin-top:5px;
  color:var(--muted);
  font-size:.63rem;
  line-height:1.48;
}
.demo-workbench .mirror-row{
  margin:16px 0 0;
  padding:14px;
  border:0;
  background:color-mix(in srgb,var(--surface) 65%,transparent);
}
.demo-switch-panel .demo{
  position:relative;
  z-index:1;
  display:block;
  margin:0;
}
.demo-switch-panel .demo-switch{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:470px;
  padding:20px 0 8px;
}
.demo-switch-panel .demo-switch p{
  margin-top:18px;
  color:var(--muted);
  font-size:.66rem;
}
.demo-switch-panel .interactive-visual{
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.08));
}
.demo-result-panel .demo-outputs{
  display:flex;
  flex-direction:column;
  gap:9px;
  width:100%;
  margin:0;
  padding:0;
  border:0;
}
.demo-result-panel .output{
  position:relative;
  width:100%;
  min-height:86px;
  padding:15px 16px;
  border:1px solid color-mix(in srgb,var(--line) 48%,transparent);
  background:color-mix(in srgb,var(--surface) 58%,transparent);
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}
.demo-result-panel .output:last-child{
  border-bottom:1px solid color-mix(in srgb,var(--line) 48%,transparent);
}
.demo-result-panel .output.is-on{
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line));
  background:color-mix(in srgb,var(--primary) 7%,var(--surface));
}
.demo-result-panel .output.is-on::before{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  left:0;
  width:2px;
  background:var(--primary);
}
.demo-result-panel .output-icon{
  background:color-mix(in srgb,var(--bg) 62%,var(--surface));
}
.demo-result-panel .output strong{
  font-size:.76rem;
}
.demo-result-panel .output [data-label]{
  color:var(--muted);
  font-size:.66rem;
}
.demo-result-panel .output.is-blind{
  grid-template-columns:auto minmax(0,1fr) 64px;
  align-items:center;
}
.demo-result-panel .blind-drive{
  justify-self:end;
  min-width:56px;
}
.demo-result-panel .blind-drive-track{
  opacity:.9;
}
.demo-result-panel .blind-drive-value{
  margin-top:4px;
  font-size:.58rem;
  font-variant-numeric:tabular-nums;
}
.hit:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
@media(max-width:1050px){
  .demo-workbench{
    gap:14px;
  }
  .demo-result-panel{
    border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  }
}
@media(max-width:720px){
  .demo-workbench{
    gap:12px;
  }
  .demo-switch-panel,
  .demo-result-panel{
    border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  }
  .demo-logic-panel,
  .demo-switch-panel,
  .demo-result-panel{
    padding:18px;
  }
  .demo-switch-panel .demo-switch{
    min-height:390px;
  }
}


/* v30: Demo final konsolidiert – eigener Dark-UI-Kontext, stabile Tastergröße */
.demo-section{
  --demo-bg:#070808;
  --demo-panel:#111212;
  --demo-surface:#191b1a;
  --demo-surface-hover:#202220;
  --demo-line:#2d302e;
  --demo-text:#f4f5f1;
  --demo-muted:#9da09b;
  --demo-primary:var(--primary);
  background:var(--demo-bg);
  color:var(--demo-text);
}
.demo-section .section-head--light>p:last-child{
  color:var(--demo-muted);
}
.demo-workbench{
  grid-template-columns:minmax(260px,.9fr) minmax(360px,1.15fr) minmax(300px,1fr);
  gap:14px;
}
.demo-logic-panel,
.demo-switch-panel,
.demo-result-panel{
  border:1px solid var(--demo-line);
  background:var(--demo-panel);
  color:var(--demo-text);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
.demo-switch-panel,
.demo-result-panel{
  border-left:1px solid var(--demo-line);
}
.demo-column-index{
  background:rgba(216,237,57,.09);
  color:var(--demo-primary);
}
.demo-column-head strong{
  color:var(--demo-text);
}
.demo-column-head small{
  color:var(--demo-muted);
}
.demo-workbench .logic-tab{
  color:var(--demo-text);
}
.demo-workbench .logic-tab strong{
  color:var(--demo-text);
}
.demo-workbench .logic-tab span{
  color:var(--demo-muted);
}
.demo-workbench .logic-tab:hover{
  border-color:var(--demo-line);
  background:var(--demo-surface-hover);
}
.demo-workbench .logic-tab.is-active{
  border-color:rgba(216,237,57,.25);
  background:rgba(216,237,57,.075);
}
.demo-workbench .logic-tab.is-active strong{
  color:var(--demo-primary);
}
.demo-workbench .mirror-row{
  background:var(--demo-surface);
  color:var(--demo-text);
}
.demo-switch-panel::before{
  background:radial-gradient(circle at 50% 49%,rgba(216,237,57,.055),transparent 50%);
}
.demo-switch-panel .demo-switch{
  min-height:500px;
}
.demo-switch-panel .interactive-visual{
  position:relative;
  width:min(100%,420px);
  flex:0 0 auto;
  aspect-ratio:1;
  margin-inline:auto;
  background:#ececea;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.22));
}
.demo-switch-panel .switch-visual--interactive{
  width:100%;
  height:100%;
}
.demo-switch-panel .hit-layer{
  z-index:5;
}
.demo-switch-panel .demo-switch p{
  color:var(--demo-muted);
}
.demo-result-panel .output{
  min-height:88px;
  border:1px solid var(--demo-line);
  background:var(--demo-surface);
  color:var(--demo-text);
}
.demo-result-panel .output:last-child{
  border-bottom:1px solid var(--demo-line);
}
.demo-result-panel .output.is-on,
.demo-result-panel .output[data-state="up"],
.demo-result-panel .output[data-state="down"]{
  border-color:rgba(216,237,57,.28);
  background:#1d2117;
}
.demo-result-panel .output-icon{
  background:#242624;
}
.demo-result-panel .output strong{
  color:var(--demo-text);
}
.demo-result-panel .output [data-label]{
  color:var(--demo-muted);
}
.demo-result-panel .output.is-on [data-label],
.demo-result-panel .output[data-state="up"] [data-label],
.demo-result-panel .output[data-state="down"] [data-label]{
  color:var(--demo-primary);
}
.demo-result-panel .blind-drive-icon,
.demo-result-panel .blind-drive-value{
  color:var(--demo-muted);
}
.demo-result-panel .blind-drive[data-direction="up"] .blind-drive-icon,
.demo-result-panel .blind-drive[data-direction="down"] .blind-drive-icon{
  color:var(--demo-primary);
}
@media(max-width:1050px){
  .demo-workbench{
    grid-template-columns:minmax(230px,.8fr) minmax(320px,1.2fr);
  }
}
@media(max-width:720px){
  .demo-switch-panel .interactive-visual{
    width:min(100%,360px);
  }
  .demo-switch-panel .demo-switch{
    min-height:410px;
  }
}


/* v31: 4fach-Doppelwippen klar nach links/rechts gruppieren + Position tauschen */
.logic-side-summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);
  align-items:center;
  gap:8px;
  width:100%;
}
.logic-side{
  min-width:0;
}
.logic-side small,
.logic-side b{
  display:block;
}
.logic-side small{
  margin:0 0 4px!important;
  color:var(--demo-muted)!important;
  font-size:.54rem!important;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.logic-side b{
  color:var(--demo-text);
  font-size:.68rem;
  font-weight:800;
  line-height:1.35;
}
.logic-tab.is-active .logic-side b{
  color:var(--demo-primary);
}
.logic-side-divider{
  display:grid!important;
  place-items:center;
  color:color-mix(in srgb,var(--demo-muted) 70%,transparent)!important;
}
.logic-side-divider .lucide{
  width:14px;
  height:14px;
}
.side-swap-control{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  margin-top:18px;
  padding:0 12px;
  border:1px solid var(--demo-line);
  border-radius:0!important;
  background:var(--demo-surface);
  color:var(--demo-text);
  cursor:pointer;
  font-size:.65rem;
  font-weight:850;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.side-swap-control:hover,
.side-swap-control.is-active{
  border-color:rgba(216,237,57,.36);
  background:#1d2117;
  color:var(--demo-primary);
}
.side-swap-control .lucide{
  width:16px;
  height:16px;
}
.side-swap-hint{
  margin:8px 0 0!important;
  color:var(--demo-muted)!important;
  font-size:.6rem!important;
}
.interactive-visual .switch-frame--split .rocker{
  transition:transform .18s ease;
}
.interactive-visual.is-side-swapped .switch-frame--split{
  flex-direction:row-reverse;
}
@media(max-width:720px){
  .logic-side-summary{
    grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);
    gap:6px;
  }
  .logic-side b{
    font-size:.64rem;
  }
}


/* v32: Links/Rechts in der Logikauswahl nur noch fein trennen */
.logic-side-summary{
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  gap:14px;
}
.logic-side-divider{
  display:block!important;
  width:1px;
  height:34px;
  justify-self:center;
  background:color-mix(in srgb,var(--demo-line) 82%,transparent);
}
.logic-side-divider .lucide{display:none!important;}
@media(max-width:720px){
  .logic-side-summary{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:10px;}
  .logic-side-divider{height:30px;}
}


/* v33: wiring recommendation */
.detail-sidebar{position:sticky;top:98px;display:grid;gap:14px}
.detail-sidebar .fact-card{position:static}
.wiring-mini-card{border:1px solid var(--line);background:var(--surface);padding:22px}
.wiring-mini-head{display:flex;gap:11px;align-items:flex-start}
.wiring-mini-head>.lucide{width:19px;height:19px;margin-top:2px;color:var(--primary)}
.wiring-mini-head span,.wiring-mini-head strong{display:block}
.wiring-mini-head span{font-size:.64rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.wiring-mini-head strong{margin-top:4px;font-size:.95rem}
.wiring-core-meter{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:18px 0 12px}
.wiring-core-meter i{height:6px;background:var(--line)}
.wiring-core-meter i.is-used{background:var(--primary)}
.wiring-mini-card>p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.55}
.wiring-mini-card>p strong{color:var(--text)}
.wiring-mini-breakdown{margin:16px 0 13px}
.wiring-mini-breakdown div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:.72rem}
.wiring-mini-breakdown dt{color:var(--muted)}.wiring-mini-breakdown dd{margin:0;font-weight:850}
.wiring-rating{display:inline-block;padding:5px 7px;font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line)}
.wiring-rating--komfortabel{border-color:color-mix(in srgb,var(--primary) 52%,var(--line));background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.wiring-rating--knapp{border-color:#c9a86b}
.wiring-mini-card>small{display:block;margin-top:12px;color:var(--muted);font-size:.66rem;line-height:1.5}
.wiring-mini-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:17px;padding-top:14px;border-top:1px solid var(--line);font-size:.72rem;font-weight:850;text-decoration:none}
.wiring-mini-link .lucide{width:15px;height:15px}
@media(max-width:900px){.detail-sidebar{position:static}}

.wiring-intro h1{max-width:980px}
.wiring-principle-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.wiring-principle{background:var(--bg);padding:32px;min-height:320px}
.wiring-principle--primary{background:var(--dark);color:#fff}
.wiring-principle>span{font-size:.66rem;font-weight:900;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.wiring-principle--primary>span{color:var(--accent)}
.wiring-principle h2{font-size:clamp(1.45rem,2.3vw,2.05rem);margin:42px 0 14px;line-height:1.08}
.wiring-principle p{color:var(--muted);line-height:1.65}
.wiring-principle--primary p{color:#a9aba7}
.wiring-formula{display:grid;grid-template-columns:auto 1fr auto auto 1fr auto auto 1fr;gap:8px;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid #343636}
.wiring-formula b{font-size:1.5rem;color:var(--accent)}.wiring-formula small{font-size:.62rem;color:#a9aba7}.wiring-formula em{font-style:normal;color:#70736e}

.dependency-table,.wiring-example-table{border-top:2px solid var(--text)}
.dependency-row{display:grid;grid-template-columns:1.1fr .35fr 2fr;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.dependency-row--head{font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.dependency-row b{font-size:1rem}.dependency-row p{margin:0;color:var(--muted);line-height:1.55}

.wiring-example-row{display:grid;grid-template-columns:1.3fr 1.6fr .7fr 1.25fr .6fr;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line);font-size:.8rem}
.wiring-example-row--head{font-size:.61rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.wiring-example-row span{color:var(--muted)}
.wiring-callout{display:grid;grid-template-columns:.9fr 1.4fr;gap:40px;margin-top:34px;padding:28px;background:var(--surface);border-left:5px solid var(--primary)}
.wiring-callout span,.wiring-callout strong{display:block}.wiring-callout span{font-size:.62rem;text-transform:uppercase;font-weight:900;color:var(--muted);letter-spacing:.08em}.wiring-callout strong{margin-top:6px;font-size:1.1rem}
.wiring-callout p{margin:0;color:var(--muted);line-height:1.65}

.wiring-convention .split-section{align-items:start}.wiring-convention h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1}.wiring-dark-lead{color:#a9aba7;line-height:1.75;max-width:620px}
.wire-colour-panel{border-top:1px solid #353736}
.wire-colour-panel>div{display:grid;grid-template-columns:24px 90px 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #353736}
.wire-colour-panel strong{color:#fff}.wire-colour-panel small{color:#a9aba7}.wire-colour-panel>p{color:#a9aba7;line-height:1.6;margin:20px 0 0}
.wire-dot{width:14px;height:14px;border:1px solid rgba(255,255,255,.35)}
.wire-dot--red{background:#b63b36}.wire-dot--black{background:#0c0d0d}.wire-dot--white{background:#eee}.wire-dot--yellow{background:#d7c54b}

.wiring-nogos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.wiring-nogos article{display:grid;grid-template-columns:30px 1fr;gap:17px;padding:25px;background:var(--bg)}
.wiring-nogos .lucide{width:21px;height:21px;color:#b98244}.wiring-nogos strong{font-size:.86rem}.wiring-nogos p{margin:7px 0 0;color:var(--muted);line-height:1.6;font-size:.78rem}

.wiring-source-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.wiring-source-grid a{display:block;padding:22px;background:var(--bg);text-decoration:none}
.wiring-source-grid a:hover{background:var(--surface)}
.wiring-source-grid strong,.wiring-source-grid span{display:block}.wiring-source-grid span{margin-top:5px;color:var(--muted);font-size:.75rem}

.wiring-teaser{display:grid;grid-template-columns:58px 1fr auto;gap:24px;align-items:center;padding:30px;border:1px solid var(--line);background:var(--surface)}
.wiring-teaser>div:first-child{width:48px;height:48px;display:grid;place-items:center;background:var(--dark);color:var(--accent)}
.wiring-teaser>div:first-child .lucide{width:23px;height:23px}.wiring-teaser h2{margin:4px 0 8px}.wiring-teaser p{margin:0;color:var(--muted);max-width:720px}

@media(max-width:980px){
  .wiring-principle-grid{grid-template-columns:1fr}
  .wiring-principle{min-height:0}
  .wiring-formula{max-width:520px}
  .wiring-example-row{grid-template-columns:1.1fr 1.5fr .65fr 1fr}
  .wiring-example-row>*:last-child{display:none}
}
@media(max-width:700px){
  .dependency-row{grid-template-columns:1fr auto}.dependency-row p{grid-column:1/-1}
  .dependency-row--head span:last-child{display:none}
  .wiring-example-row{grid-template-columns:1fr auto}
  .wiring-example-row span:nth-child(2){grid-column:1/-1}
  .wiring-example-row span:nth-child(4){grid-column:1/-1;color:var(--text);font-weight:800}
  .wiring-example-row--head{display:none}
  .wiring-callout{grid-template-columns:1fr;gap:12px}
  .wiring-nogos,.wiring-source-grid{grid-template-columns:1fr}
  .wiring-teaser{grid-template-columns:48px 1fr}.wiring-teaser .btn{grid-column:1/-1}
  .wiring-formula{grid-template-columns:auto 1fr auto auto 1fr}
  .wiring-formula>*:nth-child(n+6){display:none}
}


/* v34: Meine Planung */
.header-planning-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:800}
.header-planning-link b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--primary);color:var(--primary-ink);font-size:.62rem;border-radius:0}
.combo-hero-actions{display:flex;gap:9px;flex-wrap:wrap}
.plan-remember-btn.is-confirmed{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface))}
.btn--secondary{border:1px solid var(--line);background:var(--surface);color:var(--text)}
.btn--secondary:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));background:color-mix(in srgb,var(--primary) 7%,var(--surface))}

.planning-dialog{width:min(760px,calc(100vw - 30px));max-height:min(880px,calc(100vh - 28px));padding:0;border:1px solid var(--line);background:var(--bg);color:var(--text);box-shadow:0 28px 90px rgba(0,0,0,.28)}
.planning-dialog::backdrop{background:rgba(6,7,7,.7);backdrop-filter:blur(3px)}
.planning-dialog-shell{padding:28px}
.planning-dialog-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding-bottom:23px;border-bottom:1px solid var(--line)}
.planning-dialog-head h2{margin:4px 0 8px;font-size:clamp(1.7rem,3vw,2.6rem)}
.planning-dialog-head p:last-child{margin:0;color:var(--muted);line-height:1.55}
.dialog-close{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;border-radius:0}
.planning-config-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:20px 0;background:var(--line);border:1px solid var(--line)}
.planning-config-preview>div{padding:14px;background:var(--surface)}
.planning-config-preview span,.planning-config-preview strong{display:block}
.planning-config-preview span{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--muted)}
.planning-config-preview strong{margin-top:5px;font-size:.76rem;line-height:1.4}
.planning-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px}.field>span{font-size:.67rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.field>span b{margin-left:5px;font-size:.54rem;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--text);font:inherit}
.field textarea{resize:vertical;min-height:82px}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid color-mix(in srgb,var(--primary) 65%,transparent);outline-offset:1px}
.field--wide{grid-column:1/-1}
.quantity-control{display:grid;grid-template-columns:42px 1fr 42px}.quantity-control button,.quantity-control input{min-height:44px;border:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--text)}.quantity-control button{cursor:pointer;font-size:1.1rem}.quantity-control input{text-align:center;border-left:0;border-right:0}
.planning-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.planning-dialog-foot p{margin:0;max-width:420px;color:var(--muted);font-size:.68rem;line-height:1.5}.planning-dialog-foot p strong{color:var(--text)}

.planning-intro-grid{display:grid;grid-template-columns:1.7fr .7fr;gap:60px;align-items:end}
.planning-intro-note{padding:23px;border-left:3px solid var(--primary);background:var(--surface)}.planning-intro-note>.lucide{width:24px;height:24px;color:var(--primary)}.planning-intro-note strong{display:block;margin-top:18px}.planning-intro-note p{margin:5px 0 0;color:var(--muted);font-size:.76rem;line-height:1.55}
.planning-toolbar{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-bottom:24px;border-bottom:2px solid var(--text)}
.planning-summary{display:flex;gap:38px}.planning-summary div{display:grid}.planning-summary strong{font-size:1.75rem}.planning-summary span{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:850}
.planning-actions{display:flex;gap:8px;flex-wrap:wrap}.planning-actions button:disabled{opacity:.42;cursor:not-allowed}
.planning-browser-note{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0 38px;padding:13px 0;border-bottom:1px solid var(--line)}
.planning-browser-note>div{display:flex;gap:9px;align-items:center}.planning-browser-note p{margin:0;color:var(--muted);font-size:.7rem}.planning-browser-note p strong{color:var(--text)}
.text-button{padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:.68rem;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.text-button--danger{color:#a34b43}.text-button:disabled{opacity:.35;cursor:not-allowed}
.planning-empty{max-width:620px;margin:60px auto;padding:50px;text-align:center;border:1px solid var(--line);background:var(--surface)}.planning-empty>div{width:54px;height:54px;margin:0 auto 22px;display:grid;place-items:center;background:var(--dark);color:var(--accent)}.planning-empty h2{font-size:2rem;margin:0 0 10px}.planning-empty p{color:var(--muted);line-height:1.6;margin:0 auto 24px}
.plan-room{margin:0 0 46px}.plan-room-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:13px}.plan-room-head small{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}.plan-room-head h2{margin:3px 0 0;font-size:1.45rem}.plan-room-head>span{font-size:.68rem;color:var(--muted);font-weight:800}
.plan-table{border-top:1px solid var(--text)}.plan-row{display:grid;grid-template-columns:1.15fr 1.2fr 1.55fr 1.05fr .45fr 116px;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.plan-row--head{padding:9px 0;font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:900}
.plan-cell{min-width:0;font-size:.75rem;line-height:1.45}.plan-cell>a{font-weight:800;text-decoration:none}.plan-cell>small,.plan-hardware small{display:block;margin-top:4px;color:var(--muted)}.plan-hardware span{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem}.plan-qty strong{font-size:1rem}
.plan-row-actions{display:flex;justify-content:flex-end;gap:5px}.plan-row-actions button{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;border-radius:0}.plan-row-actions button:hover{background:var(--surface);border-color:var(--primary)}
.plan-logic-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}.plan-logic-sides small,.plan-logic-sides b{display:block}.plan-logic-sides small{font-size:.54rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:900}.plan-logic-sides b{margin-top:3px;font-size:.7rem}.plan-logic-single{font-size:.72rem}
.planning-materials{margin-top:72px;padding-top:60px;border-top:1px solid var(--line)}.planning-material-table{border-top:2px solid var(--text)}
.planning-material-row{display:grid;grid-template-columns:1.25fr 1.7fr .6fr 1fr;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:.75rem}.planning-material-row--head{font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:900}.planning-material-row>div strong,.planning-material-row>div small{display:block}.planning-material-row>div small{margin-top:4px;color:var(--muted)}.planning-material-row>span{color:var(--muted)}
@media(max-width:1100px){.plan-row{grid-template-columns:1fr 1fr 1.25fr .8fr 90px}.plan-row>*:nth-child(4),.plan-row--head>*:nth-child(4){display:none}.planning-intro-grid{grid-template-columns:1fr}}
@media(max-width:760px){.header-planning-link span{display:none}.planning-dialog-shell{padding:20px}.planning-config-preview{grid-template-columns:1fr}.planning-form-grid{grid-template-columns:1fr}.field--wide{grid-column:auto}.planning-dialog-foot{align-items:stretch;flex-direction:column}.planning-toolbar{align-items:stretch;flex-direction:column}.planning-summary{justify-content:space-between;gap:12px}.planning-actions{display:grid}.planning-browser-note{align-items:flex-start;flex-direction:column}.plan-row--head{display:none}.plan-row{grid-template-columns:1fr auto;gap:13px;padding:18px}.plan-table{display:grid;gap:10px;border:0}.plan-row:not(.plan-row--head){border:1px solid var(--line);background:var(--surface)}.plan-row>*{display:block!important}.plan-cell--name,.plan-row .plan-cell:nth-child(2),.plan-row .plan-cell:nth-child(3),.plan-row .plan-hardware{grid-column:1/-1}.plan-qty{grid-column:1}.plan-row-actions{grid-column:2;grid-row:5}.planning-material-row{grid-template-columns:1fr auto}.planning-material-row>*:nth-child(2),.planning-material-row>*:nth-child(4){grid-column:1/-1}.planning-material-row--head{display:none}}


/* v35: planning completion CTA, validation and explicit planning actions */
.demo-plan-completion{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  margin-top:16px;padding:20px 22px;
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line));
  background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));
}
.demo-plan-completion>div{display:flex;align-items:center;gap:13px}
.demo-plan-completion strong{display:block;font-size:.82rem}
.demo-plan-completion p{margin:4px 0 0;color:var(--muted);font-size:.68rem;line-height:1.45}
.demo-plan-check{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;background:var(--primary);color:var(--primary-ink)}
.field-error{display:block!important;margin:0;color:#b44e44;font-size:.65rem;font-weight:750;text-transform:none;letter-spacing:0}
.field-error[hidden]{display:none!important}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#b44e44;box-shadow:0 0 0 1px #b44e44 inset}
.field.has-error>span{color:#b44e44}
.plan-row-actions{gap:6px}
.plan-row-actions button{
  width:auto;min-width:34px;height:34px;padding:0 9px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.plan-row-actions button span{font-size:.61rem;font-weight:800}
.plan-row-actions .plan-action-danger:hover{border-color:#b44e44;color:#b44e44;background:color-mix(in srgb,#b44e44 7%,var(--surface))}
@media(max-width:1200px){
  .plan-row-actions button{padding:0 7px}
  .plan-row-actions button span{display:none}
}
@media(max-width:760px){
  .demo-plan-completion{align-items:stretch;flex-direction:column}
  .demo-plan-completion .btn{width:100%;justify-content:center}
  .plan-row-actions button span{display:none}
}


/* v36: gemeinsame Gira-Rahmen / Bedienstellen */
.frame-planning-hint{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:-18px 0 38px;padding:18px 20px;background:var(--surface);border-left:3px solid var(--primary)}
.frame-planning-hint>div{display:flex;align-items:flex-start;gap:10px}.frame-planning-hint p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.55}.frame-planning-hint p strong{color:var(--text)}
.plan-row{grid-template-columns:38px 1.1fr 1.15fr 1.45fr 1fr .4fr 116px}
.plan-select{display:grid!important;gap:4px;justify-items:start}.plan-select input{width:17px;height:17px;accent-color:var(--primary)}.plan-select small{font-size:.54rem;color:var(--primary);font-weight:800}
.plan-row.is-framed{background:color-mix(in srgb,var(--primary) 4%,transparent)}
.frame-selection-preview,.frame-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:20px 0;background:var(--line);border:1px solid var(--line)}
.frame-selection-preview>div,.frame-slots>div{min-width:0;padding:12px;background:var(--surface)}.frame-selection-preview b,.frame-slots b{display:grid;place-items:center;width:22px;height:22px;margin-bottom:9px;background:var(--dark);color:var(--accent);font-size:.6rem}.frame-selection-preview span,.frame-selection-preview small,.frame-slots span,.frame-slots small{display:block}.frame-selection-preview span,.frame-slots span{font-size:.7rem;font-weight:850}.frame-selection-preview small,.frame-slots small{margin-top:3px;color:var(--muted);font-size:.58rem}
.frame-wire-preview{margin:20px 0 0;padding:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--primary) 7%,var(--surface))}.frame-wire-preview span,.frame-wire-preview strong,.frame-wire-preview small{display:block}.frame-wire-preview span{font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:900}.frame-wire-preview strong{margin-top:5px}.frame-wire-preview small{margin-top:5px;color:var(--muted)}
.frame-groups{margin:0 0 58px}.frame-card{margin:0 0 14px;padding:22px;border:1px solid var(--line);background:var(--surface)}
.frame-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.frame-card-head small{font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:900}.frame-card-head h3{margin:3px 0 0;font-size:1.15rem}.frame-card-head p{margin:3px 0 0;color:var(--muted);font-size:.68rem}.frame-card-head button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font-size:.65rem;font-weight:800;cursor:pointer}
.frame-electrical{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:14px;background:var(--line);border:1px solid var(--line)}.frame-electrical>div{padding:11px;background:var(--bg)}.frame-electrical span,.frame-electrical strong{display:block}.frame-electrical span{font-size:.54rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:850}.frame-electrical strong{margin-top:4px;font-size:.74rem}.frame-electrical-total{background:color-mix(in srgb,var(--primary) 8%,var(--bg))!important}
@media(max-width:1100px){.plan-row{grid-template-columns:34px 1fr 1fr 1.2fr .7fr 90px}.plan-row>*:nth-child(5),.plan-row--head>*:nth-child(5){display:none}.frame-electrical{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.frame-planning-hint{align-items:stretch;flex-direction:column}.frame-selection-preview,.frame-slots{grid-template-columns:1fr}.frame-electrical{grid-template-columns:1fr 1fr}.plan-row{grid-template-columns:28px 1fr auto}.plan-select{grid-column:1}.plan-cell--name{grid-column:2/-1!important}.plan-row .plan-cell:nth-child(3),.plan-row .plan-cell:nth-child(4),.plan-row .plan-hardware{grid-column:1/-1}.plan-qty{grid-column:2}.plan-row-actions{grid-column:3;grid-row:6}}


/* v37: frontend icon + action audit */
.lucide--xs{width:12px;height:12px}
.header-planning-link>.lucide{flex:0 0 auto}
.text-button.icon-link{display:inline-flex;align-items:center;gap:7px}
.quantity-control button{display:grid;place-items:center}
.quantity-control button .lucide{pointer-events:none}
.plan-row-actions button .lucide,.frame-card-head button .lucide{flex:0 0 auto}
.plan-row-actions button:focus-visible,.frame-card-head button:focus-visible,.text-button:focus-visible,.dialog-close:focus-visible,.quantity-control button:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px
}
.plan-room-head small{display:inline-flex;align-items:center;gap:5px}
.plan-room-head small .lucide{color:var(--primary)}
.frame-card-head button:hover{color:var(--text)}
.frame-card-head button:hover .lucide{color:var(--primary)}
.plan-row-actions button[title="Bearbeiten"]:hover .lucide{color:var(--primary)}
.plan-row-actions button[title="Duplizieren"]:hover .lucide{color:var(--primary)}
.plan-row-actions .plan-action-danger .lucide{color:inherit}
@media(max-width:760px){
  .header-planning-link>.lucide{width:18px;height:18px}
}


/* v38: export package */
.planning-actions [data-plan-export]::after{
  content:"ZIP";
  margin-left:7px;
  padding:2px 4px;
  border:1px solid currentColor;
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.05em;
  line-height:1;
}


/* v39: Planning UI reset – Etage > Raum > Taster */
[data-plan-groups]{display:grid;gap:54px}
.plan-floor{min-width:0}
.plan-floor-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:0 0 14px;margin-bottom:12px;border-bottom:2px solid var(--text)
}
.plan-floor-head .kicker{margin:0 0 3px}
.plan-floor-head h2{margin:0;font-size:1.55rem}
.plan-floor-head>div:last-child{display:flex;gap:16px;color:var(--muted);font-size:.66rem;font-weight:800}
.plan-floor-rooms{display:grid;gap:10px}
.plan-room{margin:0;border:1px solid var(--line);background:var(--surface)}
.plan-room[open]{border-color:color-mix(in srgb,var(--text) 24%,var(--line))}
.plan-room-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0;padding:14px 16px;cursor:pointer;list-style:none;user-select:none
}
.plan-room-head::-webkit-details-marker{display:none}
.plan-room-title{display:flex;align-items:center;gap:11px;min-width:0}
.plan-room-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;background:var(--bg);border:1px solid var(--line);color:var(--primary)}
.plan-room-title small{display:block;font-size:.52rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}
.plan-room-title h3{margin:1px 0 0;font-size:.92rem}
.plan-room-meta{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.plan-room-meta>span:not(.plan-room-chevron){padding:4px 7px;background:var(--bg);font-size:.57rem;font-weight:800;color:var(--muted)}
.plan-room-chevron{display:grid;place-items:center;width:28px;height:28px}
.plan-room-chevron .lucide{transition:transform .18s ease}
.plan-room[open] .plan-room-chevron .lucide{transform:rotate(180deg)}
.plan-room-body{padding:0 16px 12px;min-width:0;overflow:hidden}
.plan-table{width:100%;min-width:0;border-top:1px solid var(--text)}
.plan-row{
  display:grid!important;
  grid-template-columns:30px minmax(110px,1.05fr) minmax(125px,1.15fr) minmax(145px,1.35fr) minmax(105px,.9fr) 48px 112px!important;
  gap:12px!important;align-items:center!important;padding:13px 0!important;
  border-bottom:1px solid var(--line)!important;background:transparent!important;min-width:0
}
.plan-row--head{padding:7px 0!important;font-size:.52rem!important}
.plan-row>*{min-width:0}
.plan-cell{font-size:.66rem}
.plan-cell strong,.plan-cell a{overflow-wrap:anywhere}
.plan-cell small{display:block;margin-top:3px;color:var(--muted);font-size:.56rem}
.plan-logic-sides{gap:8px}
.plan-logic-sides span{min-width:0}
.plan-logic-sides b{overflow-wrap:anywhere}
.plan-hardware span{display:block;overflow-wrap:anywhere}
.plan-select{display:grid!important;gap:3px;justify-items:start}
.plan-select small{display:none}
.plan-row.is-framed .plan-select small{display:none}
.plan-row-actions{
  display:grid!important;grid-template-columns:repeat(3,32px);gap:5px!important;
  justify-content:end!important
}
.plan-row-actions button{
  width:32px!important;min-width:32px!important;height:32px!important;padding:0!important;
  display:grid!important;place-items:center!important
}
.plan-row-actions button span{display:none!important}
.plan-row-actions .lucide{width:15px;height:15px}
.frame-groups{margin-bottom:0}
.frame-card-head button span{display:inline}
@media(max-width:1050px){
  .plan-row{
    grid-template-columns:28px minmax(105px,1fr) minmax(120px,1.1fr) minmax(135px,1.25fr) 46px 108px!important
  }
  .plan-row>*:nth-child(5),.plan-row--head>*:nth-child(5){display:none!important}
}
@media(max-width:760px){
  [data-plan-groups]{gap:38px}
  .plan-floor-head{align-items:flex-start}
  .plan-floor-head>div:last-child{flex-direction:column;align-items:flex-end;gap:4px}
  .plan-room-head{padding:12px}
  .plan-room-meta>span:not(.plan-room-chevron){display:none}
  .plan-room-body{padding:0 10px 10px}
  .plan-table{border-top:0}
  .plan-row--head{display:none!important}
  .plan-row{
    grid-template-columns:24px minmax(0,1fr) 104px!important;
    gap:8px 10px!important;padding:13px 2px!important
  }
  .plan-row:not(.plan-row--head){border:0!important;border-top:1px solid var(--line)!important}
  .plan-row:first-of-type{border-top:0!important}
  .plan-select{grid-column:1!important;grid-row:1!important}
  .plan-cell--name{grid-column:2!important;grid-row:1!important}
  .plan-row-actions{grid-column:3!important;grid-row:1!important;align-self:start!important}
  .plan-combination{grid-column:2/4!important;grid-row:2!important}
  .plan-logic{grid-column:2/4!important;grid-row:3!important}
  .plan-hardware{grid-column:2/4!important;grid-row:4!important;display:block!important}
  .plan-qty{grid-column:2!important;grid-row:5!important}
}
@media(max-width:430px){
  .plan-room-icon{display:none}
  .plan-row{grid-template-columns:20px minmax(0,1fr) 92px!important}
  .plan-row-actions{grid-template-columns:repeat(3,28px)!important}
  .plan-row-actions button{width:28px!important;min-width:28px!important;height:28px!important}
}


/* v40: electrical frame validation / multiple cable planning */
.frame-wire-preview{display:grid;gap:9px}
.frame-wire-preview>strong{font-size:.86rem}
.frame-wire-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0 0;border-top:1px solid var(--line)}
.frame-wire-line>div{display:grid;gap:2px}
.frame-wire-line b{font-size:.7rem}
.frame-wire-line span{font-size:.66rem;text-transform:none;letter-spacing:0;color:var(--text)}
.frame-wire-line small{margin:0;text-align:right;font-size:.62rem}
.frame-validation{margin-top:12px;padding:16px;border:1px solid var(--line);background:var(--surface)}
.frame-validation-head{display:flex;align-items:flex-start;gap:11px}
.frame-validation-head>span{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px}
.frame-validation-head strong{display:block;font-size:.8rem}
.frame-validation-head p{margin:4px 0 0;color:var(--muted);font-size:.68rem;line-height:1.5}
.frame-validation ul{margin:12px 0 0 42px;padding-left:16px;color:var(--muted);font-size:.66rem;line-height:1.55}
.frame-validation li+li{margin-top:5px}
.frame-validation.is-ok{border-left:3px solid var(--primary)}
.frame-validation.is-ok .frame-validation-head>span{background:var(--primary);color:var(--primary-ink)}
.frame-validation.is-warning{border-left:3px solid #b18329;background:color-mix(in srgb,#b18329 6%,var(--surface))}
.frame-validation.is-warning .frame-validation-head>span{background:#b18329;color:white}
.frame-validation.is-danger{border-left:3px solid #a34b43;background:color-mix(in srgb,#a34b43 6%,var(--surface))}
.frame-validation.is-danger .frame-validation-head>span{background:#a34b43;color:white}
.frame-dialog-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.frame-cable-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:8px}
.frame-cable-lines>div{padding:10px 12px;border:1px solid var(--line);background:var(--bg)}
.frame-cable-lines b,.frame-cable-lines span,.frame-cable-lines small{display:block}
.frame-cable-lines b{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em}
.frame-cable-lines span{margin-top:3px;font-size:.7rem;font-weight:800}
.frame-cable-lines small{margin-top:3px;color:var(--muted);font-size:.58rem}
@media(max-width:760px){
  .frame-wire-line{align-items:flex-start;flex-direction:column;gap:4px}
  .frame-wire-line small{text-align:left}
  .frame-dialog-actions{display:grid;width:100%}
  .frame-dialog-actions .btn{width:100%;justify-content:center}
}


/* v41: frameless room groups + contextual combine overlay */
.frame-planning-hint{
  align-items:flex-start!important;justify-content:flex-start!important;
  margin:-18px 0 38px!important;padding:16px 0!important;
  background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important
}
.frame-planning-hint-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;background:var(--dark);color:var(--accent)}
.frame-planning-hint strong{display:block;margin-bottom:4px;font-size:.74rem}
.frame-planning-hint p{max-width:920px}
.plan-floor-rooms{gap:22px!important}
.plan-room,.plan-room[open]{
  position:relative;margin:0!important;border:0!important;background:transparent!important
}
.plan-room-head{padding:10px 0 12px!important;border:0!important}
.plan-room-icon{background:transparent!important}
.plan-room-body{position:relative;padding:0!important;overflow:visible!important}
.plan-table{position:relative;transition:filter .16s ease,opacity .16s ease}
.plan-room-selection-layer{
  position:absolute;z-index:8;inset:0;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 52%,transparent);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)
}
.plan-room-selection-layer[hidden]{display:none!important}
.plan-room-selection-action{
  display:flex;align-items:center;gap:10px;padding:10px;
  background:var(--surface);border:1px solid var(--text);
  box-shadow:0 14px 38px rgba(0,0,0,.12)
}
.plan-room-selection-action>span{
  padding:0 5px;font-size:.62rem;font-weight:850;color:var(--muted);white-space:nowrap
}
.plan-selection-cancel{
  display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer
}
.plan-selection-cancel:hover{border-color:var(--text)}
@media(max-width:760px){
  .frame-planning-hint{margin-top:-8px!important}
  .plan-room-selection-action{max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:center}
  .plan-room-selection-action .btn{order:3;width:100%;justify-content:center}
}


/* v42: Rahmenauswahl bleibt nach 2 Tastern weiter bedienbar */
.plan-room-selection-layer{
  pointer-events:none;
}
.plan-room-selection-action{
  pointer-events:auto;
}
.plan-room-selection-layer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.plan-room-selection-layer + .plan-table{
  position:relative;
  z-index:1;
}
.plan-room-selection-layer{
  z-index:2;
}
.plan-room-selection-action{
  position:relative;
  z-index:3;
}
/* Checkboxen bleiben trotz Overlay direkt erreichbar. */
.plan-room-selection-layer ~ .plan-table .plan-select{
  position:relative;
  z-index:4;
}
.plan-room-selection-layer ~ .plan-table .plan-select input{
  pointer-events:auto;
  position:relative;
  z-index:5;
}


/* v43: Rahmenaktion unter der Tabelle statt Overlay */
.plan-room-selection-layer{display:none!important}
.plan-room-selection-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:12px;padding:13px 0 0;border-top:1px solid var(--line)
}
.plan-room-selection-bar[hidden]{display:none!important}
.plan-room-selection-bar>div:first-child{display:grid;gap:2px}
.plan-room-selection-bar strong{font-size:.72rem}
.plan-room-selection-bar>div:first-child span{font-size:.6rem;color:var(--muted)}
.plan-room-selection-actions{display:flex;align-items:center;gap:12px}
.plan-room-selection-actions .text-button{white-space:nowrap}
@media(max-width:760px){
  .plan-room-selection-bar{align-items:stretch;flex-direction:column}
  .plan-room-selection-actions{justify-content:space-between}
}
@media(max-width:480px){
  .plan-room-selection-actions{align-items:stretch;flex-direction:column-reverse}
  .plan-room-selection-actions .btn{width:100%;justify-content:center}
}