.elementor-431 .elementor-element.elementor-element-3ed8bcb{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-431 .elementor-element.elementor-element-fc2d87f.elementor-element{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}/* Start custom CSS */h1,h2,h3,h4{font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.12;text-wrap:balance;letter-spacing:.005em}
em{font-style:normal}
.eyebrow{display:inline-flex;align-items:center;gap:.9rem;font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.eyebrow::before{content:'';width:2.2rem;height:1px;background:currentColor;opacity:.55}
.grain{display:none}

/* ---------- Reveal ---------- */
.reveal,.reveal-sc{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in,.reveal-sc.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal,.reveal-sc{opacity:1;transform:none;transition:none}}

/* ============ 1 · HERO — Cover-Look ============ */
.hero{position:relative;min-height:100svh;background:var(--wald);color:var(--elfenbein);display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);isolation:isolate;overflow:hidden}
.hero .text{display:flex;flex-direction:column;justify-content:center;padding:clamp(7rem,16vh,10rem) clamp(1.6rem,5vw,4.5rem) clamp(3rem,8vh,5rem) clamp(1.6rem,6vw,6rem)}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(2.9rem,5.6vw,5rem);line-height:1.05;margin:1.4rem 0 1.6rem;max-width:12ch;color:var(--elfenbein)}
.hero h1 em{color:var(--gold)}
.hero .lede{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:300;color:rgba(245,242,235,.92);max-width:44ch;margin-bottom:2.4rem}
.hero .actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.7rem;background:var(--klang-stark);color:#241A16;font-weight:600;font-size:1rem;padding:1.05rem 1.7rem;border-radius:999px;text-decoration:none;transition:transform .35s var(--ease),background .35s,box-shadow .35s;box-shadow:0 18px 40px -18px rgba(228,106,46,.55)}
.btn:hover{transform:translateY(-2px);background:#F07A3C}
.btn svg{flex-shrink:0}
.hero .btn-sanft{display:inline-flex;align-items:center;gap:.75rem;color:var(--elfenbein);border:1.5px solid var(--klang-stark);border-radius:999px;padding:1rem 1.7rem;font-weight:500;font-size:.98rem;text-decoration:none;transition:background .35s,border-color .35s,transform .35s var(--ease)}
.hero .btn-sanft:hover{background:rgba(228,106,46,.16);border-color:#F07A3C;transform:translateY(-2px)}
.hero .btn-sanft svg{color:var(--klang-stark);transition:transform .35s var(--ease)}
.hero .btn-sanft:hover svg{transform:translateY(3px)}
.hero .ghost{color:var(--elfenbein);font-weight:500;font-size:.95rem;text-decoration:none;border-bottom:1px solid rgba(245,242,235,.4);padding-bottom:.2rem;transition:border-color .3s}
.hero .ghost:hover{border-color:var(--gold)}
.hero .klang-an{display:inline-flex;align-items:center;gap:.65rem;background:transparent;border:0;padding:.35rem 0;color:rgba(245,242,235,.8);font:600 .68rem/1 'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:color .35s}
.hero .klang-an:hover,.hero .klang-an:focus-visible{color:var(--gold)}
.hero .klang-an .schale{position:relative;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(245,242,235,.32);border-radius:50%;transition:border-color .35s,background .35s}
.hero .klang-an:hover .schale,.hero .klang-an:focus-visible .schale{border-color:var(--gold)}
.hero .klang-an svg{width:18px;height:18px}
.hero .klang-an .schale::before,.hero .klang-an .schale::after{content:'';position:absolute;inset:-1px;border:1px solid var(--gold);border-radius:50%;opacity:0;pointer-events:none}
.hero .klang-an.spielt{color:var(--gold)}
.hero .klang-an.spielt .schale{border-color:var(--gold);background:rgba(198,164,106,.14)}
.hero .klang-an.spielt .schale::before{animation:klangring 2.8s ease-out infinite}
.hero .klang-an.spielt .schale::after{animation:klangring 2.8s ease-out infinite .95s}
@media(prefers-reduced-motion:reduce){.hero .klang-an .schale::before,.hero .klang-an .schale::after{animation:none!important}}
.hero .visual{position:relative;min-height:44vh}
.hero .visual img,.hero .visual video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .visual img{animation:atmen 18s ease-in-out infinite alternate;transform-origin:60% 45%}
@keyframes atmen{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.07) rotate(.8deg)}}
@media(prefers-reduced-motion:reduce){.hero .visual img{animation:none}}
.hero .visual::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--wald) 0%,transparent 11%)}
.hero .cue{position:absolute;left:clamp(1.6rem,6vw,6rem);bottom:2.2rem;display:flex;align-items:center;gap:.8rem;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}
.hero .cue .line{width:1px;height:2.6rem;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto minmax(34vh,42vh)}
  .hero .text{padding-top:7.5rem}
  .hero .actions{gap:.9rem 1.2rem}
  .hero .klang-an{padding:0}
  .hero .visual::after{background:linear-gradient(180deg,var(--wald) 0%,transparent 16%)}
  .hero .cue{display:none}
}

