/* ============================================================
   WICHTIG, ZUERST LESEN

   OceanWP setzt die Grundschriftgröße auf 62,5 %, also 10 Pixel statt 16.
   Das ist eine verbreitete Technik, damit 1.6rem glatt 16px ergibt.
   Unser Gestaltungssystem rechnet aber mit 16 Pixeln. Ohne diese Zeile
   kommen alle Abstände, Maximalbreiten und Schriftgrößen auf 62,5 %
   ihrer vorgesehenen Größe an. Gemessen wurde das an acht Deklarationen,
   alle mit demselben Faktor.

   Die Regel wirkt nur auf der Kampagnenseite, weil dieses Stylesheet
   ausschließlich dort geladen wird.
   ============================================================ */
html{font-size:16px}

@font-face{font-family:'Fredoka';src:url(../fonts/fredoka.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Nunito';src:url(../fonts/nunito-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url(../fonts/nunito-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* ============================================================
     BANNER
     Große Bildschirme zeigen das Panorama vollständig, hier gibt es
     nichts einzustellen. Unter 820 px wird auf den kleinen Eisbären
     beschnitten. Die drei Werte darunter steuern diesen Ausschnitt und
     lassen sich im Entwurf mit dem Regler unten rechts einstellen.
     ============================================================ */
  /* ============================================================
     BANNER — Werte aus dem Originalfoto gemessen (1920 x 1000).
     Das Jungtier sitzt bei 41,9 % der Breite, es reicht von 22 %
     bis 70 % der Höhe. Es gibt keine getrennten Handy-Werte mehr,
     die Darstellung ist über alle Breiten dieselbe Rechnung.
     ============================================================ */
  --fx:45%;             /* Fokuspunkt, wirkt nur unter 806 px Breite */
  --hero-lift:-17.1vw;  /* wie weit die Begrüßung ins Bild hochrückt */

  /* werden vom Skript stufenlos überschrieben */
  --sk1:#EDF8FD; --sk2:#EDF8FD; --sk3:#DFF2FB;
  --fg:#07263A; --fg2:#3D6076; --accent:#FF8A6B; --night:0;

  --coral:#FF8A6B; --sea:#3E93C4; --deep:#12405F; --sun:#FFC24A;
  --paper:#F4FBFD;
  --pad:clamp(1.25rem,5vw,4rem); --r:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;color:var(--fg);background:#EAF6FB;
  font-family:'Nunito',system-ui,sans-serif;
  font-size:clamp(1.05rem,.5vw+.95rem,1.22rem);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3{font-family:'Fredoka','Nunito',system-ui,sans-serif;font-weight:600;
  letter-spacing:-.015em;line-height:1.08;margin:0;text-wrap:balance;color:var(--fg);
  transition:color 220ms linear}
p{margin:0 0 1.1em;max-width:38ch;color:var(--fg2);transition:color 220ms linear}

a{color:inherit}
img,svg,video,canvas{max-width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:8px}
.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--pad)}

/* ===== Himmel: eine einzige Fläche, per Skript stufenlos eingefärbt ===== */
#sky{position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg,var(--sk1) 0%,var(--sk2) 52%,var(--sk3) 100%)}
#stars{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:var(--night)}

/* ===== Kopfzeile ===== */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(12px) saturate(1.2);
  background:color-mix(in srgb,var(--sk2) 62%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
.bar{display:flex;align-items:center;gap:1.2rem;min-height:4.2rem}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:'Fredoka';font-weight:600;font-size:1.05rem;color:var(--fg)}
.logo svg{width:2.4rem;height:2.4rem;flex:none}
.badge{font-size:.66rem;line-height:1.3;color:var(--fg2);
  border-left:1px solid color-mix(in srgb,var(--fg) 22%,transparent);padding-left:.9rem;margin:0}
