/* === GLOBAL RESETS === */
html { overflow-x: clip; }
img { max-width: 100%; height: auto; }

:root{
    /* ===== 2026 PREMIUM DESIGN SYSTEM ===== */
    
    /* Typography - Inter Variable Font */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    --font-display: 'Inter', var(--font-sans);
    
    /* Font Weights (Variable Font) */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;
    
    /* Fluid Typography Scale - Enhanced 2026 */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --fs-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem);
    --fs-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
    --fs-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --fs-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --fs-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
    --fs-5xl: clamp(2.75rem, 2rem + 3.5vw, 4rem);
    --fs-hero: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
    
    /* Spacing Scale */
    --space-2xs: clamp(0.125rem, 0.1rem + 0.125vw, 0.1875rem);
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    --space-xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
    --space-3xl: clamp(4rem, 3rem + 6vw, 8rem);
    
    /* 2026 Premium Colors - Light Mode */
    --bg: #eef2f7;
    --bg-subtle: #e2e8f0;
    --card: #ffffff;
    --card-elevated: #ffffff;
    --text: #0f1419;
    --text-secondary: #475569;
    --muted: #4b505b;
    --border: rgba(15, 20, 25, 0.13);
    --border-strong: rgba(15, 20, 25, 0.24);
    
    /* Premium Shadows - Layered */
    --shadow-xs: 0 1px 2px rgba(15, 18, 24, 0.04);
    --shadow-sm: 0 2px 4px rgba(15, 18, 24, 0.06), 0 1px 2px rgba(15, 18, 24, 0.04);
    --shadow: 0 4px 12px rgba(15, 18, 24, 0.08), 0 2px 4px rgba(15, 18, 24, 0.04);
    --shadow-md: 0 8px 24px rgba(15, 18, 24, 0.1), 0 4px 8px rgba(15, 18, 24, 0.06);
    --shadow-lg: 0 16px 48px rgba(15, 18, 24, 0.12), 0 8px 16px rgba(15, 18, 24, 0.08);
    --shadow-xl: 0 24px 64px rgba(15, 18, 24, 0.14), 0 12px 24px rgba(15, 18, 24, 0.1);
    --shadow-2xl: 0 32px 80px rgba(15, 18, 24, 0.16), 0 16px 32px rgba(15, 18, 24, 0.12);
    --shadow-soft: 0 14px 36px rgba(15, 18, 24, 0.12);
    --shadow-hover: 0 30px 80px rgba(15, 18, 24, 0.18);
    --shadow-glow: 0 0 40px rgba(0, 66, 37, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(15, 18, 24, 0.06);
    
    /* Radii - 2026 Softer */
    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 40px;
    --radius-full: 9999px;
    
    /* Accent Colors - Richer */
    --accent: #004225;
    --accent-hover: #005530;
    --accent-active: #003018;
    --accent-strong: #00361d;
    --accent-light: #00a858;
    --accent-contrast: #ffffff;
    --accent-rgb: 0, 66, 37;
    --accent-soft: rgba(var(--accent-rgb), 0.10);
    --accent-softer: rgba(var(--accent-rgb), 0.05);
    --focus: rgba(var(--accent-rgb), 0.28);
    --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
    
    /* 2026 Glass Effect - Enhanced */
    --glass-bg: rgba(255, 255, 255, 0.82);
    --glass-bg-soft: rgba(255, 255, 255, 0.7);
    --glass-bg-strong: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(15, 20, 25, 0.10);
    --glass-border-subtle: rgba(20, 22, 26, 0.08);
    --glass-shadow: 0 8px 32px rgba(15, 18, 24, 0.1), 0 2px 8px rgba(15, 18, 24, 0.06);
    --glass-blur: 20px;
    --glass-blur-strong: 40px;
    --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
    --glass-sat: 1.3;
    --glass-bright: 1.02;
    --page-bg: #e8ecf1;
    
    /* 2026 Hero Gradient - Premium Mesh */
    --hero-bg:
        radial-gradient(ellipse 1200px 400px at 15% -15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
        radial-gradient(ellipse 800px 300px at 85% 10%, rgba(0, 255, 136, 0.08), transparent 60%),
        radial-gradient(ellipse 600px 600px at 50% 120%, rgba(0, 66, 37, 0.05), transparent 50%),
        linear-gradient(180deg, var(--card) 0%, var(--bg) 100%);
    
    /* Buttons */
    --btn-bg: var(--accent);
    --btn-text: var(--accent-contrast);
    --btn-border: var(--accent);
    --btn-font: var(--font-sans);
    --btn-shadow: 0 4px 14px rgba(0, 66, 37, 0.25), 0 2px 6px rgba(0, 66, 37, 0.15);
    --btn-shadow-hover: 0 8px 24px rgba(0, 66, 37, 0.35), 0 4px 10px rgba(0, 66, 37, 0.2);

    /* 2026 Animated Background - Premium */
    --bg-anim-1: color-mix(in srgb, #004225 20%, transparent);
    --bg-anim-2: rgba(0, 255, 136, 0.08);
    --bg-anim-3: rgba(255, 255, 255, 0.5);
    --bg-anim-4: rgba(0, 66, 37, 0.06);
    
    /* Card 3D Effects */
    --card-tilt: 1.5deg;
    --card-lift: -10px;
    --card-perspective: 1000px;
    
    /* Premium Transitions */
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --duration-instant: 0.1s;
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    --duration-slower: 0.6s;
    --duration-slowest: 0.8s;
    
    /* 2026 Gradient Effects */
    --gradient-border: linear-gradient(135deg, var(--accent), #007a3d, var(--accent-light));
    --gradient-text: linear-gradient(135deg, var(--accent) 0%, #006633 50%, var(--accent) 100%);
    --gradient-glow: radial-gradient(circle, rgba(0, 255, 136, 0.2), transparent 70%);
    --gradient-mesh: 
        radial-gradient(at 40% 20%, rgba(0, 255, 136, 0.12) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(0, 66, 37, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(0, 200, 100, 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(0, 100, 50, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(0, 255, 136, 0.1) 0px, transparent 50%);
    
    /* Noise texture for grain effect */
    --noise-opacity: 0.03;
}

/* Dark Mode – 2026 Premium Dark */
@media (prefers-color-scheme: dark){
    :root{
        /* 2026 Premium Dark - Tiefes, sattes Schwarz mit Akzenten */
        --bg: #0a0b0d;
        --bg-subtle: #111215;
        --card: #16181c;
        --card-elevated: #1c1f24;
        --text: #f4f5f7;
        --text-secondary: #9ca3af;
        --muted: #a8b0bc;
        --border: rgba(255, 255, 255, 0.08);
        --border-strong: rgba(255, 255, 255, 0.15);
        
        /* Premium Dark Shadows */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
        --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);
        --shadow-2xl: 0 32px 80px rgba(0, 0, 0, 0.8);
        --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.5);
        --shadow-hover: 0 35px 90px rgba(0, 0, 0, 0.7);
        --shadow-glow: 0 0 60px rgba(0, 255, 136, 0.15);
        --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        
        /* Dark Mode Radii */
        --radius: 18px;
        --radius-sm: 12px;
        --radius-lg: 24px;
        
        /* Accent in Dark - Leuchtend */
        --accent: #00c96b;
        --accent-hover: #00e07a;
        --accent-active: #00a858;
        --accent-strong: #00ff88;
        --accent-light: #00ff88;
        --accent-contrast: #0a0b0d;
        --accent-rgb: 0, 201, 107;
        --accent-soft: rgba(0, 255, 136, 0.15);
        --accent-softer: rgba(0, 255, 136, 0.08);
        --focus: rgba(0, 255, 136, 0.4);
        --focus-ring: 0 0 0 3px rgba(0, 255, 136, 0.3);
        
        /* Premium Glass Dark */
        --glass-bg: rgba(22, 24, 28, 0.85);
        --glass-bg-soft: rgba(22, 24, 28, 0.7);
        --glass-bg-strong: rgba(22, 24, 28, 0.95);
        --glass-border: rgba(255, 255, 255, 0.08);
        --glass-border-subtle: rgba(255, 255, 255, 0.05);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        --glass-blur: 24px;
        --glass-blur-strong: 48px;
        --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
        --glass-sat: 1.4;
        --glass-bright: 0.95;
        --page-bg: #060708;
        
        /* Dark Hero */
        --hero-bg:
            radial-gradient(ellipse 1200px 400px at 15% -15%, rgba(0, 255, 136, 0.12), transparent 70%),
            radial-gradient(ellipse 800px 300px at 85% 10%, rgba(0, 201, 107, 0.08), transparent 60%),
            radial-gradient(ellipse 600px 600px at 50% 120%, rgba(0, 100, 50, 0.06), transparent 50%),
            linear-gradient(180deg, var(--card) 0%, var(--bg) 100%);
        
        /* Dark Button Shadows */
        --btn-shadow: 0 4px 14px rgba(0, 255, 136, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
        --btn-shadow-hover: 0 8px 24px rgba(0, 255, 136, 0.3), 0 4px 10px rgba(0, 0, 0, 0.4);

        /* Animated background (dark) */
        --bg-anim-1: rgba(0, 255, 136, 0.08);
        --bg-anim-2: rgba(0, 201, 107, 0.06);
        --bg-anim-3: rgba(0, 0, 0, 0.3);
        --bg-anim-4: rgba(0, 100, 50, 0.05);
        
        /* Gradient Border Dark - Leuchtend */
        --gradient-border: linear-gradient(135deg, #00ff88, #00c96b, #00ffaa);
        --gradient-text: linear-gradient(135deg, #00ff88 0%, #00c96b 50%, #00ffaa 100%);
        --gradient-glow: radial-gradient(circle, rgba(0, 255, 136, 0.25), transparent 70%);
        --gradient-mesh: 
            radial-gradient(at 40% 20%, rgba(0, 255, 136, 0.1) 0px, transparent 50%),
            radial-gradient(at 80% 0%, rgba(0, 201, 107, 0.08) 0px, transparent 50%),
            radial-gradient(at 0% 50%, rgba(0, 255, 136, 0.06) 0px, transparent 50%),
            radial-gradient(at 80% 50%, rgba(0, 150, 75, 0.08) 0px, transparent 50%);
        
        --noise-opacity: 0.02;
    }
}

/* ===== LOADING OVERLAY & SPINNER ===== */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 15, 12, 0.85);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, visibility;
    transform: translateZ(0);
}

.loading-overlay.active,
.loading-overlay.visible {
    opacity: 1;
    visibility: visible;
}

@media (prefers-color-scheme: light) {
    .loading-overlay {
        background: rgba(250, 252, 251, 0.92);
    }
}

.loading-spinner {
    position: relative;
    width: 56px;
    height: 56px;
    transform: translateZ(0);
    will-change: transform;
}

.loading-spinner::before,
.loading-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    will-change: transform;
}

.loading-spinner::before {
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    animation: spinner-rotate 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading-spinner::after {
    inset: 8px;
    border-bottom-color: rgba(var(--accent-rgb), 0.5);
    border-left-color: rgba(var(--accent-rgb), 0.5);
    animation: spinner-rotate 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

.loading-content {
    text-align: center;
    margin-top: 1.25rem;
    transform: translateZ(0);
}

.loading-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}

@media (prefers-color-scheme: light) {
    .loading-title {
        color: #1a1f1c;
    }
}

.loading-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
    min-height: 1.4em;
    transition: opacity 0.2s ease;
}

@media (prefers-color-scheme: light) {
    .loading-text {
        color: #4a5550;
    }
}

.loading-dots {
    display: inline-block;
    letter-spacing: 2px;
    animation: loading-dots-fade 1.5s ease-in-out infinite;
}

@keyframes loading-dots-fade {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Progress Bar for Loading */
.loading-progress {
    width: 180px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 1rem;
}

@media (prefers-color-scheme: light) {
    .loading-progress {
        background: rgba(0,0,0,0.08);
    }
}

.loading-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, var(--accent), #007a3d, var(--accent));
    background-size: 200% 100%;
    border-radius: 3px;
    animation: loading-progress-anim 1.8s ease-in-out infinite;
    will-change: width, margin-left;
    transform: translateZ(0);
}

@keyframes loading-progress-anim {
    0% {
        width: 0%;
        margin-left: 0%;
    }
    50% {
        width: 50%;
        margin-left: 25%;
    }
    100% {
        width: 0%;
        margin-left: 100%;
    }
}

/* ===== ENHANCED GLOBAL ANIMATIONS ===== */

/* Smooth page load fade-in */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes glow-pulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
    }
    50% { 
        box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.5);
    }
}

/* Animation Helper Classes */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

.animate-slide-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

.animate-slide-left {
    animation: slideInLeft 0.5s ease-out forwards;
}

.animate-slide-right {
    animation: slideInRight 0.5s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse-soft 2s ease-in-out infinite;
}

.animate-glow {
    animation: glow-pulse 2s ease-in-out infinite;
}

/* Stagger delays for lists */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Animate main content on load */
main.card {
    animation: none;
}

/* Service cards enhanced hover */
.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-4px);
}

.service-card:hover .service-media img {
    transform: scale(1.08);
}

.service-media {
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}

.service-media img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button hover effects enhanced */
.btn-2026,
.rr-btn {
    position: relative;
    overflow: hidden;
}

.btn-2026::before,
.rr-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-2026:hover::before,
.rr-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Form inputs enhanced focus */
input:focus,
select:focus,
textarea:focus {
    transition: all 0.3s ease;
}

/* Link hover underline animation */
.content a, .services-grid a, .footer-link {
    position: relative;
}

.content a:not(.btn):not(.btn-2026):not(.rr-btn)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.content a:not(.btn):not(.btn-2026):not(.rr-btn):hover::after {
    width: 100%;
}

/* Hero badge pulse */
.hero-badge {
    animation: pulse-soft 3s ease-in-out infinite;
}

/* Pulse dot animation */
.pulse-dot {
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Icon hover rotate */
.service-card:hover svg,
.rr-process-step:hover svg {
    animation: icon-wiggle 0.5s ease;
}

@keyframes icon-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Stagger animation helper classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ===== GRADIENT TEXT EFFECT ===== */
.gradient-text {
    background: linear-gradient(135deg, var(--accent), #006633, var(--accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
}

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

/* Blinkender Cursor für Typing-Effekt */
.typing-cursor {
    border-right: 2px solid var(--accent);
    animation: typing-blink 0.7s step-end infinite;
}

@keyframes typing-blink {
    0%, 100% { border-color: var(--accent); }
    50% { border-color: transparent; }
}

/* =====================================================
   2026 PREMIUM HERO SECTION (Compact & Clean)
   ===================================================== */
.hero--2026 {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 48px);
    margin-bottom: var(--space-lg);
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Compact Variant für Unterseiten */
.hero--2026.hero--compact {
    padding: clamp(28px, 4vw, 52px) clamp(16px, 3vw, 40px);
}

.hero--2026 .hero-glow {
    display: none;
}

@keyframes hero-glow-pulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1);
        opacity: 0.2;
    }
    50% { 
        transform: translateX(-50%) scale(1.05);
        opacity: 0.35;
    }
}

.hero--2026 .hero-mesh {
    display: none;
}

.hero--2026 .hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero--2026 .hero-content {
    text-align: center;
}

.hero--2026 .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    backdrop-filter: none;
    margin-bottom: var(--space-md);
    box-shadow: none;
}

.hero--2026 .hero-badge svg {
    width: 14px;
    height: 14px;
}

.hero--2026 .hero-headline {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.hero--2026 .hero-highlight {
    color: var(--accent);
    position: relative;
}

@media (prefers-color-scheme: dark) {
    .hero--2026 .hero-highlight {
        color: var(--accent-light);
        text-shadow: 0 0 40px rgba(0, 255, 136, 0.3);
    }
}

.hero--2026 .hero-description {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto var(--space-md);
    text-align: center;
}

.hero--2026 .hero-sub {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto var(--space-md);
    text-align: center;
}

.hero-animated-line {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--accent);
    text-align: center;
    margin: 0 auto var(--space-md);
    min-height: 2em;
    letter-spacing: 0.02em;
}

.hero--2026 .hero-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.hero--2026 .hero-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text);
    backdrop-filter: blur(8px);
    transition: all var(--transition-smooth);
}

.hero--2026 .hero-feature svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
}

.hero--2026 .hero-feature:hover {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.hero--2026 .hero-feature:hover svg {
    color: var(--accent-contrast);
}

@media (prefers-color-scheme: dark) {
    .hero--2026 .hero-feature {
        background: rgba(0, 255, 136, 0.05);
        border-color: rgba(0, 255, 136, 0.15);
    }
    
    .hero--2026 .hero-feature:hover {
        background: var(--accent);
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
    }
}

.hero--2026 .hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: 0;
}

/* ─── Hero Contact Row (Tel + WhatsApp) ─── */
.hero-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.hero-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color .25s ease;
    letter-spacing: .01em;
}

.hero-contact-link:hover {
    color: var(--accent);
}

.hero-contact-link svg {
    flex-shrink: 0;
    opacity: .7;
    transition: opacity .25s ease;
}

.hero-contact-link:hover svg {
    opacity: 1;
}

.hero-contact-link--wa:hover {
    color: #25d366;
}

.hero-contact-link--wa:hover svg {
    fill: #25d366;
}

.hero-contact-divider {
    color: var(--border);
    font-size: var(--fs-sm);
    user-select: none;
}

.hero--2026 .btn-lg {
    padding: 18px 32px;
    font-size: var(--fs-base);
}

.hero--2026 .hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.hero--2026 .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero--2026 .stat-value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--accent);
    letter-spacing: -0.02em;
}

@media (prefers-color-scheme: dark) {
    .hero--2026 .stat-value {
        color: var(--accent-light);
    }
}

.hero--2026 .stat-label {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.hero--2026 .stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

/* Hero 2026 Responsive */
@media (max-width: 767.98px) {
    .hero--2026 {
        padding: clamp(30px, 6vw, 50px) clamp(16px, 4vw, 30px);
        min-height: auto;
        border-radius: var(--radius-lg);
    }
    
    .hero--2026 .hero-content {
        text-align: center;
    }
    
    .hero--2026 .hero-cta {
        justify-content: center;
    }
    
    .hero--2026 .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .hero--2026 .stat-item {
        align-items: center;
        min-width: 80px;
    }
    
    .hero--2026 .stat-divider {
        display: none;
    }
    
    .hero--2026 .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    .hero--2026 .hero-cta {
        flex-direction: column;
    }
    
    .hero--2026 .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero--2026 .hero-badge {
        font-size: var(--fs-xs);
        padding: 0;
    }
}

/* ===== PAGE HEADER (Service Pages) ===== */
.page-header {
    text-align: center;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px);
    margin-bottom: var(--space-xl);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: var(--hero-bg);
    box-shadow: var(--shadow-lg);
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    opacity: 0.4;
    pointer-events: none;
}

.page-header > * {
    position: relative;
    z-index: 1;
}

.page-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark) {
    .page-header-pill {
        background: rgba(0, 255, 136, 0.1);
        color: var(--accent-light);
        border-color: rgba(0, 255, 136, 0.2);
    }
}

.page-header-title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-black);
    line-height: 1.1;
    margin: 0 0 var(--space-md);
    letter-spacing: -0.03em;
}

.page-header-sub {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    line-height: 1.6;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
}

/* Extended Page Header (with KPI Pills) */
.page-header-extended .page-header-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
}

.kpi-pill {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 0.6em 1.2em;
    font-size: var(--fs-sm);
    color: var(--muted);
    backdrop-filter: blur(8px);
}

.kpi-pill strong {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

/* Service Page Main */
.service-page .services {
    margin-top: 0;
}

/* ===== ENHANCED HERO (Home/Kontakt/Reparaturen) ===== */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    display: none;
}

@keyframes hero-glow {
    0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    100% { transform: translate(5%, -5%) scale(1.15); opacity: 0.6; }
}

.hero-inner {
    position: relative;
    z-index: 1;
}

.hero-pill {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5em 1.2em;
    border-radius: 100px;
    margin-bottom: var(--space-md);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    animation: pill-glow 3s ease-in-out infinite alternate;
}

@keyframes pill-glow {
    0% { box-shadow: 0 0 0 0 transparent; }
    100% { box-shadow: 0 0 20px var(--accent-soft); }
}

@media (prefers-color-scheme: dark) {
    .hero-pill {
        background: rgba(0, 200, 100, 0.18);
        color: #00ff88;
        border-color: rgba(0, 255, 136, 0.25);
    }
}

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family: var(--font-sans);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-optical-sizing: auto;
    background: transparent;
    color:var(--text);
    min-height:100vh;
    line-height:1.55;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
}

/* ===============================
   Premium Glass Surfaces
   =============================== */
.site-header,
nav.site-nav,
.kp-login-card,
.kp-card:not(.kp-card-dashboard),
.kp-card-dashboard,
.order-card,
.rr-section,
.rr-kv-card,
.rr-check-item,
.rr-upload-item,
.legal-section{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

@media (prefers-color-scheme: light) {
    .site-header,
    nav.site-nav,
    .kp-login-card,
    .kp-card:not(.kp-card-dashboard),
    .kp-card-dashboard,
    .order-card,
    .rr-section,
    .rr-kv-card,
    .rr-check-item,
    .rr-upload-item,
    .legal-section {
        background: rgba(255, 255, 255, 0.88);
        border-color: rgba(0, 0, 0, 0.10);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    }
}

/* main.card – kein Glas, transparent für Partikel-Hintergrund */
body:not(.kp-portal) main.card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .site-header,
    nav.site-nav,
    .nav-link,
    .nav-toggle,
    .kp-login-card,
    .kp-card:not(.kp-card-dashboard),
    .kp-card-dashboard,
    .order-card,
    .rr-section,
    .rr-kv-card,
    .rr-check-item,
    .rr-upload-item,
    .legal-section{
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    }
}

@media (prefers-reduced-motion: reduce){
    body::before,
    body::after{
        animation: none !important;
    }
}

.wrap{ max-width:1100px; margin:0 auto; padding:16px 16px 28px; position:relative; z-index:1; }

header.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:0;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.brand img{
    max-width: 56px;
    height: auto;
    display:block;
    border-radius: 12px;
}

.brand-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    white-space: nowrap;
    background: var(--gradient-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease-in-out infinite;
}

nav.site-nav{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    align-items: center;
    justify-content:flex-end;
}

.nav-link{
    display:inline-flex;
    align-items:center;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    text-decoration:none;
    color:var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-link:hover{
    color: var(--text);
    background: rgba(var(--accent-rgb), 0.06);
}

.nav-link.is-active {
    color: var(--accent);
    font-weight: var(--fw-semibold);
}

/* CTA-Link im Header */
.nav-link--cta {
    background: var(--accent);
    color: #fff !important;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.nav-link--cta:hover {
    background: color-mix(in srgb, var(--accent) 85%, #000);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.25);
    color: #fff !important;
}

/* Mobile toggle – default hidden */
.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    font-size:22px;
    padding:8px 12px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    color:var(--text);
    cursor:pointer;
}

main.card{
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    position: relative;
    z-index: 1;
}

footer.site-footer{
    margin-top: var(--space-2xl);
    padding: 0;
    border-top: none;
    color:var(--muted);
    font-size: var(--fs-sm);
}

/* ===============================
   Header 2026 – Clean, open, no card
   =============================== */
:root {
    --hdr-accent: var(--accent);
    --hdr-accent-soft: rgba(var(--accent-rgb), .15);
    --hdr-shadow: rgba(0, 0, 0, .08);
    --page-bg: var(--bg, #f0f4f8);
}
@media (prefers-color-scheme: dark) {
    :root {
        --hdr-shadow: rgba(0, 0, 0, .22);
        --page-bg: var(--bg, #0d1117);
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --page-bg: var(--bg, #f0f4f8);
    }
}

html {
    background: var(--page-bg) !important;
}
body {
    background: transparent !important;
    overscroll-behavior-y: auto;
}
.wrap {
    background-color: transparent !important;
}

/* Animated background layer (subtle glass blur) */
body::before {
    content: "";
    position: fixed;
    inset: -20% -10% -20% -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1000px 520px at 15% 10%, var(--bg-anim-1), transparent 60%),
        radial-gradient(900px 480px at 85% 0%, var(--bg-anim-2), transparent 62%),
        radial-gradient(1200px 640px at 50% 120%, var(--bg-anim-3), transparent 65%);
    filter: blur(55px) saturate(130%);
    opacity: 1;
    animation: pcsp-bg-float 36s ease-in-out infinite alternate;
    transform: translateZ(0);
}

/* Additional subtle sheen for a premium feel */
body::after {
    content: "";
    position: fixed;
    inset: -10% -10% -10% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 680px at 50% -10%, rgba(255,255,255,0.55), transparent 65%),
        radial-gradient(900px 520px at 80% 110%, rgba(0, 66, 37, 0.12), transparent 70%);
    opacity: 0.9;
    animation: pcsp-bg-sheen 40s ease-in-out infinite alternate;
}

@keyframes pcsp-bg-sheen {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -1.2%, 0) scale(1.02); }
}