/* ============ 2 · DREI SCHRITTE ============ */
.steps{position:relative;overflow:hidden;background:var(--elfenbein);padding:clamp(6rem,12vw,10rem) 0 clamp(5.5rem,10vw,8rem)}
/* Schallwellen im Hintergrund: konzentrische Ringe, die ganz leise atmen */
.steps .wellen-bg{position:absolute;left:50%;top:34%;width:min(150vw,1500px);height:auto;transform:translate(-50%,-50%);color:var(--kupfer);opacity:.075;pointer-events:none}
.steps .wellen-bg circle{transform-origin:600px 300px;animation:wellenAtmen 16s ease-in-out infinite alternate}
.steps .wellen-bg circle:nth-child(2){animation-delay:-3s}
.steps .wellen-bg circle:nth-child(3){animation-delay:-6s}
.steps .wellen-bg circle:nth-child(4){animation-delay:-9s}
.steps .wellen-bg circle:nth-child(5){animation-delay:-12s}
@keyframes wellenAtmen{from{transform:scale(.95)}to{transform:scale(1.05)}}
.steps .container{position:relative;z-index:1}
.steps .head{text-align:center;max-width:44rem;margin:0 auto clamp(3.8rem,7vw,5.5rem)}
.steps .eyebrow{color:var(--kupfer);justify-content:center}
.steps h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-top:1.2rem}
.steps h2 em{color:var(--klang-stark)}
/* Klang-Knopf */
.klang-toggle{margin-top:1.8rem;display:inline-flex;align-items:center;gap:.75rem;background:transparent;border:1.5px solid var(--klang-stark);color:var(--klang-tief);border-radius:999px;padding:.75rem 1.25rem;font:600 .7rem/1 'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease)}
.klang-toggle:hover{transform:translateY(-2px)}
.klang-toggle:hover,.klang-toggle.spielt{background:var(--klang-stark);color:#241A16}
.klang-toggle .ringe{display:inline-flex;gap:3px;align-items:flex-end;height:14px}
.klang-toggle .ringe span{width:2px;height:6px;background:currentColor;border-radius:2px}
.klang-toggle.spielt .ringe span{animation:eq 1.2s ease-in-out infinite}
.klang-toggle.spielt .ringe span:nth-child(2){animation-delay:.15s}
.klang-toggle.spielt .ringe span:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:5px}50%{height:14px}}
/* die drei Schritte, verbunden durch eine Welle */
.steps .grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.4rem,5vw,4.5rem)}
/* Leucht-Karten: der Rand leuchtet dort auf, wo die Maus steht.
   Farbe wandert mit der Mausposition von Orange (links) ueber Gold (Mitte) nach Petrol (rechts). */
