/* =============================================================
   kindergeschenkidee.de – Prototyp-Stylesheet (Version 2)
   -------------------------------------------------------------
   1  Design-Tokens (spaeter theme.json und globale Styles)
   2  Reset & Basis
   3  Layout, Typografie, Utilities
   4  Buttons, Chips, Formulare
   5  Demo-Leiste, Header, Mega-Menü, Mobile-Menü, Bottom-Bar
   6  Such-Overlay
   7  Bildplatzhalter
   8  Karten (Produkt, Thema, Auswahl, Info)
   9  Passungsblock, Hinweise, Prüfhinweise
   10 Händlerangebote, Akkordeon, Breadcrumb, Datenliste
   11 Geschenkekorb, Vergleich (Tabelle + mobile Karten)
   12 Geschenkefinder + Schnellfinder
   13 Filter
   14 Artikel
   15 Sticky-Aktion, Toast, Footer
   16 Feste Leisten, Reduced Motion
   ============================================================= */

/* ---------- 1  DESIGN-TOKENS ---------- */
:root{
  /* Technische Basistokens; neutrale Werte werden in foundation.css zentral überschrieben. */
  --c-bg:#ffffff;
  --c-surface:#faf7f2;
  --c-surface-2:#f2ece2;
  --c-ink:#171d1b;
  --c-ink-2:#4c5a56;
  --c-ink-3:#6e7b77;
  --c-line:#e4dcd0;
  --c-line-2:#efe9e0;
  --c-primary:#14524a;
  --c-primary-hover:#0f3f39;
  --c-primary-soft:#e6efec;
  --c-accent:#a85c26;
  --c-accent-soft:#fbf0e6;
  --c-focus:#0b6ea8;

  /* Typografie */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
              "Noto Sans","Liberation Sans",Arial,sans-serif;
  --fs-xs:0.78rem;
  --fs-sm:0.875rem;
  --fs-base:1rem;
  --fs-md:1.0625rem;
  --fs-lg:clamp(1.125rem,1rem + 0.5vw,1.3125rem);
  --fs-h4:clamp(1.0625rem,1rem + 0.4vw,1.1875rem);
  --fs-h3:clamp(1.25rem,1.1rem + 0.7vw,1.5rem);
  --fs-h2:clamp(1.45rem,1.2rem + 1.2vw,2.05rem);
  --fs-h1:clamp(1.8rem,1.35rem + 2.1vw,2.95rem);
  --lh-tight:1.16;
  --lh-snug:1.32;
  --lh-base:1.62;
  --tracking-tight:-0.021em;
  --tracking-wide:0.09em;

  /* Abstände */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px;
  --section-y:clamp(40px,7vw,80px);

  /* Maße */
  --wrap:1200px;
  --wrap-narrow:760px;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --radius-pill:999px;

  /* Effekte */
  --shadow-1:0 1px 2px rgba(23,29,27,.05);
  --shadow-2:0 2px 10px rgba(23,29,27,.06);
  --shadow-3:0 12px 34px rgba(23,29,27,.13);
  --t-fast:120ms ease;
  --t:200ms ease;

  /* Feste Leisten */
  --header-h:64px;
  --bottombar-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- 2  RESET & BASIS ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
:where(body){
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--c-ink);
  background:var(--c-bg);
}
body.is-locked{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:var(--c-primary);text-underline-offset:3px;}
a:hover{color:var(--c-primary-hover);}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:4px;}
[tabindex="-1"]:focus{outline:none;}
.skip-link{
  position:absolute;left:8px;top:-64px;z-index:200;
  background:var(--c-ink);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);
  transition:top var(--t);
}
.skip-link:focus{top:8px;}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- 3  LAYOUT, TYPOGRAFIE, UTILITIES ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-5);}
.wrap--narrow{max-width:var(--wrap-narrow);}
.section{padding-block:var(--section-y);}
.section--surface:not(.has-background){background:var(--c-surface);}
.section--tight{padding-block:clamp(28px,4.5vw,48px);}
.section--flush-top{padding-top:0;}

:where(h1,h2,h3,h4){margin:0 0 var(--sp-3);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);font-weight:700;overflow-wrap:break-word;}
:where(h1:not(.has-font-size)){font-size:var(--fs-h1);}
:where(h2:not(.has-font-size)){font-size:var(--fs-h2);}
:where(h3:not(.has-font-size)){font-size:var(--fs-h3);line-height:var(--lh-snug);}
:where(h4:not(.has-font-size)){font-size:var(--fs-h4);line-height:var(--lh-snug);}
p{margin:0 0 var(--sp-4);}
p:last-child{margin-bottom:0;}
.lead{line-height:1.5;max-width:64ch;}
.lead:not(.has-font-size){font-size:var(--fs-lg);}
.lead:not(.has-text-color){color:var(--c-ink-2);}
.meta:not(.has-font-size){font-size:var(--fs-sm);}
.meta:not(.has-text-color){color:var(--c-ink-3);}
.eyebrow{
  display:inline-block;font-weight:700;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  margin-bottom:var(--sp-3);
}
.eyebrow:not(.has-font-size){font-size:var(--fs-xs);}
.eyebrow:not(.has-text-color){color:var(--c-primary);}
.section-head{max-width:62ch;margin-bottom:var(--sp-8);}
.section-head p{margin-bottom:0;}
.section-head p:not(.has-text-color){color:var(--c-ink-2);}
.head-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:end;justify-content:space-between;margin-bottom:var(--sp-6);}
.head-row h2{margin-bottom:0;}

.grid{display:grid;gap:var(--sp-4);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));}
.grid--tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:var(--sp-3);}

.split{display:grid;gap:var(--sp-8);}
@media (min-width:1024px){
  .split{grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-12);align-items:start;}
  .split__aside{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:var(--sp-4);}
}

/* Utilities – ersetzen die Inline-Styles aus Version 1 */
.u-mt-0{margin-top:0;}
.u-mt-2{margin-top:var(--sp-2);}
.u-mt-3{margin-top:var(--sp-3);}
.u-mt-4{margin-top:var(--sp-4);}
.u-mt-6{margin-top:var(--sp-6);}
.u-mt-8{margin-top:var(--sp-8);}
.u-mt-10{margin-top:var(--sp-10);}
.u-mb-0{margin-bottom:0;}
.u-mb-3{margin-bottom:var(--sp-3);}
.u-mb-4{margin-bottom:var(--sp-4);}
.u-mb-6{margin-bottom:var(--sp-6);}
.u-mb-8{margin-bottom:var(--sp-8);}
.u-center{text-align:center;}
.u-narrow{max-width:52ch;}
.u-narrow-center{max-width:52ch;margin-inline:auto;}
.u-list-tight{margin:0;padding-left:1.1rem;}
.u-price{font-size:1.5rem;font-weight:700;margin:var(--sp-5) 0 var(--sp-1);}

