/* ========================================================================= k-AIzen — LIGHT TECH (Vorschau-Variante) Hell, produkt-zentriert, Indigo/Violett-Akzent. Plus Jakarta Sans. Re-skinnt dieselben JSX-Sektionen (hero.jsx / sections.jsx) über Tokens. Fantasy-Deko (Berge/Kraniche/Bambus/Blätter) wird ausgeblendet. Lädt NACH colors_and_type.css und überschreibt dessen :root-Tokens. ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ---------- LIGHT TECH PALETTE ---------- */ --lt-ink: #0B1020; /* fast-schwarzer Text, Headlines */ --lt-ink-soft: #1C2333; /* sekundäre dunkle Flächen */ --lt-slate: #475569; /* Fließtext gedämpft */ --lt-slate-2: #64748B; /* noch ruhiger / Captions */ --lt-paper: #FCFCFD; /* Haupt-Hintergrund (off-white) */ --lt-paper-2: #F4F5FA; /* Bänder / alternierende Sektionen */ --lt-card: #FFFFFF; /* Karten */ --lt-line: #E6E8F0; /* Hairlines / Borders */ --lt-line-soft: #EEF0F6; --lt-indigo: #4F46E5; /* Primär-Akzent / CTA */ --lt-indigo-deep:#4338CA; /* hover/press */ --lt-violet: #7C3AED; /* Gradient-Partner */ --lt-indigo-text:#4338CA; /* AA-sicherer Inline-Text-Indigo */ --lt-indigo-wash:rgba(79,70,229,0.07); --lt-glow: rgba(124,58,237,0.14); /* ---------- SEMANTISCHE TOKENS (override) ---------- */ --kz-charcoal: var(--lt-ink); --kz-charcoal-soft: var(--lt-ink-soft); --kz-ember: var(--lt-indigo); --kz-ember-deep: var(--lt-indigo-deep); --kz-ember-text: var(--lt-indigo-text); --kz-cream: var(--lt-paper); --kz-cream-deep: var(--lt-paper-2); --kz-muted: var(--lt-slate); --kz-border: var(--lt-line); --kz-card: var(--lt-card); --kz-ink-wash: var(--lt-indigo-wash); --kz-ink-wash-strong: rgba(79,70,229,0.12); --bg: var(--lt-paper); --bg-alt: var(--lt-paper-2); --bg-card: var(--lt-card); --bg-inverse: var(--lt-ink); --fg: var(--lt-ink); --fg-muted: var(--lt-slate); --fg-inverse: var(--lt-paper); --fg-accent: var(--lt-indigo-text); --border: var(--lt-line); --border-strong: var(--lt-ink); --accent: var(--lt-indigo); --accent-deep: var(--lt-indigo-deep); /* ---------- TYPE FAMILIES (override — weg vom Serif) ---------- */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-brush: "Plus Jakarta Sans", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Schärfere Radien, klarere Tech-Schatten */ --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --shadow-xs: 0 1px 2px rgba(11,16,32,0.04); --shadow-sm: 0 2px 8px -2px rgba(11,16,32,0.08), 0 1px 3px rgba(11,16,32,0.04); --shadow-md: 0 10px 28px -8px rgba(11,16,32,0.12), 0 3px 8px rgba(11,16,32,0.06); --shadow-lg: 0 28px 60px -14px rgba(79,70,229,0.18), 0 10px 24px rgba(11,16,32,0.10); } /* ===================================================================== GLOBAL — hell statt dunkel ===================================================================== */ html, body { color: var(--fg); background: var(--bg); } /* Headlines: kräftig, eng, NICHT kursiv-serif */ h1, .kz-h1, h2, .kz-h2, h3, .kz-h3, h4, .kz-h4 { font-family: var(--font-display); letter-spacing: -0.025em; color: var(--fg); } h1, .kz-h1 { font-weight: 800; } h2, .kz-h2 { font-weight: 700; } h3, .kz-h3, h4, .kz-h4 { font-weight: 700; } /* ===================================================================== EXTRUDIERTE 3D-HEADLINES — wie aus Metallblock gefräst. Gestapelte text-shadow-Lagen bauen die Tiefen-Wand nach unten-rechts, helle Kante oben gibt den Licht-Glanz, weicher Cast-Shadow erdet. Nur große Headlines (h1/h2) — kleiner Text bleibt flach & lesbar. ===================================================================== */ @media (min-width: 720px) { h1, .kz-h1, h2, .kz-h2 { --lt-extrude: 3px; /* Tiefe der Extrusion (h1) — dezenter */ text-shadow: 0 1px 0 rgba(255,255,255,0.55), /* Lichtkante oben */ 0 -1px 0 rgba(255,255,255,0.25), 1px 1px 0 #2A3040, 2px 2px 0 #242A39, 3px 3px 0 #1E2431, /* Tiefen-Wand (Anthrazit) */ 4px 5px 9px rgba(11,16,32,0.26); /* weicher Cast-Shadow */ } h2, .kz-h2 { --lt-extrude: 2px; /* noch flacher als h1 */ text-shadow: 0 1px 0 rgba(255,255,255,0.50), 1px 1px 0 #2A3040, 2px 2px 0 #202634, 4px 4px 7px rgba(11,16,32,0.22); } } /* Indigo-Text (Subline / Akzent-Worte) bekommt eine VIOLETTE Tiefe, damit das "Material" zur Farbe passt statt grau zu wirken. */ @media (min-width: 720px) { .kz-h1 .accent, h1 .accent, .kz-h2 .accent, h2 .accent, [style*="var(--accent)"]:is(h1,h2,.kz-h1,.kz-h2) { text-shadow: 0 1px 0 rgba(255,255,255,0.40), 1px 1px 0 #3B2A8A, 2px 2px 0 #34247C, 3px 3px 0 #2D1F6E, 4px 4px 0 #261960, 5px 5px 0 #1F1352, 6px 6px 0 #190E45, 8px 9px 14px rgba(79,70,229,0.28); } } /* prefers-reduced-motion / sehr kleine Screens → flach lassen (Lesbarkeit) */ @media (max-width: 719px) { h1, .kz-h1, h2, .kz-h2 { text-shadow: 0 1px 1px rgba(11,16,32,0.12); } } /* Tagline / brush: keine Handschrift mehr, sondern ruhiger Akzent-Text */ .kz-tagline { font-style: normal; font-weight: 600; color: var(--fg); } .kz-brush { font-family: var(--font-display); font-weight: 700; font-style: normal; color: var(--accent); font-size: var(--text-2xl); letter-spacing: -0.02em; } /* Accent-Italics aus dem Fallback / noscript bleiben lesbar, aber indigo */ .accent { color: var(--accent) !important; font-style: normal !important; } /* Links */ a { color: var(--fg); } a:hover { color: var(--accent); } ::selection { background: var(--accent); color: #fff; } /* Mono fürs „Engineering"-Detail bei Eyebrows */ .kz-eyebrow { font-family: var(--font-mono); letter-spacing: 0.10em; color: var(--accent); font-weight: 500; } /* ===================================================================== FANTASY-DEKO AUSBLENDEN ===================================================================== */ /* Sumi-Berge-Hintergrund im Hero */ [style*="sumi-mountains"], div[style*="sumi-mountains"] { background-image: none !important; background: transparent !important; } /* Alle dekorativen Tusche-/Blatt-/Tier-Bilder */ img[src*="/claude-design/sumi-"], img[src*="/claude-design/leaf-"], img[src*="/icon-sakura"], .kz-cherry-decoration, .kz-bamboo-decoration { display: none !important; } /* Fallende Blätter/Blüten (Canvas-Partikelsystem) — auf dieser Seite gibt es keine Daten-Charts, daher ist das Ausblenden aller sicher. */ canvas { display: none !important; } /* Falls Deko-Filter (Helligkeit runter) noch greift — neutralisieren */ img[src*="/claude-design/"] { filter: none !important; } /* ===================================================================== LIGHT-TECH HERO-GLOW (subtiler Gradient-Schimmer statt Berge) ===================================================================== */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 520px at 78% -8%, var(--lt-glow), transparent 60%), radial-gradient(700px 480px at 10% 4%, rgba(79,70,229,0.10), transparent 62%); } #root { position: relative; z-index: 1; } /* ===================================================================== BUTTONS / CTA — Indigo→Violett-Gradient, weiße Schrift (greift breite gängige Klassen + Inline-Ember-Backgrounds) ===================================================================== */ [class*="cta"], button, .kz-btn, a.kz-btn, [style*="background: var(--accent)"], [style*="background:var(--accent)"], [style*="#E85A2B"], [style*="#e85a2b"] { /* nur Hintergrund-orange-Treffer umfärben passiert per Override unten */ } .kz-btn, a.kz-btn, button.kz-btn { background: linear-gradient(135deg, var(--lt-indigo), var(--lt-violet)) !important; color: #fff !important; border: none !important; border-radius: var(--radius-pill); box-shadow: 0 6px 18px -6px rgba(79,70,229,0.45); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .kz-btn:hover, a.kz-btn:hover, button.kz-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(79,70,229,0.55); } .kz-btn--ghost, a.kz-btn--ghost { background: #fff !important; color: var(--lt-ink) !important; border: 1px solid var(--lt-line) !important; box-shadow: var(--shadow-xs); } /* ===================================================================== KARTEN / FLÄCHEN — weiß auf off-white, feine Linien & Tech-Schatten ===================================================================== */ [class*="card"], .kz-card { background: var(--lt-card) !important; border: 1px solid var(--lt-line) !important; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); } /* Story-Bilder „Ein Tag mit Lena": gerahmt, leicht gekippt, Tech-Schatten */ img[src*="/pitch/"] { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--lt-line); } /* ---- LOGO: logo-full.png ist cremefarben (für dunklen BG) → für hell invertieren ---- */ img[src*="logo-full.png"] { filter: invert(1) brightness(0.18) saturate(0) !important; } /* ---- INLINE-STYLE-BUTTONS (kein class) gezielt umfärben ---- */ /* Sekundär-Buttons mit hartkodiertem Amber bzw. Grün → neutrale helle Tech-Buttons */ a[style*="rgba(212, 138, 48"], a[style*="rgba(212,138,48"], a[style*="rgba(74, 155, 122"], a[style*="rgba(74,155,122"] { background: #fff !important; color: var(--lt-ink) !important; border: 1px solid var(--lt-line) !important; backdrop-filter: none !important; box-shadow: var(--shadow-xs) !important; } a[style*="rgba(212, 138, 48"]:hover, a[style*="rgba(212,138,48"]:hover, a[style*="rgba(74, 155, 122"]:hover, a[style*="rgba(74,155,122"]:hover { border-color: var(--lt-indigo) !important; color: var(--lt-indigo) !important; } /* Primärer "Erstgespräch"-Button (charcoal-Inline) → Indigo→Violett-Gradient */ a[style*="background: var(--kz-charcoal)"], a[style*="background:var(--kz-charcoal)"], a[style*="background: var(--kz-ember-deep)"], a[style*="background:var(--kz-ember-deep)"] { background: linear-gradient(135deg, var(--lt-indigo), var(--lt-violet)) !important; color: #fff !important; box-shadow: 0 6px 18px -6px rgba(79,70,229,0.45) !important; } /* ---- HERO-GLOW (180px radial Kreis) → indigo statt ember ---- */ div[style*="border-radius: 50%"][style*="radial-gradient"] { background: radial-gradient(circle, var(--lt-glow) 0%, transparent 70%) !important; } /* Muted-Text dunkler/lesbarer auf hell */ .kz-muted, .kz-muted * { color: var(--fg-muted) !important; } /* Pause-Marker / Hairlines an helles Theme anpassen */ .kz-pause { border-top-color: var(--lt-slate-2); } /* ===================================================================== CURSOR-GLOW — interaktiver Maus-Spotlight + Proximity-Leuchten (gesteuert von cursor-glow.js via --gx/--gy/--near) ===================================================================== */ /* 1) Globaler Spotlight, folgt der Maus, liegt HINTER dem Inhalt */ #lt-cursor-spot { position: fixed; top: 0; left: 0; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 0; will-change: transform; background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, rgba(79,70,229,0.10) 32%, transparent 68%); mix-blend-mode: multiply; /* schmiegt sich an hellen Hintergrund */ } /* 2) Headlines: leuchten am Cursor-Punkt auf (radialer Indigo-Schein, clippt auf die Buchstaben-Form via background-clip:text) */ @media (min-width: 720px) { h1, .kz-h1, h2, .kz-h2 { position: relative; } h1.lt-glow-on::after, .kz-h1.lt-glow-on::after, h2.lt-glow-on::after, .kz-h2.lt-glow-on::after { content: attr(data-text); } /* Schein-Layer über der Headline; Stärke = --near */ h1.lt-glow-on, .kz-h1.lt-glow-on, h2.lt-glow-on, .kz-h2.lt-glow-on { background-image: radial-gradient( 240px circle at var(--gx, 50%) var(--gy, 50%), rgba(124,58,237, calc(0.55 * var(--near, 0))) 0%, rgba(79,70,229, calc(0.30 * var(--near, 0))) 35%, transparent 70%); -webkit-background-clip: text; background-clip: text; transition: background-image 80ms linear; } } /* 3) Buttons & Karten-CTAs: weicher Schein + leichtes Anheben bei Nähe */ a.lt-glow-on, button.lt-glow-on, .kz-btn.lt-glow-on { box-shadow: 0 0 0 1px rgba(124,58,237, calc(0.45 * var(--near, 0))), 0 calc(8px * var(--near, 0)) calc(28px * var(--near, 0)) -6px rgba(79,70,229, calc(0.55 * var(--near, 0))), 0 6px 18px -6px rgba(79,70,229,0.30) !important; transition: box-shadow 120ms var(--ease-out), transform 120ms var(--ease-out); } /* Spotlight an mobilen/Touch-Geräten gar nicht erst stören */ @media (pointer: coarse) { #lt-cursor-spot { display: none; } }