/* =========================================================
   GLOBAL RESET & BASE
   ========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #15100a;
    background: radial-gradient(circle at center, #231b13 0%, #15100a 80%);
    background-attachment: fixed;
    height: 100%;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    background: transparent !important;
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* =========================================================
   GOLDEN VEIL-EFFEKT (PAGE LOAD MASKING)
   ========================================================= */
body.page-loading .content {
    opacity: 0 !important;
    filter: blur(20px) !important;
    transition: none !important;
}

.content {
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* WIRD AKTIV BEIM "SECOND PAGE LOAD" (INNERHALB EINER SESSION) */
body.fast-load .content {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    filter: blur(0) !important;
}


/* =========================================================
   THEMES
   ========================================================= */
body.theme-wirkung {
    --card-bg: rgba(0, 0, 0, 0.4);
    --card-border: rgba(220, 179, 123, 0.25);
    --card-text: #ffffff;
    --nav-active-text: #1a140d;
    --section-title-bg: rgba(220, 179, 123, 0.9);
}

:root {
    --card-bg: rgba(0, 0, 0, 0.4);
    --card-border: rgba(255, 255, 255, 0.15);
    --card-text: #ffffff;
    --nav-active-text: #ffffff;
    --section-title-bg: transparent;
}

/* =========================================================
   NAVIGATION (TOP NAV)
   ========================================================= */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Smooth fade: Dark at top, stays dark until 25% height, fades to transparent at bottom edge */
    background: linear-gradient(to bottom, rgba(21, 16, 10, 1) 0%, rgba(21, 16, 10, 1) 25%, rgba(21, 16, 10, 0) 100%);
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 2vw;
    padding-right: 2vw;
    box-sizing: border-box;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.5s ease, filter 1.5s ease;
}

.top-nav::-webkit-scrollbar {
    display: none;
}

.nav-item {
    flex: 0 0 auto;
    min-width: 0;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: rgba(84, 58, 32, 0.2); /* 20% brown */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 10px;
    padding: clamp(8px, 1vw, 16px) clamp(16px, 1.5vw, 24px); /* Increased padding to let text breathe */
    font-size: clamp(8px, 1vw, 11.5px);
    font-weight: 300;
    letter-spacing: clamp(1px, 0.1vw, 1.5px);
    text-transform: uppercase;
    white-space: nowrap; /* Forces text onto one line */
    transition: background-color 0.4s ease, font-weight 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); /* Premium Inset-Shadow Illusion */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    position: relative;
}

.nav-item::after {
    display: block;
    content: attr(data-text);
    letter-spacing: inherit;
    text-transform: uppercase;
    font-weight: 600; /* GHOST LAYER: Always bold to reserve exactly the right max-width */
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

/* Home Icon Navigation Override */
.nav-item.nav-home {
    padding: 0 15px; /* Adjust padding for logo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-item.nav-home::after {
    display: none !important; /* completely removes invisible text block to ensure 100% mathematical vertical centering */
}

.nav-item.nav-home img {
    height: 29px;
    width: auto;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Background video explicitly restricted to mobile */
.mobile-bg-video {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
    opacity: 0.45;
    pointer-events: none;
}

/* Reusable fixed background video (replaces inline styles) */
.bg-video-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
    opacity: 0.45;
    pointer-events: none;
}

/* Ensure Hover only triggers on devices with a mouse, fixing iOS double-tap bugs */
@media (hover: hover) {
    /* Hover State (Ghost Layer Method: Zero Jitter) */
    .nav-item:hover {
        font-weight: 600 !important; /* Safely activates bold, space already reserved by Ghost */
        color: #ffffff !important;
        box-shadow: inset 0 0 0 1px rgba(220, 179, 123, 0.4);
    }

    /* Hover Colors for Nav Items */
    .nav-item:hover { background-color: rgba(220, 179, 123, 0.5); }
    .nav-item.nav-home:hover img { filter: brightness(0) saturate(100%) invert(100%); }
}

/* Active State (Ghost Layer Method: Zero Jitter) */
.nav-item.active {
    font-weight: 600 !important;
    color: #1a140d !important;
    background-color: rgba(220, 179, 123, 0.9);
    box-shadow: inset 0 0 0 1px rgba(220, 179, 123, 0.9);
}

.nav-item.nav-home.active img { filter: brightness(0) saturate(100%) invert(100%); }

/* =========================================================
   MAIN CONTENT AREA
   ========================================================= */
.content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 114px 20px 40px 20px;
    box-sizing: border-box;
}