/* ---------- 4  BUTTONS, CHIPS, FORMULARE ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 20px;border-radius:var(--radius);
  border:1px solid transparent;background:var(--c-surface-2);color:var(--c-ink);
  font-size:var(--fs-md);font-weight:600;text-decoration:none;cursor:pointer;
  transition:background var(--t),border-color var(--t),transform var(--t-fast);
}
.btn:hover{color:var(--c-ink);}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--c-primary);color:#fff;}
.btn--primary:hover{background:var(--c-primary-hover);color:#fff;}
.btn--ghost{background:transparent;border-color:var(--c-line);}
.btn--ghost:hover{background:var(--c-surface);}
.btn--quiet{background:transparent;border-color:transparent;color:var(--c-primary);min-height:44px;padding:8px 10px;}
.btn--quiet:hover{background:var(--c-primary-soft);}
.btn--block{width:100%;}
.btn--sm{min-height:44px;padding:8px 14px;font-size:var(--fs-sm);}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;}
.btn:disabled:hover{background:var(--c-surface-2);}
.btn--primary:disabled:hover{background:var(--c-primary);}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);}
.btn-row--center{justify-content:center;}
.btn-row--stack{flex-direction:column;}
.btn-row--stack .btn{width:100%;}
@media (min-width:480px){
  .btn-row--stack{flex-direction:row;}
  .btn-row--stack .btn{width:auto;flex:1;}
}

/* Merken-Aktion: ruhiger als die Hauptaktion, mit klarem Zustand */
.btn--mark{background:#fff;border-color:var(--c-line);color:var(--c-ink-2);font-weight:600;}
.btn--mark:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-soft);}
.btn--mark[aria-pressed="true"]{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary);}
.btn--mark .btn__check{display:none;}
.btn--mark[aria-pressed="true"] .btn__check{display:inline;}

.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--c-surface-2);color:var(--c-ink-2);
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;border:1px solid transparent;
}
a.chip:hover{background:var(--c-primary-soft);color:var(--c-primary);}
.chip--outline{background:transparent;border-color:var(--c-line);}
.chip--accent{background:var(--c-accent-soft);color:var(--c-accent);}
.chip--small{min-height:28px;padding:3px 10px;font-size:var(--fs-xs);}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.chip-remove{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;
  border:1px solid var(--c-line);background:#fff;border-radius:var(--radius-pill);
  font-size:var(--fs-sm);font-weight:600;cursor:pointer;color:var(--c-ink-2);
}
.chip-remove:hover{border-color:var(--c-primary);color:var(--c-primary);}
.chip-remove[aria-pressed="true"]{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-soft);}

label{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:6px;}
.field-hint{font-size:var(--fs-sm);color:var(--c-ink-3);margin:6px 0 0;}
input[type=text],input[type=search],input[type=email],input[type=number],select,textarea{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid var(--c-line);border-radius:var(--radius);
  background:#fff;color:var(--c-ink);font:inherit;
}
input::placeholder{color:var(--c-ink-3);}
input:focus,select:focus,textarea:focus{border-color:var(--c-primary);}
fieldset{border:0;margin:0;padding:0;}
legend{padding:0;}

/* ---------- 5  DEMO-LEISTE, HEADER, NAVIGATION ---------- */
.demo-bar{
  background:var(--c-ink);color:#fff;font-size:var(--fs-xs);
  padding:7px 0;text-align:center;
}
.demo-bar a{color:#fff;}
.demo-bar p{margin:0;}

.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-line-2);}
.header__inner{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--header-h);}
/* Logo-Container; das finale SVG wird zentral über app.js eingesetzt. */
.logo{display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;color:var(--c-ink);font-weight:800;letter-spacing:-0.03em;font-size:1.0625rem;white-space:nowrap;}
.logo__mark{color:var(--c-primary);}
.logo__tld{color:var(--c-ink-3);font-weight:600;}
.nav{display:none;}
.header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;min-height:44px;padding:0 10px;border:1px solid transparent;
  background:transparent;border-radius:var(--radius);cursor:pointer;position:relative;
}
.icon-btn:hover{background:var(--c-surface);}
.icon-btn svg{width:22px;height:22px;}
.count-badge{
  position:absolute;top:4px;right:2px;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--radius-pill);background:var(--c-accent);color:#fff;
  font-size:11px;font-weight:700;line-height:19px;text-align:center;
}
.count-badge[hidden]{display:none;}
.header__cta{display:none;}
@media (min-width:1024px){
  .header__cta{display:inline-flex;}
  .header__menu-btn{display:none;}
  .nav{display:flex;align-items:center;gap:2px;}
  .nav__item{position:relative;}
  .nav__link{
    display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:8px 12px;
    border-radius:var(--radius-sm);color:var(--c-ink);font-size:var(--fs-sm);
    font-weight:600;text-decoration:none;background:transparent;border:0;cursor:pointer;
  }
  .nav__link:hover{background:var(--c-surface);color:var(--c-ink);}
  .nav__link[aria-current="page"]{color:var(--c-primary);box-shadow:inset 0 -2px 0 var(--c-primary);border-radius:0;}
  .nav__caret{width:10px;height:10px;transition:transform var(--t);}
  .nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg);}
  .mega{
    position:absolute;left:-12px;top:calc(100% + 6px);z-index:70;
    min-width:520px;padding:var(--sp-5);background:#fff;
    border:1px solid var(--c-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);
  }
  .mega[hidden]{display:none;}
  .mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
  .mega__title{font-size:var(--fs-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-ink-3);margin:0 0 var(--sp-2);}
  .mega__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
  .mega__list a{display:block;padding:7px 8px;border-radius:var(--radius-sm);color:var(--c-ink);text-decoration:none;font-size:var(--fs-sm);}
  .mega__list a:hover{background:var(--c-surface);color:var(--c-primary);}
}

