/*
Theme Name: Sporttreff-Beuel
Theme URI: https://sport-treff-beuel.de
Author: Maximilian Balkenholl UIX Agentur
Author URI: https://uix-agentur.de
Description: Modernes, SEO-optimiertes WordPress Theme für Sport Treff Beuel - Premium Fitnessstudio in Bonn-Beuel.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sporttreff-beuel
Tags: fitness, gym, one-page, custom-logo, custom-menu
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
*/

/* ==========================================================================
   Google Fonts Import - Roboto fuer bessere iOS Safari Kompatibilitaet
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

   /* ==========================================================================
      Design Tokens - Exakt aus dem Original
      ========================================================================== */
   :root {
       /* Roboto fuer bessere iOS Safari Darstellung */
       --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
       --font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
       
       /* Farben - oklch zu hex konvertiert */
       --background: #f8f9fc;
       --foreground: #1a1f36;
       --card: #ffffff;
       --card-foreground: #1a1f36;
       --primary: #3b5bdb;
       --primary-foreground: #ffffff;
       --secondary: #eef1f6;
       --secondary-foreground: #2d3748;
       --muted: #f1f3f9;
       --muted-foreground: #334155;
       --accent: #4c6ef5;
       --accent-foreground: #ffffff;
       --border: #e2e8f0;
       --input: #f1f5f9;
       --ring: #3b5bdb;
       
       --radius: 0.75rem;
       --radius-lg: 1rem;
       --radius-xl: 1.25rem;
       --radius-2xl: 1.5rem;
       --radius-3xl: 1.75rem;
   }
   
   /* ==========================================================================
      Reset & Base
      ========================================================================== */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html {
       scroll-behavior: smooth;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       overflow-x: hidden;
   }
   
   body {
       font-family: var(--font-sans);
       font-size: 16px;
       line-height: 1.6;
       color: var(--foreground);
       background-color: var(--background);
       font-weight: 500;
       -webkit-font-smoothing: subpixel-antialiased;
       -moz-osx-font-smoothing: auto;
       text-rendering: optimizeLegibility;
       overflow-x: hidden;
       width: 100%;
       max-width: 100vw;
   }
   
   /* iOS Safari Fix: Dickere Schriften global */
   p, span, li, label, a, td, th, div {
       font-weight: 500;
   }
   
   /* Alle muted/secondary Texte mit besserem Kontrast - dunklere Farbe fuer iOS */
   .muted-foreground, 
   [class*="muted"],
   .text-muted,
   .section-description,
   .testimonial-text,
   .faq-answer p,
   .contact-label,
   .pricing-header p,
   .pricing-price-period,
   .trial-form-note,
   .google-rating span,
   .testimonial-role,
   .opening-hours-item .days {
       font-weight: 500 !important;
       color: #334155 !important;
   }
   
   /* Weisse Texte auf dunklem Hintergrund */
   .hero-description,
   .hero-benefits li,
   .hero-form-note,
   .hero-stat-label,
   .trial-content > p,
   .trial-benefits li,
   .pricing-card.popular .pricing-header p,
   .pricing-card.popular .pricing-price-period,
   .pricing-card.popular .pricing-features span {
       font-weight: 600 !important;
   }
   
   img { max-width: 100%; height: auto; display: block; }
   a { color: inherit; text-decoration: none; }
   button { font-family: inherit; cursor: pointer; border: none; background: none; }
   ul, ol { list-style: none; }
   
   h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-heading);
       font-weight: 700;
       line-height: 1.2;
       color: var(--foreground);
       text-wrap: balance;
   }
   
   /* Mobile: Headlines auch dicker */
   @media (max-width: 768px) {
       h1, h2, h3, h4, h5, h6 { font-weight: 700; }
       .section-title { font-weight: 700; }
       .hero-title { font-weight: 700; }
   }
   
   /* ==========================================================================
      Container & Layout
      ========================================================================== */
   .container {
       width: 100%;
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 1rem;
       overflow-x: hidden;
   }
   @media (min-width: 640px) { .container { padding: 0 1.5rem; } }
   @media (min-width: 1024px) { .container { padding: 0 2rem; } }
   
   .section { 
       padding: 5rem 0;
       overflow-x: hidden;
       max-width: 100vw;
   }
   @media (min-width: 1024px) { .section { padding: 8rem 0; } }
   
   /* ==========================================================================
      Buttons - Exakt wie im Original
      ========================================================================== */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       font-family: var(--font-sans);
       font-weight: 600;
       font-size: 0.9375rem;
       padding: 0.625rem 1.25rem;
       border-radius: var(--radius);
       border: 1px solid transparent;
       transition: all 0.2s ease;
       white-space: nowrap;
       text-decoration: none;
   }
   
   .btn-lg { padding: 0.875rem 2rem; font-size: 1rem; height: 3rem; }
   .btn-primary {
       background-color: var(--primary);
       color: var(--primary-foreground);
       box-shadow: 0 10px 40px -10px rgba(59, 91, 219, 0.3);
   }
   .btn-primary:hover { background-color: #2f4fc7; transform: translateY(-1px); }
   
   .btn-outline {
       background-color: transparent;
       border-color: var(--primary);
       color: var(--primary);
   }
   .btn-outline:hover {
       background-color: var(--primary);
       color: var(--primary-foreground);
   }
   
   .btn-white {
       background-color: var(--primary-foreground);
       color: var(--foreground);
   }
   .btn-white:hover { background-color: rgba(255, 255, 255, 0.9); }
   
   /* ==========================================================================
      Form Inputs
      ========================================================================== */
   .form-input {
       width: 100%;
       height: 3rem;
       padding: 0 1rem;
       font-family: var(--font-sans);
       font-size: 1rem;
       font-weight: 600;
       background-color: var(--input);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       transition: all 0.2s ease;
       color: var(--foreground);
   }
   .form-input:focus {
       outline: none;
       border-color: var(--primary);
       box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.1);
   }
   .form-input::placeholder { 
       color: #334155;
       font-weight: 500;
       opacity: 1;
   }
   
   .input-icon { position: relative; }
   .input-icon svg {
       position: absolute;
       left: 1rem;
       top: 50%;
       transform: translateY(-50%);
       width: 1.25rem;
       height: 1.25rem;
       color: var(--muted-foreground);
       pointer-events: none;
   }
   .input-icon .form-input { padding-left: 3rem; }
   
   /* ==========================================================================
      Top Bar - Exakt wie Header.tsx
      ========================================================================== */
   .top-bar {
       background-color: var(--primary);
       color: var(--primary-foreground);
       padding: 0.5rem 0;
       font-size: 0.875rem;
       display: none;
   }
   @media (min-width: 768px) { .top-bar { display: block; } }
   
   .top-bar .container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .top-bar-left { display: flex; align-items: center; gap: 1.5rem; }
   .top-bar-item { display: flex; align-items: center; gap: 0.5rem; }
   .top-bar-item svg { width: 1rem; height: 1rem; }
   
   /* ==========================================================================
      Site Header - Exakt wie Header.tsx
      ========================================================================== */
   .site-header {
       position: sticky;
       top: 0;
       z-index: 9999;
       background-color: var(--card);
       transition: all 0.3s ease;
   }
   
   /* Override overflow hidden for header dropdowns */
   .site-header,
   .site-header .container,
   .site-header .header-inner,
   .site-header .main-nav,
   .site-header .main-nav ul,
   .site-header .main-nav li {
       overflow: visible !important;
   }
   
   /* Main content below header - ensure dropdowns appear above */
   #main-content,
   main {
       position: relative;
       z-index: 1;
   }
   .site-header.scrolled {
       background-color: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(12px);
       box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
   }
   
   .header-inner {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem 0;
       position: relative;
       z-index: 10000;
   }
   
   /* Logo - Exakt wie im Original */
   .site-logo {
       display: flex;
       align-items: center;
       gap: 0.75rem;
   }
   .site-logo:hover .logo-icon { transform: scale(1.05); }
   
   .logo-icon {
       position: relative;
       width: 3rem;
       height: 3rem;
       border-radius: var(--radius-xl);
       background-color: #374151;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 0.2s ease;
   }
   .logo-icon span {
       color: var(--primary-foreground);
       font-weight: 700;
       font-size: 1.25rem;
       font-family: var(--font-sans);
   }
   .logo-icon::after {
       content: '';
       position: absolute;
       bottom: -0.25rem;
       right: -0.25rem;
       width: 1rem;
       height: 1rem;
       background-color: var(--accent);
       border-radius: 50%;
       animation: pulse 2s infinite;
   }
   @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
   }
   
   .logo-text { display: none; }
   @media (min-width: 640px) { .logo-text { display: block; } }
   .logo-text .name {
       font-family: var(--font-heading);
       font-weight: 700;
       font-size: 1.25rem;
       color: var(--foreground);
       letter-spacing: -0.025em;
   }
   .logo-text .subtitle {
       font-size: 0.875rem;
       font-weight: 600;
       color: var(--muted-foreground);
       margin-top: -0.25rem;
   }
   
   /* Custom Logo */
   .custom-logo-link { display: flex; align-items: center; }
   .custom-logo { max-height: 3rem; width: auto; }
   
   /* Desktop Navigation */
   .main-nav { display: none; }
   @media (min-width: 1024px) { .main-nav { display: flex; align-items: center; gap: 2rem; } }
   
   .main-nav > ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
   .main-nav > ul > li { position: relative; z-index: 10000; }
   .main-nav > ul > li > a {
       position: relative;
       font-weight: 600;
       color: var(--foreground);
       transition: color 0.2s ease;
       padding: 0.5rem 0;
       display: block;
   }
   .main-nav > ul > li > a:hover,
   .main-nav > ul > li.current-menu-item > a,
   .main-nav > ul > li.current-menu-ancestor > a { color: var(--primary); }
   
   /* Underline animation for items WITHOUT children */
   .main-nav > ul > li:not(.menu-item-has-children) > a::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 0;
       height: 2px;
       background-color: var(--primary);
       transition: width 0.2s ease;
   }
   .main-nav > ul > li:not(.menu-item-has-children) > a:hover::after,
   .main-nav > ul > li:not(.menu-item-has-children).current-menu-item > a::after { width: 100%; }
   
   /* Dropdown indicator for parent items */
   .main-nav > ul > li.menu-item-has-children > a {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
   }
   .main-nav > ul > li.menu-item-has-children > a::after {
       content: '';
       display: inline-block;
       width: 6px;
       height: 6px;
       border-right: 2px solid currentColor;
       border-bottom: 2px solid currentColor;
       transform: rotate(45deg);
       margin-top: -3px;
       flex-shrink: 0;
       transition: transform 0.2s ease;
   }
   .main-nav > ul > li.menu-item-has-children:hover > a::after {
       transform: rotate(-135deg);
   }
   
   /* Dropdown/Sub-menu Styles */
   .main-nav ul ul,
   .main-nav .sub-menu {
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       min-width: 220px;
       background: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
       padding: 0.75rem 0;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
       z-index: 99999;
       list-style: none;
       display: block;
       margin-top: 0.5rem;
   }
   
   .main-nav > ul > li:hover > ul,
   .main-nav > ul > li:hover > .sub-menu {
       opacity: 1;
       visibility: visible;
   }
   
   .main-nav ul ul li,
   .main-nav .sub-menu li {
       display: block;
   }
   
   .main-nav ul ul a,
   .main-nav .sub-menu a {
       display: block;
       padding: 0.625rem 1.25rem;
       font-weight: 500;
       font-size: 0.9375rem;
       color: var(--foreground);
       transition: background-color 0.2s ease, color 0.2s ease;
       white-space: nowrap;
   }
   
   .main-nav ul ul a:hover,
   .main-nav .sub-menu a:hover,
   .main-nav ul ul .current-menu-item a,
   .main-nav .sub-menu .current-menu-item a {
       background-color: var(--muted);
       color: var(--primary);
   }
   
   /* Remove underline effect from submenu items */
   .main-nav ul ul a::after,
   .main-nav .sub-menu a::after {
       display: none;
   }
   
   /* Header Buttons */
   .header-buttons { display: none; }
   @media (min-width: 1024px) { .header-buttons { display: flex; align-items: center; gap: 1rem; } }
   
   /* Mobile Menu Toggle */
   .mobile-menu-toggle {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 2.5rem;
       height: 2.5rem;
       border-radius: var(--radius);
       transition: background-color 0.2s ease;
   }
   .mobile-menu-toggle:hover { background-color: var(--muted); }
   .mobile-menu-toggle svg { width: 1.5rem; height: 1.5rem; color: var(--foreground); }
   @media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }
   
   /* Mobile Navigation */
   .mobile-nav {
       display: none;
       padding: 1rem 0;
       border-top: 1px solid var(--border);
       overflow: hidden;
       transition: all 0.3s ease;
   }
   .mobile-nav.active { display: block; }
   @media (min-width: 1024px) { .mobile-nav { display: none !important; } }
   
   .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
   .mobile-nav > ul > li > a {
       display: block;
       padding: 0.75rem 1rem;
       font-weight: 600;
       border-radius: var(--radius);
       transition: background-color 0.2s ease;
   }
   .mobile-nav > ul > li > a:hover { background-color: var(--muted); }
   
   /* Mobile Submenu */
   .mobile-nav ul ul,
   .mobile-nav .sub-menu {
       padding-left: 1rem;
       border-left: 2px solid var(--border);
       margin-left: 1rem;
       margin-top: 0.25rem;
       margin-bottom: 0.5rem;
   }
   .mobile-nav ul ul a,
   .mobile-nav .sub-menu a {
       display: block;
       padding: 0.5rem 1rem;
       font-weight: 500;
       font-size: 0.9375rem;
       color: var(--muted-foreground);
       border-radius: var(--radius);
       transition: background-color 0.2s ease, color 0.2s ease;
   }
   .mobile-nav ul ul a:hover,
   .mobile-nav .sub-menu a:hover,
   .mobile-nav ul ul .current-menu-item a,
   .mobile-nav .sub-menu .current-menu-item a {
       background-color: var(--muted);
       color: var(--primary);
   }
   
   .mobile-nav-buttons {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       margin-top: 1rem;
       padding: 0 1rem;
   }
   
   /* ==========================================================================
      Hero Section - Exakt wie Hero.tsx
      ========================================================================== */
   .hero {
       position: relative;
       min-height: 90vh;
       display: flex;
       align-items: center;
       overflow: hidden;
       max-width: 100vw;
       background-color: var(--primary);
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
   }
   
   /* Two Column Grid Layout */
   .hero-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 3rem;
       align-items: center;
       padding: 4rem 0;
   }
   @media (min-width: 1024px) {
       .hero-grid {
           grid-template-columns: 1fr 1fr;
           gap: 4rem;
           padding: 5rem 0;
       }
   }
   
   .hero-content {
       position: relative;
       z-index: 10;
   }
   
   /* Hero Image - Right Column */
   .hero-image {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       position: relative;
       margin-top: 2rem;
   }
   @media (min-width: 1024px) {
       .hero-image {
           margin-top: 0;
       }
   }
   .hero-image img {
       height: auto;
       border-radius: var(--radius-2xl);
       object-fit: cover;
       display: block;
   }
   
   /* Team Quote under Image */
   .hero-team-quote {
       text-align: center;
       margin-top: 1.5rem;
       padding: 0 1rem;
   }
   .hero-team-quote p {
       color: rgba(255, 255, 255, 0.9);
       font-size: 1rem;
       font-weight: 500;
       font-style: italic;
       line-height: 1.6;
       margin: 0;
   }
   .hero-team-quote cite {
       display: block;
       color: rgba(255, 255, 255, 0.7);
       font-size: 0.875rem;
       font-weight: 600;
       font-style: normal;
       margin-top: 0.5rem;
   }
   
   /* Hero Badge */
   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 1rem;
       background-color: rgba(255, 255, 255, 0.15);
       backdrop-filter: blur(8px);
       border: 1px solid rgba(255, 255, 255, 0.3);
       border-radius: 9999px;
       margin-bottom: 1.5rem;
   }
   .hero-badge-dot {
       position: relative;
       width: 0.5rem;
       height: 0.5rem;
   }
   .hero-badge-dot::before {
       content: '';
       position: absolute;
       inset: 0;
       background-color: #34d399;
       border-radius: 50%;
       animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
   }
   .hero-badge-dot::after {
       content: '';
       position: relative;
       display: block;
       width: 0.5rem;
       height: 0.5rem;
       background-color: #34d399;
       border-radius: 50%;
   }
   @keyframes ping {
       75%, 100% { transform: scale(2); opacity: 0; }
   }
   .hero-badge span {
       font-size: 0.875rem;
       font-weight: 600;
       color: var(--primary-foreground);
   }
   
   /* Hero Title */
   .hero-title {
       font-size: 2.25rem;
       font-weight: 700;
       color: var(--primary-foreground);
       line-height: 1.1;
       margin-bottom: 1.5rem;
   }
   @media (min-width: 640px) { .hero-title { font-size: 3rem; } }
   @media (min-width: 1024px) { .hero-title { font-size: 3.75rem; } }
   .hero-title .accent { 
       color: #ffffff;
       opacity: 0.85;
   }
   
   .hero-description {
       font-size: 1.125rem;
       font-weight: 500;
       color: #ffffff;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
       margin-bottom: 2rem;
       line-height: 1.7;
       max-width: 36rem;
   }
   @media (min-width: 640px) { .hero-description { font-size: 1.25rem; } }
   
   /* Hero Benefits List */
   .hero-benefits { margin-bottom: 2.5rem; }
   .hero-benefits li {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       color: #ffffff;
       font-weight: 700;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
       margin-bottom: 0.75rem;
   }
   .hero-benefits svg {
       width: 1.25rem;
       height: 1.25rem;
       color: #ffffff;
       flex-shrink: 0;
   }
   
   /* Hero CTA Form */
   .hero-form-wrapper {
       background-color: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(12px);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: var(--radius-2xl);
       padding: 1.5rem;
   }
   .hero-form-title {
       color: var(--primary-foreground);
       font-weight: 700;
       margin-bottom: 1rem;
   }
   .hero-form {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
   }
   @media (min-width: 640px) { 
       .hero-form { 
           display: grid;
           grid-template-columns: 1fr 1fr auto;
           grid-template-rows: auto auto;
           gap: 0.75rem;
       }
       .hero-form .hero-privacy {
           grid-column: 1 / -1;
           grid-row: 2;
       }
   }
   .hero-form .form-input {
       flex: 1;
       background-color: #ffffff;
       border: 2px solid #e2e8f0;
       color: var(--foreground);
       font-weight: 500;
       height: 3.25rem;
       border-radius: var(--radius);
       padding: 0 1rem;
   }
   .hero-form .form-input::placeholder {
       color: #64748b;
       font-weight: 400;
   }
   .hero-form .btn { height: 3.25rem; padding: 0 1.5rem; white-space: nowrap; }
   .hero-form-note {
       font-size: 0.9375rem;
       font-weight: 700;
       color: #ffffff;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
       margin-top: 0.75rem;
   }
   
   /* Hero Stats */
   .hero-stats {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 2rem;
       margin-top: 2.5rem;
       padding-top: 2.5rem;
       border-top: 1px solid rgba(255, 255, 255, 0.2);
   }
   .hero-stat { text-align: center; }
   .hero-stat-value {
       display: block;
       font-family: var(--font-heading);
       font-size: 1.875rem;
       font-weight: 700;
       color: var(--primary-foreground);
   }
   .hero-stat-label {
       font-size: 0.9375rem;
       font-weight: 700;
       color: #ffffff;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   }
   
   /* DSSV Stat in Hero */
   .hero-stat-dssv {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.5rem;
   }
   .hero-dssv-logo {
       width: 3rem;
       height: 3rem;
       object-fit: contain;
       border-radius: var(--radius);
   }
   
   /* Privacy Checkbox - DSGVO */
   .privacy-checkbox {
       display: flex;
       align-items: flex-start;
       gap: 0.625rem;
       font-size: 0.8125rem;
       line-height: 1.4;
       cursor: pointer;
       margin: 0.75rem 0;
   }
   .privacy-checkbox input[type="checkbox"] {
       width: 1rem;
       height: 1rem;
       margin-top: 0.125rem;
       flex-shrink: 0;
       accent-color: var(--primary);
       cursor: pointer;
   }
   .privacy-checkbox span {
       color: rgba(255, 255, 255, 0.8);
   }
   .privacy-checkbox a {
       color: #ffffff;
       text-decoration: underline;
       font-weight: 500;
   }
   .privacy-checkbox a:hover {
       color: var(--secondary);
   }
   
   /* Privacy checkbox for light backgrounds */
   .trial-form .privacy-checkbox span {
       color: var(--muted-foreground);
   }
   .trial-form .privacy-checkbox a {
       color: var(--primary);
   }
   
   /* Scroll Indicator */
   .scroll-indicator {
       position: absolute;
       bottom: 2rem;
       left: 50%;
       transform: translateX(-50%);
       z-index: 10;
       display: none;
   }
   @media (min-width: 768px) { .scroll-indicator { display: block; } }
   .scroll-indicator-inner {
       width: 2rem;
       height: 3rem;
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-radius: 9999px;
       display: flex;
       justify-content: center;
       padding-top: 0.5rem;
   }
   .scroll-indicator-dot {
       width: 0.25rem;
       height: 0.75rem;
       background-color: rgba(255, 255, 255, 0.6);
       border-radius: 9999px;
       animation: bounce 1.5s infinite;
   }
   @keyframes bounce {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(6px); }
   }
   
   /* ==========================================================================
      Section Header - Wiederverwendbar
      ========================================================================== */
   .section-header {
       text-align: center;
       max-width: 48rem;
       margin: 0 auto 4rem;
   }
   .section-label {
       display: inline-block;
       font-size: 0.875rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       color: var(--primary);
       margin-bottom: 1rem;
   }
   .section-title {
       font-size: 1.875rem;
       margin-bottom: 1.5rem;
   }
   @media (min-width: 640px) { .section-title { font-size: 2.25rem; } }
   @media (min-width: 1024px) { .section-title { font-size: 3rem; } }
   .section-description {
       font-size: 1.125rem;
       font-weight: 500;
       color: var(--muted-foreground);
       line-height: 1.7;
   }
   
   /* ==========================================================================
      Training Areas - Exakt wie TrainingAreas.tsx
      ========================================================================== */
   .training-areas { background-color: var(--card); }
   
   /* Desktop Grid */
   .training-grid-desktop { display: none; }
   @media (min-width: 1024px) {
       .training-grid-desktop {
           display: grid;
           grid-template-columns: 1fr 2fr;
           gap: 2rem;
       }
   }
   
   /* Training Tabs */
   .training-tabs {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   .training-tab {
       width: 100%;
       text-align: left;
       padding: 1.5rem;
       background-color: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius-2xl);
       cursor: pointer;
       transition: all 0.3s ease;
   }
   .training-tab:hover { background-color: var(--muted); }
   .training-tab.active {
       background-color: var(--primary);
       border-color: var(--primary);
       box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 40px -10px rgba(59, 91, 219, 0.3);
   }
   
   .training-tab-inner { display: flex; align-items: center; gap: 1rem; }
   .training-tab-icon {
       width: 3rem;
       height: 3rem;
       border-radius: var(--radius-xl);
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: rgba(59, 91, 219, 0.1);
       transition: background-color 0.3s ease;
   }
   .training-tab.active .training-tab-icon { background-color: rgba(255, 255, 255, 0.2); }
   .training-tab-icon svg { width: 1.5rem; height: 1.5rem; color: var(--primary); }
   .training-tab.active .training-tab-icon svg { color: var(--primary-foreground); }
   
   .training-tab-content h3 { font-size: 1.125rem; transition: color 0.3s ease; }
   .training-tab.active .training-tab-content h3 { color: var(--primary-foreground); }
   
   .training-tab-tags { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
   .training-tab-tag {
       font-size: 0.75rem;
       font-weight: 600;
       padding: 0.125rem 0.5rem;
       background-color: var(--muted);
       color: var(--muted-foreground);
       border-radius: 9999px;
       transition: all 0.3s ease;
   }
   .training-tab.active .training-tab-tag {
       background-color: rgba(255, 255, 255, 0.2);
       color: var(--primary-foreground);
   }
   
   /* Training Detail Panel */
   .training-detail {
       position: relative;
       min-height: 500px;
       border-radius: var(--radius-3xl);
       overflow: hidden;
   }
   .training-detail-image {
       position: absolute;
       inset: 0;
   }
   .training-detail-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.7s ease;
   }
   .training-detail:hover .training-detail-image img { transform: scale(1.05); }
   .training-detail::after {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(26, 31, 54, 0.9) 0%, rgba(26, 31, 54, 0.4) 50%, transparent 100%);
   }
   .training-detail-content {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 2rem;
       z-index: 10;
   }
   @media (min-width: 1024px) { .training-detail-content { padding: 3rem; } }
   .training-detail-content h3 {
       font-size: 1.5rem;
       color: var(--primary-foreground);
       margin-bottom: 1rem;
   }
   @media (min-width: 1024px) { .training-detail-content h3 { font-size: 1.875rem; } }
   .training-detail-content p {
       color: rgba(255, 255, 255, 0.8);
       font-size: 1.125rem;
       margin-bottom: 1.5rem;
       max-width: 32rem;
   }
   .training-detail-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
   .training-detail-tag {
       padding: 0.5rem 1rem;
       background-color: rgba(59, 91, 219, 0.8);
       color: var(--primary-foreground);
       border-radius: 9999px;
       font-size: 0.875rem;
       font-weight: 500;
   }
   
   /* Mobile Training Grid */
   .training-grid-mobile { display: grid; gap: 1.5rem; }
   @media (min-width: 640px) { .training-grid-mobile { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .training-grid-mobile { display: none; } }
   
   .training-card-mobile {
       position: relative;
       height: 20rem;
       border-radius: var(--radius-2xl);
       overflow: hidden;
   }
   .training-card-mobile img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }
   .training-card-mobile:hover img { transform: scale(1.05); }
   .training-card-mobile::after {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(26, 31, 54, 0.9) 0%, rgba(26, 31, 54, 0.2) 100%);
   }
   .training-card-mobile-content {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 1.5rem;
       z-index: 10;
   }
   .training-card-mobile-icon {
       width: 2.5rem;
       height: 2.5rem;
       border-radius: var(--radius);
       background-color: rgba(59, 91, 219, 0.8);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 0.75rem;
   }
   .training-card-mobile-icon svg { width: 1.25rem; height: 1.25rem; color: var(--primary-foreground); }
   .training-card-mobile h3 {
       font-size: 1.25rem;
       color: var(--primary-foreground);
       margin-bottom: 0.5rem;
   }
   .training-card-mobile p {
       font-size: 0.875rem;
       color: rgba(255, 255, 255, 0.7);
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   /* ==========================================================================
      Benefits Section - Exakt wie Benefits.tsx
      ========================================================================== */
   .benefits-section { background-color: rgba(241, 243, 249, 0.5); }
   
   .benefits-grid { display: grid; gap: 1.5rem; }
   @media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
   
   .benefit-card {
       background-color: var(--card);
       padding: 2rem;
       border-radius: var(--radius-2xl);
       border: 1px solid var(--border);
       transition: all 0.3s ease;
   }
   .benefit-card:hover {
       border-color: rgba(59, 91, 219, 0.5);
       box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 0 40px -10px rgba(59, 91, 219, 0.1);
   }
   
   .benefit-icon {
       width: 3.5rem;
       height: 3.5rem;
       border-radius: var(--radius-xl);
       background-color: rgba(59, 91, 219, 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       transition: all 0.3s ease;
   }
   .benefit-card:hover .benefit-icon {
       background-color: var(--primary);
       transform: scale(1.1);
   }
   .benefit-icon svg {
       width: 1.75rem;
       height: 1.75rem;
       color: var(--primary);
       transition: color 0.3s ease;
   }
   .benefit-card:hover .benefit-icon svg { color: var(--primary-foreground); }
   
   .benefit-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
   .benefit-card p { color: var(--muted-foreground); line-height: 1.7; }
   
   /* ==========================================================================
      Pricing Section - Exakt wie Pricing.tsx
      ========================================================================== */
   .pricing-section { background-color: var(--card); }
   
   .pricing-amount { 
       font-family: var(--font-heading);
       font-size: 3rem;
       font-weight: 700;
   }
   .pricing-card.popular .pricing-amount { color: var(--primary-foreground); }
   .pricing-period { font-size: 0.875rem; color: var(--muted-foreground); }
   .pricing-card.popular .pricing-period { color: rgba(255, 255, 255, 0.7); }
   
   .pricing-btn { width: 100%; }
   
   .pricing-note { 
       text-align: center; 
       margin-top: 3rem; 
       color: var(--muted-foreground);
       font-size: 0.875rem;
   }
   
   .pricing-grid { display: grid; gap: 2rem; max-width: 72rem; margin: 0 auto; }
   @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
   
   /* 4-column pricing grid */
   .pricing-grid-4 { max-width: 80rem; }
   @media (min-width: 768px) { .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .pricing-grid-4 { grid-template-columns: repeat(4, 1fr); } }
   .pricing-grid-4 .pricing-card.popular { transform: scale(1); }
   @media (min-width: 1024px) { .pricing-grid-4 .pricing-card.popular { transform: scale(1.02); } }
   
   .pricing-card {
       position: relative;
       padding: 2rem;
       border-radius: var(--radius-3xl);
       background-color: var(--card);
       border: 1px solid var(--border);
       transition: all 0.3s ease;
   }
   .pricing-card:hover {
       border-color: rgba(59, 91, 219, 0.5);
       box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
   }
   .pricing-card.popular {
       background-color: var(--primary);
       border-color: var(--primary);
       transform: scale(1.05);
       box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 10px 40px -10px rgba(59, 91, 219, 0.3);
   }
   
   .pricing-badge {
       position: absolute;
       top: -1rem;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.375rem 1rem;
       background-color: var(--accent);
       color: var(--accent-foreground);
       font-size: 0.875rem;
       font-weight: 600;
       border-radius: 9999px;
   }
   .pricing-badge svg { width: 1rem; height: 1rem; fill: currentColor; }
   
   .pricing-header { text-align: center; margin-bottom: 2rem; }
   .pricing-header h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
   .pricing-card.popular .pricing-header h3 { color: var(--primary-foreground); }
   .pricing-header p { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }
   .pricing-card.popular .pricing-header p { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
   
   .pricing-price { text-align: center; margin-bottom: 2rem; }
   .pricing-price-value {
       font-family: var(--font-heading);
       font-size: 3rem;
       font-weight: 700;
   }
   .pricing-card.popular .pricing-price-value { color: var(--primary-foreground); }
   .pricing-amount-prefix { 
       font-size: 1rem; 
       font-weight: 500; 
       color: var(--muted-foreground);
       margin-right: 0.25rem;
   }
   .pricing-card.popular .pricing-amount-prefix { color: rgba(255, 255, 255, 0.85); }
   .pricing-amount {
       font-family: var(--font-heading);
       font-size: 2.5rem;
       font-weight: 700;
   }
   .pricing-grid-4 .pricing-amount { font-size: 2rem; }
   .pricing-card.popular .pricing-amount { color: var(--primary-foreground); }
   .pricing-price-period { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }
   .pricing-card.popular .pricing-price-period { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
   .pricing-extra {
       font-size: 0.8125rem;
       font-weight: 500;
       color: var(--muted-foreground);
       text-align: center;
       margin-bottom: 1.5rem;
       padding-top: 0.5rem;
       border-top: 1px solid var(--border);
   }
   .pricing-card.popular .pricing-extra { 
       color: rgba(255, 255, 255, 0.85); 
       border-top-color: rgba(255, 255, 255, 0.2);
   }
   
   .pricing-features { margin-bottom: 2rem; }
   .pricing-features li {
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
       margin-bottom: 1rem;
   }
   .pricing-features li:last-child { margin-bottom: 0; }
   
   .pricing-check {
       width: 1.25rem;
       height: 1.25rem;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: rgba(59, 91, 219, 0.1);
       flex-shrink: 0;
       margin-top: 0.125rem;
   }
   .pricing-card.popular .pricing-check { background-color: rgba(255, 255, 255, 0.2); }
   .pricing-check svg { width: 0.75rem; height: 0.75rem; color: var(--primary); }
   .pricing-card.popular .pricing-check svg { color: var(--primary-foreground); }
   
   .pricing-features span { font-size: 0.9375rem; font-weight: 600; color: var(--foreground); }
   .pricing-card.popular .pricing-features span { color: #ffffff !important; font-weight: 600; }
   
   .pricing-card .btn { width: 100%; height: 3rem; }
   .pricing-card.popular .btn-primary {
       background-color: var(--primary-foreground);
       color: var(--foreground);
   }
   .pricing-card.popular .btn-primary:hover { background-color: rgba(255, 255, 255, 0.9); }
   
   .pricing-footer { text-align: center; margin-top: 3rem; color: var(--muted-foreground); }
   
   /* ==========================================================================
      Trial CTA Section - Exakt wie TrialCTA.tsx
      ========================================================================== */
   .trial-section {
       position: relative;
       background-color: var(--primary);
       overflow: hidden;
       max-width: 100vw;
   }
   
   .trial-bg {
       position: absolute;
       inset: 0;
       opacity: 0.1;
       pointer-events: none;
   }
   .trial-bg-circle-1 {
       position: absolute;
       top: 0;
       left: 0;
       width: 24rem;
       height: 24rem;
       background-color: var(--primary-foreground);
       border-radius: 50%;
       filter: blur(80px);
       transform: translate(-50%, -50%);
   }
   .trial-bg-circle-2 {
       position: absolute;
       bottom: 0;
       right: 0;
       width: 24rem;
       height: 24rem;
       background-color: var(--accent);
       border-radius: 50%;
       filter: blur(80px);
       transform: translate(50%, 50%);
   }
   
   .trial-section > .container { position: relative; z-index: 10; }
   
   .trial-grid { display: grid; gap: 3rem; align-items: center; }
   @media (min-width: 1024px) { .trial-grid { grid-template-columns: 1fr 1fr; } }
   
   .trial-content h2 { 
       color: var(--primary-foreground); 
       margin-bottom: 1.5rem;
       font-size: 1.875rem;
   }
   @media (min-width: 1024px) { .trial-content h2 { font-size: 2.5rem; } }
   .trial-content > p {
       color: #ffffff;
       font-size: 1.125rem;
       font-weight: 500;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
       margin-bottom: 2rem;
       line-height: 1.7;
   }
   
   .trial-benefits li {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       color: #ffffff;
       font-weight: 700;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
       margin-bottom: 1rem;
   }
   .trial-benefits svg { width: 1.25rem; height: 1.25rem; color: var(--primary-foreground); flex-shrink: 0; }
   
   /* Trial Form Box */
   .trial-form-box {
       background-color: var(--card);
       border-radius: var(--radius-3xl);
       padding: 2rem;
       box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   }
   .trial-form-box h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
   .trial-form-box > p { color: var(--muted-foreground); font-weight: 500; margin-bottom: 1.5rem; }
   .trial-form { display: flex; flex-direction: column; gap: 1rem; }
   .trial-form .btn { width: 100%; height: 3rem; font-weight: 600; }
   .trial-form-note { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); text-align: center; margin-top: 1rem; }
   
   /* Success Message */
   .trial-success { text-align: center; padding: 2rem 0; }
   .trial-success-icon {
       width: 4rem;
       height: 4rem;
       background-color: rgba(59, 91, 219, 0.1);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 1.5rem;
   }
   .trial-success-icon svg { width: 2rem; height: 2rem; color: var(--primary); }
   .trial-success h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
   .trial-success p { color: var(--muted-foreground); }
   
   /* ==========================================================================
      Testimonials Section - Exakt wie Testimonials.tsx
      ========================================================================== */
   .testimonials-section { background-color: rgba(241, 243, 249, 0.3); }
   
   .testimonials-grid { display: grid; gap: 2rem; }
   @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
   
   .testimonial-card {
       position: relative;
       background-color: var(--card);
       border-radius: var(--radius-2xl);
       padding: 2rem;
       border: 1px solid var(--border);
       transition: all 0.3s ease;
   }
   .testimonial-card:hover {
       box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
       border-color: rgba(59, 91, 219, 0.3);
   }
   
   .testimonial-quote {
       position: absolute;
       top: -0.75rem;
       left: 1.5rem;
       width: 2.5rem;
       height: 2.5rem;
       background-color: var(--primary);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .testimonial-quote svg { width: 1rem; height: 1rem; color: var(--primary-foreground); fill: currentColor; }
   
   .testimonial-stars { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; margin-top: 0.5rem; }
   .testimonial-stars svg { width: 1.25rem; height: 1.25rem; color: var(--accent); fill: currentColor; }
   
   .testimonial-text { color: rgba(26, 31, 54, 0.85); font-weight: 500; line-height: 1.7; margin-bottom: 2rem; }
   
   .testimonial-author { display: flex; align-items: center; gap: 1rem; }
   .testimonial-avatar {
       width: 3rem;
       height: 3rem;
       border-radius: 50%;
       background-color: rgba(59, 91, 219, 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 600; 
       color: var(--primary);
       font-size: 0.875rem;
   }
   .testimonial-info { display: flex; flex-direction: column; }
   .testimonial-name { font-weight: 600; color: var(--foreground); }
   .testimonial-role { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }
   
   /* Trust Badges (Google + DSSV) */
   .trust-badges {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       align-items: flex-end;
       gap: 3rem;
       margin-top: 4rem;
   }
   
   .trust-badge {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.75rem;
   }
   .trust-badge span { 
       font-size: 0.8125rem; 
       font-weight: 500; 
       color: var(--muted-foreground); 
   }
   
   .google-rating-stars { display: flex; gap: 0.25rem; }
   .google-rating-stars svg { width: 1.25rem; height: 1.25rem; color: var(--accent); fill: currentColor; }
   
   .dssv-badge .dssv-logo {
       height: 3.5rem;
       width: auto;
       object-fit: contain;
       border-radius: var(--radius);
   }
   
   /* ==========================================================================
      FAQ Section - Exakt wie FAQ.tsx
      ========================================================================== */
   .faq-section { background-color: rgba(241, 243, 249, 0.3); }
   
   .faq-list { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
   
   .faq-item {
       background-color: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius-2xl);
       overflow: hidden;
       transition: border-color 0.3s ease;
   }
   .faq-item.active { border-color: rgba(59, 91, 219, 0.5); }
   
   .faq-question {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1.5rem;
       text-align: left;
       font-family: var(--font-heading);
       font-weight: 600;
       font-size: 1rem;
       color: var(--foreground);
       cursor: pointer;
       transition: color 0.3s ease;
   }
   .faq-question span { flex: 1; }
   .faq-question:hover { color: var(--primary); }
   .faq-question svg {
       width: 1.25rem;
       height: 1.25rem;
       color: var(--muted-foreground);
       transition: transform 0.3s ease;
       flex-shrink: 0;
       margin-left: 1rem;
   }
   .faq-item.active .faq-question svg { transform: rotate(180deg); }
   
   .faq-answer { 
       max-height: 0; 
       overflow: hidden; 
       transition: max-height 0.3s ease; 
   }
   .faq-item.active .faq-answer { max-height: 500px; }
   .faq-answer p { 
       padding: 0 1.5rem 1.5rem; 
       color: var(--muted-foreground);
       font-weight: 500; 
       line-height: 1.7; 
   }
   
   /* ==========================================================================
      Contact Section - Exakt wie Contact.tsx
      ========================================================================== */
   .contact-section { background-color: var(--card); }
   
   .contact-grid { display: grid; gap: 3rem; align-items: start; }
   @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
   
   .contact-info { display: flex; flex-direction: column; gap: 2rem; }
   
   .contact-card {
       background-color: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius-2xl);
       padding: 2rem;
   }
   .contact-card h3 { font-size: 1.25rem; margin-bottom: 1.5rem; }
   
   .contact-items { display: flex; flex-direction: column; gap: 1.5rem; }
   .contact-item { display: flex; align-items: flex-start; gap: 1rem; }
   .contact-item-icon {
       width: 3rem;
       height: 3rem;
       border-radius: var(--radius-xl);
       background-color: rgba(59, 91, 219, 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }
   .contact-item-icon svg { width: 1.5rem; height: 1.5rem; color: var(--primary); }
   
   .contact-label { 
       display: block;
       font-size: 0.75rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: var(--muted-foreground); 
       margin-bottom: 0.25rem;
   }
   .contact-value { 
       display: block;
       color: var(--foreground);
       font-weight: 600;
   }
   .contact-link { 
       color: var(--primary); 
       font-weight: 500;
   }
   .contact-link:hover { text-decoration: underline; }
   
   /* Opening Hours */
   .opening-hours-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
   .opening-hours-header h3 { margin-bottom: 0; }
   .opening-hours-icon {
       width: 2.5rem;
       height: 2.5rem;
       border-radius: var(--radius);
       background-color: rgba(59, 91, 219, 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .opening-hours-icon svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }
   
   .opening-hours { display: flex; flex-direction: column; }
   .opening-hours-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.75rem 0;
       border-bottom: 1px solid var(--border);
   }
   .opening-hours-item:last-child { border-bottom: none; }
   .opening-hours-item .days { font-weight: 600; }
   .opening-hours-item .hours { font-weight: 700; color: var(--primary); }
   
   .contact-cta-btn { width: 100%; height: 3.5rem; font-size: 1rem; }
   .contact-cta-btn svg { margin-right: 0.5rem; }
   
   /* Map */
   .contact-map {
       height: 500px;
       border-radius: var(--radius-2xl);
       overflow: hidden;
       border: 1px solid var(--border);
   }
   @media (min-width: 1024px) { .contact-map { height: 100%; min-height: 500px; } }
   .contact-map iframe { width: 100%; height: 100%; border: none; }
   
   /* ==========================================================================
      Footer - Exakt wie Footer.tsx
      ========================================================================== */
   .site-footer { background-color: var(--foreground); color: var(--background); }
   
   .footer-main { padding: 4rem 0; }
   
   .footer-grid { display: grid; gap: 3rem; }
   @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; } }
   
   /* Footer Brand */
   .footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
   .footer-brand .logo-icon { background-color: var(--primary); }
   .footer-brand .logo-icon span { color: var(--primary-foreground); }
   .footer-brand-text .name {
       font-family: var(--font-heading);
       font-weight: 700;
       font-size: 1.25rem;
   }
   .footer-brand-text .subtitle {
       font-size: 0.875rem;
       opacity: 0.6;
       margin-top: -0.25rem;
   }
   .footer-description { color: rgba(255, 255, 255, 0.7); line-height: 1.7; margin-bottom: 1.5rem; }
   .footer-logo { max-height: 3rem; width: auto; margin-bottom: 1.5rem; }
   
   /* Social Links */
   .footer-social { display: flex; gap: 1rem; }
   .footer-social a {
       width: 2.5rem;
       height: 2.5rem;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background-color 0.3s ease;
   }
   .footer-social a:hover { background-color: var(--primary); }
   .footer-social svg { width: 1.25rem; height: 1.25rem; }
   
   /* Footer Navigation */
   .footer-nav h4 { font-size: 1.125rem; margin-bottom: 1.5rem; color: var(--background); }
   .footer-nav li { margin-bottom: 0.75rem; }
   .footer-nav a { color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease; }
   .footer-nav a:hover { color: var(--primary); }
   
   /* Footer Contact */
   .footer-contact h4 { font-size: 1.125rem; margin-bottom: 1.5rem; color: var(--background); }
   .footer-contact-list { display: flex; flex-direction: column; gap: 1rem; }
   .footer-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; }
   .footer-contact-item svg {
       width: 1.25rem;
       height: 1.25rem;
       color: var(--primary);
       flex-shrink: 0;
       margin-top: 0.125rem;
   }
   .footer-contact-item span,
   .footer-contact-item a { color: rgba(255, 255, 255, 0.7); }
   .footer-contact-item a:hover { color: var(--primary); }
   
   /* Footer CTA */
   .footer-cta h4 { font-size: 1.125rem; margin-bottom: 1.5rem; color: var(--background); }
   .footer-cta p { color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem; }
   .footer-cta .btn { width: 100%; }
   
   /* Footer Bottom */
   .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem 0; }
   .footer-bottom-inner {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 1rem;
   }
   @media (min-width: 768px) {
       .footer-bottom-inner {
           flex-direction: row;
           justify-content: space-between;
       }
   }
   .footer-copyright { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); }
   .footer-legal { display: flex; gap: 1.5rem; }
   .footer-legal a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease; }
   .footer-legal a:hover { color: var(--primary); }
   
   /* ==========================================================================
      Page & Post Templates
      ========================================================================== */
   .page-header {
       background-color: var(--primary);
       padding: 6rem 0 4rem;
       text-align: center;
       margin-top: -1px;
   }
   .page-header h1 { color: var(--primary-foreground); margin-bottom: 1rem; }
   .page-header p { color: rgba(255, 255, 255, 0.8); font-size: 1.125rem; max-width: 600px; margin: 0 auto; }
   
   .page-content { padding: 4rem 0; }
   .page-content .container { max-width: 800px; }
   .page-content h2 { margin: 2rem 0 1rem; }
   .page-content h3 { margin: 1.5rem 0 0.75rem; }
   .page-content p { margin-bottom: 1rem; color: var(--muted-foreground); line-height: 1.8; }
   .page-content ul, .page-content ol { margin-bottom: 1rem; padding-left: 1.5rem; list-style: disc; }
   .page-content li { margin-bottom: 0.5rem; color: var(--muted-foreground); }
   .page-content a { color: var(--primary); }
   .page-content a:hover { text-decoration: underline; }
   .page-content img { border-radius: var(--radius-lg); margin: 2rem 0; }
   .page-content blockquote {
       border-left: 4px solid var(--primary);
       padding-left: 1.5rem;
       margin: 2rem 0;
       font-style: italic;
       color: var(--muted-foreground);
   }
   
   /* Blog Grid */
   .blog-grid { display: grid; gap: 2rem; }
   @media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
   
   .blog-card {
       background-color: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius-2xl);
       overflow: hidden;
       transition: all 0.3s ease;
   }
   .blog-card:hover {
       box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
       border-color: rgba(59, 91, 219, 0.3);
   }
   .blog-card-image { aspect-ratio: 16 / 10; overflow: hidden; }
   .blog-card-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }
   .blog-card:hover .blog-card-image img { transform: scale(1.05); }
   .blog-card-content { padding: 1.5rem; }
   .blog-card-meta {
       display: flex;
       align-items: center;
       gap: 1rem;
       font-size: 0.875rem;
       color: var(--muted-foreground);
       margin-bottom: 0.75rem;
   }
   .blog-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; transition: color 0.3s ease; }
   .blog-card:hover h3 { color: var(--primary); }
   .blog-card p {
       color: var(--muted-foreground);
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   /* Single Post */
   .single-post { padding: 4rem 0; }
   .single-post .container { max-width: 800px; }
   .single-post-header { margin-bottom: 2rem; }
   .single-post-meta {
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
       font-size: 0.875rem;
       color: var(--muted-foreground);
       margin-bottom: 1rem;
   }
   .single-post-featured { border-radius: var(--radius-2xl); overflow: hidden; margin-bottom: 2rem; }
   .single-post-content { line-height: 1.8; }
   .single-post-content p { margin-bottom: 1.5rem; }
   
   /* Post Navigation */
   .post-navigation {
       display: grid;
       gap: 1rem;
       margin-top: 3rem;
       padding-top: 2rem;
       border-top: 1px solid var(--border);
   }
   @media (min-width: 768px) { .post-navigation { grid-template-columns: 1fr 1fr; } }
   .post-nav-link {
       display: block;
       padding: 1.5rem;
       background-color: var(--muted);
       border-radius: var(--radius);
       transition: background-color 0.3s ease;
   }
   .post-nav-link:hover { background-color: rgba(59, 91, 219, 0.1); }
   .post-nav-link span { display: block; font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 0.25rem; }
   .post-nav-link strong { color: var(--foreground); }
   
   /* ========================================
      HE Row Column Builder - Content Styles
      ======================================== */
   .he-row-column-content {
       line-height: 1.7;
       color: var(--foreground);
   }
   
   /* Row Wrapper Spacing */
   .he-row-wrapper {
       margin-bottom: 2.5rem;
   }
   .he-row-wrapper:last-child {
       margin-bottom: 0;
   }
   
   /* Row Inner - Grid Layout */
   .he-row-inner {
       display: flex;
       flex-wrap: wrap;
       gap: 2rem;
   }
   
   /* Column Wrapper */
   .he-column-wrapper {
       flex: 1;
       min-width: 280px;
   }
   
   /* Responsive: Stack columns on mobile */
   @media (max-width: 768px) {
       .he-row-inner {
           flex-direction: column;
           gap: 1.5rem;
       }
       .he-column-wrapper {
           min-width: 100%;
       }
       .he-row-wrapper {
           margin-bottom: 2rem;
       }
   }
   
   .he-container-output {
       line-height: 1.7;
   }
   
   /* Spacing between containers in same column */
   .he-container-output + .he-container-output {
       margin-top: 1.5rem;
   }
   
   /* Headings - Matching Startseite Typography */
   .he-container-output h1,
   .he-container-output h2,
   .he-container-output h3,
   .he-container-output h4,
   .he-container-output h5,
   .he-container-output h6 {
       font-family: var(--font-heading);
       font-weight: 700;
       line-height: 1.2;
       margin-bottom: 1.5rem;
       color: var(--foreground);
       letter-spacing: -0.02em;
   }
   .he-container-output h1 { 
       font-size: 2rem; 
       font-weight: 800;
   }
   .he-container-output h2 { 
       font-size: 1.75rem;
       font-weight: 700;
       color: var(--primary);
   }
   .he-container-output h3 { 
       font-size: 1.375rem;
       font-weight: 700;
   }
   .he-container-output h4 { font-size: 1.25rem; }
   .he-container-output h5 { font-size: 1.125rem; }
   .he-container-output h6 { font-size: 1rem; }
   
   @media (min-width: 640px) {
       .he-container-output h1 { font-size: 2.5rem; }
       .he-container-output h2 { font-size: 2rem; }
       .he-container-output h3 { font-size: 1.5rem; }
   }
   @media (min-width: 1024px) {
       .he-container-output h1 { font-size: 3rem; }
       .he-container-output h2 { font-size: 2.25rem; }
       .he-container-output h3 { font-size: 1.75rem; }
   }
   
   /* Paragraphs - Better readability */
   .he-container-output p {
       margin-bottom: 1.25rem;
       font-size: 1.0625rem;
       line-height: 1.75;
       color: var(--muted-foreground);
   }
   .he-container-output p:last-child {
       margin-bottom: 0;
   }
   
   /* Lists - Clean and readable */
   .he-container-output ul,
   .he-container-output ol {
       margin-bottom: 1.5rem;
       padding-left: 0;
       list-style-position: inside;
   }
   .he-container-output ul { 
       list-style-type: none !important; 
   }
   .he-container-output ol { 
       list-style-type: decimal !important;
       padding-left: 1.25rem;
   }
   .he-container-output li {
       margin-bottom: 0.75rem;
       padding-left: 0;
       display: list-item !important;
       font-size: 1.0625rem;
       line-height: 1.7;
       color: var(--muted-foreground);
   }
   .he-container-output ul > li {
       position: relative;
       padding-left: 1.5rem;
   }
   .he-container-output ul > li::before {
       content: "";
       position: absolute;
       left: 0;
       top: 0.6em;
       width: 6px;
       height: 6px;
       background-color: var(--primary);
       border-radius: 50%;
   }
   .he-container-output ul ul,
   .he-container-output ol ol,
   .he-container-output ul ol,
   .he-container-output ol ul {
       margin-top: 0.75rem;
       margin-bottom: 0.5rem;
   }
   
   /* Links - Primary color with underline */
   .he-container-output a {
       color: var(--primary);
       text-decoration: none;
       font-weight: 500;
       border-bottom: 1px solid transparent;
       transition: border-color 0.2s ease, color 0.2s ease;
   }
   .he-container-output a:hover {
       color: #2f4fc7;
       border-bottom-color: currentColor;
   }
   
   /* Strong & Emphasis */
   .he-container-output strong,
   .he-container-output b {
       font-weight: 700;
       color: var(--foreground);
   }
   .he-container-output em,
   .he-container-output i {
       font-style: italic;
   }
   
   /* Blockquote */
   .he-container-output blockquote {
       border-left: 4px solid var(--primary);
       padding-left: 1.5rem;
       margin: 1.5rem 0;
       font-style: italic;
       color: var(--muted-foreground);
   }
   
   /* Code */
   .he-container-output code {
       background-color: var(--muted);
       padding: 0.2rem 0.4rem;
       border-radius: 0.25rem;
       font-family: monospace;
       font-size: 0.875em;
   }
   .he-container-output pre {
       background-color: var(--muted);
       padding: 1rem;
       border-radius: var(--radius);
       overflow-x: auto;
       margin-bottom: 1.5rem;
   }
   .he-container-output pre code {
       background: none;
       padding: 0;
   }
   
   /* Tables */
   .he-container-output table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 1.5rem;
   }
   .he-container-output th,
   .he-container-output td {
       padding: 0.75rem 1rem;
       border: 1px solid var(--border);
       text-align: left;
   }
   .he-container-output th {
       background-color: var(--muted);
       font-weight: 600;
   }
   .he-container-output tr:nth-child(even) {
       background-color: rgba(0, 0, 0, 0.02);
   }
   
   /* Images */
   .he-container-output img {
       max-width: 100%;
       height: auto;
       border-radius: var(--radius);
   }
   
   /* Horizontal Rule */
   .he-container-output hr {
       border: none;
       border-top: 1px solid var(--border);
       margin: 2rem 0;
   }
   
   /* 404 Page */
   .error-404 {
       min-height: 60vh;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 4rem 0;
   }
   .error-404-content h1 { font-size: 6rem; color: var(--primary); margin-bottom: 1rem; }
   .error-404-content h2 { margin-bottom: 1rem; }
   .error-404-content p { color: var(--muted-foreground); margin-bottom: 2rem; }
   
   /* Search */
   .search-header { background-color: var(--muted); padding: 3rem 0; text-align: center; }
   .search-form-large { max-width: 600px; margin: 1.5rem auto 0; display: flex; gap: 0.5rem; }
   .search-form-large .form-input { flex: 1; }
   .search-results { padding: 4rem 0; }
   .no-results { text-align: center; padding: 4rem 0; }
   .no-results h2 { margin-bottom: 1rem; }
   .no-results p { color: var(--muted-foreground); }
   
   /* Comments */
   .comments-area { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); }
   .comments-title { margin-bottom: 2rem; }
   .comment {
       padding: 1.5rem;
       background-color: var(--muted);
       border-radius: var(--radius);
       margin-bottom: 1rem;
   }
   .comment-author { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
   .comment-author img { width: 3rem; height: 3rem; border-radius: 50%; }
   .comment-author-name { font-weight: 600; }
   .comment-date { font-size: 0.875rem; color: var(--muted-foreground); }
   .comment-content p { margin-bottom: 0; }
   .comment-reply-link { font-size: 0.875rem; color: var(--primary); margin-top: 0.5rem; display: inline-block; }
   
   .comment-respond { margin-top: 2rem; }
   .comment-reply-title { margin-bottom: 1rem; }
   .comment-form { display: flex; flex-direction: column; gap: 1rem; }
   .comment-form label { display: block; font-weight: 500; margin-bottom: 0.25rem; }
   .comment-form textarea {
       width: 100%;
       min-height: 150px;
       padding: 1rem;
       font-family: var(--font-sans);
       font-size: 0.875rem;
       background-color: var(--input);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       resize: vertical;
   }
   .comment-form textarea:focus {
       outline: none;
       border-color: var(--primary);
       box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.1);
   }
   
   /* Sidebar */
   .sidebar { display: flex; flex-direction: column; gap: 2rem; }
   .widget {
       background-color: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius-2xl);
       padding: 1.5rem;
   }
   .widget-title {
       font-size: 1.125rem;
       margin-bottom: 1rem;
       padding-bottom: 0.75rem;
       border-bottom: 1px solid var(--border);
   }
   .widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
   .widget li:last-child { border-bottom: none; }
   .widget a { color: var(--muted-foreground); transition: color 0.3s ease; }
   .widget a:hover { color: var(--primary); }
   
   /* Pagination */
   .pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 3rem; }
   .pagination a, .pagination span {
       display: flex;
       align-items: center;
       justify-content: center;
       min-width: 2.5rem;
       height: 2.5rem;
       padding: 0 0.75rem;
       background-color: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       font-size: 0.875rem;
       transition: all 0.3s ease;
   }
   .pagination a:hover {
       background-color: var(--primary);
       border-color: var(--primary);
       color: var(--primary-foreground);
   }
   .pagination .current {
       background-color: var(--primary);
       border-color: var(--primary);
       color: var(--primary-foreground);
   }
   
   /* Child Pages Grid (for parent pages like Fitnesstraining) */
   .child-pages-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 2rem;
       margin-top: 3rem;
   }
   
   .child-page-card {
       display: block;
       background: var(--card);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       text-decoration: none;
       color: inherit;
   }
   
   .child-page-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
   }
   
   .child-page-image {
       position: relative;
       height: 220px;
       overflow: hidden;
   }
   
   .child-page-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.4s ease;
   }
   
   .child-page-card:hover .child-page-image img {
       transform: scale(1.08);
   }
   
   .child-page-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
       pointer-events: none;
   }
   
   .child-page-placeholder {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--muted);
       color: var(--muted-foreground);
   }
   
   .child-page-content {
       padding: 1.5rem;
   }
   
   .child-page-content h3 {
       font-size: 1.25rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
       color: var(--foreground);
   }
   
   .child-page-content p {
       font-size: 0.9375rem;
       color: var(--muted-foreground);
       margin-bottom: 1rem;
       line-height: 1.6;
   }
   
   .child-page-link {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       font-weight: 600;
       font-size: 0.9375rem;
       color: var(--primary);
       transition: gap 0.2s ease;
   }
   
   .child-page-card:hover .child-page-link {
       gap: 0.75rem;
   }
   
   @media (max-width: 768px) {
       .child-pages-grid {
           grid-template-columns: 1fr;
           gap: 1.5rem;
       }
       
       .child-page-image {
           height: 180px;
       }
   }
   
   /* Promo Popup */
   .promo-popup {
       position: fixed;
       inset: 0;
       z-index: 99999;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1rem;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease, visibility 0.3s ease;
   }
   .promo-popup.active {
       opacity: 1;
       visibility: visible;
   }
   .promo-popup-overlay {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(4px);
   }
   .promo-popup-content {
       position: relative;
       background: var(--card);
       border-radius: var(--radius-lg);
       box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
       max-width: 520px;
       width: 100%;
       overflow: hidden;
       transform: scale(0.9) translateY(20px);
       transition: transform 0.3s ease;
   }
   .promo-popup.active .promo-popup-content {
       transform: scale(1) translateY(0);
   }
   .promo-popup-close {
       position: absolute;
       top: 1rem;
       right: 1rem;
       z-index: 10;
       width: 2.5rem;
       height: 2.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.9);
       border: none;
       border-radius: 50%;
       cursor: pointer;
       transition: background 0.2s ease, transform 0.2s ease;
       color: var(--foreground);
   }
   .promo-popup-close:hover {
       background: #ffffff;
       transform: scale(1.1);
   }
   .promo-popup-image {
       width: 100%;
       height: 200px;
       overflow: hidden;
       background: var(--primary);
   }
   .promo-popup-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center top;
   }
   .promo-popup-body {
       padding: 2rem;
       text-align: center;
   }
   .promo-popup-badge {
       display: inline-block;
       background: var(--secondary);
       color: var(--secondary-foreground);
       font-size: 0.75rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       padding: 0.375rem 0.875rem;
       border-radius: 9999px;
       margin-bottom: 1rem;
   }
   .promo-popup-body h2 {
       font-size: 1.75rem;
       font-weight: 800;
       margin-bottom: 0.75rem;
       color: var(--foreground);
   }
   .promo-popup-body > p {
       font-size: 1rem;
       color: var(--muted-foreground);
       margin-bottom: 1.5rem;
       line-height: 1.6;
   }
   .promo-popup-cta {
       width: 100%;
       justify-content: center;
   }
   .promo-popup-note {
       font-size: 0.8125rem;
       color: var(--muted-foreground);
       margin-top: 1rem;
       margin-bottom: 0;
   }
   
   @media (max-width: 480px) {
       .promo-popup-content {
           max-width: 100%;
           margin: 0.5rem;
       }
       .promo-popup-image {
           height: 160px;
       }
       .promo-popup-body {
           padding: 1.5rem;
       }
       .promo-popup-body h2 {
           font-size: 1.5rem;
       }
   }
   
   /* Utility */
   .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
   }