/* 1. СБРОС И ПЕРЕМЕННЫЕ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --gold: #E2C38E;       /* Основной золотой цвет */
    --text: #F9F6F2;       /* Белый текст */
    --green: #2e4738;
    --font-title: 'SpaTitle', serif;      /* Для заголовков (Arsenica) */
    --font-body: 'SpaText', sans-serif;   /* Для текста (Montserrat) */
}

/* 2. НАСТРОЙКА СКРОЛЛА (SCROLL CONTAINER) */
/* Важно: мы отключаем скролл у body и переносим его в контейнер main */
html, body {
    height: auto !important; /* Разрешаем высоте подстраиваться под контент */
    overflow-y: auto !important; /* Принудительно включаем вертикальный скролл */
    scroll-behavior: smooth;
    background-color: #2e4738; /* Твой фирменный зеленый фон */
    margin: 0;
    padding: 0;
}

/* Контейнер для всего контента с "магнитным" эффектом */
.scroll-container {
    height: 100vh;
    width: 100%;
    overflow-y: scroll;        /* Включаем прокрутку здесь */
    scroll-snap-type: y mandatory; /* Магнитный эффект */
    scroll-behavior: smooth;
    position: relative;
    z-index: 2; /* Контент лежит поверх фоновых картинок */
}


/* ==========================================================================
   3. ФОНОВЫЕ СЛОИ (BACKGROUND LAYERS)
   ========================================================================== */
.backgrounds {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; /* Самый нижний уровень */
    background: #000;
}

.bg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    background-size: cover;
    background-position: center;
    
    opacity: 0; /* Скрыто по умолчанию */
    transition: opacity 0.8s ease-in-out; /* Плавное перетекание (1.5 сек) */
}

/* Класс active добавляется через JS к текущему фону */
.bg-layer.active {
    opacity: 1;
}

/* Зеленый фильтр поверх всех картинок */
.bg-layer::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Цвет: темно-зеленый (20, 30, 25) с прозрачностью 0.6 (60%) */
    background: rgba(20, 30, 25, 0.5); 
    z-index: 1;
}


/* ==========================================================================
   4. ШРИФТЫ (FONTS)
   ========================================================================== */
@font-face {
    font-family: 'SpaTitle';
    src: url('../fonts/LucyRosePERSONAL-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
}

@font-face {
    font-family: 'SpaText';
    src: url('../fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300; font-style: normal;
}
@font-face {
    font-family: 'SpaText';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
}

@font-face {
    font-family: 'SpaScript';
    src: url('../fonts/Allaina-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
}


/* ==========================================================================
   5. НАВИГАЦИЯ (NAVBAR) - БАЗОВЫЕ СТИЛИ (ПК)
   ========================================================================== */
.navbar {
    position: fixed;
    top: -100px; /* Спрятано при загрузке, выезжает через JS */
    left: 0;
    width: 100%;
    height: 100px;
    
    background: rgba(46, 71, 56, 0.95);
    backdrop-filter: blur(10px);        
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    z-index: 9999; 
    
    transition: top 0.4s ease-in-out;
}

.navbar.visible {
    top: 0;
}

.nav-logo {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.nav-logo img {
    height: 85px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.nav-logo:hover img {
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    gap: 40px;
    height: 100%;
    align-items: center;
    list-style: none;
}

.nav-links a, .dropbtn {
    font-family: var(--font-title);
    color: #F9F6F2;
    text-transform: uppercase;
    font-size: 1.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
}
.nav-links a:hover, .dropbtn:hover {
    color: var(--gold);
}

/* Стандартная кнопка для ПК */
.nav-btn {
    font-family: var(--font-body);
    letter-spacing: 0.05em;
    padding: 0.8rem 1.5rem;
    border: 1px solid var(--gold);
    border-radius: 50px;
    color: var(--gold) !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
}
.nav-btn:hover {
    background: var(--gold);
    color: #000 !important;
}

/* Десктопная кнопка видна по умолчанию */
.desktop-btn {
    display: block; 
}

/* Мобильная кнопка и гамбургер скрыты по умолчанию */
.mobile-nav-btn-container {
    display: none;
    list-style: none;
}

.menu-toggle {
    display: none; 
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
}

.menu-toggle .bar {
    width: 30px;
    height: 3px;
    background-color: #E2C38E; 
    transition: all 0.3s ease-in-out;
}

/* --- ВЫПАДАЮЩЕЕ МЕНЮ (ПК) --- */
.dropdown {
    position: relative; 
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%) translateY(-30px) scaleY(0.9);
    transform-origin: top center; 
    
    opacity: 0;
    visibility: hidden;
    z-index: -1; 
    transition: all 1.0s cubic-bezier(0.28, 1, 0.22, 1); 
    
    min-width: 220px;
    background: rgba(46, 71, 56, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 0 0 6px 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    
    list-style: none !important;
    padding: 10px 0;
    margin: 0;
}

.dropdown-menu li {
    display: block;
    opacity: 0;
    transform: translateY(-10px); 
    transition: all 1.1s cubic-bezier(0.28, 1, 0.22, 1);
    list-style: none !important;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scaleY(1);
}

.dropdown:hover .dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}

.dropdown:hover .dropdown-menu li:nth-child(1) { transition-delay: 0.18s; }
.dropdown:hover .dropdown-menu li:nth-child(2) { transition-delay: 0.26s; }
.dropdown:hover .dropdown-menu li:nth-child(3) { transition-delay: 0.34s; }
.dropdown:hover .dropdown-menu li:nth-child(4) { transition-delay: 0.42s; }
.dropdown:hover .dropdown-menu li:nth-child(5) { transition-delay: 0.50s; }

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    text-align: center;
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
}
.dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gold);
}

/* ==========================================================================
   6. СЦЕНЫ (СЛАЙДЫ)
   ========================================================================== */
.scene {
    height: 100vh;
    width: 100%;
    
    /* Магнит: слайд всегда прилипает к верху */
    scroll-snap-align: start;
    
    display: flex;
    justify-content: center; /* Центр по горизонтали */
    align-items: center;     /* Центр по вертикали */
    padding: 0 10%;
    position: relative;
}

/* Контейнер для текста внутри слайда */
.content-grid {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

/* --- ТЕКСТОВЫЕ БЛОКИ (Слайды 2-5) --- */
/* Начальное состояние текста (скрыто) */
.text-col {
    max-width: 550px;
    padding: 40px;
    background: rgba(26, 38, 32, 0.5); 
    backdrop-filter: blur(15px);
    border: 1px solid rgba(226, 195, 142, 0.3);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    
    /* ЭФФЕКТ АНИМАЦИИ: */
    opacity: 0;
    /* Текст начинает на 50px ниже и чуть уменьшенным */
    transform: translateY(50px) scale(0.98); 
    /* Плавность: 1.4 секунды с эффектом мягкого торможения (cubic-bezier) */
    transition: opacity 1.4s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 1.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Состояние, когда слайд стал активным (текст проявляется) */
.scene.active .text-col {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Задержка появления текста, чтобы фон успел начать наплыв */
    transition-delay: 0.3s; 
}

/* Убираем старые картинки внутри текста, у нас теперь фоны */
.image-col { display: none !important; }

/* Активация анимации (JS) */
.scene.active .text-col {
    opacity: 1;
    transform: translateY(0);
}

/* --- АНИМАЦИЯ ЗАГОЛОВКОВ В КАРТОЧКАХ --- */
.title-link {
    text-decoration: none; /* Убираем стандартное подчеркивание */
    color: var(--gold); /* Золотой цвет текста */
    position: relative; /* Чтобы позиционировать полоску относительно текста */
    display: inline-block; /* Чтобы полоска была равна ширине текста, а не блока */
    cursor: pointer;
    transform-origin: left center;
    transition: color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. Сама полоска (в спокойном состоянии - невидимая) */
.title-link::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Отступ полоски от букв */
    left: 0;
    width: 0%; /* Скрыта (ширина 0) */
    height: 2px; /* Толщина полоски */
    background-color: var(--gold); /* Золотой цвет */
    
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Плавная анимация */
}

.title-link:hover {
    /* Увеличиваем текст на 5% */
    transform: scale(1.05); 
}

/* 3. При наведении (полоска выезжает) */
.title-link:hover::after {
    width: 100%; /* Растягивается на всю длину */
}

/* --- ЗЕРКАЛЬНАЯ АНИМАЦИЯ (ДЛЯ ПРАВЫХ СЛАЙДОВ) --- */
/* Эффект: полоска будет расти справа налево */


/* --- ЧЕРЕДОВАНИЕ СТОРОН (ZIG-ZAG) --- */

/* Четные слайды (2, 4): Текст СЛЕВА */
.scene:nth-child(evev) .content-grid {
    align-items: flex-start;
}
.scene:nth-child(even) .text-col {
    text-align: left;
    border-left: 4px solid var(--gold);
}

/* Нечетные слайды (3, 5): Текст СПРАВА */
.scene:nth-child(odd) .content-grid {
    align-items: flex-end;
}
.scene:nth-child(odd) .text-col {
    text-align: left;
    border-right: 4px solid var(--gold);
}


/* ==========================================================================
   7. HERO SLIDE 
   ========================================================================== */

/* Принудительно ставим первую секцию по центру экрана */
#slide1 {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important; /* Центр по вертикали */
    align-items: center !important;     /* Центр по горизонтали */
    height: 100vh !important;           /* Точно во весь экран */
    padding-top: 0 !important;          /* Убираем отступы сверху */
}

/* Убеждаемся, что контейнер с логотипом не имеет лишних отступов */
#slide1 .content-grid {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#slide1 .text-col {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    
    text-align: center !important;
    margin: auto;
    
    /* Анимация: Логотип плавно появляется и чуть уменьшается (эффект печати) */
    opacity: 0;
    transform: scale(1.1); 
    transition: all 1.2s ease-out; 
}

#slide1.active .text-col {
    opacity: 1;
    transform: scale(1);
}