/* Panels */
.panel-backdrop{
  position:fixed;inset:0;z-index:90;background:rgba(23,29,27,.42);
  opacity:0;pointer-events:none;transition:opacity var(--t);
}
.panel-backdrop.is-open{opacity:1;pointer-events:auto;}
.panel{
  position:fixed;z-index:95;background:#fff;display:flex;flex-direction:column;
  visibility:hidden; /* geschlossene Panels sind nicht per Tastatur erreichbar */
  transition:transform var(--t),opacity var(--t),visibility 0s linear 200ms;
}
.panel.is-open{visibility:visible;transition-delay:0s;}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--c-line-2);}
.panel__head h2{margin:0;font-size:var(--fs-h4);}
.panel__body{overflow-y:auto;padding:var(--sp-5);flex:1;-webkit-overflow-scrolling:touch;}
.panel__foot{border-top:1px solid var(--c-line-2);padding:var(--sp-4) var(--sp-5) calc(var(--sp-4) + var(--safe-b));background:var(--c-surface);}

#menuPanel{inset:0 0 0 auto;width:min(420px,88vw);transform:translateX(100%);}
#menuPanel.is-open{transform:translateX(0);}
#menuPanel .panel__body{padding-block:var(--sp-4);}
.menu-list{list-style:none;margin:0 0 var(--sp-4);padding:0;display:grid;gap:0;}
.menu-list :where(a,.mobile-nav__toggle){display:flex;align-items:center;justify-content:flex-start;min-height:44px;padding:7px 10px;border-radius:var(--radius);color:var(--c-ink);text-decoration:none;font:inherit;font-weight:600;}
.menu-list :where(a,.mobile-nav__toggle):hover{background:var(--c-surface);}
.menu-group-title{font-size:var(--fs-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-ink-3);margin:0 0 var(--sp-1);}
.menu-list--icon-links a{gap:9px;}
.menu-link__icon{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;background:transparent;}
.menu-link__icon .kgi-icon{display:block;width:18px;height:18px;object-fit:contain;}
.menu-link__text{min-width:0;}
.mobile-nav__toggle{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;}
.mobile-nav__caret{display:grid;place-items:center;flex:0 0 16px;width:16px;height:16px;margin-left:auto;transition:transform var(--t);}
.mobile-nav__caret svg{display:block;width:16px;height:16px;}
.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__caret{transform:rotate(180deg);}
.mobile-submenu[hidden]{display:none;}
.mobile-submenu{margin:0 0 var(--sp-2) 10px;padding:var(--sp-1) 0 var(--sp-1) 8px;border-left:1px solid var(--c-line-2);}
.mobile-submenu__group + .mobile-submenu__group{margin-top:var(--sp-2);}
.mobile-submenu__title{margin:0 0 var(--sp-1);padding:0 10px;color:var(--c-ink-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;}
.mobile-submenu__list{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.mobile-submenu__list a{gap:9px;}
.mobile-submenu__foot{margin:var(--sp-2) 10px 0;color:var(--c-ink-3);font-size:var(--fs-sm);}
.menu-list .mobile-submenu__foot a{display:inline;min-height:0;padding:0;color:var(--c-primary);text-decoration:underline;text-underline-offset:2px;}
.mobile-submenu__overview{margin:var(--sp-2) 0 0;}
.mobile-submenu__overview a{gap:9px;color:var(--c-primary);}

.bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.98);border-top:1px solid var(--c-line);
  padding-bottom:var(--safe-b);
}
.bottombar__btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--bottombar-h);padding:6px 4px;border:0;background:transparent;
  color:var(--c-ink-2);font-size:11px;font-weight:600;text-decoration:none;cursor:pointer;position:relative;
}
.bottombar__btn svg{width:22px;height:22px;}
.bottombar__btn[aria-current="page"]{color:var(--c-primary);}
.bottombar__btn[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--c-primary);
}
@media (min-width:1024px){ .bottombar{display:none;} }

/* ---------- 6  SUCH-OVERLAY ---------- */
#searchPanel{inset:0;transform:translateY(-6px);opacity:0;}
#searchPanel.is-open{transform:translateY(0);opacity:1;}
.search-form{display:flex;gap:var(--sp-2);align-items:center;flex:1;}
.search-form input{min-height:52px;}
.search-hero{position:relative;}
.search-hero--page{max-width:640px;}
.search-hero input{padding-left:44px;min-height:56px;box-shadow:var(--shadow-2);border-radius:var(--radius-lg);}
.search-hero .search-icon{position:absolute;left:14px;top:28px;transform:translateY(-50%);width:20px;height:20px;color:var(--c-ink-3);pointer-events:none;}
.suggest-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);}
.suggest-list button,.suggest-list a{
  width:100%;text-align:left;min-height:48px;padding:11px 14px;
  border:1px solid var(--c-line);background:#fff;border-radius:var(--radius);
  font-size:var(--fs-md);cursor:pointer;display:flex;gap:10px;align-items:center;
  color:var(--c-ink);text-decoration:none;
}
.suggest-list button:hover,.suggest-list a:hover{border-color:var(--c-primary);background:var(--c-primary-soft);color:var(--c-primary);}
.suggest-list svg{width:18px;height:18px;color:var(--c-ink-3);flex:none;}
.suggest-list small{display:block;font-size:var(--fs-sm);color:var(--c-ink-3);font-weight:400;}
.result-group{margin-bottom:var(--sp-8);}
.result-group h2{margin-bottom:var(--sp-4);}
.result-count{font-size:var(--fs-sm);color:var(--c-ink-3);font-weight:600;}

