/* home.css — 1:1 Mockup-CSS (Pre-Filter Override, alle Selektoren erhalten) */

/* ============================================================
   JENVA CORE 2.0 — DESIGN TOKENS
   Token-Overrides für Traumbetten-Shop (E-Commerce, Blau-Akzent)
   ============================================================ */
:root{
  /* Schriften */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Farben — Override des Jenva-Defaults: Akzent = Blau, nicht Orange */
  --color-bg:        #f5f6f8;     /* sehr helles Grau */
  --color-bg-alt:    #ffffff;     /* alternierende Sections */
  --color-surface:   #ffffff;
  --color-surface-2: #eef0f3;     /* Custom: zweite Surface-Stufe */
  --color-text:      #0b0d12;     /* fast schwarz, leicht warm */
  --color-text-soft: #3d4350;     /* Custom: zweite Text-Stufe */
  --color-text-muted:#6b7280;
  --color-border:    #e1e4ea;
  --color-border-soft:#eef0f3;    /* Custom */

  --color-accent:        #1e5baa; /* Mittelblau — Override */
  --color-accent-hover:  #1d4ed8;
  --color-accent-deep:   #1e3a8a; /* Custom — für Advice-Banner */
  --color-accent-soft:   #e8efff;
  --color-accent-text:   #ffffff;
  --color-accent-on-dark:#7aa2ff; /* Custom — Akzent auf dunklem BG */

  --color-text-link:       var(--color-accent-hover);
  --color-text-link-hover: var(--color-accent-deep);

  --color-success:      #15803d;
  --color-success-soft: #dcfce7;
  --color-error:        #c0392b;
  --color-sale:         #c0392b; /* Custom — gleicher Wert wie error, semantisch sale */
  --color-star:         #fbbf24; /* warmes Gold */

  --color-btn-bg:        var(--color-accent);
  --color-btn-text:      var(--color-accent-text);
  --color-btn-bg-hover:  var(--color-accent-hover);
  --color-btn-text-hover:var(--color-accent-text);
  --color-btn-ghost-border: var(--color-border);

  /* Spacing — 4px-Skala */
  --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; --space-24:6rem;
  --space-32:8rem;

  /* Typo — clamp-basiert */
  --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.6rem + 3vw, 3.75rem);
  --text-display: var(--text-hero);
  --text-prose:   var(--text-md);

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  /* Layout */
  --container: 1400px;
  --container-narrow: 760px;
  --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);
}

/* ============================================================
   RESET / BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
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;
}
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;
}
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 }

/* Layout-Helper */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px){ .container{ padding-inline: var(--space-8) } }

.section{ padding-block: clamp(3rem, 6vw, 5rem) }
@media (min-width: 1024px){ .section{ padding-block: clamp(4rem, 7vw, 5.5rem) } }
.section-bg{ background: var(--color-bg-alt) }
.section-sm{ padding-block: var(--space-12) }

.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);
}

.section-header{ text-align: center; max-width: 680px; margin: 0 auto var(--space-12) }
.section-header-text > * + *{ margin-top: var(--space-3) }
.section-title{ font-size: var(--text-3xl) }
.section-lede{ color: var(--color-text-soft); font-size: var(--text-md) }

/* ============================================================
   BUTTONS — .btn / .btn-primary / .btn-ghost / .btn-lg
   ============================================================ */
.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;
}
.btn svg{ width: 18px; height: 18px }

.btn-primary{ background: var(--color-btn-bg); color: var(--color-btn-text) }
.btn-primary:hover{
  background: var(--color-btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-ghost{
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-btn-ghost-border);
}
.btn-ghost:hover{
  background: var(--color-surface-2);
  border-color: var(--color-text);
}

.btn-text{
  background: transparent;
  color: var(--color-accent-hover);
  padding-inline: 0;
}
.btn-text:hover{ color: var(--color-accent-deep) }

.btn-lg{ padding: var(--space-5) var(--space-8); font-size: var(--text-lg); min-height: 56px }

/* Inverse Variante für dunkle Sections */
.btn-ghost-inverse{
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / .3);
}
.btn-ghost-inverse:hover{
  background: rgb(255 255 255 / .1);
  border-color: rgb(255 255 255 / .5);
}

