/** * FORGEINITY Critical CSS — Above-the-Fold Only * ============================================== * Wird inline im gerendert vor main.css, um den ersten Paint * ohne Abhängigkeit von der großen main.css zu ermöglichen. * * Ziele: * 1. Kein weißer Flash (FOUC) — sofort dunkler Hintergrund * 2. Header sichtbar bevor main.css geladen ist * 3. Hero-Container reserviert Platz (kein Layout-Shift) * * Synchron mit main.css halten! Bei Design-Änderungen hier mitpflegen. * Philosophie: So minimal wie möglich — alles andere darf warten auf main.css. * * Hardcoded Hex-Farben sind hier bewusst (kein var() — würde circular * werden, wenn main.css noch nicht geladen ist). ds-ok */ /* ── Base Reset ── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.6; color: #E8E8E3; background-color: #0E0F10; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background-color: #0E0F10; } /* ── Header Shell (sichtbar ab erstem Frame) ── */ .header { background-color: #2D2D2D; color: #FFFFFF; position: sticky; top: 0; z-index: 100; } /* ── FORGEINITY-Modus Base (dunkles Design) ── */ [data-forgeinity-mode] { display: block; position: relative; isolation: isolate; background: #0E0F10; color: #E8E8E3; font-family: 'Inter', system-ui, -apple-system, sans-serif; overflow: clip; } /* ── Container (reserviert Breite) ── */ [data-forgeinity-mode] .investors-container { max-width: 1360px; margin: 0 auto; padding-left: clamp(1.25rem, 2vw + 0.5rem, 2.5rem); padding-right: clamp(1.25rem, 2vw + 0.5rem, 2.5rem); position: relative; z-index: 1; } /* ── Hero (reserviert Hoehe — kein Layout-Shift beim main.css-Load) ── */ [data-forgeinity-mode] .investors-hero { position: relative; min-height: 85vh; min-height: 85dvh; padding: clamp(3rem, 6vh, 6rem) 0 clamp(2rem, 4vh, 4rem); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; } @media (max-height: 820px) and (min-width: 768px) { [data-forgeinity-mode] .investors-hero { min-height: 100vh; min-height: 100dvh; padding: clamp(2.5rem, 5vh, 4rem) 0 clamp(1.5rem, 3vh, 2.5rem); } } /* ── Hero-Bild (LCP-Kandidat — richtige Groesse ab erstem Frame) ── */ [data-forgeinity-mode] .investors-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } [data-forgeinity-mode] .investors-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Anti-FOUC: Reveal-Elemente initial hidden (nur mit JS) ── */ /* Progressive Enhancement: Ohne .fgm-js-Klasse auf sind alle Elemente sofort sichtbar. Die Klasse wird im Inline-Script im Default.html gesetzt, bevor der Browser das CSS anwendet. */ .fgm-js [data-forgeinity-mode] [data-reveal], .fgm-js [data-forgeinity-mode] [data-clip-reveal] { opacity: 0; } .fgm-js [data-forgeinity-mode] [data-reveal].is-visible, .fgm-js [data-forgeinity-mode] [data-clip-reveal].is-visible { opacity: 1; }