/* ============================================================
   Zwergenwald „Waldnacht & Glut" — Marken-Tokens & Design-Feinschliff
   Quelle: briefing/brand.md · input/brand/design-tokens.json
   Wird NACH base.css geladen und überschreibt die Tokens.
   ============================================================ */
:root {
  --color-bg: #faf6ef;            /* Birkenpapier */
  --color-surface: #ffffff;
  --color-text: #22302b;
  --color-text-dim: #5c685f;
  --color-accent: #e8892b;        /* Glut — nur CTAs/Highlights */
  --color-accent-dark: #c96f1a;
  --tanne: #14342b;
  --tanne-text: #faf6ef;
  --tanne-text-dim: #d8e0db;
  --moos: #5f7d5c;
  --denim: #35597c;
  --line: #e8e3d8;
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --font-hand: "Caveat", cursive;
  --radius: 16px;
}

h1, h2 { font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-weight: 600; }
.eyebrow { color: var(--moos); }

/* --- Typo-Highlights: einzelne Wörter größer & in Glut ---------------------- */
.hl { color: var(--color-accent); font-style: normal; }
.hl-big { color: var(--color-accent); font-style: normal; font-size: 1.16em; }
.hand {
  font-family: var(--font-hand); color: var(--color-accent);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 600; line-height: 1;
  display: inline-block; transform: rotate(-2deg);
}
.stat {
  font-family: var(--font-head); color: var(--color-accent);
  font-size: clamp(3.2rem, 9vw, 6.5rem); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: 0.38em; color: var(--color-text-dim); font-family: var(--font-body); font-weight: 800; }
.stat-row { display: flex; gap: clamp(24px, 6vw, 72px); flex-wrap: wrap; align-items: baseline; margin: 28px 0 8px; }
.stat-row .stat-label { color: var(--color-text-dim); font-weight: 700; font-size: 0.95rem; margin-top: 6px; }

/* --- Dunkle Tannennacht-Bühnen ----------------------------------------------- */
.section-dark { background: var(--tanne); color: var(--tanne-text); }
.section-dark p { color: var(--tanne-text-dim); }
.section-dark .eyebrow { color: var(--color-accent); }

/* Hero-Overlay: Verlauf Waldnacht (nur Hero & Nacht-Sections, lt. Kit) */
.hero-copy {
  background: linear-gradient(transparent, rgba(20, 52, 43, 0.85) 80%);
  color: var(--tanne-text);
}
.hero-copy p { color: var(--tanne-text-dim); }
.hero-copy .eyebrow { color: var(--color-accent); }

/* --- Karten -------------------------------------------------------------------- */
.card { border: 1px solid var(--line); box-shadow: none; transition: transform 0.25s ease, box-shadow 0.25s ease; background: var(--color-surface); }
.card:hover { transform: translateY(-4px); box-shadow: 0 6px 24px rgba(20, 52, 43, 0.08); }

/* --- Buttons nach Kit ------------------------------------------------------------ */
.btn {
  background: var(--color-accent); color: var(--tanne);
  height: 50px; line-height: 50px; padding: 0 26px; font-size: 16px; font-weight: 800;
}
.btn:hover { background: var(--color-accent-dark); transform: translateY(-2px); }

/* --- CTA-Bühne mit Hintergrundbild ------------------------------------------------ */
.cta-stage { overflow: hidden; padding: clamp(96px, 18vh, 180px) 0; }
.cta-stage .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.cta-stage .wrap { position: relative; z-index: 1; }

