/* ===== FORM LAYOUT UTILITIES ===== */
.form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 600px) {
	.form-row-2 {
		grid-template-columns: 1fr;
	}
}

.form-col {
	width: 100%;
}

/* ===== CHECKBOX STYLING ===== */
.label-checkbox-inline {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.label-checkbox-inline input[type="checkbox"] {
	margin-top: 3px;
}

.consent-ki {
	margin-bottom: 18px;
}

/* ===== POPUP FORM OVERRIDES ===== */
#contact-popup .contact-popup-body .form-group label.label-checkbox-inline {
	display: flex !important;
	position: static !important;
	padding-left: 0 !important;
	align-items: flex-start;
	gap: 10px;
}

#contact-popup .contact-popup-body .form-group label.label-checkbox-inline input[type="checkbox"] {
	position: static !important;
	margin: 3px 0 0 0 !important;
	width: auto !important;
	height: auto !important;
}
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent horizontal scrolling on all devices */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Global backdrop-filter support for Safari */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .backdrop-blur {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    
    .backdrop-blur-sm {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
    
    .backdrop-blur-lg {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}

:root {
    --primary-color: #3b82f6; /* Blue */
    --primary-color-dark: #1d4ed8;
    --primary-color-60: rgba(59, 130, 246, 0.6);
    --primary-color-40: rgba(59, 130, 246, 0.4);
    --primary-color-20: rgba(59, 130, 246, 0.2);
    --primary-color-light: #60a5fa;
    --secondary-color: #000000; /* Black */
    --secondary-color-light: #333333;
    --accent-color: #00ffff; /* Cyan accent for futuristic feel */
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --text-dark: #ffffff;
    --text-light: #cccccc;
    --text-primary: #111111;
    --text-white: #ffffff;
    --background-light: #0a0a0a;
    --background-gray: #1a1a1a;
    --background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --background-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --border-color: #333333;
    --shadow-light: 0 1px 3px 0 rgba(59, 130, 246, 0.3);
    --shadow-medium: 0 4px 6px -1px rgba(59, 130, 246, 0.4);
    --shadow-heavy: 0 20px 25px -5px rgba(59, 130, 246, 0.5);
    --shadow-neon: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.4), 0 0 60px rgba(59, 130, 246, 0.2);
    --glow-color: rgba(59, 130, 246, 0.7);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius: 12px;
    --border-radius-lg: 24px;
    --border-radius-xl: 28px;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    
    /* Z-index scale for consistent layering */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    
    /* Blur values for consistent glass effects */
    --blur-light: 10px;
    --blur-medium: 15px;
    --blur-strong: 20px;
    
    /* Shadow system */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Modern Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.8); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes slide-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes neon-flicker {
    0%, 100% { text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color), 0 0 30px var(--accent-color); }
    50% { text-shadow: 0 0 5px var(--accent-color), 0 0 10px var(--accent-color), 0 0 15px var(--accent-color); }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 140px; /* Account for floating navbar */
}

/* Smooth scrolling improvements */
* {
    scroll-behavior: smooth;
}

/* Focus management for accessibility */
*:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Custom scrollbar for better visual feedback */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-dark);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    position: relative;
}

/* Animated background particles */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
    animation: gradient-shift 20s ease infinite;
    background-size: 400% 400%;
    pointer-events: none;
    z-index: -1;
}

body, .info-box, .feature-text, .feature-list, .section-title, .service-card-subpage, .hero-title, .hero-subtitle, .cta-section, .services-overview, .feature-section, .feature-section-alt {
  color: var(--text-primary) !important;
}

.btn, .btn-primary, .btn-secondary {
  color: var(--text-white) !important;
}

/* Glass morphism effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-lg);
}

/* Modern card hover effects */
.modern-card {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: var(--transition-slow);
}

.modern-card:hover::before {
    left: 100%;
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-neon);
    border-color: rgba(59, 130, 246, 0.3);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: 4rem;
    color: var(--text-dark);
    position: relative;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: slide-in-up 1s ease-out;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--accent-purple));
    border-radius: 2px;
    box-shadow: 0 0 20px var(--glow-color);
    animation: pulse-glow 2s ease-in-out infinite;
}

.section-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    z-index: -1;
    border-radius: 50%;
}

.brand-script {
    font-family: 'Zapfino', 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', 'Dancing Script', 'Pacifico', cursive;
    font-weight: 400;
    letter-spacing: 1px;
    margin-right: 0.25em;
}

/* Wende die Marken-Schrift auf sichtbare Markenstellen an */
.company-name {
    font-family: 'Zapfino', 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', 'Dancing Script', 'Pacifico', cursive;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Nur das hervorgehobene "Oh´One" im About-Heading in Script-Schrift, ohne andere Highlights zu beeinflussen */
.about .about-text h3 .highlight {
    font-family: 'Zapfino', 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', 'Dancing Script', 'Pacifico', cursive;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Chatbot Kopfzeile */
.chatbot-header {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.section-title.no-underline::after {
    display: none !important;
}

/* WIR REPARIEREN Überschrift nach links */
#repair-services .section-title {
    text-align: left;
    margin-top: 0;
}

#repair-services .section-title::after {
    left: 0;
    transform: none;
}

/* IT-Schulungen-Sektion: Überschrift in weiß */
#training .section-title {
    color: #fff !important;
    text-align: left;
}

#training .section-title::after {
    left: 0;
    transform: none;
}

/* DATENRETTUNG Überschrift nach links */
#data-recovery .section-title {
    text-align: left;
    color: #fff !important;
}

#data-recovery .section-title::after {
    left: 0;
    transform: none;
}

/* Webdesign-Sektion: Überschrift in weiß */
#web-design .section-title {
    color: #fff !important;
    text-align: left;
}

#web-design .section-title::after {
    left: 0;
    transform: none;
}

/* Modern Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition-slow);
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: white;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, var(--primary-color-light), var(--primary-color));
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dark);
    border: 2px solid var(--primary-color);
    -webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: white;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

/* Animated gradient button */
.btn-gradient {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-purple), var(--accent-pink), var(--primary-color));
    background-size: 400% 400%;
    animation: gradient-shift 3s ease infinite;
    color: white;
    border: none;
}

.btn-gradient:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-neon);
}

/* Neon button effect */
.btn-neon {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    text-shadow: 0 0 10px var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.btn-neon:hover {
    background: var(--accent-color);
    color: var(--secondary-color);
    box-shadow: 0 0 30px var(--accent-color), 0 0 60px var(--accent-color);
    transform: translateY(-3px);
}

/* Modern Navigation */
.navbar {
    position: fixed;
    top: 1.5rem;  /* Mehr Abstand nach oben */
    left: 3rem;  /* Schmaler - mehr seitlicher Abstand */
    right: 3rem;  /* Schmaler - mehr seitlicher Abstand */
    width: calc(100% - 6rem);  /* Schmaler - weniger Breite */
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: var(--z-fixed);
    padding: 0.8rem 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 48px;  /* Rundere Ecken */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    will-change: transform, top, left, right, width, padding;
    transform: translateZ(0); /* Hardware-Beschleunigung */
}

/* Kompakte Navigation beim Runterscrollen */
.navbar.compact {
    top: 0.5rem;
    left: 20%;
    right: 20%;
    width: 60%;
    padding: 0.5rem 1rem;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Erweiterte Navigation beim Hochscrollen */
.navbar.expanded {
    top: 1.5rem;
    left: 3rem;
    right: 3rem;
    width: calc(100% - 6rem);
    padding: 0.8rem 1.5rem;
    border-radius: 48px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Dropdown-erweiterte Navigation - temporär für bessere Lesbarkeit */
.navbar.dropdown-expanded {
    top: 1.5rem !important;
    left: 3rem !important;
    right: 3rem !important;
    width: calc(100% - 6rem) !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 48px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4) !important,
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Logo in dropdown-erweiteter Navigation */
.navbar.dropdown-expanded .logo-image {
    height: 50px !important;
}

/* Navigation Links in dropdown-erweiteter Navigation */
.navbar.dropdown-expanded .nav-link {
    height: 40px !important;
    padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.6rem, 2vw, 1.1rem) !important;
    font-size: clamp(0.75rem, 1.9vw, 0.95rem) !important;
    letter-spacing: 0.8px !important;
}

/* Navigation Menu in dropdown-erweiteter Navigation */
.navbar.dropdown-expanded .nav-menu {
    gap: clamp(0.5rem, 3vw, 2rem) !important;
}

/* Subtiles Farb-Overlay wie im Footer */
/* entferntes Overlay */

.navbar:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Enhanced fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .navbar {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .dropdown-menu {
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .glass-effect {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .modern-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  
  .service-innerbox {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Fallback for older browsers without CSS custom properties */
@supports not (color: var(--primary-color)) {
  .dropdown-menu {
    z-index: 1000;
    border-radius: 12px;
    padding: 1rem;
    margin: 0.5rem 1rem;
  }
  
  .btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  }
  
  .highlight {
    background: linear-gradient(135deg, #3b82f6, #000000);
  }
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Removed nav-hidden functionality - navbar stays visible */

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;  /* Reduziertes Padding für mehr Platz */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kompakte Navigation Container */
.navbar.compact .nav-container {
    padding: 0 10px;
}

/* Logo Anpassungen für kompakte Navigation */
.navbar.compact .logo-image {
    height: 35px;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.expanded .logo-image {
    height: 50px;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.logo-image {
    height: 50px;
    width: auto;
    transition: transform 0.3s ease;
    filter: brightness(1.1) contrast(1.1);
}

.logo:hover .logo-image {
    transform: scale(1.1);
}

.nav-menu {
    display: flex;
    align-items: center;
    /* Responsive gap - adjusts automatically to screen width */
    gap: clamp(0.5rem, 3vw, 2rem);
    transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kompakte Navigation Menu */
.navbar.compact .nav-menu {
    gap: clamp(0.3rem, 2vw, 1rem);
}

.nav-link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 1.2;
    /* Größere Schriftgröße für bessere Lesbarkeit */
    font-size: clamp(0.8rem, 2vw, 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Responsive padding - smaller on smaller screens */
    padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.6rem, 2vw, 1.1rem);
    /* Stärkerer Schatten für bessere Lesbarkeit */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Kompakte Navigation Links */
.navbar.compact .nav-link {
    height: 32px;
    padding: clamp(0.3rem, 0.8vw, 0.4rem) clamp(0.4rem, 1.5vw, 0.8rem);
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
    letter-spacing: 0.5px;
}

.nav-link:hover {
    color: #ffffff;
    text-shadow: 0 0 15px var(--accent-color), 0 1px 3px rgba(0, 0, 0, 0.3);
    background: rgba(59, 130, 246, 0.15);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: var(--transition);
    box-shadow: 0 0 10px var(--accent-color);
}

.nav-link:hover::after {
    width: 80%;
}

.nav-link.active {
    color: var(--accent-color);
    background: rgba(59, 130, 246, 0.15);
}

.nav-link.active::after {
    width: 80%;
}

/* Dropdown Menu */
.nav-item.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    /* Ensure dropdown doesn't break on smaller screens */
    flex-wrap: nowrap;
}

/* Backdrop blur overlay for dropdown */
.dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    pointer-events: none;
}

.dropdown-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    padding: 1rem;
    min-width: 220px;
    z-index: 1001;
    transition: var(--transition);
}

/* Enhanced fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .dropdown-menu {
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}



.dropdown-menu.show {
    display: block;
}

.dropdown-menu:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.dropdown-item {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    padding: 0.8rem 1.1rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-weight: 600;
    margin-bottom: 0.3rem;
    /* Größere Schriftgröße für bessere Lesbarkeit */
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    /* Stärkerer Schatten für bessere Lesbarkeit */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dropdown-item:last-child {
    margin-bottom: 0;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-shadow: 0 0 12px var(--accent-color), 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: translateX(3px);
    box-shadow: 0 3px 12px rgba(255, 255, 255, 0.25);
}

button.nav-toggle {
    display: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    outline: none;
    width: auto;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hamburger Menu Bars */
.nav-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 3px 0;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kompakte Navigation - kleinere Hamburger Bars */
.navbar.compact .nav-toggle .bar {
    width: 20px;
    height: 2px;
    margin: 2px 0;
}

@media (max-width: 768px) {
    button.nav-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        padding: 5px;
    }
    
    /* Mobile Navigation Anpassungen - Breite ändern wie Desktop */
    .navbar {
        left: 2rem;
        right: 2rem;
        width: calc(100% - 4rem);
        top: 1rem;
        padding: 0.8rem 1rem;
    }
    
    .navbar.compact {
        left: 15%;  /* Schmaler wie Desktop */
        right: 15%;
        width: 70%;  /* 70% Breite bei kompakter Ansicht */
        top: 0.5rem;
        padding: 0.5rem 0.8rem;
    }
    
    .navbar.expanded {
        left: 2rem;  /* Volle Breite bei erweiterter Ansicht */
        right: 2rem;
        width: calc(100% - 4rem);
        top: 1rem;
        padding: 0.8rem 1rem;
    }
    
    /* Mobile Menu erweiterte Navigation - für Hamburger-Menü */
    .navbar.mobile-menu-expanded {
        left: 2rem !important;
        right: 2rem !important;
        width: calc(100% - 4rem) !important;
        top: 1rem !important;
        padding: 0.8rem 1rem !important;
    }
    
    /* Kompakte Navigation auf Mobile - Logo und Links kleiner */
    .navbar.compact .logo-image {
        height: 30px;
    }
    
    .navbar.compact .nav-link {
        height: 28px;
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
        letter-spacing: 0.3px;
    }
    
    .navbar.compact .nav-menu {
        gap: 0.3rem;
    }
    
    /* Erweiterte Navigation auf Mobile - normale Größen */
    .navbar.expanded .logo-image,
    .navbar.mobile-menu-expanded .logo-image {
        height: 40px;
    }
    
    .navbar.expanded .nav-link,
    .navbar.mobile-menu-expanded .nav-link {
        height: 36px;
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }
    
    .navbar.expanded .nav-menu,
    .navbar.mobile-menu-expanded .nav-menu {
        gap: 0.8rem;
    }
    
    /* Dropdown-erweiterte Navigation auf Mobile - größere Schrift für Dropdown */
    .navbar.dropdown-expanded {
        left: 2rem !important;
        right: 2rem !important;
        width: calc(100% - 4rem) !important;
        top: 1rem !important;
        padding: 1rem 1.2rem !important;
    }
    
    .navbar.dropdown-expanded .logo-image {
        height: 45px !important;
    }
    
    .navbar.dropdown-expanded .nav-link {
        height: 40px !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
        letter-spacing: 0.6px !important;
    }
    
    .navbar.dropdown-expanded .nav-menu {
        gap: 1rem !important;
    }
    
    /* Dropdown Items auf Mobile größer machen */
    .navbar.dropdown-expanded .dropdown-item {
        font-size: 1rem !important;
        padding: 0.9rem 1.2rem !important;
        line-height: 1.5 !important;
    }
    
    /* Mobile Navigation Container - relative positioning für Dropdown */
    @media (max-width: 768px) {
        .nav-container {
            position: relative;
        }
    }
    
    /* Mobile Menu - versteckt standardmäßig auf Mobile */
    @media (max-width: 768px) {
        .nav-menu {
            display: none;
            position: relative;
        }
        
        .nav-menu.active {
            display: flex;
            position: absolute;
            top: calc(100% + 0.5rem);
            left: -1rem;
            right: -1rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 24px; /* Alle Ecken abgerundet */
            border: 1px solid rgba(255, 255, 255, 0.2);
            flex-direction: column;
            padding: 1rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            z-index: 1000;
        }
        
        /* Mobile Menu Links */
        .nav-menu.active .nav-link {
            width: 100%;
            text-align: center;
            padding: 0.8rem 1rem !important;
            margin-bottom: 0.5rem;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            height: auto !important;
            font-size: 1rem !important; /* Größere Schrift für Mobile */
            letter-spacing: 0.5px !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; /* Schatten für bessere Lesbarkeit */
        }
        
        .nav-menu.active .nav-link:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        
        /* Mobile Menu Dropdown Container */
        .nav-menu.active .nav-item.dropdown {
            width: 100%;
            position: relative;
        }
        
        /* Mobile Menu Dropdown */
        .nav-menu.active .dropdown-menu {
            position: absolute !important;
            display: none;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            top: calc(100% + 0.5rem);
            left: 50%;
            transform: translateX(-50%); /* Perfekte horizontale Zentrierung */
            border-radius: 12px;
            padding: 0.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            width: 280px;
            max-width: calc(100vw - 4rem);
            z-index: 1001;
        }
        
        .nav-menu.active .dropdown-menu.show {
            display: block !important;
        }
        
        .nav-menu.active .dropdown-item {
            padding: 0.8rem 1.2rem !important;
            font-size: 1.1rem !important; /* Noch größere Schrift für Mobile */
            text-align: center;
            border-radius: 8px;
            margin-bottom: 0.4rem;
            display: block;
            width: 100%;
            box-sizing: border-box;
            line-height: 1.4;
            font-weight: 500;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Leichter Schatten für bessere Lesbarkeit */
        }
        
        .nav-menu.active .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .nav-menu.active .dropdown-item:last-child {
            margin-bottom: 0;
        }
    }
}

/* Tablet-spezifische Anpassungen */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet Navigation Anpassungen */
    .navbar {
        left: 2rem;
        right: 2rem;
        width: calc(100% - 4rem);
        padding: 0.7rem 1.2rem;
    }
    
    .navbar.compact {
        left: 15%;
        right: 15%;
        width: 70%;
        padding: 0.5rem 1rem;
    }
    
    .navbar.expanded {
        left: 2rem;
        right: 2rem;
        width: calc(100% - 4rem);
        padding: 0.7rem 1.2rem;
    }
    
    /* Dropdown-erweiterte Navigation auf Tablet */
    .navbar.dropdown-expanded {
        left: 2rem !important;
        right: 2rem !important;
        width: calc(100% - 4rem) !important;
        padding: 0.8rem 1.4rem !important;
    }
    
    .navbar.dropdown-expanded .dropdown-item {
        font-size: 1.05rem !important;
        padding: 0.8rem 1.1rem !important;
    }
}

/* Modern Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: url('IMG/ohone-it-service-schopfheim-hero.jpg') center center/cover no-repeat;
    position: relative;
    overflow: visible;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.8) 0%, rgba(26, 26, 46, 0.6) 50%, rgba(22, 33, 62, 0.8) 100%);
    z-index: 1;
}

/* Animated particles in hero */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.hero-particles::before,
.hero-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    box-shadow: 0 0 10px var(--accent-color);
}

.hero-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: -2s;
}

.hero-particles::after {
    top: 60%;
    right: 15%;
    animation-delay: -4s;
}

/* Kontaktseite Hero mit speziellem Bild */
.contact-hero {
    background: url('IMG/ohone-it-service-kontakt-schopfheim-hero.jpg') center center/cover no-repeat;
}

/* Smooth scrolling für Kontaktseite */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Account for fixed navbar */
}

/* Zusätzliches Padding für Kontaktsektion */
#contact {
    scroll-margin-top: 100px;
}

/* Formular-Einführungstext in weiß */
.form-intro {
    color: #ffffff !important;
    margin-bottom: 1.5rem;
}

/* Überschrift "UNSER STANDORT" in weiß */
.map-section .section-title {
    color: #ffffff !important;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.map-container {
    margin-bottom: 2rem;
}

/* Reparaturseite Hero mit speziellem Bild */
.repair-hero {
    background: url('IMG/ohone-smartphone-tablet-reparatur-detail-schopfheim.jpg') center center/cover no-repeat;
}

/* Datenrettung-Seite Hero mit speziellem Bild */
.data-recovery-hero {
    background: url('IMG/ohone-festplatten-datenrettung-schopfheim.jpg') center center/cover no-repeat;
}

/* IT-Schulung-Seite Hero mit speziellem Bild */
.training-hero {
    background: url('IMG/ohone-it-schulung-schopfheim.jpg') center center/cover no-repeat;
}

/* Webdesign-Seite Hero mit speziellem Bild */
.webdesign-hero {
    background: url('IMG/ohone-webdesign-programmierung-schopfheim.jpg') center center/cover no-repeat;
}

/* Netzwerk-Seite Hero mit speziellem Bild */
.network-hero {
    background: url('IMG/ohone-server-administration-schopfheim.jpg') center center/cover no-repeat;
}

/* KI-Integration-Seite Hero mit speziellem Bild */
.ai-hero {
    background: url('IMG/ohone-ki-technologie-schopfheim.jpg') center center/cover no-repeat;
}

/* Sicherheitssysteme-Seite Hero mit speziellem Bild */
.security-hero {
    background: url('IMG/ohone-it-service-schopfheim-hero.jpg') center center/cover no-repeat;
}

/* Popup-Kontaktformular Styles */
#contact-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

#contact-popup.hidden {
    display: none !important;
}

/* Global hidden class */
.hidden {
    display: none !important;
}

.contact-popup-content {
    background: linear-gradient(135deg, #312e81 0%, #a21caf 100%);
    border-radius: 18px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 40px rgba(49,46,129,0.3);
}

.contact-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    border-radius: 18px 18px 0 0;
}

.contact-popup-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.5rem;
}

