/* ============================================================
   Paroli planen & bauen — Components (Basis: ideegrafik Bau-System)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);
  line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.04;letter-spacing:-.01em;margin:0}
p{margin:0 0 1em}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:.5rem;z-index:300;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-pill)}
.skip:focus{left:.8rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sp{padding-block:var(--sp)}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.7ch;margin:0 0 1.1rem}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent);flex:none}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--muted);max-width:54ch}

/* ---- Buttons (Pill) ---- */
.btn{font-family:var(--font-body);font-weight:600;font-size:.97rem;display:inline-flex;align-items:center;gap:.6ch;
  padding:.85rem 1.5rem;border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  cursor:pointer;transition:transform .35s var(--ease),background var(--t),color var(--t),box-shadow var(--t);white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-soft)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:var(--bg-2)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);background:transparent}
.btn--blue{background:var(--blue);border-color:var(--blue)}
.btn--blue:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn--on-img{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--on-img:hover{background:#fff;color:var(--ink)}
.btn--lg{padding:1.05rem 1.9rem;font-size:1.04rem}
.arrowbtn{width:54px;height:54px;border-radius:var(--r-pill);background:#fff;color:var(--ink);display:grid;place-items:center;
  flex:none;transition:transform .35s var(--ease),background var(--t),color var(--t)}
.arrowbtn svg{width:20px;height:20px}
.icard:hover .arrowbtn,.btnrow:hover .arrowbtn{background:var(--blue);color:#fff}

/* ---- Floating Pill-Navigation ---- */
.pnav{position:fixed;inset:2rem clamp(.6rem,2.5vw,1.4rem) auto;z-index:120;display:flex;justify-content:center;pointer-events:none;transition:top .45s var(--ease)}
.pnav.scrolled{top:.7rem}
.pnav__bar{pointer-events:auto;display:flex;align-items:center;gap:.4rem;width:100%;max-width:var(--maxw);
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r-pill);box-shadow:var(--sh-pill);padding:.5rem .55rem .5rem 1.1rem}
.pnav__logo{display:flex;align-items:center;margin-right:.4rem}
.pnav__logo img{height:30px;width:auto}
.pnav__links{display:flex;align-items:center;gap:.1rem;margin-right:auto}
.pnav__links>a,.pnav__links>.has-mega>a{font-weight:500;font-size:.95rem;color:var(--ink-2);padding:.55rem .85rem;border-radius:var(--r-pill);transition:background var(--t),color var(--t)}
.pnav__links>a:hover,.pnav__links .has-mega:hover>a{background:var(--bg-2)}
.pnav__links a[aria-current]{background:var(--bg-2)}
.pnav__cta{display:flex;align-items:center;gap:.5rem}
.pnav__cta .btn{padding:.62rem 1.15rem;font-size:.92rem}
.pnav .burger{display:none}
/* Mega-Menü */
.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:calc(100% + .5rem);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-card);
  padding:1.6rem;display:grid;grid-template-columns:.85fr 2.4fr;gap:1.4rem;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;max-width:var(--maxw);margin-inline:auto}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__links{display:flex;flex-direction:column;gap:.1rem;padding-right:1rem;border-right:1px solid var(--line)}
.mega__links a{font-size:1.02rem;color:var(--ink-2);padding:.55rem .4rem;border-radius:var(--r-sm);transition:background var(--t),color .2s}
.mega__links a:hover{background:var(--bg-2);color:var(--blue-deep)}
.mega__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* ---- Image-Card (Kern-Pattern: Overlay-Text + Circle-Arrow) ---- */
.icard{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3);isolation:isolate;min-height:240px}
.icard>img,.icard>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.icard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,19,17,.72) 0%,rgba(20,19,17,.20) 42%,transparent 70%)}
.icard__body{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;height:100%;min-height:inherit;padding:1.4rem}
.icard__txt{color:#fff}
.icard__txt .k{font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);display:block;margin-bottom:.4rem}
.icard__txt h3{font-size:var(--fs-h3);color:#fff;margin-bottom:.3rem}
.icard__txt p{font-size:.92rem;color:rgba(255,255,255,.82);margin:0;max-width:34ch}

/* ---- Section heading ---- */
.shead{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.shead--center{text-align:center;display:flex;flex-direction:column;align-items:center}
.shead h2{font-size:var(--fs-h2);max-width:20ch}
.shead--center h2{max-width:24ch}
.shead .lead{margin-top:1rem}

/* ---- Bento ---- */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(330px,1fr));gap:clamp(.8rem,1.4vw,1.2rem)}
.bento .b-tall{grid-row:span 2;min-height:720px}
.bento .icard{min-height:345px}

/* ---- Tab-Showcase ---- */
.tabs__pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.tabs__pills button{font-family:var(--font-body);font-weight:500;font-size:.95rem;padding:.6rem 1.15rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;transition:all .25s var(--ease)}
.tabs__pills button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabpanel{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(380px,52vh,560px);display:none}
.tabpanel[data-on]{display:block;animation:fade .5s var(--ease)}
.tabpanel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tabpanel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(20,19,17,.7) 0%,rgba(20,19,17,.32) 45%,transparent 68%)}
.tabpanel__in{position:relative;max-width:30rem;padding:clamp(1.6rem,3.5vw,3rem);color:#fff;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.tabpanel__in .k{font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:.5ch;margin-bottom:1rem}
.tabpanel__in .k::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--blue)}
.tabpanel__in h3{font-size:clamp(1.7rem,3vw,2.6rem);color:#fff;margin-bottom:.7rem}
.tabpanel__in p{color:rgba(255,255,255,.85);margin-bottom:1.4rem;max-width:34ch}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---- Spec-Cards ---- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.2vw,1rem)}
.spec{background:var(--card);border-radius:var(--r-md);padding:1.2rem 1.3rem;box-shadow:var(--sh-soft)}
.spec .ic{width:30px;height:30px;color:var(--blue);margin-bottom:.9rem}
.spec .k{font-size:.82rem;color:var(--muted);display:block;margin-bottom:.2rem}
.spec .v{font-family:var(--font-display);font-weight:600;font-size:1.25rem}

/* ---- Trust numbers ---- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.nums .n{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.6vw,3rem);line-height:1}
.nums .n .u{color:var(--blue)}
.nums .l{font-size:.9rem;color:var(--muted);margin-top:.5rem}

/* ---- Stacked pinned cards ---- */
.stack{position:relative}
.stack__card{position:sticky;top:90px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-card);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;min-height:360px;margin-bottom:1.5rem}
.stack__card .txt{padding:clamp(1.5rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center}
.stack__card .num{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--blue);margin-bottom:.8rem}
.stack__card .media{position:relative;overflow:hidden}
.stack__card .media img,.stack__card .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- Horizontal-Scroll (pinned) ---- */
.hscroll{position:relative;height:300vh}
.hscroll__stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,3vh,2.4rem);overflow:hidden;padding-block:clamp(5rem,10vh,7.5rem) 2rem}
.hscroll__head{max-width:var(--maxw);margin-inline:auto;width:100%;padding-inline:var(--gutter)}
.hscroll__track{display:flex;gap:1.1rem;padding-inline:var(--gutter);will-change:transform}
.hscroll__item{flex:0 0 min(88vw,600px);border-radius:var(--r-lg);overflow:hidden}

/* ---- Reveal ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}

/* ---- Footer ---- */
.ft{background:var(--ink);color:var(--on-dark-dim);border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:var(--sp);padding-block:clamp(3rem,6vw,5rem) 2rem}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.ft__logo img{height:32px;margin-bottom:1.1rem}
.ft h4{font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--on-dark-dim);margin:0 0 1rem;font-weight:600}
.ft a{display:block;color:var(--on-dark);padding:.25rem 0;font-size:.96rem}
.ft a:hover{color:var(--blue)}
.ft__addr{font-style:normal;line-height:1.85;color:var(--on-dark)}
.ft__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid #322f2a;margin-top:2.6rem;padding-top:1.4rem;font-size:.82rem;color:var(--on-dark-dim)}

/* ---- Mobile Callbar ---- */
.callbar{display:none}