/* ---------- 7  BILDPLATZHALTER ---------- */
.ph{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--ph-a,#e9f0ed) 0%,var(--ph-b,#f6efe4) 100%);
  display:flex;align-items:flex-end;isolation:isolate;
}
.ph::before{
  content:"";position:absolute;z-index:-1;width:62%;aspect-ratio:1;border-radius:50%;
  top:-14%;right:-10%;background:rgba(20,82,74,.13);
}
.ph::after{
  content:"";position:absolute;z-index:-1;width:44%;aspect-ratio:1;border-radius:26%;
  bottom:-16%;left:-8%;background:rgba(168,92,38,.12);transform:rotate(18deg);
}
.ph__label{
  margin:var(--sp-3);padding:5px 10px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.86);color:var(--c-ink-2);
  font-size:var(--fs-xs);font-weight:600;line-height:1.35;
}
.ph--square{aspect-ratio:1/1;}
.ph--43{aspect-ratio:4/3;}
.ph--169{aspect-ratio:16/9;}
.ph--hero{aspect-ratio:4/3;--ph-a:#e3ede9;--ph-b:#f7eee1;}
.ph--warm{--ph-a:#f7eee2;--ph-b:#eef2ea;}
.ph--cool{--ph-a:#e8f0ee;--ph-b:#f3f1ea;}

/* Redaktionelle Motivbilder aus der WordPress-Mediathek. Feste Seitenverhältnisse
   verhindern Layoutsprünge, object-fit hält alle Einsatzorte konsistent. */
.editorial-media{
  position:relative;overflow:hidden;background:var(--c-surface-2);min-width:0;
}
.editorial-media--card,.editorial-media--detail,.editorial-media--compare{aspect-ratio:3/2;}
.editorial-media--thumb{width:72px;height:72px;border-radius:var(--radius-sm);}
.editorial-media img{display:block;width:100%;height:100%;object-fit:cover;}
.editorial-media--card img{transition:transform var(--t);}
.editorial-idea-card:hover .editorial-media--card img{transform:scale(1.015);}

/* ---------- 8  KARTEN ---------- */
.card{
  background:#fff;border:1px solid var(--c-line-2);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;min-width:0;
  transition:border-color var(--t),box-shadow var(--t);
}
.card:hover{border-color:var(--c-line);box-shadow:var(--shadow-2);}
.card__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);flex:1;min-width:0;}
.editorial-idea-card .card__body{padding:clamp(18px,2vw,24px);gap:12px;}
.editorial-idea-card .card__kind{font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;}
.card__title{font-size:var(--fs-h4);margin:0;overflow-wrap:break-word;hyphens:auto;}
.card__title a{color:var(--c-ink);text-decoration:none;}
.card__title a:hover{color:var(--c-primary);text-decoration:underline;}
.card__price{font-weight:700;margin:0;}
.card__price span{font-weight:400;color:var(--c-ink-3);font-size:var(--fs-sm);}
.card__orientation{display:grid;gap:2px;line-height:1.45;}
.card__orientation span:first-child{font-weight:650;color:var(--c-ink-2);}
.card__rank{
  display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c-primary);
}
/* Aktionen: Hauptaktion oben, Vormerken ruhiger darunter – nie eingequetscht */
.card__actions{margin-top:auto;padding-top:var(--sp-3);display:grid;gap:var(--sp-2);}
.card__actions .btn{width:100%;}

.tile{
  display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);
  background:#fff;border:1px solid var(--c-line-2);border-radius:var(--radius-lg);
  text-decoration:none;color:var(--c-ink);min-height:104px;justify-content:center;
  transition:border-color var(--t),box-shadow var(--t);
}
.tile:hover{border-color:var(--c-primary);color:var(--c-ink);box-shadow:var(--shadow-2);}
.tile strong{font-size:var(--fs-md);letter-spacing:var(--tracking-tight);}
.tile span{font-size:var(--fs-sm);color:var(--c-ink-2);}
.tile--surface{background:var(--c-surface);border-color:transparent;}

.world-card{background:#fff;border:1px solid var(--c-line-2);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:var(--c-ink);display:flex;flex-direction:column;transition:box-shadow var(--t),border-color var(--t);}
.world-card:hover{box-shadow:var(--shadow-2);border-color:var(--c-line);color:var(--c-ink);}
.world-card__body{padding:var(--sp-4);}
.world-card h3{font-size:var(--fs-h4);margin-bottom:6px;}
.world-card p{font-size:var(--fs-sm);color:var(--c-ink-2);margin:0;}
.world-card__kicker{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-ink-3);display:block;margin-bottom:4px;}

.note{
  border:1px solid var(--c-line);border-radius:var(--radius);
  padding:var(--sp-4);
}
.note:not(.has-background){background:var(--c-surface);}
.note:not(.has-font-size){font-size:var(--fs-sm);}
.note:not(.has-text-color){color:var(--c-ink-2);}
.note:not(.has-text-color) strong{color:var(--c-ink);}
.note--accent:not(.has-background){background:var(--c-accent-soft);}
.note--accent{border-color:#f0dcc8;}
.note--primary:not(.has-background){background:var(--c-primary-soft);}
.note--primary{border-color:#cfe0db;}
.note p{margin-bottom:var(--sp-2);}
.note p:last-child{margin-bottom:0;}

.steps{display:grid;gap:var(--sp-4);}
.step{display:flex;gap:var(--sp-4);align-items:flex-start;}
.step__num{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--c-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);
}
.step h3{margin-bottom:4px;}
.step h3:not(.has-font-size){font-size:var(--fs-h4);}
.step p{margin:0;}
.step p:not(.has-text-color){color:var(--c-ink-2);}
.step p:not(.has-font-size){font-size:var(--fs-sm);}

/* ---------- 9  PASSUNGSBLOCK & HINWEISE ---------- */
.fit{border-left:3px solid var(--c-primary);padding-left:var(--sp-3);}
.fit__label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--c-primary);display:block;margin-bottom:4px;
}
.fit__claim{font-size:var(--fs-sm);color:var(--c-ink);margin:0 0 6px;font-weight:600;}
.fit__reasons{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.fit__reasons li{position:relative;padding-left:18px;font-size:var(--fs-sm);color:var(--c-ink-2);}
.fit__reasons li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;
  background:var(--c-primary-soft);border:1px solid var(--c-primary);
}
.caveat,.check-hint{
  display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--c-ink-2);
  border-radius:var(--radius-sm);padding:8px 10px;margin:0;
}
.caveat{background:var(--c-surface);}
.caveat svg{width:16px;height:16px;flex:none;color:var(--c-ink-3);margin-top:3px;}
/* Prüfhinweis: Angabe ist nicht gesichert und muss geprüft werden */
.check-hint{background:var(--c-accent-soft);color:var(--c-ink);border:1px solid #f0dcc8;}
.check-hint svg{width:16px;height:16px;flex:none;color:var(--c-accent);margin-top:3px;}

/* ---------- 10  ANGEBOTE, AKKORDEON, BREADCRUMB ---------- */
.offer{
  display:grid;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--c-line-2);
  border-radius:var(--radius);background:#fff;
}
.offer+.offer{margin-top:var(--sp-3);}
.offer__top{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:baseline;justify-content:space-between;}
.offer__merchant{font-weight:700;}
.offer__total{font-size:var(--fs-lg);font-weight:700;white-space:nowrap;}
.offer__facts{display:flex;flex-wrap:wrap;gap:4px var(--sp-4);font-size:var(--fs-sm);color:var(--c-ink-2);margin:0;padding:0;list-style:none;}
.offer__facts li{display:flex;gap:6px;}
.offer__facts b{font-weight:600;color:var(--c-ink);}
.offer .btn{justify-self:start;}
.offer--best{border-color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary);}
.offer__flag{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-primary);}