.badge b{color:var(--fg)}
nav{margin-left:auto;display:flex;gap:1.3rem;align-items:center}
nav a{font-family:'Fredoka';font-size:.9rem;text-decoration:none;color:var(--fg2);white-space:nowrap}
nav a:hover{color:var(--coral)}
nav .btn{background:var(--coral);color:#fff;padding:.55rem 1.1rem;border-radius:999px}
nav .btn:hover{color:#fff;filter:brightness(1.06)}

/* Mobilmenü, rein mit HTML gelöst */
.mob{margin-left:auto;display:none;position:relative}
.mob>summary{list-style:none;cursor:pointer;width:2.9rem;height:2.9rem;border-radius:14px;
  display:grid;place-content:center;gap:5px;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.mob>summary::-webkit-details-marker{display:none}
.mob>summary i{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--fg)}
.mob[open]>summary i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mob[open]>summary i:nth-child(2){opacity:0}
.mob[open]>summary i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mob>summary i{transition:transform .18s ease,opacity .18s ease}
.mobpanel{position:absolute;right:0;top:calc(100% + .7rem);width:min(17rem,78vw);
  background:#fff;border-radius:20px;padding:.6rem;display:grid;gap:.15rem;
  box-shadow:0 22px 50px -20px rgba(23,57,79,.45)}
.mobpanel a{display:block;padding:.75rem .9rem;border-radius:12px;text-decoration:none;
  font-family:'Fredoka';font-size:.98rem;color:#17394F}
.mobpanel a:hover{background:#F0F8FC}
.mobpanel a.hi{background:var(--coral);color:#fff;margin-top:.3rem;text-align:center}

@media(max-width:1080px){nav{display:none}.mob{display:block}}
@media(max-width:560px){.badge{display:none}}

/* Bildbanner, stufenlos über alle Bildschirmbreiten.

   Die Höhe folgt exakt dem Seitenverhältnis des Fotos (1920:1000 = 52,083 vw).
   Solange 52,083 vw über der Mindesthöhe liegt, ist das Bild komplett zu sehen,
   ohne jeden Beschnitt. Wird der Bildschirm schmaler, greift die Mindesthöhe,
   und der Browser beschneidet allmählich links und rechts, immer um den
   Fokuspunkt herum. Es gibt keinen Umschaltpunkt, der Beschnitt wächst
   kontinuierlich von null an.

   Der Fokuspunkt 42 % ist der gemessene Mittelpunkt des Jungtiers im Foto. */
.banner{position:relative;width:100%;line-height:0;overflow:hidden;margin:0;
  height:clamp(420px,52.083vw,1400px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.9) 76%,rgba(0,0,0,.45) 90%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.9) 76%,rgba(0,0,0,.45) 90%,transparent 100%)}
.banner img{width:100%;height:100%;display:block;object-fit:cover;
  object-position:var(--fx) 50%}

/* Die Begrüßung liegt im Bild, aber immer unterhalb des Jungtiers.
   Sie wird um einen an die Bildbreite gekoppelten Betrag hochgezogen,
   dadurch sitzt sie auf jedem Bildschirm an derselben Stelle im Motiv.
   Die Einrückung rechts lässt sie mit wachsender Breite sanft nach links
   wandern, weg vom Bären. Auf dem Handy fällt sie auf null, dort steht
   der Text mittig. */
.hero{position:relative}

/* Bewusst ohne Prozent- oder ch-Einheiten aufgebaut.
   Prozentuale Innenabstände können in Elementors Flex-Containern einen
   Zirkelbezug erzeugen, und ch hängt an der tatsächlich geladenen Schrift.
   Beides lag außerhalb dessen, was ich hier kontrollieren kann, deshalb
   jetzt nur feste Maße in rem. */
.hero-text{position:relative;z-index:3;text-align:center;
  display:block;width:100%;max-width:60rem;
  margin-inline:auto;
  padding-inline:var(--pad);
  margin-top:clamp(-26rem,var(--hero-lift),-2rem);
  padding-bottom:clamp(1.5rem,4vw,3rem)}
.hero h1{font-size:clamp(2.1rem,6.5vw,4.6rem);max-width:22rem;margin-inline:auto;
  text-shadow:0 1px 3px rgba(255,255,255,.85)}
@media(min-width:700px){.hero h1{max-width:34rem}}
.hero .say{font-size:clamp(1.05rem,.9vw+.85rem,1.4rem);max-width:30rem;margin:1rem auto 1.8rem;
  text-shadow:0 1px 3px rgba(255,255,255,.85)}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.btn-b{display:inline-block;text-decoration:none;font-family:'Fredoka';font-size:1.02rem;
  padding:.85rem 1.7rem;border-radius:999px;background:var(--coral);color:#fff;white-space:nowrap;
  box-shadow:0 8px 0 -2px rgba(255,138,107,.34);transition:transform .15s ease}
.btn-b:hover{transform:translateY(-2px)}
.btn-b.alt{background:#fff;color:#17394F;box-shadow:0 8px 0 -2px rgba(23,57,79,.14)}

.bob{animation:bob 7s ease-in-out infinite;transform-origin:center}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-9px) rotate(.5deg)}}
@media(prefers-reduced-motion:reduce){.bob{animation:none}}

.bob{animation:bob 7s ease-in-out infinite;transform-origin:center}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-9px) rotate(.5deg)}}
@media(prefers-reduced-motion:reduce){.bob{animation:none}}