/* =========================================================
   SECTION TITLE BUTTON
   ========================================================= */
.section-title-btn {
    font-family: inherit;
    font-size: 24px;
    font-weight: 600; 
    letter-spacing: 1px;
    margin-bottom: 24px;
    color: var(--nav-active-text, #1a140d);
    background-color: var(--section-title-bg);
    border: none;
    padding: 24px 40px 16px 40px;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    z-index: 50;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* "MEHR" Label + Arrow */
.section-title-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.section-title-more svg {
    width: 40px;
    height: 40px;
    stroke: currentColor;
    stroke-width: 2.5px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease;
}

@media (hover: hover) {
    .section-title-btn:hover {
        filter: brightness(1.1);
    }

    .section-title-btn:hover .section-title-more {
        opacity: 1;
    }
}

/* Arrow rotates up when opened */
.section-title-btn.opened .section-title-more svg {
    transform: rotate(180deg);
    color: #ffffff;
}

/* =========================================================
   CARDS WRAPPER (ANIMATION)
   ========================================================= */
.cards-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in-out;
    padding-top: 0;
    position: relative;
    z-index: 10;
}

.cards-wrapper.active {
    max-height: 5000px;
    opacity: 1;
    padding-top: 0;
}

/* Force cards to vanish immediately when wrapper closes to avoid ghost text */
.cards-wrapper:not(.active) .card {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    opacity: 0 !important;
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
    display: flex;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--card-bg);
    border: none;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px var(--card-border); /* Premium Glass Inset Shadow Illusion */
    padding: 40px;
    margin-bottom: 24px;
    color: var(--card-text);
    position: relative;
    
    /* Liquid Entrance Setup */
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Idle transparency */
.is-idle-transparent {
    opacity: 0.15 !important;
    transition: opacity 2.5s ease-in-out !important;
}

.card-left {
    flex: 0 0 240px;
    color: var(--section-title-bg);
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 1px;
    padding-top: 2px;
    z-index: 1;
}

.card-right {
    flex: 1;
    display: flex;
    font-size: 16px;
    line-height: 1.8;
    z-index: 1;
}

.card-right.grid-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0;
}

.card-right.grid-layout .chem-symbol-container {
    flex: unset;
    width: auto;
    margin-right: 0;
    padding-bottom: 0px;
}

.card-right.grid-layout .chem-details-vert {
    flex: unset;
    padding-left: 30px;
    padding-bottom: 0px;
    gap: 8px;
}

.card-right.grid-layout > :nth-last-child(1),
.card-right.grid-layout > :nth-last-child(2) {
    padding-bottom: 0;
}

.chem-symbol-container {
    flex: 0 0 180px;
    border-right: 0.5px solid rgba(255, 255, 255, 0.25);
    padding-right: 20px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.chem-details-vert {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bronze-text {
    color: var(--section-title-bg);
    font-weight: 300;
    font-size: 20px;
}

.chem-line {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}

.bold-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 19px; /* 20% kleiner */
    transition: color 0.4s ease;
}

.bold-text.gold-active {
    color: var(--section-title-bg);
}

.highlight {
    color: var(--card-text);
    font-weight: 600;
}

.separator {
    color: var(--card-border);
    margin: 0 12px;
    font-weight: 300;
}

.text-dim {
    color: #8c8c8c;
    font-weight: 300;
}

/* =========================================================
   REGISTRATION FORM (CONCIERGE)
   ========================================================= */
.registration-form {
    width: 100%;
    margin-top: 15px;
    border: none;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
    transform: translateZ(0); /* Hardware acceleration for crisp 0.5px subpixel rendering */
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
}

.form-row {
    display: flex;
    align-items: center;
    padding: 20px 25px;
}

.form-row:not(:last-child) {
    box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.15);
}

.form-row label {
    flex: 0 0 150px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 400;
}

.ophyr-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 2px;
    outline: none;
    width: 100%;
}

.ophyr-input::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

.ophyr-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.4);
    cursor: pointer;
    transition: filter 0.3s ease;
}

.ophyr-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(1) opacity(0.8);
}

.ophyr-input[type="date"] {
    text-transform: uppercase;
    color: #ffffff; /* Active/Filled text color */
}

/* Intelligent Placeholder Styling for Date Inputs */
.ophyr-input[type="date"]:invalid {
    color: rgba(255, 255, 255, 0.15); /* Matches standard placeholders perfectly */
}