@media(max-width:1000px){
  .pnav__links{display:none}
  /* Mobile-Reihenfolge: Logo links · CTA · Burger ganz rechts */
  .pnav__logo{margin-right:auto}
  .pnav__cta{order:2}
  .pnav .burger{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;cursor:pointer;order:3;margin:0}
  .pnav .burger span,.pnav .burger span::before,.pnav .burger span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative;border-radius:2px}
  .pnav .burger span::before{position:absolute;top:-6px}.pnav .burger span::after{position:absolute;top:6px}
  .pnav__cta .tel{display:none}
  .bento{grid-template-columns:1fr;grid-template-rows:none}.bento .b-tall{grid-row:auto;min-height:300px}
  .specs,.nums{grid-template-columns:repeat(2,1fr)}
  .stack__card{grid-template-columns:1fr}.stack__card .media{min-height:220px;position:relative}
  .mega__cards{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr 1fr}
  /* .callbar (Sticky-Bottom-Bar mobil) entfernt — Wunsch Auftraggeber */
}
@media(max-width:640px){.specs,.nums,.ft__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

/* ---- Mega simple + Mobile-Nav ---- */
.mega--simple{grid-template-columns:1fr}
.mega--simple .mega__links{border-right:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.1rem 1.5rem}
@media(max-width:1000px){
  .pnav__links.open{display:flex;position:absolute;top:calc(100% + .5rem);left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:1rem;gap:.1rem;max-height:78vh;overflow:auto}
  .pnav__links.open .has-mega{position:static}
  .pnav__links.open .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:.3rem 0 .6rem;display:block;border-radius:0}
  .pnav__links.open .mega__links{border-right:0;grid-template-columns:1fr}
  .pnav__links.open .mega__cards{display:none}
  .pnav__links.open>a,.pnav__links.open .has-mega>a{padding:.75rem .4rem;font-size:1.05rem;border-bottom:1px solid var(--line);display:block}
}
/* Hero */
.hero{position:relative;margin:.7rem clamp(.6rem,2.5vw,1.4rem) 0;border-radius:var(--r-xl);overflow:hidden;
  min-height:clamp(620px,94vh,980px);display:flex;align-items:flex-end;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(18,17,15,.74) 0%,rgba(18,17,15,.28) 38%,rgba(18,17,15,.10) 60%,rgba(18,17,15,.22) 100%)}