.popup-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #ffffff;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

        .contact-popup-body {
            padding: 2rem;
            border-radius: 18px;
            background: linear-gradient(45deg, var(--primary-color), var(--accent-purple), var(--accent-pink), var(--primary-color));
            background-size: 400% 400%;
            animation: gradient-shift 3s ease infinite;
            box-shadow: 0 4px 24px rgba(49,46,129,0.10);
        }
        
        .contact-popup-body .form-intro {
            color: #ffffff !important;
        }
        
        .contact-popup-body .form-group label,
        .contact-popup-body label {
            color: #ffffff !important;
        }
        
        .contact-popup-body .form-group input,
        .contact-popup-body .form-group textarea,
        .contact-popup-body .form-group select {
            background: #000000;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #ffffff;
        }
        
        .contact-popup-body .form-group input::placeholder,
        .contact-popup-body .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        
        .contact-popup-body .form-group input:focus,
        .contact-popup-body .form-group textarea:focus,
        .contact-popup-body .form-group select:focus {
            background: #000000;
            border-color: rgba(255, 255, 255, 0.5);
            color: #ffffff;
        }

.contact-popup-body .form-intro {
    color: #333 !important;
    margin-bottom: 1.5rem;
}

.contact-popup-body .form-group {
    margin-bottom: 1.5rem;
}

.contact-popup-body .form-group label {
    color: #333;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.contact-popup-body .form-group input,
.contact-popup-body .form-group select,
.contact-popup-body .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: #fff;
    color: #333;
}

.contact-popup-body .form-group input:focus,
.contact-popup-body .form-group select:focus,
.contact-popup-body .form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.contact-popup-body .captcha-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-popup-body .captcha-group input {
    flex: 1;
}

.contact-popup-body .captcha-group button {
    white-space: nowrap;
}

/* Captcha error messages should span full width and break to new line */
.contact-popup-body .captcha-group .form-error {
    order: 10;
    flex-basis: 100%;
    margin-top: 8px;
}

.contact-popup-body .form-hint {
    color: #666;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.contact-popup-body .white-text {
    color: #333 !important;
}

.contact-popup-body a {
    color: #3b82f6;
    text-decoration: none;
}

.contact-popup-body a:hover {
    text-decoration: underline;
}

/* Kontaktformular-Popup: Checkbox korrekt positionieren - nur für Datenschutz-Checkbox */
#contact-popup .contact-popup-body .form-group label {
    display: block !important;
    position: relative !important;
    padding-left: 25px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}

#contact-popup .contact-popup-body .form-group label input[name="datenschutz"] {
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

#contact-popup .contact-popup-body .form-group label span,
#contact-popup .contact-popup-body .form-group label a {
    display: inline !important;
    vertical-align: baseline !important;
}

@media (max-width: 768px) {
    .contact-popup-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .contact-popup-header {
        padding: 1rem 1.5rem;
    }
    
    .contact-popup-body {
        padding: 1.5rem;
    }
    
    .contact-popup-body .captcha-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contact-popup-body .captcha-group button {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0.5rem;
        display: block;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 50vh;
        background: url('IMG/ohone-it-service-schopfheim-hero-mobile.jpg') center center/cover no-repeat;
        padding-top: 0.5rem !important; /* Titel noch weiter nach oben */
    }
    
    .contact-hero {
        background: url('IMG/ohone-it-service-kontakt-schopfheim-hero-mobile.jpg') center center/cover no-repeat;
    }
    
    .repair-hero {
        background: url('IMG/ohone-smartphone-tablet-reparatur-detail-schopfheim-mobile.jpg') center center/cover no-repeat;
    }
    
    .data-recovery-hero {
        background: url('IMG/ohone-festplatten-datenrettung-schopfheim-mobile.jpg') center center/cover no-repeat;
    }
    
    .training-hero {
        background: url('IMG/ohone-it-schulung-schopfheim-mobile.jpg') center center/cover no-repeat;
    }
    
    .webdesign-hero {
        background: url('IMG/ohone-webdesign-programmierung-schopfheim-mobile.jpg') center center/cover no-repeat;
    }
    
    .network-hero {
        background: url('IMG/ohone-server-administration-schopfheim-mobile.jpg') center center/cover no-repeat;
    }
    
    .ai-hero {
        background: url('IMG/ohone-ki-technologie-schopfheim-mobile.jpg') center center/cover no-repeat;
    }
    
    .security-hero {
        background: url('IMG/ohone-it-service-schopfheim-hero-mobile.jpg') center center/cover no-repeat;
    }
}

.hero::before {
    content: none;
}

#slideshow-container,
.slideshow-layer {
    display: none !important;
}

/* Hintergrundfarbe hinter den Slideshow-Bildern */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Slideshow Container */
#slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Slideshow Hintergrund für Hero */
.slideshow-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: center center/cover no-repeat;
    opacity: 1;
    pointer-events: none;
    filter: brightness(1.2) contrast(1.15) saturate(1.08);
    transition: opacity 0.2s ease-out;
}

.slideshow-layer.fade-out {
    opacity: 0;
}

/* Mobile Slideshow mit kleineren Bildern */
@media (max-width: 768px) {
    .bg-layer-1,
    .bg-layer-2 {
        background: center center/cover no-repeat;
    }
    
    /* Mobile Hintergrundbild für Netzwerk-Philosophy-Sektion */
    .feature-section-alt .info-box[style*="ohone-netzwerk-verbindung-schopfheim.jpg"] {
        background-image: url('IMG/ohone-netzwerk-verbindung-schopfheim-mobile.jpg') !important;
    }
    
    /* Mobile Hintergrundbild für Webdesign-Philosophy-Sektion */
    .feature-section-alt .info-box[style*="ohone-webprogrammierung-entwicklung-schopfheim.jpg"] {
        background-image: url('IMG/ohone-webprogrammierung-entwicklung-schopfheim-mobile.jpg') !important;
    }
}



@keyframes slideshow {
    0%, 3.33% {
        background: url('IMG/Canvas/1560/0001.jpg') center center/cover no-repeat;
    }
    3.33%, 6.66% {
        background: url('IMG/Canvas/1560/0002.jpg') center center/cover no-repeat;
    }
    6.66%, 10% {
        background: url('IMG/Canvas/1560/0003.jpg') center center/cover no-repeat;
    }
    10%, 13.33% {
        background: url('IMG/Canvas/1560/0004.jpg') center center/cover no-repeat;
    }
    13.33%, 16.66% {
        background: url('IMG/Canvas/1560/0005.jpg') center center/cover no-repeat;
    }
    16.66%, 20% {
        background: url('IMG/Canvas/1560/0006.jpg') center center/cover no-repeat;
    }
    20%, 23.33% {
        background: url('IMG/Canvas/1560/0007.jpg') center center/cover no-repeat;
    }
    23.33%, 26.66% {
        background: url('IMG/Canvas/1560/0008.jpg') center center/cover no-repeat;
    }
    26.66%, 30% {
        background: url('IMG/Canvas/1560/0009.jpg') center center/cover no-repeat;
    }
    30%, 33.33% {
        background: url('IMG/Canvas/1560/0010.jpg') center center/cover no-repeat;
    }
    33.33%, 36.66% {
        background: url('IMG/Canvas/1560/0011.jpg') center center/cover no-repeat;
    }
    36.66%, 40% {
        background: url('IMG/Canvas/1560/0012.jpg') center center/cover no-repeat;
    }
    40%, 43.33% {
        background: url('IMG/Canvas/1560/0013.jpg') center center/cover no-repeat;
    }
    43.33%, 46.66% {
        background: url('IMG/Canvas/1560/0014.jpg') center center/cover no-repeat;
    }
    46.66%, 50% {
        background: url('IMG/Canvas/1560/0015.jpg') center center/cover no-repeat;
    }
    50%, 53.33% {
        background: url('IMG/Canvas/1560/0016.jpg') center center/cover no-repeat;
    }
    53.33%, 56.66% {
        background: url('IMG/Canvas/1560/0017.jpg') center center/cover no-repeat;
    }
    56.66%, 60% {
        background: url('IMG/Canvas/1560/0018.jpg') center center/cover no-repeat;
    }
    60%, 63.33% {
        background: url('IMG/Canvas/1560/0019.jpg') center center/cover no-repeat;
    }
    63.33%, 66.66% {
        background: url('IMG/Canvas/1560/0020.jpg') center center/cover no-repeat;
    }
    66.66%, 70% {
        background: url('IMG/Canvas/1560/0021.jpg') center center/cover no-repeat;
    }
    70%, 73.33% {
        background: url('IMG/Canvas/1560/0022.jpg') center center/cover no-repeat;
    }
    73.33%, 76.66% {
        background: url('IMG/Canvas/1560/0023.jpg') center center/cover no-repeat;
    }
    76.66%, 80% {
        background: url('IMG/Canvas/1560/0024.jpg') center center/cover no-repeat;
    }
    80%, 83.33% {
        background: url('IMG/Canvas/1560/0025.jpg') center center/cover no-repeat;
    }
    83.33%, 86.66% {
        background: url('IMG/Canvas/1560/0026.jpg') center center/cover no-repeat;
    }
    86.66%, 90% {
        background: url('IMG/Canvas/1560/0027.jpg') center center/cover no-repeat;
    }
    90%, 93.33% {
        background: url('IMG/Canvas/1560/0028.jpg') center center/cover no-repeat;
    }
    93.33%, 96.66% {
        background: url('IMG/Canvas/1560/0029.jpg') center center/cover no-repeat;
    }
    96.66%, 100% {
        background: url('IMG/Canvas/1560/0030.jpg') center center/cover no-repeat;
    }
}

