:root {
            /* Color Palette - Scientific/Premium */
            --primary-gold: #C5A028;
            /* Slightly more metallic gold */
            --primary-gold-hover: #B08D1E;
            --dark-bg: #0F172A;
            /* Slate 900 - Modern Dark */
            --dark-surface: #1E293B;
            /* Slate 800 */
            --light-bg: #F8FAFC;
            /* Slate 50 */
            --light-surface: #FFFFFF;
            --text-dark: #334155;
            /* Slate 700 */
            --text-light: #F1F5F9;
            /* Slate 100 */
            --accent-blue: #0EA5E9;
            /* Sky 500 - Trust/Scientific */

            /* Elevation */
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

            /* Animations */
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 80px;
            overflow-x: hidden;
        }

        body {
            color: var(--text-dark);
            line-height: 1.6;
            background-color: var(--light-bg);
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
            padding-top: 60px;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
        }

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

        /* Header & Navigation */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            z-index: 1000;
            width: 100%;
            max-width: 100vw;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            position: relative;
            width: 100%;
        }

        .logo {
            display: flex;
            align-items: center;
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--dark-bg);
            flex-shrink: 0;
            cursor: pointer;
            transition: var(--transition);
        }

        .logo:hover {
            color: var(--primary-gold);
        }

        /* Breadcrumbs sit in normal flow right after the fixed header. body already
           reserves 60px of top clearance for the fixed header (see body padding-top
           above), but the real header is taller than that, so without this extra
           nudge the breadcrumb text still renders hidden underneath it. */
        .breadcrumbs {
            margin-top: 20px;
        }

        .logo span {
            color: var(--primary-gold);
        }

        .logo-tag {
            font-size: 0.7rem;
            background-color: var(--primary-gold);
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            margin-left: 5px;
            vertical-align: super;
        }

        /* Navigation Styles - Desktop */
        nav {
            flex-grow: 1;
            display: flex;
            justify-content: center;
        }

        nav ul {
            display: flex;
            list-style: none;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            padding: 0;
        }

        nav ul li {
            margin: 0 15px;
        }

        nav ul li a {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 600;
            font-size: 1rem;
            transition: var(--transition);
            position: relative;
            white-space: nowrap;
        }

        nav ul li a:hover {
            color: var(--primary-gold);
        }

        nav ul li a.active {
            color: var(--primary-gold);
        }

        nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary-gold);
            left: 0;
            bottom: -5px;
            transition: var(--transition);
        }

        nav ul li a:hover::after,
        nav ul li a.active::after {
            width: 100%;
        }

        /* Language Selector */
        .language-selector {
            position: relative;
            flex-shrink: 0;
        }

        .language-button {
            display: flex;
            align-items: center;
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 8px 12px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 600;
            min-width: 90px;
            justify-content: space-between;
            gap: 8px;
        }

        .language-button:hover {
            border-color: var(--primary-gold);
            box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
        }

        .language-button-content {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .language-flag-icon {
            width: 20px;
            height: 15px;
            border-radius: 2px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .language-flag-icon .fi {
            font-size: 1.2rem;
            line-height: 1;
        }

        .language-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            min-width: 160px;
            display: none;
            z-index: 1003;
            margin-top: 5px;
        }

        .language-dropdown.active {
            display: block;
        }

        .language-option {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            cursor: pointer;
            transition: var(--transition);
            border-bottom: 1px solid #f0f0f0;
            gap: 10px;
        }

        .language-option:last-child {
            border-bottom: none;
        }

        .language-option:hover {
            background-color: #f8f9fa;
            color: var(--primary-gold);
        }

        .language-option.active {
            background-color: rgba(212, 175, 55, 0.1);
            color: var(--primary-gold);
            font-weight: 600;
        }

        .language-option .fi {
            font-size: 1.2rem;
            border-radius: 2px;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--dark-bg);
            cursor: pointer;
            position: relative;
            z-index: 1002;
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
        }

        /* Custom Popup Modal */
        .custom-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 3000;
            animation: fadeIn 0.3s ease;
        }

        .custom-modal-overlay.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .custom-modal {
            background-color: white;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            animation: slideIn 0.3s ease;
            overflow: hidden;
        }

        .custom-modal-header {
            padding: 20px 30px;
            background-color: var(--dark-bg);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .custom-modal-header h2,
        .custom-modal-header .modal-title {
            margin: 0;
            color: white;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .custom-modal-close {
            background: none;
            border: none;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            transition: var(--transition);
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .custom-modal-close:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--primary-gold);
        }

        .custom-modal-body {
            padding: 30px;
            text-align: center;
        }

        .custom-modal-icon {
            font-size: 3.5rem;
            color: var(--primary-gold);
            margin-bottom: 20px;
        }

        .custom-modal-message {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 25px;
            color: var(--text-dark);
        }

        .custom-modal-email {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            border-left: 4px solid var(--primary-gold);
        }

        .custom-modal-email p {
            margin: 0;
            font-weight: 600;
        }

        .custom-modal-email a {
            color: var(--primary-gold);
            text-decoration: none;
            font-weight: 700;
        }

        .custom-modal-email a:hover {
            text-decoration: underline;
        }

        .custom-modal-button {
            display: inline-block;
            background-color: var(--primary-gold);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 15px;
        }

        .custom-modal-button:hover {
            background-color: #c19b2e;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Hero Section mit Hintergrundbild */
        .hero {
            position: relative;
            color: var(--dark-bg);
            padding: 60px 0 100px;
            /* Angepasst: 60px oben statt 100px */
            text-align: left;
            overflow: hidden;
            min-height: 70vh;
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 100vw;
        }

        .hero-bg-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
            background-color: #f4f5f7;
            background-image: url('../img/arrandee-gold-silver-platinum-substrates-made-in-germany.webp');
            /* "contain" instead of "cover": on short/wide hero containers (small
               laptop screens, browser chrome eating vertical space) "cover" was
               cropping off the bottom half of the substrate photo. "contain"
               always shows the full image; since the image's own background is
               near-white and matches background-color here, any leftover
               letterboxing blends in instead of showing as a visible crop. */
            background-size: contain;
            background-position: right center;
            background-repeat: no-repeat;
        }

        /* Product photo has its empty space on the left and the substrates on the
           right, so the text now sits over the left side: a left-anchored white
           wash guarantees contrast there no matter how the photo crops, while
           fading out before it reaches the substrates on the right. */
        .hero-bg-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.85) 32%, rgba(255, 255, 255, 0.35) 52%, rgba(255, 255, 255, 0) 68%);
        }

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

        .hero-text {
            max-width: 480px;
        }

        .hero h1 {
            font-size: 3.2rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .hero h1 span {
            color: var(--primary-gold);
        }

        .hero p {
            font-size: 1.2rem;
            max-width: 480px;
            margin: 0 0 30px;
            color: #475569;
        }

        .hero-badges {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 30px;
        }

        .badge {
            background-color: rgba(212, 175, 55, 0.14);
            border: 1px solid rgba(212, 175, 55, 0.5);
            color: var(--dark-bg);
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 0.9rem;
        }

        /* Section Styling */
        section {
            padding: 80px 0;
            width: 100%;
            max-width: 100vw;
            overflow-x: hidden;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
            width: 100%;
        }

        .section-title h2 {
            font-size: 2.5rem;
            color: var(--dark-bg);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            width: 70px;
            height: 3px;
            background-color: var(--primary-gold);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .section-title p {
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Products Section */
        .products-grid {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
        }

        .product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            flex: 1;
            min-width: 350px;
            max-width: 480px;
            display: flex;
            flex-direction: column;
            width: 100%;
            position: relative;
        }

        /* Stretched-link pattern: the whole card is tappable, not just the
           small CTA button — important on mobile, where a card's heading or
           image is a much bigger, easier target than a single button. */
        .product-card .product-cta-btn::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .product-image {
            height: 220px;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }

        .product-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(212, 175, 55, 0.1), transparent);
        }

        .product-content {
            padding: 30px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .product-content h3 {
            font-size: 1.6rem;
            margin-bottom: 15px;
            color: var(--dark-bg);
        }

        .product-features {
            list-style: none;
            margin: 20px 0;
            flex-grow: 1;
        }

        .product-features li {
            padding: 8px 0 8px 30px;
            border-bottom: 1px dashed #eee;
            position: relative;
            line-height: 1.6;
        }

        .product-features li:last-child {
            border-bottom: none;
        }

        .product-features li i {
            color: var(--primary-gold);
            position: absolute;
            left: 5px;
            top: 11px;
        }

        .product-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-gold);
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        /* Comparison Section - Mobile Optimiert */
        .comparison {
            background-color: #f8f9fa;
            overflow-x: hidden;
        }

        .comparison-container {
            display: flex;
            gap: 20px;
            padding: 20px 0;
            width: 100%;
            max-width: 100vw;
        }

        .comparison-box {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            min-width: 300px;
            flex-shrink: 0;
            width: 100%;
        }

        .comparison-box h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .ordinary h3 {
            color: #666;
        }

        .arrandee h3 {
            color: var(--primary-gold);
        }

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

        .comparison-list li {
            padding: 10px 0;
            border-bottom: 1px dashed #eee;
            display: flex;
            align-items: center;
        }

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

        .ordinary .comparison-list li i {
            color: #ff6b6b;
            margin-right: 10px;
        }

        .arrandee .comparison-list li i {
            color: #51cf66;
            margin-right: 10px;
        }

        /* Usage Steps mit Karussell */
        .steps-carousel {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 40px auto 0;
            overflow: hidden;
        }

        .steps-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .step-slide {
            min-width: 100%;
            padding: 25px;
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            text-align: center;
            position: relative;
        }

        .step-number {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--primary-gold);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .step-slide i {
            font-size: 2.5rem;
            color: var(--primary-gold);
            margin-bottom: 15px;
        }

        .carousel-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 30px;
        }

        .carousel-btn {
            background-color: var(--primary-gold);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            transition: var(--transition);
        }

        .carousel-btn:hover {
            background-color: #c19b2e;
            transform: scale(1.1);
        }

        .step-indicators {
            display: flex;
            gap: 10px;
        }

        .step-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ddd;
            cursor: pointer;
            transition: var(--transition);
        }

        .step-indicator.active {
            background-color: var(--primary-gold);
            transform: scale(1.2);
        }

        /* Research Papers Carousel */
        .papers-carousel {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 40px auto 0;
            overflow: hidden;
        }

        .papers-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .paper-slide {
            min-width: 100%;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* Video Container */
        .video-container {
            margin-top: 50px;
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 0 20px;
        }

        /* Checkbox Group */
        .checkbox-group {
            display: flex !important;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .checkbox-group input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary-gold);
            cursor: pointer;
            margin: 0;
        }

        .checkbox-group label {
            margin: 0;
            cursor: pointer;
            user-select: none;
        }

        .paper-content {
            padding: 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .paper-content h3 {
            font-size: 1.4rem;
            margin-bottom: 10px;
            color: var(--dark-bg);
        }

        .paper-authors {
            font-style: italic;
            color: #666;
            margin-bottom: 15px;
            font-size: 0.95rem;
        }

        .paper-journal {
            color: var(--primary-gold);
            font-weight: 600;
            margin-bottom: 15px;
        }

        .paper-abstract {
            flex-grow: 1;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .paper-link {
            margin-top: auto;
            text-align: center;
        }

        .paper-btn {
            display: inline-block;
            background-color: var(--primary-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

        .paper-btn:hover {
            background-color: #c19b2e;
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }

        /* Research Papers Grid (Mobile-first default) */
        .papers-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 30px;
        }

        .paper-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* Clients & Papers Section */
        .clients-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            width: 100%;
        }

        /* Testimonials Carousel für Mobile */
        .testimonials-carousel {
            position: relative;
            width: 100%;
            margin: 40px auto 0;
            overflow: hidden;
        }

        .testimonials-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .testimonial-slide {
            min-width: 100%;
            padding: 10px;
        }

        .testimonial-slide .testimonial {
            height: 100%;
        }

        .testimonial {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            border-left: 4px solid var(--primary-gold);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .testimonial p {
            font-style: italic;
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .testimonial-author {
            font-weight: 700;
            color: var(--dark-bg);
            margin-top: auto;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        .research-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            padding: 30px;
            margin-top: 20px;
            width: 100%;
        }

        .research-areas,
        .methods-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 15px;
        }

        .research-tag,
        .method-tag {
            background-color: rgba(212, 175, 55, 0.1);
            color: var(--dark-bg);
            padding: 10px 18px;
            border-radius: 30px;
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .research-tag:hover,
        .method-tag:hover {
            background-color: rgba(212, 175, 55, 0.2);
            transform: translateY(-2px);
        }

        .research-section {
            margin-bottom: 30px;
        }

        .research-section h3 {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: var(--dark-bg);
            display: flex;
            align-items: center;
        }

        .research-section h3 i {
            color: var(--primary-gold);
            margin-right: 10px;
        }

        /* Universities & Institutions Logos Carousel */
        .institutions-carousel {
            position: relative;
            width: 100%;
            margin: 30px auto 0;
            overflow: hidden;
        }

        .institutions-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .institution-slide {
            min-width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 10px;
        }

        .institution-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            height: 120px;
        }

        .institution-logo:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .institution-logo img {
            max-width: 100%;
            max-height: 80px;
            object-fit: contain;
        }

        /* About Section with Image */
        .about-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            align-items: center;
        }

        .about-image {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }

        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .about-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }

        .stat {
            text-align: center;
            padding: 20px;
            background-color: rgba(212, 175, 55, 0.1);
            border-radius: 10px;
            transition: var(--transition);
        }

        .stat:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-gold);
            line-height: 1;
        }

        /* Contact Section */
        .contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .contact-form {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-gold);
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
        }

        .required {
            color: #ff6b6b;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 28px;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            border: 2px solid transparent;
            gap: 10px;
            line-height: 1.5;
        }

        .btn-primary {
            background-color: var(--primary-gold);
            color: white;
            border-color: var(--primary-gold);
        }

        .btn-primary:hover {
            background-color: var(--primary-gold-hover);
            border-color: var(--primary-gold-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(197, 160, 40, 0.3);
        }

        .btn-outline {
            background-color: transparent;
            border: 2px solid white;
            color: white;
        }

        .btn-outline:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        .btn-outline-gold {
            background-color: transparent;
            border: 2px solid var(--primary-gold);
            color: var(--primary-gold);
        }

        .btn-outline-gold:hover {
            background-color: var(--primary-gold);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(197, 160, 40, 0.2);
        }

        .hero-actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 40px 0;
            flex-wrap: wrap;
        }

        @media (max-width: 576px) {
            .hero-actions {
                flex-direction: column;
                gap: 15px;
                padding: 0 20px;
            }

            .btn {
                width: 100%;
            }
        }

        .product-cta-btn {
            display: inline-block;
            background-color: var(--primary-gold);
            color: white;
            padding: 12px 25px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            text-align: center;
            margin-top: 20px;
            width: 100%;
        }

        .product-cta-btn:hover {
            background-color: #c19b2e;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .contact-info {
            padding: 20px;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
        }

        .contact-item i {
            color: var(--primary-gold);
            font-size: 1.2rem;
            margin-right: 15px;
            margin-top: 5px;
        }

        /* Modal Styles */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            animation: fadeIn 0.3s ease;
        }

        .modal-overlay.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .modal {
            background-color: white;
            border-radius: 10px;
            width: 90%;
            max-width: 800px;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }

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

        .modal-header {
            padding: 20px 30px;
            background-color: var(--dark-bg);
            color: white;
            border-radius: 10px 10px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .modal-header h2,
        .modal-header .modal-title {
            margin: 0;
            color: white;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .close-modal {
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            cursor: pointer;
            transition: var(--transition);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .close-modal:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--primary-gold);
        }

        .modal-body {
            padding: 30px;
        }

        .modal-body h3,
        .modal-body .modal-subtitle {
            color: var(--dark-bg);
            margin-top: 25px;
            margin-bottom: 10px;
            font-size: 1.3rem;
            font-weight: 700;
        }

        .modal-body h3:first-child {
            margin-top: 0;
        }

        .modal-body p {
            margin-bottom: 15px;
            line-height: 1.7;
        }

        .modal-body h4,
        .modal-body .modal-h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--dark-bg);
            margin-top: 20px;
            margin-bottom: 5px;
        }

        .modal-body ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .modal-body li {
            margin-bottom: 5px;
        }

        /* Footer - Mobile Optimiert */
        footer {
            background-color: var(--dark-bg);
            color: var(--text-light);
            padding: 40px 0 20px;
            width: 100%;
            max-width: 100vw;
            overflow-x: hidden;
        }

        .footer-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .footer-logo {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 15px;
            cursor: pointer;
            transition: var(--transition);
            display: inline-block;
        }

        .footer-logo:hover {
            color: var(--primary-gold);
        }

        .footer-logo span {
            color: var(--primary-gold);
        }

        .footer-about {
            opacity: 0.8;
            line-height: 1.7;
            font-size: 0.9rem;
        }

        .footer-contact-legal {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 30px;
            margin-top: 20px;
        }

        .footer-contact h4,
        .footer-legal h4,
        .footer-social h4,
        .footer-contact .footer-heading,
        .footer-legal .footer-heading,
        .footer-social .footer-heading {
            font-size: 1.1rem;
            margin-bottom: 15px;
            position: relative;
            padding-bottom: 8px;
        }

        .footer-contact h4::after,
        .footer-legal h4::after,
        .footer-social h4::after,
        .footer-contact .footer-heading::after,
        .footer-legal .footer-heading::after,
        .footer-social .footer-heading::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 2px;
            background-color: var(--primary-gold);
            bottom: 0;
            left: 0;
        }

        .footer-legal ul {
            list-style: none;
        }

        .footer-legal ul li {
            margin-bottom: 8px;
        }

        .footer-legal ul li a {
            color: #ddd;
            text-decoration: none;
            transition: var(--transition);
            font-size: 0.9rem;
        }

        .footer-legal ul li a:hover {
            color: var(--primary-gold);
            padding-left: 5px;
        }

        .social-link {
            color: #ddd;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: color 0.3s;
            font-size: 0.9rem;
        }

        .social-link:hover {
            color: var(--primary-gold);
        }

        .imprint-link,
        .privacy-link,
        .terms-link,
        .cookie-settings-link {
            cursor: pointer;
            text-decoration: none;
        }

        /* Cookie Banner - full-width bar anchored to the bottom edge, inner
           content capped at the site's standard 1200px container so it lines
           up with everything else instead of sitting as a small centered box. */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            background-color: white;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
            z-index: 9999;
            border-top: 4px solid var(--primary-gold);
            transform: translateY(150%);
            transition: transform 0.5s ease;
        }

        .cookie-banner.visible {
            transform: translateY(0);
        }

        .cookie-banner-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 18px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .cookie-content h3,
        .cookie-content .cookie-heading {
            margin-bottom: 5px;
            font-size: 1.1rem;
            color: var(--dark-bg);
            font-weight: 700;
        }

        .cookie-content p {
            font-size: 0.9rem;
            color: #666;
            margin: 0;
        }

        .cookie-actions {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }

        .btn-sm {
            padding: 8px 15px;
            font-size: 0.85rem;
        }

        @media (max-width: 768px) {
            .footer-contact-legal {
                grid-template-columns: 1fr;
            }

            .cookie-banner-inner {
                flex-direction: column;
                align-items: flex-start;
                padding: 16px 20px;
            }

            .cookie-actions {
                width: 100%;
                justify-content: flex-end;
            }
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            margin-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0.7;
            font-size: 0.8rem;
            line-height: 1.4;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.5rem;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .product-card {
                max-width: 100%;
            }

            nav ul li {
                margin: 0 10px;
            }

            .hero {
                padding: 80px 0;
            }

            .hero h1 {
                font-size: 2.5rem;
            }
        }

        /* Mobile Layout */
        @media (max-width: 768px) {

            /* Burgermenü für Mobile */
            .mobile-menu-btn {
                display: flex;
                order: 1;
                margin-right: auto;
                height: 60px;
            }

            /* Logo in der Mitte auf Mobile */
            .logo {
                order: 2;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                margin: 0;
                font-size: 1.5rem;
                height: 60px;
                display: flex;
                align-items: center;
            }

            /* Language Selector rechts auf Mobile */
            .language-selector {
                order: 3;
                margin-left: auto;
            }

            .breadcrumbs {
                margin-top: 35px;
            }

            /* Desktop Navigation ausblenden */
            nav {
                display: none;
                position: fixed;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: white;
                z-index: 1000;
                padding: 20px;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                max-height: calc(100vh - 60px);
                overflow-y: auto;
                transform: translateY(-20px);
                opacity: 0;
                transition: transform 0.3s ease, opacity 0.3s ease;
            }

            nav.active {
                display: block;
                transform: translateY(0);
                opacity: 1;
            }

            nav ul {
                display: block;
                text-align: center;
            }

            nav ul li {
                margin: 0;
                padding: 0;
                border-bottom: 1px solid #eee;
            }

            nav ul li:last-child {
                border-bottom: none;
            }

            nav ul li a {
                display: block;
                padding: 15px 0;
                font-size: 1.1rem;
                font-weight: 600;
            }

            /* On mobile the photo doesn't work as a full-bleed background
               wash behind the text (it was cropped to almost nothing, or
               washed out under the white overlay), and it also looks wrong
               tacked on as a separate boxed photo below the text. Instead:
               treat it like a real hero banner — a full-bleed image strip
               spanning the entire screen width at the very top, then the
               headline/CTA content below it in the normal padded container.
               display:flex + order lets us reorder without touching the
               HTML, where .hero-bg-container comes before .container. */
            .hero {
                display: flex;
                flex-direction: column;
                padding: 0 0 40px;
                min-height: 0;
                text-align: center;
                overflow: hidden;
            }

            .hero .container {
                order: 2;
                padding-top: 32px;
            }

            .hero-bg-container {
                position: static;
                order: 1;
                width: 100vw;
                margin-left: calc(-50vw + 50%);
                height: 260px;
                background-color: #f4f5f7;
                background-size: cover;
                /* The source photo has its empty space on the left and the
                   substrates grouped on the right (same reason the desktop
                   version anchors "right center"). "center" here was
                   centering the whole frame instead of the plates, which
                   left a big empty gray gap on screen-left and clipped the
                   right-most plate's edge. Anchoring right keeps the full
                   plate group on screen and in the middle of this strip. */
                background-position: right 35%;
            }

            .hero-bg-container::after {
                display: none;
            }

            .hero-text {
                max-width: 100%;
                margin: 0 auto;
            }

            .hero h1 {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }

            .hero p {
                font-size: 1rem;
                margin-bottom: 20px;
                padding: 0 10px;
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
            }

            .hero-badges {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

            .badge {
                width: 90%;
                max-width: 300px;
                font-size: 0.85rem;
            }

            section {
                padding: 40px 0;
            }

            .section-title h2 {
                font-size: 1.6rem;
            }

            .section-title p {
                font-size: 0.9rem;
                padding: 0 15px;
            }

            .product-card {
                min-width: 100%;
                margin: 0;
            }

            .products-grid {
                gap: 20px;
            }

            .product-content {
                padding: 20px;
            }

            .product-content h3 {
                font-size: 1.3rem;
            }

            /* Was a horizontal-scroll carousel (flex row, overflow-x: auto),
               which hid the "arrandee way" box off-screen until swiped —
               buyers need both boxes visible at a glance. Stack instead. */
            .comparison-container {
                flex-direction: column;
                overflow-x: visible;
                padding: 0;
            }

            .comparison-box {
                min-width: 0;
                width: 100%;
            }

            .comparison-container::-webkit-scrollbar {
                height: 6px;
            }

            .comparison-container::-webkit-scrollbar-thumb {
                background: var(--primary-gold);
                border-radius: 3px;
            }

            .comparison-box {
                min-width: 280px;
                padding: 20px;
            }

            .comparison-box h3 {
                font-size: 1.3rem;
            }

            .comparison-list li {
                font-size: 0.9rem;
            }

            .step-slide {
                padding: 20px;
            }

            .step-slide h3 {
                font-size: 1.2rem;
            }

            .step-slide p {
                font-size: 0.9rem;
            }

            .carousel-btn {
                width: 45px;
                height: 45px;
            }

            .paper-slide {
                margin: 0 10px;
            }

            .paper-content {
                padding: 20px;
            }

            .paper-content h3 {
                font-size: 1.2rem;
            }

            .paper-abstract {
                font-size: 0.9rem;
            }

            /* NOTE: this file used to hide .testimonials-grid, .institutions-grid
               and .steps-container on mobile in favor of ".../-carousel"
               replacements. Those carousel elements were never built into any
               page's HTML, so the rules just hid real content (testimonials,
               the "References & Partners" section, and the 4 preparation
               steps on the Instructions page) with nothing shown in its
               place. Removed the display:none/display:block toggle pairs;
               the grids now stay visible and simply stack via their own
               responsive rules below. */
            .testimonials-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }

            .testimonial {
                padding: 16px;
            }

            .testimonial p {
                font-size: 0.82rem;
            }

            .testimonial img {
                width: 40px !important;
                height: 40px !important;
                margin-right: 10px !important;
            }

            .testimonial h3 {
                font-size: 0.85rem !important;
            }

            .research-container {
                padding: 20px;
            }

            .research-section h3 {
                font-size: 1.2rem;
            }

            .research-tag,
            .method-tag {
                padding: 8px 15px;
                font-size: 0.85rem;
            }

            .institution-slide {
                grid-template-columns: repeat(2, 1fr);
            }

            .institution-logo {
                height: 90px;
                padding: 15px;
            }

            .steps-container {
                display: grid;
                grid-template-columns: 1fr;
                gap: 25px;
                margin-top: 40px;
            }

            .step {
                text-align: center;
                padding: 25px;
                background-color: white;
                border-radius: 10px;
                box-shadow: var(--card-shadow);
                position: relative;
            }

            .about-stats {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .stat {
                padding: 15px;
            }

            .stat-number {
                font-size: 2rem;
            }

            .contact-form {
                padding: 20px;
            }

            .contact-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
                margin-bottom: 20px;
            }

            .contact-item i {
                margin-bottom: 5px;
            }

            footer {
                padding: 30px 0 15px;
            }

            .footer-container {
                gap: 25px;
            }

            .footer-contact-legal {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .copyright {
                padding-top: 15px;
                margin-top: 20px;
                font-size: 0.75rem;
            }

            .modal {
                width: 95%;
                max-height: 90vh;
            }

            .modal-header {
                padding: 15px 20px;
            }

            .modal-body {
                padding: 20px;
            }
        }

        /* Desktop Layout - Navigation in der Mitte */
        @media (min-width: 769px) {

            /* Mobile Menü Button ausblenden */
            .mobile-menu-btn {
                display: none;
            }

            /* Logo links */
            .logo {
                order: 1;
                margin-right: auto;
                position: static;
                transform: none;
                left: auto;
            }

            /* Navigation mittig */
            nav {
                order: 2;
                display: flex !important;
                flex-grow: 1;
                justify-content: center;
                position: static;
                height: auto;
                background-color: transparent;
                padding: 0;
                transform: none;
                width: auto;
            }

            nav ul {
                display: flex;
                margin: 0;
            }

            nav ul li {
                border-bottom: none;
            }

            nav ul li a {
                padding: 0;
                font-size: 1rem;
            }

            /* Language Selector rechts */
            .language-selector {
                order: 3;
                margin-left: auto;
                height: 60px;
                /* Füge diese Zeile hinzu */
                display: flex;
                align-items: center;
            }

            .comparison-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 40px;
                overflow-x: visible;
            }

            .comparison-box {
                min-width: auto;
            }

            /* Steps: Karussell ausblenden, Grid anzeigen */
            .steps-carousel {
                display: none;
            }

            .steps-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 25px;
                margin-top: 40px;
            }

            .step {
                text-align: center;
                padding: 25px;
                background-color: white;
                border-radius: 10px;
                box-shadow: var(--card-shadow);
                position: relative;
            }

            .step-number {
                position: absolute;
                top: -15px;
                left: 50%;
                transform: translateX(-50%);
                background-color: var(--primary-gold);
                color: white;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
            }

            .step i {
                font-size: 2.5rem;
                color: var(--primary-gold);
                margin-bottom: 15px;
            }

            /* Papers: Karussell ausblenden, Grid anzeigen */
            .papers-carousel {
                display: none;
            }

            .papers-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 30px;
                margin-top: 40px;
            }

            .paper-card {
                background-color: white;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: var(--card-shadow);
                transition: var(--transition);
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            /* Testimonials: Karussell ausblenden, Grid anzeigen */
            .testimonials-carousel {
                display: none;
            }

            .testimonials-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 30px;
                margin-bottom: 40px;
            }

            /* Institutions: Karussell ausblenden, Grid anzeigen */
            .institutions-carousel {
                display: none;
            }

            .institutions-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 30px;
                margin-top: 30px;
            }

            .footer-container {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 40px;
            }

            .footer-contact-legal {
                display: contents;
            }

            .footer-links {
                display: block;
            }

            .footer-links h4 {
                font-size: 1.2rem;
                margin-bottom: 20px;
                position: relative;
                padding-bottom: 10px;
            }

            .footer-links h4::after {
                content: '';
                position: absolute;
                width: 40px;
                height: 2px;
                background-color: var(--primary-gold);
                bottom: 0;
                left: 0;
            }

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

            .footer-links ul li {
                margin-bottom: 10px;
            }

            .footer-links ul li a {
                color: #ddd;
                text-decoration: none;
                transition: var(--transition);
            }

            .footer-links ul li a:hover {
                color: var(--primary-gold);
                padding-left: 5px;
            }
        }

        @media (max-width: 576px) {
            .hero {
                padding: 40px 0 60px;
                min-height: 60vh;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 1rem;
            }

            .badge {
                font-size: 0.8rem;
                padding: 6px 12px;
            }

            section {
                padding: 40px 0;
            }

            .section-title {
                margin-bottom: 30px;
            }

            .section-title h2 {
                font-size: 1.8rem;
            }

            .product-features li {
                font-size: 0.9rem;
            }

            .product-price {
                font-size: 1.3rem;
            }

            .language-button {
                padding: 6px 10px;
                font-size: 0.9rem;
                min-width: 80px;
            }

            .institution-slide {
                grid-template-columns: 1fr;
            }

            .sticky-cta {
                bottom: 20px;
                right: 20px;
                padding: 12px 20px;
                font-size: 0.9rem;
            }
        }

        /* Sticky CTA */
        .sticky-cta {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: var(--primary-gold);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 900;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            transform: translateY(100px);
            opacity: 0;
            pointer-events: none;
        }

        .sticky-cta.visible {
            transform: translateY(0);
            opacity: 1;
            pointer-events: all;
        }

        .sticky-cta:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            background-color: var(--primary-gold-hover);
        }

        @media (max-width: 576px) {
            .sticky-cta {
                bottom: 20px;
                right: 20px;
                padding: 12px 20px;
                font-size: 0.9rem;
            }
        }

        /* Downloads Modal Styles */
        .downloads-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .download-item {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 20px;
            background-color: var(--light-bg);
            border-radius: 8px;
            border: 1px solid #eee;
        }

        .download-icon {
            font-size: 2rem;
            color: var(--primary-gold);
            width: 50px;
            text-align: center;
        }

        .download-info {
            flex-grow: 1;
            text-align: left;
        }

        .download-info h3,
        .download-info .download-title {
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: var(--dark-bg);
            font-weight: 700;
        }

        .download-info p {
            font-size: 0.9rem;
            color: #666;
            margin: 0;
        }

        .download-actions {
            display: flex;
            gap: 10px;
        }

        @media (max-width: 576px) {
            .download-item {
                flex-direction: column;
                text-align: center;
            }

            .download-info {
                text-align: center;
            }

            .download-actions {
                width: 100%;
                justify-content: center;
            }
        }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* SEO Optimization Styles - Visual look of headings for non-semantic elements */
