/* ===================================================================
   🎬 ROUTER-KOMPATIBLE SERVICE-ANIMATIONEN
   CSS-Animationen für Router-basierte Navigation
   =================================================================== */

/* Router-kompatible Service-Animationen */

/* ===================================================================
   🚀 ROBUSTE SERVICE-CONTENT SICHTBARKEIT - KONFLIKT-FREI
   =================================================================== */

/* INITIAL STATE: Service-Content für Scroll-Animation vorbereiten */
#skill1, #skill2, #skill3 {
    display: flex !important;
    opacity: 0;
    visibility: visible !important;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ANIMATED STATE: Wird durch JavaScript .animate-visible Klasse ausgelöst */
#skill1.animate-visible,
#skill2.animate-visible,
#skill3.animate-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Child-Element Animationen */
.skill-detail .skill-image {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.2s;
}

.skill-detail .skill-text {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.4s;
}

/* Sichtbare Child-Elemente */
.skill-detail.animate-visible .skill-image,
.skill-detail.animate-visible .skill-text {
    opacity: 1;
    transform: translateY(0);
}



/* Animated State - wird durch JavaScript-Observer ausgelöst */
.skill-selector.animate-in,
.skill-detail.animate-in,
.service-section.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.skill-button.animate-in {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Hover-Effekte nur für animierte Elemente */
.skill-button.animate-in:hover {
    transform: scale(1.05) !important;
}

.skill-detail.animate-in:hover {
    transform: translateY(-5px) !important;
}

/* Service-Section Verbesserungen */
.service-section.animate-in {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Staggered Animation Support */
.skill-detail:nth-child(1) { transition-delay: 0.1s !important; }
.skill-detail:nth-child(2) { transition-delay: 0.3s !important; }
.skill-detail:nth-child(3) { transition-delay: 0.5s !important; }

.skill-button:nth-child(1) { transition-delay: 0.2s !important; }
.skill-button:nth-child(2) { transition-delay: 0.4s !important; }
.skill-button:nth-child(3) { transition-delay: 0.6s !important; }

/* Service-Text Animationen - NUR FÜR ANIMIERTE ELEMENTE */
.skill-text.animation-ready h3 {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s ease;
}

.skill-detail.animate-in .skill-text.animation-ready h3 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* =========================
   🛠️ 3D-DRUCKLISTE MODERNES DESIGN
   ========================= */

/* Container für die Auftragsliste */
.auftragsListeSection {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.auftragsListeSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.auftragsListeSection h3 {
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auftragsListeSection h3::before {
    content: '🛒';
    font-size: 1.2rem;
}

/* Scroll-Container für die Druckliste */
#my3dCartList {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: #667eea transparent;
}

#my3dCartList::-webkit-scrollbar {
    width: 8px;
}

#my3dCartList::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

#my3dCartList::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

#my3dCartList::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    background-clip: content-box;
}

/* Einzelne Cart-Items */
.cartItem {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: 2fr 1fr auto auto;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.cartItem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cartItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.cartItem:hover::before {
    opacity: 1;
}

/* Titel des Items */
.cartItemTitle {
    font-weight: 600;
    color: #333;
    font-size: 1rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cartItemTitle::before {
    content: '🎯';
    font-size: 0.9rem;
}

/* Preis-Anzeige */
.cartItemPrice {
    font-weight: 700;
    color: #667eea;
    font-size: 1.1rem;
    text-align: right;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mengen-Input */
.cartItemQuantity {
    width: 60px;
    padding: 0.5rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.cartItemQuantity:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

.cartItemQuantity:hover {
    border-color: #667eea;
}

/* Entfernen-Button */
.cartItemRemove {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cartItemRemove::before {
    content: '🗑️';
    font-size: 0.8rem;
}

.cartItemRemove:hover {
    background: linear-gradient(135deg, #ff5252, #e53935);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.cartItemRemove:active {
    transform: scale(0.98);
}

/* Empty State */
#my3dCartList:empty::before {
    content: 'Keine 3D-Druck-Aufträge im Warenkorb. 📄';
    display: block;
    text-align: center;
    padding: 3rem;
    color: #666;
    font-style: italic;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    border: 2px dashed #e9ecef;
}

/* Loading State */
.auftragsListeSection.loading #my3dCartList {
    opacity: 0.5;
    pointer-events: none;
}

.auftragsListeSection.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Mobile Responsive für Druckliste */
@media (max-width: 768px) {
    .auftragsListeSection {
        margin: 1rem 0;
        padding: 1.5rem;
    }
    
    .cartItem {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        text-align: center;
        padding: 1.2rem;
    }
    
    .cartItemTitle {
        justify-content: center;
        font-size: 0.95rem;
    }
    
    .cartItemPrice {
        text-align: center;
        font-size: 1rem;
    }
    
    .cartItemQuantity {
        width: 80px;
        margin: 0 auto;
    }
    
    .cartItemRemove {
        width: 100%;
        justify-content: center;
        padding: 0.8rem;
    }
    
    #my3dCartList {
        max-height: 300px;
    }
}

/* Animation für neue Items */
.cartItem {
    animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Preis-Update Animation */
.cartItemPrice.updating {
    animation: priceUpdate 0.3s ease;
}

@keyframes priceUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); color: #ff6b6b; }
    100% { transform: scale(1); }
}

.skill-text.animation-ready p {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.skill-detail.animate-in .skill-text.animation-ready p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* Image-Container Animationen - NUR FÜR ANIMIERTE ELEMENTE */
.skill-image.animation-ready {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.7s ease;
}

.skill-detail.animate-in .skill-image.animation-ready {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
}

/* ===================================================================
   🎨 BILD-WHITENING-EFFEKT - Premium Feature
   Bilder sind initial weißlich angeschleiert (90-95% opacity)
   und werden im Fokus-Bereich klarer (100% opacity)
   =================================================================== */

.skill-image {
    filter: none;
    opacity: 1;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.skill-image.in-focus {
    filter: none;
    opacity: 1;
    transform: scale(1.02);
}

/* Erweiterte Bild-Effekte ohne Schwarz-Weiß */
.skill-image.subtle-focus {
    filter: none;
    opacity: 1;
    transform: scale(1.01);
}

.skill-image.strong-focus {
    filter: none;
    opacity: 1;
    transform: scale(1.03);
}

/* Performance-Optimierungen für Router */
.skill-selector,
.skill-button,
.skill-detail,
.service-section {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Animationen nur wenn Elemente im Viewport */
@media (prefers-reduced-motion: no-preference) {
    .animate-in {
        animation-play-state: running;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skill-selector,
    .skill-button,
    .skill-detail,
    .service-section {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===================================================================
   🚀 MODERN 3D CALCULATOR - PRODUKTIONSFERTIG & VOLLSTÄNDIG RESPONSIVE
   Moderne CSS-Architektur mit CSS Grid + Flexbox Hybrid-Ansatz
   Mobile-First Design mit optimierten Touch-Targets
   =================================================================== */

/* ===================================================================
   📱 MODERNE DESIGN TOKENS - CSS CUSTOM PROPERTIES SYSTEM
   =================================================================== */

:root {
  /* 🎨 COLOR SYSTEM - Erweitert g3df-modern.css */
  --calc-primary: var(--color-primary, #000000);
  --calc-secondary: var(--color-secondary, #333333);
  --calc-background: #ffffff;
  --calc-surface: #f8f9fa;
  --calc-surface-elevated: #ffffff;
  --calc-border-light: #e9ecef;
  --calc-border-medium: #dee2e6;
  --calc-text-primary: #212529;
  --calc-text-secondary: #6c757d;
  
  /* 📐 SPACING SYSTEM - Skalierbar & Konsistent */
  --calc-space-xs: clamp(4px, 0.5vw, 8px);
  --calc-space-sm: clamp(8px, 1vw, 12px);
  --calc-space-md: clamp(12px, 1.5vw, 16px);
  --calc-space-lg: clamp(6px, 1vw, 14px);
  --calc-space-xl: clamp(24px, 3vw, 32px);
  --calc-space-2xl: clamp(32px, 4vw, 48px);
  
  /* 🔧 BORDER RADIUS SYSTEM */
  --calc-radius-sm: clamp(6px, 1vw, 8px);
  --calc-radius-md: clamp(8px, 1.5vw, 12px);
  --calc-radius-lg: clamp(12px, 2vw, 16px);
  --calc-radius-xl: clamp(16px, 2.5vw, 20px);
  
  /* 🌟 ELEVATION SYSTEM - Moderne Schatten */
  --calc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --calc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  --calc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --calc-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --calc-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
  
  /* ⚡ ANIMATIONS & TRANSITIONS */
  --calc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --calc-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --calc-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --calc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* 📱 TOUCH TARGET STANDARDS - WCAG AA Konform */
  --calc-touch-min: 44px;
  --calc-touch-comfortable: 48px;
  --calc-touch-spacious: 56px;
  
  /* 📱 RESPONSIVE BUTTON HEIGHTS */
  --calc-btn-sm: clamp(44px, 5vh, 48px);
  --calc-btn-md: clamp(48px, 6vh, 56px);
  --calc-btn-lg: clamp(56px, 7vh, 64px);
  --calc-btn-xl: clamp(64px, 8vh, 72px);
  
  /* 📐 RESPONSIVE INPUT HEIGHTS */
  --calc-input-height: clamp(44px, 5.5vh, 52px);
  --calc-select-height: clamp(44px, 5.5vh, 52px);
  
  /* 🎯 3D VIEWER ASPECT RATIOS - Progressive Enhancement */
  --calc-viewer-mobile: 4 / 3;
  --calc-viewer-tablet: 16 / 10;
  --calc-viewer-desktop: 16 / 9;
  --calc-viewer-ultrawide: 21 / 9;
  
  /* 🚀 PERFORMANCE OPTIMIERUNGEN */
  --calc-gpu-layer: translateZ(0);
  --calc-contain-layout: layout style paint;
  --calc-contain-strict: strict;
  
  /* 🎨 TYPOGRAPHY SCALE */
  --calc-text-xs: clamp(0.75rem, 1.2vw, 0.875rem);
  --calc-text-sm: clamp(0.875rem, 1.4vw, 1rem);
  --calc-text-base: clamp(1rem, 1.6vw, 1.125rem);
  --calc-text-lg: clamp(1.125rem, 2vw, 1.25rem);
  --calc-text-xl: clamp(1.25rem, 2.5vw, 1.5rem);
  --calc-text-2xl: clamp(1.5rem, 3vw, 2rem);
  --calc-text-3xl: clamp(2rem, 4vw, 2.5rem);

/* ===================================================================
   🚀 KORRIGIERTES SERVICE-DESIGN - ORIGINALE LAYOUT-STRUKTUR WIEDERHERGESTELLT
   Graustufen-Farbpalette mit bestehender funktionierender Struktur
   =================================================================== */

/* ===================================================================
   🎨 ERWEITERTE GRAUSTUFEN-FARBPALETTE FÜR SERVICE-DESIGN
   =================================================================== */

/* Erweiterte professionelle Graustufen-Farbpalette */
:root {
  /* Bestehende G3DF Farben beibehalten */
  --farbe-schwarz: #000000;
  --farbe-grau: #9b9999;
  --farbe-weiss: #ffffff;
  
  /* Erweiterte professionelle Graustufen */
  --grau-dunkel: #2a2a2a;
  --grau-mittel: #666666;
  --grau-hell: #e5e5e5;
  --grau-sehr-hell: #f8f9fa;
  
  /* Moderne Graustufen-Gradients */
  --gradient-monochrom: linear-gradient(135deg, #2a2a2a 0%, #666666 50%, #9b9999 100%);
  --gradient-subtle: linear-gradient(135deg, #f8f9fa 0%, #e5e5e5 100%);
  --gradient-dark: linear-gradient(135deg, #000000 0%, #2a2a2a 100%);
  
  /* Professionelle Schatten */
  --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-heavy: 0 15px 50px rgba(0, 0, 0, 0.2);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===================================================================
   💼 SERVICE-PAGE CONTAINER - ORIGINALE LAYOUT-STRUKTUR WIEDERHERGESTELLT
   =================================================================== */

/* Service-Page Container - Original Layout beibehalten */
.skills-page,
.service-page {
  background: var(--gradient-subtle);
  min-height: 100vh;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.skills-page::before,
.service-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 25% 75%, rgba(0, 0, 0, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(155, 153, 153, 0.08) 0%, transparent 50%),
    linear-gradient(45deg, transparent 0%, rgba(42, 42, 42, 0.02) 50%, transparent 100%);
  z-index: 1;
}

.skills-page > *,
.service-page > * {
  position: relative;
  z-index: 2;
}

/* ===================================================================
   🌟 ELEGANTER HERO-BEREICH MIT GRAUSTUFEN-ANIMATIONEN
   =================================================================== */

.service-hero {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--gradient-dark);
  color: white;
  position: relative;
  overflow: hidden;
}

.service-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%);
  animation: heroShimmer 8s ease-in-out infinite;
}

@keyframes heroShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.service-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.service-hero h1::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: var(--gradient-monochrom);
  border-radius: 2px;
  animation: underlineGrow 2s ease-out;
}

@keyframes underlineGrow {
  0% { width: 0; }
  100% { width: 100px; }
}

.service-hero p {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  opacity: 0.85;
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

/* ===================================================================
   🌟 GLASMORPHISMUS SERVICE-CARDS - MODERNE GLASEFFEKTE
   =================================================================== */

.glassmorphism-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--calc-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: backdrop-filter, transform;
}

.glassmorphism-card:hover {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Glasmorphismus für Service-Sections */
.service-section.glassmorphism {
    background: rgba(42, 42, 42, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--farbe-weiss);
}

/* Glasmorphismus für Skill-Details */
.skill-detail.glassmorphism {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Premium Glasmorphismus-Varianten */
.glassmorphism-subtle {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glassmorphism-strong {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===================================================================
   💼 SERVICE-SECTION - ORIGINALE STRUKTUR MIT GRAUSTUFEN-DESIGN
   =================================================================== */

/* Service-Section - Original Struktur mit Graustufen-Verbesserungen */
.service-section {
  background: linear-gradient(135deg, var(--grau-mittel) 0%, var(--farbe-grau) 100%);
  color: var(--farbe-weiss);
  padding: 1.5rem;
  border-radius: 6px;
  margin-bottom: 2rem;
  border: 2px solid var(--farbe-schwarz);
  box-shadow: var(--shadow-medium);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  
  /* Animation nur bei Bedarf aktivieren */
  opacity: 1;
  transform: translateY(0);
}

.service-section.animation-ready {
  opacity: 0;
  transform: translateY(50px);
}

.service-section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.service-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--farbe-schwarz), var(--grau-mittel), var(--farbe-schwarz));
  z-index: 1;
}

.service-section:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-heavy);
  background: linear-gradient(135deg, var(--grau-dunkel) 0%, var(--grau-mittel) 100%);
}

.service-section h3 {
  color: var(--farbe-weiss);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
}

.service-section h3::before {
  content: '●';
  color: var(--farbe-weiss);
  font-size: 1.2em;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.service-section ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}

.service-section li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.service-section li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--farbe-weiss);
  font-weight: bold;
  transition: all 0.3s ease;
}

.service-section li:hover {
  padding-left: 2rem;
  color: var(--farbe-weiss);
}

.service-section li:hover::before {
  color: var(--farbe-weiss);
  transform: scale(1.2);
}

/* ===================================================================
   💼 ELEGANTE SERVICE-CARDS MIT GRAUSTUFEN-GLASMORPHISMUS
   =================================================================== */

/* ===================================================================
   💼 SKILL-SELECTOR - ORIGINALER DESKTOP-LAYOUT WIEDERHERGESTELLT
   =================================================================== */

/* Verwaister CSS-Block entfernt - keine Schwarz-Weiß-Filter mehr */

.service-section ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.service-section li {
  color: var(--grau-dunkel);
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  background: var(--gradient-subtle);
  border-radius: 8px;
  border-left: 4px solid var(--grau-mittel);
  transition: all 0.3s ease;
  position: relative;
  box-shadow: var(--shadow-inset);
}

.service-section li::before {
  content: '▶';
  margin-right: 0.75rem;
  color: var(--grau-mittel);
  font-size: 0.8em;
  transition: all 0.3s ease;
}

.service-section li:hover {
  background: white;
  transform: translateX(8px);
  border-left-color: var(--farbe-schwarz);
  box-shadow: var(--shadow-light);
}

/* ===================================================================
   🎯 MODERNE SKILL-BUTTONS MIT GRAUSTUFEN-3D-EFFEKTEN
   =================================================================== */

/* ===================================================================
   🎯 SKILL-SELECTOR - ORIGINALE LAYOUT-STRUKTUR WIEDERHERGESTELLT
   =================================================================== */

/* 🎯 SKILL-SELECTOR - IMMER SICHTBARE 3 HORIZONTALE ELEMENTE */
.skill-selector {
  display: flex;
  width: 90%;
  margin: 0 auto 2rem;
  gap: 2rem;
  justify-content: space-between;
  flex-wrap: nowrap;
  
  /* ✅ IMMER SICHTBAR - Keine versteckten Animationen */
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 0.6s ease;
}

.skill-selector.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 🔧 SKILL-BUTTONS - GRÖßER UND IMMER SICHTBAR */
.skill-button {
  aspect-ratio: 1 / 1;
  min-width: 250px;
  min-height: 250px;
  flex: 1;
  max-width: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 3px solid var(--farbe-schwarz);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--shadow-medium);
  
  /* ✅ IMMER SICHTBAR - Keine versteckten Animationen */
  opacity: 1 !important;
  transform: scale(1) !important;
  font-size: 1.6rem;
  font-weight: 700;
}

.skill-button.animate-in {
  opacity: 1;
  transform: scale(1);
}

.skill-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(42, 42, 42, 0.5) 50%,
    rgba(102, 102, 102, 0.4) 100%);
  z-index: 1;
  transition: all 0.3s ease;
}

.skill-button:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-medium);
}

.skill-button:hover::before {
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(42, 42, 42, 0.3) 50%,
    rgba(102, 102, 102, 0.2) 100%);
}

.skill-button span {
  position: relative;
  z-index: 2;
  color: var(--farbe-weiss);
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  transition: all 0.3s ease;
}

.skill-button:hover span {
  transform: scale(1.1);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}

/* Service-spezifische Hintergrundbilder - Original */
.skill-druck {
  background-image: url('/publicMedia/images/fdm_resin_blank.jpg');
}

.skill-modell {
  background-image: url('/publicMedia/images/product_model.jpg');
}

.skill-design {
  background-image: url('/publicMedia/images/prototyping.jpg');
}


/* ===================================================================
   📋 PROFESSIONELLE SKILL-DETAIL-SECTIONS
   =================================================================== */

/* ===================================================================
   📋 SKILL-DETAIL - ORIGINALE LAYOUT-STRUKTUR MIT GRAUSTUFEN
   =================================================================== */

/* Skill-Detail - Original Layout mit Bild neben Text */
.skill-detail {
  display: flex;
  gap: 2rem;
  margin: 2rem auto;
  align-items: flex-start;
  font-family: 'Montserrat', sans-serif;
  background: var(--farbe-weiss);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-light);
  max-width: 1200px;
  transition: all 0.4s ease;
  
  /* Scroll-Animation Vorbereitung */
  opacity: 0;
  transform: translateY(30px);
}

.skill-detail.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.skill-detail:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
}

.skill-detail.left {
  flex-direction: row;
}

.skill-detail.right {
  flex-direction: row-reverse;
}

.skill-detail .skill-image {
  flex: 0 0 45%;
  max-width: 450px;
  min-width: 300px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: all 0.4s ease;
}

.skill-detail .skill-image:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-medium);
}

