/* =========================================================
   Bajramaj Garten- und Landschaftsbau
   Design System & Motion
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marke */
  --ink:        #0C1611;
  --ink-2:      #101E17;
  --ink-3:      #16281F;
  --moss:       #1B3527;
  --green:      #2E9B3F;   /* Logo-Grün */
  --green-d:    #1F7A2E;
  --green-l:    #7FC98C;
  --red:        #E01B1B;   /* Logo-Rot */
  --red-d:      #B71414;
  --wa:         #25D366;
  --wa-d:       #12A24A;

  /* Neutral */
  --cream:      #F7F4ED;
  --cream-2:    #F1ECE1;
  --sand:       #E9E1D3;
  --stone:      #C4B9A8;
  --stone-d:    #8C8474;
  --gold:       #C7A55F;

  --txt:        #16241D;
  --txt-2:      #4A5B52;
  --txt-inv:    #F4F1E9;
  --txt-inv-2:  rgba(238,244,238,.68);

  /* Maße */
  --wrap:       1240px;
  --wrap-n:     880px;
  --hdr-h:      76px;
  --r-sm:       10px;
  --r:          16px;
  --r-lg:       26px;
  --r-xl:       34px;

  /* Schatten */
  --sh-s:  0 2px 8px rgba(12,22,17,.06), 0 1px 2px rgba(12,22,17,.05);
  --sh-m:  0 12px 30px -12px rgba(12,22,17,.20), 0 4px 10px -4px rgba(12,22,17,.10);
  --sh-l:  0 34px 70px -28px rgba(12,22,17,.42), 0 12px 26px -14px rgba(12,22,17,.22);
  --sh-wa: 0 12px 28px -10px rgba(18,162,74,.55), 0 3px 10px -4px rgba(18,162,74,.35);

  /* Motion */
  --e-out:  cubic-bezier(.22,.68,.28,1);
  --e-soft: cubic-bezier(.33,1,.5,1);
  --e-back: cubic-bezier(.34,1.4,.5,1);

  /* Fonts */
  --f-disp: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  font-family:var(--f-ui);
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.65;
  color:var(--txt);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block; max-width:100%}
img{height:auto}
button,input,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--f-disp); font-weight:600; line-height:1.06; letter-spacing:-.02em; text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--green); color:#fff}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:4px}

.skip{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--ink); color:var(--txt-inv); padding:12px 20px; border-radius:0 0 12px 12px;
  transition:top .25s var(--e-out);
}
.skip:focus{top:0}

/* ---------- 3. Layout ---------- */
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem, var(--wrap-n))}
/* overflow:clip statt hidden – hidden würde die Sektion zum Scroll-Container machen
   und damit jedes position:sticky darin (Mauer, Chat-Vorschau) wirkungslos machen. */
.sec{position:relative; padding:clamp(5rem,9vw,9.5rem) 0; overflow:hidden; overflow:clip}
.sec--cream{background:var(--cream)}
.sec--sand{background:linear-gradient(180deg,var(--cream) 0%,var(--sand) 55%,var(--cream-2) 100%)}
.sec--dark{background:var(--ink-2); color:var(--txt-inv)}
.sec--ink{background:var(--ink); color:var(--txt-inv)}
.sec--dark::before,.sec--ink::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 50% at 12% 0%, rgba(46,155,63,.12), transparent 65%),
    radial-gradient(60% 45% at 92% 100%, rgba(199,165,95,.09), transparent 65%);
}
.sec--dark>.wrap,.sec--ink>.wrap{position:relative; z-index:2}

/* Section-Kopf */
.sechead{margin-bottom:clamp(2.75rem,5vw,4.5rem); max-width:64ch}
.sechead--center{margin-inline:auto; text-align:center}
.sechead--split{display:grid; gap:1.75rem; align-items:end; max-width:none}
@media(min-width:900px){.sechead--split{grid-template-columns:1.35fr .8fr}}
.sechead__note{color:var(--txt-inv-2); font-size:.96rem; border-left:2px solid rgba(127,201,140,.45); padding-left:1rem}
.sechead h2{font-size:clamp(2.05rem,1.25rem + 3.3vw,3.9rem)}
.sec--dark .sechead h2,.sec--ink .sechead h2{color:#fff}
.eyebrow{
  font-family:var(--f-ui); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-d); margin-bottom:1rem; display:flex; align-items:center; gap:.6rem;
}
.sechead--center .eyebrow{justify-content:center}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--red); border-radius:2px}
.sec--dark .eyebrow,.sec--ink .eyebrow{color:var(--green-l)}
.hl{
  background:linear-gradient(180deg,transparent 62%, rgba(46,155,63,.22) 62%);
  font-style:italic; padding-inline:.06em;
}
.sec--dark .hl,.sec--ink .hl{background:linear-gradient(180deg,transparent 62%, rgba(46,155,63,.34) 62%)}
.lede{margin-top:1.25rem; font-size:clamp(1.05rem,1rem + .28vw,1.22rem); color:var(--txt-2); max-width:58ch}
.sechead--center .lede{margin-inline:auto}
.sec--dark .lede,.sec--ink .lede{color:var(--txt-inv-2)}

/* ---------- 4. Buttons ---------- */
.btn{
  --mx:0px; --my:0px;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:1rem 1.6rem; border-radius:100px;
  font-weight:600; font-size:.98rem; letter-spacing:-.005em; white-space:nowrap;
  isolation:isolate; overflow:hidden;
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .5s var(--e-soft), box-shadow .4s var(--e-out), color .3s;
  will-change:transform;
}
.btn__lbl{display:inline-flex; align-items:center; gap:.6rem; position:relative; z-index:2}
.btn svg{width:1.15em; height:1.15em; fill:currentColor; flex:none}
.btn--sm{padding:.7rem 1.15rem; font-size:.9rem}
.btn--lg{padding:1.15rem 2rem; font-size:1.04rem}
.btn--xl{padding:1.25rem 2.2rem; font-size:1.08rem}