/* Mobile Slideshow Animation */
@keyframes slideshow-mobile {
    0%, 3.33% {
        background: url('IMG/Canvas/720/0001.jpg') center center/cover no-repeat;
    }
    3.33%, 6.66% {
        background: url('IMG/Canvas/720/0002.jpg') center center/cover no-repeat;
    }
    6.66%, 10% {
        background: url('IMG/Canvas/720/0003.jpg') center center/cover no-repeat;
    }
    10%, 13.33% {
        background: url('IMG/Canvas/720/0004.jpg') center center/cover no-repeat;
    }
    13.33%, 16.66% {
        background: url('IMG/Canvas/720/0005.jpg') center center/cover no-repeat;
    }
    16.66%, 20% {
        background: url('IMG/Canvas/720/0006.jpg') center center/cover no-repeat;
    }
    20%, 23.33% {
        background: url('IMG/Canvas/720/0007.jpg') center center/cover no-repeat;
    }
    23.33%, 26.66% {
        background: url('IMG/Canvas/720/0008.jpg') center center/cover no-repeat;
    }
    26.66%, 30% {
        background: url('IMG/Canvas/720/0009.jpg') center center/cover no-repeat;
    }
    30%, 33.33% {
        background: url('IMG/Canvas/720/0010.jpg') center center/cover no-repeat;
    }
    33.33%, 36.66% {
        background: url('IMG/Canvas/720/0011.jpg') center center/cover no-repeat;
    }
    36.66%, 40% {
        background: url('IMG/Canvas/720/0012.jpg') center center/cover no-repeat;
    }
    40%, 43.33% {
        background: url('IMG/Canvas/720/0013.jpg') center center/cover no-repeat;
    }
    43.33%, 46.66% {
        background: url('IMG/Canvas/720/0014.jpg') center center/cover no-repeat;
    }
    46.66%, 50% {
        background: url('IMG/Canvas/720/0015.jpg') center center/cover no-repeat;
    }
    50%, 53.33% {
        background: url('IMG/Canvas/720/0016.jpg') center center/cover no-repeat;
    }
    53.33%, 56.66% {
        background: url('IMG/Canvas/720/0017.jpg') center center/cover no-repeat;
    }
    56.66%, 60% {
        background: url('IMG/Canvas/720/0018.jpg') center center/cover no-repeat;
    }
    60%, 63.33% {
        background: url('IMG/Canvas/720/0019.jpg') center center/cover no-repeat;
    }
    63.33%, 66.66% {
        background: url('IMG/Canvas/720/0020.jpg') center center/cover no-repeat;
    }
    66.66%, 70% {
        background: url('IMG/Canvas/720/0021.jpg') center center/cover no-repeat;
    }
    70%, 73.33% {
        background: url('IMG/Canvas/720/0022.jpg') center center/cover no-repeat;
    }
    73.33%, 76.66% {
        background: url('IMG/Canvas/720/0023.jpg') center center/cover no-repeat;
    }
    76.66%, 80% {
        background: url('IMG/Canvas/720/0024.jpg') center center/cover no-repeat;
    }
    80%, 83.33% {
        background: url('IMG/Canvas/720/0025.jpg') center center/cover no-repeat;
    }
    83.33%, 86.66% {
        background: url('IMG/Canvas/720/0026.jpg') center center/cover no-repeat;
    }
    86.66%, 90% {
        background: url('IMG/Canvas/720/0027.jpg') center center/cover no-repeat;
    }
    90%, 93.33% {
        background: url('IMG/Canvas/720/0028.jpg') center center/cover no-repeat;
    }
    93.33%, 96.66% {
        background: url('IMG/Canvas/720/0029.jpg') center center/cover no-repeat;
    }
    96.66%, 100% {
        background: url('IMG/Canvas/720/0030.jpg') center center/cover no-repeat;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
    z-index: 2;
    pointer-events: none;
}

.hero-content,
.hero-visual {
    position: relative;
    z-index: 3;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--hero-padding-top, 8rem) var(--spacing-md) 0 var(--spacing-md);
    position: relative;
    z-index: 3;
}

/* Responsive hero padding */
@media (max-width: 768px) {
    .hero-content {
        --hero-padding-top: 7rem;
    }
}

@media (max-width: 480px) {
    .hero-content {
        --hero-padding-top: 4rem;
    }
}

.hero-title {
    font-size: clamp(3.5rem, 10vw, 7rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px var(--primary-color-60),
        0 0 30px var(--primary-color-40),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: slide-in-up 1s ease-out;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    animation: slide-in-up 1s ease-out 0.2s both;
}

.hero-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: slide-in-up 1s ease-out 0.4s both;
}

/* Glow effect for hero title */
.glow-effect {
    position: relative;
}

.glow-effect::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: blur(15px);
    opacity: 0.7;
}

.phone-part {
    position: absolute;
    background: linear-gradient(135deg, #374151, #6b7280);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}

.phone-screen {
    width: 200px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid #1f2937;
    background: linear-gradient(135deg, #1f2937, #374151);
    position: relative;
}

.phone-screen::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #000;
    border-radius: 4px;
}

.phone-battery {
    width: 100px;
    height: 120px;
    top: 60%;
    left: 30%;
    border: 3px solid #4b5563;
    background: linear-gradient(135deg, #059669, #10b981);
    position: relative;
}

.phone-battery::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: #047857;
    border-radius: 2px;
}

.phone-battery::after {
    content: '🔋';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

.phone-main-camera {
    width: 60px;
    height: 60px;
    top: 35%;
    left: 70%;
    border-radius: 50%;
    border: 3px solid #374151;
    background: linear-gradient(135deg, #1f2937, #4b5563);
    position: relative;
}

.phone-main-camera::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: #000;
    border-radius: 50%;
}

.phone-main-camera::after {
    content: '📷';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
}

.phone-front-camera {
    width: 40px;
    height: 40px;
    top: 25%;
    left: 25%;
    border-radius: 50%;
    border: 2px solid #6b7280;
    background: linear-gradient(135deg, #374151, #6b7280);
    position: relative;
}

.phone-front-camera::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: #000;
    border-radius: 50%;
}

.phone-front-camera::after {
    content: '📱';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
}

.phone-speaker {
    width: 80px;
    height: 40px;
    top: 75%;
    left: 70%;
    border-radius: 20px;
    border: 3px solid #4b5563;
    background: linear-gradient(135deg, #374151, #6b7280);
    position: relative;
}

.phone-speaker::after {
    content: '🔊';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
}

.phone-charger {
    width: 50px;
    height: 80px;
    top: 85%;
    left: 40%;
    border: 3px solid #374151;
    background: linear-gradient(135deg, #1f2937, #4b5563);
    position: relative;
}

.phone-charger::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 15px;
    right: 15px;
    bottom: 10px;
    background: #059669;
    border-radius: 2px;
}

.phone-charger::after {
    content: '🔌';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
}

.phone-antenna {
    width: 30px;
    height: 150px;
    top: 15%;
    left: 15%;
    border: 2px solid #6b7280;
    background: linear-gradient(135deg, #374151, #6b7280);
}

.phone-motherboard {
    width: 140px;
    height: 180px;
    top: 45%;
    left: 10%;
    border: 3px solid #1f2937;
    background: linear-gradient(135deg, #1f2937, #374151);
    position: relative;
}

.phone-motherboard::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: #059669;
    border-radius: 2px;
}

.phone-motherboard::after {
    content: '🔧';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

.hero-content {
    flex: 1;
    max-width: 600px;
    z-index: 3;
    text-align: left;
    margin-left: 50px;
    position: relative;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
}

.highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

/* Hero-Subtitle auf weiß setzen */
.hero-subtitle {
  color: #fff !important;
  font-size: 1.5rem;
  margin-bottom: 3rem;
  text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 0 16px rgba(0,0,0,0.8), 0 0 24px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
}

.hero-buttons {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.hero-visual {
    flex: 1;
    position: relative;
    height: 400px;
    z-index: 3;
}

.floating-elements {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 2rem;
}

.floating-icon {
    position: relative;
    font-size: 2rem;
    animation: float 8s ease-in-out infinite;
    background: linear-gradient(135deg, var(--background-light), var(--background-gray));
    border: 3px solid var(--primary-color);
    border-radius: 15px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px var(--glow-color);
    transition: all 0.3s ease;
    cursor: pointer;
    filter: drop-shadow(0 0 10px var(--primary-color));
}

.floating-icon:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 25px var(--glow-color);
    border-color: var(--accent-color);
    filter: drop-shadow(0 0 20px var(--accent-color));
}

.floating-icon-link {
    position: relative;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.floating-icon-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
    display: block;
    text-decoration: none;
}

/* Floating icon animations with delays - no positioning */
.floating-icon-link:nth-child(1) {
    animation-delay: 0s;
}

.floating-icon-link:nth-child(2) {
    animation-delay: 0.3s;
}

.floating-icon-link:nth-child(3) {
    animation-delay: 0.6s;
}

.floating-icon-link:nth-child(4) {
    animation-delay: 0.9s;
}

.floating-icon-link:nth-child(5) {
    animation-delay: 1.2s;
}

.floating-icon-link:nth-child(6) {
    animation-delay: 1.5s;
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg) scale(1); 
        opacity: 0.8;
    }
    25% { 
        transform: translateY(-15px) rotate(5deg) scale(1.1); 
        opacity: 1;
    }
    50% { 
        transform: translateY(-25px) rotate(0deg) scale(1.2); 
        opacity: 0.9;
    }
    75% { 
        transform: translateY(-15px) rotate(-5deg) scale(1.1); 
        opacity: 1;
    }
}

/* Glow Effect für Hero Title */
.hero-title.glow-effect {
    position: relative;
    color: #ffffff;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 1),
        0 0 20px rgba(59, 130, 246, 0.8),
        0 0 30px rgba(59, 130, 246, 0.6),
        0 0 40px rgba(59, 130, 246, 0.4),
        3px 3px 6px rgba(0, 0, 0, 0.9);
    animation: glow-pulse 3s ease-in-out infinite alternate;
    -webkit-text-stroke: 0.5px rgba(59, 130, 246, 0.3);
}

.hero-title.glow-effect .highlight {
    color: #00ffff;
    text-shadow: 
        0 0 10px rgba(0, 255, 255, 1),
        0 0 20px rgba(0, 255, 255, 0.8),
        0 0 30px rgba(0, 255, 255, 0.6),
        3px 3px 6px rgba(0, 0, 0, 0.9);
    font-weight: 900;
    -webkit-text-stroke: 0.5px rgba(0, 255, 255, 0.3);
}

@keyframes glow-pulse {
    0% {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(59, 130, 246, 0.6),
            0 0 30px rgba(59, 130, 246, 0.4),
            3px 3px 6px rgba(0, 0, 0, 0.9);
    }
    100% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(59, 130, 246, 0.8),
            0 0 45px rgba(59, 130, 246, 0.6),
            3px 3px 6px rgba(0, 0, 0, 0.9);
    }
}





/* Services Section */
.services {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
    position: relative;
    overflow: visible;
}

.services::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Parallax Hintergrund für Services */
.services-parallax-bg {
    position: fixed;
    top: 0;
    left: 50%;
    width: 160vw;
    height: 160vh;
    background: url('services-parallax.jpg') center center/cover no-repeat;
    z-index: 0;
    will-change: auto;
    transition: none;
    transform: translateX(-50%) translateY(0);
    pointer-events: none;
    opacity: 0.18;
    filter: grayscale(0.2) contrast(1.1);
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(255, 0, 255, 0.1), transparent 70%);
    pointer-events: none;
}

.services .container {
    position: relative;
    z-index: 1;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 4rem;
  position: relative;
  z-index: 1;
}
.service-innerbox {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: #fff !important;
  border-radius: var(--border-radius-xl);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  padding: 1.5rem 1.2rem; /* etwas kleiner in der Grunddarstellung */
  margin-bottom: 1.2rem;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: visible;
  transform-style: preserve-3d;
}

.service-innerbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: var(--transition-slow);
}

.service-innerbox:hover::before {
    left: 100%;
}

.service-innerbox:hover {
    transform: translateY(-15px) rotateX(5deg);
    box-shadow: 
        0 25px 50px rgba(59, 130, 246, 0.2),
        0 0 50px rgba(59, 130, 246, 0.1);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    min-width: 220px;
    max-width: 100%;
}
.service-innerbox h3,
.service-innerbox p,
.service-innerbox .service-icon {
  color: #fff !important;
}



.service-card {
    background: var(--background-light);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    text-align: center;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    z-index: -1;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(255, 0, 255, 0.2);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: var(--background-light);
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2.5rem;
    box-shadow: 0 0 15px var(--glow-color);
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    border-color: var(--accent-color);
    box-shadow: 0 0 25px var(--glow-color);
    transform: scale(1.1);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Additional spinner animation for backward compatibility */
@keyframes ohone-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure loading spinner consistency across all implementations */
.spinner,
.loading-spinner .spinner {
    border: 6px solid rgba(251, 191, 36, 0.2) !important;
    border-top: 6px solid #f59e0b !important;
    animation: enhanced-spin 1s linear infinite !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-card p {
    color: var(--text-light);
}

/* About Section (angepasst wie Web-Projekt) */
.about {
    padding: 4rem 0;
    background: linear-gradient(135deg, #312e81 0%, #000000 100%);
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23ff00ff" stroke-width="0.5" stroke-opacity="0.1"/></svg>');
    opacity: 0.05;
    z-index: 1;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.about-image {
    flex: 1;
}

.about-text {
    flex: 1;
}

.about-text h3 {
    color: var(--text-dark);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 3;
}

.about-text h3 .highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
    font-family: 'Zapfino', cursive;
}

/* About Logo Styles */
.about-qualities h3 .about-logo {
    height: 2.5em;
    width: auto;
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: 0.2em;
    filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.3));
    transition: all 0.3s ease;
}

.about-qualities h3 .about-logo:hover {
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.5));
    transform: scale(1.05);
}

/* Responsive Design für About Logo */
@media (max-width: 768px) {
    .about-qualities h3 .about-logo {
        height: 2em;
        margin-bottom: 0.1em;
    }
}

@media (max-width: 480px) {
    .about-qualities h3 .about-logo {
        height: 1.8em;
        margin-bottom: 0.1em;
    }
}

/* ÜBER UNS Überschrift Abstand anpassen */
.about .section-title {
    margin-top: 0;
}

.image-placeholder {
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--secondary-color-light);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-color-dark);
    border: 2px solid var(--primary-color);
    position: relative;
    overflow: hidden;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, var(--primary-color), transparent 30%);
    animation: rotate 4s linear infinite;
}

.image-placeholder::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--secondary-color-light);
    border-radius: 8px;
}

.image-placeholder svg,
.image-placeholder span {
    position: relative;
    z-index: 1;
}

.image-placeholder svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

/* Team Image Styles */
.team-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-medium);
    border: 2px solid var(--primary-color);
    transition: var(--transition);
    filter: brightness(1.1) contrast(1.1);
}

.team-image:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-heavy);
    border-color: var(--accent-color);
    filter: brightness(1.2) contrast(1.2);
}

.qualities {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.quality-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    padding: 0.5rem 0;
}

.quality-icon {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.2rem;
}

.skills {
    margin-top: 30px;
    margin-bottom: 60px;
}

.skill {
    margin-bottom: 20px;
}

.skill-name {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
}

.skill-bar {
    height: 8px;
    background-color: var(--secondary-color);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.skill-level {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 4px;
    position: relative;
}

.skill-level::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@media (max-width: 1024px) {
    .about-content {
        flex-direction: column;
        gap: 2rem;
    }
    .about-image, .about-text {
        width: 100%;
        flex: unset;
    }
}

/* Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: var(--background-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px var(--glow-color);
    border-color: var(--primary-color);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-light);
    font-weight: 500;
}

/* Partners Section */
#partners {
    background: linear-gradient(135deg, var(--background-light) 0%, #064e3b 100%);
    padding: 4rem 0;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.partner-card {
    background: var(--background-light);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-heavy);
    border-color: var(--primary-color);
}

.partner-card h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.partner-card p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.partner-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: var(--secondary-color);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px var(--glow-color);
}

.partner-link:hover {
    background: var(--primary-color-dark);
    transform: translateY(-3px);
    box-shadow: 0 0 20px var(--glow-color);
}

/* Repair Services */
.repair-services {
    padding: 4rem 0;
    background: var(--background-gray);
    position: relative;
    overflow: hidden;
}

/* Hintergrund für Repair Services - wird jetzt über JavaScript erstellt */

.repair-services .container {
    position: relative;
    z-index: 2;
}

.repair-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.repair-category {
    background: var(--background-light);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    border: 2px solid #ff69b4;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    animation: pink-glow-pulse 3s ease-in-out infinite;
}

.repair-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.repair-category:hover::before {
    left: 100%;
}

.repair-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
    border-color: #ff1493;
}

.repair-category h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: var(--transition);
}

.repair-category:hover h3 {
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
    color: var(--primary-color-dark);
}

.repair-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.repair-list li {
    padding: 0.5rem 0;
    color: var(--text-light);
    position: relative;
    padding-left: 1.5rem;
}

.repair-list li::before {
    content: '•';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}

/* Pulsierender Glow-Effekt für Reparatur-Kategorien */
@keyframes pink-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 105, 180, 0.5);
    }
}

.repair-category:hover {
    animation: none;
}

/* Data Recovery */
.data-recovery {
    padding: 4rem 0;
    background: var(--background-light);
    position: relative;
}

.data-recovery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 0, 255, 0.05), rgba(0, 255, 255, 0.05));
    pointer-events: none;
}

.recovery-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.recovery-subtitle {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

/* Recovery Content h3 - gleiche Farbe wie Security */
.recovery-content h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.recovery-list {
    list-style: none;
    margin-bottom: 2rem;
}

.recovery-list li {
    padding: 0.5rem 0;
    color: var(--text-light);
    position: relative;
    padding-left: 1.5rem;
}

.recovery-list li::before {
    content: '✓';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.recovery-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-gray);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px var(--glow-color);
    border-color: var(--primary-color);
}