@keyframes pcsp-bg-float {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(0, -1.5%, 0) scale(1.03); }
    100% { transform: translate3d(0, 1.5%, 0) scale(1.05); }
}

/* Header – no card, no glass, just clean */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 16px 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: box-shadow .3s ease, background .3s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Sticky: subtle bg on scroll */
.site-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header.is-sticky.is-scrolled {
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.04);
}

/* Hide on scroll */
.site-header.is-hidden {
    transform: translateY(-120%);
    box-shadow: none;
}

/* Brand / Logo */
.site-header .brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.site-header .brand a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    border-radius: var(--radius);
    transition: opacity .2s ease;
}
.site-header .brand a:hover { opacity: 0.8; }
.site-header .brand a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.site-header .brand img {
    max-height: 48px;
    width: auto;
    height: auto;
    border-radius: 10px;
}

/* Navigation links – clean, minimal */
.site-header .site-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--muted);
    transition: color .2s ease, background .2s ease;
}
.site-header .site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.site-header .site-nav .nav-link:hover {
    color: var(--text);
    background: rgba(var(--accent-rgb), 0.05);
}
.site-header .site-nav .nav-link:hover::after {
    transform: scaleX(1);
}
.site-header .site-nav .nav-link:active {
    transform: scale(.98);
}
.site-header .site-nav .nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.site-header .site-nav .nav-link.is-active {
    color: var(--accent);
    font-weight: var(--fw-semibold);
}
.site-header .site-nav .nav-link.is-active::after {
    transform: scaleX(1);
}

/* CTA button in nav */
.site-header .site-nav .nav-link--cta {
    background: var(--accent);
    color: #fff !important;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    margin-left: 4px;
}
.site-header .site-nav .nav-link--cta::after { display: none; }
.site-header .site-nav .nav-link--cta:hover {
    background: color-mix(in srgb, var(--accent) 85%, #000);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2);
    color: #fff !important;
    transform: translateY(-1px);
}

/* Toggle button */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    color: var(--text);
    padding: 8px;
    cursor: pointer;
    transition: background .2s ease;
}
.nav-toggle:hover {
    background: rgba(var(--accent-rgb), 0.08);
}
.nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Mobile menu */
@media (max-width: 900px) {
    .site-header { flex-wrap: wrap; }

    body.nav-open .site-header,
    body.nav-open .site-header:hover,
    body.nav-open .site-header.is-hidden {
        transform: none !important;
    }
    body.nav-open {
        overflow: hidden;
        touch-action: none;
    }

    .nav-toggle { display: inline-flex; }
    .brand-name { display: none; }

    /* Fullscreen Overlay */
    #main-nav.site-nav {
        display: flex;
        flex-direction: column;
        gap: clamp(.4rem, 2.2vh, .75rem);
        padding: calc(env(safe-area-inset-top) + clamp(1rem, 4vh, 1.75rem)) calc(env(safe-area-inset-right) + clamp(.9rem, 4vw, 1.25rem)) calc(env(safe-area-inset-bottom) + clamp(1rem, 4vh, 1.75rem)) calc(env(safe-area-inset-left) + clamp(.9rem, 4vw, 1.25rem));
        align-items: center;
        justify-content: flex-start;

        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100svh;
        height: 100dvh;

        box-sizing: border-box;
        overflow-x: hidden;

        background: var(--bg);
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: opacity .25s ease-out, visibility 0s linear .25s;

        pointer-events: none;
        z-index: 9998;
    }
    #main-nav.site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease-out, visibility 0s;
        pointer-events: auto;
    }

    /* Logo im Menü */
    #main-nav.site-nav .nav-brand-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: var(--space-md);
    }
    #main-nav.site-nav .nav-brand-mobile a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 14px;
    }
    #main-nav.site-nav .nav-brand-mobile img {
        max-height: clamp(56px, 12vh, 80px);
        width: auto;
        height: auto;
        border-radius: 14px;
    }

    /* Links zentriert */
    #main-nav.site-nav .nav-link {
        justify-content: center;
        text-align: center;
        width: 100%;
        max-width: min(520px, 92vw);
        min-height: 48px;
        padding: clamp(.65rem, 2.2vh, .95rem) clamp(.9rem, 4vw, 1.2rem);
        font-size: clamp(1rem, 2.2vh, 1.06rem);
        color: var(--text);
        border-radius: var(--radius);
    }
    #main-nav.site-nav .nav-link:hover {
        background: rgba(var(--accent-rgb), 0.06);
    }
    #main-nav.site-nav .nav-link::after { display: none; }

    /* CTA im Mobile-Menü */
    #main-nav.site-nav .nav-link--cta {
        margin-top: var(--space-sm);
        background: var(--accent);
        color: #fff !important;
        border-radius: var(--radius-full);
        font-weight: var(--fw-semibold);
    }

    /* Close-Button */
    #main-nav.site-nav .nav-close {
        position: absolute;
        top: calc(env(safe-area-inset-top) + .75rem);
        right: .75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: clamp(.65rem, 2.2vh, .85rem);
        border-radius: var(--radius-full);
        background: var(--accent);
        border: none;
        color: #ffffff;
        box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
        transition: transform .18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    #main-nav.site-nav .nav-close:hover {
        transform: scale(1.08);
    }
    #main-nav.site-nav .nav-close:active { transform: scale(.94); }
    #main-nav.site-nav .nav-close:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
    }
}

/* Desktop */
@media (min-width: 901px) {
    .nav-brand-mobile,
    .nav-close { display: none !important; }

    #main-nav.site-nav {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        max-width: none !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;

        background: transparent !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===============================
   Kundenportal Login Design
   (kompatibel + kollisionsfrei zum Dashboard)
   =============================== */
.kp-login-page{
    max-width:520px;
    margin:32px auto 64px;
    padding:0 16px;
}

.kp-login-card{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:16px;
    padding:22px 18px;
    box-shadow:var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
}

/* Legacy Login Markup: .kp-card darf NICHT das Dashboard treffen */
.kp-card:not(.kp-card-dashboard){
    max-width:520px;
    margin:32px auto 64px;
    padding:22px 18px;
    border-radius:16px;
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
}

@media (prefers-color-scheme: dark){
    .kp-login-card,
    .kp-card:not(.kp-card-dashboard){
        border-color:rgba(255,255,255,.10);
        box-shadow:0 10px 30px rgba(0,0,0,.35);
    }
}

.kp-logo{ display:block; width:92px; height:auto; margin:0 auto 14px; }
.kp-title{ margin:0 0 8px; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height:1.2; text-align:center; color:var(--text); letter-spacing: -0.02em; }
.kp-subtitle{ margin:0 0 16px; font-size: var(--fs-sm); font-weight: var(--fw-regular); opacity:.85; text-align:center; color:var(--muted); }

.kp-alert{ border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin:10px 0 12px; font-size: var(--fs-sm); }
.kp-alert-error{ background:rgba(220,53,69,.10); border:1px solid rgba(220,53,69,.25); }
.kp-alert-info{  background:rgba(13,110,253,.08); border:1px solid rgba(13,110,253,.18); }

.kp-login-card form,
.kp-card:not(.kp-card-dashboard) form{ margin:0; }

.kp-login-card label,
.kp-card:not(.kp-card-dashboard) label{ display:block; margin:10px 0 6px; font-size:13px; color:var(--text); }

.kp-login-page .kp-login-card input,
.kp-login-card input,
.kp-card:not(.kp-card-dashboard) input,
.kp-login-page .kp-login-card select,
.kp-login-card select,
.kp-card:not(.kp-card-dashboard) select{
    /* Form controls: keep theme colors + improve readability in dark mode */
    color-scheme: light dark;

    width:100%;
    padding:10px 12px;
    border:1px solid var(--glass-border);
    border-radius:12px;
    font-size:15px;
    outline:none;
    background:color-mix(in srgb, var(--glass-bg) 75%, var(--card));
    color:var(--text);
}

@media (prefers-color-scheme: dark){
    .kp-login-card input,
    .kp-card:not(.kp-card-dashboard) input,
    .kp-login-card select,
    .kp-card:not(.kp-card-dashboard) select{ border-color:rgba(255,255,255,.14); }
}

/* Native select dropdown readability (browser support varies) */
.kp-login-card option,
.kp-card:not(.kp-card-dashboard) option{
    background: var(--card);
    color: var(--text);
}

.kp-login-card input:focus,
.kp-card:not(.kp-card-dashboard) input:focus,
.kp-login-card select:focus,
.kp-card:not(.kp-card-dashboard) select:focus{ border-color:rgba(0,0,0,.35); box-shadow: 0 0 0 4px var(--focus); }

@media (prefers-color-scheme: dark){
    .kp-login-card input:focus,
    .kp-card:not(.kp-card-dashboard) input:focus,
    .kp-login-card select:focus,
    .kp-card:not(.kp-card-dashboard) select:focus{ border-color:rgba(255,255,255,.28); box-shadow: 0 0 0 4px var(--focus); }
}

.kp-login-card button,
.kp-card:not(.kp-card-dashboard) button{
    width:100%;
    margin-top:12px;
    padding:11px 12px;
    border:0;
    border-radius:12px;
    cursor:pointer;
    font-size:15px;
}

.kp-login-card hr,
.kp-card:not(.kp-card-dashboard) hr{ margin:18px 0; border:0; border-top:1px solid rgba(0,0,0,.08); }

@media (prefers-color-scheme: dark){
    .kp-login-card hr,
    .kp-card:not(.kp-card-dashboard) hr{ border-top-color:rgba(255,255,255,.10); }
}

.kp-login-card h2,
.kp-card:not(.kp-card-dashboard) h2{ margin:0 0 10px; font-size:16px; color:var(--text); }

.kp-footer-link{ margin-top:14px; text-align:center; font-size:13px; }
.kp-footer-link a{ color:var(--text); text-decoration:none; }
.kp-footer-link a:hover{ text-decoration:underline; }

/* ===============================
   Kundenportal (pcservice_site) Basislayout
   =============================== */
body.kp-portal{
    --bg:var(--bg);
    --card:var(--card);
    --text:var(--text);
    --muted:var(--muted);
    --border:var(--border);
    --shadow:var(--shadow);

    margin:0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(255,255,255,0.55), transparent 60%),
        radial-gradient(900px 420px at 90% 0%, rgba(0,66,37,0.12), transparent 55%),
        linear-gradient(180deg, var(--card), var(--bg));
    color:var(--text);
    min-height:100vh;
}

@media (prefers-color-scheme: dark){
    body.kp-portal{
        --bg:var(--bg);
        --card:var(--card);
        --text:var(--text);
        --muted:var(--muted);
        --border:var(--border);
        --shadow:var(--shadow);
    }
}

body.kp-portal .wrap{ max-width:1100px; margin:0 auto; padding:16px 16px 28px; }
body.kp-portal header.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}
body.kp-portal .brand{ display:flex; align-items:center; gap:12px; min-width:0; }
body.kp-portal .brand img{ max-width:150px; height:auto; display:block; }
body.kp-portal .brand .titles{ min-width:0; }
body.kp-portal .brand .titles .h{
    margin:0;
    font-size:18px;
    font-weight:800;
    letter-spacing:0.02em;
    color:var(--text);
    line-height:1.2;
}
body.kp-portal .brand .titles .p{ margin:2px 0 0; font-size:12px; color:var(--muted); }

body.kp-portal nav.site-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}
body.kp-portal .nav-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--glass-border);
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg-soft);
    text-decoration:none;
    color:var(--text);
    font-size:13px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    white-space:nowrap;
}
body.kp-portal .nav-link:hover{ transform: translateY(-1px); }

body.kp-portal main.card{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:14px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    padding:18px;
}
body.kp-portal h1.page-title{ margin:0 0 6px; font-size:20px; }
body.kp-portal p.lead{ margin:0; color:var(--muted); font-size:13px; }

body.kp-portal footer.site-footer{
    margin-top:18px;
    padding:14px 0 0;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:12px;
}
body.kp-portal .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}
body.kp-portal .footer-links a{ color:#111; text-decoration:none; }
@media (prefers-color-scheme: dark){
    body.kp-portal .footer-links a{ color:var(--text); }
}
body.kp-portal .footer-links a:hover{ text-decoration:underline; }

@media (max-width: 720px){
    body.kp-portal header.site-header{ flex-direction:column; align-items:flex-start; }
    body.kp-portal nav.site-nav{ justify-content:flex-start; }
}

/* ===============================
   Kundenportal Dashboard Design
   =============================== */
.kp-page{
    width:100%;
    max-width:1100px;
    padding:20px;
}

.kp-card-dashboard{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border-radius:14px;
    box-shadow:var(--glass-shadow);
    padding:26px 24px 22px;
    border:1px solid var(--glass-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.kp-logo-dashboard{
    max-width:160px;
    height:auto;
}

.kp-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.kp-header-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.kp-title-block h1{
    margin:6px 0 4px;
    font-size:22px;
    font-weight:700;
    letter-spacing:0.03em;
    color:var(--text);
}

.kp-title-block p{
    margin:0;
    font-size:14px;
    color:var(--muted);
}

.kp-user-chip{
    font-size:12px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--card);
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(0,0,0,0.06);
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--text);
}

.kp-user-label{ font-weight:500; }

.kp-header-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.kp-logout-form{ margin:0; }

.kp-logout-button{
    padding:6px 12px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--text);
    color:var(--card);
    transition:transform 0.05s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.kp-logout-button:hover{
    box-shadow:0 6px 14px rgba(0,0,0,0.25);
    filter:brightness(1.05);
}

.kp-logout-button:active{
    transform:translateY(1px);
    box-shadow:0 3px 8px rgba(0,0,0,0.20);
}

.kp-session-timer{
    font-size:11px;
    color:var(--muted);
}

.orders-section-title{
    margin:10px 2px 8px;
    font-size:16px;
    font-weight:600;
    color:var(--text);
}

.orders-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:14px;
}
.orders-grid--col{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.orders--spaced{ margin-top:24px; }

.order-card{
    background: linear-gradient(180deg, var(--glass-highlight), transparent 55%), var(--glass-bg);
    border-radius:14px;
    border:1px solid var(--glass-border);
    padding:12px 14px 10px;
    box-shadow:var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
}

.order-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:6px;
    gap:8px;
    flex-wrap:wrap;
}

.order-header .order-dhl-wrap{
    width:100%;
    margin-top:6px;
    padding-top:6px;
    border-top:1px dashed var(--border);
    display:flex;
    justify-content:flex-start;
}

.order-title-main{
    display:flex;
    align-items:baseline;
    gap:6px;
    flex-wrap:wrap;
}

.order-number{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}

.order-title{
    font-weight:600;
    font-size:14px;
    color:var(--text);
}

.order-meta{
    font-size:11px;
    color:var(--muted);
}

.docs-table-wrapper{
    overflow-x:auto;
    margin-top:8px;
}

.docs-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.docs-table th,
.docs-table td{
    border-bottom:1px solid rgba(0,0,0,0.08);
    padding:4px 4px;
    text-align:left;
    vertical-align:middle;
    white-space:nowrap;
    color:var(--text);
}

@media (prefers-color-scheme: dark){
    .docs-table th,
    .docs-table td{ border-bottom-color:rgba(255,255,255,0.12); }
}

.docs-table th{
    font-weight:600;
    color:var(--muted);
}

.docs-table tbody tr:last-child td{ border-bottom:none; }

.doc-type-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 7px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,0.14);
    font-size:11px;
    background:rgba(0,0,0,0.04);
    color:var(--text);
}

@media (prefers-color-scheme: dark){
    .doc-type-badge{
        border-color:rgba(255,255,255,0.18);
        background:rgba(255,255,255,0.08);
    }
}

.doc-link{ text-decoration:none; color:var(--text); }
.doc-link:hover{ text-decoration:underline; }

.doc-unavailable{ color:var(--muted); }

.doc-empty{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}

.login-again{
    margin-top:22px;
    font-size:12px;
    color:var(--muted);
    text-align:center;
}

.login-again a{ color:var(--text); text-decoration:none; }

/* Keyboard focus visibility (accessibility) */
:where(a, button, input, select, .nav-toggle, .nav-link):focus-visible{
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

/* Extra contrast when user requests it */
@media (prefers-contrast: more){
    :root{ --muted:#444444; --border:#c2c2c2; }
    @media (prefers-color-scheme: dark){
        :root{ --muted:#d2d6dd; --border:#565b63; }
    }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; }
}

.login-again a:hover{ text-decoration:underline; }

@media (min-width: 768px){
    .kp-page{ padding-top:24px; }
    .orders-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 720px){
    .kp-page{ padding:14px 10px; }
    .kp-card-dashboard{ padding:18px 14px 16px; }
    .kp-title-block h1{ font-size:18px; }
    .kp-title-block p{ font-size:12px; }
    .kp-logo{ max-width:50px; }
}

@media (max-width: 520px){
    .kp-header{ flex-direction:column; align-items:stretch; gap:10px; }
    .kp-header-left{ gap:10px; }
    .kp-header-right{
        flex-direction:row; justify-content:space-between; align-items:center; width:100%;
        gap:8px; flex-wrap:wrap;
    }
    .kp-user-chip{ font-size:11px; padding:5px 10px; }
    .kp-logo{ max-width:44px; }
    .kp-page{ padding:10px 6px !important; }
    .kp-card-dashboard{ padding:14px 10px 12px; border-radius:10px; }
    .orders-section-title{ font-size:15px; }
    .kp-session-timer{ font-size:10px; }
    /* Legacy doc items */
    .kp-doc-item{ padding:10px; }
    .kp-doc-meta{ flex-wrap:wrap; gap:6px; }
    .kp-doc-preview{ height:50vw; min-height:200px; }
    .kp-doc-actions a{
        display:block; width:100%; text-align:center;
        padding:10px; min-height:44px;
    }
}

@media (max-width: 380px){
    .kp-page{ padding:6px 4px !important; }
    .kp-card-dashboard{ padding:10px 8px 8px; }
    .kp-header-right{ flex-direction:column; align-items:stretch; }
    .kp-user-chip{ text-align:center; }
}

/* === HERO (aus index.php) === */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: clamp(18px, 3.6vw, 44px);
    margin-bottom: clamp(18px, 3vw, 34px);
}

a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 14px 22px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent;
    background: var(--accent, #004225);
    color: var(--accent-contrast);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: 
        transform var(--duration-normal) var(--ease-out), 
        box-shadow var(--duration-normal) var(--ease-smooth), 
        filter var(--duration-fast) ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Button shimmer effect */
a.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.15) 45%,
        rgba(255,255,255,0.25) 50%,
        rgba(255,255,255,0.15) 55%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-out);
    z-index: 1;
}

a.btn:hover::after {
    transform: translateX(100%);
}

a.btn.btn-primary{
    background: var(--accent, #004225);
    color: var(--accent-contrast);
    border-color: transparent;
}

a.btn.btn-ghost{
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.22);
    box-shadow: none;
}

a.btn.btn-ghost::after {
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(var(--accent-rgb), 0.08) 45%,
        rgba(var(--accent-rgb), 0.15) 50%,
        rgba(var(--accent-rgb), 0.08) 55%,
        transparent 60%
    );
}

a.btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0,0,0,.24);
    filter: brightness(1.05);
}

a.btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    filter: brightness(.96);
    transition-duration: var(--duration-fast);
}

a.btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .hero {
        padding: 18px;
        border-radius: 16px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.12;
    }

    .hero-sub {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions a.btn {
        width: 100%;
        margin-top: 10px;
    }
}

/* === LOKALE REPARATUREN-STYLES (aus index.php) === */
.rr-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.rr-row{display:grid;grid-template-columns:1fr;gap:10px}
.rr-row.two{grid-template-columns:1fr 1fr}
.rr-field label{display:block;font-weight:600;margin-bottom:6px}

/* Basis-Felder (2026 – var-basiert, wie Kontaktseite) */
.rr-field input[type=text],
.rr-field input[type=email],
.rr-field input[type=tel],
.rr-field textarea{
    width:100%;
    padding:10px 14px;
    min-height:44px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    transition:border-color .2s, box-shadow .2s;
}
.rr-field select{
    width:100%;
    padding:10px 40px 10px 14px;
    min-height:44px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    transition:border-color .2s, box-shadow .2s;
}

/* Selects: Chevron-Pfeil */
.rr-field select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    line-height:1.2;
    font:inherit;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:18px;
}
.rr-field select::-ms-expand{display:none;}

@media (prefers-color-scheme: light){
    .rr-field select{
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
}

/* Fokus (alle Felder) */
.rr-field select:focus,
.rr-field input:focus,
.rr-field textarea:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
}

/* Dark-Mode: Dropdown Optionen lesbar */
@media (prefers-color-scheme: dark){
    .rr-field select option{
        background:#2b2b2b;
        color:#ffffff;
    }
}

/* Placeholder besser lesbar */
.rr-field input::placeholder,
.rr-field textarea::placeholder{opacity:.7}

/* Checkboxen & Radios sauber ausrichten */
.rr-field input[type=checkbox],
.rr-field input[type=radio]{
    width:auto;
    margin:0;
    flex:0 0 auto;
    accent-color:var(--accent);
}

.rr-choice{display:flex;align-items:flex-start;gap:10px;line-height:1.45;font-weight:450}
.rr-choice span{display:block}

/* Sektionen (macht Kostenvoranschlag + Einwilligungen übersichtlicher) */
.rr-section{padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:rgba(var(--accent-rgb),.03)}
.rr-section-title{margin:0 0 8px;font-weight:700}
.rr-help{margin-top:6px;font-size:.95em;opacity:.85}

/* Upload-Liste (nur Bilderfeld) */
.rr-upload-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rr-upload-input{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.rr-upload-list{display:grid;gap:10px;margin-top:12px}
.rr-upload-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
@media (prefers-color-scheme: light){.rr-upload-item{border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.015)}}
@media (max-width: 480px){
    .rr-upload-item{grid-template-columns:48px 1fr;gap:8px}
    .rr-upload-thumb{width:48px;height:36px}
    .rr-upload-remove{grid-column:1/-1;justify-self:end}
}
.rr-upload-thumb{width:64px;height:48px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
@media (prefers-color-scheme: light){.rr-upload-thumb{border-color:rgba(0,0,0,.18);background:rgba(0,0,0,.035)}}
.rr-upload-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.rr-upload-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-upload-sub{font-size:.92em;opacity:.85}
.rr-upload-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:10px 14px;
    border-radius:14px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    border:1px solid transparent;
    background:var(--accent, #004225);
    color:var(--accent-contrast);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.rr-upload-remove:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.22);filter:brightness(1.03)}
.rr-upload-remove:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.18);filter:brightness(.98)}
.rr-upload-remove:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.rr-upload-warn{margin-top:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,170,0,.35);background:rgba(255,170,0,.08)}
@media (prefers-color-scheme: light){.rr-upload-warn{border-color:rgba(200,120,0,.35);background:rgba(255,170,0,.10)}}

/* Kostenvoranschlag – Kartenlayout */
.rr-kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
@media (max-width:720px){.rr-kv-grid{grid-template-columns:1fr}}

.rr-kv-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);cursor:pointer}
@media (prefers-color-scheme: light){.rr-kv-card{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.02)}}

