/* Общие стили сайта */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Rufina', serif;
    background-color: black;
    color: white;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: 'Times New Roman', serif;
}

/* Заголовки h3 и h4 центрируются */
h3, h4 {
    display: block;
    font-family: 'Times New Roman', serif;
    width: 100%; /* Заголовок растягивается по ширине блока */
    text-align: center; /* Центрируем текст */
}

.language-switcher {
    position: absolute; /* Абсолютное позиционирование на уровне секции .hero */
    top: 20px; /* Отступ сверху */
    left: 20px; /* Меню выравнивается справа */
    z-index: 10; /* Устанавливаем приоритет отображения */
}

.language-switcher button {
    background-color: rgba(0, 27, 33, 0.6); /* Полупрозрачный белый фон */
    border: none; /* Убираем рамку */
    color: #999999; /* Черный текст */
    padding: 0.5rem 0.5rem; /* Отступы кнопок */
    margin-left: 0.1rem; /* Расстояние между кнопками */
    border-radius: 5px; /* Скругление углов */
    cursor: pointer; /* Указатель при наведении */
    font-size: 0.7rem; /* Размер шрифта */
    transition: all 0.3s ease;
}

.language-switcher button:hover {
    background-color: rgba(0, 27, 33, 1); /* При наведении кнопка становится черной */
    color: rgb(252, 253, 253); /* Белый текст */
}

/* Логотип */
.logo {
    position: absolute; /* Абсолютное позиционирование для свободы размещения */
    top: 40px; /* Отступ сверху */
    left: 50%; /* Позиционирование в центре экрана по горизонтали */
    transform: translateX(-50%); /* Центрируем, сдвигая на 50% ширины элемента */
    z-index: 10; /* Логотип выше остальных элементов */
}

.logo img {
    max-height: 70px; /* Ограничиваем высоту изображения */
    transform-origin: center; /* Центр анимации вращения */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); /* Исходное свечение логотипа */
    transition: transform 0.3s ease, filter 0.3s ease; /* Для плавных эффектов */
    animation: pulseGlow 1.5s ease-in-out infinite; /* Привязка анимации */
}

/* Анимация вращения запускается при наведении */
.logo img:hover {
    animation: rotateLogo 7s linear infinite, pulseGlow 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); /* Усиление свечения при наведении */
}

/* Анимация свечения */
@keyframes pulseGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
    }
}

