:root {
  --ink: #20211f;
  --muted: #666b64;
  --line: #d8d9d3;
  --bg: #d7e6ec;
  --sheet: #f7f7f2;
  --soft: #ededE7;
  --panel: #ffffff;
  --dark: #30352f;
  --blue: #6f9eb9;
  --blue-dark: #4f7890;
  --blue-darker: #40647a;
  --blue-soft: #dbe9ef;
  --error: #c64545;
  --accent: #5d685d;
  --accent-2: #9a8f80;
  --radius: 10px;
  --gradient: linear-gradient(135deg, #f2f3ef 0%, #edf4f6 100%);

  /* Typography scale (Arial) — large headings stay light (400),
     small functional titles go bold (700). One scale, no per-element clamps. */
  --ff: Arial, Helvetica, sans-serif;
  --fs-display: clamp(52px, 6.5vw, 92px); /* hero h1 */
  --fs-h1: clamp(34px, 3.6vw, 52px);      /* section titles — same size as hero h1 */
  --fs-h2: clamp(22px, 2.2vw, 30px);      /* card / subsection titles + hero slogan */
  --fs-h3: clamp(19px, 1.5vw, 22px);      /* small bold titles */
  --fs-lead: clamp(20px, 1.9vw, 28px);    /* hero tagline */
  --fs-body: 17px;
  --fs-small: 13px;
  --fs-btn: 15px;                         /* button label — drops to 13px on mobile */
  --lh-display: 0.92;
  --lh-h1: 1;
  --lh-h2: 1.08;
  --lh-h3: 1.15;
  --lh-body: 1.5;

  /* Spacing scale (4px base) — raw steps */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Semantic spacing — use these by role, not raw numbers */
  --frame: 14px;                               /* sheet inner padding & image insets */
  --gap: 10px;                                 /* gap between cards in a grid */
  --section-gap: var(--space-6);               /* vertical gap between sections (24) */
  --card-pad: var(--space-8);                  /* content padding of small cards (32) */
  --copy-pad-block: clamp(32px, 4.5vw, 56px);  /* big copy blocks — vertical */
  --copy-pad-inline: clamp(24px, 3.5vw, 48px); /* big copy blocks — horizontal */
  --accent-gap: var(--space-10);               /* decorative line/icon -> title (40) */
  --flow-tight: var(--space-3);                /* small title -> its text (12) */
  --flow: var(--space-6);                      /* default block / paragraph spacing (24) */
  --flow-loose: var(--space-10);               /* between sub-blocks (40) */

  /* Section-heading insets (cap at 40px on large desktops) */
  --head-pad-top: clamp(28px, 3.5vw, 40px); /* sheet top -> heading */
  --head-gap: clamp(26px, 3.5vw, 40px);     /* heading -> content */
  --head-indent: clamp(10px, 2vw, 26px);    /* extra side indent (on top of --frame) */

  /* Buttons — one size everywhere */
  --btn-h: 48px;
  --btn-pad-x: 28px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-header,
.hero,
main > section:not(.hero) {
  width: min(100% - 44px, 1420px);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: var(--frame);
  z-index: 20;
  display: grid;
  grid-template-columns: 300px minmax(320px, 1fr) auto auto;
  align-items: center;
  gap: var(--space-6);
  min-height: 68px;
  margin-top: var(--frame);
  padding: 10px 14px 10px 22px;
  border: 1px solid rgba(32, 33, 31, 0.1);
  border-radius: var(--radius);
  background: rgba(247, 247, 242, 0.97);
}

.logo img {
  width: auto;
  height: 56px;
  display: block;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 15px;
}

.main-nav a {
  padding: 9px 12px;
  border-radius: 999px;
}

/* Контакты внутри nav показываем только на мобиле — на десктопе скрываем */
.main-nav-contacts {
  display: none;
}

.main-nav a:hover {
  color: var(--ink);
  background: var(--blue-soft);
}

.header-contact {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.2;
  text-align: right;
}

.header-contact a {
  display: block;
  color: var(--ink);
}

/* All buttons share one size */
.phone-button,
.service-photo a,
.billing a,
.pflegegrad-cta,
.kontakt-cta,
.beratung-cta,
.star-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: 999px;
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Primary (filled) */
.phone-button,
.service-photo a,
.billing a,
.pflegegrad-cta,
.kontakt-cta,
.beratung-cta {
  color: #fff;
  background: var(--blue-dark);
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 0;
  background: transparent;
}

.menu-toggle span {
  display: block;
  height: 2px;
  margin: 6px 0;
  background: var(--blue-dark);
}

.hero {
  position: relative;
  min-height: 660px;
  margin-top: var(--section-gap);
  overflow: hidden;
  border: 1px solid rgba(32, 33, 31, 0.1);
  border-radius: var(--radius);
  background: var(--sheet);
}

.hero > img {
  position: absolute;
  left: var(--frame);
  top: var(--frame);
  bottom: var(--frame);
  width: 50%;
  height: calc(100% - 28px);
  border-radius: 8px;
  object-fit: cover;
  object-position: 33% center;
  filter: saturate(0.78) contrast(0.96);
}

.hero::before {
  content: "";
  position: absolute;
  inset: var(--frame) var(--frame) var(--frame) auto;
  width: calc(50% - 28px);
  border-radius: 8px;
  background: #f4f4ef;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: calc(50% - 28px);
  margin-left: auto;
  /* tall hero — generous vertical padding; left 26px keeps a 40px gap to the photo */
  padding: clamp(48px, 5.2vw, 76px) clamp(28px, 4vw, 54px) clamp(48px, 5vw, 74px) 26px;
}

.hero h1,
.page-hero h1 {
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: 0;
}

.hero-subtitle {
  margin: 0 0 var(--space-8);
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: 1.12;
  font-weight: 400;
}

.hero-lead {
  max-width: 520px;
  margin: 0 0 var(--flow);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.4;
  font-weight: 400;
}

.hero ul {
  margin: 0;
  padding: var(--flow) 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.6;
  list-style: none;
}

.hero li::before {
  content: "– ";
}

/* Soft variant (hero) — также используется как <button> на главной */
.star-cta {
  position: relative;
  z-index: 1;
  margin-top: var(--flow);
  border: 1px solid rgba(79, 120, 144, 0.25);
  color: var(--ink);
  background: var(--blue-soft);
  cursor: pointer;
  font-family: inherit;
}

main {
  padding-bottom: 0;
}

.services-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 0.82fr);
  grid-template-rows: minmax(260px, auto) minmax(154px, auto);
  gap: var(--gap);
  margin-top: var(--section-gap);
  padding: var(--frame);
  border: 1px solid rgba(32, 33, 31, 0.1);
  border-radius: var(--radius);
  background: var(--sheet);
}