/* Настройки логотипа */
.hero-logo {
    width: 85%; 
    max-width: 600px; /* Максимальный размер на компьютере */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0px 15px 10px rgba(0,0,0,0.2));
}

/* Убираем затемнение с первого фона, нужен чистый белый */
.bg-layer:first-child::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(249, 246, 242, 0.1); 
    z-index: 1;
}

/* На мобильных чуть меньше */
@media (max-width: 768px) {
    .hero-logo {
        max-width: 280px;
    }
}

/*  ФУТЕР  */

.site-footer {
    /* Фон: Темно-зеленый */
    background-color: rgba(46, 71, 56, 0.95); 
    /* Текст: Бежевый */
    color: #F9F6F2;
    
    padding: 80px 5% 40px 5%;
    font-family: var(--font-body);
    
    /* Свойства для Scroll Snap */
    scroll-snap-align: end;
    height: auto;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- ВЕРХНЯЯ ЧАСТЬ --- */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* БРЕНД (Логотип + Название) */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-logo-img {
    width: 80px;
    height: auto;
    opacity: 0.9;
}

.brand-name {
    font-family: var(--font-title);
    font-size: 3rem;
    letter-spacing: 0.05em;
    color: #EADDD6; 
}

/* ПРАВАЯ ЧАСТЬ (Инфо + Иконки) */
.footer-nav-section {
    display: flex;
    gap: 60px;
}

.footer-col {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

/* --- ТЕКСТОВЫЙ БЛОК (Часы работы) --- */
.info-text {
    align-items: flex-start;
    font-size: 0.95rem;
    line-height: 1.6;
}

.info-block {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-family: var(--font-title);
    color: var(--gold); /* Золотой заголовок */
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1rem;
}

.info-text p {
    font-family: var(--font-body);
    color: #EADDD6;
    margin: 0;
}

/* --- ПРАВАЯ КОЛОНКА (FIX) --- */
.social-col {
    display: flex;
    flex-direction: column !important; /* Главная ось: Вертикальная (Иконки сверху, почта снизу) */
    gap: 19px;
    align-items: flex-start;
}

/* --- 1. РЯД ИКОНОК --- */
.social-icons-row {
    display: flex;
    flex-direction: row !important; /* Внутри ряда: Горизонтально */
    gap: 12px;
}

/* Круглая кнопка */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    
    /* Фон и рамка */
    background-color: rgba(46, 71, 56, 0.3); /* Прозрачный зеленый */
    border: 1px solid var(--gold); /* Золотая рамка */
    border-radius: 50%;
    
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- САМИ ИКОНКИ (FontAwesome) --- */
.social-icon i {
    font-size: 20px;
    color: #EADDD6; /* Бежевый цвет иконок */
    transition: all 0.3s ease;
}

/* Эффект при наведении */
.social-icon:hover {
    background: var(--gold); /* Золотой фон */
    border-color: var(--gold);
    transform: translateY(-3px);
}

.social-icon:hover i {
    color: #2e4738; /* Иконка становится темно-зеленой */
}

/* --- 2. ПОЧТА ТЕКСТОМ --- */
.footer-email-link {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #EADDD6 !important; /* Бежевый */
    text-decoration: none !important; /* Без подчеркивания */
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-left: 4px;
    transition: color 0.3s ease;
}

.footer-email-link:hover {
    color: var(--gold) !important; /* Золотой при наведении */
}

/* --- НИЖНЯЯ ЧАСТЬ --- */
.footer-divider {
    border: 0;
    height: 1px;
    background: rgba(234, 221, 214, 0.2);
    margin-bottom: 30px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #A48D7F; 
}

.legal-links {
    display: flex;
    gap: 30px;
}

.legal-links a {
    color: #A48D7F;
    text-decoration: none;
    transition: 0.3s;
}

.legal-links a:hover {
    color: #E2C38E;
}

/* АДАПТИВ (Мобильная версия) */
@media (max-width: 900px) {
    .footer-content {
        flex-direction: column;
        gap: 40px;
    }
    .footer-nav-section {
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   8. ОБЩАЯ ТИПОГРАФИКА
   ========================================================================== */
h1, h2, h3 {
    font-family: var(--font-title);
    color: var(--gold);
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 400;
}

h2 { font-size: 3rem; }

p {
    font-family: var(--font-body);
    color: #F9F6F2;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}


/* ==========================================================================
   9. МОБИЛЬНАЯ ВЕРСИЯ (Responsive)
   ========================================================================== */
@media (max-width: 900px) {
    /* Уменьшаем шрифты */
    #slide1 h1 { font-size: 4rem; }
    h2 { font-size: 2rem; }
    
    /* Сбрасываем чередование, на телефоне всё по центру */
    .scene { padding: 0 5%; }
    .content-grid { align-items: center !important; justify-content: center; }
    .text-col { 
        width: 100%; 
        text-align: center !important; 
        border: none !important;
    }
    
    /* Скрываем навигацию, показываем только лого */
    .nav-links { display: none; }
    .nav-logo img { height: 60px; }
    .navbar { height: 80px; }
}

/* --- СТРАНИЦА WELT: ГЛОБАЛЬНЫЕ СТИЛИ --- */

/* Применяем фон и скролл напрямую к body */
body.welt-page {
    background: rgba(46, 71, 56, 0.95);
    overflow-y: auto !important;          /* Разрешаем скролл */
    height: auto !important;
}

/* Принудительно показываем навбар, если мы на странице Welt */
body.welt-page .navbar {
    top: 0 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(46, 71, 56, 0.95);
    border-bottom: 1px solid rgba(226, 195, 142, 0.3);
}

.nav-links a:hover, 
.dropdown:hover .dropbtn {
    color: var(--gold) !important; /* Убедись, что переменная --gold у тебя задана */
    transition: color 0.3s ease;
}

/* --- HERO: УВЕЛИЧИВАЕМ ФОТО --- */
body.welt-page .welt-hero {
    height: 100vh; /* Теперь фото занимает весь экран */
    width: 100%;
    padding: 0;
    margin: 0;
}

body.welt-page .hero-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Фото не растягивается, а заполняет экран */
}

/* ==========================================================================
   PAGE: WELT (FULL LUXURY STYLE)
   ========================================================================== */
/* Переменная цвета — меняй только здесь, и всё обновится само */
:root {
    --welt-bg-color: #F9F6F2; /* Благородный песочно-бежевый */
}

body.welt-page {
    background-color: var(--welt-bg-color) !important;
    color: var(--green) !important; /* Тёмный текст для читаемости */
    overflow-y: auto !important;
    height: auto !important;
}


/* 2. Твой <main> блок (Обертка контента) */
.welt-page.welt-content-fade {
    display: block;
    width: 100%;
    opacity: 0; /* Изначально скрыт для анимации */
    animation: revealWeltPage 1.2s ease-out forwards;
    animation-delay: 0.1s;
}

/* 3. Сама анимация появления */
@keyframes revealWeltPage {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Возвращаем анимацию навбара */
body.welt-page .navbar {
    top: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(46, 71, 56, 0.95) !important;
    
    /* Плавное выплывание при загрузке */
    transform: translateY(-100%);
    animation: navbarSlideIn 0.8s ease forwards;
}

@keyframes navbarSlideIn {
    to { transform: translateY(0); }
}

/* ОБЩИЕ ПАРАМЕТРЫ СЕКЦИЙ */
.welt-section {
    padding: 120px 0;
}

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

.container.small {
    max-width: 800px;
}

.bg-light {
    background-color: #F9F6F2;
}

.label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--gold);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.label.center {
    text-align: center;
}

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

/* 1. HERO SECTION */

/* Зеленый фильтр поверх всех картинок */

.welt-hero {
    height: 80vh;
    width: 100%;
    overflow: hidden;
    padding-top: 100px;

}

.hero-wrapper {
    width: 100%;
    height: 80%;
}

.hero-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-wrapper {
    position: relative;
    /* Остальные твои стили width/height: 100% оставь как были */
}

/* 2. Создаем сам "слой" поверх картинки */
.hero-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Цвет: Твой темно-зеленый с прозрачностью 40% (0.4)
       Меняй последнюю цифру от 0.1 (почти незаметно) до 0.9 (почти сплошной цвет)
       чтобы настроить силу "зазеленения".
    */
    background: rgba(46, 71, 56, 0.15); 
    
    z-index: 1; /* Гарантирует, что слой лежит ПОВЕРХ картинки */
    pointer-events: none; /* Чтобы слой не мешал кликам, если вдруг там будут кнопки */
}

/* ==========================================================================
   2. WERTE SECTION (Исправленная светлая карточка)
   ========================================================================== */

#werte .layout-split {
    display: flex;
    align-items: center;
    gap: 0 !important; 
}

/* --- БЕЛАЯ КАРТОЧКА (Стекло) --- */
#werte .text-block {
    background: rgba(255, 255, 255, 0.9); /* Увеличили плотность до 90% */
    backdrop-filter: blur(15px) ;
    -webkit-backdrop-filter: blur(15px) ; /* ВАЖНО для идеального стекла на iPhone/Mac */
    
    border: 1px solid rgba(226, 195, 142, 0.3) ; 
    border-left: 4px solid var(--gold) ; 
    border-radius: 8px ;
    
    padding: 60px 50px ;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) ; 
    
    position: relative;
    z-index: 10 !important; /* Жестко поверх картинки */
    margin-right: -120px;   /* Наезд на картинку */
    max-width: 650px;
}