.skill-detail .skill-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 2px solid var(--grau-hell);
  object-fit: cover;
  min-height: 250px;
  filter: none;
  transition: all 0.4s ease;
}

.skill-detail .skill-image img:hover {
  filter: none;
  transform: scale(1.02);
}

.skill-detail .skill-text {
  flex: 1;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

.skill-detail .skill-text::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--farbe-grau), var(--grau-mittel));
  border-radius: 2px;
}

.skill-detail .skill-text h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--farbe-schwarz);
  border-bottom: 3px solid var(--farbe-grau);
  padding-bottom: 0.5rem;
  display: inline-block;
  font-weight: 700;
}

.skill-detail .skill-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--grau-dunkel);
  background: var(--grau-sehr-hell);
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid var(--farbe-grau);
  transition: all 0.3s ease;
}

.skill-detail .skill-text p:hover {
  background: var(--grau-hell);
  border-left-color: var(--grau-mittel);
  transform: translateX(5px);
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================================
   🎯 ELEGANTE CTA-BUTTONS MIT GRAUSTUFEN-ANIMATIONEN
   =================================================================== */

/* ===================================================================
   🎯 CTA-BUTTON - ORIGINALE STRUKTUR MIT GRAUSTUFEN
   =================================================================== */

/* CTA-Button - Original mit Graustufen-Design */
.cta-button {
  background: linear-gradient(135deg, var(--farbe-schwarz) 0%, var(--grau-dunkel) 100%);
  color: var(--farbe-weiss);
  border: 2px solid var(--farbe-schwarz);
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  margin-top: 1rem;
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
}

.cta-button::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.8s ease;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover {
  background: linear-gradient(135deg, var(--grau-dunkel) 0%, var(--grau-mittel) 100%);
  border-color: var(--farbe-grau);
  color: var(--farbe-weiss);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* ===================================================================
   📱 MOBILE-RESPONSIVE OPTIMIERUNGEN FÜR GRAUSTUFEN-DESIGN
   =================================================================== */

/* ===================================================================
   📱 MOBILE-RESPONSIVE - ORIGINALE BREAKPOINTS WIEDERHERGESTELLT
   =================================================================== */

/* Mobile-Responsive - Original Breakpoints */
@media (max-width: 950px) {
  .skill-selector {
    width: 95%;
    flex-direction: column;
    align-items: center;
  }
  
  .skill-button {
    width: 100%;
    max-width: 300px;
    min-height: 150px;
    aspect-ratio: 2 / 1;
  }
  
  .skill-detail {
    flex-direction: column !important;
    text-align: center;
  }
  
  .skill-detail.left,
  .skill-detail.right {
    flex-direction: column;
  }
  
  .skill-detail .skill-image {
    flex: none;
    max-width: 100%;
    min-width: auto;
    margin: 0 auto;
  }
  
  .skill-detail .skill-text {
    padding: 0;
    text-align: left;
  }
  
  .skill-detail .skill-text::before {
    display: none;
  }
  
  .service-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 600px) {
  .skill-button {
    min-height: 120px;
    aspect-ratio: 16 / 9;
  }
  
  .skill-detail {
    padding: 1.5rem 1rem;
  }
  
  .service-section {
    padding: 1rem;
  }
  
  .cta-button {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}

/* ===================================================================
   ♿ PERFORMANCE-OPTIMIERUNGEN UND ACCESSIBILITY
   =================================================================== */

/* Performance-Optimierungen */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.1s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
  }
  
  .service-hero::before,
  .service-section::before,
  .skill-button::after,
  .cta-button::before {
    animation: none !important;
  }
  
  .service-hero h1::after {
    animation: none !important;
    width: 100px;
  }
}

/* GPU-Layer Optimierungen für bessere Performance */
.service-hero,
.service-section,
.skill-button,
.skill-detail,
.cta-button {
  transform: translateZ(0);
  will-change: auto;
}

.service-section:hover,
.skill-button:hover,
.skill-detail:hover,
.cta-button:hover {
  will-change: transform, box-shadow, background;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .service-section {
    border-width: 2px;
    border-color: var(--farbe-schwarz);
  }
  
  .skill-button {
    border-width: 4px;
    border-color: var(--farbe-schwarz);
  }
  
  .cta-button {
    border-width: 3px;
  }
}

/* Focus-Visible für bessere Keyboard-Navigation */
.skill-button:focus-visible,
.cta-button:focus-visible {
  outline: 3px solid var(--farbe-schwarz);
  outline-offset: 2px;
}

/* Print-Styles für professionelle Dokumentation */
@media print {
  .skills-page,
  .service-page {
    background: white !important;
    color: black !important;
  }
  
  .service-hero {
    background: white !important;
    color: black !important;
  }
  
  .service-section,
  .skill-detail {
    border: 2px solid black !important;
    background: white !important;
    box-shadow: none !important;
  }
  
  .skill-button {
    display: none;
  }
}

/* ===================================================================
   🎨 ZUSÄTZLICHE GRAUSTUFEN-UTILITIES FÜR KONSISTENZ
   =================================================================== */

/* Utility-Klassen für konsistente Graustufen-Anwendung */
.monochrom-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--grau-hell);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
}

.monochrom-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.monochrom-text-primary {
  color: var(--farbe-schwarz);
}

.monochrom-text-secondary {
  color: var(--grau-dunkel);
}

.monochrom-text-muted {
  color: var(--grau-mittel);
}

.monochrom-bg-light {
  background: var(--grau-sehr-hell);
}

.monochrom-bg-medium {
  background: var(--grau-hell);
}

.monochrom-border {
  border: 1px solid var(--grau-hell);
}

/* Smooth Scroll-Verhalten für elegante Navigation */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar im Graustufen-Design */
.service-section::-webkit-scrollbar,
.skill-detail::-webkit-scrollbar {
  width: 8px;
}

.service-section::-webkit-scrollbar-track,
.skill-detail::-webkit-scrollbar-track {
  background: var(--grau-sehr-hell);
  border-radius: 4px;
}

.service-section::-webkit-scrollbar-thumb,
.skill-detail::-webkit-scrollbar-thumb {
  background: var(--grau-mittel);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.service-section::-webkit-scrollbar-thumb:hover,
.skill-detail::-webkit-scrollbar-thumb:hover {
  background: var(--grau-dunkel);
}
  transform: translateX(6px);
}

/* Elegante Pulse-Animation */
.cta-button.primary {
  animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
  0%, 100% { 
    box-shadow: var(--shadow-light);
    transform: translateY(0);
  }
  50% { 
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
  }
}
/* ===================================================================
   🎨 VISUELL ANSPRECHENDERE SERVICE-BESCHREIBUNGEN
   =================================================================== */

/* Staggered Animation für mehrere Service-Sections */
.service-section:nth-child(1) { transition-delay: 0.1s; }
.service-section:nth-child(2) { transition-delay: 0.2s; }
.service-section:nth-child(3) { transition-delay: 0.3s; }

.skill-button:nth-child(1) { transition-delay: 0.1s; }
.skill-button:nth-child(2) { transition-delay: 0.3s; }
.skill-button:nth-child(3) { transition-delay: 0.5s; }

/* Quote-Style für Service-Beschreibungen */
.service-quote {
  font-style: italic;
  font-size: 1.1rem;
  padding: 1.5rem;
  background: var(--grau-hell);
  border-left: 5px solid var(--farbe-grau);
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  color: var(--grau-dunkel);
}

.service-quote::before {
  content: '"';
  font-size: 3rem;
  color: var(--farbe-grau);
  position: absolute;
  top: -10px;
  left: 10px;
  font-family: serif;
}

/* Enhanced Service List Items */
.service-section ul {
  list-style: none;
  padding-left: 0;
}

.service-section li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.service-section li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--farbe-weiss);
  font-weight: bold;
  transition: all 0.3s ease;
}

.service-section li:hover {
  padding-left: 2rem;
  color: var(--farbe-weiss);
}

.service-section li:hover::before {
  color: var(--farbe-weiss);
  transform: scale(1.2);
}

/* ===================================================================
   🚀 SERVICE-DESIGN PERFORMANCE-OPTIMIERUNGEN UND ACCESSIBILITY
   =================================================================== */

