/* Раскладка секций варианта А. Брейкпоинты — tablet 45em и desktop 72em. */

/* ---------- Главная: первый экран — раскладка инструментов (hero-knolling.js) и живая картинка К2 (hero-live.js) ---------- */
/* «Уменьшить движение» или нет JS — неподвижная собранная раскладка без закрепления */
.hero-a { position: relative; background: var(--mist); }
.hero-a__stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; display: flex; flex-direction: column; }
/* Стол — под текстом на телефоне и планшете, справа от текста на компьютере; предметы ставит скрипт */
.hero-a__table { position: relative; z-index: 0; flex: 1; min-height: 0; margin: var(--sp-12) var(--gutter) var(--sp-28); }
.hero-a__flatlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-a__item { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; user-select: none; will-change: transform; animation: item-in-a 0.4s var(--ease); }
@keyframes item-in-a { from { opacity: 0; } }
.hero-a__k2 { display: none; }
/* Раскладка: секция закреплена; собранная картинка спрятана, пока скрипт не расставил предметы */
.hero-zoom .hero-a { height: 300vh; } /* доли прокрутки — hero-knolling.js */
/* dvh, а не svh: телефон прячет адресную строку — сцена растёт вместе с видимой областью, без полосы снизу */
.hero-zoom .hero-a__stage { position: sticky; top: 0; min-height: 0; height: 100dvh; }
.hero-zoom .hero-a__flatlay { visibility: hidden; }
/* Инструменты над холлом: разъезжаются и открывают его (hero-knolling.js); текст всё равно выше */
.hero-zoom .hero-a__table { z-index: 2; }
.hero-zoom .hero-a__k2 { display: block; position: absolute; z-index: 1; inset: 0; opacity: 0; background: var(--white); }
/* Окно холла рядом с текстом, границы — --panel-*. Верхний левый угол срезан под 45°, в срезе лаймовый уголок — как у знака T */
.hero-a__stage {
  --panel-t: calc(var(--copy-bottom, 50%) + 24px); --panel-r: var(--gutter); --panel-b: 20px; --panel-l: var(--gutter);
  --cut: 56px; --notch-gap: 16px;
}
.hero-a__media {
  position: absolute; overflow: hidden;
  top: var(--panel-t); right: var(--panel-r); bottom: var(--panel-b); left: var(--panel-l);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.hero-a__notch {
  position: absolute; width: var(--cut); height: var(--cut); background: var(--lime);
  top: var(--panel-t); left: var(--panel-l);
  clip-path: polygon(0 0, calc(100% - var(--notch-gap)) 0, 0 calc(100% - var(--notch-gap)));
}
.hero-a__poster, .hero-a__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 52%; }
/* Телефон: в вертикаль влезает ~четверть ширины кадра — держим в кадре уборщицу и мойщика окна (владелец 01.11.2026) */
@media (max-width: 44.99em) {
  .hero-a__stage { --panel-l: 12px; --panel-r: 12px; --panel-b: 12px; --cut: 44px; --notch-gap: 12px; }
  .hero-a__poster, .hero-a__video { object-position: 45% 52%; }
}
/* Телефон лёжа: по высоте окно под текстом не помещается — текст и окно рядом, как на компьютере */
@media (min-width: 72em), (orientation: landscape) and (max-height: 520px) {
  .hero-a__stage { --panel-t: calc(var(--header-h) + 16px); --panel-l: 46%; --panel-b: 32px; --cut: 96px; --notch-gap: 24px; }
  .hero-a__poster, .hero-a__video { object-position: 52% 52%; }
}
/* Видео проявляется только когда реально пошло — до этого виден постер того же кадра */
.hero-a__video { opacity: 0; transition: opacity 0.4s var(--ease); }
.hero-a__video.is-playing { opacity: 1; }
.hero-a__stage::before {
  content: ''; position: absolute; z-index: 1; inset: 0 0 auto; height: 62%; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0));
}
.hero-a__copy {
  /* order: в разметке стол раньше текста (так он ниже по слоям), а на телефоне текст — сверху */
  order: -1; position: relative; z-index: 2; width: 100%; padding: calc(var(--header-h) + clamp(var(--sp-16), 4vh, var(--sp-48))) var(--gutter) 0;
  max-width: 1120px; margin: 0 auto;
  text-align: center;
}
.hero-a__lead { max-width: 34em; margin: var(--sp-16) auto var(--sp-24); font-size: clamp(16px, 1.3vw, 19px); color: var(--navy-soft); }
/* Компьютер: текст слева по линии логотипа, стол справа; в холле кадр сдвинут вправо — уборщица и тележка не под текстом
   (решение владельца 31.10.2026, approvals.md) */