/* WhatsApp-Button: flüssiger Farbverlauf + Cursor-Glow */
.btn--wa{
  color:#fff;
  background:linear-gradient(115deg,var(--wa-d) 0%,var(--wa) 42%,#3ee87c 68%,var(--wa) 100%);
  background-size:260% 100%;
  background-position:12% 0;
  box-shadow:var(--sh-wa);
  transition:transform .5s var(--e-soft), background-position .8s var(--e-out), box-shadow .4s var(--e-out);
}
.btn--wa::after{
  content:""; position:absolute; inset:-40%; z-index:1; pointer-events:none;
  background:radial-gradient(180px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.42), transparent 62%);
  opacity:0; transition:opacity .35s;
}
.btn--wa:hover,.btn--wa:focus-visible{background-position:88% 0; box-shadow:0 18px 40px -12px rgba(18,162,74,.68)}
.btn--wa:hover::after{opacity:1}
.btn--wa:active{transform:translate3d(var(--mx),var(--my),0) scale(.975)}

.btn--ghost{
  color:var(--txt-inv); border:1.5px solid rgba(244,241,233,.32); backdrop-filter:blur(6px);
  background:rgba(244,241,233,.05);
}
.btn--ghost::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--cream);
  transform:translateY(101%); transition:transform .5s var(--e-out);
}
.btn--ghost:hover{color:var(--ink); border-color:var(--cream)}
.btn--ghost:hover::after{transform:translateY(0)}

.btn--outline{
  color:var(--txt-inv); border:1.5px solid rgba(244,241,233,.28); background:rgba(255,255,255,.04);
}
.btn--outline:hover{border-color:var(--green-l); background:rgba(46,155,63,.14)}

.ico-wa{fill:currentColor}

/* Chip (Leistungskarten) */
.chip{
  --mx:0px; --my:0px;
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1.1rem;
  padding:.62rem 1.05rem; border-radius:100px; font-size:.88rem; font-weight:600;
  color:var(--green-l); border:1px solid rgba(127,201,140,.32); background:rgba(46,155,63,.08);
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .5s var(--e-soft), background .3s, color .3s, border-color .3s;
}
.chip span{transition:transform .35s var(--e-out)}
.chip:hover{background:var(--wa); border-color:var(--wa); color:#fff}
.chip:hover span{transform:translateX(4px)}

.link-btn{
  color:var(--green-d); font-weight:600; border-bottom:2px solid rgba(46,155,63,.35);
  padding-bottom:2px; transition:border-color .3s, color .3s;
}
.link-btn:hover{border-color:var(--green); color:var(--green)}

/* ---------- 5. Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .45s var(--e-out), box-shadow .45s var(--e-out), backdrop-filter .45s;
}
.hdr__progress{
  position:absolute; left:0; top:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--green),var(--gold),var(--red));
  transition:opacity .3s; opacity:0;
}
.hdr.is-solid .hdr__progress{opacity:1}
.hdr__in{
  width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto;
  height:var(--hdr-h); display:flex; align-items:center; gap:1.25rem;
}
.hdr.is-solid{
  background:rgba(247,244,237,.86); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 1px 0 rgba(12,22,17,.08), 0 10px 30px -22px rgba(12,22,17,.5);
}
.hdr.is-hidden{transform:translateY(-105%)}
.hdr{transition:transform .5s var(--e-out), background .45s var(--e-out), box-shadow .45s}

.brand{position:relative; flex:none; display:block; width:clamp(148px,17vw,206px)}
.brand__img{width:100%; transition:opacity .4s var(--e-out)}
.brand__img--dark{position:absolute; inset:0; opacity:0}
.hdr.is-solid .brand__img--light{opacity:0}
.hdr.is-solid .brand__img--dark{opacity:1}

.nav{display:none; margin-left:auto; gap:.35rem}
@media(min-width:1080px){.nav{display:flex}}
.nav a{
  position:relative; padding:.55rem .85rem; border-radius:100px;
  font-size:.94rem; font-weight:500; color:var(--txt-inv);
  transition:color .3s, background .3s;
}
.nav a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.32rem; height:1.5px;
  background:var(--green); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--e-out);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.hdr.is-solid .nav a{color:var(--txt)}
.nav a.is-active{color:var(--green-d)}

.hdr__cta{margin-left:auto; display:flex; align-items:center; gap:.7rem}
@media(min-width:1080px){.hdr__cta{margin-left:1rem}}
.tel-link{
  display:none; align-items:center; gap:.45rem; font-weight:600; font-size:.94rem;
  color:var(--txt-inv); padding:.5rem .7rem; border-radius:100px; transition:color .3s,background .3s;
}
.tel-link svg{width:16px; height:16px; fill:currentColor}
.hdr.is-solid .tel-link{color:var(--txt)}
.tel-link:hover{color:var(--green)}
@media(min-width:760px){.tel-link{display:inline-flex}}
.hdr .btn--sm{display:none}
@media(min-width:560px){.hdr .btn--sm{display:inline-flex}}

.burger{width:44px; height:44px; display:grid; place-content:center; gap:5px; border-radius:12px}
@media(min-width:1080px){.burger{display:none}}
.burger span{display:block; width:22px; height:2px; background:var(--txt-inv); border-radius:2px; transition:transform .4s var(--e-out), opacity .3s}
.hdr.is-solid .burger span{background:var(--txt)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile-Drawer */
@media(max-width:1079px){
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto 0; display:flex; flex-direction:column; gap:0;
    background:rgba(12,22,17,.97); backdrop-filter:blur(16px); padding:1rem 1.25rem 2rem;
    clip-path:inset(0 0 100% 0); transition:clip-path .55s var(--e-out); margin:0;
  }
  .nav.is-open{clip-path:inset(0 0 0 0)}
  .nav a{color:var(--txt-inv)!important; font-size:1.3rem; font-family:var(--f-disp); padding:.85rem .4rem; border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a::after{display:none}
}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--hdr-h) + 3.5rem) 0 4rem; overflow:hidden; color:var(--txt-inv);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(46,155,63,.20), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(199,165,95,.13), transparent 60%),
    linear-gradient(168deg,#0A140F 0%,#10231A 46%,#0C1913 100%);
}
.hero__glow{
  position:absolute; inset:auto -10% -30% -10%; height:70%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(46,155,63,.18), transparent 70%);
  pointer-events:none;
}
.hero__ridge{position:absolute; inset:auto 0 -1px 0; height:clamp(120px,18vw,240px); pointer-events:none; opacity:.5}
.hero__ridge svg{width:100%; height:100%}
.hero__ridge path{fill:rgba(11,26,19,.85)}
.leaves{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1}