.ophyr-input[type="date"]:invalid::-webkit-datetime-edit {
    color: rgba(255, 255, 255, 0.15);
}

.ophyr-submit-btn {
    width: 100%;
    background: transparent;
    color: rgba(220, 179, 123, 0.9);
    border: none;
    box-shadow: inset 0 0 0 0.5px rgba(220, 179, 123, 0.4);
    transform: translateZ(0);
    padding: 18px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s ease;
    margin-top: 15px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ophyr-submit-btn:hover {
    background: rgba(220, 179, 123, 0.1);
    box-shadow: inset 0 0 0 0.5px rgba(220, 179, 123, 0.9);
    color: #ffffff;
}

/* Booking Date & Time Grid */
.booking-section-title {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 18px;
    margin-top: 35px;
}

.booking-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.booking-grid::-webkit-scrollbar {
    display: none;
}

/* Responsive Grid specifically for the 5 Language Buttons */
.language-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

.language-grid .booking-tile {
    /* Base 50% width minus gap, but last odd item will auto-grow to 100% */
    flex: 1 1 calc(50% - 7.5px);
    box-sizing: border-box;
}

.booking-tile {
    flex: 0 0 auto;
    border: none;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
    transform: translateZ(0);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
    background: rgba(255, 255, 255, 0.02);
    min-width: 90px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.booking-tile:hover {
    box-shadow: inset 0 0 0 0.5px rgba(220, 179, 123, 0.5);
    background: rgba(220, 179, 123, 0.05);
}

.booking-tile.selected {
    box-shadow: inset 0 0 0 0.5px rgba(220, 179, 123, 1);
    background: rgba(220, 179, 123, 0.1);
}

.booking-tile.selected .booking-day,
.booking-tile.selected .booking-date,
.booking-tile.selected svg {
    color: rgba(220, 179, 123, 1) !important;
}

.booking-day {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    transition: color 0.4s ease;
}

.booking-date {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.4s ease;
}

.booking-tile.time-tile {
    padding: 0 25px;
    min-height: 55px;
    min-width: auto;
    flex-direction: row;
    gap: 8px;
}

.booking-tile.time-tile .booking-date {
    font-size: 13px;
    letter-spacing: 2px;
}

/* =========================================================
   AVAILABILITY (CHARGE CAPACITIES)
   ========================================================= */
.capacity-bar-container {
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin: 10px 0 6px 0;
    overflow: hidden;
    position: relative;
}

.capacity-bar-fill {
    height: 100%;
    background-color: rgba(220, 179, 123, 0.9);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(220, 179, 123, 0.5);
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.charge-soldout {
    opacity: 0.5 !important;
    filter: grayscale(100%);
}

.charge-soldout .bold-text,
.charge-soldout .chem-line,
.charge-soldout span {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* =========================================================
   LIQUID REVEAL (EXPANDABLE TEXT)
   ========================================================= */
.liquid-container {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.liquid-btn {
    background: transparent;
    border: none;
    color: var(--section-title-bg); /* Gold when closed */
    cursor: pointer;
    padding: 12px 0 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: all 0.4s ease;
}

.liquid-btn:hover {
    filter: brightness(1.2); /* Enhance the gold on hover */
}

.liquid-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease;
}

.liquid-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor; /* Inherits the gold from .liquid-btn */
    transition: all 0.4s ease;
}

.liquid-btn.open .liquid-icon {
    transform: rotate(180deg);
    color: #ffffff; /* White when opened */
}

.liquid-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
    width: 100%;
}

.liquid-wrapper.open {
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.liquid-content {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(8px);
    padding-top: 24px;
    padding-bottom: 24px;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

.liquid-content .chem-line {
    line-height: 2.2;
    letter-spacing: 0.3px;
}

.liquid-wrapper.open .liquid-content {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s, filter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
}

/* =========================================================
   QUOTE HERO SECTION
   ========================================================= */
.quote-hero-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: calc(100vh - 154px); /* Pushes the cards naturally just below the viewport center/fold */
    width: 100%;
}

.hero-quote {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 300;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.hero-author {
    font-size: clamp(12px, 2vw, 16px);
    font-weight: 500;
    letter-spacing: 6px;
    color: rgba(220, 179, 123, 0.9);
    text-transform: uppercase;
}

/* =========================================================
   RESPONSIVE (MOBILE)
   ========================================================= */
@media (max-width: 768px) {

    /* Swap desktop video for mobile-specific video */
    .bg-video-fixed { display: none; }
    .mobile-bg-video { display: block; }

    .form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px 20px;
    }

    .form-row label {
        flex: auto;
        font-size: 11px;
    }

    .top-nav {
        position: fixed;
        background: transparent !important; /* Pure transparent - no gradient */
        backdrop-filter: none !important; /* No blur */
        -webkit-backdrop-filter: none !important;
        box-sizing: border-box;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start; /* Allows smooth swiping from the start */
        align-items: stretch;
        padding: 15px 20px 0px 20px; /* Removed bottom padding since background is invisible */
        gap: 12px; /* Doubled from 6px: luxurious breathing room for mobile */
        overflow-x: auto; /* Enable native swiping */
        scroll-snap-type: x mandatory; /* The magic for butter-smooth centering */
        scroll-behavior: smooth; /* Native smooth scrolling */
    }

    .top-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-item {
        font-size: 11px !important;
        padding: 10px 18px !important; /* Beautiful breathing room */
        margin: 0;
        min-width: 0;
        text-align: center;
        border-radius: 6px;
        border: none !important;
        flex: 0 0 auto !important; /* Non-active items stay perfectly compact */
        max-width: none !important;
        width: auto !important;
        scroll-snap-align: start; /* Standard snap point */
        font-weight: 400 !important;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap !important; /* Forbids random line breaks in words */
        color: #ffffff !important;
        background-color: transparent !important;
        backdrop-filter: blur(8px) !important;
        /* The magic engine for the JS-dimension-clone expansion */
        transition: 
            background-color 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
            color 1.2s cubic-bezier(0.25, 1, 0.5, 1),
            padding 1.2s cubic-bezier(0.25, 1, 0.5, 1),
            box-shadow 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Make Ophyr logo larger and more elegant on mobile */
    .nav-item.nav-home img {
        height: 24px;
        margin-top: 1px; /* Optical alignment */
    }

    /* Target specifically the active menu item to trigger the JS-Dimension-Clone state */
    .top-nav:not(.js-slider-ready) .nav-item.active, /* Fallback */
    .nav-item.active,
    .nav-item.expanding {
        color: rgba(220, 179, 123, 0.9) !important;
        background-color: transparent !important;
        box-shadow: inset 0 0 0 0.5px rgba(220, 179, 123, 0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        font-weight: 500 !important;
        z-index: 15;
        
        /* Dimension gets set dynamically via Javascript perfectly matching the bottom card */
        padding: 10px 30px !important; /* Push text cleanly to center */
        scroll-snap-align: center; /* Enforces native snapping to exactly dead-center of screen */
    }

    .nav-item.dissolving {
        color: #ffffff !important;
        background-color: transparent !important;
        box-shadow: inset 0 0 0 0px rgba(220, 179, 123, 0) !important;
        padding: 10px 18px !important;
        min-width: 0 !important;
        max-width: auto !important;
    }

    /* Keep the Ophyr logo perfectly centered during elastic expansion */
    .nav-item.active.nav-home {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content {
        padding: 75px 20px 30px 20px; /* +10px downwards offset (Total: 75px) */
    }

    .section-title-btn {
        font-size: 15px;
        padding: 10px 15px 4px 15px; /* Massively reduced padding, especially at bottom. */
        margin-bottom: 15px; 
        top: 75px; /* +10px downwards offset */
        border-radius: 16px; /* Slightly tighter radius */
        z-index: 80;
        gap: 0px; /* Eliminated the large vertical gap inherited from desktop */
    }

    /* Target the container of the arrow icon within the button on mobile */
    .section-title-btn .section-title-more {
        width: 32px;  /* Squeezed from 48px */
        height: 32px; /* Squeezed from 48px */
        margin-top: -4px; /* Pull arrow up towards text */
    }

    /* Target the SVG arrow inside the container on mobile */
    .section-title-btn .section-title-more svg {
        width: 26px; /* Squeezed from 40px */
        height: 26px; /* Squeezed from 40px */
        stroke-width: 2px; /* Slightly thinner to match size */
    }

    .cards-wrapper.active {
        padding-top: 0px; /* Margin-bottom of the button perfectly handles the gap */
    }

    .card {
        flex-direction: column; /* Stack left text and right text */
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px 15px; /* Reduced for mobile */
        margin-bottom: 15px; /* Reduced gap between cards */
        border-radius: 16px; /* Slightly smaller radius for tighter mobile look */
        align-items: flex-start;
        gap: 12px; /* Gap between title and body when stacked */
    }

    .card-left {
        flex: 0 0 auto;
        font-size: 19px; /* Increased by 20% from 16px */
        margin-bottom: 0px; 
        text-align: left;
    }

    .card-right {
        display: flex;
        flex-direction: column;
        flex: 1; /* Nimmt den kompletten restlichen Platz ein */
        min-width: 0; /* Verhindert Flex-Overflow = erzwingt Text-Wrap IN der Spalte */
        font-size: 17px; /* Increased by 20% from 14px */
    }

    .card-right.grid-layout {
        display: flex;
        flex-direction: column; 
        gap: 15px;
    }

    .chem-symbol-container {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
        padding-right: 0;
        margin-right: 0;
        padding-bottom: 12px;
        margin-bottom: 12px;
        gap: 8px;
        align-items: flex-start; 
        text-align: left; 
    }

    .card-right.grid-layout .chem-symbol-container {
        padding-bottom: 12px;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
        align-items: flex-start; 
        text-align: left; 
    }

    .chem-details-vert {
        padding-left: 0 !important;
        padding-bottom: 0 !important;
        gap: 10px;
    }

    .bold-text {
        font-size: 20px; /* Increased by 20% from 17px */
    }

    .chem-line {
        font-size: 16px; /* Increased by 20% from 13px */
    }

    /* Enable Mobile-Only Background Videos */
    .mobile-bg-video {
        display: block;
    }
}/* =========================================================
   GLOBAL LOGIN MODAL
   ========================================================= */
#global-login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#global-login-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.login-modal-content {
    width: 90%;
    max-width: 450px;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 40px 30px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#global-login-modal.active .login-modal-content {
    transform: translateY(0);
}

.login-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    z-index: 10;
}

.login-modal-close:hover {
    color: var(--section-title-bg);
}

/* --- Concierge Dynamic Button Morphing --- */
.ophyr-submit-btn {
    transition: all 0.5s ease;
}

.ophyr-submit-btn.morph-loading {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: transparent !important;
    position: relative;
    pointer-events: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(220, 179, 123, 0.2);
}

.ophyr-submit-btn.morph-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid rgba(220, 179, 123, 0.2);
    border-top-color: rgba(220, 179, 123, 1);
    border-radius: 50%;
    animation: button-spin 1s linear infinite;
}

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

.ophyr-submit-btn.morph-success {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: transparent !important;
    position: relative;
    pointer-events: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: rgba(220, 179, 123, 0.1) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 179, 123, 0.8) !important;
}

.ophyr-submit-btn.morph-success::before {
    content: '✓';
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(220, 179, 123, 1);
    font-size: 22px;
    font-weight: 300;
}

.ophyr-submit-btn.morph-success::after {
    display: none;
}

/* (Duplicate block removed — see lines 1009–1139 for the canonical definitions) */

/* =========================================================
   LOGIN STACK LAYOUT (THE CENTERED FOCUS)
   ========================================================= */
.login-stack-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
}

.login-stack-card-top {
    width: 100%;
    max-width: 850px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 30px 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.login-monolith-style {
    width: 100%;
    max-width: 850px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: -10px; /* Bringt die Listen näher zusammen */
}

.login-monolith-bar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid rgba(220, 179, 123, 0.3);
    border-radius: 6px;
    overflow: hidden; /* Für abgerundete Ecken des Buttons */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

.monolith-input-group {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 25px;
    position: relative;
}

.monolith-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(220, 179, 123, 0.8);
    text-transform: uppercase;
    width: 90px;
    flex-shrink: 0;
}

.monolith-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    padding: 20px 0;
    outline: none;
}

