/* assets/css/story.css — 1:1 Mockup-CSS aus references/traumbetten-gruenderstory-jenva.html (kein Filter) */

:root{
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-display:'Fraunces',Georgia,serif;
  --color-bg:#f5f6f8; --color-bg-alt:#ffffff; --color-surface:#ffffff; --color-surface-2:#eef0f3;
  --color-text:#0b0d12; --color-text-soft:#3d4350; --color-text-muted:#6b7280;
  --color-border:#e1e4ea; --color-border-soft:#eef0f3;
  --color-accent:#1e5baa; --color-accent-hover:#184e8b; --color-accent-deep:#133d6c;
  --color-accent-soft:#e8efff; --color-accent-on-dark:#7aa2ff;
  --color-success:#15803d; --color-success-soft:#dcfce7;
  --color-sale:#c0392b; --color-star:#fbbf24;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem;
  --text-xs:.8125rem; --text-sm:.9375rem; --text-base:1rem; --text-md:1.0625rem;
  --text-lg:clamp(1.125rem,1rem + .4vw,1.25rem);
  --text-xl:clamp(1.375rem,1.2rem + .8vw,1.625rem);
  --text-2xl:clamp(1.5rem,1.3rem + 1vw,1.875rem);
  --text-3xl:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);
  --text-hero:clamp(2.25rem,1.4rem + 3.5vw,4rem);
  --lh-tight:1.15; --lh-base:1.6;
  --container:1400px; --container-prose:720px;
  --radius-sm:6px; --radius:10px; --radius-lg:16px; --header-h:76px;
  --shadow-1:0 1px 2px rgb(11 13 18 / .04),0 2px 6px rgb(11 13 18 / .04);
  --shadow:0 4px 12px rgb(11 13 18 / .07),0 1px 3px rgb(11 13 18 / .05);
  --shadow-3:0 14px 36px rgb(11 13 18 / .12);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;max-width:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--lh-base);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;max-width:100%}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:-.015em;margin:0;overflow-wrap:break-word;word-wrap:break-word}
p,li,span,dd,dt{overflow-wrap:break-word;word-wrap:break-word}
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere;word-break:break-word}
p{margin:0} ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-text);color:#fff;padding:var(--space-3) var(--space-4);z-index:999;border-radius:0 0 var(--radius) 0}
.skip-link:focus-visible{left:0}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
@media (min-width:768px){.container{padding-inline:var(--space-8)}}
main,section,header,footer{max-width:100%}
.container > *{max-width:100%}
.eyebrow{display:inline-block;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-hover);margin-bottom:var(--space-3)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);font-weight:600;font-size:var(--text-md);border-radius:var(--radius);transition:all .2s var(--ease);white-space:nowrap;min-height:48px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--color-accent);color:#fff}
.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-surface-2);border-color:var(--color-text)}
.btn-lg{padding:var(--space-5) var(--space-8);font-size:var(--text-lg);min-height:56px}
.btn-block{width:100%}