.hero__in{width:100%;max-width:none;padding:clamp(1.6rem,4vw,3.4rem) clamp(1.5rem,5vw,4.5rem) clamp(2rem,4vw,3.4rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.hero__txt{color:#fff;max-width:46rem}
.hero__txt .eyebrow{color:#fff}.hero__txt .eyebrow::before{background:var(--blue)}
.hero__txt h1{font-size:var(--fs-hero);color:#fff;letter-spacing:-.015em;margin-bottom:1.3rem;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero__txt h1 .b{color:#fff;background:none;padding:0}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap}
.hero__teaser{display:flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-md);padding:.7rem .8rem;max-width:300px;color:#fff}
.hero__teaser img{width:64px;height:50px;object-fit:cover;border-radius:10px;flex:none}
.hero__teaser .k{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero__teaser b{font-size:.92rem;font-weight:600;display:block;line-height:1.2;margin-top:.15rem}
.hero__scroll{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.8);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
.intro-cut{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.intro-cut__img{border-radius:var(--r-lg) 0 0 var(--r-lg);overflow:hidden;margin-right:calc(-1*var(--gutter));aspect-ratio:5/4}
.intro-cut__img img{width:100%;height:100%;object-fit:cover}
@media(max-width:1000px){.hero{min-height:clamp(480px,80vh,640px)}.intro-cut{grid-template-columns:1fr}.intro-cut__img{margin-right:0;border-radius:var(--r-lg)}}

/* ---- Änderungs-Runde 2 ---- */
/* Dekorative bewegte Horizontallinien (global, super dezent, kein Klick-Einfluss) */
.deco{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.deco span{position:absolute;left:-12%;right:-12%;height:1px;
  background:repeating-linear-gradient(90deg,rgba(120,116,107,.11) 0 16px,transparent 16px 46px);
  animation:decomove 17s linear infinite}
.deco span:nth-child(even){animation-duration:23s;animation-direction:reverse;opacity:.75}
@keyframes decomove{from{transform:translateX(0)}to{transform:translateX(46px)}}

/* Parallax-Medien */
.px{overflow:hidden;position:relative}
.px-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;
  transform:translate3d(var(--mx,0px),calc(var(--py,0px) + var(--my,0px)),0) scale(1.18)}
@media(prefers-reduced-motion:reduce){.px-m{transform:scale(1.05)}}

/* Full-Width Band (Bild/Video, Parallax) */
.fullband{position:relative;min-height:clamp(440px,72vh,760px);display:flex;align-items:center;overflow:hidden;color:#fff;isolation:isolate}
.fullband::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(18,17,15,.72) 0%,rgba(18,17,15,.38) 46%,rgba(18,17,15,.12) 100%)}
.fullband .px-m{z-index:0}
.fullband__in{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%;padding-inline:var(--gutter);padding-block:clamp(2.5rem,5vw,4rem)}
.fullband h2{color:#fff;font-size:var(--fs-h1);max-width:18ch}
.fullband p{color:rgba(255,255,255,.86);max-width:48ch;font-size:1.05rem}

/* KPI / Zahlen — redesign */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.nums .ni{padding:1.2rem clamp(.6rem,2vw,1.8rem);position:relative}
.nums .ni + .ni::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--line)}
.nums .k{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1rem;font-weight:600}
.nums .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5vw,4.6rem);line-height:.95;letter-spacing:-.03em}
.nums .n .u{color:var(--blue)}
.nums .l{font-size:.95rem;color:var(--muted);margin-top:.7rem}

/* MFH breiteres Band: seitlicher Verlauf statt voll abdunkeln */
.icard--wide::after{background:linear-gradient(95deg,rgba(18,17,15,.82) 0%,rgba(18,17,15,.42) 38%,rgba(18,17,15,.05) 72%)}

/* Footer-Logo größer, linksbündig */
.ft__logo{display:flex;justify-content:flex-start;margin-bottom:2rem}
.ft__logo img{height:85px;width:auto;margin-bottom:0}
/* Footer-Bottom: Links inline & sauber getrennt (nicht gestapelt) */
.ft__bot a{display:inline;padding:0}
.ft__legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem .6rem}
.ft__legal .sep{color:#4a463f}

@media(max-width:1000px){
  .nums{grid-template-columns:repeat(2,1fr)}
  .nums .ni:nth-child(odd) + .ni::before,.nums .ni:nth-child(3)::before{display:none}
  .nums .ni:nth-child(2)::before{display:none}
}
@media(max-width:640px){.nums{grid-template-columns:1fr}.nums .ni::before{display:none!important}.bento .b-tall{min-height:360px}.bento .icard{min-height:300px}}

.hero__media.px{position:absolute;inset:0}

/* ============ Änderungs-Runde 3 ============ */
.shead{margin-bottom:clamp(2.4rem,4.5vw,4rem)}

/* Parallax für ALLE Medien (CSS-vars; Hover-Scale smooth via @property) */
@property --ps{syntax:'<number>';inherits:true;initial-value:1.1}
.icard>img,.icard>video,.tabpanel>img,.px-m,.introcut__media img{
  transform:translate3d(calc(var(--mx,0px) + var(--sx,0px)),calc(var(--py,0px) + var(--my,0px)),0) scale(var(--ps,1.1));will-change:transform}
.icard{--ps:1.1;transition:--ps .55s var(--ease)}
.icard:hover{--ps:1.17}
.px,.introcut__media{--ps:1.16}
@media(prefers-reduced-motion:reduce){.icard>img,.icard>video,.tabpanel>img,.px-m,.introcut__media img{transform:scale(1.04)!important}}

/* Bewegter, dezenter Scroll-Hintergrund (Gradient-Shift + optionale Textur) */
body::after{content:"";position:fixed;inset:-12%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(58% 48% at 28% calc(18% + var(--sy,0px)),color-mix(in srgb,var(--blue) 5%,transparent),transparent 70%),
    radial-gradient(52% 44% at 82% calc(78% - var(--sy,0px)),rgba(180,150,110,.05),transparent 70%)}
.texlayer{position:fixed;inset:-4%;z-index:-4;pointer-events:none;opacity:.45;mix-blend-mode:multiply;
  background-size:cover;background-position:center;will-change:transform}

/* KPI — dunkles Band, kräftiger */
.kpiband{background:var(--ink);color:var(--on-dark);border-radius:var(--r-xl);margin-inline:clamp(.6rem,2.5vw,1.4rem)}
.kpiband .shead h2,.kpiband .shead .eyebrow{color:#fff}
.kpiband .nums .ni + .ni::before{background:rgba(255,255,255,.14)}
.kpiband .nums .k{color:var(--on-dark-dim)}
.kpiband .nums .n{color:#fff}
.kpiband .nums .l{color:var(--on-dark-dim)}
.nums{align-items:start}
.nums .ni{display:flex;flex-direction:column;align-items:center}
.nums .n,.nums .n *,.nums .k,.nums .l{white-space:nowrap}
.nums .n{font-size:clamp(2.8rem,5.2vw,5rem)}

/* Stacked Cards: JS skaliert/verblasst; nur Basis hier */
.stack__card{will-change:transform,opacity;transform-origin:center top}

/* Intro-Statement (line-by-line scroll reveal, kein Heading) */
.introtext{max-width:min(56rem,92vw);margin-inline:auto;text-align:center}
.introtext p{font-family:var(--font-display);font-weight:500;font-size:var(--fs-intro);line-height:1.34;color:var(--ink);margin:0}
.introtext .ln{color:color-mix(in srgb,var(--ink) 20%,var(--bg));transition:color .5s var(--ease)}
.introtext .ln.on{color:var(--ink)}

/* Full-bleed Intro-Cut (Bild bis zum rechten Rand, höher, linke Radien) */
.introcut{display:grid;grid-template-columns:1.02fr 1fr;align-items:stretch;gap:0}
.introcut__text{padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,3.5rem) clamp(2.5rem,6vw,5rem) max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));display:flex;flex-direction:column;justify-content:center}
.introcut__media{position:relative;overflow:hidden;border-radius:var(--r-lg) 0 0 var(--r-lg);min-height:clamp(460px,62vh,720px)}
@media(max-width:900px){.introcut{grid-template-columns:1fr}.introcut__media{border-radius:var(--r-lg);min-height:320px;margin-inline:clamp(.6rem,2.5vw,1.4rem)}.introcut__text{padding-inline:var(--gutter)}}

/* Sektions-Trennung: Vorteile-Panel */
.panel-soft{background:var(--bg-2);border-radius:var(--r-xl);margin-inline:clamp(.6rem,2.5vw,1.4rem)}

/* ============ Änderungs-Runde 4 ============ */
/* Nav: Links dicker, Logo größer + mehr Abstand */
.pnav__links>a,.pnav__links>.has-mega>a{font-weight:600}
.pnav__logo{margin-right:1.3rem}
.pnav__logo img{height:34px}

/* Eyebrow: abgerundeter Block (wie Modell-Label), kein Punkt */
.eyebrow::before{width:11px;height:11px;border-radius:3px;box-shadow:none}

/* Deko: vertikale, durchgehende Linien, sichtbarer, sanfter Loop */
.deco{background:repeating-linear-gradient(90deg,rgba(58,55,50,.08) 0 1.5px,transparent 1.5px 13vw);animation:decoX 30s linear infinite}
.deco span{display:none}
@keyframes decoX{from{background-position-x:0}to{background-position-x:13vw}}

/* Maus-folgender, dezenter bläulicher Verlauf (statt Textur) */
.texlayer{display:none}
body::after{inset:0;background:radial-gradient(640px circle at var(--mxp,50%) var(--myp,30%),color-mix(in srgb,var(--blue) 10%,transparent),transparent 60%)}

/* Headings: keine Wort-Waisen, kein Gedankenstrich-Look + mehr Abstand zu Text */
h1,h2{text-wrap:balance}
.introcut__text h2{font-size:var(--fs-h1);margin-bottom:1.4rem}
.fullband h2{margin-bottom:1.2rem;max-width:20ch}
.introtext p{line-height:1.28}

/* 2. Sektion (Intro-Cut) als dunkles Panel zur klaren Abgrenzung */
.introcut{background:var(--ink);color:var(--on-dark);margin:var(--sp) clamp(.6rem,2.5vw,1.4rem) 0;border-radius:var(--r-xl);overflow:hidden}
.introcut__text{padding:clamp(2.6rem,5vw,4.8rem)!important}
.introcut__text h2{color:#fff}
.introcut__text .lead{color:var(--on-dark-dim)}
.introcut__text .btn--ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.introcut__text .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.introcut__media{border-radius:0;min-height:clamp(460px,62vh,720px)}

/* KPI: Abstand zur vorigen Sektion */
.kpiband{margin-top:var(--sp)}

/* Hori-Scroll: breiter + höher */
.hscroll__item{flex:0 0 min(92vw,740px)}

/* Stacked Card Heading kleiner */
.stack__card h3{font-size:clamp(1.5rem,2.1vw,1.95rem)!important}

/* Tab-Panel höher, Inhalt unten links */
.tabpanel{min-height:clamp(440px,64vh,680px)}
.tabpanel__in{justify-content:flex-end;align-items:flex-start}

/* ============ Änderungs-Runde 5 ============ */
/* Deko-Linien: immer dünn (1px, GPU-transform statt bg-position -> kein Dicker/Dünner), langsamer, 1 weniger */
.deco{inset:0 -16vw;background:repeating-linear-gradient(90deg,rgba(58,55,50,.075) 0 1px,transparent 1px 16vw);animation:decoSlide 80s linear infinite;will-change:transform}
@keyframes decoSlide{from{transform:translateX(0)}to{transform:translateX(16vw)}}

/* Maus-Verlauf: 50% größer, etwas transparenter */
body::after{background:radial-gradient(960px circle at var(--mxp,50%) var(--myp,30%),color-mix(in srgb,var(--blue) 7%,transparent),transparent 62%)}

/* Intro-Cut: weniger Abstand oben, mehr unten */
.introcut{margin:clamp(1rem,2vw,2rem) clamp(.6rem,2.5vw,1.4rem) var(--sp)}

/* ============ Unterseiten-System ============ */
.pagehead{position:relative;margin:.7rem clamp(.6rem,2.5vw,1.4rem) 0;border-radius:var(--r-xl);overflow:hidden;
  min-height:max(48vh,clamp(480px,58vh,690px));display:flex;align-items:flex-end;isolation:isolate}
.pagehead.px{--ps:1.12}
/* Header-Bild tiefer ansetzen: oberer Bildbereich (Haus/Dach) sichtbar,
   unten Garten/Grünzeug wird beschnitten → Häuser wirken vollständiger */
.pagehead .px-m{object-position:50% 24%}
.pagehead::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(18,17,15,.8) 0%,rgba(18,17,15,.32) 48%,rgba(18,17,15,.12) 100%)}
.pagehead__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(2.2rem,5vw,3.6rem) var(--gutter) clamp(1.8rem,4vw,3rem);color:#fff}
.pagehead .crumb{color:rgba(255,255,255,.82);padding-top:0;margin-bottom:1.1rem;font-size:.85rem}
.pagehead .crumb a:hover{color:#fff}.pagehead .crumb b{color:#fff;font-weight:600}
.pagehead h1{font-size:var(--fs-hero);color:#fff;max-width:18ch;text-wrap:balance}
.pagehead .eyebrow{color:#fff}
.pagehead .lead{color:rgba(255,255,255,.88);margin-top:1.1rem;max-width:52ch}
.pagehead__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.crumb{font-family:var(--font-body);font-size:.82rem;letter-spacing:.01em;color:var(--slate)}
.crumb a:hover{color:var(--blue-deep)} .crumb b{color:var(--ink);font-weight:600}

/* Content-Bausteine */
.prose{max-width:64ch}
.prose p{margin:0 0 1.15em;color:var(--slate);line-height:1.68}
.prose h2,.prose h3{margin:1.6em 0 .5em}
.prose ul{margin:0 0 1.2em;padding-left:1.1em;color:var(--slate);line-height:1.7}
.prose li{margin-bottom:.4em}
.section-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.8rem);align-items:center}
.section-split__media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;position:relative}
@media(max-width:900px){.section-split{grid-template-columns:1fr}}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.4rem)}
@media(min-width:561px) and (max-width:820px){.feature-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr!important}}
.fcard{background:var(--card);border-radius:var(--r-lg);padding:clamp(1.5rem,2.5vw,2.1rem);box-shadow:var(--sh-soft);border:1px solid var(--line)}
.fcard .nr{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--blue);margin-bottom:1rem;display:block}
.fcard h3{font-size:1.3rem;margin-bottom:.5rem}
.fcard p{color:var(--muted);font-size:.97rem;margin:0}
/* Datenblatt v2 */
.dsheet{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-soft)}
.dsheet__row{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.dsheet__row:nth-child(odd){border-right:1px solid var(--line)}
.dsheet__row:nth-last-child(-n+2){border-bottom:0}
.dsheet__row k{color:var(--muted-2);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.dsheet__row b{font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink);line-height:1.25}
.dsheet__row .na{color:var(--muted-2);font-weight:400;font-size:.96rem;font-family:var(--font-body)}
@media(max-width:640px){.dsheet{grid-template-columns:1fr}.dsheet__row:nth-child(odd){border-right:0}.dsheet__row:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* FAQ-Accordion */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;padding:1.25rem .2rem;font-family:var(--font-display);font-weight:600;font-size:1.15rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--blue);font-size:1.6rem;line-height:1;transition:transform .3s var(--ease);flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 .2rem 1.4rem;color:var(--slate);max-width:72ch}
.faq-a p{margin:0 0 .8em}