/* Performance-Optimierungen für Service-Animationen */
@media (prefers-reduced-motion: reduce) {
  .service-section,
  .skill-detail,
  .skill-button,
  .skill-selector {
    animation-duration: 0.1s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  .service-section h3::before {
    animation: none !important;
  }
}

/* GPU-Layer Optimierungen für Service-Elemente */
.service-section,
.skill-button,
.skill-detail,
.cta-button {
  transform: translateZ(0);
  will-change: auto;
}

.service-section:hover,
.skill-button:hover,
.skill-detail:hover,
.cta-button:hover {
  will-change: transform, box-shadow, background;
}

/* High Contrast Mode Support für Services */
@media (prefers-contrast: high) {
  .service-section {
    border-width: 3px;
    border-color: var(--farbe-schwarz);
    background: var(--farbe-weiss);
    color: var(--farbe-schwarz);
  }
  
  .skill-button {
    border-width: 3px;
    border-color: var(--farbe-schwarz);
  }
  
  .skill-button::before {
    background: rgba(0, 0, 0, 0.8) !important;
  }
}

/* Focus-Visible für Service-Navigation */
.skill-button:focus-visible,
.cta-button:focus-visible {
  outline: 3px solid var(--farbe-schwarz);
  outline-offset: 2px;
}

/* Touch-Device Optimierungen für Services */
@media (hover: none) and (pointer: coarse) {
  .skill-button {
    min-height: 48px;
    transform: none;
  }
  
  .skill-button:hover {
    transform: none;
  }
  
  .service-section:hover {
    transform: none;
  }
  
  .skill-detail:hover {
    transform: none;
  }
}

/* Print-Styles für Service-Dokumentation */
@media print {
  .service-section {
    border: 2px solid black !important;
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .skill-button {
    display: none;
  }
  
  .skill-detail {
    border: 1px solid black !important;
    background: white !important;
    box-shadow: none !important;
  }
}

/* ♿ ACCESSIBILITY - REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
  .materialInfoBox,
  .materialInfoBox img,
  .materialList .material-item {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  
  .materialInfoBox.fade-in,
  .materialList .material-item.selecting {
    animation: none !important;
  }
  
  .materialInfoBox,
  .materialList .material-item {
    transform: none !important;
    will-change: auto !important;
  }
}

/* 🚀 PERFORMANCE OPTIMIERUNGEN FÜR ANIMATIONEN */
.materialInfoBox,
.materialInfoBox img,
.materialList .material-item {
  /* GPU-Layer nur während Animationen */
  will-change: auto;
}

.materialInfoBox.loading,
.materialInfoBox.fade-in,
.materialList .material-item:hover,
.materialList .material-item.selected,
.materialList .material-item.selecting {
  will-change: transform, opacity, background-color, box-shadow;
}

/* Reset will-change nach Animationen */
.materialInfoBox:not(.loading):not(.fade-in),
.materialList .material-item:not(:hover):not(.selected):not(.selecting) {
  will-change: auto;
}

/* ===================================================================
   📱 GLOBAL RESET & BASE STYLES
   =================================================================== */

/* Modern CSS Reset für 3D Calculator */
.threeDLayout *,
.threeDLayout *::before,
.threeDLayout *::after {
  box-sizing: border-box;
}

.threeDLayout {
  /* 🎯 EXAKTE 5-REIHEN GRID-STRUKTUR NACH SPEZIFIKATION */
  display: grid;
  grid-template-rows: auto 28% 17% 38% auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "slider explanation"
    "modelpreview configuration"
    "materialpreview configuration"
    "cartlist cartlist";
  gap: 1rem; /* Konsistenter Abstand */
  width: 98%; /* Breathing room */
  height: 100%;
  
  /* 🎨 MODERNE ENHANCEMENTS */
  margin: 0 auto;
  
  /* 🚀 PERFORMANCE CONTAINMENT */
  contain: var(--calc-contain-layout);
  content-visibility: auto;
  
  /* 🎨 BASE STYLING */
  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  color: var(--calc-text-primary);
  line-height: 1.6;
  
  /* 🔧 BOX MODEL CONSTRAINT */
  box-sizing: border-box;
}

/* ===================================================================
   🏷️ MODERNE CARD COMPONENTS - EINHEITLICHES DESIGN SYSTEM
   =================================================================== */

/* 🔧 BASE CARD MIXIN */
.calc-card {
  background: var(--calc-surface-elevated);
  border: 1px solid var(--calc-border-light);
  border-radius: var(--calc-radius-lg);
  padding: var(--calc-space-lg);
  box-shadow: var(--calc-shadow-sm);
  transition: all var(--calc-transition-base);
  
  /* 🚀 PERFORMANCE OPTIMIZATION */
  contain: layout style;
  transform: var(--calc-gpu-layer);
}

.calc-card:hover {
  box-shadow: var(--calc-shadow-md);
  transform: translateY(-2px) var(--calc-gpu-layer);
  border-color: var(--calc-border-medium);
}

/* ===================================================================
   📋 TITLE SECTION - ELEGANTER HEADER
   =================================================================== */

.titleSection {
  /* 🎯 EXAKTE GRID-AREA ZUWEISUNG */
  grid-area: title;
  
  /* 🎨 BEWÄHRTE CONTAINER-EIGENSCHAFTEN */
  border: 2px solid var(--farbe-schwarz);
  border-radius: 4px;
  padding: 1rem;
  
  /* 📐 LAYOUT */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* ✨ MODERNE ENHANCEMENTS */
  background: linear-gradient(135deg, var(--calc-background) 0%, var(--calc-surface) 100%);
  box-shadow: var(--calc-shadow-lg);
  transition: all var(--calc-transition-base);
  position: relative;
  overflow: hidden;
}

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

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

.titleSection:hover {
  transform: translateY(-4px) var(--calc-gpu-layer);
  box-shadow: var(--calc-shadow-xl);
  border-color: var(--calc-secondary);
}

.titleSection h2 {
  font-family: var(--font-family-heading, 'Inter', -apple-system, sans-serif);
  font-size: var(--calc-text-2xl);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  
  /* 🎨 MODERN GRADIENT TEXT */
  background: linear-gradient(135deg, var(--calc-primary) 0%, var(--calc-secondary) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 📱 RESPONSIVE BEHAVIOR */
  line-height: 1.2;
}

/* ===================================================================
   🎬 SLIDESHOW SECTION - VISUAL GUIDE
   =================================================================== */

.slideshowSection {
  /* 🎯 EXAKTE GRID-AREA ZUWEISUNG */
  grid-area: slider;
  
  /* 🎨 BEWÄHRTE CONTAINER-EIGENSCHAFTEN */
  border: 2px solid var(--farbe-schwarz);
  border-radius: var(--calc-radius-lg);
  padding: 1rem;
  
  /* 📐 LAYOUT - Erweitert für Slider-Container */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* ✨ MODERNE ENHANCEMENTS */
  background: var(--calc-surface-elevated);
  box-shadow: var(--calc-shadow-sm);
  transition: all var(--calc-transition-base);
  
  /* 🎬 SLIDER-SPEZIFISCHE OPTIMIERUNGEN ERWEITERT */
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  contain: layout style;
}

.slideshowSection:hover {
  box-shadow: var(--calc-shadow-md);
  transform: translateY(-2px) var(--calc-gpu-layer);
}

/* ===================================================================
   🎬 MODERNE SLIDER-OPTIMIERUNGEN - Konsistent mit Store-Slider
   =================================================================== */

/* 🎯 G3DF SLIDER DESIGN TOKENS - Branding-Konsistenz */
.slideshowSection {
  --slideshow-primary: var(--color-primary, #000000);
  --slideshow-secondary: var(--color-secondary, #9b9999);
  --slideshow-background: var(--color-background, #fffefe);
  --slideshow-shadow: rgba(0, 0, 0, 0.15);
  --slideshow-shadow-hover: rgba(0, 0, 0, 0.25);
  --slideshow-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🖼️ SLIDESHOW IMAGE CONTAINER */
.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(200px, 25vh, 350px);
  background: var(--calc-surface);
  border-radius: var(--calc-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 📱 RESPONSIVE BILD-SKALIERUNG - Mobile-First Approach */
.slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  opacity: 0;
  transition: opacity var(--calc-transition-base);
  cursor: zoom-in;
  will-change: opacity;
  z-index: 1;
  
  /* 📱 MOBILE: Vollständige Bildanzeige */
  object-fit: contain;
}

.slideshow-image.active {
  opacity: 1;
  z-index: 3;
}

/* 🎮 MODERNE NAVIGATION CONTROLS - Store-Slider Pattern ERWEITERT */
.slideshow-nav-button,
.slider-arrow {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--slideshow-primary);
  user-select: none;
  box-shadow: 0 4px 16px var(--slideshow-shadow);
  
  /* 🎯 TOUCH OPTIMIERUNGEN */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  
  /* 📱 WCAG-KONFORME TOUCH-TARGETS */
  min-width: var(--calc-touch-min);
  min-height: var(--calc-touch-min);
}

.slideshow-nav-button:hover,
.slider-arrow:hover {
  transform: translateY(-50%) scale(1.15);
  border-color: var(--color-secondary);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 24px var(--slideshow-shadow-hover);
  color: var(--slideshow-secondary);
}

.slideshow-nav-button:active,
.slider-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.slideshow-nav-button.prev,
.slider-arrow.prev {
  left: 12px;
}

.slideshow-nav-button.next,
.slider-arrow.next {
  right: 12px;
}

.slideshow-nav-button:disabled,
.slider-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: translateY(-50%) scale(0.9);
}

/* 📍 INDICATOR DOTS - Moderne Implementierung */
.slideshow-indicators {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 12px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.slideshow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  
  /* 📱 TOUCH OPTIMIERUNG */
  min-width: var(--calc-touch-min);
  min-height: var(--calc-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slideshow-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.slideshow-dot:hover::before {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.slideshow-dot.active {
  background: white;
  transform: scale(1.2);
}

.slideshow-dot.active::before {
  background: white;
  transform: scale(1.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* ===================================================================
   🖼️ SLIDER BILD-BASIS-STYLES - Konsistente Darstellung
   =================================================================== */

/* Basis-Styles für alle Slider-Bilder */
.slideshowSection img,
.slideshow-image,
.slider-image {
  display: block;
  border-radius: 4px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slideshowSection img:hover,
.slideshow-image:hover,
.slider-image:hover {
  transform: scale(1.02);
}

/* ===================================================================
    MOBILE-RESPONSIVE BREAKPOINTS - WCAG-KONFORM
   =================================================================== */

/* 🖥️ DESKTOP OPTIMIERUNGEN (ab 951px) */
@media (min-width: 951px) {
  .slideshow-nav-button {
    width: var(--calc-touch-comfortable);
    height: var(--calc-touch-comfortable);
  }
  
  /* Desktop: Optimierte Bildanzeige - Grid-Integration */
  .slideshowSection img,
  .slideshow-image,
  .slider-image {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%; /* Container-Höhe vollständig nutzen */
    max-height: none; /* Keine Begrenzung - Grid bestimmt Höhe */
  }
  
  .slideshow-container {
    min-height: clamp(300px, 35vh, 450px);
  }
  
  /* Desktop: SlideshowSection Container - Grid-Höhen-Integration */
  .slideshowSection {
    height: 100%; /* Grid-Area vollständig ausfüllen */
    min-height: 0;  /* Flexibilität für Grid */
  }
}

/* 📱 MOBILE OPTIMIERUNGEN (bis 950px) */
@media (max-width: 950px) {
  .slideshow-nav-button {
    /* WCAG Minimum Touch-Target */
    width: var(--calc-touch-min);
    height: var(--calc-touch-min);
    font-size: 16px;
  }
  
  /* 📱 Mobile: Vollständige Bildanzeige ohne Abschneidung - ERWEITERT */
  .slideshowSection {
    height: auto; /* Mobile: Flexible Höhe für Single-Column-Layout */
  }
  
  .slideshowSection img,
  .slideshow-image,
  .slider-image {
    object-fit: contain !important;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  
  /* Mobile Touch-Optimierung für Arrow-Buttons */
  .slideshow-nav-button,
  .slider-arrow {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  
  .slideshow-container {
    min-height: clamp(180px, 25vh, 280px);
  }
}

/* 📱 EXTRA SMALL DEVICES (bis 480px) */
@media (max-width: 480px) {
  .slideshow-nav-button {
    left: 8px;
    right: 8px;
    font-size: 14px;
  }
  
  .slideshow-nav-button.prev {
    left: 8px;
  }
  
  .slideshow-nav-button.next {
    right: 8px;
  }
  
  .slideshow-indicators {
    bottom: 12px;
    padding: 6px 10px;
  }
  
  .slideshow-dot {
    min-width: var(--calc-touch-min);
    min-height: var(--calc-touch-min);
  }
  
  .slideshow-container {
    min-height: clamp(160px, 20vh, 220px);
  }
}

/* ===================================================================
   🚀 PERFORMANCE OPTIMIERUNGEN & GPU-BESCHLEUNIGUNG
   =================================================================== */

/* GPU-Layer Optimierungen für Animationen */
.slideshow-image,
.slideshow-nav-button,
.slideshow-dot {
  will-change: auto;
}

.slideshow-image.active,
.slideshow-nav-button:hover,
.slideshow-dot:hover,
.slideshow-dot.active {
  will-change: transform, opacity, background-color, box-shadow;
}

/* Reset will-change nach Animationen */
.slideshow-image:not(.active),
.slideshow-nav-button:not(:hover),
.slideshow-dot:not(:hover):not(.active) {
  will-change: auto;
}

/* Container Containment für bessere Performance */
.slideshow-container {
  contain: layout style paint;
}

/* Smooth Scrolling für Accessibility */
@media (prefers-reduced-motion: no-preference) {
  .slideshow-image {
    transition: opacity var(--calc-transition-base);
  }
  
  .slideshow-nav-button {
    transition: var(--slideshow-transition);
  }
  
  .slideshow-dot::before {
    transition: var(--slideshow-transition);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .slideshow-image,
  .slideshow-nav-button,
  .slideshow-dot::before {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  
  .slideshow-nav-button:hover {
    transform: translateY(-50%) !important;
  }
  
  .slideshow-dot:hover::before,
  .slideshow-dot.active::before {
    transform: none !important;
  }
}

/* ===================================================================
   🎨 SLIDESHOW ENHANCEMENT STATES
   =================================================================== */

/* Loading State */
.slideshow-container.loading {
  background: linear-gradient(90deg,
    var(--calc-surface) 25%,
    rgba(255, 255, 255, 0.8) 50%,
    var(--calc-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Error State */
.slideshow-container.error {
  background: var(--calc-surface);
  color: var(--calc-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--calc-text-sm);
}

/* Empty State */
.slideshow-container.empty {
  background: var(--calc-surface);
  border: 2px dashed var(--calc-border-medium);
  color: var(--calc-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--calc-text-sm);
}

/* ===================================================================
   💡 UPLOADER HINTS - STEP-BY-STEP GUIDE
   =================================================================== */

.uploaderHintsSection {
  /* 🎯 EXAKTE GRID-AREA ZUWEISUNG */
  grid-area: explanation;
  
  /* 🎨 BEWÄHRTE CONTAINER-EIGENSCHAFTEN */
  border: 2px solid var(--farbe-schwarz);
  border-radius: 4px;
  padding: 1rem;
  
  /* 📐 LAYOUT */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--calc-space-md);
  
  /* ✨ MODERNE ENHANCEMENTS */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 249, 250, 0.9) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--calc-shadow-md);
  transition: all var(--calc-transition-base);
}

.uploaderHintsSection:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: var(--calc-shadow-lg);
  transform: translateY(-2px) var(--calc-gpu-layer);
}

.uploaderHintsSection h3 {
  font-family: var(--font-family-heading, 'Inter', sans-serif);
  font-size: var(--calc-text-lg);
  font-weight: 600;
  color: var(--calc-primary);
  margin: 0 0 var(--calc-space-md) 0;
  
  /* 📍 MODERN ACCENT */
  position: relative;
  padding-bottom: var(--calc-space-sm);
}

.uploaderHintsSection h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--calc-primary), var(--calc-secondary));
  border-radius: 2px;
}

.uploaderHintsSection p {
  font-size: var(--calc-text-sm);
  line-height: 1.7;
  color: var(--calc-text-secondary);
  margin: 0 0 var(--calc-space-sm) 0;
}

.uploaderHintsSection span {
  font-weight: 600;
  color: var(--calc-primary);
}

/* 📱 INDIVIDUAL OFFER BUTTON - Touch Optimiert */
.individualOfferBtn {
  background: var(--calc-primary);
  color: var(--calc-background);
  border: 2px solid var(--calc-primary);
  border-radius: var(--calc-radius-md);
  padding: var(--calc-space-md) var(--calc-space-lg);
  
  /* 🎨 TYPOGRAPHY */
  font-family: var(--font-family-base);
  font-size: var(--calc-text-sm);
  font-weight: 600;
  text-decoration: none;
  
  /* 📐 LAYOUT */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* 📱 TOUCH STANDARDS */
  min-height: var(--calc-btn-md);
  min-width: var(--calc-touch-comfortable);
  
  /* ✨ INTERACTION */
  cursor: pointer;
  transition: all var(--calc-transition-base);
  position: relative;
  overflow: hidden;
  
  /* 🎯 TOUCH OPTIMIERUNGEN */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  user-select: none;
  margin-bottom: 30px !important;
}

.individualOfferBtn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--calc-transition-base), height var(--calc-transition-base);
}

.individualOfferBtn:hover::before {
  width: 300px;
  height: 300px;
}

.individualOfferBtn:hover {
  background: var(--calc-background);
  color: var(--calc-primary);
  transform: translateY(-3px) var(--calc-gpu-layer);
  box-shadow: var(--calc-shadow-lg);
}

.individualOfferBtn:active {
  transform: translateY(-1px) var(--calc-gpu-layer);
}

/* ===================================================================
   🎯 MODEL PREVIEW - 3D VIEWER CONTAINER
   =================================================================== */

.modelPreviewSection {
  /* 🎯 EXAKTE GRID-AREA ZUWEISUNG */
  grid-area: modelpreview;
  
  /* 🎨 BEWÄHRTE CONTAINER-EIGENSCHAFTEN */
  border: 2px solid var(--farbe-schwarz);
  border-radius: 4px;
  padding: 1rem;
  min-height: 200px; /* Angepasst für geteilte Reihe */
  
  /* 📐 LAYOUT */
  display: flex;
  flex-direction: column;
  
  /* ✨ MODERNE ENHANCEMENTS */
  background: var(--calc-surface-elevated);
  box-shadow: var(--calc-shadow-sm);
  transition: all var(--calc-transition-base);
  contain: layout size;
}

.modelPreviewSection:hover {
  box-shadow: var(--calc-shadow-md);
  transform: translateY(-2px) var(--calc-gpu-layer);
}

#viewerContainer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 🎨 STYLING */
  background: var(--calc-surface);
  border: 2px dashed var(--calc-border-medium);
  border-radius: var(--calc-radius-md);
  
  /* 🎨 TYPOGRAPHY */
  font-size: var(--calc-text-base);
  color: var(--calc-text-secondary);
  text-align: center;
  
  /* 📱 CONTENT-WINDOW CONSTRAINED PROPORTIONEN - KRITISCHER FIX */
  aspect-ratio: var(--calc-viewer-mobile);
  min-height: clamp(180px, 20vh, 300px);
  max-height: clamp(250px, 35vh, 400px);
  
  /* 📊 OVERFLOW PREVENTION */
  overflow: hidden;
  
  /* ✨ INTERACTION */
  transition: all var(--calc-transition-base);
  
  /* 🚀 3D PERFORMANCE OPTIMIERUNGEN */
  contain: var(--calc-contain-strict);
  transform: var(--calc-gpu-layer);
  backface-visibility: hidden;
  perspective: 1000px;
  
  /* 🎯 TOUCH-OPTIMIERTE 3D-KONTROLLEN */
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: none;
}

#viewerContainer:hover {
  border-color: var(--calc-primary);
  background: linear-gradient(135deg, var(--calc-surface) 0%, rgba(255, 255, 255, 0.9) 100%);
}

/* 🎯 3D VIEWER STATES */
#viewerContainer.loading {
  background: linear-gradient(90deg, var(--calc-surface) 25%, rgba(255, 255, 255, 0.8) 50%, var(--calc-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===================================================================
   ⚙️ DRUCK SETTINGS - MODERNE FORM SECTION
   =================================================================== */

.druckSettingsSection {
  /* 🎯 EXAKTE GRID-AREA ZUWEISUNG - SPANNEN ÜBER REIHE 3-4 */
  grid-area: configuration;
  
  /* 🎨 BEWÄHRTE CONTAINER-EIGENSCHAFTEN */
  border: 2px solid var(--farbe-schwarz);
  border-radius: 4px;
  padding: 1rem;
  
  /* 🎯 BEWÄHRTES NESTED LAYOUT-PATTERN */
  display: flex;
  flex-direction: row; /* Desktop: nebeneinander */
  gap: 0.5rem;
  
  /* ✨ MODERNE ENHANCEMENTS */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 249, 250, 0.9) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--calc-shadow-md);
  transition: all var(--calc-transition-base);
}

.druckSettingsSection:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: var(--calc-shadow-lg);
  transform: translateY(-2px) var(--calc-gpu-layer);
}

/* ===================================================================
   🎨 NEUE MATERIALVORSCHAU SECTION - LINKS UNTEN
   =================================================================== */

.materialPreviewSection {
  /* 🎯 EXAKTE GRID-AREA ZUWEISUNG */
  grid-area: materialpreview;
  
  /* 🎨 BEWÄHRTE CONTAINER-EIGENSCHAFTEN */
  border: 2px solid var(--farbe-schwarz);
  border-radius: 4px;
  padding: 1rem;
  min-height: 200px; /* Minimum für geteilte Reihe */
  
  /* 📐 LAYOUT - FLEXIBLE CONTAINER-ANPASSUNG */
  display: flex;
  flex-direction: column;
  gap: var(--calc-space-md);
  
  /* 🎯 FLEXIBLE HÖHE FÜR MATERIAL-INFO-BOX */
  overflow: visible; /* Ermöglicht vollständige Anzeige */
  height: auto; /* Passt sich an Inhalt an */
  
  /* ✨ MODERNE ENHANCEMENTS */
  background: var(--calc-surface-elevated);
  box-shadow: var(--calc-shadow-sm);
  transition: all var(--calc-transition-base);
  contain: layout style; /* size entfernt für flexible Höhe */
}

.materialPreviewSection:hover {
  box-shadow: var(--calc-shadow-md);
  transform: translateY(-2px) var(--calc-gpu-layer);
}

.materialPreviewSection h3 {
  font-family: var(--font-family-heading, 'Inter', sans-serif);
  font-size: var(--calc-text-lg);
  font-weight: 600;
  color: var(--calc-primary);
  margin: 0 0 var(--calc-space-md) 0;
  
  /* 📍 MODERN ACCENT */
  position: relative;
  padding-bottom: var(--calc-space-sm);
}

.materialPreviewSection h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--calc-primary), var(--calc-secondary));
  border-radius: 2px;
}

/* 🎨 FARB-AUSWAHL SEKTION - Oben in der Material-Box */
.colorSelection {
  display: flex;
  flex-wrap: wrap;
  gap: var(--calc-space-sm);
  padding: var(--calc-space-md);
  background: var(--calc-surface);
  border-radius: var(--calc-radius-md);
  margin-bottom: var(--calc-space-md);
  min-height: 60px;
  align-items: center;
}

.colorSelection .color-item {
  width: 40px;
  height: 40px;
  border-radius: var(--calc-radius-sm);
  border: 3px solid transparent;
  cursor: pointer;
  transition: all var(--calc-transition-base);
  position: relative;
  box-shadow: var(--calc-shadow-sm);
}

.colorSelection .color-item:hover {
  transform: scale(1.1);
  box-shadow: var(--calc-shadow-md);
}

.colorSelection .color-item.selected {
  border-color: var(--calc-primary);
  transform: scale(1.15);
  box-shadow: var(--calc-shadow-lg);
}

.colorSelection .color-item.selected::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.colorSelection .color-loading {
  color: var(--calc-text-secondary);
  font-style: italic;
  text-align: center;
  width: 100%;
}

/* 🎨 MATERIAL CONTAINER - Teilt in Liste links und Info rechts */
.materialContainer {
  display: flex;
  gap: var(--calc-space-md);
  height: auto; /* KRITISCHER FIX: Flexible Höhe für Inhalt-Anpassung */
  min-height: 300px;
  /* max-height entfernt - Box passt sich an Inhalt an */
}

/* 🎨 VERTIKALE MATERIAL-LISTE - Links, scrollbar */
.materialList {
  flex: 0 0 120px; /* Feste Breite für Material-Liste */
  display: flex;
  flex-direction: column;
  gap: var(--calc-space-sm);
  
  /* 🚨 SCROLL-KORREKTUREN - NUR LISTE SCROLLT */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px; /* Nur Material-Liste begrenzt */
  
  /* 📱 SCROLL-VERHALTEN OPTIMIERUNGEN */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  overscroll-behavior-y: contain; /* Verhindere Scroll-Chaining */
  
  /* 🎯 BOX-MODEL KORREKTUREN */
  box-sizing: border-box;
  padding-right: var(--calc-space-sm);
  
  /* 📱 CUSTOM SCROLLBAR */
  scrollbar-width: thin;
  scrollbar-color: var(--calc-border-medium) var(--calc-surface);
}

.materialList::-webkit-scrollbar {
  width: 6px;
}

.materialList::-webkit-scrollbar-track {
  background: var(--calc-surface);
  border-radius: 3px;
}

.materialList::-webkit-scrollbar-thumb {
  background: var(--calc-border-medium);
  border-radius: 3px;
}

.materialList::-webkit-scrollbar-thumb:hover {
  background: var(--calc-primary);
}

.materialList .material-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--calc-space-sm);
  border-radius: var(--calc-radius-sm);
  border: 2px solid transparent;
  transition: all var(--calc-transition-base),
              transform var(--calc-transition-fast),
              box-shadow var(--calc-transition-base);
  cursor: pointer;
  background: var(--calc-background);
  min-height: 80px;
  
  /* 🚀 GPU-BESCHLEUNIGUNG */
  transform: translateZ(0);
  will-change: transform, background-color, box-shadow;
}

.materialList .material-item:hover {
  background: var(--calc-surface);
  transform: translateX(2px) translateY(-2px) translateZ(0);
  border-color: var(--calc-border-medium);
  box-shadow: var(--calc-shadow-sm);
}

.materialList .material-item.selected {
  background: var(--calc-primary);
  color: var(--calc-background);
  border-color: var(--calc-primary);
  transform: translateX(4px) translateY(-1px) scale(1.02) translateZ(0);
  box-shadow: var(--calc-shadow-md);
}

/* ✨ ACTIVE STATE FÜR TOUCH-FEEDBACK */
.materialList .material-item:active {
  transform: translateX(1px) translateY(0) scale(0.98) translateZ(0);
  transition-duration: 100ms;
}

/* 🎯 SELECTION ANIMATION */
.materialList .material-item.selecting {
  animation: materialSelect var(--calc-transition-base) var(--calc-spring) forwards;
}

@keyframes materialSelect {
  0% {
    transform: scale(1) translateZ(0);
    background: var(--calc-surface);
  }
  50% {
    transform: scale(1.05) translateZ(0);
    background: var(--calc-primary);
    border-color: var(--calc-primary);
  }
  100% {
    transform: translateX(4px) translateY(-1px) scale(1.02) translateZ(0);
    background: var(--calc-primary);
    border-color: var(--calc-primary);
  }
}

.materialList .material-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--calc-radius-sm);
  margin-bottom: var(--calc-space-xs);
}