/* ===== Kapitel ===== */
/* Elementor-Container sind Flexboxen. Ohne feste Breite werden unsere
   Abschnitte darin zu Flex-Elementen, die auf Inhaltsbreite schrumpfen. */
.hero,.chapter,.scene,#scenes{width:100%;flex:0 0 auto}
.chapter{padding-block:clamp(3.2rem,8vw,6.5rem)}
.duo{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr}.duo.flip>*:first-child{order:2}}
.kicker{font-family:'Fredoka';font-size:.85rem;color:var(--accent);margin:0 0 .7rem;max-width:none}
.chapter h2{font-size:clamp(1.85rem,4.4vw,3.1rem);max-width:15ch;margin-bottom:1.1rem}
.chapter p{font-size:1.05em}
.chapter .said{font-family:'Fredoka';font-size:1.25em;color:var(--fg);max-width:26ch;line-height:1.35}

/* Bildplatzhalter */
.slot{border-radius:var(--r);padding:1.2rem;min-height:16rem;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:color-mix(in srgb,#fff 42%,transparent);
  border:2px dashed color-mix(in srgb,var(--fg) 34%,transparent)}
.slot.tall{min-height:24rem}
.slot::before{content:'Bildfläche';position:absolute;top:1rem;left:1.2rem;
  font-family:'Fredoka';font-size:.72rem;color:var(--fg2);opacity:.9}
.slot b{font-family:'Fredoka';font-size:.95rem;display:block;margin-bottom:.3rem;color:var(--fg)}
.slot span{font-size:.78rem;line-height:1.5;color:var(--fg2)}

/* ===== Eisvergleich ===== */
.compare{display:grid;gap:1.4rem;margin-top:2rem}
@media(min-width:700px){.compare{grid-template-columns:1fr 1fr}}
.ice-card{background:#fff;border-radius:var(--r);padding:1.6rem;text-align:center;
  box-shadow:0 16px 36px -26px rgba(23,57,79,.55)}
.ice-card h3{font-size:1.12rem;margin-bottom:.2rem;color:#17394F}
.ice-card .yr{font-family:'Fredoka';font-size:2.6rem;font-weight:600;color:var(--sea);line-height:1;margin:0}
.ice-card.now .yr{color:var(--coral)}
.ice-card p{font-size:.9rem;margin:.6rem auto 0;max-width:28ch;color:#4A6C80}
.src{font-size:.78rem;margin-top:1.3rem;max-width:62ch;color:var(--fg2)}

/* ===== Aktion ===== */
.action{background:var(--coral);border-radius:var(--r);padding:clamp(1.8rem,5vw,3.4rem);
  display:grid;gap:2rem;align-items:center}
@media(min-width:880px){.action{grid-template-columns:1.05fr .95fr}}
.action h2,.action .kicker{color:#fff}
.action h2{font-size:clamp(1.8rem,4vw,2.8rem);max-width:16ch;margin-bottom:.9rem}
.action p{color:#FFE8E1;max-width:40ch}
.action .slot{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);min-height:18rem}
.action .slot b{color:#fff}.action .slot span,.action .slot::before{color:#FFE8E1}
.steps{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.7rem}
.steps li{display:flex;gap:.9rem;align-items:flex-start;font-size:.98rem;color:#FFF3EF}
.steps i{flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:#fff;color:var(--coral);
  font-family:'Fredoka';font-style:normal;font-size:.9rem;display:grid;place-items:center}

/* ===== Galerie ===== */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1.4rem;margin-top:2.2rem}
.pic{background:#fff;border-radius:14px;padding:.7rem .7rem 1rem;text-align:center;
  box-shadow:0 12px 26px -18px rgba(23,57,79,.55);transition:transform .2s ease}
.pic:nth-child(3n){transform:rotate(-1.6deg)}
.pic:nth-child(3n+2){transform:rotate(1.4deg)}
.pic:hover{transform:rotate(0) scale(1.03)}
.pic .ph{aspect-ratio:4/3;border-radius:8px;background:linear-gradient(135deg,#E6F4FB,#FFF2DC);margin-bottom:.55rem}
.pic small{font-family:'Fredoka';font-size:.8rem;color:#4A6C80}

/* ===== Tiere ===== */
.animals{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1.3rem;margin-top:2.2rem}
.animal{background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;display:block;
  box-shadow:0 16px 34px -26px rgba(23,57,79,.5)}
.animal .slot{border:0;border-radius:0;min-height:9.5rem;background:linear-gradient(135deg,#DFF2FB,#FFF0DA)}
.animal .slot::before{color:#4A6C80}
.animal .txt{padding:1.1rem 1.2rem 1.4rem}
.animal h3{font-size:1.08rem;margin-bottom:.3rem;color:#17394F}
.animal p{font-size:.88rem;margin:0;color:#4A6C80}

/* ===== Erwachsene ===== */
.grown{background:#fff;border-radius:var(--r);padding:clamp(1.8rem,5vw,3.4rem);
  box-shadow:0 22px 54px -38px rgba(23,57,79,.6);color:#17394F}
.grown h2,.grown h3{color:#17394F}
.grown p{color:#4A6C80}
.grown .kicker{color:var(--sea)}
.grown h2{font-size:clamp(1.7rem,3.6vw,2.5rem);max-width:20ch;margin-bottom:1rem}
.tips{display:grid;gap:1.1rem;margin-top:1.8rem}
@media(min-width:800px){.tips{grid-template-columns:repeat(3,1fr)}}
.tip{border-radius:20px;background:var(--paper);padding:1.3rem}
.tip h3{font-size:1.03rem;margin-bottom:.4rem}
.tip p{font-size:.9rem;margin:0}
.disclose{margin-top:2rem;padding:1.1rem 1.3rem;border-radius:18px;background:#FFF6E6;
  font-size:.86rem;line-height:1.6;color:#17394F}
.disclose b{display:block;margin-bottom:.2rem}


/* ============ Vollbild-Szenen ============
   Alle sieben Illustrationen liegen in einem einzigen festen Layer
   übereinander. Beim Scrollen blendet immer nur das nächste über das
   vorige. Dadurch steht das Bild still, während der Text darüber zieht,
   und der Wechsel von Kapitel zu Kapitel ist eine Überblendung statt
   eines Schnitts. */
#scenes{position:fixed;inset:0;z-index:-1;opacity:0;pointer-events:none;overflow:hidden}
#scenes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--px) var(--py);opacity:0;will-change:opacity}
/* Abdunklung: Vignette plus kräftiger Verlauf nach unten. Sorgt dafür,
   dass die Schrift auf jedem Motiv liest, ohne dass ein Kasten nötig wäre. */
/* globale Vignette entfernt, sie wusch die hellen Aquarelle aus */
#scenes .ai-tag{position:absolute;right:1.1rem;bottom:.9rem;left:auto;top:auto}

.scene{position:relative;min-height:165svh;padding:0}

/* Der Textrahmen klebt eine Bildschirmhöhe lang fest, genau wie das Bild
   dahinter. Dadurch bewegen sich Bild und Text nicht mehr gegeneinander.
   Sichtbarkeit steuert das Skript, gekoppelt an dieselbe Überblendung. */
.scene-stick{position:sticky;top:0;height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(2.5rem,9svh,7rem);opacity:0;will-change:opacity}

/* Große, weich auslaufende Fläche über dem unteren Bilddrittel.
   Deutlich kräftiger und höher als vorher, damit die Schrift wirklich steht. */
.scene-stick::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to top,
    rgba(248,245,238,.985) 0%, rgba(248,245,238,.955) 20%,
    rgba(248,245,238,.86)  36%, rgba(248,245,238,.52) 55%,
    rgba(248,245,238,.18)  70%, transparent 84%)}
.scene[data-tone="dunkel"] .scene-stick::before{
  background:linear-gradient(to top,
    rgba(5,22,38,.97) 0%, rgba(5,22,38,.93) 20%,
    rgba(5,22,38,.80) 36%, rgba(5,22,38,.48) 55%,
    rgba(5,22,38,.17) 70%, transparent 84%)}

.scene-stick>.wrap{position:relative;z-index:1;width:100%}
.scene-body{max-width:42rem;will-change:transform}
.scene[data-side="rechts"] .scene-body{margin-inline:auto 0}

.scene-body .kicker{color:#C2542A}
.scene-body h2{color:#0B2B40;font-size:clamp(2rem,5vw,3.6rem);max-width:16ch;margin-bottom:1rem}
.scene-body p{color:#2B4D63;font-size:clamp(1.05rem,.6vw+.95rem,1.3rem);max-width:36ch}
.scene-body .said{color:#0B2B40;font-family:'Fredoka';font-size:1.28em;line-height:1.34;max-width:24ch}
.scene[data-tone="dunkel"] .scene-body .kicker{color:#FFC08A}
.scene[data-tone="dunkel"] .scene-body h2,
.scene[data-tone="dunkel"] .scene-body .said{color:#fff}
.scene[data-tone="dunkel"] .scene-body p{color:#DCEBF6}

@media(max-width:720px){
  .scene{min-height:145svh}
  .scene-stick{padding-bottom:clamp(1.5rem,6svh,4rem)}
  .scene-body{max-width:none}
}

/* ===== Bausteine für die übernommenen Inhalte ===== */
.claim{margin:1.6rem auto 0;max-width:30ch;font-family:'Fredoka';font-size:clamp(1.15rem,1.3vw+.9rem,1.75rem);
  line-height:1.2;color:var(--fg);text-shadow:0 1px 3px rgba(255,255,255,.85)}
.claim b{display:block;font-weight:600}
.claim span{font-size:.72em;font-weight:400;opacity:.8}

.stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1.1rem;margin-top:2.2rem}
.tale{background:#fff;border-radius:20px;padding:1.2rem 1.3rem 1.35rem;text-decoration:none;display:block;
  box-shadow:0 16px 34px -26px rgba(4,24,38,.6);transition:transform .18s ease}
.tale:hover{transform:translateY(-3px)}
.tale q{display:block;font-size:.95rem;line-height:1.5;color:#3D6076;quotes:'„' '“';margin-bottom:.7rem}
.tale b{font-family:'Fredoka';font-size:.9rem;color:#07263A;font-weight:600}

.adr{margin-top:1.6rem;padding:1.1rem 1.3rem;border-radius:18px;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.42);font-size:.95rem;line-height:1.6;color:#fff}
.adr b{font-family:'Fredoka';display:block;margin-bottom:.35rem}

.grown h3{margin-top:1.8rem;font-size:1.22rem}
.grown h3:first-of-type{margin-top:1.2rem}
.grown>p,.grown li{max-width:62ch}
.quelle{display:inline-block;font-size:.72rem;font-family:'Fredoka';color:#6A8496;
  background:#EEF6FA;border-radius:8px;padding:.12rem .5rem;margin-left:.35rem;vertical-align:.1em}
.facts2{display:grid;gap:1rem;margin-top:1.4rem}
@media(min-width:760px){.facts2{grid-template-columns:repeat(2,1fr)}}
.f2{background:var(--paper);border-radius:18px;padding:1.2rem 1.3rem}
.f2 b{font-family:'Fredoka';font-size:1.45rem;display:block;color:#07263A;line-height:1.1;margin-bottom:.3rem}
.f2 p{font-size:.9rem;margin:0;color:#3D6076}

.kontakt{display:grid;gap:1.6rem}
@media(min-width:820px){.kontakt{grid-template-columns:1fr 1fr}}
.kbox{background:#fff;border-radius:var(--r);padding:clamp(1.5rem,4vw,2.6rem);
  box-shadow:0 20px 46px -34px rgba(4,24,38,.7);color:#07263A}
.kbox h3{font-size:1.3rem;margin-bottom:1rem}
.kline{display:flex;gap:.8rem;align-items:baseline;margin-bottom:.7rem;font-size:1.02rem}
.kline span{font-family:'Fredoka';font-size:.78rem;color:#6A8496;min-width:5.2rem}
.kbox a{color:#07263A}
.gruss{margin-top:1.4rem;font-family:'Fredoka';color:#3D6076;font-size:.95rem}

footer{background:var(--deep);color:#CFE6F2;padding-block:2.6rem;margin-top:clamp(3rem,7vw,5rem);font-size:.9rem}
.foot{display:flex;flex-wrap:wrap;gap:1rem 1.7rem;align-items:center}
footer a{color:#fff}
footer .mini{margin-left:auto;font-size:.74rem;opacity:.65}

/* ===== Schutz gegen Theme- und Elementor-Stile =====
   OceanWP und Elementors Theme-Stil setzen Farben für Überschriften global.
   Ohne diesen Block bleiben die Überschriften dunkel, auch wenn der
   Hintergrund längst tiefblau ist. */
.hero h1,
.chapter h2,.chapter h3,
.chapter .kicker,.chapter p{color:inherit}
.hero h1{color:var(--fg)!important}
.chapter h2,.chapter h3{color:var(--fg)!important}
.chapter p{color:var(--fg2)!important}
.chapter .kicker{color:var(--accent)!important}
.scene-body h2,.scene-body .said{color:#0B2B40!important}
.scene-body p{color:#2B4D63!important}
.scene-body .kicker{color:#C2542A!important}
.scene[data-tone="dunkel"] .scene-body h2,
.scene[data-tone="dunkel"] .scene-body .said{color:#fff!important}
.scene[data-tone="dunkel"] .scene-body p{color:#DCEBF6!important}
.scene[data-tone="dunkel"] .scene-body .kicker{color:#FFC08A!important}
/* Bereiche mit eigenem Hintergrund behalten ihre festen Farben */
.grown h2,.grown h3{color:#17394F!important}
.grown p,.tip p{color:#4A6C80!important}
.grown .kicker{color:var(--sea)!important}
.action h2{color:#fff!important}
.action p,.steps li{color:#FFE8E1!important}
.action .kicker{color:#fff!important}
.ice-card h3{color:#17394F!important}
.ice-card p{color:#4A6C80!important}
.animal h3,.tale b,.kbox,.kbox h3{color:#07263A!important}
.animal p,.tale q{color:#4A6C80!important}
.disclose{color:#17394F!important}
.mobpanel a{color:#17394F!important}


/* Kein buchstabenweiser Umbruch, auch wenn das Theme break-all setzt */
.hero-text,.hero-text *,.claim,
.chapter h2,.chapter h3,.chapter p,.scene-body,.scene-body *{
  word-break:normal!important;overflow-wrap:break-word;hyphens:none}
.claim{max-width:34rem;margin-inline:auto}

/* Untergrenze für alle Textblöcke mit ch-Maßen. Falls die Einheit wegen einer
   fremden Schrift zu klein ausfällt, kann nichts mehr kollabieren. */
.chapter h2,.scene-body h2,.action h2,.grown h2,.chapter .said{
  min-width:min(100%,18rem)}

/* ===== Schriftgrößen gegen Theme-Vorgaben absichern =====
   OceanWP setzt feste Pixelgrößen für h1 bis h6. Ohne Vorrang gewinnen die,
   und dann stehen 23-Pixel-Überschriften vor bildschirmfüllenden Illustrationen. */
.hero h1{font-size:clamp(2.4rem,6.5vw,5rem)!important;line-height:1.04!important;margin:0 auto!important}
.hero .say{font-size:clamp(1.1rem,1.1vw+.9rem,1.5rem)!important;line-height:1.55!important}

.chapter h2{font-size:clamp(1.9rem,4.4vw,3.1rem)!important;line-height:1.06!important;margin:0 0 1.1rem!important}
.chapter h3{font-size:1.22rem!important;line-height:1.2!important}
.chapter p{font-size:clamp(1.02rem,.5vw+.9rem,1.18rem)!important;line-height:1.66!important}
.chapter .kicker{font-size:.88rem!important;line-height:1.3!important;margin:0 0 .7rem!important}

/* Die Szenen stehen vor einem ganzen Bildschirm Bild und brauchen mehr Gewicht */
.scene-body h2{font-size:clamp(2.3rem,5.6vw,4.4rem)!important;line-height:1.02!important;margin:0 0 1.1rem!important}
.scene-body p{font-size:clamp(1.12rem,.7vw+1rem,1.45rem)!important;line-height:1.6!important}
.scene-body .said{font-size:clamp(1.4rem,1.6vw+1rem,2rem)!important;line-height:1.3!important}
.scene-body .kicker{font-size:.95rem!important;margin:0 0 .8rem!important}
.scene-body{max-width:46rem}

.grown h2{font-size:clamp(1.8rem,3.6vw,2.6rem)!important;line-height:1.1!important}
.grown h3{font-size:1.28rem!important;line-height:1.25!important}
.action h2{font-size:clamp(1.9rem,4vw,2.9rem)!important;line-height:1.08!important}
.ice-card .yr{font-size:2.8rem!important;line-height:1!important}
.ice-card h3,.animal h3,.kbox h3,.tip h3{font-size:1.15rem!important;line-height:1.25!important}


/* ===== Abdunklung nur dort, wo Text steht, und im passenden Ton =====
   Kein Schleier über dem ganzen Bild mehr. Die Fläche beginnt erst im unteren
   Drittel, läuft dort aber kräftig aus, damit die Schrift trägt. */
#scenes::after{content:none}
.scene-stick::before{
  background:linear-gradient(to bottom,
    transparent 0%, transparent 34%,
    rgba(250,248,243,.30) 48%, rgba(250,248,243,.68) 60%,
    rgba(250,248,243,.90) 72%, rgba(250,248,243,.97) 86%,
    rgba(250,248,243,.99) 100%)!important}
.scene[data-tone="dunkel"] .scene-stick::before{
  background:linear-gradient(to bottom,
    transparent 0%, transparent 30%,
    rgba(5,20,36,.34) 46%, rgba(5,20,36,.70) 60%,
    rgba(5,20,36,.88) 74%, rgba(5,20,36,.95) 88%,
    rgba(5,20,36,.97) 100%)!important}


/* OceanWP lädt Lato und setzt es mit Vorrang. Unsere Schriften liegen lokal. */
h1,h2,h3,.hero h1,.chapter h2,.chapter h3,.scene-body h2,.scene-body .said,
.kicker,.logo,.btn-b,.claim,.f2 b,.ice-card .yr,.tale b,.kbox h3,.steps i{
  font-family:'Fredoka','Nunito',system-ui,sans-serif!important}
body,p,li,a,span,div,.scene-body p,.chapter p{font-family:'Nunito',system-ui,sans-serif}
.scene-body p,.chapter p,.grown p,.tip p{font-family:'Nunito',system-ui,sans-serif!important}


/* ===== position:sticky wieder funktionsfähig machen =====
   overflow-x:hidden lässt den Browser die Gegenachse als auto berechnen.
   Der body wird dadurch zum Scrollcontainer, und sticky klebt an ihm statt
   am Fenster, also faktisch nie. overflow-x:clip erzeugt keinen
   Scrollcontainer und schneidet trotzdem seitlich ab. */
html,body{overflow-x:clip}
@supports not (overflow-x:clip){
  html,body{overflow-x:visible}   /* lieber seitliches Scrollen als kein sticky */
}
/* Auch ein Vorfahre mit overflow oder transform hebelt sticky aus */
.elementor-widget-html,.elementor-widget-container,
.elementor-element,.e-con,.e-con-inner,
#main,#content-wrap,.site-content{overflow:visible!important}

/* ===== Aus Platzhalter wird Bild ===== */
.kle-bild{margin:0;border-radius:var(--r);overflow:hidden;
  box-shadow:0 22px 46px -30px rgba(4,24,38,.55)}
.kle-bild img{width:100%;height:auto;display:block}
.animal .kle-bild{border-radius:0;box-shadow:none}
.action .kle-bild{border-radius:var(--r)}
.pic{margin:0}
.pic figcaption{margin-top:.55rem}
.pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.slot code{font-family:ui-monospace,monospace;font-size:.92em;
  background:rgba(255,255,255,.35);padding:.05em .35em;border-radius:5px}

/* ===== Geschichten als Bildkarten mit Vergrößerung ===== */
.tale{padding:.6rem .6rem .9rem;text-align:center}
.tale img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;
  border-radius:12px;display:block;margin-bottom:.6rem;background:#EEF6FA}
.tale b{font-size:.92rem}
.tale::after{content:'Vergrößern';display:block;font-family:'Fredoka';font-size:.72rem;
  color:#6A8496;margin-top:.25rem}

/* Vollbildansicht */
#kle-lupe{position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(6,22,38,.92);padding:clamp(1rem,4vw,3rem);
  align-items:center;justify-content:center;flex-direction:column;gap:1rem}
#kle-lupe.auf{display:flex}
#kle-lupe img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:10px;
  background:#fff;box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
#kle-lupe figcaption{font-family:'Fredoka';color:#fff;font-size:1.05rem}
#kle-lupe button{position:absolute;top:1rem;right:1rem;width:2.8rem;height:2.8rem;
  border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer}
#kle-lupe button:hover{background:rgba(255,255,255,.28)}
#kle-lupe nav{display:flex;gap:.6rem}
#kle-lupe nav button{position:static;width:auto;height:auto;padding:.5rem 1.1rem;
  border-radius:999px;font-family:'Fredoka';font-size:.9rem}

/* ============================================================
   RESPONSIVE-KORREKTUREN
   ============================================================ */

/* 1. Buttons dürfen umbrechen.
   white-space:nowrap machte den längsten Button 453 px breit und damit das
   ganze Dokument breiter als ein Handybildschirm. Alles rechts davon wurde
   abgeschnitten, nicht nur in diesem Abschnitt. */
.btn-b{white-space:normal;max-width:100%}
@media(min-width:620px){.btn-b{white-space:nowrap}}
@media(max-width:480px){
  .btn-b{font-size:.96rem;padding:.8rem 1.25rem;line-height:1.3}
}
.action,.grown,.kbox,.ice-card,.f2,.tip,.adr{min-width:0;max-width:100%}
.stories,.gallery,.animals,.facts2,.tips{min-width:0}

/* 2. Das Titelbild bekam seine Höhe nicht.
   OceanWP setzt img{height:auto} und hat damit unsere Bildhöhe überschrieben.
   Dadurch lief das Panorama auf dem Handy als 205 px hoher Streifen. */
.banner{height:clamp(420px,52.083vw,1400px)!important}
.banner img{height:100%!important;width:100%!important;object-fit:cover!important}
@media(max-width:720px){
  .banner{height:clamp(300px,58svh,440px)!important}
}

/* 3. Der Kapiteltext klebte nicht durchgehend, sondern nur auf einem Teil
   der Strecke. Davor und danach wanderte er mit der Seite, während das Bild
   dahinter stand. Genau das fühlt sich an wie Scrollen ins Leere.
   Als feste Ebene bewegt er sich gar nicht mehr, nur die Deckkraft ändert
   sich, synchron mit dem Bild. */
.scene-stick{position:fixed!important;inset:0!important;height:100svh!important;
  z-index:2;margin:0!important}
.scene{min-height:140svh}
@media(max-width:720px){
  .scene{min-height:118svh}
  .scene-body{max-width:none}
}

/* 4. Kopfzeile auf schmalen Bildschirmen */
@media(max-width:560px){
  .bar{gap:.6rem;min-height:3.6rem}
  .logo img{height:2.5rem}
  .mob>summary{width:2.6rem;height:2.6rem}
}
@media(max-width:380px){.logo img{height:2.1rem}}

/* 5. Geschichtenkarten auf dem Handy */
@media(max-width:560px){
  .stories{grid-template-columns:1fr;gap:1rem}
  .tale img{aspect-ratio:4/5}
}