.rr-kv-card input{margin:0}
.rr-kv-content{display:flex;flex-direction:column;gap:2px}
.rr-kv-title{font-weight:700}
.rr-kv-text{opacity:.9}

.rr-kv-card:hover{background:rgba(255,255,255,.08)}
@media (prefers-color-scheme: light){.rr-kv-card:hover{background:rgba(0,0,0,.04)}}

.rr-kv-card:has(input:checked){
    border-color:rgba(var(--accent-rgb),.65);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);
}

.rr-check-list{display:grid;gap:10px;margin-top:6px}
.rr-check-item{padding:10px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
@media (prefers-color-scheme: light){.rr-check-item{border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.015)}}
.rr-check-item:hover{background:rgba(255,255,255,.05)}
@media (prefers-color-scheme: light){.rr-check-item:hover{background:rgba(0,0,0,.03)}}

/* Fokus */
.rr-field select:focus,
.rr-field input:focus,
.rr-field textarea:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);
    border-color:rgba(var(--accent-rgb),.55);
}

.rr-field textarea{min-height:110px;resize:vertical}
.rr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.rr-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:14px 20px;
    border-radius:14px;
    font-weight:600;
    text-decoration:none;
    line-height:1;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    border:1px solid transparent;
    background:var(--accent, #004225);
    color:var(--accent-contrast);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.rr-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.22);filter:brightness(1.03)}
.rr-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.18);filter:brightness(.98)}
.rr-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.rr-btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none;transform:none;filter:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* Varianten wie im HERO */
.rr-btn-ghost{background:rgba(var(--accent-rgb), 0.08);color:var(--accent);border-color:rgba(var(--accent-rgb), 0.22)}
.rr-btn-success{border-color:var(--accent);background:var(--accent)}
.rr-btn-success:hover{background:var(--accent-strong)}

.rr-alert{margin-top:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.rr-alert-error{border-color:rgba(255,80,80,.35)}
.rr-alert-ok{border-color:rgba(80,255,140,.28)}

/* Schöne Pflichtfeld-Meldung unten */
#rr-required-hint{
    margin-top:12px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,80,80,.35);
    background:rgba(255,80,80,.08);
    font-weight:600;
}
@media (prefers-color-scheme: light){
    #rr-required-hint{
        background:rgba(255,80,80,.12);
    }
}

@media (max-width:720px){.rr-row.two{grid-template-columns:1fr}}

/* Signatur */
.rr-sign-wrap{margin-top:10px}
#rr-signature{width:100%;height:200px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);touch-action:none}
@media (prefers-color-scheme: light){
    #rr-signature{border-color:rgba(0,0,0,.22);background:rgba(0,0,0,.035)}
}
.rr-sign-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ===== Reparatur-Prozess Sektion ===== */
.rr-process-section {
    margin: 3rem 0 3.5rem;
    padding: 2.5rem 1.5rem;
    position: relative;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    overflow: hidden;
}

.rr-process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

@media (prefers-color-scheme: light) {
    .rr-process-section {
        background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(0,0,0,0.02) 100%);
        border-color: rgba(0, 0, 0, 0.10);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }
}

.rr-process-header {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.rr-process-title {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 800;
    margin: 0 0 1rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--text) 50%, var(--accent) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-text 4s ease-in-out infinite;
}

@keyframes shimmer-text {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.rr-process-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
}

@media (prefers-color-scheme: light) {
    .rr-process-subtitle {
        background: rgba(var(--accent-rgb), 0.07);
        border-color: rgba(var(--accent-rgb), 0.18);
        color: #003319;
    }
}

.rr-process-subtitle::before {
    content: none;
}

.rr-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Verbindungslinie zwischen den Schritten */
.rr-process-grid::before {
    content: '';
    position: absolute;
    top: 56px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(var(--accent-rgb), 0.3) 10%, 
        rgba(var(--accent-rgb), 0.3) 90%, 
        transparent 100%
    );
    z-index: 0;
}

@media (max-width: 900px) {
    .rr-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rr-process-grid::before {
        display: none;
    }
}

@media (max-width: 540px) {
    .rr-process-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .rr-process-section {
        padding: 2rem 1rem;
        margin: 2rem 0;
    }
}

.rr-process-step {
    position: relative;
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

@media (prefers-color-scheme: light) {
    .rr-process-step {
        border-color: rgba(0, 0, 0, 0.10);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
}

.rr-process-step:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(var(--accent-rgb), 0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

@media (prefers-color-scheme: light) {
    .rr-process-step:hover {
        box-shadow: 
            0 20px 40px rgba(0,0,0,0.08),
            0 0 0 1px rgba(var(--accent-rgb), 0.25);
    }
}

.rr-process-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--accent) 0%, rgba(var(--accent-rgb), 0.7) 100%);
    color: var(--accent-contrast);
    box-shadow: 
        0 8px 24px rgba(var(--accent-rgb), 0.35),
        inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rr-process-step:hover .rr-process-icon {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 
        0 12px 32px rgba(var(--accent-rgb), 0.45),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.rr-process-number {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 800;
    border: 2px solid var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.rr-process-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    color: var(--text-primary);
}

.rr-process-step p {
    font-size: 0.92rem;
    opacity: 0.8;
    margin: 0;
    line-height: 1.55;
}

.rr-process-info {
    max-width: 700px;
    margin: 2.5rem auto 0;
    position: relative;
    z-index: 1;
}

.rr-info-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.06);
}

.rr-info-card svg {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}

.rr-info-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.rr-info-card a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ===== Formular-Sektion Header (2026 – Kontakt-Stil) ===== */
.rr-form-section {
    margin-top: 2.5rem;
    scroll-margin-top: 2rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 24px 24px;
    position: relative;
    overflow: hidden;
}
.rr-form-section::before {
    content: '';
    position: absolute;
    inset: -80px;
    background: radial-gradient(circle at 30% 0%, rgba(var(--accent-rgb), .10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.rr-form-section > * { position: relative; z-index: 1; }

.rr-form-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.rr-form-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(var(--accent-rgb), .12);
    border-radius: 12px;
    color: var(--accent);
}

.rr-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: 2px;
}

.rr-form-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.rr-form-subtitle {
    font-size: 13px;
    opacity: .6;
    margin: 2px 0 0;
    line-height: 1.4;
}

/* 2026: Labels */
.rr-form-section .rr-field label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: .01em;
}

/* 2026: Inputs & Textareas */
.rr-form-section .rr-field input[type=text],
.rr-form-section .rr-field input[type=email],
.rr-form-section .rr-field input[type=tel],
.rr-form-section .rr-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}

/* 2026: Selects mit Chevron-Pfeil */
.rr-form-section .rr-field select {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    transition: border-color .2s, box-shadow .2s;
}
@media (prefers-color-scheme: light) {
    .rr-form-section .rr-field select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
}

/* 2026: Focus */
.rr-form-section .rr-field input:focus,
.rr-form-section .rr-field textarea:focus,
.rr-form-section .rr-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}

/* 2026: Sektionen im Formular */
.rr-form-section .rr-section {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(var(--accent-rgb), .03);
    padding: 16px;
}

/* 2026: Alerts */
.rr-form-section .rr-alert {
    border-radius: 10px;
    font-size: 13px;
    padding: 12px 14px;
}
.rr-form-section .rr-alert-error {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.3);
}
.rr-form-section .rr-alert-ok {
    background: rgba(34,197,94,.08);
    border-color: rgba(34,197,94,.3);
}

/* 2026: Buttons */
.rr-form-section .rr-actions {
    margin-top: 20px;
}
.rr-form-section .rr-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .rr-form-section {
        padding: 20px 16px 18px;
    }
    .rr-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ===== PIN/OTP Input Boxes (Apple Style) ===== */
.otp-input-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.otp-input-box {
    width: 52px;
    height: 64px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    caret-color: var(--accent);
    transition: all 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.otp-input-box::-webkit-outer-spin-button,
.otp-input-box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

@media (prefers-color-scheme: light) {
    .otp-input-box {
        border-color: rgba(0,0,0,0.18);
        background: rgba(0,0,0,0.04);
    }
}

.otp-input-box:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: 
        0 0 0 4px rgba(var(--accent-rgb), 0.15),
        0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.otp-input-box.filled {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.otp-input-box.error {
    border-color: #ff4444;
    background: rgba(255,68,68,0.08);
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Responsive für kleinere Screens */
@media (max-width: 400px) {
    .otp-input-container {
        gap: 0.35rem;
    }
    .otp-input-box {
        width: 44px;
        height: 56px;
        font-size: 1.5rem;
        border-radius: 10px;
    }
}
@media (max-width: 360px) {
    .otp-input-container {
        gap: 0.2rem;
    }
    .otp-input-box {
        width: 36px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 8px;
    }
}

/* Hidden combined input for form submission */
.otp-hidden-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* OTP Section Styling */
.otp-section {
    text-align: center;
    padding: 1.5rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    margin: 1rem 0;
}

@media (prefers-color-scheme: light) {
    .otp-section {
        background: rgba(0,0,0,0.02);
        border-color: rgba(0,0,0,0.08);
    }
}

.otp-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--text);
}

.otp-section-subtitle {
    font-size: 0.92rem;
    opacity: 0.75;
    margin: 0 0 1rem;
}

.otp-phone-display {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.otp-phone-display svg {
    width: 18px;
    height: 18px;
}

/* Append-only: mark selected KV + consents in Accent */

/* KV cards (radio) */
.rr-kv-card:has(input:checked){
    border-color:var(--accent);
    background:rgba(var(--accent-rgb),.10);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
}
@media (prefers-color-scheme: light){
  .rr-kv-card:has(input:checked){
        background:rgba(var(--accent-rgb),.08);
        box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);
  }
}

/* Consent checklist (checkboxes) */
.rr-check-item:has(input:checked){
    border-color:var(--accent);
    background:rgba(var(--accent-rgb),.10);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
}
@media (prefers-color-scheme: light){
  .rr-check-item:has(input:checked){
        background:rgba(var(--accent-rgb),.08);
        box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);
  }
}

/* Optional: make link underline a bit clearer inside selected items */
.rr-check-item:has(input:checked) a{ text-decoration: underline; }

/* Links in Einwilligungen: nicht lila, sondern wie normaler Text (Dark/Light) */

.rr-check-item a,
.rr-check-item a:visited{
  color: inherit;
}

/* Optional: im Darkmode explizit weiß, falls irgendwo anders Link-Farben gesetzt sind */
@media (prefers-color-scheme: dark){
  .rr-check-item a,
  .rr-check-item a:visited{
    color: #ffffff !important;
  }
}

/* ===== Dokument-Typ exakt wie Button darstellen ===== */

/* Typ-Badge übernimmt Button-Design */
.doc-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;

    padding: 10px 16px;          /* identisch zum Button */
    border-radius: 999px;

    min-height: 40px;            /* gleiche Höhe wie Button */
    box-sizing: border-box;
}

/* Download-Button Referenz (nur zur Sicherheit konsistent halten) */
.rr-btn-download {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 0.9rem;
}

/* Spalten sauber zentrieren */
.col-type,
.col-document,
.col-stand {
    vertical-align: middle;
}

/* ===== Dashboard: Datum gleichwertig zum Button ===== */

.col-stand {
    font-size: 0.95rem;     /* größer als vorher */
    font-weight: 500;       /* gleiche Gewichtung wie Button/Text */
    opacity: 1;             /* nicht mehr „blass“ */
    min-height: 40px;       /* gleiche Höhe wie Button */
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ===== Dashboard: Luft & Abstände ===== */

/* Gesamte Order-Karte etwas luftiger */
.order-card {
    padding: 20px 24px;
}

/* Abstand zwischen Titel und Tabelle */
.order-header {
    margin-bottom: 14px;
}

/* Tabellenkopf luftiger */
.docs-table thead th {
    padding-bottom: 10px;
}

/* Tabellenzeilen mehr Höhe */
.docs-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Spalten untereinander optisch ruhiger */
.col-type {
    padding-right: 24px;
}

.col-document {
    padding-left: 24px;
    padding-right: 24px;
}

.col-stand {
    padding-left: 24px;
}

/* Button & Badge nicht gequetscht */
.doc-type-badge,
.rr-btn-download {
    margin: 4px 0;
}

/* Abstand zwischen mehreren Aufträgen */
.orders-grid {
    gap: 24px !important;
}

/* ===== Dashboard: saubere Tabellen-Auswahl ===== */

/* Feste Spaltenbreiten, damit Kopf & Inhalt passen */
.docs-table {
    table-layout: fixed;
    width: 100%;
}

/* Einheitliche Zellhöhe */
.docs-table th,
.docs-table td {
    vertical-align: middle;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Spaltenbreiten definieren */
.docs-table th:nth-child(1),
.docs-table td:nth-child(1) {
    width: 180px; /* Typ */
}

.docs-table th:nth-child(2),
.docs-table td:nth-child(2) {
    width: auto; /* Dokument */
    text-align: center;
}

.docs-table th:nth-child(3),
.docs-table td:nth-child(3) {
    width: 160px; /* Stand */
    white-space: nowrap;
}

/* Einheitliche visuelle Höhe */
.doc-type-badge,
.rr-btn-download,
.col-stand {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* Datum wie Button (neutral) */
.rr-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  min-height:40px;
  line-height:1;
  font-size:0.9rem;
  font-weight:500;
  border-radius:999px;
  box-sizing:border-box;
}
@media (prefers-color-scheme: light){
  .rr-pill{ background:rgba(0,0,0,.035); }
}

/* ===== Dashboard Mobile: Tabelle wird zu „Cards“ (ohne Desktop-Design zu ändern) ===== */
@media (max-width: 720px){

  .kp-page{ padding: 14px; }
  .kp-card-dashboard{ padding: 18px 16px; }

  .docs-table thead{ display:none; }

  .docs-table,
  .docs-table tbody,
  .docs-table tr,
  .docs-table td{
    display:block;
    width:100%;
  }

  .docs-table-wrapper{ overflow-x: visible; }

  .docs-table tbody tr{
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    margin-top:12px;
    background:rgba(255,255,255,.03);
  }
  @media (prefers-color-scheme: light){
    .docs-table tbody tr{ background:rgba(0,0,0,.02); }
  }

  .docs-table td{
    border-bottom:0;
    padding:10px 0;
    white-space:normal;
  }

  .docs-table td::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:6px;
  }

  /* Inhalte nicht gequetscht */
  .doc-type-badge,
  .rr-btn-download,
  .rr-pill{
    width:100%;
    justify-content:center;
  }
}

/* ===============================
   Admin Dashboard – Customer Dropdown
   (append at VERY END of site.css)
   =============================== */

/* Make the select itself readable and consistent */
.kp-card-dashboard select#customer_id{
  color-scheme: light dark;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
}

.kp-card-dashboard select#customer_id:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

/* Try to force option readability where browsers allow it */
@media (prefers-color-scheme: light){
  .kp-card-dashboard select#customer_id,
  .kp-card-dashboard select#customer_id option{
    color: #111111;
    background: #ffffff;
  }
}

@media (prefers-color-scheme: dark){
  .kp-card-dashboard select#customer_id,
  .kp-card-dashboard select#customer_id option{
    color: #ffffff;
    background: #2a2b2e;
  }
}

/* --- FIX: remove broken icon pseudo-elements (squares) --- */
/* Ursache: globale CSS-Regeln fügen ::before/::after Icons hinzu (Icon-Font nicht geladen) */
/* Lösung: Für Admin-Dashboard explizit deaktivieren */

.kp-admin-search::before,
.kp-admin-search::after,
.order-card li::before,
.order-card li::after,
.order-card li a::before,
.order-card li a::after{
    content: none !important;
    display: none !important;
}

/* sicherstellen, dass keine Icon-Fonts erzwungen werden */
.kp-admin-search,
.order-card li,
.order-card li a{
    font-family: inherit !important;
}

.order-card li a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    white-space: nowrap;
}
.order-card li a:hover{
    background: rgba(var(--accent-rgb),0.22);
}
@media (prefers-color-scheme: dark){
    .order-card li a{
        background: rgba(var(--accent-rgb),0.30);
        color: #eafff3;
        border-color: rgba(var(--accent-rgb),0.45);
    }
    .order-card li a:hover{ background: rgba(var(--accent-rgb),0.38); }
}

/* Delete button styled like download, but red */
.order-card li button.kp-btn-delete{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    background: rgba(176,0,32,0.16);
    color: #b00020;
    border: 1px solid rgba(176,0,32,0.35);
}
.order-card li button.kp-btn-delete:hover{
    background: rgba(176,0,32,0.22);
}
@media (prefers-color-scheme: dark){
    .order-card li button.kp-btn-delete{
        background: rgba(176,0,32,0.30);
        color: #ffd6db;
        border-color: rgba(176,0,32,0.45);
    }
    .order-card li button.kp-btn-delete:hover{ background: rgba(176,0,32,0.38); }
}

/* Admin Dashboard - layout + sidebar */
.kp-admin-layout{
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    margin-top: 10px;
    align-items: stretch;
    min-height: 70vh;
}

.kp-admin-layout.kp-admin-layout--fullwidth{
    grid-template-columns: 1fr;
}

.kp-admin-sidebar{
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
    height: 70vh;
    display: flex;
    flex-direction: column;
}

.kp-admin-sidebar-title{
    padding: 12px 14px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark){
    .kp-admin-sidebar-title{ border-bottom-color: rgba(255,255,255,0.12); }
}

.kp-admin-sidebar-tools{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark){
    .kp-admin-sidebar-tools{ border-bottom-color: rgba(255,255,255,0.12); }
}

.kp-admin-search{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    outline: none;
}
.kp-admin-search:focus{
    box-shadow: 0 0 0 4px var(--focus);
}

/* Suchfeld: Clear (X) rot einfärben */
.kp-admin-search::-webkit-search-cancel-button{
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    cursor: pointer;
    background-color: #b00020;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L12 13.41l-6.29 6.3-1.42-1.42L10.59 12 4.29 5.71 5.7 4.29 12 10.59l6.29-6.3z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Firefox: eigenes Clear-Button-Overlay */
.kp-admin-search::-moz-search-clear{
    color: #b00020;
}

.kp-admin-customer-list{
    flex: 1 1 auto;
    overflow: auto;
    padding: 8px;
}

.kp-admin-customer-link{
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
}
.kp-admin-customer-link:hover{
    background: rgba(0,0,0,0.04);
}
@media (prefers-color-scheme: dark){
    .kp-admin-customer-link:hover{ background: rgba(255,255,255,0.08); }
}

.kp-admin-customer-link.is-active{
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),0.18);
    font-weight: 700;
}
@media (prefers-color-scheme: dark){
    .kp-admin-customer-link.is-active{
        border-color: var(--accent);
        background: rgba(var(--accent-rgb),0.32);
    }
}

.kp-admin-cust-no{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2px;
    background: rgba(var(--accent-rgb),0.22);
    color: var(--accent);
}
@media (prefers-color-scheme: dark){
    .kp-admin-cust-no{
        background: rgba(var(--accent-rgb),0.40);
        color: #eafff3;
    }
}

.kp-admin-cust-name{
    display: block;
    font-size: 14px;
    font-weight: 550;
    color: var(--text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Main panel */
.kp-admin-main{ min-width: 0; }

.kp-admin-main-card{
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 18px;
}

.kp-admin-main-card.kp-admin-main-card--fullwidth{
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.kp-admin-main-title{
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}

/* Orders & documents */

/* DHL tracking UI (yellow/red) */
.kp-dhl-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
}
.kp-dhl-label{
    font-weight: 900;
    letter-spacing: 0.3px;
    color: #D40511; /* DHL red */
    font-size: 13px;
}
.kp-dhl-input{
    flex: 1 1 240px;
    min-width: 180px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(0,0,0,0.02);
    color: var(--text);
    outline: none;
}
.kp-dhl-input:focus{
    box-shadow: 0 0 0 4px rgba(255,204,0,0.35);
    border-color: rgba(255,204,0,0.9);
}
.kp-dhl-input:disabled{
    opacity: 0.55;
    cursor: not-allowed;
}

.kp-btn-dhl{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    background: rgba(255,204,0,0.95); /* DHL yellow */
    color: #111;
    border: 1px solid rgba(0,0,0,0.18);
    white-space: nowrap;
}
.kp-btn-dhl:hover{ background: rgba(255,204,0,1); }
.kp-btn-dhl:disabled{
    opacity: 0.55;
    cursor: not-allowed;
}

.kp-dhl-hint{
    color: var(--muted);
    font-size: 12px;
}

@media (prefers-color-scheme: dark){
    .kp-dhl-input{
        border-color: rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.03);
    }
}
.order-card{
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 16px;
    padding: 14px 14px 10px;
    margin: 12px 0;
    background: rgba(0,0,0,0.02);
}
@media (prefers-color-scheme: dark){
    .order-card{
        border-color: rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
    }
}

.order-card > strong{
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
    color: var(--text);
}

.kp-order-refs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -2px 0 10px;
}
.kp-order-ref{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.02);
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
@media (prefers-color-scheme: dark){
    .kp-order-ref{
        border-color: rgba(255,255,255,0.14);
        background: rgba(255,255,255,0.04);
    }
}
.kp-order-ref .k{
    opacity: 0.85;
    font-weight: 900;
}
.kp-order-ref .v{
    font-weight: 900;
}
.kp-order-ref.offer .k{ color: #0b5; }
.kp-order-ref.invoice .k{ color: var(--accent); }
.kp-order-ref.credit .k{ color: #b00020; }

.order-card ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.kp-file-input{
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--card);
    font-size: 13px;
    color: var(--text);
}
.kp-file-input::file-selector-button{
    margin-right: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--accent-rgb),0.35);
    border-radius: 10px;
    background: rgba(var(--accent-rgb),0.12);
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}
.kp-file-input::file-selector-button:hover{
    background: rgba(var(--accent-rgb),0.2);
}

.kp-doc-type{
    color: var(--text);
    font-weight: 700;
}
.kp-doc-num{
    color: var(--text);
    opacity: 0.75;
    font-weight: 700;
    margin-left: 6px;
}

.order-card li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
}

.order-card li.kp-doc-item{
    flex-direction: column;
    align-items: stretch;
}

.kp-doc-meta{
    display: flex;
    align-items: center;
    gap: 6px;
}

.kp-doc-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kp-doc-actions a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    white-space: nowrap;
}
.kp-doc-actions a:hover{ background: rgba(var(--accent-rgb),0.22); }

.kp-doc-preview{
    margin-top: 8px;
    border: 1px solid #e6ece9;
    border-radius: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: 50vh;
    min-height: 300px;
    background: #f8faf9;
}
.kp-doc-preview iframe,
.kp-doc-preview embed,
.kp-doc-preview object {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (prefers-color-scheme: dark){
    .order-card li{
        border-color: rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.03);
    }
}

.order-card li a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    white-space: nowrap;
}
.order-card li a:hover{
    background: rgba(var(--accent-rgb),0.22);
}
@media (prefers-color-scheme: dark){
    .order-card li a{
        background: rgba(var(--accent-rgb),0.30);
        color: #eafff3;
        border-color: rgba(var(--accent-rgb),0.45);
    }
    .order-card li a:hover{ background: rgba(var(--accent-rgb),0.38); }
}

/* Mobile */
@media (max-width: 920px){
    .kp-admin-layout{ grid-template-columns: 1fr; }
    .kp-admin-sidebar{ height: auto; }
    .kp-admin-customer-list{ max-height: 260px; }
}