/* TOPBAR / HEADER / MOBILE-NAV — identisch */
.child-topbar{background:var(--color-text);color:#dfe2e8;font-size:var(--text-xs)}
.child-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:40px;flex-wrap:wrap}
.child-topbar-items{display:flex;gap:var(--space-6);flex-wrap:wrap;align-items:center}
.child-topbar-item{display:inline-flex;align-items:center;gap:var(--space-2)}
.child-topbar-item svg{width:14px;height:14px;color:var(--color-accent-on-dark);flex-shrink:0}
.child-topbar-track{display:contents}
.child-topbar-track[aria-hidden="true"]{display:none}
.child-topbar-rating{display:inline-flex;align-items:center;gap:var(--space-2)}
.child-topbar-rating strong{color:#fff;font-weight:600}
.child-topbar-rating .stars{color:var(--color-star);letter-spacing:1px}
@media (max-width:720px){
  .child-topbar-rating{display:none}
  .child-topbar-items{display:flex;flex-wrap:nowrap;overflow:hidden;width:100%;gap:0}
  .child-topbar-track{display:flex;flex-shrink:0;align-items:center;gap:var(--space-6);padding-right:var(--space-6);animation:tbb-topbar-marquee 20s linear infinite}
  .child-topbar-track[aria-hidden="true"]{display:flex}
  @keyframes tbb-topbar-marquee{from{transform:translateX(0)} to{transform:translateX(-100%)}}
}
@media (prefers-reduced-motion:reduce){.child-topbar-track{animation:none !important}}

.site-header{position:sticky;top:0;z-index:50;background:var(--color-surface);border-bottom:1px solid var(--color-border);transition:box-shadow .2s var(--ease)}
.site-header.is-scrolled{box-shadow:var(--shadow)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-6);min-height:var(--header-h)}
@media (min-width:1024px){.header-inner{min-height:88px;gap:var(--space-10)}}
.logo{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--color-text);letter-spacing:-.02em}
.logo-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--color-accent);color:#fff;flex-shrink:0}
.logo-mark svg{width:22px;height:22px}
.logo-text{line-height:1}
.logo-text small{display:block;font-family:var(--font-sans);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-top:2px}

.nav-primary{display:none}
@media (min-width:1350px){.nav-primary{display:flex;gap:var(--space-8);justify-self:center}}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:500;font-size:var(--text-md);padding:var(--space-3) 0;color:var(--color-text);border-bottom:2px solid transparent;transition:color .15s ease}
.nav-link:hover{color:var(--color-accent-hover)}
.nav-link svg{width:14px;height:14px}
.nav-link.is-sale{color:var(--color-sale)}

.header-actions{display:flex;align-items:center;gap:var(--space-1)}
@media (min-width:480px){.header-actions{gap:var(--space-2)}}
.header-icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius);color:var(--color-text);transition:background .15s ease}
.header-icon-btn:hover{background:var(--color-surface-2)}
.header-icon-btn svg{width:20px;height:20px}
.header-icon-btn.is-desktop-only{display:none}
@media (min-width:768px){.header-icon-btn.is-desktop-only{display:inline-grid}}
.header-cart-count{position:absolute;top:5px;right:5px;min-width:18px;height:18px;padding:0 5px;background:var(--color-accent);color:#fff;font-size:11px;font-weight:600;border-radius:9px;display:grid;place-items:center;line-height:1}
.header-phone{display:none;align-items:center;gap:var(--space-2);font-weight:600;color:var(--color-accent-hover);padding:var(--space-2) var(--space-3);border-radius:var(--radius);font-size:var(--text-sm)}
.header-phone:hover{background:var(--color-accent-soft)}
.header-phone svg{width:16px;height:16px}
@media (min-width:1350px){.header-phone{display:inline-flex}}
.nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius)}
.nav-toggle:hover{background:var(--color-surface-2)}
.nav-toggle svg{width:24px;height:24px}
@media (min-width:1350px){.nav-toggle{display:none}}

.mobile-nav-backdrop{position:fixed;inset:0;background:rgb(11 13 18 / .5);z-index:99;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.mobile-nav-backdrop.is-visible{opacity:1;visibility:visible}
.mobile-nav-panel{position:fixed;inset:0 0 0 auto;width:min(380px,100%);background:var(--color-surface);z-index:100;transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-3)}
.mobile-nav-panel.is-open{transform:translateX(0)}
.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5);border-bottom:1px solid var(--color-border)}
.mobile-nav-body{padding:var(--space-5);overflow-y:auto;flex:1}
.mobile-nav-group{margin-bottom:var(--space-6)}
.mobile-nav-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-3)}
.mobile-nav-link{display:block;padding:var(--space-3) 0;font-size:var(--text-md);border-bottom:1px solid var(--color-border-soft)}
.mobile-nav-link:last-child{border:0}