/* --- Emotion-Bühne ------------------------------------------------------------------ */
.emotion-stage { position: relative; overflow: hidden; border-radius: var(--radius); }
.emotion-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(20,52,43,0.75)); }
.emotion-caption { position: absolute; left: 0; right: 0; bottom: clamp(20px, 6vh, 56px); text-align: center; z-index: 2; }
.emotion-caption .hand { font-size: clamp(2.2rem, 5vw, 3.6rem); color: #ffd9a8; }
.emotion-caption p { color: var(--tanne-text-dim); margin: 6px 0 0; }

@media (max-width: 640px) { .stat { font-size: 2.8rem; } }

/* ============================================================
   V4 — Zickzack-Reihen, Waldnacht-Bühne, Passform-Upgrade
   ============================================================ */

/* Grundzustand für Einflug-Elemente (JS animiert; ohne JS sichtbar) */
html:not(.reduced-motion) [data-fly] { opacity: 0; visibility: hidden; }

/* --- Feature-Reihen: Bild und Text kommen von gegenüberliegenden Seiten ------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(64px, 10vh, 130px);
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.is-flipped .feature-media { order: 2; }
.feature-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(20, 52, 43, 0.14);
}
.feature-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.feature-copy { min-width: 0; }
/* (Größe/Farbe der Schrittnummer: V8-Block „Pinsel-Zahlen") */
.feature-copy h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 14px; }
.feature-copy p { font-size: clamp(1.05rem, 1.5vw, 1.22rem); }
.feature-facts {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.feature-facts li {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; color: var(--color-text); font-size: 1rem;
}
.feature-facts li::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent); flex: none;
}

/* --- Sicherheits-Bühne: Waldnacht-Verlauf mit schräger Oberkante -------------- */
.section-safety {
  background: linear-gradient(155deg, #14342b 45%, #23486a 100%);
  color: var(--tanne-text);
  margin-top: clamp(40px, 8vh, 90px);
  padding-block: clamp(90px, 15vh, 170px);
  clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.section-safety h2, .section-safety h3 { color: var(--tanne-text); }
.section-safety p { color: var(--tanne-text-dim); }
.section-safety .eyebrow { color: var(--color-accent); }
.section-safety .hl { color: #f5a44e; }
.section-safety .hl-big { color: #f5a44e; background: linear-gradient(transparent 74%, rgba(232, 137, 43, 0.35) 74%); }
.section-safety .lead {
  max-width: 60ch; font-size: clamp(1.12rem, 1.7vw, 1.35rem); margin-top: 8px;
}
/* Glut-Schimmer, wächst beim Reinscrollen */
.safety-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(680px 340px at 18% 0%, rgba(232, 137, 43, 0.26), transparent 70%),
    radial-gradient(520px 300px at 88% 90%, rgba(53, 89, 124, 0.5), transparent 70%);
}
.section-safety .cards { margin-top: clamp(34px, 5vh, 60px); }
.section-safety .card {
  background: rgba(250, 246, 239, 0.07);
  border: 1px solid rgba(250, 246, 239, 0.16);
  backdrop-filter: blur(2px);
}
.section-safety .card:hover {
  background: rgba(250, 246, 239, 0.1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
}
.section-safety .card p { color: var(--tanne-text-dim); }
.card-fact {
  display: block; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(250, 246, 239, 0.16);
  font-weight: 800; font-size: 0.95rem; color: #f5a44e; letter-spacing: 0.01em;
}

/* --- Passform-Upgrade: großes ODER, Counter, Icon-Chips, Schluss-Claim -------- */
.stat-row { align-items: center; }
.stat-or {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--color-accent);
  align-self: center; padding: 0 4px; transform: translateY(-6px);
}
.stat-block { text-align: left; }
.chip-fit {
  gap: 12px; padding: 12px 24px; font-size: 1.05rem;
  border-width: 2px; background: var(--color-surface);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.chip-fit:hover {
  transform: translateY(-3px); border-color: var(--color-accent);
  box-shadow: 0 8px 22px rgba(20, 52, 43, 0.1);
}
.chip-ico {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(95, 125, 92, 0.12); color: var(--moos);
}
.claim-line {
  margin-top: clamp(36px, 6vh, 64px);
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.2;
  color: var(--color-text); max-width: 22ch;
}
.claim-line .hl-big { display: inline-block; }

@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row.is-flipped .feature-media { order: 0; }
  .feature-media img { aspect-ratio: 4 / 3; }
  .section-safety { clip-path: none; }
  .claim-line { max-width: none; }
}

/* ============================================================
   V5 — Claim-Bühne, Denim-Flow, getupfter Marken-Hintergrund
   ============================================================ */

/* --- Getupftes Grün: ruhige Aquarell-Flächen hinter der ganzen Seite ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(620px 420px at 10% 14%, rgba(95, 125, 92, 0.10), transparent 66%),
    radial-gradient(520px 380px at 92% 34%, rgba(95, 125, 92, 0.08), transparent 66%),
    radial-gradient(700px 480px at 26% 74%, rgba(95, 125, 92, 0.07), transparent 66%),
    radial-gradient(460px 340px at 82% 88%, rgba(232, 137, 43, 0.05), transparent 66%);
}
/* Feine Tupfen-Textur (Aquarell-Anmutung, sehr dezent) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(95, 125, 92, 0.11) 1.1px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 78%);
}

/* --- Wort-Explosion: Grundzustand (JS macht sichtbar) ------------------------- */
html:not(.reduced-motion) [data-words] { opacity: 0; visibility: hidden; }
[data-words] .word { display: inline-block; will-change: transform, opacity, filter; }

/* --- Claim-Bühne: großer Satz über ruhigem Bild ------------------------------- */
.claim-stage {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid;
  align-items: center;
  padding: clamp(70px, 12vh, 130px) 0;
  overflow: hidden;
  border-top: 0 !important;
}
.claim-stage .claim-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.claim-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(250, 246, 239, 0.94) 0%, rgba(250, 246, 239, 0.86) 42%, rgba(250, 246, 239, 0.34) 78%, rgba(250, 246, 239, 0.12) 100%);
}
.claim-stage .wrap { position: relative; z-index: 2; }
.claim-big {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(2.3rem, 6.4vw, 5.4rem); line-height: 1.06;
  letter-spacing: -0.015em; color: var(--tanne);
  max-width: 15ch; margin: 0;
}
.claim-big .hl-big { background: linear-gradient(transparent 72%, rgba(232, 137, 43, 0.38) 72%); }
.claim-sub {
  margin-top: clamp(18px, 3vh, 30px); max-width: 46ch;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--color-text);
}