.hero-title { font-size: 1.8rem; margin-bottom: 15px; font-weight: bold; line-height: 1.2; display: block; }
@media (max-width: 576px) { .hero-title { font-size: 2rem; } }
.step-title { font-size: 1.2rem; font-weight: bold; margin-block-start: 1em; margin-block-end: 1em; display: block; }
.paper-title { font-size: 1.2rem; font-weight: bold; margin-block-start: 1em; margin-block-end: 1em; display: block; }

/* ========================================= */
/* Research Applications Accordion Section   */
/* ========================================= */
.research-accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.research-accordion-item {
    background-color: var(--light-surface);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
}

.research-accordion-item.has-content:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.research-accordion-header {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: var(--light-surface);
    user-select: none;
    transition: var(--transition);
}

.research-accordion-item.empty .research-accordion-header {
    cursor: default;
    background-color: #f8fafc;
    color: #94a3b8;
}

.research-category-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-dark);
}

.research-accordion-item.active .research-category-title {
    color: var(--primary-gold);
}

.research-accordion-header i {
    color: var(--primary-gold);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.research-accordion-item.active .research-accordion-header i {
    transform: rotate(180deg);
}

.upcoming-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    background-color: #e2e8f0;
    color: #64748b;
    border-radius: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.research-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #f8fafc;
    border-top: 1px solid transparent;
}