/* --- ИСПРАВЛЕНИЕ ТЕКСТА (Чтобы читался на белом) --- */
#werte .text-block p,
#werte .description-text p {
    color: #2e4738 !important; /* Темно-зеленый текст! */
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 25px;
    position: relative; 
    z-index: 2; /* Текст жестко поверх фона карточки */
}

/* Заголовки оставляем золотыми и поверх всего */
#werte .text-block h2,
#werte .text-block .label {
    position: relative;
    z-index: 2;
}

/* --- ФОТОГРАФИЯ СЗАДИ (С ОБЪЕМОМ) --- */
#werte .image-block {
    flex: 1;
    position: relative;
    /* Убеждаемся, что блок с фото лежит ниже текстовой карточки (у которой z-index: 10) */
    z-index: 5 !important; 
}

#werte .image-frame.tall {
    height: 650px;
    width: 100%;
    max-width: 550px;
    margin-left: auto;
    border: none !important;
    border-radius: 8px;
    overflow: hidden;
    
    /* === ВОТ ОНА, МАГИЯ ОБЪЕМА === */
    /* Сдвиг вправо (25px) и вниз (25px), сильное размытие (60px), золотой цвет с прозрачностью 20% */
    box-shadow: 25px 25px 60px rgba(226, 195, 142, 0.4) !important;
    
    /* Важно для правильного наложения слоев */
    position: relative;
    background: var(--welt-bg-color); /* На всякий случай, чтобы тень была чистой */
}

#werte .image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Убирает возможные микро-отступы снизу */
}

/* --- АДАПТИВНОСТЬ ДЛЯ ТЕЛЕФОНОВ --- */
@media (max-width: 900px) {
    #werte .layout-split {
        flex-direction: column-reverse; /* Фото сверху, текст снизу */
    }
    #werte .text-block {
        margin-right: 0;
        margin-top: -80px; /* Карточка красиво наезжает на фото снизу */
        padding: 40px 30px !important;
    }
    #werte .image-frame.tall {
        height: 450px;
    }
}

/* ==========================================================================
   СЕКЦИЯ КОМАНДЫ (Статичная карточка + Движущаяся рамка с фото)
   ========================================================================== */

/* Главная обертка секции со стрелками по бокам */
.team-slider-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    position: relative;
}

/* Центральная сцена, в которой лежат фото и карточка */
.team-center-stage {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 950px;
    height: 600px; /* Высота под размер фото */
    margin: 0 auto;
}

/* --- СЛОЙ 1: РАМКА С ФОТОГРАФИЕЙ (Двигается целиком) --- */
.team-photo-viewport {
    position: absolute;
    left: 0; /* Прибита к левому краю сцены */
    width: 420px;
    height: 580px;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1; /* Под карточкой */
    box-shadow: -10px 20px 40px rgba(226, 195, 142, 0.15);
    
    /* Базовое состояние */
    transform: translateX(0) scale(1);
    opacity: 1;
    
    /* Плавность движения всей рамки */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
    
    /* Передаем расчет анимации на видеокарту (GPU) */
    will-change: transform, opacity; 
}

.team-photo-viewport img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Состояния анимации для рамки (прячется влево или вправо) */
.photo-hidden-left {
    transform: translateX(-70%) scale(0.75) !important;
    opacity: 0 !important;
}

.photo-hidden-right {
    transform: translateX(70%) scale(0.75) !important;
    opacity: 0 !important;
}

/* Отключение анимации для мгновенной телепортации рамки за кулисами */
.no-transition {
    transition: none !important;
}


/* --- СЛОЙ 2: СТЕКЛЯННАЯ КАРТОЧКА (Стоит на месте как вкопанная) --- */
.team-card-static {
    position: absolute;
    right: 0; /* Прибита к правому краю сцены */
    width: 600px; /* Фиксированная ширина */
    z-index: 10;  /* Поверх рамки с фото */
}

.glass-style {
    /* Честное полупрозрачное стекло */
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Рамки и тени */
    border: 1px solid rgba(226, 195, 142, 0.3);
    border-right: 4px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    
    /* Отступы: слева 100px, чтобы текст точно не залезал на фото под карточкой */
    padding: 50px 50px 50px 100px;
    
    /* ФИКСИРУЕМ ВЫСОТУ, чтобы карточка не прыгала из-за разного объема текста */
    height: 420px;
    /* Вертикальное центрирование текста внутри */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    
    /* Изоляция отрисовки, чтобы блюр не вызывал графических артефактов */
    transform: translateZ(0);
    contain: paint;
}

/* Обёртка текста (плавно мигает при переключении) */
#team-text-wrapper {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.text-hidden {
    opacity: 0 !important;
}

/* Типографика внутри карточки */
.team-card-static h3 {
    font-size: 2.2rem;
    color: #2e4738;
    margin-bottom: 5px;
}

.team-card-static .role {
    display: block;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    margin-bottom: 25px;
}

.team-card-static .team-desc {
    color: #444;
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0;
}

/* --- СТРЕЛКИ --- */
.team-slider-layout .minimal-arrow {
    z-index: 20;
}

/* --- АДАПТИВНОСТЬ (Телефоны и планшеты) --- */
@media (max-width: 950px) {
    .team-slider-layout {
        flex-direction: column;
        padding-bottom: 80px; /* Место для стрелок внизу */
    }
    .team-center-stage {
        flex-direction: column;
        height: auto;
    }
    .team-photo-viewport {
        position: relative;
        left: auto;
        width: 100%;
        max-width: 450px;
        height: 500px;
    }
    .team-card-static {
        position: relative;
        right: auto;
        width: 95%;
        margin-top: -60px; /* Нахлест снизу вверх на мобилке */
    }
    .glass-style {
        padding: 40px 30px;
        height: auto; /* На телефоне разрешаем карточке тянуться, если нужно */
        min-height: 300px;
    }
    /* Перенос стрелок вниз */
    .minimal-arrow.prev-arrow { position: absolute; bottom: 0; left: 20%; }
    .minimal-arrow.next-arrow { position: absolute; bottom: 0; right: 20%; }
}

/* ==========================================================================
   УНИВЕРСАЛЬНЫЕ МИНИМАЛИСТИЧНЫЕ СТРЕЛКИ (SVG)
   ========================================================================== */

.minimal-arrow {
    background: transparent;
    border: none;
    color: var(--gold); /* Базовый золотой цвет */
    cursor: pointer;
    padding: 15px; /* Увеличиваем невидимую зону для удобного клика с телефона */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: color 0.3s ease;
}

/* Настраиваем саму векторную графику */
.minimal-arrow svg {
    width: 45px; /* Длина стрелки */
    height: auto;
    /* currentColor заставляет SVG краситься в тот же цвет, что и текст кнопки */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- ПРЕМИУМ-АНИМАЦИЯ ПРИ НАВЕДЕНИИ --- */
/* Стрелка плавно скользит в направлении клика */
.minimal-arrow.prev:hover svg {
    transform: translateX(-10px);
}

.minimal-arrow.next:hover svg {
    transform: translateX(10px);
}

/* --- ЦВЕТА ПРИ НАВЕДЕНИИ ДЛЯ РАЗНЫХ СЕКЦИЙ --- */
/* В светлой секции команды стрелка становится темно-зеленой */
#menschen .minimal-arrow:hover {
    color: #2e4738;
}

/* В темной секции отзывов стрелка становится белой */
#erlebnisse .minimal-arrow:hover {
    color: #ffffff;
}

