/* ══════════════════════════════════════════════════════════════════════════
   HERO-BAUSTEINE DER UNTERSEITEN
   ══════════════════════════════════════════════════════════════════════════
   Gemeinsames Fundament der neun freigegebenen Hero-Entwuerfe
   (website-doku/hero-entwuerfe/FREIGEGEBEN.md). In allen neun Entwuerfen war
   dieser Block zeichengleich — er gehoert deshalb genau einmal hierher und
   nicht neunmal in die Seiten-Stilbloecke.

   Was hier NICHT hineingehoert: alles, was eine einzelne Seite unverwechselbar
   macht (Motiv, Signatur-Animation, Hoehe, mobiler Auftritt). Das bleibt im
   <style>-Block der jeweiligen Seite.

   css/hero.css bleibt davon unberuehrt — dort liegt der Startseiten-Hero
   (.hero__*), der eine andere Bauart hat.
   Angelegt: 21.08.2026 beim Bau von /klimaneutralitaet/ (Seite 3 von 13).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Gemeinsame Hero-Bausteine (alle Entwuerfe) ───────────────────────────── */
.h-kicker{margin:0 0 var(--space-4);font-family:var(--font-heading);font-weight:700;
  font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-lime);
  max-width:46ch;line-height:1.5}
.h-sub{margin:var(--space-5) 0 0;max-width:52ch;font-size:1.0625rem;line-height:1.6}
/* ── Outcome-Bullets ────────────────────────────────────────────────────────
   Das Haekchen sitzt in einem eigenen Feld, und die drei Felder laufen durch
   die Marken-Rampe: Teal → Gruen → Lime. Das ist derselbe Verlauf wie die
   4-px-Hairline am Hero-Fuss, nur in Einzelschritten — die CI sagt „Blau nach
   Gruen", die Bullets buchstabieren sie. Kein Zufallsdekor.
   Beim Laden faehrt jedes Feld einzeln auf (0,45 s Versatz), danach steht es. */
.h-list{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;
  flex-direction:column;gap:.7rem;font-size:.97rem;line-height:1.45}
.h-list li{display:flex;gap:.75rem;align-items:flex-start;min-width:0;
  overflow-wrap:break-word;hyphens:auto}
.h-list li > span{padding-top:.12rem}
.h-list .mark{flex:none;width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;
  background:var(--bullet-farbe,var(--ac-green));
  box-shadow:0 2px 0 var(--bullet-schatten,var(--ac-green-700));
  transform:scale(.4) rotate(-12deg);opacity:0;
  animation:hMark .5s var(--ease-out) forwards}
/* Kundenregel UE-05 (Volker, 05.09.2026): "Erst-Eindruck zu bunt. In der Regel
   liegt die Loesung in Reduktion der Farbmuster. Schrift Weiss/Schwarz,
   Hervorhebung Gelb (Ueberschrift + CTA), Strukturpunkte Blau, Gruen weglassen."
   Die drei Haken trugen vorher Tuerkis, Gruen und Gelbgruen — drei Farben auf
   engstem Raum, direkt neben dem gelben Signal-Knopf.
   Jetzt einheitlich Tuerkis-hell: die einzige blaue CI-Farbe, die auf dunklem
   Grund traegt (Haken 4,80:1, Kachel 5,15:1; Petrol kaeme auf 3,03:1,
   Kobalt auf 2,58:1 — beide zu schwach). Gelb bleibt allein dem CTA. */
