/* ======== SCHEER - Styles ======== */

/* ======== CSS Custom Properties ======== */
:root {
    /* Brand Colors */
    --color-gold: #a7915d;
    --color-gold-light: #c9b883;
    --color-gold-hover: #c4a86a;

    /* Background Colors */
    --color-bg-dark: #0a0a0a;
    --color-bg-darker: #050505;
    --color-bg-card: #0f0f0f;
    --color-bg-elevated: #1a1a1a;

    /* Text Colors */
    --color-text-primary: #f5f5f0;
    --color-text-secondary: #c9c9c4;
    --color-text-muted: #888888;

    /* Transparency Variants */
    --color-gold-10: rgba(167, 145, 93, 0.1);
    --color-gold-15: rgba(167, 145, 93, 0.15);
    --color-gold-20: rgba(167, 145, 93, 0.2);
    --color-gold-30: rgba(167, 145, 93, 0.3);
    --color-gold-40: rgba(167, 145, 93, 0.4);
    --color-gold-50: rgba(167, 145, 93, 0.5);
    --color-gold-60: rgba(167, 145, 93, 0.6);

    --color-text-70: rgba(245, 245, 240, 0.7);
    --color-text-60: rgba(245, 245, 240, 0.6);
    --color-text-50: rgba(245, 245, 240, 0.5);
    --color-text-40: rgba(245, 245, 240, 0.4);
    --color-text-30: rgba(245, 245, 240, 0.3);

    --color-black-80: rgba(0, 0, 0, 0.8);
    --color-black-70: rgba(0, 0, 0, 0.7);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-30: rgba(0, 0, 0, 0.3);

    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Raleway', sans-serif;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 120px;

    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Borders */
    --border-gold: 1px solid var(--color-gold);
    --border-gold-subtle: 1px solid var(--color-gold-30);
    --border-gold-faint: 1px solid var(--color-gold-15);

    /* Shadows */
    --shadow-gold: 0 0 30px rgba(167, 145, 93, 0.3);
    --shadow-gold-strong: 0 0 50px rgba(167, 145, 93, 0.4);
    --shadow-dark: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ======== Reset & Base Styles ======== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    padding-top: 0;
    margin: 0;
}

/* ======== Scroll Progress ======== */
.scroll-progress {
    display: none !important;
}

@media (max-width: 768px) {
    .scroll-progress {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        box-shadow: none !important;
    }
}

/* ======== TEXT REVEAL ======== */
.reveal-headline {
    opacity: 0;
    transform: translateY(40px);
}

.reveal-headline.reveal-active {
    animation: revealHeadline 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes revealHeadline {
    0% {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Keep child spans' styling but animate the parent */
.reveal-headline span {
    display: inline-block;
}

/* ======== ROTATING GRADIENTS ======== */
@keyframes rotate-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.premium-bg-gradient {
    background: linear-gradient(
        -45deg,
        #0a0a0a 0%,
        #0f0f0f 25%,
        #050505 50%,
        #0f0f0f 75%,
        #0a0a0a 100%
    );
    /* Animation disabled for performance */
}

.premium-bg-gradient-dark {
    background: linear-gradient(
        -45deg,
        #050505 0%,
        #0a0a0a 25%,
        #000000 50%,
        #0a0a0a 75%,
        #050505 100%
    );
    /* Animation disabled for performance */
}

.premium-content-bg {
    background: linear-gradient(
        135deg,
        rgba(10, 10, 10, 0.98) 0%,
        rgba(15, 15, 15, 0.98) 50%,
        rgba(10, 10, 10, 0.98) 100%
    );
    /* Animation disabled for performance */
}

/* Box Color */
.premium-box-bg {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(25, 25, 25, 0.85) 100%);
}

/* ======== UNIFIED HOVER EFFECT ======== */
.service-card,
.feature,
.process-step,
.timeline-card {
    transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover,
.feature:hover,
.process-step:hover,
.timeline-card:hover {
    border: 3px solid #a7915d;
    box-shadow:
        0 0 25px rgba(167, 145, 93, 0.4),
        0 0 50px rgba(167, 145, 93, 0.2),
        inset 0 0 30px rgba(167, 145, 93, 0.08);
    transform: translateY(-8px);
}

/* Disable hover transform for Warum Scheer boxes */
.scheer-essence .service-card:hover {
    transform: translateY(-8px);
    transition: transform 0.2s ease-out;
}

/* Keep number circles stable on hover */
.scheer-essence .service-card .essence-number {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.scheer-essence .service-card:hover .essence-number {
    transform: translateY(8px);
}

/* ======== RESPONSIVE HERO SCALING ======== */

/* Large Desktop (1920px+) - Keep default size */

/* Medium-Large Desktop (1440px - 1919px) - Moderate scaling */

/* ======== END RESPONSIVE HERO SCALING ======== */

/* ======== EFFECTS ======== */

/* SMOOTH SCROLL */
html {
    scroll-behavior: auto;
}

/* PARALLAX EFFECTS */
.parallax-bg {
    /* Disabled for performance */
}

.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-section > .parallax-bg {
    position: absolute;
    inset: -20%;
    background-size: cover;
    background-position: center;
}

/* Disabled */
.glow-text {
    /* animation: glow-pulse 6s ease-in-out infinite; */
    text-shadow: 
        0 0 10px rgba(167, 145, 93, 0.8),
        0 0 20px rgba(167, 145, 93, 0.5),
        0 0 30px rgba(167, 145, 93, 0.3);
}

@keyframes glow-pulse {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(167, 145, 93, 0.8),
            0 0 20px rgba(167, 145, 93, 0.5),
            0 0 30px rgba(167, 145, 93, 0.3);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(167, 145, 93, 1),
            0 0 35px rgba(167, 145, 93, 0.8),
            0 0 50px rgba(167, 145, 93, 0.6),
            0 0 70px rgba(167, 145, 93, 0.4);
    }
}

/* SCROLL FADE IN ANIMATIONS */
.fade-in-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* CTA Section Elemente */
.cta-eyebrow { transition-delay: 0s; }
.cta-title { transition-delay: 0.1s; }
.cta-divider { transition-delay: 0.2s; }
.cta-subtitle { transition-delay: 0.3s; }
.cta-buttons { transition-delay: 0.4s; }

/* Instagram Section Elemente */
.instagram-eyebrow { transition-delay: 0s; }
.instagram-cta-title { transition-delay: 0.1s; }
.instagram-divider { transition-delay: 0.2s; }
.instagram-cta-subtitle { transition-delay: 0.3s; }
.instagram-cta-button { transition-delay: 0.4s; }

.fade-in-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ======== UNTERNEHMEN PAGE STYLES ======== */
.unternehmen-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    background: #0a0a0a;
}

.unternehmen-hero-left {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
    position: relative;
    background: #0a0a0a;
}

.unternehmen-hero-right {
    width: 50%;
    position: relative;
    overflow: hidden;
}

.unternehmen-hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.unternehmen-hero-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 68px;
    font-weight: 300;
    color: #f5f5f0;
    line-height: 1.1;
    margin-bottom: 25px;
}

.unternehmen-hero-content h1 span {
    color: #a7915d;
    display: block;
}

.unternehmen-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    background: linear-gradient(135deg, #a7915d 0%, #c9b883 50%, #a7915d 100%);
    padding: 60px 80px;
    max-width: 1200px;
    margin: -60px auto 0;
    position: relative;
    z-index: 10;
}

.unternehmen-stats::after {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -20px;
    height: 60px;
    background: radial-gradient(ellipse 100% 100% at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 50%, transparent 80%);
    z-index: -1;
    pointer-events: none;
}

.unternehmen-stat {
    text-align: center;
}

.unternehmen-stat-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 300;
    color: #0a0a0a;
    line-height: 1;
}

.unternehmen-stat-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(0,0,0,0.7);
    text-transform: uppercase;
    margin-top: 10px;
}

.unternehmen-story {
    background: #0a0a0a;
    padding: 140px 80px;
}

.unternehmen-story-container {
    max-width: 1100px;
    margin: 0 auto;
}

.unternehmen-story-header {
    text-align: center;
    margin-bottom: 80px;
}

.unternehmen-story-header span {
    font-size: 11px;
    letter-spacing: 4px;
    color: #a7915d;
    text-transform: uppercase;
}

.unternehmen-story-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 300;
    color: #f5f5f0;
    margin-top: 20px;
    line-height: 1.2;
}

.unternehmen-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 80px;
}

.unternehmen-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 300;
    color: #f5f5f0;
    line-height: 1.5;
    border-left: 3px solid #a7915d;
    padding-left: 30px;
}

.unternehmen-text p {
    font-size: 17px;
    line-height: 1.9;
    color: #b0b0a8;
    margin-bottom: 25px;
}

.unternehmen-highlight {
    background: rgba(167, 145, 93, 0.08);
    border: 1px solid rgba(167, 145, 93, 0.2);
    padding: 50px;
    margin-bottom: 80px;
}

.unternehmen-highlight p {
    font-size: 19px;
    line-height: 1.8;
    color: #e8e8e3;
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
}

.unternehmen-leather {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.unternehmen-leather-image {
    aspect-ratio: 4/3;
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
}

.unternehmen-leather-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.unternehmen-leather-text h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    font-weight: 300;
    color: #f5f5f0;
    margin-bottom: 25px;
    line-height: 1.3;
}

.unternehmen-leather-text h3 span {
    color: #a7915d;
}

.unternehmen-leather-text p {
    font-size: 17px;
    line-height: 1.9;
    color: #b0b0a8;
}

.unternehmen-services {
    background: #050505;
    padding: 120px 80px;
}

.unternehmen-services-container {
    max-width: 1100px;
    margin: 0 auto;
}

.unternehmen-services-header {
    text-align: center;
    margin-bottom: 60px;
}

.unternehmen-services-header span {
    font-size: 11px;
    letter-spacing: 4px;
    color: #a7915d;
    text-transform: uppercase;
}

.unternehmen-services-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px;
    font-weight: 300;
    color: #f5f5f0;
    margin-top: 20px;
}

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

.unternehmen-service-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(167, 145, 93, 0.15);
    padding: 40px;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.unternehmen-service-card:hover {
    border-color: rgba(167, 145, 93, 0.4);
    transform: translateY(-3px);
}

.unternehmen-service-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: #a7915d;
    margin-bottom: 15px;
}

.unternehmen-service-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #888;
}

.unternehmen-cta {
    background: linear-gradient(135deg, #a7915d 0%, #c9b883 50%, #a7915d 100%);
    padding: 100px 80px;
    text-align: center;
}

.unternehmen-cta h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px;
    font-weight: 300;
    color: #0a0a0a;
    margin-bottom: 20px;
}

.unternehmen-cta p {
    font-size: 18px;
    color: rgba(0,0,0,0.7);
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.unternehmen-cta-btn {
    display: inline-block;
    padding: 16px 45px;
    background: #0a0a0a;
    color: #f5f5f0;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.unternehmen-cta-btn:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
}

/* UNTERNEHMEN RESPONSIVE */

/* SCALE IN */
.scale-in {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ======== PAGE TRANSITIONS ======== */
.page-section {
    animation: fadeInPage 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Hidden pages are not rendered */
.page-section[style*="display: none"] {
    content-visibility: hidden;
}

/* Pause animations on hidden pages — removed expensive * selector.
   display: none already pauses all descendant animations automatically. */

.page-section.page-exit {
    animation: fadeOutPage 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

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

@keyframes fadeOutPage {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-15px);
    }
}

/* Loading Animation Overlay */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #0a0a0a 0%, #0f0f0f 25%, #050505 50%, #0f0f0f 75%, #0a0a0a 100%); 
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.page-loader.active {
    opacity: 1;
    pointer-events: all;
}

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

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(167, 145, 93, 0.1);
    border-top-color: #a7915d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

.loader-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: #a7915d;
    letter-spacing: 3px;
}

/* ======== RIPPLE EFFECT ======== */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(167, 145, 93, 0.4);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

/* White ripple for hero buttons */
.hero-cta .btn .ripple {
    background: rgba(245, 245, 240, 0.3);
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ======== UNTERNEHMEN ANIMATIONS ======== */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% { opacity: 0.6; }
    50% {
        transform: translateY(-50px) translateX(30px);
        opacity: 0.8;
    }
    90% { opacity: 0.6; }
}

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

@keyframes expandWidth {
    from { width: 0; }
    to { width: 150px; }
}

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

@keyframes scrollWheel {
    0% { opacity: 1; top: 8px; }
    100% { opacity: 0; top: 25px; }
}

/* Card Hover Effects */
.premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(0,0,0,0.6);
}

.premium-card:hover > div[style*="border-top"] {
    width: 80px;
    height: 80px;
}

.premium-card:hover > div[style*="left: -100%"] {
    left: 100%;
}

.premium-card:hover > div[style*="height: 0"] {
    height: 100%;
}

/* Service Card Enhanced Hover */
.service-card:hover > div[style*="left: -100%"] {
    left: 100%;
}

.service-card:hover > div[style*="border-radius: 50%"] {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 15px 40px rgba(167, 145, 93, 0.4);
}

/* Reveal on Scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ======== ANIMATIONS ======== */
@keyframes lineGlow {
    0%, 100% {
        opacity: 0.3;
        box-shadow: 0 0 10px rgba(167, 145, 93, 0.3);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 30px rgba(167, 145, 93, 0.8);
    }
}

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

/* Timeline Scrollbar Styling */
.timeline-scroll::-webkit-scrollbar {
    height: 8px;
}

.timeline-scroll::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.timeline-scroll::-webkit-scrollbar-thumb {
    background: #a7915d;
    border-radius: 4px;
}

.timeline-scroll::-webkit-scrollbar-thumb:hover {
    background: #c9b883;
}

/* Timeline Item Hover */
.timeline-item:hover {
    transform: translateY(-10px);
    border-color: #a7915d;
    box-shadow: 0 20px 60px rgba(167, 145, 93, 0.3);
}

/* Circle Hover Effects */
.reveal-on-scroll:hover > div[style*="border-radius: 50%"] {
    transform: scale(1.05);
    border-color: #a7915d;
    box-shadow: 0 0 40px rgba(167, 145, 93, 0.4);
}

/* 3D TILT EFFECT */
.tilt-3d {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    backface-visibility: hidden;
}

.tilt-3d:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(10deg) translateZ(30px);
}

/* ======== END EFFECTS ======== */

.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(-45deg, #050505 0%, #0a0a0a 25%, #000000 50%, #0a0a0a 75%, #050505 100%);
    padding-top: 120px;
    margin-bottom: 0;
    overflow: hidden;
}

/* Multi-Layer Parallax Background */
.hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* will-change: transform; - disabled for Safari performance */
}

.hero-bg-layer-1 {
    z-index: 1;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    opacity: 0.3;
}

.hero-bg-layer-2 {
    z-index: 2;
    /* transform-style: preserve-3d; - disabled for Safari performance */
    opacity: 1;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    /* filter: brightness(0.65); */
}

/* Video darkening overlay - replaces filter for better Chrome performance */
.hero-bg-layer-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}

/* ORIGINAL: filter: blur(20px) → blur(0) - verursacht 233ms GPU-Stutter */
@keyframes heroVideoReveal {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Subtiler Gold-Overlay - mix-blend-mode disabled for Safari performance */
.hero-bg-layer-2::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.06) 0%, transparent 60%);
    /* mix-blend-mode: overlay; */
    pointer-events: none;
}

/* Reveal Animation */
@keyframes heroImageReveal {
    0% {
        opacity: 0;
        filter: sepia(15%) saturate(90%) brightness(55%) contrast(115%) blur(20px);
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        filter: sepia(15%) saturate(90%) brightness(55%) contrast(115%) blur(0);
        transform: scale(1);
    }
}

/* Ken Burns Zoom */
@keyframes heroImageZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.hero-bg-layer-3 {
    z-index: 3;
    background: none;
}

/* Vignette Overlay */

/* Keep old .hero-bg for backwards compatibility */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%) brightness(0.4);
}

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

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 40px 60px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    background: transparent;
    transition: background 0.8s ease;
}

nav a, nav .nav-logo, .language-switcher-nav a {
    text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
    transition: text-shadow 0.8s ease;
}

.nav-logo {
    justify-self: start;
}

.nav-links {
    justify-self: center;
}

/* Nav background on scroll - glass effect */
nav.scrolled {
    background: rgba(10,10,10,0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(167,145,93,0.15);
}

/* Safari Fallback - kein Blur, solider Hintergrund */
.is-safari nav.scrolled {
    background: rgba(10,10,10,0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

nav.scrolled a, nav.scrolled .nav-logo, nav.scrolled .language-switcher-nav a {
    text-shadow: none;
}

.nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 6px;
    color: #a7915d;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
}

.nav-links > li {
    position: relative;
}

.nav-dropdown {
    position: relative;
}

.nav-links a {
    color: #f5f5f0;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    padding: 10px 0;
    position: relative;
}

/* Expanding underline effect */
.nav-links > li > a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 1px;
    background: #a7915d;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}

.nav-links > li > a:hover {
    color: #f5f5f0;
    text-shadow: 0 0 20px rgba(167, 145, 93, 0.5);
}

.nav-links > li > a:hover::after {
    width: 100%;
}

/* Active page indicator */
.nav-links > li > a.active,
.dropdown-menu a.active {
    color: #a7915d;
    font-weight: 400;
}

.nav-links > li > a.active::after {
    width: 100%;
    background: #a7915d;
}

/* Dropdown menu links */
.dropdown-menu a {
    position: relative;
}

.dropdown-menu a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 15px;
    width: 0;
    height: 1px;
    background: #a7915d;
    transition: width 0.3s ease;
}

.dropdown-menu a:hover::after {
    width: calc(100% - 30px);
}

/* Language Switcher */
.language-switcher-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-self: end;
}

/* Mobile-Only Elements - auf Desktop versteckt */
.hamburger-btn,
.mobile-nav-overlay {
    display: none;
}

.lang-flag {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    padding: 5px 8px;
    text-decoration: none;
    outline: none;
    color: #f5f5f0;
}

.lang-flag:hover {
    opacity: 0.8;
    transform: scale(1.05);
    text-decoration: none;
}

.lang-flag.active {
    opacity: 1;
    transform: scale(1.1);
    text-decoration: none;
}

.lang-flag:focus {
    outline: none;
    text-decoration: none;
}

/* Hide language text elements by default */
/* Language text switching */
[data-lang="en"]:not(.lang-flag) {
    display: none;
}

[data-lang="de"]:not(.lang-flag) {
    display: inline;
}

/* When English is active */
body.lang-en [data-lang="de"]:not(.lang-flag) {
    display: none;
}

body.lang-en [data-lang="en"]:not(.lang-flag) {
    display: inline;
}

/* Force button spans to be visible and properly positioned */
.btn [data-lang] {
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.btn:hover [data-lang] {
    opacity: 1;
    visibility: visible;
}

/* Flag visibility - always visible */
.lang-flag {
    display: inline-flex;
}

body.lang-en .lang-flag[data-lang="en"] {
    opacity: 1;
    filter: grayscale(0%);
}

body.lang-en .lang-flag[data-lang="de"] {
    opacity: 0.5;
    filter: grayscale(100%);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(10, 10, 10, 0.98);
    border: 1px solid rgba(167, 145, 93, 0.3);
    list-style: none;
    padding: 20px 0;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    padding: 12px 30px;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #c9c9c4;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu a:hover {
    color: #f5f5f0;
    background: rgba(167, 145, 93, 0.08);
    text-shadow: 0 0 15px rgba(167, 145, 93, 0.4);
}

.hero-content {
    position: relative;
    z-index: 100;
    text-align: center;
    max-width: 1200px;
    padding: 0 40px;
    transform: translate3d(0, 0, 0);
    will-change: opacity;
}

/* ORIGINAL delays: 2.3s / 2.5s - gespreizt + will-change für Layer-Pre-Creation */
.hero-subtitle {
    font-size: 14px;
    letter-spacing: 4px;
    color: #a7915d;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeInUp 2s ease 2.3s forwards;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    will-change: opacity, transform;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 72px;
    font-weight: 400;
    line-height: 1.2;
    color: #f5f5f0;
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeInUp 2s ease 2.6s forwards;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.8);
    will-change: opacity, transform;
}

.hero-title .highlight {
    color: #a7915d;
    font-weight: 500;
}

/* ORIGINAL delays: 2.7s / 2.9s */
.hero-description {
    font-size: 18px;
    line-height: 1.8;
    color: #c9c9c4;
    font-weight: 300;
    letter-spacing: 1px;
    max-width: 700px;
    margin: 0 auto 50px;
    opacity: 0;
    animation: fadeInUp 2s ease 2.9s forwards;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    will-change: opacity, transform;
}

.hero-cta {
    display: inline-flex;
    gap: 30px;
    opacity: 0;
    animation: fadeInUp 2s ease 3.1s forwards;
    will-change: opacity, transform;
}

.hero-cta .btn {
    padding: 18px 45px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid;
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.hero-cta .btn-primary {
    background-color: #a7915d;
    color: #0a0a0a;
    border-color: #a7915d;
}

.hero-cta .btn-primary:hover {
    background-color: #a7915d;
    color: #0a0a0a;
    border-color: #a7915d;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.hero-cta .btn-secondary {
    background-color: transparent;
    color: #f5f5f0;
    border-color: #f5f5f0;
}

.hero-cta .btn-secondary:hover {
    background-color: transparent;
    color: #f5f5f0;
    border-color: #f5f5f0;
    box-shadow: 0 0 20px rgba(245, 245, 240, 0.4);
    transform: translateY(-2px);
}

/* ======== HERO REFINED MINIMAL BUTTON ======== */
.btn-hero-refined {
    position: relative;
    display: inline-block;
    padding: 22px 60px;
    min-width: 320px;
    text-align: center;
    background: transparent;
    border: 1px solid rgba(167, 145, 93, 0.5);
    color: #f5f5f0;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-hero-refined::after {
    content: '';
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: #a7915d;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-hero-refined:hover {
    border-color: #a7915d;
    letter-spacing: 5px;
    color: #a7915d;
    box-shadow: 0 0 40px rgba(167, 145, 93, 0.2);
}

.btn-hero-refined:hover::after {
    width: 60%;
}

/* ======== REFINED MINIMAL BUTTON ======== */
.btn {
    position: relative;
    padding: 18px 45px;
    background: transparent;
    border: 1px solid rgba(167, 145, 93, 0.4);
    color: #f5f5f0;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

.btn::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: #a7915d;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn:hover {
    border-color: #a7915d;
    letter-spacing: 4px;
    color: #a7915d;
    box-shadow: 0 0 30px rgba(167, 145, 93, 0.15);
}

.btn:hover::after {
    width: 60%;
}

.btn span {
    position: relative;
    z-index: 2;
}

/* Primary Button - Filled Version */
.btn-primary {
    background: transparent;
    color: #f5f5f0;
    border-color: rgba(167, 145, 93, 0.5);
}

.btn-primary:hover {
    background: transparent;
    color: #a7915d;
    border-color: #a7915d;
    box-shadow: 0 0 30px rgba(167, 145, 93, 0.15);
}

/* Secondary Button */
.btn-secondary {
    background: transparent;
    color: #f5f5f0;
    border-color: rgba(167, 145, 93, 0.4);
}

.btn-secondary:hover {
    background: transparent;
    color: #a7915d;
    border-color: #a7915d;
}

.btn-secondary:hover span {
    color: #a7915d;
    opacity: 1;
    visibility: visible;
}

/* ======== REFINED CTA BUTTON ======== */
.btn-refined-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 45px;
    background: transparent;
    border: 1px solid rgba(167, 145, 93, 0.4);
    border-radius: 0;
    color: #f5f5f0;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-refined-cta::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: #a7915d;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-refined-cta:hover {
    border-color: #a7915d;
    letter-spacing: 4px;
    color: #a7915d;
    box-shadow: 0 0 30px rgba(167, 145, 93, 0.15);
}

