/* WENTLEX — дополнения для запуска на домене (29.09.2026). Подключается после wentlex.css только в сборке
   для выгрузки (выгрузка/build_publish.py): видимые подписи «Visualisierung», ссылки Impressum и Datenschutz,
   юридические страницы. Основная версия этот файл не использует. */

/* Подпись «Visualisierung» на сгенерированных изображениях (первый экран, плитки направлений) */
.direction-media{position:relative}
.media-tag{position:absolute;z-index:3;top:12px;right:12px;padding:5px 8px 4px;background:rgba(21,37,54,.66);color:#fff;
  font-family:var(--f-label);font-weight:500;font-size:10px;line-height:1;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.hero > .media-tag{top:auto;right:var(--gutter);bottom:calc(var(--choices-h) + 14px);z-index:4}
.media-note{display:none;margin-top:12px;color:var(--muted)}
/* ≤900 px маленькие плитки — миниатюры около 130 px: вместо подписи на каждой — одна подпись под плитками */
@media (max-width:900px){.directions-bento>li:not(.is-lead) .media-tag{display:none}.media-note{display:block}}

/* Подвал: Impressum и Datenschutz */
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 22px}
.footer-legal a{color:inherit}
.footer-legal a:hover,.footer-legal a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.footer-bottom{flex-wrap:wrap}.footer-legal{order:3;width:100%}}

/* Форма заявки: ссылка на Datenschutz */
.anf-privacy a{text-decoration:underline;text-underline-offset:2px}

/* Юридические страницы (/impressum/, /privacy-policy/) */
.legal-page{min-height:100vh;display:flex;flex-direction:column}
.legal-top{background:var(--navy);color:#fff}
.legal-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.legal-top .brand{display:inline-flex;align-items:center;gap:10px}
.legal-top .brand img{filter:brightness(0) invert(1)}
.legal-top .brand-mark{height:26px;width:auto}
.legal-top .brand-word{height:18px;width:auto}
.legal-back{font-family:var(--f-label);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.legal-back:hover,.legal-back:focus-visible{text-decoration:underline;text-underline-offset:3px}
.legal-main{flex:1;padding-block:clamp(40px,6vw,88px)}
.legal-main .wrap{max-width:760px}
.legal-main h1{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,5vw,56px);line-height:1.05;margin-bottom:32px}
.legal-main h2{font-family:var(--f-label);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:36px 0 10px;color:var(--ink)}
.legal-main p,.legal-main li{color:var(--text);line-height:1.65;margin:0 0 10px}
.legal-main ul{list-style:disc;padding-left:22px}
/* 30.09.2026: подзаголовки длинной Datenschutzerklärung — мельче раздела не делаем, но и не крупнее H1 */
.legal-main h3{font-size:17px;font-weight:600;line-height:1.3;margin:26px 0 8px;color:var(--ink)}
.legal-main h4{font-size:15px;font-weight:600;line-height:1.35;margin:18px 0 6px;color:var(--ink)}
.legal-main h2{margin-top:48px}
.legal-main h1+h2{margin-top:0}
.legal-main a{color:var(--action);text-decoration:underline;text-underline-offset:2px}
.legal-bottom{background:var(--navy-deep);color:var(--on-dark-muted);font-size:13px}
.legal-bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:20px}
.legal-bottom a{color:inherit}
.legal-bottom a:hover,.legal-bottom a:focus-visible{color:#fff;text-decoration:underline}
.legal-bottom nav{display:flex;gap:22px}
/* 29.09, проверка на телефоне: на 375 px заголовок «Datenschutzerklärung» не помещался (страница уезжала вбок),
   а «Zur Startseite» наезжал на логотип. На узких экранах — заголовок мельче, ссылка переносится под логотип. */
@media (max-width:600px){
  .legal-top .wrap{flex-wrap:wrap;gap:6px 24px;padding-block:14px}
  .legal-main h1{font-size:clamp(24px,7.6vw,34px);overflow-wrap:break-word;hyphens:auto}
}
/* Черновик: данные, которые должен подтвердить заказчик. Сборка в режиме production не пропускает страницы с ними. */
mark.todo{background:#FFE58A;color:#3A2A00;padding:0 4px;font-style:normal}
.todo-box{border:2px dashed #C9A200;background:#FFF6CC;color:#3A2A00;padding:16px 20px;margin:0 0 28px}
.todo-box p,.todo-box li{color:#3A2A00}

/* 30.09: EN — заглушка (перевода пока нет); RU виден только на localhost */
.lang button[aria-disabled="true"]{cursor:default;opacity:.6}
.lang button[aria-disabled="true"]:hover{background:transparent}
.lang button[hidden]{display:none}

/* 30.09: ссылки в подсказке после отправки формы */
.anf-proto a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 30.09: форма — скрытое поле от спама и сообщение об ошибке отправки */
.anf-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.anf-fail{border-color:var(--action,#c0392b);color:var(--ink,#152536)}
.anf-fail:focus{outline:none}

/* 30.09.2026 — калькулятор на телефоне уезжал вправо на ~40–60 px (колонка сетки «1fr» растягивалась по самому
   длинному ряду: подпись + поле с числом). Колонка теперь не шире экрана, ряд «подпись + поле» переносится. */
@media(max-width:1000px){.calc{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
  .calc-row{flex-wrap:wrap;gap:6px 16px}
  .calc-in,.calc-out{padding:22px 20px}
}

/* 05.10.2026 — руководство: два блока подряд (решение пользователя). Второй блок зеркальный: текст слева, портрет справа.
   На телефоне (одна колонка) портрет в обоих блоках сверху. Между блоками — один отступ, а не два. */
.director--mirror{padding-top:0}
@media(min-width:901px){
  .director--mirror .director-layout{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
  .director--mirror .director-portrait{order:2}
}
@media(min-width:1600px){
  .director--mirror .director-layout{grid-template-columns:minmax(0,1fr) auto}
  /* 05.10, замечание пользователя «слишком крупно»: на больших экранах портрет был во всю высоту окна (до 1000 px),
     два таких блока подряд — слишком много. Теперь не выше 600 px, цитата чуть меньше. */
  .director-portrait{height:min(calc(100svh - var(--header-h) - 140px),600px)}
  .director-quote{font-size:clamp(40px,2vw,52px)}
  .director-layout{gap:clamp(48px,5vw,88px)}
}