.research-accordion-item.active .research-accordion-body {
    border-top-color: #e2e8f0;
}

.research-cards-grid {
    padding: 25px;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .research-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

.research-case-card {
    background-color: var(--light-surface);
    border-radius: 6px;
    padding: 25px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.research-meta {
    font-size: 0.85rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.research-meta::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--primary-gold);
    border-radius: 50%;
    margin-right: 8px;
}

.research-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
}

.research-summary {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.research-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.research-btn-product,
.research-btn-link {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: var(--transition);
}

.research-btn-product {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: var(--dark-bg);
}
.research-btn-product i { color: var(--primary-gold); font-size: 0.7rem; }

.research-btn-product:hover {
    border-color: var(--primary-gold);
    background-color: #fef3c7;
}

/* SEO Optimization Styles - Visual look of headings for non-semantic elements */
.hero-title { font-size: 1.8rem; margin-bottom: 15px; font-weight: bold; line-height: 1.2; display: block; }
@media (max-width: 576px) { .hero-title { font-size: 2rem; } }
.step-title { font-size: 1.2rem; font-weight: bold; margin-block-start: 1em; margin-block-end: 1em; display: block; }
.paper-title { font-size: 1.2rem; font-weight: bold; margin-block-start: 1em; margin-block-end: 1em; display: block; }

/* ========================================= */
/* Research Applications Accordion Section   */
/* ========================================= */
.research-accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.research-accordion-item {
    background-color: var(--light-surface);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
}

.research-accordion-item.has-content:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.research-accordion-header {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: var(--light-surface);
    user-select: none;
    transition: var(--transition);
}

.research-accordion-item.empty .research-accordion-header {
    cursor: default;
    background-color: #f8fafc;
    color: #94a3b8;
}

.research-category-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-dark);
}

