/* Schriften lokal eingebunden (keine Verbindung zu Google) */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/public-sans-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/public-sans-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/public-sans-latin-wght-italic.woff2) format("woff2-variations")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* Leitidee „Vom Plan zum Raum“: helle Planflächen im Wechsel mit dunklen Bildräumen,
   asymmetrisches 12er-Raster, feine Konstruktionslinien als Ordnungselement. */
:root{
  --graphite:#1f2326;
  --graphite-2:#2a2f33;
  --graphite-line:#3b4247;
  --paper:#f4f3ef;
  --paper-2:#e9e8e2;
  --ink:#1c2023;
  --ink-soft:#4c5459;
  --rule:#cfcdc5;
  --green:#05a954;          /* ES-Grün, aus dem Logo abgeleitet – finalen Wert aus Vektorlogo übernehmen */
  --green-ink:#037a3d;      /* Grün für Text auf hell */
  --green-light:#05a954;    /* Grün für Text/Linien auf dunkel */
  --on-dark:#eeede8;
  --on-dark-soft:#a9b0b4;

  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3:clamp(2.2rem,1.5rem + 3vw,4.2rem);
  --step-4:clamp(2.8rem,1.6rem + 5.6vw,7rem);

  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --maxw:1360px;
  --header-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:180ms;
  --t-slow:700ms;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.02;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px}
.skip:focus{left:16px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.eyebrow{font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink);display:flex;align-items:center;gap:.75em}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.dark .eyebrow{color:var(--green-light)}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);max-width:38ch}
.dark .lead{color:var(--on-dark-soft)}
.mono{font-family:var(--f-mono)}

/* Buttons */
.btn{--bg:var(--ink);--fg:#fff;display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:0 1.35em;border:1px solid var(--bg);background:var(--bg);color:var(--fg);font:600 .98rem/1 var(--f-body);text-decoration:none;cursor:pointer;border-radius:2px;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn svg{transition:transform var(--t-fast) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn-green{--bg:var(--green);--fg:#0f1a08}
.btn-green:hover{--bg:var(--green-light)}
.btn-ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{--bg:var(--ink);--fg:#fff}
.dark .btn-ghost{--fg:var(--on-dark);border-color:var(--on-dark-soft)}
.dark .btn-ghost:hover{--bg:var(--on-dark);--fg:var(--graphite)}
.btn-dark:hover{--bg:var(--green-ink)}
.textlink{font-weight:600;text-decoration:none;border-bottom:1px solid var(--green);padding-bottom:2px;transition:color var(--t-fast)}
.textlink:hover{color:var(--green-ink)}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(244,243,239,.94);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.header.scrolled{border-bottom-color:var(--rule)}
.header .wrap{height:var(--header-h);display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;height:100%;flex-shrink:0;text-decoration:none}
.logo img{height:46px;width:auto}
.logo .logo-fallback{font:800 1.25rem var(--f-display);letter-spacing:.04em}
.logo .logo-fallback b{color:var(--green-ink)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{position:relative;padding:10px 12px;text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink-soft);transition:color var(--t-fast)}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease)}
.nav a:hover,.nav a[aria-current="true"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav .btn{margin-left:12px;min-height:42px;color:#fff}
.nav .btn:hover{color:#fff}
.nav .btn::after{display:none}
.menu-btn{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--rule);background:transparent;border-radius:2px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:background var(--t-fast)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:transform 220ms var(--ease)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:980px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top,0px)) 0 0 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:16px var(--gutter-r) 32px var(--gutter);margin:0;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity 220ms var(--ease),transform 220ms var(--ease),visibility 0s 220ms;overflow-y:auto}
  .nav.open{opacity:1;transform:none;visibility:visible;transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
  .nav a{font:600 1.6rem var(--f-display);padding:16px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
  .nav a::after{display:none}
  .nav .btn{margin:24px 0 0;justify-content:center;font-size:1rem;min-height:54px;border-bottom:0}
  .nav .menu-contact{display:block;margin-top:24px;font-size:.95rem;color:var(--ink-soft)}
}
.nav .menu-contact{display:none}
@media (max-width:980px){.nav .menu-contact{display:block}}

/* Hero */
.hero{position:relative;background:var(--graphite);color:var(--on-dark);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(820px,calc(100svh - var(--header-h)));}
.hero-text{position:relative;z-index:2;padding-block:clamp(48px,7vw,104px) clamp(40px,5vw,72px);padding-left:max(var(--gutter),calc((100vw - var(--maxw))/2 + 16px));padding-right:clamp(16px,3vw,48px);display:flex;flex-direction:column;justify-content:center;gap:28px}
.hero h1{font-size:var(--step-4);font-stretch:112%;font-weight:750;letter-spacing:-.025em;line-height:.95}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line > span{display:block}
.hero h1 em{font-style:normal;color:var(--green-light)}
.hero .lead{color:#c8cdd0;max-width:34ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-media{position:relative;min-height:340px}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:60% 40%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--graphite) 0%,rgba(31,35,38,.25) 28%,rgba(31,35,38,0) 55%),linear-gradient(0deg,rgba(31,35,38,.7) 0%,rgba(31,35,38,0) 40%)}
.hero-media .credit{position:absolute;left:16px;text-align:right;right:max(16px,env(safe-area-inset-right,0px));bottom:14px;z-index:2;font:400 .72rem var(--f-mono);color:rgba(238,237,232,.7);letter-spacing:.04em}
.hero-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55}
.hero-lines line{stroke:var(--green-light);stroke-width:1;vector-effect:non-scaling-stroke}

.worlds{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--graphite-line);border:1px solid var(--graphite-line);max-width:560px}
.world-link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:var(--graphite-2);text-decoration:none;color:var(--on-dark);transition:background var(--t-fast) var(--ease)}
.world-link:hover{background:#343a3f}
.world-link svg.ico{width:44px;height:32px;stroke:var(--green-light);fill:none;stroke-width:1.5}
.world-link strong{display:block;font:700 1.15rem var(--f-display);font-stretch:108%}
.world-link small{display:block;color:var(--on-dark-soft);font-size:.82rem;line-height:1.35}
.world-link .arr{transition:transform var(--t-fast) var(--ease);color:var(--green-light)}
.world-link:hover .arr{transform:translateX(4px)}
.hero-meta{font:400 .78rem var(--f-mono);letter-spacing:.08em;color:var(--on-dark-soft);text-transform:uppercase}

/* Intro motion (kurz, nicht blockierend) */
.js .hero h1 .line > span{animation:rise 900ms var(--ease) both}
.js .hero h1 .line:nth-child(2) > span{animation-delay:90ms}
.js .hero .fade-in{animation:fade 700ms var(--ease) 260ms both}
.js .hero-media img{animation:drift 14s cubic-bezier(.25,.6,.3,1) both}
.js .hero-lines line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s var(--ease) both}
.js .hero-lines line:nth-child(2){animation-delay:.15s}.js .hero-lines line:nth-child(3){animation-delay:.3s}.js .hero-lines line:nth-child(4){animation-delay:.45s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1.09) translateX(1.5%)}to{transform:scale(1.0)}}
@keyframes draw{to{stroke-dashoffset:0}}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-media{order:-1;min-height:0;aspect-ratio:16/10;max-height:46vh}
  .hero-media::after{background:linear-gradient(0deg,var(--graphite) 0%,rgba(31,35,38,0) 60%)}
  .hero-text{padding-block:8px 40px;padding-left:var(--gutter);padding-right:var(--gutter-r);gap:22px}
  .worlds{max-width:none}
}
@media (max-width:520px){
  .worlds{grid-template-columns:1fr}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center}
}

/* Sections */
section{position:relative}
.sec{padding-block:clamp(72px,10vw,150px)}
.dark{background:var(--graphite);color:var(--on-dark)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.sec-head h2{font-size:var(--step-3);font-stretch:108%}
.sec-head .lead{justify-self:end}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}.sec-head .lead{justify-self:start}}

/* Construction rule: feine Achsen als Ordnungselement */
.axis{position:absolute;top:0;bottom:0;width:1px;background:var(--rule);opacity:.6;pointer-events:none}
.dark .axis{background:var(--graphite-line)}

/* Projektwelten */
.world{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:center}
.world + .world{margin-top:clamp(80px,10vw,160px)}
.world-fig{grid-column:1 / span 7;position:relative;margin:0}
.world-fig .frame{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:4/3}
.world-fig img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.world-fig:hover img{transform:scale(1.025)}
.world-fig figcaption,.figcap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font:400 .78rem var(--f-mono);letter-spacing:.04em;color:var(--ink-soft)}
.dark .figcap,.dark .world-fig figcaption{color:var(--on-dark-soft)}
.tag{display:inline-flex;align-items:center;gap:.5em;font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border:1px solid currentColor;border-radius:2px;white-space:nowrap}
.tag.ref{color:var(--green-ink)}
.dark .tag.ref{color:var(--green-light)}
.world-body{grid-column:9 / span 4;display:flex;flex-direction:column;gap:22px}
.world.flip .world-fig{grid-column:6 / span 7;order:2}
.world.flip .world-body{grid-column:1 / span 4;order:1}
.world-body h3{font-size:var(--step-3);font-stretch:112%}
.world-body .num{font:500 .8rem var(--f-mono);color:var(--ink-soft);letter-spacing:.1em}
.dark .world-body .num{color:var(--on-dark-soft)}
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.dark .checks{border-color:var(--graphite-line)}
.checks li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:.97rem}
.dark .checks li{border-color:var(--graphite-line)}
.checks li::before{content:"";width:12px;height:12px;margin-top:.45em;border:1.5px solid var(--green);transform:rotate(45deg) scale(.75)}
.world-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
details.more{border-top:1px solid var(--rule)}
.dark details.more{border-color:var(--graphite-line)}
details.more summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;display:flex;justify-content:space-between;align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";font:400 1.4rem var(--f-mono);transition:transform 220ms var(--ease)}
details.more[open] summary::after{transform:rotate(45deg)}
details.more .inner{padding-bottom:16px;color:var(--ink-soft);font-size:.97rem;display:grid;gap:10px}
.dark details.more .inner{color:var(--on-dark-soft)}
@media (max-width:860px){
  .world-fig,.world.flip .world-fig{grid-column:1 / -1;order:1}
  .world-body,.world.flip .world-body{grid-column:1 / -1;order:2}
}

/* Motion: Vom Plan zum Raum */
.ptr{background:var(--graphite);color:var(--on-dark)}
.ptr-track{position:relative;height:260vh}
.ptr-sticky{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));height:calc(100svh - var(--header-h));display:flex;align-items:center;overflow:hidden}
.ptr-grid{width:100%;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center}
.ptr-side{display:flex;flex-direction:column;gap:22px}
.ptr-side h2{font-size:var(--step-3);font-stretch:112%}
.switch{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--graphite-line);border-radius:2px;padding:3px;gap:3px;width:max-content;max-width:100%}
.switch button{min-height:40px;padding:0 16px;border:0;background:transparent;color:var(--on-dark-soft);font:600 .9rem var(--f-body);cursor:pointer;border-radius:1px;transition:background var(--t-fast),color var(--t-fast)}
.switch button[aria-pressed="true"]{background:var(--on-dark);color:var(--graphite)}
.switch button:hover:not([aria-pressed="true"]){color:var(--on-dark)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--graphite-line)}
.steps li{border-bottom:1px solid var(--graphite-line)}
.steps button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:72px 1fr;gap:12px;width:100%;padding:14px 0;cursor:pointer;color:var(--on-dark-soft);transition:color 300ms var(--ease)}
.steps button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.steps .k{font:500 .78rem var(--f-mono);letter-spacing:.12em;padding-top:.2em}
.steps .d{font-size:.95rem;line-height:1.5}
.steps .d strong{display:block;color:inherit;font:700 1.05rem var(--f-display);font-stretch:108%;margin-bottom:2px}
.steps li.active button{color:var(--on-dark)}
.steps li.active .k{color:var(--green-light)}
.steps .bar{height:2px;background:var(--graphite-line);position:relative;overflow:hidden;margin-top:-2px}
.steps .bar i{position:absolute;inset:0;background:var(--green);transform-origin:left;transform:scaleX(0)}
.stage{position:relative;aspect-ratio:16/10.5;max-height:calc(100svh - var(--header-h) - 80px);width:100%;border:1px solid var(--graphite-line);background:
  linear-gradient(var(--graphite-line) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,var(--graphite-line) 1px,transparent 1px) 0 0/40px 40px,var(--graphite);
  background-blend-mode:normal;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;background:var(--graphite);opacity:.72}
