/* WENTLEX — основная страница (эксперимент 2). Разнесено из одного HTML 29.09.2026.
   Шрифты: Roboto, Roboto Condensed, Roboto Mono — SIL OFL 1.1; наборы latin / latin-ext / cyrillic. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-condensed-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-condensed-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-condensed-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-mono-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* ==========================================================================
   WENTLEX — Эксперимент 2 (Claude): редизайн главной по аудиту 24.09.2026
   Одна система: 2 светлые поверхности + тёмно-синяя, 1 вид кнопки,
   3 гарнитуры Roboto, синий = действие, красный = заливка кнопки при наведении.
   Палитра 28.09.2026 перенесена из эксперимента 3 (Opus 5.5): нейтральные
   цвета CFS — тёплый серый и Navy #1A3149; линии и маркеры — фирменный красный логотипа #D70D17
   (28.09, решение пользователя: вместо меди #CF6D46).
   ========================================================================== */
:root{
  /* Поверхности */
  --surface:#E7E4E0;        /* основная светлая — тёплая бумага CFS */
  --surface-2:#DFDBD6;      /* выделенная светлая (обращение руководителя) — карточка CFS */
  --navy:#1A3149;           /* тёмная поверхность — синий HTS */
  --navy-deep:#152536;      /* панели на тёмной, подвал в «Синем ритме» */
  --navy-line:rgba(255,255,255,.14);
  /* Текст */
  --ink:#152536;
  --text:#333333;           /* основной текст абзацев — графит CFS */
  --muted:#4D4D4D;          /* подписи — ≥5:1 на тёплом сером */
  --on-dark:#FFFFFF;
  --on-dark-muted:#A7B3C2;
  --line:rgba(21,37,54,.16);
  /* Роли цвета */
  --action:#0054AD;         /* всё, что нажимается */
  --accent:#D70D17;         /* фирменный красный логотипа: линии, маркеры, прогресс (28.09, вместо меди) */
  --accent-hover:#D70D17;   /* красный: заливка кнопки при наведении */
  --heading-2nd:#0054AD;    /* вторая мысль в двухчастном заголовке */
  --accent-ink:#1A3149;     /* подзаголовки карточек, подпись руководителя */
  --rail:#CCC8C3;           /* линия этапов */
  --dot-ring:var(--surface);
  /* Сетка и ритм */
  --gutter:clamp(20px,4vw,72px);
  --max:1480px;
  --header-h:72px;
  --section:clamp(64px,8vw,120px);
  --plate-gap:2px;
  /* Шрифты */
  --f-display:'Roboto Condensed','Arial Narrow',sans-serif;
  --f-text:'Roboto',system-ui,sans-serif;
  --f-label:'Roboto Mono',ui-monospace,monospace;
  /* Шкала */
  --fs-h1:clamp(38px,5.6vw,88px);
  --fs-h2:clamp(32px,4.2vw,64px);
  --fs-h3-list:clamp(26px,2.6vw,40px);
  --fs-h3-card:clamp(22px,2vw,30px);
  --fs-lead:clamp(17px,1.35vw,20px);
  --fs-body:16px;
  --fs-label:12px;
  --track-display:-.01em;
  --track-label:.08em;
  --ease:cubic-bezier(.45,0,.55,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
/* Плавная прокрутка Lenis: CSS из lenis/dist/lenis.css; пока Lenis включён, CSS-плавность выключена, иначе они спорят */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--f-text);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.skip{position:fixed;z-index:100;left:16px;top:-80px;padding:12px 16px;background:var(--action);color:#fff;font-family:var(--f-label);font-size:13px}
.skip:focus{top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.on-dark :focus-visible,.hero :focus-visible{outline-color:#fff}

/* ---------- Типографика ---------- */
.h1,.h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:var(--track-display);text-wrap:balance}
.h1{font-size:var(--fs-h1);line-height:1.02}
.h2{font-size:var(--fs-h2);line-height:1.04}
.h2 .second{display:block;color:var(--heading-2nd)}
.label{font-family:var(--f-label);font-weight:500;font-size:var(--fs-label);line-height:1.4;letter-spacing:var(--track-label);text-transform:uppercase}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--text);text-wrap:pretty}
.section{padding-block:var(--section)}
.section-head{margin-bottom:clamp(32px,4vw,56px)}
.section-head .label{display:block;margin-bottom:16px;color:var(--muted)}

/* ---------- Кнопка: один вид на всю страницу ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 24px;border:1px solid var(--action);background:var(--action);color:#fff;font-family:var(--f-label);font-weight:500;font-size:13px;letter-spacing:var(--track-label);text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color 160ms linear}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-hover);clip-path:polygon(0 0,-100% 0,0 100%,0 100%);transition:clip-path 700ms var(--ease)}
.btn:hover::before,.btn:focus-visible::before{clip-path:polygon(0 0,100% 0,200% 100%,0 100%)}
.btn:hover,.btn:focus-visible{border-color:var(--accent-hover)}
.btn .arrow{display:inline-block;transition:transform 160ms linear}
.btn:hover .arrow,.btn:focus-visible .arrow{transform:translateX(3px)}
.btn .arrow.ext{font-size:1.1em}
.btn:hover .arrow.ext,.btn:focus-visible .arrow.ext{transform:translate(2px,-2px)}
.btn--sm{min-height:44px;padding:0 18px;font-size:12px}
/* Второстепенная — только на фотографии, контурная */

/* ---------- Шапка ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:40;height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--line)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:7px;min-height:44px}
.brand-mark{height:26px;width:auto}
.brand-word{height:18px;width:auto}
.menu{display:flex;gap:8px}
.menu a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--navy)}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 160ms linear}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
.nav-end{display:flex;align-items:center;gap:8px}
/* Переключатель языка DE / RU */
.lang{display:inline-flex;flex:none;border:1px solid var(--line)}
.lang button{min-width:40px;min-height:44px;padding:0 10px;border:0;background:transparent;color:var(--navy);font-family:var(--f-label);font-weight:500;font-size:12px;letter-spacing:var(--track-label);cursor:pointer;transition:background-color 160ms linear,color 160ms linear}
.lang button:hover{background:rgba(21,37,54,.07)}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff}
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);background:transparent;cursor:pointer}
.menu-toggle span{position:relative;display:block;width:18px;height:1.5px;background:var(--navy);transition:background 160ms linear}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--navy);transition:transform 200ms var(--ease)}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{position:fixed;z-index:39;top:var(--header-h);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 24px 48px rgba(21,37,54,.18);padding:8px var(--gutter) 24px}
.mobile-nav[hidden]{display:none}
.mobile-nav a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:24px;color:var(--navy)}
.mobile-nav .btn{margin-top:24px;width:100%;justify-content:space-between}

/* ---------- Первый экран ---------- */
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;background:var(--navy);color:#fff}
.slides{position:absolute;inset:var(--header-h) 0 0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1200ms ease-in-out}
.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% center)}
.slide.active,.slide.is-leaving{animation:scene-zoom 4s linear both}
.slide.active{z-index:2;opacity:1}
.slide.is-leaving{z-index:1;opacity:1}
@keyframes scene-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.slides::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(26,49,73,.72) 0%,rgba(26,49,73,.46) 50%,rgba(26,49,73,.18) 100%),linear-gradient(0deg,rgba(26,49,73,.34),transparent 22%)}
.hero-inner{position:relative;z-index:4;height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 32px) 0 calc(var(--choices-h) + 32px)}
.hero{--choices-h:88px}
.hero-intro{max-width:1000px;animation:intro-in 1.6s var(--ease) both}
@keyframes intro-in{from{transform:translateX(calc(-100% - var(--gutter)))}to{transform:none}}
.hero .label{display:block;margin-bottom:20px;color:rgba(255,255,255,.88)}
.hero-copy{max-width:44ch;margin-top:32px;padding-left:20px;border-left:2px solid var(--accent);font-size:clamp(18px,1.45vw,23px);line-height:1.4;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-choices{position:absolute;z-index:5;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--navy);animation:choices-in 800ms var(--ease) 1.6s both}
@keyframes choices-in{from{visibility:hidden;transform:translateY(100%)}to{visibility:visible;transform:none}}
.hero-item{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:14px;min-height:var(--choices-h);padding:12px 20px;border:0;border-right:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;font-family:var(--f-text);font-size:15px;line-height:1.25;text-align:left;cursor:pointer}
.hero-item:last-of-type{border-right:0}
.hero-item::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--action);clip-path:polygon(0 0,-100% 0,0 100%,0 100%);transition:clip-path 700ms var(--ease)}
/* 05.10 (решение пользователя): кнопка текущей сцены сама синей не становится — заливка только под мышью
   и при фокусе с клавиатуры. Где мыши нет (телефон), нажатая кнопка по-прежнему залита: иначе выбор не виден. */