@media (min-width: 72em), (orientation: landscape) and (max-height: 520px) {
  .hero-a__stage::before {
    inset: 0 auto 0 0; width: 62%; height: auto;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0));
  }
  .hero-a__copy {
    /* по центру высоты флексом, не transform: transform копии ведёт скрипт, когда текст уходит */
    position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding-top: var(--header-h); padding-right: 0;
    width: 44%; max-width: none; margin: 0; text-align: left;
    /* 1200 и 20 — ширина плашки шапки и её левое поле: заголовок начинается под логотипом */
    padding-left: max(var(--gutter), calc((100% - 1200px) / 2 + var(--sp-20)));
  }
  .hero-a__title { font-size: clamp(40px, 3.9vw, 62px); }
  .hero-a__table { position: absolute; left: 46%; right: var(--gutter); top: calc(var(--header-h) + var(--sp-24)); bottom: var(--sp-32); margin: 0; }
  /* Уже 34em: на почти квадратном окне (1373×1257) конец строки ложился на голову уборщицы */
  .hero-a__lead { max-width: 30em; margin-left: 0; }
}
/* Широкий экран: заголовок стоит под логотипом и упирается в свой максимум, окно начинается за его длинным словом
   (550 — «Gebäudereinigung» при 62px, 24 — зазор). Иначе слово заходит на окно, с ~1510px */
