:root{--wwm-coral:#e45d50;--wwm-coral-dark:#c9483d;--wwm-ink:#233d33;--wwm-moss:#4a7c59;--wwm-sand:#f4f1ea;--wwm-line:#e4ded2;}
.wwm-sec{padding:42px 0;color:var(--wwm-ink);line-height:1.6;}
.wwm-sec.alt{background:var(--wwm-sand);border-radius:14px;margin:10px 0;}
.wwm-wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
.wwm-sec h2{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.2;margin:0 0 .5em;color:var(--wwm-ink);}
.wwm-sec h3{font-size:1.2rem;margin:0 0 .4em;color:var(--wwm-ink);}
.wwm-center{text-align:center;}
.wwm-lead{font-size:clamp(1.08rem,2.1vw,1.3rem);color:#2c4a3d;max-width:760px;margin:0 auto 1em;}
.wwm-lead strong{color:var(--wwm-coral-dark);}
.btn-coral{display:inline-block;background:var(--wwm-coral);color:#fff !important;text-decoration:none;font-weight:700;font-size:1.05rem;padding:15px 34px;border-radius:8px;box-shadow:0 6px 18px rgba(228,93,80,.35);transition:background .15s,transform .15s;}
.btn-coral:hover{background:var(--wwm-coral-dark);transform:translateY(-1px);}
/* HERO */
.wwm-hero{position:relative;min-height:clamp(430px,62vh,620px);display:flex;align-items:center;border-radius:14px;overflow:hidden;margin:0 0 8px;}
.wwm-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.wwm-hero .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,38,30,.84) 0%,rgba(20,38,30,.55) 48%,rgba(20,38,30,.15) 100%);}
.wwm-hero .inner{position:relative;max-width:660px;padding:36px 26px;color:#fff;}
.wwm-hero h1{font-size:clamp(1.9rem,4.8vw,3.1rem);line-height:1.1;margin:0 0 .35em;color:#fff;font-weight:800;}
.wwm-hero p.sub{font-size:clamp(1.02rem,2vw,1.28rem);color:#f2efe8;margin:0 0 1.3em;}
.wwm-hero p.note{font-size:.9rem;color:#d8e5db;margin:.9em 0 0;}
/* STATS */
.wwm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px;}
.wwm-stat{background:#fff;border:1px solid var(--wwm-line);border-radius:12px;padding:22px 18px;text-align:center;}
.wwm-stat .num{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;color:var(--wwm-coral);line-height:1;margin-bottom:.3em;}
.wwm-stat .lbl{font-size:.93rem;color:#3c5a4c;}
/* SPLIT image+text */
.wwm-split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;}
.wwm-split.right{direction:rtl;}.wwm-split.right>*{direction:ltr;}
.wwm-split img{width:100%;height:auto;border-radius:12px;display:block;aspect-ratio:3/2;object-fit:cover;}
/* CARDS / STEPS */
.wwm-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px;}
.wwm-card{background:#fff;border:1px solid var(--wwm-line);border-radius:12px;padding:22px;}
.wwm-card h3{color:var(--wwm-moss);}
.wwm-tag{display:inline-block;font-size:.82rem;font-weight:700;color:#fff;background:var(--wwm-moss);padding:2px 11px;border-radius:20px;margin-bottom:10px;}
.wwm-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;}
.wwm-phase{background:#fff;border:1px solid var(--wwm-line);border-radius:12px;overflow:hidden;}
.wwm-phase img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;}
.wwm-phase .pc{padding:18px;}
.wwm-steps{display:grid;gap:14px;margin-top:24px;}
.wwm-step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--wwm-line);border-radius:12px;padding:18px 20px;}
.wwm-step .n{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--wwm-coral);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;}
/* TABLE */
.wwm-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--wwm-line);margin-top:20px;}
.wwm-table th,.wwm-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--wwm-line);font-size:.98rem;}
.wwm-table th{background:var(--wwm-moss);color:#fff;font-weight:700;}
.wwm-table tr:last-child td{border-bottom:none;}
/* FAQ */
.wwm-faq details{background:#fff;border:1px solid var(--wwm-line);border-radius:10px;padding:6px 18px;margin-bottom:10px;}
.wwm-faq summary{cursor:pointer;font-weight:700;padding:12px 0;color:var(--wwm-ink);}
.wwm-faq .a{padding:0 0 12px;margin:0;}
/* CTA */
.wwm-cta-band{background:linear-gradient(120deg,#24463a,#3a6b52);border-radius:14px;padding:44px 26px;text-align:center;color:#fff;margin:14px 0;}
.wwm-cta-band h2{color:#fff;}
.wwm-cta-band p{color:#e2ece5;max-width:640px;margin:0 auto 1.5em;font-size:1.08rem;}
/* TRUST */
.wwm-trust{font-size:.9rem;color:#5a6f63;text-align:center;padding:6px 0;}
.wwm-trust b{color:var(--wwm-ink);}
@media(max-width:820px){
 .wwm-stats{grid-template-columns:repeat(2,1fr);}
 .wwm-cards,.wwm-phases,.wwm-split{grid-template-columns:1fr;}
 .wwm-split.right{direction:ltr;}
 .wwm-hero .ov{background:linear-gradient(180deg,rgba(20,38,30,.5),rgba(20,38,30,.82));}
}
/* LP-Grid-Fix: der Site-Grid-Container hat feste Zeilenhoehen (grid-template-rows) und
   quetscht den Hero in eine 60px-Zeile -> Overlap. Nur auf Seiten mit Hero zuruecksetzen. */
:has(> .wwm-hero){grid-template-rows:none !important;grid-auto-rows:auto !important;}

/* ============================================================
   WOW-LAYER  (Design-Upgrade Demo, 19.08.2026) – nur additive Overrides
   Marker: WWM-WOW-START / WWM-WOW-END  (leicht wieder entfernbar)
   ============================================================ */
/* WWM-WOW-START */

/* --- mehr Luft & Rhythmus --- */
.wwm-sec{padding:60px 0;}
.wwm-lead{font-size:clamp(1.14rem,2.15vw,1.42rem);line-height:1.55;}

/* --- Section-Überschriften: Coral-Kicker-Strich --- */
h2.wwm-center::after,.wwm-cta-band h2::after{content:"";display:block;width:58px;height:4px;border-radius:3px;background:var(--wwm-coral);margin:.6rem auto 0;box-shadow:0 4px 12px rgba(228,93,80,.45);}

/* --- HERO: cinematisch, Ken-Burns, größer, weicher Einstieg --- */
.wwm-hero{min-height:clamp(520px,76vh,720px);}
.wwm-hero img.bg{animation:wwmKen 20s ease-out both;transform-origin:62% 42%;}
@keyframes wwmKen{from{transform:scale(1.14);}to{transform:scale(1);}}
.wwm-hero .ov{background:
  radial-gradient(120% 95% at 14% 42%,rgba(16,32,25,.88),rgba(16,32,25,.42) 58%,rgba(16,32,25,0) 100%),
  linear-gradient(0deg,rgba(12,26,19,.80) 0%,rgba(12,26,19,.08) 46%);}
.wwm-hero .inner{max-width:730px;padding:46px 30px;animation:wwmUp .85s .05s ease-out both;}
.wwm-hero h1{font-size:clamp(2.15rem,5.6vw,3.7rem);letter-spacing:-.01em;text-shadow:0 2px 26px rgba(0,0,0,.38);}
.wwm-hero h1::after{content:"";display:block;width:78px;height:5px;margin-top:.55rem;border-radius:3px;background:var(--wwm-coral);box-shadow:0 4px 16px rgba(228,93,80,.65);}
.wwm-hero p.sub{font-size:clamp(1.08rem,2.05vw,1.4rem);max-width:610px;}
@keyframes wwmUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

/* --- STATS (hell): schwebende Kacheln, Verlaufszahlen, Akzentleiste, Hover --- */
.wwm-stat{padding:32px 20px;border:none;box-shadow:0 12px 32px rgba(35,61,51,.09);position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s;}
.wwm-stat::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--wwm-coral),#f2a390);}
.wwm-stat:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(35,61,51,.17);}
.wwm-stat .num{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;background:linear-gradient(180deg,var(--wwm-coral),var(--wwm-coral-dark));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.wwm-stat .lbl{font-size:.98rem;}

/* --- STATS (dramatisches Foto-Band): das Alt-Zahlen-Band wird zum Bild-Panel --- */
.wwm-sec.alt:has(.wwm-stats){
  background:linear-gradient(155deg,rgba(14,30,22,.90),rgba(20,48,35,.80)),url("/fileadmin/landingpages/moor-und-klima/hero.webp");
  background-size:cover;background-position:center;color:#fff;border-radius:18px;padding:58px 26px;margin:18px 0;
  box-shadow:0 24px 60px rgba(16,32,25,.28);}
.wwm-sec.alt:has(.wwm-stats) h2{color:#fff;}
.wwm-sec.alt:has(.wwm-stats) .wwm-lead{color:#e8f0ea;}
.wwm-sec.alt:has(.wwm-stats) .wwm-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:none;backdrop-filter:blur(3px);}
.wwm-sec.alt:has(.wwm-stats) .wwm-stat::before{background:var(--wwm-coral);}
.wwm-sec.alt:has(.wwm-stats) .wwm-stat:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.32);}
.wwm-sec.alt:has(.wwm-stats) .wwm-stat .num{background:none;-webkit-text-fill-color:#ff9280;color:#ff9280;font-size:clamp(2.6rem,6vw,4rem);text-shadow:0 6px 24px rgba(0,0,0,.35);}
.wwm-sec.alt:has(.wwm-stats) .wwm-stat .lbl{color:#e8f0ea;}

/* --- BILD+TEXT: größere, gerahmte Bilder, Akzent-Balken an der Headline, Hover-Zoom --- */
.wwm-split{gap:48px;}
.wwm-split img{border-radius:18px;box-shadow:0 20px 48px rgba(35,61,51,.20);aspect-ratio:4/3;transition:transform .35s;}
.wwm-split:hover img{transform:scale(1.02);}
.wwm-split h2{position:relative;padding-left:20px;}
.wwm-split h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:6px;border-radius:3px;background:var(--wwm-coral);}

/* --- KARTEN: Coral-Deckleiste, schwebender Hover, Verlaufs-Tag --- */
.wwm-card{border:none;border-top:4px solid var(--wwm-coral);box-shadow:0 12px 32px rgba(35,61,51,.09);transition:transform .22s,box-shadow .22s;}
.wwm-card:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(35,61,51,.17);}
.wwm-tag{background:linear-gradient(90deg,var(--wwm-moss),#356149);}

/* --- FAQ: weicher, mit Tiefe --- */
.wwm-faq details{border:none;box-shadow:0 6px 18px rgba(35,61,51,.07);transition:box-shadow .2s;}
.wwm-faq details[open]{box-shadow:0 14px 32px rgba(35,61,51,.13);}
.wwm-faq summary{font-size:1.06rem;}

/* --- CTA: fotografisches Band, größer --- */
.wwm-cta-band{position:relative;overflow:hidden;padding:70px 26px;
  background:linear-gradient(120deg,rgba(18,50,37,.92),rgba(32,82,60,.80)),url("/fileadmin/landingpages/moor-und-klima/hero.webp");
  background-size:cover;background-position:center 60%;box-shadow:0 24px 60px rgba(16,32,25,.28);}
.wwm-cta-band h2{font-size:clamp(1.9rem,4vw,2.9rem);}
.wwm-cta-band p{font-size:1.16rem;}
.btn-coral{font-size:1.12rem;padding:17px 40px;}
.wwm-cta-band .btn-coral{box-shadow:0 12px 34px rgba(228,93,80,.55);}

/* --- Mobile-Feinschliff --- */
@media(max-width:820px){
  .wwm-hero{min-height:clamp(440px,64vh,560px);}
  .wwm-sec{padding:40px 0;}
  .wwm-sec.alt:has(.wwm-stats){padding:40px 18px;}
  .wwm-stat .num{font-size:2.2rem;}
}
/* WWM-WOW-END */

/* ============ SCROLL-REVEAL (progressive enhancement) ============ */
/* WWM-REVEAL-START */
/* Nur wenn JS aktiv ist (html.wwm-js) werden Elemente zunächst versteckt.
   Ohne JS bleibt alles sichtbar -> SEO- und ausfallsicher.
   Animiert werden ausschließlich opacity + transform (GPU, kein Reflow, kein CLS). */
.wwm-js .wwm-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.wwm-js .wwm-reveal.in{opacity:1;transform:none;}
/* leichte Staffelung der Kacheln/Karten innerhalb eines sichtbaren Blocks */
.wwm-js .wwm-reveal .wwm-stat,.wwm-js .wwm-reveal .wwm-card,.wwm-js .wwm-reveal .wwm-phase{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.wwm-js .wwm-reveal.in .wwm-stat,.wwm-js .wwm-reveal.in .wwm-card,.wwm-js .wwm-reveal.in .wwm-phase{opacity:1;transform:none;}
.wwm-js .wwm-reveal.in .wwm-stat:nth-child(2),.wwm-js .wwm-reveal.in .wwm-card:nth-child(2){transition-delay:.09s;}
.wwm-js .wwm-reveal.in .wwm-stat:nth-child(3),.wwm-js .wwm-reveal.in .wwm-card:nth-child(3){transition-delay:.18s;}
.wwm-js .wwm-reveal.in .wwm-stat:nth-child(4),.wwm-js .wwm-reveal.in .wwm-card:nth-child(4){transition-delay:.27s;}
/* Barrierefreiheit: keine Bewegung, wenn der Nutzer das wünscht */
@media(prefers-reduced-motion:reduce){
  .wwm-js .wwm-reveal,.wwm-js .wwm-reveal.in,
  .wwm-js .wwm-reveal .wwm-stat,.wwm-js .wwm-reveal .wwm-card,.wwm-js .wwm-reveal .wwm-phase{
    opacity:1 !important;transform:none !important;transition:none !important;}
}
/* WWM-REVEAL-END */

/* WWM-HERO-CENTER: Hero an die zentrierte Seite angleichen */
.wwm-hero{justify-content:center;}
.wwm-hero .inner{max-width:820px;margin:0 auto;text-align:center;}
.wwm-hero h1::after{margin-left:auto;margin-right:auto;}
.wwm-hero p.sub{margin-left:auto;margin-right:auto;}
.wwm-hero .ov{background:
  linear-gradient(180deg,rgba(12,26,19,.36) 0%,rgba(12,26,19,.30) 42%,rgba(12,26,19,.74) 100%),
  radial-gradient(130% 120% at 50% 42%,rgba(12,26,19,.18),rgba(12,26,19,.52));}
@media(max-width:820px){.wwm-hero .ov{background:linear-gradient(180deg,rgba(12,26,19,.35),rgba(12,26,19,.78));}}
/* WWM-HERO-CENTER-END */

/* WWM-PHOTOBAND-VAR: Foto-Hintergründe nutzen das jeweils eigene, bereits geladene Hero-Bild */
.wwm-sec.alt:has(.wwm-stats){background:#12271b;background-image:linear-gradient(155deg,rgba(14,30,22,.90),rgba(20,48,35,.80)),var(--wwm-hero-img,none);background-size:cover;background-position:center;}
.wwm-cta-band{background:#173524;background-image:linear-gradient(120deg,rgba(18,50,37,.92),rgba(32,82,60,.80)),var(--wwm-hero-img,none);background-size:cover;background-position:center 60%;}
/* WWM-PHOTOBAND-VAR-END */