.steps .step{position:relative;--r:10px;--bs:2px;padding:clamp(1.9rem,2.8vw,2.5rem) clamp(1.6rem,2.4vw,2.1rem);border-radius:var(--r);background:#FFFCF7;border:var(--bs) solid rgba(36,26,22,.1);box-shadow:0 22px 50px -32px rgba(36,26,22,.35);isolation:isolate}
/* Inhalt liegt immer ueber dem Leuchten */
.steps .step>*:not(.halo){position:relative;z-index:2}
.steps .step .halo{display:none}
@media (hover:hover) and (pointer:fine){
  .steps{--x:-9999;--y:-9999;--xp:.5;--spot:320px}
  .steps .glow{
    --o-orange:calc((1 - var(--xp)) * 1);
    --o-gold:calc(1 - 2 * max(var(--xp) - .5, .5 - var(--xp)));
    --o-petrol:calc(var(--xp) * 1);
    border-color:rgba(36,26,22,.08);
  }
  /* zarter Lichtschleier IN der Karte, eigene Ebene unter dem Text */
  .steps .glow .schleier{position:absolute;inset:0;border-radius:var(--r);z-index:1;pointer-events:none;
    background-image:
      radial-gradient(var(--spot) var(--spot) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(22 78% 62% / calc(var(--o-orange) * .07)), transparent 68%),
      radial-gradient(var(--spot) var(--spot) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(40 66% 74% / calc(var(--o-gold) * .08)), transparent 68%),
      radial-gradient(var(--spot) var(--spot) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(197 50% 42% / calc(var(--o-petrol) * .06)), transparent 68%);
    background-attachment:fixed;background-repeat:no-repeat;
  }
  .steps .glow::before,.steps .glow::after{content:'';pointer-events:none;position:absolute;inset:calc(var(--bs) * -1);border:var(--bs) solid transparent;border-radius:var(--r);background-attachment:fixed;background-repeat:no-repeat;
    -webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);-webkit-mask-clip:padding-box,border-box;-webkit-mask-composite:xor;
    mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);mask-clip:padding-box,border-box;mask-composite:exclude}
  /* Rand: die drei Brandfarben, je nach Mausposition */
  .steps .glow::before{background-image:
      radial-gradient(calc(var(--spot) * .8) calc(var(--spot) * .8) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(22 78% 52% / var(--o-orange)), transparent 100%),
      radial-gradient(calc(var(--spot) * .8) calc(var(--spot) * .8) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(40 66% 70% / var(--o-gold)), transparent 100%),
      radial-gradient(calc(var(--spot) * .8) calc(var(--spot) * .8) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(197 50% 34% / var(--o-petrol)), transparent 100%)}
  /* feiner heller Kern im Rand */
  .steps .glow::after{background-image:radial-gradient(calc(var(--spot) * .4) calc(var(--spot) * .4) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(0 0% 100% / .85), transparent 100%)}
  /* weicher Schein ausserhalb der Karte */
  .steps .step .halo{display:block;position:absolute;inset:-16px;border-radius:calc(var(--r) + 16px);pointer-events:none;z-index:0;filter:blur(22px);opacity:.42;
    background-image:
      radial-gradient(var(--spot) var(--spot) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(22 78% 55% / var(--o-orange)), transparent 70%),
      radial-gradient(var(--spot) var(--spot) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(40 66% 70% / var(--o-gold)), transparent 70%),
      radial-gradient(var(--spot) var(--spot) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(197 50% 38% / var(--o-petrol)), transparent 70%);
    background-attachment:fixed;background-repeat:no-repeat}
}
.steps .ikon{position:relative;width:64px;height:64px;border-radius:999px;border:1px solid rgba(196,87,31,.5);background:#fff;color:var(--klang-tief);display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem}
.steps .ikon svg{width:30px;height:30px}
.steps .ikon::before,.steps .ikon::after{content:'';position:absolute;inset:0;border-radius:999px;border:1px solid rgba(217,119,66,.55);animation:klangring 3.8s ease-out infinite}
.steps .ikon::after{animation-delay:1.9s}
.steps .step:nth-of-type(2) .ikon::before{animation-delay:.65s}
.steps .step:nth-of-type(2) .ikon::after{animation-delay:2.55s}
.steps .step:nth-of-type(3) .ikon::before{animation-delay:1.3s}
.steps .step:nth-of-type(3) .ikon::after{animation-delay:3.2s}
@keyframes klangring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.05);opacity:0}}
.steps .num{font-family:'Marcellus',Georgia,serif;font-size:clamp(2.1rem,3.4vw,2.9rem);line-height:1;color:var(--klang-tief);margin-bottom:.7rem}
.steps p{color:var(--ink-soft);font-size:1.02rem;line-height:1.75;max-width:32ch}
@media(max-width:760px){
  .steps .grid{grid-template-columns:1fr;max-width:30rem;margin-inline:auto;gap:2.6rem}
  .steps .wellen-bg{width:220vw}
}
@media(prefers-reduced-motion:reduce){
  .steps .wellen-bg circle{animation:none}
  .steps .ikon::before{animation:none;transform:scale(1.35);opacity:.3}
  .steps .ikon::after{animation:none;transform:scale(1.7);opacity:.15}
}
@media(max-width:900px){.steps .grid{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}.steps p{max-width:none}}

