/* ============================================================ KIMARO CONSULTING — Design System v4 Monochromes Dark-Tech: neutrales Schwarz, weiße Typo, Akzent = Weiß. Keine Neonfarben, keine Verläufe. Shape-Regel: Karten 20px · Buttons Pill · Inputs 10px ============================================================ */ :root { --bg0: #100e0c; --bg1: #151210; --surface: #1a1613; --surface-2: #221d19; --line: rgba(246, 240, 232, 0.14); --line-strong: rgba(246, 240, 232, 0.26); --ink: #f6f1ea; --muted: rgba(246, 241, 234, 0.72); --faint: rgba(246, 241, 234, 0.52); --inverse: #f6f1ea; --on-inverse: #100e0c; --inverse-muted: rgba(16, 14, 12, 0.66); --inverse-line: rgba(16, 14, 12, 0.14); --accent: #4f83e8; --accent-bright: #729ff2; /* Nur für gefüllte Flächen mit weißer Schrift — 5,2:1 statt 3,7:1. */ --accent-fill: #3568cf; --accent-fill-hover: #4174dd; --accent-soft: rgba(79, 131, 232, 0.12); --warm: #e0a877; --warm-soft: rgba(224, 168, 119, 0.13); --on-accent: #050d1c; --radius-card: 20px; --radius-input: 10px; --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Inter', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Inter', system-ui, sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --container: 1240px; --shadow-card: 0 1px 0 rgba(246, 240, 232, 0.08) inset, 0 24px 70px rgba(0, 0, 0, 0.5); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* Grundfarbe liegt auf , nicht auf . Sonst übermalt die Body-Füllung die beiden Lichtebenen darunter (siehe unten). */ html { background: var(--bg0); } body { background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- Grundlicht: der Rest der Seite war eine schwarze Fläche ---------- Das Foto liegt nur im Hero, darunter kam nichts mehr. Zwei feste Ebenen hinter dem gesamten Inhalt: weiche Lichtinseln, die sehr langsam wandern, plus ein feines Korn, das dem Schwarz die Plastikwirkung nimmt. Beide liegen dank negativem z-index hinter allem und fangen keine Klicks. Voraussetzung: alle Abschnitte sind durchsichtig — nur .hero und .stats-band haben eine eigene Füllung, das ist so gewollt. */ body::before { content: ''; position: fixed; /* Genau der Bildschirm — bei einem größeren Kasten lägen die Lichtinseln rechnerisch außerhalb des sichtbaren Bereichs und man sähe nichts. */ inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(58% 46% at 84% 10%, rgba(79, 131, 232, 0.26), transparent 70%), radial-gradient(50% 42% at 4% 54%, rgba(224, 168, 119, 0.14), transparent 68%), radial-gradient(62% 48% at 96% 88%, rgba(79, 131, 232, 0.18), transparent 72%); animation: grundlicht 52s ease-in-out infinite alternate; will-change: transform; } @keyframes grundlicht { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2.5%, 0) scale(1.1); } } /* Korn aus einer eingebetteten SVG-Textur — keine Datei, kein Nachladen. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .reduced-motion body::before { animation: none; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* Am Handy schwächer: kleiner Bildschirm, die Lichtinseln lägen sonst direkt unter dem Fließtext und würden ihn aufhellen. */ @media (max-width: 900px) { body::before { background: radial-gradient(90% 30% at 88% 8%, rgba(79, 131, 232, 0.24), transparent 72%), radial-gradient(95% 28% at 4% 52%, rgba(224, 168, 119, 0.12), transparent 70%), radial-gradient(100% 32% at 96% 92%, rgba(79, 131, 232, 0.18), transparent 74%); } body::after { opacity: 0.04; } } ::selection { background: var(--ink); color: var(--on-inverse); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; } h1 { font-size: clamp(2.7rem, 6.5vw, 5.2rem); } h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; } /* Betonte Wörter in Akzentfarbe */ .grad { color: var(--accent); } .accent { color: var(--accent); } .container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } section { padding: clamp(96px, 13vh, 170px) 0; position: relative; } .section-head { max-width: 760px; margin-bottom: clamp(60px, 9vh, 110px); } .section-head p { color: var(--muted); margin-top: 20px; max-width: 56ch; font-size: 17.5px; } .kicker { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } /* Zeilen-Maskenreveal: JS zerlegt Headlines in .line/.line-inner */ .line { display: block; overflow: hidden; } .line-inner { display: block; will-change: transform; } /* ---------- Header ---------- */ #site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background 0.4s, transform 0.5s var(--ease-out); } #site-header.scrolled { background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); } /* Weiche Scroll-Kante statt 1px-Trennlinie (§12): ein kurzer Verlaufsschatten, der nur sichtbar ist, wenn Inhalt unter dem Glas liegt. */ #site-header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), transparent); opacity: 0; transition: opacity 0.4s; pointer-events: none; } #site-header.scrolled::after { opacity: 1; } #site-header.hidden { transform: translateY(-100%); } .nav { display: flex; align-items: center; justify-content: space-between; height: 78px; } .logo { display: flex; align-items: center; gap: 11px; } /* Die Marke darf gesehen werden: größer als die Navigation, mit einem weichen Schein am Knoten, damit das Blau nicht im dunklen Grund verschwindet. */ .logo-mark { display: block; width: 34px; height: 34px; flex-shrink: 0; overflow: visible; } .logo-mark .lm-node { filter: drop-shadow(0 0 7px rgba(79, 131, 232, 0.55)); } .logo-mark .lm-stem { fill: var(--ink); } .logo-mark .lm-arm { stroke: var(--ink); fill: none; } .logo-mark .lm-node { fill: var(--accent); } /* Aufbau beim Laden: der Knoten kommt zuerst, dann rasten die Arme ein */ .logo-mark.animate .lm-node { animation: lm-node 1.05s var(--ease-out) both; } .logo-mark.animate .lm-stem { animation: lm-stem 0.7s var(--ease-out) both; } .logo-mark.animate .lm-arm-t { animation: lm-arm-t 0.9s var(--ease-out) 0.3s both; } .logo-mark.animate .lm-arm-b { animation: lm-arm-b 0.9s var(--ease-out) 0.38s both; } @keyframes lm-node { 0% { transform: translateX(-30px) scale(0.2); opacity: 0; } 60% { transform: translateX(2px) scale(1.2); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes lm-stem { from { transform: translateX(-9px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes lm-arm-t { from { transform: translate(14px, -12px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes lm-arm-b { from { transform: translate(14px, 12px); opacity: 0; } to { transform: none; opacity: 1; } } .reduced-motion .logo-mark.animate * { animation: none !important; } .logo-word { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; text-transform: lowercase; } .logo-word small { display: none; } .logo-word::after { content: '.'; color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links a { font-size: 15px; color: var(--muted); transition: color 0.25s; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); } .nav-cta { color: #ffffff !important; background: var(--accent-fill); padding: 10px 22px; border-radius: 999px; font-weight: 600; transition: transform 0.25s var(--ease-out), background 0.25s; } .nav-cta:hover { background: var(--accent-fill-hover); transform: translateY(-1px); } .nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; } .nav-burger span { width: 22px; height: 2px; background: var(--ink); transition: 0.3s; display: block; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border-radius: 999px; font-weight: 600; font-size: 15.5px; white-space: nowrap; transition: transform 0.3s var(--ease-out), background 0.3s, border-color 0.3s, color 0.3s; will-change: transform; } /* Feedback lebt auf dem Drücken und kommt sofort (§1: 100ms, nicht 300ms) */ .btn:active { transform: scale(0.97); transition: transform 100ms ease-out; } .btn .arrow { transition: transform 0.3s var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } .btn-primary { background: var(--accent-fill); color: #ffffff; position: relative; overflow: hidden; } .btn-primary:hover { background: var(--accent-fill-hover); } /* Sheen: alle paar Sekunden zieht ein Lichtstreif über den Button. Bewegt wird nur transform (Compositor), nie left (Layout). */ .btn-primary::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg) translateX(0); animation: none; display: none; pointer-events: none; will-change: transform; } @keyframes cta-sheen { 0%, 55% { transform: skewX(-20deg) translateX(0); } 75%, 100% { transform: skewX(-20deg) translateX(420%); } } /* Puls: weiches inneres Aufleuchten, nur opacity (Compositor) statt box-shadow (Paint) */ .btn-primary::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(80% 120% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 70%); opacity: 0; animation: none; display: none; pointer-events: none; } @keyframes cta-pulse { 0%, 100% { opacity: 0; } 45% { opacity: 0.6; } } .btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--ink); } /* Buttons auf hellen (invertierten) Flächen */ .on-light .btn-primary { background: var(--accent-fill); color: #ffffff; } .on-light .btn-primary:hover { background: var(--accent-fill-hover); } .on-light .btn-ghost { border-color: var(--inverse-line); color: var(--on-inverse); } .on-light .btn-ghost:hover { border-color: var(--on-inverse); } /* ---------- Hero (dunkel, KI-Check prominent) ---------- */ .hero { min-height: 100dvh; display: flex; align-items: center; padding: 150px 0 80px; overflow: hidden; background: var(--bg0); } /* Langsam driftender Farbschleier hinter dem Hero */ .hero::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(40% 32% at 24% 16%, rgba(79, 131, 232, 0.10), transparent 70%), radial-gradient(30% 26% at 62% 78%, rgba(79, 131, 232, 0.05), transparent 70%); filter: blur(40px); animation: aurora 26s ease-in-out infinite alternate; pointer-events: none; } @keyframes aurora { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(4%, -3%) rotate(4deg) scale(1.08); } 100% { transform: translate(-4%, 3%) rotate(-4deg) scale(1.02); } } .hero .container { position: relative; z-index: 1; } .hero-inner { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(40px, 6vw, 90px); align-items: center; width: 100%; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); padding: 8px 18px; border-radius: 999px; margin-bottom: 32px; } .hero-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .hero h1 { margin-bottom: 28px; max-width: 18ch; } .hero h1 .swap-wrap { color: var(--accent); } .hero-sub { color: var(--muted); max-width: 44ch; margin-bottom: 38px; font-size: clamp(17px, 1.6vw, 19.5px); } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .swap-wrap { display: inline-block; } #swap-word { display: inline-block; } /* KI-Check-Karte im Hero */ .hero-check { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(28px, 3vw, 40px); } .hero-check .hc-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .hero-check h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 10px; } .hero-check > p { color: var(--muted); font-size: 15px; margin-bottom: 26px; max-width: 40ch; } .hc-modes { display: grid; gap: 12px; } .hc-mode { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px 22px; background: var(--bg1); transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out); } .hc-mode:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-2px); } .hc-mode .hc-body { display: block; } .hc-mode strong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-display); font-size: 17.5px; font-weight: 600; letter-spacing: -0.015em; } .hc-mode .hc-body > span { display: block; color: var(--muted); font-size: 14px; margin-top: 5px; } .hc-badge { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 4px 10px; } /* Erster Weg ist der empfohlene — er darf lauter sein als der zweite */ .hc-mode-primary { border-color: rgba(79, 131, 232, 0.45); background: linear-gradient(140deg, rgba(79, 131, 232, 0.16), rgba(79, 131, 232, 0.05) 70%); } .hc-mode-primary:hover { border-color: var(--accent-bright); } .hc-mode .hc-arrow { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px; font-size: 17px; line-height: 1; color: var(--ink); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line-strong); transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s; } .hc-mode-primary .hc-arrow { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .hc-mode:hover .hc-arrow { transform: translateX(4px); border-color: var(--accent); } .hc-note { font-size: 12.5px; color: var(--faint); margin-top: 18px; } /* ---------- Zeitfresser ---------- */ .pain-list { display: flex; flex-direction: column; } .pain-row { display: grid; grid-template-columns: 110px 1fr 1.15fr; gap: clamp(20px, 4vw, 70px); align-items: baseline; padding: clamp(34px, 5vh, 52px) 0; border-top: 1px solid var(--line); transition: opacity 0.35s; } .pain-row:last-child { border-bottom: 1px solid var(--line); } .pain-list:hover .pain-row:not(:hover) { opacity: 0.35; } .pain-num { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--faint); transition: color 0.3s; } .pain-row:hover .pain-num { color: var(--accent); } .pain-row h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); } .pain-row p { color: var(--muted); font-size: 16px; max-width: 52ch; } /* ---------- Leistungen: Sticky-Stack ---------- */ .stack { position: relative; } .stack-card { position: sticky; top: 0; min-height: 100dvh; display: flex; align-items: center; will-change: transform; } .stack-panel { width: 100%; border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface); padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 80px); align-items: center; min-height: min(600px, 78dvh); box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.6); } /* Panels in einer Familie: neutral und grünstichig im Wechsel */ .stack-card:nth-child(odd) .stack-panel { background: linear-gradient(150deg, #241d17, #171310 75%); } .stack-card:nth-child(even) .stack-panel { background: linear-gradient(150deg, var(--surface-2), var(--surface) 75%); } .stack-index { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 22px; } .stack-panel h3 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 20px; } .stack-panel > div > p { color: var(--muted); max-width: 46ch; font-size: 16.5px; } .stack-list { list-style: none; display: grid; gap: 15px; } .stack-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); font-size: 15.5px; padding-bottom: 15px; border-bottom: 1px solid var(--line); } .stack-list li:last-child { border-bottom: none; padding-bottom: 0; } .stack-list li::before { content: '→'; color: var(--accent); font-family: var(--font-display); flex-shrink: 0; } .stack-cta { margin-top: 30px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; } .stack-cta .arrow { transition: transform 0.3s var(--ease-out); } .stack-cta:hover .arrow { transform: translateX(4px); } /* ---------- ROI ---------- */ .roi-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; } .roi-panel { border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); padding: clamp(28px, 4vw, 46px); } .roi-field { margin-bottom: 30px; } .roi-field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--muted); margin-bottom: 12px; gap: 16px; } .roi-field label output { font-family: var(--font-display); font-size: 20px; color: var(--ink); font-weight: 600; white-space: nowrap; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--fill, 50%), rgba(255, 255, 255, 0.14) var(--fill, 50%)); outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 4px solid var(--bg0); outline: 1px solid var(--line-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); transition: transform 0.2s var(--ease-out); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 4px solid var(--bg0); } .roi-results { display: grid; gap: 14px; } .roi-result { border-radius: var(--radius-card); border: 1px solid var(--line); padding: 26px 30px; background: var(--surface); } .roi-result.highlight { background: var(--accent); border-color: var(--accent); } .roi-result.highlight .rr-label { color: rgba(255, 255, 255, 0.78); } .roi-result.highlight .rr-value { color: #ffffff; } .roi-result .rr-label { font-size: 13.5px; color: var(--muted); letter-spacing: 0.02em; } .roi-result .rr-value { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 600; letter-spacing: -0.025em; margin-top: 4px; } .roi-note { font-size: 13px; color: var(--faint); margin-top: 18px; max-width: 48ch; } .roi-select { width: 100%; background: var(--bg1); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-input); padding: 14px 16px; font: inherit; font-size: 15px; cursor: pointer; } .roi-select:focus { outline: 2px solid var(--ink); outline-offset: 1px; } /* ---------- Prozess ---------- */ .process-list { position: relative; max-width: 820px; } .process-line { position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); } .process-line::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(var(--progress, 0)); } .process-step { display: grid; grid-template-columns: 56px 1fr; gap: clamp(24px, 3vw, 48px); padding: 38px 0; position: relative; } .process-num { width: 56px; height: 56px; border-radius: 50%; background: var(--bg0); border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); z-index: 1; } .process-step h3 { display: inline; font-size: clamp(1.3rem, 2.3vw, 1.7rem); } .process-tag { font-size: 12.5px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong); padding: 4px 12px; border-radius: 999px; margin-left: 14px; white-space: nowrap; vertical-align: middle; } .process-step p { color: var(--muted); font-size: 16px; margin-top: 12px; max-width: 56ch; } /* ---------- Stats ---------- */ .stats-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg1); padding: clamp(56px, 8vh, 96px) 0; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .stats-grid > div { border-left: 2px solid var(--accent); padding-left: 28px; } .stat-value { font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 4rem); font-weight: 600; letter-spacing: -0.025em; } .stat-label { color: var(--muted); font-size: 15px; margin-top: 6px; } /* ---------- Über mich ---------- */ .about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 100px); align-items: center; } .about-photo { aspect-ratio: 2 / 3; border-radius: var(--radius-card); background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%); border: 1px solid var(--line); display: grid; place-items: center; color: var(--faint); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.06em; overflow: hidden; position: relative; } .about-photo { overflow: hidden; } .about-photo picture { display: block; width: 100%; height: 100%; } .about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-text p { color: var(--muted); margin-bottom: 18px; max-width: 58ch; } .about-text strong { color: var(--ink); } .about-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; } .about-tags .tag { font-size: 13.5px; color: var(--muted); border: 1px solid var(--line-strong); padding: 7px 16px; border-radius: 999px; } /* ---------- FAQ ---------- */ .faq-list { max-width: 780px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; padding: 28px 4px; font-family: var(--font-display); font-size: clamp(1.1rem, 1.9vw, 1.35rem); font-weight: 500; letter-spacing: -0.01em; transition: color 0.25s, transform 0.3s var(--ease-out); } .faq-q:hover { transform: translateX(12px); } .faq-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 17px; font-weight: 300; transition: transform 0.35s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s; } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--accent); color: #ffffff; border-color: var(--accent); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); } .faq-a-inner { padding: 0 4px 30px; color: var(--muted); max-width: 62ch; } /* ---------- CTA (heller Abschlussblock, invertiert) ---------- */ .cta { padding: 0 0 clamp(96px, 13vh, 170px); } .cta-panel { background: var(--inverse); color: var(--on-inverse); border-radius: var(--radius-card); padding: clamp(56px, 9vw, 110px) clamp(28px, 6vw, 90px); position: relative; overflow: hidden; } .cta-panel .kicker { color: var(--inverse-muted); margin-bottom: 24px; } .cta-panel h2 { max-width: 17ch; margin-bottom: 24px; font-size: clamp(2.2rem, 5vw, 4rem); } .cta-panel .grad { color: rgba(10, 10, 10, 0.42); } .cta-panel p { color: var(--inverse-muted); max-width: 52ch; margin-bottom: 42px; } .cta-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; } .cta-mail { color: var(--inverse-muted); font-size: 15px; transition: color 0.25s; border-bottom: 1px solid var(--inverse-line); padding-bottom: 2px; } .cta-mail:hover { color: var(--on-inverse); } .cta-glow { display: none; } /* ---------- Footer ---------- */ footer { padding: 76px 0 40px; border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; margin-bottom: 56px; } .footer-brand p { color: var(--muted); font-size: 15px; margin-top: 18px; max-width: 34ch; } .footer-col h4 { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; } .footer-col ul { list-style: none; display: grid; gap: 12px; } .footer-col a { color: var(--muted); font-size: 15px; transition: color 0.25s; } .footer-col a:hover { color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13.5px; } .footer-bottom a:hover { color: var(--ink); } /* ---------- Unterseiten: Page-Hero ---------- */ .page-hero { padding: 190px 0 70px; min-height: auto; } .page-hero h1 { max-width: 16ch; margin-bottom: 26px; font-size: clamp(2.5rem, 5.5vw, 4.2rem); } .page-hero p { color: var(--muted); max-width: 54ch; font-size: 18px; } /* ---------- Leistungs-Detailseite ---------- */ .svc-detail { display: grid; grid-template-columns: 110px 1fr 1fr; gap: clamp(24px, 4vw, 70px); padding: clamp(48px, 7vh, 80px) 0; border-top: 1px solid var(--line); align-items: start; } .svc-detail:last-of-type { border-bottom: 1px solid var(--line); } .svc-num { font-family: var(--font-display); color: var(--faint); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; padding-top: 4px; } .svc-main h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; } .svc-main p { color: var(--muted); max-width: 50ch; } .svc-list { list-style: none; display: grid; gap: 14px; padding-top: 6px; } .svc-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); font-size: 16px; } .svc-list li::before { content: '→'; color: var(--ink); font-family: var(--font-display); flex-shrink: 0; } .svc-fit { margin-top: 24px; font-size: 14.5px; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); border-radius: var(--radius-input); padding: 12px 18px; max-width: 46ch; } /* ---------- KI-Check ---------- */ .check-shell { max-width: 780px; margin: 0 auto; border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); padding: clamp(28px, 5vw, 52px); min-height: 420px; } .check-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .check-mode { border-radius: 16px; border: 1px solid var(--line-strong); background: var(--bg1); padding: 32px 28px; text-align: left; transition: border-color 0.3s, transform 0.3s var(--ease-out), background 0.3s; display: flex; flex-direction: column; gap: 14px; } .check-mode:hover { border-color: var(--ink); background: var(--surface-2); transform: translateY(-3px); } .check-mode .cm-time { font-size: 13px; color: var(--faint); letter-spacing: 0.06em; font-weight: 600; } .check-mode p { color: var(--muted); font-size: 15px; flex: 1; } .check-mode .cm-go { color: var(--ink); font-weight: 600; font-size: 15px; } .check-progress { height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin-bottom: 40px; overflow: hidden; } .check-progress-fill { height: 100%; background: var(--ink); width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); border-radius: 2px; } .check-qcount { font-size: 13px; color: var(--faint); letter-spacing: 0.08em; margin-bottom: 14px; } .check-question { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 36px; min-height: 2.5em; } .check-answers { display: grid; gap: 12px; } .check-answer { text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius-input); padding: 17px 22px; font-size: 16px; background: var(--bg1); transition: border-color 0.25s, background 0.25s, transform 0.2s var(--ease-out); } .check-answer:hover { border-color: var(--ink); background: var(--surface-2); transform: translateX(4px); } .check-back { margin-top: 28px; color: var(--faint); font-size: 14px; transition: color 0.25s; } .check-back:hover { color: var(--ink); } .score-ring-wrap { display: grid; place-items: center; margin: 10px 0 30px; } .score-ring { position: relative; width: 190px; height: 190px; } .score-ring svg { transform: rotate(-90deg); } .score-ring .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 8; } .score-ring .ring-fg { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; } .score-ring .score-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 46px; font-weight: 600; letter-spacing: -0.025em; } .score-verdict { text-align: center; font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; } .score-text { text-align: center; color: var(--muted); max-width: 50ch; margin: 0 auto 36px; } .area-bars { display: grid; gap: 18px; max-width: 520px; margin: 0 auto 40px; } .area-bar .ab-head { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 8px; } .area-bar .ab-head span:last-child { font-family: var(--font-display); font-weight: 600; } .area-bar .ab-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } /* Gilt für beide Balkenarten: die fünf Bereiche und die Startfähigkeit unter dem Ring. Vorher war die Regel auf .area-bar beschränkt, dadurch blieb der Startfähigkeits-Balken unsichtbar, während daneben ein Prozentwert stand. */ .area-bar .ab-fill, .score-second .ab-fill { height: 100%; border-radius: 3px; background: var(--accent); width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); } .check-result-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Zwei Achsen, zwei Farben: Blau = Potenzial (was zu holen ist), Warm = Startfähigkeit (was schon trägt). Bewusst nur diese zwei, damit die Balken lesbar bleiben und nicht wie eine Ampel wirken. */ .score-label { margin-top: 14px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); } .score-second { max-width: 340px; margin: 0 auto 30px; } .score-second .ab-head { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 8px; } .score-second .ab-head span:last-child { font-family: var(--font-display); font-weight: 600; } .score-second .ab-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .score-second-hint { font-size: 13px; color: var(--faint); margin-top: 8px; text-align: center; } .ab-fill.ab-reife { background: var(--warm); } .area-head { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 4px; } .area-bar .ab-track + .ab-track { margin-top: 4px; } .ab-legend { font-size: 13px; color: var(--faint); font-weight: 400 !important; } /* Kontextfragen im Lead-Formular */ .lead-context { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; } .lc-feld { display: grid; gap: 6px; margin-bottom: 14px; } .lc-feld label { font-size: 13.5px; color: var(--muted); } .lc-opt { color: var(--faint); } .lc-feld input, .lc-feld select, .lc-feld textarea { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px; width: 100%; } .lc-feld textarea { resize: vertical; line-height: 1.5; } .lc-feld input::placeholder, .lc-feld textarea::placeholder { color: var(--faint); } .lc-feld input:focus, .lc-feld select:focus, .lc-feld textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; } @media (max-width: 560px) { .lead-context { grid-template-columns: 1fr; } } /* Lead-Formular am Ende des Checks */ .check-lead { border: 1px solid var(--line-strong); background: var(--bg1); border-radius: 16px; padding: clamp(24px, 3vw, 36px); margin: 0 auto 28px; max-width: 560px; } .check-lead h3 { font-size: 1.2rem; margin-bottom: 8px; } .check-lead > p { color: var(--muted); font-size: 14.5px; margin-bottom: 12px; } .lead-nutzen { list-style: none; display: grid; gap: 8px; margin: 0 0 14px; padding: 0; font-size: 14.5px; } .lead-nutzen li { position: relative; padding-left: 22px; color: var(--ink); } .lead-nutzen li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .check-lead .lead-klein { font-size: 13px; color: var(--faint); margin-bottom: 18px; } .lead-row { display: flex; gap: 10px; flex-wrap: wrap; } .lead-row input[type="email"] { flex: 1; min-width: 200px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; padding: 14px 22px; font: inherit; font-size: 15px; } .lead-row input[type="email"]::placeholder { color: var(--faint); } .lead-row input[type="email"]:focus { outline: 2px solid var(--ink); outline-offset: 1px; } .lead-row .btn { padding: 14px 26px; } .lead-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--faint); margin-top: 16px; cursor: pointer; line-height: 1.5; text-align: left; } .lead-consent input { margin-top: 3px; accent-color: var(--ink); } .lead-error { margin-top: 14px; font-size: 13.5px; color: #ff9b8a; background: rgba(255, 120, 96, 0.08); border: 1px solid rgba(255, 120, 96, 0.25); border-radius: var(--radius-input); padding: 10px 14px; } .lead-success { font-size: 15px; color: var(--ink); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong); border-radius: var(--radius-input); padding: 16px 20px; text-align: center; } /* ---------- Fächer-Karussell (portiert von 21st.dev card-fan-carousel) ---------- */ .fan-section { padding-top: 0; overflow: hidden; } .fan-layout { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: min(34rem, 62dvh); } .fan-card { position: absolute; width: clamp(150px, 15vw, 220px); aspect-ratio: 4 / 7; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); opacity: 0; will-change: transform; background: var(--surface); } .fan-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fan-card .fan-label { position: absolute; inset: auto 0 0 0; padding: 40px 16px 16px; background: linear-gradient(to top, rgba(5, 5, 5, 0.85), transparent); font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: #fff; z-index: 2; } .fan-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; } .fan-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(16px); color: var(--muted); display: grid; place-items: center; transition: border-color 0.3s, color 0.3s; } .fan-arrow:hover { border-color: var(--accent); color: var(--ink); } .fan-arrow:active { opacity: 0.7; } .fan-arrow svg { width: 18px; height: 18px; } .fan-dots { display: flex; align-items: center; gap: 8px; } .fan-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); transition: background 0.3s, transform 0.3s; } .fan-dot.active { background: var(--accent); transform: scale(1.3); } @media (max-width: 640px) { .fan-layout { height: min(26rem, 58dvh); } .fan-card { width: clamp(130px, 34vw, 170px); } } /* ---------- Rechtsseiten ---------- */ .legal-page { padding: 180px 0 100px; max-width: 780px; } .legal-page h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 34px; } .legal-page h2 { font-size: 1.2rem; margin: 38px 0 12px; } .legal-page p, .legal-page li { color: var(--muted); font-size: 16px; } .legal-page ul { padding-left: 22px; margin: 12px 0; } .legal-page a { color: var(--ink); border-bottom: 1px solid var(--line-strong); } .placeholder-note { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-input); padding: 16px 20px; font-size: 14.5px; color: var(--ink); margin-bottom: 34px; } /* ---------- Über-mich-Seite ---------- */ .timeline { max-width: 760px; } .tl-item { display: grid; grid-template-columns: 130px 1fr; gap: clamp(20px, 4vw, 50px); padding: 34px 0; border-top: 1px solid var(--line); } .tl-item:last-child { border-bottom: 1px solid var(--line); } .tl-year { font-family: var(--font-display); font-weight: 600; color: var(--faint); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 6px; } .tl-item h3 { margin-bottom: 8px; } .tl-item p { color: var(--muted); font-size: 16px; max-width: 56ch; } .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .principle { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: 34px 30px; } .principle:nth-child(2) { background: var(--inverse); border-color: var(--inverse); } .principle:nth-child(2) h3 { color: var(--on-inverse); } .principle:nth-child(2) p { color: var(--inverse-muted); } .principle h3 { margin-bottom: 12px; font-size: 1.15rem; } .principle p { color: var(--muted); font-size: 15px; } /* ---------- Reveal-Grundzustand (JS setzt Animation) ---------- */ [data-reveal] { opacity: 0; transform: translateY(28px); } .no-js [data-reveal], .reduced-motion [data-reveal] { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .nav-links { gap: 24px; } } @media (max-width: 860px) { .nav-links { position: fixed; inset: 70px 0 auto 0; background: rgba(10, 10, 10, 0.97); backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; padding: 28px clamp(20px, 4vw, 48px) 36px; gap: 22px; border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform 0.45s var(--ease-out); } .nav-links.open { transform: translateY(0); } .nav-burger { display: flex; } .hero { padding-top: 120px; } .hero-inner { grid-template-columns: 1fr; } .stack-panel { grid-template-columns: 1fr; gap: 26px; min-height: min(640px, 84dvh); } .roi-wrap, .about-grid { grid-template-columns: 1fr; } .check-choice { grid-template-columns: 1fr; } .pain-row { grid-template-columns: 1fr; gap: 10px; } .pain-list:hover .pain-row:not(:hover) { opacity: 1; } .footer-grid { grid-template-columns: 1fr; gap: 34px; } .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .stats-grid > div { border-left-width: 1px; padding-left: 12px; } .stat-value { font-size: 1.45rem; } .stat-label { font-size: 12px; } .svc-detail { grid-template-columns: 1fr; gap: 18px; } .tl-item { grid-template-columns: 1fr; gap: 6px; } .principles { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* §14: Transparenz reduziert — Glasflächen werden deckend, Blur fällt weg */ @media (prefers-reduced-transparency: reduce) { #site-header.scrolled { background: rgba(16, 14, 12, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-links { background: var(--bg0); backdrop-filter: none; } .fan-arrow { background: var(--surface); backdrop-filter: none; } .hero-badge { background: var(--surface); } } /* §14: Mehr Kontrast — fast deckende Flächen mit klarer Kontur */ @media (prefers-contrast: more) { :root { --line: rgba(246, 240, 232, 0.4); --line-strong: rgba(246, 240, 232, 0.65); --muted: rgba(246, 241, 234, 0.88); --faint: rgba(246, 241, 234, 0.75); } #site-header.scrolled { background: var(--bg0); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line-strong); } .btn-ghost { border-width: 2px; border-color: var(--ink); } .btn-primary::before, .btn-primary::after { display: none; } } /* ---------- Gepinnter Ablauf ---------- */ /* Die Sektion bleibt stehen, das Netz baut sich am Scrollfortschritt auf. Ohne GSAP (oder bei reduzierter Bewegung) fällt sie auf einen normalen Abschnitt zurück — deshalb liegt die Höhe am .flow-track, nicht am Sticky. */ .flow { padding: 0; } .flow-track { height: 320vh; position: relative; } .flow-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; } .flow-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 80px); align-items: center; width: 100%; } .flow-copy { max-width: 30ch; } .flow-caption { font-size: clamp(2rem, 4vw, 3.1rem); margin-top: 16px; min-height: 2.2em; } .flow-note { color: var(--muted); font-size: 17px; margin-top: 20px; min-height: 5.2em; } .flow-bar { margin-top: 32px; width: 220px; height: 3px; border-radius: 2px; background: var(--line-strong); overflow: hidden; } .flow-bar span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); } .flow-net { width: 100%; max-width: 520px; justify-self: center; overflow: visible; } .flow-net line { stroke: var(--line-strong); stroke-width: 2; transition: stroke 0.45s var(--ease-out); } .flow-net line.lit { stroke: var(--accent); } .flow-net circle { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2.5; transition: fill 0.45s var(--ease-out), stroke 0.45s var(--ease-out), r 0.45s var(--ease-out); } .flow-net circle.lit { fill: var(--accent); stroke: var(--accent); r: 15; } @media (max-width: 900px) { /* Kürzere Strecke als am Desktop — auf dem Telefon scrollt man schneller. */ .flow-track { height: 280vh; } .flow-inner { grid-template-columns: 1fr; } } .reduced-motion .flow-track { height: auto; } .reduced-motion .flow-stage { position: static; height: auto; padding: 120px 0; } .reduced-motion .flow-net line, .reduced-motion .flow-net circle { stroke: var(--accent); } .reduced-motion .flow-net circle { fill: var(--accent); } /* ---------- Wärme: Umgebungslicht statt zweiter Markenfarbe ---------- */ .hero::after { content: ''; position: absolute; left: -10%; bottom: -30%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, var(--warm-soft), transparent 62%); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } /* Der Punkt im Verfügbarkeits-Badge ist der einzige Ort, an dem der Warmton als Farbe auftritt — er signalisiert „ein Mensch ist erreichbar". */ .hero-badge::before { background: var(--warm) !important; box-shadow: 0 0 8px var(--warm); } /* ---------- Ablauf auf dem Handy ---------- */ /* Ohne Pin gibt es keinen Scrollfortschritt, der die Schritte durchblättert. Statt einer eingefrorenen ersten Zeile stehen dort alle fünf untereinander. */ .flow-list { display: none; } @media (max-width: 900px) { .flow-copy { max-width: none; } .flow-list { display: none; flex-direction: column; gap: 0; list-style: none; counter-reset: fl; margin-top: 26px; } .flow-list li { counter-increment: fl; display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 15.5px; line-height: 1.55; } .flow-list li:last-child { border-bottom: none; } .flow-list li::before { content: counter(fl, decimal-leading-zero); font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 3px; } .flow-list b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; margin-bottom: 4px; } /* Das Netz zeigt den fertigen Zustand, weil es hier nichts zu scrubben gibt. */ .flow-net line { stroke: var(--accent); } .flow-net circle { fill: var(--accent); stroke: var(--accent); } } /* ---------- Vorher/Nachher: eine Liste, die schrumpft ---------- */ /* Zwei Listen nebeneinander hätte der Regler nur zerschnitten. Hier bleibt der Prozess derselbe — es fällt weg, was niemand mehr von Hand macht. */ .ba { position: relative; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 52px) clamp(24px, 3vw, 36px); cursor: ew-resize; touch-action: pan-y; user-select: none; } .ba-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .ba-label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); transition: color 0.3s var(--ease-out); } .ba.weit .ba-label { color: var(--accent); } .ba-count { font-size: 14.5px; color: var(--muted); white-space: nowrap; } .ba-count b { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 6px; } .ba.weit .ba-count b { color: var(--accent); } .ba-steps { list-style: none; counter-reset: ba; margin: 4px 0 26px; } .ba-steps li { counter-increment: ba; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink); transition: opacity 0.35s var(--ease-out), color 0.35s var(--ease-out); } .ba-steps li:last-child { border-bottom: none; } .ba-steps li::before { content: counter(ba, decimal-leading-zero); font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--faint); font-variant-numeric: tabular-nums; } .ba-steps li[data-bleibt] { color: var(--ink); } .ba-steps li[data-bleibt]::before { color: var(--accent); } /* Was wegfällt, wird nicht ausgeblendet, sondern durchgestrichen — man soll sehen, wie viel Arbeit verschwindet, nicht nur das Ergebnis. */ .ba-steps li.weg { opacity: 0.3; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; } .ba-slider { position: relative; height: 44px; display: flex; align-items: center; } .ba-track { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--line-strong); overflow: hidden; } .ba-fill { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); } .ba-grip { position: absolute; top: 50%; left: 0; translate: -50% -50%; will-change: transform; width: 40px; height: 40px; border-radius: 999px; background: var(--accent-fill); border: 2px solid var(--accent-bright); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5); pointer-events: none; } .ba-grip::before, .ba-grip::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; translate: 0 -50%; border-block: 5px solid transparent; } .ba-grip::before { left: 9px; border-right: 7px solid #fff; } .ba-grip::after { right: 9px; border-left: 7px solid #fff; } /* Der native Regler bleibt für die Tastatur, das Ziehen macht der Kasten. */ .ba-range { position: absolute; inset: 0; opacity: 0; pointer-events: none; margin: 0; width: 100%; } .ba-range:focus-visible ~ .ba-grip { outline: 3px solid var(--accent-bright); outline-offset: 3px; } .ba-hint { margin-top: 4px; font-size: 13px; color: var(--faint); } .ba.weit .ba-hint { opacity: 0; } .ba-note { margin-top: 26px; max-width: 66ch; color: var(--muted); font-size: 15.5px; } @media (max-width: 560px) { .ba-steps li { font-size: 15px; grid-template-columns: 32px 1fr; } } /* ---------- Handy: Bedienbarkeit und Länge ---------- */ @media (max-width: 900px) { /* Auf einem Telefon ist der gestapelte Effekt Fummelei — vier Karten untereinander lesen sich schneller und sparen drei Bildschirme. */ .stack-card { position: sticky; top: 0; min-height: 100dvh; margin-bottom: 0; } .stack-panel { min-height: 0; box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.6); padding: 30px 24px; } /* Tippziele: alles unter 44px ist auf dem Daumen Glückssache. */ .nav-burger { width: 44px; height: 44px; align-items: center; justify-content: center; } .nav-links a { display: block; padding: 12px 0; } .nav-cta { padding: 14px 24px; } .stack-cta { display: inline-flex; align-items: center; min-height: 44px; } .cta-mail { display: inline-block; padding: 12px 0; } footer a { display: inline-block; padding: 10px 0; } .faq-q { min-height: 56px; } } /* ---------- Handy: Länge. 18 Bildschirme liest niemand zu Ende. ---------- */ @media (max-width: 900px) { /* Der Hero muss nicht den ganzen Schirm füllen — darunter wartet Inhalt. */ .hero { min-height: 0; padding-top: 118px; padding-bottom: 56px; } section { padding: clamp(64px, 8vh, 88px) 0; } .section-head { margin-bottom: 32px; } /* Leistungskarten: gleiche Aussage, weniger Luft. */ .stack-panel { padding: 28px 22px; gap: 18px; } .stack-panel h3 { font-size: 1.5rem; margin-bottom: 12px; } .stack-panel > div > p { font-size: 15.5px; } .stack-list li { padding: 9px 0; font-size: 14.5px; } .stack-index { margin-bottom: 10px; } /* Ablaufliste: kürzere Zeilen, kleineres Netz. */ .flow-stage { padding: clamp(56px, 8vh, 88px) 0; } .flow-inner { gap: 28px; } .flow-net { max-width: 300px; } .flow-list li { padding: 14px 0; font-size: 15px; } .flow-list b { font-size: 16px; } .pain-row { padding: 22px 0; } .ba-steps li { padding: 10px 0; } } /* ---------- Gepinnter Ablauf auf dem Telefon ---------- */ @media (max-width: 900px) { .flow-stage { position: sticky; top: 0; height: 100dvh; padding: 0; display: flex; align-items: center; } .flow-inner { grid-template-columns: 1fr; gap: 30px; } /* Netz zuerst, Text darunter — der Blick geht von der Grafik zur Erklärung. */ .flow-net { order: -1; max-width: 230px; margin: 0 auto; } .flow-caption { font-size: clamp(1.5rem, 6.5vw, 2rem); min-height: 2.4em; } .flow-note { font-size: 15.5px; min-height: 5.5em; } /* Auf dem Handy zeigt das Netz den Fortschritt, nicht den Endzustand. */ .flow-net line { stroke: var(--line-strong); } .flow-net circle { fill: var(--surface); stroke: var(--line-strong); } .flow-net line.lit { stroke: var(--accent); } .flow-net circle.lit { fill: var(--accent); stroke: var(--accent); } } /* ---------- Chat-Assistent ---------- */ /* Eigenes Fenster im Seitendesign statt eines fremden Widgets — kein Fremdskript, keine Cookies, kein Einwilligungsbanner nötig. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ch-knopf { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: inline-flex; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; padding: 13px 20px; font-size: 14.5px; font-weight: 500; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); transition: border-color 0.25s, transform 0.25s var(--ease-out); } .ch-knopf:hover { border-color: var(--accent); transform: translateY(-2px); } .ch-knopf:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; } .ch-knopf-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex-shrink: 0; } .ch-fenster { /* Ist ein
und würde sonst das seitenweite Abschnitts-Padding erben. */ padding: 0; position: fixed; right: 22px; bottom: 22px; z-index: 96; width: min(390px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--bg1); border: 1px solid var(--line-strong); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(12px) scale(0.98); /* §7: Das Fenster wächst aus dem Knopf, der es öffnet — nicht aus der Mitte */ transform-origin: bottom right; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); } /* Das hidden-Attribut setzt nur display:none — jede eigene display-Regel schlägt es. Ohne diese Zeile liegt das unsichtbare Fenster über der Seite und verschluckt alle Klicks darunter. */ .ch-fenster[hidden] { display: none; } .ch-fenster.ch-da { opacity: 1; transform: none; } /* Der Aufrufknopf verschwindet, solange das Fenster offen ist — sonst liegt er sichtbar dahinter und man klickt versehentlich darauf. */ body.ch-offen .ch-knopf { opacity: 0; pointer-events: none; } .ch-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface); } .ch-kopf strong { display: block; font-size: 15px; font-weight: 600; } .ch-hinweis { display: block; font-size: 12px; color: var(--faint); margin-top: 3px; } .ch-zu { font-size: 24px; line-height: 1; color: var(--muted); padding: 0 4px; min-width: 32px; min-height: 32px; } .ch-zu:hover { color: var(--ink); } .ch-lauf { flex: 1; min-height: 140px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; } .ch-blase { max-width: 88%; padding: 12px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .ch-bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--ink); } .ch-ich { align-self: flex-end; background: var(--accent-fill); color: #fff; } .ch-blase a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; } .ch-ich a { color: #fff; } .ch-fehler { border-color: rgba(224, 168, 119, 0.4); color: var(--muted); } .ch-wartet::after { content: '…'; display: inline-block; width: 1.2em; text-align: left; animation: ch-punkte 1.2s steps(4, end) infinite; } @keyframes ch-punkte { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '…'; } } .ch-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; } .ch-vorschlaege:empty { display: none; } .ch-vorschlag { font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; text-align: left; } .ch-vorschlag:hover { border-color: var(--accent); color: var(--ink); } .ch-eingabe { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface); } .ch-eingabe textarea { flex: 1; resize: none; font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink); background: var(--bg1); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; max-height: 120px; } .ch-eingabe textarea:focus { outline: none; border-color: var(--accent); } .ch-eingabe button[type="submit"] { flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: var(--accent-fill); color: #fff; font-size: 18px; line-height: 1; } .ch-eingabe button[type="submit"]:disabled { opacity: 0.45; } .ch-fuss { padding: 0 18px 14px; font-size: 11.5px; color: var(--faint); line-height: 1.45; } @media (max-width: 560px) { .ch-knopf { right: 14px; bottom: 14px; padding: 12px 16px; font-size: 13.5px; } .ch-fenster { right: 0; left: 0; bottom: 0; width: 100%; max-height: 88vh; border-radius: var(--radius-card) var(--radius-card) 0 0; border-left: none; border-right: none; border-bottom: none; } body.ch-offen { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .ch-fenster { transition: none; } .ch-wartet::after { animation: none; content: '…'; } } /* ---------- Kontaktkarte im Chat ---------- */ .ch-lead { padding: 14px 18px 16px; border-top: 1px solid var(--line); background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--surface); } .ch-lead[hidden] { display: none; } .ch-lead-text { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; } .ch-lead-form { display: flex; gap: 8px; } .ch-lead-form input { flex: 1; min-width: 0; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--bg1); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; } .ch-lead-form input:focus { outline: none; border-color: var(--accent); } .ch-lead-form button { flex-shrink: 0; background: var(--accent-fill); color: #fff; font-size: 14.5px; font-weight: 600; border-radius: 10px; padding: 10px 16px; } .ch-lead-form button:disabled { opacity: 0.5; } .ch-lead-alt { display: inline-block; margin-top: 11px; font-size: 13px; color: var(--accent-bright); border-bottom: 1px solid transparent; } .ch-lead-alt:hover { border-color: var(--accent); } /* ============================================================ Umbau 08/2026: Ablauf-Karten, Manifest, Tilt, Tiefe ============================================================ */ /* ---------- Ablauf: Karten statt Kreise ---------- */ /* Jede Karte ist ein Stück echter Arbeit (Mail, Agent, CRM, PDF, Freigabe). Sie bauen sich am Scrollfortschritt auf; die aktive hebt sich, erledigte bleiben sichtbar aber ruhig. */ .flow-vis { display: grid; gap: 12px; max-width: 400px; width: 100%; justify-self: center; perspective: 900px; } .fv-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 16px; opacity: 0; transform: translateY(26px) scale(0.96); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); will-change: transform, opacity; } .fv-card.on { opacity: 0.55; transform: none; } .fv-card.now { opacity: 1; border-color: rgba(79, 131, 232, 0.55); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(79, 131, 232, 0.12); transform: translateY(-2px) scale(1.015); } .fv-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; margin-bottom: 10px; color: var(--muted); } .fv-card.now .fv-head { color: var(--ink); } .fv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 8px rgba(79, 131, 232, 0.8); } .fv-line { height: 7px; border-radius: 4px; background: rgba(246, 241, 234, 0.12); margin-bottom: 7px; } .fv-meta { font-size: 12px; color: var(--faint); margin-top: 4px; } .fv-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fv-chips span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); } .fv-card.now .fv-chips span { border-color: rgba(79, 131, 232, 0.5); color: var(--ink); } .fv-chips .fv-warm { border-color: rgba(224, 168, 119, 0.5); color: var(--warm); } .fv-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--muted); padding: 4px 0; } .fv-ok { color: var(--accent-bright); font-weight: 700; } .fv-btn { display: inline-block; background: var(--accent-fill); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 999px; } .reduced-motion .fv-card { opacity: 1; transform: none; } /* ---------- Manifest: Text färbt sich beim Scrollen ein ---------- */ .manifest { padding: clamp(90px, 14vh, 160px) 0; } .manifest-text { font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; max-width: 26ch; margin: 0 auto; } .manifest-text .mw { color: rgba(246, 241, 234, 0.18); transition: color 0.25s linear; } .manifest-text .mw.an { color: var(--ink); } .reduced-motion .manifest-text .mw { color: var(--ink); } /* ---------- Hero: Vertrauenszeile ---------- */ .hero-trust { margin-top: 18px; font-size: 13.5px; color: var(--faint); letter-spacing: 0.01em; } /* ---------- Karten kippen dem Cursor entgegen ---------- */ /* transform kommt aus JS; hier nur Bühne und Lichtreflex. Der Reflex ist ein radialer Fleck, der der Mausposition folgt (CSS-Variablen --gx/--gy). */ .tilt-stage { perspective: 1000px; } [data-tilt] { transform-style: preserve-3d; position: relative; } [data-tilt]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(246, 241, 234, 0.07), transparent 65%); opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none; } [data-tilt]:hover::after { opacity: 1; } .reduced-motion [data-tilt]::after { display: none; } /* ---------- Sektions-Tiefe beim Verlassen ---------- */ /* JS setzt transform/opacity per Scrub; hier nur der Ursprung, damit die Sektion "nach hinten sackt" statt zu schrumpfen. */ .depth-leave { transform-origin: center top; will-change: transform, opacity; } /* ---------- Timeline (Über mich): der Strahl zeichnet sich beim Scrollen ---------- */ .timeline { position: relative; padding-left: 26px; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line-strong); border-radius: 1px; } .timeline .tl-strahl { position: absolute; left: 0; top: 0; height: 100%; width: 2px; background: var(--accent); border-radius: 1px; transform: scaleY(0); transform-origin: top; } .tl-item { position: relative; } .tl-item::before { content: ''; position: absolute; left: -31px; top: 40px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } .tl-item.an::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(79, 131, 232, 0.7); } .reduced-motion .timeline .tl-strahl { transform: none; } .reduced-motion .tl-item::before { background: var(--accent); border-color: var(--accent); } /* ---------- Hero: 3D-Roboter rechts ---------- */ .hero-3d { position: relative; height: clamp(420px, 56vh, 620px); opacity: 0; transition: opacity 0.9s var(--ease-out); } .hero-3d.bereit { opacity: 1; } .hero-3d canvas { width: 100%; height: 100%; display: block; } /* Weiches Auslaufen nach unten, damit der Szenenrand nicht hart abschneidet */ .hero-3d::after { content: ''; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(to top, var(--bg0), transparent); pointer-events: none; } @media (max-width: 900px) { .hero-3d { display: none; } } /* ---------- KI-Check-Streifen unter dem Hero ---------- */ .check-strip { padding-top: 0; padding-bottom: clamp(60px, 9vh, 110px); } .check-strip .hero-check { max-width: 720px; margin: 0 auto; } /* ---------- Stapelkarten: 3D-Wegkippen (Osmo-Stil) ---------- */ /* Die Perspektive liegt am Stapel, das Kippen macht GSAP (rotationX beim Verlassen). Die Karte dreht um ihre Oberkante nach hinten weg. */ .stack { perspective: 1200px; } .stack-panel { transform-origin: center top; } /* Rechte Seite der Karte: große Zahl + Belegliste */ .stack-side { display: grid; gap: 26px; align-content: center; } .stack-stat { display: grid; gap: 6px; } .ss-num { font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 5.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .ss-num em { font-style: normal; font-size: 0.55em; color: var(--accent-bright); margin-left: 4px; } .ss-label { color: var(--muted); font-size: 15px; max-width: 30ch; } /* ---------- Hero-Hintergrundlicht ---------- */ /* Reine Farbverläufe, kein Bild: Blau von oben rechts, Warm von unten links, bewusst ohne sichtbare Kanten oder Streifen. Am Handy kräftiger (dort gibt es keinen Roboter). Die Ebene parallaxt per JS langsamer als der Inhalt. */ .hero { position: relative; overflow: hidden; } .hero-licht { position: absolute; inset: -14% 0; background: radial-gradient(58% 42% at 82% 8%, rgba(79, 131, 232, 0.20), transparent 68%), radial-gradient(46% 36% at 55% 30%, rgba(114, 159, 242, 0.08), transparent 70%), radial-gradient(52% 40% at 8% 96%, rgba(224, 168, 119, 0.12), transparent 66%); pointer-events: none; z-index: 0; will-change: transform; } @media (max-width: 900px) { .hero-licht { background: radial-gradient(70% 44% at 85% 4%, rgba(79, 131, 232, 0.26), transparent 70%), radial-gradient(56% 38% at 50% 34%, rgba(114, 159, 242, 0.10), transparent 72%), radial-gradient(58% 42% at 4% 98%, rgba(224, 168, 119, 0.15), transparent 68%); } } /* Schrittnummern auf den Ablauf-Karten — verankern die Karte am Text links */ .fv-nr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 11px; font-weight: 700; color: var(--faint); flex-shrink: 0; } .fv-card.now .fv-nr { border-color: var(--accent); color: var(--accent-bright); } /* ---------- Leistungs-Raster ---------- */ .leist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .leist-karte { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-card, 18px); padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; gap: 12px; } .leist-karte h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); } .leist-karte p { color: var(--muted); font-size: 15.5px; line-height: 1.6; flex: 1; } .leist-karte .stack-cta { margin-top: 14px; } /* Die Hauptleistung liegt breit obendrauf — Hierarchie statt Gleichmacherei */ .leist-breit { grid-column: 1 / -1; background: linear-gradient(150deg, var(--surface-2), var(--surface) 70%); border-color: var(--line-strong); } .leist-breit p { max-width: 60ch; } /* Mobil: Wischleiste mit Einrasten statt langer Spalte. Die Leiste blutet bis an den Bildschirmrand (negative Ränder gegen das Container-Padding), damit die nächste Karte anschneidet und zum Wischen einlädt. */ /* ---------- Projekte: drei Geschichten mit einer grossen Zahl ---------- */ .story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .story-karte { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-card, 18px); padding: clamp(26px, 3vw, 38px); } .story-tag { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; } .story-metrik { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.4rem, 4.2vw, 3.4rem); line-height: 1; color: var(--ink); } .story-metrik em { font-style: normal; font-size: 0.55em; color: var(--accent-bright); margin-left: 2px; } .story-sub { color: var(--faint); font-size: 13.5px; margin: 10px 0 18px; } .story-karte p { color: var(--muted); font-size: 15px; line-height: 1.65; } /* ---------- Hero-Foto: Textur statt Farbfläche ---------- */ /* Frei lizenziertes Foto (Unsplash), LOKAL abgelegt — die Datenschutzerklärung sagt zu, dass nichts von Drittanbietern nachgeladen wird. Gespiegelt, damit die ruhige dunkle Ecke links unter der Überschrift liegt. */ .hero-foto { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-foto::before { content: ''; position: absolute; inset: -10%; background: url('../assets/hero-bg.jpg') center / cover no-repeat; transform: scaleX(-1) scale(1); opacity: 0.78; animation: hero-drift 38s ease-in-out infinite alternate; will-change: transform; } /* Zwei Schleier: einer schiebt die Helligkeit nach rechts weg, einer verdunkelt oben und unten für Kopfzeile und Übergang. */ .hero-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg0) 2%, rgba(16, 14, 12, 0.80) 30%, rgba(16, 14, 12, 0.12) 92%), linear-gradient(to bottom, rgba(16, 14, 12, 0.72), transparent 22%, rgba(16, 14, 12, 0.88)); } @keyframes hero-drift { from { transform: scaleX(-1) scale(1) translate3d(0, 0, 0); } to { transform: scaleX(-1) scale(1.14) translate3d(-2.5%, -2%, 0); } } @media (max-width: 900px) { /* Am Handy liegt der Text über der ganzen Breite, also kräftiger abdunkeln. */ .hero-foto::before { opacity: 0.85; } .hero-foto::after { background: linear-gradient(180deg, rgba(16, 14, 12, 0.80) 0%, rgba(16, 14, 12, 0.42) 48%, rgba(16, 14, 12, 0.92) 100%); } } .reduced-motion .hero-foto::before { animation: none; } /* ---------- Ablauf auf dem Handy: Inhalt muss in einen Bildschirm passen ---------- */ /* Gemessen: 904 px Inhalt in 812 px Rahmen. Weil die Bühne zentriert, schaute der Kopf oben unter die feste Kopfzeile. Deshalb hier alles kompakter plus Kopfzeilen-Freiraum. */ @media (max-width: 900px) { .flow-stage { padding-top: 76px; box-sizing: border-box; } .flow-inner { gap: 20px; } .flow-caption { font-size: clamp(1.45rem, 6vw, 2rem); min-height: 0; margin-top: 10px; } .flow-note { font-size: 14.5px; min-height: 4.4em; margin-top: 12px; } .flow-bar { margin-top: 16px; } .flow-vis { gap: 8px; max-width: none; } .fv-card { padding: 10px 13px; border-radius: 12px; } .fv-head { margin-bottom: 6px; font-size: 12.5px; } .fv-line { height: 6px; margin-bottom: 5px; } .fv-row { padding: 2px 0; font-size: 12.5px; } .fv-chips span { font-size: 11.5px; padding: 3px 9px; } .fv-meta { font-size: 11px; margin-top: 2px; } .fv-btn { padding: 8px 15px; font-size: 13.5px; } } /* ---------- Unterseiten: dieselbe Lichtstimmung wie die Startseite ---------- */ /* Vorher waren sie flach grau, weil Foto und Licht nur im Hero der Startseite lagen. Hier eine ruhigere Fassung: nur Licht, kein Foto, damit die Textseiten sachlich bleiben. */ .page-hero { position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: -40% 0 -20% 0; background: radial-gradient(52% 42% at 84% 22%, rgba(79, 131, 232, 0.20), transparent 66%), radial-gradient(46% 36% at 4% 82%, rgba(224, 168, 119, 0.10), transparent 64%); /* Ohne die Maske schneidet die Elementkante den Lichtschein hart ab und es entsteht ein sichtbarer Streifen quer über die Seite. */ -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent 96%); pointer-events: none; z-index: 0; } .page-hero > * { position: relative; z-index: 1; } @media (max-width: 900px) { .page-hero::before { background: radial-gradient(78% 34% at 88% 18%, rgba(79, 131, 232, 0.24), transparent 70%), radial-gradient(66% 32% at 0% 84%, rgba(224, 168, 119, 0.12), transparent 68%); } } /* Der Chat-Knopf saß auf dem letzten Absatz — am Handy kompakter und tiefer. */ @media (max-width: 620px) { .ch-knopf { font-size: 13px; padding: 10px 15px; } } @media (max-width: 620px) { .ch-lang { display: none; } } /* ============================================================ Unterseiten: dieselbe Farbsprache wie die Startseite Vorher fehlte hier das Blau fast vollständig — Pfeile waren weiß, Nummern grau, Blöcke nur durch Linien getrennt. Das ließ die Seiten farblos wirken, obwohl die Startseite von denselben Bausteinen lebt. ============================================================ */ /* ---------- Leistungen: Karten statt Linien ---------- */ .svc-detail { border-top: none !important; background: linear-gradient(150deg, var(--surface-2), var(--surface) 72%); border: 1px solid var(--line); border-radius: var(--radius-card, 18px); padding: clamp(28px, 4vw, 46px) !important; margin-bottom: 16px; } .svc-detail:last-of-type { border-bottom: 1px solid var(--line) !important; } .svc-num { color: var(--accent) !important; font-weight: 700 !important; letter-spacing: -0.02em; } /* Die Pfeile waren weiß — auf der Startseite sind dieselben blau. */ .svc-list li::before { color: var(--accent) !important; } .svc-fit { background: rgba(79, 131, 232, 0.07); border-color: rgba(79, 131, 232, 0.32); } @media (max-width: 900px) { .svc-detail { grid-template-columns: 1fr; gap: 18px; } .svc-num { font-size: 1.5rem; } } /* ---------- KI-Check: die beiden Auswahlkarten ---------- */ .check-mode { background: linear-gradient(150deg, var(--surface-2), var(--surface) 72%) !important; position: relative; overflow: hidden; } /* Lichtkante oben, wie bei den Panels der Startseite */ .check-mode::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(79, 131, 232, 0.5), transparent); } .check-mode h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); } .check-mode .cm-time { color: var(--accent) !important; text-transform: uppercase; letter-spacing: 0.12em; } .check-mode .cm-go { color: var(--accent-bright) !important; } .check-mode:hover { border-color: rgba(79, 131, 232, 0.55) !important; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4); } /* Der Schnell-Check ist die Empfehlung — der bekommt das Gewicht. */ .check-choice .check-mode:first-child { border-color: rgba(79, 131, 232, 0.4); } .check-choice .check-mode:first-child .cm-go { display: inline-block; background: var(--accent-fill); color: #fff !important; padding: 11px 22px; border-radius: 999px; align-self: flex-start; } @media (max-width: 760px) { .check-choice { grid-template-columns: 1fr; } } /* ---------- Hero am Handy: aufgeräumt, Check-Karte direkt anschließend ---------- */ /* Die Karte wird per JS in .hero-inner verschoben (siehe main.js). Hier bekommt sie den passenden Abstand und der Hero verliert seine Leerfläche unten. */ @media (max-width: 900px) { /* Einspaltig: Text, Knopf, Check-Karte untereinander im Hero. Zwei Spalten wurden getestet und verworfen — bei 390px Bildschirmbreite bleiben pro Spalte nur 167px, das trägt weder Überschrift noch Karte. */ .hero { padding-bottom: 18px; } .hero-inner { gap: 26px; } .hero-inner .hero-check { margin-top: 0; width: 100%; } .hero-inner .hero-check h2 { font-size: 1.35rem; } .hero-inner .hero-check > p { font-size: 14.5px; margin-bottom: 18px; } .hero-inner .hero-check .hc-modes { gap: 10px; } .hero-sub { margin-bottom: 26px; } .hero-actions { margin-bottom: 4px; } } /* ---------- Anfrageformular im CTA-Panel (heller Grund) ---------- */ /* Zwei gleichwertige Wege nebeneinander: schreiben oder sprechen. Einspaltiges Formular, große Tippflächen, klare Erwartung darunter — das sind die drei Dinge, die Kontaktformulare messbar besser machen. */ .kontakt-wege { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(24px, 4vw, 56px); align-items: start; } .anfrage-kopf { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-fill); margin-bottom: 20px; } .anfrage { display: grid; gap: 16px; } .af-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .af-feld { display: grid; gap: 7px; } .af-feld label { font-size: 13.5px; color: var(--inverse-muted); font-weight: 500; } .af-pflicht { color: var(--accent-fill); } .af-feld input, .af-feld textarea { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--inverse-line); border-radius: 12px; padding: 13px 15px; /* ergibt >44px Tipphöhe */ font: inherit; font-size: 15.5px; color: var(--on-inverse); width: 100%; } .af-feld textarea { resize: vertical; line-height: 1.55; min-height: 116px; } .af-feld input::placeholder, .af-feld textarea::placeholder { color: rgba(16, 14, 12, 0.38); } .af-feld input:focus, .af-feld textarea:focus { outline: none; border-color: var(--accent-fill); box-shadow: 0 0 0 3px rgba(53, 104, 207, 0.16); } .af-feld input.af-falsch, .af-feld textarea.af-falsch { border-color: #b4442f; } .af-einwilligung { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--inverse-muted); line-height: 1.5; } .af-einwilligung input { margin-top: 3px; accent-color: var(--accent-fill); width: 17px; height: 17px; flex-shrink: 0; } .af-einwilligung a { text-decoration: underline; } .af-fehler { font-size: 14px; color: #a33a26; font-weight: 500; } .af-senden { justify-self: start; } .af-senden[disabled] { opacity: 0.6; pointer-events: none; } .af-hinweis { font-size: 12.5px; color: var(--inverse-muted); margin: 0 !important; } .af-danke { border: 1px solid var(--accent-fill); background: rgba(53, 104, 207, 0.08); border-radius: 14px; padding: 22px 24px; font-size: 15.5px; line-height: 1.6; color: var(--on-inverse); } .af-danke strong { display: block; margin-bottom: 6px; font-size: 17px; } .kontakt-alt { border-left: 1px solid var(--inverse-line); padding-left: clamp(20px, 3vw, 40px); } .kontakt-alt p { color: var(--inverse-muted); font-size: 15px; margin-bottom: 22px !important; max-width: 34ch; } .kontakt-direkt { display: grid; gap: 10px; margin-top: 24px; } @media (max-width: 900px) { .kontakt-wege { grid-template-columns: 1fr; } .kontakt-alt { border-left: none; border-top: 1px solid var(--inverse-line); padding-left: 0; padding-top: 30px; } } @media (max-width: 560px) { .af-reihe { grid-template-columns: 1fr; } } /* Ankersprung von einer Unterseite: die feste Kopfzeile darf das Ziel nicht verdecken, wenn der Browser ohne JavaScript direkt dorthin springt. */ #kontakt { scroll-margin-top: 96px; } /* ---------- Symbolkacheln auf den Leistungskarten ---------- */ /* Reine Inline-SVGs, kein Symbol-Paket von außen — die Datenschutzerklärung sagt zu, dass nichts von Drittanbietern nachgeladen wird. */ .lk-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(79, 131, 232, 0.12); border: 1px solid rgba(79, 131, 232, 0.26); color: var(--accent-bright); margin-bottom: 16px; flex-shrink: 0; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out); } .lk-icon svg { width: 23px; height: 23px; display: block; } .leist-karte:hover .lk-icon { background: rgba(79, 131, 232, 0.2); color: #fff; } /* Die breite Hauptkarte trägt das Symbol neben der Überschrift, nicht darüber */ .leist-breit { position: relative; } .leist-breit .lk-icon { width: 52px; height: 52px; border-radius: 15px; background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; } .leist-breit .lk-icon svg { width: 26px; height: 26px; } @media (max-width: 900px) { /* Am Handy sitzt das Symbol neben dem Titel — spart Höhe in der Wischleiste */ .leist-karte { padding: 22px 20px; } .lk-icon { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px; } .lk-icon svg { width: 20px; height: 20px; } .leist-breit .lk-icon { width: 44px; height: 44px; } .leist-karte h3 { font-size: 1.18rem; } .leist-karte p { font-size: 14.5px; } } /* ---------- Karten stapeln sich beim Runterscrollen (statt seitlich wischen) ---------- Seitliches Wischen wurde verworfen: man übersieht, dass rechts noch etwas kommt. Stattdessen bleibt jede Karte kurz stehen und die nächste schiebt sich darüber — dasselbe Prinzip wie beim großen Nutzen-Stapel, nur kompakter. */ @media (max-width: 900px) { .leist-grid, .story-grid { display: block; perspective: 1000px; } .leist-karte, .story-karte { position: sticky; margin-bottom: 18px; transform-origin: center top; will-change: transform; /* Schatten trennt die gestapelten Karten optisch voneinander */ box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.45); } .leist-karte:nth-child(1), .story-karte:nth-child(1) { top: 96px; } .leist-karte:nth-child(2), .story-karte:nth-child(2) { top: 106px; } .leist-karte:nth-child(3), .story-karte:nth-child(3) { top: 116px; } .leist-karte:nth-child(4), .story-karte:nth-child(4) { top: 126px; } /* Die letzte Karte braucht Luft darunter, sonst klebt der nächste Abschnitt dran */ .leist-karte:last-child, .story-karte:last-child { margin-bottom: 0; } .leist-grid, .story-grid { padding-bottom: 8px; } } .reduced-motion .leist-karte, .reduced-motion .story-karte { position: static; }