.service-copy-card,
.extra-services,
.billing,
.about,
.why,
.values,
.feature-photo,
.page-hero,
.leistungen,
.extra,
.inquiry,
.team,
.pflegegrad,
.kontakt-page,
.process,
.team-section,
.reviews,
.faq,
.contact,
.kalkulator,
.rechtliches,
.legal,
.notfound,
.danke {
  border: 1px solid rgba(32, 33, 31, 0.1);
  border-radius: var(--radius);
  background: var(--sheet);
}

/* Shared section-title treatment (with why/values) */
.process h2,
.faq h2 {
  max-width: 1180px;
  margin: 0 0 var(--head-gap);
  padding-inline: var(--head-indent);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
}

.reviews-header h2 {
  max-width: 1180px;
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
}

.service-copy-card {
  position: relative;
  min-height: 260px;
  padding: var(--card-pad);
  background: var(--panel);
}

.service-copy-card span {
  display: block;
  width: 58px;
  margin-bottom: var(--accent-gap);
  border-top: 1px solid var(--blue-dark);
}

.service-copy-card h2 {
  max-width: 540px;
  margin: 0 0 var(--flow-tight);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: 0;
}

.service-copy-card p,
.extra-services p,
.billing-copy p,
.pflegegrad-copy p,
.about-copy p,
.team-copy p,
.why p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.service-photo {
  grid-row: span 2;
  display: grid;
  grid-template-rows: minmax(374px, 1fr) var(--btn-h);
  gap: var(--gap);
}

.service-photo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  object-fit: cover;
  filter: saturate(0.72);
}

.extra-services {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  padding: var(--card-pad);
  color: var(--ink);
  background: var(--blue-soft);
}

.extra-services h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--flow);
  color: var(--ink);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
}

.extra-services p {
  position: relative;
  z-index: 1;
  max-width: 540px;
  color: var(--ink);
  font-weight: 700;
}

.billing,
.pflegegrad {
  display: grid;
  grid-template-columns: 0.44fr 1fr;
  margin-top: var(--section-gap);
  overflow: hidden;
}

.billing img,
.pflegegrad img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  filter: saturate(0.62);
}

.billing-copy,
.pflegegrad-copy {
  position: relative;
  padding: var(--copy-pad-block) var(--copy-pad-inline);
  background: var(--gradient);
}

.billing-copy::before,
.pflegegrad-copy::before {
  content: "";
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(79, 120, 144, 0.18);
  border-radius: 999px;
  transform: rotate(-5deg);
}

.billing-copy > *,
.pflegegrad-copy > * {
  position: relative;
  z-index: 1;
}

.billing h2,
.about h2,
.why h2,
.team h2,
.pflegegrad h2,
.kontakt-page h2,
.beratung h2 {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
}

.billing p,
.pflegegrad-copy p {
  max-width: 780px;
  margin-top: var(--flow);
}

.billing a,
.pflegegrad-copy a {
  margin-top: var(--flow);
}

.about,
.team,
.kontakt-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.86fr);
  gap: var(--gap);
  margin-top: var(--section-gap);
  padding: var(--frame);
}