/* Анимация вращения */
@keyframes rotateLogo {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Навигация */
.navigation {
    position: absolute; /* Абсолютно позиционируем навигацию поверх секции .hero */
    top: 150px; /* Расположим под логотипом */
    width: 100%; /* Заполняет всю ширину страницы */
    z-index: 1000; /* Навигация поверх фона .hero */
    text-align: center; /* Элементы выравниваются по центру */
}

.navigation ul {
    list-style: none; /* Удаляем маркеры списка */
    margin: 0 auto; /* Центрируем */
    padding: 0;
    display: flex; /* Используем flexbox для горизонтального расположения элементов */
    justify-content: center; /* Центрируем элементы списка горизонтально */
    align-items: center; /* Центрируем по вертикали */
    position: relative; /* Становится контейнером для псевдоэлементов полос */
}

.navigation ul::before,
.navigation ul::after {
    content: ""; /* Создаем декоративные полосы */
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Центрируем полосы вертикально */
    height: 0.07rem; /* Толщина линий */
    background: white; /* Цвет линий */
    transform: translateY(-50%); /* Выравниваем по середине */
    z-index: 0; /* Позади текста навигации */
    pointer-events: none; /* Избегаем взаимодействия с мышью */
    transition: opacity 0.3s ease; /* Добавляем плавное исчезновение */
}

.navigation ul::before {
    left: 2rem; /* Левый отступ от края страницы */
    width: calc(15vw + 2rem); /* Полоса заканчивается до первого элемента, оставляя отступы */
}

.navigation ul::after {
    right: 2rem; /* Правый отступ от края страницы */
    width: calc(15vw + 2rem); /* Полоса заканчивается до последнего элемента, оставляя отступы */
}

.navigation ul li {
    margin: 0 20px; /* Отступы между пунктами меню */
    position: relative;
    z-index: 1; /* Элементы поверх линии */
    background-color: transparent; /* Убираем фон для ясности */
}

.navigation ul li a.active {
    color: #fffffd; /* Белый цвет, как при наведении */
}

.navigation ul li a {
    color: #b4b4b4; /* Цвет текста ссылок */
    text-decoration: none; /* Убираем стандартные подчёркивания */
    font-size: 1.2rem; /* Размер текста */
    font-weight: bold; /* Жирность текста */
    text-transform: uppercase; /* Заглавные буквы */
    position: relative; /* Локальная позиция для z-index */
    z-index: 1; /* Ссылки выше полос */
    background-color: transparent; /* Убираем ненужные фоны */
}

.navigation ul li a:hover {
    color: #fffffd; /* Эффект наведения - более светлый текст */
}

/* Секция HERO */
.hero {
    height: 60vh; /* На весь экран */
    margin: 0;
    padding: 0; /* Убираем любые отступы */
    background: url('../images/hero-image.jpg') no-repeat center center/cover; /* Фон начинается с нуля */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10; /* Логотип больше */
}

.hero-content h1 {
    font-size: 5rem; /* 48px */
    margin: 10rem 0 0; /* Отступы вокруг заголовка */
    font-weight: normal; /* Обычный вес шрифта */
    line-height: 1.5; /* Межстрочный интервал */
    letter-spacing: 0.3rem; /* Межбуквенный интервал */
    text-transform: uppercase; /* Заглавные буквы */
}

.hero-content h2 {
    font-size: 1.7rem; /* 40px */
    font-weight: normal; /* Обычный вес шрифта */
    line-height: 1.3; /* Межстрочный интервал */
    margin: 2rem 0 3rem; /* Добавляем интервал между заголовком h2 и предыдущим элементом */
    letter-spacing: 0.1rem; /* Межбуквенный интервал */
}

/* Секция с изображением */
.image-section {
    display: none;
}

/* Секция с текстом и изображением */
.about-section {
    padding: 10px;
    line-height: 1.6; /* Удобочитаемость текста */
}

.about-content {
    width: 100%; /* Контейнер занимает всю ширину родителя */
    display: flex; /* Включаем Flexbox */
    flex-direction: row; /* Располагаем текст и изображение горизонтально */
    gap: 10px; /* Отступ между текстом и изображением */
    align-items: flex-start; /* Выравниваем текст и изображение по верхнему краю */
    margin-bottom: 0;
}

/* Левый текстовый блок */
.text-block {
    max-width: 42rem; /* Максимальная ширина секции */
    margin-left: 10rem; /* Отступ от левого края страницы */
    margin-right: auto; /* Остаточное пространство от правого края */
    color: #d0cece;
    text-align: justify;
    font-family: 'Rufina', serif;
    font-weight: normal;
    position: relative; /* Добавляем позиционирование, чтобы z-index сработал */
    z-index: 10; /* Текстовый блок будет поверх изображения */
}

.about-section .text-block h3 {
    display: block; /* Заголовок как блочный элемент */
    width: 100%; /* Заголовок растягивается на всю ширину родителя */
    text-align: center; /* Центрируем текст */
    font-size: 2rem; /* Изменяем размер текста */
    font-family: 'Rufina', serif;
    font-weight: normal; /* Задаём вес */
    margin: 2rem 0 2rem 0; /* Добавляем отступы сверху и снизу */
    padding: 0; /* Убираем возможное смещение */
    line-height: 1.4; /* Межстрочный интервал */
    color: #b8b6b6; /* Белый цвет */
    letter-spacing: 0.1rem; /* Интервал между буквами */
    z-index: 1;
}

/* Специфические стили для параграфов */
.text-block p {
    text-align: justify; /* Выравнивание по левому краю */
    padding: 0; /* Убираем внутренние поля */
    font-size: 1.3rem; /* Базовый размер текста */
    color: #777777; /* Светлый цвет текста */
    line-height: 1.8; /* Увеличенный межстрочный интервал */
    margin: 0 0 0 0; /* Отступ между абзацами */
}

.text-block ul {
    list-style: disc inside; /* Маркеры внутри текста */
    margin-left: 20px; /* Отступ слева */
    color: #d0cece; /* Цвет текста списка */
}

.text-block ul li {
    font-size: 1.2rem; /* Размер текста в списке */
    margin-bottom: 5px; /* Расстояние между пунктами списка */
}

/* Изображение с правой стороны */
.image-block {
    flex: 1 1 40%;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Добавляем позиционирование */
    z-index: 1; /* Изображение будет позади текста */
}

.image-block img {
    max-width: 100%;
    height: auto;
    margin: 5rem 0 0 0;
}

.text-image-block {
    display: flex; /* Используем flex для горизонтального расположения */
    align-items: center; /* Центрируем элементы по вертикали */
    margin: 0;
    padding: 0;
}

/* Левое изображение */
.left-image {
    flex: 0 0 auto; /* Фиксированный размер контейнера */
    display: flex; /* Центрируем содержимое внутри контейнера, если нужно */
    justify-content: left; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    width:57%; /* Контейнер занимает всю доступную ширину */
    height: 100%; /* Контейнер занимает всю доступную высоту */
    position: relative; /* Для взаимодействия с элементами текста */
    z-index: 1; /* Оставляем изображение ниже */
}

.left-image img {
    width: 100%; /* Растягиваем изображение по ширине контейнера */
    height: 100%; /* Растягиваем изображение по высоте контейнера */
    object-fit: fill; /* Сохраняем пропорции и заполняем контейнер */
    border-radius: 0; /* Убираем закругление краев */
}

/* Блок под изображением направо */
.text-block.under-image {
    margin-top: 4rem;
    flex: 1 1 60%;
    max-width: 60%; /* По ширине контейнера */
    margin-left: -18%; /* Выравниваем вправо */
    margin-right: 10rem; /* Центрируем */
    text-align: left; /* Выравнивание текста вправо */
    color: #e6e6e6;
    line-height: 1.6; /* Межстрочный интервал */
    position: relative; /* Текст поверх изображения */
    z-index: 2; /* Элемент текста выше изображения */

}

.text-block.under-image h4 {
    display: block; /* Заголовок как блочный элемент */
    width: 100%; /* Заголовок растягивается на всю ширину родителя */
    text-align: center; /* Центрируем текст */
    font-size: 2rem; /* Изменяем размер текста */
    font-family: 'Rufina', serif;
    font-weight: normal; /* Задаём вес */
    margin: 2rem 0 2rem 7rem; /* Добавляем отступы сверху и снизу */
    line-height: 1.4; /* Межстрочный интервал */
    color: #b8b6b6; /* Белый цвет */
    letter-spacing: 0.1rem; /* Интервал между буквами */
    z-index: 1;
}

.text-block.under-image p {
    flex: 1 1 auto;
    font-size: 1.3rem; /* Базовый размер текста */
    text-align: justify;
    color: #777777; /* Светлый цвет текста */
    line-height: 1.8; /* Увеличенный межстрочный интервал */
    margin: 0 0 0 15rem; /* Отступ между абзацами */
}
.text-block.under-image ul {
    list-style: disc inside; /* Маркеры внутри текста */
    margin-left: 0; /* Отступ слева */
    color: #e3e3e3; /* Цвет текста списка */
}

.text-block.under-image ul li {
    font-size: 1.3rem; /* Размер текста в списке */
    margin-bottom: 5px; /* Расстояние между пунктами списка */
}

.image-container {
      margin: 0 auto; /* Центрируем контейнер */
      width: 60vw; /* Ширина контейнера */
      height: auto; /* Высота определяется автоматически по содержимому */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Добавляем тень */
      display: flex; /* Flexbox для выравнивания */
      justify-content: center; /* Центрируем содержимое по горизонтали */
      align-items: center; /* Центрируем содержимое по вертикали */
}

.image-container img {
      max-width: 100%; /* Ограничиваем ширину изображения */
      height: auto; /* Сохраняем пропорции изображения */
      border: none; /* Убираем рамки */
      border-radius: 5px; /* Закругляем углы изображения (при необходимости) */
}

/* Кнопки переключения языков */
.language-switcher button {
    font-size: 1rem;
}

/* Секция с полосой и подписью */
.section-footer {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем содержимое */
    justify-content: center; /* Выравнивание по вертикали */
    margin: 3rem 0; /* Отступ сверху и снизу */
    position: relative;
}

.section-footer::before {
    content: ""; /* Полоса под текстом и изображением */
    display: block; /* Устанавливаем как блочный элемент */
    height: 0.05rem; /* Толщина полосы */
    background-color: white; /* Цвет полосы */
    position: absolute;
    top: 0; /* Располагаем поверх текста */
    width: 80%; /* Ширина полосы — 80% экрана */
    left: 50%; /* От центра экрана */
    transform: translateX(-50%); /* Центрируем по горизонтали */
}

.section-footer .footer-text {
    margin: 1.7rem; /* Отступ от полосы */
    font-size: 1rem; /* Размер шрифта */
    letter-spacing: 0.1rem; /* Немного пространства между буквами */
    color: #e3e3e3; /* Светлый серый цвет текста */
    text-align: center; /* Центрируем текст */
    font-family: 'Rufina', serif; /* Унифицированный шрифт */
}

.section-footer .footer-text span {
    display: block; /* Разбиваем строки (год и имя) */
    margin-top: 0.5rem; /* Отступ между строками */
}

/* Стили для мобильной навигации */
.mobile-menu {
    display: none; /* Скрываем мобильное меню по умолчанию */
    position: relative;
}

/* Скрываем список меню по умолчанию */
.mobile-menu-list {
    display: none;
}

/* Когда у меню появляется класс "active", отображаем его */
.mobile-menu-list.active {
    display: block;
}

/* Кнопка гамбургер */
.menu-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 1000;
}