.monolith-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
}

.monolith-divider {
    width: 1px;
    background: rgba(220, 179, 123, 0.15);
    margin: 10px 0;
}

.monolith-btn {
    flex: 0 0 120px;
    background: rgba(220, 179, 123, 0.1);
    border: none;
    border-left: 1px solid rgba(220, 179, 123, 0.3);
    color: rgba(220, 179, 123, 1);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.monolith-btn:hover {
    background: rgba(220, 179, 123, 0.25);
    color: #fff;
}

.monolith-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    width: calc(100% - 130px); /* Platz rechts für Button-Ausrichtung lassen */
}

.monolith-forgot-link {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.monolith-forgot-link:hover {
    color: rgba(220, 179, 123, 1);
}

.login-stack-card-bottom {
    width: 100%;
    max-width: 850px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 60px 50px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.login-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.login-benefits-grid .ophyr-accordion-item {
    margin-bottom: 0;
    aspect-ratio: 3 / 1.5; /* Schafft eine schöne, breite quadratische Ästhetik im Grid */
    display: flex;
    flex-direction: column;
}

/* Typography Overrides for Login */
.login-stack-card-top .login-title,
.login-stack-card-bottom .login-title {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(220, 179, 123, 1);
    margin-bottom: 40px;
    text-align: center;
}

.login-stack-card-bottom .benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.login-stack-card-bottom .benefit-icon {
    flex: 0 0 30px;
    color: rgba(220, 179, 123, 0.8);
    margin-top: 3px;
}

.login-stack-card-bottom .benefit-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-weight: 300;
}

/* The Gold Outline Button */
.ophyr-outline-btn {
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid rgba(220, 179, 123, 0.5);
    color: rgba(220, 179, 123, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    font-family: 'Montserrat', sans-serif;
    margin-top: auto; /* Pushes button to bottom if space available */
}

.ophyr-outline-btn:hover {
    background: rgba(220, 179, 123, 0.05);
    border-color: rgba(220, 179, 123, 1);
    box-shadow: 0 0 15px rgba(220, 179, 123, 0.1);
}

/* Elegant Checkbox */
.ophyr-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 40px;
    margin-top: 15px;
}

.ophyr-checkbox-box {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ophyr-checkbox-wrapper input:checked + .ophyr-checkbox-box {
    border-color: rgba(220, 179, 123, 1);
    background: rgba(220, 179, 123, 0.15);
}

.ophyr-checkbox-wrapper input:checked + .ophyr-checkbox-box::after {
    content: '✓';
    color: rgba(220, 179, 123, 1);
    font-size: 10px;
}

.ophyr-checkbox-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =========================================================
   ACCORDION BENEFITS (LOGIN PAGE)
   ========================================================= */
.ophyr-accordion-item {
    background: rgba(255, 255, 255, 0.02);
    border: none; /* Entfernt Standard-Border für perfekten 1px Trick */
    border-radius: 4px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative; /* Für ::before Border */
    transition: all 0.3s ease;
}

/* Ophyr Perfekter 1px Haarstrich-Rahmen */
.ophyr-accordion-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Original normaler Border */
    border-radius: 4px;
    pointer-events: none; /* Klicks gehen durch */
    transition: border-color 0.3s ease;
    z-index: 1; /* Über dem Background, unter dem Content */
}

.ophyr-accordion-item:hover,
.ophyr-accordion-item.active {
    background: rgba(255, 255, 255, 0.04);
}

.ophyr-accordion-item:hover::before,
.ophyr-accordion-item.active::before {
    border-color: rgba(220, 179, 123, 0.2); /* Highlight Border auf ::before */
}

.ophyr-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    flex: 1; /* Nimmt die gesamte Höhe der Box ein, wenn geschlossen */
    cursor: pointer;
    gap: 20px;
}