@media (min-width: 92em) {
  .hero-a__stage { --panel-l: calc((100% - 1200px) / 2 + var(--sp-20) + 574px); }
  .hero-a__copy { width: var(--panel-l); }
  .hero-a__table { left: var(--panel-l); }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 71.99em) {
  .hero-a__title { font-size: clamp(24px, 4vw, 36px); }
  .hero-a__lead { margin: var(--sp-8) 0 0; font-size: 14px; }
}
/* Пауза ролика (петля дольше 5 с — WCAG 2.2.2): значок рисуется рамками, без картинок */
.hero-a__toggle {
  position: absolute; z-index: 2; left: calc(var(--panel-l) + 12px); bottom: calc(var(--panel-b) + 12px); width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.86); cursor: pointer;
}
.area-a__toggle {
  position: absolute; z-index: 2; top: var(--sp-12); right: var(--sp-12); width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.86); cursor: pointer;
}
.area-a__toggle:focus-visible { outline-color: var(--lime); }
.hero-a__toggle::before, .area-a__toggle::before {
  content: ''; position: absolute; left: 16px; top: 15px; width: 4px; height: 14px; box-sizing: content-box;
  border-left: 4px solid var(--navy); border-right: 4px solid var(--navy);
}
.hero-a__toggle.is-paused::before, .area-a__toggle.is-paused::before {
  left: 18px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--navy);
}
.hero-a__toggle:hover, .area-a__toggle:hover { background: var(--white); }
.hero-a__toggle[hidden], .area-a__toggle[hidden] { display: none; }
/* Подсказка «листайте» — пока заезд не начался */
.hero-a__hint {
  position: absolute; z-index: 2; left: 50%; bottom: 28px; width: 26px; height: 42px; margin-left: -13px;
  border: 1.5px solid rgba(255, 255, 255, 0.9); border-radius: 14px; background: rgba(19, 45, 58, 0.25);
  transition: opacity 0.3s var(--ease);
}
.hero-a__hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .hero-a__hint span { animation: hint-a 1.6s var(--ease) infinite; }
}
@keyframes hint-a { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
html:not(.hero-zoom) .hero-a__hint { display: none; }

/* ---------- Главная: услуги ---------- */
.services-a { padding: var(--space-section) var(--gutter); text-align: center; }
.services-a__title { max-width: 900px; margin: 0 auto var(--space-head); }

/* ---------- Главная: частные дома ---------- */

/* ---------- Порядок работы: две огромные строки на тёмно-синем ---------- */
.process { padding: var(--space-section) var(--gutter); background: var(--navy); color: var(--white); }
.process__inner { max-width: var(--max); margin: 0 auto; }
.process__title { margin-bottom: var(--sp-40); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.process__steps { margin: 0; padding: 0; list-style: none; }
.process__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(var(--sp-16), 3vw, var(--sp-40)); align-items: baseline; padding: var(--sp-28) 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.process__num { min-width: 1.4em; font-size: clamp(44px, 6vw, 88px); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: var(--lime); }
.process__step p { font-size: clamp(22px, 3vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; max-width: 18em; }

/* ---------- Kontakt: раскладка с настоящей прозрачностью, движение — kontakt-lay.js ---------- */
.kontakt-lay__item {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto;
  will-change: transform;
  translate: calc(var(--px, 0) * var(--d) * 8px) calc((var(--py, 0) * 8px - var(--sy, 0) * 48px) * var(--d));
  transition: transform 0.95s var(--ease) var(--delay), opacity 0.35s linear var(--delay), translate 0.35s ease-out;
}
.kontakt-lay.is-scattered .kontakt-lay__item {
  opacity: 0; transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-r)) scale(1.06);
}
.kontakt-lay__item--folder { --x: 34.05%; --y: 43.68%; --w: 41.80%; --d: 0.6; --delay: 0s; --from-x: 0%; --from-y: 45%; --from-r: -6deg; }
.kontakt-lay__item--notepad { --x: 2.99%; --y: 47.66%; --w: 32.88%; --d: 0.8; --delay: 0.08s; --from-x: -70%; --from-y: 40%; --from-r: -12deg; }
.kontakt-lay__item--envelope { --x: 26.89%; --y: 12.30%; --w: 46.16%; --d: 1; --delay: 0.16s; --from-x: 0%; --from-y: -80%; --from-r: 8deg; }
.kontakt-lay__item--phone { --x: 5.99%; --y: 10.03%; --w: 20.96%; --d: 1.4; --delay: 0.24s; --from-x: -90%; --from-y: -40%; --from-r: -14deg; }
.kontakt-lay__item--note { --x: 75.33%; --y: 68.16%; --w: 20.05%; --d: 1.2; --delay: 0.32s; --from-x: 90%; --from-y: 70%; --from-r: 18deg; }
/* Шнур обрезан краем исходного кадра: трубка стоит с запасом за край блока, чтобы обреза не было видно */
.kontakt-lay__item--handset { --x: 76.11%; --y: 7.62%; --w: 28.12%; --d: 0.5; --delay: 0.4s; --from-x: 95%; --from-y: -20%; --from-r: 12deg; transform-origin: 50% 40%; }
.kontakt-lay__item--handset.is-ringing { animation: kontakt-sway 1.7s ease-in-out 2; }
/* Входящий звонок на смартфоне: экран загорается, кнопка с трубкой, волны, телефон вибрирует. Без надписей */
.kontakt-lay__item--phone img { display: block; width: 100%; height: auto; }
.kontakt-lay__item--phone img { position: relative; z-index: 1; }
.kontakt-lay__item--phone.is-calling { animation: kontakt-buzz 0.9s ease-in-out infinite; }
/* Свечение — отдельный слой с прозрачностью: фильтр на движущемся предмете даёт артефакты на телефонах */
.kontakt-call__glow {
  position: absolute; inset: 9% 15%; border-radius: 13% / 6.6%; opacity: 0;
  box-shadow: 0 0 26px 8px rgba(184, 222, 24, 0.55);
  transition: opacity 0.25s linear;
}
.is-calling > .kontakt-call__glow { opacity: 1; }
.kontakt-call {
  position: absolute; z-index: 2; inset: 9.1% 16.4%; overflow: hidden; border-radius: 13% / 6.6%; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #2b6076, var(--navy) 72%);
  transition: opacity 0.25s linear;
}
.is-calling > .kontakt-call { opacity: 1; }
.kontakt-call__btn, .kontakt-call__wave {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1 / 1; margin: -23% 0 0 -23%; border-radius: 50%;
}
.kontakt-call__btn { display: grid; place-items: center; background: var(--lime); color: var(--navy); }
.kontakt-call__btn svg { width: 58%; height: auto; fill: currentColor; }
.kontakt-call__wave { border: 2px solid var(--lime); opacity: 0; }
.is-calling .kontakt-call__btn svg { animation: kontakt-ring 0.9s ease-in-out infinite; }
.is-calling .kontakt-call__wave { animation: kontakt-wave 1.4s ease-out infinite; }
.is-calling .kontakt-call__wave + .kontakt-call__wave { animation-delay: 0.47s; }
.is-calling .kontakt-call__wave + .kontakt-call__wave + .kontakt-call__wave { animation-delay: 0.94s; }
@keyframes kontakt-buzz {
  0%, 60%, 100% { rotate: 0deg; }
  10%, 30%, 50% { rotate: -0.9deg; }
  20%, 40% { rotate: 0.9deg; }
}
/* Настольная трубка: плавное покачивание, без рывков */
@keyframes kontakt-sway {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -1.4deg; }
  75% { rotate: 1.4deg; }
}
@keyframes kontakt-wave {
  0% { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(2.3); opacity: 0; }
}
@keyframes kontakt-ring {
  0%, 100% { rotate: 0deg; }
  12%, 37%, 62% { rotate: -5deg; }
  25%, 50%, 75% { rotate: 5deg; }
  88% { rotate: -2deg; }
}

