/*
 * STIEBEL ELTRON — базовый визуальный стиль сайта.
 * Источник: Corporate Design Manual «Visual Identity», ноябрь 2020.
 *
 * Всё пространство имён с префиксом se: токены --se-*, классы .se-*,
 * стили элементов (h1, p, a, ul…) действуют только внутри обёртки .se,
 * поэтому файл не конфликтует с Bulma/Bootstrap.
 * Витрина: /styleguide/stiebel-brand.html
 */

:root {
    /* Первичные цвета (Primärfarben) */
    --se-red: #BA0C2F;          /* Rot — Pantone 200 C, CMYK 25/100/100/0 */
    --se-black: #000000;        /* Schwarz — Pantone Process Black C */
    --se-gray-dark: #808285;    /* Dunkelgrau — Pantone Cool Gray 9 */
    --se-gray: #909195;         /* Grau — Pantone Cool Gray 7 */
    --se-gray-light: #EDEDED;   /* Hellgrau — Pantone Cool Gray 1 */
    --se-white: #FFFFFF;

    /* Вторичные цвета (Sekundärfarben) — только для пояснений, не должны доминировать */
    --se-red-dark: #820008;     /* Pantone 1815 */
    --se-red-light: #F34F58;    /* Pantone 1785 */
    --se-blue-dark: #36759C;    /* Pantone 646 */
    --se-blue-light: #6BB2D4;   /* Pantone 278 */
    --se-green-dark: #007B4B;   /* Pantone 7726 */
    --se-green-light: #28AC72;  /* Pantone 2250 */
    --se-yellow-dark: #EBCF57;  /* Pantone 128 */
    --se-yellow-light: #FFE36E; /* Pantone 100 */
    --se-brown-dark: #A4906A;   /* Pantone 4256 */
    --se-brown-light: #D6C098;  /* Pantone 4003 */
    --se-gray-3: #D9D9D9;       /* Pantone Cool Gray 3 */

    /* Семантика */
    --se-text: var(--se-black);
    --se-text-muted: #5F6165;   /* затемнённый Dunkelgrau: контраст ≥ 4.5:1 на белом и Hellgrau */
    --se-bg: var(--se-white);
    --se-surface: var(--se-gray-light);
    --se-border: var(--se-gray-3);
    --se-accent: var(--se-red);
    --se-accent-hover: var(--se-red-dark);
    --se-link: var(--se-red);
    --se-link-hover: var(--se-red-dark);
    --se-focus: var(--se-red);

    /* Шрифт: корпоративный STEInfoText, замена — Fira Sans */
    --se-font: "STEInfoText", "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --se-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    /* Шкала размеров */
    --se-fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
    --se-fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
    --se-fs-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
    --se-fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
    --se-fs-h4: 1.25rem;
    --se-fs-h5: 1.125rem;
    --se-fs-h6: 1rem;
    --se-fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
    --se-fs-body: 1rem;
    --se-fs-small: 0.875rem;
    --se-fs-eyebrow: 0.8125rem;

    /* Отступы (шаг 4/8 px) */
    --se-space-1: 0.25rem;
    --se-space-2: 0.5rem;
    --se-space-3: 0.75rem;
    --se-space-4: 1rem;
    --se-space-5: 1.5rem;
    --se-space-6: 2rem;
    --se-space-7: 3rem;
    --se-space-8: 4rem;

    /* Линии: Haarlinie 1 / Basislinie 2 / Akzentlinie 4 */
    --se-line-hair: 1px;
    --se-line-base: 2px;
    --se-line-accent: 4px;

    --se-radius: 4px;
    --se-duration: 200ms;
}

/* ---------- Основа ---------- */

.se {
    font-family: var(--se-font);
    font-size: var(--se-fs-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--se-text);
    background-color: var(--se-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.se *::selection {
    background: var(--se-red);
    color: var(--se-white);
}

/* ---------- Заголовки ---------- */

.se :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--se-font);
    color: var(--se-text);
    margin: 0 0 0.5em;
    text-wrap: balance;
}

