/* Общие переменные и сброс настроек */

:root { 

    --blue: #1a365d; 

    --gray: #4a5568; 

    --light-gray: #e2e8f0; 

    --gold: #c5a059; 

    --white: #ffffff;

    --bg: #f8fafc;

}



body { 

    font-family: 'Inter', sans-serif; 

    margin: 0; 

    color: var(--gray); 

    background: var(--bg); 

    line-height: 1.6; 

}



/* Шапка (Header) */

header { 

    background: var(--white); 

    border-bottom: 1px solid var(--light-gray); 

    padding: 15px 20px; 

    display: flex; 

    justify-content: space-between; 

    align-items: center; 

}



header a { text-decoration: none; }



.logo-icon { 

    background: var(--blue); 

    color: var(--white); 

    width: 32px; height: 32px; 

    border-radius: 4px; 

    display: flex; align-items: center; justify-content: center; 

    font-weight: bold; font-size: 18px; margin-right: 10px; 

}



.logo-text { 

    font-weight: bold; color: var(--blue); 

    font-size: 20px; letter-spacing: 0.5px; 

}



nav ul { display: flex; list-style: none; margin: 0; padding: 0; }

nav li { margin-left: 25px; }

nav a { text-decoration: none; color: var(--gray); font-weight: 500; transition: color 0.2s; }

nav a:hover, nav a.active { color: var(--blue); }

nav a.active { border-bottom: 2px solid var(--blue); padding-bottom: 5px; }



/* Главная страница (Hero) */

.hero { padding: 60px 20px; text-align: center; max-width: 800px; margin: 0 auto; }

.hero h1 { color: var(--blue); font-size: 32px; margin-bottom: 20px; }

.content-box { text-align: left; background: var(--white); padding: 30px; border: 1px solid var(--light-gray); margin-top: 30px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

.cta-button { background: var(--blue); color: white; padding: 15px 30px; text-decoration: none; border-radius: 4px; display: inline-block; font-weight: bold; margin-top: 30px; transition: opacity 0.2s; }



/* Сетка каталога (Analytik/Wissen) */

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

.grid { 

    display: grid; 

    grid-template-columns: repeat(3, 1fr); 

    gap: 25px; 

    margin-top: 40px; 

}



.card { 

    background: var(--white); 

    border: 1px solid var(--light-gray); 

    border-radius: 8px; 

    padding: 25px; 

    text-decoration: none; 

    color: inherit; 

    transition: transform 0.2s, box-shadow 0.2s; 

    position: relative;

    display: flex;

    flex-direction: column;

}



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

.card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gold); }

.card h2 { color: var(--blue); margin-top: 10px; font-size: 19px; }