/* ============================================================
   CUSTOM SECTION: .child-topbar
   Dünne Trust-Bar oberhalb des Headers
   ============================================================ */
.child-topbar{
  background: var(--color-text);
  color: var(--color-text-on-dark);
  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 }

/* Muss 1:1 mit chrome.css / critical/chrome.css übereinstimmen — jede
   Seiten-CSS-Datei hat ihre eigene Kopie dieses Blocks (Performance-Pattern
   dieses Themes), sonst überschreibt die zuletzt geladene Datei den Fix. */
@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 (Jenva-Standard)
   ============================================================ */
.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);
}
.site-header .logo{ grid-column: 1; justify-self: start }
.site-header .nav-primary{ grid-column: 2; justify-self: center }
.site-header .header-actions{ grid-column: 3; justify-self: end }
@media (min-width: 1350px){
  .header-inner{ min-height: 88px; gap: var(--space-10) }
}

/* Logo */
.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 (Jenva-Standard-Klasse) */
.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,
.nav-item:hover .nav-link{ color: var(--color-accent-hover) }
.nav-link svg{
  width: 14px; height: 14px;
  transition: transform .2s var(--ease);
}
.nav-item:hover .nav-link svg{ transform: rotate(180deg) }
.nav-link.is-sale{ color: var(--color-sale) }

/* Megamenu */
.megamenu{
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 520px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: var(--space-6);
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-item:hover .megamenu,
.nav-item:focus-within .megamenu{
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.megamenu-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-6);
}
.megamenu-link{
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: background .15s ease;
}
.megamenu-link:hover{
  background: var(--color-surface-2);
  color: var(--color-accent-hover);
}
.megamenu-link::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0; opacity: .5;
}
.megamenu-link:hover::before{ opacity: 1 }

/* Header-Actions (Jenva-Standard) */
.header-actions{ display: flex; align-items: center; 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 }
/* Wunschlisten-Badge teilt sich die Regel mit dem Warenkorb — getrennte
   Regeln sind schon einmal auseinandergedriftet: .header-wishlist-count war
   nur innerhalb der mobilen Tab-Bar gestylt und rutschte im Desktop-Header als
   zweites Grid-Item unter das Herz. */
.header-cart-count,
.header-wishlist-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 (Jenva-Standard) */
.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 }
.mobile-nav-cta{ display: block }

/* ============================================================
   HERO (Jenva-Standard: .hero, .hero-grid, .hero-content, .hero-lede, .hero-actions, .hero-visual)
   ============================================================ */
