/* WS-Media Website Styles */:root { --wsm-primary: #00a0e3; --wsm-primary-dark: #0077aa; --wsm-secondary: #2c3e50; --wsm-accent: #e74c3c; --wsm-light: #f8f9fa; --wsm-dark: #1a1a2e; --wsm-gray: #6c757d;}/* iOS Safe Area - dunkler Hintergrund für Notch/Status-Bar/Ränder */html { background-color: var(--wsm-dark);}/* Safe Area Insets für iOS */@supports (padding: env(safe-area-inset-top)) { .hero { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } footer { padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }}/* Typography */body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #333; line-height: 1.7; background-color: var(--wsm-dark);}body main { background-color: #fff;}body.home main { background-color: transparent;}/* Sektionen auf Homepage brauchen eigenen Hintergrund */body.home section { background-color: #fff;}body.home section.hero,body.home section.stats-section,body.home section.cta-section,body.home section.cta-parallax { background-color: transparent;}body.home section.bg-light { background-color: var(--wsm-light) !important;}/* Stofftextur für helle Sektionen */.bg-light { background-image: url('/images/texture-fabric.webp'); background-size: cover; background-position: center;}h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 600;}/* Navbar */.navbar { backdrop-filter: blur(10px); background: rgba(26, 26, 46, 0.95) !important; transition: all 0.3s ease; /* iOS: Navbar bis zum oberen Rand ziehen */ padding-top: env(safe-area-inset-top, 0px);}.navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.1);}/* Nested Dropdown Submenus */.dropdown-submenu { position: relative;}.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -1px; margin-left: 0; display: none;}.dropdown-submenu:hover > .dropdown-menu { display: block;}.dropdown-submenu > .dropdown-item::after { content: '\203A'; float: right; margin-left: 10px; opacity: 0.7;}/* Mobile: Stack submenus vertically */@media (max-width: 991.98px) { .dropdown-submenu > .dropdown-menu { position: static; left: 0; margin-left: 1rem; border: none; box-shadow: none; background: transparent; } .dropdown-submenu > .dropdown-item::after { transform: rotate(90deg); } .dropdown-submenu:hover > .dropdown-menu { display: block; }}.navbar-brand img { transition: transform 0.3s ease;}.navbar-brand:hover img { transform: scale(1.05);}/* Hero Section */.hero { min-height: 100vh; background: linear-gradient(135deg, var(--wsm-dark) 0%, var(--wsm-secondary) 100%); display: flex; align-items: center; position: relative; overflow: hidden;}.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('/images/hero-overlay.webp') center/cover; opacity: 0.6;}.hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(26,26,46,0.7) 0%, rgba(44,62,80,0.5) 100%); pointer-events: none;}.hero-content { position: relative; z-index: 1;}.hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; line-height: 1.2;}.hero .lead { font-size: clamp(1.1rem, 2vw, 1.35rem); opacity: 0.9;}/* Buttons */.btn-primary { background: var(--wsm-primary); border-color: var(--wsm-primary);}.btn-primary:hover { background: var(--wsm-primary-dark); border-color: var(--wsm-primary-dark);}.btn-outline-primary { color: var(--wsm-primary); border-color: var(--wsm-primary);}.btn-outline-primary:hover { background: var(--wsm-primary); border-color: var(--wsm-primary);}/* Service Cards */.service-card { border: none; border-radius: 1rem; overflow: hidden; transition: all 0.4s ease; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.08);}.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.15);}.service-card .card-img-top { height: 220px; object-fit: cover; transition: transform 0.4s ease;}.service-card:hover .card-img-top { transform: scale(1.05);}.service-card .card-body { padding: 1.75rem;}.service-card .icon-box { width: 60px; height: 60px; background: var(--wsm-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-top: -50px; position: relative; color: #fff; font-size: 1.5rem; box-shadow: 0 5px 15px rgba(0, 160, 227, 0.4);}/* Product Cards */.product-card { border: 1px solid #eee; border-radius: 0.75rem; overflow: hidden; transition: all 0.3s ease; background: #fff;}.product-card:hover { border-color: var(--wsm-primary); box-shadow: 0 10px 30px rgba(0,0,0,0.1);}.product-card .product-image { height: 200px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; overflow: hidden;}.product-card .product-image img { max-height: 180px; max-width: 100%; object-fit: contain; transition: transform 0.3s ease;}.product-card:hover .product-image img { transform: scale(1.1);}.product-card .card-body { padding: 1.25rem;}.product-card .product-title { font-size: 0.95rem; font-weight: 600; color: var(--wsm-secondary); margin-bottom: 0.5rem;}.product-card .product-price { font-size: 1.1rem; font-weight: 700; color: var(--wsm-primary);}.product-card .product-price small { font-size: 0.75rem; color: var(--wsm-gray); font-weight: 400;}/* Category Cards */.category-card { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 3 / 4; /* Hochformat für Textilien */ background: #f8f9fa;}.category-card img { width: 100%; height: 100%; object-fit: contain; /* Vollständig anzeigen, nicht abschneiden */ object-position: center; transition: transform 0.4s ease; padding: 0.5rem;}.category-card:hover img { transform: scale(1.1);}.category-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 30%, transparent 60%); display: flex; align-items: flex-end; padding: 1.25rem;}.category-card .overlay h5 { color: #fff; margin: 0; font-weight: 600; font-size: 1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.5);}/* Section Headers */.section-header { margin-bottom: 3rem;}.section-header h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem;}.section-header .lead { color: var(--wsm-gray); max-width: 600px; margin: 0 auto;}/* Features */.feature-box { text-align: center; padding: 2rem;}.feature-box .icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--wsm-primary) 0%, var(--wsm-primary-dark) 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: #fff; font-size: 2rem;}/* CTA Section */.cta-section { background: linear-gradient(135deg, var(--wsm-primary) 0%, var(--wsm-primary-dark) 100%); color: #fff; padding: 5rem 0; position: relative; overflow: hidden;}.cta-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: rgba(255,255,255,0.1); border-radius: 50%;}/* Cookie Consent */.cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background: var(--wsm-dark); color: #fff; padding: 1rem 0; z-index: 9999; box-shadow: 0 -5px 20px rgba(0,0,0,0.2);}/* Breadcrumb */.breadcrumb-custom { background: var(--wsm-light); padding: 1rem 0; margin-top: 76px;}.breadcrumb-custom .breadcrumb { margin: 0; background: transparent; padding: 0;}/* Forms */.form-control:focus,.form-select:focus { border-color: var(--wsm-primary); box-shadow: 0 0 0 0.2rem rgba(0, 160, 227, 0.25);}/* Color Swatches */.color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; cursor: pointer; transition: transform 0.2s ease;}.color-swatch:hover,.color-swatch.active { transform: scale(1.2); box-shadow: 0 0 0 2px var(--wsm-primary);}/* Size Selector */.size-btn { min-width: 45px; padding: 0.5rem 0.75rem; border: 1px solid #ddd; border-radius: 0.5rem; background: #fff; transition: all 0.2s ease;}.size-btn:hover,.size-btn.active { border-color: var(--wsm-primary); background: var(--wsm-primary); color: #fff;}/* Pagination */.pagination .page-link { color: var(--wsm-secondary); border-radius: 0.5rem; margin: 0 2px;}.pagination .page-item.active .page-link { background: var(--wsm-primary); border-color: var(--wsm-primary);}/* Responsive adjustments */@media (max-width: 991.98px) { .hero { min-height: 100vh; padding-top: 80px; } main { padding-top: 76px; } /* Homepage: kein padding, Hero ist fullscreen */ body.home main { padding-top: 0; }}@media (max-width: 767.98px) { .section-header h2 { font-size: 1.75rem; }}/* Animation Classes */.fade-in-up { animation: fadeInUp 0.6s ease forwards;}@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }}/* Utility Classes */.bg-gradient-primary { background: linear-gradient(135deg, var(--wsm-primary) 0%, var(--wsm-primary-dark) 100%);}.text-primary { color: var(--wsm-primary) !important;}.border-primary { border-color: var(--wsm-primary) !important;}/* Footer - blauer Gradient-Hintergrund */footer.bg-dark { background: linear-gradient(135deg, rgba(26,26,46,0.95) 0%, rgba(44,62,80,0.9) 100%), url('/images/bg-gradient-blue.webp') center/cover !important;}footer.bg-dark .text-muted { color: #adb5bd !important;}footer.bg-dark a.text-muted:hover { color: #fff !important;}footer.bg-dark address { color: #adb5bd;}footer.bg-dark hr.border-secondary { border-color: rgba(255,255,255,0.2) !important;}/* ============================================= Product Data Sheet (Artikeldatenblatt) ============================================= *//* Thumbnail Gallery */.thumbnail-gallery { background: #f8f9fa; border-radius: 0.5rem; padding: 0.75rem;}.thumbnail-item { width: 70px; height: 70px; border: 2px solid #dee2e6; border-radius: 0.5rem; overflow: hidden; cursor: pointer; position: relative; background: #fff; transition: all 0.2s ease;}.thumbnail-item:hover { border-color: var(--wsm-primary); transform: scale(1.05);}.thumbnail-item.active { border-color: var(--wsm-primary); box-shadow: 0 0 0 2px rgba(0, 160, 227, 0.3);}.thumbnail-item img { width: 100%; height: 100%; object-fit: contain; padding: 4px;}.thumbnail-item .color-indicator { position: absolute; bottom: 0; left: 0; right: 0; height: 4px;}/* Properties Table */.properties-table th { width: 35%; background: #f8f9fa; font-weight: 600; padding: 0.75rem 1rem; vertical-align: middle;}.properties-table td { padding: 0.75rem 1rem; vertical-align: middle;}/* Color Dots */.color-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; vertical-align: middle;}.color-dot-header { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccc;}/* Availability Matrix */.availability-matrix { font-size: 0.9rem;}.availability-matrix th.color-header { padding: 0.5rem; min-width: 40px;}.availability-matrix .size-label { font-weight: 600; background: #f8f9fa;}.availability-matrix .availability-check { font-size: 1.1rem;}.availability-matrix .availability-x { font-size: 1rem; opacity: 0.4;}/* Main Image Container */.main-image-container { min-height: 350px; display: flex; align-items: center; justify-content: center;}.main-product-image { transition: opacity 0.3s ease;}/* Responsive adjustments for data sheet */@media (max-width: 991.98px) { .product-gallery { position: static !important; } .main-image-container { min-height: 280px; } .thumbnail-item { width: 55px; height: 55px; }}@media (max-width: 575.98px) { .availability-matrix { font-size: 0.8rem; } .color-dot-header { width: 18px; height: 18px; } .properties-table th, .properties-table td { padding: 0.5rem 0.75rem; }}/* Card Hover Effect */.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease;}.card-hover:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;}/* ============================================= PARALLAX & SCROLL ANIMATIONS ============================================= *//* Parallax Hero */.hero-parallax { background-attachment: fixed; background-position: center; background-size: cover;}.hero-parallax::before { background-attachment: fixed;}/* Floating shapes in hero */.hero-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none;}.hero-shape { position: absolute; border-radius: 50%; background: rgba(0, 160, 227, 0.1); animation: float 20s ease-in-out infinite;}.hero-shape:nth-child(1) { width: 400px; height: 400px; top: -100px; right: -100px; animation-delay: 0s;}.hero-shape:nth-child(2) { width: 300px; height: 300px; bottom: -50px; left: 10%; animation-delay: -5s; background: rgba(255, 255, 255, 0.05);}.hero-shape:nth-child(3) { width: 200px; height: 200px; top: 30%; right: 20%; animation-delay: -10s;}@keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(20px, -30px) rotate(5deg); } 50% { transform: translate(-10px, 20px) rotate(-5deg); } 75% { transform: translate(30px, 10px) rotate(3deg); }}/* Scroll-down indicator animation */.scroll-indicator { animation: bounce 2s ease-in-out infinite;}@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-15px) translateX(-50%); } 60% { transform: translateY(-7px) translateX(-50%); }}/* Scroll-reveal animations */.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease;}.reveal.revealed { opacity: 1; transform: translateY(0);}.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s ease, transform 0.8s ease;}.reveal-left.revealed { opacity: 1; transform: translateX(0);}.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s ease, transform 0.8s ease;}.reveal-right.revealed { opacity: 1; transform: translateX(0);}.reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.6s ease, transform 0.6s ease;}.reveal-scale.revealed { opacity: 1; transform: scale(1);}/* Staggered delays for cards */.reveal-stagger:nth-child(1) { transition-delay: 0s; }.reveal-stagger:nth-child(2) { transition-delay: 0.1s; }.reveal-stagger:nth-child(3) { transition-delay: 0.2s; }.reveal-stagger:nth-child(4) { transition-delay: 0.3s; }/* Stats Counter Section */.stats-section { background: linear-gradient(135deg, rgba(44,62,80,0.9) 0%, rgba(26,26,46,0.95) 100%), url('/images/texture-industrial.webp') center/cover; position: relative; overflow: hidden;}.stat-item { text-align: center; padding: 2rem; position: relative;}.stat-number { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--wsm-primary); line-height: 1; margin-bottom: 0.5rem;}.stat-label { font-size: 1.1rem; color: rgba(255, 255, 255, 0.8); font-weight: 500;}.stat-icon { font-size: 2.5rem; color: var(--wsm-primary); opacity: 0.3; margin-bottom: 1rem;}/* Parallax CTA Section */.cta-parallax { background-image: url('/images/cta-bg.webp'); background-attachment: fixed; background-position: center; background-size: cover; position: relative;}.cta-parallax::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 160, 227, 0.85) 0%, rgba(0, 119, 170, 0.9) 100%);}.cta-parallax .container { position: relative; z-index: 1;}/* Enhanced service card hover */.service-card { position: relative; overflow: hidden;}.service-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--wsm-primary); transform: scaleX(0); transition: transform 0.4s ease;}.service-card:hover::after { transform: scaleX(1);}/* Feature box enhanced */.feature-box { position: relative; transition: transform 0.3s ease;}.feature-box:hover { transform: translateY(-5px);}.feature-box .icon { transition: transform 0.4s ease, box-shadow 0.4s ease;}.feature-box:hover .icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 15px 40px rgba(0, 160, 227, 0.4);}/* Gradient text animation */.gradient-text { background: linear-gradient(90deg, var(--wsm-primary), #00d4ff, var(--wsm-primary)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientFlow 3s linear infinite;}@keyframes gradientFlow { 0% { background-position: 0% center; } 100% { background-position: 200% center; }}/* Typewriter effect for hero (optional) */.typewriter { overflow: hidden; border-right: 3px solid var(--wsm-primary); white-space: nowrap; animation: typing 3s steps(30) 1s forwards, blink 0.75s step-end infinite;}@keyframes typing { from { width: 0; } to { width: 100%; }}@keyframes blink { 50% { border-color: transparent; }}/* Mouse scroll indicator */.mouse-scroll { width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 15px; position: relative;}.mouse-scroll::before { content: ''; width: 4px; height: 8px; background: rgba(255, 255, 255, 0.8); border-radius: 2px; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); animation: mouseScroll 1.5s ease-in-out infinite;}@keyframes mouseScroll { 0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.3; transform: translateX(-50%) translateY(12px); }}/* Disable parallax on mobile for performance *//* iOS Safari doesn't support background-attachment: fixed properly */@media (max-width: 991.98px) { .hero-parallax, .hero-parallax::before, .cta-parallax { background-attachment: scroll !important; } .hero::before { background-attachment: scroll !important; opacity: 0.5; } .cta-parallax { background-image: url('/images/cta-bg.webp') !important; background-attachment: scroll !important; background-position: center !important; background-size: cover !important; } .hero-shapes { display: none; }}/* iOS Safari specific fix - fixed backgrounds don't work */@supports (-webkit-touch-callout: none) { .hero::before, .cta-parallax { background-attachment: scroll !important; }}/* Reduce motion for accessibility */@media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; transition: none; } .hero-shape, .scroll-indicator, .mouse-scroll::before, .gradient-text { animation: none; }}