.hero__in{
  position:relative; z-index:3;
  width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto;
  display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center;
}
@media(min-width:1000px){.hero__in{grid-template-columns:1.08fr .92fr}}

.kicker{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.6rem;
  padding:.5rem 1rem .5rem .7rem; border-radius:100px;
  background:rgba(244,241,233,.07); border:1px solid rgba(244,241,233,.14);
  font-size:.82rem; font-weight:500; letter-spacing:.02em; color:rgba(244,241,233,.9);
  backdrop-filter:blur(8px);
}
.kicker__dot{width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.hero__h1{
  font-size:clamp(2.5rem,1.4rem + 5.1vw,5rem); color:#fff; margin-bottom:1.6rem;
}
.hero__h1 .line{display:block}
.hero__h1 em{font-style:italic; color:var(--green-l); font-weight:500}
.hero__sub{max-width:52ch; font-size:clamp(1.05rem,1rem + .4vw,1.24rem); color:rgba(238,244,238,.78)}
.hero__sub strong{color:#fff; font-weight:600}
.hero__btns{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem}
.hero__micro{
  display:flex; align-items:center; gap:.5rem; margin-top:1.4rem;
  font-size:.88rem; color:rgba(238,244,238,.55);
}
.hero__micro svg{width:15px; height:15px; fill:var(--wa); flex:none}

/* Foto-Stapel */
.hero__stack{position:relative; height:clamp(340px,44vw,520px); display:none}
@media(min-width:1000px){.hero__stack{display:block}}
.hs{
  position:absolute; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-l); border:1px solid rgba(255,255,255,.10);
  transform:translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg));
  will-change:transform;
}
.hs img{width:100%; height:100%; object-fit:cover}
.hs--1{--rot:-4deg; width:47%; aspect-ratio:3/4; left:2%;  top:6%;  z-index:3}
.hs--2{--rot:3.5deg; width:44%; aspect-ratio:3/4; right:4%; top:0;   z-index:2}
.hs--3{--rot:-1.5deg;width:40%; aspect-ratio:3/4; right:16%;bottom:-4%; z-index:4}
.hs__badge{
  position:absolute; left:-2%; bottom:8%; z-index:5;
  background:rgba(247,244,237,.95); color:var(--ink); border-radius:var(--r);
  padding:.75rem 1.05rem; box-shadow:var(--sh-m); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; line-height:1.3;
}
.hs__badge strong{font-size:.9rem}
.hs__badge span{font-size:.78rem; color:var(--txt-2)}

/* Trust-Leiste */
.hero__trust{
  position:relative; z-index:3; list-style:none;
  width:min(100% - 2.5rem,var(--wrap)); margin:clamp(2.75rem,5vw,4.5rem) auto 0;
  display:grid; gap:.9rem 1.5rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding-top:1.75rem; border-top:1px solid rgba(244,241,233,.12);
}
.hero__trust li{position:relative; padding-left:1.15rem; font-size:.86rem; line-height:1.5; color:rgba(238,244,238,.58)}
.hero__trust li::before{
  content:""; position:absolute; left:0; top:.48em; width:6px; height:6px;
  border-radius:2px; background:var(--red); transform:rotate(45deg);
}
.hero__trust span{color:#fff; font-weight:600; display:block; font-size:.94rem; letter-spacing:-.01em}

.scrollcue{
  position:absolute; left:50%; bottom:1.6rem; z-index:4; translate:-50% 0;
  width:26px; height:42px; border:1.5px solid rgba(244,241,233,.28); border-radius:100px;
  display:none; place-content:center; padding-top:7px;
}
@media(min-width:1000px) and (min-height:720px){.scrollcue{display:grid}}
.scrollcue span{width:3px; height:8px; border-radius:2px; background:var(--green-l); animation:cue 1.9s var(--e-soft) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0} 30%{opacity:1} 70%{transform:translateY(13px);opacity:0} 100%{opacity:0}}