.feature-icon {
    font-size: 1.5rem;
}

.data-recovery-image {
    width: 400px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
}

.data-recovery-image:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3));
}

.data-recovery-image svg {
    width: 100%;
    height: 100%;
}

/* Web Design */
.web-design {
    padding: 4rem 0;
    background-image: url('IMG/ohone-webdesign-programmierung-schopfheim.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--background-gray);
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.web-design::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.4) 0%, rgba(22, 33, 62, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
}

.web-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    position: relative;
    z-index: 2;
}

.web-card {
    background: var(--background-light);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    text-align: center;
    border: 2px solid #ff69b4;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    animation: pink-glow-pulse 3s ease-in-out infinite;
}

.web-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.web-card:hover::before {
    left: 100%;
}

.web-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
    border-color: #ff1493;
    animation: none;
}

.web-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.web-card h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: var(--transition);
}

.web-card:hover h3 {
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
    color: var(--primary-color-dark);
}

.web-list {
    list-style: none;
    text-align: left;
}

.web-list li {
    padding: 0.5rem 0;
    color: var(--text-light);
    position: relative;
    padding-left: 1.5rem;
}

.web-list li::before {
    content: '→';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}

/* Mobile Web Design Background */
@media (max-width: 768px) {
    .web-design {
        background-image: url('IMG/ohone-webdesign-programmierung-schopfheim-mobile.jpg');
    }
}

/* Training */
.training {
    padding: 4rem 0;
    background-image: url('IMG/ohone-it-schulklasse-kurs-schopfheim.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.training .container {
    position: relative;
    z-index: 2;
}

.training::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.3) 0%, rgba(22, 33, 62, 0.3) 100%);
    pointer-events: none;
    z-index: 1;
}

.training-subtitle {
    text-align: center;
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 3rem;
}

.training-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.training-card {
    background: var(--background-gray);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.training-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.training-card:hover::before {
    left: 100%;
}

.training-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--glow-color);
    border-color: var(--primary-color);
}

.training-card:hover .training-icon {
    filter: drop-shadow(0 0 20px var(--glow-color));
    transform: scale(1.1);
}

.training-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px var(--glow-color));
    transition: all 0.3s ease;
}

.training-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.training-card p {
    color: var(--text-light);
}

/* Mobile Training Background */
@media (max-width: 768px) {
    .training {
        background-image: url('../IMG/ohone-kurs-it-schulklasse-schopfheim.jpg');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/* Training Details Styling */
.training-details {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.training-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--primary-color);
    transition: var(--transition);
}

.training-feature:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateX(5px);
}

.feature-icon {
    font-size: 1.2rem;
    min-width: 1.5rem;
    text-align: center;
    color: var(--primary-color);
    font-weight: bold;
    filter: drop-shadow(0 0 5px var(--glow-color));
}

.feature-text {
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2.5rem 0;
}

.feature-text p:last-of-type {
    margin-bottom: 2.5rem;
}

.feature-list li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.feature-icon {
    color: var(--accent-color);
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
}

.training-description {
    margin-top: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(0, 255, 255, 0.1));
    border-radius: var(--border-radius);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.training-description p {
    color: var(--text-light);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    margin: 0;
}

/* Network */
.network {
    padding: 4rem 0;
    background-image: url('IMG/ohone-netzwerk-verbindung-schopfheim.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--background-gray);
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.network .container {
    position: relative;
    z-index: 2;
}

.network::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.4) 0%, rgba(22, 33, 62, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
}

.network-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.network-services {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.network-service {
    background: var(--background-light);
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.network-service:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px var(--glow-color);
    border-color: var(--primary-color);
}

.network-service h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.network-service ul {
    list-style: none;
}

.network-service li {
    padding: 0.25rem 0;
    color: var(--text-light);
    position: relative;
    padding-left: 1.5rem;
}

.network-service li::before {
    content: '→';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.network-animation {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
}

.network-node {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.network-node:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.network-node:nth-child(2) {
    top: 60%;
    left: 70%;
    animation-delay: 0.5s;
}

.network-node:nth-child(3) {
    top: 40%;
    left: 50%;
    animation-delay: 1s;
}

.network-connection {
    position: absolute;
    height: 2px;
    background: var(--accent-color);
    animation: flow 3s ease-in-out infinite;
}

.network-connection:nth-child(4) {
    top: 30%;
    left: 30%;
    width: 40%;
    transform: rotate(45deg);
}

.network-connection:nth-child(5) {
    top: 50%;
    left: 40%;
    width: 30%;
    transform: rotate(-45deg);
}

.network-connection:nth-child(6) {
    top: 70%;
    left: 50%;
    width: 20%;
    transform: rotate(90deg);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes flow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Mobile Network Background */
@media (max-width: 768px) {
    .network {
        background-image: url('IMG/ohone-netzwerk-verbindung-schopfheim-mobile.jpg');
    }
}

/* Security */
.security {
    padding: 4rem 0;
    background: var(--background-light);
    position: relative;
}

.security::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 0, 255, 0.05), rgba(0, 255, 255, 0.05));
    pointer-events: none;
}

.security-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.security-content h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.security-list {
    list-style: none;
}

.security-list li {
    padding: 0.5rem 0;
    color: var(--text-light);
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.1rem;
}

.security-list li::before {
    content: '🛡️';
    position: absolute;
    left: 0;
}

.security-animation {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
}

.shield {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 120px;
    background: var(--primary-color);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: shield-pulse 3s ease-in-out infinite;
}

.lock {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 50px;
    background: var(--accent-color);
    border-radius: 5px;
    animation: lock-bounce 2s ease-in-out infinite;
}

.lock::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border: 3px solid var(--accent-color);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

@keyframes shield-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes lock-bounce {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-10px); }
}

/* Hours Section */
.hours {
    background: var(--background-gray);
    padding: 4rem 0;
    position: relative;
}

.hours::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 0, 255, 0.05), rgba(0, 255, 255, 0.05));
    pointer-events: none;
}

.hours-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
}

.hours-card {
    background: var(--background-light);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    min-width: 200px;
    border: 2px solid #ff69b4;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    animation: pink-glow-pulse 3s ease-in-out infinite;
}

.hours-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(255, 0, 255, 0.1), transparent 30%);
    animation: rotate 4s linear infinite;
    z-index: 0;
}

.hours-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
    border-color: #ff1493;
    animation: none;
}

.day {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: var(--text-dark);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    transition: var(--transition);
}

.hours-card:hover .day {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    color: var(--text-dark);
}

.time {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: var(--transition);
}

.hours-card:hover .time {
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
    color: var(--primary-color-dark);
}

.hours-note {
    text-align: center;
    font-style: italic;
    max-width: 600px;
    margin: 3rem auto 0 auto;
    color: var(--text-light);
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Google My Business Öffnungszeiten */
.google-hours-container {
    margin-top: 3rem;
}

.google-hours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.google-hours-grid .google-hours-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: none !important;
}

@media (min-width: 769px) {
    .google-hours-grid .google-hours-card:last-child {
        width: auto;
        max-width: 400px !important;
    }
    
    .google-hours-grid .google-hours-card:last-child.today {
        max-width: 450px !important;
        transform: scale(1.05);
    }
}

.google-hours-grid .google-hours-card:last-child .day {
    color: white;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.google-hours-card {
    background: var(--background-light);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    min-width: 200px;
    border: 2px solid #ff69b4;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    animation: pink-glow-pulse 3s ease-in-out infinite;
    transition: var(--transition);
}

.google-hours-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(255, 0, 255, 0.1), transparent 30%);
    animation: rotate 4s linear infinite;
    z-index: 0;
}

.google-hours-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
    border-color: #ff1493;
    animation: none;
}

.google-hours-card .day {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: var(--text-dark);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    transition: var(--transition);
}

.google-hours-card:hover .day {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    color: var(--text-dark);
}

.google-hours-card .time {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: var(--transition);
}

.google-hours-card:hover .time {
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
    color: var(--primary-color-dark);
}

.google-hours-card.today {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    width: 100% !important;
    max-width: none !important;
    transform: scale(1.05);
    padding: 2.2rem;
    z-index: 10;
}

.google-hours-card.today .day {
    color: #10b981;
    text-shadow: 
        0 0 1px rgba(0, 0, 0, 0.8),
        0 0 2px rgba(0, 0, 0, 0.6),
        1px 1px 0px rgba(255, 255, 255, 1),
        2px 2px 0px rgba(255, 255, 255, 0.9),
        3px 3px 0px rgba(255, 255, 255, 0.7),
        4px 4px 0px rgba(255, 255, 255, 0.5),
        5px 5px 15px rgba(16, 185, 129, 0.8),
        0 0 20px rgba(16, 185, 129, 0.6),
        0 0 30px rgba(16, 185, 129, 0.4);
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.google-hours-card.today .time {
    color: var(--primary-color);
    text-shadow: 
        0 0 1px rgba(0, 0, 0, 0.8),
        0 0 2px rgba(0, 0, 0, 0.6),
        1px 1px 0px rgba(255, 255, 255, 1),
        2px 2px 0px rgba(255, 255, 255, 0.9),
        3px 3px 0px rgba(255, 255, 255, 0.7),
        4px 4px 0px rgba(255, 255, 255, 0.5),
        5px 5px 15px rgba(59, 130, 246, 0.8),
        0 0 20px rgba(59, 130, 246, 0.6),
        0 0 30px rgba(59, 130, 246, 0.4);
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.google-hours-header {
    margin-bottom: 1.5rem;
}

.google-hours-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    animation: pulse 2s ease-in-out infinite;
}

.google-hours-header h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.google-hours-header p {
    color: var(--text-light);
    font-size: 0.8rem;
}

.current-status {
    margin-bottom: 1rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--background-gray);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b7280;
    animation: pulse 2s ease-in-out infinite;
}

.status-dot.open {
    background: #10b981;
}

.status-dot.closed {
    background: #ef4444;
}

.status-text {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.google-hours-list {
    margin-bottom: 1.5rem;
    min-height: 100px;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 6px solid rgba(251, 191, 36, 0.2);
    border-top: 6px solid #f59e0b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner p {
    color: var(--text-light);
    font-size: 0.8rem;
}

.google-hours-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    background: var(--background-gray);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.google-hours-day:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.google-hours-day.today {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.day-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.day-hours {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
}

.day-hours.closed {
    color: #ef4444;
}

.google-hours-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.google-hours-footer .btn {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

/* Google Status Container */
.google-status-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.google-status-card {
    background: var(--background-light);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    border: 2px solid #ff69b4;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    animation: pink-glow-pulse 3s ease-in-out infinite;
    transition: var(--transition);
    min-width: 300px;
}

.google-status-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(255, 0, 255, 0.1), transparent 30%);
    animation: rotate 4s linear infinite;
    z-index: 0;
}

.status-header {
    margin-bottom: 1.5rem;
}

.status-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    animation: pulse 2s ease-in-out infinite;
}

.status-header h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.google-status-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
    border-color: #ff1493;
    animation: none;
}

.google-status-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.google-status-footer .btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
}

/* Google Holidays Card */
.google-holidays-card {
    background: var(--background-light);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    border: 2px solid #ff69b4;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    animation: pink-glow-pulse 3s ease-in-out infinite;
    transition: var(--transition);
    min-width: 300px;
}

.google-holidays-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(255, 0, 255, 0.1), transparent 30%);
    animation: rotate 4s linear infinite;
    z-index: 0;
}

.google-holidays-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
    border-color: #ff1493;
    animation: none;
}

.holidays-header {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.holidays-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    animation: pulse 2s ease-in-out infinite;
}

/* Benutzerdefiniertes Warnsymbol */
.custom-warning-triangle {
    position: relative;
    width: 40px;
    height: 40px;
    background: #ffeb3b; /* Gelb */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border: 4px solid #d32f2f; /* Kräftigerer roter Rand */
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.6); /* Roter Schatten für bessere Sichtbarkeit */
}

.exclamation-mark {
    color: #d32f2f; /* Kräftigeres rotes Ausrufezeichen */
    font-weight: 900; /* Extra bold für bessere Sichtbarkeit */
    font-size: 22px;
    line-height: 1;
    margin-top: -2px; /* Leicht nach oben verschieben für bessere Zentrierung */
    text-shadow: 0 0 4px rgba(211, 47, 47, 0.8); /* Roter Schatten für bessere Sichtbarkeit */
}

.holidays-header h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.holidays-list {
    margin-bottom: 1rem;
    min-height: 60px;
    position: relative;
    z-index: 1;
}