.materialList .material-item .material-name {
  font-size: var(--calc-text-xs);
  font-weight: 600;
  color: var(--calc-text-primary);
  text-align: center;
  line-height: 1.2;
}

.materialList .material-item.selected .material-name {
  color: var(--calc-background);
}

/* 🎨 MATERIAL-INFO-BOX - Rechts, zeigt Details an */
.materialInfoBox {
  flex: 1;
  padding: var(--calc-space-lg);
  background: var(--calc-surface-elevated);
  border-radius: var(--calc-radius-md);
  border: 1px solid var(--calc-border-light);
  
  /* 🎯 FLEXBOX FÜR BOTTOM-ORIENTIERTES BILD-LAYOUT */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Orientiert Inhalt am unteren Rand */
  gap: var(--calc-space-md);
  
  /* 📊 FESTE HÖHE FÜR STABILE BILD-POSITION */
  height: 53vh;
  min-height: fit-content;
  
  /* 🚨 KEIN OVERFLOW - VOLLSTÄNDIG SICHTBARER INHALT */
  overflow: visible;
  
  /* ⚡ SMOOTH TRANSITIONS FÜR MATERIAL-WECHSEL */
  transition: opacity var(--calc-transition-base),
              transform var(--calc-transition-fast),
              background-color var(--calc-transition-fast);
  
  /* 🚀 GPU-BESCHLEUNIGUNG */
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* 📝 TEXT-CONTENT CONTAINER - Flexibler oberer Bereich */
.materialInfoBox .text-content {
  order: 1; /* Text kommt zuerst */
  flex-grow: 1; /* Nutzt verfügbaren Raum oberhalb des Bildes */
  display: flex;
  flex-direction: column;
  gap: var(--calc-space-md);
  overflow-y: auto; /* Scrollbar falls Text zu lang */
}

/* 🖼️ MATERIAL IMAGE CONTAINER - Stabiler unterer Bereich */
.materialInfoBox .image-container {
  order: 2; /* Bild kommt nach dem Text */
  flex-shrink: 0; /* Bild-Größe bleibt stabil */
  margin-top: auto; /* Schiebt Bild nach unten */
}

/* 🔄 LOADING-STATE WÄHREND MATERIAL-WECHSEL */
.materialInfoBox.loading {
  opacity: 0.6;
  transform: scale(0.98) translateZ(0);
  background: var(--calc-surface);
  pointer-events: none;
}

/* ✨ FADE-IN ANIMATION FÜR NEUE INHALTE */
.materialInfoBox.fade-in {
  animation: materialFadeIn var(--calc-transition-base) var(--calc-spring) forwards;
}

@keyframes materialFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(10px) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) translateZ(0);
  }
}

.materialInfoBox h4 {
  font-family: var(--font-family-heading, 'Inter', sans-serif);
  font-size: var(--calc-text-lg);
  font-weight: 600;
  color: var(--calc-primary);
  margin: 0;
  
  /* 📍 MODERN ACCENT */
  position: relative;
  padding-bottom: var(--calc-space-sm);
}

.materialInfoBox h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--calc-primary);
  border-radius: 1px;
}

.materialInfoBox p {
  font-size: var(--calc-text-sm);
  line-height: 1.6;
  color: var(--calc-text-secondary);
  margin: 0;
}

.materialInfoBox img {
  /* 🎯 VOLLSTÄNDIG SICHTBARES BILD OHNE ABSCHNEIDEN */
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain; /* Bild vollständig sichtbar */
  border-radius: var(--calc-radius-sm);
  
  /* 🚨 KEIN OVERFLOW */
  display: block;
  
  /* 🎯 STABILE POSITION AM UNTEREN RAND */
  order: 2; /* Bild immer nach dem Text */
  flex-shrink: 0; /* Verhindert Verkleinerung */
  
  /* ⚡ SMOOTH IMAGE TRANSITIONS */
  transition: opacity var(--calc-transition-slow),
              transform var(--calc-transition-base);
  transform: translateZ(0);
}

/* 🖼️ IMAGE LOADING STATE */
.materialInfoBox img.loading {
  opacity: 0;
  transform: scale(0.95) translateZ(0);
}

/* 🖼️ IMAGE FADE-IN */
.materialInfoBox img.loaded {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

.materialInfoBox .material-properties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--calc-space-sm);
  /* Entfernt margin-top, da es jetzt in .text-content Container ist */
}

.materialInfoBox .property-item {
  background: var(--calc-background);
  padding: var(--calc-space-sm);
  border-radius: var(--calc-radius-sm);
  border: 1px solid var(--calc-border-light);
}

.materialInfoBox .property-label {
  font-size: var(--calc-text-xs);
  font-weight: 600;
  color: var(--calc-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.materialInfoBox .property-value {
  font-size: var(--calc-text-sm);
  color: var(--calc-text-primary);
  margin-top: 2px;
}

.druckFormContainer {
  flex: 1;
}

.druckFormContainer h3 {
  font-family: var(--font-family-heading, 'Inter', sans-serif);
  font-size: var(--calc-text-lg);
  font-weight: 600;
  color: var(--calc-primary);
  margin: 0 0 var(--calc-space-lg) 0;
  
  /* 📍 MODERN ACCENT */
  position: relative;
  padding-bottom: var(--calc-space-sm);
}

.druckFormContainer h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--calc-primary), var(--calc-secondary));
  border-radius: 2px;
}

/* ===================================================================
   📝 MODERNE FORM ELEMENTE - TOUCH-OPTIMIERT
   =================================================================== */

#upload3DForm {
  display: flex;
  flex-direction: column;
  gap: var(--calc-space-lg);
}

#upload3DForm label {
  font-family: var(--font-family-base);
  font-size: var(--calc-text-sm);
  font-weight: 600;
  color: var(--calc-primary);
  
  display: flex;
  flex-direction: column;
  gap: var(--calc-space-sm);
}

/* 🔘 BUTTON STYLING - Modern & Touch-Optimiert */
.btn {
  background: var(--calc-background);
  color: var(--calc-primary);
  border: 2px solid var(--calc-primary);
  border-radius: var(--calc-radius-md);
  padding: var(--calc-space-md) var(--calc-space-lg);
  
  /* 🎨 TYPOGRAPHY */
  font-family: var(--font-family-base);
  font-size: var(--calc-text-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  
  /* 📐 LAYOUT */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* 📱 TOUCH STANDARDS */
  min-height: var(--calc-btn-md);
  min-width: var(--calc-touch-comfortable);
  
  /* ✨ INTERACTION */
  cursor: pointer;
  transition: all var(--calc-transition-base);
  position: relative;
  overflow: hidden;
  
  /* 🎯 TOUCH OPTIMIERUNGEN */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  user-select: none;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--calc-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--calc-transition-base), height var(--calc-transition-base);
  opacity: 0.1;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:hover {
  background: var(--calc-primary);
  color: var(--calc-background);
  transform: translateY(-3px) var(--calc-gpu-layer);
  box-shadow: var(--calc-shadow-lg);
}

.btn:active {
  transform: translateY(-1px) var(--calc-gpu-layer);
}

/* 🔢 INPUT ELEMENTS - Modern & Accessible */
input[type="number"],
select {
  background: var(--calc-background);
  border: 2px solid var(--calc-border-light);
  border-radius: var(--calc-radius-md);
  padding: var(--calc-space-md);
  
  /* 🎨 TYPOGRAPHY */
  font-family: var(--font-family-base);
  font-size: var(--calc-text-sm);
  color: var(--calc-text-primary);
  
  /* 📱 TOUCH STANDARDS */
  min-height: var(--calc-input-height);
  
  /* ✨ INTERACTION */
  transition: all var(--calc-transition-base);
  
  /* 🎯 MOBILE OPTIMIERUNGEN */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}

/* 📱 iOS ZOOM PREVENTION */
@media (max-width: 768px) {
  input[type="number"],
  select {
    font-size: 16px; /* Verhindert automatisches Zoomen auf iOS */
  }
}

input[type="number"]:focus,
select:focus {
  outline: none;
  border-color: var(--calc-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  transform: var(--calc-gpu-layer);
}

/* 🎛️ RANGE SLIDER - Modern Design */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--calc-primary) 0%, var(--calc-border-light) 0%);
  outline: none;
  transition: all var(--calc-transition-base);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--calc-primary);
  border: 3px solid var(--calc-background);
  cursor: pointer;
  box-shadow: var(--calc-shadow-sm);
  transition: all var(--calc-transition-base);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: var(--calc-shadow-md);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--calc-primary);
  border: 3px solid var(--calc-background);
  cursor: pointer;
  box-shadow: var(--calc-shadow-sm);
  transition: all var(--calc-transition-base);
}

/* 📊 VALUE DISPLAY */
#infillValue {
  font-weight: 700;
  color: var(--calc-primary);
  font-size: var(--calc-text-base);
  
  background: var(--calc-surface);
  padding: var(--calc-space-sm) var(--calc-space-md);
  border-radius: var(--calc-radius-sm);
  border: 1px solid var(--calc-border-light);
  
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

/* 🛒 CTA BUTTON - Herausragend & Touch-Optimiert */
button[type="submit"] {
  background: linear-gradient(135deg, var(--calc-primary) 0%, var(--calc-secondary) 100%);
  color: var(--calc-background);
  border: none;
  border-radius: var(--calc-radius-lg);
  padding: var(--calc-space-lg) var(--calc-space-2xl);
  
  /* 🎨 TYPOGRAPHY */
  font-family: var(--font-family-base);
  font-size: var(--calc-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  
  /* 📐 LAYOUT */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* 📱 CTA SIZING */
  min-height: var(--calc-btn-lg);
  width: 100%;
  
  /* ✨ ADVANCED INTERACTION */
  cursor: pointer;
  transition: all var(--calc-transition-base);
  position: relative;
  overflow: hidden;
  
  /* 🌟 PREMIUM ELEVATION */
  box-shadow: var(--calc-shadow-lg);
  
  /* 🎯 TOUCH OPTIMIERUNGEN */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  user-select: none;
}

button[type="submit"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateY(-50%);
  transition: left var(--calc-transition-slow);
}

button[type="submit"]:hover::before {
  left: 100%;
}

button[type="submit"]:hover {
  transform: translateY(-4px) var(--calc-gpu-layer);
  box-shadow: var(--calc-shadow-2xl);
  background: linear-gradient(135deg, var(--calc-secondary) 0%, var(--calc-primary) 100%);
}

button[type="submit"]:active {
  transform: translateY(-2px) var(--calc-gpu-layer);
}

/* 🎯 CTA PULSE ANIMATION - Aufmerksamkeit */
@keyframes ctaPulse {
  0% { box-shadow: var(--calc-shadow-lg); }
  50% { box-shadow: var(--calc-shadow-xl); }
  100% { box-shadow: var(--calc-shadow-lg); }
}

button[type="submit"]:not(:hover):not(:focus) {
  animation: ctaPulse 3s ease-in-out infinite;
}

/* ===================================================================
   📊 RESULT & PROGRESS SECTIONS
   =================================================================== */

/* 📈 UPLOAD PROGRESS */
#uploadBarContainer {
  background: var(--calc-surface);
  border: 1px solid var(--calc-border-light);
  border-radius: var(--calc-radius-md);
  padding: 4px;
  margin: var(--calc-space-md) 0;
  overflow: hidden;
}

#uploadProgressBar {
  height: 8px;
  background: linear-gradient(90deg, var(--calc-primary) 0%, var(--calc-secondary) 100%);
  border-radius: 4px;
  width: 0%;
  transition: width var(--calc-transition-base);
  position: relative;
}

#uploadProgressBar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progressShimmer 2s infinite;
}

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

#uploadProgressText {
  font-size: var(--calc-text-sm);
  color: var(--calc-text-secondary);
  text-align: center;
  margin-top: var(--calc-space-sm);
  font-weight: 500;
}

/* 🎯 PRICE RESULT */
#priceResult {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 249, 250, 0.9) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid var(--calc-primary);
  border-radius: var(--calc-radius-lg);
  padding: var(--calc-space-xl);
  margin: var(--calc-space-lg) 0;
  
  box-shadow: var(--calc-shadow-xl);
  animation: slideInUp 0.6s var(--calc-spring);
}

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

#priceResult h4 {
  font-family: var(--font-family-heading, 'Inter', sans-serif);
  font-size: var(--calc-text-xl);
  font-weight: 700;
  color: var(--calc-primary);
  margin: 0 0 var(--calc-space-md) 0;
  text-align: center;
}

#priceResult p {
  font-size: var(--calc-text-base);
  line-height: 1.7;
  color: var(--calc-text-secondary);
  margin: 0 0 var(--calc-space-sm) 0;
  text-align: center;
}

#priceResult strong {
  color: var(--calc-primary);
  font-weight: 700;
}

/* 🎛️ POST-CALCULATION BUTTONS */
#postCalcButtons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--calc-space-md);
  margin-top: var(--calc-space-lg);
}

#postCalcButtons button {
  flex: 1;
  min-width: 150px;
  background: var(--calc-background);
  color: var(--calc-primary);
  border: 2px solid var(--calc-primary);
  border-radius: var(--calc-radius-md);
  padding: var(--calc-space-md) var(--calc-space-lg);
  
  font-family: var(--font-family-base);
  font-size: var(--calc-text-sm);
  font-weight: 600;
  
  min-height: var(--calc-btn-md);
  display: flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer;
  transition: all var(--calc-transition-base);
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}

#postCalcButtons button:hover {
  background: var(--calc-primary);
  color: var(--calc-background);
  transform: translateY(-2px) var(--calc-gpu-layer);
  box-shadow: var(--calc-shadow-md);
}

/* ===================================================================
   📱 RESPONSIVE BREAKPOINT SYSTEM - MOBILE FIRST
   =================================================================== */

/* 🎯 MOBILE RESPONSIVE: SINGLE-COLUMN STACK FÜR 5-REIHEN-LAYOUT */
@media screen and (max-width: 950px) {
  .threeDLayout {
    /* 🎯 MOBILE GRID: Single-Column Stack - Logische Reihenfolge */
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "slider"
      "explanation"
      "materialpreview"
      "configuration"
      "modelpreview"
      "cartlist";
    gap: 1rem;
    width: 98%;
    height: 100%; /* Auto height für mobile */
    grid-template-rows: 2% 9% 17% 26% 23% 13%;
  }

  /* 🎯 MOBILE: Konfiguration nicht mehr spannen */
  .druckSettingsSection {
    /* 🎯 BEWÄHRTES NESTED LAYOUT-PATTERN - MOBILE */
    flex-direction: column; /* Mobile: gestapelt */
  }
}

/* 🎯 BEWÄHRTER TABLET BREAKPOINT - DESKTOP.CSS PATTERN */
@media screen and (max-width: 600px) {
  .content-window {
    min-height: 160vh; /* Bewährte Content-Window Anpassung */
  }
}

/* ===================================================================
   🎯 BEWÄHRTE DRUCKFORMCONTAINER - DESKTOP.CSS PATTERN
   =================================================================== */

/* Links: DruckFormContainer */
.druckFormContainer {
  flex: 1;
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.druckFormContainer form label {
  margin-top: 0.1rem;   /* statt 0.5rem */
  margin-bottom: 0.1rem;
}

.druckFormContainer form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.2rem;
}

/* Damit das Label zusammen mit seinem Input bleibt */
.druckFormContainer form label {
  display: flex;
  flex-direction: column;
  font-size: var(--font-klein);
}

/* Eingabefelder etwas schmaler, weniger Padding */
.druckFormContainer form input,
.druckFormContainer form select {
  width: 7rem;     /* statt 300px */
  padding: 0.2rem 0.5rem;      /* statt 0.3rem */
  font-size: var(--font-klein);
  height: 2.5rem;
  margin: 0.2rem 0.3rem;
  border-radius: 10px;
}

.infoBox {
  vertical-align: center;
  border: 2px solid var(--farbe-schwarz);
  border-radius: 1px;
  padding: 0.5rem;
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  width: 200px;
  height: 500px;
  border-radius: 10px;
  text-align: center;
}

.infoBox img {
  width: 100%;
  height: auto;
}

.infoBox p {
  font-size: var(--font-klein);
  line-height: 1;
  font-weight: 600;
  color: var(--schrift-schwarz);
  margin: 0 0 1rem;
  color: #000000;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ===================================================================
   ♿ ACCESSIBILITY & PERFORMANCE OPTIMIERUNGEN
   =================================================================== */

/* 🎯 FOCUS MANAGEMENT - WCAG AA */
*:focus {
  outline: 2px solid var(--calc-primary);
  outline-offset: 2px;
  border-radius: var(--calc-radius-sm);
}

/* 🎯 KEYBOARD NAVIGATION */
.btn:focus,
button:focus,
input:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  transform: var(--calc-gpu-layer);
}

/* 🎭 REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  button[type="submit"]:not(:hover):not(:focus) {
    animation: none;
  }
}

/* 🎨 HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
  .threeDLayout * {
    border-width: 2px !important;
  }
  
  button,
  input,
  select,
  .btn {
    border-width: 3px !important;
  }
}

/* 🎨 DARK MODE SUPPORT */
@media (prefers-color-scheme: dark) {
  :root {
    --calc-background: #1a1a1a;
    --calc-surface: #2a2a2a;
    --calc-surface-elevated: #333333;
    --calc-text-primary: #ffffff;
    --calc-text-secondary: #cccccc;
    --calc-border-light: #404040;
    --calc-border-medium: #555555;
  }
}

/* 📱 TOUCH DEVICE OPTIMIERUNGEN */
@media (hover: none) and (pointer: coarse) {
  /* Touch-spezifische Hover-Deaktivierung */
  .titleSection:hover,
  .slideshowSection:hover,
  .uploaderHintsSection:hover,
  .modelPreviewSection:hover,
  .druckSettingsSection:hover {
    transform: none;
    box-shadow: var(--calc-shadow-sm);
  }
  
  /* Touch-Button Optimierungen */
  button,
  .btn,
  .individualOfferBtn {
    min-height: var(--calc-touch-comfortable);
    min-width: var(--calc-touch-comfortable);
    padding: var(--calc-space-md);
    margin: var(--calc-space-xs) 0;
  }
  
  /* 3D-Viewer Touch-Kontrollen */
  #viewerContainer {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
}

/* 🚀 PERFORMANCE OPTIMIERUNGEN + CONTENT-WINDOW SAFETY */
.threeDLayout {
  contain: var(--calc-contain-layout);
  content-visibility: auto;
  contain-intrinsic-size: auto 100vh;
}

