/* Tierbestattung.pro: базовые стили, минимал. Контейнер 1440. */

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #efebe3;
  --surface-3: #e6eee9;
  --ink: #1f2a27;
  --ink-2: #55625d;
  --ink-3: #7f8a86;
  --line: #e2ddd3;
  --line-2: #cfd9d3;
  --primary: #2c5f4e;
  --primary-dark: #214a3c;
  --primary-soft: #dfeae4;
  --accent: #b9773a;
  --danger: #a33a2a;
  --dark: #1c2825;
  --radius-s: 10px;
  --radius: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --shadow-s: 0 1px 2px rgba(31, 42, 39, .05), 0 2px 8px rgba(31, 42, 39, .04);
  --shadow: 0 1px 2px rgba(31, 42, 39, .05), 0 12px 32px rgba(31, 42, 39, .08);
  --container: 1440px;
  --gutter: 20px;
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 20px; }
}
@media (min-width: 1280px) {
  h1 { font-size: 46px; letter-spacing: -0.02em; }
  h2 { font-size: 34px; }
}
:focus-visible { outline: 3px solid rgba(44, 95, 78, .45); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: 48px 0; }
@media (min-width: 768px) { .section { padding: 72px 0; } }
@media (min-width: 1280px) { .section { padding: 88px 0; } }
.section--alt { background: var(--surface); }
.section__head { max-width: 860px; margin-bottom: 28px; }
.section__head p { color: var(--ink-2); margin: 12px 0 0; font-size: 17px; }
@media (min-width: 768px) { .section__head { margin-bottom: 36px; } .section__head p { font-size: 18px; } }
.section__foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; color: var(--ink-3); }
.note { font-size: 14px; color: var(--ink-3); margin-top: 14px; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 11px 20px; border-radius: 12px;
  font: inherit; font-weight: 600; font-size: 16px; line-height: 1.2;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(44, 95, 78, .22); }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--secondary { background: var(--surface); color: var(--primary); border-color: var(--line-2); }
.btn--secondary:hover { border-color: var(--primary); color: var(--primary-dark); }
.btn--ghost { background: transparent; color: var(--primary); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn--light { background: #fff; color: var(--primary-dark); }
.btn--light:hover { background: var(--primary-soft); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--outline-light:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 10px; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.link-arrow svg { width: 18px; height: 18px; transition: transform .18s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* Иконки */
.icon { width: 22px; height: 22px; flex: none; }
.icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); flex: none; }
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge--lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-badge--lg svg { width: 28px; height: 28px; }

/* Карточки */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px; box-shadow: var(--shadow-s); transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.card:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); margin-bottom: 0; }
.card--link { display: block; color: inherit; }
.card--link:hover { color: inherit; transform: translateY(-2px); }
.card--link h3 { color: var(--primary); }
.grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .grid { gap: 20px; } }
@media (min-width: 1024px) { .grid { gap: 24px; } }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
.grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--cities { grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 480px) { .grid--cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .grid--cities { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.grid--4.steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4, .grid--4.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Плейсхолдер изображения */
.img-ph { position: relative; overflow: hidden; border-radius: var(--radius-l); background: linear-gradient(135deg, #e8ede8 0%, #d9e3dc 55%, #cfdbd3 100%); aspect-ratio: 4 / 3; }
.img-ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .55), transparent 60%); }
.img-ph__cap { position: absolute; left: 12px; bottom: 10px; right: 12px; z-index: 1; font-size: 12px; line-height: 1.35; color: #3f5148; opacity: .75; }
.img-ph--hero { aspect-ratio: 5 / 4; border-radius: var(--radius-xl); }
.img-ph--wide { aspect-ratio: 16 / 10; }

/* ===== Хедер ===== */
.topbar { background: var(--dark); color: #d9e2de; font-size: 14px; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar__text { display: none; }
.topbar__text--mobile { display: inline; }
.topbar__right { display: flex; align-items: center; gap: 16px; }
.topbar__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 15px; }
.topbar__phone svg { width: 16px; height: 16px; }
.topbar .btn--sm { display: none; }
@media (min-width: 768px) {
  .topbar .btn--sm { display: inline-flex; background: #fff; color: var(--primary-dark); }
  .topbar .btn--sm:hover { background: var(--primary-soft); }
}
@media (min-width: 1024px) {
  .topbar__text { display: inline; }
  .topbar__text--mobile { display: none; }
}
.topbar__phone { white-space: nowrap; }

.header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
@media (min-width: 1024px) { .header__row { min-height: 80px; } }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__mark { width: 40px; height: 40px; border-radius: 12px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.logo__mark svg { width: 22px; height: 22px; }
.logo__name { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1.1; }
.logo__slogan { display: none; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
@media (min-width: 768px) { .logo__slogan { display: block; } .logo__name { font-size: 22px; } }

.burger { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; }
.burger svg { width: 20px; height: 20px; }
.burger .i-close { display: none; }
body.nav-open .burger .i-menu { display: none; }
body.nav-open .burger .i-close { display: block; }
@media (min-width: 1024px) { .burger { display: none; } }

/* Навигация: мобильная панель */
.nav { display: none; }
body.nav-open .nav { display: block; position: fixed; inset: 0; top: 0; z-index: 60; background: var(--surface); overflow-y: auto; padding: 0 0 120px; }
.nav__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.nav__list { display: block; padding: 8px var(--gutter) 0; }
.nav__item { border-bottom: 1px solid var(--line); }
.nav__item > .nav__link, .nav__item > .nav__btn, .nav__row > .nav__link, .nav__row > .nav__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 12px 0; background: none; border: 0; font: inherit; font-weight: 600; font-size: 17px; color: var(--ink); text-align: left; cursor: pointer; }
.nav__item > .nav__link:hover, .nav__item > .nav__btn:hover, .nav__row > .nav__link:hover, .nav__row > .nav__btn:hover { color: var(--primary); }
.nav__btn svg { width: 18px; height: 18px; transition: transform .18s var(--ease); color: var(--ink-3); }
.nav__item.is-open > .nav__btn svg { transform: rotate(180deg); }
.nav__row { display: flex; align-items: center; }
.nav__row > .nav__link { flex: 1; }
.nav__row > .nav__btn { width: 54px; justify-content: center; flex: none; }
.nav__panel { display: none; padding: 0 0 12px; }
.nav__item.is-open > .nav__panel, .nav__item.is-open > .nav__row + .nav__panel { display: block; }
.sub li a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.sub li a:hover { background: var(--surface-2); color: var(--primary-dark); }
.sub__t { display: block; font-weight: 600; font-size: 15px; }
.sub__d { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.mega__title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 4px 0 8px; }
.mega__all { display: inline-flex; margin: 0 0 12px; font-weight: 600; }
.mega__grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.mega__group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.mega__land { font-weight: 600; font-size: 15px; color: var(--ink); display: block; padding: 4px 0; }
.mega__land:hover { color: var(--primary); }
.mega__cities { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 4px; }
.mega__cities a { font-size: 14px; color: var(--ink-2); padding: 2px 0; }
.mega__cities a:hover { color: var(--primary); }
.mega__foot { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.mega__foot a { font-weight: 600; white-space: nowrap; }
.nav__cta { padding: 16px var(--gutter) 0; display: grid; gap: 10px; }
.nav__cta .nav__phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--ink); min-height: 48px; }
.nav__cta .nav__phone svg { width: 18px; height: 18px; color: var(--primary); }

/* Навигация: десктоп */
@media (min-width: 1024px) {
  .nav { display: block; border-top: 1px solid var(--line); position: relative; }
  .nav__top, .nav__cta { display: none !important; }
  .nav__list { display: flex; align-items: stretch; gap: 4px; padding: 0; margin: 0 -10px; }
  .nav__item { border: 0; position: relative; }
  .nav__item > .nav__link, .nav__item > .nav__btn, .nav__row > .nav__link, .nav__row > .nav__btn { width: auto; min-height: 52px; padding: 0 12px; font-size: 15.5px; gap: 6px; }
  .nav__row { height: 52px; }
  .nav__row > .nav__link { flex: none; padding-right: 2px; }
  .nav__row > .nav__btn { width: auto; padding: 0 10px 0 2px; min-height: 52px; }
  .nav__item.is-active > .nav__link, .nav__item.is-active .nav__row > .nav__link { color: var(--primary); }
  .nav__item > .nav__btn svg, .nav__row > .nav__btn svg { width: 15px; height: 15px; }
  .nav__item::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--primary); border-radius: 2px 2px 0 0; opacity: 0; transition: opacity .15s; }
  .nav__item:hover::after, .nav__item.is-open::after, .nav__item.is-active::after { opacity: 1; }
  .nav__panel { position: absolute; top: 100%; left: 0; min-width: 340px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); z-index: 70; margin-top: -1px; }
  .nav__item.is-open > .nav__panel, .nav__item.is-open > .nav__row + .nav__panel { display: block; }
  @media (hover: hover) {
    .nav__item:hover > .nav__panel, .nav__item:hover > .nav__row + .nav__panel, .nav__item:focus-within > .nav__panel, .nav__item:focus-within > .nav__row + .nav__panel { display: block; }
  }
  .nav__item.is-open > .nav__btn svg, .nav__item:hover > .nav__btn svg { transform: rotate(180deg); }
  .sub li a { padding: 10px 12px; }
  .nav__panel--mega { left: 0; width: min(1200px, 100%); padding: 24px 28px 20px; }
  .nav__item--mega { position: static; }
  .mega__title { font-size: 17px; color: var(--ink); margin: 0 0 4px; }
  .mega__all { margin-bottom: 16px; }
  .mega__grid { grid-template-columns: repeat(4, 1fr); gap: 8px 20px; }
  .mega__group { border: 0; padding: 6px 0; border-top: 1px solid var(--line); }
  .mega__cities { flex-direction: column; gap: 0; }
  .mega__cities a { padding: 2px 0; }
  .mega__foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
}
@media (min-width: 1280px) {
  .nav__list { gap: 8px; }
  .nav__item > .nav__link, .nav__item > .nav__btn, .nav__row > .nav__link { font-size: 16px; padding: 0 14px; }
}