.hero{
  position: relative;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  padding-block: var(--space-12) var(--space-16);
  overflow: hidden;
}
@media (min-width: 1024px){
  .hero{ padding-block: var(--space-20) var(--space-24) }
}
.hero-grid{
  display: grid; gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px){
  .hero-grid{ grid-template-columns: 1.05fr 1fr; gap: var(--space-16) }
}
.hero-content > * + *{ margin-top: var(--space-5) }
.hero-title{
  font-size: var(--text-hero);
  letter-spacing: -.025em;
}
.hero-title em{
  font-style: italic; font-weight: 500;
  color: var(--color-accent-hover);
}
.hero-lede{
  font-size: var(--text-lg);
  color: var(--color-text-soft);
  max-width: 540px;
}
.hero-actions{
  display: flex; gap: var(--space-3);
  flex-wrap: wrap;
}
.hero-ministack{
  display: flex; flex-wrap: wrap;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.hero-ministack-item{
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-soft);
}
.hero-ministack-item svg{
  width: 18px; height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Hero-Visual: Card mit CSS-Pseudo-Bett, Floating-Badge */
.hero-visual{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  box-shadow: var(--shadow-3);
  background: linear-gradient(135deg, #dde3ee 0%, #c5cee0 100%);
}
/* Inneres Visual: CSS-Bett (Kopfteil + Matratze) — eigene Position, eigener Schatten */
.hero-visual-bed{
  position: absolute;
  inset: auto 8% 12% 8%;
  height: 55%;
  border-radius: 8px 8px 0 0;
  filter: drop-shadow(0 20px 40px rgb(11 13 18 / .25));
  background:
    /* Kopfteil oben (35%) + Matratze (Weiß) + Streifen (Cbd5e1) + Sockel (94a3b8) */
    linear-gradient(180deg,
      #1e293b 0%, #1e293b 35%,
      transparent 35%, transparent 100%
    ),
    linear-gradient(180deg,
      transparent 0%, transparent 35%,
      #ffffff 35%, #ffffff 65%,
      #cbd5e1 65%, #cbd5e1 75%,
      #94a3b8 75%, #94a3b8 100%
    );
}
.hero-visual > img,
.hero-visual-bed-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}
.hero-visual:has(> img){
  background: none;
}
.hero-visual-badge{
  position: absolute;
  top: var(--space-5); left: var(--space-5);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: var(--space-3);
  box-shadow: var(--shadow);
  font-size: var(--text-sm);
  z-index: 2;
}
.hero-visual-badge strong{
  display: block;
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--text-base);
}
.hero-visual-badge small{
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.hero-visual-badge-icon{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hero-visual-badge-icon svg{ width: 18px; height: 18px }

/* ============================================================
   CUSTOM SECTION: .child-usps
   4er-USP-Grid (intrinsisch)
   ============================================================ */
.child-usps{ padding-block: var(--space-12) }
.child-usps-grid{
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.child-usp{
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  transition: all .2s var(--ease);
}
.child-usp:hover{
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.child-usp-icon{
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  display: grid; place-items: center;
}
.child-usp-icon svg{ width: 24px; height: 24px }
.child-usp-title{
  font-size: var(--text-lg); font-weight: 600;
  font-family: var(--font-display);
}
.child-usp-text{
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

/* ============================================================
   CUSTOM SECTION: .child-configurator
   Dunkler Banner mit Visual (300+ Stoffe)
   ============================================================ */
.child-configurator{
  background: var(--color-text);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  margin-block: var(--space-8);
}
@media (min-width: 900px){
  .child-configurator{
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }
}
.child-configurator-content{
  padding: var(--space-10) var(--space-8);
  display: flex; flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px){
  .child-configurator-content{ padding: var(--space-16) }
}
.child-configurator-eyebrow{ color: var(--color-accent-on-dark) }
.child-configurator-title{
  font-size: var(--text-3xl);
  color: #fff;
  margin-bottom: var(--space-4);
}
.child-configurator-title em{
  font-style: italic;
  color: var(--color-accent-on-dark);
  font-weight: 500;
}
.child-configurator-text{
  font-size: var(--text-md);
  margin-bottom: var(--space-8);
  max-width: 480px;
}
.child-configurator-actions{
  display: flex; gap: var(--space-3);
  flex-wrap: wrap;
}
/* Visual: dunkle diagonale Streifen + "300+" + "verschiedene Stoffe" */
.child-configurator-visual{
  background:
    repeating-linear-gradient(45deg,
      #374151 0px, #374151 30px,
      #4b5563 30px, #4b5563 60px),
    #374151;
  min-height: 280px;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.child-configurator-visual > img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
  z-index: 0;
}
.child-configurator-visual:has(> img){
  background: #1f2937;
}
.child-configurator-visual::before{
  content: "300+";
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 600;
  color: rgb(255 255 255 / .15);
  letter-spacing: -.04em;
  position: relative;
  z-index: 1;
}
.child-configurator-visual::after{
  content: "verschiedene Stoffe";
  position: absolute;
  bottom: var(--space-8);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-md);
  color: #fff;
  letter-spacing: .05em;
  z-index: 1;
}

/* ============================================================
   CUSTOM SECTION: .child-shop-categories
   6-Card-Grid mit pseudo-visuellen Kategorie-Visuals
   ============================================================ */
.child-cats-grid{
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px){
  .child-cats-grid{ grid-template-columns: repeat(3, 1fr) }
}
@media (min-width: 1100px){
  .child-cats-grid{
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
  }
}
.child-cat{
  position: relative; display: block;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all .2s var(--ease);
}
.child-cat:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--color-accent);
}
.child-cat-image{
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #e8efff 0%, #dde3ee 100%);
  position: relative; overflow: hidden;
}
.child-cat-image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.child-cat-image:has(img)::after{ display: none }
/* Default: Bett-Visual (Kopfteil + Matratze) */
.child-cat-image::after{
  content: "";
  position: absolute;
  inset: auto 15% 18% 15%;
  height: 42%;
  background: linear-gradient(180deg,
    #1e293b 0%, #1e293b 30%,
    #ffffff 30%, #ffffff 70%,
    #cbd5e1 70%, #cbd5e1 100%
  );
  border-radius: 6px 6px 0 0;
}
/* Polsterbetten: weicheres Blau */
.child-cat--polster .child-cat-image{
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
/* Holzbetten: warmes Gelb */
.child-cat--holz .child-cat-image{
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}
/* Metallbetten: kühles Grau */
.child-cat--metall .child-cat-image{
  background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
}
/* Matratzen: cremiges Gelb + reines Matratzen-Visual (ohne Kopfteil) */
.child-cat--matratzen .child-cat-image{
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.child-cat--matratzen .child-cat-image::after{
  inset: auto 12% 22% 12%;
  height: 30%;
  background: linear-gradient(180deg,
    #ffffff 0%, #ffffff 60%,
    #e5e7eb 60%, #e5e7eb 100%
  );
  border-radius: 8px;
}
/* Lattenroste: beige + Latten-Streifen */
.child-cat--lattenroste .child-cat-image{
  background: linear-gradient(135deg, #f3e8d2 0%, #e7d5b3 100%);
}
.child-cat--lattenroste .child-cat-image::after{
  inset: auto 10% 25% 10%;
  height: 18%;
  background:
    repeating-linear-gradient(90deg,
      #92400e 0px, #92400e 6px,
      transparent 6px, transparent 14px),
    #7c2d12;
  border-radius: 4px;
}
.child-cat--sale .child-cat-image{
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}
.child-cat--sale .child-cat-image::after{
  inset: auto 20% 28% 20%;
  height: 28%;
  background: var(--color-sale, #dc2626);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgb(220 38 38 / .15);
}
.child-cat--sale .child-cat-name{ color: var(--color-sale, #dc2626) }
.child-cat-body{ padding: var(--space-4) }
.child-cat-name{
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 2px;
  font-family: var(--font-sans);
}
.child-cat-price{
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.child-cat-arrow{
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  display: grid; place-items: center;
  color: var(--color-accent-hover);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: all .2s var(--ease);
  box-shadow: var(--shadow-1);
}
.child-cat:hover .child-cat-arrow{ opacity: 1; transform: translate(0, 0) }
.child-cat-arrow svg{ width: 14px; height: 14px }

/* ============================================================
   PRODUCT-GRID + PRODUCT-CARD (Jenva-WooCommerce-Standard)
   Markup-Klassen: .product-grid, .product-card,
   .product-card-thumb, .product-card-badge.is-sale,
   .product-card-wishlist, .product-card-name, .product-card-price,
   .price-old, .product-card-vendor
   ============================================================ */
.product-grid{
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.product-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .2s var(--ease);
  position: relative;
}
.product-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--color-accent);
}
.product-card-thumb{
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e8efff 0%, #dde3ee 100%);
  overflow: hidden;
}
/* Inneres Visual: Bett (Kopfteil + Matratze) — eigener Drop-Shadow */
.product-card-thumb::after{
  content: "";
  position: absolute;
  inset: auto 18% 18% 18%;
  height: 38%;
  background: linear-gradient(180deg,
    #1e293b 0%, #1e293b 32%,
    #ffffff 32%, #ffffff 70%,
    #cbd5e1 70%, #cbd5e1 100%
  );
  border-radius: 6px 6px 0 0;
  filter: drop-shadow(0 8px 16px rgb(11 13 18 / .15));
}
.product-card-thumb:has(img)::after{
  display: none;
  content: none;
}

.product-card-badge{
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  padding: 4px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .05em;
  z-index: 2;
}
.product-card-badge.is-sale{
  background: var(--color-sale);
  color: #fff;
}
.product-card-badge.is-new{
  background: var(--color-success);
  color: #fff;
}
.product-card-badge.is-allergy,
.product-card-badge.is-eco{
  background: var(--color-success);
  color: #fff;
}

.product-card-wishlist{
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  display: grid; place-items: center;
  color: var(--color-text-soft);
  box-shadow: var(--shadow-1);
  transition: color .15s ease;
  z-index: 2;
}
.product-card-wishlist:hover,
.product-card-wishlist[aria-pressed="true"]{ color: var(--color-sale) }
.product-card-wishlist[aria-pressed="true"] svg{ fill: var(--color-sale) }
.product-card-wishlist svg{ width: 18px; height: 18px }

.product-card-body{
  padding: var(--space-5);
  display: flex; flex-direction: column;
  flex: 1;
}
.product-card-vendor{
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.product-card-name{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.product-card-rating{
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
}
.product-card-rating .stars{ color: var(--color-star) }
.product-card-price{
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 600;
  color: var(--color-text);
}
.product-card-price.is-sale{ color: var(--color-sale) }
.product-card-price .price-old{
  font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.section-cta{ text-align: center; margin-top: var(--space-10) }

/* ============================================================
   CUSTOM SECTION: .child-testimonials
   ============================================================ */
.child-testimonials-grid{
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.child-testimonial{
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.child-testimonial-stars{
  color: var(--color-star);
  font-size: var(--text-md);
  letter-spacing: 2px;
}
.child-testimonial-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
}
.child-testimonial-quote{
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  flex: 1;
  font-style: italic;
}
.child-testimonial-author{
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}
.child-testimonial-avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-display);
  flex-shrink: 0;
}
.child-testimonial-name{
  font-weight: 600;
  font-size: var(--text-sm);
}
.child-testimonial-product{
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   CUSTOM SECTION: .child-advice
   Dunkelblauer Beratungs-Banner
   ============================================================ */
.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: var(--color-text-on-dark);
}
.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;
}

/* ============================================================
   CUSTOM SECTION: .child-faq
   Native <details>/<summary> Akkordeon
   ============================================================ */
.child-faq-list{
  max-width: 780px; margin: 0 auto;
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.child-faq-item{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.child-faq-item[open]{ border-color: var(--color-accent) }
.child-faq-summary{
  list-style: none;
  cursor: pointer;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-text);
  font-family: var(--font-display);
}
.child-faq-summary::-webkit-details-marker{ display: none }
.child-faq-icon{
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: grid; place-items: center;
  transition: transform .25s var(--ease), background .15s ease, color .15s ease;
}
.child-faq-item[open] .child-faq-icon{
  background: var(--color-accent);
  color: #fff;
  transform: rotate(45deg);
}
.child-faq-icon svg{ width: 14px; height: 14px }
.child-faq-answer{
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}
.child-faq-cta{ text-align: center; margin-top: var(--space-8) }

/* ============================================================
   CUSTOM SECTION: .child-trust-stripe
   Zahlung + Zertifikate + Rating-Block
   ============================================================ */
.child-trust-stripe{
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-8);
}
.child-trust-stripe-inner{
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px){
  .child-trust-stripe-inner{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-10);
    align-items: center;
  }
}
.child-trust-stripe-main{
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  width: 100%;
}
.child-trust-group{
  text-align: center;
  min-width: 0;
}
@media (min-width: 900px){ .child-trust-group{ text-align: left } }
.child-trust-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);
}
.child-trust-badges{
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}
@media (min-width: 900px){
  .child-trust-badges{
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
}
.child-trust-badge{
  background: var(--color-surface-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
}
.child-trust-rating{
  display: flex; align-items: center; gap: var(--space-3);
  justify-content: center;
}
.child-trust-rating-num{
  font-family: var(--font-display);
  font-size: 2.25rem; font-weight: 600;
  color: var(--color-text);
  line-height: 1;
}
.child-trust-rating-info strong{
  display: block;
  color: var(--color-text);
  font-size: var(--text-sm);
}
.child-trust-rating-info strong .stars{ color: var(--color-star) }
.child-trust-rating-info small{
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ============================================================
   SITE-FOOTER (Jenva-Standard)
   ============================================================ */
.site-footer{
  background: var(--color-text);
  color: var(--color-text-on-dark-soft);
  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: var(--color-text-on-dark-muted) }
.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: var(--color-text-on-dark-soft);
  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 var(--color-dark-border);
  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;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@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;
  }
}

/* Unter 542px: alle Startseiten-Buttons full width (stapeln in den Flex-Reihen) */
@media (max-width: 542px){
  .btn,
  .child-advice-btn{
    width: 100%;
    justify-content: center;
  }
}