/* --- Denim-Flow-Bühne: Material & Reinigung ---------------------------------- */
.flow-stage {
  position: relative; overflow: hidden;
  height: 100vh; padding: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #35597c 0%, #2a4766 55%, #1d3550 100%);
  color: var(--tanne-text);
  border-top: 0 !important;
}
.flow-media { position: absolute; inset: 0; z-index: 0; }
/* Der .seq-Wrapper braucht explizit volle Höhe, sonst richtet sich der Canvas
   nach seinem Seitenverhältnis und lässt auf Hochformat-Screens unten Leere. */
.flow-media .seq { width: 100%; height: 100%; border-radius: 0; }
.flow-media img, .flow-media canvas {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  will-change: transform;
}
.flow-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, rgba(20, 40, 62, 0.15) 0%, rgba(20, 40, 62, 0.72) 78%);
}
.flow-copy {
  position: relative; z-index: 2; text-align: center;
  width: min(92vw, 900px); display: grid; place-items: center;
}
.flow-line {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(26px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
  will-change: transform, opacity;
}
.flow-line.is-on { opacity: 1; transform: none; }
.flow-line h2 {
  font-size: clamp(2.1rem, 5.6vw, 4.2rem); color: var(--tanne-text); margin: 0;
}
.flow-line .hl-big { color: #ffc98a; background: none; }
.flow-line p {
  margin: 14px auto 0; max-width: 34ch; color: #cfdcea;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}
.flow-hint {
  position: absolute; bottom: clamp(18px, 4vh, 38px); left: 0; right: 0; z-index: 2;
  text-align: center; color: rgba(250, 246, 239, 0.55);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
/* Reduced-Motion / Editor: Zeilen untereinander statt gestapelt */
html.reduced-motion .flow-stage { height: auto; padding: clamp(70px, 12vh, 130px) 0; }
html.reduced-motion .flow-copy { display: block; }
html.reduced-motion .flow-line {
  position: static; margin-bottom: 40px;
  opacity: 1; transform: none; transition: none;   /* kein Animations-Zwischenzustand */
}

@media (max-width: 680px) {
  .claim-big { max-width: none; }
  .flow-line p { max-width: 90%; }
}

/* ============================================================
   V7 — CTA-Button, Karten-Politur, Chips, Aquarell-Kleckse
   ============================================================ */

/* --- Zentrierte Blöcke ------------------------------------------------------- */
.is-centered { text-align: center; }
.is-centered p:not(.btn-row):not(.cta-legal):not(.cta-trust) { margin-left: auto; margin-right: auto; }
.is-centered .claim-big, .is-centered .lead { margin-left: auto; margin-right: auto; }
.btn-row { display: flex; justify-content: center; margin: clamp(24px, 4vh, 40px) 0 0; }

/* --- CTA-Button: groß, warm, mit Licht-Sweep --------------------------------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #f0993c 0%, #e8892b 55%, #d97a1e 100%);
  color: #14342b; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(232, 137, 43, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.22s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.22s ease, background 0.22s ease;
}
.btn-xl {
  height: auto; line-height: 1.2;
  padding: clamp(17px, 2vw, 21px) clamp(30px, 3.4vw, 44px);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem); font-weight: 800; letter-spacing: 0.01em;
}
.btn-label { position: relative; z-index: 2; }
.btn-arrow { position: relative; z-index: 2; flex: none; transition: transform 0.28s cubic-bezier(.2,.8,.3,1.2); }
/* Licht-Sweep, läuft über den Button */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 46%, transparent 60%);
  transform: translateX(-120%);
}
html:not(.reduced-motion) .btn-xl::before { animation: btnSweep 4.4s ease-in-out 1.2s infinite; }
.btn:hover {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, #f5a44e 0%, #e8892b 55%, #c96f1a 100%);
  box-shadow: 0 16px 38px rgba(232, 137, 43, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn:hover .btn-arrow { transform: translateX(5px); }
.btn:active { transform: translateY(-1px) scale(0.99); }
.btn:focus-visible { outline: 3px solid #14342b; outline-offset: 3px; }
@keyframes btnSweep {
  0% { transform: translateX(-120%); }
  38%, 100% { transform: translateX(120%); }
}
/* Weicher Puls-Ring, zieht den Blick auf den Haupt-CTA */
html:not(.reduced-motion) .btn-xl::after {
  content: ""; position: absolute; inset: -3px; z-index: 0; border-radius: 999px;
  border: 2px solid rgba(232, 137, 43, 0.55);
  animation: btnPulse 2.8s ease-out infinite;
}
@keyframes btnPulse {
  0% { transform: scale(1); opacity: 0.75; }
  70%, 100% { transform: scale(1.14); opacity: 0; }
}
.section-dark .btn:focus-visible, .flow-stage .btn:focus-visible { outline-color: #faf6ef; }

/* --- Sicherheits-Karten: Nummern-Badge, Glut-Kante, Fakt-Zeile --------------- */
.section-safety .card {
  position: relative; overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.8,.3,1), box-shadow 0.35s ease,
              background 0.35s ease, border-color 0.35s ease;
}
.section-safety .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #e8892b, transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1);
}
.section-safety .card:hover {
  transform: translateY(-8px);
  border-color: rgba(245, 164, 78, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 164, 78, 0.18);
}
.section-safety .card:hover::before { transform: scaleX(1); }
.section-safety .card img {
  transition: transform 0.6s cubic-bezier(.2,.8,.3,1), filter 0.4s ease;
}
.section-safety .card:hover img { transform: scale(1.06); filter: brightness(1.06); }
.card-badge {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  color: #f5a44e; letter-spacing: 0.06em;
  background: rgba(20, 52, 43, 0.55); backdrop-filter: blur(3px);
  border: 1px solid rgba(245, 164, 78, 0.35);
  border-radius: 999px; padding: 5px 12px;
}
/* Fakt-Zeile: Glut-Punkt + Unterstrich, der beim Hover durchläuft */
.card-fact {
  position: relative; display: inline-flex; align-items: flex-start; gap: 9px;
  border-top: 0; margin-top: 16px; padding: 12px 0 0;
  text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.82rem;
}
.card-fact::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  margin-top: 0.42em;   /* auf die erste Textzeile ausrichten, auch bei Umbruch */
  background: #f5a44e; box-shadow: 0 0 0 0 rgba(245, 164, 78, 0.6);
}
html:not(.reduced-motion) .card:hover .card-fact::before { animation: factDot 1.6s ease-out infinite; }
@keyframes factDot {
  0% { box-shadow: 0 0 0 0 rgba(245, 164, 78, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(245, 164, 78, 0); }
}
.card-fact::after {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, #f5a44e, transparent);
  transform: scaleX(0.22); transform-origin: left;
  transition: transform 0.55s cubic-bezier(.2,.8,.3,1);
}
.card:hover .card-fact::after { transform: scaleX(1); }

/* --- Chips: Hover-Lift mit Glut-Rand ---------------------------------------- */
html:not(.reduced-motion) [data-stagger] > * { opacity: 0; visibility: hidden; }
html.reduced-motion [data-stagger] > *, [data-stagger] > .is-visible { opacity: 1; visibility: visible; }
.chip-fit { position: relative; overflow: hidden; }
.chip-fit .chip-ico { transition: transform 0.35s cubic-bezier(.2,.8,.3,1.4), background 0.3s ease, color 0.3s ease; }
.chip-fit:hover .chip-ico { transform: rotate(-8deg) scale(1.12); background: rgba(232, 137, 43, 0.16); color: var(--color-accent); }

/* --- Flow-Bühne: Text deutlich lesbarer ------------------------------------- */
.flow-stage::after {
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(16, 32, 50, 0.28) 0%, rgba(14, 28, 45, 0.86) 76%),
    linear-gradient(180deg, rgba(14, 28, 45, 0.5) 0%, transparent 26%, transparent 72%, rgba(14, 28, 45, 0.62) 100%);
}
.flow-line h2 {
  text-shadow: 0 4px 26px rgba(6, 16, 28, 0.85), 0 1px 3px rgba(6, 16, 28, 0.6);
}
.flow-line p {
  color: #e8f0f8; font-weight: 600;
  text-shadow: 0 2px 14px rgba(6, 16, 28, 0.9), 0 1px 2px rgba(6, 16, 28, 0.7);
  background: rgba(12, 26, 42, 0.42);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 14px 22px;
  max-width: 40ch;
}
.flow-line .hl-big { text-shadow: 0 4px 24px rgba(6, 16, 28, 0.7); }
.flow-line { transition: opacity 0.75s cubic-bezier(.2,.7,.3,1), transform 0.75s cubic-bezier(.2,.7,.3,1), filter 0.75s ease; }
html:not(.reduced-motion) .flow-line { transform: translateY(34px) scale(0.965); filter: blur(4px); }
html:not(.reduced-motion) .flow-line.is-on { transform: none; filter: blur(0); }

/* ============================================================
   V8 — echte Aquarell-Grafiken, Pinsel-Zahlen, CTA-Zentrierung
   ============================================================ */

/* --- Aquarell-Ecken aus der Markenvorlage ------------------------------------
   Die PNGs haben weißen Grund; multiply blendet das Weiß auf dem Papier weg
   und erhält die lasierenden Aquarell-Farben. */
/* PNGs sind freigestellt (echter Alphakanal) — kein Blend-Trick nötig,
   funktioniert dadurch auch innerhalb GSAP-Kontexten und auf jedem Grund. */
.aquarell {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(170px, 23vw, 360px);
  opacity: 0.95;
  user-select: none;
}
.aquarell img { width: 100%; height: auto; display: block; }
.aq-tl { top: -10px; left: -14px; }
.aq-tr { top: -10px; right: -14px; transform: scaleX(-1); }
.aq-bl { bottom: -10px; left: -14px; transform: scaleY(-1); }
.aq-br { bottom: -10px; right: -14px; transform: scale(-1, -1); }
/* frei platzierte Tupfer in hohen Sektionen */
.aq-mid-l { top: 34%; left: -20px; transform: rotate(-6deg); width: clamp(140px, 17vw, 260px); opacity: 0.8; }
.aq-mid-r { top: 62%; right: -20px; transform: scaleX(-1) rotate(6deg); width: clamp(140px, 17vw, 260px); opacity: 0.8; }

/* --- Pinsel-Zahlen: Caveat auf Aquarell-Klecks ------------------------------- */
.step-num {
  position: relative; display: inline-block;
  font-family: var(--font-hand); font-weight: 600;
  font-size: clamp(3.4rem, 6vw, 4.6rem); line-height: 0.9;
  color: #4c6b4a; opacity: 1;
  letter-spacing: 0.01em; margin-bottom: 4px;
  padding: 6px 18px 4px 4px;
}
/* (kein Aquarell-Klecks hinter der Zahl — die Pflanzen darin wirkten unruhig) */
.feature-copy .step-num { margin-bottom: 10px; }

/* --- CTA wirklich zentrieren -------------------------------------------------
   .btn-row ist ein <p> und erbte max-width: 62ch → saß dadurch links. */
.btn-row { max-width: none !important; margin-left: auto; margin-right: auto; width: 100%; }
.cta-stage .wrap > * { margin-left: auto; margin-right: auto; }

/* ============================================================
   Produktvideo-Bühne (YouTube-Facade)
   ============================================================ */
.video-stage { padding-block: clamp(72px, 13vh, 130px); }
.video-stage .eyebrow { margin-bottom: 6px; }
.video-stage > .wrap > p { max-width: 54ch; }

.video-frame {
  position: relative; margin: clamp(30px, 5vh, 52px) auto 0;
  width: min(100%, 980px);
  border-radius: 24px;                 /* heroMedia-Radius aus dem Markenkit */
  padding: clamp(10px, 1.4vw, 16px);
  background: linear-gradient(150deg, #14342b 0%, #1d4238 55%, #23486a 100%);
  box-shadow: 0 26px 60px rgba(20, 52, 43, 0.26);
}
.video-facade {
  position: relative; display: block; overflow: hidden;
  border-radius: 16px; aspect-ratio: 16 / 9; cursor: pointer;
  background: #0e1c2c;
}
.video-facade img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(.2,.8,.3,1), filter 0.4s ease;
}
.video-facade::after {           /* sanfte Abdunklung, damit der Play-Knopf trägt */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(10, 22, 34, 0.12), rgba(10, 22, 34, 0.46));
  transition: opacity 0.4s ease;
}
.video-facade:hover img { transform: scale(1.035); filter: brightness(1.05); }
.video-facade:hover::after { opacity: 0.75; }
.video-facade:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }

.video-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(74px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #f0993c, #e8892b 60%, #d97a1e);
  color: #14342b;
  box-shadow: 0 12px 34px rgba(232, 137, 43, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.28s cubic-bezier(.2,.8,.3,1.3), box-shadow 0.28s ease;
}
.video-play svg { margin-left: 5px; }   /* optischer Ausgleich des Dreiecks */
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.09); }
/* Puls-Ring wie beim CTA — macht klar: hier kann man klicken */
html:not(.reduced-motion) .video-play::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(232, 137, 43, 0.55);
  animation: btnPulse 2.8s ease-out infinite;
}
.video-badge {
  position: absolute; z-index: 2; right: 14px; bottom: 14px;
  background: rgba(20, 52, 43, 0.72); color: var(--tanne-text);
  border: 1px solid rgba(250, 246, 239, 0.2); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 6px 14px;
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.05em;
}
/* Sobald der Player läuft: Overlay weg, iframe füllt den Rahmen */
.video-facade.is-playing { cursor: default; }
.video-facade.is-playing::after { display: none; }
.video-facade iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 860px) {
  .video-stage { padding-block: clamp(52px, 9vh, 90px); }
  .video-frame { padding: 8px; border-radius: 18px; }
  .video-facade { border-radius: 12px; }
  .video-play { width: 64px; }
  .video-badge { right: 10px; bottom: 10px; font-size: 0.74rem; padding: 5px 11px; }
}