.holiday-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    background: var(--background-gray);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.holiday-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.holiday-date {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.holiday-name {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
}

.holiday-status {
    color: #ef4444;
    font-weight: 600;
    font-size: 0.8rem;
}

.holiday-status.open {
    color: #10b981;
}

.holiday-status.closed {
    color: #ef4444;
}

.holiday-item.today {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

.holiday-item.past {
    opacity: 0.6;
    filter: grayscale(0.5);
}

.holiday-item.past .holiday-status {
    color: #6b7280;
}

.holidays-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
    position: relative;
    z-index: 1;
}

.holidays-note {
    color: var(--text-light);
    font-size: 0.8rem;
    font-style: italic;
}

/* Responsive Design für Google Hours */
@media (max-width: 1024px) {
    .google-hours-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .google-hours-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .google-hours-card {
        min-width: auto;
    }
    
    .google-hours-grid .google-hours-card:last-child {
        grid-column: 1;
        max-width: none;
    }
    
    .google-status-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .google-status-card,
    .google-holidays-card {
        padding: 1.5rem;
        min-width: auto;
        width: 100%;
        max-width: 400px;
    }
    
    .google-status-footer .btn {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Contact */
.contact {
    padding: 5rem 0;
    background: var(--background-light);
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.05), rgba(255, 0, 255, 0.05));
    pointer-events: none;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--background-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.contact-item > a {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

.contact-item > a:hover, .contact-item > a:focus {
    background: rgba(59,130,246,0.08);
    border-radius: var(--border-radius-lg);
}

.contact-item .contact-icon,
.contact-item .contact-details {
    position: static;
    z-index: auto;
}

.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.contact-details h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.contact-details p {
    color: var(--text-light);
    line-height: 1.5;
}

.contact-details a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.contact-details a:hover {
    color: var(--secondary-color);
}

.contact-action {
    background: var(--background-gray);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: var(--transition);
}

.contact-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px var(--glow-color);
    border-color: var(--primary-color);
}

.contact-action h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.contact-action p {
    color: var(--text-light);
    margin-bottom: 2rem;
}

.contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-buttons .btn-icon {
    font-size: 2rem;
    margin-right: 0.5rem;
}

/* Footer */
.footer {
    background: var(--secondary-color);
    color: var(--text-dark);
    padding: 3rem 0 1rem;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
    pointer-events: none;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.footer-section h3.company-name {
    font-family: 'Zapfino', cursive;
}

.footer-section .company-logo {
    height: 32px;
    width: auto;
    display: block;
    margin-bottom: 10px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #9ca3af;
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: white;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-decoration: none;
    transition: var(--transition);
    color: var(--text-light);
}

.social-links a:hover {
    transform: translateY(-3px) scale(1.1);
    filter: drop-shadow(0 0 10px var(--glow-color));
}

.social-icon {
    width: 100%;
    height: 100%;
    transition: var(--transition);
}

.social-icon svg {
    width: 100%;
    height: 100%;
    transition: var(--transition);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #374151;
    color: #9ca3af;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    box-shadow: 0 0 15px var(--glow-color);
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-sticky);
    will-change: transform;
    transform: translateZ(0); /* Hardware-Beschleunigung */
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--primary-color-dark);
    transform: translateY(-3px);
    box-shadow: 0 0 25px var(--glow-color);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .container {
        max-width: 95%;
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .repair-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .web-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .training-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .floating-elements {
        gap: 1.5rem;
    }
    
    .floating-icon {
        font-size: 2rem;
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    .navbar {
        top: 1rem;  /* Mehr Abstand nach oben für mobile */
        left: 2rem;  /* Schmaler - mehr Abstand für mobile */
        right: 2rem;  /* Schmaler - mehr Abstand für mobile */
        width: calc(100% - 4rem);  /* Schmaler - optimierte Breite */
        border-radius: 48px;  /* Rundere Ecken für mobile */
        padding: 0.6rem 1rem; /* Reduziertes Padding für mehr Platz */
    }
    
    .nav-menu {
        position: fixed;
        left: 1.5rem;
        right: 1.5rem;
        top: 5.5rem;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.25);
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        width: auto; /* Let left/right handle width */
        margin: 0;
        text-align: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        max-width: calc(100vw - 3rem);
        overflow: visible; /* Allow dropdown to extend outside menu */
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 
            0 12px 40px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 0 20px rgba(255, 255, 255, 0.15);
        padding: 2rem 0;
        z-index: 999;
        /* Hidden state */
        transform: translateY(-1rem);
        opacity: 0;
        visibility: hidden;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    /* Mobile dropdown positioning - override desktop styles */
    .nav-item.dropdown {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: var(--z-dropdown);
    }
    
    .nav-item.dropdown .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        min-height: 44px; /* Touch target accessibility */
    }
    
    .dropdown-menu {
        /* Overlay positioning for mobile */
        position: absolute;
        top: calc(100% + 0.25rem);  /* Minimaler Abstand nach oben */
        left: 50%;
        /* Initial centered state - will be maintained by animation */
        transform: translateX(-50%);
        
        /* Mobile-specific styles */
        display: none;
        background: rgba(255, 255, 255, 0.25);
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        margin: 0;  /* Kein zusätzlicher Margin */
        min-width: auto;
        width: calc(100vw - 1rem);  /* Breiter für größeres Design */
        max-width: 420px;  /* 50% größere maximale Breite */
        border-radius: var(--border-radius-lg);
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        padding: 1.5rem;  /* 50% größeres Padding */
        
        /* Use higher z-index to ensure dropdown is above other nav items */
        z-index: var(--z-dropdown);
        text-align: center;
        /* Ensure no jumping by maintaining opacity and transform */
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }
    
    /* Fallback for browsers without backdrop-filter in mobile */
    @supports not ((-webkit-backdrop-filter: blur(30px)) or (backdrop-filter: blur(30px))) {
        .dropdown-menu {
            background: rgba(0, 0, 0, 0.85);
            border: 2px solid rgba(255, 255, 255, 0.4);
        }
    }
    
    .dropdown-menu.show {
        display: block;
        opacity: 1;
        animation: slideDown 0.2s ease-out;
        /* Ensure final state maintains centering */
        transform: translateX(-50%);
        /* Ensure dropdown is always on top */
        z-index: var(--z-modal);
        visibility: visible;
    }
    
    .dropdown-item {
        padding: 1rem 1.5rem;
        margin: 0.4rem auto;
        text-align: center;
        border-radius: 12px;
        transition: all 0.2s ease;
        display: block;
        width: 100%;
        max-width: 320px;
        /* Verbesserte Schriftgröße für bessere Lesbarkeit */
        font-size: clamp(1.1rem, 3.2vw, 1.25rem);
        line-height: 1.5;
        font-weight: 600;
        /* Besserer Kontrast für Lesbarkeit */
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        /* Force center alignment */
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        /* Mindesthöhe für Touch-Targets */
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide other nav items when dropdown is open */
    .nav-menu:has(.dropdown-menu.show) .nav-link:not(.nav-item.dropdown .nav-link) {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
    
    /* Alternative approach for browsers that don't support :has() */
    .nav-menu.dropdown-open .nav-link:not(.nav-item.dropdown .nav-link) {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    
    /* Ensure all nav-links are centered in mobile */
    .nav-link {
        text-align: center;
        justify-content: center;
        width: 100%;
        display: flex;
        align-items: center;
        transition: all 0.2s ease;
        /* Verbesserte Lesbarkeit für mobile Navigation */
        font-size: clamp(1rem, 2.8vw, 1.1rem);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        padding: 0.8rem 1rem;
        margin: 0.2rem 0;
        border-radius: 10px;
        min-height: 48px;
    }
    
    .nav-link:hover,
    .nav-link:focus {
        background: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 1);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        transform: translateY(-1px);
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        background: rgba(255, 255, 255, 0.3);
        color: rgba(255, 255, 255, 1);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
    }
    
    /* Mobile dropdown animation - with centering */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-0.5rem);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        padding: 5px;
    }

    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero {
        flex-direction: column !important;
        padding-top: 5rem !important;
        padding-bottom: 1rem !important;
        min-height: 100vh;
    }
    .hero-content {
        order: 1;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-left: 0;
        max-width: 100%;
        height: 100%;
        padding-bottom: 0.5rem;
    }
    .hero-visual {
        order: 2;
        width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .hero-title {
        font-size: 2.8rem;
        line-height: 1.1;
        margin-bottom: 1rem;
        text-align: center;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
    }
    


    .hero-subtitle {
        font-size: 1.25rem;
        color: #fff !important;
        margin-bottom: 1rem;
        text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 0 16px rgba(0,0,0,0.8), 0 0 24px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
        text-align: center;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 14px 24px !important;
        font-size: 1rem !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .floating-elements {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem 1.2rem;
        justify-items: center;
        align-items: center;
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
        padding: 0.5rem 0;
        margin-top: -1rem;
    }

    .floating-icon-link {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .floating-icon {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        font-size: 2.6rem !important;
        width: 80px !important;
        height: 80px !important;
        min-width: 80px;
        min-height: 80px;
        margin: 0 !important;
    }

    .about-content,
    .recovery-content,
    .network-content,
    .security-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .repair-grid,
    .web-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .training-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem; /* noch etwas kleinerer Abstand zwischen Boxen */
        padding-left: 1rem;  /* mehr Abstand vom Rand links */
        padding-right: 1rem; /* mehr Abstand vom Rand rechts */
    }

    /* Services-Container seitlich schmaler */
    .services .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Karten kompakter darstellen */
    .services .service-innerbox {
        padding: 1rem 0.9rem;
        border-radius: 12px;
    }
    .services .service-innerbox h3 {
        font-size: 1rem;
    }
    .services .service-innerbox p {
        font-size: 0.95rem;
    }
    .services .service-icon {
        font-size: 1.25rem;
    }

    .partners-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hours-container {
        flex-direction: column;
        align-items: center;
    }

    .hours-card {
        min-width: 250px;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .container {
        padding: 0 0;
    }
    
    .service-card,
    .repair-category,
    .web-card,
    .training-card,
    .partner-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .training-feature {
        padding: 0.4rem;
        gap: 0.5rem;
    }
    
    .feature-text {
        font-size: 0.85rem;
    }
    
    .training-description {
        padding: 0.6rem;
    }
    
    .training-description p {
        font-size: 0.8rem;
    }
    
    .contact-item {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .contact-buttons {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .contact-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .qualities {
        flex-direction: column;
        gap: 1rem;
    }
    
    .quality-item {
        justify-content: center;
    }
    
    .network-services {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .recovery-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .data-recovery-image {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero-content {
        --hero-padding-top: 0.5rem; /* maximal nach oben */
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .service-card,
    .repair-category,
    .web-card,
    .training-card,
    .partner-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .contact-item {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }
    
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-item {
        padding: 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .floating-icon {
        font-size: 1.5rem;
        width: 45px;
        height: 45px;
    }
    
    .nav-container {
        padding: 0 8px;  /* Noch kompakter für mobile */
    }
    
    .logo-image {
        height: 40px;
    }
    
    .container {
        padding: 0 0;
    }
    
    .repair-list,
    .recovery-list,
    .web-list,
    .security-list {
        padding-left: 1.5rem;
    }
    
    .repair-list li,
    .recovery-list li,
    .web-list li,
    .security-list li {
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }
    
    .contact-details h3 {
        font-size: 1.1rem;
    }
    
    .contact-details p {
        font-size: 0.95rem;
    }
    
    .footer-section h3 {
        font-size: 1.1rem;
    }
    
    .footer-links a {
        font-size: 0.9rem;
    }
    .service-innerbox {
        padding: 0.9rem 0.8rem; /* deutlich kompakter */
        border-radius: 10px;
    }
    .services-grid {
        padding-left: 1.25rem; /* extra Randabstand links */
        padding-right: 1.25rem; /* extra Randabstand rechts */
        gap: 0.65rem; /* engeres Grid-Gap */
    }
    .services .service-innerbox h3 { font-size: 0.95rem; }
    .services .service-innerbox p { font-size: 0.9rem; }
}

@media (max-width: 360px) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.4rem;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .service-card,
    .repair-category,
    .web-card,
    .training-card {
        padding: 1rem;
    }
    
    .contact-item {
        padding: 1rem;
    }
    
    .floating-icon {
        font-size: 1.3rem;
        width: 40px;
        height: 40px;
    }
    
    .logo-image {
        height: 35px;
    }
}

/* Tablet Landscape Optimizations */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .hero {
        flex-direction: row;
        text-align: left;
        padding: 6rem 0 4rem 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .repair-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
    }
    
    .service-card:hover,
    .repair-category:hover,
    .web-card:hover,
    .training-card:hover {
        transform: none;
    }
    
    .floating-icon:hover {
        transform: none;
    }
    
    .nav-link:hover::after {
        width: 0;
    }
    
    .nav-link:active::after {
        width: 100%;
    }
}

/* ===== Layout consistency additions (container, typography, cards) ===== */
:root {
    --container-max: 1200px;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section-title {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    margin-bottom: var(--spacing-sm);
}

/* Service cards unified typography */
.service-innerbox h3 {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    margin-bottom: 0.5rem;
}

.service-innerbox p {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.5;
}

/* Services grid refinements per breakpoint */
@media (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; gap: 12px; padding-left: 16px; padding-right: 16px; }
    .service-innerbox { padding: 14px 12px; border-radius: 12px; }
}

@media (max-width: 480px) {
    .services-grid { gap: 10px; padding-left: 20px; padding-right: 20px; }
    .service-innerbox { padding: 12px 10px; border-radius: 10px; }
}

/* Landscape Phone Optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 4rem 0 2rem 0;
        min-height: 80vh;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-visual {
        height: 200px;
    }
    
    .floating-icon {
        font-size: 1.5rem;
        width: 45px;
        height: 45px;
    }
    
    .nav-menu {
        top: 60px;
        padding: 1rem 0;
    }
}

/* Cookie Banner Mobile Optimizations */
@media (max-width: 768px) {
    #cookie-banner {
        bottom: 5vh;
        width: 95vw;
        padding: 1.5rem 1rem;
        border-radius: 12px;
    }
    
    #cookie-banner span {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    #cookie-banner .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    #cookie-customize {
        padding: 0.8rem;
        border-radius: 8px;
    }
    
    #cookie-customize label {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    #cookie-banner {
        bottom: 2vh;
        width: 98vw;
        padding: 1.25rem 0.8rem;
    }
    
    #cookie-banner span {
        font-size: 0.9rem;
    }
    
    #cookie-banner .btn {
        padding: 0.5rem 1.2rem;
        font-size: 0.85rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0000ff;
        --text-dark: #000000;
        --text-light: #333333;
        --border-color: #000000;
    }
}

/* Print styles */
@media print {
    .navbar,
    .back-to-top,
    .hero-visual,
    .floating-elements,
    .hard-drive-animation,
    .network-animation,
    .security-animation {
        display: none;
    }

    .hero {
        
        padding: 2rem 0;
    }

    .section-title::after {
        display: none;
    }
}

#web-design .section-title {
    width: 100%;
    max-width: 600px;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

#network .section-title {
    position: relative;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100vw;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
}

#network .section-title::after {
    left: 0;
    transform: none;
}

/* SICHERHEITSSYSTEME Überschrift nach links */
#security .section-title {
    text-align: left;
}

#security .section-title::after {
    left: 0;
    transform: none;
}

