/* ========================================================================== Vantalogic — site.css Gemeinsames Design-System für alle Seiten (index, geo, karriere, legal). Aufbau: 1. Design-Tokens (Farben, Typo, Abstände) 2. Fonts (self-hosted Inter Variable, DSGVO: kein Google-CDN) 3. Reset & Basis 4. Typografie & Utilities 5. Buttons & Links 6. Navigation 7. Hero (animierter Mesh-Hintergrund, Headline-Reveal) 8. Sections & Karten 9. Checkliste, Showcase-Platzhalter, FAQ 10. Formular 11. Voice-Demo-Karte 12. Footer 13. Legal-Seiten (.prose, dunkles Layout) 14. Scroll-Reveal-System 15. Responsive 16. prefers-reduced-motion Performance-Regeln (nicht verhandelbar): - Animiert werden NUR transform und opacity (GPU, kein Layout-Thrashing). - Alle Bilder im HTML brauchen width/height-Attribute (CLS = 0). - Reveal-Initialzustände greifen nur bei — ohne JavaScript bleibt jeder Inhalt sichtbar. ========================================================================== */ /* ── 1. Design-Tokens ──────────────────────────────────────────────────── */ :root { /* Markenpalette: Deep Graphite + Azure Blue */ --ink: #0d1117; /* Deep Graphite — Text, dunkle Sections */ --ink-soft: #161b22; /* Karten auf dunklem Grund */ --azure: #0A74DA; /* Azure Blue — Primärfarbe */ --azure-dark: #0860B5; /* Hover-Zustand */ --azure-light: #3B97F5; /* Akzente auf dunklem Grund */ --slate: #f5f7fa; /* helle Flächen */ --border: #e2e8f0; /* Linien auf hellem Grund */ --txt: #1e293b; /* Fließtext */ --muted: #64748b; /* Sekundärtext */ --dim: #94a3b8; /* Tertiärtext, Labels */ /* Typo-Skala (fluid) */ --fs-display: clamp(2.5rem, 1.2rem + 5vw, 4.25rem); /* H1 Hero */ --fs-h2: clamp(1.75rem, 1rem + 2.8vw, 2.75rem); /* Section-Headlines */ --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --fs-body: 1rem; --fs-small: 0.875rem; /* Layout */ --maxw: 1180px; --nav-h: 72px; /* fixe Nav-Höhe → kein Layout-Shift */ --radius: 14px; --radius-lg: 20px; --shadow-card: 0 6px 28px rgba(10, 116, 218, 0.09); --shadow-pop: 0 14px 48px rgba(13, 17, 23, 0.14); /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --reveal-dur: 0.65s; } /* ── 2. Fonts (self-hosted) ────────────────────────────────────────────── */ /* Inter Variable, latin. Eine Datei deckt 100–900 ab. font-display: swap + metrisch angepasster Arial-Fallback → kein CLS. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; } /* ── 3. Reset & Basis ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Anker-Sprünge landen nicht unter der fixen Nav */ [id] { scroll-margin-top: calc(var(--nav-h) + 16px); } body { background: #fff; color: var(--txt); font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif; font-size: var(--fs-body); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } /* hidden-Attribut muss auch gegen display:flex/grid von Komponenten gewinnen */ [hidden] { display: none !important; } /* ── 4. Typografie & Utilities ─────────────────────────────────────────── */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 780px; } .h-display { font-size: var(--fs-display); font-weight: 800; color: var(--ink); line-height: 1.05; letter-spacing: -0.03em; } .h-section { font-size: var(--fs-h2); font-weight: 800; color: var(--ink); line-height: 1.12; letter-spacing: -0.02em; } .h-card { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); line-height: 1.3; } .lead { font-size: 1.0625rem; color: var(--muted); line-height: 1.75; } /* Kicker: kleine Überzeile mit Linie */ .kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azure); } .kicker::before { content: ''; width: 28px; height: 1px; background: var(--azure); } .accent-bar { width: 36px; height: 3px; background: var(--azure); border-radius: 2px; } .text-center { text-align: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Grids */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 18px; } /* ── 5. Buttons & Links ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 0.9375rem; padding: 15px 30px; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .btn:active { transform: translateY(1px); } .btn .btn-arrow { transition: transform 0.25s var(--ease); } .btn:hover .btn-arrow { transform: translateX(4px); } .btn--primary { background: var(--azure); color: #fff; } .btn--primary:hover { background: var(--azure-dark); box-shadow: 0 8px 28px rgba(10, 116, 218, 0.3); } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: var(--azure); } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); } .btn--ghost:hover { border-color: var(--azure); color: var(--azure); } /* Auf dunklem Grund */ .btn--ghost-dark { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); } .btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } /* Textlink mit animiertem Unterstrich (transform-only) */ .link-underline { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; padding-bottom: 3px; transition: color 0.18s var(--ease); } .link-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0.35); transform-origin: left center; transition: transform 0.3s var(--ease); } .link-underline:hover { color: var(--azure); } .link-underline:hover::after { transform: scaleX(1); } /* ── 6. Navigation ─────────────────────────────────────────────────────── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); background: rgba(255, 255, 255, 0); border-bottom: 1px solid transparent; transition: background 0.28s var(--ease), border-color 0.28s var(--ease); } .site-nav.scrolled { background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom-color: rgba(13, 17, 23, 0.06); } /* Dunkle Variante (geo.html) */ .site-nav--dark.scrolled { background: rgba(13, 17, 23, 0.92); border-bottom-color: rgba(255, 255, 255, 0.07); } .nav-inner { max-width: 1280px; margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } /* Das Logo-PNG hat viel transparenten Rand — der Zoom auf 357 % schneidet ihn weg. Beim Austausch des Logos diesen Wert anpassen. */ .brand-mark { width: 40px; height: 40px; background-image: url('../img/Logo Hintergrundlos.png'); background-size: 357% auto; background-position: center; background-repeat: no-repeat; } /* Das weiß-blaue Logo füllt seine Leinwand deutlich stärker als das farbige (kaum Rand) — darum eigener, kleinerer Zoom statt der 357 %. */ .brand-mark--white { background-image: url('../img/Logo Weiß Blau Hintergrundlos.png'); background-size: 180% auto; } .brand-text { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); } .site-nav--dark .brand-text { color: #fff; } .brand-badge { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azure-light); background: rgba(10, 116, 218, 0.15); border: 1px solid rgba(10, 116, 218, 0.3); border-radius: 4px; padding: 2px 8px; } .nav-links { display: none; align-items: center; gap: 32px; list-style: none; } .nav-link { position: relative; font-size: 0.85rem; font-weight: 500; color: #475569; text-decoration: none; padding: 6px 0; transition: color 0.18s var(--ease); } .nav-link:hover { color: var(--ink); } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--azure); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s var(--ease); } .nav-link:hover::after { transform: scaleX(1); } .site-nav--dark .nav-link { color: rgba(255, 255, 255, 0.65); } .site-nav--dark .nav-link:hover { color: #fff; } .nav-cta { display: none; align-items: center; gap: 7px; background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 600; padding: 10px 20px; border-radius: 8px; text-decoration: none; transition: background 0.18s var(--ease); } .nav-cta:hover { background: var(--azure); } .site-nav--dark .nav-cta { background: var(--azure); } .site-nav--dark .nav-cta:hover { background: var(--azure-dark); } /* Mobile Burger */ .nav-burger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(13, 17, 23, 0.04); border: 1px solid rgba(13, 17, 23, 0.08); border-radius: 8px; cursor: pointer; color: var(--ink); } .site-nav--dark .nav-burger { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); color: #fff; } .nav-burger .icon-close { display: none; } .site-nav.menu-open .nav-burger .icon-menu { display: none; } .site-nav.menu-open .nav-burger .icon-close { display: block; } .nav-drawer { display: none; flex-direction: column; background: rgba(255, 255, 255, 0.98); border-top: 1px solid rgba(13, 17, 23, 0.06); padding: 16px 24px 32px; } .site-nav.menu-open .nav-drawer { display: flex; } .site-nav--dark .nav-drawer { background: rgba(13, 17, 23, 0.98); border-top-color: rgba(255, 255, 255, 0.08); } .nav-drawer a { font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; padding: 15px 0; border-bottom: 1px solid rgba(13, 17, 23, 0.06); } .site-nav--dark .nav-drawer a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.08); } /* ── 7. Hero ───────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 92svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 56px) 0 80px; overflow: hidden; background: #fff; } /* Dezentes Punkteraster als statischer Hintergrund */ .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(13, 17, 23, 0.07) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, black, transparent); mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, black, transparent); pointer-events: none; } /* Animierte Mesh-Blobs: weiche radiale Verläufe, NUR transform animiert. Kein filter:blur (teuer) — die Gradients laufen selbst weich aus. */ .hero-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; } .hero-blob--1 { width: 640px; height: 640px; top: -180px; right: -140px; background: radial-gradient(circle, rgba(10, 116, 218, 0.13) 0%, transparent 62%); animation: blob-drift-1 26s ease-in-out infinite alternate; } .hero-blob--2 { width: 520px; height: 520px; bottom: -200px; left: -160px; background: radial-gradient(circle, rgba(59, 151, 245, 0.1) 0%, transparent 62%); animation: blob-drift-2 32s ease-in-out infinite alternate; } @keyframes blob-drift-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-70px, 50px) scale(1.12); } } @keyframes blob-drift-2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -40px) scale(1.08); } } .hero-inner { position: relative; z-index: 1; } /* Gestaffelter Headline-Reveal beim Laden (reines CSS, kein JS nötig) */ /* opacity startet bei 0.01, NICHT bei 0: Chrome wertet Inhalte, die von opacity 0 einfaden, nie als LCP-Kandidat — die H1 würde dann nicht zählen und das LCP-Budget (2,5 s) reißen. 0.01 ist visuell unsichtbar, zählt aber. */ .js .hero-stagger > * { opacity: 0.01; transform: translateY(18px); animation: hero-rise 0.5s var(--ease) forwards; } .js .hero-stagger > *:nth-child(1) { animation-delay: 0.03s; } .js .hero-stagger > *:nth-child(2) { animation-delay: 0.1s; } .js .hero-stagger > *:nth-child(3) { animation-delay: 0.17s; } .js .hero-stagger > *:nth-child(4) { animation-delay: 0.24s; } .js .hero-stagger > *:nth-child(5) { animation-delay: 0.31s; } @keyframes hero-rise { to { opacity: 1; transform: translateY(0); } } .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted); } .hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .hero-trust svg { color: var(--azure); flex-shrink: 0; } /* ── 8. Sections & Karten ─────────────────────────────────────────────── */ .section { padding: clamp(72px, 6vw + 40px, 110px) 0; border-top: 1px solid var(--border); } .section--slate { background: var(--slate); } .section--dark { background: var(--ink); border-top-color: rgba(255, 255, 255, 0.06); } .section--dark .h-section, .section--dark .h-card { color: #fff; } .section--dark .lead { color: rgba(255, 255, 255, 0.58); } .section--dark p { color: rgba(255, 255, 255, 0.58); } .sec-head { max-width: 640px; margin-bottom: clamp(40px, 4vw, 60px); } .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .card:hover { box-shadow: var(--shadow-card); border-color: rgba(10, 116, 218, 0.22); transform: translateY(-4px); } .card p { font-size: var(--fs-small); color: var(--muted); line-height: 1.7; } /* Karte mit blauer Top-Linie beim Hover */ .card--lined { position: relative; overflow: hidden; } .card--lined::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--azure); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .card--lined:hover::before { transform: scaleX(1); } /* Dunkle Karte (GEO-Sektion) */ .card--dark { background: var(--ink-soft); border-color: rgba(255, 255, 255, 0.08); } .card--dark:hover { border-color: rgba(10, 116, 218, 0.45); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .card--dark .h-card { color: #fff; } .card--dark p { color: rgba(255, 255, 255, 0.55); } .card-num { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--azure); margin-bottom: 16px; } .icon-box { width: 46px; height: 46px; border-radius: 10px; background: rgba(10, 116, 218, 0.07); border: 1px solid rgba(10, 116, 218, 0.14); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--azure); } /* ── 9. Checkliste, Showcase, FAQ ─────────────────────────────────────── */ .check-list { list-style: none; display: grid; gap: 0; } .check-list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: flex-start; } .check-list li:last-child { border-bottom: none; } .check-list svg { flex-shrink: 0; color: var(--azure); margin-top: 4px; } .check-list strong { display: block; color: var(--ink); font-size: 0.9375rem; margin-bottom: 2px; } .check-list span { font-size: var(--fs-small); color: var(--muted); line-height: 1.65; } /* Showcase-Platzhalter: bewusst als Platzhalter erkennbar (gestrichelt), damit live keine Fake-Referenz suggeriert wird. Ersetzen: siehe README. */ .showcase-card { position: relative; border: 1.5px dashed #cbd5e1; border-radius: var(--radius); background: repeating-linear-gradient(-45deg, rgba(13, 17, 23, 0.015) 0 10px, transparent 10px 20px), #fafbfc; padding: 28px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); } .showcase-card:hover { border-color: var(--azure); transform: translateY(-4px); } .placeholder-badge { position: absolute; top: 16px; left: 16px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; } /* FAQ: natives
— Inhalt steht im DOM, KI-Crawler lesen ihn ohne JS */ .faq-item { border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: 10px; transition: border-color 0.2s var(--ease); } .faq-item:hover { border-color: rgba(10, 116, 218, 0.3); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 0.9375rem; color: var(--ink); list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary svg { flex-shrink: 0; color: var(--dim); transition: transform 0.3s var(--ease); } .faq-item[open] summary svg { transform: rotate(45deg); color: var(--azure); } .faq-item .faq-body { padding: 0 22px 20px; font-size: var(--fs-small); color: var(--muted); line-height: 1.75; max-width: 660px; } /* ── 10. Formular ──────────────────────────────────────────────────────── */ .form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; } .field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; font-size: var(--fs-small); color: var(--txt); font-family: inherit; outline: none; transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: var(--dim); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--azure); box-shadow: 0 0 0 3px rgba(10, 116, 218, 0.11); } .field textarea { resize: vertical; min-height: 130px; } .form-row { display: grid; grid-template-columns: 1fr; gap: 14px; } /* DSGVO-Einwilligung */ .consent { display: flex; gap: 11px; align-items: flex-start; font-size: 0.78rem; color: var(--muted); line-height: 1.6; cursor: pointer; } .consent input { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--azure); cursor: pointer; } .consent a { color: var(--azure); } .form-note { font-size: 0.72rem; color: var(--dim); line-height: 1.6; } .form-error { font-size: 0.8125rem; color: #dc2626; background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.18); border-radius: 8px; padding: 11px 14px; } .form-success { text-align: center; padding: 36px 0; } .form-success .success-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: #16a34a; } /* Kontakt-Infokarten (mailto / tel) */ .contact-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; } .contact-card .icon-box { width: 38px; height: 38px; margin: 0; border-radius: 8px; } .contact-card .cc-label { display: block; font-size: 0.68rem; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; } .contact-card .cc-value { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); } /* ── 11. Voice-Demo-Karte ─────────────────────────────────────────────── */ .voice-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); text-align: center; transition: box-shadow 0.3s var(--ease); } .voice-card.active { box-shadow: 0 0 0 2px var(--azure), 0 8px 40px rgba(10, 116, 218, 0.15); } .voice-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px; background: #f0f5ff; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; color: var(--azure); transition: background 0.4s var(--ease), border-color 0.4s var(--ease); } .voice-card.active .voice-avatar { background: var(--azure); border-color: var(--azure); color: #fff; } .voice-spinner { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--azure); border-top-color: transparent; animation: voice-spin 0.8s linear infinite; } @keyframes voice-spin { to { transform: rotate(360deg); } } .voice-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; } .voice-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } .voice-card.connecting .voice-status .dot { background: #eab308; } .voice-card.active .voice-status .dot { background: #ef4444; } .voice-status span { font-size: 0.8125rem; font-weight: 500; color: var(--muted); } /* Wellenbalken: animiert nur transform (scaleY), nicht height */ .voice-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 36px; margin-bottom: 22px; } .voice-wave span { display: block; width: 5px; height: 26px; border-radius: 3px; background: var(--border); transform: scaleY(0.23); transition: background 0.2s, transform 0.2s; } .voice-wave.speaking span { background: var(--azure); animation: wave 0.7s ease-in-out infinite; } .voice-wave.speaking span:nth-child(1) { animation-delay: 0s; } .voice-wave.speaking span:nth-child(2) { animation-delay: 0.1s; } .voice-wave.speaking span:nth-child(3) { animation-delay: 0.2s; } .voice-wave.speaking span:nth-child(4) { animation-delay: 0.13s; } .voice-wave.speaking span:nth-child(5) { animation-delay: 0.06s; } .voice-wave.speaking span:nth-child(6) { animation-delay: 0.22s; } .voice-wave.speaking span:nth-child(7) { animation-delay: 0.09s; } @keyframes wave { 0%, 100% { transform: scaleY(0.23); } 50% { transform: scaleY(1); } } .voice-controls { display: flex; gap: 10px; } .voice-controls .btn { flex: 1; padding: 12px; font-size: var(--fs-small); } .btn--danger { background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.25); color: #ef4444; } .btn--danger:hover { background: rgba(239, 68, 68, 0.12); } .btn--neutral { background: #f8fafc; border: 1px solid var(--border); color: var(--muted); } .btn--neutral:hover { border-color: var(--dim); } .btn--neutral.muted-on { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.06); } .voice-privacy { margin-top: 18px; font-size: 0.72rem; color: var(--dim); line-height: 1.6; text-align: center; } .voice-privacy a { color: var(--azure); } /* ── 11b. Bilder: Media-Frame & CTA-Band ─────────────────────────────── */ /* Gerundeter Bildrahmen; img braucht width/height-Attribute (CLS = 0) */ .media-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .media-frame img { width: 100%; height: auto; display: block; transition: transform 0.5s var(--ease); } .media-frame:hover img { transform: scale(1.04); } .media-frame--dark { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); } /* Voll-breites CTA-Band mit Bildhintergrund. Das Bild liegt absolut, die Höhe kommt aus dem Padding — kein Layout-Shift beim Lazy-Load. */ .cta-band { position: relative; overflow: hidden; padding: clamp(72px, 7vw + 30px, 120px) 0; background: var(--ink); /* Fallback bis das Bild da ist */ } .cta-band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .cta-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(13, 17, 23, 0.93) 35%, rgba(13, 17, 23, 0.5) 100%); } .cta-band-inner { position: relative; z-index: 1; } .cta-band .kicker { color: var(--azure-light); } .cta-band .kicker::before { background: var(--azure-light); } .cta-band p { color: rgba(255, 255, 255, 0.65); } /* ── 12. Footer ───────────────────────────────────────────────────────── */ .site-footer { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 60px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; } .footer-brand p { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.38); line-height: 1.7; margin-top: 16px; max-width: 280px; } .footer-slogan { font-size: 0.75rem; color: rgba(255, 255, 255, 0.24); font-style: italic; margin-top: 10px; } .footer-col h2 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.28); margin-bottom: 16px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .ft-link { color: rgba(255, 255, 255, 0.4); font-size: 0.8125rem; text-decoration: none; transition: color 0.2s var(--ease); } .ft-link:hover { color: rgba(255, 255, 255, 0.8); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.22); } .footer-bottom .sep { color: rgba(255, 255, 255, 0.15); } /* ── 13. Legal-Seiten (impressum, datenschutz, agb, cookies, karriere) ── */ body.legal { background: var(--ink); color: rgba(255, 255, 255, 0.75); } body.legal .legal-wrap { max-width: 780px; margin: 0 auto; padding: calc(var(--nav-h) + 48px) 24px 80px; } .prose h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; } .prose h2 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 40px 0 12px; } .prose h3 { font-size: 1.05rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); margin: 26px 0 8px; } .prose p, .prose li { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.62); line-height: 1.8; } .prose p { margin-bottom: 14px; } .prose ul { padding-left: 22px; margin-bottom: 14px; } .prose a { color: var(--azure-light); } .prose strong { color: rgba(255, 255, 255, 0.88); } .prose .legal-meta { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.35); margin-bottom: 36px; } .prose .info-box { background: var(--ink-soft); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px; padding: 20px 24px; margin: 18px 0; } /* ── 14. Scroll-Reveal-System ─────────────────────────────────────────── */ /* Initialzustand nur bei aktivem JS — sonst bleibt alles sichtbar. js/main.js setzt .in-view per IntersectionObserver. Stagger pro Element über style="--reveal-delay: 120ms". */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); transition-delay: var(--reveal-delay, 0ms); } .js .reveal.in-view { opacity: 1; transform: translateY(0); } /* ── 15. Responsive ───────────────────────────────────────────────────── */ @media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } .nav-links, .nav-cta { display: inline-flex; } .nav-links { display: flex; } .nav-burger { display: none; } .nav-drawer { display: none !important; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split--start { align-items: start; } } /* ── 16. prefers-reduced-motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js .reveal, .js .hero-stagger > * { opacity: 1; transform: none; } }