/* ---------- Natur-Band (Atempause) ---------- */

/* ============ 3 · SEHNSUCHT (Petrol) ============ */
.longing{position:relative;overflow:hidden;background:var(--petrol);color:var(--elfenbein);padding:clamp(5.5rem,10vw,8.5rem) 0 clamp(6rem,11vw,9rem)}
.longing .kopf{text-align:center;max-width:46rem;margin-inline:auto}
.longing .eyebrow{color:var(--gold);justify-content:center}
.longing h2{font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1.08;margin:1.4rem auto 1.2rem;max-width:17ch}
.longing h2 em{color:var(--gold)}
.longing .sub{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:300;line-height:1.6;color:rgba(245,242,235,.94);max-width:46ch;margin-inline:auto}
.longing .bridge{margin-top:clamp(2.4rem,4vw,3.2rem);font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--gold);font-weight:500;text-align:center}

/* --- Bild mit Klang-Punkten --- */
.buehne{position:relative;margin-top:clamp(2.6rem,5vw,4rem);border-radius:8px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.buehne .bild{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 58%;animation:kenburns 34s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.buehne .bild{animation:none}}
.buehne::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,60,74,.5),rgba(22,60,74,.15) 42%,rgba(22,60,74,.72));pointer-events:none}
/* Hinweis: schwebt leicht, mit tippendem Finger-Symbol */
.buehne .hinweis{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:.6rem;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:rgba(22,60,74,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(232,201,138,.45);border-radius:999px;padding:.6rem 1.2rem;transition:opacity .5s;animation:hinweisSchwebt 3.4s ease-in-out infinite}
@keyframes hinweisSchwebt{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.buehne .hinweis .tipp{position:relative;width:16px;height:16px;flex-shrink:0}
.buehne .hinweis .tipp span{position:absolute;inset:0;border-radius:999px;border:1.5px solid currentColor;animation:tippRing 2s ease-out infinite}
.buehne .hinweis .tipp span:nth-child(2){animation-delay:1s}
.buehne .hinweis .tipp::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:999px;background:currentColor;transform:translate(-50%,-50%);animation:tippKern 2s ease-in-out infinite}
@keyframes tippRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes tippKern{0%,100%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(.65)}}
@media(prefers-reduced-motion:reduce){.buehne .hinweis,.buehne .hinweis .tipp span,.buehne .hinweis .tipp::after{animation:none}}
.buehne.beruehrt .hinweis{opacity:0}

