/* =============================================================================
   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); }
/* min-width:0 (Lastenheft #316): mog-footer.js setzt body{display:flex}, damit wird jede
   .section (und .hero) zum direkten Flex-Item ohne die normale min-width:auto-Deckelung durch
   den Viewport. Ein NBSP-/Non-Breaking-Hyphen-Lauf in einer Ueberschrift (z. B. "loesung"-
   Section: "Was bedeutet Bewegtbild-Strategie"?") zaehlt sonst als Mindestbreite der GANZEN
   Section und verbreitert den gesamten Viewport (live gemessen: 385px statt 360px, exakt der
   Flotten-Befund silberstern/tf002). Betrifft alle silberstern-Funnel mit diesem Kit, ist hier
   nur in tf002 tatsaechlich getriggert (bislang kürzere/breakbare Ueberschriften anderswo). */
.section,.hero{ min-width:0; }
.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 ----------------------------------------------------------- */
/* overflow-wrap:break-word auf h1/h2/h3 (Lastenheft #316): Ueberschriften in diesem Kit nutzen
   NBSP/Non-Breaking-Hyphen zur Waisen-Vermeidung (Hurenkind-Fix-Muster). Passt der so entstehende
   unbrechbare Lauf bei schmalem Viewport nicht in die verfuegbare Breite, bricht der Browser nur
   dann (und nur dort) mitten im Lauf um, statt die ganze Seite zu verbreitern. Auf breiteren
   Viewports (Zielgruppe der NBSP-Regel) bleibt das Verhalten unveraendert. */
h1,.h1{ font-family:var(--font-head); font-weight:var(--fw-light); overflow-wrap:break-word;
  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); overflow-wrap:break-word;
  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); }
/* Die Akzent-Eyebrow steht auf dem dunklen Standard-Grund des Kits. --c-accent (#72275d) ist eine
   FLAECHEN-Farbe (CTA-Hintergrund) und erreicht als Text auf --c-bg nur 1,98:1 — WCAG AA verlangt
   4,5:1 fuer kleinen Text. Gemeldet an BAF001 (Berni 2026-08-10, "kaum zu erkennen"), betrifft aber
   genauso contentpool und LMF001: beide nutzen .eyebrow--accent. Fix gehoert deshalb ins Kit, nicht
   in eine einzelne Seite. --c-accent-on-dark liegt bei 5,5:1.
   GEGENRICHTUNG BEACHTEN: auf Weiss erreicht --c-accent-on-dark nur 3,49:1, --c-accent dagegen
   9,71:1. In hellen Sektionen bleibt deshalb der Originalton stehen. */
.eyebrow--accent{ color:var(--c-accent-on-dark); }
.section--light .eyebrow--accent{ color:var(--c-accent); }
h2,.h2{ font-family:var(--font-head); font-weight:var(--fw-light); overflow-wrap:break-word;
  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.sticky-cta-active{ padding-bottom:96px; } }
/* Bewusst NICHT body.has-sticky-cta (statisch, immer an): reservierte der Sticky-Leiste
   IMMER 96px, auch wenn die Leiste per .is-visible-Logik gerade ausgeblendet ist —
   z.B. ganz am Seitenende, nach dem End-CTA. Ergebnis: eine leere Luecke zwischen Footer
   und echtem Bildschirmrand in exakt der Farbe des body-Hintergrunds (Berni 2026-08-20,
   live auf dem iPhone gefunden). body.sticky-cta-active wird jetzt vom selben JS gesetzt,
   das auch .is-visible auf .sticky-cta togglet — Leiste und reservierter Platz koennen
   dadurch nie mehr auseinanderlaufen. has-sticky-cta bleibt als statisches Markup-Attribut
   stehen (wird von keiner Regel mehr gelesen), Umbenennen haette 4 Funnel-HTML-Dateien
   angefasst fuer keinen Gewinn. */

/* ---- 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, .field textarea{ 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 textarea{ resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--c-accent); }
.field input:user-invalid, .field textarea: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; }
.video--facade > wistia-player{ position:absolute; inset:0; width:100%; height:100%; 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 */
  /* min-width:0 auf alle vier Grid-Items, NUR hier im Einspalten-Modus (Lastenheft #316):
     1fr-Spuren haben per Default eine implizite Mindestbreite von minmax(auto,1fr) = das
     Min-Content der Items, NICHT 0 — bei .hero__h1 zaehlte dadurch selbst ohne NBSP der Text
     als Mindestbreite der ganzen Spalte und sprengte bei 360px Viewport den einspaltigen
     Mobil-Grid (live gemessen: erst mit min-width:0 auf allen vier Items ging der Rest-
     Ueberlauf von 366px auf exakt 360px zurueck). BEWUSST nur in dieser Media Query: als
     Basis-Regel (auch Desktop) verschob min-width:0 die 1.05fr/1fr-Aufteilung genug, dass die
     zweizeilige Headline bei 1200px ploetzlich mitten im Wort brach ("Unternehmensauft|ritt"),
     obwohl sie vorher (und mit dieser Media-Query-Loesung wieder) sauber nach "Deinen
     Unternehmensauftritt" umbricht — Desktop blieb damit unangetastet. */
  .hero__h1,.hero__lead,.hero__media,.hero__cta{ min-width:0; }
  .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; }
}

/* ===================== Hero: Mobil + Tablet zentriert ====================== */
/* Agentur-Standard (Berni 2026-08-16, Lastenheft #294): Auf Mobil UND Tablet ist der
   komplette Hero zentriert — Text, Bild, Button und Sub-Text. Gestapelt wirkt links
   ausgerichteter Inhalt neben zentriertem Bild wie ein Layoutfehler; zentriert fuehrt
   alles in einer Spalte zum CTA. Anker ist `[data-lp-section="hero"]`
   (MOG-Sektions-Standard), NICHT eine Kit-Klasse — so greift die Regel auch bei
   funnel-eigenen Hero-Varianten. Desktop bleibt unangetastet. */
@media (max-width:1024px){
  [data-lp-section="hero"]{ text-align:center; }
  [data-lp-section="hero"] .cta-row,
  [data-lp-section="hero"] .hero__cta{ justify-self:center; align-items:center; justify-content:center; }
  [data-lp-section="hero"] .btn__sub{ text-align:center; }
  [data-lp-section="hero"] img{ margin-inline:auto; }
  [data-lp-section="hero"] ul,
  [data-lp-section="hero"] ol{ text-align:center; list-style-position:inside; padding-left:0; }
}