/* 📊 KRITISCHER CONTENT-WINDOW CONSTRAINT */
.threeDLayout > * {
  /* Stelle sicher dass alle Grid-Areas innerhalb der Grenzen bleiben */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#viewerContainer {
  contain: var(--calc-contain-strict);
  content-visibility: auto;
  transform: var(--calc-gpu-layer);
  backface-visibility: hidden;
  height: 100%;
}

/* ===================================================================
   📋 AUFTRAGSLISTE SECTION - WARENKORB ÜBERSICHT
   =================================================================== */

.auftragsListeSection {
  /* 🎯 EXAKTE GRID-AREA ZUWEISUNG */
  grid-area: cartlist;
  
  /* 🎨 BEWÄHRTE CONTAINER-EIGENSCHAFTEN */
  border-radius: 4px;
  padding: 1rem;
  min-height: 300px;
  height: 100%; /* Füllt die gesamte 4. Zeile */
  overflow-y: auto;
  width: 100%;
  
  /* 📐 LAYOUT */
  display: flex;
  flex-direction: column;
  gap: var(--calc-space-md);
  
  /* ✨ MODERNE ENHANCEMENTS */
  background: var(--calc-surface-elevated);
  border: 1px solid var(--calc-border-light);
  box-shadow: var(--calc-shadow-sm);
  transition: all var(--calc-transition-base);
  contain: layout size;
}

.auftragsListeSection:hover {
  box-shadow: var(--calc-shadow-md);
  transform: translateY(-2px) var(--calc-gpu-layer);
}

.auftragsListeSection h3 {
  font-family: var(--font-family-heading, 'Inter', sans-serif);
  font-size: var(--calc-text-lg);
  font-weight: 600;
  color: var(--calc-primary);
  margin: 0 0 var(--calc-space-md) 0;
  
  /* 📍 MODERN ACCENT */
  position: relative;
  padding-bottom: var(--calc-space-sm);
}

.auftragsListeSection h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--calc-primary), var(--calc-secondary));
  border-radius: 2px;
}

/* 🔧 UNIVERSAL CONTENT-WINDOW CONSTRAINT - VERHINDERT ABSCHNEIDEN */
.threeDLayout .titleSection,
.threeDLayout .slideshowSection,
.threeDLayout .uploaderHintsSection,
.threeDLayout .modelPreviewSection,
.threeDLayout .materialPreviewSection,
.threeDLayout .druckSettingsSection,
.threeDLayout .auftragsListeSection {
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Verhindert Overflow */
  box-sizing: border-box;
  flex-shrink: 1;
}

/* GPU-Beschleunigung für interaktive Elemente */
button,
.btn,
.individualOfferBtn,
input[type="range"]::-webkit-slider-thumb {
  will-change: transform;
  transform: var(--calc-gpu-layer);
}

/* 📱 CONTAINER QUERIES SUPPORT (Moderne Browser) */
@supports (container-type: inline-size) {
  .threeDLayout {
    container-type: inline-size;
  }
  
  @container (min-width: 768px) {
    .druckSettingsSection {
      flex-direction: row;
    }
  }
  
  @container (min-width: 1024px) {
    #postCalcButtons {
      flex-direction: row;
    }
  }
}

/* ===================================================================
   🔧 UTILITY CLASSES
   =================================================================== */

/* 📱 RESPONSIVE UTILITIES */
.mobile-only { display: block; }
.tablet-only { display: none; }
.desktop-only { display: none; }

@media (min-width: 768px) {
  .mobile-only { display: none; }
  .tablet-only { display: block; }
}

@media (min-width: 1200px) {
  .tablet-only { display: none; }
  .desktop-only { display: block; }
}

/* 🎨 TEXT UTILITIES */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--calc-primary); }
.text-secondary { color: var(--calc-text-secondary); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* 📐 SPACING UTILITIES */
.m-0 { margin: 0; }
.mt-sm { margin-top: var(--calc-space-sm); }
.mt-md { margin-top: var(--calc-space-md); }
.mt-lg { margin-top: var(--calc-space-lg); }
.mb-sm { margin-bottom: var(--calc-space-sm); }
.mb-md { margin-bottom: var(--calc-space-md); }
.mb-lg { margin-bottom: var(--calc-space-lg); }

/* 👁️ VISIBILITY UTILITIES */
.hidden { display: none; }
.visible { display: block; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 🎯 INTERACTIVE STATES */
.loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* 🚀 PERFORMANCE HINTS */
.gpu-accelerated {
  transform: var(--calc-gpu-layer);
  will-change: transform;
}

.smooth-scroll {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .smooth-scroll {
    scroll-behavior: auto;
  }

/* ===================================================================
   📝 MODERNES CONTENT-PAGE FORMULAR-DESIGN - druckRequest SPEZIFISCH
   Vollständig responsives Design mit G3DF-Branding
   Separater Bereich ohne Interferenz mit 3D-Calculator
   =================================================================== */

/* ===================================================================
   🏠 CONTENT-PAGE CONTAINER-DESIGN - Moderne Card-basierte Architektur
   =================================================================== */

/* Content-Window Schwarz-Weiß */
.content-window {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--color-background, #ffffff);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-primary, #000000);
  
  /* 🚀 PERFORMANCE OPTIMIERUNGEN */
  contain: layout style paint;
  transform: translateZ(0);
  will-change: auto;
  
  /* 📱 RESPONSIVE BASE */
  width: calc(100% - 2rem);
  box-sizing: border-box;
}

.content-window h1,
.content-window h2 {
  color: var(--color-primary, #000000);
  margin-bottom: 2rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  font-family: var(--font-family-heading, 'Inter', -apple-system, sans-serif);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.content-window h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
}

.content-window h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.content-window h1::after,
.content-window h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--color-primary, #000000); /* Schwarze Linie unter Titel */
  border-radius: 2px;
}

/* ===================================================================
   📝 MODERNE INPUT-FELDER FÜR CONTENT-PAGE - Touch-optimiert
   =================================================================== */

.content-window input[type="text"],
.content-window input[type="email"],
.content-window input[type="number"],
.content-window textarea,
.content-window select {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 1.5rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  
  /* 📱 MOBILE OPTIMIERUNGEN */
  min-height: 48px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.content-window textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.content-window input:focus,
.content-window textarea:focus,
.content-window select:focus {
  outline: none;
  border-color: var(--color-primary, #000000);
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.02),
    0 0 0 4px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.content-window input::placeholder,
.content-window textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* ===================================================================
   📁 FILE-UPLOAD MODERNES DESIGN - G3DF Branding
   =================================================================== */

.content-window .btn-dr,
.content-window label[for="3dFile"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--color-primary, #000000) 0%, #333333 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  min-height: 56px;
  
  /* 📱 TOUCH OPTIMIERUNGEN */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  user-select: none;
}

.content-window .btn-dr:hover,
.content-window label[for="3dFile"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #333333 0%, var(--color-secondary, #333333) 100%);
}

.content-window .btn-dr:active,
.content-window label[for="3dFile"]:active {
  transform: translateY(-1px);
}

.content-window .btn-dr::before,
.content-window label[for="3dFile"]::before {
  content: '📁';
  font-size: 1.2rem;
  margin-right: 0.5rem;
}

/* Hidden File Input */
.content-window input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   ⚙️ DRUCKPARAMETER MODERNES DESIGN - Card-basiert
   =================================================================== */

.content-window .druckParameter {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.content-window .druckParameter:hover {
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.02),
    0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.content-window .druckParameter::before {
  content: '⚙️ Druckparameter';
  position: absolute;
  top: -12px;
  left: 20px;
  background: white;
  padding: 0 10px;
  font-weight: 600;
  color: var(--color-primary, #000000);
  font-size: 0.9rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Druckparameter Layout */
.content-window .druckParameter .parameter-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.content-window .druckParameter label {
  font-weight: 600;
  color: var(--color-primary, #000000);
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.9rem;
  min-width: 120px;
}

/* ===================================================================
   🎚️ RANGE SLIDER MODERNES DESIGN - Touch-optimiert
   =================================================================== */

.content-window input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e1e5e9;
  outline: none;
  margin: 1rem 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.content-window input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #000000), var(--color-secondary, #333333));
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  border: 2px solid white;
}

.content-window input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.content-window input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #000000), var(--color-secondary, #333333));
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid white;
  transition: all 0.3s ease;
}

.content-window input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
}

/* Range Slider Track Styling */
.content-window input[type="range"]::-webkit-slider-track {
  height: 6px;
  border-radius: 3px;
  background: #e1e5e9;
}

.content-window input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #e1e5e9;
  border: none;
}

/* ===================================================================
   📋 SELECT-DROPDOWN MODERNES DESIGN - Custom Styling
   =================================================================== */

.content-window select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}

.content-window select:hover {
  border-color: var(--color-primary, #000000);
  background-color: rgba(255, 255, 255, 1);
}

.content-window select option {
  padding: 0.75rem;
  background: white;
  color: #374151;
}

/* ===================================================================
   🚀 SUBMIT-BUTTON HERO-DESIGN - Call-to-Action
   =================================================================== */

.content-window button[type="submit"],
.content-window input[type="submit"] {
  width: 100%;
  padding: 1.25rem 2rem;
  background: linear-gradient(135deg, #2c3e50 0%, var(--color-primary, #000000) 50%, #34495e 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  min-height: 64px;
  
  /* 📱 TOUCH OPTIMIERUNGEN */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  user-select: none;
}

.content-window button[type="submit"]:hover,
.content-window input[type="submit"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, var(--color-primary, #000000) 0%, #2c3e50 50%, var(--color-secondary, #333333) 100%);
}

.content-window button[type="submit"]:active,
.content-window input[type="submit"]:active {
  transform: translateY(-2px);
}

.content-window button[type="submit"]::before,
.content-window input[type="submit"]::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.6s;
}

.content-window button[type="submit"]:hover::before,
.content-window input[type="submit"]:hover::before {
  left: 100%;
}

/* ===================================================================
   📱 MOBILE-RESPONSIVE FÜR CONTENT-PAGE - Touch-First Design
   =================================================================== */

@media (max-width: 950px) {
  .content-window {
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 12px;
    max-width: none;
    width: calc(100% - 2rem);
  }
  
  .content-window h1,
  .content-window h2 {
    margin-bottom: 1.5rem;
  }
  
  .content-window input,
  .content-window textarea,
  .content-window select {
    font-size: 16px; /* iOS Zoom Prevention */
    padding: 1rem;
    margin-bottom: 1.25rem;
    min-height: 44px; /* WCAG Touch Target */
  }
  
  .content-window textarea {
    min-height: 100px;
  }
  
  .content-window .btn-dr,
  .content-window label[for="3dFile"] {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    justify-content: center;
    min-height: 56px;
  }
  
  .content-window .druckParameter {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  
  .content-window .druckParameter .parameter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .content-window .druckParameter label {
    min-width: auto;
    margin-bottom: 0.25rem;
  }
  
  .content-window button[type="submit"],
  .content-window input[type="submit"] {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    min-height: 56px;
  }
}

/* ===================================================================
   📱 EXTRA SMALL DEVICES - Ultra-kompakt (bis 480px)
   =================================================================== */

@media (max-width: 480px) {
  .content-window {
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 8px;
  }
  
  .content-window h1::after,
  .content-window h2::after {
    width: 40px;
    height: 2px;
  }
  
  .content-window .druckParameter {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .content-window .druckParameter::before {
    font-size: 0.8rem;
    top: -10px;
    left: 15px;
    padding: 0 8px;
  }
  
  .content-window input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }
  
  .content-window input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}

/* ===================================================================
   ♿ ACCESSIBILITY ENHANCEMENTS - WCAG AA/AAA Konform
   =================================================================== */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .content-window {
    border: 3px solid;
    box-shadow: none;
  }
  
  .content-window input,
  .content-window textarea,
  .content-window select {
    border-width: 3px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .content-window,
  .content-window *,
  .content-window *::before,
  .content-window *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .content-window button[type="submit"]:hover,
  .content-window input[type="submit"]:hover,
  .content-window .btn-dr:hover,
  .content-window label[for="3dFile"]:hover {
    transform: none !important;
  }
}

/* Focus Visible Support */
.content-window *:focus-visible {
  outline: 3px solid var(--color-primary, #000000);
  outline-offset: 2px;
}

/* ===================================================================
   🎨 FORMULAR-SPEZIFISCHE ENHANCEMENTS - druckRequest Optimierungen
   =================================================================== */

/* Formular Gruppen */
.content-window .form-group {
  margin-bottom: 2rem;
  position: relative;
}

.content-window .form-group label {
  display: block;
  font-weight: 600;
  color: var(--color-primary, #000000);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.content-window .form-group label.required::after {
  content: ' *';
  color: #ef4444;
  font-weight: 700;
}

/* Error States */
.content-window input.error,
.content-window textarea.error,
.content-window select.error {
  border-color: #ef4444;
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.02),
    0 0 0 4px rgba(239, 68, 68, 0.1);
}

.content-window .error-message {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.content-window .error-message::before {
  content: '⚠️';
  font-size: 0.75rem;
}

/* Success States */
.content-window input.success,
.content-window textarea.success,
.content-window select.success {
  border-color: #10b981;
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.02),
    0 0 0 4px rgba(16, 185, 129, 0.1);
}

/* Loading States */
.content-window button[type="submit"].loading,
.content-window input[type="submit"].loading {
  cursor: not-allowed;
  opacity: 0.7;
  position: relative;
}

.content-window button[type="submit"].loading::after,
.content-window input[type="submit"].loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: contentSpinAnimation 1s linear infinite;
}

@keyframes contentSpinAnimation {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===================================================================
   🔧 CONTENT-WINDOW UTILITY CLASSES - Reusable Components
   =================================================================== */

.content-window .text-center {
  text-align: center;
}

.content-window .text-left {
  text-align: left;
}

.content-window .text-right {
  text-align: right;
}

.content-window .mb-0 { margin-bottom: 0; }
.content-window .mb-1 { margin-bottom: 0.5rem; }
.content-window .mb-2 { margin-bottom: 1rem; }
.content-window .mb-3 { margin-bottom: 1.5rem; }
.content-window .mb-4 { margin-bottom: 2rem; }

.content-window .mt-0 { margin-top: 0; }
.content-window .mt-1 { margin-top: 0.5rem; }
.content-window .mt-2 { margin-top: 1rem; }
.content-window .mt-3 { margin-top: 1.5rem; }
.content-window .mt-4 { margin-top: 2rem; }

/* Flexbox Utilities */
.content-window .flex {
  display: flex;
}

.content-window .flex-col {
  flex-direction: column;
}

.content-window .flex-row {
  flex-direction: row;
}

.content-window .items-center {
  align-items: center;
}

.content-window .justify-center {
  justify-content: center;
}

.content-window .justify-between {
  justify-content: space-between;
}

.content-window .gap-1 { gap: 0.5rem; }
.content-window .gap-2 { gap: 1rem; }
.content-window .gap-3 { gap: 1.5rem; }

/* ===================================================================
   🎯 PRINT STYLES - Druckoptimierung für Content-Window
   =================================================================== */

@media print {
  .content-window {
    box-shadow: none;
    border: 1px solid #000;
    margin: 0;
    padding: 1rem;
    max-width: none;
    background: white;
  }
  
  .content-window button,
  .content-window input[type="submit"],
  .content-window .btn-dr,
  .content-window label[for="3dFile"] {
    display: none;
  }
  
  .content-window input,
  .content-window textarea,
  .content-window select {
    border: 1px solid #000;
    background: white;
    box-shadow: none;
  }
}

/* END CONTENT-PAGE FORMULAR-DESIGN */
}


/* ===================================================================
   🖨️ DRUCKREQUEST FORMULAR - MODERNE STYLES
   Spezifische Form-Styles mit G3DF-Branding und Touch-Optimierung
   =================================================================== */

/* DruckRequest Modernes Graustufen-Design */
#druckRequestForm {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}

#druckRequestForm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6c757d, #495057, #6c757d);
  border-radius: 12px 12px 0 0;
}

/* DruckRequest Input modernes Grau */
#druckRequestForm input[type="text"],
#druckRequestForm input[type="email"],
#druckRequestForm input[type="number"],
#druckRequestForm textarea,
#druckRequestForm select {
  width: 100%;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  color: #212529;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

#druckRequestForm input::placeholder,
#druckRequestForm textarea::placeholder {
  color: #adb5bd;
}

#druckRequestForm input:focus,
#druckRequestForm textarea:focus,
#druckRequestForm select:focus {
  outline: none;
  border-color: #6c757d;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 3px rgba(108, 117, 125, 0.15);
  background: #ffffff;
  transform: translateY(-1px);
}

#druckRequestForm input:hover,
#druckRequestForm textarea:hover,
#druckRequestForm select:hover {
  border-color: #adb5bd;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

#druckRequestForm textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

/* Labels moderne Typography */
#druckRequestForm label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #495057;
  font-size: 0.95rem;
  font-family: 'Montserrat', sans-serif;
}

#druckRequestForm label:not([for="3dFile"]) {
  position: relative;
}

#druckRequestForm label[for="druckTitle"]::before,
#druckRequestForm label[for="druckDescription"]::before,
#druckRequestForm label[for="druckEmail"]::before {
  content: '*';
  color: #6c757d;
  font-weight: 700;
  margin-right: 0.25rem;
}

/* DruckRequest File-Upload modern */
#druckRequestForm label[for="3dFile"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #000000 100%);
  color: #ffffff;
  border: 2px solid #495057;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 1rem 0 2rem 0;
  box-shadow: 0 4px 12px rgba(73, 80, 87, 0.25);
  position: relative;
  overflow: hidden;
  min-height: 56px;
}

#druckRequestForm label[for="3dFile"]:hover {
  background: linear-gradient(135deg, #000000 0%, #feffff 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(73, 80, 87, 0.35);
  border-color: #6c757d;
}

#druckRequestForm label[for="3dFile"]::before {
  content: '📁';
  font-size: 1.5rem;
}

#druckRequestForm label[for="3dFile"]::after {
  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.6s;
}

#druckRequestForm label[for="3dFile"]:hover::after {
  left: 100%;
}

/* DruckParameter moderne Graustufen */
#druckRequestForm .druckParameter {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

#druckRequestForm .druckParameter::before {
  content: '⚙️ Druckparameter';
  position: absolute;
  top: -12px;
  left: 20px;
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0 12px;
  font-weight: 700;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#druckRequestForm .druckParameter label {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

#druckRequestForm .druckParameter select {
  margin-bottom: 1.25rem;
}

