/*
 * STIEBEL ELTRON — визуальный стиль сайта по образцу stiebel-eltron.de.
 * Источник: дизайн-токены --sterl-* немецкого сайта (снимок 30.09.2026);
 * вторичные цвета — Corporate Design Manual «Visual Identity», ноябрь 2020.
 *
 * Те же имена, что в brand.css: токены --se-*, классы .se-*,
 * стили элементов (h1, p, a, ul…) действуют только внутри обёртки .se.
 * Файлы взаимозаменяемы — на странице подключается один из них.
 * Витрина: /styleguide/stiebel-brand-de.html
 */

:root {
    /* Бренд */
    --se-red: #BA0C2F;          /* brand-primary — Pantone 200 C */
    --se-red-dark: #820008;     /* наведение и нажатие — Pantone 1815 */
    --se-black: #000000;        /* brand-black */
    --se-white: #FFFFFF;        /* brand-white */

    /* Нейтральные — палитра немецкого сайта */
    --se-gray-dark: #555F62;    /* color-neutral-strong: линии, сильные рамки */
    --se-gray: #B9BFC1;         /* color-neutral-midi: рамки полей, неактивное */
    --se-gray-light: #F4F4F4;   /* background-subtle: светлые блоки */
    --se-gray-3: #D9D9D9;       /* color-neutral-subtle: разделители */

    /* Вторичные цвета брендбука — только для схем и диаграмм */
    --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-error: #E30613;        /* validation-invalid-strong */
    --se-error-bg: #FFF4F2;     /* background-error */
    --se-success: #28AC72;      /* validation-success-strong */
    --se-success-bg: #ECF9F7;   /* background-success */
    --se-warning: #FFE260;      /* validation-warning-strong */
    --se-sale-bg: #FFE3E4;      /* status-fill-sale, текст на нём — --se-red */

    /* Семантика */
    --se-text: #333333;                     /* general-text */
    --se-heading: var(--se-black);          /* general-headline */
    --se-text-muted: #6C6C6C;               /* general-text-subtle: 5.3:1 на белом, 4.8:1 на #F4F4F4 */
    --se-bg: var(--se-white);
    --se-surface: var(--se-gray-light);
    --se-border: var(--se-gray-3);          /* general-stroke-subtle */
    --se-accent: var(--se-red);             /* general-text-decorative */
    --se-accent-hover: var(--se-red-dark);
    --se-link: var(--se-black);             /* selection-action */
    --se-link-hover: var(--se-red);         /* selection-action-interact */
    --se-link-active: var(--se-red-dark);   /* selection-action-pressed */
    --se-disabled: var(--se-gray);          /* selection-fill-action-disabled */
    --se-focus: #005588;                    /* selection-inner-border-action-focus */

    /* Шрифты: на немецком сайте заголовки, кнопки и подписи — F2F OCRBczyk, текст — STEInfoText.
       Оба без кириллицы, замена — PT Sans */
    --se-font: "STEInfoText", "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --se-font-accent: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --se-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    /* Шкала: мобильный → десктоп (headline-min-* → headline-max-*), рост между 768 и 1280 px */
    --se-fs-display: clamp(2.5rem, 1.375rem + 2.344vw, 3.25rem); /* = h1: крупнее на немецком сайте нет */
    --se-fs-h1: clamp(2.5rem, 1.375rem + 2.344vw, 3.25rem);      /* 40 → 52 */
    --se-fs-h2: clamp(2rem, 1.25rem + 1.563vw, 2.5rem);          /* 32 → 40 */
    --se-fs-h3: clamp(1.5rem, 0.75rem + 1.563vw, 2rem);          /* 24 → 32 */
    --se-fs-h4: clamp(1.25rem, 0.875rem + 0.781vw, 1.5rem);      /* 20 → 24 */
    --se-fs-h5: clamp(1rem, 0.625rem + 0.781vw, 1.25rem);        /* 16 → 20 */
    --se-fs-h6: clamp(0.875rem, 0.6875rem + 0.391vw, 1rem);      /* 14 → 16 */
    --se-fs-lead: clamp(1.25rem, 0.875rem + 0.781vw, 1.5rem);    /* copy-big: 20 → 24 */
    --se-fs-body: 1rem;                                          /* copy-base */
    --se-fs-small: 0.875rem;                                     /* copy-small */
    --se-fs-eyebrow: 0.875rem;                                   /* copy-caption */
    --se-fs-button: 0.875rem;                                    /* interactive-button */
    --se-fs-stat: clamp(4rem, 1.75rem + 4.688vw, 5.5rem);        /* other-unit-big: 64 → 88 */

    /* Отступы (шаг 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: 0;             /* border-radius-default: углы прямые */
    --se-duration: 300ms;
    --se-ease: ease-in-out;     /* ease-sterl-hover */
}

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