@media (max-width: 520px){
    .order-card li{
        flex-direction: column;
        align-items: flex-start;
    }
    .order-card li a{
        width: 100%;
    }
    .order-card li.kp-doc-item{
        padding: 12px;
    }
    .kp-doc-actions{
        width: 100%;
    }
    .kp-doc-actions a{
        flex: 1 1 100%;
    }
    .kp-doc-preview{
        height: 60vh;
        min-height: 250px;
    }
    /* Admin tabs/filters mobile */
    .kp-admin-tabs{
        flex-wrap:wrap !important;
    }
    .kp-admin-tabs .rr-btn{
        flex:1 1 calc(50% - 4px); text-align:center; font-size:12px; min-height:40px;
    }
    .kp-orders-filters{
        gap:4px;
    }
    .kp-orders-filters .rr-btn{
        font-size:10px !important; padding:4px 8px !important; min-height:32px;
    }
    /* Orders table */
    .kp-orders-table{ font-size:11px; }
    .kp-orders-table th{ padding:6px 6px; font-size:10px; }
    .kp-orders-table td{ padding:6px; }
    .kp-orders-table .kp-td-date{ font-size:10px; }
    /* Detail panel */
    .kp-order-detail{ padding:12px 10px; }
    .kp-order-detail-grid{ grid-template-columns:1fr; }
    .kp-order-status-btns{ gap:4px; }
    .kp-order-status-btns .rr-btn{ font-size:11px; padding:6px 10px; min-height:40px; flex:1 1 calc(50% - 4px); }
    /* Waiting cards */
    .kp-orders-waiting-card{ flex-direction:column; align-items:flex-start; gap:8px; }
    .kp-orders-waiting-actions{ width:100%; }
    .kp-orders-waiting-actions .rr-btn{ flex:1; text-align:center; }
}

/* ===============================
   Admin Dashboard – Reparatur-PDF-Grid (responsive)
   =============================== */

/* ── Orders / Aufträge View ── */
.kp-orders-alert{
    margin:0 0 14px;
    padding:16px;
    border-radius:8px;
    font-size:14px;
}
.kp-orders-alert--warn{
    background:rgba(255,193,7,.15);
    border:1px solid rgba(255,193,7,.35);
    color:#c49000;
}
@media (prefers-color-scheme: light){
    .kp-orders-alert--warn{ background:#fff3cd; border-color:#ffc107; color:#856404; }
}
.kp-orders-alert--success{
    background:rgba(var(--accent-rgb),.12);
    border:1px solid rgba(var(--accent-rgb),.25);
    color:var(--accent);
}
@media (prefers-color-scheme: light){
    .kp-orders-alert--success{ background:#d4edda; border-color:#c3e6cb; color:#155724; }
}

.kp-orders-filters{
    display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px;
}

/* Erwartete-Geräte Box */
.kp-orders-section{
    margin:0 0 20px;
}
.kp-orders-section-title{
    margin:0 0 10px; font-size:15px; font-weight:700; color:var(--muted);
}
.kp-orders-grid{
    display:grid; gap:8px;
}
.kp-orders-waiting-card{
    display:flex; align-items:center; gap:12px; padding:10px 14px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:8px;
}
.kp-orders-waiting-info{ flex:1; min-width:0; }
.kp-orders-waiting-nr{ font-weight:700; color:var(--text); }
.kp-orders-waiting-name{ color:var(--text-secondary); margin-left:8px; }
.kp-orders-waiting-device{ color:var(--muted); margin-left:6px; }
.kp-orders-waiting-date{ color:var(--muted); margin-left:6px; font-size:12px; }
.kp-orders-waiting-actions{ display:flex; gap:6px; }

/* Auftrags-Tabelle */
.kp-orders-table{
    width:100%; border-collapse:collapse; font-size:13px;
}
.kp-orders-table thead tr{
    background:var(--card-elevated);
    border-bottom:2px solid var(--border-strong);
}
.kp-orders-table th{
    padding:8px 10px; text-align:left; white-space:nowrap;
    color:var(--text-secondary); font-weight:600; font-size:12px;
}
.kp-orders-table th:last-child{ text-align:center; }
.kp-orders-table tbody tr{
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition: background .15s;
}
.kp-orders-table tbody tr:hover{
    background:rgba(var(--accent-rgb),.06);
}
.kp-orders-table tbody tr.is-selected{
    background:rgba(var(--accent-rgb),.14);
}
@media (prefers-color-scheme: light){
    .kp-orders-table tbody tr.is-selected{ background:#e8f5e9; }
}
.kp-orders-table td{
    padding:8px 10px; color:var(--text);
}
.kp-orders-table td:last-child{ text-align:center; }
.kp-orders-table .kp-td-nr{ white-space:nowrap; font-weight:700; }
.kp-orders-table .kp-td-sub{ font-size:11px; color:var(--muted); }
.kp-orders-table .kp-td-device{ color:var(--text-secondary); }
.kp-orders-table .kp-td-date{ white-space:nowrap; color:var(--text-secondary); font-size:12px; }
.kp-orders-table .kp-td-empty{
    padding:20px; text-align:center; color:var(--muted);
}

/* Status-Badge */
.kp-status-badge{
    display:inline-block; padding:3px 8px; border-radius:12px;
    font-size:11px; font-weight:700; color:#fff;
}

/* Zahlung */
.kp-pay-ok{ color:#28a745; font-weight:700; }
.kp-pay-pending{ color:#ffc107; }
.kp-pay-none{ color:var(--muted); }

/* Detail-Panel */
.kp-order-detail{
    margin:20px 0;
    padding:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
}
.kp-order-detail-header{
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px;
}
.kp-order-detail-title{
    margin:0; font-size:16px; font-weight:700; color:var(--text);
}
.kp-order-detail-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:6px; font-size:20px; line-height:1;
    color:var(--text-secondary); background:var(--card-elevated); border:1px solid var(--border);
    text-decoration:none; cursor:pointer; flex-shrink:0; transition:background .15s,color .15s;
}
.kp-order-detail-close:hover{
    background:rgba(220,53,69,.15); color:#dc3545;
}
.kp-order-detail-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:8px; margin:0 0 14px;
}
.kp-order-detail-label{
    font-weight:600; color:var(--text-secondary); font-size:12px;
}
.kp-order-detail-value{
    color:var(--text); font-size:13px;
}

/* Collapsible Sections (<details>) */
.kp-detail-section{
    margin:0 0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
}
.kp-detail-summary{
    padding:10px 14px;
    font-weight:700;
    font-size:13px;
    color:var(--text);
    background:var(--card-elevated);
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
    user-select:none;
    transition:background .15s;
}
.kp-detail-summary::-webkit-details-marker{ display:none; }
.kp-detail-summary::before{
    content:'▶';
    font-size:10px;
    color:var(--muted);
    transition:transform .2s;
    flex-shrink:0;
}
.kp-detail-section[open] > .kp-detail-summary::before{
    transform:rotate(90deg);
}
.kp-detail-summary:hover{
    background:rgba(var(--accent-rgb),.1);
}
.kp-detail-section > *:not(summary){
    padding:12px 14px;
}
.kp-detail-section .kp-order-detail-grid{
    margin:0;
}
.kp-detail-section .kp-order-innerbox{
    margin:8px 0 0;
}
.kp-detail-pdf-wrap{
    border:1px solid var(--border);
    border-radius:6px;
    overflow:hidden;
    margin-top:4px;
}

/* Document Card (inside detail) */
.kp-order-doc-card{
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    background:var(--card-elevated);
}
.kp-order-doc-card .kp-order-doc-row{
    border:0; border-radius:0; margin:0;
}
.kp-order-doc-card .kp-detail-pdf-wrap{
    border:0; border-top:1px solid var(--border);
    border-radius:0; margin:0;
}
.kp-order-doc-type-badge{
    padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; color:#fff;
}
.kp-order-doc-type--offer{ background:#fd7e14; }
.kp-order-doc-type--invoice{ background:#007bff; }
.kp-order-doc-type--credit{ background:#6f42c1; }
.kp-order-doc-type--reminder{ background:#dc3545; }
.kp-order-doc-type--voucher{ background:#20c997; }

/* Problembeschreibung / inne content box */
.kp-order-innerbox{
    margin:0 0 14px; padding:10px;
    background:var(--card-elevated);
    border:1px solid var(--border);
    border-radius:6px;
}
.kp-order-innerbox p{
    margin:4px 0 0; color:var(--text); font-size:13px; white-space:pre-wrap;
}

/* Verknüpfte Dokumente */
.kp-order-doc-row{
    padding:6px 10px;
    background:var(--card-elevated);
    border:1px solid var(--border);
    border-radius:6px;
    margin-bottom:4px;
    display:flex; align-items:center; gap:8px;
}
.kp-order-doc-nr{ font-weight:700; color:var(--text); }
.kp-order-doc-type{ color:var(--text-secondary); font-size:12px; }
.kp-order-doc-link{ color:var(--accent); font-size:12px; }

/* Status-Historie */
.kp-order-log-entry{
    padding:6px 10px;
    margin-bottom:4px;
    background:var(--card-elevated);
    border-left:3px solid var(--border);
}
.kp-order-log-status{ font-size:12px; font-weight:700; color:var(--text); }
.kp-order-log-time{ color:var(--muted); font-size:11px; margin-left:8px; }
.kp-order-log-by{ color:var(--muted); font-size:11px; margin-left:4px; }
.kp-order-log-note{ color:var(--text-secondary); font-size:11px; }

/* Status-Ändern Box */
.kp-order-status-change{
    margin:14px 0 0; padding:12px;
    background:var(--card-elevated);
    border:1px solid var(--border);
    border-radius:8px;
}
.kp-order-status-change-title{
    color:var(--text); font-size:13px; font-weight:700;
}
.kp-order-status-btns{
    display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}

/* Zahlungs-Banner */
.kp-order-pay-banner{
    margin-top:10px; padding:8px 12px; border-radius:6px;
}
.kp-order-pay-banner--ok{
    background:rgba(var(--accent-rgb),.12); color:var(--accent);
}
@media (prefers-color-scheme: light){
    .kp-order-pay-banner--ok{ background:#d4edda; color:#155724; }
}
.kp-order-pay-banner--pending{
    background:rgba(255,193,7,.12); color:#c49000;
}
@media (prefers-color-scheme: light){
    .kp-order-pay-banner--pending{ background:#fff3cd; color:#856404; }
}

/* ── End Orders View ── */

/* ── Offer Decision Badges ── */
.kp-offer-badge{
    display:inline-block; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:600; color:#fff;
}
.kp-offer-badge--accepted{ background:#28a745; }
.kp-offer-badge--rejected{ background:#dc3545; }

/* ── Search Input ── */
.kp-search-input{
    flex:1; padding:9px 14px; border:1px solid var(--border); border-radius:8px;
    font-size:14px; outline:none; font-family:inherit;
    background:var(--card); color:var(--text);
}
.kp-search-input::placeholder{ color:var(--muted); }

/* ── Form Label ── */
.kp-form-label{
    display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px;
}

/* ── Pagination Info ── */
.kp-pagination-info{
    font-size:13px; color:var(--muted);
}

/* ── Info-Banner (shipped/tracking) ── */
.kp-status-banner--info{
    padding:12px; border-radius:8px; font-size:13px;
    background:rgba(0,180,216,.12); color:#0ea5e9;
}
@media (prefers-color-scheme: light){
    .kp-status-banner--info{ background:#d1ecf1; color:#0c5460; }
}

.kp-repair-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    width: 100%;
}
@media (max-width: 920px) {
    .kp-repair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 520px) {
    .kp-repair-grid { grid-template-columns: 1fr; gap: 14px; }
}

.kp-repair-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kp-repair-card-preview {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    height: 280px;
    background: var(--card-elevated);
}
.kp-repair-card-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.kp-repair-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kp-repair-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.kp-repair-card-name {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.kp-repair-card-date {
    font-size: 12px;
    color: var(--muted);
}
.kp-repair-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.kp-repair-card-btn {
    flex: 1 1 100px;
    text-align: center;
    padding: 10px 8px !important;
    font-size: 13px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Admin Dashboard – Pagination Buttons touch-friendly */
.kp-pagination-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kp-pagination-current {
    padding: 8px 14px;
    font-size: 13px;
    background: var(--text);
    color: var(--bg);
    border-radius: 8px;
    font-weight: 700;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
   Admin Dashboard – Kunden-Uploads
   =============================== */

.kp-admin-uploads{
    margin: 12px 0 18px;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.02);
}

@media (prefers-color-scheme: dark){
    .kp-admin-uploads{
        border-color: rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
    }
}

.kp-admin-uploads-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.kp-admin-uploads-title{
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
}

.kp-admin-uploads-hint{
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.kp-btn-upload{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    white-space: nowrap;
}

.kp-btn-upload:hover{
    background: rgba(var(--accent-rgb),0.22);
}

@media (prefers-color-scheme: dark){
    .kp-btn-upload{
        background: rgba(var(--accent-rgb),0.30);
        color: #eafff3;
        border-color: rgba(var(--accent-rgb),0.45);
    }
    .kp-btn-upload:hover{ background: rgba(var(--accent-rgb),0.38); }
}

/* Upload-Popup – kompakte Karte */
.kp-upload-wrap{
    max-width: 820px;
    margin: 18px auto;
    padding: 0 14px;
}

.kp-upload-card{
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 16px;
}

.kp-upload-title{
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
}

.kp-upload-sub{
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
}

.kp-upload-form{
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.kp-upload-input{
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
}

.kp-upload-input:focus{
    box-shadow: 0 0 0 4px var(--focus);
    outline: none;
}

.kp-upload-actions{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kp-upload-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,204,0,0.95);
    color: #111;
}

.kp-upload-btn:hover{ background: rgba(255,204,0,1); }

.kp-upload-note{
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.kp-upload-msg{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.02);
    color: var(--text);
    margin: 0 0 12px;
}

@media (prefers-color-scheme: dark){
    .kp-upload-msg{
        border-color: rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
    }
}

.kp-upload-files{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.kp-upload-files li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
}

@media (prefers-color-scheme: dark){
    .kp-upload-files li{
        border-color: rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.03);
    }
}

.kp-upload-fname{
    font-weight: 800;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 520px;
}

.kp-upload-fmeta{
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 520px){
    .kp-upload-files li{ flex-direction: column; align-items: flex-start; }
    .kp-upload-fname{ max-width: 100%; }
    .kp-upload-fmeta{ width: 100%; }
}


/* ==============================
   ADMIN: Kunden-Uploads – Liste + Timer (NEU)
   ============================== */

.kp-admin-upload-list{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.kp-admin-upload-loading,
.kp-admin-upload-empty,
.kp-admin-upload-error{
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
}

.kp-admin-upload-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.kp-admin-upload-item:first-child{ border-top: none; }
@media (prefers-color-scheme: dark){
  .kp-admin-upload-item{ border-top-color: rgba(255,255,255,0.12); }
}

.kp-admin-upload-left{ min-width: 0; }

.kp-admin-upload-name{
  font-weight: 800;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 520px;
}

.kp-admin-upload-meta{
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.kp-admin-upload-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.kp-admin-upload-timer{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,204,0,0.35);
  border: 1px solid rgba(255,204,0,0.7);
  color: #111;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark){
  .kp-admin-upload-timer{
    background: rgba(255,204,0,0.25);
    border-color: rgba(255,204,0,0.55);
    color: #fff;
  }
}

/* ==============================
   UPLOAD POPUP – Layout (NEU)
   ============================== */

.kp-upload-wrap{
  max-width: 760px;
  margin: 18px auto;
  padding: 0 12px;
}

.kp-upload-card{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 16px;
}

.kp-upload-title{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.kp-upload-sub{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.kp-upload-msg{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  color: var(--text);
  font-size: 13px;
}

@media (prefers-color-scheme: dark){
  .kp-upload-msg{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
}

.kp-upload-form{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  border-radius: 16px;
  padding: 12px;
}

@media (prefers-color-scheme: dark){
  .kp-upload-form{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
}

.kp-upload-input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
}

.kp-upload-actions{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.kp-upload-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
    background: rgba(var(--accent-rgb),0.16);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb),0.30);
  white-space: nowrap;
}

.kp-upload-btn:hover{ background: rgba(var(--accent-rgb),0.22); }

@media (prefers-color-scheme: dark){
  .kp-upload-btn{
        background: rgba(var(--accent-rgb),0.30);
    color: #eafff3;
        border-color: rgba(var(--accent-rgb),0.45);
  }
    .kp-upload-btn:hover{ background: rgba(var(--accent-rgb),0.38); }
}

.kp-upload-note{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.kp-upload-files{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.kp-upload-files li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}

@media (prefers-color-scheme: dark){
  .kp-upload-files li{
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
  }
}

.kp-upload-fname{
  color: var(--text);
  font-weight: 850;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px;
}

.kp-upload-fmeta{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.kp-upload-timer{
  color: #D40511;
  font-weight: 900;
}

@media (max-width: 520px){
  .kp-upload-files li{ flex-direction: column; align-items: flex-start; }
  .kp-upload-fname{ max-width: 100%; }
  .kp-upload-fmeta{ width: 100%; }
}

/* ==============================
   UPLOAD POPUP – Dropzone + Progress (NEU)
   ============================== */

.kp-upload-sys{
  margin: 10px 0 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  border-radius: 14px;
  padding: 10px 12px;
}
@media (prefers-color-scheme: dark){
  .kp-upload-sys{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
}

.kp-upload-sys-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.kp-upload-sys-row .k{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.kp-upload-sys-row .v{
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.kp-dropzone{
  position: relative;
  border: 2px dashed rgba(0,0,0,0.20);
  background: rgba(0,0,0,0.02);
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  user-select: none;
}

@media (prefers-color-scheme: dark){
  .kp-dropzone{
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.03);
  }
}

.kp-dropzone.is-drag{
  border-color: rgba(0,66,37,0.70);
  background: rgba(0,66,37,0.10);
}

.kp-dropzone-title{
  color: var(--text);
  font-weight: 950;
  font-size: 14px;
}

.kp-dropzone-sub{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

.kp-dropzone-input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.kp-upload-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.kp-upload-overall{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.kp-upload-queue{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.kp-q-item{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  border-radius: 14px;
  padding: 10px 12px;
}

@media (prefers-color-scheme: dark){
  .kp-q-item{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
}

.kp-q-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.kp-q-name{
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 520px;
}

.kp-q-meta{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.kp-q-bar{
  margin-top: 8px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  overflow: hidden;
}

@media (prefers-color-scheme: dark){
  .kp-q-bar{
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
  }
}

.kp-q-bar-inner{
  height: 100%;
  width: 0%;
  background: rgba(0,66,37,0.55);
  border-radius: 999px;
  transition: width 180ms ease;
}

@media (prefers-color-scheme: dark){
  .kp-q-bar-inner{
    background: rgba(0,66,37,0.70);
  }
}

.kp-q-status{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 520px){
  .kp-q-name{ max-width: 100%; }
  .kp-q-top{ flex-direction: column; align-items: flex-start; }
}

/* ===============================
   CONSOLIDATED INLINE STYLES
   =============================== */

/* ===== Home / Services ===== */
.home {
    padding: 0;
    display: block;
}

/* Card-Buttons (8 Kacheln): fester Accent */
.home .btn-dark,
.home .service-card .btn-dark {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

.home .service-card .btn-dark {
    margin: 4px 16px 16px;
    align-self: flex-start;
}

.home .btn-dark:hover,
.home .service-card .btn-dark:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    filter: brightness(1.06);
}

.hero-accent {
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background:
        radial-gradient(520px 240px at 10% 60%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
        radial-gradient(520px 240px at 90% 20%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%);
    filter: blur(2px);
    opacity: .9;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
}

.hero-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.hero-accent-text {
    background: var(--gradient-border);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-sub {
    margin: 0 0 var(--space-md);
    color: var(--muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    max-width: 65ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.home-hero .hero-inner {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-sm);
    animation: pill-glow 3s ease-in-out infinite;
}

@keyframes pill-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
    50% { box-shadow: 0 0 20px 2px rgba(var(--accent-rgb), 0.15); }
}

@media (prefers-color-scheme: dark){
    .hero-pill,
    .why-card-top{
        background: color-mix(in srgb, var(--accent) 38%, transparent);
        color: var(--accent-contrast);
        border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    }

    .why-card-top,
    .why-card-top .why-card-kicker,
    .why-card-top .why-card-icon{
        color: var(--accent-contrast);
    }
}

.why-grid {
    display: grid;
    gap: 16px;
}

.why-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.why-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(260px 160px at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
    opacity: .4;
    transition: opacity .35s ease;
    pointer-events: none;
}

.why-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 3px;
    border-radius: 0 0 3px 0;
    background: var(--accent);
    opacity: .4;
    transition: width .3s ease, opacity .3s ease;
}

.why-card:hover,
.why-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.2);
    background: rgba(var(--accent-rgb), 0.03);
}

.why-card:hover::before,
.why-card:focus-within::before {
    opacity: .6;
}

.why-card:hover::after,
.why-card:focus-within::after {
    width: 100%;
    opacity: .6;
}

.why-card-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 12px;
    text-transform: none;
}

.why-card-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}
.why-card-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2;
}

.why-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.why-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    letter-spacing: -.01em;
}

.why-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.cta-strip {
    position: relative;
    margin: 32px 0 8px;
    padding: 22px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    box-shadow: none;
}

.cta-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(280px 160px at 85% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
    opacity: .5;
    pointer-events: none;
}

.cta-strip-inner {
    position: relative;
    z-index: 1;
}

.cta-strip-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cta-strip h2 {
    margin: 0 0 6px;
}

.cta-strip p {
    margin: 0;
    color: var(--muted);
}

.cta-strip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (min-width: 900px) {
    .home-hero .hero-inner {
        grid-template-columns: 1fr;
    }
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cta-strip-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Services */
.services-head {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
}

.services-title {
    margin: 0;
    font-size: clamp(18px, 1.8vw, 24px);
    letter-spacing: -.01em;
}

.services-sub {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 720px) {
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (min-width: 1020px) {
    .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* =====================================================
   2026 PREMIUM SERVICE CARDS
   ===================================================== */
.service-card {
    display: flex;
    flex-direction: column;
    background: rgba(var(--accent-rgb), 0.03);
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 0;
    gap: 0;
    position: relative;
    overflow: hidden;

    /* Subtle lift */
    transform: translateZ(0);
    will-change: transform, box-shadow;
    contain: layout paint;

    /* Smooth transitions */
    transition:
        transform var(--duration-slow) var(--ease-spring),
        box-shadow var(--duration-slow) var(--ease-out),
        border-color var(--duration-normal) var(--ease-smooth),
        background var(--duration-normal) var(--ease-smooth);
}

@media (prefers-color-scheme: light) {
    .service-card {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.10);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .service-card:hover,
    .service-card:focus-within {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
        border-color: rgba(var(--accent-rgb), 0.25);
        background: #ffffff;
    }
}

/* Subtler Border Effect */
.service-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-lg) + 1px);
    background: var(--gradient-border);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--duration-slow) var(--ease-out);
    filter: blur(8px);
}

/* Minimal Overlay */
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    z-index: 0;
    transition: opacity var(--duration-normal) var(--ease-smooth);
}

/* Hover State – sanfter */
.service-card:hover,
.service-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border-color: rgba(var(--accent-rgb), 0.2);
    background: rgba(var(--accent-rgb), 0.05);
    z-index: 2;
}

.service-card:hover::before,
.service-card:focus-within::before {
    opacity: 0.3;
}

.service-card:hover::after,
.service-card:focus-within::after {
    opacity: 0;
}

/* Active Card State */
.service-card.is-active {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.15);
    background: rgba(var(--accent-rgb), 0.04);
}

.service-card.is-active::before {
    opacity: 0.2;
}

.service-card.is-active::after { opacity: 0; }

.service-media {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius);
    overflow: hidden;
    border: 0;
    background: rgba(0,0,0,.06);
    aspect-ratio: 16 / 10;
    position: relative;
    z-index: 1;
}

.service-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%);
    opacity: .35;
    pointer-events: none;
}

.service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    will-change: transform;
    transition: transform 0.65s var(--ease-out);
}

.service-card.is-active .service-media img { transform: scale(1.08); }
.service-card:hover .service-media img,
.service-card:focus-within .service-media img { transform: scale(1.08); }

.service-body {
    display: grid;
    gap: var(--space-xs);
    padding: 0 var(--space-md) var(--space-xs);
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
}

/* ── Service Icon Wrap (page-specific card icons) ── */
.service-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 0.5rem;
    border-radius: 14px;
    background: rgba(var(--accent-rgb, 0,201,107), 0.08);
    border: 1px solid rgba(var(--accent-rgb, 0,201,107), 0.15);
    transition: background 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.service-card:hover .service-icon-wrap {
    background: rgba(var(--accent-rgb, 0,201,107), 0.12);
    border-color: rgba(var(--accent-rgb, 0,201,107), 0.2);
    transform: translateY(-2px);
}

.service-icon-wrap svg {
    width: 32px;
    height: 32px;
    transition: transform 0.4s ease;
}

.service-card:hover .service-icon-wrap svg {
    transform: scale(1.1);
}

.service-detail {
    font-size: 0.88rem;
    opacity: 0.55;
    font-style: italic;
}

.service-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: var(--space-xs);
}

.service-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: var(--gradient-border);
    transition: width var(--duration-slow) var(--ease-out);
}

.service-card:hover .service-title::after,
.service-card.is-active .service-title::after {
    width: 60px;
}

.service-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.service-list.core { color: var(--text); }

/* Details: nur bei Active sichtbar */
.service-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    will-change: max-height, opacity, transform;
    transition:
        max-height .55s cubic-bezier(.2, .7, .2, 1),
        opacity .35s ease,
        transform .35s ease;
}

.service-card.is-active .service-details {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
}

/* Desktop-Interaktion: Hover/Focus zeigt Details (Touch wird via @media(hover:none) neutralisiert) */
@media (hover: hover) {
    .service-card:hover .service-details,
    .service-card:focus-within .service-details {
        max-height: 220px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons: sauber in Light/Dark via site.css Tokens */
.home .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    box-shadow: none;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.home .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.home .btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.home .btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 3px;
}

/* Primary & Ghost im HERO: beide im Accent */
.home .hero .btn-primary,
.home .hero .btn-ghost {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.home .hero .btn-primary:hover,
.home .hero .btn-ghost:hover {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
}

/* Ghost: identischer Accent wie Kontakt-Seite */
.home .btn-ghost {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.home .btn-ghost:hover {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
}

/* Card-Buttons (8 Kacheln): fester Accent */
.home .btn-dark {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.home .btn-dark:hover {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
}

/* ===================================
   Modern Scroll-Reveal Animations
   =================================== */

/* Base reveal state - starts hidden */
.reveal {
    opacity: 0;
    transform: translateY(32px) scale(0.98);
    transition: 
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Revealed state */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered delays for grid children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 300ms; }
.reveal-stagger > *:nth-child(7) { transition-delay: 360ms; }
.reveal-stagger > *:nth-child(8) { transition-delay: 420ms; }
.reveal-stagger > *:nth-child(9) { transition-delay: 480ms; }

/* Reveal from left */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px) scale(0.97);
    transition: 
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Reveal from right */
.reveal-right {
    opacity: 0;
    transform: translateX(40px) scale(0.97);
    transition: 
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Scale-up reveal */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: 
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Blur-in reveal */
.reveal-blur {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(16px) scale(0.98);
    transition: 
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-blur.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-blur { 
        opacity: 1; 
        transform: none; 
        filter: none;
        transition: none; 
    }
    .reveal-stagger > * { transition-delay: 0ms !important; }
    .service-card, .service-media img, .service-details, .home .btn { transition: none; }
}

/* Touch/Tablet: kein Hover-Flackern, keine unnötigen Skalierungen */
@media (hover: none) {
    .service-card:hover,
    .service-card:focus-within {
        transform: none;
        z-index: auto;
    }
    .service-card:hover::before,
    .service-card:focus-within::before {
        opacity: 0;
    }
    .service-card:hover .service-media img,
    .service-card:focus-within .service-media img {
        transform: scale(1.01);
    }
    .service-card:hover .service-details,
    .service-card:focus-within .service-details {
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
    }

    /* Scroll-Active: Karte sichtbar hervorheben + Details einblenden */
    .service-card.is-active {
        transform: translateY(-3px);
        border-color: var(--accent-soft);
        box-shadow: var(--shadow-lg), var(--shadow-glow);
    }
    .service-card.is-active::before {
        opacity: 0.5;
    }
    .service-card.is-active .service-media img {
        transform: scale(1.04);
    }
    .service-card.is-active .service-details {
        max-height: 220px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Shared Repair Page Helpers ===== */
.step-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin-right:8px;
    border-radius:50%;
    background:var(--accent);
    color:var(--accent-contrast);
    font-weight:700;
    font-size:14px;
    line-height:1;
}

@media (max-width: 640px) {
    main.card.home {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero {
        padding: 18px;
        border-radius: 16px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.12;
    }

    .hero-sub {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions a.btn {
        width: 100%;
        margin-top: 10px; /* Abstand zwischen mobilen Buttons */
    }

    /* avoid huge gaps from <br><br> on mobile */
    .services-head br { display: none; }
}

/* ===== Vor-Ort-Hilfe – KPI & Motion ===== */
@media (prefers-reduced-motion: no-preference) {
    .hero-title,
    .hero-sub,
    .hero-actions a,
    .kpi {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;
    }

    .hero-title.is-visible,
    .hero-sub.is-visible,
    .hero-actions a.is-visible,
    .kpi.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-kpis{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.kpi{
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.02));
    border-radius: 16px;
    padding: 14px 14px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.kpi-title{
    font-weight: 800;
    letter-spacing: .2px;
}

.kpi-sub{
    margin-top: 4px;
    opacity: .85;
    font-size: 14px;
    line-height: 1.35;
}

.checklist{
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px 18px;
}

.checklist li{
    position: relative;
    padding-left: 28px;
    line-height: 1.45;
    opacity: .92;
}

.checklist li::before{
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

.checklist li::after{
    content: "";
    position: absolute;
    left: 6px;
    top: .45em;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

@media (max-width: 720px){
    .hero-kpis{ grid-template-columns: 1fr; }
    .checklist{ grid-template-columns: 1fr; }
}

/* ===== Kontaktseite (scoped) ===== */
.contact-page{
    width: min(1100px, calc(100% - 24px));
    margin: 0 auto;
    padding: 18px;
}

.contact-page > section{ margin-top: 16px; }
.contact-page > section:first-child{ margin-top: 0; }
.contact-page > section + section{ margin-top: 16px; }

.contact-page .btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #1ebe5d);
    color: #fff;
    border-color: #1ebe5d;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}

.contact-page .btn-whatsapp:hover {
    background: #1ebe5d;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(37, 211, 102, .45);
}

.contact-page .whatsapp .wa-box {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;

    background:
        radial-gradient(480px 140px at 12% 0%, rgba(37, 211, 102, .18), transparent 60%),
        linear-gradient(180deg, rgba(37,211,102,.10), rgba(37,211,102,.03));
    border: 1px solid rgba(37,211,102,.35);
    box-shadow: 0 14px 34px rgba(0,0,0,.12);

    overflow: hidden;
}

.contact-page .wa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(37, 211, 102, .14);
    border: 1px solid rgba(37, 211, 102, .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.contact-page .wa-icon svg { display: block; }

.contact-page .wa-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #25D366;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
}

.contact-page .wa-meta {
    display: grid;
    gap: 3px;
    font-size: 13px;
    min-width: 0;
}

.contact-page .wa-meta strong {
    font-size: 13.5px;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-page .wa-meta span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.contact-page .btn-primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.contact-page .btn-primary:hover {
    background: var(--accent);
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
}

.contact-page .btn-ghost {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.contact-page .btn-ghost:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.contact-page .btn-dark {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.contact-page .btn-dark:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.contact-page .grid {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
    align-items: start;
}

/* Da links aktuell keine Kachel/Aside mehr existiert: Grid auf 1 Spalte, damit nichts "leer" wirkt */
@media (min-width: 980px) {
    .contact-page .grid {
        grid-template-columns: 1fr;
    }

    .contact-page .grid > article {
        grid-column: 1;
        grid-row: auto;
    }
}

.contact-page .panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 16px;
}

.contact-page .panel.repair { background: var(--card); }

.contact-page .repair-steps {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
}

.contact-page .repair-steps li {
    position: relative;
    padding-left: 22px;
}

.contact-page .repair-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
}

/* Nummerierter Ablauf – Online-Reparaturannahme */
.contact-page .panel.repair .repair-steps {
    counter-reset: step;
    gap: 14px;
}

.contact-page .panel.repair .repair-steps li {
    padding-left: 52px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border-radius: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.contact-page .panel.repair .repair-steps li::before {
    counter-increment: step;
    content: counter(step);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fix: immer gut lesbar (Hellmodus) */
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    font-weight: 800;
    line-height: 1;
    top: 10px;
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.contact-page .panel.repair .repair-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 44px;
    bottom: -10px;
    width: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, transparent), rgba(255,255,255,.08));
    border-radius: 2px;
}

/* So läuft es ab – gleiche Optik, kompakter */
.contact-page .grid aside .repair-steps {
    counter-reset: step;
    gap: 10px;
}

.contact-page .grid aside .repair-steps li {
    padding-left: 44px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
    border-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 13.5px;
}

.contact-page .grid aside .repair-steps li::before {
    counter-increment: step;
    content: counter(step);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fix: immer gut lesbar (Hellmodus) */
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    font-weight: 700;
    top: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.contact-page .panel-title {
    position: relative;
    padding-left: 12px;
}

.contact-page .panel-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 4px;
    background: var(--accent);
}

.contact-page .panel-title {
    margin: 0 0 10px;
    font-size: 18px;
    letter-spacing: -.01em;
}

.contact-page .panel-text {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 14px;
}

.contact-page .panel-actions { margin-top: 10px; }

.contact-page .sep {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}

.contact-page .contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
    font-size: 14px;
}

.contact-page .contact-list a { color: inherit; text-decoration: none; }
.contact-page .contact-list a:hover { text-decoration: underline; }

.contact-page .contact-ico {
    display: inline-flex;
    width: 22px;
    justify-content: center;
    margin-right: 6px;
    opacity: .9;
}

.contact-page .form {
    display: grid;
    gap: 12px;
}

.contact-page .form label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
}

.contact-page .form input,
.contact-page .form textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    padding: 10px 12px;
    outline: none;
}

.contact-page .form input:focus,
.contact-page .form textarea:focus {
    border-color: rgba(var(--accent-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}

.contact-page .consent {
    display: grid !important;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 13px;
    color: var(--muted);
}

.contact-page .consent a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
}

.contact-page .consent a:hover {
    text-decoration: none;
    filter: brightness(1.1);
}

.contact-page .consent input {
    margin: 3px 0 0 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.contact-page .req { color: var(--accent); font-weight: 800; }

.contact-page .hint { margin: 0; font-size: 12px; color: var(--muted); }

.contact-page .alert {
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    margin: 0 0 12px;
    font-size: 14px;
}

.contact-page .alert.success {
    background: rgba(var(--accent-rgb), .10);
    border-color: rgba(var(--accent-rgb), .25);
}

.contact-page .alert.error {
    background: rgba(200, 0, 0, .06);
    border-color: rgba(200, 0, 0, .18);
}

.contact-page .alert ul { margin: 0; padding-left: 18px; }

.contact-page .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.contact-page .map-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
    aspect-ratio: 16 / 9;
    display: grid;
}

/* WICHTIG: sonst bleibt Google-Maps-iframe nach dem Laden klein */
.contact-page .map-frame iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-page .map-placeholder{
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 10px;
    padding: 14px;
    background:
        radial-gradient(520px 160px at 10% 0%, rgba(var(--accent-rgb), .14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.contact-page .map-placeholder p{ margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.contact-page .map-placeholder p strong{ color: var(--text); }

.contact-page .map-consent-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
}

.contact-page .map-small{ font-size: 12px; opacity: .85; }

.contact-page .map-after{ margin-top: 10px; }

/* Animation (dezent) + Mobile Feinschliff – ohne Design-Änderung */
@media (prefers-reduced-motion: no-preference) {
    @keyframes pcspFadeUp {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes pcspSoftIn {
        from { opacity: 0; transform: scale(.992); }
        to   { opacity: 1; transform: scale(1); }
    }

    .contact-page .hero {
        animation: pcspSoftIn .38s ease both;
    }

    /* Kacheln sanft nacheinander */
    .contact-page .panel {
        animation: pcspFadeUp .42s ease both;
        will-change: transform, opacity;
    }

    .contact-page > section:nth-of-type(1) .panel,
    .contact-page > section:nth-of-type(1) .hero { animation-delay: 0ms; }

    .contact-page > section:nth-of-type(2) { animation-delay: 40ms; }
    .contact-page > section:nth-of-type(3) { animation-delay: 80ms; }
    .contact-page > section:nth-of-type(4) { animation-delay: 120ms; }
    .contact-page > section:nth-of-type(5) { animation-delay: 160ms; }

    .contact-page .grid > * { animation-delay: 120ms; }

    /* Steps: leichter Stagger */
    .contact-page .repair-steps li { animation: pcspFadeUp .34s ease both; }
    .contact-page .repair-steps li:nth-child(1){ animation-delay: 40ms; }
    .contact-page .repair-steps li:nth-child(2){ animation-delay: 80ms; }
    .contact-page .repair-steps li:nth-child(3){ animation-delay: 120ms; }

    /* WhatsApp Box: minimal */
    .contact-page .whatsapp .wa-box { animation: pcspFadeUp .36s ease both; animation-delay: 90ms; }
}

/* Mobile Anpassungen (Lesbarkeit + Abstände, kein Redesign) */
@media (max-width: 980px) {
    .contact-page{
        width: min(1100px, calc(100% - 18px));
        padding: 14px;
    }

    .contact-page .grid{ gap: 14px; }
}

@media (max-width: 640px) {
    .contact-page .panel{
        padding: 14px;
        border-radius: 16px;
    }

    .contact-page .panel-title{ font-size: 17px; }

    .contact-page .panel-text{ font-size: 13.5px; }

    .contact-page .whatsapp .wa-box{
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: left;
    }

    .contact-page .wa-icon{ width: 24px; height: 24px; }

    .contact-page .btn{ width: 100%; }

    .contact-page .panel-actions .btn{ width: 100%; }

    .contact-page .form{ gap: 10px; }

    .contact-page .consent{ grid-template-columns: 18px 1fr; }

    .contact-page .map-frame{ aspect-ratio: 4 / 3; }
}

/* ===== Kontakt-Karten Grid (2026 Redesign) ===== */
.contact-cards-section {
    margin-top: 16px;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
}

.contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin-bottom: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.contact-card__icon--location {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08));
    border: 1px solid rgba(var(--accent-rgb), .25);
    color: var(--accent);
}

.contact-card__icon--phone {
    background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(59, 130, 246, .08));
    border: 1px solid rgba(59, 130, 246, .25);
    color: #3b82f6;
}

.contact-card__icon--mail {
    background: linear-gradient(135deg, rgba(234, 88, 12, .18), rgba(234, 88, 12, .08));
    border: 1px solid rgba(234, 88, 12, .25);
    color: #ea580c;
}

.contact-card__icon--whatsapp {
    background: linear-gradient(135deg, rgba(37, 211, 102, .18), rgba(37, 211, 102, .08));
    border: 1px solid rgba(37, 211, 102, .25);
    color: #25D366;
}

.contact-card__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -.01em;
    color: var(--text);
}

.contact-card__text {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 8px;
    line-height: 1.5;
}

.contact-card__text a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s ease;
}

.contact-card__text a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.contact-card__sub {
    font-size: 12px;
    color: var(--muted);
    opacity: .8;
}

.contact-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: gap .15s ease;
}

.contact-card__link:hover {
    gap: 8px;
    text-decoration: underline;
}

.contact-card--wa {
    border-color: rgba(37, 211, 102, .3);
    background:
        radial-gradient(300px 120px at 50% 0%, rgba(37, 211, 102, .1), transparent 70%),
        var(--card);
}

.contact-card__btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #25D366, #1ebe5d);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
    transition: transform .15s ease, box-shadow .15s ease;
    margin-top: 4px;
}

.contact-card__btn-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(37, 211, 102, .45);
}

@media (max-width: 980px) {
    .contact-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .contact-cards-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 18px 14px 16px;
    }
}

/* Animation für Kontakt-Karten */
@media (prefers-reduced-motion: no-preference) {
    .contact-card {
        animation: pcspFadeUp .42s ease both;
    }
    .contact-card:nth-child(1) { animation-delay: 40ms; }
    .contact-card:nth-child(2) { animation-delay: 80ms; }
    .contact-card:nth-child(3) { animation-delay: 120ms; }
    .contact-card:nth-child(4) { animation-delay: 160ms; }
}

/* ===== Kontakt: Termin-Hinweis Banner ===== */
.contact-notice {
    max-width: 1120px;
    margin: 0 auto 28px;
    padding: 0 20px;
}
.contact-notice__inner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    background: rgba(var(--accent-rgb, 59,130,246), .08);
    border: 1px solid rgba(var(--accent-rgb, 59,130,246), .25);
    border-radius: 14px;
    color: var(--text);
}
.contact-notice__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(var(--accent-rgb, 59,130,246), .15);
    border-radius: 10px;
    color: var(--accent);
}
.contact-notice__content strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}
.contact-notice__content p {
    margin: 0;
    font-size: 13px;
    opacity: .8;
    line-height: 1.55;
}

/* ===== Kontakt: Dual-Grid (Reparatur + Formular) ===== */
.contact-dual {
    max-width: 1120px;
    margin: 0 auto 28px;
    padding: 0 20px;
}
.contact-dual__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* --- Feature Card (Reparatur) --- */
.contact-feature-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 32px 28px 28px;
    overflow: hidden;
}
.contact-feature-card__glow {
    position: absolute;
    inset: -80px;
    background: radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb,59,130,246),.12), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.contact-feature-card > * { position: relative; z-index: 1; }
.contact-feature-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: 12px;
}
.contact-feature-card__title {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
}
.contact-feature-card__text {
    font-size: 14px;
    opacity: .75;
    line-height: 1.6;
    margin: 0 0 24px;
}

/* Steps */
.contact-feature-card__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}
.contact-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.contact-step__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    border-radius: 10px;
    background: rgba(var(--accent-rgb,59,130,246), .12);
    color: var(--accent);
}
.contact-step__content strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}
.contact-step__content span {
    font-size: 12.5px;
    opacity: .6;
}

.contact-feature-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- Form Card --- */
.contact-form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 24px 24px;
}
.contact-form-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.contact-form-card__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(var(--accent-rgb,59,130,246), .12);
    border-radius: 12px;
    color: var(--accent);
}
.contact-form-card__title {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}
.contact-form-card__sub {
    font-size: 13px;
    opacity: .6;
    margin: 2px 0 0;
}

.contact-form-card .form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}
.contact-form-card .form input:not([type="checkbox"]):not([type="hidden"]),
.contact-form-card .form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    transition: border-color .2s;
}
.contact-form-card .form input:not([type="checkbox"]):not([type="hidden"]):focus,
.contact-form-card .form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb,59,130,246), .15);
}
.contact-form-card .form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.contact-form-card .consent {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.5;
}
.contact-form-card .consent input[type="checkbox"] {
    margin-top: 2px;
}
.contact-form-card .alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.contact-form-card .alert.success {
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.3);
    color: #22c55e;
}
.contact-form-card .alert.error {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.3);
    color: #ef4444;
}
.contact-form-card .alert.error ul {
    margin: 0;
    padding-left: 16px;
}