.research-accordion-item.active .research-category-title {
    color: var(--primary-gold);
}

.research-accordion-header i {
    color: var(--primary-gold);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.research-accordion-item.active .research-accordion-header i {
    transform: rotate(180deg);
}

.upcoming-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    background-color: #e2e8f0;
    color: #64748b;
    border-radius: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.research-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #f8fafc;
    border-top: 1px solid transparent;
}

.research-accordion-item.active .research-accordion-body {
    border-top-color: #e2e8f0;
}

.research-cards-grid {
    padding: 25px;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .research-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

.research-case-card {
    background-color: var(--light-surface);
    border-radius: 6px;
    padding: 25px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.research-meta {
    font-size: 0.85rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.research-meta::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--primary-gold);
    border-radius: 50%;
    margin-right: 8px;
}

.research-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
}

.research-summary {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.research-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.research-btn-product,
.research-btn-link {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: var(--transition);
}

.research-btn-product {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: var(--dark-bg);
}
.research-btn-product i { color: var(--primary-gold); font-size: 0.7rem; }

.research-btn-product:hover {
    border-color: var(--primary-gold);
    background-color: #fef3c7;
}

.research-btn-link {
    background-color: var(--dark-bg);
    color: white;
    border: 1px solid var(--dark-bg);
}
.research-btn-link i { font-size: 0.75rem; }

.research-btn-link:hover {
    background-color: #334155;
}

/* ==========================================
   SEO & Competitor Comparison Section
   ========================================== */
.seo-comparison-section {
    padding: 80px 0;
    background-color: #fcfbfa; /* Warm sand/light background */
    color: #334155; /* Slate grey */
}

.seo-text-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
}

