/* =============================================================================
   silberstern TV — Funnel-CI-Kit · components.css
   -----------------------------------------------------------------------------
   Geteilte Bausteine für ALLE silberstern-Funnel. Baut ausschließlich auf
   tokens.css (immer VOR dieser Datei laden). Dark-first, mobile-first,
   conversion-orientiert. Akzent (#72275d) NUR an primärem CTA + Quiz-Selected.
   Stand: 2026-07-13
   ============================================================================= */

*,*::before,*::after{ box-sizing:border-box; }

/* ---- Layout --------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--elev{ background:var(--c-bg-elev); }
.section--light{ background:var(--c-light-bg); color:var(--c-light-text); }
.section--light h1,.section--light h2,.section--light h3{ color:var(--c-light-heading); }

/* ---- Typografie ----------------------------------------------------------- */
h1,.h1{ font-family:var(--font-head); font-weight:var(--fw-light);
  font-size:var(--fs-h1); line-height:var(--lh-tight); color:var(--c-heading); margin:0 0 var(--sp-4); }
h3,.h3{ font-family:var(--font-head); font-weight:var(--fw-light);
  font-size:var(--fs-h3); line-height:var(--lh-head); color:var(--c-heading); margin:0 0 var(--sp-3); }
/* Section-Headline: dezenter Trebuc-Eyebrow (CI) + große Avenir-Headline */
.eyebrow{ display:inline-block; font-family:var(--font-eyebrow); font-weight:var(--fw-eyebrow);
  font-size:var(--fs-small); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--c-text-muted); margin:0 0 var(--sp-3); }
.eyebrow--accent{ color:var(--c-accent); }
h2,.h2{ font-family:var(--font-head); font-weight:var(--fw-light);
  font-size:var(--fs-h2); line-height:var(--lh-head); color:var(--c-heading); margin:0 0 var(--sp-4); }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--c-text-muted); margin:0 0 var(--sp-5); max-width:60ch; }
.accent-word{ font-family:var(--font-accent); color:var(--c-accent); }
strong,b{ font-weight:var(--fw-light); color:var(--c-white); } /* kein synth. Bold auf Avenir */

/* ---- Buttons -------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-body); font-size:1.1875rem; line-height:1; text-decoration:none;
  padding:var(--sp-4) var(--sp-6); border-radius:var(--r-pill); border:2px solid transparent;
  cursor:pointer; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
  background var(--dur) var(--ease); min-height:var(--tap-min); }
.btn__sub{ display:block; font-size:var(--fs-caption); color:var(--c-text-muted);
  text-align:center; margin-top:var(--sp-2); letter-spacing:.02em; }
/* Primär — der EINZIGE Akzent-Träger */
.btn--primary{ background:var(--c-accent); color:var(--c-white); box-shadow:var(--sh-cta); }
.btn--primary:hover{ background:var(--c-accent-hover); transform:translateY(-2px);
  box-shadow:0 0 46px var(--c-accent-glow),0 14px 30px rgba(0,0,0,.5); }
.btn--primary:active{ transform:translateY(0); }
/* Ghost — sekundär, kein Akzent */
.btn--ghost{ background:transparent; color:var(--c-white); border-color:var(--c-border-strong); }
.btn--ghost:hover{ border-color:var(--c-white); }
.btn--block{ display:flex; width:100%; }

/* ---- Sticky-Mobile-CTA ---------------------------------------------------- */
.sticky-cta{ position:fixed; inset:auto 0 0 0; z-index:var(--z-sticky-cta);
  padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(13,15,17,0) 0%, var(--c-bg) 38%);
  display:none; }
.sticky-cta .btn{ width:100%; }
@media (max-width:768px){ .sticky-cta{ display:block; } body.has-sticky-cta{ padding-bottom:96px; } }

/* ---- Trust / Social Proof ------------------------------------------------- */
.trust{ border-top:1px solid var(--c-border); padding-top:var(--sp-4); }
.trust__logos{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem); align-items:center; justify-content:center;
  opacity:.9; filter:grayscale(1) brightness(1.7); }
.trust__logos img{ height:44px; width:auto; }
@media (max-width:768px){ .trust__logos img{ height:34px; } }
.badges{ display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:center; margin-top:var(--sp-3); }
.badge{ font-family:var(--font-eyebrow); font-weight:var(--fw-eyebrow); font-size:var(--fs-caption);
  letter-spacing:.06em; text-transform:uppercase; color:#c9b3c4;
  background:var(--c-accent-soft); border:1px solid rgba(114,39,93,.4);
  border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); }