.accordion{border-top:1px solid var(--c-line-2);}
.accordion__item{border-bottom:1px solid var(--c-line-2);}
.accordion__btn{
  width:100%;display:flex;gap:var(--sp-4);align-items:center;justify-content:space-between;
  min-height:56px;padding:14px 0;background:none;border:0;cursor:pointer;
  text-align:left;font-size:var(--fs-md);font-weight:600;
}
.accordion__btn svg{width:18px;height:18px;flex:none;color:var(--c-ink-3);transition:transform var(--t);}
.accordion__btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.accordion__panel{padding:0 0 var(--sp-4);color:var(--c-ink-2);}
.accordion__panel[hidden]{display:none;}

.breadcrumb{font-size:var(--fs-sm);color:var(--c-ink-3);padding-block:var(--sp-4) 0;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;}
.breadcrumb li::after{content:"›";margin-left:6px;color:var(--c-line);}
.breadcrumb li:last-child::after{content:"";}
.breadcrumb a{color:var(--c-ink-2);}

.data-list{display:grid;gap:var(--sp-3);margin:0;}
.data-list div{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--c-line-2);}
.data-list dt{font-weight:600;font-size:var(--fs-sm);}
.data-list dd{margin:0;font-size:var(--fs-sm);color:var(--c-ink-2);}

/* ---------- 11  GESCHENKEKORB & VERGLEICH ---------- */
#cartPanel{inset:0 0 0 auto;width:min(430px,92vw);transform:translateX(100%);}
#cartPanel.is-open{transform:translateX(0);}
.cart-item{display:grid;grid-template-columns:72px 1fr;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--c-line-2);min-width:0;}
.cart-item .ph{border-radius:var(--radius-sm);}
.cart-item h3{font-size:var(--fs-sm);margin:0 0 2px;}
.cart-item h3 a{color:var(--c-ink);text-decoration:none;}
.cart-item p{margin:0;font-size:var(--fs-xs);color:var(--c-ink-2);line-height:1.45;}
.cart-item__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:6px;}
.cart-item__price{font-weight:700;font-size:var(--fs-sm);}
.link-danger{background:none;border:0;padding:8px 4px;min-height:40px;color:var(--c-ink-3);font-size:var(--fs-xs);text-decoration:underline;cursor:pointer;}
.link-danger:hover{color:var(--c-accent);}
.empty{
  text-align:center;padding:var(--sp-10) var(--sp-4);border:1px dashed var(--c-line);
  border-radius:var(--radius-lg);background:var(--c-surface);
}
.empty h2,.empty h3{margin-bottom:var(--sp-2);}
.empty p{color:var(--c-ink-2);max-width:46ch;margin-inline:auto;}
.empty--result{text-align:left;padding:var(--sp-6);}
.empty--result p{margin-inline:0;}
.loosen{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);}
.loosen button{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:48px;padding:10px 14px;border:1px solid var(--c-line);background:#fff;
  border-radius:var(--radius);cursor:pointer;text-align:left;font-size:var(--fs-sm);font-weight:600;
}
.loosen button:hover{border-color:var(--c-primary);color:var(--c-primary);}
.loosen span{font-weight:400;color:var(--c-ink-3);}

/* Vergleich: Tabelle ab Tablet, Karten auf dem Smartphone */
.compare-table{display:none;}
.compare{border-collapse:collapse;width:100%;font-size:var(--fs-sm);}
.compare th,.compare td{border:1px solid var(--c-line-2);padding:var(--sp-3);text-align:left;vertical-align:top;}
.compare thead th{background:var(--c-surface);}
.compare thead .editorial-media{margin-bottom:var(--sp-2);border-radius:var(--radius-sm);}
.compare tbody th{background:#fff;font-weight:600;width:150px;color:var(--c-ink-2);}
@media (min-width:768px){
  .compare-table{display:block;}
  .compare-mobile{display:none;}
}
.cmp-pick{margin-bottom:var(--sp-4);}
.cmp-card{border:1px solid var(--c-line-2);border-radius:var(--radius-lg);overflow:hidden;background:#fff;}
.cmp-head{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--c-line-2);}
.cmp-head div{background:var(--c-surface);padding:var(--sp-3);min-width:0;}
.cmp-head .editorial-media{margin:calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) var(--sp-3);}
.cmp-head strong{display:block;font-size:var(--fs-sm);line-height:1.3;overflow-wrap:break-word;}
.cmp-head span{font-size:var(--fs-xs);color:var(--c-ink-3);}
.cmp-row{border-top:1px solid var(--c-line-2);padding:var(--sp-3);}
.cmp-row dt{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-ink-3);margin-bottom:6px;}
.cmp-values{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin:0;}
.cmp-values dd{margin:0;font-size:var(--fs-sm);color:var(--c-ink-2);min-width:0;overflow-wrap:break-word;}
.cmp-foot{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);padding:var(--sp-3);border-top:1px solid var(--c-line-2);}
.cmp-foot .btn{width:100%;}

/* ---------- 12  GESCHENKEFINDER & SCHNELLFINDER ---------- */
.finder{background:var(--c-surface);padding-block:var(--sp-6) var(--sp-16);}
.finder__shell{max-width:720px;margin-inline:auto;}
.progress{margin-bottom:var(--sp-5);}
.progress__bar{height:6px;border-radius:3px;background:var(--c-surface-2);overflow:hidden;}
.progress__fill{height:100%;background:var(--c-primary);transition:width var(--t);}
.progress__meta{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:8px;font-size:var(--fs-sm);color:var(--c-ink-2);}
.step-card{background:#fff;border:1px solid var(--c-line-2);border-radius:var(--radius-lg);padding:clamp(20px,4vw,32px);box-shadow:var(--shadow-1);}
.step-card h1{font-size:var(--fs-h2);margin-bottom:var(--sp-2);}
.step-why{font-size:var(--fs-sm);color:var(--c-ink-2);margin-bottom:var(--sp-5);}
.options{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));}
.option{
  position:relative;display:flex;flex-direction:column;gap:2px;justify-content:center;
  min-height:64px;padding:14px 46px 14px 16px;text-align:left;
  border:1px solid var(--c-line);border-radius:var(--radius);background:#fff;
  font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:border-color var(--t),background var(--t);
}
.option small{font-weight:400;font-size:var(--fs-sm);color:var(--c-ink-2);}
.option:hover{border-color:var(--c-primary);background:var(--c-primary-soft);}
.option[aria-pressed="true"]{border-color:var(--c-primary);background:var(--c-primary-soft);box-shadow:inset 0 0 0 1px var(--c-primary);}
.option[aria-pressed="true"]::after{
  content:"✓";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;background:var(--c-primary);color:#fff;
  font-size:13px;display:flex;align-items:center;justify-content:center;
}
.finder__nav{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-6);}
.finder__nav .btn--primary{flex:1;}
.finder-sticky{
  position:sticky;bottom:calc(var(--bottombar-h) + var(--safe-b) + 12px);z-index:20;
  background:#fff;padding-top:var(--sp-3);
}
@media (min-width:1024px){ .finder-sticky{position:static;padding-top:0;} }
.summary-line{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-6);}

