/* ==========================================================================
   Шаблон страницы услуги /leistungen/{slug}/
   Раскладка: ПОЛНОШИРИННЫЕ СЕКЦИИ с чередованием фона.
   Сайдбара нет намеренно. Двухколонник «текст 720 px + липкий остров» — это
   раскладка статьи: карточки в нём сжимались до 170 px и текст ломался по два
   слова в строку, а сам липкий остров наезжал на блок под ним.
   Контакты держат: липкий хедер, CTA-полосы между секциями, NAP-блок,
   нижняя панель на мобильном и плавающая кнопка WhatsApp.
   ========================================================================== */

/* ---------- Ритм секций -------------------------------------------------- */
.s{padding:var(--sec-y) 0}
.s-alt{background:var(--c-bg-alt)}
.s-dark{background:var(--grad-dark);color:#fff}

/* Шапка секции: кикер → заголовок → лид.
   Лид ограничен по мере читаемости, блоки под ним занимают всю ширину. */
.sh{max-width:72ch;margin-bottom:var(--sp-10)}
.sh h2{font-size:var(--fs-d2)}
.sh .kicker + h2{margin-top:var(--sp-3)}
.sh p{margin-top:var(--sp-4);font-size:var(--fs-lead);line-height:var(--lh-relaxed);color:var(--c-slate)}
.s-dark .sh p{color:#A9AFBA}
.s-dark .sh h2{color:#fff}

/* Бегущий текст — единственное, что ограничено по длине строки */
.prose{max-width:72ch}
.prose p{color:var(--c-slate);font-size:var(--fs-card);line-height:var(--lh-relaxed)}
.prose p + p{margin-top:var(--sp-4)}
.prose strong{color:var(--c-ink);font-weight:700}
.s-dark .prose p{color:#A9AFBA}
.s-dark .prose strong{color:#fff}
.s h3{font-size:var(--fs-d3)}
.mt-8{margin-top:var(--sp-8)}
.mt-10{margin-top:var(--sp-10)}
.mt-6{margin-top:var(--sp-6)}

/* ---------- Hero --------------------------------------------------------- */
.l-hero{position:relative;background:var(--grad-dark);color:#fff;overflow:hidden}
.l-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 110% at 84% 10%,rgba(227,6,19,.26),transparent 60%)}
.l-hero .container{position:relative;z-index:1}
.l-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.82fr);
  gap:var(--sp-20);align-items:center;padding:var(--sp-10) 0 var(--sp-12)}
.l-hero h1{font-size:var(--fs-d1);margin-top:var(--sp-5);max-width:18ch}
.l-hero .lead{margin-top:var(--sp-5);max-width:54ch;font-size:var(--fs-lead)}
.l-hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-8)}
/* На узких экранах кнопки геро — колонкой во всю ширину: равные тап-цели. */
@media(max-width:479px){
  .l-hero-cta{flex-direction:column;align-items:stretch}
  .l-hero-cta .btn{width:100%;justify-content:center}
}
.l-hero-media{border-radius:var(--r-3xl);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/3}
.l-hero-media img{width:100%;height:100%;object-fit:cover}

.decisionbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--sp-16)}
.db-item{padding:var(--sp-6);display:grid;gap:var(--sp-1);border-right:1px solid rgba(255,255,255,.10)}
.db-item:last-child{border-right:0}
.db-item .k{font:700 var(--fs-over)/1 var(--font-b);letter-spacing:.09em;text-transform:uppercase;color:#8E96A4}
.db-item .v{font-family:var(--font-d);font-weight:800;font-size:var(--fs-d3);color:#fff;line-height:1.15}
.db-item .v .ph{font-size:var(--fs-card)}

/* Подпись под строкой фактов. Появляется на страницах услуг вместе с ценой:
   собственный ценовой блок убран, и его обязанности — пометка про 20 % USt.
   (правило 9) и ссылка на /preise/ — перешли сюда. */
.decisionbar:has(+ .db-note){margin-bottom:var(--sp-5)}
.db-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);
  margin-bottom:var(--sp-16);max-width:80ch;
  font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:rgba(255,255,255,.62)}
.db-note .tlink{color:var(--c-red-on-dark)}

@media(max-width:1023px){
  /* minmax(0,1fr), а не 1fr: у 1fr минимум равен min-content, и длинное слово
     в заголовке раздувало колонку шире контейнера */
  .l-hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-8);padding:var(--sp-6) 0 var(--sp-10)}
  .l-hero-media{order:3;aspect-ratio:16/9}
  .decisionbar{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:var(--sp-12)}
  .db-item:nth-child(2n){border-right:0}
  .db-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.10)}
}
@media(max-width:480px){
  .decisionbar{grid-template-columns:minmax(0,1fr)}
  .db-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.10);padding:var(--sp-4) var(--sp-5)}
  .db-item:last-child{border-bottom:0}
}

/* ---------- Hero: Banner-Variante (layout=banner) -------------------------
   Bild vollflächig hinter dem Text (echtes <img> = LCP), doppelter Shade für
   Kontrast, Decisionbar liegt als Glas-Leiste im unteren Bereich. Nur additiv:
   .l-hero ohne .lhero-banner rendert exakt wie zuvor (page-hero inklusive). */
.lhero-banner{display:flex;flex-direction:column;justify-content:center;
  min-height:min(62vh,560px);isolation:isolate}
.lhero-banner::after{content:none}                 /* rotes Radial nur im Split-Hero */
.lhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lhero-banner[data-focal="top"] .lhero-bg{object-position:center 22%}
.lhero-banner[data-focal="right"] .lhero-bg{object-position:78% center}
.lhero-banner[data-focal="left"] .lhero-bg{object-position:22% center}
.lhero-banner[data-focal="bottom"] .lhero-bg{object-position:center 78%}
.lhero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(100deg,rgba(8,10,14,.94) 0%,rgba(8,10,14,.82) 34%,rgba(8,10,14,.46) 66%,rgba(8,10,14,.28) 100%),
  linear-gradient(0deg,rgba(8,10,14,.74) 0%,transparent 38%)}