/* Formular */
.bbform .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.ffield{display:flex;flex-direction:column;gap:.4rem}
.ffield--full{grid-column:1/-1}
.ffield>span{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.ffield input,.ffield select,.ffield textarea{font-family:var(--font-body);font-size:1rem;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);width:100%}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.ffield em{color:#c0392b;font-size:.82rem;font-style:normal}
.fcheck{grid-column:1/-1;display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--slate)}
.fcheck a{color:var(--blue-deep);text-decoration:underline}
.fmsg{grid-column:1/-1;color:#c0392b;font-size:.82rem}
.formnote{border-radius:var(--r-lg);padding:1.4rem 1.6rem;margin-bottom:1.4rem}
.formnote--ok{background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 30%,transparent)}
.formnote--err{background:#fdecea;border:1px solid #f5c6c0;color:#a5342a}
@media(max-width:640px){.bbform .fgrid{grid-template-columns:1fr}}

/* Referenzen-Galerie */
.refgrid{columns:3 260px;column-gap:1rem}
.refgrid a{display:block;margin-bottom:1rem;border-radius:var(--r-md);overflow:hidden;break-inside:avoid}
.refgrid img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)}
.refgrid a:hover img{transform:scale(1.05)}
/* Vergleich-Tabelle */
.vtable{width:100%;border-collapse:collapse;font-size:.95rem}
.vtable th,.vtable td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.vtable thead th{font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);background:var(--bg-2)}
.vtable tbody tr:hover{background:var(--bg-2)}
.vtable td a{color:var(--blue-deep);font-weight:600}
.vwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
/* ============ Unterseiten-Sektionstypen v3 ============ */
/* Tick-/Cross-Listen (split, compare, checklist) */
.ticklist{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.7rem}
.ticklist li{display:flex;gap:.7rem;align-items:flex-start;color:var(--slate);line-height:1.5}
.ticklist li svg{color:var(--blue);flex:none;margin-top:.18rem}

/* Prozess-Timeline (steps) */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:st}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:0 0 2.2rem 0}
.step:last-child{padding-bottom:0}
.step__nr{position:relative;z-index:1;width:58px;height:58px;flex:none;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sh-soft);font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--blue);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.step::before{content:"";position:absolute;left:28.5px;top:58px;bottom:0;width:2px;background:linear-gradient(var(--line),color-mix(in srgb,var(--blue) 25%,var(--line)))}
.step:last-child::before{display:none}
.step__body{padding-top:.5rem}
.step__body h3{font-size:1.35rem;margin-bottom:.35rem}
.step__body p{color:var(--muted);margin:0;max-width:60ch}
.step:hover .step__nr{background:var(--blue);color:#fff;border-color:var(--blue);transform:scale(1.06)}
@media(max-width:560px){.step{gap:1rem}.step__nr{width:48px;height:48px;font-size:1rem}.step::before{left:23.5px;top:48px}}

/* Interaktive Vergleichs-Tabs (compare) */
.ctabs__pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.ctabs__pills button{font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:.65rem 1.3rem;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;transition:all .25s var(--ease)}
.ctabs__pills button:hover{border-color:var(--blue)}
.ctabs__pills button[aria-selected="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.ctab-panel{display:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--sh-soft)}
.ctab-panel[data-on]{display:block;animation:fade .45s var(--ease)}
.ctab-panel h3{font-size:var(--fs-h3);margin-bottom:.6rem}
.ctab-panel .ctab-lead{color:var(--muted);max-width:64ch;margin-bottom:.4rem}
.ctab-panel .ticklist{columns:2 240px;column-gap:2rem}
.ctab-panel .ticklist li{break-inside:avoid;margin-bottom:.7rem}
@media(max-width:560px){.ctab-panel .ticklist{columns:1}}

/* Check-Spalten (checklist) */
.checkcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
@media(max-width:760px){.checkcols{grid-template-columns:1fr}}
.checkcol{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,2rem);box-shadow:var(--sh-soft)}
.checkcol h3{font-size:1.2rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5ch}
.checkcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.checkcol li{display:flex;gap:.7rem;align-items:flex-start;color:var(--slate);line-height:1.5}
.checkcol li svg{flex:none;margin-top:.18rem}
.checkcol--yes li svg{color:#2e9e5b}
.checkcol--no{background:var(--bg-2)}
.checkcol--no li{color:var(--muted)}
.checkcol--no li svg{color:var(--muted-2)}

/* Galerie-Grid (gallery) */
.galgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.4vw,1.1rem)}
@media(max-width:820px){.galgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.galgrid{grid-template-columns:1fr}}
.galitem{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;margin:0}
.galitem figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;font-size:.85rem;padding:1.4rem .9rem .7rem;
  background:linear-gradient(transparent,rgba(20,19,17,.66))}

/* Stats auf hellem Grund */
.statsband .n{color:var(--ink)}
.statsband .k{color:var(--muted-2)}

/* Kontakt */
.kcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:760px){.kcards{grid-template-columns:1fr}}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.kcard .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:.5rem}
.kcard a,.kcard strong{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink)}
.kcard a:hover{color:var(--blue-deep)}

/* ============================================================
   Runde 2 — Sektions-Tonalität, Detailseiten-Politur, Lightbox
   ============================================================ */
/* ============================================================
   GLOBALES SEKTIONS-ABSTANDSSYSTEM (deterministisch — kein Touch)
   Eine Gap-Variable je Kontext + Adjazenz-Regeln verhindern doppelte
   ODER fehlende Abstände. Panels (Boxen) bekommen margin-block als
   neutralen Außenabstand. Inline-padding-Hacks sind dadurch überflüssig.
   ============================================================ */
main{--gap:var(--sp)}                          /* Startseite: großzügig */
main.sub{--gap:clamp(3.25rem,6vw,5.5rem)}      /* Unterseiten: kompakter, aber konstant */
.sp{padding-block:var(--gap)}
/* plain-Sektion direkt nach einer Sektion: kein doppelter Oberabstand (Gap kommt von oben) */
.sp + .sp:not(.sp--soft):not(.sp--panel):not(.sp--dark):not(.sp--cta):not(.panel-soft):not(.sp--bgimg){padding-top:0}
/* Sektion direkt VOR einem Panel: Unterabstand weg (Panel-margin liefert den Gap) */
.sp:not(.sp--soft):not(.sp--panel):not(.sp--dark):not(.panel-soft):not(.sp--bgimg):is(:has(+ .sp--soft),:has(+ .sp--panel),:has(+ .sp--dark),:has(+ .panel-soft),:has(+ .sp--bgimg)){padding-bottom:0}
/* .sp nach immersiven Spezial-Sektionen (eigener Unterabstand) → kein doppelter Gap */
.introcut + .sp,.kpiband + .sp{padding-top:0}

