/* ============================================================ Baltivo Marketing — Stylesheet Rayan Hansen · baltivomarketing.de Aufbau: 1 Farbtoken (dunkel + hell) 10 Über mich 2 Basis 11 Warum Baltivo 3 Typografie 12 Bewertungen 4 Buttons 13 FAQ 5 Navigation 14 Abschluss-CTA 6 Hero 15 Footer 7 Kundenlogos + Detailfenster 16 Unterseiten 8 Kennzahlen / Ergebniskarte 17 Bewegung & Responsive 9 Angebots-Kacheln ============================================================ */ /* --- 1. Farbtoken -------------------------------------------- */ /* --- 0b. Schriften -------------------------------------------- */ /* Cinzel (Wortmarke) und Jost (Menü) liegen als Dateien in assets/fonts/. Bewusst NICHT von fonts.googleapis.com geladen: das würde die IP jedes Besuchers an Google übertragen. Die Seite baut zu keinem fremden Server eine Verbindung auf — das soll so bleiben. Beide stehen unter der SIL Open Font License, siehe assets/fonts/LIZENZ.txt. Es sind variable Schriften: eine Datei deckt alle Gewichte ab. */ @font-face { font-family: 'Cinzel'; src: url('fonts/cinzel-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel'; src: url('fonts/cinzel-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; src: url('fonts/jost-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; src: url('fonts/jost-latin-ext.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Dunkel ist der Normalfall. [data-theme="light"] dreht alles um. Gesetzt wird das Attribut von einem kleinen Skript im , damit beim Laden nichts aufblitzt. */ :root { --blue: #5FC7FC; /* exakter Logo-Blauton */ --blue-mid: #2A9EE8; --blue-deep: #1D4ED8; --on-blue: #04121C; --link: #5FC7FC; --bg: #000000; --bg-2: #08090C; --bg-3: #0E1015; --card: rgba(255, 255, 255, 0.035); --card-2: rgba(255, 255, 255, 0.06); --card-solid: #101319; --card-grad: linear-gradient(168deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); --line: rgba(255, 255, 255, 0.09); --line-soft: rgba(255, 255, 255, 0.055); --line-strong:rgba(255, 255, 255, 0.22); --text: #F5F5F7; --text-2: #A1A5AE; --text-3: #7B7F89; /* auf Schwarz 5.0:1 — 6E727C lag mit 4.36 unter AA */ --text-inv: #06070A; --nav-bg: rgba(12, 14, 19, 0.66); --nav-bg-top: rgba(12, 14, 19, 0.28); --sheet: rgba(8, 9, 13, 0.96); --glow-a: rgba(95, 199, 252, 0.34); --glow-b: rgba(29, 78, 216, 0.38); --glow-cta: rgba(95, 199, 252, 0.24); --grid-line: rgba(255, 255, 255, 0.045); --grain: 0.038; --shadow-lg: 0 30px 70px -32px rgba(0, 0, 0, 0.95); --shadow-md: 0 18px 40px -18px rgba(0, 0, 0, 0.9); --tile-ring: rgba(0, 0, 0, 0.22); --logo-invert: 0; --radius-sm: 14px; --radius: 22px; --radius-lg: 30px; --pad-x: clamp(20px, 5vw, 40px); --section-y: clamp(88px, 13vw, 168px); /* Höhe der fixierten Menüleiste — steuert Vorlauf und Sprungziele. */ --nav-h: 70px; /* Wortmarke und Menü. Fallbacks greifen, solange die Datei lädt. */ --font-marke: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif; --font-menue: 'Jost', 'Century Gothic', 'Avenir Next', var(--font); --maxw: 1160px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Systemschrift: rendert SF Pro auf Apple-Geräten, Segoe UI auf Windows. Bewusst keine Google Fonts — kein externer Request, DSGVO-sicher. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; } [data-theme="light"] { /* Auf Weiß muss der Blauton deutlich dunkler sein als im Dunkelmodus. #0A84D8 kam nur auf 3.96:1 — sowohl als Text auf Weiß als auch als Knopffläche unter weißer Schrift. #0A6FBA erreicht rund 5.4:1. */ --blue: #0A6FBA; --blue-mid: #1D4ED8; --blue-deep: #123A9E; --on-blue: #FFFFFF; --link: #0A6FBA; --bg: #FFFFFF; --bg-2: #F4F5F7; --bg-3: #EBEDF1; --card: rgba(15, 20, 30, 0.028); --card-2: rgba(15, 20, 30, 0.055); --card-solid: #FFFFFF; --card-grad: linear-gradient(168deg, rgba(15,20,30,0.035), rgba(15,20,30,0.008)); --line: rgba(15, 20, 30, 0.12); --line-soft: rgba(15, 20, 30, 0.075); --line-strong:rgba(15, 20, 30, 0.3); --text: #101219; --text-2: #55585F; --text-3: #6B6E76; /* auf Weiß 5.0:1 — 83868D lag mit 3.65 unter AA */ --text-inv: #FFFFFF; --nav-bg: rgba(255, 255, 255, 0.72); --nav-bg-top: rgba(255, 255, 255, 0.3); --sheet: rgba(255, 255, 255, 0.97); --glow-a: rgba(95, 199, 252, 0.4); --glow-b: rgba(29, 78, 216, 0.16); --glow-cta: rgba(95, 199, 252, 0.28); --grid-line: rgba(15, 20, 30, 0.05); --grain: 0.02; --shadow-lg: 0 28px 60px -32px rgba(20, 30, 50, 0.3); --shadow-md: 0 16px 36px -20px rgba(20, 30, 50, 0.26); --tile-ring: rgba(15, 20, 30, 0.1); --logo-invert: 0; } /* --- 2. Basis ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Nur noch etwas Luft über Sprungzielen. Falls du die Seite unter eine eigene fixierte Kopfzeile setzt, hier deren Höhe eintragen. */ scroll-padding-top: calc(var(--nav-h) + 22px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.55; letter-spacing: -0.021em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* Bewusst KEINE Transition auf background-color/color: wenn der Wert aus einer var() kommt, die sich beim Umschalten ändert, bleibt die Farbe in manchen Engines auf dem alten Wert stehen. Das Umschalten läuft ohnehin hart, siehe setzeTheme() in app.js. */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--blue); color: var(--on-blue); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--blue); color: var(--on-blue); padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 600; } .skip-link:focus { left: 0; } /* --- 3. Typografie -------------------------------------------- */ h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; } .display { font-size: clamp(2.55rem, 7.2vw, 5.1rem); font-weight: 600; letter-spacing: -0.042em; line-height: 1.04; } .h2 { font-size: clamp(2rem, 4.6vw, 3.35rem); letter-spacing: -0.038em; } .h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.03em; } /* Kleine Auszeichnung im Monospace-Stil — gibt der Seite Kante */ .tag { display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .eyebrow { display: inline-flex; align-items: flex-start; gap: 9px; font-size: 0.79rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin: 0 0 22px; } .eyebrow::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 0.5em; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px 2px var(--glow-cta); } .lead { font-size: clamp(1.05rem, 1.65vw, 1.28rem); line-height: 1.62; color: var(--text-2); letter-spacing: -0.017em; max-width: 62ch; } .grad { background: linear-gradient(104deg, var(--text) 6%, var(--blue) 54%, var(--blue-mid) 94%); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-head { max-width: 720px; margin-bottom: clamp(48px, 6vw, 76px); } .section-head .lead { margin: 20px 0 0; } /* Kopf mit Zusatz rechts (Referenz-Layout: Titel links, Meta rechts) */ .head-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: clamp(40px, 5vw, 64px); } .head-split .section-head { margin-bottom: 0; } /* --- 4. Buttons ----------------------------------------------- */ .btn { --btn-bg: var(--text); --btn-fg: var(--text-inv); display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 30px; border: 1px solid transparent; border-radius: 980px; background: var(--btn-bg); color: var(--btn-fg); font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.018em; cursor: pointer; white-space: nowrap; transition: transform .35s var(--ease-out), background-color .3s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.985); } .btn--primary { --btn-bg: var(--blue); --btn-fg: var(--on-blue); box-shadow: 0 6px 26px -8px var(--glow-cta); } .btn--primary:hover { filter: brightness(1.08); box-shadow: 0 14px 40px -10px var(--glow-cta); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .btn--ghost:hover { --btn-bg: var(--card-2); border-color: var(--line-strong); } .btn--sm { padding: 10px 20px; font-size: 0.9rem; } .btn .arr { transition: transform .35s var(--ease-out); } .btn:hover .arr { transform: translateX(4px); } .tlink { display: inline-flex; align-items: center; gap: 7px; color: var(--link); font-weight: 600; font-size: 0.98rem; } .tlink .arr { transition: transform .35s var(--ease-out); } .tlink:hover .arr { transform: translateX(4px); } /* --- 5. Navigation -------------------------------------------- */ /* Freischwebende Pillenleiste statt durchgehendem Balken. */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: 14px; transition: padding-top .45s var(--ease); } .nav.is-stuck { padding-top: 8px; } .nav-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .nav-bar { display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 18px; border: 1px solid transparent; border-radius: 980px; background: var(--nav-bg-top); transition: background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); } .nav.is-stuck .nav-bar { background: var(--nav-bg); border-color: var(--line-soft); box-shadow: var(--shadow-md); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand img { height: 26px; width: auto; } /* Wortmarke in Cinzel. Die Kleinbuchstaben der Schrift sind Kapitälchen, "Baltivo Marketing" erscheint dadurch von selbst als Versalzeile. Versalien brauchen mehr Laufweite, sonst kleben sie zusammen. */ .brand-name { font-family: var(--font-marke); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.07em; line-height: 1; white-space: nowrap; padding-top: 1px; /* Kapitälchen sitzen optisch etwas hoch */ } /* Zweites Wort ruhiger — sonst kämpft die Marke mit dem blauen Knopf daneben um Aufmerksamkeit. */ .brand-name span { color: var(--text-2); font-weight: 400; } .nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; } .nav-links a { display: block; padding: 8px 14px; font-size: 0.92rem; color: var(--text-2); border-radius: 980px; transition: color .28s var(--ease), background-color .28s var(--ease); } .nav-links a { font-family: var(--font-menue); font-size: 0.94rem; font-weight: 500; letter-spacing: 0.012em; } .nav-links a:hover { color: var(--text); background: var(--card); } .nav-links a[aria-current] { color: var(--text); } .nav-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Der Erstgesprächs-Knopf ist das Ziel der ganzen Seite. Feste Mindest- breite, damit die Beschriftung mittig steht und der Knopf beim Wechsel der Seite nicht springt. */ .nav-cta { position: relative; overflow: hidden; min-width: 208px; justify-content: center; text-align: center; font-family: var(--font-menue); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.015em; padding: 12px 22px; } /* Ein Lichtstreifen zieht alle paar Sekunden darüber — genug, um den Blick zu holen, zu langsam, um zu nerven. */ .nav-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(104deg, transparent 36%, rgba(255, 255, 255, 0.38) 50%, transparent 64%); transform: translateX(-140%); animation: ctaGlanz 6s var(--ease-out) 2.5s infinite; pointer-events: none; } @keyframes ctaGlanz { 0%, 58% { transform: translateX(-140%); } 88%, 100% { transform: translateX(140%); } } .nav-cta:hover { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .nav-cta::after { animation: none; } } /* Hell/Dunkel-Umschalter */ .theme-toggle { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--text-2); cursor: pointer; overflow: hidden; transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--line-strong); } .theme-toggle svg { position: absolute; width: 17px; height: 17px; transition: transform .5s var(--ease-out), opacity .35s var(--ease); } /* Frei stehende Variante — seit der Rückkehr der Menüleiste NICHT MEHR IN GEBRAUCH; der Umschalter sitzt wieder in der Leiste (.nav-tools). Die Regeln bleiben stehen, falls die Seite einmal ohne Leiste unter eine fremde Kopfzeile gesetzt wird: dann am Knopf einfach zusätzlich die Klasse theme-toggle--float vergeben. */ .theme-toggle--float { position: fixed; right: clamp(14px, 2.4vw, 26px); bottom: clamp(14px, 2.4vw, 26px); z-index: 90; width: 46px; height: 46px; background: var(--nav-bg); box-shadow: var(--shadow-md); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } .theme-toggle--float:hover { transform: translateY(-2px); } .theme-toggle--float svg { width: 19px; height: 19px; } .theme-toggle .ic-sun { transform: translateY(0) rotate(0deg); opacity: 1; } .theme-toggle .ic-moon { transform: translateY(-140%) rotate(-90deg); opacity: 0; } [data-theme="light"] .theme-toggle .ic-sun { transform: translateY(140%) rotate(90deg); opacity: 0; } [data-theme="light"] .theme-toggle .ic-moon { transform: translateY(0) rotate(0deg); opacity: 1; } .nav-toggle { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; padding: 0; } .nav-toggle span { display: block; position: relative; width: 16px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .35s var(--ease), background-color .2s; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .35s var(--ease); } .nav-toggle span::before { top: -5px; } .nav-toggle span::after { top: 5px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); } .nav-drawer { position: fixed; inset: 70px 0 auto 0; z-index: 99; margin-inline: var(--pad-x); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--sheet); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); box-shadow: var(--shadow-lg); padding: 8px 22px 22px; display: none; animation: drawerIn .38s var(--ease-out) both; } .nav-drawer.is-open { display: block; } @keyframes drawerIn { from { opacity: 0; transform: translateY(-10px); } } .nav-drawer ul { list-style: none; margin: 0; padding: 0; } .nav-drawer a { display: block; padding: 14px 2px; font-family: var(--font-menue); font-size: 1.14rem; font-weight: 500; letter-spacing: 0.01em; border-bottom: 1px solid var(--line-soft); } .nav-drawer .btn { margin-top: 20px; width: 100%; } /* --- 6. Hero -------------------------------------------------- */ /* Die Leiste liegt fixiert darüber und verdeckt sonst die Oberkante. Oben deshalb zusätzlich ihre Höhe, damit der Inhalt im sichtbaren Bereich mittig steht und nicht hinter dem Balken beginnt. */ .hero { position: relative; min-height: min(84svh, 820px); display: flex; align-items: center; padding: calc(clamp(72px, 9vw, 116px) + var(--nav-h)) 0 clamp(70px, 10vw, 120px); overflow: hidden; text-align: center; } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Hülle für die Parallaxe: der Schein selbst hat schon eine eigene transform-Animation, beides am selben Element würde sich schlagen. */ .glow-wrap { position: absolute; inset: 0; pointer-events: none; } .glow { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; } .glow-a { width: min(120vw, 1180px); height: min(74vw, 700px); top: -30%; left: 50%; margin-left: min(-60vw, -590px); background: radial-gradient(closest-side, var(--glow-a), transparent 72%); animation: breathe 13s var(--ease) infinite alternate; } .glow-b { width: min(86vw, 720px); height: min(60vw, 560px); bottom: -22%; left: 12%; background: radial-gradient(closest-side, var(--glow-b), transparent 70%); animation: drift 17s var(--ease) infinite alternate; } @keyframes breathe { from { transform: scale(1); opacity: .85; } to { transform: scale(1.14); opacity: 1; } } @keyframes drift { from { transform: translate(0, 0) scale(1); opacity: .6; } to { transform: translate(11%, -8%) scale(1.12); opacity: .95; } } .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 74px 74px; mask-image: radial-gradient(120% 78% at 50% 34%, #000 12%, transparent 76%); -webkit-mask-image: radial-gradient(120% 78% at 50% 34%, #000 12%, transparent 76%); } /* Korn nimmt den Verläufen das Banding */ .grain { position: absolute; inset: -50%; opacity: var(--grain); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-inner { position: relative; z-index: 2; } .hero h1 { margin: 0 auto; max-width: 16ch; } .hero .lead { margin: 28px auto 0; max-width: 60ch; font-size: clamp(1.06rem, 1.75vw, 1.32rem); } .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 40px; } .hero-note { margin: 22px 0 0; font-size: 0.87rem; color: var(--text-3); } .scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); } .scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--blue), transparent); animation: cue 2.2s var(--ease) infinite; } @keyframes cue { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { transform: scaleY(1); transform-origin: top; opacity: 1; } 60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } } /* --- 7. Kundenlogos ------------------------------------------- */ .marquee-section { position: relative; padding: clamp(52px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg-2); } .marquee-label { text-align: center; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 clamp(30px, 4vw, 44px); } .marquee { overflow: hidden; padding: 8px 0 36px; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; } .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; } /* --set-w setzt app.js auf die Breite eines Durchlaufs. */ @keyframes slide { to { transform: translateX(calc(var(--set-w, 50%) * -1)); } } .marquee-item { position: relative; display: flex; align-items: center; padding-inline: clamp(10px, 1.4vw, 18px); flex-shrink: 0; } .kunde-tile { position: relative; display: block; width: clamp(66px, 7.4vw, 92px); aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: none; overflow: hidden; cursor: pointer; flex-shrink: 0; transition: transform .45s var(--ease-out), border-color .4s var(--ease), box-shadow .45s var(--ease); } .kunde-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: saturate(.72) brightness(.86); transition: filter .5s var(--ease), transform .6s var(--ease-out); } [data-theme="light"] .kunde-tile img { filter: saturate(.86) brightness(.98); } .kunde-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--tile-ring); pointer-events: none; } .kunde-tile:hover, .kunde-tile:focus-visible { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-md), 0 0 0 4px var(--glow-cta); } .kunde-tile:hover img, .kunde-tile:focus-visible img { filter: none; transform: scale(1.04); } .kunde-tile-name { position: absolute; left: 50%; bottom: -26px; transform: translate(-50%, 4px); white-space: nowrap; font-size: 0.78rem; font-weight: 500; letter-spacing: -0.015em; color: var(--text-2); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease-out); } .kunde-tile:hover .kunde-tile-name, .kunde-tile:focus-visible .kunde-tile-name { opacity: 1; transform: translate(-50%, 0); } /* Kunden-Detailfenster */ .kunde-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(86svh, 760px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(105% 42% at 50% 0%, var(--glow-cta), transparent 70%), var(--card-solid); color: var(--text); overflow: hidden; } /* WICHTIG: display NUR im geöffneten Zustand setzen. Eine unbedingte display-Angabe überschreibt das display:none eines geschlossenen — die leere Hülle bliebe sonst sichtbar stehen. */ .kunde-dialog[open] { display: flex; flex-direction: column; } .kunde-dialog::backdrop { background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .kunde-dialog[open] { animation: dlgIn .42s var(--ease-out) both; } .kunde-dialog[open]::backdrop { animation: bdIn .42s var(--ease) both; } @keyframes dlgIn { from { opacity: 0; transform: translateY(14px) scale(.97); } } @keyframes bdIn { from { opacity: 0; } } .kunde-dialog-body { flex: 1 1 auto; min-height: 0; padding: clamp(26px, 4vw, 38px); overflow-y: auto; overscroll-behavior: contain; } .kunde-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card-2); color: var(--text-2); cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease-out); } .kunde-close:hover { color: var(--text); border-color: var(--line-strong); transform: rotate(90deg); } .kunde-close svg { width: 15px; height: 15px; } .kunde-head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; } .kunde-head img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 18px; border: 1px solid var(--line); object-fit: cover; } .kunde-head h3 { font-size: clamp(1.32rem, 2.6vw, 1.65rem); letter-spacing: -0.032em; } .kunde-meta { margin: 7px 0 0; font-size: 0.86rem; color: var(--text-3); } .kunde-dialog p.kunde-text { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.68; } .kunde-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .kunde-facts li { flex: 1 1 120px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); } .kunde-facts b { display: block; font-size: 1.22rem; font-weight: 600; letter-spacing: -0.035em; background: linear-gradient(140deg, var(--text), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kunde-facts span { font-size: 0.77rem; color: var(--text-3); } .kunde-dialog-foot { flex-shrink: 0; padding: 20px clamp(26px, 4vw, 38px) clamp(24px, 4vw, 32px); border-top: 1px solid var(--line-soft); background: var(--card); } .kunde-dialog-foot .btn { width: 100%; } body.dialog-open { overflow: hidden; } /* --- 8. Kennzahlen + Ergebniskarte ---------------------------- */ .stats-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 4.5vw, 64px); align-items: center; padding: clamp(60px, 8vw, 108px) 0; } .stats { display: grid; gap: clamp(26px, 3.5vw, 42px); } .stat-n { font-size: clamp(2.3rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; background: linear-gradient(140deg, var(--text) 16%, var(--blue) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .stat-t { margin: 12px 0 0; font-size: 0.96rem; color: var(--text-2); line-height: 1.5; max-width: 34ch; } /* Ergebniskarte — Optik der Referenz, aber ausschließlich echte Werte */ .result-card { position: relative; padding: clamp(26px, 3.2vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(120% 60% at 50% 0%, var(--glow-cta), transparent 68%), var(--card-grad); overflow: hidden; } .result-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; } .result-head .tag { color: var(--text-3); } .result-id { font-family: var(--mono); font-size: 0.72rem; color: var(--blue); letter-spacing: 0.04em; } .result-big { font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; margin: 0; background: linear-gradient(130deg, var(--text) 10%, var(--blue) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } .result-sub { margin: 8px 0 0; font-size: 0.95rem; color: var(--text-2); } .result-rows { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; } .result-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line-soft); font-size: 0.93rem; } .result-rows dt, .result-rows .k { color: var(--text-3); } .result-rows .v { color: var(--text); font-weight: 600; letter-spacing: -0.02em; text-align: right; } /* Reiter zum Durchklicken der Kunden. app.js füllt sie aus kunden.js. */ .result-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); } .result-tab { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: none; overflow: hidden; cursor: pointer; opacity: .42; transition: opacity .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-out), box-shadow .3s var(--ease); } .result-tab img { width: 100%; height: 100%; object-fit: cover; display: block; } .result-tab:hover { opacity: .85; transform: translateY(-2px); } .result-tab[aria-selected="true"] { opacity: 1; border-color: var(--blue); box-shadow: 0 0 0 3px var(--glow-cta); } /* Wechsel des Karteninhalts kurz anblenden */ .result-card .wechsel { animation: kartenWechsel .45s var(--ease-out) both; } @keyframes kartenWechsel { from { opacity: 0; transform: translateY(8px); } } /* --- 9. Angebots-Kacheln -------------------------------------- */ .section { padding: var(--section-y) 0; } .section--ink { background: var(--bg-2); } /* Flacher Abschnitt — für die Bewertungen, damit sie den Weg zu den Angeboten nicht unnötig in die Länge ziehen. */ .section--tight { padding: clamp(58px, 8vw, 104px) 0; } .section--tight .head-split { margin-bottom: clamp(26px, 3vw, 38px); } .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); } .tile { position: relative; display: flex; flex-direction: column; min-height: clamp(400px, 46vw, 500px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-soft); background: #0B0D12; isolation: isolate; transition: transform .55s var(--ease-out), border-color .45s var(--ease), box-shadow .55s var(--ease); } .tile:hover { transform: translateY(-6px); border-color: var(--blue); box-shadow: var(--shadow-lg); } .tile-media { position: absolute; inset: -6% -2%; z-index: -1; overflow: hidden; } .tile-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.62); transform: scale(1.02); transition: filter .85s var(--ease), transform 1.1s var(--ease-out); } /* Blau-Duotone — vereinheitlicht Fotos aus unterschiedlichen Quellen */ .tile-media .tint { position: absolute; inset: 0; background: #1C6FA8; mix-blend-mode: color; opacity: .88; transition: opacity .85s var(--ease); } .tile-media .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,14,0.15) 0%, rgba(4,8,14,0.72) 52%, rgba(4,8,14,0.95) 100%), radial-gradient(110% 70% at 50% 0%, rgba(95,199,252,0.16), transparent 62%); } .tile:hover .tile-media img { filter: none; transform: scale(1.07); } .tile:hover .tile-media .tint { opacity: 0; } /* Kategorie-Chip oben rechts, wie in der Referenz */ .tile-chip { position: absolute; top: 18px; right: 18px; z-index: 2; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 6px 12px; border-radius: 980px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .tile-body { margin-top: auto; padding: clamp(26px, 3.4vw, 38px); display: flex; flex-direction: column; gap: 13px; color: #F5F5F7; } .tile-kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #5FC7FC; } .tile h3 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); } .tile p { margin: 0; color: rgba(245, 245, 247, 0.76); font-size: 0.99rem; line-height: 1.55; } .tile-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; list-style: none; padding: 0; } .tile-meta li { font-size: 0.79rem; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 980px; color: rgba(245, 245, 247, 0.72); background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .tile-link { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden; } .tile-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 0.95rem; font-weight: 600; color: #5FC7FC; } .tile-go .arr { transition: transform .4s var(--ease-out); } .tile:hover .tile-go .arr { transform: translateX(5px); } /* --- Kacheln ohne Foto ---------------------------------------- */ /* Übergangszustand, bis neue Bilder da sind: die Kachel trägt sich dann über Typografie statt über das Bild. Zum Zurückbauen die Klasse tile--text entfernen und den .tile-media-Block einkommentieren. */ .tile--text { min-height: 0; background: radial-gradient(95% 60% at 50% 0%, var(--glow-cta), transparent 70%), var(--card-grad); } .tile--text .tile-body { color: var(--text); padding-top: clamp(34px, 4.4vw, 52px); } .tile--text .tile-kicker { color: var(--blue); } .tile--text h3 { color: var(--text); } .tile--text p { color: var(--text-2); } .tile--text .tile-meta li { color: var(--text-2); border-color: var(--line); background: var(--card); } .tile--text .tile-chip { color: var(--text-3); border-color: var(--line); background: var(--card); } .tile--text .tile-go { color: var(--link); } /* Paketblöcke ohne Bild auf der Angebote-Seite */ .pack--text { grid-template-columns: 1fr; max-width: 800px; } .pack-nummer { display: inline-block; margin: 0 0 16px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 980px; background: var(--card); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--blue); } .tiles-foot { margin-top: clamp(26px, 3vw, 38px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; color: var(--text-3); font-size: 0.94rem; } /* --- 10. Über mich -------------------------------------------- */ .about { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(34px, 5vw, 78px); align-items: center; } .about-copy p { color: var(--text-2); font-size: 1.06rem; line-height: 1.68; } .about-copy p + p { margin-top: 20px; } .about-copy strong { color: var(--text); font-weight: 600; } .about-sig { margin-top: 30px; display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line-soft); } .about-sig b { display: block; font-weight: 600; letter-spacing: -0.025em; } .about-sig span { font-size: 0.88rem; color: var(--text-3); } /* Pflichtangabe zur Herkunft der Bewertungen. Bewusst zurückhaltend — sie muss zu finden sein, nicht die Bewertungen überstrahlen. */ .review-herkunft { margin-top: clamp(22px, 3vw, 32px); max-width: 78ch; font-size: 0.85rem; line-height: 1.65; color: var(--text-3); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; list-style: none; padding: 0; } .chips li { font-size: 0.85rem; padding: 7px 14px; border: 1px solid var(--line); border-radius: 980px; color: var(--text-2); } .about-visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: radial-gradient(85% 65% at 50% 12%, var(--glow-cta), transparent 68%), var(--card-grad); display: grid; place-items: center; } .about-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Auf der Über-mich-Seite ist der Textblock deutlich länger als das Portrait. Statt mittig zu schweben, bleibt das Bild beim Lesen stehen. */ .about--seite { align-items: start; } .about--seite .about-visual { position: sticky; top: 92px; } .about-visual .mono { position: relative; display: grid; place-items: center; gap: 16px; text-align: center; padding: 24px; } .about-visual .mono img { position: static; width: 76px; height: auto; object-fit: contain; opacity: .92; } .about-visual .mono b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.03em; } .about-visual .mono span { font-size: 0.83rem; color: var(--text-3); } /* --- 11. Warum Baltivo (redaktionell, nicht als Kachelraster) -- */ .why { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(34px, 5vw, 76px); align-items: start; } .why-intro { position: sticky; top: 110px; } .why-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); } .why-item { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; padding: clamp(22px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--line-soft); } .why-num { grid-row: span 2; font-family: var(--mono); font-size: 0.78rem; color: var(--blue); padding-top: 6px; min-width: 2.4ch; } .why-item h3 { font-size: clamp(1.12rem, 1.7vw, 1.3rem); letter-spacing: -0.03em; } .why-item p { margin: 9px 0 0; color: var(--text-2); font-size: 0.99rem; line-height: 1.62; } /* --- 12. Bewertungen ------------------------------------------ */ /* Sechserraster: die beiden langen Bewertungen liegen oben über je drei Spalten, die drei kurzen darunter über je zwei. Fließende CSS-Spalten hatten hier eine große Lücke gelassen, weil die längste Karte allein in einer Spalte stand. */ .reviews-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.8vw, 20px); } .review { display: flex; flex-direction: column; grid-column: span 2; padding: clamp(19px, 2.2vw, 24px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card-grad); transition: border-color .4s var(--ease), transform .45s var(--ease-out); } .review:hover { border-color: var(--blue); transform: translateY(-4px); } .review--wide { grid-column: span 3; } /* Das Zitat wächst, die Namenszeile bleibt unten — dadurch wirken gleich hohe Karten nebeneinander gewollt statt zufällig. */ .review blockquote { flex: 1; } /* Gesamtnote neben der Überschrift */ .review-score { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 980px; background: var(--card); } .review-score b { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .review-score .stars { margin: 0; } .review-score span:last-child { font-size: 0.86rem; color: var(--text-3); } .stars { display: flex; gap: 2px; color: #FFB300; margin-bottom: 12px; } .stars svg { width: 13px; height: 13px; } .review blockquote { margin: 0; color: var(--text-2); font-size: 0.93rem; line-height: 1.58; } .review blockquote p { margin: 0; } .review blockquote p + p { margin-top: 10px; } .review blockquote p:first-child::before { content: "„"; } .review blockquote p:last-child::after { content: "\201C"; } .review-by { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .review-by img { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; flex-shrink: 0; } /* Für Bewertende ohne Logo: Anfangsbuchstabe in Markenblau */ .review-avatar { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(150deg, var(--blue), var(--blue-mid)); color: var(--on-blue); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.02em; } .review-who { display: block; min-width: 0; } .review-who b { display: block; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.025em; } .review-who span { display: block; font-size: 0.76rem; color: var(--text-3); margin-top: 1px; } .review-src { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; font-size: 0.74rem; color: var(--text-3); } .review-src svg { width: 13px; height: 13px; } /* Auf schmalen Schirmen werden lange Bewertungen eingeklappt, sonst wächst der Abschnitt auf dem Handy ins Endlose. Die Kürzung setzt app.js über .is-kuerzbar — ohne JavaScript bleibt alles lesbar. */ .review.is-kuerzbar blockquote { max-height: 11.5em; overflow: hidden; mask-image: linear-gradient(180deg, #000 66%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent); } .review.is-kuerzbar.is-offen blockquote { max-height: none; overflow: visible; mask-image: none; -webkit-mask-image: none; } .review-more { align-self: flex-start; margin-top: 11px; padding: 0; background: none; border: 0; color: var(--link); font-family: inherit; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer; } .review-more:hover { text-decoration: underline; text-underline-offset: 3px; } /* deutlich sichtbar, solange die echten Texte fehlen */ .review--platzhalter { border-style: dashed; border-color: var(--line-strong); } .review--platzhalter .platzhalter-hinweis { display: inline-block; margin-bottom: 14px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; background: rgba(255, 179, 0, 0.14); color: #FFB300; border: 1px solid rgba(255, 179, 0, 0.35); } /* --- 13. FAQ -------------------------------------------------- */ .faq-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(34px, 5vw, 70px); align-items: start; } .faq-list { border-top: 1px solid var(--line-soft); } .faq-item { border-bottom: 1px solid var(--line-soft); } .faq-q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 25px 2px; background: none; border: 0; color: var(--text); font-family: inherit; font-size: clamp(1.02rem, 1.5vw, 1.13rem); font-weight: 500; letter-spacing: -0.028em; line-height: 1.42; text-align: left; cursor: pointer; transition: color .3s var(--ease); } .faq-q:hover { color: var(--blue); } .faq-ic { flex-shrink: 0; position: relative; width: 21px; height: 21px; margin-top: 3px; border-radius: 50%; border: 1px solid var(--line); transition: border-color .35s var(--ease), background-color .35s var(--ease), transform .45s var(--ease); } .faq-ic::before, .faq-ic::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; border-radius: 2px; background: var(--text-2); transform: translate(-50%, -50%); transition: transform .45s var(--ease), background-color .35s var(--ease); } .faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item.is-open .faq-ic { border-color: var(--blue); background: var(--glow-cta); transform: rotate(180deg); } .faq-item.is-open .faq-ic::before, .faq-item.is-open .faq-ic::after { background: var(--blue); } .faq-item.is-open .faq-ic::after { transform: translate(-50%, -50%) rotate(0deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a > div { overflow: hidden; } .faq-a p { margin: 0; padding: 0 44px 27px 2px; color: var(--text-2); font-size: 1rem; line-height: 1.68; opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease) .06s, transform .4s var(--ease) .06s; } .faq-item.is-open .faq-a p { opacity: 1; transform: none; } .faq-a a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .faq-aside { position: sticky; top: 110px; padding: clamp(28px, 3.4vw, 38px); border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(90% 70% at 50% 0%, var(--glow-cta), transparent 70%), var(--card); } .faq-aside h3 { font-size: 1.32rem; margin-bottom: 12px; } .faq-aside p { margin: 0 0 22px; color: var(--text-2); font-size: 0.99rem; line-height: 1.6; } .faq-aside .btn { width: 100%; } .faq-aside .direct { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 0.92rem; color: var(--text-3); } .faq-aside .direct a { color: var(--text-2); } .faq-aside .direct a:hover { color: var(--blue); } /* --- 14. Abschluss-CTA ---------------------------------------- */ .cta { position: relative; overflow: hidden; text-align: center; padding: clamp(88px, 12vw, 148px) 0; border-top: 1px solid var(--line-soft); } .cta::before { content: ""; position: absolute; left: 50%; top: -46%; width: min(130vw, 1080px); height: min(90vw, 720px); transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow-a), transparent 70%); filter: blur(60px); pointer-events: none; } .cta > .wrap { position: relative; z-index: 1; } .cta h2 { margin-inline: auto; max-width: 18ch; } .cta .lead { margin: 22px auto 0; text-align: center; } .cta-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 38px; } /* --- 15. Footer ----------------------------------------------- */ .footer { background: var(--bg-2); border-top: 1px solid var(--line-soft); padding: clamp(56px, 7vw, 84px) 0 34px; font-size: 0.93rem; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(30px, 4vw, 60px); padding-bottom: 44px; border-bottom: 1px solid var(--line-soft); } .footer .brand { margin-bottom: 16px; } .footer-blurb { color: var(--text-3); max-width: 34ch; line-height: 1.6; margin: 0; } .footer h4 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; font-weight: 500; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .footer ul a { color: var(--text-2); transition: color .28s var(--ease); } .footer ul a:hover { color: var(--blue); } .footer-bottom { padding-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; color: var(--text-3); font-size: 0.86rem; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; } .footer-bottom a:hover { color: var(--blue); } .socials { display: flex; gap: 10px; } .socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--text-2); transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease-out); } .socials a:hover { color: var(--blue); border-color: var(--blue); background: var(--card); transform: translateY(-2px); } .socials svg { width: 17px; height: 17px; } /* --- 16. Unterseiten ------------------------------------------ */ /* Der Kopf liegt unter der fixierten Leiste und braucht oben deren Höhe zusätzlich, sonst schneidet der Balken die Überschrift an. */ .page-head { position: relative; padding: calc(clamp(78px, 10vw, 132px) + var(--nav-h)) 0 clamp(50px, 7vw, 84px); overflow: hidden; border-bottom: 1px solid var(--line-soft); } .page-head .glow-a { top: -56%; opacity: .8; } .page-head-inner { position: relative; z-index: 2; } .page-head h1 { max-width: 18ch; } .page-head .lead { margin-top: 22px; } .crumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-family: var(--mono); font-size: 0.76rem; color: var(--text-3); } .crumb a { color: var(--text-2); } .crumb a:hover { color: var(--blue); } .pack { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; padding: clamp(48px, 6.5vw, 84px) 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 100px; } .pack:last-of-type { border-bottom: 0; } .pack--flip .pack-visual { order: 2; } .pack-visual { position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-soft); background: #0B0D12; } .pack-visual img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.68); transition: filter .9s var(--ease); } .pack-visual .tint { position: absolute; inset: 0; background: #1C6FA8; mix-blend-mode: color; opacity: .86; transition: opacity .9s var(--ease); } .pack-visual .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,14,0.1), rgba(4,8,14,0.6)); } .pack-visual:hover img { filter: none; } .pack-visual:hover .tint { opacity: 0; } .pack-num { position: absolute; top: 20px; left: 22px; z-index: 2; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; padding: 7px 13px; border-radius: 980px; background: rgba(4, 8, 14, 0.6); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #5FC7FC; } .pack h2 { font-size: clamp(1.85rem, 3.5vw, 2.7rem); } .pack .pack-sub { margin: 16px 0 0; color: var(--text-2); font-size: 1.05rem; line-height: 1.65; } .feature-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; } .feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.99rem; color: var(--text-2); line-height: 1.5; } .feature-list svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px; color: var(--blue); } .feature-list .opt { color: var(--text-3); } .feature-list .opt::after { content: "optional"; margin-left: 8px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line); border-radius: 980px; color: var(--text-3); } .pack-foot { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .price-note { font-size: 0.9rem; color: var(--text-3); } /* --- Paketkarten (Angebote-Seite) ----------------------------- */ .pakete { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 22px); align-items: stretch; } .pakete--drei { grid-template-columns: repeat(3, 1fr); } .paket { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: radial-gradient(100% 55% at 50% 0%, var(--glow-cta), transparent 68%), var(--card-grad); scroll-margin-top: 100px; transition: border-color .45s var(--ease), transform .5s var(--ease-out), box-shadow .5s var(--ease); } .paket:hover { border-color: var(--blue); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .paket-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .paket-nr { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--blue); } .paket-tag { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 980px; border: 1px solid var(--line); background: var(--card); color: var(--text-3); white-space: nowrap; } .paket h3 { font-size: clamp(1.28rem, 2.1vw, 1.55rem); letter-spacing: -0.032em; } .paket-sub { margin: 10px 0 0; color: var(--text-2); font-size: 0.96rem; line-height: 1.6; } .paket .feature-list { margin-top: 20px; gap: 10px; flex: 1; } .paket .feature-list li { font-size: 0.92rem; } .paket .feature-list svg { margin-top: 3px; } .paket-foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); } .paket-foot .btn { width: 100%; } .paket-foot .price-note { display: block; margin-top: 12px; text-align: center; } /* --- Ablauf: ein Kasten je Schritt ---------------------------- */ .ablauf-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 20px); list-style: none; margin: 0; padding: 0; } .ablauf-kasten { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 34px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card-grad); } .ablauf-kasten:hover { border-color: var(--blue); box-shadow: var(--shadow-md); } /* Große Ziffer im Hintergrund, wandert beim Scrollen leicht mit */ .ablauf-nr { position: absolute; top: -18px; right: 4px; font-family: var(--mono); font-size: clamp(4rem, 7vw, 5.6rem); font-weight: 600; letter-spacing: -0.06em; line-height: 1; color: var(--blue); opacity: .16; pointer-events: none; user-select: none; } .ablauf-kasten h3 { position: relative; font-size: clamp(1.06rem, 1.7vw, 1.22rem); letter-spacing: -0.03em; } .ablauf-kasten p { position: relative; margin: 10px 0 0; color: var(--text-2); font-size: 0.95rem; line-height: 1.6; } /* Kräftigere Einblendung als der Rest der Seite — die Kästen kommen beim Scrollen nacheinander hoch. Der Versatz steckt in --d. Die Transition steht bewusst hier komplett: die allgemeine [data-reveal]-Regel würde sonst die Hover-Übergänge verschlucken, und ihr transition-delay würde auch den Hover verzögern. */ .ablauf-kasten[data-reveal] { transform: translateY(34px) scale(.97); transition: opacity .85s var(--ease-out) var(--d, 0ms), transform .85s var(--ease-out) var(--d, 0ms), border-color .45s var(--ease), box-shadow .5s var(--ease); } .ablauf-kasten[data-reveal].is-in { transform: none; } /* --- Zahlenband über den Case Studies ------------------------- */ .zahlen-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 20px); margin-bottom: clamp(30px, 3.6vw, 46px); } .zahlen-kasten { padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card-grad); } .zahlen-kasten b { display: block; font-size: clamp(1.65rem, 3.2vw, 2.35rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; background: linear-gradient(140deg, var(--text) 16%, var(--blue) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; } .zahlen-kasten span { display: block; margin-top: 9px; font-size: 0.9rem; color: var(--text-2); } /* --- Case Studies (kompakt, ohne Bild) ------------------------ */ .cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 20px); } .case { padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card-grad); transition: border-color .45s var(--ease), box-shadow .5s var(--ease); } .case:hover { border-color: var(--blue); box-shadow: var(--shadow-md); } .case-tag { display: inline-block; margin-bottom: 12px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue); } .case h3 { font-size: clamp(1.16rem, 1.9vw, 1.38rem); margin-bottom: 10px; letter-spacing: -0.032em; } .case p { margin: 0; color: var(--text-2); font-size: 0.94rem; line-height: 1.6; } .case-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; } .case-kpis li { padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); } .case-kpis b { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.03em; background: linear-gradient(140deg, var(--text), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .case-kpis span { font-size: 0.74rem; color: var(--text-3); } /* --- Website-Referenz: Bildschirm- und Handy-Rahmen ----------- */ .web-referenz { display: grid; grid-template-columns: 1fr clamp(210px, 22vw, 280px); gap: clamp(18px, 2.4vw, 32px); align-items: start; } .mockup { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card-solid); box-shadow: var(--shadow-lg); } .mockup img { width: 100%; height: auto; display: block; } .mockup-leiste { display: flex; align-items: center; gap: 6px; padding: 11px 15px; border-bottom: 1px solid var(--line-soft); background: var(--card); } .mockup-leiste span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); } .mockup--mobil { border-radius: 28px; padding: 9px; background: var(--card); } .mockup--mobil img { border-radius: 20px; } .mockup-leer { padding: 56px 20px; text-align: center; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--text-3); } /* Vier Kurzargumente unter den Screenshots — als schmale Datenleiste ohne Kästen und ohne Symbole, getrennt durch dünne Striche. */ .web-vorteile { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(22px, 2.8vw, 32px) 0 0; padding: clamp(20px, 2.4vw, 26px) 0 0; border-top: 1px solid var(--line-soft); list-style: none; } .web-vorteile li { padding: 0 clamp(12px, 1.6vw, 22px); border-left: 1px solid var(--line-soft); } .web-vorteile li:first-child { border-left: 0; padding-left: 0; } .web-vorteile b { display: block; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.02em; } .web-vorteile span { display: block; margin-top: 3px; font-size: 0.76rem; color: var(--text-3); line-height: 1.45; } .client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .client-card { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card); color: inherit; font-family: inherit; text-align: left; cursor: pointer; transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .45s var(--ease-out); } .client-card:hover { border-color: var(--blue); background: var(--card-2); transform: translateY(-3px); } .client-card img { width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px; border: 1px solid var(--line); object-fit: cover; filter: saturate(.75) brightness(.88); transition: filter .45s var(--ease); } [data-theme="light"] .client-card img { filter: saturate(.9) brightness(1); } .client-card:hover img { filter: none; } .client-card > span { display: block; min-width: 0; } .client-card b { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.028em; } .client-card b + span { display: block; margin-top: 4px; font-size: 0.83rem; color: var(--text-3); } .note { margin-top: clamp(30px, 4vw, 44px); padding: 20px 24px; border-left: 2px solid var(--blue); background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-2); font-size: 0.95rem; line-height: 1.6; } /* --- 18. Rechtstexte (Impressum, Datenschutz) ------------------ */ /* Reine Lesetexte: schmale Spalte, ruhige Typografie, keine Effekte. */ .rechtstext { max-width: 74ch; } .rechtstext > * + * { margin-top: 18px; } .rechtstext h2 { font-size: clamp(1.28rem, 2.4vw, 1.62rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.25; margin-top: 54px; scroll-margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line-soft); } .rechtstext > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .rechtstext h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.012em; margin-top: 34px; color: var(--text); } .rechtstext p, .rechtstext li { color: var(--text-2); line-height: 1.72; } .rechtstext strong, .rechtstext b { color: var(--text); font-weight: 600; } .rechtstext ul { margin: 14px 0 0; padding-left: 21px; } .rechtstext ul ul { margin-top: 9px; } /* Cookie-Namen und ähnliche wörtliche Angaben abheben */ .rechtstext code { font-family: var(--mono); font-size: 0.88em; padding: 2px 6px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text); } .rechtstext ul li { margin-top: 9px; } .rechtstext ul li::marker { color: var(--text-3); } /* Anschrift und ähnliche Blöcke, in denen Zeilenumbrüche zählen */ .rechtstext .anschrift { font-style: normal; line-height: 1.75; color: var(--text-2); padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); } .rechtstext .anschrift b { display: block; margin-bottom: 4px; } /* Inhaltsübersicht der Datenschutzerklärung */ .inhalt-uebersicht { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 22px 24px; } .inhalt-uebersicht h2 { margin: 0 0 14px; padding: 0; border: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); } .inhalt-uebersicht ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 34px; } .inhalt-uebersicht li { margin: 0 0 9px; break-inside: avoid; } .inhalt-uebersicht a { color: var(--text-2); text-decoration: none; } .inhalt-uebersicht a:hover { color: var(--link); text-decoration: underline; } /* Die Zusammenfassungen am Ende der Abschnitte */ .merkmale { list-style: none; padding: 16px 18px; margin-top: 16px; border-left: 2px solid var(--line-strong); background: var(--bg-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .merkmale li { margin-top: 8px; font-size: 0.95rem; } .merkmale li:first-child { margin-top: 0; } .merkmale b { color: var(--text); } .stand { font-size: 0.88rem; color: var(--text-3); padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); display: inline-block; } .quellenhinweis { margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line-soft); font-size: 0.85rem; color: var(--text-3); line-height: 1.65; } .quellenhinweis a { color: var(--text-3); } @media (max-width: 720px) { .inhalt-uebersicht ol { columns: 1; } } /* Druckfassung der Rechtstexte: Impressum und Datenschutzerklärung werden ausgedruckt und abgeheftet — Deko, Umschalter und Fußbereich stören dabei. */ @media print { .page-head .hero-bg, .theme-fab, .theme-toggle, .footer, .crumb { display: none !important; } .page-head { padding: 0 0 18px; border-bottom: 1px solid #999; } .section { padding: 24px 0 0; } .wrap { max-width: none; padding: 0; } .rechtstext { max-width: none; } .rechtstext h2 { page-break-after: avoid; break-after: avoid; } .rechtstext h2, .rechtstext h3 { page-break-inside: avoid; break-inside: avoid; } .rechtstext p, .rechtstext li { orphans: 3; widows: 3; } .inhalt-uebersicht { page-break-after: always; break-after: page; } .anschrift, .merkmale { border-color: #999; background: none; } /* Adressen der Verweise mitdrucken, sonst sind sie auf Papier wertlos */ .rechtstext a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.82em; } } /* --- 19. Kontaktformular --------------------------------------- */ .kontakt-raster { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(34px, 5vw, 72px); align-items: start; } .formular { display: flex; flex-direction: column; gap: 18px; } .feld { display: flex; flex-direction: column; gap: 7px; } .feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .feld label { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); } .feld label .pflicht { color: var(--blue); } .feld input, .feld select, .feld textarea { font: inherit; width: 100%; padding: 13px 15px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease); } .feld textarea { min-height: 148px; resize: vertical; line-height: 1.6; } .feld select { appearance: none; padding-right: 42px; /* Eigener Pfeil, damit das Feld in beiden Designs gleich aussieht */ background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 20px center, right 15px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } .feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--line-strong); } .feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--glow-cta); } .feld input::placeholder, .feld textarea::placeholder { color: var(--text-3); } /* Falle für Formularroboter: für Menschen unsichtbar, für Skripte verlockend. Netlify verwirft jede Einsendung, in der dieses Feld ausgefüllt ist. */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formular-fuss { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; } .formular-fuss .btn { align-self: flex-start; } /* Die Zusage steht direkt unter dem Knopf — dort, wo der Zweifel entsteht. */ .antwortzeit { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--text-2); padding: 9px 15px; border-radius: 980px; border: 1px solid var(--line); background: var(--bg-2); } .antwortzeit b { color: var(--text); font-weight: 600; } .antwortzeit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; box-shadow: 0 0 0 3px var(--glow-cta); } .formular-hinweis { font-size: 0.86rem; color: var(--text-3); line-height: 1.6; } .formular-hinweis a { color: var(--text-2); } /* Rechte Spalte: der direkte Weg, für alle die kein Formular mögen */ .kontakt-direkt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 26px 26px 22px; } .kontakt-direkt h2 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; } .kontakt-direkt > p { color: var(--text-2); font-size: 0.94rem; margin: 0 0 20px; } .direkt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .direkt-liste li { border-top: 1px solid var(--line-soft); } .direkt-liste li:first-child { border-top: 0; } .direkt-liste a { display: flex; align-items: center; gap: 13px; padding: 14px 0; color: var(--text); transition: color .25s var(--ease); } .direkt-liste a:hover { color: var(--blue); } .direkt-liste svg { width: 18px; height: 18px; flex: none; color: var(--text-3); } .direkt-liste a:hover svg { color: var(--blue); } .direkt-liste b { display: block; font-weight: 500; letter-spacing: -0.015em; } .direkt-liste span { display: block; font-size: 0.82rem; color: var(--text-3); } /* Was nach dem Absenden passiert */ .ablauf-kurz { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: schritt; } .ablauf-kurz li { counter-increment: schritt; display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 11px 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.6; } .ablauf-kurz li::before { content: counter(schritt); font-family: var(--mono); font-size: 0.74rem; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text-3); } @media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } .feld-paar { grid-template-columns: 1fr; } } /* --- 20. Hinweisleiste ----------------------------------------- */ /* Bewusst KEIN Zustimmungsdialog mit Annehmen/Ablehnen: die Seite setzt keine Cookies und lädt nichts von fremden Servern, es gibt also nichts abzulehnen. Ein Dialog, der nur so tut, wäre irreführend. Die Leiste sagt, was gespeichert wird, und verschwindet auf Klick. Kommen später Analyse-Werkzeuge oder eingebettete Videos dazu, muss daraus ein echter Zustimmungsdialog werden — dann melden. */ .hinweisleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 0 var(--pad-x) clamp(12px, 2vw, 20px); animation: hinweisRein .5s var(--ease-out) both; } @keyframes hinweisRein { from { opacity: 0; transform: translateY(16px); } } .hinweis-inner { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); padding: 15px 18px 15px 22px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--sheet); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow-lg); } .hinweis-text { margin: 0; flex: 1 1 auto; font-size: 0.9rem; line-height: 1.55; color: var(--text-2); } .hinweis-text b { color: var(--text); font-weight: 600; } .hinweis-knoepfe { display: flex; align-items: center; gap: 9px; flex: none; } .hinweis-knoepfe .btn { padding: 10px 18px; font-size: 0.88rem; } @media (max-width: 760px) { .hinweis-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 17px 18px; } .hinweis-knoepfe { justify-content: stretch; } .hinweis-knoepfe .btn { flex: 1; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .hinweisleiste { animation: none; } } /* --- 21. Ladezustände ------------------------------------------ */ /* Bewusst KEIN Ladebildschirm über der ganzen Seite: die Seite ist 0,9 MB groß und steht in Sekundenbruchteilen. Ein Vorschalt-Bildschirm würde die wahrgenommene Wartezeit nur verlängern. Rückmeldung gibt es dort, wo tatsächlich gewartet wird. */ /* Der Ring dreht sich, solange das Formular unterwegs ist. */ .lade-ring { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ladeDreh .7s linear infinite; } @keyframes ladeDreh { to { transform: rotate(360deg); } } /* Knopf während des Absendens: nicht noch einmal klickbar, aber sichtbar in Arbeit. disabled wäre falsch — manche Browser senden dann nicht ab. */ .btn[data-laedt] { pointer-events: none; } .btn[data-laedt] .arr { display: none; } /* Bilder unterhalb des sichtbaren Bereichs blenden sanft ein, statt hart aufzuploppen, sobald sie geladen sind. */ img[data-blende] { opacity: 0; transition: opacity .55s var(--ease-out); } img[data-blende].ist-da { opacity: 1; } @media (prefers-reduced-motion: reduce) { .lade-ring { animation-duration: 2s; } img[data-blende] { opacity: 1; transition: none; } } /* --- 22. Bildstrecke ------------------------------------------- */ /* Ein großes Bild statt eines Rasters: nimmt weniger Höhe ein und lädt zum Durchklicken ein, statt zum Überfliegen. Unten eine Leiste mit Miniaturen zum direkten Anspringen. */ .strecke { margin-top: clamp(26px, 3.5vw, 40px); } .strecke-buehne { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 9; } .strecke-buehne img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; } /* Beim Wechsel kurz überblenden, damit der Sprung nicht hart wirkt */ .strecke-buehne img { transition: opacity .3s var(--ease); } .strecke-buehne.wechselt img { opacity: 0; } .strecke-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background-color .25s var(--ease), border-color .25s var(--ease); } .strecke-pfeil:hover { background: rgba(0,0,0,.72); border-color: rgba(255,255,255,.55); } .strecke-pfeil:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .strecke-pfeil svg { width: 18px; height: 18px; } .strecke-zurueck { left: 12px; } .strecke-vor { right: 12px; } /* Bildunterschrift liegt auf dem Bild, damit der Abschnitt flach bleibt */ .strecke-zeile { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 26px 16px 12px; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); color: #fff; pointer-events: none; } .strecke-wer { font-size: 0.88rem; font-weight: 500; letter-spacing: -0.01em; } .strecke-zaehler { font-family: var(--mono); font-size: 0.76rem; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; } /* Miniaturen */ .strecke-leiste { display: flex; gap: 8px; margin-top: 8px; list-style: none; padding: 0; overflow-x: auto; scrollbar-width: none; } .strecke-leiste::-webkit-scrollbar { display: none; } .strecke-leiste li { flex: 1 1 0; min-width: 74px; } .strecke-leiste button { display: block; width: 100%; padding: 0; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 10; opacity: .5; transition: opacity .3s var(--ease), border-color .3s var(--ease); } .strecke-leiste button:hover { opacity: .85; } .strecke-leiste button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .strecke-leiste button[aria-current="true"] { opacity: 1; border-color: var(--blue); } .strecke-leiste img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 620px) { .strecke-pfeil { width: 36px; height: 36px; } .strecke-zurueck { left: 8px; } .strecke-vor { right: 8px; } .strecke-leiste li { min-width: 60px; } } /* Großansicht (Vollbild) */ .lupe { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; } /* Genau wie beim Kundenfenster: nur mit [open] sichtbar. Eine bedingungslose display-Regel würde die Standardvorgabe des Browsers aushebeln und den leeren Rahmen stehen lassen. */ .lupe:not([open]) { display: none; } .lupe::backdrop { background: rgba(0, 0, 0, .86); backdrop-filter: blur(6px); } .lupe[open] { display: grid; place-items: center; width: 100vw; height: 100dvh; } .lupe-bild { max-width: min(96vw, 1400px); max-height: 88dvh; width: auto; height: auto; border-radius: var(--radius); display: block; } .lupe-zu { position: fixed; top: clamp(14px, 2vw, 24px); right: clamp(10px, 2vw, 26px); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; } .lupe-zu:hover { background: rgba(0,0,0,.75); } .lupe-zu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lupe-zu svg { width: 19px; height: 19px; } /* --- 17. Bewegung --------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: var(--d, 0ms); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } /* Parallaxe: app.js schreibt --py, die Elemente verschieben sich unterschiedlich schnell */ [data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); } .line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; } .line-mask > span { display: block; transform: translateY(105%); animation: lineUp 1.05s var(--ease-out) forwards; animation-delay: var(--d, 0ms); } @keyframes lineUp { to { transform: none; } } .fade-up { opacity: 0; animation: fadeUp .95s var(--ease-out) forwards; animation-delay: var(--d, 0ms); } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* --- Responsive ----------------------------------------------- */ @media (max-width: 1100px) { .reviews-wall { grid-template-columns: repeat(2, 1fr); } .review, .review--wide { grid-column: span 1; } .pakete--drei { grid-template-columns: repeat(2, 1fr); } .ablauf-raster { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px) { /* zweispaltig: der linke Strich muss in jeder Reihe wegfallen */ .web-vorteile { grid-template-columns: repeat(2, 1fr); row-gap: clamp(16px, 2vw, 22px); } .web-vorteile li:nth-child(odd) { border-left: 0; padding-left: 0; } } @media (max-width: 900px) { .zahlen-band { grid-template-columns: 1fr; } .web-referenz { grid-template-columns: 1fr; } .mockup--mobil { max-width: 300px; margin-inline: auto; } } @media (max-width: 560px) { /* einspaltig: senkrechte Striche raus, dafür waagerechte dazwischen */ .web-vorteile { grid-template-columns: 1fr; row-gap: 0; } .web-vorteile li { padding: 13px 0; border-left: 0; border-top: 1px solid var(--line-soft); } .web-vorteile li:first-child { border-top: 0; padding-top: 0; } } @media (max-width: 780px) { .pakete, .pakete--drei { grid-template-columns: 1fr; } .ablauf-raster { grid-template-columns: 1fr; } .cases { grid-template-columns: 1fr; } } @media (max-width: 680px) { .reviews-wall { grid-template-columns: 1fr; } } @media (max-width: 980px) { .nav-links { display: none; } .nav-cta { display: none; } .nav-toggle { display: flex; } .nav-tools { margin-left: auto; } .tiles { grid-template-columns: 1fr; } .about { grid-template-columns: 1fr; } .about--seite .about-visual { position: static; } .about-visual { max-width: 400px; } .why { grid-template-columns: 1fr; } .why-intro { position: static; } .stats-row { grid-template-columns: 1fr; } .faq-layout { grid-template-columns: 1fr; } .faq-aside { position: static; order: 2; } .pack, .case { grid-template-columns: 1fr; } .pack--flip .pack-visual { order: 0; } .footer-top { grid-template-columns: 1fr 1fr; } .footer-blurb { max-width: none; } } @media (max-width: 640px) { body { font-size: 16px; } .hero { min-height: auto; padding-top: 124px; } .hero-actions .btn { width: 100%; } .scroll-cue { display: none; } .stats { gap: 30px; } .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } .case-kpis li { flex: 1 1 130px; } /* Kein eigener Rand hier — das Menü soll exakt unter der Navigationspille sitzen, also denselben --pad-x behalten. */ } /* --- Reduzierte Bewegung -------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } [data-parallax] { transform: none !important; } .line-mask > span { transform: none; } .fade-up { opacity: 1; } .marquee-track { animation: none; } }