.lhero-banner[data-overlay="light"] .lhero-shade{background:
  linear-gradient(100deg,rgba(8,10,14,.84) 0%,rgba(8,10,14,.64) 34%,rgba(8,10,14,.30) 66%,rgba(8,10,14,.16) 100%),
  linear-gradient(0deg,rgba(8,10,14,.60) 0%,transparent 32%)}
.lhero-banner[data-overlay="strong"] .lhero-shade{background:
  linear-gradient(100deg,rgba(8,10,14,.97) 0%,rgba(8,10,14,.90) 40%,rgba(8,10,14,.64) 70%,rgba(8,10,14,.42) 100%),
  linear-gradient(0deg,rgba(8,10,14,.82) 0%,transparent 42%)}
.lhero-banner .container{width:100%;z-index:2}
.lhero-content{max-width:760px;padding:var(--sp-16) 0 var(--sp-12)}
/* 22ch + кегль 46px вместо 16ch/56px: «Versicherungsschaden» (20 зн.) был шире
   контейнера, и overflow-wrap:break-word из base.css рвал его посреди слова.
   hyphenate-limit-chars — переносим только длинные композиты (≥12 зн.),
   короткие слова словарь не дробит. */
.lhero-banner h1{max-width:22ch;text-shadow:0 2px 28px rgba(0,0,0,.35);
  font-size:clamp(2rem,1.5rem + 2.2vw,2.875rem);
  hyphens:auto;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:4;
  hyphenate-limit-chars:12 6 4}
.lhero-banner .lead{color:#C8CEDA}
.lhero-banner .decisionbar{position:relative;z-index:2;background:rgba(10,13,18,.55);
  border-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(max-width:1023px){
  .lhero-banner{min-height:0}
  .lhero-content{padding:var(--sp-10) 0 var(--sp-8);max-width:none}
}

/* ---------- Универсальная карточная сетка -------------------------------- */
.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1099px){ .g-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:899px) { .g-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:719px) { .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)} }

.card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-2xl);
  padding:var(--sp-8);transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
/* Карточка БЕЛАЯ и в тёмной секции — заголовку нужен собственный тёмный цвет,
   иначе в on-dark-контексте он наследует белый (тот же фикс, что у .tile).
   .card-dark ниже возвращает белый. */
.card h3{font-size:var(--fs-d4);margin:0 0 var(--sp-3);color:var(--c-ink)}
.card p{font-size:var(--fs-sm);color:var(--c-slate);line-height:var(--lh-relaxed)}
.card-dark{background:var(--grad-dark);color:#fff;border-color:transparent}
.card-dark h3{color:#fff}
.card-dark p{color:#A9AFBA}
@media(max-width:767px){.card{padding:var(--sp-6)}}

/* Колонка «карточка + фото» (#freie-werkstatt): фото добирает высоту соседней
   колонки (flex:1), поэтому обе колонки грида заканчиваются на одной линии. */
.col-stack{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.col-stack figure{flex:1;margin:0;min-height:240px;border-radius:var(--r-xl);
  overflow:hidden;border:1px solid var(--c-line)}
.col-stack figure img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Калькулятор -------------------------------------------------- */
.calc{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-3xl);
  box-shadow:var(--sh-2);overflow:hidden}
.calc-head{padding:var(--sp-10) var(--sp-10) var(--sp-8);border-bottom:1px solid var(--c-line)}
.calc-head h2{font-size:var(--fs-d2);margin-top:var(--sp-3)}
.calc-head p{margin-top:var(--sp-4);color:var(--c-slate);max-width:68ch;font-size:var(--fs-lead);
  line-height:var(--lh-relaxed)}
.calc-body{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  gap:var(--sp-12);padding:var(--sp-10)}
.calc-fields{display:grid;gap:var(--sp-5);align-content:start}
.calc-field{display:grid;gap:var(--sp-2)}
.calc-field label{font:700 var(--fs-over)/1 var(--font-b);letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-slate-2)}
.calc-field select{appearance:none;width:100%;min-height:56px;padding:0 44px 0 var(--sp-5);
  border:1.6px solid var(--c-line-2);border-radius:var(--r-md);background-color:#fff;
  font-size:var(--fs-card);font-weight:600;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--c-ink) 50%),
                   linear-gradient(135deg,var(--c-ink) 50%,transparent 50%);
  background-position:calc(100% - 23px) 25px,calc(100% - 17px) 25px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.calc-field select:hover{border-color:var(--c-ink)}
.calc-field select:focus-visible{border-color:var(--c-red);box-shadow:0 0 0 4px var(--c-red-ring);outline:none}
.calc-hint{font-size:var(--fs-xs);color:var(--c-slate-2);line-height:1.6}

.calc-out{display:grid;gap:var(--sp-5);align-content:start}
.calc-status{display:inline-flex;align-items:center;gap:var(--sp-3);align-self:start;
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-full);font-weight:700;font-size:var(--fs-sm);
  background:var(--c-bg-3);color:var(--c-slate)}
.calc-status::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;flex:none}
.calc-out[data-state="early"]     .calc-status{background:var(--c-green-tint);color:var(--c-green-ink)}
.calc-out[data-state="window"]    .calc-status{background:var(--c-green-tint);color:var(--c-green-ink)}
.calc-out[data-state="tolerance"] .calc-status{background:#FEF3DC;color:#8A5B00}
.calc-out[data-state="expired"]   .calc-status{background:var(--c-red-tint);color:var(--c-red-ink)}
.calc-msg{font-family:var(--font-d);font-weight:800;font-size:var(--fs-d2);line-height:var(--lh-head);
  letter-spacing:-.022em}
.calc-sub{color:var(--c-slate);font-size:var(--fs-card);line-height:var(--lh-relaxed);max-width:60ch}
.calc-warn{display:flex;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--r-md);
  background:#FEF3DC;color:#7A5100;font-size:var(--fs-sm);line-height:1.6;max-width:64ch}
.calc-out[data-state="expired"] .calc-warn{background:var(--c-red-tint);color:var(--c-red-ink)}
.calc-warn .icon{flex:none;font-size:1.25rem;margin-top:1px}
.calc-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* Лента месяцев вместо абстрактной полосы: посетителю нужен конкретный месяц,
   а не доля от отрезка. Шесть ячеек — месяц до, месяц срока и четыре месяца
   толеранса. Текущий месяц подсвечен. */
.calc-months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-2);
  max-width:660px}