/* ---------- 7. Problem ---------- */
.pains{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.pain{
  position:relative; padding:2.1rem 1.75rem 1.9rem; border-radius:var(--r-lg);
  background:#fff; border:1px solid rgba(12,22,17,.07); box-shadow:var(--sh-s);
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.pain:hover{transform:translateY(-6px); box-shadow:var(--sh-m)}
.pain__no{
  font-family:var(--f-disp); font-size:2.6rem; font-weight:600; line-height:1;
  color:transparent; -webkit-text-stroke:1.4px rgba(224,27,27,.35); display:block; margin-bottom:.9rem;
}
.pain h3{font-size:1.32rem; margin-bottom:.6rem}
.pain p{color:var(--txt-2); font-size:.98rem}

.bridge{
  margin-top:clamp(2.5rem,4vw,3.75rem); padding:clamp(1.75rem,3vw,2.5rem);
  border-radius:var(--r-lg); background:linear-gradient(120deg,var(--ink) 0%,var(--moss) 100%);
  color:var(--txt-inv); font-size:clamp(1.05rem,1rem + .35vw,1.28rem); text-align:center;
  border:1px solid rgba(46,155,63,.28);
}
.bridge span{display:block; font-family:var(--f-disp); font-size:clamp(1.5rem,1.2rem + 1.3vw,2.15rem); color:#fff; margin-bottom:.5rem}

/* ---------- 8. Leistungen ---------- */
.svcs{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(336px,1fr))}
.svc{
  display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-lg);
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
  transition:transform .55s var(--e-out), border-color .45s, background .45s;
}
.svc:hover{transform:translateY(-8px); border-color:rgba(127,201,140,.4); background:rgba(46,155,63,.07)}
.svc__media{position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--ink-3)}
.svc__media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(12,22,17,.55) 100%)}
.svc__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-soft), filter .6s}
.svc:hover .svc__media img{transform:scale(1.07)}
.svc__body{padding:1.6rem 1.5rem 1.75rem; display:flex; flex-direction:column; flex:1}
.svc__body h3{font-size:1.34rem; color:#fff; margin-bottom:.55rem}
.svc__body>p{color:var(--txt-inv-2); font-size:.96rem}
.svc__list{list-style:none; margin:1.1rem 0 0; display:grid; gap:.42rem}
.svc__list li{position:relative; padding-left:1.4rem; font-size:.9rem; color:rgba(238,244,238,.62)}
.svc__list li::before{
  content:""; position:absolute; left:0; top:.52em; width:9px; height:5px;
  border-left:1.8px solid var(--green-l); border-bottom:1.8px solid var(--green-l);
  transform:rotate(-45deg);
}
.svc .chip{margin-top:auto; align-self:flex-start; margin-top:1.4rem}
.svc--wide{grid-column:1/-1}
@media(min-width:860px){
  .svc--wide{flex-direction:row}
  .svc--wide .svc__media{aspect-ratio:auto; flex:0 0 38%}
  .svc--wide .svc__body{justify-content:center; padding:2.4rem 2.4rem}
  .svc--wide .svc__body>p{max-width:62ch}
}

/* ---------- 9. Unterbau / Mauer ---------- */
.build{display:grid; gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:960px){.build{grid-template-columns:1fr 1fr; align-items:start}}

.build__steps{display:grid; gap:clamp(3rem,14vh,9rem)}
@media(min-width:960px){.build__steps{padding-block:14vh 22vh}}
.step{
  opacity:.28; transform:translateY(14px);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
  border-left:2px solid rgba(255,255,255,.1); padding-left:1.6rem;
}
.step.is-on{opacity:1; transform:none; border-left-color:var(--green)}
.step__no{
  font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green-l); display:block; margin-bottom:.7rem;
}
.step h3{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem); color:#fff; margin-bottom:.7rem}
.step p{color:var(--txt-inv-2); max-width:46ch}

.build__visual{position:relative}
.build__sticky{position:sticky; top:calc(var(--hdr-h) + clamp(1rem,8vh,5rem))}
/* Mobil: Mauer wandert nach oben und bleibt beim Scrollen stehen,
   die vier Textschichten laufen darunter durch. */
@media(max-width:959px){
  /* Im einspaltigen Grid hätte ein sticky Element keinen Laufweg (jede Zelle ist
     eine eigene Zeile). Deshalb wird .build hier zum Block: Die Mauer bleibt oben
     stehen, die vier Textschichten scrollen dahinter vorbei. */
  .build{display:flex; flex-direction:column}
  .build__visual{
    order:-1;
    position:sticky; top:calc(var(--hdr-h) + .5rem); z-index:2;
    margin-bottom:2rem; padding-bottom:1.5rem;
    background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 92%,transparent 100%);
  }
  .build__sticky{position:static}
  .wall{aspect-ratio:1/.66; max-height:42svh}
  .build__steps{position:relative; z-index:1; gap:44svh; padding-block:2rem 30svh}
}

/* Die Mauer */
.wall{
  position:relative; aspect-ratio:1/1.02; width:100%; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,#0E1B15 0%,#14261C 58%,#1A2E21 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 90px rgba(0,0,0,.55), var(--sh-l);
}
.wall__sky{
  position:absolute; inset:0 0 34% 0;
  background:radial-gradient(90% 120% at 50% 100%, rgba(46,155,63,.16), transparent 70%);
}
.wall__ground{
  position:absolute; inset:auto 0 0 0; height:11%;
  background:linear-gradient(180deg,#3A2E22 0%,#2A211A 100%);
  box-shadow:inset 0 6px 14px rgba(0,0,0,.4);
}
.wall__ground::after{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 3px,transparent 3px 9px);
}
/* Schotter-Fundament */
.wall__base{
  position:absolute; left:6%; right:6%; bottom:11%; height:9%;
  display:flex; flex-direction:column-reverse; gap:2px; border-radius:3px; overflow:hidden;
}
.wall__base span{
  flex:1; border-radius:2px; transform:scaleY(0); transform-origin:50% 100%;
  background:
    repeating-linear-gradient(58deg, rgba(255,255,255,.10) 0 2px, transparent 2px 6px),
    linear-gradient(180deg,#6B6154,#4A423A);
  transition:transform .6s var(--e-back);
}
.wall__rows{position:absolute; left:6%; right:6%; bottom:20%; top:8%; display:flex; flex-direction:column-reverse; gap:clamp(2px,.6vw,4px)}
.wall__row{display:flex; gap:clamp(2px,.6vw,4px); flex:1; min-height:0}
.stone{
  flex:1 1 auto; border-radius:3px; position:relative; overflow:hidden;
  opacity:0; transform:translate3d(var(--fx,0px),var(--fy,90px),0) rotate(var(--fr,0deg));
  will-change:transform,opacity;
  background:linear-gradient(163deg,var(--c1) 0%,var(--c2) 62%,var(--c3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.36), 0 2px 5px rgba(0,0,0,.3);
}
.stone::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(120% 80% at 20% 12%, rgba(255,255,255,.16), transparent 55%),
    repeating-linear-gradient(126deg, rgba(0,0,0,.05) 0 3px, transparent 3px 7px);
}
.stone.is-set{opacity:1; transform:translate3d(0,0,0) rotate(0deg)}

.wall__meter{display:flex; align-items:center; gap:.9rem; margin-top:1.25rem; font-size:.84rem; color:var(--txt-inv-2)}
.wall__meterbar{flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden}
.wall__meterbar i{display:block; height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,var(--green),var(--gold)); transition:width .25s linear}
#wallLabel{flex:none; font-weight:600; color:var(--green-l); min-width:11.5em; text-align:right}