.stage-img{position:absolute;inset:0;margin:0;clip-path:inset(28% 22% 18% 22%);opacity:0;transition:opacity 500ms var(--ease)}
.stage-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.stage-img img.hidden-world{display:none}
.stage svg{position:absolute;inset:0;width:100%;height:100%}
.stage .ln{fill:none;stroke:var(--on-dark);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.stage .ln.acc{stroke:var(--green-light);stroke-width:2.2}
.stage .ln.dash{stroke:var(--on-dark-soft);stroke-width:1;stroke-dasharray:.012 .012;opacity:0}
.stage .lbl{font:500 11px var(--f-mono);fill:var(--on-dark-soft);letter-spacing:.08em;opacity:0}
.stage .world-g{transition:opacity 450ms var(--ease)}
.stage-cap{position:absolute;left:16px;right:16px;bottom:12px;display:flex;justify-content:space-between;gap:12px;font:400 .72rem var(--f-mono);letter-spacing:.06em;color:var(--on-dark-soft);z-index:3}
.stage-cap .tag{background:rgba(31,35,38,.7)}
.stage-state{position:absolute;top:14px;left:16px;z-index:3;font:500 .75rem var(--f-mono);letter-spacing:.16em;color:var(--green-light)}
/* statische Variante: Mobil + reduzierte Bewegung */
.ptr.static .ptr-track{height:auto}
.ptr.static .ptr-sticky{position:relative;top:auto;height:auto;padding-block:clamp(64px,10vw,120px)}
.ptr.static .stage-img,.ptr.static .stage .ln,.ptr.static .stage .lbl{transition:clip-path 800ms var(--ease),opacity 500ms var(--ease),stroke-dashoffset 900ms var(--ease)}
.ptr.static .stage-img img{transition:transform 900ms var(--ease)}
@media (max-width:860px){
  .ptr-grid{grid-template-columns:1fr}
  .stage{aspect-ratio:4/3.3;max-height:none}
}

/* Projekte */
.proj{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:start}
.proj-tabs{grid-column:1 / span 4;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.proj-tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:22px 0;border-bottom:1px solid var(--rule);color:var(--ink-soft);transition:color var(--t-fast)}
.proj-tab:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.proj-tab strong{font:700 var(--step-1) var(--f-display);font-stretch:108%;color:inherit}
.proj-tab span{grid-column:1/-1;font-size:.92rem}
.proj-tab .ix{font:500 .78rem var(--f-mono);align-self:center}
.proj-tab[aria-selected="true"]{color:var(--ink)}
.proj-tab[aria-selected="true"] .ix{color:var(--green-ink)}
.proj-tab:hover{color:var(--ink)}
.proj-view{grid-column:5 / -1;position:relative}
.proj-stage{position:relative;aspect-ratio:4/3;max-width:1024px;margin-left:auto;background:var(--paper-2);overflow:hidden}
.proj-stage figure{position:absolute;inset:0;margin:0;clip-path:inset(0 0 0 0);transition:clip-path 850ms var(--ease)}
.proj-stage figure.out{clip-path:inset(0 0 0 100%)}
.proj-stage figure.in-start{clip-path:inset(0 100% 0 0);transition:none}
.proj-stage img{width:100%;height:100%;object-fit:cover}
.proj-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;margin-top:16px;max-width:1024px;margin-left:auto}
.proj-meta p{color:var(--ink-soft);font-size:.97rem;max-width:56ch}
.thumbs{margin-top:clamp(48px,6vw,88px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.thumb{all:unset;box-sizing:border-box;cursor:pointer;position:relative;aspect-ratio:1;overflow:hidden;background:var(--paper-2)}
.thumb:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease),filter 300ms}
.thumb:hover img{transform:scale(1.06)}
.thumb.more{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:var(--graphite);color:var(--on-dark);font:700 1.05rem var(--f-display);text-align:center;padding:12px}
.thumb.more small{font:400 .75rem var(--f-mono);color:var(--on-dark-soft)}
@media (max-width:860px){
  .proj-tabs,.proj-view{grid-column:1 / -1}
  .proj-tabs{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;scrollbar-width:none}
  .proj-tab{border:1px solid var(--rule);padding:12px 16px;flex:0 0 auto}
  .proj-tab span{display:none}
  .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(18,21,23,.96);color:var(--on-dark);display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 12px) var(--gutter-r) calc(env(safe-area-inset-bottom,0px) + 12px) var(--gutter);opacity:0;transition:opacity 260ms var(--ease)}
.lb.show{opacity:1}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 .82rem var(--f-mono)}
.lb-fig{margin:0;display:flex;align-items:center;justify-content:center;min-height:0;position:relative}
.lb-fig img{max-height:100%;max-width:min(100%,1024px);object-fit:contain;transition:opacity 250ms}
.lb-nav{display:flex;justify-content:center;gap:8px}
.icon-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--graphite-line);background:transparent;color:var(--on-dark);cursor:pointer;border-radius:2px;transition:background var(--t-fast),border-color var(--t-fast)}
.icon-btn:hover{background:var(--graphite-2);border-color:var(--on-dark-soft)}

/* Ablauf */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);margin-bottom:clamp(56px,8vw,112px)}
.flow-step{padding:28px clamp(16px,2.5vw,36px) 32px 0;display:flex;flex-direction:column;gap:12px;position:relative}
.flow-step + .flow-step{padding-left:clamp(16px,2.5vw,36px);border-left:1px solid var(--rule)}
.flow-step .k{font:500 .78rem var(--f-mono);letter-spacing:.12em;color:var(--green-ink)}
.flow-step h3{font-size:var(--step-2);font-stretch:108%}
.flow-step p{color:var(--ink-soft);max-width:36ch}
.flow-step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--green)}
.flow-step + .flow-step::before{left:-4px}
@media (max-width:860px){
  .flow{grid-template-columns:1fr}
  .flow-step,.flow-step + .flow-step{padding:24px 0 24px 24px;border-left:1px solid var(--rule)}
  .flow-step::before,.flow-step + .flow-step::before{left:-4px;top:30px}
}

/* Planer */
.planner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#fff;border:1px solid var(--rule)}
.pl-form{padding:clamp(20px,3.5vw,48px);display:flex;flex-direction:column;gap:28px;min-width:0}
.pl-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pl-progress{display:flex;gap:6px;align-items:center;font:500 .78rem var(--f-mono);color:var(--ink-soft);letter-spacing:.06em}
.pl-progress i{display:block;width:26px;height:3px;background:var(--rule);transition:background 300ms var(--ease)}
.pl-progress i.on{background:var(--green)}
.demo-badge{font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;background:var(--paper-2);color:var(--ink-soft);border-radius:2px}
.pl-step{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;min-width:0}
.pl-step legend{font:700 var(--step-2) var(--f-display);font-stretch:108%;padding:0;margin-bottom:8px;line-height:1.1}
.pl-step .hint{color:var(--ink-soft);font-size:.92rem}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice label{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--rule);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast);border-radius:2px}
.choice label:hover{border-color:var(--ink-soft)}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice label:has(input:checked){border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.choice label:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.choice strong{font:700 1.15rem var(--f-display);font-stretch:108%}
.choice small{color:var(--ink-soft);font-size:.85rem;line-height:1.4}
.choice svg{width:52px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.5}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;cursor:pointer;font-size:.92rem;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.pills input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pills label:hover{border-color:var(--ink-soft)}
.pills label:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.pills label:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span,.group-label{font-weight:600;font-size:.92rem}
.field small{color:var(--ink-soft);font-size:.82rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 12px;border:1px solid #b9b7af;border-radius:2px;background:#fff;color:var(--ink);font:400 1rem var(--f-body);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(5,169,84,.35)}
.field.invalid input,.field.invalid textarea{border-color:#a3341d}
.field .err{color:#a3341d;font-size:.82rem;font-weight:500}
.unit{position:relative}
.unit input{padding-right:44px}
.unit::after{content:attr(data-unit);position:absolute;right:12px;top:50%;transform:translateY(-50%);font:400 .85rem var(--f-mono);color:var(--ink-soft);pointer-events:none}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pl-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--rule)}
.pl-nav .btn[disabled]{opacity:.35;pointer-events:none}
.pl-vis{background:var(--graphite);color:var(--on-dark);padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:18px;min-width:0}
.pl-vis svg{width:100%;height:auto;aspect-ratio:4/3}
.pl-vis .shape{fill:none;stroke:var(--on-dark);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:d 600ms var(--ease)}
.pl-vis .shape.acc{stroke:var(--green-light);stroke-width:2}
.pl-vis .shape.soft{stroke:var(--on-dark-soft);stroke-width:1;stroke-dasharray:4 5}
.pl-vis .shape.fill{fill:rgba(5,169,84,.08);stroke:none}
.pl-vis .vlbl{font:500 11px var(--f-mono);fill:var(--on-dark-soft);letter-spacing:.06em}
.pl-facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--graphite-line);font-size:.9rem}
.pl-facts li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--graphite-line)}
.pl-facts li span:first-child{color:var(--on-dark-soft)}
.pl-facts li span:last-child{overflow-wrap:anywhere}
.pl-note{font:400 .74rem var(--f-mono);color:var(--on-dark-soft);letter-spacing:.03em;line-height:1.5}
.summary{width:100%;min-height:310px;padding:14px;border:1px solid var(--rule);background:var(--paper);font:400 .9rem/1.55 var(--f-mono);color:var(--ink);resize:vertical;border-radius:2px}
.status{min-height:1.5em;font-size:.9rem;font-weight:500;color:var(--green-ink)}
@media (max-width:980px){.planner{grid-template-columns:1fr}.pl-vis{order:-1;padding-block:16px}.pl-vis svg{max-height:200px}.pl-facts{display:none}}
@media (max-width:560px){.row3{grid-template-columns:1fr 1fr 1fr;gap:8px}.choice{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

/* Unternehmen */
.company{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.company-text{grid-column:1 / span 6;display:flex;flex-direction:column;gap:22px}
.company-text h2{font-size:var(--step-3);font-stretch:108%}
.company-text p{color:var(--on-dark-soft);max-width:56ch}
.card-person{grid-column:8 / span 5;align-self:end;border-top:1px solid var(--graphite-line);padding-top:28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.mono-mark{width:76px;height:76px;display:grid;place-items:center;border:1px solid var(--green-light);font:700 1.5rem var(--f-display);font-stretch:118%;color:var(--green-light)}
.card-person h3{font-size:var(--step-2);font-stretch:108%}
.card-person .role{color:var(--on-dark-soft);font-size:.92rem;margin-top:4px}
.contact-lines{grid-column:1/-1;display:grid;gap:0;border-top:1px solid var(--graphite-line);margin-top:8px}
.contact-line{display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--graphite-line)}
.contact-line .k{font:500 .75rem var(--f-mono);letter-spacing:.1em;color:var(--on-dark-soft);text-transform:uppercase}
.contact-line a,.contact-line span.v{font-weight:600;text-decoration:none;overflow-wrap:anywhere;user-select:all}
.copy-btn{min-height:36px;padding:0 10px;border:1px solid var(--graphite-line);background:transparent;color:var(--on-dark-soft);font:500 .75rem var(--f-mono);cursor:pointer;border-radius:2px;transition:color var(--t-fast),border-color var(--t-fast)}
.copy-btn:hover{color:var(--on-dark);border-color:var(--on-dark-soft)}
.facts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--graphite-line)}
.facts div{padding:22px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.facts div + div{padding-left:24px;border-left:1px solid var(--graphite-line)}
.facts .k{font:500 .75rem var(--f-mono);letter-spacing:.1em;color:var(--green-light);text-transform:uppercase}
.facts p{color:var(--on-dark-soft);font-size:.95rem}
@media (max-width:860px){
  .company-text,.card-person{grid-column:1 / -1}
  .facts{grid-template-columns:1fr}
  .facts div,.facts div + div{padding:18px 0;border-left:0;border-bottom:1px solid var(--graphite-line)}
  .contact-line{grid-template-columns:70px minmax(0,1fr) auto}
}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px)}
.faq h2{font-size:var(--step-3);font-stretch:108%}
.faq-list{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item h3{font:inherit;margin:0}
.faq-q{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:1fr 32px;gap:16px;align-items:center;padding:22px 0;font:600 var(--step-1)/1.3 var(--f-display);font-stretch:104%;transition:color var(--t-fast)}
.faq-q:hover{color:var(--green-ink)}
.faq-q:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.faq-q .pm{width:32px;height:32px;position:relative;border:1px solid var(--rule);border-radius:50%}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform 250ms var(--ease)}
.faq-q .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-q[aria-expanded="true"] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 400ms var(--ease)}
.faq-a > div{overflow:hidden}
.faq-a .in{padding-bottom:24px;color:var(--ink-soft);max-width:64ch;display:grid;gap:10px}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a ul{margin:0;padding-left:1.2em}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* Kontakt */
.closing{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,5vw,80px)}
.closing h2{font-size:var(--step-4);font-stretch:112%;line-height:.95;letter-spacing:-.025em}
.closing h2 em{font-style:normal;color:var(--green-light)}
.closing-left{display:flex;flex-direction:column;gap:28px}
.cform{display:grid;gap:16px;background:var(--graphite-2);padding:clamp(20px,3vw,36px);border:1px solid var(--graphite-line)}
.cform .field > span{color:var(--on-dark)}
.cform .field input,.cform .field textarea{background:var(--graphite);color:var(--on-dark);border-color:var(--graphite-line)}
.cform .field input:focus,.cform .field textarea:focus{border-color:var(--on-dark-soft)}
.cform .field.invalid input,.cform .field.invalid textarea{border-color:#e07a5f}
.cform .field .err{color:#f0a48f}
.cform .note{font-size:.82rem;color:var(--on-dark-soft)}
.cform .status{color:var(--green-light)}
.check{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.85rem;color:var(--on-dark-soft);align-items:start}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green)}
@media (max-width:860px){.closing{grid-template-columns:1fr}}