.ophyr-accordion-header .benefit-icon {
    flex: 0 0 24px;
    color: rgba(220, 179, 123, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.ophyr-accordion-item:hover .benefit-icon,
.ophyr-accordion-item.active .benefit-icon {
    color: rgba(220, 179, 123, 1);
}

.ophyr-accordion-title {
    flex: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
    transition: color 0.3s ease;
}

.ophyr-accordion-item:hover .ophyr-accordion-title,
.ophyr-accordion-item.active .ophyr-accordion-title {
    color: #fff;
}

.ophyr-accordion-chevron {
    flex: 0 0 16px;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease;
}

.ophyr-accordion-item:hover .ophyr-accordion-chevron {
    color: rgba(220, 179, 123, 0.7);
}

.ophyr-accordion-item.active .ophyr-accordion-chevron {
    transform: rotate(180deg);
    color: rgba(220, 179, 123, 1);
}

.ophyr-accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.ophyr-accordion-content .benefit-text {
    padding: 0 30px 30px 30px; /* Schön eingerückt unter der Header-Zeile */
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    font-weight: 300;
}

.ophyr-accordion-list {
    list-style: none;
    margin-top: 10px;
}

.ophyr-accordion-list li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 8px;
    font-size: 10.5px;
    line-height: 1.5;
    color: rgba(255,255,255, 0.5);
}

.ophyr-accordion-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(220, 179, 123, 0.8);
}