/* Punkt = kleine Klangschale, die Ringe aussendet */
.punkt{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:4;width:54px;height:54px;border-radius:999px;border:1.5px solid var(--gold);background:rgba(22,60,74,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 6px 20px -6px rgba(0,0,0,.5);transition:background .35s,color .35s,transform .35s var(--ease),box-shadow .35s}
/* Plus-Zeichen: signalisiert "hier steckt mehr". Beim Oeffnen dreht es sich zum Kreuz. */
.punkt .kreuz{position:relative;width:17px;height:17px;pointer-events:none;transition:transform .45s var(--ease)}
.punkt .kreuz::before,.punkt .kreuz::after{content:'';position:absolute;background:currentColor;border-radius:2px}
.punkt .kreuz::before{left:0;top:7.5px;width:17px;height:2px}
.punkt .kreuz::after{left:7.5px;top:0;width:2px;height:17px}
.punkt:hover,.punkt:focus-visible{background:var(--gold);color:var(--petrol-tief);transform:translate(-50%,-50%) scale(1.14);box-shadow:0 10px 28px -6px rgba(0,0,0,.55)}
.punkt:focus-visible{outline:2px solid var(--elfenbein);outline-offset:3px}
.punkt::before,.punkt::after{content:'';position:absolute;inset:-1.5px;border-radius:999px;border:1.5px solid rgba(232,201,138,.65);animation:klangpuls 3.4s ease-out infinite}
.punkt::after{animation-delay:1.7s}
.punkt:nth-of-type(2)::before{animation-delay:.5s}.punkt:nth-of-type(2)::after{animation-delay:2.2s}
.punkt:nth-of-type(3)::before{animation-delay:1s}.punkt:nth-of-type(3)::after{animation-delay:2.7s}
.punkt:nth-of-type(4)::before{animation-delay:1.5s}.punkt:nth-of-type(4)::after{animation-delay:3.2s}
.punkt:nth-of-type(5)::before{animation-delay:2s}.punkt:nth-of-type(5)::after{animation-delay:3.7s}
@keyframes klangpuls{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.4);opacity:0}}
.punkt.aktiv{background:var(--gold);color:var(--petrol-tief);transform:translate(-50%,-50%) scale(1.14)}
.punkt.aktiv .kreuz{transform:rotate(45deg)}
.punkt.aktiv::before,.punkt.aktiv::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.punkt::before,.punkt::after{animation:none;opacity:.25;transform:scale(1.5)}}