/* ---------- Главная: район работы, карта улиц из OpenStreetMap ---------- */
.area-a { padding: var(--space-section) var(--gutter); }
/* Карта шире общей сетки (владелец 07.11.2026) */
.area-a__inner { --area-max: 1440px; position: relative; max-width: var(--area-max); margin: 0 auto; }
.area-a__map { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--navy); }
.area-a__map img { display: block; width: 100%; height: auto; }
/* Движение карты: karte-grow.js ставит навес, пока блок вне экрана; готовая карта остаётся в img под ним */
.area-a__map { --city-x: 46.97%; isolation: isolate; }
@media (min-width: 45em) { .area-a__map { --city-x: 52.7%; } }
.area-a__fx { position: absolute; inset: 0; z-index: 1; background: var(--navy); pointer-events: none; }
.area-a__fx canvas, .area-a__live { position: absolute; inset: 0; width: 100%; height: 100%; }
.area-a__live { z-index: 1; pointer-events: none; }
/* Точка на месте подписи: от неё идёт волна. Пока подпись на карте, закрыта ею */
.area-a__dot {
  position: absolute; z-index: 2; left: var(--city-x); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 3px solid var(--lime); border-radius: 50%; background: var(--white);
}
/* Города вокруг (владелец 07.11.2026): подписи поверх картинки, шрифт страницы в SVG из img не попадает.
   Появляются, когда карта выросла (karte-grow.js снимает is-towns-later); без движения видны сразу */
.area-a__towns { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 0.6s var(--ease); }
.area-a__map.is-towns-later .area-a__towns { opacity: 0; }
.area-a__town {
  --dot: 5px;
  position: absolute; left: var(--px); top: var(--py); display: flex; align-items: center; gap: 4px;
  margin-left: calc(var(--dot) / -2); transform: translateY(-50%);
  color: var(--white); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-shadow: 0 0 3px var(--navy), 0 0 3px var(--navy), 0 0 6px var(--navy);
}
.area-a__town::before { content: ''; flex: none; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--navy); }
.area-a__town--end { flex-direction: row-reverse; margin: 0 0 0 calc(var(--dot) / 2); transform: translate(-100%, -50%); }
/* На компьютере подпись вправо: влево она ушла бы под карточку текста */
@media (max-width: 44.99em) { .area-a__town--end-narrow { flex-direction: row-reverse; margin: 0 0 0 calc(var(--dot) / 2); transform: translate(-100%, -50%); } }
.area-a__town--city { margin-left: 11px; font-size: 13px; font-weight: 700; }
@media (max-width: 359px) { .area-a__town--roomy { display: none; } } /* на самых узких наезжает на соседнюю */
.area-a__town--city::before { display: none; }
@media (min-width: 45em) {
  .area-a__town { left: var(--wx); top: var(--wy); font-size: 13px; }
  .area-a__town--city { font-size: 15px; }
}
/* Подпись: постоянное место — над заголовком блока; на карте только её копия на время появления */
.area-a__city, .area-a__text .area-a__label {
  padding: var(--sp-8) var(--sp-12); border-radius: 999px; color: var(--navy); white-space: nowrap;
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
}
.area-a__city { position: absolute; z-index: 3; left: var(--city-x); top: 50%; margin: 0; background: var(--white); transform: translate(-50%, -50%); }
.area-a__text .area-a__label { width: fit-content; max-width: none; margin: 0 0 var(--sp-12); background: var(--lime); }
.area-a__inner.is-label-away .area-a__label { opacity: 0; }
@media print { .area-a__fx, .area-a__live, .area-a__city, .area-a__toggle { display: none; } .area-a__inner.is-label-away .area-a__label { opacity: 1; } }
/* Подпись об авторстве данных обязательна по лицензии OSM */
.area-a__credit {
  position: absolute; z-index: 2; right: var(--sp-8); bottom: var(--sp-8); padding: var(--sp-4) var(--sp-8); border-radius: 6px;
  background: rgba(255, 255, 255, 0.86); color: var(--navy); font-size: 11px; line-height: 1.4; text-decoration: none;
}
.area-a__credit:hover, .area-a__credit:focus-visible { text-decoration: underline; }
.area-a__text { margin-top: var(--sp-24); }
.area-a__text .headline-a { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: var(--sp-12); }
.area-a__text p { max-width: 34em; color: var(--navy-soft); }
@media (min-width: 64em) {
  .area-a__text {
    position: absolute; left: var(--sp-32); bottom: var(--sp-32); max-width: 460px; margin: 0;
    padding: var(--sp-28); border-radius: var(--radius); background: var(--white);
  }
}