/* --- Aquarell-Kleckse: warme Glut- und Moos-Tupfer im Papier ----------------- */
.blob {
  position: absolute; z-index: 0; pointer-events: none;
  filter: blur(38px);
  border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%;   /* organisch statt Kreis */
}
/* Dezenter Farbhauch im Papier — die echten Aquarelle sind die Hauptdarsteller */
.blob-glut {
  background:
    radial-gradient(circle at 38% 42%, rgba(232, 137, 43, 0.16), rgba(232, 137, 43, 0.06) 46%, rgba(232, 137, 43, 0) 72%);
}
.blob-moos {
  background:
    radial-gradient(circle at 42% 40%, rgba(95, 125, 92, 0.17), rgba(95, 125, 92, 0.06) 46%, rgba(95, 125, 92, 0) 72%);
}
.blob-a { width: 46vw; max-width: 640px; aspect-ratio: 1.25; left: -8vw; top: -4vh; }
.blob-b { width: 40vw; max-width: 540px; aspect-ratio: 1.1; right: -6vw; bottom: -6vh;
          border-radius: 58% 42% 45% 55% / 45% 55% 45% 55%; }
.blob-c { width: 32vw; max-width: 450px; aspect-ratio: 1.4; right: 6vw; top: 2vh;
          border-radius: 52% 48% 40% 60% / 58% 42% 58% 42%; }