/* Липкая полоса на мобильном */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px var(--gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.sticky-bar.is-hidden { display: none; }
@media (min-width: 768px) { .sticky-bar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 76px; } }

/* ===== Hero ===== */
.hero { padding: 40px 0 48px; background: linear-gradient(180deg, #fbfaf7 0%, var(--bg) 100%); }
@media (min-width: 768px) { .hero { padding: 56px 0 64px; } }
@media (min-width: 1280px) { .hero { padding: 72px 0 88px; } }
.hero__grid { display: grid; gap: 32px; align-items: center; }
.hero__grid > * { min-width: 0; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.08fr .92fr; gap: 56px; } }
@media (min-width: 1280px) { .hero__grid { gap: 80px; } }
.hero h1 { max-width: 16ch; }
@media (min-width: 1024px) { .hero h1 { max-width: 19ch; } }
.hero__lead { font-size: 17px; color: var(--ink-2); margin: 18px 0 26px; max-width: 60ch; }
@media (min-width: 768px) { .hero__lead { font-size: 19px; } }
.search { display: grid; gap: 10px; }
.search label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.search__row { display: grid; gap: 10px; }
@media (min-width: 640px) { .search__row { grid-template-columns: 1fr auto; } }
.input { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); font: inherit; font-size: 17px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(44, 95, 78, .14); }
.search .btn { min-height: 52px; }
.hero__phone { margin-top: 18px; font-size: 16px; color: var(--ink-2); }
.hero__phone a { font-weight: 700; color: var(--ink); white-space: nowrap; }
.hero__phone a:hover { color: var(--primary); }
.badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
@media (min-width: 1024px) { .badges { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.badge { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.badge .icon-badge { width: 36px; height: 36px; border-radius: 10px; }
.badge .icon-badge svg { width: 18px; height: 18px; }

/* ===== Города ===== */
.city-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding: 12px 12px 12px 14px; min-width: 0; font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; color: var(--ink); box-shadow: var(--shadow-s); transition: border-color .15s, box-shadow .2s, transform .2s; }
.city-tile:hover { border-color: var(--primary); color: var(--primary-dark); box-shadow: var(--shadow); transform: translateY(-1px); }
.city-tile__l { display: flex; align-items: center; gap: 10px; min-width: 0; line-height: 1.3; }
@media (min-width: 768px) { .city-tile { font-size: 16px; padding: 14px 16px; gap: 12px; } }
.city-tile svg { width: 18px; height: 18px; color: var(--primary); flex: none; }
.city-tile .chev { color: var(--ink-3); }
.regions { margin-top: 32px; }
.regions summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 17px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.regions summary::-webkit-details-marker { display: none; }
.regions summary svg { width: 18px; height: 18px; color: var(--ink-3); transition: transform .18s; }
.regions[open] summary svg { transform: rotate(180deg); }
.regions__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; padding: 14px 4px 0; }
.regions__list a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 15px; border-bottom: 1px solid transparent; }
.regions__list a:hover { color: var(--primary); }
@media (min-width: 768px) {
  .regions summary { pointer-events: none; padding: 0; border: 0; background: none; font-size: 15px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
  .regions summary svg { display: none; }
  .regions__list { grid-template-columns: repeat(4, 1fr); padding: 12px 0 0; }
}

/* ===== Шаги ===== */
.steps { counter-reset: step; }
.step { position: relative; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
.step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.step__num { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); margin: 0; }

/* CTA-полоса */
.cta { background: var(--primary); color: #fff; border-radius: var(--radius-l); padding: 28px 24px; display: grid; gap: 18px; }
.cta__text { font-size: 18px; font-weight: 600; line-height: 1.35; max-width: 34ch; }
.cta__phone { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; }
.cta__phone svg { width: 22px; height: 22px; }
.cta__phone:hover { color: #fff; }
.cta__actions { display: grid; gap: 10px; }
@media (min-width: 640px) { .cta__actions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .cta { grid-template-columns: 1.2fr auto auto; align-items: center; padding: 32px 40px; gap: 32px; }
  .cta__actions { display: flex; }
  .cta__text { font-size: 20px; }
}

/* ===== Кремация ===== */
.kcard { display: flex; flex-direction: column; }
.kcard__price { margin-top: auto; padding: 14px 16px; background: var(--surface-3); border-radius: 12px; font-weight: 600; color: var(--primary-dark); margin-top: 20px; margin-bottom: 14px; font-size: 15.5px; }
.kcard p { flex: none; }

/* ===== Животные ===== */
.acard { display: flex; flex-direction: column; gap: 14px; }
.acard h3 a { color: var(--primary); }
.acard h3 a:hover { color: var(--primary-dark); }

/* ===== Таблица цен ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
.table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; }
@media (min-width: 768px) { .table { font-size: 16px; } }
.table th, .table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; background: #fbfaf7; }
.table tr:last-child td { border-bottom: 0; }
.table td:not(:first-child) { font-weight: 600; color: var(--primary-dark); white-space: nowrap; }
.table td:first-child { font-weight: 500; }
.price-text { max-width: 900px; margin-top: 20px; color: var(--ink-2); }

/* ===== Урны ===== */
.pcard { padding: 0; overflow: hidden; }
.pcard .img-ph { border-radius: 0; }
.pcard__body { padding: 18px 20px 20px; }
.pcard__body h3 { font-size: 17px; }
.pcard__body p { font-size: 15px; }
@media (min-width: 1024px) { .grid--urnen { grid-template-columns: repeat(3, 1fr); } .grid--urnen > :nth-child(4), .grid--urnen > :nth-child(5) { grid-column: span 1; } }
@media (min-width: 1280px) { .grid--urnen { grid-template-columns: repeat(5, 1fr); } }

/* ===== Отзывы ===== */
.review { border-style: dashed; border-color: var(--line-2); background: #fbfaf7; box-shadow: none; }
.review__quote { font-size: 16px; color: var(--ink-2); font-style: italic; }
.review__stars { display: flex; gap: 4px; color: #cdb37a; margin-bottom: 12px; }
.review__stars svg { width: 18px; height: 18px; }
.review__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.review__meta b { color: var(--ink-2); font-weight: 600; }
.ph { color: var(--ink-3); font-style: normal; }
.reviews-track { display: grid; gap: 16px; }
@media (max-width: 767px) {
  .reviews-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0; padding: 4px 0 12px; scrollbar-width: none; }
  .reviews-track::-webkit-scrollbar { display: none; }
  .reviews-track > * { flex: 0 0 84%; scroll-snap-align: start; }
}
@media (min-width: 768px) { .reviews-track { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ===== Партнёры ===== */
.checks { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 1024px) { .checks { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; } }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; }
.check svg { width: 22px; height: 22px; color: var(--primary); flex: none; margin-top: 2px; }
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
@media (min-width: 768px) { .logos { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
.logo-ph { aspect-ratio: 5 / 2; border: 1.5px dashed var(--line-2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-3); background: #fbfaf7; text-align: center; padding: 6px; }

/* ===== Ratgeber ===== */
.rcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.rcard .img-ph { border-radius: 0; aspect-ratio: 16 / 10; }
.rcard__body { padding: 18px 20px 20px; }
.rcard__body h3 { font-size: 18px; }
.rcard__body p { font-size: 15px; }

/* ===== FAQ ===== */
.faq { max-width: 960px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--shadow-s); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; transition: transform .2s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--primary); }
.faq__a { padding: 0 22px 20px; color: var(--ink-2); }
.faq__a p { margin: 0; }
.faq__a a { font-weight: 600; }

/* ===== Über ===== */
.about { display: grid; gap: 24px; }
@media (min-width: 1024px) { .about { grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: stretch; } }
.about__text p { color: var(--ink-2); }
.about__links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 8px; }
.about__calm { background: var(--surface-3); border-radius: var(--radius-l); padding: 28px; }
.about__calm h3 { margin-bottom: 12px; }
.about__calm p { color: var(--ink-2); margin: 0; }
@media (min-width: 1024px) { .about__calm { padding: 36px; } }
.about + .cta { margin-top: 40px; }

/* ===== Футер ===== */
.footer { background: var(--dark); color: #c9d3ce; padding: 48px 0 32px; margin-top: 24px; }
@media (min-width: 768px) { .footer { padding: 64px 0 36px; } }
.footer a { color: #d8e0dc; }
.footer a:hover { color: #fff; }
.footer__cols { display: grid; gap: 8px; }
@media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1024px) { .footer__cols { grid-template-columns: repeat(4, 1fr); gap: 40px; } }
.f-col__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 0; margin: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); background: none; font: inherit; font-weight: 700; font-size: 16px; color: #fff; text-align: left; cursor: default; }
.f-col__title svg { width: 18px; height: 18px; color: #8f9c97; display: none; transition: transform .18s; }
.f-col__list { padding: 12px 0 8px; display: grid; gap: 2px; }
.f-col__list a { display: block; padding: 5px 0; font-size: 15px; line-height: 1.4; }
.f-col__sub { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8f9c97; padding: 12px 0 4px; font-weight: 700; }
@media (max-width: 639px) {
  .f-col__title { cursor: pointer; }
  .f-col__title svg { display: block; }
  .f-col.is-collapsed .f-col__list { display: none; }
  .f-col.is-collapsed .f-col__title svg { transform: rotate(0); }
  .f-col:not(.is-collapsed) .f-col__title svg { transform: rotate(180deg); }
}
@media (min-width: 640px) { .f-col__title { padding: 0 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); } }
.footer__contact { margin-top: 36px; padding: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-l); display: grid; gap: 16px; }
@media (min-width: 1024px) { .footer__contact { grid-template-columns: 1fr 1fr 1.2fr auto; align-items: center; gap: 24px; padding: 24px 32px; margin-top: 48px; } }
.footer__contact-item { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: #e6ece9; }
.footer__contact-item svg { width: 20px; height: 20px; color: #9fd4bf; flex: none; }
.footer__contact-item a { color: #fff; font-weight: 600; }
.footer__contact .btn--light, .footer .btn--light { justify-self: start; color: var(--primary-dark); }
.footer .btn--light:hover { color: var(--primary-dark); background: var(--primary-soft); }
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: 1.1fr 1fr 1.6fr 1fr; }
  .f-col--wide .f-col__list { display: block; columns: 2; column-gap: 24px; }
  .f-col--wide .f-col__list li { padding: 1px 0; }
  .f-col--wide .f-col__list li { break-inside: avoid; }
}
.footer__about { margin-top: 28px; font-size: 14px; color: #9fa9a5; max-width: 70%; }
@media (max-width: 767px) { .footer__about { max-width: 100%; } }
.footer__bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: #9fa9a5; }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__bottom button { background: none; border: 0; padding: 0; font: inherit; color: #d8e0dc; cursor: pointer; }
.footer__bottom button:hover { color: #fff; }

/* ==========================================================================
   Внутренние страницы (site-build, 2026-09). Новые блоки: хлебные крошки,
   hero внутренних страниц, текстовые секции, статьи, формы, списки городов.
   Существующие правила выше не менялись, здесь только дополнения на тех же
   переменных дизайн-системы.
   ========================================================================== */

/* Подпись города в Topbar, CTA и липкой полосе */
.topbar__city { display: none; color: #aebbb6; font-size: 13px; white-space: nowrap; }
@media (min-width: 1024px) { .topbar__city { display: inline; } }
/* без своего телефона (2026-10-08) в панели одна кнопка заявки на всю ширину */
.sticky-bar { grid-template-columns: 1fr; }
.sticky-bar__city { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.2; text-align: center; color: var(--ink-3); }
.cta__tel { display: grid; gap: 4px; }
.cta__city { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .78); }

/* Хлебные крошки (общий блок 6.7) */
.breadcrumbs { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 10px 0; }
.breadcrumbs li { display: inline-flex; align-items: center; color: var(--ink-3); }
.breadcrumbs li + li::before { content: ">"; margin: 0 8px; color: var(--ink-3); }
.breadcrumbs a { color: var(--ink-2); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs li[aria-current] { color: var(--ink); font-weight: 600; }

/* Hero внутренних страниц: одна колонка, без изображения */
.hero--inner { padding: 32px 0 40px; }
@media (min-width: 768px) { .hero--inner { padding: 48px 0 56px; } }
@media (min-width: 1280px) { .hero--inner { padding: 64px 0 72px; } }
.hero__inner { max-width: 920px; }
.hero--inner h1 { max-width: 24ch; }
@media (min-width: 1024px) { .hero--inner h1 { max-width: 28ch; } }
.hero__inner > * + * { margin-top: 18px; }
.hero__inner .hero__lead { margin: 18px 0 0; }
.hero__tel { margin: 22px 0 0; }
.hero__tel a { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.hero__tel a:hover { color: var(--primary); }
.hero__tel svg { width: 24px; height: 24px; color: var(--primary); }
.hero__tel-cap { margin: 4px 0 0 !important; color: var(--ink-2); font-size: 15px; }
.hero__actions { display: grid; gap: 10px; }
@media (max-width: 639px) { .hero__actions .btn, .section__foot .btn, .form__actions .btn, .bridge .btn { white-space: normal; text-align: center; } }
@media (min-width: 640px) { .hero__actions { display: flex; flex-wrap: wrap; } }
.hero__inner .badges { margin-top: 26px; }
@media (max-width: 1023px) { .hero__inner .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .hero__inner .badge { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }
@media (max-width: 359px) { .hero__inner .badges { grid-template-columns: minmax(0, 1fr); } }
/* Главная, экраны уже 380 px: бейджи Hero вылезали за край (дорожки 1fr не сжимаются меньше текста) */
@media (max-width: 1023px) { .hero .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero .badge { overflow-wrap: anywhere; } }
@media (max-width: 767px) { body:has(.sticky-bar__city) { padding-bottom: 96px; } }
@media (min-width: 1024px) {
  .badges--3 { grid-template-columns: repeat(3, 1fr); }
  .badges--2 { grid-template-columns: repeat(2, 1fr); }
  .badges--1 { grid-template-columns: 1fr; max-width: 420px; }
}
.hero--form .hero__grid { align-items: start; }
@media (min-width: 1024px) { .hero--form .hero__grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.hero__grid--contact { align-items: start; }
.tiles { display: grid; gap: 10px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tile p { margin: 0; color: var(--ink-2); }
.tile strong { color: var(--ink); }

/* Длинные немецкие составные слова в заголовках на узких экранах */
@media (max-width: 639px) {
  .hero--inner h1, .article-head h1, .section__head h2, .article-sec h2, .article-sec h3, .prose h3, .card h3, .form-card h2, .legal h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* Текстовые секции */
.prose { max-width: 860px; color: var(--ink-2); }
.prose > :not(:first-child) { margin-top: 16px; }
.section__head p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; font-weight: 500; }
.prose p { margin: 0; }
.prose h3 { color: var(--ink); }
.prose > h3:not(:first-child), .article-sec > h3:not(:first-child) { margin-top: 28px; }
.prose a, .note a, .faq__a a, .card p a, .checks a, .table a, .lines a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose strong, .checks strong, .card strong { color: var(--ink); font-weight: 600; }
.section__head + .prose, .prose + .table-wrap, .prose + .checks, .prose + .grid, .table-wrap + .prose, .note + .prose,
.checks + .prose, .grid + .prose, .faq + .prose, .steps + .prose, .cta + .prose, .prose + .cta, .table-wrap + .table-wrap,
.link-cols + .prose, .chips + .prose, .quotes + .prose, .prose + .quotes, .grid + .grid, .lines + .prose, .prose + .lines,
.prose + .faq, .prose + .steps, .prose + .chips, .prose + .link-cols, .badges + .prose, .prose + .badges { margin-top: 28px; }
.section__head + .checks { margin-top: 0; }
.section__foot + .cta, .cta + .form-card, .note + .cta, .grid + .cta, .chips + .cta, .prose + .form-card { margin-top: 36px; }
.steps + .prose { margin-top: 36px; }
.list { padding-left: 1.2em; list-style: disc; }
.list li + li { margin-top: 8px; }
.list li::marker { color: var(--primary); }
.list--ol { list-style: decimal; padding-left: 1.4em; }
.list--ol li::marker { color: var(--primary); font-weight: 700; }
.checks--1 { grid-template-columns: 1fr !important; }
.check span { min-width: 0; }
.table--text td:not(:first-child) { font-weight: 400; color: var(--ink-2); white-space: normal; }
.table--text td:first-child { font-weight: 600; }
.table--text { min-width: 640px; }
.more-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.muted { margin: 0; }

/* Карточки и сетки */
.cards .card h3 a { color: var(--primary); }
.cards .card h3 a:hover { color: var(--primary-dark); }
.cards .card .link-arrow { margin-top: 14px; }
.cards .card p + p { margin-top: 10px; }
.card.kcard .kcard__price { margin-top: auto; }
.quote { margin: 0; background: #fbfaf7; }
.quote p { font-size: 17px; color: var(--ink); font-style: italic; }

/* Ссылки-чипы и списки городов */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none !important; }
.chip:hover { border-color: var(--primary); color: var(--primary-dark); }
.link-cols { display: grid; gap: 2px 24px; }
@media (min-width: 640px) { .link-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .link-cols { grid-template-columns: repeat(3, 1fr); } }
.link-cols li { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
.link-cols a { font-weight: 600; }
.land-groups { display: grid; gap: 16px; }
@media (min-width: 1024px) { .land-groups { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; } }
.land-group { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.land-group h3 { font-size: 18px; margin-bottom: 12px; }
.land-group .chip { min-height: 34px; padding: 5px 12px; font-size: 14px; }
.lines { display: grid; gap: 10px; max-width: 860px; }
.lines li { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); }

/* Оглавление */
.section--toc { padding: 28px 0; }
.toc { max-width: 860px; }
.toc details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: 700; font-size: 16px; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary svg { width: 18px; height: 18px; color: var(--ink-3); transition: transform .18s; }
.toc details[open] summary svg { transform: rotate(180deg); }
.toc ol { padding: 0 18px 14px 36px; list-style: decimal; color: var(--ink-3); }
.toc li { padding: 4px 0; }
.toc a { color: var(--primary); }
@media (min-width: 768px) { .toc--cols ol { columns: 2; column-gap: 40px; } .toc--cols li { break-inside: avoid; } }
.legal .toc ol { padding: 14px 18px 14px 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
[id] { scroll-margin-top: 16px; }

/* Статьи Ratgeber */
.article-head { padding: 32px 0 8px; background: linear-gradient(180deg, #fbfaf7 0%, var(--bg) 100%); }
@media (min-width: 768px) { .article-head { padding: 48px 0 12px; } }
.article-col { max-width: 820px; }
.article-head h1 { font-size: 30px; }
@media (min-width: 768px) { .article-head h1 { font-size: 38px; } }
@media (min-width: 1280px) { .article-head h1 { font-size: 42px; } }
.article-meta { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }
.section--article { padding-top: 24px; }
.section--tight { padding: 32px 0; }
@media (min-width: 768px) { .section--tight { padding: 40px 0; } }
.section--last { padding-bottom: 56px; }
.article-col > * + * { margin-top: 28px; }
.article-sec { color: var(--ink-2); }
.article-sec > :not(:first-child) { margin-top: 16px; }
.article-sec h2 { margin-top: 12px; font-size: 26px; }
@media (min-width: 768px) { .article-sec h2 { font-size: 30px; } }
.article-sec h3 { color: var(--ink); margin-top: 24px; }
.article-sec p { margin: 0; }
.article-sec .table-wrap, .article-sec .faq, .article-sec .steps, .article-sec .quotes { margin-top: 20px; }
.article-sec a:not(.btn):not(.link-arrow) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.article-sec .grid--4.steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .article-sec .grid--4.steps, .article-sec .grid--3.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kurz { padding: 22px 22px 18px; background: var(--surface-3); border-radius: var(--radius-l); }
.kurz h2 { font-size: 22px; margin-bottom: 14px; }
.kurz .check { background: rgba(255, 255, 255, .7); border-color: transparent; }
.hero__inner .kurz { margin-top: 26px; }
.bridge { padding: 24px; background: var(--surface-3); border-radius: var(--radius-l); color: var(--ink-2); }
.bridge > :not(:first-child) { margin-top: 14px; }
.bridge h3 { color: var(--ink); }
.bridge p { margin: 0; }
.bridge .search label { color: var(--ink-2); }
.bridge__tel a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; color: var(--ink); }
.bridge__tel svg { width: 20px; height: 20px; color: var(--primary); }
.bridge__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bridge--wide { max-width: 860px; }
.bridge--wide .section__head { margin-bottom: 0; }
.section-title { margin-bottom: 24px; }
.sources h2 { font-size: 22px; margin-bottom: 12px; }
.sources, .sources p { font-size: 15px; color: var(--ink-3); }
.sources .list li { font-size: 15px; }
.author { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.author p { margin: 0; }
.author__name { font-weight: 700; color: var(--ink); }
.author__role { font-size: 14px; color: var(--ink-3); }

/* Справочник Tierfriedhof */
.dir-land { padding: 18px 0; border-top: 1px solid var(--line); }
.dir-land h3 { margin-bottom: 8px; }
.dir-land .table-wrap { margin: 12px 0; }

/* Erreichbarkeit, Konditionen, Preisrechner */
.reach h3 { margin-bottom: 12px; }
.reach p { margin: 0 0 8px; }
.konditionen { max-width: 860px; }
.konditionen .note { margin-top: 18px; }
.price-big { font-size: 24px; font-weight: 700; color: var(--primary-dark); }
.calc { max-width: 860px; }
.calc__fields { display: grid; gap: 14px; }
@media (min-width: 640px) { .calc__fields { grid-template-columns: repeat(2, 1fr); } }
.calc__result { margin-top: 20px; padding: 16px 18px; background: var(--surface-3); border-radius: 12px; }
.calc__result p { margin: 0; }
.calc__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.calc__value { font-size: 22px; font-weight: 700; color: var(--primary-dark); }
.calc__suffix { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); }

/* Поиск: список земель и сообщение «не найдено» */
.search--land .select { min-height: 52px; }
.search__notfound { margin: 12px 0 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink-2); }

/* Формы (общий блок 6.6 и форма партнёра) */
.section--form .form-card, .cta + .form-card { max-width: 960px; }
.form-card__intro a, .form__msg a { text-decoration: underline; text-underline-offset: 2px; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px 20px; box-shadow: var(--shadow-s); }
@media (min-width: 768px) { .form-card { padding: 32px; } }
.form-card h2 { font-size: 26px; }
@media (min-width: 768px) { .form-card h2 { font-size: 30px; } }
.form-card__intro { margin: 10px 0 0; color: var(--ink-2); }
.form { margin-top: 22px; }
.form__grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8a86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.check-label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.5; cursor: pointer; }
.check-label input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--primary); }
.check-label a { text-decoration: underline; }
.field__error { margin: 0; font-size: 14px; color: var(--danger); }
.field.is-invalid .input { border-color: var(--danger); }
.field.is-invalid .input:focus { box-shadow: 0 0 0 4px rgba(163, 58, 42, .14); }
.form__actions { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 640px) { .form__actions { display: flex; align-items: center; gap: 20px; } }
.form__hint { margin: 0; font-size: 14px; color: var(--ink-3); }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.form__msg p { margin: 0; }
.form__msg--ok { background: var(--primary-soft); color: var(--primary-dark); }
.form__msg--err { background: #f6e3de; color: var(--danger); }
.form__msg:target, .form__msg.is-visible { display: block; }
.form.is-sending .btn { opacity: .6; pointer-events: none; }
.form.is-done { display: none; }
/* Короткая форма заявки (с 2026-09-27): звонок над полями, Tierart кнопками, PLZ на всю ширину, поле сообщения ниже */
.form-call { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); text-decoration: none; }
.form-call:hover { border-color: var(--primary); color: var(--ink); }
.form-call__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.form-call__ic svg { width: 18px; height: 18px; }
.form-call__txt b { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.form-call__txt b + span { display: block; font-size: 18px; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.field--chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.field--chips legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.chip-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--surface); transition: background .15s, border-color .15s, color .15s; }
.chip-opt:hover span { border-color: var(--primary); }
.chip-opt input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-opt input:focus-visible + span { box-shadow: 0 0 0 4px rgba(44, 95, 78, .18); }
.field--chips.is-invalid .chip-opt span { border-color: var(--danger); }
.form__grid:has(.field--chips) .field[data-field="plz"] { grid-column: 1 / -1; }
.form__grid:has(.field--chips) .textarea { min-height: 88px; }
.form__grid:has(.field--chips) .check-label { font-size: 13px !important; line-height: 1.45; }
.form__grid:has(.field--chips) .check-label input { width: 20px; height: 20px; }

/* Impressum und Datenschutz */
.legal .article-col > * + * { margin-top: 0; }
.legal .legal__head > * + * { margin-top: 10px; }
.legal__head .toc { margin-top: 28px; }
.legal p { margin: 0; color: var(--ink-2); line-height: 1.7; }
.legal .legal__card { margin-top: 32px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.legal__card p + p { margin-top: 6px; }
.legal .legal__sec { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.legal__sec h2 { font-size: 22px; margin: 0 0 14px; }
.legal__sec > p + p, .legal__sec > ul + p { margin-top: 16px; }
.legal__sec h3 { font-size: 18px; margin: 28px 0 10px; }
.legal__sec ul { margin: 12px 0 0; padding-left: 22px; color: var(--ink-2); line-height: 1.7; }
.legal__sec li + li { margin-top: 6px; }
@media (min-width: 768px) { .legal .legal__card { padding: 28px 32px; } .legal .legal__sec { margin-top: 48px; padding-top: 40px; } .legal__sec h2 { font-size: 26px; margin-bottom: 16px; } }
.legal-ph { padding: 12px 14px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: 12px; color: var(--ink-3) !important; font-size: 15px; }

/* Городская страница с местными данными (пилот Berlin, 2026-09-13): факты, места, карта, таблицы цен */
.table--facts { min-width: 560px; }
.table--facts td:not(:first-child) { font-weight: 400; color: var(--ink-2); white-space: normal; }
.table--facts td:first-child { color: var(--ink); width: 34%; }
.table--prices th { white-space: nowrap; }
.table-head { margin: 32px 0 14px; }
.table-head:first-of-type { margin-top: 8px; }
.prose--after-table { margin-top: 20px; }
.places__head { margin: 36px 0 16px; }
.places__head:first-of-type { margin-top: 0; }
.places { align-items: stretch; }
.place { display: flex; flex-direction: column; gap: 10px; }
.place h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.place p { margin: 0; }
.place__addr { color: var(--ink); font-weight: 500; }
.place__addr span { display: block; margin-top: 4px; font-weight: 400; font-size: 14px; color: var(--ink-3); }
.place__meta { margin: 0; display: grid; gap: 6px; font-size: 15px; }
.place__meta div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; }
.place__meta dt { color: var(--ink-3); }
.place__meta dd { margin: 0; color: var(--ink-2); }
.place__links { margin-top: auto !important; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; }
.place__links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.map-consent { margin: 0 0 32px; padding: 24px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius-l); max-width: 860px; }
.map-consent h3 { margin: 0 0 8px; }
.map-consent p { margin: 0 0 16px; color: var(--ink-2); }
.map-consent p a { text-decoration: underline; }
.map-frame { display: block; width: 100%; height: 480px; border: 0; border-radius: var(--radius-l); margin: 0 0 32px; background: var(--surface); }
@media (max-width: 639px) { .map-frame { height: 380px; } }

/* Подсказка прокрутки для широких таблиц на узких экранах (2026-09-14): стрелка у правого края и строка под таблицей.
   Выводится скриптом только если таблица шире контейнера. */
.table-scroll { position: relative; }
.table-scroll__cue { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 64px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface) 72%); border-radius: 0 var(--radius-l) var(--radius-l) 0; transition: opacity .25s var(--ease); }
.table-scroll__cue svg { width: 24px; height: 24px; color: var(--primary); animation: table-cue 1.3s ease-in-out infinite; }
.table-scroll.is-end .table-scroll__cue { opacity: 0; }
.table-hint { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--ink-3); }
.table-hint svg { width: 16px; height: 16px; flex: none; color: var(--primary); animation: table-cue 1.3s ease-in-out infinite; }
.table-hint[hidden], .table-scroll__cue[hidden] { display: none; }
@keyframes table-cue { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .table-scroll__cue svg, .table-hint svg { animation: none; } }

/* Логотип владельца (img/logo.png, собирается site-build/make_icons.py) вместо значка лапы на зелёном квадрате */
.logo__mark--img { width: 48px; height: 48px; border-radius: 0; background: none; }
.logo__mark--img img { display: block; width: 100%; height: 100%; }
@media (min-width: 768px) { .logo__mark--img { width: 56px; height: 56px; } }

/* Автор статей: фото в блоке под статьёй и на странице автора (/autor/<slug>/) */
.author__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.author__name a { color: inherit; }
.author-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.author-hero__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; }
.author-hero h1 { margin-bottom: 6px; }
@media (min-width: 768px) { .author-hero__photo { width: 160px; height: 160px; } }

/* Блок автора под текстом статьи и ссылка на LinkedIn */
.article-col > .author--article { margin-top: 32px; }
.author__social { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: #0a66c2; }
.author__social:hover { background: var(--surface-2, #f1efe9); color: #004182; }
.author-hero__social { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; color: #0a66c2; }
.author-hero__social:hover { color: #004182; }

/* Фото (make_photos.py, lib/photos.py): картинка заполняет блок .img-ph с его пропорцией */
.img-ph--photo { background: #e8ede8; }
.img-ph--photo::after { display: none; }
.img-ph--photo .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--link .img-ph--photo .photo { transition: transform .4s ease; }
.card--link:hover .img-ph--photo .photo { transform: scale(1.03); }
.article-photo { margin: 24px 0 0; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 16 / 9; background: #e8ede8; }
.article-photo .photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__inner .article-photo { max-width: 820px; margin-top: 28px; }
@media (max-width: 767px) { .article-photo { aspect-ratio: 3 / 2; margin-top: 18px; } }

/* Бургер на мобильном: только иконка, слово «Menü» скрыто визуально, но остаётся для скринридеров */
.burger:not(.nav__close) { gap: 0; width: 44px; padding: 0; justify-content: center; }
.burger:not(.nav__close) span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Липкий хедер: прилипает к верху, после прокрутки (body.is-scrolled, main.extra.js) становится компактнее */
.header { position: sticky; top: 0; transition: box-shadow .2s ease; }
.header__row { transition: min-height .2s ease; }
.logo__mark--img { transition: width .2s ease, height .2s ease; }
body.is-scrolled .header { box-shadow: 0 6px 18px rgba(24, 44, 36, .08); }
body.is-scrolled .header__row { min-height: 56px; }
body.is-scrolled .logo__mark--img { width: 38px; height: 38px; }
body.is-scrolled .logo__slogan { display: none; }
body.is-scrolled .logo__name { font-size: 19px; }
html { scroll-padding-top: 72px; }
@media (min-width: 1024px) {
  html { scroll-padding-top: 130px; }
  body.is-scrolled .header__row { min-height: 58px; }
  body.is-scrolled .nav__item > .nav__link, body.is-scrolled .nav__item > .nav__btn,
  body.is-scrolled .nav__row > .nav__link, body.is-scrolled .nav__row > .nav__btn { min-height: 44px; }
  /* пункты с кнопкой-стрелкой (Standorte, Ratgeber) лежат в .nav__row, который оставался 52 px:
     их текст сидел на 4 px ниже остальных; строка тоже 44 px, все пункты на одной линии */
  body.is-scrolled .nav__item > .nav__row { min-height: 44px; height: 44px; }
}

/* Окно «Abholung anfragen» (main.extra.js): на телефоне лист снизу, на десктопе окно по центру */
html.amodal-open, html.amodal-open body { overflow: hidden; }
.amodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
/* закрытое окно не должно перекрывать страницу: display: flex выше перебивал атрибут hidden,
   и прозрачная подложка ловила все клики (Safari и Chrome) */
.amodal[hidden] { display: none; }
@media (min-width: 768px) { .amodal { align-items: center; padding: 24px; } }
.amodal__backdrop { position: absolute; inset: 0; background: rgba(20, 32, 28, .5); opacity: 0; transition: opacity .2s ease; }
.amodal__box { position: relative; width: 100%; max-height: calc(100% - 20px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(20, 32, 28, .18); transform: translateY(28px); opacity: 0; transition: transform .24s var(--ease), opacity .2s ease; }
@media (min-width: 768px) { .amodal__box { max-width: 520px; max-height: calc(100vh - 48px); border-radius: 22px; padding: 32px 32px 28px; transform: translateY(12px) scale(.98); } }
.amodal.is-in .amodal__backdrop { opacity: 1; }
.amodal.is-in .amodal__box { transform: none; opacity: 1; }
.amodal__x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); cursor: pointer; }
.amodal__x:hover { background: var(--bg); color: var(--ink); }
.amodal__x svg { width: 22px; height: 22px; }
.amodal__title { font-size: 24px; line-height: 1.2; margin: 0 48px 0 0; }
@media (min-width: 768px) { .amodal__title { font-size: 28px; } }
.amodal__lead { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; }
.amodal__call { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); }
.amodal__call:hover { border-color: var(--primary); color: var(--ink); }
.amodal__call-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.amodal__call-ic svg { width: 18px; height: 18px; }
.amodal__call b { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.amodal__call b + span { display: block; font-size: 18px; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.amodal__form { display: grid; gap: 12px; margin-top: 20px; }
.amodal__group { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.amodal__group legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.amodal__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.amodal__chip { position: relative; }
.amodal__chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.amodal__chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--surface); transition: background .15s, border-color .15s, color .15s; }
.amodal__chip:hover span { border-color: var(--primary); }
.amodal__chip input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.amodal__chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(44, 95, 78, .18); }
.fl { position: relative; }
.fl__in { display: block; width: 100%; min-height: 58px; padding: 25px 16px 7px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); font: inherit; font-size: 17px; line-height: 1.3; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.fl--area .fl__in { min-height: 80px; resize: vertical; padding-top: 27px; }
.fl__in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(44, 95, 78, .14); }
.fl label { position: absolute; left: 17px; top: 18px; font-size: 17px; line-height: 1.3; color: var(--ink-3); pointer-events: none; transform-origin: left top; transition: transform .15s ease, color .15s ease; }
.fl__in:focus + label, .fl__in:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.76); color: var(--ink-2); }
.fl__in:focus + label { color: var(--primary); }
.is-invalid .fl__in { border-color: var(--danger); }
.is-invalid .fl__in + label { color: var(--danger); }
.is-invalid .amodal__chip span { border-color: var(--danger); }
.amodal__err { margin: 6px 2px 0; font-size: 14px; color: var(--danger); }
.amodal__consent .check-label { font-size: 13px !important; line-height: 1.45; }
.amodal__consent .check-label input { width: 20px; height: 20px; }
.amodal__fail { margin: 0; padding: 12px 14px; border-radius: 12px; background: #f6e3de; color: var(--danger); font-size: 15px; font-weight: 600; }
.amodal__fail a { color: inherit; text-decoration: underline; }
.amodal__submit { width: 100%; justify-content: center; min-height: 54px; font-size: 17px; margin-top: 4px; }
.amodal__spin { display: none; width: 18px; height: 18px; margin-right: 10px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: amspin .7s linear infinite; }
.is-sending .amodal__spin { display: inline-block; }
@keyframes amspin { to { transform: rotate(360deg); } }
.amodal__done { text-align: center; padding: 12px 0 4px; outline: none; }
.amodal__done .amodal__title { margin: 14px 0 0; }
.amodal__done .amodal__submit { margin-top: 22px; }
.amodal__ok { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); }
.amodal__ok svg { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) { .amodal__box, .amodal__backdrop { transition: none; } }

/* Цитата с источником в статьях (метка «Zitat N» в ТЗ, 2026-09-14) */
.zitat { margin: 24px 0 0; padding: 18px 20px 16px; background: var(--surface-3); border-left: 4px solid var(--primary); border-radius: 0 var(--radius-l) var(--radius-l) 0; }
.zitat blockquote { margin: 0; }
.zitat blockquote p { margin: 0; font-size: 17px; line-height: 1.55; font-style: italic; color: var(--ink); }
.zitat figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.zitat figcaption a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Подсказка формата телефона в окне заявки */
.amodal__hint { margin: 6px 2px 0; font-size: 13px; color: var(--ink-3); }
.is-invalid .amodal__hint { display: none; }

/* PLZ -> Ort (window.tbPlz): город справа в поле, список населённых пунктов под полем */
.plz-host { position: relative; }
.plz-wrap { position: relative; }
.plz-badge { position: absolute; right: 10px; top: 29px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; max-width: 55%; padding: 5px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 14px; font-weight: 600; line-height: 1.2; pointer-events: none; }
.plz-wrap .plz-badge { top: 26px; }
.plz-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plz-badge svg { flex: none; width: 14px; height: 14px; }
.plz-badge.is-miss { background: #f3efe6; color: var(--ink-3); font-weight: 500; }
/* пустой значок не показывать (display: inline-flex перебивал атрибут hidden, в поле PLZ висела пустая «таблетка») */
.plz-badge[hidden] { display: none; }
.plz-host.has-badge .fl__in, .plz-host.has-badge .input { padding-right: 46%; }
.plz-list { position: absolute; left: 0; right: 0; top: 62px; z-index: 5; max-height: 220px; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); }
.plz-wrap .plz-list { top: 56px; }
.plz-opt { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 16px; text-align: left; color: var(--ink); cursor: pointer; }
.plz-opt:hover, .plz-opt[aria-selected="true"] { background: var(--primary-soft); color: var(--primary-dark); }

/* Умный поиск PLZ/Ort (.search): список под полем и карточка результата */
.finder { position: relative; min-width: 0; }
.finder .input { padding-right: 48px; }
.finder.is-open .input { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(44, 95, 78, .14); }
.finder__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.finder__clear:hover { background: var(--surface-2); color: var(--ink); }
.finder__clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.finder__clear svg { width: 16px; height: 16px; }
.finder__clear[hidden] { display: none; }
.finder__live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.finder__pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: min(392px, 56vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 2px 4px rgba(31, 42, 39, .06), 0 18px 40px rgba(31, 42, 39, .14); animation: finder-in .14s ease-out; }
.finder__pop[hidden] { display: none; }
@keyframes finder-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.finder__list { margin: 0; padding: 0; list-style: none; }
.finder__list:empty { display: none; }
.finder__opt { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.finder__opt + .finder__opt { margin-top: 2px; }
.finder__opt[aria-selected="true"] { background: var(--surface-3); }
.finder__plz { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--ink-2); }
.finder__place { display: flex; flex-direction: column; min-width: 0; }
.finder__ort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; color: var(--ink); }
.finder__land { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-3); }
.finder mark { padding: 0; background: none; color: var(--primary); font-weight: 700; }
.finder__plz mark { color: var(--ink); }
.finder__go { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 13px; font-weight: 600; white-space: nowrap; }
.finder__go svg { width: 14px; height: 14px; }
.finder__status:empty { display: none; }
.finder__status { padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.finder__status.is-more, .finder__status.is-hint { margin-top: 4px; border-top: 1px solid var(--line); }
.finder__status.is-hint { color: var(--primary-dark); font-weight: 600; }
.finder__list:empty + .finder__status.is-hint { border-top: 0; margin-top: 0; }
.finder__status.is-empty { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; }
.finder__status.is-empty strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.finder__status.is-empty span { font-size: 15px; color: var(--ink-2); }
.finder__status a { font-weight: 700; color: var(--primary); white-space: nowrap; }
.finder__status.is-loading { display: flex; align-items: center; gap: 10px; padding: 14px 12px; color: var(--ink-2); }
.finder__spin { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--primary); border-radius: 50%; animation: finder-spin .7s linear infinite; }
@keyframes finder-spin { to { transform: rotate(360deg); } }

.finder-card { margin-top: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-s); }
.finder-card[hidden] { display: none; }
.finder-card.is-in { animation: finder-in .2s ease-out; }
.finder-card__head { display: flex; align-items: center; gap: 12px; }
.finder-card__title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.finder-card__title strong { font-size: 18px; font-weight: 650; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.finder-card__title span { font-size: 14px; color: var(--ink-3); }
.finder-card__x { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.finder-card__x:hover { background: var(--surface-2); color: var(--ink); }
.finder-card__x svg { width: 16px; height: 16px; }
.finder-card p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.finder-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.finder-card__actions .btn { min-height: 48px; }
.finder-card__actions .btn svg { width: 18px; height: 18px; }
.finder-card p.finder-card__more { font-size: 14px; color: var(--ink-3); }
.finder-card__more a { font-weight: 600; }
@media (max-width: 639px) {
  .finder__pop { max-height: 46vh; }
  .finder__opt { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
  .finder__go { padding: 4px 8px; font-size: 0; gap: 0; }
  .finder__go svg { width: 16px; height: 16px; }
  .finder-card { padding: 16px; }
  .finder-card__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Главная, Hero: четыре преимущества одной полосой на всю ширину контейнера (под текстом и фото) */
.hero__grid > .badges--hero { margin-top: 0; }
@media (min-width: 1024px) {
  .hero__grid { row-gap: 48px; }
  .hero__grid > .badges--hero { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
  .badges--hero .badge { gap: 14px; padding: 16px 20px; background: none; border: 0; border-radius: 0; font-size: 15px; line-height: 1.35; }
  .badges--hero .badge + .badge { border-left: 1px solid var(--line); }
  .badges--hero .badge .icon-badge { width: 44px; height: 44px; border-radius: 12px; }
  .badges--hero .badge .icon-badge svg { width: 22px; height: 22px; }
}
@media (min-width: 1280px) { .hero__grid { row-gap: 56px; } .badges--hero .badge { padding: 18px 24px; } }

/* /standorte/: земли карточками, города плитками «ключ + город» (publish.enhance_landgroups) */
.land-cards { columns: 1; column-gap: 20px; }
@media (min-width: 768px) { .land-cards { columns: 2; } }
@media (min-width: 1180px) { .land-cards { columns: 3; column-gap: 24px; } }
.land-card { break-inside: avoid; display: block; margin: 0 0 20px; padding: 20px 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
@media (min-width: 1180px) { .land-card { margin-bottom: 24px; } }
.land-card:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.land-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.land-card__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.land-card__icon svg { width: 21px; height: 21px; }
.land-card__titles { min-width: 0; }
.land-card__title { font-size: 18px; line-height: 1.25; margin: 0; }
.land-card__title a { color: var(--ink); }
.land-card__title a:hover { color: var(--primary); }
.land-card__meta { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
.land-card__hub { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.land-card__hub svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.land-card__hub:hover { background: var(--primary-soft); color: var(--primary-dark); }
.land-card__hub:hover svg { transform: translateX(3px); }
.city-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.city-chips li { margin: 0; padding: 0; }
.city-chips li::before { content: none; }
.land-card .city-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; width: 100%; min-height: 58px; padding: 9px 34px 9px 14px; background: var(--bg); border: 1px solid transparent; border-radius: 12px; color: var(--ink); transition: background-color .18s var(--ease), border-color .18s var(--ease); }
.land-card .city-chip::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; color: var(--ink-3); transform: translateY(-50%) rotate(45deg); transition: transform .18s var(--ease), color .18s var(--ease); }
.city-chip__kw { font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.city-chip__name { max-width: 100%; font-size: 15.5px; font-weight: 650; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.land-card .city-chip:hover { background: var(--primary-soft); border-color: var(--line-2); }
.land-card .city-chip:hover .city-chip__name { color: var(--primary-dark); }
.land-card .city-chip:hover::after { color: var(--primary); transform: translate(3px, -50%) rotate(45deg); }
.land-card .city-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 480px) {
  .land-card { padding: 16px 16px 18px; }
  .city-chips { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .land-card__hub { padding: 6px 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .land-card, .land-card .city-chip, .land-card .city-chip::after, .land-card__hub svg { transition: none; } }

/* Мега-меню Standorte (десктоп): «Alle Standorte» справа на линии заголовка; города земли в две колонки,
   чтобы больше городов влезало в высоту экрана ноутбука (длинные названия переносятся, а не обрезаются) */
@media (min-width: 1024px) {
  .nav__panel--mega .mega__title { line-height: 26px; margin: 0 0 18px; padding-right: 190px; }
  .nav__panel--mega .mega__all { position: absolute; top: 24px; right: 28px; margin: 0; line-height: 26px; align-items: center; gap: 6px; }
  .nav__panel--mega .mega__cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .nav__panel--mega .mega__cities a { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
  /* NRW (16 Städte, с 2026-09-27) на две колонки сетки, города в четыре столбца: высота меню не растёт */
  .nav__panel--mega .mega__group--wide { grid-column: span 2; }
  .nav__panel--mega .mega__group--wide .mega__cities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav__panel--mega .mega__group--wide .mega__cities a { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__panel--mega .mega__cities a { font-size: 13px; }
}
.muted-inline { color: var(--ink-3); font-size: 13px; white-space: nowrap; }

/* Rechner Tierjahre <-> Menschenjahre (lib/rechner.py, main.extra.js) */
.rr { margin: 0 0 32px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); }
@media (min-width: 640px) { .rr { padding: 28px; } }
.rr-noscript { margin: 0; color: var(--ink-2); }
.rr-form { display: grid; gap: 20px; }
.rr-form[hidden], .rr-pane[hidden], .rr-out[hidden], .rr-out [hidden] { display: none !important; }
.rr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 14px; }
.rr-seg__opt { position: relative; }
.rr-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rr-seg__opt span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 6px 10px; border-radius: 11px; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--ink-2); transition: background .15s, color .15s, box-shadow .15s; }
@media (min-width: 640px) { .rr-seg__opt span { font-size: 15px; } }
.rr-seg__opt input:checked + span { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow-s); }
.rr-seg__opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(44, 95, 78, .3); }
.rr-pane { display: grid; gap: 16px; }
.rr-q { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.rr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rr-row > .rr-field:only-child { grid-column: 1 / -1; max-width: 320px; }
.rr-label { display: block; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.rr-step { display: flex; align-items: stretch; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.rr-step:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(44, 95, 78, .14); }
.rr-step__btn { flex: 0 0 52px; display: flex; align-items: center; justify-content: center; min-height: 56px; border: 0; background: var(--surface-3); color: var(--primary-dark); cursor: pointer; transition: background .15s; }
.rr-step__btn:hover { background: var(--primary-soft); }
.rr-step__btn:active { background: var(--line-2); }
.rr-step__btn svg { width: 20px; height: 20px; }
.rr-step__in { flex: 1 1 auto; min-width: 2ch; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--surface); font: inherit; font-size: 24px; font-weight: 700; line-height: 1; text-align: center; color: var(--ink); -webkit-appearance: none; appearance: none; }
.rr-step__in:focus { outline: none; }
.rr-step__in::-webkit-outer-spin-button, .rr-step__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rr-sizes { margin: 0; padding: 0; border: 0; min-width: 0; }
.rr-sizes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .rr-sizes__grid { grid-template-columns: repeat(4, 1fr); } }
.rr-size { position: relative; display: block; }
.rr-size input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rr-size__box { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); transition: border-color .15s, background .15s; }
.rr-size:hover .rr-size__box { border-color: var(--primary); }
.rr-size input:checked + .rr-size__box { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.rr-size input:focus-visible + .rr-size__box { box-shadow: 0 0 0 4px rgba(44, 95, 78, .18); }
.rr-size__name { font-size: 16px; font-weight: 700; color: var(--ink); }
.rr-size__kg { font-size: 14px; font-weight: 600; color: var(--primary-dark); }
.rr-size__bsp { font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.rr-out { margin-top: 22px; padding: 20px; background: var(--surface-3); border-radius: var(--radius); animation: rr-in .2s var(--ease); }
@keyframes rr-in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rr-out p { margin: 0; }
.rr-out__lead { font-size: 16px; color: var(--ink-2); }
.rr-out__num { margin-top: 2px !important; line-height: 1.1; }
.rr-out__num [data-out="num"] { font-size: 52px; font-weight: 800; letter-spacing: -.02em; color: var(--primary-dark); }
.rr-out__unit { font-size: 20px; font-weight: 700; color: var(--primary-dark); }
.rr-out__sub { margin-top: 10px !important; font-size: 15px; color: var(--ink-2); }
.rr-out__dna { margin-top: 8px !important; padding-left: 10px; border-left: 3px solid var(--accent); font-size: 14px; color: var(--ink-2); }
.rr-out__hint { margin-top: 8px !important; font-size: 14px; color: var(--ink-3); }
.rr-out__more { margin-top: 14px !important; font-size: 15px; }
.rr-phase { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(44, 95, 78, .15); }
.rr-phase__name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.rr-phase__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.rr-phase__bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.rr-phase__bar li { padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--ink-3); }
.rr-phase__bar li.is-past { background: var(--primary-soft); color: var(--primary-dark); }
.rr-phase__bar li.is-cur { background: var(--primary); color: #fff; }
tr.is-hit td { background: var(--primary-soft); }
td.is-hit { font-weight: 800; color: var(--primary-dark); box-shadow: inset 0 0 0 2px var(--primary); }
@media (max-width: 479px) {
  .rr { padding: 16px; }
  .rr-step__btn { flex-basis: 42px; min-height: 52px; }
  .rr-step__in { font-size: 22px; }
}
/* длинные кнопки CTA (например «Tierbestatter in Ihrer Stadt finden») на экранах до 400 px переносятся, а не вылезают за край */
@media (max-width: 399px) { .cta .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; } }
@media (max-width: 359px) { .rr-row { grid-template-columns: 1fr; } .rr-row > .rr-field:only-child { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .rr-out { animation: none; } }