.hero-item:hover::before,.hero-item:focus-visible::before{clip-path:polygon(0 0,100% 0,200% 100%,0 100%)}
@media(hover:none){.hero-item[aria-pressed="true"]::before{clip-path:polygon(0 0,100% 0,200% 100%,0 100%)}}
.hero-item:focus-visible{outline-offset:-4px}
.hero-item svg{width:30px;height:30px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18)}
.hero-progress i{display:block;height:100%;width:0;background:var(--accent);animation:progress 4s linear infinite}
@keyframes progress{from{width:0}to{width:100%}}

/* ---------- Подход ---------- */
.approach-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0;row-gap:32px;align-items:start}
.approach-grid>.h2{grid-column:1 / span 7;padding-right:clamp(24px,3vw,48px)}
.approach-copy{grid-column:8 / span 5}
.approach-copy .lead+.lead{margin-top:20px}
.approach-copy .btn{margin-top:32px}

/* ---------- Направления ---------- */
.directions{padding-top:0}
.directions .wrap{padding-top:var(--section);border-top:1px solid var(--line)}
.directions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--plate-gap)}
.direction{display:flex;flex-direction:column;min-width:0;background:var(--navy);color:#fff}
.direction-media{aspect-ratio:16/9;overflow:hidden;background:var(--navy-deep)}
.direction-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03);transition:transform 900ms var(--ease)}
.direction-caption{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:16px;min-height:76px;padding:16px 20px;flex:1}
.direction-caption .num{font-family:var(--f-label);font-weight:500;font-size:12px;color:var(--on-dark-muted)}
.direction-caption h3{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3-card);line-height:1.1}
/* Только карточка-ссылка выглядит нажимаемой: синий = действие */
a.direction .direction-caption{background:var(--action)}
.directions-bento>li:not(.is-lead) a.direction .direction-caption{background:transparent}
.directions-bento>li:not(.is-lead) a.direction .direction-caption .num{color:var(--on-dark-muted)}
a.direction .direction-caption .num{color:rgba(255,255,255,.8)}
a.direction .direction-caption::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-hover);clip-path:polygon(0 0,-100% 0,0 100%,0 100%);transition:clip-path 700ms var(--ease)}
a.direction:hover .direction-caption::before,a.direction:focus-visible .direction-caption::before{clip-path:polygon(0 0,100% 0,200% 100%,0 100%)}
a.direction:hover .direction-media img,a.direction:focus-visible .direction-media img{transform:scale(1.03)}
.direction-go{margin-left:auto;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.direction-go .arrow{font-family:var(--f-text);font-size:22px;line-height:1}
/* ---------- Направления: бенто из шести плиток ----------
   Заказчик просит делать упор на промышленные объекты: «Industrie & Gewerbe» — крупная первая плитка 2×2,
   остальные пять — одинаковые. Уже 900 px: крупная плитка сверху, остальные — строки «картинка слева, название справа». */
.directions-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
.directions-bento>li{display:flex;min-width:0}
.directions-bento .direction{flex:1}
.directions-bento>li.is-lead{grid-column:1/span 2;grid-row:1/span 2}
.directions-bento .is-big .direction-media{position:relative;flex:1 1 0;aspect-ratio:auto;min-height:320px}
.directions-bento .is-big .direction-media img{position:absolute;inset:0}
.directions-bento .is-big .direction-caption{flex:none;min-height:92px;padding:20px 28px}
.directions-bento .is-big .direction-caption h3{font-size:var(--fs-h3-list)}
/* Крупная плитка переезжает под мышью: плавный переход через View Transitions (где поддерживается). */
::view-transition-group(wx-dir-1),::view-transition-group(wx-dir-2),::view-transition-group(wx-dir-3),::view-transition-group(wx-dir-4),::view-transition-group(wx-dir-5),::view-transition-group(wx-dir-6){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation:none}
@media(max-width:900px){
  .directions-bento{grid-template-columns:minmax(0,1fr)}
  .directions-bento>li.is-lead{grid-column:auto;grid-row:auto}
  .directions-bento .is-lead .direction-media{flex:none;aspect-ratio:16/9;min-height:0}
  .directions-bento .is-lead .direction-media img{position:static}
  .directions-bento>li:not(.is-lead) .direction{flex-direction:row}
  .directions-bento>li:not(.is-lead) .direction-media{flex:0 0 38%;aspect-ratio:16/10}
  .directions-bento>li:not(.is-lead) .direction-caption{min-height:0}
}
@media(max-width:700px){
  .directions-bento .is-lead .direction-caption{min-height:76px;padding:16px 20px}
  .directions-bento>li:not(.is-lead) .direction-caption{gap:12px;padding:12px 16px}
}

/* ---------- Услуги ---------- */
.on-dark{background:var(--navy);color:var(--on-dark)}
/* Четыре панели-«окна» (решение пользователя 28.09, по его референсам): большое ночное фото
   с уголками кадра и метками, справа номер, заголовок, текст и ссылка. Панели закреплены на одной
   высоте под шапкой, поэтому при обычной прокрутке каждая следующая наезжает на предыдущую — ничего
   не нужно нажимать, лишней прокрутки нет. Фото — сгенерированные визуализации, помечены «Visualisierung».
   Уже 900 px — обычные карточки: фото сверху, текст под ним. */
.svc-stack{display:grid;gap:24px;margin-top:clamp(8px,1vw,16px)}
.svc-panel{position:sticky;top:calc(var(--header-space) + 16px);display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr);height:clamp(500px,calc(100svh - var(--header-space) - 40px),800px);background:var(--navy-deep);border:1px solid rgba(255,255,255,.1);box-shadow:0 -28px 56px rgba(4,10,18,.45)}
.svc-media{position:relative;margin:0;overflow:hidden;background:#0B141E}
.svc-media img{display:block;width:100%;height:100%;object-fit:cover}
.svc-media::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(6,12,20,.55),rgba(6,12,20,0) 22%,rgba(6,12,20,0) 76%,rgba(6,12,20,.6))}
.svc-media::after{content:"";position:absolute;inset:16px;pointer-events:none;--c:rgba(255,255,255,.82);background:
  linear-gradient(var(--c),var(--c)) left top/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) left top/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) right top/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) right top/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) left bottom/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) right bottom/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1.5px 18px no-repeat}