/* ---- Sektions-Töne: klare Trennung, mit neutralem Außenabstand ---- */
.sp--soft,.sp--panel,.sp--dark,.panel-soft,.sp--bgimg{margin-block:var(--gap);padding-block:clamp(2.5rem,5vw,4.5rem)}
/* Sektion mit unscharfem Bild-Hintergrund + hellem Overlay (z. B. Projekt-Wohnungsspiegel) */
.sp--bgimg{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);margin-inline:clamp(.6rem,2.5vw,1.4rem)}
.sp--bgimg::before{content:"";position:absolute;inset:0;background:var(--bgimg) center/cover no-repeat;filter:blur(7px) saturate(1.08);transform:scale(1.12);z-index:-2}
.sp--bgimg::after{content:"";position:absolute;inset:0;background:rgba(243,242,238,.86);z-index:-1}
/* Dunkles Overlay-Variante (Golden-Hour-Render im Hintergrund) */
.sp--bgdark::after{background:rgba(18,17,15,.62)}
.sp--bgdark .shead h2,.sp--bgdark .eyebrow{color:#fff}
.sp--bgdark .lead{color:rgba(255,255,255,.86)}
/* Wohnungs-Karten: Überschriften im CI-Blau */
.sp--bgimg .fcard h3{color:var(--blue)}
/* Karte (Local-SEO) in einer split-Sektion statt Bild */
.section-split__map{min-width:0;align-self:center}
.section-split__map .rmap__svg{width:100%}
/* Header-CTA „Ghost" liegt auf dunklem Bild → helle Schrift/Rahmen */
.pagehead__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.pagehead__cta .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.sp--soft{background:var(--bg-2);border-radius:var(--r-xl);margin-inline:clamp(.6rem,2.5vw,1.4rem)}
.sp--panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);margin-inline:clamp(.6rem,2.5vw,1.4rem);box-shadow:var(--sh-soft)}
.sp--dark{background:var(--ink);color:var(--on-dark);border-radius:var(--r-xl);margin-inline:clamp(.6rem,2.5vw,1.4rem);isolation:isolate}
.sp--dark .shead h2,.sp--dark h2,.sp--dark h3,.sp--dark h4,.sp--dark .eyebrow{color:#fff}
.sp--dark .lead,.sp--dark .prose p,.sp--dark>.wrap p,.sp--dark .ctab-lead{color:var(--on-dark-dim)}
.sp--dark .fcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);box-shadow:none}
.sp--dark .fcard h3{color:#fff}.sp--dark .fcard p{color:var(--on-dark-dim)}
.sp--dark .ticklist li{color:var(--on-dark-dim)}
/* Checklisten-Karten auf dunklem Grund: dunkles Glas + helle, lesbare Schrift */
.sp--dark .checkcol{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.sp--dark .checkcol--no{background:rgba(255,255,255,.03)}
.sp--dark .checkcol h3{color:#fff}
.sp--dark .checkcol li{color:var(--on-dark-dim)}
.sp--dark .step__nr{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.sp--dark .step__body p{color:var(--on-dark-dim)}
.sp--dark .nums .n{color:#fff}.sp--dark .nums .k{color:var(--on-dark-dim)}.sp--dark .nums .l{color:var(--on-dark-dim)}
.sp--dark .nums .ni + .ni::before{background:rgba(255,255,255,.14)}
.sp--dark .faq-item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.sp--dark .faq-item summary{color:#fff}.sp--dark .faq-a p{color:var(--on-dark-dim)}

/* ---- Eyebrow→Heading: knapper, konsistenter Abstand ---- */
.eyebrow{margin-bottom:.85rem}
.shead .eyebrow{margin-bottom:.7rem}
.prose .eyebrow{margin-bottom:.7rem}

/* Unterseiten-Headings dürfen breiter laufen (weniger gestückelt) */
main.sub .shead h2{max-width:32ch}
main.sub .shead--center h2{max-width:28ch}

/* FAQ-Liste linksbündig zur Überschrift (statt zentriert) */
.faqcol{max-width:880px}

/* ---- Breadcrumb-Bar UNTER dem Header (ruhiger Header) ---- */
.crumbbar{margin:.9rem auto 0;max-width:var(--maxw);padding-inline:var(--gutter)}
.crumbbar .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem;color:var(--muted);font-size:.85rem}
.crumbbar .crumb a{color:var(--muted)}.crumbbar .crumb a:hover{color:var(--blue-deep)}
.crumbbar .crumb b{color:var(--ink-2);font-weight:600}

/* ---- FAQ als Cards (weiß, Radius, dezenter Schatten — wie Nav/Cards) ---- */
.faq-item{background:var(--card);border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-soft);margin-bottom:.75rem;padding:0 clamp(1.1rem,2vw,1.5rem);transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.faq-item summary{padding:1.1rem 0}
.faq-item[open]{box-shadow:var(--sh-card);border-color:color-mix(in srgb,var(--blue) 32%,var(--line))}
.faq-a{padding:0 0 1.25rem}

/* ---- Lightbox (Modellbild + Grundrisse/Ansichten) ---- */
.lbtrig{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:zoom-in;display:block;width:100%;text-align:left}
.lbtrig:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
.lbov{position:fixed;inset:0;z-index:300;background:rgba(16,15,13,.93);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3.2rem);opacity:0;transition:opacity .25s var(--ease)}
.lbov.open{display:flex;opacity:1}
.lbov__stage{max-width:96vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.lbov img{max-width:96vw;max-height:84vh;object-fit:contain;border-radius:var(--r-sm);box-shadow:0 30px 90px -20px rgba(0,0,0,.7);background:#fff}
.lbov__btn{position:absolute;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.32);color:#fff;width:50px;height:50px;border-radius:var(--r-pill);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s}
.lbov__btn:hover{background:rgba(255,255,255,.26)}
.lbov__btn svg{width:22px;height:22px}
.lbov__close{top:1.1rem;right:1.1rem}
.lbov__prev{left:1.1rem;top:50%;transform:translateY(-50%)}
.lbov__next{right:1.1rem;top:50%;transform:translateY(-50%)}
.lbov__cap{color:rgba(255,255,255,.82);font-size:.9rem;text-align:center}
@media(max-width:640px){.lbov__prev{left:.5rem}.lbov__next{right:.5rem}.lbov__btn{width:44px;height:44px}}

/* ---- Modell-Showcase: großes Bild (3:2, klickbar) + Datenblatt ---- */
.mshow{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
@media(max-width:900px){.mshow{grid-template-columns:1fr}}
.mshow__media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2;box-shadow:var(--sh-card)}
.mshow__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mshow__media:hover img{transform:scale(1.045)}
.mshow__media .zoom{position:absolute;right:.85rem;bottom:.85rem;width:42px;height:42px;border-radius:var(--r-pill);background:rgba(255,255,255,.86);display:grid;place-items:center;color:var(--ink);box-shadow:var(--sh-soft)}
.mshow__media .zoom svg{width:20px;height:20px}
.mshow__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.6rem 1rem .8rem;color:#fff;font-size:.85rem;background:linear-gradient(transparent,rgba(20,19,17,.55));pointer-events:none}

/* ---- Grundrisse & Ansichten ---- */
.plangroup{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.plangroup:last-child{margin-bottom:0}
.plangroup h3{font-size:1.25rem;margin-bottom:1rem;display:flex;align-items:center;gap:.6ch}
.plangroup h3 .pk{font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:.15rem .7rem}
.plangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.planfig{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-soft);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.planfig:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}
.planfig .lbtrig{display:block;background:#fff}
.planfig img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff;padding:.5rem;display:block}
.planfig figcaption{padding:.6rem .9rem;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.planfig figcaption .mag{color:var(--blue);flex:none}

/* ---- 3D "Stein auf Stein"-Scrollytelling (buildscene) ---- */
.buildscene{position:relative;margin-block:clamp(1rem,2vw,2rem)}
/* Default = statischer Fallback (kein WebGL / reduced-motion / vor JS) */
.buildscene__canvas{display:none}
.buildscene__sticky{position:static}
.buildscene__head{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter) 1.4rem}
.buildscene__phases{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:grid;gap:.75rem}
.bphase{display:flex;gap:1.1rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-soft);padding:1rem 1.2rem}
.bphase__nr{flex:none;width:46px;height:46px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--blue-soft);color:var(--blue-deep);font-family:var(--font-display);font-weight:800}
.bphase h3{font-size:1.18rem;margin-bottom:.2rem}
.bphase p{color:var(--muted);margin:0;font-size:.97rem}
.buildscene__bar{display:none}

/* Live (WebGL aktiv): sticky 3D-Bühne, Phasen als überblendende Karte */
.buildscene--live{height:560vh}
.buildscene--live .buildscene__sticky{position:sticky;top:0;height:100vh;overflow:hidden;border-radius:var(--r-xl);
  margin-inline:clamp(.6rem,2.5vw,1.4rem);isolation:isolate;
  background:linear-gradient(180deg,#eaf1f6 0%,#f3efe6 55%,#efe7da 100%)}
.buildscene--live .buildscene__canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.buildscene--live .buildscene__head{position:absolute;top:0;left:0;right:0;z-index:2;padding:clamp(4.6rem,9vh,6rem) clamp(1.6rem,4vw,3.4rem) 0;max-width:none;pointer-events:none}
.buildscene--live .buildscene__head .eyebrow{color:var(--blue-deep)}
.buildscene--live .buildscene__head h2{max-width:16ch;text-shadow:0 1px 24px rgba(243,239,230,.9)}
.buildscene--live .buildscene__phases{position:absolute;left:clamp(1rem,4vw,3.4rem);bottom:clamp(1.2rem,4vw,2.6rem);z-index:3;
  width:min(420px,82vw);height:auto;max-width:none;padding:0;display:block}
.buildscene--live .bphase{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.7);box-shadow:var(--sh-card)}
.buildscene--live .bphase.on{opacity:1;transform:none}
.buildscene--live .buildscene__bar{display:block;position:absolute;left:0;right:0;bottom:0;z-index:4;height:4px;background:rgba(29,28,26,.12)}
.buildscene--live .buildscene__bar>span{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(0)}
@media(max-width:640px){.buildscene--live{height:520vh}.buildscene--live .buildscene__phases{width:auto;right:clamp(1rem,4vw,3.4rem)}}

/* ---- Photoreales Bau-Scrollytelling (videoscene, scroll-gescrubbtes Video) ---- */
.videoscene{position:relative;height:360vh;margin-block:clamp(1rem,2vw,2rem)}
.videoscene__sticky{position:sticky;top:0;height:100vh;overflow:hidden;border-radius:var(--r-xl);margin-inline:clamp(.6rem,2.5vw,1.4rem);isolation:isolate;background:#15140f}
.videoscene__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.videoscene__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,17,13,.42) 0%,rgba(18,17,13,.05) 26%,transparent 55%,rgba(18,17,13,.5) 100%)}
.videoscene__head{position:absolute;top:0;left:0;right:0;z-index:2;padding:clamp(4.6rem,9vh,6rem) clamp(1.6rem,4vw,3.4rem) 0;pointer-events:none}
.videoscene__head .eyebrow{color:#fff}
.videoscene__head h2{color:#fff;max-width:18ch;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.videoscene__phases{position:absolute;left:clamp(1rem,4vw,3.4rem);bottom:clamp(1.2rem,4vw,2.6rem);z-index:3;width:min(430px,84vw)}
.videoscene .bphase{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  background:rgba(255,255,255,.88);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);border-color:rgba(255,255,255,.7);box-shadow:var(--sh-card)}
.videoscene .bphase.on{opacity:1;transform:none}
.videoscene__bar{position:absolute;left:0;right:0;bottom:0;z-index:4;height:4px;background:rgba(255,255,255,.16)}
.videoscene__bar>span{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(0)}
/* Statischer Fallback (reduced-motion): Poster + Phasenliste */
.videoscene--static{height:auto}
.videoscene--static .videoscene__sticky{position:static;height:auto;overflow:visible;background:none}
.videoscene--static .videoscene__video{position:relative;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-lg)}
.videoscene--static .videoscene__scrim{display:none}
.videoscene--static .videoscene__head{position:static;padding:0 var(--gutter) 1.2rem}
.videoscene--static .videoscene__head .eyebrow{color:var(--blue)}
.videoscene--static .videoscene__head h2{color:var(--ink);text-shadow:none}
.videoscene--static .videoscene__phases{position:static;width:auto;margin-top:1rem;display:grid;gap:.75rem;padding-inline:var(--gutter)}
.videoscene--static .bphase{position:static;opacity:1;transform:none;background:var(--card);backdrop-filter:none}
.videoscene--static .videoscene__bar{display:none}

/* Modell-Intro (scrollanimierter Einleitungstext ohne Heading, kompakter als Start) */
.mintro{max-width:min(54rem,92vw);margin-inline:auto;text-align:center}
.mintro p{font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.32;color:var(--ink);margin:0}
.mintro .ln{color:color-mix(in srgb,var(--ink) 22%,var(--bg));transition:color .5s var(--ease)}
.mintro .ln.on{color:var(--ink)}

/* ============================================================
   „Aktuelles Projekt / Echte Baustelle" — vollbreites Band (.realband)
   authentisches Foto als Hintergrund, Texte als Overlay (Desktop),
   mobil gestapelt (Bild oben, Text darunter).
   ============================================================ */
.realband{position:relative;display:flex;align-items:center;min-height:clamp(460px,64vh,640px);overflow:hidden;isolation:isolate;margin-bottom:clamp(2.75rem,6vw,5.5rem)}
.realband .px-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Scrim rechts-betont → Text rechts, das echte Bauzaun-Banner (links im Foto) bleibt frei */
.realband::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to left,rgba(18,17,15,.86) 0%,rgba(18,17,15,.6) 40%,rgba(18,17,15,.18) 78%,rgba(18,17,15,.04) 100%)}
.realband__in{position:relative;z-index:2;display:flex;justify-content:flex-end;width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);color:#fff}
.realband__box{max-width:min(620px,100%)}
.realband__in .eyebrow{color:#fff}
.realband__in h2{font-size:var(--fs-h1);margin-bottom:1rem;color:#fff;text-shadow:0 2px 28px rgba(0,0,0,.45)}
.realband__lead{color:rgba(255,255,255,.92);margin:0 0 1.3rem;line-height:1.6;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.realband__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem .6rem;margin:0 0 1.7rem;padding:0}
.realband__facts li{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);padding:.42rem .9rem;backdrop-filter:blur(3px)}
.realband__facts li::before{content:"";width:.46rem;height:.46rem;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 0 3px rgba(0,90,169,.25)}
.realband__cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.realband__cta .btn{display:inline-flex;align-items:center}
/* Mobil: stapeln — Bild oben (~4:3) als Block, Text darunter auf dunklem Grund */
@media(max-width:760px){
  .realband{display:block;min-height:0;background:var(--ink);margin-bottom:clamp(2.5rem,9vw,4rem)}
  .realband::after{display:none}
  .realband .px-m{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;transform:none!important}
  .realband__in{position:static;display:block;padding:clamp(1.5rem,6vw,2.2rem) var(--gutter) clamp(1.9rem,7vw,2.6rem)}
  .realband__box{max-width:none}
  .realband__cta .btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   Kundenstimmen (Demo) — .tgrid / .tcard
   ============================================================ */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1vw,1rem)}
@media(max-width:900px){.tgrid{grid-template-columns:1fr 1fr}}
/* Mobil: ≤2 Karten sauber volle Breite stapeln; >2 Karten = Swipe-Carousel (scroll-snap).
   !important überstimmt das Inline grid-template-columns der Standortseiten. */
@media(max-width:680px){
  .tgrid{grid-template-columns:1fr!important;gap:1rem}
  .tgrid:has(> .tcard:nth-child(3)){display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:.9rem;padding-bottom:.5rem;scrollbar-width:none}
  .tgrid:has(> .tcard:nth-child(3))::-webkit-scrollbar{display:none}
  .tgrid:has(> .tcard:nth-child(3)) > .tcard{flex:0 0 88%;scroll-snap-align:start}
}
.tcard{margin:0;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(2.6rem,3.4vw,3.2rem) clamp(1.6rem,2.4vw,2.2rem) clamp(1.6rem,2.4vw,2.2rem);box-shadow:var(--sh-soft);display:flex;flex-direction:column;gap:1rem}
.tcard::before{content:"\201C";position:absolute;top:.5rem;left:1.4rem;font-family:var(--font-display);font-weight:800;font-size:5rem;line-height:1;color:var(--blue);opacity:.22;pointer-events:none}
.tcard blockquote{margin:0;font-size:1.04rem;line-height:1.62;color:var(--ink-2);position:relative;z-index:1}
.tcard figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.15rem;padding-top:.6rem}
.tcard__name{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.tcard__meta{font-family:var(--font-body);font-size:.85rem;color:var(--muted)}
.tgrid__note{text-align:center;color:var(--muted-2);font-size:.82rem;margin-top:1.6rem}
.sp--soft .tcard{background:var(--card)}
.sp--dark .tcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);box-shadow:none}
.sp--dark .tcard::before{color:rgba(255,255,255,.08)}
.sp--dark .tcard blockquote{color:var(--on-dark)}
.sp--dark .tcard__name{color:#fff}
.sp--dark .tcard__meta{color:var(--on-dark-dim)}

/* So geht es weiter — Nachfass-Prozess über dem Formular */
.nextsteps{background:var(--bg-2);border-radius:var(--r-xl);padding:clamp(1.6rem,3vw,2.4rem);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.nextsteps .eyebrow{margin-bottom:1.1rem}
.nextsteps__list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.nextsteps__list li{display:flex;gap:1rem;align-items:flex-start}
.nextsteps__list li strong{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);display:block;margin-bottom:.2rem}
.nextsteps__list li p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.nextsteps__nr{flex:none;width:34px;height:34px;border-radius:var(--r-pill);background:var(--blue);color:#fff;font-family:var(--font-display);font-weight:700;display:grid;place-items:center;font-size:1rem}
@media(min-width:640px){.nextsteps__list{grid-template-columns:repeat(3,1fr)}.nextsteps__list li{flex-direction:column}}

/* Standort: bediente Orte/Ortsteile als Chips */
.placelist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.placelist li{font-family:var(--font-body);font-size:.92rem;color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem 1rem;box-shadow:var(--sh-soft)}
.sp--soft .placelist li{background:var(--bg)}

/* ============================================================
   Stilisierte Regionalkarte (Local SEO) — .rmap
   ============================================================ */
.rmapwrap{max-width:920px;margin-inline:auto}
.rmap{margin:0}
.rmap__svg{display:block;width:100%;height:auto;background:none;overflow:visible}
/* markierte Standort-Pins: pulsieren + Hover/Fokus */
.rmap__pin{cursor:pointer}
.rmap__pin .rmap__dot,.rmap__pin .rmap__halo,.rmap__pin .rmap__pulse{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease)}
.rmap__pulse{transform-box:fill-box;transform-origin:center;animation:rmapPulse 2.4s ease-out infinite}
@keyframes rmapPulse{0%{transform:scale(.7);opacity:.55}70%{opacity:0}100%{transform:scale(2.6);opacity:0}}
.rmap__pin:hover .rmap__dot,.rmap__pin:focus-visible .rmap__dot{transform:scale(1.22)}
.rmap__pin:hover .rmap__halo,.rmap__pin:focus-visible .rmap__halo{transform:scale(1.25)}
.rmap__pin:focus-visible{outline:none}
.rmap__pin:focus-visible .rmap__halo{fill-opacity:.32}
@media(prefers-reduced-motion:reduce){.rmap__pulse{animation:none;opacity:0}}
.rmap__lbl{font-family:var(--font-body);font-size:15px;font-weight:500;fill:var(--ink-2);paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:3px}
.rmap__lbl--on{fill:var(--ink);font-weight:700}
.rmap__lbl--hq{fill:var(--ink);font-weight:700;font-size:15.5px}
.rmap__cap{margin:.9rem 0 0;text-align:center;color:var(--muted);font-size:.86rem}
.rmap__legend{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;margin-top:.9rem;color:var(--muted);font-size:.84rem}
.rmap__legend span{display:inline-flex;align-items:center;gap:.5ch}
.rmap__k{width:12px;height:12px;border-radius:50%;flex:none}
.rmap__k--hq{background:var(--ink);border-radius:3px}
.rmap__k--on{background:var(--blue)}
.rmap__k--off{background:#8a857a}
.sp--dark .rmap__cap{color:var(--on-dark-dim)}

/* ============================================================
   Feinschliff Abstände (Runde 4)
   ============================================================ */
/* Pre-Footer-CTA: ausgewogen — Footer liefert eigenen Oberrand,
   daher wenig padding-bottom; oben echter Abstand statt 0 (klebt sonst
   an farbigen Panels der Vorsektion). */
.sp--cta{padding-top:0!important;padding-bottom:clamp(1.25rem,2.5vw,2.25rem)!important}

/* Eyebrow sitzt näher am H2 (war optisch abgekoppelt) */
.eyebrow{margin-bottom:.6rem}
.shead .eyebrow{margin-bottom:.45rem}
.prose .eyebrow{margin-bottom:.5rem}
.pagehead .eyebrow{margin-bottom:.7rem}

/* ============================================================
   Dezente Seiten-Transition (Fade-in immer per CSS; Fade-out via JS)
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  body{animation:pgIn .22s ease both}
  @keyframes pgIn{from{opacity:0}to{opacity:1}}
  html.pt-leaving body{opacity:0!important;transition:opacity .09s ease}
}

/* ============================================================
   Multistep-Leadform — .leadform
   ============================================================ */
.leadform{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-soft);padding:clamp(1.4rem,3vw,2.6rem)}
.lf-progress{display:none;list-style:none;margin:0 0 1.8rem;padding:0;gap:.4rem}
.lf--js .lf-progress{display:flex}
.lf-progress li{flex:1;display:flex;align-items:center;gap:.6ch;font-family:var(--font-body);font-weight:600;font-size:.86rem;color:var(--muted-2);padding-bottom:.7rem;border-bottom:2px solid var(--line);transition:color .3s,border-color .3s}
.lf-progress li span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--muted);font-size:.8rem;flex:none;transition:.3s}
.lf-progress li.is-active{color:var(--ink);border-color:var(--blue)}
.lf-progress li.is-active span{background:var(--blue);color:#fff}
.lf-progress li.is-done span{background:var(--blue);color:#fff}
.lf-progress li.is-done{color:var(--ink);border-color:var(--blue)}
@media(max-width:560px){.lf-progress li{font-size:0;gap:0}.lf-progress li span{font-size:.8rem}}

.lf-step{border:0;margin:0;padding:0;min-inline-size:0}
.lf--js .lf-step:not(.is-active){display:none}
.lf-step__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);padding:0;margin:0 0 1.3rem}
.lf-label{font-family:var(--font-body);font-weight:600;color:var(--ink);margin:1.8rem 0 .8rem}
.lf-opt{font-weight:400;color:var(--muted-2);font-size:.92em}