.cm{display:grid;gap:var(--sp-2);padding:var(--sp-3) var(--sp-2) var(--sp-4);
  border-radius:var(--r-md);text-align:center;background:var(--c-bg-alt);
  border:1.5px solid transparent;position:relative}
.cm .bar{height:6px;border-radius:3px;background:var(--c-line-2)}
.cm .mo{font-family:var(--font-d);font-weight:700;font-size:var(--fs-sm);line-height:1.1}
.cm .yr{font-size:var(--fs-xs);color:var(--c-slate-2);line-height:1}
.cm--early .bar{background:var(--c-green-tint)}
.cm--due   .bar{background:var(--c-green)}
.cm--tol   .bar{background:#F7D89A}
.cm--now{border-color:var(--c-ink);background:#fff;box-shadow:var(--sh-1)}
.cm--now::after{content:"heute";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  padding:2px 8px;border-radius:var(--r-full);background:var(--c-ink);color:#fff;
  font:700 .6875rem/1.4 var(--font-b);white-space:nowrap}
.calc-today{font-size:var(--fs-xs);color:var(--c-slate-2)}
.calc-legend{display:flex;flex-wrap:wrap;gap:var(--sp-5);font-size:var(--fs-xs);color:var(--c-slate-2)}
.calc-legend span{display:inline-flex;align-items:center;gap:7px}
.calc-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
@media(max-width:719px){
  .calc-months{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3) var(--sp-2);
    row-gap:var(--sp-6)}
}

.calc-foot{padding:var(--sp-6) var(--sp-10);background:var(--c-bg-alt);border-top:1px solid var(--c-line);
  font-size:var(--fs-xs);color:var(--c-slate-2);line-height:1.7}
@media(max-width:1099px){
  .calc-body{grid-template-columns:minmax(0,1fr);gap:var(--sp-8);padding:var(--sp-8)}
  .calc-head{padding:var(--sp-8) var(--sp-8) var(--sp-6)}
  .calc-foot{padding:var(--sp-6) var(--sp-8)}
}
@media(max-width:767px){
  .calc-head{padding:var(--sp-6)}
  .calc-body{padding:var(--sp-6);gap:var(--sp-6)}
  .calc-foot{padding:var(--sp-5) var(--sp-6)}
  .calc-msg{font-size:var(--fs-d3)}
}

/* ---------- Цена: выбор типа авто ---------------------------------------- */
.chips-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-8)}
.chip-btn{padding:var(--sp-4) var(--sp-6);min-height:var(--tap);border-radius:var(--r-full);
  border:1.6px solid var(--c-line-2);background:#fff;font-weight:700;font-size:var(--fs-card);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),
             transform var(--t-fast) var(--e-out)}
.chip-btn:hover{border-color:var(--c-ink);transform:translateY(-2px)}
.chip-btn[aria-pressed="true"]{background:var(--c-ink);border-color:var(--c-ink);color:#fff}

.price-out{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--sp-10);background:#fff;border:1px solid var(--c-line);border-radius:var(--r-3xl);
  padding:var(--sp-10);box-shadow:var(--sh-1)}
.price-main{display:grid;gap:var(--sp-3);align-content:start}
.price-main .lbl{font:700 var(--fs-over)/1.4 var(--font-b);letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-slate-2)}
.price-main .val{font-family:var(--font-d);font-weight:800;font-size:var(--fs-num);line-height:1}
.price-main .dur{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-card);
  color:var(--c-slate);font-weight:600}
.price-main .dur .icon{color:var(--c-red-ink);font-size:1.2rem}
.incl h3,.incl .h3-look{margin:0 0 var(--sp-4);font-family:var(--font-b);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:var(--fs-over);color:var(--c-slate-2)}
.incl ul{list-style:none;padding:0;display:grid;gap:var(--sp-3)}
.incl li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);line-height:1.6}
.incl li .icon{flex:none;margin-top:3px;font-size:1.1rem}
.incl .yes .icon{color:var(--c-green-ink)}
.incl .no .icon{color:var(--c-slate-2)}
.price-extra{display:grid;margin-top:var(--sp-6);max-width:680px}
.price-extra .row{display:flex;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-4) 0;
  border-bottom:1px solid var(--c-line);font-size:var(--fs-card)}
.price-extra .row:last-child{border-bottom:0}
.price-extra b{font-family:var(--font-d);white-space:nowrap}
/* nowrap нужен настоящей цене («ab 89 €»), но плейсхолдер бывает длинным
   («ZU PRÜFEN: Dauer inkl. Trocknung» — 318 px) и распирал всю ценовую сетку
   шире экрана. Плейсхолдерам перенос разрешаем. */
.price-extra .row b.ph{white-space:normal;overflow-wrap:anywhere}
@media(max-width:719px){
  .price-extra .row{flex-wrap:wrap;gap:var(--sp-1) var(--sp-4)}
  .price-extra .row b{white-space:normal}
}
@media(max-width:1099px){
  .price-out{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8);padding:var(--sp-8)}
  .price-main{grid-column:1/-1}
}
@media(max-width:719px){.price-out{grid-template-columns:minmax(0,1fr);padding:var(--sp-6);gap:var(--sp-6)}}

/* ---------- Шаги процесса ------------------------------------------------ */
.flow{counter-reset:flow}
/* Flex statt Grid: nur so schiebt margin-top:auto die .when-Zeile an den
   Kartenboden — im Grid blieb sie an der Textlänge kleben und die Meta-Zeilen
   der vier Karten standen auf vier verschiedenen Höhen. */