.about-copy,
.team-copy,
.kontakt-info {
  padding: var(--copy-pad-block) var(--copy-pad-inline);
  background: var(--panel);
  border-radius: 8px;
}

.about-copy p,
.team-copy p,
.kontakt-info p {
  max-width: 760px;
  margin-top: var(--space-8);
}

.about-copy {
  padding-block: var(--space-10);
}

.about-copy p {
  margin-top: var(--flow);
}

.about-copy div {
  margin-top: var(--flow-loose);
  padding-top: var(--flow);
  border-top: 1px solid rgba(79, 120, 144, 0.28);
}

.about-copy h3 {
  margin: 0 0 var(--flow-tight);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
}

.about-copy div p {
  margin-top: 0;
}

.about img,
.team img,
.kontakt-page img {
  width: 100%;
  height: 100%;
  min-height: 470px;
  border-radius: 8px;
  object-fit: cover;
  filter: saturate(0.66);
}

.why {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.why h2 {
  max-width: 1180px;
  margin: 0 0 var(--head-gap);
  padding-inline: var(--head-indent);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  padding-inline: var(--head-indent);
}

.why article {
  min-height: 214px;
  padding: var(--card-pad);
  border: 1px solid rgba(32, 33, 31, 0.1);
  border-radius: 8px;
  background: var(--panel);
}

.why span {
  display: block;
  margin-bottom: var(--accent-gap);
  color: var(--blue-dark);
}

.why span svg {
  display: block;
  width: 30px;
  height: 24px;
}

.why h3 {
  margin: 0 0 var(--flow-tight);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
}

.values {
  margin-top: var(--section-gap);
  padding: var(--frame);
}

.values-panel {
  background: var(--panel);
  border-radius: 8px;
  padding: clamp(28px, 3.5vw, 44px);
}

.values-panel h2 {
  margin: 0 0 var(--head-gap);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
}

.value-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.value-icon svg {
  width: 24px;
  height: 24px;
}

.value-text h3 {
  margin: 0 0 var(--flow-tight);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
}

.value-text p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Werte — 2x2, Icon links */
.values--grid2 .values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 40px) clamp(36px, 4vw, 64px);
}

.values--grid2 .value-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* Beige photo band — a visual breather between Werte and the process timeline.
   Same surface as .values: sheet + 14px frame, photo inset like the white panel. */
.feature-photo {
  margin-top: var(--section-gap);
  padding: var(--frame);
}

.feature-photo__frame {
  position: relative;
  overflow: hidden;
  height: clamp(260px, 30vw, 420px);
  border-radius: 8px;
}

/* Image is taller than the frame so it can drift vertically (parallax via JS). */
.feature-photo__frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center 30%;
  transform: translate3d(0, var(--py, -12%), 0);
  will-change: transform;
}

/* ---- Subpage: page intro hero ---- */
.page-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--frame);
  margin-top: var(--section-gap);
  min-height: 460px;
  padding: var(--frame);
}

.page-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--panel);
  border-radius: 8px;
  padding: clamp(28px, 3.5vw, 44px);
}

.page-hero h1 {
  margin: 0 0 var(--space-5);
}

.page-hero-lead {
  margin: 0;
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}

.page-hero-lead + .page-hero-lead {
  margin-top: var(--flow);
}

.page-hero > img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: 8px;
  object-fit: cover;
  filter: saturate(0.78) contrast(0.96);
}

/* ---- Subpage: Leistungen overview ("So unterstützen wir Sie") ---- */
.leistungen {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.leistungen > h2 {
  margin: 0 0 var(--flow);
  padding-inline: var(--head-indent);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

.leistungen-sub {
  margin: 0 0 var(--head-gap);
  padding-inline: var(--head-indent);
  max-width: 760px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}

.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding-inline: var(--head-indent);
}

.leistung-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--card-pad);
  transition: border-color 0.25s ease;
}

.leistung-card:hover {
  border-color: rgba(79, 120, 144, 0.35);
}

.leistung-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--accent-gap);
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.leistung-icon svg {
  width: 24px;
  height: 24px;
}

.leistung-card h3 {
  margin: 0 0 var(--flow-tight);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
}

