/* Theme Name: V2 Theme URI: Author: Author URI: Description: Minimal WordPress theme scaffold (no third-party scripts; adblock-safe naming). Version: 0.3.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); } .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); } /* ========================================================= PAGE / SECTIONS ========================================================= */ .v2-page{ padding: 0; } .v2-section{ padding: 24px 0; } @media (min-width: 860px){ .v2-section{ padding: 34px 0; } } /* ========================================================= BUTTONS ========================================================= */ .v2-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; 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 (Option A) � Card + Backdrop + Sound Button ========================================================= */ /* section paddings */ .v2-top-image{ padding: 0 16px 18px; } @media (min-width: 1200px){ .v2-top-image{ max-width: calc(var(--v2-container) + 32px); margin: 0 auto; } } @media (max-width: 600px){ .v2-top-image{ padding: 0 10px 14px; } } /* Hero shell */ .v2-hero-a .v2-hero-shell{ position: relative; display: grid; place-items: center; padding: 10px 0 0; } /* Backdrop behind the card (same �DNA� as site backdrop, just tighter + stronger) */ .v2-hero-a .v2-hero-backdrop{ position: absolute; inset: -34px -14px -34px -14px; border-radius: 34px; pointer-events: none; z-index: 0; background: var(--v2-backdrop); } .v2-hero-a .v2-hero-backdrop::after{ content:""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 20px 70px rgba(0,0,0,0.45); opacity: 0.9; } /* The card wrapper */ .v2-top-image-wrap{ position: relative; border-radius: var(--v2-r-lg); overflow: hidden; background: color-mix(in srgb, var(--v2-surface) 82%, transparent); box-shadow: 0 14px 40px rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.06); width: 100%; aspect-ratio: 16 / 9; /* desktop default */ } @media (max-width: 768px){ .v2-top-image-wrap{ aspect-ratio: 9 / 16; /* mobile card */ max-height: 72vh; /* not overwhelming */ } } /* Fix �too big� feel on desktop: cap width */ .v2-hero-a .v2-hero-card{ z-index: 1; margin: 0 auto; } @media (min-width: 769px){ .v2-hero-a .v2-hero-card{ width: min(980px, 92vw); } } @media (max-width: 768px){ .v2-hero-a .v2-hero-card{ width: min(360px, 92vw); } } /* subtle inner overlay */ .v2-top-image-wrap::before{ content:""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 70px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.04); } @media (prefers-color-scheme: dark){ .v2-top-image-wrap::before{ box-shadow: inset 0 0 55px rgba(0,0,0,0.34); } } /* video */ .v2-hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 0%; display: block; z-index: 1; } /* Sound button � modern glass, icon-only */ .v2-video-sound{ position: absolute; top: 14px; left: 14px; z-index: 3; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,0.26); background: rgba(0,0,0,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; cursor: pointer; user-select: none; appearance: none; -webkit-appearance: none; outline: none; transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease; } @media (prefers-color-scheme: light){ .v2-video-sound{ background: rgba(255,255,255,0.28); border-color: rgba(20,20,20,0.18); color: rgba(20,20,20,0.92); } } .v2-video-sound:hover{ background: rgba(0,0,0,0.34); border-color: rgba(255,255,255,0.40); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); } @media (prefers-color-scheme: light){ .v2-video-sound:hover{ background: rgba(255,255,255,0.40); border-color: rgba(20,20,20,0.26); box-shadow: 0 10px 24px rgba(0,0,0,0.12); } } .v2-video-sound:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,0.22); } .v2-video-sound:focus-visible{ box-shadow: 0 10px 24px rgba(0,0,0,0.20), 0 0 0 2px rgba(255,255,255,0.18), 0 0 0 6px rgba(93,2,11,0.22); } .v2-video-sound-icon svg{ display: block; } /* show only one icon */ .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; } /* On state � subtle accent */ .v2-video-sound.is-on{ background: rgba(93,2,11,0.28); border-color: rgba(255,255,255,0.42); } @media (prefers-color-scheme: light){ .v2-video-sound.is-on{ background: rgba(93,2,11,0.14); border-color: rgba(93,2,11,0.22); } } /* hover lift for hero card (desktop only) */ @media (hover:hover) and (pointer:fine){ .v2-hero-a .v2-hero-card{ transition: transform 260ms var(--v2-ease), box-shadow 260ms var(--v2-ease); } .v2-hero-a .v2-hero-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 60px rgba(0,0,0,0.38); } } /* ========================================================= 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; padding-left: 14px; /* optische Ausrichtung zur Accent-Leiste */ } /* 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; gap: 10px !important; padding: 18px !important; /* �berschreibt inline */ min-height: 148px !important; text-align: left !important; /* �berschreibt inline center */ 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 */ .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; } .v2-about-grid > :first-child{ align-self: center; } } /* 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; /* geschlossen: sauber gek�rzt */ } /* 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; 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: Header ? Logo ? Navigation (Top ? Bottom) === */ .v2-header { padding: 10px 0; /* deutlich mehr Luft oben/unten */ } @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){ /* Desktop: Logo links, Nav absolut mittig (Logo ignorieren) */ .v2-header-inner{ position: relative; display: flex; align-items: center; } .v2-brand{ position: relative; z-index: 2; } .v2-nav{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 28px; z-index: 1; } /* 2. Logo NUR f�rs Mobile-Overlay � am Desktop immer aus */ .v2-nav-logo{display:none !important;} .v2-nav-toggle{display:none;} } /* === 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; } .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;} @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); } } /* === Mobile: modern toggle without external JS === */ .v2-nav-toggle { display: none; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; 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: 18px; height: 12px; display: grid; gap: 3px; } .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 layout breakpoint aligned with your grid breakpoint */ @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: 18px; 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); } /* Logo nur im offenen Mobile-Men� anzeigen */ .v2-nav-logo{display:none;} .v2-nav-check:checked ~ .v2-nav .v2-nav-logo{ display:block; margin-bottom: 18px; } .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; } /* Open state */ .v2-nav-check:checked ~ .v2-nav { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; } /* Beim �ffnen: Links gestaffelt rein */ .v2-nav-check:checked ~ .v2-nav a { animation: mobileNavIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .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-Button bleibt oben rechts sichtbar */ .v2-nav-toggle{ position: relative; z-index: 10000; } /* Animate burger into X when open */ .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); } } /* 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; -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; } }