.seo-text-col h2 {
    font-size: 1.5rem;
    color: var(--dark-bg);
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-gold);
    padding-left: 15px;
    line-height: 1.3;
}

.seo-text-col p {
    font-size: 1rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 15px;
}

.comparison-matrix-title {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 20px;
}

.comparison-matrix-title h2 {
    font-size: 2rem;
    color: var(--dark-bg);
    margin-bottom: 10px;
}

.comparison-matrix-title p {
    color: #64748b;
    font-size: 1.1rem;
}

/* Table Wrapper for Responsiveness */
.comparison-matrix-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Competitor Table */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    text-align: left;
    min-width: 750px; /* Ensures readable columns on small screens */
}

.comparison-table th, 
.comparison-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.95rem;
}

.comparison-table th {
    background-color: #1e293b; /* Dark slate header */
    color: white;
    font-weight: 600;
}

.comparison-table tr:hover {
    background-color: #f8fafc;
}

/* Highlight Column Style for arrandee™ */
.comparison-table td.highlight-col {
    background-color: rgba(220, 162, 29, 0.04); /* Very light tint of gold */
    border-left: 2px solid #DCA21D;
    border-right: 2px solid #DCA21D;
    font-weight: 500;
}

.comparison-table th.highlight-col {
    background-color: #DCA21D; /* Distinct gold header */
    color: #1e293b; /* Dark slate text for gold header for legibility */
    font-weight: 700;
    border-left: 2px solid #DCA21D;
    border-right: 2px solid #DCA21D;
}