.se {
    font-family: var(--se-font);
    font-size: var(--se-fs-body);
    font-weight: 400;
    line-height: 1.5;
    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-accent);
    font-weight: 400;
    color: var(--se-heading);
    margin: 0 0 0.5em;
    text-wrap: balance;
}

.se :where(h1) { font-size: var(--se-fs-h1); line-height: 1.15; letter-spacing: -0.02em; }
.se :where(h2) { font-size: var(--se-fs-h2); line-height: 1.2; letter-spacing: -0.02em; }
.se :where(h3) { font-size: var(--se-fs-h3); line-height: 1.25; letter-spacing: 0; }
.se :where(h4) { font-size: var(--se-fs-h4); line-height: 1.3; letter-spacing: -0.01em; }
.se :where(h5) { font-size: var(--se-fs-h5); line-height: 1.4; letter-spacing: 0.01em; }
.se :where(h6) { font-size: var(--se-fs-h6); line-height: 1.4; letter-spacing: 0.01em; }

/* Классы — чтобы задать вид заголовка независимо от тега */
.se-display,
.se-h1, .se-h2, .se-h3, .se-h4, .se-h5, .se-h6 {
    font-family: var(--se-font-accent);
    font-weight: 400;
    color: var(--se-heading);
}

.se-display { font-size: var(--se-fs-display); line-height: 1.15; letter-spacing: -0.02em; }
.se-h1 { font-size: var(--se-fs-h1); line-height: 1.15; letter-spacing: -0.02em; }
.se-h2 { font-size: var(--se-fs-h2); line-height: 1.2; letter-spacing: -0.02em; }
.se-h3 { font-size: var(--se-fs-h3); line-height: 1.25; letter-spacing: 0; }
.se-h4 { font-size: var(--se-fs-h4); line-height: 1.3; letter-spacing: -0.01em; }
.se-h5 { font-size: var(--se-fs-h5); line-height: 1.4; letter-spacing: 0.01em; }
.se-h6 { font-size: var(--se-fs-h6); line-height: 1.4; letter-spacing: 0.01em; }

/* Надзаголовок (copy-caption): прописные с разрядкой, красный */
.se-eyebrow {
    display: block;
    margin: 0 0 var(--se-space-3);
    font-family: var(--se-font-accent);
    font-size: var(--se-fs-eyebrow);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--se-accent);
}

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

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

.se-lead {
    font-size: var(--se-fs-lead);
    line-height: 1.5;
    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: 700; color: var(--se-heading); }
/* Жирный текст внутри ссылки берёт цвет ссылки (в т.ч. hover/active) */
.se :where(a) :where(strong, b) { color: inherit; }

/* Ссылки в тексте — чёрные с подчёркиванием: цвет #000 на тексте #333 сам по себе не отличить */
.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) var(--se-ease);
}

.se :where(a:not(.se-btn, .se-link)):hover {
    color: var(--se-link-hover);
}

.se :where(a:not(.se-btn, .se-link)):active {
    color: var(--se-link-active);
}

/* Отдельная ссылка — как на немецком сайте: без подчёркивания,
   при наведении линия 1 px проявляется слева направо */
.se-link {
    color: var(--se-link);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0 1px;
    transition: color var(--se-duration) var(--se-ease), background-size var(--se-duration) var(--se-ease);
}

.se-link:hover,
.se-link:focus-visible {
    color: var(--se-link-hover);
    background-position: 0 100%;
    background-size: 100% 1px;
}

.se-link:active {
    color: var(--se-link-active);
}

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

/* Списки — красные квадратные маркеры */
.se :where(ul, ol) {
    margin: 0 0 var(--se-space-5);
    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: 700; }

/* Цитата — красная линия 2 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-base) solid var(--se-red);
    font-family: var(--se-font-accent);
    font-size: var(--se-fs-lead);
    font-weight: 400;
    line-height: 1.4;
    color: var(--se-heading);
}

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

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

/* Разделитель — волосная линия 1 px */
.se :where(hr) {
    height: 0;
    margin: var(--se-space-6) 0;
    border: 0;
    border-top: var(--se-line-hair) 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.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    margin: 0;
    font-family: var(--se-font-accent);
    font-size: var(--se-fs-button);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--_fg);
    background-color: var(--_bg);
    border: var(--se-line-hair) solid var(--_bd);
    border-radius: var(--se-radius);
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--se-duration) var(--se-ease), color var(--se-duration) var(--se-ease),
                border-color var(--se-duration) var(--se-ease);
}

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

