:root{
  --ink:#211f1b;
  --paper:#faf9f5;
  --stone:#eceae3;
  --hairline:rgba(33,31,27,.16);
  --muted:rgba(33,31,27,.62);
  --blue:#264d98;
  --blue-dark:#1e3d7a;
  --display:"Marcellus",Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --dwt:400;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
::selection{background:var(--blue);color:#fff}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}

/* ---------- Nav ---------- */
header{
  position:absolute;top:0;left:0;right:0;z-index:40;
  background:transparent;color:#fff;
}
.pillnav{
  position:fixed;top:18px;left:50%;z-index:45;
  display:flex;align-items:stretch;
  background:rgba(24,22,19,.92);color:#fff;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  transform:translateX(-50%) translateY(-140%);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
body.past-hero .pillnav{transform:translateX(-50%) translateY(0);opacity:1}
body.menu-open .pillnav{opacity:0;pointer-events:none}
.pill-brand{display:flex;align-items:center;padding:.85rem 1.3rem}
.pill-brand img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)}
.pill-menu{
  padding:.85rem 1.3rem;background:none;border:0;cursor:pointer;color:rgba(255,255,255,.85);
  border-left:1px solid rgba(255,255,255,.14);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
}
.pill-menu:hover,.pill-cta:hover{background:rgba(255,255,255,.1)}
.pill-cta{border-left:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);padding:.85rem 1.3rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;transition:background .3s ease}
@media(max-width:560px){.pill-cta{display:none}}
.nav{display:flex;align-items:center;justify-content:space-between;height:96px}
.brand{display:flex;align-items:center}
.brand img{height:48px;width:auto;display:block;filter:brightness(0) invert(1)}
.brand-sub{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap;line-height:1}
body.menu-open .brand img{filter:none}
nav ul{display:flex;gap:clamp(1.4rem,2.4vw,2.6rem);list-style:none;align-items:center}
header nav a{font-size:1rem;letter-spacing:.01em}
nav ul a:not(.btn){position:relative;padding-bottom:4px}
nav ul a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:rgba(255,255,255,.85);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
nav ul a:not(.btn):hover::after{transform:scaleX(1)}
.lang{color:rgba(255,255,255,.55)}
.btn-nav{padding:.62rem 1.3rem;font-size:.72rem}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;position:relative;z-index:60}
.burger span{position:absolute;left:9px;right:9px;height:1.5px;background:#fff;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s ease}
body.menu-open .burger span{background:var(--ink)}
.burger span:first-child{top:16px}
.burger span:last-child{bottom:16px}
body.menu-open .burger span:first-child{transform:translateY(4.2px) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translateY(-4.2px) rotate(-45deg)}
.mnav{
  position:fixed;inset:0;background:var(--paper);z-index:50;
  display:flex;flex-direction:column;justify-content:center;
  padding:3rem clamp(1.5rem,8vw,5rem);overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.m-close{
  position:absolute;top:18px;right:26px;font-size:2.4rem;line-height:1;
  background:none;border:0;cursor:pointer;color:var(--ink);
}
.m-close:hover{color:var(--blue)}
.m-links{display:flex;flex-direction:column}
.m-link{transition:color .25s ease,padding-left .35s cubic-bezier(.16,1,.3,1)}
.m-link:hover{color:var(--blue);padding-left:.5em}
@media(min-width:901px){
  .mnav{flex-direction:row;align-items:center;gap:8vw}
  .m-links{flex:1;max-width:640px}
  .mnav .m-link{font-size:clamp(1.7rem,3vw,2.4rem);padding:.28em 0}
  .m-meta{margin-top:0;align-self:flex-end;padding-bottom:8vh}
}
body.menu-open{overflow:hidden}
body.menu-open header{z-index:70;background:transparent;backdrop-filter:none;border-bottom-color:transparent}
@media(max-width:900px){.m-close{display:none}}
body.menu-open .mnav{opacity:1;pointer-events:auto}
.mnav .m-link{
  font-family:var(--display);font-weight:var(--dwt,700);font-size:clamp(1.7rem,7.5vw,2.6rem);
  padding:.35em 0;border-bottom:1px solid var(--hairline);
}
.mnav .m-link:active{color:var(--blue)}
.mnav .m-meta{margin-top:2.25rem;color:var(--muted);font-size:.92rem;line-height:1.8}
.mnav .m-meta a{border-bottom:1px solid var(--hairline)}
@media(max-width:1080px){
  nav ul{display:none}
  .burger{display:block}
}

/* ---------- Hero ---------- */
.hero{
  min-height:100dvh;display:grid;align-items:center;
  padding:clamp(6.5rem,14vh,9rem) 0 clamp(4rem,9vh,6rem);
  position:relative;overflow:hidden;
  background:var(--ink);color:#fff;
}
.hero::before{
  content:"";position:absolute;inset:-10%;pointer-events:none;
  background:linear-gradient(112deg,transparent 0 32%,rgba(243,236,221,.07) 32% 68%,transparent 68%);
}
.hero-word{
  position:absolute;left:-2vw;bottom:1vh;z-index:0;
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(5rem,15vw,13rem);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);
  pointer-events:none;user-select:none;
}
.hero-grid{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.hero p.hero-kicker{
  font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 1.6rem;max-width:none;
}
.hero h1{
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(2.9rem,5.8vw,5.2rem);
  line-height:1.08;letter-spacing:.005em;
  max-width:13ch;
}
.hero h1 em{font-style:normal;color:#8fb0e8}
.hero p{margin-top:1.75rem;max-width:44ch;color:rgba(255,255,255,.62);font-size:1.05rem}
.hero .cta{margin-top:2.6rem;display:inline-flex;align-items:center;gap:.9rem}
.btn{
  display:inline-block;background:none;color:var(--ink);
  border:1px solid rgba(33,31,27,.45);
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  padding:1rem 2.1rem;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn:active{transform:translateY(1px)}
.hero .btn,header .btn{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .btn:hover,header .btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.hero-art{display:flex;justify-content:center;align-items:center;perspective:900px;position:relative}
.hero-badge{
  position:absolute;left:clamp(-40px,-3vw,-20px);bottom:2vh;z-index:0;
  width:clamp(120px,13vw,168px);aspect-ratio:1;pointer-events:none;
}
.hero-badge svg{width:100%;height:100%;overflow:visible;animation:badgeSpin 40s linear infinite;transform-origin:50% 50%}
.hero-badge text{fill:rgba(255,255,255,.85);font-family:var(--sans);font-size:9.5px;letter-spacing:.29em;text-transform:uppercase}
@keyframes badgeSpin{to{transform:rotate(360deg)}}
@media(max-width:900px){.hero-badge{width:104px;left:-8px;bottom:auto;top:0}}
@media(prefers-reduced-motion:reduce){.hero-badge svg{animation:none}}
/* Holzart-Schalter rechts neben der Treppe */
.woodpick{
  border:0;padding:0;z-index:3;flex:none;
  margin-left:clamp(.75rem,2.4vw,2.5rem);
  display:flex;flex-direction:column;
}
.woodpick legend{
  padding:0;margin-bottom:1rem;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42);
}
.wp-opt input{position:absolute;opacity:0;width:0;height:0}
.wp-opt span{
  display:flex;align-items:center;gap:.72rem;cursor:pointer;white-space:nowrap;
  padding:.52rem 0;font-size:.92rem;color:rgba(255,255,255,.5);
  transition:color .3s ease;
}
.wp-opt span i{
  width:15px;height:15px;flex:none;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
}
.wp-opt span:hover{color:rgba(255,255,255,.88)}
.wp-opt input:checked + span{color:#fff}
.wp-opt input:checked + span i{transform:scale(1.3);box-shadow:0 0 0 1px rgba(255,255,255,.75)}
.wp-opt input:focus-visible + span{outline:1px solid rgba(255,255,255,.6);outline-offset:5px}
.wp-opt input[value="laerche"] + span i{background:#ecdfc5}
.wp-opt input[value="fichte"] + span i{background:#f0e6d2}
.wp-opt input[value="eiche"] + span i{background:#d3ba8b}
.wp-opt input[value="nussbaum"] + span i{background:#ae8763}
.hero-cue{
  position:absolute;right:clamp(1.25rem,4vw,3.5rem);bottom:2.4rem;z-index:3;
  display:flex;align-items:center;gap:1rem;color:#fff;font-size:.95rem;letter-spacing:.04em;
}
.hero-cue .circ{
  width:46px;height:46px;border:1px solid rgba(255,255,255,.65);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:background .3s ease,color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.hero-cue:hover .circ{background:#fff;color:var(--ink);transform:translateY(4px)}
@media(max-width:900px){.hero-cue{display:none}}
.tilt{
  position:relative;z-index:1;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  transform-style:preserve-3d;will-change:transform;
}
.stair{height:min(82vh,760px);width:auto;max-width:100%}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .hero h1{max-width:none}
  .hero-art{order:-1;flex-direction:column}
  .stair{height:min(52vh,480px);width:auto}
  .woodpick{
    display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.25rem;
    justify-items:start;max-width:270px;margin:1.6rem auto 0;
  }
  .woodpick legend{display:none}
}

/* Stahl und Handlauf auf dem dunklen Hero aufhellen */
.stair [fill="#1f3a6e"]{fill:#35548f}
.stair [fill="#24406f"]{fill:#3d5c99}
.stair [fill="#4a68a4"]{fill:#7d9bd4}
.stair path[stroke="#264d98"]{stroke:#5b82c8}
.stair line[stroke="#4a68a4"]{stroke:#8fadde}
/* Holzpaletten fuer den Schalter, bereits fuer den dunklen Hero aufgehellt */
.hero{
  --w-top-a:#f1e4c6;--w-top-b:#ead9b3;--w-side:#d9c397;--w-end:#c7ad7c;
  --w-grain:#9c8154;--w-wange:#6a5940;--w-wange-in:#5a4a34;
}
.hero[data-holz="fichte"]{
  --w-top-a:#fdf8ec;--w-top-b:#f9f2e2;--w-side:#f0e6d2;--w-end:#e4d7bd;
  --w-grain:#c3ad8a;--w-wange:#8b795e;--w-wange-in:#7b6a52;
}
.hero[data-holz="eiche"]{
  --w-top-a:#e8d3ab;--w-top-b:#e1cb9e;--w-side:#d3ba8b;--w-end:#c2a877;
  --w-grain:#9b7c4d;--w-wange:#6e5c40;--w-wange-in:#5e4d34;
}
.hero[data-holz="nussbaum"]{
  --w-top-a:#c9a582;--w-top-b:#c09a76;--w-side:#ae8763;--w-end:#98724f;
  --w-grain:#6d4c2e;--w-wange:#57422c;--w-wange-in:#4a3624;
}

/* stair choreography: pole draws, outlines sketch in, faces materialize, then float + parallax */
.stair .pole{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s}
.stair .step{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*120ms + .5s)}
.stair .step path{
  stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
  transition:
    stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) calc(var(--i)*120ms + .55s),
    fill-opacity .9s ease calc(var(--i)*120ms + 1.15s),
    fill .55s ease,stroke .55s ease;
}
/* detail layer draws after the faces have materialized */
.stair .step .grain,.stair .step .edgehl{
  transition-delay:calc(var(--i)*120ms + 1.5s),calc(var(--i)*120ms + 1.5s);
}
.stair .collar{opacity:0;transition:opacity .6s ease calc(var(--i)*120ms + 1.2s)}
.stair .shadow,.stair .polecap{opacity:0;transition:opacity 1.4s ease 2.6s}
body.loaded .stair .pole{transform:none}
body.loaded .stair .step{opacity:1;transform:none}
body.loaded .stair .step path{stroke-dashoffset:0;fill-opacity:1}
body.loaded .stair .collar{opacity:1}
body.loaded .stair .shadow,body.loaded .stair .polecap{opacity:1}
body.loaded .stair{animation:stairFloat 8s ease-in-out 3.4s infinite alternate}
@keyframes stairFloat{
  from{transform:translateY(0) rotate(0deg)}
  to{transform:translateY(-10px) rotate(.5deg)}
}
/* depth parallax: upper steps travel further than lower ones */
.stair .sp{
  transform:translate(calc((var(--i) + 3) * var(--px,0) * .10px),calc((var(--i) + 3) * var(--py,0) * .10px));
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
/* gentle lift-off while the hero scrolls away */
@supports (animation-timeline: view()){
  .hero-art{animation:heroExit linear both;animation-timeline:view();animation-range:exit-crossing 0% exit-crossing 80%}
  @keyframes heroExit{to{transform:translateY(-90px)}}
}

/* ---------- Intro ---------- */
.intro{
  padding:clamp(5rem,12vh,9rem) 0;background:var(--ink);color:#fff;
  background-image:url('/assets/spiral-lines.svg');
  background-repeat:no-repeat;background-position:right -60px center;background-size:auto 130%;
}
.intro p{
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.42;letter-spacing:.005em;
  max-width:36ch;
}
.intro .dim{color:rgba(255,255,255,.5)}
.arrow-link{
  display:inline-flex;align-items:center;gap:.9rem;margin-top:2.2rem;
  font-size:.95rem;font-weight:600;color:inherit;
}
.arrow-link .circ{
  width:40px;height:40px;border:1px solid currentColor;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:background .3s ease,color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.arrow-link:hover .circ{background:#fff;color:var(--ink);transform:rotate(45deg)}
.intro .sec-mark{color:rgba(255,255,255,.72)}
.intro .sec-mark::before{background:#7d9bd4;box-shadow:5px -5px 0 #7d9bd4,10px -10px 0 #7d9bd4}
.intro .sec-mark::after{background:rgba(255,255,255,.18)}
.intro p a{border-bottom:1px solid var(--hairline)}

/* ---------- Leistungen ---------- */
.leistungen{padding-block:clamp(3rem,8vh,6rem) clamp(4rem,10vh,8rem)}
.section-title{
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.12;letter-spacing:.005em;
  margin-bottom:clamp(2.5rem,5vh,4rem);
}

/* Werkplan-Zeile: kleine Treppenstufen-Glyphe + Label + auslaufende Messlinie */
.sec-mark{
  display:flex;align-items:center;gap:.9rem;
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.3rem;
}
.sec-mark::before{
  content:"";flex:none;width:5px;height:5px;background:var(--blue);
  box-shadow:5px -5px 0 var(--blue),10px -10px 0 var(--blue);
  margin-top:10px;margin-right:10px;
}
.sec-mark::after{content:"";flex:1;height:1px;background:var(--hairline)}
.dark .sec-mark{color:rgba(255,255,255,.72)}
.dark .sec-mark::before{background:#7d9bd4;box-shadow:5px -5px 0 #7d9bd4,10px -10px 0 #7d9bd4}
.dark .sec-mark::after{background:rgba(255,255,255,.18)}
.l-panels{display:flex;gap:1rem;min-height:540px}
.panel{
  position:relative;flex:1;overflow:hidden;display:flex;align-items:flex-end;
  transition:flex .8s cubic-bezier(.16,1,.3,1);
}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,20,0) 40%,rgba(20,24,20,.72))}
.panel.texture{background:
  repeating-linear-gradient(98deg,rgba(139,106,60,.12) 0 2px,transparent 2px 26px),
  linear-gradient(135deg,#e9d9b6,#dfcb9f)}
.panel.texture::after{background:linear-gradient(180deg,rgba(20,24,20,0) 40%,rgba(20,24,20,.55))}
.panel-text{position:relative;z-index:1;padding:1.8rem;color:#fff;width:100%}
.panel-text h3{font-family:var(--display);font-weight:var(--dwt,700);font-size:1.55rem;letter-spacing:-.01em}
.panel-text p{
  margin-top:.6rem;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.92);max-width:46ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .8s cubic-bezier(.16,1,.3,1),opacity .5s ease .15s;
}
.panel:hover,.panel:focus-within{flex:2.4}
.panel:hover .panel-text p,.panel:focus-within .panel-text p{max-height:200px;opacity:1}
@media(max-width:900px){
  .l-panels{flex-direction:column;min-height:0}
  .panel{min-height:300px}
  .panel-text p{max-height:none;opacity:1}
}

/* ---------- Bauformen (Blueprint-Karten) ---------- */
.bauformen{padding-block:0 clamp(4rem,10vh,8rem)}
.bf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.bf-card{
  border:1px solid var(--hairline);padding:1.6rem 1.5rem 1.7rem;
  display:flex;flex-direction:column;gap:1.1rem;
  transition:border-color .35s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.bf-card:hover{border-color:var(--blue);transform:translateY(-4px)}
.bf-card svg{width:100%;height:auto;display:block}
.bf-card svg .bf-acc{stroke:var(--blue);stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .15s}
.bf-card:hover svg .bf-acc,.bf-card:focus-within svg .bf-acc{stroke-dashoffset:0}
.reveal.in .bf-card svg .bf-acc{stroke-dashoffset:0}
.bf-card h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:1.3rem}
.bf-card p{font-size:.92rem;color:var(--muted);line-height:1.6}
.bf-note{margin-top:1.75rem;color:var(--muted);font-size:.95rem}
@media(max-width:1080px){.bf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bf-grid{grid-template-columns:1fr}}

/* ---------- Referenz-Feature (Schloss Bruneck) ---------- */
.feature{position:relative;overflow:hidden}
.feature img{width:100%;height:min(88vh,780px);object-fit:cover;display:block}
.feature::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(20,18,15,0) 45%,rgba(20,18,15,.78) 88%);
}
.feature-text{
  position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding:0 clamp(1.25rem,4vw,3.5rem) clamp(2rem,5vh,3.5rem);
}
.feature-text .sec-mark{color:rgba(255,255,255,.72);margin-bottom:.9rem;max-width:420px}
.feature-text .sec-mark::before{background:#7d9bd4;box-shadow:5px -5px 0 #7d9bd4,10px -10px 0 #7d9bd4}
.feature-text .sec-mark::after{background:rgba(255,255,255,.3)}
.feature-text h2{
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.12;
}
.feature-text p{margin-top:.5rem;color:rgba(255,255,255,.75);max-width:52ch}

/* ---------- Möbel (warmer Vollbreiten-Bruch, ohne Illustrationen) ---------- */
.moebel{
  padding:clamp(4.5rem,11vh,8rem) 0;
  background:
    repeating-linear-gradient(98deg,rgba(139,106,60,.05) 0 2px,transparent 2px 52px),
    linear-gradient(148deg,#f0e5cd,#e4d6b6);
  color:var(--ink);
}
.moebel .sec-mark{color:rgba(51,40,22,.62)}
.moebel .sec-mark::after{background:rgba(51,40,22,.22)}
.mb-head{display:grid;grid-template-columns:6fr 5fr;gap:clamp(2rem,6vw,6rem);align-items:baseline}
.moebel .section-title{margin-bottom:0}
.mb-lead{color:rgba(51,40,22,.72);max-width:42ch;font-size:1.02rem;line-height:1.75}
.mb-list{list-style:none;margin-top:clamp(2.5rem,6vh,4rem)}
.mb-list li{
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(1rem,4vw,3rem);align-items:baseline;
  border-top:1px solid rgba(51,40,22,.22);padding:1.9rem 0;
  transition:padding-left .4s cubic-bezier(.16,1,.3,1);
}
.mb-list li:last-child{border-bottom:1px solid rgba(51,40,22,.22)}
.mb-list li:hover{padding-left:.75rem}
.mb-list h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1}
.mb-list p{color:rgba(51,40,22,.68);font-size:.98rem;max-width:52ch}
.mb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;margin-top:clamp(2.25rem,5vh,3.25rem)}
.moebel .btn{border-color:rgba(51,40,22,.4)}
.mb-note{font-size:.92rem;color:rgba(51,40,22,.58)}
@media(max-width:700px){
  .mb-head{grid-template-columns:1fr;gap:1.25rem}
  .mb-list li{grid-template-columns:1fr;gap:.4rem}
}

/* ---------- Team (Martin im Vordergrund) ---------- */
.team{padding-block:0 clamp(4rem,10vh,8rem)}
.tm-lead{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.tm-photo{margin:0;position:relative}
.tm-photo::after{content:"";position:absolute;inset:0;transform:translate(16px,16px);border:1px solid var(--blue);pointer-events:none;z-index:-1}
.tm-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.tm-photo img.pos-r{object-position:68% center}
.tm-group{margin:clamp(3rem,8vh,6rem) 0 0}
.tm-group img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tm-group figcaption{margin-top:.8rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sec .tm-group{margin-bottom:clamp(2rem,5vh,3.5rem)}
.tm-name{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1}
.tm-role{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin-top:.7rem}
.tm-intro p:not(.tm-role){color:var(--muted);font-size:1.05rem;line-height:1.75;margin-top:1.5rem;max-width:40ch}
.tm-intro .arrow-link{margin-top:2.2rem}
.tm-lead + .tm-lead{margin-top:clamp(3rem,8vh,6rem)}
.tm-rev .tm-photo{order:2}
.tm-rev .tm-photo::after{transform:translate(-16px,16px)}
@media(max-width:900px){
  .tm-lead{grid-template-columns:1fr;gap:2.25rem}
  .tm-photo{max-width:320px}
  .tm-rev .tm-photo{order:0}
  .tm-rev .tm-photo::after{transform:translate(16px,16px)}
}
/* Kreis-Pfeil auf hellem Grund */
.betrieb .arrow-link:hover .circ,.team .arrow-link:hover .circ{background:var(--ink);color:#fff}

/* ---------- Geschichte (Timeline mit Fotos von frueher) ---------- */
.hist{padding-block:0 clamp(4rem,10vh,8rem)}
.hist-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2.5rem,6vh,4rem)}
.hist-head .section-title{margin-bottom:0}
.hist-head p{color:var(--muted);max-width:52ch;line-height:1.75}
.hist-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.5vw,2.5rem);position:relative}
.hist-line::before{content:"";position:absolute;left:0;right:0;top:calc(var(--hist-img) + 1.65rem);height:1px;background:var(--hairline)}
.hist-line,.hist-item{--hist-img:clamp(150px,15vw,220px)}
.hist-item{position:relative}
.hist-item figure{margin:0;height:var(--hist-img);overflow:hidden;background:#d9cfb8}
.hist-item img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25) contrast(.95);transition:filter .6s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.hist-item:hover img{filter:none;transform:scale(1.04)}
.hist-item:last-child img{filter:none}
.hist-mark{
  display:block;margin-top:1.25rem;padding-left:1.1rem;position:relative;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
}
.hist-mark::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;background:var(--blue);transform:translateY(-50%)}
.hist-item h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.15rem,1.5vw,1.4rem);margin-top:.6rem;line-height:1.2}
.hist-item p{color:var(--muted);font-size:.95rem;line-height:1.7;margin-top:.6rem}
.hist .arrow-link{margin-top:clamp(2.5rem,5vh,3.5rem)}
.hist .arrow-link:hover .circ{background:var(--ink);color:#fff}
.sec.hist{padding-top:0}
@media(max-width:900px){
  .hist-head{grid-template-columns:1fr;gap:1rem}
  .hist-line{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .hist-line::before{display:none}
}
@media(max-width:560px){.hist-line{grid-template-columns:1fr}}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.5vw,1.25rem)}
.pair figure{margin:0;overflow:hidden}
.pair img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
@media(max-width:560px){.pair{grid-template-columns:1fr}}

/* ---------- WoodVibes (Zweitmarke) ---------- */
.wv{background:#1b1714;color:#fff;padding:clamp(4.5rem,11vh,8rem) 0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.1)}
.wv-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.wv .sec-mark{color:rgba(255,255,255,.72)}
.wv .sec-mark::before{background:#7d9bd4;box-shadow:5px -5px 0 #7d9bd4,10px -10px 0 #7d9bd4}
.wv .sec-mark::after{background:rgba(255,255,255,.18)}
.wv h2{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.12}
.wv h2 .acc{color:#9db7ea}
.wv-claim{margin-top:1.1rem;font-family:var(--display);font-size:clamp(1.1rem,1.7vw,1.35rem);color:rgba(255,255,255,.86)}
.wv p.wv-body{margin-top:1.3rem;color:rgba(255,255,255,.62);max-width:46ch;line-height:1.75}
.wv .btn{margin-top:2.4rem;color:#fff;border-color:rgba(255,255,255,.45)}
.wv-mark{display:flex;align-items:center;justify-content:center;width:100%;justify-self:center}
.wv-mark img{width:100%;max-width:400px;height:auto;display:block}
@media(max-width:900px){.wv-grid{grid-template-columns:1fr;gap:3rem}.wv-mark img{max-width:280px}}

/* ---------- Einsatzbereiche ---------- */
.bereiche{padding-block:0 clamp(4rem,10vh,8rem)}
/* nach dem Vollbreiten-Band der Möbel braucht die helle Sektion wieder Luft nach oben */
.moebel + .bereiche{padding-top:clamp(4rem,10vh,7.5rem)}
.b-row{display:grid;grid-template-columns:5fr 7fr;gap:1.5rem;align-items:baseline;
  border-top:1px solid var(--hairline);padding:1.75rem 0;transition:padding-left .4s cubic-bezier(.16,1,.3,1)}
.b-row:last-child{border-bottom:1px solid var(--hairline)}
.b-row:hover{padding-left:.75rem}
.b-row h3{font-family:var(--display);font-weight:var(--dwt,700);font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;transition:color .3s ease}
.b-row:hover h3{color:var(--blue)}
.b-row{position:relative}
.b-thumb{
  position:absolute;right:6%;top:50%;width:170px;aspect-ratio:4/5;object-fit:cover;
  transform:translateY(-46%) rotate(4deg) scale(.92);opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);z-index:2;
}
@media(hover:hover) and (min-width:900px){
  .b-row:hover .b-thumb{opacity:1;transform:translateY(-50%) rotate(-2deg) scale(1)}
}
.b-row p{color:var(--muted);font-size:.98rem;max-width:56ch}
@media(max-width:700px){.b-row{grid-template-columns:1fr;gap:.4rem}}

/* ---------- Betrieb ---------- */
.betrieb{padding-block:clamp(3rem,8vh,6rem) clamp(4rem,10vh,8rem)}
.bt-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.bt-grid .section-title{margin-bottom:1.5rem}
.bt-text p{color:var(--muted);max-width:58ch}
.bt-text p + p{margin-top:1rem}
.bt-media{position:relative}
.bt-media::after{content:"";position:absolute;inset:0;transform:translate(18px,18px);border:1px solid var(--blue);pointer-events:none;z-index:-1}
.bt-media .bt-clip{overflow:hidden}
.bt-media img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.bt-grid{padding-right:20px}
.bt-media:hover img{transform:scale(1.03)}
@media(max-width:900px){.bt-grid{grid-template-columns:1fr;gap:2.5rem}}

/* ---------- FAQ ---------- */
.faq{
  padding:clamp(4rem,10vh,7rem) 0;background:var(--ink);color:#fff;
  background-image:url('/assets/spiral-lines.svg');
  background-repeat:no-repeat;background-position:right -80px top -60px;background-size:auto 120%;
}
.faq .sec-mark{color:rgba(255,255,255,.72)}
.faq .sec-mark::before{background:#7d9bd4;box-shadow:5px -5px 0 #7d9bd4,10px -10px 0 #7d9bd4}
.faq .sec-mark::after{background:rgba(255,255,255,.18)}
.faq .section-title::after{color:#7c9ede}
/* Frageliste: funktioniert auf hellem wie auf dunklem Grund */
.faq-list{max-width:820px}
.faq-list details{border-top:1px solid var(--hairline)}
.faq-list details:last-child{border-bottom:1px solid var(--hairline)}
.faq-list summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2rem;
  padding:1.4rem 0;font-family:var(--display);font-weight:var(--dwt,400);font-size:1.25rem;
  transition:color .25s ease;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::marker{content:""}
.faq-list summary:hover{color:var(--blue)}
.faq-list summary::after{
  content:"+";font-family:var(--sans);font-weight:400;font-size:1.4rem;color:var(--blue);
  transition:transform .35s cubic-bezier(.16,1,.3,1);flex-shrink:0;
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .faq-a{padding:0 0 1.5rem;color:var(--muted);max-width:60ch;line-height:1.75}
/* dunkler Kontext */
.faq .faq-list details,.sec.dark .faq-list details{border-top-color:rgba(255,255,255,.22)}
.faq .faq-list details:last-child,.sec.dark .faq-list details:last-child{border-bottom-color:rgba(255,255,255,.22)}
.faq .faq-list summary:hover,.sec.dark .faq-list summary:hover{color:#9db7ea}
.faq .faq-list summary::after,.sec.dark .faq-list summary::after{color:#9db7ea}
.faq .faq-list .faq-a,.sec.dark .faq-list .faq-a{color:rgba(255,255,255,.72)}

/* ---------- Statement + full image ---------- */
.statement{padding:clamp(4rem,10vh,8rem) 0;text-align:center}
.statement{background:var(--blue);color:#fff}
.statement .acc{color:#a9c4f2}
.statement blockquote{
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.25;letter-spacing:.005em;
  max-width:28ch;margin:0 auto;
}
.fullimg{padding:0}
.fullimg img{width:100%;height:min(78vh,720px);object-fit:cover}
.fullimg figcaption{
  padding:.9rem clamp(1.25rem,4vw,3.5rem);
  font-size:.85rem;color:var(--muted);
}

/* ---------- Prozess (pinned orbital, dark) ---------- */
.prozess{
  background:var(--ink) url('/assets/spiral-lines.svg') no-repeat right -100px center / auto 130%;
  color:#fff;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(2rem,5vh,4rem) 0;
}
.pz-eyebrow{
  display:flex;align-items:center;gap:.9rem;
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);
  margin-bottom:clamp(1.25rem,3.5vh,2.5rem);
}
.pz-eyebrow::before{
  content:"";flex:none;width:5px;height:5px;background:#7d9bd4;
  box-shadow:5px -5px 0 #7d9bd4,10px -10px 0 #7d9bd4;
  margin-top:10px;margin-right:10px;
}
.pz-eyebrow::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.18)}
.pz-layout{
  display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto auto;
  column-gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.pz-stair{grid-column:1;grid-row:1/3}
.pz-steps{grid-column:2;grid-row:1}
.pz-shots{grid-column:2;grid-row:2}
.pz-stair{position:relative;width:min(100%,520px,52vh);aspect-ratio:1;margin:0 auto}
.pz-stair svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pz-tread{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.pz-tread.on{opacity:1;transform:none}
.pz-rail line{opacity:0;transition:opacity .5s ease .2s}
.pz-rail line.on{opacity:1}
.pz-handrail{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.pz-disc{
  position:absolute;right:0;bottom:18%;
  width:150px;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  text-align:center;padding:1rem;
}
.pz-num{font-family:var(--display);font-weight:var(--dwt,700);font-size:clamp(1.4rem,2vw,1.9rem)}
.pz-name{font-weight:400;font-size:clamp(.8rem,1vw,.95rem);max-width:14ch}
.pz-steps{display:flex;flex-direction:column}
.pz-step{border-bottom:1px solid rgba(255,255,255,.2);padding:1.25rem .25rem;transition:background .45s ease,padding .45s ease}
.pz-step h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.3rem,2vw,1.7rem);color:rgba(255,255,255,.94)}
.pz-tag{
  display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#9db7ea;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease;
}
.pz-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .7s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.pz-body p{color:rgba(255,255,255,.78);max-width:54ch;font-size:.98rem;padding:.5rem 0 .3rem}
.pz-step.active{background:rgba(255,255,255,.07);padding:1.5rem 1.4rem}
.pz-step.active .pz-tag{max-height:1.4rem;opacity:1;margin-bottom:.35rem}
.pz-step.active .pz-body{max-height:200px;opacity:1}
/* zwei Fotos pro Schritt, blenden unterhalb mit dem Schritt um */
.pz-shots{display:grid;margin-top:clamp(1.25rem,3vh,2.25rem)}
.pz-shot{
  grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.5vw,1.25rem);
  align-content:start;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.16,1,.3,1),visibility .55s;
}
.pz-shot.on{opacity:1;visibility:visible;transform:none}
.pz-shot figure{margin:0;overflow:hidden}
.pz-shot img{
  width:100%;height:clamp(104px,15vh,190px);object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.pz-shot figure:hover img{transform:scale(1.04)}
.pz-cap{
  grid-column:1/-1;margin-top:.15rem;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);
}
@media(max-width:900px){
  .pz-layout{grid-template-columns:1fr;grid-template-rows:auto;row-gap:3rem}
  .pz-stair,.pz-steps,.pz-shots{grid-column:1;grid-row:auto}
  .pz-stair{width:min(78vw,360px)}
  .pz-disc{width:110px}
  .prozess{min-height:0}
  /* ohne Pin wird der Ablauf zum Akkordeon: Tippen oeffnet Text + Fotos */
  .pz-step{cursor:pointer}
  .pz-step h3{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
  .pz-step h3::after{
    content:"+";flex:none;font-family:var(--sans);font-size:1.3rem;line-height:1;color:#9db7ea;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .pz-step.active h3::after{transform:rotate(45deg)}
  .pz-shots{margin-top:2.25rem}
  .pz-shot img{height:clamp(120px,26vw,170px)}
}

/* ---------- Referenzen ---------- */
.referenzen{padding-block:0 clamp(4rem,10vh,8rem)}
.r-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;margin-bottom:clamp(2.5rem,5vh,4rem)}
.r-head .section-title{margin-bottom:0}
.r-link{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.r-mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,22vw,280px);grid-auto-flow:dense;
  gap:clamp(.75rem,1.4vw,1.25rem);
}
.r-item{margin:0;position:relative;overflow:hidden;background:var(--ink)}
.r-big{grid-column:span 2;grid-row:span 2}
.r-wide{grid-column:span 2}
.r-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s ease}
.r-item:hover img{transform:scale(1.06);filter:brightness(.72)}
.r-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.25rem;color:#fff;
  font-size:.82rem;line-height:1.45;
  background:linear-gradient(to top,rgba(33,39,33,.85),rgba(33,39,33,0));
  transform:translateY(8px);opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.r-item figcaption span{display:block;font-family:var(--display);font-size:1.15rem;margin-bottom:.15rem}
.r-item:hover figcaption{opacity:1;transform:none}
@media(max-width:900px){
  .r-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(140px,34vw,240px)}
  .r-item figcaption{opacity:1;transform:none}
}

/* ---------- Kontakt / Footer ---------- */
.kontakt{background:var(--stone);padding:clamp(5rem,12vh,9rem) 0 clamp(3rem,6vh,4rem)}
.kontakt h2 em{font-style:normal;color:var(--blue)}
.kontakt h2{
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.12;letter-spacing:.005em;max-width:16ch;
}
.k-layout{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2.5rem,5vw,5rem);margin-top:clamp(3rem,6vh,4.5rem)}
.k-form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.k-form .full{grid-column:1/-1}
.k-form label,.ms-fields label{display:block;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(33,31,27,.65);margin-bottom:.5rem;font-weight:400}
.k-form input,.k-form textarea,.ms-fields input,.ms-fields textarea{
  width:100%;border:0;border-bottom:1px solid rgba(33,31,27,.35);background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:1.02rem;padding:.7rem 0;border-radius:0;
  transition:border-color .25s ease;
}
.k-form textarea,.ms-fields textarea{min-height:120px;resize:vertical}
.k-form input:focus,.k-form textarea:focus,.ms-fields input:focus,.ms-fields textarea:focus{outline:none;border-bottom-color:var(--blue)}
.k-form input::placeholder,.k-form textarea::placeholder,.ms-fields input::placeholder,.ms-fields textarea::placeholder{color:rgba(33,31,27,.35)}
.k-form .btn{cursor:pointer;justify-self:start}
.k-note{font-size:.85rem;color:var(--muted);grid-column:1/-1}
@media(max-width:900px){.k-layout{grid-template-columns:1fr}.k-form{grid-template-columns:1fr}}

/* ---------- Mehrstufige Anfrage (Vorqualifizierung) ---------- */
.ms{display:block}
.ms-bar{display:flex;align-items:flex-end;gap:.5rem;margin-bottom:.9rem}
.ms-tick{flex:1;height:3px;background:rgba(33,31,27,.18);transition:background .4s ease,height .4s cubic-bezier(.16,1,.3,1)}
.ms-tick.done{background:var(--blue)}
.ms-tick.now{background:var(--blue);height:8px}
.ms-count{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:2.2rem;display:block}
.ms-count b{color:var(--ink);font-weight:400}
.ms-step{display:none;border:0;padding:0;margin:0;animation:msIn .5s cubic-bezier(.16,1,.3,1)}
.ms-step:focus{outline:none}
.ms-step.on{display:block}
@keyframes msIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ms-q{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.25}
.ms-opts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.ms-opt{position:relative}
.ms-opt input{position:absolute;opacity:0;width:0;height:0}
.ms-opt span{
  display:inline-block;cursor:pointer;padding:.8rem 1.25rem;
  border:1px solid rgba(33,31,27,.28);background:transparent;
  font-size:.92rem;transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.ms-opt span:hover{border-color:var(--blue);color:var(--blue)}
.ms-opt input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
.ms-opt input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}
.ms-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.7rem}
.ms-fields .full{grid-column:1/-1}
.ms-nav{display:flex;align-items:center;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}
.ms-back{
  background:none;border:0;cursor:pointer;color:var(--muted);font-family:var(--sans);
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;padding:.6rem 0;
  transition:color .25s ease;
}
.ms-back:hover{color:var(--blue)}
.ms-err{color:#a4342b;font-size:.85rem;margin-top:1rem;min-height:1.2em}
.ms-done{display:none;border:1px solid var(--blue);padding:clamp(1.6rem,3vw,2.2rem)}
.ms-done.on{display:block}
.ms-done h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:1.5rem}
.ms-done p{color:var(--muted);margin-top:.7rem;font-size:.95rem;line-height:1.7}
.ms-done a,.k-note a{color:var(--blue);border-bottom:1px solid rgba(38,77,152,.4)}
.ms-opt-note{letter-spacing:.08em;text-transform:none;color:rgba(33,31,27,.4)}
.ms .k-note{margin-top:1.6rem}
.ms.hide{display:none}
@media(max-width:700px){.ms-fields{grid-template-columns:1fr}}
.k-aside{display:grid;gap:2rem;align-content:start}
.k-photo{margin:0;overflow:hidden}
.k-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.k-photo:hover img{transform:scale(1.03)}
.k-col p + p{margin-top:1rem}
.k-col h3{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;font-weight:400}
.k-col p,.k-col a{font-size:1rem;line-height:1.7}
.k-col a{border-bottom:1px solid var(--hairline)}
.k-col a:hover{border-bottom-color:var(--blue);color:var(--blue)}
@media(max-width:900px){.k-aside{gap:2.25rem}.k-photo{max-width:340px}}

/* ---------- Footer (Sitemap, dunkel) ---------- */
.footer-main{
  background:var(--ink);color:#fff;overflow:hidden;
  padding-top:clamp(3.5rem,8vh,6rem);
}
.f-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(3rem,7vh,5rem);
}
.f-brand img{height:44px;width:auto;display:block;filter:brightness(0) invert(1)}
.f-brand p{margin-top:1.4rem;color:rgba(255,255,255,.6);font-size:.95rem;max-width:34ch;line-height:1.7}
.f-col h3{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:400;margin-bottom:1.1rem;
}
.f-col > a:not(.btn){display:block;padding:.28em 0;color:rgba(255,255,255,.85);font-size:.98rem;transition:color .25s ease,padding-left .3s ease}
.f-col > a:not(.btn):hover{color:#9db7ea;padding-left:.35em}
.f-col p a{color:rgba(255,255,255,.85);transition:color .25s ease}
.f-col p a:hover{color:#9db7ea}
.f-col p{color:rgba(255,255,255,.6);font-size:.95rem;line-height:1.7}
.f-col p + h3{margin-top:1.6rem}
.f-col .btn{margin-top:1.3rem;color:#fff;border-color:rgba(255,255,255,.45);font-size:.72rem;padding:.85rem 1.6rem}
.legal{
  padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;
  font-size:.82rem;color:rgba(255,255,255,.45);
}
.legal nav{display:flex;gap:1.5rem}
.legal a:hover{color:#fff}
.f-word{
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(5.5rem,17vw,15rem);line-height:.82;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);
  user-select:none;pointer-events:none;
  margin-bottom:-.26em;white-space:nowrap;
}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stair .step,.stair .pole,.stair .sp,.stair .collar,.stair .shadow,.stair .polecap,.tilt,.reveal{opacity:1;transform:none;transition:none}
  .stair .step path{stroke-dashoffset:0;fill-opacity:1;transition:none}
  body.loaded .stair{animation:none}
  .hero-art{animation:none}
  .l-cell img,.r-grid img{transition:none}
}

/* ============================================================
   Unterseiten
   ============================================================ */

/* ---------- Seitenkopf der Unterseiten ---------- */
.pagehero{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:clamp(9rem,17vh,12rem) 0 clamp(3.5rem,8vh,6rem);
  background-image:url('/assets/spiral-lines.svg');
  background-repeat:no-repeat;background-position:right -110px center;background-size:auto 165%;
}
.ph-inner{position:relative;z-index:1}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:1.6rem}
.crumbs a{border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.crumbs a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.crumbs span[aria-current]{color:rgba(255,255,255,.8)}
.pagehero h1{
  font-family:var(--display);font-weight:var(--dwt,400);
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.06;letter-spacing:.005em;max-width:17ch;
}
.pagehero h1 em{font-style:normal;color:#7d9bd4}
.ph-lead{margin-top:1.6rem;color:rgba(255,255,255,.62);max-width:52ch;font-size:1.08rem;line-height:1.75}
.ph-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.ph-meta span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.22);padding:.45rem .8rem}

/* ---------- Bausteine fuer Unterseiten ---------- */
/* Jede Sektion bringt ihren eigenen Abstand oben UND unten mit. Sonst laeuft
   sie in das naechste Element, sobald das keinen eigenen Abstand hat
   (Vollbild, blaues Band, Fusszeile). */
.sec{padding-block:clamp(3.5rem,9vh,7rem)}
/* Zwei helle Sektionen hintereinander teilen sich einen Abstand. */
.sec + .sec{padding-top:0}
/* Nach einem farbigen Band faengt die helle Sektion wieder von vorne an. */
.sec.dark + .sec,.sec.stone + .sec{padding-top:clamp(3.5rem,9vh,7rem)}
.sec.dark{background:var(--ink);color:#fff;padding-block:clamp(4rem,10vh,7rem)}
.sec.stone{background:var(--stone);padding-block:clamp(4rem,10vh,7rem)}
.sec.dark .section-title::after{color:#7c9ede}
.sec.dark p{color:rgba(255,255,255,.66)}

.lead-2col{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.lead-2col .section-title{margin-bottom:0}
.lead-2col p{color:var(--muted);line-height:1.8;font-size:1.02rem}
.lead-2col p + p{margin-top:1.1rem}
@media(max-width:900px){.lead-2col{grid-template-columns:1fr;gap:1.5rem}}

.rows{list-style:none}
.rows li{
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(1rem,4vw,3rem);align-items:baseline;
  border-top:1px solid var(--hairline);padding:1.75rem 0;
  transition:padding-left .4s cubic-bezier(.16,1,.3,1);
}
.rows li:last-child{border-bottom:1px solid var(--hairline)}
.rows li:hover{padding-left:.75rem}
.rows h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12}
.rows p{color:var(--muted);font-size:.98rem;line-height:1.7;max-width:56ch}
.sec.dark .rows li{border-color:rgba(255,255,255,.18)}
.sec.dark .rows h3{color:#fff}
@media(max-width:700px){.rows li{grid-template-columns:1fr;gap:.4rem}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.card{border:1px solid var(--hairline);padding:1.9rem 1.75rem 2rem;transition:border-color .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.card:hover{border-color:var(--blue);transform:translateY(-4px)}
.card h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:1.35rem}
.card p{color:var(--muted);font-size:.95rem;line-height:1.7;margin-top:.55rem}
.card .arrow-link{margin-top:1.5rem;font-size:.88rem}
.card .arrow-link .circ{width:34px;height:34px}
.card .arrow-link:hover .circ{background:var(--ink);color:#fff}
.sec.dark .card{border-color:rgba(255,255,255,.2)}
.sec.dark .card h3{color:#fff}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem 2.5rem;border-top:1px solid var(--hairline);padding-top:2rem;margin-top:2.5rem}
.facts h4{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:400;margin-bottom:.4rem}
.facts p{font-size:.98rem;color:var(--ink);line-height:1.6}
.sec.dark .facts{border-color:rgba(255,255,255,.18)}
.sec.dark .facts h4{color:#7d9bd4}
.sec.dark .facts p{color:rgba(255,255,255,.8)}

.split{display:grid;grid-template-columns:6fr 5fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split.rev > *:first-child{order:2}
.split-media{position:relative}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.split-media.tall img{aspect-ratio:3/4}
.split-media::after{content:"";position:absolute;inset:0;transform:translate(16px,16px);border:1px solid var(--blue);pointer-events:none;z-index:-1}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2.25rem}.split.rev > *:first-child{order:0}}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.gallery figure{margin:0;overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{margin-top:.7rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.checks{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem 2rem}
.checks li{position:relative;padding-left:1.6rem;font-size:.98rem;color:var(--muted);line-height:1.6}
.checks li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--blue);
  box-shadow:4px -4px 0 var(--blue);
}
.sec.dark .checks li{color:rgba(255,255,255,.7)}
.sec.dark .checks li::before{background:#7d9bd4;box-shadow:4px -4px 0 #7d9bd4}

.cta-band{background:var(--blue);color:#fff;padding:clamp(3.5rem,9vh,6rem) 0}
.cta-band h2{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.14;max-width:18ch}
.cta-band p{margin-top:1rem;color:rgba(255,255,255,.78);max-width:48ch}
.cta-inner{display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:end;justify-content:space-between}
.cta-band .btn{color:#fff;border-color:rgba(255,255,255,.55);flex:none}
.cta-band .btn:hover{background:#fff;color:var(--blue);border-color:#fff}

.prose{max-width:70ch}
.prose h2{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:2.75rem;margin-bottom:.8rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:1.15rem;margin-top:1.75rem;margin-bottom:.4rem}
.prose p,.prose li{color:var(--muted);line-height:1.8;font-size:.99rem}
.prose p + p{margin-top:.9rem}
.prose ul,.prose ol{margin:.7rem 0 0 1.2rem}
.prose li + li{margin-top:.35rem}
.prose a{color:var(--blue);border-bottom:1px solid rgba(38,77,152,.35)}
.prose dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;margin-top:1rem}
.prose dt{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);padding-top:.35em}
.prose dd{color:var(--muted);line-height:1.7}
.todo{
  display:inline-block;border:1px solid rgba(164,52,43,.4);background:rgba(164,52,43,.06);
  color:#a4342b;font-size:.78rem;letter-spacing:.06em;padding:.15rem .5rem;
}
.notice{border-left:2px solid var(--blue);padding:.9rem 0 .9rem 1.25rem;margin-top:1.5rem;color:var(--muted);font-size:.95rem;line-height:1.7}
@media(max-width:600px){.prose dl{grid-template-columns:1fr;gap:.15rem}.prose dt{padding-top:.8rem}}

.next-pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.next-pages a{
  border:1px solid var(--hairline);padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.35rem;
  transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.next-pages a:hover{border-color:var(--blue);transform:translateY(-3px)}
.next-pages strong{font-family:var(--display);font-weight:var(--dwt,400);font-size:1.15rem}
.next-pages span{font-size:.9rem;color:var(--muted);line-height:1.6}
.sec.dark .next-pages a{border-color:rgba(255,255,255,.2)}
.sec.dark .next-pages span{color:rgba(255,255,255,.6)}

/* ---------- Untermenü in der Hauptnavigation ---------- */
nav ul li.has-sub{position:relative}
.subnav{
  position:absolute;left:-1.1rem;top:100%;padding:.6rem 0;margin-top:.5rem;min-width:210px;
  list-style:none;display:block;
  background:rgba(24,22,19,.96);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s ease,transform .35s cubic-bezier(.16,1,.3,1),visibility .28s;
  z-index:60;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:none}
.subnav li{display:block}
.subnav a{
  display:block;padding:.55rem 1.4rem;font-size:.92rem;color:rgba(255,255,255,.72);
  transition:color .25s ease,background .25s ease;
}
.subnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.subnav a::after{display:none}
.subnav a[aria-current]{color:#9db7ea}
header nav ul a[aria-current]:not(.btn)::after{transform:scaleX(1);background:rgba(255,255,255,.5)}
/* Untermenü liegt auf hellen Unterseiten auf dunklem Kopf, daher gleich */
.pillnav ~ * .subnav{}

/* ---------- Gruppen im Vollbild-Menü ---------- */
.m-group{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  margin:2rem 0 .5rem;
}
.m-group:first-child{margin-top:0}
.mnav .m-link{font-size:clamp(1.25rem,5vw,1.7rem);padding:.28em 0}
@media(min-width:901px){
  .mnav{align-items:flex-start;padding-top:12vh}
  .m-links{max-width:520px}
  .mnav .m-link{font-size:clamp(1.2rem,1.9vw,1.55rem);padding:.2em 0}
  .m-group{margin:1.9rem 0 .4rem}
  .mnav .m-meta{align-self:flex-start;padding-bottom:0;margin-top:0}
}

/* ---------- Verweise von der Startseite in die Unterseiten ---------- */
.bauformen .arrow-link{margin-top:1.25rem}
.pz-more{margin-top:clamp(1.5rem,4vh,2.5rem);color:#fff;font-size:.92rem}
.pz-more .circ{width:36px;height:36px}
.faq .arrow-link{margin-top:2.5rem;color:#fff}
.faq .arrow-link .circ{width:38px;height:38px}
.r-link{color:var(--ink)}
.r-link:hover{color:var(--blue);border-bottom-color:var(--blue)}
body.menu-open header nav{opacity:0;pointer-events:none}

/* ---------- Sprungmarken im Seitenkopf ---------- */
.ph-meta.jump a{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.22);padding:.45rem .8rem;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.ph-meta.jump a:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
/* Anker nicht unter die Pill-Nav rutschen lassen */
[id]{scroll-margin-top:96px}

/* ============================================================
   v3 — fliessender Aufbau: Faden, Kapitel, Ueberlappungen, Heroes
   ============================================================ */

/* Faden: eine Linie, die von oben nach unten mit dem Scrollen gefuellt wird.
   Sie verbindet die Abschnitte statt sie zu trennen. */
.thread{position:fixed;left:clamp(.9rem,2.2vw,2rem);top:0;bottom:0;width:1px;z-index:35;pointer-events:none;
  background:rgba(33,31,27,.14);mix-blend-mode:multiply}
.thread i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--blue);transition:height .15s linear}
.thread b{position:absolute;left:-1px;top:50%;transform:rotate(-90deg) translate(-50%,-50%);transform-origin:left top;
  white-space:nowrap;font-weight:400;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  background:var(--paper);padding:0 .6rem}
.on-dark .thread{background:rgba(255,255,255,.14);mix-blend-mode:normal}
.on-dark .thread b{color:rgba(255,255,255,.6);background:var(--ink)}
.on-dark .thread i{background:#7d9bd4}
@media(max-width:1080px){.thread{display:none}}

/* Kapitelmarke: Nummer + Titel in einer Zeile, ersetzt die Eyebrow-Zeile */
.kap{display:flex;align-items:baseline;gap:1rem;margin-bottom:clamp(1.5rem,3.5vh,2.5rem)}
.kap b{font-weight:400;font-family:var(--display);font-size:.95rem;color:var(--blue);letter-spacing:.06em}
.kap span{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.dark .kap span,.sec.dark .kap span{color:rgba(255,255,255,.55)}
.dark .kap b,.sec.dark .kap b{color:#9db7ea}

/* Ueberlappungen: ein Element ragt in den vorigen Abschnitt hinein */
.lift{position:relative;z-index:2;margin-top:calc(-1 * clamp(4rem,12vh,9rem))}
.lift-sm{position:relative;z-index:2;margin-top:calc(-1 * clamp(2rem,6vh,4rem))}
.sink{padding-bottom:clamp(6rem,16vh,12rem)}
.sink-sm{padding-bottom:clamp(4rem,10vh,7rem)}
/* Hell-zu-dunkel ohne harte Kante */
.fade-dark{background:var(--ink)}
.fade-light{background:var(--ink);color:#fff}
.fade-stone{background:var(--stone)}
/* Abschnitte im Fluss: gleicher Rhythmus, keine Baender */
.flow > section:not(.hero):not(.prozess):not(.feature):not(.ph):not(.cta-band){padding-block:clamp(3rem,8vh,6rem)}
.flow > section.tight{padding-top:0}
.flow > section.dark{background:var(--ink);color:#fff}
.flow > section.dark p{color:rgba(255,255,255,.66)}
.flow > section.dark .section-title::after{color:#7c9ede}
.flow > section.stone{background:var(--stone)}

/* Helle Heroes: dunkle Navigation */
body.light-head header{color:var(--ink)}
body.light-head .brand img{filter:none}
body.light-head .brand-sub{color:var(--muted)}
body.light-head nav ul a:not(.btn)::after{background:var(--ink)}
body.light-head .lang{color:var(--muted)}
body.light-head header .btn{color:var(--ink);border-color:rgba(33,31,27,.45)}
body.light-head .burger span{background:var(--ink)}

/* ---------- Hero-Grundgeruest ---------- */
.ph{position:relative;overflow:hidden}
.ph .crumbs{margin-bottom:1.4rem}
.ph.light .crumbs{color:var(--muted)}
.ph.light .crumbs a:hover{color:var(--ink);border-bottom-color:var(--hairline)}
.ph.light .crumbs span[aria-current]{color:var(--ink)}
.ph h1{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.04;letter-spacing:.005em}
.ph h1 em{font-style:normal;color:#7d9bd4}
.ph.light h1 em{color:var(--blue)}
.ph .lead{margin-top:1.4rem;color:rgba(255,255,255,.62);max-width:46ch;font-size:1.06rem;line-height:1.75}
.ph.light .lead{color:var(--muted)}
.ph .cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center}
.ph .btn{color:#fff;border-color:rgba(255,255,255,.5)}
.ph.light .btn{color:var(--ink);border-color:rgba(33,31,27,.4)}
.ph.light .btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.ph .ghost{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.ph.light .ghost{color:var(--muted);border-bottom-color:var(--hairline)}
.ph figure{margin:0;overflow:hidden;background:#2a2723}
.ph img{width:100%;height:100%;object-fit:cover;display:block}

/* 76 — Text links, zwei laufende Bildspalten rechts (Treppenbau) */
.ph-76{background:var(--ink);color:#fff;min-height:100svh;display:grid;align-items:center}
.ph-76 .wrap{display:grid;grid-template-columns:6fr 6fr;gap:clamp(2rem,6vw,6rem);align-items:center;padding-top:clamp(6rem,14vh,8rem);padding-bottom:clamp(2rem,5vh,3rem)}
.ph-76 .cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;height:min(88vh,860px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.ph-76 .col{display:flex;flex-direction:column;gap:1rem;animation:colUp 42s linear infinite}
.ph-76 .col:nth-child(2){animation-name:colDown;animation-duration:50s;margin-top:-30%}
.ph-76 .col figure{flex:none;aspect-ratio:4/5}
.ph-76 .col figure:nth-child(3n){aspect-ratio:1}
@keyframes colUp{to{transform:translateY(-50%)}}
@keyframes colDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media(max-width:900px){.ph-76 .wrap{grid-template-columns:1fr}.ph-76 .cols{height:52vh}}

/* 117 — Headline links, Text rechts, zwei versetzte Bilder (Holzboeden) */
.ph-117{background:var(--stone);color:var(--ink);padding-top:clamp(7rem,15vh,9.5rem)}
.ph-117 .top{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.ph-117 .pics{display:grid;grid-template-columns:4fr 8fr;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2.5rem,6vh,4rem);align-items:end}
.ph-117 .pics figure:first-child{aspect-ratio:4/5;margin-bottom:clamp(2rem,6vh,4rem)}
.ph-117 .pics figure:last-child{aspect-ratio:16/10}
@media(max-width:900px){.ph-117 .top{grid-template-columns:1fr}.ph-117 .pics{grid-template-columns:1fr 1fr}.ph-117 .pics figure:first-child{margin-bottom:0}}

/* 113 — Vollbild, Text oben rechts, Headline unten links (Unterboeden) */
.ph-113{background:var(--ink);color:#fff;min-height:100svh;display:grid}
.ph-113 > figure{position:absolute;inset:0}
.ph-113 > figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,15,.9) 0,rgba(20,18,15,.25) 55%,rgba(20,18,15,.55) 100%)}
.ph-113 .wrap{position:relative;z-index:1;display:grid;grid-template-rows:auto 1fr auto;padding-top:clamp(7rem,15vh,9rem);padding-bottom:clamp(2.5rem,6vh,4rem);min-height:100svh}
.ph-113 .lead{justify-self:end;text-align:left;max-width:38ch;color:rgba(255,255,255,.78);margin-top:0}
.ph-113 .bottom{align-self:end}
.ph-113 h1{max-width:14ch}

/* 110 — Text links, zwei Bilder ungleicher Hoehe rechts (Moebel) */
.ph-110{background:var(--paper);color:var(--ink);padding-top:clamp(7rem,15vh,9.5rem);padding-bottom:0}
.ph-110 .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:stretch}
.ph-110 .txt{display:flex;flex-direction:column;justify-content:space-between;gap:3rem;padding-bottom:clamp(2rem,5vh,3rem)}
.ph-110 .pics{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1rem,2vw,1.5rem);align-items:start}
.ph-110 .pics figure:first-child{aspect-ratio:3/4;grid-row:span 2}
.ph-110 .pics figure:last-child{aspect-ratio:1;margin-top:clamp(3rem,10vh,7rem)}
@media(max-width:900px){.ph-110 .wrap{grid-template-columns:1fr}.ph-110 .pics figure:last-child{margin-top:0}}

/* 107 — Headline, darunter Bildstreifen mit wechselnden Hoehen (Leistungen) */
.ph-107{background:var(--ink);color:#fff;padding-top:clamp(7rem,15vh,9.5rem)}
.ph-107 .top{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.ph-107 .strip{display:grid;grid-template-columns:2fr 3fr 4fr 3fr 2fr;gap:clamp(.6rem,1.2vw,1rem);align-items:end;margin-top:clamp(2.5rem,7vh,4.5rem);height:clamp(220px,38vh,420px)}
.ph-107 .strip figure{height:60%}
.ph-107 .strip figure:nth-child(2){height:78%}
.ph-107 .strip figure:nth-child(3){height:100%}
.ph-107 .strip figure:nth-child(4){height:84%}
.ph-107 .strip figure:nth-child(5){height:52%}
@media(max-width:900px){.ph-107 .top{grid-template-columns:1fr}.ph-107 .strip{grid-template-columns:1fr 1fr 1fr}.ph-107 .strip figure:nth-child(n+4){display:none}}

/* 108 — zentrierter Text, gestaffelte Bildreihe am unteren Rand (Betrieb) */
.ph-108{background:var(--ink);color:#fff;padding-top:clamp(7rem,15vh,9.5rem);text-align:center}
.ph-108 h1{margin:0 auto;max-width:16ch}
.ph-108 .lead{margin-left:auto;margin-right:auto;text-align:center}
.ph-108 .cta{justify-content:center}
.ph-108 .row{display:grid;grid-template-columns:2fr 3fr 5fr 3fr 2fr;gap:clamp(.6rem,1.2vw,1rem);align-items:end;margin-top:clamp(3rem,8vh,5rem);height:clamp(200px,34vh,380px);
  margin-left:calc(-1 * clamp(1.25rem,4vw,3.5rem));margin-right:calc(-1 * clamp(1.25rem,4vw,3.5rem))}
.ph-108 .row figure{height:58%}
.ph-108 .row figure:nth-child(2){height:74%}
.ph-108 .row figure:nth-child(3){height:100%}
.ph-108 .row figure:nth-child(4){height:82%}
.ph-108 .row figure:nth-child(5){height:50%}
.ph-108 .crumbs{justify-content:center}
@media(max-width:900px){.ph-108 .row{grid-template-columns:1fr 1fr 1fr}.ph-108 .row figure:nth-child(n+4){display:none}}

/* 79 — Bildraster vollflaechig, Text mittig (Referenzen) */
.ph-79{background:var(--ink);color:#fff;min-height:100svh;display:grid;align-items:center;text-align:center}
.ph-79 .grid{position:absolute;inset:-6% -4%;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:.8rem;transform:rotate(-3deg);opacity:.55}
.ph-79 .grid figure{aspect-ratio:4/5}
.ph-79 .grid figure:nth-child(4n){margin-top:3rem}
.ph-79::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,18,15,.82) 0,rgba(20,18,15,.55) 45%,rgba(20,18,15,.25) 100%)}
.ph-79 .wrap{position:relative;z-index:1;padding-top:clamp(6rem,14vh,8rem)}
.ph-79 h1{margin:0 auto;max-width:14ch}
.ph-79 .lead{margin-left:auto;margin-right:auto;text-align:center;color:rgba(255,255,255,.78)}
.ph-79 .cta{justify-content:center}
.ph-79 .crumbs{justify-content:center}
@media(max-width:900px){.ph-79 .grid{grid-template-columns:repeat(3,1fr)}}

/* 114 — Text links oben, Bild rechts, Beschreibung unten rechts (WoodVibes) */
.ph-114{background:#1b1714;color:#fff;min-height:88svh;display:grid;align-items:center}
.ph-114 .wrap{display:grid;grid-template-columns:5fr 6fr;gap:2rem clamp(2.5rem,6vw,6rem);align-items:center;padding-top:clamp(7rem,15vh,9.5rem);padding-bottom:clamp(3rem,7vh,5rem)}
.ph-114 .lead{max-width:40ch}
.ph-114 .visual{position:relative}
.ph-114 .visual figure{margin:0;overflow:hidden;background:#2a2723;aspect-ratio:4/3}
.ph-114 .visual img{width:100%;height:100%;object-fit:cover;display:block}
.ph-114 .visual .mark{position:absolute;left:clamp(1rem,2.5vw,2rem);top:clamp(1rem,2.5vw,2rem);width:clamp(120px,14vw,190px);padding:.9rem 1.1rem;background:rgba(27,23,20,.82);backdrop-filter:blur(6px)}
.ph-114 .visual .mark img{width:100%;height:auto;object-fit:contain}
@media(max-width:900px){.ph-114 .wrap{grid-template-columns:1fr;padding-top:clamp(6rem,12vh,8rem)}.ph-114 .visual .mark{width:120px}}

/* 84 — geboxter Split mit Foto (Kontakt) */
.ph-84{background:var(--stone);color:var(--ink);padding-top:clamp(7rem,15vh,9.5rem)}
.ph-84 .box{display:grid;grid-template-columns:6fr 5fr;border:1px solid var(--hairline);background:var(--paper)}
.ph-84 .box > div{padding:clamp(2rem,4vw,3.5rem)}
.ph-84 .box figure{aspect-ratio:auto;min-height:420px}
.ph-84 .facts{margin-top:2rem;padding-top:1.5rem}
@media(max-width:900px){.ph-84 .box{grid-template-columns:1fr}.ph-84 .box figure{min-height:280px;order:-1}}

/* 104 — Headline mit Bildern im Text (Fragen) */
.ph-104{background:var(--stone);color:var(--ink);padding-top:clamp(7rem,15vh,9.5rem);text-align:center}
.ph-104 h1{margin:0 auto;max-width:22ch;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.18}
.ph-104 h1 .in{display:inline-block;vertical-align:middle;width:clamp(2.6em,6vw,3.6em);height:1.05em;overflow:hidden;border-radius:2px;margin:0 .12em;transform:translateY(-.06em)}
.ph-104 h1 .in img{width:100%;height:100%;object-fit:cover;display:block}
.ph-104 .lead{margin-left:auto;margin-right:auto;text-align:center}
.ph-104 .cta{justify-content:center}
.ph-104 .crumbs{justify-content:center}

/* 97 — ruhig, geboxt, zentriert (Rechtliches) */
.ph-97{background:var(--stone);color:var(--ink);padding-top:clamp(7rem,15vh,9.5rem)}
.ph-97 .box{border:1px solid var(--hairline);background:var(--paper);padding:clamp(2.5rem,6vw,5rem);text-align:center}
.ph-97 h1{margin:0 auto;max-width:16ch;font-size:clamp(2rem,4vw,3.2rem)}
.ph-97 .lead{margin-left:auto;margin-right:auto;text-align:center}
.ph-97 .crumbs{justify-content:center}

/* ---------- Bausteine, die auf den Unterseiten den Fluss tragen ---------- */
/* Grosses Bild, das aus einem Abschnitt in den naechsten laeuft */
.bleed{margin-top:clamp(2rem,5vh,3.5rem)}
.bleed img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
/* Zwei Spalten, Text bleibt beim Scrollen stehen, Bilder laufen vorbei */
.sticky-2{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.sticky-2 > .stick{position:sticky;top:clamp(5rem,12vh,7rem)}
.sticky-2 .stack{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.sticky-2 .stack figure{margin:0;overflow:hidden}
.sticky-2 .stack img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sticky-2 .stack figcaption{margin-top:.6rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dark .sticky-2 .stack figcaption{color:rgba(255,255,255,.5)}
@media(max-width:900px){.sticky-2{grid-template-columns:1fr}.sticky-2 > .stick{position:static}}
/* Zahlenzeile statt Karten */
.numline{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem 2rem;border-top:1px solid var(--hairline);padding-top:1.75rem}
.numline b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1;color:var(--ink)}
.numline span{display:block;margin-top:.4rem;font-size:.85rem;color:var(--muted);line-height:1.5}
.dark .numline{border-color:rgba(255,255,255,.18)}
.dark .numline b{color:#fff}
.dark .numline span{color:rgba(255,255,255,.55)}
/* Textabsatz gross, als Ueberleitung */
.bridge{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.4;max-width:34ch}
.bridge .dim{color:var(--muted)}
.dark .bridge .dim{color:rgba(255,255,255,.5)}
/* Zitat/O-Ton */
.oton{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;max-width:64ch}
.oton img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.oton p{font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.45}
.oton small{display:block;margin-top:.7rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Startseite im Fluss ---------- */
.intro.fade-light{background:var(--ink)}
.home .l-panels{min-height:520px}
.home .panel{border:1px solid rgba(255,255,255,.08)}
.hist.fade-light-top{background:var(--paper)}
.hist.fade-light-top .hist-line{padding-top:clamp(2rem,5vh,3.5rem)}
.feature.into-dark::after{background:rgba(20,18,15,.28)}
.feature.into-dark img{height:min(92vh,820px)}
.bf-card{border:0;border-top:1px solid var(--hairline);padding:1.4rem 0 1.5rem}
.bf-card:hover{transform:none;border-top-color:var(--blue)}
.bf-grid{grid-template-columns:1fr 1fr;gap:1rem 2rem}
.bf-card svg{max-width:150px;margin-bottom:.6rem}
.moebel-home .split-media img{aspect-ratio:4/5}
.home .faq .sticky-2{align-items:start}
.home .faq .faq-list{max-width:none}
.home .faq .arrow-link{color:#fff}
.home .r-head{margin-bottom:clamp(2rem,4vh,3rem)}
.home .hist-head p{color:var(--muted);max-width:52ch;line-height:1.75}
.kap + .lead-2col,.kap + .tm-lead,.kap + .split,.kap + .sticky-2{margin-top:0}
@media(max-width:560px){.bf-grid{grid-template-columns:1fr}}
/* Nachjustierung Heroes */
.ph-113{display:block}
.ph-117,.ph-84,.ph-104,.ph-97{padding-bottom:clamp(3rem,7vh,5rem)}
.ph-110 .pics{padding-bottom:0}
.ph + section.sink-sm{padding-top:clamp(3rem,8vh,6rem)}

/* ---------- Fullscreen-Menue v3 ---------- */
.mnav{padding:0;justify-content:flex-start;flex-direction:column;align-items:stretch;gap:0}
.mn-top{display:flex;align-items:center;justify-content:space-between;padding:1.6rem clamp(1.25rem,4vw,3.5rem);border-bottom:1px solid var(--hairline)}
.mn-top img{height:40px;width:auto}
.mnav .m-close{position:static;font-size:2.2rem;display:block}
.mn-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;padding:2rem clamp(1.25rem,4vw,3.5rem) 3rem;overflow-y:auto}
.mn-main{display:flex;flex-direction:column}
.mn-main .m-link{font-family:var(--display);font-size:clamp(2rem,8vw,2.8rem);padding:.3em 0;border-bottom:1px solid var(--hairline);line-height:1.1}
.mn-side{display:flex;flex-direction:column}
.m-sub{display:block;padding:.45em 0;font-size:1.05rem;color:var(--ink);transition:color .25s ease,padding-left .3s ease}
.m-sub:hover{color:var(--blue);padding-left:.4em}
.mn-cta{display:grid;gap:.9rem;align-content:start}
.mn-cta .btn{text-align:center;color:var(--ink);border-color:rgba(33,31,27,.45)}
.mn-cta .btn:first-child{background:var(--blue);color:#fff;border-color:var(--blue)}
.mn-cta .btn:first-child:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.mn-mail{font-size:.98rem;color:var(--blue);border-bottom:1px solid rgba(38,77,152,.35);justify-self:start;margin-top:.4rem}
.mn-meta{color:var(--muted);font-size:.9rem;line-height:1.7;margin-top:.4rem}
.mnav .m-group{margin:0 0 .6rem}
@media(min-width:901px){
  .mnav{padding-top:0;align-items:stretch}
  .mn-grid{grid-template-columns:1.4fr 1fr 1fr;gap:clamp(3rem,6vw,7rem);padding-top:clamp(3rem,8vh,6rem);align-items:start}
  .mn-main .m-link{font-size:clamp(2.2rem,3.6vw,3.4rem)}
  .mn-cta{padding-top:2.2rem}
}
body.menu-open header{opacity:0;pointer-events:none}

/* ---------- Mobile-Feinschliff ---------- */
.prozess .kap span,.wv .kap span,.faq .kap span,.intro .kap span,.feature-text .kap span,.ph .kap span{color:rgba(255,255,255,.55)}
.prozess .kap b,.wv .kap b,.faq .kap b,.intro .kap b,.feature-text .kap b{color:#9db7ea}
@media(max-width:900px){
  .hero{padding-top:5.5rem}
  .stair{height:min(52vh,460px)}
  .hero-badge{display:none}
  .hero-art{gap:1.25rem}
  .hero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .home .l-panels{gap:.75rem}
  .home .panel{min-height:220px}
  .panel-text p{display:none}
  .lift{margin-top:calc(-1 * clamp(2rem,6vh,4rem))}
  .numline{grid-template-columns:1fr 1fr;gap:1.2rem 1.5rem}
  .numline b{font-size:1.8rem}
  .bridge{font-size:1.3rem}
  .section-title{font-size:clamp(1.8rem,7.5vw,2.4rem)}
  .kap{margin-bottom:1.2rem}
  .hist-item figure{height:200px}
  .tm-photo{max-width:none}
  .tm-lead{gap:1.5rem}
  .tm-lead + .tm-lead{margin-top:3rem}
  .r-mosaic{grid-auto-rows:clamp(150px,40vw,240px)}
  .r-item figcaption{padding:.8rem .9rem;font-size:.78rem}
  .ph h1{font-size:clamp(2.2rem,10vw,3rem)}
  .ph .lead{font-size:1rem}
  .ph-113 .lead{justify-self:start;margin-top:1rem}
  .ph-104 h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .ph-104 h1 .in{width:2.4em;height:1em}
  .sticky-2 .stack{grid-template-columns:1fr 1fr;gap:.75rem}
  .sticky-2 .stack figcaption{font-size:.7rem}
  .flow > section:not(.hero):not(.prozess):not(.feature):not(.ph):not(.cta-band){padding-block:clamp(2.5rem,7vh,4rem)}
  .feature.into-dark img,.feature img{height:min(70vh,560px)}
  .pz-shot figure:nth-child(2){display:none}
  .pz-shot{grid-template-columns:1fr}
  .thread{display:none}
}
@media(max-width:560px){.sticky-2 .stack{grid-template-columns:1fr}}

/* ---------- Mobile-Menue: ein Bildschirm, mit Luft ---------- */
@media(max-width:900px){
  .mnav{height:100dvh}
  .mn-top{padding:1.1rem clamp(1.25rem,4vw,3.5rem)}
  .mn-grid{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:2.2rem;padding:1.6rem clamp(1.25rem,4vw,3.5rem) 1.5rem;overflow-y:auto}
  .mnav .m-group{margin:0 0 .5rem;font-size:.66rem}
  .mn-main .m-link{font-size:clamp(1.7rem,7vw,2.2rem);padding:.32em 0}
  .mn-side{display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem}
  .mn-side .m-group{grid-column:1/-1}
  .m-sub{padding:.4em 0;font-size:1rem}
  .mn-cta{grid-template-columns:1fr 1fr;gap:.75rem .75rem;margin-top:auto}
  .mn-cta .btn{padding:.95rem .5rem;font-size:.74rem}
  .mn-mail{grid-column:1/-1;margin-top:.2rem;font-size:.95rem}
  .mn-meta{grid-column:1/-1;margin-top:0;font-size:.84rem;line-height:1.55}
}
@media(max-width:900px) and (max-height:720px){
  .mn-grid{gap:1.4rem}
  .mn-main .m-link{font-size:1.45rem;padding:.24em 0}
  .m-sub{padding:.25em 0;font-size:.95rem}
  .mn-meta{display:none}
}

/* Pfeile als Linien-Icons statt Glyphen */
.circ svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;display:block}
.kap b:empty{display:none}

/* Flaechen statt Verlaeufe */
.feature::after{background:rgba(20,18,15,.22)}
.feature-text{background:rgba(20,18,15,.72);left:auto;right:auto;max-width:min(560px,100%);padding:clamp(1.5rem,3vw,2.5rem);margin:0 clamp(1.25rem,4vw,3.5rem) clamp(1.5rem,4vh,2.5rem)}
.feature-text .kap span{color:rgba(255,255,255,.6)}
.ph-113 > figure::after{background:rgba(20,18,15,.55)}
.ph-79::after{background:rgba(20,18,15,.62)}
.panel::after{background:rgba(20,18,15,.35)}
.panel.texture::after{background:rgba(20,18,15,.35)}
.r-item figcaption{background:rgba(33,39,33,.82)}
.sink,.sink-sm{padding-bottom:clamp(4rem,10vh,7rem)}
.home .hist-head p .arrow-link{display:flex;margin-top:1.1rem}

@media(max-width:900px){.brand img{height:40px}.pill-brand img{height:22px}}

/* ---------- Korrekturen nach Sichtung ---------- */
.dark .bridge,.fade-light .bridge{color:#fff}
.dark .bridge .dim,.fade-light .bridge .dim{color:rgba(255,255,255,.55)}
.dark .checks li,.dark .rows p,.dark .lead-2col p,.dark .stick p,.dark .notice,.dark .faq-a{color:rgba(255,255,255,.7)}
.dark .rows h3,.dark .faq-list summary{color:#fff}
.dark .rows li,.dark .faq-list details,.dark .numline,.dark .facts{border-color:rgba(255,255,255,.18)}
.dark .checks li::before{background:#7d9bd4;box-shadow:4px -4px 0 #7d9bd4}
.dark .notice{border-left-color:#7d9bd4}
.dark .facts h4{color:#9db7ea}.dark .facts p{color:rgba(255,255,255,.8)}
.dark .arrow-link{color:#fff}
.stick p + p{margin-top:1rem}
.next-pages{gap:0}
.next-pages a{border:0;border-top:1px solid var(--hairline);padding:1.3rem 0;transition:padding-left .3s ease}
.next-pages a:hover{transform:none;padding-left:.5rem}
.next-pages a strong{color:var(--ink)}
.home .faq{background:var(--paper);color:var(--ink)}
.home .faq .kap b{color:var(--blue)}.home .faq .kap span{color:var(--muted)}
.home .faq p{color:var(--muted)}
.home .faq .arrow-link{color:var(--ink)}
.home .faq .faq-list summary{color:var(--ink)}
.home .faq .faq-a{color:var(--muted)}
.home .faq .faq-list details{border-color:var(--hairline)}
.home .faq .faq-list summary::after{color:var(--blue)}
.home .faq .arrow-link:hover .circ{background:var(--ink);color:#fff}
.k-layout.single{grid-template-columns:minmax(0,760px)}
.wv-products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.5vw,1.25rem)}
.wv-products figure{margin:0;background:var(--stone)}
.wv-products img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.wv-products figcaption{margin-top:.6rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:700px){.wv-products{grid-template-columns:1fr 1fr}}

/* ---------- Team-Video ---------- */
.tm-video{margin:clamp(3rem,8vh,6rem) 0 0}
.tm-video-frame{position:relative;background:#1b1714;overflow:hidden}
.tm-video video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tm-video-play{
  position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  display:flex;align-items:flex-end;gap:.9rem;padding:clamp(1.25rem,3vw,2.5rem);
  background:linear-gradient(to top,rgba(27,23,20,.55),rgba(27,23,20,0) 55%);
  color:#fff;font:inherit;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  transition:opacity .4s ease;
}
.tm-video-play .circ{
  width:56px;height:56px;flex:none;border:1px solid rgba(255,255,255,.6);border-radius:50%;
  display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s;
}
.tm-video-play .circ svg{width:18px;height:18px;fill:currentColor;stroke:none;margin-left:2px}
.tm-video-play:hover .circ{background:#fff;color:var(--ink);border-color:#fff;transform:scale(1.06)}
.tm-video-play:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.tm-video-frame.playing .tm-video-play{opacity:0;pointer-events:none}
.tm-video figcaption{margin-top:.8rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Team-Video: laeuft stumm, Klick schaltet Ton ein ---------- */
.tm-video-play{align-items:flex-end}
.tm-video-play .circ{width:48px;height:48px}
.tm-video-frame.sound .tm-video-play{opacity:0;pointer-events:none}

/* ---------- Ablauf: Treppe mit Wange und Pfosten ---------- */
.pz-wange{opacity:0;transition:opacity .8s ease}
.pz-stair.in .pz-wange{opacity:1}
.pz-post{opacity:0;transition:opacity .5s ease .2s}
.pz-post line{opacity:1}
.pz-post.on{opacity:1}

/* ---------- Startseite: Betrieb (Team + Geschichte) ---------- */
.betrieb{padding-top:clamp(3rem,8vh,6rem)!important}
.bt-head{display:grid;grid-template-columns:5fr 7fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,5vh,3.5rem)}
.bt-head .section-title{margin-bottom:0}
.bt-head p{color:var(--muted);max-width:52ch;line-height:1.75}
.betrieb .tm-video{margin-top:0}
.bt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2.5rem,6vh,4rem)}
.bt-card{display:grid;grid-template-columns:5fr 7fr;border:1px solid var(--hairline);background:var(--paper);transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.bt-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.bt-card figure{margin:0;overflow:hidden;background:var(--stone)}
.bt-card img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.bt-card:hover img{transform:scale(1.04)}
.bt-text{padding:clamp(1.4rem,2.5vw,2.2rem);display:flex;flex-direction:column;gap:.6rem}
.bt-tag{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.bt-card h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2}
.bt-card p{color:var(--muted);font-size:.95rem;line-height:1.7}
.bt-card .arrow-link{margin-top:auto;padding-top:1rem}
.bt-card:hover .arrow-link .circ{background:var(--ink);color:#fff}
@media(max-width:900px){
  .bt-head{grid-template-columns:1fr}
  .bt-grid{grid-template-columns:1fr}
  .bt-card{grid-template-columns:1fr}
  .bt-card img{min-height:0;aspect-ratio:16/10}
}

/* ---------- Startseite: Referenzen als schwebende Bildwolke ---------- */
.rf-hero{position:relative;background:var(--stone);min-height:100svh;display:grid;align-items:center;overflow:hidden;padding:clamp(5rem,12vh,8rem) 0!important}
.rf-center{position:relative;z-index:2;text-align:center;max-width:720px}
.rf-center .kap{justify-content:center}
.rf-center h2{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.06;letter-spacing:.005em}
.rf-center h2 em{font-style:normal;color:var(--blue)}
.rf-center p{margin:1.4rem auto 0;color:var(--muted);max-width:44ch;font-size:1.06rem;line-height:1.75}
.rf-center .cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:center}
.rf-center .ghost{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hairline);padding-bottom:2px}
.rf-center .ghost:hover{color:var(--ink);border-bottom-color:var(--ink)}
.rf-cloud{position:absolute;inset:0;z-index:1;pointer-events:none}
.rf-float{position:absolute;left:var(--x);top:var(--y);width:var(--w);pointer-events:auto;display:block;overflow:hidden;background:var(--ink);box-shadow:0 24px 60px -30px rgba(33,31,27,.5);will-change:transform}
.rf-float img{width:100%;aspect-ratio:var(--r,4/5);object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .5s ease}
.rf-float:hover img{transform:scale(1.06);filter:brightness(.7)}
.rf-float span{position:absolute;left:0;right:0;bottom:0;padding:.8rem .9rem;color:#fff;font-size:.78rem;letter-spacing:.06em;line-height:1.35;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);background:linear-gradient(to top,rgba(33,31,27,.8),rgba(33,31,27,0))}
.rf-float:hover span{opacity:1;transform:none}
.rf-float:nth-child(1){--x:4%;--y:9%;--w:15%;--r:4/5}
.rf-float:nth-child(2){--x:23%;--y:36%;--w:10%;--r:3/4}
.rf-float:nth-child(3){--x:4%;--y:68%;--w:17%;--r:3/2}
.rf-float:nth-child(4){--x:78%;--y:8%;--w:16%;--r:4/5}
.rf-float:nth-child(5){--x:68%;--y:40%;--w:10%;--r:3/4}
.rf-float:nth-child(6){--x:80%;--y:70%;--w:15%;--r:3/2}
.rf-float:nth-child(7){--x:39%;--y:3%;--w:11%;--r:3/2}
.rf-float:nth-child(8){--x:52%;--y:79%;--w:13%;--r:3/2}
@media(max-width:900px){
  .rf-hero{min-height:0;display:block}
  .rf-cloud{position:static;display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:0 clamp(1.25rem,4vw,3.5rem);margin-top:2.5rem}
  .rf-float{position:static;width:auto;box-shadow:none}
  .rf-float img{aspect-ratio:3/4}
  .rf-float span{opacity:1;transform:none;font-size:.62rem;padding:.5rem}
}
@media(max-width:560px){.rf-cloud{grid-template-columns:repeat(2,1fr)}}

/* ---------- Horizontale Scroller (Zeitstrahl, Ausstellung) ---------- */
.tl-head,.au-head{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,5vh,3.5rem)}
.tl-head .section-title{margin-bottom:0}
.tl-nav{display:flex;gap:.5rem}
.tl-btn{width:48px;height:48px;border:1px solid var(--hairline);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.tl-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tl-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.tl-btn:disabled{opacity:.3;cursor:default}
.tl-btn:disabled:hover{background:transparent;color:var(--ink);border-color:var(--hairline)}
.tl-viewport,.au-viewport{--gut:max(clamp(1.25rem,4vw,3.5rem),calc((100vw - 1360px)/2 + clamp(1.25rem,4vw,3.5rem)));scroll-padding-inline:var(--gut);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.tl-viewport::-webkit-scrollbar,.au-viewport::-webkit-scrollbar{display:none}
.tl-viewport.dragging,.au-viewport.dragging{cursor:grabbing;scroll-snap-type:none}
.tl-viewport.dragging *,.au-viewport.dragging *{pointer-events:none}
.tl-track{list-style:none;margin:0;display:flex;gap:clamp(1.5rem,3vw,3rem);padding:0 var(--gut);position:relative}
.tl-track::before{content:"";position:absolute;left:0;right:0;top:calc(var(--tl-img) + 2.2rem);height:1px;background:var(--hairline)}
.tl-track,.tl-item{--tl-img:clamp(220px,28vh,320px)}
.tl-item{flex:0 0 clamp(260px,26vw,360px);scroll-snap-align:start;position:relative;padding-bottom:1rem}
.tl-item figure{margin:0;height:var(--tl-img);overflow:hidden;background:#d9cfb8}
.tl-item img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25) contrast(.95);transition:filter .6s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.tl-item:hover img{filter:none;transform:scale(1.04)}
.tl-item:nth-last-child(-n+3) img{filter:none}
.tl-n{display:block;margin-top:1.4rem;font-family:var(--display);color:var(--blue);font-size:.95rem;letter-spacing:.06em;position:relative;padding-left:1.1rem}
.tl-n::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;background:var(--blue);transform:translateY(-50%)}
.tl-mark{display:block;margin-top:1rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.tl-item h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.25rem,1.8vw,1.6rem);margin-top:.5rem;line-height:1.2}
.tl-item p{color:var(--muted);font-size:.95rem;line-height:1.7;margin-top:.6rem;max-width:34ch}
.tl-hint{margin-top:1.5rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.archiv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2rem,5vh,3.5rem)}
.archiv figure{margin:0;overflow:hidden}
.archiv img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.archiv figure:hover img{transform:scale(1.04)}
.archiv figcaption{margin-top:.7rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){
  .tl-head,.au-head{grid-template-columns:1fr}
  .tl-nav{display:none}
  .archiv{grid-template-columns:1fr 1fr}
}

/* ---------- Referenzen: Liste mit Filter ---------- */
.rf-head{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,5vh,3.5rem)}
.rf-head .section-title{margin-bottom:0}
.rf-filter{display:flex;flex-wrap:wrap;gap:.5rem}
.rf-filter button{border:1px solid var(--hairline);background:transparent;color:var(--muted);font:inherit;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1.1rem;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.rf-filter button:hover{border-color:var(--ink);color:var(--ink)}
.rf-filter button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.rf-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2.5rem) clamp(1rem,2vw,1.5rem)}
.rf-card{display:block;position:relative;animation:rfIn .5s cubic-bezier(.16,1,.3,1)}
.rf-card[hidden]{display:none}
@keyframes rfIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rf-card figure{margin:0;overflow:hidden;background:var(--stone)}
.rf-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.rf-card:hover img{transform:scale(1.04)}
.rf-card-text{display:grid;gap:.25rem;padding:1rem 3.2rem 0 0}
.rf-card h3{font-family:var(--display);font-weight:var(--dwt,400);font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.2}
.rf-card p{color:var(--muted);font-size:.9rem}
.rf-card .circ{position:absolute;right:0;bottom:.3rem;width:38px;height:38px;border:1px solid var(--hairline);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s,transform .3s}
.rf-card .circ svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rf-card:hover .circ{background:var(--ink);color:#fff;transform:rotate(45deg)}
.rf-empty{color:var(--muted);padding:3rem 0;text-align:center}
.rf-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rf-prevnext a{border:1px solid var(--hairline);padding:1.3rem 1.5rem;display:grid;gap:.3rem;transition:border-color .3s}
.rf-prevnext a:hover{border-color:var(--blue)}
.rf-prevnext a:last-child{text-align:right}
.rf-prevnext span{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.rf-prevnext strong{font-family:var(--display);font-weight:var(--dwt,400);font-size:1.15rem}
@media(max-width:900px){.rf-head{grid-template-columns:1fr}.rf-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rf-list{grid-template-columns:1fr}.rf-prevnext{grid-template-columns:1fr}}

/* ---------- Referenzen: Ausstellung als Band ---------- */
.au-head{grid-template-columns:7fr 4fr;align-items:end}
.au-head .section-title{margin-bottom:.8rem}
.au-head .btn{margin-top:1.6rem;color:#fff;border-color:rgba(255,255,255,.5)}
.au-meta{font-size:.9rem;line-height:1.8;text-align:right}
.au-track{display:flex;gap:clamp(.75rem,1.5vw,1.25rem);padding:0 var(--gut)}
.au-track figure{flex:0 0 clamp(240px,28vw,420px);margin:0;scroll-snap-align:start;overflow:hidden}
.au-track img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.au-track figure:hover img{transform:scale(1.04)}
.au-track figcaption{margin-top:.6rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
@media(max-width:900px){.au-head{grid-template-columns:1fr}.au-meta{text-align:left}}


/* ---------- Abstand: Eyebrow nach dunkler Sektion ---------- */
.flow > .dark + section.tight,.flow > .fade-light + section.tight,.flow > .ph + section.tight,.flow > .dark + section.sink-sm,.flow > .fade-light + section.sink-sm,.prozess + .betrieb{padding-top:clamp(3rem,8vh,6rem)}

/* ---------- Zeitstrahl: Aufwertung ---------- */
.tl-count{display:inline-flex;align-items:baseline;gap:.35rem;margin-right:1rem;font-family:var(--display);font-size:1rem;letter-spacing:.06em;color:var(--muted)}
.tl-count b{font-weight:400;color:var(--ink);font-size:1.4rem}
.tl-count i{font-style:normal;opacity:.5}
.tl-item figure{padding:.55rem;background:#fff;border:1px solid var(--hairline);box-sizing:border-box}
.tl-item:nth-child(even) figure{margin-top:1.75rem;height:calc(var(--tl-img) - 1.75rem)}
.tl-track::before{top:calc(var(--tl-img) + 2.55rem)}
.tl-n{margin-top:1.25rem;line-height:1;font-size:2.6rem;padding-left:1.35rem}
.tl-n::before{width:11px;height:11px}
.tl-item p{margin-top:.75rem}
.tl-progress{margin-top:2rem;height:1px;background:var(--hairline);position:relative}
.tl-progress span{position:absolute;left:0;top:-1px;height:3px;width:12%;background:var(--blue);transition:width .25s ease}
.tl-hint{margin-top:1rem}

/* ---------- WoodVibes: Sortiment als Index ---------- */
.wv-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,6vw,6rem);border-top:1px solid var(--hairline)}
.wv-index li{display:flex;align-items:baseline;gap:1.25rem;padding:1.05rem 0;border-bottom:1px solid var(--hairline);transition:padding-left .3s ease}
.wv-index li:hover{padding-left:.6rem}
.wv-index b{font-weight:400;font-family:var(--display);font-size:.9rem;letter-spacing:.06em;color:var(--blue);flex:none;width:2.2rem}
.wv-index span{font-family:var(--display);font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2;color:var(--ink)}
.wv-index + .notice{margin-top:2rem}
@media(max-width:640px){.wv-index{grid-template-columns:1fr}}


/* ---------- Hero: Ghost-Link ---------- */
.hero .cta{flex-wrap:wrap;gap:.9rem 1.6rem}
.hero .ghost{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.hero .ghost:hover{color:#fff;border-color:#fff}
/* ---------- Startseite: Treppen zuerst ---------- */
.home .l-panels{display:grid;grid-template-columns:3fr 2fr;gap:1rem;min-height:0}
.panel-main{min-height:clamp(420px,58vh,620px)}
.panel-col{display:grid;grid-template-rows:1fr 1fr 1fr;gap:1rem}
.panel-col .panel{min-height:0}
.panel-tag{display:inline-block;margin-bottom:.7rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#9db7ea}
.panel-main .panel-text h3{font-size:clamp(1.9rem,3vw,2.6rem)}
.panel-main .panel-text p{max-width:44ch}
@media(max-width:900px){.home .l-panels{grid-template-columns:1fr}.panel-main{min-height:360px}.panel-col{grid-template-rows:none;grid-template-columns:1fr 1fr}.panel-col .panel:last-child{grid-column:1/-1}.panel-col .panel{min-height:240px}}
@media(max-width:560px){.panel-col{grid-template-columns:1fr}}

/* ---------- Formular: Unterlagen, Hinweise ---------- */
.ms-sub{margin-top:1.6rem;font-size:.95rem;color:var(--muted);line-height:1.6}
.ms-sub + .ms-opts{margin-top:.8rem}
.ms-drop{display:block;margin-top:1.4rem;padding:1.6rem 1.4rem;border:1px dashed rgba(33,31,27,.35);text-align:center;cursor:pointer;transition:border-color .3s,background .3s}
.ms-drop:hover,.ms-drop.over{border-color:var(--blue);background:rgba(38,77,152,.04)}
.ms-drop input{position:absolute;opacity:0;width:0;height:0}
.ms-drop-t{display:block;font-weight:500;color:var(--ink)}
.ms-drop-s{display:block;margin-top:.3rem;font-size:.8rem;color:var(--muted)}
.ms-files{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.4rem}
.ms-files li{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--ink);border-bottom:1px solid var(--hairline);padding:.45rem 0}
.ms-files li span{color:var(--muted)}
.ms-files li button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;text-decoration:underline}
.ms-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ms-note{margin-top:1rem;font-size:.85rem;color:var(--muted)}
.ms-send[disabled]{opacity:.6;cursor:progress}

/* ---------- Mobile Kontaktleiste ---------- */
.mbar{display:none}
@media(max-width:720px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1.4fr;background:var(--ink);border-top:1px solid rgba(255,255,255,.14);padding-bottom:env(safe-area-inset-bottom);transform:translateY(0);transition:transform .35s ease}
  .mbar a{display:block;padding:.95rem .5rem;text-align:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-decoration:none}
  .mbar .mbar-cta{background:var(--blue)}
  .mbar.off{transform:translateY(110%)}
  body{padding-bottom:3.4rem}
}

/* ---------- Weniger Bewegung, wenn gewuenscht ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .pz-tread,.pz-post,.pz-wange{opacity:1!important;transform:none!important}
}

/* WoodVibes in der Hauptnavigation */
.wv-nav img{height:30px;width:auto;display:block}
nav li a.wv-nav{display:flex;align-items:center}
body.light-head header:not(.scrolled) .wv-nav img{filter:brightness(0) opacity(.75)}

/* Form steps stay below the floating navigation when focused on mobile. */
#kform{scroll-margin-top:100px}
.ms-fields input[aria-invalid="true"]{border-bottom-color:#a4342b}
.ms-opt-note{color:rgba(33,31,27,.65)}
.m-close{min-width:44px;min-height:44px}

/* Language navigation stays available on desktop, in the mobile menu and footer. */
.language-switch{display:flex;align-items:center;gap:2px;flex-shrink:0;font:500 11px/1 var(--mono,monospace);letter-spacing:.04em}
.language-switch a{display:inline-flex!important;align-items:center;justify-content:center;min-width:32px;min-height:44px;padding:8px 6px!important;text-decoration:none;opacity:.65}
.language-switch a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.language-switch a:hover,.language-switch a:focus-visible{opacity:1}
.language-switch a::after{display:none!important}
.mn-top .language-switch{margin-left:auto;margin-right:10px;order:1}
.mn-top .m-close{order:2}
footer .language-switch{display:inline-flex;margin-left:12px}
@media(min-width:901px) and (max-width:1200px){header nav ul{gap:1rem}header .btn{padding-left:1rem;padding-right:1rem}}
@media(max-width:400px){.mn-top img{height:30px}.mn-top{gap:8px}.mn-top .language-switch{margin-right:0}.language-switch a{min-width:30px}footer .language-switch{margin-left:0}}
@media(max-width:600px){.btn{max-width:100%;min-width:0;white-space:normal;text-align:center;overflow-wrap:anywhere}}