/* Auswahl-Karten (Bauvorhaben) */
.lf-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.lf-choice{position:relative;cursor:pointer}
.lf-choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.lf-choice span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:.7rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--bg);font-weight:600;color:var(--ink-2);transition:.2s}
.lf-choice input:checked + span{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-deep);box-shadow:var(--sh-soft)}
.lf-choice input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}

/* Kategorie-Pills */
.lf-katpills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.lf-katpills button{font-family:var(--font-body);font-weight:600;font-size:.9rem;padding:.5rem 1rem;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;transition:.2s}
.lf-katpills button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Modell-Karten */
.lf-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
.lf-model{position:relative;cursor:pointer;border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card);transition:.2s;display:flex;flex-direction:column}
.lf-model input{position:absolute;opacity:0;pointer-events:none}
.lf-model__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.lf-model__img img{width:100%;height:100%;object-fit:cover;display:block}
.lf-model__name{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--ink);padding:.6rem .8rem .1rem}
.lf-model__meta{font-size:.82rem;color:var(--muted);padding:0 .8rem .7rem}
.lf-model:hover{border-color:var(--muted-2)}
.lf-model:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset}
.lf-model:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.lf-model--none{grid-column:1/-1;flex-direction:row;align-items:center;min-height:52px}
.lf-model__none{padding:.8rem 1rem;font-weight:600;color:var(--ink-2)}
.lf-model--none:has(input:checked) .lf-model__none{color:var(--blue-deep)}
.lf-model.is-hidden{display:none}