/* BREADCRUMB */
.child-breadcrumb{background:var(--color-bg-alt);border-bottom:1px solid var(--color-border-soft);padding-block:var(--space-3);font-size:var(--text-xs)}
.child-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);color:var(--color-text-muted)}
.child-breadcrumb-list a{color:var(--color-text-muted);transition:color .15s ease}
.child-breadcrumb-list a:hover{color:var(--color-accent-hover)}
.child-breadcrumb-sep{color:var(--color-text-muted);opacity:.5}
.child-breadcrumb-current{color:var(--color-text);font-weight:500}

/* ============================================================
   CUSTOM: STORY-HERO — typografisch stark, Pull-Quote als H1
   ============================================================ */
.child-story-hero{
  padding-block: var(--space-12) var(--space-10);
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px){
  .child-story-hero{ padding-block: var(--space-16) var(--space-12) }
}
.child-story-hero-inner{
  max-width: 900px;
  position: relative;
  z-index: 1;
}
.child-story-hero-eyebrow{
  color: var(--color-accent-hover);
}
.child-story-hero-headline{
  font-size: var(--text-hero);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-bottom: var(--space-5);
  max-width: 18ch;
}
.child-story-hero-headline em{
  font-style: italic;
  color: var(--color-accent-hover);
  font-weight: 500;
}
.child-story-hero-lede{
  font-size: var(--text-lg);
  color: var(--color-text-soft);
  max-width: 60ch;
  line-height: 1.55;
}
.child-story-hero-meta{
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.child-story-hero-meta-item{
  display: inline-flex; align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-soft);
}
.child-story-hero-meta-item svg{
  width: 18px; height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.child-story-hero-meta-item strong{
  color: var(--color-text);
  font-weight: 600;
}
/* Dekoratives Hintergrund-Element */
.child-story-hero::before{
  content: "";
  position: absolute;
  top: -10%; right: -15%;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   CUSTOM: STORY-CHAPTER — narrative Blöcke
   ============================================================ */
.child-story-chapter{
  padding-block: var(--space-12);
}
.child-story-chapter.has-bg{
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-border-soft);
}
.child-story-chapter-inner{
  max-width: var(--container-prose);
  margin-inline: auto;
}
.child-story-chapter-year{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: .2em;
  color: var(--color-accent-hover);
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-soft);
  border-radius: 999px;
  margin-bottom: var(--space-4);
}
.child-story-chapter-title{
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
  letter-spacing: -.02em;
  max-width: 22ch;
}
.child-story-chapter-text p{
  font-size: var(--text-md);
  color: var(--color-text-soft);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.child-story-chapter-text p:last-child{ margin-bottom: 0 }
.child-story-chapter-text strong{
  color: var(--color-text);
  font-weight: 600;
}
.child-story-chapter-text em{
  font-style: italic;
  color: var(--color-text);
}

/* Inline-Quote in Kapiteln */
.child-story-inline-quote{
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.5;
}
.child-story-inline-quote-attr{
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ============================================================
   CUSTOM: STORY-VIDEO — Holger-Video-Modul
   Editorial Frame, Play-Overlay, ruhig und einladend
   ============================================================ */
.child-story-video{
  padding-block: clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgb(37 99 235 / .04) 0%, transparent 60%),
    var(--color-bg);
}
.child-story-video-inner{
  max-width: 960px;
  margin-inline: auto;
}
.child-story-video-header{
  text-align: center;
  margin-bottom: var(--space-8);
}
.child-story-video-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-hover);
}
.child-story-video-eyebrow::before,
.child-story-video-eyebrow::after{
  content: "";
  width: 24px; height: 1px;
  background: var(--color-accent);
}
.child-story-video-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-3);
}
.child-story-video-lede{
  color: var(--color-text-soft);
  font-size: var(--text-md);
  max-width: 56ch;
  margin-inline: auto;
  line-height: 1.6;
}
.child-story-video-frame{
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgb(37 99 235 / .15) 0%, transparent 60%),
    linear-gradient(135deg, var(--color-accent-deep) 0%, #0f1f4f 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 40px rgb(30 58 138 / .25);
  border: 1px solid rgb(122 162 255 / .15);
}
.child-story-video-poster{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: .85;
  transition: opacity .3s var(--ease);
}
.child-story-video-frame:hover .child-story-video-poster{
  opacity: 1;
}
.child-story-video-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.child-story-video-play{
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgb(255 255 255 / .95);
  display: grid; place-items: center;
  box-shadow: 0 8px 32px rgb(0 0 0 / .3), 0 0 0 0 rgb(255 255 255 / .4);
  transition: all .25s var(--ease);
  position: relative;
}
.child-story-video-play::before{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .25);
  animation: videoPulseRing 2.4s ease-out infinite;
}
@keyframes videoPulseRing{
  0%   { transform: scale(.95); opacity: .8 }
  100% { transform: scale(1.35); opacity: 0 }
}
.child-story-video-frame:hover .child-story-video-play{
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgb(0 0 0 / .4);
}
.child-story-video-play svg{
  width: 28px; height: 28px;
  color: var(--color-accent-deep);
  margin-left: 4px; /* leicht versetzt — optisch zentriert auf Play-Dreieck */
}
.child-story-video-caption{
  position: absolute;
  bottom: var(--space-4); left: var(--space-4); right: var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgb(0 0 0 / .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius);
  color: #fff;
  pointer-events: none;
}
.child-story-video-caption-avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
  border: 2px solid rgb(255 255 255 / .25);
}
.child-story-video-caption-text{
  flex: 1;
  min-width: 0;
}
.child-story-video-caption-name{
  font-weight: 600;
  font-size: var(--text-sm);
  color: #fff;
  line-height: 1.2;
}
.child-story-video-caption-role{
  font-size: 11px;
  color: rgb(255 255 255 / .7);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}