.flow-i{position:relative;display:flex;flex-direction:column;gap:var(--sp-3)}
.flow-i::before{counter-increment:flow;content:counter(flow);
  width:40px;height:40px;border-radius:50%;background:var(--c-red);color:#fff;
  display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:var(--fs-card);
  box-shadow:0 4px 12px rgba(227,6,19,.22)}
.flow-i b{font-family:var(--font-d);font-size:var(--fs-d4);line-height:var(--lh-snug)}
.flow-i p{font-size:var(--fs-sm);color:var(--c-slate);line-height:var(--lh-relaxed)}
.flow-i .when{margin-top:auto;padding-top:var(--sp-3);display:inline-flex;align-items:center;gap:7px;
  font:700 var(--fs-xs)/1.4 var(--font-b);color:var(--c-ink)}
.flow-i .when::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-red);flex:none}

/* ---------- Плитки-условия ------------------------------------------------
   Раньше было «4» отдельной строкой и «Wochen» под ним — цифра без единицы
   читается как номер, а длинное «Begutachtungsstelle» ломалось переносом.
   Теперь: метка условия → значение целиком одной строкой → пояснение. */
.tile{display:grid;gap:var(--sp-3);align-content:start;position:relative;
  padding-top:var(--sp-10)}
/* Плитка — БЕЛАЯ карточка, даже когда лежит в тёмной секции.
   Поэтому цвета текста здесь тёмные: белый заголовок на белом фоне был не виден,
   а светло-серый абзац на белом не проходил по контрасту. */
.tile-k{position:absolute;top:var(--sp-6);left:var(--sp-8);
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font:700 var(--fs-over)/1 var(--font-b);letter-spacing:.10em;text-transform:uppercase;
  color:var(--c-red-ink)}
/* Длинные немецкие композиты («Herstellervorgabe») вылезали за карточку:
   .tile-v — span, страховка переносов h1–h4 из base.css на него не действует.
   Поэтому перенос и дефисация задаются прямо здесь (lang="de-AT" стоит в <html>). */
.tile-v{font-family:var(--font-d);font-weight:800;font-size:clamp(1.5rem,1.05rem + 1.2vw,1.85rem);
  line-height:1.1;color:var(--c-ink);letter-spacing:-.022em;text-wrap:balance;
  overflow-wrap:anywhere;hyphens:auto}
.tile p{font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--c-slate)}
@media(max-width:767px){.tile{padding-top:var(--sp-8)}.tile-k{top:var(--sp-5);left:var(--sp-6)}}

/* ---------- Карточка результата (Mängel-Ampel) ---------------------------- */
.rcard h3{display:flex;align-items:flex-start;gap:var(--sp-3)}
.rcard .dot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:7px}
.rcard--ok .dot{background:var(--c-green)}
.rcard--light .dot{background:var(--c-amber)}
.rcard--heavy .dot{background:#F0602A}
.rcard--danger{border-color:var(--c-red);box-shadow:0 0 0 3px var(--c-red-ring)}
.rcard--danger .dot{background:var(--c-red)}

/* ---------- Иконочная сетка на тёмном -------------------------------------
   Иконка живёт в плашке 56×56 — тот же приём, что у контактных карточек (.kic).
   Без плашки SVG в 1.4rem терялся рядом с текстом. */
.icongrid div{display:flex;gap:var(--sp-5);align-items:center;padding:var(--sp-6);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);
  font-size:var(--fs-card);font-weight:600;line-height:1.45;color:#DDE1E7;
  transition:background var(--t-fast),border-color var(--t-fast)}
.icongrid div:hover{background:rgba(255,255,255,.09);border-color:rgba(255,90,100,.35)}
.ig-ic{width:56px;height:56px;flex:none;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,90,100,.12);border:1px solid rgba(255,90,100,.22);
  color:var(--c-red-on-dark);font-size:1.85rem;transition:background var(--t-fast)}
.icongrid div:hover .ig-ic{background:rgba(255,90,100,.20)}
.ig-ic .icon{stroke-width:1.7}
@media(max-width:767px){.ig-ic{width:48px;height:48px;font-size:1.6rem;border-radius:14px}}

/* ---------- Плашка Ermächtigung -------------------------------------------- */
.ermaechtigung{border:1px solid rgba(255,255,255,.18);border-radius:var(--r-2xl);
  padding:var(--sp-8);background:rgba(255,255,255,.04);display:flex;gap:var(--sp-6);align-items:flex-start}