/* ---------- Страницы услуг и Kontakt: первый экран с диорамой ---------- */
.page-hero { padding: calc(var(--header-h) + clamp(var(--sp-32), 6vw, var(--sp-64))) var(--gutter) 0; background: linear-gradient(#f5f8fa, var(--white)); }
.page-hero__inner { max-width: var(--max); margin: 0 auto; display: grid; gap: var(--sp-32); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 72em) { .page-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-56); } }
/* Manrope шире прежнего узкого шрифта: «Treppenhausreinigung» должно влезать в колонку целым словом,
   на телефоне — перенос по слогам, а не по букве */
.page-hero__title { font-size: clamp(30px, 3.3vw, 50px); -webkit-hyphens: auto; hyphens: auto; }
.page-hero__lead { margin: var(--sp-20) 0 var(--sp-28); max-width: 32em; font-size: clamp(16px, 1.3vw, 19px); color: var(--navy-soft); }
.page-hero__stage { position: relative; isolation: isolate; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--clay); }
.contact-lines { margin: calc(var(--sp-8) * -1) 0 var(--sp-28); padding: 0; list-style: none; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
.contact-lines li + li { margin-top: var(--sp-8); }
.contact-lines a { text-decoration: none; border-bottom: 2px solid var(--lime); }

/* ---------- Страница услуги: «Unsere Leistung» ---------- */
.leistung { padding: var(--space-section) var(--gutter); }
.leistung__inner { max-width: var(--max); margin: 0 auto; display: grid; gap: var(--sp-24) var(--sp-64); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 72em) { .leistung__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.leistung__title { font-size: clamp(38px, 5vw, 76px); }
.leistung__lead { font-size: clamp(21px, 2.2vw, 32px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.leistung__text p + p { margin-top: var(--sp-16); font-size: 18px; color: var(--navy-soft); }

/* ---------- Kontakt: адрес и район ---------- */
.adresse { padding: var(--space-section) var(--gutter); }
.adresse__inner { max-width: var(--max); margin: 0 auto; display: grid; gap: var(--sp-16); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 45em) { .adresse__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adresse__card { padding: var(--pad-card); border-radius: var(--radius); background: var(--mist); }
.adresse__title { margin-bottom: var(--sp-12); font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.adresse__card p { font-size: 18px; color: var(--navy-soft); }

/* ---------- Юридические страницы ---------- */
.legal { max-width: 860px; margin: 0 auto; padding: calc(var(--header-h) + clamp(var(--sp-40), 7vw, var(--sp-64))) var(--gutter) var(--space-section); }
.legal__title { font-size: clamp(30px, 6vw, 64px); margin-bottom: var(--sp-40); }
.legal__block + .legal__block { margin-top: var(--sp-32); }
.legal__block h2 { margin-bottom: var(--sp-8); font-size: 20px; font-weight: 700; }
.legal__block p { font-size: 17px; color: var(--navy-soft); }