/* Список мобильного меню */
.mobile-menu-list {
    position: absolute;
    top: 60px; /* Отступ сверху */
    right: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: black; /* Фон выпадающего меню */
    border: 1px solid white;
    border-radius: 5px;
    display: none; /* Скрываем список по умолчанию */
}

.mobile-menu-list li {
    margin: 0;
    padding: 10px 20px;
    border-bottom: 1px solid white;
}

.mobile-menu-list li:last-child {
    border-bottom: none; /* Убираем границу у последнего элемента */
}

.mobile-menu-list li a {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    text-transform: uppercase; /* Текст заглавными буквами */
}

.mobile-menu-list li a:hover {
    color: #e3e3e3; /* Цвет при наведении */
}

/* Для устройств шириной менее 1024px (планшеты) скрываем полосы */
@media (max-width: 1400px) {
    .logo img {
        animation: rotateLogo 7s linear infinite, pulseGlow 3s ease-in-out infinite; /* Вращение и пульсация всегда активны */
    }

    .navigation ul::before,
    .navigation ul::after {
        display: none; /* Полностью убираем полосы */
    }
}

/* Адаптивность */
@media (max-width: 768px) {
   .image-block {
        display: none;
    }
    .left-image {
      display: none;
    }

    .mobile-menu {
        display: block; /* Показываем мобильную навигацию */
        position: relative;z-index: 20; /* Устанавливаем индекс выше, чем у логотипа */
    }

    .image-section {
        display: block;
    }

    /* 1. Убираем обычную навигацию на смартфонах */
    .navigation {
        display: none; /* Скрываем основное меню */
    }

    /* 3. Верхнее изображение (hero) адаптируем */
    .hero {
        height: 60vh; /* На весь экран */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: url('../images/hero-image.jpg') no-repeat center center / cover; /* Фиксируем фон */
        text-align: center;
    }

    /* 2. Логотип выравниваем в центр */
    .logo {
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        margin: 15px 0 10px 0; /* Центрируем */
        display: block;
        text-align: center;
        z-index: 5;
    }

    .logo img {
           animation: rotateLogo 7s linear infinite, pulseGlow 3s ease-in-out infinite !important;
           max-height: 60px;
           transform-origin: center;
       }

    /* Переключатель языков */
    .language-switcher {
        top: 10px;
        left: 10px; /* Ближе к левому краю на мобильных */
    }

    .language-switcher button {
        font-size: 0.5rem; /* Меньше размер кнопок */
        padding: 4px 8px;
    }

    .hero-content h1 {
        font-size: 2rem; /* Уменьшенный размер заголовка */
        color: white;
        margin: 50px 0 20px 0;
        z-index: 10;
    }

    .hero-content h2 {
        font-size: 1.5rem;
        color: white;
        margin: 20px 10px 0 10px;
    }

     /* 5. Текстовые блоки адаптируем */
    .text-block {
        margin-top: -5rem; /* Отступ сверху меньше */
        margin-left: auto; /* Сброс позиций */
        margin-right: auto; /* Центрировать блок */
        max-width: 100%; /* Растягиваем текстовый блок на 90% ширины */
        text-align: justify; /* Текст остаётся выровненным */
        position: relative;
        padding: 15px;
    }

    .text-block h3 {
        text-align: left; /* Выравниваем текст по левому краю */
        position: static; /* Убираем относительное/абсолютное позиционирование */
        left: 0; /* Убираем сдвиг */
        transform: none; /* Сбрасываем горизонтальное смещение */
        margin: 0 10px 0 10px; /* Убираем лишние отступы */
    }

    /* 4. Нижнее изображение */
    .image-section img {
        width: 100%; /* Изображение на всю ширину */
        height: 70%;
        display: block;
    }

    .text-block.under-image {
        margin-top: 2rem; /* Отступ сверху меньше */
        margin-left: auto; /* Сброс позиций */
        margin-right: auto; /* Центрировать блок */
        max-width: 100%; /* Растягиваем текстовый блок на 90% ширины */
        text-align: justify; /* Текст остаётся выровненным */
        padding: 15px; /* Внутренние отступы для компактности */
        position: relative;
    }

    .text-block.under-image h4 {
        text-align: center;
        font-size: 1.5rem; /* Меньший размер заголовка */
        margin: 1.5rem 0 2rem 0; /* Уменьшенные отступы */
    }
    .text-block p {
        font-size: 1rem; /* Уменьшенный текст */
        line-height: 1.6; /* Уменьшенный межстрочный интервал */
        margin: 0; /* Убираем дополнительные отступы */
        padding: 15px;
    }

    .text-block.under-image p {
        font-size: 1rem; /* Уменьшенный текст */
        line-height: 1.6; /* Уменьшенный межстрочный интервал */
        margin: 0; /* Убираем дополнительные отступы */
    }

    /*Контейнер для изображения Lebenslauf*/
    .image-container {
      margin: 0 auto; /* Центрируем контейнер */
      width: 75vw; /* Ширина контейнера */
      height: auto; /* Высота определяется автоматически по содержимому */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Добавляем тень */
      display: flex; /* Flexbox для выравнивания */
      justify-content: center; /* Центрируем содержимое по горизонтали */
      align-items: center; /* Центрируем содержимое по вертикали */
    }

    /* 6. Полоса и текст внизу (footer) */
    .section-footer {
        margin-top: 20px;
        text-align: center;
    }

    .section-footer::before {
        width: 80%; /* На мобильных ширина также остаётся 80% */
        top: 0; /* Располагаем как и на десктопе */
    }

    .footer-text {
        margin-top: 10px;
        font-size: 0.9rem;
        color: #e3e3e3;
    }
}