/* Range-Slider moderne Graustufen */
#druckRequestForm input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #e9ecef 0%, #dee2e6 100%);
  outline: none;
  margin: 1.5rem 0;
  -webkit-appearance: none;
  position: relative;
}

#druckRequestForm input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #495057, #6c757d);
  border: none;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(73, 80, 87, 0.3),
    0 0 0 2px #ffffff;
  transition: all 0.3s ease;
}

#druckRequestForm input[type="range"]::-webkit-slider-thumb:hover {
  background: linear-gradient(135deg, #6c757d, #868e96);
  box-shadow:
    0 4px 12px rgba(73, 80, 87, 0.4),
    0 0 0 3px #ffffff;
  transform: scale(1.1);
}

#druckRequestForm input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #495057, #6c757d);
  border: none;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(73, 80, 87, 0.3),
    0 0 0 2px #ffffff;
}

/* Submit-Button modernes Grau */
#druckRequestForm button[type="submit"],
#druckRequestForm input[type="submit"] {
  width: 100%;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #495057 0%, #000000 50%, #495057 100%);
  color: #ffffff;
  border: 2px solid #495057;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(73, 80, 87, 0.25);
  min-height: 64px;
}

#druckRequestForm button[type="submit"]:hover {
  background: linear-gradient(135deg, #000000 0%, #959697 50%, #3e3e3f 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(73, 80, 87, 0.35);
  border-color: #6c757d;
}

#druckRequestForm button[type="submit"]::before {
  content: '🚀';
  margin-right: 0.75rem;
  font-size: 1.2rem;
}

#druckRequestForm button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}

#druckRequestForm button[type="submit"]:hover::after {
  left: 100%;
}

/* Mobile-Responsive DruckRequest */
@media (max-width: 950px) {
  #druckRequestForm {
    margin: 1rem 0;
    padding: 1.5rem;
    border-radius: 12px;
  }
  
  #druckRequestForm input,
  #druckRequestForm textarea,
  #druckRequestForm select {
    font-size: 16px; /* iOS Zoom Prevention */
    padding: 1rem;
    margin-bottom: 1.25rem;
  }
  
  #druckRequestForm label[for="3dFile"] {
    padding: 1rem 2rem;
    font-size: 1rem;
    min-height: 48px;
  }
  
  #druckRequestForm .druckParameter {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  
  #druckRequestForm button[type="submit"] {
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
    min-height: 56px;
  }
}

@media (max-width: 480px) {
  #druckRequestForm {
    padding: 1rem;
  }
  
  #druckRequestForm label[for="3dFile"] {
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* Hidden File Input */
#druckRequestForm input[type="file"] {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* File Upload Feedback */
#druckRequestForm .file-feedback {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid rgba(39, 174, 96, 0.3);
  border-radius: 8px;
  color: #27ae60;
  font-size: 0.9rem;
  display: none;
}

#druckRequestForm .file-feedback.show {
  display: block;
}

#druckRequestForm .file-feedback.error {
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

/* Form Validation Styles */
#druckRequestForm .field-error {
  border-color: #e74c3c !important;
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.02),
    0 0 0 4px rgba(231, 76, 60, 0.1) !important;
}

#druckRequestForm .error-message {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-weight: 500;
  display: none;
}

#druckRequestForm .error-message.show {
  display: block;
}

/* Loading State für Submit Button */
#druckRequestForm button[type="submit"].loading {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#druckRequestForm button[type="submit"].loading::before {
  content: '⏳';
  animation: spin 1s linear infinite;
}

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

/* Success State */
#druckRequestForm.success {
  border-color: #28a745;
  background: linear-gradient(135deg, #ffffff 0%, rgba(40, 167, 69, 0.05) 100%);
}

#druckRequestForm.success::before {
  background: linear-gradient(90deg, #28a745, #20c997, #28a745);
}

/* ===================================================================
   🎨 CONTENT-WINDOW MODERNE GRAUSTUFEN-INTEGRATION
   =================================================================== */

/* Content-Window moderne Graustufen */
.content-window {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #dee2e6;
  /* border-radius: 16px; */
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.08),
    0 2px 5px rgba(0, 0, 0, 0.02);
}

.content-window h1,
.content-window h2 {
  color: #495057;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.content-window h1::after {
  background: linear-gradient(90deg, #6c757d, #495057, #6c757d);
}

/* ===================================================================
   ✨ ZUSÄTZLICHE MODERNE EFFEKTE - ENHANCED UX
   =================================================================== */

/* Moderne Hover-Effekte */
#druckRequestForm input:hover:not(:focus),
#druckRequestForm textarea:hover:not(:focus),
#druckRequestForm select:hover:not(:focus) {
  border-color: #adb5bd;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

/* Focus-within für bessere UX */
#druckRequestForm .druckParameter:focus-within {
  border-color: #6c757d;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.1);
}

/* Moderne Placeholder Animation */
#druckRequestForm input:focus::placeholder,
#druckRequestForm textarea:focus::placeholder {
  transform: translateY(-2px);
  opacity: 0.7;
  transition: all 0.3s ease;
}

/* Enhanced File Upload States */
#druckRequestForm label[for="3dFile"]:active {
  transform: translateY(-1px) scale(0.98);
}

#druckRequestForm label[for="3dFile"].file-selected {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-color: #28a745;
}

#druckRequestForm label[for="3dFile"].file-selected::before {
  content: '✓';
}

/* Progressive Enhancement für moderne Browser */
@supports (backdrop-filter: blur(10px)) {
  #druckRequestForm::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(248, 249, 250, 0.1));
    border-radius: 13px;
    backdrop-filter: blur(10px);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  #druckRequestForm:hover::after {
    opacity: 1;
  }
}

/* Micro-Interactions für bessere UX */
#druckRequestForm input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

#druckRequestForm input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.2);
}

/* Enhanced Loading Animation */
#druckRequestForm.loading {
  pointer-events: none;
  opacity: 0.8;
}

#druckRequestForm.loading::before {
  animation-duration: 2s;
}

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

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  #druckRequestForm {
    border: 3px solid #000000;
    background: #ffffff;
  }
  
  #druckRequestForm input,
  #druckRequestForm textarea,
  #druckRequestForm select {
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
  }
  
  #druckRequestForm button[type="submit"] {
    background: #000000;
    color: #ffffff;
    border: 3px solid #000000;
  }
}


/* ===================================================================
   🎯 MODERNE SERVICE-PAGE DESIGN - GRAUSTUFEN-STYLING
   Vollständiges Service-Design mit responsivem Layout
   =================================================================== */

/* 🏗️ SERVICE-PAGE HAUPTCONTAINER */
.skills-page,
.service-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  min-height: 100vh;
  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.skills-page h1,
.service-page h1 {
  color: #495057;
  text-align: center;
  margin-bottom: 3rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  position: relative;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.skills-page h1::after,
.service-page h1::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #6c757d, #495057, #6c757d);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(73, 80, 87, 0.2);
}

/* 🧭 SERVICE-NAVIGATION MODERNISIERT */
.skill-selector {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  padding: 0;
}

.skill-button {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 1rem 2rem;
  color: #495057;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.skill-button:hover,
.skill-button.active {
  background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(73, 80, 87, 0.25);
  border-color: #495057;
}

.skill-button::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.6s;
  z-index: 0;
}

.skill-button:hover::before {
  left: 100%;
}

.skill-button span {
  position: relative;
  z-index: 1;
}

/* 🎴 SERVICE-CARDS DESIGN */
.service-card,
.druck-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.service-card:hover,
.druck-section:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  border-color: #dee2e6;
}

.service-card::before,
.druck-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6c757d, #495057, #6c757d);
  border-radius: 12px 12px 0 0;
}

/* 📋 SERVICE-DETAIL-BEREICHE */
.skill-detail {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 3rem;
  margin: 2rem 0;
  border: 1px solid #e9ecef;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.skill-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #6c757d, #495057, #6c757d);
}

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

.skill-images img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.skill-images img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: #6c757d;
}

.skill-text {
  color: #495057;
  line-height: 1.7;
  font-size: 1.1rem;
}

.skill-text h2,
.skill-text h3 {
  color: #495057;
  margin: 2rem 0 1rem 0;
  font-weight: 600;
  position: relative;
  padding-left: 1rem;
}

.skill-text h2::before,
.skill-text h3::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #6c757d, #495057);
  border-radius: 2px;
}


/* 🔄 VERGLEICHS-CONTAINER FÜR DRUCKVERFAHREN */
.druck-vergleich-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.druck-section.fdm {
  border-left: 4px solid #6c757d;
  position: relative;
}

.druck-section.fdm::after {
  content: 'FDM';
  position: absolute;
  top: -10px;
  left: -2px;
  background: #6c757d;
  color: white;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0 4px 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.druck-section.resin {
  border-left: 4px solid #495057;
  position: relative;
}

.druck-section.resin::after {
  content: 'RESIN';
  position: absolute;
  top: -10px;
  left: -2px;
  background: #495057;
  color: white;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0 4px 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.druck-section h3 {
  color: #495057;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.druck-section h3::before {
  content: '🖨️';
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 50%;
  border: 1px solid #dee2e6;
}

.druck-section.resin h3::before {
  content: '⚗️';
}

/* 📝 SERVICE-LISTEN UND FEATURES */
.service-features,
.druck-section ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.service-features li,
.druck-section ul li {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: all 0.2s ease;
}

.service-features li:hover,
.druck-section ul li:hover {
  background: rgba(248, 249, 250, 0.5);
  padding-left: 0.5rem;
  border-radius: 4px;
}

.service-features li::before,
.druck-section ul li::before {
  content: '✓';
  color: #6c757d;
  font-weight: bold;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 50%;
  font-size: 0.8rem;
  border: 1px solid #dee2e6;
  flex-shrink: 0;
}

.service-features li:last-child,
.druck-section ul li:last-child {
  border-bottom: none;
}

/* 🎯 SERVICE-CTAS UND BUTTONS */
.service-cta,
.individualOfferBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
  color: #ffffff;
  padding: 1rem 2rem;
  border: 2px solid #495057;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 1.5rem;
  box-shadow: 0 4px 12px rgba(73, 80, 87, 0.2);
  cursor: pointer;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}

.service-cta:hover,
.individualOfferBtn:hover {
  background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(73, 80, 87, 0.3);
  border-color: #6c757d;
  color: #ffffff;
}

.service-cta::before {
  content: '→';
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.service-cta:hover::before {
  transform: translateX(4px);
}

.service-cta::after,
.individualOfferBtn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s;
}

.service-cta:hover::after,
.individualOfferBtn:hover::after {
  left: 100%;
}


/* 🎨 SPEZIELLE SERVICE-ICONS */
.service-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #495057, #6c757d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #ffffff;
  font-size: 1.8rem;
  box-shadow: 0 4px 12px rgba(73, 80, 87, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.service-icon:hover {
  transform: scale(1.1) rotateY(10deg);
  box-shadow: 0 8px 20px rgba(73, 80, 87, 0.4);
}

.service-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.service-icon:hover::before {
  opacity: 1;
  transform: rotate(45deg) translate(20px, 20px);
}

/* 🔤 SERVICE-ICON VARIANTEN */
.service-icon.design::after {
  content: '🎨';
}

.service-icon.print::after {
  content: '🖨️';
}

.service-icon.prototype::after {
  content: '⚙️';
}

.service-icon.consulting::after {
  content: '💡';
}

.service-icon.quality::after {
  content: '✨';
}

.service-icon.support::after {
  content: '🛠️';
}

/* ===================================================================
   📱 ERWEITERTE MOBILE SERVICE-OPTIMIERUNGEN - AUTHENTISCH & MODERN
   Basierend auf bestehenden Desktop-Styles, erweitert für Mobile
   =================================================================== */

/* 📱 MOBILE SERVICE-OPTIMIERUNGEN FÜR BESTEHENDE STYLES */
@media (max-width: 950px) {
  /* Erweitere bestehende .skills-page/.service-page */
  .skills-page,
  .service-page {
    padding: clamp(1rem, 3vw, 2rem);
    margin: 0 auto;
  }
  
  .skills-page h1,
  .service-page h1 {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
    margin-bottom: clamp(2rem, 5vw, 2.5rem);
  }
  
  /* Mobile-optimierte Service-Navigation */
  .skill-selector {
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem);
    padding: 0 1rem;
  }
  
  .skill-button {
    width: 100%;
    max-width: clamp(280px, 85vw, 320px);
    padding: clamp(0.875rem, 2.5vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    font-size: clamp(0.9rem, 2.2vw, 1rem);
    justify-content: center;
  }
  
  /* Service-Cards Mobile-Anpassungen */
  .service-card,
  .druck-section {
    padding: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    border-radius: clamp(8px, 2vw, 12px);
  }
  
  /* Druck-Vergleich Container */
  .druck-vergleich-container {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2rem);
    padding: 0 clamp(1rem, 2vw, 1.5rem);
  }
  
  /* Service-Details Mobile */
  .skill-detail {
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2rem);
    margin: clamp(1rem, 2vw, 2rem) 0;
    border-radius: clamp(12px, 3vw, 16px);
  }
  
  /* Image-Grid Mobile */
  .skill-images {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
  }
  
  .skill-images img {
    height: clamp(180px, 25vw, 220px);
    border-radius: clamp(6px, 1.5vw, 8px);
  }
  
  .service-icon {
    width: clamp(48px, 8vw, 64px);
    height: clamp(48px, 8vw, 64px);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
  }
  
  .skill-text {
    font-size: clamp(1rem, 2.2vw, 1.1rem);
  }
  
  .skill-text h2,
  .skill-text h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
  }
}

