/* Theme Name: V2 Theme URI: Author: Author URI: Description: Minimal WordPress theme scaffold (no third-party scripts; adblock-safe naming). Version: 0.4.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: v2 */ /* Adblock-safety notes: - No third-party scripts, pixels, CDNs. - Neutral names; avoid: ads, ad, analytics, tracker, marketing, pixel, beacon. */ /* ========================================================= DESIGN TOKENS ========================================================= */ :root{ /* Brand */ --v2-accent: #5d020b; --v2-accent-2: #7a0a16; /* Light (default) */ --v2-bg: #f7f6f5; --v2-surface: #ffffff; --v2-surface-2: #f1efee; --v2-text: #141414; --v2-muted: #4a4a4a; --v2-border: rgba(20,20,20,0.12); --v2-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Radius / Spacing */ --v2-r-sm: 12px; --v2-r: 18px; --v2-r-lg: 26px; --v2-container: 1120px; --v2-gutter: 20px; /* Type */ --v2-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; --v2-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Motion */ --v2-ease: cubic-bezier(0.2, 0.9, 0.2, 1); --v2-fast: 140ms; --v2-mid: 220ms; /* Focus */ --v2-focus: 0 0 0 3px rgba(93,2,11,0.35); /* Header logo */ --v2-logo-size: 140px; --v2-logo-pad: 0px; /* ========================================================= GLOBAL BACKDROP (wie hinter dem Video) -> Ein einziges Token, wird f�r body UND Hero benutzt ========================================================= */ --v2-backdrop: radial-gradient(1200px 520px at 50% 0%, rgba(93,2,11,0.14) 0%, rgba(93,2,11,0.06) 35%, rgba(255,255,255,0.00) 70%), radial-gradient(900px 520px at 20% 70%, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.00) 62%), linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(247,246,245,1) 58%, rgba(247,246,245,1) 100%); } /* Dark mode via OS preference */ @media (prefers-color-scheme: dark){ :root{ --v2-bg: #0f0f11; --v2-surface: #151518; --v2-surface-2: #1c1c20; --v2-text: #f2f2f2; --v2-muted: #c2c2c2; --v2-border: rgba(242,242,242,0.12); --v2-shadow: 0 14px 40px rgba(0,0,0,0.40); --v2-backdrop: radial-gradient(1200px 520px at 50% 0%, rgba(93,2,11,0.22) 0%, rgba(93,2,11,0.10) 35%, rgba(0,0,0,0.0) 70%), radial-gradient(900px 520px at 20% 70%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 62%), linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.20) 100%); } } /* Manual theme switch (optional): set */ :root[data-theme="light"]{ --v2-bg: #f7f6f5; --v2-surface: #ffffff; --v2-surface-2: #f1efee; --v2-text: #141414; --v2-muted: #4a4a4a; --v2-border: rgba(20,20,20,0.12); --v2-shadow: 0 10px 30px rgba(0,0,0,0.08); --v2-backdrop: radial-gradient(1200px 520px at 50% 0%, rgba(93,2,11,0.14) 0%, rgba(93,2,11,0.06) 35%, rgba(255,255,255,0.00) 70%), radial-gradient(900px 520px at 20% 70%, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.00) 62%), linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(247,246,245,1) 58%, rgba(247,246,245,1) 100%); } :root[data-theme="dark"]{ --v2-bg: #0f0f11; --v2-surface: #151518; --v2-surface-2: #1c1c20; --v2-text: #f2f2f2; --v2-muted: #c2c2c2; --v2-border: rgba(242,242,242,0.12); --v2-shadow: 0 14px 40px rgba(0,0,0,0.40); --v2-backdrop: radial-gradient(1200px 520px at 50% 0%, rgba(93,2,11,0.22) 0%, rgba(93,2,11,0.10) 35%, rgba(0,0,0,0.0) 70%), radial-gradient(900px 520px at 20% 70%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 62%), linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.20) 100%); } /* ========================================================= BASE ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } html{ color-scheme: light dark; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; min-height: 100%; } body{ margin: 0; min-height: 100%; font-family: var(--v2-font); background: var(--v2-bg); color: var(--v2-text); line-height: 1.6; /* ensures backdrop layer is always behind everything */ position: relative; isolation: isolate; } /* GLOBAL BACKDROP LAYER (sitewide) */ body::before{ content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--v2-backdrop); transform: translateZ(0); } img, svg, video{ max-width: 100%; height: auto; display: block; } a{ color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: none; box-shadow: var(--v2-focus); border-radius: 10px; } ::selection{ background: rgba(93,2,11,0.25); } /* ========================================================= LAYOUT HELPERS ========================================================= */ .v2-container{ max-width: var(--v2-container); margin: 0 auto; padding: 0 var(--v2-gutter); } .v2-stack{ display: grid; gap: 18px; } .v2-grid{ display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .v2-col-12{ grid-column: span 12; } @media (min-width: 860px){ .v2-col-7{ grid-column: span 7; } .v2-col-5{ grid-column: span 5; } .v2-col-4{ grid-column: span 4; } } /* ========================================================= HEADER / NAV ========================================================= */ .v2-header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* less opaque so the global backdrop shows through */ background: color-mix(in srgb, var(--v2-bg) 62%, transparent); border-bottom: 1px solid var(--v2-border); transition: top 350ms cubic-bezier(0.4, 0, 0.2, 1); will-change: top; } .v2-header--hidden{ top: -100px; } .v2-header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } .v2-brand{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.2px; } .v2-logo-bg{ background: transparent; /* keep clean; backdrop provides base */ display: inline-flex; align-items: center; justify-content: center; padding: var(--v2-logo-pad); border-radius: 12px; } .v2-brand img{ height: var(--v2-logo-size); width: auto; max-width: none; border-radius: 12px; } .v2-nav{ display: flex; flex-wrap: wrap; gap: 10px; } .v2-nav a{ position: relative; padding: 8px 10px; border-radius: 12px; color: var(--v2-muted); transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease); } .v2-nav a::after{ content:""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 999px; background: var(--v2-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--v2-mid) var(--v2-ease); opacity: 0.85; } .v2-nav a:hover{ color: var(--v2-text); background: color-mix(in srgb, var(--v2-surface) 60%, transparent); } .v2-nav a:hover::after{ transform: scaleX(1); } /* Active nav link */ .v2-nav a[aria-current="page"]{ color: var(--v2-accent); font-weight: 700; } .v2-nav a[aria-current="page"]::after{ transform: scaleX(1); } /* ========================================================= PAGE / SECTIONS ========================================================= */ .v2-page{ padding: 0; } :root{ --v2-section-gap: 24px; } @media (min-width: 860px){ :root{ --v2-section-gap: 34px; } } .v2-section{ padding: var(--v2-section-gap) 0; } /* ========================================================= BUTTONS ========================================================= */ .v2-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; min-height: 44px; border-radius: 14px; border: 1px solid var(--v2-border); background: color-mix(in srgb, var(--v2-surface) 82%, transparent); color: var(--v2-text); cursor: pointer; transition: transform var(--v2-fast) var(--v2-ease), background var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease); } .v2-btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--v2-accent) 45%, var(--v2-border)); } .v2-btn-primary{ border-color: color-mix(in srgb, var(--v2-accent) 55%, var(--v2-border)); background: radial-gradient(120% 120% at 30% 20%, var(--v2-accent-2), var(--v2-accent)); color: #fff; } .v2-btn-primary:hover{ border-color: color-mix(in srgb, var(--v2-accent) 75%, var(--v2-border)); } /* Disabled-looking buttons */ .v2-btn[aria-disabled="true"]{ opacity: 0.6; cursor: not-allowed; pointer-events: none; transform: none; } /* Hero CTA button (bigger + premium) */ .v2-btn-hero{ margin-top: 10px; padding: 22px 34px; font-size: 1.12rem; letter-spacing: 0.01em; border-radius: 999px; will-change: transform; backface-visibility: hidden; transform: translate3d(0,0,0); box-shadow: 0 18px 40px rgba(93,2,11,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset; transition: transform 260ms var(--v2-ease), box-shadow 260ms var(--v2-ease); } @media (min-width: 900px){ .v2-btn-hero{ padding: 28px 56px; font-size: 1.35rem; } } .v2-btn-hero:hover{ transform: translate3d(0,-4px,0) scale(1.035); box-shadow: 0 28px 70px rgba(93,2,11,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset; } .v2-btn-hero:active{ transform: translate3d(0,-1px,0) scale(0.99); box-shadow: 0 18px 40px rgba(93,2,11,0.38), 0 0 0 1px rgba(255,255,255,0.07) inset; } .v2-btn-hero:focus-visible{ outline: none; box-shadow: 0 28px 70px rgba(93,2,11,0.42), 0 0 0 2px rgba(255,255,255,0.22), 0 0 0 6px rgba(93,2,11,0.30); } @media (max-width: 600px){ .v2-btn-hero{ width: 100%; max-width: 420px; padding: 22px 22px; } } @media (prefers-reduced-motion: reduce){ .v2-btn-hero{ transition: none !important; } } /* ========================================================= CARDS ========================================================= */ .v2-card{ border: 1px solid var(--v2-border); border-radius: var(--v2-r); background: color-mix(in srgb, var(--v2-surface) 92%, transparent); box-shadow: 0 8px 26px rgba(0,0,0,0.06); padding: 18px; transition: transform var(--v2-mid) var(--v2-ease), border-color var(--v2-mid) var(--v2-ease), background var(--v2-mid) var(--v2-ease); } .v2-card:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--v2-accent) 35%, var(--v2-border)); } .v2-card h2{ margin: 0 0 6px; font-size: 1.05rem; } .v2-card p{ margin: 0; color: var(--v2-muted); } /* ========================================================= TEXT / UTILS ========================================================= */ .v2-muted{ color: var(--v2-muted); } .v2-mono{ font-family: var(--v2-mono); } .v2-list{ margin: 10px 0 0; padding-left: 18px; color: var(--v2-muted); } .v2-list li{ margin: 6px 0; } .v2-link{ color: var(--v2-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--v2-accent) 55%, transparent); } .v2-link:hover{ text-decoration-color: color-mix(in srgb, var(--v2-accent) 85%, transparent); } /* ========================================================= HERO VIDEO – Full-bleed background sections ========================================================= */ /* The section itself is the video container – edge-to-edge */ .v2-hero-bg{ position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; max-height: 85vh; } @media (max-width: 768px){ .v2-hero-bg{ aspect-ratio: 9 / 16; max-height: 92vh; } } /* Video wrapper – fills section */ .v2-hero-bg-media{ position: absolute; inset: 0; z-index: 0; } .v2-hero-bg .v2-hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; z-index: 0; } /* Dark overlay – blends video into page background */ .v2-hero-bg-overlay{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(24,24,26,0.35) 0%, rgba(24,24,26,0.15) 40%, rgba(24,24,26,0.40) 100%), linear-gradient(to right, rgba(24,24,26,0.30) 0%, transparent 35%, transparent 65%, rgba(24,24,26,0.30) 100%); pointer-events: none; } @media (prefers-color-scheme: light){ .v2-hero-bg-overlay{ background: linear-gradient(to bottom, rgba(250,250,250,0.25) 0%, rgba(250,250,250,0.05) 40%, rgba(250,250,250,0.30) 100%), linear-gradient(to right, rgba(250,250,250,0.20) 0%, transparent 35%, transparent 65%, rgba(250,250,250,0.20) 100%); } } /* Text content – bottom-left, small & subtle */ .v2-hero-bg-content{ position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 2.5rem clamp(1.5rem, 5vw, 4rem) 1.8rem; background: linear-gradient( to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 50%, transparent 100% ); pointer-events: none; } .v2-hero-bg-title{ font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 600; color: rgba(255,255,255,0.92); margin: 0 0 0.25rem; text-shadow: 0 1px 8px rgba(0,0,0,0.4); letter-spacing: -0.01em; line-height: 1.2; } .v2-hero-bg-sub{ font-size: clamp(0.78rem, 1.2vw, 0.92rem); color: rgba(255,255,255,0.70); margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.3); font-weight: 400; max-width: 420px; line-height: 1.45; } /* Badge – small pill */ .v2-hero-badge{ display: inline-block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.90); background: rgba(93,2,11,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0.25em 0.75em; border-radius: 999px; margin-bottom: 0.5rem; pointer-events: auto; } /* Sound button repositioned inside the bg section */ .v2-hero-bg .v2-video-sound{ position: absolute; bottom: 14px; right: 14px; top: auto; left: auto; z-index: 3; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255,255,255,0.75); cursor: pointer; user-select: none; appearance: none; -webkit-appearance: none; outline: none; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; } .v2-hero-bg .v2-video-sound:hover{ background: rgba(0,0,0,0.40); border-color: rgba(255,255,255,0.30); color: #fff; } .v2-video-sound-icon svg{ display: block; } .v2-video-sound .v2-icon-muted{ display: block; } .v2-video-sound .v2-icon-sound{ display: none; } .v2-video-sound.is-on .v2-icon-muted{ display: none; } .v2-video-sound.is-on .v2-icon-sound{ display: block; } .v2-video-sound.is-on{ background: rgba(93,2,11,0.35); border-color: rgba(255,255,255,0.28); color: #fff; } /* Scroll-hint chevron */ .v2-scroll-hint{ position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none; transition: opacity 600ms ease; animation: v2-bounce 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .v2-scroll-hint.is-hidden{ opacity: 0; } .v2-scroll-hint-pill{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(93,2,11,0.60); border: 2px solid rgba(255,255,255,0.25); color: #fff; box-shadow: 0 0 18px rgba(93,2,11,0.45), 0 0 40px rgba(93,2,11,0.20); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @keyframes v2-bounce{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(10px); } } /* Mobile: badge + title a bit smaller */ @media (max-width: 768px){ .v2-hero-bg-content{ padding: 2rem 1.2rem 1.2rem; } .v2-hero-bg-title{ font-size: 1rem; } .v2-hero-bg-sub{ font-size: 0.75rem; } .v2-hero-badge{ font-size: 0.58rem; } .v2-hero-bg .v2-video-sound{ width: 34px; height: 34px; bottom: 10px; right: 10px; } } /* ========================================================= ABOUT responsive (formerly inline in index) ========================================================= */ @media (max-width: 900px){ .v2-about .v2-card > div{ grid-template-columns: 1fr; } } /* ========================================================= FOCUS GRID responsive (formerly inline in index) ========================================================= */ @media (max-width: 900px){ .v2-focus-grid{ grid-template-columns: 1fr !important; } } /* ========================================================= KPI ========================================================= */ .v2-kpi-row{ display: flex; align-items: stretch; gap: 0; border-radius: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--v2-accent) 22%, var(--v2-border)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); } .v2-kpi-item{ flex: 1; min-width: 0; position: relative; padding: 28px 18px; text-align: center; background: color-mix(in srgb, var(--v2-surface) 90%, transparent); transition: transform 260ms var(--v2-ease), background 260ms var(--v2-ease), box-shadow 260ms var(--v2-ease); } .v2-kpi-item::before{ content:""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--v2-accent) 55%, transparent) 50%, transparent 100% ); opacity: 0.6; } .v2-kpi-item:hover{ transform: translateY(-4px); background: color-mix(in srgb, var(--v2-surface) 84%, transparent); box-shadow: inset 0 0 0 1px rgba(93,2,11,0.08); } .v2-kpi-item h3{ margin: 0 0 8px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; } .v2-kpi-item .v2-muted{ max-width: 30ch; margin: 0 auto; } .v2-kpi-sep{ width: 1px; background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--v2-accent) 35%, var(--v2-border)) 22%, color-mix(in srgb, var(--v2-accent) 35%, var(--v2-border)) 78%, transparent 100% ); } .v2-kpi-row.is-hidden .v2-kpi-item{ opacity: 0; transform: translateY(14px); } .v2-kpi-row.is-visible .v2-kpi-item{ opacity: 1; transform: translateY(0); transition: opacity 520ms var(--v2-ease), transform 520ms var(--v2-ease); } .v2-kpi-row.is-visible .v2-kpi-item:nth-child(1){ transition-delay: 0ms; } .v2-kpi-row.is-visible .v2-kpi-item:nth-child(3){ transition-delay: 80ms; } .v2-kpi-row.is-visible .v2-kpi-item:nth-child(5){ transition-delay: 160ms; } .v2-kpi-row.is-visible .v2-kpi-item:nth-child(7){ transition-delay: 240ms; } @media (max-width: 520px){ .v2-kpi-row{ flex-direction: column; overflow: visible; border-radius: 18px; } .v2-kpi-sep{ width: 100%; height: 1px; background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--v2-accent) 35%, var(--v2-border)) 22%, color-mix(in srgb, var(--v2-accent) 35%, var(--v2-border)) 78%, transparent 100% ); } } /* ========================================================= REVIEWS GRID ========================================================= */ .v2-reviews-grid{ display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; grid-auto-flow: row !important; grid-auto-rows: auto !important; align-items: start !important; gap: 18px; } .v2-reviews-grid > *{ display: block !important; position: static !important; inset: auto !important; transform: none !important; float: none !important; clear: none !important; /* do NOT force opacity/visibility (needed for scroll-reveal) */ } .v2-review{ display: block !important; position: static !important; width: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; } @media (max-width: 768px){ .v2-reviews-grid{ grid-template-columns: 1fr !important; } } .v2-review-text{ font-size: 1rem !important; line-height: 1.55 !important; display: block !important; max-height: none !important; overflow: visible !important; white-space: normal !important; visibility: visible !important; opacity: 1 !important; position: static !important; color: #eaeaea !important; } @media (prefers-color-scheme: light){ .v2-review-text{ color: #1a1a1a !important; } } /* ========================================================= SCROLL REVEAL (faster + snappier, not sluggish) ========================================================= */ [data-reveal]{ opacity: 0; transform: translate3d(0,14px,0); transition: opacity 520ms var(--v2-ease), transform 520ms var(--v2-ease); will-change: opacity, transform; } [data-reveal].is-in{ opacity: 1; transform: translate3d(0,0,0); } [data-reveal][data-reveal-blur]{ filter: blur(8px); transition: opacity 520ms var(--v2-ease), transform 520ms var(--v2-ease), filter 680ms var(--v2-ease); } [data-reveal].is-in[data-reveal-blur]{ filter: blur(0px); } [data-reveal][data-reveal-delay]{ transition-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* ========================================================= FOOTER ========================================================= */ .v2-footer{ padding: 34px 0 46px; color: var(--v2-muted); } .v2-footer-inner{ border-top: 1px solid var(--v2-border); padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .v2-footer a{ color: var(--v2-muted); padding: 6px 10px; border-radius: 12px; } .v2-footer a:hover{ color: var(--v2-text); background: color-mix(in srgb, var(--v2-surface) 60%, transparent); } /* ========================================================= KPI / Erfolge (#kpi) � MASSIV Upgrade (append-only) - macht aus der Leiste 4 moderne KPI-Kacheln - zentriert, gleiche Abst�nde, Premium-Glass/Gradient ========================================================= */ #kpi .v2-card{ position: relative !important; overflow: hidden !important; padding: 32px !important; /* �berschreibt inline padding:0 */ max-width: 980px !important; margin: 0 auto !important; border-radius: var(--v2-r-lg) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--v2-surface) 88%, transparent), color-mix(in srgb, var(--v2-surface-2) 92%, transparent) ) !important; box-shadow: var(--v2-shadow) !important; } /* Subtile Accent-Leiste links (wie bei deinen anderen Sektionen) */ #kpi .v2-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient( 180deg, color-mix(in srgb, var(--v2-accent) 85%, transparent), transparent ); opacity: 0.95; } /* Dezente Top-Line */ #kpi .v2-card::after{ content:""; position:absolute; left:0; top:0; right:0; height:2px; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--v2-accent) 55%, transparent) 50%, transparent 100% ); opacity: 0.55; } /* Die alte Separator-Linie komplett weg */ #kpi .v2-kpi-sep{ display:none !important; } /* KPI-Row: Grid statt Balken */ #kpi .v2-kpi-row{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; align-items: stretch !important; /* alte Balken-Optik neutralisieren */ border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; } /* Responsive: 2 Spalten / 1 Spalte */ @media (max-width: 980px){ #kpi .v2-kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 520px){ #kpi .v2-kpi-row{ grid-template-columns: 1fr !important; } } /* KPI-Kacheln: Premium */ #kpi .v2-kpi-item{ position: relative !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 10px !important; padding: 18px !important; /* �berschreibt inline */ min-height: 148px !important; text-align: center !important; border-radius: 18px !important; border: 1px solid var(--v2-border) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--v2-surface) 92%, transparent), color-mix(in srgb, var(--v2-surface) 84%, transparent) ) !important; box-shadow: 0 16px 46px rgba(0,0,0,0.14) !important; transition: transform 260ms var(--v2-ease), box-shadow 260ms var(--v2-ease), border-color 260ms var(--v2-ease), background 260ms var(--v2-ease) !important; } /* Feine Highlight-Linie oben in jeder Kachel */ #kpi .v2-kpi-item::before{ content:""; position:absolute; left:14px; right:14px; top:0; height:2px; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--v2-accent) 55%, transparent) 50%, transparent 100% ); opacity: 0.6; } /* Dezentes Corner-Glow (nicht kitschig) */ #kpi .v2-kpi-item::after{ content:""; position:absolute; inset:-40px -60px auto auto; width: 180px; height: 180px; background: radial-gradient( closest-side, rgba(93,2,11,0.22), rgba(93,2,11,0.00) ); filter: blur(8px); opacity: 0.65; pointer-events:none; } /* Hover nur wenn sinnvoll (Desktop) */ @media (hover:hover) and (pointer:fine){ #kpi .v2-kpi-item:hover{ transform: translateY(-3px) !important; border-color: color-mix(in srgb, var(--v2-accent) 35%, var(--v2-border)) !important; box-shadow: 0 22px 70px rgba(0,0,0,0.18) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--v2-surface) 94%, transparent), color-mix(in srgb, var(--v2-surface) 82%, transparent) ) !important; } } /* Zahl: deutlich st�rker, aber clean */ #kpi .v2-kpi-num{ margin: 0 !important; font-size: clamp(2.1rem, 3.0vw, 2.75rem) !important; line-height: 1.02 !important; letter-spacing: -0.02em !important; color: var(--v2-text) !important; text-shadow: 0 10px 28px rgba(0,0,0,0.22); } /* Text: ruhiger, besser lesbar */ #kpi .v2-kpi-item p{ margin: 0 !important; max-width: 44ch; color: var(--v2-muted) !important; } /* Scroll-reveal KPI: sauber im Grid */ #kpi .v2-kpi-row.is-hidden .v2-kpi-item{ opacity: 0 !important; transform: translateY(14px) !important; } #kpi .v2-kpi-row.is-visible .v2-kpi-item{ opacity: 1 !important; transform: translateY(0) !important; transition: opacity 520ms var(--v2-ease), transform 520ms var(--v2-ease) !important; } /* Stagger f�r deine 4 KPI-Items (Positions 1,3,5,7 wegen Separator-DIVs) */ #kpi .v2-kpi-row.is-visible > .v2-kpi-item:nth-child(1){ transition-delay: 0ms !important; } #kpi .v2-kpi-row.is-visible > .v2-kpi-item:nth-child(3){ transition-delay: 80ms !important; } #kpi .v2-kpi-row.is-visible > .v2-kpi-item:nth-child(5){ transition-delay: 160ms !important; } #kpi .v2-kpi-row.is-visible > .v2-kpi-item:nth-child(7){ transition-delay: 240ms !important; } /* ================================ Reviews (Google-style) � append-only ================================ */ .v2-reviews-section{ --v2-tile-gap: 18px; --v2-star: #f7c948; } /* Panel (gro�e Card) */ .v2-reviews-panel{ padding:32px; position:relative; overflow:hidden; max-width:980px; margin:0 auto; } .v2-reviews-panel::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient( 180deg, color-mix(in srgb, var(--v2-accent) 85%, transparent), transparent ); } .v2-reviews-panel::after{ content:""; position:absolute; left:0; top:0; right:0; height:2px; background:linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--v2-accent) 55%, transparent) 50%, transparent 100% ); opacity:.55; } .v2-reviews-inner{ padding-left:14px; } .v2-reviews-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; } .v2-reviews-title{ margin:0; } .v2-reviews-sub{ margin:8px 0 0; max-width:70ch; } /* Layout: Badge + Grid */ .v2-reviews-layout{ display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:var(--v2-tile-gap); align-items:start; } /* Badge links */ .v2-reviews-badge{ border:1px solid var(--v2-border); border-radius:18px; background:linear-gradient( 180deg, color-mix(in srgb, var(--v2-surface) 92%, transparent), color-mix(in srgb, var(--v2-surface) 84%, transparent) ); padding:18px; display:flex; flex-direction:column; justify-content:space-between; min-height:220px; box-shadow:0 18px 60px rgba(0,0,0,0.18); } .v2-reviews-badge-title{ font-weight:800; letter-spacing:.08em; font-size:.95rem; color:var(--v2-text); opacity:.92; } .v2-reviews-badge-stars{ margin:10px 0 6px; font-size:1.45rem; letter-spacing:2px; color:var(--v2-star); text-shadow:0 6px 18px rgba(0,0,0,0.20); } .v2-reviews-badge-meta{ font-size:.95rem; color:var(--v2-muted); } .v2-reviews-badge-brand{ margin-top:14px; padding-top:14px; border-top:1px solid var(--v2-border); display:flex; align-items:center; justify-content:flex-start; } .v2-google-wordmark{ font-weight:800; font-size:1.25rem; letter-spacing:.02em; color:color-mix(in srgb, var(--v2-text) 92%, transparent); } /* Grid rechts */ .v2-reviews-grid--new{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--v2-tile-gap); align-items:start; } /* Review Card */ .v2-review-card{ border:1px solid var(--v2-border); border-radius:18px; background:linear-gradient( 180deg, color-mix(in srgb, var(--v2-surface) 94%, transparent), color-mix(in srgb, var(--v2-surface) 84%, transparent) ); padding:18px; box-shadow:0 14px 46px rgba(0,0,0,0.16); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } @media (hover:hover){ .v2-review-card:hover{ transform:translateY(-2px); box-shadow:0 18px 60px rgba(0,0,0,0.22); border-color:color-mix(in srgb, var(--v2-accent) 25%, var(--v2-border)); } } .v2-review-top{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; } /* Avatar (Initialen) */ .v2-review-avatar{ width:42px; height:42px; border-radius:999px; display:grid; place-items:center; font-weight:800; color:#fff; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, #fff 22%, transparent), transparent 55%), var(--v2-accent); box-shadow:0 10px 24px rgba(93,2,11,0.35); flex:0 0 auto; } .v2-review-meta{ min-width:0; flex:1 1 auto; } .v2-review-name{ font-weight:800; line-height:1.2; margin:0 0 4px; color:var(--v2-text); } .v2-review-source{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .v2-review-stars{ color:var(--v2-star); letter-spacing:1px; font-size:1rem; line-height:1; } .v2-review-label{ font-size:.92rem; color:var(--v2-muted); } /* kleines "G" rechts */ .v2-review-g{ width:34px; height:34px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--v2-border); color:var(--v2-muted); background:color-mix(in srgb, var(--v2-surface) 88%, transparent); flex:0 0 auto; font-weight:800; } .v2-review-text{ margin:0; color:color-mix(in srgb, var(--v2-text) 92%, transparent); line-height:1.6; font-size:1rem; } .v2-reviews-footer{ margin-top:18px; padding-top:18px; border-top:1px solid var(--v2-border); display:flex; justify-content:flex-end; } /* Responsive */ @media (max-width: 860px){ .v2-reviews-layout{ grid-template-columns:1fr; } .v2-reviews-badge{ min-height:auto; } .v2-reviews-grid--new{ grid-template-columns:1fr; } } /* ===== Reviews: SVG Stars (fix for "?????") ===== */ :root{ --v2-star-on: #f4b400; /* Google-Gold */ --v2-star-off: rgba(20,20,20,0.18); } @media (prefers-color-scheme: dark){ :root{ --v2-star-off: rgba(255,255,255,0.18); } } .v2-stars{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle; line-height:1; } .v2-star{ width:16px; height:16px; fill: var(--v2-star-off); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18)); } .v2-star.is-on{ fill: var(--v2-star-on); } /* leicht kompakter im Badge */ .v2-reviews-badge-stars .v2-star{ width:18px; height:18px; } /* ========================================================= ABOUT: Bild unter Text, wenn Platz zu eng wird (ersetzt das fr�here Inline-Grid aus der PHP) ========================================================= */ .v2-about-grid{ padding-left: 14px; display: grid; grid-template-columns: minmax(240px,360px) minmax(0,1fr); gap: 30px; align-items: center; } @media (max-width: 900px){ .v2-about-grid{ display: flex; flex-direction: column-reverse; /* Text oben, Bild unten */ gap: 22px; align-items: stretch; } /* Bild (erstes Child im DOM) bleibt zentriert */ .v2-about-grid > :first-child{ align-self: center; } } /* ========================================================= Responsive & Clean Layout (Add-on) ========================================================= */ /* Einheitliche Wide-Cards (ersetzt Inline-Styles in PHP) */ .v2-card-wide{ max-width: 980px; margin: 0 auto; } .v2-card-pad{ padding: 32px; position: relative; overflow: hidden; } /* Mobile: ruhigere Abst�nde */ @media (max-width: 900px){ .v2-card-pad{ padding: 22px; } } @media (max-width: 560px){ .v2-card-pad{ padding: 18px; } } /* About: Bild unter Text, wenn eng — (bereits oben definiert, hier nur Kommentar) */ /* Schwerpunkte: 2 Spalten -> 1 Spalte */ .v2-focus-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } @media (max-width: 900px){ .v2-focus-grid{ grid-template-columns: 1fr; } } /* KPI: auf kleineren Ger�ten sauber umbrechen */ @media (max-width: 1020px){ .v2-kpi-row{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); } .v2-kpi-sep{ display:none; } } @media (max-width: 640px){ .v2-kpi-row{ grid-template-columns: 1fr; } } /* Reviews: Badge + Grid untereinander */ @media (max-width: 980px){ .v2-reviews-layout{ display:flex; flex-direction: column; gap: 18px; } .v2-reviews-badge{ width: 100%; } .v2-reviews-actions .v2-btn{ width: 100%; justify-content:center; } .v2-reviews-grid{ grid-template-columns: 1fr !important; } } /* Video: Rendering stabiler */ .v2-hero-video{ transform: translateZ(0); backface-visibility: hidden; } /* ========================================================= Reviews: ruhiger, aufger�umter, Google-Logo integriert ========================================================= */ /* Layout: Badge links, Grid rechts (sauberer Abstand) */ .v2-reviews-layout{ display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 980px){ .v2-reviews-layout{ grid-template-columns: 1fr; } } /* Badge: kompakter + weniger "Kasten-chaos" */ .v2-reviews-badge{ border-radius: 18px; padding: 18px; border: 1px solid var(--v2-border); background: linear-gradient(180deg, color-mix(in srgb, var(--v2-surface) 92%, transparent), color-mix(in srgb, var(--v2-surface) 82%, transparent) ); } @media (min-width: 981px){ .v2-reviews-badge{ position: sticky; top: 92px; /* wirkt ruhig beim Scrollen */ } } /* Google Brand: Logo + Wordmark */ .v2-reviews-badge-brand{ display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--v2-border); opacity: .95; } .v2-google-g{ width: 18px; height: 18px; display: block; flex: 0 0 auto; } /* Grid: automatisch sauber �ber alle Ger�te */ .v2-reviews-grid--new{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (min-width: 1200px){ .v2-reviews-grid--new{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px){ .v2-reviews-grid--new{ grid-template-columns: 1fr; } } /* Card Top: Avatar | Meta | Google Logo -> ordentlich */ .v2-review-top{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; } .v2-review-google{ width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--v2-border); background: color-mix(in srgb, var(--v2-surface) 88%, transparent); } .v2-review-google .v2-google-g{ width: 16px; height: 16px; } /* Meta: weniger "wirr" */ .v2-review-source{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; opacity: .9; } .v2-review-label{ font-size: 12px; opacity: .75; } /* Karten: ruhiger, gleiche Innenabst�nde */ .v2-review-card{ border-radius: 18px; border: 1px solid var(--v2-border); background: linear-gradient(180deg, color-mix(in srgb, var(--v2-surface) 92%, transparent), color-mix(in srgb, var(--v2-surface) 84%, transparent) ); } /* alte G-Box sicher abschalten (falls CSS noch existiert) */ .v2-review-g{ display:none !important; } /* ========================================================= FIX: Reviews-Layout nachdem Badge entfernt wurde (macht die Karten wieder breit + ordentlich) ========================================================= */ .v2-reviews-layout{ display: block !important; /* kill 2-col grid */ } .v2-reviews-grid--new{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } @media (min-width: 1200px){ .v2-reviews-grid--new{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 820px){ .v2-reviews-grid--new{ grid-template-columns: 1fr !important; } } /* ========================================================= Reviews: gleiche H�he + Ausklappen (Hover + Touch via .is-open) ========================================================= */ :root{ --v2-review-h: 230px; /* geschlossen: alle gleich hoch */ --v2-review-open: 520px; /* ge�ffnet: ausklappen */ } @media (max-width: 980px){ :root{ --v2-review-h: 220px; --v2-review-open: 560px; } } .v2-review-card{ position: relative; display: flex; flex-direction: column; min-height: var(--v2-review-h); max-height: var(--v2-review-h); overflow: hidden; transition: max-height 260ms ease, transform 160ms ease, box-shadow 160ms ease; will-change: max-height; } /* Textbereich nimmt Resth�he ein */ .v2-review-text{ flex: 1 1 auto; margin-top: 12px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; } /* Ausklappen: Hover/Focus/Tap */ .v2-review-card:hover, .v2-review-card:focus-within, .v2-review-card.is-open{ max-height: var(--v2-review-open); transform: translateY(-2px); z-index: 3; } /* Ausgeklappt: Text voll + ggf. scroll, falls ultra-lang */ .v2-review-card:hover .v2-review-text, .v2-review-card:focus-within .v2-review-text, .v2-review-card.is-open .v2-review-text{ display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: auto; padding-right: 6px; /* Platz f�r Scrollbar */ } /* Optional: angenehmer Scrollbar-Look (WebKit) */ .v2-review-card .v2-review-text::-webkit-scrollbar{ width: 8px; } .v2-review-card .v2-review-text::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--v2-border) 85%, transparent); border-radius: 999px; } /* === Inline CSS aus header.php === */ /* Header-only Enhancements (responsive + modern motion) - No third-party assets - Neutral naming (adblock-safe) */ /* === Motion safety === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* === SEQUENZ: Logo + Navigation === */ @keyframes headerIn { to { opacity: 1; transform: translateY(0); } } /* Logo: responsive, never distorted */ .v2-logo-bg{ margin: 8px 0; /* zus�tzlicher Abstand um das Logo */ isolation: isolate; /* verhindert ungewollte Vermischung/�berlagerung im Rendering */ display:inline-flex; align-items:center; justify-content:center; width:fit-content; height:fit-content; max-width:140px; /* radikal kleiner */ max-height:44px; background: transparent !important; /* ensure no background behind transparent logo (override style.css) */ opacity: 0; transform: translateY(-40px) scale(0.9); animation: logoSlide 700ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards; transition: transform 260ms cubic-bezier(0.22,1,0.36,1); will-change: transform; } @keyframes logoSlide { to { opacity: 1; transform: translateY(0) scale(1); } } .v2-brand:hover .v2-logo-bg, .v2-logo-bg:hover { transform: translateY(-6px) scale(1.05); } .v2-logo-bg img{ /* PNG-Transparenz korrekt darstellen: kein blend-mode (verursacht oft wei�e Artefakte) */ mix-blend-mode: normal; display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; /* hard reset: some themes set img backgrounds */ background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* === Desktop nav (sauber, ohne kaputte Klammern) === */ /* Header darf KEIN transform haben, sonst ist position:fixed am Handy nicht viewport-fixed (iOS/Chrome edge cases) */ .v2-header, .v2-header-inner{ transform: none !important; } @media (min-width: 860px){ .v2-header-inner{ display: flex; align-items: center; } .v2-nav{ display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: nowrap; } .v2-nav-logo{display:none !important;} .v2-nav-toggle{display:none;} } /* Mobile toggle button styling */ .v2-nav-toggle{ display: none; align-items: center; justify-content: center; gap: 10px; padding: 12px 17px; margin-right: 4px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); background: color-mix(in srgb, var(--v2-surface) 78%, transparent); color: var(--v2-text); cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,0.10); transition: transform 200ms cubic-bezier(0.22,1,0.36,1); } .v2-nav-toggle:hover{ transform: translateY(-1px); } .v2-nav-toggle .v2-bars{ width: 22px; height: 14px; display: grid; gap: 4px; } .v2-nav-toggle .v2-bars span{ display: block; height: 2px; border-radius: 99px; background: var(--v2-text); opacity: 0.9; transition: transform 220ms cubic-bezier(0.22,1,0.36,1), opacity 220ms cubic-bezier(0.22,1,0.36,1); } /* Hidden checkbox drives the mobile panel */ .v2-nav-check{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); } /* === Mobile: Fullscreen Overlay Men� === */ @media (max-width: 859px){ .v2-nav-toggle{display:inline-flex;position:relative;z-index:10000;} .v2-nav{ position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; padding: 28px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Inhalte mittig */ gap: 14px; background: color-mix(in srgb, var(--v2-surface) 96%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9999; opacity: 0; transform: translate3d(0,-10px,0); pointer-events: none; transition: opacity 240ms cubic-bezier(0.22,1,0.36,1), transform 240ms cubic-bezier(0.22,1,0.36,1); } .v2-nav a{ width: min(520px, 88vw); text-align: center; opacity: 0; transform: translate3d(0,12px,0); animation: none; box-shadow: none; border: 1px solid rgba(0,0,0,0.10); background: color-mix(in srgb, var(--v2-surface) 86%, transparent); padding: 16px 18px; font-size: 1.05rem; } .v2-nav-check:checked ~ .v2-nav{ opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; } .v2-nav-check:checked ~ .v2-nav a{ animation: mobileNavIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Mobile: CTA button goes to bottom */ .v2-nav a.v2-nav-cta--mobile-last{ order: 99; margin-top: 14px; } .v2-nav-check:checked ~ .v2-nav a:nth-child(1){animation-delay:80ms;} .v2-nav-check:checked ~ .v2-nav a:nth-child(2){animation-delay:140ms;} .v2-nav-check:checked ~ .v2-nav a:nth-child(3){animation-delay:200ms;} .v2-nav-check:checked ~ .v2-nav a:nth-child(4){animation-delay:260ms;} @keyframes mobileNavIn{ to { opacity: 1; transform: translate3d(0,0,0); } } /* Burger -> X */ .v2-nav-check:checked + label .v2-bars span:nth-child(1){transform: translateY(5px) rotate(45deg);} .v2-nav-check:checked + label .v2-bars span:nth-child(2){opacity: 0;} .v2-nav-check:checked + label .v2-bars span:nth-child(3){transform: translateY(-5px) rotate(-45deg);} } .v2-nav a { backface-visibility: hidden; -webkit-font-smoothing: antialiased; will-change: transform, opacity; color: var(--v2-text); text-decoration: none; /* Default: visible (prevents �stays hidden� if animation/css parsing fails) */ opacity: 1; transform: none; padding: 12px 18px; border-radius: 999px; background: transparent; box-shadow: 0 8px 22px rgba(0,0,0,0.12); position: relative; overflow: hidden; transition: transform 220ms cubic-bezier(0.22,1,0.36,1), box-shadow 220ms cubic-bezier(0.22,1,0.36,1), background 220ms cubic-bezier(0.22,1,0.36,1); will-change: transform; } /* Animation only when motion is allowed */ @media (prefers-reduced-motion: no-preference) { .v2-nav a { opacity: 0; transform: translate3d(0,-40px,0) scale(0.94); animation: navSlide 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } } .v2-nav a:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 42px rgba(93,2,11,0.35); /* fallback first */ background: rgba(93, 2, 11, 0.12); background: color-mix(in srgb, var(--v2-accent) 90%, var(--v2-bg)); } @media (prefers-color-scheme: dark) { .v2-nav a:hover { /* keep contrast even if variables are misconfigured */ background: rgba(93, 2, 11, 0.28); } } .v2-nav a:nth-child(1) { animation-delay: 600ms; } .v2-nav a:nth-child(2) { animation-delay: 720ms; } .v2-nav a:nth-child(3) { animation-delay: 840ms; } .v2-nav a:nth-child(4) { animation-delay: 960ms; } @keyframes navSlide { to { opacity: 1; transform: translate3d(0,0,0) scale(1); } } /* Nav CTA button (red accent) */ .v2-nav a.v2-nav-cta{ background: radial-gradient(120% 120% at 30% 20%, var(--v2-accent-2), var(--v2-accent)); color: #fff !important; border-color: color-mix(in srgb, var(--v2-accent) 55%, var(--v2-border)); font-weight: 600; padding: 10px 18px; border-radius: 999px; } .v2-nav a.v2-nav-cta:hover{ background: radial-gradient(120% 120% at 30% 20%, var(--v2-accent), var(--v2-accent-2)); border-color: color-mix(in srgb, var(--v2-accent) 75%, var(--v2-border)); box-shadow: 0 12px 32px rgba(93,2,11,0.40); } .v2-nav a.v2-nav-cta::after{ display: none; } /* Dark mode border tuning for the toggle/panel */ @media (prefers-color-scheme: dark){ .v2-nav-toggle{ border-color: rgba(255,255,255,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.35); } } @media (prefers-color-scheme: dark) and (max-width: 859px){ .v2-nav{ border-color: rgba(255,255,255,0.14); } .v2-nav a{ border-color: rgba(255,255,255,0.10); } } /* === Inline CSS aus footer.php === */ .v2-footer-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; align-items:start; } .v2-footer-col h4{margin:0 0 18px;} .v2-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;} .v2-footer-social{ margin-top:44px; text-align:center; display:grid; gap:14px; justify-items:center; } /* Social Media Pills mit Logos */ .v2-footer-icons{ display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; } .v2-social-pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; text-decoration:none; color: inherit; /* Basisfarbe vom Container */ } .v2-social-pill svg{ width:28px; /* gr��er */ height:28px; /* gr��er */ display:block; flex:0 0 auto; } .v2-social-pill span{ color: inherit; } .v2-footer-copy{ display:block; margin-top:28px; text-align:center; } @media (max-width: 900px){ .v2-footer-grid{grid-template-columns:1fr;gap:28px;} } /* === Inline CSS aus index.php (Reviews) === */ /* Reviews: show full text (no inner vertical scrolling) and keep cards consistently sized */ /* Nicer horizontal scrollbar (matches site style) */ .v2-reviews-scroll{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--v2-accent) 65%, transparent) color-mix(in srgb, var(--v2-border) 70%, transparent); } .v2-reviews-scroll::-webkit-scrollbar{ height: 12px; } .v2-reviews-scroll::-webkit-scrollbar-track{ background: color-mix(in srgb, var(--v2-border) 70%, transparent); border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-border) 55%, transparent); } .v2-reviews-scroll::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, color-mix(in srgb, var(--v2-accent) 78%, transparent), color-mix(in srgb, var(--v2-accent) 58%, transparent) ); border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.22); border: 2px solid transparent; background-clip: padding-box; } .v2-reviews-scroll::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, color-mix(in srgb, var(--v2-accent) 90%, transparent), color-mix(in srgb, var(--v2-accent) 68%, transparent) ); border: 1px solid color-mix(in srgb, var(--v2-accent) 35%, transparent); background-clip: padding-box; } .v2-reviews-scroll::-webkit-scrollbar-corner{ background: transparent; } /* Review cards: responsive sizing + centered snapping on mobile */ .v2-review-card{ flex: 0 0 320px; max-width: 420px; scroll-snap-align: start; } .v2-review-card--badge{ flex: 0 0 320px; scroll-snap-align: start; } .v2-reviews-scroll{ scroll-padding-left: 52px; scroll-padding-right: 52px; } @media (max-width: 860px){ .v2-review-card, .v2-review-card--badge{ flex-basis: 300px; } } @media (max-width: 640px){ /* On phones: smaller cards + centered snap */ .v2-reviews-scroll{ gap: 14px !important; padding-left: 16px !important; padding-right: 16px !important; scroll-padding-left: 16px; scroll-padding-right: 16px; } .v2-review-card, .v2-review-card--badge{ flex: 0 0 clamp(216px, 74vw, 288px); scroll-snap-align: center; } /* Arrows would cover content on small screens � hide them */ .v2-scroll-arrow{ display: none !important; } } @media (max-width: 380px){ .v2-review-card, .v2-review-card--badge{ flex: 0 0 79vw; } } .v2-review-card{ height: auto !important; max-height: none !important; display: flex; flex-direction: column; } /* Override any existing clamp/scroll rules from external CSS */ .v2-review-text{ display: block !important; overflow: visible !important; max-height: none !important; height: auto !important; white-space: normal !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; -webkit-box-orient: initial !important; } .v2-review-text{ text-wrap: pretty; } /* Reviews layout: badge left beside the horizontal scroller */ .v2-reviews-layout--with-badge{ display: grid; grid-template-columns: minmax(220px, 260px) 1fr; gap: 18px; align-items: start; } .v2-reviews-main{ min-width: 0; } /* Google badge (uses the existing review card as the container; no extra inner tile) */ .v2-review-card--badge{ padding: 18px !important; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; } .v2-google-badge-title{ font-weight: 800; letter-spacing: 0.04em; font-size: 0.95rem; margin: 0; } .v2-google-badge-stars{ display:flex; align-items:center; gap:4px; margin: 0; } .v2-review-card--badge .v2-star{ color: #FBBC05; } .v2-google-badge-sub{ color: color-mix(in srgb, var(--v2-text) 70%, transparent); font-size: 0.95rem; margin: 0; } .v2-google-logo{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top: 6px; width: 100%; } .v2-google-wordmark{ font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -0.02em; display:inline-flex; align-items:baseline; } .v2-g-blue{ color:#4285F4; } .v2-g-red{ color:#EA4335; } .v2-g-yellow{ color:#FBBC05; } .v2-g-green{ color:#34A853; } .v2-google-g-big{ width: 51px; height: 51px; flex: 0 0 auto; } @media (max-width: 860px){ .v2-reviews-layout--with-badge{ grid-template-columns: 1fr; } } /* ========================================================= STANDORT-BANNER (unterhalb des zweiten Videos) - Light + Dark Mode - Responsive (Desktop / Tablet / Mobile) ========================================================= */ .v2-location-card{ overflow: hidden; } .v2-location-inner{ padding-left: 14px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .v2-location-content{ display: flex; align-items: flex-start; gap: 18px; flex: 1 1 360px; min-width: 0; } .v2-location-icon{ flex: 0 0 auto; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--v2-accent); color: #fff; box-shadow: 0 8px 24px rgba(93,2,11,0.35); } .v2-location-headline{ margin: 0 0 8px; font-size: 1.05rem; line-height: 1.5; color: var(--v2-text); max-width: 52ch; } .v2-location-address{ font-style: normal; font-size: 1.1rem; font-weight: 700; line-height: 1.5; color: var(--v2-text); letter-spacing: 0.01em; } .v2-location-actions{ display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; } .v2-location-btn{ white-space: nowrap; } .v2-location-btn svg{ flex: 0 0 auto; } /* Tablet */ @media (max-width: 980px){ .v2-location-inner{ flex-direction: column; align-items: flex-start; gap: 16px; } .v2-location-content{ flex-basis: auto; } .v2-location-actions{ width: 100%; } .v2-location-btn{ flex: 1 1 auto; justify-content: center; text-align: center; } } /* Mobile */ @media (max-width: 560px){ .v2-location-content{ flex-direction: column; align-items: center; text-align: center; gap: 14px; flex-basis: auto; min-width: 0; } .v2-location-headline{ font-size: 1rem; } .v2-location-address{ font-size: 1.05rem; margin-bottom: 0; } .v2-location-actions{ flex-direction: column; margin-top: 0; } .v2-location-btn{ width: 100%; } .v2-location-inner{ padding-left: 0; gap: 16px; } } /* ========================================================= ZENTRALISIERTE STYLES Ersetzt ALLE inline style-Attribute aus den PHP-Dateien. ========================================================= */ /* — Utilities — */ .v2-text-center{ text-align: center; } .v2-m-0{ margin: 0; } .v2-spacer{ height: 14px; } .v2-spacer-sm{ height: 10px; } .v2-card--flush{ padding: 0 !important; } /* Button-Gruppen */ .v2-btn-group{ display: flex; gap: 12px; flex-wrap: wrap; } .v2-btn-group--center{ justify-content: center; } .v2-btn-group--sm{ gap: 10px; } /* CTA-Soft-Section: Container zentriert */ .v2-cta-soft .v2-container{ text-align: center; } /* — Wiederverwendbare Accent-Dekorationen — */ .v2-accent-stripe{ position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--v2-accent) 85%, transparent), transparent); pointer-events: none; } .v2-accent-topline{ position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--v2-accent) 55%, transparent) 50%, transparent 100%); opacity: 0.55; pointer-events: none; } /* — Header-Logo (Brand + Mobile-Nav-Logo) — */ .v2-header-logo{ width: auto; max-width: 200px; max-height: 72px; display: block; } /* — Footer-Brand — */ .v2-footer-brand{ display: flex; justify-content: center; margin-bottom: 36px; } .v2-footer-brand-link, .v2-footer a.v2-footer-brand-link{ display: inline-flex; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .v2-footer-brand-link:hover, .v2-footer a.v2-footer-brand-link:hover{ background: transparent !important; } .v2-footer-logo{ max-width: 220px; height: auto; } /* — Kicker (Abschnitts-Label mit Punkt) — */ .v2-kicker{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .v2-kicker h2, .v2-kicker span{ margin: 0; } .v2-kicker-dot{ width: 8px; height: 8px; border-radius: 999px; background: var(--v2-accent); flex: 0 0 auto; } @media (prefers-color-scheme: dark){ .v2-kicker-dot{ background: #c4434f; } } :root[data-theme="dark"] .v2-kicker-dot{ background: #c4434f; } /* — About-Section — */ .v2-about-img-wrap{ justify-self: center; width: 100%; max-width: 360px; } .v2-about-img-frame{ width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid var(--v2-border); background: color-mix(in srgb, var(--v2-surface) 88%, transparent); box-shadow: 0 18px 60px rgba(0,0,0,0.22); } .v2-about-img{ width: 100%; height: auto; display: block; } .v2-about-text{ max-width: 62ch; } /* Center button inside about-text by spanning full width */ .v2-about-text .v2-btn-group--center{ width: 100%; margin-left: auto; margin-right: auto; } .v2-about-text p{ margin: 0; } /* — Section-Inner (Inhaltsblock in Cards) — */ .v2-section-inner{ padding-left: 14px; max-width: 760px; margin: 0 auto; } .v2-section-inner > h3{ margin: 0 0 10px; } .v2-section-intro{ margin: 0 0 22px; max-width: 74ch; } /* — Steps Timeline (Erstgespräch / Planung / Umsetzung) — */ .v2-steps-grid{ display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto; position: relative; } /* Vertical connector line */ .v2-steps-grid::before{ content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg, var(--v2-accent), color-mix(in srgb, var(--v2-accent) 30%, transparent)); border-radius: 2px; z-index: 0; } .v2-step-card{ padding: 0; border-radius: 0; border: none; background: none; } .v2-step-inner{ display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; padding: 24px 0; position: relative; z-index: 1; } .v2-step-num{ width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.15), transparent 50%), var(--v2-accent); color: #fff; font-weight: 800; font-size: 1.25rem; box-shadow: 0 8px 24px rgba(93,2,11,0.40), 0 0 0 4px color-mix(in srgb, var(--v2-surface) 95%, transparent), 0 0 0 6px color-mix(in srgb, var(--v2-accent) 20%, transparent); flex: 0 0 auto; line-height: 1; transition: transform 260ms var(--v2-ease), box-shadow 260ms var(--v2-ease); } @media (hover:hover) and (pointer:fine){ .v2-step-inner:hover .v2-step-num{ transform: scale(1.08); box-shadow: 0 12px 32px rgba(93,2,11,0.45), 0 0 0 4px color-mix(in srgb, var(--v2-surface) 95%, transparent), 0 0 0 8px color-mix(in srgb, var(--v2-accent) 25%, transparent); } } .v2-step-text{ padding-top: 6px; } .v2-step-title{ display: block; margin: 0 0 8px; font-weight: 700; font-size: 1.1rem; color: var(--v2-text); letter-spacing: -0.01em; } .v2-step-card p{ margin: 0; line-height: 1.65; } /* Divider between steps */ .v2-step-card + .v2-step-card .v2-step-inner{ border-top: 1px solid var(--v2-border); } @media (max-width: 600px){ .v2-step-inner{ grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; } .v2-step-num{ width: 44px; height: 44px; font-size: 1.05rem; } .v2-steps-grid::before{ left: 21px; } .v2-step-title{ font-size: 1rem; } } /* — Hero-Heading — */ .v2-hero-sub{ margin: 0 0 10px; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; color: var(--v2-muted); } .v2-hero-heading{ margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.25; text-align: center; letter-spacing: -0.01em; color: var(--v2-text); } .v2-hero-heading__line{ display: block; } .v2-hero-heading--accent{ color: var(--v2-accent); font-weight: 600; font-size: 0.88em; } @media (prefers-color-scheme: dark){ .v2-hero-heading--accent{ color: var(--v2-accent-2, #7a0a16); } } :root[data-theme="dark"] .v2-hero-heading--accent{ color: var(--v2-accent-2, #7a0a16); } /* Accent line under heading */ .v2-hero-accent-line{ width: 0; height: 2px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--v2-accent), transparent); border-radius: 2px; transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1) 600ms; } .v2-anim-stagger.is-in .v2-hero-accent-line{ width: 120px; } /* Staggered fade-in animation */ .v2-anim-line{ opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .v2-anim-stagger.is-in .v2-anim-line:nth-child(1){ transition-delay: 0ms; opacity: 1; transform: translateY(0); } .v2-anim-stagger.is-in .v2-anim-line:nth-child(2){ transition-delay: 150ms; opacity: 1; transform: translateY(0); } .v2-anim-stagger.is-in .v2-anim-line:nth-child(3){ transition-delay: 300ms; opacity: 1; transform: translateY(0); } .v2-anim-stagger.is-in .v2-anim-line:nth-child(4){ transition-delay: 450ms; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .v2-anim-line{ opacity: 1; transform: none; transition: none; } .v2-hero-accent-line{ width: 120px; transition: none; } } @media (max-width: 600px){ .v2-hero-heading{ font-size: clamp(1.2rem, 5.5vw, 1.6rem); } .v2-hero-sub{ font-size: 0.72rem; letter-spacing: 0.18em; } .v2-hero-accent-line{ margin-top: 14px; } .v2-anim-stagger.is-in .v2-hero-accent-line{ width: 80px; } } /* — Hero-Intro card (erste Kachel Über-mich) — */ /* — Google-Bewertungs-Badge — */ .v2-google-badge{ display: flex; align-items: center; justify-content: center; gap: 30px; padding: 28px 36px; } .v2-google-badge__logo{ flex-shrink: 0; line-height: 0; } .v2-google-badge__logo svg{ width: 160px; height: auto; } .v2-google-badge__content{ display: flex; flex-direction: column; gap: 4px; } .v2-google-badge__rating{ display: flex; align-items: center; gap: 10px; } .v2-google-badge__score{ font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--v2-text); line-height: 1; } .v2-google-badge__rating .v2-stars{ display: flex; gap: 3px; } .v2-google-badge__rating .v2-star{ width: 24px; height: 24px; } .v2-google-badge__text{ margin: 0; font-size: 0.95rem; color: var(--v2-muted); } .v2-google-badge__text strong{ color: var(--v2-text); font-weight: 600; } @media(max-width: 480px){ .v2-google-badge{ flex-direction: column; gap: 14px; text-align: center; padding: 20px 18px; } .v2-google-badge__rating{ justify-content: center; } } /* — Hero-Intro card (erste Kachel Über-mich) — */ .v2-hero-intro{ position: relative; overflow: hidden; border: none; border-radius: var(--v2-r-lg, 28px); background: radial-gradient(ellipse 80% 60% at 20% 0%, color-mix(in srgb, var(--v2-accent) 6%, transparent), transparent 70%), radial-gradient(ellipse 60% 50% at 90% 100%, color-mix(in srgb, var(--v2-accent) 4%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--v2-surface) 96%, transparent), color-mix(in srgb, var(--v2-surface) 88%, transparent) ); box-shadow: 0 1px 0 0 color-mix(in srgb, var(--v2-accent) 10%, transparent), 0 12px 40px -8px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04); padding: 40px 36px; } .v2-hero-intro::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid color-mix(in srgb, var(--v2-accent) 12%, var(--v2-border)); pointer-events: none; } .v2-hero-intro::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 5%, var(--v2-accent) 30%, color-mix(in srgb, var(--v2-accent) 50%, #c0392b) 70%, transparent 95%); border-radius: 999px 999px 0 0; opacity: 0.7; } .v2-hero-intro__head{ text-align: center; max-width: 680px; margin: 0 auto; } .v2-hero-intro__divider{ width: 60px; height: 2px; margin: 24px auto; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--v2-accent), transparent); opacity: 0.35; } .v2-kicker--center{ justify-content: center; } @media (max-width: 600px){ .v2-hero-intro{ padding: 28px 18px; } .v2-hero-intro__divider{ margin: 18px auto; } } @media (min-width: 601px) and (max-width: 900px){ .v2-hero-intro{ padding: 34px 26px; } } /* Legacy fallback */ .v2-accent-heading{ color: var(--v2-accent); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; background: linear-gradient(135deg, var(--v2-accent), color-mix(in srgb, var(--v2-accent) 60%, #c0392b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* — Trennlinie innerhalb von Sections — */ .v2-section-divider{ width: 100%; max-width: 760px; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid var(--v2-border); } /* — Reviews-Scroll: Basis-Layout (ergänzt Scrollbar-Styles) — */ .v2-reviews-scroll{ display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } /* ========================================================= COOKIE CONSENT BANNER (DSGVO) ========================================================= */ .v2-consent{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 10001; background: var(--v2-surface); border-top: 1px solid var(--v2-border); box-shadow: 0 -4px 24px rgba(0,0,0,0.12); padding: 1.25rem 1rem; animation: v2-consent-up 0.35s var(--v2-ease) both; } @keyframes v2-consent-up{ from{ transform: translateY(100%); opacity: 0; } to{ transform: translateY(0); opacity: 1; } } .v2-consent[hidden]{ display: none !important; } .v2-consent-inner{ max-width: var(--v2-container); margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .v2-consent-text{ flex: 1 1 400px; font-size: 0.9rem; line-height: 1.5; color: var(--v2-text); } .v2-consent-text p{ margin: 0.35rem 0 0; color: var(--v2-muted); font-size: 0.84rem; } .v2-consent-text a{ color: var(--v2-accent); text-decoration: underline; } .v2-consent-actions{ display: flex; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; } .v2-consent-actions .v2-btn{ white-space: nowrap; font-size: 0.88rem; padding: 0.6rem 1.4rem; } /* ========================================================= GOOGLE MAPS PLACEHOLDER (consent-blocked) ========================================================= */ .v2-map-placeholder{ background: var(--v2-surface-2); border: 1px dashed var(--v2-border); border-radius: var(--v2-r-sm); margin-top: 1.5rem; min-height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; } @media (max-width: 560px){ .v2-map-placeholder{ min-height: 200px; padding: 1.2rem; margin-top: 1rem; } } .v2-map-placeholder-inner{ max-width: 380px; } .v2-map-placeholder-inner svg{ color: var(--v2-muted); margin-bottom: 0.75rem; } .v2-map-placeholder-inner p{ margin: 0.5rem 0; font-size: 0.9rem; } .v2-map-placeholder-inner a{ color: var(--v2-accent); text-decoration: underline; } .v2-map-placeholder-inner .v2-btn{ margin-top: 1rem; } /* ═══ Vision / Mission Grid ═══ */ .v2-vision-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .v2-vision-grid--reverse{ direction: rtl; } .v2-vision-grid--reverse > *{ direction: ltr; } .v2-vision-img-wrap{ border-radius: var(--v2-r); overflow: hidden; } .v2-vision-img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--v2-r); min-height: 320px; } .v2-section-heading{ font-size: 1.6rem; font-weight: 800; color: var(--v2-text); margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; } .v2-section-heading--center{ text-align: center; } .v2-vision-quote{ font-style: italic; font-size: 1.1rem; color: var(--v2-text); margin: 0 0 1.25rem; line-height: 1.6; } .v2-blockquote{ margin: 1.5rem 0; padding: 1rem 0 1rem 1.25rem; border-left: 3px solid var(--v2-accent); font-style: italic; color: var(--v2-text); line-height: 1.7; font-size: 0.98rem; } @media (max-width: 768px){ .v2-vision-grid, .v2-vision-grid--reverse{ grid-template-columns: 1fr; direction: ltr; gap: 24px; } .v2-vision-img{ min-height: 240px; } } /* ═══ CTA Hint ═══ */ .v2-cta-hint{ font-size: 0.85rem; margin-top: 0.5rem; opacity: 0.7; } /* CTA below about-grid: full width centered */ .v2-about-cta{ grid-column: 1 / -1; text-align: center; margin-top: 1.5rem; } /* ═══ Kicker Text ═══ */ .v2-kicker-text{ text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 600; color: var(--v2-text); margin: 0 0 0.5rem; text-align: center; } /* ═══ Values Grid (3 Cards with Icons) ═══ */ .v2-values-header{ text-align: center; margin-bottom: 2.5rem; } .v2-values-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .v2-values-grid--two{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px){ .v2-values-grid--two{ grid-template-columns: 1fr; } } .v2-value-card{ background: var(--v2-surface); border: 1px solid var(--v2-border, rgba(0,0,0,0.08)); border-radius: var(--v2-r); padding: 2rem 1.75rem; transition: transform var(--v2-mid) var(--v2-ease), box-shadow var(--v2-mid) var(--v2-ease); } @media (hover:hover) and (pointer:fine){ .v2-value-card:hover{ transform: translateY(-3px); box-shadow: var(--v2-shadow); } } .v2-value-icon{ width: 52px; height: 52px; border-radius: 14px; background: rgba(93,2,11,0.08); color: var(--v2-accent); display: grid; place-items: center; margin-bottom: 1.25rem; } @media (prefers-color-scheme: dark){ .v2-value-icon{ background: rgba(93,2,11,0.25); } } :root[data-theme="dark"] .v2-value-icon{ background: rgba(93,2,11,0.25); } .v2-value-card h3{ font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--v2-text); } .v2-values-cta{ text-align: center; margin-top: 2.5rem; } @media (max-width: 768px){ .v2-values-grid{ grid-template-columns: 1fr; gap: 16px; } } /* ═══ Expert Section (Fullwidth Background Image) ═══ */ .v2-expert-section{ padding: 0; } .v2-expert-bg{ position: relative; background: #111114; color: #f2f2f2; min-height: 600px; max-height: 85vh; display: flex; align-items: flex-end; overflow: hidden; } @media (max-width: 768px){ .v2-expert-bg{ min-height: 500px; } } /* Blurred background layer — fills the entire width */ .v2-expert-media::before{ content: ""; position: absolute; inset: -60px; background: inherit; background-size: cover; background-position: center 25%; filter: blur(40px) brightness(0.4) saturate(0.6); z-index: 0; transform: scale(1.2); } .v2-expert-media{ position: absolute; inset: 0; z-index: 0; } .v2-expert-img{ position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; max-width: none; object-fit: cover; object-position: center 25%; display: block; z-index: 1; mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); } .v2-expert-overlay{ position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(15,15,17,0.75) 0%, rgba(15,15,17,0.50) 35%, rgba(15,15,17,0.20) 70%, rgba(15,15,17,0.10) 100%), linear-gradient(to bottom, rgba(15,15,17,0.30) 0%, rgba(15,15,17,0.55) 50%, rgba(15,15,17,0.92) 100%); z-index: 2; } .v2-expert-bg > .v2-container{ position: relative; z-index: 3; padding-top: 4rem; padding-bottom: 4rem; } .v2-expert-content{ max-width: 680px; margin: 0 auto; text-align: center; } .v2-expert-content h2, .v2-expert-content p, .v2-expert-content .v2-expert-name strong, .v2-expert-content .v2-expert-name span{ text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); } .v2-muted-light{ color: rgba(255,255,255,0.96); line-height: 1.75; margin: 0 0 0.25rem; text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); } .v2-muted-light strong{ color: #fff; font-weight: 700; } .v2-expert-name{ margin-top: 2.5rem; text-align: center; } .v2-expert-name strong{ display: block; font-size: 1.3rem; color: #fff; text-decoration: underline; text-underline-offset: 4px; } .v2-expert-name span{ display: block; font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-top: 0.25rem; } .v2-spacer-lg{ height: 2rem; } .v2-expert-bg .v2-cta-hint{ color: rgba(255,255,255,0.5); } @media (max-width: 860px){ .v2-expert-bg{ min-height: auto; } .v2-expert-content{ max-width: 100%; } } /* ═══ Links Grid ═══ */ .v2-links-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 680px){ .v2-links-grid{ grid-template-columns: 1fr; } } .v2-link-card{ background: var(--v2-surface); border: 1px solid var(--v2-border, rgba(0,0,0,0.08)); border-radius: var(--v2-r); padding: 2rem 1.75rem; transition: transform var(--v2-mid) var(--v2-ease), box-shadow var(--v2-mid) var(--v2-ease); } @media (hover:hover) and (pointer:fine){ .v2-link-card:hover{ transform: translateY(-3px); box-shadow: var(--v2-shadow); } } .v2-link-card-icon{ width: 48px; height: 48px; border-radius: 12px; background: rgba(93,2,11,0.08); color: var(--v2-accent); display: grid; place-items: center; margin-bottom: 1rem; } @media (prefers-color-scheme: dark){ .v2-link-card-icon{ background: rgba(93,2,11,0.25); } } :root[data-theme="dark"] .v2-link-card-icon{ background: rgba(93,2,11,0.25); } .v2-link-card h2{ font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--v2-text); } .v2-link-card > .v2-muted{ font-size: 0.88rem; margin: 0 0 1.25rem; } .v2-link-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .v2-link-list li a{ display: inline-flex; align-items: center; gap: 6px; color: var(--v2-text); text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 6px 0; border-bottom: 1px solid transparent; transition: color var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease); } .v2-link-list li a:hover{ color: var(--v2-accent); border-bottom-color: var(--v2-accent); } .v2-link-list li a svg{ opacity: 0.4; transition: opacity var(--v2-fast) var(--v2-ease); } .v2-link-list li a:hover svg{ opacity: 1; } .v2-link-empty{ font-size: 0.88rem; color: var(--v2-muted); font-style: italic; margin: 0; opacity: 0.7; } /* ═══ Link Cards (new design) ═══ */ .v2-link-cat-icon{ width: 56px; height: 56px; border-radius: 16px; background: rgba(93,2,11,0.08); color: var(--v2-accent); display: grid; place-items: center; margin: 0 auto 1rem; } @media (prefers-color-scheme: dark){ .v2-link-cat-icon{ background: rgba(93,2,11,0.25); } } :root[data-theme="dark"] .v2-link-cat-icon{ background: rgba(93,2,11,0.25); } .v2-link-cards{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } /* Tighter spacing: header above link cards */ .v2-card .v2-values-header + .v2-link-cards{ margin-top: -0.75rem; } /* Last card centered if it's alone in its row (odd count) */ .v2-link-cards > .v2-link-card-item:last-child:nth-child(odd){ grid-column: 1 / -1; max-width: calc(50% - 9px); justify-self: center; } @media (max-width: 768px){ .v2-link-cards{ grid-template-columns: 1fr; } .v2-link-cards > .v2-link-card-item:last-child:nth-child(odd){ max-width: 100%; } } .v2-link-card-item{ display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 1.5rem; border-radius: var(--v2-r); border: 1px solid var(--v2-border); background: linear-gradient(180deg, color-mix(in srgb, var(--v2-surface) 94%, transparent), color-mix(in srgb, var(--v2-surface) 84%, transparent)); transition: transform var(--v2-mid) var(--v2-ease), box-shadow var(--v2-mid) var(--v2-ease), border-color var(--v2-mid) var(--v2-ease); } @media (hover:hover) and (pointer:fine){ .v2-link-card-item:hover{ transform: translateY(-3px); box-shadow: 0 16px 46px rgba(0,0,0,0.14); border-color: color-mix(in srgb, var(--v2-accent) 30%, var(--v2-border)); } } .v2-link-card-body h3{ font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--v2-text); } .v2-link-card-body .v2-muted{ font-size: 0.9rem; margin: 0; line-height: 1.55; } .v2-link-card-action{ display: flex; } .v2-link-card-action .v2-btn{ font-size: 0.88rem; } .v2-link-card-action .v2-btn svg{ flex: 0 0 auto; } /* ═══ Contact Form ═══ */ .v2-contact-inner{ max-width: 640px; margin: 0 auto; } .v2-contact-form{ margin-top: 2rem; } .v2-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px){ .v2-form-grid{ grid-template-columns: 1fr; } } .v2-form-group{ display: flex; flex-direction: column; gap: 6px; } .v2-form-group--full{ margin-top: 16px; } .v2-form-group label{ font-size: 0.88rem; font-weight: 600; color: var(--v2-text); } .v2-form-group label span{ color: var(--v2-accent); } @media (prefers-color-scheme: dark){ .v2-form-group label span{ color: var(--v2-accent-2, #7a0a16); } } .v2-form-group input, .v2-form-group select, .v2-form-group textarea{ padding: 12px 14px; min-height: 44px; border: 1px solid var(--v2-border, rgba(0,0,0,0.12)); border-radius: 10px; background: var(--v2-surface); color: var(--v2-text); font-family: var(--v2-font); font-size: 16px; /* prevents iOS auto-zoom */ transition: border-color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease); -webkit-appearance: none; appearance: none; } .v2-form-group input::placeholder, .v2-form-group textarea::placeholder{ color: var(--v2-muted); opacity: 0.6; } .v2-form-group input:focus, .v2-form-group select:focus, .v2-form-group textarea:focus{ outline: none; border-color: var(--v2-accent); box-shadow: 0 0 0 3px rgba(93,2,11,0.12); } .v2-form-group select{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%234a4a4a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .v2-form-group textarea{ resize: vertical; min-height: 120px; } .v2-form-footer{ text-align: center; margin-top: 1.5rem; } /* Success / Error states */ .v2-form-success{ display: flex; align-items: flex-start; gap: 14px; padding: 1.25rem; margin-top: 1.5rem; background: rgba(34,153,84,0.08); border: 1px solid rgba(34,153,84,0.25); border-radius: 12px; color: var(--v2-text); } .v2-form-success svg{ color: #22994f; flex: 0 0 auto; margin-top: 2px; } .v2-form-success strong{ display: block; margin-bottom: 4px; } .v2-form-success p{ margin: 0; font-size: 0.92rem; color: var(--v2-muted); } .v2-form-error{ padding: 0.75rem 1rem; margin-top: 1.5rem; margin-bottom: -0.5rem; background: rgba(180,30,30,0.08); border: 1px solid rgba(180,30,30,0.25); border-radius: 10px; text-align: center; } .v2-form-error p{ margin: 0; font-size: 0.9rem; color: var(--v2-accent); font-weight: 500; } @media (prefers-color-scheme: dark){ .v2-form-error p{ color: #c4434f; } } /* ═══ Print Stylesheet ═══ */ /* Larger heading variant */ .v2-heading-xl{ font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 800; letter-spacing: -0.02em; } /* Fonds Finanz partner row */ .v2-fondsfinanz-row{ display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; padding-left: 14px; } .v2-fondsfinanz-logo{ display: flex; justify-content: center; align-items: center; background: #ffffff; border-radius: 18px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); border: 1px solid var(--v2-border); aspect-ratio: 1 / 1; max-width: 200px; } .v2-fondsfinanz-logo img{ max-width: 100%; width: 100%; height: auto; display: block; } .v2-fondsfinanz-content h2{ margin: 0 0 12px; } .v2-fondsfinanz-content p{ margin: 0; } /* Tablet */ @media (max-width: 860px){ .v2-fondsfinanz-row{ grid-template-columns: 160px 1fr; gap: 24px; padding-left: 0; } .v2-fondsfinanz-logo{ padding: 18px; max-width: 160px; } } /* Mobile */ @media (max-width: 640px){ .v2-fondsfinanz-row{ grid-template-columns: 1fr; text-align: center; gap: 20px; justify-items: center; } .v2-fondsfinanz-logo{ max-width: 140px; padding: 16px; } .v2-fondsfinanz-content{ width: 100%; } .v2-fondsfinanz-content .v2-btn{ width: 100%; max-width: 320px; justify-content: center; } } /* ═══ Impressum / Datenschutz: Kacheln-Layout ═══ */ .v2-impr-top{ display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 980px; margin: 0 auto; } .v2-impr-top--four{ grid-template-columns: 1fr; } @media (max-width: 600px){ .v2-impr-top, .v2-impr-top--four{ grid-template-columns: 1fr; } } .v2-impr-content{ padding-left: 14px; max-width: 760px; } .v2-impr-content h2{ font-size: 1.1rem; margin: 0 0 8px; } .v2-impr-content p{ margin: 0 0 14px; color: var(--v2-muted); line-height: 1.65; } .v2-impr-content a{ color: var(--v2-accent); text-decoration: underline; text-underline-offset: 3px; } .v2-mt-14{ margin-top: 28px; } /* ═══ Link Card Visual Header ═══ */ .v2-link-card-visual{ width: 100%; height: 160px; border-radius: var(--v2-r-sm); display: grid; place-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--v2-surface-2) 95%, transparent), color-mix(in srgb, var(--v2-surface) 90%, transparent)); border: 1px solid var(--v2-border); color: var(--v2-accent); flex: 0 0 auto; transition: border-color 260ms var(--v2-ease); } /* Visual contains full SVG scene — no extra pseudo-elements needed */ .v2-link-card-svg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; object-position: center; transition: transform 320ms var(--v2-ease); } /* Partner logos: matches logo file background, contain (not cover) so the full logo is visible */ .v2-link-card-item[data-partner="1"] .v2-link-card-visual{ background: #f5f5f5; } .v2-link-card-item[data-partner="1"] .v2-link-card-svg{ object-fit: contain; padding: 6px; } /* Crop top 12% of Stadion image (900×1600 → effective 900×1408) Wrapper has the cropped aspect ratio; img is absolute-positioned and shifted up so the top 12% sits outside the wrapper and gets clipped. */ .v2-vision-img-wrap:has(.v2-vision-img--crop-top){ position: relative; overflow: hidden; border-radius: var(--v2-r, 18px); aspect-ratio: 900 / 1408; } .v2-vision-img--crop-top{ position: absolute; top: 0; left: 0; width: 100%; height: auto; /* shift image up by 12% of its OWN height → because img height = wrapper height * (1600/1408), we shift by 12% of img height */ transform: translateY(-12%); display: block; } /* Logo zoom: crop whitespace from logo files via transform scale */ .v2-link-card-item[data-partner="1"] .v2-link-card-svg{ transform: scale(1.10); } .v2-link-card-item[data-partner="1"][data-zoom="xl"] .v2-link-card-svg{ transform: scale(1.50); } @media (hover:hover) and (pointer:fine){ .v2-link-card-item[data-partner="1"]:hover .v2-link-card-svg{ transform: scale(1.15); } .v2-link-card-item[data-partner="1"][data-zoom="xl"]:hover .v2-link-card-svg{ transform: scale(1.55); } } @media (hover:hover) and (pointer:fine){ .v2-link-card-item:hover .v2-link-card-visual{ border-color: color-mix(in srgb, var(--v2-accent) 30%, var(--v2-border)); } .v2-link-card-item:hover .v2-link-card-svg{ transform: scale(1.03); } } @media (prefers-color-scheme: dark){ .v2-link-card-visual{ background: linear-gradient(135deg, color-mix(in srgb, var(--v2-surface-2) 92%, transparent), color-mix(in srgb, var(--v2-surface) 86%, transparent)); } .v2-link-card-visual::before{ background: radial-gradient(circle at 15% 25%, rgba(93,2,11,0.18) 0%, transparent 50%), radial-gradient(circle at 85% 75%, rgba(93,2,11,0.10) 0%, transparent 45%), repeating-linear-gradient( 135deg, transparent, transparent 24px, rgba(93,2,11,0.03) 24px, rgba(93,2,11,0.03) 25px ); } .v2-link-card-visual::after{ background: radial-gradient(circle, rgba(93,2,11,0.22) 0%, transparent 70%); } } @media print { *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } body { font-size: 12pt; line-height: 1.5; } .v2-header, .v2-nav, .v2-nav-toggle, .v2-nav-check, .v2-consent, .v2-scroll-hint, .v2-video-sound, .v2-hero-bg-media, .v2-hero-bg-overlay, .v2-footer-social, .v2-btn, .v2-btn-primary, video, iframe { display: none !important; } .v2-container { max-width: 100%; padding: 0; } .v2-card { border: 1px solid #ccc; page-break-inside: avoid; break-inside: avoid; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555 !important; } a[href^="#"]::after, a[href^="javascript"]::after { content: ""; } .v2-footer { border-top: 1px solid #ccc; padding-top: 1rem; } img { max-width: 100% !important; page-break-inside: avoid; } h1, h2, h3 { page-break-after: avoid; } } /* Burger menu logo: link to homepage but no button styling — only on mobile */ @media (max-width: 859px){ .v2-nav a.v2-nav-logo, .v2-nav-check:checked ~ .v2-nav a.v2-nav-logo{ width: auto !important; padding: 0 !important; margin: 0 auto 8px !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; opacity: 1 !important; transform: none !important; animation: none !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; overflow: visible !important; } .v2-nav a.v2-nav-logo:hover, .v2-nav a.v2-nav-logo:focus{ background: transparent !important; box-shadow: none !important; transform: none !important; } .v2-nav a.v2-nav-logo::after{ display: none !important; content: none !important; } } @media (min-width: 860px){ .v2-nav a.v2-nav-logo{display:none !important;} }