.ermaechtigung > .icon{font-size:2.2rem;color:var(--c-red-on-dark);flex:none}
.ermaechtigung b{display:block;font-family:var(--font-d);font-size:var(--fs-d4);
  margin-bottom:var(--sp-4);color:#fff}
.ermaechtigung dl{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);color:#A9AFBA}
.ermaechtigung dt{font-weight:600}
.ermaechtigung dd{min-width:0}
@media(max-width:719px){
  .ermaechtigung{flex-direction:column;gap:var(--sp-4);padding:var(--sp-6)}
  .ermaechtigung dl{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .ermaechtigung dd{margin-bottom:var(--sp-3)}
}

/* ---------- Чек-лист -------------------------------------------------------- */
.checklist{list-style:none;padding:0;display:grid;gap:var(--sp-5)}
.checklist li{display:flex;gap:var(--sp-4);align-items:flex-start;font-size:var(--fs-card);
  line-height:var(--lh-relaxed);color:var(--c-slate)}
.checklist .ck{flex:none;width:28px;height:28px;border-radius:50%;background:var(--c-red-tint);
  color:var(--c-red-ink);display:grid;place-items:center;font-size:1rem;margin-top:1px}
/* Draw-on-эффект написан под ОДИН путь галочки (~24 юнита). Любая другая
   иконка в чек-листе (i-warn в «muss lackiert werden…») от dasharray:24
   рисуется пунктиром с дырами. Поэтому: прорисовка — только для #i-check,
   остальные появляются мягким scale/fade. */
.js .checklist .ck .icon{stroke-width:2.6;opacity:0;transform:scale(.6);
  transition:opacity 320ms var(--e-out) var(--d,0s),transform 320ms var(--e-out) var(--d,0s)}
.js .checklist li.in .ck .icon{opacity:1;transform:none}
.js .checklist .ck .icon:has(use[href="#i-check"]){opacity:1;transform:none;
  stroke-dasharray:24;stroke-dashoffset:24;
  transition:stroke-dashoffset 420ms var(--e-out) var(--d,0s)}
.js .checklist li.in .ck .icon:has(use[href="#i-check"]){stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .js .checklist .ck .icon{opacity:1;transform:none}
  .js .checklist .ck .icon:has(use[href="#i-check"]){stroke-dashoffset:0}
}
.checklist strong{color:var(--c-ink)}

/* ---------- Выделенные рамки ------------------------------------------------ */
.tipp{padding:var(--sp-8);border-radius:var(--r-2xl);background:var(--c-red-tint);
  border-left:5px solid var(--c-red)}
.tipp b{display:block;font-family:var(--font-d);font-size:var(--fs-d4);margin-bottom:var(--sp-3)}
.tipp p{color:var(--c-ink);opacity:.86;line-height:var(--lh-relaxed)}
/* .note — нейтральный близнец .tipp: лёгкий серый фон + слейтовая полоса слева.
   Раньше это был белый бокс с волосяной рамкой — на белых секциях сливался
   с фоном и выглядел как незавершённый div (фидбек владельца 03.08.2026). */
.note{padding:var(--sp-8);border-radius:var(--r-2xl);background:var(--c-bg-alt);
  border:1px solid var(--c-line);border-left:5px solid var(--c-slate)}
.note b{display:block;font-family:var(--font-d);font-size:var(--fs-d4);margin-bottom:var(--sp-3)}
.note p{color:var(--c-slate);line-height:var(--lh-relaxed)}
/* Крупные жирные подписи-«span» без страховки переносов — та же защита, что у .tile-v */
.statline .n,.note b,.tipp b,.ermaechtigung b,.flow-i b{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:767px){.tipp,.note{padding:var(--sp-6)}}

/* ---------- Сводные цифры ---------------------------------------------------- */
/* Три цифры всегда в один ряд — в том числе на мобильном: они читаются как
   сводка, а в столбик превращаются в обычный список и теряют смысл. */
.statline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);
  padding:var(--sp-6) var(--sp-8);background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-2xl);margin-bottom:var(--sp-8)}
.statline div{display:grid;gap:var(--sp-1);align-content:start}
.statline .n{font-family:var(--font-d);font-weight:800;font-size:var(--fs-d2);line-height:1;
  color:var(--c-red-ink)}
.statline .t{font-size:var(--fs-sm);color:var(--c-slate-2);line-height:1.35}
@media(max-width:719px){
  .statline{gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);text-align:center}
  .statline div{justify-items:center}
  .statline .n{font-size:clamp(1.35rem,6.5vw,1.9rem)}
  .statline .t{font-size:var(--fs-xs);hyphens:auto}
}

/* ---------- Инфографика плакетки --------------------------------------------- */
.plak-fig{display:grid;place-items:center;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-2xl);padding:var(--sp-8)}
.plak-fig svg{width:100%;max-width:280px;height:auto}
.js .plak-fig .lbl{opacity:0;transition:opacity var(--t-slow) var(--e-out) var(--d,0s)}
.js .plak-fig.in .lbl{opacity:1}

/* ---------- Отзывы ------------------------------------------------------------ */
.revhead{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-8)}
.revhead h2{margin-top:var(--sp-3)}
.revhead p{font-size:var(--fs-lead)}
.rev-rating{margin-top:var(--sp-4)}
.revcard .who{display:flex;gap:var(--sp-3);align-items:center;margin-top:auto;padding-top:var(--sp-6)}
.revcard .ini{width:40px;height:40px;border-radius:50%;background:var(--c-ink);color:#fff;
  display:grid;place-items:center;font-family:var(--font-d);font-weight:700;flex:none}
.revcard .who b{display:block;font-size:var(--fs-sm)}
.revcard .who span{font-size:var(--fs-xs);color:var(--c-slate-2)}
.stars{display:inline-flex;gap:2px;color:var(--c-amber);font-size:1.05rem;vertical-align:-2px}

/* ---------- Отзывы: слайдер (spec §2.12 — kein Autoplay) ----------------------- */
.rev-slider{position:relative}
.rev-track{display:flex;gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-padding-inline:2px;padding:6px 2px var(--sp-4)}
.rev-track::-webkit-scrollbar{display:none}
.rev-track:focus-visible{outline:2px solid var(--c-red);outline-offset:4px;border-radius:var(--r-md)}
.rev-track>*{flex:0 0 86%;min-width:0;scroll-snap-align:start}   /* mobile: 86% + peek */
@media(min-width:768px){.rev-track>*{flex-basis:calc((100% - var(--sp-5)) / 2)}}
@media(min-width:900px){.rev-track>*{flex-basis:calc((100% - 2*var(--sp-5)) / 3)}}
.rev-track .revcard{position:relative;display:flex;flex-direction:column}
.rev-track .revcard>p{font-size:var(--fs-body);color:var(--c-ink);line-height:var(--lh-relaxed)}
.rev-track .card:hover{transform:none;box-shadow:var(--sh-2)}    /* kein Lift im Scroll-Clip */
.rev-quote{position:absolute;top:2px;right:var(--sp-6);font-family:var(--font-d);font-weight:800;
  font-size:5rem;line-height:1;color:var(--c-red-tint);pointer-events:none;user-select:none}
.s-dark .rev-quote{color:rgba(255,90,100,.18)}
.rev-nav{display:none}
.js .rev-nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-5);
  margin-top:var(--sp-4)}
.rev-slider.rev-static .rev-nav{display:none}                    /* alles sichtbar → keine Nav */
.rev-btn{width:var(--tap);height:var(--tap);border-radius:50%;border:1.6px solid var(--c-line-2);
  background:#fff;display:grid;place-items:center;color:var(--c-ink);cursor:pointer;
  transition:border-color var(--t-fast),transform var(--t-fast) var(--e-out),opacity var(--t-fast)}
