/*! * b'buchen Landingpage — konsolidiertes CSS (v3) * Änderungen ggü. v2: Shuffle-Stack -> statische Flow-Sektion, * Offene API -> invertiertes Indigo-Band, Responsive überarbeitet * (neuer 460px-Breakpoint, 3col 3->2->1, sich 4->2->1), * Branchen ohne Akzentkante, Hero-Card ohne Glow. * Voraussetzungen im : * 1) Webflow-Fonts "FeatureDeck" + "General Sans" * 2) * Seiten-Wrapper braucht Klasse .ka-scope * Breakpoints: 1024 / 860 / 680 / 460 (Prototyp-genau, NICHT Webflow-Standard) */ /* ============================================================ 1 · DESIGN-TOKENS ============================================================ */ :root { --color-indigo: #3D2BD5; --color-indigo-50: #9E94EA; --color-indigo-tint: #ECEAFB; --color-deep-blue: #0E0C1C; --color-champagne: #F9F4EC; --color-yellow: #F6DF35; --color-yellow-50: #FBEF99; --color-yellow-tint: #FBF1AE; --color-pink: #FF0670; --color-fandango: #C531A4; --color-teal: #00A1AA; --color-lavender: #8B85E8; --color-coral: #E37383; --color-ink: #0E0C1C; --color-ink-90: rgba(14,12,28,0.92); --color-ink-70: rgba(14,12,28,0.68); --color-ink-55: rgba(14,12,28,0.55); --color-ink-40: rgba(14,12,28,0.38); --color-ink-20: rgba(14,12,28,0.18); --color-ink-line: rgba(14,12,28,0.09); --color-paper: #FFFFFF; --color-cream: #F5EFE3; --color-cream-deep: #ECE0C7; --text-primary: var(--color-ink); --text-body: var(--color-ink-70); --text-muted: var(--color-ink-55); --text-faint: var(--color-ink-40); --text-on-invert: var(--color-paper); --text-link: var(--color-indigo); --border-subtle: var(--color-ink-line); --border-default: var(--color-ink-20); --border-strong: var(--color-ink-40); --focus-ring: var(--color-indigo); --font-display: 'FeatureDeck','Times New Roman',serif; --font-body: 'General Sans',system-ui,-apple-system,sans-serif; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 1rem; --text-md: 1.0625rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: clamp(2rem,4vw,3rem); --text-4xl: clamp(2.75rem,6vw,5rem); --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.04; --leading-snug: 1.1; --leading-normal: 1.6; --leading-relaxed: 1.75; --leading-loose: 1.8; --tracking-tight: -0.04em; --tracking-snug: -0.035em; --tracking-normal: -0.01em; --tracking-wide: 0.07em; --tracking-wider: 0.10em; --type-hero-headline-size: 3.25rem; --type-hero-headline-line: var(--leading-tight); --type-hero-headline-track: var(--tracking-snug); --type-hero-subhead-size: 1rem; --type-hero-subhead-line: var(--leading-normal); --type-hero-subhead-weight: var(--weight-regular); --type-hero-headline-size-mobile: 2.375rem; --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-14: 3.5rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px; --border-hair: 1px; --border-thick: 1.5px; --border-accent: 3px; --shadow-xs: 0 1px 1px rgba(14,12,28,0.03); --shadow-sm: 0 1px 2px rgba(14,12,28,0.04),0 2px 6px rgba(14,12,28,0.04); --shadow-md: 0 2px 4px rgba(14,12,28,0.04),0 8px 16px -4px rgba(14,12,28,0.06),0 16px 32px -8px rgba(14,12,28,0.08); --shadow-nav: 0 1px 2px rgba(14,12,28,0.04),0 4px 12px -4px rgba(14,12,28,0.08); --container-max: 82.5rem; --container-pad: 3rem; --sec-y: 8rem; --nav-height: 60px; --z-base: 0; --z-raised: 10; --z-nav: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --ease-spring: cubic-bezier(0.16,1,0.3,1); --ease-out: cubic-bezier(0,0,0.2,1); --ease-in-out: cubic-bezier(0.4,0,0.2,1); --ease-linear: linear; --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 350ms; --dur-slower: 500ms; } @media (max-width: 640px) { :root { --type-hero-headline-size: var(--type-hero-headline-size-mobile); } } /* ============================================================ 2 · KEYFRAMES + UTILITIES ============================================================ */ @keyframes bs-fade-up { from { opacity:0; transform:translateY(16px);} to { opacity:1; transform:translateY(0);} } @keyframes bs-fade-in { from { opacity:0;} to { opacity:1;} } @keyframes bs-scale-in { from { opacity:0; transform:scale(0.96);} to { opacity:1; transform:scale(1);} } @keyframes bs-slide-down { from { opacity:0; transform:translateY(-8px);} to { opacity:1; transform:translateY(0);} } @keyframes ka-fade-up { from { opacity:0; transform:translateY(16px);} to { opacity:1; transform:translateY(0);} } .bs-animate-fade-up { animation: bs-fade-up var(--dur-slow) var(--ease-out) both; } .bs-animate-fade-in { animation: bs-fade-in var(--dur-base) var(--ease-out) both; } .bs-animate-scale-in { animation: bs-scale-in var(--dur-slow) var(--ease-spring) both; } .bs-stagger > *:nth-child(1){animation-delay:0ms;} .bs-stagger > *:nth-child(2){animation-delay:60ms;} .bs-stagger > *:nth-child(3){animation-delay:120ms;} .bs-stagger > *:nth-child(4){animation-delay:180ms;} .bs-stagger > *:nth-child(5){animation-delay:240ms;} .bs-stagger > *:nth-child(6){animation-delay:300ms;} .bs-hover-lift { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .bs-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .bs-hover-dim { transition: opacity var(--dur-fast) var(--ease-out); } .bs-hover-dim:hover { opacity: 0.8; } /* ============================================================ 3 · b'buchen-SCOPE (Teal-Swap) + Hover-States ============================================================ */ .ka-scope { --color-indigo:#00A1AA; --color-indigo-50:#66C9BE; --color-indigo-tint:#E1F4F1; --color-cream:#E9E9EB; --color-cream-deep:#DCDCDF; background: var(--color-cream); } .ka-scope * { box-sizing: border-box; } .ka-scope a { -webkit-tap-highlight-color: transparent; } .ka-scope img { max-width: 100%; } .ka-scope .bs-btn, .ka-scope .bs-badge { border-radius: 0 !important; } .ka-fade { animation: ka-fade-up var(--dur-slower) var(--ease-out) both; } .ka-chip { transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ka-chip:hover { border-color: var(--color-indigo) !important; background: var(--color-indigo-tint) !important; } .ka-link { transition: color var(--dur-fast) var(--ease-out); } .ka-faq-row:hover .ka-faq-q { color: var(--color-indigo); } .ka-list-row { transition: opacity var(--dur-base) var(--ease-out); cursor: pointer; } .ka-list-row:hover { opacity: 0.7; } .ka-branch-row { transition: background var(--dur-fast) var(--ease-out); cursor: pointer; } .ka-branch-row:hover { background: var(--color-indigo-tint) !important; } .bs-btn--primary:hover { filter: brightness(0.92); } .bs-btn--secondary:hover { border-color: var(--color-ink-40) !important; } .bs-btn--ghost:hover { background: color-mix(in srgb, var(--color-indigo) 8%, transparent); } .bs-btn--yellow:hover { filter: brightness(0.93); } .ka-banner-cta:hover { filter: brightness(1.14); } /* ============================================================ 4 · SHARED HELFER ============================================================ */ .wrap { max-width: var(--container-max); margin: 0 auto; } .eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-indigo); font-weight: var(--weight-semibold); margin: 0 0 var(--s-4); } .sec-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 2.5rem; line-height: 1.04; letter-spacing: -0.025em; color: var(--color-ink); margin: 0; } .lead { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-body); margin: 0; } .check { color: var(--color-indigo); flex-shrink: 0; font-size: 0; line-height: 1; } .check::before { content: "\eb7b"; font-family: 'remixicon'; font-size: 1rem; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; } .card { background: var(--color-paper); border: 1px solid var(--color-ink-line); } .bb-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } /* ============================================================ 5 · HERO ============================================================ */ .hero { padding: var(--s-24) var(--container-pad) var(--s-16); } .bb-hero-grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-16); align-items: center; } .hero-eyebrow-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); } .hero-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); font-weight: var(--weight-semibold); } .hero-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--type-hero-headline-size); line-height: var(--type-hero-headline-line); letter-spacing: var(--type-hero-headline-track); margin: 0 0 var(--s-5); max-width: 16ch; } .hero-sub { font-size: var(--type-hero-subhead-size); line-height: var(--leading-relaxed); color: var(--text-body); max-width: 44ch; margin: 0 0 var(--s-8); } .hero-cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); } .hero-fineprint { font-size: var(--text-xs); color: var(--text-faint); } .hero-card { position: relative; background: var(--color-paper); border: 1px solid var(--color-ink-line); box-shadow: var(--shadow-md); padding: var(--s-6); } .hero-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); } .hero-card-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-lg); } .hero-card-list { display: flex; flex-direction: column; gap: var(--s-3); } .hero-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--color-ink-line); } .hero-row-icon { width: 1.375rem; height: 1.375rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-sm); } .hero-row-icon.is-done { background: var(--color-yellow); color: var(--color-ink); } .hero-row-icon.is-wait { background: var(--color-yellow); color: var(--color-ink); } .hero-row-icon.is-inbox { background: var(--color-yellow); color: var(--color-ink); } .hero-row-text { flex: 1; } .hero-row-title { font-size: var(--text-sm); font-weight: var(--weight-medium); } .hero-row-sub { font-size: var(--text-xs); color: var(--text-faint); } /* Button-/Badge-Rekonstruktion (nur ohne eigene Component) */ .ka-scope .bs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 52px; padding: 0 var(--s-6); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ka-scope .bs-btn--primary { background: var(--color-indigo); color: var(--color-paper); } .ka-scope .bs-btn--ghost { background: transparent; color: var(--color-indigo); } .ka-scope .bs-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-2); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .ka-scope .bs-badge--teal { background: var(--color-indigo-tint); color: var(--color-indigo); } .ka-scope .bs-badge--yellow { background: var(--color-yellow-tint); color: var(--color-ink); } /* ============================================================ 6 · STATS ============================================================ */ .stats { padding: 0 var(--container-pad) var(--s-20); } .bb-stats-grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--color-ink-line); border-bottom: 1px solid var(--color-ink-line); } .stat-cell { padding: var(--s-8) var(--s-6); border-left: 1px solid var(--color-ink-line); } .stat-cell:first-child { border-left: none; } .bb-stat-num { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 2.75rem; line-height: 1; color: var(--color-indigo); margin: 0 0 var(--s-3); letter-spacing: var(--tracking-tight); } .stat-label { font-size: var(--text-sm); color: var(--text-body); margin: 0; } /* ============================================================ 7 · NAV (Desktop + Mobile · Custom, ohne Design-System-Component) ============================================================ */ /* --- Desktop --- */ .bb-nav-desktop { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(233,233,235,0.82); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); border-bottom: 1px solid var(--color-ink-line); padding: 0 var(--container-pad); } .nav-inner { max-width: var(--container-max); margin: 0 auto; height: var(--nav-height); padding: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); } .nav-logo { display: inline-flex; align-items: center; text-decoration: none; } .nav-logo img { height: 22px; } .nav-cluster { display: flex; align-items: center; gap: var(--s-8); } .nav-links { display: flex; align-items: center; gap: var(--s-6); } .nav-link { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-70); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .nav-link:hover { color: var(--color-indigo); } .nav-login { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .nav-login:hover { color: var(--color-indigo); } .nav-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s-5); background: var(--color-indigo); color: #fff; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; transition: filter var(--dur-fast) var(--ease-out); } .nav-cta:hover { filter: brightness(0.92); } /* --- Mobile --- */ .bb-nav-mobile { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(233,233,235,0.9); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); border-bottom: 1px solid var(--color-ink-line); display: none; } .nav-mob-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--container-pad); gap: var(--s-4); } .nav-mob-actions { display: flex; align-items: center; gap: var(--s-3); } .nav-mob-logo { display: inline-flex; align-items: center; text-decoration: none; } .nav-mob-logo img { height: 20px; } .nav-mob-cta { background: var(--color-indigo); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 10px 14px; text-decoration: none; white-space: nowrap; } .nav-mob-burger { width: 44px; height: 44px; background: none; border: 1px solid var(--color-ink-20); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; } .nav-mob-burger span, .nav-mob-burger .burger-line { width: 18px; height: 2px; background: var(--color-ink); display: block; } .nav-mob-menu { display: none; border-top: 1px solid var(--color-ink-line); background: var(--color-cream); flex-direction: column; } .bb-nav-mobile.is-open .nav-mob-menu { display: flex; animation: bs-slide-down var(--dur-base) var(--ease-out) both; } .nav-mob-menu a { padding: 14px var(--container-pad); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-ink-line); } .nav-mob-menu a.is-login { font-weight: var(--weight-semibold); color: var(--color-indigo); border-bottom: none; } /* ============================================================ 8 · SÄULEN ============================================================ */ .saeulen { padding: var(--sec-y) var(--container-pad) 0; } .saeulen-head { max-width: 56ch; margin-bottom: var(--s-12); } .saeulen-head .sec-title { margin: 0 0 var(--s-4); } .saeule { padding: var(--s-8); background: var(--color-paper); border: 1px solid var(--color-ink-line); } .saeule-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-xl); margin-bottom: var(--s-3); } .saeule p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-body); margin: 0; } /* ============================================================ 9 · STEPS (So funktioniert's · Klick-zum-Wählen) ============================================================ */ .steps { padding: var(--sec-y) var(--container-pad) 0; } .bb-steps-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-16); align-items: stretch; } .steps .sec-title { margin: 0 0 var(--s-8); } .step-row { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-5) 0; cursor: pointer; transition: opacity var(--dur-base) var(--ease-out); } .step-row-title { font-weight: var(--weight-semibold); font-size: var(--text-lg); margin-bottom: var(--s-1); color: var(--text-faint); transition: color var(--dur-fast) var(--ease-out); } .step-row.is-active .step-row-title { color: var(--color-ink); } .step-row p { font-size: var(--text-sm); color: var(--text-faint); margin: 0 0 var(--s-3); } .step-bar { height: 2px; background: var(--color-ink-line); width: 100%; transition: width var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); } .step-row.is-active .step-bar { background: var(--color-indigo); width: 48px; } .bb-shot { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text-faint); font-size: var(--text-sm); text-align: center; } .step-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .step-img.is-active { display: block; } /* ============================================================ 10 · FLOW ("Was b'buchen dir abnimmt" · statisch, ersetzt Shuffle-Stack) ============================================================ */ .flow-sec { padding: var(--sec-y) var(--container-pad) 0; } .flow-sec .sec-title { margin: 0 0 var(--s-3); max-width: 22ch; line-height: 1.1; } .flow-sec .lead { margin: 0 0 var(--s-16); max-width: 52ch; } .flow-wrap { position: relative; } .bb-flow-line { position: absolute; top: 17px; left: 0; right: 0; height: 1px; background: var(--color-ink-line); } .bb-flow-grid { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-10); } .flow-num { width: 34px; height: 34px; border-radius: 50%; background: var(--color-cream); border: 1px solid var(--color-indigo); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--color-indigo); font-size: 0.85rem; margin-bottom: var(--s-6); } .flow-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-lg); letter-spacing: var(--tracking-snug); margin-bottom: var(--s-3); } .flow-desc { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; max-width: 34ch; } /* ============================================================ 11 · OFFENE API (invertiertes Indigo-Band) ============================================================ */ .api { padding: var(--s-16) 0; } .api-band { background: var(--color-indigo); color: #fff; } .bb-api-grid { max-width: var(--container-max); margin: 0 auto; padding: var(--s-20) var(--container-pad); display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-16); align-items: center; } .api-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: rgba(255,255,255,0.85); font-weight: var(--weight-semibold); margin: 0 0 var(--s-4); } .api-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-3xl); letter-spacing: var(--tracking-snug); line-height: 1.08; color: #fff; margin: 0 0 var(--s-5); max-width: 16ch; } .api-lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.82); margin: 0; max-width: 46ch; } .api-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.22); } .api-list li { display: flex; align-items: baseline; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid rgba(255,255,255,0.22); } .api-num { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-md); color: var(--color-yellow); flex-shrink: 0; } .api-item-text { font-size: var(--text-md); color: #fff; } /* ============================================================ 12 · ZUSAMMENARBEIT ============================================================ */ .zusammen { padding: var(--sec-y) var(--container-pad) 0; } .bb-zusammen-card { background: #fff; border: 1px solid var(--color-ink-line); padding: var(--s-16) var(--s-12); } .bb-zusammen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; } .bb-zusammen-grid .sec-title { margin: 0 0 var(--s-4); } .zusammen-lead { margin: 0 0 var(--s-8); max-width: 46ch; } .zusammen-panel { background: var(--color-indigo-tint); padding: var(--s-8); } .zusammen-panel .row { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-5); font-size: var(--text-md); } .zusammen-panel .row:last-child { margin-bottom: 0; } /* ============================================================ 13 · SICHERHEIT ============================================================ */ .sicher { padding: var(--s-12) var(--container-pad); } .sicher-inner { border-top: 1px solid var(--color-ink-line); border-bottom: 1px solid var(--color-ink-line); padding: var(--s-10) 0; } .sicher .eyebrow { margin: 0 0 var(--s-8); text-align: center; } .bb-sich-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-8); } .sicher-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); margin: 0 0 var(--s-2); } .sicher-value { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-xl); margin: 0; } /* ============================================================ 14 · PREISE ============================================================ */ .pricing { padding: var(--sec-y) var(--container-pad) 0; } .pricing-head { text-align: center; max-width: 60ch; margin: 0 auto var(--s-10); } .pricing-head .sec-title { margin: 0 0 var(--s-4); } .pricing-head .lead { line-height: var(--leading-normal); } .bill-toggle-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-4); margin: 0 0 var(--s-10); font-size: var(--text-sm); font-weight: var(--weight-medium); } .bill-switch { position: relative; width: 52px; height: 28px; background: var(--color-indigo-tint); border: 1px solid var(--color-ink-line); border-radius: var(--radius-full); cursor: pointer; padding: 0; } .bill-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--color-indigo); border-radius: 50%; transition: transform var(--dur-base) var(--ease-out); transform: translateX(24px); } .pricing.is-monthly .bill-knob { transform: translateX(0); } .bill-save { background: var(--color-yellow); color: var(--color-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 3px 9px; } .bb-pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); align-items: stretch; } .price-card { background: var(--color-paper); border: 1px solid var(--color-ink-line); padding: var(--s-8); display: flex; flex-direction: column; } .price-card.is-featured { background: var(--color-indigo); color: var(--color-paper); border-color: var(--color-indigo); box-shadow: var(--shadow-md); } .price-flag { align-self: flex-start; background: var(--color-yellow); color: var(--color-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 3px 10px; margin-bottom: var(--s-4); } .price-name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-xl); letter-spacing: var(--tracking-snug); } .is-featured .price-name { color: #fff; } .price-desc { font-size: var(--text-sm); color: var(--text-body); margin: var(--s-2) 0 var(--s-6); min-height: 40px; line-height: var(--leading-normal); } .is-featured .price-desc { color: rgba(255,255,255,0.82); } .price-row { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; } .price-amount { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 3rem; line-height: 1; letter-spacing: var(--tracking-tight); } .is-featured .price-amount { color: #fff; } .price-per { font-size: var(--text-sm); color: var(--text-muted); } .is-featured .price-per { color: rgba(255,255,255,0.7); } .price-struck { font-size: var(--text-sm); color: var(--text-faint); text-decoration: line-through; } .is-featured .price-struck { color: rgba(255,255,255,0.55); } .price-badge-slot { min-height: 22px; margin-top: var(--s-2); } .price-save-badge { display: inline-block; background: var(--color-yellow); color: var(--color-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px 8px; } .price-save-hint { font-size: var(--text-xs); color: var(--text-faint); } .is-featured .price-save-hint { color: rgba(255,255,255,0.6); } .price-note { font-size: var(--text-xs); color: var(--text-faint); margin: var(--s-2) 0 0; } .is-featured .price-note { color: rgba(255,255,255,0.6); } .price-vol { margin-top: var(--s-4); padding: var(--s-4); background: var(--color-cream); display: flex; align-items: baseline; gap: var(--s-2); } .is-featured .price-vol { background: rgba(255,255,255,0.12); } .price-vol-num { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-2xl); line-height: 1; color: var(--color-ink); } .is-featured .price-vol-num { color: #fff; } .price-vol-unit { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .is-featured .price-vol-unit { color: rgba(255,255,255,0.8); } .price-cta { display: block; text-align: center; text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-sm); border: 1px solid var(--color-indigo); color: var(--color-indigo); background: transparent; padding: 12px 16px; margin: var(--s-6) 0; } .price-cta.is-solid { background: var(--color-paper); color: var(--color-indigo); border-color: var(--color-paper); } .price-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); } .price-features li { display: flex; gap: var(--s-3); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-ink); } .is-featured .price-features li { color: #fff; } .is-featured .price-features .check { color: var(--color-yellow); } .price-spacer { margin-top: auto; } .pricing.is-monthly .js-annual-only { display: none; } .pricing.is-annual .js-monthly-only { display: none; } .pricing-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-8); margin-top: var(--s-8); font-size: var(--text-sm); color: var(--text-body); } .pricing-trust .item { display: inline-flex; align-items: center; gap: var(--s-2); } .pricing-trust .item p { margin: 0; } .pricing-legal { text-align: center; font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--s-4); } .pricing-forwhom { margin-top: var(--s-16); } .pricing-forwhom h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); text-align: center; margin: 0 0 var(--s-8); } .forwhom-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); color: var(--color-ink); text-align: center; margin: 0 0 var(--s-8); } .forwhom-card { background: var(--color-paper); border: 1px solid var(--color-ink-line); padding: var(--s-6); } .forwhom-card .name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-lg); color: var(--color-indigo); margin-bottom: var(--s-3); } .forwhom-card p { font-size: var(--text-sm); color: var(--text-body); line-height: var(--leading-relaxed); margin: 0; } /* ============================================================ 15 · BANNER ============================================================ */ .banner { padding: var(--s-16) 0 var(--s-20); } .banner-inner { background: var(--color-yellow); overflow: hidden; } .bb-banner-grid { padding: var(--s-12) var(--container-pad); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; } .banner-flag { display: inline-flex; background: var(--color-paper); color: var(--color-indigo); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 5px 12px; margin-bottom: var(--s-6); } .banner .sec-title { color: var(--color-ink); margin: 0 0 var(--s-4); max-width: 16ch; } .banner-lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-ink-70); max-width: 44ch; margin: 0 0 var(--s-8); } .ka-banner-cta { display: inline-flex; align-items: center; gap: var(--s-3); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 16px 28px; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .banner-illu { display: flex; align-items: center; justify-content: center; height: 100%; } .banner-illu img { width: 100%; max-width: 420px; aspect-ratio: 1/1; object-fit: contain; } /* ============================================================ 16 · BRANCHEN (Zeilen ohne Akzentkante) ============================================================ */ .branchen { padding: var(--sec-y) var(--container-pad) 0; } .branchen .sec-title { margin: 0 0 var(--s-3); } .branchen-lead { font-size: var(--text-md); color: var(--text-body); margin: 0 0 var(--s-10); max-width: 56ch; } .bb-branch-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-8); align-items: start; } .branch-list { display: flex; flex-direction: column; border-top: 1px solid var(--color-ink-line); } .branch-row { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-4); border-bottom: 1px solid var(--color-ink-line); background: transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .branch-row .name { font-weight: var(--weight-regular); font-size: var(--text-md); color: var(--text-body); } .branch-row .arrow { color: var(--color-indigo); font-size: 1rem; opacity: 0; } .branch-row:hover { background: var(--color-indigo-tint); } .branch-row.is-active { background: var(--color-indigo-tint); } .branch-row.is-active .name { font-weight: var(--weight-semibold); color: var(--color-ink); } .branch-row.is-active .arrow { opacity: 1; } .branch-detail { position: relative; } .branch-panel { display: none; background: var(--color-paper); border: 1px solid var(--color-ink-line); padding: var(--s-8); } .branch-panel.is-active { display: block; } .branch-panel .headline { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-xl); margin-bottom: var(--s-5); } .branch-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); } .branch-panel li { display: flex; gap: var(--s-3); font-size: var(--text-md); color: var(--color-ink); } /* ============================================================ 17 · FAQ ============================================================ */ .faq { padding: var(--sec-y) var(--container-pad) 0; } .faq-head { max-width: 900px; margin: 0 auto; text-align: center; } .faq-head .sec-title { margin: 0 0 var(--s-10); } .faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--color-ink-line); text-align: left; } .faq-row { border-bottom: 1px solid var(--color-ink-line); cursor: pointer; } .faq-q-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-6) var(--s-2); } .ka-faq-q { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); transition: color var(--dur-fast) var(--ease-out); } .faq-row:hover .ka-faq-q { color: var(--color-indigo); } .faq-sign { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--color-ink-40); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--color-ink); } .faq-answer { display: none; font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-relaxed); max-width: 70ch; margin: 0 var(--s-2) var(--s-6); } .faq-row.is-open .faq-answer { display: block; } /* ============================================================ 18 · FOOTER ============================================================ */ .footer { background: var(--color-ink); color: var(--color-cream); padding: var(--s-16) var(--container-pad); } .bb-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s-8); } .footer-brand { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 1.25rem; color: #fff; } .footer-brand .apos { color: var(--color-indigo); } .footer-tagline { font-size: var(--text-xs); color: #9a97a5; margin-top: var(--s-3); max-width: 32ch; } .footer-col h3 { color: #fff; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 var(--s-4); } .footer-links { display: flex; flex-direction: column; gap: var(--s-2); } .footer-links a { color: #9a97a5; text-decoration: none; font-size: var(--text-sm); transition: color var(--dur-fast) var(--ease-out); } .footer-links a:hover { color: var(--color-cream); } /* ============================================================ 19 · ICONS (Remixicon-Slots) ============================================================ */ .ico-24 { font-size: 1.5rem; line-height: 1; color: var(--color-ink); display: inline-block; } .ico-26 { font-size: 1.625rem; line-height: 1; color: var(--color-ink); display: inline-block; } .ico-28 { font-size: 1.75rem; line-height: 1; color: var(--color-ink); display: inline-block; } .ico-accent { color: var(--color-indigo); } .saeule .ico-28 { margin-bottom: var(--s-5); } .sicher-item .ico-26 { margin-bottom: var(--s-4); } .step-row .step-ico { flex-shrink: 0; margin-top: 2px; opacity: 0.35; transition: opacity var(--dur-fast) var(--ease-out); } .step-row.is-active .step-ico { opacity: 1; } /* ============================================================ 20 · RESPONSIVE (v3 · Breakpoints 1024 / 860 / 680 / 460) ============================================================ */ @media (max-width: 1024px) { .ka-scope { --s-24: 5rem; --s-20: 4rem; } .bb-hero-grid { grid-template-columns: 1fr !important; gap: var(--s-10) !important; } .bb-steps-grid, .bb-api-grid, .bb-zusammen-grid, .bb-banner-grid, .bb-branch-grid { grid-template-columns: 1fr !important; gap: var(--s-10) !important; } .bb-api-grid { padding: var(--s-14) var(--container-pad) !important; } .bb-zusammen-card { padding: var(--s-12) var(--s-8) !important; } .bb-pricing-grid { grid-template-columns: minmax(0, 560px) !important; justify-content: center !important; } .bb-3col { grid-template-columns: 1fr 1fr !important; } .bb-sich-grid { grid-template-columns: 1fr 1fr !important; gap: var(--s-8) !important; } .bb-flow-grid { grid-template-columns: 1fr 1fr !important; gap: var(--s-10) var(--s-8) !important; } .bb-flow-line { display: none !important; } } @media (max-width: 860px) { .bb-nav-desktop { display: none; } .bb-nav-mobile { display: block !important; } .bb-stats-grid { grid-template-columns: 1fr 1fr !important; } .bb-stats-grid > div { border-left: none !important; } .bb-stats-grid > div:nth-child(n+3) { border-top: 1px solid var(--color-ink-line); } .bb-footer-grid { grid-template-columns: 1fr 1fr !important; } .bb-footer-grid > div:first-child { grid-column: 1 / -1; } } @media (max-width: 680px) { .ka-scope { --container-pad: 1.25rem; --sec-y: 4rem; --s-24: 4rem; --s-20: 3.25rem; --s-16: 2.5rem; } .bb-stat-num { font-size: 2rem !important; } .bb-3col { grid-template-columns: 1fr !important; } .bb-flow-grid { grid-template-columns: 1fr !important; gap: var(--s-8) !important; } .bb-api-grid { padding: var(--s-10) var(--container-pad) !important; } .bb-shot { min-height: 220px !important; } } @media (max-width: 460px) { .bb-stats-grid { grid-template-columns: 1fr !important; } .bb-stats-grid > div { border-left: none !important; border-top: 1px solid var(--color-ink-line) !important; } .bb-sich-grid { grid-template-columns: 1fr !important; gap: var(--s-6) !important; } } @media (prefers-reduced-motion: reduce) { .bs-animate-fade-up, .bs-animate-fade-in, .bs-animate-scale-in, .ka-fade { animation: none; } }