/* Footer */
.footer{background:#171a1c;color:var(--on-dark-soft);font-size:.9rem}
.footer .wrap{padding-block:40px calc(32px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:auto 1fr auto;gap:24px 48px;align-items:start}
.footer-logo{background:var(--paper);padding:10px 14px;display:inline-flex;border-radius:2px}
.footer-logo img{height:40px;width:auto}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer a{text-decoration:none;color:var(--on-dark)}
.footer a:hover{color:var(--green-light)}
.footer .legal{display:flex;gap:20px;flex-wrap:wrap}
.footer .legal button{all:unset;cursor:pointer;color:var(--on-dark)}
.footer .legal button:hover{color:var(--green-light)}
.footer .legal button:focus-visible{outline:3px solid var(--green)}
.footer .copy{grid-column:1/-1;border-top:1px solid #2b3034;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}
@media (max-width:860px){.footer .wrap{grid-template-columns:1fr}}

/* Dialog Impressum */
dialog.legal-d{max-width:560px;width:calc(100% - 32px);border:1px solid var(--rule);padding:0;border-radius:2px;color:var(--ink);background:var(--paper)}
dialog.legal-d::backdrop{background:rgba(18,21,23,.7)}
.legal-d .in{padding:28px;display:grid;gap:14px;font-size:.95rem}
.legal-d h2{font-size:var(--step-2)}
.legal-d .row{display:flex;justify-content:space-between;align-items:center}

/* Mobile CTA-Leiste */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:8px;padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter);background:rgba(244,243,239,.96);border-top:1px solid var(--rule);backdrop-filter:blur(8px);transform:translateY(110%);transition:transform 300ms var(--ease)}
.mbar.show{transform:none}
.mbar .btn{flex:1;justify-content:center;min-height:48px;padding:0 10px}
@media (max-width:760px){.mbar{display:flex}.footer .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* Bild-Fallback (offline / Bild fehlt) */
.img-missing{background:repeating-linear-gradient(135deg,var(--paper-2) 0 10px,#dfdcd4 10px 11px)!important}
.img-missing img{opacity:0}
.img-missing::after{content:"Bild nicht geladen";position:absolute;left:12px;bottom:12px;font:400 .72rem var(--f-mono);color:var(--ink-soft)}

/* Reveal: Grundzustand sichtbar */
.rv{transition:opacity 800ms var(--ease),transform 800ms var(--ease)}
.js .rv.pre{opacity:.001;transform:translateY(24px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .js .rv.pre{opacity:1;transform:none}
}

/* ===== Ergänzungen: Zielseiten, Kurzanfrage ===== */
.lp-hero{background:var(--graphite);color:var(--on-dark);position:relative;overflow:hidden}
.lp-hero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(40px,6vw,88px)}
.lp-hero h1{font-size:clamp(2.4rem,1.5rem + 3.8vw,5rem);font-stretch:112%;font-weight:750;letter-spacing:-.022em;line-height:.98}
.lp-hero h1 em{font-style:normal;color:var(--green-light)}
.lp-hero .lead{color:#c8cdd0;max-width:40ch}
.lp-text{display:flex;flex-direction:column;gap:24px;min-width:0}
.lp-points{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--graphite-line)}
.lp-points li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--graphite-line);font-size:.98rem}
.lp-points li::before{content:"";width:12px;height:12px;margin-top:.45em;border:1.5px solid var(--green-light);transform:rotate(45deg) scale(.75)}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lp-cta .phone{font:500 .95rem var(--f-mono);color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--graphite-line);padding-bottom:2px}
.lp-fig{margin:0;position:relative;min-width:0}
.lp-fig .frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--graphite-2);max-width:1024px}
.lp-fig img{width:100%;height:100%;object-fit:cover}
.js .lp-fig img{animation:settle 1.2s var(--ease) both}
@keyframes settle{from{transform:scale(1.04)}to{transform:none}}
.lp-fig .corner{position:absolute;width:22px;height:22px;border-color:var(--green-light);border-style:solid;border-width:0;pointer-events:none}
.lp-fig .c1{top:-8px;left:-8px;border-top-width:1.5px;border-left-width:1.5px}
.lp-fig .c2{bottom:28px;right:-8px;border-bottom-width:1.5px;border-right-width:1.5px}
.lp-switch{font-size:.88rem;color:var(--on-dark-soft)}
.lp-switch a{color:var(--on-dark);font-weight:600}
@media (max-width:860px){.lp-hero .wrap{grid-template-columns:1fr;padding-block:24px 48px}.lp-fig{order:-1}.lp-fig .c1,.lp-fig .c2{display:none}}

/* Passt das? */
.fit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px)}
.fit h2{font-size:var(--step-3);font-stretch:108%}
.fit-list{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule)}
.fit-list > div{padding:20px 20px 20px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.fit-list > div:nth-child(even){padding-left:20px;border-left:1px solid var(--rule)}
.fit-list strong{font:700 1.1rem var(--f-display);font-stretch:106%}
.fit-list p{color:var(--ink-soft);font-size:.95rem}
@media (max-width:860px){.fit{grid-template-columns:1fr}}
@media (max-width:560px){.fit-list{grid-template-columns:1fr}.fit-list > div:nth-child(even){padding-left:0;border-left:0}}

/* Leistungsumfang */
.scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--graphite-line)}
.scope > div{padding:26px 28px 28px 0;display:flex;flex-direction:column;gap:10px}
.scope > div + div{padding-left:28px;border-left:1px solid var(--graphite-line)}
.scope .k{font:500 .75rem var(--f-mono);letter-spacing:.12em;color:var(--green-light);text-transform:uppercase}
.scope h3{font-size:var(--step-2);font-stretch:108%}
.scope p{color:var(--on-dark-soft);font-size:.97rem;max-width:38ch}
.scope-note{margin-top:28px;padding:16px 18px;border:1px solid var(--graphite-line);color:var(--on-dark-soft);font-size:.92rem;max-width:72ch}
.scope-note strong{color:var(--on-dark)}
@media (max-width:860px){.scope{grid-template-columns:1fr}.scope > div,.scope > div + div{padding:20px 0;border-left:0;border-bottom:1px solid var(--graphite-line)}}

/* Referenzen auf Zielseiten */
.refs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:end}
.refs .main{grid-column:1 / span 8;margin:0}
.refs .main .frame{aspect-ratio:4/3;max-width:1024px;overflow:hidden;background:var(--paper-2);position:relative}
.refs .main img{width:100%;height:100%;object-fit:cover}
.refs .side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px}
.refs .side p{color:var(--ink-soft)}
@media (max-width:860px){.refs .main,.refs .side{grid-column:1 / -1}}

/* Kurzanfrage */
.short-intro{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--paper);border-left:3px solid var(--green);font-size:.92rem;color:var(--ink-soft)}
.optional-tag{font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink);border:1px solid currentColor;padding:2px 6px;border-radius:2px;margin-left:8px;vertical-align:middle}
.pl-progress i.opt{width:14px;background:transparent;border-top:2px dotted var(--rule);height:0}
.pl-progress i.opt.on{border-color:var(--green)}
.next-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.next-steps > div{padding:14px 16px;border:1px solid var(--rule);font-size:.9rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:4px}
.next-steps strong{color:var(--ink);font-size:.95rem}
@media (max-width:560px){.next-steps{grid-template-columns:1fr}}
.btn-link{all:unset;cursor:pointer;font-weight:600;color:var(--ink);border-bottom:1px solid var(--green);padding-bottom:2px}
.btn-link:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.pl-step legend:focus{outline:none}
textarea#summary{min-height:260px}
.lp-hero h1{font-size:clamp(2.2rem,1.4rem + 3vw,4rem)}
@media (max-width:860px){.lp-fig{order:0}.lp-fig .frame{aspect-ratio:16/10}.lp-hero .wrap{padding-block:28px 48px}}

/* ===== 3D-Bauszene ===== */
.b3d{position:relative;background:#1d2124;color:var(--on-dark)}
.b3d-track{position:relative;height:640vh}
.b3d[data-variant="section"] .b3d-track{height:480vh}
@media (max-width:760px){.b3d-track{height:520vh}.b3d[data-variant="section"] .b3d-track{height:420vh}}
.b3d-sticky{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));height:calc(100svh - var(--header-h) - env(safe-area-inset-top,0px));min-height:520px;overflow:hidden;background:#1d2124}
.b3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity 260ms var(--ease)}
.b3d-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(29,33,36,.9) 0%,rgba(29,33,36,.55) 28%,rgba(29,33,36,0) 52%),
  linear-gradient(0deg,rgba(29,33,36,.92) 0%,rgba(29,33,36,0) 34%)}