/* ===== Kontakt: Karte ===== */
.contact-map-section {
    max-width: 1120px;
    margin: 0 auto 40px;
    padding: 0 20px;
}
.contact-map-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 24px 20px;
    overflow: hidden;
}
.contact-map-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.contact-map-card__title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
}
.contact-map-card__address {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    opacity: .7;
    margin: 0;
}
.contact-map-card__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    background: rgba(var(--accent-rgb,59,130,246), .08);
    border: 1px solid rgba(var(--accent-rgb,59,130,246), .2);
    border-radius: 8px;
    color: var(--accent);
    margin-bottom: 16px;
}
.contact-map-card .map-frame {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 16 / 9;
    background: var(--bg);
}
.contact-map-card .map-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}
.contact-map-card .map-placeholder {
    padding: 40px 24px;
    text-align: center;
    font-size: 13px;
    opacity: .8;
}
.contact-map-card .map-consent-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.contact-map-card .map-small {
    font-size: 11px;
    opacity: .5;
    margin-top: 12px;
}
.contact-map-card .map-after {
    text-align: center;
    margin-top: 12px;
}

/* ===== Kontakt: Buttons 2026 ===== */
.btn-2026 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    line-height: 1.4;
}
.btn-2026--primary {
    background: var(--accent);
    color: #fff;
}
.btn-2026--primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.btn-2026--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-2026--ghost:hover {
    background: rgba(var(--accent-rgb,59,130,246), .08);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-2026--lg {
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 12px;
}

/* ===== Kontakt: Responsive ===== */
@media (max-width: 800px) {
    .contact-dual__grid {
        grid-template-columns: 1fr;
    }
    .contact-feature-card,
    .contact-form-card {
        padding: 22px 18px 20px;
    }
    .contact-form-card .form__row {
        grid-template-columns: 1fr;
    }
    .contact-map-card__head {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 480px) {
    .contact-feature-card__actions {
        flex-direction: column;
    }
    .contact-feature-card__actions .btn-2026 {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Reparaturen: Links in ausgewählten Consent-Items ===== */
.rr-check-item:has(input:checked) a,
.rr-check-item:has(input:checked) a:visited{
    color: var(--accent-contrast) !important;
}

/* ===== Legal Pages (Impressum/Datenschutz/AGB) ===== */
.legal-page{ max-width:900px; margin:0 auto; }
.legal-page h1{ margin-bottom:10px; }
.legal-page h2{ margin:18px 0 8px; font-size:16px; letter-spacing:.02em; }
.legal-page p{ margin:0 0 10px; }
.legal-page p + h2{ margin-top:20px; }
.legal-page a{ word-break:break-word; color:#ffffff; text-decoration:underline; }
.legal-section{ padding:12px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,.02); margin:10px 0; }
@media (prefers-color-scheme: dark){ .legal-section{ background:rgba(255,255,255,.04); } }
/* Links auch im Light Mode gut sichtbar */
@media (prefers-color-scheme: light){ .legal-page a{ color:#000000; } }
.legal-label{ font-weight:700; }
.legal-lines{ margin:0; }
.legal-lines br{ line-height:1.75; }

/* ===== Kundenportal Dashboard (inline -> global) ===== */
.order-header .order-title-main{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.order-header .rr-pill.rr-pill-order{
    background:var(--accent);
    color:var(--accent-contrast);
    font-weight:800;
    display:inline-flex;
    align-items:center;
}

.order-header .rr-pill.rr-pill-dhl{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    background:var(--card);
    max-width:100%;
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow: var(--shadow);
    font-size:12px;
}
.order-header .rr-pill.rr-pill-dhl .dhl-link{
    color:var(--text);
    text-decoration:none;
}
.order-header .rr-pill.rr-pill-dhl .dhl-link:hover{ text-decoration:underline; }
.order-header .rr-pill.rr-pill-dhl .dhl-title{
    font-weight:800;
    color:var(--text);
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-code{
    font-weight:800;
    background:rgba(var(--accent-rgb),0.12);
    padding:3px 8px;
    border-radius:999px;
    color:var(--accent);
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-copy{
    appearance:none;
    border:0;
    cursor:pointer;
    padding:4px 8px;
    border-radius:999px;
    font-weight:800;
    background:rgba(var(--accent-rgb),0.16);
    color:var(--accent);
    white-space:nowrap;
}
.order-header .rr-pill.rr-pill-dhl .dhl-copy:hover{ background:rgba(var(--accent-rgb),0.22); }
.order-header .rr-pill.rr-pill-dhl .dhl-copy:active{ transform:scale(0.98); }

@media (prefers-color-scheme: dark){
    .order-header .rr-pill.rr-pill-dhl{
        border-color: rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
    }
    .order-header .rr-pill.rr-pill-dhl .dhl-code{
        background: rgba(255,255,255,0.08);
        color: #eafff3;
    }
    .order-header .rr-pill.rr-pill-dhl .dhl-copy{
        background: rgba(255,255,255,0.12);
        color: #eafff3;
    }
    .order-header .rr-pill.rr-pill-dhl .dhl-copy:hover{ background: rgba(255,255,255,0.18); }
}

/* ===== Footer + Cookie Banner (moved from footer.php) ===== */
/* Sticky-Footer: Footer immer am Ende des Viewports, wenn Seite kurz ist */
html, body { height: 100%; }
body { min-height: 100vh; }
.wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.site-footer { margin-top: auto; }

/* ─── FOOTER 2026 – Clean, open, no card ─── */
.site-footer {
    background: transparent;
    color: inherit;
    margin-top: 0;
    padding: var(--space-2xl) 0 0;
    position: relative;
}

.site-footer,
.site-footer * {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Top divider */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 1100px);
    height: 1px;
    background: var(--border);
}

.footer-top {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    display: grid;
    grid-template-columns: 1.3fr 2.7fr;
    gap: var(--space-2xl);
    align-items: start;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-logo {
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    font-size: var(--fs-xl);
    background: var(--gradient-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease-in-out infinite;
}

.footer-desc {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}

.footer-contact-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-xs);
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}
.footer-contact-link:hover {
    color: var(--accent);
}
.footer-contact-link svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.footer-col { 
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-heading {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    display: block;
    color: var(--text);
    opacity: 0.45;
}

/* Links – clean */
.footer-link,
.footer-link:visited,
.footer-link:hover,
.footer-link:active {
    color: inherit;
    text-decoration: none;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    color: var(--muted);
    padding: 4px 0;
    position: relative;
    transition: color .2s ease;
}

.footer-link:hover { 
    color: var(--text);
}

.footer-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Bottom bar */
.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-copy {
    font-size: var(--fs-xs);
    color: var(--muted);
    opacity: 0.6;
    letter-spacing: 0.01em;
}

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .footer-brand {
        text-align: center;
        align-items: center;
    }
    .footer-desc {
        max-width: 360px;
        text-align: center;
    }
    .footer-contact-row {
        align-items: center;
    }
    
    .footer-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }
}

@media (max-width: 520px) {
    .footer-nav { 
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .footer-col {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--border);
    }
    
    .footer-col:last-child {
        border-bottom: none;
    }
    
    .footer-heading { 
        margin-bottom: var(--space-xs);
    }

    .footer-link {
        font-size: var(--fs-base);
        padding: 6px 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
    }
}

/* ===== Cookie Banner ===== */
[hidden]{ display:none !important; }
:root{
  --kp-accent:var(--accent, #0b5ed7);
  --kp-overlay: rgba(0,0,0,.45);
    --kp-card: rgba(26, 29, 34, .78);
    --kp-text: rgba(255,255,255,.92);
    --kp-muted: rgba(255,255,255,.72);
    --kp-line: rgba(255,255,255,.12);
    --kp-rowhead: rgba(255,255,255,.06);
  --kp-radius: 18px;
}

/* Light-Mode Support (automatisch + optional per Theme-Attribut/Klasse) */
@media (prefers-color-scheme: light){
  :root{
    --kp-overlay: rgba(0,0,0,.18);
        --kp-card: rgba(255,255,255,.8);
    --kp-text: rgba(0,0,0,.88);
    --kp-muted: rgba(0,0,0,.62);
        --kp-line: rgba(0,0,0,.12);
        --kp-rowhead: rgba(0,0,0,.04);
  }
}
html[data-theme="light"], html.light, body.light{
  --kp-overlay: rgba(0,0,0,.18);
    --kp-card: rgba(255,255,255,.8);
  --kp-text: rgba(0,0,0,.88);
  --kp-muted: rgba(0,0,0,.62);
  --kp-line: rgba(0,0,0,.12);
    --kp-rowhead: rgba(0,0,0,.04);
}
.kp-cookie-backdrop{
  position:fixed;
  inset:0;
  background: var(--kp-overlay);
  z-index: 9998;
    backdrop-filter: blur(6px);
}
.kp-cookie-banner, .kp-cookie-modal{
  position:fixed; inset:auto 0 0 0;
  display:flex; justify-content:center;
  padding: 1rem;
  z-index: 9999;
}
.kp-cookie-modal{ inset:0; align-items:center; overflow-y:auto; -webkit-overflow-scrolling: touch; padding-top: 120px; padding-bottom: 2rem; }

.kp-cookie-card{
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  width:min(900px, calc(100% - 1rem));
    background:var(--kp-card);
  color:var(--kp-text);
  border-radius: var(--kp-radius);
  padding: 1rem 1rem 1.25rem;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    border:1px solid var(--kp-line);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.kp-cookie-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.kp-cookie-title{
  font-weight:800;
  font-size:1rem;
}

.kp-cookie-sub{
  color:var(--kp-muted);
  font-size:.9rem;
  line-height:1.4;
  margin-top:.25rem;
}

.kp-cookie-x{
  border:0;
  background:transparent;
  color:var(--kp-text);
  font-size:1.6rem;
  cursor:pointer;
  line-height:1;
  padding:0 .25rem;
}

.kp-cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.85rem;
  align-items:center;
}

.kp-cookie-btn{
  appearance:none;
  border:1px solid var(--kp-line);
  background:transparent;
  color:var(--kp-text);
  border-radius: 999px;
  padding:.5rem .9rem;
  font-weight:700;
  cursor:pointer;
}

.kp-cookie-btn-primary{
  background:var(--kp-accent);
  border-color:var(--kp-accent);
  color:#fff;
}

.kp-cookie-link{
  color:var(--kp-text);
  text-decoration:none;
  font-weight:600;
}
.kp-cookie-link:hover{ text-decoration:underline; }

.kp-cookie-table{ margin-top: .85rem; border:1px solid var(--kp-line); border-radius:12px; overflow:hidden; }
.kp-cookie-row{ display:grid; grid-template-columns: 1.1fr 2fr .9fr 1fr; gap:.5rem; padding:.6rem .75rem; border-top:1px solid var(--kp-line); }
.kp-cookie-row-head{ background: var(--kp-rowhead); font-weight:700; border-top:0; }
.kp-cookie-row code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.kp-cookie-section{ margin-top:.9rem; }
.kp-cookie-section-title{ font-weight:800; margin-bottom:.3rem; }

.kp-cookie-ext{ margin-top:.5rem; display:grid; gap:.5rem; }
.kp-cookie-ext-row{ border:1px solid var(--kp-line); border-radius:12px; padding:.6rem .75rem; }
.kp-cookie-ext-name{ font-weight:700; }
.kp-cookie-ext-desc{ color:var(--kp-muted); font-size:.9rem; margin-top:.2rem; }

@media (max-width: 860px){
  .kp-cookie-row{ grid-template-columns: 1fr; }
}

/* ===============================
     Einheitliche Button-Farbe/Font
     =============================== */
.btn,
a.btn,
button.btn,
.rr-btn,
.btn-primary,
.contact-page .btn,
.home .btn{
    font-family: var(--btn-font) !important;
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-border) !important;
}

.btn:hover,
a.btn:hover,
button.btn:hover,
.rr-btn:hover,
.btn-primary:hover,
.contact-page .btn:hover,
.home .btn:hover{
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-border) !important;
    filter: brightness(1.06);
}

/* Outline/Ghost Buttons behalten ihr Aussehen */
.rr-btn-ghost,
.rr-btn-outline,
.btn-ghost,
.kp-cookie-btn:not(.kp-cookie-btn-primary) {
    background: transparent !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.rr-btn-ghost:hover,
.rr-btn-outline:hover,
.btn-ghost:hover,
.kp-cookie-btn:not(.kp-cookie-btn-primary):hover {
    background: rgba(var(--accent-rgb), 0.08) !important;
}

/* Delete Button bleibt rot */
.kp-btn-delete {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}
.kp-btn-delete:hover {
    background: #c82333 !important;
    border-color: #c82333 !important;
}

/* DHL Button bleibt gelb */
.kp-btn-dhl {
    background: #FFCC00 !important;
    color: #000 !important;
    border-color: #FFCC00 !important;
}
.kp-btn-dhl:hover {
    background: #e6b800 !important;
    border-color: #e6b800 !important;
}

/* WhatsApp behält eigene Farbe */
.btn-whatsapp {
    background: #25D366 !important;
    color: #fff !important;
    border-color: #25D366 !important;
}
.btn-whatsapp:hover {
    background: #1da851 !important;
    border-color: #1da851 !important;
}

/* ===============================
     Header-Logo Gr&ouml;&szlig;en-Fix
     =============================== */
.site-header .brand img{
    max-width: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 10px;
}
#main-nav.site-nav .nav-brand-mobile img{
    max-width: 160px !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 14px;
}

@media (max-width: 900px){
    #main-nav.site-nav .nav-brand-mobile img{
        max-height: 56px !important;
    }
}

/* ===============================
     Vor-Ort-Hilfe (Seitenstil)
   =============================== */

/* Die main.card ist der Container - Hero soll sich einfügen, keine eigene Card sein */
.vor-ort.card{
    padding: clamp(18px, 3vw, 32px);
}

.vor-ort .hero{
    /* Hero behält Hintergrund, aber ohne doppeltes Card-Styling */
    margin-bottom: clamp(18px, 3vw, 34px);
}

.vor-ort .hero-accent{
    display: none; /* Accent-Gradient im Card-Kontext nicht nötig */
}

.vor-ort .micro-divider{
    width:64px;
    height:3px;
    margin:12px 0 14px;
    border-radius:3px;
    background:linear-gradient(90deg,var(--accent),color-mix(in srgb, var(--accent) 30%, transparent));
}

/* Zentrierung/Container für Vor-Ort-Hilfe */
.vor-ort .hero-inner,
.vor-ort .services,
.vor-ort .services-head,
.vor-ort .services-grid,
.vor-ort .quote-card,
.vor-ort .checklist,
.vor-ort .text-panel{
    max-width: 100%;
    width: 100%;
}

.vor-ort .services{
    padding: 0;
}

.vor-ort .services-head{
    text-align: left;
}

.vor-ort .services + .services{
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: clamp(18px, 3vw, 32px);
    border-top: 1px solid var(--border);
}

.vor-ort .services-title{
    margin-top: 6px;
    margin-bottom: 6px;
}

.vor-ort .services-sub{
    margin-top: 4px;
    margin-bottom: 8px;
}

.vor-ort .checklist{
    margin: 12px 0 0;
    padding-left: 0;
}

.vor-ort .hero-actions{
    margin-top: 8px;
}

.vor-ort .lead-note{
    font-size:16.5px;
    opacity:1;
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    padding:16px 18px;
    border-radius:14px;
    border: 1px solid var(--border);
    color: var(--text);
}

.vor-ort .quote-card{
    margin-top:22px;
    padding:22px 26px;
    border-radius:18px;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border:1px solid var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.vor-ort .quote-text{
    font-size:17px;
    font-weight:600;
    line-height:1.45;
}

.vor-ort .quote-author{
    display:block;
    margin-top:10px;
    font-size:13px;
    opacity:.7;
}

.vor-ort .eyebrow{
    display:inline-block;
    margin-bottom:6px;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    opacity:.85;
}

.vor-ort .text-accent{
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    padding:16px 18px;
    border-radius:14px;
    border: 1px solid var(--border);
    color: var(--text);
}

.vor-ort .text-panel{
    margin-top:14px;
    padding:18px 18px 16px;
    border-radius:18px;
    background: var(--card);
    border:1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.vor-ort .service-title .dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
    margin-right:6px;
}

.vor-ort .highlight-wrap{
    position:relative;
    padding-left:16px;
    margin-top:14px;
}

.vor-ort .highlight-wrap::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    bottom:6px;
    width:4px;
    border-radius:4px;
    background:linear-gradient(180deg,var(--accent),color-mix(in srgb, var(--accent) 30%, transparent));
}

.vor-ort .services-sub strong{
    font-weight:800;
}

.vor-ort .services-sub.lead-strong{
    font-size:20px;
    letter-spacing:.3px;
    color:var(--text);
}

.vor-ort .services-title::after{
    content:"";
    display:block;
    width:46px;
    height:4px;
    margin-top:10px;
    border-radius:4px;
    background:var(--accent);
    opacity:.85;
}

.vor-ort .pill{
    display:inline-block;
    margin-left:8px;
    padding:4px 10px;
    font-size:12px;
    font-weight:700;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
}

.vor-ort .step-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--accent, #004225);
    color:#fff;
    font-weight:700;
    font-size:14px;
}

.vor-ort .step-card{
    border-left:4px solid var(--accent, #004225);
}

@media (max-width: 640px){
    .vor-ort .services-head br{ display:none; }
    .vor-ort .hero-actions{ flex-direction:column; align-items:stretch; }
    .vor-ort .hero-actions a.btn{ width:100%; margin-top:10px; }
}

/* ===== Header Nav Links: Clean style ===== */
@media (min-width: 901px) {
    .site-header .site-nav .nav-link {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 6px 12px;
        border-radius: var(--radius);
    }
    .site-header .site-nav .nav-link:hover {
        background: rgba(var(--accent-rgb), 0.05) !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }
    .site-header .site-nav .nav-link--cta {
        background: var(--accent) !important;
        padding: 8px 20px;
        border-radius: var(--radius-full) !important;
    }
    .site-header .site-nav .nav-link--cta:hover {
        background: color-mix(in srgb, var(--accent) 85%, #000) !important;
        box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2) !important;
    }
}

/* ===== Header: Remove rectangle around nav container ===== */
@media (min-width: 901px) {
    nav.site-nav,
    #main-nav.site-nav {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ===== Dark Mode Page Background Fix ===== */
@media (prefers-color-scheme: dark){
    html,
    body{
        background: #15171b !important;
    }
}

/* ===== Header: Aktiver Nav-Link ===== */
@media (prefers-color-scheme: light) {
    .site-header .site-nav .nav-link.is-active {
        color: var(--accent) !important;
        font-weight: var(--fw-semibold);
        background: transparent !important;
    }
}
@media (prefers-color-scheme: dark) {
    .site-header .site-nav .nav-link.is-active {
        color: var(--accent) !important;
        font-weight: var(--fw-semibold);
        background: transparent !important;
    }
}

/* ===== Fehler-Popup Modal ===== */
.rr-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
}
.rr-modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    animation: modalSlideIn 0.25s ease-out;
    margin: auto;
}
@keyframes modalSlideIn {
    from { transform: translateY(-30px) scale(0.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.rr-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(220, 53, 69, 0.15);
}
.rr-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #dc3545;
}
.rr-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #dc3545;
}
.rr-modal-icon svg {
    width: 28px;
    height: 28px;
}
.rr-modal-body {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}
.rr-modal-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
}
.rr-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
}
.rr-modal-footer .rr-btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rr-modal-footer .rr-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* ========================================
   Loading / Skeleton States
   ======================================== */

/* Skeleton shimmer animation */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Base skeleton class */
.skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        var(--border) 0%,
        rgba(var(--accent-rgb), 0.08) 20%,
        rgba(var(--accent-rgb), 0.12) 50%,
        rgba(var(--accent-rgb), 0.08) 80%,
        var(--border) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s infinite linear;
    border-radius: var(--radius-sm);
}

/* Skeleton text line */
.skeleton-text {
    height: 1em;
    margin-bottom: 0.6em;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 60%;
}

/* Skeleton title */
.skeleton-title {
    height: 1.5em;
    width: 70%;
    margin-bottom: 1em;
}

/* Skeleton image/media placeholder */
.skeleton-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
}