/* ---- Cards ---------------------------------------------------------------- */
.card{ background:rgba(255,255,255,.045); border:1px solid var(--c-border);
  border-radius:var(--r-card); padding:var(--sp-5); box-shadow:var(--sh-card); }

/* ---- Video (16:9 responsive) ---------------------------------------------- */
.video{ position:relative; aspect-ratio:16/9; width:100%; border-radius:var(--r-card);
  overflow:hidden; background:#000; box-shadow:var(--sh-card); }
.video>iframe,.video>video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- Quiz ----------------------------------------------------------------- */
.quiz{ max-width:640px; margin-inline:auto; }
.quiz__panel{ background:var(--c-bg-panel); border:1px solid var(--c-border);
  border-radius:var(--r-card); padding:clamp(1.25rem,4vw,2.5rem); box-shadow:var(--sh-lift); }
.quiz__progress-label{ font-family:var(--font-eyebrow); font-weight:var(--fw-eyebrow);
  font-size:var(--fs-caption); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--c-accent); text-align:center; display:block; margin-bottom:var(--sp-3); }
.quiz__progress{ height:6px; border-radius:10px; background:var(--c-primary-tint); overflow:hidden; }
.quiz__progress-bar{ height:100%; border-radius:10px;
  background:linear-gradient(90deg,var(--c-primary),var(--c-accent));
  transition:width .3s var(--ease); }
.quiz__question{ font-family:var(--font-head); font-weight:var(--fw-light); font-size:var(--fs-h3);
  line-height:var(--lh-head); color:var(--c-heading); text-align:center; margin:var(--sp-6) 0 var(--sp-5); }
