/* ===================================================================== Petersen KI-Pilot — nativer PDS-Bereich (Spec 2026-07-16) „Glas-Cockpit bei Nacht": gleiche Architektur wie /agentur/ (Navy, Grid, Bezel, Reveal). Farb-Umkehr 2026-07-16: Ein-Akzent-Blau-System (Logo-Blau, #1684ff Struktur + #3b9eff Text-Akzent), Mint/Cyan-Zwei-Akzent entfällt. Alles strikt unter [data-brand="ki-pilot"] gescopet. Tokens: --kp-* · Komponenten/Keyframes: .kpx-* / kpx-* Referenziert PDS-Tokens (style.css) + cinematic-shared.css; ergänzt nur. Struktur-Vorlage: assets/css/agentur.css (1:1 adaptiert). ===================================================================== */ /* ---------------------------------------------------------- Satoshi (self-hosted, Fontshare) Variable-Font, nur Display (Hero-H1, Stat-Zahlen, Subnav-Brand). Preload nur auf ki-pilot-Seiten, font-display:swap. Fallback-Face „Satoshi Fallback" mit Metrik-Overrides (Anton-Rezept aus agentur.css) → minimiert CLS beim swap. */ @font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/assets/fonts/satoshi-var.woff2') format('woff2'); } @font-face { /* Fallback-Metriken an Arial angeglichen, damit die Zeilenhöhe beim Font-Swap nicht springt (Satoshi UPM 1000, ~normal-width geometric sans). */ font-family: 'Satoshi Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; size-adjust: 100%; } /* ============================================================ Tokens FARB-UMKEHR 2026-07-16: Ein-Akzent-Blau-System (Logo-Blau), Mint entfällt. --kp-blue = Marke/Struktur (Ränder, Glows, Button-Fill); --kp-accent (heller) = Text/Links/Eyebrows (höherer Kontrast); --kp-blue2 = heller Glint/Inset-Highlight; --kp-cyan bleibt nur als sparsamer Sekundär-Glint definiert. Alle strukturellen rgba(22,132,255,…) = --kp-blue. Bookend-/Zwei-Akzent-Disziplin entfällt. */ [data-brand="ki-pilot"] { --kp-blue: #1684ff; /* Marke/Struktur, Ränder, Glows, Button-Fill (auf Navy 5,5:1 → large/Icons/Buttons ok) */ --kp-accent: #3b9eff; /* heller: Eyebrows, Links, kleiner Text, Status (auf Navy ≈6:1 → fließtexttauglich) */ --kp-blue2: #20c8ff; /* heller Sekundär-Glint, Headline-Gradient-Mitte, helle Marken-Labels */ --kp-cyan: #22d3ee; /* Cyan nur noch sparsamer Sekundär-Glint (bewusst kaum genutzt) */ --kp-blue-deep: #0a6ed1; /* Ränder, Gradient-Enden, Hover (Weiß darauf 5,0:1) */ --kp-navy-ink: #04070f; /* dunkles Label (nur noch auf hellen Chips/Selection) */ --kp-panel: #071520; /* Sektions-Panel (Navy-Chrome, bleibt) */ --kp-panel-2: #0a1c2b; /* Card-Fläche (bleibt) */ --kp-hair: rgba(22,132,255,.16); --kp-hair-strong: rgba(22,132,255,.30); --kp-glow: 0 0 24px rgba(22,132,255,.28), 0 0 64px rgba(22,132,255,.12); --kp-grad-cta: linear-gradient(180deg,#1684ff,#1179e8 46%,#0a6ed1); /* Blau-Vollfläche, Label WEISS */ --kp-grad-headline: linear-gradient(180deg,#7db8ff,#3b9eff 46%,#1684ff); --font-satoshi: 'Satoshi', 'Satoshi Fallback', 'Manrope', system-ui, sans-serif; } /* ------------------------------------------------- Atmosphäre umtönen (PDS erbt) PDS-Header ist fixed (78px, transparent) und überlagert den ersten Hero. Content per body-padding-top unter dem Header freistellen (scoped). */ body[data-brand="ki-pilot"] { padding-top: 78px; } /* Fokus-Ring, Eyebrow, Bezel, Selektion → Blau-Akzent; Grid-Textur/Reveal bleiben PDS. */ [data-brand="ki-pilot"] :focus-visible { outline-color: var(--kp-accent); } [data-brand="ki-pilot"] ::selection { background: var(--kp-accent); color: var(--kp-navy-ink); } [data-brand="ki-pilot"] .eyebrow { color: var(--kp-accent); } [data-brand="ki-pilot"] .eyebrow::before { background: linear-gradient(90deg, var(--kp-accent), transparent); } /* Double-Bezel cyan umgetönt (ersetzt den blauen Ring aus cinematic-shared) */ [data-brand="ki-pilot"] .card, [data-brand="ki-pilot"] .pilot-card, [data-brand="ki-pilot"] .kpx-card { box-shadow: 0 0 0 7px rgba(22,132,255,.05), 0 0 0 8px var(--kp-hair), var(--shadow-card); } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .card:hover, [data-brand="ki-pilot"] .pilot-card:hover, [data-brand="ki-pilot"] .kpx-card:hover { box-shadow: 0 0 0 7px rgba(22,132,255,.08), 0 0 0 8px var(--kp-hair-strong), 0 26px 70px -20px rgba(22,132,255,.32); border-color: var(--kp-hair-strong); } } /* ============================================================ Lokale Subnav Unterm PDS-Header (kein Partial-Edit). Nicht sticky (Sticky-Gotcha). */ [data-brand="ki-pilot"] .kip-subnav { position: relative; z-index: 5; border-bottom: 1px solid var(--kp-hair); background: linear-gradient(180deg, rgba(7,21,32,.78), rgba(4,7,15,.4)); } [data-brand="ki-pilot"] .kip-subnav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 10px 0; } [data-brand="ki-pilot"] .kip-subnav-brand { font-family: var(--font-satoshi); font-weight: 700; font-size: .84rem; letter-spacing: .04em; color: var(--kp-blue2); margin-right: auto; display: inline-flex; align-items: center; gap: .6em; } [data-brand="ki-pilot"] .kip-subnav-brand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kp-accent); box-shadow: 0 0 10px rgba(22,132,255,.9); } /* Brand-Lockup (Icon + Titel + Tagline) — ersetzt den reinen Brand-Text in der Subnav. margin-right:auto schiebt die Nav-Links nach rechts. Verlinkt auf Start. */ [data-brand="ki-pilot"] .kip-lockup { display: inline-flex; align-items: center; gap: .7em; margin-right: auto; min-height: 48px; padding: 2px 10px 2px 2px; border-radius: 12px; transition: background .3s var(--ease); } [data-brand="ki-pilot"] .kip-lockup-icon { width: 44px; height: 44px; flex: none; border-radius: 11px; box-shadow: 0 0 0 1px var(--kp-hair-strong), 0 0 14px rgba(22,132,255,.28); } [data-brand="ki-pilot"] .kip-lockup-tx { display: grid; min-width: 0; line-height: 1.12; } [data-brand="ki-pilot"] .kip-lockup-title { font-family: var(--font-satoshi); font-weight: 700; font-size: 1.05rem; letter-spacing: .004em; color: #eef6ff; } [data-brand="ki-pilot"] .kip-lockup-title .kip-k { color: var(--kp-accent); } [data-brand="ki-pilot"] .kip-lockup-tag { margin-top: 3px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #ffffff; opacity: .95; } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kip-lockup:hover { background: rgba(22,132,255,.07); } [data-brand="ki-pilot"] .kip-lockup:hover .kip-lockup-icon { box-shadow: 0 0 0 1px var(--kp-accent), 0 0 18px rgba(22,132,255,.42); } } [data-brand="ki-pilot"] .kip-subnav a, [data-brand="ki-pilot"] .kip-subnav .kip-drop > button { position: relative; min-height: 40px; display: inline-flex; align-items: center; gap: .35em; padding: 0 12px; border-radius: 100px; font-family: inherit; font-size: .84rem; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; transition: color .3s var(--ease), background .3s var(--ease); } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kip-subnav a:hover, [data-brand="ki-pilot"] .kip-subnav .kip-drop > button:hover { color: var(--ice); background: rgba(22,132,255,.08); } } [data-brand="ki-pilot"] .kip-subnav a[aria-current="page"] { color: var(--ice); } [data-brand="ki-pilot"] .kip-subnav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--kp-accent), var(--kp-blue-deep)); } [data-brand="ki-pilot"] .kip-subnav .kip-chev { width: 13px; height: 13px; opacity: .7; transition: transform .3s var(--ease); } /* Desktop-Dropdown (CSS-only, hover + focus-within). Mobil: statischer Fluss. */ [data-brand="ki-pilot"] .kip-drop { position: relative; } [data-brand="ki-pilot"] .kip-drop-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px; padding: 8px; border-radius: 16px; border: 1px solid var(--kp-hair-strong); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), var(--kp-glow); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s; z-index: 20; } [data-brand="ki-pilot"] .kip-drop-menu.kip-drop-menu--1col { grid-template-columns: 1fr; min-width: 210px; } [data-brand="ki-pilot"] .kip-drop-menu a { min-height: 34px; padding: 7px 11px; border-radius: 10px; font-size: .82rem; font-weight: 500; color: var(--ice); } [data-brand="ki-pilot"] .kip-drop-menu a[aria-current="page"]::after { content: none; } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kip-drop-menu a:hover { background: rgba(22,132,255,.1); color: var(--kp-blue2); } } /* Rechte App-Pill (Login-Einstieg). RUHEZUSTAND deutlich sichtbar: Blau-Outline + Blau-Label (--kp-accent) + dezenter Fill/Glow. Keine Voll- Blaufläche (das bleibt den Primär-CTAs vorbehalten). Hover verstärkt. */ [data-brand="ki-pilot"] .kip-app-pill { min-height: 38px; margin-left: 6px; padding: 0 13px 0 15px !important; gap: .5em; border-radius: 100px; color: var(--kp-accent) !important; font-weight: 700 !important; border: 1px solid var(--kp-hair-strong); background: rgba(22,132,255,.09); box-shadow: 0 0 0 1px rgba(22,132,255,.12) inset, 0 0 16px rgba(22,132,255,.16); } [data-brand="ki-pilot"] .kip-app-pill .kip-app-arrow { width: 15px; height: 15px; flex: none; transition: transform .3s var(--ease-out); } [data-brand="ki-pilot"] .kip-app-pill::after { content: none !important; } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kip-app-pill:hover { color: var(--kp-blue2) !important; background: rgba(22,132,255,.16) !important; border-color: var(--kp-accent); box-shadow: 0 0 0 1px rgba(22,132,255,.32) inset, 0 0 24px rgba(22,132,255,.30); } [data-brand="ki-pilot"] .kip-app-pill:hover .kip-app-arrow { transform: translateX(3px); } } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kip-drop:hover .kip-drop-menu, [data-brand="ki-pilot"] .kip-drop:focus-within .kip-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); } [data-brand="ki-pilot"] .kip-drop:hover .kip-chev { transform: rotate(180deg); } } /* ================================================================ Hero „Pre-Flight": CSS/statik (kein Canvas → LCP-Schutz). Statische Cyan-Glows OHNE Drift (härter als CCA), kpx-rise-Zeilen (backwards-fill), 1 Licht-Sweep, Pre-Flight-Instrument (SVG-Gauge-Draw-in + Status-Dots + Stats). */ [data-brand="ki-pilot"] .kpx-hero { position: relative; isolation: isolate; padding: clamp(46px, 8vw, 104px) 0 clamp(46px, 7vw, 92px); overflow: clip; /* KEIN overflow:hidden (inset:0-Clip fürs Plexus-Canvas) */ } /* Plexus-Canvas — HINTER dem Hero-Text. Wenn per JS entfernt (reduce/save-data/ Touch), bleiben ::before-Wash + ::after-Grid als statischer Fallback. */ [data-brand="ki-pilot"] .kpx-hero-net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* Lesbarkeits-Veil ÜBER dem Canvas, UNTER dem Text (Kontrast für H1/Lead). */ [data-brand="ki-pilot"] .kpx-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4,7,15,.72) 0%, rgba(4,7,15,.34) 42%, transparent 70%), linear-gradient(0deg, rgba(4,7,15,.55), transparent 40%); } /* Statischer Instrumenten-Wash (::before) — KEIN Drift, KEIN background-attachment */ [data-brand="ki-pilot"] .kpx-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(56% 44% at 50% 0%, rgba(22,132,255,.14), transparent 62%), radial-gradient(30% 26% at 84% 22%, rgba(22,132,255,.07), transparent 60%); } /* Feines Instrumenten-Raster (statisch, sehr leise) */ [data-brand="ki-pilot"] .kpx-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(22,132,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,132,255,.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(72% 62% at 50% 34%, #000, transparent 78%); mask-image: radial-gradient(72% 62% at 50% 34%, #000, transparent 78%); } [data-brand="ki-pilot"] .kpx-hero > .wrap { position: relative; z-index: 1; } [data-brand="ki-pilot"] .kpx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); align-items: center; gap: clamp(30px, 5vw, 64px); } [data-brand="ki-pilot"] .kpx-hero-copy { min-width: 0; } [data-brand="ki-pilot"] .kpx-hero-badge { display: inline-flex; align-items: center; gap: .6em; padding: 6px 14px; border: 1px solid var(--kp-hair); border-radius: 100px; background: rgba(22,132,255,.06); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--kp-accent); } [data-brand="ki-pilot"] .kpx-hero-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kp-accent); box-shadow: 0 0 9px rgba(22,132,255,.9); } /* H1 — Satoshi-Display. NIE in .reveal (LCP steht ohne JS). Reine CSS-Keyframe- Entry (kpx-rise), fill-mode backwards → sichtbar auch ohne JS. hyphens:auto als Sicherheitsnetz für lange dt. Komposita bei ≤390px. */ [data-brand="ki-pilot"] .kpx-hero-title { font-family: var(--font-satoshi); font-weight: 800; /* clamp-Max bewusst gedeckelt: die 21-Zeichen-Komposita „Unternehmenssteuerung." bleibt so auf Desktop (1240) einzeilig in der Copy-Spalte. hyphens:auto ist das harte Sicherheitsnetz gegen Overflow bei 360/390. */ font-size: clamp(1.95rem, 4.6vw, 3.1rem); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; margin: 20px 0 0; position: relative; overflow: clip; overflow-clip-margin: 18px; } [data-brand="ki-pilot"] .kpx-hero-line { display: block; color: #eef6ff; animation: kpx-rise 700ms var(--ease-lux) backwards; } [data-brand="ki-pilot"] .kpx-hero-line:nth-child(1) { animation-delay: 40ms; } [data-brand="ki-pilot"] .kpx-hero-line:nth-child(2) { animation-delay: 140ms; } /* Gradient-Highlight-Wort (Bookend-Akzent, Cyan-Display-Verlauf) */ [data-brand="ki-pilot"] .kpx-hl { background: var(--kp-grad-headline); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--kp-blue2); /* Fallback, falls background-clip nicht greift */ } /* Einmaliger Licht-Sweep über die Headline (transform-only, overflow:clip-Maske) */ [data-brand="ki-pilot"] .kpx-hero-title::after { content: ""; position: absolute; top: -8%; bottom: -8%; left: -40%; width: 20%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(125,184,255,.20) 48%, rgba(22,132,255,.14) 58%, transparent); transform: translateX(0) skewX(-14deg); animation: kpx-sweep 950ms var(--ease-out) 640ms 1 both; mix-blend-mode: screen; } [data-brand="ki-pilot"] .kpx-hero-lead { max-width: 46ch; margin-top: 20px; } [data-brand="ki-pilot"] .kpx-hero-lead b { color: var(--kp-accent); font-weight: 600; } /* Trust-Chips (3) */ [data-brand="ki-pilot"] .kpx-trust { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 24px; padding: 0; list-style: none; } [data-brand="ki-pilot"] .kpx-trust li { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ice); } [data-brand="ki-pilot"] .kpx-trust svg { width: 16px; height: 16px; color: var(--kp-accent); flex: none; } /* Hero-CTAs */ [data-brand="ki-pilot"] .kpx-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* --------------------------------------------------- Hero-Bühne: rundes Badge-Logo Rechte Spalte. Statischer Cyan-Glow (KEIN Drift/Endlos-Paint) + Hairline-Ring (Double-Bezel-Anmutung). Badge as-is (petersen-badge.png), loading=eager. */ [data-brand="ki-pilot"] .kpx-hero-stage { position: relative; justify-self: center; display: grid; place-items: center; width: 100%; max-width: clamp(300px, 40vw, 440px); aspect-ratio: 1 / 1; animation: kpx-rise 820ms var(--ease-lux) 120ms backwards; } /* Statischer Glow-Wash hinter dem Badge */ [data-brand="ki-pilot"] .kpx-hero-glow { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(22,132,255,.34), rgba(22,132,255,.07) 52%, transparent 72%); filter: blur(46px); pointer-events: none; } /* Hairline-Ring (Instrument-Rahmen um das runde Logo) */ [data-brand="ki-pilot"] .kpx-hero-ring { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid var(--kp-hair-strong); box-shadow: 0 0 0 1px rgba(22,132,255,.05), inset 0 0 40px rgba(22,132,255,.12); pointer-events: none; } [data-brand="ki-pilot"] .kpx-hero-logo { position: relative; z-index: 1; width: 78%; filter: drop-shadow(0 20px 46px rgba(22,132,255,.32)); } [data-brand="ki-pilot"] .kpx-hero-logo img { display: block; width: 100%; height: auto; border-radius: 50%; } /* ---------------------------------------------------- Primär-CTA (Blau-Vollfläche) Original-Look: Blau-Gradient + WEISSES Label (#1684ff+Weiß ≈3,6:1, für Button- Large-Text ok). Klassenname .kpx-btn-mint bleibt (HTML-Kompat). :active .96. */ [data-brand="ki-pilot"] .kpx-btn-mint { position: relative; overflow: hidden; min-height: 48px; background: var(--kp-grad-cta); color: #fff; box-shadow: 0 0 0 1px rgba(125,184,255,.35) inset, var(--kp-glow); } [data-brand="ki-pilot"] .kpx-btn-mint svg { color: #fff; } [data-brand="ki-pilot"] .kpx-btn-mint::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); clip-path: inset(0 100% 0 0); transition: clip-path .2s var(--ease-out); pointer-events: none; } [data-brand="ki-pilot"] .kpx-btn-mint:active { transform: scale(.96); } /* Blau-Primär (Mid-Page-Primär-CTA, z.B. „Import besprechen"). Gleiche Blau- Vollfläche + weißes Label wie der Haupt-CTA (Ein-Akzent-System). Klassenname .kpx-btn-cyan bleibt (HTML-Kompat). */ [data-brand="ki-pilot"] .kpx-btn-cyan { min-height: 48px; background: var(--kp-grad-cta); color: #fff; box-shadow: 0 0 0 1px rgba(125,184,255,.4) inset, var(--kp-glow); } [data-brand="ki-pilot"] .kpx-btn-cyan svg { color: #fff; } [data-brand="ki-pilot"] .kpx-btn-cyan:active { transform: scale(.96); } /* Ghost-Sekundär (cyan getönt) */ [data-brand="ki-pilot"] .kpx-btn-ghost { min-height: 48px; background: rgba(22,132,255,.06); color: var(--ice); border: 1px solid var(--kp-hair-strong); } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kpx-btn-ghost:hover { border-color: var(--kp-accent); background: rgba(22,132,255,.1); } [data-brand="ki-pilot"] .kpx-btn-mint:hover::before { clip-path: inset(0 0 0 0); transition: clip-path .3s var(--ease-out); } [data-brand="ki-pilot"] .kpx-btn-mint:hover { box-shadow: 0 0 0 1px rgba(125,184,255,.55) inset, 0 22px 60px rgba(22,132,255,.3); } [data-brand="ki-pilot"] .kpx-btn-cyan:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(125,184,255,.6) inset, 0 22px 60px rgba(22,132,255,.3); } } /* ============================================= Slogan-Trenner (Hero → Content) Muster wie Bestand .header-claim: Glow-Strich links + zentrierter Text + Glow-Strich rechts. Nur transform/opacity (Entry via .reveal), kein Endlos-Paint. */ [data-brand="ki-pilot"] .kpx-claim { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); max-width: 1120px; margin: 0 auto; padding: clamp(30px, 5vw, 52px) 24px; } [data-brand="ki-pilot"] .kpx-claim-line { flex: 1 1 auto; min-width: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--kp-hair-strong) 42%, var(--kp-blue)); box-shadow: 0 0 12px rgba(22,132,255,.28); } [data-brand="ki-pilot"] .kpx-claim-line:last-child { background: linear-gradient(270deg, transparent, var(--kp-hair-strong) 42%, var(--kp-blue)); } [data-brand="ki-pilot"] .kpx-claim-text { flex: 0 1 auto; margin: 0; text-align: center; font-family: var(--font-satoshi); font-weight: 700; font-size: clamp(1rem, 2.3vw, 1.48rem); letter-spacing: -.01em; line-height: 1.22; color: #eef6ff; text-wrap: balance; } [data-brand="ki-pilot"] .kpx-claim-text em { font-style: normal; background: var(--kp-grad-headline); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--kp-accent); /* Fallback, falls background-clip nicht greift */ } /* --------------------------------------------------- Inline-Blau-Highlight (H2) Solide Blau-Betonung für Teil-Phrasen in H2 (KEIN Gradient-Text auf H2). */ [data-brand="ki-pilot"] .kpx-hl-c { color: var(--kp-accent); } /* Gerahmtes Kontext-Bild (Einrichtung / System-Aufbau / Wachstum): Hairline + Inset-Highlight + statischer Cyan-Glow. Bilder as-is (WebP + jpg). */ [data-brand="ki-pilot"] .kpx-figure { position: relative; margin: 0; border-radius: var(--radius); padding: 8px; background: linear-gradient(165deg, rgba(13,34,51,.9), rgba(7,16,25,.9)); border: 1px solid var(--kp-hair-strong); box-shadow: inset 0 1px 0 rgba(125,184,255,.12), 0 34px 80px -40px rgba(22,132,255,.4), 0 18px 44px -26px rgba(0,0,0,.7); isolation: isolate; } [data-brand="ki-pilot"] .kpx-figure::before { content: ""; position: absolute; inset: -6%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(22,132,255,.2), transparent 70%); filter: blur(46px); pointer-events: none; } [data-brand="ki-pilot"] .kpx-figure picture { display: block; } [data-brand="ki-pilot"] .kpx-figure img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 6px); } /* ============================================= Ihre eigene App. Ihr System. */ [data-brand="ki-pilot"] .kpx-app { padding: clamp(58px, 8vw, 122px) 0; overflow: clip; } [data-brand="ki-pilot"] .kpx-app-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(30px, 5vw, 64px); } [data-brand="ki-pilot"] .kpx-app-copy .lead { margin-top: 14px; } [data-brand="ki-pilot"] .kpx-featrows { list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0; display: grid; gap: 14px; } [data-brand="ki-pilot"] .kpx-featrows li { display: flex; align-items: flex-start; gap: 14px; } [data-brand="ki-pilot"] .kpx-featrows .kpx-pic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); color: var(--kp-accent); } [data-brand="ki-pilot"] .kpx-featrows .kpx-pic svg { width: 21px; height: 21px; } [data-brand="ki-pilot"] .kpx-featrows b { display: block; font-size: 1.02rem; color: var(--ice); } [data-brand="ki-pilot"] .kpx-featrows p { margin-top: 3px; font-size: .9rem; color: var(--muted); line-height: 1.5; } /* ------------------------------------------ Geräte-Band „Verfügbar auf allen Geräten" Aufwertung des früheren schwachen Feature-Rows: zentriertes Band unter dem App- Grid, 4 Geräte-Kacheln mit sauberen Lucide-Device-Icons (Smartphone/Tablet/ Laptop/PC) im getönten Blau-Kästchen. Statisch, Hover-Lift hinter hover/fine. */ [data-brand="ki-pilot"] .kpx-devices { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(30px, 4vw, 46px); border-top: 1px solid var(--kp-hair); text-align: center; } [data-brand="ki-pilot"] .kpx-devices-title { margin: 0 0 clamp(20px, 3vw, 28px); font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--kp-accent); } [data-brand="ki-pilot"] .kpx-device-strip { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } [data-brand="ki-pilot"] .kpx-device-strip li { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 22px 12px 20px; border-radius: var(--radius); border: 1px solid var(--kp-hair); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); transition: transform .45s var(--ease-lux), border-color .4s var(--ease), box-shadow .5s var(--ease); } [data-brand="ki-pilot"] .kpx-device-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); color: var(--kp-accent); } [data-brand="ki-pilot"] .kpx-device-ic svg { width: 26px; height: 26px; } [data-brand="ki-pilot"] .kpx-device-label { font-size: .84rem; font-weight: 600; color: var(--ice); letter-spacing: .01em; } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kpx-device-strip li:hover { transform: translateY(-4px); border-color: var(--kp-hair-strong); box-shadow: 0 20px 50px -26px rgba(22,132,255,.42); } } /* ============================================= Persönlicher Einrichtungsservice */ [data-brand="ki-pilot"] .kpx-service { padding: clamp(58px, 8vw, 122px) 0; background: var(--night-2); overflow: clip; } [data-brand="ki-pilot"] .kpx-service-inner { max-width: 1120px; margin: 0 auto; text-align: center; } [data-brand="ki-pilot"] .kpx-service-inner .lead { max-width: 70ch; margin: 16px auto 0; } [data-brand="ki-pilot"] .kpx-service-visual { margin-top: clamp(30px, 4vw, 48px); } [data-brand="ki-pilot"] .kpx-service-hint { margin-top: 16px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--slate-text); } /* ============================================= So entsteht Ihr System */ [data-brand="ki-pilot"] .kpx-build { padding: clamp(58px, 8vw, 122px) 0; overflow: clip; } [data-brand="ki-pilot"] .kpx-build-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 5vw, 64px); } [data-brand="ki-pilot"] .kpx-build-copy .lead { margin-top: 14px; } /* ============================================= Wachstum */ [data-brand="ki-pilot"] .kpx-grow { padding: clamp(58px, 8vw, 122px) 0; background: var(--night-2); overflow: clip; } [data-brand="ki-pilot"] .kpx-grow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 5vw, 64px); } [data-brand="ki-pilot"] .kpx-grow-copy .lead { margin-top: 14px; } [data-brand="ki-pilot"] .kpx-grow-copy .kpx-hero-cta { margin-top: 26px; } /* ============================================================ Piloten-Grid .kpx-pilots > .wrap > .grid.stagger (auto-fit minmax 250). 10 .pilot-card erben Bezel/Hover (cyan) + Card-Glare (fx.js). */ [data-brand="ki-pilot"] .kpx-pilots { padding: clamp(58px, 8vw, 122px) 0; } [data-brand="ki-pilot"] .kpx-shead { max-width: 64ch; margin-bottom: clamp(30px, 4vw, 50px); } [data-brand="ki-pilot"] .kpx-shead .lead { margin-top: 14px; } [data-brand="ki-pilot"] .kpx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } [data-brand="ki-pilot"] .pilot-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; border-radius: var(--radius); border: 1px solid var(--kp-hair); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease-lux), border-color .4s var(--ease), box-shadow .5s var(--ease); } /* Card-Glare (fx.js setzt --mx/--my; .pilot-card ist in der Selektorliste) */ [data-brand="ki-pilot"] .pilot-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(22,132,255,.16), transparent 60%); transition: opacity .4s var(--ease); } [data-brand="ki-pilot"] .pilot-card .kpx-pic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); color: var(--kp-accent); transition: transform .35s var(--ease-lux); } [data-brand="ki-pilot"] .pilot-card .kpx-pic svg { width: 23px; height: 23px; } [data-brand="ki-pilot"] .pilot-card h3 { font-size: 1.1rem; letter-spacing: -.01em; margin-top: 4px; } [data-brand="ki-pilot"] .pilot-card p { color: var(--muted); font-size: .9rem; line-height: 1.55; flex: 1; } [data-brand="ki-pilot"] .pilot-card .kpx-pilot-go { display: inline-flex; align-items: center; gap: .5em; margin-top: 4px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kp-accent); } [data-brand="ki-pilot"] .pilot-card .kpx-pilot-go svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); } /* „Gratis"-Tag (VersandPilot) */ [data-brand="ki-pilot"] .pilot-card .kpx-pilot-tag { position: absolute; top: 16px; right: 16px; padding: 3px 9px; border-radius: 100px; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kp-accent); background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.32); } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .pilot-card:hover { transform: translateY(-6px); } [data-brand="ki-pilot"] .pilot-card:hover::after { opacity: 1; } [data-brand="ki-pilot"] .pilot-card:hover .kpx-pic { transform: translateY(-2px); } [data-brand="ki-pilot"] .pilot-card:hover .kpx-pilot-go svg { transform: translateX(4px); } } /* ============================================= 3 Schritte „So entsteht Ihr System" (in der Build-Sektion, ruhig, .reveal/.stagger). Der Hero-Plexus ist der EINE Signature-Canvas — kein Section-Canvas mehr. */ /* System-Sub-Sektion: 3 Schritte „So entsteht Ihr System" (ruhig, .reveal) */ [data-brand="ki-pilot"] .kpx-steps { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; } [data-brand="ki-pilot"] .kpx-step { border-radius: var(--radius); border: 1px solid var(--kp-hair); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); padding: 22px 22px 24px; } [data-brand="ki-pilot"] .kpx-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px; font-family: var(--font-mono); font-weight: 600; color: var(--kp-accent); background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); } [data-brand="ki-pilot"] .kpx-step b { display: block; font-size: 1.02rem; color: var(--ice); margin-bottom: 6px; } [data-brand="ki-pilot"] .kpx-step p { color: var(--muted); font-size: .9rem; line-height: 1.6; } [data-brand="ki-pilot"] .kpx-build-copy .kpx-steps { grid-template-columns: 1fr; margin-top: clamp(24px, 3vw, 32px); gap: 12px; } /* ============================================= Sicher. Flexibel. In der Cloud. Security-Copy + Plattform-Querverweise (Cloud / KI-Erkennung / Custom Features). */ [data-brand="ki-pilot"] .kpx-secure { padding: clamp(58px, 8vw, 122px) 0; overflow: clip; } [data-brand="ki-pilot"] .kpx-secure-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(30px, 5vw, 64px); } [data-brand="ki-pilot"] .kpx-secure-copy .lead { margin-top: 14px; } [data-brand="ki-pilot"] .kpx-secure-points { list-style: none; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; } [data-brand="ki-pilot"] .kpx-secure-points li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ice); } [data-brand="ki-pilot"] .kpx-secure-points svg { width: 18px; height: 18px; color: var(--kp-accent); flex: none; } /* Plattform-Karten (Cloud / KI-Erkennung / Custom Features) */ [data-brand="ki-pilot"] .kpx-platform-cards { list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0; display: grid; gap: 12px; } [data-brand="ki-pilot"] .kpx-platform-cards a { display: flex; align-items: center; gap: 15px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--kp-hair); background: rgba(10,28,43,.5); transition: transform .4s var(--ease-lux), border-color .4s var(--ease); } [data-brand="ki-pilot"] .kpx-platform-cards .kpx-pic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); color: var(--kp-accent); } [data-brand="ki-pilot"] .kpx-platform-cards .kpx-pic svg { width: 21px; height: 21px; } [data-brand="ki-pilot"] .kpx-platform-cards .kpx-ptx { min-width: 0; flex: 1; } [data-brand="ki-pilot"] .kpx-platform-cards b { display: block; font-size: 1.02rem; color: var(--ice); } [data-brand="ki-pilot"] .kpx-platform-cards span.kpx-pd { display: block; margin-top: 3px; font-size: .84rem; color: var(--muted); line-height: 1.5; } [data-brand="ki-pilot"] .kpx-platform-cards .kpx-pgo { flex: none; color: var(--kp-accent); display: grid; place-items: center; } [data-brand="ki-pilot"] .kpx-platform-cards .kpx-pgo svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kpx-platform-cards a:hover { transform: translateX(4px); border-color: var(--kp-hair-strong); } [data-brand="ki-pilot"] .kpx-platform-cards a:hover .kpx-pgo svg { transform: translateX(4px); } } /* Bordmonitor: Double-Bezel (Schale + Kern) + Instrumenten-Chrome-Leiste. Flach (kein Tilt). Cyan-Glow darunter. */ [data-brand="ki-pilot"] .kpx-monitor { position: relative; } [data-brand="ki-pilot"] .kpx-monitor::before { content: ""; position: absolute; inset: -8%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(22,132,255,.26), transparent 70%); filter: blur(46px); pointer-events: none; } [data-brand="ki-pilot"] .kpx-bezel { position: relative; z-index: 1; padding: 10px; border-radius: 24px; background: linear-gradient(165deg, #0d2233, #071019); border: 1px solid var(--kp-hair-strong); box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(125,184,255,.14), 0 40px 90px -40px rgba(22,132,255,.4); } [data-brand="ki-pilot"] .kpx-bezel-inner { border-radius: 15px; overflow: hidden; border: 1px solid rgba(0,0,0,.5); background: #04070f; box-shadow: inset 0 1px 0 rgba(125,184,255,.1); } [data-brand="ki-pilot"] .kpx-instrument-strip { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--kp-hair); background: rgba(7,21,32,.9); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--slate-text); } [data-brand="ki-pilot"] .kpx-instrument-strip .kpx-strip-dots { display: inline-flex; gap: 5px; } [data-brand="ki-pilot"] .kpx-instrument-strip .kpx-strip-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(143,162,194,.4); } [data-brand="ki-pilot"] .kpx-instrument-strip .kpx-strip-url { color: var(--muted); } [data-brand="ki-pilot"] .kpx-instrument-strip .kpx-strip-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--kp-accent); letter-spacing: .12em; } [data-brand="ki-pilot"] .kpx-instrument-strip .kpx-strip-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kp-accent); box-shadow: 0 0 8px rgba(22,132,255,.9); } [data-brand="ki-pilot"] .kpx-bezel-inner img { display: block; width: 100%; height: auto; } /* ============================================================ Import/Datenübernahme */ [data-brand="ki-pilot"] .kpx-import { padding: clamp(58px, 8vw, 118px) 0; background: var(--night-2); overflow: clip; } [data-brand="ki-pilot"] .kpx-import-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 56px); } [data-brand="ki-pilot"] .kpx-import-copy .lead { margin-top: 14px; } [data-brand="ki-pilot"] .kpx-import-copy .kpx-hero-cta { margin-top: 26px; } [data-brand="ki-pilot"] .kpx-import-card { border-radius: var(--radius); border: 1px solid var(--kp-hair); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); padding: 26px 26px 28px; } [data-brand="ki-pilot"] .kpx-import-card h3 { font-size: 1.05rem; margin-bottom: 16px; } [data-brand="ki-pilot"] .kpx-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } [data-brand="ki-pilot"] .kpx-sources span { padding: 6px 12px; border-radius: 100px; border: 1px solid var(--kp-hair); background: rgba(4,7,15,.4); font-family: var(--font-mono); font-size: .72rem; color: var(--ice); } [data-brand="ki-pilot"] .kpx-import-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } [data-brand="ki-pilot"] .kpx-import-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: .92rem; line-height: 1.5; } [data-brand="ki-pilot"] .kpx-import-list li svg { width: 17px; height: 17px; color: var(--kp-accent); flex: none; margin-top: 2px; } /* ============================================================ Vorteile-Karten „Mehr Überblick. Weniger Aufwand. Volle Kontrolle." — 4 Premium-Karten mit Lucide-Line-Icons (zap / shield-check / network / eye) im getönten Blau-Kästchen. Panel-Fläche + Hairline, .reveal/.stagger, Hover-Lift/Glow hinter hover/fine. */ [data-brand="ki-pilot"] .kpx-benefits { padding: clamp(58px, 8vw, 122px) 0; overflow: clip; } [data-brand="ki-pilot"] .kpx-benefits-head { max-width: 66ch; margin-bottom: clamp(30px, 4vw, 50px); } [data-brand="ki-pilot"] .kpx-benefits-head .lead { margin-top: 14px; } [data-brand="ki-pilot"] .kpx-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } [data-brand="ki-pilot"] .kpx-benefit-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; border-radius: var(--radius); border: 1px solid var(--kp-hair); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease-lux), border-color .4s var(--ease), box-shadow .5s var(--ease); } /* Statischer Hover-Glow (erscheint nur bei Hover, kein Endlos-Paint) */ [data-brand="ki-pilot"] .kpx-benefit-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at 50% 0%, rgba(22,132,255,.16), transparent 62%); transition: opacity .4s var(--ease); } [data-brand="ki-pilot"] .kpx-benefit-card .kpx-pic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); color: var(--kp-accent); transition: transform .35s var(--ease-lux); } [data-brand="ki-pilot"] .kpx-benefit-card .kpx-pic svg { width: 23px; height: 23px; } [data-brand="ki-pilot"] .kpx-benefit-card h3 { font-size: 1.1rem; letter-spacing: -.01em; margin-top: 4px; } [data-brand="ki-pilot"] .kpx-benefit-card p { color: var(--muted); font-size: .92rem; line-height: 1.55; } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kpx-benefit-card:hover { transform: translateY(-6px); border-color: var(--kp-hair-strong); } [data-brand="ki-pilot"] .kpx-benefit-card:hover::after { opacity: 1; } [data-brand="ki-pilot"] .kpx-benefit-card:hover .kpx-pic { transform: translateY(-2px); } } /* ================================================================= Final-CTA Blau-Vollfläche als Schluss-Signal, weißes Label (Ein-Akzent-Blau-System). */ [data-brand="ki-pilot"] .kpx-final { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 128px) 0; text-align: center; isolation: isolate; background: var(--night-2); } [data-brand="ki-pilot"] .kpx-final::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 68% at 22% 26%, rgba(22,132,255,.20), transparent 60%), radial-gradient(52% 60% at 82% 64%, rgba(22,132,255,.16), transparent 60%); } [data-brand="ki-pilot"] .kpx-final > .wrap { position: relative; z-index: 1; } [data-brand="ki-pilot"] .kpx-final-eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--kp-accent); padding: 6px 14px; border: 1px solid var(--kp-hair-strong); border-radius: 100px; background: rgba(22,132,255,.06); } [data-brand="ki-pilot"] .kpx-final-eyebrow svg { width: 15px; height: 15px; color: var(--kp-accent); } [data-brand="ki-pilot"] .kpx-final h2 { margin: 22px auto 0; max-width: 20ch; } [data-brand="ki-pilot"] .kpx-final h2 .kpx-hl { background: var(--kp-grad-headline); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--kp-blue2); } [data-brand="ki-pilot"] .kpx-final-sub { max-width: 54ch; margin: 20px auto 0; } [data-brand="ki-pilot"] .kpx-final-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } [data-brand="ki-pilot"] .kpx-final-reassure { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; padding: 0; } [data-brand="ki-pilot"] .kpx-final-reassure li { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ice); } [data-brand="ki-pilot"] .kpx-final-reassure svg { width: 16px; height: 16px; color: var(--kp-accent); } [data-brand="ki-pilot"] .kpx-final-tagline { margin-top: clamp(30px, 4vw, 48px); font-family: var(--font-satoshi); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.25rem, 2.6vw, 1.9rem); color: var(--kp-blue2); } [data-brand="ki-pilot"] .kpx-final-tagline .kpx-mint { color: var(--kp-accent); } /* ============================================================ Footer-KI-Pilot-Zeile Zusatz-Zeile (nur ki-pilot-Seiten): AGB, Zur App, info@petersen-ki-pilot.de. */ [data-brand="ki-pilot"] .kpx-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--kp-hair); font-size: .84rem; } [data-brand="ki-pilot"] .kpx-footer-row .kpx-footer-brand { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-satoshi); font-weight: 700; color: var(--kp-blue2); margin-right: auto; } [data-brand="ki-pilot"] .kpx-footer-row .kpx-footer-brand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kp-accent); box-shadow: 0 0 8px rgba(22,132,255,.8); } [data-brand="ki-pilot"] .kpx-footer-row a { color: var(--muted); transition: color .3s var(--ease); } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kpx-footer-row a:hover { color: var(--kp-accent); } } [data-brand="ki-pilot"] .kpx-footer-row a.kpx-footer-app { color: var(--kp-accent); font-weight: 600; } /* ===================================================================== PILOTEN-TEMPLATE (bueropilot = Referenz für alle 10 Piloten) Kinoreif, aber CSS-only + fx.js-Reveal/Stagger/countUp/Glare. KEIN Canvas (×10-Risiko), KEIN Endlos-Paint (Glows statisch, nur transform/opacity), alle Hover hinter hover/fine, jeder Effekt reduce/no-anim-safe. Wiederverwendbar von den 9 anderen Piloten (nur Copy/Bilder/FAQ tauschen). ===================================================================== */ /* ------------------------------------------------------- Piloten-Hero (kein Canvas) Nutzt .kpx-hero (statischer ::before-Wash + ::after-Grid = Plexus-Ersatz). Rechts ein Bordmonitor mit dem Hero-Screenshot. Bild sofort sichtbar (LCP), nur transform-Entry (Opazität bleibt 1 → zählt sofort als Paint). */ @media (min-width: 961px) { [data-brand="ki-pilot"] .kpx-hero--pilot .kpx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); } } [data-brand="ki-pilot"] .kpx-hero-shot { position: relative; width: 100%; justify-self: end; max-width: 560px; animation: kpx-rise-y 820ms var(--ease-lux) 140ms backwards; } [data-brand="ki-pilot"] .kpx-monitor--hero { margin: 0; } /* Screenshot-Mask-Reveal (Signature, clip-path one-shot, IO über .reveal). Der Bezel steht sofort; nur der „Bildschirm" wischt beim Einscrollen auf („Monitor bootet"). .kpx-mask hebt den generischen .reveal-Look auf. */ .js [data-brand="ki-pilot"] .kpx-monitor.kpx-mask { opacity: 1; transform: none; filter: none; } .js [data-brand="ki-pilot"] .kpx-monitor.kpx-mask .kpx-bezel-inner picture { display: block; clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--ease-lux); } .js [data-brand="ki-pilot"] .kpx-monitor.kpx-mask.in .kpx-bezel-inner picture { clip-path: inset(0 0 0 0); } /* ---------------------------------------------------- Cockpit-Metriken (countUp) Instrumenten-Readout statt SaaS-Hero-Metrik: Mono-Label, solide Blau-Zahl (kein Gradient-Text), Hairline-Top-Akzent. countUp via fx.js [data-count]. */ [data-brand="ki-pilot"] .kpx-metrics-sec { padding: clamp(6px, 2vw, 16px) 0 clamp(20px, 3vw, 34px); } [data-brand="ki-pilot"] .kpx-metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } [data-brand="ki-pilot"] .kpx-metric { position: relative; text-align: center; padding: 26px 16px 24px; border-radius: var(--radius); border: 1px solid var(--kp-hair); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); transition: transform .5s var(--ease-lux), border-color .4s var(--ease), box-shadow .5s var(--ease); } [data-brand="ki-pilot"] .kpx-metric::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--kp-accent), transparent); opacity: .8; } [data-brand="ki-pilot"] .kpx-metric-n { display: block; font-family: var(--font-satoshi); font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1; letter-spacing: -.02em; color: var(--kp-blue2); } [data-brand="ki-pilot"] .kpx-metric-glyph { font-feature-settings: "tnum" 1; } [data-brand="ki-pilot"] .kpx-metric-l { display: block; margin-top: 12px; font-size: .82rem; line-height: 1.42; color: var(--muted); } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kpx-metric:hover { transform: translateY(-4px); border-color: var(--kp-hair-strong); box-shadow: 0 20px 50px -26px rgba(22,132,255,.42); } } /* --------------------------------------------------------- Feature-Sektionen Generischer Sektions-Rhythmus für Piloten-Content. .alt = getöntes Panel. */ [data-brand="ki-pilot"] .kpx-feature { position: relative; padding: clamp(52px, 7vw, 104px) 0; overflow: clip; } [data-brand="ki-pilot"] .kpx-feature.alt { background: var(--night-2); } [data-brand="ki-pilot"] .kpx-feature .kpx-shead { max-width: 66ch; margin: 0 auto clamp(30px, 4vw, 50px); text-align: center; } [data-brand="ki-pilot"] .kpx-feature .kpx-shead .lead { margin: 14px auto 0; max-width: 72ch; } [data-brand="ki-pilot"] .kpx-support-visual { margin-bottom: clamp(30px, 4vw, 50px); } /* --------------------------------------------------------------- Karten-System .kpx-cards (auto-fit) · .two (2 gleich) · .bento (asymmetrisch: Feature + Liste). .kpx-card erbt den Blau-Doppel-Bezel (globale .kpx-card-Regel oben). */ [data-brand="ki-pilot"] .kpx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } [data-brand="ki-pilot"] .kpx-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-brand="ki-pilot"] .kpx-cards.bento { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); align-items: stretch; } [data-brand="ki-pilot"] .kpx-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; border-radius: var(--radius); border: 1px solid var(--kp-hair); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease-lux), border-color .4s var(--ease), box-shadow .5s var(--ease); } /* Statischer Hover-Glow (nur bei Hover, kein Idle-Paint) */ [data-brand="ki-pilot"] .kpx-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(280px circle at 50% -10%, rgba(22,132,255,.18), transparent 62%); transition: opacity .4s var(--ease); } [data-brand="ki-pilot"] .kpx-card--feature { padding: 30px 28px 32px; gap: 14px; } [data-brand="ki-pilot"] .kpx-card--mini { padding: 20px 20px 22px; gap: 8px; } [data-brand="ki-pilot"] .kpx-card .eyebrow { margin: 2px 0 -2px; } [data-brand="ki-pilot"] .kpx-card h2 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); line-height: 1.14; letter-spacing: -.015em; color: var(--ice); } [data-brand="ki-pilot"] .kpx-card h3 { font-size: 1.1rem; letter-spacing: -.01em; color: var(--ice); } [data-brand="ki-pilot"] .kpx-card--mini h3 { font-size: 1rem; } [data-brand="ki-pilot"] .kpx-card > p { color: var(--muted); font-size: .94rem; line-height: 1.6; } [data-brand="ki-pilot"] .kpx-card--mini > p { font-size: .88rem; } [data-brand="ki-pilot"] .kpx-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); color: var(--kp-accent); transition: transform .35s var(--ease-lux); } [data-brand="ki-pilot"] .kpx-ic svg { width: 23px; height: 23px; } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kpx-card:hover { transform: translateY(-6px); border-color: var(--kp-hair-strong); } [data-brand="ki-pilot"] .kpx-card:hover::after { opacity: 1; } [data-brand="ki-pilot"] .kpx-card:hover .kpx-ic { transform: translateY(-2px); } } /* Check-Liste (blaue Häkchen-Kästchen, reine CSS-Marker) */ [data-brand="ki-pilot"] .kpx-check-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; } [data-brand="ki-pilot"] .kpx-check-list li { position: relative; padding-left: 30px; color: var(--muted); font-size: .94rem; line-height: 1.5; } [data-brand="ki-pilot"] .kpx-check-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 7px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.32); } [data-brand="ki-pilot"] .kpx-check-list li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 5px; border-left: 2px solid var(--kp-accent); border-bottom: 2px solid var(--kp-accent); transform: rotate(-45deg); } /* ------------------------------------------------------------- Split (Copy+Media) .reverse = Media links / Copy rechts (Desktop). .kpx-mask sitzt auf dem Monitor. */ [data-brand="ki-pilot"] .kpx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(30px, 5vw, 64px); } [data-brand="ki-pilot"] .kpx-split--balanced { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; } [data-brand="ki-pilot"] .kpx-split.reverse .kpx-split-copy { order: 2; } [data-brand="ki-pilot"] .kpx-split-copy .kpx-check-list { margin-top: 20px; } [data-brand="ki-pilot"] .kpx-split-copy .lead { margin-top: 14px; } /* Workflow-Chips (Angebot → Auftrag → … , statisch, Mono) */ [data-brand="ki-pilot"] .kpx-flow-chips { list-style: none; margin: 22px 0 4px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } [data-brand="ki-pilot"] .kpx-flow-chips li { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 100px; border: 1px solid var(--kp-hair-strong); background: rgba(22,132,255,.07); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ice); } [data-brand="ki-pilot"] .kpx-flow-chips li:not(:last-child)::after { content: "→"; margin-left: 10px; color: var(--kp-accent); font-weight: 700; } /* Mini-Karten-Grid (2×2, Verknüpfung) */ [data-brand="ki-pilot"] .kpx-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* --------------------------------------------------------------- Wachstum-Banner */ [data-brand="ki-pilot"] .kpx-growth { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 52px); flex-wrap: wrap; padding: clamp(30px, 4vw, 52px); border-radius: calc(var(--radius) + 4px); border: 1px solid var(--kp-hair-strong); background: linear-gradient(120deg, var(--kp-panel-2), var(--kp-panel)); overflow: hidden; isolation: isolate; } [data-brand="ki-pilot"] .kpx-growth::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 130% at 86% 18%, rgba(22,132,255,.18), transparent 60%); } [data-brand="ki-pilot"] .kpx-growth-copy { max-width: 60ch; } [data-brand="ki-pilot"] .kpx-growth-copy .h2 { margin-top: 8px; } [data-brand="ki-pilot"] .kpx-growth-copy > p { margin-top: 12px; color: var(--muted); line-height: 1.6; } [data-brand="ki-pilot"] .kpx-growth-icons { display: flex; gap: 14px; flex: none; } [data-brand="ki-pilot"] .kpx-growth-icons span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); color: var(--kp-accent); } [data-brand="ki-pilot"] .kpx-growth-icons svg { width: 28px; height: 28px; } /* ------------------------------------------------------------- FAQ-Akkordeon Nativ
= exklusiv (kein JS). Chevron/Plus → X-Rotation, Antwort fadet beim Öffnen ein. reduce → keine Animation. */ [data-brand="ki-pilot"] .kpx-faq { max-width: 900px; margin: clamp(28px, 4vw, 46px) auto 0; display: grid; gap: 12px; } [data-brand="ki-pilot"] .kpx-faq-item { border-radius: var(--radius); border: 1px solid var(--kp-hair); background: linear-gradient(165deg, var(--kp-panel-2), var(--kp-panel)); overflow: hidden; transition: border-color .35s var(--ease), box-shadow .4s var(--ease); } [data-brand="ki-pilot"] .kpx-faq-item[open] { border-color: var(--kp-hair-strong); box-shadow: 0 22px 60px -34px rgba(22,132,255,.4); } [data-brand="ki-pilot"] .kpx-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 22px; font-family: var(--font-satoshi); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.35; color: #eef6ff; } [data-brand="ki-pilot"] .kpx-faq-item summary::-webkit-details-marker { display: none; } [data-brand="ki-pilot"] .kpx-faq-ic { flex: none; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(22,132,255,.1); border: 1px solid rgba(22,132,255,.3); color: var(--kp-accent); transition: transform .4s var(--ease-lux), background .3s var(--ease); } [data-brand="ki-pilot"] .kpx-faq-ic svg { width: 17px; height: 17px; } [data-brand="ki-pilot"] .kpx-faq-item[open] .kpx-faq-ic { transform: rotate(135deg); } [data-brand="ki-pilot"] .kpx-faq-a { padding: 0 22px 22px; } [data-brand="ki-pilot"] .kpx-faq-a p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; max-width: 74ch; } [data-brand="ki-pilot"] .kpx-faq-item[open] .kpx-faq-a { animation: kpx-faq-in .38s var(--ease-out) both; } @media (hover: hover) and (pointer: fine) { [data-brand="ki-pilot"] .kpx-faq-item:hover { border-color: var(--kp-hair-strong); } [data-brand="ki-pilot"] .kpx-faq-item:hover summary { color: #fff; } [data-brand="ki-pilot"] .kpx-faq-item:hover .kpx-faq-ic { background: rgba(22,132,255,.18); } } /* ---------------------------------------------------------- Piloten-Responsive */ @media (max-width: 960px) { [data-brand="ki-pilot"] .kpx-hero-shot { max-width: 560px; margin: 0 auto; justify-self: center; } [data-brand="ki-pilot"] .kpx-split, [data-brand="ki-pilot"] .kpx-split--balanced { grid-template-columns: 1fr; align-items: stretch; } [data-brand="ki-pilot"] .kpx-split.reverse .kpx-split-copy { order: 0; } [data-brand="ki-pilot"] .kpx-cards.bento, [data-brand="ki-pilot"] .kpx-cards.two { grid-template-columns: 1fr; } [data-brand="ki-pilot"] .kpx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-brand="ki-pilot"] .kpx-growth { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { [data-brand="ki-pilot"] .kpx-minis { grid-template-columns: 1fr; } [data-brand="ki-pilot"] .kpx-faq-item summary { padding: 18px 18px; gap: 12px; } } /* ------------------------------------------------ Piloten-Gating: reduce / no-anim */ @media (prefers-reduced-motion: reduce) { [data-brand="ki-pilot"] .kpx-hero-shot { animation: none !important; } [data-brand="ki-pilot"] .kpx-monitor.kpx-mask .kpx-bezel-inner picture { clip-path: none !important; transition: none !important; } [data-brand="ki-pilot"] .kpx-faq-item[open] .kpx-faq-a { animation: none !important; } [data-brand="ki-pilot"] .kpx-faq-ic { transition: none !important; } } .no-anim [data-brand="ki-pilot"] .kpx-hero-shot { animation: none !important; } .no-anim [data-brand="ki-pilot"] .kpx-monitor.kpx-mask .kpx-bezel-inner picture { clip-path: none !important; transition: none !important; } .no-anim [data-brand="ki-pilot"] .kpx-faq-item[open] .kpx-faq-a { animation: none !important; } /* ============================================================= Keyframes (kpx-) */ @keyframes kpx-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @keyframes kpx-sweep { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(760%) skewX(-14deg); } } /* Transform-only Rise (Opazität bleibt 1 → LCP-sicher für den Hero-Screenshot) */ @keyframes kpx-rise-y { from { transform: translateY(24px); } to { transform: translateY(0); } } /* FAQ-Antwort-Einblendung beim Öffnen (one-shot) */ @keyframes kpx-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================= Responsive */ @media (max-width: 960px) { [data-brand="ki-pilot"] .kpx-hero-grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); } [data-brand="ki-pilot"] .kpx-hero-stage { order: -1; max-width: min(340px, 70vw); } [data-brand="ki-pilot"] .kpx-app-grid { grid-template-columns: 1fr; } [data-brand="ki-pilot"] .kpx-monitor { order: -1; max-width: 560px; margin: 0 auto; } [data-brand="ki-pilot"] .kpx-build-grid { grid-template-columns: 1fr; } [data-brand="ki-pilot"] .kpx-grow-grid { grid-template-columns: 1fr; } [data-brand="ki-pilot"] .kpx-secure-grid { grid-template-columns: 1fr; } [data-brand="ki-pilot"] .kpx-import-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { [data-brand="ki-pilot"] .kip-subnav .wrap { gap: 2px; } [data-brand="ki-pilot"] .kip-subnav-brand { width: 100%; margin-bottom: 4px; } /* Lockup mobil: volle Zeile über den Nav-Links (Icon + Titel bleiben) */ [data-brand="ki-pilot"] .kip-lockup { width: 100%; margin-bottom: 4px; } /* Mobile: Dropdowns statisch entfalten (kein Hover), Kinder als Fluss-Links */ [data-brand="ki-pilot"] .kip-drop { width: 100%; } [data-brand="ki-pilot"] .kip-drop > button { display: none; } [data-brand="ki-pilot"] .kip-drop-menu { position: static; opacity: 1; visibility: visible; transform: none; display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0 6px; min-width: 0; border: 0; background: none; box-shadow: none; } [data-brand="ki-pilot"] .kip-drop-menu a { font-size: .8rem; padding: 6px 10px; } [data-brand="ki-pilot"] .kip-app-pill { width: 100%; justify-content: center; margin: 6px 0 0; } [data-brand="ki-pilot"] .kpx-steps { grid-template-columns: 1fr; } } @media (max-width: 520px) { [data-brand="ki-pilot"] .kpx-hero-cta .btn { width: 100%; justify-content: center; } [data-brand="ki-pilot"] .kpx-final-actions .btn { width: 100%; justify-content: center; } [data-brand="ki-pilot"] .kpx-secure-points { grid-template-columns: 1fr; } /* Geräte-Band: 4 → 2 Kacheln auf schmalen Screens */ [data-brand="ki-pilot"] .kpx-device-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* Subnav zu eng: Tagline ausblenden, nur Icon + Titel */ [data-brand="ki-pilot"] .kip-lockup-tag { display: none; } /* Slogan-Trenner: Seitenstriche weg, Text zentriert (mehr Platz auf schmal) */ [data-brand="ki-pilot"] .kpx-claim-line { display: none; } [data-brand="ki-pilot"] .kpx-claim { padding: clamp(24px, 7vw, 34px) 20px; } } /* ============================================= Gating: reduce / save-data / touch */ @media (prefers-reduced-motion: reduce) { [data-brand="ki-pilot"] .kpx-hero-line { animation: none !important; opacity: 1 !important; transform: none !important; } [data-brand="ki-pilot"] .kpx-hero-title::after { animation: none !important; display: none; } [data-brand="ki-pilot"] .kpx-hero-stage { animation: none !important; opacity: 1 !important; transform: none !important; } [data-brand="ki-pilot"] .kpx-btn-mint::before { transition: none !important; } } /* no-anim (fx.js Freeze-Erkennung) → alle Entry-Zustände sichtbar. .no-anim/.js sitzen auf , [data-brand] auf . */ .no-anim [data-brand="ki-pilot"] .kpx-hero-line { animation: none !important; opacity: 1 !important; transform: none !important; } .no-anim [data-brand="ki-pilot"] .kpx-hero-title::after { animation: none !important; display: none; } .no-anim [data-brand="ki-pilot"] .kpx-hero-stage { animation: none !important; opacity: 1 !important; transform: none !important; } /* ===================================================================== PREISE-SEITE — Mitarbeiterstufen-Segmented-Control + Preis-Karten Ein seitenweiter Umschalter (1–3 / 4–10 / 11–30 / 30+); jede Karte zeigt EINEN Preis, Stufenwechsel animiert via kpx-pricing.js (rAF/IO/reduce-safe). Alle Klassen kpx-, strikt unter [data-brand="ki-pilot"]. Kein Endlos-Paint; Hover nur hinter hover/fine. (Alt-Inline-