/* --- ПОЗИЦИОНИРОВАНИЕ В СЕКЦИЯХ --- */
/* В отзывах позиционируем по центру по вертикали */
#erlebnisse .minimal-arrow {
    position: absolute;
    top: 50%;
    margin-top: -22px; /* Половина высоты для идеального центра */
}
#erlebnisse .minimal-arrow.prev { left: 0; }
#erlebnisse .minimal-arrow.next { right: 0; }


/* ==========================================================================
   СЕКЦИЯ ОТЗЫВОВ (Минимализм: Зеленый фон + Золотой текст)
   ========================================================================== */

.quote-section {
    background-color: #2e4738; /* Глубокий фирменный зеленый */
    padding: 120px 0; /* Много "воздуха" сверху и снизу */
    color: var(--gold); /* Золотой цвет для всего текста внутри */
    text-align: center;
}

.quote-flex-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    padding: 0 50px;
}

/* Контейнер отзыва (с анимацией прозрачности) */
.quote-container {
    max-width: 1200px;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 1;
    transform: translateY(0);
}

/* Класс для анимации смены отзыва (добавляется через JS) */
.quote-container.fade-out {
    opacity: 0;
    transform: translateY(10px); /* Легкое движение вниз при исчезновении */
}

/* Декоративная кавычка */
.quote-mark {
    font-size: 6rem;
    line-height: 0;
    font-family: serif;
    color: rgba(226, 195, 142, 0.3); /* Полупрозрачное золото */
    margin-bottom: 30px;
}

/* Сбрасываем стандартные уродливые стили ссылок */
#quote-text-wrapper {
    margin: 0 0 30px 0;
    padding: 0;
}

#quote-link {
    font-size: 2.5rem; 
    line-height: 1.4;
    font-style: italic;
    font-weight: 300;
    color: inherit; /* Берет золотой цвет от родителя */
    text-decoration: none; /* Убираем дефолтную линию */
    
    /* === ПРЕМИАЛЬНАЯ ПОДВОДКА === */
    /* Создаем фон, который выглядит как линия толщиной 2px в самом низу текста */
    background-image: linear-gradient(transparent calc(100% - 2px), var(--gold) 2px);
    background-repeat: no-repeat;
    
    /* Скрываем линию по умолчанию (ширина 0%) */
    background-size: 0% 100%;
    
    /* Плавное выезжание линии */
    transition: background-size 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

/* При наведении линия вытягивается на 100% ширины текста */
#quote-link:hover {
    background-size: 100% 100%;
}

/* Текст отзыва (Крупный и элегантный) */
#quote-text {
    font-size: 2rem; /* Очень крупный текст */
    line-height: 1.4;
    font-style: italic;
    font-weight: 300;
    margin: 0 0 30px 0;
    padding: 0;
    border: none; /* Убираем стандартные рамки blockquote, если они есть */
}

/* Имя автора */
#quote-author {
    font-size: 0.8rem;
    font-style: var(--font-body);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Золотые стрелки */
.quote-arrow {
    background: transparent;
    border: none;
    color: var(--gold);
    font-size: 3rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.quote-arrow:hover {
    color: #ffffff; /* При наведении стрелка светлеет */
    transform: translateY(-50%) scale(1.1);
}

#quote-prev { left: 0; }
#quote-next { right: 0; }

/* ==========================================================================
   HYBRID CHAT-ACCORDION (СТИЛЬ ПЕРЕПИСКИ + ФУНКЦИЯ РАСКРЫТИЯ)
   ========================================================================== */

#wissen {
    background-color: #F4F1EA !important; /* Бежевый фон */
    padding: 100px 0;
}

.chat-accordion-wrapper {
    max-width: 800px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Отступ между разными вопросами */
}

/* --- ОБЩИЕ НАСТРОЙКИ ПУЗЫРЕЙ --- */
.chat-bubble {
    position: relative;
    border-radius: 20px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.06)); /* Тень, обтекающая острые хвостики */
    width: 100%; /* Фиксированная ширина для ровного столбца */
    max-width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* База для острых хвостиков */
.chat-bubble::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    right: -2px;
}

