/** * GreenGood Hero — full-bleed, Bubble-Canvas + Wort + CTA. * * Layout-Plan (v3): * - .gg-hero ist *exakt* 100svh. Kein Wachstum darunter; USPs leben in * einer eigenen Section direkt unterhalb (siehe hero-usps Pattern). * - Stacking innerhalb von .gg-hero per DOM-Reihenfolge, KEINE z-indexes * auf media/canvas/content. Damit bleibt die .gg-hero das einzige * Stacking-Context-Element und `mix-blend-mode: difference` auf dem * Hero-Wort sieht den darunter liegenden Canvas + Video. * - Auf Mobile darf das Hero-Wort full-bleed werden (random Padding kann * es nicht clippen). * * CSS-Variables werden in via inline-Style aus dem Customizer * gesetzt (`inc/customizer.php` → `greengood_print_hero_vars`). */ /* Fallback-Defaults wenn der Customizer-Inline-Style fehlt. Werden via greengood_print_hero_vars im (Priority 20, also NACH den CSS- Linktags) überschrieben — Customizer-Slider gewinnen. */ :root { --gg-logo-size: 2.8rem; --gg-word-size: 78vw; --gg-word-blend: difference; --gg-sub-shadow: 0.55; } .gg-hero { position: relative; isolation: isolate; /* macht .gg-hero zum Blending-Anker */ /* Flex-Column statt fixer Höhe: der zentrale Stack (Logo/Sub/CTA) und die USP-Boxen liegen im normalen Fluss untereinander, NICHT mehr absolut übereinander. min-height füllt den ersten Screen; reicht der Platz nicht (flache/kleine Displays), wächst der Hero einfach mit → kein Overlap. */ display: flex; flex-direction: column; min-height: 100vh; /* Fallback für Browser ohne svh-Support */ min-height: 100svh; /* exakt, ohne URL-Bar-Wackeln auf Mobile */ overflow: clip; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* --- Layer 0: Media (Video oder Background-Fill) --------------------- */ .gg-hero__media { position: absolute; inset: 0; background: var(--wp--preset--color--base); /* KEIN z-index — Stack via DOM-Reihenfolge, sonst bricht mix-blend-mode */ } /* Self-hosted