.child-story-video-meta{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}
.child-story-video-meta-item{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}
.child-story-video-meta-item svg{
  width: 14px; height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ============================================================
   CUSTOM: STORY-TIMELINE — 4 Meilensteine
   ============================================================ */
.child-story-timeline{
  padding-block: var(--space-12);
  background: var(--color-text);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.child-story-timeline::before{
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 40%; aspect-ratio: 1;
  background: rgb(255 255 255 / .03);
  border-radius: 50%;
}
.child-story-timeline-header{
  text-align: center;
  margin-bottom: var(--space-10);
  position: relative; z-index: 1;
}
.child-story-timeline-header .eyebrow{
  color: var(--color-accent-on-dark);
}
.child-story-timeline-title{
  font-size: var(--text-3xl);
  color: #fff;
  margin-bottom: var(--space-3);
}
.child-story-timeline-lede{
  color: #c1c7d0;
  font-size: var(--text-md);
  max-width: 56ch;
  margin-inline: auto;
}
.child-story-timeline-grid{
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  position: relative; z-index: 1;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 700px){
  .child-story-timeline-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px){
  .child-story-timeline-grid{
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}
.timeline-item{
  position: relative;
  padding: var(--space-5);
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--radius);
  min-width: 0;
}
.timeline-item-year{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--color-accent-on-dark);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.timeline-item-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: #fff;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.timeline-item-text{
  font-size: var(--text-sm);
  color: #a8b0bf;
  line-height: 1.55;
}

/* ============================================================
   CUSTOM: STORY-VALUES — 3 Werte
   ============================================================ */
.child-story-values{
  padding-block: var(--space-12);
}
.child-story-values-header{
  text-align: center;
  margin-bottom: var(--space-10);
  max-width: 640px;
  margin-inline: auto;
}
.child-story-values-title{
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}
.child-story-values-lede{
  font-size: var(--text-md);
  color: var(--color-text-soft);
}
.child-story-values-grid{
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .child-story-values-grid{ grid-template-columns: repeat(3, 1fr) }
}
.value-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  transition: all .2s var(--ease);
}
.value-card:hover{
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.value-card-icon{
  width: 56px; height: 56px;
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
}
.value-card-icon svg{ width: 28px; height: 28px }
.value-card-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text);
}
.value-card-text{
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: 1.65;
}

