/* hype.media — Projektseiten Header- & Typografie-Fix Lädt zuletzt im ; sorgt dafür, dass Logo & Schriften identisch zur Startseite (index.html) sind. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); :root { --logo-scale: 1.5; } /* ---------- Globale Schrift ---------- */ html, body, h1, h2, h3, h4, h5, h6, p, li, a, span, em, strong, small, button, input, select, textarea, .detail-h2, .detail-lead, .detail-prose, .detail-eyebrow, .brand, .brand-stack, .brand-stack b, .brand-stack small, .main-nav a, .header-phone, .btn-idea { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Eyebrows als Mono-Akzent — wie auf der Startseite */ .detail-eyebrow, .eyebrow, .kicker { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; font-size: 12px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } /* ---------- Logo: 1:1 wie index.html ---------- */ .brand-stack { display: flex !important; flex-direction: column !important; line-height: 1 !important; gap: 0 !important; } .brand-stack b { font-weight: 800 !important; font-size: calc(22px * var(--logo-scale, 1)) !important; letter-spacing: -0.02em !important; line-height: 1 !important; color: #ffffff; } .brand-stack b span { color: var(--lime, #d0ff00); } .brand-stack small { font-weight: 500 !important; font-size: calc(10px * var(--logo-scale, 1)) !important; color: rgba(255,255,255,0.55) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-top: 4px !important; margin-left: -0.04em !important; line-height: 1 !important; } /* ---------- Header-Layout ---------- */ .site-header__inner { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; padding: 18px 32px !important; gap: 24px; } .main-nav { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; } .main-nav > a, .main-nav > span { padding: 10px 16px !important; font-size: 15px !important; font-weight: 500 !important; height: auto !important; align-self: center !important; } /* Mobile-Only-Items im Desktop-Header verstecken */ .main-nav .nav-close, .main-nav .nav-mobile-only, .main-nav .nav-mobile-socials { display: none !important; } @media (max-width: 1100px) { body.nav-open .main-nav .nav-close, body.nav-open .main-nav .nav-mobile-only, body.nav-open .main-nav .nav-mobile-socials { display: flex !important; } body.nav-open .main-nav .nav-mobile-socials { gap: 14px; } body.nav-open .main-nav .nav-mobile-socials a { width: 40px; height: 40px; } body.nav-open .main-nav .nav-mobile-socials svg { width: 22px !important; height: 22px !important; } } /* ---------- Detail-Sektionen Spacing wie Startseite ---------- */ .detail-eyebrow { margin: 0 0 28px !important; } .detail-h2 { font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; margin: 0 0 40px !important; } .detail-lead { font-weight: 400 !important; line-height: 1.5 !important; margin: 0 0 36px !important; } .detail-prose p + p { margin-top: 20px; } .detail-bullets { margin-top: 28px !important; } .detail-split { gap: 96px !important; } @media (max-width: 1000px) { .detail-split { gap: 48px !important; } } /* ---------- Headlines: 1:1 wie Startseite ---------- */ .detail-h2, .detail-section h2 { font-family: 'Manrope', system-ui, -apple-system, sans-serif !important; font-weight: 400 !important; font-size: clamp(40px, 5vw, 64px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; text-wrap: balance; } /* Em-Akzent: Outline-Italic auf hell wie auf dunkel */ .detail-h2 em, .detail-section h2 em { font-style: italic !important; font-weight: 400 !important; border: 0 !important; padding: 0 !important; background: none !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* Hell: schwarzer Strich */ .detail-section:not(.is-dark) .detail-h2 em, .detail-section:not(.is-dark) h2 em { -webkit-text-stroke: 1.2px var(--ink, #0a0a0a) !important; } /* Dunkel: solider Lime-Strich */ .detail-section.is-dark .detail-h2 em, .detail-section.is-dark h2 em, .detail-hero h1 em { -webkit-text-stroke: 1.2px var(--lime, #d0ff00) !important; } /* ---------- Top-Padding der Detail-Sektionen ---------- */ .detail-section { padding-top: 140px !important; padding-bottom: 120px !important; } .detail-section + .detail-section { padding-top: 140px !important; } @media (max-width: 800px) { .detail-section { padding-top: 88px !important; padding-bottom: 72px !important; } .detail-section + .detail-section { padding-top: 88px !important; } } /* ---------- Mega-Menü zentriert wie Startseite ---------- */ .nav-has-sub--hype26 { position: static !important; } .nav-sub--hype26 { left: 50% !important; right: auto !important; transform: translateX(-50%) translateY(6px) !important; margin-left: 0 !important; } /* ---------- Service-Chips im Hero ---------- */ .ref-chip { display: inline-block; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.18); border-radius: 100px; font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); } /* ============================================================ KONTRAST-FIX: Header & Mobile-Drawer (alle Projektseiten) Stellt sicher, dass im dunklen Header und im aufgeklappten Mobile-Drawer kein dunkler Text auf dunklem Grund landet. ============================================================ */ /* Top-Bar Navigation: alle Links bleiben hell-weiß auf dunklem Header */ .site-header .main-nav > a, .site-header .main-nav > span > a, .site-header .nav-has-sub > a { color: rgba(255,255,255,0.92) !important; } .site-header .main-nav > a:hover, .site-header .nav-has-sub > a:hover { color: #ffffff !important; } .site-header .main-nav a.is-active { /* Lime-Pill bleibt mit DUNKLEM Text — das ist der Kontrast-CTA */ color: #0a0a0a !important; background: var(--lime, #d0ff00) !important; } .site-header .header-phone { color: #ffffff !important; } /* Mega-Menü Dropdown (hype26 Variante) — bleibt explizit hell mit dunklem Text. Sicherstellen, dass kein Vererbungsfehler greift. */ .nav-sub--hype26 .hype26-list a { color: rgba(10,10,10,0.82) !important; } .nav-sub--hype26 .hype26-list a:hover { color: #0a0a0a !important; } .nav-sub--hype26 .hype26-group-num, .nav-sub--hype26 .hype26-group-title { color: #0a0a0a !important; } .nav-sub--hype26 .hype26-group-sub { color: rgba(10,10,10,0.55) !important; } /* ---------- Mobile-Drawer Layout- + Kontrast-Fix ---------- */ @media (max-width: 1100px) { /* Wichtig: Drawer MUSS vertikal stacken — sonst laufen die Items aus dem Viewport */ body.nav-open .main-nav, .main-nav.open { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 4px !important; padding: 88px 28px 32px !important; background-image: linear-gradient(180deg, #0a0a0a 0%, #050505 100%) !important; background-color: #0a0a0a !important; overflow-y: auto !important; z-index: 200 !important; } /* Jeder direkte Drawer-Eintrag bekommt volle Breite + eigene Zeile */ body.nav-open .main-nav > a, body.nav-open .main-nav > span, body.nav-open .main-nav > div, body.nav-open .main-nav > button.nav-close { width: 100% !important; text-align: left !important; padding: 14px 4px !important; font-size: 22px !important; line-height: 1.2 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } body.nav-open .main-nav > button.nav-close { position: absolute !important; top: 20px !important; right: 20px !important; width: 44px !important; height: 44px !important; border-bottom: none !important; padding: 0 !important; } body.nav-open .main-nav > .nav-mobile-socials { flex-direction: row !important; gap: 18px !important; border-bottom: none !important; padding-top: 24px !important; } body.nav-open .main-nav > .nav-mobile-socials a { width: 44px !important; height: 44px !important; border-bottom: none !important; padding: 0 !important; } /* Alle Links im aufgeklappten Drawer hell-weiß, vollständig deckend */ body.nav-open .main-nav > a, body.nav-open .main-nav > span > a, body.nav-open .main-nav .nav-has-sub > a, .main-nav.open > a, .main-nav.open .nav-has-sub > a { color: #ffffff !important; opacity: 1 !important; font-weight: 500; } /* Drawer-Submenü (Mega-Menü im Mobil-Drawer) — heller Text auf dunklem Grund */ body.nav-open .nav-sub, body.nav-open .nav-sub--hype26 { background: transparent !important; color: #ffffff !important; border: none !important; box-shadow: none !important; } body.nav-open .nav-sub a, body.nav-open .nav-sub--hype26 a { color: rgba(255,255,255,0.88) !important; } body.nav-open .nav-sub a:hover, body.nav-open .nav-sub--hype26 a:hover { color: #ffffff !important; } body.nav-open .nav-sub--hype26 .hype26-group-num, body.nav-open .nav-sub--hype26 .hype26-group-title { color: var(--lime, #d0ff00) !important; } body.nav-open .nav-sub--hype26 .hype26-group-sub { color: rgba(255,255,255,0.55) !important; } /* Schließen-Button + Social-Icons hell */ body.nav-open .nav-close, body.nav-open .nav-mobile-only, body.nav-open .nav-mobile-socials a { color: #ffffff !important; } body.nav-open .nav-close svg, body.nav-open .nav-mobile-socials svg { stroke: #ffffff !important; color: #ffffff !important; } body.nav-open .header-phone { color: #ffffff !important; } } /* ---------- Eyebrow / Breadcrumb im dunklen Hero immer hell ---------- */ .ref-detail-hero .eyebrow, .ref-detail-hero .eyebrow *, .ic-hero .ic-eyebrow, .ic-hero .ic-eyebrow * { color: rgba(255,255,255,0.72); } .ref-detail-hero .eyebrow a:hover, .ic-hero .ic-eyebrow a:hover { color: #ffffff; }