/* Legal Pages Mobile Optimizations */
@media (max-width: 768px) {
    main.container {
        margin-top: 100px !important;
        margin-bottom: 40px !important;
        padding: 0 15px;
    }
    
    .impressum-content,
    .datenschutz-content,
    .agb-content {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .impressum-content h1,
    .datenschutz-content h1,
    .agb-content h1 {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .impressum-content h2,
    .datenschutz-content h2,
    .agb-content h2 {
        font-size: 1.4rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: var(--primary-color);
    }
    
    .impressum-content h3,
    .datenschutz-content h3,
    .agb-content h3 {
        font-size: 1.2rem;
        margin-top: 1.5rem;
        margin-bottom: 0.8rem;
        color: var(--text-dark);
    }
    
    .impressum-content p,
    .datenschutz-content p,
    .agb-content p {
        margin-bottom: 1rem;
        text-align: justify;
    }
    
    .impressum-content ul,
    .datenschutz-content ul,
    .agb-content ul {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }
    
    .impressum-content li,
    .datenschutz-content li,
    .agb-content li {
        margin-bottom: 0.5rem;
    }
    
    .impressum-content a,
    .datenschutz-content a,
    .agb-content a {
        color: var(--primary-color);
        text-decoration: underline;
        word-break: break-word;
    }
    
    .impressum-content a:hover,
    .datenschutz-content a:hover,
    .agb-content a:hover {
        color: var(--secondary-color);
    }
    
    /* Back to home button */
    .impressum-content .btn,
    .datenschutz-content .btn,
    .agb-content .btn {
        width: 100%;
        max-width: 280px;
        margin: 2rem auto 0 auto;
        display: block;
        text-align: center;
    }
}

@media (max-width: 480px) {
    main.container {
        margin-top: 90px !important;
        margin-bottom: 30px !important;
        padding: 0 10px;
    }
    
    .impressum-content,
    .datenschutz-content,
    .agb-content {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .impressum-content h1,
    .datenschutz-content h1,
    .agb-content h1 {
        font-size: 1.6rem;
        margin-bottom: 1.25rem;
    }
    
    .impressum-content h2,
    .datenschutz-content h2,
    .agb-content h2 {
        font-size: 1.3rem;
        margin-top: 1.75rem;
        margin-bottom: 0.8rem;
    }
    
    .impressum-content h3,
    .datenschutz-content h3,
    .agb-content h3 {
        font-size: 1.1rem;
        margin-top: 1.25rem;
        margin-bottom: 0.6rem;
    }
    
    .impressum-content p,
    .datenschutz-content p,
    .agb-content p {
        margin-bottom: 0.8rem;
        text-align: left;
    }
    
    .impressum-content ul,
    .datenschutz-content ul,
    .agb-content ul {
        padding-left: 1.25rem;
    }
    
    .impressum-content li,
    .datenschutz-content li,
    .agb-content li {
        margin-bottom: 0.4rem;
    }
    
    .impressum-content .btn,
    .datenschutz-content .btn,
    .agb-content .btn {
        max-width: 250px;
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

@media (max-width: 360px) {
    .impressum-content,
    .datenschutz-content,
    .agb-content {
        font-size: 0.85rem;
    }
    
    .impressum-content h1,
    .datenschutz-content h1,
    .agb-content h1 {
        font-size: 1.4rem;
    }
    
    .impressum-content h2,
    .datenschutz-content h2,
    .agb-content h2 {
        font-size: 1.2rem;
    }
    
    .impressum-content h3,
    .datenschutz-content h3,
    .agb-content h3 {
        font-size: 1rem;
    }
    
    .impressum-content .btn,
    .datenschutz-content .btn,
    .agb-content .btn {
        max-width: 220px;
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

/* Legal Pages Navigation Mobile */
@media (max-width: 768px) {
    .nav-menu {
        background: rgba(255, 255, 255, 0.1);
        -webkit-backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
    }
    
    .nav-menu .nav-link {
        color: white;
        padding: 1rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .nav-menu .nav-link:last-child {
        border-bottom: none;
    }
    
    .nav-menu .nav-link:hover {
        background: rgba(255,255,255,0.2);
    }
}

/* Legal Pages Footer Mobile */
@media (max-width: 768px) {
    .footer {
        margin-top: 2rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    
    .footer-section h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .footer-section p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .footer-links {
        list-style: none;
        padding: 0;
    }
    
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    
    .footer-links a {
        font-size: 0.9rem;
        color: var(--text-light);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .footer-links a:hover {
        color: var(--primary-color);
    }
    
    .social-links {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 1rem;
    }
    
    .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        transition: transform 0.3s ease;
        color: var(--text-light);
    }
    
    .social-links a:hover {
        transform: translateY(-3px) scale(1.1);
        filter: drop-shadow(0 0 10px var(--glow-color));
    }
    
    .footer-bottom {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
        text-align: center;
    }
    
    .footer-bottom p {
        font-size: 0.8rem;
        color: var(--text-light);
    }
}

/* Legal Pages Print Styles */
@media print {
    .navbar,
    .footer,
    #cookie-banner,
    #cookie-overlay {
        display: none !important;
    }
    
    main.container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    .impressum-content,
    .datenschutz-content,
    .agb-content {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .impressum-content h1,
    .datenschutz-content h1,
    .agb-content h1 {
        font-size: 18pt;
        page-break-after: avoid;
    }
    
    .impressum-content h2,
    .datenschutz-content h2,
    .agb-content h2 {
        font-size: 14pt;
        page-break-after: avoid;
    }
    
    .impressum-content h3,
    .datenschutz-content h3,
    .agb-content h3 {
        font-size: 12pt;
        page-break-after: avoid;
    }
    
    .impressum-content .btn,
    .datenschutz-content .btn,
    .agb-content .btn {
        display: none !important;
    }
}

/* Kontaktformular-Modernisierung */
.contact-form {
    background: linear-gradient(135deg, #312e81 0%, #a21caf 100%);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(49,46,129,0.10);
    padding: 2.5rem 2rem;
}
@media (max-width: 1500px) {
    .contact-form {
        max-width: 100%;
        min-width: unset;
        padding: 1rem;
    }
}
@media (max-width: 768px) {
    .contact-form {
        margin-top: 2rem;
        padding: 1.2rem;
    }
    .form-group {
        margin-bottom: 1rem;
    }
}

@media (min-width: 901px) {
    .contact-content {
        grid-template-columns: 0.8fr 1.7fr;
        gap: 4rem;
        align-items: center;
    }
    .contact-info {
        max-width: 300px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .contact-form {
        min-width: 420px;
        max-width: 650px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

#form-success-modal {
  position: fixed;
  z-index: 99999;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(10,10,10,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-success-box {
  background: #1a1a1a;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(34,197,94,0.18);
  border: 2px solid #22c55e;
  padding: 2.5rem 2rem 2rem 2rem;
  max-width: 95vw;
  width: 350px;
  text-align: center;
  animation: popin 0.3s;
}
.form-success-title {
  font-size: 1.3rem;
  color: #22c55e;
  font-weight: 700;
  margin-bottom: 1rem;
}
.form-success-text {
  font-size: 1.05rem;
  color: #cccccc;
}
@keyframes popin {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
  
#form-error-modal {
  position: fixed;
  z-index: 99999;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(10,10,10,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-error-box {
  background: #1a1a1a;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(255,26,26,0.18);
  border: 2px solid #ff1a1a;
  padding: 2.5rem 2rem 2rem 2rem;
  max-width: 95vw;
  width: 350px;
  text-align: center;
  animation: popin 0.3s;
}
.form-error-title {
  font-size: 1.3rem;
  color: #ff1a1a;
  font-weight: 700;
  margin-bottom: 1rem;
}
.form-error-text {
  font-size: 1.05rem;
  color: #cccccc;
}
@keyframes popin {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
  
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    background: var(--background-light);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: var(--transition);
    box-shadow: none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px var(--glow-color);
}
  
.captcha-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
    .captcha-group {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.5rem;
    }
}
  
.contact-form label {
    color: #3b82f6;
    font-weight: 600;
}
.captcha-math {
    color: #ff1a1a;
    font-weight: 700;
}

.white-text {
    color: #fff;
}
  
/* Chatbot Widget Styles wurden in chatbot.css ausgelagert */
  
#ai .section-title::after {
    left: 0;
    transform: none;
}

/* KI-Integration spezifische Service-Box Höhe */
#ai .service-innerbox {
    height: 400px !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    min-height: 400px !important;
}

#ai .service-innerbox p {
    flex-grow: 1 !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
    max-height: 200px !important;
    overflow: hidden !important;
}

/* Die folgende Zeile wird entfernt, damit der Verlauf sichtbar ist: */
/* #ai {
    background: none;
} */

section.ai-integration {
    background: linear-gradient(135deg, #0f172a 0%, #022c22 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}
  
.skip-link {
    position: absolute;
    left: -999px;
    top: 10px;
    background: #fff;
    color: #1e293b;
    padding: 0.7rem 1.2rem;
    z-index: 10000;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: left 0.2s;
}
.skip-link:focus {
    left: 10px;
    outline: 3px solid #2563eb;
}

/* Fokus-Sichtbarkeit für Links und Buttons */
a:focus, button:focus, .btn:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    z-index: 1000;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
  
.ai-content {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ai-text {
    flex: 1 1 340px;
    min-width: 320px;
    max-width: 600px;
}

.ai-intro {
    font-size: 1.15rem;
    color: #444;
    margin-bottom: 1.5rem;
    max-width: 600px;
}

.ai-benefits {
    background: var(--primary-color-light);
    border-radius: 14px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(91,188,255,0.10);
    max-width: 600px;
}

.ai-benefits strong {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.ai-benefits ul {
    margin: 0.5rem 0 0 1.2rem;
    color: #222;
}

.ai-visual {
    flex: 0 0 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
}

.ai-animation {
    border: 2px solid #ff69b4;
    box-shadow: 0 0 30px #ff69b4, 0 4px 24px rgba(91,188,255,0.10);
    animation: pink-glow-pulse 2.5s ease-in-out infinite;
    background: linear-gradient(135deg, #e3eaf3 60%, #aee6ff 100%);
    border-radius: 18px;
    padding: 2.5rem 2rem;
    min-width: 260px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes pink-glow-pulse {
    0% {
        box-shadow: 0 0 10px #ff69b4, 0 4px 24px rgba(91,188,255,0.10);
    }
    50% {
        box-shadow: 0 0 30px #ff69b4, 0 4px 24px rgba(91,188,255,0.10);
    }
    100% {
        box-shadow: 0 0 10px #ff69b4, 0 4px 24px rgba(91,188,255,0.10);
    }
}

.ai-bot {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(91,188,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.2rem;
}

.ai-network {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(91,188,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
}

.ai-animation > div:last-child {
    margin-top: 1.2rem;
    color: var(--primary-color);
    font-weight: 600;
    text-align: center;
}

.ai-list {
    margin-top: 1.5rem;
    color: #444;
    max-width: 600px;
}

.bar {
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 3px 0;
    transition: var(--transition);
    display: block;
    border-radius: 2px;
}

.info-box {
  background: #f7f7fa;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(59,130,246,0.07);
  padding: 2rem;
  margin-bottom: 2rem;
  color: #222;
}

.hero-subpage {
  min-height: 420px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
}

@media (max-width: 768px) {
  .hero-subpage {
    min-height: 280px;
  }
}

.services-overview {
  margin-top: 2rem;
}

.feature-image img {
  max-width: 25%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.white-text-box {
  color: #fff !important;
  position: relative;
}
.white-text-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  border-radius: 16px;
  z-index: 0;
}
.white-text-box > * {
  position: relative;
  z-index: 1;
}

.white-text-box,
.white-text-box .feature-text,
.white-text-box h2,
.white-text-box p,
.white-text-box ul,
.white-text-box li,
.white-text-box a,
.white-text-box .feature-icon {
  color: #fff !important;
}

.service-innerbox {
  background: #181b22;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  padding: 1.5rem 1.2rem;
  margin-bottom: 1.2rem;
  transition: box-shadow 0.2s;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service-innerbox:last-child {
  margin-bottom: 0;
}
.service-innerbox h3 {
  color: #fff;
}
.service-innerbox .service-icon {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.info-box.services-overview {
  background: linear-gradient(135deg, #312e81 0%, #a21caf 100%) !important;
}

/* Keep legacy express gradient reusable */
.express-gradient {
  background: linear-gradient(135deg, #312e81 0%, #a21caf 100%) !important;
}

/* Force gradient inside overview section (overrides .services-overview .info-box transparent rule) */
#overview-and-details .info-box.express-gradient {
  background: linear-gradient(135deg, #312e81 0%, #a21caf 100%) !important;
}

/* Darker variant for express box when needed */
.express-gradient-dark {
  background: linear-gradient(135deg, #19173f 0%, #711574 100%) !important;
}
#overview-and-details .info-box.express-gradient-dark {
  background: linear-gradient(135deg, #19173f 0%, #711574 100%) !important;
}
  
/* Überschriften auf der Startseite weiß */
body#index h1,
body#index h2,
body#index h3,
body#index h4,
body#index h5,
body#index h6 {
  color: #fff !important;
}
  
/* Überschrift 'DEIN PARTNER FÜR' auf der Startseite weiß */
#services .section-title {
  color: #fff !important;
}
  
/* Gleichmäßige Anordnung der Service-Boxen auf der Startseite */
#services .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  #services .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  #services .services-grid {
    grid-template-columns: 1fr;
  }
}
#services .service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
  
/* Über uns: Überschrift und Qualitäten-Liste in weiß */
#about .section-title {
  color: #fff !important;
}
#about .qualities,
#about .quality-item,
#about .quality-item span {
  color: #fff !important;
}

#about .quality-icon {
  color: var(--primary-color) !important;
}

/* Explizit die Häkchen in der Über uns Sektion blau machen */
#about .quality-item .quality-icon {
  color: #3b82f6 !important;
}
  
/* Partner-Sektion: Überschrift in weiß */
#partners .section-title {
  color: #fff !important;
}
  
/* Reparatur-Sektion: Überschrift in weiß */
#repair-services .section-title {
  color: #fff !important;
}
  
/* Datenrettung-Sektion: Überschrift in weiß */
#data-recovery .section-title {
  color: #fff !important;
}
  
/* KI-Integration-Sektion: Überschrift in weiß */
#ai .section-title {
  color: #fff !important;
}
  
/* Netzwerk & Telefonanlagen-Sektion: Überschrift in weiß */
#network .section-title {
  color: #fff !important;
}
/* Öffnungszeiten-Sektion: Überschrift in weiß */
#hours .section-title {
  color: #fff !important;
}
  
/* Kontakt-Sektion: Überschrift in weiß */
#contact .section-title {
  color: #fff !important;
}
  
/* Pflichtfelder-Hinweis im Kontaktformular in rot */
.form-hint,
.form-hint *,
.form-group label span.white-text {
  color: #e11d48 !important;
}
  
/* Kontaktformular: 'Ich akzeptiere die' und Sternchen in weiß, Pflichtfelder-Hinweis bleibt rot */
.form-group label > .white-text {
  color: #fff !important;
}
  
/* Kontaktformular: 'Ich akzeptiere die' und Sternchen wirklich weiß */
.form-group label > .white-text,
.form-group label > .white-text:last-child {
  color: #fff !important;
}
  
/* Kontaktformular: 'Ich akzeptiere die' gezielt weiß */
.form-group label input[type='checkbox'] + .white-text {
  color: #fff !important;
}
  
/* Betriebssystem-Liste in der Training-Sektion weiß */
.training-card .training-feature .feature-text {
  color: #fff !important;
}
  
/* Impressum: Text komplett weiß */
.impressum-content,
.impressum-content h1,
.impressum-content h2,
.impressum-content h3,
.impressum-content p,
.impressum-content ul,
.impressum-content li,
.impressum-content a,
.impressum-content strong {
  color: #fff !important;
}
  
/* Impressum: Links wieder in Blau */
.impressum-content a {
  color: #3b82f6 !important;
}
  
/* Impressum: Überschrift explizit weiß */
.impressum-content .section-title,
.impressum-content h1 {
  color: #fff !important;
}
  
/* Impressum: Überschrift garantiert weiß */
.impressum-content .section-title,
.impressum-content h1,
.impressum-content > h1 {
  color: #fff !important;
}
  
/* Impressum: .section-title.no-underline explizit weiß */
.section-title.no-underline {
  color: #fff !important;
}
  
/* Datenschutz: Text komplett weiß, Links blau */
.datenschutz-content,
.datenschutz-content h1,
.datenschutz-content h2,
.datenschutz-content h3,
.datenschutz-content p,
.datenschutz-content ul,
.datenschutz-content li,
.datenschutz-content strong {
  color: #fff !important;
}
.datenschutz-content a {
  color: #3b82f6 !important;
}
  
/* AGB: Text komplett weiß, Links blau */
.agb-content,
.agb-content h1,
.agb-content h2,
.agb-content h3,
.agb-content p,
.agb-content ul,
.agb-content li,
.agb-content strong {
  color: #fff !important;
}
.agb-content a {
  color: #3b82f6 !important;
}
  /* Modern 
Hero Enhancements */
.neon-text {
    color: var(--accent-color);
    text-shadow: 
        0 0 5px var(--accent-color),
        0 0 10px var(--accent-color),
        0 0 15px var(--accent-color),
        0 0 20px var(--accent-color);
    animation: neon-flicker 2s ease-in-out infinite alternate;
}

/* Entfernt: hero-stats Blöcke */

.stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.2rem 1.5rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}



.floating-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
    animation: float 3s ease-in-out infinite;
    display: block;
    line-height: 1;
}

.icon-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}

.floating-icon-link:hover .icon-label {
    color: var(--accent-color);
}

/* Responsive Hero Adjustments */
@media (max-width: 1200px) {
    .floating-elements {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .hero-stats {
        gap: 1.5rem;
    }
    
    .stat-item {
        padding: 1rem 1.5rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .floating-elements {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        margin-top: 2rem;
    }
    
    .floating-icon-link {
        min-width: 80px;
        padding: 0.8rem;
    }
    
    .floating-icon {
        font-size: 1.5rem;
    }
    
    .icon-label {
        font-size: 0.7rem;
    }
}

/* Modern About Section */
.about {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95) 0%, rgba(15, 15, 35, 0.95) 100%);
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.about-image {
    position: relative;
}

.team-image {
    width: 100%;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.team-image:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
}

.about-text h3 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 2rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.qualities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.quality-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.quality-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.quality-icon {
    color: var(--accent-color);
    font-weight: bold;
}

.skills {
    margin-top: 2rem;
}

.skill {
    margin-bottom: 1.5rem;
}

.skill-name {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-dark);
}

.skill-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.skill-level {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 4px;
    transition: width 2s ease-out;
    position: relative;
}

.skill-level::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .qualities {
        grid-template-columns: 1fr;
    }
}/* 
Service Features */
.service-features {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.feature-tag {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
    transition: var(--transition);
}

.feature-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* Modern Partners Section */
.partners {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 35, 0.95) 100%);
    position: relative;
}

.partners::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    position: relative;
    z-index: 1;
}

.partner-card {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding: 2rem;
    border-radius: var(--border-radius-xl);
    text-align: center;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: var(--transition-slow);
}

.partner-card:hover::before {
    left: 100%;
}

.partner-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.partner-card h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.partner-card p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.partner-link {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.partner-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, var(--primary-color-light), var(--accent-color));
}

/* Modern Repair Services Section */
.repair-services {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
    position: relative;
}

.repair-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.repair-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
    position: relative;
    z-index: 1;
}

.repair-category {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: var(--border-radius-xl);
    padding: 3rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.repair-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.repair-category::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.repair-category > div {
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.repair-category:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(59, 130, 246, 0.2),
        0 0 0 1px rgba(59, 130, 246, 0.3),
        0 0 30px rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.repair-category:hover::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
}

.repair-category:hover::after {
    left: 100%;
}

.repair-category:hover > div {
    transform: translateY(-2px);
}

.repair-category h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: white;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.repair-list {
    list-style: none;
    padding: 0;
}

.repair-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-left: 1.5rem;
    cursor: pointer;
}

.repair-list li::before {
    content: '⚡';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

.repair-list li:hover {
    color: white;
    padding-left: 2rem;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    margin: 0 -0.5rem;
    padding-left: 2.5rem;
    padding-right: 0.5rem;
}

.repair-list li:hover::before {
    transform: scale(1.2) rotate(5deg);
    color: #60a5fa;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

.repair-list li:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .repair-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .repair-category {
        min-height: 300px;
        padding: 2rem 1.5rem;
    }
    
    .repair-category h3 {
        font-size: 1.5rem;
    }
}/* R
epair CTA Section */
.repair-cta {
    text-align: center;
    margin-top: 4rem;
    padding: 3rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.repair-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    z-index: -1;
}

.repair-cta h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-weight: 700;
}

.repair-cta p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Modern Data Recovery Section */
.data-recovery {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95) 0%, rgba(15, 15, 35, 0.95) 100%);
    position: relative;
    overflow: hidden;
}

