/* Tokens: design-tokens.css wird im geladen (theme-assets). */ /* Funnel-Namen auf Theme-Tokens. Dark/Light kommt aus design-tokens.css. */ :root { --text: var(--ink); --muted: var(--ink-2); --primary: var(--brand-deep); --primary-strong: var(--brand-deep); --primary-dark: var(--deep); --border: var(--line); --surface-soft: var(--surface-2); --shadow-sm: var(--shade); --shadow: var(--shade); --shadow-lg: var(--shade-lg); --radius: var(--r); --radius-lg: var(--r-lg); --r-pill: var(--r); --success: var(--ok); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-underline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(243, 155, 74, 0.35); outline-offset: 2px; } .container { width: min(1160px, 92vw); margin: 0 auto; } .section { padding: 6rem 0; } .section-white { background: var(--surface); } .section-soft { background: var(--surface-soft); } .section-dark { background: linear-gradient(135deg, var(--primary-strong) 0%, var(--primary-dark) 100%); color: #fff; } /* Video */ .video-frame { max-width: 960px; margin: 0 auto; } .video-embed { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--primary-dark); } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .video-embed iframe[hidden] { display: none !important; } .video-embed .video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .video-embed .video__poster[hidden] { display: none !important; } .video-embed .video-consent { position: absolute; inset: 0; display: grid; place-content: center; gap: 1rem; padding: 1.5rem; text-align: center; background: var(--primary-dark); color: #fff; z-index: 2; } .video-embed:has(.video__poster) .video-consent { background: color-mix(in srgb, var(--primary-dark) 52%, transparent); } .video-embed .video-consent[hidden] { display: none !important; } .video-embed .video-consent p { margin: 0 auto; max-width: 44ch; font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); } .video-embed .video-consent a { color: inherit; text-decoration: underline; } .video-frame--feature { max-width: min(56rem, 100%); margin: 0 auto 2rem; } .video-frame__kicker { margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 700; color: var(--accent); } /* Buttons — gleiche Sprache wie das Theme, kein Orangeschatten */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; border: 2px solid transparent; border-radius: var(--r-pill); padding: 1.05rem 1.9rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.15; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; font-family: inherit; transition: background 0.16s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.16s cubic-bezier(0.22, 1, 0.36, 1), color 0.16s cubic-bezier(0.22, 1, 0.36, 1), transform 0.09s cubic-bezier(0.4, 0, 0.2, 1); } .btn:hover { transform: none; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: none; } .btn-primary:hover { background: var(--accent-hover); box-shadow: none; } .btn-sm { padding: 0.65rem 1.2rem; font-size: 0.9375rem; white-space: nowrap; } .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.22); } .btn-ghost-light:hover { background: rgba(255, 255, 255, 0.09); border-color: #fff; } .btn-ghost { background: var(--surface); color: var(--primary-strong); border-color: var(--border); } .btn-ghost:hover { background: var(--bg); border-color: #9db8d9; } .btn-full { width: 100%; } .btn-large { padding: 1.1rem 2rem; font-size: 1.1rem; } /* Header */ .site-header { position: sticky; top: 0; z-index: 200; background: var(--bg); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; } .brand { display: inline-flex; align-items: center; line-height: 0; } .brand img { height: 46px; width: auto; } /* Spezifität muss .brand img schlagen — sonst bleiben hell + dunkel gleichzeitig sichtbar. */ .brand .brand-hell { display: block; } .brand .brand-dunkel { display: none; } :root[data-theme="dark"] .brand .brand-dunkel { display: block; } :root[data-theme="dark"] .brand .brand-hell { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .brand-dunkel { display: block; } :root:not([data-theme="light"]) .brand .brand-hell { display: none; } } .nav-menu { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex: 1; min-width: 0; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 100ms ease; } .theme-toggle:hover { border-color: var(--primary); background: var(--surface-soft); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle svg { width: 1.1rem; height: 1.1rem; } .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } } .toplinks { display: none; gap: 1.15rem; align-items: center; } .toplinks a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.9rem; transition: color 160ms ease; white-space: nowrap; } .toplinks a:hover, .toplinks a[aria-current="page"] { color: var(--primary-strong); } .nav-phone { font-weight: 800; color: var(--ink); } .site-header--compact .nav-menu { flex: 0 1 auto; gap: 0.75rem; } .site-header--compact .nav-phone { font-weight: 700; text-decoration: none; font-size: 0.9rem; white-space: nowrap; } @media (max-width: 640px) { .site-header--compact .nav-phone { display: none; } } .nav-drop { position: relative; } .nav-drop__toggle { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--muted); cursor: pointer; } .nav-drop__toggle svg { width: 0.75rem; height: 0.75rem; } .nav-drop__panel { position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translateX(-50%); min-width: 280px; padding: 0.5rem; background: var(--surface); border-radius: 12px; box-shadow: 0 16px 40px rgba(18, 48, 63, 0.16); z-index: 320; max-height: calc(100svh - var(--header-h, 5.6rem) - 1.25rem); overflow-y: auto; overscroll-behavior: contain; } .nav-drop--end .nav-drop__panel { left: auto; right: 0; transform: none; } .nav-drop__panel[hidden] { display: none; } .nav-drop__panel a { display: grid; gap: 0.15rem; padding: 0.7rem 0.85rem; border-radius: 8px; white-space: normal; } .nav-drop__panel a:hover { background: var(--surface-2, #f3f0ea); } .nav-drop__panel span { font-size: 0.8rem; font-weight: 500; color: var(--muted); } .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; } .nav-burger span { display: block; width: 16px; height: 2px; margin-inline: auto; background: var(--ink); transition: transform 160ms ease, opacity 160ms ease; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1099px) { /* Wie auf der Hauptseite: der Kopf-CTA weicht der festen Leiste. Sonst schiebt der lange Knopf Logo, Burger und Theme-Toggle ineinander. */ .site-header .btn-sm { display: none; } .nav { gap: 0.65rem; min-width: 0; } .nav-menu { flex: 0 0 auto; } .brand { min-width: 0; overflow: hidden; } .brand img { height: 36px; max-width: 100%; object-fit: contain; object-position: left center; } .toplinks[data-offen] { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; padding: 1rem 1.25rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); gap: 0.35rem; z-index: 35; max-height: calc(100svh - var(--header-h, 5.6rem)); overflow-y: auto; overscroll-behavior: contain; } .toplinks[data-offen] > a, .toplinks[data-offen] .nav-drop__toggle { padding-block: 0.55rem; font-size: 1rem; } .toplinks[data-offen] .nav-drop { width: 100%; } .toplinks[data-offen] .nav-drop__toggle { width: 100%; justify-content: space-between; } .toplinks[data-offen] .nav-drop__panel { position: static; transform: none; min-width: 0; box-shadow: none; background: var(--surface-2, #f3f0ea); max-height: none; overflow: visible; } body.nav-open { overflow: hidden; } } @media (max-width: 380px) { .nav { gap: 0.45rem; min-height: 64px; } .nav-menu { gap: 0.4rem; } .brand img { height: 30px; } } .hv-split { display: grid; gap: 2rem; align-items: center; } @media (min-width: 880px) { .hv-split { grid-template-columns: 0.95fr 1.05fr; } } .hv-split__media { margin: 0; } .hv-split__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; min-height: 16rem; } .hv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; } .hv-list li { padding-top: 1.1rem; border-top: 1px solid var(--border); } .hv-list li:first-child { padding-top: 0; border-top: 0; } .hv-list h3 { margin-bottom: 0.35rem; font-size: 1.15rem; } .hv-list p { margin: 0; color: var(--muted); } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .ticks li { padding-left: 1.6rem; position: relative; color: var(--muted); } .ticks li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--accent); } .ticks strong { color: var(--ink); } .why-summary--flush { margin-top: 0; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; } .hv-editorial { display: grid; gap: 1.75rem 2.5rem; } @media (min-width: 800px) { .hv-editorial { grid-template-columns: 1fr 1fr; } } .hv-editorial h3 { margin-bottom: 0.4rem; } .hv-editorial p { margin: 0; color: var(--muted); } .hv-defs { display: grid; gap: 1.5rem 2.5rem; margin: 0; } @media (min-width: 800px) { .hv-defs { grid-template-columns: 1fr 1fr; } } .hv-defs dt { font-weight: 800; font-size: 1.1rem; margin-bottom: 0.35rem; } .hv-defs dd { margin: 0; color: var(--muted); } .hv-rows { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0; } .hv-rows li { display: grid; gap: 0.35rem; padding: 1.25rem 0; border-top: 1px solid var(--border); } .hv-rows li:last-child { border-bottom: 1px solid var(--border); } .hv-rows h3 { margin: 0; } .hv-rows p { margin: 0; color: var(--muted); } /* Typography */ h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1rem; } h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); } h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); } h3 { font-size: 1.2rem; font-weight: 700; } p { margin: 0 0 1rem; } .eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; margin: 0 0 0.8rem; } .section-head { max-width: 720px; margin-bottom: 3rem; } .section-head h2 { margin-bottom: 0.8rem; } .section-intro { color: var(--muted); font-size: 1.15rem; line-height: 1.65; } .section-dark .section-intro, .section-dark .eyebrow { color: rgba(255, 255, 255, 0.85); } .section-dark .eyebrow { color: var(--accent); } /* Hero */ .hero-photo { margin: 0 0 1.5rem; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 18px 40px rgba(8, 24, 40, 0.22); } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .hero { position: relative; padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 6rem; background: linear-gradient(135deg, var(--primary-strong) 0%, var(--primary) 50%, var(--primary-dark) 100%); color: #fff; overflow: hidden; } .hero--cinematic { min-height: clamp(32rem, 88vh, 44rem); display: flex; align-items: center; padding-block: clamp(7rem, 14vh, 9rem) clamp(4rem, 8vh, 6rem); background: var(--primary-dark); } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .hero__bg-overlay { position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(8, 24, 40, 0.88) 0%, rgba(8, 24, 40, 0.72) 42%, rgba(8, 24, 40, 0.45) 100% ); } .hero--cinematic .hero-glow { z-index: 1; opacity: 0.65; } .hero-copy--glass { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 48px rgba(8, 24, 40, 0.28); } .hero--cinematic h1 { max-width: 18ch; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; } .hero-glow { position: absolute; top: -20%; right: -10%; width: 60%; height: 80%; background: radial-gradient(ellipse, rgba(243, 155, 74, 0.18) 0%, transparent 60%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.92); padding: 0.5rem 0.9rem; border-radius: var(--r); font-weight: 600; margin-bottom: 1.4rem; backdrop-filter: blur(8px); } .badge-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.2); } } .hero h1 { margin-bottom: 1.2rem; max-width: 16ch; } .hero .lead { font-size: 1.2rem; color: rgba(255, 255, 255, 0.82); line-height: 1.65; max-width: 54ch; margin-bottom: 1.8rem; } .hero-checks { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.85rem; } .hero-checks li { display: flex; align-items: center; gap: 0.75rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; } .check-icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(243, 155, 74, 0.2); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; } .check-icon svg { width: 14px; height: 14px; fill: currentColor; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* Funnel */ .funnel-wrap { background: var(--surface); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-lg); color: var(--text); } .funnel-header { margin-bottom: 1.2rem; } .funnel-eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; margin: 0 0 0.5rem; } .funnel-title { color: var(--primary-strong); font-size: 1.35rem; font-weight: 800; margin: 0; } .funnel { display: grid; gap: 1rem; } .funnel-progress { height: 6px; background: rgba(22, 59, 102, 0.08); border-radius: 999px; overflow: hidden; margin-bottom: 0.5rem; } .funnel-progress-bar { height: 100%; width: 50%; background: var(--accent); border-radius: 999px; transition: width 300ms ease; } .funnel-step { display: grid; gap: 0.85rem; } .funnel-subtitle { margin: 0 0 0.2rem; color: var(--muted); font-size: 0.95rem; } .funnel-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .funnel-option { display: flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .funnel-option:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .funnel-option.is-selected, .funnel-option:has(input:checked) { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 1px var(--accent); } .funnel-option input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .option-label { font-weight: 700; color: var(--text); font-size: 0.95rem; } .funnel-trust { display: flex; flex-wrap: wrap; gap: 0.75rem 1.2rem; margin: 0.25rem 0; } .funnel-trust span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; } .funnel-trust svg { width: 16px; height: 16px; fill: var(--success); flex-shrink: 0; } .funnel input[type="text"], .funnel input[type="email"], .funnel input[type="tel"], .funnel select, .funnel textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1rem; font: inherit; color: var(--text); background: var(--surface); transition: border-color 160ms ease, box-shadow 160ms ease; } .funnel select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f768f' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .funnel-field-label { display: block; margin: 0.85rem 0 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--text); } .funnel-field-label:first-of-type { margin-top: 0; } .funnel input:focus, .funnel select:focus, .funnel textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243, 155, 74, 0.15); } .funnel textarea { resize: vertical; min-height: 80px; } .consent-checkbox { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.82rem; color: var(--muted); line-height: 1.5; cursor: pointer; } .consent-checkbox input { width: 2.75rem; height: 2.75rem; margin-top: 0; accent-color: var(--accent); flex-shrink: 0; } .consent-checkbox a { color: var(--primary); font-weight: 600; } .funnel-actions { display: flex; gap: 0.75rem; margin-top: 0.25rem; } .funnel-actions .btn { flex: 1 1 auto; } .funnel-success { text-align: center; padding: 1.5rem 0.5rem; } .success-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(31, 138, 77, 0.1); color: var(--success); display: grid; place-items: center; margin: 0 auto 1rem; } .success-icon svg { width: 32px; height: 32px; fill: currentColor; } .funnel-success .funnel-title { color: var(--success); } .form-status { min-height: 1.25rem; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 500; } .form-status.ok { color: var(--success); } .form-status.err { color: var(--danger); } .hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; } /* Pain Cards */ .pain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .pain-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); transition: transform 160ms ease, box-shadow 160ms ease; } .pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .pain-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--accent-light); color: var(--accent); display: grid; place-items: center; margin-bottom: 1.25rem; } .pain-icon svg { width: 28px; height: 28px; fill: currentColor; } .pain-card h3 { color: var(--primary-strong); margin-bottom: 0.6rem; } .pain-card p { color: var(--muted); margin: 0; font-size: 0.98rem; line-height: 1.6; } /* Process */ .process { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1.5rem; align-items: start; } .process-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; box-shadow: var(--shadow-sm); position: relative; transition: transform 160ms ease, box-shadow 160ms ease; } .process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .process-number { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 0.8rem; padding: 0.35rem 0.9rem; border-radius: var(--r); box-shadow: none; } .process-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: grid; place-items: center; margin: 0.5rem auto 1.25rem; } .process-icon svg { width: 28px; height: 28px; fill: currentColor; } .process-step h3 { color: var(--primary-strong); margin-bottom: 0.6rem; } .process-step p { color: var(--muted); font-size: 0.95rem; margin-bottom: 1rem; } .process-tag { display: inline-block; background: var(--surface-soft); color: var(--ink); font-size: 0.78rem; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: var(--r); border: 1px solid var(--line); } .process-line { width: 2px; height: 100%; min-height: 60px; background: linear-gradient(to bottom, var(--accent), rgba(243, 155, 74, 0.2)); margin-top: 3rem; border-radius: 2px; } /* Benefits */ .benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .benefit-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(243, 155, 74, 0.4); } .benefit-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--primary-strong); color: #fff; display: grid; place-items: center; margin-bottom: 1.25rem; } .benefit-icon svg { width: 28px; height: 28px; fill: currentColor; } .benefit-card h3 { color: var(--primary-strong); margin-bottom: 0.6rem; } .benefit-card p { color: var(--muted); margin: 0; font-size: 0.95rem; line-height: 1.6; } /* Highlight Banner */ .highlight-banner { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem 2.5rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--primary-strong) 0%, var(--primary-dark) 100%); color: #fff; box-shadow: var(--shadow); } .highlight-banner-content { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 500px; } .highlight-banner-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; } .highlight-banner-icon svg { width: 32px; height: 32px; fill: currentColor; } .highlight-banner-text { flex: 1 1 auto; } .highlight-banner-title { font-size: 1.25rem; font-weight: 800; color: #fff; margin: 0 0 0.3rem; } .highlight-banner-subtitle { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); margin: 0; line-height: 1.5; } .highlight-banner .btn { flex-shrink: 0; background: var(--accent); border-color: var(--accent); color: #fff; } .highlight-banner .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* Warum EBS (restored from working tree) */ .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem 1.75rem 1.6rem; box-shadow: var(--shadow-sm); } .why-card__num { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.65rem; } .why-card h3 { color: var(--primary-strong); margin: 0 0 0.55rem; font-size: 1.15rem; } .why-card p { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.6; } .why-summary { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.35rem 1.5rem; border-radius: var(--radius); background: var(--primary-dark); color: #fff; } .why-summary p { margin: 0; max-width: 52ch; line-height: 1.55; } .why-summary strong { color: var(--accent); } @media (max-width: 768px) { .why-grid { grid-template-columns: 1fr; } .why-summary { flex-direction: column; align-items: flex-start; } } /* Trust */ .trust { text-align: center; } .trust-eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; margin: 0 0 0.8rem; } .trust h2 { margin-bottom: 3rem; } .trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .trust-item { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 2rem 1rem; display: grid; gap: 0.5rem; } .trust-number { font-size: 2.5rem; font-weight: 900; color: var(--accent); line-height: 1; } .trust-label { font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); font-weight: 600; } .trust-bottom { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); font-weight: 600; margin: 0; } /* Final CTA — gleiches Muster wie Theme section--cta */ .section-testimonial { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--surface-soft); } .hv-voice { max-width: 42rem; margin-inline: auto; padding: clamp(1.75rem, 4vw, 2.5rem); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .hv-voice__stars { display: flex; justify-content: center; gap: 0.1rem; margin-bottom: 1rem; color: #d99321; } .hv-voice__stars svg { width: 1.05rem; height: 1.05rem; } .hv-voice h2 { margin: 0.5rem 0 1.25rem; font-size: clamp(1.35rem, 2.5vw, 1.75rem); } .hv-voice__quote { margin: 0; font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.55; font-weight: 600; color: var(--text); } .hv-voice__cite { margin: 1.25rem 0 0; font-size: 0.95rem; color: var(--muted); } .section-final-cta { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--surface-soft); } .subpage-cta { padding: clamp(2.5rem, 6vw, 4rem); border-radius: var(--radius-lg); background: var(--primary-dark); color: #f2f3f1; text-align: center; width: 100%; } .subpage-cta h2 { margin: 0 0 1rem; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); } .subpage-cta p { margin: 0 auto 1.5rem; max-width: 42rem; color: rgba(242, 243, 241, 0.82); line-height: 1.55; } .subpage-cta__meta { margin: 1.25rem 0 0; font-size: 0.9rem; color: rgba(242, 243, 241, 0.65); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .btn-ghost { border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #f2f3f1; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); } /* Legacy final-cta (entfernt aus Markup, Styles bleiben für Abwärtskompatibilität) */ .final-cta { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 3rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow); } .final-cta-copy h2 { margin-bottom: 0.8rem; } .final-cta-actions { display: grid; gap: 0.75rem; justify-items: start; } .final-cta-hint { color: var(--muted); font-size: 0.9rem; margin: 0; } .contact-meta { margin-top: 1.5rem; display: grid; gap: 0.5rem; } .meta-line { display: flex; gap: 0.8rem; align-items: baseline; color: var(--muted); } .meta-label { display: inline-block; min-width: 70px; font-weight: 800; color: var(--primary-strong); } /* Footer */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 1.6rem 0; } .footer-grid { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; align-items: center; justify-content: space-between; } .footer-grid p { margin: 0; color: var(--muted); font-size: 0.95rem; } .footer-grid a { color: var(--primary); text-decoration: none; font-weight: 600; } .footer-links { display: inline-flex; gap: 0.9rem; } .footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; } .footer-social__link { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--border); border-radius: 6px; color: var(--ink); background: var(--surface); } .footer-social__link:hover, .footer-social__link:focus-visible { color: var(--on-accent, #0d1c24); background: var(--accent); border-color: var(--accent); } .footer-social__link svg { display: block; width: 1.1rem; height: 1.1rem; fill: currentColor; } .footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; } .employer-seal { display: inline-block; line-height: 0; flex-shrink: 0; } .employer-seal img { display: block; width: 6.5rem; height: auto; } .footer-google { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 2.6rem; padding: 0.5rem 0.85rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 400; } .footer-google:hover, .footer-google:focus-visible { border-color: var(--accent); } .footer-google__copy { display: grid; gap: 0.1rem; } .footer-google__copy strong { font-size: 0.82rem; font-weight: 700; } .footer-google__copy span { font-size: 0.72rem; color: var(--muted); font-weight: 400; } /* Cookie Banner */ .btn-outline { background: transparent; color: var(--primary-strong); border-color: var(--border); } .btn-outline:hover { background: var(--surface-soft); } /* Sticky CTA */ .sticky-cta { position: fixed; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; z-index: 35; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.2rem; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 28px rgba(243, 155, 74, 0.35); transition: background 160ms ease, transform 160ms ease; } .sticky-cta:hover { background: #e88b3d; transform: translateY(-2px); } .sticky-cta svg { width: 18px; height: 18px; fill: currentColor; } /* Bottom Funnel */ .funnel-wide { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow); } .funnel-wide .funnel { gap: 1rem; } .funnel-wide .funnel-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } .funnel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } .funnel-row input, .funnel-row textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1rem; font: inherit; color: var(--text); background: var(--surface); transition: border-color 160ms ease, box-shadow 160ms ease; } .funnel-row input:focus, .funnel-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243, 155, 74, 0.15); } .funnel-actions-wide { display: flex; gap: 0.75rem; margin-top: 0.25rem; } .funnel-actions-wide .btn { flex: 1 1 auto; } .funnel-wide .consent-checkbox { margin-top: 0.25rem; } /* Bottom Bar */ .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(10, 28, 54, 0.14); transition: transform 300ms ease; } .bottom-bar[hidden] { display: none !important; } /* Platz, solange die Leiste sichtbar ist — Footer und Siegel nicht überdecken. */ body.has-bottom-bar { padding-bottom: 5.75rem; } .bottom-bar-inner { max-width: 1160px; margin: 0 auto; padding: 1rem 1.2rem; } .bottom-bar-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .bottom-bar-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; } .bottom-bar-text strong { color: var(--primary-strong); font-weight: 800; font-size: 1.05rem; } .bottom-bar-text span { color: var(--muted); font-size: 0.95rem; } .bottom-bar-form { position: relative; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 400ms ease, padding 400ms ease, opacity 400ms ease, visibility 400ms ease; padding-top: 0; } .bottom-bar-form.is-open { max-height: 600px; padding-top: 1.5rem; opacity: 1; visibility: visible; } .bottom-bar-form .funnel { display: grid; gap: 0.85rem; } .bottom-bar-form .funnel-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bottom-bar-form .funnel-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bottom-bar-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 1rem; font: inherit; color: var(--text); background: var(--surface); resize: vertical; min-height: 60px; } .bottom-bar-form input:focus, .bottom-bar-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243, 155, 74, 0.15); } .bottom-bar-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: background 160ms ease, color 160ms ease; } .bottom-bar-close:hover { background: var(--surface-soft); color: var(--text); } .bottom-bar-close svg { width: 20px; height: 20px; fill: currentColor; } .bottom-bar-form .funnel-success { padding: 1rem 0.5rem; } /* Utilities */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms cubic-bezier(.2, .8, .2, 1), transform 700ms cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn:hover { transform: none; } .hero--cinematic .hero__bg img, .funnel-wrap, .hero__bill, .funnel-step.is-entering, .funnel-success.is-entering { animation: none; opacity: 1; transform: none; filter: none; } } /* Responsive */ @media (max-width: 980px) { body { padding-bottom: 5rem; } .hero-grid, .final-cta { grid-template-columns: 1fr; } .pain-grid, .benefits-grid, .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process { grid-template-columns: 1fr; } .process-line { display: none; } .hero { padding-top: clamp(2.5rem, 5vw, 3.5rem); } .hero h1 { max-width: none; } .toplinks:not([data-offen]) { display: none; } .section { padding: 4rem 0; } .sticky-cta { display: inline-flex; padding-right: 4rem; } .funnel-wide .funnel-options, .bottom-bar-form .funnel-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .funnel-row, .bottom-bar-form .funnel-row { grid-template-columns: 1fr; } .bottom-bar-summary { flex-direction: column; align-items: flex-start; } .bottom-bar-summary .btn { width: 100%; } .bottom-bar { display: none; } .highlight-banner { flex-direction: column; align-items: flex-start; justify-content: flex-start; } .highlight-banner-content { flex-direction: column; align-items: flex-start; flex: 1 1 auto; } .highlight-banner .btn { width: 100%; } } @media (max-width: 680px) { .section { padding: 3.2rem 0; } .hero { padding-top: 2.5rem; padding-bottom: 4rem; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } .funnel-wrap { padding: 1.5rem; } .funnel-options { grid-template-columns: 1fr; } .funnel-actions { flex-direction: column; } .funnel-actions .btn { width: 100%; } .pain-grid, .benefits-grid { grid-template-columns: 1fr; } .process-step, .pain-card, .benefit-card { padding: 1.5rem; } .highlight-banner { padding: 1.5rem; } .highlight-banner-icon { width: 52px; height: 52px; } .highlight-banner-icon svg { width: 26px; height: 26px; } .highlight-banner-title { font-size: 1.1rem; } .final-cta { padding: 1.5rem; } .final-cta-actions .btn { width: 100%; } .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-number { font-size: 2rem; } .funnel-wide { padding: 1.5rem; } .funnel-wide .funnel-options, .bottom-bar-form .funnel-options { grid-template-columns: 1fr; } .bottom-bar-text strong { font-size: 1rem; } .bottom-bar-text span { font-size: 0.85rem; } .footer-grid { flex-direction: column; align-items: flex-start; gap: 0.6rem; } } @media (min-width: 1100px) { .toplinks { display: inline-flex; } .nav-burger { display: none; } .sticky-cta { display: none; } .bottom-bar { display: block; } } /* On-brand with main theme */ h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; } .hero-glow, .badge-pulse { display: none; } .skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus { position:fixed; left:1rem; top:1rem; width:auto; height:auto; z-index:10000; padding:0.75rem 1rem; background:#fff; color:#12303f; } @media (prefers-reduced-motion: no-preference) { @keyframes scene-settle { from { transform: scale(1.07); filter: saturate(0.88); } to { transform: scale(1); filter: none; } } @keyframes paper-down { from { opacity: 0; transform: translate3d(0, -14px, 0) rotate(-2.4deg); } to { opacity: 1; transform: none; } } @keyframes panel-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .hero--cinematic .hero__bg img { animation: scene-settle 1.05s cubic-bezier(0.22, 1, 0.36, 1) both; } .funnel-wrap { transform-origin: 50% 0; animation: paper-down 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; } .hero__bill { transform-origin: 12% 0; animation: paper-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; } .funnel-step.is-entering, .funnel-success.is-entering { animation: step-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; } @media (min-width: 1100px) { .nav-drop__panel:not([hidden]) { animation: panel-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); } } } /* ============================================================ Rhythmus — Video-Split, Editorial-Lead, Ablauf-Liste, Zitat. Kickers bleiben im Markup, sind visuell aus. ============================================================ */ .eyebrow, .trust-eyebrow { display: none; } .section-video { background: var(--primary-dark); color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem); } .section-video .section-head h2 { color: #fff; } .section-video .section-intro { color: rgba(255, 255, 255, 0.78); } .section-video .video-frame { max-width: none; margin: 0; } @media (min-width: 960px) { .section-video .container { display: grid; grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .section-video .section-head { margin-bottom: 0; max-width: none; } } @media (min-width: 800px) { .hv-editorial--lead { grid-template-columns: 1fr 1fr 1fr; } .hv-editorial--lead article:first-child { grid-column: 1 / -1; padding-bottom: 1.75rem; border-bottom: 1px solid var(--border); } .hv-editorial--lead article:first-child h3 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); max-width: 16ch; line-height: 1.15; } .hv-editorial--lead article:first-child p { max-width: 52ch; font-size: 1.05rem; } } .process.process--ledger { grid-template-columns: 1fr; gap: 0; max-width: 44rem; } .process--ledger .process-line { display: none; } .process--ledger .process-step { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); grid-template-areas: "num title" "num body" "num tag"; column-gap: 1.5rem; row-gap: 0.35rem; text-align: left; padding: 1.5rem 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; } .process--ledger .process-step:hover { transform: none; box-shadow: none; } .process--ledger .process-number { grid-area: num; position: static; transform: none; background: none; color: var(--accent); box-shadow: none; padding: 0; font-size: 1.35rem; border-radius: 0; } .process--ledger .process-icon { display: none; } .process--ledger .process-step h3 { grid-area: title; margin: 0; } .process--ledger .process-step p { grid-area: body; margin: 0; } .process--ledger .process-tag { grid-area: tag; width: fit-content; background: none; padding: 0; border-radius: 0; font-size: 0.82rem; color: var(--muted); } @media (min-width: 800px) { .hv-defs--lead > div:first-child { grid-column: 1 / -1; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .hv-defs--lead > div:first-child dt { font-size: clamp(1.45rem, 2.4vw, 2rem); max-width: 16ch; } } .section-testimonial { background: var(--primary-dark); color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem); } .section-testimonial .hv-voice { max-width: 42rem; margin-inline: 0; padding: 0; text-align: left; background: none; border: 0; box-shadow: none; } .section-testimonial .hv-voice h2 { color: #fff; } .section-testimonial .hv-voice__quote { font-size: clamp(1.35rem, 2.8vw, 2.05rem); line-height: 1.25; max-width: 18ch; color: #fff; } .section-testimonial .hv-voice__cite { color: rgba(255, 255, 255, 0.72); } .section-testimonial .hv-voice__stars { justify-content: flex-start; } .hv-voice-rail { display: grid; gap: 1.5rem 2rem; margin-top: 2.25rem; } @media (min-width: 800px) { .hv-voice-rail { grid-template-columns: 1fr 1fr; } } .section-testimonial .hv-voice--mini { margin: 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.18); max-width: none; } .section-testimonial .hv-voice--mini .hv-voice__quote { font-size: 1.05rem; line-height: 1.45; max-width: 32ch; } .hv-voice-grid { display: grid; gap: 1.25rem; } @media (min-width: 860px) { .hv-voice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .hv-voice-grid .hv-voice { margin: 0; max-width: none; text-align: left; } .hv-voice-grid .hv-voice__stars { justify-content: flex-start; } .hv-voice-grid .hv-voice__quote { font-size: 1.05rem; max-width: none; } .go { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--accent); text-decoration: none; } .go::after { content: "→"; transition: transform 160ms ease; } .go:hover::after { transform: translateX(5px); } .case-file { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .case-file__who { margin: 0 0 0.75rem; font-size: 0.92rem; font-weight: 800; color: var(--accent); } .case-file h2 { margin: 0; max-width: 16ch; } .case-file dl { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; } @media (min-width: 760px) { .case-file dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } } .case-file dt { margin: 0 0 0.4rem; font-size: 0.92rem; font-weight: 800; } .case-file dd { margin: 0; font-size: 0.95rem; color: var(--muted); line-height: 1.5; } .case-file .go { margin-top: 1.5rem; } .hv-list--num { counter-reset: hv; } .hv-list--num li { position: relative; padding-left: 3.1rem; } .hv-list--num li::before { counter-increment: hv; content: counter(hv, decimal-leading-zero); position: absolute; left: 0; top: 1.1rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .hv-list--num li:first-child::before { top: 0; } .hv-rows--num { counter-reset: hvrow; margin-bottom: 0; } .hv-rows--num li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "num title" "num body"; column-gap: 1rem; row-gap: 0.35rem; align-items: start; } .hv-rows--num li::before { grid-area: num; counter-increment: hvrow; content: counter(hvrow, decimal-leading-zero); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; padding-top: 0.15rem; } .hv-rows--num li h3 { grid-area: title; } .hv-rows--num li p { grid-area: body; } .mark { width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: var(--accent); } .hv-editorial h3, .hv-defs dt { display: flex; align-items: flex-start; gap: 0.6rem; } .hv-editorial .mark, .hv-defs .mark { margin-top: 0.18rem; } .hv-editorial__feature { display: grid; gap: 1.25rem; } @media (min-width: 800px) { .hv-editorial__feature { grid-template-columns: 0.9fr 1.1fr; gap: 2rem; align-items: center; } } .hv-editorial__feature img { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 16 / 11; } .hv-editorial__feature h3 { display: block; } .ticks--tight { gap: 0.35rem; margin: 0; } .ticks--tight li { font-size: 0.95rem; } @media (min-width: 960px) { .process-split { display: grid; grid-template-columns: 1fr 0.9fr; gap: 3rem; align-items: start; } .process-split .process { max-width: none; } } .process-split__media { margin: 0; } .process-split__media img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; aspect-ratio: 16 / 11; } @media (min-width: 960px) { .process-split__media img { aspect-ratio: 4 / 5; } } /* Foto-Bühne, Milchglas, Ghost-Kopf — gleiche Grammatik wie die Site. */ .site-header { transition: background 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease; } .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; } .site-header:not(.is-scrolled) .brand .brand-hell { display: none; } .site-header:not(.is-scrolled) .brand .brand-dunkel { display: block; } .site-header:not(.is-scrolled) .toplinks > a, .site-header:not(.is-scrolled) .nav-drop__toggle, .site-header:not(.is-scrolled) .nav-phone { color: #fff; } .site-header:not(.is-scrolled) .theme-toggle, .site-header:not(.is-scrolled) .nav-burger { color: #fff; border-color: color-mix(in srgb, #fff 42%, transparent); background: color-mix(in srgb, var(--deep) 28%, transparent); } .site-header:not(.is-scrolled) .nav-burger span { background: #fff; } body.nav-open .site-header { background: var(--bg); border-bottom-color: var(--border); } body.nav-open .site-header .brand .brand-hell { display: block; } body.nav-open .site-header .brand .brand-dunkel { display: none; } :root[data-theme="dark"] body.nav-open .site-header .brand .brand-hell { display: none; } :root[data-theme="dark"] body.nav-open .site-header .brand .brand-dunkel { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.nav-open .site-header .brand .brand-hell { display: none; } :root:not([data-theme="light"]) body.nav-open .site-header .brand .brand-dunkel { display: block; } } body.nav-open .site-header .toplinks > a, body.nav-open .site-header .nav-drop__toggle, body.nav-open .site-header .nav-phone { color: var(--ink); } body.nav-open .site-header .nav-burger span { background: var(--ink); } .footer-brand { display: block; height: 38px; width: auto; margin-bottom: 0.35rem; } .footer-brand.brand-hell { display: block; } .footer-brand.brand-dunkel { display: none; } :root[data-theme="dark"] .footer-brand.brand-dunkel { display: block; } :root[data-theme="dark"] .footer-brand.brand-hell { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer-brand.brand-dunkel { display: block; } :root:not([data-theme="light"]) .footer-brand.brand-hell { display: none; } } .hero--cinematic { margin-top: calc(-1 * var(--header-h, 5.6rem)); min-height: 100svh; padding-block: calc(var(--header-h, 5.6rem) + 1.25rem) 4.5rem; background: var(--deep); color: var(--ink); } .hero--cinematic .hero-glow { display: none; } .hero--cinematic .hero__bg-overlay { background: linear-gradient( 180deg, color-mix(in srgb, var(--deep) 50%, transparent) 0%, color-mix(in srgb, var(--deep) 10%, transparent) 42%, color-mix(in srgb, var(--deep) 28%, transparent) 100% ); } .hero--cinematic .hero__bg img { animation: none !important; transform: none !important; filter: none !important; } .hero-copy--glass, .funnel-wrap { background: var(--glass, color-mix(in srgb, var(--bg) 48%, transparent)); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); border: 1px solid var(--glass-line, color-mix(in srgb, var(--ink) 18%, transparent)); box-shadow: none; color: var(--ink); border-radius: var(--r); } .hero--cinematic h1, .funnel-title { color: var(--ink); } .hero-copy--glass .lead, .hero--cinematic .lead { color: var(--ink-2); } .hero-checks li { color: var(--ink-2); } .hero-badge { background: var(--surface); border-color: var(--line); color: var(--ink); } .badge-pulse { animation: none; } .hero-copy--glass .btn-ghost-light { color: var(--ink); border-color: var(--line-strong); } .hero-copy--glass .btn-ghost-light:hover { background: var(--surface); border-color: var(--ink); } /* Foto-Hero bleibt hell beschriftet, unabhängig vom Theme-Token --ink. */ .hero--cinematic .hero-copy--glass, .hero--cinematic .funnel-wrap { color: #fff; } .hero--cinematic h1, .hero--cinematic .funnel-title { color: #fff; } .hero--cinematic .lead, .hero--cinematic .hero-copy--glass .lead { color: rgba(255, 255, 255, 0.86); } .hero--cinematic .hero-checks li { color: rgba(255, 255, 255, 0.9); } @media (max-width: 980px) { .hero--cinematic { min-height: 0; padding-bottom: 2.5rem; } .hero-copy--glass { margin-top: -2.5rem; } }