.quiz__options{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.quiz__opt{ display:flex; align-items:center; gap:var(--sp-3); min-height:var(--tap-min);
  padding:var(--sp-4) var(--sp-4); border-radius:var(--r-card);
  background:rgba(255,255,255,.045); border:1.5px solid var(--c-border);
  color:var(--c-text); font-size:1.0625rem; text-align:left; cursor:pointer; width:100%;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
  transform var(--dur) var(--ease); }
.quiz__opt:hover{ border-color:var(--c-border-strong); transform:translateY(-1px); }
.quiz__opt:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
.quiz__opt .tick{ flex:0 0 auto; width:22px; height:22px; border-radius:var(--r-round);
  border:1.5px solid var(--c-border); display:grid; place-items:center;
  font-size:12px; color:transparent; transition:var(--dur) var(--ease); }
/* Selected — EINZIGE Akzent-Verwendung im Quiz */
.quiz__opt[aria-checked="true"],.quiz__opt.is-selected{
  background:var(--c-accent-soft); border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(114,39,93,.16); }
.quiz__opt[aria-checked="true"] .tick,.quiz__opt.is-selected .tick{
  background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.quiz__foot{ text-align:center; color:var(--c-text-muted); font-size:var(--fs-caption);
  letter-spacing:.02em; margin-top:var(--sp-5); }

/* ---- Formular (Lead-Capture Frage 4) -------------------------------------- */
.field{ margin-bottom:var(--sp-4); }
.field label{ display:block; font-size:var(--fs-small); color:var(--c-text-muted); margin-bottom:var(--sp-2); }
.field input{ width:100%; min-height:var(--tap-min); padding:var(--sp-3) var(--sp-4);
  background:rgba(255,255,255,.04); border:1.5px solid var(--c-border); border-radius:var(--r-input);
  color:var(--c-white); font-family:var(--font-body); font-size:1.0625rem; }
.field input::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus{ outline:none; border-color:var(--c-accent); }
.field input:user-invalid{ border-color:#c0563f; }
.consent{ display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fs-small);
  color:var(--c-text-muted); margin:var(--sp-4) 0; }
.consent input{ margin-top:3px; width:18px; height:18px; accent-color:var(--c-accent); flex:0 0 auto; }

/* ---- FAQ (details/summary) ------------------------------------------------ */
.faq__item{ border-bottom:1px solid var(--c-border); }
.faq__item summary{ cursor:pointer; list-style:none; padding:var(--sp-4) 0;
  font-size:var(--fs-lead); color:var(--c-white); display:flex; justify-content:space-between; gap:var(--sp-4); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; color:var(--c-accent); font-size:1.4em; line-height:1; }
.faq__item[open] summary::after{ content:"–"; }
.faq__item p{ margin:0 0 var(--sp-4); color:var(--c-text-muted); }

/* ---- Header / Footer ------------------------------------------------------ */
.site-header{ display:flex; justify-content:center; padding:var(--sp-3) var(--gutter) var(--sp-2); }
.site-header img{ height:34px; width:auto; }
.footer{ background:var(--c-black); color:var(--c-text-muted); font-size:var(--fs-small);
  padding:var(--sp-6) var(--gutter); text-align:center; }
.footer a{ color:var(--c-text-muted); text-decoration:underline; text-underline-offset:2px; }
.footer a:hover{ color:var(--c-white); }
.footer__legal{ display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-3); }

/* ---- Utilities ------------------------------------------------------------ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---- Prozess-Steps (Ablauf / Nächste Schritte) ---------------------------- */
.steps{ display:flex; gap:var(--sp-5); flex-wrap:wrap; justify-content:center; margin-top:var(--sp-6); }
.step{ flex:1 1 220px; max-width:260px; text-align:center; }
.step__num{ width:54px; height:54px; border-radius:var(--r-round); background:var(--c-primary); color:#fff;
  display:grid; place-items:center; font-family:var(--font-eyebrow); font-weight:var(--fw-eyebrow);
  font-size:1.375rem; margin:0 auto var(--sp-4); }
.step h3{ font-size:var(--fs-lead); margin-bottom:var(--sp-2); }
.step p{ color:var(--c-text-muted); font-size:var(--fs-body); }

/* ---- Pains / Benefits Listen ---------------------------------------------- */
.pains,.benefits{ list-style:none; max-width:720px; margin:var(--sp-5) auto 0; padding:0; text-align:left; }
.pains li{ position:relative; padding:var(--sp-3) 0 var(--sp-3) var(--sp-6);
  border-bottom:1px solid var(--c-border); font-size:var(--fs-lead); }
.pains li:last-child{ border-bottom:0; }
.pains li::before{ content:""; position:absolute; left:6px; top:1.15em; width:9px; height:9px;
  border-radius:var(--r-round); background:var(--c-accent); }
.benefits li{ position:relative; padding:var(--sp-2) 0 var(--sp-2) var(--sp-6); font-size:var(--fs-lead); }
.benefits li::before{ content:"✓"; position:absolute; left:0; top:.35em; color:var(--c-accent); font-weight:700; }

/* ---- Testimonials --------------------------------------------------------- */
.quotes{ display:flex; gap:var(--sp-4); flex-wrap:wrap; justify-content:center; margin-top:var(--sp-6); }
.quote{ flex:1 1 240px; max-width:280px; background:var(--c-light-bg); color:var(--c-light-text);
  border-radius:var(--r-card); padding:var(--sp-5); text-align:left; box-shadow:var(--sh-card); }
.quote__name{ font-family:var(--font-eyebrow); font-weight:var(--fw-eyebrow); font-size:1.0625rem; }
.quote__role{ font-size:var(--fs-small); color:#666; margin-bottom:var(--sp-3); }
.quote__text{ font-style:italic; font-size:var(--fs-body); line-height:1.55; }

/* ---- About-Grid ----------------------------------------------------------- */
.about{ display:flex; gap:var(--sp-6); align-items:center; flex-wrap:wrap; justify-content:center; margin-top:var(--sp-5); }
.about__media{ flex:0 0 auto; width:280px; max-width:80%; aspect-ratio:3/4; border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--sh-card); background:#000; }
.about__media img,.about__media video{ width:100%; height:100%; object-fit:cover; }
.about__txt{ flex:1 1 380px; }
.about__txt p{ color:var(--c-text-muted); margin-bottom:var(--sp-4); }

/* ---- Prose / CTA-Row ------------------------------------------------------ */
.cta-row{ text-align:center; margin-top:var(--sp-6); }
.section--center{ text-align:center; }
.section--center .lead{ margin-left:auto; margin-right:auto; }
.prose p{ margin-bottom:var(--sp-4); }
.prose p:last-child{ margin-bottom:0; }

/* ---- Mobile --------------------------------------------------------------- */
@media (max-width:768px){
  .quiz__options{ grid-template-columns:1fr; }   /* Antworten stapeln, volle Tap-Breite */
  .btn{ width:100%; }
  .steps{ flex-direction:column; align-items:center; }
  .step{ max-width:100%; }
  .quote{ max-width:100%; }
  .about__media{ width:100%; max-width:320px; }
}

/* ---- Reduced Motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---- Video-Facade (Vimeo/Stream: Poster + Play, iframe erst bei Klick = besserer LCP) ---- */
.video--facade{ background-size:cover; background-position:center; cursor:pointer; }
.video--facade::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.30);
  transition:background var(--dur) var(--ease); }
