/* ============================================================ ContentSpark — Whole-Site Varianten (LOKALER PREVIEW) Wird ZUSÄTZLICH zu tokens.css + landing.css geladen. Additiv, überschreibt nur gezielt. Variante wird über html[data-variant="..."] gesteuert (gesetzt im aus ?v=). Presets: scan | scan-light | scan-min | map | morph Daten in der #daten-Section sind ECHT (vector_db: 504.907 Videos, Frameworks: Value Shock / Talking Head / ...). ============================================================ */ /* ---------- Data-Section: gemeinsamer Rahmen ---------- */ #daten .cs-concept { display: none; } html[data-variant="scan"] #daten .cs-concept-scan, html[data-variant="scan-light"] #daten .cs-concept-scan, html[data-variant="scan-min"] #daten .cs-concept-scan, html[data-variant="map"] #daten .cs-concept-map, html[data-variant="morph"] #daten .cs-concept-morph { display: block; } /* gradient-mono Stat (in-brand, boxless = credibility-num-Look) */ .cs-num { font-family: var(--font-mono); font-weight: 600; letter-spacing: -.02em; line-height: 1; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cs-lab { color: var(--text-muted); font-size: 13px; } /* ============ SCAN (echte Daten) ============ */ .cs-scan-stage { position: relative; padding: 14px 0 4px; margin-top: clamp(28px,4vh,46px); } .cs-scan-strip { display: flex; gap: 16px; justify-content: center; position: relative; } .cs-tile { position: relative; width: clamp(96px,9.4vw,128px); aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-color); flex-shrink: 0; background: var(--bg-elevated); box-shadow: 0 8px 30px rgba(0,0,0,.28); } .cs-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.5) brightness(.6); transition: filter .55s ease; } .cs-tile.scanned img { filter: saturate(1.02) brightness(.98); } .cs-tile::after { content: ''; position: absolute; inset: 0; border-radius: 14px; border: 1px solid transparent; transition: border-color .5s, box-shadow .5s; pointer-events: none; } .cs-tile.scanned::after { border-color: rgba(255,167,38,.6); box-shadow: 0 0 24px rgba(255,64,129,.22) inset, 0 0 22px rgba(255,64,129,.18); } .cs-chip { position: absolute; left: 7px; right: 7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .02em; line-height: 1.25; background: rgba(8,8,10,.84); border: 1px solid rgba(255,255,255,.16); border-radius: 7px; padding: 4px 7px; color: var(--text-primary); opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s; backdrop-filter: blur(5px); } .cs-chip b { display: block; font-size: 7.5px; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; margin-bottom: 1px; } .cs-chip.c1 { top: 8px; } .cs-chip.c2 { bottom: 32px; color: #FFD9A6; } .cs-chip.c3 { bottom: 8px; } .cs-tile.scanned .cs-chip { opacity: 1; transform: none; } .cs-tile.scanned .cs-chip.c2 { transition-delay: .12s; } .cs-tile.scanned .cs-chip.c3 { transition-delay: .22s; } .cs-scan-line { position: absolute; top: -18px; bottom: -18px; width: 2px; left: 0; opacity: 0; pointer-events: none; will-change: transform; z-index: 3; background: linear-gradient(180deg, transparent, #FFA726 18%, #FF4081 50%, #42A5F5 82%, transparent); } .cs-scan-line::after { content: ''; position: absolute; inset: 0 -26px; background: linear-gradient(90deg, transparent, rgba(255,64,129,.2), transparent); } .cs-scan-count { text-align: center; margin-top: 48px; } .cs-scan-count .cs-num { font-size: clamp(40px,5vw,64px); display: block; } .cs-scan-count .cs-lab { display: block; margin-top: 10px; font-size: 14px; } .cs-scan-sub { display: flex; justify-content: center; gap: clamp(26px,5vw,60px); flex-wrap: wrap; margin-top: 26px; } .cs-scan-sub .s { font-size: 13px; color: var(--text-muted); } .cs-scan-sub .s b { font-family: var(--font-mono); color: var(--text-secondary); font-weight: 600; } /* ============ MAP ============ */ .cs-map-grid { display: grid; grid-template-columns: minmax(0,1.32fr) minmax(248px,.68fr); gap: clamp(28px,5vw,56px); align-items: center; margin-top: clamp(28px,4vh,48px); } .cs-map-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; } .cs-map-figure img { width: 100%; height: auto; display: block; opacity: 0; transform: scale(1.02); transition: opacity 1.1s ease, transform 1.4s ease; } .cs-map-figure.lit img { opacity: 1; transform: none; } .cs-map-stats { display: flex; flex-direction: column; gap: 26px; } .cs-mstat { border-left: 2px solid transparent; border-image: linear-gradient(180deg,#FFA726,#FF4081) 1; padding-left: 18px; opacity: 0; transform: translateX(10px); transition: opacity .6s ease, transform .6s ease; } .cs-map-stats.lit .cs-mstat { opacity: 1; transform: none; } .cs-map-stats.lit .cs-mstat:nth-child(2) { transition-delay: .12s; } .cs-map-stats.lit .cs-mstat:nth-child(3) { transition-delay: .24s; } .cs-mstat .cs-num { display: block; font-size: clamp(26px,2.8vw,38px); } .cs-mstat .cs-lab { display: block; margin-top: 5px; } .cs-map-cap { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-muted); margin-top: 6px; opacity: 0; transition: opacity .6s ease .36s; } .cs-map-stats.lit .cs-map-cap { opacity: 1; } /* ============ MORPH (sticky, full-bleed; Nav floatet darüber) ============ */ html[data-variant="morph"] #daten { padding: 0; overflow: visible; } html[data-variant="morph"] #daten .section-glow { display: none; } .cs-morph-track { height: 340vh; position: relative; } .cs-morph-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cs-morph-img, .cs-morph-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity; } .cs-morph-img.m1 { opacity: 1; } .cs-morph-scrim { position: absolute; inset: 0; z-index: 2; background: radial-gradient(82% 72% at 50% 58%, transparent 28%, rgba(8,8,10,.62) 100%); } .cs-morph-copy { position: relative; z-index: 3; text-align: center; max-width: 780px; padding: 0 24px; opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; } .cs-morph-copy.lit { opacity: 1; transform: none; } .cs-morph-stats { display: flex; justify-content: center; gap: clamp(24px,4vw,52px); flex-wrap: wrap; margin-top: 22px; } .cs-morph-stats .s { font-size: 13px; color: var(--text-secondary); } .cs-morph-stats .s b { font-family: var(--font-mono); font-weight: 600; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cs-morph-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-muted); text-transform: uppercase; opacity: .82; } /* ============ AMBIENT-BACKDROP (generierte Higgsfield-Glows hinter Sektionen) ============ */ .cs-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; opacity: .42; mix-blend-mode: screen; } .cs-ambient-warm { background-image: url(../assets/ambient-1.jpg); } .cs-ambient-cool { background-image: url(../assets/ambient-1.jpg); filter: hue-rotate(150deg) saturate(.9); transform: scaleX(-1); } .cs-ambient-deep { background-image: url(../assets/ambient-2.jpg); } /* die Section muss Stacking erlauben; landing-Sections sind relative + haben .container z über 0 */ .cs-has-ambient { position: relative; } .cs-has-ambient > .container, .cs-has-ambient > .differentiator-inner, .cs-has-ambient > .guarantee-card { position: relative; z-index: 1; } /* LIGHT-THEME: dunkle PNG-Glows verschmutzen hellen BG grau → ersetzt durch dezente Pastell-Washes (reine CSS-Gradienten) */ [data-theme="light"] .cs-ambient { opacity: 1; mix-blend-mode: normal; filter: none; transform: none; background: none; } [data-theme="light"] .cs-ambient-warm { background-image: radial-gradient(56% 46% at 84% 6%, rgba(255,167,38,.13), transparent 68%), radial-gradient(52% 44% at 10% 2%, rgba(255,64,129,.08), transparent 72%); } [data-theme="light"] .cs-ambient-cool { background-image: radial-gradient(56% 46% at 82% 6%, rgba(66,165,245,.13), transparent 68%), radial-gradient(50% 44% at 8% 16%, rgba(171,71,188,.07), transparent 74%); } [data-theme="light"] .cs-ambient-deep { background-image: radial-gradient(66% 56% at 50% 0%, rgba(171,71,188,.10), transparent 70%), radial-gradient(48% 40% at 88% 24%, rgba(255,64,129,.07), transparent 74%); } /* ============ TREATMENT: REDUKTION (scan-min) ============ */ html[data-variant="scan-min"] .cs-ambient { display: none; } html[data-variant="scan-min"] .section-glow, html[data-variant="scan-min"] .bg-decorations { display: none; } html[data-variant="scan-min"] .problem, html[data-variant="scan-min"] .data-power, html[data-variant="scan-min"] .process, html[data-variant="scan-min"] .features, html[data-variant="scan-min"] .differentiator, html[data-variant="scan-min"] .guarantee, html[data-variant="scan-min"] .cohort, html[data-variant="scan-min"] .faq { padding-top: clamp(80px,11vh,140px); padding-bottom: clamp(80px,11vh,140px); } html[data-variant="scan-min"] .section-title { font-size: clamp(34px,4.6vw,56px); letter-spacing: -.02em; } html[data-variant="scan-min"] .cs-tile { box-shadow: none; } /* ============ TREATMENT: HELL (scan-light) — soft pastel statt harter Glows ============ */ /* (Light-Wash wird jetzt zentral via [data-theme="light"] .cs-ambient-* gesetzt — kein PNG, kein Grau) */ html[data-variant="scan-light"] .cs-ambient-warm { opacity: 1; } /* Sicherheits-Reveal: falls landing.js-Observer das Konzept nicht erfasst, nie unsichtbar */ .reveal-all #daten .cs-concept .cs-num, .reveal-all #daten .cs-concept .cs-tile { opacity: 1 !important; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .cs-map-grid { grid-template-columns: 1fr; } .cs-scan-strip { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 12px; -webkit-overflow-scrolling: touch; } .cs-tile { width: 92px; } } /* ============ PERF: content-visibility (Phase-1-Speed) ============ Browser überspringt Layout/Paint/Bild-Decode für Sektionen, die NICHT in Viewport-Nähe sind → kappt Peak-RAM (= der iOS-Safari-Crash-Hebel) ohne ein einziges Video zu entfernen. Sektion rendert identisch, sobald sie nahe kommt. BEWUSST AUSGESCHLOSSEN: .hero (LCP/above-fold), .data-power/#daten (GSAP-Scrub- Scan misst Höhe beim Scrollen), .showcase (dauer-animierte Marquee), .credibility (nah am Fold). contain-intrinsic-size: auto = Browser merkt sich echte Höhe, kein Scrollbar-Sprung. Auf älteren Engines ohne Support = harmloser No-op. */ .problem, .process, .features, .differentiator, .guarantee, .cohort, .faq, .final-cta, .footer { content-visibility: auto; contain-intrinsic-size: auto 640px; }