/* ============================================ selbstversichert.com — Design System Timo Lochmüller | Eigenmarke ============================================ */ /* --- Google Fonts --- */ /* Moved to HTML with preconnect for better performance */ /* Performance: will-change hints for animated elements */ .vero-orbit, .vero-mini, .sticky-mobile-cta { will-change: transform; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .vero-mini { animation: none !important; } .vero-orbit__icons { animation: none !important; } html { scroll-behavior: auto; } } /* --- CSS Custom Properties --- */ :root { --color-primary: #0055a4; --color-primary-dark: #003366; --color-primary-light: #e8f0fe; --color-accent: #00a3e0; --color-accent-hover: #0090c7; --color-text: #1a1a2e; --color-text-light: #6b7280; --color-text-inverse: #ffffff; --color-bg: #f5f6f8; --color-bg-alt: #eceef2; --color-bg-dark: #0a1628; --color-surface: #ffffff; --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; --color-border: #e5e7eb; --color-border-light: #f3f4f6; --color-shadow: rgba(0, 51, 102, 0.1); --header-bg: rgba(255, 255, 255, 0.97); --font-heading: 'Montserrat', sans-serif; --font-body: 'Open Sans', sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 3.75rem; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; --spacing-4xl: 6rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px var(--color-shadow); --shadow-md: 0 4px 6px var(--color-shadow); --shadow-lg: 0 10px 25px var(--color-shadow); --shadow-xl: 0 20px 50px var(--color-shadow); --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; --header-height: 96px; --header-height-scrolled: 68px; --container-max: 1200px; --container-narrow: 800px; } /* --- Reset / Normalize --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: 1.7; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.nav-open { overflow: hidden; } /* Ensure content below fixed header is never hidden */ main { padding-top: var(--header-height); } /* Pages with hero or page-header already handle their own top spacing */ main > .hero:first-child, main > .page-header:first-child, main > .wk-hero:first-child { margin-top: calc(-1 * var(--header-height)); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent); } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: 1.3; color: var(--color-primary-dark); } h1 { font-size: var(--fs-4xl); margin-bottom: var(--spacing-lg); } h2 { font-size: var(--fs-3xl); margin-bottom: var(--spacing-lg); } h3 { font-size: var(--fs-2xl); margin-bottom: var(--spacing-md); } h4 { font-size: var(--fs-xl); margin-bottom: var(--spacing-md); } p { margin-bottom: var(--spacing-md); } /* --- Layout --- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-xl); } .container--narrow { max-width: var(--container-narrow); } .section { padding: var(--spacing-3xl) 0; } @media (max-width: 768px) { .section { padding: var(--spacing-2xl) 0; } .kennzahlen-section { padding: var(--spacing-xl) 0; } .cta-section { padding: var(--spacing-2xl) 0; } } .section--alt { background-color: var(--color-bg-alt); } .section--dark { background-color: var(--color-bg-dark); color: var(--color-text-inverse); } .section--dark h2, .section--dark h3 { color: var(--color-text-inverse); } .section__header { text-align: center; margin-bottom: var(--spacing-2xl); } .section__subtitle { font-size: var(--fs-md); color: var(--color-text-light); max-width: 600px; margin: 0 auto; } /* --- Header / Navigation --- */ /* Defensive: #site-header bekommt die Basis-Styles auch OHNE .header-Klasse, damit die Leiste bei JS-Ausfall (z.B. strenger Tracking-Schutz in Edge) wenigstens als sichtbarer Streifen bleibt und den Layout-Offset erhält. */ .header, #site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: var(--header-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 1000; transition: all var(--transition-normal); border-bottom: 1px solid transparent; } .header.scrolled { height: var(--header-height-scrolled); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } .header > .container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .header__logo { display: flex; align-items: center; gap: var(--spacing-md); z-index: 1001; text-decoration: none; flex-shrink: 0; margin-right: var(--spacing-lg); } .header__logo .logo { height: 82px; width: auto; transition: height var(--transition-normal); } .header.scrolled .header__logo .logo { height: 54px; } .header__brand-text { display: flex; flex-direction: column; line-height: 1.2; } .header__brand-name { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-primary-dark); } .header__brand-tagline { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--color-accent); letter-spacing: 1.2px; margin-top: 2px; } .header.scrolled .header__brand-tagline { display: none; } .header.scrolled .header__brand-name { font-size: var(--fs-lg); } .header__nav-list { display: flex; align-items: center; gap: 0.55rem; } .header__nav-link { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text); padding: 0.45rem 0.7rem; border-radius: var(--radius-md); transition: all var(--transition-fast); position: relative; white-space: nowrap; } /* Such-Icon nach Kontakt — Circle-Button, klar sichtbar */ .header__nav-link.header__search-btn { padding: 0; margin-left: 0.5rem; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 50%; color: var(--color-text-light); position: relative; z-index: 2; } .header__nav-link.header__search-btn:hover, .header__nav-link.header__search-btn:focus-visible { background-color: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); outline: none; } [data-theme="dark"] .header__nav-link.header__search-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.75); } [data-theme="dark"] .header__nav-link.header__search-btn:hover, [data-theme="dark"] .header__nav-link.header__search-btn:focus-visible { background: rgba(0, 163, 224, 0.15); color: var(--color-accent); border-color: var(--color-accent); } .header__nav-link:hover, .header__nav-link.active { color: var(--color-primary); background-color: var(--color-primary-light); } .header__nav-link--cta { background-color: var(--color-primary); color: var(--color-text-inverse) !important; padding: 0.45rem 0.95rem; } .header__nav-link--cta:hover { background-color: var(--color-primary-dark) !important; color: var(--color-text-inverse) !important; } /* Active-State für den CTA-Button: Die generische .active-Regel würde den Background auf primary-light setzen (weißer Text auf hellblau = unlesbar). Stattdessen: dunklerer Grundton + dezenter Ring als Aktiv-Indikator. */ .header__nav-link--cta.active { background-color: var(--color-primary-dark) !important; color: var(--color-text-inverse) !important; box-shadow: 0 0 0 2px rgba(0, 85, 164, 0.3), 0 4px 10px rgba(0, 85, 164, 0.22); } [data-theme="dark"] .header__nav-link--cta.active { background-color: var(--color-accent, #00a3e0) !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(0, 163, 224, 0.4), 0 4px 10px rgba(0, 0, 0, 0.35); } /* Mein Bereich — Obsidian-Gold Premium Pill Analog zum Footer-Style .footer__link--mein-bereich, für die Haupt-Navigation mit passenderen Dimensionen. */ .header__nav-link--login { display: inline-flex; align-items: center; margin-right: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: radial-gradient(ellipse at 30% 15%, rgba(70, 55, 110, 0.4) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(140, 90, 20, 0.28) 0%, transparent 60%), linear-gradient(135deg, #0b0d15 0%, #141826 50%, #060810 100%); border: 1px solid rgba(240, 200, 80, 0.42); color: #ffd966 !important; font-weight: var(--fw-semibold); letter-spacing: 0.02em; box-shadow: 0 0 10px rgba(240, 200, 80, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(240, 200, 80, 0.15); text-shadow: 0 0 8px rgba(240, 200, 80, 0.15); transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease, background-color 0.3s ease; } .header__nav-link--login:hover, .header__nav-link--login:focus-visible { color: #ffeaa6 !important; background-color: transparent; /* override generic nav-link hover */ border-color: rgba(255, 220, 120, 0.72); box-shadow: 0 0 16px rgba(240, 200, 80, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(240, 200, 80, 0.28); transform: translateY(-1px); outline: none; } @media (prefers-reduced-motion: reduce) { .header__nav-link--login { transition: color 0.2s ease, border-color 0.2s ease; } .header__nav-link--login:hover, .header__nav-link--login:focus-visible { transform: none; } } .header__nav-link--highlight { color: var(--color-accent) !important; font-weight: var(--fw-bold); } .header__nav-link--highlight:hover { background-color: rgba(0, 163, 224, 0.1); } /* Search Button in Header */ .header__search-btn { background: none; border: 2px solid var(--color-border); color: var(--color-text-light); padding: var(--spacing-xs); border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; transition: all var(--transition-fast); margin-left: var(--spacing-xs); } .header__search-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-light); } /* Mobile-Lupe im Header (zwischen Logo und Burger) — nur auf Mobile sichtbar. Desktop nutzt weiterhin den Button in der Nav. Zentrierung: .header > .container nutzt justify-content: space-between, bei 3 Kindern (Logo, Lupe, Burger) landet die Lupe automatisch mittig zwischen den beiden Außenseiten. */ .header__search-btn--mobile { display: none; } /* Search Overlay */ .header-search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .header-search-overlay.active { opacity: 1; visibility: visible; } .header-search-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: var(--color-surface); padding: var(--spacing-lg) var(--spacing-xl); box-shadow: var(--shadow-xl); transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .header-search-bar.active { transform: translateY(0); } .header-search-bar__inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; gap: var(--spacing-md); } .header-search-bar__input { flex: 1; padding: 0.75rem 1.25rem; border: 2px solid var(--color-border); border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--fs-md); outline: none; background: var(--color-bg); color: var(--color-text); transition: border-color var(--transition-fast); } .header-search-bar__input:focus { border-color: var(--color-primary); } .header-search-bar__close { background: none; border: none; color: var(--color-text-light); cursor: pointer; padding: var(--spacing-xs); border-radius: var(--radius-full); display: flex; align-items: center; transition: color var(--transition-fast); } .header-search-bar__close:hover { color: var(--color-text); } .header-search-results { max-width: var(--container-max); margin: var(--spacing-md) auto 0; max-height: 50vh; overflow-y: auto; } .header-search-results a { display: block; padding: var(--spacing-sm) var(--spacing-md); color: var(--color-text); text-decoration: none; border-radius: var(--radius-md); font-size: var(--fs-sm); transition: background var(--transition-fast); } .header-search-results a:hover { background: var(--color-primary-light); } .header-search-results__empty { padding: var(--spacing-md); text-align: center; color: var(--color-text-light); font-size: var(--fs-sm); } /* Smart Search: Gruppen, Suggestions, Keyboard-Nav, Highlight */ .header-search-results .search-group { padding: var(--spacing-xs) 0 var(--spacing-sm); } .header-search-results .search-group + .search-group { border-top: 1px solid var(--color-border); margin-top: var(--spacing-xs); } .header-search-results .search-group__label { display: flex; align-items: center; gap: 0.5rem; padding: var(--spacing-xs) var(--spacing-md); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-light); } .header-search-results .search-group__count { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .header-search-results .search-results-list, .header-search-results .search-suggestions { list-style: none; margin: 0; padding: 0; } .header-search-results a.search-result { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem var(--spacing-md); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: background var(--transition-fast); } .header-search-results a.search-result:hover, .header-search-results a.search-result.is-selected { background: var(--color-primary-light); outline: none; } .header-search-results .search-result__title { font-weight: 600; font-size: 0.95rem; line-height: 1.3; } .header-search-results .search-result__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: baseline; font-size: 0.82rem; color: var(--color-text-light); } .header-search-results .search-result__cat { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(0, 85, 164, 0.08); color: var(--color-primary); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; } .header-search-results .search-result__snippet { flex: 1 1 100%; line-height: 1.45; /* Max. 2 Zeilen anzeigen */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .header-search-results mark { background: #fff3a3; color: inherit; padding: 0 0.1rem; border-radius: 2px; font-weight: 600; } .header-search-results .search-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 var(--spacing-md) var(--spacing-xs); } .header-search-results .search-suggestions li { list-style: none; } .header-search-results .search-suggestion { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); color: var(--color-text); font-size: 0.85rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: all var(--transition-fast); } .header-search-results .search-suggestion:hover, .header-search-results .search-suggestion:focus-visible { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); outline: none; } /* Dark Mode — Suchergebnisse */ [data-theme="dark"] .header-search-results .search-group + .search-group { border-top-color: var(--color-border); } [data-theme="dark"] .header-search-results .search-group__count { background: rgba(74, 143, 224, 0.18); color: #7ab4ef; } [data-theme="dark"] .header-search-results a.search-result:hover, [data-theme="dark"] .header-search-results a.search-result.is-selected { background: rgba(74, 143, 224, 0.18); } [data-theme="dark"] .header-search-results .search-result__cat { background: rgba(74, 143, 224, 0.18); color: #7ab4ef; } [data-theme="dark"] .header-search-results mark { background: #f7d96d; color: #1a1a2e; } [data-theme="dark"] .header-search-results .search-suggestion { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .header-search-results .search-suggestion:hover, [data-theme="dark"] .header-search-results .search-suggestion:focus-visible { background: rgba(74, 143, 224, 0.18); border-color: #7ab4ef; color: #7ab4ef; } /* Reduced Motion — keine Slide-In-Transitions für Highlight */ @media (prefers-reduced-motion: reduce) { .header-search-results a.search-result, .header-search-results .search-suggestion { transition: none; } } /* Hamburger Menu */ .header__menu-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; z-index: 1001; padding: 0; position: relative; border-radius: 50%; isolation: isolate; /* eigener Stacking-Context damit ::after (Glow) nicht hinter den Header rutscht */ } .header__menu-toggle span { display: block; width: 22px; height: 2px; background-color: var(--color-text); transition: all var(--transition-normal); border-radius: 2px; } /* Cyan-Glow-Kreis INNEN im Button — ruhiger, weicher Hintergrund hinter den drei Linien. Animiert zusammen mit dem Ring, aber softer. */ .header__menu-toggle::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient( circle, rgba(0, 163, 224, 0.35) 0%, rgba(0, 163, 224, 0.18) 45%, rgba(0, 163, 224, 0) 75% ); filter: blur(2px); opacity: 0.75; pointer-events: none; z-index: -1; animation: sv-menu-glow 2.6s ease-in-out infinite; } body.nav-open .header__menu-toggle::after { animation: none; opacity: 0; } @keyframes sv-menu-glow { 0% { opacity: 0.35; transform: scale(0.88); } 35% { opacity: 0.85; transform: scale(1); } 70% { opacity: 0.35; transform: scale(0.92); } 100% { opacity: 0.35; transform: scale(0.88); } } /* Pulsierender Rand als Klappmechanik-Hinweis — nur Mobile, nur geschlossen */ .header__menu-toggle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--color-accent, #00a3e0); opacity: 0; pointer-events: none; animation: sv-menu-ring 2.6s ease-in-out infinite; } body.nav-open .header__menu-toggle::before { animation: none; opacity: 0; } @keyframes sv-menu-ring { 0% { transform: scale(0.78); opacity: 0; } 35% { transform: scale(1); opacity: 0.85; } 70% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .header__menu-toggle::before, .header__menu-toggle::after { animation: none; } .header__menu-toggle::before { opacity: 0.55; transform: scale(1); } .header__menu-toggle::after { opacity: 0.55; transform: scale(1); } } body.nav-open .header__menu-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } body.nav-open .header__menu-toggle span:nth-child(2) { opacity: 0; } body.nav-open .header__menu-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* --- Hero Section --- */ .hero { position: relative; min-height: 85vh; display: flex; align-items: center; padding-top: var(--header-height); background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent) 100%); overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .hero__content { position: relative; z-index: 1; color: var(--color-text-inverse); max-width: 700px; } .hero__badge { display: inline-block; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--spacing-xl); border: 1px solid rgba(255, 255, 255, 0.2); } .hero__title { font-size: var(--fs-5xl); font-weight: var(--fw-extrabold); color: var(--color-text-inverse); line-height: 1.1; margin-bottom: var(--spacing-lg); } .hero__subtitle { font-size: var(--fs-lg); opacity: 0.9; margin-bottom: var(--spacing-2xl); line-height: 1.6; } .hero__actions { display: flex; align-items: stretch; gap: var(--spacing-md); flex-wrap: nowrap; } .hero__actions .btn { flex: 1; text-align: center; padding: 1rem 1.25rem; font-size: var(--fs-base); } .hero__shield { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: 500px; max-width: 90vw; opacity: 0.08; z-index: 0; } /* Hero Grid: Text left, VERO Sim visual right */ .hero__grid { display: flex; align-items: center; gap: var(--spacing-2xl); } .hero__grid .hero__content { flex: 1 1 55%; min-width: 0; } .hero__visual { flex: 1 1 45%; min-width: 0; position: relative; z-index: 1; } .hero__visual-link { display: block; transition: transform var(--transition-normal); } .hero__visual-link:hover { transform: scale(1.02); } .hero__visual-img { width: 100%; height: auto; border-radius: var(--radius-lg); filter: drop-shadow(0 8px 32px rgba(0, 163, 224, 0.15)); } /* --- VERO Orbit Hero Visual --- */ .vero-orbit { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 440px; margin: 0 auto; text-decoration: none; animation: orbitDrift 30s ease-in-out infinite; } @keyframes orbitDrift { 0% { transform: translate(0, 0); } 12% { transform: translate(8%, -12%); } 25% { transform: translate(-5%, -18%); } 37% { transform: translate(-12%, -6%); } 50% { transform: translate(-8%, 10%); } 62% { transform: translate(5%, 14%); } 75% { transform: translate(12%, 4%); } 87% { transform: translate(6%, -8%); } 100% { transform: translate(0, 0); } } .vero-orbit::before { content: ''; position: absolute; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 163, 224, 0.12) 0%, transparent 70%); animation: ambientGlow 4s ease-in-out infinite alternate; pointer-events: none; } @keyframes ambientGlow { from { transform: scale(0.9); opacity: 0.6; } to { transform: scale(1.15); opacity: 1; } } .vero-orbit__ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(0, 163, 224, 0.22); pointer-events: none; box-shadow: 0 0 15px rgba(0, 163, 224, 0.08), inset 0 0 15px rgba(0, 163, 224, 0.05); } .vero-orbit__ring--outer { width: 100%; height: 100%; animation: orbitPulseOuter 3.5s ease-in-out infinite alternate; } .vero-orbit__ring--inner { width: 65%; height: 65%; border-color: rgba(0, 163, 224, 0.30); box-shadow: 0 0 20px rgba(0, 163, 224, 0.12), inset 0 0 20px rgba(0, 163, 224, 0.08); animation: orbitPulseInner 2.8s ease-in-out 0.3s infinite alternate; } @keyframes orbitPulseOuter { from { transform: scale(0.96); opacity: 0.4; } to { transform: scale(1.04); opacity: 1; box-shadow: 0 0 25px rgba(0, 163, 224, 0.15), inset 0 0 25px rgba(0, 163, 224, 0.08); } } @keyframes orbitPulseInner { from { transform: scale(0.95); opacity: 0.5; } to { transform: scale(1.05); opacity: 1; box-shadow: 0 0 30px rgba(0, 163, 224, 0.18), inset 0 0 30px rgba(0, 163, 224, 0.1); } } /* Center piece */ .vero-orbit__center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; animation: shieldFloat 4.5s ease-in-out infinite; } @keyframes shieldFloat { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 24px rgba(0, 163, 224, 0.35)); } 50% { transform: translateY(-10px); filter: drop-shadow(0 0 36px rgba(0, 163, 224, 0.55)); } } .vero-orbit__shield { filter: drop-shadow(0 0 28px rgba(0, 163, 224, 0.5)) drop-shadow(0 0 56px rgba(0, 163, 224, 0.15)); transition: filter 0.4s ease; } .vero-orbit__label { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: #ffffff; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 0 24px rgba(0, 163, 224, 0.7), 0 0 48px rgba(0, 163, 224, 0.3); animation: labelGlow 3s ease-in-out infinite alternate; } @keyframes labelGlow { from { text-shadow: 0 0 24px rgba(0, 163, 224, 0.7), 0 0 48px rgba(0, 163, 224, 0.3); } to { text-shadow: 0 0 30px rgba(0, 163, 224, 0.9), 0 0 60px rgba(0, 163, 224, 0.45); } } /* Orbiting icons */ .vero-orbit__icons { position: absolute; inset: 0; pointer-events: none; } .vero-orbit__icon { --angle: calc(360deg / var(--total) * var(--i)); --radius: 185px; --orbit-speed: 48s; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.95); background: rgba(0, 70, 148, 0.5); border: 1.5px solid rgba(0, 163, 224, 0.55); border-radius: 50%; backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 16px rgba(0, 163, 224, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15); animation: orbitSpin var(--orbit-speed) linear infinite, iconPulse 4s ease-in-out infinite; transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle))); transform-origin: 0 0; margin: -28px 0 0 -28px; pointer-events: auto; cursor: pointer; transition: width 0.25s ease-out, height 0.25s ease-out, margin 0.25s ease-out, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .vero-orbit__icon svg { width: 26px; height: 26px; transition: width 0.3s ease, height 0.3s ease; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } /* Hover label tooltip */ .vero-orbit__icon::after { content: attr(data-label); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; color: #ffffff; background: rgba(0, 51, 102, 0.9); padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(0, 163, 224, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .vero-orbit__icon::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(0, 51, 102, 0.9); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } /* Individual icon hover — grow in place on orbit + show label */ .vero-orbit__icon:hover { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: rgba(0, 70, 148, 0.75); color: #ffffff; border-color: rgba(0, 163, 224, 0.9); box-shadow: 0 0 28px rgba(0, 163, 224, 0.6), 0 0 56px rgba(0, 163, 224, 0.25), 0 0 80px rgba(0, 163, 224, 0.1); z-index: 10; animation: orbitSpin var(--orbit-speed) linear infinite; } .vero-orbit__icon:hover svg { width: 36px; height: 36px; } .vero-orbit__icon:hover::after { opacity: 1; } .vero-orbit__icon:hover::before { opacity: 1; } /* Other icons stay unchanged — clean hover without side effects */ @keyframes orbitSpin { from { transform: rotate(calc(var(--angle) + 0deg)) translateX(var(--radius)) rotate(calc(-1 * (var(--angle) + 0deg))); } to { transform: rotate(calc(var(--angle) + 360deg)) translateX(var(--radius)) rotate(calc(-1 * (var(--angle) + 360deg))); } } /* Floating particles */ .vero-orbit__particles { position: absolute; inset: 0; pointer-events: none; } .vero-orbit__particles span { position: absolute; left: var(--px); top: var(--py); width: 4px; height: 4px; background: rgba(0, 163, 224, 0.6); border-radius: 50%; box-shadow: 0 0 6px rgba(0, 163, 224, 0.4); animation: particleFloat var(--d) ease-in-out infinite alternate; } @keyframes particleFloat { from { transform: translate(0, 0) scale(0.8); opacity: 0.25; } to { transform: translate(10px, -14px) scale(1.3); opacity: 0.9; } } @keyframes iconPulse { 0%, 100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 16px rgba(0, 163, 224, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15); } 50% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 22px rgba(0, 163, 224, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15); } } /* General orbit hover — shield glow */ .vero-orbit:hover .vero-orbit__shield { filter: drop-shadow(0 0 40px rgba(0, 163, 224, 0.7)) drop-shadow(0 0 70px rgba(0, 163, 224, 0.25)); } /* Disable icon hover effects on touch devices (no hover capability) */ @media (hover: none) { .vero-orbit__icon::after, .vero-orbit__icon::before { display: none; } .vero-orbit__icon { pointer-events: none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .vero-orbit__icon, .vero-orbit__center, .vero-orbit__ring, .vero-orbit__particles span { animation: none !important; } .vero-orbit__icon { transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle))); } } /* Mobile adjustments */ @media (max-width: 768px) { .vero-orbit { max-width: 300px; } .vero-orbit__icon { --radius: 130px; width: 32px; height: 32px; margin: -16px 0 0 -16px; } .vero-orbit__icon svg { width: 16px; height: 16px; } .vero-orbit__shield { width: 85px; height: 100px; } .vero-orbit__label { font-size: var(--fs-sm); letter-spacing: 2px; } } @media (max-width: 480px) { .vero-orbit { max-width: 240px; height: 240px; } .vero-orbit__icon { --radius: 90px; width: 28px; height: 28px; margin: -14px 0 0 -14px; } .vero-orbit__icon svg { width: 14px; height: 14px; } .vero-orbit__label { font-size: var(--fs-xs); letter-spacing: 1px; } } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-semibold); padding: 0.85rem 1.75rem; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; transition: all var(--transition-normal); text-decoration: none; line-height: 1; } .btn--primary { background-color: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .btn--primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-text-inverse); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--secondary { background-color: var(--color-text-inverse); color: var(--color-primary); border-color: var(--color-text-inverse); } .btn--secondary:hover { background-color: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-primary-dark); transform: translateY(-2px); } /* Button row — forces vertical alignment for icon + text buttons */ .share-experience__buttons { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--spacing-md); } .btn--outline { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--outline:hover { background-color: var(--color-primary); color: var(--color-text-inverse); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Outline-Variante für dunkle Hintergründe (Hero, CTA-Sektionen) */ .btn--outline-light { background-color: transparent; color: var(--color-text-inverse); border-color: var(--color-text-inverse); } .btn--outline-light:hover { background-color: var(--color-text-inverse); color: var(--color-primary); transform: translateY(-2px); } .btn--cta { background-color: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); } .btn--cta:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-inverse); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn--sm { font-size: var(--fs-sm); padding: 0.5rem 1rem; } .btn--lg { font-size: var(--fs-lg); padding: 1.1rem 2.5rem; } /* --- Cards --- */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); } .card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-2xl); border: 1px solid var(--color-border); transition: all var(--transition-normal); position: relative; overflow: hidden; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); } .card__icon { width: 56px; height: 56px; background: var(--color-primary-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-lg); font-size: var(--fs-2xl); color: var(--color-primary); } .card__title { font-size: var(--fs-xl); margin-bottom: var(--spacing-sm); } .card__text { color: var(--color-text-light); font-size: var(--fs-sm); margin-bottom: var(--spacing-lg); } .card__link { font-weight: var(--fw-semibold); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--spacing-xs); } .card__link::after { content: '\2192'; transition: transform var(--transition-fast); } .card__link:hover::after { transform: translateX(4px); } /* --- Blog Cards --- */ .blog-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); transition: all var(--transition-normal); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .blog-card__image { aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); display: flex; align-items: center; justify-content: center; color: var(--color-text-inverse); font-size: var(--fs-3xl); overflow: hidden; } .blog-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.3s ease; } .blog-card:hover .blog-card__image img { transform: scale(1.05); } .blog-card__content { padding: var(--spacing-xl); } .blog-card__meta { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); font-size: var(--fs-sm); color: var(--color-text-light); } .blog-card__category { display: inline-block; background: var(--color-primary-light); color: var(--color-primary); padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.5px; } .blog-card__title { font-size: var(--fs-lg); margin-bottom: var(--spacing-sm); overflow-wrap: break-word; word-break: break-word; hyphens: auto; -webkit-hyphens: auto; } .blog-card__title a { color: var(--color-primary-dark); } .blog-card__title a:hover { color: var(--color-primary); } .blog-card__excerpt { color: var(--color-text-light); font-size: var(--fs-sm); margin-bottom: var(--spacing-lg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* --- Testimonial Cards --- */ .testimonial-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-2xl); border: 1px solid var(--color-border); position: relative; } .testimonial-card::before { content: '\201C'; font-size: 4rem; color: var(--color-primary-light); font-family: Georgia, serif; position: absolute; top: 10px; left: 20px; line-height: 1; } .testimonial-card__text { font-style: italic; color: var(--color-text); margin-bottom: var(--spacing-lg); position: relative; z-index: 1; } .testimonial-card__author { display: flex; align-items: center; gap: var(--spacing-md); } .testimonial-card__avatar { width: 48px; height: 48px; background: var(--color-primary-light); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); color: var(--color-primary); font-size: var(--fs-lg); } .testimonial-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); } .testimonial-card__role { font-size: var(--fs-xs); color: var(--color-text-light); } .testimonial-card__stars { color: var(--color-warning); font-size: var(--fs-sm); margin-bottom: var(--spacing-sm); } /* --- Profile Photo --- */ .profile-photo { width: 320px; height: auto; border-radius: var(--radius-xl); object-fit: cover; border: 4px solid var(--color-primary-light); box-shadow: var(--shadow-lg); } .profile-photo-placeholder { width: 280px; height: 280px; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-primary-light), var(--color-bg-alt)); border: 4px solid var(--color-primary-light); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--spacing-sm); color: var(--color-primary); font-size: var(--fs-sm); } .profile-photo-placeholder svg { width: 64px; height: 64px; opacity: 0.5; } /* --- Trust Badges --- */ .trust-bar { display: flex; justify-content: center; gap: var(--spacing-3xl); flex-wrap: wrap; padding: var(--spacing-2xl) 0; } .trust-item { text-align: center; } .trust-item__number { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); color: var(--color-primary); line-height: 1; } .trust-item__label { font-size: var(--fs-sm); color: var(--color-text-light); margin-top: var(--spacing-xs); } /* --- CTA Section --- */ .cta-section { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); padding: var(--spacing-3xl) 0; text-align: center; color: var(--color-text-inverse); } .cta-section h2 { color: var(--color-text-inverse); } .cta-section p { opacity: 0.9; max-width: 600px; margin: 0 auto var(--spacing-xl); } /* --- Hero-Background: reusable modifier for sections --- Usage: add .hero-bg to any section to give it the page-header gradient. Each page can override via .page-header-- gradient if needed. */ .hero-bg { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent) 100%) !important; color: var(--color-text-inverse); overflow: hidden; position: relative; } /* Tiled plus-pattern — same as page-header::before */ .hero-bg::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } /* Decorative watermark — same layout as page-header::after */ .hero-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat, no-repeat, no-repeat; background-size: 290px, 155px, 82px; background-position: right -20px bottom -20px, left 6% top 10%, right 22% center; z-index: 0; } /* Ensure content sits above decorations */ .hero-bg > * { position: relative; z-index: 1; } .hero-bg h2, .hero-bg h3 { color: var(--color-text-inverse); } .hero-bg p { color: rgba(255, 255, 255, 0.9); } /* Per-page hero-bg: match the respective page-header gradient + watermark */ .page-header--ueber-uns ~ .about-body .hero-bg { background: linear-gradient(135deg, #003050 0%, #005090 50%, #0098c8 100%) !important; } .page-header--ueber-uns ~ .about-body .hero-bg::after { background-image: url("../images/logo.svg"), url("../images/logo.svg"), url("../images/logo.svg"); filter: brightness(0) invert(1); opacity: 0.12; } /* warum-kostenlos: shield + euro watermark */ .wk-cta.hero-bg::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 55 C90 82 70 98 50 108 C30 98 10 82 10 55 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cpath d='M50 18 L80 30 L80 52 C80 74 65 87 50 95 C35 87 20 74 20 52 L20 30 Z' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.08'/%3E%3Ctext x='50' y='72' text-anchor='middle' font-size='42' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.13'%3E%E2%82%AC%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 55 C90 82 70 98 50 108 C30 98 10 82 10 55 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cpath d='M50 18 L80 30 L80 52 C80 74 65 87 50 95 C35 87 20 74 20 52 L20 30 Z' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.04'/%3E%3Ctext x='50' y='72' text-anchor='middle' font-size='42' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.07'%3E%E2%82%AC%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 55 C90 82 70 98 50 108 C30 98 10 82 10 55 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cpath d='M50 18 L80 30 L80 52 C80 74 65 87 50 95 C35 87 20 74 20 52 L20 30 Z' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.02'/%3E%3Ctext x='50' y='72' text-anchor='middle' font-size='42' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.04'%3E%E2%82%AC%3C/text%3E%3C/svg%3E"); } /* tarifrechner: calculator/abacus watermark */ .tarif-cta-banner.hero-bg::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='70' height='80' rx='6' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Crect x='25' y='20' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.13'/%3E%3Crect x='53' y='20' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.13'/%3E%3Crect x='25' y='42' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.13'/%3E%3Crect x='53' y='42' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.13'/%3E%3Crect x='25' y='64' width='50' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='70' height='80' rx='6' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Crect x='25' y='20' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.07'/%3E%3Crect x='53' y='20' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.07'/%3E%3Crect x='25' y='42' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.07'/%3E%3Crect x='53' y='42' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.07'/%3E%3Crect x='25' y='64' width='50' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='70' height='80' rx='6' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Crect x='25' y='20' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.04'/%3E%3Crect x='53' y='20' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.04'/%3E%3Crect x='25' y='42' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.04'/%3E%3Crect x='53' y='42' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.04'/%3E%3Crect x='25' y='64' width='50' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* vertragsanalyse: document + magnifying glass watermark */ .page-header--vertragsanalyse ~ .cta-section.hero-bg::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='60' height='75' rx='3' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cline x1='25' y1='30' x2='70' y2='30' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='25' y1='42' x2='65' y2='42' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='25' y1='54' x2='68' y2='54' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='25' y1='66' x2='60' y2='66' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Ccircle cx='68' cy='68' r='18' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cline x1='82' y1='82' x2='95' y2='95' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='60' height='75' rx='3' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cline x1='25' y1='30' x2='70' y2='30' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='25' y1='42' x2='65' y2='42' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='25' y1='54' x2='68' y2='54' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='25' y1='66' x2='60' y2='66' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Ccircle cx='68' cy='68' r='18' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cline x1='82' y1='82' x2='95' y2='95' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='60' height='75' rx='3' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cline x1='25' y1='30' x2='70' y2='30' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='25' y1='42' x2='65' y2='42' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='25' y1='54' x2='68' y2='54' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='25' y1='66' x2='60' y2='66' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Ccircle cx='68' cy='68' r='18' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cline x1='82' y1='82' x2='95' y2='95' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* vero-sim-erklaert: shield + checkmark watermark */ .vse-cta.hero-bg::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 50 C90 75 70 90 50 98 C30 90 10 75 10 50 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cpolyline points='30%2C50 44%2C64 72%2C32' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 50 C90 75 70 90 50 98 C30 90 10 75 10 50 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cpolyline points='30%2C50 44%2C64 72%2C32' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 50 C90 75 70 90 50 98 C30 90 10 75 10 50 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cpolyline points='30%2C50 44%2C64 72%2C32' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* faq: ?! watermark */ .page-header--faq ~ .hero-bg::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='5' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.13'%3E%3F%3C/text%3E%3Ctext x='65' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.13'%3E!%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='5' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.07'%3E%3F%3C/text%3E%3Ctext x='65' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.07'%3E!%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='5' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.04'%3E%3F%3C/text%3E%3Ctext x='65' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.04'%3E!%3C/text%3E%3C/svg%3E"); background-size: 300px, 165px, 90px; } /* blog: pen/letter A watermark (CTA is descendant, not sibling) */ .page-header--blog-orbit .hero-bg::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 80 L50 10 L80 80 M35 55 L65 55' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 80 L50 10 L80 80 M35 55 L65 55' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.08'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 80 L50 10 L80 80 M35 55 L65 55' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.05'/%3E%3C/svg%3E"); } /* whatsapp: WhatsApp logo + chat bubbles watermark */ .page-header--whatsapp ~ .hero-bg::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 65 L15 25 C15 20 20 15 25 15 L75 15 C80 15 85 20 85 25 L85 55 C85 60 80 65 75 65 L35 65 L20 80 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 65 L15 25 C15 20 20 15 25 15 L75 15 C80 15 85 20 85 25 L85 55 C85 60 80 65 75 65 L35 65 L20 80 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.05'/%3E%3C/svg%3E"); background-size: 120px, 80px, 50px; } /* erfahrungsberichte: speech bubble watermark */ .page-header--erfahrungen ~ .hero-bg::after, .share-experience.hero-bg::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='15' width='70' height='50' rx='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cpath d='M20 65 L15 85 L40 65' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.13'/%3E%3Cline x1='18' y1='33' x2='55' y2='33' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='18' y1='45' x2='48' y2='45' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='15' width='70' height='50' rx='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cpath d='M20 65 L15 85 L40 65' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.07'/%3E%3Cline x1='18' y1='33' x2='55' y2='33' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='18' y1='45' x2='48' y2='45' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='15' width='70' height='50' rx='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cpath d='M20 65 L15 85 L40 65' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.04'/%3E%3Cline x1='18' y1='33' x2='55' y2='33' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='18' y1='45' x2='48' y2='45' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3C/svg%3E"); } [data-theme="dark"] .hero-bg { background: linear-gradient(135deg, #0b1a3a 0%, #0d2240 50%, #1a4a70 100%) !important; } /* --- CTA Box (in articles) --- */ .cta-box { background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); border: 2px solid var(--color-primary); border-radius: var(--radius-lg); padding: var(--spacing-2xl); text-align: center; margin: var(--spacing-2xl) 0; } .cta-box__title { color: var(--color-primary-dark); margin-bottom: var(--spacing-sm); } .cta-box__text { color: var(--color-text-light); margin-bottom: var(--spacing-lg); } /* --- Forms --- */ .form-group { margin-bottom: var(--spacing-lg); } .form-label { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-bottom: var(--spacing-sm); color: var(--color-text); } .form-label .required, .form-checkbox .required, .required { color: var(--color-error); font-weight: 700; } /* Legende unter den Formularen — erklärt den Stern */ .form-legend { font-size: 0.82rem; color: var(--color-text-light, #6b7280); margin: 0.35rem 0 0.9rem; line-height: 1.4; } .form-legend .required { margin-right: 0.15rem; } .form-input, .form-textarea, .form-select { width: 100%; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-text); background-color: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 85, 164, 0.15); } .form-textarea { min-height: 150px; resize: vertical; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .form-checkbox { display: flex; align-items: flex-start; gap: var(--spacing-sm); font-size: var(--fs-sm); cursor: pointer; line-height: 1.5; } .form-checkbox input[type="checkbox"] { margin-top: 3px; accent-color: var(--color-primary); flex-shrink: 0; } /* Text-Wrap in damit Link nicht zu eigenem Flex-Item wird und "Ich habe die Datenschutzerklärung…" sauber als Fließtext umbricht */ .form-checkbox > span { flex: 1; min-width: 0; } .form-checkbox > span a { font-weight: 600; white-space: nowrap; } .form-message { padding: var(--spacing-md); border-radius: var(--radius-md); font-size: var(--fs-sm); display: none; } .form-message--success { background-color: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .form-message--error { background-color: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; } /* --- Accordion / FAQ --- */ .accordion { max-width: var(--container-narrow); margin: 0 auto; } .accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm); overflow: hidden; } .accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-lg) var(--spacing-xl); background: var(--color-bg); border: none; cursor: pointer; font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-text); text-align: left; transition: background-color var(--transition-fast); } .accordion-header:hover { background-color: var(--color-bg-alt); } .accordion-header::after { content: '+'; font-size: var(--fs-xl); font-weight: var(--fw-light); color: var(--color-primary); transition: transform var(--transition-normal); flex-shrink: 0; margin-left: var(--spacing-md); } .accordion-item.active .accordion-header { background-color: var(--color-primary-light); color: var(--color-primary-dark); } .accordion-item.active .accordion-header::after { content: '\2212'; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); } .accordion-content__inner { padding: 0 var(--spacing-xl) var(--spacing-xl); color: var(--color-text-light); line-height: 1.8; } .accordion-content__inner a { font-weight: var(--fw-semibold); } /* --- Blog Article (blog-article class used in individual posts) --- */ .blog-article__image { margin: var(--spacing-xl) 0 var(--spacing-2xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .blog-article__image img { width: 100%; height: auto; display: block; object-fit: cover; } /* --- Blog Article (legacy .article class) --- */ .article { padding-top: calc(var(--header-height) + var(--spacing-3xl)); } .article__header { text-align: center; margin-bottom: var(--spacing-3xl); padding-bottom: var(--spacing-2xl); border-bottom: 1px solid var(--color-border); } .article__meta { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); font-size: var(--fs-sm); color: var(--color-text-light); } .article__body { max-width: var(--container-narrow); margin: 0 auto; font-size: var(--fs-md); line-height: 1.9; } .article__body h2 { margin-top: var(--spacing-3xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-border-light); } .article__body h3 { margin-top: var(--spacing-2xl); } .article__body ul, .article__body ol { margin: var(--spacing-md) 0 var(--spacing-xl); padding-left: var(--spacing-xl); } .article__body ul { list-style: disc; } .article__body ol { list-style: decimal; } .article__body li { margin-bottom: var(--spacing-sm); } .article__body blockquote { border-left: 4px solid var(--color-primary); padding: var(--spacing-lg) var(--spacing-xl); background: var(--color-primary-light); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--spacing-xl) 0; font-style: italic; } .article__body strong { color: var(--color-primary-dark); } /* Author Box */ .author-box { display: flex; align-items: center; gap: var(--spacing-xl); background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--spacing-xl); margin: var(--spacing-3xl) 0; border: 1px solid var(--color-border); } .author-box__image { width: 80px; height: 80px; border-radius: var(--radius-full); background: var(--color-primary-light); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); color: var(--color-primary); font-size: var(--fs-xl); } .author-box__name { font-weight: var(--fw-bold); margin-bottom: var(--spacing-xs); } .author-box__bio { font-size: var(--fs-sm); color: var(--color-text-light); } /* Related Articles */ .related-articles { margin-top: var(--spacing-3xl); padding-top: var(--spacing-2xl); border-top: 1px solid var(--color-border); } /* --- Page Header (for sub-pages) --- */ .page-header { position: relative; padding-top: calc(var(--header-height) + var(--spacing-xl)); padding-bottom: var(--spacing-xl); background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent) 100%); color: var(--color-text-inverse); text-align: center; overflow: hidden; } /* Base tiled plus-pattern (same as hero) for consistency */ .page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } /* Decorative symbols per page — 3 layers at different sizes/opacities covering full header */ .page-header::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat, no-repeat, no-repeat; background-size: 290px, 155px, 82px; background-position: right -20px bottom -20px, left 6% top 10%, right 22% center; } /* Blog — pen/letter A shape */ .page-header--blog::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 80 L50 10 L80 80 M35 55 L65 55' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 80 L50 10 L80 80 M35 55 L65 55' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.08'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 80 L50 10 L80 80 M35 55 L65 55' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.05'/%3E%3C/svg%3E"); } /* FAQ — ? and ! */ .page-header--faq::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='5' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.13'%3E%3F%3C/text%3E%3Ctext x='65' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.13'%3E!%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='5' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.07'%3E%3F%3C/text%3E%3Ctext x='65' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.07'%3E!%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='5' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.04'%3E%3F%3C/text%3E%3Ctext x='65' y='80' font-size='90' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.04'%3E!%3C/text%3E%3C/svg%3E"); background-size: 300px, 165px, 90px; } /* Erfahrungsberichte — speech bubble */ .page-header--erfahrungen::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='15' width='70' height='50' rx='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cpath d='M20 65 L15 85 L40 65' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.13'/%3E%3Cline x1='18' y1='33' x2='55' y2='33' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='18' y1='45' x2='48' y2='45' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='15' width='70' height='50' rx='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cpath d='M20 65 L15 85 L40 65' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.07'/%3E%3Cline x1='18' y1='33' x2='55' y2='33' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='18' y1='45' x2='48' y2='45' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='15' width='70' height='50' rx='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cpath d='M20 65 L15 85 L40 65' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.04'/%3E%3Cline x1='18' y1='33' x2='55' y2='33' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='18' y1='45' x2='48' y2='45' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* Kontakt — envelope */ .page-header--kontakt::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='25' width='84' height='55' rx='4' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cpath d='M8 25 L50 58 L92 25' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='25' width='84' height='55' rx='4' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cpath d='M8 25 L50 58 L92 25' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='25' width='84' height='55' rx='4' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cpath d='M8 25 L50 58 L92 25' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* Über uns — Hauptlogo (logo.svg) transparent */ .page-header--ueber-uns::after { background-image: url("../images/logo.svg"), url("../images/logo.svg"), url("../images/logo.svg"); filter: brightness(0) invert(1); opacity: 0.12; } /* VERO Sim — shield + checkmark (matches VERO Sim logo) */ .page-header--sim::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 50 C90 75 70 90 50 98 C30 90 10 75 10 50 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cpolyline points='30%2C50 44%2C64 72%2C32' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 50 C90 75 70 90 50 98 C30 90 10 75 10 50 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cpolyline points='30%2C50 44%2C64 72%2C32' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 50 C90 75 70 90 50 98 C30 90 10 75 10 50 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cpolyline points='30%2C50 44%2C64 72%2C32' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* Login — key */ .page-header--login::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='40' r='22' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Ccircle cx='35' cy='40' r='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cline x1='57' y1='40' x2='95' y2='40' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='80' y1='40' x2='80' y2='58' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='92' y1='40' x2='92' y2='52' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='40' r='22' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Ccircle cx='35' cy='40' r='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cline x1='57' y1='40' x2='95' y2='40' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='80' y1='40' x2='80' y2='58' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='92' y1='40' x2='92' y2='52' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='40' r='22' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Ccircle cx='35' cy='40' r='10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cline x1='57' y1='40' x2='95' y2='40' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='80' y1='40' x2='80' y2='58' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='92' y1='40' x2='92' y2='52' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* Legal pages — § */ .page-header--legal::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='82' font-size='95' font-family='Georgia%2Cserif' fill='%23ffffff' fill-opacity='0.13'%3E%C2%A7%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='82' font-size='95' font-family='Georgia%2Cserif' fill='%23ffffff' fill-opacity='0.07'%3E%C2%A7%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='82' font-size='95' font-family='Georgia%2Cserif' fill='%23ffffff' fill-opacity='0.04'%3E%C2%A7%3C/text%3E%3C/svg%3E"); background-size: 220px, 120px, 70px; } /* Vertragsanalyse — document + magnifying glass */ .page-header--vertragsanalyse::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='60' height='75' rx='3' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cline x1='25' y1='30' x2='70' y2='30' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='25' y1='42' x2='65' y2='42' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='25' y1='54' x2='68' y2='54' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Cline x1='25' y1='66' x2='60' y2='66' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.13'/%3E%3Ccircle cx='68' cy='68' r='18' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cline x1='82' y1='82' x2='95' y2='95' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='60' height='75' rx='3' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cline x1='25' y1='30' x2='70' y2='30' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='25' y1='42' x2='65' y2='42' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='25' y1='54' x2='68' y2='54' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Cline x1='25' y1='66' x2='60' y2='66' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.07'/%3E%3Ccircle cx='68' cy='68' r='18' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cline x1='82' y1='82' x2='95' y2='95' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='10' width='60' height='75' rx='3' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cline x1='25' y1='30' x2='70' y2='30' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='25' y1='42' x2='65' y2='42' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='25' y1='54' x2='68' y2='54' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Cline x1='25' y1='66' x2='60' y2='66' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.04'/%3E%3Ccircle cx='68' cy='68' r='18' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cline x1='82' y1='82' x2='95' y2='95' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* Color variations per page type */ .page-header--blog { background: linear-gradient(135deg, #002d5a 0%, #004a8f 50%, #0090c7 100%); } .page-header--faq { background: linear-gradient(135deg, #003366 0%, #0055a4 45%, #00b4d8 100%); } .page-header--kontakt { background: linear-gradient(135deg, #002244 0%, #004080 50%, #0088b0 100%); } /* Dark Mode Page Header Gradients (additional) */ [data-theme="dark"] .page-header--blog { background: linear-gradient(135deg, #0b1a3a 0%, #0d2240 50%, #1a4a70 100%); } [data-theme="dark"] .page-header--faq { background: linear-gradient(135deg, #0c1a3a 0%, #0d2240 45%, #1a5080 100%); } [data-theme="dark"] .page-header--kontakt { background: linear-gradient(135deg, #0a1220 0%, #0c1e40 50%, #1a4a60 100%); } .page-header--ueber-uns { background: linear-gradient(135deg, #003050 0%, #005090 50%, #0098c8 100%); } .page-header--erfahrungen { background: linear-gradient(135deg, #002850 0%, #004888 50%, #009cc0 100%); } .page-header--sim { background: linear-gradient(135deg, #001a40 0%, #003380 50%, #0070c0 100%); } .page-header--login { background: linear-gradient(135deg, #002840 0%, #004878 50%, #0088a8 100%); } /* Dark Mode Page Header Gradients */ [data-theme="dark"] .page-header--ueber-uns { background: linear-gradient(135deg, #0d2240 0%, #0f3860 50%, #1a5080 100%); } [data-theme="dark"] .page-header--erfahrungen { background: linear-gradient(135deg, #0c1a3a 0%, #0d2240 50%, #1a4a6a 100%); } [data-theme="dark"] .page-header--sim { background: linear-gradient(135deg, #0a1220 0%, #0b1e50 50%, #1a3a80 100%); } [data-theme="dark"] .page-header--login { background: linear-gradient(135deg, #0c1a30 0%, #0d2240 50%, #1a4a60 100%); } .page-header--legal { background: linear-gradient(135deg, #001e3a 0%, #003366 50%, #006699 100%); } [data-theme="dark"] .page-header--legal { background: linear-gradient(135deg, #0a1225 0%, #0c1a3a 50%, #1a4a6a 100%); } .page-header--vertragsanalyse { background: linear-gradient(135deg, #002550 0%, #004690 50%, #0098c8 100%); } .page-header h1 { color: var(--color-text-inverse); margin-bottom: var(--spacing-sm); position: relative; } .page-header p { opacity: 0.9; font-size: var(--fs-lg); position: relative; } /* --- About Page --- */ .about-intro { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-3xl); align-items: start; } /* --- Tags --- */ .tag { display: inline-block; background: var(--color-bg-alt); color: var(--color-text-light); padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); border: 1px solid var(--color-border); transition: all var(--transition-fast); } .tag:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); } .tags { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } /* --- Google Stars --- */ .google-rating { display: inline-flex; align-items: center; gap: var(--spacing-sm); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-lg); } .google-rating__stars { color: var(--color-warning); } .google-rating__text { font-size: var(--fs-sm); font-weight: var(--fw-semibold); } /* --- Footer --- */ /* Defensive: #site-footer bekommt die Basis-Styles auch OHNE .footer-Klasse, damit bei JS-Ausfall wenigstens die Footer-Fläche (inkl. Impressums-Bereich nach JS-Re-Render) erhalten bleibt. Siehe auch #site-header. */ .footer, #site-footer { background-color: var(--color-bg-dark); color: rgba(255, 255, 255, 0.8); padding: var(--spacing-4xl) 0 var(--spacing-xl); } /* Footer-Grid: 5-Spalten-Layout mit Subgrid für Trennlinien-Alignment. Jede Spalte hat .footer__col-top (oberer Inhalt) und optional .footer__col-bottom / .footer__partner (unterer Inhalt mit Trennlinie). NUR Spalten mit Sub-Sektion (.footer__col-bottom) nutzen Subgrid — sie bestimmen die Zeilenhöhen. Spalten OHNE Sub-Sektion (Navigation, Absicherungen) spannen als ein Block über beide Zeilen und beeinflussen die Zeilenhöhe NICHT. Damit orientiert sich die Trennlinie an der Mitte-Spalte (Top Links, 4 Items), nicht an der längsten Spalte. */ .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; grid-template-rows: auto auto; column-gap: var(--spacing-2xl); row-gap: 0; margin-bottom: var(--spacing-3xl); } /* Default: Spalten OHNE Sub-Sektion spannen beide Zeilen als Block. Ihr Inhalt beginnt oben und beeinflusst die Zeilenhöhen nicht. */ .footer__grid > div { grid-row: 1 / -1; } /* Spalten MIT Sub-Sektion: Subgrid aktivieren — deren col-top / col-bottom bestimmen die gemeinsame Zeile-1- und Zeile-2-Höhe. */ .footer__grid > div:has(.footer__col-bottom) { display: grid; grid-template-rows: subgrid; } /* Oberer Inhalt (Heading + Links) in Zeile 1, unterer Inhalt (Für Sie / Social / Partner) in Zeile 2 */ .footer__col-top { grid-row: 1; } .footer__col-bottom, .footer__partner { grid-row: 2; } .footer__brand-row { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .footer__brand .logo { height: 52px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); } .footer__brand-title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text-inverse); letter-spacing: -0.02em; } .footer__brand p { font-size: var(--fs-sm); opacity: 0.8; line-height: 1.7; } .footer__brand { display: flex; flex-direction: column; } .footer__col-bottom, .footer__partner { padding-top: var(--spacing-lg); border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer__partner { font-size: 0.75rem; opacity: 0.7; line-height: 1.6; } .footer__partner-label { display: block; margin-bottom: 1em; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; } .footer__partner-content { display: flex; align-items: center; gap: var(--spacing-md); } .footer__partner-logo { width: 56px; height: 56px; flex-shrink: 0; opacity: 0.3; transition: opacity 0.2s; } .footer__partner-logo-link:hover .footer__partner-logo { opacity: 0.6; } .footer__partner-name { font-weight: var(--fw-semibold); display: block; } .footer__partner-address { display: block; margin-bottom: 0.3em; } .footer__partner-link { color: var(--color-accent); text-decoration: none; font-weight: var(--fw-medium); transition: opacity 0.2s; } .footer__partner-link:hover { opacity: 0.8; text-decoration: underline; } .footer__heading { font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-inverse); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--spacing-lg); } /* border-top + padding-top jetzt auf .footer__col-bottom Wrapper */ .footer__heading--sub { margin-top: 0; } .footer__links li { margin-bottom: var(--spacing-sm); } .footer__links a { color: rgba(255, 255, 255, 0.7); font-size: calc(var(--fs-sm) * 0.9); transition: color var(--transition-fast); } .footer__links a:hover { color: var(--color-accent); } /* Footer: Highlighted Bubble-Links — gemeinsame Pill-Form, je eigene Farbwelt (Visuelle Brücke zu Zielseiten: VERO Sim = Cyan, WhatsApp = Grün, Mein Bereich = Obsidian-Gold). Alle drei Bubbles teilen Padding, Radius, Font-Weight und Transition — nur Background, Border und Text-Farbe variieren. */ /* VERO Sim — Bubble in Sim-Farbwelt (Deep-Blue → Cyan) */ .footer__links a.footer__link--vero { display: inline-flex; align-items: center; padding: 4px 12px; margin: 2px 0 2px -12px; border-radius: 999px; background: radial-gradient(ellipse at 30% 15%, rgba(0, 163, 224, 0.28) 0%, transparent 55%), linear-gradient(135deg, #001a40 0%, #003380 50%, #0070c0 100%); border: 1px solid rgba(0, 200, 255, 0.45); color: #7dd8ff; font-weight: var(--fw-semibold); letter-spacing: 0.02em; font-size: calc(var(--fs-sm) * 0.9); box-shadow: 0 0 10px rgba(0, 163, 224, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 163, 224, 0.2); text-shadow: 0 0 8px rgba(0, 200, 255, 0.18); transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease; } .footer__links a.footer__link--vero:hover { color: #b8ecff; border-color: rgba(0, 220, 255, 0.78); box-shadow: 0 0 18px rgba(0, 163, 224, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 200, 255, 0.32); transform: translateY(-1px); } /* WhatsApp Service — Bubble in WhatsApp-Grün */ .footer__links a.footer__link--whatsapp { display: inline-flex; align-items: center; padding: 4px 12px; margin: 2px 0 2px -12px; border-radius: 999px; background: radial-gradient(ellipse at 30% 15%, rgba(37, 211, 102, 0.22) 0%, transparent 55%), linear-gradient(135deg, #0a2218 0%, #103528 50%, #082218 100%); border: 1px solid rgba(37, 211, 102, 0.48); color: #4fe090; font-weight: var(--fw-semibold); letter-spacing: 0.02em; font-size: calc(var(--fs-sm) * 0.9); box-shadow: 0 0 10px rgba(37, 211, 102, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(37, 211, 102, 0.2); text-shadow: 0 0 8px rgba(37, 211, 102, 0.18); transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease; } .footer__links a.footer__link--whatsapp:hover { color: #a0f5c4; border-color: rgba(80, 255, 150, 0.8); box-shadow: 0 0 18px rgba(37, 211, 102, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(37, 211, 102, 0.32); transform: translateY(-1px); } /* Reduced-Motion: Kein Lift-Hover */ @media (prefers-reduced-motion: reduce) { .footer__links a.footer__link--vero, .footer__links a.footer__link--whatsapp { transition: color 0.2s ease, border-color 0.2s ease; } .footer__links a.footer__link--vero:hover, .footer__links a.footer__link--whatsapp:hover { transform: none; } } /* Footer: Mein Bereich — Obsidian-Gold Pill (Visuelle Brücke zu mein-bereich.html) */ .footer__links a.footer__link--mein-bereich { display: inline-flex; align-items: center; padding: 4px 12px; margin: 2px 0 2px -12px; border-radius: 999px; background: radial-gradient(ellipse at 30% 15%, rgba(70, 55, 110, 0.4) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(140, 90, 20, 0.28) 0%, transparent 60%), linear-gradient(135deg, #0b0d15 0%, #141826 50%, #060810 100%); border: 1px solid rgba(240, 200, 80, 0.42); color: #ffd966; font-weight: var(--fw-semibold); letter-spacing: 0.02em; font-size: calc(var(--fs-sm) * 0.9); box-shadow: 0 0 10px rgba(240, 200, 80, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(240, 200, 80, 0.15); text-shadow: 0 0 8px rgba(240, 200, 80, 0.15); transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease; } .footer__links a.footer__link--mein-bereich:hover { color: #ffeaa6; border-color: rgba(255, 220, 120, 0.72); box-shadow: 0 0 16px rgba(240, 200, 80, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(240, 200, 80, 0.28); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .footer__links a.footer__link--mein-bereich { transition: color 0.2s ease, border-color 0.2s ease; } .footer__links a.footer__link--mein-bereich:hover { transform: none; } } /* Footer: Allianz Homepage — Blauer Pill (Allianz-Blau #003781) */ .footer__links a.footer__link--allianz { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin: 2px 0 2px -12px; border-radius: 999px; background: radial-gradient(ellipse at 30% 15%, rgba(0, 85, 180, 0.25) 0%, transparent 55%), linear-gradient(135deg, #001833 0%, #003060 50%, #003781 100%); border: 1px solid rgba(0, 100, 200, 0.45); color: #80b8e8; font-weight: var(--fw-semibold); letter-spacing: 0.02em; font-size: calc(var(--fs-sm) * 0.9); box-shadow: 0 0 10px rgba(0, 55, 129, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 85, 180, 0.2); text-shadow: 0 0 8px rgba(0, 100, 200, 0.18); transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease; } .footer__links a.footer__link--allianz:hover { color: #a8d4ff; border-color: rgba(0, 140, 255, 0.72); box-shadow: 0 0 18px rgba(0, 55, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 85, 180, 0.25); transform: translateY(-1px); } .footer__link-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; } @media (prefers-reduced-motion: reduce) { .footer__links a.footer__link--allianz { transition: color 0.2s ease, border-color 0.2s ease; } .footer__links a.footer__link--allianz:hover { transform: none; } } /* Footer: Social icons — 3 columns × 2 rows, compact */ .footer__social { display: grid; grid-template-columns: repeat(3, 36px); gap: 8px; margin-top: 0; } .footer__social a { width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.25s ease; } .footer__social a svg { width: 16px; height: 16px; } /* Brand colors as default state */ .footer__social a[title="LinkedIn"] { background: #0A66C2; } .footer__social a[title="Instagram"] { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .footer__social a[title="Facebook"] { background: #1877F2; } .footer__social a[title="X"] { background: #333; } .footer__social a[title="YouTube"] { background: #FF0000; } .footer__social a[title="TikTok"] { background: #111; } /* Coming soon: grayed out */ .footer__social a.footer__social--disabled { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.25); pointer-events: none; cursor: default; } /* Hover: neutral black & white */ .footer__social a:hover { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); transform: translateY(-2px) scale(1.1); } /* Footer: WhatsApp CTA button */ .footer__whatsapp-btn { display: inline-flex; align-items: center; gap: 6px; background: #25D366; color: #fff; padding: 0.35rem 0.9rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; text-decoration: none; margin-top: 0; margin-bottom: 4px; transition: background var(--transition-fast), transform var(--transition-fast); } .footer__whatsapp-btn svg { width: 12px; height: 12px; flex-shrink: 0; } .footer__whatsapp-btn:hover { background: #1ebe5d; transform: translateY(-2px); } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--spacing-xl); display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: var(--spacing-sm); font-size: 0.75rem; opacity: 0.7; white-space: nowrap; } .footer__bottom-links { display: flex; align-items: center; gap: var(--spacing-md); } .footer__bottom-links a { color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; } .footer__bottom-links a:hover { color: var(--color-accent); } /* --- Cookie Consent --- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-bg-dark); color: var(--color-text-inverse); padding: var(--spacing-xl); z-index: 9999; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); transform: translateY(100%); transition: transform var(--transition-normal); } .cookie-banner.visible { transform: translateY(0); } .cookie-banner__content { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xl); flex-wrap: wrap; } .cookie-banner__text { flex: 1; font-size: var(--fs-sm); opacity: 0.9; } .cookie-banner__text a { color: var(--color-accent); text-decoration: underline; } .cookie-banner__actions { display: flex; gap: var(--spacing-sm); flex-shrink: 0; } /* --- Back to Top --- */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: all var(--transition-normal); z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--color-primary-dark); transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* --- Scroll Animations --- */ [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } [data-animate="fade"] { transform: none; } [data-animate="slide-left"] { transform: translateX(-30px); } [data-animate="slide-right"] { transform: translateX(30px); } [data-animate="scale"] { transform: scale(0.92); } [data-animate="zoom"] { transform: scale(0.85); } [data-animate].animated, [data-animate].is-visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); } /* Stagger delays */ [data-delay="100"] { transition-delay: 0.1s; } [data-delay="150"] { transition-delay: 0.15s; } [data-delay="200"] { transition-delay: 0.2s; } [data-delay="250"] { transition-delay: 0.25s; } [data-delay="300"] { transition-delay: 0.3s; } [data-delay="400"] { transition-delay: 0.4s; } [data-delay="450"] { transition-delay: 0.45s; } [data-delay="500"] { transition-delay: 0.5s; } [data-delay="600"] { transition-delay: 0.6s; } /* Accessibility: respect reduced motion */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Safety fallback: reveal content even if JS fails */ @keyframes safeReveal { to { opacity: 1; transform: none; } } [data-animate]:not(.is-visible):not(.animated) { animation: safeReveal 0.6s ease 1.5s forwards; } .blog-anim-reveal:not(.is-visible) { animation: safeReveal 0.6s ease 1.8s forwards; } /* Blog articles: critical content ALWAYS visible — never hide behind JS. Hero-Bild (__image) gehört hier rein, sonst torpediert [data-animate] opacity:0 den LCP (Largest Contentful Paint, Core Web Vital). */ .blog-article__header, .blog-article__image, .blog-article__content, .blog-article__cta, .blog-article__author, .blog-article__related, .blog-article__comments { opacity: 1 !important; transform: none !important; } /* Blog article subtitle (below H1) */ .blog-article__subtitle { font-size: var(--fs-lg); color: var(--color-accent); font-weight: 500; font-style: italic; margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-md); letter-spacing: 0.01em; } [data-theme="dark"] .blog-article__subtitle { color: var(--color-accent); } /* Blog CTA with video background (Matrix style) */ .blog-cta--matrix { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: var(--spacing-xl) var(--spacing-2xl); } .blog-cta__video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 0; pointer-events: none; } .blog-cta__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 20, 50, 0.82) 0%, rgba(0, 30, 70, 0.75) 40%, rgba(0, 20, 50, 0.85) 100% ); z-index: 1; } .blog-cta--matrix .cta-box, .blog-cta--matrix .cta-box--secondary { position: relative; z-index: 2; background: transparent !important; border: none !important; box-shadow: none !important; } .blog-cta--matrix .cta-box h3 { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .blog-cta--matrix .cta-box p, .blog-cta--matrix .cta-box--secondary p { color: rgba(255, 255, 255, 0.85); } .blog-cta--matrix .btn--outline { color: var(--color-accent); border-color: var(--color-accent); } .blog-cta--matrix .btn--outline:hover { background: var(--color-accent); color: #fff; } @media (prefers-reduced-motion: reduce) { .blog-cta__video-bg { display: none; } } @media (max-width: 768px) { .blog-cta--matrix { border-radius: 0; margin-left: calc(-1 * var(--spacing-md)); margin-right: calc(-1 * var(--spacing-md)); } } /* Black Swan CTA variant — dramatischer Kontrast zum dunklen Schwan-Motiv */ .blog-cta--blackswan { padding: var(--spacing-2xl) var(--spacing-2xl); min-height: 480px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .blog-cta--blackswan .blog-cta__video-bg { filter: brightness(0.92) contrast(1.08) saturate(0.9); animation: bsVideoDrift 30s ease-in-out infinite alternate; } @keyframes bsVideoDrift { 0% { transform: translate(-50%, -50%) scale(1.00); } 100% { transform: translate(-50%, -50%) scale(1.06); } } /* Overlay: stark abgedunkelt am Rand (Vignette), mittig etwas transparenter damit der Schwan durchkommt */ .blog-cta--blackswan .blog-cta__overlay { background: radial-gradient(ellipse at center, rgba(0, 10, 30, 0.55) 0%, rgba(0, 10, 30, 0.80) 55%, rgba(0, 5, 20, 0.92) 100%), linear-gradient(180deg, rgba(0, 15, 40, 0.45) 0%, rgba(0, 10, 30, 0.70) 100%); } /* Feiner Akzent-Rand als dramatisches Detail */ .blog-cta--blackswan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, 0.55); z-index: 2; } .blog-cta--blackswan .cta-box h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75); letter-spacing: -0.01em; } .blog-cta--blackswan .cta-box p, .blog-cta--blackswan .cta-box--secondary p { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); } .blog-cta--blackswan .btn--primary { box-shadow: 0 8px 24px rgba(0, 163, 224, 0.35), 0 0 0 0 rgba(0, 163, 224, 0.4); animation: bsButtonBreathe 4s ease-in-out infinite; } @keyframes bsButtonBreathe { 0%, 100% { box-shadow: 0 8px 24px rgba(0, 163, 224, 0.35), 0 0 0 0 rgba(0, 163, 224, 0.4); transform: scale(1); } 50% { box-shadow: 0 8px 28px rgba(0, 163, 224, 0.5), 0 0 0 14px rgba(0, 163, 224, 0); transform: scale(1.02); } } .blog-cta--blackswan .btn--primary:hover { animation-play-state: paused; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .blog-cta--blackswan .blog-cta__video-bg, .blog-cta--blackswan .btn--primary { animation: none; } } /* Memento Mori CTA variant — warmes Marmor/Antike-Feeling, zeitlose Ruhe statt Drama */ .blog-cta--memento { padding: var(--spacing-2xl) var(--spacing-2xl); min-height: 480px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 20px 60px rgba(30, 20, 10, 0.32); } .blog-cta--memento .blog-cta__video-bg { filter: brightness(0.95) contrast(1.05) saturate(1.05); animation: mmVideoDrift 32s ease-in-out infinite alternate; } @keyframes mmVideoDrift { 0% { transform: translate(-50%, -50%) scale(1.00); } 100% { transform: translate(-50%, -50%) scale(1.05); } } /* Overlay: warme Bronze/Sepia-Vignette statt kaltem Blau — Mitte transparenter, damit das Motiv durchkommt */ .blog-cta--memento .blog-cta__overlay { background: radial-gradient(ellipse at center, rgba(30, 18, 8, 0.45) 0%, rgba(25, 15, 5, 0.72) 55%, rgba(15, 8, 2, 0.88) 100%), linear-gradient(180deg, rgba(45, 28, 12, 0.40) 0%, rgba(20, 12, 4, 0.65) 100%); } /* Feiner Bronze-Glow-Rand */ .blog-cta--memento::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, 0.55); z-index: 2; } .blog-cta--memento .cta-box h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75); letter-spacing: -0.01em; color: #fff; } .blog-cta--memento .cta-box p, .blog-cta--memento .cta-box--secondary p { color: rgba(255, 248, 235, 0.94); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); } /* Button mit warmem Bronze-Pulse statt kaltem Cyan */ .blog-cta--memento .btn--primary { box-shadow: 0 8px 24px rgba(0, 163, 224, 0.35), 0 0 0 0 rgba(0, 163, 224, 0.4); animation: mmButtonBreathe 4.5s ease-in-out infinite; } @keyframes mmButtonBreathe { 0%, 100% { box-shadow: 0 8px 24px rgba(0, 163, 224, 0.35), 0 0 0 0 rgba(0, 163, 224, 0.4); transform: scale(1); } 50% { box-shadow: 0 8px 28px rgba(0, 163, 224, 0.5), 0 0 0 14px rgba(0, 163, 224, 0); transform: scale(1.02); } } .blog-cta--memento .btn--primary:hover { animation-play-state: paused; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .blog-cta--memento .blog-cta__video-bg, .blog-cta--memento .btn--primary { animation: none; } } /* Blog article hero image */ .blog-article__hero { margin: var(--spacing-lg) 0 var(--spacing-xl); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } .blog-article__hero-img { width: 100%; height: auto; display: block; object-fit: cover; object-position: top center; max-height: 560px; } @media (max-width: 768px) { .blog-article__hero { margin: var(--spacing-md) calc(-1 * var(--spacing-md)); border-radius: 0; } .blog-article__hero-img { max-height: 400px; } } /* --- Legal Pages --- */ .legal-content { padding: var(--spacing-3xl) 0; } .legal-content h2 { margin-top: var(--spacing-2xl); font-size: var(--fs-xl); } .legal-content h3 { margin-top: var(--spacing-xl); font-size: var(--fs-lg); } .legal-content p, .legal-content li { font-size: var(--fs-sm); color: var(--color-text-light); } .legal-content ul { list-style: disc; padding-left: var(--spacing-xl); margin-bottom: var(--spacing-md); } .legal-content .placeholder { background: var(--color-warning); color: #000; padding: 2px 6px; border-radius: var(--radius-sm); font-weight: var(--fw-bold); font-size: var(--fs-sm); } /* --- Utilities --- */ .text-center { text-align: center; } .text-left { text-align: left; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-md); } .mb-2 { margin-bottom: var(--spacing-xl); } .mb-3 { margin-bottom: var(--spacing-2xl); } .mt-2 { margin-top: var(--spacing-xl); } .mt-3 { margin-top: var(--spacing-2xl); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1280px) { .header__brand-tagline { display: none; } .header__brand-name { font-size: var(--fs-lg); } .header__logo .logo { height: 68px; } .header.scrolled .header__logo .logo { height: 48px; } } @media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); } .footer__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: var(--spacing-2xl); } .footer__grid > div { grid-row: span 1; display: block; } .hero__shield { display: none; } .hero__grid { flex-direction: column; } .hero__visual { max-width: 480px; margin: 0 auto; } .about-intro { grid-template-columns: 1fr; text-align: center; } .about-intro .profile-photo, .about-intro .profile-photo-placeholder { margin: 0 auto; } } @media (max-width: 768px) { :root { --fs-4xl: 2.25rem; --fs-5xl: 2.75rem; --fs-3xl: 1.75rem; --fs-2xl: 1.5rem; --header-height: 82px; /* +10px (5 oben / 5 unten) damit Logo nicht pixelgenau anstößt */ } .section { padding: var(--spacing-3xl) 0; } .container { padding: 0 var(--spacing-md); } /* Mobile Navigation */ .header__menu-toggle { display: flex; } .header__brand-tagline { display: none; } .header__brand-name { font-size: var(--fs-lg); } .header__brand-tagline { font-size: var(--fs-xs); letter-spacing: 0.8px; } .header__logo .logo { height: 68px; } .header.scrolled .header__logo .logo { height: 48px; } .header__nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh; /* Fallback für alte Browser */ height: 100dvh; /* Dynamic Viewport Height — fixt iOS-Adressleisten-Bug */ background: var(--color-bg); box-shadow: var(--shadow-xl); padding: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-xl) var(--spacing-xl); transition: right var(--transition-normal); overflow-y: auto; z-index: 1000; } body.nav-open .header__nav { right: 0; } .header__nav-list { flex-direction: column; gap: 0; } .header__nav-link { display: block; padding: var(--spacing-md) var(--spacing-lg); font-size: var(--fs-base); border-bottom: 1px solid var(--color-border-light); } .header__nav-link--cta { margin-top: var(--spacing-md); text-align: center; } .header__nav-link--login { margin-top: var(--spacing-sm); margin-left: 0; text-align: center; } /* Such-Icon in der Nav-Liste auf Mobile ausblenden — es gibt bereits die feste Lupe im Header (.header__search-btn--mobile). */ .header__nav-list > li:has(> button.header__search-btn) { display: none; } /* Mobile Nav Overlay */ body.nav-open::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; } .hero { min-height: 70vh; } .hero__actions { flex-direction: column; } .card-grid { grid-template-columns: 1fr; } /* ---- Footer — Mobile-Optimierung (Desktop bleibt außerhalb der MQ) ---- 2-Spalten-Grid näher am Desktop-Layout. Brand-Header spannt beide Spalten oben, Partner-Box spannt beide Spalten unten. Dazwischen 2×2-Matrix: Navigation | Top Links (+Für Sie) / Absicherungen | Kontakt (+Social). */ .footer { padding: var(--spacing-2xl) 0 var(--spacing-lg); } .footer__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; column-gap: var(--spacing-lg); row-gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); /* Horizontaler Puffer, damit Pill-Buttons (VERO Sim, WhatsApp etc.) mit ihrem negativen margin-left:-12px nicht am Container-Rand kleben. */ padding: 0 12px; } /* Brand-Wrapper auflösen: col-top (Header) und footer__partner werden direkte Grid-Kinder, damit sie über beide Spalten spannen können. Extra-Specificity (.footer .footer__grid > .footer__brand) schlägt die Desktop-Subgrid-Regel (.footer__grid > div:has(.footer__col-bottom)). */ .footer .footer__grid > .footer__brand { display: contents; } /* Andere Spalten: keine Subgrid-Zeilensteuerung mehr, schlichter Block */ .footer__grid > div:not(.footer__brand) { grid-row: auto; display: block; } /* Brand-Header (Logo+Titel+Slogan) spannt beide Spalten ganz oben, zentriert */ .footer__brand > .footer__col-top { grid-column: 1 / -1; order: 0; text-align: center; } .footer__brand-row { justify-content: center; } .footer__brand p { max-width: 44ch; margin: 0 auto; } /* Partner-Box spannt beide Spalten ganz unten, horizontales Layout (Logo+Text) */ .footer__partner { grid-column: 1 / -1; order: 10; text-align: center; } .footer__partner-label { margin-bottom: 0.6em; } .footer__partner-content { flex-direction: row; justify-content: center; align-items: center; gap: var(--spacing-md); } .footer__partner-details { order: 1; /* Text links, Logo rechts — wie Desktop */ text-align: left; } .footer__partner-logo-link { order: 2; } .footer__partner-logo { width: 48px; height: 48px; } /* Überschriften kompakter */ .footer__heading { margin-bottom: var(--spacing-sm); font-size: calc(var(--fs-sm) * 0.95); } /* Link-Listen: weniger vertikaler Abstand pro Eintrag */ .footer__links li { margin-bottom: 0.35rem; } .footer__links a { font-size: calc(var(--fs-sm) * 0.9); } /* Col-bottom Trennlinie (Für Sie, Partner, Social): schmalerer Abstand */ .footer__col-bottom, .footer__partner { padding-top: calc(var(--spacing-md) + 5px); margin-top: calc(var(--spacing-md) + 5px); } /* +5px Luft zwischen Brand-Header und Start der Navi/Top-Links-Spalten sowie zwischen Partner und den nachfolgenden Bottom-Links. */ .footer__brand > .footer__col-top { margin-bottom: 5px; } .footer__partner { margin-bottom: 5px; } /* Social-Icons: alle 6 in einer Reihe, leicht kompakter */ .footer__social { grid-template-columns: repeat(6, 32px); gap: 6px; } .footer__social a { width: 32px; height: 32px; } .footer__bottom { flex-direction: column; text-align: center; flex-wrap: wrap; white-space: normal; gap: var(--spacing-md); } /* Mobile: Bottom-Bar in exakt 2 logische Zeilen — Zeile 1 = Copyright, Zeile 2 = Links kompakt zentriert. Desktop bleibt unberührt (außerhalb der Media Query). */ .footer__bottom > span { display: block; line-height: 1.45; } .footer__bottom-links { flex-wrap: wrap; justify-content: center; row-gap: 0.45rem; column-gap: 0.9rem; font-size: 0.7rem; } .footer__bottom-links a { font-size: 0.7rem; white-space: nowrap; } .footer__bottom-links .darkmode-footer-toggle { padding: 3px 10px 3px 8px; } .footer__bottom-links .darkmode-footer-toggle__label { font-size: calc(var(--fs-sm) * 0.8); } .trust-bar { gap: var(--spacing-xl); } .author-box { flex-direction: column; text-align: center; } .cookie-banner__content { flex-direction: column; text-align: center; } .article__meta { flex-wrap: wrap; justify-content: center; } .profile-photo, .profile-photo-placeholder { width: 240px; height: auto; } .about-intro { gap: var(--spacing-xl); } .testimonial-card { padding: var(--spacing-xl); } .header__search-btn { width: 44px; height: 44px; } /* Mobile-Lupe im Header: zwischen Logo und Burger sichtbar machen. margin-left:auto schiebt sie nach rechts (Logo links, Lupe+Burger rechts). */ .header__search-btn--mobile { display: flex; width: 40px; height: 40px; } .cta-box { padding: var(--spacing-lg); } .form-input, .form-textarea, .form-select { font-size: 16px; } .footer { padding: var(--spacing-2xl) 0 var(--spacing-lg); } } @media (max-width: 600px) { .hero__actions { flex-direction: column; align-items: stretch; } .hero__actions .btn { width: 100%; justify-content: center; } .newsletter-form { flex-direction: column; } .newsletter-form .btn { width: 100%; } } @media (max-width: 480px) { :root { --fs-5xl: 2rem; --fs-4xl: 1.75rem; --header-height: 74px; /* +10px (5 oben / 5 unten) — Logo atmet, Header versteckt sich beim Scrollen */ } .hero { min-height: 50vh; } .btn--lg { font-size: var(--fs-base); padding: 0.85rem 1.5rem; } .section { padding: var(--spacing-2xl) 0; } .container { padding: 0 var(--spacing-sm); } .testimonial-card { padding: var(--spacing-lg); } .blog-card__image { aspect-ratio: 3 / 2; } .blog-card__body { padding: var(--spacing-md); } .floating-sidebar__tooltip { display: none; } .cta-box { padding: var(--spacing-md); } .card { padding: var(--spacing-lg); } } @media (max-width: 480px) { :root { --fs-3xl: 1.5rem; --fs-2xl: 1.25rem; } } @media (max-width: 375px) { :root { --fs-5xl: 1.75rem; --fs-4xl: 1.5rem; --fs-3xl: 1.25rem; --fs-2xl: 1.125rem; } } /* --- Floating Sidebar Buttons (right side) --- */ .floating-sidebar { position: fixed; right: 30px; bottom: 160px; z-index: 998; display: flex; flex-direction: column; /* Wichtig: sorgt dafuer, dass Buttons unterschiedlicher Breite mittig untereinander stehen */ align-items: center; gap: 10px; } /* Sidebar buttons — unified base styles */ .floating-sidebar__btn { width: 46px; height: 46px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease; text-decoration: none; border: 2px solid transparent; position: relative; } /* hidden-Attribut respektieren: das HTML-Default "display:none" wird sonst durch unser "display:flex" im Base-Style ueberschrieben. */ .floating-sidebar__btn[hidden] { display: none !important; } /* Unified hover: gentle scale + brand-colored border glow */ .floating-sidebar__btn:hover { transform: scale(1.1); } /* --- Home --- */ .floating-sidebar__btn--home { background: var(--color-surface); border-color: var(--color-border); } .floating-sidebar__btn--home img { width: 26px; height: 26px; object-fit: contain; } .floating-sidebar__btn--home:hover { border-color: var(--color-primary); box-shadow: 0 0 12px rgba(0, 85, 164, 0.35); } [data-theme="dark"] .floating-sidebar__btn--home img { filter: brightness(0) invert(1); } [data-theme="dark"] .floating-sidebar__btn--home:hover { border-color: var(--color-accent); box-shadow: 0 0 12px rgba(0, 163, 224, 0.35); } /* --- VERO Sim --- */ .floating-sidebar__btn--sim { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); color: #fff; padding: 0; } .floating-sidebar__btn--sim:hover { border-color: var(--color-accent); box-shadow: 0 0 12px rgba(0, 163, 224, 0.4); } .floating-sidebar__btn--sim img { width: 30px; height: 30px; object-fit: contain; } [data-theme="dark"] .floating-sidebar__btn--sim { background: linear-gradient(135deg, #0a1628 0%, #1a2a44 100%); border-color: rgba(0, 163, 224, 0.3); } [data-theme="dark"] .floating-sidebar__btn--sim img { filter: brightness(1.6) saturate(1.3); } [data-theme="dark"] .floating-sidebar__btn--sim:hover { border-color: var(--color-accent); box-shadow: 0 0 14px rgba(0, 163, 224, 0.5); } /* --- WhatsApp --- */ .floating-sidebar__btn--whatsapp { background: #25D366; color: #fff; border-color: transparent; } .floating-sidebar__btn--whatsapp:hover { border-color: #fff; box-shadow: var(--shadow-lg); } .floating-sidebar__btn--whatsapp svg { width: 22px; height: 22px; fill: currentColor; } /* --- Tarifrechner (neutral, in Primary-Family) --- */ .floating-sidebar__btn--tarif { background: var(--color-surface); border-color: var(--color-border); color: var(--color-primary); } .floating-sidebar__btn--tarif:hover { border-color: var(--color-primary); color: var(--color-primary-dark); box-shadow: 0 0 12px rgba(0, 85, 164, 0.35); } .floating-sidebar__btn--tarif svg { width: 22px; height: 22px; } [data-theme="dark"] .floating-sidebar__btn--tarif { background: var(--color-surface); border-color: var(--color-border); color: var(--color-accent); } [data-theme="dark"] .floating-sidebar__btn--tarif:hover { border-color: var(--color-accent); box-shadow: 0 0 12px rgba(0, 163, 224, 0.35); } /* --- Mein Bereich — Obsidian-Gold (Visuelle Brücke zu mein-bereich.html) --- */ .floating-sidebar__btn--mein-bereich { background: radial-gradient(ellipse at 30% 15%, rgba(70, 55, 110, 0.5) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(140, 90, 20, 0.32) 0%, transparent 60%), linear-gradient(135deg, #0b0d15 0%, #141826 50%, #060810 100%); border-color: rgba(240, 200, 80, 0.45); color: #ffd966; box-shadow: var(--shadow-md), 0 0 12px rgba(240, 200, 80, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(240, 200, 80, 0.18); } .floating-sidebar__btn--mein-bereich:hover { border-color: rgba(255, 220, 120, 0.75); color: #ffeaa6; box-shadow: var(--shadow-lg), 0 0 20px rgba(240, 200, 80, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(240, 200, 80, 0.3); } .floating-sidebar__btn--mein-bereich svg { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(240, 200, 80, 0.55)); } .floating-sidebar__btn--mein-bereich:hover svg { filter: drop-shadow(0 0 7px rgba(255, 215, 100, 0.85)); } [data-theme="dark"] .floating-sidebar__btn--mein-bereich { border-color: rgba(240, 200, 80, 0.58); box-shadow: var(--shadow-md), 0 0 16px rgba(240, 200, 80, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(240, 200, 80, 0.22); } [data-theme="dark"] .floating-sidebar__btn--mein-bereich:hover { border-color: rgba(255, 220, 120, 0.9); box-shadow: var(--shadow-lg), 0 0 26px rgba(240, 200, 80, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(240, 200, 80, 0.35); } /* --- App installieren (PWA) — 50% groesser, Logo + Download-Pfeil nebeneinander --- */ .floating-sidebar__btn--install { /* 50% groesser als Basis (46px * 1.5 = 69px) */ width: 69px; height: 69px; /* Logo links + Arrow rechts nebeneinander */ gap: 4px; padding: 0 6px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); border-color: rgba(255, 255, 255, 0.35); color: #fff; box-shadow: var(--shadow-md), 0 0 16px rgba(0, 163, 224, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 51, 102, 0.35); /* dezente Pulsation, damit der Button "lebt", aber nicht stoert */ animation: sv-install-pulse 2.8s ease-in-out infinite; } .floating-sidebar__btn--install:hover { transform: scale(1.08); border-color: #fff; box-shadow: var(--shadow-lg), 0 0 26px rgba(0, 163, 224, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 51, 102, 0.4); animation-play-state: paused; } /* Logo links: selbstversichert-Schild, kontrastreich auf Blau-Gradient */ .floating-sidebar__btn--install-logo { width: 30px; height: 30px; object-fit: contain; /* Das Logo ist dunkel/kontur; wir invertieren es fuer den blauen Grund */ filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); flex-shrink: 0; pointer-events: none; } /* Download-Pfeil rechts */ .floating-sidebar__btn--install-arrow { width: 20px; height: 20px; stroke: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); flex-shrink: 0; pointer-events: none; } /* Dark Mode: Akzent dominiert, leicht dunkler Kontrastgrund */ [data-theme="dark"] .floating-sidebar__btn--install { background: linear-gradient(135deg, #0a1628 0%, var(--color-accent) 100%); border-color: rgba(0, 163, 224, 0.55); box-shadow: var(--shadow-md), 0 0 20px rgba(0, 163, 224, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.45); } [data-theme="dark"] .floating-sidebar__btn--install:hover { border-color: #fff; box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 163, 224, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.5); } @keyframes sv-install-pulse { 0%, 100% { box-shadow: var(--shadow-md), 0 0 14px rgba(0, 163, 224, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 51, 102, 0.35); } 50% { box-shadow: var(--shadow-md), 0 0 22px rgba(0, 163, 224, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 51, 102, 0.4); } } /* A11y: Reduced Motion respektieren */ @media (prefers-reduced-motion: reduce) { .floating-sidebar__btn--install { animation: none; } } /* --- Dark Mode toggle --- */ .floating-sidebar__btn--darkmode { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-light); } .floating-sidebar__btn--darkmode:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 12px rgba(0, 163, 224, 0.3); } .floating-sidebar__btn--darkmode svg { width: 20px; height: 20px; } /* Dark mode active state */ [data-theme="dark"] .floating-sidebar__btn--darkmode { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } [data-theme="dark"] .floating-sidebar__btn--darkmode:hover { border-color: #fff; box-shadow: 0 0 12px rgba(0, 163, 224, 0.45); } /* --- Search (global) — sitzt unter dem Dark-Mode-Toggle. Ehemals in der Desktop-Headerleiste, seit 2026-04-20 ausschließlich hier. */ .floating-sidebar__btn--search { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-light); } .floating-sidebar__btn--search:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 12px rgba(0, 85, 164, 0.3); } .floating-sidebar__btn--search svg { width: 20px; height: 20px; } [data-theme="dark"] .floating-sidebar__btn--search { background: var(--color-bg-dark, var(--color-surface)); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .floating-sidebar__btn--search:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 12px rgba(0, 163, 224, 0.35); } .floating-sidebar__btn--blogback { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .floating-sidebar__btn--blogback:hover { border-color: var(--color-accent); background: var(--color-primary-dark); box-shadow: 0 0 12px rgba(0, 85, 164, 0.45); } .floating-sidebar__btn--blogback svg { width: 20px; height: 20px; } [data-theme="dark"] .floating-sidebar__btn--blogback { background: var(--color-accent); border-color: var(--color-accent); } [data-theme="dark"] .floating-sidebar__btn--blogback:hover { border-color: #fff; box-shadow: 0 0 12px rgba(0, 163, 224, 0.45); } .floating-sidebar__tooltip { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); background: var(--color-bg-dark); color: var(--color-text-inverse); padding: 4px 10px; border-radius: var(--radius-md); font-size: var(--fs-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); font-weight: var(--fw-medium); } .floating-sidebar__btn:hover .floating-sidebar__tooltip { opacity: 1; } /* --- Toggle-Button (Aufklapp) — Premium-Look mit Glow + Rising Dots --- Default: auf Desktop komplett versteckt. Nur Mobile ≤768px blendet ihn ein. */ .floating-sidebar__btn--toggle { display: none; position: relative; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); border: 2px solid transparent; color: #fff; cursor: pointer; overflow: visible; /* Basis-Glow als zweischichtiger Shadow — unter der Pulse-Animation. */ box-shadow: var(--shadow-md), 0 0 0 0 rgba(0, 163, 224, 0); } .floating-sidebar__btn--toggle:hover { transform: scale(1.1); box-shadow: var(--shadow-lg), 0 0 24px rgba(0, 163, 224, 0.65); } /* SVG-Icon: Dots, Chevron und Close liegen übereinander und werden per opacity + transform crossgefadet. */ .floating-sidebar__btn--toggle-icon { width: 24px; height: 24px; position: relative; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .floating-sidebar__btn--toggle-icon .toggle-dots, .floating-sidebar__btn--toggle-icon .toggle-chevron, .floating-sidebar__btn--toggle-icon .toggle-close { transform-origin: 12px 12px; transition: opacity 0.32s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Closed-State: Dots sichtbar, Chevron als dezenter Indikator darüber, Close unsichtbar */ .floating-sidebar__btn--toggle-icon .toggle-dots { opacity: 1; } .floating-sidebar__btn--toggle-icon .toggle-chevron { opacity: 0; /* Default versteckt — nur bei Hover/Focus als Hinweis, s.u. */ transform: translateY(-4px) scale(0.85); } .floating-sidebar__btn--toggle-icon .toggle-close { opacity: 0; transform: rotate(-45deg) scale(0.7); } /* Hover zeigt dezent den Chevron (subtile Affordance: "da geht was auf") */ .floating-sidebar__btn--toggle:hover .toggle-dots { opacity: 0.3; } .floating-sidebar__btn--toggle:hover .toggle-chevron { opacity: 1; transform: translateY(-9px) scale(1); } /* Open-State: Dots + Chevron weg, Close sichtbar */ .floating-sidebar.is-open .floating-sidebar__btn--toggle-icon .toggle-dots { opacity: 0; transform: scale(0.6); } .floating-sidebar.is-open .floating-sidebar__btn--toggle-icon .toggle-chevron { opacity: 0; transform: translateY(-14px) scale(0.6); } .floating-sidebar.is-open .floating-sidebar__btn--toggle-icon .toggle-close { opacity: 1; transform: rotate(0deg) scale(1); } /* Dark mode: Gradient leicht angepasst */ [data-theme="dark"] .floating-sidebar__btn--toggle { background: linear-gradient(135deg, #0065c4 0%, var(--color-accent) 100%); border-color: transparent; color: #fff; } /* Ring-Glow — pseudo-Element pulsiert als radialer Lichtring um den Button. Nur auf Mobile aktiv (Desktop sieht den Button eh nicht). */ .floating-sidebar__btn--toggle::before { content: ''; position: absolute; inset: -6px; border-radius: var(--radius-full); background: radial-gradient(circle at center, rgba(0, 163, 224, 0.55) 0%, rgba(0, 163, 224, 0.15) 45%, transparent 75%); opacity: 0; pointer-events: none; z-index: -1; } /* Rising-Dots-Animation: signalisiert "da steigt was auf" — Punkte von unten nach oben subtil pulsen lassen, so dass Nutzer sofort versteht: hier klappt etwas nach oben auf. */ .floating-sidebar__btn--toggle-icon .toggle-dots circle { transform-origin: center; transform-box: fill-box; } /* ================================================================ Mobile-Only: Toggle aktiv, Glow-Animation, Rising-Dots, Collapsibles ein-/ausklappen mit Stagger ================================================================ */ @media (max-width: 768px) { /* Toggle-Button sichtbar + Premium-Pulse */ .floating-sidebar__btn--toggle { display: flex; animation: togglePulseGlow 2.8s ease-in-out infinite; } .floating-sidebar__btn--toggle::before { animation: toggleRingBreathe 2.8s ease-in-out infinite; } /* Rising-Dots: von unten (nth 3) nach oben (nth 1) gestaffelt */ .floating-sidebar__btn--toggle-icon .toggle-dots circle { animation: toggleDotsRise 1.9s ease-in-out infinite; } .floating-sidebar__btn--toggle-icon .toggle-dots circle:nth-child(3) { animation-delay: 0ms; } .floating-sidebar__btn--toggle-icon .toggle-dots circle:nth-child(2) { animation-delay: 180ms; } .floating-sidebar__btn--toggle-icon .toggle-dots circle:nth-child(1) { animation-delay: 360ms; } /* Sobald offen: Pulse + Glow beruhigen sich, Fokus liegt auf den ausgeklappten Buttons */ .floating-sidebar.is-open .floating-sidebar__btn--toggle, .floating-sidebar.is-closing .floating-sidebar__btn--toggle { animation: none; box-shadow: var(--shadow-md), 0 0 14px rgba(0, 163, 224, 0.35); } .floating-sidebar.is-open .floating-sidebar__btn--toggle::before, .floating-sidebar.is-closing .floating-sidebar__btn--toggle::before { animation: none; opacity: 0; } .floating-sidebar.is-open .floating-sidebar__btn--toggle-icon .toggle-dots circle { animation: none; } /* Default: Collapsibles versteckt */ .floating-sidebar__btn--collapsible { display: none; } /* OPEN: Staggered Pop-In mit Zoom + Rotation + Blur + Spring-Overshoot. Jeder Button kommt deutlich sichtbar einzeln nacheinander mit hörbarem "pop". Dauer: 0.58s — Stagger 90ms zwischen Buttons, letzte Pop bei 540ms. Gesamtdauer des Reveals: ~1.1s (premium-spürbar, nicht zu lang). */ .floating-sidebar.is-open .floating-sidebar__btn--collapsible:not([hidden]) { display: flex; animation: floatingSidebarPopIn 0.58s cubic-bezier(0.34, 1.6, 0.5, 1) both; transform-origin: center center; } /* Stagger vom Toggle (unten) nach oben — "aufsteigen aus der Hülse" mit 90ms Abstand. Search-Button sitzt im DOM zwischen darkmode und blogback; delay 45ms hält die visuelle Reihenfolge ohne die übrigen Timings zu verschieben. */ .floating-sidebar.is-open > .floating-sidebar__btn--blogback { animation-delay: 0ms; } .floating-sidebar.is-open > .floating-sidebar__btn--search { animation-delay: 45ms; } .floating-sidebar.is-open > .floating-sidebar__btn--darkmode { animation-delay: 90ms; } .floating-sidebar.is-open > .floating-sidebar__btn--whatsapp { animation-delay: 180ms; } .floating-sidebar.is-open > .floating-sidebar__btn--mein-bereich{ animation-delay: 270ms; } .floating-sidebar.is-open > .floating-sidebar__btn--tarif { animation-delay: 360ms; } .floating-sidebar.is-open > .floating-sidebar__btn--sim { animation-delay: 450ms; } .floating-sidebar.is-open > .floating-sidebar__btn--install { animation-delay: 540ms; } /* CLOSING: Staggered Pop-Out — oben zuerst weg, Zoom in umgekehrter Richtung. Dauer: 0.38s — Stagger 70ms. Gesamt: ~820ms. */ .floating-sidebar.is-closing .floating-sidebar__btn--collapsible:not([hidden]) { display: flex; animation: floatingSidebarPopOut 0.38s cubic-bezier(0.55, 0.05, 0.9, 0.4) both; transform-origin: center center; } .floating-sidebar.is-closing > .floating-sidebar__btn--install { animation-delay: 0ms; } .floating-sidebar.is-closing > .floating-sidebar__btn--sim { animation-delay: 70ms; } .floating-sidebar.is-closing > .floating-sidebar__btn--tarif { animation-delay: 140ms; } .floating-sidebar.is-closing > .floating-sidebar__btn--mein-bereich{ animation-delay: 210ms; } .floating-sidebar.is-closing > .floating-sidebar__btn--whatsapp { animation-delay: 280ms; } .floating-sidebar.is-closing > .floating-sidebar__btn--darkmode { animation-delay: 350ms; } .floating-sidebar.is-closing > .floating-sidebar__btn--search { animation-delay: 385ms; } .floating-sidebar.is-closing > .floating-sidebar__btn--blogback { animation-delay: 420ms; } } /* === Keyframes === */ @keyframes togglePulseGlow { 0%, 100% { box-shadow: var(--shadow-md), 0 0 8px rgba(0, 163, 224, 0.35), 0 0 0 0 rgba(0, 163, 224, 0); } 50% { box-shadow: var(--shadow-md), 0 0 22px rgba(0, 163, 224, 0.8), 0 0 38px rgba(0, 85, 164, 0.35); } } @keyframes toggleRingBreathe { 0%, 100% { opacity: 0; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes toggleDotsRise { 0%, 100% { opacity: 0.45; transform: translateY(0) scale(1); } 40%, 60% { opacity: 1; transform: translateY(-1.2px) scale(1.28); } } /* Dramatischer Zoom + Rotation + Blur — Button "platzt" aus der Toggle-Hülse heraus, überschwingt spürbar (scale 1.25, rotate 8deg) und federt dann in die Ruhelage. Mehrere Keyframes für spürbaren Bounce — fühlt sich mechanisch-präzise an. */ @keyframes floatingSidebarPopIn { 0% { opacity: 0; transform: translateY(42px) scale(0.05) rotate(-18deg); filter: blur(5px); } 35% { opacity: 1; transform: translateY(-14px) scale(1.25) rotate(9deg); filter: blur(0); } 60% { opacity: 1; transform: translateY(4px) scale(0.88) rotate(-4deg); filter: blur(0); } 80% { opacity: 1; transform: translateY(-2px) scale(1.06) rotate(2deg); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); } } /* Pop-Out: kurzer "Atemholer" (scale 1.12), dann schneller Kollaps in die Hülse. Rotiert in die Gegenrichtung — wie ein Umklappen/Einsaugen. */ @keyframes floatingSidebarPopOut { 0% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); } 25% { opacity: 1; transform: translateY(-6px) scale(1.12) rotate(5deg); filter: blur(0); } 100% { opacity: 0; transform: translateY(34px) scale(0.05) rotate(-16deg); filter: blur(5px); } } /* Reduced-Motion: alle Animationen deaktiviert, Buttons springen hart ein/aus */ @media (prefers-reduced-motion: reduce) { .floating-sidebar.is-open .floating-sidebar__btn--collapsible:not([hidden]), .floating-sidebar.is-closing .floating-sidebar__btn--collapsible:not([hidden]) { animation: none; } .floating-sidebar__btn--toggle, .floating-sidebar__btn--toggle::before, .floating-sidebar__btn--toggle-icon .toggle-dots circle, .floating-sidebar__btn--toggle-icon, .floating-sidebar__btn--toggle-icon .toggle-dots, .floating-sidebar__btn--toggle-icon .toggle-chevron, .floating-sidebar__btn--toggle-icon .toggle-close { animation: none !important; transition: none !important; } } @media (max-width: 480px) { .floating-sidebar { right: 20px; bottom: 145px; } .floating-sidebar__btn { width: 42px; height: 42px; } /* Install-Button bleibt 50% groesser als die Mobile-Basis */ .floating-sidebar__btn--install { width: 63px; height: 63px; gap: 3px; padding: 0 5px; } .floating-sidebar__btn--install-logo { width: 26px; height: 26px; } .floating-sidebar__btn--install-arrow { width: 18px; height: 18px; } } /* --- WhatsApp Floating Button --- */ .whatsapp-btn { position: fixed; bottom: 90px; right: 30px; width: 56px; height: 56px; background: #25D366; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); cursor: pointer; z-index: 998; transition: all var(--transition-normal); text-decoration: none; border: none; } .whatsapp-btn:hover { background: #1ebe5d; transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-xl); } .whatsapp-btn svg { width: 30px; height: 30px; fill: #ffffff; } .whatsapp-btn__tooltip { position: absolute; right: 68px; background: var(--color-bg-dark); color: var(--color-text-inverse); padding: 6px 12px; border-radius: var(--radius-md); font-size: var(--fs-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); } .whatsapp-btn:hover .whatsapp-btn__tooltip { opacity: 1; } /* --- Skip to Content (Barrierefreiheit) --- */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-primary); color: var(--color-text-inverse); padding: var(--spacing-sm) var(--spacing-lg); z-index: 10000; font-weight: var(--fw-semibold); transition: top var(--transition-fast); } .skip-link:focus { top: 0; color: var(--color-text-inverse); } /* --- Focus-Visible (Barrierefreiheit) --- */ *:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } /* --- Termin-Button (Sekundär-CTA) --- */ .btn--termin { background-color: transparent; color: var(--color-text-inverse); border: 2px solid rgba(255, 255, 255, 0.75); font-size: var(--fs-sm); } .btn--termin:hover { background-color: rgba(255, 255, 255, 0.15); border-color: var(--color-text-inverse); color: var(--color-text-inverse); transform: translateY(-2px); } /* --- Newsletter Section --- */ .newsletter-section { background: var(--color-primary-light); padding: var(--spacing-2xl) 0; text-align: center; } .newsletter-section h3 { color: var(--color-primary-dark); margin-bottom: var(--spacing-sm); } .newsletter-section p { color: var(--color-text-light); font-size: var(--fs-sm); margin-bottom: var(--spacing-lg); } .newsletter-form { display: flex; gap: var(--spacing-sm); max-width: 480px; margin: 0 auto; } .newsletter-form .form-input { flex: 1; } @media (max-width: 480px) { .newsletter-form { flex-direction: column; } .whatsapp-btn { bottom: 80px; right: 20px; width: 50px; height: 50px; } .whatsapp-btn svg { width: 26px; height: 26px; } } /* --- Kennzahlen / Stats Bar --- */ .kennzahlen-section { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); padding: var(--spacing-2xl) 0; position: relative; overflow: hidden; } .kennzahlen-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .kennzahlen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; position: relative; z-index: 1; } @media (max-width: 1024px) { .kennzahlen-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; } } /* 2026-04-20 (spät): Mobile-Spezialbehandlung komplett entfernt. Timo wollte auf allen Breakpoints den Desktop-Look: schlichtes Grid mit Icon / Zahl / Label + vertikale Trenner, ohne Glas-Karten und ohne Rotating-Glow-Animation. Die bestehende Regel oben (@media max-width: 1024px → 2 Spalten) reicht für Mobile aus. */ .kennzahl-item { padding: var(--spacing-2xl) var(--spacing-xl); text-align: center; position: relative; /* 2026-04-20: opacity:0 + translateY entfernt. Die Scroll-Reveal-Klasse .is-visible wird nur auf [data-animate]-Elementen gesetzt — und das haben die Kennzahlen nicht. Ergebnis: Kennzahlen blieben unsichtbar. Jetzt: von Anfang an sichtbar, keine Scroll-Reveal-Abhängigkeit. */ opacity: 1; transform: none; transition: background var(--transition-normal); } /* .is-visible bleibt als Fallback — macht bei sichtbarem Default nix kaputt */ .kennzahl-item.is-visible { opacity: 1; transform: none; } .kennzahl-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(255,255,255,0.15); } @media (max-width: 900px) { .kennzahl-item:nth-child(2)::after, .kennzahl-item:nth-child(4)::after { display: none; } } .kennzahl-item:hover { background: rgba(255,255,255,0.05); } .kennzahl-icon { width: 48px; height: 48px; margin: 0 auto var(--spacing-md); background: rgba(255,255,255,0.1); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); transition: background var(--transition-normal), transform var(--transition-normal); } .kennzahl-item:hover .kennzahl-icon { background: rgba(255,255,255,0.2); transform: scale(1.1); } .kennzahl-icon svg { width: 24px; height: 24px; } .kennzahl-number { font-family: var(--font-heading); font-size: clamp(var(--fs-3xl), 4vw, var(--fs-4xl)); font-weight: var(--fw-extrabold); color: #ffffff; line-height: 1.1; margin-bottom: var(--spacing-xs); letter-spacing: -0.02em; white-space: nowrap; /* Prevent suffix wrapping during count-up animation */ } .kennzahl-number .counter { display: inline-block; } .kennzahl-number .suffix { color: var(--color-accent); } .kennzahl-label { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; } /* --- Kennzahlen Coverflow — DEPRECATED ab 2026-04-20 ------------- Das 3D-Coverflow-Karussell war auf Mobile schlecht lesbar (Zahlen zu klein, Nachbar-Karten überlappen, Counter-Animation bricht). Ersetzt durch klares 2×2-Grid (oben). Coverflow-HTML bleibt im DOM (SEO + Progressive Enhancement), wird aber auf allen Breakpoints ausgeblendet. ----------------------------------------------------------------- */ .kennzahlen-coverflow { display: none !important; } /* Grid-Variante auf allen Breakpoints sichtbar — trotz --desktop-Klasse */ .kennzahlen-grid--desktop { display: grid; } @media (max-width: 768px) { /* Auf Mobile bleibt das Grid aktiv (siehe Block oben), Coverflow aus. */ .kennzahlen-coverflow__legacy-placeholder { position: relative; perspective: 1100px; padding: 0.25rem 0 0; overflow: hidden; outline: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, transparent 100%); } .kennzahlen-coverflow__stage { position: relative; height: 200px; transform-style: preserve-3d; touch-action: pan-y; overflow: visible; } /* Slide-Größe: deutlich kleiner als die Blog-Coverflow-Karten. */ .kennzahlen-coverflow .pinned-coverflow__slide.kennzahl-card { width: min(240px, 66vw); } /* Snappere Transition (0,45 s statt 0,8 s) — weniger Zeit, in der mehrere Slides gleichzeitig sichtbar sind. */ .kennzahlen-coverflow .pinned-coverflow__slide { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, filter 0.3s ease, box-shadow 0.25s ease, visibility 0s 0s; } /* Nachbar-Karten deutlich weiter rausgeschoben + stärker verkleinert, damit sie die aktive Karte nicht mehr überlappen. */ .kennzahlen-coverflow .pinned-coverflow__slide[data-cf="prev"] { --cf-x: -88%; --cf-s: 0.68; --cf-r: 26deg; --cf-o: 0.38; } .kennzahlen-coverflow .pinned-coverflow__slide[data-cf="next"] { --cf-x: 88%; --cf-s: 0.68; --cf-r: -26deg; --cf-o: 0.38; } /* Hidden-Slide: echt unsichtbar + kein Transform-Tween aus dem Zentrum raus. visibility wird mit 0,3 s Verzögerung abgeschaltet (damit der Opacity-Fade beim Verlassen noch spielt), beim Reinkommen aber sofort eingeschaltet — kombiniert mit Mask-Fade entsteht der Eindruck, dass die Karte "von hinten" auftaucht statt durch die Bühne zu kreuzen. */ .kennzahlen-coverflow .pinned-coverflow__slide[data-cf="hidden"] { --cf-x: 0; --cf-s: 0.7; --cf-r: 0deg; --cf-o: 0; --cf-pe: none; visibility: hidden; transition: transform 0s, opacity 0.2s ease, visibility 0s 0.2s; } /* Kartendesign: helles Glas-Paneel auf der blauen Sektion. Kein Hintergrundbild, klare Kanten, weiche Schatten. */ .kennzahl-card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 240, 254, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 18px; box-shadow: 0 16px 36px rgba(0, 20, 50, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85); padding: 1rem 1rem 0.95rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.35rem; /* Override: Das übergeordnete .kennzahl-item hat opacity:0/translateY. Im Coverflow-Kontext steuert aber pinned-coverflow die Transform. */ opacity: 1 !important; transform: translate(-50%, -50%) translate3d(var(--cf-x, 0px), 0, 0) scale(var(--cf-s, 1)) rotateY(var(--cf-r, 0deg)) !important; } .kennzahl-card:not(:last-child)::after { display: none; } .kennzahl-card__icon { width: 42px; height: 42px; margin: 0 0 0.1rem; border-radius: 12px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0, 85, 164, 0.28); } .kennzahl-card__icon svg { width: 22px; height: 22px; color: #fff; } .kennzahl-card__number { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; margin: 0; /* Fixierte Farben (nicht theme-variable-getrieben), weil die Card- Oberfläche immer hell bleibt — auch im Dark Mode. */ color: #003366; font-family: var(--font-heading); font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; white-space: normal; } .kennzahl-card__number .counter { display: block; color: #003366; } .kennzahl-card__suffix { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0079b8; line-height: 1; white-space: nowrap; opacity: 1; } .kennzahl-card__label { font-size: 0.78rem; line-height: 1.25; letter-spacing: 0.02em; text-transform: none; color: #1a1a2e; font-weight: 600; margin: 0.1rem 0 0; white-space: normal; word-break: break-word; opacity: 0.92; } /* Dots im hellen Style gegen den blauen Sektions-BG */ .kennzahlen-coverflow__dots { margin-top: 0.6rem; } .kennzahlen-coverflow .pinned-coverflow__dot { background: rgba(255, 255, 255, 0.35); } .kennzahlen-coverflow .pinned-coverflow__dot:hover { background: rgba(255, 255, 255, 0.6); } .kennzahlen-coverflow .pinned-coverflow__dot[aria-current="true"] { background: var(--color-accent); } /* Hover-Override: im Coverflow-Kontext soll der Default-Hover der .kennzahl-item nichts verschieben — pinned-coverflow regelt Transforms. */ .kennzahl-card:hover { background: linear-gradient(160deg, rgba(255, 255, 255, 1) 0%, rgba(232, 240, 254, 0.98) 100%); } /* Nachbar-Karten: Schatten dämpfen, damit keine Shadow-Bleeds auf die aktive Karte fallen */ .kennzahlen-coverflow .pinned-coverflow__slide[data-cf="prev"], .kennzahlen-coverflow .pinned-coverflow__slide[data-cf="next"] { box-shadow: 0 6px 14px rgba(0, 20, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8); } } /* Reduced Motion: Coverflow verzichtet auf 3D-Rotation, bleibt aber swipebar (das regelt pinned-coverflow.js bereits). */ @media (prefers-reduced-motion: reduce) { .kennzahlen-coverflow .pinned-coverflow__slide { transition: opacity 0.3s ease !important; } } /* ============================================ Dark Mode ============================================ */ [data-theme="dark"] { --color-bg: #0b0f1e; --color-bg-alt: #101827; --color-bg-dark: #060a14; --color-surface: #13203a; --color-text: #dce8f5; --color-text-light: #7a9cbf; --color-heading: #c8daf0; --color-primary: #1a6fd4; --color-primary-dark: #1a4a8a; --color-primary-light: rgba(74, 143, 224, 0.15); --color-border: rgba(255, 255, 255, 0.09); --color-border-light: rgba(255, 255, 255, 0.05); --color-shadow: rgba(0, 0, 0, 0.55); --header-bg: rgba(11, 15, 30, 0.97); } /* Smooth transition */ html { transition: background-color 0.35s ease, color 0.25s ease; } /* Header */ [data-theme="dark"] .header { background: rgba(11, 15, 30, 0.97); } [data-theme="dark"] .header__logo .logo { filter: brightness(0) invert(1); } [data-theme="dark"] .header__brand-name { color: var(--color-text); } [data-theme="dark"] .header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.4); border-bottom-color: rgba(255,255,255,0.07); } /* Login card logo */ [data-theme="dark"] .login-card__logo img { filter: brightness(0) invert(1); } [data-theme="dark"] .login-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .login-tab { color: var(--color-text-light); } [data-theme="dark"] .login-tab.active { color: var(--color-text); border-bottom-color: var(--color-primary); } /* Nav */ [data-theme="dark"] .header__nav-link { color: var(--color-text); } [data-theme="dark"] .header__nav-link:hover, [data-theme="dark"] .header__nav-link.active { color: var(--color-accent); } /* Links */ [data-theme="dark"] a:not(.btn):not(.header__nav-link):not(.header__logo):not([class*="footer__"]):not(.skip-link):not([class*="manifesto__"]):not([class*="floating-sidebar__"]):not([class*="google-rating"]) { color: #5ba3f5; } [data-theme="dark"] a:not(.btn):not(.header__nav-link):not(.header__logo):not([class*="footer__"]):not(.skip-link):not([class*="manifesto__"]):not([class*="floating-sidebar__"]):not([class*="google-rating"]):hover { color: #7ec0ff; } /* Buttons — all variants readable in both modes */ [data-theme="dark"] .btn--primary { background-color: #0065c4; border-color: #0065c4; color: #fff; } [data-theme="dark"] .btn--primary:hover { background-color: #0078e6; border-color: #0078e6; color: #fff; } [data-theme="dark"] .btn--cta { background-color: #00b8e6; border-color: #00b8e6; color: #fff; } [data-theme="dark"] .btn--cta:hover { background-color: #00d4ff; border-color: #00d4ff; color: #fff; } /* Manifesto CTA Button — immer hell + kontrastreich */ [data-theme="dark"] .manifesto__cta-btn { background: #00b8e6; color: #fff; box-shadow: 0 4px 20px rgba(0, 200, 255, 0.3); } [data-theme="dark"] .manifesto__cta-btn:hover { background: #00d4ff; } [data-theme="dark"] .btn--secondary { background-color: var(--color-surface); color: #5ba3f5; border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .btn--secondary:hover { background-color: rgba(91,163,245,0.15); color: #7ec0ff; border-color: rgba(91,163,245,0.3); } [data-theme="dark"] .btn--outline { background-color: transparent; color: #5ba3f5; border-color: #5ba3f5; } [data-theme="dark"] .btn--outline:hover { background-color: #5ba3f5; color: #fff; border-color: #5ba3f5; } [data-theme="dark"] .btn--outline-light { background-color: transparent; color: #dce8f5; border-color: rgba(255,255,255,0.4); } [data-theme="dark"] .btn--outline-light:hover { background-color: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.6); } [data-theme="dark"] .btn--sm { color: inherit; } /* Nav buttons in dark mode */ [data-theme="dark"] .header__nav-link--cta { background-color: #0065c4; color: #fff !important; } [data-theme="dark"] .header__nav-link--cta:hover { background-color: #0078e6 !important; color: #fff !important; } /* Obsidian-Gold-Pill: in Dark Mode identisch, da sie schon dunkel ist. Nur Gold-Glow etwas verstärken für Kontrast. */ [data-theme="dark"] .header__nav-link--login { border-color: rgba(255, 220, 120, 0.55); box-shadow: 0 0 14px rgba(240, 200, 80, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(240, 200, 80, 0.18); } [data-theme="dark"] .header__nav-link--login:hover, [data-theme="dark"] .header__nav-link--login:focus-visible { background-color: transparent; color: #ffeaa6 !important; border-color: rgba(255, 230, 140, 0.85); } /* Card links */ [data-theme="dark"] .card__link { color: #5ba3f5; } [data-theme="dark"] .card__link:hover { color: #7ec0ff; } /* Blog card titles */ [data-theme="dark"] .blog-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .blog-card__image { background: linear-gradient(135deg, rgba(91, 163, 245, 0.15), rgba(91, 163, 245, 0.25)); } [data-theme="dark"] .blog-card__title a { color: var(--color-heading); } [data-theme="dark"] .blog-card__title a:hover { color: #5ba3f5; } [data-theme="dark"] .blog-card__excerpt { color: var(--color-text-light); } /* Hero */ [data-theme="dark"] .hero { background: linear-gradient(135deg, #020611 0%, #071530 50%, #0c2556 100%); } /* Cards */ [data-theme="dark"] .card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .card:hover { border-color: rgba(74,143,224,0.3); box-shadow: 0 10px 25px rgba(0,0,0,0.4); } [data-theme="dark"] .card__icon { background: rgba(91, 163, 245, 0.15); color: #5ba3f5; } [data-theme="dark"] .card__title { color: var(--color-text); } [data-theme="dark"] .card__text { color: var(--color-text-light); } [data-theme="dark"] .card--subtle:hover { background: var(--color-surface); } /* Forms */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea, [data-theme="dark"] .form-select { background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--color-text); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-textarea:focus, [data-theme="dark"] .form-select:focus { border-color: #4a8fe0; box-shadow: 0 0 0 3px rgba(74,143,224,0.2); } /* Newsletter */ [data-theme="dark"] .newsletter-section { background: rgba(74,143,224,0.07); } [data-theme="dark"] .newsletter-section h3 { color: var(--color-text); } /* Accordion */ [data-theme="dark"] .accordion-header { color: var(--color-text); } [data-theme="dark"] .accordion-item.active .accordion-header { background-color: rgba(74,143,224,0.12); } /* --- Dark Mode Footer Toggle --- */ .darkmode-footer-toggle { display: inline-flex; align-items: center; gap: var(--spacing-sm); margin: 0; cursor: pointer; user-select: none; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); padding: 4px 12px 4px 10px; transition: border-color var(--transition-fast); } .darkmode-footer-toggle:hover { border-color: rgba(255,255,255,0.4); } .darkmode-footer-toggle__label { color: rgba(255,255,255,0.7); font-size: calc(var(--fs-sm) * 0.9); font-weight: var(--fw-medium); } .darkmode-footer-toggle__switch { position: relative; width: 44px; height: 24px; background: rgba(255,255,255,0.15); border-radius: 12px; border: none; cursor: pointer; transition: background 0.3s ease; padding: 0; flex-shrink: 0; } .darkmode-footer-toggle__switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } [data-theme="dark"] .darkmode-footer-toggle__switch { background: var(--color-accent); } [data-theme="dark"] .darkmode-footer-toggle__switch::after { transform: translateX(20px); } /* ============================================ Auth Pages (Login / Signup / Passwort-Reset) ============================================ */ /* Layout */ .auth-section { min-height: calc(100vh - var(--header-height)); /* Fallback */ min-height: calc(100dvh - var(--header-height)); /* iOS-safe */ display: flex; align-items: center; justify-content: center; padding: calc(var(--header-height) + var(--spacing-2xl)) var(--spacing-xl) var(--spacing-2xl); background: var(--color-bg); } .auth-card { width: 100%; max-width: 440px; background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--spacing-3xl); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-light); } .auth-card--wide { max-width: 540px; } .auth-card__logo { text-align: center; margin-bottom: var(--spacing-xl); } .auth-card__logo img { height: 72px; margin: 0 auto var(--spacing-sm); } .auth-card__brand { display: block; font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-primary-dark); letter-spacing: -0.02em; margin-bottom: var(--spacing-xs); } .auth-card__title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin-bottom: var(--spacing-xs); } .auth-card__subtitle { font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: 0; } /* Social Login Buttons */ .auth-social-group { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } .btn--social { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); width: 100%; padding: 0.7rem 1rem; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-sm); border-radius: var(--radius-md); border: 2px solid var(--color-border); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; line-height: 1; background: var(--color-surface); color: var(--color-text); } .btn--social svg { width: 18px; height: 18px; flex-shrink: 0; } .btn--google { border-color: #dadce0; } .btn--google:hover { border-color: #4285f4; box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15); background: #f8faff; } .btn--apple { background: #000; color: #fff; border-color: #000; } .btn--apple:hover { background: #1a1a1a; } .btn--apple svg { fill: #fff; } /* Auth Divider */ .auth-divider { display: flex; align-items: center; gap: var(--spacing-md); margin: var(--spacing-lg) 0; color: var(--color-text-light); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } /* Form Row (side-by-side) */ .form-row { display: flex; gap: var(--spacing-md); } .form-row > .form-group { flex: 1; } /* Validation */ .form-error { display: none; color: var(--color-error); font-size: var(--fs-xs); margin-top: var(--spacing-xs); } .form-error.visible { display: block; } .form-helper { color: var(--color-text-light); font-size: var(--fs-xs); margin-top: var(--spacing-xs); font-weight: var(--fw-regular); } .form-input--error { border-color: var(--color-error) !important; } .form-input--success { border-color: var(--color-success) !important; } /* Password Strength */ .password-strength { margin-top: var(--spacing-xs); } .password-strength__bar { height: 4px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; } .password-strength__fill { height: 100%; width: 0; border-radius: var(--radius-full); transition: width var(--transition-fast), background-color var(--transition-fast); } .password-strength__text { font-size: var(--fs-xs); margin-top: 2px; display: block; color: var(--color-text-light); } /* Autocomplete Dropdown */ .form-group--autocomplete { position: relative; } .autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 100; display: none; max-height: 220px; overflow-y: auto; margin-top: 4px; } .autocomplete-dropdown--visible { display: block; } .autocomplete-dropdown__item { padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; font-size: var(--fs-sm); color: var(--color-text); transition: background var(--transition-fast); border-bottom: 1px solid var(--color-border-light); } .autocomplete-dropdown__item:last-child { border-bottom: none; } .autocomplete-dropdown__item:hover, .autocomplete-dropdown__item--active { background: var(--color-primary-light); } /* Auth Message */ .auth-message { display: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); font-size: var(--fs-sm); margin-bottom: var(--spacing-lg); line-height: 1.5; } .auth-message.visible { display: block; } .auth-message--success { background: rgba(16, 185, 129, 0.1); color: #065f46; border: 1px solid rgba(16, 185, 129, 0.3); } .auth-message--error { background: rgba(239, 68, 68, 0.1); color: #991b1b; border: 1px solid rgba(239, 68, 68, 0.3); } .auth-message--info { background: var(--color-primary-light); color: var(--color-primary-dark); border: 1px solid #bfdbfe; } /* Auth links row */ .auth-links-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); font-size: var(--fs-sm); } .auth-links-row a { color: var(--color-primary); font-weight: var(--fw-medium); } .auth-links-row a:hover { color: var(--color-accent); } .auth-footer-text { text-align: center; font-size: var(--fs-sm); color: var(--color-text-light); margin-top: var(--spacing-xl); } .auth-footer-text a { color: var(--color-primary); font-weight: var(--fw-semibold); } /* Responsive */ @media (max-width: 480px) { .auth-card { padding: var(--spacing-xl); border-radius: var(--radius-lg); } .form-row { flex-direction: column; gap: 0; } } /* ---- Auth Dark Mode ---- */ [data-theme="dark"] .auth-section { background: var(--color-bg); } [data-theme="dark"] .auth-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .auth-card__logo img { filter: brightness(0) invert(1); } [data-theme="dark"] .auth-card__brand { color: var(--color-text); } [data-theme="dark"] .auth-card__title { color: var(--color-heading, var(--color-text)); } [data-theme="dark"] .btn--google { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--color-text); } [data-theme="dark"] .btn--google:hover { background: rgba(66,133,244,0.1); border-color: rgba(66,133,244,0.4); } [data-theme="dark"] .btn--apple { background: #000; color: #fff; border-color: #1a1a1a; } [data-theme="dark"] .btn--apple svg { fill: #fff; } [data-theme="dark"] .autocomplete-dropdown { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .autocomplete-dropdown__item:hover, [data-theme="dark"] .autocomplete-dropdown__item--active { background: rgba(74,143,224,0.15); } [data-theme="dark"] .auth-message--success { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.3); } [data-theme="dark"] .auth-message--error { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.3); } [data-theme="dark"] .auth-message--info { background: rgba(74,143,224,0.1); color: #5ba3f5; border-color: rgba(74,143,224,0.3); } [data-theme="dark"] .form-input--error { border-color: #f87171 !important; } [data-theme="dark"] .password-strength__bar { background: rgba(255,255,255,0.1); } /* ============================================ Blog Redesign — Hero, Filter, Grid, Cards ============================================ */ /* --- Breadcrumb --- */ .blog-breadcrumb { padding: calc(var(--header-height) + var(--spacing-lg)) 0 0; background: var(--color-bg); } .blog-breadcrumb__list { display: flex; align-items: center; gap: var(--spacing-sm); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); color: var(--color-text-light); } .blog-breadcrumb__list li + li::before { content: '>'; margin-right: var(--spacing-sm); color: var(--color-text-light); opacity: 0.5; } .blog-breadcrumb__list a { color: var(--color-text-light); text-decoration: none; transition: color var(--transition-fast); } .blog-breadcrumb__list a:hover { color: var(--color-primary); } .blog-breadcrumb__list [aria-current="page"] { color: var(--color-text); font-weight: var(--fw-medium); } /* --- Blog Hero --- */ .blog-hero { padding: var(--spacing-2xl) 0 var(--spacing-3xl); background: var(--color-bg); } .blog-hero__card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); transition: box-shadow var(--transition-normal); } .blog-hero__card:hover { box-shadow: var(--shadow-xl); } .blog-hero__image { min-height: 320px; background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent) 100%); display: flex; align-items: center; justify-content: center; font-size: 5rem; } .blog-hero__content { padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl) 0; display: flex; flex-direction: column; justify-content: center; } .blog-hero__badge { display: inline-block; background: var(--color-primary-light); color: var(--color-primary); padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--spacing-md); width: fit-content; } .blog-hero__title { font-size: var(--fs-3xl); font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin-bottom: var(--spacing-md); line-height: 1.25; } .blog-hero__teaser { color: var(--color-text-light); font-size: var(--fs-md); line-height: 1.65; margin-bottom: var(--spacing-lg); } .blog-hero__meta { display: flex; align-items: center; gap: var(--spacing-lg); font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: var(--spacing-xl); } .blog-hero__meta span { display: flex; align-items: center; gap: var(--spacing-xs); } .blog-hero__date::before { content: '\1F4C5'; font-size: var(--fs-xs); } .blog-hero__readtime::before { content: '\23F1'; font-size: var(--fs-xs); } /* --- Zielgruppen Banner --- */ .zielgruppen-banner { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: #fff; padding: var(--spacing-md) 0; } .zielgruppen-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); flex-wrap: wrap; } .zielgruppen-banner__text { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--fs-base); } .zielgruppen-banner__text svg { flex-shrink: 0; opacity: 0.85; } .zielgruppen-banner__text strong { font-weight: var(--fw-bold); } .zielgruppen-banner__reset { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 16px; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; transition: all var(--transition-fast); } .zielgruppen-banner__reset:hover { background: rgba(255, 255, 255, 0.35); } /* --- Blog Filter Bar --- */ .blog-filter { position: sticky; top: var(--header-height-scrolled); z-index: 90; background: var(--color-bg); border-bottom: 1px solid var(--color-border); transition: top var(--transition-fast), box-shadow var(--transition-fast); padding: var(--spacing-md) 0; } .blog-filter__inner { display: flex; gap: var(--spacing-sm); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: var(--spacing-xs) 0; } .blog-filter__inner::-webkit-scrollbar { display: none; } .blog-filter__btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 8px 18px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); font-family: var(--font-body); cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); } .blog-filter__btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } .blog-filter__btn--active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .blog-filter__btn--active:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-text-inverse); } .blog-filter__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.08); font-size: 0.7rem; font-weight: var(--fw-semibold); line-height: 1; } .blog-filter__btn--active .blog-filter__count { background: rgba(255, 255, 255, 0.25); } /* --- Blog Grid (extends card-grid) --- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); } /* --- Blog Card Enhancements --- */ .blog-card { transition: all var(--transition-normal), opacity 0.25s ease, transform 0.25s ease; display: flex; flex-direction: column; } .blog-card__link-wrap { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); transition: all var(--transition-normal); } .blog-card__link-wrap:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .blog-card__image { position: relative; } .blog-card__coming-badge { position: absolute; top: var(--spacing-md); right: var(--spacing-md); background: var(--color-warning); color: #1a1a2e; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.3px; box-shadow: var(--shadow-sm); } .blog-card__body { padding: var(--spacing-xl); display: flex; flex-direction: column; flex: 1; } .blog-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-sm); } .blog-card__readtime { font-size: var(--fs-xs); color: var(--color-text-light); display: flex; align-items: center; gap: 4px; } .blog-card__readtime::before { content: '\23F1'; font-size: 0.65rem; } .blog-card__title { font-size: var(--fs-lg); margin-bottom: var(--spacing-sm); line-height: 1.35; } .blog-card__link-wrap .blog-card__title { color: var(--color-primary-dark); } .blog-card__link-wrap:hover .blog-card__title { color: var(--color-primary); } .blog-card__excerpt { -webkit-line-clamp: 2; flex: 1; } .blog-card__meta { margin-top: auto; padding-top: var(--spacing-sm); border-top: 1px solid var(--color-border-light); } /* Coming soon cards */ .blog-card[data-coming="true"] .blog-card__link-wrap { opacity: 0.85; } .blog-card[data-coming="true"] .blog-card__link-wrap:hover { transform: none; box-shadow: none; cursor: default; } /* --- Load More --- */ .blog-load-more { text-align: center; padding: var(--spacing-2xl) 0; } .blog-load-more__btn { min-width: 200px; } .blog-load-more__info { font-size: var(--fs-sm); color: var(--color-text-light); } /* --- Blog Responsive --- */ @media (max-width: 1024px) { .blog-hero__card { grid-template-columns: 1fr; } .blog-hero__image { min-height: 220px; } .blog-hero__content { padding: var(--spacing-xl); } .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .blog-breadcrumb { padding-top: calc(var(--header-height-scrolled) + var(--spacing-md)); } .blog-hero { padding: var(--spacing-lg) 0 var(--spacing-xl); } .blog-hero__image { min-height: 180px; font-size: 3.5rem; } .blog-hero__content { padding: var(--spacing-lg); } .blog-hero__title { font-size: var(--fs-2xl); } .blog-hero__teaser { font-size: var(--fs-sm); } .blog-grid { grid-template-columns: 1fr; } .blog-filter__inner { padding: var(--spacing-xs) var(--spacing-xs); } } /* --- Blog Dark Mode --- */ [data-theme="dark"] .blog-breadcrumb { background: var(--color-bg); } [data-theme="dark"] .blog-breadcrumb__list a { color: var(--color-text-light); } [data-theme="dark"] .blog-breadcrumb__list a:hover { color: var(--color-accent); } [data-theme="dark"] .blog-breadcrumb__list [aria-current="page"] { color: var(--color-text); } [data-theme="dark"] .blog-hero { background: var(--color-bg); } [data-theme="dark"] .blog-hero__card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .blog-hero__image { background: linear-gradient(135deg, #001a3a 0%, #003366 50%, #005a8f 100%); } [data-theme="dark"] .blog-hero__badge { background: var(--color-primary-light); color: #5ba3f5; } [data-theme="dark"] .blog-hero__title { color: var(--color-text); } [data-theme="dark"] .blog-hero__teaser { color: var(--color-text-light); } [data-theme="dark"] .blog-hero__meta { color: var(--color-text-light); } [data-theme="dark"] .blog-filter { background: var(--color-bg); border-bottom-color: var(--color-border); } [data-theme="dark"] .blog-filter__btn { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .blog-filter__btn:hover { background: var(--color-primary-light); color: #5ba3f5; border-color: rgba(91, 163, 245, 0.3); } [data-theme="dark"] .blog-filter__btn--active { background: #0065c4; color: #fff; border-color: #0065c4; } [data-theme="dark"] .blog-filter__btn--active:hover { background: #0078e6; border-color: #0078e6; } [data-theme="dark"] .blog-filter__count { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .blog-filter__btn--active .blog-filter__count { background: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .blog-card__link-wrap { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .blog-card__link-wrap:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .blog-card__link-wrap .blog-card__title { color: var(--color-text); } [data-theme="dark"] .blog-card__link-wrap:hover .blog-card__title { color: #5ba3f5; } [data-theme="dark"] .blog-card__coming-badge { background: #c88a0a; color: #fff; } [data-theme="dark"] .blog-card__category { background: var(--color-primary-light); color: #5ba3f5; } [data-theme="dark"] .blog-card__readtime { color: var(--color-text-light); } [data-theme="dark"] .blog-card__meta { border-top-color: var(--color-border); } [data-theme="dark"] .blog-load-more__info { color: var(--color-text-light); } /* --- Blog Type Filter (second row) --- */ .blog-filter__type { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-sm); flex-wrap: wrap; } .blog-filter__type-label { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; } .blog-filter__type-btn { background: none; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 14px; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-light); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .blog-filter__type-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .blog-filter__type-btn--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } [data-theme="dark"] .blog-filter__type-label { color: var(--color-text-light); } [data-theme="dark"] .blog-filter__type-btn { border-color: rgba(255,255,255,0.12); color: var(--color-text-light); } [data-theme="dark"] .blog-filter__type-btn:hover { border-color: #5ba3f5; color: #5ba3f5; } [data-theme="dark"] .blog-filter__type-btn--active { background: #0065c4; border-color: #0065c4; color: #fff; } /* --- Blog Comments Section --- */ .blog-comments { margin-top: var(--spacing-3xl); padding-top: var(--spacing-2xl); border-top: 1px solid var(--color-border); } .blog-comments__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-xl); flex-wrap: wrap; gap: var(--spacing-md); } .blog-comments__title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text); } .blog-comments__count { font-size: var(--fs-sm); color: var(--color-text-light); } .blog-comments__login-hint { padding: var(--spacing-lg); background: var(--color-bg-alt); border-radius: var(--radius-lg); text-align: center; color: var(--color-text-light); font-size: var(--fs-sm); } .blog-comments__login-hint a { font-weight: var(--fw-semibold); } /* Comment form */ .blog-comment-form { margin-bottom: var(--spacing-2xl); } .blog-comment-form__textarea { width: 100%; min-height: 100px; padding: var(--spacing-md); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--fs-sm); resize: vertical; background: var(--color-surface); color: var(--color-text); transition: border-color var(--transition-fast); } .blog-comment-form__textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 85, 164, 0.1); } .blog-comment-form__actions { display: flex; justify-content: flex-end; margin-top: var(--spacing-sm); } /* Individual comment */ .blog-comment { display: flex; gap: var(--spacing-md); padding: var(--spacing-lg) 0; border-bottom: 1px solid var(--color-border-light); } .blog-comment:last-child { border-bottom: none; } .blog-comment__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); flex-shrink: 0; } .blog-comment__body { flex: 1; min-width: 0; } .blog-comment__meta { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); } .blog-comment__author { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-text); } .blog-comment__date { font-size: var(--fs-xs); color: var(--color-text-light); } .blog-comment__text { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.6; } .blog-comments__empty { text-align: center; padding: var(--spacing-2xl); color: var(--color-text-light); font-size: var(--fs-sm); } /* Dark mode comments */ [data-theme="dark"] .blog-comments__login-hint { background: var(--color-surface); } [data-theme="dark"] .blog-comment-form__textarea { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--color-text); } [data-theme="dark"] .blog-comment-form__textarea:focus { border-color: #4a8fe0; box-shadow: 0 0 0 3px rgba(74,143,224,0.2); } /* ===== Dark Mode Audit Fixes ===== */ /* Form messages */ [data-theme="dark"] .form-message--success { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.3); } [data-theme="dark"] .form-message--error { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.3); } /* Back-to-top button */ [data-theme="dark"] .back-to-top { background: #0065c4; color: #fff; } [data-theme="dark"] .back-to-top:hover { background: #0078e6; } /* Testimonial card avatar */ [data-theme="dark"] .testimonial-card__avatar { background: rgba(74,143,224,0.2); color: #5ba3f5; } /* Profile photo placeholder */ [data-theme="dark"] .profile-photo-placeholder { background: linear-gradient(135deg, rgba(74,143,224,0.25), var(--color-bg-alt)); border-color: rgba(74,143,224,0.3); color: #5ba3f5; } [data-theme="dark"] .profile-photo { border-color: rgba(74,143,224,0.3); } /* Form select dropdown arrow */ [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a9cbf' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } /* CTA box in dark mode */ [data-theme="dark"] .cta-box { background: linear-gradient(135deg, rgba(74,143,224,0.15), rgba(0,163,224,0.1)); border-color: rgba(74,143,224,0.3); } [data-theme="dark"] .cta-box h3 { color: var(--color-text); } /* Section dark headings */ [data-theme="dark"] .section--dark { background-color: #040810; } /* Name highlight box (ueber-uns) */ [data-theme="dark"] .name-highlight-box { background: rgba(74,143,224,0.08); border-left-color: rgba(74,143,224,0.4); } /* USP cards */ [data-theme="dark"] .usp-card { border-color: var(--color-border); background: var(--color-surface); } [data-theme="dark"] .usp-card:hover { border-color: rgba(91,163,245,0.3); background: rgba(255,255,255,0.04); } [data-theme="dark"] .usp-card__icon { color: #5ba3f5; } [data-theme="dark"] .usp-card__title { color: var(--color-text); } [data-theme="dark"] .usp-card__text { color: var(--color-text-light); } /* ============================================ Über-uns — Comprehensive Dark Mode ============================================ */ /* About Intro */ [data-theme="dark"] .about-intro__content h2 { color: var(--color-text); } [data-theme="dark"] .about-intro__content p { color: var(--color-text-light); } [data-theme="dark"] .about-intro__content .lead-badge { background: rgba(91,163,245,0.12); color: #5ba3f5; } [data-theme="dark"] .profile-photo { box-shadow: 0 8px 32px rgba(0,0,0,0.4); } /* Kennzahlen — already uses white-on-gradient, just deepen the gradient */ [data-theme="dark"] .kennzahlen-section { background: linear-gradient(135deg, #040c1a 0%, #0a1e3d 100%); } /* Timeline Section — dark mode */ [data-theme="dark"] .timeline-section { background: var(--color-bg); } [data-theme="dark"] .timeline-section > .container { background-color: #060810; } /* Timeline dark-mode: now mostly inherited from obsidian base. Only minor intensification needed. */ [data-theme="dark"] .timeline-item__dot { background: #080a12; } /* Timeline future items */ [data-theme="dark"] .timeline-item--future .timeline-item__dot { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 6px rgba(0,163,224,0.08), 0 2px 8px rgba(0,0,0,0.3); } /* Timeline divider */ [data-theme="dark"] .timeline-divider__badge { box-shadow: 0 0 20px rgba(0,163,224,0.4), 0 4px 15px rgba(0,0,0,0.3); } /* Timeline Obsidian-Gold — dark mode overrides */ [data-theme="dark"] .tl-line-glow { background: linear-gradient(to bottom, transparent 0%, rgba(212, 175, 55, 0.2) 15%, rgba(255, 215, 80, 0.8) 45%, rgba(255, 225, 100, 1) 50%, rgba(255, 215, 80, 0.8) 55%, rgba(212, 175, 55, 0.2) 85%, transparent 100%); } [data-theme="dark"] .tl-line-glow::after { background: radial-gradient(ellipse, rgba(212, 175, 55, 0.35) 0%, transparent 70%); } /* Dark mode active desc — now matches base obsidian style */ [data-theme="dark"] .timeline-item.tl-active .timeline-item__desc::before { background: linear-gradient(105deg, transparent 40%, rgba(212, 175, 55, 0.06) 45%, rgba(255, 225, 100, 0.12) 50%, rgba(212, 175, 55, 0.06) 55%, transparent 60%); } [data-theme="dark"] .timeline-item.tl-active .timeline-item__year { background: rgba(212, 175, 55, 0.15); border-color: rgba(212, 175, 55, 0.4); color: #e8c547; } [data-theme="dark"] .timeline-item.tl-active .timeline-item__title { color: #f0e6d0; } [data-theme="dark"] .timeline-item.tl-active .timeline-item__dot { background: #0f0c08; border-color: #d4af37 !important; color: #d4af37 !important; box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.15), 0 0 25px rgba(212, 175, 55, 0.3), 0 0 50px rgba(212, 175, 55, 0.12) !important; } [data-theme="dark"] .timeline-item.tl-passed .timeline-item__dot { border-color: rgba(212, 175, 55, 0.35) !important; color: rgba(212, 175, 55, 0.4) !important; box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.06), 0 0 15px rgba(212, 175, 55, 0.08) !important; } [data-theme="dark"] .timeline-item.tl-passed .timeline-item__desc { border-left-color: rgba(212, 175, 55, 0.15) !important; border-right-color: rgba(212, 175, 55, 0.15) !important; } [data-theme="dark"] .timeline-item.tl-passed .timeline-item__year { background: rgba(212, 175, 55, 0.06); border-color: rgba(212, 175, 55, 0.12); color: rgba(212, 175, 55, 0.5); } /* SSJ Aura — dark mode: intensified glow on dark backgrounds */ [data-theme="dark"] .tl-aura::before { background: radial-gradient(circle, rgba(255, 215, 80, 0.4) 0%, rgba(212, 175, 55, 0.18) 35%, rgba(212, 175, 55, 0) 70%); } [data-theme="dark"] .tl-aura::after { background: radial-gradient(circle, transparent 40%, rgba(255, 215, 80, 0.12) 55%, rgba(212, 175, 55, 0.06) 65%, transparent 75%); } /* Dark mode sun rays: brighter, more visible on dark bg */ [data-theme="dark"] .tl-flame { background: linear-gradient(to bottom, rgba(255, 215, 80, 0.45) 0%, rgba(255, 235, 120, 0.2) 50%, transparent 100%); } /* Dark mode obsidian shadow — disabled along with base rule */ [data-theme="dark"] .tl-spark--gold { box-shadow: 0 0 calc(6px * var(--tl-power, 1)) rgba(255, 225, 80, 0.7); } [data-theme="dark"] .tl-spark--obsidian { background: radial-gradient(circle, #0a0600 40%, rgba(40, 25, 5, 0.9) 100%); box-shadow: 0 0 calc(6px * var(--tl-power, 1)) rgba(200, 150, 30, 0.35); } /* Timeline future CTA — already uses dark bg, minor refinement */ [data-theme="dark"] .timeline-future-cta { background: linear-gradient(180deg, transparent 0%, #060d1a 30%, #060d1a 100%); } /* Name section */ [data-theme="dark"] .name-section { background: var(--color-bg-alt); } [data-theme="dark"] .name-section h2 { color: var(--color-text); } [data-theme="dark"] .name-section p { color: var(--color-text-light); } [data-theme="dark"] .name-highlight-box strong { color: #5ba3f5; } /* Schwerpunkte cards (card--subtle) */ [data-theme="dark"] .card--subtle .card__icon-svg { color: #5ba3f5; } /* Standort section */ [data-theme="dark"] .section--alt h3 { color: var(--color-text); } /* CTA section bottom */ [data-theme="dark"] .cta-section h2 { color: #fff; } [data-theme="dark"] .cta-section p { color: rgba(255,255,255,0.75); } /* Search overlay */ [data-theme="dark"] .header-search-bar { background: var(--color-surface); } [data-theme="dark"] .header-search-bar__input { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .header-search-bar__input:focus { border-color: #4a8fe0; } [data-theme="dark"] .header-search-results a { color: var(--color-text); } [data-theme="dark"] .header-search-results a:hover { background: rgba(74,143,224,0.15); } /* Legal content pages */ [data-theme="dark"] .legal-content h2, [data-theme="dark"] .legal-content h3 { color: var(--color-text); } [data-theme="dark"] .legal-content { color: var(--color-text); } /* FAQ sidebar */ [data-theme="dark"] .faq-nav-icon { background: rgba(74,143,224,0.15); } [data-theme="dark"] .faq-nav-item { color: var(--color-text-light); } [data-theme="dark"] .faq-nav-item:hover, [data-theme="dark"] .faq-nav-item.active { background: rgba(74,143,224,0.12); color: #5ba3f5; } /* FAQ category headers */ [data-theme="dark"] .faq-category-header { color: var(--color-text); } [data-theme="dark"] .faq-category-body { color: var(--color-text); } [data-theme="dark"] .faq-question-header { color: var(--color-text); } [data-theme="dark"] .faq-answer { color: var(--color-text-light); } [data-theme="dark"] .faq-chip { background: rgba(74,143,224,0.12); color: #5ba3f5; border-color: rgba(74,143,224,0.3); } [data-theme="dark"] .faq-chip:hover { background: rgba(74,143,224,0.2); } /* Blog hero */ [data-theme="dark"] .blog-hero__card { background: var(--color-surface); } [data-theme="dark"] .blog-hero__title { color: var(--color-text); } [data-theme="dark"] .blog-hero__teaser { color: var(--color-text-light); } /* Blog filter bar */ [data-theme="dark"] .blog-filter { background: var(--color-surface); border-bottom-color: var(--color-border); } [data-theme="dark"] .blog-filter__btn { color: var(--color-text-light); border-color: var(--color-border); } [data-theme="dark"] .blog-filter__btn:hover { color: var(--color-text); border-color: var(--color-text-light); } [data-theme="dark"] .blog-filter__btn--active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* ============================================ Google Reviews Carousel — 3-up layout ============================================ */ .reviews-carousel { position: relative; margin: 0 auto var(--spacing-2xl); overflow: hidden; padding: 0 var(--spacing-3xl); } .reviews-carousel__track { display: flex; cursor: grab; -webkit-user-select: none; user-select: none; } .reviews-carousel__track.is-dragging { cursor: grabbing; } .reviews-carousel__slide { flex: 0 0 auto; padding: var(--spacing-sm); box-sizing: border-box; } .reviews-carousel__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl) var(--spacing-lg); text-align: left; position: relative; box-shadow: var(--shadow-sm); height: 100%; min-height: 240px; display: flex; flex-direction: column; transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .reviews-carousel__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .reviews-carousel__card::before { content: '\201C'; font-size: 3.5rem; color: var(--color-primary-light); font-family: Georgia, serif; position: absolute; top: 8px; left: 16px; line-height: 1; opacity: 0.5; } .reviews-carousel__stars { color: var(--color-warning); font-size: var(--fs-sm); margin-bottom: var(--spacing-sm); letter-spacing: 1px; } .reviews-carousel__text { font-size: var(--fs-sm); line-height: 1.65; color: var(--color-text); font-style: italic; margin-bottom: auto; padding-bottom: var(--spacing-md); position: relative; z-index: 1; flex: 1; } .reviews-carousel__author { display: flex; align-items: center; gap: var(--spacing-sm); padding-top: var(--spacing-sm); border-top: 1px solid var(--color-border-light); } .reviews-carousel__avatar { width: 36px; height: 36px; background: var(--color-primary-light); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); color: var(--color-primary); font-size: var(--fs-sm); flex-shrink: 0; } .reviews-carousel__name { font-weight: var(--fw-semibold); font-size: var(--fs-xs); color: var(--color-text); } .reviews-carousel__date { font-size: var(--fs-xs); color: var(--color-text-light); } .reviews-carousel__source { font-size: 0.7rem; color: var(--color-text-light); display: flex; align-items: center; gap: 3px; } .reviews-carousel__source svg { width: 12px; height: 12px; } /* Navigation arrows */ .reviews-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all var(--transition-normal); color: var(--color-text); } .reviews-carousel__btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .reviews-carousel__btn--prev { left: 0; } .reviews-carousel__btn--next { right: 0; } .reviews-carousel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Dots */ .reviews-carousel__dots { display: flex; justify-content: center; gap: var(--spacing-xs); margin-top: var(--spacing-lg); } .reviews-carousel__dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-border); border: none; cursor: pointer; transition: all var(--transition-normal); padding: 0; } .reviews-carousel__dot--active { background: var(--color-primary); width: 28px; border-radius: 5px; } /* Google rating badge (inside page header) */ .google-rating-badge { display: inline-flex; align-items: center; gap: var(--spacing-sm); background: rgba(255, 255, 255, 0.95); padding: 8px 20px; border-radius: 50px; text-decoration: none; margin-top: var(--spacing-md); transition: all var(--transition-normal); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } .google-rating-badge:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); transform: translateY(-1px); } .google-rating-badge__icon { width: 20px; height: 20px; } .google-rating-badge__score { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-text); } .google-rating-badge__stars { color: var(--color-warning); font-size: var(--fs-sm); letter-spacing: 1px; } .google-rating-badge__count { font-size: var(--fs-xs); color: var(--color-text-light); } [data-theme="dark"] .google-rating-badge { background: rgba(30, 40, 60, 0.9); border: 1px solid rgba(91, 163, 245, 0.3); } [data-theme="dark"] .google-rating-badge__score { color: var(--color-text); } /* Google rating header (legacy) */ .google-rating-header { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); margin-bottom: var(--spacing-2xl); flex-wrap: wrap; } .google-rating-header__badge { display: flex; align-items: center; gap: var(--spacing-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--color-text); transition: all var(--transition-normal); } .google-rating-header__badge:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); } .google-rating-header__icon { width: 24px; height: 24px; } .google-rating-header__score { font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--color-text); } .google-rating-header__stars { color: var(--color-warning); font-size: var(--fs-base); letter-spacing: 1px; } .google-rating-header__count { font-size: var(--fs-sm); color: var(--color-text-light); } /* Responsive: tablet */ @media (max-width: 1024px) { .reviews-carousel { padding: 0 var(--spacing-2xl); } } /* Responsive: mobile */ @media (max-width: 640px) { .reviews-carousel { padding: 0 var(--spacing-xl); } .reviews-carousel__card { min-height: 200px; } .reviews-carousel__btn { width: 34px; height: 34px; } .reviews-carousel__btn svg { width: 14px; height: 14px; } .reviews-carousel__btn--prev { left: 2px; } .reviews-carousel__btn--next { right: 2px; } } @media (max-width: 480px) { .reviews-carousel__card { min-width: 85%; } } /* Dark mode */ [data-theme="dark"] .reviews-carousel__card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .reviews-carousel__btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .reviews-carousel__avatar { background: rgba(74,143,224,0.2); color: #5ba3f5; } [data-theme="dark"] .google-rating-header__badge { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .reviews-carousel__dot { background: var(--color-border); } [data-theme="dark"] .reviews-carousel__dot--active { background: var(--color-accent); } /* === FAQ Page === */ /* ===== FAQ LAYOUT ===== */ .faq-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--spacing-2xl); align-items: start; padding: var(--spacing-3xl) 0; } /* ===== SIDEBAR ===== */ .faq-sidebar { position: sticky; top: calc(var(--header-height) + 70px); } .faq-sidebar-title { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-text-light); margin-bottom: var(--spacing-md); padding-left: var(--spacing-md); } .faq-nav-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); color: var(--color-text-light); font-size: var(--fs-sm); font-weight: var(--fw-medium); border: none; background: none; width: 100%; text-align: left; text-decoration: none; margin-bottom: 2px; } .faq-nav-item:hover { background: var(--color-primary-light); color: var(--color-primary); } .faq-nav-item.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--fw-semibold); } .faq-nav-icon { width: 32px; height: 32px; background: var(--color-bg-alt); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition-fast); } .faq-nav-item.active .faq-nav-icon, .faq-nav-item:hover .faq-nav-icon { background: var(--color-primary); color: #fff; } .faq-nav-count { margin-left: auto; font-size: var(--fs-xs); background: var(--color-bg-alt); padding: 2px 7px; border-radius: var(--radius-full); color: var(--color-text-light); } .faq-nav-separator { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-light); padding: 16px 12px 6px; margin-top: 4px; border-top: 1px solid var(--color-border); } /* ===== CATEGORY CARDS ===== */ .faq-category { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); margin-bottom: var(--spacing-lg); overflow: hidden; scroll-margin-top: calc(var(--header-height) + 80px); transition: box-shadow var(--transition-fast); } .faq-category:hover { box-shadow: var(--shadow-md); } .faq-category-header { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-lg) var(--spacing-xl); cursor: pointer; user-select: none; background: var(--color-bg); border: none; width: 100%; text-align: left; transition: background var(--transition-fast); } .faq-category-header:hover { background: var(--color-bg-alt); } .faq-category.open .faq-category-header { background: var(--color-primary-light); border-bottom: 1px solid var(--color-border); } .faq-category-icon { width: 44px; height: 44px; background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .faq-category.open .faq-category-icon { background: var(--color-primary); color: #fff; } .faq-category-title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); flex: 1; } .faq-category-meta { font-size: var(--fs-xs); color: var(--color-text-light); } .faq-chevron { color: var(--color-text-light); transition: transform var(--transition-normal); } .faq-category.open .faq-chevron { transform: rotate(180deg); } .faq-category-body { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1); } .faq-category.open .faq-category-body { max-height: 4000px; } /* ===== QUESTIONS ===== */ .faq-question { border-bottom: 1px solid var(--color-border-light); } .faq-question:last-child { border-bottom: none; } .faq-question-header { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-xl); cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-text); transition: color var(--transition-fast); } .faq-question-header:hover { color: var(--color-primary); } .faq-question.open .faq-question-header { color: var(--color-primary); } .faq-question-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); flex-shrink: 0; transition: background var(--transition-fast); } .faq-question.open .faq-question-dot { background: var(--color-primary); } .faq-question-chevron { margin-left: auto; color: var(--color-text-light); transition: transform var(--transition-normal); } .faq-question.open .faq-question-chevron { transform: rotate(180deg); color: var(--color-primary); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1); } .faq-question.open .faq-answer { max-height: 1200px; } .faq-answer-inner { padding: 0 var(--spacing-xl) var(--spacing-lg) calc(var(--spacing-xl) + 24px); color: var(--color-text-light); line-height: 1.7; font-size: var(--fs-sm); } .faq-answer-inner p { margin-bottom: var(--spacing-sm); } .faq-answer-inner p:last-child { margin-bottom: 0; } /* ===== BLOG-FAQ (Accordion im Artikel) ===== */ .blog-faq { margin: var(--spacing-lg) 0 var(--spacing-xl); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-bg); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .blog-faq .faq-question { border-bottom: 1px solid var(--color-border-light); } .blog-faq .faq-question:last-child { border-bottom: none; } .blog-faq .faq-question-header { padding: var(--spacing-md) var(--spacing-lg); font-size: var(--fs-base); } .blog-faq .faq-question-text { flex: 1; } .blog-faq .faq-answer-inner { padding: 0 var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) + 20px); font-size: var(--fs-base); color: var(--color-text); } .blog-faq .faq-answer-inner p { line-height: 1.7; } .blog-faq .faq-answer-inner a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .blog-faq .faq-answer-inner a:hover { color: var(--color-accent); } [data-theme="dark"] .blog-faq { background: var(--color-bg-alt); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .blog-faq .faq-question { border-bottom-color: rgba(255,255,255,0.08); } @media (max-width: 768px) { .blog-faq .faq-question-header { padding: var(--spacing-md); font-size: var(--fs-sm); } .blog-faq .faq-answer-inner { padding: 0 var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 20px); font-size: var(--fs-sm); } } /* ===== JUMP LINKS ===== */ .faq-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .faq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--spacing-md); background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-decoration: none; transition: background var(--transition-fast), transform var(--transition-fast); border: 1px solid rgba(0,85,164,0.15); } .faq-chip:hover { background: var(--color-primary); color: #fff; transform: translateY(-1px); } /* ===== EXAMPLE BOX ===== */ .faq-example { background: linear-gradient(135deg, #f0f7ff, #e8f4fd); border: 1px solid rgba(0,85,164,0.15); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--spacing-md) var(--spacing-lg); margin-top: var(--spacing-md); } .faq-example-label { display: flex; align-items: center; gap: var(--spacing-sm); font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); margin-bottom: var(--spacing-sm); } .faq-example p { color: var(--color-text); font-size: var(--fs-sm); margin-bottom: var(--spacing-sm); } /* ===== NO RESULTS ===== */ .faq-no-results { display: none; text-align: center; padding: var(--spacing-3xl); color: var(--color-text-light); } .faq-no-results svg { margin-bottom: var(--spacing-md); opacity: 0.3; } /* ===== MOBILE TABS ===== */ /* Ab 768px: horizontal scrollbar (Tablet-Landscape). Unter 768px (Phone): flex-wrap auf 2+ Zeilen, weil 13 Kategorien sonst unhandliche horizontale Scroll-Strecken erzeugen. */ .faq-mobile-tabs { display: none; overflow-x: auto; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-xl); border-bottom: 1px solid var(--color-border); background: var(--color-bg); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .faq-mobile-tabs::-webkit-scrollbar { display: none; } .faq-mobile-tab { white-space: nowrap; padding: var(--spacing-sm) var(--spacing-lg); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; background: none; color: var(--color-text-light); transition: all var(--transition-fast); flex-shrink: 0; } .faq-mobile-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .faq-layout { grid-template-columns: 1fr; } .faq-sidebar { display: none; } .faq-mobile-tabs { display: flex; } } @media (max-width: 768px) { .faq-category-header { padding: var(--spacing-md); } .faq-question-header { padding: var(--spacing-md); font-size: var(--fs-sm); } .faq-answer-inner { padding: 0 var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 20px); } /* Mobile-only: Filter-Chips brechen auf 2+ Zeilen um, statt horizontal zu scrollen. 13 Kategorien × Chip-Breite überschreiten 3 Viewport-Weiten — das ewige Rüber-Scrollen hat Timo zu Recht gestört. Jetzt sieht man mit einem Blick alle Optionen. */ .faq-mobile-tabs { flex-wrap: wrap; overflow-x: visible; gap: 6px; padding: 12px 14px; justify-content: flex-start; } .faq-mobile-tab { padding: 6px 12px; font-size: 0.82rem; line-height: 1.2; } } /* === Index / Home Page === */ /* ── VERO Sim Teaser Section ─────────────────────────────────── */ .vero-teaser { padding: 5rem 0; background: var(--color-bg); } .vero-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .vero-teaser__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,163,224,0.08); border: 1px solid rgba(0,163,224,0.2); padding: 6px 16px; border-radius: 50px; font-size: 0.78rem; font-weight: 600; color: var(--color-accent); margin-bottom: 1.2rem; } .vero-teaser__title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--color-text); line-height: 1.2; margin-bottom: 1rem; } .vero-teaser__title span { background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .vero-teaser__text { font-size: 0.95rem; color: var(--color-text-light); line-height: 1.7; margin-bottom: 1.5rem; } .vero-teaser__steps { display: flex; align-items: center; gap: 8px; margin-bottom: 1.8rem; flex-wrap: wrap; } .vero-teaser__step { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--color-text); } .vero-teaser__step-num { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: white; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 800; flex-shrink: 0; } .vero-teaser__step-num--danger { background: linear-gradient(135deg, #ef4444, #f59e0b); } .vero-teaser__step-num--success { background: linear-gradient(135deg, #10b981, #059669); } .vero-teaser__step-arrow { color: var(--color-text-light); font-size: 0.75rem; opacity: 0.5; } .vero-teaser__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .vero-teaser__link { font-size: 0.88rem; color: var(--color-accent); text-decoration: none; font-weight: 600; transition: color 0.2s; } .vero-teaser__link:hover { color: var(--color-primary); } .vero-teaser__video { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #0a1628, #0d2240); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: all 0.3s ease; border: 2px solid rgba(0,163,224,0.15); position: relative; overflow: hidden; } .vero-teaser__video:hover { border-color: rgba(0,163,224,0.35); box-shadow: 0 8px 30px rgba(0,85,164,0.15); } .vero-teaser__play { width: 64px; height: 64px; background: rgba(0,163,224,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.25); transition: all 0.3s ease; } .vero-teaser__video:hover .vero-teaser__play { background: rgba(0,163,224,0.4); transform: scale(1.06); } .vero-teaser__video-label { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.6); } @media (max-width: 768px) { .vero-teaser__grid { grid-template-columns: 1fr; gap: 2rem; } .vero-teaser__title { font-size: 1.6rem; } .vero-teaser { padding: 3rem 0; } } @media (max-width: 480px) { .vero-teaser__title { font-size: 1.35rem; } /* 3er-Nummerierung in eine Reihe — kompakter Font + kleinere Bubbles, damit "1 → 2 → 3" mit Labels auf einer Zeile passt. */ .vero-teaser__steps { flex-wrap: nowrap; gap: 3px; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .vero-teaser__step { font-size: 0.7rem; gap: 4px; white-space: nowrap; } .vero-teaser__step-num { width: 22px; height: 22px; font-size: 0.65rem; } .vero-teaser__step-arrow { font-size: 0.7rem; opacity: 0.55; } /* Aktionen nebeneinander statt stacked */ .vero-teaser__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.55rem 0.8rem; } .vero-teaser__actions .btn { padding: 0.6rem 0.85rem; font-size: 0.78rem; flex: 0 0 auto; } .vero-teaser__link { font-size: 0.78rem; } } /* ── Manifesto Section ───────────────────────────────────────── */ .manifesto { position: relative; background: linear-gradient(135deg, #0a1628 0%, #003366 60%, #0a1f3f 100%); padding: 4.5rem 0 3.5rem; } /* Large faded watermark text */ .manifesto__watermark { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; font-family: var(--font-heading); font-size: clamp(5rem, 18vw, 16rem); font-weight: 800; color: rgba(255,255,255,0.03); white-space: nowrap; letter-spacing: -0.04em; line-height: 1; } .manifesto__container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } /* Section eyebrow + headline */ .manifesto__header { text-align: center; margin-bottom: 4.5rem; } .manifesto__eyebrow { display: inline-block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; } .manifesto__title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; color: #ffffff; line-height: 1.15; margin: 0; } .manifesto__title span { color: var(--color-accent); } /* Individual manifesto items */ .manifesto__items { display: flex; flex-direction: column; gap: 2.5rem; } .manifesto__item { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; border-left: 3px solid rgba(0, 163, 224, 0.25); padding-left: 2rem; /* Pre-animation state */ opacity: 0; transform: translateX(-60px); transition: opacity 0.7s ease, transform 0.7s ease; } .manifesto__item.from-right { transform: translateX(60px); } .manifesto__item.is-visible { opacity: 1; transform: translateX(0); } /* Left column: number */ .manifesto__num { font-family: var(--font-heading); font-size: clamp(3rem, 7vw, 5rem); font-weight: 800; line-height: 1; color: rgba(0, 163, 224, 0.15); min-width: 3ch; text-align: right; flex-shrink: 0; transition: color 0.5s ease 0.3s; } .manifesto__item.is-visible .manifesto__num { color: rgba(0, 163, 224, 0.35); } /* Right column: text content */ .manifesto__body {} .manifesto__label { display: inline-block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.45rem; } .manifesto__headline { font-family: var(--font-heading); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 800; color: #ffffff; margin: 0 0 0.75rem; line-height: 1.2; } .manifesto__text { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.72); margin: 0; max-width: 52ch; } /* Divider accent line on hover */ .manifesto__item::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--color-accent); transform: scaleY(0); transform-origin: top; transition: transform 0.4s ease; } .manifesto__item { position: relative; } .manifesto__item:hover::before, .manifesto__item.is-visible:hover { /* subtle glow effect on hover */ } .manifesto__item.is-visible { border-left-color: rgba(0, 163, 224, 0.5); } /* CTA at bottom */ .manifesto__cta { text-align: center; margin-top: 4rem; opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; } .manifesto__cta.is-visible { opacity: 1; transform: translateY(0); } .manifesto__cta-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--color-accent); color: #ffffff; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; padding: 1rem 2.25rem; border-radius: var(--radius-full); text-decoration: none; letter-spacing: 0.02em; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 4px 20px rgba(0, 163, 224, 0.35); } .manifesto__cta-btn:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0, 163, 224, 0.5); } .manifesto__cta-btn svg { transition: transform 0.25s ease; } .manifesto__cta-btn:hover svg { transform: translateX(4px); } /* VERO Mini — animated CTA orbiter, floating over manifesto */ .vero-mini { display: inline-flex; flex-direction: column; align-items: center; gap: 0.75rem; position: absolute; right: 8%; top: 28%; z-index: 5; width: 280px; height: 280px; text-decoration: none; cursor: pointer; } .vero-mini__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(0, 163, 224, 0.25); box-shadow: 0 0 12px rgba(0, 163, 224, 0.08), inset 0 0 12px rgba(0, 163, 224, 0.05); animation: veroMiniPulse 3.5s ease-in-out infinite alternate; } .vero-mini__ring--inner { inset: 18%; border-color: rgba(0, 163, 224, 0.35); box-shadow: 0 0 16px rgba(0, 163, 224, 0.12), inset 0 0 16px rgba(0, 163, 224, 0.08); animation: veroMiniPulseInner 2.8s ease-in-out 0.3s infinite alternate; } @keyframes veroMiniPulse { from { transform: scale(0.96); opacity: 0.5; } to { transform: scale(1.02); opacity: 0.9; } } @keyframes veroMiniPulseInner { from { transform: scale(0.98); opacity: 0.6; } to { transform: scale(1.04); opacity: 1; } } .vero-mini__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; z-index: 2; } /* Lemniscate (∞) float for entire mini orbiter */ .vero-mini { animation: veroLemniscate 18s ease-in-out infinite; } @media (max-width: 1024px) { .vero-mini { display: none; } } @keyframes veroLemniscate { 0% { transform: translate(0, 0); } 12.5%{ transform: translate(60px, -100px); } 25% { transform: translate(100px, 0); } 37.5%{ transform: translate(60px, 100px); } 50% { transform: translate(0, 0); } 62.5%{ transform: translate(-60px, -100px); } 75% { transform: translate(-100px, 0); } 87.5%{ transform: translate(-60px, 100px); } 100% { transform: translate(0, 0); } } .vero-mini__shield { filter: drop-shadow(0 0 14px rgba(0, 163, 224, 0.5)) drop-shadow(0 0 28px rgba(0, 163, 224, 0.15)); transition: filter 0.4s ease; } .vero-mini__label { font-family: var(--font-heading); font-size: 1rem; font-weight: var(--fw-bold); color: #ffffff; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 16px rgba(0, 163, 224, 0.7); animation: labelGlow 3s ease-in-out infinite alternate; } .vero-mini__text { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-family: var(--font-heading); font-size: 0.85rem; font-weight: var(--fw-semibold); color: var(--color-accent); white-space: nowrap; letter-spacing: 0.02em; opacity: 0; transition: opacity 0.3s ease, bottom 0.3s ease; } .vero-mini:hover { animation-play-state: paused; } .vero-mini:hover .vero-mini__text { opacity: 1; bottom: 2px; } .vero-mini:hover .vero-mini__shield { filter: drop-shadow(0 0 20px rgba(0, 163, 224, 0.7)) drop-shadow(0 0 40px rgba(0, 163, 224, 0.3)); } .vero-mini:hover .vero-mini__ring { border-color: rgba(0, 163, 224, 0.5); box-shadow: 0 0 20px rgba(0, 163, 224, 0.2), inset 0 0 20px rgba(0, 163, 224, 0.1); } .vero-mini::before { content: ''; position: absolute; width: 50%; height: 50%; top: 25%; left: 25%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 163, 224, 0.1) 0%, transparent 70%); animation: ambientGlow 4s ease-in-out infinite alternate; pointer-events: none; } /* Responsive */ @media (max-width: 640px) { .manifesto { padding: 4.5rem 0 4rem; } .manifesto__item { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 1.25rem; } .manifesto__num { font-size: 2.5rem; text-align: left; } .manifesto__items { gap: 2rem; } } @media (max-width: 480px) { .manifesto { padding: var(--spacing-xl); } } /* === Über Uns Page === */ /* ============================================ Über uns — Page-specific enhancements ============================================ */ /* page-header: inherits global styles from style.css (.page-header + .page-header--ueber-uns) */ /* --- Page body watermark --- */ .about-body { position: relative; } .about-body::before { content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 550px; height: 550px; background: url('images/logo.svg') no-repeat center / contain; opacity: 0.035; pointer-events: none; z-index: 0; } .about-body > section { position: relative; z-index: 1; } /* --- Über-uns: spacing inherits global reductions, only overrides below --- */ /* --- Intro section --- */ .about-intro { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-3xl); align-items: start; } @media (max-width: 768px) { .about-intro { grid-template-columns: 1fr; gap: var(--spacing-xl); } } .about-intro__photo-wrap { position: sticky; top: calc(var(--header-height-scrolled) + var(--spacing-xl)); } /* Mobile: Sticky deaktivieren — sonst bleibt das Bild oben kleben, während der Text im Hintergrund durchläuft → Text wird unlesbar. Bild kompakter als Block oberhalb des Contents, Text fließt frei. */ @media (max-width: 768px) { .about-intro__photo-wrap { position: static; top: auto; max-width: 320px; margin: 0 auto; } .about-intro .profile-photo { max-width: 100%; } } .profile-photo-placeholder { width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-md); color: var(--color-primary); border: 2px solid var(--color-border); box-shadow: var(--shadow-lg); } .profile-photo-placeholder svg { width: 64px; height: 64px; opacity: 0.5; } .profile-photo-placeholder span { font-size: var(--fs-sm); color: var(--color-text-light); } .profile-photo { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); object-fit: cover; } .about-intro__content h2 { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); color: var(--color-text); margin-bottom: var(--spacing-xs); letter-spacing: -0.02em; } .about-intro__content .lead-badge { display: inline-flex; align-items: center; gap: var(--spacing-sm); background: var(--color-primary-light); color: var(--color-primary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-full); margin-bottom: var(--spacing-lg); letter-spacing: 0.04em; text-transform: uppercase; } .about-intro__content .lead-badge svg { width: 14px; height: 14px; } .about-intro__content p { color: var(--color-text); line-height: 1.8; margin-bottom: var(--spacing-md); } .about-intro__content p:last-child { margin-bottom: 0; } /* ============================================ Timeline Section ============================================ */ .timeline-section { padding: var(--spacing-3xl) 0 var(--spacing-sm); overflow: hidden; position: relative; background: var(--color-bg); } /* ── Inner container: Obsidian Background + Gold Rim ── */ .timeline-section > .container { position: relative; padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-lg); border-radius: 14px; /* Obsidian background */ background-color: #080a12; background-image: radial-gradient(ellipse at 20% 0%, rgba(70, 55, 110, 0.4) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(140, 90, 20, 0.3) 0%, transparent 60%), linear-gradient(140deg, #0b0d15 0%, #141826 50%, #060810 100%); } /* Section header text on obsidian bg */ .timeline-section .section__header h2 { color: #f0e6d0; } .timeline-section .section__subtitle { color: rgba(255, 255, 255, 0.65); } /* Rotating conic shimmer — mask trick = only the 1px border glows */ .timeline-section > .container::before { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1px; background: conic-gradient( from var(--tl-rim-angle, 0deg), /* Shimmer 1 — 0° */ transparent 0%, rgba(240, 200, 80, 0.5) 2%, rgba(255, 225, 100, 0.9) 3.3%, rgba(240, 200, 80, 0.5) 4.6%, transparent 7%, /* Shimmer 2 — 60° */ transparent 14%, rgba(240, 200, 80, 0.45) 15.5%, rgba(255, 225, 100, 0.85) 16.7%, rgba(240, 200, 80, 0.45) 18%, transparent 21%, /* Shimmer 3 — 120° */ transparent 30%, rgba(240, 200, 80, 0.5) 31.5%, rgba(255, 225, 100, 0.9) 33.3%, rgba(240, 200, 80, 0.5) 35%, transparent 38%, /* Shimmer 4 — 180° */ transparent 47%, rgba(240, 200, 80, 0.45) 48.5%, rgba(255, 225, 100, 0.85) 50%, rgba(240, 200, 80, 0.45) 51.5%, transparent 54%, /* Shimmer 5 — 240° */ transparent 63%, rgba(240, 200, 80, 0.5) 64.5%, rgba(255, 225, 100, 0.9) 66.7%, rgba(240, 200, 80, 0.5) 68.5%, transparent 71%, /* Shimmer 6 — 300° */ transparent 80%, rgba(240, 200, 80, 0.45) 81.5%, rgba(255, 225, 100, 0.85) 83.3%, rgba(240, 200, 80, 0.45) 85%, transparent 88%, transparent 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; animation: tl-rim-rotate 12s linear infinite; } /* Static gold border + soft glow halo beneath */ .timeline-section > .container::after { content: ''; position: absolute; inset: 0; border-radius: 14px; border: 1px solid rgba(240, 200, 80, 0.15); box-shadow: inset 0 0 40px rgba(212, 175, 55, 0.04), 0 0 30px rgba(212, 175, 55, 0.06), 0 0 60px rgba(212, 175, 55, 0.03); pointer-events: none; z-index: 0; } @property --tl-rim-angle { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes tl-rim-rotate { to { --tl-rim-angle: 360deg; } } /* Dark mode: slightly brighter glow */ [data-theme="dark"] .timeline-section > .container::after { border-color: rgba(240, 200, 80, 0.2); box-shadow: inset 0 0 50px rgba(212, 175, 55, 0.06), 0 0 40px rgba(212, 175, 55, 0.08), 0 0 80px rgba(212, 175, 55, 0.04); } @media (prefers-reduced-motion: reduce) { .timeline-section > .container::before { animation: none; background: none; border: 1px solid rgba(240, 200, 80, 0.25); border-radius: 14px; -webkit-mask: none; mask: none; padding: 0; } } /* Mobile: tighter padding */ @media (max-width: 768px) { .timeline-section > .container { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-md); } .timeline-section > .container::before, .timeline-section > .container::after { border-radius: 10px; } } /* Timeline z-layering */ .timeline > *:not(.tl-line-glow):not(.timeline-glow) { position: relative; z-index: 2; } /* Old standalone CTA — replaced by finale panel */ .timeline-future-cta { display: none; } .timeline-section .section__header { margin-bottom: var(--spacing-3xl); position: relative; z-index: 1; } .timeline { position: relative; max-width: 900px; margin: 0 auto; padding: var(--spacing-lg) 0; } /* Central vertical line — stops before finale dot */ .timeline::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: var(--tl-line-bottom, 0px); width: 2px; background: linear-gradient(to bottom, transparent 0%, rgba(91, 163, 245, 0.4) 8%, rgba(91, 163, 245, 0.4) 92%, transparent 100%); } @media (max-width: 768px) { .timeline::before { left: 28px; } } .timeline-item { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 0; margin-bottom: var(--spacing-2xl); position: relative; align-items: start; } /* Even items: content left, empty right */ .timeline-item:nth-child(even) .timeline-item__content { grid-column: 1; grid-row: 1; text-align: right; padding-right: var(--spacing-xl); } .timeline-item:nth-child(even) .timeline-item__dot-col { grid-column: 2; grid-row: 1; } .timeline-item:nth-child(even) .timeline-item__spacer { grid-column: 3; grid-row: 1; } /* Odd items: empty left, content right */ .timeline-item:nth-child(odd) .timeline-item__spacer { grid-column: 1; grid-row: 1; } .timeline-item:nth-child(odd) .timeline-item__dot-col { grid-column: 2; grid-row: 1; } .timeline-item:nth-child(odd) .timeline-item__content { grid-column: 3; grid-row: 1; text-align: left; padding-left: var(--spacing-xl); } @media (max-width: 768px) { .timeline-item { grid-template-columns: 56px 1fr; grid-template-rows: auto; } .timeline-item:nth-child(even) .timeline-item__content, .timeline-item:nth-child(odd) .timeline-item__content { grid-column: 2; grid-row: 1; text-align: left; padding-left: var(--spacing-lg); padding-right: 0; } .timeline-item:nth-child(even) .timeline-item__dot-col, .timeline-item:nth-child(odd) .timeline-item__dot-col { grid-column: 1; grid-row: 1; } .timeline-item .timeline-item__spacer { display: none !important; } } .timeline-item__dot-col { display: flex; flex-direction: column; align-items: center; padding-top: var(--spacing-sm); } .timeline-item__dot { width: 52px; height: 52px; border-radius: 50%; background: #0c0e16; border: 3px solid #5ba3f5; display: flex; align-items: center; justify-content: center; color: #5ba3f5; flex-shrink: 0; box-shadow: 0 0 0 6px rgba(91, 163, 245, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform var(--transition-normal), box-shadow var(--transition-normal); position: relative; z-index: 1; } .timeline-item__dot svg { width: 22px; height: 22px; } .timeline-item:hover .timeline-item__dot { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(91, 163, 245, 0.15), 0 4px 16px rgba(0, 0, 0, 0.4); } .timeline-item__content { padding-bottom: var(--spacing-lg); position: relative; z-index: 2; } .timeline-item__year { display: inline-block; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-extrabold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); background: rgba(0, 163, 224, 0.1); border: 1px solid rgba(0, 163, 224, 0.25); padding: 2px 10px; border-radius: var(--radius-full); margin-bottom: var(--spacing-sm); } .timeline-item__title { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--fw-bold); color: #f0e6d0; margin-bottom: var(--spacing-xs); line-height: 1.3; } .timeline-item__desc { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); line-height: 1.65; font-style: italic; padding: var(--spacing-sm) var(--spacing-md); border-left: 3px solid rgba(91, 163, 245, 0.3); background: rgba(255, 255, 255, 0.03); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .timeline-item:nth-child(even) .timeline-item__desc { border-left: none; border-right: 3px solid rgba(91, 163, 245, 0.3); border-radius: var(--radius-md) 0 0 var(--radius-md); } @media (max-width: 768px) { .timeline-item:nth-child(even) .timeline-item__desc { border-left: 3px solid rgba(91, 163, 245, 0.3); border-right: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; } } .timeline-item__spacer { /* visual balance spacer */ } /* Timeline scroll reveal — enhanced */ .timeline-item { opacity: 0; transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } /* Odd items slide in from left */ .timeline-item:nth-child(odd) { transform: translateX(-40px) translateY(20px); } /* Even items slide in from right */ .timeline-item:nth-child(even) { transform: translateX(40px) translateY(20px); } .timeline-item.is-visible { opacity: 1; transform: translateX(0) translateY(0); } .timeline-item:nth-child(1) { transition-delay: 0s; } .timeline-item:nth-child(2) { transition-delay: 0.08s; } .timeline-item:nth-child(3) { transition-delay: 0.16s; } .timeline-item:nth-child(4) { transition-delay: 0.24s; } .timeline-item:nth-child(5) { transition-delay: 0.32s; } .timeline-item:nth-child(6) { transition-delay: 0.40s; } .timeline-item:nth-child(7) { transition-delay: 0.48s; } /* Dot pulse animation on reveal */ .timeline-item__dot { transform: scale(0.6); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s; } .timeline-item.is-visible .timeline-item__dot { transform: scale(1); } /* Year badge slides up */ .timeline-item__year { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s; } .timeline-item.is-visible .timeline-item__year { opacity: 1; transform: translateY(0); } /* Content slides in with slight delay */ .timeline-item__title, .timeline-item__desc { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; } .timeline-item__title { transition-delay: 0.5s; } .timeline-item__desc { transition-delay: 0.6s; } .timeline-item.is-visible .timeline-item__title, .timeline-item.is-visible .timeline-item__desc { opacity: 1; transform: translateY(0); } .timeline-item:nth-child(8) { transition-delay: 0.56s; } .timeline-item:nth-child(9) { transition-delay: 0.64s; } .timeline-item:nth-child(10) { transition-delay: 0.72s; } @media (max-width: 768px) { .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { transform: translateY(30px); } .timeline-item.is-visible { transform: translateY(0); } } /* ===== Timeline Divider: Vergangenheit / Zukunft ===== */ .timeline-divider { position: relative; padding: var(--spacing-3xl) 0; text-align: center; } .timeline-divider__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(to bottom, var(--color-primary), var(--color-accent) 30%, var(--color-accent) 70%, var(--color-accent)); } .timeline-divider__badge { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.15em; text-transform: uppercase; padding: 10px 24px; border-radius: var(--radius-full); box-shadow: 0 0 20px rgba(0, 163, 224, 0.3), 0 4px 15px rgba(0, 85, 164, 0.2); animation: dividerPulse 2.5s ease-in-out infinite; } .timeline-divider__badge svg { width: 16px; height: 16px; animation: dividerSpin 4s linear infinite; } @keyframes dividerPulse { 0%, 100% { box-shadow: 0 0 20px rgba(0, 163, 224, 0.3), 0 4px 15px rgba(0, 85, 164, 0.2); } 50% { box-shadow: 0 0 35px rgba(0, 163, 224, 0.5), 0 4px 20px rgba(0, 85, 164, 0.35); } } @keyframes dividerSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Decorative rays emanating from divider */ .timeline-divider__rays { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; pointer-events: none; z-index: 1; } .timeline-divider__ray { position: absolute; top: 50%; left: 50%; width: 120px; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(0, 163, 224, 0.25), transparent); animation: rayFade 3s ease-in-out infinite; } .timeline-divider__ray:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; } .timeline-divider__ray:nth-child(2) { transform: rotate(45deg); animation-delay: 0.3s; } .timeline-divider__ray:nth-child(3) { transform: rotate(90deg); animation-delay: 0.6s; } .timeline-divider__ray:nth-child(4) { transform: rotate(135deg); animation-delay: 0.9s; } .timeline-divider__ray:nth-child(5) { transform: rotate(180deg); animation-delay: 1.2s; } .timeline-divider__ray:nth-child(6) { transform: rotate(225deg); animation-delay: 1.5s; } .timeline-divider__ray:nth-child(7) { transform: rotate(270deg); animation-delay: 1.8s; } .timeline-divider__ray:nth-child(8) { transform: rotate(315deg); animation-delay: 2.1s; } @keyframes rayFade { 0%, 100% { opacity: 0.15; width: 80px; } 50% { opacity: 0.5; width: 140px; } } /* Future items get an accent glow on their dot */ .timeline-item--future .timeline-item__dot { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 6px rgba(0, 163, 224, 0.1), 0 0 20px rgba(0, 163, 224, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3); } .timeline-item--future:hover .timeline-item__dot { box-shadow: 0 0 0 8px rgba(0, 163, 224, 0.15), 0 0 30px rgba(0, 163, 224, 0.2), 0 4px 16px rgba(0, 0, 0, 0.4); } .timeline-item--future .timeline-item__year { background: rgba(0, 163, 224, 0.12); border-color: rgba(0, 163, 224, 0.3); } /* ══════════════════════════════════════════════ Obsidian-Gold Timeline Scroll Animation ══════════════════════════════════════════════ */ /* ── Line glow: gold spotlight traveling along the center line ── */ .tl-line-glow { position: absolute; left: 50%; width: 6px; height: 120px; transform: translateX(-50%) translateY(-60px); pointer-events: none; z-index: 1; opacity: 0; transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; background: linear-gradient(to bottom, transparent 0%, rgba(212, 175, 55, 0.15) 15%, rgba(212, 175, 55, 0.7) 45%, rgba(255, 215, 80, 0.9) 50%, rgba(212, 175, 55, 0.7) 55%, rgba(212, 175, 55, 0.15) 85%, transparent 100%); border-radius: 3px; filter: blur(3px); } .tl-line-glow.active { opacity: 1; } /* Secondary wide glow aura */ .tl-line-glow::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 80px; background: radial-gradient(ellipse, rgba(212, 175, 55, 0.25) 0%, transparent 70%); pointer-events: none; animation: tl-glow-breathe 2.5s ease-in-out infinite; } @keyframes tl-glow-breathe { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } } /* Remove old glow (replaced by tl-line-glow) */ .timeline-glow { display: none; } /* ── Active panel: Obsidian-Gold highlight ── */ .timeline-item.tl-active .timeline-item__content { position: relative; } .timeline-item.tl-active .timeline-item__desc { border-left-color: rgba(212, 175, 55, 0.6) !important; border-right-color: rgba(212, 175, 55, 0.6) !important; background: linear-gradient(135deg, rgb(18, 15, 8) 0%, rgb(22, 19, 10) 50%, rgb(18, 15, 8) 100%); box-shadow: 0 0 25px rgba(212, 175, 55, 0.15), 0 0 50px rgba(212, 175, 55, 0.08), 0 4px 20px rgba(0, 0, 0, 0.3); transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* Gold shimmer sweep on active card */ .timeline-item.tl-active .timeline-item__desc::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(105deg, transparent 40%, rgba(212, 175, 55, 0.08) 45%, rgba(255, 225, 100, 0.15) 50%, rgba(212, 175, 55, 0.08) 55%, transparent 60%); animation: tl-shimmer 3s ease-in-out infinite; pointer-events: none; border-radius: inherit; } .timeline-item__desc { position: relative; overflow: hidden; z-index: 5; isolation: isolate; } @keyframes tl-shimmer { 0% { left: -100%; } 100% { left: 200%; } } /* Active year badge turns gold */ .timeline-item.tl-active .timeline-item__year { background: rgba(212, 175, 55, 0.12); border-color: rgba(212, 175, 55, 0.4); color: #b8860b; transition: all 0.4s ease; } .timeline-item.tl-active .timeline-item__title { color: #f0e6d0; transition: color 0.4s ease; } /* ── Passed panels: subtle warm afterglow ── */ .timeline-item.tl-passed .timeline-item__desc { border-left-color: rgba(212, 175, 55, 0.2) !important; border-right-color: rgba(212, 175, 55, 0.2) !important; transition: all 0.6s ease; } .timeline-item.tl-passed .timeline-item__year { background: rgba(212, 175, 55, 0.06); border-color: rgba(212, 175, 55, 0.15); color: #c9a84c; transition: all 0.6s ease; } /* ── Dot: gold pulse ring on active ── */ .timeline-item__dot { position: relative; } .tl-pulse-ring { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(212, 175, 55, 0); pointer-events: none; box-sizing: border-box; } .timeline-item.tl-active .timeline-item__dot { border-color: #d4af37 !important; color: #d4af37 !important; box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.15), 0 0 20px rgba(212, 175, 55, 0.25), 0 0 40px rgba(212, 175, 55, 0.1) !important; transform: scale(1.15); transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .timeline-item.tl-active .tl-pulse-ring { animation: tl-dot-pulse 2s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes tl-dot-pulse { 0% { width: 100%; height: 100%; border-color: rgba(212, 175, 55, 0.6); opacity: 1; } 100% { width: 220%; height: 220%; border-color: rgba(212, 175, 55, 0); opacity: 0; } } /* Passed dots: warm gold afterglow */ .timeline-item.tl-passed .timeline-item__dot { border-color: rgba(212, 175, 55, 0.4) !important; color: rgba(212, 175, 55, 0.5) !important; box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.06), 0 0 12px rgba(212, 175, 55, 0.08) !important; transition: all 0.6s ease; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .tl-line-glow::after, .timeline-item.tl-active .timeline-item__desc::before, .timeline-item.tl-active .tl-pulse-ring { animation: none; } .tl-line-glow { transition: none; } } /* ── Mobile: line glow follows left-aligned dots ── */ @media (max-width: 768px) { .tl-line-glow { left: 28px; } } /* ══════════════════════════════════════════════ SSJ Aura — Obsidian-Gold Power Animation ══════════════════════════════════════════════ */ /* ── Dot icon stays above all aura/flame layers ── */ .timeline-item__dot > svg, .timeline-item__dot > img { position: relative; z-index: 10; } /* Solid circle behind icon, above flames — masks rays inside the dot */ .timeline-item__dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; z-index: 2; } /* ── Base aura: symmetrical glow ring, only on active ── */ .tl-aura { position: absolute; top: 50%; left: 50%; width: calc(100% * var(--tl-power, 1)); height: calc(100% * var(--tl-power, 1)); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; z-index: 0; } .timeline-item.tl-active .tl-aura { opacity: 1; } /* Inner glow: gold radial */ .tl-aura::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.12) 35%, rgba(212, 175, 55, 0) 70%); animation: tl-aura-pulse 1.8s ease-in-out infinite; transform: scale(var(--tl-power, 1)); } /* Outer shimmer ring */ .tl-aura::after { content: ''; position: absolute; inset: -50%; border-radius: 50%; background: radial-gradient(circle, transparent 40%, rgba(255, 215, 80, 0.08) 55%, rgba(212, 175, 55, 0.04) 65%, transparent 75%); animation: tl-aura-flicker 2.4s ease-in-out infinite alternate; transform: scale(var(--tl-power, 1)); } @keyframes tl-aura-pulse { 0%, 100% { opacity: 0.7; transform: scale(calc(var(--tl-power, 1) * 0.95)); } 50% { opacity: 1; transform: scale(calc(var(--tl-power, 1) * 1.15)); } } @keyframes tl-aura-flicker { 0% { opacity: 0.4; transform: scale(calc(var(--tl-power, 1) * 0.9)); } 33% { opacity: 0.8; transform: scale(calc(var(--tl-power, 1) * 1.05)); } 66% { opacity: 0.5; transform: scale(calc(var(--tl-power, 1) * 1.1)); } 100% { opacity: 0.9; transform: scale(calc(var(--tl-power, 1) * 1.0)); } } /* ── Sun rays: 6 elements × 2 mirrored = 12 radial rays ── */ .tl-flame { position: absolute; top: 50%; left: 50%; width: calc(3px * var(--tl-power, 1)); height: calc(30px * var(--tl-power, 1)); pointer-events: none; opacity: 0; z-index: 1; transform-origin: 50% 0%; /* rotate around the center-of-dot */ border-radius: 2px 2px 1px 1px; background: linear-gradient(to bottom, rgba(212, 175, 55, 0.3) 0%, rgba(255, 225, 100, 0.12) 60%, transparent 100%); } .timeline-item.tl-active .tl-flame { animation: tl-ray-breathe 2s ease-in-out infinite alternate; } /* 6 rays at 30° intervals (0, 30, 60, 90, 120, 150). ::after mirrors each +180° → 12 total visible rays. Varied heights for organic, sun-like look. */ .tl-flame--1 { height: calc(30px * var(--tl-power, 1)); transform: rotate(0deg); } .tl-flame--2 { height: calc(25px * var(--tl-power, 1)); transform: rotate(30deg); } .tl-flame--3 { height: calc(33px * var(--tl-power, 1)); transform: rotate(60deg); } .tl-flame--4 { height: calc(27px * var(--tl-power, 1)); transform: rotate(90deg); } .tl-flame--5 { height: calc(31px * var(--tl-power, 1)); transform: rotate(120deg); } .tl-flame--6 { height: calc(24px * var(--tl-power, 1)); transform: rotate(150deg); } /* Stagger the breathing per ray (slight offset so they don't pulse in sync) */ .timeline-item.tl-active .tl-flame--1 { animation-delay: 0s; } .timeline-item.tl-active .tl-flame--2 { animation-delay: -0.3s; } .timeline-item.tl-active .tl-flame--3 { animation-delay: -0.6s; } .timeline-item.tl-active .tl-flame--4 { animation-delay: -0.9s; } .timeline-item.tl-active .tl-flame--5 { animation-delay: -1.2s; } .timeline-item.tl-active .tl-flame--6 { animation-delay: -1.5s; } /* Mirror: ::after extends in the opposite direction */ .tl-flame::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; background: inherit; transform-origin: 50% 0%; transform: rotate(180deg); } /* Animate opacity + scale (standalone property, won't override transform rotation) */ @keyframes tl-ray-breathe { 0% { opacity: 0.45; scale: 1 0.8; } 100% { opacity: 1; scale: 1 1.25; } } /* ── Obsidian portal shadow beneath dot — disabled (visual clutter) ── */ .tl-obsidian-shadow { display: none; } @keyframes tl-shadow-breathe { 0%, 100% { transform: translateX(-50%) scaleY(0.35) scaleX(0.9); } 50% { transform: translateX(-50%) scaleY(0.5) scaleX(1.1); } } /* ── Spark particles ── */ .tl-sparks { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; } .tl-spark { position: absolute; display: block; border-radius: 50%; opacity: 0; } .timeline-item.tl-active .tl-spark { animation: tl-spark-radial 2s cubic-bezier(0.22, 1, 0.36, 1) infinite; /* Small stagger so they don't all fire at once — but still sync with 2s pulse */ animation-delay: calc(var(--spark-i, 0) * 0.06s); } /* Gold sparks: bright, small */ .tl-spark--gold { width: calc(3px * var(--tl-power, 1)); height: calc(3px * var(--tl-power, 1)); background: radial-gradient(circle, #ffe680 30%, rgba(212, 175, 55, 0.8) 100%); box-shadow: 0 0 calc(4px * var(--tl-power, 1)) rgba(255, 215, 80, 0.6); } /* Obsidian sparks: dark, slightly larger, ember glow edge */ .tl-spark--obsidian { width: calc(4px * var(--tl-power, 1)); height: calc(4px * var(--tl-power, 1)); background: radial-gradient(circle, #1a1008 40%, rgba(60, 40, 10, 0.9) 100%); box-shadow: 0 0 calc(5px * var(--tl-power, 1)) rgba(180, 130, 20, 0.3); } /* Radial spark: flies outward along --spark-angle, synced with 2s pulse */ @keyframes tl-spark-radial { 0% { opacity: 0; transform: rotate(var(--spark-angle, 0deg)) translateY(0) scale(0.4); } 10% { opacity: 1; transform: rotate(var(--spark-angle, 0deg)) translateY(calc(-12px * var(--tl-power, 1))) scale(1); } 60% { opacity: 0.6; transform: rotate(var(--spark-angle, 0deg)) translateY(calc(-35px * var(--tl-power, 1))) scale(0.7); } 100% { opacity: 0; transform: rotate(var(--spark-angle, 0deg)) translateY(calc(-55px * var(--tl-power, 1))) scale(0.2); } } /* ── Launch Burst: one-shot horizontal SSJ flash ── */ .tl-launch-item .timeline-item__dot::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 8px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 10; border-radius: 3px; background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.3) 10%, rgba(255, 225, 100, 0.8) 35%, rgba(255, 255, 240, 1) 50%, rgba(255, 225, 100, 0.8) 65%, rgba(212, 175, 55, 0.3) 90%, transparent 100%); } /* Horizontal shockwave line */ .tl-launch-item .tl-obsidian-shadow::after { content: ''; position: absolute; top: -10px; left: 50%; width: 0; height: 4px; transform: translateX(-50%); pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 20%, rgba(212, 175, 55, 0.6) 50%, rgba(0, 0, 0, 0.5) 80%, transparent 100%); } /* When burst fires */ .timeline-item.tl-burst .timeline-item__dot::after { animation: tl-burst-flash 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .timeline-item.tl-burst .tl-obsidian-shadow::after { animation: tl-burst-shockwave 2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; } @keyframes tl-burst-flash { 0% { width: 0; height: 8px; opacity: 1; } 30% { width: 1200px; height: 12px; opacity: 1; } 60% { width: 1800px; height: 6px; opacity: 0.8; } 100% { width: 2400px; height: 2px; opacity: 0; } } @keyframes tl-burst-shockwave { 0% { width: 0; height: 4px; opacity: 1; } 50% { width: 1000px; height: 6px; opacity: 0.7; } 100% { width: 1600px; height: 2px; opacity: 0; } } /* ── Finale Dot: last stop, centered dot + content below ── */ .timeline-item--finale { grid-template-columns: 1fr !important; grid-template-rows: auto auto; justify-items: center; text-align: center; padding-bottom: var(--spacing-xs); padding-top: var(--spacing-sm); } .timeline-item--finale .timeline-item__spacer { display: none; } .timeline-item--finale .timeline-item__dot-col, .timeline-item--finale:nth-child(even) .timeline-item__dot-col, .timeline-item--finale:nth-child(odd) .timeline-item__dot-col { grid-column: 1; grid-row: 1; justify-self: center; } .timeline-item--finale .timeline-item__content, .timeline-item--finale:nth-child(even) .timeline-item__content, .timeline-item--finale:nth-child(odd) .timeline-item__content { grid-column: 1; grid-row: 2; text-align: center; padding-left: var(--spacing-md); padding-right: var(--spacing-md); max-width: 560px; } .timeline-item--finale .timeline-item__dot { width: 68px; height: 68px; border-width: 4px; } .timeline-item--finale .timeline-item__dot > svg { width: 28px; height: 28px; } /* Finale desc: gold border TOP, centered */ .timeline-item--finale .timeline-item__desc { border-left: none !important; border-right: none !important; border-top: 3px solid rgba(212, 175, 55, 0.6); border-radius: var(--radius-md); text-align: center; padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); } /* CTA buttons inside the panel */ .timeline-finale-cta { display: flex; gap: var(--spacing-sm); justify-content: center; margin-top: var(--spacing-md); font-style: normal; } /* WhatsApp button inside timeline finale — inherits .btn base sizing */ .timeline-finale-cta .btn--whatsapp { background: #25D366; color: #fff; border-color: #25D366; gap: 8px; } .timeline-finale-cta .btn--whatsapp:hover { background: #1fb855; border-color: #1fb855; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3); color: #fff; } .timeline-finale-cta .btn--whatsapp svg { flex-shrink: 0; } /* Active finale: extra glow intensity */ .timeline-item--finale.tl-active .timeline-item__dot { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.2), 0 0 30px rgba(212, 175, 55, 0.35), 0 0 60px rgba(212, 175, 55, 0.18), 0 0 100px rgba(212, 175, 55, 0.08) !important; } /* Finale active desc: override side borders, keep top gold */ .timeline-item--finale.tl-active .timeline-item__desc { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: rgba(212, 175, 55, 0.8) !important; } /* Dark mode finale */ [data-theme="dark"] .timeline-item--finale.tl-active .timeline-item__desc { border-top-color: rgba(255, 215, 80, 0.7) !important; } [data-theme="dark"] .timeline-item--finale.tl-active .timeline-item__dot { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.25), 0 0 35px rgba(212, 175, 55, 0.45), 0 0 80px rgba(212, 175, 55, 0.25), 0 0 130px rgba(212, 175, 55, 0.12) !important; } [data-theme="dark"] .btn--whatsapp { background: #22c55e; } [data-theme="dark"] .btn--whatsapp:hover { background: #16a34a; box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35); } /* ── Reduced motion: disable all SSJ animations ── */ @media (prefers-reduced-motion: reduce) { .tl-aura::before, .tl-aura::after, .tl-flame, .tl-spark, .tl-obsidian-shadow, .timeline-item.tl-burst .timeline-item__dot::after, .timeline-item.tl-burst .tl-obsidian-shadow::after { animation: none !important; } } /* ── Mobile SSJ: slightly smaller but still visible ── */ @media (max-width: 768px) { .tl-flame { display: none; } .tl-sparks { display: none; } .tl-aura::before { inset: -20%; } .tl-aura::after { inset: -35%; } /* Finale: keep centered layout on mobile */ .timeline-item--finale { grid-template-columns: 1fr !important; justify-items: center; } .timeline-item--finale .timeline-item__dot-col { grid-column: 1 !important; grid-row: 1; } .timeline-item--finale .timeline-item__content { grid-column: 1 !important; grid-row: 2; padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } .timeline-finale-cta { flex-direction: column; align-items: center; } } @media (max-width: 768px) { .timeline-divider__rays { display: none; } .timeline-divider__line { left: 28px; } .timeline-glow { left: 28px; } } /* ============================================ Schwerpunkte Cards — enhanced icon ============================================ */ .card__icon-svg { width: 48px; height: 48px; margin: 0 auto var(--spacing-md); background: var(--color-primary-light); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: background var(--transition-normal), transform var(--transition-normal); } .card:hover .card__icon-svg { background: var(--color-primary); color: #fff; transform: scale(1.08); } .card__icon-svg svg { width: 26px; height: 26px; } /* Subtle card variant for Schwerpunkte (content TBD) */ .card--subtle { background: transparent; border: 1px solid var(--color-border); box-shadow: none; } .card--subtle:hover { background: var(--color-bg); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .card--subtle .card__icon-svg { background: transparent; border: 1px solid var(--color-border); } .card--subtle:hover .card__icon-svg { background: var(--color-primary-light); color: var(--color-primary); transform: none; } a.card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; cursor: pointer; } a.card--link:hover { color: inherit; } a.card--link .card__title, a.card--link .card__text { color: inherit; } /* ============================================ Warum selbstversichert? — USP Cards ============================================ */ .usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-2xl); } .usp-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--spacing-xl); text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .usp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); } .usp-card__icon { width: 56px; height: 56px; margin: 0 auto var(--spacing-md); background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: background var(--transition-normal), transform var(--transition-normal); } .usp-card:hover .usp-card__icon { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; transform: scale(1.1); } .usp-card__icon svg { width: 28px; height: 28px; } .usp-card__title { font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: var(--spacing-sm); } .usp-card__text { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.65; } /* USP card reveal */ .usp-card { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow var(--transition-normal), border-color var(--transition-normal); } .usp-card.is-visible { opacity: 1; transform: translateY(0); } .usp-card:nth-child(1) { transition-delay: 0s; } .usp-card:nth-child(2) { transition-delay: 0.1s; } .usp-card:nth-child(3) { transition-delay: 0.2s; } .usp-card:nth-child(4) { transition-delay: 0.3s; } /* USP wave animation — sequential highlight cycling */ @keyframes usp-wave-glow { 0% { box-shadow: var(--shadow-sm); border-color: var(--color-border); } 15% { box-shadow: 0 4px 24px rgba(0,85,164,0.18), 0 0 0 2px rgba(0,163,224,0.25); border-color: var(--color-accent); transform: translateY(-5px); } 40% { box-shadow: 0 4px 24px rgba(0,85,164,0.18), 0 0 0 2px rgba(0,163,224,0.25); border-color: var(--color-accent); transform: translateY(-5px); } 55% { box-shadow: var(--shadow-sm); border-color: var(--color-border); transform: translateY(0); } 100% { box-shadow: var(--shadow-sm); border-color: var(--color-border); transform: translateY(0); } } @keyframes usp-wave-icon { 0% { background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); color: var(--color-primary); transform: scale(1); } 15% { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; transform: scale(1.1); } 40% { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; transform: scale(1.1); } 55% { background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); color: var(--color-primary); transform: scale(1); } 100% { background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); color: var(--color-primary); transform: scale(1); } } .usp-card.is-visible.usp-wave-active { animation: usp-wave-glow 12s ease-in-out infinite; } .usp-card.is-visible.usp-wave-active .usp-card__icon { animation: usp-wave-icon 12s ease-in-out infinite; } /* Stagger each card: 3s per card in a 12s cycle (4×2.4s = 9.6s active + 2.4s pause) */ .usp-card:nth-child(1).usp-wave-active, .usp-card:nth-child(1).usp-wave-active .usp-card__icon { animation-delay: 0s; } .usp-card:nth-child(2).usp-wave-active, .usp-card:nth-child(2).usp-wave-active .usp-card__icon { animation-delay: 3s; } .usp-card:nth-child(3).usp-wave-active, .usp-card:nth-child(3).usp-wave-active .usp-card__icon { animation-delay: 6s; } .usp-card:nth-child(4).usp-wave-active, .usp-card:nth-child(4).usp-wave-active .usp-card__icon { animation-delay: 9s; } /* Pause wave on hover — user is reading */ .usp-card.usp-wave-active:hover, .usp-card.usp-wave-active:hover .usp-card__icon { animation-play-state: paused; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .usp-card.usp-wave-active, .usp-card.usp-wave-active .usp-card__icon { animation: none; } } /* Dark mode wave colors */ [data-theme="dark"] .usp-card.is-visible.usp-wave-active { animation-name: usp-wave-glow-dark; } [data-theme="dark"] .usp-card.is-visible.usp-wave-active .usp-card__icon { animation-name: usp-wave-icon-dark; } @keyframes usp-wave-glow-dark { 0% { box-shadow: var(--shadow-sm); border-color: var(--color-border); } 15% { box-shadow: 0 4px 28px rgba(91,163,245,0.2), 0 0 0 2px rgba(91,163,245,0.3); border-color: rgba(91,163,245,0.5); transform: translateY(-5px); } 40% { box-shadow: 0 4px 28px rgba(91,163,245,0.2), 0 0 0 2px rgba(91,163,245,0.3); border-color: rgba(91,163,245,0.5); transform: translateY(-5px); } 55% { box-shadow: var(--shadow-sm); border-color: var(--color-border); transform: translateY(0); } 100% { box-shadow: var(--shadow-sm); border-color: var(--color-border); transform: translateY(0); } } @keyframes usp-wave-icon-dark { 0% { background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); color: #5ba3f5; transform: scale(1); } 15% { background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; transform: scale(1.1); } 40% { background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; transform: scale(1.1); } 55% { background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); color: #5ba3f5; transform: scale(1); } 100% { background: linear-gradient(135deg, var(--color-primary-light), #dbeafe); color: #5ba3f5; transform: scale(1); } } /* ============================================ Warum-Name section ============================================ */ .name-section { background: var(--color-bg-alt); } .name-highlight-box { border-left: 4px solid var(--color-primary); background: var(--color-bg); padding: var(--spacing-xl); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: var(--spacing-xl) 0; box-shadow: var(--shadow-sm); } .name-highlight-box strong { color: var(--color-primary); } /* ============================================ WhatsApp Service Page ============================================ */ /* ============================================ Schwerpunkte — Coverflow Placeholder Icons ============================================ */ .schwerpunkt-img { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary-light) 0%, #dbeafe 100%); min-height: 180px; } .schwerpunkt-img__icon { width: 72px; height: 72px; background: var(--color-primary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 24px rgba(0, 85, 164, 0.25); } .schwerpunkt-img__icon svg { width: 36px; height: 36px; } [data-theme="dark"] .schwerpunkt-img { background: linear-gradient(135deg, rgba(91, 163, 245, 0.12) 0%, rgba(91, 163, 245, 0.22) 100%); } [data-theme="dark"] .schwerpunkt-img__icon { background: linear-gradient(135deg, #2563eb, #38bdf8); } /* ============================================ Name-Manifesto — "Warum selbstversichert?" (Ueber-uns) Kopiert den visuellen Stil der Mainpage-Manifesto-Section ============================================ */ .name-manifesto { position: relative; background: linear-gradient(135deg, #0a1628 0%, #003366 60%, #0a1f3f 100%); padding: 4.5rem 0 3.5rem; } .name-manifesto__watermark { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; font-family: var(--font-heading); font-size: clamp(5rem, 18vw, 16rem); font-weight: 800; color: rgba(255,255,255,0.03); white-space: nowrap; letter-spacing: -0.04em; line-height: 1; } .name-manifesto__container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .name-manifesto__header { text-align: center; margin-bottom: 4.5rem; } .name-manifesto__eyebrow { display: inline-block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; } .name-manifesto__title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; color: #ffffff; line-height: 1.15; margin: 0; } .name-manifesto__intro, .name-manifesto__outro { color: rgba(255,255,255,0.82); font-size: 1.05rem; line-height: 1.75; max-width: 52ch; margin: 0 auto 2.5rem; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .name-manifesto__intro.is-visible, .name-manifesto__outro.is-visible { opacity: 1; transform: translateY(0); } .name-manifesto__outro { margin-top: 3rem; margin-bottom: 0; } .name-manifesto__outro a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; } .name-manifesto__items { display: flex; flex-direction: column; gap: 2.5rem; } .name-manifesto__item { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; border-left: 3px solid rgba(0, 163, 224, 0.25); padding-left: 2rem; opacity: 0; transform: translateX(-60px); transition: opacity 0.7s ease, transform 0.7s ease; } .name-manifesto__item.from-right { transform: translateX(60px); } .name-manifesto__item.is-visible { opacity: 1; transform: translateX(0); } .name-manifesto__item:hover { border-left-color: rgba(0, 163, 224, 0.5); } .name-manifesto__num { font-family: var(--font-heading); font-size: clamp(3rem, 7vw, 5rem); font-weight: 800; line-height: 1; color: rgba(0, 163, 224, 0.15); min-width: 3ch; text-align: right; flex-shrink: 0; transition: color 0.5s ease 0.3s; } .name-manifesto__item.is-visible .name-manifesto__num { color: rgba(0, 163, 224, 0.35); } .name-manifesto__label { display: inline-block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.45rem; } .name-manifesto__headline { font-family: var(--font-heading); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 800; color: #ffffff; line-height: 1.2; margin: 0 0 0.75rem; } .name-manifesto__text { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.72); max-width: 52ch; } /* Mobile: single column, smaller numbers */ @media (max-width: 640px) { .name-manifesto { padding: 3rem 0 2.5rem; } .name-manifesto__header { margin-bottom: 2rem; } .name-manifesto__item { grid-template-columns: 1fr; gap: 0.5rem; } .name-manifesto__num { font-size: 2.5rem; text-align: left; } .name-manifesto__items { gap: 2rem; } } /* Dark-mode overrides (section is already dark, but ensure theme consistency) */ [data-theme="dark"] .name-manifesto { background: linear-gradient(135deg, #050810 0%, #0a1a33 60%, #050d1a 100%); } [data-theme="dark"] .name-manifesto__watermark { color: rgba(255,255,255,0.02); } /* ============================================ Versprechen-Card Logo Float-Animation ============================================ */ @keyframes logoFloat { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-6px) rotate(3deg); } 50% { transform: translateY(-2px) rotate(0deg); } 75% { transform: translateY(-8px) rotate(-3deg); } 100% { transform: translateY(0) rotate(0deg); } } .versprechen-logo { animation: logoFloat 6s ease-in-out infinite; } .versprechen-logo--allianz { animation-delay: -3s; /* offset so logos don't sync */ } @media (prefers-reduced-motion: reduce) { .versprechen-logo { animation: none; } } /* Page Header — WhatsApp logo watermark + chat bubbles */ .page-header--whatsapp::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 65 L15 25 C15 20 20 15 25 15 L75 15 C80 15 85 20 85 25 L85 55 C85 60 80 65 75 65 L35 65 L20 80 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 65 L15 25 C15 20 20 15 25 15 L75 15 C80 15 85 20 85 25 L85 55 C85 60 80 65 75 65 L35 65 L20 80 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.05'/%3E%3C/svg%3E"); background-size: 120px 120px, 80px 80px, 50px 50px; } /* ===== WhatsApp Hero Grid ===== */ .page-header--whatsapp-hero { padding-top: 100px; padding-bottom: var(--spacing-xl); min-height: 400px; display: flex; align-items: center; } .wa-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); align-items: center; } /* Hero title with WhatsApp icon */ .wa-hero-title { display: block; } .wa-hero-title__wa-icon { display: inline-block; vertical-align: middle; width: 0.85em; height: 0.85em; margin-left: 0.1em; position: relative; top: -0.05em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } /* Typing dots in hero text */ .wa-typing-dots--hero { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 5px; position: relative; top: 3px; } .wa-typing-dots--hero span { width: 7px; height: 7px; background: rgba(255,255,255,0.7); } .wa-hero-grid__text h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--spacing-lg); line-height: 1.2; } .wa-hero-grid__text p { color: rgba(255, 255, 255, 0.9); font-size: var(--fs-lg); line-height: 1.7; max-width: 480px; } .wa-hero-grid__chat { display: flex; justify-content: center; } .wa-chat--hero { max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .wa-chat--hero .wa-chat__body { background: linear-gradient(180deg, #001a36 0%, #000e1f 100%); background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 34c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm-90 60c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm-90 60c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8z' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E"); } .wa-chat--hero .wa-chat__date { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); } .wa-chat--hero .wa-msg--incoming .wa-msg__bubble { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px); } .wa-chat--hero .wa-msg--outgoing .wa-msg__bubble { background: rgba(37, 211, 102, 0.3); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px); } .wa-chat--hero .wa-msg__meta { color: rgba(255, 255, 255, 0.6); } .wa-chat--hero .wa-msg__checks--read { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' width='16' height='11'%3E%3Cpath d='M11.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-2.011-2.085a.46.46 0 0 0-.349-.164.464.464 0 0 0-.355.157.477.477 0 0 0-.013.636l2.32 2.408a.471.471 0 0 0 .348.165h.015a.47.47 0 0 0 .357-.182l6.578-8.114a.484.484 0 0 0-.015-.533z' fill='%237dd3fc'/%3E%3Cpath d='M15.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-1.2-1.244-.466.575 1.36 1.412a.471.471 0 0 0 .348.165h.015a.47.47 0 0 0 .357-.182l6.578-8.114a.484.484 0 0 0-.015-.533z' fill='%237dd3fc'/%3E%3C/svg%3E"); } .wa-chat--hero .wa-msg--typing .wa-msg__bubble { background: rgba(255, 255, 255, 0.12); } .wa-chat--hero .wa-typing-dots span { background: rgba(255, 255, 255, 0.6); } @media (max-width: 960px) { .wa-hero-grid { grid-template-columns: 1fr; text-align: center; gap: var(--spacing-2xl); } .wa-hero-grid__text p { max-width: 100%; margin: 0 auto; } .page-header--whatsapp-hero { min-height: auto; padding-top: 88px; } } @media (max-width: 600px) { .wa-chat--hero { max-width: 100%; } } /* ===== WhatsApp Chat Widget ===== */ .wa-chat { max-width: 520px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid var(--color-border-light); } .wa-chat--compact { margin-top: var(--spacing-xl); } .wa-chat-demo-label { font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-text); margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-sm); text-align: center; } .wa-chat-demo-label::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #25D366; margin-right: var(--spacing-sm); vertical-align: middle; } .wa-chat__header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #075E54; color: #fff; min-height: 56px; box-sizing: border-box; } .wa-chat__header-info { text-align: left; } .wa-chat__header--sm { padding: 8px 12px; min-height: 48px; } .wa-chat__avatar { width: 36px; height: 36px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 14px; flex-shrink: 0; } .wa-chat__avatar--sm { width: 30px; height: 30px; font-size: 12px; } .wa-chat__avatar--logo { background: #ffffff; padding: 0; overflow: hidden; } .wa-chat__avatar--logo img { display: block; width: 90%; height: 90%; margin: 5% auto; object-fit: contain; } [data-theme="dark"] .wa-chat__avatar--logo { background: #ffffff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); } .wa-chat__name { display: block; font-family: 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2; } .wa-chat__header--sm .wa-chat__name { font-size: 14px; } .wa-chat__status { display: block; font-family: 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 13px; opacity: 0.8; line-height: 1.2; } .wa-chat__header--sm .wa-chat__status { font-size: 12px; } .wa-chat__body { background: #ECE5DD; padding: 8px 16px; display: flex; flex-direction: column; gap: 2px; text-align: left; background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 34c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm-90 60c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm-90 60c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8z' fill='%23d4cdc4' fill-opacity='0.15'/%3E%3C/svg%3E"); } .wa-chat__body--sm { padding: 6px 12px; } .wa-chat__date { text-align: center; margin-bottom: var(--spacing-sm); } .wa-chat__date { display: inline-block; background: rgba(225, 218, 208, 0.9); color: #54656f; font-size: 12px; padding: 5px 12px; border-radius: 7.5px; margin: 4px auto 8px; font-family: 'Segoe UI', Helvetica, Arial, sans-serif; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); } /* Message Bubbles */ .wa-msg { display: flex; margin-bottom: 2px; } .wa-msg--incoming { justify-content: flex-start; } .wa-msg--outgoing { justify-content: flex-end; } .wa-msg__bubble { max-width: 85%; padding: 7px 9px 6px; border-radius: 7.5px; font-family: 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14.2px; line-height: 19px; position: relative; word-wrap: break-word; text-align: left; color: #111b21; } .wa-msg--incoming .wa-msg__bubble { background: #fff; border-top-left-radius: 0; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); } .wa-msg--outgoing .wa-msg__bubble { background: #d9fdd3; border-top-right-radius: 0; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); } .wa-msg__meta { display: inline-flex; align-items: center; gap: 3px; float: right; font-size: 11px; color: rgba(0,0,0,0.45); margin-left: 8px; margin-top: 3px; white-space: nowrap; } .wa-msg__checks { display: inline-block; width: 16px; height: 11px; margin-left: 2px; vertical-align: middle; position: relative; top: -1px; } .wa-msg__checks--read { color: #53bdeb; } /* Double-check SVG via CSS background */ .wa-msg__checks { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' width='16' height='11'%3E%3Cpath d='M11.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-2.011-2.085a.46.46 0 0 0-.349-.164.464.464 0 0 0-.355.157.477.477 0 0 0-.013.636l2.32 2.408a.471.471 0 0 0 .348.165h.015a.47.47 0 0 0 .357-.182l6.578-8.114a.484.484 0 0 0-.015-.533z' fill='%238696a0'/%3E%3Cpath d='M15.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-1.2-1.244-.466.575 1.36 1.412a.471.471 0 0 0 .348.165h.015a.47.47 0 0 0 .357-.182l6.578-8.114a.484.484 0 0 0-.015-.533z' fill='%238696a0'/%3E%3C/svg%3E") no-repeat center; background-size: contain; font-size: 0; line-height: 0; } .wa-msg__checks--read { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' width='16' height='11'%3E%3Cpath d='M11.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-2.011-2.085a.46.46 0 0 0-.349-.164.464.464 0 0 0-.355.157.477.477 0 0 0-.013.636l2.32 2.408a.471.471 0 0 0 .348.165h.015a.47.47 0 0 0 .357-.182l6.578-8.114a.484.484 0 0 0-.015-.533z' fill='%2353bdeb'/%3E%3Cpath d='M15.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-1.2-1.244-.466.575 1.36 1.412a.471.471 0 0 0 .348.165h.015a.47.47 0 0 0 .357-.182l6.578-8.114a.484.484 0 0 0-.015-.533z' fill='%2353bdeb'/%3E%3C/svg%3E"); } /* Typing indicator — compact bubble, more rounded than normal messages */ .wa-msg--typing .wa-msg__bubble { background: #fff; border-radius: 18px; border-top-left-radius: 4px; padding: 6px 12px; min-width: 52px; box-sizing: border-box; } .wa-msg--typing.wa-msg--outgoing .wa-msg__bubble { background: #d9fdd3; border-radius: 18px; border-top-right-radius: 4px; border-top-left-radius: 18px; } .wa-chat--hero .wa-msg--typing.wa-msg--outgoing .wa-msg__bubble { background: rgba(37, 211, 102, 0.3); } .wa-chat--hero .wa-msg--typing.wa-msg--incoming .wa-msg__bubble { background: rgba(255, 255, 255, 0.16); } .wa-chat--hero .wa-msg--typing .wa-typing-dots span { background: rgba(255, 255, 255, 0.6); } .wa-typing-dots { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 17px; } .wa-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: waTypingDot 1.8s infinite ease-in-out; } .wa-typing-dots span:nth-child(2) { animation-delay: 0.2s; } .wa-typing-dots span:nth-child(3) { animation-delay: 0.4s; } /* Message animation — JS uses visibility:hidden so messages reserve space from the start */ .wa-msg--anim.wa-msg--visible { animation: waMsgReveal 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; } @keyframes waMsgReveal { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Read check animation */ .wa-msg--anim .wa-msg__checks { opacity: 0; } .wa-msg--visible .wa-msg__checks { animation: waCheckFade 0.4s 0.3s forwards; } @keyframes waCheckFade { from { opacity: 0; } to { opacity: 1; } } /* Dark mode chat */ [data-theme="dark"] .wa-chat__body { background: #0b141a; background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 34c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm-90 60c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm-90 60c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zm60 0c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8z' fill='%231e2a30' fill-opacity='0.3'/%3E%3C/svg%3E"); } [data-theme="dark"] .wa-chat__header { background: #1f2c34; } [data-theme="dark"] .wa-chat__date { background: rgba(30, 42, 48, 0.9); color: #8696a0; } [data-theme="dark"] .wa-msg--incoming .wa-msg__bubble { background: #1f2c34; color: #e9edef; } [data-theme="dark"] .wa-msg--outgoing .wa-msg__bubble { background: #005c4b; color: #e9edef; } [data-theme="dark"] .wa-msg--typing .wa-msg__bubble { background: #1f2c34; } [data-theme="dark"] .wa-chat { border-color: var(--color-border); } /* Benefits Grid */ .wa-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-2xl); } @media (max-width: 960px) { .wa-benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wa-benefits-grid { grid-template-columns: 1fr; } } .wa-benefit-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s ease; border: 1px solid var(--color-border-light); position: relative; overflow: hidden; } .wa-benefit-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #25D366, #128C7E); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .wa-benefit-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.15), var(--shadow-lg); border-color: rgba(37, 211, 102, 0.25); } .wa-benefit-card:hover::before { transform: scaleX(1); } .wa-benefit-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; margin-bottom: var(--spacing-md); transition: transform 0.35s ease, box-shadow 0.35s ease; } .wa-benefit-card:hover .wa-benefit-card__icon { transform: scale(1.1) rotate(-3deg); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); } .wa-benefit-card h3 { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: var(--spacing-sm); transition: color 0.3s ease; } .wa-benefit-card:hover h3 { color: #128C7E; } .wa-benefit-card p { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.7; margin: 0; } /* Steps */ .wa-steps { display: flex; flex-direction: column; gap: var(--spacing-xl); margin-top: var(--spacing-2xl); max-width: 640px; margin-left: auto; margin-right: auto; } .wa-step { display: flex; gap: var(--spacing-lg); align-items: flex-start; } .wa-step__number { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; } .wa-step__content h3 { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: var(--spacing-xs); } .wa-step__content p { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.7; margin: 0; } /* Use Cases Grid */ .wa-usecases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-2xl); } @media (max-width: 960px) { .wa-usecases-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wa-usecases-grid { grid-template-columns: 1fr; } } .wa-usecase { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-xl); border-left: 4px solid var(--color-accent); box-shadow: var(--shadow-sm); } .wa-usecase h4 { font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-primary); margin-bottom: var(--spacing-sm); } .wa-usecase p { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.7; margin: 0; } /* Transparency Section */ .wa-transparency { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-2xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .wa-transparency p { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.8; margin-top: var(--spacing-md); } /* Consent Box */ .wa-consent-box { text-align: center; } .wa-consent-box__intro { font-size: var(--fs-base); color: var(--color-text-light); margin-bottom: var(--spacing-2xl); max-width: 600px; margin-left: auto; margin-right: auto; } .wa-consent-form { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-2xl); border: 1px solid var(--color-border); text-align: left; box-shadow: var(--shadow-md); } /* Checkbox */ .wa-consent-checkbox { display: flex; gap: var(--spacing-md); cursor: pointer; align-items: flex-start; } .wa-consent-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .wa-consent-checkbox__mark { flex-shrink: 0; width: 24px; height: 24px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); margin-top: 2px; } .wa-consent-checkbox input:checked + .wa-consent-checkbox__mark { background: var(--color-primary); border-color: var(--color-primary); } .wa-consent-checkbox input:checked + .wa-consent-checkbox__mark::after { content: ''; display: block; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; } .wa-consent-checkbox input:focus-visible + .wa-consent-checkbox__mark { outline: 2px solid var(--color-accent); outline-offset: 2px; } .wa-consent-checkbox__text { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.7; } .wa-consent-checkbox__text strong { color: var(--color-text); } .wa-consent-checkbox__text a { color: var(--color-primary); text-decoration: underline; } /* CTA Button */ .wa-consent-actions { margin-top: var(--spacing-xl); text-align: center; } .btn--whatsapp { display: inline-flex; align-items: center; gap: var(--spacing-sm); background: #25D366; color: #fff; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--fw-semibold); padding: var(--spacing-md) var(--spacing-2xl); border-radius: var(--radius-full); text-decoration: none; transition: all var(--transition-normal); border: none; cursor: pointer; } .btn--whatsapp:hover { background: #1fba59; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); } .wa-chat-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: auto; transform: none !important; box-shadow: none !important; } .wa-chat-btn--active { animation: waPulse 0.4s ease; } @keyframes waPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .wa-consent-hint { font-size: var(--fs-sm); color: var(--color-warning); margin-top: var(--spacing-sm); font-weight: var(--fw-medium); } .wa-consent-hint--shake { animation: waShake 0.5s ease; } @keyframes waShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ===== VERO Orbit Bestätigungs-Popup ===== */ .vero-modal-overlay { position: fixed; inset: 0; background: rgba(10, 22, 40, 0.65); backdrop-filter: blur(6px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .vero-modal-overlay.active { opacity: 1; visibility: visible; } .vero-modal { background: var(--color-surface); border-radius: var(--radius-xl); max-width: 380px; width: 100%; padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-xl); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0,85,164,0.12); text-align: center; transform: translateY(16px) scale(0.97); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .vero-modal-overlay.active .vero-modal { transform: translateY(0) scale(1); } /* Shield-Icon oben */ .vero-modal__icon { display: flex; justify-content: center; margin-bottom: var(--spacing-lg); filter: drop-shadow(0 4px 12px rgba(0,85,164,0.35)); } /* Titel */ .vero-modal__title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text); margin: 0 0 var(--spacing-sm); } /* Untertitel */ .vero-modal__subtitle { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.55; margin: 0 0 var(--spacing-xl); } /* Button-Stack */ .vero-modal__actions { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* "Ja, jetzt loslegen" — Primär */ .vero-modal__btn-start { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 14px var(--spacing-xl); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: #fff; border: none; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; text-decoration: none; transition: filter var(--transition-fast), transform var(--transition-fast); } .vero-modal__btn-start:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; text-decoration: none; } .vero-modal__btn-start svg { flex-shrink: 0; } /* "Erst informieren" — Sekundär */ .vero-modal__btn-info { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 12px var(--spacing-xl); background: var(--color-primary-light); color: var(--color-primary); border: 1px solid rgba(0,85,164,0.2); border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } .vero-modal__btn-info:hover { background: rgba(0,85,164,0.12); border-color: var(--color-primary); } /* "Abbrechen" — Tertiär/Ghost */ .vero-modal__btn-cancel { padding: 9px var(--spacing-xl); background: transparent; color: var(--color-text-light); border: none; border-radius: var(--radius-md); font-size: var(--fs-xs); cursor: pointer; transition: color var(--transition-fast); } .vero-modal__btn-cancel:hover { color: var(--color-text); } /* Dark Mode */ [data-theme="dark"] .vero-modal { background: var(--color-surface); box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,163,224,0.15); } [data-theme="dark"] .vero-modal__btn-info { background: rgba(0,85,164,0.2); border-color: rgba(0,163,224,0.3); color: var(--color-accent); } /* Mobile */ @media (max-width: 480px) { .vero-modal { padding: var(--spacing-xl) var(--spacing-lg); } } /* ===== Allianz External-Link Modal ===== */ .allianz-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .allianz-modal-overlay.active { opacity: 1; visibility: visible; } .allianz-modal { background: var(--color-surface); border-radius: var(--radius-xl); max-width: 460px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: translateY(20px) scale(0.96); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; } .allianz-modal-overlay.active .allianz-modal { transform: translateY(0) scale(1); } /* Header */ .allianz-modal__header { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-dark) 100%); padding: var(--spacing-xl) var(--spacing-2xl); color: #fff; display: flex; align-items: center; gap: var(--spacing-md); } .allianz-modal__header-icon { width: 44px; height: 44px; background: rgba(255,255,255,0.15); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; } .allianz-modal__header-icon svg { width: 22px; height: 22px; } .allianz-modal__header-text h3 { font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-bold); margin: 0; color: #fff; } .allianz-modal__header-text p { font-size: var(--fs-sm); opacity: 0.8; margin: 3px 0 0; } /* Body */ .allianz-modal__body { padding: var(--spacing-2xl); } /* Timo-Box */ .allianz-modal__timo-box { display: flex; align-items: center; gap: var(--spacing-md); background: var(--color-primary-light); border-radius: var(--radius-md); padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); border-left: 3px solid var(--color-primary); } .allianz-modal__timo-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--color-primary); display: flex; align-items: center; justify-content: center; } .allianz-modal__timo-avatar img { width: 100%; height: 100%; object-fit: cover; } .allianz-modal__timo-avatar-fallback { width: 100%; height: 100%; color: #fff; align-items: center; justify-content: center; } .allianz-modal__timo-avatar-fallback svg { width: 24px; height: 24px; } .allianz-modal__timo-info { display: flex; flex-direction: column; gap: 2px; } .allianz-modal__timo-info strong { font-size: var(--fs-sm); color: var(--color-primary); font-weight: var(--fw-semibold); } .allianz-modal__timo-info span { font-size: var(--fs-xs); color: var(--color-text-light); } /* Text */ .allianz-modal__text { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.65; margin-bottom: var(--spacing-lg); } /* Info-Liste */ .allianz-modal__list { list-style: none; padding: 0; margin: 0 0 var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-sm); } .allianz-modal__list li { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--fs-sm); color: var(--color-text); } .allianz-modal__list li svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; } /* Buttons */ .allianz-modal__actions { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .allianz-modal__btn-confirm { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); width: 100%; padding: 14px var(--spacing-xl); background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .allianz-modal__btn-confirm svg { width: 18px; height: 18px; transition: transform var(--transition-fast); } .allianz-modal__btn-confirm:hover { background: var(--color-bg-dark); transform: translateY(-1px); } .allianz-modal__btn-confirm:hover svg { transform: translateX(3px); } .allianz-modal__divider { display: flex; align-items: center; gap: var(--spacing-md); color: var(--color-text-light); font-size: var(--fs-xs); } .allianz-modal__divider::before, .allianz-modal__divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .allianz-modal__btn-wa { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); width: 100%; padding: 13px var(--spacing-xl); background: #25D366; color: #fff; border: none; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .allianz-modal__btn-wa:hover { background: #128C7E; transform: translateY(-1px); } .allianz-modal__btn-cancel { width: 100%; padding: 11px var(--spacing-xl); background: transparent; color: var(--color-text-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--fs-sm); cursor: pointer; transition: all var(--transition-fast); } .allianz-modal__btn-cancel:hover { border-color: var(--color-text-light); color: var(--color-text); } /* Hinweis */ .allianz-modal__note { font-size: var(--fs-xs); color: var(--color-text-light); text-align: center; margin: 0; } /* Responsive */ @media (max-width: 480px) { .allianz-modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .allianz-modal-overlay { align-items: flex-end; padding: 0; } } /* Dark Mode */ [data-theme="dark"] .allianz-modal { background: var(--color-surface); } [data-theme="dark"] .allianz-modal__timo-box { background: rgba(0,85,164,0.15); } /* ===== Global WhatsApp Consent Modal ===== */ .wa-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .wa-modal-overlay.active { opacity: 1; visibility: visible; } .wa-modal { background: var(--color-surface); border-radius: var(--radius-xl); max-width: 480px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: translateY(20px) scale(0.96); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; } .wa-modal-overlay.active .wa-modal { transform: translateY(0) scale(1); } .wa-modal__header { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); padding: var(--spacing-xl) var(--spacing-2xl); color: #fff; display: flex; align-items: center; gap: var(--spacing-md); } .wa-modal__header svg { width: 32px; height: 32px; flex-shrink: 0; } .wa-modal__header-text h3 { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; color: #fff; } .wa-modal__header-text p { font-size: var(--fs-sm); opacity: 0.9; margin: 4px 0 0; } .wa-modal__body { padding: var(--spacing-2xl); } .wa-modal__context { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-xl); font-size: var(--fs-sm); color: var(--color-text); line-height: 1.6; border-left: 3px solid #25D366; } .wa-modal__context strong { display: block; margin-bottom: 4px; color: var(--color-text); } .wa-modal__consent { display: flex; gap: var(--spacing-md); cursor: pointer; align-items: flex-start; margin-bottom: var(--spacing-xl); } .wa-modal__consent input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .wa-modal__consent-mark { flex-shrink: 0; width: 22px; height: 22px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); margin-top: 2px; } .wa-modal__consent input:checked + .wa-modal__consent-mark { background: #25D366; border-color: #25D366; } .wa-modal__consent input:checked + .wa-modal__consent-mark::after { content: ''; display: block; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; } .wa-modal__consent-text { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.6; } .wa-modal__consent-text a { color: var(--color-primary); text-decoration: underline; } .wa-modal__actions { display: flex; gap: var(--spacing-md); flex-direction: column; } .wa-modal__btn-confirm { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); background: #25D366; color: #fff; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--fw-semibold); padding: var(--spacing-md) var(--spacing-2xl); border-radius: var(--radius-full); border: none; cursor: pointer; transition: all var(--transition-normal); text-decoration: none; width: 100%; } .wa-modal__btn-confirm:hover { background: #1fba59; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); } .wa-modal__btn-confirm[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .wa-modal__btn-confirm svg { width: 20px; height: 20px; } .wa-modal__btn-cancel { background: none; border: 1px solid var(--color-border); color: var(--color-text-light); font-family: var(--font-body); font-size: var(--fs-sm); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); text-align: center; } .wa-modal__btn-cancel:hover { background: var(--color-bg-alt); color: var(--color-text); } .wa-modal__privacy { font-size: 0.75rem; color: var(--color-text-light); text-align: center; margin-top: var(--spacing-lg); line-height: 1.5; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); } @media (max-width: 480px) { .wa-modal { max-width: 100%; border-radius: var(--radius-lg); } .wa-modal__header { padding: var(--spacing-lg); } .wa-modal__body { padding: var(--spacing-lg); } } /* FAQ */ .wa-faq { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-2xl); } .wa-faq__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition-normal); } .wa-faq__item:hover { box-shadow: var(--shadow-sm); } .wa-faq__item summary { padding: var(--spacing-lg) var(--spacing-xl); font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-text); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); } .wa-faq__item summary::-webkit-details-marker { display: none; } .wa-faq__item summary::after { content: '+'; font-size: var(--fs-xl); color: var(--color-primary); font-weight: var(--fw-bold); transition: transform var(--transition-fast); flex-shrink: 0; } .wa-faq__item[open] summary::after { content: '\2212'; } .wa-faq__item p { padding: 0 var(--spacing-xl) var(--spacing-lg); font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.8; margin: 0; } .wa-faq__item p a { color: var(--color-primary); text-decoration: underline; } /* Dark Mode Overrides */ [data-theme="dark"] .wa-benefit-card, [data-theme="dark"] .wa-usecase, [data-theme="dark"] .wa-transparency, [data-theme="dark"] .wa-consent-form, [data-theme="dark"] .wa-faq__item { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .wa-benefit-card h3, [data-theme="dark"] .wa-step__content h3, [data-theme="dark"] .wa-faq__item summary { color: var(--color-text); } [data-theme="dark"] .wa-consent-checkbox__mark { border-color: var(--color-border); background: var(--color-bg); } [data-theme="dark"] .wa-smarttool__content h3 { color: var(--color-text); } [data-theme="dark"] .wa-benefit-card:hover { box-shadow: 0 12px 32px rgba(37, 211, 102, 0.1), var(--shadow-lg); } [data-theme="dark"] .wa-benefit-card:hover h3 { color: #25D366; } /* Dark mode: WhatsApp Consent Modal */ [data-theme="dark"] .wa-modal { background: var(--color-surface); } [data-theme="dark"] .wa-modal__context { background: var(--color-bg); } [data-theme="dark"] .wa-modal__consent-mark { border-color: var(--color-border); background: var(--color-bg); } [data-theme="dark"] .wa-modal__btn-cancel { border-color: var(--color-border); color: var(--color-text-light); } [data-theme="dark"] .wa-modal__btn-cancel:hover { background: var(--color-bg); } /* ===== WhatsApp Service — Nav Link Green ===== */ .header__nav-link--whatsapp { color: #25D366 !important; font-weight: var(--fw-semibold); position: relative; } .header__nav-link--whatsapp::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #25D366; transition: width 0.3s ease, left 0.3s ease; } .header__nav-link--whatsapp:hover::after, .header__nav-link--whatsapp.active::after { width: 100%; left: 0; } .header__nav-link--whatsapp:hover { color: #128C7E !important; } /* ===== WhatsApp Service — Scroll Animations ===== */ /* Staggered card reveal */ .wa-benefit-card, .wa-usecase, .wa-step, .wa-faq__item, .wa-smarttool { opacity: 0; transform: translateY(30px); transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .wa-benefit-card.wa-visible, .wa-usecase.wa-visible, .wa-step.wa-visible, .wa-faq__item.wa-visible, .wa-smarttool.wa-visible { opacity: 1; transform: translateY(0); } /* Chat bubble float-in from left/right (alternating steps) */ .wa-step { opacity: 0; } .wa-step:nth-child(odd) { transform: translateX(-40px); } .wa-step:nth-child(even) { transform: translateX(40px); } .wa-step.wa-visible { opacity: 1; transform: translateX(0); } /* Use-case cards — icon + example + hover */ .wa-usecase { transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease; position: relative; padding-top: calc(var(--spacing-xl) + 8px); } .wa-usecase__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(37, 211, 102, 0.12), rgba(18, 140, 126, 0.08)); color: #128C7E; margin-bottom: var(--spacing-sm); transition: transform 0.3s ease, background 0.3s ease; } .wa-usecase:hover .wa-usecase__icon { transform: scale(1.1); background: linear-gradient(135deg, rgba(37, 211, 102, 0.2), rgba(18, 140, 126, 0.15)); } .wa-usecase__example { display: block; margin-top: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); background: #DCF8C6; color: var(--color-text); font-size: var(--fs-xs); font-style: italic; border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); position: relative; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; } .wa-usecase:hover .wa-usecase__example { opacity: 1; transform: translateY(0); } .wa-usecase__example::before { content: ''; position: absolute; top: 0; left: -6px; width: 0; height: 0; border-top: 6px solid #DCF8C6; border-left: 6px solid transparent; } [data-theme="dark"] .wa-usecase__example { background: #025144; color: #e0e0e0; } [data-theme="dark"] .wa-usecase__example::before { border-top-color: #025144; } .wa-usecase:hover { border-left-color: #25D366; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.12); transform: translateY(-3px); } .wa-usecase:hover h4 { color: #128C7E; } /* ===== Smart Tools Section ===== */ .wa-smarttools { display: flex; flex-direction: column; gap: var(--spacing-xl); margin-top: var(--spacing-2xl); } .wa-smarttool { display: flex; gap: var(--spacing-xl); align-items: center; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-xl); border: 1px solid var(--color-border-light); box-shadow: var(--shadow-sm); transition: transform 0.35s ease, box-shadow 0.35s ease; } .wa-smarttool:hover { transform: translateX(6px); box-shadow: var(--shadow-md); } .wa-smarttool__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; } .wa-smarttool__content h3 { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: var(--spacing-xs); } .wa-smarttool__content p { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.7; margin: 0; } @media (max-width: 600px) { .wa-smarttool { flex-direction: column; align-items: center; text-align: center; } } [data-theme="dark"] .wa-smarttool { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .wa-smarttool__content h3 { color: var(--color-text); } [data-theme="dark"] .wa-split-layout__divider { background: linear-gradient(180deg, transparent 0%, var(--color-border) 15%, var(--color-border) 85%, transparent 100%); } [data-theme="dark"] .wa-usecase__icon { background: linear-gradient(135deg, rgba(37, 211, 102, 0.2), rgba(18, 140, 126, 0.15)); color: #25D366; } /* ===== Split Layout (Text + Chat side-by-side) ===== */ .wa-split-layout { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; } .wa-split-layout__content { padding-right: var(--spacing-2xl); } .wa-split-layout__chat { padding-left: var(--spacing-2xl); } /* Chat-first: chat appears on left, content on right */ .wa-split-layout__chat--first { order: -1; padding-left: 0; padding-right: var(--spacing-2xl); } .wa-split-layout__chat--first ~ .wa-split-layout__content { padding-right: 0; padding-left: var(--spacing-2xl); } .wa-split-layout__divider { width: 1px; background: linear-gradient(180deg, transparent 0%, var(--color-border) 15%, var(--color-border) 85%, transparent 100%); min-height: 100%; align-self: stretch; } .wa-split-layout .section__title--left { text-align: left; } .wa-split-layout .wa-steps { margin-left: 0; margin-right: 0; max-width: none; } .wa-split-layout .wa-chat--compact { max-width: 100%; margin-top: var(--spacing-md); } .wa-split-layout .wa-chat-demo-label { text-align: left; margin-top: 0; } .wa-split-layout .wa-faq { margin-top: var(--spacing-lg); } .wa-split-layout .wa-smarttools { margin-top: var(--spacing-lg); } @media (max-width: 960px) { .wa-split-layout { grid-template-columns: 1fr; gap: var(--spacing-2xl); } .wa-split-layout__content { padding: 0; } .wa-split-layout__chat { padding: 0; } .wa-split-layout__chat--first { order: 0; padding: 0; } .wa-split-layout__chat--first ~ .wa-split-layout__content { padding: 0; } .wa-split-layout__divider { display: none; } .wa-split-layout .section__title--left { text-align: center; } .wa-split-layout .wa-chat-demo-label { text-align: center; } } /* waTypingDot keyframes used by chat bubbles */ @keyframes waTypingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-4px); opacity: 1; } } /* WhatsApp message bubble style for transparency section */ .wa-transparency { position: relative; } .wa-transparency::before { content: ''; position: absolute; top: -1px; left: 32px; width: 16px; height: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom: none; border-right: none; transform: rotate(45deg); z-index: 1; } /* Green read-receipt checkmarks on steps */ .wa-step__number { position: relative; } .wa-step.wa-visible .wa-step__number::after { content: '\2713\2713'; position: absolute; bottom: -6px; right: -6px; font-size: 10px; color: #25D366; font-weight: bold; opacity: 0; animation: waCheckIn 0.4s 0.6s forwards; } @keyframes waCheckIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } /* ============================================ DARK MODE FIXES — Additional Overrides ============================================ */ /* Button variants — dark mode overrides */ [data-theme="dark"] .btn--termin { background-color: transparent; color: var(--color-text); border-color: rgba(91, 163, 245, 0.5); } [data-theme="dark"] .btn--termin:hover { background-color: rgba(91, 163, 245, 0.15); border-color: #5ba3f5; color: var(--color-text); } [data-theme="dark"] .btn--whatsapp { background: #25D366; color: #fff; } [data-theme="dark"] .btn--whatsapp:hover { background: #1ebe5d; } /* Testimonial card quotation mark visibility in dark mode */ [data-theme="dark"] .testimonial-card::before { color: rgba(91, 163, 245, 0.3); } /* Article body blockquote in dark mode */ [data-theme="dark"] .article__body blockquote { background: rgba(91, 163, 245, 0.08); border-left-color: #4a8fe0; } /* Article body strong text in dark mode */ [data-theme="dark"] .article__body strong { color: #7ec0ff; } /* Cookie banner dark mode — ensure readability */ [data-theme="dark"] .cookie-banner { background: var(--color-bg-dark); color: var(--color-text); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .cookie-banner__text { color: var(--color-text-light); } [data-theme="dark"] .cookie-banner__text a { color: #5ba3f5; text-decoration: underline; } [data-theme="dark"] .cookie-banner__text a:hover { color: #7ec0ff; } /* FAQ category open state dark mode */ [data-theme="dark"] .faq-category.open .faq-category-header { background: rgba(91, 163, 245, 0.12); border-bottom-color: var(--color-border); } [data-theme="dark"] .faq-category.open .faq-category-icon { background: var(--color-primary); color: #fff; } /* Page header dark mode — adjust gradient and decorative elements */ [data-theme="dark"] .page-header { background: linear-gradient(135deg, #020611 0%, #071530 50%, #0c2556 100%); color: var(--color-text); } /* Author box dark mode */ [data-theme="dark"] .author-box { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .author-box__image { background: rgba(91, 163, 245, 0.15); } [data-theme="dark"] .author-box__name { color: var(--color-text); } [data-theme="dark"] .author-box__bio { color: var(--color-text-light); } /* ========== VERO ORBIT DARK MODE ========== */ [data-theme="dark"] .vero-orbit__ring { border-color: rgba(91, 163, 245, 0.2); } [data-theme="dark"] .vero-orbit__ring--inner { border-color: rgba(91, 163, 245, 0.3); } [data-theme="dark"] .vero-orbit__shield { filter: drop-shadow(0 0 20px rgba(91, 163, 245, 0.5)); } [data-theme="dark"] .vero-orbit__shield path { stroke: #5ba3f5; fill: none; } [data-theme="dark"] .vero-orbit__label { color: #dce8f5; text-shadow: 0 0 20px rgba(91, 163, 245, 0.8); } [data-theme="dark"] .vero-orbit__icon { color: rgba(220, 232, 245, 0.8); background: rgba(91, 163, 245, 0.15); border-color: rgba(91, 163, 245, 0.35); } [data-theme="dark"] .vero-orbit__icon:hover { background: rgba(91, 163, 245, 0.45); color: #ffffff; border-color: rgba(91, 163, 245, 0.7); box-shadow: 0 0 24px rgba(91, 163, 245, 0.5), 0 0 48px rgba(91, 163, 245, 0.2); } [data-theme="dark"] .vero-orbit__icon::after { background: rgba(13, 31, 58, 0.95); border-color: rgba(91, 163, 245, 0.4); } [data-theme="dark"] .vero-orbit__icon::before { border-top-color: rgba(13, 31, 58, 0.95); } /* Dark mode: other icons stay unchanged on hover */ [data-theme="dark"] .vero-orbit__particles span { background: rgba(91, 163, 245, 0.6); } [data-theme="dark"] .vero-orbit:hover .vero-orbit__shield { filter: drop-shadow(0 0 30px rgba(91, 163, 245, 0.7)); } /* ========== KENNZAHLEN SECTION DARK MODE ========== */ [data-theme="dark"] .kennzahlen-section { background: linear-gradient(135deg, #0d1f3a 0%, #0f2952 100%); } [data-theme="dark"] .kennzahl-item { color: var(--color-text-light); } [data-theme="dark"] .kennzahl-item:hover { background: rgba(91, 163, 245, 0.08); } [data-theme="dark"] .kennzahl-item:not(:last-child)::after { background: rgba(91, 163, 245, 0.2); } [data-theme="dark"] .kennzahl-icon { background: rgba(91, 163, 245, 0.15); color: rgba(220, 232, 245, 0.85); } [data-theme="dark"] .kennzahl-item:hover .kennzahl-icon { background: rgba(91, 163, 245, 0.25); } [data-theme="dark"] .kennzahl-number { color: var(--color-text); } [data-theme="dark"] .kennzahl-label { color: var(--color-text-light); } /* ========== MANIFESTO SECTION DARK MODE ========== */ [data-theme="dark"] .manifesto { background: linear-gradient(135deg, #0a1422 0%, #0f2040 60%, #081630 100%); } [data-theme="dark"] .manifesto__eyebrow { color: #5ba3f5; } [data-theme="dark"] .manifesto__title { color: #dce8f5; } [data-theme="dark"] .manifesto__title span { color: #5ba3f5; } [data-theme="dark"] .manifesto__item { border-left-color: rgba(91, 163, 245, 0.25); } [data-theme="dark"] .manifesto__item.is-visible { border-left-color: rgba(91, 163, 245, 0.5); } [data-theme="dark"] .manifesto__num { color: rgba(91, 163, 245, 0.2); } [data-theme="dark"] .manifesto__item.is-visible .manifesto__num { color: rgba(91, 163, 245, 0.4); } [data-theme="dark"] .manifesto__label { color: #5ba3f5; } [data-theme="dark"] .manifesto__headline { color: #dce8f5; } [data-theme="dark"] .manifesto__text { color: rgba(220, 232, 245, 0.75); } [data-theme="dark"] .manifesto__item::before { background: #5ba3f5; } [data-theme="dark"] .manifesto__cta-btn { background: #0065c4; color: #ffffff; box-shadow: 0 4px 20px rgba(0, 100, 196, 0.4); } [data-theme="dark"] .manifesto__cta-btn:hover { background: #0078e6; color: #ffffff; box-shadow: 0 8px 28px rgba(0, 120, 230, 0.5); } /* ========== TESTIMONIAL CARD DARK MODE ========== */ [data-theme="dark"] .testimonial-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .testimonial-card::before { color: rgba(91, 163, 245, 0.25); } [data-theme="dark"] .testimonial-card__text { color: var(--color-text); } [data-theme="dark"] .testimonial-card__author { color: var(--color-text); } [data-theme="dark"] .testimonial-card__avatar { background: rgba(91, 163, 245, 0.15); color: #5ba3f5; } [data-theme="dark"] .testimonial-card__name { color: var(--color-text); } [data-theme="dark"] .testimonial-card__role { color: var(--color-text-light); } [data-theme="dark"] .testimonial-card__stars { color: #fcd34d; } /* ========== PROFILE PHOTO DARK MODE ========== */ [data-theme="dark"] .profile-photo { border-color: rgba(91, 163, 245, 0.3); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .profile-photo-placeholder { background: linear-gradient(135deg, rgba(91, 163, 245, 0.15), rgba(15, 41, 82, 0.3)); border-color: rgba(91, 163, 245, 0.3); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } /* ========== FOOTER DARK MODE ========== */ [data-theme="dark"] .footer { background-color: #0a0f1e; color: rgba(220, 232, 245, 0.8); } [data-theme="dark"] .footer__brand-title { color: #dce8f5; } [data-theme="dark"] .footer__brand p { color: rgba(220, 232, 245, 0.75); } [data-theme="dark"] .footer__heading { color: #dce8f5; } [data-theme="dark"] .footer__links a { color: rgba(220, 232, 245, 0.7); } [data-theme="dark"] .footer__links a:hover { color: #5ba3f5; } /* Dark-Mode: stärkerer Cyan-Glow für VERO Sim, gleiche Pill-Form */ [data-theme="dark"] .footer__links a.footer__link--vero { border-color: rgba(0, 200, 255, 0.6); color: #b8ecff; box-shadow: 0 0 14px rgba(0, 163, 224, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 200, 255, 0.22); } [data-theme="dark"] .footer__links a.footer__link--vero:hover { color: #e0f5ff; border-color: rgba(80, 220, 255, 0.9); box-shadow: 0 0 24px rgba(0, 163, 224, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 220, 255, 0.35); } /* Dark-Mode: stärkerer Grün-Glow für WhatsApp, gleiche Pill-Form */ [data-theme="dark"] .footer__links a.footer__link--whatsapp { border-color: rgba(37, 211, 102, 0.62); color: #6feda0; box-shadow: 0 0 14px rgba(37, 211, 102, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(37, 211, 102, 0.22); } [data-theme="dark"] .footer__links a.footer__link--whatsapp:hover { color: #c3ffd8; border-color: rgba(100, 255, 165, 0.9); box-shadow: 0 0 24px rgba(37, 211, 102, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(37, 211, 102, 0.35); } /* Dark-Mode: stärkerer Gold-Glow, gleiches Obsidian-Fundament */ [data-theme="dark"] .footer__links a.footer__link--mein-bereich { border-color: rgba(240, 200, 80, 0.55); color: #ffd966; box-shadow: 0 0 14px rgba(240, 200, 80, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(240, 200, 80, 0.2); } [data-theme="dark"] .footer__links a.footer__link--mein-bereich:hover { color: #fff2c4; border-color: rgba(255, 220, 120, 0.85); box-shadow: 0 0 22px rgba(240, 200, 80, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(240, 200, 80, 0.32); } /* Dark-Mode: stärkerer Blau-Glow für Allianz */ [data-theme="dark"] .footer__links a.footer__link--allianz { border-color: rgba(0, 100, 200, 0.6); color: #a0ccf0; box-shadow: 0 0 14px rgba(0, 55, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 85, 180, 0.25); } [data-theme="dark"] .footer__links a.footer__link--allianz:hover { color: #c8e4ff; border-color: rgba(60, 160, 255, 0.85); box-shadow: 0 0 22px rgba(0, 55, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 100, 200, 0.35); } [data-theme="dark"] .footer__social a.footer__social--disabled { background: rgba(220, 232, 245, 0.06); color: rgba(220, 232, 245, 0.15); } [data-theme="dark"] .footer__social a:hover { background: rgba(220, 232, 245, 0.12); color: rgba(220, 232, 245, 0.7); } [data-theme="dark"] .footer__whatsapp-btn { background: #25D366; color: #fff; } [data-theme="dark"] .footer__whatsapp-btn:hover { background: #1ebe5d; } [data-theme="dark"] .footer__bottom { border-top-color: rgba(91, 163, 245, 0.15); color: rgba(220, 232, 245, 0.7); } [data-theme="dark"] .footer__bottom-links a { color: rgba(220, 232, 245, 0.7); } [data-theme="dark"] .footer__bottom-links a:hover { color: #5ba3f5; } [data-theme="dark"] .footer__brand .logo { filter: brightness(0) invert(1); } [data-theme="dark"] .footer__col-bottom, [data-theme="dark"] .footer__partner { border-top-color: rgba(220, 232, 245, 0.12); } [data-theme="dark"] .footer__partner-link { color: #60b8e8; } /* ============================================ Sticky Mobile CTA ============================================ */ .sticky-mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.75rem 1rem; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .sticky-mobile-cta.is-visible { transform: translateY(0); } .sticky-mobile-cta__inner { display: flex; align-items: center; gap: 0.75rem; max-width: var(--container-max); margin: 0 auto; } .sticky-mobile-cta__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; transition: all var(--transition-fast); white-space: nowrap; } .sticky-mobile-cta__btn--primary { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; box-shadow: 0 4px 14px rgba(0, 85, 164, 0.35); } .sticky-mobile-cta__btn--primary:hover { box-shadow: 0 6px 20px rgba(0, 85, 164, 0.5); transform: translateY(-1px); } .sticky-mobile-cta__btn--secondary { background: #25D366; color: #fff; flex: 0 0 auto; padding: 0.75rem; border-radius: 50%; width: 44px; height: 44px; } .sticky-mobile-cta__btn--secondary svg { width: 22px; height: 22px; fill: currentColor; } .sticky-mobile-cta__btn--secondary:hover { background: #1fb855; } [data-theme="dark"] .sticky-mobile-cta { background: rgba(10, 22, 40, 0.97); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { /* Sticky CTA Leiste auf Mobile ausgeblendet — Timo 2026-04-19: "wir haben genug CTA, die Leiste kostet nur Platz". HTML bleibt erhalten für evtl. späteres Reaktivieren. */ .sticky-mobile-cta { display: none; } /* Body-Padding entfällt, da Leiste nicht sichtbar */ body { padding-bottom: 0; } /* Hide footer bottom's fixed elements that might overlap */ .footer { margin-bottom: 0; } } @media (min-width: 769px) { .sticky-mobile-cta { display: none !important; } } /* ============================================ Hero Social Proof Bar ============================================ */ .hero__social-proof { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.15); opacity: 0.7; transition: opacity var(--transition-fast); } .hero__social-proof:hover { opacity: 0.95; } .hero__social-proof-item { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.9); font-family: var(--font-heading); font-weight: var(--fw-medium); letter-spacing: 0.02em; white-space: nowrap; } .hero__social-proof-item svg { width: 14px; height: 14px; flex-shrink: 0; } .hero__social-proof-stars { display: flex; gap: 1px; color: #fbbf24; } .hero__social-proof-stars svg { width: 12px; height: 12px; } .hero__social-proof-divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; } @media (max-width: 600px) { .hero__social-proof { gap: 1rem; flex-wrap: wrap; } .hero__social-proof-divider { display: none; } } /* ============================================ Multi-Step Lead Form ============================================ */ /* ============================================ Discover Links (Mini-Section: Über uns + Erfahrungsberichte) ============================================ */ .discover-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); text-align: center; } .discover-links__item { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); padding: var(--spacing-xl) var(--spacing-lg); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); } .discover-links__item h3 { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); } .discover-links__item p { color: var(--color-text-light); font-size: var(--fs-sm); line-height: 1.6; max-width: 380px; margin-bottom: var(--spacing-sm); } @media (max-width: 768px) { .discover-links { grid-template-columns: 1fr; } } /* ============================================ Conversion Zone (combined layout) ============================================ */ .conversion-zone { padding: var(--spacing-3xl) 0 var(--spacing-2xl); background: var(--color-bg); } .conversion-zone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; max-width: 1100px; margin: 0 auto; } .conversion-zone__left { display: flex; flex-direction: column; } .conversion-zone__title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: 0.25rem; letter-spacing: -0.01em; } .conversion-zone__subtitle { font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: var(--spacing-md); } .conversion-zone__left .lead-form { flex: 1; } .conversion-zone__right { display: flex; flex-direction: column; gap: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--color-border-light); } .conversion-zone__newsletter { background: var(--color-surface); border-radius: 0; padding: 1.75rem 2rem; box-shadow: none; border: none; } .conversion-zone__divider { height: 1px; background: var(--color-border); margin: 0 2rem; } .conversion-zone__newsletter-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--color-primary-light); color: var(--color-primary); margin-bottom: var(--spacing-md); } .conversion-zone__newsletter h3 { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: 0.35rem; } .conversion-zone__newsletter p { font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: 1.25rem; line-height: 1.55; } .conversion-zone__newsletter .newsletter-form { display: flex; gap: 0.5rem; } .conversion-zone__newsletter .newsletter-form .form-input { flex: 1; padding: 0.7rem 1rem; border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--fs-sm); font-family: var(--font-body); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .conversion-zone__newsletter .newsletter-form .form-input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.15); } .conversion-zone__newsletter .newsletter-form .btn { white-space: nowrap; padding: 0.7rem 1.5rem; font-size: var(--fs-sm); } .conversion-zone__cta { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border-radius: 0; padding: 1.75rem 2rem; color: #fff; position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; justify-content: center; } .conversion-zone__cta::before { content: ''; position: absolute; top: -40%; right: -20%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(0, 163, 224, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .conversion-zone__cta h3 { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: #fff; margin-bottom: 0.5rem; position: relative; } .conversion-zone__cta p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.85); margin-bottom: 1.25rem; line-height: 1.55; position: relative; } .conversion-zone__cta-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; position: relative; } .conversion-zone__cta-buttons .btn--cta { background: #fff; color: var(--color-primary); padding: 0.7rem 1.5rem; font-size: var(--fs-sm); font-family: var(--font-heading); font-weight: var(--fw-bold); border-radius: var(--radius-full); text-decoration: none; transition: all var(--transition-fast); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .conversion-zone__cta-buttons .btn--cta:hover { background: var(--color-primary-light); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); } .btn--whatsapp-sm { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1.5rem; border-radius: var(--radius-full); background: #25D366; color: #fff; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; transition: all var(--transition-fast); box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25); } .btn--whatsapp-sm:hover { background: #1fb855; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35); } @media (max-width: 900px) { .conversion-zone__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .conversion-zone__left { position: static; } .conversion-zone__newsletter, .conversion-zone__cta { padding: 1.5rem; } .conversion-zone__divider { margin: 0 1.5rem; } } [data-theme="dark"] .conversion-zone { background: #0d1a2d; } [data-theme="dark"] .conversion-zone__right { border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .conversion-zone__newsletter { background: #101c2e; } [data-theme="dark"] .conversion-zone__divider { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .conversion-zone__newsletter-icon { background: rgba(0, 85, 164, 0.2); } [data-theme="dark"] .conversion-zone__newsletter .form-input { background: #0a1628; border-color: rgba(255, 255, 255, 0.1); color: #dce8f5; } [data-theme="dark"] .conversion-zone__cta { background: linear-gradient(135deg, #003366, #001a33); } .lead-form-section { padding: var(--spacing-4xl) 0; background: var(--color-bg); } .lead-form { max-width: 100%; margin: 0; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--color-border-light); } .lead-form__progress { display: flex; padding: 0; margin: 0; list-style: none; background: var(--color-bg-alt); } .lead-form__progress-step { flex: 1; padding: 0.75rem 0.5rem; text-align: center; font-size: var(--fs-xs); font-family: var(--font-heading); font-weight: var(--fw-medium); color: var(--color-text-light); position: relative; transition: all var(--transition-normal); } .lead-form__progress-step::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: transparent; transition: background var(--transition-normal); } .lead-form__progress-step.is-active { color: var(--color-primary); font-weight: var(--fw-bold); } .lead-form__progress-step.is-active::after { background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } .lead-form__progress-step.is-done { color: var(--color-success); } .lead-form__progress-step.is-done::after { background: var(--color-success); } .lead-form__body { padding: 1.5rem 1.75rem; } .lead-form__step { display: none; animation: leadFormFadeIn 0.35s ease; } .lead-form__step.is-active { display: block; } @keyframes leadFormFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .lead-form__question { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: 0.35rem; } .lead-form__hint { font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: 1rem; line-height: 1.5; } .lead-form__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; } .lead-form__option { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.1rem 0.75rem; border: 2px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast); background: var(--color-surface); text-align: center; } .lead-form__option:hover { border-color: var(--color-accent); background: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .lead-form__option:hover .lead-form__option-icon { color: var(--color-accent); background: rgba(0, 163, 224, 0.1); } .lead-form__option.is-selected { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(0, 85, 164, 0.15); } .lead-form__option.is-selected .lead-form__option-icon { color: var(--color-primary); background: rgba(0, 85, 164, 0.1); } .lead-form__option-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--color-primary); background: var(--color-primary-light); transition: all var(--transition-fast); } .lead-form__option-icon svg { width: 22px; height: 22px; } .lead-form__option-label { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.3; } .lead-form__input-group { margin-bottom: var(--spacing-lg); } .lead-form__input-group label { display: block; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: 0.35rem; color: var(--color-text); } .lead-form__input-group input, .lead-form__input-group select, .lead-form__input-group textarea { width: 100%; padding: 0.85rem 1rem; border: 2px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-text); background: var(--color-surface); transition: border-color var(--transition-fast); } .lead-form__input-group input:focus, .lead-form__input-group select:focus, .lead-form__input-group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.15); } .lead-form__nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); } .lead-form__btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-bold); border: none; cursor: pointer; transition: all var(--transition-fast); } .lead-form__btn--next { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; margin-left: auto; box-shadow: 0 4px 14px rgba(0, 85, 164, 0.3); } .lead-form__btn--next:hover { box-shadow: 0 6px 20px rgba(0, 85, 164, 0.45); transform: translateY(-1px); } .lead-form__btn--back { background: transparent; color: var(--color-text-light); padding-left: 0; } .lead-form__btn--back:hover { color: var(--color-text); } .lead-form__btn--submit { background: var(--color-success); color: #fff; margin-left: auto; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3); font-size: var(--fs-base); padding: 0.85rem 2rem; } .lead-form__btn--submit:hover { background: #0d9f6e; box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45); transform: translateY(-1px); } .lead-form__success { text-align: center; padding: var(--spacing-2xl) var(--spacing-xl); } .lead-form__success-icon { font-size: 3rem; margin-bottom: var(--spacing-md); } .lead-form__success h3 { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: 0.5rem; } .lead-form__success p { color: var(--color-text-light); max-width: 400px; margin: 0 auto; } @media (max-width: 480px) { .lead-form__options { grid-template-columns: 1fr 1fr; } .lead-form__body { padding: 1.25rem 1rem; } } [data-theme="dark"] .lead-form { background: #101c2e; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .lead-form__progress { background: #0a1628; } [data-theme="dark"] .lead-form { background: #101c2e; border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .lead-form__option { border-color: rgba(255, 255, 255, 0.1); background: #0a1628; } [data-theme="dark"] .lead-form__option-icon { background: rgba(0, 85, 164, 0.2); color: var(--color-accent); } [data-theme="dark"] .lead-form__option:hover { border-color: var(--color-accent); background: rgba(0, 85, 164, 0.15); } [data-theme="dark"] .lead-form__option.is-selected { border-color: var(--color-accent); background: rgba(0, 85, 164, 0.2); } [data-theme="dark"] .lead-form__input-group input, [data-theme="dark"] .lead-form__input-group select, [data-theme="dark"] .lead-form__input-group textarea { background: #0a1628; border-color: rgba(255, 255, 255, 0.1); color: #dce8f5; } [data-theme="dark"] .lead-form__nav { border-top-color: rgba(255, 255, 255, 0.1); } /* ============================================ Blog Redesign — Card Block Types 50/50 Split Cards, Infographic Cards, Checklists, Highlight Stats ============================================ */ /* --- Split Card (50/50) --- */ .blog-split-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin: var(--spacing-xl) 0; display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; transition: box-shadow var(--transition-normal); } .blog-split-card:hover { box-shadow: var(--shadow-lg); } .blog-split-card--reverse { direction: rtl; } .blog-split-card--reverse > * { direction: ltr; } .blog-split-card__text { padding: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; } .blog-split-card__text h2 { font-size: var(--fs-2xl); color: var(--color-primary-dark); margin-bottom: var(--spacing-md); line-height: 1.3; } .blog-split-card__text p { font-size: var(--fs-base); color: var(--color-text); line-height: 1.7; } .blog-split-card__visual { display: flex; align-items: center; justify-content: center; padding: var(--spacing-xl); position: relative; overflow: hidden; } .blog-split-card__visual--blue { background: var(--color-primary-light); } .blog-split-card__visual--green { background: #ecfdf5; } .blog-split-card__visual--warm { background: #fffbeb; } .blog-split-card__visual--red { background: #fef2f2; } .blog-split-card__visual--purple { background: #f5f3ff; } .blog-split-card__visual svg { width: 100%; max-width: 320px; height: auto; } /* --- Infographic Card (Full Width) --- */ .blog-infographic-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-2xl); margin: var(--spacing-xl) 0; transition: box-shadow var(--transition-normal); } .blog-infographic-card:hover { box-shadow: var(--shadow-md); } .blog-infographic-card h2 { font-size: var(--fs-xl); color: var(--color-primary-dark); margin-bottom: var(--spacing-lg); text-align: center; } /* Comparison Table inside infographic card */ .blog-comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); } .blog-comparison-table th { background: var(--color-primary-dark); color: var(--color-text-inverse); padding: 0.75rem 1rem; text-align: left; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .blog-comparison-table td { padding: 0.7rem 1rem; font-size: var(--fs-sm); border-bottom: 1px solid var(--color-border); } .blog-comparison-table tr:last-child td { border-bottom: none; } .blog-comparison-table tr:nth-child(even) td { background: var(--color-bg); } .blog-comparison-table tr:hover td { background: var(--color-primary-light); } .blog-comparison-table .price-highlight { font-weight: var(--fw-bold); color: var(--color-accent); } .blog-comparison-table__note { font-size: var(--fs-xs); color: var(--color-text-light); margin-top: var(--spacing-sm); text-align: center; } /* --- Highlight Card (Stats) --- */ .blog-highlight-card { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border-radius: var(--radius-lg); padding: var(--spacing-2xl) var(--spacing-3xl); margin: var(--spacing-xl) 0; color: var(--color-text-inverse); text-align: center; } .blog-highlight-card__stat { font-family: var(--font-heading); font-size: var(--fs-4xl); font-weight: var(--fw-extrabold); margin-bottom: var(--spacing-sm); } .blog-highlight-card__label { font-size: var(--fs-lg); opacity: 0.9; } .blog-highlight-card__detail { font-size: var(--fs-sm); opacity: 0.7; margin-top: var(--spacing-sm); } /* --- Checklist Card --- */ .blog-checklist-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-2xl); margin: var(--spacing-xl) 0; } .blog-checklist-card h2 { font-size: var(--fs-xl); color: var(--color-primary-dark); margin-bottom: var(--spacing-lg); } .blog-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); list-style: none; } .blog-checklist li { display: flex; align-items: flex-start; gap: var(--spacing-sm); font-size: var(--fs-sm); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-bg); border-radius: var(--radius-md); } .blog-checklist__icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-top: 2px; } .blog-checklist__icon--yes { background: #ecfdf5; color: var(--color-success); } .blog-checklist__icon--no { background: #fef2f2; color: var(--color-error); } .blog-checklist__icon--info { background: var(--color-primary-light); color: var(--color-primary); } /* --- Price Info Box (inline in articles) --- */ .price-info-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-md); padding: var(--spacing-md) var(--spacing-lg); margin-top: var(--spacing-md); font-size: var(--fs-sm); color: #92400e; display: flex; align-items: center; gap: var(--spacing-md); } .price-info-box__icon { font-size: var(--fs-xl); flex-shrink: 0; } .price-info-box__text strong { font-weight: var(--fw-bold); } /* --- Price Badge (small tag) --- */ .price-badge { display: inline-block; background: var(--color-accent); color: var(--color-text-inverse); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; } /* --- Price Card (for reference page) --- */ .price-card { overflow: hidden; } .price-card__header { padding: var(--spacing-lg) var(--spacing-xl); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); } .price-card__header h3 { font-size: var(--fs-md); color: var(--color-primary-dark); margin-bottom: 0; } .price-card__body { padding: var(--spacing-lg) var(--spacing-xl); } .price-card__range { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin-bottom: var(--spacing-xs); } .price-card__context { font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: var(--spacing-md); } .price-card__details { list-style: none; } .price-card__details li { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border-light); font-size: var(--fs-sm); display: flex; justify-content: space-between; gap: var(--spacing-md); } .price-card__details li:last-child { border-bottom: none; } .price-card__label { color: var(--color-text-light); } .price-card__value { font-weight: var(--fw-semibold); color: var(--color-primary-dark); text-align: right; } .price-card__tip { margin-top: var(--spacing-md); padding: var(--spacing-md); background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: var(--radius-md); font-size: var(--fs-sm); color: #166534; } .price-card__factors { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px dashed var(--color-border); } .price-card__factors-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); margin-bottom: var(--spacing-sm); font-weight: var(--fw-semibold); } .price-card__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } /* --- Blog CTA Card --- */ .blog-cta-card { background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-lg); padding: var(--spacing-2xl); margin: var(--spacing-2xl) 0; text-align: center; } .blog-cta-card h2 { font-size: var(--fs-2xl); color: var(--color-primary-dark); margin-bottom: var(--spacing-sm); } .blog-cta-card p { color: var(--color-text-light); margin-bottom: var(--spacing-lg); } .blog-cta-card__sub { margin-top: var(--spacing-md); font-size: var(--fs-xs); color: var(--color-success); font-weight: var(--fw-semibold); } /* --- Related Tags (blog bottom) --- */ .blog-related-tags { margin: var(--spacing-xl) 0; padding: var(--spacing-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .blog-related-tags h3 { font-size: var(--fs-base); color: var(--color-primary-dark); margin-bottom: var(--spacing-md); } .blog-related-tags__links { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .blog-related-tags__link { background: var(--color-bg); border: 1px solid var(--color-border); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-full); font-size: var(--fs-sm); color: var(--color-primary); text-decoration: none; transition: all var(--transition-fast); } .blog-related-tags__link:hover { background: var(--color-primary-light); border-color: var(--color-primary); } /* ============================================ Blog Animations — Scroll-triggered Effects ============================================ */ /* --- 1. Fade-in-up: Generic reveal for all blog cards --- */ .blog-anim-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .blog-anim-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger children (e.g. checklist items, infographic columns) */ .blog-anim-reveal.is-visible .blog-anim-stagger { opacity: 0; animation: blogStaggerIn 0.5s ease forwards; } .blog-anim-reveal.is-visible .blog-anim-stagger:nth-child(1) { animation-delay: 0.1s; } .blog-anim-reveal.is-visible .blog-anim-stagger:nth-child(2) { animation-delay: 0.2s; } .blog-anim-reveal.is-visible .blog-anim-stagger:nth-child(3) { animation-delay: 0.25s; } .blog-anim-reveal.is-visible .blog-anim-stagger:nth-child(4) { animation-delay: 0.3s; } .blog-anim-reveal.is-visible .blog-anim-stagger:nth-child(5) { animation-delay: 0.35s; } .blog-anim-reveal.is-visible .blog-anim-stagger:nth-child(6) { animation-delay: 0.4s; } .blog-anim-reveal.is-visible .blog-anim-stagger:nth-child(7) { animation-delay: 0.5s; } .blog-anim-reveal.is-visible .blog-anim-stagger:nth-child(8) { animation-delay: 0.6s; } @keyframes blogStaggerIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* --- 2. Checklist Tick Animation --- */ .blog-checklist-anim li { opacity: 0; transform: translateX(-20px); } .blog-checklist-anim.is-visible li { animation: checklistSlideIn 0.45s ease forwards; } .blog-checklist-anim.is-visible li:nth-child(1) { animation-delay: 0.15s; } .blog-checklist-anim.is-visible li:nth-child(2) { animation-delay: 0.3s; } .blog-checklist-anim.is-visible li:nth-child(3) { animation-delay: 0.45s; } .blog-checklist-anim.is-visible li:nth-child(4) { animation-delay: 0.6s; } .blog-checklist-anim.is-visible li:nth-child(5) { animation-delay: 0.75s; } .blog-checklist-anim.is-visible li:nth-child(6) { animation-delay: 0.9s; } .blog-checklist-anim.is-visible li:nth-child(7) { animation-delay: 1.05s; } .blog-checklist-anim.is-visible li:nth-child(8) { animation-delay: 1.2s; } @keyframes checklistSlideIn { 0% { opacity: 0; transform: translateX(-20px); } 70% { opacity: 1; transform: translateX(3px); } 100% { opacity: 1; transform: translateX(0); } } /* Tick icon draw animation */ .blog-checklist-anim.is-visible li .blog-checklist__icon svg { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tickDraw 0.4s ease forwards; } .blog-checklist-anim.is-visible li:nth-child(1) .blog-checklist__icon svg { animation-delay: 0.35s; } .blog-checklist-anim.is-visible li:nth-child(2) .blog-checklist__icon svg { animation-delay: 0.5s; } .blog-checklist-anim.is-visible li:nth-child(3) .blog-checklist__icon svg { animation-delay: 0.65s; } .blog-checklist-anim.is-visible li:nth-child(4) .blog-checklist__icon svg { animation-delay: 0.8s; } .blog-checklist-anim.is-visible li:nth-child(5) .blog-checklist__icon svg { animation-delay: 0.95s; } .blog-checklist-anim.is-visible li:nth-child(6) .blog-checklist__icon svg { animation-delay: 1.1s; } @keyframes tickDraw { to { stroke-dashoffset: 0; } } /* --- 3. Highlight Card: Counter pulse + number scale --- */ .blog-highlight-card { overflow: hidden; position: relative; } .blog-highlight-card.blog-anim-reveal.is-visible .blog-highlight-card__stat { animation: statPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; } .blog-highlight-card.blog-anim-reveal.is-visible .blog-highlight-card__label { animation: blogStaggerIn 0.6s ease 0.5s both; } .blog-highlight-card.blog-anim-reveal.is-visible .blog-highlight-card__detail { animation: blogStaggerIn 0.6s ease 0.7s both; } /* Subtle pulse ring behind the stat */ .blog-highlight-card.blog-anim-reveal.is-visible::after { content: ''; position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); animation: statPulse 2s ease-out 0.3s both; pointer-events: none; } @keyframes statPop { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes statPulse { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } } /* --- 4. Infographic Bars: Grow animation --- */ .blog-infographic-card .blog-bar-anim { transform-origin: left center; transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .blog-infographic-card.is-visible .blog-bar-anim { transform: scaleX(1); } .blog-infographic-card.is-visible .blog-bar-anim:nth-child(1) { transition-delay: 0.1s; } .blog-infographic-card.is-visible .blog-bar-anim:nth-child(2) { transition-delay: 0.2s; } .blog-infographic-card.is-visible .blog-bar-anim:nth-child(3) { transition-delay: 0.3s; } .blog-infographic-card.is-visible .blog-bar-anim:nth-child(4) { transition-delay: 0.4s; } .blog-infographic-card.is-visible .blog-bar-anim:nth-child(5) { transition-delay: 0.5s; } /* Also for SVG rects inside infographic */ .blog-infographic-card svg rect.blog-bar-anim { transform-origin: 30px center; /* left edge of bars at x=30 */ } /* --- 5. Split Card: Slide-in from sides --- */ .blog-split-card.blog-anim-reveal { opacity: 1; transform: none; } .blog-split-card.blog-anim-reveal > :first-child { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; } .blog-split-card.blog-anim-reveal > :last-child { opacity: 0; transform: translateX(40px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } .blog-split-card.blog-anim-reveal.is-visible > :first-child, .blog-split-card.blog-anim-reveal.is-visible > :last-child { opacity: 1; transform: translateX(0); } /* --- 6. Price Info Box: Shimmer highlight --- */ .price-info-box { position: relative; overflow: hidden; } .price-info-box.blog-anim-reveal.is-visible::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); animation: priceShimmer 1.2s ease 0.5s both; pointer-events: none; } @keyframes priceShimmer { to { left: 100%; } } /* --- 7. Split Card Columns: Good/Bad visual differentiation --- */ .blog-split-card__column { padding: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: flex-start; } .blog-split-card__column--good { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-right: 3px solid #10b981; } .blog-split-card__column--bad { background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%); border-left: 3px solid #ef4444; } .blog-split-card__column--left { background: linear-gradient(135deg, var(--color-primary-light) 0%, #dbeafe 100%); border-right: 3px solid var(--color-primary); } .blog-split-card__column--right { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-left: 3px solid #10b981; } .blog-split-card__title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); } .blog-split-card__column--good .blog-split-card__title { color: #065f46; } .blog-split-card__column--bad .blog-split-card__title { color: #991b1b; } .blog-split-card__column--left .blog-split-card__title { color: var(--color-primary-dark); } .blog-split-card__column--right .blog-split-card__title { color: #065f46; } .blog-split-card__title-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; } .blog-split-card__column--good .blog-split-card__title-icon { background: #d1fae5; color: #10b981; } .blog-split-card__column--bad .blog-split-card__title-icon { background: #fecaca; color: #ef4444; } .blog-split-card__column--left .blog-split-card__title-icon { background: #dbeafe; color: var(--color-primary); } .blog-split-card__column--right .blog-split-card__title-icon { background: #d1fae5; color: #10b981; } .blog-split-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .blog-split-card__list li { display: flex; align-items: flex-start; gap: var(--spacing-sm); font-size: var(--fs-sm); line-height: 1.6; padding: var(--spacing-xs) 0; } .blog-split-card__list-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.7rem; margin-top: 2px; } .blog-split-card__column--good .blog-split-card__list-icon { background: #a7f3d0; color: #065f46; } .blog-split-card__column--bad .blog-split-card__list-icon { background: #fca5a5; color: #7f1d1d; } .blog-split-card__column--left .blog-split-card__list-icon { background: #bfdbfe; color: var(--color-primary-dark); } .blog-split-card__column--right .blog-split-card__list-icon { background: #a7f3d0; color: #065f46; } .blog-split-card__note { font-size: var(--fs-xs); color: var(--color-text-light); margin-top: auto; padding-top: var(--spacing-md); border-top: 1px dashed rgba(0,0,0,0.1); } /* --- 8. Enhanced Checklist: SVG tick icons + card header icon --- */ .blog-checklist-card__header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .blog-checklist-card__header-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 1.4rem; } .blog-checklist__icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* --- 9. Infographic Card enhancements --- */ .blog-infographic-card__header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .blog-infographic-card__header-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 1.4rem; } .blog-infographic-card__content { display: flex; justify-content: center; } /* --- 10. Highlight Card variants --- */ .blog-highlight-card--accent { background: linear-gradient(135deg, var(--color-accent) 0%, #0284c7 100%); } .blog-highlight-card--warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .blog-highlight-card--danger { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); } .blog-highlight-card--success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } /* --- 11. Progress Bar Card (new animation type) --- */ .blog-progress-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-2xl); margin: var(--spacing-xl) 0; } .blog-progress-card__title { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--color-primary-dark); margin-bottom: var(--spacing-lg); } .blog-progress-card__item { margin-bottom: var(--spacing-md); } .blog-progress-card__label { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--spacing-xs); color: var(--color-text); } .blog-progress-card__bar { height: 12px; background: var(--color-bg-alt); border-radius: var(--radius-full); overflow: hidden; position: relative; } .blog-progress-card__fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%); width: 0; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .blog-progress-card__fill--warning { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); } .blog-progress-card__fill--danger { background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%); } .blog-progress-card__fill--success { background: linear-gradient(90deg, #10b981 0%, #059669 100%); } .blog-progress-card.is-visible .blog-progress-card__fill { width: var(--progress); } /* --- 12. Icon Feature Grid Card (new) --- */ .blog-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin: var(--spacing-xl) 0; } .blog-feature-grid__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-sm); transition: all 0.3s ease; } .blog-feature-grid__item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .blog-feature-grid__icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .blog-feature-grid__icon--blue { background: #dbeafe; color: var(--color-primary); } .blog-feature-grid__icon--green { background: #d1fae5; color: #059669; } .blog-feature-grid__icon--amber { background: #fef3c7; color: #d97706; } .blog-feature-grid__icon--red { background: #fecaca; color: #dc2626; } .blog-feature-grid__icon--purple { background: #ede9fe; color: #7c3aed; } .blog-feature-grid__icon--teal { background: #ccfbf1; color: #0d9488; } .blog-feature-grid__item h4 { font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-primary-dark); margin: 0; } .blog-feature-grid__item p { font-size: var(--fs-sm); color: var(--color-text-light); line-height: 1.6; margin: 0; } /* --- 13. Callout / Tip Box --- */ .blog-callout { border-radius: var(--radius-lg); padding: var(--spacing-lg) var(--spacing-xl); margin: var(--spacing-xl) 0; display: flex; gap: var(--spacing-md); align-items: flex-start; } .blog-callout--tip { background: #ecfdf5; border-left: 4px solid #10b981; } .blog-callout--warning { background: #fffbeb; border-left: 4px solid #f59e0b; } .blog-callout--danger { background: #fef2f2; border-left: 4px solid #ef4444; } .blog-callout--info { background: #eff6ff; border-left: 4px solid var(--color-primary); } .blog-callout__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; } .blog-callout__content h4 { font-family: var(--font-heading); font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: var(--spacing-xs); } .blog-callout--tip .blog-callout__content h4 { color: #065f46; } .blog-callout--warning .blog-callout__content h4 { color: #92400e; } .blog-callout--danger .blog-callout__content h4 { color: #991b1b; } .blog-callout--info .blog-callout__content h4 { color: var(--color-primary-dark); } .blog-callout__content p { font-size: var(--fs-sm); line-height: 1.7; margin: 0; } /* --- Dark Mode: Blog Component Cards --- */ [data-theme="dark"] .blog-highlight-card { background: linear-gradient(135deg, rgba(0, 85, 164, 0.6) 0%, rgba(0, 51, 102, 0.8) 100%); } [data-theme="dark"] .blog-checklist-card, [data-theme="dark"] .blog-progress-card, [data-theme="dark"] .blog-feature-grid__item { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .blog-checklist-card h2, [data-theme="dark"] .blog-progress-card__title, [data-theme="dark"] .blog-feature-grid__item h4 { color: var(--color-accent); } [data-theme="dark"] .blog-feature-grid__item p { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .blog-checklist li { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .blog-checklist__icon--yes { background: rgba(16, 185, 129, 0.15); color: #34d399; } [data-theme="dark"] .blog-checklist__icon--no { background: rgba(239, 68, 68, 0.15); color: #f87171; } [data-theme="dark"] .blog-checklist__icon--info { background: rgba(0, 163, 224, 0.15); color: var(--color-accent); } [data-theme="dark"] .blog-feature-grid__icon--blue { background: rgba(0, 85, 164, 0.2); color: #60a5fa; } [data-theme="dark"] .blog-feature-grid__icon--green { background: rgba(16, 185, 129, 0.15); color: #34d399; } [data-theme="dark"] .blog-feature-grid__icon--amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } [data-theme="dark"] .blog-feature-grid__icon--red { background: rgba(239, 68, 68, 0.15); color: #f87171; } [data-theme="dark"] .blog-feature-grid__icon--purple { background: rgba(124, 58, 237, 0.15); color: #a78bfa; } [data-theme="dark"] .blog-feature-grid__icon--teal { background: rgba(13, 148, 136, 0.15); color: #2dd4bf; } [data-theme="dark"] .blog-callout--tip { background: rgba(16, 185, 129, 0.08); border-left-color: #34d399; } [data-theme="dark"] .blog-callout--warning { background: rgba(245, 158, 11, 0.08); border-left-color: #fbbf24; } [data-theme="dark"] .blog-callout--danger { background: rgba(239, 68, 68, 0.08); border-left-color: #f87171; } [data-theme="dark"] .blog-callout--info { background: rgba(0, 85, 164, 0.1); border-left-color: var(--color-accent); } [data-theme="dark"] .blog-callout--tip .blog-callout__content h4 { color: #34d399; } [data-theme="dark"] .blog-callout--warning .blog-callout__content h4 { color: #fbbf24; } [data-theme="dark"] .blog-callout--danger .blog-callout__content h4 { color: #f87171; } [data-theme="dark"] .blog-callout--info .blog-callout__content h4 { color: var(--color-accent); } [data-theme="dark"] .blog-callout__content p { color: rgba(255, 255, 255, 0.75); } [data-theme="dark"] .blog-split-card__column--good { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.15) 100%); border-right-color: #34d399; } [data-theme="dark"] .blog-split-card__column--bad { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.15) 100%); border-left-color: #f87171; } [data-theme="dark"] .blog-split-card__column--left { background: linear-gradient(135deg, rgba(0, 85, 164, 0.1) 0%, rgba(0, 163, 224, 0.12) 100%); border-right-color: var(--color-accent); } [data-theme="dark"] .blog-split-card__column--right { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.15) 100%); border-left-color: #34d399; } [data-theme="dark"] .blog-split-card__column--good .blog-split-card__title { color: #34d399; } [data-theme="dark"] .blog-split-card__column--bad .blog-split-card__title { color: #f87171; } [data-theme="dark"] .blog-split-card__column--left .blog-split-card__title { color: var(--color-accent); } [data-theme="dark"] .blog-split-card__column--right .blog-split-card__title { color: #34d399; } [data-theme="dark"] .blog-split-card__column--good .blog-split-card__title-icon { background: rgba(16, 185, 129, 0.2); color: #34d399; } [data-theme="dark"] .blog-split-card__column--bad .blog-split-card__title-icon { background: rgba(239, 68, 68, 0.2); color: #f87171; } [data-theme="dark"] .blog-split-card__column--left .blog-split-card__title-icon { background: rgba(0, 163, 224, 0.2); color: var(--color-accent); } [data-theme="dark"] .blog-split-card__column--right .blog-split-card__title-icon { background: rgba(16, 185, 129, 0.2); color: #34d399; } [data-theme="dark"] .blog-split-card__column--good .blog-split-card__list-icon { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; } [data-theme="dark"] .blog-split-card__column--bad .blog-split-card__list-icon { background: rgba(239, 68, 68, 0.2); color: #fca5a5; } [data-theme="dark"] .blog-split-card__column--left .blog-split-card__list-icon { background: rgba(0, 163, 224, 0.2); color: #93c5fd; } [data-theme="dark"] .blog-split-card__column--right .blog-split-card__list-icon { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; } [data-theme="dark"] .blog-split-card__list li { color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .blog-split-card__note { color: rgba(255, 255, 255, 0.5); border-top-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .blog-split-card__visual--blue { background: rgba(0, 85, 164, 0.2); } [data-theme="dark"] .blog-split-card__visual--green { background: rgba(16, 185, 129, 0.12); } [data-theme="dark"] .blog-split-card__visual--warm { background: rgba(245, 158, 11, 0.12); } [data-theme="dark"] .blog-split-card__visual--red { background: rgba(239, 68, 68, 0.12); } [data-theme="dark"] .blog-split-card__visual--purple { background: rgba(124, 58, 237, 0.12); } [data-theme="dark"] .blog-progress-card__bar { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .blog-progress-card__label { color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .price-info-box { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); color: #fbbf24; } [data-theme="dark"] .blog-article__hero { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .related-articles__item { border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .related-articles__category { color: var(--color-accent); } /* --- Responsive: Blog blocks --- */ @media (max-width: 768px) { .blog-split-card { grid-template-columns: 1fr; } .blog-split-card--reverse { direction: ltr; } .blog-split-card__visual { min-height: 220px; } .blog-split-card__column--good { border-right: none; border-bottom: 3px solid #10b981; } .blog-split-card__column--bad { border-left: none; border-top: 3px solid #ef4444; } .blog-split-card__column--left { border-right: none; border-bottom: 3px solid var(--color-primary); } .blog-split-card__column--right { border-left: none; border-top: 3px solid #10b981; } .blog-checklist { grid-template-columns: 1fr; } .blog-highlight-card__stat { font-size: var(--fs-3xl); } .blog-split-card__text { padding: var(--spacing-xl); } .blog-split-card__column { padding: var(--spacing-xl); } .blog-feature-grid { grid-template-columns: 1fr; } /* Disable side-slide on mobile for split cards */ .blog-split-card.blog-anim-reveal > :first-child, .blog-split-card.blog-anim-reveal > :last-child { transform: translateY(20px); } .blog-split-card.blog-anim-reveal.is-visible > :first-child, .blog-split-card.blog-anim-reveal.is-visible > :last-child { transform: translateY(0); } } /* ============================================ Zielgruppen Dashboard — Filter Components ============================================ */ /* Filter Bar */ .zg-filter-bar { padding: var(--spacing-lg) var(--spacing-xl); background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .zg-filter-label { font-family: var(--font-heading); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); margin-bottom: var(--spacing-md); font-weight: var(--fw-semibold); } .zg-filter-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .zg-filter-chip { padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text); transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--spacing-xs); } .zg-filter-chip:hover { border-color: var(--color-primary); } .zg-filter-chip.active { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); } .zg-filter-chip__count { background: rgba(255,255,255,0.3); padding: 1px 6px; border-radius: var(--radius-md); font-size: var(--fs-xs); font-weight: var(--fw-bold); } .zg-filter-chip:not(.active) .zg-filter-chip__count { background: var(--color-bg-alt); color: var(--color-text-light); } /* Type Tabs */ .zg-type-tabs { display: flex; gap: 2px; margin-bottom: var(--spacing-lg); border-bottom: 2px solid var(--color-border); } .zg-type-tab { padding: var(--spacing-sm) var(--spacing-md); font-family: var(--font-heading); font-size: var(--fs-sm); color: var(--color-text-light); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition-fast); background: none; border-top: none; border-left: none; border-right: none; font-weight: var(--fw-medium); } .zg-type-tab:hover { color: var(--color-primary-dark); } .zg-type-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: var(--fw-semibold); } /* Result Cards */ .zg-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-md); } .zg-result-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); transition: all var(--transition-fast); cursor: pointer; } .zg-result-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 12px rgba(0, 85, 164, 0.1); } .zg-result-card.hidden { display: none; } .zg-result-card__badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--radius-md); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.03em; display: inline-block; margin-bottom: var(--spacing-sm); } .zg-badge--blog { background: var(--color-primary-light); color: var(--color-primary); } .zg-badge--faq { background: #f5f3ff; color: #8b5cf6; } .zg-badge--rechner { background: #ecfdf5; color: var(--color-success); } .zg-badge--schwerpunkt { background: #fff7ed; color: #f97316; } .zg-badge--preisinfo { background: #fffbeb; color: #b45309; } .zg-result-card h4 { font-size: var(--fs-base); color: var(--color-primary-dark); margin-bottom: var(--spacing-xs); line-height: 1.4; } .zg-result-card p { font-size: var(--fs-xs); color: var(--color-text-light); line-height: 1.5; margin-bottom: 0; } .zg-result-card__price { margin-top: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-sm); background: #fffbeb; border-radius: var(--radius-md); font-size: var(--fs-xs); color: #92400e; font-weight: var(--fw-medium); } .zg-result-card__tags { display: flex; gap: var(--spacing-xs); margin-top: var(--spacing-sm); flex-wrap: wrap; } /* --- Warum Kostenlos Page --- */ .flow-step { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl) var(--spacing-2xl); display: flex; gap: var(--spacing-lg); align-items: flex-start; transition: all var(--transition-normal); } .flow-step:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); } .flow-step__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); flex-shrink: 0; } .flow-step__icon--blue { background: var(--color-primary-light); } .flow-step__icon--green { background: #ecfdf5; } .flow-step__icon--warm { background: #fffbeb; } .flow-step__content h3 { font-size: var(--fs-md); color: var(--color-primary-dark); margin-bottom: var(--spacing-xs); } .flow-step__content p { font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: 0; } .flow-connector { width: 2px; height: 32px; background: linear-gradient(to bottom, var(--color-border), var(--color-accent)); margin: 0 auto; position: relative; } .flow-connector::after { content: ''; position: absolute; bottom: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); } /* Comparison Grid */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } .compare-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-xl); position: relative; overflow: hidden; } .compare-card--neutral { border: 1px solid var(--color-border); } .compare-card--good { border: 2px solid var(--color-success); } .compare-card__label { position: absolute; top: 0; right: 0; padding: var(--spacing-xs) var(--spacing-md); font-size: var(--fs-xs); font-weight: var(--fw-bold); border-radius: 0 0 0 var(--radius-md); } .compare-card--good .compare-card__label { background: var(--color-success); color: var(--color-text-inverse); } .compare-card--neutral .compare-card__label { background: var(--color-bg-alt); color: var(--color-text-light); } .compare-card h3 { font-size: var(--fs-md); color: var(--color-primary-dark); margin-bottom: var(--spacing-md); margin-top: var(--spacing-sm); } /* Guarantee Section */ .guarantee-section { background: var(--color-surface); border: 2px solid var(--color-success); border-radius: var(--radius-lg); padding: var(--spacing-3xl); text-align: center; } .guarantee-section h2 { color: var(--color-primary-dark); margin-bottom: var(--spacing-md); } .guarantee-points { display: flex; justify-content: center; gap: var(--spacing-2xl); margin-top: var(--spacing-xl); flex-wrap: wrap; } .guarantee-point { text-align: center; } .guarantee-point__icon { width: 48px; height: 48px; border-radius: 50%; background: #ecfdf5; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); margin: 0 auto var(--spacing-sm); } .guarantee-point__text { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-dark); } /* Trust Row */ .trust-row { display: flex; justify-content: center; gap: var(--spacing-3xl); padding: var(--spacing-xl) 0; flex-wrap: wrap; } .trust-badge { text-align: center; } .trust-badge__number { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); color: var(--color-primary-dark); } .trust-badge__label { font-size: var(--fs-xs); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.04em; } @media (max-width: 768px) { .compare-grid { grid-template-columns: 1fr; } .guarantee-points { gap: var(--spacing-md); } .trust-row { gap: var(--spacing-xl); } } /* =================================================== warum-kostenlos.html — Page-Specific Styles =================================================== */ /* Hero */ .wk-hero { position: relative; background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-accent) 100%); padding-top: calc(var(--header-height) + var(--spacing-xl)); padding-bottom: var(--spacing-xl); text-align: center; overflow: hidden; } main > .wk-hero:first-child { margin-top: calc(-1 * var(--header-height)); } [data-theme="dark"] .wk-hero { background: linear-gradient(135deg, #0a1628 0%, #0d2240 50%, #1a4a70 100%); } .wk-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .wk-hero .container { position: relative; z-index: 1; } .wk-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat, no-repeat, no-repeat; background-size: 290px, 155px, 82px; background-position: right -20px bottom -20px, left 6% top 10%, right 22% center; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 55 C90 82 70 98 50 108 C30 98 10 82 10 55 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.13'/%3E%3Cpath d='M50 18 L80 30 L80 52 C80 74 65 87 50 95 C35 87 20 74 20 52 L20 30 Z' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.08'/%3E%3Ctext x='50' y='72' text-anchor='middle' font-size='42' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.13'%3E%E2%82%AC%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 55 C90 82 70 98 50 108 C30 98 10 82 10 55 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.07'/%3E%3Cpath d='M50 18 L80 30 L80 52 C80 74 65 87 50 95 C35 87 20 74 20 52 L20 30 Z' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.04'/%3E%3Ctext x='50' y='72' text-anchor='middle' font-size='42' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.07'%3E%E2%82%AC%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 L90 20 L90 55 C90 82 70 98 50 108 C30 98 10 82 10 55 L10 20 Z' fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='0.04'/%3E%3Cpath d='M50 18 L80 30 L80 52 C80 74 65 87 50 95 C35 87 20 74 20 52 L20 30 Z' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.02'/%3E%3Ctext x='50' y='72' text-anchor='middle' font-size='42' font-family='Georgia%2Cserif' font-weight='bold' fill='%23ffffff' fill-opacity='0.04'%3E%E2%82%AC%3C/text%3E%3C/svg%3E"); } .wk-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(16,185,129,0.2); border: 1px solid rgba(16,185,129,0.4); border-radius: 9999px; padding: 0.4rem 1.2rem; margin-bottom: var(--spacing-lg); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; color: #6ee7b7; } .wk-hero h1 { color: #fff; margin-bottom: var(--spacing-md); } .wk-hero__subtitle { color: rgba(255,255,255,0.85); font-size: var(--fs-lg); max-width: 680px; margin: 0 auto; } .wk-hero__subtitle strong { color: #fff; } /* Section containers */ .wk-section { padding: var(--spacing-2xl) 0; } .wk-section--bg { background: var(--color-bg); } .wk-section--bg-alt { background: var(--color-bg-alt); } .wk-section--flush-top { padding-top: 0; } .wk-section__title { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--color-primary-dark); text-align: center; margin-bottom: var(--spacing-xl); } /* Quick answer card */ .wk-answer-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-md); border-left: 4px solid var(--color-success); } .wk-answer-card h2 { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--color-primary-dark); margin-bottom: var(--spacing-md); } .wk-answer-card p { font-size: var(--fs-md); line-height: 1.7; color: var(--color-text); } /* Flow steps */ .wk-flow { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: 700px; margin: 0 auto; } .wk-flow__step { display: flex; gap: var(--spacing-md); align-items: flex-start; } .wk-flow__number { flex-shrink: 0; width: 48px; height: 48px; background: var(--color-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); } .wk-flow__number--success { background: var(--color-success); } .wk-flow__step h3 { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 700; color: var(--color-primary-dark); margin-bottom: 0.3rem; } .wk-flow__step p { color: var(--color-text-light); line-height: 1.6; } .wk-flow__arrow { text-align: center; } /* Provision cards */ .wk-provision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } .wk-provision-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); } .wk-provision-card__icon { width: 48px; height: 48px; background: var(--color-primary-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-md); color: var(--color-primary); } .wk-provision-card h3 { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; color: var(--color-primary-dark); margin-bottom: 0.5rem; } .wk-provision-card p { color: var(--color-text-light); line-height: 1.6; font-size: var(--fs-sm); } /* FAQ items */ .wk-faq-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .wk-faq-item { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .wk-faq-item summary { padding: var(--spacing-md) var(--spacing-lg); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--color-primary-dark); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .wk-faq-item summary::-webkit-details-marker { display: none; } .wk-faq-chevron { flex-shrink: 0; transition: transform 0.2s; } .wk-faq-item[open] .wk-faq-chevron { transform: rotate(180deg); } .wk-faq-item__body { padding: 0 var(--spacing-lg) var(--spacing-lg); color: var(--color-text-light); line-height: 1.7; font-size: var(--fs-sm); } /* Conviction section */ .wk-conviction { padding: var(--spacing-3xl) 0; background: var(--color-bg-alt); } .wk-conviction__intro { text-align: center; margin-bottom: var(--spacing-2xl); } .wk-conviction__badge { display: inline-block; background: var(--color-primary-light); color: var(--color-primary); font-size: var(--fs-sm); font-weight: 600; padding: 5px 16px; border-radius: 50px; margin-bottom: var(--spacing-md); letter-spacing: 0.05em; text-transform: uppercase; } .wk-conviction__title { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--color-primary-dark); margin-bottom: var(--spacing-md); } .wk-conviction__lead { color: var(--color-text-light); font-size: var(--fs-md); line-height: 1.75; max-width: 680px; margin: 0 auto; } /* Shield card */ .wk-shield-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-md); border-left: 4px solid var(--color-primary); margin-bottom: var(--spacing-xl); display: flex; gap: var(--spacing-lg); align-items: center; } .wk-shield-card__icon { flex-shrink: 0; width: 56px; height: 56px; background: var(--color-primary-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-primary); } .wk-shield-card__icon img { display: block; object-fit: contain; } /* Light mode: logos dark */ .wk-shield-card__icon img { filter: none; opacity: 0.85; } /* Dark mode: logos white */ [data-theme="dark"] .wk-shield-card__icon img { filter: brightness(0) invert(1); opacity: 0.9; } .wk-shield-card h3 { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 700; color: var(--color-primary-dark); margin-bottom: var(--spacing-sm); } .wk-shield-card p { color: var(--color-text); line-height: 1.75; font-size: var(--fs-sm); } /* Drei Säulen */ .wk-drei-saeulen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); } .wk-saeulen-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .wk-saeulen-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); } .wk-saeulen-card__icon { width: 52px; height: 52px; background: var(--color-primary-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); color: var(--color-primary); transition: background var(--transition-normal), color var(--transition-normal), transform var(--transition-normal); } .wk-saeulen-card:hover .wk-saeulen-card__icon { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; transform: scale(1.1); } .wk-saeulen-card h3 { font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary-dark); margin-bottom: var(--spacing-sm); } .wk-saeulen-card p { color: var(--color-text-light); font-size: var(--fs-xs); line-height: 1.65; } /* Säulen wave animation — reuses usp-wave keyframes */ .wk-saeulen-card.wk-wave-active { animation: usp-wave-glow 9s ease-in-out infinite; } .wk-saeulen-card.wk-wave-active .wk-saeulen-card__icon { animation: usp-wave-icon 9s ease-in-out infinite; } .wk-saeulen-card:nth-child(1).wk-wave-active, .wk-saeulen-card:nth-child(1).wk-wave-active .wk-saeulen-card__icon { animation-delay: 0s; } .wk-saeulen-card:nth-child(2).wk-wave-active, .wk-saeulen-card:nth-child(2).wk-wave-active .wk-saeulen-card__icon { animation-delay: 3s; } .wk-saeulen-card:nth-child(3).wk-wave-active, .wk-saeulen-card:nth-child(3).wk-wave-active .wk-saeulen-card__icon { animation-delay: 6s; } .wk-saeulen-card.wk-wave-active:hover, .wk-saeulen-card.wk-wave-active:hover .wk-saeulen-card__icon { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .wk-saeulen-card.wk-wave-active, .wk-saeulen-card.wk-wave-active .wk-saeulen-card__icon { animation: none; } } [data-theme="dark"] .wk-saeulen-card.wk-wave-active { animation-name: usp-wave-glow-dark; } [data-theme="dark"] .wk-saeulen-card.wk-wave-active .wk-saeulen-card__icon { animation-name: usp-wave-icon-dark; } /* Quote block */ .wk-quote { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-dark) 100%); border: 2px solid rgba(0,163,224,0.3); border-radius: var(--radius-lg); padding: var(--spacing-xl); color: #fff; text-align: center; position: relative; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; animation: quote-glow 4s ease-in-out infinite; } .wk-quote::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, #0055a4, #00a3e0, #38bdf8, #00a3e0, #0055a4); background-size: 300% 300%; animation: guarantee-border-shift 6s ease-in-out infinite; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } .wk-quote:hover::before { opacity: 1; } .wk-quote:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 8px 40px rgba(0,85,164,0.35), 0 0 60px rgba(0,163,224,0.15); border-color: transparent; } .wk-quote:hover .wk-quote__icon { transform: scale(1.2); filter: drop-shadow(0 0 12px rgba(0,163,224,0.6)); } @keyframes quote-glow { 0%, 100% { box-shadow: 0 2px 12px rgba(0,85,164,0.15); } 50% { box-shadow: 0 4px 28px rgba(0,85,164,0.28), 0 0 40px rgba(0,163,224,0.1); } } .wk-quote__icon { display: block; margin: 0 auto var(--spacing-md); transition: transform 0.4s ease, filter 0.4s ease; } .wk-quote__text { font-size: var(--fs-md); line-height: 1.75; font-style: italic; max-width: 600px; margin: 0 auto var(--spacing-sm); color: rgba(255,255,255,0.92); } .wk-quote__author { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); margin: 0; } @media (prefers-reduced-motion: reduce) { .wk-quote, .wk-quote__icon { animation: none; transition: none; } .wk-quote::before { display: none; } } /* Guarantee box */ .wk-guarantee { background: linear-gradient(135deg, #e8fdf2 0%, #d1fae5 100%); border: 2px solid var(--color-success); border-radius: var(--radius-lg); padding: var(--spacing-xl); text-align: center; position: relative; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; animation: guarantee-glow 4s ease-in-out infinite; } .wk-guarantee::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, #10b981, #34d399, #6ee7b7, #34d399, #10b981); background-size: 300% 300%; animation: guarantee-border-shift 6s ease-in-out infinite; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } .wk-guarantee:hover::before { opacity: 1; } .wk-guarantee:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 8px 40px rgba(16,185,129,0.3), 0 0 60px rgba(16,185,129,0.12); border-color: transparent; } .wk-guarantee:hover .wk-guarantee__icon { transform: scale(1.15) rotate(8deg); box-shadow: 0 0 30px rgba(16,185,129,0.5); } @keyframes guarantee-glow { 0%, 100% { box-shadow: 0 2px 12px rgba(16,185,129,0.1); } 50% { box-shadow: 0 4px 28px rgba(16,185,129,0.22), 0 0 40px rgba(16,185,129,0.08); } } @keyframes guarantee-border-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .wk-guarantee__icon { width: 64px; height: 64px; background: var(--color-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); transition: transform 0.4s ease, box-shadow 0.4s ease; } .wk-guarantee h2 { font-family: var(--font-heading); font-size: var(--fs-xl); color: #14532d; margin-bottom: var(--spacing-sm); } .wk-guarantee p { color: #166534; line-height: 1.7; max-width: 600px; margin: 0 auto var(--spacing-lg); font-size: var(--fs-md); } .wk-guarantee__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); } .wk-guarantee__badge { display: inline-flex; align-items: center; gap: 0.4rem; background: #fff; border: 1px solid var(--color-success); border-radius: 9999px; padding: 0.4rem 1rem; font-size: var(--fs-xs); font-weight: 600; color: var(--color-success); } /* CTA section */ .wk-cta { padding: var(--spacing-2xl) 0; color: #fff; text-align: center; /* background now via .hero-bg */ } .wk-cta h2 { font-family: var(--font-heading); font-size: var(--fs-2xl); margin-bottom: var(--spacing-md); color: #fff; } .wk-cta p { color: rgba(255,255,255,0.8); font-size: var(--fs-md); margin-bottom: var(--spacing-xl); line-height: 1.7; } .wk-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); } .wk-cta__legal { margin-top: var(--spacing-md); font-size: var(--fs-xs); color: rgba(255,255,255,0.5); margin-bottom: 0; } /* Dark Mode overrides */ [data-theme="dark"] .wk-guarantee { background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.04) 100%); border-color: rgba(16,185,129,0.35); animation-name: guarantee-glow-dark; } @keyframes guarantee-glow-dark { 0%, 100% { box-shadow: 0 2px 12px rgba(16,185,129,0.06); } 50% { box-shadow: 0 4px 32px rgba(16,185,129,0.18), 0 0 50px rgba(16,185,129,0.06); } } [data-theme="dark"] .wk-guarantee:hover { box-shadow: 0 8px 48px rgba(16,185,129,0.25), 0 0 70px rgba(16,185,129,0.1); } [data-theme="dark"] .wk-guarantee h2 { color: #6ee7b7; } [data-theme="dark"] .wk-guarantee p { color: var(--color-text-light); } [data-theme="dark"] .wk-guarantee__badge { background: var(--color-surface); border-color: rgba(16,185,129,0.4); color: #6ee7b7; } [data-theme="dark"] .wk-faq-item summary { color: var(--color-text); } [data-theme="dark"] .wk-section__title, [data-theme="dark"] .wk-answer-card h2, [data-theme="dark"] .wk-flow__step h3, [data-theme="dark"] .wk-provision-card h3, [data-theme="dark"] .wk-shield-card h3, [data-theme="dark"] .wk-saeulen-card h3, [data-theme="dark"] .wk-conviction__title { color: var(--color-text); } @media (prefers-reduced-motion: reduce) { .wk-guarantee, .wk-guarantee__icon { animation: none; transition: none; } .wk-guarantee::before { display: none; } } /* Responsive */ @media (max-width: 768px) { .wk-drei-saeulen { grid-template-columns: 1fr !important; } .wk-shield-card { flex-direction: column; } } @media (max-width: 480px) { .wk-provision-grid { grid-template-columns: 1fr; } .wk-hero__subtitle { font-size: var(--fs-md); } } /* ================================================ Booking Redirect Modal ================================================ */ #bookingModal, #leaveModal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; padding: 1rem; } #bookingModal.booking-modal--visible, #leaveModal.booking-modal--visible { opacity: 1; visibility: visible; } .booking-modal__card { background: var(--color-bg, #fff); border-radius: 16px; padding: 2rem 2rem 1.5rem; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); transform: translateY(12px) scale(0.97); transition: transform 0.3s ease; } #bookingModal.booking-modal--visible .booking-modal__card, #leaveModal.booking-modal--visible .booking-modal__card { transform: translateY(0) scale(1); } /* Leave-Modal: Host-Anzeige etwas hervorheben */ #leaveModal .booking-modal__text strong { display: inline-block; font-size: 1rem; color: var(--color-primary, #0055a4); word-break: break-all; margin-top: 0.3rem; } #leaveModal .booking-modal__skip input { accent-color: var(--color-primary, #0055a4); } [data-theme="dark"] #leaveModal .booking-modal__text strong { color: var(--color-accent, #00a3e0); } .booking-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-light, #e8f0fe); color: var(--color-primary, #0055a4); margin-bottom: 1rem; } .booking-modal__title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--color-text, #1a1a2e); margin: 0 0 0.6rem; } .booking-modal__text { font-size: 0.88rem; line-height: 1.6; color: var(--color-text-light, #6b7280); margin: 0 0 1.5rem; } .booking-modal__text strong { color: var(--color-text, #1a1a2e); } .booking-modal__buttons { display: flex; flex-direction: column; gap: 0.5rem; } .booking-modal__btn { padding: 0.75rem 1.5rem; border-radius: 50px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: all 0.2s ease; border: none; } .booking-modal__btn--primary { background: var(--color-primary, #0055a4); color: #fff; } .booking-modal__btn--primary:hover { background: var(--color-dark, #003366); transform: translateY(-1px); } .booking-modal__btn--ghost { background: transparent; color: var(--color-text-light, #6b7280); border: 1.5px solid var(--color-border, #e5e7eb); } .booking-modal__btn--ghost:hover { background: var(--color-bg-alt, #f8f9fa); color: var(--color-text, #1a1a2e); } /* Dark Mode */ [data-theme="dark"] .booking-modal__card { background: var(--color-bg, #0f1a2e); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .booking-modal__icon { background: rgba(0, 85, 164, 0.15); } [data-theme="dark"] .booking-modal__text strong { color: var(--color-text, #e0e7ef); } [data-theme="dark"] .booking-modal__btn--ghost { border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .booking-modal__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); } /* ============================================ SKELETON LOADING ANIMATIONS Premium loading states for streamed content ============================================ */ /* Base skeleton element with shimmer animation */ .skeleton { background: linear-gradient( 90deg, var(--color-bg-alt) 0%, var(--color-surface) 50%, var(--color-bg-alt) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); } /* Shimmer animation - left to right sweep */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Text line placeholder */ .skeleton-text { height: 1rem; border-radius: var(--radius-md); margin: var(--spacing-xs) 0; } .skeleton-text:last-child { margin-bottom: 0; } /* Heading placeholder */ .skeleton-title { height: 1.5rem; border-radius: var(--radius-md); margin: var(--spacing-md) 0; width: 60%; } /* Circular avatar placeholder */ .skeleton-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); } /* Card-shaped placeholder */ .skeleton-card { padding: var(--spacing-lg); border-radius: var(--radius-lg); background: linear-gradient( 90deg, var(--color-bg-alt) 0%, var(--color-surface) 50%, var(--color-bg-alt) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* Image placeholder with 16:9 aspect ratio */ .skeleton-image { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); } /* Dark mode skeleton variants */ [data-theme="dark"] .skeleton, [data-theme="dark"] .skeleton-text, [data-theme="dark"] .skeleton-card, [data-theme="dark"] .skeleton-image { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* ============================================ ENHANCED BUTTON MICRO-INTERACTIONS Stripe/Notion level polish and feedback ============================================ */ /* Base button enhancements */ .btn { position: relative; transition: all var(--transition-normal); overflow: hidden; } /* Hover state: subtle scale + elevation */ .btn:hover:not(:disabled) { transform: scale(1.02); box-shadow: var(--shadow-lg); } /* Active/press state */ .btn:active:not(:disabled) { transform: scale(0.98); } /* Primary button specific: glow effect */ .btn--primary { transition: all var(--transition-normal); } .btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 85, 164, 0.3); } /* CTA button: pulse/glow animation on idle */ .btn-cta { animation: pulse-glow 2s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 85, 164, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(0, 85, 164, 0); } } /* Stop pulse on hover */ .btn-cta:hover { animation: none; } /* Loading state with spinner */ .btn--loading { position: relative; color: transparent; pointer-events: none; } .btn--loading::after { content: ''; position: absolute; width: 1rem; height: 1rem; top: 50%; left: 50%; margin-left: -0.5rem; margin-top: -0.5rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-full); border-top-color: white; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Success state with checkmark */ .btn--success { background-color: var(--color-success); animation: success-flash 0.6s ease-out; } @keyframes success-flash { 0% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); } 100% { box-shadow: var(--shadow-md); } } .btn--success::after { content: '✓'; margin-left: 0.5rem; } /* Ripple effect on click */ .btn-ripple { position: relative; overflow: hidden; } .btn-ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); animation: ripple 0.6s ease-out; } @keyframes ripple { to { width: 300px; height: 300px; opacity: 0; } } /* Dark mode button enhancements */ [data-theme="dark"] .btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 163, 224, 0.3); } [data-theme="dark"] .btn-cta { animation: pulse-glow-dark 2s ease-in-out infinite; } @keyframes pulse-glow-dark { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 163, 224, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(0, 163, 224, 0); } } /* ============================================ CARD HOVER EFFECTS Lift and glow for premium feel ============================================ */ /* Card lift on hover */ .card-hover { transition: all var(--transition-normal); } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* Card with colored glow border */ .card-hover-glow { transition: all var(--transition-normal); border: 1px solid transparent; } .card-hover-glow:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), inset 0 0 15px rgba(0, 85, 164, 0.1); border-color: var(--color-primary); } /* Dark mode card effects */ [data-theme="dark"] .card-hover-glow:hover { box-shadow: var(--shadow-lg), inset 0 0 15px rgba(0, 163, 224, 0.15); border-color: var(--color-accent); } /* ============================================ FORM INPUT MICRO-INTERACTIONS Enhanced focus states and validation ============================================ */ /* Enhanced input focus state */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea, select { transition: all var(--transition-normal); border: 1px solid var(--color-border); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 85, 164, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05); } /* Label float animation */ .form-group label { transition: all var(--transition-normal); transform-origin: left center; } .form-group input:focus ~ label, .form-group input:not(:placeholder-shown) ~ label, .form-group textarea:focus ~ label, .form-group textarea:not(:placeholder-shown) ~ label { transform: translateY(-1.5rem) scale(0.85); color: var(--color-primary); } /* Input validation states */ input[type="text"].input--success, input[type="email"].input--success, textarea.input--success { border-color: var(--color-success); background-color: rgba(16, 185, 129, 0.02); } input[type="text"].input--success:focus, input[type="email"].input--success:focus, textarea.input--success:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05); border-color: var(--color-success); } input[type="text"].input--error, input[type="email"].input--error, textarea.input--error { border-color: var(--color-error); background-color: rgba(239, 68, 68, 0.02); } input[type="text"].input--error:focus, input[type="email"].input--error:focus, textarea.input--error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05); border-color: var(--color-error); } /* Dark mode form inputs */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea, [data-theme="dark"] select { border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] input[type="text"]:focus, [data-theme="dark"] input[type="email"]:focus, [data-theme="dark"] input[type="password"]:focus, [data-theme="dark"] input[type="tel"]:focus, [data-theme="dark"] input[type="number"]:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.2); } [data-theme="dark"] input[type="text"].input--success:focus, [data-theme="dark"] input[type="email"].input--success:focus, [data-theme="dark"] textarea.input--success:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.2); } [data-theme="dark"] input[type="text"].input--error:focus, [data-theme="dark"] input[type="email"].input--error:focus, [data-theme="dark"] textarea.input--error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.2); } /* ============================================ ADDITIONAL MICRO-INTERACTIONS Smooth transitions and feedback states ============================================ */ /* Disabled state opacity */ .btn:disabled, input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; } /* Focus visible for keyboard navigation */ .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } [data-theme="dark"] .btn:focus-visible, [data-theme="dark"] input:focus-visible, [data-theme="dark"] textarea:focus-visible, [data-theme="dark"] select:focus-visible { outline-color: var(--color-accent); } /* ============================================ MEDIA QUERY CONSOLIDATION AUDIT (#9) ============================================ CURRENT BREAKPOINTS FOUND (66 total queries): - 480px: 14 queries (PRIMARY mobile) - 768px: 15 queries (PRIMARY tablet) - 600px: 7 queries (NON-STANDARD - maps to sm:640px) - 1024px: 6 queries (PRIMARY desktop) - 960px: 4 queries (NON-STANDARD - maps to lg:1024px) - 900px: 2 queries (NON-STANDARD - maps to lg:1024px) - 640px: 2 queries (STANDARD - correct) - 1280px: 1 query (STANDARD - correct) - 375px: 1 query (NON-STANDARD - maps to sm:640px) - 380px: 1 query (NON-STANDARD - maps to sm:640px) - (hover: none): 1 query (PREFERENCE) - (prefers-reduced-motion: reduce): 3 queries (PREFERENCE) CONSOLIDATION PLAN: Target 4 standard breakpoints: sm:640px, md:768px, lg:1024px, xl:1280px MAPPING RECOMMENDATIONS: - 375px (line 2577) → sm:640px - 380px (line 2925) → sm:640px - 480px (lines 908, 2521, 2570, 2753, 2882, 3477, 5198, 5578, 7155, 7414, 7615, 9140, 10496) → sm:640px - 600px (lines 2502, 2922, 6401, 6704, 6831, 7905, 8587) → sm:640px - 768px (15 queries) → KEEP as md:768px - 900px (lines 2954, 8809) → lg:1024px - 960px (lines 6386, 6699, 6826, 7978) → lg:1024px - 1024px (6 queries) → KEEP as lg:1024px - 1280px (line 2279) → KEEP as xl:1280px STATUS: These are documented for future refactoring. NEW CSS below uses standard breakpoints only. No existing media queries were merged (too risky on live site). ============================================ */ /* ============================================ MOBILE TOUCH TARGET OPTIMIZATION (#13) WCAG 2.5.5 Level AAA: Minimum 44x44px touch target Applied to interactive elements on touch devices ============================================ */ /* Base button touch targets for mobile (up to 768px) */ @media (max-width: 768px) { /* Standard button: ensure 44px minimum height */ .btn { min-height: 44px; padding: 10px 1.75rem; } /* Small buttons: increase padding to meet 44px minimum */ .btn--sm { min-height: 44px; padding: 11px 1rem; } /* Large buttons: maintain adequate spacing */ .btn--lg { min-height: 44px; padding: 1.1rem 2.5rem; } /* Navigation links: ensure adequate tap targets */ .header__nav-link { min-height: 44px; padding: 10px var(--spacing-sm); display: inline-flex; align-items: center; justify-content: center; } .header__nav-link--cta, .header__nav-link--login { min-height: 44px; padding: 10px var(--spacing-md); } /* Footer social links: expand from 36px to 44px */ .footer__social { grid-template-columns: repeat(3, 44px); gap: 12px; } .footer__social a { width: 44px; height: 44px; } .footer__social a svg { width: 18px; height: 18px; } /* Search button in header */ .header__search-btn { min-width: 44px; min-height: 44px; } /* Mobile menu toggle button */ .header__hamburger { min-width: 44px; min-height: 44px; } /* Card action links */ .card__link { min-height: 44px; padding: 10px 1rem; display: inline-flex; align-items: center; } } /* Touch-specific optimizations: coarse pointer devices */ @media (hover: none) and (pointer: coarse) { /* Increase spacing for touch feedback */ .btn { min-height: 48px; padding: 12px 1.75rem; } /* Remove hover transform on touch devices to prevent jank */ .btn--primary:hover, .btn--secondary:hover, .btn--outline:hover, .btn--cta:hover { transform: none; } /* Enhance active state for touch feedback */ .btn:active { transform: scale(0.98); } /* Navigation link active feedback */ .header__nav-link:active { background-color: var(--color-primary-light); transform: none; } /* Footer social hover becomes active feedback */ .footer__social a:active { transform: scale(0.95); } } /* Landscape mode on mobile: tighter constraints */ @media (max-height: 500px) and (max-width: 768px) { .btn { min-height: 40px; padding: 8px 1.75rem; font-size: var(--fs-sm); } .btn--sm { min-height: 40px; padding: 8px 1rem; } .header__nav-link { min-height: 40px; padding: 8px var(--spacing-sm); } .footer__social { grid-template-columns: repeat(3, 40px); gap: 8px; } .footer__social a { width: 40px; height: 40px; } .footer__social a svg { width: 16px; height: 16px; } } /* Dark mode touch targets automatically inherit from light mode */ /* since min-height, min-width, and padding apply to all themes */ /* ============================================ Section Dividers: Wave & Curve Professional, subtle, scroll-triggered reveals ============================================ */ .section-divider-wave { position: relative; height: 80px; margin: 0; padding: 0; background: var(--color-divider-bg, transparent); overflow: hidden; } .section-divider-wave svg { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; } .section-divider-wave--top { /* Wave coming down from above */ --color-divider-bg: var(--section-divider-top-bg, var(--color-bg)); } .section-divider-wave--bottom { /* Wave going down below */ --color-divider-bg: var(--section-divider-bottom-bg, var(--color-bg)); transform: scaleY(-1); } /* Animated wave variant */ @keyframes wavePulse { 0% { transform: translateY(0px); opacity: 1; } 100% { transform: translateY(2px); opacity: 1; } } .section-divider-wave--animated svg { animation: wavePulse 6s ease-in-out infinite; } /* Curve divider (gentler than wave) */ .section-divider-curve { position: relative; height: 60px; margin: 0; padding: 0; background: var(--color-divider-bg, transparent); overflow: hidden; } .section-divider-curve svg { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; } .section-divider-curve--top { --color-divider-bg: var(--section-divider-top-bg, var(--color-bg)); } .section-divider-curve--bottom { --color-divider-bg: var(--section-divider-bottom-bg, var(--color-bg)); transform: scaleY(-1); } /* Scroll-triggered fade-in for dividers */ .section-divider-wave, .section-divider-curve { opacity: 0; transform: translateY(8px); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; } .section-divider-wave.is-visible, .section-divider-curve.is-visible { opacity: 1; transform: translateY(0); } /* Dark mode: adjust background colors */ [data-theme="dark"] .section-divider-wave, [data-theme="dark"] .section-divider-curve { --section-divider-top-bg: var(--color-bg); --section-divider-bottom-bg: var(--color-bg); } /* ============================================ Parallax Background Elements Subtle 30% parallax on scroll ============================================ */ .parallax-bg { /* Use CSS will-change for performance optimization */ will-change: transform; /* Fallback in case JS doesn't run */ position: relative; z-index: 0; } /* Respects prefers-reduced-motion (handled via JS) */ @media (prefers-reduced-motion: reduce) { .parallax-bg { will-change: auto; } } /* ============================================ Counter Animation Enhancements Tabular numbers for stable layout ============================================ */ .kennzahl-number .counter { /* Use tabular figures for consistent width during count-up */ font-variant-numeric: tabular-nums; /* Ensure numbers don't shift during animation */ display: inline-block; min-width: 1.5em; text-align: right; } /* Glow effect when counter finishes */ @keyframes counterGlow { 0% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); } 100% { text-shadow: 0 0 0 transparent; } } .kennzahl-item.is-visible .kennzahl-number { animation: counterGlow 2.5s ease-out; } /* ============================================ Extracted Inline Styles — vero-sim.html ============================================ */ /* Welcome screen — main heading */ .vero-sim__welcome-logo { font-size: 2.2rem; margin-bottom: 0.2rem; } /* Welcome screen — subtitle */ .vero-sim__welcome-subtitle-alt { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 500; } /* Welcome intro text — main description */ .vero-sim__welcome-description { font-size: 0.82rem; color: var(--color-text-light); line-height: 1.5; max-width: 320px; margin: 0 auto 1.2rem; } /* Welcome features — container */ .vero-sim__features-container { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin-bottom: 1.5rem; } /* Welcome feature — active step (enabled) */ .vero-sim__feature-step-active { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(135deg, rgba(0, 85, 164, 0.08), rgba(0, 163, 224, 0.06)); border: 1.5px solid rgba(0, 163, 224, 0.2); border-radius: 14px; text-align: left; } /* Welcome feature — inactive step (disabled) */ .vero-sim__feature-step-inactive { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--color-bg-alt); border: 1.5px solid #e5e7eb; border-radius: 14px; text-align: left; opacity: 0.7; } /* Welcome feature — icon box */ .vero-sim__feature-icon-box { width: 38px; height: 38px; border-radius: 10px; background: var(--gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Welcome feature — icon box disabled (gray) */ .vero-sim__feature-icon-box-disabled { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #e5e7eb, #d1d5db); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Welcome feature — step title */ .vero-sim__feature-step-title { font-size: 0.82rem; font-weight: 700; color: var(--color-primary); font-family: 'Montserrat', sans-serif; } /* Welcome feature — step title (inactive) */ .vero-sim__feature-step-title-inactive { font-size: 0.82rem; font-weight: 700; color: var(--color-text); font-family: 'Montserrat', sans-serif; } /* Welcome feature — step description */ .vero-sim__feature-step-description { font-size: 0.72rem; color: var(--color-text-light); margin-top: 2px; } /* Welcome button — main CTA */ .vero-sim__btn-start-intro { width: 100%; max-width: 320px; padding: 15px 36px; font-size: 1.05rem; margin-bottom: 0.8rem; } /* Welcome meta — runtime/features info */ .vero-sim__welcome-meta { margin-bottom: 0.8rem; } /* Welcome help link */ .vero-sim__help-link { font-size: 0.78rem; color: var(--color-accent); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s; } /* Editor return — family summary box */ .vero-sim__family-summary-box { background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(0, 163, 224, 0.08)); border: 1.5px solid rgba(16, 185, 129, 0.25); border-radius: 16px; padding: 20px 24px; margin: 14px 0 20px; text-align: left; } /* Editor return — success label */ .vero-sim__family-summary-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-success); font-weight: 700; margin-bottom: 8px; } /* Editor return — family summary text */ .vero-sim__family-summary-text { font-size: 0.88rem; color: var(--color-text); line-height: 1.6; } /* ============================================ Extracted Inline Styles — mein-bereich.html ============================================ */ /* Contract section — count badge */ .mein-bereich__contracts-count { display: none; } /* Contract section — help link */ .mein-bereich__contracts-help-link { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-primary); font-weight: 600; } /* Contract mode toggle — container */ .mein-bereich__upload-toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; } /* Contract mode toggle — button flex */ .mein-bereich__toggle-btn { flex: 1; } /* Contract upload hint — disclaimer text */ .mein-bereich__ki-disclaimer { font-size: 0.72rem; color: var(--color-text-light); margin-top: 0.25rem; line-height: 1.4; } /* Allianz tutorial — alert/tip box */ .mein-bereich__tutorial-tip-box { margin-top: 0.5rem; padding: 8px 12px; background: rgba(0, 85, 164, 0.04); border-left: 3px solid var(--color-primary); border-radius: 4px; font-size: 0.78rem; color: var(--color-text-light); } /* Allianz tutorial — tip strong text */ .mein-bereich__tutorial-tip-strong { color: var(--color-text); } /* Allianz CTA — center aligned link button */ .mein-bereich__allianz-cta { display: inline-flex; align-items: center; gap: 6px; } /* Allianz CTA — container */ .mein-bereich__allianz-cta-container { text-align: center; margin-top: 1rem; } /* Allianz dropzone — specialized */ .mein-bereich__allianz-dropzone { border-color: #0055a4; border-style: dashed; } /* Allianz loading — hidden state. !important, weil die inline-CSS auf .contract-loading (display: flex) sonst gewinnt. */ .mein-bereich__contract-loading-hidden { display: none !important; } /* Allianz results — hidden state */ .mein-bereich__contract-results-hidden { display: none !important; } /* Allianz results header — layout */ .mein-bereich__allianz-results-header { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 0.75rem; } /* Allianz results — header title */ .mein-bereich__allianz-results-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text); } /* Allianz results — summary text */ .mein-bereich__allianz-results-summary { font-size: 0.78rem; color: var(--color-text-light); } /* Allianz inactive wrapper — margin and hidden */ .mein-bereich__allianz-inactive-wrapper { margin-top: 1rem; display: none; } /* Allianz inactive summary — link styling */ .mein-bereich__allianz-summary-link { font-size: 0.85rem; font-weight: 600; color: var(--color-text-light); cursor: pointer; padding: 8px 0; } /* Allianz inactive contracts — container */ .mein-bereich__allianz-inactive-contracts { margin-top: 0.5rem; } /* Allianz other wrapper — margin and hidden */ .mein-bereich__allianz-other-wrapper { margin-top: 0.75rem; display: none; } /* Allianz other contracts — container */ .mein-bereich__allianz-other-contracts { margin-top: 0.5rem; } /* Allianz total bar — summary box */ .mein-bereich__allianz-total-bar { display: none; margin-top: 1.2rem; padding: 14px 18px; background: linear-gradient(135deg, rgba(0, 85, 164, 0.06), rgba(0, 163, 224, 0.06)); border-radius: 12px; border: 1px solid rgba(0, 85, 164, 0.1); } /* Allianz total bar — flex layout */ .mein-bereich__allianz-total-bar-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } /* Allianz total bar — label */ .mein-bereich__allianz-total-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); } /* Allianz total bar — amount */ .mein-bereich__allianz-total-amount { font-size: 1.1rem; font-weight: 800; color: var(--color-primary); font-family: Montserrat, sans-serif; } /* Allianz total bar — CTA container */ .mein-bereich__allianz-total-cta-container { margin-top: 1.2rem; padding: 14px 18px; background: var(--color-bg-alt); border-radius: 12px; text-align: center; } /* Allianz total bar — CTA prompt */ .mein-bereich__allianz-total-cta-prompt { font-size: 0.82rem; color: var(--color-text); margin: 0 0 8px; font-weight: 600; } /* Allianz total bar — CTA subtitle */ .mein-bereich__allianz-total-cta-subtitle { font-size: 0.75rem; color: var(--color-text-light); margin: 0 0 12px; } /* ===== BREADCRUMBS NAVIGATION ===== */ .breadcrumbs { padding: 1rem 0; font-size: 0.875rem; color: var(--color-text-light); max-width: 1200px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .breadcrumbs li { display: inline-flex; align-items: center; } .breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 0.5rem; color: var(--color-text-light); } .breadcrumbs a { color: var(--color-primary); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 500; } [data-theme="dark"] .breadcrumbs a { color: var(--color-accent); } /* ===== RELATED CONTENT SECTION ===== */ .related-content { padding: 4rem 0; background: var(--color-bg-alt); } .related-content h2 { text-align: center; margin-bottom: 2rem; } .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .related-card { display: block; padding: 1.5rem; background: var(--color-surface); border-radius: 0.75rem; border: 1px solid var(--color-border); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; } .related-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .related-card h3 { color: var(--color-primary); margin: 0 0 0.5rem; font-size: 1.125rem; } .related-card p { color: var(--color-text-light); margin: 0; font-size: 0.9375rem; } [data-theme="dark"] .related-card h3 { color: var(--color-accent); } /* ============================================ PINNED COVERFLOW — Cover-Flow / Spotlight Verwendet im Angepinnt-Bereich auf Startseite und Blog. Desktop: 3D-Coverflow, Mobile: Scroll-Snap. ============================================ */ .pinned-coverflow { position: relative; perspective: 1400px; padding: 1.5rem 0 1rem; overflow: hidden; outline: none; } .pinned-coverflow:focus-visible { outline: 2px dashed var(--color-accent, #00a3e0); outline-offset: 6px; border-radius: 12px; } .pinned-coverflow__stage { position: relative; height: 480px; transform-style: preserve-3d; touch-action: pan-y; } /* Kompakt-Override: NUR auf der Über-uns-Seite — Bild flacher, voller Text sichtbar. */ .page-header--ueber-uns ~ .about-body .pinned-coverflow__slide.blog-card .blog-card__image, .page-header--ueber-uns ~ .about-body .pinned-coverflow__slide.blog-pinned__card .blog-pinned__image { aspect-ratio: 3 / 1; } .page-header--ueber-uns ~ .about-body .pinned-coverflow__slide.blog-card .blog-card__content { padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1.25rem); } .page-header--ueber-uns ~ .about-body .pinned-coverflow__slide.blog-card .blog-card__excerpt { -webkit-line-clamp: unset; margin-bottom: var(--spacing-sm, 0.5rem); } /* Mainpage: Cards etwas größer darstellen */ .hero ~ .section .pinned-coverflow__slide { width: min(540px, 88vw); } .hero ~ .section .pinned-coverflow__stage { height: 600px; } /* Slide = das einzelne Karten-Element (z.B. .blog-pinned__card oder .blog-card) */ .pinned-coverflow__slide { position: absolute; top: 50%; left: 50%; width: min(460px, 84vw); margin: 0 !important; text-decoration: none; color: inherit; display: flex; flex-direction: column; transform: translate(-50%, -50%) translate3d(var(--cf-x, 0px), 0, 0) scale(var(--cf-s, 1)) rotateY(var(--cf-r, 0deg)); opacity: var(--cf-o, 1); filter: brightness(var(--cf-b, 1)); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease, filter 0.7s ease, box-shadow 0.3s ease; pointer-events: var(--cf-pe, auto); z-index: var(--cf-z, 1); will-change: transform, opacity; backface-visibility: hidden; cursor: pointer; } .pinned-coverflow__slide[data-cf="active"] { --cf-x: 0px; --cf-s: 1; --cf-r: 0deg; --cf-o: 1; --cf-b: 1; --cf-z: 10; --cf-pe: auto; } .pinned-coverflow__slide[data-cf="prev"] { --cf-x: -60%; --cf-s: 0.82; --cf-r: 22deg; --cf-o: 0.55; --cf-b: 0.72; --cf-z: 5; --cf-pe: auto; } .pinned-coverflow__slide[data-cf="next"] { --cf-x: 60%; --cf-s: 0.82; --cf-r: -22deg; --cf-o: 0.55; --cf-b: 0.72; --cf-z: 5; --cf-pe: auto; } .pinned-coverflow__slide[data-cf="hidden"] { --cf-x: 0px; --cf-s: 0.5; --cf-o: 0; --cf-z: 0; --cf-pe: none; } /* Hover-Override: höhere Spezifität, damit die Positionierung erhalten bleibt (verhindert Konflikte mit .blog-pinned__card:hover etc.) */ .pinned-coverflow__slide[data-cf]:hover { transform: translate(-50%, -50%) translate3d(var(--cf-x, 0px), 0, 0) scale(var(--cf-s, 1)) rotateY(var(--cf-r, 0deg)); } .pinned-coverflow__slide[data-cf="active"]:hover { transform: translate(-50%, -50%) scale(1.03); box-shadow: 0 16px 40px rgba(0, 85, 164, 0.18); } .pinned-coverflow__slide[data-cf="prev"]:hover, .pinned-coverflow__slide[data-cf="next"]:hover { --cf-o: 0.85; --cf-b: 0.92; } /* Innere Text-Elemente nicht unterstrichen (Slide ist ein ) */ .pinned-coverflow__slide, .pinned-coverflow__slide:hover, .pinned-coverflow__slide:focus { text-decoration: none; } .pinned-coverflow__slide .blog-card__title, .pinned-coverflow__slide .blog-pinned__title { text-decoration: none; color: var(--color-primary-dark); transition: color 0.2s ease; } .pinned-coverflow__slide:hover .blog-card__title, .pinned-coverflow__slide:hover .blog-pinned__title { color: var(--color-primary); } [data-theme="dark"] .pinned-coverflow__slide .blog-card__title, [data-theme="dark"] .pinned-coverflow__slide .blog-pinned__title { color: var(--color-heading, #e0e0e0); } [data-theme="dark"] .pinned-coverflow__slide:hover .blog-card__title, [data-theme="dark"] .pinned-coverflow__slide:hover .blog-pinned__title { color: #5ba3f5; } /* Navigation Buttons */ .pinned-coverflow__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--color-surface, #fff); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14); cursor: pointer; color: var(--color-primary, #0055a4); display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .pinned-coverflow__nav svg { width: 22px; height: 22px; } .pinned-coverflow__nav:hover { background: var(--color-primary, #0055a4); color: #fff; transform: translateY(-50%) scale(1.08); box-shadow: 0 8px 24px rgba(0, 85, 164, 0.28); } .pinned-coverflow__nav:focus-visible { outline: 2px solid var(--color-accent, #00a3e0); outline-offset: 3px; } .pinned-coverflow__nav--prev { left: 0.75rem; } .pinned-coverflow__nav--next { right: 0.75rem; } /* Dot-Indikatoren */ .pinned-coverflow__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; } .pinned-coverflow__dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(0, 85, 164, 0.22); cursor: pointer; padding: 0; transition: all 0.3s ease; } .pinned-coverflow__dot:hover { background: rgba(0, 85, 164, 0.45); } .pinned-coverflow__dot[aria-current="true"] { width: 28px; border-radius: 5px; background: var(--color-primary, #0055a4); } .pinned-coverflow__dot:focus-visible { outline: 2px solid var(--color-accent, #00a3e0); outline-offset: 2px; } /* Mobile: 3D-Coverflow-Darstellung (wie Desktop) — nur Dimensionen angepasst. Horizontales Swipen wird JS-gesteuert via Pointer-Events (pinned-coverflow.js), deshalb touch-action: pan-y (Page vertikal scrollbar, Karussell nimmt horizontal). */ @media (max-width: 768px) { .pinned-coverflow { /* perspective bleibt (aus Desktop-Default geerbt) */ padding: 0.75rem 0 0.5rem; } .pinned-coverflow__stage { /* Stage-Höhe wird von spezifischen Seiten überschrieben (Gallery hat z.B. eigene clamp-Höhe). Default: so wie Desktop. */ touch-action: pan-y; } /* Slide-Dimensionen für Mobile: Active-Card kompakter */ .pinned-coverflow__slide { width: min(340px, 78vw); } /* Prev/Next Cards etwas mehr zur Seite, damit Active-Card dominiert. Plus Nav-Arrows bleiben versteckt — Swipe ist die primäre Interaktion. */ .pinned-coverflow__slide[data-cf="prev"] { --cf-x: -58%; --cf-s: 0.78; --cf-r: 20deg; --cf-o: 0.45; } .pinned-coverflow__slide[data-cf="next"] { --cf-x: 58%; --cf-s: 0.78; --cf-r: -20deg; --cf-o: 0.45; } .pinned-coverflow__nav { display: none; } .pinned-coverflow__dots { margin-top: 0.75rem; } } /* Dark Mode */ [data-theme="dark"] .pinned-coverflow__nav { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .pinned-coverflow__nav:hover { background: var(--color-accent, #00a3e0); color: #fff; box-shadow: 0 8px 24px rgba(0, 163, 224, 0.35); } [data-theme="dark"] .pinned-coverflow__dot { background: rgba(255, 255, 255, 0.25); } [data-theme="dark"] .pinned-coverflow__dot:hover { background: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .pinned-coverflow__dot[aria-current="true"] { background: var(--color-accent, #00a3e0); } [data-theme="dark"] .pinned-coverflow__slide[data-cf="active"]:hover { box-shadow: 0 16px 40px rgba(0, 163, 224, 0.22); } /* Reduced Motion: keine 3D-Rotation, nur sanftes Fade */ @media (prefers-reduced-motion: reduce) { .pinned-coverflow__slide { transition: opacity 0.35s ease, filter 0.35s ease !important; } .pinned-coverflow__slide[data-cf="prev"], .pinned-coverflow__slide[data-cf="next"] { --cf-r: 0deg; --cf-x: 0px; --cf-s: 0.9; } } /* ============================================ KONTRAST-FIXES — Dark/Light Mode Konsistenz ============================================ Gezielte Überschreibungen für Stellen, an denen der Kontrast in einem der beiden Modi zu niedrig war oder Dark-Mode-Overrides fehlten. */ /* .cta-box__title verwendet --color-primary-dark (#1a4a8a im Dark Mode), was auf dunkel-blauem Box-Hintergrund kaum lesbar bleibt. */ [data-theme="dark"] .cta-box__title { color: var(--color-text); } /* .cta-box p ohne explizite Klasse: auch im Dark Mode klar lesbar halten */ [data-theme="dark"] .cta-box > p, [data-theme="dark"] .cta-box .cta-box__text { color: var(--color-text); opacity: 0.88; } /* Floating WhatsApp-Button (.whatsapp-btn) hatte keinen Dark-Mode-Override */ [data-theme="dark"] .whatsapp-btn { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35); } [data-theme="dark"] .whatsapp-btn:hover { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5); } [data-theme="dark"] .whatsapp-btn__tooltip { background: rgba(0, 0, 0, 0.85); color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); } /* .btn--whatsapp-sm ohne Dark-Mode-Override */ [data-theme="dark"] .btn--whatsapp-sm { background: #1fb855; color: #fff; box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3); } [data-theme="dark"] .btn--whatsapp-sm:hover { background: #25d366; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45); } /* Floating Sidebar WhatsApp-Button Schatten-Konsistenz */ [data-theme="dark"] .floating-sidebar__btn--whatsapp { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3); } [data-theme="dark"] .floating-sidebar__btn--whatsapp:hover { box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45); } /* Accordion-Header Hover im Dark Mode (nur active war überschrieben) */ [data-theme="dark"] .accordion-header:hover { background-color: rgba(74, 143, 224, 0.1); } /* .btn--secondary Hover im Dark Mode war zu subtil */ [data-theme="dark"] .btn--secondary:hover { background-color: rgba(91, 163, 245, 0.22); color: #9bc5ff; border-color: rgba(91, 163, 245, 0.45); } /* ============================================ CTA BREATHING GLOW ============================================ Sanft pulsierender Schein auf den wichtigen Handlungs-Buttons des Dreiklangs + WhatsApp. 2.4s Atemzyklus. Hover stoppt die Animation und setzt einen stärkeren statischen Glow. Respektiert prefers-reduced-motion. */ @keyframes ctaBreathingGlowBlue { 0%, 100% { box-shadow: 0 2px 10px rgba(0, 85, 164, 0.22), 0 0 0 0 rgba(0, 163, 224, 0); } 50% { box-shadow: 0 4px 22px rgba(0, 85, 164, 0.35), 0 0 22px 4px rgba(0, 163, 224, 0.38); } } @keyframes ctaBreathingGlowBlueDark { 0%, 100% { box-shadow: 0 2px 12px rgba(91, 163, 245, 0.25), 0 0 0 0 rgba(0, 200, 255, 0); } 50% { box-shadow: 0 4px 24px rgba(91, 163, 245, 0.45), 0 0 26px 5px rgba(0, 200, 255, 0.42); } } @keyframes ctaBreathingGlowCyan { 0%, 100% { box-shadow: 0 2px 10px rgba(0, 163, 224, 0.28), 0 0 0 0 rgba(0, 200, 255, 0); } 50% { box-shadow: 0 4px 22px rgba(0, 163, 224, 0.45), 0 0 24px 5px rgba(0, 200, 255, 0.5); } } @keyframes ctaBreathingGlowGreen { 0%, 100% { box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3), 0 0 0 0 rgba(37, 211, 102, 0); } 50% { box-shadow: 0 4px 22px rgba(37, 211, 102, 0.42), 0 0 24px 5px rgba(37, 211, 102, 0.45); } } /* Blaue Primary-Buttons */ .btn--primary, .header__nav-link--cta { animation: ctaBreathingGlowBlue 2.4s ease-in-out infinite; } .btn--primary:hover, .header__nav-link--cta:hover { animation: none; box-shadow: 0 8px 28px rgba(0, 85, 164, 0.5), 0 0 26px 6px rgba(0, 163, 224, 0.5); } [data-theme="dark"] .btn--primary, [data-theme="dark"] .header__nav-link--cta { animation-name: ctaBreathingGlowBlueDark; } [data-theme="dark"] .btn--primary:hover, [data-theme="dark"] .header__nav-link--cta:hover { box-shadow: 0 10px 32px rgba(91, 163, 245, 0.55), 0 0 30px 6px rgba(0, 200, 255, 0.55); } /* Cyan .btn--cta */ .btn--cta { animation: ctaBreathingGlowCyan 2.4s ease-in-out infinite; } .btn--cta:hover { animation: none; box-shadow: 0 8px 28px rgba(0, 163, 224, 0.55), 0 0 26px 6px rgba(0, 200, 255, 0.55); } [data-theme="dark"] .btn--cta:hover { box-shadow: 0 10px 32px rgba(0, 200, 255, 0.5), 0 0 30px 6px rgba(0, 220, 255, 0.55); } /* .btn--termin (transparenter Outline-Button, dezenter Glow) */ .btn--termin { animation: ctaBreathingGlowCyan 2.4s ease-in-out infinite; } .btn--termin:hover { animation: none; box-shadow: 0 8px 24px rgba(0, 163, 224, 0.42), 0 0 20px 4px rgba(0, 200, 255, 0.45); } [data-theme="dark"] .btn--termin { animation-name: ctaBreathingGlowBlueDark; } [data-theme="dark"] .btn--termin:hover { box-shadow: 0 10px 28px rgba(91, 163, 245, 0.4), 0 0 24px 5px rgba(0, 200, 255, 0.42); } /* Grüne WhatsApp-Varianten */ .btn--whatsapp, .whatsapp-btn, .btn--whatsapp-sm, .floating-sidebar__btn--whatsapp { animation: ctaBreathingGlowGreen 2.4s ease-in-out infinite; } .btn--whatsapp:hover, .whatsapp-btn:hover, .btn--whatsapp-sm:hover, .floating-sidebar__btn--whatsapp:hover { animation: none; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.55), 0 0 26px 6px rgba(37, 211, 102, 0.55); } [data-theme="dark"] .btn--whatsapp:hover, [data-theme="dark"] .whatsapp-btn:hover, [data-theme="dark"] .btn--whatsapp-sm:hover, [data-theme="dark"] .floating-sidebar__btn--whatsapp:hover { box-shadow: 0 12px 34px rgba(37, 211, 102, 0.6), 0 0 30px 7px rgba(37, 211, 102, 0.55); } /* Kontexte, in denen der Glow NICHT passt (Formulare, Modals, Auth, Comment-Form) — dort werden CTAs als funktionale Submit-Buttons verwendet, nicht als Marketing-CTAs. */ .lead-form .btn--primary, .lead-form .btn--cta, .newsletter-form .btn--primary, .newsletter-form .btn--cta, .newsletter-form .btn--whatsapp-sm, form .btn--primary, form .btn--cta, .modal .btn--primary, .modal .btn--cta, .comment-form .btn--primary, .auth-tab-content .btn--primary, .share-experience__buttons .btn--primary, .accordion-content .btn--primary { animation: none !important; box-shadow: none; } /* Hover in diesen Kontexten: zurück zum normalen Button-Hover */ .lead-form .btn--primary:hover, .newsletter-form .btn--primary:hover, form .btn--primary:hover, .modal .btn--primary:hover, .auth-tab-content .btn--primary:hover { box-shadow: var(--shadow-md); } /* Reduced Motion: Glow komplett abschalten, Hover-Effekt bleibt */ @media (prefers-reduced-motion: reduce) { .btn--primary, .btn--cta, .btn--termin, .btn--whatsapp, .whatsapp-btn, .btn--whatsapp-sm, .floating-sidebar__btn--whatsapp, .header__nav-link--cta { animation: none !important; } } /* ========================================================================= Blog-Share-Buttons Injiziert durch js/blog-share.js in jeden Blogartikel. Drei Varianten: top (dezent), bottom (prominent), sticky (Mobile). ========================================================================= */ .blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); } .blog-share__row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .blog-share__btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 0.55rem 0.95rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md, 0.65rem); background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; -webkit-tap-highlight-color: transparent; } .blog-share__btn svg { flex-shrink: 0; } .blog-share__btn:hover, .blog-share__btn:focus-visible { transform: translateY(-1px); border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 4px 12px var(--color-shadow); outline: none; } .blog-share__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Plattform-Akzente im Hover — visuelle Brücke zur Zielapp */ .blog-share__btn--whatsapp:hover, .blog-share__btn--whatsapp:focus-visible { border-color: #25D366; color: #128C7E; background: rgba(37, 211, 102, 0.08); } .blog-share__btn--instagram:hover, .blog-share__btn--instagram:focus-visible { border-color: #C13584; color: #C13584; background: linear-gradient(135deg, rgba(240, 148, 51, 0.08), rgba(193, 53, 132, 0.08)); } .blog-share__btn--email:hover, .blog-share__btn--email:focus-visible { border-color: var(--color-accent); color: var(--color-accent); } .blog-share__btn--link:hover, .blog-share__btn--link:focus-visible, .blog-share__btn--share:hover, .blog-share__btn--share:focus-visible { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } /* --- Top-Variante: dezent direkt unter dem Artikel-Header --- */ .blog-share--top { margin: 0 0 var(--spacing-xl); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border-light); } .blog-share--top .blog-share__mini-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); margin-right: var(--spacing-xs); } .blog-share--top .blog-share__btn { width: 2.4rem; height: 2.4rem; padding: 0; justify-content: center; border-radius: 50%; } .blog-share--top .blog-share__btn-label { display: none; /* Nur Icons oben */ } /* --- Bottom-Variante: prominenter Block vor der CTA-Box --- */ .blog-share--bottom { flex-direction: column; align-items: flex-start; margin: var(--spacing-2xl) 0 var(--spacing-xl); padding: var(--spacing-lg) var(--spacing-lg); background: linear-gradient(135deg, rgba(0, 85, 164, 0.04), rgba(0, 163, 224, 0.04)); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg, 1rem); } .blog-share--bottom .blog-share__lead { margin: 0 0 var(--spacing-md); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); } /* --- Sticky-Mobile-Bar --- */ .blog-share--sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08); transform: translateY(110%); transition: transform 0.28s ease; } .blog-share--sticky.is-visible { transform: translateY(0); } .blog-share--sticky .blog-share__row { width: 100%; justify-content: space-around; gap: 0.35rem; } .blog-share--sticky .blog-share__btn { flex: 1 1 0; justify-content: center; padding: 0.5rem 0.3rem; min-width: 0; border-radius: var(--radius-md); } .blog-share--sticky .blog-share__btn-label { display: none; /* auf Mobile nur Icons wegen Platz */ } /* Sticky-Bar nur auf schmalen Screens zeigen */ @media (max-width: 768px) { .blog-share--sticky { display: flex; } /* Etwas zusätzlichen Scroll-Raum, damit die Bar nicht den Footer verdeckt */ .blog-article { padding-bottom: 3.5rem; } } /* --- Toast --- */ .blog-share__toast { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 120%); z-index: 80; max-width: min(92vw, 22rem); padding: 0.75rem 1.1rem; background: var(--color-text); color: var(--color-text-inverse); font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; text-align: center; } .blog-share__toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* Auf Mobile nicht von Sticky-Bar verdecken */ @media (max-width: 768px) { .blog-share__toast { bottom: 5rem; } } /* --- Dark Mode --- */ [data-theme="dark"] .blog-share__btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: var(--color-text-inverse, #f0f2f5); } [data-theme="dark"] .blog-share__btn:hover, [data-theme="dark"] .blog-share__btn:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: var(--color-accent); color: var(--color-accent); } [data-theme="dark"] .blog-share--top { border-bottom-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .blog-share--bottom { background: linear-gradient(135deg, rgba(0, 163, 224, 0.08), rgba(0, 85, 164, 0.08)); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .blog-share--sticky { background: #0d1a2e; border-top-color: rgba(255, 255, 255, 0.1); box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .blog-share__toast { background: #f5f6f8; color: #1a1a2e; } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { .blog-share__btn, .blog-share--sticky, .blog-share__toast { transition: none !important; } .blog-share__btn:hover, .blog-share__btn:focus-visible { transform: none !important; } } /* ========================================================================= Button Focus-Visible — verstärkter A11y-Outline in Dark Mode (war im Original zu schwach auf dunklem Hintergrund) ========================================================================= */ .btn--primary:focus-visible, .btn--cta:focus-visible, .btn--secondary:focus-visible, .btn--outline:focus-visible, .btn--termin:focus-visible, .btn--whatsapp:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } [data-theme="dark"] .btn--primary:focus-visible, [data-theme="dark"] .btn--cta:focus-visible, [data-theme="dark"] .btn--secondary:focus-visible, [data-theme="dark"] .btn--outline:focus-visible, [data-theme="dark"] .btn--termin:focus-visible, [data-theme="dark"] .btn--whatsapp:focus-visible { outline-color: #7dd8ff; outline-width: 3px; } /* ========================================================================= A11y-Utility: Screen-Reader-only Für H1s oder Labels, die visuell verborgen, aber für Screenreader sichtbar sein müssen. Standard-Pattern von WebAIM. ========================================================================= */ .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; } /* ============================================================ Kontakt-Seite: Direktkontakt + Vorbeikommen Stand: 2026-04-19 ============================================================ */ /* --- Section: Direktkontakt (Rückruf + WhatsApp) --- */ .kontakt-direkt { background: linear-gradient(180deg, var(--color-bg-alt, #f8f9fa) 0%, var(--color-bg, #fff) 100%); } .kontakt-direkt__head { text-align: center; max-width: 720px; margin: 0 auto var(--spacing-xl, 2rem); } .kontakt-direkt__title { font-family: 'Montserrat', sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; color: var(--color-text, #1a1a2e); margin: 0 0 0.5rem; letter-spacing: -0.01em; } .kontakt-direkt__subtitle { font-size: var(--fs-md, 1rem); color: var(--color-text-light, #6b7280); line-height: 1.55; margin: 0; } .kontakt-direkt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; } @media (max-width: 860px) { .kontakt-direkt__grid { grid-template-columns: 1fr; } } /* --- Card-Grundlayout (Glass-Optik im SV-Stil) --- */ .kontakt-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 85, 164, 0.12); border-radius: var(--radius-xl, 16px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 85, 164, 0.06); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); transition: transform 0.25s ease, box-shadow 0.25s ease; } .kontakt-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 18px 44px rgba(0, 85, 164, 0.12); } .kontakt-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(0, 85, 164, 0.1), rgba(0, 163, 224, 0.16)); color: var(--color-primary, #0055a4); margin-bottom: 1rem; flex-shrink: 0; } .kontakt-card__icon--whatsapp { background: linear-gradient(135deg, rgba(37, 211, 102, 0.14), rgba(18, 140, 70, 0.18)); color: #128c46; } .kontakt-card__title { font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--color-text, #1a1a2e); margin: 0 0 0.5rem; } .kontakt-card__lead { font-size: 0.96rem; color: var(--color-text-light, #6b7280); line-height: 1.6; margin: 0 0 1.25rem; } .kontakt-card__form { display: flex; flex-direction: column; gap: 0.85rem; margin-top: auto; } .kontakt-card__form .form-group { margin: 0; } .kontakt-card__hint { font-size: var(--fs-sm, 0.875rem); color: var(--color-text-light, #6b7280); text-align: center; margin: 0.75rem 0 0; } .kontakt-card__hint a { color: var(--color-accent, #00a3e0); font-weight: 600; text-decoration: none; } .kontakt-card__hint a:hover { text-decoration: underline; } /* WhatsApp-Card spezifisch: Bullets + CTA-Stack */ .kontakt-card__bullets { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; } .kontakt-card__bullets li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.94rem; color: var(--color-text, #1a1a2e); } .kontakt-card__bullets li svg { flex-shrink: 0; color: #128c46; background: rgba(37, 211, 102, 0.14); padding: 4px; border-radius: 50%; box-sizing: content-box; } .kontakt-card__cta-stack { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .kontakt-card__cta-stack .btn { width: 100%; max-width: 320px; } /* --- Section: Vorbeikommen (Adresse + Maps) --- */ .kontakt-besuch { background: var(--color-bg, #fff); } .kontakt-besuch__head { text-align: center; max-width: 720px; margin: 0 auto var(--spacing-xl, 2rem); } /* ============================================================ Büro-Backdrop: fließender Foto-Hintergrund hinter den Kontakt-Sections (4-Karten-Hero + Besuchs-Grid). Das Interface liegt als Glas-Layer darüber, der Background scrollt ruhig mit (fixed) und bleibt über beide Sections durchgehend sichtbar. ============================================================ */ .kontakt-backdrop { position: relative; isolation: isolate; overflow: hidden; /* clip scrim + blur-ränder */ background-color: #0a1628; /* fallback, falls bild noch lädt */ } /* Blurred Background-Layer: Foto als atmosphärische Grundierung, nicht als konkrete Szene. Blur macht das Interface fokussierter und nimmt dem Allianz-Schriftzug auf der Fassade die Prominenz. */ .kontakt-backdrop::before { content: ""; position: absolute; inset: -24px; /* Überhang kaschiert weiche Blur-Ränder */ z-index: 0; background-image: url('../images/kontakt/buero-1600.webp'); background-size: cover; background-position: center 42%; background-attachment: fixed; background-repeat: no-repeat; filter: blur(4.5px) saturate(1.12); will-change: filter; pointer-events: none; } /* Dimmer — gedämpftes Foto bleibt sichtbar, Cards werden lesbar */ .kontakt-backdrop__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 22, 40, 0.38) 0%, rgba(10, 22, 40, 0.22) 45%, rgba(10, 22, 40, 0.48) 100%); pointer-events: none; } /* Sections innerhalb des Backdrops werden transparent */ .kontakt-backdrop > .kontakt-cards, .kontakt-backdrop > .kontakt-besuch { position: relative; z-index: 2; background: transparent; } /* 4-Karten-Hero: Glas-Karten statt weißer Cards */ .kontakt-backdrop .kontakt-cards__card { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 18px 44px rgba(0, 0, 0, 0.22); } .kontakt-backdrop .kontakt-cards__card:hover, .kontakt-backdrop .kontakt-cards__card:focus-visible { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 85, 164, 0.4); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 26px 60px rgba(0, 85, 164, 0.3); } /* Besuch-Section: Überschrift & Subtitle hellen auf, damit sie gegen das Foto stehen — sonst wären sie auf dunklem BG unsichtbar */ .kontakt-backdrop .kontakt-besuch__title { color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } .kontakt-backdrop .kontakt-besuch__subtitle { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } /* Info-Card und Map bekommen das gleiche Glass-Treatment */ .kontakt-backdrop .kontakt-besuch__card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 20px 48px rgba(0, 0, 0, 0.28); } .kontakt-backdrop .kontakt-besuch__map { border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 20px 48px rgba(0, 0, 0, 0.28); } /* Mobile: Foto-Backdrop komplett deaktivieren. Auf kleinen Screens überlagert das Bild die UI zu stark, ohne atmosphärischen Gewinn. Die Cards fallen zurück auf ihr normales Light-/Dark-Styling. */ @media (max-width: 720px) { .kontakt-backdrop { background-color: transparent; } .kontakt-backdrop::before, .kontakt-backdrop__scrim { display: none; } .kontakt-backdrop .kontakt-cards__card { background: rgba(255, 255, 255, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0, 85, 164, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 85, 164, 0.06); } .kontakt-backdrop .kontakt-cards__card:hover, .kontakt-backdrop .kontakt-cards__card:focus-visible { background: rgba(255, 255, 255, 0.98); border-color: rgba(0, 85, 164, 0.3); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 22px 48px rgba(0, 85, 164, 0.14); } .kontakt-backdrop .kontakt-besuch__title { color: var(--color-text, #1a1a2e); text-shadow: none; } .kontakt-backdrop .kontakt-besuch__subtitle { color: var(--color-text-light, #6b7280); text-shadow: none; } .kontakt-backdrop .kontakt-besuch__card { background: linear-gradient(160deg, rgba(0, 85, 164, 0.06) 0%, rgba(0, 163, 224, 0.04) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0, 85, 164, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 85, 164, 0.06); } .kontakt-backdrop .kontakt-besuch__map { border: 1px solid rgba(0, 85, 164, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 85, 164, 0.08); } /* Dark-Mode-Ergänzung für das Mobile-Fallback */ [data-theme="dark"] .kontakt-backdrop > .kontakt-cards, [data-theme="dark"] .kontakt-backdrop > .kontakt-besuch { background: #0a1628 !important; } [data-theme="dark"] .kontakt-backdrop .kontakt-cards__card { background: linear-gradient(180deg, #142036 0%, #0e1a30 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .kontakt-backdrop .kontakt-besuch__card { background: linear-gradient(160deg, rgba(0, 163, 224, 0.08) 0%, rgba(20, 32, 54, 0.7) 100%); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .kontakt-backdrop .kontakt-besuch__title { color: #f1f5f9; } [data-theme="dark"] .kontakt-backdrop .kontakt-besuch__subtitle { color: #cbd5e1; } } /* Retina-Desktop: schärfere 2400er-Variante */ @media (min-width: 1800px) { .kontakt-backdrop::before { background-image: url('../images/kontakt/buero-2400.webp'); } } /* Reduced-Motion: fixed-Background kann störend wirken, scrollen lassen */ @media (prefers-reduced-motion: reduce) { .kontakt-backdrop::before { background-attachment: scroll; } } /* Dark Mode: kräftigeres Scrim, dunkler Glas-Tint */ /* Darkmode-Bugfix: globale `.kontakt-cards`/`.kontakt-besuch` Rules setzen einen opaken Background im Darkmode — das überdeckt das Foto. Höhere Specificity, um transparent zu bleiben innerhalb des Backdrops. */ [data-theme="dark"] .kontakt-backdrop > .kontakt-cards, [data-theme="dark"] .kontakt-backdrop > .kontakt-besuch { background: transparent !important; } [data-theme="dark"] .kontakt-backdrop__scrim { background: linear-gradient(180deg, rgba(5, 10, 22, 0.48) 0%, rgba(5, 10, 22, 0.28) 45%, rgba(5, 10, 22, 0.52) 100%); } [data-theme="dark"] .kontakt-backdrop .kontakt-cards__card { background: rgba(20, 32, 54, 0.78); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .kontakt-backdrop .kontakt-cards__card:hover { background: rgba(20, 32, 54, 0.9); border-color: rgba(0, 163, 224, 0.4); } [data-theme="dark"] .kontakt-backdrop .kontakt-besuch__card { background: rgba(20, 32, 54, 0.88); border: 1px solid rgba(255, 255, 255, 0.1); } [data-theme="dark"] .kontakt-backdrop .kontakt-besuch__title { color: #f8fafc; } [data-theme="dark"] .kontakt-backdrop .kontakt-besuch__subtitle { color: rgba(248, 250, 252, 0.82); } .kontakt-besuch__title { font-family: 'Montserrat', sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; color: var(--color-text, #1a1a2e); margin: 0 0 0.5rem; letter-spacing: -0.01em; } .kontakt-besuch__subtitle { font-size: var(--fs-md, 1rem); color: var(--color-text-light, #6b7280); line-height: 1.55; margin: 0; } .kontakt-besuch__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.5rem; align-items: stretch; } @media (max-width: 860px) { .kontakt-besuch__grid { grid-template-columns: 1fr; } } .kontakt-besuch__info { display: flex; } .kontakt-besuch__card { width: 100%; display: flex; flex-direction: column; padding: 1.75rem; background: linear-gradient(160deg, rgba(0, 85, 164, 0.06) 0%, rgba(0, 163, 224, 0.04) 100%); border: 1px solid rgba(0, 85, 164, 0.14); border-radius: var(--radius-xl, 16px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 85, 164, 0.06); } .kontakt-besuch__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--color-primary, #0055a4), var(--color-accent, #00a3e0)); color: #fff; margin-bottom: 1rem; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0, 85, 164, 0.25); } .kontakt-besuch__card-title { font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--color-text, #1a1a2e); margin: 0 0 0.5rem; } .kontakt-besuch__address { font-style: normal; font-size: 1.02rem; line-height: 1.6; color: var(--color-text, #1a1a2e); margin: 0 0 1.25rem; } .kontakt-besuch__hours { margin: 0 0 1.25rem; } .kontakt-besuch__hours h4 { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary, #0055a4); margin: 0 0 0.5rem; } .kontakt-besuch__hours dl { margin: 0; padding: 0; } .kontakt-besuch__hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dashed rgba(0, 85, 164, 0.12); font-size: 0.94rem; } .kontakt-besuch__hours-row:last-of-type { border-bottom: none; } .kontakt-besuch__hours-row dt { font-weight: 600; color: var(--color-text, #1a1a2e); margin: 0; } .kontakt-besuch__hours-row dd { margin: 0; color: var(--color-text-light, #6b7280); text-align: right; } .kontakt-besuch__hours-note { margin: 0.75rem 0 0; font-size: 0.86rem; color: var(--color-text-light, #6b7280); font-style: italic; } .kontakt-besuch__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1rem; } .kontakt-besuch__actions .btn { flex: 1 1 auto; min-width: 0; } .kontakt-besuch__actions .btn svg { vertical-align: text-bottom; margin-right: 0.4rem; } /* Maps-Embed */ .kontakt-besuch__map { position: relative; min-height: 420px; border-radius: var(--radius-xl, 16px); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 85, 164, 0.08); border: 1px solid rgba(0, 85, 164, 0.14); } .kontakt-besuch__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 860px) { .kontakt-besuch__map { min-height: 380px; } } /* --- Dark Mode --- */ [data-theme="dark"] .kontakt-direkt { background: linear-gradient(180deg, #0a1628 0%, #0e1a30 100%); } [data-theme="dark"] .kontakt-direkt__title, [data-theme="dark"] .kontakt-besuch__title, [data-theme="dark"] .kontakt-besuch__card-title, [data-theme="dark"] .kontakt-card__title { color: #f1f5f9; } [data-theme="dark"] .kontakt-direkt__subtitle, [data-theme="dark"] .kontakt-besuch__subtitle, [data-theme="dark"] .kontakt-card__lead { color: #cbd5e1; } [data-theme="dark"] .kontakt-card { background: linear-gradient(180deg, #142036 0%, #0e1a30 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="dark"] .kontakt-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 163, 224, 0.18); } [data-theme="dark"] .kontakt-card__icon { background: linear-gradient(135deg, rgba(0, 163, 224, 0.18), rgba(0, 163, 224, 0.08)); color: #7dd3fc; } [data-theme="dark"] .kontakt-card__icon--whatsapp { background: linear-gradient(135deg, rgba(37, 211, 102, 0.22), rgba(18, 140, 70, 0.14)); color: #4ade80; } [data-theme="dark"] .kontakt-card__bullets li { color: #e2e8f0; } [data-theme="dark"] .kontakt-card__bullets li svg { color: #4ade80; background: rgba(74, 222, 128, 0.18); } [data-theme="dark"] .kontakt-card__hint { color: #94a3b8; } [data-theme="dark"] .kontakt-card__hint a { color: #7dd3fc; } [data-theme="dark"] .kontakt-besuch { background: #0a1628; } [data-theme="dark"] .kontakt-besuch__card { background: linear-gradient(160deg, rgba(0, 163, 224, 0.08) 0%, rgba(20, 32, 54, 0.7) 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .kontakt-besuch__address { color: #e2e8f0; } [data-theme="dark"] .kontakt-besuch__hours h4 { color: #7dd3fc; } [data-theme="dark"] .kontakt-besuch__hours-row { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .kontakt-besuch__hours-row dt { color: #f1f5f9; } [data-theme="dark"] .kontakt-besuch__hours-row dd { color: #cbd5e1; } [data-theme="dark"] .kontakt-besuch__hours-note { color: #94a3b8; } [data-theme="dark"] .kontakt-besuch__map { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3); /* Maps-iframe: leichter Filter, damit sie sich nicht aus dem Dark-BG losreißt */ filter: invert(0.92) hue-rotate(180deg) saturate(1.1) brightness(0.95); } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { .kontakt-card, .kontakt-card:hover { transition: none; transform: none; } } /* --- Print --- */ @media print { .kontakt-besuch__map { display: none; } .kontakt-card { box-shadow: none; border: 1px solid #ccc; } } /* ============================================================ Kontakt-Seite v2 (2026-04-19): 3-Karten-Hero + Rückruf-Zone Umbau auf Wunsch von Timo — Telefon komplett ausgeblendet, Rückruf prominent wie die Schnell-Check-Zone gestaltet. ============================================================ */ /* --- 3-Karten-Hero: Nachricht / WhatsApp / Rückruf --- */ .kontakt-cards { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 3vw, 2rem); background: var(--color-bg, #fff); } .kontakt-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; } /* Dreiklang-Variante: 3 Cards statt 4 */ .kontakt-cards--dreiklang .kontakt-cards__grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 1100px) { .kontakt-cards__grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .kontakt-cards--dreiklang .kontakt-cards__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .kontakt-cards__grid, .kontakt-cards--dreiklang .kontakt-cards__grid { grid-template-columns: 1fr; } } .kontakt-cards__card { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.35rem 1.35rem; min-height: 100%; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(0, 85, 164, 0.14); border-radius: var(--radius-xl, 16px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 85, 164, 0.06); color: inherit; text-decoration: none; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; isolation: isolate; } .kontakt-cards__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(0, 85, 164, 0.08), rgba(0, 163, 224, 0.12)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: -1; } .kontakt-cards__card:hover, .kontakt-cards__card:focus-visible { transform: translateY(-3px); border-color: rgba(0, 85, 164, 0.3); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 22px 48px rgba(0, 85, 164, 0.14); outline: none; } .kontakt-cards__card:hover::before, .kontakt-cards__card:focus-visible::before { opacity: 1; } .kontakt-cards__card--whatsapp:hover, .kontakt-cards__card--whatsapp:focus-visible { border-color: rgba(37, 211, 102, 0.35); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 22px 48px rgba(37, 211, 102, 0.18); } .kontakt-cards__card--whatsapp::before { background: linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(18, 140, 70, 0.12)); } .kontakt-cards__card--termin:hover, .kontakt-cards__card--termin:focus-visible { border-color: rgba(124, 58, 237, 0.35); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 22px 48px rgba(124, 58, 237, 0.22); } .kontakt-cards__card--termin::before { background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(91, 33, 182, 0.12)); } .kontakt-cards__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, rgba(0, 85, 164, 0.1), rgba(0, 163, 224, 0.16)); color: var(--color-primary, #0055a4); margin-bottom: 0.85rem; flex-shrink: 0; transition: transform 0.35s ease; } .kontakt-cards__card:hover .kontakt-cards__icon, .kontakt-cards__card:focus-visible .kontakt-cards__icon { transform: scale(1.06) rotate(-2deg); } .kontakt-cards__icon--whatsapp { background: linear-gradient(135deg, rgba(37, 211, 102, 0.16), rgba(18, 140, 70, 0.2)); color: #128c46; } .kontakt-cards__icon--callback { background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(234, 88, 12, 0.16)); color: #d97706; } .kontakt-cards__icon--termin { background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(91, 33, 182, 0.18)); color: #7c3aed; } .kontakt-cards__title { font-family: 'Montserrat', sans-serif; font-size: 1.18rem; font-weight: 700; color: var(--color-text, #1a1a2e); margin: 0 0 0.4rem; letter-spacing: -0.01em; } .kontakt-cards__lead { font-size: 0.9rem; color: var(--color-text-light, #6b7280); line-height: 1.5; margin: 0 0 0.85rem; } /* Bullet-Vorteile pro Card */ .kontakt-cards__bullets { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .kontakt-cards__bullets li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; line-height: 1.35; color: var(--color-text, #1a1a2e); } .kontakt-cards__check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 85, 164, 0.1); color: var(--color-primary, #0055a4); flex-shrink: 0; margin-top: 1px; } .kontakt-cards__card--whatsapp .kontakt-cards__check { background: rgba(37, 211, 102, 0.15); color: #128c46; } .kontakt-cards__card--callback .kontakt-cards__check { background: rgba(245, 158, 11, 0.15); color: #d97706; } .kontakt-cards__card--termin .kontakt-cards__check { background: rgba(124, 58, 237, 0.14); color: #7c3aed; } .kontakt-cards__arrow { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 85, 164, 0.08); color: var(--color-primary, #0055a4); margin-top: auto; transition: transform 0.25s ease, background 0.25s ease; } .kontakt-cards__card--whatsapp .kontakt-cards__arrow { background: rgba(37, 211, 102, 0.14); color: #128c46; } .kontakt-cards__card--callback .kontakt-cards__arrow { background: rgba(245, 158, 11, 0.14); color: #d97706; } .kontakt-cards__card--termin .kontakt-cards__arrow { background: rgba(124, 58, 237, 0.14); color: #7c3aed; } .kontakt-cards__card:hover .kontakt-cards__arrow, .kontakt-cards__card:focus-visible .kontakt-cards__arrow { transform: translateX(4px); background: var(--color-primary, #0055a4); color: #fff; } .kontakt-cards__card--whatsapp:hover .kontakt-cards__arrow, .kontakt-cards__card--whatsapp:focus-visible .kontakt-cards__arrow { background: #128c46; color: #fff; } .kontakt-cards__card--callback:hover .kontakt-cards__arrow, .kontakt-cards__card--callback:focus-visible .kontakt-cards__arrow { background: #d97706; color: #fff; } .kontakt-cards__card--termin:hover .kontakt-cards__arrow, .kontakt-cards__card--termin:focus-visible .kontakt-cards__arrow { background: #7c3aed; color: #fff; } /* --- Rückruf-Zone (prominente Zone im Schnell-Check-Stil) --- */ .rueckruf-zone { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(0, 163, 224, 0.08), transparent 70%), radial-gradient(ellipse 55% 45% at 80% 100%, rgba(0, 85, 164, 0.1), transparent 70%), linear-gradient(160deg, var(--color-bg-alt, #f8f9fa) 0%, var(--color-bg, #fff) 100%); overflow: hidden; } .rueckruf-zone::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 85, 164, 0.18), transparent); pointer-events: none; } .rueckruf-zone__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--spacing-md, 1rem); } .rueckruf-zone__head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .rueckruf-zone__title { font-family: 'Montserrat', sans-serif; font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; color: var(--color-text, #1a1a2e); margin: 0 0 0.5rem; letter-spacing: -0.015em; background: linear-gradient(135deg, var(--color-primary, #0055a4), var(--color-accent, #00a3e0)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rueckruf-zone__subtitle { font-size: var(--fs-md, 1rem); color: var(--color-text-light, #6b7280); line-height: 1.55; margin: 0; max-width: 560px; margin-left: auto; margin-right: auto; } .rueckruf-zone__card { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 85, 164, 0.14); border-radius: var(--radius-xl, 16px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04), 0 20px 60px rgba(0, 85, 164, 0.1); padding: clamp(1.5rem, 3.5vw, 2.25rem); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } .rueckruf-zone__form { display: flex; flex-direction: column; gap: 1rem; } .rueckruf-zone__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .rueckruf-zone__row { grid-template-columns: 1fr; } } .rueckruf-zone__row .form-group { margin: 0; } /* Zeitfenster-Slots als Radio-Cards */ .rueckruf-zone__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.55rem; margin-top: 0.4rem; } .rueckruf-zone__slot { position: relative; cursor: pointer; display: block; } .rueckruf-zone__slot input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .rueckruf-zone__slot-box { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.85rem; border: 1.5px solid rgba(0, 85, 164, 0.16); border-radius: 12px; background: rgba(255, 255, 255, 0.8); font-size: 0.9rem; line-height: 1.3; color: var(--color-text, #1a1a2e); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; min-height: 56px; height: 100%; box-sizing: border-box; } .rueckruf-zone__slot:hover .rueckruf-zone__slot-box { border-color: rgba(0, 85, 164, 0.35); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 85, 164, 0.08); } .rueckruf-zone__slot input:focus-visible + .rueckruf-zone__slot-box { outline: 2px solid var(--color-accent, #00a3e0); outline-offset: 2px; } .rueckruf-zone__slot input:checked + .rueckruf-zone__slot-box { border-color: var(--color-primary, #0055a4); background: linear-gradient(135deg, rgba(0, 85, 164, 0.12), rgba(0, 163, 224, 0.08)); box-shadow: 0 4px 12px rgba(0, 85, 164, 0.15), inset 0 0 0 1px rgba(0, 85, 164, 0.2); } .rueckruf-zone__slot-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(0, 85, 164, 0.08); color: var(--color-primary, #0055a4); flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; } .rueckruf-zone__slot input:checked + .rueckruf-zone__slot-box .rueckruf-zone__slot-icon { background: linear-gradient(135deg, var(--color-primary, #0055a4), var(--color-accent, #00a3e0)); color: #fff; } .rueckruf-zone__slot-label { font-weight: 500; line-height: 1.25; } .rueckruf-zone__slot-label small { display: block; color: var(--color-text-light, #6b7280); font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem; } .rueckruf-zone__slot input:checked + .rueckruf-zone__slot-box .rueckruf-zone__slot-label small { color: var(--color-primary, #0055a4); } /* --- Öffnungszeiten-Link (SSoT auf Google Maps) --- */ .kontakt-besuch__hours-lede { margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--color-text-light, #6b7280); line-height: 1.5; } .kontakt-besuch__hours-link { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1rem; background: rgba(0, 85, 164, 0.06); border: 1px solid rgba(0, 85, 164, 0.18); border-radius: 10px; color: var(--color-primary, #0055a4); font-weight: 600; font-size: 0.94rem; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .kontakt-besuch__hours-link:hover, .kontakt-besuch__hours-link:focus-visible { background: rgba(0, 85, 164, 0.12); border-color: rgba(0, 85, 164, 0.3); transform: translateY(-1px); outline: none; } .kontakt-besuch__hours-link-icon { display: inline-flex; align-items: center; justify-content: center; } .kontakt-besuch__hours-link-arrow { margin-left: auto; transition: transform 0.2s ease; } .kontakt-besuch__hours-link:hover .kontakt-besuch__hours-link-arrow, .kontakt-besuch__hours-link:focus-visible .kontakt-besuch__hours-link-arrow { transform: translateX(3px); } /* Maps-Link unter der Karte */ .kontakt-besuch__map-link { position: absolute; bottom: 0.75rem; right: 0.75rem; background: rgba(255, 255, 255, 0.94); color: var(--color-primary, #0055a4); padding: 0.45rem 0.8rem; border-radius: 8px; font-size: 0.82rem; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); z-index: 2; transition: transform 0.2s ease, box-shadow 0.2s ease; } .kontakt-besuch__map-link:hover, .kontakt-besuch__map-link:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); outline: none; } /* --- Dark Mode für 3-Karten-Hero + Rückruf-Zone --- */ [data-theme="dark"] .kontakt-cards { background: #0a1628; } [data-theme="dark"] .kontakt-cards__card { background: linear-gradient(180deg, #142036 0%, #0e1a30 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="dark"] .kontakt-cards__card:hover, [data-theme="dark"] .kontakt-cards__card:focus-visible { border-color: rgba(0, 163, 224, 0.35); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 22px 48px rgba(0, 163, 224, 0.2); } [data-theme="dark"] .kontakt-cards__card--whatsapp:hover, [data-theme="dark"] .kontakt-cards__card--whatsapp:focus-visible { border-color: rgba(74, 222, 128, 0.4); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 22px 48px rgba(37, 211, 102, 0.22); } [data-theme="dark"] .kontakt-cards__title { color: #f1f5f9; } [data-theme="dark"] .kontakt-cards__lead { color: #cbd5e1; } [data-theme="dark"] .kontakt-cards__icon { background: linear-gradient(135deg, rgba(0, 163, 224, 0.2), rgba(0, 163, 224, 0.08)); color: #7dd3fc; } [data-theme="dark"] .kontakt-cards__icon--whatsapp { background: linear-gradient(135deg, rgba(37, 211, 102, 0.24), rgba(18, 140, 70, 0.14)); color: #4ade80; } [data-theme="dark"] .kontakt-cards__icon--callback { background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(234, 88, 12, 0.14)); color: #fbbf24; } [data-theme="dark"] .kontakt-cards__arrow { background: rgba(125, 211, 252, 0.12); color: #7dd3fc; } [data-theme="dark"] .kontakt-cards__card--whatsapp .kontakt-cards__arrow { background: rgba(74, 222, 128, 0.18); color: #4ade80; } [data-theme="dark"] .kontakt-cards__card--callback .kontakt-cards__arrow { background: rgba(251, 191, 36, 0.18); color: #fbbf24; } [data-theme="dark"] .kontakt-cards__card:hover .kontakt-cards__arrow, [data-theme="dark"] .kontakt-cards__card:focus-visible .kontakt-cards__arrow { background: #7dd3fc; color: #0a1628; } [data-theme="dark"] .kontakt-cards__card--whatsapp:hover .kontakt-cards__arrow, [data-theme="dark"] .kontakt-cards__card--whatsapp:focus-visible .kontakt-cards__arrow { background: #4ade80; color: #0a1628; } [data-theme="dark"] .kontakt-cards__card--callback:hover .kontakt-cards__arrow, [data-theme="dark"] .kontakt-cards__card--callback:focus-visible .kontakt-cards__arrow { background: #fbbf24; color: #0a1628; } [data-theme="dark"] .rueckruf-zone { background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(0, 163, 224, 0.14), transparent 70%), radial-gradient(ellipse 55% 45% at 80% 100%, rgba(0, 85, 164, 0.18), transparent 70%), linear-gradient(160deg, #0a1628 0%, #0e1a30 100%); } [data-theme="dark"] .rueckruf-zone__title { background: linear-gradient(135deg, #7dd3fc, #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="dark"] .rueckruf-zone__subtitle { color: #cbd5e1; } [data-theme="dark"] .rueckruf-zone__card { background: linear-gradient(180deg, rgba(20, 32, 54, 0.92) 0%, rgba(14, 26, 48, 0.92) 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 20px 60px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .rueckruf-zone__slot-box { background: rgba(10, 22, 40, 0.5); border-color: rgba(255, 255, 255, 0.1); color: #e2e8f0; } [data-theme="dark"] .rueckruf-zone__slot:hover .rueckruf-zone__slot-box { border-color: rgba(125, 211, 252, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .rueckruf-zone__slot input:checked + .rueckruf-zone__slot-box { border-color: #7dd3fc; background: linear-gradient(135deg, rgba(0, 163, 224, 0.22), rgba(0, 85, 164, 0.16)); box-shadow: 0 4px 12px rgba(0, 163, 224, 0.22), inset 0 0 0 1px rgba(125, 211, 252, 0.3); } [data-theme="dark"] .rueckruf-zone__slot-icon { background: rgba(125, 211, 252, 0.12); color: #7dd3fc; } [data-theme="dark"] .rueckruf-zone__slot input:checked + .rueckruf-zone__slot-box .rueckruf-zone__slot-icon { background: linear-gradient(135deg, #7dd3fc, #38bdf8); color: #0a1628; } [data-theme="dark"] .rueckruf-zone__slot-label small { color: #94a3b8; } [data-theme="dark"] .rueckruf-zone__slot input:checked + .rueckruf-zone__slot-box .rueckruf-zone__slot-label small { color: #7dd3fc; } [data-theme="dark"] .kontakt-besuch__hours-lede { color: #cbd5e1; } [data-theme="dark"] .kontakt-besuch__hours-link { background: rgba(125, 211, 252, 0.08); border-color: rgba(125, 211, 252, 0.22); color: #7dd3fc; } [data-theme="dark"] .kontakt-besuch__hours-link:hover, [data-theme="dark"] .kontakt-besuch__hours-link:focus-visible { background: rgba(125, 211, 252, 0.16); border-color: rgba(125, 211, 252, 0.4); } [data-theme="dark"] .kontakt-besuch__map-link { background: rgba(20, 32, 54, 0.94); color: #7dd3fc; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* --- Dark Mode: Termin-Card + Bullets --- */ [data-theme="dark"] .kontakt-cards__bullets li { color: #e2e8f0; } [data-theme="dark"] .kontakt-cards__check { background: rgba(125, 211, 252, 0.14); color: #7dd3fc; } [data-theme="dark"] .kontakt-cards__card--whatsapp .kontakt-cards__check { background: rgba(74, 222, 128, 0.18); color: #4ade80; } [data-theme="dark"] .kontakt-cards__card--callback .kontakt-cards__check { background: rgba(251, 191, 36, 0.18); color: #fbbf24; } [data-theme="dark"] .kontakt-cards__card--termin .kontakt-cards__check { background: rgba(196, 181, 253, 0.18); color: #c4b5fd; } [data-theme="dark"] .kontakt-cards__icon--termin { background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(124, 58, 237, 0.14)); color: #c4b5fd; } [data-theme="dark"] .kontakt-cards__card--termin .kontakt-cards__arrow { background: rgba(196, 181, 253, 0.18); color: #c4b5fd; } [data-theme="dark"] .kontakt-cards__card--termin:hover, [data-theme="dark"] .kontakt-cards__card--termin:focus-visible { border-color: rgba(196, 181, 253, 0.4); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 22px 48px rgba(167, 139, 250, 0.22); } [data-theme="dark"] .kontakt-cards__card--termin:hover .kontakt-cards__arrow, [data-theme="dark"] .kontakt-cards__card--termin:focus-visible .kontakt-cards__arrow { background: #c4b5fd; color: #0a1628; } /* ============================================================ Kontakt-Duo: Nachricht + Rückruf kompakt nebeneinander ============================================================ */ .kontakt-duo { position: relative; padding: clamp(2rem, 5vw, 4rem) 0; background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(0, 163, 224, 0.06), transparent 70%), radial-gradient(ellipse 55% 45% at 80% 100%, rgba(245, 158, 11, 0.06), transparent 70%), linear-gradient(160deg, var(--color-bg-alt, #f8f9fa) 0%, var(--color-bg, #fff) 100%); overflow: hidden; } .kontakt-duo__head { text-align: center; max-width: 720px; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); } .kontakt-duo__title { font-family: 'Montserrat', sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; color: var(--color-text, #1a1a2e); margin: 0 0 0.5rem; letter-spacing: -0.01em; } .kontakt-duo__subtitle { font-size: var(--fs-md, 1rem); color: var(--color-text-light, #6b7280); line-height: 1.55; margin: 0; } .kontakt-duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; } @media (max-width: 960px) { .kontakt-duo__grid { grid-template-columns: 1fr; } } .kontakt-duo__col { position: relative; display: flex; flex-direction: column; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 85, 164, 0.14); border-radius: var(--radius-xl, 16px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 14px 36px rgba(0, 85, 164, 0.08); } .kontakt-duo__col--callback { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(254, 249, 241, 0.94) 100%); border-color: rgba(245, 158, 11, 0.22); } .kontakt-duo__colhead { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; } .kontakt-duo__colicon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, rgba(0, 85, 164, 0.1), rgba(0, 163, 224, 0.18)); color: var(--color-primary, #0055a4); flex-shrink: 0; } .kontakt-duo__colicon--callback { background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(234, 88, 12, 0.16)); color: #d97706; } .kontakt-duo__coltitle { font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--color-text, #1a1a2e); margin: 0; letter-spacing: -0.01em; } .kontakt-duo__collead { font-size: 0.92rem; color: var(--color-text-light, #6b7280); line-height: 1.5; margin: 0 0 1.1rem; } .kontakt-duo__form { display: flex; flex-direction: column; gap: 0.75rem; } .kontakt-duo__form .form-group { margin: 0; } .kontakt-duo__form .form-textarea { min-height: 80px; } .kontakt-duo__submit { width: 100%; margin-top: 0.35rem; } .kontakt-duo__coltip { margin: 1rem 0 0; margin-top: auto; padding: 0.8rem 0.95rem; background: rgba(0, 85, 164, 0.06); border-left: 3px solid var(--color-accent, #00a3e0); border-radius: 0 8px 8px 0; font-size: 0.85rem; color: var(--color-text-light, #6b7280); line-height: 1.5; } .kontakt-duo__col--callback .kontakt-duo__coltip { background: rgba(245, 158, 11, 0.08); border-left-color: #d97706; } .kontakt-duo__coltip strong { color: var(--color-text, #1a1a2e); font-weight: 700; } .kontakt-duo__coltip a { color: var(--color-accent, #00a3e0); font-weight: 600; text-decoration: underline; } /* Slot-Grid in der Compact-Ansicht: 2 Spalten statt auto-fit */ .kontakt-duo__col .rueckruf-zone__slots { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } @media (max-width: 460px) { .kontakt-duo__col .rueckruf-zone__slots { grid-template-columns: 1fr; } } .kontakt-duo__col .rueckruf-zone__slot-box { padding: 0.6rem 0.7rem; min-height: 52px; font-size: 0.86rem; gap: 0.5rem; } .kontakt-duo__col .rueckruf-zone__slot-icon { width: 28px; height: 28px; border-radius: 7px; } .kontakt-duo__col .rueckruf-zone__slot-label { font-size: 0.88rem; } .kontakt-duo__col .rueckruf-zone__slot-label small { font-size: 0.72rem; } /* --- Dark Mode: Kontakt-Duo --- */ [data-theme="dark"] .kontakt-duo { background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(0, 163, 224, 0.12), transparent 70%), radial-gradient(ellipse 55% 45% at 80% 100%, rgba(251, 191, 36, 0.08), transparent 70%), linear-gradient(160deg, #0a1628 0%, #0e1a30 100%); } [data-theme="dark"] .kontakt-duo__title { color: #f1f5f9; } [data-theme="dark"] .kontakt-duo__subtitle { color: #cbd5e1; } [data-theme="dark"] .kontakt-duo__col { background: linear-gradient(180deg, #142036 0%, #0e1a30 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .kontakt-duo__col--callback { border-color: rgba(251, 191, 36, 0.28); } [data-theme="dark"] .kontakt-duo__colicon { background: linear-gradient(135deg, rgba(0, 163, 224, 0.2), rgba(0, 163, 224, 0.08)); color: #7dd3fc; } [data-theme="dark"] .kontakt-duo__colicon--callback { background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(234, 88, 12, 0.14)); color: #fbbf24; } [data-theme="dark"] .kontakt-duo__coltitle { color: #f1f5f9; } [data-theme="dark"] .kontakt-duo__collead { color: #cbd5e1; } [data-theme="dark"] .kontakt-duo__coltip { background: rgba(125, 211, 252, 0.08); border-left-color: #7dd3fc; color: #cbd5e1; } [data-theme="dark"] .kontakt-duo__col--callback .kontakt-duo__coltip { background: rgba(251, 191, 36, 0.08); border-left-color: #fbbf24; } [data-theme="dark"] .kontakt-duo__coltip strong { color: #f1f5f9; } [data-theme="dark"] .kontakt-duo__coltip a { color: #7dd3fc; } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { .kontakt-cards__card, .kontakt-cards__card:hover, .kontakt-cards__icon, .kontakt-cards__arrow, .rueckruf-zone__slot-box, .kontakt-besuch__hours-link, .kontakt-besuch__hours-link-arrow, .kontakt-besuch__map-link { transition: none; transform: none; } } /* --- Print --- */ @media print { .kontakt-cards__arrow, .kontakt-besuch__map-link { display: none; } .kontakt-cards__card, .rueckruf-zone__card, .kontakt-duo__col { box-shadow: none; border: 1px solid #ccc; } .rueckruf-zone, .kontakt-duo { background: #fff; } } /* ========================================================================== GALLERY-SEITE (gallery.html) Nutzt bestehendes pinned-coverflow.js Script. Eigene Card-Varianten: --post (mit Post-Bild + Meta + Story) und --hint (Akzent-Card mit einem der drei Teilen-Vorteile). ========================================================================== */ /* --- Page-Hero-Variante für Gallery --- */ .page-hero--gallery { background: radial-gradient(ellipse 70% 55% at 20% 0%, rgba(0, 163, 224, 0.10), transparent 70%), radial-gradient(ellipse 60% 50% at 80% 100%, rgba(251, 191, 36, 0.06), transparent 70%), linear-gradient(160deg, var(--color-bg, #f5f6f8) 0%, var(--color-surface, #fff) 100%); } .page-hero--gallery .page-hero__eyebrow { display: inline-block; padding: 0.3rem 0.8rem; margin-bottom: 0.75rem; background: rgba(0, 163, 224, 0.12); color: var(--color-primary, #0055a4); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; } /* --- Gallery Zone Container --- */ .gallery-zone { padding: clamp(2rem, 5vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem); background: var(--color-bg, #f5f6f8); position: relative; } .gallery-zone__badge { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.65rem 1.6rem; margin: 0 auto 1.5rem; width: fit-content; background: radial-gradient(ellipse at 30% 15%, rgba(212, 175, 55, 0.18) 0%, transparent 55%), linear-gradient(135deg, rgba(0, 85, 164, 0.10), rgba(0, 163, 224, 0.08)); color: var(--color-primary-dark, #003366); border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 999px; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 2px 10px rgba(212, 175, 55, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-zone__badge svg { color: #b88f1f; flex-shrink: 0; } [data-theme="dark"] .gallery-zone__badge { background: radial-gradient(ellipse at 30% 15%, rgba(212, 175, 55, 0.18) 0%, transparent 55%), linear-gradient(135deg, rgba(0, 85, 164, 0.22), rgba(0, 163, 224, 0.14)); color: #ffeaa6; border-color: rgba(255, 220, 120, 0.5); box-shadow: 0 2px 12px rgba(212, 175, 55, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-theme="dark"] .gallery-zone__badge svg { color: #ffd966; } .gallery-coverflow { margin: 0 auto; } /* Stage-Höhe für Gallery-Karussell — Cards brauchen mehr Platz als Standard (Bild + Meta + Titel + Story). Auf Desktop + Mobile 3D-Coverflow. */ .gallery-zone .pinned-coverflow__stage { height: clamp(680px, 76vh, 800px); } @media (max-width: 768px) { .gallery-zone .pinned-coverflow__stage { height: clamp(560px, 72vh, 680px); } } .gallery-zone__disclaimer { margin: 2rem auto 0; max-width: 720px; padding: 0.9rem 1.1rem; background: rgba(0, 85, 164, 0.04); border-left: 3px solid rgba(0, 163, 224, 0.5); border-radius: 0 8px 8px 0; font-size: 0.82rem; line-height: 1.55; color: var(--color-text-light, #6b7280); text-align: left; } /* --- Gallery Card: Basis (Post + Hint teilen den Rahmen) --- */ .gallery-card { background: var(--color-surface, #fff); border: 1px solid rgba(0, 85, 164, 0.12); border-radius: var(--radius-xl, 16px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 14px 40px rgba(0, 85, 164, 0.10); overflow: hidden; } /* --- Gallery Card: Post-Variante (Bild + Body) --- */ .gallery-card--post { /* .pinned-coverflow__slide ist bereits flex column — nur Inhalte stylen */ } .gallery-card__image { position: relative; width: 100%; aspect-ratio: 4 / 5; background: linear-gradient(135deg, #e8f0fe 0%, #d4e5ff 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .gallery-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* Placeholder-Look solange die echten Bilder fehlen */ .gallery-card__image--placeholder { background: repeating-linear-gradient( 135deg, rgba(0, 85, 164, 0.04) 0, rgba(0, 85, 164, 0.04) 14px, rgba(0, 85, 164, 0.08) 14px, rgba(0, 85, 164, 0.08) 28px ), linear-gradient(135deg, #e8f0fe 0%, #d4e5ff 100%); } .gallery-card__placeholder-label { padding: 0.4rem 0.85rem; background: rgba(255, 255, 255, 0.85); border: 1px dashed rgba(0, 85, 164, 0.35); border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-primary, #0055a4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .gallery-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; } .gallery-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; font-size: 0.77rem; color: var(--color-text-light, #6b7280); line-height: 1.4; } .gallery-card__meta-item { display: inline-flex; align-items: baseline; gap: 0.3rem; } .gallery-card__meta-item strong { font-weight: 700; color: var(--color-text, #1a1a2e); } .gallery-card__title { font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--color-primary-dark, #003366); margin: 0; } .gallery-card__story { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--color-text, #1a1a2e); } /* --- Gallery Card: Hint-Variante (Akzent-Card ohne Bild) --- */ .gallery-card--hint { background: linear-gradient(140deg, var(--color-primary-dark, #003366) 0%, var(--color-primary, #0055a4) 100%); color: #fff; border-color: transparent; } .gallery-card__hint-body { padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; min-height: clamp(380px, 55vh, 520px); justify-content: center; } .gallery-card__hint-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 0.2rem; } .gallery-card__hint-icon svg { width: 24px; height: 24px; } .gallery-card__hint-kicker { display: inline-block; padding: 0.22rem 0.65rem; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; align-self: flex-start; } .gallery-card__hint-title { font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: #fff; margin: 0; } .gallery-card__hint-text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); } /* Hint-Card Farb-Varianten */ .gallery-card--hint-partner { background: linear-gradient(140deg, #0a3b6b 0%, #0055a4 50%, #00a3e0 100%); } .gallery-card--hint-family { background: linear-gradient(140deg, #b97113 0%, #d97706 50%, #f59e0b 100%); } .gallery-card--hint-share { background: linear-gradient(140deg, #0f5132 0%, #15803d 50%, #22c55e 100%); } /* Neue Hint-Varianten für Reihe 2 & 3 */ .gallery-card--hint-advisor { background: linear-gradient(140deg, #4a2569 0%, #6b2e9e 50%, #9333ea 100%); } .gallery-card--hint-snapshot { background: linear-gradient(140deg, #1e1a3e 0%, #2e2a5f 50%, #d4af37 100%); } .gallery-card--hint-solo { background: linear-gradient(140deg, #1f2937 0%, #374151 50%, #6b7280 100%); } /* Badge-Spacer: Badges der 2. und 3. Reihe haben Abstand nach oben */ .gallery-zone__badge--spacer { margin-top: clamp(2.5rem, 5vw, 4rem); } /* --- Gallery CTA-Zone --- */ .gallery-cta { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem); background: radial-gradient(ellipse 50% 40% at 20% 10%, rgba(0, 163, 224, 0.08), transparent 70%), radial-gradient(ellipse 55% 45% at 80% 90%, rgba(245, 158, 11, 0.06), transparent 70%), linear-gradient(160deg, var(--color-surface, #fff) 0%, var(--color-bg-alt, #eceef2) 100%); } .gallery-cta__card { max-width: 780px; margin: 0 auto; padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--color-surface, #fff); border: 1px solid rgba(0, 85, 164, 0.14); border-radius: var(--radius-xl, 16px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), 0 20px 50px rgba(0, 85, 164, 0.10); text-align: center; } .gallery-cta__title { font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--color-primary-dark, #003366); margin: 0 0 0.6rem; line-height: 1.2; } .gallery-cta__lead { max-width: 560px; margin: 0 auto 1.5rem; font-size: 1rem; line-height: 1.55; color: var(--color-text, #1a1a2e); } .gallery-cta__buttons { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-bottom: 1.1rem; } .gallery-cta__btn { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; min-width: 240px; padding: 0.95rem 1.5rem; line-height: 1.2; } .gallery-cta__btn > span { display: block; font-size: 1rem; font-weight: 700; } .gallery-cta__btn > small { display: block; font-size: 0.78rem; font-weight: 500; opacity: 0.85; } .gallery-cta__btn svg { margin-bottom: 0.15rem; } .gallery-cta__btn--invite { background: linear-gradient(135deg, #25d366 0%, #128c46 100%); color: #fff; border-color: transparent; } .gallery-cta__btn--invite:hover, .gallery-cta__btn--invite:focus-visible { background: linear-gradient(135deg, #1fb957 0%, #0f7a3b 100%); color: #fff; } .gallery-cta__hint { margin: 0; font-size: 0.83rem; color: var(--color-text-light, #6b7280); line-height: 1.5; } /* --- Gallery: Mobile-Anpassungen (<= 768px) --- */ @media (max-width: 768px) { .gallery-card__hint-body { min-height: 360px; padding: 1.3rem 1.15rem 1.4rem; } .gallery-card__image { aspect-ratio: 1 / 1; } .gallery-card__title { font-size: 1.1rem; } .gallery-card__hint-title { font-size: 1.2rem; } .gallery-cta__btn { min-width: 0; width: 100%; } .gallery-cta__buttons { flex-direction: column; } } /* --- Gallery: Dark Mode --- */ [data-theme="dark"] .page-hero--gallery { background: radial-gradient(ellipse 70% 55% at 20% 0%, rgba(0, 163, 224, 0.18), transparent 70%), radial-gradient(ellipse 60% 50% at 80% 100%, rgba(251, 191, 36, 0.10), transparent 70%), linear-gradient(160deg, #0a1628 0%, #0e1a30 100%); } [data-theme="dark"] .page-hero--gallery .page-hero__eyebrow { background: rgba(0, 163, 224, 0.18); color: #7dd3fc; } [data-theme="dark"] .gallery-zone { background: linear-gradient(180deg, #0a1628 0%, #0e1a30 100%); } [data-theme="dark"] .gallery-zone__badge { background: linear-gradient(135deg, rgba(0, 163, 224, 0.18), rgba(0, 85, 164, 0.10)); color: #7dd3fc; border-color: rgba(125, 211, 252, 0.3); } [data-theme="dark"] .gallery-zone__disclaimer { background: rgba(0, 163, 224, 0.06); border-left-color: rgba(125, 211, 252, 0.5); color: #9ca3af; } [data-theme="dark"] .gallery-card { background: #142036; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .gallery-card__image--placeholder { background: repeating-linear-gradient( 135deg, rgba(125, 211, 252, 0.04) 0, rgba(125, 211, 252, 0.04) 14px, rgba(125, 211, 252, 0.08) 14px, rgba(125, 211, 252, 0.08) 28px ), linear-gradient(135deg, #1a2a44 0%, #0f1d33 100%); } [data-theme="dark"] .gallery-card__placeholder-label { background: rgba(20, 32, 54, 0.85); border-color: rgba(125, 211, 252, 0.4); color: #7dd3fc; } [data-theme="dark"] .gallery-card__meta { color: #9ca3af; } [data-theme="dark"] .gallery-card__meta-item strong { color: #e0e0e0; } [data-theme="dark"] .gallery-card__title { color: #e0e0e0; } [data-theme="dark"] .gallery-card__story { color: #d0d0d0; } [data-theme="dark"] .gallery-cta { background: radial-gradient(ellipse 50% 40% at 20% 10%, rgba(0, 163, 224, 0.14), transparent 70%), radial-gradient(ellipse 55% 45% at 80% 90%, rgba(245, 158, 11, 0.08), transparent 70%), linear-gradient(160deg, #0a1628 0%, #0e1a30 100%); } [data-theme="dark"] .gallery-cta__card { background: #142036; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .gallery-cta__title { color: #e0e0e0; } [data-theme="dark"] .gallery-cta__lead { color: #d0d0d0; } [data-theme="dark"] .gallery-cta__hint { color: #9ca3af; } /* --- Gallery: Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { .gallery-card, .gallery-cta__btn { transition: none !important; } } /* --- Gallery: Print --- */ @media print { .gallery-cta, .pinned-coverflow__nav, .pinned-coverflow__dots { display: none !important; } .gallery-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; } } /* ========================================================================= MOBILE APP-BAR (Bottom Navigation) Nur auf Mobile sichtbar. Premium Obsidian-Gold. 4 Buttons: Zurück · VERO Sim · Mein Bereich · Oben. VERO Sim visuell hervorgehoben, Safe-Area-Inset wird respektiert. ========================================================================= */ .app-bar { display: none; /* Desktop: aus */ } @media (max-width: 768px) { .app-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 990; align-items: stretch; /* Extrem transparent (~85 % see-through). Blur + Sättigung sorgen für iOS-Liquid-Glass-Look, damit trotz wenig Opacity noch Struktur erkennbar. */ background: radial-gradient(ellipse at 20% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, rgba(0, 163, 224, 0.05) 0%, transparent 55%), linear-gradient(180deg, rgba(11, 13, 21, 0.10) 0%, rgba(6, 8, 16, 0.18) 100%); -webkit-backdrop-filter: blur(9px) saturate(200%); backdrop-filter: blur(9px) saturate(200%); border-top: 1px solid rgba(240, 200, 80, 0.32); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.02); padding: 0.25rem 0.2rem calc(0.25rem + env(safe-area-inset-bottom, 0px)); } /* Text-Shadow auf Labels für Lesbarkeit bei 85%-See-Through */ .app-bar .app-bar__label { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); } /* Fallback für Browser ohne backdrop-filter: deutlich opaker */ @supports not (backdrop-filter: blur(1px)) { .app-bar { background: radial-gradient(ellipse at 20% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 60%), linear-gradient(180deg, rgba(11, 13, 21, 0.90) 0%, rgba(6, 8, 16, 0.97) 100%); } } /* Gold-Akzent-Linie on top */ .app-bar::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(240, 200, 80, 0.55) 50%, transparent 100%); pointer-events: none; } .app-bar__btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem; padding: 0.2rem 0.15rem; background: transparent; border: none; color: rgba(255, 255, 255, 0.74); text-decoration: none; font-family: var(--font-body); cursor: pointer; min-height: 42px; transition: color 0.22s ease, transform 0.18s ease; -webkit-tap-highlight-color: transparent; position: relative; } .app-bar__btn svg { width: 20px; height: 20px; flex-shrink: 0; } .app-bar__label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; } .app-bar__btn:hover, .app-bar__btn:focus-visible { color: #ffeaa6; outline: none; } .app-bar__btn:active { transform: scale(0.94); } /* Aktive Seite — dezenter Gold-Indicator */ .app-bar__btn.is-active { color: #ffd966; } .app-bar__btn.is-active::after { content: ''; position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.1rem); left: 50%; transform: translateX(-50%); width: 16px; height: 2px; border-radius: 1.5px; background: linear-gradient(90deg, #d4af37, #ffd966); box-shadow: 0 0 6px rgba(240, 200, 80, 0.5); } /* Mein Bereich: Der gesamte Button ist eine Obsidian-Pill mit Gold-Ring. Bleibt opak trotz Glas-App-Bar drumherum, damit er als festes Premium- Element hervortritt. Schrift einheitlich in hellem Gold. */ .app-bar__btn--bereich { margin: 0.25rem 0.15rem calc(0.25rem + env(safe-area-inset-bottom, 0px)); padding: 0.32rem 0.45rem 0.28rem; border-radius: 14px; background: radial-gradient(ellipse at 30% 15%, rgba(70, 55, 110, 0.55) 0%, transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(140, 90, 20, 0.38) 0%, transparent 65%), linear-gradient(135deg, #0b0d15 0%, #141826 50%, #060810 100%); border: 1px solid rgba(240, 200, 80, 0.50); box-shadow: 0 0 10px rgba(240, 200, 80, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); gap: 0.1rem; color: #ffeaa6; min-height: 0; /* override, die Pill bestimmt ihre eigene Höhe */ transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.22s ease; } .app-bar__btn--bereich .app-bar__bubble { display: flex; align-items: center; justify-content: center; width: auto; height: auto; background: transparent; border: none; box-shadow: none; } .app-bar__btn--bereich .app-bar__bubble svg { width: 16px; height: 16px; color: #ffeaa6; filter: drop-shadow(0 0 4px rgba(240, 200, 80, 0.35)); } /* Einheitliche Schrift — "Mein" und "Bereich" identisch */ .app-bar__btn--bereich .app-bar__label { color: #ffeaa6; font-weight: 700; text-shadow: none; /* Pill-Bg sorgt eh für Kontrast */ } .app-bar__btn--bereich .app-bar__label-mein { font-size: 1em; color: inherit; font-weight: inherit; letter-spacing: inherit; margin-right: 0.2em; } .app-bar__btn--bereich:hover, .app-bar__btn--bereich:focus-visible { border-color: rgba(255, 220, 120, 0.85); box-shadow: 0 0 16px rgba(240, 200, 80, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); transform: translateY(-1px); color: #fff3b0; } .app-bar__btn--bereich:hover .app-bar__bubble svg, .app-bar__btn--bereich:focus-visible .app-bar__bubble svg { color: #fff3b0; } /* VERO Sim: "VERO" in Accent-Cyan, "Sim" in Weiß — Brand-Farbwelt */ .app-bar__btn--sim { color: #ffffff; } .app-bar__btn--sim .app-bar__label { font-weight: 700; } .app-bar__label-vero { color: var(--color-accent, #00a3e0); text-shadow: 0 0 6px rgba(0, 163, 224, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6); } .app-bar__label-simword { color: #ffffff; } .app-bar__sim-icon-wrap { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(0, 163, 224, 0.25) 0%, transparent 70%); transition: transform 0.22s ease; } .app-bar__sim-icon { width: 22px; height: 22px; filter: drop-shadow(0 0 5px rgba(0, 163, 224, 0.55)); } .app-bar__btn--sim:hover .app-bar__sim-icon-wrap, .app-bar__btn--sim:focus-visible .app-bar__sim-icon-wrap { transform: scale(1.08); } /* Content-Padding: verhindert, dass Inhalt von der App-Bar verdeckt wird. Neue kompakte Höhe: ~50px + safe-area. */ body { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); } /* Floating-Sidebar rechts: 15px höher als vorher, damit der Drei-Punkte- Toggle nicht direkt an der App-Bar klebt. */ .floating-sidebar { bottom: calc(81px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; } /* Back-to-Top-Fab auf Mobile ausblenden — Funktion ist jetzt in App-Bar */ .back-to-top { display: none !important; } /* Sticky-Share-Bar auf Blog: muss über der kompakteren App-Bar liegen */ .blog-share--sticky { bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important; z-index: 985; } } /* Reduced-Motion: keine Transitionen auf App-Bar-Buttons */ @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .app-bar__btn, .app-bar__sim-icon-wrap { transition: none !important; transform: none !important; } .app-bar__btn:active { transform: none !important; } } /* ========================================================================= BLOG READING-PROGRESS-BAR (Desktop + Mobile) Dünne Bar oben am Viewport-Rand (direkt unter dem Header), zeigt live den Scroll-Fortschritt durch den Blog-Artikel. ========================================================================= */ .blog-progress { position: fixed; top: var(--header-height, 0); left: 0; right: 0; height: 3px; z-index: 995; background: rgba(0, 85, 164, 0.08); pointer-events: none; } .blog-progress__fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%); box-shadow: 0 0 8px rgba(0, 163, 224, 0.45); transition: width 0.15s linear, background 0.4s ease; will-change: width; } .blog-progress.is-complete .blog-progress__fill { background: linear-gradient(90deg, var(--color-primary) 0%, #d4af37 100%); box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); } /* Header schrumpft beim Scrollen — Progress-Bar bleibt direkt darunter */ .header.scrolled ~ * .blog-progress, body:has(.header.scrolled) .blog-progress { top: var(--header-height-scrolled, 0); } [data-theme="dark"] .blog-progress { background: rgba(255, 255, 255, 0.06); } @media (prefers-reduced-motion: reduce) { .blog-progress__fill { transition: none; } } /* ========================================================================= BLOG "WEITER LESEN" — Progressive Disclosure (Mobile only) Lange Artikel werden nach ca. 720 px abgeschnitten mit Fade + Button. Der Button hat eine dezente Gold-Glow-Animation als visueller Anker, damit User ihn nicht übersehen und weiter lesen. ========================================================================= */ .blog-article__content--truncated { position: relative; max-height: var(--blog-truncate-height, 720px); overflow: hidden; } .blog-article__content--truncated::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, rgba(245, 246, 248, 0) 0%, rgba(245, 246, 248, 0.65) 45%, var(--color-bg, #f5f6f8) 100%); pointer-events: none; } [data-theme="dark"] .blog-article__content--truncated::after { background: linear-gradient(180deg, rgba(13, 26, 46, 0) 0%, rgba(13, 26, 46, 0.65) 45%, #0d1a2e 100%); } .blog-readmore { display: flex; justify-content: center; margin: -3rem 0 2rem; /* negativer Margin, damit er in den Fade-Bereich rutscht */ position: relative; z-index: 2; } .blog-readmore__btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.75rem; border: 1.5px solid rgba(212, 175, 55, 0.55); border-radius: 999px; background: radial-gradient(ellipse at 30% 15%, rgba(212, 175, 55, 0.18) 0%, transparent 55%), linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #ffeaa6; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 85, 164, 0.25), 0 0 0 4px rgba(212, 175, 55, 0.0), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 0.22s ease, box-shadow 0.4s ease, color 0.22s ease; animation: blog-readmore-glow 2.4s ease-in-out infinite; -webkit-tap-highlight-color: transparent; } .blog-readmore__btn:hover, .blog-readmore__btn:focus-visible { color: #ffffff; outline: none; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 85, 164, 0.35), 0 0 0 4px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); animation-play-state: paused; } .blog-readmore__btn:active { transform: translateY(0) scale(0.97); } .blog-readmore__btn-icon { width: 18px; height: 18px; transition: transform 0.22s ease; } .blog-readmore__btn:hover .blog-readmore__btn-icon { transform: translateY(2px); } /* Dezente Glow-Animation — sanftes Pulsieren des Gold-Rings */ @keyframes blog-readmore-glow { 0%, 100% { box-shadow: 0 4px 14px rgba(0, 85, 164, 0.25), 0 0 0 4px rgba(212, 175, 55, 0.0), 0 0 0 rgba(212, 175, 55, 0.0), inset 0 1px 0 rgba(255, 255, 255, 0.1); } 50% { box-shadow: 0 4px 14px rgba(0, 85, 164, 0.25), 0 0 0 4px rgba(212, 175, 55, 0.25), 0 0 20px 2px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } } @media (prefers-reduced-motion: reduce) { .blog-readmore__btn { animation: none; } } /* Weiter-lesen-Button nur auf Mobile sichtbar (Desktop zeigt alles) */ @media (min-width: 769px) { .blog-readmore { display: none !important; } .blog-article__content--truncated { max-height: none; overflow: visible; } .blog-article__content--truncated::after { display: none; } } /* ========================================================================= MOBILE APP-FEEL-POLISH - Scroll-Hide-Header - Page-Transitions (View-Transitions-API + JS-Fallback) - Tab-Indicator-Glide in App-Bar - Dynamic Accent-Color App-Bar - Bottom-Sheet-Modals ========================================================================= */ /* --- 1) Scroll-Hide-Header (Mobile) --- */ @media (max-width: 768px) { .header { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease; will-change: transform; } .header.header--hidden { transform: translateY(-100%); } /* Reading-Progress-Bar: wenn der Header ausfährt, rutscht die Progress-Bar an den Viewport-Rand (top:0) — sie "hängt" nicht mehr im leeren Raum. */ body:has(.header.header--hidden) .blog-progress { top: 0; transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .blog-progress { transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1); } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .header { transition: none; } .header.header--hidden { transform: none; /* kein Hide auf Reduced-Motion */ } } /* --- 2) Page-Transitions --- */ /* Cross-Document View-Transitions (Chromium 126+, iOS 18+) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } /* JS-Fallback-Fader: overlay-div, das beim Klick auf internen Link kurz halb-opak wird, dann Navigation erfolgt */ .page-transition-fader { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(ellipse at center, rgba(11, 22, 40, 0.55) 0%, rgba(6, 8, 16, 0.85) 100%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.14s ease-out; } .page-transition-fader.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .page-transition-fader { display: none !important; } } /* --- 4) Tab-Indicator-Glide in App-Bar --- */ @media (max-width: 768px) { .app-bar__glide { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.1rem); left: 0; width: 20px; height: 3px; border-radius: 2px; background: var(--app-bar-accent, linear-gradient(90deg, #d4af37, #ffd966)); box-shadow: 0 0 8px rgba(240, 200, 80, 0.55); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, background 0.5s ease, box-shadow 0.5s ease; pointer-events: none; opacity: 0; will-change: transform; /* Start: links, wird per JS auf aktiven Tab gesetzt */ } /* Sobald Glide-Indicator da ist, statischen is-active-Unterstrich ausblenden */ .app-bar:has(.app-bar__glide) .app-bar__btn.is-active::after { display: none; } /* Dynamic Accent-Color: App-Bar-Top-Border wechselt mit Seite */ .app-bar--themed { border-top-color: color-mix(in srgb, var(--app-bar-accent, #d4af37) 45%, rgba(240, 200, 80, 0.30)); } .app-bar--themed::before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--app-bar-accent, #d4af37) 55%, rgba(240, 200, 80, 0.4)) 50%, transparent 100%); } /* Fallback für Browser ohne color-mix() */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .app-bar--themed { border-top-color: rgba(240, 200, 80, 0.40); } } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .app-bar__glide { transition: opacity 0.2s ease; } } /* --- 5) Bottom-Sheet-Modals (Mobile) --- Alle Modals slippen von unten hoch statt mittig zu erscheinen. Drag-Handle-Pille oben signalisiert "swipe-away". */ @media (max-width: 768px) { .vero-modal-overlay.active .vero-modal, .allianz-modal-overlay.active .allianz-modal, .wa-modal-overlay.active .wa-modal, #leaveModal .leave-modal, .modal.active .modal__content, .modal.is-open .modal__content { position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: translateY(0); max-height: 92vh; max-width: 100%; width: 100%; margin: 0; border-radius: 18px 18px 0 0; padding-top: calc(1.5rem + 16px); /* Platz für Drag-Handle */ padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; animation: bottom-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.35); } .vero-modal-overlay.active .vero-modal::before, .allianz-modal-overlay.active .allianz-modal::before, .wa-modal-overlay.active .wa-modal::before, #leaveModal .leave-modal::before, .modal.active .modal__content::before, .modal.is-open .modal__content::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 3px; background: rgba(120, 130, 150, 0.35); pointer-events: none; } /* Das Overlay bleibt vorhanden, aber als semi-transparent dunkler BG */ .vero-modal-overlay.active, .allianz-modal-overlay.active, .wa-modal-overlay.active { align-items: flex-end !important; justify-content: stretch !important; } } @keyframes bottom-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .vero-modal-overlay.active .vero-modal, .allianz-modal-overlay.active .allianz-modal, .wa-modal-overlay.active .wa-modal, #leaveModal .leave-modal { animation: none !important; } } /* ========================================================================= MOBILE HERO-KOMPAKT Für Landing-Hero-Sections (index, vero-sim-erklaert, etc.): - kompaktere Höhe, damit Primary-CTA über der Mobile-Fold ist - Title/Subtitle pixelgenau skaliert - Actions full-width für Touch ========================================================================= */ @media (max-width: 768px) { .hero { min-height: auto; padding-top: calc(var(--header-height, 56px) + 1.25rem); padding-bottom: 2rem; } .hero__content { max-width: 100%; } .hero__badge { font-size: 0.75rem; padding: 0.35rem 0.85rem; margin-bottom: 1rem; } .hero__title { font-size: 2.1rem; line-height: 1.12; margin-bottom: 0.85rem; } .hero__title br { display: none; /* Original-Zeilenumbrüche auf Mobile ignorieren, Browser macht das passend */ } .hero__subtitle { font-size: 1rem; line-height: 1.5; margin-bottom: 1.5rem; } .hero__actions { flex-direction: column; gap: 0.7rem; width: 100%; } .hero__actions .btn { width: 100%; justify-content: center; } .hero__shield { display: none; /* Dekoration weg auf Mobile — Platz für CTA */ } /* vero-sim-erklaert Hero */ .vse-hero { min-height: auto !important; padding-top: calc(var(--header-height, 56px) + 1rem) !important; padding-bottom: 1.75rem !important; } .vse-hero__title { font-size: 2rem !important; line-height: 1.15 !important; } .vse-hero__badge { font-size: 0.72rem !important; } /* Mein-Bereich Landing Hero (mb-hero) */ .mb-hero-head { padding-top: calc(var(--header-height, 56px) + 1rem); padding-bottom: 1.5rem; } .mb-hero-title { font-size: 1.75rem; line-height: 1.18; } .mb-hero-subtitle--lead { font-size: 0.95rem; line-height: 1.55; } .mb-hero-subtitle--sub { font-size: 0.85rem; } .mb-hero-trust-item strong { font-size: 0.95rem; } /* Page-Hero (zielgruppen, warum-kostenlos, erfahrungsberichte, gallery, kontakt) */ .page-hero { padding-top: calc(var(--header-height, 56px) + 1.25rem); padding-bottom: 1.75rem; } .page-hero h1 { font-size: 1.85rem; line-height: 1.18; } .page-hero p { font-size: 0.95rem; line-height: 1.55; } } /* ========================================================================= INDEX HOMEPAGE — MOBILE SIDE-BY-SIDE LAYOUT (final overrides) Dieser Block gewinnt die Cascade über alle vorherigen Mobile-Rules, weil er ganz am Ende der style.css steht. Enthält: - Hero: Text+Buttons links, VERO-Orbit als semi-transparenter Layer rechts - VERO-Teaser: 3-Step-Reihe als Grid (Nummer oben, Label darunter) - Teaser-Actions nebeneinander ========================================================================= */ @media (max-width: 768px) { /* ----- HERO: Orbit als positionierter Layer rechts ----- */ .hero { position: relative; overflow: hidden; } .hero__grid { display: block; position: relative; } .hero__visual { position: absolute; top: 50%; right: -16%; width: 72%; max-width: 360px; margin: 0; padding: 0; transform: translateY(-50%); opacity: 0.38; z-index: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: auto; } .hero__visual:hover, .hero__visual:focus-within, .hero__visual:active, .hero__visual .vero-orbit:focus-visible { opacity: 1; z-index: 3; } .vero-orbit { max-width: none; width: 100%; } .hero__content { position: relative; z-index: 2; max-width: 100%; width: 100%; text-align: center; margin: 0 auto; } .hero__title { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.12; margin-bottom: 0.75rem; text-align: center; text-shadow: 0 0 18px rgba(0, 0, 0, 0.35); } .hero__title br { display: none; } .hero__subtitle { font-size: 0.92rem; line-height: 1.55; margin: 0 auto 1.35rem; max-width: 34ch; text-align: center; text-shadow: 0 0 12px rgba(0, 0, 0, 0.4); } .hero__actions { flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; max-width: 320px; margin: 0 auto; } .hero__actions .btn { flex: 0 0 auto; width: 100%; padding: 0.68rem 1rem; font-size: 0.82rem; justify-content: center; text-align: center; } .hero__social-proof { position: relative; z-index: 2; margin-top: 1.5rem; gap: 0.6rem 1rem; flex-wrap: wrap; justify-content: center; } .hero__social-proof-item { font-size: 0.75rem; } .hero__social-proof-divider { display: none; } /* ----- VERO-Teaser: 3-Step-Reihe als Grid (Icons oben, Text unten) ----- */ .vero-teaser__steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 4px; flex-wrap: unset; margin-bottom: 1.4rem; } .vero-teaser__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 0.7rem; line-height: 1.15; white-space: normal; } .vero-teaser__step-num { width: 24px; height: 24px; font-size: 0.68rem; } .vero-teaser__step-arrow { align-self: flex-start; padding-top: 5px; font-size: 0.8rem; opacity: 0.55; } /* Teaser-Aktionen auf Mobile nebeneinander */ .vero-teaser__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.8rem; } .vero-teaser__actions .btn { padding: 0.6rem 0.85rem; font-size: 0.78rem; flex: 0 0 auto; } .vero-teaser__link { font-size: 0.78rem; } } /* Enger Viewport — Hero-Content-Max-Breite nochmal leicht reduzieren, damit der Orbit mehr atmet und weniger vom Titel überdeckt wird. */ @media (max-width: 420px) { .hero__content { max-width: 66%; } .hero__visual { right: -22%; width: 78%; } .hero__actions { max-width: 220px; } .hero__title { font-size: clamp(1.45rem, 6vw, 1.8rem); } } /* ========================================================================= REUSABLE COMING-SOON BADGE Abgeleitet aus .mb-cs-badge auf mein-bereich.html — hier als globale Utility, damit andere Seiten (Home-Erklärvideo usw.) dieselbe Visual-Sprache erben. ========================================================================= */ .sv-cs-badge { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem 0.35rem 0.55rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: #fff; font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 163, 224, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; animation: sv-cs-pulse 2.6s ease-in-out infinite; white-space: nowrap; pointer-events: none; } .sv-cs-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.9); animation: sv-cs-dot 1.6s ease-in-out infinite; flex-shrink: 0; } /* Shimmer-Container — setzt position:relative + overflow:hidden für das ::before */ .sv-cs-shimmer { position: relative; overflow: hidden; isolation: isolate; } .sv-cs-shimmer::after { content: ''; position: absolute; top: 0; left: -60%; width: 60%; height: 100%; background: linear-gradient( 110deg, transparent 0%, rgba(0, 163, 224, 0.12) 45%, rgba(0, 163, 224, 0.18) 50%, rgba(0, 163, 224, 0.12) 55%, transparent 100% ); transform: skewX(-18deg); animation: sv-cs-shimmer-sweep 4.5s ease-in-out infinite; pointer-events: none; z-index: 2; } @keyframes sv-cs-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(0, 163, 224, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; transform: translateY(0); } 50% { box-shadow: 0 6px 22px rgba(0, 163, 224, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; transform: translateY(-1px); } } @keyframes sv-cs-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.35); } } @keyframes sv-cs-shimmer-sweep { 0% { left: -60%; } 55% { left: 160%; } 100% { left: 160%; } } @media (prefers-reduced-motion: reduce) { .sv-cs-badge, .sv-cs-badge::before, .sv-cs-shimmer::after { animation: none; } .sv-cs-shimmer::after { display: none; } } /* ============================================================ Kontaktseite — Dreiklang-Hero-Zusatzregeln, Direktkontakt-Band, Page-Header-Badges, Outro-Section. Der Backdrop ist weiter oben definiert; hier sitzen die neuen Komponenten des Seitenumbaus. ============================================================ */ /* "Persönlich besprechen"-Card enthält 3 Sub-Links statt eines einzigen Flächen-Klicks. Die Card ist deshalb kein , sondern ein
mit eigenen -Elementen drin. */ .kontakt-cards__card--personal { cursor: default; } .kontakt-cards__card--personal:hover, .kontakt-cards__card--personal:focus-within { transform: none; } .kontakt-cards__sublinks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: auto; padding-top: 1rem; } .kontakt-cards__sublink { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(0, 85, 164, 0.06); border: 1px solid rgba(0, 85, 164, 0.14); color: var(--color-text, #1a1a2e); text-decoration: none; font-weight: 500; font-size: 0.9rem; line-height: 1.25; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } /* Sehr schmale Screens: lieber stacken als squetschen */ @media (max-width: 380px) { .kontakt-cards__sublinks { grid-template-columns: 1fr; } } .kontakt-cards__sublink:hover, .kontakt-cards__sublink:focus-visible { background: rgba(0, 85, 164, 0.12); border-color: rgba(0, 85, 164, 0.35); transform: translateX(2px); outline: none; } .kontakt-cards__sublink-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--color-primary, #0055a4), var(--color-accent, #00a3e0)); color: #fff; flex-shrink: 0; } .kontakt-cards__sublink-label { flex: 1; line-height: 1.3; } .kontakt-cards__sublink-marker { font-size: 0.9rem; color: var(--color-text-light, #6b7280); font-weight: 700; } /* Icon-Varianten für die Dreiklang-Karten */ .kontakt-cards__icon--self { background: linear-gradient(135deg, #0055a4, #00a3e0); } .kontakt-cards__icon--personal { background: linear-gradient(135deg, #7c3aed, #a855f7); } /* ---------- Page-Header Badges ---------- */ .page-header__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; } .page-header__badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; font-size: 0.82rem; font-weight: 500; color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; } /* Default-Dot: grün (Status-Indikator für Antwortzeit) */ .page-header__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); flex-shrink: 0; } /* Brand-Farb-Dots für die drei Eigenschafts-Pills */ .page-header__badge-dot--primary { background: #0055a4; box-shadow: 0 0 0 3px rgba(0, 85, 164, 0.28); } .page-header__badge-dot--secondary { background: #00a3e0; box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25); } .page-header__badge-dot--tertiary { background: #e8f0fe; box-shadow: 0 0 0 3px rgba(232, 240, 254, 0.25); } /* ---------- Outro-Section (statt Conversion-Zone) ---------- */ .kontakt-outro { padding: clamp(2rem, 5vw, 3.5rem) 0; background: var(--color-bg-alt, #f8f9fa); } .kontakt-outro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; } @media (max-width: 860px) { .kontakt-outro__grid { grid-template-columns: 1fr; } } .kontakt-outro__newsletter, .kontakt-outro__cta { display: flex; gap: 1.25rem; padding: 1.75rem; background: #fff; border: 1px solid rgba(0, 85, 164, 0.14); border-radius: var(--radius-xl, 16px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 85, 164, 0.06); } .kontakt-outro__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--color-primary, #0055a4), var(--color-accent, #00a3e0)); color: #fff; flex-shrink: 0; } .kontakt-outro__icon--cta { background: linear-gradient(135deg, var(--color-dark, #003366), var(--color-primary, #0055a4)); } .kontakt-outro__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .kontakt-outro__title { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--color-text, #1a1a2e); margin: 0; line-height: 1.3; } .kontakt-outro__lead { font-size: 0.95rem; color: var(--color-text-light, #6b7280); margin: 0 0 0.5rem; line-height: 1.5; } .kontakt-outro__form { display: flex; gap: 0.5rem; flex-wrap: wrap; } .kontakt-outro__form .form-input { flex: 1 1 200px; min-width: 0; } /* Mobile-Overrides für die Outro-Section: - Cards werden vertikal (Icon oben, Body darunter) - Form bleibt horizontal (Input + Button nebeneinander, kompakter) - Cards bekommen explizit klare Card-Darstellung, damit sie sich vom Section-Background abheben */ @media (max-width: 720px) { .kontakt-outro__newsletter, .kontakt-outro__cta { flex-direction: column; align-items: flex-start; gap: 0.85rem; padding: 1.35rem 1.25rem; background: #fff; border: 1px solid rgba(0, 85, 164, 0.14); border-radius: var(--radius-xl, 16px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 85, 164, 0.08); } [data-theme="dark"] .kontakt-outro__newsletter, [data-theme="dark"] .kontakt-outro__cta { background: linear-gradient(180deg, #162640 0%, #0e1a30 100%); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4); } .kontakt-outro__icon { width: 48px; height: 48px; border-radius: 12px; } .kontakt-outro__form { flex-direction: row; flex-wrap: nowrap; gap: 0.4rem; max-width: 100%; width: 100%; } .kontakt-outro__form .form-input { padding: 0.55rem 0.75rem; font-size: 0.95rem; flex: 1 1 auto; min-width: 0; } .kontakt-outro__form .btn { width: auto; padding: 0.55rem 0.9rem; font-size: 0.9rem; white-space: nowrap; flex-shrink: 0; } } [data-theme="dark"] .kontakt-outro { background: var(--color-bg-dark, #0a1628); } [data-theme="dark"] .kontakt-outro__newsletter, [data-theme="dark"] .kontakt-outro__cta { background: linear-gradient(180deg, #142036 0%, #0e1a30 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .kontakt-outro__title { color: #f1f5f9; } [data-theme="dark"] .kontakt-outro__lead { color: #cbd5e1; }