.video--facade:hover::after{ background:rgba(0,0,0,.12); }
.video__play{ position:absolute; inset:0; margin:auto; width:76px; height:76px; border-radius:var(--r-round);
  background:var(--c-accent); box-shadow:var(--sh-cta); display:grid; place-items:center; z-index:2;
  transition:transform var(--dur) var(--ease); }
.video--facade:hover .video__play{ transform:scale(1.06); }
.video__play::before{ content:""; border-style:solid; border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent #fff; margin-left:5px; }
.video--facade > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }

/* ---- Hero: CTA above the fold ---- (weniger Top-Padding; CTA steht VOR dem Video im Markup) */
.hero{ padding-block: clamp(0.25rem, 1.5vw, 1rem) var(--section-y); }
.hero .video--facade{ margin-top: var(--sp-6); }
@media (max-width:768px){
  .hero{ padding-block: var(--sp-5) var(--sp-7); }
  .hero .h1{ font-size: clamp(1.6rem, 7.5vw, 2.1rem); }   /* kompaktere Headline mobil -> CTA above fold */
  .hero .lead{ font-size: var(--fs-body); }
}

/* ---- Hero 2-spaltig (grid-areas): links H1/Lead/CTA, rechts Video. Mobile-Stack: Video VOR CTA ---- */
.hero__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:0 clamp(1.5rem,4vw,3.5rem); align-items:start;
  grid-template-areas: "h1 media" "lead media" "cta media"; }
.hero__h1{ grid-area:h1; text-align:left; align-self:end; }
.hero__lead{ grid-area:lead; text-align:left; margin-left:0; }
.hero__media{ grid-area:media; align-self:center; }
.hero__cta{ grid-area:cta; text-align:left; align-self:start; margin-top:var(--sp-4); }
.hero__cta .btn__sub{ text-align:left; }
.hero__media .video--facade{ width:100%; max-width:none; margin:0; }
@media (max-width:768px){
  .hero__grid{ grid-template-columns:1fr; gap:var(--sp-4);
    grid-template-areas: "h1" "lead" "media" "cta"; }   /* Mobile: H1 → Lead → Video → CTA */
  .hero__h1,.hero__lead,.hero__cta,.hero__cta .btn__sub{ text-align:center; }
  .hero__lead{ margin-inline:auto; }
  .hero__cta{ margin-top:var(--sp-5); }
}
/* Sticky-CTA erst zeigen, wenn der Hero-CTA aus dem Blick ist (keine Krücke fuers Above-the-fold) */
.sticky-cta{ transform:translateY(130%); transition:transform .3s var(--ease); }
.sticky-cta.is-visible{ transform:none; }

/* ---- Full-Viewport-Hero: fuellt jeden Screen (100svh), Inhalt vertikal zentriert, Trust-Bar inklusive ---- */
.hero--full{ padding-block:0; }
.hero__inner{ min-height:100svh; display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(1rem, 3.5vh, 2.75rem); padding-block:clamp(0.75rem,2.5vh,1.75rem); }
.hero__logo{ flex:0 0 auto; align-self:center; }
.hero__logo img{ height:34px; width:auto; }
.hero__inner > .hero__grid{ flex:0 1 auto; }
.hero__inner > .trust{ flex:0 0 auto; margin-top:0; }
.trust__logos img{ height:54px; }   /* groessere Trust-Logos */
@media (max-width:768px){
  /* Mobile: Stack eng genug halten, damit Hero + Trust-Bar in 100svh passen (auch iPhone SE) */
  .hero__inner{ gap:clamp(0.35rem,1.3vh,0.85rem); padding-block:var(--sp-2); }
  .hero__logo img{ height:30px; }
  .hero__grid{ gap:var(--sp-3); }
  .hero__cta{ margin-top:var(--sp-3); }
  .hero__h1{ line-height:1.1; margin-bottom:0; }
  .hero__lead{ margin-bottom:0; }
  .hero__media .video--facade{ max-width:82%; margin-inline:auto; }
  .trust{ padding-top:var(--sp-3); }
  .trust__logos{ flex-wrap:nowrap; justify-content:space-between; gap:var(--sp-2); }
  .trust__logos img{ height:28px; max-width:17%; object-fit:contain; }
}