/* Skeleton card */
.skeleton-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Skeleton button */
.skeleton-btn {
    height: 48px;
    width: 140px;
    border-radius: var(--radius-sm);
}

/* Skeleton avatar/circle */
.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}


/* ========================================
   Enhanced Responsive Design System
   ======================================== */

/* Extra small devices (phones, <576px) */
@media (max-width: 575.98px) {
    :root {
        --space-md: 0.875rem;
        --space-lg: 1.25rem;
        --space-xl: 1.75rem;
    }
    
    .service-card {
        border-radius: 16px;
    }
    
    .service-media {
        aspect-ratio: 4 / 3;
        border-radius: 16px 16px 12px 12px;
    }
    
    .service-title {
        font-size: var(--fs-md);
    }
    
    .service-list {
        font-size: var(--fs-xs);
    }
}

/* Small devices (landscape phones, 576px - 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    
    .service-card {
        border-radius: 18px;
    }
}

/* Medium devices (tablets, 768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    
    .hero-title {
        font-size: var(--fs-3xl);
    }
}

/* Large devices (desktops, 992px - 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Extra large devices (large desktops, ≥1200px) */
@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1200px;
        margin-inline: auto;
    }
    
    .hero-title {
        font-size: var(--fs-4xl);
    }
}

/* Touch-specific optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for mobile */
    a.btn {
        min-height: 48px;
        padding: 16px 24px;
    }
    
    /* Remove button shimmer on touch devices */
    a.btn::after {
        display: none;
    }
    
    /* Disable 3D tilt effects on touch */
    .service-card {
        --card-tilt: 0deg;
        --card-lift: -4px;
    }
    
    .service-card:hover,
    .service-card:focus-within {
        transform: translateY(var(--card-lift));
    }
}

/* High-resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .service-media img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Orientation-specific adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        padding: var(--space-md);
        min-height: auto;
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Print styles */
@media print {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-blur {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    
    .service-card::before,
    .service-card::after,
    a.btn::after {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* ========================================
   EXTRA DESIGN UPGRADES 2024
   ======================================== */

/* Enhanced Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Smoother link transitions */
a {
    transition: color var(--duration-fast) var(--ease-smooth),
                opacity var(--duration-fast) var(--ease-smooth);
}

/* Enhanced section headings */
.services-title,
.section-title,
.panel-title {
    position: relative;
    display: inline-block;
}

.services-title::after,
.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gradient-border);
    border-radius: 2px;
    opacity: 0.7;
}

.services-head .services-title::after,
.section-head .section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Hero accent text shimmer */
.hero-accent-text {
    position: relative;
    color: var(--accent);
}

@media (prefers-color-scheme: dark) {
    .hero-accent-text {
        color: #00ff88;
    }
}

/* Card hover glow effect */
.service-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: var(--gradient-border);
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity var(--duration-slow) var(--ease-smooth);
}

.service-card:hover::after,
.service-card:focus-within::after {
    opacity: 0.4;
}

/* Button micro-interactions */
a.btn:active,
button.btn:active {
    transform: scale(0.97) translateY(2px);
    transition-duration: 0.08s;
}

/* Text selection styling */
::selection {
    background: var(--accent-soft);
    color: var(--text);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 100px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
    background-clip: content-box;
}

/* Page Header responsive */
@media (max-width: 575.98px) {
    .page-header {
        padding: var(--space-lg) var(--space-sm);
    }
    
    .page-header-title {
        font-size: var(--fs-2xl);
    }
    
    .page-header-sub {
        font-size: var(--fs-base);
    }
    
    .page-header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-header-actions .btn {
        width: 100%;
        text-align: center;
    }
    
    .page-header-kpis {
        flex-direction: column;
    }
    
    .kpi-pill {
        width: 100%;
        text-align: center;
    }
}

/* Smooth page transitions */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    .gradient-text {
        animation: none;
    }
    
    .hero-pill {
        animation: none;
    }
    
    .hero::before {
        animation: none;
    }
}

/* Enhanced loading state */
.is-loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

/* =====================================================
   2026 PREMIUM DESIGN UPGRADES
   ===================================================== */

/* === PREMIUM NOISE TEXTURE OVERLAY === */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    mix-blend-mode: overlay;
}

/* Noise-Texture auf Mobile deaktivieren (GPU sparen) */
@media (max-width: 767.98px) {
    body::after { display: none; }
}

/* === PREMIUM ANIMATED MESH BACKGROUND === */
.premium-mesh {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--gradient-mesh);
    animation: mesh-shift 30s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes mesh-shift {
    0%, 100% { 
        filter: hue-rotate(0deg);
        transform: scale(1);
    }
    50% { 
        filter: hue-rotate(10deg);
        transform: scale(1.05);
    }
}

/* === PREMIUM GLOW EFFECTS === */
.glow {
    position: relative;
}

.glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-border);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    filter: blur(15px);
    transition: opacity var(--duration-slow) var(--ease-out);
}

.glow:hover::before {
    opacity: 0.6;
}

/* === 2026 PREMIUM BUTTONS === */
a.btn,
button.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--btn-shadow);
    transition: 
        transform var(--duration-normal) var(--ease-spring),
        box-shadow var(--duration-normal) var(--ease-out),
        background var(--duration-fast) var(--ease-smooth);
}

a.btn:hover,
button.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--btn-shadow-hover);
    background: var(--accent-hover);
}

a.btn:active,
button.btn:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: var(--duration-instant);
}

/* Premium shimmer effect */
a.btn::before,
button.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: left 0.5s var(--ease-out);
}

a.btn:hover::before,
button.btn:hover::before {
    left: 100%;
}

/* Ghost Button Premium */
a.btn-ghost,
button.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}

a.btn-ghost:hover,
button.btn-ghost:hover {
    background: var(--accent-softer);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

@media (prefers-color-scheme: dark) {
    a.btn-ghost:hover,
    button.btn-ghost:hover {
        background: rgba(0, 255, 136, 0.1);
        border-color: var(--accent-light);
        color: var(--accent-light);
    }
}

/* === 2026 COMPACT BUTTON SYSTEM (btn-2026) === */
.btn-2026 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-smooth);
}

.btn-2026 svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-2026--primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

.btn-2026--primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-2026--secondary {
    background: var(--glass-bg);
    color: var(--text);
    border-color: var(--border-strong);
    backdrop-filter: blur(8px);
}

.btn-2026--secondary:hover {
    background: var(--accent-softer);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-2026--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn-2026--ghost:hover {
    background: var(--glass-bg);
    color: var(--text);
}

.btn-2026--lg {
    padding: 12px 24px;
    font-size: var(--fs-base);
}

.btn-2026--lg svg {
    width: 18px;
    height: 18px;
}

@media (prefers-color-scheme: dark) {
    .btn-2026--primary {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
    }
    
    .btn-2026--primary:hover {
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.35);
    }
    
    .btn-2026--secondary {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.15);
    }
    
    .btn-2026--secondary:hover {
        background: rgba(0, 255, 136, 0.1);
        border-color: var(--accent-light);
        color: var(--accent-light);
    }
}

/* === 2026 PREMIUM CARDS === */
.premium-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    position: relative;
    overflow: hidden;
    transition: 
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
}

.premium-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
}

.premium-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* === 2026 FLOATING ELEMENTS === */
.float {
    animation: float 6s ease-in-out infinite;
}

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

.float-delayed {
    animation: float 6s ease-in-out 2s infinite;
}

/* === 2026 PREMIUM INPUTS === */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--glass-bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: 
        border-color var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth),
        background var(--duration-fast) var(--ease-smooth);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    background: var(--card);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

/* === 2026 MAGNETIC CURSOR EFFECT (Subtle) === */
@media (hover: hover) and (pointer: fine) {
    .magnetic {
        transition: transform var(--duration-normal) var(--ease-out);
    }
    
    .magnetic:hover {
        transform: scale(1.02);
    }
}

/* === 2026 TEXT REVEAL ANIMATION === */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    animation: text-reveal 0.8s var(--ease-out) forwards;
}

@keyframes text-reveal {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* === 2026 STAGGER ANIMATION === */
.stagger > * {
    opacity: 0;
    transform: translateY(20px);
    animation: stagger-in 0.6s var(--ease-out) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }
.stagger > *:nth-child(4) { animation-delay: 0.4s; }
.stagger > *:nth-child(5) { animation-delay: 0.5s; }
.stagger > *:nth-child(6) { animation-delay: 0.6s; }
.stagger > *:nth-child(7) { animation-delay: 0.7s; }
.stagger > *:nth-child(8) { animation-delay: 0.8s; }
.stagger > *:nth-child(9) { animation-delay: 0.9s; }

@keyframes stagger-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 2026 MARQUEE EFFECT === */
.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--space-lg);
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--space-lg);
    min-width: 100%;
    animation: marquee 30s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* === 2026 BENTO GRID === */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: var(--space-md);
}