.svc-tags{position:absolute;inset:0;pointer-events:none}
.svc-tag{position:absolute;left:46px;top:22px;font-family:var(--f-label);font-weight:500;font-size:11px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.svc-tag-end{top:auto;bottom:22px}
.svc-body{container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:clamp(24px,3vw,48px);border-left:1px solid rgba(255,255,255,.1)}
.svc-count{color:var(--on-dark-muted)}
.svc-title{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,3.4vw,58px);line-height:1.02;letter-spacing:var(--track-display);text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.svc-title{font-size:min(clamp(34px,3.4vw,58px),12cqi)}
.svc-main p{max-width:34ch;margin-top:20px;font-size:var(--fs-lead);line-height:1.55;color:#CFD6DF}
.svc-link{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;font-weight:500;text-decoration:none;transition:border-color .2s}
.svc-link .arrow{transition:transform .25s var(--ease)}
.svc-link:hover{border-bottom-color:#fff}
.svc-link:hover .arrow,.svc-link:focus-visible .arrow{transform:translateX(3px)}
/* Проба 05.10 (просьба пользователя): панели в шахматном порядке — у чётных фото справа, текст слева.
   Порядок в разметке прежний (фото, затем текст); на узких экранах (до 900 px) всё как было: фото сверху. */
@media(min-width:901px){
  .svc-panel:nth-child(even){grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
  .svc-panel:nth-child(even) .svc-media{order:2}
  .svc-panel:nth-child(even) .svc-body{border-left:0;border-right:1px solid rgba(255,255,255,.1)}
}
/* Проба 05.10 (просьба пользователя): глубина стопки. Пока следующая панель поднимается и закрывает эту,
   эта плавно тускнеет и чуть уменьшается. --svc-cover (0…1) ставит wentlex-page.js. */
@media(min-width:901px){
  .svc-panel{transform:scale(calc(1 - var(--svc-cover,0)*.05));transform-origin:50% 0}
  .svc-panel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#060C14;opacity:calc(var(--svc-cover,0)*.65)}
}
/* Проба 05.10 (просьба пользователя): последняя панель тоже «уходит назад» — следующий блок страницы
   (лента производителей и раздел за ней) поднимается и наезжает на неё, как панели друг на друга.
   Для этого в конце стопки оставлено место высотой в панель (пока оно прокручивается, панель стоит на месте),
   а раздел услуг на столько же укорочен снизу, поэтому лишней прокрутки нет. --svc-h — высота панели. */
@media(min-width:901px){
  .services{--svc-h:clamp(500px,calc(100svh - var(--header-space) - 40px),800px);padding-bottom:0;margin-bottom:calc(-1*var(--svc-h))}
  .svc-stack::after{content:"";height:var(--svc-h)}
  .services~.manufacturers,.services~.manufacturers+.section{position:relative;z-index:1;background:var(--surface)}
  .services+.manufacturers{box-shadow:0 -28px 56px rgba(4,10,18,.45)}
}
@media(max-width:900px){
  .svc-panel{position:static;height:auto;grid-template-columns:minmax(0,1fr);box-shadow:none}
  .svc-media{aspect-ratio:16/10}
  .svc-body{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
}
@media(max-width:700px){
  .svc-stack{gap:16px}
  .svc-tag{left:40px;top:20px;font-size:10px}
  .svc-tag-end{top:auto;bottom:20px}
}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Производители ---------- */
.manufacturers{padding-block:28px;border-bottom:1px solid var(--line)}
.manufacturers-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.manufacturers-track{display:flex;width:max-content;animation:loop 48s linear infinite}
.manufacturers-group{display:flex;align-items:center;justify-content:space-around;flex:none;min-width:100vw;gap:64px;padding:0 32px}
.manufacturers-group li{display:flex;align-items:center;justify-content:center;flex:0 0 150px;height:64px}
.manufacturers-group img{max-width:150px;max-height:40px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.62;mix-blend-mode:multiply;transition:filter 200ms linear,opacity 200ms linear}
.manufacturers-group img[data-brand="fenecon"]{background:var(--navy);padding:8px 10px;max-height:52px}
.manufacturers-group img[data-brand="energy3000"]{max-height:60px}
.manufacturers-group li:hover img{filter:none;opacity:1}
.manufacturers:focus-within .manufacturers-track{animation-play-state:paused}
@media(hover:hover){.manufacturers:hover .manufacturers-track{animation-play-state:paused}}
@keyframes loop{to{transform:translateX(-50%)}}

/* ---------- Gut zu wissen (решение пользователя 28.09) ----------
   Слева — ссылки на официальные источники, где всегда актуальные ставки и правила; справа — вопросы,
   которые снимают частые заблуждения. Намеренно без ставок, сроков окупаемости и прочих цифр, которые меняются. */
.wissen-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.source-list{display:grid;gap:var(--plate-gap);list-style:none}
.source-card{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:10px;padding:clamp(22px,2.4vw,32px);background:var(--navy);color:#fff;text-decoration:none}
.source-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--action);clip-path:polygon(0 0,-100% 0,0 100%,0 100%);transition:clip-path 700ms var(--ease)}
.source-card:hover::before,.source-card:focus-visible::before{clip-path:polygon(0 0,100% 0,200% 100%,0 100%)}
.source-card:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.source-name{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.4vw,36px);line-height:1.05;letter-spacing:var(--track-display)}
.source-text{max-width:44ch;font-size:15px;line-height:1.55;color:#CFD6DF}
.source-card:hover .source-text,.source-card:focus-visible .source-text{color:#fff}
.source-go{margin-top:4px;color:#8FB8EA;text-transform:none;letter-spacing:.04em}
.source-card:hover .source-go,.source-card:focus-visible .source-go{color:#fff}
.source-note{margin-top:14px;font-size:13px;color:var(--muted)}
.faq{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{position:relative;display:block;padding:26px 64px 26px 0;cursor:pointer;list-style:none;font-family:var(--f-display);font-weight:400;font-size:clamp(21px,1.8vw,27px);line-height:1.2;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before,.faq-item summary::after{content:"";position:absolute;right:14px;top:50%;width:18px;height:1.5px;background:currentColor;transition:transform .25s var(--ease)}
.faq-item summary::after{transform:rotate(90deg)}
.faq-item[open] summary::after{transform:rotate(0)}
.faq-item.is-closing summary::after{transform:rotate(90deg)}  /* 05.10: при плавном сворачивании ответа знак сразу становится плюсом */
.faq-item summary:hover,.faq-item[open] summary{color:#003F85}
.faq-item summary:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.faq-a{padding:0 64px 28px 0}
.faq-a p{max-width:62ch;font-size:var(--fs-lead);line-height:1.6;color:var(--text)}
.faq-a p+p{margin-top:12px}
@media(max-width:900px){
  .wissen-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .faq-item summary{padding:20px 48px 20px 0}
  .faq-a{padding-right:0}
}

/* ---------- Этапы работы: зигзаг с «токопроводом» (решение пользователя 28.09) ----------
   Этапы чередуются слева и справа; напротив текста — линейный рисунок одного и того же здания
   (замеры → разметка → монтаж → обслуживание). Этапы соединяет ломаная трасса с углами 45°, как дорожка
   на плате; её вертикали лежат на крайних линиях фоновой сетки. Прокрутка ведёт по трассе красный
   импульс, пройденная часть синяя (цвета логотипа). Без JavaScript и при уменьшении движения всё видно сразу. */
.jt{position:relative;margin-top:clamp(40px,5vw,72px)}
.jt-steps{position:relative;z-index:1;display:grid;row-gap:clamp(64px,7vw,112px);list-style:none}
.jt-step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;scroll-margin-top:calc(var(--header-space) + 32px)}
.jt-text{grid-column:1/span 5;grid-row:1;padding-left:clamp(36px,3.2vw,56px)}
.jt-vis{grid-column:7/span 6;grid-row:1;justify-self:center;width:min(100%,460px)}
.jt-step:nth-child(even) .jt-text{grid-column:8/span 5;padding-left:0;padding-right:clamp(36px,3.2vw,56px);text-align:right}
.jt-step:nth-child(even) .jt-vis{grid-column:1/span 6}
.jt-title{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3-list);line-height:1.12;color:var(--ink)}
.jt-num{display:inline-block;margin-right:16px;font-family:var(--f-label);font-size:12px;font-weight:500;letter-spacing:var(--track-label);color:var(--muted);vertical-align:.45em}
.jt-text p{max-width:46ch;margin-top:16px;font-size:var(--fs-lead);line-height:1.6;color:var(--text)}
.jt-step:nth-child(even) .jt-text p{margin-left:auto}
.jt-vis svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:#2A4461;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.jt-vis .f-front{fill:#DFDBD6}
.jt-vis .f-side{fill:#CFCAC4}
.jt-vis .f-top{fill:#E7E4E0}
.jt-vis .pv{fill:#2A4461;stroke:#7C93AC;stroke-width:1}
.jt-vis .plan{stroke:var(--action);stroke-dasharray:4 4}
.jt-vis .acc{stroke:var(--accent);stroke-width:2.4}
.jt-vis .gr{stroke:rgba(26,49,73,.35);stroke-width:1}
.jt-vis .dim{stroke:var(--action)}
.jt-vis .sig{stroke:var(--action);stroke-width:1.8}
/* Трасса */
.jt-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
.jt-base{stroke:var(--rail);stroke-width:1.5}
.jt-done{stroke:var(--action);stroke-width:2.5}
.jt-tail{stroke:var(--accent-hover);stroke-width:2.5;stroke-linecap:round}
.jt-pad{fill:var(--dot-ring);stroke:var(--rail);stroke-width:1.5;transition:fill .3s,stroke .3s}
.jt-pad.is-lit{fill:var(--action);stroke:var(--action)}
.jt-head{fill:var(--accent-hover)}
.jt-glow{fill:var(--accent-hover);opacity:0;transform-box:fill-box;transform-origin:center;animation:jt-glow 1.6s ease-out infinite}
@keyframes jt-glow{from{transform:scale(.45);opacity:.45}to{transform:scale(1.5);opacity:0}}
.jt-ping{fill:none;stroke:var(--accent-hover);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:jt-ping .9s ease-out both}
@keyframes jt-ping{from{transform:scale(1);opacity:.9}to{transform:scale(2.8);opacity:0}}
.jt:not(.is-live) :is(.jt-head,.jt-glow,.jt-tail){display:none}
/* Появление этапов (только с JavaScript и без уменьшения движения) */
.jt.is-armed .jt-text{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.jt.is-armed .jt-step:not(.is-seen) .jt-text{opacity:0;transform:translateX(-28px)}
.jt.is-armed .jt-step:nth-child(even):not(.is-seen) .jt-text{transform:translateX(28px)}
.jt.is-armed .jt-vis .ln{transition:stroke-dashoffset 1.3s var(--ease)}
.jt.is-armed .jt-step:not(.is-seen) .jt-vis .ln{stroke-dashoffset:var(--len)}
.jt.is-armed .jt-vis .fill{transition:fill-opacity .7s .5s}
.jt.is-armed .jt-step:not(.is-seen) .jt-vis .fill{fill-opacity:0}
.jt.is-armed .jt-vis :is(.plan,.sig){transition:opacity .5s .8s}
/* обратно (прокрутка вверх) — быстрее и без задержек */
.jt.is-armed .jt-step:not(.is-seen) .jt-text{transition-duration:.35s,.45s}
.jt.is-armed .jt-step:not(.is-seen) .jt-vis .ln{transition-duration:.6s}
.jt.is-armed .jt-step:not(.is-seen) .jt-vis .fill{transition:fill-opacity .3s}
.jt.is-armed .jt-step:not(.is-seen) .jt-vis :is(.plan,.sig){transition:opacity .25s}
.jt.is-armed .jt-step:not(.is-seen) .jt-vis :is(.plan,.sig){opacity:0}
@media(max-width:900px){
  .jt-step{display:block}
  .jt-text,.jt-step:nth-child(even) .jt-text{padding-left:36px;padding-right:0;text-align:left}
  .jt-step:nth-child(even) .jt-text p{margin-left:0}
  .jt-vis{margin:28px 0 0 36px;width:min(calc(100% - 36px),420px)}
  .jt.is-armed .jt-step:nth-child(even):not(.is-seen) .jt-text{transform:translateX(-28px)}
}
@media(max-width:700px){
  .jt-text p{margin-top:12px}
  .jt-num{margin-right:12px}
}

/* ---------- Обращение руководителя ---------- */
.director{background:var(--surface-2)}
.director-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:clamp(40px,6vw,96px);align-items:center}
.director-portrait{aspect-ratio:4/5;overflow:hidden;background:#CCC8C3}
.director-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.director-quote{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3vw,46px);line-height:1.22;letter-spacing:var(--track-display);color:var(--ink);text-wrap:pretty}
.director-quote p+p{margin-top:24px}
.director-attribution{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.director-company{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3-card);line-height:1.1;letter-spacing:var(--track-display);color:var(--accent-ink)}
.director-role{margin-top:10px;font-family:var(--f-label);font-weight:500;font-size:13px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.director-signature{width:clamp(190px,15vw,240px);height:auto;aspect-ratio:220/80;color:var(--accent-ink)}
/* Подпись «пишется» один раз, когда блок появляется на экране: каждый штрих прорисовывается
   по длине, штрихи идут друг за другом, как рукой. Без JavaScript и при уменьшении движения
   подпись просто видна. */
.director-signature.will-sign path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.director-signature.will-sign.is-signed path{animation:sign var(--dur) cubic-bezier(.55,.1,.35,1) var(--delay) forwards}
@keyframes sign{to{stroke-dashoffset:0}}
.director .btn{margin-top:32px}
/* ---------- Обращение руководителя: закрепление и «заливка» цитаты при прокрутке (решение пользователя 28.09) ----------
   Блок подъезжает с серой цитатой и встаёт по центру экрана; цитата сама по словам становится чёрной,
   затем рисуется подпись; после короткой остановки блок уходит дальше. Серый ещё не прочитанных слов светлый, как в концепте Opus 5.5
   (решение пользователя: разница должна быть заметна; контраст серого к фону около 1,7:1). На узких и низких экранах — без закрепления, заливка стартует, когда цитата поднялась выше середины окна.
   Без JavaScript и при уменьшении движения цитата сразу чёрная, подпись видна. */
.director{--quote-rest:#ADA9A4}
html[data-bg="blue"] .director{--quote-rest:rgba(255,255,255,.28)}
.director.is-pinned .director-track{height:calc(var(--dh,0px) + var(--run,0px))}
.director.is-pinned .director-layout{position:sticky;top:var(--pin-top,0px)}
.director-quote.is-scrub .w{color:var(--quote-rest);transition:color .35s linear}
.director-quote.is-scrub.is-filled .w{color:var(--ink);transition-delay:calc(var(--i,0) * 85ms)}
.director-quote.is-scrub.is-instant .w{transition:none}

/* ---------- Подвал ---------- */
.site-footer{padding:clamp(56px,6vw,80px) 0 16px}
.footer-main{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);padding-bottom:56px}
.footer-label{margin-bottom:20px;color:var(--on-dark-muted)}
.footer-email{display:flex;width:fit-content;align-items:baseline;gap:16px;min-height:44px;font-family:var(--f-display);font-size:clamp(30px,3.4vw,52px);line-height:1.12;letter-spacing:-.015em}
.footer-email .arrow{font-family:var(--f-text);font-size:.6em;transition:transform 160ms linear}
.footer-email:hover .arrow,.footer-email:focus-visible .arrow{transform:translateX(4px)}
.footer-phone{display:flex;width:fit-content;align-items:center;min-height:44px;margin-top:8px;font-size:18px}
.footer-location address{font-style:normal;font-size:16px;line-height:1.8;color:#CFD6DF}
.footer-nav a{display:flex;align-items:center;min-height:44px;font-size:16px;border-bottom:1px solid var(--navy-line)}
.footer-nav a:first-of-type{border-top:1px solid var(--navy-line)}
.footer-phone:hover,.footer-nav a:hover,.footer-top:hover{text-decoration:underline;text-underline-offset:5px}
.footer-brand{display:flex;align-items:center;gap:clamp(16px,3vw,44px);padding:40px 0;border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line)}
.footer-brand img{filter:brightness(0) invert(1);height:auto;min-width:0}
.footer-brand-mark{width:17%;max-height:125px;object-fit:contain}
.footer-brand-word{flex:1;width:0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:12px;font-size:13px;color:var(--on-dark-muted)}
.footer-top{display:inline-flex;align-items:center;gap:12px;min-height:44px}

/* ---------- Калькулятор выработки (перенесён из Sonnwerk в систему этой пробы) ---------- */
.calc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.calc-head .label{display:block;margin-bottom:16px;color:var(--muted)}
.calc-head .lead{max-width:46ch}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--plate-gap)}
.calc-in{display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:clamp(24px,3vw,48px);background:var(--surface-2)}
.calc-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line)}
.calc-tabs button{min-height:52px;padding:8px 10px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--navy);font-size:14px;line-height:1.25;hyphens:manual;cursor:pointer;transition:background-color 160ms linear,color 160ms linear}
.calc-tabs button:last-child{border-right:0}
.calc-tabs button:hover{background:rgba(21,37,54,.06)}
.calc-tabs button[aria-pressed="true"]{background:var(--navy);color:#fff}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.calc-row label,.calc-lbl{font-size:15px;color:var(--ink)}
.calc-row output{font-family:var(--f-text);font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.calc input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.calc input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--navy) var(--v,50%),rgba(21,37,54,.2) var(--v,50%))}
.calc input[type=range]::-moz-range-track{height:2px;background:rgba(21,37,54,.2)}
.calc input[type=range]::-moz-range-progress{height:2px;background:var(--navy)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;background:var(--accent);border:5px solid var(--navy);transition:transform 160ms linear}
.calc input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:0;background:var(--accent);border:5px solid var(--navy)}
.calc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.calc input[type=range]:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.calc-regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.calc-regions button{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;text-align:left;cursor:pointer;transition:border-color 160ms linear,background-color 160ms linear}
.calc-regions small{font-family:var(--f-label);font-size:11px;color:var(--muted);white-space:nowrap}
.calc-regions button[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:rgba(255,255,255,.45)}
.calc-toggles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.calc-tgl{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:border-color 160ms linear,background-color 160ms linear}
.calc-tgl[hidden]{display:none}
.calc-tgl b{display:block;font-weight:400;font-size:15px}
.calc-tgl small{display:block;font-size:13px;color:var(--muted)}
.calc-tgl[aria-checked="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:rgba(255,255,255,.45)}
.calc-sw{position:relative;flex:none;width:40px;height:22px;background:rgba(21,37,54,.22);transition:background-color 200ms linear}
.calc-sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;transition:transform 300ms var(--ease),background-color 200ms linear}
.calc-tgl[aria-checked="true"] .calc-sw{background:var(--navy)}
.calc-tgl[aria-checked="true"] .calc-sw::after{transform:translateX(18px);background:var(--accent)}
.calc-out{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:clamp(24px,3vw,48px);background:var(--navy);color:var(--on-dark)}
.calc-out::before{content:"";position:absolute;z-index:-1;right:-20%;top:-40%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(215,13,23,.2),transparent);transform:scale(var(--glow,1));transition:transform 1s var(--ease);pointer-events:none}
.calc-out .label{color:var(--on-dark-muted)}
.calc-kwp{margin:18px 0 6px;font-family:var(--f-text);font-weight:400;font-size:clamp(52px,5.6vw,88px);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-kwp small{margin-left:8px;font-size:.32em;letter-spacing:0;color:var(--on-dark-muted)}
.calc-yield{color:var(--on-dark-muted)}
.calc-split{margin:28px 0 32px}
.calc-bar{display:flex;gap:2px;height:8px;background:rgba(255,255,255,.08)}
.calc-bar i{display:block;height:100%;transition:width 800ms var(--ease)}
.calc-bar .self{background:var(--accent)}
.calc-bar .exp{background:rgba(255,255,255,.3)}
.calc-legend{display:flex;justify-content:space-between;gap:16px;margin-top:10px}
.calc-legend b{font-weight:500;color:#fff;white-space:nowrap}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;margin:auto 0 0;border-top:1px solid var(--navy-line)}
.calc-grid>div{padding:16px 0;border-bottom:1px solid var(--navy-line)}
.calc-grid>div:nth-child(even){padding-left:20px;border-left:1px solid var(--navy-line)}
.calc-grid dt{margin-bottom:6px}
.calc-grid dd{margin:0;font-family:var(--f-text);font-size:clamp(22px,1.9vw,28px);line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.calc-foot p{max-width:40ch;font-size:13px;line-height:1.5;color:var(--on-dark-muted)}
@media(max-width:1000px){.calc,.calc-head{grid-template-columns:1fr}}
@media(max-width:700px){
  .calc-tabs{grid-template-columns:1fr 1fr}
  .calc-tabs button:nth-child(2n){border-right:0}
  .calc-tabs button:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .calc-regions,.calc-toggles{grid-template-columns:1fr}
  .calc-grid>div:nth-child(even){padding-left:14px}
  .calc-foot .btn{width:100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){.calc-out::before{transition:none}}

/* ---------- Выезжающая панель со сценой направления ---------- */
html.drawer-lock{overflow:hidden}
/* 05.10 (просьба пользователя): панель 3D-сцены шире влево — весь экран, кроме полосы 96 px главной слева (было до 1320 px) */
.scene-drawer{position:fixed;inset:0;z-index:80}
.scene-drawer[hidden]{display:none}
.drawer-backdrop{position:absolute;inset:0;background:rgba(21,37,54,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity 500ms var(--ease)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:max(92vw,calc(100vw - 96px));background:var(--navy-deep);box-shadow:-30px 0 80px rgba(0,0,0,.35);transform:translateX(100%);transition:transform 650ms cubic-bezier(.2,.7,.2,1)}
.scene-drawer.is-open .drawer-backdrop{opacity:1}
.scene-drawer.is-open .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:8px 16px 8px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.drawer-count{display:block;margin-bottom:2px;color:var(--muted)}
.drawer-title{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.1;text-transform:uppercase;color:var(--ink)}
.drawer-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);background:transparent;color:var(--navy);font-family:var(--f-label);font-weight:500;font-size:12px;letter-spacing:var(--track-label);text-transform:uppercase;cursor:pointer;transition:background-color 160ms linear}
.drawer-close:hover{background:rgba(21,37,54,.07)}
.drawer-frame{display:block;flex:1;width:100%;border:0;background:#f4f5f2}
@media(max-width:700px){.drawer-panel{width:100vw}.drawer-head{min-height:60px;padding-left:16px}.drawer-esc{display:none}}
@media(prefers-reduced-motion:reduce){.drawer-panel,.drawer-backdrop{transition:none}}

/* ---------- Заявка: панель справа из двух шагов (решение пользователя 28.09) ----------
   Сначала вопросы-кнопки, контакты в конце; обязательно только «телефон или e-mail» (звёздочка и пояснение
   «зачем»), остальное помечено «optional». Вопросов о площади и потреблении нет — их уточняют на первом этапе. */
.anf-drawer{position:fixed;inset:0;z-index:85}
.anf-drawer[hidden]{display:none}
.anf-drawer .drawer-panel{width:min(620px,100vw);background:var(--surface)}
.anf-drawer.is-open .drawer-backdrop{opacity:1}
.anf-drawer.is-open .drawer-panel{transform:none}
.anf-progress{display:flex;gap:4px;padding:0 24px;background:var(--surface)}
.anf-progress i{flex:1;height:3px;background:var(--line);transition:background-color .3s}
.anf-progress i.on{background:var(--action)}
.anf-body{flex:1;overflow:auto;padding:28px clamp(20px,3vw,36px) 32px}
.anf-step[hidden]{display:none}
.anf-group{margin:0 0 26px;padding:0;border:0}
.anf-q{display:block;margin:0 0 12px;padding:0;font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.15;color:var(--ink)}
.anf-sub{margin:-4px 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}
.anf-calm{margin:0 0 22px;padding:12px 14px;border-left:2px solid var(--accent);background:rgba(255,255,255,.45);color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(21,37,54,.28);background:rgba(255,255,255,.55);color:var(--ink);font:inherit;font-size:15px;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:hover{border-color:var(--ink)}
.chip:has(input:checked),.chip[aria-pressed="true"]{border-color:var(--action);background:var(--action);color:#fff}
.chip:has(input:focus-visible),button.chip:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.anf-contact{margin:0;padding:0;border:0;min-width:0}
.anf-contact legend{padding:0 6px;margin-left:-6px;font-weight:500;color:var(--ink)}
.anf-req{color:var(--accent-hover)}
.anf-why{margin:2px 0 12px;font-size:14px;color:var(--muted)}
.anf-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.anf-field{display:grid;gap:6px;margin-bottom:14px}
.anf-field label{font-size:14px;font-weight:500;color:var(--ink)}
.anf-opt{margin-left:6px;font-family:var(--f-label);font-weight:500;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.anf-field input:not([type=file]),.anf-field textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid rgba(21,37,54,.32);background:#fff;color:var(--ink);font:inherit;font-size:16px}
.anf-field textarea{resize:vertical;min-height:84px}
.anf-field input:focus-visible,.anf-field textarea:focus-visible{outline:2px solid var(--action);outline-offset:1px;border-color:var(--action)}
.anf-field input[aria-invalid="true"]{border-color:var(--accent-hover)}
.anf-field input[type=file]{font-size:14px}
.anf-contact .anf-field{margin-bottom:0}
.anf-error{margin:10px 0 0;font-size:14px;font-weight:500;color:#B00D14}
.anf-privacy{margin:4px 0 20px;font-size:13px;color:var(--muted)}
.anf-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:8px}
.anf-nav .btn:only-child{margin-left:auto}
.anf-drawer .btn--ghost{background:transparent;color:var(--ink);border:1px solid rgba(21,37,54,.35)}
.anf-drawer .btn--ghost:hover,.anf-drawer .btn--ghost:focus-visible{background:rgba(21,37,54,.07);border-color:var(--ink)}
.anf-drawer .btn--ghost::before{display:none}
.anf-done:focus{outline:none}
.anf-proto{margin:0 0 18px;padding:10px 12px;border:1px dashed rgba(21,37,54,.4);font-family:var(--f-label);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.anf-summary{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0 0 24px;font-size:15px}
.anf-summary dt{color:var(--muted)}
.anf-summary dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.anf-direct{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding:16px clamp(20px,3vw,36px);border-top:1px solid var(--line);background:var(--surface-2)}
.anf-direct .label{color:var(--muted)}
.anf-direct a{color:var(--ink);font-weight:500;text-decoration:none}
.anf-direct a:hover{text-decoration:underline}
/* Финальный блок внизу страницы: первый шаг прямо здесь */
.anf-start-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.anf-start-copy .lead{max-width:34ch;margin-top:24px}
.anf-start-card{padding:clamp(24px,3vw,40px);background:var(--surface);border:1px solid rgba(21,37,54,.12)}
.anf-start-card .anf-q{font-size:clamp(22px,1.9vw,26px);margin-top:18px}
.anf-start-count{color:var(--muted)}
.anf-start-card .anf-nav{margin-top:24px}
@media(max-width:900px){.anf-start-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
  .anf-drawer .drawer-panel{width:100vw}
  .anf-pair{grid-template-columns:minmax(0,1fr)}
  .anf-progress{padding:0 16px}
  .chip{font-size:14px;padding:0 12px}
}

/* ---------- Шапка по образцу CFS: плавающая рамка из ячеек ----------
   Матовое стекло Navy на всей странице, цвет при прокрутке не меняется. Плотность 0,68 держит контраст белого текста не ниже 4,5:1 даже над белым фоном. Сплошная — только при открытом меню на телефоне. */
:root{--header-top:24px;--header-space:calc(var(--header-top) + var(--header-h));--hdr-line:rgba(255,255,255,.36);--hdr-bg:rgba(26,49,73,.68)}
html{scroll-padding-top:calc(var(--header-space) + 8px)}
.site-header{inset:var(--header-top) 0 auto;height:var(--header-h);background:none;border:0;pointer-events:none}
.site-header.is-solid{--hdr-line:rgba(255,255,255,.2);--hdr-bg:rgba(26,49,73,.95)}
.site-header .nav{pointer-events:auto;gap:0;justify-content:flex-start;align-items:stretch;border:1px solid var(--hdr-line);background:var(--hdr-bg);color:#fff;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 10px 30px rgba(21,37,54,.16);transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.site-header .brand{flex:1;min-width:0;min-height:0;gap:10px;padding:0 24px}
.site-header .brand img{filter:brightness(0) invert(1)}
.site-header .menu{gap:0}
.site-header .menu a{flex:none;justify-content:center;min-width:clamp(118px,9.5vw,164px);min-height:0;padding:0 clamp(14px,1.4vw,24px);border-left:1px solid var(--hdr-line);color:#fff;white-space:nowrap;transition:background-color .2s linear,border-color .35s var(--ease)}
.site-header .menu a::after{left:0;right:0;bottom:-1px;height:2px}
.site-header .menu a:hover,.site-header .menu a:focus-visible{background:rgba(255,255,255,.09)}
.site-header .menu a.is-current::after{transform:scaleX(1)}
.site-header .nav-end{gap:0;align-items:stretch}
.site-header .lang{align-items:center;gap:2px;padding:0 12px;border:0;border-left:1px solid var(--hdr-line);transition:border-color .35s var(--ease)}
.site-header .lang button{min-width:36px;min-height:36px;color:rgba(255,255,255,.82)}
.site-header .lang button:hover{background:rgba(255,255,255,.12);color:#fff}
.site-header .lang button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.site-header .nav-end .btn{min-height:0;padding:0 28px;border:0;border-left:1px solid var(--hdr-line);font-size:12px}
.site-header .menu-toggle{width:var(--header-h);height:auto;border:0;border-left:1px solid var(--hdr-line)}
.site-header .menu-toggle span,.site-header .menu-toggle span::before,.site-header .menu-toggle span::after{background:#fff}
.site-header .menu-toggle[aria-expanded="true"] span{background:transparent}
.site-header :focus-visible{outline-color:#fff;outline-offset:-4px}
/* Фото первого экрана уходит под шапку */
.slides{inset:0}
.hero-inner{padding-top:calc(var(--header-space) + 32px)}
.bg-switch{top:calc(var(--header-space) + 12px)}
.mobile-nav{top:calc(var(--header-space) - 1px);left:var(--gutter);right:var(--gutter);padding:8px 24px 24px;background:rgba(26,49,73,.97);border:1px solid rgba(255,255,255,.2);border-top:0;box-shadow:0 24px 48px rgba(0,0,0,.28);color:#fff}
.mobile-nav a:not(.btn){color:#fff;border-bottom-color:rgba(255,255,255,.16)}
.mobile-nav :focus-visible{outline-color:#fff}
@media(max-width:1100px){.site-header .brand{padding:0 18px}}
@media(max-width:700px){
  :root{--header-top:10px}
  .site-header .brand{gap:8px;padding:0 12px}
  .site-header .brand-mark{height:20px}
  .site-header .brand-word{height:12px}
  .site-header .lang{padding:0 6px}
  .site-header .lang button{min-width:34px}
  .bg-switch{top:calc(var(--header-space) + 8px)}
}

/* ---------- Подсказки перевода (только ?translations=ru) ---------- */
.translation{position:fixed;z-index:50;right:24px;bottom:120px;width:min(320px,calc(100vw - 36px));padding:16px 18px;background:rgba(231,228,224,.97);color:var(--ink);border-left:3px solid var(--accent);box-shadow:0 18px 48px rgba(0,0,0,.22);pointer-events:none}
.translation[hidden]{display:none}
.translation .label{display:block;margin-bottom:8px;color:var(--muted)}
.translation p{font-size:16px;line-height:1.4}

/* ==========================================================================
   Варианты фона для сравнения (переключатель внизу слева, адрес ?bg=…)
   light    — светлый (базовый вариант пробы)
   gradient — серо-голубой градиент, как в эскизе wentlex-gradient-study от 24.09
   concrete — бетон: средне-серая поверхность с тонкой чертёжной сеткой
   blue     — синий ритм: синие и светлые разделы чередуются
   Тёмная графитовая тема не показана: отклонена пользователем 24.09.
   ========================================================================== */
/* --- Серо-голубой градиент --- */
html[data-bg="gradient"]{--accent-ink:#152536;--text:#2B2B2B;--muted:#3D3D3D;--heading-2nd:#003F85;--line:rgba(21,37,54,.24);--rail:rgba(26,49,73,.28);--dot-ring:#CCC8C3}
html[data-bg="gradient"] .page-body{background:linear-gradient(180deg,#DFDBD6 0%,#CCC8C3 55%,#B8B3AD 100%)}
html[data-bg="gradient"] .director{background:transparent}
html[data-bg="gradient"] .services{background:transparent;color:var(--ink)}
html[data-bg="gradient"] .services :focus-visible{outline-color:var(--action)}
/* --- Бетон и чертёжная сетка --- */
html[data-bg="concrete"]{--surface:#CCC8C3;--surface-2:#DFDBD6;--text:#333333;--muted:#4D4D4D;--line:rgba(21,37,54,.2);--rail:#A39E98}
html[data-bg="concrete"] .page-body,html[data-bg="concrete-old"] .page-body{background-color:var(--surface)}
html[data-bg="concrete-old"]{--surface:#CCC8C3;--surface-2:#DFDBD6;--text:#333333;--muted:#4D4D4D;--line:rgba(21,37,54,.2);--rail:#A39E98}
html[data-bg="concrete-old"] .page-body{background-image:linear-gradient(rgba(26,49,73,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(26,49,73,.075) 1px,transparent 1px);background-size:32px 32px}
/* Новая сетка: только вертикальные направляющие по 12 колонкам страницы (4 на телефоне).
   Линии совпадают с краями контента и границами колонок; горизонтальных линий нет,
   чтобы они не спорили с линиями разделов. Только в разделах подход, направления, этапы. */
html[data-bg="concrete"] :is(.approach,.directions,.calc-sec,.manufacturers,.journey,.wissen,.director,.anf-start){background-image:linear-gradient(90deg,rgba(26,49,73,.085) 1px,transparent 1px);background-size:var(--grid-col,120px) 100%;background-position:var(--grid-x,0px) 0}
/* Живая сетка: холст под содержимым раздела. Статичная CSS-сетка выше остаётся запасным вариантом без JavaScript. */
html[data-bg="concrete"] :is(.approach,.directions,.calc-sec,.manufacturers,.journey,.wissen,.director,.anf-start){position:relative;isolation:isolate}
:is(.approach,.directions,.calc-sec,.manufacturers,.journey,.wissen,.director,.anf-start)>:not(.live-grid){position:relative;z-index:1}
.live-grid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.live-grid[hidden]{display:none}
html.live-grid-on[data-bg="concrete"] :is(.approach,.directions,.calc-sec,.manufacturers,.journey,.wissen,.director,.anf-start){background-image:none}
/* --- Синий ритм --- */
html[data-bg="blue"] .approach,html[data-bg="blue"] .director{--ink:#FFFFFF;--text:#CFD6DF;--muted:#A7B3C2;--line:rgba(255,255,255,.14);--heading-2nd:#8FB8EA;--accent-ink:#FFFFFF;background:var(--navy);color:var(--ink)}
html[data-bg="blue"] .approach :focus-visible,html[data-bg="blue"] .director :focus-visible{outline-color:#fff}
html[data-bg="blue"] .approach .btn,html[data-bg="blue"] .director .btn{border-color:rgba(255,255,255,.35)}
html[data-bg="blue"] .directions{background:var(--surface-2)}
html[data-bg="blue"] .directions .wrap{border-top:0}
html[data-bg="blue"] .direction{background:var(--navy)}
html[data-bg="blue"] .services{background:var(--navy-deep)}
html[data-bg="blue"] .site-footer{background:#152536}

/* --- Переключатель вариантов (служебный, только для просмотра пробы) --- */
.bg-switch{position:fixed;z-index:60;right:16px;top:calc(var(--header-h) + 12px);display:flex;align-items:center;gap:4px;padding:6px;background:#152536;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.28);font-family:var(--f-text);font-size:13px}
.bg-switch>span{padding:0 10px 0 8px;color:#A7B3C2;font-family:var(--f-label);font-size:12px;letter-spacing:var(--track-label);text-transform:uppercase}
.bg-switch button{min-height:44px;padding:0 12px;border:0;background:transparent;color:#fff;cursor:pointer;white-space:nowrap}
.bg-switch button:hover{background:rgba(255,255,255,.1)}
.bg-switch button[aria-pressed="true"]{background:var(--action)}
.bg-switch[hidden]{display:none}
.bg-switch :focus-visible{outline:2px solid #fff;outline-offset:-2px}
.mobile-nav:not([hidden])~.bg-switch{display:none}
@media(max-width:700px){.bg-switch{left:8px;right:8px;top:calc(var(--header-h) + 8px);overflow-x:auto}.bg-switch>span{display:none}.bg-switch button{flex:1;padding:0 8px;font-size:12px}}

/* ---------- Адаптив ---------- */
@media(max-width:1100px){
  .menu{display:none}
  .menu-toggle{display:inline-flex}
}
@media(max-width:900px){
  .approach-grid{grid-template-columns:1fr}
  .approach-grid>.h2,.approach-copy{grid-column:1 / -1}
  .director-layout{grid-template-columns:1fr;gap:32px}
  .director-portrait{max-width:520px}
  .footer-main{grid-template-columns:1fr 1fr;gap:40px 24px}
  .footer-contact{grid-column:1/-1}
}
@media(max-width:700px){
  :root{--header-h:64px}
  .brand-mark{height:22px}.brand-word{height:15px}
  .nav-end .btn{display:none}
  .hero{--choices-h:64px;min-height:640px}
  .hero-inner{padding-bottom:calc(var(--choices-h)*2 + 32px)}
  .hero-copy{margin-top:24px;padding-left:16px;font-size:17px}
  .hero-actions{flex-direction:column;align-items:stretch;margin-top:28px}
  .hero-actions .btn{justify-content:space-between}
  .hero-choices{grid-template-columns:1fr 1fr}
  .hero-item{justify-content:flex-start;padding:10px 16px;gap:12px;font-size:14px}
  .hero-item:nth-of-type(2n){border-right:0}
  .hero-item:nth-of-type(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
  .hero-item svg{width:24px;height:24px}
  .slide img{object-position:var(--pos-m,62% center)}
  .directions-grid{grid-template-columns:1fr}
  .direction-go .txt{display:none}
  .manufacturers-group{gap:40px;padding-inline:20px}
  .manufacturers-group li{flex-basis:120px}
  .manufacturers-group img{max-width:120px}
  .director .btn{width:100%;justify-content:space-between}
  .footer-main{grid-template-columns:1fr}
  .footer-brand{padding:28px 0}
  .translation{left:18px;right:18px;bottom:24px;width:auto}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-progress{display:none}
  .manufacturers-window{overflow:auto;mask-image:none}
  .manufacturers-track{width:100%}
  .manufacturers-group{width:100%;flex-wrap:wrap;justify-content:center;gap:24px}
  .manufacturers-group[aria-hidden="true"]{display:none}
}
/* Плитки направлений со ссылкой (28.09): на средних ширинах у маленьких плиток остаётся только стрелка,
   на телефоне — чуть меньше промежутки, чтобы «Landwirtschaft» помещалась целиком. */
@media(max-width:1180px){.directions-bento>li:not(.is-lead) .direction-go .txt{display:none}}
@media(max-width:700px){.directions-bento>li:not(.is-lead) .direction-caption{gap:8px}}

/* 29.09: заголовок направлений (#projekte) — вторая строка чёрная, как первая (просьба пользователя) */
#projekte .h2 .second{color:inherit}

/* 30.09: широкие экраны — как у референсов (MADAR, KAGE; решение пользователя 30.09).
   От 1600 px нет колонки по центру: сайт прижат к краям с отступом, сетки делят всю ширину.
   Крупно растут только заголовки; меню, кнопки и обычный текст — почти прежнего размера, абзацы — не шире
   удобной строки. Заголовок первого экрана ограничен и высотой окна. Ниже 1600 px ничего не меняется. */
@media (min-width:1600px){
  :root{
    --max:100vw;
    --gutter:clamp(64px,3vw,120px);
    --section:clamp(120px,6vw,200px);
    --fs-h1:max(64px,min(4.6vw,15svh));
    --fs-h2:clamp(64px,3.4vw,130px);
    --fs-h3-list:clamp(40px,2vw,64px);
    --fs-h3-card:clamp(30px,1.5vw,44px);
    --fs-lead:clamp(20px,.85vw,24px);
  }
  .hero-intro{max-width:62vw}
  .hero-copy{font-size:clamp(23px,.95vw,28px)}
  /* абзацы — не шире удобной строки */
  .approach-copy .lead{max-width:58ch}
  /* плитки направлений: высота малых плиток — от высоты окна, чтобы весь блок был около одного экрана */
  .directions-bento>li:not(.is-lead) .direction-media{aspect-ratio:auto;height:clamp(240px,30svh,520px)}
  /* услуги: панель чуть выше на больших экранах */
  .svc-panel{height:clamp(500px,calc(100svh - var(--header-space) - 40px),1000px)}
  .services{--svc-h:clamp(500px,calc(100svh - var(--header-space) - 40px),1000px)}
  /* руководитель: портрет не выше окна, цитата крупнее, чтобы строка не растягивалась */
  .director-layout{grid-template-columns:auto minmax(0,1fr)}
  .director-portrait{height:min(calc(100svh - var(--header-h) - 140px),1000px);width:auto}
  .director-quote{font-size:clamp(46px,2vw,64px)}
}

/* 30.09: при открытии панели сцены или заявки (html.drawer-lock{overflow:hidden}) полоса прокрутки пропадала,
   страница становилась на 15 px шире — плитки и фоновая сетка перестраивались и моргали. Место под полосу держим всегда. */
html{scrollbar-gutter:stable}

/* 30.09 (решение пользователя): кнопки направлений внизу первого экрана — в границах колонки сайта, как шапка и текст,
   а не от края до края экрана; по бокам видно фото. На телефоне и планшете (до 900 px) — как было, во всю ширину. */
@media (min-width:901px){
  .hero-choices{left:calc((100% - min(100% - 2*var(--gutter),var(--max)))/2);right:calc((100% - min(100% - 2*var(--gutter),var(--max)))/2)}
}

/* 30.09 (запрос заказчика): в калькуляторе площадь и потребление можно ввести с клавиатуры. Число — в светлом поле
   с рамкой, как обычное поле ввода (решение пользователя: подчёркивания было мало, чтобы понять, что это поле). */
.calc-num{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 4px;border:1px solid rgba(21,37,54,.32);background:#FBFAF8;cursor:text;white-space:nowrap;transition:border-color 160ms linear,box-shadow 160ms linear}
.calc-num:hover{border-color:var(--ink)}
.calc-num:focus-within{border-color:var(--action);box-shadow:0 0 0 1px var(--action)}
.calc-num input{width:10ch;margin:0;padding:8px 0 8px 8px;border:0;border-radius:0;background:transparent;font-family:var(--f-text);font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;outline:none}
.calc-unit{min-width:3.4em;font-size:15px;color:var(--muted)}  /* одинаковое место под m², kWh, кВт·ч — поля одной ширины */

/* 30.09: калькулятор частных домов считает от мощности (kWp); под ползунком — сколько крыши это займёт */
.calc-hint{margin:2px 0 0;font-size:13px;color:var(--muted)}
.calc-hint[hidden]{display:none}

/* 30.09: потребление можно ввести за месяц (переключатель) и выбрать типовое по числу жителей (частные дома) */
.calc-per{display:inline-flex;margin-top:6px;border:1px solid var(--line)}
.calc-per button{min-height:36px;padding:0 12px;border:0;background:transparent;color:var(--navy);font-family:var(--f-label);font-weight:500;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;cursor:pointer;transition:background-color 160ms linear,color 160ms linear}
.calc-per button:hover{background:rgba(21,37,54,.07)}
.calc-per button[aria-pressed="true"]{background:var(--navy);color:#fff}
.calc-presets[hidden]{display:none}
.calc-presets button{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 12px}  /* число — под подписью, чтобы не переносилось */

/* 30.09: форма заявки, шаг 2 — поля сеткой в две колонки, одна подсказка, своё поле для файлов */
.anf-step[data-step="2"] .anf-sub{margin:0 0 20px}
.anf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-bottom:14px}
.anf-grid .anf-field{margin-bottom:0}
.anf-grid .anf-wide{grid-column:1/-1}
.anf-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.anf-file{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 14px;border:1px dashed rgba(21,37,54,.38);background:rgba(255,255,255,.45);cursor:pointer;transition:border-color 160ms linear,background-color 160ms linear}
.anf-file:hover{border-color:var(--ink);background:#fff}
.anf-file-input:focus-visible+.anf-file{outline:2px solid var(--action);outline-offset:1px}
.anf-file-btn{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--action);color:var(--action);font-size:20px;line-height:1}
.anf-file-text{display:grid;gap:2px;min-width:0}
.anf-file-text b{font-size:14px;font-weight:500;color:var(--ink)}
.anf-file-text small{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.anf-file-names{color:var(--ink)!important}
@media(max-width:700px){.anf-grid{grid-template-columns:minmax(0,1fr)}}

/* 30.09 (замечание пользователя о композиции): у панели заявки один отступ от краёв для всего — шапки с кнопкой
   «Schließen», полосы шагов, полей и нижней строки «Lieber direkt?»; между рядами полей — одинаковый шаг 14 px. */
.anf-drawer{--anf-pad:clamp(20px,3vw,36px)}
.anf-drawer .drawer-head{padding-left:var(--anf-pad);padding-right:var(--anf-pad)}
.anf-drawer .anf-progress,.anf-drawer .anf-direct{padding-left:var(--anf-pad);padding-right:var(--anf-pad)}
.anf-drawer .anf-body{padding-left:var(--anf-pad);padding-right:var(--anf-pad)}
.anf-file{background:#fff}

/* 30.09: оговорка под результатом калькулятора — первая фраза жирная и светлее, чтобы её было видно */
.calc-foot p.calc-note{max-width:52ch}
.calc-note b{display:block;margin-bottom:4px;font-size:14px;font-weight:500;line-height:1.4;color:#fff}

/* 30.09: у наземных станций часть калькулятора скрыта атрибутом hidden — он сильнее display у блоков */
#rechner [hidden]{display:none!important}
/* у наземных станций полей меньше — прижимаем их кверху, без пустоты между вкладками и мощностью */
.calc-in:has(#calcConsField[hidden]){justify-content:flex-start}

/* 01.10 (решение пользователя): у панели 3D-сцены нет своей шапки — сверху одна полоса глав сцены
   (Navy как шапка сайта в сплошном состоянии .is-solid). Здесь только кнопка закрытия: квадратная ячейка
   высотой с шапку (72 px, как .menu-toggle), синяя как «Kontakt», надпись «Esc»; слово «Schließen» остаётся
   для экранного диктора. На телефоне клавиатуры нет — вместо «Esc» крестик из .menu-toggle (открытое состояние).
   Размеры совпадают с полосой в style.css сцен: отступ 24 px, высота 72 px. */
.scene-drawer .drawer-head{position:absolute;top:24px;right:24px;z-index:3;min-height:0;padding:0;border:0;background:none}
.scene-drawer .drawer-head>div,.scene-drawer .drawer-close>span:first-child{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.scene-drawer .drawer-close{position:relative;isolation:isolate;overflow:hidden;justify-content:center;gap:0;width:72px;height:72px;min-height:0;padding:0;border:1px solid rgba(255,255,255,.2);background:var(--action);color:#fff;font-size:12px;letter-spacing:var(--track-label);transition:border-color 160ms linear}
.scene-drawer .drawer-close .drawer-esc{display:inline}
.scene-drawer .drawer-close::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-hover);clip-path:polygon(0 0,-100% 0,0 100%,0 100%);transition:clip-path 700ms var(--ease)}
.scene-drawer .drawer-close:hover::before,.scene-drawer .drawer-close:focus-visible::before{clip-path:polygon(0 0,100% 0,200% 100%,0 100%)}
.scene-drawer .drawer-close:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media(max-width:700px){
  .scene-drawer .drawer-head{top:10px;right:10px}
  .scene-drawer .drawer-close{width:56px;height:56px}
  .scene-drawer .drawer-close .drawer-esc{display:block;position:relative;width:18px;height:1.5px;font-size:0;background:transparent}
  .scene-drawer .drawer-close .drawer-esc::before,.scene-drawer .drawer-close .drawer-esc::after{content:"";position:absolute;left:0;top:0;width:18px;height:1.5px;background:#fff}
  .scene-drawer .drawer-close .drawer-esc::before{transform:rotate(45deg)}
  .scene-drawer .drawer-close .drawer-esc::after{transform:rotate(-45deg)}
}