.ophyr-accordion-list li strong {
    color: rgba(255,255,255, 0.75);
    font-weight: 400;
}

/* =========================================================
   REGISTRATION EXTENSION (SEAMLESS)
   ========================================================= */
.login-split-card {
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth width expansion */
}

/* Custom Select Dropdown */
.ophyr-select-wrapper {
    position: relative;
    width: 100%;
}

.ophyr-select-trigger {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 0;
    color: #fff;
    font-size: 13px;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.ophyr-select-trigger:hover,
.ophyr-select-wrapper.open .ophyr-select-trigger {
    border-bottom-color: rgba(220, 179, 123, 1);
}

.ophyr-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 179, 123, 0.2);
    border-top: none;
    max-height: 0;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 100;
}

.ophyr-select-wrapper.open .ophyr-select-options {
    max-height: 250px;
    opacity: 1;
    visibility: visible;
}

.ophyr-select-option {
    padding: 12px 15px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ophyr-select-option:hover {
    background: rgba(220, 179, 123, 0.1);
    color: rgba(220, 179, 123, 1);
}


@media (max-width: 768px) {
    .login-stack-container {
        gap: 20px;
    }
    .login-stack-card-top,
    .login-stack-card-bottom {
        padding: 40px 25px;
    }
    .login-benefits-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .login-monolith-bar {
        flex-direction: column;
        border-radius: 8px;
    }
    .monolith-input-group {
        width: 100%;
        padding: 5px 20px;
    }
    .monolith-divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }
    .monolith-btn {
        width: 100%;
        flex: 0 0 50px;
        border-left: none;
        border-top: 1px solid rgba(220, 179, 123, 0.3);
    }
    .monolith-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
        padding: 0 5px;
    }
}