.btn-refined-cta:hover::after {
    width: 60%;
}

/* Modern Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    opacity: 0;
    animation: fadeIn 1s ease 1.8s forwards;
    z-index: 10;
    cursor: pointer;
}

.scroll-text {
    font-size: 10px;
    letter-spacing: 3px;
    color: #a7915d;
    text-transform: uppercase;
    font-weight: 300;
}

/* Scroll Indicator */
.scroll-arrow-container {
    width: 24px;
    height: 50px;
    border: 2px solid rgba(167,145,93,0.5);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-arrow {
    width: 4px;
    height: 8px;
    background: #a7915d;
    border-radius: 2px;
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
    0% { 
        transform: translateY(0);
        opacity: 0;
    }
    40% { 
        opacity: 1;
    }
    80% { 
        transform: translateY(20px);
        opacity: 0;
    }
    100% { 
        transform: translateY(20px);
        opacity: 0;
    }
}

/* Keep old .scroll-line for backwards compat */
.scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, #a7915d, transparent);
    animation: scrollMove 1.5s ease-in-out infinite;
}

@keyframes scrollMove {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(20px); opacity: 0.3; }
}

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

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

/* Why Scheer Section */
.why-scheer {
    padding: 120px 40px;
    background: linear-gradient(180deg, #0a0a0a 0%, #0a0a0a 50%, #0a0a0a 100%);
}

.why-scheer .section-title {
    color: #a7915d;
}

.why-scheer .feature {
    background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
    border: 2px solid #a7915d;
    padding: 40px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
}

.why-scheer .feature-title {
    color: #f5f5f0;
    font-weight: 500;
}

.why-scheer .feature-description {
    color: #c9c9c4;
}

.why-scheer .feature-icon svg path {
    stroke: #a7915d;
}

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

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 400;
    text-align: center;
    color: #a7915d;
    margin-bottom: 80px;
    letter-spacing: 2px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.feature {
    text-align: center;
    padding: 40px 20px;
}

.feature-icon {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.feature-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 500;
    color: #f5f5f0;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.feature-description {
    font-size: 15px;
    line-height: 1.8;
    color: #c9c9c4;
    font-weight: 300;
}

/* ======== CTA SECTION ======== */
.cta-section {
    padding: 120px 40px;
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #121212 100%);
    position: relative;
    overflow: hidden;
}

/* Floating Particles Background */
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #a7915d, transparent);
    z-index: 2;
}

.cta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(167, 145, 93, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Animated Background Glow */
@keyframes cta-glow-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.cta-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 3;
}

/* Title with Glow Effect */
.cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 400;
    color: #f5f5f0;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.cta-subtitle {
    font-size: 18px;
    line-height: 1.8;
    color: #c9c9c4;
    font-weight: 300;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 25px;
    justify-content: center;
    margin-bottom: 60px;
}

/* Primary Button with Shine Effect */
.btn-cta-primary {
    padding: 20px 50px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #a7915d;
    color: #0a0a0a;
    border: 1px solid #a7915d;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

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

.btn-cta-primary:hover {
    background-color: transparent;
    color: #a7915d;
    transform: translateY(-5px) perspective(1000px) rotateX(5deg);
    box-shadow: 
        0 15px 40px rgba(167, 145, 93, 0.4),
        0 5px 15px rgba(167, 145, 93, 0.3);
}

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

/* Secondary Button with 3D Effect */
.btn-cta-secondary {
    padding: 20px 50px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    color: #f5f5f0;
    border: 1px solid #f5f5f0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 400;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.btn-cta-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f5f5f0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-cta-secondary:hover {
    color: #0a0a0a;
    transform: translateY(-5px) perspective(1000px) rotateX(5deg);
    box-shadow: 
        0 15px 40px rgba(245, 245, 240, 0.3),
        0 5px 15px rgba(245, 245, 240, 0.2);
}

.btn-cta-secondary:hover::before {
    transform: scaleX(1);
}

/* Info Section with Animation */
.cta-info {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
    position: relative;
}

.cta-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: #a7915d;
    animation: line-expand 1s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes line-expand {
    to {
        width: 200px;
    }
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.3s ease;
}

.info-item:hover {
    transform: translateY(-3px);
}

.info-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a7915d;
    font-weight: 300;
}

.info-value {
    font-size: 16px;
    color: #f5f5f0;
    font-weight: 400;
}

/* Maßschuhe Section */
.massschuhe-section {
    padding: 120px 40px;
    background: linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #0a0a0a 100%);
    position: relative;
}

.massschuhe-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #a7915d, transparent);
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.section-intro {
    font-size: 17px;
    line-height: 1.8;
    color: #c9c9c4;
    font-weight: 300;
    margin-top: 25px;
}

.process-steps {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
}

.step {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
}

.step:last-child {
    margin-bottom: 0;
}

.step-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 300;
    color: #a7915d;
    min-width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #a7915d;
    box-shadow: 0 0 15px rgba(167, 145, 93, 0.4);
    position: relative;
    background: linear-gradient(-45deg, #0a0a0a 0%, #0f0f0f 25%, #050505 50%, #0f0f0f 75%, #0a0a0a 100%); 
}

.step-content {
    flex: 1;
    padding-top: 10px;
}

.step-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    color: #f5f5f0;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.step-description {
    font-size: 16px;
    line-height: 1.8;
    color: #c9c9c4;
    font-weight: 300;
}

.process-note {
    text-align: center;
    margin-top: 80px;
    padding: 40px;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
    border-bottom: 1px solid rgba(167, 145, 93, 0.2);
}

.process-note p {
    font-size: 15px;
    color: #a7915d;
    font-weight: 300;
    letter-spacing: 1px;
    font-style: italic;
}

/* Unternehmen Section */
.unternehmen-section {
    padding: 120px 40px;
    background: linear-gradient(to bottom, #0a0a0a 0%, #0a0a0a 100%);
    position: relative;
}

/* Unternehmen Background Image - Schaufenster Front */
.unternehmen-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/image-02.webp');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) brightness(0.35) contrast(1.1);
    opacity: 0.6;
    z-index: 0;
}

.unternehmen-section > .container {
    position: relative;
    z-index: 1;
}

.unternehmen-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #a7915d, transparent);
    z-index: 2;
}

.heritage-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    margin-bottom: 80px;
}

.heritage-text {
    max-width: 700px;
}

.heritage-intro {
    margin: 30px 0 60px;
}

.heritage-intro p {
    font-size: 18px;
    line-height: 1.8;
    color: #c9c9c4;
    font-weight: 300;
}

.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #a7915d, transparent);
}

.timeline-item {
    margin-bottom: 50px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -45px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: #a7915d;
    border-radius: 50%;
}

.timeline-year {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: #a7915d;
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.timeline-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: #f5f5f0;
    font-weight: 500;
    margin-bottom: 12px;
}

.timeline-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #c9c9c4;
    font-weight: 300;
}

.heritage-highlight {
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
}

.highlight-box {
    text-align: center;
    padding: 40px 30px;
    border: 1px solid rgba(167, 145, 93, 0.3);
    background: rgba(167, 145, 93, 0.05);
}

.highlight-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    font-weight: 400;
    color: #a7915d;
    margin-bottom: 10px;
}

.highlight-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c9c9c4;
    font-weight: 300;
}

.heritage-quote {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 0;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
    text-align: center;
}

.heritage-quote blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    line-height: 1.6;
    color: #f5f5f0;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 25px;
}

.heritage-quote cite {
    font-size: 14px;
    letter-spacing: 2px;
    color: #a7915d;
    font-style: normal;
    text-transform: uppercase;
}

/* Testimonials Section */
.testimonials-section {
    padding: 120px 40px;
    position: relative;
    overflow: hidden;
}

.testimonials-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('../images/testimonials.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0;
    animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

@keyframes sectionBgReveal {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.testimonials-gold-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 1;
}

.testimonials-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

@keyframes testimonialsZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.testimonials-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 50%, rgba(167, 145, 93, 0.03) 0%, transparent 50%),
                      radial-gradient(circle at 70% 50%, rgba(167, 145, 93, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 2;
}

.testimonials-section .section-title {
    color: #a7915d;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
    position: relative;
    z-index: 2;
}

.testimonial-card {
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.12) 0%, rgba(20, 20, 20, 0.85) 100%);
    border: 3px solid #a7915d;
    padding: 40px 35px;
    border-radius: 4px;
    transform-style: preserve-3d;
    position: relative;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 30px;
    height: 30px;
    border-top: 2px solid rgba(167, 145, 93, 0.4);
    border-left: 2px solid rgba(167, 145, 93, 0.4);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.testimonial-card::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border-bottom: 2px solid rgba(167, 145, 93, 0.4);
    border-right: 2px solid rgba(167, 145, 93, 0.4);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.testimonial-card:hover {
    border: 3px solid #a7915d;
    box-shadow: 
        0 0 25px rgba(167, 145, 93, 0.4),
        0 0 50px rgba(167, 145, 93, 0.2),
        inset 0 0 30px rgba(167, 145, 93, 0.08);
    transform: translateY(-8px);
}

.testimonial-card:hover::before,
.testimonial-card:hover::after {
    width: 50px;
    height: 50px;
    border-color: #a7915d;
}

.testimonial-stars {
    color: #a7915d;
    font-size: 20px;
    margin-bottom: 25px;
    letter-spacing: 3px;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.8;
    color: #f5f5f0;
    font-weight: 400;
    margin-bottom: 30px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 20px;
    border-top: 1px solid rgba(167, 145, 93, 0.3);
}

.author-name {
    font-size: 14px;
    font-weight: 600;
    color: #f5f5f0;
    letter-spacing: 1px;
}

.author-location {
    font-size: 13px;
    color: #a7915d;
    font-weight: 300;
    letter-spacing: 1px;
}

.testimonials-footer {
    text-align: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
}

.footer-note {
    font-size: 14px;
    color: #a7915d;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
}

/* Footer */
.footer {
    background: #000000;
    padding: 80px 40px 40px;
    border-top: 1px solid rgba(167, 145, 93, 0.3);
}

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

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    margin-bottom: 60px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 400;
    color: #a7915d;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.footer-subtitle {
    font-size: 12px;
    color: #c9c9c4;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
}

.footer-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 500;
    color: #a7915d;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.footer-text {
    font-size: 14px;
    line-height: 1.8;
    color: #c9c9c4;
    font-weight: 300;
}

.footer-text strong {
    color: #f5f5f0;
    font-weight: 400;
}

.footer-hours {
    margin-top: 10px;
}

.footer-link {
    color: #c9c9c4;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    font-size: 14px;
}

.footer-link:hover {
    color: #a7915d;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-social {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.social-link {
    font-size: 13px;
    color: #c9c9c4;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    border: 1px solid rgba(167, 145, 93, 0.3);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.social-link:hover {
    border-color: #a7915d;
    color: #a7915d;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
}

.footer-copyright {
    font-size: 12px;
    color: #c9c9c4;
    font-weight: 300;
}

.footer-made {
    font-size: 12px;
    color: #a7915d;
    font-weight: 300;
    letter-spacing: 1px;
    font-style: italic;
}

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

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

@keyframes fadeInBlur {
    from { 
        opacity: 0; 
        filter: blur(10px);
    }
    to { 
        opacity: 1; 
        filter: blur(0);
    }
}

@keyframes fadeInScale {
    from { 
        opacity: 0; 
        transform: scale(0.8);
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

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

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

    @keyframes erwinWurmZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.08); }
    }

    

    .kreationen-img-wrapper:hover img {
        transform: scale(1.05);
    }
    
    .kreationen-spotlight {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 30% 20%, rgba(167, 145, 93, 0.15) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }
    
    .kreationen-img-wrapper:hover .kreationen-spotlight {
        opacity: 1;
    }
    
    .kreationen-frame {
        position: absolute;
        inset: 0;
        border: 2px solid #a7915d;
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
        pointer-events: none;
    }
    
    .kreationen-corner {
        display: none;
    }
    
    
    
    /* kreationen-items use fade-in-up directly — old animation system removed */
    
    .kreationen-img-wrapper:hover img {
        transform: scale(1.05);
    }
    
    .kreationen-beschreibung {
        text-align: center;
        padding: 20px 10px;
    }
    
    .kreationen-name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 24px;
        font-weight: 400;
        color: #f5f5f0;
        margin-bottom: 5px;
    }
    
    .kreationen-type {
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #a7915d;
    }
    
    @keyframes kreationFadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .kreationen-btns-container {
        margin-top: 60px;
        opacity: 1;
        position: relative;
        z-index: 10;
    }
    
    /* Scroll Indicator - eigenes Timing */
    .kreationen-scroll-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        cursor: pointer;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease, color 0.6s ease, background-color 0.6s ease, border-color 0.6s ease;
    }
    
    .kreationen-scroll-indicator.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    .kreationen-scroll-indicator .scroll-text {
        font-family: 'Raleway', sans-serif;
        font-size: 9px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: rgba(167, 145, 93, 0.5);
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    }
    
    .kreationen-scroll-indicator:hover .scroll-text {
        color: #a7915d;
        letter-spacing: 5px;
    }
    
    .kreationen-scroll-indicator .line-container {
        width: 1px;
        height: 50px;
        background: rgba(167, 145, 93, 0.2);
        position: relative;
        overflow: hidden;
    }
    
    .kreationen-scroll-indicator .line-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: #a7915d;
        animation: scrollLineFill 2s ease-in-out infinite;
    }
    
    @keyframes scrollLineFill {
        0% { top: -30%; }
        100% { top: 100%; }
    }
    
    .kreationen-galerie-link {
        margin-top: 50px;
        cursor: pointer;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.6s ease, transform 0.6s ease, color 0.6s ease, background-color 0.6s ease, border-color 0.6s ease;
    }
    
    .kreationen-galerie-link.visible {
        opacity: 0.4;
        transform: translateY(0);
    }
    
    .kreationen-galerie-link span {
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: lowercase;
        color: rgba(245, 245, 240, 0.5);
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    }
    
    .kreationen-galerie-link:hover {
        opacity: 1;
    }
    
    .kreationen-galerie-link:hover span {
        color: #a7915d;
        letter-spacing: 3px;
    }
    
    .kreationen-scroll-btn svg {
        width: 20px;
        height: 20px;
        color: #f5f5f0;
        animation: scrollBounce 2s ease-in-out infinite;
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    
    @keyframes scrollBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(8px); }
    }
    
    .kreationen-scroll-btn:hover > span,

    @keyframes essenceZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.08); }
    }

    
    
    

    @keyframes perfekterSchuhZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.08); }
    }

    

    @keyframes generationenZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.08); }
    }

    /* k.u.k. Shine Animation */
    @keyframes shine-kuk {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        40% {
            transform: translateX(200%);
            opacity: 0;
        }
        100% {
            transform: translateX(200%);
            opacity: 0;
        }
    }
    
    

@keyframes pulse-imperial {
    0%, 100% {
        box-shadow: 
            0 0 0 4px rgba(212,175,55,0.4),
            0 0 25px rgba(212,175,55,0.4),
            0 0 45px rgba(212,175,55,0.2),
            inset 0 3px 6px rgba(255,255,255,0.3);
    }
    50% {
        box-shadow: 
            0 0 0 5px rgba(212,175,55,0.5),
            0 0 35px rgba(212,175,55,0.5),
            0 0 60px rgba(212,175,55,0.3),
            inset 0 3px 6px rgba(255,255,255,0.35);
    }
}

@keyframes pulse-today {
    0%, 100% {
        box-shadow: 
            0 0 0 3px rgba(212,175,55,0.5),
            0 0 35px rgba(212,175,55,0.7),
            inset 0 3px 6px rgba(255,255,255,0.3);
    }
    50% {
        box-shadow: 
            0 0 0 5px rgba(212,175,55,0.7),
            0 0 50px rgba(212,175,55,0.9),
            inset 0 3px 6px rgba(255,255,255,0.4);
    }
}

@keyframes ping {
    75%, 100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

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

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

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

.timeline-card {
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(167,145,93,0.3), 0 5px 20px rgba(0,0,0,0.8);
    border-color: rgba(212,175,55,0.6);
    background: linear-gradient(135deg, rgba(167,145,93,0.15) 0%, rgba(10,10,10,0.95) 100%);
}

.timeline-card:hover .timeline-detail-box {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.timeline-card-imperial:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 20px 60px rgba(212,175,55,0.4),
        0 8px 25px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.15);
    border-color: rgba(212,175,55,0.8);
}

.timeline-card-imperial:hover .timeline-detail-box {
    opacity: 1;
    pointer-events: auto;
}

    @keyframes ctaZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.08); }
    }

    .btn-cta-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(167, 145, 93, 0.5);
    }
    
    .btn-cta-primary:hover > div {
        left: 100%;
    }
    
    .btn-secondary:hover {
        background: rgba(167, 145, 93, 0.1);
        transform: translateY(-2px);
    }
    
    

    @keyframes instagramZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.08); }
    }

    .btn-instagram-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(167, 145, 93, 0.5);
    }
    
    .btn-instagram-primary:hover > div {
        left: 100%;
    }
    
    

    .footer-modern {
        background: transparent;
        position: relative;
        overflow: hidden;
    }
    
    .footer-modern::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 0%, rgba(167, 145, 93, 0.05) 0%, transparent 60%);
        pointer-events: none;
    }
    
    .footer-top {
        padding: 100px 60px 80px;
        border-bottom: 1px solid rgba(167, 145, 93, 0.15);
        position: relative;
        z-index: 2;
    }
    
    .footer-top-inner {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 80px;
    }
    
    .footer-brand {
        max-width: 350px;
    }
    
    .footer-logo {
        font-family: 'Cormorant Garamond', serif;
        font-size: 42px;
        font-weight: 300;
        color: #f5f5f0;
        letter-spacing: 8px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }
    
    .footer-since {
        font-size: 11px;
        letter-spacing: 4px;
        color: #a7915d;
        text-transform: uppercase;
        margin-bottom: 30px;
    }
    
    .footer-brand-text {
        font-size: 15px;
        line-height: 1.8;
        color: rgba(255,255,255,0.5);
        margin-bottom: 35px;
    }
    
    .footer-cta-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 18px 40px;
        background: transparent;
        border: 1px solid rgba(167, 145, 93, 0.4);
        border-radius: 0;
        color: #f5f5f0;
        font-size: 11px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 500;
        cursor: pointer;
        font-family: 'Raleway', sans-serif;
        text-decoration: none;
        overflow: hidden;
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .footer-cta-btn::after {
        content: '';
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 1px;
        background: #a7915d;
        transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .footer-cta-btn:hover {
        border-color: #a7915d;
        letter-spacing: 4px;
        color: #a7915d;
        box-shadow: 0 0 30px rgba(167, 145, 93, 0.15);
        background: transparent;
    }
    
    .footer-cta-btn:hover::after {
        width: 50%;
    }
    
    .footer-cta-btn svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 1.5;
        fill: none;
        transition: transform 0.4s ease;
    }
    
    .footer-cta-btn:hover svg {
        transform: translateY(-3px);
    }
    
    .footer-col-title {
        font-size: 11px;
        letter-spacing: 3px;
        color: #a7915d;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 30px;
    }
    
    .footer-nav {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    
    .footer-nav a {
        font-size: 14px;
        color: rgba(255,255,255,0.6);
        text-decoration: none;
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
        display: inline-block;
    }
    
    .footer-nav a:hover {
        color: #f5f5f0;
        transform: translateX(5px);
    }
    
    .footer-contact-item {
        margin-bottom: 25px;
    }
    
    .footer-contact-label {
        font-size: 10px;
        letter-spacing: 2px;
        color: rgba(167, 145, 93, 0.7);
        text-transform: uppercase;
        margin-bottom: 8px;
    }
    
    .footer-contact-value {
        font-size: 15px;
        color: rgba(255,255,255,0.7);
        line-height: 1.6;
    }
    
    .footer-contact-value a {
        color: rgba(255,255,255,0.7);
        text-decoration: none;
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .footer-contact-value a:hover {
        color: #a7915d;
    }
    
    .footer-social-modern {
        display: flex;
        gap: 15px;
        margin-top: 30px;
    }
    
    .footer-social-link {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 1px solid rgba(167, 145, 93, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .footer-social-link:hover {
        border-color: #a7915d;
        background: rgba(167, 145, 93, 0.1);
    }
    
    .footer-social-link svg {
        width: 18px;
        height: 18px;
        stroke: #a7915d;
        stroke-width: 1.5;
        fill: none;
    }

    /* Footer Badges */
    .footer-badges {
        padding: 40px 60px;
        text-align: center;
        border-top: 1px solid rgba(167, 145, 93, 0.15);
    }

    .footer-badges-img {
        display: block;
        max-width: 500px;
        width: 100%;
        height: auto;
        margin: 0 auto;
        filter: brightness(1.7);
        opacity: 0.9;
    }

    .footer-bottom-modern {
        padding: 35px 60px;
        position: relative;
        z-index: 2;
    }
    
    .footer-bottom-inner {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .footer-copyright-modern {
        font-size: 12px;
        color: rgba(255,255,255,0.4);
    }
    
    .footer-legal {
        display: flex;
        gap: 30px;
    }
    
    .footer-legal a {
        font-size: 12px;
        color: rgba(255,255,255,0.4);
        text-decoration: none;
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .footer-legal a:hover {
        color: #a7915d;
    }

    .footer-credit-line {
        width: 100%;
        text-align: center;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid rgba(167, 145, 93, 0.15);
    }



        /* FAQ Toggle */
        .faq-toggle-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 60px 0 80px 0;
            position: relative;
            z-index: 2;
        }

        .faq-toggle-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-family: var(--font-heading, 'Cormorant Garamond', serif);
            font-size: clamp(20px, 3vw, 28px);
            font-weight: 300;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: rgba(245, 245, 240, 0.3);
            padding: 10px 5px;
            transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
            position: relative;
        }

        .faq-toggle-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: #a7915d;
            transition: width 0.4s ease;
        }

        .faq-toggle-btn:hover {
            color: rgba(245, 245, 240, 0.6);
        }

        .faq-toggle-btn.active {
            color: #f5f5f0;
        }

        .faq-toggle-btn.active::after {
            width: 100%;
        }

        .faq-container {
            max-width: 850px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .faq-category {
            margin-bottom: 80px;
        }

        .faq-category:last-child {
            margin-bottom: 0;
        }

        .faq-category-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 50px;
        }

        .faq-category-line {
            width: 60px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.5));
        }

        .faq-category-line:last-child {
            background: linear-gradient(-90deg, transparent, rgba(167, 145, 93, 0.5));
        }

        .faq-category-title {
            font-family: 'Raleway', sans-serif;
            font-size: 10px;
            letter-spacing: 5px;
            text-transform: uppercase;
            font-weight: 500;
            color: #a7915d;
        }

        .faq-item {
            padding: 30px 0;
            cursor: pointer;
            position: relative;
        }

        .faq-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, rgba(167, 145, 93, 0.3), transparent);
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 40px;
        }

        .faq-q-text {
            font-family: 'Cormorant Garamond', serif;
            font-size: 28px;
            font-weight: 300;
            color: rgba(245, 245, 240, 0.6);
            transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
            line-height: 1.4;
            flex: 1;
        }

        .faq-item:hover .faq-q-text {
            color: #f5f5f0;
        }

        .faq-toggle {
            font-family: 'Raleway', sans-serif;
            font-size: 10px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #a7915d;
            white-space: nowrap;
            padding-top: 10px;
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }

        .faq-item:hover .faq-toggle {
            opacity: 1;
        }

        .faq-item.active .faq-toggle {
            opacity: 0.4;
        }

        .faq-answer {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.4s ease, padding 0.4s ease;
        }

        .faq-answer > * {
            overflow: hidden;
        }

        .faq-item.active .faq-answer {
            grid-template-rows: 1fr;
            padding-top: 30px;
        }

        .faq-a-text {
            font-family: 'Raleway', sans-serif;
            font-size: 15px;
            line-height: 1.9;
            color: rgba(245, 245, 240, 0.5);
            max-width: 90%;
        }
        
        

        @keyframes reparaturHeroZoom {
            0% { transform: scale(1); }
            100% { transform: scale(1.08); }
        }