.rev-btn:hover{border-color:var(--c-ink);transform:translateY(-2px)}
.rev-btn:focus-visible{outline:2px solid var(--c-red);outline-offset:2px}
.rev-btn[disabled]{opacity:.35;pointer-events:none}
.rev-btn .icon{width:20px;height:20px}
.s-dark .rev-btn{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.rev-dots{display:flex;gap:10px;align-items:center}
.rev-dot{position:relative;width:6px;height:6px;padding:0;border:0;border-radius:var(--r-full);
  background:var(--c-line-2);cursor:pointer;
  transition:width var(--t-base) var(--e-out),background var(--t-base)}
.rev-dot::after{content:"";position:absolute;inset:-10px}        /* 26px+ Touch-Target */
.rev-dot[aria-current="true"]{width:20px;background:var(--c-red)}
@media(max-width:767px){.rev-btn{display:none}}                  /* mobil: Dots + Swipe */

/* ---------- Контакты и карта ---------------------------------------------------- */
.nap-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--sp-12);align-items:start}
@media(max-width:899px){.nap-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}}
.nap{display:grid;gap:var(--sp-6)}
.nap dl{display:grid;gap:var(--sp-2)}
.nap dt{font:700 var(--fs-over)/1 var(--font-b);letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-slate-2)}
.nap dd{font-size:var(--fs-card)}
.nap .row{display:flex;gap:var(--sp-3);align-items:flex-start}
.nap .row .icon{color:var(--c-red-ink);font-size:1.25rem;margin-top:2px;flex:none}
.open-dot{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:700;font-size:var(--fs-sm);
  color:var(--c-green-ink)}
/* flex:none обязателен: без него точка сжимается как flex-item и гало
   box-shadow рисуется полоской. */
.open-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-green);
  box-shadow:0 0 0 4px var(--c-green-tint);flex:none}
.open-dot[data-open="false"]{color:var(--c-slate-2)}
.open-dot[data-open="false"]::before{background:var(--c-line-2);box-shadow:0 0 0 4px var(--c-bg-3)}
/* .k-item span{display:block;font-size:.79rem;color:…} перебивал .open-dot по
   специфичности: компонент становился block, ::before — inline (width/height
   игнорируются), и box-shadow рисовал зелёный штрих вместо точки. */
.k-item .open-dot{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--c-green-ink);margin:6px 0 0}
.k-item .open-dot[data-open="false"]{color:var(--c-slate-2)}
.districts{font-size:var(--fs-sm);color:var(--c-slate);line-height:var(--lh-relaxed);max-width:64ch}

.map-facade{position:relative;border-radius:var(--r-2xl);overflow:hidden;background:var(--c-ink-700);
  aspect-ratio:16/11;border:1px solid var(--c-line)}