.b3d-hero{position:absolute;left:0;right:0;top:0;z-index:3;padding-top:clamp(28px,7vh,90px);padding-left:max(var(--gutter),calc((100vw - var(--maxw))/2 + 16px));padding-right:var(--gutter-r);will-change:opacity,transform}
.b3d-hero .inner{max-width:640px;display:flex;flex-direction:column;gap:22px}
.b3d-hero h1{font-size:clamp(2.7rem,1.6rem + 5vw,6.6rem);font-stretch:114%;font-weight:760;letter-spacing:-.028em;line-height:.93}
.b3d-hero h1 em{font-style:normal;color:var(--green-light)}
.b3d-hero .lead{color:#c8cdd0;max-width:36ch}
.b3d-scrollhint{display:inline-flex;align-items:center;gap:10px;font:500 .74rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
.b3d-scrollhint i{width:1px;height:34px;background:linear-gradient(var(--green-light),transparent);display:block;animation:hint 1.8s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.b3d-hud{position:absolute;z-index:3;left:max(var(--gutter),calc((100vw - var(--maxw))/2 + 16px));bottom:clamp(18px,4vh,44px);width:min(560px,calc(100% - 32px));display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);transition:opacity 500ms var(--ease),transform 500ms var(--ease);pointer-events:none}
.b3d.started .b3d-hud{opacity:1;transform:none;pointer-events:auto}
.b3d[data-variant="section"] .b3d-hud{opacity:1;transform:none;pointer-events:auto}
.b3d-idx{font:500 .78rem var(--f-mono);letter-spacing:.14em;color:var(--green-light)}
.b3d-title{font:750 clamp(1.9rem,1.1rem + 2.8vw,3.6rem)/1 var(--f-display);font-stretch:112%;letter-spacing:-.02em;text-wrap:balance}
.b3d-desc{color:#c3c9cc;max-width:42ch;font-size:1.02rem}
.b3d-hud.swap .b3d-title,.b3d-hud.swap .b3d-desc,.b3d-hud.swap .b3d-idx{animation:swapin 600ms var(--ease) both}
.b3d-hud.swap .b3d-desc{animation-delay:70ms}
@keyframes swapin{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.b3d-bar{height:2px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:4px}
.b3d-bar i{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(0)}
.b3d-ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.b3d-ticks button{all:unset;cursor:pointer;font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(238,237,232,.4);padding:4px 0;transition:color 200ms}
.b3d-ticks li.on button{color:var(--on-dark-soft)}
.b3d-ticks li.now button{color:var(--green-light)}
.b3d-ticks button:hover{color:var(--on-dark)}
.b3d-ticks button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.b3d-ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.b3d-ctrl .switch{border-color:rgba(255,255,255,.2);background:rgba(29,33,36,.6);backdrop-filter:blur(6px)}
.b3d-note{position:absolute;z-index:3;right:max(var(--gutter-r),calc((100vw - var(--maxw))/2 + 16px));bottom:clamp(18px,4vh,44px);display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;font:400 .7rem var(--f-mono);letter-spacing:.06em;color:rgba(238,237,232,.55)}
.b3d-note a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--graphite-line)}
.b3d-end{position:absolute;z-index:4;right:max(var(--gutter-r),calc((100vw - var(--maxw))/2 + 16px));top:clamp(24px,8vh,90px);display:flex;flex-direction:column;align-items:flex-end;gap:12px;opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease),transform 600ms var(--ease);pointer-events:none}
.b3d-end.show{opacity:1;transform:none;pointer-events:auto}
.b3d-end p{font:700 1.2rem var(--f-display);font-stretch:108%;text-align:right;max-width:18ch}
.b3d-sechead{position:absolute;z-index:3;top:clamp(24px,6vh,64px);left:max(var(--gutter),calc((100vw - var(--maxw))/2 + 16px));display:flex;flex-direction:column;gap:12px;max-width:520px}
.b3d-sechead h2{font-size:clamp(2rem,1.2rem + 3vw,3.8rem);font-stretch:112%}
.b3d-replay{display:none}
@media (max-width:760px){
  .b3d-shade{background:linear-gradient(180deg,rgba(29,33,36,.92) 0%,rgba(29,33,36,.5) 42%,rgba(29,33,36,0) 60%),linear-gradient(0deg,rgba(29,33,36,.95) 0%,rgba(29,33,36,.6) 26%,rgba(29,33,36,0) 46%)}
  .b3d-hero{padding-top:22px}
  .b3d-hero .inner{gap:16px}
  .b3d-hero .lead{font-size:1rem}
  .b3d-ticks{display:none}
  .b3d-title{font-size:1.75rem}
  .b3d-desc{font-size:.92rem}
  .b3d-note{left:16px;right:16px;bottom:auto;top:12px;flex-direction:row;justify-content:space-between;align-items:center}
  .b3d.started .b3d-note,.b3d[data-variant="section"] .b3d-note{top:12px}
  .b3d-hero ~ .b3d-note{opacity:0;transition:opacity 300ms}
  .b3d.started .b3d-hero ~ .b3d-note{opacity:1}
  .b3d-end{left:16px;right:16px;top:44px;align-items:flex-start}
  .b3d-end p{text-align:left}
  .b3d-sechead{top:44px}
  .b3d-sechead h2{font-size:1.7rem}
  .b3d.started .b3d-sechead{opacity:0}
}
.b3d-sechead{transition:opacity 400ms}
/* statisch: reduzierte Bewegung / kein WebGL */
.b3d-static .b3d-track{height:auto}
.b3d-static .b3d-sticky{position:relative;top:0;height:min(92svh,860px)}
.b3d-static .b3d-replay{display:inline-flex}
.b3d-fallback .b3d-canvas{display:none}
.b3d-fallback .b3d-sticky{background:
  linear-gradient(rgba(5,169,84,.08) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(5,169,84,.08) 1px,transparent 1px) 0 0/40px 40px,#1d2124}
.b3d-fallback .b3d-hero{opacity:1!important;transform:none!important;visibility:visible!important}
.b3d-fallback .b3d-hud{display:none}

/* Laufband */
.marquee{overflow:hidden;background:var(--paper);border-block:1px solid var(--rule);padding-block:clamp(18px,3vw,34px)}
.marquee-track{display:flex;gap:.6em;white-space:nowrap;font:800 clamp(3rem,2rem + 6vw,8.5rem)/1 var(--f-display);font-stretch:118%;letter-spacing:-.02em;will-change:transform}
.marquee-track span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.marquee-track span:nth-child(3n+1){color:var(--ink);-webkit-text-stroke:0}
.marquee-track span:nth-child(3n+2){-webkit-text-stroke-color:var(--green)}
.marquee-track span::after{content:"·";margin-left:.6em;color:var(--green);-webkit-text-stroke:0}

/* Wort-Animation */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w > span{display:inline-block}
.eyebrow{--ln:1}
.eyebrow::before{transform:scaleX(var(--ln));transform-origin:left}
@media (max-width:760px){.b3d-hud{bottom:92px}}

/* Echtes Projektfoto am Ende der 3D-Sequenz */
.b3d-photo{position:absolute;z-index:3;margin:0;right:max(var(--gutter-r),calc((100vw - var(--maxw))/2 + 16px));bottom:calc(clamp(18px,4vh,44px) + 54px);width:min(30vw,380px);display:flex;flex-direction:column;gap:8px;pointer-events:none;
  clip-path:inset(100% 0 0 0);transform:translateY(24px);transition:clip-path 900ms var(--ease),transform 900ms var(--ease)}
.b3d-photo.show{clip-path:inset(0 0 0 0);transform:none}
.b3d-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.b3d-photo figcaption{display:flex;gap:10px;align-items:center;justify-content:flex-end;font:400 .72rem var(--f-mono);color:var(--on-dark-soft)}
.b3d[data-world="halle"] .b3d-photo [data-w="haus"],.b3d[data-world="haus"] .b3d-photo [data-w="halle"],
.b3d[data-world="halle"] .b3d-photo .cap-haus,.b3d[data-world="haus"] .b3d-photo .cap-halle{display:none}
@media (max-width:760px){.b3d-photo{display:none}}

/* Bild-Hover in Galerie */
.thumb::after{content:"";position:absolute;inset:0;border:2px solid var(--green);opacity:0;transition:opacity 200ms}
.thumb:hover::after,.thumb:focus-visible::after{opacity:1}
.lb{background:rgba(14,16,18,.985)}
@media (max-width:600px){.proj-meta{grid-template-columns:1fr}.proj-meta > span{justify-content:flex-start!important}}

/* ===== Stahlhallen-Konfigurator ===== */
.k-intro{background:var(--paper)}
.k-intro .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);align-items:end;padding-block:clamp(36px,5vw,72px) clamp(24px,3vw,40px)}
.k-intro h1{font-size:clamp(2.3rem,1.4rem + 3.6vw,4.8rem);font-stretch:112%;font-weight:760;letter-spacing:-.025em;line-height:.96;margin-top:16px}
.k-intro h1 em{font-style:normal;color:var(--green-ink)}
.k-intro-r{display:flex;flex-direction:column;gap:18px}
.k-intro .lead{font-size:var(--step-0)}
.k-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 .75rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.k-presets button{all:unset;cursor:pointer;font:600 .9rem var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink);padding:8px 14px;border:1px solid var(--rule);border-radius:999px;transition:border-color 180ms,background 180ms}
.k-presets button:hover{border-color:var(--ink);background:#fff}
.k-presets button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media (max-width:860px){.k-intro .wrap{grid-template-columns:1fr}}

.konfig{display:grid;grid-template-columns:minmax(0,1fr) min(460px,38vw);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper)}
.k-stage{position:relative;min-width:0}
.k-view{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));height:calc(100svh - var(--header-h) - env(safe-area-inset-top,0px));min-height:520px;background:#dfe3e4;overflow:hidden;cursor:grab}
.k-view.grabbing{cursor:grabbing}
.k-view canvas{display:block;width:100%;height:100%;touch-action:none}
.k-facts{position:absolute;left:16px;top:16px;display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);max-width:calc(100% - 32px)}
.k-facts div{background:rgba(244,243,239,.94);padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.k-facts span{font:500 .66rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.k-facts strong{font:700 1.05rem var(--f-display);font-stretch:106%;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-views{position:absolute;right:16px;top:16px;display:flex;background:rgba(31,35,38,.88);padding:3px;gap:3px;border-radius:2px}
.k-views button{all:unset;cursor:pointer;font:600 .82rem var(--f-body);color:var(--on-dark-soft);padding:8px 12px;border-radius:1px;transition:background 180ms,color 180ms}
.k-views button[aria-pressed="true"]{background:var(--on-dark);color:var(--graphite)}
.k-views button:hover{color:var(--on-dark)}
.k-views button:focus-visible{outline:2px solid var(--green)}
.k-drag{position:absolute;left:16px;bottom:14px;font:400 .72rem var(--f-mono);color:#555c60;letter-spacing:.04em;pointer-events:none}
.k-legal{position:absolute;right:16px;bottom:14px;font:400 .72rem var(--f-mono);color:#555c60;letter-spacing:.04em;text-align:right;pointer-events:none}
.k-no3d-msg{display:none;position:absolute;inset:auto 16px 50% 16px;text-align:center;color:var(--ink-soft)}
.k-no3d .k-no3d-msg{display:block}
.k-no3d .k-views,.k-no3d .k-drag{display:none}

.k-panel{border-left:1px solid var(--rule);background:#fff;display:flex;flex-direction:column;min-width:0}
.k-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--rule);position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));background:#fff;z-index:2}
.k-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 10px;font:600 .74rem var(--f-body);color:var(--ink-soft);text-align:center;border-bottom:3px solid transparent;transition:color 180ms,border-color 180ms;line-height:1.15}
.k-tab b{font:500 .72rem var(--f-mono);width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;transition:background 180ms,color 180ms,border-color 180ms}
.k-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--green)}
.k-tab[aria-selected="true"] b{background:var(--ink);color:#fff;border-color:var(--ink)}
.k-tab:hover{color:var(--ink)}
.k-tab:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.k-hint{margin:16px 24px 0;padding:10px 12px;background:#fff6e8;border-left:3px solid #c98a1b;font-size:.88rem;color:#5c3f06}
.k-pane{padding:24px;display:flex;flex-direction:column;gap:22px;flex:1}
.k-pane h3{font:750 var(--step-2) var(--f-display);font-stretch:108%;line-height:1.05}
.k-pane h3:focus{outline:none}
.k-field{display:flex;flex-direction:column;gap:8px}
.k-row{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.k-lbl{font-weight:600;font-size:.93rem;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.k-lbl small{display:block;font-weight:400;color:var(--ink-soft);font-size:.8rem;margin-top:2px}
.k-row .k-lbl{flex-direction:column;align-items:flex-start;gap:0}
.k-lbl output{font:600 .95rem var(--f-mono);color:var(--green-ink);font-variant-numeric:tabular-nums}
.k-range{display:flex;flex-direction:column;gap:10px}
.k-range small{color:var(--ink-soft);font-size:.8rem;margin-top:-4px}
.k-range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.k-range input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--ink) 0 0) no-repeat,var(--rule);border-radius:2px}
.k-range input[type=range]::-moz-range-track{height:4px;background:var(--rule);border-radius:2px}
.k-range input[type=range]::-moz-range-progress{height:4px;background:var(--ink)}
.k-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;background:#fff;border:2px solid var(--ink);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform 150ms}
.k-range input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#fff;border:2px solid var(--ink);border-radius:50%}
.k-range input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);border-color:var(--green)}
.k-range input[type=range]:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.k-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--rule);padding:3px;gap:3px;border-radius:2px}
.k-seg button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:10px 8px;font:600 .88rem var(--f-body);color:var(--ink-soft);border-radius:1px;transition:background 180ms,color 180ms}
.k-seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.k-seg button:hover:not([aria-pressed="true"]){background:var(--paper)}
.k-seg button:focus-visible{outline:3px solid var(--green);outline-offset:1px}
.k-stepper{display:flex;align-items:center;border:1px solid var(--rule);border-radius:2px}
.k-stepper button{all:unset;cursor:pointer;width:42px;height:40px;display:grid;place-items:center;font:500 1.2rem var(--f-mono);transition:background 150ms}
.k-stepper button:hover{background:var(--paper)}
.k-stepper button:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.k-stepper output{min-width:34px;text-align:center;font:600 1rem var(--f-mono);font-variant-numeric:tabular-nums}
.k-toggle{all:unset;cursor:pointer;flex-shrink:0;width:48px;height:28px;border-radius:999px;background:var(--rule);position:relative;transition:background 200ms}
.k-toggle i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform 220ms var(--ease)}
.k-toggle[aria-checked="true"]{background:var(--green)}
.k-toggle[aria-checked="true"] i{transform:translateX(20px)}
.k-toggle:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.k-swl{font:400 .8rem var(--f-mono);color:var(--ink-soft)}
.k-swatches{display:flex;flex-wrap:wrap;gap:10px}
.k-swatches button{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);position:relative;transition:transform 160ms}
.k-swatches button:hover{transform:scale(1.08)}
.k-swatches button[aria-checked="true"]::after{content:"";position:absolute;inset:-5px;border:2px solid var(--ink);border-radius:50%}
.k-swatches button:focus-visible{outline:3px solid var(--green);outline-offset:6px}
.k-note{font-size:.84rem;color:var(--ink-soft);line-height:1.5}
.k-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);font-size:.88rem}
.k-list li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.k-list li span:first-child{color:var(--ink-soft)}
.k-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.k-form .k-wide{grid-column:1/-1}
.k-form select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #b9b7af;border-radius:2px;background:#fff;color:var(--ink);font:400 1rem var(--f-body)}
#k-summary{min-height:200px;font-size:.8rem}
.k-actions{display:flex;flex-wrap:wrap;gap:10px}
.k-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px 24px;border-top:1px solid var(--rule);position:sticky;bottom:0;background:#fff}
.k-nav .btn[disabled]{opacity:.35;pointer-events:none}
@media (max-width:980px){
  .konfig{grid-template-columns:1fr}
  .k-view{height:min(58svh,520px);min-height:340px;top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:3}
  .k-panel{border-left:0}
  .k-tabs{position:static}
  .k-nav{bottom:0;z-index:4}
}
@media (max-width:560px){
  .k-view{height:46svh;min-height:300px}
  .k-facts div{padding:6px 9px}.k-facts strong{font-size:.88rem}.k-hide-s{display:none!important}
  .k-views{top:auto;bottom:34px;right:12px}.k-views button{padding:7px 9px;font-size:.76rem}
  .k-drag{display:none}.k-legal{left:12px;right:12px;bottom:8px;text-align:left;font-size:.64rem}
  .k-pane{padding:20px 16px}.k-nav{padding:12px 16px}
  .k-tab{font-size:.66rem}
  .k-form{grid-template-columns:1fr}
}
.nav a.btn,.nav a.btn:hover,.nav a.btn[aria-current]{color:#fff}

/* ===== Hausideen-Check ===== */
.hc-sec{background:var(--paper)}
.hc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:start}
.hc-view{position:sticky;top:calc(var(--header-h) + 24px);height:min(72svh,680px);min-height:420px;background:#e7e6e0;border:1px solid var(--rule);overflow:hidden;cursor:grab}
.hc-view canvas{display:block;width:100%;height:100%;touch-action:none}
.hc-tag{position:absolute;left:12px;bottom:12px;right:12px;font:400 .72rem var(--f-mono);color:#555c60;letter-spacing:.03em;pointer-events:none}
.hc-drag{position:absolute;right:12px;top:12px;font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#555c60;background:rgba(244,243,239,.85);padding:6px 10px;pointer-events:none}
.hc-no3d .hc-view{display:none}
.hc-panel{display:flex;flex-direction:column;gap:24px;min-width:0}
.hc-q{display:flex;flex-direction:column;gap:10px}
.hc-ql{font:500 .74rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hc-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.hc-opts button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border:1px solid var(--rule);background:#fff;border-radius:2px;transition:border-color 180ms,box-shadow 180ms,transform 180ms;min-width:0}
.hc-opts button svg{width:40px;height:27px;fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-linejoin:round;margin-bottom:4px;transition:stroke 180ms}
.hc-opts button strong{font:700 .95rem var(--f-display);font-stretch:104%;line-height:1.15}
.hc-opts button small{font-size:.76rem;color:var(--ink-soft);line-height:1.3}
.hc-opts button:hover{border-color:var(--ink-soft);transform:translateY(-1px)}
.hc-opts button[aria-checked="true"],.hc-opts button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hc-opts button[aria-checked="true"] svg,.hc-opts button[aria-pressed="true"] svg{stroke:var(--green-ink)}
.hc-opts button:disabled{opacity:.4;cursor:not-allowed;transform:none}
.hc-opts button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.hc-result{padding:22px;background:var(--graphite);color:var(--on-dark);display:flex;flex-direction:column;gap:14px}
.hc-result .eyebrow{color:var(--green-light)}
.hc-profile{list-style:none;margin:0;padding:0;border-top:1px solid var(--graphite-line);font-size:.9rem}
.hc-profile li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--graphite-line)}
.hc-profile li span:first-child{color:var(--on-dark-soft)}
.hc-note{font-size:.82rem;color:var(--on-dark-soft)}
@media (max-width:980px){.hc{grid-template-columns:1fr}.hc-view{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));height:40svh;min-height:280px;z-index:3}}
@media (max-width:420px){.hc-opts{grid-template-columns:1fr 1fr}}
.hc-opts button strong{hyphens:auto;overflow-wrap:anywhere;max-width:100%}
@media (max-width:560px){.hc-opts{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important;gap:6px}.hc-opts button{padding:10px}.hc-opts button strong{font-size:.84rem}.hc-opts button small{display:none}.hc-opts button svg{width:32px;height:22px}}