/* Datei-Upload */
.lf-file{display:block;cursor:pointer}
.lf-file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.lf-file__box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:1.6rem 1rem;border:1.5px dashed color-mix(in srgb,var(--blue) 40%,var(--line));border-radius:var(--r-md);background:var(--bg);color:var(--muted);transition:.2s}
.lf-file__box svg{color:var(--blue);margin-bottom:.2rem}
.lf-file__box b{color:var(--ink);font-family:var(--font-display)}
.lf-file__box small{font-size:.8rem;color:var(--muted-2)}
.lf-file:hover .lf-file__box,.lf-file.is-drag .lf-file__box{border-color:var(--blue);background:var(--blue-soft)}
.lf-filelist{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.4rem}
.lf-filelist li{display:flex;align-items:center;gap:.5ch;font-size:.88rem;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:.4rem .7rem}
.lf-filelist li::before{content:"📄";font-size:.95em}

/* Navigation / Submit */
.lf-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem}
.lf-nav [data-next],.lf-nav [data-prev]{display:none}
.lf--js .lf-nav [data-next],.lf--js .lf-nav [data-prev]{display:inline-flex}
.lf-callhint{text-align:center;color:var(--muted);font-size:.9rem;margin:1.1rem 0 0}
.lf-callhint a{color:var(--blue-deep);font-weight:600}
.btn--ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink-2)}
.btn--ghost:hover{border-color:var(--muted-2)}

/* ============================================================
   Horizontale Timeline (.htimeline) — Jahres-Pills statt Kreise
   ============================================================ */