/* ============================================================
   CUSTOM: STORY-TODAY — Heute-Block
   ============================================================ */
.child-story-today{
  padding-block: var(--space-12);
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-border-soft);
}
.child-story-today-inner{
  max-width: var(--container-prose);
  margin-inline: auto;
  text-align: center;
}
.child-story-today-title{
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
  max-width: 20ch;
  margin-inline: auto;
}
.child-story-today-text p{
  font-size: var(--text-md);
  color: var(--color-text-soft);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.child-story-today-text p:last-child{ margin-bottom: 0 }
.child-story-today-signature{
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
}
.child-story-today-signature-text{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text);
}
.child-story-today-signature-name{
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ============================================================
   CUSTOM: STORY-PULLQUOTE — Closer-Statement
   ============================================================ */
.child-story-pullquote{
  padding-block: var(--space-16);
  background: linear-gradient(135deg, var(--color-accent-deep) 0%, var(--color-accent-hover) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.child-story-pullquote::before{
  content: "";
  position: absolute;
  inset: auto auto -50% -10%;
  width: 60%; aspect-ratio: 1;
  background: rgb(255 255 255 / .05);
  border-radius: 50%;
}
.child-story-pullquote-inner{
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  position: relative; z-index: 1;
}
.child-story-pullquote-mark{
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--space-3);
}
.child-story-pullquote-text{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1.35;
  color: #fff;
  letter-spacing: -.015em;
}
.child-story-pullquote-attr{
  display: block;
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  font-weight: 600;
}

/* ============================================================
   CUSTOM: STORY-STATS — Echte Zahlen
   ============================================================ */
.child-story-stats{
  padding-block: var(--space-12);
}
.child-story-stats-grid{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 768px){
  .child-story-stats-grid{ grid-template-columns: repeat(4, 1fr); gap: var(--space-5) }
}
.stat-card{
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-width: 0;
}
.stat-number{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  color: var(--color-accent-hover);
  line-height: 1;
  margin-bottom: var(--space-2);
  letter-spacing: -.02em;
}
.stat-label{
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  font-weight: 500;
}
.stat-label strong{ display: block; color: var(--color-text); font-weight: 600; margin-bottom: 2px }

/* ============================================================
   CUSTOM: RETURN-CTA — Soft-Funnel-Rückführung
   ============================================================ */
.child-return-cta{
  padding-block: var(--space-12);
}
.child-return-cta-inner{
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: var(--container-prose);
  margin-inline: auto;
}
@media (min-width: 768px){
  .child-return-cta-inner{ padding: var(--space-12) var(--space-10) }
}
.child-return-cta-inner::before{
  content: "";
  position: absolute;
  inset: -30% auto auto -10%;
  width: 50%; aspect-ratio: 1;
  background: rgb(255 255 255 / .04);
  border-radius: 50%;
}
.child-return-cta-content{ position: relative; z-index: 1 }
.child-return-cta-eyebrow{ color: var(--color-accent-on-dark) }
.child-return-cta-title{
  font-size: var(--text-3xl);
  color: #fff;
  margin-bottom: var(--space-3);
  max-width: 22ch;
  margin-inline: auto;
}
.child-return-cta-text{
  font-size: var(--text-md);
  color: #c1c7d0;
  margin-bottom: var(--space-8);
  max-width: 50ch;
  margin-inline: auto;
}
.child-return-cta-actions{
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
}
.child-return-cta-btn{
  background: #fff;
  color: var(--color-text);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-md);
  min-height: 52px;
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: all .2s var(--ease);
}
.child-return-cta-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-3) }
.child-return-cta-btn--ghost{
  background: transparent;
  color: #fff;
  border: 1px solid rgb(255 255 255 / .3);
}
.child-return-cta-btn--ghost:hover{ background: rgb(255 255 255 / .1) }
.child-return-cta-btn svg{ width: 18px; height: 18px }