/* ===== Logo & Logo-Motion ===== */
.eslogo{display:block;width:auto;height:100%;aspect-ratio:2172/724;overflow:visible}
.eslogo image{transform-box:fill-box}
.eslogo-trace{stroke-dasharray:1;stroke-dashoffset:1}
.eslogo-mesh path{stroke-dasharray:1;stroke-dashoffset:1}
.eslogo-es{transform:translateY(160px)}
.eslogo-co{transform:translateY(120px)}
.eslogo.play .eslogo-trace{animation:esTrace 1.1s cubic-bezier(.65,0,.25,1) forwards}
.eslogo.play .eslogo-mesh path{animation:esTrace .5s cubic-bezier(.3,0,.2,1) forwards;animation-delay:calc(.45s + var(--i) * 28ms)}
.eslogo.play .eslogo-es{animation:esUp .7s cubic-bezier(.2,.8,.2,1) .7s forwards}
.eslogo.play .eslogo-co{animation:esUp .7s cubic-bezier(.2,.8,.2,1) .85s forwards}
.eslogo.replay .eslogo-trace{animation:esTrace .7s cubic-bezier(.65,0,.25,1) forwards}
.eslogo.replay .eslogo-mesh path{stroke-dashoffset:0}
.eslogo.replay .eslogo-es,.eslogo.replay .eslogo-co{transform:none}
.eslogo.done .eslogo-trace{stroke-dashoffset:0}
.eslogo.done .eslogo-mesh path{stroke-dashoffset:0}
.eslogo.done .eslogo-es,.eslogo.done .eslogo-co{transform:none}
.eslogo.scrub *{animation:none!important}
@keyframes esTrace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes esUp{to{transform:none}}
.logo .eslogo{height:44px}
@media (max-width:560px){.logo .eslogo{height:38px}}
.logo{position:relative}
.logo:focus-visible{outline:3px solid var(--green);outline-offset:4px}