.tag { display: inline-block; background: #f1f5f9; color: var(--blue); font-size: 11px; font-weight: bold; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; margin-bottom: 10px; align-self: flex-start; }



/* Хлебные крошки (Breadcrumbs) */

.breadcrumb-nav { padding: 15px 5%; background: #f1f5f9; border-bottom: 1px solid var(--light-gray); font-size: 0.9rem; }

.breadcrumb-nav a { color: var(--blue); text-decoration: none; opacity: 0.8; }

.breadcrumb-nav span { color: #94a3b8; margin: 0 10px; }



/* Пагинация */

.pagination { margin-top: 50px; display: flex; justify-content: center; gap: 10px; }

.page-link { padding: 8px 16px; border: 1px solid var(--light-gray); border-radius: 4px; text-decoration: none; color: var(--blue); font-weight: bold; }

.page-link.active { background: var(--blue); color: var(--white); }



/* Адаптивность */

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

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



/* Подвал */

footer { text-align: center; padding: 40px; font-size: 13px; color: #444; border-top: 1px solid #eee; margin-top: 40px; }



.hero-section { 

    background: white; 

    border-bottom: 1px solid var(--light-gray); 

    padding: 60px 20px; 

    text-align: center; /* Центрирует текст внутри */

}



.hero-section h1 {

    max-width: 800px;    /* Ограничиваем ширину как на главной */

    margin: 0 auto 10px; /* Центрируем сам блок заголовка */

    color: var(--blue);

    font-size: 32px;

}



.hero-section p {

    max-width: 600px;    /* Ограничиваем ширину подзаголовка */

    margin: 0 auto;      /* Центрируем подзаголовок */

    color: #64748b;

}

/* Удерживает логотип в одну строку */

.logo-link {

    display: flex !important;

    align-items: center;

    text-decoration: none;

    white-space: nowrap; /* Запрещает перенос текста внутри логотипа */

}



/* Убеждаемся, что иконка не сжимается */

.logo-icon {

    flex-shrink: 0;

    background: var(--blue);

    color: var(--white);

    width: 32px;

    height: 32px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 18px;

    margin-right: 10px;

}

/*  Tables */

:root {

    --blue: #1a365d;

    --gold: #c5a059;

    --light-gray: #e2e8f0;

    --white: #ffffff;

    --text: #2d3748;

}



body {

    font-family: 'Inter', sans-serif;

    color: var(--text);

    line-height: 1.6;

    margin: 0;

    background-color: #f7fafc;

}



/* Header & Logo */

header {

    background: var(--white);

    border-bottom: 1px solid var(--light-gray);

    padding: 15px 5%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo-link {

    display: flex !important;

    align-items: center;

    text-decoration: none;

}



.logo-icon {

    background: var(--blue);

    color: var(--white);

    width: 32px;

    height: 32px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    margin-right: 10px;

}



.logo-text {

    font-weight: bold;

    color: var(--blue);

    font-size: 20px;

}



/* Navigation */

nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

}



nav ul li { margin-left: 25px; }



nav ul li a {

    text-decoration: none;

    color: #4a5568;

    font-weight: 500;

}



nav ul li a.active { color: var(--blue); font-weight: bold; }



/* Containers */

.main-container {

    max-width: 900px;

    margin: 40px auto;

    padding: 0 20px;

}



.content-box {

    background: var(--white);

    padding: 40px;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0,0,0,0.05);

}



/* ТАБЛИЦЫ - ИСПРАВЛЕНИЕ */

table {

    width: 100%;

    border-collapse: collapse;

    margin: 25px 0;

    background: var(--white);

}



table th, table td {

    border: 1px solid var(--light-gray);

    padding: 12px 15px;

    text-align: left;

}



table th {

    background: #f8fafc;

    color: var(--blue);

    font-weight: bold;

}



/* ЧЕК-ЛИСТ (Audit) */

.audit-box {

    background: var(--white);

    border: 2px solid var(--blue);

    padding: 25px;

    border-radius: 10px;

    margin: 30px 0;

}



.audit-box h3 {

    margin-top: 0;

    border-bottom: 2px solid var(--gold);

    padding-bottom: 10px;

    color: var(--blue);

}



.warning-note {

    background: #fff3cd;

    padding: 15px;

    border-left: 5px solid #ffc107;

    margin-top: 20px;

    font-weight: bold;

}



footer {

    text-align: center;

    padding: 40px 0;

    color: #718096;

    font-size: 14px;

}
/* Новое адаптивное меню-бургер */
@media (max-width: 768px) {
    /* 1. Защита от горизонтального скролла */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* 2. Шапка: Логотип слева, бургер справа */
    header {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 15px 20px !important; 
        position: relative;
    }

    .logo-link {
        margin-bottom: 0 !important;
        margin-right: auto !important; 
    }

    /* 3. Показываем кнопку-квадратик */
    .hamburger {
        display: block !important;
    }

    /* 4. Настройка выпадающего списка */
    nav ul {
        display: none; /* Скрыто до клика */
        position: absolute;
        top: 100%; 
        right: 20px;
        background: white;
        border: 1px solid var(--light-gray);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        padding: 15px;
        width: 200px;
        z-index: 1000;
        border-radius: 8px;
        list-style: none;
        margin: 0;
        flex-direction: column;
    }

    /* 5. Магия открытия при клике */
    #menu-toggle:checked ~ ul {
        display: flex !important;
    }

    nav li {
        margin: 10px 0 !important;
        margin-left: 0 !important;
    }
}
/* Стили для иконки-квадратика */
.hamburger {
    display: none; /* Скрыт на компьютере */
    cursor: pointer;
    width: 30px;
    height: 22px;
    position: relative;
    z-index: 1001;
}

/* Рисуем три полоски внутри квадратика */
.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--blue);
    margin-bottom: 5px;
    transition: 0.3s;
}

@media (max-width: 768px) {
    .hamburger {
        display: block; /* Показываем квадратик на мобильных */
    }

    /* Скрываем меню и превращаем его в выпадающий список */
    nav ul {
        display: none; 
        position: absolute;
        top: 60px;
        right: 20px;
        background: white;
        border: 1px solid var(--light-gray);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 15px;
        list-style: none;
        z-index: 1000;
        width: 180px;
    }

    nav li {
        margin: 10px 0 !important;
        margin-left: 0 !important;
    }

    /* МАГИЯ: когда чекбокс нажат, показываем меню */
    #menu-toggle:checked ~ ul {
        display: block;
    }
}