.se :where(h1) { font-size: var(--se-fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
.se :where(h2) { font-size: var(--se-fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.se :where(h3) { font-size: var(--se-fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.se :where(h4) { font-size: var(--se-fs-h4); font-weight: 600; line-height: 1.3; }
.se :where(h5) { font-size: var(--se-fs-h5); font-weight: 600; line-height: 1.35; }
.se :where(h6) { font-size: var(--se-fs-h6); font-weight: 600; line-height: 1.4; }

/* Классы — чтобы задать вид заголовка независимо от тега */
.se-display { font-size: var(--se-fs-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.se-h1 { font-size: var(--se-fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
.se-h2 { font-size: var(--se-fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.se-h3 { font-size: var(--se-fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.se-h4 { font-size: var(--se-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.se-h5 { font-size: var(--se-fs-h5); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.se-h6 { font-size: var(--se-fs-h6); font-weight: 600; line-height: 1.4; letter-spacing: 0; }

/* Надзаголовок — сдержанный красный акцент */
.se-eyebrow {
    display: block;
    margin: 0 0 var(--se-space-3);
    font-size: var(--se-fs-eyebrow);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--se-accent);
}

/* ---------- Текст ---------- */

.se :where(p) {
    margin: 0 0 var(--se-space-4);
}

.se-lead {
    font-size: var(--se-fs-lead);
    line-height: 1.55;
    color: var(--se-text);
}

.se-small,
.se :where(small, figcaption) {
    font-size: var(--se-fs-small);
    line-height: 1.5;
    color: var(--se-text-muted);
}

.se-muted { color: var(--se-text-muted); }
.se-measure { max-width: 68ch; }

.se :where(strong, b) { font-weight: 600; }

.se :where(a:not(.se-btn)),
.se-link {
    color: var(--se-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--se-duration) ease, text-decoration-thickness var(--se-duration) ease;
}

.se :where(a:not(.se-btn)):hover,
.se-link:hover {
    color: var(--se-link-hover);
    text-decoration-thickness: 2px;
}

.se :where(a:not(.se-btn)):focus-visible,
.se-link:focus-visible {
    outline: var(--se-line-base) solid var(--se-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Списки — красные квадратные маркеры */
.se :where(ul, ol) {
    margin: 0 0 var(--se-space-4);
    padding-left: 1.4em;
}

.se :where(ul) { list-style-type: square; }
.se :where(li) { margin-bottom: var(--se-space-2); }
.se :where(li)::marker { color: var(--se-accent); }
.se :where(ol > li)::marker { font-weight: 600; }

/* Цитата — акцентная линия 4 px */
.se :where(blockquote) {
    margin: var(--se-space-5) 0;
    padding: var(--se-space-1) 0 var(--se-space-1) var(--se-space-5);
    border-left: var(--se-line-accent) solid var(--se-accent);
    font-size: var(--se-fs-lead);
    font-weight: 500;
    line-height: 1.45;
}

.se :where(blockquote) :where(p) { margin-bottom: var(--se-space-2); }

.se :where(blockquote cite) {
    display: block;
    font-size: var(--se-fs-small);
    font-style: normal;
    font-weight: 400;
    color: var(--se-text-muted);
}

/* Разделитель — базовая линия 2 px */
.se :where(hr) {
    height: 0;
    margin: var(--se-space-6) 0;
    border: 0;
    border-top: var(--se-line-base) solid var(--se-border);
}

/* ---------- Кнопки ---------- */

.se-btn {
    --_bg: var(--se-red);
    --_fg: var(--se-white);
    --_bd: var(--se-red);
    --_bg-hover: var(--se-red-dark);
    --_fg-hover: var(--se-white);
    --_bd-hover: var(--se-red-dark);

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.625rem 1.5rem;
    margin: 0;
    font-family: var(--se-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    color: var(--_fg);
    background-color: var(--_bg);
    border: var(--se-line-base) solid var(--_bd);
    border-radius: var(--se-radius);
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--se-duration) ease, color var(--se-duration) ease,
                border-color var(--se-duration) ease, transform 100ms ease;
}

.se-btn:hover {
    color: var(--_fg-hover);
    background-color: var(--_bg-hover);
    border-color: var(--_bd-hover);
    text-decoration: none;
}

.se-btn:active { transform: translateY(1px); }

.se-btn:focus-visible {
    outline: var(--se-line-base) solid var(--se-focus);
    outline-offset: 3px;
}

.se-btn svg {
    flex: none;
    width: 1.25em;
    height: 1.25em;
}

/* Варианты */
.se-btn--primary { /* значения по умолчанию */ }

.se-btn--secondary {
    --_bg: var(--se-black);
    --_fg: var(--se-white);
    --_bd: var(--se-black);
    --_bg-hover: var(--se-red);
    --_bd-hover: var(--se-red);
}

.se-btn--outline {
    --_bg: transparent;
    --_fg: var(--se-text);
    --_bd: var(--se-text);
    --_bg-hover: var(--se-text);
    --_fg-hover: var(--se-bg);
    --_bd-hover: var(--se-text);
}

.se-btn--inverse {
    --_bg: var(--se-white);
    --_fg: var(--se-black);
    --_bd: var(--se-white);
    --_bg-hover: var(--se-gray-light);
    --_fg-hover: var(--se-black);
    --_bd-hover: var(--se-gray-light);
}

/* Текстовая кнопка со стрелкой */
.se-btn--ghost {
    --_bg: transparent;
    --_fg: var(--se-link);
    --_bd: transparent;
    --_bg-hover: transparent;
    --_fg-hover: var(--se-link-hover);
    --_bd-hover: transparent;
    padding-left: 0;
    padding-right: 0;
}

.se-btn--ghost:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}

.se-btn--ghost svg { transition: transform var(--se-duration) ease; }
.se-btn--ghost:hover svg { transform: translateX(4px); }

/* Размеры */
.se-btn--sm {
    min-height: 36px;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.se-btn--lg {
    min-height: 56px;
    padding: 0.875rem 2rem;
    font-size: 1.125rem;
}

.se-btn--block {
    display: flex;
    width: 100%;
}

/* Неактивное состояние */
.se-btn:disabled,
.se-btn[aria-disabled="true"] {
    color: var(--se-gray);
    background-color: var(--se-gray-light);
    border-color: var(--se-gray-light);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.se-btn--ghost:disabled,
.se-btn--ghost[aria-disabled="true"] {
    background-color: transparent;
    border-color: transparent;
}

/* Группа кнопок */
.se-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--se-space-3);
}

/* ---------- Поверхности: только белый, серый, чёрный (цветные фоны запрещены) ---------- */

.se-surface--light {
    --se-bg: var(--se-gray-light);
    background-color: var(--se-gray-light);
    color: var(--se-text);
}

.se-surface--dark {
    --se-text: var(--se-white);
    --se-text-muted: #A7A9AC;
    --se-bg: var(--se-black);
    --se-border: #3A3B3D;
    --se-accent: var(--se-red-light);
    --se-link: var(--se-red-light);
    --se-link-hover: var(--se-white);
    --se-focus: var(--se-red-light);
    background-color: var(--se-black);
    color: var(--se-text);
}

.se-surface--dark .se-btn:disabled,
.se-surface--dark .se-btn[aria-disabled="true"] {
    color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.12);
    border-color: transparent;
}

.se-surface--dark .se-btn--ghost:disabled,
.se-surface--dark .se-btn--ghost[aria-disabled="true"] {
    background-color: transparent;
}

/* ---------- Линии (Haarlinie / Basislinie / Akzentlinie) ---------- */

.se-rule {
    --_w: var(--se-line-base);
    --_dash: 8px;
    --_gap: 6px;
    display: block;
    height: var(--_w);
    border: 0;
    border-radius: var(--_w);
    background: currentColor;
    color: var(--se-gray-dark);
}

.se-rule--hair { --_w: var(--se-line-hair); }
.se-rule--accent { --_w: var(--se-line-accent); --_dash: 16px; --_gap: 12px; color: var(--se-red); }

.se-rule--dashed {
    border-radius: 0;
    background: repeating-linear-gradient(90deg,
        currentColor 0 var(--_dash),
        transparent var(--_dash) calc(var(--_dash) + var(--_gap)));
}

/* ---------- Цифра в круге (numerische Beschriftung) ---------- */

.se-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--se-red-light) 0%, var(--se-red-dark) 100%);
    color: var(--se-white);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .se-btn,
    .se-btn svg,
    .se :where(a),
    .se-link {
        transition: none;
    }
}