.data-recovery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 15% 85%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.recovery-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.recovery-text h2 {
    text-align: left;
}

.recovery-text h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--accent-color);
    font-weight: 700;
}

.recovery-list {
    list-style: none;
    padding: 0;
}

.recovery-list li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1.1rem;
    position: relative;
    padding-left: 2rem;
    transition: var(--transition);
}

.recovery-list li::before {
    content: '💾';
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

.recovery-list li:hover {
    color: var(--text-dark);
    padding-left: 2.5rem;
    border-color: var(--accent-color);
}

.recovery-visual {
    position: relative;
}

.data-recovery-image {
    position: relative;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.data-recovery-image img {
    width: 100%;
    height: auto;
    transition: var(--transition);
}

.data-recovery-image:hover img {
    transform: scale(1.05);
}

.data-recovery-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    opacity: 0;
    transition: var(--transition);
}

.data-recovery-image:hover::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .recovery-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .recovery-text h2 {
        text-align: center;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}/* Data R
ecovery Features */
.recovery-features {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-highlight {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.feature-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.feature-highlight:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-3px) scale(1.02);
    border-color: var(--accent-color);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.1);
}

.feature-highlight:hover::before {
    left: 100%;
}

.feature-icon {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.feature-highlight:hover .feature-icon {
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4), 0 0 30px rgba(139, 92, 246, 0.2);
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
}

.feature-highlight h5,
.feature-highlight p {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.feature-highlight:hover h5 {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.7);
}

.feature-highlight:hover p {
    color: #f8fafc;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Subtle pulse animation for feature icons */
@keyframes iconPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(139, 92, 246, 0);
    }
}

.feature-icon {
    animation: iconPulse 3s ease-in-out infinite;
    animation-delay: var(--animation-delay, 0s);
}

/* Add different delays for each icon */
.feature-highlight:nth-child(1) .feature-icon {
    --animation-delay: 0s;
}

.feature-highlight:nth-child(2) .feature-icon {
    --animation-delay: 1s;
}

.feature-highlight:nth-child(3) .feature-icon {
    --animation-delay: 2s;
}

/* Pause animation on hover to prevent conflicts */
.feature-highlight:hover .feature-icon {
    animation-play-state: paused;
}

.feature-highlight h4 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.feature-highlight p {
    margin: 0;
    color: #e2e8f0;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.recovery-cta {
    margin-top: 2rem;
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 2rem;
    transform: translateY(100%);
    transition: var(--transition);
}

.data-recovery-image:hover .image-overlay {
    transform: translateY(0);
}

.overlay-content h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.overlay-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 0.9rem;
}

/* Modern Training Section */
.training {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
    position: relative;
}

.training::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.training-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.training-visual {
    position: relative;
}

.training-image {
    width: 100%;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.training-image:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
}

.training-text h2 {
    text-align: left;
    color: white !important;
}

.training-text h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--accent-color);
    font-weight: 700;
}

.training-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.training-category {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.training-category:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.training-category h4 {
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.training-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.training-category li {
    padding: 0.5rem 0;
    color: var(--text-light);
    position: relative;
    padding-left: 1.5rem;
}

.training-category li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

@media (max-width: 768px) {
    .training-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .training-text h2 {
        text-align: center;
    }
    
    .training-categories {
        grid-template-columns: 1fr;
    }
    
    .recovery-features {
        gap: 1rem;
    }
    
    .feature-highlight {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .feature-highlight:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2), 0 0 15px rgba(139, 92, 246, 0.1);
    }
    
    .feature-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    
    .feature-highlight:hover .feature-icon {
        transform: rotate(5deg) scale(1.05);
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.15);
    }
    
    /* Reduce animations on touch devices */
    .feature-highlight:hover::before {
        animation-duration: 0.4s;
    }
}
* Contact Quick Info */
.contact-quick-info {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.quick-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    color: var(--text-light);
    font-weight: 500;
}

.quick-info-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    color: var(--text-dark);
    border-color: var(--accent-color);
}

.info-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px var(--accent-color));
}

/* Modern Contact Section */
.contact {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    position: relative;
    z-index: 1;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding: 2rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: var(--transition-slow);
}

.contact-item:hover::before {
    left: 100%;
}

.contact-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
}

.contact-item a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.contact-details h3 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.contact-details p {
    color: var(--text-light);
    margin: 0;
    line-height: 1.6;
}

/* Modern Contact Form */
.contact-form {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding: 3rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
    z-index: -1;
}

.form-intro {
    color: var(--text-light) !important;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    text-align: center;
}

.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    color: var(--text-dark);
    font-size: 1rem;
    transition: var(--transition);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Captcha Group */
.captcha-group {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
}

.captcha-group input {
    flex: 1;
}

.captcha-group button {
    flex-shrink: 0;
}

/* Captcha error messages should span full width and break to new line */
.captcha-group .form-error {
    order: 10;
    flex-basis: 100%;
    margin-top: 8px;
}

/* Checkbox Styling */
.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
    transform: scale(1.2);
}

/* Form Button */
.contact-form .btn {
    width: 100%;
    margin-top: 1rem;
    font-size: 1.1rem;
    padding: 1.2rem 2rem;
}

.form-hint {
    color: var(--text-light);
    font-size: 0.9rem;
    text-align: center;
    margin-top: 1rem;
}

/* Map Section */
.map-section {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 35, 0.95) 100%);
    position: relative;
}

.map-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 40% 60%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 60% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.map-section .section-title {
    color: white !important;
}

.shop-image-container {
    position: relative;
    border-radius: var(--border-radius-xl) !important;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
    transition: var(--transition);
}

.shop-image-container:hover {
    transform: scale(1.02);
    box-shadow: 0 30px 60px rgba(59, 130, 246, 0.2) !important;
}

.shop-image-container img {
    transition: var(--transition);
}

.shop-image-container:hover img {
    transform: scale(1.05);
}

.shop-image-container > div:last-child {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)) !important;
}

.shop-image-container a {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
    transition: var(--transition) !important;
}

.shop-image-container a:hover {
    background: linear-gradient(135deg, var(--primary-color-light), var(--accent-purple)) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

@media (max-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-form {
        padding: 2rem;
    }
    
    .contact-quick-info {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .quick-info-item {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .captcha-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .captcha-group button {
        margin-top: 1rem;
    }
}
/* Repair Stats - DEPRECATED - Now using .recovery-stats */
/* .hero.repair-hero .repair-stats, section.hero.repair-hero .repair-stats { display: grid !important; grid-template-columns: repeat(3, minmax(200px, 1fr)) !important; gap: 1.5rem !important; justify-items: center !important; align-items: stretch !important; margin-top: 2rem; } */

/* Override für Desktop - Stats vertikal - DEPRECATED */
/* @media (min-width: 992px) {
  .hero.repair-hero .repair-stats, section.hero.repair-hero .repair-stats {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    margin-top: 0 !important;
  }
} */

/* Make all three stat boxes equal size in hero - DEPRECATED */
/* .hero.repair-hero .repair-stats .stat-item {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
} */

/* .repair-stats .stat-item {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    text-align: center;
    min-width: 150px;
}

/* .repair-stats .stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
    border-color: var(--accent-color);
} */

/* Modern Services Overview */
.services-overview {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95) 0%, rgba(15, 15, 35, 0.95) 100%);
    position: relative;
}

.services-overview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.services-overview .info-box {
    background: transparent;
    position: relative;
    z-index: 1;
}

.service-card-subpage {
    background: rgba(255, 255, 255, 0.05) !important;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    transition: var(--transition);
    position: relative;
    overflow: visible;
    color: var(--text-dark) !important;
}

.service-card-subpage::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: var(--transition-slow);
}

.service-card-subpage:hover::before {
    left: 100%;
}

.service-card-subpage:hover {
    transform: translateY(-10px) rotateX(5deg);
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.service-card-subpage .service-icon {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(0 0 8px var(--accent-color));
    animation: float 3s ease-in-out infinite;
}

.service-card-subpage h3 {
    color: var(--text-dark) !important;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.service-card-subpage p {
    color: var(--text-light) !important;
    line-height: 1.6;
}

/* Modern Feature Sections */
.feature-section,
.feature-section-alt {
    padding: 8rem 0;
    position: relative;
}

.feature-section {
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
}

.feature-section-alt {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
}

.feature-section::before,
.feature-section-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.feature-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.white-text-box {
    background: rgba(255, 255, 255, 0.05) !important;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: var(--border-radius-xl);
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.white-text-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
    z-index: -1;
}

.feature-text h2 {
    color: var(--text-dark) !important;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 2rem;
    font-weight: 700;
}

.feature-text p {
    color: var(--text-light) !important;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.feature-list li {
    padding: 0.75rem 0;
    color: var(--text-light) !important;
    position: relative;
    padding-left: 2rem;
    transition: var(--transition);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-list li:hover {
    color: var(--text-dark) !important;
    padding-left: 2.5rem;
    border-color: var(--accent-color);
}

.feature-icon {
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.1rem;
}

/* CTA Section */
.cta-section {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.95) 0%, rgba(162, 28, 175, 0.95) 100%);
    position: relative;
    text-align: center;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(236, 72, 153, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

.cta-section .info-box {
    background: rgba(255, 255, 255, 0.1) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-xl);
    padding: 4rem 3rem;
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.cta-section h2 {
    color: white !important;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 2rem;
    font-weight: 900;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    /* .hero .repair-stats { grid-template-columns: 1fr !important; gap: 1rem !important; }
    
    .repair-stats .stat-item { min-width: 120px; padding: 1rem 1.5rem; } */
    
    .feature-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .white-text-box {
        padding: 2rem;
    }
    
    .cta-section .info-box {
        padding: 3rem 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}
* Service Highlights */
.service-highlights {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.highlight-tag {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-purple));
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(0, 255, 255, 0.3);
    transition: var(--transition);
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.highlight-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4);
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
}

/* Modern Popup Styles */
#contact-popup {
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.contact-popup-content {
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.95) 0%, rgba(162, 28, 175, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.contact-popup-header {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-popup-body {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-purple), var(--accent-pink), var(--primary-color));
    background-size: 400% 400%;
    animation: gradient-shift 3s ease infinite;
}

.contact-popup-body .form-group input,
.contact-popup-body .form-group select,
.contact-popup-body .form-group textarea {
    background: #000000;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.contact-popup-body .form-group input:focus,
.contact-popup-body .form-group select:focus,
.contact-popup-body .form-group textarea:focus {
    border-color: var(--accent-color);
    background: #000000;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.contact-popup-body .form-group input::placeholder,
.contact-popup-body .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.contact-popup-body .form-group label {
    color: white !important;
}

.contact-popup-body .form-intro {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Modern Modal Styles */
#form-success-modal,
#form-error-modal {
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-success-box,
.form-error-box {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius-xl);
    padding: 3rem;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.form-success-title {
    color: #059669;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.form-error-title {
    color: #dc2626;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.form-success-text,
.form-error-text {
    color: #374151;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Loading Overlay */
#form-loading-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* Enhanced Form Loading Spinner Styles */
.form-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.form-loading-overlay.active {
    display: flex;
}

.form-loading-spinner {
    width: 100px;
    height: 100px;
    position: relative;
}

.form-loading-spinner .spinner-ring {
    width: 100%;
    height: 100%;
    border: 8px solid rgba(251, 191, 36, 0.2);
    border-top: 8px solid #f59e0b;
    border-radius: 50%;
    animation: enhanced-spin 1s linear infinite;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

@keyframes enhanced-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Global spinner overrides for consistency */
#form-loading-overlay .spinner-ring,
.form-loading-overlay .spinner-ring,
.spinner-ring {
    width: 100%;
    height: 100%;
    border: 8px solid rgba(251, 191, 36, 0.2) !important;
    border-top: 8px solid #f59e0b !important;
    border-radius: 50%;
    animation: enhanced-spin 1s linear infinite !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

#form-loading-overlay .form-loading-spinner,
.form-loading-overlay .form-loading-spinner {
    width: 100px !important;
    height: 100px !important;
    position: relative;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .service-highlights {
        justify-content: center;
    }
    
    .highlight-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    
    .contact-popup-content {
        width: 95%;
        margin: 1rem;
    }
    
    .contact-popup-body {
        padding: 1.5rem;
    }
    
    .form-success-box,
    .form-error-box {
        padding: 2rem;
        width: 95%;
    }
}/*
 Data Recovery Stats */
.data-recovery-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.data-recovery-stats .stat-item {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    text-align: center;
    min-width: 150px;
    position: relative;
    overflow: hidden;
}

.data-recovery-stats .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
    transition: var(--transition-slow);
}

.data-recovery-stats .stat-item:hover::before {
    left: 100%;
}

.data-recovery-stats .stat-item:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 255, 255, 0.2);
    border-color: var(--accent-color);
}

/* Modern Process Steps */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.step {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding: 2rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.step::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: var(--transition-slow);
}

.step:hover::before {
    left: 100%;
}

.step:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.step h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.step p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Common Causes Grid */
.causes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.cause-card {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding: 2rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.cause-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.1), transparent);
    transition: var(--transition-slow);
}

.cause-card:hover::before {
    left: 100%;
}

.cause-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-pink);
    box-shadow: 0 15px 35px rgba(236, 72, 153, 0.2);
}

.cause-card h4 {
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cause-card h4::before {
    content: '⚠️';
    font-size: 1.5rem;
}

.cause-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* CTA Section Alt */
.cta-section-alt {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95) 0%, rgba(49, 46, 129, 0.95) 100%);
    position: relative;
    text-align: center;
}

.cta-section-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 40% 60%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 60% 40%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.cta-section-alt .info-box {
    background: rgba(255, 255, 255, 0.05) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-xl);
    padding: 4rem 3rem;
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.cta-icon {
    font-size: 4rem;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 20px var(--accent-color));
    animation: float 3s ease-in-out infinite;
}

.cta-section-alt h2 {
    color: white !important;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 2rem;
    font-weight: 900;
}

.cta-section-alt p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .data-recovery-stats {
        gap: 1rem;
    }
    
    .data-recovery-stats .stat-item {
        min-width: 120px;
        padding: 1rem 1.5rem;
    }
    
    .process-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .causes-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cta-section-alt .info-box {
        padding: 3rem 2rem;
    }
    
    .cta-icon {
        font-size: 3rem;
    }
}/* Data
 Recovery Guarantee */
.data-recovery-guarantee {
    margin-top: 4rem;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: var(--border-radius-xl);
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.data-recovery-guarantee::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), rgba(139, 92, 246, 0.05));
    z-index: -1;
}

.guarantee-content h3 {
    text-align: center;
    color: var(--text-dark);
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.guarantee-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.guarantee-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

.guarantee-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-purple));
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
}

.guarantee-item h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 700;
}

.guarantee-item p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Modern Hours Section */
.hours {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
    position: relative;
}

.hours::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 75%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.hours-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hours-info {
    text-align: center;
}

.hours-info h2 {
    color: white !important;
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 2rem;
    font-weight: 900;
}

.status-display {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding: 2rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.status-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

.status-dot.open {
    background: #10b981;
    box-shadow: 0 0 20px #10b981;
}

.status-dot.closed {
    background: #ef4444;
    box-shadow: 0 0 20px #ef4444;
}

.status-text {
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: 600;
}

.google-hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.google-hours-card {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    text-align: center;
}

.google-hours-card.today {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.google-hours-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.day-name {
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.day-time {
    color: var(--text-light);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .guarantee-features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .guarantee-item {
        padding: 1rem;
    }
    
    .guarantee-icon {
        width: 55px;
        height: 55px;
        font-size: 1.8rem;
    }
    
    .data-recovery-guarantee {
        padding: 2rem;
    }
    
    .guarantee-content h3 {
        font-size: 1.5rem;
    }
    
    .hours-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .google-hours-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}/* AI
 Stats */
.ai-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.ai-stats .stat-item {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    text-align: center;
    min-width: 150px;
    position: relative;
    overflow: hidden;
}

.ai-stats .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    transition: var(--transition-slow);
}

.ai-stats .stat-item:hover::before {
    left: 100%;
}

.ai-stats .stat-item:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.2);
    border-color: var(--accent-purple);
}