.blob-d { width: 28vw; max-width: 380px; aspect-ratio: 1.15; left: 4vw; bottom: -4vh;
          border-radius: 44% 56% 62% 38% / 48% 58% 42% 52%; }
/* Mittige Positionen — wichtig in hohen Sektionen, sonst bleibt die Fläche dazwischen leer */
.blob-m1 { width: 36vw; max-width: 500px; aspect-ratio: 1.2; left: -7vw; top: 24%;
           border-radius: 55% 45% 48% 52% / 42% 58% 42% 58%; }
.blob-m2 { width: 33vw; max-width: 460px; aspect-ratio: 1.3; right: -6vw; top: 48%;
           border-radius: 42% 58% 55% 45% / 55% 42% 58% 45%; }
.blob-m3 { width: 30vw; max-width: 420px; aspect-ratio: 1.1; left: 6vw; top: 72%;
           border-radius: 60% 40% 42% 58% / 48% 52% 48% 52%; }

/* --- Aquarell-Ecken mit Blattwerk (Anlehnung ans Marken-Prompt-Kit) ---------- */
.leaf-corner {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(150px, 20vw, 300px); opacity: 0.5;
}
.leaf-corner svg { width: 100%; height: auto; display: block; }
.leaf-tl { top: 0; left: 0; }
.leaf-tr { top: 0; right: 0; transform: scaleX(-1); }
.leaf-br { bottom: 0; right: 0; transform: scale(-1, -1); }
section { position: relative; }
/* Deko-Sektionen clippen, sonst schieben überstehende Kleckse/Aquarelle die Seite breit */
section:has(> .blob), section:has(> .aquarell) { overflow: hidden; }
section > .wrap, section > .feature-row { position: relative; z-index: 1; }