/* Kleine Mobile-Geräte */
@media (max-width: 600px) {
  .skills-page h1,
  .service-page h1 {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
    margin-bottom: clamp(2rem, 5vw, 2.5rem);
  }
  
  .skill-button {
    min-height: clamp(48px, 6vw, 52px);
    padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.25rem, 3vw, 1.5rem);
  }
  
  .service-cta,
  .individualOfferBtn {
    width: 100%;
    padding: clamp(0.875rem, 2.5vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    font-size: clamp(0.9rem, 2.2vw, 1rem);
    justify-content: center;
  }
  
  .druck-section h3 {
    font-size: clamp(1.2rem, 3.5vw, 1.4rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .service-features li,
  .druck-section ul li {
    padding: clamp(0.625rem, 1.5vw, 0.75rem) 0;
    font-size: clamp(0.9rem, 2.2vw, 1rem);
  }
  
  .skill-detail {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 2.5vw, 1.5rem);
  }
  
  .service-card,
  .druck-section {
    padding: clamp(1.25rem, 3vw, 1.5rem);
  }
  
  .druck-vergleich-container {
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  
  .skill-images img {
    height: clamp(160px, 22vw, 180px);
  }
  
  .service-icon {
    width: clamp(48px, 7vw, 56px);
    height: clamp(48px, 7vw, 56px);
    font-size: clamp(1.3rem, 2.8vw, 1.5rem);
  }
}

/* Touch-Optimierungen */
@media (hover: none) and (pointer: coarse) {
  .skill-button {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .service-cta,
  .individualOfferBtn {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .skill-images img:hover {
    transform: none; /* Deaktiviere Hover auf Touch */
  }
  
  .service-card:hover,
  .druck-section:hover {
    transform: none; /* Deaktiviere Hover auf Touch */
  }
}

/* Performance-Optimierungen für Mobile */
@media (max-width: 950px) {
  .skill-button::before,
  .service-card::before,
  .druck-section::before {
    will-change: transform;
    backface-visibility: hidden;
  }
}

/* Orientation-spezifische Anpassungen */
@media (orientation: landscape) and (max-height: 500px) {
  .skills-page,
  .service-page {
    padding: 1rem clamp(2rem, 5vw, 4rem);
  }
  
  .skill-selector {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .skill-button {
    width: auto;
    min-width: clamp(120px, 20vw, 160px);
  }
}

/* High-DPI Display Optimierungen */
@media (min-resolution: 2dppx) {
  .service-icon {
    box-shadow: 0 2px 6px rgba(73, 80, 87, 0.15);
  }
  
  .service-card,
  .druck-section {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
}


/* ===================================================================
   📱 ERWEITERTE MOBILE-FEATURES FÜR SERVICE-PAGE
   =================================================================== */

/* Service-Page Mobile-Header */
.service-mobile-header {
  display: none;
}

@media (max-width: 950px) {
  .service-mobile-header {
    display: block;
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
    z-index: 10;
  }
}

/* Mobile Service-Navigation Scrollbar */
@media (max-width: 950px) {
  .skill-selector {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.5rem;
  }
  
  .skill-selector::-webkit-scrollbar {
    display: none;
  }
}

/* Service-Cards Stack-Animation für Mobile */
@media (max-width: 950px) {
  .service-card,
  .druck-section {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
  }
  
  .service-card:nth-child(1) { animation-delay: 0.1s; }
  .service-card:nth-child(2) { animation-delay: 0.2s; }
  .service-card:nth-child(3) { animation-delay: 0.3s; }
}

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

/* 🔧 ERWEITERTE SERVICE-KOMPONENTEN */

/* Service-Kategorie Header */
.service-category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border-left: 4px solid #495057;
}

.service-category-header .service-icon {
  margin: 0;
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
}

.service-category-header h2 {
  margin: 0;
  color: #495057;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Service-Preis-Boxen */
.service-price-box {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-price-box:hover {
  border-color: #6c757d;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-price-box .price {
  font-size: 2rem;
  font-weight: 700;
  color: #495057;
  margin-bottom: 0.5rem;
}

.service-price-box .price-description {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Service-Status Badges */
.service-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.service-status-badge.available {
  background: rgba(108, 117, 125, 0.1);
  color: #495057;
  border: 1px solid rgba(108, 117, 125, 0.3);
}

.service-status-badge.popular {
  background: rgba(73, 80, 87, 0.9);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(73, 80, 87, 0.3);
}

.service-status-badge.coming-soon {
  background: rgba(108, 117, 125, 0.05);
  color: #6c757d;
  border: 1px solid rgba(108, 117, 125, 0.2);
}

/* Service-Timeline */
.service-timeline {
  position: relative;
  padding-left: 2rem;
  margin: 2rem 0;
}

.service-timeline::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #6c757d, #495057);
}

.service-timeline-item {
  position: relative;
  margin-bottom: 2rem;
  padding-left: 2rem;
}

.service-timeline-item::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #495057;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #495057;
}

.service-timeline-item h4 {
  color: #495057;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.service-timeline-item p {
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
}

/* Service-Bewertungen */
.service-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.service-stars {
  display: flex;
  gap: 2px;
}

.service-star {
  width: 16px;
  height: 16px;
  color: #6c757d;
  font-size: 16px;
}

.service-star.filled {
  color: #495057;
}

.service-rating-text {
  color: #6c757d;
  font-size: 0.9rem;
}

/* Accessibility Enhancements für Service-Design */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .druck-section,
  .skill-button,
  .service-cta,
  .individualOfferBtn,
  .service-icon {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  
  .service-card:hover,
  .druck-section:hover,
  .skill-button:hover,
  .service-cta:hover,
  .individualOfferBtn:hover,
  .service-icon:hover {
    transform: none !important;
  }
}

/* High Contrast Mode Support für Services */
@media (prefers-contrast: high) {
  .skills-page,
  .service-page {
    background: #ffffff;
  }
  
  .service-card,
  .druck-section,
  .skill-detail {
    border: 2px solid #000000;
    background: #ffffff;
  }
  
  .skill-button {
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
  }
  
  .skill-button:hover,
  .skill-button.active {
    background: #000000;
    color: #ffffff;
  }
  
  .service-cta,
  .individualOfferBtn {
    background: #000000;
    color: #ffffff;
    border: 2px solid #000000;
  }
  
  .service-icon {
    background: #000000;
    color: #ffffff;
    border: 2px solid #000000;
  }
}

/* Focus-Styles für Barrierefreiheit */
.skill-button:focus,
.service-cta:focus,
.individualOfferBtn:focus {
  outline: 2px solid #495057;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(73, 80, 87, 0.1);
}

/* Print-Styles für Service-Seiten */
@media print {
  .skills-page,
  .service-page {
    background: white !important;
    color: black !important;
    padding: 1rem !important;
  }
  
  .service-card,
  .druck-section,
  .skill-detail {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  
  .skill-button,
  .service-cta,
  .individualOfferBtn {
    display: none !important;
  }
  
  .service-icon {
    background: #f0f0f0 !important;
    color: #333 !important;
  }
}

/* ===================================================================
   🎯 END OF MODERNE SERVICE-PAGE DESIGN
   Alle Service-Komponenten vollständig implementiert
   =================================================================== */


/* ===================================================================
   🏢 SERVICE-CONTENT-PAGE STYLES - BASIEREND AUF DESKTOP.CSS ANALYSE
   Bewährte Desktop.css Service-Patterns mit subtilen Modernisierungen
   =================================================================== */

/* 🎨 CSS CUSTOM PROPERTIES AUS DESKTOP.CSS ÜBERNOMMEN */
:root {
  /* Desktop.css Farbvariablen - Bewährte Branding-Konsistenz */
  --farbe-schwarz: #000000;
  --farbe-grau: #9b9999;
  --farbe-weiss: #ffffff;
  
  /* Desktop.css Schriftgrößen - Bewährte Typografie-Hierarchie */
  --font-klein: 1rem;
  --font-mittel: 1.4rem;
  --font-gross: 2.4rem;
  
  /* Desktop.css Font-Family - Bewährte Schrift-Stacks */
  --font-family-base: 'Montserrat', sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: 'Orbitron', sans-serif, "Times New Roman", Times, serif;
}

/* ===================================================================
   📋 SERVICE-SECTION DESIGN - BASIEREND AUF DESKTOP.CSS ZEILEN 2451-2500
   =================================================================== */

.service-section {
  /* 🎯 EXAKTE DESKTOP.CSS EIGENSCHAFTEN */
  background: var(--farbe-grau);
  color: var(--farbe-weiss);
  padding: 1.5rem;
  border-radius: 6px;
  margin-bottom: 2rem;
  border: 2px solid var(--farbe-schwarz);
  font-family: var(--font-family-base);
  
  /* ✨ SUBTILE MODERNISIERUNG */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.service-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.service-section h3 {
  font-size: var(--font-mittel);
  margin-bottom: 1rem;
  font-family: var(--font-family-heading);
  color: var(--farbe-weiss);
  
  /* 📱 RESPONSIVE TYPOGRAPHY */
  font-size: clamp(1.2rem, 3vw, var(--font-mittel));
}

.service-section ul {
  list-style-type: disc;
  padding-left: 2rem;
  margin: 1rem 0;
}

.service-section li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* ===================================================================
   🚀 CTA-BUTTON PATTERN AUS DESKTOP.CSS - ZEILEN 2471-2485
   =================================================================== */

.cta-button {
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  border: 2px solid var(--farbe-schwarz);
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-klein);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  margin-top: 1rem;
  
  /* ♿ ACCESSIBILITY ENHANCEMENT */
  min-height: 44px;
  cursor: pointer;
}

.cta-button:hover {
  background: var(--farbe-grau);
  border-color: var(--farbe-grau);
  color: var(--farbe-weiss);
}

.cta-button:focus {
  outline: 3px solid var(--farbe-grau);
  outline-offset: 2px;
}

/* ===================================================================
   🎯 SKILL-SYSTEM DESIGN - BASIEREND AUF DESKTOP.CSS ZEILEN 786-940
   =================================================================== */

/* ===================================================================
   🎯 DESKTOP LAYOUT KORREKTUREN - SKILL-SELECTOR HORIZONTAL (>950px)
   =================================================================== */

/* ===================================================================
   🎯 FUTURISTISCHE SKILL-BUTTONS MIT 3D-EFFEKTEN
   =================================================================== */

/* Futuristische Skill-Button Redesign */
.skill-selector {
  display: flex;
  width: 95%;
  margin: 0 auto 4rem;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 2rem 0;
}

.skill-button {
  aspect-ratio: 1 / 1;
  min-width: 220px;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  border: none;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}

.skill-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(102, 126, 234, 0.8) 0%,
    rgba(118, 75, 162, 0.8) 100%);
  z-index: 1;
  transition: all 0.4s ease;
}

.skill-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
  border-radius: 50%;
  z-index: 2;
}

.skill-button:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateY(-15px);
  box-shadow: var(--shadow-glow);
}

.skill-button:hover::before {
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 0.9) 0%,
    rgba(255, 107, 107, 0.9) 100%);
}

.skill-button:hover::after {
  width: 200%;
  height: 200%;
}

.skill-button span {
  position: relative;
  z-index: 3;
  color: white;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transform: translateZ(20px);
  transition: all 0.3s ease;
}

/* Spezifische Button-Stile mit modernen Overlays */
.skill-druck::before {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.8), rgba(0, 242, 254, 0.8));
}

.skill-modell::before {
  background: linear-gradient(135deg, rgba(240, 147, 251, 0.8), rgba(245, 87, 108, 0.8));
}

.skill-design::before {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.8), rgba(85, 98, 112, 0.8));
}

/* ===================================================================
   🎨 INTERAKTIVE SKILL-DETAIL SECTIONS MIT ANIMATIONEN
   =================================================================== */

/* Moderne Skill-Detail mit Animationen */
.skill-detail {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 30px;
  padding: 3rem;
  margin: 3rem auto;
  box-shadow: var(--shadow-card);
  max-width: 1200px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-direction: row;
}

.skill-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-tech);
  z-index: 1;
}

.skill-detail:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-5px);
}

.skill-detail.left {
  flex-direction: row;
}

.skill-detail.right {
  flex-direction: row-reverse;
}

.skill-detail .skill-image {
  flex: 0 0 45%;
  max-width: 450px;
  min-width: 300px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
}

.skill-detail .skill-image:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.skill-detail .skill-image img {
  width: 100%;
  height: auto;
  border: none;
  border-radius: 20px;
  object-fit: cover;
  min-height: 250px;
  filter: none;
  transition: all 0.4s ease;
}

.skill-detail .skill-image img:hover {
  filter: none;
  transform: scale(1.02);
}

.skill-detail .skill-text {
  flex: 1;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--farbe-schwarz);
}

.skill-detail .skill-text h3 {
  color: var(--farbe-schwarz);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.skill-detail .skill-text h3::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50px;
  height: 4px;
  background: var(--gradient-tech);
  border-radius: 2px;
  transition: width 0.4s ease;

/* ===================================================================
   🎯 FUTURISTISCHE CTA-BUTTONS MIT PULSE-EFFEKTEN
   =================================================================== */

/* Futuristische CTA-Buttons */
.cta-button {
  background: var(--gradient-tech);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 1rem 2.5rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-top: 2rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  
  /* ♿ ACCESSIBILITY ENHANCEMENT */
  min-height: 44px;
  cursor: pointer;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button::after {
  content: '→';
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.cta-button:hover::after {
  transform: translateX(5px);
}

/* ===================================================================
   📱 MODERNE MOBILE-RESPONSIVE OPTIMIERUNGEN
   =================================================================== */

/* Mobile-Optimierungen für modernes Design */
@media (max-width: 950px) {
  .skills-page,
  .service-page {
    padding: 2rem 1rem;
  }
  
  .service-hero {
    padding: 3rem 1rem;
  }
  
  .skill-selector {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .skill-button {
    width: 100%;
    max-width: 350px;
    min-height: 180px;
    aspect-ratio: 16 / 9;
  }
  
  .skill-button:hover {
    transform: translateY(-10px);
  }
  
  .skill-detail {
    padding: 2rem 1.5rem;
    margin: 2rem 1rem;
    border-radius: 20px;
    flex-direction: column !important;
  }
  
  .skill-detail.left,
  .skill-detail.right {
    flex-direction: column !important;
  }
  
  .skill-detail .skill-image {
    flex: none;
    max-width: 100%;
    min-width: auto;
    margin: 0 auto;
  }
  
  .skill-detail .skill-text {
    padding: 0;
    text-align: left;
  }
  
  .service-section {
    margin: 2rem 1rem;
    padding: 1.5rem;
    border-radius: 15px;
  }
}

@media (max-width: 600px) {
  .skill-button {
    min-height: 140px;
    border-radius: 15px;
  }
  
  .service-section {
    padding: 1.25rem;
  }
  
  .skill-detail {
    padding: 1.5rem 1rem;
  }
  
  /* Touch-Geräte: Reduzierte Animationen */
  .skill-button::after,
  .service-section::before {
    display: none;
  }
  
  .skill-button:hover {
    transform: translateY(-5px);
  }
}

/* ===================================================================
   ♿ PERFORMANCE-OPTIMIERUNGEN UND ACCESSIBILITY-FEATURES
   =================================================================== */

/* Performance-Optimierungen */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .skill-button:hover,
  .service-section:hover,
  .skill-detail:hover,
  .cta-button:hover {
    transform: none !important;
  }
  
  .service-hero h1 {
    animation: none !important;
  }
  
  .service-section h3::before {
    animation: none !important;
  }
  
  .service-section li::before {
    animation: none !important;
  }
  
  .cta-button.primary {
    animation: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .skills-page,
  .service-page {
    background: #ffffff;
    color: #000000;
  }
  
  .service-section {
    border: 3px solid #000000;
    background: #ffffff;
    color: #000000;
  }
  
  .skill-button {
    border: 3px solid #000000;
  }
  
  .skill-button::before {
    background: rgba(0, 0, 0, 0.8) !important;
  }
  
  .cta-button {
    background: #000000 !important;
    color: #ffffff !important;
    border: 3px solid #000000;
  }
}

/* Focus-visible Support für moderne Browser */
@supports selector(:focus-visible) {
  .skill-button:focus:not(:focus-visible),
  .cta-button:focus:not(:focus-visible) {
    outline: none;
  }
  
  .skill-button:focus-visible,
  .cta-button:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
  }
}

/* Touch-Optimierungen */
@media (hover: none) and (pointer: coarse) {
  .skill-button {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .cta-button {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .skill-button:hover {
    transform: none;
  }
  
  .service-section:hover {
    transform: none;
  }
}


.cta-button:focus {
  outline: 3px solid var(--farbe-grau);
  outline-offset: 2px;
}

/* Pulse-Animation für wichtige CTAs */
.cta-button.primary {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: var(--shadow-card); }
  50% { box-shadow: var(--shadow-glow); }
  100% { box-shadow: var(--shadow-card); }
}

}
/* =========================
   MODERNE SERVICE-PAGE HERO & GLASSMORPHISM STYLES
   Ergänzung für die vollständige Integration
   ========================= */

/* Hero Section */
.modern-hero-section {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/publicMedia/images/fdm_resin.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}

.hero-content {
    text-align: center;
    z-index: 2;
    max-width: 600px;
    padding: 2rem;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.scroll-indicator {
    font-size: 2rem;
    color: white;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Skills Navigation */
.skills-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.skill-card {
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.skill-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.skill-card p {
    color: #666;
    font-size: 0.9rem;
}

/* Skill Sections */
.skill-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.skill-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #333;
}

/* Content Pairs */
.content-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    align-items: center;
}

.layout-right {
    grid-template-columns: 1fr 1fr;
}

.layout-right .text-container {
    order: 1;
}

.layout-right .image-container {
    order: 2;
}

.image-container img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.text-container {
    padding: 2rem;
}

.text-container h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #333;
}

.text-container p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
}

/* Glassmorphism */
.glassmorphism-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Enhanced Glassmorphism Components */
.glass-hero-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-nav-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-nav-card:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-8px);
}

.glass-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.glass-section-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.glass-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
    z-index: 1;
    pointer-events: none;
}

/* Glass Feature Lists */
.glass-feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.glass-feature-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #555;
    font-size: 0.95rem;
}

.glass-feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

.glass-ideal-for {
    background: rgba(40, 167, 69, 0.1);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    border-left: 4px solid #28a745;
    font-size: 0.9rem;
}

.glass-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1rem;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.glass-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
    color: white;
    text-decoration: none;
}