.chat-bubble p {
    margin: 0;
    font-family: var(--font-body); 
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

/* --- КЛИЕНТ (ВОПРОС) --- */
.chat-header-trigger {
    display: flex;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.chat-header-trigger:hover {
    transform: translateY(-2px);
}

.chat-bubble.client {
    background-color: #FFFFFF;
    padding: 20px 30px;
    gap: 15px;
}

.chat-bubble.client p {
    color: var(--green);
    font-size: 1.1rem;
    font-weight: 500;
}

.chat-toggle-icon {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 300;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* --- БРЕНД (ОТВЕТ - СКРЫТ ПО УМОЛЧАНИЮ) --- */
.chat-body-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* Важно для плавного выезда */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-row.brand-row {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: 15px;
}

.brand-avatar {
    width: 45px;
    height: 45px;
    background: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(46, 71, 56, 0.1);
    flex-shrink: 0;
}

.brand-avatar img {
    width: 26px;
    height: auto;
}

.chat-bubble.brand {
    background-color: #2e4738;
    padding: 20px 30px;
}

.chat-bubble.brand p {
    color: #F9F6F2;
    font-size: 1rem;
}

/* --- СОСТОЯНИЕ "ОТКРЫТО" (ACTIVE) --- */
.chat-item.active .chat-toggle-icon {
    transform: rotate(45deg);
    color: #2e4738;
}

.chat-item.active .chat-body-content {
    max-height: 600px;
    opacity: 1;
    overflow: visible; /* Отключаем обрезку, чтобы хвостики торчали наружу */
}

/* ==========================================================================
   ЧЕРЕДОВАНИЕ (ZIG-ZAG) И ОСТРЫЕ ХВОСТИКИ
   ========================================================================== */

/* ==========================================================================
   ЧЕРЕДОВАНИЕ (ZIG-ZAG) И ОСТРЫЕ ХВОСТИКИ — ИСПРАВЛЕНО
   ========================================================================== */

/* --- НЕЧЕТНЫЕ: Клиент СПРАВА, Бренд СЛЕВА --- */
.chat-item:nth-child(odd) .chat-header-trigger { justify-content: flex-end; }
.chat-item:nth-child(odd) .chat-bubble.client { border-bottom-right-radius: 4px; }
.chat-item:nth-child(odd) .chat-bubble.client::after {
    left: calc(100% - 2px); /* Было 100%, теперь заезжаем на 1px внутрь */
    border-width: 15px 0 0 15px;
    border-color: transparent transparent transparent #FFFFFF;
}

.chat-item:nth-child(odd) .chat-row.brand-row { flex-direction: row; justify-content: flex-start; }
.chat-item:nth-child(odd) .chat-bubble.brand { border-bottom-left-radius: 4px; }
.chat-item:nth-child(odd) .chat-bubble.brand::after {
    right: calc(100% - 2px); /* Было 100%, заезжаем на 1px внутрь */
    border-width: 15px 15px 0 0;
    border-color: transparent #2e4738 transparent transparent;
}

/* --- ЧЕТНЫЕ: Клиент СЛЕВА, Бренд СПРАВА --- */
.chat-item:nth-child(even) .chat-header-trigger { justify-content: flex-start; }
.chat-item:nth-child(even) .chat-bubble.client { 
    flex-direction: row-reverse; 
    border-bottom-left-radius: 4px; 
}
.chat-item:nth-child(even) .chat-bubble.client::after {
    right: calc(100% - 2px); /* Исправлено для левого хвостика */
    border-width: 15px 15px 0 0;
    border-color: transparent #FFFFFF transparent transparent;
}

.chat-item:nth-child(even) .chat-row.brand-row { flex-direction: row-reverse; justify-content: flex-end; }
.chat-item:nth-child(even) .chat-bubble.brand { border-bottom-right-radius: 4px; }
.chat-item:nth-child(even) .chat-bubble.brand::after {
    left: calc(100% - 2px); /* Исправлено для правого хвостика */
    border-width: 15px 0 0 15px;
    border-color: transparent transparent transparent #2e4738;
}

/* Behanglungen*/
/* Layout: Asymmetrical / Zig-zag
   Component: Glassmorphism Overlap Cards
 */

.treatments-page-wrapper {
    background-color: #FAF8F5;
    padding-bottom: 120px;
    overflow-x: hidden;
}

/* Page header */
.page-cover-image {
    width: 100%;
    margin-top: 100px;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
}

.page-cover-image video {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

/* ==========================================================================
   ASYMMETRICAL GRID (Зигзаг)
   ========================================================================== */

.treatment-topic {
    width: 90%;
    max-width: 1400px; 
    margin-top: 150px; 
    margin-bottom: 150px;
}

.treatment-topic:not(.is-reversed) {
    margin-left: auto;
    margin-right: 3%;
}

.treatment-topic.is-reversed {
    margin-right: auto;
    margin-left: 3%;
}

.treatment-description {
    width: 80%;
    font-size: 0.7rem; 
    line-height: 1.6;
    color: #2e4738;
    margin-bottom: 25px; 
    opacity: 0.9;
}

.button-container {
    display: flex;
    justify-content: flex-end; 
    width: 100%;
}

.btn-appointment {
    position: relative;
    display: inline-block;
    padding: 16px 42px; 
    border: 1px solid #E2C38E;
    color: #E2C38E;
    text-decoration: none;
    font-size: 0.95rem; 
    letter-spacing: 2px;
    z-index: 1;
    overflow: hidden; 
    transition: color 0.4s ease; 
    background: transparent;
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 500;
}

.btn-appointment::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; 
    width: 0; 
    height: 100%; 
    background-color: #E2C38E;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    z-index: -1; 
}

.btn-appointment:hover {
    color: #ffffff; 
}

.btn-appointment:hover::before {
    width: 100%; 
}

/* ==========================================================================
   HERO BLOCK & OVERLAP LOGIC
   ========================================================================== */

.topic-hero {
    position: relative;
    display: flex; 
    align-items: center; 
    height: 550px; 
    margin-bottom: 80px;
    justify-content: flex-end; 
}

.treatment-topic.is-reversed .topic-hero { justify-content: flex-start; }

/* IMAGE */
.topic-hero__image-box {
    width: 65%; 
    height: 100%; 
    flex-shrink: 0; 
    border-radius: 8px; 
    overflow: hidden;
    box-shadow: 25px 25px 60px rgba(226, 195, 142, 0.3);
}

.topic-hero__image-box img {
    width: 100%; 
    height: 100%;       
    object-fit: cover; 
    display: block;
}

/* GLASS CARD WRAPPER */
.topic-hero__card-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    z-index: 10;
}

.topic-hero__card-wrapper.left-side { left: -3%; }
.treatment-topic.is-reversed .topic-hero__card-wrapper.right-side { left: auto; right: -3%; }

/* GLASS CARD TEXT */
.topic-hero__text-card {
    background: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(226, 195, 142, 0.4);
    border-radius: 8px; 
    padding: 60px 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    width: 100%;
}

.topic-hero__card-wrapper.left-side .topic-hero__text-card { border-left: 4px solid #E2C38E; }
.treatment-topic.is-reversed .topic-hero__card-wrapper.right-side .topic-hero__text-card {
    border-left: 1px solid rgba(226, 195, 142, 0.4);
    border-right: 4px solid #E2C38E;
}

.topic-hero__subtitle { font-size: 0.85rem; color: #E2C38E; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; display: block; }
.topic-hero__title { font-family: 'SpaTitle', serif; font-size: 3rem; color: #E2C38E; margin-top: 0; margin-bottom: 25px; font-weight: normal; }
.topic-hero__text { color: #2e4738; font-size: 1.1rem; line-height: 1.8; }

/* ==========================================================================
   LISTS & CONTENT
   ========================================================================== */
.massage-group { margin-bottom: 45px; }

.massage-group-title {
    font-family: 'SpaTitle', serif;
    font-size: 1.4rem;
    color: #2e4738;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: normal;
}

/* Настройки для вложенных пунктов массажа */
.minimal-item.sub-item {
    margin-left: 60px; 
    margin-bottom: 18px;
    font-size: 1.1rem; 
    text-transform: none; 
    line-height: 1.9;      
}

.minimal-item.sub-item .item-name {
    font-family: var(--font-body), sans-serif;
    opacity: 0.9;
}

.topic-accordion, 
.minimal-list, 
.package-grid { width: 65%; max-width: none; }

.treatment-topic:not(.is-reversed) .topic-accordion,
.treatment-topic:not(.is-reversed) .minimal-list,
.treatment-topic:not(.is-reversed) .package-grid { margin-left: auto; margin-right: 0; }

.treatment-topic.is-reversed .topic-accordion,
.treatment-topic.is-reversed .minimal-list,
.treatment-topic.is-reversed .package-grid { margin-left: 0; margin-right: auto; }

/* Accordion */
.accordion-row { border-bottom: 1px solid rgba(46, 71, 56, 0.15); }
.accordion-trigger { width: 100%; background: transparent; border: none; padding: 25px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; }
.accordion-trigger__left { display: flex; flex-direction: column; gap: 5px; }
.accordion-trigger__title { font-family: 'SpaTitle', serif; font-size: 1.2rem; color: #2e4738; text-transform: uppercase; }
.accordion-trigger__meta { font-size: 0.85rem; color: #888; letter-spacing: 1px; }
.accordion-trigger__right { display: flex; align-items: center; gap: 30px; }
.accordion-trigger__price { font-size: 1.2rem; color: #E2C38E; font-weight: 600; }
.accordion-trigger__icon { font-size: 2rem; color: #E2C38E; font-weight: 300; transition: transform 0.4s ease; line-height: 1; width: 20px; text-align: center; }
.accordion-row.is-active .accordion-trigger__icon { transform: rotate(45deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.accordion-panel__content { padding: 0 0 25px 0; color: #2e4738 ; line-height: 1.6; font-size: 0.7rem ; width: 100%;  }  
.accordion-panel__content p {color:#2e4738 !important; font-size: 0.95rem; }

/* ==========================================================================
   PACKAGE GRID
   ========================================================================== */

/* 
  Контейнер для пакетов.
  Ширина 100% заставит сетку выровняться по краям родительского блока.
*/
.treatment-topic.is-reversed .package-grid { 
    width: 100%; 
    margin: 40px auto 0; 
}

.package-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px; 
}

/* 
  Настройки карточки.
  display: flex и flex-direction: column позволяют управлять внутренним контентом,
  чтобы можно было прижать цену к низу при разном объеме текста.
*/
.package-card { 
    background: #fff; 
    padding: 35px 20px; 
    border-radius: 8px; 
    border: 1px solid rgba(226, 195, 142, 0.3); 
    text-align: center; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.03); 
    display: flex;
    flex-direction: column;
    height: 100%; 
}

.package-card h3 { 
    font-family: 'SpaTitle', serif; 
    color: #2e4738; 
    margin-bottom: 10px; 
    font-size: 1.1rem; 
    text-transform: uppercase; 
}

/* ==========================================================================
   ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ ТЕКСТА И ЦЕНЫ
   ========================================================================== */

/* Слегка уменьшен шрифт и letter-spacing для плотной компоновки в узких блоках.
  Добавлен hyphens для правильного переноса длинных немецких слов по слогам.
*/
.package-card p { 
    color: #888; 
    font-size: 0.7rem; 
    text-transform: uppercase;
    letter-spacing: 0.5px; 
    margin-bottom: 20px; 
    line-height: 1.5;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Контейнер цены */
.package-card .price { 
    display: inline-block; /* Ограничивает ширину блока размером текста */
    align-self: center;
    color: #E2C38E; /* Золотой цвет по умолчанию */
    font-weight: bold; 
    font-size: 1.4rem; 
    margin-top: auto;
    text-decoration: none; 
    position: relative;
    padding-bottom: 5px; /* Небольшой отступ, чтобы линия не прилипала к цифрам */
    transition: color 0.3s ease; /* Плавная смена цвета текста */
}

/* Скрытая линия (золотая) */
.package-card .price::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 0; /* Изначально скрыта */
    height: 2px;
    background-color: #E2C38E; /* Золотой цвет линии */
    transition: width 0.3s ease; /* Плавный выезд линии */
}

/* Ховер: текст становится белым */
.package-card .price:hover {
    /* Делаем цену белой. ВНИМАНИЕ: сливается с белым фоном карточки, если фон не меняется! */
    color: var(--green); 
}

/* Ховер: линия выезжает на ширину текста */
.package-card .price:hover::after {
    width: 100%;
}


/* Minimal List */
.minimal-item { display: flex; align-items: baseline; margin-bottom: 25px; font-family: 'SpaTitle', serif; color: #2e4738; font-size: 1.2rem; text-transform: uppercase; }
.item-name { flex-shrink: 0; }
.item-line { flex-grow: 1; border-bottom: 1px dotted rgba(226, 195, 142, 0.6); margin: 0 15px; }
.item-price { color: #E2C38E; font-weight: 600; flex-shrink: 0; }

/* Divider */
.lux-divider { width: 100%; height: 400px; margin: 100px 0; background-size: cover; background-attachment: fixed; background-position: center; }

/* ==========================================================================
   ПРЕМИАЛЬНАЯ АНИМАЦИЯ (ДВУХСТОРОННЯЯ)
   ========================================================================== */
.premium-fade,
.premium-slide-left,
.premium-slide-right {
    opacity: 0; 
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.premium-fade { transform: translateY(20px); }
.premium-slide-left { transform: translateX(40px); }
.premium-slide-right { transform: translateX(-40px); }

.premium-fade.active,
.premium-slide-left.active,
.premium-slide-right.active {
    opacity: 1;
    transform: translate(0);
}
/* ==========================================================================
   ПРЕМИАЛЬНАЯ АНИМАЦИЯ (ДВУХСТОРОННЯЯ)
   ========================================================================== */
.premium-fade,
.premium-slide-left,
.premium-slide-right {
    opacity: 0; /* Изначально элементы скрыты */
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.premium-fade { transform: translateY(20px); }
.premium-slide-left { transform: translateX(40px); }
.premium-slide-right { transform: translateX(-40px); }

.premium-fade.active,
.premium-slide-left.active,
.premium-slide-right.active {
    opacity: 1;
    transform: translate(0);
}

/* ==========================================================================
   СТРАНИЦА: GUTSCHEINE (Стеклянная карточка)
   ========================================================================== */

/* Настройки секции с фоном */
.static-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

/* Затемняющий зеленоватый фильтр поверх картинки */
.static-hero::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Используем твой фирменный зеленый, но через rgba для прозрачности 50% */
    background: rgba(46, 71, 56, 0.5); 
    z-index: 1;
}

/* Контейнер-ограничитель ширины */
.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: flex-start;
}

/* Сама стеклянная карточка */
.glass-card {
    max-width: 550px;
    padding: 40px;
    /* Полупрозрачный фон для эффекта стекла */
    background: rgba(26, 38, 32, 0.5); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    border: 1px solid rgba(226, 195, 142, 0.3);
    /* Используем твою переменную для золотой рамки */
    border-left: 4px solid var(--gold); 
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Заголовок GUTSCHEINE */
.glass-card .gold-title {
    /* Используем твои переменные для шрифта и цвета */
    font-family: var(--font-title); 
    color: var(--gold); 
    font-size: 2.5rem;
    font-weight: 400; /* Обычно кастомные шрифты лучше смотрятся с нормальным весом */
    margin-bottom: 20px;
    letter-spacing: 2px;
}

/* Текст описания */
.glass-card p {
    /* Используем твои переменные для шрифта и цвета текста */
    font-family: var(--font-body);
    color: var(--text);
    font-size: 1.1rem
}

/* Переопределение поведения навбара для страницы Gutscheine */
.gutscheine-page .navbar {
    /* Меню видно сразу при загрузке страницы */
    top: 0; 
}

.gutscheine-page .title-link{  
    font-size: 1.5rem;
}

.gutsheine-button {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;

}

/*
  Contact links styling.
  Removes default browser link styles and adds an expanding golden underline on hover,
  similar to the price tag effect.
*/
.custom-link {
    color: var(--text); /* Base text color (dark green) */
    font-weight: 600; /* Makes it stand out slightly from normal text */
    text-decoration: none; /* Removes default browser underline */
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

/* Hidden golden underline */
.custom-link::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 0;
    height: 1px; /* Thinner line than the price tag for elegance in text */
    background-color: #E2C38E; /* Gold */
    transition: width 0.3s ease;
}

/* Hover effects */
.custom-link:hover {
    color: #E2C38E; /* Optional: text turns gold on hover */
}

.custom-link:hover::after {
    width: 100%; /* Underline expands to full width of the text */
}

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО ДЛЯ ЗАКАЗА GUTSCHEIN
   ========================================================================== */

/* Темная подложка на весь экран */
.premium-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 19, 0.7); /* Темный изумрудно-зеленый оттенок вуали */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Состояние при открытии */
.premium-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Центральная контентная карточка */
.premium-modal-content {
    background: rgba(26, 38, 32, 0.95); /* Плотный фирменный темно-зеленый фон */
    border: 1px solid rgba(226, 195, 142, 0.3);
    border-top: 4px solid #E2C38E; /* Золотая полоса сверху */
    border-radius: 8px;
    padding: 50px 40px;
    max-width: 450px;
    width: 90%;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    transform: translateY(-30px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.premium-modal.is-visible .premium-modal-content {
    transform: translateY(0);
}

/* Заголовок внутри окна */
.premium-modal-content .modal-title {
    font-family: 'SpaTitle', serif;
    color: #E2C38E;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
}

/* Кнопка закрытия (крестик) */
.close-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2rem;
    color: rgba(226, 195, 142, 0.5);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1;
}

.close-modal:hover {
    color: #E2C38E;
    transform: scale(1.1);
}

/* Форма и поля ввода внутри модалки */
.premium-modal-content form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.premium-modal-content .form-group {
    width: 100%;
}

.premium-modal-content input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(226, 195, 142, 0.25);
    border-radius: 3px;
    padding: 15px;
    color: #ffffff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
}

.premium-modal-content input:focus {
    border-color: #E2C38E;
    background: rgba(255, 255, 255, 0.08);
}

.premium-modal-content input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.95rem;
}

/* Переопределение кнопки внутри окна для корректного позиционирования */
.premium-modal-content .btn-appointment {
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

/* ==========================================================================
   STRANICA CONTACTS (Premium Version)
   ========================================================================== */

body.contact-page {
    background-color: #F4F1EA !important;
    color: var(--green) !important;
    font-family: var(--font-body);
}

body.contact-page .background-fixed { display: none !important; }

/* Навигация */
body.contact-page .navbar {
    top: 0 !important;
    background: var(--green) !important;
    display: flex !important;
}

/* Заголовки - принудительно ставим твой SpaTitle */
body.contact-page h1 {
    font-family: var(--font-title) !important;
    font-size: clamp(1rem, 2vw, 1rem);
    color: var(--gold);
    margin: 20px 0;
    font-weight: normal;
}

.contact-hero .label {
    font-family: var(--font-body);
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Сетка */
.layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 8vw, 100px);
    padding: 60px 0;
}

/* Инфо-блоки */
.info-item h3 {
    font-family: var(--font-body);
    color: var(--gold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.info-item p, .info-item a {
    font-family: var(--font-body);
    color: var(--green);
    font-size: 1.1rem;
    text-decoration: none;
}

.info-kontakt::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Отступ полоски от букв */
    left: 0;
    width: 0%; /* Скрыта (ширина 0) */
    height: 2px; /* Толщина полоски */
    background-color: var(--gold); /* Золотой цвет */
    
    transition: width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1); /* Плавная анимация */
}

.info-kontakt:hover {
    /* Увеличиваем текст на 5% */
    transform: scale(1.05); 
}

/* 3. При наведении (полоска выезжает) */
.info-kontakt:hover::after {
    width: 45%; /* Растягивается на всю длину */
}

/* --- СТИЛЬ ВИДЕО ТУТОРИАЛОВ --- */
.video-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.btn-video-tutorial {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    padding: 15px;
    border: 1px solid rgba(46, 71, 56, 0.1);
    transition: all 0.4s ease;
}

.btn-video-tutorial:hover {
    border-color: var(--gold);
    background: rgba(226, 195, 142, 0.05);
    transform: translateX(10px);
}

.play-circle {
    width: 50px;
    height: 50px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 0.8rem;
}

.video-text {
    display: flex;
    flex-direction: column;
}

.video-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--gold);
    letter-spacing: 1px;
}

.video-title {
    font-family: var(--font-body);
    color: var(--green);
    font-size: 1rem;
}

/* --- ФОРМА --- */
.field-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(46, 71, 56, 0.5);
    margin-bottom: 5px;
    font-family: var(--font-body);
}

.minimal-form .form-group { margin-bottom: 35px; }

.minimal-form input, .minimal-form textarea {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(46, 71, 56, 0.2) !important;
    padding: 10px 0 !important;
    font-family: var(--font-body);
    color: var(--green) !important;
    font-size: 1rem;
}

.minimal-form input:focus, .minimal-form textarea:focus {
    border-bottom-color: var(--gold) !important;
}

/* Кнопки заготовок */
.btn-template-minimal {
    background: transparent;
    border: 1px solid rgba(46, 71, 56, 0.1);
    color: var(--green);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.3s;
}

.btn-template-minimal:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-gold-border {
    font-family: var(--font-body);
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 18px 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-gold-border:hover {
    background: var(--gold);
    color: var(--text);
}

/* Сообщение об успешной отправке письма */
.success-message {
    text-align: center;
    padding: 40px 20px;
    border: 1px solid rgba(226, 195, 142, 0.3); /* Золотистая рамка */
    background: rgba(46, 71, 56, 0.5); /* Темно-зеленый фон */
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.success-message h3 {
    font-family: var(--font-title);
    color: var(--gold);
    margin-bottom: 10px;
}

.success-message p {
    font-family: var(--font-body);
    color: var(--text);
}

/* Карта */
.map-container {
    border: 1px solid rgba(46, 71, 56, 0.1);
    filter: sepia(20%) contrast(90%); /* Немного "состарим" карту под бежевый тон */
    margin-bottom: 5%;
}

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


/* ==========================================================================
   LEGAL PAGES (Datenschutz, Impressum, AGB)
   ========================================================================== */

.legal-container {
    max-width: 800px;
    margin: 150px auto 100px; /* 150px сверху, чтобы отступить от навбара */
    padding: 0 20px;
    font-family: var(--font-body), sans-serif;
    color: #2e4738; /* Используем твой фирменный темно-зеленый цвет */
    line-height: 1.8;
}

.legal-container h1 {
    font-family: 'SpaTitle', serif;
    font-size: 2.5rem;
    color: #E2C38E; /* Золотой акцент для главного заголовка */
    margin-bottom: 40px;
    text-align: center;
}

.legal-container h2 {
    font-family: 'SpaTitle', serif;
    font-size: 1.5rem;
    color: #2e4738;
    margin-top: 40px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(226, 195, 142, 0.4); /* Тонкая золотая линия под разделами */
    padding-bottom: 10px;
}

.legal-container h3 {
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #2e4738;
}

.legal-container p {
    margin-bottom: 15px;
    opacity: 0.9;
    color: #2e4738;
}

.legal-container ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.legal-container li {
    margin-bottom: 8px;
    opacity: 0.9;
}

.legal-page-wrapper {
    background-color: #FAF8F5; /* Твой фирменный светлый цвет */
    min-height: 100vh;         /* Занимает минимум всю высоту экрана */
    padding-top: 150px;        /* Отступ сверху, чтобы меню не перекрыло текст */
    padding-bottom: 100px;
    width: 100%;
}

/* Принудительный показ навигационной панели на этих страницах */
body.legal-page .navbar {
    top: 0 !important;                  /* Опускаем панель на место (отменяем минус) */
    transform: translateY(0) !important; /* На всякий случай отменяем сдвиг */
    background-color: #2e4738;          /* Темно-зеленый фон для меню, чтобы его было видно */
    position: fixed;
}

/* ==========================================================================
   CookieConsent v3 Overrides
   Sets dark theme colors, high contrast text, and glassmorphic effect
   ========================================================================== */

:root {
    /* Background and text colors */
    --cc-bg: rgba(26, 38, 32, 0.98) !important;
    --cc-primary-color: #F9F6F2 !important;     /* Main text (white) */
    --cc-secondary-color: #d8d8d8 !important;   /* Secondary text (light gray) */
    
    /* Primary Button (Gold) */
    --cc-btn-primary-bg: #E2C38E !important;
    --cc-btn-primary-color: #1A2620 !important;
    --cc-btn-primary-hover-bg: #f3dac4 !important;
    --cc-btn-primary-hover-color: #1A2620 !important;
    
    /* Secondary Button (Transparent) */
    --cc-btn-secondary-bg: rgba(255, 255, 255, 0.05) !important;
    --cc-btn-secondary-color: #F9F6F2 !important;
    --cc-btn-secondary-hover-bg: rgba(226, 195, 142, 0.1) !important;
    --cc-btn-secondary-hover-color: #F9F6F2 !important;
    --cc-btn-secondary-border-color: rgba(226, 195, 142, 0.3) !important;
    
    /* Toggles and Separators */
    --cc-toggle-on-bg: #E2C38E !important;
    --cc-toggle-off-bg: rgba(255, 255, 255, 0.2) !important;
    --cc-toggle-readonly-bg: rgba(226, 195, 142, 0.5) !important;
    --cc-separator-bg: rgba(226, 195, 142, 0.15) !important;
    
    /* Cookie Category Blocks */
    --cc-cookie-category-block-bg: rgba(0, 0, 0, 0.15) !important;
    --cc-cookie-category-block-border: rgba(226, 195, 142, 0.15) !important;
    
    /* Border Radius */
    --cc-modal-border-radius: 12px !important;
    --cc-btn-border-radius: 50px !important;
}

/* Force colors on specific elements to guarantee contrast */
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
    color: #E2C38E !important; 
    font-family: var(--font-title) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc,
#cc-main .cc-toggle__label,
#cc-main .pm__section-desc-wrapper p {
    color: #F9F6F2 !important; 
}

#cc-main .cm__link {
    color: #E2C38E !important;
    text-decoration: underline !important;
}

/* Glassmorphism effect */
#cc-main .cm, 
#cc-main .pm {
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(226, 195, 142, 0.2) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Затемнение фона */
/* CSS */
#gutscheinModal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 12, 0.9);
    backdrop-filter: blur(8px);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

#gutscheinModal.is-visible {
    display: flex !important;
}

.premium-modal-content {
    background: #1A2620;
    width: 100%;
    max-width: 500px;
    padding: 60px 40px;
    border: 1px solid rgba(226, 195, 142, 0.3);
    text-align: center;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.premium-modal-content h2 {
    color: #E2C38E;
    font-family: serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: 40px;
    margin-top: 0;
}

.premium-form input {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(226, 195, 142, 0.3);
    color: #F9F6F2;
    padding: 15px 0;
    margin-bottom: 30px;
    font-size: 1.1rem;
    text-align: center;
    outline: none;
    transition: border-bottom 0.3s ease;
}

.premium-form input:focus {
    border-bottom: 1px solid #E2C38E;
}

.premium-form button {
    background: transparent;
    border: 1px solid #E2C38E;
    color: #E2C38E;
    padding: 18px 40px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.premium-form button:hover {
    background: #E2C38E;
    color: #1A2620;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #E2C38E;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}
/* ==========================================================================
   АДАПТАЦИЯ НАВИГАЦИИ (ТЕЛЕФОНЫ И ПЛАНШЕТЫ ДО 900PX)
   ========================================================================== */
@media (max-width: 900px) {
    
    /* 1. Переключаем кнопки */
    .desktop-btn {
        display: none !important; 
    }
    
    .mobile-nav-btn-container {
        display: block !important; 
        margin-top: 30px !important;
    }

    /* 2. Показываем и настраиваем гамбургер */
    .menu-toggle {
        display: flex !important; 
        z-index: 9999 !important; 
    }

    /* Анимация крестика при открытии */
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    /* 3. Мобильное выезжающее меню */
/* --- 1. ЦЕНТРОВКА И ОТСТУПЫ ВСЕГО МЕНЮ --- */
    nav.navbar .nav-links {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important; 
        width: 100vw !important;
        height: 100dvh !important;
        background: rgba(46, 71, 56, 0.98) !important; 
        z-index: 9998 !important; 
        
        display: flex !important;
        flex-direction: column !important;
        /* Выравниваем по верхнему краю, чтобы не было прыжков по центру */
        justify-content: flex-start !important; 
        align-items: center !important;
        
        /* Делаем отступ сверху и адекватное расстояние между кнопками */
        padding-top: 120px !important; 
        gap: 25px !important; 
        overflow-y: auto !important; /* Разрешаем скролл, если меню не влезает в экран */
        
        transform: translateX(100%) !important; 
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    nav.navbar .nav-links.active {
        transform: translateX(0) !important; 
    }

    nav.navbar .nav-links > li {
        text-align: center !important;
        width: 100% !important;
    }

    /* --- 2. ИСПРАВЛЕНИЕ ВЫПАДАЮЩИХ СПИСКОВ (Убираем дыры) --- */
    /* --- 2. ИСПРАВЛЕНИЕ ВЫПАДАЮЩИХ СПИСКОВ (Убираем дыры) --- */
    .dropdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        /* Сброс высоты, чтобы элементы не расталкивали друг друга */
        height: auto !important; 
    }

    /* --- 3. АНИМАЦИЯ, ТЕМНЫЙ ФОН И КЛИКАБЕЛЬНОСТЬ --- */
    .dropdown-menu {
        position: relative !important; 
        z-index: 10 !important; 
        
        /* ЖЕЛЕЗОБЕТОННЫЙ СБРОС КОМПЬЮТЕРНЫХ ОТСТУПОВ */
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 85% !important; 
        
        background: rgba(20, 32, 25, 0.5) !important; 
        border-radius: 12px !important;
        
        /* Скрытие через высоту и прозрачность */
        max-height: 0;
        overflow: hidden !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        
        transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, margin 0.4s ease !important;
    }

    /* Состояние открытого аккордеона */
    .dropdown.mobile-active .dropdown-menu {
        max-height: 400px !important; 
        opacity: 1 !important;
        padding: 15px 0 !important;
        margin-top: 15px !important;
        pointer-events: auto !important;
    }

    .dropdown-menu li {
        margin: 10px 0 !important;
        transform: none !important;
        opacity: 1 !important;
        width: 100%;
        text-align: center;
    }

    .dropdown-menu a {
        font-size: 1.05rem !important; 
        color: #d8d8d8 !important;
        display: block; 
        padding: 10px;
    }

    .scroll-container {
        height: 100dvh !important; 
        overflow-y: scroll !important;
        scroll-snap-type: y mandatory !important; 
        scroll-behavior: smooth !important;
        
        /* Секретный ингредиент: убирает "резиновую" прокрутку на телефонах */
        overscroll-behavior-y: none !important; 
        -webkit-overflow-scrolling: touch !important; /* Плавность для Safari */
    }

    .scene {
        height: 100dvh !important;
        scroll-snap-align: start !important;
        /* Жестко заставляет тормозить на каждом слайде, гася инерцию пальца */
        scroll-snap-stop: always !important; 
    }

    #werte .description-text p{
        font-size: 0.8rem;

    }

    .team-card-static .team-desc{
        font-size: 0.8rem;
    }

    #quote-link { 
        font-size: 1.4rem;   
    }
    .quote-section {
        padding: 90px 0;
    }
    .quote-flex-wrapper {
        padding: 0 30px;
        font-size: 1.3rem;
    }

    #quote-author{
        font-size: 0.85rem;
    }

    #quote-text {
        font-size: 1.4rem; /* Уменьшаем шрифт на мобилках */
    }
    .quote-mark {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }
    /* Стрелки убираем из абсолютного позиционирования вниз */
    .quote-arrow {
        position: static;
        transform: none;
        margin: 30px 20px 0 20px;
        font-size: 2.5rem;
    }
    .quote-arrow:hover {
        transform: scale(1.1);
    }
    .quote-flex-wrapper {
        flex-wrap: wrap; /* Чтобы стрелки упали под текст */
    }
    .quote-container {
        width: 100%;
        order: -1; /* Поднимаем текст над стрелками */
    }

/* Mobile layout fixes: remove negative margins, clean up glass effect, center massage lists. */

    .treatment-topic {
        width: 100%;
        padding: 0 5% !important; 
        margin-top: 40px !important; 
        margin-bottom: 60px !important;
    }

    .treatment-topic:first-of-type {
        margin-top: 20px !important; 
    }

    /* Stack hero image and text cleanly. Drop negative margins to avoid overlap issues on smaller screens. */
    .topic-hero {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* Add clean spacing between image and text */
        height: auto;
        margin-bottom: 40px !important;
    }

    .topic-hero__image-box {
        width: 100% !important;
        height: 250px !important; /* Fixed height for mobile to prevent huge images */
        border-radius: 12px !important;
        object-fit: cover !important; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
    }

    .topic-hero__card-wrapper {
        position: relative !important;
        width: 100% !important; 
        margin: 0 !important; /* Reset overlap */
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Redo glass effect: dark green base, subtle blur, gold border for contrast */
    .topic-hero__text-card {
        padding: 25px 20px !important;
        background: rgba(30, 45, 35, 0.9) !important; 
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(226, 195, 142, 0.3) !important; 
        border-radius: 12px !important;
        text-align: center !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    }

    .topic-hero__text{  
        color:#d8d8d8
    }

    .topic-hero__title {
        font-size: 1.8rem !important; 
        margin-bottom: 15px !important;
    }

    /* Reset widths to ensure content fits the screen */
    .topic-accordion,
    .minimal-list,
    .package-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Package cards styling */
    .package-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; 
        gap: 20px !important;
    }
    .package-card {
        padding: 25px 20px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(226, 195, 142, 0.4) !important;
    }

    /* Center massage lists and fix flex layout for items */
    .massage-group-title {
        text-align: center !important; 
        font-size: 1.4rem !important;
        margin: 40px 0 20px 0 !important;
    }
    
    .minimal-list {
        margin: 0 auto !important; /* Force centering of the entire list container */
    }

    .minimal-item {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important;
        align-items: center !important; 
        text-align: left !important;
        margin-bottom: 18px !important;
        width: 100% !important;
    }

    .minimal-item.sub-item {
        margin-left: 0 !important; 
        padding-left: 0 !important; 
        font-size: 0.95rem !important;
        color: #d8d8d8 !important;
    }
    
    /* Dashed line filling the gap */
    .item-line {
        display: block !important; 
        flex-grow: 1 !important; 
        margin: 0 15px !important;
        border-bottom: 1px dashed rgba(226, 195, 142, 0.4) !important; 
        transform: translateY(-4px) !important; /* Align dashes with text baseline */
    }

    .item-name {
        max-width: 60% !important; 
        line-height: 1.4 !important;
    }

    .item-price {
        flex-shrink: 0 !important; 
        font-weight: 500 !important;
        color: #E2C38E !important; /* Highlight price in gold */
    }

    /* --- 1. УСТРАНЕНИЕ ЛЮБЫХ ЛЕВЫХ СВУЙПОВ И СДВИГОВ ВПРАВО --- */
    
    html, body, .scroll-container, main {
        max-width: 100% !important;
        overflow-x: hidden !important; /* Полная блокировка горизонтальной прокрутки */
    }

    /* Автоматический перенос длинных юридических терминов по слогам */
    p, span, h1, h2, h3, h4, li, a, td, div {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        hyphens: auto !important; /* Перенос слов на смартфонах */
    }

    /* Сброс жестких размеров у таблиц и блоков, если они ломают сетку */
    table, iframe, img, form {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

.contact-main .container,
    .contact-hero .container,
    .contact-page-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Сбрасываем сетку: колонки (инфо и форма) выстраиваем друг под другом */
    .layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important; /* Расстояние между текстом и формой */
    }

    /* Растягиваем форму на всю доступную ширину с учетом новых отступов */
    .contact-left-column,
    .contact-form-container {
        width: 100% !important;
    }


    /* ==============================================
       2. ФИКС СПИСКА МАССАЖЕЙ (ПРИБЛИЖАЕМ ЦЕНЫ)
       ============================================== */
    
    /* Делаем отступы по краям экрана */
    .minimal-list {
        padding: 0 25px !important; 
    }

    /* Прижимаем элементы ближе друг к другу, выравнивая по левому краю */
    .minimal-item.sub-item {
        justify-content: flex-start !important; 
    }

    /* Жестко ограничиваем длину линии. Теперь точек будет меньше. */
    .item-line {
        flex: 0 1 40px !important; /* Линия не будет длиннее 40 пикселей */
        min-width: 20px !important;
        margin: 0 10px !important;
    }
    
    .item-name{
        color: #2e4738;
    }

    /* Увеличиваем размер цены, чтобы ее было хорошо видно */
    .item-price {
        font-size: 1.25rem !important; 
        font-weight: 500 !important;
        color: var(--gold) !important;
    }

    .brand-name {
        /* ЗАПРЕЩАЕМ ПЕРЕНОС ТЕКСТА внутри этого элемента. Слово будет одним целым. */
        white-space: nowrap !important; 
        /* Дополнительная страховка: отключаем автоматические переносы для этого заголовка */
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }

    /* 1. Общий фон и отступы */
    .site-footer {
        padding: 60px 20px 30px !important;
        background: var(--green) !important; /* Глубокий темно-зеленый */
        border-top: 1px solid rgba(226, 195, 142, 0.15) !important;
    }

    /* 2. Центрируем всё содержимое и задаем "воздух" */
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 50px !important; /* Большое расстояние между главными блоками */
    }

    /* 3. Блок логотипа */
    .footer-brand {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .footer-logo-img {
        width: 80px !important; /* Аккуратный размер логотипа */
        height: auto !important;
        opacity: 0.9 !important;
    }

    .brand-name {
        font-family: var(--font-title) !important;
        font-size: 2rem !important;
        color: var(--gold) !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
    }

    /* 4. Секция с адресом и временем */
    .footer-nav-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        width: 100% !important;
    }

    .info-block {
        margin-bottom: 30px !important;
    }

    /* Премиальный стиль для заголовков */
    .info-label {
        color: var(--gold) !important;
        font-size: 0.85rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.15em !important;
        display: block !important;
        margin-bottom: 12px !important;
        font-weight: 500 !important;
    }

    /* Спокойный цвет для обычного текста */
    .info-block p {
        color: #d8d8d8 !important;
        margin: 6px 0 !important;
        font-size: 1.05rem !important;
        font-weight: 300 !important;
        line-height: 1.5 !important;
    }

    /* 5. Блок контактов и соцсетей */
    .social-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
    }

    .social-icons-row {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    /* Иконки в тонких золотых кругах */
    .social-icon {
        color: var(--gold) !important;
        font-size: 1.3rem !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(226, 195, 142, 0.3) !important; 
        border-radius: 50% !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }

    /* Элегантная ссылка для email */
    .footer-email-link {
        color: #F9F6F2 !important;
        font-size: 1.15rem !important;
        text-decoration: none !important;
        border-bottom: 1px dashed rgba(226, 195, 142, 0.4) !important; /* Тонкий подчеркивающий пунктир */
        padding-bottom: 4px !important;
        letter-spacing: 0.05em !important;
        font-weight: 300 !important;
    }

    /* 6. Тонкий разделитель перед копирайтом */
    .footer-divider {
        border: none !important;
        border-top: 1px solid rgba(226, 195, 142, 0.15) !important;
        margin: 40px auto 25px !important;
        width: 70% !important; /* Линия не на весь экран, а аккуратная по центру */
    }

    /* 7. Самый низ (Копирайт и юридические ссылки) */
    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .copyright {
        color: rgba(255, 255, 255, 0.4) !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.05em !important;
        text-align: center !important;
    }

    .legal-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        justify-content: center !important;
    }

    .legal-links a {
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 0.85rem !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

}