/* Icons */
.comparison-table td .icon-yes {
    color: #10b981; /* Emerald Green */
    margin-right: 8px;
}

.comparison-table td .icon-no {
    color: #ef4444; /* Rose Red */
    margin-right: 8px;
}

.comparison-table td .icon-warn {
    color: #f59e0b; /* Amber Yellow */
    margin-right: 8px;
}

/* Mobile Media Queries */
@media (max-width: 768px) {
    .seo-comparison-section {
        padding: 50px 0;
    }

    .seo-text-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Restacking each row into its own card made the comparison far too
       long to scan (10 criteria x 4 lines each), and a sideways-scrolling
       table meant visitors could miss columns entirely. Current approach:
       a fixed-layout table sized to fit the screen width with no scrolling
       needed at all. Headers are split into two lines in the markup
       (.th-line1/.th-line2, stacked only at this breakpoint - desktop
       keeps them on one line) so four narrow columns still stay readable. */
    .comparison-matrix-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comparison-table {
        table-layout: fixed;
        width: 100%;
        min-width: 0;
    }

    .comparison-table th:first-child,
    .comparison-table td:first-child {
        width: 22%;
    }

    .comparison-table th:not(:first-child),
    .comparison-table td:not(:first-child) {
        width: 26%;
    }

    .comparison-table th:first-child,
    .comparison-table td:first-child {
        background-color: #1e293b;
        color: white;
        white-space: normal;
        font-size: 0.7rem;
        line-height: 1.25;
        padding: 10px 6px;
        font-weight: 600;
        word-break: break-word;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 6px;
        font-size: 0.72rem;
        white-space: normal;
        word-break: break-word;
    }

    .th-line1,
    .th-line2 {
        display: block;
        line-height: 1.3;
    }

    .comparison-table td .icon-yes,
    .comparison-table td .icon-no,
    .comparison-table td .icon-warn {
        margin-right: 4px;
    }
}