.bento-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    backdrop-filter: blur(var(--glass-blur));
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-slow) var(--ease-out);
}

.bento-item:hover {
    transform: scale(1.02);
}

.bento-item.span-2 { grid-column: span 2; }
.bento-item.span-3 { grid-column: span 3; }
.bento-item.span-row-2 { grid-row: span 2; }

@media (max-width: 991.98px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-item.span-3 { grid-column: span 2; }
}

@media (max-width: 575.98px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-item.span-2,
    .bento-item.span-3 { grid-column: span 1; }
}

/* === 2026 BLUR REVEAL ON SCROLL === */
.blur-reveal {
    filter: blur(10px);
    opacity: 0;
    transform: translateY(30px);
    transition: 
        filter 0.8s var(--ease-out),
        opacity 0.8s var(--ease-out),
        transform 0.8s var(--ease-out);
}

.blur-reveal.is-visible {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

/* === 2026 COUNTER ANIMATION === */
.counter {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* === 2026 BADGE/TAG STYLES === */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.8em;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid transparent;
}

.badge-outline {
    background: transparent;
    border-color: var(--border);
    color: var(--muted);
}

.badge-success {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.badge-error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* === 2026 DIVIDER WITH GLOW === */
.divider-glow {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border: none;
    margin: var(--space-xl) 0;
    opacity: 0.5;
}

/* === 2026 ICON CONTAINERS === */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    transition: 
        background var(--duration-fast) var(--ease-smooth),
        transform var(--duration-fast) var(--ease-spring);
}

.icon-box:hover {
    background: var(--accent);
    color: var(--accent-contrast);
    transform: scale(1.1);
}

.icon-box-lg {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
}

/* === 2026 TOOLTIP === */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 8px 12px;
    background: var(--card-elevated);
    color: var(--text);
    font-size: var(--fs-xs);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
    max-width: min(280px, 90vw);
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    z-index: 1000;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

/* === 2026 PROGRESS BAR === */
.progress {
    height: 8px;
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--gradient-border);
    border-radius: var(--radius-full);
    transition: width 0.6s var(--ease-out);
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: progress-shimmer 2s ease-in-out infinite;
}

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

/* === 2026 ACCORDION === */
.accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-sm);
    overflow: hidden;
    background: var(--glass-bg-soft);
}

.accordion-header {
    padding: var(--space-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: var(--fw-semibold);
    transition: background var(--duration-fast) var(--ease-smooth);
}

.accordion-header:hover {
    background: var(--accent-softer);
}

.accordion-icon {
    transition: transform var(--duration-normal) var(--ease-out);
}

.accordion-item.is-open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-out);
}

.accordion-item.is-open .accordion-content {
    max-height: 500px;
}

.accordion-body {
    padding: 0 var(--space-md) var(--space-md);
    color: var(--muted);
}

/* === 2026 TABS === */
.tabs {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--bg-subtle);
    border-radius: var(--radius);
    margin-bottom: var(--space-lg);
}

.tab {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    font-weight: var(--fw-medium);
    color: var(--muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: 
        background var(--duration-fast) var(--ease-smooth),
        color var(--duration-fast) var(--ease-smooth);
}

.tab:hover {
    color: var(--text);
}

.tab.is-active {
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* === 2026 AVATAR === */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    overflow: hidden;
    border: 2px solid var(--card);
    box-shadow: var(--shadow-sm);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-lg {
    width: 56px;
    height: 56px;
    font-size: var(--fs-lg);
}

.avatar-xl {
    width: 80px;
    height: 80px;
    font-size: var(--fs-xl);
}

/* Avatar Group */
.avatar-group {
    display: flex;
}

.avatar-group .avatar {
    margin-left: -12px;
}

.avatar-group .avatar:first-child {
    margin-left: 0;
}

/* === 2026 SKELETON LOADING ENHANCED === */
.skeleton-2026 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        var(--bg-subtle) 0%,
        var(--card) 50%,
        var(--bg-subtle) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-2026 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-2026 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === 2026 PULSE DOT (Status Indicator) === */
.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    position: relative;
    flex-shrink: 0;
}

.pulse-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.3;
    animation: pulse-ring 2.5s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* === 2026 SPOTLIGHT EFFECT === */
.spotlight {
    position: relative;
    overflow: hidden;
}

.spotlight::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--accent-soft), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
    transform: translate(-50%, -50%);
}

.spotlight:hover::before {
    opacity: 1;
}

/* === 2026 RESPONSIVE CONTAINER QUERIES === */
@container (min-width: 400px) {
    .container-responsive {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 700px) {
    .container-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === 2026 PRINT OPTIMIZATION === */
@media print {
    body::after,
    .premium-mesh,
    .noise-overlay {
        display: none !important;
    }
    
    * {
        animation: none !important;
        transition: none !important;
    }
    
    .no-print {
        display: none !important;
    }
}

/* === 2026 HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    :root {
        --glass-bg: var(--card);
        --glass-border: var(--border-strong);
        --accent-soft: rgba(var(--accent-rgb), 0.25);
    }
    
    .gradient-text {
        -webkit-text-fill-color: var(--accent);
        background: none;
    }
}

/* === 2026 REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .marquee-content {
        animation: none;
    }
    
    .float,
    .float-delayed {
        animation: none;
    }
}

/* ============================================
   2026 PREMIUM MOBILE OPTIMIZATIONS
   ============================================ */

/* === Mobile-First Base Resets === */
@media (max-width: 767.98px) {
    /* Fluid spacing scale for mobile */
    :root {
        --space-xs: 6px;
        --space-sm: 10px;
        --space-md: 16px;
        --space-lg: 24px;
        --space-xl: 32px;
        --space-2xl: 48px;
        --space-3xl: 64px;
    }
    
    /* Optimized touch targets */
    .btn, .btn-2026, button, a.magnetic,
    input[type="submit"], input[type="button"] {
        min-height: 48px;
        padding-inline: 20px;
    }
    
    /* Better mobile typography */
    .hero-headline {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.15;
    }
    
    .hero-sub {
        font-size: var(--fs-base);
    }
    
    /* Stacked hero CTAs on mobile */
    .hero-cta {
        flex-direction: column;
        width: 100%;
        gap: var(--space-sm);
    }
    
    .hero-cta .btn-2026 {
        width: 100%;
        justify-content: center;
    }
    
    /* Hero features wrap better */
    .hero-features {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .hero-feature {
        width: 100%;
        justify-content: center;
    }
    
    /* Hero glow subtle on mobile for performance */
    .hero-glow {
        opacity: 0.3;
        filter: blur(60px);
    }
    
    /* Disable mesh on mobile for performance */
    .hero-mesh {
        display: none;
    }
    
    /* Simpler card hover on touch devices */
    .service-card,
    .card-2026 {
        transform: none !important;
    }
    
    .service-card:hover,
    .card-2026:hover {
        transform: translateY(-4px) !important;
    }
    
    /* Single column service grid */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    /* Better mobile footer */
    footer {
        padding: var(--space-xl) var(--space-md);
    }
    
    /* Optimize header for mobile */
    .site-header {
        padding: var(--space-sm) var(--space-md);
    }
    
    /* Reduce padding in sections */
    section.services,
    section.hero {
        padding-inline: var(--space-md);
    }
}

/* === Extra Small Devices (phones in portrait) === */
@media (max-width: 479.98px) {
    :root {
        --fs-5xl: 2rem;
        --fs-4xl: 1.75rem;
        --fs-3xl: 1.5rem;
    }
    
    .hero-headline {
        font-size: 1.875rem;
    }
    
    .hero-badge {
        font-size: 11px;
        padding: 0;
    }
    
    .btn-2026--lg {
        padding: 14px 24px;
        font-size: var(--fs-sm);
    }
    
    /* Stack stat items vertically */
    .hero-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
    
    .stat-item {
        width: 100%;
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--border);
    }
    
    .stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* === Landscape Phone Optimization === */
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero--2026 {
        min-height: auto;
        padding-block: var(--space-xl);
    }
    
    .hero-headline {
        font-size: 2rem;
    }
    
    .hero-cta {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .hero-cta .btn-2026 {
        width: auto;
        flex: 1 1 45%;
    }
}

/* === Tablet Optimizations === */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-cta {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* === Touch Device Optimizations === */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover-dependent effects on touch */
    .service-card::before,
    .card-2026::before {
        opacity: 0 !important;
    }
    
    /* Simpler button hover */
    .btn-2026:hover {
        transform: none;
    }
    
    .btn-2026:active {
        transform: scale(0.98);
    }
    
    /* Disable magnetic effect on touch */
    .magnetic {
        transform: none !important;
    }
    
    /* Ensure focus states are visible */
    .btn-2026:focus-visible,
    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 3px;
    }
}

/* === Safe Area Support (notch devices) === */
@supports (padding: max(0px)) {
    .site-header {
        padding-left: max(var(--space-md), env(safe-area-inset-left));
        padding-right: max(var(--space-md), env(safe-area-inset-right));
    }
    
    footer {
        padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
    }
    
    .hero-inner {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* === Performance Optimizations for Low-End Devices === */
@media (prefers-reduced-motion: reduce), 
       (update: slow) {
    .hero-glow,
    .hero-mesh {
        display: none;
    }
    
    .gradient-text {
        background: none;
        -webkit-text-fill-color: var(--accent);
        color: var(--accent);
    }
    
    .stagger {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .reveal-blur {
        filter: none;
        opacity: 1;
    }
    
    .reveal-blur.visible {
        filter: none;
    }
}
/* =====================================================
   NEUE KOMPONENTEN (FAQ, Chatbot, Trust-Stats, Timeline)
   hinzugefügt zur bestehenden Design-Basis
   ===================================================== */

/* ─── GLOBAL PARTICLES CANVAS (Vollbild) ─── */
.particles-fullpage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ─── TRUST / STATS ─── */
/* ─── HIGHLIGHTS STRIP ─── */
.highlights-strip {
    padding: var(--space-xl) var(--space-md);
    max-width: 1100px;
    margin: 0 auto;
}
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}
.highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-sm);
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    transition: transform 0.35s var(--ease-smooth),
                box-shadow 0.35s var(--ease-smooth),
                border-color 0.35s ease;
}
.highlight-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.2);
}
.highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
}
.highlight-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2;
}
.highlight-text {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--accent);
}
.highlight-sub {
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
}
@media (max-width: 420px) {
    .highlights-grid {
        grid-template-columns: 1fr;
    }
}
@media (prefers-color-scheme: dark) {
    .highlight-item {
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.07);
    }
    .highlight-item:hover {
        box-shadow: 0 12px 32px rgba(0,0,0,0.25);
        border-color: rgba(var(--accent-rgb), 0.25);
    }
}

/* ─── SERVICE BENTO GRID (2026 Image Cards) ─── */
.svc-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Bento layout: featured card spans 2 cols, row 1 */
.svc-card--lg {
    grid-column: span 2;
    grid-row: span 2;
}
/* Wide card spans 2 cols */
.svc-card--wide {
    grid-column: span 2;
}

/* Stagger entrance */
.svc-bento .svc-card {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-bento.is-visible .svc-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.svc-bento.is-visible .svc-card:nth-child(1) { transition-delay: 0s; }
.svc-bento.is-visible .svc-card:nth-child(2) { transition-delay: 0.06s; }
.svc-bento.is-visible .svc-card:nth-child(3) { transition-delay: 0.12s; }
.svc-bento.is-visible .svc-card:nth-child(4) { transition-delay: 0.18s; }
.svc-bento.is-visible .svc-card:nth-child(5) { transition-delay: 0.24s; }
.svc-bento.is-visible .svc-card:nth-child(6) { transition-delay: 0.30s; }
.svc-bento.is-visible .svc-card:nth-child(7) { transition-delay: 0.36s; }
.svc-bento.is-visible .svc-card:nth-child(8) { transition-delay: 0.42s; }
.svc-bento.is-visible .svc-card:nth-child(9) { transition-delay: 0.48s; }

/* Card base */
.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Background image */
.svc-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.svc-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.5s ease;
}

/* Gradient overlay: dark at bottom for text readability */
.svc-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.04) 100%
    );
    transition: background 0.4s ease;
}

/* Badge (Spezialisierung) */
.svc-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
}

/* Content (bottom) */
.svc-card-content {
    position: relative;
    z-index: 2;
    padding: 20px 22px;
}
.svc-card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.svc-card--lg .svc-card-title {
    font-size: var(--fs-2xl);
}
.svc-card-sub {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    letter-spacing: 0.02em;
}

/* Arrow icon */
.svc-card-arrow {
    position: absolute;
    bottom: 22px;
    right: 22px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.35s ease,
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease;
}
.svc-card-arrow svg {
    width: 18px;
    height: 18px;
}

/* ── Hover state ── */
.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(var(--accent-rgb), 0.25);
}
.svc-card:hover .svc-card-bg img {
    transform: scale(1.08);
}
.svc-card:hover .svc-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.15) 70%,
        rgba(0, 0, 0, 0.08) 100%
    );
}
.svc-card:hover .svc-card-arrow {
    opacity: 1;
    transform: translateX(0);
}
.svc-card:hover .svc-card-arrow:hover {
    background: var(--accent);
}

/* Focus visible for accessibility */
.svc-card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .svc-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(200px, auto);
    }
    .svc-card--lg {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 280px;
    }
    .svc-card--wide {
        grid-column: span 2;
    }
}
@media (max-width: 580px) {
    .svc-bento {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .svc-card--lg,
    .svc-card--wide {
        grid-column: span 1;
    }
    .svc-card {
        min-height: 200px;
    }
    .svc-card--lg {
        min-height: 260px;
    }
}

/* ── Dark mode adjustments ── */
@media (prefers-color-scheme: dark) {
    .svc-card:hover {
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                    0 0 40px rgba(var(--accent-rgb), 0.08);
    }
    .svc-card-badge {
        background: var(--accent);
        color: var(--accent-contrast);
    }
}

/* ── Light mode adjustments ── */
@media (prefers-color-scheme: light) {
    .svc-card-badge {
        background: var(--accent);
        color: #fff;
    }
    .svc-card:hover {
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                    0 0 0 1px rgba(var(--accent-rgb), 0.2);
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .svc-bento .svc-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .svc-card-bg img {
        transition: none;
    }
    .svc-card-arrow {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─── PLATINEN PROMO BANNER ─── */
/* .platinen-promo wurde entfernt – leerer Block verursachte fehlende } */

/* ─── PLATINEN PCB SECTION (Side-by-Side: Text + animated board) ─── */
.platinen-pcb {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: var(--space-xl) auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--space-lg);
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
}
.platinen-pcb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
/* Text column */
.platinen-pcb-text {
    max-width: 500px;
}
.platinen-pcb-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: var(--space-sm);
}
.platinen-pcb h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: var(--fw-black, 900);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
    line-height: 1.15;
}
.platinen-pcb-text > p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}
.platinen-pcb-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.platinen-pcb-features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-sm);
    color: var(--fg);
}
.pcb-feat-icon {
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.pcb-feat-icon svg {
    width: 0.75rem;
    height: 0.75rem;
    stroke-width: 3;
}

/* Visual column: PCB board */
.platinen-pcb-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pcb-board {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.35));
}

/* ── Board component styles ── */
.pcb-b-trace {
    stroke: #c8956c;
    stroke-width: 1.8;
    fill: none;
    opacity: 0.55;
}
.pcb-b-cpu {
    fill: #1a1a2e;
    stroke: #c8956c;
    stroke-width: 1.2;
}
.pcb-bga-pads circle {
    fill: #c8956c;
    opacity: 0.5;
}
.pcb-b-ic {
    fill: #12122a;
    stroke: rgba(200,149,108,0.5);
    stroke-width: 0.8;
}
.pcb-b-pin {
    stroke: #c8956c;
    stroke-width: 1.2;
    opacity: 0.5;
}
.pcb-b-smd-r {
    fill: rgba(200,149,108,0.15);
    stroke: rgba(200,149,108,0.4);
    stroke-width: 0.8;
}
.pcb-b-elcap {
    fill: none;
    stroke: rgba(200,149,108,0.3);
    stroke-width: 1;
}
.pcb-b-elcap-inner {
    fill: rgba(200,149,108,0.06);
    stroke: rgba(200,149,108,0.15);
    stroke-width: 0.6;
}
.pcb-b-elcap-mark {
    stroke: rgba(200,149,108,0.2);
    stroke-width: 0.8;
}
.pcb-b-via {
    fill: rgba(200,149,108,0.2);
    stroke: rgba(200,149,108,0.35);
    stroke-width: 1;
}
.pcb-b-via-hole {
    fill: #0a3d2a;
}
.pcb-b-node {
    fill: rgba(200,149,108,0.6);
}
.pcb-b-silk {
    fill: rgba(255,255,255,0.45);
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.pcb-b-label {
    font-family: monospace;
}

/* LED Indicators */
.pcb-b-led--green {
    fill: #1aff6e;
    opacity: 0.9;
    animation: pcbLedBlink 2s ease-in-out infinite;
}
.pcb-b-led--amber {
    fill: #ffaa00;
    opacity: 0.6;
    animation: pcbLedBlink 1.2s ease-in-out infinite;
    animation-delay: 0.3s;
}
.pcb-b-led--red {
    fill: #ff3b3b;
    opacity: 0.3;
}
@keyframes pcbLedBlink {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.3; }
}

/* SMD Capacitors (ceramic, blue tint) */
.pcb-b-smd-c {
    fill: rgba(100,150,220,0.15);
    stroke: rgba(100,150,220,0.35);
    stroke-width: 0.6;
}

/* Inductors */
.pcb-b-inductor {
    fill: rgba(200,149,108,0.08);
    stroke: rgba(200,149,108,0.3);
    stroke-width: 1;
}

/* Thick traces (power bus) */
.pcb-b-trace--thick {
    stroke-width: 2.8;
    opacity: 0.7;
}

/* Antenna trace */
.pcb-b-trace--ant {
    stroke-width: 1;
    opacity: 0.4;
    stroke-dasharray: 3 2;
}

/* Animated data flow signals */
.pcb-b-signal {
    fill: var(--accent, #00bcd4);
    filter: url(#plGlow2);
    opacity: 0.9;
}
.pcb-b-signal--d1 { opacity: 0.75; }
.pcb-b-signal--d2 { opacity: 0.8; }
.pcb-b-signal--d3 { opacity: 0.7; }
.pcb-b-signal--d4 { opacity: 0.85; }
.pcb-b-signal--d5 { opacity: 0.7; }
.pcb-b-signal--d6 { opacity: 0.75; }
.pcb-b-signal--d7 { opacity: 0.65; }
.pcb-b-signal--d8 { opacity: 0.7; }
.pcb-b-signal--d9 { opacity: 0.6; }
.pcb-b-signal--d10 { opacity: 0.55; }
.pcb-b-signal--d11 { opacity: 0.6; }
.pcb-b-signal--d12 { opacity: 0.65; }
.pcb-b-signal--d13 { opacity: 0.5; }
.pcb-b-signal--d14 { opacity: 0.55; }

/* Pulsing glow on CPU & nodes */
.pcb-b-pulse {
    fill: rgba(var(--accent-rgb), 0.2);
    animation: pcbBoardPulse 3s ease-in-out infinite;
}
.pcb-b-pulse--d1 { animation-delay: 0.5s; }
.pcb-b-pulse--d2 { animation-delay: 1s; }
.pcb-b-pulse--d3 { animation-delay: 1.5s; }
.pcb-b-pulse--d4 { animation-delay: 2s; }
.pcb-b-pulse--d5 { animation-delay: 2.5s; }
.pcb-b-pulse--d6 { animation-delay: 0.8s; }
.pcb-b-pulse--d7 { animation-delay: 1.8s; }
.pcb-b-pulse--d8 { animation-delay: 2.2s; }
@keyframes pcbBoardPulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(1.3); }
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .platinen-pcb-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .platinen-pcb-text {
        max-width: 100%;
    }
    .platinen-pcb-features {
        align-items: center;
    }
    .platinen-pcb-visual {
        order: -1;
    }
    .pcb-board {
        max-width: 380px;
    }
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
    .pcb-b-via-hole { fill: #0d4f35; }
    .pcb-board { filter: drop-shadow(0 8px 32px rgba(0,0,0,0.15)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pcb-board { animation: none; }
    .pcb-b-pulse { animation: none; }
    .pcb-b-signal { display: none; }
    .pcb-b-led--green { animation: none; }
    .pcb-b-led--amber { animation: none; }
}

/* Test Points */
.pcb-b-tp {
    fill: rgba(200,149,108,0.15);
    stroke: #c8956c;
    stroke-width: 1;
}

/* Ferrite Beads */
.pcb-b-smd-fb {
    fill: rgba(160,160,160,0.15);
    stroke: rgba(160,160,160,0.4);
    stroke-width: 0.7;
}

/* ESD Protection Diodes */
.pcb-b-smd-d {
    fill: rgba(100,200,100,0.1);
    stroke: rgba(100,200,100,0.35);
    stroke-width: 0.7;
}



/* (Old process-timeline removed – replaced by process-section-2026) */
.section-sub {
    color: var(--muted);
    font-size: var(--fs-base);
    line-height: 1.7;
}

/* ─── FAQ SECTION ─── */
.faq-section {
    padding: var(--space-2xl) var(--space-md);
    max-width: 800px;
    margin: 0 auto;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.faq-item {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.25s var(--ease-smooth);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    margin-bottom: var(--space-xs);
}
.faq-item:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    background: rgba(255, 255, 255, 0.35);
}
.faq-item.is-open {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.4);
}
@media (prefers-color-scheme: light) {
    .faq-item {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.10);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }
    .faq-item:hover {
        border-color: rgba(var(--accent-rgb), 0.25);
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }
    .faq-item.is-open {
        border-color: var(--accent);
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
}
@media (prefers-color-scheme: dark) {
    .faq-item {
        background: rgba(22, 24, 28, 0.5);
        border-color: rgba(255, 255, 255, 0.06);
    }
    .faq-item:hover {
        background: rgba(22, 24, 28, 0.65);
        border-color: rgba(0, 201, 107, 0.15);
    }
    .faq-item.is-open {
        background: rgba(22, 24, 28, 0.7);
        border-color: rgba(0, 201, 107, 0.3);
    }
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    gap: var(--space-md);
    user-select: none;
    -webkit-user-select: none;
    color: var(--text);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
    .faq-question {
        color: var(--text);
        text-shadow: none;
    }
}
.faq-question::after {
    content: '+';
    font-size: var(--fs-xl);
    font-weight: var(--fw-light);
    color: var(--accent);
    transition: transform 0.25s var(--ease-smooth);
    flex-shrink: 0;
}
.faq-item.is-open .faq-question::after {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-smooth);
    padding: 0 var(--space-lg);
}
.faq-answer-inner {
    padding-bottom: var(--space-lg);
    color: var(--muted);
    line-height: 1.7;
}
@media (prefers-color-scheme: dark) {
    .faq-answer-inner {
        color: var(--muted);
    }
    .faq-answer-inner strong {
        color: var(--text);
    }
}
.faq-answer a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── CHATBOT ─── */
#pcsp-chatbot-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg), 0 0 30px rgba(var(--accent-rgb), 0.25);
    z-index: 9990;
    transition: all 0.25s var(--ease-spring);
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
}
#pcsp-chatbot-toggle:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-xl), 0 4px 30px rgba(var(--accent-rgb), 0.4);
}
#pcsp-chatbot-toggle.is-open .chatbot-icon-chat { display: none; }
#pcsp-chatbot-toggle.is-open .chatbot-icon-close { display: block; }
#pcsp-chatbot-toggle:not(.is-open) .chatbot-icon-close { display: none; }