/* --- CTA-Feinschliff --------------------------------------------------------- */
.cta-trust {
  margin: 22px auto 0; max-width: none; font-size: 0.86rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(250, 246, 239, 0.62);
}
.cta-legal { margin: 52px auto 0; max-width: none; font-size: 0.85rem; opacity: 0.6; }
.is-centered .hand { display: block; text-align: center; }
.cta-stage .hand { display: block; margin-bottom: 6px; }

@media (max-width: 680px) {
  .btn-xl { width: 100%; justify-content: center; }
  .flow-line p { padding: 12px 16px; }
}

/* ============================================================
   Mobile: Videos, Aquarelle, Zahlen, CTA, Abstände
   ============================================================ */
@media (max-width: 860px) {
  /* --- Scroll-Sequenzen: Hochformat-Viewport, Bild darf nicht abschneiden --- */
  .seq-full, .seq-full canvas, .seq-full img { height: 100svh; }
  .hero { min-height: 100svh; }
  .seq canvas, .seq img { object-fit: cover; object-position: center; }

  /* Hero-Text sitzt tiefer, damit das Produkt im Bild sichtbar bleibt */
  .hero-copy { padding-bottom: clamp(28px, 8vh, 64px); }
  .hero-copy h1 { font-size: clamp(1.9rem, 8.2vw, 2.5rem); line-height: 1.12; }
  .hero-copy p { font-size: 1rem; }

  /* --- Flow-Bühne: Textkasten muss in den Viewport passen --- */
  .flow-stage { height: 100svh; }
  .flow-copy { width: min(94vw, 560px); }
  .flow-line h2 { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
  .flow-line p { font-size: 0.98rem; max-width: 100%; }
  .flow-hint { font-size: 0.7rem; }

  /* --- Aquarelle kleiner und weiter außen, damit sie Text nie überlagern --- */
  .aquarell { width: clamp(110px, 34vw, 190px); opacity: 0.75; }
  .aq-mid-l, .aq-mid-r { width: clamp(96px, 28vw, 150px); opacity: 0.6; }
  .aq-mid-l { top: 28%; }
  .aq-mid-r { top: 66%; }

  /* --- Pinsel-Zahlen: kompakter, Klecks mitskalieren --- */
  .step-num { font-size: clamp(2.6rem, 11vw, 3.4rem); padding: 4px 14px 2px 2px; }

  /* --- CTA: volle Breite, sauber zentriert --- */
  .btn-row { justify-content: center; }
  .cta-trust { font-size: 0.74rem; letter-spacing: 0.08em; }
  .cta-legal { margin-top: 36px; }
  .cta-stage { padding-block: clamp(64px, 12vh, 110px); }

  /* --- Sektions-Rhythmus: weniger Luft, damit nichts zerfasert --- */
  section { padding-block: clamp(48px, 9vh, 80px); }
  .feature-row { margin-bottom: clamp(44px, 8vh, 80px); gap: 22px; }
  .claim-stage { min-height: auto; padding-block: clamp(64px, 12vh, 110px); }
  .claim-big { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .claim-sub { font-size: 1rem; }
  .section-safety { padding-block: clamp(64px, 12vh, 110px); }
  .stat-row { gap: 18px 28px; }
  .card-badge { top: 12px; right: 12px; font-size: 0.85rem; padding: 4px 10px; }
}

/* Sehr schmale Geräte (iPhone SE & Co.) */
@media (max-width: 400px) {
  .claim-big, .flow-line h2 { font-size: clamp(1.65rem, 8.8vw, 2.1rem); }
  .stat { font-size: 2.4rem; }
  .chip-fit { padding: 9px 16px; font-size: 0.94rem; }
  .chip-ico { width: 34px; height: 34px; }
  .aquarell { opacity: 0.62; }
}

/* Reduced-Motion/Editor auf Mobile: Flow-Zeilen stapeln sauber */
@media (max-width: 860px) {
  html.reduced-motion .flow-stage { height: auto; padding-block: clamp(48px, 9vh, 80px); }
}

/* --- Overflow-Schutz: lange Wörter dürfen NIE die Seite verbreitern ------------ */
.cards { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.hero { grid-template-columns: minmax(0, 1fr); }
.hero > *, .wrap, .card, .story-steps .step { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 680px) {
  .hl-big { font-size: 1em; }
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .btn { height: auto; line-height: 1.35; padding: 14px 24px; white-space: normal; text-align: center; }
}

/* ============================================================
   Design-Upgrade V3: mehr Fläche füllen, größere Typo, Ornamente
   ============================================================ */

/* Größere Grundtypo */
body { font-size: 17px; }
p { font-size: clamp(1.06rem, 1.5vw, 1.3rem); max-width: 62ch; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.story-steps .step h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.card h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.card p { font-size: 1.02rem; }

/* Birkenpapier lebendig statt flacher Weißfläche */
body {
  background:
    radial-gradient(1100px 500px at 85% -5%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(900px 480px at -10% 30%, rgba(95,125,92,0.06), transparent 60%),
    var(--color-bg);
}
section + section { border-top: 1px solid var(--line); }
section.hero, section.section-dark, section[data-hscroll] { border-top: 0; }

/* Marker-Unterstreichung für Schlüsselwörter (Glut, Textmarker-Look) */
.hl-big { background: linear-gradient(transparent 74%, rgba(232, 137, 43, 0.32) 74%); padding: 0 0.06em; }

/* Nummerierte Story-Steps mit Glut-Aktivmarker */
.story-steps .step { border-left: 3px solid var(--line); padding-left: clamp(18px, 2.5vw, 32px); transition: border-color 0.4s, opacity 0.4s; }
.story-steps .step.is-active { border-left-color: var(--color-accent); }
/* Grundform der Schrittnummer — Pinsel-Optik siehe V8-Block weiter unten */
.step-num { display: block; }

/* Ein-Linien-Ornamente (Kit-Stil GFX-04): Moos, dezent, hinter dem Inhalt */
.deko { position: absolute; z-index: 0; color: var(--moos); opacity: 0.16; pointer-events: none; }
.deko svg { display: block; }
section > .wrap { position: relative; z-index: 1; }
.deko-br { right: clamp(8px, 4vw, 60px); bottom: 24px; }
.deko-tl { left: clamp(8px, 3vw, 48px); top: 32px; }

/* Bett-Typen-Chips (Passform) */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 4px; }
.chip-fit {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--moos); color: var(--color-text);
  border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 1rem;
  background: var(--color-surface);
}
.chip-fit svg { color: var(--moos); }

/* Story-Visual als Foto */
.story-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* Tannen-Reihe als Abschluss vor der CTA-Bühne */
.divider-tannen { display: flex; justify-content: center; gap: 28px; padding: 8px 0 40px; color: var(--moos); opacity: 0.4; }