/* Kompakter Schnellfinder im Hero */
.quickfinder{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:clamp(16px,3vw,24px);box-shadow:var(--shadow-2);
}
.quickfinder h2{font-size:var(--fs-h4);margin-bottom:var(--sp-1);}
.qf-field{margin-bottom:var(--sp-4);}
.qf-field>span{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--sp-2);}
.qf-options{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.qf-options button{
  min-height:44px;padding:9px 14px;border:1px solid var(--c-line);background:#fff;
  border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:600;cursor:pointer;color:var(--c-ink-2);
}
.qf-options button:hover{border-color:var(--c-primary);color:var(--c-primary);}
.qf-options button[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.qf-foot{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);}
.qf-foot .btn{width:100%;}

/* ---------- 13  FILTER ---------- */
.filterbar{display:none;}
.filter-open{display:inline-flex;}
@media (min-width:1024px){
  .filterbar{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:end;
    padding:var(--sp-3) var(--sp-4);border:1px solid var(--c-line-2);border-radius:var(--radius);background:#fff;}
  .filterbar label{margin:0 0 4px;font-size:var(--fs-sm);}
  .filterbar select{min-width:170px;width:auto;min-height:44px;}
  .filterbar .u-push{margin-left:auto;}
  .filter-open{display:none;}
}
.filter-line{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4);}
#filterSheet{left:0;right:0;bottom:0;top:auto;max-height:88vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:translateY(100%);}
#filterSheet.is-open{transform:translateY(0);}
.filter-group{margin-bottom:var(--sp-6);}
.filter-group legend{font-weight:700;font-size:var(--fs-md);margin-bottom:var(--sp-3);}

/* ---------- 14  ARTIKEL ---------- */
.article{max-width:72ch;}
.article h2{margin-top:var(--sp-10);}
.article h3{margin-top:var(--sp-8);}
.article ul,.article ol{padding-left:1.15rem;color:var(--c-ink-2);}
.article li{margin-bottom:var(--sp-2);}
.toc{background:var(--c-surface);border-radius:var(--radius);padding:var(--sp-5);}
.toc h2{font-size:var(--fs-h4);margin:0 0 var(--sp-3);}
.toc ol{margin:0;padding-left:1.15rem;}
.toc li{margin-bottom:6px;}
.byline{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);color:var(--c-ink-3);border-top:1px solid var(--c-line-2);border-bottom:1px solid var(--c-line-2);padding-block:var(--sp-3);margin-bottom:var(--sp-8);}

/* ---------- 15  STICKY-AKTION, TOAST, FOOTER ---------- */
.product-grid{display:grid;gap:var(--sp-8);}
@media (min-width:900px){
  .product-grid{grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:var(--sp-12);align-items:start;}
  .product-media{position:sticky;top:calc(var(--header-h) + 16px);}
}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-top:var(--sp-2);}
.gallery .ph{border-radius:var(--radius-sm);}

.product-sticky{
  position:fixed;left:0;right:0;z-index:70;
  bottom:calc(var(--bottombar-h) + var(--safe-b));
  display:flex;gap:var(--sp-2);align-items:center;
  padding:10px var(--sp-5);background:rgba(255,255,255,.98);
  border-top:1px solid var(--c-line);box-shadow:0 -4px 16px rgba(23,29,27,.06);
}
.product-sticky .btn--primary{flex:1;}
.product-sticky__price{font-size:var(--fs-sm);font-weight:700;white-space:nowrap;}
@media (min-width:1024px){ .product-sticky{display:none;} }

.toast{
  position:fixed;left:50%;transform:translate(-50%,12px);
  bottom:calc(var(--bottombar-h) + var(--safe-b) + 76px);z-index:120;
  max-width:min(520px,92vw);padding:12px 16px;border-radius:var(--radius);
  background:var(--c-ink);color:#fff;font-size:var(--fs-sm);box-shadow:var(--shadow-3);
  opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0);}
@media (min-width:1024px){ .toast{bottom:28px;} }

.hero{padding-block:clamp(24px,4vw,56px) var(--section-y);}
.hero__grid{display:grid;gap:var(--sp-8);align-items:start;}
.hero h1{margin-bottom:var(--sp-4);}
.hero__trust{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);color:var(--c-ink-3);margin-top:var(--sp-4);}
.hero__trust span{display:flex;gap:6px;align-items:center;}
.hero__trust svg{width:15px;height:15px;color:var(--c-primary);flex:none;}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.02fr .98fr;gap:var(--sp-12);align-items:center;}
}

.footer{background:var(--c-surface);border-top:1px solid var(--c-line-2);padding-block:var(--sp-12) var(--sp-8);margin-top:var(--section-y);}
.footer__grid{display:grid;gap:var(--sp-8);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));}
.footer h3{font-size:var(--fs-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-ink-3);margin-bottom:var(--sp-3);}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);}
.footer a{color:var(--c-ink-2);text-decoration:none;font-size:var(--fs-sm);}
.footer a:hover{color:var(--c-primary);text-decoration:underline;}
.footer__bottom{margin-top:var(--sp-10);padding-top:var(--sp-5);border-top:1px solid var(--c-line);font-size:var(--fs-xs);color:var(--c-ink-3);display:grid;gap:var(--sp-2);}
.footer__intro{margin-top:var(--sp-3);max-width:34ch;}