/* Нажатие — как наведение, если вариант не задал своё */
.se-btn:active {
    color: var(--_fg-active, var(--_fg-hover));
    background-color: var(--_bg-active, var(--_bg-hover));
    border-color: var(--_bd-active, var(--_bd-hover));
}

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

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

/* Стрелка при наведении — как у главной кнопки немецкого сайта.
   Разметка: <svg class="se-btn__arrow">…</svg><span class="se-btn__label">Текст</span>
   В покое подпись по центру, при наведении слева выезжает стрелка 12 px */
.se-btn > .se-btn__arrow {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: -0.75rem;
    opacity: 0;
    transform: translateX(-0.25rem);
    transition: opacity var(--se-duration) var(--se-ease), transform var(--se-duration) var(--se-ease);
}

.se-btn > .se-btn__label {
    margin-right: -0.5rem;
    transform: translateX(-0.5rem);
    transition: transform var(--se-duration) var(--se-ease);
}

.se-btn:hover > .se-btn__arrow,
.se-btn:focus-visible > .se-btn__arrow {
    opacity: 1;
    transform: none;
}

.se-btn:hover > .se-btn__label,
.se-btn:focus-visible > .se-btn__label {
    transform: none;
}

/* Варианты */
.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);
    --_bg-active: var(--se-red-dark);
    --_bd-active: var(--se-red-dark);
}

/* Контурная: красная рамка, чёрный текст; при наведении текст краснеет */
.se-btn--outline {
    --_bg: transparent;
    --_fg: var(--se-heading);
    --_bd: var(--se-red);
    --_bg-hover: transparent;
    --_fg-hover: var(--se-red);
    --_bd-hover: var(--se-red);
    --_fg-active: var(--se-red-dark);
    --_bd-active: var(--se-red-dark);
}

/* Белая — для тёмных блоков */
.se-btn--inverse {
    --_bg: var(--se-white);
    --_fg: var(--se-black);
    --_bd: var(--se-white);
    --_bg-hover: var(--se-gray-3);
    --_fg-hover: var(--se-black);
    --_bd-hover: var(--se-gray-3);
}

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

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

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

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

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

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

.se-btn--outline:disabled,
.se-btn--outline[aria-disabled="true"] {
    color: var(--se-disabled);
    background-color: transparent;
    border-color: var(--se-gray-3);
}

.se-btn--ghost:disabled,
.se-btn--ghost[aria-disabled="true"] {
    color: var(--se-disabled);
    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);
}

/* Чёрный блок (highlight немецкого сайта): белые заголовки, светло-серые текст и надзаголовки */
.se-surface--dark {
    --se-text: var(--se-gray-3);
    --se-heading: var(--se-white);
    --se-text-muted: var(--se-gray);
    --se-bg: var(--se-black);
    --se-border: #333333;
    --se-accent: var(--se-gray-3);
    --se-link: var(--se-white);
    --se-link-hover: var(--se-gray-3);
    --se-link-active: var(--se-gray);
    --se-focus: var(--se-white);
    background-color: var(--se-black);
    color: var(--se-text);
}

.se-surface--dark .se-btn--outline {
    --_bd: var(--se-white);
    --_bg-hover: var(--se-white);
    --_fg-hover: var(--se-black);
    --_bd-hover: var(--se-white);
    --_bg-active: var(--se-gray-3);
    --_fg-active: var(--se-black);
    --_bd-active: var(--se-gray-3);
}

.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;
}

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

/* ---------- Линии (Haarlinie / Basislinie / Akzentlinie): концы прямые ---------- */

.se-rule {
    --_w: var(--se-line-base);
    --_dash: 8px;
    --_gap: 6px;
    display: block;
    height: var(--_w);
    border: 0;
    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 {
    background: repeating-linear-gradient(90deg,
        currentColor 0 var(--_dash),
        transparent var(--_dash) calc(var(--_dash) + var(--_gap)));
}

/* Акцентная черта под заголовком раздела — 40 × 2 px */
.se-accent-bar {
    display: block;
    width: 2.5rem;
    height: var(--se-line-base);
    margin: var(--se-space-4) 0 var(--se-space-5);
    background: var(--se-red);
}

/* ---------- Цифра в квадрате (нумерация шагов) ---------- */

.se-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75em;
    height: 1.75em;
    background: var(--se-red);
    color: var(--se-white);
    font-family: var(--se-font-accent);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ---------- Крупная цифра (other-unit-big): годы, показатели ---------- */

.se-stat {
    display: block;
    font-family: var(--se-font);
    font-size: var(--se-fs-stat);
    font-weight: 400;
    line-height: 1;
    color: var(--se-accent);
}

@media (min-width: 768px) {
    .se-accent-bar { margin-top: var(--se-space-5); }
}

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