.h-list li:nth-child(1) .mark{--bullet-farbe:var(--ac-teal);--bullet-schatten:#12676e;animation-delay:.42s}
.h-list li:nth-child(2) .mark{--bullet-farbe:var(--ac-teal);--bullet-schatten:#12676e;animation-delay:.56s}
.h-list li:nth-child(3) .mark{--bullet-farbe:var(--ac-teal);--bullet-schatten:#12676e;animation-delay:.70s}
.h-list .mark svg{width:15px;height:15px;stroke:var(--ac-black);stroke-width:3.4}
@keyframes hMark{to{transform:none;opacity:1}}

/* Der CTA hebt sich beim Ueberfahren und traegt einen einmaligen Lichtstreif,
   sobald der Hero steht — genug, um ihn als das eine Ziel zu markieren. */
/* overflow:clip statt hidden — der Unterschied ist hier nicht kosmetisch:
   `hidden` macht den Knopf zu einer scrollbaren Box, und der Lichtstreif, der
   rechts aus ihm herauslaeuft, zaehlt dadurch in scrollWidth. Das Mobil-Gate
   liest das als „Text abgeschnitten, +244 px rechts" (21.08.2026,
   /klimaneutralitaet/). `clip` erzeugt keine Scroll-Box: gleiche Optik,
   kein Phantom-Overflow. */
.hero-x .btn-accent{position:relative;overflow:hidden;overflow:clip;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.hero-x .btn-accent:hover,.hero-x .btn-accent:focus-visible{transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(116,185,89,.34)}
.hero-x .btn-accent::after{content:"";position:absolute;top:0;bottom:0;width:38%;
  left:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:hGlanz 4.5s ease-in-out 1.6s 2}
/* Der Lichtstreif bleibt INNERHALB des Knopfes und blendet an den Enden aus,
   statt links hinein- und rechts hinauszulaufen.
   Grund (gemessen 21.08.2026 auf /klimaneutralitaet/): Ein Kind, das rechts
   oder unten aus seinem Elternteil ragt, zaehlt in dessen scrollWidth und
   scrollHeight — auch bei overflow:hidden UND bei overflow:clip. Das
   Mobil-Gate liest genau diese Differenz und meldete den Knopf als
   „Text abgeschnitten, +244 px rechts, +49 px unten". Weder die Umstellung
   auf transform noch clip haben daran etwas geaendert; nur der Verzicht auf
   den Ueberstand selbst. Die Drehung ist entfallen — die Schraege steckt
   ohnehin im Verlauf (100deg), die Rotation erzeugte nur den vertikalen
   Ueberstand. Optisch derselbe Wischer. */
@keyframes hGlanz{
  0%{transform:translateX(0);opacity:0}
  14%{opacity:1}
  26%,100%{transform:translateX(163%);opacity:0}}
.h-cta{margin:var(--space-6) 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.h-note{margin:0;font-size:var(--fs-body-sm)}
.h-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--space-5) 0 0;padding:0}
.h-chips li{font-size:.82rem;line-height:1.3;padding:.42rem .8rem;border-radius:999px}

/* Auf dunklem Grund */
.is-dark .h-sub{color:var(--text-on-dark);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.is-dark .h-note{color:var(--text-on-dark-muted)}
.is-dark .h-chips li{background:rgba(255,255,255,.08);border:1px solid var(--border-on-dark);
  color:var(--text-on-dark);backdrop-filter:blur(3px)}
.is-dark .h-list{color:var(--text-on-dark)}

/* Auf hellem Grund */
.is-light .h-kicker{color:var(--ac-petrol)}
.is-light .h-sub{color:var(--text-primary)}
.is-light .h-note{color:var(--text-muted-aa)}
.is-light .h-chips li{background:var(--ac-gray-50);border:1px solid var(--border-subtle);
  color:var(--text-primary)}
.is-light .h-list{color:var(--text-primary)}
.is-light .h-list svg{stroke:var(--ac-green-700)}

/* Kein Element sprengt den Viewport (Gate G14) */
.hero-x *{min-width:0}

/* Entry-Staffelung — nur opacity/transform, Inhalt steht im Quelltext (G11) */
@keyframes hRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-x .h-kicker,.hero-x h1,.hero-x .h-sub,.hero-x .h-list,.hero-x .h-cta,
.hero-x .h-chips,.hero-x .h-proof{opacity:0;animation:hRise .7s var(--ease-out) forwards}
.hero-x h1{animation-delay:.08s}.hero-x .h-sub{animation-delay:.16s}
.hero-x .h-list{animation-delay:.24s}.hero-x .h-cta{animation-delay:.32s}
.hero-x .h-chips,.hero-x .h-proof{animation-delay:.40s}

/* Hero-Anschluss + Citation-Capsule (GEO, Gate G16) */
.hero-follow{padding-block:0 clamp(3rem,6vw,4.5rem)}
.hero-follow.on-dark{background:var(--surface-dark);color:var(--text-on-dark)}
/* Kundenregel LZ-01 (Volker, 22.09.2026): unter dem bunten Strich am Hero-Ende
   steht eine Leerzeile, bevor der erste Satz beginnt. Vorher lag der Text mit
   0 px direkt auf der Linie. 32 px = eine Zeile Fliesstext (30,4 px). */
.hero-follow.on-dark{padding-top:var(--space-6)}
.hero-follow.on-dark p{color:var(--text-on-dark)}
.hero-follow.on-light{background:var(--surface-page);padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,4.5rem)}
.hero-follow p{font-size:var(--fs-body-lg);max-width:76ch}
.capsule-band{background:var(--surface-subtle);border-block:1px solid var(--border-subtle)}
.capsule-band .container{padding-block:clamp(1.75rem,4vw,2.5rem)}
.capsule-band p{margin:0;max-width:90ch;color:var(--text-primary)}
.capsule-band .quelle{display:block;margin-top:.6rem;font-size:.85rem;color:var(--text-muted-aa)}

/* ── Kopfzeile auf HELLEM Hero ──────────────────────────────────────────────
   style.css faerbt die Navigation mit --text-on-dark-muted (weiss, 66 %) —
   auf einem hellen Hero ist sie damit unsichtbar. Gefunden im Render-Check
   am 17.08.2026: auf „Über uns · Die Gründer" und „Kontakt · Drei Wege" war
   nur das Logo zu sehen. Wer einen hellen Hero baut, muss den Kopf mitdrehen:
   Schriftfarben auf dunkel UND die dunkle Logo-Datei (apollo-logo.png). */
.site-header--hell .nav > a,
.site-header--hell .nav-trigger{color:var(--text-primary)}
.site-header--hell .nav > a:hover,
.site-header--hell .nav-trigger:hover,
.site-header--hell .nav > a[aria-current="page"]{color:var(--text-heading)}
/* Der Nav-CTA ist site-weit ein transparenter Textlink in Weiss (style.css:
   `.nav > a` ueberschreibt den Button-Hintergrund). Auf Dunkel traegt das;
   auf Hell ist er unsichtbar. Hier wird er zum echten Button —
   Weiss auf #00699d = 5,99:1 (tokens.css). */
.site-header--hell .nav-cta{background:var(--btn-primary-bg);color:var(--btn-primary-text);
  padding:.5rem 1.05rem;border-radius:var(--radius-pill);min-height:44px}
.site-header--hell .nav-cta:hover{background:var(--btn-primary-bg-hover);
  color:var(--btn-primary-text)}
.site-header--hell .burger span{background:var(--text-heading)}

/* ── Mobile Typo-Skala (hero-bauen, norm.md G13) ────────────────────────────
   Gemessen mit mobile-check.py am 17.08.2026: Kicker lagen bei 13 px, die
   Trust-Chips bei 13,1 px. Unter 16 px ist Fliesstext auf 390 px ein Gate-
   Fehler, nicht Geschmack. Der Microproof darf bei 14 px bleiben (Norm), wird
   hier aber mitgezogen, damit das Gate sauber durchlaeuft. Breakpoint 900
   statt 767: mobile-check.py misst auch bei 768 px, und die Varianten-Media-
   Queries setzen dort ohnehin schon auf das Mobil-Layout um. */
@media (max-width:900px){
  .hero-x .h-kicker{font-size:1rem;letter-spacing:.10em;line-height:1.4}
  .hero-x .h-sub{font-size:1.0625rem}
  .hero-x .h-list{font-size:1rem}
  .hero-x .h-note{font-size:1rem}
  .hero-x .h-proof{font-size:1rem}
  .hero-x .h-chips li{font-size:1rem;padding:.5rem .9rem}
  .hero-x .btn{font-size:1rem;min-height:48px}
  /* Falz-Budget 390x844: Blickfang, Nutzen, CTA UND Trust muessen ohne
     Scrollen sichtbar sein. Auf 844 px kostet der Desktop-Rhythmus zu viel —
     die Abstaende zwischen den Slots werden mobil enger gefasst. Gemessen:
     das Trust-Element lag sonst 16 bis 130 px unter der Falz. */
  .hero-x .h-sub{margin-top:var(--space-4)}
  .hero-x .h-list{margin-top:var(--space-5);gap:.45rem}
  .hero-x .h-cta{margin-top:var(--space-5);gap:.5rem}
  .hero-x .h-chips{margin-top:var(--space-4);gap:.4rem}
  .hero-x .h-proof{margin-top:var(--space-3)}
  /* Dieselbe 16-px-Untergrenze fuer die variantenspezifischen Kleintexte
     (Rang-Notiz, Reifegrad-Notiz, Kennzahl-Kacheln, Themenfelder, Jahresleiste).
     Sonst rutschen sie einzeln durch das Gate. */
  .hero-x .hx-rang-note,.hero-x .hx-reife-note,.hero-x .hx-auch,
  .hero-x .hx-kacheln li,.hero-x .hx-zahlen li,.hero-x .hx-felder li,
  .hero-x .hx-jahre li,.hero-x .hx-recht li,.hero-x .hx-normchips li,
  .hero-x .hx-standards li,.hero-x .hx-siegel-zeile,.hero-x .hx-kreise-note,
  .hero-x .hx-karte figcaption,.hero-x .hx-gesichter-note,.hero-x .hx-satz,
  .hero-x .hx-stimme figcaption .wer,.hero-x .hx-weitere span,
  .hero-x .hx-zahlen li,.hero-x .hx-wer,
  .hero-x .hx-schwelle span,.hero-x .hx-zitat figcaption,
  .hero-x .hx-wege b,.hero-x .hx-siegel li{font-size:1rem;line-height:1.4}
  .hero-x .hx-rang li,.hero-x .hx-reife li{font-size:.9rem}
}

@media (prefers-reduced-motion:reduce){
  .hero-x .h-kicker,.hero-x h1,.hero-x .h-sub,.hero-x .h-list,.hero-x .h-cta,
  .hero-x .h-chips,.hero-x .h-proof{animation:none;opacity:1;transform:none}
  .hero-x .h-list .mark{animation:none;opacity:1;transform:none}
  .hero-x .btn-accent::after{animation:none;display:none}
}