/* AI Technologies */
.ai-technologies {
    margin-top: 4rem;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: var(--border-radius-xl);
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.ai-technologies::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(236, 72, 153, 0.05));
    z-index: -1;
}

.ai-technologies h3 {
    text-align: center;
    color: var(--text-dark);
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.tech-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    transition: var(--transition-slow);
}

.tech-item:hover::before {
    left: 100%;
}

.tech-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: var(--accent-purple);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

.tech-icon {
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}

.tech-name {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1rem;
}

/* Modern AI Feature Sections */
.ai-benefits {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95) 0%, rgba(49, 46, 129, 0.95) 100%);
    position: relative;
}

.ai-benefits::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 30% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
    position: relative;
    z-index: 1;
}

.benefit-card {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding: 2.5rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    transition: var(--transition-slow);
}

.benefit-card:hover::before {
    left: 100%;
}

.benefit-card:hover {
    transform: translateY(-15px) rotateX(5deg);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-purple);
    box-shadow: 0 25px 50px rgba(139, 92, 246, 0.2);
}

.benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 1.2rem;
    display: block;
    filter: drop-shadow(0 0 12px var(--accent-purple));
    animation: float 4s ease-in-out infinite;
}

.benefit-card h3 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.benefit-card p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 1rem;
}

/* AI Process Timeline */
.ai-process {
    padding: 8rem 0;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
    position: relative;
}

.ai-process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.process-timeline {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    position: relative;
    z-index: 2;
}

.timeline-content {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding: 2rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex: 1;
    transition: var(--transition);
}

.timeline-content:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: var(--accent-purple);
}

.timeline-content h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.timeline-content p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* Timeline connector line */
.process-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-color), var(--accent-purple));
    transform: translateX(-50%);
    z-index: 1;
}

@media (max-width: 768px) {
    .ai-stats {
        gap: 1rem;
    }
    
    .ai-stats .stat-item {
        min-width: 120px;
        padding: 1rem 1.5rem;
    }
    
    .tech-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tech-item {
        padding: 1rem;
    }
    
    .tech-icon {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }
    
    .ai-technologies {
        padding: 2rem;
    }
    
    .ai-technologies h3 {
        font-size: 1.5rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .benefit-card {
        padding: 2rem;
    }
    
    .timeline-item {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem;
    }
    
    .timeline-item:nth-child(even) {
        flex-direction: column !important;
    }
    
    .timeline-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .process-timeline::before {
        display: none;
    }
}
* Modern Chatbot Styles */
#chatbot-icon {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-sticky);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    transition: var(--transition);
    border: 2px solid rgba(255, 255, 255, 0.2);
    will-change: transform;
    transform: translateZ(0); /* Hardware-Beschleunigung */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#chatbot-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.6);
    background: linear-gradient(135deg, var(--primary-color-light), var(--accent-color));
}

#chatbot-icon::before {
    content: '💬';
    font-size: 2rem;
    animation: float 3s ease-in-out infinite;
}

.chatbot-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.chatbot-disabled:hover {
    transform: none !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
}

#chatbot-window {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 400px;
    height: 600px;
    background: rgba(15, 15, 35, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition);
}

.chatbot-hidden {
    transform: translateY(100%) scale(0.8);
    opacity: 0;
    pointer-events: none;
}

.chatbot-header {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
    padding: 1.5rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.chatbot-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

#chatbot-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

#chatbot-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

#chatbot-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.2);
}

.chatbot-message {
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-lg);
    max-width: 80%;
    word-wrap: break-word;
    animation: slide-in-up 0.3s ease-out;
}

.chatbot-message.user {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
    color: white;
    align-self: flex-end;
    margin-left: auto;
}

.chatbot-message.bot {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--text-dark);
    border: 1px solid rgba(255, 255, 255, 0.2);
    align-self: flex-start;
}

#chatbot-questions {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    max-height: 200px;
    overflow-y: auto;
}

.chatbot-category-btn,
.chatbot-question-btn {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    color: var(--text-dark);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.chatbot-category-btn:hover,
.chatbot-question-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.chatbot-back-btn {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-purple)) !important;
    color: white !important;
    font-weight: 600;
    margin-bottom: 1rem !important;
}

.chatbot-back-btn:hover {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    transform: translateX(-5px) !important;
}

/* Scrollbar for chatbot */
#chatbot-messages::-webkit-scrollbar,
#chatbot-questions::-webkit-scrollbar {
    width: 6px;
}

#chatbot-messages::-webkit-scrollbar-track,
#chatbot-questions::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#chatbot-messages::-webkit-scrollbar-thumb,
#chatbot-questions::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

#chatbot-messages::-webkit-scrollbar-thumb:hover,
#chatbot-questions::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-dark);
}

/* Mobile Chatbot Adjustments */
@media (max-width: 768px) {
    #chatbot-window {
        width: calc(100vw - 2rem);
        height: calc(100vh - 4rem);
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }
    
    #chatbot-icon {
        width: 60px;
        height: 60px;
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    #chatbot-icon::before {
        font-size: 1.5rem;
    }
    
    .chatbot-message {
        max-width: 90%;
        padding: 0.75rem 1rem;
    }
    
    .chatbot-header {
        padding: 1rem;
    }
    
    .chatbot-category-btn,
    .chatbot-question-btn {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }
}

/* Additional Modern Effects */
@keyframes chatbot-pulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6), 0 0 0 10px rgba(59, 130, 246, 0.1);
    }
}

#chatbot-icon.has-new-message {
    animation: chatbot-pulse 2s ease-in-out infinite;
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 1rem 1.5rem;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: typing 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}
/* Addit
ional mobile centering for very small screens */
@media (max-width: 480px) {
    .nav-menu {
        left: 1rem;
        right: 1rem;
        max-width: calc(100vw - 2rem);
    }
    
    .navbar {
        left: 0.75rem;
        right: 0.75rem;
        width: calc(100% - 1.5rem);
    }
    
    .dropdown-menu {
        margin: 0;  /* Kein zusätzlicher Margin */
        border-radius: 8px;
        left: 50%;
        width: calc(100vw - 0.5rem);  /* Breiter für größeres Design */
        max-width: 360px;  /* 50% größere maximale Breite */
        text-align: center;
        top: calc(100% + 0.2rem);  /* Minimaler Abstand nach oben */
        padding: 1.2rem;  /* 50% größeres Padding */
        /* Transform wird durch Animation gesetzt */
    }
}

@media (max-width: 360px) {
    .navbar {
        top: 0.25rem;  /* Etwas mehr Abstand nach oben für kleine Bildschirme */
        left: 0.5rem;  /* Mehr Abstand auch für kleine Bildschirme */
        right: 0.5rem;  /* Mehr Abstand auch für kleine Bildschirme */
        width: calc(100% - 1rem);  /* Angepasste Breite für kleine Bildschirme */
        border-radius: 18px;  /* Rundere Ecken für kleine Bildschirme */
        padding: 0.5rem 0.75rem; /* Noch kompakteres Padding für kleine Bildschirme */
    }
    
    .nav-container {
        padding: 0 6px;  /* Minimal Padding für sehr kleine Bildschirme */
    }
    
    .nav-menu {
        left: 0.75rem;
        right: 0.75rem;
    }
    
    /* Extra small screens - reduce text sizes further */
    .nav-link {
        font-size: clamp(0.6rem, 2vw, 0.75rem);
        letter-spacing: 0.5px;
        padding: 0.2rem 0.4rem;
    }
    
    .dropdown-item {
        font-size: clamp(1.1rem, 3.8vw, 1.3rem);
        padding: 0.75rem 0.9rem;
        line-height: 1.4;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

/* Large screens - ensure text doesn't get too big */
@media (min-width: 1400px) {
    .nav-link {
        font-size: 0.9rem;
        max-width: 150px; /* Prevent extremely long menu items */
    }
    
    .dropdown-item {
        font-size: 0.95rem;
        max-width: 200px;
    }
    
    .nav-menu {
        gap: 2rem; /* Fixed gap for large screens */
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .nav-link {
        font-size: 1rem;
        max-width: 180px;
    }
    
    .dropdown-item {
        font-size: 1rem;
        max-width: 220px;
    }
}

/* Repair hero title: match section-title style and reduce size */
.hero.repair-hero .hero-title {
    font-size: clamp(2rem, 3.6vw, 2.8rem) !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #ffffff, #60a5fa, #3b82f6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
}

.hero.repair-hero .hero-title.glow-effect::after { content: none !important; display: none !important; }
.hero.repair-hero .neon-text { background: inherit !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: none !important; }

/* Desktop: Stats rechts vom Text, vertikal gestapelt */
@media (min-width: 992px) {
  .hero.repair-hero .hero-content {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 3rem !important;
    justify-content: space-between !important;
  }
  /* .hero.repair-hero .hero-content > :not(.repair-stats) {
    grid-column: 1 / 2 !important;
  }
  .hero.repair-hero .hero-content .repair-stats {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin: 0 !important;
    margin-top: 0 !important;
    min-width: 280px !important;
    max-width: 320px !important;
    grid-template-columns: unset !important;
  }

  .hero.repair-hero .hero-content .repair-stats .stat-item {
    width: 100% !important;
    margin-bottom: 0 !important;
  } */
}

/* Tablet Portrait Mode - Medium screens */
@media (min-width: 769px) and (max-width: 1199px) {
    .navbar {
        top: 1.25rem;  /* Mehr Abstand für Tablets */
        left: 2.5rem;  /* Schmaler - mehr Abstand für Tablets */
        right: 2.5rem;  /* Schmaler - mehr Abstand für Tablets */
        width: calc(100% - 5rem);  /* Schmaler - angepasste Breite */
        border-radius: 48px;  /* Rundere Ecken für Tablets */
    }
    
    .nav-container {
        padding: 0 12px;  /* Optimiertes Padding für Tablets */
    }
    
    .nav-link {
        font-size: clamp(0.75rem, 1.6vw, 0.9rem);
        padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.6rem, 1.8vw, 1.2rem);
    }
    
    .dropdown-item {
        font-size: clamp(1.2rem, 2.7vw, 1.35rem);
        padding: 0.9rem 1.2rem;
        line-height: 1.4;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .nav-menu {
        gap: clamp(1rem, 2.5vw, 1.8rem);
    }
}

/* Force spaci ng between hero CTA buttons (robust across browsers) */
.hero.repair-hero .hero-buttons { column-gap: 24px !important; row-gap: 16px !important; margin-bottom: 2.5rem !important; }
.hero.repair-hero .hero-buttons .btn { margin: 0 !important; }
.hero.repair-hero .hero-buttons .btn + .btn { margin-left: 24px !important; }
@media (max-width: 768px) {
  .hero.repair-hero .hero-buttons { column-gap: 0 !important; row-gap: 16px !important; }
  .hero.repair-hero .hero-buttons .btn + .btn { margin-left: 0 !important; }
}

/* Landscape orientation specific optimizations */
@media (max-width: 1024px) and (orientation: landscape) {
    .nav-link {
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        padding: 0.3rem 0.8rem;
    }
    
    .dropdown-item {
        font-size: clamp(1.2rem, 2.4vw, 1.35rem);
        padding: 0.75rem 1.05rem;
        line-height: 1.4;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .nav-menu {
        gap: clamp(0.8rem, 2vw, 1.5rem);
    }
}

/* Global type scale reduction (headings and body text) */
html { font-size: 93%; }

/* Section titles a bit smaller */
.section-title { font-size: clamp(1.6rem, 2.6vw, 2rem); }

/* Feature blocks */
.feature-text h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.feature-text p { font-size: 1rem; }

/* Service overview cards */
.service-card-subpage h3 { font-size: 1.3rem; }
.service-card-subpage p { font-size: 0.98rem; }

/* CTA sections */
.cta-section h2, .cta-section-alt h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.cta-section p, .cta-section-alt p { font-size: 1.05rem; }

/* Hero */
.hero-title { font-size: clamp(2.8rem, 8vw, 5.5rem); }
.hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.3rem); }
/* 
==========================================================================
   Utility Classes - Add at end of file
   ========================================================================== */

/* Animation utilities */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

.slide-down {
    animation: slideDown 0.2s ease-out;
}

.slide-up {
    animation: slideUp 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus utilities */
.focus-visible {
    outline: 2px solid var(--accent-color, #007bff);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Screen reader utilities */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: inherit !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dropdown-menu {
        background: white !important;
        border: 2px solid black !important;
        color: black !important;
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        background: black !important;
        color: white !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.show {
        animation: none;
    }
    
    .fade-in,
    .slide-down,
    .slide-up {
        animation: none;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Process Grid Layout für Datenrettung */
.process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.causes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}

/* Mobile responsive für alle Grids */
@media (max-width: 768px) {
    .process-grid,
    .causes-grid,
    .detail-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 600px) {
    .process-grid div,
    .causes-grid div {
        padding: 1rem !important;
    }
}

@media (max-width: 480px) {
    .process-grid,
    .causes-grid,
    .detail-info-grid {
        gap: 0.75rem;
    }
}

/* ===== AGB PAGE SPECIFIC STYLES ===== */
.agb-main {
    margin-top: 120px;
    margin-bottom: 60px;
}

.agb-content {
    max-width: 100%;
}

.agb-back-button {
    margin-top: 2rem;
}

/* ===== DATENSCHUTZ PAGE SPECIFIC STYLES ===== */
.datenschutz-main {
    margin-top: 120px;
    margin-bottom: 60px;
}

.datenschutz-content {
    max-width: 100%;
}

.datenschutz-back-button {
    margin-top: 2rem;
}

/* ===== COOKIE CONSENT STYLES ===== */
.cookie-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(31, 41, 55, 0.5);
    z-index: 9998;
}

.cookie-banner {
    display: none;
    position: fixed;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    max-width: 600px;
    background: #1f2937;
    color: white;
    padding: 2rem 1.5rem;
    z-index: 9999;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    border-radius: 18px;
}

.cookie-content {
    max-width: 500px;
    margin: 0 auto;
}

.cookie-text {
    font-size: 1.1rem;
}

.cookie-link {
    color: #60a5fa;
    text-decoration: underline;
}

.cookie-buttons {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.cookie-btn {
    padding: 0.7rem 2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.cookie-customize {
    display: none;
    margin-top: 1.5rem;
    background: #374151;
    padding: 1rem;
    border-radius: 10px;
}

.cookie-checkbox {
    display: block;
    margin-bottom: 0.5rem;
}

.save-cookie-btn {
    margin-top: 0.5rem;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
}
/* =
==== COMMON HERO STYLES ===== */
/* Gemeinsame Hero-Regeln für alle Seiten */
.hero .hero-content {
    padding: 1rem 2rem;
    margin: 0;
}

.hero .hero-buttons {
    margin-bottom: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero .btn-neon {
    margin-left: 0;
}

.hero .hero-left {
    margin-bottom: 0;
    padding-right: 1rem;
}

.hero .hero-right {
    padding-left: 1rem;
}

/* Hero Title Gradient Effect */
.hero .hero-title {
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero .hero-title.glow-effect::after { 
    content: none; 
    display: none; 
}

.hero .neon-text { 
    background: inherit; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
}

/* Stats Styles */
.hero .recovery-stats,
.hero .webdesign-stats,
.hero .network-stats,
.hero .ki-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 0;
}

.hero .recovery-stats .stat-number,
.hero .webdesign-stats .stat-number,
.hero .network-stats .stat-number,
.hero .ki-stats .stat-number {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.hero .recovery-stats .stat-label,
.hero .webdesign-stats .stat-label,
.hero .network-stats .stat-label,
.hero .ki-stats .stat-label {
    font-size: 0.9rem !important;
    color: var(--text-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive Hero Styles */
@media (min-width: 992px) {
    .hero .hero-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    .hero .hero-left {
        flex: 1;
    }
    
    .hero .hero-right {
        flex: 0 0 auto;
        min-width: 300px;
    }
}

@media (max-width: 991px) {
    .hero .hero-content {
        display: block;
        padding: 1rem 1.5rem;
    }
    
    .hero .hero-left {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    
    .hero .hero-right {
        padding-left: 0;
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .hero .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
}