/* ---------- 16  FESTE LEISTEN & REDUCED MOTION ---------- */
@media (max-width:1023px){
  .footer{padding-bottom:calc(var(--bottombar-h) + var(--safe-b) + 24px);}
  body:has(.product-sticky) .footer{padding-bottom:calc(var(--bottombar-h) + var(--safe-b) + 96px);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* =============================================================
   17  STARTSEITE VERSION 3 – klarer, bildstarker Einstieg
   ============================================================= */
.home-v3 .demo-bar{display:none;}
.home-v3 .header{position:relative;background:#fff;}
.home-v3 .footer{margin-top:0;}
.home-hero{position:relative;min-height:600px;display:grid;align-items:center;overflow:hidden;}
.home-hero:not(.has-background){background:#31443f;}
.home-hero:not(.has-text-color){color:#fff;}
.home-hero__visual{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.home-hero__visual:not(.has-background){background:var(--c-surface);}
.home-hero__visual::before,.home-hero__visual::after{content:none;}
.home-hero__placeholder{position:absolute;right:24px;bottom:18px;font-size:12px;color:rgba(255,255,255,.78);background:rgba(0,0,0,.24);padding:5px 10px;border-radius:999px;}
.home-hero__shade{position:absolute;inset:0;}
.home-hero__shade:not(.has-background){background:linear-gradient(90deg,rgba(14,19,18,.82) 0%,rgba(14,19,18,.62) 38%,rgba(14,19,18,.24) 68%,rgba(14,19,18,.08) 100%);}
.home-hero__content{position:relative;z-index:1;text-align:center;padding-block:72px 58px;}
.home-hero__eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:18px;}
.home-hero__eyebrow:not(.has-font-size){font-size:12px;}
.home-hero__eyebrow:not(.has-text-color){color:#e5eee9;}
.home-hero h1{max-width:860px;margin:0 auto 18px;line-height:1.05;letter-spacing:-.035em;}
.home-hero h1:not(.has-font-size){font-size:clamp(2.25rem,5vw,4.25rem);}
.home-hero h1:not(.has-text-color){color:#fff;}
.home-hero__content>p{max-width:680px;margin:0 auto 42px;line-height:1.5;}
.home-hero__content>p:not(.has-font-size){font-size:clamp(1.05rem,2vw,1.3rem);}
.home-hero__content>p:not(.has-text-color){color:rgba(255,255,255,.9);}
.advisor-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 150px;max-width:1000px;margin-inline:auto;background:#fff;color:var(--c-ink);border-radius:14px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.2);text-align:left;}
.advisor-field{display:block;padding:8px 18px;border-right:1px solid var(--c-line-2);min-width:0;}
.advisor-field>span{display:block;font-size:12px;color:var(--c-ink-3);line-height:1.2;margin-bottom:2px;}
.advisor-field select{border:0;padding:0 28px 0 0;min-height:30px;background-color:transparent;font-size:16px;font-weight:650;color:var(--c-ink);box-shadow:none;width:100%;}
.advisor-field select:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;}
.advisor-bar__submit{border:0;border-radius:10px;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer;min-height:58px;padding:10px 16px;}
.advisor-bar__submit:hover{background:var(--c-primary-hover);}
.advisor-bar__submit svg{width:21px;height:21px;}
.home-hero__links{display:flex;justify-content:center;gap:24px;margin-top:22px;font-size:14px;}
.home-hero__links a,.home-hero__links button{color:#fff;text-decoration:underline;text-underline-offset:4px;background:none;border:0;padding:4px;cursor:pointer;font:inherit;}

.discovery:not(.has-background){background:#fff;}
.discovery__layout{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,2fr);gap:48px;align-items:center;}
.discovery__intro h2:not(.has-font-size){font-size:clamp(1.8rem,3vw,2.8rem);}
.discovery__intro p:not(.has-text-color){color:var(--c-ink-2);}
.text-link{font-weight:700;text-decoration:none;}
.discovery__rail{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px;}
.discovery-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;padding:20px;color:#fff;text-decoration:none;border-radius:3px;overflow:hidden;background:#47665d;isolation:isolate;}
.discovery-card::before,.discovery-card::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.16);}
.discovery-card::before{width:180px;height:180px;top:-55px;right:-70px;}
.discovery-card::after{width:120px;height:120px;bottom:45px;left:-55px;}
.discovery-card--two{background:#87634d}.discovery-card--three{background:#526175}.discovery-card--four{background:#7b7450}
.discovery-card:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-3);}
.discovery-card__kicker{font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;opacity:.84;}
.discovery-card strong{font-size:20px;line-height:1.2;margin-bottom:10px;}
.discovery-card>span:last-child{font-size:13px;background:#fff;color:var(--c-ink);align-self:flex-start;padding:7px 10px;border-radius:4px;}

.age-strip{padding-block:28px;border-block:1px solid var(--c-line-2);}
.age-strip:not(.has-background){background:var(--c-surface);}
.age-strip__inner{display:flex;align-items:center;gap:28px;}
.age-strip h2{margin:0;white-space:nowrap;}
.age-strip h2:not(.has-font-size){font-size:16px;}
.age-strip__links{display:flex;gap:10px;flex-wrap:wrap;}
.age-strip__links a{display:inline-flex;align-items:center;justify-content:center;min-width:68px;min-height:42px;border:1px solid var(--c-line);background:#fff;border-radius:999px;text-decoration:none;font-weight:700;color:var(--c-ink);}
.age-strip__links a:hover{border-color:var(--c-primary);color:var(--c-primary);}

.recommendations__head{display:grid;grid-template-columns:1fr minmax(300px,480px);gap:40px;align-items:end;margin-bottom:34px;}
.recommendations__head h2{margin:0}.recommendations__head>p{margin:0;}
.recommendations__head>p:not(.has-text-color){color:var(--c-ink-2);}
.editorial-start-note{max-width:840px;margin:0 0 var(--sp-6);padding:clamp(18px,2.5vw,26px);}
.editorial-start-note h3{font-size:var(--fs-h4);margin:0 0 var(--sp-2);}
.editorial-start-note p{max-width:74ch;}
.method-band{padding-block:64px;}
.method-band:not(.has-background){background:#153f39;}
.method-band:not(.has-text-color){color:#fff;}
.method-band .eyebrow:not(.has-text-color){color:#b9d4cc}
.method-band h2{max-width:620px;}
.method-band h2:not(.has-text-color){color:#fff;}
.method-band h2:not(.has-font-size){font-size:clamp(1.8rem,3vw,2.8rem);}
.method-band__grid{display:grid;grid-template-columns:1.05fr 1.4fr auto;gap:40px;align-items:center;}
.method-band__steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.method-band__steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;}
.method-band__steps li>span{width:32px;height:32px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-weight:700;}
.method-band__steps strong{display:block;margin-bottom:2px}.method-band__steps p{margin:0;color:rgba(255,255,255,.75);font-size:14px;}
.method-band .btn--primary{background:#fff;color:var(--c-primary);white-space:nowrap;}
.reminder-compact__box{border-radius:var(--radius-lg);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;}
.reminder-compact__box:not(.has-background){background:var(--c-surface);}
.reminder-compact__box h2:not(.has-font-size){font-size:var(--fs-h2)}
.reminder-compact__box p:not(.has-text-color){color:var(--c-ink-2);}
.reminder-compact__form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;}
.reminder-compact__form .meta{grid-column:1/-1;margin:0;}

@media (max-width:1023px){
  .home-hero{min-height:560px}.home-hero__content{padding-block:58px 46px;}
  .advisor-bar{grid-template-columns:repeat(3,1fr);max-width:760px;}
  .advisor-bar__submit{grid-column:1/-1;min-height:50px;}
  .discovery__layout{grid-template-columns:1fr;gap:28px}.discovery__rail{overflow-x:auto;grid-template-columns:repeat(4,220px);padding-bottom:10px;scroll-snap-type:x mandatory;}.discovery-card{scroll-snap-align:start;}
  .method-band__grid{grid-template-columns:1fr 1.2fr}.method-band__grid>.btn{grid-column:1/-1;justify-self:start;}
}
@media (max-width:767px){
  .home-hero{min-height:auto;align-items:end;}.home-hero__visual{background-position:60% center;}.home-hero__shade{background:linear-gradient(180deg,rgba(13,23,20,.12) 0%,rgba(13,23,20,.38) 34%,rgba(13,23,20,.9) 78%,rgba(13,23,20,.96) 100%);}
  .home-hero__content{text-align:left;padding-block:64px 34px;}.home-hero h1{margin-inline:0;}.home-hero h1:not(.has-font-size){font-size:clamp(2rem,10vw,3rem);}.home-hero__content>p{margin-inline:0;margin-bottom:28px;}.home-hero__content>p:not(.has-font-size){font-size:1rem;}
  .advisor-bar{display:block;padding:12px;border-radius:12px;}.advisor-field{display:none;border:0;}.advisor-field:first-child{display:block;padding:8px 10px 12px;}.advisor-field:first-child>span{font-size:13px}.advisor-field:first-child select{font-size:17px;min-height:36px}.advisor-bar__submit{width:100%;}
  .home-hero__links{justify-content:flex-start;flex-wrap:wrap;gap:10px 18px;margin-top:15px}.home-hero__placeholder{right:12px;bottom:8px;font-size:10px;}
  .discovery{padding-block:42px}.discovery__rail{margin-right:calc(var(--sp-5) * -1);grid-template-columns:repeat(4,78vw);}.discovery-card{min-height:230px;}
  .age-strip__inner{align-items:flex-start;flex-direction:column;gap:14px}.age-strip__links{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:5px;}.age-strip__links a{flex:none;}
  .recommendations__head{grid-template-columns:1fr;gap:10px}.recommendations .grid--3{grid-template-columns:1fr;}
  .method-band__grid{grid-template-columns:1fr;gap:30px}.method-band__grid>.btn{grid-column:auto;width:100%;}.method-band__steps{gap:20px;}
  .reminder-compact__box{grid-template-columns:1fr;gap:24px}.reminder-compact__form{grid-template-columns:1fr}.reminder-compact__form .meta{grid-column:auto;}
}
.product-glance{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:0 0 1.5rem;
  overflow:hidden;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background:var(--c-line);
}
.product-glance>div{display:flex;flex-direction:column;gap:.25rem;padding:1rem;background:var(--c-bg)}
.product-glance span{font-size:.75rem;color:var(--c-ink-3);text-transform:uppercase;letter-spacing:.06em}
.product-glance strong{font-size:.95rem;line-height:1.35}
.product-jump{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:0 0 2rem;padding:0 0 1rem;border-bottom:1px solid var(--c-line)}
.product-jump a{font-size:.9rem;font-weight:700}
@media(min-width:760px){.product-glance{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Phase 2B: weiter Außenrahmen und lesbarer Satzspiegel für Informationsseiten. */
.kgi-info-layout{
  font-size:clamp(1.0625rem,var(--wp--preset--font-size--info-body,1.125rem),1.125rem);
  line-height:1.6;
}
.kgi-info-layout>.wrap{
  width:min(100%,var(--wrap));
  max-width:var(--wrap);
  margin-inline:auto;
}
.kgi-info-layout>.wrap>:where(:not(.alignwide):not(.alignfull)){
  width:100%;
  max-width:var(--wp--custom--layout--info-text,52.5rem);
  margin-left:0;
  margin-right:auto;
}
.kgi-info-layout h1:not(.has-font-size){font-size:var(--wp--preset--font-size--info-h1,clamp(2.25rem,4vw,3rem))}
.kgi-info-layout h2:not(.has-font-size){font-size:var(--wp--preset--font-size--info-h2,clamp(1.5rem,2.5vw,1.75rem))}
.kgi-info-layout h3:not(.has-font-size){font-size:var(--wp--preset--font-size--info-h3,clamp(1.25rem,2vw,1.375rem))}
.kgi-info-layout h1,
.kgi-info-layout h2,
.kgi-info-layout h3{
  overflow-wrap:anywhere;
  hyphens:auto;
  text-wrap:balance;
}
.kgi-info-layout h1{line-height:1.12}
.kgi-info-layout h2{line-height:1.22;margin-top:clamp(2rem,4vw,3rem)}
.kgi-info-layout h3{line-height:1.3;margin-top:2rem}
.kgi-info-layout p,
.kgi-info-layout li{max-width:75ch}
.kgi-info-layout .lead{max-width:68ch}
.kgi-info-layout .note{max-width:var(--wp--custom--layout--info-text,52.5rem)}
.kgi-info-layout .note:not(.has-font-size),
.kgi-info-layout .step p:not(.step__num):not(.has-font-size){font-size:1em;line-height:1.6}
.kgi-info-layout>.wrap>h2:first-child,
.kgi-info-stack>.wrap>.kgi-info-section:first-child>h2:first-child,
.kgi-info-layout .step h3:first-child{margin-top:0}
.kgi-info-stack>.wrap>.kgi-info-section + .kgi-info-section{border-top:1px solid var(--c-line-2)}
.kgi-transparency-highlight{margin-top:var(--sp-6);margin-bottom:var(--sp-6)}
.kgi-transparency-highlight h2:first-child{margin-top:0}
.kgi-guide-grid{grid-template-columns:1fr}
.kgi-guide-grid .world-card{height:100%}
.kgi-guide-article{width:100%;margin-inline:auto}
.kgi-guide-article .ph__label{margin:var(--sp-3)}
@media(min-width:640px){.kgi-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.kgi-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
  .kgi-info-layout{font-size:1.0625rem}
  .kgi-info-layout h1:not(.has-font-size){font-size:2.25rem}
  .kgi-info-layout h2:not(.has-font-size){font-size:1.5rem}
  .kgi-info-layout h3:not(.has-font-size){font-size:1.25rem}
}