.htimeline{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(1.8rem,3vw,2.6rem)}
.htimeline::before{content:"";position:absolute;left:12px;right:12px;top:17px;height:2px;background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--blue) 25%,transparent));border-radius:2px}
.htl-item{position:relative;padding-top:3.2rem}
.htl-year{position:absolute;top:0;left:0;display:inline-flex;align-items:center;height:34px;padding:0 .95rem;border-radius:var(--r-pill);background:var(--blue);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:.01em;white-space:nowrap;box-shadow:var(--sh-soft)}
.htl-item h3{font-size:1.18rem;margin:0 0 .4rem;color:var(--ink)}
.htl-item p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}
@media(max-width:680px){
  .htimeline{grid-template-columns:1fr;gap:0}
  .htimeline::before{left:16px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .htl-item{padding:0 0 1.8rem 3.4rem;min-height:40px}
}
.sp--dark .htl-item h3{color:#fff}
.sp--dark .htl-item p{color:var(--on-dark-dim)}
.sp--dark .htimeline::before{background:linear-gradient(90deg,var(--blue),rgba(255,255,255,.12))}

/* Feature-Card-Icons (generiertes Set) */
.fcard__ic{display:inline-flex;width:54px;height:54px;border-radius:var(--r-md);background:var(--blue-soft);align-items:center;justify-content:center;margin-bottom:1.1rem}
.fcard__ic img{width:32px;height:32px;display:block}
.sp--dark .fcard__ic{background:rgba(255,255,255,.09)}

/* Footer-Kontakt mit Icons */
.ft__crow{display:flex;align-items:flex-start;gap:.6ch;margin-bottom:.55rem}
.ft__ci{width:18px;height:18px;flex:none;margin-top:.18rem;filter:brightness(0) invert(1);opacity:.85}
/* Kontaktkarten-Icon nutzt .fcard__ic (kompakter im kcard-Kontext) */
.kcard .fcard__ic{width:46px;height:46px;margin-bottom:.9rem}
.kcard .fcard__ic img{width:28px;height:28px}

/* ============================================================
   Leadform + Kontakt-Aside (2-spaltig, fullwidth)
   ============================================================ */
.leadlayout{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(1.4rem,2.5vw,2.4rem);align-items:start}
@media(max-width:900px){.leadlayout{grid-template-columns:1fr}}
.leadlayout__main{min-width:0}
.contactbox{background:var(--bg-2);border-radius:var(--r-xl);padding:clamp(1.6rem,3vw,2.2rem);position:sticky;top:90px}
@media(max-width:900px){.contactbox{position:static}}
.contactbox h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 .6rem}
.contactbox .eyebrow{margin-bottom:.55rem}
.contactbox__lead{color:var(--muted);font-size:.95rem;margin:0 0 1.5rem;line-height:1.6}
.contactbox__list{list-style:none;margin:0;padding:0;display:grid;gap:1.15rem}
.contactbox__list li{display:flex;gap:.85rem;align-items:flex-start}
.contactbox__ic{flex:none;width:42px;height:42px;border-radius:var(--r-md);background:var(--blue-soft);display:grid;place-items:center}
.contactbox__ic img{width:22px;height:22px;display:block}
.contactbox__k{display:block;font-family:var(--font-body);font-weight:600;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.2rem}
.contactbox__list a{font-weight:600;color:var(--ink);word-break:break-word}
.contactbox__list a:hover{color:var(--blue-deep)}
.contactbox__list address{font-style:normal;line-height:1.5;color:var(--ink-2)}
.contactbox__sub{display:block;color:var(--muted);font-size:.85rem;margin-top:.3rem;line-height:1.45}
.contactbox__hours{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;margin:.15rem 0 0}
.contactbox__hours dt{color:var(--muted);font-size:.9rem}
.contactbox__hours dd{margin:0;color:var(--ink-2);font-weight:600;font-size:.9rem}

/* ============================================================
   MOBILE-OPTIMIERUNG (Runde 7): Text unter Bild statt Overlay,
   Bilder ~1:1 (kein starkes Links/Rechts-Beschneiden)
   ============================================================ */
@media(max-width:720px){
  /* Unterseiten-Header: Bild als Block (~1:1) oben, Text darunter auf dunklem Panel */
  .pagehead{display:block;min-height:0;background:var(--ink);align-items:stretch}
  .pagehead::after{display:none}
  .pagehead .px-m{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;transform:none!important}
  .pagehead__in{position:static;padding:clamp(1.4rem,5.5vw,2rem) var(--gutter) clamp(1.7rem,6.5vw,2.3rem)}
  .pagehead h1{font-size:clamp(1.95rem,8.5vw,2.6rem)}
  .pagehead .lead{max-width:none}
  .pagehead__cta .btn{flex:1 1 auto;justify-content:center}

  /* Full-Bleed-Bänder ebenso stacken: Bild oben (~1:1), Text darunter */
  .fullband{display:block;min-height:0;background:var(--ink)}
  .fullband .px-m{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;transform:none!important;z-index:0}
  .fullband__in{position:static;padding:clamp(1.4rem,5.5vw,2rem) var(--gutter) clamp(1.7rem,6.5vw,2.3rem)}
  .fullband h2{max-width:none}

  /* Bildkarten (icard) etwas weniger hoch + stärkerer Scrim für Lesbarkeit */
  .icard{aspect-ratio:4/3}
}

/* ============================================================
   Mobile-Feinschliff (Audit Runde 7)
   ============================================================ */
/* fullband: Inline-min-height auf Mobile aufheben, damit der Stack greift */
@media(max-width:720px){ .fullband{min-height:0!important} }
/* fullband-Text über Video/Bild lesbar (alle Viewports) */
.fullband h2{text-shadow:0 2px 28px rgba(0,0,0,.45)}
.fullband p{text-shadow:0 1px 16px rgba(0,0,0,.4)}
/* Mobile-Navbar robust: Logo links · CTA · Burger ganz rechts (überstimmt späte .pnav__logo-Regel) */
@media(max-width:1000px){
  .pnav__cta{order:2;margin-left:auto}
  .pnav .burger{order:3;margin:0}
}
@media(max-width:640px){
  /* Startseite: Sektionsabstände vom 88px-Boden lösen (Home; main.sub bleibt) */
  main:not(.sub){--gap:clamp(3rem,11vw,5rem)}
  /* Hero entdichten */
  .hero__in{align-items:flex-start}
  .hero__txt h1{font-size:clamp(2rem,8.5vw,2.7rem);margin-bottom:1rem}
  /* Tabpanel (Hauslinien-Showcase) Overlay vertikal verlaufen + niedriger */
  .tabpanel{min-height:clamp(380px,58vh,460px)}
  .tabpanel::after{background:linear-gradient(to top,rgba(20,19,17,.86) 0%,rgba(20,19,17,.46) 52%,transparent 82%)!important}
  .tabpanel__in{max-width:none}
  /* MFH-Band (icard--wide): vertikaler Scrim statt seitlich */
  .icard--wide::after{background:linear-gradient(to top,rgba(18,17,15,.82) 0%,rgba(18,17,15,.4) 55%,transparent 100%)!important}
}

/* ============================================================
   Mobile Runde 8 — Overflow, hscroll-Stack, Hero/Intro-Stack, Nav
   ============================================================ */
/* Mobile-Nav: näher am oberen Rand (wie pagehead-Margin) + Dropdown-Items flach */
@media(max-width:1000px){
  .pnav{top:.7rem}
  .pnav__links.open>a,.pnav__links.open .has-mega>a{border-radius:0!important;background:none!important;box-shadow:none!important}
}
/* Parallax-Scale auf Mobile aus → kein horizontaler Überlauf durch scale(1.1) */
@media(max-width:720px){
  .px-m,.icard>img,.icard>video,.tabpanel>img,.introcut__media img{transform:none!important}
  .px,.icard,.introcut__media,.tabpanel{--ps:1!important}
  .icard{aspect-ratio:4/3;min-height:0;width:100%;max-width:100%}
  .bento .icard,.bento .b-tall{min-height:0!important;aspect-ratio:4/3}
  /* Breites MFH-Band: keine aspect-ratio (Inline-min-height würde sonst die Breite hochtreiben → Überlauf) */
  .icard--wide{aspect-ratio:auto!important;width:100%!important;max-width:100%!important;min-height:clamp(300px,80vw,420px)!important}
}
/* Horizontaler Scroll (Modell-Karussell) auf Mobile deaktivieren → vertikal stapeln */
@media(max-width:720px){
  .hscroll{height:auto}
  .hscroll__stick{position:static;height:auto;overflow:visible;padding-block:0;display:block}
  .hscroll__head{margin-bottom:1.4rem}
  .hscroll__track{flex-direction:column;transform:none!important;padding-inline:var(--gutter);gap:1rem}
  .hscroll__item{flex:0 0 auto!important;width:100%;aspect-ratio:4/3}
}
/* Startseiten-Hero auf Mobile stacken: Bild ~1:1 oben, Text darunter, kein Overlay-Gradient */
@media(max-width:720px){
  .hero{display:block;min-height:0!important;background:var(--ink)}
  .hero::after{display:none}
  .hero__media,.hero__media.px{position:relative;inset:auto;aspect-ratio:1/1;z-index:auto;height:auto}
  .hero__media img,.hero__media video{position:relative;height:100%}
  .hero__in{position:static;padding:clamp(1.5rem,6vw,2.2rem) var(--gutter) clamp(1.8rem,7vw,2.4rem)}
  .hero__teaser{align-self:flex-start}
  /* fullband: Overlay-Gradient aus (Text steht auf dunklem Panel, nicht unter Gradient) */
  .fullband::after{display:none}
}
/* introcut „Alles aus einer Hand": Bild bündig am unteren Rand der dunklen Sektion */
@media(max-width:900px){
  .introcut__media{margin-inline:0;border-radius:0;min-height:0;aspect-ratio:4/3}
  .introcut__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
}
/* Grid-Robustheit + Overflow-Guard (clip bricht keine sticky/fixed Elemente) */
.leadlayout__side{min-width:0}
@media(max-width:720px){ main{overflow-x:clip} }

/* ============================================================
   Freigabe-Index: entschärfte Links (data/live.php) — Optik/Text
   bleiben, aber kein Pointer/Hover-Lift (a ohne href)
   ============================================================ */
a:not([href]){cursor:default}
a:not([href]):hover{transform:none;box-shadow:none}
a:not([href]):hover .ar{transform:none}