/* Logo-Finale vor dem Footer */
.logo-finale{background:var(--paper);border-top:1px solid var(--rule);overflow:hidden}
.logo-finale .wrap{position:relative;padding-block:clamp(56px,9vw,130px) clamp(40px,6vw,80px);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.lf-stage{position:relative;width:min(1080px,100%)}
.lf-stage .eslogo{width:100%;height:auto}
.eslogo-ext{position:absolute;left:99.2%;top:calc(100% * 250 / 724);height:calc(100% * 44 / 724);width:100vw;background:#05a954;transform-origin:left;transform:scaleX(0)}
.eslogo-ext.play{animation:esExt 1s cubic-bezier(.2,.7,.2,1) 1s forwards}
@keyframes esExt{to{transform:scaleX(1)}}
.lf-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;align-items:end}
.lf-row p{font:500 clamp(1.1rem,.9rem + .8vw,1.6rem)/1.3 var(--f-display);font-stretch:106%;max-width:30ch}
.lf-row .mono{font-size:.8rem;color:var(--ink-soft);letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.eslogo-ext{transform:none}}
.footer-logo{justify-self:start;width:max-content}
.footer-logo img{width:150px;height:auto}
.logo .eslogo{height:50px}
@media (max-width:560px){.logo .eslogo{height:40px}}
.eslogo-ext{left:99.1%;top:calc(100% * 251 / 724);height:calc(100% * 42 / 724)}

/* ===== Karte ===== */
.map-card{grid-column:1/-1;margin-top:28px;display:flex;flex-direction:column;gap:14px}
.map-h{font:750 var(--step-2) var(--f-display);font-stretch:108%;color:var(--on-dark)}
.map-frame{position:relative;aspect-ratio:4/3;max-height:440px;width:100%;border-radius:10px;overflow:hidden;background:
  linear-gradient(28deg,transparent 46%,#cfd8dd 46.5%,#cfd8dd 49%,transparent 49.5%),
  linear-gradient(-62deg,transparent 58%,#cfd8dd 58.5%,#cfd8dd 60.5%,transparent 61%),
  linear-gradient(90deg,transparent 30%,#e3e8ea 30.4%,#e3e8ea 31.6%,transparent 32%),
  radial-gradient(circle at 25% 30%,#d6ecd9 0 18%,transparent 18.5%),
  radial-gradient(circle at 80% 75%,#d6ecd9 0 14%,transparent 14.5%),#f1f3f1}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.map-open{position:absolute;z-index:3;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1a73e8;font:600 .95rem var(--f-body);padding:10px 14px;border-radius:4px;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.map-open:hover{background:#f3f6fb}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px;z-index:1}
.map-pin{width:40px;height:54px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));animation:pin 2.4s var(--ease) infinite}
@keyframes pin{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.map-ph small{max-width:30ch;color:#3e4447;font-size:.78rem;background:rgba(255,255,255,.85);padding:4px 8px;border-radius:3px}
.map-card.loaded .map-ph{display:none}
.map-addr a{color:var(--on-dark);font-size:1.15rem;text-decoration:none;border-bottom:1px solid var(--graphite-line)}
.map-addr a:hover{border-color:var(--green-light)}
.lf-row .mono a,.footer p a,.menu-contact a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.lf-row .mono a:hover,.footer p a:hover{border-bottom-color:currentColor}
.footer .wrap{grid-template-columns:1fr auto}
@media (max-width:860px){.footer .wrap{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.map-pin{animation:none}}

/* ===== Tiefbau ===== */
.tag.sym{color:#8a5a12;border-color:currentColor}
.dark .tag.sym{color:#e5b25d}
.tb-teaser{background:var(--paper);border-top:1px solid var(--rule)}
.tb-teaser .wrap{padding-block:22px}
.tb-teaser-link{display:flex;align-items:center;gap:20px;text-decoration:none;color:var(--ink);padding:12px 16px;border:1px solid var(--rule);background:#fff;transition:border-color 200ms,transform 200ms var(--ease)}
.tb-teaser-link:hover{border-color:var(--ink);transform:translateY(-2px)}
.tb-thumbs{display:flex;flex-shrink:0}
.tb-thumbs img{width:64px;height:48px;object-fit:cover;border:2px solid #fff;margin-left:-14px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tb-thumbs img:first-child{margin-left:0}
.tb-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tb-txt .eyebrow{font-size:.68rem}
.tb-txt strong{font:750 1.25rem var(--f-display);font-stretch:108%}
.tb-txt small{color:var(--ink-soft);font-size:.88rem}
.tb-arr{margin-left:auto;font-size:1.4rem;color:var(--green-ink);transition:transform 200ms}
.tb-teaser-link:hover .tb-arr{transform:translateX(4px)}
@media (max-width:520px){.tb-thumbs img{width:48px;height:36px}.tb-txt strong{font-size:1.1rem}}
.footer nav a.ft-tb{color:var(--green-light)}
.tb-svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.tb-svc{display:flex;flex-direction:column;gap:10px;min-width:0}
.tb-svc figure{margin:0 0 8px}
.tb-imgbtn{all:unset;cursor:zoom-in;display:block;aspect-ratio:3/2;overflow:hidden;width:100%;background:var(--paper-2)}
.tb-imgbtn img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.tb-imgbtn:hover img{transform:scale(1.04)}
.tb-imgbtn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.tb-svc figcaption{margin-top:8px}
.tb-svc .k{font:500 .74rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink)}
.tb-svc h3{font-size:var(--step-2);font-stretch:108%}
.tb-svc p{color:var(--ink-soft);max-width:40ch}
@media (max-width:860px){.tb-svcs{grid-template-columns:1fr}}
.tb-gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.tb-g{all:unset;box-sizing:border-box;cursor:zoom-in;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--graphite-2)}
.tb-g img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.tb-g:hover img{transform:scale(1.05)}
.tb-g span{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font:600 .85rem var(--f-body)}
.tb-g:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.tb-g0,.tb-g1,.tb-g2{grid-column:span 2}.tb-g3,.tb-g4{grid-column:span 3}
.tb-g0{grid-column:span 4;grid-row:span 2;aspect-ratio:auto}
@media (max-width:860px){.tb-gal{grid-template-columns:1fr 1fr}.tb-g0,.tb-g1,.tb-g2,.tb-g3,.tb-g4{grid-column:span 1;grid-row:auto;aspect-ratio:3/2}.tb-g0{grid-column:span 2}}
.lp-fig figcaption .tag.sym{color:#e5b25d}
.tb-home .tbh-h{font-size:clamp(2.2rem,1.4rem + 3vw,4rem);font-stretch:112%;font-weight:750;letter-spacing:-.022em;line-height:.98}
.tb-home .tbh-h em{font-style:normal;color:var(--green-light)}
.tb-heroimg{cursor:zoom-in;width:100%;height:100%}
.tb-home-2{background:var(--paper)}
.tb-gal2{margin-top:clamp(28px,4vw,48px);grid-template-columns:1fr 1fr}
.tb-gal2 .tb-g0,.tb-gal2 .tb-g1{grid-column:span 1;grid-row:auto;aspect-ratio:3/2}
.tb-home-2 .tb-g span{font-size:.92rem}
@media (max-width:860px){.tb-gal2{grid-template-columns:1fr}.tb-gal2 .tb-g0{grid-column:span 1}}
.tb-gal2{grid-template-columns:1fr!important}
.tb-gal2 .tb-g0{aspect-ratio:21/9!important}
@media (max-width:860px){.tb-gal2 .tb-g0{aspect-ratio:3/2!important}}

/* ===== Ansprechpartner-Foto ===== */
.person-photo{position:relative;margin:18px 0 0;max-width:440px}
.pp-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#9aa3a8}
.pp-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform 1.2s var(--ease)}
.person-photo:hover .pp-frame img{transform:scale(1.025)}
.pp-frame::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(transparent,rgba(31,35,38,.82));pointer-events:none}
.person-photo figcaption{position:absolute;left:22px;right:22px;bottom:20px;display:flex;flex-direction:column;gap:4px;z-index:2}
.person-photo figcaption strong{font:750 1.5rem var(--f-display);font-stretch:108%;color:#fff}
.person-photo figcaption span{font:500 .74rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green-light)}
.pp-c{position:absolute;width:30px;height:30px;border-color:var(--green-light);border-style:solid;border-width:0;pointer-events:none}
.pp-c1{top:-10px;left:-10px;border-top-width:2px;border-left-width:2px}
.pp-c2{bottom:-10px;right:-10px;border-bottom-width:2px;border-right-width:2px}
.company-text .person-photo{align-self:flex-start}
@media (max-width:860px){.person-photo{max-width:none;margin-inline:10px}}
.pp-mini{display:flex;align-items:center;gap:18px}
.pp-mini img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--green-light);flex-shrink:0}

/* ===== Firmensitz ===== */
.hq{position:relative;display:grid;grid-template-columns:1fr;margin-bottom:6px;padding-bottom:28px}
.hq button{all:unset;cursor:zoom-in;display:block;overflow:hidden;position:relative}
.hq button:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.hq img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.hq button:hover img{transform:scale(1.035)}
.hq .hq-main{aspect-ratio:4/3;border-radius:10px}
.hq .hq-side{position:absolute;right:-6px;bottom:0;width:38%;aspect-ratio:4/3;border-radius:8px;border:3px solid var(--graphite);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.hq-tag{position:absolute;left:14px;top:14px;font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(31,35,38,.75);padding:6px 10px;border-left:3px solid var(--green-light);pointer-events:none}
@media (max-width:560px){.hq .hq-side{width:44%;right:-4px}}
.nav-veil{position:fixed;inset:0;z-index:45;background:var(--paper);opacity:0;pointer-events:none;transition:opacity 170ms ease}
.nav-veil.on{opacity:1}
@media (prefers-reduced-motion:reduce){.nav-veil{display:none}}

.btn-green:hover{--bg:#05a954;filter:brightness(1.08)}
.lp-hero .eyebrow,.b3d .eyebrow{color:var(--green-light)}

/* Feine Beschriftungen auf dunklem Grund: Logo-Grün */
.dark .eyebrow,.lp-hero .eyebrow,.b3d .eyebrow,.b3d-idx,.b3d-ticks li.now button{color:#05a954}

/* Mehr Ruhe hinter dem Hero-Text */
.b3d .b3d-shade{background:
  linear-gradient(90deg,rgba(29,33,36,.95) 0%,rgba(29,33,36,.82) 30%,rgba(29,33,36,.35) 50%,rgba(29,33,36,0) 62%),
  linear-gradient(0deg,rgba(29,33,36,.92) 0%,rgba(29,33,36,0) 34%)}
@media (max-width:760px){.b3d .b3d-shade{background:linear-gradient(180deg,rgba(29,33,36,.94) 0%,rgba(29,33,36,.7) 45%,rgba(29,33,36,0) 62%),linear-gradient(0deg,rgba(29,33,36,.95) 0%,rgba(29,33,36,.6) 26%,rgba(29,33,36,0) 46%)}}

/* ===== Handy: 3D-Szene spielt automatisch, Inhalte immer sichtbar ===== */
.b3d-auto .b3d-track{height:auto}
.b3d-auto[data-variant="hero"] .b3d-sticky{position:relative;top:0;height:auto;min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:flex-end}
.b3d-auto[data-variant="hero"] .b3d-hero{position:relative;padding-bottom:32px;padding-top:min(38svh,300px)}
.b3d-auto[data-variant="hero"] .b3d-hud,.b3d-auto[data-variant="hero"] .b3d-end{display:none}
.b3d-auto[data-variant="hero"] .b3d-shade{background:linear-gradient(180deg,rgba(29,33,36,.15) 0%,rgba(29,33,36,.55) 34%,rgba(29,33,36,.92) 58%,rgba(29,33,36,.97) 100%)}
.b3d-auto[data-variant="hero"] .b3d-note{top:12px;bottom:auto}
.b3d-auto[data-variant="section"] .b3d-sticky{position:relative;top:0;height:min(88svh,760px)}
.b3d-auto .b3d-replay{display:inline-flex}

/* ================= Wandaufbau Außenwand ================= */
.wa{position:relative;overflow:hidden;background:radial-gradient(120% 80% at 70% 30%,#2b3135 0%,var(--graphite) 60%)}
.wa .sec-head h2 em{font-style:normal;color:var(--green-light)}
.wa-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(28px,4vw,56px);align-items:stretch}
.wa-stage{position:relative;min-height:560px;aspect-ratio:1/1;max-height:720px;border:1px solid var(--graphite-line);background:
  linear-gradient(var(--graphite-line) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,var(--graphite-line) 1px,transparent 1px) 0 0/40px 40px,#22272a;background-blend-mode:normal;overflow:hidden}
.wa-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 55% 45%,rgba(34,39,42,0) 0%,rgba(34,39,42,.75) 70%,#22272a 100%);pointer-events:none}
.wa-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.wa-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.wa-pin{all:unset;box-sizing:border-box;position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:8px;margin:-14px 0 0 -14px;white-space:nowrap;will-change:transform}
.wa-pin i{font:500 .72rem/1 var(--f-mono);font-style:normal;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(31,35,38,.82);color:var(--on-dark);border:1px solid rgba(238,237,232,.35);backdrop-filter:blur(4px);transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.wa-pin span{font:500 .78rem var(--f-mono);letter-spacing:.02em;color:var(--on-dark);background:rgba(31,35,38,.72);padding:4px 8px;opacity:0;transform:translateX(-4px);transition:opacity 260ms var(--ease),transform 260ms var(--ease);pointer-events:none}
.wa-pin.hv span{opacity:.95;transform:none}
.wa-pin.hv i{border-color:var(--on-dark)}
.wa-pin:hover i,.wa-pin.on i{background:var(--green);border-color:var(--green);color:#0d1a12}
.wa-pin.on span{opacity:1!important;transform:none;background:var(--green);color:#0d1a12}
.wa-tag{position:absolute;left:0;top:0;font:500 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);translate:-50% -50%;white-space:nowrap}
.wa-tdim{color:var(--green-light);font-size:.82rem;letter-spacing:.04em;text-transform:none;translate:-100% -50%;background:rgba(31,35,38,.7);padding:3px 6px}
.wa-ctrl{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.wa-ctrl .btn{min-height:44px}
.wa-rl{display:flex;align-items:center;gap:10px;color:var(--on-dark-soft);font-size:.72rem;flex:1;min-width:180px;max-width:320px}
.wa-range{flex:1;accent-color:var(--green);height:28px}
.wa-note{position:absolute;top:14px;left:16px;z-index:3;margin:0;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-soft)}
.wa-panel{display:flex;flex-direction:column;gap:20px}
.wa-scale{padding:18px;border:1px solid var(--graphite-line);background:rgba(42,47,51,.6)}
.wa-bar{display:flex;height:46px;gap:2px}
.wa-seg{all:unset;box-sizing:border-box;min-width:7px;flex-basis:0;cursor:pointer;background:var(--c);position:relative;transition:transform var(--t-fast) var(--ease),filter var(--t-fast)}
.wa-seg[style*="#59636a"]{background:repeating-linear-gradient(135deg,#59636a 0 4px,#3b4247 4px 8px)}
.wa-seg:hover{filter:brightness(1.12)}
.wa-seg.on{transform:translateY(-6px);box-shadow:0 0 0 2px var(--green)}
.wa-has-sel .wa-seg:not(.on){filter:saturate(.4) brightness(.7)}
.wa-bar-l{display:flex;justify-content:space-between;margin-top:10px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-soft)}
.wa-bar-l span:nth-child(2){color:var(--green-light);letter-spacing:.02em;text-transform:none}
.wa-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--graphite-line)}
.wa-item{border-bottom:1px solid var(--graphite-line)}
.wa-btn{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px;padding:15px 4px;color:var(--on-dark-soft);transition:color var(--t-fast)}
.wa-btn:hover,.wa-item.on .wa-btn{color:var(--on-dark)}
.wa-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wa-n{font:500 .74rem var(--f-mono);color:var(--on-dark-soft)}
.wa-item.on .wa-n{color:var(--green-light)}
.wa-sw{width:14px;height:14px;background:var(--c);border-radius:2px}
.wa-name{font:600 1.02rem/1.25 var(--f-body)}
.wa-d{font:500 .9rem var(--f-mono);color:var(--on-dark)}
.wa-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows 360ms var(--ease)}
.wa-more>div{overflow:hidden;padding-left:calc(14px + 14px + 1.4em)}
.wa-item.on .wa-more{grid-template-rows:1fr}
.wa-more .wa-spec{display:inline-block;font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-light);margin-bottom:6px}
.wa-more p{margin:0 0 16px;color:var(--on-dark-soft);font-size:.95rem;max-width:46ch}
.wa-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--graphite-line);border:1px solid var(--graphite-line);margin-top:clamp(28px,4vw,56px)}
.wa-facts>div{background:var(--graphite);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.wa-facts strong{font:700 clamp(1.7rem,1.2rem + 1.6vw,2.6rem)/1 var(--f-display);color:var(--on-dark);letter-spacing:-.01em}
.wa-facts strong small{font-size:.5em;color:var(--green-light);font-weight:600}
.wa-facts span{color:var(--on-dark-soft);font-size:.9rem;line-height:1.45}
.wa-photos-head{display:grid;grid-template-columns:auto 1fr;gap:12px 32px;align-items:baseline;margin-top:clamp(36px,5vw,72px)}
.wa-photos-head p:last-child{margin:0;color:var(--on-dark-soft);max-width:62ch}
.wa-photos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:10px;margin-top:20px}
.wa-ph{all:unset;box-sizing:border-box;position:relative;cursor:zoom-in;overflow:hidden;background:var(--graphite-2);aspect-ratio:4/3}
.wa-ph0{grid-row:span 2;aspect-ratio:auto}
.wa-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms var(--ease)}
.wa-ph:hover img{transform:scale(1.04)}
.wa-ph span{position:absolute;left:0;bottom:0;padding:6px 10px;font:500 .72rem var(--f-mono);letter-spacing:.04em;color:var(--on-dark);background:rgba(31,35,38,.78)}
.wa-ph:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wa-src{margin:22px 0 0;font-size:.82rem;color:var(--on-dark-soft);max-width:90ch}
.wa-nogl .wa-stage{background:url(../img/wand/musterwand-schnitt-sm.webp) center/cover}
.wa-nogl .wa-ctrl,.wa-nogl .wa-note{display:none}
@media (max-width:1100px){.wa-facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .wa-grid{grid-template-columns:1fr}
  .wa-stage{min-height:0;aspect-ratio:auto;height:min(118vw,600px);margin:0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter));border-left:0;border-right:0}
  .wa-pin span{font-size:.7rem}
  .wa-ctrl{left:12px;right:12px;bottom:12px;gap:10px}
  .wa-rl{min-width:0;max-width:none}
  .wa-photos{grid-template-columns:1fr 1fr}
  .wa-ph0{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .wa-photos-head{grid-template-columns:1fr}
  .wa-facts>div{padding:18px 14px}
}
.wa-pin.flip{flex-direction:row-reverse}
.wa-pin.flip span{transform:translateX(4px)}
.wa-pin.flip{translate:calc(-100% + 28px) 0}
.wa-pin{transition:opacity 300ms var(--ease)}
.wa-labels:not(.wa-open) .wa-pin:not(.on){opacity:0;pointer-events:none}
@media (max-width:860px){.wa-tdim{display:none}}

/* ---- Wandaufbau: Zoom Haus → Außenwand ---- */
.wz{display:flex;flex-direction:column;gap:14px;min-width:0}
.wz-frame{position:relative;aspect-ratio:3/2;overflow:hidden;background:#fff;border-radius:2px;box-shadow:0 30px 80px -40px rgba(0,0,0,.6);isolation:isolate}
.wz-house,.wz-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform,opacity}
.wz-house{transform-origin:50% 50%;transform:none;opacity:1;
  transition:transform 1500ms cubic-bezier(.6,0,.25,1) 150ms,opacity 500ms ease 0ms,filter 600ms ease}
.wz[data-state="wall"] .wz-house{transform:scale(3.4) translate(calc((50 - var(--px)) * 1%),calc((50 - var(--py)) * 1%));opacity:0;filter:blur(2px);
  transition:transform 1700ms cubic-bezier(.65,0,.3,1),opacity 650ms ease 1050ms,filter 500ms ease 1000ms}
.wz-wall{opacity:0;transform:scale(1.22);transition:opacity 400ms ease,transform 600ms ease}
.wz[data-state="wall"] .wz-wall{opacity:1;transform:none;transition:opacity 700ms ease 1050ms,transform 1500ms cubic-bezier(.2,.7,.2,1) 1000ms}
.wz-target{all:unset;box-sizing:border-box;position:absolute;z-index:3;cursor:pointer;translate:calc(-100% + 11px) -50%;display:flex;align-items:center;gap:10px;transition:opacity 300ms ease}
.wz-target i{width:22px;height:22px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(5,169,84,.6);animation:wzPulse 1.6s ease-out infinite;flex:none;border:3px solid #fff}
.wz-target span{font:600 .8rem var(--f-body);background:var(--graphite);color:#fff;padding:6px 10px;white-space:nowrap;order:-1}
@keyframes wzPulse{0%{box-shadow:0 0 0 0 rgba(5,169,84,.55)}100%{box-shadow:0 0 0 18px rgba(5,169,84,0)}}
.wz[data-state="wall"] .wz-target{opacity:0;pointer-events:none}
.wz-dots{position:absolute;inset:0;z-index:2;pointer-events:none}
.wz-dot{all:unset;box-sizing:border-box;position:absolute;translate:-50% -50%;pointer-events:none;cursor:pointer;opacity:0;scale:.4;transition:opacity 300ms ease,scale 300ms ease}
.wz[data-state="wall"] .wz-dot{opacity:1;scale:1;pointer-events:auto;transition:opacity 400ms ease calc(2200ms + var(--d)),scale 500ms cubic-bezier(.3,1.6,.5,1) calc(2200ms + var(--d))}
.wz-dot i{font:600 .74rem/1 var(--f-mono);font-style:normal;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(28,32,35,.88);color:#fff;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:background 180ms,transform 180ms}
.wz-dot:hover i{transform:scale(1.12)}
.wz-dot.on i{background:var(--green);color:#06210f;transform:scale(1.18)}
.wz-dot:focus-visible i{outline:2px solid var(--green);outline-offset:3px}
.wa-has-sel .wz-dot:not(.on) i{opacity:.55}
.wz-cap{position:absolute;z-index:3;left:12px;bottom:12px;margin:0;max-width:calc(100% - 24px);background:var(--graphite);color:#fff;padding:9px 12px;font:600 .9rem/1.3 var(--f-body);opacity:0;translate:0 8px;transition:opacity 250ms ease,translate 250ms ease;pointer-events:none}
.wz-cap.show{opacity:1;translate:0 0}
.wz-cap b{font:500 .78rem var(--f-mono);color:var(--green-light);margin-right:6px}
.wz-cap span{font:500 .82rem var(--f-mono);color:var(--on-dark-soft);margin-left:6px}
.wz-note{position:absolute;z-index:3;right:10px;top:8px;font-size:.66rem;letter-spacing:.06em;color:#8a9196}
.wz-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.wz-seg{display:inline-flex;border:1px solid var(--graphite-line);padding:3px;gap:3px}
.wz-seg button{all:unset;cursor:pointer;padding:9px 16px;font:600 .9rem var(--f-body);color:var(--on-dark-soft);transition:background 180ms,color 180ms}
.wz-seg button[aria-pressed="true"]{background:var(--green);color:#06210f}
.wz-seg button:focus-visible,.wz-replay:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wz-replay{all:unset;cursor:pointer;font:500 .8rem var(--f-mono);letter-spacing:.04em;color:var(--on-dark-soft);text-decoration:underline;text-underline-offset:4px}
.wz-replay:hover{color:var(--on-dark)}
@media (max-width:860px){
  .wz-frame{margin:0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter));border-radius:0}
  .wz-dot i{width:26px;height:26px;font-size:.66rem}
  .wz-target span{font-size:.72rem;padding:5px 8px}
  .wz-cap{font-size:.82rem;left:8px;bottom:8px}
}
@media (prefers-reduced-motion:reduce){.wz-house,.wz-wall,.wz-dot{transition-duration:1ms!important;transition-delay:0ms!important}.wz-target i{animation:none}}
.wa-bar{flex-direction:row-reverse}

/* ---- Musterwand-Galerie (Studiofotos) ---- */
.mw{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);margin-top:22px;align-items:stretch}
.mw-stage{position:relative;aspect-ratio:4/3;background:#f2f1ed;overflow:hidden;border-radius:2px;box-shadow:0 30px 80px -40px rgba(0,0,0,.65)}
.mw-img{all:unset;position:absolute;inset:0;cursor:zoom-in;opacity:0;transform:scale(1.03);transition:opacity 700ms ease,transform 1200ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
.mw-img.on{opacity:1;transform:none;pointer-events:auto}
.mw-img img{width:100%;height:100%;object-fit:cover;display:block}
.mw-img:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.mw-zoom{position:absolute;right:12px;bottom:12px;font:500 .7rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#4c5459;background:rgba(255,255,255,.85);padding:6px 10px;pointer-events:none;display:flex;align-items:center;gap:6px}
.mw-zoom::before{content:"";width:10px;height:10px;border:1.5px solid currentColor;border-radius:50%;box-shadow:4px 4px 0 -3px currentColor}
.mw-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.mw-n{margin:0;font-size:.78rem;color:var(--on-dark-soft);letter-spacing:.08em}
.mw-n b{color:var(--green-light);font-weight:500}
.mw-t{font:700 var(--step-2)/1.05 var(--f-display);margin:0;color:var(--on-dark)}
.mw-d{margin:0;color:var(--on-dark-soft);max-width:40ch;min-height:3em}
.mw-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:16px}
.mw-th{all:unset;box-sizing:border-box;cursor:pointer;position:relative;background:#f2f1ed;aspect-ratio:4/3;overflow:hidden;outline:2px solid transparent;outline-offset:2px;transition:outline-color 200ms}
.mw-th img{width:100%;height:100%;object-fit:cover;display:block;opacity:.7;transition:opacity 200ms,transform 500ms var(--ease)}
.mw-th:hover img{opacity:1;transform:scale(1.04)}
.mw-th.on{outline-color:var(--green)}
.mw-th.on img{opacity:1}
.mw-th span{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;font:600 .72rem var(--f-body);color:#fff;background:linear-gradient(transparent,rgba(28,32,35,.75))}
.mw-th:focus-visible{outline-color:var(--green)}
.mw-prog{height:2px;background:var(--graphite-line);margin-top:6px;overflow:hidden}
.mw-prog i{display:block;height:100%;width:0;background:var(--green)}
.mw-prog i.run{animation:mwProg 5s linear forwards}
@keyframes mwProg{to{width:100%}}
@media (max-width:860px){
  .mw{grid-template-columns:1fr;gap:14px}
  .mw-stage{margin:0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter));border-radius:0}
  .mw-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding:4px 2px 6px;margin:0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter-r);scrollbar-width:none;order:-1}
  .mw-thumbs::-webkit-scrollbar{display:none}
  .mw-th{flex:0 0 31%;scroll-snap-align:start}
  .mw-d{min-height:0}
}

/* ===== Handy: alles sichtbar & alle Reiter direkt erreichbar ===== */
.tabbar{display:none}
@media (max-width:980px){
  html{scroll-padding-top:calc(var(--header-h) + 58px)}
  .tabbar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 var(--gutter-r) 10px var(--gutter);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar a{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;font:600 .88rem var(--f-body);color:var(--ink-soft);text-decoration:none;background:rgba(255,255,255,.5);transition:background 180ms,color 180ms,border-color 180ms;white-space:nowrap}
  .tabbar a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .tabbar a.tb-cta{background:var(--green);border-color:var(--green);color:#06210f}
  .header .wrap{height:64px}
}
/* 3D-Bauablauf: Steuerung auf dem Handy zeigen */
@media (max-width:760px){
  .b3d-ticks{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding-bottom:2px}
  .b3d-ticks::-webkit-scrollbar{display:none}
  .b3d-ticks li{flex:0 0 auto}
  .b3d-ticks button{border:1px solid rgba(238,237,232,.22);border-radius:999px;padding:7px 11px;font-size:.66rem}
  .b3d-ticks li.now button{border-color:var(--green);background:rgba(5,169,84,.14)}
  .b3d-photo{display:flex;width:112px;right:12px;bottom:auto;top:44px;gap:4px}
  .b3d-photo figcaption{font-size:.56rem;justify-content:flex-start;flex-wrap:wrap;gap:4px}
}
.b3d-auto[data-variant="hero"] .b3d-hud{display:flex;position:relative;order:-1;inset:auto;margin:min(34svh,270px) 0 0;padding:0 var(--gutter-r) 0 var(--gutter);z-index:4;gap:8px}
.b3d-auto[data-variant="hero"] .b3d-hero{padding-top:18px}
.b3d-auto[data-variant="hero"] .b3d-title{font-size:1.35rem}
.b3d-auto[data-variant="hero"] .b3d-desc{font-size:.88rem}
.b3d-auto[data-variant="hero"] .b3d-photo{display:none}
/* Projekt-Reiter, Formular-Übersicht, Hausideen-Details, Konfigurator-Werte */
@media (max-width:860px){.proj-tab span{display:inline;font-size:.8rem}}
@media (max-width:980px){.pl-facts{display:grid;margin-top:12px}}
@media (max-width:560px){.hc-opts button small{display:block;font-size:.68rem;line-height:1.25}}
@media (max-width:700px){.k-hide-s{display:flex!important}.k-drag{display:block;font-size:.66rem}}
.b3d-auto .b3d-hud{opacity:1;transform:none;pointer-events:auto}.b3d-auto[data-variant="hero"] .b3d-hud{width:auto}
.b3d-auto .b3d-hero ~ .b3d-note{opacity:1}
.b3d-auto[data-variant="hero"] .b3d-hud{margin-top:min(42svh,340px);gap:6px}
.b3d-auto[data-variant="hero"] .b3d-ctrl{flex-wrap:nowrap;gap:8px}
.b3d-auto[data-variant="hero"] .b3d-ctrl .switch button{padding:8px 12px;font-size:.84rem}
.b3d-auto[data-variant="hero"] .b3d-replay{min-height:36px!important;padding:0 12px;font-size:.8rem;white-space:nowrap}
.b3d-auto[data-variant="hero"] .b3d-hero .inner{gap:14px}

/* ===== Handy: Bau entsteht beim Scrollen (wie Desktop) ===== */
.b3d-touch .b3d-sticky{top:var(--hdr,var(--header-h));height:calc(100svh - var(--hdr,var(--header-h)));min-height:460px}
.b3d-touch .b3d-track{height:380vh}
.b3d-touch[data-variant="section"] .b3d-track{height:320vh}
.b3d-touch[data-variant="hero"] .b3d-hero{top:auto;bottom:0;padding:0 var(--gutter-r) 22px var(--gutter)}
.b3d-touch[data-variant="hero"] .b3d-hero .inner{gap:12px}
.b3d-touch[data-variant="hero"] .b3d-hero h1{font-size:clamp(2.2rem,10vw,3rem)}
.b3d-touch[data-variant="hero"] .b3d-hero .lead{font-size:.95rem}
.b3d-touch[data-variant="hero"] .world-link{padding:12px 14px}
.b3d-touch[data-variant="hero"] .b3d-shade{background:linear-gradient(180deg,rgba(29,33,36,.35) 0%,rgba(29,33,36,0) 22%,rgba(29,33,36,0) 40%,rgba(29,33,36,.85) 62%,rgba(29,33,36,.97) 100%)}
.b3d-touch[data-variant="hero"].started .b3d-shade{background:linear-gradient(180deg,rgba(29,33,36,.35) 0%,rgba(29,33,36,0) 22%,rgba(29,33,36,0) 55%,rgba(29,33,36,.9) 80%)}
.b3d-touch .b3d-hud{bottom:calc(84px + env(safe-area-inset-bottom,0px));gap:8px}
.b3d-touch .b3d-title{font-size:1.4rem}
.b3d-touch .b3d-desc{font-size:.88rem}
.b3d-touch .b3d-note{top:10px}
.b3d-touch[data-variant="hero"] .b3d-hero ~ .b3d-note{opacity:1}

/* ===== Film Fertighaus ===== */
.film .sec-head h2 em{font-style:normal;color:var(--green-light)}
.film-frame{position:relative;margin-top:clamp(24px,4vw,48px);aspect-ratio:16/9;background:#111;overflow:hidden;box-shadow:0 40px 100px -50px rgba(0,0,0,.8)}
.film-video{width:100%;height:100%;display:block;object-fit:cover;background:#111}
.film-play{all:unset;box-sizing:border-box;position:absolute;inset:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(0deg,rgba(20,23,25,.55),rgba(20,23,25,.15));transition:opacity 300ms}
.film-play .fp-ico{width:84px;height:84px;border-radius:50%;background:var(--green);position:relative;box-shadow:0 0 0 0 rgba(5,169,84,.5);animation:wzPulse 1.8s ease-out infinite}
.film-play .fp-ico::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid #06210f;border-top:16px solid transparent;border-bottom:16px solid transparent}
.film-play .fp-t{display:flex;flex-direction:column;font:700 1.4rem var(--f-display);color:#fff}
.film-play .fp-t small{font:500 .78rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:4px}
.film-play:hover .fp-ico{transform:scale(1.06)}
.film-play:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.film.playing .film-play{opacity:0;pointer-events:none}
@media (max-width:860px){.film-frame{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter-r))}.film-play .fp-ico{width:64px;height:64px}.film-play .fp-ico::after{left:26px;top:20px;border-left-width:18px;border-top-width:12px;border-bottom-width:12px}.film-play .fp-t{font-size:1.1rem}}
/* Laufband: läuft dauerhaft von rechts nach links */
.marquee-track{width:max-content;gap:0;animation:mqRun 38s linear infinite}
.mq-set{display:flex;gap:.6em;padding-right:.6em;flex-shrink:0}
.mq-set span:nth-child(3n+1){color:var(--ink);-webkit-text-stroke:0}
.mq-set span:nth-child(3n+2){color:transparent;-webkit-text-stroke:1.5px var(--green)}
.mq-set span:nth-child(3n){color:transparent;-webkit-text-stroke:1.5px var(--ink)}
@keyframes mqRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:760px){.marquee-track{animation-duration:26s}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation-duration:60s!important}}

.mq-set span:nth-child(odd){color:var(--ink);-webkit-text-stroke:0}
.mq-set span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--green)}
.mq-set span:nth-child(5){color:transparent;-webkit-text-stroke:1.5px var(--ink)}

/* ===== Vorfertigung ===== */
.vf .sec-head h2 em,.st .sec-head h2 em{font-style:normal;color:var(--green-ink)}
.vf-grid{display:grid;grid-template-columns:1fr 1.35fr;grid-template-rows:1fr 1fr;gap:10px;margin-top:clamp(24px,4vw,48px);height:min(78vw,760px)}
.vf-ph{all:unset;box-sizing:border-box;position:relative;overflow:hidden;cursor:zoom-in;background:var(--paper-2)}
.vf-a{grid-row:span 2}
.vf-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms var(--ease)}
.vf-ph:hover img{transform:scale(1.04)}
.vf-ph span{position:absolute;left:0;bottom:0;padding:7px 12px;font:500 .74rem var(--f-mono);letter-spacing:.04em;color:#fff;background:rgba(28,32,35,.78)}
.vf-ph:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.vf-steps{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);border-top:1px solid var(--rule);padding-top:24px}
.vf-steps .k,.st-body .k{font:500 .78rem var(--f-mono);color:var(--green-ink);letter-spacing:.1em}
.vf-steps h3{font-size:1.25rem;margin:8px 0 6px}
.vf-steps p{margin:0;color:var(--ink-soft);font-size:.97rem}
/* ===== Hausstile ===== */
.st{background:var(--paper-2)}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);margin-top:clamp(24px,4vw,48px)}
.st-card{background:var(--paper);display:flex;flex-direction:column}
.st-img{all:unset;cursor:zoom-in;display:block;aspect-ratio:4/3;overflow:hidden}
.st-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms var(--ease)}
.st-img:hover img{transform:scale(1.05)}
.st-img:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.st-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.st-body h3{font-size:1.4rem}
.st-body p{margin:0 0 10px;color:var(--ink-soft)}
.st-go{margin-top:auto;font-weight:600}
/* Praxisfoto im Hausideen-Check */
.hc-real{margin:0 0 18px;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--paper-2)}
.hc-real img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 180ms}
.hc-real.sw img{opacity:0}
.hc-real figcaption{position:absolute;left:0;bottom:0;padding:6px 10px;background:rgba(28,32,35,.8);color:#fff;font-size:.8rem}
@media (max-width:860px){
  .vf-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .vf-a{grid-row:auto;grid-column:span 2;aspect-ratio:4/3}
  .vf-b,.vf-c{aspect-ratio:1}
  .vf-steps,.st-grid{grid-template-columns:1fr}
}

/* ===== Datenschutz-Seite ===== */
.ds-hero{background:var(--graphite);color:var(--on-dark);padding:clamp(48px,8vw,110px) 0 clamp(36px,5vw,64px)}
.ds-hero h1{font-size:var(--step-4);margin:16px 0 18px}
.ds-hero .lead{color:var(--on-dark-soft);max-width:60ch}
.ds-stand{margin-top:18px;font-size:.8rem;color:var(--on-dark-soft)}
.ds-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.ds-toc{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:12px;font-size:.92rem}
.ds-toc ol{margin:0;padding-left:1.3em;display:grid;gap:6px;color:var(--ink-soft)}
.ds-toc a{color:var(--ink-soft);text-decoration:none}.ds-toc a:hover{color:var(--green-ink)}
.ds-toc .btn{margin-top:10px;min-height:44px;justify-content:center}
.ds-body{max-width:72ch}
.ds-body h2{font-size:var(--step-2);margin:48px 0 14px;scroll-margin-top:calc(var(--header-h) + 70px)}
.ds-body h2:first-child{margin-top:0}
.ds-body p,.ds-body li{color:var(--ink-soft);line-height:1.7}
.ds-body ul{padding-left:1.2em;display:grid;gap:6px}
.ds-body strong{color:var(--ink)}
.ds-body a{color:var(--green-ink)}
.ds-body code{font-family:var(--f-mono);font-size:.88em;background:var(--paper-2);padding:1px 6px}
.ds-box{background:var(--paper-2);border-left:3px solid var(--green);padding:16px 20px}
.ds-fill{background:#ffe48a;color:#3a2e00;padding:1px 4px}
.ds-link{all:unset;cursor:pointer;color:var(--green-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.ds-grid{grid-template-columns:1fr}.ds-toc{position:static;border:1px solid var(--rule);padding:16px}}
/* Einstellungs-Dialog */
.legal [data-consent]{all:unset;cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px}
.consent-d{border:0;padding:0;max-width:min(560px,calc(100vw - 32px));width:100%;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.consent-d::backdrop{background:rgba(20,23,25,.6)}
.cs-in{padding:24px;display:flex;flex-direction:column;gap:14px}
.cs-head{display:flex;justify-content:space-between;align-items:center}
.cs-head h2{font-size:1.4rem}
.cs-x{all:unset;cursor:pointer;font-size:1.1rem;padding:6px 10px}
.cs-in>p{margin:0;color:var(--ink-soft);font-size:.95rem}
.cs-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--rule);padding:14px 16px;cursor:default}
label.cs-row{cursor:pointer}
.cs-row strong{display:block;font-size:.98rem}
.cs-row small{display:block;color:var(--ink-soft);font-size:.82rem;margin-top:2px}
.cs-always{font:500 .74rem var(--f-mono);color:var(--green-ink);white-space:nowrap}
.cs-sw{appearance:none;flex:none;width:46px;height:26px;border-radius:999px;background:#c9ccc9;position:relative;cursor:pointer;transition:background 180ms}
.cs-sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 180ms}
.cs-sw:checked{background:var(--green)}.cs-sw:checked::after{transform:translateX(20px)}
.cs-sw:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cs-act{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.consent-d{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100svh - 32px);overflow:auto;box-sizing:border-box;width:calc(100vw - 32px)}.cs-row>div{min-width:0}
.ds-hero h1{font-size:clamp(2rem,1rem + 6vw,7rem);hyphens:auto;overflow-wrap:anywhere}