/* Infobox: bleibt offen, bis ein anderer Punkt gewaehlt wird */
.hs-box{position:absolute;left:clamp(1rem,3vw,2.2rem);bottom:clamp(1rem,3vw,2.2rem);z-index:5;width:min(29rem,calc(100% - 2 * clamp(1rem,3vw,2.2rem)));background:rgba(22,60,74,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(232,201,138,.4);border-left:3px solid var(--gold);border-radius:6px;padding:1.3rem 1.5rem;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hs-box.offen{opacity:1;pointer-events:auto;transform:none}
.hs-box .nr{display:block;font-size:.64rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.hs-box .txt{font-family:'Marcellus',Georgia,serif;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.35;color:var(--elfenbein)}
.hs-box .txt em{color:var(--gold)}
.hs-box .zu{position:absolute;top:.6rem;right:.7rem;width:30px;height:30px;border:0;background:transparent;color:rgba(245,242,235,.65);cursor:pointer;border-radius:999px;font-size:1.1rem;line-height:1}
.hs-box .zu:hover{color:var(--gold);background:rgba(245,242,235,.1)}

@media(max-width:820px){
  .buehne .bild{aspect-ratio:4/5}
  .punkt{width:42px;height:42px}
  .hs-box{position:static;width:100%;transform:none;opacity:1;pointer-events:auto;margin-top:.9rem;border-radius:6px;display:none}
  .hs-box.offen{display:block;animation:boxAuf .45s var(--ease)}
  @keyframes boxAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media(max-width:900px){.longing .zeilen li{margin-left:0 !important;max-width:none}}

/* ============ 4 · ZUGÄNGE (Intro) ============ */
.approach{background:var(--elfenbein);padding:clamp(6.5rem,12vw,10rem) 0 clamp(6rem,11vw,9rem);text-align:center}
.approach .zeichen{width:clamp(130px,15vw,180px);margin:0 auto 2.6rem;opacity:.92}
.approach h2{font-size:clamp(2.1rem,4.5vw,3.5rem)}
.approach h2 em{color:var(--kupfer)}
.approach p{max-width:52ch;margin:1.9rem auto 0;color:var(--ink-soft);font-size:clamp(1.05rem,1.5vw,1.18rem);line-height:1.85}

/* ============ 5 · DREI WEGE ============ */
.ways{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--wald-tief),var(--wald) 78%);padding:clamp(5.5rem,10vw,8rem) 0 clamp(6rem,11vw,9rem)}
.ways::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(58vw,720px);aspect-ratio:1558/801;background:var(--gold);opacity:.07;-webkit-mask:url('https://stefanpons.de/redesign-assets/media/logo-zeichen.png') center/contain no-repeat;mask:url('https://stefanpons.de/redesign-assets/media/logo-zeichen.png') center/contain no-repeat;pointer-events:none}
.ways .container{position:relative;z-index:1}
.ways .whead{text-align:center;max-width:40rem;margin:0 auto clamp(3rem,6vw,4.5rem)}
.ways .eyebrow{color:var(--gold);justify-content:center}
.ways .whead h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-top:1.1rem;color:var(--elfenbein)}
.ways .whead h2 em{color:var(--gold)}
.ways .whead p{margin-top:1rem;color:rgba(245,242,235,.9)}
.ways .wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.2rem)}
@media(max-width:960px){.ways .wgrid{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}}
.card{--c:var(--klang-stark);--c-tief:var(--kupfer);display:flex;flex-direction:column;background:#fff;border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 14px 40px -24px rgba(36,26,22,.35);transition:opacity .9s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 40px 80px -32px rgba(36,26,22,.45);transition-delay:0s!important}
.card.klang{--c:var(--klang-stark);--c-tief:#C4571F}
.card.resilienz{--c:var(--petrol);--c-tief:var(--petrol-tief)}
.card.natur{--c:var(--wald);--c-tief:var(--wald-tief)}
.card .img{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative;transition:transform 1.1s var(--ease)}
.card:hover .img{transform:scale(1.05)}
.card .img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--c-tief));mix-blend-mode:multiply;opacity:.75}
.card .idx{position:absolute;left:1rem;top:1rem;z-index:2;background:var(--c);color:#fff;font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.42rem .8rem;border-radius:999px}
.card .balken{height:6px;background:var(--c)}
.card .b{padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.75rem;flex:1}
.card h3{font-size:clamp(1.5rem,2.3vw,1.9rem)}
.card h3 em{color:var(--c)}
.card .promise{font-family:'Marcellus',serif;font-size:1.06rem;line-height:1.4;color:var(--c-tief)}
.card.klang .promise{color:#B34E1B}
.card .desc{font-size:.93rem;color:var(--ink-soft)}
.card .go{margin-top:auto;padding-top:.7rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--c);display:inline-flex;align-items:center;gap:.5rem;transition:gap .3s}
.card:hover .go{gap:.95rem}

/* ============ 6 · ÜBER STEFAN ============ */
.about{background:var(--elfenbein-tief);padding:clamp(6rem,11vw,9rem) 0}
.about .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
@media(max-width:900px){.about .grid{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}}
.about .media{position:relative}
.about .media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;position:relative;z-index:1}
.about .media::after{content:'';position:absolute;inset:0;border:2px solid var(--kupfer);border-radius:4px;transform:translate(18px,18px)}
.about .eyebrow{color:var(--kupfer)}
.about blockquote{font-family:'Marcellus',serif;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.3;margin:1.3rem 0 1.4rem}
.about blockquote em{color:var(--klang-stark)}
.about p{color:var(--ink-soft);max-width:52ch}
.about .as-link{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;font-weight:600;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--kupfer);text-decoration:none;border-bottom:2px solid var(--klang-stark);padding-bottom:.35rem;transition:gap .3s}
.about .as-link:hover{gap:1rem}

