/* Page-spezifisches CSS (nur was hier gebraucht wird) */ html, body { background: var(--deep-bg); color: var(--white); } body { font-family: var(--font-display); } /* Schriftgrößen, Card-Patterns, Eyebrows kommen aus lociv.css + markenstory.css. Hier nur Layout-Glue und Dark-Mode-Spezifika für die Stack-Section. */ /* #1 Ambient Glow um Hero-Stat-Card */ .hero-stat { box-shadow: var(--shadow-xl), 0 0 120px rgba(98, 112, 229, 0.35); } /* #2 Reveal-on-Scroll Render-Safety: Inhalt ist ohne UND vor JS immer sichtbar (opacity:1). Die Verstecken-Markierung (.reveal-init) setzt reveal.js Element für Element selbst, unmittelbar bevor es den IntersectionObserver bekommt. Fällt reveal.js aus oder verzögert -> keine .reveal-init -> nichts bleibt unsichtbar (kein global per .js erzwungenes opacity:0). */ .freshup-reveal { opacity: 1; transform: none; } .freshup-reveal.reveal-init { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .freshup-reveal.reveal-init.in { opacity: 1; transform: translateY(0); } /* === Stack-Section: Layout-Glue (Hintergrund/Padding kommen aus lociv.css) === */ /* Container wie markenstory.css .container - max-width 1100px statt 1280px (mehr Luft) */ .stack-inner { max-width: 1100px; margin: 0 auto; } .stack-head { margin-bottom: 56px; /* linksbündig, kein text-align: center */ } .stack-section h2 { color: var(--white); font-family: var(--font-display); font-size: clamp(1.95rem, 4vw, 2.85rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; max-width: 800px; /* wie markenstory h2 */ margin: 0 0 24px; text-wrap: balance; } .stack-section .eyebrow { color: var(--civic-lime); display: inline-block; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 14px; } .stack-section h2 em { font-style: italic; color: var(--white); font-weight: 600; } /* Lime-Trennlinie linksbündig (nicht mehr zentriert) */ .stack-head .lime-divider { width: 80px; height: 3px; background: var(--civic-lime); border-radius: 2px; margin: 0 0 18px; } /* Lead aus markenstory.css 1:1 */ .stack-head .lead { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, 0.78); max-width: 740px; margin: 0; } .stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* #9 Glassmorphism nach CI-Werten (CI Z325-336) - origin-card-Pattern für Dark-BG */ .stack-card { padding: 30px 30px 28px 32px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border-glass); border-left: 4px solid var(--civic-blue-soft); border-radius: 12px; transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); text-decoration: none; color: inherit; display: block; } .stack-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .stack-card.live { border-left-color: var(--civic-lime); } .stack-card.live:hover { border-color: rgba(208, 249, 98, 0.35); } .stack-card.roadmap:hover { border-color: rgba(126, 139, 252, 0.35); } /* Status-Badge, Schriftgrößen wie origin-eyebrow aus markenstory.css */ .stack-card .status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 18px; } .stack-card.live .status { color: var(--civic-lime); } .stack-card.live .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--civic-lime); box-shadow: 0 0 8px rgba(208, 249, 98, 0.6); } .stack-card.roadmap .status { color: var(--civic-blue-pale); } /* Headline + Body in den gleichen Größen wie origin-card (1.85rem term, 0.98rem meaning) */ .stack-card h3 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; color: var(--white); margin-bottom: 10px; letter-spacing: -0.02em; } .stack-card p { font-family: var(--font-ui); color: var(--civic-blue-pale); font-size: 0.98rem; line-height: 1.55; } .stack-card .arrow { display: inline-block; margin-top: 16px; color: var(--civic-blue-soft); font-family: var(--font-ui); font-size: 0.92rem; transition: transform 0.2s var(--ease-out); } .stack-card.live .arrow { color: var(--civic-lime); } .stack-card:hover .arrow { transform: translateX(3px); } /* === CTA-Section ============================================ */ .cta-inner { max-width: 1100px; margin: 0 auto; } .cta-head { margin-bottom: 56px; } .cta-section .eyebrow { color: var(--civic-lime); display: inline-block; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 14px; } .cta-section h2 { color: var(--white); font-family: var(--font-display); font-size: clamp(1.95rem, 4vw, 2.85rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; max-width: 820px; margin: 0 0 24px; text-wrap: balance; } .cta-section h2 em { font-style: italic; color: var(--civic-lime); font-weight: 600; } .cta-head .lime-divider { width: 80px; height: 3px; background: var(--civic-lime); border-radius: 2px; margin: 0 0 18px; } .cta-section .lead { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, 0.78); max-width: 740px; margin: 0; } .cta-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .cta-path { padding: 36px 36px 32px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border-glass); border-radius: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .cta-path-eyebrow { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--civic-blue-pale); } .cta-path p { font-family: var(--font-ui); color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.6; margin: 0; } .cta-path .btn { margin-top: auto; } .btn-outline-light { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: var(--radius-sm); /* kein Pill mehr */ font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: border-color 0.22s var(--ease-out), background 0.22s var(--ease-out), transform 0.22s var(--ease-out); } .btn-outline-light:hover { border-color: var(--civic-blue-soft); background: rgba(126, 139, 252, 0.10); transform: translateY(-1px); } .btn-outline-light .arrow { transition: transform 0.22s var(--ease-out); } .btn-outline-light:hover .arrow { transform: translateX(3px); } /* === Markenwerte-Section: Layout-Glue (Hintergrund/Padding kommen aus lociv.css) === */ /* Container wie markenstory.css .container - max-width 1100px statt 1280px */ .values-inner { max-width: 1100px; margin: 0 auto; } .values-head { margin-bottom: 48px; /* linksbündig */ } .values-head .eyebrow { color: var(--civic-blue); display: inline-block; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 14px; } .values-head h2 { font-family: var(--font-display); font-size: clamp(1.95rem, 4vw, 2.85rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; max-width: 800px; margin: 0; text-wrap: balance; color: var(--text-strong); } .values-head h2 em { font-style: italic; color: var(--civic-blue); font-weight: 600; } .values-head .lime-divider { width: 80px; height: 3px; background: var(--civic-lime); border-radius: 2px; margin: 14px 0 0; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Origin-Cards im 3er-Grid kompakter: Markenstory-Spec übernehmen, aber Headline kleiner (einzeilig wenn möglich) + mehr Luft zur Glyph-Zahl */ .values-section .origin-card .origin-eyebrow { margin-bottom: 26px; } .values-section .origin-card .term { font-size: 1.25rem; line-height: 1.25; margin-bottom: 12px; } .values-section .origin-card .brand-glyph { font-size: 3.6rem; top: 18px; } /* Auf schmaleren Spalten (2-Spalten-Layout zwischen 540-880px) Headline noch etwas kompakter */ @media (max-width: 1080px) and (min-width: 881px) { .values-section .origin-card .term { font-size: 1.15rem; } } /* Mobile */ @media (max-width: 880px) { .stack-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .cta-paths { grid-template-columns: 1fr; } .stack-section, .values-section, .cta-section { padding-left: 24px; padding-right: 24px; } .stack-card h3 { font-size: 1.5rem; } .cta-path { padding: 28px 24px; } } @media (prefers-reduced-motion: reduce) { /* Reduce-Motion: nie verstecken/animieren, auch falls reveal.js die .reveal-init-Markierung gesetzt haben sollte (Spezifität angeglichen). */ .freshup-reveal, .freshup-reveal.reveal-init { opacity: 1; transform: none; transition: none; } } /* ════════════════════════════════════════════════════════════════ SECTION-OVERRIDES: Hell-Dunkel-Hell-Pattern ════════════════════════════════════════════════════════════════ Reihenfolge: Hero (Dark - unverändert) Stack (LIGHT - Civic-Blue-Grid statt Punktraster) Values (DARK - Punktraster statt Light) CTA (LIGHT - is-dark wird neutralisiert) Card-Adaptionen entsprechend, damit Kontraste lesbar bleiben. */ /* ─── Stack-Section auf LIGHT ───────────────────────────────── */ .stack-section { background-color: var(--surface-1) !important; background-image: linear-gradient(to right, rgba(98,112,229,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(98,112,229,0.05) 1px, transparent 1px) !important; background-size: 96px 96px, 96px 96px !important; color: var(--text-body) !important; } .stack-section::before { background: radial-gradient(ellipse 600px 400px at 8% 12%, rgba(98,112,229,0.06) 0%, transparent 60%), radial-gradient(ellipse 500px 380px at 92% 88%, rgba(208,249,98,0.07) 0%, transparent 65%) !important; } .stack-section::after { display: none; } /* Dark-Cursor-Glow weg */ .stack-section h2 { color: var(--text-strong) !important; } .stack-section h2 em { color: var(--civic-blue) !important; } .stack-section .lead { color: var(--text-muted) !important; } .stack-section .eyebrow { color: var(--civic-blue) !important; } .stack-section .section-sparkles .sparkle { fill: rgba(98,112,229,0.42); } .stack-section .section-sparkles .sparkle-lime { fill: rgba(168,232,39,0.58); } /* Glass-Cards auf Light umstellen: weißer Hintergrund + Schatten statt Glas */ .stack-card { background: rgba(255,255,255,0.72) !important; backdrop-filter: blur(8px); border: 1px solid rgba(98,112,229,0.18) !important; border-left: 4px solid var(--civic-blue) !important; box-shadow: 0 6px 24px -10px rgba(8,20,38,0.10); } .stack-card.live { border-left-color: var(--civic-lime-deep) !important; } .stack-card h3 { color: var(--text-strong) !important; } .stack-card p { color: var(--text-muted) !important; } .stack-card .arrow { color: var(--civic-blue) !important; } .stack-card.live .arrow { color: var(--civic-lime-deep) !important; } .stack-card.roadmap .status { color: var(--civic-blue) !important; } /* Live-Status-Text auf dunkles Civic-Grün (#3E6B00 = 6,24:1 auf der weißen Card, AA erfüllt). civic-lime-deep #A8E827 lag bei nur 1,45:1 - unlesbar. Der Lime-Dot (.dot) bleibt als reiner CI-Akzent unverändert sichtbar. */ .stack-card.live .status { color: #3E6B00 !important; } /* ─── Values-Section auf DARK ───────────────────────────────── */ .values-section { background-color: var(--deep-bg) !important; background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1.2px, transparent 1.5px) !important; background-size: 28px 28px !important; color: rgba(255,255,255,0.92) !important; } .values-section::before { background: radial-gradient(ellipse 700px 480px at 90% 15%, rgba(126,139,252,0.16) 0%, transparent 60%), radial-gradient(ellipse 560px 420px at 5% 85%, rgba(208,249,98,0.08) 0%, transparent 65%) !important; } .values-section .eyebrow { color: var(--civic-lime) !important; } .values-section .values-head h2 { color: var(--white) !important; } .values-section .values-head h2 em { color: var(--civic-lime) !important; } .values-section .lociv-mark strong { color: var(--civic-blue) !important; } .values-section .lociv-mark .tld { color: var(--civic-lime) !important; } /* Origin-Cards bekommen weicher dunklen Karten-BG, weiße Headline. Mobile: kräftiger Card-BG, sonst geht die Karte im Section-BG unter (Mobile hat schmalere Section, weniger Kontrast zum schwarzen BG). */ .values-section .origin-card { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(14px); border: 1px solid var(--border-glass) !important; } @media (max-width: 880px) { .values-section .origin-card { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.15) !important; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.30); } } .values-section .origin-card .term { color: var(--white) !important; } .values-section .origin-card .meaning { color: rgba(255,255,255,0.78) !important; } .values-section .origin-card .brand-glyph { color: var(--civic-blue-pale) !important; opacity: 0.22; } .values-section .origin-card--tech .brand-glyph { color: var(--civic-lime) !important; } /* Eyebrow-Akzente für Dark: die origin-eyebrows erben aus markenstory.css ihre Light-Akzentfarbe (--local/--civic = Civic-Blue #6270E5/#7E8BFC, --tech den Light-Override #5A7A0E). Auf dem dunklen Values-BG liegen die unter AA (Blue 3,78:1, #5A7A0E 3,22:1). Hier auf helle, AA-taugliche Töne anheben: blue-pale #A4B4FF = 8,0:1, lime #D0F962 = 13,3:1 auf der dunklen Card. */ .values-section .origin-card--local .origin-eyebrow { color: var(--civic-blue-pale) !important; } .values-section .origin-card--civic .origin-eyebrow { color: var(--civic-blue-pale) !important; } .values-section .origin-card--tech .origin-eyebrow { color: var(--civic-lime) !important; } /* Sparkle-Layer für Dark hinzufügen via JS wäre zu viel - hier überspringen */ /* ─── CTA-Section auf LIGHT ────────────────────────────────── */ .cta-section.is-dark { background-color: var(--surface-1) !important; background-image: linear-gradient(to right, rgba(98,112,229,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(98,112,229,0.05) 1px, transparent 1px) !important; background-size: 96px 96px, 96px 96px !important; color: var(--text-body) !important; } .cta-section.is-dark::before { background: radial-gradient(ellipse 600px 400px at 92% 15%, rgba(126,139,252,0.07) 0%, transparent 60%), radial-gradient(ellipse 500px 380px at 5% 85%, rgba(208,249,98,0.05) 0%, transparent 65%) !important; } .cta-section.is-dark::after { display: none; } .cta-section h2 { color: var(--text-strong) !important; } .cta-section h2 em { color: var(--civic-blue) !important; font-style: italic; } .cta-section .lead { color: var(--text-muted) !important; } .cta-section .eyebrow { color: var(--civic-blue) !important; } .cta-section .section-sparkles .sparkle { fill: rgba(98,112,229,0.42); } .cta-section .section-sparkles .sparkle-lime { fill: rgba(168,232,39,0.58); } .cta-path { background: rgba(255,255,255,0.72) !important; border: 1px solid rgba(98,112,229,0.18) !important; } .cta-path-eyebrow { color: var(--civic-blue) !important; } .cta-path p { color: var(--text-muted) !important; } .btn-outline-light { color: var(--text-strong) !important; border-color: rgba(8,20,38,0.18) !important; } .btn-outline-light:hover { border-color: var(--civic-blue) !important; background: rgba(98,112,229,0.06) !important; } /* ─── Fix 12.06.2026: Hero-Seitenpadding zurückholen ───────────── markenstory.css (wird auf der Startseite mitgeladen) setzt .hero auf padding: 32px 0 100px - auf der Story-Seite ok (.container trägt dort das Seitenpadding), auf der Startseite klebte der Hero-Inhalt dadurch bei ~769-1380px am Viewport-Rand. Hier (lädt als letztes CSS) den lociv.css-Default wiederherstellen; die Mobile-Regel (<=768px, !important in lociv.css) bleibt unberührt. */ .hero { padding: 32px var(--page-padding) 100px; }