/* ── FOOTER ───────────────────────────────────────────────── */
/* Футер всегда тёмно-синий в ОБЕИХ темах. Фолбэки прямо здесь, чтобы не зависеть
   от landing.css (вне лендинга он не подключён → футер белел, лого засвечивалось). */
.lf {
  --navy-deep: #1a2448;   /* тёмно-индиго в тон шапке (#243060→#1a2448), не графит */
  --white: #ffffff;
  --gold-lt: #f0cc6a;
  --muted: #9aa6c6;
  --border: rgba(255,255,255,0.10);
  background: var(--navy-deep);
  border-top: 1px solid var(--border);
  padding: 80px 80px env(safe-area-inset-bottom, 0px);  /* нижний воздух под home-bar/жесты */
  margin-top: 64px;   /* зазор между контентом/карточками и футером */
}
.lf__inner { max-width: 1200px; margin: 0 auto; }
.lf__grid {
  display: grid;
  /* Бренд шире, 3 равные колонки ссылок. minmax(0,...) не даёт длинным ссылкам распирать колонку. */
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 40px 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.lf__brand { min-width: 0; }
.lf__col { min-width: 0; }
.lf__logo { height: 48px; width: auto; margin-bottom: 20px; display: block; }
.lf__desc { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 280px; margin-bottom: 24px; }
.lf__support-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.lf__email { font-size: 13px; color: var(--gold-lt); text-decoration: none; word-break: break-word; }
.lf__email:hover { color: var(--white); }
.lf__col-title { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
/* Колонки ссылок — <details>, чтобы на телефоне сворачиваться (см. @media 480).
   В разметке они БЕЗ атрибута open: снять его через CSS нельзя, а добавить
   видимость — можно. Поэтому по умолчанию (десктоп) раскрываем содержимое сами.

   ЛОВУШКА (была здесь до 04.08.2026). Раньше стояло
       .lf__col:not([open]) > .lf__links { content-visibility: visible; ... }
   в расчёте на то, что content-visibility заставит закрытый <details>
   показать контент. Не заставляет: браузер прячет содержимое закрытого
   <details> на уровне САМОГО ЭЛЕМЕНТА (внутренний слот), и переопределять
   display/content-visibility у ПОТОМКА бесполезно. Замер 04.08.2026 в
   Chromium: колонки были невидимы на ВСЕХ ширинах (1600…420), то есть
   Impressum/Datenschutz/AGB (§ 5 DDG) не показывались вообще — при том,
   что в HTML они присутствовали и тесты разметки были зелёные.

   Способ «display:block на самом <details>» тоже НЕ работает — проверено
   04.08.2026, содержимое осталось невидимым (getComputedStyle показывал
   display:flex и visibility:visible, но elementFromPoint возвращал .lf__grid,
   то есть ссылки не участвовали в hit-testing).

   Вывод: раскрыть закрытый <details> средствами CSS нельзя в принципе.
   Поэтому атрибут open стоит В РАЗМЕТКЕ (десктоп раскрыт нативно), а на
   узких экранах его снимает footer_collapse.js — там же, где включается
   мобильный вид. CSS ниже отвечает только за внешний вид summary. */
.lf__col > summary { list-style: none; cursor: default; }
.lf__col > summary::-webkit-details-marker { display: none; }
.lf__col > summary::marker { content: ''; }
/* margin:0 + padding:0 убирают браузерный дефолт <ul> (padding-left:40px),
   из-за которого ссылки/строки уезжали вправо от заголовка колонки. */
.lf__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lf__links a {
  display: inline-block;
  font-size: 13px; line-height: 1.5;
  padding: 3px 0;            /* увеличенный тач-таргет, без сдвига вёрстки */
  color: var(--muted); text-decoration: none; transition: color 0.2s;
}
.lf__links a:hover { color: var(--white); }
.lf__compliance { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lf__compliance li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.lf__compliance svg { flex-shrink: 0; }
/* Платёжные знаки + оговорка о рынке (требование эквайера).
   Строка над нижней панелью: отделена рамкой, чтобы не сливаться со ссылками.
   Знаки на БЕЛОЙ подложке — Visa и Mastercard требуют размещать марку на
   светлом фоне, а футер у нас тёмный; без подложки синий Visa на тёмном
   читается плохо и нарушает правила обеих систем. */
.lf__pay { display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
/* Приём карт — своя строка: подпись + знаки. Оговорка про рф/рб идёт НИЖЕ
   отдельной строкой, иначе читается как связка одного с другим. */
.lf__pay-accept { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lf__pay-label { font-size: 12px; color: var(--muted); }
/* Подложка БЕЛАЯ в обеих темах — и это не упущение: сам футер принудительно
   тёмно-синий в light и dark (см. --navy-deep в начале файла), поэтому
   светлая плашка одинаково корректна везде. Тематических переопределений
   у .lf__pay-* нет намеренно. */
.lf__pay-marks { display: inline-flex; align-items: center; gap: 20px;
  background: #fff; border-radius: 6px; padding: 10px 16px; flex-shrink: 0; }
/* Высота знаков 38px (было 16 → 26 → 38). 26px всё ещё читались как мелкие:
   подпись рядом 12px, и знак терялся. Ширину НЕ задаём — width:auto держит
   родные пропорции файлов (Visa 1000×324.68 → 117px, MC 999.2×618 → 61px);
   любое ручное значение исказило бы марку, что обе системы запрещают.
   ЗАЗОР 20px, а не 10: у знака Mastercard в SVG нет пустых полей по краям
   (круги упираются в границу viewBox), у Visa поля есть — при равном gap
   MC визуально наезжал на Visa. */
.lf__pay-marks img { display: block; height: 38px; width: auto; }
.lf__pay-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.lf__bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; flex-wrap: wrap; gap: 12px; }
.lf__copy { font-size: 12px; color: var(--muted); }
/* Неприметный конвертик-ссылка на webmail (mail.lingverra.de) — как у Auditara */
/* Служебная ссылка на webmail: намеренно неброская (opacity .4), но кликабельная
   область доведена до 32px — иконка 11px пальцем не нажимается. */
.lf__mail-link { color: var(--muted); text-decoration: none; margin-left: 12px;
  opacity: 0.4; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; vertical-align: middle; }
.lf__mail-link:hover { opacity: 1; }
.lf__socials { display: flex; gap: 10px; margin-top: 16px; }
.lf__soc-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(196,144,32,.55); transition: background .15s, color .15s; }
.lf__soc-btn:hover { background: #c49020; color: #111827; }
.lf__langs { display: flex; gap: 18px; flex-wrap: wrap; }
.lf__langs a { font-size: 12px; color: var(--muted); text-decoration: none; letter-spacing: 0.05em; padding: 2px 0; transition: color 0.2s; }
.lf__langs a:hover { color: var(--white); }
/* Клавиатурная доступность — золотой контур только для tab-фокуса. */
.lf a:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 1024px) {
  .lf { padding: 60px 40px 0; }
  /* Бренд на всю ширину сверху, 3 колонки ссылок под ним — не ужимаем лого в полколонки. */
  .lf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .lf__brand { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 768px) {
  .lf { padding: 48px 24px 0; }
  .lf__grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .lf__brand { grid-column: 1 / -1; }
  .lf__logo { height: 40px; }
  /* Тач-цели: на десктопе шаг ссылок 31px (высота 26 + зазор 5) — пальцем легко
     промахнуться в соседнюю, а здесь рядом лежат ЮРИДИЧЕСКИЕ ссылки (Privacy,
     AGB, DPA), где открыть не тот документ особенно неприятно. Разводим до ~44px
     (Apple HIG): увеличенный gap + вертикальный padding самой ссылки. */
  .lf__links { gap: 10px; }
  .lf__links a { padding: 8px 0; }
  .lf__langs { gap: 20px; }
  .lf__langs a { padding: 8px 0; }
}
@media (max-width: 480px) {
  .lf { padding: 32px 18px 0; }
  .lf__grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 24px; }
  .lf__brand { max-width: none; margin-bottom: 20px; }

  /* ── Компактный футер ──────────────────────────────────────────────────────
     Замер 2026-08-03 (iPhone 14, 390px): футер занимал 1386px — 1.6 экрана,
     потому что 18 пунктов ссылок вставали в один столбец, а тач-цели по 44px
     (нужные, чтобы не промахнуться по юр-ссылкам) множили высоту.

     Решение — свернуть колонки, а не выбрасывать пункты: юр-документы
     обязательны по §5 DDG, клиентская перелинковка держит SEO. Ссылки
     остаются в HTML, просто не занимают экран, пока их не открыли. */
  .lf__col { border-top: 1px solid var(--border); }
  .lf__col > summary {
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    /* margin-bottom заголовка мешал бы в свёрнутом виде — гасим и даём padding,
       он же тач-цель на всю ширину строки. */
    margin: 0; padding: 15px 0;
  }
  /* Шеврон рисуем на ::after, без картинки и без JS. */
  .lf__col > summary::after {
    content: ''; width: 7px; height: 7px; flex-shrink: 0; margin-right: 4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s;
  }
  .lf__col[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
  .lf__col > .lf__links { padding-bottom: 8px; }

  /* Compliance не сворачиваем (это аргументы доверия, а не навигация), но
     раскладываем в 2 колонки: 4 строки по 12px → 2 ряда. */
  .lf__col--plain { border-top: 1px solid var(--border); padding: 15px 0 4px; }
  .lf__col--plain .lf__col-title { margin-bottom: 12px; }
  .lf__compliance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }

  .lf__bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 0 24px; }
  /* Языки — сетка, а не строка с gap 20px: 7 кодов переносились «лесенкой». */
  .lf__langs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
}
/* Блок, который здесь стоял («отменяем принудительное раскрытие»), удалён
   04.08.2026 вместе с самим раскрытием: оно не работало, а эта правка
   отменяла несуществующий эффект. Свернутость на мобильном обеспечивает
   снятие атрибута open (footer_collapse.js) — дальше <details> сворачивается
   сам, без участия CSS. */