.leistung-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ---- Subpage: Extra Services (heading + two photo cards) ---- */
.extra {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.extra > h2 {
  margin: 0 0 var(--head-gap);
  padding-inline: var(--head-indent);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

.extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding-inline: var(--head-indent);
}

/* Card matches the rest of the system: white panel + line border, title at
   --fs-h2 weight 400 like .leistung-card/.why article/.value-item titles. */
.extra-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.extra-card:hover {
  border-color: rgba(79, 120, 144, 0.35);
}

.extra-card img {
  display: block;
  width: 100%;
  height: clamp(220px, 22vw, 300px);
  object-fit: cover;
}

.extra-card h3 {
  margin: 0;
  padding: var(--card-pad);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  color: var(--ink);
}

/* ---- Leistungen subpage blocks reuse the homepage section patterns via
   selector aliases on the rules below (.about, .billing, .contact). The grids
   here just flip when the image sits on the opposite side from the homepage
   block we're mirroring. ---- */
.team,
.kontakt-page {
  /* image LEFT, copy RIGHT — mirror of .about (image is on the right there) */
  grid-template-columns: minmax(390px, 0.86fr) minmax(0, 1fr);
}

.team {
  /* Team uses an even 50/50 split */
  grid-template-columns: 1fr 1fr;
}

/* Bold lead paragraph in the Team block (eyebrow above the body). The whole
   text cluster sits tighter than the homepage .about default — lead pulls
   closer to the H2 and body tucks under the lead so they read as one block. */
@media (min-width: 1101px) {
  /* В 2-колоночном режиме фото не должно расталкивать строку
     ни своим aspect ratio, ни min-height — высоту задаёт
     только text-плашка рядом. */
  .about img,
  .team img,
  .kontakt-page img,
  .pflegegrad img {
    min-height: 0;
    height: 0;
    min-block-size: 100%;
  }
}

.team-copy .team-lead {
  margin-top: var(--flow);
  color: var(--ink);
  font-weight: 700;
}

.team-lead + p {
  margin-top: var(--flow-tight);
}

/* Kontakt info list needs the same gap below the H2 that the homepage Kontakt
   gets from the intro paragraph (which isn't present on this subpage). */
.kontakt-info .contact-info {
  margin-top: var(--space-8);
}

.kontakt-info .kontakt-cta {
  align-self: start;
  margin-top: var(--space-8);
}

/* ---- Subpage: closing CTA-strip inside .process (after the 4 steps) ----
   Белая плашка на бежевом фоне .process — паттерн как .about-copy
   на .about: вложенный --panel внутри секции с --sheet bg. */
.process-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin: var(--head-gap) var(--head-indent) 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--panel);
  border-radius: 8px;
}

.process-cta-title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  color: var(--ink);
}

.process-cta-sub {
  margin: var(--flow-tight) 0 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.45;
}