.build__out{
  margin-top:clamp(3rem,6vw,5rem); text-align:center; display:grid; gap:1.5rem; justify-items:center;
  padding-top:clamp(2.5rem,4vw,3.5rem); border-top:1px solid rgba(255,255,255,.1);
}
.build__out p{font-family:var(--f-disp); font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem); color:#fff; max-width:24ch; line-height:1.2}

/* ---------- 10. Vorher/Nachher ---------- */
.ba{max-width:920px; margin-inline:auto}
.ba__tabs{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.5rem}
.ba__tab{
  padding:.6rem 1.25rem; border-radius:100px; font-size:.92rem; font-weight:600;
  border:1px solid rgba(12,22,17,.14); color:var(--txt-2); background:#fff;
  transition:all .35s var(--e-out);
}
.ba__tab:hover{border-color:var(--green); color:var(--green-d)}
.ba__tab.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}

.ba__stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-l);
  aspect-ratio:4/3; background:var(--ink-3); touch-action:pan-y; user-select:none; cursor:ew-resize;
}
@media(max-width:600px){.ba__stage{aspect-ratio:3/4}}
.ba__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba__clip{position:absolute; inset:0; width:var(--p,50%); overflow:hidden; will-change:width}
/* Das Vorher-Bild behält die volle Bühnenbreite, damit nur der Ausschnitt wandert
   und nicht das Bild selbst gestaucht wird. --sw setzt JS per ResizeObserver. */