/* ======== REPARATUR - Horizontale Timeline ======== */

.reparatur-timeline-horizontal {
    position: relative;
    padding: 60px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.reparatur-timeline-line {
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.4), rgba(167, 145, 93, 0.4), transparent);
    transform: translateY(-50%);
}

.reparatur-timeline-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(167, 145, 93, 0.8);
}

.reparatur-timeline-label-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.5));
}

.reparatur-timeline-label-line:last-child {
    background: linear-gradient(90deg, rgba(167, 145, 93, 0.5), transparent);
}

.reparatur-timeline-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.reparatur-timeline-row:last-child {
    margin-bottom: 0;
}

.reparatur-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 25px 15px;
    background: linear-gradient(180deg, rgba(20, 20, 18, 0.6) 0%, rgba(15, 15, 13, 0.8) 100%);
    border: 1px solid rgba(167, 145, 93, 0.15);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.reparatur-timeline-item:hover {
    border-color: rgba(167, 145, 93, 0.4);
    background: linear-gradient(180deg, rgba(167, 145, 93, 0.08) 0%, rgba(15, 15, 13, 0.9) 100%);
    transform: translateY(-5px);
}

.reparatur-timeline-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 300;
    color: rgba(167, 145, 93, 0.3);
    line-height: 1;
    margin-bottom: 15px;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.reparatur-timeline-item:hover .reparatur-timeline-number {
    color: rgba(167, 145, 93, 0.7);
}

.reparatur-timeline-dot {
    width: 8px;
    height: 8px;
    background: #a7915d;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 0 15px rgba(167, 145, 93, 0.4);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.reparatur-timeline-item:hover .reparatur-timeline-dot {
    transform: scale(1.5);
    box-shadow: 0 0 25px rgba(167, 145, 93, 0.6);
}

.reparatur-timeline-title {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.85);
    margin: 0;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.reparatur-timeline-item:hover .reparatur-timeline-title {
    color: #f5f5f0;
}