/* ---- Subpage: Entlastungs-Betragsrechner ---- */
.kalkulator {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.kalkulator > h2 {
  margin: 0 0 var(--flow);
  padding-inline: var(--head-indent);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

.kalkulator-sub {
  margin: 0 0 var(--gap);
  padding-inline: var(--head-indent);
  max-width: 760px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}

.kalkulator-info {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(20px, 3vw, 44px);
  margin: 0 var(--head-indent) var(--gap);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
  background: var(--gradient);
  border-radius: 8px;
}

/* Десктопный line-break в .kalkulator h2 — на узких пусть переносится сам */
.break-desktop {
  display: none;
}

@media (min-width: 1101px) {
  .break-desktop {
    display: inline;
  }
}

.kalkulator-info-title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  color: var(--ink);
}

.kalkulator-info-body {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.pflegegrad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding-inline: var(--head-indent);
}

.pg-card {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.25s ease;
}

.pg-card:hover {
  border-color: rgba(79, 120, 144, 0.35);
}

.pg-card h3 {
  margin: 0 0 var(--flow);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  color: var(--ink);
}

.pg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pg-list li {
  display: grid;
  gap: 3px;
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(32, 33, 31, 0.08);
}

.pg-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.pg-list li:last-child {
  padding-bottom: 0;
}

.pg-label {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.pg-list li > span:last-child {
  font-size: var(--fs-body);
  color: var(--ink);
}

.pg-card--note {
  background: var(--gradient);
}

.pg-card--note p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ---- Subpage: Rechtliche Informationen — список ссылок на §§ SGB XI ---- */
.rechtliches {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.rechtliches > h2 {
  margin: 0 0 var(--flow);
  padding-inline: var(--head-indent);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

.rechtliches-sub {
  margin: 0 0 var(--head-gap);
  padding-inline: var(--head-indent);
  max-width: 760px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}

.rechtliches-panel {
  margin: 0 var(--head-indent);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.rechtliches-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rechtliches-list li + li {
  border-top: 1px solid rgba(32, 33, 31, 0.08);
}

.rechtliches-list a {
  display: grid;
  grid-template-columns: minmax(160px, 0.25fr) 1fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.5vw, 28px);
  color: inherit;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.rechtliches-list a:hover,
.rechtliches-list a:focus-visible {
  background: var(--blue-soft);
  outline: none;
}

.rechtliches-list a:hover .rechtliches-title,
.rechtliches-list a:focus-visible .rechtliches-title {
  color: var(--blue-darker);
}

.rechtliches-label {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-dark);
}

.rechtliches-title {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.2s ease;
}

.rechtliches-arrow {
  color: var(--muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

.rechtliches-list a:hover .rechtliches-arrow,
.rechtliches-list a:focus-visible .rechtliches-arrow {
  color: var(--blue-dark);
  transform: translate(2px, -2px);
}

/* ---- Legal pages (Datenschutz, Impressum) ---- */
.legal {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.legal h1 {
  margin: 0 0 var(--head-gap);
  padding-inline: var(--head-indent);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

.legal-content {
  margin: 0 var(--head-indent);
  padding: clamp(32px, 4vw, 56px);
  background: var(--panel);
  border-radius: 8px;
}

.legal-content p,
.legal-content ul {
  max-width: 880px;
}

.legal-content h2 {
  margin: var(--space-10) 0 var(--flow-tight);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  color: var(--ink);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  margin: 0 0 var(--flow-tight);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.legal-content ul {
  margin: 0 0 var(--flow-tight);
  padding-left: 24px;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.legal-content ul li {
  margin-bottom: 4px;
}

.legal-content a {
  color: var(--blue-dark);
  text-decoration: underline;
  word-break: break-word;
}

.legal-content a:hover {
  color: var(--blue-darker);
}

.legal-content strong {
  font-weight: 700;
}

/* ---- 404 ---- */
.notfound,
.danke {
  margin-top: var(--section-gap);
  padding: clamp(80px, 12vw, 140px) var(--frame);
  text-align: center;
}

.notfound-eyebrow,
.danke-eyebrow {
  margin: 0 0 var(--flow);
  font-size: var(--fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-dark);
}

.notfound h1,
.danke h1 {
  margin: 0 auto var(--flow);
  max-width: 720px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

.notfound-lead,
.danke-lead {
  margin: 0 auto var(--space-10);
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}

.notfound-actions,
.danke-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.notfound-link {
  color: var(--blue-dark);
  font-size: var(--fs-body);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.notfound-link:hover {
  color: var(--blue-darker);
}

/* ---- Modal (native <dialog>) ---- */
.modal {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}

.modal::backdrop {
  background: rgba(32, 33, 31, 0.55);
}

.modal__panel {
  position: relative;
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--gradient);
  border-radius: 8px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.modal__title {
  margin: 0 0 var(--flow);
  padding-right: 40px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

/* Внутри модала форма не должна тянуть свою плашку поверх .modal__panel */
.modal .contact-form {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal__close:hover {
  background: var(--blue-soft);
  color: var(--ink);
}

.pflegegrad {
  /* copy LEFT, image RIGHT — mirror of .billing */
  grid-template-columns: 1fr 0.44fr;
}

/* ---- So arbeiten wir — process timeline ---- */
.process {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.process-track {
  list-style: none;
  margin: 0;
  padding-inline: var(--head-indent);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.step {
  position: relative;
  padding-top: var(--space-8);
}

.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue-dark);
}

.step::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 14px;
  right: calc(var(--space-8) * -1);
  height: 2px;
  background: var(--blue-soft);
}

.step:last-child::after {
  display: none;
}

.step-num {
  display: block;
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--fs-small);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue-dark);
}

.step h3 {
  margin: 0 0 var(--flow-tight);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ---- Beratungsbesuch nach § 37.3 — акцентный блок (как .why,
   но с gradient вместо sheet-фона) ---- */
.beratung {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
  background: var(--gradient);
  border: 1px solid rgba(32, 33, 31, 0.1);
  border-radius: var(--radius);
}

.beratung-copy {
  padding-inline: var(--head-indent);
}

.beratung-eyebrow {
  margin: 0 0 var(--flow-tight);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.beratung-copy h2 {
  margin: 0;
}

.beratung-copy > p:not(.beratung-eyebrow) {
  max-width: 820px;
  margin-top: var(--flow);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.beratung-checks {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: var(--space-3) var(--space-8);
  margin: var(--flow) 0 0;
  padding: 0;
  list-style: none;
}

.beratung-checks li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}

.beratung-checks svg {
  flex-shrink: 0;
  width: 20px;
  height: 16px;
  color: var(--blue-dark);
}

.beratung-cta {
  margin-top: var(--flow-loose);
}

@media (max-width: 640px) {
  .beratung-checks {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---- Unser Team — слайдер сотрудников с портретами ---- */
.team-section {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--head-indent);
  margin-bottom: var(--head-gap);
}

.team-head h2 {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
}

.team-nav {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.team-arrow {
  display: grid;
  place-items: center;
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--blue-dark);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.team-arrow svg {
  width: 22px;
  height: 22px;
}

.team-arrow:hover {
  background: var(--blue-soft);
  border-color: rgba(79, 120, 144, 0.5);
}

.team-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  background: var(--panel);
  border-color: var(--line);
}

.team-slider {
  display: flex;
  gap: var(--gap);
  padding-inline: var(--head-indent);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.team-slider::-webkit-scrollbar {
  display: none;
}

.person-card {
  flex: 0 0 clamp(260px, 30%, 320px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  scroll-snap-align: start;
}

.person-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.person-info {
  padding: var(--card-pad);
}

.person-info h3 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
}

.person-role {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

.person-info p {
  margin: var(--flow-tight) 0 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .person-card {
    flex-basis: 78%;
  }
  .team-arrow {
    width: 38px;
    height: 38px;
  }
  .team-arrow svg {
    width: 18px;
    height: 18px;
  }
}

/* ---- Reviews — карточки отзывов с Google ---- */
.reviews {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

.reviews-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--flow-tight);
  padding-inline: var(--head-indent);
  margin-bottom: var(--head-gap);
}

.reviews-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reviews-eyebrow .reviews-stars {
  color: #fbbc04;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: none;
}

.reviews-header h2 {
  margin-bottom: 0;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding-inline: var(--head-indent);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--flow);
  padding: var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.review-stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbc04;
  line-height: 0;
}

.review-stars svg {
  width: 18px;
  height: 18px;
}

.review-text {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--flow);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}

.review-author {
  color: var(--ink);
  font-weight: 700;
}

.review-when {
  color: var(--muted);
}

.reviews-cta {
  display: inline-flex;
  align-items: center;
  margin: var(--head-gap) var(--head-indent) 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--blue-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.reviews-cta:hover {
  color: var(--blue-darker);
}

@media (max-width: 1100px) {
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .reviews-eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .reviews-eyebrow .reviews-stars {
    font-size: 18px;
    letter-spacing: 1.5px;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- FAQ — accordion ---- */
.faq {
  margin-top: var(--section-gap);
  padding: var(--head-pad-top) var(--frame) var(--space-10);
}

/* Когда есть .faq-intro под h2, поджимаем gap h2->intro */
.faq h2:has(+ .faq-intro) {
  margin-bottom: var(--flow);
}

.faq-intro {
  margin: 0 0 var(--head-gap);
  padding-inline: var(--head-indent);
  max-width: 760px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}

.faq-list {
  padding-inline: var(--head-indent);
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--space-6) 56px var(--space-6) 0;
  font-size: var(--fs-lead);
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: var(--blue-dark);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 0 56px var(--space-6) 0;
  max-width: 900px;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* ---- Kontakt — intro + form ---- */
.contact,
.inquiry {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--gap);
  margin-top: var(--section-gap);
  padding: var(--frame);
}

.inquiry {
  /* even 50/50 split on the subpage (homepage Kontakt stays at 0.85/1.15) */
  grid-template-columns: 1fr 1fr;
}

.contact-intro,
.inquiry-copy {
  background: var(--panel);
  border-radius: 8px;
  padding: clamp(28px, 3.5vw, 44px);
}

.contact h2,
.inquiry h2 {
  margin: 0 0 var(--flow);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 400;
  letter-spacing: 0;
}

.contact-intro > p,
.inquiry-copy > p {
  margin: 0 0 var(--flow-loose);
  max-width: 420px;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.contact-info li {
  display: grid;
  gap: 3px;
}

.contact-label {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-info a,
.contact-info li > span:last-child {
  font-size: var(--fs-body);
  color: var(--ink);
}

.contact-form {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: 8px;
  background: var(--gradient);
}

/* Floating-label fields */
.field {
  position: relative;
}

.field input,
.field textarea {
  width: 100%;
  padding: 22px 15px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: var(--ff);
  font-size: var(--fs-body);
  color: var(--ink);
}

.field textarea {
  resize: vertical;
  min-height: 104px;
  padding-top: 24px;
}

.field > span {
  position: absolute;
  left: 16px;
  top: 15px;
  color: var(--muted);
  font-size: var(--fs-body);
  pointer-events: none;
  transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease;
}

.field input:focus ~ span,
.field input:not(:placeholder-shown) ~ span,
.field textarea:focus ~ span,
.field textarea:not(:placeholder-shown) ~ span {
  top: 7px;
  font-size: 11px;
  color: var(--blue-dark);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-dark);
}

/* Невалидные поля подсвечиваем красным после взаимодействия пользователя.
   :user-invalid — современный, fallback через :not(:placeholder-shown):invalid. */
.field input:user-invalid,
.field textarea:user-invalid,
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid {
  border-color: var(--error);
}

.field input:user-invalid ~ span,
.field textarea:user-invalid ~ span,
.field input:not(:placeholder-shown):invalid ~ span,
.field textarea:not(:placeholder-shown):invalid ~ span {
  color: var(--error);
}

.field-check input:user-invalid {
  outline: 1px solid var(--error);
  outline-offset: 2px;
}

.field-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--muted);
}

.field-check input {
  margin-top: 3px;
}

.field-check a {
  color: var(--blue-dark);
  text-decoration: underline;
}

.form-submit {
  justify-self: start;
  margin-top: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border: 0;
  border-radius: 999px;
  background: var(--blue-dark);
  color: #fff;
  font-family: var(--ff);
  font-size: var(--fs-btn);
  font-weight: 700;
  cursor: pointer;
}

/* ---- Footer ---- */
.site-footer {
  width: min(100% - 44px, 1420px);
  margin: var(--section-gap) auto;
  background: var(--dark);
  color: #e7e9e4;
  border-radius: var(--radius);
  overflow: hidden;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(40px, 4vw, 64px) clamp(28px, 3.5vw, 56px) clamp(32px, 3vw, 48px);
}

.footer-logo {
  width: 180px;
  height: auto;
}

.footer-head {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.footer-col p,
.footer-col a {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.footer-col a {
  display: block;
}

.footer-col a:hover {
  color: #fff;
}

.footer-legal {
  margin-top: var(--space-4);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom span {
  display: block;
  padding: var(--space-5) clamp(28px, 3.5vw, 56px);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.5);
}

/* Cookie consent banner — bottom-left fixed, dismissed via localStorage */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  margin: 0;
  flex: 1 1 200px;
}

.cookie-banner__text a {
  color: var(--blue-dark);
  text-decoration: underline;
}

.cookie-banner__text a:hover {
  color: var(--blue-darker);
}

.cookie-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--blue-dark);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cookie-banner__btn:hover {
  background: var(--blue-darker);
}

@media (max-width: 640px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* Floating WhatsApp button — shared across all pages via /includes/ */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px 0 4px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: background-color 0.2s ease;
}

.wa-float:hover {
  background: #1ebe5b;
}

.wa-icon-circle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.wa-icon-circle svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .logo img {
    width: auto;
    height: 48px;
  }

  .main-nav {
    position: absolute;
    top: 68px;
    left: var(--frame);
    right: var(--frame);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--sheet);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    padding: 13px 14px;
  }

  /* Контакты внутри бургер-меню — только на мобиле */
  .main-nav-contacts {
    display: grid;
    gap: 6px;
    margin-top: var(--space-3);
    padding: var(--space-4) 14px 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-small);
    color: var(--muted);
    line-height: 1.45;
  }

  .main-nav-contacts a {
    padding: 0;
    color: var(--ink);
    font-size: var(--fs-body);
    font-weight: 700;
  }

  .header-contact,
  .phone-button {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .site-header,
  .hero,
  main > section:not(.hero) {
    width: min(100% - 28px, 1420px);
  }

  .hero {
    min-height: auto;
    padding: var(--frame);
  }

  .hero > img,
  .hero::before {
    position: relative;
    inset: auto;
    width: 100%;
    height: 520px;
  }

  .hero::before {
    display: none;
  }

  .hero-copy {
    width: 100%;
    margin-left: 0;
    padding: var(--space-8) var(--space-3) var(--space-16);
  }

  .services-overview,
  .billing,
  .about,
  .page-hero,
  .inquiry,
  .team,
  .pflegegrad,
  .kontakt-page,
  .extra-grid,
  .why-grid,
  .values--grid2 .values-grid,
  .process-cta,
  .kalkulator-info {
    grid-template-columns: 1fr;
  }

  .pflegegrad-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rechtliches-list a {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label arrow" "title arrow";
    gap: 4px 20px;
  }

  .rechtliches-list .rechtliches-label {
    grid-area: label;
  }

  .rechtliches-list .rechtliches-title {
    grid-area: title;
  }

  .rechtliches-list .rechtliches-arrow {
    grid-area: arrow;
    align-self: center;
  }

  .services-overview {
    grid-template-rows: auto;
  }

  .service-photo {
    grid-row: auto;
    grid-template-rows: 360px 50px;
  }

  .extra-services {
    grid-column: auto;
  }

  .billing img {
    min-height: 340px;
  }

  .about img {
    min-height: 380px;
  }

  .process-track {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-8);
  }

  .leistungen-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step::after {
    display: none;
  }

  .contact {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-10);
  }
}

@media (max-width: 640px) {
  :root {
    --fs-btn: 13px;
  }

  .logo img {
    width: 210px;
  }

  /* Hero — фото пониже, padding-bottom поджать */
  .hero > img {
    height: 300px;
  }

  .hero-copy {
    padding-bottom: var(--space-8);
  }

  /* H1 на главной: убираем принудительный перенос — текст ляжет естественно */
  .hide-mobile {
    display: none;
  }

  /* Services-overview блок 2: img пониже, кнопку вытаскиваем под extras */
  .service-photo {
    display: contents;
  }

  .service-photo img {
    height: 260px;
    grid-row: auto;
  }

  .service-photo a {
    order: 1;
    align-self: start;
  }

  /* Process на мобиле: убрать точки-кружки, цифры покрупнее */
  .step::before,
  .step::after {
    display: none;
  }

  .step-num {
    font-size: var(--fs-h2);
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-3);
  }

  .step {
    padding-top: 0;
  }

  .billing {
    min-height: 0;
  }

  .billing-copy::before {
    inset: 22px -80px 80px 22px;
  }

  .why article {
    min-height: 190px;
  }

  .process-track {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Subpage сетки на мобиле — single column */
  .leistungen-grid {
    grid-template-columns: 1fr;
  }

  .pflegegrad-grid {
    grid-template-columns: 1fr;
  }

  /* Фотки на subpage не должны быть слишком высокими в свернутом виде */
  .page-hero > img,
  .team img,
  .pflegegrad img,
  .kontakt-page img,
  .about img,
  .billing img {
    min-height: 0;
    max-height: 300px;
    height: 300px;
    object-fit: cover;
  }

  /* Kontakt-блок на моб: фото СНИЗУ, info сверху */
  .kontakt-page .kontakt-info {
    order: 1;
  }

  .kontakt-page img {
    order: 2;
  }

  /* .inquiry-copy последний p теряет margin-bottom — иначе под формой
     остаётся 40px пустого хвоста в белой плашке */
  .inquiry-copy > p:last-child {
    margin-bottom: 0;
  }

  .footer-top {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
  }
}

/* Tablet — leistungen-grid 2 колонки между 640 и 1100 */
@media (max-width: 1100px) and (min-width: 641px) {
  .leistungen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Якорные ссылки: header sticky перекрывает заголовок секции,
   scroll-margin-top смещает целевой scroll вниз. */
section[id] {
  scroll-margin-top: 100px;
}

/* ---- Micro-interactions (hover / focus) — color/border only, no lift/shadow ---- */
.phone-button,
.service-photo a,
.billing a,
.pflegegrad-cta,
.kontakt-cta,
.beratung-cta,
.star-cta,
.form-submit {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.phone-button:hover,
.service-photo a:hover,
.billing a:hover,
.pflegegrad-cta:hover,
.kontakt-cta:hover,
.beratung-cta:hover,
.form-submit:hover {
  background: var(--blue-darker);
}

.star-cta:hover {
  background: #cfe0e9;
  border-color: rgba(79, 120, 144, 0.5);
}

/* Cards — subtle border tint only */
.service-copy-card,
.why article {
  transition: border-color 0.25s ease;
}

.service-copy-card:hover,
.why article:hover {
  border-color: rgba(79, 120, 144, 0.35);
}

/* Value badge — soft tint on row hover */
.value-icon {
  transition: background-color 0.2s ease;
}

.value-item:hover .value-icon {
  background: #cfe0e9;
}

/* FAQ question hover */
.faq-item summary {
  transition: color 0.2s ease;
}

.faq-item summary:hover {
  color: var(--blue-dark);
}

/* Link hovers */
.main-nav a {
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}

.header-contact a,
.contact-info a,
.footer-col a,
.footer-legal a {
  transition: color 0.18s ease;
}

.header-contact a:hover,
.contact-info a:hover {
  color: var(--blue-dark);
}

.footer-legal a:hover {
  color: #fff;
}

/* Keyboard focus */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue-dark);
  outline-offset: 3px;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Elements that ALSO have a hover transition need the reveal transition to
   list the hover property too, otherwise the hover-transition shorthand and
   the reveal-transition shorthand fight over `transition` and one wins
   entirely. The element-qualified `.why article` (0,1,1) even beats plain
   `.scroll-reveal` (0,1,0), which silently killed the Warum reveal.
   Stagger is applied per-sibling by JS (inline transition-delay) and cleared
   on transitionend so hovers stay snappy afterwards. */
.service-copy-card.scroll-reveal,
.why article.scroll-reveal,
.value-item.scroll-reveal,
.leistung-card.scroll-reveal,
.extra-card.scroll-reveal,
.pg-card.scroll-reveal,
.step.scroll-reveal {
  transition:
    opacity 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease;
}

.star-cta.scroll-reveal {
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Process timeline — dots, lines and steps reveal left to right */
.step.scroll-reveal::before {
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.step.scroll-reveal::after {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.step.scroll-reveal.is-visible::before {
  opacity: 1;
  transform: scale(1);
}

.step.scroll-reveal.is-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.process .step.scroll-reveal:nth-child(1),
.process .step.scroll-reveal:nth-child(1)::before {
  transition-delay: 0s;
}
.process .step.scroll-reveal:nth-child(1)::after {
  transition-delay: 0.18s;
}

.process .step.scroll-reveal:nth-child(2),
.process .step.scroll-reveal:nth-child(2)::before {
  transition-delay: 0.25s;
}
.process .step.scroll-reveal:nth-child(2)::after {
  transition-delay: 0.43s;
}

.process .step.scroll-reveal:nth-child(3),
.process .step.scroll-reveal:nth-child(3)::before {
  transition-delay: 0.5s;
}
.process .step.scroll-reveal:nth-child(3)::after {
  transition-delay: 0.68s;
}

.process .step.scroll-reveal:nth-child(4),
.process .step.scroll-reveal:nth-child(4)::before {
  transition-delay: 0.75s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .scroll-reveal {
    opacity: 1;
    transform: none;
  }

  .step.scroll-reveal::before,
  .step.scroll-reveal::after {
    opacity: 1;
    transform: none;
  }
}