/* ==========================================================================
   Reusable responsive 2-column grid (product hero, applications/advantages,
   knowledge sections, about page). Use class="rg2" instead of inline grid
   styles so a single mobile breakpoint controls all of them.
   ========================================================================== */
.rg2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.rg2.rg2-center { align-items: center; }

@media (max-width: 768px) {
    .rg2 {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* ==========================================================================
   Product Gallery (professional shop-style product imagery)
   ========================================================================== */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.product-gallery-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background: #f1f5f9;
}
.product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}
.product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.product-gallery-thumbs button {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    background: #f1f5f9;
    transition: border-color 0.2s ease;
}
.product-gallery-thumbs button.active,
.product-gallery-thumbs button:hover {
    border-color: var(--primary-gold);
}
.product-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 480px) {
    .product-gallery-thumbs {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
}
.product-gallery-main img { opacity: 1; }

/* ==========================================================================
   Trust Bar: continuously auto-scrolling institution logo marquee
   ========================================================================== */
.trust-bar {
    padding: 40px 0;
    background-color: white;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}
.trust-bar-label {
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 22px;
    font-weight: 600;
}
.trust-bar-viewport {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}
.trust-bar-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 70px;
    animation: trustBarScroll 32s linear infinite;
}
.trust-bar:hover .trust-bar-track {
    animation-play-state: paused;
}
.trust-bar-track img {
    height: 42px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    opacity: 0.75;
    filter: grayscale(15%);
    transition: opacity 0.2s ease;
}
.trust-bar-track a:hover img {
    opacity: 1;
}
@keyframes trustBarScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
    .trust-bar { padding: 28px 0; }
    .trust-bar-track { gap: 45px; animation-duration: 22s; }
    .trust-bar-track img { height: 32px; max-width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
    .trust-bar-track { animation: none; overflow-x: auto; }
}

/* Research-page partner strip: same marquee mechanics, larger logos, full set */
.institutions-marquee .trust-bar-track img {
    height: 55px;
    max-width: 180px;
    opacity: 0.85;
}
@media (max-width: 768px) {
    .institutions-marquee .trust-bar-track img { height: 40px; max-width: 130px; }
}

/* ==========================================================================
   Nav "Resources" dropdown (desktop hover / mobile inline expand)
   ========================================================================== */
.header-right {
    display: flex;
    align-items: center;
    gap: 26px;
}

/* Desktop header layout: logo pinned left, nav truly centered on the page
   (independent of how wide the logo / language selector are), language
   selector pinned right. Mobile keeps the original flex/order-based layout
   further down, since nav becomes position:fixed there anyway. */
@media (min-width: 769px) {
    .header-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 24px;
    }
    .header-container > .logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .header-container > nav#mainNav {
        grid-column: 2;
        grid-row: 1;
    }
    .header-container > .header-right {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
}

/* Language selector: flag-dropdown trigger + menu, EN/DE/ES/FR */
.lang-select {
    position: relative;
    flex-shrink: 0;
}
.lang-select-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--dark-bg);
    transition: var(--transition);
}
.lang-select-btn:hover {
    border-color: var(--primary-gold);
}
.lang-flag {
    display: inline-flex;
    line-height: 0;
}
.lang-flag svg {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.lang-select-caret {
    font-size: 0.6rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}
.lang-select.open .lang-select-caret {
    transform: rotate(180deg);
}
.lang-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    padding: 6px;
    min-width: 230px;
    z-index: 1010;
    list-style: none;
    margin: 0;
}
.lang-select.open .lang-select-menu {
    display: block;
}
.lang-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-bg);
    text-decoration: none;
    cursor: pointer;
}
a.lang-select-option:hover {
    background: var(--light-bg);
    color: var(--primary-gold);
}
.lang-select-option.active {
    background: rgba(212, 175, 55, 0.12);
    color: var(--primary-gold);
}
.lang-select-option.lang-select-disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}
.lang-select-option.lang-select-disabled em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #cbd5e1;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .header-right { gap: 12px; }
}
@media (max-width: 768px) {
    /* nav itself is position:fixed and toggled via nav.active (see mobile nav rules
       below), so it's out of flow here — header-right just needs to sit at the
       far right of the bar, in the slot the old .language-selector used. */
    .header-right {
        order: 3;
        margin-left: auto;
        gap: 0;
    }
}