#pcsp-chatbot-panel {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 520px;
    background: var(--card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: all 0.25s var(--ease-out);
}
#pcsp-chatbot-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.chatbot-header {
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: var(--accent-contrast);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chatbot-header h3 {
    color: var(--accent-contrast);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin: 0;
}
.chatbot-header-sub {
    font-size: var(--fs-xs);
    opacity: 0.85;
}
.chatbot-close {
    color: var(--accent-contrast);
    font-size: 1.3rem;
    opacity: 0.8;
    transition: opacity 0.25s;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.chatbot-close:hover { opacity: 1; }

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 280px;
    scroll-behavior: smooth;
}
.chatbot-msg {
    display: flex;
    max-width: 85%;
    animation: chatbot-msg-in 0.3s var(--ease-out);
}
@keyframes chatbot-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chatbot-msg--bot { align-self: flex-start; }
.chatbot-msg--user { align-self: flex-end; }
.chatbot-msg-bubble {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    line-height: 1.5;
    word-break: break-word;
}
.chatbot-msg--bot .chatbot-msg-bubble {
    background: var(--bg-subtle);
    border-bottom-left-radius: 4px;
}
.chatbot-msg--user .chatbot-msg-bubble {
    background: var(--accent);
    color: var(--accent-contrast);
    border-bottom-right-radius: 4px;
}
.chatbot-msg--bot .chatbot-msg-bubble a {
    color: var(--accent);
    text-decoration: underline;
}
.chatbot-typing .typing-dots span {
    animation: typing-bounce 1.2s infinite;
    display: inline-block;
    font-size: 1.5em;
    line-height: 1;
}
.chatbot-typing .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.chatbot-input {
    display: flex;
    border-top: 1px solid var(--border);
    padding: var(--space-sm);
    gap: var(--space-sm);
}
.chatbot-input input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg);
    outline: none;
    font-size: var(--fs-sm);
    color: var(--text);
    transition: border-color 0.25s;
}
.chatbot-input input:focus {
    border-color: var(--accent);
}
.chatbot-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background 0.25s;
    flex-shrink: 0;
}
.chatbot-send:hover {
    background: var(--accent-hover);
}

/* Quick-Reply Buttons */
.chatbot-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 10px 8px;
    animation: qr-fadein 0.3s ease;
}

@keyframes qr-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.chatbot-qr-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.chatbot-qr-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.03);
}

@media (max-width: 640px) {
    #pcsp-chatbot-panel {
        right: 8px;
        left: 8px;
        bottom: 80px;
        width: auto;
    }
}

/* =====================================================
   LESBARKEIT – LIGHT & DARK MODE
   Semi-transparente Hintergründe für Text über Partikeln
   ===================================================== */

/* Hero-Text: kein Hintergrund, keine Kachel */
.hero--2026 .hero-inner {
    background: none;
    padding: var(--space-xl) var(--space-lg);
    border-radius: 0;
}

@media (prefers-color-scheme: dark) {
    .hero--2026 .hero-inner {
        background: none;
    }
}

/* Section-Heads: clean, kein Glaseffekt */
.section-head {
    position: relative;
    z-index: 2;
    padding: var(--space-md);
    text-align: center;
    background: transparent;
}

/* =====================================================
   2026 SECTION HEADERS – Clean, Bold, No Background Box
   ===================================================== */
.section-head-2026 {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--space-md);
    margin-bottom: var(--space-xl);
    background: none;
}

.section-kicker {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: var(--space-sm);
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

.section-title-2026 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: var(--fw-black, 900);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
    margin: 0.25em 0 0.4em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-sub-2026 {
    font-size: var(--fs-base);
    color: var(--muted);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto;
}

.section-title {
    color: var(--text);
    text-shadow: none;
}

@media (prefers-color-scheme: dark) {
    .section-title {
        text-shadow: none;
    }
}

/* Why-Cards: transparent */
.why-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body:not(.kp-portal) .why-card {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    body:not(.kp-portal) .why-card {
        background: transparent;
    }
}

/* CTA-Strip: transparent */
.cta-strip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body:not(.kp-portal) .cta-strip {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    body:not(.kp-portal) .cta-strip {
        background: transparent;
    }
}

/* Process-Timeline: 2026 Card Grid */
.process-section-2026 {
    position: relative;
    z-index: 2;
    padding: var(--space-2xl) var(--space-md);
    max-width: 1100px;
    margin: 0 auto;
}

.process-grid-2026 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    counter-reset: process-counter;
    justify-content: center;
}
.process-card-2026 {
    flex: 0 1 calc(33.333% - var(--space-lg));
    min-width: 200px;
}

.process-card-2026 {
    position: relative;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    background: rgba(var(--accent-rgb), 0.02);
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
}

.process-card-2026:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    border-color: rgba(var(--accent-rgb), 0.3);
}

@media (prefers-color-scheme: dark) {
    .process-card-2026 {
        background: rgba(255,255,255,0.03);
        border-color: rgba(255,255,255,0.06);
    }
    .process-card-2026:hover {
        box-shadow: 0 20px 50px rgba(0,0,0,0.3),
                    0 0 30px rgba(var(--accent-rgb), 0.05);
    }
}

@media (prefers-color-scheme: light) {
    .process-card-2026 {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.10);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .process-card-2026:hover {
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10);
        border-color: rgba(var(--accent-rgb), 0.25);
    }
}

.process-card-number {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast, #fff);
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.35);
    z-index: 2;
}

.process-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-sm);
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
}
.process-card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2;
}

.process-card-2026:hover .process-card-icon {
    transform: scale(1.15) rotate(-3deg);
}

.process-card-2026 h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-xs);
}

.process-card-2026 p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.6;
}

.process-card-2026 p a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Connector arrows between cards (desktop) */
.process-card-connector {
    display: none;
}

@media (min-width: 720px) {
    .process-card-connector {
        display: block;
        position: absolute;
        top: 50%;
        right: -18px;
        transform: translateY(-50%);
        width: 24px;
        height: 2px;
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.08));
        z-index: 3;
    }
    .process-card-connector::after {
        content: '';
        position: absolute;
        right: -4px;
        top: -3px;
        width: 8px;
        height: 8px;
        border-right: 2px solid rgba(var(--accent-rgb), 0.3);
        border-top: 2px solid rgba(var(--accent-rgb), 0.3);
        transform: rotate(45deg);
    }
}

@media (max-width: 768px) {
    .process-card-2026 {
        flex: 0 1 calc(50% - var(--space-lg));
    }
}
@media (max-width: 480px) {
    .process-card-2026 {
        flex: 1 1 100%;
    }
    .process-grid-2026 {
        gap: var(--space-md);
    }
}

/* FAQ: Lesbarkeit */
.faq-section .section-title {
    color: var(--text);
}
@media (prefers-color-scheme: dark) {
    .faq-section .section-title {
        color: var(--text);
        text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    }
    .faq-section .section-sub {
        color: var(--muted);
    }
    .faq-section h2[style] {
        color: var(--text) !important;
    }
}

/* Testimonials section */
.testimonials-section {
    padding: var(--space-2xl) var(--space-md);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.testimonials-grid {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 720px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.testimonial-card {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

@media (prefers-color-scheme: dark) {
    .testimonial-card {
        background: rgba(22, 24, 28, 0.5);
    }
    .testimonial-card:hover {
        box-shadow: 0 8px 30px rgba(0,255,136,0.08);
    }
}

.testimonial-stars {
    color: #fbbf24;
    font-size: var(--fs-lg);
    letter-spacing: 2px;
    margin-bottom: var(--space-sm);
}

.testimonial-text {
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--text);
    margin-bottom: var(--space-md);
    font-style: italic;
}

.testimonial-author {
    font-size: var(--fs-sm);
    color: var(--muted);
    font-weight: var(--fw-semibold);
}

.testimonial-author span {
    display: block;
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: 2px;
}

/* (Old tech-section removed – replaced by equipment-section-2026) */

/* =====================================================
   2026 EQUIPMENT SECTION – Premium Card Grid
   ===================================================== */
.equipment-section-2026 {
    padding: var(--space-2xl) var(--space-md);
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.equipment-grid-2026 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
}

.equipment-card-2026 {
    position: relative;
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    background: rgba(var(--accent-rgb), 0.02);
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
    overflow: hidden;
}

.equipment-card-2026::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.equipment-card-2026:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.equipment-card-2026:hover::before {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .equipment-card-2026 {
        background: rgba(255,255,255,0.03);
        border-color: rgba(255,255,255,0.06);
    }
    .equipment-card-2026:hover {
        box-shadow: 0 20px 50px rgba(0,0,0,0.3),
                    0 0 30px rgba(var(--accent-rgb), 0.06);
    }
}

@media (prefers-color-scheme: light) {
    .equipment-card-2026 {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.10);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .equipment-card-2026:hover {
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10);
        border-color: rgba(var(--accent-rgb), 0.25);
    }
}

.equipment-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
}
.equipment-card-icon svg {
    width: 1.625rem;
    height: 1.625rem;
    stroke-width: 2;
}

.equipment-card-2026:hover .equipment-card-icon {
    transform: scale(1.2) rotate(-5deg);
}

.equipment-card-2026 h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-xs);
    letter-spacing: -0.01em;
}

.equipment-card-2026 p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* =====================================================
   2026 CTA – Clean
   ===================================================== */
.cta-pcb {
    position: relative;
    z-index: 2;
    padding: clamp(3rem, 8vw, 6rem) var(--space-lg);
    text-align: center;
    margin: var(--space-xl) 0 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    isolation: isolate;
}

/* Inner content */
.cta-pcb-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.cta-pcb h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: var(--fw-black, 900);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

.cta-pcb-inner > p {
    font-size: var(--fs-base);
    color: var(--muted);
    margin-bottom: var(--space-lg);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-pcb .cta-strip-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ─── CTA Contact Row (Tel + WhatsApp) ─── */
.cta-contact-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.cta-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color .25s ease;
}

.cta-contact-link:hover {
    color: var(--accent);
}

.cta-contact-link svg {
    flex-shrink: 0;
    opacity: .7;
    transition: opacity .25s ease;
}

.cta-contact-link:hover svg {
    opacity: 1;
}

.cta-contact-link--wa:hover {
    color: #25d366;
}

.cta-contact-link--wa:hover svg {
    fill: #25d366;
}

.cta-contact-divider {
    color: var(--border);
    font-size: var(--fs-sm);
    user-select: none;
}

/* Light mode: traces slightly darker */
@media (prefers-color-scheme: light) {
    .pcb-bg { opacity: 0.5; }
    .pcb-via-hole { fill: var(--bg, #fff); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pcb-pulse { animation: none; }
    .pcb-data { animation: none; opacity: 0; }
}

/* Garantie-Banner */
.guarantee-banner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    z-index: 2;
    margin: var(--space-xl) 0;
}

@media (prefers-color-scheme: dark) {
    .guarantee-banner {
        background: transparent;
        border-color: rgba(0, 255, 136, 0.12);
    }
}

.guarantee-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
}
.guarantee-icon svg {
    width: 1.625rem;
    height: 1.625rem;
    stroke-width: 2;
}

.guarantee-content h3 {
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-xs);
    color: var(--text);
}

.guarantee-content p {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .guarantee-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* Interaktions-Hinweis */
.particles-hint {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(var(--accent-rgb), 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    white-space: nowrap;
}

.particles-hint.is-visible {
    opacity: 1;
    animation: hint-fade 6s ease-in-out forwards;
}

@keyframes hint-fade {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    75% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* =====================================================
   SKIP LINK (Accessibility)
   ===================================================== */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: var(--accent);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-weight: 600;
    z-index: 10000;
    transition: top 0.2s ease;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
}
.skip-link:focus {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
}

/* =====================================================
   PROCESS CTA
   ===================================================== */
.process-cta {
    text-align: center;
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* =====================================================
   2026 MICRO-INTERACTIONS & MODERN ENHANCEMENTS
   ===================================================== */

/* Smooth focus-visible for accessibility + modern look */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Button press effect */
.btn:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* Accent line under section titles - animate on reveal */
.section-title::after {
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 0.6s ease 0.2s;
    width: 0;
    opacity: 0;
}

.is-visible .section-title::after,
.is-in .section-title::after,
.section-head.is-visible .section-title::after {
    width: 60px;
    opacity: 0.7;
}

/* Service cards: smooth card-to-card transition */
.service-card {
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        background 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.25);
}

@media (prefers-color-scheme: dark) {
    .service-card:hover {
        box-shadow: 0 20px 60px rgba(0,0,0,0.3),
                    0 0 40px rgba(var(--accent-rgb), 0.05);
    }
}

/* Why-card hover with accent glow */
.why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.06);
}

/* Process card icon animations */
.process-card-2026 .process-card-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-card-2026:hover .process-card-number {
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.45);
}

.process-card-number {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Smooth page transitions for links */
.nav-link {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease,
                background-color 0.25s ease;
}

/* CTA PCB hover glow */
.cta-pcb .btn:hover {
    box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.2);
}

/* Smooth scrollbar (Webkit) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.35);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.2) transparent;
}

/* Smooth color scheme transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =====================================================
   LIGHT MODE – Kontrast & Sichtbarkeit verbessern
   ===================================================== */
@media (prefers-color-scheme: light) {
    /* Stärkere Card-Hintergründe */
    .highlight-item {
        background: rgba(var(--accent-rgb), 0.06);
        border-color: rgba(var(--accent-rgb), 0.14);
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .highlight-item:hover {
        box-shadow: 0 12px 32px rgba(0,0,0,0.1);
        border-color: rgba(var(--accent-rgb), 0.3);
    }
    .highlight-icon {
        background: rgba(var(--accent-rgb), 0.14);
    }

    /* Process Cards */
    .process-card-2026 {
        background: #fff;
        border-color: rgba(var(--accent-rgb), 0.14);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .process-card-2026:hover {
        box-shadow: 0 16px 48px rgba(0,0,0,0.1);
        border-color: rgba(var(--accent-rgb), 0.3);
    }
    .process-card-icon {
        background: rgba(var(--accent-rgb), 0.12);
    }
    .process-card-2026:hover .process-card-icon {
        background: rgba(var(--accent-rgb), 0.18);
    }

    /* Why Cards */
    .why-card {
        background: #fff;
        border-color: rgba(var(--accent-rgb), 0.12);
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .why-card:hover,
    .why-card:focus-within {
        background: #fff;
        box-shadow: 0 12px 40px rgba(0,0,0,0.08);
        border-color: rgba(var(--accent-rgb), 0.3);
    }
    .why-card-top {
        background: rgba(var(--accent-rgb), 0.1);
        border-color: rgba(var(--accent-rgb), 0.2);
    }
    .why-card-icon {
        background: rgba(var(--accent-rgb), 0.15);
        border-color: rgba(var(--accent-rgb), 0.3);
    }
    .why-card h3 {
        color: #0f1419;
    }
    .why-card p {
        color: #3a3f47;
    }

    /* Equipment Cards */
    .equipment-card-2026 {
        background: #fff;
        border-color: rgba(var(--accent-rgb), 0.14);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .equipment-card-2026:hover {
        box-shadow: 0 16px 48px rgba(0,0,0,0.1);
        border-color: rgba(var(--accent-rgb), 0.3);
    }
    .equipment-card-icon {
        background: rgba(var(--accent-rgb), 0.12);
    }
    .equipment-card-2026:hover .equipment-card-icon {
        background: rgba(var(--accent-rgb), 0.18);
    }
    .equipment-card-2026 h4 {
        color: #0f1419;
    }
    .equipment-card-2026 p {
        color: #3a3f47;
    }

    /* Guarantee Banner */
    .guarantee-banner {
        background: #fff;
        border-color: rgba(var(--accent-rgb), 0.18);
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    }
    .guarantee-icon {
        background: rgba(var(--accent-rgb), 0.12);
    }

    /* CTA Section */
    .cta-pcb {
        background: rgba(var(--accent-rgb), 0.03);
    }
    .cta-pcb h2 {
        color: #0f1419;
    }

    /* Section Headers */
    .section-title-2026 {
        color: #0f1419;
    }
    .section-sub-2026 {
        color: #3a3f47;
    }
    .section-kicker {
        color: var(--accent);
    }

    /* svc-showcase light mode */
    .svc-showcase::before {
        background: radial-gradient(
            ellipse at center,
            rgba(var(--accent-rgb), 0.04) 0%,
            rgba(var(--accent-rgb), 0.01) 40%,
            transparent 70%
        );
    }
    .svc-showcase h2 {
        color: #0f1419;
    }
    .svc-showcase-text > p,
    .svc-showcase-features li {
        color: #3a3f47;
    }
    .svc-showcase-kicker {
        color: var(--accent);
        background: rgba(var(--accent-rgb), 0.08);
    }
    .svc-showcase-visual::before {
        background: rgba(0, 0, 0, 0.02);
        border-color: rgba(0, 0, 0, 0.06);
    }
    .svc-showcase-visual:hover::before {
        background: rgba(var(--accent-rgb), 0.04);
        border-color: rgba(var(--accent-rgb), 0.12);
    }
    .svc-showcase-features li::before {
        background: rgba(var(--accent-rgb), 0.07);
        border-color: rgba(var(--accent-rgb), 0.15);
    }
}

/* ══════════════════════════════════════════════════════
   SERVICE SHOWCASE – Premium 2-col hero visual (2026)
   ══════════════════════════════════════════════════════ */

.svc-showcase {
    position: relative;
    z-index: 2;
    padding: clamp(3rem, 7vw, 5.5rem) var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

/* Ambient glow behind section */
.svc-showcase::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse at center,
        rgba(var(--accent-rgb), 0.06) 0%,
        rgba(var(--accent-rgb), 0.02) 40%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(60px);
}

.svc-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* ── Text Column ── */
.svc-showcase-text {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    max-width: 520px;
}

.svc-showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    padding: 5px 14px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.svc-showcase-text h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--fw-black, 900);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}

.svc-showcase-text > p {
    font-size: var(--fs-base, 1rem);
    line-height: 1.7;
    color: var(--muted);
    max-width: 46ch;
}

/* Feature list – premium checkmark style */
.svc-showcase-features {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.svc-showcase-features li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 2rem;
    font-size: var(--fs-sm, 0.925rem);
    color: var(--text);
    line-height: 1.5;
    font-weight: 500;
}

/* Animated check icon */
.svc-showcase-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.svc-showcase-features li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
}

.svc-showcase-features li:hover::before {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-50%) scale(1.1);
}

/* CTA button spacing */
.svc-showcase-text .btn {
    margin-top: 0.5rem;
    align-self: flex-start;
}

/* ── Visual Column ── */
.svc-showcase-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Glass container with dot grid for the animation */
/* (see dot grid block below for the actual ::before rules) */

/* Corner accents */
.svc-showcase-visual::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 60px;
    height: 60px;
    border-top: 2px solid rgba(var(--accent-rgb), 0.2);
    border-right: 2px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 0 24px 0 0;
    pointer-events: none;
    transition: border-color 0.5s ease;
}

/* Subtle glow behind the SVG */
.svc-showcase-visual .svc-anim {
    position: relative;
    z-index: 1;
}

.svc-anim {
    width: 100%;
    max-width: 440px;
    height: auto;
    filter: drop-shadow(0 8px 40px rgba(var(--accent-rgb), 0.1));
    transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: lift + glow */
.svc-showcase-visual:hover .svc-anim {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 16px 48px rgba(var(--accent-rgb), 0.16));
}

.svc-showcase-visual:hover::after {
    border-color: rgba(var(--accent-rgb), 0.35);
}

/* ── Entrance animation ── */
.svc-showcase .svc-showcase-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-showcase .svc-showcase-visual {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.svc-showcase.is-visible .svc-showcase-text,
.svc-showcase.is-visible .svc-showcase-visual {
    opacity: 1;
    transform: none;
}

/* ── Dark mode glow boost ── */
@media (prefers-color-scheme: dark) {
    .svc-showcase::before {
        background: radial-gradient(
            ellipse at center,
            rgba(var(--accent-rgb), 0.08) 0%,
            rgba(var(--accent-rgb), 0.03) 40%,
            transparent 70%
        );
    }
    .svc-showcase-visual::before {
        background: rgba(255, 255, 255, 0.02);
        border-color: rgba(255, 255, 255, 0.06);
    }
    .svc-showcase-visual:hover::before {
        background: rgba(var(--accent-rgb), 0.06);
        border-color: rgba(var(--accent-rgb), 0.12);
    }
    .svc-anim {
        filter: drop-shadow(0 8px 40px rgba(var(--accent-rgb), 0.15));
    }
    .svc-showcase-visual:hover .svc-anim {
        filter: drop-shadow(0 16px 56px rgba(var(--accent-rgb), 0.22));
    }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .svc-showcase {
        padding: 2.5rem 1.5rem;
    }
    .svc-showcase-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 560px;
        margin: 0 auto;
    }
    .svc-showcase-visual {
        order: -1;
    }
}

@media (max-width: 580px) {
    .svc-showcase {
        padding: 2rem 1rem;
    }
    .svc-showcase-text h2 {
        font-size: 1.5rem;
    }
    .svc-anim {
        max-width: 300px;
    }
    .svc-showcase-visual {
        padding: 1.25rem;
    }
    .svc-showcase-visual::before {
        border-radius: 16px;
    }
    .svc-showcase-visual::after {
        width: 40px;
        height: 40px;
        border-radius: 0 16px 0 0;
    }
}

/* ── Dot grid pattern inside visual ── */
.svc-showcase-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background:
        radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1px),
        rgba(var(--accent-rgb), 0.03);
    background-size: 24px 24px, 100% 100%;
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.5s ease, background 0.5s ease;
}

/* ── Animated scan line ── */
@keyframes svc-scanline {
    0% { top: -2px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% + 2px); opacity: 0; }
}

.svc-showcase-visual .svc-anim {
    position: relative;
    z-index: 1;
}

/* ── Staggered feature items reveal ── */
.svc-showcase-features li {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-showcase.is-visible .svc-showcase-features li {
    opacity: 1;
    transform: none;
}

.svc-showcase.is-visible .svc-showcase-features li:nth-child(1) { transition-delay: 0.2s; }
.svc-showcase.is-visible .svc-showcase-features li:nth-child(2) { transition-delay: 0.3s; }
.svc-showcase.is-visible .svc-showcase-features li:nth-child(3) { transition-delay: 0.4s; }
.svc-showcase.is-visible .svc-showcase-features li:nth-child(4) { transition-delay: 0.5s; }

/* ── CTA button reveal ── */
.svc-showcase-text .btn {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.svc-showcase.is-visible .svc-showcase-text .btn {
    opacity: 1;
    transform: none;
}

/* ── Pulse ring around visual on hover ── */
@keyframes svc-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.15); }
    70% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.svc-showcase-visual:hover::before {
    animation: svc-pulse-ring 2s ease-out infinite;
    border-color: rgba(var(--accent-rgb), 0.16);
    background:
        radial-gradient(circle, rgba(var(--accent-rgb), 0.16) 1px, transparent 1px),
        rgba(var(--accent-rgb), 0.05);
    background-size: 24px 24px, 100% 100%;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .svc-showcase .svc-showcase-text,
    .svc-showcase .svc-showcase-visual {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .svc-showcase-features li {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .svc-showcase-text .btn {
        opacity: 1;
        transform: none;
        transition: background 0.3s ease;
    }
    .svc-anim {
        transition: none;
    }
    .svc-showcase-visual:hover .svc-anim {
        transform: none;
    }
    .svc-showcase-visual:hover::before {
        animation: none;
    }
}

/* ── Offer Decision Audit Cards (admin_dashboard) ── */
.kp-od-card {
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    padding: 14px;
}
.kp-od-card--accepted {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.08);
}
.kp-od-card--rejected {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
}
.kp-od-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}
.kp-od-label {
    padding: 4px 8px;
    color: var(--muted);
    width: 140px;
}
.kp-od-value {
    padding: 4px 8px;
    color: var(--text);
}
.kp-od-sig-wrap {
    margin-top: 4px;
    padding: 8px;
    background: var(--card-elevated, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    display: inline-block;
}
@media (prefers-color-scheme: dark) {
    .kp-od-card--accepted {
        background: rgba(40, 167, 69, 0.12);
    }
    .kp-od-card--rejected {
        background: rgba(220, 53, 69, 0.12);
    }
    .kp-od-sig-wrap img {
        filter: invert(1);
    }
}
.kp-od-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--card-elevated, var(--bg));
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.kp-od-download-btn:hover {
    background: var(--accent, #0d6efd);
    color: #fff;
    border-color: var(--accent, #0d6efd);
}