/* ============================================================
   ADVICE-BANNER (Konsistenz)
   ============================================================ */
.child-advice{background:linear-gradient(135deg,var(--color-accent-deep) 0%,var(--color-accent-hover) 100%);color:#fff;border-radius:var(--radius-lg);padding:var(--space-12) var(--space-8);text-align:center;margin-block:var(--space-8);position:relative;overflow:hidden}
@media (min-width:768px){.child-advice{padding:var(--space-16) var(--space-12)}}
.child-advice::before{content:"";position:absolute;inset:auto -10% -50% auto;width:60%;aspect-ratio:1;background:rgb(255 255 255 / .05);border-radius:50%}
.child-advice-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.child-advice-eyebrow{color:var(--color-accent-on-dark)}
.child-advice-title{font-size:var(--text-3xl);color:#fff;margin-bottom:var(--space-3)}
.child-advice-title em{font-style:italic;font-weight:500}
.child-advice-text{font-size:var(--text-md);margin-bottom:var(--space-8);color:#dfe2e8}
.child-advice-contacts{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}
.child-advice-btn{background:#fff;color:var(--color-accent-deep);border-radius:var(--radius);padding:var(--space-4) var(--space-6);font-weight:600;display:inline-flex;align-items:center;gap:var(--space-2);min-height:52px;font-size:var(--text-md);transition:all .2s var(--ease)}
.child-advice-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.child-advice-btn--ghost{background:transparent;color:#fff;border:1px solid rgb(255 255 255 / .3)}
.child-advice-btn--ghost:hover{background:rgb(255 255 255 / .1)}
.child-advice-btn svg{width:18px;height:18px}
.child-advice-hours{margin-top:var(--space-6);font-size:var(--text-xs);color:rgb(255 255 255 / .7);letter-spacing:.05em}

/* FOOTER (identisch) */
.site-footer{background:var(--color-text);color:#a8b0bf;padding-block:var(--space-16) var(--space-8)}
.footer-grid{display:grid;gap:var(--space-10);grid-template-columns:1fr}
@media (min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-brand .logo{color:#fff}
.footer-brand .logo-text small{color:#7a8290}
.footer-about{margin-top:var(--space-5);font-size:var(--text-sm);max-width:340px;line-height:1.7}
.footer-contact{margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.footer-contact-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}
.footer-contact-item svg{width:16px;height:16px;color:var(--color-accent-on-dark)}
.footer-title{color:#fff;font-size:var(--text-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-5);font-family:var(--font-sans)}
.footer-list{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-list a{font-size:var(--text-sm);color:#a8b0bf;transition:color .15s ease}
.footer-list a:hover{color:#fff}
.footer-bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid #2a2f3a;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs)}
.footer-legal{display:flex;gap:var(--space-5);flex-wrap:wrap}
.footer-payments{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.footer-payment{background:#fff;color:var(--color-text);padding:6px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.02em}

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease) }
  .reveal.is-visible{ opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important }
}

/* Lazy-YouTube: eigenes Poster + Play-Button, kein YouTube-Thumbnail */
.child-story-video-frame.is-playing{
  cursor: default;
}
.child-story-video-frame.is-playing .child-story-video-poster,
.child-story-video-frame.is-playing .child-story-video-overlay,
.child-story-video-frame.is-playing .child-story-video-caption{
  display: none;
}
.child-story-video-player{
  position: absolute;
  inset: 0;
  z-index: 2;
}
.child-story-video-player iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}