.nav-dropdown {
    position: relative;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    padding: 10px;
    padding-top: 18px;
    margin-top: 10px;
    min-width: 260px;
    width: max-content;
    max-width: 340px;
    z-index: 500;
    list-style: none;
}
/* Invisible bridge so moving the mouse from the link down into the menu
   never leaves the hoverable area (fixes the dead-zone gap). */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 24px;
    z-index: 499;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-menu li { border-bottom: none !important; }
.nav-dropdown-menu a {
    display: block;
    padding: 10px 14px !important;
    border-radius: 6px;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    white-space: normal;
    color: var(--dark-bg);
}
.nav-dropdown-menu a:hover {
    background-color: var(--light-bg);
    color: var(--primary-gold);
}
/* Separate chevron button that only opens/closes the mobile submenu, so the
   "Guides" text itself stays a normal link straight to the guides overview
   page. Invisible on desktop, where hover already opens the dropdown. */
.nav-dropdown-arrow {
    display: none;
}

@media (max-width: 768px) {
    .nav-dropdown {
        position: relative;
    }
    .nav-dropdown-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        background: none;
        border: none;
        border-left: 1px solid #eee;
        color: var(--dark-bg);
        font-size: 0.9rem;
        cursor: pointer;
    }
    .nav-dropdown.open .nav-dropdown-arrow {
        transform: rotate(180deg);
    }
    .nav-dropdown-menu {
        display: none;
        position: static;
        transform: none;
        box-shadow: none;
        padding: 0 0 0 15px;
        min-width: 0;
        border-radius: 0;
    }
    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }
}

/* ==========================================================================
   Product gallery: prev/next arrows + click-to-enlarge lightbox
   ========================================================================== */
.product-gallery-main {
    position: relative;
}
.product-gallery-main img {
    cursor: zoom-in;
}
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--dark-bg);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
.gallery-arrow:hover {
    background: white;
    transform: translateY(-50%) scale(1.08);
}
.gallery-arrow.gallery-prev { left: 12px; }
.gallery-arrow.gallery-next { right: 12px; }
.gallery-zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 0.78rem;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.product-gallery-thumbs button {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.92);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.gallery-lightbox.active {
    display: flex;
}
.gallery-lightbox img {
    max-width: min(90vw, 900px);
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    background: white;
}
.gallery-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-lightbox-close:hover { background: rgba(255,255,255,0.3); }
.gallery-lightbox .gallery-arrow {
    background: rgba(255,255,255,0.15);
    color: white;
}
.gallery-lightbox .gallery-arrow:hover { background: rgba(255,255,255,0.3); }
.gallery-lightbox .gallery-prev { left: 20px; }
.gallery-lightbox .gallery-next { right: 20px; }
@media (max-width: 600px) {
    .gallery-arrow { width: 36px; height: 36px; font-size: 1rem; }
    .gallery-zoom-hint { display: none; }
}

/* ==========================================================================
   Product hero info block (price / delivery / quick facts) — shop layout
   ========================================================================== */
.product-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.product-price-row .product-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-gold);
}
.product-delivery-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
}
/* Slim inline delivery-time line under the price — no box/border, reads as
   ordinary text rather than a callout. */
.product-delivery-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #16a34a;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 20px;
}
.product-delivery-line i {
    font-size: 0.85rem;
}
/* Horizontal trust strip below the whole product hero (image + info), styled
   after a typical shop trust bar: one row of equal columns, gold checkmarks,
   thin dividers between them. */
.product-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.product-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 14px;
    text-align: center;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--dark-bg);
    border-right: 1px solid #e2e8f0;
}
.product-trust-item:last-child {
    border-right: none;
}
.product-trust-item i {
    color: var(--primary-gold);
    font-size: 0.95rem;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .product-trust-strip {
        grid-template-columns: 1fr;
    }
    .product-trust-item {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .product-trust-item:last-child {
        border-bottom: none;
    }
}

/* Compact fact line under the hero lead sentence — small pill chips so the
   key specs (purity, size, layer thickness) don't read as muted body text */
.product-fact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
}
.product-fact-line span:not(.sep) {
    background-color: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--dark-bg);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}
.product-fact-line .sep {
    display: none;
}
/* "In Stock" called out next to the delivery line, styled like the other
   delivery-time text (green, bold) instead of buried in the muted fact line */
.product-delivery-line .in-stock-flag {
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid #bbf7d0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Currently-unavailable variant of the delivery line (Silver/Platinum are
   paused while supply is sorted out) — amber instead of green, no false
   "1-2 weeks" delivery promise. */
.product-delivery-line.unavailable {
    color: #b45309;
}

/* Callout box explaining that a product is temporarily unavailable but an
   inquiry is still welcome — sits right under the hero fact line on the
   product detail pages. */
.availability-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 20px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #78350f;
}
.availability-notice i {
    color: #b45309;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.availability-notice strong {
    color: #78350f;
}

/* Product cards (homepage "Our Products" + /produkte.html catalog) for a
   metal we're not currently producing: dim + desaturate the photo and add a
   small status ribbon, so it reads as "ask us" rather than "buy now" without
   looking broken or being removed from the catalog. */
.product-card.unavailable .product-image {
    filter: grayscale(80%);
    opacity: 0.6;
}
.product-card .unavailable-ribbon {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background-color: #475569;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* ==========================================================================
   Homepage products section: force 3 equal columns on desktop/tablet
   ========================================================================== */
.products-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}
.products-grid-3 .product-card {
    min-width: 0;
    max-width: none;
}
@media (max-width: 900px) {
    .products-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .products-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Hero directly followed by trust bar, no gap
   ========================================================================== */
.hero + .trust-bar {
    border-top: none;
    margin-top: 0;
}