.map-facade iframe{width:100%;height:100%;border:0}
.map-veil{position:absolute;inset:0;display:grid;place-content:center;gap:var(--sp-4);justify-items:center;
  text-align:center;padding:var(--sp-8);color:#fff}
.map-veil > .icon{font-size:2.6rem;color:var(--c-red-on-dark)}
.map-veil p{font-size:var(--fs-sm);max-width:38ch;color:#A9AFBA;line-height:var(--lh-relaxed)}
.map-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}

/* ---------- CTA-полоса между секциями ---------------------------------------------
   Фото фары справа, текст слева. Градиент поверх снимка держит контраст текста
   независимо от того, что на фотографии. Шильдиков марок на снимке нет намеренно —
   чужая товарная марка на своём промо это лишний юридический риск. */
.ctaband{position:relative;background:#0B0E13;color:#fff;overflow:hidden;isolation:isolate}
.ctaband::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("../img/cta-headlight.jpg") center right/cover no-repeat}
.ctaband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#0B0E13 0%,rgba(11,14,19,.94) 42%,rgba(11,14,19,.55) 72%,rgba(11,14,19,.25) 100%)}
/* padding-block, а не сокращённый padding: сокращённая запись обнуляла боковые
   отступы .container, и на мобильном текст прилипал к краю экрана */
.ctaband .inner{position:relative;display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:center;
  justify-content:space-between;padding-block:var(--sp-16);min-height:280px}
.ctaband h2{font-size:var(--fs-d2);color:#fff;max-width:20ch}
.ctaband p{margin-top:var(--sp-4);color:#C9CDD6;font-size:var(--fs-lead);max-width:46ch;
  line-height:var(--lh-relaxed)}
.ctaband .btns{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media(max-width:899px){
  /* Фото остаётся видимым: тёмная заливка держится только под текстом сверху,
     а к низу светлеет — фара читается. Кнопки внизу имеют собственный фон,
     поэтому им светлая зона не мешает. */
  .ctaband::before{background-position:72% center}
  .ctaband::after{background:linear-gradient(180deg,
      rgba(11,14,19,.93) 0%,rgba(11,14,19,.86) 42%,rgba(11,14,19,.55) 74%,rgba(11,14,19,.34) 100%)}
  .ctaband .inner{padding-block:var(--sp-12) var(--sp-16);min-height:0;gap:var(--sp-6)}
  .ctaband h2{max-width:none}
  .ctaband p{max-width:none}
}

/* ---------- Финальный CTA ----------------------------------------------------------- */
.final{position:relative;padding:var(--sec-y) 0;background:var(--grad-dark);color:#fff;
  text-align:center;overflow:hidden}
.final h2{font-size:var(--fs-d2)}
.final p{margin:var(--sp-5) auto 0;max-width:62ch;color:#A9AFBA;font-size:var(--fs-lead);
  line-height:var(--lh-relaxed)}
.final .btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-8)}
.final-note{margin-top:var(--sp-6);font-size:var(--fs-sm);color:#8E96A4}

/* ---------- FAQ: всегда последняя секция перед футером ------------------------------ */
.faq-wrap{max-width:900px;margin:0 auto}

/* ==========================================================================
   Design-Pass 2026-08 — ритм секций, глубина, переходы (V2 «Klarheit»).
   Только аддитивные оверрайды поверх базовых определений выше; токены и
   правила docs/seo не трогаем (контейнер 1280, minmax(0,1fr), reduced-motion
   через токены длительностей).
   ========================================================================== */

/* Ритм: alt-полосы получают hairline-границы и мягкий вертикальный градиент
   вместо плоского серого — секции «переходят» друг в друга, а не стыкуются. */
.s-alt{background:linear-gradient(180deg,#F7F8FB 0%,var(--c-bg-alt) 24%,var(--c-bg-alt) 76%,#EEF1F6 100%);
  box-shadow:inset 0 1px 0 var(--c-line),inset 0 -1px 0 var(--c-line)}

/* Тёмные секции: красное свечение + мелкое зерно (как в l-hero), контент над слоем */
.s-dark{position:relative;overflow:hidden}
.s-dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
  radial-gradient(72% 95% at 86% 6%,rgba(227,6,19,.15),transparent 62%)}
.s-dark>.container{position:relative;z-index:1}

/* Красный штрих перед кикером убран решением владельца 12.08.2026 —
   вес несёт типографика (letter-spacing .12em в base.css). */

/* Центрированные шапки (FAQ): центрируем САМ бокс, а не только текст */
.sh-center{margin-inline:auto;text-align:center}

/* Карточки: тень покоя + реакция рамки на ховер */
.card{box-shadow:0 1px 2px rgba(14,17,23,.05);
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast),border-color var(--t-fast)}
.card:hover{border-color:var(--c-line-2)}

/* Ablauf-Schritte: Verbinder zwischen den Karten.
   Er liegt AUSSCHLIESSLICH in der Lücke zwischen zwei Karten, auf Höhe der
   Nummer — nie über einer Kartenkante und (im Einspalter) nie über dem Text.
   Freigeschaltet wird er einzeln je Spaltenanzahl, damit am Zeilenende kein
   Pfeil ins Leere zeigt. Farbe über mask + background, damit dunkle Sektionen
   dieselbe Form in Weiß bekommen. */
.flow{
  --flow-badge-center:calc(var(--sp-8) + 20px);
  --flow-chevron:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%2014'%3E%3Cpath%20d='M2%202%207%207%202%2012'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --flow-chevron-down:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%209'%3E%3Cpath%20d='M2%202%207%207%2012%202'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media(max-width:767px){.flow{--flow-badge-center:calc(var(--sp-6) + 20px)}}

.flow .flow-i::after{
  content:none;                       /* je Spaltenanzahl unten eingeschaltet */
  position:absolute;pointer-events:none;
  top:var(--flow-badge-center);left:100%;
  width:var(--sp-5);height:14px;transform:translateY(-50%);
  background:var(--c-line-2);
  -webkit-mask:var(--flow-chevron) center/9px 14px no-repeat;
          mask:var(--flow-chevron) center/9px 14px no-repeat;
}
.s-dark .flow .flow-i::after,.on-dark .flow .flow-i::after{background:rgba(255,255,255,.32)}

/* 4 Spalten */
@media(min-width:1100px){
  .flow.g-4 .flow-i:not(:nth-child(4n)):not(:last-child)::after{content:""}
}
/* 3 Spalten */
@media(min-width:900px){
  .flow.g-3 .flow-i:not(:nth-child(3n)):not(:last-child)::after{content:""}
}
/* 2 Spalten (.g-4 ab 720px, .g-3 zwischen 720 und 899px) */
@media(min-width:720px) and (max-width:1099px){
  .flow.g-4 .flow-i:not(:nth-child(2n)):not(:last-child)::after{content:""}
}
@media(min-width:720px) and (max-width:899px){
  .flow.g-3 .flow-i:not(:nth-child(2n)):not(:last-child)::after{content:""}
}
/* Einspalter: Chevron nach unten, mittig in der Lücke unter der Nummer */
@media(max-width:719px){
  .flow .flow-i:not(:last-child)::after{
    content:"";
    top:100%;left:calc(var(--sp-6) + 20px);
    width:14px;height:var(--sp-5);transform:translateX(-50%);
    -webkit-mask:var(--flow-chevron-down) center/14px 9px no-repeat;
            mask:var(--flow-chevron-down) center/14px 9px no-repeat;
  }
}

/* Преистаблица: карточка с тёмной шапкой вместо голой таблицы */
.pt{border:1px solid var(--c-line);box-shadow:var(--sh-1)}
.pt thead th{background:var(--c-ink);color:#EDF0F5}

/* FAQ: аккордеон как карточка */
.faq-wrap .acc{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);
  box-shadow:var(--sh-1);overflow:hidden}
.faq-wrap .acc-i:last-child{border-bottom:0}

/* Контакт-лист как карточка рядом с картой (kont) */
.nap{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-2xl);
  padding:var(--sp-8);box-shadow:var(--sh-1)}
@media(max-width:767px){.nap{padding:var(--sp-6)}}

/* ---------- Симптомы: «Wann in die Werkstatt?» --------------------------
   Вход по симптому, а не по названию услуги. Каждая карточка — ссылка на
   свою страницу услуги, поэтому блок заодно раздаёт внутренние ссылки. */
.sym-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-5);margin-top:var(--sp-10)}
@media(max-width:1099px){.sym-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:719px) {.sym-grid{grid-template-columns:minmax(0,1fr)}}

.sym{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--c-line);border-radius:var(--r-2xl);padding:var(--sp-8);
  transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast)}
.sym:hover{border-color:var(--c-line-2);box-shadow:var(--sh-2)}
@media(max-width:767px){.sym{padding:var(--sp-6)}}

.sym-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:var(--r-md);background:var(--c-red-tint);color:var(--c-red-ink);
  font-size:1.35rem;margin-bottom:var(--sp-5)}
.sym h3{font-size:var(--fs-d4);margin:0 0 var(--sp-4)}

.sym-signs{margin:0 0 var(--sp-5);padding:0;list-style:none;display:grid;gap:var(--sp-2)}
.sym-signs li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-sm);
  color:var(--c-slate);line-height:var(--lh-relaxed)}