/* ============ 7 · VERTRAUEN (Kupfer) ============ */
.ground{background:var(--kupfer);color:var(--elfenbein);padding:clamp(6rem,11vw,9rem) 0;position:relative;overflow:hidden}
.ground::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(74vw,960px);aspect-ratio:1558/801;background:var(--gold);opacity:.1;
  -webkit-mask:url('https://stefanpons.de/redesign-assets/media/logo-zeichen.png') center/contain no-repeat;mask:url('https://stefanpons.de/redesign-assets/media/logo-zeichen.png') center/contain no-repeat;pointer-events:none}
.ground .container{position:relative;z-index:1}
.ground .eyebrow{color:var(--gold)}
.ground h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin:1.2rem 0 .8rem}
.ground h2 em{color:var(--gold)}
.ground .sub{font-weight:300;color:rgba(245,242,235,.85);margin-bottom:clamp(2.8rem,5vw,4rem)}
/* Flip-Kacheln: vorne der Nutzen, hinten die Info */
.ground .flips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.8vw,2.2rem)}
@media(max-width:900px){.ground .flips{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}}
.ground .flip{perspective:1300px;cursor:pointer;outline:none;animation:schweben 5s ease-in-out infinite alternate}
.ground .flip:nth-child(2){animation-delay:-1.7s}
.ground .flip:nth-child(3){animation-delay:-3.4s}
@keyframes schweben{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.ground .flip-inner{position:relative;display:grid;height:100%;min-height:380px;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,1.18,.36,1)}
@media(max-width:900px){.ground .flip-inner{min-height:300px}}
.ground .flip:is(:focus-visible,.gedreht) .flip-inner{transform:rotateY(180deg) scale(1.035)}
@media(hover:hover){.ground .flip:hover .flip-inner{transform:rotateY(180deg) scale(1.035)}}
.ground .seite{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;padding:clamp(1.6rem,2.6vw,2.2rem);display:flex;flex-direction:column;position:relative;overflow:hidden}
.ground .seite.vorn{background:linear-gradient(160deg,rgba(245,242,235,.12),rgba(245,242,235,.05));border:1px solid rgba(232,201,138,.45);align-items:center;justify-content:center;text-align:center;gap:1.2rem;box-shadow:0 36px 60px -26px rgba(0,0,0,.5)}
.ground .vorn .welle-icon{width:64px;height:14px;color:var(--gold)}
.ground .vorn .nutzen{font-family:'Marcellus',serif;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.3;max-width:14ch}
.ground .vorn .nutzen em{color:var(--gold)}
.ground .vorn .dreh{position:absolute;bottom:1.3rem;left:0;right:0;justify-content:center;display:inline-flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.85}
.ground .vorn .dreh svg{width:13px;height:13px}
.ground .seite.hinten{transform:rotateY(180deg);color:var(--elfenbein);justify-content:center;box-shadow:0 36px 60px -26px rgba(0,0,0,.55)}
.ground .flip.methode .hinten{background:linear-gradient(150deg,var(--petrol-tief),var(--petrol))}
.ground .flip.verbaende .hinten{background:linear-gradient(150deg,var(--wald-tief),var(--wald))}
.ground .flip.zeit .hinten{background:linear-gradient(150deg,#2B2018,#4A342A)}
.ground .hinten::before{content:'';position:absolute;right:6%;bottom:7%;width:50%;aspect-ratio:1558/801;background:var(--gold);opacity:.1;-webkit-mask:url('https://stefanpons.de/redesign-assets/media/logo-zeichen.png') center/contain no-repeat;mask:url('https://stefanpons.de/redesign-assets/media/logo-zeichen.png') center/contain no-repeat;pointer-events:none}
.ground .hinten .k{font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.ground .hinten h4{font-family:'Marcellus',serif;font-size:1.4rem;margin-bottom:.7rem;color:var(--elfenbein)}
.ground .hinten p{font-size:.92rem;line-height:1.65;color:rgba(245,242,235,.92)}
.ground .hinten strong{font-weight:600;color:var(--gold)}
/* Rueckseiten-Inhalt baut sich gestaffelt auf */
.ground .hinten .k,.ground .hinten h4,.ground .hinten p{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ground .flip:is(:focus-visible,.gedreht) .hinten .k{opacity:1;transform:none;transition-delay:.32s}
.ground .flip:is(:focus-visible,.gedreht) .hinten h4{opacity:1;transform:none;transition-delay:.44s}
.ground .flip:is(:focus-visible,.gedreht) .hinten p{opacity:1;transform:none;transition-delay:.58s}
@media(hover:hover){
  .ground .flip:hover .hinten .k{opacity:1;transform:none;transition-delay:.32s}
  .ground .flip:hover .hinten h4{opacity:1;transform:none;transition-delay:.44s}
  .ground .flip:hover .hinten p{opacity:1;transform:none;transition-delay:.58s}
}
@media(prefers-reduced-motion:reduce){
  .ground .flip{animation:none}
  .ground .flip-inner{transition:none}
  .ground .hinten .k,.ground .hinten h4,.ground .hinten p{opacity:1;transform:none;transition:none}
}
.ground .nums{display:flex;gap:clamp(2.5rem,7vw,6rem);flex-wrap:wrap;margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(1.8rem,3vw,2.5rem);border-top:1px solid rgba(245,242,235,.25)}
.ground .num{font-family:'Marcellus',serif;font-size:clamp(2.4rem,4.5vw,3.6rem);color:var(--gold);line-height:1}
.ground .label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,242,235,.75);margin-top:.5rem}

/* ============ 8 · ABSCHLUSS — Steg im Sonnenaufgang ============ */
.close{position:relative;overflow:hidden;padding:clamp(8rem,16vw,13rem) 0;color:var(--elfenbein)}
.close .bg{position:absolute;inset:0;z-index:0}
.close .bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%;animation:kenburns 30s ease-in-out infinite alternate}
.close::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(92deg,rgba(22,32,36,.82) 0%,rgba(22,32,36,.55) 42%,rgba(22,32,36,.12) 75%,transparent 100%)}
.close .inner{max-width:46rem;position:relative;z-index:2}
.close .badge{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(232,201,138,.7);border-radius:999px;padding:.5rem 1.1rem;margin-bottom:1.8rem}
.close h2{font-size:clamp(2.1rem,4.4vw,3.5rem);max-width:20ch;text-shadow:0 2px 26px rgba(12,20,24,.35)}
.close h2 em{color:var(--gold)}
.close .sub{margin:1.3rem 0 2.4rem;color:rgba(245,242,235,.92);font-size:1.06rem;max-width:42ch}
.close .micro{margin-top:1.5rem;font-size:.8rem;color:rgba(245,242,235,.8)}
@media(prefers-reduced-motion:reduce){.close .bg img{animation:none}}

/* ============ MOBILE-LESBARKEIT ============
   Auf kleinen Bildschirmen werden die Fliesstexte angehoben,
   damit sie ohne Zoom angenehm lesbar bleiben. */
@media(max-width:600px){
  .desc,.method-note,.jr-card p,.sym-card p,
  .set-block li,.set-block p,.br-card li,.br-card .em,
  .ct-steps .stp,.kk-schritte li,
  .gmethod-point p,.journey-step p,.bridge-pillar p,
  .ground .hinten p,.offer-card .desc,.offer-more p,
  .as-body>p,.place-text>p,.ts-d,.jr-card .desc,
  .card .desc,.sf-part .cap p,.gmethod .method-note,.bridge .method-note,.method-flow p{
    font-size:15.8px;line-height:1.72
  }
  .form-hinweis,.offer-fine{font-size:13.6px}
}/* End custom CSS */