/* Scroll Animations */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-element.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Scroll Enhancement */
.reveal-element.mobile-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .content-pair,
    .layout-right {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .layout-right .text-container,
    .layout-right .image-container {
        order: unset;
    }
    
    .skills-navigation {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
    }
    
    .skill-section {
        padding: 2rem 1rem;
    }
    
    .image-container img {
        height: 200px;
    }
    
    .reveal-element {
        transform: translateY(20px);
        transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
    
    .modern-hero-section {
        height: 70vh;
        min-height: 500px;
    }
    
    .hero-content {
        padding: 1.5rem;
    }
    
    .glass-card-icon {
        font-size: 2rem;
    }
    
    .skill-card {
        padding: 1.5rem;
    }
    
    .text-container {
        padding: 1.5rem;
    }
    
    .skill-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .skills-navigation {
        padding: 1rem 0.5rem;
        gap: 1rem;
    }
    
    .skill-section {
        padding: 1rem 0.5rem;
    }
    
    .skill-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .content-pair {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .text-container {
        padding: 1rem;
    }
    
    .text-container h3 {
        font-size: 1.4rem;
    }
    
    .text-container p {
        font-size: 1rem;
    }
    
    .modern-hero-section {
        height: 60vh;
        min-height: 400px;
    }
}

/* Enhanced Touch Interactions */
@media (hover: none) and (pointer: coarse) {
    .skill-card:hover {
        transform: none;
    }
    
    .skill-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .glass-cta-button:hover {
        transform: none;
    }
    
    .glass-cta-button:active {
        transform: scale(0.98);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .modern-hero-section,
    .reveal-element,
    .skill-card,
    .glass-nav-card,
    .glass-cta-button {
        transition: none !important;
        animation: none !important;
    }
    
    .scroll-indicator {
        animation: none !important;
    }
    
    .bounce {
        animation: none !important;
    }
}

/* High Contrast Mode für Accessibility */
@media (prefers-contrast: high) {
    .glassmorphism-card,
    .glass-hero-content,
    .glass-nav-card,
    .glass-section-content {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 2px solid #000000 !important;
        backdrop-filter: none !important;
    }
    
    .hero-title,
    .hero-subtitle {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    .skill-card h3,
    .text-container h3 {
        color: #000000 !important;
    }
    
    .skill-card p,
    .text-container p {
        color: #333333 !important;
    }
}

/* END MODERNE SERVICE-PAGE STYLES */

.skill-detail:hover .skill-text h3::after {
  width: 100px;
}

.skill-detail .skill-text p {
  color: rgba(0, 0, 0, 0.8);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.skill-button:hover span {
  transform: translateZ(30px) scale(1.1);
  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}

.skill-button:focus {
  outline: 3px solid var(--farbe-grau);
  outline-offset: 2px;
}

/* 🎨 SERVICE-SPEZIFISCHE HINTERGRUNDBILDER - DESKTOP.CSS PATTERN */
.skill-druck {
  background-image: url('/publicMedia/images/fdm_resin_blank.jpg');
}

.skill-modell {
  background-image: url('/publicMedia/images/product_model.jpg');
}

.skill-design {
  background-image: url('/publicMedia/images/prototyping.jpg');
}

/* ===================================================================
   📐 SKILL-DETAIL LAYOUT - DESKTOP.CSS ZEILEN 876-940
   =================================================================== */

/* ===================================================================
   🎯 DESKTOP LAYOUT KORREKTUREN - SKILL-DETAIL BILD-NEBEN-TEXT (>950px)
   =================================================================== */

.skill-detail {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
  align-items: flex-start; /* Oben ausrichten für bessere Textverteilung */
  font-family: var(--font-family-base);
  flex-direction: row; /* Explizit horizontal für Desktop */
}

.skill-detail.left {
  flex-direction: row; /* Bild links, Text rechts */
}

.skill-detail.right {
  flex-direction: row-reverse; /* Bild rechts, Text links */
}

.skill-detail .skill-image {
  flex: 0 0 45%; /* Feste Breite für Bilder */
  max-width: 450px;
  min-width: 300px;
}

.skill-detail .skill-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 2px solid var(--farbe-schwarz);
  object-fit: cover;
  min-height: 250px; /* Mindesthöhe für Konsistenz */
  
  /* ✨ SUBTILE MODERNISIERUNG */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.skill-detail .skill-image img:hover {
  transform: scale(1.02);
}

.skill-detail .skill-text {
  flex: 1; /* Nimmt restlichen Platz ein */
  padding: 0 1rem; /* Innenabstand für bessere Lesbarkeit */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--farbe-schwarz);
}

.skill-detail .skill-text h3 {
  font-size: var(--font-mittel);
  margin-bottom: 1rem;
  font-family: var(--font-family-heading);
  color: var(--farbe-schwarz);
}

.skill-detail .skill-text p {
  font-size: var(--font-klein);
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--farbe-schwarz);
}

/* ===================================================================
   🔘 BUTTON-SYSTEM AUS DESKTOP.CSS - ERWEITERT UND MODERNISIERT
   =================================================================== */

.btn {
  background: var(--farbe-weiss);
  color: var(--farbe-schwarz);
  border: 2px solid var(--farbe-schwarz);
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-klein);
  font-weight: 1000;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: var(--font-family-base);
  
  /* ♿ WCAG-KONFORME TOUCH-TARGETS */
  min-height: 44px;
  touch-action: manipulation;
}

.btn:hover {
  background: var(--farbe-grau);
  color: var(--farbe-weiss);
  border-color: var(--farbe-grau);
}

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

.btn-small {
  height: 2.5rem;
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  border-radius: 10px;
  padding: 0 1rem;
  font-size: 0.9rem;
  min-height: 44px;
}

.btn-small:hover {
  background: var(--farbe-grau);
  border-color: var(--farbe-grau);
}

/* 💰 PURCHASE-BUTTON SYSTEM */
.purchase-buttons .btn {
  width: 12rem;
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  margin: 0.5rem;
}

.purchase-buttons .btn:hover {
  background: var(--farbe-grau);
}

/* ===================================================================
   📱 MOBILE-RESPONSIVE ANPASSUNGEN - BASIEREND AUF DESKTOP.CSS PATTERNS
   =================================================================== */

/* ===================================================================
   📱 MOBILE LAYOUT ANPASSUNGEN - VERTIKALES STAPELN (≤950px)
   =================================================================== */

@media (max-width: 950px) {
  /* Skill-Selector Mobile: Vertikal stapeln */
  .skill-selector {
    width: 95%;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .skill-button {
    width: 100%;
    max-width: 350px;
    min-height: 150px;
    aspect-ratio: 2 / 1; /* Breiteres Format für Mobile */
    flex: none; /* Keine Flex-Verteilung auf Mobile */
  }
  
  /* Skill-Detail Mobile: Vertical Stacking */
  .skill-detail {
    flex-direction: column !important;
    text-align: center;
    gap: 1.5rem;
  }
  
  .skill-detail.left,
  .skill-detail.right {
    flex-direction: column !important; /* Beide Varianten vertikal */
  }
  
  .skill-detail .skill-image {
    flex: none;
    max-width: 100%;
    min-width: auto;
    margin: 0 auto;
  }
  
  .skill-detail .skill-image img {
    min-height: 200px;
    max-width: 100%;
  }
  
  .skill-detail .skill-text {
    padding: 0;
    text-align: left; /* Links-Ausrichtung für bessere Lesbarkeit */
  }
  
  .service-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  
  /* DESKTOP.CSS RESPONSIVE PATTERN - ZEILEN 2488-2500 */
  .service-section h3 {
    font-size: var(--font-klein);
  }
  
  .cta-button {
    padding: 0.6rem 1.2rem;
  }
}

@media (max-width: 600px) {
  .skill-button {
    min-height: 120px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
  
  .skill-button span {
    font-size: clamp(0.9rem, 4vw, 1.2rem);
  }
  
  .service-section h3 {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
    margin: 0.5rem auto;
    display: block;
  }
  
  .skill-detail .skill-image img {
    min-height: 180px;
  }
  
  .skill-selector {
    gap: 1rem;
  }
}

/* ===================================================================
   🖥️ ERWEITERTE DESKTOP-OPTIMIERUNGEN (>950px)
   =================================================================== */

@media (min-width: 951px) {
  /* Skill-Selector Desktop Layout verfeinern */
  .skill-selector {
    max-width: 1200px;
    margin: 0 auto 3rem;
    gap: 1.5rem;
  }
  
  .skill-button {
    transition: all 0.3s ease;
  }
  
  .skill-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  /* Skill-Detail Desktop Layout optimieren */
  .skill-detail {
    max-width: 1200px;
    margin: 3rem auto;
    min-height: 300px; /* Mindesthöhe für Konsistenz */
  }
  
  .skill-detail .skill-image {
    flex: 0 0 40%;
  }
  
  .skill-detail .skill-text {
    flex: 1;
    padding: 0 2rem;
  }
  
  /* Service-Section Desktop */
  .service-section {
    max-width: 1200px;
    margin: 0 auto 2rem;
  }
}

/* Large Desktop Optimierung */
@media (min-width: 1400px) {
  .skill-selector {
    gap: 2rem;
  }
  
  .skill-button {
    min-width: 250px;
    min-height: 250px;
  }
  
  .skill-detail {
    gap: 3rem;
  }
  
  .skill-detail .skill-text {
    padding: 0 3rem;
  }
}

/* ===================================================================
   🎨 IMAGE-LAYOUT-SPEZIFIKATIONEN
   =================================================================== */

/* Spezifische Bild-Text-Anordnung */

/* Alternierende Layout-Pattern für skill-detail */
.skill-detail:nth-child(odd) {
  flex-direction: row; /* Ungerade: Bild links, Text rechts */
}

.skill-detail:nth-child(even) {
  flex-direction: row-reverse; /* Gerade: Bild rechts, Text links */
}

/* Responsive Image Handling */
.skill-detail .skill-image {
  position: relative;
  overflow: hidden;
}

.skill-detail .skill-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 2px solid var(--farbe-schwarz);
  object-fit: cover;
  transition: transform 0.3s ease;
}

@media (min-width: 951px) {
  .skill-detail .skill-image img:hover {
    transform: scale(1.02);
  }
}

/* Mobile: Deaktiviere nth-child Pattern */
@media (max-width: 950px) {
  .skill-detail:nth-child(odd),
  .skill-detail:nth-child(even) {
    flex-direction: column !important;
  }
}

/* ===================================================================
   📱 TOUCH-OPTIMIERUNGEN FÜR MOBILE - WCAG AA KONFORM
   =================================================================== */

@media (hover: none) and (pointer: coarse) {
  .skill-button:hover {
    transform: none;
  }
  
  .skill-button {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .cta-button,
  .btn {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  /* 🎯 VERBESSERTE TOUCH-TARGETS */
  .skill-button span {
    padding: 0.5rem;
  }
}

/* ===================================================================
   ♿ ACCESSIBILITY ENHANCEMENTS - MODERNE STANDARDS
   =================================================================== */

/* 🎯 FOCUS-VISIBLE SUPPORT FÜR MODERNE BROWSER */
@supports selector(:focus-visible) {
  .skill-button:focus:not(:focus-visible),
  .cta-button:focus:not(:focus-visible),
  .btn:focus:not(:focus-visible) {
    outline: none;
  }
  
  .skill-button:focus-visible,
  .cta-button:focus-visible,
  .btn:focus-visible {
    outline: 3px solid var(--farbe-grau);
    outline-offset: 2px;
  }
}

/* 🚫 REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
  .skill-button,
  .cta-button,
  .btn,
  .service-section,
  .skill-detail .skill-image img {
    transition: none !important;
    animation: none !important;
  }
  
  .skill-button:hover,
  .service-section:hover,
  .skill-detail .skill-image img:hover {
    transform: none !important;
  }
}

/* 🌙 HIGH CONTRAST MODE SUPPORT */
@media (prefers-contrast: high) {
  .service-section {
    border-width: 3px;
  }
  
  .skill-button {
    border-width: 3px;
  }
  
  .btn,
  .cta-button {
    border-width: 3px;
  }
}




/* =========================
   SIMPLE SCROLL REVEAL
   ========================= */

/* 🚀 EMERGENCY FIX: Service Content sofort sichtbar */
#skill1, #skill2, #skill3 {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Fallback: Scroll-Reveal System */
#skill1.scroll-visible,
#skill2.scroll-visible,
#skill3.scroll-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Backup: Animate-Visible System */
#skill1.animate-visible,
#skill2.animate-visible,
#skill3.animate-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Mobile-optimierte Animation */
@media (max-width: 950px) {
    #skill1, #skill2, #skill3 {
        transform: translateY(20px); /* Weniger Movement auf Mobile */
        transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Schneller */
    }
}


/* =========================
   MODERNE SERVICE-PAGE STYLES
   ========================= */

/* Hero Section */
.modern-hero-section {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffffff 0%, #000000 70%);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/publicMedia/images/fdm_resin.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}

.hero-content {
    text-align: center;
    z-index: 2;
    max-width: 600px;
    padding: 2rem;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.scroll-indicator {
    font-size: 2rem;
    color: white;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Skills Navigation - Seriöses Whitebox Layout */
.skills-navigation {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.skill-card {
    flex: 1;
    position: relative;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: local !important;
}

/* Skill-Card Hintergrundbilder */
.skill-card[data-target="skill1"] {
    background-image: linear-gradient(135deg, rgb(40 61 158 / 85%), rgb(255 53 53 / 85%)), url(/publicMedia/images/fdm.JPG);
}

.skill-card[data-target="skill2"] {
    background-image: linear-gradient(135deg, rgba(52, 152, 219, 0.85), rgba(155, 89, 182, 0.85)),
                      url('/publicMedia/images/model_select.jpg');
}

.skill-card[data-target="skill3"] {
    background-image: linear-gradient(135deg, rgb(235 129 19 / 75%), rgba(39, 174, 96, 0.85)), url(/publicMedia/images/design_form_exp.jpg);
}

.skill-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Icons ausblenden */
.glass-card-icon {
    display: none;
}

.skill-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: white;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.skill-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Skill Sections */
.skill-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
    margin-bottom: 6rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

/* Dominante Trenner zwischen Skill-Sections */
.skill-section:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.6), rgba(102, 126, 234, 0.3), transparent);
    border-radius: 1px;
    box-shadow: 0 1px 3px rgba(102, 126, 234, 0.2);
}

/* Skill-Section Zustandsklassen - Vertikales Layout erzwingen */
.skill-section.reveal-element,
.skill-section.scroll-visible,
.skill-section.mobile-revealed {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Debugging: Force Skill-Section Layout */
div[id*="skill"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.skill-title {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 4rem;
    color: #2c3e50;
    font-weight: 700;
    position: relative;
}

.skill-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

/* Content Pairs - Weiße Box mit abgerundeten Kanten */
.content-pair {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 4rem;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    min-height: 350px;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-pair:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    border-color: #e0e0e0;
}

.layout-right {
    flex-direction: row;
}

.layout-right .image-container {
    order: 1;
}

.layout-right .text-container {
    order: 2;
}

.layout-left {
    flex-direction: row;
}

.layout-left .image-container {
    order: 2;
}

.layout-left .text-container {
    order: 1;
}

/* Content-Pair Zustandsklassen - Weiße Boxen */
.content-pair.layout-right,
.content-pair.layout-right.reveal-element,
.content-pair.layout-right.scroll-visible,
.content-pair.layout-right.mobile-revealed {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-bottom: 4rem !important;
    background: white !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f0f0f0 !important;
    min-height: 350px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem !important;
}

.content-pair.layout-left,
.content-pair.layout-left.reveal-element,
.content-pair.layout-left.scroll-visible,
.content-pair.layout-left.mobile-revealed {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-bottom: 4rem !important;
    background: white !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f0f0f0 !important;
    min-height: 350px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem !important;
}

/* Allgemeine Content-Pair Scroll-Zustände */
.content-pair.reveal-element,
.content-pair.scroll-visible,
.content-pair.mobile-revealed {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-bottom: 4rem !important;
    background: white !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f0f0f0 !important;
    min-height: 350px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem !important;
}

/* DEBUGGING: Force Content-Pair Layout */
div[class*="content-pair"] {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-bottom: 4rem !important;
    background: white !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f0f0f0 !important;
    min-height: 350px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem !important;
    box-sizing: border-box !important;
}

/* Mobile Override für alle Content-Pairs */
@media (max-width: 950px) {
    div[class*="content-pair"] {
        flex-direction: column !important;
        min-height: auto !important;
        margin-bottom: 2rem !important;
        padding: 1.5rem !important;
    }
    
    .image-container,
    .glass-image-container {
        flex: none !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        border-radius: 15px !important;
        position: relative !important;
    }
    
    .image-container img,
    .glass-image-container img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .layout-right .image-container,
    .layout-right .glass-image-container {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .text-container {
        flex: none !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 2rem 0 !important;
    }
    
    .text-container h3 {
        font-size: 1.6rem !important;
        margin-bottom: 1rem !important;
    }
    
    .text-container p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Container-Sicherstellung */
.image-container,
.text-container {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive Container - angepasst für weiße Box */
.image-container {
    flex: 0 0 45%;
    min-height: 320px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
    margin-right: 2rem;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

/* Flexible Text-Container - angepasst für weiße Box */
.text-container {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    min-height: 320px;
}

.text-container h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #2c3e50;
    font-weight: 700;
    line-height: 1.3;
}

.text-container p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #5a6c7d;
    margin-bottom: 1.5rem;
}

/* Layout-specific adjustments */
.layout-right .image-container {
    margin-right: 0;
    margin-left: 2rem;
}

/* Feature Lists im responsiven Design */
.text-container .glass-feature-list {
    margin: 1.5rem 0;
}

.text-container .glass-feature-list li {
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.text-container .glass-ideal-for {
    margin-top: 1.5rem;
    padding: 1.3rem;
    background: linear-gradient(135deg, rgb(0 0 0 / 12%), rgb(254 253 255 / 12%));
    border-radius: 12px;
    border: 2px solid #000000;
    box-shadow: aliceblue;
    font-size: 1rem;
}

/* Glassmorphism */
.glassmorphism-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Verbesserte Scroll-Animationen mit Verzögerung */
.reveal-element {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-element.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gestaffelte Animation-Delays für Content-Pairs */
.content-pair:nth-child(1) {
    transition-delay: 0.1s;
}

.content-pair:nth-child(2) {
    transition-delay: 0.2s;
}

.content-pair:nth-child(3) {
    transition-delay: 0.3s;
}

.content-pair:nth-child(4) {
    transition-delay: 0.4s;
}

/* Mobile-specific Animation */
.mobile-revealed {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Feature Lists */
.glass-feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.glass-feature-list li {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.glass-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #4CAF50;
    font-weight: bold;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.glass-feature-list li:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

/* Ideal-For Boxes */
.glass-ideal-for {
    background: linear-gradient(135deg, 
        rgba(227, 242, 253, 0.8) 0%,
        rgba(243, 229, 245, 0.8) 100%
    );
    backdrop-filter: blur(5px);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-left: 4px solid #2196F3;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #333;
}

/* Call-to-Action Button */
.glass-cta-button {
    background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
    color: white;
    text-decoration: none;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    margin-top: 1rem;
}

.glass-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4);
    background: linear-gradient(135deg, #1976D2 0%, #00BCD4 100%);
}

/* Card Icons */
.glass-card-icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.skill-card:hover .glass-card-icon {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* Mobile Responsive */
@media (max-width: 950px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-content {
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .content-pair,
    .content-pair.layout-right,
    .content-pair.layout-left,
    .content-pair.reveal-element,
    .content-pair.scroll-visible,
    .content-pair.mobile-revealed,
    .content-pair.layout-right.reveal-element,
    .content-pair.layout-right.scroll-visible,
    .content-pair.layout-right.mobile-revealed,
    .content-pair.layout-left.reveal-element,
    .content-pair.layout-left.scroll-visible,
    .content-pair.layout-left.mobile-revealed,
    .layout-right {
        flex-direction: column !important;
        min-height: auto !important;
        border-radius: 20px !important;
        margin-bottom: 3rem !important;
    }
    
    .layout-right .text-container,
    .layout-right .image-container,
    .content-pair.layout-right .text-container,
    .content-pair.layout-right .image-container,
    .layout-left .text-container,
    .layout-left .image-container,
    .content-pair.layout-left .text-container,
    .content-pair.layout-left .image-container {
        order: unset !important;
        flex: none !important;
    }
    
    .image-container {
        min-height: 250px !important;
        max-height: 250px !important;
    }
    
    .text-container {
        padding: 2rem !important;
        min-height: 200px !important;
    }
    
    .text-container h3 {
        font-size: 1.8rem !important;
    }
    
    .text-container p {
        font-size: 1.1rem !important;
    }
    
    .skills-navigation {
        flex-direction: column;
        padding: 2rem 1rem;
        gap: 1.5rem;
    }
    
    .skill-card {
        min-height: 150px;
        padding: 2rem 1.5rem;
    }
    
    .skill-card h3 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    
    .skill-card p {
        font-size: 0.9rem;
    }
    
    .glass-card-icon {
        display: none !important;
    }
    
    .skill-section {
        padding: 4rem 1rem;
        margin-bottom: 2rem;
        border-radius: 20px;
    }
    
    .skill-title {
        font-size: 2.2rem;
        margin-bottom: 3rem;
    }
    
    .skill-title::after {
        width: 60px;
        height: 3px;
    }
    
    .image-container {
        border-radius: 15px;
    }
    
    .image-container img {
        height: 250px;
    }
    
    .text-container {
        padding: 2rem;
        border-radius: 15px;
    }
    
    .text-container h3 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    .text-container p {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .reveal-element {
        transform: translateY(20px);
        transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
    
    .glass-card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-content {
        padding: 1.5rem 1rem;
    }
    
    .skills-navigation {
        padding: 1.5rem 0.5rem;
    }
    
    .skill-section {
        padding: 1.5rem 0.5rem;
    }
    
    .content-pair {
        gap: 1.5rem;
    }
    
    .text-container {
        padding: 1rem;
    }
    
    .glass-feature-list li {
        padding: 0.6rem 0.8rem 0.6rem 2rem;
        font-size: 0.9rem;
    }
    
    .glass-ideal-for {
        padding: 0.8rem;
        font-size: 0.8rem;
    }
    
    .skill-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
}

/* Performance Optimizations */
.modern-hero-section,
.skill-card,
.content-pair,
.glass-cta-button {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Print Styles */
@media print {
    .modern-hero-section {
        height: auto;
        background: none;
    }
    
    .hero-background {
        display: none;
    }
    
    .reveal-element {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .glassmorphism-card {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .skill-title,
    .text-container h3 {
        color: #f0f0f0;
    }
    
    .text-container p,
    .skill-card p {
        color: #ccc;
    }
    
    .skill-card h3 {
        color: #f0f0f0;
    }
    
    .glassmorphism-card {
        background: rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .reveal-element,
    .skill-card,
    .glass-cta-button,
    .glass-card-icon {
        transition: none !important;
        animation: none !important;
    }
    
    .scroll-indicator {
        animation: none;
    }
}

/* Focus States for Accessibility */
.skill-card:focus,
.glass-cta-button:focus {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .glassmorphism-card {
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid #000;
    }
    
    .text-container h3,
    .skill-title {
        color: #000;
    }
    
    .text-container p {
        color: #333;
    }
}


/* =========================
   WARENKORB-STYLES MIGRIERT
   ========================= */

/* Warenkorb-Styles wurden nach cart-professional.css migriert
   für ein seriöses Schwarz-Weiß-Grau Design */