/* Тире, а не галочка: это симптом, а не преимущество. */
.sym-signs li::before{content:"";position:absolute;left:0;top:.68em;
  width:10px;height:1.5px;background:var(--c-red-ink);border-radius:1px}

.sym-note{margin:0 0 var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--c-line);font-size:var(--fs-sm);
  color:var(--c-ink);line-height:var(--lh-relaxed)}
.sym-link{margin-top:auto;display:inline-flex;align-items:center;gap:var(--sp-2);
  font-weight:700;font-size:var(--fs-sm);color:var(--c-red-ink)}
.sym-link .icon{transition:transform var(--t-fast) var(--e-out)}
.sym:hover .sym-link .icon{transform:translateX(3px)}

/* Финальный CTA: красное свечение снизу + зерно */
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
  radial-gradient(56% 72% at 50% 112%,rgba(227,6,19,.20),transparent 64%)}
.final .container{position:relative}

/* ==========================================================================
   Фотогалерея (секция gallery)
   Переехала из home.css 06.09.2026: home.css грузится только на главной,
   а галерея живёт на /galerie/ и /ueber-uns/ — сетка оставалась без стилей.
   ========================================================================== */
.gal-intro{max-width:66ch;margin:0 0 var(--sp-8);font-size:var(--fs-body);
  color:var(--c-slate);line-height:var(--lh-relaxed)}

.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.gallery-grid figure{margin:0;min-width:0}
.gallery-grid img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-lg);border:1px solid var(--c-line);background:var(--c-line)}
@media(max-width:899px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Мозаика: первый кадр занимает 2×2 — иначе ряд одинаковых прямоугольников
   читается как каталог, а не как «вот так у нас выглядит». */
/* Мозаика. Крупная плитка занимает 2×2, но её содержимое выведено из потока:
   иначе intrinsic-высота картинки (портрет 800×1067) растягивала оба ряда
   сетки до 526 px вместо 294 и вся раскладка разъезжалась. Ряды считаются
   по обычным плиткам 4:3, а картинка просто заполняет получившийся блок. */
.gallery-grid.gal-mosaic>figure:first-child{grid-column:span 2;grid-row:span 2;
  position:relative;min-height:0}
.gallery-grid.gal-mosaic>figure:first-child>*{position:absolute;inset:0;height:100%}
.gallery-grid.gal-mosaic>figure:first-child img{position:absolute;inset:0;
  width:100%;height:100%;aspect-ratio:auto;border-radius:var(--r-lg)}
@media(max-width:719px){
  .gallery-grid.gal-mosaic>figure:first-child{grid-column:auto;grid-row:auto;position:static}
  .gallery-grid.gal-mosaic>figure:first-child>*{position:static;height:auto}
  .gallery-grid.gal-mosaic>figure:first-child img{position:static;aspect-ratio:4/3}
}

/* Мобильный: горизонтальная лента со снап-скроллом вместо колонки из 12 фото.
   Приём и разметка те же, что у слайдера отзывов (.rev-track). */
@media(max-width:719px){
  .gallery-grid{display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 2px var(--sp-4)}
  .gallery-grid::-webkit-scrollbar{display:none}
  .gallery-grid>figure{flex:0 0 82%;scroll-snap-align:start}
}
/* Подсказка про свайп нужна только там, где лента действительно скроллится.
   Базовое правило обязано стоять ДО медиазапроса, иначе перебивает его. */
.gal-hint{display:none;margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--c-slate)}
@media(max-width:719px){.gal-hint{display:block}}

/* Кнопка-обёртка: сама картинка остаётся картинкой, кликабельность —
   на настоящей кнопке, иначе лайтбокс недоступен с клавиатуры. */
.gal-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out)}
.gal-btn:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.gal-btn:focus-visible{outline:2px solid var(--c-red);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.gal-btn,.gal-btn:hover{transform:none;transition:none}}

/* ---------------------------------------------------------------- лайтбокс */
.gal-lb{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;
  background:transparent;color:#fff;overflow:hidden}
.gal-lb::backdrop{background:rgba(8,10,14,.965)}
.gal-lb-fig{margin:0;height:100dvh;display:grid;
  grid-template-rows:minmax(0,1fr) auto;align-items:center;
  padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.gal-lb-img{max-width:min(100%,1400px);max-height:100%;margin:0 auto;display:block;
  object-fit:contain;border-radius:var(--r-md)}
.gal-lb-cap{margin:var(--sp-4) auto 0;max-width:70ch;text-align:center;
  font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:rgba(255,255,255,.82)}
.gal-lb-count{display:block;margin-top:var(--sp-2);font-size:var(--fs-over);
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.gal-lb-btn{position:fixed;top:50%;transform:translateY(-50%);
  width:var(--tap);height:var(--tap);border-radius:50%;border:1.6px solid rgba(255,255,255,.28);
  background:rgba(18,21,26,.7);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast)}
.gal-lb-btn:hover{border-color:#fff;background:rgba(18,21,26,.95)}
.gal-lb-btn:focus-visible{outline:2px solid var(--c-red);outline-offset:2px}
.gal-lb-btn[disabled]{opacity:.3;pointer-events:none}
.gal-lb-prev{left:var(--sp-4)}
.gal-lb-next{right:var(--sp-4)}
.gal-lb-close{position:fixed;top:var(--sp-4);right:var(--sp-4);transform:none}
.gal-lb-btn .icon{width:20px;height:20px}
@media(max-width:719px){
  .gal-lb-prev,.gal-lb-next{top:auto;bottom:var(--sp-4);transform:none}
  .gal-lb-prev{left:var(--sp-5)} .gal-lb-next{right:var(--sp-5)}
}
/* Появление: fade + лёгкий scale, 200 ms. Отключается вместе с анимациями. */
.gal-lb[open] .gal-lb-fig{animation:galIn 200ms var(--e-out) both}
@keyframes galIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gal-lb[open] .gal-lb-fig{animation:none}}