.ba__clip .ba__img{width:var(--sw,100%); max-width:none}
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--p,50%); width:3px; margin-left:-1.5px;
  background:rgba(255,255,255,.92); box-shadow:0 0 18px rgba(0,0,0,.4); pointer-events:none; z-index:3;
}
.ba__handle span{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.96);
  box-shadow:0 8px 24px rgba(0,0,0,.34); display:grid; place-content:center;
}
.ba__handle span::before,.ba__handle span::after{
  content:""; position:absolute; top:50%; translate:0 -50%;
  border:6px solid transparent;
}
.ba__handle span::before{left:11px; border-right-color:var(--ink)}
.ba__handle span::after{right:11px; border-left-color:var(--ink)}
.ba__range{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:4; margin:0;
}
.ba__range:focus-visible{opacity:.001; outline:3px solid var(--green); outline-offset:-3px}
.ba__tag{
  position:absolute; top:1rem; z-index:2; padding:.4rem .85rem; border-radius:100px;
  font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.ba__tag--b{left:1rem; background:rgba(12,22,17,.7); color:#fff}
.ba__tag--a{right:1rem; background:rgba(46,155,63,.9); color:#fff}
.ba__cap{margin-top:1rem; text-align:center; font-size:.92rem; color:var(--txt-2)}

/* Galerie */
.gal{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.gal__i{
  position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4;
  box-shadow:var(--sh-s); transition:transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
.gal__i img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e-soft)}
.gal__i::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(12,22,17,.5));
  opacity:0; transition:opacity .45s;
}
.gal__i:hover{transform:translateY(-5px) scale(1.012); box-shadow:var(--sh-m)}
.gal__i:hover img{transform:scale(1.08)}
.gal__i:hover::after{opacity:1}
.gal__note{margin-top:2rem; text-align:center; color:var(--txt-2)}
.gal__note .link-btn{margin-left:.5rem}

/* ---------- 11. Ablauf ---------- */
.flow{
  list-style:none; display:grid; gap:1.25rem; counter-reset:f;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.flow__i{
  position:relative; padding:2rem 1.6rem 1.75rem; border-radius:var(--r-lg);
  background:rgba(255,255,255,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(12,22,17,.08); box-shadow:var(--sh-s);
  transition:transform .5s var(--e-out), box-shadow .5s;
}
.flow__i:hover{transform:translateY(-6px); box-shadow:var(--sh-m)}
.flow__i::after{
  content:""; position:absolute; top:2.7rem; right:-1.25rem; width:1.25rem; height:1.5px;
  background:repeating-linear-gradient(90deg,rgba(12,22,17,.28) 0 4px,transparent 4px 8px);
  display:none;
}
@media(min-width:1000px){.flow__i:not(:last-child)::after{display:block}}
.flow__n{
  display:grid; place-content:center; width:44px; height:44px; border-radius:14px; margin-bottom:1.1rem;
  background:linear-gradient(140deg,var(--ink),var(--moss)); color:#fff;
  font-family:var(--f-disp); font-size:1.28rem; font-weight:600;
  box-shadow:0 8px 18px -8px rgba(12,22,17,.6);
}
.flow__i h3{font-size:1.22rem; margin-bottom:.5rem}
.flow__i p{font-size:.95rem; color:var(--txt-2)}
.flow__meta{
  display:inline-block; margin-top:1rem; font-size:.78rem; font-weight:600;
  color:var(--green-d); background:rgba(46,155,63,.11); padding:.32rem .7rem; border-radius:100px;
}

/* ---------- 12. WhatsApp-Konfigurator ---------- */
.sec--contact{padding-bottom:clamp(5rem,8vw,8rem)}
.cfg{display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start}
@media(min-width:1000px){.cfg{grid-template-columns:1.06fr .94fr}}

.cfg__grp{border:0; margin-bottom:2rem}
.cfg__grp legend{
  display:flex; align-items:center; gap:.7rem; margin-bottom:1rem;
  font-family:var(--f-disp); font-size:1.22rem; font-weight:600; color:#fff;
}
.cfg__grp legend i{
  flex:none; display:grid; place-content:center; width:28px; height:28px; border-radius:50%;
  background:rgba(46,155,63,.16); border:1px solid rgba(127,201,140,.35);
  font-family:var(--f-ui); font-size:.8rem; font-weight:700; font-style:normal; color:var(--green-l);
}
.opt-note{font-family:var(--f-ui); font-size:.82rem; font-weight:400; color:var(--txt-inv-2)}
.opts{display:flex; flex-wrap:wrap; gap:.55rem}
.opt{
  padding:.65rem 1.1rem; border-radius:100px; font-size:.92rem; font-weight:500;
  color:rgba(238,244,238,.78); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  transition:all .3s var(--e-out);
}
.opt:hover{border-color:rgba(127,201,140,.55); color:#fff; transform:translateY(-2px)}
.opt.is-on{
  background:var(--wa); border-color:var(--wa); color:#04220F; font-weight:600;
  box-shadow:0 8px 20px -8px rgba(37,211,102,.6);
}

.cfg__fields{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fld{display:flex; flex-direction:column; gap:.4rem}
.fld--full{grid-column:1/-1}
.fld span{font-size:.82rem; font-weight:500; color:var(--txt-inv-2)}
.fld input,.fld textarea{
  padding:.8rem 1rem; border-radius:14px; resize:vertical;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#fff;
  transition:border-color .3s, background .3s;
}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(238,244,238,.34)}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--wa); background:rgba(255,255,255,.08)}

/* Telefon-Mockup */
.cfg__preview{position:sticky; top:calc(var(--hdr-h) + 1.5rem)}
@media(max-width:999px){.cfg__preview{position:static}}
.phone{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-l);
  border:1px solid rgba(255,255,255,.14); background:#0B141A;
}
.phone__bar{
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1.1rem;
  background:#1F2C33; border-bottom:1px solid rgba(255,255,255,.06);
}
.phone__av{width:40px; height:40px; border-radius:50%; overflow:hidden; background:#fff; flex:none}
.phone__av img{width:100%; height:100%; object-fit:contain}
.phone__who{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.phone__who strong{font-size:.9rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.phone__who span{font-size:.76rem; color:#8FA3AD}
.phone__ico{width:19px; height:19px; fill:#8FA3AD; margin-left:auto; flex:none}

.phone__chat{
  padding:1.1rem; min-height:270px; display:flex; flex-direction:column; gap:.6rem;
  background:#0B141A;
  background-image:
    radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:22px 22px, 34px 34px;
  background-position:0 0, 11px 11px;
}
.phone__day{
  align-self:center; font-size:.7rem; color:#8FA3AD; background:rgba(31,44,51,.9);
  padding:.28rem .8rem; border-radius:8px; margin-bottom:.3rem;
}
.bub{
  position:relative; max-width:88%; padding:.6rem .75rem .5rem; border-radius:10px;
  font-size:.92rem; line-height:1.5; box-shadow:0 1px 1px rgba(0,0,0,.2);
}
.bub p{white-space:pre-wrap; word-break:break-word}
.bub--in{align-self:flex-start; background:#1F2C33; color:#E9EDEF; border-top-left-radius:2px}
.bub--out{align-self:flex-end; background:#144D37; color:#E9EDEF; border-top-right-radius:2px}
.bub--out.is-upd{animation:bubPop .45s var(--e-back)}
@keyframes bubPop{0%{transform:scale(.985)} 55%{transform:scale(1.014)} 100%{transform:scale(1)}}
.bub__t{
  display:flex; align-items:center; justify-content:flex-end; gap:.28rem;
  font-size:.66rem; color:rgba(233,237,239,.5); margin-top:.2rem;
}
.bub__t svg{width:15px; height:11px; fill:#53BDEB}
.bub--typing{align-self:flex-start; background:#1F2C33; display:flex; gap:4px; padding:.75rem .8rem}
.bub--typing span{width:6px; height:6px; border-radius:50%; background:#8FA3AD; animation:typ 1.3s infinite}
.bub--typing span:nth-child(2){animation-delay:.18s}
.bub--typing span:nth-child(3){animation-delay:.36s}
@keyframes typ{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

.phone__foot{padding:1rem 1.1rem 1.2rem; background:#111D24; border-top:1px solid rgba(255,255,255,.06)}
.phone__send{
  --mx:0px; --my:0px;
  width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 1.4rem; border-radius:100px; font-weight:700; font-size:1.02rem; color:#fff;
  background:linear-gradient(115deg,var(--wa-d),var(--wa) 45%,#3EE87C 70%,var(--wa));
  background-size:240% 100%; background-position:10% 0;
  box-shadow:var(--sh-wa);
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .5s var(--e-soft), background-position .8s var(--e-out), box-shadow .4s;
}
.phone__send svg{width:22px; height:22px; fill:#fff; flex:none}
.phone__send:hover{background-position:90% 0; box-shadow:0 18px 40px -12px rgba(18,162,74,.7)}
.phone__send:active{transform:translate3d(var(--mx),var(--my),0) scale(.98)}
.phone__hint{margin-top:.75rem; font-size:.76rem; color:#8FA3AD; text-align:center}

.cfg__alt{margin-top:1.5rem; text-align:center}
.cfg__alt p{font-size:.9rem; color:var(--txt-inv-2); margin-bottom:.7rem}

/* ---------- 13. FAQ ---------- */
.faq{display:grid; gap:.7rem}
.faq__i{
  border-radius:var(--r); background:#fff; border:1px solid rgba(12,22,17,.08);
  box-shadow:var(--sh-s); overflow:hidden; transition:box-shadow .4s, border-color .4s;
}
.faq__i[open]{border-color:rgba(46,155,63,.3); box-shadow:var(--sh-m)}
.faq__i summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:1.25rem 1.5rem; cursor:pointer; font-weight:600; font-size:1.04rem;
  list-style:none; transition:color .3s;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--green-d)}
.faq__x{position:relative; flex:none; width:20px; height:20px}
.faq__x::before,.faq__x::after{
  content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
  background:var(--green-d); border-radius:2px; transition:transform .4s var(--e-out);
}
.faq__x::before{width:14px; height:2px}
.faq__x::after{width:2px; height:14px}
.faq__i[open] .faq__x::after{transform:rotate(90deg) scaleX(0)}
.faq__a{padding:0 1.5rem 1.4rem; color:var(--txt-2); font-size:.98rem; max-width:70ch}
.faq__i[open] .faq__a{animation:faqIn .45s var(--e-out)}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.faq__cta{margin-top:clamp(2.5rem,4vw,3.5rem); text-align:center; display:grid; gap:1rem; justify-items:center}
.faq__cta p{font-family:var(--f-disp); font-size:1.35rem}

/* ---------- 14. Standort ---------- */
.loc{display:grid; gap:clamp(1.75rem,3.5vw,3rem)}
@media(min-width:940px){.loc{grid-template-columns:.92fr 1.08fr}}
.loc__card{
  padding:clamp(1.75rem,3vw,2.4rem); border-radius:var(--r-lg);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  display:grid; gap:1.9rem; align-content:start;
}
.loc__row{display:flex; gap:1.1rem}
.loc__ico{
  flex:none; display:grid; place-content:center; width:42px; height:42px; border-radius:13px;
  background:rgba(46,155,63,.14); border:1px solid rgba(127,201,140,.28);
}
.loc__ico svg{width:20px; height:20px; fill:var(--green-l)}
.loc__row h3{font-size:1.06rem; color:#fff; margin-bottom:.5rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.loc__row address,.loc__row p{font-style:normal; color:var(--txt-inv-2); font-size:.96rem; line-height:1.7}
.plain{border-bottom:1px solid rgba(127,201,140,.4); transition:color .3s,border-color .3s}
.plain:hover{color:var(--green-l); border-color:var(--green-l)}

.live{
  font-family:var(--f-ui); font-size:.72rem; font-weight:600; letter-spacing:.04em;
  padding:.22rem .6rem; border-radius:100px; text-transform:none;
}
.live[data-state="open"]{background:rgba(37,211,102,.16); color:#6BE79B; box-shadow:inset 0 0 0 1px rgba(37,211,102,.35)}
.live[data-state="closed"]{background:rgba(224,27,27,.14); color:#FF8B8B; box-shadow:inset 0 0 0 1px rgba(224,27,27,.3)}

.loc__hours{min-width:0; flex:1}
.loc__hours table{width:100%; border-collapse:collapse; font-size:.92rem; max-width:340px}
.loc__hours th{text-align:left; font-weight:500; color:var(--txt-inv-2); padding:.28rem 0}
.loc__hours td{text-align:right; color:#fff; font-variant-numeric:tabular-nums; padding:.28rem 0}
.loc__hours td.closed{color:rgba(255,139,139,.9)}
.loc__hours tr.is-today th,.loc__hours tr.is-today td{color:var(--green-l); font-weight:600}
.loc__hint{margin-top:.9rem; font-size:.84rem!important; color:rgba(238,244,238,.45)!important}

.loc__map{display:grid; gap:1.1rem; align-content:start}
.minimap{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; border:1px solid rgba(255,255,255,.1)}
.minimap svg{width:100%; height:100%}
.mm-ring{transform-origin:center; animation:mmr 3s var(--e-soft) infinite}
@keyframes mmr{0%{transform:scale(.6); opacity:.9} 70%{transform:scale(1.5); opacity:0} 100%{opacity:0}}
.minimap__pin{
  position:absolute; left:1rem; bottom:1rem; padding:.5rem .9rem; border-radius:100px;
  background:rgba(12,22,17,.78); backdrop-filter:blur(8px); font-size:.82rem; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,.12);
}

.routes{display:grid; gap:.75rem}
@media(min-width:560px){.routes{grid-template-columns:1fr 1fr}}
.route{
  --mx:0px; --my:0px;
  position:relative; display:flex; align-items:center; gap:.9rem; padding:1rem 1.15rem;
  border-radius:var(--r); overflow:hidden; isolation:isolate;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .5s var(--e-soft), border-color .4s, background .4s;
}
.route::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .45s;
  background:radial-gradient(150px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.13), transparent 65%);
}
.route:hover::before{opacity:1}
.route--g:hover{border-color:rgba(66,133,244,.55); background:rgba(66,133,244,.10)}
.route--a:hover{border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.09)}
.route__ico{flex:none; width:40px; height:40px; border-radius:12px; background:#fff; display:grid; place-content:center}
.route__ico svg{width:24px; height:24px}
.route--a .route__ico svg{fill:#111}
.route__txt{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.route__txt strong{font-size:.96rem; color:#fff}
.route__txt small{font-size:.78rem; color:var(--txt-inv-2)}
.route__arw{margin-left:auto; color:var(--green-l); font-size:1.15rem; transition:transform .4s var(--e-out)}
.route:hover .route__arw{transform:translateX(5px)}

.area{list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.3rem}
.area li{
  font-size:.8rem; padding:.34rem .8rem; border-radius:100px; color:var(--txt-inv-2);
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
}

/* ---------- 15. Finale ---------- */
.finale{
  position:relative; overflow:hidden; text-align:center; color:var(--txt-inv);
  padding:clamp(5rem,10vw,9rem) 0;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(46,155,63,.22), transparent 62%),
    linear-gradient(180deg,#0A140F,#132A1D 55%,#0A140F);
}
.finale .wrap{position:relative; z-index:3}
.finale h2{font-size:clamp(2.1rem,1.3rem + 3.4vw,4rem); color:#fff; margin-bottom:1.25rem}
.finale>.wrap>p{color:rgba(238,244,238,.72); max-width:56ch; margin-inline:auto; font-size:clamp(1.02rem,.98rem + .3vw,1.18rem)}
.finale__btns{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.25rem}

/* ---------- 16. Footer ---------- */
.ftr{background:#080F0B; color:var(--txt-inv-2); padding-top:clamp(3.5rem,6vw,5.5rem)}
.ftr__in{display:grid; gap:2.5rem; padding-bottom:3rem}
@media(min-width:820px){.ftr__in{grid-template-columns:1.5fr .8fr 1fr}}
.ftr__brand img{width:min(240px,70%); margin-bottom:1.2rem}
.ftr__brand p{font-size:.92rem; max-width:46ch; line-height:1.75}
.ftr h3{font-family:var(--f-ui); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem}
.ftr__nav{display:flex; flex-direction:column; gap:.55rem}
.ftr__nav a{font-size:.92rem; transition:color .3s, transform .3s}
.ftr__nav a:hover{color:var(--green-l); transform:translateX(3px)}
.ftr__kontakt address{font-style:normal; font-size:.92rem; line-height:1.8; margin-bottom:1.1rem}
.ftr__hours{font-size:.86rem; line-height:1.9; margin-bottom:1.2rem}
.ftr__hours strong{color:#fff; display:inline-block; min-width:4.4em}
.ftr__base{border-top:1px solid rgba(255,255,255,.08); padding:1.4rem 0}
.ftr__baserow{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; font-size:.84rem}
.ftr__baserow nav{display:flex; gap:1.5rem}
.ftr__baserow a{transition:color .3s}
.ftr__baserow a:hover{color:var(--green-l)}

/* ---------- 17. FAB & Mobile-Bar ---------- */
.fab{position:fixed; right:1.25rem; bottom:1.5rem; z-index:90; display:flex; align-items:center; gap:.75rem}
.fab[hidden]{display:none}
@media(max-width:760px){.fab{bottom:calc(72px + env(safe-area-inset-bottom) + 1rem); right:1rem}}
.fab__btn{
  --mx:0px; --my:0px;
  position:relative; width:60px; height:60px; border-radius:50%; display:grid; place-content:center;
  background:linear-gradient(135deg,var(--wa-d),var(--wa) 55%,#3EE87C);
  box-shadow:0 14px 34px -10px rgba(18,162,74,.7), 0 3px 10px rgba(0,0,0,.2);
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .5s var(--e-soft), box-shadow .4s;
}
.fab__btn svg{width:31px; height:31px; fill:#fff}
.fab__btn::before{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,.55);
  animation:fabRing 2.8s var(--e-soft) infinite;
}
@keyframes fabRing{0%{transform:scale(1); opacity:.8} 70%{transform:scale(1.55); opacity:0} 100%{opacity:0}}
.fab__btn:hover{box-shadow:0 20px 44px -10px rgba(18,162,74,.85)}
.fab__teaser{
  position:relative; max-width:240px; padding:.8rem 2rem .8rem 1rem; border-radius:14px 14px 2px 14px;
  background:#fff; box-shadow:var(--sh-m); font-size:.84rem; line-height:1.45;
  transform-origin:100% 100%; animation:teaserIn .6s var(--e-back) both;
}
.fab__teaser[hidden]{display:none}
@keyframes teaserIn{from{opacity:0; transform:scale(.85) translateX(12px)} to{opacity:1; transform:none}}
.fab__teaser strong{display:block; color:var(--ink)}
.fab__teaser span{color:var(--txt-2)}
.fab__close{
  position:absolute; top:.25rem; right:.4rem; width:22px; height:22px; border-radius:50%;
  font-size:1.05rem; line-height:1; color:var(--stone-d); display:grid; place-content:center;
}
.fab__close:hover{background:rgba(12,22,17,.07); color:var(--ink)}
@media(max-width:560px){.fab__teaser{display:none}}

.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  grid-template-columns:1.5fr 1fr 1fr; gap:1px;
  background:rgba(12,22,17,.14); backdrop-filter:blur(16px) saturate(1.4);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 30px -12px rgba(12,22,17,.35);
  transform:translateY(110%); transition:transform .5s var(--e-out);
}
.mbar.is-on{transform:none}
@media(max-width:760px){.mbar{display:grid}}
.mbar__i{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  padding:.7rem .5rem; background:rgba(247,244,237,.94); font-size:.72rem; font-weight:600; color:var(--txt);
}
.mbar__i svg{width:20px; height:20px; fill:currentColor}
.mbar__i--wa{background:linear-gradient(115deg,var(--wa-d),var(--wa) 60%,#3EE87C); color:#fff; font-size:.8rem}
.mbar__i:active{filter:brightness(.94)}

/* ---------- 18. Lightbox ---------- */
.lb{
  border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh;
  width:100%; height:100%; overscroll-behavior:contain;
}
.lb::backdrop{background:rgba(6,12,9,.92); backdrop-filter:blur(6px)}
.lb[open]{display:grid; place-content:center}
.lb img{
  max-width:min(94vw,900px); max-height:88vh; border-radius:var(--r); object-fit:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9); animation:lbIn .4s var(--e-out);
}
@keyframes lbIn{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
.lb__close,.lb__nav{
  position:fixed; z-index:2; color:#fff; display:grid; place-content:center;
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px); font-size:1.7rem; line-height:1; transition:background .3s, transform .3s;
}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.22)}
.lb__close{top:1.25rem; right:1.25rem; font-size:1.5rem}
.lb__nav--prev{left:1.25rem; top:50%; translate:0 -50%}
.lb__nav--next{right:1.25rem; top:50%; translate:0 -50%}
.lb__nav:hover{transform:scale(1.08)}
@media(max-width:640px){
  .lb__nav--prev{left:.5rem} .lb__nav--next{right:.5rem}
  .lb__nav,.lb__close{width:42px; height:42px}
}

/* ---------- 19. Reveal ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--e-out), transform .85s var(--e-out);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.is-in{opacity:1; transform:none}

/* ---------- 20. Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .reveal{opacity:1; transform:none}
  .stone{opacity:1; transform:none}
  .step{opacity:1; transform:none}
  .leaves{display:none}
}

/* ---------- 21. Print ---------- */
@media print{
  .hdr,.fab,.mbar,.leaves,.scrollcue,.lb{display:none!important}
  body{background:#fff; color:#000}
  .sec--dark,.sec--ink,.finale,.ftr{background:#fff!important; color:#000!important}
  .sec{padding:1.5rem 0; break-inside:avoid}
}