/* Tablet */
@media (max-width: 1024px) {
    .reparatur-timeline-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .reparatur-timeline-line {
        display: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .reparatur-timeline-label {
        font-size: 14px;
        letter-spacing: 2px;
        gap: 15px;
        margin-bottom: 20px;
    }

    .reparatur-timeline-label-line {
        width: 40px;
    }

    .reparatur-timeline-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 40px;
    }

    .reparatur-timeline-item {
        padding: 20px 10px;
    }

    .reparatur-timeline-number {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .reparatur-timeline-title {
        font-size: 11px;
        letter-spacing: 1px;
    }
}

@media (max-width: 480px) {
    .reparatur-timeline-row {
        grid-template-columns: repeat(2, 1fr);
    }
}



            /* ======== REPARATUR PAGE - MOBILE ======== */
            

        @keyframes reparaturVorherZoom {
            0% { transform: scale(1); }
            100% { transform: scale(1.08); }
        }

        @keyframes massschuheHeroZoom {
            0% { transform: scale(1); }
            100% { transform: scale(1.08); }
        }

    @keyframes heroBgFadeIn {
        from { opacity: 0; }
        to { opacity: 0.35; }
    }

    /* ======== GALLERY STYLES ======== */

    /* Mobile Filter - hidden on desktop */
    .mobile-filter-btn,
    .mobile-filter-overlay {
        display: none !important;
    }

    /* === STICKY CATEGORY NAV === */
    .scheer-gallery-nav {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(5, 5, 5, 0.98);
        border-bottom: 1px solid rgba(167, 145, 93, 0.12);
        padding: 0;
        width: 100%;
        display: none;
    }
    
    /* Gallery Sidebar Navigation */
    .scheer-gallery-sidebar {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%) translateX(-100%);
        z-index: 999;
        background: rgba(5, 5, 5, 0.95);
        border-right: 1px solid rgba(167, 145, 93, 0.2);
        padding: 20px 0;
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    }
    
    .scheer-gallery-sidebar.visible {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
    
    .scheer-gallery-sidebar.visible.collapsed {
        transform: translateY(-50%) translateX(-100%);
    }
    
    /* Sidebar Toggle Button - inside sidebar top right */
    .scheer-sidebar-toggle {
        position: absolute;
        right: 8px;
        top: 8px;
        z-index: 1001;
        width: 22px;
        height: 22px;
        background: transparent;
        border: 1px solid rgba(167, 145, 93, 0.3);
        border-radius: 3px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .scheer-sidebar-toggle:hover {
        background: rgba(167, 145, 93, 0.2);
        border-color: #a7915d;
    }
    
    .scheer-sidebar-toggle::after {
        content: '‹';
        font-family: 'Cormorant Garamond', serif;
        font-size: 14px;
        color: rgba(167, 145, 93, 0.6);
        line-height: 1;
    }
    
    .scheer-sidebar-toggle:hover::after {
        color: #a7915d;
    }
    
    /* Reopen button when collapsed */
    .scheer-sidebar-reopen {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        width: 20px;
        height: 40px;
        background: rgba(5, 5, 5, 0.9);
        border: 1px solid rgba(167, 145, 93, 0.3);
        border-left: none;
        border-radius: 0 3px 3px 0;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .scheer-sidebar-reopen.visible {
        display: flex;
    }
    
    .scheer-sidebar-reopen:hover {
        background: rgba(167, 145, 93, 0.2);
    }
    
    .scheer-sidebar-reopen::after {
        content: '›';
        font-family: 'Cormorant Garamond', serif;
        font-size: 14px;
        color: #a7915d;
    }
    
    .scheer-gallery-sidebar-btn {
        display: block;
        width: 100%;
        padding: 14px 30px 14px 20px;
        font-family: 'Raleway', sans-serif;
        font-size: 9px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(245, 245, 240, 0.4);
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
        white-space: nowrap;
        position: relative;
    }
    
    .scheer-gallery-sidebar-btn::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 1px;
        background: linear-gradient(90deg, #a7915d, transparent);
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .scheer-gallery-sidebar-btn:hover {
        color: #f5f5f0;
        padding-left: 28px;
    }
    
    .scheer-gallery-sidebar-btn:hover::before {
        width: 18px;
    }
    
    .scheer-gallery-sidebar-btn.active {
        color: #a7915d;
        padding-left: 28px;
    }
    
    .scheer-gallery-sidebar-btn.active::before {
        width: 18px;
        background: #a7915d;
    }
    
    .scheer-gallery-nav-inner {
        width: 100%;
        display: flex;
        gap: 0;
    }
    
    .scheer-gallery-nav-inner::-webkit-scrollbar { display: none; }
    
    .scheer-gallery-nav-btn {
        flex: 1;
        text-align: center;
        padding: 28px 20px;
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: rgba(245, 245, 240, 0.4);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
    }
    
    .scheer-gallery-nav-btn::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 1px;
        background: #a7915d;
        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .scheer-gallery-nav-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 0%, rgba(167, 145, 93, 0.08) 100%);
        opacity: 0;
        transition: opacity 0.5s ease;
    }
    
    .scheer-gallery-nav-btn:hover {
        color: #f5f5f0;
    }
    
    .scheer-gallery-nav-btn:hover::before {
        width: 50%;
        left: 25%;
    }
    
    .scheer-gallery-nav-btn:hover::after {
        opacity: 1;
    }
    
    .scheer-gallery-nav-btn.active {
        color: #a7915d;
    }
    
    .scheer-gallery-nav-btn.active::before {
        width: 100%;
        left: 0;
    }
    
    .scheer-gallery-nav-btn.active::after {
        opacity: 1;
        background: linear-gradient(180deg, transparent 0%, rgba(167, 145, 93, 0.12) 100%);
    }
    
    /* === GALLERY SECTION === */
    .scheer-gallery-section {
        padding: 140px 60px;
        background: transparent;
        position: relative;
        overflow: hidden;
        min-height: 100vh;
        z-index: 1;
    }
    
    .scheer-gallery-section:nth-child(odd) {
        background: transparent;
    }
    
    /* Ambient Background Glow */
    .scheer-gallery-section::before {
        content: '';
        position: absolute;
        top: 20%;
        left: 50%;
        width: 800px;
        height: 800px;
        background: radial-gradient(circle, rgba(167, 145, 93, 0.03) 0%, transparent 70%);
        transform: translateX(-50%);
        pointer-events: none;
    }
    
    /* === SECTION HEADER === */
    .scheer-gallery-header {
        text-align: center;
        margin-bottom: 100px;
        position: relative;
        z-index: 2;
    }
    
    .scheer-gallery-number {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(150px, 20vw, 280px);
        font-weight: 200;
        color: rgba(167, 145, 93, 0.03);
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
        pointer-events: none;
        line-height: 1;
    }
    
    .scheer-gallery-label {
        display: inline-flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .scheer-gallery-label-line {
        width: 60px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.5));
    }
    
    .scheer-gallery-label-text {
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: #a7915d;
        font-weight: 500;
    }
    
    .scheer-gallery-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(48px, 8vw, 80px);
        font-weight: 300;
        color: #f5f5f0;
        margin-bottom: 25px;
        position: relative;
        z-index: 1;
        letter-spacing: 4px;
    }
    
    .scheer-gallery-divider {
        width: 100px;
        height: 1px;
        background: linear-gradient(90deg, transparent, #a7915d, transparent);
        margin: 0 auto 35px;
    }
    
    .scheer-gallery-desc {
        font-family: 'Cormorant Garamond', serif;
        font-size: 20px;
        font-style: italic;
        color: rgba(245, 245, 240, 0.5);
        max-width: 550px;
        margin: 0 auto;
        line-height: 1.7;
    }
    
    /* === PRODUCT GRID === */
    .scheer-gallery-grid {
        display: grid;
        gap: 25px;
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    
    /* Grid variations for different product counts */
    .scheer-gallery-grid.count-2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
    }
    
    .scheer-gallery-grid.count-4 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1000px;
    }
    
    .scheer-gallery-grid.count-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* === PRODUCT ITEM === */
    .scheer-product {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        cursor: pointer;
        background: #ffffff;
    }
    
    /* Compact products for accessoires */
    .scheer-product.compact {
        aspect-ratio: 4/3;
    }
    
    /* Extra compact for 3-product categories */
    .scheer-product.compact-flat {
        aspect-ratio: 16/9;
    }
    
    /* Product Image */
    .scheer-product-img {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #0a0a0a;
        transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    filter 0.8s ease;
        filter: brightness(1) saturate(1);
    }
    
    .scheer-product:hover .scheer-product-img {
        transform: scale(1.05);
        filter: brightness(0.95) saturate(1);
    }
    
    /* Spotlight Effect - follows mouse */
    .scheer-product-spotlight {
        position: absolute;
        inset: 0;
        background: radial-gradient(
            600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(167, 145, 93, 0.12) 0%,
            transparent 40%
        );
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: 2;
        pointer-events: none;
    }
    
    .scheer-product:hover .scheer-product-spotlight {
        opacity: 1;
    }
    
    /* Gold Frame - always visible */
    .scheer-product-frame {
        position: absolute;
        inset: 0;
        border: 2px solid #a7915d;
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
        z-index: 3;
        pointer-events: none;
    }
    
    .scheer-product:hover .scheer-product-frame {
        box-shadow: 0 0 40px rgba(167, 145, 93, 0.15);
    }
    
    /* Corner Accents */
    .scheer-product-corner {
        position: absolute;
        width: 25px;
        height: 25px;
        z-index: 4;
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    }
    
    .scheer-product-corner.tl { top: 20px; left: 20px; border-top: 2px solid #a7915d; border-left: 2px solid #a7915d; }
    .scheer-product-corner.tr { top: 20px; right: 20px; border-top: 2px solid #a7915d; border-right: 2px solid #a7915d; }
    .scheer-product-corner.bl { bottom: 20px; left: 20px; border-bottom: 2px solid #a7915d; border-left: 2px solid #a7915d; }
    .scheer-product-corner.br { bottom: 20px; right: 20px; border-bottom: 2px solid #a7915d; border-right: 2px solid #a7915d; }
    
    .scheer-product:hover .scheer-product-corner {
        opacity: 1;
    }
    
    .scheer-product:hover .scheer-product-corner.tl { top: 15px; left: 15px; }
    .scheer-product:hover .scheer-product-corner.tr { top: 15px; right: 15px; }
    .scheer-product:hover .scheer-product-corner.bl { bottom: 15px; left: 15px; }
    .scheer-product:hover .scheer-product-corner.br { bottom: 15px; right: 15px; }
    
    /* Info Overlay */
    .scheer-product-overlay {
        position: absolute;
        inset: 0;
        background: transparent;
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 45px;
        opacity: 0;
        transition: opacity 0.6s ease;
    }
    
    .scheer-product:hover .scheer-product-overlay {
        opacity: 1;
    }
    
    .scheer-product-name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 32px;
        font-weight: 400;
        color: #f5f5f0;
        margin-bottom: 8px;
        transform: translateY(30px);
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
    }
    
    .scheer-product:hover .scheer-product-name {
        transform: translateY(0);
        opacity: 1;
    }
    
    .scheer-product-type {
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #a7915d;
        margin-bottom: 25px;
        transform: translateY(30px);
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    }
    
    .scheer-product:hover .scheer-product-type {
        transform: translateY(0);
        opacity: 1;
    }
    
    .scheer-product-cta {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #f5f5f0;
        transform: translateY(30px);
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    }
    
    .scheer-product:hover .scheer-product-cta {
        transform: translateY(0);
        opacity: 1;
    }
    
    .scheer-product-cta:hover {
        letter-spacing: 4px;
        color: #a7915d;
    }
    
    .scheer-product-cta svg {
        width: 18px;
        height: 18px;
        stroke: #f5f5f0;
        stroke-width: 1.5;
        fill: none;
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    }
    
    .scheer-product-cta:hover svg {
        stroke: #a7915d;
        transform: translateY(-5px);
    }
    
    .scheer-product:hover .scheer-product-cta:hover svg {
        transform: translateY(-8px);
    }
    
    /* === REVEAL ANIMATION === */
    .scheer-product {
        opacity: 0;
        transform: translateY(80px);
    }
    
    .scheer-product.revealed {
        animation: scheerProductReveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    @keyframes scheerProductReveal {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Stagger effect */
    .scheer-product:nth-child(1).revealed { animation-delay: 0s; }
    .scheer-product:nth-child(2).revealed { animation-delay: 0.15s; }
    .scheer-product:nth-child(3).revealed { animation-delay: 0.3s; }
    .scheer-product:nth-child(4).revealed { animation-delay: 0.45s; }
    .scheer-product:nth-child(5).revealed { animation-delay: 0.6s; }
    .scheer-product:nth-child(6).revealed { animation-delay: 0.75s; }
    
    /* === SLIDE-UP DETAIL PANEL === */
    .scheer-product-detail-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(10, 10, 10, 0.98) 0%, rgba(10, 10, 10, 0.95) 100%);
        padding: 30px;
        transform: translateY(100%);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10;
        border-top: 1px solid rgba(167, 145, 93, 0.3);
    }
    
    .scheer-product.details-open .scheer-product-detail-panel {
        transform: translateY(0);
    }
    
    .scheer-product-detail-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 22px;
        font-weight: 400;
        color: #a7915d;
        margin-bottom: 12px;
    }
    
    .scheer-product-detail-text {
        font-family: 'Raleway', sans-serif;
        font-size: 12px;
        line-height: 1.7;
        color: rgba(245, 245, 240, 0.7);
        margin-bottom: 20px;
    }
    
    .scheer-product-detail-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #f5f5f0;
        cursor: pointer;
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .scheer-product-detail-cta:hover {
        letter-spacing: 3px;
        color: #a7915d;
    }
    
    .scheer-product-detail-cta svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 1.5;
        fill: none;
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    }
    
    .scheer-product-detail-cta:hover svg {
        stroke: #a7915d;
        transform: translateX(3px);
    }
    
    .scheer-product-detail-close {
        position: absolute;
        bottom: 15px;
        right: 15px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.3s ease;
    }
    
    .scheer-product-detail-close:hover {
        opacity: 1;
    }
    
    .scheer-product-detail-close svg {
        width: 100%;
        height: 100%;
        stroke: #a7915d;
        stroke-width: 1.5;
        fill: none;
    }
    
    /* === SECTION DIVIDER === */
    .scheer-gallery-section-divider {
        height: 120px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .scheer-gallery-section-divider-line {
        width: 1px;
        height: 60px;
        background: linear-gradient(180deg, transparent, rgba(167, 145, 93, 0.4), transparent);
    }
    
    /* === FINAL CTA === */
    .scheer-gallery-cta {
        padding: 180px 60px;
        text-align: center;
        background: #050505;
        position: relative;
        overflow: hidden;
    }
    
    .scheer-gallery-cta::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1000px;
        height: 1000px;
        background: radial-gradient(circle, rgba(167, 145, 93, 0.06) 0%, transparent 60%);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
    
    .scheer-gallery-cta-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(38px, 6vw, 62px);
        font-weight: 300;
        color: #f5f5f0;
        margin-bottom: 25px;
        position: relative;
    }
    
    .scheer-gallery-cta-title span {
        color: #a7915d;
        font-weight: 400;
    }
    
    .scheer-gallery-cta-text {
        font-family: 'Raleway', sans-serif;
        font-size: 16px;
        color: rgba(245, 245, 240, 0.5);
        max-width: 550px;
        margin: 0 auto 55px;
        line-height: 1.9;
        font-weight: 300;
    }
    
    .scheer-gallery-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        padding: 24px 55px;
        background: linear-gradient(135deg, #a7915d 0%, #c4a86a 100%);
        border: none;
        color: #0a0a0a;
        font-family: 'Raleway', sans-serif;
        font-size: 11px;
        letter-spacing: 4px;
        text-transform: uppercase;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        position: relative;
        overflow: hidden;
    }
    
    .scheer-gallery-cta-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.6s ease;
    }
    
    .scheer-gallery-cta-btn:hover::before {
        left: 100%;
    }
    
    .scheer-gallery-cta-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 60px rgba(167, 145, 93, 0.4);
    }
    
    /* === RESPONSIVE === */

    /* ======== CONTACT FORM - Base Styles ======== */
    .contact-split {
        min-height: 100vh;
        background: #0a0a0a;
    }

    .contact-left {
        display: none;
    }

    .contact-right {
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 100px 40px 60px;
        background: #0a0a0a;
    }

    .contact-container {
        width: 100%;
        max-width: 500px;
    }

    .contact-header {
        text-align: center;
        margin-bottom: 50px;
    }

    .contact-eyebrow {
        font-family: 'Raleway', sans-serif;
        font-size: 11px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: #a7915d;
        margin-bottom: 15px;
    }

    .contact-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 42px;
        font-weight: 300;
        color: #f5f5f0;
        margin-bottom: 15px;
    }

    .contact-subtitle {
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        color: rgba(245, 245, 240, 0.5);
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .form-field {
        position: relative;
        margin-bottom: 25px;
        border-bottom: 1px solid rgba(167, 145, 93, 0.15);
    }

    .form-field input,
    .form-field textarea {
        width: 100%;
        background: transparent;
        border: none;
        padding: 18px 0;
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        color: #f5f5f0;
        outline: none;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
        color: rgba(245, 245, 240, 0.3);
    }

    .form-field textarea {
        min-height: 100px;
        resize: none;
    }

    .form-row {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .custom-select-trigger {
        padding: 18px 0;
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        color: rgba(245, 245, 240, 0.3);
        border-bottom: 1px solid rgba(167, 145, 93, 0.15);
        cursor: pointer;
    }

    /* .contact-submit is now a wrapper div, not a button */

    .contact-info {
        margin-top: 50px;
        text-align: center;
    }

    .contact-info-text {
        font-family: 'Raleway', sans-serif;
        font-size: 13px;
        color: rgba(245, 245, 240, 0.4);
        line-height: 1.8;
    }

    .contact-info-text a {
        color: #a7915d;
        text-decoration: none;
    }

    /* ======== SPLIT-SCREEN CONTACT FORM ======== */
    @media (min-width: 1200px) {

    .contact-split {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Left Side - Logo */
    .contact-left {
        background: #0a0a0a;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        opacity: 0;
        animation: contactFadeIn 1s ease 0.2s forwards;
    }


    .contact-left::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(to bottom, transparent 10%, rgba(167, 145, 93, 0.2) 50%, transparent 90%);
    }
    
    .contact-logo-wrapper {
        position: relative;
        width: 75%;
        max-width: 400px;
        opacity: 0;
        transform: scale(0.95);
        animation: logoFadeIn 1.2s ease 0.5s forwards;
    }
    
    .contact-logo-wrapper img {
        width: 100%;
        height: auto;
    }
    
    @keyframes logoFadeIn {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    /* Right Side - Form */
    .contact-right {
        background: #0f0f0f;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px;
        position: relative;
        opacity: 0;
        animation: contactFadeIn 1s ease 0.3s forwards;
    }
    
    @keyframes contactFadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Staggered form elements */
    .contact-header {
        opacity: 0;
        animation: contactFadeIn 0.8s ease 0.5s forwards;
    }
    
    .contact-form .form-field:nth-child(1) { opacity: 0; animation: contactFadeIn 0.6s ease 0.6s forwards; }
    .contact-form .form-field:nth-child(2) { opacity: 0; animation: contactFadeIn 0.6s ease 0.7s forwards; }
    .contact-form .form-row .form-field:nth-child(1) { opacity: 0; animation: contactFadeIn 0.6s ease 0.65s forwards; }
    .contact-form .form-row .form-field:nth-child(2) { opacity: 0; animation: contactFadeIn 0.6s ease 0.7s forwards; }
    .contact-form .form-field:nth-child(3) { opacity: 0; animation: contactFadeIn 0.6s ease 0.75s forwards; }
    .contact-form .form-field:nth-child(4) { opacity: 0; animation: contactFadeIn 0.6s ease 0.8s forwards; }
    .contact-form .form-field:nth-child(5) { opacity: 0; animation: contactFadeIn 0.6s ease 0.85s forwards; }
    
    .contact-submit {
        opacity: 0;
        animation: contactFadeIn 0.6s ease 0.95s forwards;
    }
    
    .contact-info {
        opacity: 0;
        animation: contactFadeIn 0.6s ease 1.1s forwards;
    }
    
    .contact-container {
        max-width: 480px;
    }
    
    /* Header */
    .contact-header {
        margin-bottom: 55px;
    }
    
    .contact-eyebrow {
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #a7915d;
        margin-bottom: 20px;
    }
    
    .contact-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(36px, 4vw, 48px);
        font-weight: 300;
        color: #f5f5f0;
        letter-spacing: 2px;
        margin-bottom: 15px;
        line-height: 1.15;
    }
    
    .contact-title span {
        color: #a7915d;
        font-style: italic;
    }
    
    .contact-subtitle {
        font-family: 'Cormorant Garamond', serif;
        font-size: 17px;
        font-style: italic;
        color: rgba(245, 245, 240, 0.4);
    }
    
    /* Form */
    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .form-field {
        position: relative;
        border-bottom: 1px solid rgba(167, 145, 93, 0.12);
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    }
    
    .form-field::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 0;
        height: 1px;
        background: #a7915d;
        transition: width 0.4s ease;
    }
    
    .form-field:focus-within::after {
        width: 100%;
    }
    
    .form-field input,
    .form-field textarea,
    .form-field select {
        width: 100%;
        background: transparent;
        border: none;
        padding: 22px 0;
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 0.5px;
        color: #f5f5f0;
        outline: none;
    }
    
    .form-field input::placeholder,
    .form-field textarea::placeholder {
        color: rgba(245, 245, 240, 0.25);
        font-weight: 300;
    }
    
    .form-field input:focus::placeholder,
    .form-field textarea:focus::placeholder {
        color: rgba(167, 145, 93, 0.4);
    }
    
    .form-field textarea {
        min-height: 100px;
        resize: none;
        line-height: 1.7;
    }
    
    .form-field select {
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7915d' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0 center;
    }
    
    .form-field select option {
        background: #0f0f0f;
        color: #f5f5f0;
        padding: 15px;
    }
    
    /* Custom Dropdown */
    .custom-select-wrapper {
        position: relative;
    }
    
    .custom-select {
        position: relative;
        cursor: pointer;
    }
    
    .custom-select-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px 0;
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 0.5px;
        color: rgba(245, 245, 240, 0.25);
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .custom-select-trigger.has-value {
        color: #f5f5f0;
    }
    
    .custom-select-trigger svg {
        width: 14px;
        height: 14px;
        stroke: #a7915d;
        stroke-width: 1.5;
        fill: none;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .custom-select.open .custom-select-trigger svg {
        transform: rotate(180deg);
    }
    
    .custom-select-options {
        position: absolute;
        bottom: calc(100% + 5px);
        left: 0;
        right: 0;
        background: #0a0a0a;
        border: 1px solid rgba(167, 145, 93, 0.25);
        z-index: 10001;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .custom-select.open .custom-select-options {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    
    .custom-select-option {
        padding: 15px 20px;
        font-family: 'Raleway', sans-serif;
        font-size: 13px;
        font-weight: 300;
        letter-spacing: 0.5px;
        color: rgba(245, 245, 240, 0.6);
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
        border-bottom: 1px solid rgba(167, 145, 93, 0.08);
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .custom-select-option:last-child {
        border-bottom: none;
    }
    
    .custom-select-option:hover {
        background: rgba(167, 145, 93, 0.1);
        color: #a7915d;
    }
    
    .custom-select-option.selected {
        color: #a7915d;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    /* Submit */
    .contact-submit {
        margin-top: 45px;
    }
    
    .contact-submit-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 18px 40px;
        background: transparent;
        border: 1px solid rgba(167, 145, 93, 0.4);
        color: #f5f5f0;
        font-family: 'Raleway', sans-serif;
        font-size: 11px;
        letter-spacing: 3px;
        text-transform: uppercase;
        cursor: pointer;
        overflow: hidden;
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .contact-submit-btn::after {
        content: '';
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 1px;
        background: #a7915d;
        transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .contact-submit-btn:hover {
        border-color: #a7915d;
        letter-spacing: 4px;
        color: #a7915d;
        box-shadow: 0 0 30px rgba(167, 145, 93, 0.15);
        background: transparent;
    }
    
    .contact-submit-btn:hover::after {
        width: 50%;
    }
    
    .contact-submit-btn svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 1.5;
        fill: none;
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    }
    
    .contact-submit-btn:hover svg {
        transform: translateX(4px);
    }
    
    /* Success */
    .contact-success {
        display: none;
        padding: 40px 0;
    }
    
    .contact-success.show {
        display: block;
        animation: fadeIn 0.6s ease;
    }
    
    .contact-success-icon {
        width: 70px;
        height: 70px;
        border: 1px solid rgba(167, 145, 93, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }
    
    .contact-success-icon svg {
        width: 28px;
        height: 28px;
        stroke: #a7915d;
        stroke-width: 1.5;
        fill: none;
    }
    
    .contact-success h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 32px;
        font-weight: 300;
        color: #f5f5f0;
        margin-bottom: 12px;
    }
    
    .contact-success p {
        font-family: 'Cormorant Garamond', serif;
        font-size: 16px;
        font-style: italic;
        color: rgba(245, 245, 240, 0.45);
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(15px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Contact Info */
    .contact-info {
        display: flex;
        gap: 40px;
        margin-top: 60px;
        padding-top: 35px;
        border-top: 1px solid rgba(167, 145, 93, 0.1);
    }
    
    .contact-info-item {
        
    }
    
    .contact-info-label {
        font-family: 'Raleway', sans-serif;
        font-size: 9px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #a7915d;
        margin-bottom: 8px;
    }
    
    .contact-info-value {
        font-family: 'Cormorant Garamond', serif;
        font-size: 14px;
        font-style: italic;
        color: rgba(245, 245, 240, 0.5);
    }
    
    .contact-info-value a {
        color: rgba(245, 245, 240, 0.5);
        text-decoration: none;
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .contact-info-value a:hover {
        color: #a7915d;
    }

    } /* End @media (min-width: 1025px) for Contact Form */

    /* Responsive */
    

        .btn-exklusiv-refined {
            position: relative;
            padding: 18px 60px;
            background: transparent;
            border: 1px solid rgba(167, 145, 93, 0.4);
            color: #f5f5f0;
            font-family: 'Raleway', sans-serif;
            font-size: 11px;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            overflow: hidden;
            min-width: 180px;
            min-height: 54px;
            transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .btn-exklusiv-refined::after {
            content: '';
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: #a7915d;
            transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .btn-exklusiv-refined:hover {
            border-color: #a7915d;
            letter-spacing: 4px;
            color: #a7915d;
            box-shadow: 0 0 30px rgba(167, 145, 93, 0.15);
        }
        
        .btn-exklusiv-refined:hover::after {
            width: 50%;
        }
        
        #exklusiv-submit-btn.success {
            background: transparent;
            border-color: #a7915d;
            pointer-events: none;
        }
        #exklusiv-submit-btn.success .btn-text {
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
        }
        #exklusiv-submit-btn.success .checkmark-icon {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        #exklusiv-submit-btn.success .checkmark-path {
            stroke-dashoffset: 0;
        }

    @keyframes bgFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes floatParticle {
        0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
        25% { transform: translateY(-20px) translateX(10px); opacity: 0.6; }
        50% { transform: translateY(-10px) translateX(-5px); opacity: 0.4; }
        75% { transform: translateY(-30px) translateX(15px); opacity: 0.5; }
    }
    @keyframes glowPulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
    @keyframes cornerReveal {
        from { opacity: 0; transform: scale(0.8); }
        to { opacity: 1; transform: scale(1); }
    }
    @keyframes lineExpandLeft {
        from { transform: translateY(-50%) scaleX(0); }
        to { transform: translateY(-50%) scaleX(1); }
    }
    @keyframes lineExpandRight {
        from { transform: translateY(-50%) scaleX(0); }
        to { transform: translateY(-50%) scaleX(1); }
    }
    @keyframes heroFadeInDown {
        from { opacity: 0; transform: translateY(-30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroFadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes lineScaleIn {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
    @keyframes heroTitleReveal {
        from { opacity: 0; transform: translateY(30px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes dividerExpand {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
    @keyframes scrollPulse {
        0%, 100% { opacity: 0.4; transform: scaleY(1); }
        50% { opacity: 1; transform: scaleY(1.3); }
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .exklusiv-title:hover {
        /* text-shadow removed for performance */
    }
    .gold-particle {
        animation-delay: 2.5s;
    }
    
    /* Scroll Fade-In Animations */
    .exklusiv-fade-in {
        opacity: 0;
        transform: translateY(60px);
        transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), 
                    transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .exklusiv-fade-in.exklusiv-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .exklusiv-nav-link:hover {
        color: #f5f5f0;
        text-shadow: 0 0 20px rgba(167, 145, 93, 0.5);
    }
    .exklusiv-nav-link:hover span:last-child {
        width: 100%;
    }

        .leather-image-card:hover {
            border-color: #a7915d;
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.4), 0 0 40px rgba(167,145,93,0.15);
        }

        .accessoire-card:hover {
            border-color: #a7915d;
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.4), 0 0 40px rgba(167,145,93,0.15);
        }

        .news-card-premium:hover {
            border-color: rgba(167,145,93,0.35);
            transform: translateY(-8px);
            box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 50px rgba(167,145,93,0.08);
        }

    .blog-back-btn:hover {
        color: #a7915d;
    }

    .legal-back-container {
        text-align: center;
        padding: 60px 0 20px;
        margin-top: 40px;
        border-top: 1px solid rgba(167, 145, 93, 0.15);
    }

#scrollToTop:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(167, 145, 93, 0.7), 0 6px 15px rgba(0, 0, 0, 0.4);
    background: #a7915d;
}

#scrollToTop:active {
    transform: translateY(-3px) scale(1.02);
}

#scrollToTop.show {
    opacity: 1;
    visibility: visible;
}

#backToKreationen:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(167, 145, 93, 0.7), 0 6px 15px rgba(0, 0, 0, 0.4);
    background: #a7915d;
    color: #0a0a0a;
}

#backToKreationen:hover svg {
    stroke: #0a0a0a;
}

#backToKreationen:active {
    transform: translateY(-3px) scale(1.02);
}

#backToKreationen.show {
    opacity: 1;
    visibility: visible;
}

/* Cookie Banner Refined Buttons */
.btn-cookie-refined {
    position: relative;
    padding: 14px 28px;
    background: transparent;
    border: 1px solid rgba(167, 145, 93, 0.4);
    color: #f5f5f0;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-cookie-refined::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: #a7915d;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-cookie-refined:hover {
    border-color: #a7915d;
    letter-spacing: 4px;
    color: #a7915d;
    box-shadow: 0 0 25px rgba(167, 145, 93, 0.15);
}

.btn-cookie-refined:hover::after {
    width: 50%;
}

.btn-cookie-refined.btn-cookie-primary {
    background: transparent;
    border-color: #a7915d;
    color: #a7915d;
}

/* ======== UTILITY CLASSES ======== */
.text-gold-light { color: #a7915d; font-weight: 400; }
.text-gold { color: #a7915d; }
.section-label-sm { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: #a7915d; font-weight: 500; }
.line-gradient-left { width: 60px; height: 1px; background: linear-gradient(-90deg, transparent, rgba(167, 145, 93, 0.5)); }
.line-gradient-right { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.5)); }
.flex-center-gap20 { display: inline-flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.section-label { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #a7915d; margin-bottom: 25px; font-weight: 500; }
.body-text { font-family: 'Raleway', sans-serif; font-size: 15px; color: rgba(245,245,240,0.7); line-height: 2.2; font-weight: 300; }
.mb-60 { margin-bottom: 60px; }
.text-gold-link { color: #a7915d; text-decoration: none; }
.hidden { display: none; }
.divider-center { width: 40px; height: 1px; background: rgba(167,145,93,0.4); margin: 0 auto 70px; }
.divider-wide { max-width: 1400px; margin: 0 auto; height: 2px; background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.5), transparent); }
.icon-circle { width: 50px; height: 50px; margin: 0 auto 25px; background: rgba(10, 10, 10, 0.95); border: 1px solid rgba(167, 145, 93, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }
.dot-gold { width: 8px; height: 8px; background: #a7915d; border-radius: 50%; }
.rotate-180 { transform: rotate(180deg); }
.flex-1 { flex: 1; }
.flex-1-center { flex: 1; text-align: center; padding: 0 30px; position: relative; }
.heading-md { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: #f5f5f0; margin-bottom: 12px; letter-spacing: 1px; }
.heading-sm { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #a7915d; }
.card-desc { font-size: 13px; line-height: 1.8; color: rgba(245, 245, 240, 0.5); max-width: 220px; margin: 0 auto; }
.heading-lg { font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 8vw, 72px); font-weight: 300; color: #f5f5f0; margin-bottom: 25px; letter-spacing: 4px; }
.divider-sm { width: 40px; height: 1px; background: rgba(167,145,93,0.3); margin: 0 auto 60px; }
.body-text-mb25 { font-family: 'Raleway', sans-serif; font-size: 15px; color: rgba(245,245,240,0.7); line-height: 2.2; font-weight: 300; margin-bottom: 25px; }
.flex-gap18 { display: flex; align-items: center; gap: 18px; margin-bottom: 25px; }
.text-center-mb80 { text-align: center; margin-bottom: 80px; }
.z-2 { position: relative; z-index: 2; }
.text-center-mb70 { margin-bottom: 70px; text-align: center; }
.body-text-bright { font-family: 'Raleway', sans-serif; font-size: 15px; color: rgba(245,245,240,0.8); }
.overlay-gradient { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 1; }
.overlay-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.7) 100%); z-index: 1; pointer-events: none; }
.aspect-3-4 { aspect-ratio: 3/4; }
.divider-100 { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto 35px; }
.divider-100-mb30 { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto 30px; }
.divider-100-no-mb { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto; }
.container-1100 { max-width: 1100px; margin: 0 auto; }
.mb-70 { margin-bottom: 70px; }
.section-120 { padding: 120px 60px; position: relative; }
.section-140 { padding: 140px 60px; position: relative; }
.text-center { text-align: center; }
.pos-relative { position: relative; }
.divider-full { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(167, 145, 93, 0.4) 20%, rgba(167, 145, 93, 0.4) 80%, transparent 100%); }
.body-text-lg { font-family: 'Raleway', sans-serif; font-size: 16px; color: rgba(245,245,240,0.75); line-height: 2; margin-bottom: 25px; font-weight: 300; }
.body-text-wide { font-family: 'Raleway', sans-serif; font-size: 15px; color: rgba(245,245,240,0.7); line-height: 2.4; font-weight: 300; }
.section-label-muted { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: rgba(167,145,93,0.6); margin-bottom: 15px; }
.section-label-lg { font-family: 'Raleway', sans-serif; font-size: 12px; letter-spacing: 8px; text-transform: uppercase; color: #a7915d; font-weight: 500; }
.line-animated-left { width: 60px; height: 1px; background: linear-gradient(-90deg, transparent, #a7915d); transform: scaleX(0); animation: lineScaleIn 0.55s ease 1.05s forwards; }
.line-animated-right { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d); transform: scaleX(0); animation: lineScaleIn 0.55s ease 1.05s forwards; }
.scroll-indicator { margin-top: 70px; opacity: 0; animation: fadeInUp 0.55s ease 2s forwards; }
.scroll-line { width: 1px; height: 50px; background: linear-gradient(180deg, #a7915d, transparent); margin: 0 auto; animation: scrollPulse 2s ease-in-out infinite 2.1s; }
.divider-150-animated { width: 150px; height: 2px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto 45px; transform: scaleX(0); animation: dividerExpand 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1.25s forwards; }
.flex-gap25 { display: inline-flex; align-items: center; gap: 25px; margin-bottom: 40px; }
.hero-flex-header { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 50px; opacity: 0; transform: translateY(-30px); animation: heroFadeInDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; }
.heading-22 { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #f5f5f0; margin-bottom: 6px; }
.text-center-z2 { text-align: center; position: relative; z-index: 2; }
.line-80-left { width: 80px; height: 1px; background: linear-gradient(-90deg, transparent, #a7915d); }
.line-80-right { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d); }
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.card-overlay-z5 { text-align: center; z-index: 5; padding: 40px; }
.card-overlay-z4 { text-align: center; z-index: 4; padding: 40px; }
.container-1200-z2 { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.card-hover { position: relative; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.aspect-3-4-overflow { position: relative; overflow: hidden; aspect-ratio: 3/4; }
.card-bottom { position: absolute; bottom: 25px; left: 25px; right: 25px; }
.text-15 { font-size: 15px; line-height: 1.6; color: #c9c9c4; }
.label-11 { font-size: 11px; color: #c9c9c4; text-transform: uppercase; letter-spacing: 1px; }
.label-11-gold { font-size: 11px; color: #a7915d; letter-spacing: 1px; font-weight: 600; }
.divider-60-gold { width: 60px; height: 1px; background: #a7915d; margin: 0 auto 40px; }
.divider-60-gold-mt { width: 60px; height: 1px; background: #a7915d; margin: 20px auto 0; }
.gallery-card-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #f5f5f0; margin-bottom: 8px; letter-spacing: 2px; font-weight: 400; }
.gallery-card-subtitle { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #a7915d; }
.corner-tl { position: absolute; top: 60px; left: 60px; width: 120px; height: 120px; border-left: 1px solid rgba(167,145,93,0.4); border-top: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.7s ease 1.05s forwards; }
.corner-tr { position: absolute; top: 60px; right: 60px; width: 120px; height: 120px; border-right: 1px solid rgba(167,145,93,0.4); border-top: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.7s ease 1.2s forwards; }
.corner-bl { position: absolute; bottom: 60px; left: 60px; width: 120px; height: 120px; border-left: 1px solid rgba(167,145,93,0.4); border-bottom: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.7s ease 1.35s forwards; }
.corner-br { position: absolute; bottom: 60px; right: 60px; width: 120px; height: 120px; border-right: 1px solid rgba(167,145,93,0.4); border-bottom: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.7s ease 1.45s forwards; }
.corner-tl-z4 { position: absolute; top: 60px; left: 60px; width: 120px; height: 120px; border-left: 1px solid rgba(167,145,93,0.4); border-top: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.7s ease 1.05s forwards; z-index: 4; }
.corner-tr-z4 { position: absolute; top: 60px; right: 60px; width: 120px; height: 120px; border-right: 1px solid rgba(167,145,93,0.4); border-top: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.7s ease 1.2s forwards; z-index: 4; }
.corner-bl-z4 { position: absolute; bottom: 60px; left: 60px; width: 120px; height: 120px; border-left: 1px solid rgba(167,145,93,0.4); border-bottom: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.7s ease 1.35s forwards; z-index: 4; }
.corner-br-z4 { position: absolute; bottom: 60px; right: 60px; width: 120px; height: 120px; border-right: 1px solid rgba(167,145,93,0.4); border-bottom: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.7s ease 1.45s forwards; z-index: 4; }
.text-center-mb50 { text-align: center; margin-bottom: 50px; }
.container-700 { max-width: 700px; margin: 0 auto; }
.container-1200-z2 { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.max-w-1100 { max-width: 1100px; }
.text-15-muted { font-size: 15px; line-height: 1.8; color: #999; }
.font-32 { font-size: 32px; }
.padding-35-30 { padding: 35px 30px; }
.border-top-section { padding-top: 30px; border-top: 1px solid rgba(167, 145, 93, 0.2); }
.gallery-sidebar { position: fixed; top: 100px; left: 40px; z-index: 1000; }
.vertical-line { width: 1px; height: 160px; background: linear-gradient(180deg, transparent, rgba(167, 145, 93, 0.6), transparent); position: relative; z-index: 2; }
.heading-42-gold { font-family: 'Cormorant Garamond', serif; font-size: 42px; color: #a7915d; font-weight: 300; }
.heading-32-gold { font-family: 'Cormorant Garamond', serif; font-size: 32px; color: #a7915d; font-weight: 400; }
.heading-28-gold { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #a7915d; }
.heading-20-gold { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #a7915d; font-weight: 400; }
.text-18-italic { font-size: 18px; color: #a7915d; font-weight: 500; margin-bottom: 25px; font-style: italic; }
.text-14-muted { font-size: 14px; line-height: 1.6; color: #c9c9c4; }
.label-12-gold { font-size: 12px; letter-spacing: 4px; color: #a7915d; text-transform: uppercase; font-weight: 600; }
.label-12-muted { font-size: 12px; color: #c9c9c4; text-transform: uppercase; letter-spacing: 1.5px; }
.hero-content-box { position: relative; z-index: 2; text-align: center; padding: 60px; max-width: 950px; }
.container-750 { max-width: 750px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.flex-center-start { display: flex; justify-content: center; align-items: flex-start; position: relative; }
.flex-gap12 { display: flex; gap: 12px; margin-bottom: 30px; }
.hero-title-animated { font-family: 'Cormorant Garamond', serif; font-size: 100px; font-weight: 300; color: #f5f5f0; letter-spacing: 10px; margin-bottom: 40px; opacity: 0; transform: translateY(30px) scale(0.98); animation: heroTitleReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; }
.hero-quote { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-style: italic; color: rgba(245,245,240,0.7); max-width: 700px; margin: 0 auto; line-height: 1.7; opacity: 0; transform: translateY(20px); animation: heroFadeInUp 0.3s ease 0.7s forwards; }
.section-label-center { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #a7915d; margin-bottom: 25px; font-weight: 500; text-align: center; }
.label-11-gold { font-family: 'Raleway', sans-serif; font-size: 11px; color: rgba(167,145,93,0.9); letter-spacing: 2px; text-transform: uppercase; }
.hero-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: #0a0a0a; z-index: 1; padding-top: 120px; }
.heading-26-gold { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #a7915d; margin-bottom: 15px; font-weight: 400; }
.quote-subtitle { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-style: italic; color: #f5f5f0; max-width: 550px; margin: 0 auto; line-height: 1.7; }
.particle-1 { position: absolute; width: 4px; height: 4px; background: #a7915d; border-radius: 50%; top: 20%; left: 15%; animation: floatParticle 8s ease-in-out infinite; opacity: 0; }
.particle-1-z3 { position: absolute; width: 4px; height: 4px; background: #a7915d; border-radius: 50%; top: 20%; left: 15%; animation: floatParticle 8s ease-in-out infinite; opacity: 0; z-index: 3; }
.particle-2 { position: absolute; width: 4px; height: 4px; background: #a7915d; border-radius: 50%; top: 45%; left: 10%; animation: floatParticle 11s ease-in-out infinite 3s; opacity: 0; }
.particle-2-z3 { position: absolute; width: 4px; height: 4px; background: #a7915d; border-radius: 50%; top: 45%; left: 10%; animation: floatParticle 11s ease-in-out infinite 3s; opacity: 0; z-index: 3; }
.particle-3 { position: absolute; width: 5px; height: 5px; background: #a7915d; border-radius: 50%; top: 30%; right: 20%; animation: floatParticle 7s ease-in-out infinite 2s; opacity: 0; }
.particle-3-z3 { position: absolute; width: 5px; height: 5px; background: #a7915d; border-radius: 50%; top: 30%; right: 20%; animation: floatParticle 7s ease-in-out infinite 2s; opacity: 0; z-index: 3; }
.particle-4 { position: absolute; width: 6px; height: 6px; background: #a7915d; border-radius: 50%; top: 25%; right: 10%; animation: floatParticle 8s ease-in-out infinite 1.5s; opacity: 0; }
.particle-4-z3 { position: absolute; width: 6px; height: 6px; background: #a7915d; border-radius: 50%; top: 25%; right: 10%; animation: floatParticle 8s ease-in-out infinite 1.5s; opacity: 0; z-index: 3; }
.page-bg { background: linear-gradient(-45deg, #0a0a0a 0%, #0f0f0f 25%, #050505 50%, #0f0f0f 75%, #0a0a0a 100%); padding: 0; margin: 0; }
.divider-full-wide { width: 100%; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent 0%, rgba(167, 145, 93, 0.4) 20%, rgba(167, 145, 93, 0.4) 80%, transparent 100%); }
.particle-5 { position: absolute; width: 3px; height: 3px; background: #a7915d; border-radius: 50%; top: 60%; left: 25%; animation: floatParticle 10s ease-in-out infinite 1s; opacity: 0; }
.particle-5-z3 { position: absolute; width: 3px; height: 3px; background: #a7915d; border-radius: 50%; top: 60%; left: 25%; animation: floatParticle 10s ease-in-out infinite 1s; opacity: 0; z-index: 3; }
.particle-6 { position: absolute; width: 3px; height: 3px; background: #a7915d; border-radius: 50%; top: 70%; right: 30%; animation: floatParticle 9s ease-in-out infinite 0.5s; opacity: 0; }
.particle-6-z3 { position: absolute; width: 3px; height: 3px; background: #a7915d; border-radius: 50%; top: 70%; right: 30%; animation: floatParticle 9s ease-in-out infinite 0.5s; opacity: 0; z-index: 3; }
.line-expand-left { position: absolute; top: 50%; left: 0; width: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,145,93,0.5)); transform: translateY(-50%) scaleX(0); transform-origin: left center; animation: lineExpandLeft 1.05s ease 1.4s forwards; }
.line-expand-left-z4 { position: absolute; top: 50%; left: 0; width: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,145,93,0.5)); transform: translateY(-50%) scaleX(0); transform-origin: left center; animation: lineExpandLeft 1.05s ease 1.4s forwards; z-index: 4; }
.line-expand-right { position: absolute; top: 50%; right: 0; width: 18%; height: 1px; background: linear-gradient(-90deg, transparent, rgba(167,145,93,0.5)); transform: translateY(-50%) scaleX(0); transform-origin: right center; animation: lineExpandRight 1.05s ease 1.4s forwards; }
.line-expand-right-z4 { position: absolute; top: 50%; right: 0; width: 18%; height: 1px; background: linear-gradient(-90deg, transparent, rgba(167,145,93,0.5)); transform: translateY(-50%) scaleX(0); transform-origin: right center; animation: lineExpandRight 1.05s ease 1.4s forwards; z-index: 4; }
.glow-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(167, 145, 93, 0.06) 0%, transparent 70%); pointer-events: none; }
.glow-pulse { position: absolute; inset: 0; background-image: radial-gradient(ellipse at 50% 50%, rgba(167,145,93,0.1) 0%, transparent 60%); animation: glowPulse 4s ease-in-out infinite; }
.glow-pulse-z3 { position: absolute; inset: 0; background-image: radial-gradient(ellipse at 50% 50%, rgba(167,145,93,0.1) 0%, transparent 60%); animation: glowPulse 4s ease-in-out infinite; z-index: 3; }
.vignette-dark { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.6) 100%); pointer-events: none; z-index: 3; }
.gradient-bottom { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%); }
.underline-hover { position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: #a7915d; transition: width 0.4s ease, opacity 0.4s ease; transform: translateX(-50%); }
.header-line { position: absolute; top: 24px; left: 50px; right: 50px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(167, 145, 93, 0.4) 10%, rgba(167, 145, 93, 0.4) 90%, transparent 100%); }
.label-12-faded { font-family: 'Raleway', sans-serif; font-size: 12px; color: rgba(245,245,240,0.25); letter-spacing: 3px; }
.label-11-gold-wide { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: #a7915d; }
.label-11-faded { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(245, 245, 240, 0.4); margin-bottom: 50px; }
.heading-clamp { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 6vw, 58px); font-weight: 300; color: #f5f5f0; margin-bottom: 25px; letter-spacing: 3px; }
.heading-36-gold { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 400; color: #a7915d; margin-bottom: 30px; letter-spacing: 2px; }
.heading-28-white { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #f5f5f0; margin-bottom: 12px; font-weight: 600; }
.badge-gold { display: inline-block; padding: 4px 12px; background: rgba(167, 145, 93, 0.15); border: 1px solid rgba(167, 145, 93, 0.3); border-radius: 15px; margin-bottom: 15px; }
.nav-link-style { color: rgba(245,245,240,0.7); text-decoration: none; font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-weight: 500; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; padding: 10px 0; }
.icon-80 { width: 80px; height: 80px; border: 2px solid #a7915d; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; }
.icon-80-glow { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(167, 145, 93, 0.2) 0%, rgba(167, 145, 93, 0.1) 100%); border: 3px solid #a7915d; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(167, 145, 93, 0.4), inset 0 0 20px rgba(167, 145, 93, 0.1); }
.divider-80 { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto; }
.icon-70 { width: 70px; height: 70px; margin: 0 auto 25px; border: 1px solid rgba(167, 145, 93, 0.4); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(167, 145, 93, 0.15) 0%, transparent 100%); }
.divider-120 { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto 40px; }
.rotate-45 { transform: rotate(-45deg); font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #a7915d; }
.card-subtle { text-align: center; padding: 50px 30px; background: rgba(255,255,255,0.02); border: 1px solid rgba(167, 145, 93, 0.15); transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }
.glow-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(167, 145, 93, 0.08) 0%, transparent 60%); pointer-events: none; }
.corner-decor-tr { position: absolute; top: -2px; right: -2px; width: 50px; height: 50px; border-top: 2px solid #a7915d; border-right: 2px solid #a7915d; }
.corner-decor-tl { position: absolute; top: -2px; left: -2px; width: 50px; height: 50px; border-top: 2px solid #a7915d; border-left: 2px solid #a7915d; }
.corner-decor-br { position: absolute; bottom: -2px; right: -2px; width: 50px; height: 50px; border-bottom: 2px solid #a7915d; border-right: 2px solid #a7915d; }
.vignette-subtle { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.5) 100%); pointer-events: none; }
.corner-decor-bl { position: absolute; bottom: -2px; left: -2px; width: 50px; height: 50px; border-bottom: 2px solid #a7915d; border-left: 2px solid #a7915d; }
.section-dark { padding: 120px 60px; position: relative; background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%); }
.section-dark-alt { padding: 120px 60px; background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%); position: relative; }
.hero-70vh { min-height: 70vh; display: flex; align-items: center; justify-content: center; position: relative; background: #050505; }
.hero-transparent { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: transparent; padding-top: 120px; }
.text-15-bold { font-size: 15px; font-weight: 600; color: #f5f5f0; font-family: 'Raleway', sans-serif; margin-bottom: 6px; }
.label-12-gold-upper { font-size: 12px; color: #a7915d; font-family: 'Raleway', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.label-12-shadow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: rgba(245, 245, 240, 0.7); text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }
.label-10-muted { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; color: rgba(167,145,93,0.5); text-transform: uppercase; }
.label-10-gold-mb { font-family: 'Raleway', sans-serif; font-size: 10px; color: #a7915d; letter-spacing: 3px; margin-bottom: 18px; font-weight: 500; }
.label-10-gold { font-family: 'Raleway', sans-serif; font-size: 10px; color: #a7915d; letter-spacing: 3px; font-weight: 500; }
.text-14-light { font-family: 'Raleway', sans-serif; color: rgba(245,245,240,0.5); font-size: 14px; line-height: 1.8; font-weight: 300; }
.heading-clamp-lg { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 7vw, 80px); font-weight: 300; color: #f5f5f0; line-height: 1.15; margin-bottom: 40px; }
.heading-clamp-md { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 6vw, 52px); font-weight: 300; color: #f5f5f0; margin-bottom: 25px; letter-spacing: 3px; }
.heading-68-gold { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 300; color: #a7915d; margin-bottom: 12px; text-shadow: 1px 1px 2px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5); }
.heading-58-gold { font-family: 'Cormorant Garamond', serif; font-size: 58px; color: #a7915d; font-weight: 300; margin-bottom: 15px; line-height: 1; }
.heading-42-gold-sm { font-family: 'Cormorant Garamond', serif; font-size: 42px; color: #a7915d; font-weight: 300; margin-bottom: 8px; }
.heading-26-white { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #f5f5f0; margin-bottom: 18px; line-height: 1.3; letter-spacing: 0.5px; }
.heading-24-white { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: #f5f5f0; margin-bottom: 12px; letter-spacing: 1px; }
.text-20-muted { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: rgba(245, 245, 240, 0.6); line-height: 1.8; max-width: 650px; margin: 0 auto 45px; }
.text-18-italic-muted { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; color: rgba(245, 245, 240, 0.5); max-width: 500px; margin: 0 auto 50px; }
.grid-timeline { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 40px; margin-bottom: 60px; align-items: center; }
.link-nav-style { display: flex; align-items: center; gap: 12px; text-decoration: none; color: rgba(245,245,240,0.6); font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }
.text-15-white { display: block; font-size: 15px; color: #f5f5f0; font-weight: 400; }
.label-12-gold-block { display: block; font-size: 12px; color: #a7915d; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.text-gold-16 { color: #a7915d; font-size: 16px; }
.card-gradient-hover { background: linear-gradient(135deg, rgba(20,20,20,0.9) 0%, rgba(15,15,15,0.95) 100%); border: 1px solid rgba(167,145,93,0.15); overflow: hidden; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.card-gradient-center { background: linear-gradient(135deg, rgba(167, 145, 93, 0.08) 0%, rgba(20, 20, 20, 0.5) 100%); border: 1px solid rgba(167,145,93,0.15); padding: 50px 30px; transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease; text-align: center; }
.bg-dark-bare { background: #0a0a0a; padding: 0; margin: 0; }
.icon-circle-60 { width: 60px; height: 60px; border: 2px solid rgba(167,145,93,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10,10,10,0.8); box-shadow: 0 0 30px rgba(167,145,93,0.2); }
.icon-square-60 { width: 60px; height: 60px; border: 1px solid #a7915d; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-circle-50 { width: 50px; height: 50px; background: linear-gradient(135deg, rgba(167, 145, 93, 0.2) 0%, rgba(167, 145, 93, 0.1) 100%); border: 2px solid #a7915d; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.icon-diamond-40 { width: 40px; height: 40px; margin: 0 auto 25px; border: 1px solid rgba(167,145,93,0.3); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; }
.divider-40-gold { width: 40px; height: 1px; background: #a7915d; margin: 0 auto 20px; }
.line-vert-50-up { width: 1px; height: 50px; background: linear-gradient(180deg, transparent, rgba(167,145,93,0.6)); }
.line-vert-50-down { width: 1px; height: 50px; background: linear-gradient(180deg, rgba(167,145,93,0.6), transparent); }
.flex-full { width: 100%; display: flex; }
.transition-transform { transition: transform 0.4s ease; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center-border-top { text-align: center; margin-top: 100px; padding-top: 60px; border-top: 1px solid rgba(167,145,93,0.15); }
.text-center-mb-70 { text-align: center; margin-bottom: 70px; }
.text-center-mb-100 { text-align: center; margin-bottom: 100px; }
.glow-center-500 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(167, 145, 93, 0.06) 0%, transparent 70%); pointer-events: none; }
.badge-top-left-dark { position: absolute; top: 20px; left: 20px; background: rgba(10,10,10,0.95); padding: 12px 24px; border: 1px solid rgba(167,145,93,0.3); z-index: 2; }
.badge-top-left-gold { position: absolute; top: 20px; left: 20px; background: #a7915d; padding: 12px 24px; z-index: 2; }
.line-top-center { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 300px; height: 1px; background: linear-gradient(to right, transparent, #a7915d, transparent); z-index: 2; }
.text-center-z2-pad { text-align: center; z-index: 2; padding: 40px; }
.shine-anim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.2), transparent); animation: shine 8s infinite; pointer-events: none; }
.shine-anim-delay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.2), transparent); animation: shine 8s infinite 2s; pointer-events: none; }
.line-top-hover { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, #a7915d, transparent); opacity: 0; transition: opacity 0.4s; }
.glow-subtle { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(167,145,93,0.03) 0%, transparent 70%); }
.vignette-dark-z2 { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.7) 100%); pointer-events: none; z-index: 2; }
.vignette-medium-z2 { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.6) 100%); pointer-events: none; z-index: 2; }
.gradient-bottom-50 { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%); }
.overlay-dark-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.8) 100%); }
.content-bottom-40 { position: absolute; bottom: 40px; left: 40px; right: 40px; }
.content-bottom-30 { position: absolute; bottom: 30px; left: 30px; right: 30px; }
.card-gold-border { padding: 50px; background: linear-gradient(135deg, rgba(167, 145, 93, 0.12) 0%, rgba(20, 20, 20, 0.85) 100%); border: 3px solid #a7915d; border-radius: 4px; position: relative; overflow: hidden; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 50px rgba(167, 145, 93, 0.25); }
.section-140-dark { padding: 140px 60px; background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%); }
.section-120-overflow { padding: 120px 60px; position: relative; background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%); }
.section-120-dark { padding: 120px 60px; position: relative; background: #050505; }
.hero-50vh { min-height: 50vh; display: flex; align-items: center; justify-content: center; position: relative; background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); padding-top: 80px; }
.content-center-z2 { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.divider-gold-mt { margin-top: 20px; border-top: 1px solid rgba(167, 145, 93, 0.3); padding-top: 15px; color: #a7915d; }
.h-full { height: 100%; }
.quote-italic { font-style: italic; font-size: 48px; color: rgba(245,245,240,0.7); }
.text-24 { font-size: 24px; }
.heading-20-white { font-size: 20px; color: #f5f5f0; margin-bottom: 12px; font-weight: 600; }
.text-15-muted { font-size: 15px; line-height: 1.8; color: #888; }
.quote-big { font-size: 120px; color: rgba(167, 145, 93, 0.12); font-family: Georgia, serif; line-height: 0.8; margin-bottom: -30px; filter: drop-shadow(0 0 20px rgba(167, 145, 93, 0.3)); }
.text-14-muted { font-family: 'Raleway', sans-serif; font-size: 14px; color: rgba(245,245,240,0.5); font-weight: 300; letter-spacing: 1px; }
.label-12-gold-caps { font-family: 'Raleway', sans-serif; font-size: 12px; color: rgba(167,145,93,0.9); letter-spacing: 2px; text-transform: uppercase; }
.label-11-gold-mb { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: #a7915d; margin-bottom: 30px; font-weight: 500; }
.label-10-muted-caps { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: rgba(245,245,240,0.6); }
.label-10-gold-mb30 { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #a7915d; margin-bottom: 30px; font-weight: 500; }
.label-10-gold-mb15 { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #a7915d; margin-bottom: 15px; }
.label-10-dark { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #0a0a0a; font-weight: 600; }
.label-10-faded-caps { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; color: rgba(245,245,240,0.3); text-transform: uppercase; }
.heading-clamp-alt { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 6vw, 52px); font-weight: 300; color: #f5f5f0; line-height: 1.3; margin-bottom: 20px; letter-spacing: 3px; }
.heading-42-white { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: #f5f5f0; }
.heading-36-white { font-family: 'Cormorant Garamond', serif; font-size: 36px; color: #f5f5f0; margin-bottom: 30px; font-weight: 300; }
.heading-28-white-sm { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; color: #f5f5f0; margin-bottom: 15px; }
.heading-28-white-xs { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #f5f5f0; margin-bottom: 8px; }
.text-22-quote { font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1.8; color: #f5f5f0; margin-bottom: 40px; font-weight: 300; flex-grow: 1; }
.text-20-italic-muted { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-style: italic; color: #f5f5f0; max-width: 550px; margin: 0 auto 50px; line-height: 1.7; }
.text-18-italic-mb { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; color: rgba(245, 245, 240, 0.5); margin-bottom: 50px; }
.inline-flex-gap { display: inline-flex; align-items: center; gap: 12px; }
.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; max-width: 1200px; margin: 0 auto; }
.grid-1col { display: grid; grid-template-columns: 1fr; gap: 25px; max-width: 600px; margin: 0 auto; }
.grid-2col-bordered { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; padding: 25px 0; border-top: 1px solid rgba(167, 145, 93, 0.2); border-bottom: 1px solid rgba(167, 145, 93, 0.2); }
.grid-timeline-alt { display: grid; grid-template-columns: 1fr 100px 1fr; gap: 30px; align-items: center; margin-bottom: 50px; }
.flex-col-center { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.flex-start-gap { display: flex; align-items: flex-start; gap: 25px; }
.flex-center-gap { display: flex; align-items: center; gap: 18px; }
.bg-sneaker { background-image: url('../images/sneaker-tasche-studio-v2.webp'); background-color: #0a0a0a; }
.card-subtle-hover { background: rgba(255,255,255,0.02); border: 1px solid rgba(167, 145, 93, 0.15); padding: 50px; position: relative; overflow: hidden; transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }
.section-100-dark { background: linear-gradient(180deg, #0a0a0a 0%, #080808 100%); padding: 100px 40px 120px; }
.card-aspect-gold { aspect-ratio: 4/3; background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%); border: 2px solid rgba(167,145,93,0.4); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 20px 60px rgba(167,145,93,0.1); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.card-aspect-subtle { aspect-ratio: 4/3; background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%); border: 2px solid rgba(167,145,93,0.2); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* ======== DYNASTY TIMELINE ======== */

.dynasty-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
}

.dynasty-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    min-height: 100vh;
}

/* Text Side */
.dynasty-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 60px;
    position: relative;
    z-index: 2;
    background: #0a0a0a;
}

.dynasty-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #a7915d;
    margin-bottom: 25px;
    font-weight: 500;
}

.dynasty-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 300;
    color: #f5f5f0;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.dynasty-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-style: italic;
    color: #a7915d;
    margin-bottom: 40px;
    font-weight: 300;
}

.dynasty-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, rgba(167,145,93,0) 0%, #a7915d 50%, rgba(167,145,93,0) 100%);
    margin-bottom: 40px;
}

.dynasty-description {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    line-height: 2;
    color: rgba(245, 245, 240, 0.75);
    font-weight: 300;
    letter-spacing: 0.3px;
    max-width: 520px;
}

/* Year/Era Side */
.dynasty-year-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(135deg, #0f0f0f 0%, #0a0a0a 50%, #080808 100%);
    overflow: hidden;
}

/* Portrait image layer (hidden by default) */
.dynasty-portrait {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    opacity: 0;
    transition: opacity 2s ease;
    z-index: 1;
}

.dynasty-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 8, 0.4) 0%,
        rgba(10, 10, 8, 0.55) 50%,
        rgba(10, 10, 8, 0.75) 100%
    );
}

/* Revealed state */
.dynasty-year-side.revealed .dynasty-portrait {
    opacity: 1;
}

.dynasty-year-side.revealed .dynasty-year-content {
    opacity: 0;
}

.dynasty-year-side .dynasty-year-content {
    transition: opacity 1.8s ease;
}

/* Photo toggle button */
.dynasty-photo-toggle {
    position: relative;
    z-index: 3;
    background: transparent;
    border: 1px solid rgba(167, 145, 93, 0.5);
    color: rgba(167, 145, 93, 0.9);
    padding: 16px 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    white-space: nowrap;
    margin: 0 auto 40px;
}

.dynasty-photo-toggle:hover {
    background: rgba(167, 145, 93, 0.12);
    border-color: rgba(167, 145, 93, 0.8);
    color: #a7915d;
    letter-spacing: 6px;
}

.dynasty-photo-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dynasty-photo-toggle.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

/* Vertical golden line */
.dynasty-year-side::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(167, 145, 93, 0.5) 20%,
        #a7915d 50%,
        rgba(167, 145, 93, 0.5) 80%,
        transparent 100%
    );
}

/* Glow effect */
.dynasty-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: dynastyGlowPulse 4s ease-in-out infinite;
}

@keyframes dynastyGlowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.dynasty-year-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.dynasty-generation-label {
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: rgba(167, 145, 93, 0.85);
    margin-bottom: 20px;
}

.dynasty-year {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(100px, 15vw, 180px);
    font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 2px rgba(167, 145, 93, 0.85);
    line-height: 0.85;
    letter-spacing: -5px;
    position: relative;
}

.dynasty-year-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(100px, 15vw, 180px);
    font-weight: 300;
    color: #a7915d;
    line-height: 0.85;
    letter-spacing: -5px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dynasty-section.in-view .dynasty-year-fill {
    clip-path: inset(0 0 0 0);
}

.dynasty-roman {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    color: rgba(167, 145, 93, 0.55);
    margin-top: 30px;
    font-weight: 300;
    letter-spacing: 10px;
}

.dynasty-generation-title {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.7);
    margin-top: 25px;
}

/* Decorative corner accents */
.dynasty-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
}

.dynasty-corner::before,
.dynasty-corner::after {
    content: '';
    position: absolute;
    background: rgba(167, 145, 93, 0.3);
    transition: opacity 0.6s ease, transform 0.6s ease, color 0.6s ease, background-color 0.6s ease, border-color 0.6s ease;
}

.dynasty-corner-tl { top: 40px; left: 40px; }
.dynasty-corner-tl::before { top: 0; left: 0; width: 1px; height: 40px; }
.dynasty-corner-tl::after { top: 0; left: 0; width: 40px; height: 1px; }

.dynasty-corner-br { bottom: 40px; right: 40px; }
.dynasty-corner-br::before { bottom: 0; right: 0; width: 1px; height: 40px; }
.dynasty-corner-br::after { bottom: 0; right: 0; width: 40px; height: 1px; }

/* Hover effect on corners */
.dynasty-section:hover .dynasty-corner::before,
.dynasty-section:hover .dynasty-corner::after {
    background: rgba(167, 145, 93, 0.6);
}

/* Fade in animations */
.dynasty-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.dynasty-section.in-view .dynasty-fade-up {
    opacity: 1;
    transform: translateY(0);
}

.dynasty-fade-up:nth-child(1) { transition-delay: 0.1s; }
.dynasty-fade-up:nth-child(2) { transition-delay: 0.2s; }
.dynasty-fade-up:nth-child(3) { transition-delay: 0.3s; }
.dynasty-fade-up:nth-child(4) { transition-delay: 0.4s; }
.dynasty-fade-up:nth-child(5) { transition-delay: 0.5s; }

/* Reversed layout (Text right, Year left) */
.dynasty-container-reverse .dynasty-year-side {
    order: 1;
}

.dynasty-container-reverse .dynasty-text {
    order: 2;
}

.dynasty-container-reverse .dynasty-year-side::before {
    left: auto;
    right: 0;
}

/* ======== DYNASTY ROYAL ======== */

.dynasty-section-royal .dynasty-year {
    font-size: clamp(140px, 20vw, 240px);
    -webkit-text-stroke: 2px rgba(167, 145, 93, 0.75);
}

.dynasty-section-royal .dynasty-year-fill {
    font-size: clamp(140px, 20vw, 240px);
    background: linear-gradient(180deg, #d4c794 0%, #a7915d 50%, #8b7355 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dynasty-section-royal .dynasty-name {
    font-size: clamp(52px, 6vw, 76px);
    background: linear-gradient(180deg, #f5f5f0 0%, #d4c794 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dynasty-section-royal .dynasty-title {
    font-size: 28px;
    color: #c9b883;
}

.dynasty-section-royal .dynasty-description {
    font-size: 18px;
    color: rgba(245, 245, 240, 0.85);
}

.dynasty-section-royal .dynasty-eyebrow {
    color: #c9b883;
    letter-spacing: 8px;
}

.dynasty-section-royal .dynasty-roman {
    font-size: 64px;
    color: rgba(167, 145, 93, 0.5);
}

.dynasty-section-royal .dynasty-generation-title {
    color: #a7915d;
    letter-spacing: 5px;
}

.dynasty-section-royal .dynasty-year-side::before {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(167, 145, 93, 0.6) 20%,
        #c9b883 50%,
        rgba(167, 145, 93, 0.6) 80%,
        transparent 100%
    );
    width: 2px;
}

.dynasty-section-royal .dynasty-glow {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.15) 0%, transparent 60%);
}

.dynasty-section-royal .dynasty-corner::before,
.dynasty-section-royal .dynasty-corner::after {
    background: rgba(167, 145, 93, 0.5);
}

/* ======== DYNASTY CROWN ======== */

.dynasty-crown {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a0a 0%, #080808 50%, #0a0a0a 100%);
    padding: 100px 40px;
}

/* Goldener Rahmen */
.dynasty-crown::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    border: 1px solid rgba(167, 145, 93, 0.2);
    pointer-events: none;
}

/* Ecken verstärkt */
.dynasty-crown::after {
    content: '';
    position: absolute;
    top: 35px;
    left: 35px;
    right: 35px;
    bottom: 35px;
    border: 1px solid rgba(167, 145, 93, 0.1);
    pointer-events: none;
}

/* Goldener Glow im Zentrum */
.dynasty-crown-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.1) 0%, transparent 60%);
    pointer-events: none;
    animation: dynastyCrownGlow 6s ease-in-out infinite;
}

@keyframes dynastyCrownGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* Eyebrow */
.dynasty-crown-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    letter-spacing: 10px;
    text-transform: uppercase;
    color: #a7915d;
    margin-bottom: 30px;
    font-weight: 500;
}

/* Massive Jahreszahl */
.dynasty-crown-year {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(150px, 25vw, 300px);
    font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 1px rgba(167, 145, 93, 0.3);
    line-height: 0.85;
    letter-spacing: -10px;
    position: relative;
    margin-bottom: 20px;
}

.dynasty-crown-year-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(150px, 25vw, 300px);
    font-weight: 300;
    background: linear-gradient(180deg, #c9b883 0%, #a7915d 50%, #8b7355 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 0.85;
    letter-spacing: -10px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dynasty-crown.in-view .dynasty-crown-year-fill {
    clip-path: inset(0 0 0 0);
}

/* Goldene Trennlinie - minimal */
.dynasty-crown-divider {
    width: 120px;
    height: 1px;
    background: rgba(167, 145, 93, 0.4);
    margin: 50px auto;
}

/* Name - Groß und Golden */
.dynasty-crown-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 7vw, 80px);
    font-weight: 300;
    color: #f5f5f0;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: 5px;
}

/* Titel - Golden Italic */
.dynasty-crown-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(24px, 3vw, 36px);
    font-style: italic;
    background: linear-gradient(90deg, #c9b883, #a7915d, #c9b883);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 50px;
    font-weight: 300;
}

/* Badge k.u.k. - elegant minimal */
.dynasty-crown-badge {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;
}

.dynasty-crown-badge::before,
.dynasty-crown-badge::after {
    content: '';
    width: 40px;
    height: 1px;
    background: rgba(167, 145, 93, 0.3);
}

.dynasty-crown-badge span {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(167, 145, 93, 0.8);
    font-weight: 400;
}

/* Beschreibung - Größer */
.dynasty-crown-description {
    font-family: 'Raleway', sans-serif;
    font-size: 19px;
    line-height: 2.1;
    color: rgba(245, 245, 240, 0.8);
    font-weight: 300;
    letter-spacing: 0.5px;
    max-width: 800px;
    margin: 0 auto;
}

/* Fade Animationen */
.dynasty-crown-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.dynasty-crown.in-view .dynasty-crown-fade {
    opacity: 1;
    transform: translateY(0);
}

.dynasty-crown-fade:nth-child(1) { transition-delay: 0.2s; }
.dynasty-crown-fade:nth-child(2) { transition-delay: 0.4s; }
.dynasty-crown-fade:nth-child(3) { transition-delay: 0.6s; }
.dynasty-crown-fade:nth-child(4) { transition-delay: 0.8s; }
.dynasty-crown-fade:nth-child(5) { transition-delay: 1s; }
.dynasty-crown-fade:nth-child(6) { transition-delay: 1.2s; }
.dynasty-crown-fade:nth-child(7) { transition-delay: 1.4s; }

/* ======== IMPERIAL TOGGLE ======== */

.imperial-toggle {
    position: relative;
    padding: 80px 20px 60px;
    background: var(--color-bg-dark);
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Subtle radial glow behind toggle */
.imperial-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(167, 145, 93, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.imperial-toggle-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.imperial-toggle-tab {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    width: 50%;
}

.imperial-toggle-tab:first-child {
    text-align: right;
    padding-right: 40px;
}

.imperial-toggle-tab:last-child {
    text-align: left;
    padding-left: 40px;
}

.imperial-toggle-label {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(167, 145, 93, 0.25);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    display: block;
    padding: 15px 0;
    position: relative;
}

/* Expanding underline — same pattern as nav-links */
.imperial-toggle-label::after {
    display: none;
}

.imperial-toggle-tab:hover .imperial-toggle-label {
    color: rgba(201, 184, 131, 0.5);
}


.imperial-toggle-tab.active .imperial-toggle-label {
    color: #a7915d;
    text-shadow: 0 0 25px rgba(167, 145, 93, 0.3);
}


/* Vertical line at 50% of viewport */
.imperial-toggle-diamond {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 20px;
    background: rgba(167, 145, 93, 0.35);
}

/* ======== IMPERIAL TAB PANELS ======== */

.imperial-tab-content {
    position: relative;
    overflow: hidden;
}

.imperial-tab-panel {
    display: none;
}

.imperial-tab-panel.active {
    display: block;
}

/* ======== ROYAL SECTIONS ======== */

.royal-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #080808;
}

/* Golden Divider between royal sections */
.royal-golden-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #080808;
}

.royal-golden-line {
    flex: 1;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.35));
}

.royal-golden-line:last-child {
    background: linear-gradient(-90deg, transparent, rgba(167, 145, 93, 0.35));
}

.royal-golden-diamond {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(167, 145, 93, 0.4);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin: 0 20px;
}

/* Radial gold glow behind crest — large and immersive */
.royal-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(167, 145, 93, 0.06) 0%, rgba(167, 145, 93, 0.02) 40%, transparent 65%);
    pointer-events: none;
    animation: royalGlowPulse 7s ease-in-out infinite;
}

@keyframes royalGlowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* Giant year number watermark — fills the background */
.royal-year-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(250px, 38vw, 600px);
    font-weight: 300;
    color: rgba(167, 145, 93, 0.05);
    -webkit-text-stroke: 1px rgba(167, 145, 93, 0.1);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 2s ease 0.3s;
    z-index: 0;
}

.royal-section.in-view .royal-year-bg {
    opacity: 1;
}

/* Corner accents — all 4 corners via ::before/::after + .royal-corner */
.royal-section::before,
.royal-section::after {
    content: '';
    position: absolute;
    border-color: rgba(167, 145, 93, 0.18);
    border-style: solid;
    width: 100px;
    height: 100px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 1.4s ease 0.5s;
}

.royal-section::before {
    top: 30px;
    left: 30px;
    border-width: 1px 0 0 1px;
}

.royal-section::after {
    bottom: 30px;
    right: 30px;
    border-width: 0 1px 1px 0;
}

.royal-section.in-view::before,
.royal-section.in-view::after {
    opacity: 1;
}

/* Additional corners (top-right, bottom-left) via .royal-corner */
.royal-corner {
    position: absolute;
    width: 100px;
    height: 100px;
    border-color: rgba(167, 145, 93, 0.18);
    border-style: solid;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 1.4s ease 0.5s;
}

.royal-corner-tr {
    top: 30px;
    right: 30px;
    border-width: 1px 1px 0 0;
}

.royal-corner-bl {
    bottom: 30px;
    left: 30px;
    border-width: 0 0 1px 1px;
}

.royal-section.in-view .royal-corner {
    opacity: 1;
}

/* Horizontal lines spanning from edges toward center */
.royal-line-left,
.royal-line-right {
    position: absolute;
    top: 50%;
    height: 1px;
    width: 0;
    pointer-events: none;
    z-index: 2;
    transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.royal-line-left {
    left: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(167, 145, 93, 0.2) 100%);
}

.royal-line-right {
    right: 0;
    background: linear-gradient(-90deg, transparent 0%, rgba(167, 145, 93, 0.2) 100%);
}

.royal-section.in-view .royal-line-left,
.royal-section.in-view .royal-line-right {
    width: calc(50% - 200px);
}

/* Subtle vertical edge accents via section box-shadow */
.royal-section {
    box-shadow:
        inset 80px 0 120px -80px rgba(167, 145, 93, 0.03),
        inset -80px 0 120px -80px rgba(167, 145, 93, 0.03);
}

/* Content wrapper — full width, layered */
.royal-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Eyebrow label */
.royal-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #a7915d;
    font-weight: 500;
    margin-bottom: 45px;
}

/* Coat of arms — LARGE, the dominant visual element */
.royal-crest {
    margin-bottom: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.royal-crest img {
    width: clamp(220px, 30vw, 380px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 60px rgba(167, 145, 93, 0.15))
            drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4));
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                transform 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                filter 0.6s ease;
}

.royal-section.in-view .royal-crest img {
    opacity: 1;
    transform: scale(1);
}

.royal-section:hover .royal-crest img {
    filter: drop-shadow(0 20px 70px rgba(167, 145, 93, 0.25))
            drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4));
}

/* House name — large, gradient text */
.royal-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(38px, 5.5vw, 68px);
    font-weight: 300;
    line-height: 1.1;
    margin: 0 0 12px;
    letter-spacing: 0.03em;
    background: linear-gradient(180deg, #f5f5f0 0%, #d4c794 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtitle under name */
.royal-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(16px, 2vw, 21px);
    font-style: italic;
    color: rgba(201, 184, 131, 0.5);
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}

/* Gold gradient divider */
.royal-divider {
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a7915d, transparent);
    margin: 0 auto 35px;
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.8s ease 0.5s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}

.royal-section.in-view .royal-divider {
    opacity: 1;
    transform: scaleX(1);
}

/* Description text */
.royal-desc {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: rgba(245, 245, 240, 0.55);
    font-weight: 300;
    max-width: 540px;
    margin: 0 auto 30px;
}

/* Ruler names */
.royal-names {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 500;
    color: #c9b883;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

/* Year + Roman numeral at bottom - hidden */
.royal-year-label {
    display: none;
}

/* Staggered fade-in for all child elements */
.royal-fade {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.royal-section.in-view .royal-fade {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.royal-section.in-view .royal-eyebrow { transition-delay: 0s; }
.royal-section.in-view .royal-crest { transition-delay: 0.15s; }
.royal-section.in-view .royal-name { transition-delay: 0.35s; }
.royal-section.in-view .royal-subtitle { transition-delay: 0.45s; }
.royal-section.in-view .royal-divider { /* handled separately */ }
.royal-section.in-view .royal-desc { transition-delay: 0.6s; }
.royal-section.in-view .royal-names { transition-delay: 0.7s; }
.royal-section.in-view .royal-year-label { transition-delay: 0.8s; }

/* ======== SCHEER LIFE GALLERY ======== */

.sl-gallery {
    background: var(--color-bg-dark, #0a0a0a);
    overflow-x: hidden;
}

/* ======== HERO ======== */

.sl-hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sl-hero-bg {
    position: absolute;
    inset: 0;
}

.sl-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
}

.sl-hero-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 200px 100px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.sl-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.4) 0%,
        rgba(10, 10, 10, 0.2) 40%,
        rgba(10, 10, 10, 0.6) 70%,
        rgba(10, 10, 10, 0.95) 100%
    );
}

.sl-hero-shine {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(167, 145, 93, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.sl-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 40px;
}

.sl-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 40px;
}

.sl-hero-label span {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--color-gold, #a7915d);
}

.sl-hero-label-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.6), transparent);
}

.sl-hero-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(52px, 12vw, 130px);
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-primary, #f5f5f0);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0 0 35px 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.sl-hero-divider {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold, #a7915d), transparent);
    margin: 0 auto 30px;
}

.sl-hero-subtitle {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(18px, 2.5vw, 24px);
    font-style: italic;
    color: rgba(245, 245, 240, 0.6);
    margin: 0;
}

.sl-hero-scroll {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.sl-hero-scroll span {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.4);
}

.sl-hero-scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(167, 145, 93, 0.6), transparent);
    animation: sl-scroll-pulse 2s ease-in-out infinite;
}

@keyframes sl-scroll-pulse {
    0%, 100% { opacity: 0.4; height: 50px; }
    50% { opacity: 1; height: 60px; }
}

/* ======== SECTIONS ======== */

.sl-section {
    position: relative;
    padding: 80px 40px;
    overflow: hidden;
}

.sl-section-dark {
    background: linear-gradient(to bottom, #050505, #0a0a0a);
}

.sl-section-hero {
    padding: 40px;
}

.sl-section-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

/* ======== GRIDS ======== */

.sl-grid {
    display: grid;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.sl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sl-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sl-grid-6 { grid-template-columns: repeat(6, 1fr); }
.sl-grid-duo { grid-template-columns: repeat(2, 1fr); max-width: 1000px; }

.sl-grid-asymmetric {
    grid-template-columns: 2fr 1fr;
}

.sl-grid-asymmetric-alt {
    grid-template-columns: 1fr 1fr;
    max-width: 1000px;
}

.sl-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ======== PRODUCTS ======== */

.sl-product {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    cursor: pointer;
    background: #0a0a0a;
}

.sl-product-wide { aspect-ratio: 16/9; }
.sl-product-compact { aspect-ratio: 1/1; }
.sl-product-hero { aspect-ratio: 21/9; max-height: 70vh; }

.sl-product-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.8s ease;
}

.sl-product:hover .sl-product-img {
    transform: scale(1.08);
}

/* Spotlight Effect */
.sl-product-spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(167, 145, 93, 0.15) 0%,
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 2;
    pointer-events: none;
}

.sl-product:hover .sl-product-spotlight {
    opacity: 1;
}

/* Gold Frame */
.sl-product-frame {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(167, 145, 93, 0.3);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    z-index: 3;
    pointer-events: none;
}

.sl-product:hover .sl-product-frame {
    border-color: var(--color-gold, #a7915d);
    box-shadow: 0 0 50px rgba(167, 145, 93, 0.2),
                inset 0 0 100px rgba(167, 145, 93, 0.05);
}

/* Corner Accents */
.sl-product-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sl-product-corner.tl { top: 25px; left: 25px; border-top: 2px solid var(--color-gold, #a7915d); border-left: 2px solid var(--color-gold, #a7915d); }
.sl-product-corner.tr { top: 25px; right: 25px; border-top: 2px solid var(--color-gold, #a7915d); border-right: 2px solid var(--color-gold, #a7915d); }
.sl-product-corner.bl { bottom: 25px; left: 25px; border-bottom: 2px solid var(--color-gold, #a7915d); border-left: 2px solid var(--color-gold, #a7915d); }
.sl-product-corner.br { bottom: 25px; right: 25px; border-bottom: 2px solid var(--color-gold, #a7915d); border-right: 2px solid var(--color-gold, #a7915d); }

.sl-product:hover .sl-product-corner { opacity: 1; }
.sl-product:hover .sl-product-corner.tl { top: 15px; left: 15px; }
.sl-product:hover .sl-product-corner.tr { top: 15px; right: 15px; }
.sl-product:hover .sl-product-corner.bl { bottom: 15px; left: 15px; }
.sl-product:hover .sl-product-corner.br { bottom: 15px; right: 15px; }

/* Overlay */
.sl-product-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 70%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sl-product:hover .sl-product-overlay { opacity: 1; }

.sl-product-name {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    color: var(--color-text-primary, #f5f5f0);
    margin-bottom: 8px;
    transform: translateY(30px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.sl-product:hover .sl-product-name {
    transform: translateY(0);
    opacity: 1;
}

.sl-product-type {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-gold, #a7915d);
    margin-bottom: 20px;
    transform: translateY(30px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.sl-product:hover .sl-product-type {
    transform: translateY(0);
    opacity: 1;
}

.sl-product-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text-primary, #f5f5f0);
    transform: translateY(30px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.sl-product:hover .sl-product-cta {
    transform: translateY(0);
    opacity: 1;
}

.sl-product-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.4s ease;
}

.sl-product-cta:hover {
    color: var(--color-gold, #a7915d);
}

.sl-product-cta:hover svg {
    transform: translate(3px, -3px);
}

/* ======== STATEMENTS ======== */

.sl-statement {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-dark, #0a0a0a);
    overflow: hidden;
}

.sl-statement-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.sl-statement-bg-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(200px, 40vw, 500px);
    font-weight: 200;
    color: rgba(167, 145, 93, 0.03);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.sl-statement-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.sl-statement-label {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.sl-statement-label span {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.4);
}

.sl-label-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.5), transparent);
}

.sl-statement-year {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(100px, 25vw, 300px);
    font-weight: 300;
    font-style: italic;
    line-height: 0.85;
    background: linear-gradient(135deg, #d4c4a0 0%, #a7915d 50%, #8b7749 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
}

.sl-statement-divider {
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold, #a7915d), transparent);
    margin: 0 auto 25px;
}

.sl-statement-text {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 12px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.5);
}

/* ======== PANORAMA ======== */

.sl-panorama {
    position: relative;
    height: 50vh;
    overflow: hidden;
}

.sl-panorama-tall { height: 70vh; }

.sl-panorama-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.sl-panorama-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* ======== QUOTES ======== */

.sl-quote-section {
    position: relative;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
    background: var(--color-bg-dark, #0a0a0a);
}

.sl-quote-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.sl-quote-mark {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(100px, 20vw, 200px);
    color: rgba(167, 145, 93, 0.1);
    line-height: 0.5;
    margin-bottom: -20px;
}

.sl-quote {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-primary, #f5f5f0);
    text-align: center;
    line-height: 1.4;
    max-width: 900px;
    margin: 0;
}

.sl-quote-gold {
    color: var(--color-gold, #a7915d);
}

.sl-quote-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold, #a7915d), transparent);
    margin-top: 50px;
}

.sl-quote-small .sl-quote {
    font-size: clamp(26px, 4vw, 44px);
}

/* ======== FINALE ======== */

.sl-finale {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #0a0a0a 0%, #0f0f0f 100%);
    overflow: hidden;
}

.sl-finale-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.sl-finale-line-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 150px;
    background: linear-gradient(to bottom, rgba(167, 145, 93, 0.6), transparent);
}

.sl-finale-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
}

.sl-finale-label {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.sl-finale-label span {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--color-gold, #a7915d);
}

.sl-finale-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(48px, 10vw, 100px);
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-primary, #f5f5f0);
    line-height: 1;
    margin: 0 0 30px 0;
}

.sl-finale-divider {
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold, #a7915d), transparent);
    margin: 0 auto 30px;
}

.sl-finale-text {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 15px;
    color: rgba(245, 245, 240, 0.5);
    line-height: 1.8;
    margin: 0 0 50px 0;
}

.sl-finale-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.sl-btn {
    position: relative;
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 20px 50px;
    border: 1px solid rgba(167, 145, 93, 0.4);
    background: transparent;
    color: var(--color-text-primary, #f5f5f0);
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

.sl-btn:hover {
    border-color: var(--color-gold, #a7915d);
    box-shadow: 0 0 30px rgba(167, 145, 93, 0.2);
}

.sl-btn-primary {
    background: rgba(167, 145, 93, 0.15);
    border-color: rgba(167, 145, 93, 0.5);
}

.sl-btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.2), transparent);
    transition: left 0.6s ease;
}

.sl-btn:hover .sl-btn-shine {
    left: 100%;
}

/* ======== MOBILE RESPONSIVE ======== */

@media (max-width: 1024px) {
    .sl-grid-6 { grid-template-columns: repeat(3, 1fr); }
    .sl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .sl-hero { min-height: 100vh; }
    .sl-hero-title { font-size: clamp(40px, 14vw, 80px); }
    .sl-hero-label-line { width: 40px; }

    .sl-section { padding: 40px 20px; }
    .sl-section-hero { padding: 20px; }

    .sl-grid { gap: 10px; }
    .sl-grid-3, .sl-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .sl-grid-6 { grid-template-columns: repeat(3, 1fr); }
    .sl-grid-duo { grid-template-columns: 1fr; }
    .sl-grid-asymmetric, .sl-grid-asymmetric-alt { grid-template-columns: 1fr; }

    .sl-stack { flex-direction: row; }

    .sl-product-hero { aspect-ratio: 4/3; max-height: none; }
    .sl-product-overlay { padding: 25px; opacity: 1; }
    .sl-product-name, .sl-product-type, .sl-product-cta {
        transform: translateY(0);
        opacity: 1;
    }
    .sl-product-corner { opacity: 1; }
    .sl-product-corner.tl { top: 10px; left: 10px; }
    .sl-product-corner.tr { top: 10px; right: 10px; }
    .sl-product-corner.bl { bottom: 10px; left: 10px; }
    .sl-product-corner.br { bottom: 10px; right: 10px; }

    .sl-statement { min-height: 70vh; }
    .sl-statement-year { font-size: clamp(70px, 20vw, 150px); }
    .sl-statement-bg-number { font-size: clamp(100px, 30vw, 200px); }

    .sl-panorama { height: 40vh; }
    .sl-panorama-tall { height: 50vh; }

    .sl-quote-section { min-height: 50vh; padding: 60px 20px; }
    .sl-quote { font-size: clamp(24px, 6vw, 36px); }
    .sl-quote-mark { font-size: 80px; }

    .sl-finale { min-height: 80vh; }
    .sl-finale-title { font-size: clamp(36px, 12vw, 60px); }
    .sl-finale-buttons { flex-direction: column; align-items: center; }
    .sl-btn { width: 100%; max-width: 280px; }
}

@media (max-width: 480px) {
    .sl-grid-6, .sl-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .sl-product-compact { aspect-ratio: 1; }
}



/* ======== SCHEER LIFE GALLERY ======== */

/* Hero Background */
.scheer-life-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/massschuhe-hero-v3.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(0.9);
    opacity: 0;
    animation: heroFadeIn 1.5s ease-out 0.2s forwards;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

/* Mobile: Komprimiertes Hero-Bild für schnelleres Laden */
@media (max-width: 768px) {
    .scheer-life-hero-bg {
        background-image: url('../images/massschuhe-hero-v3-mobile.jpg');
    }
}

/* Accessoires Hero Background */
.accessoires-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/accessoires-hero-v2.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(0.9);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.accessoires-hero-bg.active {
    opacity: 1;
}

/* Secondary hero quote */
.hero-quote-secondary {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-style: italic;
    color: rgba(245,245,240,0.5);
    max-width: 700px;
    margin: 12px auto 0;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeInUp 0.35s ease 1.5s forwards;
}

/* Gallery Container */
.scheer-life-gallery {
    background: var(--color-bg-dark, #0a0a0a);
    padding: 0;
}

/* ======== ROWS ======== */

.slg-row {
    display: grid;
    gap: 20px;
    padding: 20px 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.slg-row-hero-start {
    grid-template-columns: 2fr 1fr;
}

.slg-row-hero-end {
    grid-template-columns: 1fr 2fr;
}

.slg-row-hero-center {
    grid-template-columns: 1fr;
    max-width: 1200px;
}

.slg-row-4 {
    grid-template-columns: repeat(4, 1fr);
}

.slg-row-6 {
    grid-template-columns: repeat(6, 1fr);
}

.slg-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.slg-row-3-asym {
    grid-template-columns: 2fr 1fr;
}

.slg-row-duo {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
}

.slg-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ======== ITEMS ======== */

.slg-item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    cursor: pointer;
    background: #0a0a0a;
}

.slg-hero {
    aspect-ratio: 16/10;
}

.slg-hero-wide {
    aspect-ratio: 21/9;
}

.slg-small {
    aspect-ratio: 1/1;
}

.slg-tiny {
    aspect-ratio: 1/1;
}

.slg-wide {
    aspect-ratio: 16/9;
}

.slg-tall {
    aspect-ratio: 3/4;
}

.slg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slg-item:hover .slg-img {
    transform: scale(1.06);
}

/* Spotlight */
.slg-spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(167, 145, 93, 0.12) 0%,
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
    pointer-events: none;
}

.slg-item:hover .slg-spotlight {
    opacity: 1;
}

/* Frame */
.slg-frame {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(167, 145, 93, 0.2);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    z-index: 3;
    pointer-events: none;
}

.slg-item:hover .slg-frame {
    border-color: var(--color-gold, #a7915d);
    box-shadow: 0 0 40px rgba(167, 145, 93, 0.15);
}

/* Corners */
.slg-corner {
    position: absolute;
    width: 25px;
    height: 25px;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slg-corner.tl { top: 20px; left: 20px; border-top: 2px solid var(--color-gold, #a7915d); border-left: 2px solid var(--color-gold, #a7915d); }
.slg-corner.tr { top: 20px; right: 20px; border-top: 2px solid var(--color-gold, #a7915d); border-right: 2px solid var(--color-gold, #a7915d); }
.slg-corner.bl { bottom: 20px; left: 20px; border-bottom: 2px solid var(--color-gold, #a7915d); border-left: 2px solid var(--color-gold, #a7915d); }
.slg-corner.br { bottom: 20px; right: 20px; border-bottom: 2px solid var(--color-gold, #a7915d); border-right: 2px solid var(--color-gold, #a7915d); }

.slg-item:hover .slg-corner { opacity: 1; }
.slg-item:hover .slg-corner.tl { top: 12px; left: 12px; }
.slg-item:hover .slg-corner.tr { top: 12px; right: 12px; }
.slg-item:hover .slg-corner.bl { bottom: 12px; left: 12px; }
.slg-item:hover .slg-corner.br { bottom: 12px; right: 12px; }

/* Overlay */
.slg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 35px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slg-item:hover .slg-overlay { opacity: 1; }

.slg-name {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 400;
    color: var(--color-text-primary, #f5f5f0);
    margin-bottom: 6px;
    transform: translateY(25px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.slg-item:hover .slg-name { transform: translateY(0); opacity: 1; }

.slg-type {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-gold, #a7915d);
    margin-bottom: 18px;
    transform: translateY(25px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.slg-item:hover .slg-type { transform: translateY(0); opacity: 1; }

.slg-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text-primary, #f5f5f0);
    transform: translateY(25px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.slg-item:hover .slg-cta { transform: translateY(0); opacity: 1; }

.slg-cta svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease;
}

.slg-cta:hover { color: var(--color-gold, #a7915d); }
.slg-cta:hover svg { transform: translate(3px, -3px); }

/* ======== STATEMENTS ======== */

.slg-statement {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-dark, #0a0a0a);
    overflow: hidden;
}

.slg-statement-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(150px, 35vw, 450px);
    font-weight: 200;
    color: rgba(167, 145, 93, 0.03);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.slg-statement-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.slg-statement-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.slg-statement-label {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.slg-statement-label span {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.4);
}

.slg-statement-year {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(80px, 22vw, 260px);
    font-weight: 300;
    font-style: italic;
    line-height: 0.85;
    background: linear-gradient(135deg, #d4c4a0 0%, #a7915d 50%, #8b7749 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slg-statement-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold, #a7915d), transparent);
    margin: 20px auto;
}

.slg-statement-text {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.5);
}

/* ======== PANORAMA ======== */

.slg-panorama {
    position: relative;
    height: 45vh;
    overflow: hidden;
}

.slg-panorama-tall { height: 60vh; }

.slg-panorama-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.slg-panorama-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* ======== QUOTE ======== */

.slg-quote {
    position: relative;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    background: var(--color-bg-dark, #0a0a0a);
}

.slg-quote-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.slg-quote-mark {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(80px, 15vw, 150px);
    color: rgba(167, 145, 93, 0.1);
    line-height: 0.5;
    margin-bottom: -10px;
}

.slg-quote blockquote {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-primary, #f5f5f0);
    text-align: center;
    line-height: 1.4;
    max-width: 850px;
    margin: 0;
}

.slg-quote-small blockquote {
    font-size: clamp(24px, 4vw, 42px);
}

/* ======== FINALE ======== */

.slg-finale {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #0a0a0a 0%, #0f0f0f 100%);
    overflow: hidden;
}

.slg-finale-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.slg-finale-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 120px;
    background: linear-gradient(to bottom, rgba(167, 145, 93, 0.5), transparent);
}

.slg-finale-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
}

.slg-finale-label {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
}

.slg-finale-label span {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-gold, #a7915d);
}

.slg-finale-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(42px, 9vw, 90px);
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-primary, #f5f5f0);
    line-height: 1;
    margin: 0 0 25px 0;
}

.slg-finale-divider {
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold, #a7915d), transparent);
    margin: 0 auto 25px;
}

.slg-finale-text {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 14px;
    color: rgba(245, 245, 240, 0.5);
    line-height: 1.7;
    margin: 0 0 45px 0;
}

.slg-finale-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.slg-btn {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 18px 45px;
    border: 1px solid rgba(167, 145, 93, 0.4);
    background: transparent;
    color: var(--color-text-primary, #f5f5f0);
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.slg-btn:hover {
    border-color: var(--color-gold, #a7915d);
    box-shadow: 0 0 25px rgba(167, 145, 93, 0.2);
}

.slg-btn-primary {
    background: rgba(167, 145, 93, 0.15);
    border-color: rgba(167, 145, 93, 0.5);
}

/* ======== MOBILE ======== */

@media (max-width: 1024px) {
    .slg-row { padding: 15px 25px; gap: 15px; }
    .slg-row-4 { grid-template-columns: repeat(2, 1fr); }
    .slg-row-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .slg-row { padding: 10px 15px; gap: 10px; }
    .slg-row-hero-start, .slg-row-hero-end { grid-template-columns: 1fr; }
    .slg-row-3, .slg-row-4 { grid-template-columns: repeat(2, 1fr); }
    .slg-row-6 { grid-template-columns: repeat(3, 1fr); }
    .slg-row-3-asym { grid-template-columns: 1fr; }
    .slg-row-duo { grid-template-columns: 1fr; }
    .slg-stack { flex-direction: row; }

    .slg-hero, .slg-hero-wide { aspect-ratio: 16/9; }

    .slg-statement { min-height: 60vh; }
    .slg-statement-year { font-size: clamp(60px, 18vw, 140px); }
    .slg-statement-bg { font-size: clamp(100px, 28vw, 200px); }

    .slg-panorama { height: 35vh; }
    .slg-panorama-tall { height: 45vh; }

    .slg-quote { min-height: 40vh; padding: 50px 20px; }
    .slg-quote blockquote { font-size: clamp(22px, 5vw, 32px); }

    .slg-overlay { opacity: 1; padding: 20px; }
    .slg-name, .slg-type, .slg-cta { transform: translateY(0); opacity: 1; }
    .slg-corner { opacity: 1; }
    .slg-corner.tl { top: 8px; left: 8px; }
    .slg-corner.tr { top: 8px; right: 8px; }
    .slg-corner.bl { bottom: 8px; left: 8px; }
    .slg-corner.br { bottom: 8px; right: 8px; }

    .slg-finale { min-height: 70vh; }
    .slg-finale-title { font-size: clamp(32px, 10vw, 55px); }
    .slg-finale-buttons { flex-direction: column; align-items: center; }
    .slg-btn { width: 100%; max-width: 260px; }
}

@media (max-width: 480px) {
    .slg-row-6 { grid-template-columns: repeat(2, 1fr); }
}


/* ======== SCHEER GALLERY - SPG ======== */

.scheer-premium-gallery {
    background: #080808;
    padding: 0;
    position: relative;
    width: 100%;
    overflow: visible;
    isolation: isolate;
}

/* ======== GALLERY TOGGLE ======== */

.gallery-toggle {
    display: none; /* Replaced by pill-toggle */
}

.gallery-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(20px, 3vw, 32px);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.3);
    padding: 10px 5px;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.gallery-toggle-btn:hover {
    color: rgba(245, 245, 240, 0.6);
}

.gallery-toggle-btn.active {
    color: #f5f5f0;
}

.gallery-toggle-sep {
    color: rgba(167, 145, 93, 0.4);
    font-size: 24px;
    font-weight: 200;
}

/* ======== GALLERY CONTAINER ======== */

.spg-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #080808;
    isolation: isolate;
}

.spg-gallery {
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.spg-gallery.active {
    display: block;
    opacity: 1;
}

/* ======== KREATIONEN - GALERIE BUTTON ======== */

.kreationen-galerie-btn {
    position: absolute;
    top: 130px;
    right: 60px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(167, 145, 93, 0.7);
    cursor: pointer;
    padding: 14px 28px;
    border: 1px solid rgba(167, 145, 93, 0.25);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.kreationen-galerie-btn:hover {
    color: #f5f5f0;
    border-color: #a7915d;
    background: rgba(167, 145, 93, 0.08);
}

.kreationen-galerie-btn svg {
    transition: transform 0.3s ease;
}

.kreationen-galerie-btn:hover svg {
    transform: translate(3px, -3px);
}

/* Mobile-only CTA under Kreationen */
.kreationen-cta-mobile {
    display: none;
}

/* ======== KREATIONEN - ACCESSOIRES BOX ======== */

.acc-container {
    margin-top: 80px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.acc-box {
    position: relative;
    padding: 55px 65px;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.15) 0%, rgba(15, 15, 15, 0.98) 100%);
    border: 3px solid #a7915d;
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
}

/* ======== FLOATING GALLERY TOGGLE ======== */

#page-massschuhe .gallery-toggle {
    display: none; /* Replaced by pill-toggle */
}

#page-massschuhe .gallery-toggle-btn {
    font-size: 13px;
    letter-spacing: 0.15em;
    padding: 6px 4px;
}

#page-massschuhe .gallery-toggle-sep {
    font-size: 14px;
}

/* Mobile Floating Gallery Toggle — hidden on desktop */
.mobile-gallery-toggle {
    display: none;
}

/* ======== PILL TOGGLE ======== */

.pill-toggle-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.pill-toggle-container.visible {
    opacity: 1;
    pointer-events: auto;
}

.pill-toggle {
    display: flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.92);
    border: 1px solid rgba(167, 145, 93, 0.25);
    border-radius: 50px;
    padding: 5px;
    position: relative;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.pill-toggle-bg {
    position: absolute;
    height: calc(100% - 10px);
    width: calc(50% - 5px);
    background: linear-gradient(135deg, #a7915d 0%, #c4a96a 100%);
    border-radius: 50px;
    top: 5px;
    left: 5px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(167, 145, 93, 0.3);
}

.pill-toggle[data-active="accessoires"] .pill-toggle-bg {
    transform: translateX(100%);
}

.pill-toggle-btn {
    position: relative;
    z-index: 1;
    padding: 14px 32px;
    border: none;
    background: transparent;
    color: rgba(245, 245, 240, 0.6);
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}

.pill-toggle-btn:hover {
    color: rgba(245, 245, 240, 0.9);
}

.pill-toggle-btn.active {
    color: #0a0a0a;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .pill-toggle-container {
        bottom: 20px;
    }

    .pill-toggle-btn {
        padding: 12px 24px;
        font-size: 11px;
        letter-spacing: 0.12em;
    }
}

/* ======== SIMPLE GRID GALLERY ======== */

.spg-masonry {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    width: 100%;
    background: #080808;
    position: relative;
}

/* Clean bottom fade-out */
.spg-masonry::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent 0%, #080808 100%);
    pointer-events: none;
    z-index: 4;
}

.spg-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    background: #151515;
    display: block;
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: 200px 200px;
}

/* Animations disabled for performance */

.spg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #151515;
    /* Image Protection */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* ======== ITEM OVERLAY ======== */

.spg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.spg-item:hover .spg-overlay {
    opacity: 1;
}

.spg-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 400;
    color: var(--color-text-primary, #f5f5f0);
    margin-bottom: 6px;
    transform: translateY(15px);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.spg-item:hover .spg-title {
    transform: translateY(0);
    opacity: 1;
}

.spg-cat {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold, #a7915d);
    transform: translateY(15px);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.spg-item:hover .spg-cat {
    transform: translateY(0);
    opacity: 1;
}

/* Golden Border on Hover */
.spg-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.spg-item:hover::before {
    border-color: var(--color-gold, #a7915d);
}


/* Safari: Keine transform-Animation für Galerie-Items (verhindert Springen) */
.is-safari .spg-item {
    opacity: 1 !important;
    transform: none !important;
}

/* ======== FOOTER CTA ======== */

.spg-footer {
    position: relative;
    padding: 100px 40px;
    text-align: center;
    background: #080808;
    margin-top: 60px;
}

.spg-footer-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(167, 145, 93, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.spg-footer-content {
    position: relative;
    z-index: 2;
}

.spg-footer-text {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.5);
    margin-bottom: 30px;
}

.spg-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: transparent;
    border: 1px solid var(--color-gold, #a7915d);
    padding: 18px 45px;
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-gold, #a7915d);
    cursor: pointer;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.spg-footer-btn:hover {
    background: var(--color-gold, #a7915d);
    color: #0a0a0a;
}

.spg-footer-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease;
}

.spg-footer-btn:hover svg {
    transform: translateX(5px);
}

/* ======== LIGHTBOX ======== */

.spg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.spg-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.spg-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
}

.spg-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 2;
}

.spg-lightbox-img-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spg-lightbox-img-wrapper img {
    max-width: 85vw;
    max-height: 80vh;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Image Protection */
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.spg-lightbox.active .spg-lightbox-img-wrapper img {
    opacity: 1;
    transform: scale(1);
}

.spg-lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.spg-lightbox-close:hover {
    opacity: 1;
}

.spg-lightbox-close svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-text-primary, #f5f5f0);
    stroke-width: 1.5;
    fill: none;
}

.spg-lightbox-prev,
.spg-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(167, 145, 93, 0.3);
    cursor: pointer;
    padding: 20px 15px;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.spg-lightbox-prev:hover,
.spg-lightbox-next:hover {
    opacity: 1;
    border-color: var(--color-gold, #a7915d);
    background: rgba(167, 145, 93, 0.1);
}

.spg-lightbox-prev {
    left: -80px;
}

.spg-lightbox-next {
    right: -80px;
}

.spg-lightbox-prev svg,
.spg-lightbox-next svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-text-primary, #f5f5f0);
    stroke-width: 1.5;
    fill: none;
}

.spg-lightbox-info {
    position: absolute;
    bottom: -60px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spg-lightbox-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text-primary, #f5f5f0);
}

.spg-lightbox-cat {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold, #a7915d);
}

.spg-lightbox-counter {
    position: absolute;
    bottom: -60px;
    right: 0;
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(245, 245, 240, 0.5);
}

/* ======== RESPONSIVE - GALLERY ======== */

@media (max-width: 1400px) {
    .spg-masonry { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1100px) {
    .spg-masonry { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 800px) {
    .spg-masonry { grid-template-columns: repeat(3, 1fr); }

    #page-massschuhe .gallery-toggle {
        top: 0;
        padding: 15px 0;
        gap: 20px;
    }

    #page-massschuhe .gallery-toggle-btn {
        font-size: 11px;
    }

    .spg-lightbox-prev {
        left: 10px;
    }

    .spg-lightbox-next {
        right: 10px;
    }
}

@media (max-width: 550px) {
    .spg-masonry { grid-template-columns: repeat(2, 1fr); }

    #page-massschuhe .gallery-toggle {
        top: 0;
        padding: 12px 0;
        gap: 15px;
    }

    #page-massschuhe .gallery-toggle-btn {
        font-size: 10px;
        letter-spacing: 0.1em;
        padding: 4px 2px;
    }

    #page-massschuhe .gallery-toggle-sep {
        font-size: 12px;
    }

    .spg-overlay {
        padding: 15px 10px;
        opacity: 1;
    }

    .spg-title, .spg-cat {
        transform: translateY(0);
        opacity: 1;
    }

    .spg-title {
        font-size: 16px;
    }

    .spg-footer {
        padding: 60px 20px;
    }

    .spg-footer-btn {
        padding: 15px 30px;
        font-size: 10px;
    }

    .spg-lightbox-prev,
    .spg-lightbox-next {
        padding: 15px 12px;
    }

    .spg-lightbox-info {
        bottom: -50px;
        left: 10px;
    }

    .spg-lightbox-counter {
        bottom: -50px;
        right: 10px;
    }

    .spg-lightbox-close {
        top: -40px;
    }
}

/* ======== SCHEER ESSEN ======== */
#page-essen .section-120-overflow {
    background: linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(5,5,5,0.75) 100%);
}

/* ======== SCHEER FUEHRUNGEN ======== */
#page-gruppenfuehrungen .section-120-overflow {
    background: linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(5,5,5,0.75) 100%);
}

/* ======== REPARATUR VORHER/NACHHER ======== */
#page-reparatur #reparatur-vorher-nachher {
    background: linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(5,5,5,0.7) 100%);
}

/* ======== FAQ ======== */
#page-faq .faq-content-section {
    background: linear-gradient(180deg, rgba(10,10,10,0.75) 0%, rgba(5,5,5,0.8) 100%);
}

/* ======== OPTIMIERUNGEN ======== */

/* 0. Glow effects in hero sections only */
.hero .glow-subtle,
.hero .glow-overlay,
.hero .glow-pulse,
.hero .glow-pulse-z3,
.subpage-hero .glow-subtle,
.subpage-hero .glow-overlay,
.subpage-hero .glow-pulse,
.subpage-hero .glow-pulse-z3 {
    display: none !important;
}

.timeline-card, .service-card, .faq-item, .globe-marker,
.globe-marker-center span, .testimonial-card, .dropdown-menu,
.why-scheer .feature, .process-circle,
.card-gold-border, .card-aspect-gold,
.icon-80-glow, .icon-circle-60,
[class*="btn"]:hover, [class*="pulse"], [class*="glow"] {
    box-shadow: none !important;
}

/* 2. will-change: unnecessary GPU layers - remove from static elements */
.parallax-bg,
.parallax-section > .parallax-bg,
.tilt-3d {
    will-change: auto !important;
}

/* 3. GPU acceleration for elements that actually animate during scroll */
.hero-content,
.scroll-progress,
nav {
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* 4. Pre-composite section backgrounds to prevent jank on scroll entry */
.erwin-wurm-bg-style,
.showcase-bg-img,
.essence-bg-style,
.massschuhe-bg-style,
.testimonials-bg {
    will-change: transform;
    transform: translateZ(0);
}

/* 3. Scroll: nav background — solid, no blur for performance */
nav.scrolled {
    background: rgba(10,10,10,0.92);
    border-bottom: 1px solid rgba(167,145,93,0.15);
}

/* 4. Infinite animations: shine animates 'left' (triggers reflow every frame),
      glow-pulse and floatParticle cause continuous repaints */
.is-safari .hero-gold-shine,
/* Disable heavy animations for Safari - keep static */
.is-safari .section-shine,
.is-safari .shine-anim,
.is-safari .shine-anim-delay,
.is-safari .shine-anim-4s,
.is-safari .glow-pulse,
.is-safari .glow-pulse-z3,
.is-safari .scroll-line {
    animation: none !important;
}

/* ======== Pause animations on inactive pages ======== */
/* Removed expensive .page-section:not(.animations-active) * selector.
   showPage() sets display: none on inactive pages, which automatically pauses animations. */


/* Disable glow animations on Reparatur & Unternehmen pages */
#page-reparatur .glow-pulse,
#page-reparatur .glow-pulse-z3,
#page-reparatur .glow-overlay,
#page-reparatur .reparatur-glow,
#page-unternehmen .glow-pulse,
#page-unternehmen .glow-pulse-z3,
#page-unternehmen .glow-overlay,
#page-unternehmen .dynasty-glow {
    animation: none !important;
    opacity: 0.5;
}

/* Parallax backgrounds */
.reparatur-parallax-bg,
.reparatur-parallax-overlay,
.unternehmen-parallax-bg,
.unternehmen-parallax-overlay {
    contain: strict;
    content-visibility: auto;
}

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


/* ======== DER KLANG DES HAUSES ======== */

.klang-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(rgba(10, 10, 8, 0.7), rgba(10, 10, 8, 0.7)),
                url('../images/klang-bg.jpg') center/cover no-repeat;
    background-color: var(--color-bg-darker);
}

/* Radial gold glow behind the player */
.klang-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,145,93,0.08) 0%, rgba(167,145,93,0.03) 40%, transparent 70%);
    pointer-events: none;
    animation: klangGlowPulse 6s ease-in-out infinite;
}

@keyframes klangGlowPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

/* Top decorative line — removed for seamless transition from dynasty */

.klang-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    text-align: center;
    padding: 0 40px;
    margin: auto;
}

/* Eyebrow */
.klang-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.klang-section.in-view .klang-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.klang-eyebrow-line {
    width: 60px;
    height: 1px;
    background: var(--color-gold-30);
}

.klang-eyebrow-text {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-gold);
}

/* Title */
.klang-title {
    font-family: var(--font-heading);
    font-size: 74px;
    font-weight: 300;
    color: var(--color-text-primary);
    letter-spacing: 3px;
    line-height: 1.1;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

.klang-section.in-view .klang-title {
    opacity: 1;
    transform: translateY(0);
}

.klang-title .text-gold-light {
    color: var(--color-gold-light);
}

/* Subtitle */
.klang-subtitle {
    font-family: var(--font-heading);
    font-size: 19px;
    font-style: italic;
    font-weight: 300;
    color: var(--color-text-50);
    letter-spacing: 0.5px;
    margin-bottom: 70px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.4s, transform 1s ease 0.4s;
}

.klang-section.in-view .klang-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Audio Player */
.klang-player {
    position: relative;
    padding: 50px 60px;
    border: 1px solid var(--color-gold-15);
    background: rgba(10, 10, 10, 0.7);
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 1s ease 0.6s, transform 1s ease 0.6s, border-color 0.5s ease, box-shadow 0.5s ease;
}

.klang-section.in-view .klang-player {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.klang-player:hover {
    border-color: var(--color-gold-30);
    box-shadow: 0 0 80px rgba(167, 145, 93, 0.06);
}

/* Corner accents - bigger */
.klang-corner {
    position: absolute;
    width: 30px;
    height: 30px;
}
.klang-corner::before,
.klang-corner::after {
    content: '';
    position: absolute;
    background: var(--color-gold-30);
    transition: background 0.5s ease;
}
.klang-corner--tl { top: -1px; left: -1px; }
.klang-corner--tl::before { top: 0; left: 0; width: 1px; height: 30px; }
.klang-corner--tl::after { top: 0; left: 0; width: 30px; height: 1px; }

.klang-corner--tr { top: -1px; right: -1px; }
.klang-corner--tr::before { top: 0; right: 0; width: 1px; height: 30px; }
.klang-corner--tr::after { top: 0; right: 0; width: 30px; height: 1px; }

.klang-corner--bl { bottom: -1px; left: -1px; }
.klang-corner--bl::before { bottom: 0; left: 0; width: 1px; height: 30px; }
.klang-corner--bl::after { bottom: 0; left: 0; width: 30px; height: 1px; }

.klang-corner--br { bottom: -1px; right: -1px; }
.klang-corner--br::before { bottom: 0; right: 0; width: 1px; height: 30px; }
.klang-corner--br::after { bottom: 0; right: 0; width: 30px; height: 1px; }

.klang-player:hover .klang-corner::before,
.klang-player:hover .klang-corner::after {
    background: var(--color-gold-60);
}

/* Play button - large & cinematic */
.klang-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 40px;
    border-radius: 50%;
    border: 1px solid var(--color-gold-30);
    background: transparent;
    cursor: pointer;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Outer ring glow */
.klang-play-btn::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid var(--color-gold-10);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

.klang-play-btn:hover {
    border-color: var(--color-gold);
    background: var(--color-gold-10);
    box-shadow: 0 0 60px rgba(167, 145, 93, 0.2), inset 0 0 30px rgba(167, 145, 93, 0.05);
    transform: scale(1.05);
}

.klang-play-btn:hover::before {
    border-color: var(--color-gold-30);
    inset: -16px;
}

.klang-player.playing .klang-play-btn {
    border-color: var(--color-gold-50);
    box-shadow: 0 0 40px rgba(167, 145, 93, 0.15);
}

.klang-player.playing .klang-play-btn::before {
    border-color: var(--color-gold-20);
    animation: klangRingPulse 3s ease-in-out infinite;
}

@keyframes klangRingPulse {
    0%, 100% { inset: -12px; opacity: 1; }
    50% { inset: -20px; opacity: 0.4; }
}

.klang-play-btn svg {
    width: 28px;
    height: 28px;
    fill: var(--color-gold);
    transition: fill 0.3s ease;
}

/* Slight offset for play icon visual centering */
.klang-play-btn .icon-play {
    margin-left: 4px;
}

.klang-play-btn .icon-pause {
    display: none;
}

.klang-player.playing .klang-play-btn .icon-play {
    display: none;
}

.klang-player.playing .klang-play-btn .icon-pause {
    display: block;
}

/* Waveform visualization */
.klang-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 80px;
    margin-bottom: 40px;
}

.klang-bar {
    width: 2px;
    background: var(--color-gold-15);
    border-radius: 1px;
    transition: background 0.4s ease;
}

.klang-player.playing .klang-bar {
    background: var(--color-gold-30);
}

.klang-bar.active {
    background: var(--color-gold) !important;
}

/* Progress bar */
.klang-progress-wrap {
    width: 100%;
    height: 2px;
    background: var(--color-gold-10);
    cursor: pointer;
    position: relative;
    margin-bottom: 14px;
}

.klang-progress-wrap:hover {
    height: 3px;
}

.klang-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-gold-40), var(--color-gold));
    transition: width 0.1s linear;
    position: relative;
}

.klang-progress::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-gold);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.klang-progress-wrap:hover .klang-progress::after {
    opacity: 1;
}

/* Time display */
.klang-time {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 3px;
    color: var(--color-text-40);
}

/* Headphone hint */
.klang-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text-30);
    opacity: 0;
    transition: opacity 1s ease 1s;
}

.klang-section.in-view .klang-hint {
    opacity: 1;
}

.klang-hint svg {
    width: 16px;
    height: 16px;
    color: var(--color-gold-40);
}

/* Mobile */
@media (max-width: 768px) {
    .klang-section {
        min-height: 100vh;
    }
    .klang-inner {
        padding: 0 24px;
    }
    .klang-title {
        font-size: 44px;
        letter-spacing: 1px;
    }
    .klang-subtitle {
        font-size: 16px;
        margin-bottom: 50px;
    }
    .klang-player {
        padding: 35px 28px;
    }
    .klang-play-btn {
        width: 80px;
        height: 80px;
    }
    .klang-play-btn svg {
        width: 24px;
        height: 24px;
    }
    .klang-waveform {
        height: 60px;
    }
    .klang-glow {
        width: 400px;
        height: 400px;
    }
}

/* ======== SCHENKEN SECTION ======== */
.schenken-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.schenken-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* ======== ANEKDOTEN ======== */

/* Container */
.container-900 {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

/* Intro Text */
.anekdote-intro-text {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    color: rgba(245, 245, 240, 0.7);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}

/* ======== ANEKDOTE ======== */
.anekdote-section {
    background: #050505;
    padding: 100px 60px;
}

.anekdote-premium {
    max-width: 950px;
    margin: 0 auto;
    padding: 90px 110px;
    background: #0a0a0a;
    border: 1px solid rgba(167, 145, 93, 0.2);
    position: relative;
    overflow: hidden;
}

/* Corner Decorations */
.anekdote-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    border-color: rgba(167, 145, 93, 0.4);
    border-style: solid;
    border-width: 0;
}

.anekdote-corner-tl {
    top: 25px;
    left: 25px;
    border-top-width: 1px;
    border-left-width: 1px;
}

.anekdote-corner-tr {
    top: 25px;
    right: 25px;
    border-top-width: 1px;
    border-right-width: 1px;
}

.anekdote-corner-bl {
    bottom: 25px;
    left: 25px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

.anekdote-corner-br {
    bottom: 25px;
    right: 25px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

/* Subtle Center Glow */
.anekdote-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(167, 145, 93, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* Inner Content */
.anekdote-premium-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Label */
.anekdote-label {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(167, 145, 93, 0.7);
    margin-bottom: 30px;
    font-weight: 500;
}

/* Title */
.anekdote-premium-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(32px, 5vw, 46px);
    font-weight: 300;
    color: #f5f5f0;
    letter-spacing: 3px;
    line-height: 1.3;
    margin-bottom: 25px;
}

.anekdote-title-gold {
    color: #a7915d;
}

/* Divider */
.anekdote-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.5), transparent);
    margin: 0 auto 50px;
}

/* Content */
.anekdote-premium-content {
    max-width: 620px;
    margin: 0 auto;
}

.anekdote-premium-content p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    line-height: 2;
    color: rgba(245, 245, 240, 0.7);
    margin-bottom: 40px;
}

/* Highlight */
.anekdote-premium-highlight {
    margin: 55px 0 !important;
    color: rgba(245, 245, 240, 0.8) !important;
}

.anekdote-gold-text {
    display: block;
    font-size: 32px;
    color: #a7915d;
    letter-spacing: 2px;
    margin: 20px 0;
    text-shadow: 0 0 40px rgba(167, 145, 93, 0.3);
}

/* Conclusion */
.anekdote-premium-conclusion {
    font-style: italic;
    color: rgba(245, 245, 240, 0.45) !important;
    margin-bottom: 0 !important;
}



/* ======== HERITAGE GLOBE ======== */

.heritage-globe-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background: linear-gradient(rgba(5, 10, 16, 0.85), rgba(5, 10, 16, 0.85)),
                url('../images/klang-bg.jpg') center/cover no-repeat;
    background-color: #000000;
}

/* Globe Container */
.globe-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.globe-container:active {
    cursor: grabbing;
}

/* UI Overlay */
.globe-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.globe-ui > * {
    pointer-events: auto;
}

/* Header */
.globe-header {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 20;
}

.globe-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #a7915d;
    margin-bottom: 15px;
}

.globe-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 300;
    color: #f5f5f0;
    letter-spacing: 4px;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

/* City Markers (HTML overlay) */
.globe-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

.globe-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.globe-marker span {
    display: block;
    font-family: 'Raleway', sans-serif;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}

/* Normale Städte - dezent aber sichtbar */
.globe-marker-normal span {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

/* Scheer Städte - gold, prominent */
.globe-marker-scheer span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #c9a961;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(167, 145, 93, 0.5);
    border-radius: 25px;
    text-transform: uppercase;
}

.globe-marker-scheer:hover span {
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    transform: scale(1.1);
}

/* Wien - Zentrum, extra prominent mit Glow */
.globe-marker-center span {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #FFD700;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
    border: 2px solid rgba(255, 215, 0, 0.6);
    padding: 10px 20px;
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.4),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
    text-transform: uppercase;
    animation: wienPulse 2s ease-in-out infinite;
}

@keyframes wienPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* Info Panel */
.globe-info-panel {
    position: absolute;
    top: 50%;
    right: 60px;
    transform: translateY(-50%) translateX(30px);
    width: 320px;
    background: linear-gradient(135deg, rgba(10, 15, 20, 0.95) 0%, rgba(15, 20, 30, 0.95) 100%);
    border: 1px solid rgba(167, 145, 93, 0.4);
    border-radius: 4px;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(167, 145, 93, 0.1),
        inset 0 0 60px rgba(167, 145, 93, 0.03);
    z-index: 30;
}

.globe-info-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.globe-info-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(167, 145, 93, 0.3);
    border-radius: 50%;
    color: #a7915d;
    font-size: 20px;
    line-height: 26px;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.globe-info-close:hover {
    background: rgba(167, 145, 93, 0.2);
    border-color: #a7915d;
}

.globe-info-city {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #FFD700;
    margin-bottom: 8px;
}

.globe-info-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-style: italic;
    color: rgba(245, 245, 240, 0.7);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(167, 145, 93, 0.2);
}

.globe-info-category {
    font-family: 'Raleway', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(167, 145, 93, 0.7);
    margin-top: 15px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.globe-info-person {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    color: #f5f5f0;
    line-height: 1.8;
}

/* Controls Hint */
.globe-controls-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(245, 245, 240, 0.4);
    text-align: center;
    pointer-events: none;
}

/* Zoom Controls */
.globe-zoom-controls {
    position: absolute;
    bottom: 80px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
}

.globe-zoom-btn {
    width: 40px;
    height: 40px;
    background: rgba(10, 15, 20, 0.8);
    border: 1px solid rgba(167, 145, 93, 0.4);
    border-radius: 4px;
    color: #a7915d;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.globe-zoom-btn:hover {
    background: rgba(167, 145, 93, 0.2);
    border-color: #a7915d;
    color: #FFD700;
}

.globe-zoom-reset {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 900px) {
    .heritage-globe-section {
        min-height: 600px;
    }
    
    .globe-header {
        top: 40px;
    }
    
    .globe-info-panel {
        top: auto;
        bottom: 100px;
        right: 50%;
        transform: translateX(50%) translateY(30px);
        width: calc(100% - 40px);
        max-width: 350px;
    }
    
    .globe-info-panel.active {
        transform: translateX(50%) translateY(0);
    }
    
    .globe-zoom-controls {
        bottom: 60px;
        right: 20px;
    }
    
    .globe-controls-hint {
        bottom: 20px;
        font-size: 10px;
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .heritage-globe-section {
        min-height: 500px;
    }
    
    .globe-header {
        top: 30px;
    }
    
    .globe-eyebrow {
        font-size: 10px;
        letter-spacing: 4px;
    }
    
    .globe-marker span {
        font-size: 8px;
        padding: 4px 8px;
    }
    
    .globe-marker-center span {
        font-size: 10px;
        padding: 6px 12px;
    }
    
    .globe-info-panel {
        padding: 20px;
        bottom: 80px;
    }
    
    .globe-zoom-btn {
        width: 35px;
        height: 35px;
    }
}


/* ======== IMPERIAL PORTAL ======== */

.imperial-portal-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 800px;
    background: #000000;
}

/* Portal Container (Three.js Canvas) */
.portal-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* UI Overlay */
.portal-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.portal-ui > * {
    pointer-events: auto;
}

/* Header */
.portal-header {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 20;
}

.portal-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #a7915d;
    margin-bottom: 15px;
}

.portal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 300;
    color: #f5f5f0;
    letter-spacing: 6px;
    text-shadow:
        0 0 40px rgba(0, 0, 0, 0.8),
        0 0 80px rgba(167, 145, 93, 0.3);
    margin-bottom: 20px;
}

.portal-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(16px, 2vw, 20px);
    font-style: italic;
    font-weight: 300;
    color: rgba(167, 145, 93, 0.8);
    letter-spacing: 3px;
}

/* Royal Houses Info Container */
.portal-info-container {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    padding: 0 20px;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.imperial-portal-section.scrolled .portal-info-container {
    opacity: 1;
}

.portal-info-item {
    text-align: center;
    padding: 20px 30px;
    background: linear-gradient(135deg, rgba(10, 8, 5, 0.9) 0%, rgba(20, 15, 10, 0.85) 100%);
    border: 1px solid rgba(167, 145, 93, 0.3);
    border-radius: 2px;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    opacity: 0;
    transform: translateY(20px);
}

.portal-info-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.portal-info-item:hover {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.15),
        inset 0 0 20px rgba(255, 215, 0, 0.05);
}

.portal-info-title {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #FFD700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.portal-info-detail {
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-style: italic;
    color: rgba(245, 245, 240, 0.7);
    letter-spacing: 1px;
}

/* Scroll Hint */
.portal-scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(167, 145, 93, 0.6);
    text-transform: uppercase;
    animation: fadeInOut 3s ease-in-out infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    margin: 15px auto 0;
    border-right: 1px solid rgba(167, 145, 93, 0.5);
    border-bottom: 1px solid rgba(167, 145, 93, 0.5);
    transform: rotate(45deg);
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50% { transform: rotate(45deg) translate(5px, 5px); }
}

/* Responsive */
@media (max-width: 900px) {
    .imperial-portal-section {
        min-height: 700px;
    }

    .portal-header {
        top: 40px;
    }

    .portal-info-container {
        bottom: 80px;
        gap: 15px;
    }

    .portal-info-item {
        padding: 15px 20px;
    }
}

@media (max-width: 600px) {
    .imperial-portal-section {
        min-height: 600px;
    }

    .portal-header {
        top: 30px;
        padding: 0 20px;
    }

    .portal-eyebrow {
        font-size: 10px;
        letter-spacing: 4px;
    }

    .portal-info-container {
        bottom: 60px;
        flex-direction: column;
        align-items: center;
    }

    .portal-info-item {
        width: 100%;
        max-width: 280px;
    }

    .portal-scroll-hint {
        bottom: 15px;
        font-size: 10px;
    }
}

/* ======== KAISER- UND KOENIGLICH ======== */
.imperial-royal-section {
    position: relative;
    padding: 140px 0 120px;
    background: linear-gradient(180deg, #080808 0%, #0a0a0a 50%, #080808 100%);
    overflow: hidden;
}

.imperial-royal-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/imperial-bg.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(0.7) contrast(1.05) sepia(0.15);
    opacity: 0.85;
    pointer-events: none;
}

.imperial-royal-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 70px;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

.imperial-royal-subtitle {
    font-family: var(--font-heading);
    font-size: 22px;
    font-style: italic;
    color: var(--color-text-70);
    margin-top: 15px;
}

/* Horizontal Scroll Container */
.imperial-scroll-wrapper {
    position: relative;
    width: 100%;
    z-index: 2;
}

.imperial-scroll-container {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 0;
}

.imperial-scroll-container::-webkit-scrollbar {
    display: none;
}

.imperial-scroll {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 50px;
    padding: 30px 80px;
    width: max-content;
    margin: 0 auto;
}

/* Imperial Card */
.imperial-card {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    opacity: 0;
    transform: scale(0.97) translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Scroll-triggered: Animation startet wenn Section .in-view bekommt */
.imperial-royal-section.in-view .imperial-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.imperial-royal-section.in-view .imperial-card:nth-child(1) { transition-delay: 0.1s; }
.imperial-royal-section.in-view .imperial-card:nth-child(2) { transition-delay: 0.25s; }
.imperial-royal-section.in-view .imperial-card:nth-child(3) { transition-delay: 0.4s; }
.imperial-royal-section.in-view .imperial-card:nth-child(4) { transition-delay: 0.55s; }
.imperial-royal-section.in-view .imperial-card:nth-child(5) { transition-delay: 0.7s; }

.imperial-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.12) 0%, rgba(20, 20, 20, 0.85) 100%);
    border: 3px solid #a7915d;
    box-shadow: 0 10px 50px rgba(167, 145, 93, 0.25);
    padding: 45px 35px 40px;
    text-align: center;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.imperial-card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(167,145,93,0.03) 0%, transparent 30%);
    pointer-events: none;
}

.imperial-card-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(167, 145, 93, 0.3);
}

/* Corner Ornaments */
.imperial-ornament {
    position: absolute;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(167,145,93,0.35);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.imperial-card-inner:hover .imperial-ornament {
    border-color: rgba(167,145,93,0.5);
}

.imperial-ornament-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.imperial-ornament-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.imperial-ornament-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.imperial-ornament-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }

/* Wappen Image */
.imperial-wappen {
    width: 130px;
    height: 160px;
    object-fit: contain;
    margin-bottom: 25px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

.imperial-card-inner:hover .imperial-wappen {
    transform: scale(1.05);
}

/* Typography */
.imperial-year {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 300;
    color: var(--color-gold);
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-shadow: 0 2px 20px rgba(167,145,93,0.3);
}

.imperial-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text-60);
    margin-bottom: 18px;
    line-height: 1.6;
}

.imperial-name {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.imperial-house {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-gold);
}

/* Decorative Line */
.imperial-divider {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-40), transparent);
    margin: 20px auto;
}

/* Scroll Hint */
.imperial-scroll-hint {
    text-align: center;
    margin-top: 50px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-text-40);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.scroll-arrow {
    color: var(--color-gold);
    font-size: 18px;
    animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-arrow-left { animation-delay: 0s; }
.scroll-arrow-right { animation-delay: 1s; }

@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(3px); }
}

.scroll-arrow-left {
    animation-name: scrollPulseLeft;
}

@keyframes scrollPulseLeft {
    0%, 100% { opacity: 0.4; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(-3px); }
}

/* Gradient Fades on Edges */
.imperial-scroll-wrapper::before,
.imperial-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 2;
}

.imperial-scroll-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, #0a0a0a 0%, transparent 100%);
}

.imperial-scroll-wrapper::after {
    right: 0;
    background: linear-gradient(-90deg, #0a0a0a 0%, transparent 100%);
}



/* ======== ESSENCE CARDS ======== */
.essence-cards-wrapper {
    position: relative;
}

.essence-cards-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

/* Staggered card animation */

/* Hide carousel nav on desktop (>1024px) */
@media (min-width: 1025px) {
    .essence-nav,
    .essence-nav-container,
    .essence-dots,
    .testimonials-nav,
    .testimonials-nav-container {
        display: none;
    }
}

/* ======== SCROLL FIX ESSEN/FÜHRUNGEN ======== */
#page-essen,
#page-gruppenfuehrungen {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

#page-essen .hero-transparent,
#page-gruppenfuehrungen .hero-transparent,
#page-essen .hero-70vh,
#page-gruppenfuehrungen .hero-70vh,
#page-essen .section-120,
#page-gruppenfuehrungen .section-120 {
    overflow: visible !important;
    contain: none !important;
}