/* =========================================================
   TECHNIK UNIFIED BLOCK
   ========================================================= */
.technik-block {
    padding: 0;           /* Rows handle their own padding */
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.technik-row {
    position: relative;
}

.technik-row-inner {
    display: grid;
    grid-template-columns: 56px 1fr 44px;
    align-items: center;
    padding: 32px 40px;
    gap: 0;
    cursor: default;
    transition: background 0.3s ease;
}

.technik-row-inner:hover {
    background: rgba(220, 179, 123, 0.03);
}

.technik-num {
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(220, 179, 123, 0.6);
    font-weight: 300;
    padding-top: 2px;
}

.technik-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 20px;
}

.technik-title {
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.technik-subtitle {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    letter-spacing: 0.2px;
}

.technik-expand-btn {
    background: transparent;
    border: none;
    color: rgba(220, 179, 123, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: color 0.3s ease, background 0.3s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    flex-shrink: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.technik-expand-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.technik-expand-btn:hover {
    color: rgba(220, 179, 123, 1);
    background: rgba(220, 179, 123, 0.08);
}

.technik-expand-btn.open {
    color: rgba(220, 179, 123, 1);
}

.technik-expand-btn.open svg {
    transform: rotate(180deg);
}

/* Smooth reveal using CSS grid trick (same as .liquid-wrapper) */
.technik-detail-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.technik-detail-wrapper.open {
    grid-template-rows: 1fr;
}

.technik-detail {
    overflow: hidden;
}

.technik-detail-text {
    padding: 0 40px 30px 96px; /* Aligns with text column (56px num + 40px padding) */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.9;
    font-weight: 300;
    letter-spacing: 0.2px;
}

.technik-divider {
    height: 1px;
    background: rgba(220, 179, 123, 0.12);
    margin: 0 40px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .technik-row-inner {
        padding: 24px 20px;
        grid-template-columns: 44px 1fr 36px;
    }

    .technik-num {
        font-size: 10px;
    }

    .technik-title {
        font-size: 17px;
    }

    .technik-subtitle {
        font-size: 13px;
    }

    .technik-detail-text {
        padding: 0 20px 24px 64px;
        font-size: 13px;
    }

    .technik-divider {
        margin: 0 20px;
    }

    /* Fix card overlapping under yellow section buttons */
    .section-title-btn {
        margin-bottom: 24px !important;
        margin-top: 5px; /* Adds tiny breathing room if needed below nav */
    }
    
    .cards-wrapper {
        padding-top: 0 !important;
    }
}