/* ========================================
   VITALIS SENIORENDIENST - COMPONENTS CSS
   Alle wiederverwendbaren Komponenten
   ======================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 48px;
  min-width: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(80, 121, 165, 0.35);
  transform: translateY(-2px) scale(1.02);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-primary);
}

.btn-secondary {
  background-color: transparent;
  color: var(--blue);
  border-color: var(--blue);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--blue);
  color: var(--white);
  transform: translateY(-2px) scale(1.02);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-phone {
  background-color: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  box-shadow: var(--shadow-secondary);
}

.btn-phone:hover,
.btn-phone:focus-visible {
  background-color: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
  box-shadow: 0 6px 24px rgba(61, 138, 138, 0.35);
  transform: translateY(-2px) scale(1.02);
}

.btn-phone:active {
  transform: translateY(0);
}

.btn-white {
  background-color: var(--white);
  color: var(--blue);
  border-color: var(--white);
}

.btn-white:hover,
.btn-white:focus-visible {
  background-color: var(--ink-bg);
  color: var(--blue-dark);
  transform: translateY(-2px);
}

/* INT-658: Zweitknopf neben .btn-primary – vorher ohne Basis-CSS (wirkte wie Text).
   Ruhiger als .btn-secondary (kein Vollblau beim Hover). Mid-CTA-Varianten
   überschreiben das weiter unten gezielt. */
.btn-outline {
  background-color: var(--white);
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--blue-soft);
  color: var(--blue-dark);
  border-color: var(--blue-dark);
  transform: translateY(-2px);
}

.btn-outline:active {
  transform: translateY(0);
}

.btn-sm {
  padding: 10px 20px;
  font-size: var(--fs-sm);
  min-height: 44px;
}

.btn-lg {
  padding: 20px 40px;
  font-size: var(--fs-lg);
}

.btn-nav {
  padding: 10px 18px;
  font-size: 0.9375rem;
  min-height: 44px;
  white-space: nowrap;
}

.btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* --- Navigation --- */
/* Sticky liegt auf .site-header (Direktkind von <body> = hoher Containing-Block),
   NICHT auf .nav: sonst hält sticky nur bis zur Unterkante des kurzen Headers und
   die Nav scrollt weg. Die Trust-Bar steht als Geschwister VOR .site-header und
   scrollt bewusst weg; die Nav bleibt oben kleben (INT-301-Folgefix). */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.nav {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-border);
  transition: box-shadow var(--transition-base);
}

.nav.is-scrolled {
  box-shadow: var(--shadow-md);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  height: var(--nav-height);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  text-decoration: none;
  color: var(--ink);
}

.nav__logo img,
.nav__logo-img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav__logo-text {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--blue);
  line-height: 1.2;
}

.nav__logo-text span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  list-style: none;
}

.nav__link {
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-xs);
  position: relative;
  transition: color var(--transition-fast);
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--blue);
  border-radius: 1px;
  transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--blue);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* --- Nav Search Button --- */
.nav__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--ink-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), opacity 0.25s ease;
  flex-shrink: 0;
}
.nav__search-btn:hover {
  color: var(--blue);
  background: var(--blue-soft);
}

/* Nav-Elemente ausblenden wenn Suche aktiv */
.nav.is-searching .nav__links,
.nav.is-searching .nav__actions,
.nav.is-searching .nav__search-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* --- Nav Inline-Suche --- */
.nav__search-wrap {
  position: absolute;
  right: var(--container-padding);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden; /* 0-Breite muss die Such-Bar clippen, sonst horizontaler Overflow (INT-152) */
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
  z-index: 10;
}
.nav.is-searching .nav__search-wrap {
  width: min(560px, calc(100% - 180px));
  opacity: 1;
  pointer-events: auto;
  overflow: visible; /* Ergebnis-Dropdown darf überstehen, sobald Suche aktiv */
}

.nav__search-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--white);
  border: 1.5px solid var(--blue);
  border-radius: var(--radius-pill);
  padding: 0 var(--spacing-md) 0 var(--spacing-lg);
  height: 44px;
  box-shadow: 0 2px 16px rgba(80,121,165,0.15);
  overflow: hidden;
}
.nav__search-bar svg {
  color: var(--blue);
  flex-shrink: 0;
}
.nav__search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--fs-base);
  color: var(--ink);
  font-family: var(--font-body);
  background: transparent;
  min-width: 0;
}
.nav__search-input::placeholder {
  color: var(--ink-muted);
}
.nav__search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--ink-bg);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav__search-close:hover {
  background: var(--blue-soft);
  color: var(--blue);
}

/* Ergebnis-Dropdown */
.nav__search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav__search-dropdown.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__search-results {
  list-style: none;
  padding: var(--spacing-sm);
}
.nav__search-results li a {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.nav__search-results li a:hover,
.nav__search-results li a:focus {
  background: var(--ink-bg);
  outline: none;
}
.search-result__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.search-result__desc {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: 1px;
}
.nav__search-empty {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  text-align: center;
}

.nav__phone {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--teal);
  text-decoration: none;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--teal);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav__phone:hover {
  background: var(--teal);
  color: var(--white);
}

.nav__phone svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* --- Hamburger Menu --- */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: calc(var(--z-mobile-menu) + 1);
}

.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: var(--ink);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}

.nav__hamburger.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Mobile Menu --- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobile-menu);
  background-color: var(--white);
  padding: calc(var(--nav-height) + var(--spacing-2xl)) var(--container-padding) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility var(--transition-base), opacity var(--transition-base);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  padding: var(--spacing-md) 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-border);
  min-height: 56px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast);
}

.mobile-menu__link:hover,
.mobile-menu__link.is-active {
  color: var(--blue);
}

.mobile-menu__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: auto;
  padding: var(--spacing-lg);
  background-color: var(--teal);
  color: var(--white);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  min-height: 56px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* --- Trust Bar --- */
.trust-bar {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: var(--white);
  padding: var(--spacing-sm) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.trust-bar__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.9); /* vorher --amber: auf blauer Trust-Bar nur 1,4:1, kaum sichtbar */
}

.trust-bar__divider {
  width: 1px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  /* JPEG-Fallback; moderne Browser bekommen AVIF via @supports (image-set) unten */
  background:
    linear-gradient(105deg, rgba(46,36,27,0.74) 0%, rgba(74,60,46,0.50) 50%, rgba(60,48,36,0.12) 100%),
    url('../images/hero-homecare-new.jpeg') center 25% / cover no-repeat;
  color: var(--white);
  padding: var(--spacing-5xl) 0;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}

/* AVIF-Hero (139 KB statt 499 KB) für Browser mit image-set; sonst JPEG-Fallback oben */
@supports (background-image: image-set(url("x") type("image/avif"))) {
  .hero {
    background:
      linear-gradient(105deg, rgba(46,36,27,0.74) 0%, rgba(74,60,46,0.50) 50%, rgba(60,48,36,0.12) 100%),
      image-set(
        url('../images/hero-homecare-new.avif') type('image/avif'),
        url('../images/hero-homecare-new.jpeg') type('image/jpeg')
      ) center 25% / cover no-repeat;
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* minmax(0,…) statt 1fr: Track darf unter min-content schrumpfen → kein Überlauf auf 360px */
  align-items: center;
  gap: var(--spacing-3xl);
  text-align: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.hero__content {
  max-width: 720px;
  min-width: 0; /* Grid-Item darf schrumpfen – verhindert Überlauf auf schmalen Screens (360px) */
}

/* --- Hero Stats (rechte Spalte Desktop) --- */
.hero__stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
}

.hero__stat {
  position: relative;
  /* 0.6 statt 0.45: Karte 3 liegt über hellerem Bildbereich, Text-Kontrast sonst < WCAG AA (INT-Mobile) */
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  padding-top: calc(var(--spacing-md) + 3px); /* Platz für Akzentstreifen */
  min-width: 120px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: left;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--transition-base), box-shadow var(--transition-base);
  cursor: default;
}

/* Akzentstreifen oben – einheitlich Amber */
.hero__stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--amber);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: height 0.25s ease;
}

/* Shimmer-Sweep: Lichtglanz läuft einmalig von links nach rechts */
@keyframes shimmer-sweep {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(350%); }
}

.hero__stat::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
  border-radius: var(--radius-lg);
  transform: translateX(-200%);
}

/* Hover nur auf echten Pointer-Geräten (nicht Touch) */
@media (hover: hover) {
  .hero__stat:hover {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .hero__stat:hover::before {
    height: 5px;
  }

  .hero__stat:hover::after {
    animation: shimmer-sweep 1.1s ease-in-out forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__stat::after { animation: none !important; }
}

/* --- Button Modifier: Sekundär auf dunklem Hintergrund --- */
.btn-secondary--on-dark {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

@media (hover: hover) {
  .btn-secondary--on-dark:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.10);
    color: var(--white);
  }
}

.hero__stat-number {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1;
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); /* Lesbarkeit über hellem Hero-Bild sichern */
}

.hero__stat-label {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1.35;
  min-width: 0; /* im Flex-Row umbrechen statt Karte über Viewport dehnen (INT-152) */
  overflow-wrap: anywhere;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-lg);
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--spacing-xl);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  color: var(--white);
  max-width: 14ch;
  margin-bottom: var(--spacing-lg);
  line-height: 1.15;
}

.hero__title-accent {
  color: var(--amber);
  /* Kein text-shadow hier – Amber auf dunklem Hintergrund hat ausreichend Eigenkontrast */
}

.hero__subtitle {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-2xl);
  max-width: 520px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.30);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-2xl);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--fw-medium);
}

.hero__trust-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--amber);
  flex-shrink: 0;
}

/* .hero__image is no longer used — image is handled as CSS background on .hero */
.hero__image {
  display: none;
}

/* --- Section Header --- */
.section-header {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-xl);
}

.section-header__label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-md);
}

.section-header__title {
  margin-bottom: var(--spacing-lg);
}

.section-header__accent {
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  border-radius: var(--radius-pill);
  margin: var(--spacing-lg) auto 0;
}

.section-header__text {
  font-size: var(--fs-lg);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
}

.section-header__rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--spacing-md);
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.section-header__rating-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.section-header__rating-stars {
  color: var(--amber);
  letter-spacing: -1px;
  font-size: 0.8rem;
}

/* --- Feature Cards --- */
.feature-card {
  background-color: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.feature-card:hover {
  border-color: var(--blue-soft);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  background: var(--white);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--blue-ghost);
  border-radius: var(--radius-circle);
  margin-bottom: var(--spacing-md);
  color: var(--blue);
  transition: all var(--transition-base);
}

.feature-card:hover .feature-card__icon {
  background-color: var(--blue);
  color: var(--white);
  transform: rotate(5deg) scale(1.1);
}

.feature-card__icon svg {
  width: 28px;
  height: 28px;
}

.feature-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--ink);
}

.feature-card__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
}

.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
  font-weight: var(--fw-semibold);
  color: var(--blue);
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.feature-card__link svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-fast);
}

.feature-card__link:hover svg {
  transform: translateX(4px);
}

.feature-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
  font-weight: var(--fw-semibold);
  font-size: inherit;
  font-family: inherit;
  color: var(--blue);
  min-height: 48px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.feature-card__toggle svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-fast);
}

.feature-card__toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.feature-card__expand {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--ink-border);
}

.feature-card__expand ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.feature-card__expand li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
}

.feature-card__expand li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--teal);
}

/* --- Leistungs-Bildkarten (INT-335: 6 gleich, kompakt, mit Bild) ---
   Mobil 1 Spalte; 2/3 Spalten in responsive.css (768 / 1024). */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .svc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

.svc-card:focus-within {
  box-shadow: var(--shadow-lg);
}

.svc-card__figure {
  margin: 0;
  overflow: hidden;
  background: var(--blue-soft);
}

/* aspect-ratio direkt am <img>: echte feste Höhe, damit object-fit greift
   (height:100% gegen ein aspect-ratio-Elternteil bliebe auto). */
.svc-card__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.svc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--spacing-lg);
}

.svc-card__body .feature-card__title {
  margin-bottom: var(--spacing-xs);
}

.svc-card__body .feature-card__text {
  margin-bottom: var(--spacing-md);
}

.svc-card__list {
  list-style: none;
  margin: 0 0 var(--spacing-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.svc-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--fs-sm);   /* 16px – senior-lesbar, nie kleiner */
  color: var(--ink-muted);
  line-height: 1.4;
}

.svc-card__list svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--teal);
}

.svc-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 48px;           /* Touch-Target */
  font-weight: var(--fw-semibold);
  color: var(--blue-dark);
  text-decoration: none;
}

.svc-card__link:hover,
.svc-card__link:focus-visible {
  color: var(--teal-dark);
}

.svc-card__link svg {
  transition: transform 0.2s ease;
}

.svc-card__link:hover svg {
  transform: translateX(3px);
}


/* --- Feature Section (Two-Column) --- */
.feature-section {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first: 1 Spalte, Desktop-Override in responsive.css */
  align-items: center;
  gap: var(--spacing-2xl);
}

.feature-section--reverse {
  direction: rtl;
}

.feature-section--reverse > * {
  direction: ltr;
}

.feature-section__content {
  max-width: 540px;
}

.feature-section__label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-md);
}

.feature-section__title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--spacing-lg);
}

.feature-section__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-xl);
}

.feature-section__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.feature-section__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
}

.feature-section__list-item svg {
  width: 24px;
  height: 24px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-section__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-height: 520px;
  align-self: center;
}

.feature-section__image img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* --- Vorteile Section --- */
.vorteile-list {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first: 1 Spalte; Desktop ab 768px → 2 Spalten */
  gap: var(--spacing-lg);
}

.vorteile-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background-color: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-border);
  transition: all var(--transition-base);
}

.vorteile-item:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}

.vorteile-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--teal-ghost);
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

.vorteile-item__icon svg {
  width: 24px;
  height: 24px;
  color: var(--teal);
}

.vorteile-item__content {
  flex: 1;
}

.vorteile-item__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--spacing-xs);
}

.vorteile-item__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
}

/* --- Checkmark List --- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.check-list__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
}

.check-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--teal);
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

.check-list__icon svg {
  width: 16px;
  height: 16px;
  color: var(--white);
}

/* --- Testimonials --- */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first; ab 768px → 2-spaltig, ab 1024px → 3-spaltig */
  gap: var(--spacing-xl);
}

.testimonial-card {
  background-color: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  position: relative;
  transition: all var(--transition-base);
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-xl);
  font-size: 4rem;
  line-height: 1;
  font-family: var(--font-heading);
  color: var(--blue-ghost);
  pointer-events: none;
}

.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--blue-soft);
  background: var(--white);
}

.testimonial-card__stars {
  display: flex;
  gap: 4px;
  margin-bottom: var(--spacing-lg);
}

.testimonial-card__stars svg {
  width: 22px;
  height: 22px;
  color: var(--amber);
  fill: var(--amber);
}

.testimonial-card__quote {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-xl);
  font-style: italic;
  position: relative;
  padding-left: var(--spacing-lg);
  border-left: 3px solid var(--blue-soft);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.testimonial-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  background-color: var(--blue-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--blue);
  flex-shrink: 0;
  overflow: hidden;
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.testimonial-card__role {
  font-size: var(--fs-sm);
  color: var(--ink-light);
}

/* --- CTA Section --- */
.cta-section {
  background: var(--blue); /* #5079A5 – konsistent mit Page-Header */
  color: var(--white);
  padding: var(--spacing-2xl) 0;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  border-radius: var(--radius-circle);
  pointer-events: none;
}

.cta-section__inner {
  position: relative;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-section__title {
  font-size: var(--fs-4xl);
  color: var(--white);
  margin-bottom: var(--spacing-lg);
}

.cta-section__text {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-2xl);
}

.cta-section__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.cta-section__note {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--spacing-lg);
}

/* --- Kontakt Section --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first; ab 1024px → 2-spaltig in responsive.css */
  gap: var(--spacing-2xl);
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background-color: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.contact-card:hover {
  border-color: var(--blue-soft);
  box-shadow: var(--shadow-md);
  background: var(--white);
}

.contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: var(--blue-ghost);
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  transition: transform var(--transition-base), background-color var(--transition-base);
}

.contact-card:hover .contact-card__icon {
  background-color: var(--blue);
}

.contact-card:hover .contact-card__icon svg {
  color: var(--white);
}

.contact-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--blue);
  transition: color var(--transition-base);
}

.contact-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--spacing-xs);
}

.contact-card__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
}

.contact-card__text a {
  color: var(--blue);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.contact-card__text a:hover {
  text-decoration: underline;
}

/* --- Contact Form --- */
.contact-form {
  background-color: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-sm);
}

.contact-form__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--spacing-xs);
}

.contact-form__subtitle {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  margin-bottom: var(--spacing-xl);
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ink);
  margin-bottom: var(--spacing-xs);
}

.form-label .required {
  color: var(--color-danger);
  margin-left: 2px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--fs-base);
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--white);
  border: 2px solid var(--ink-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 52px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ghost);
}

/* Auswahlfeld (INT-300): eigener Pfeil aus Token-Farben, Aufklapp-Liste bleibt nativ.
   select.form-select erhöht die Spezifität, damit das padding-Shorthand in responsive.css
   den Platz für den Pfeil nicht überschreibt. */
select.form-select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 52px;
  font-weight: var(--fw-semibold);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%),
    linear-gradient(135deg, var(--blue) 50%, transparent 50%),
    linear-gradient(var(--ink-border), var(--ink-border));
  background-position: right 26px center, right 20px center, right 44px center;
  background-size: 6px 6px, 6px 6px, 1px 24px;
  background-repeat: no-repeat;
}

select.form-select:hover {
  border-color: var(--blue);
}

/* Nichts gewählt → Hinweistext grau wie Platzhalter */
select.form-select:has(option[value=""]:checked) {
  color: var(--ink-light);
  font-weight: var(--fw-regular);
}

select.form-select option {
  color: var(--ink);
  font-weight: var(--fw-regular);
}

.form-label__optional {
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--ink-light);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-hint {
  font-size: var(--fs-sm);
  color: var(--ink-light);
  margin-top: var(--spacing-xs);
}

/* Kachel-Vorauswahl (kontakt.html?leistung=…): Hinweis über dem Nachrichtenfeld */
.form-hint--prefill {
  margin: 0 0 var(--spacing-xs);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--blue-soft);
  color: var(--ink);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first; ab 1024px → 2-spaltig in responsive.css */
  gap: var(--spacing-lg);
}

/* --- FAQ Accordion --- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.faq-item {
  background-color: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.faq-item.is-open {
  border-color: var(--blue-soft);
  box-shadow: var(--shadow-sm);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-xl);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--spacing-lg);
  min-height: 64px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast);
}

.faq-item__question:hover {
  color: var(--blue);
}

.faq-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background-color: var(--blue-ghost);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.faq-item__icon svg {
  width: 20px;
  height: 20px;
  color: var(--blue);
  transition: transform var(--transition-base);
}

.faq-item.is-open .faq-item__icon {
  background-color: var(--blue);
}

.faq-item.is-open .faq-item__icon svg {
  color: var(--white);
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item__answer-inner {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
}

/* --- Steps / Ablauf --- */
.steps {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first; Desktop-Overrides in responsive.css */
  gap: var(--spacing-xl);
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  border-radius: var(--radius-pill);
  z-index: 0;
}

.step {
  text-align: center;
  position: relative;
  z-index: var(--z-base);
}

.step__number {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  margin: 0 auto var(--spacing-lg);
  box-shadow: var(--shadow-primary);
  /* Kein padding, kein letter-spacing der verschiebt */
}

.step__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--spacing-sm);
}

.step__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
}

.step__mehr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-sm);
  min-height: 48px; /* Senioren-Touch-Target: vorher 38px hoch */
  padding: 11px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.step__mehr-btn:hover { color: var(--blue-deep); }
.step__mehr-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.step__mehr-btn[aria-expanded="true"] .step__mehr-icon {
  transform: rotate(180deg);
}

.step2-panel {
  transition: opacity 0.3s ease;
}
.step2-panel[hidden] { display: none; }

/* --- Trust Badges --- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xl);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  white-space: nowrap;
  transition: all var(--transition-base);
}

.trust-badge:hover {
  border-color: var(--blue-soft);
  box-shadow: var(--shadow-sm);
}

.trust-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--blue-ghost);
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

.trust-badge__icon svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.trust-badge__icon--green {
  background-color: var(--teal-ghost);
}

.trust-badge__icon--green svg {
  color: var(--teal);
}

/* --- Partner Logos --- */
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2xl);
  padding: var(--spacing-xl) 0;
}

.partner-logos img {
  height: 40px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all var(--transition-base);
}

.partner-logos img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* --- Footer --- */
.footer {
  background: linear-gradient(135deg, #1C2B3A 0%, #2A3F5A 100%);
  color: rgba(255, 255, 255, 0.8);
  padding: var(--spacing-4xl) 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first; ab 768px → 2-spaltig, ab 1024px → 4-spaltig */
  gap: var(--spacing-2xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.footer__brand {
  max-width: 320px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  text-decoration: none;
}

.footer__logo-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer__logo-text {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--white);
}

.footer__brand-text {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--lh-relaxed);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.footer__social {
  display: flex;
  gap: var(--spacing-md);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-circle);
  color: rgba(255, 255, 255, 0.7);
  transition: all var(--transition-base);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.footer__social-link:hover {
  background-color: var(--blue);
  color: var(--white);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--white);
  margin-bottom: var(--spacing-xl);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.footer__link {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--transition-fast);
  min-height: 44px;
  display: flex;
  align-items: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.footer__link:hover {
  color: var(--white);
}

/* INT-321: „Cookie-Einstellungen“ ist ein <button>, sieht aber aus wie die Footer-Links */
button.footer__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--lh-normal);
  white-space: nowrap;
}

.footer__contact-item svg {
  width: 22px;
  height: 22px;
  color: var(--blue-soft);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__contact-item a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: normal;
  overflow-wrap: anywhere; /* bricht lange Wörter (E-Mail) nur bei Bedarf, nicht mitten in der Telefonnummer */
}

.footer__contact-item a:hover {
  color: var(--white);
}

/* --- muenchen.de Badge im Footer --- */
.footer__muenchen-badge {
  display: inline-block;
  margin-top: var(--spacing-md);
  text-decoration: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.footer__muenchen-badge:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}
.footer__muenchen-badge-img {
  display: block;
  width: 110px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-xl);
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.45);
}

.footer__bottom-links {
  display: flex;
  gap: var(--spacing-xl);
}

.footer__bottom-links a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color var(--transition-fast);
  min-height: 44px;
  display: flex;
  align-items: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.footer__bottom-links a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.footer__ai-note {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  padding: var(--spacing-xs) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: var(--spacing-xs);
}

.footer__credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  padding: 0.25rem 0 1rem;
  margin-top: 0.2rem;
}

.footer__credit-heart {
  color: #e05c5c;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.footer__credit:hover .footer__credit-heart {
  transform: scale(1.3);
}

.footer__credit-link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__credit-link:hover {
  color: #fff;
}

/* --- Target Group Cards (Fuer wen ist Vitalis da?) --- */
.target-cards {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first; ab 768px → 2-spaltig, ab 1024px → 3-spaltig */
  gap: var(--spacing-xl);
}

.target-card {
  background-color: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  text-align: center;
  transition: all var(--transition-base);
}

.target-card:hover {
  border-color: var(--blue-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  background: var(--white);
}

.target-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--spacing-lg);
  background-color: var(--blue-ghost);
  border-radius: var(--radius-circle);
}

.target-card__icon svg {
  width: 32px;
  height: 32px;
  color: var(--blue);
}

.target-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--spacing-sm);
}

.target-card__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
}

/* --- Page Header (Subpages) --- */
/*
 * Design-Entscheidung: Linearer Gradient von #1a3a6b (dunkel) → #5079A5 (mittel),
 * Verlauf von links-oben nach rechts-unten für klassische Tiefenwirkung.
 * Kontrastwerte (Weiß auf Hintergrund):
 *   #1a3a6b → 9.8:1  (WCAG AAA)
 *   #5079A5 → 4.6:1  (WCAG AA)
 * Radial-Gradienten darüber liefern subtile Licht-/Tiefeneffekte.
 */
.page-header {
  /* INT-662 Option 2: feine Papierkörnung + dunklere Zone hinter dem Text.
     Nur Palette-Tokens; die alten hellen Enden (#5b8ec9/#7aaed9) fielen unter WCAG AA. */
  background:
    url('../images/grain.svg'),
    radial-gradient(ellipse 60% 85% at 50% 50%, rgba(42,69,101,0.55) 0%, rgba(42,69,101,0) 100%), /* --teal-dark */
    linear-gradient(to right, var(--blue) 0%, var(--blue-dark) 28%, var(--blue-dark) 72%, var(--blue) 100%);
  color: var(--white);
  padding: var(--spacing-4xl) 0 calc(var(--spacing-3xl) + 48px);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* border-bottom entfernt – Wave-Divider übernimmt die Trennung */
}

.page-header .page-header__title {
  color: var(--white);
}

.page-header .page-header__subtitle {
  font-size: var(--fs-lg);
  color: var(--white);
  max-width: 640px;
  margin: var(--spacing-md) auto 0;
  line-height: var(--lh-relaxed);
}

.page-header .page-header__breadcrumb,
.page-header .page-header__breadcrumb a {
  color: rgba(255, 255, 255, 0.92);
}

.page-header .page-header__breadcrumb a:hover {
  color: var(--white);
}

/* Dekoratives Licht-Highlight von oben – erzeugt Tiefe ohne Überladen */
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% -20%, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: headerGlow 6s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes headerGlow {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-header::before { animation: none; }
}

/* Dekorativer Wave-Divider am unteren Rand – Übergang zu weißem Content */
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--white);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 2; /* Über ::before Glow-Overlay */
}

/* Wave-Bogen an einen grauen Folgeabschnitt (bg-section #F4F7FB) anpassen –
   sonst bleibt zwischen Header und Abschnitt ein weißer Spalt sichtbar. */
.page-header--on-section::after {
  background: #F4F7FB;
}

/* Folgt direkt die getönte Sprungleiste (.page-toc, --blue-soft), muss die weiße
   Welle in dieselbe Tönung übergehen – sonst hängt die Leiste als loser Streifen
   unter der Rundung (mobil, INT-338-Tint). Analog zu --on-section. */
.page-header--on-toc::after {
  background: var(--blue-soft);
}

/* Desktop ≥1680px: die Sprungleiste ist eine transparente Rand-Rail (height:0,
   background:none) – die mobile Tönung entfällt, die Welle trifft direkt auf die
   Folge-Section. Farbe = Section-Farbe, sonst grauer Streifen unter dem Bogen
   (INT-326-Follow-up). Muss NACH der --on-toc-Regel oben stehen: gleiche
   Spezifität, Media-Query erhöht sie nicht → Quellreihenfolge entscheidet. */
@media (min-width: 1680px) {
  .page-header--on-toc::after { background: var(--white); }                          /* weiße Folge-Section: ueber-uns, pflegekasse-leistungen */
  .page-header--on-toc.page-header--on-section::after { background: #F4F7FB; }        /* graue Folge-Section (bg-section): pflegegrad-beantragen */
}

/* --- Page-Header Varianten (eine Klasse pro Seite) ---
 * Standard (#5079A5) gilt für: ueber-uns, kosten, faq, kontakt, standorte
 * Abweichende Varianten nur wo inhaltlich sinnvoll:
 * - leistungen: Teal (#3D7A7A) – Gesundheit/Fürsorge
 * - karriere:   Amber-Gradient – Energie/Aufbruch
 * - legal:      Gedämpftes Blau – neutral/zurückhaltend
 */

/* Alle Standard-Varianten erben #5079A5 vom .page-header – keine Regel nötig */

/* .page-header--leistungen erbt #5079A5 vom Standard */

/* .page-header--karriere erbt #5079A5 vom Standard */

.page-header--legal {
  /* Gedämpfter Gradient für rechtliche Seiten – etwas neutraler als Standard (INT-662) */
  background:
    url('../images/grain.svg'),
    linear-gradient(135deg, var(--teal-dark) 0%, var(--blue-dark) 100%);
}

.page-header__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--spacing-md);
  text-shadow: 0 2px 12px rgba(0,0,0,0.20);
  letter-spacing: -0.01em;
}

.page-header__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.92);
}

.page-header__breadcrumb a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-header__breadcrumb a:hover {
  color: var(--white);
  text-decoration: underline;
}

.page-header__breadcrumb span {
  color: rgba(255, 255, 255, 0.92); /* aktuelle Seite – AA auf dem Kopf (INT-662) */
}

.page-header__breadcrumb span[aria-hidden] {
  color: rgba(255, 255, 255, 0.7); /* Trenner „›“, rein dekorativ */
}

/* Fokusrahmen im blauen Kopf weiß statt --blue (blau auf blau lag bei ~1,4:1, nötig 3:1) */
.page-header :focus-visible {
  outline-color: var(--white);
}

/* Mobil läuft der Text fast randlos → Rand nicht heller als --blue-dark (INT-662) */
@media (max-width: 767px) {
  .page-header {
    background:
      url('../images/grain.svg'),
      linear-gradient(160deg, var(--teal-dark) 0%, var(--blue-dark) 100%);
  }
}

.page-header p {
  color: var(--white);
  font-size: var(--fs-lg);
  max-width: 640px;
  margin: var(--spacing-md) auto 0;
  line-height: var(--lh-relaxed);
}

/* --- Acquisition / Pruefung Section --- */
.acquisition-box {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%); /* harmoniert mit Page-Header und CTA */
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.acquisition-box::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  border-radius: var(--radius-circle);
  pointer-events: none;
}

.acquisition-box__title {
  font-size: var(--fs-3xl);
  color: var(--white);
  margin-bottom: var(--spacing-md);
  position: relative;
}

.acquisition-box__text {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-xl);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* --- Table (Leistungstabelle) --- */
.data-table {
  width: 100%;
  background-color: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.data-table th,
.data-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--ink-border);
}

.data-table th {
  background-color: var(--blue);
  color: var(--white);
  font-weight: var(--fw-semibold);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:nth-child(even) td {
  background-color: var(--ink-bg);
}

.data-table tr:hover td {
  background-color: var(--blue-ghost);
}

/* ─────────────────────────────────────────────────────────
   LEISTUNGS-KARTEN (ersetzt Vergleichstabelle)
   ───────────────────────────────────────────────────────── */

/* Badge für Leistungsart (z. B. "Vitalis-Leistung") */
.leistungs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: var(--spacing-md);
}

.leistungs-badge--primary {
  background-color: var(--blue-ghost);
  color: var(--blue-dark);
  border: 1px solid rgba(80, 121, 165, 0.2);
}

.leistungs-badge--secondary {
  background-color: var(--teal-ghost);
  color: var(--teal-dark);
  border: 1px solid rgba(61, 138, 138, 0.2);
}

/* Partner-Leistung (nicht von Vitalis abgerechnet) – neutral statt eigener Akzentfarbe (INT-645) */
.leistungs-badge--neutral {
  background-color: var(--ink-bg);
  color: var(--ink-muted);
  border: 1px solid var(--ink-border);
}

/* ── Hausnotruf-Unterlagen: Knopf in der Zeile + Block unter der Tabelle ── */
.hausnotruf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  min-height: 48px;
  margin-top: var(--spacing-sm);
  padding: 0.5rem 1rem;
  border: 2px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--blue-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}

.hausnotruf-btn:hover { background: var(--blue-soft); }

.hausnotruf-btn svg { flex-shrink: 0; color: var(--blue); }

.hausnotruf-unterlagen {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--ink-border);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.hausnotruf-unterlagen:focus { outline: none; }
.hausnotruf-unterlagen:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 3px; }

.hausnotruf-unterlagen__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.2;
}

.hausnotruf-unterlagen__title svg { flex-shrink: 0; color: var(--blue); }

.hausnotruf-unterlagen__intro {
  margin: var(--spacing-xs) 0 var(--spacing-md);
  color: var(--ink-muted);
}

.hausnotruf-unterlagen__groups {
  display: grid;
  gap: var(--spacing-md);
}

@media (min-width: 700px) {
  .hausnotruf-unterlagen__groups { grid-template-columns: 1fr 1.5fr; align-items: start; }
}

.hausnotruf-unterlagen__group { min-width: 0; }

.hausnotruf-unterlagen__label {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.hausnotruf-unterlagen__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hausnotruf-unterlagen__list li + li { border-top: 1px solid var(--ink-border); }

.hausnotruf-unterlagen__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.5rem 0.8rem;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--blue-dark);
  text-decoration: none;
}

.hausnotruf-unterlagen__item:hover { background: var(--blue-soft); }
.hausnotruf-unterlagen__item:focus-visible { outline-offset: -3px; }
.hausnotruf-unterlagen__item svg { flex-shrink: 0; color: var(--blue); }

.hausnotruf-unterlagen__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hausnotruf-unterlagen__meta {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Mobil: Dateigröße unter den Namen statt daneben */
@media (max-width: 699px) {
  .hausnotruf-unterlagen { padding: var(--spacing-md); }
  .hausnotruf-unterlagen__item { display: grid; grid-template-columns: 20px 1fr; column-gap: 0.6rem; }
  .hausnotruf-unterlagen__meta { grid-column: 2; }
}

/* Hinweis unterhalb der Leistungstabelle */
.leistungs-grid__hinweis {
  margin-top: var(--spacing-2xl);
  font-size: var(--fs-base);
  color: var(--ink-muted);
}


/* ─────────────────────────────────────────────────────────
   LEISTUNGSTABELLE – "Welche Gelder stehen Ihnen zu?"
   Ersetzt das frühere Karten-Grid. Breite Tabellenzeilen
   ermöglichen direkten PG-Vergleich auf einen Blick.
   ───────────────────────────────────────────────────────── */

/* Scrollbarer Wrapper für schmale Viewports */
.leistungs-tabelle-wrap {
  margin-top: var(--spacing-3xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--ink-border);
}

/* Die eigentliche Tabelle */
.leistungs-tabelle {
  width: 100%;
  min-width: 680px;                  /* verhindert zu starkes Quetschen auf kleinen Screens */
  border-collapse: collapse;
  background: var(--white);
  font-family: var(--font-body);
}

/* ── Kopfzeile ── */
.leistungs-tabelle thead tr {
  background: var(--blue);
}

.leistungs-tabelle thead th {
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  border: none;
  white-space: nowrap;
}

/* Ecken-Radius: Kopfzeile */
.leistungs-tabelle thead th:first-child {
  border-radius: var(--radius-xl) 0 0 0;
}
.leistungs-tabelle thead th:last-child {
  border-radius: 0 var(--radius-xl) 0 0;
}

/* Ecken-Radius: letzte Zeile */
.leistungs-tabelle__row:last-child td:first-child {
  border-radius: 0 0 0 var(--radius-xl);
}
.leistungs-tabelle__row:last-child td:last-child {
  border-radius: 0 0 var(--radius-xl) 0;
}

/* Erste Spalte (Leistungsname) linksbündig, breiter */
.leistungs-tabelle__col-label {
  text-align: left !important;
  width: 42%;
  padding-left: var(--spacing-2xl) !important;
}

/* PG-Spalten gleichmäßig, schmal */
.leistungs-tabelle__col-pg {
  width: calc(58% / 5);
}

/* ── Tabellenzeilen ── */
.leistungs-tabelle__row {
  border-bottom: 1px solid var(--ink-border);
  transition: background var(--transition-fast);
}

.leistungs-tabelle__row:last-child {
  border-bottom: none;
}

.leistungs-tabelle__row:hover {
  background: var(--ink-bg);
}

/* Entlastungsbetrag-Zeile: visuell hervorheben */
.leistungs-tabelle__row--highlight {
  background: rgba(80, 121, 165, 0.04);
  position: relative;
}

/* Linke Akzentlinie entfernt – war unharmonisch */
.leistungs-tabelle__row--highlight .leistungs-tabelle__cell-label {
  position: relative;
}

.leistungs-tabelle__row--highlight:hover {
  background: rgba(80, 121, 165, 0.08);
}

/* Jahresbetrags-Zeilen: leicht getönt */
.leistungs-tabelle__row--jahresbetrag {
  background: var(--ink-warm);
}

.leistungs-tabelle__row--jahresbetrag:hover {
  background: var(--ink-warm);
}

/* ── Leistungsspalte (links) ── */
.leistungs-tabelle__cell-label {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
  vertical-align: middle;
}

.leistungs-tabelle__leistung {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

/* Icon-Bubble in der Leistungsspalte */
.leistungs-tabelle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: background var(--transition-base), color var(--transition-base);
}

.leistungs-tabelle__icon--primary {
  background: var(--blue-ghost);
  color: var(--blue);
}

.leistungs-tabelle__icon--secondary {
  background: var(--teal-ghost);
  color: var(--teal);
}

.leistungs-tabelle__row:hover .leistungs-tabelle__icon--primary {
  background: var(--blue);
  color: var(--white);
}

.leistungs-tabelle__row:hover .leistungs-tabelle__icon--secondary {
  background: var(--teal);
  color: var(--white);
}

.leistungs-tabelle__leistung-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Badge im Tabellen-Kontext: margin-bottom aus dem globalen .leistungs-badge zurücksetzen */
.leistungs-tabelle__leistung-text .leistungs-badge {
  margin-bottom: 0;
  align-self: flex-start;
}

.leistungs-tabelle__leistung-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1.3;
  display: block;
}

.leistungs-tabelle__leistung-desc {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.5;
  display: block;
}

/* ── Betrags-Zellen (rechte Spalten) ── */
.leistungs-tabelle__cell-betrag {
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid var(--ink-border);
  white-space: nowrap;
}

/* Nicht-verfügbar-Zelle: dezenter Hintergrund */
.leistungs-tabelle__cell-betrag--na {
  background: rgba(0, 0, 0, 0.02);
}

/* colspan-Zelle für Jahresbeträge: zentriert mit Icon-Flair */
.leistungs-tabelle__cell-betrag--jahresspanne {
  background: var(--teal-ghost);
  border-left: 2px solid var(--teal);
}

/* ── Gruppen-Trennzeilen (Über Vitalis abrechenbar / Weitere Kassenleistungen) ── */
.leistungs-tabelle__group td {
  border-left: none;
}

.leistungs-tabelle__group-head {
  padding: var(--spacing-md) var(--spacing-2xl);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-dark);
  background: var(--blue-ghost);
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
}

/* Inline-Link innerhalb einer Leistungsbeschreibung (Cross-Selling / Formular) */
.leistungs-tabelle__inline-link {
  color: var(--blue);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.leistungs-tabelle__inline-link:hover {
  color: var(--blue-dark);
}

/* CTA unter der Tabelle: „Alle Leistungen ansehen" */
.leistungs-tabelle__alle-cta {
  margin-top: var(--spacing-xl);
}

/* ── Betragswert ── */
.leistungs-tabelle__wert {
  display: block;
  font-size: 1.375rem;               /* 22px – klar lesbar, Senior-freundlich */
  font-weight: var(--fw-bold);
  line-height: 1.1;
}

.leistungs-tabelle__wert--primary {
  color: var(--blue);
}

.leistungs-tabelle__wert--secondary {
  color: var(--teal);
}

.leistungs-tabelle__wert--na {
  color: var(--ink-light);
  font-size: 1.25rem;
  font-weight: 400;
}

/* Einheit dezent darunter */
.leistungs-tabelle__einheit {
  display: block;
  font-size: 0.75rem;                /* 12px */
  color: var(--ink-light);
  font-weight: var(--fw-medium);
  margin-top: 3px;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────
   PFLEGEGRADE-STEPPER (Tab + Panel Komponente)
   ───────────────────────────────────────────────────────── */

/* Farb-Tokens für die 5 Pflegegrade */
:root {
  --pg1-color: #7CB9E8;   /* Hellblau  */
  --pg2-color: var(--blue);   /* Blau      */
  --pg3-color: var(--amber);   /* Amber     */
  --pg4-color: #C0602A;   /* Amber Dark */
  --pg5-color: #9B2226;   /* Rot       */
}

/* ── Pflegegrade: Card-Grid ─────────────────────────────── */
.pg-grid {
  margin-top: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ── Einzelne Pflegegrad-Karte ──────────────────────────── */
.pg-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-lg) calc(var(--spacing-xl) + 4px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Farbiger Top-Akzent-Streifen */
.pg-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.pg-card--pg1 .pg-card__accent { background: linear-gradient(90deg, var(--pg1-color), var(--pg1-color) 50%, transparent); }
.pg-card--pg2 .pg-card__accent { background: linear-gradient(90deg, var(--pg2-color), var(--pg2-color) 60%, transparent); }
.pg-card--pg3 .pg-card__accent { background: linear-gradient(90deg, var(--pg3-color), var(--pg3-color) 70%, transparent); }
.pg-card--pg4 .pg-card__accent { background: linear-gradient(90deg, var(--pg4-color), var(--pg4-color) 80%, transparent); }
.pg-card--pg5 .pg-card__accent { background: linear-gradient(90deg, var(--pg5-color), var(--pg5-color) 90%, transparent); }

/* ── Top-Bereich: Badge + Titel ─────────────────────────── */
.pg-card__top {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.pg-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--white);
  flex-shrink: 0;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pg-card__badge--pg1 { background: var(--pg1-color); }
.pg-card__badge--pg2 { background: var(--pg2-color); }
.pg-card__badge--pg3 { background: var(--pg3-color); }
.pg-card__badge--pg4 { background: var(--pg4-color); }
.pg-card__badge--pg5 { background: var(--pg5-color); }

.pg-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-tight);
}

.pg-card__punkte {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* ── Beschreibung ───────────────────────────────────────── */
.pg-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin: var(--spacing-sm) 0 0;
}

/* ── Trennlinie ─────────────────────────────────────────── */
.pg-card__divider {
  height: 1px;
  background: var(--ink-border);
  margin: var(--spacing-md) 0;
}

/* ── Leistungen: Kompakte Zeilen ────────────────────────── */
.pg-card__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-lg);
}

.pg-card__benefit {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
}

.pg-card__benefit-label {
  font-size: var(--fs-xs);
  color: var(--ink-light);
  white-space: nowrap;
}

.pg-card__benefit-value {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.pg-card__benefit-value small {
  font-size: 0.75em;
  font-weight: var(--fw-medium);
  opacity: 0.7;
}

.pg-card__benefit-value--primary {
  color: var(--blue-dark);
}

.pg-card__benefit-value--secondary {
  color: var(--teal-dark);
}

/* ── Hinweis ────────────────────────────────────────────── */
.pg-card__note {
  font-size: var(--fs-xs);
  color: var(--ink-light);
  font-style: italic;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────
   HINWEIS-BOXEN (überarbeitete Variante mit Badge)
   ───────────────────────────────────────────────────────── */

.hinweis-box {
  padding: var(--spacing-2xl);
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--ink-border);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.hinweis-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.hinweis-box--blue::before {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
}

.hinweis-box--green::before {
  background: linear-gradient(90deg, var(--teal-dark), var(--teal));
}

.hinweis-box:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.hinweis-box__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: var(--spacing-md);
}

.hinweis-box--blue .hinweis-box__badge {
  background: var(--blue-ghost);
  color: var(--blue-dark);
}

.hinweis-box--green .hinweis-box__badge {
  background: var(--teal-ghost);
  color: var(--teal-dark);
}

.hinweis-box__badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.hinweis-box__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: var(--spacing-sm);
  line-height: 1.35;
}

.hinweis-box__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
}

/* ── Responsive: Desktop-Layout für Panel-Inner ─────────── */
/* (Breakpoint-Regel in responsive.css, hier nur der Desktop-Override-Platz) */

/* --- Floating Phone Button (Mobile) --- */
@keyframes phonePulse {
  0% { box-shadow: 0 4px 20px rgba(80, 121, 165, 0.45), 0 0 0 0 rgba(80, 121, 165, 0.4); }
  70% { box-shadow: 0 4px 20px rgba(80, 121, 165, 0.45), 0 0 0 14px rgba(80, 121, 165, 0); }
  100% { box-shadow: 0 4px 20px rgba(80, 121, 165, 0.45), 0 0 0 0 rgba(80, 121, 165, 0); }
}

.floating-phone-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-fixed, 60);
  width: 60px;
  height: 60px;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(80, 121, 165, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  text-decoration: none;
  animation: phonePulse 2s ease-in-out infinite;
}
.floating-phone-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(80, 121, 165, 0.55);
  color: var(--white);
}
.floating-phone-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

/* --- Engagement Banner (nach Verweildauer) --- */
.engagement-banner {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.engagement-banner.is-visible {
  opacity: 1;
  pointer-events: all;
}
.engagement-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 40, 0.55);
  backdrop-filter: blur(3px);
}
.engagement-banner__box {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-3xl) var(--spacing-2xl);
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.4s ease;
}
.engagement-banner.is-visible .engagement-banner__box {
  transform: translateY(0);
}
.engagement-banner__icon {
  width: 64px;
  height: 64px;
  background: var(--blue-ghost);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  color: var(--blue);
}
.engagement-banner__title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}
.engagement-banner__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-xl);
}
.engagement-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.engagement-banner__note {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-top: var(--spacing-md);
}
.engagement-banner__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.engagement-banner__close:hover {
  color: var(--ink);
  background: var(--ink-bg);
}

/* --- Mid-Page CTA Banner --- */
.midpage-cta {
  background: var(--blue-ghost);
  border: 2px solid rgba(80, 121, 165, 0.18);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  text-align: center;
  margin: var(--spacing-3xl) auto;
  max-width: 680px;
}
.midpage-cta__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: var(--spacing-sm);
}
.midpage-cta__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  margin-bottom: var(--spacing-xl);
}
.midpage-cta__actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Leistungs-Trio (Mid-Page Feature Cards) --- */
.leistungs-trio {
  text-align: center;
}

.leistungs-trio__header {
  margin-bottom: var(--spacing-2xl);
}

.leistungs-trio__headline {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: var(--spacing-sm);
}

.leistungs-trio__subtext {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

.leistungs-trio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.leistungs-trio__card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  text-align: left;
}

.leistungs-trio__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--blue-ghost);
  color: var(--blue);
  flex-shrink: 0;
}

.leistungs-trio__card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

.leistungs-trio__card-text {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.65;
  margin: 0;
}

.leistungs-trio__actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-2xl);
}

/* --- Einzugsgebiet-Band (INT-294: Orte statt doppeltem Leistungs-Block) --- */
.ortsband-section {
  background: var(--ink-warm);
}

.ortsband__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.ortsband__card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  border-top: 4px solid var(--region-color, var(--blue));
}

.ortsband__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.ortsband__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  color: var(--region-color, var(--blue));
  background: var(--ink-bg);
  background: color-mix(in srgb, var(--region-color, var(--blue)) 12%, #fff);
}

.ortsband__pin svg {
  width: 22px;
  height: 22px;
}

.ortsband__region {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

.ortsband__region small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}

.ortsband__orte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.ortsband__orte li {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  background: var(--ink-bg);
  border-radius: 999px;
  padding: 0.35em 0.8em;
}

.ortsband__orte li.is-more {
  background: transparent;
  color: var(--ink-muted);
  padding-left: 0.2em;
  align-self: center;
}

.ortsband__foot {
  margin-top: var(--spacing-2xl);
  text-align: center;
}

.ortsband__count {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  margin-bottom: var(--spacing-lg);
}

.ortsband__count strong {
  color: var(--ink);
}

.ortsband__actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA-Kachel füllt die 6. Zelle (5 Regionen + 1 PLZ-Aufruf) */
.ortsband__card--cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  text-decoration: none;
  background: var(--blue-soft);
  border-top-color: var(--blue);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ortsband__card--cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.ortsband__pin--cta {
  color: var(--blue);
  background: #fff;
}

.ortsband__cta-text {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}

.ortsband__cta-link {
  margin-top: auto;
  font-weight: var(--fw-semibold);
  color: var(--blue-dark);
}

/* --- Section Wave Divider --- */
.section-wave {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -2px;
  line-height: 0;
}

.section-wave--flip {
  transform: scaleY(-1);
  margin-top: -2px;
  margin-bottom: 0;
}

/* --- Vorteile Item Hover --- */
.vorteile-item {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.vorteile-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* --- Reduced Motion Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .floating-phone-btn {
    animation: none;
  }
}

/* --- Background Utility Classes --- */
.bg-white         { background: #ffffff; }
.bg-section       { background: #F4F7FB; }
.bg-cream         { background: #F5F1EB; }
.bg-primary-light { background: #EEF4FA; }


/* ─────────────────────────────────────────────────────────
   PFLEGEGELD-RECHNER 2026 (.pgr)
   Interaktiver Rechner: Pflegegrad-Auswahl + Kombinationsleistung-Slider
   ───────────────────────────────────────────────────────── */

.pgr {
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-lg);
  margin: var(--spacing-3xl) auto 0;
  max-width: 960px;
}

/* ── Pflegegrad-Auswahl (native Radios, als Buttons gestylt) ── */
.pgr__field { border: 0; margin: 0; padding: 0; }
.pgr__legend {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: var(--spacing-md);
  padding: 0;
}
.pgr__grades {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-sm);
}
.pgr__grade { position: relative; display: block; margin: 0; }
.pgr__grade-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.pgr__grade-face {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px;
  border-radius: var(--radius-md);
  background: var(--ink-warm);
  border: 2px solid transparent;
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: var(--fw-bold);
  color: var(--ink);
  transition: all var(--transition-fast);
}
.pgr__grade-input:hover + .pgr__grade-face { border-color: var(--teal); transform: translateY(-2px); }
.pgr__grade-input:checked + .pgr__grade-face {
  background: var(--teal); color: var(--white); border-color: var(--teal);
  box-shadow: var(--shadow-secondary);
}
.pgr__grade-input:focus-visible + .pgr__grade-face {
  outline: 3px solid var(--blue); outline-offset: 2px;
}

/* Hinweis „kein Pflegegrad" (Lead-Funnel) */
.pgr__hint {
  display: flex; align-items: flex-start; gap: var(--spacing-xs);
  margin: var(--spacing-md) 0 0;
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.pgr__hint svg { flex: 0 0 auto; margin-top: 3px; color: var(--teal); }
.pgr__hint a { color: var(--blue); font-weight: var(--fw-semibold); }

/* ── Kombinationsleistung-Box ── */
.pgr__combi {
  margin-top: var(--spacing-lg);
  background: var(--ink-warm);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}
.pgr__checkbox {
  display: flex; align-items: flex-start; gap: var(--spacing-md);
  cursor: pointer;
}
.pgr__checkbox-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pgr__checkbox-box {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 2px solid var(--teal);
  background: var(--white);
  display: grid; place-items: center;
  transition: all var(--transition-fast);
}
.pgr__checkbox-check { color: var(--white); opacity: 0; transition: opacity var(--transition-fast); }
.pgr__checkbox-input:checked + .pgr__checkbox-box { background: var(--teal); }
.pgr__checkbox-input:checked + .pgr__checkbox-box .pgr__checkbox-check { opacity: 1; }
.pgr__checkbox-input:focus-visible + .pgr__checkbox-box {
  outline: 3px solid var(--blue); outline-offset: 2px;
}
.pgr__checkbox-text { display: flex; flex-direction: column; gap: 2px; }
.pgr__checkbox-text strong { color: var(--ink); font-size: var(--fs-base); }
.pgr__checkbox-sub { font-size: var(--fs-sm); color: var(--ink-muted); }

/* ── Slider (§ 38 Kombinationsleistung) ── */
.pgr__slider-wrap { margin-top: var(--spacing-lg); }
.pgr__slider-label {
  display: block; margin-bottom: var(--spacing-md);
  font-weight: var(--fw-semibold); color: var(--ink);
}
.pgr__slider-row { display: flex; align-items: center; gap: var(--spacing-lg); }
.pgr__slider-value {
  flex: 0 0 auto; min-width: 4ch; text-align: right;
  font-family: var(--font-heading);
  font-size: 1.75rem; font-weight: var(--fw-bold);
  color: var(--amber-dark);
}
.pgr__slider-scale {
  display: flex; justify-content: space-between;
  margin-top: var(--spacing-xs);
  font-size: var(--fs-sm); color: var(--ink-light);
}

/* Range-Input – cross-browser. Füllstand kommt aus --pgr-pct (per JS gesetzt). */
.pgr__slider {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto;
  height: 44px;              /* großzügige Trefferfläche (Senioren-Accessibility) */
  background: transparent;
  cursor: pointer; margin: 0;
}
.pgr__slider::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--teal) 0 var(--pgr-pct, 40%),
    var(--ink-border) var(--pgr-pct, 40%) 100%);
}
.pgr__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -10px;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--teal);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast);
}
.pgr__slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
.pgr__slider:active::-webkit-slider-thumb { transform: scale(1.14); }
.pgr__slider:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--blue); outline-offset: 3px; }
/* Firefox */
.pgr__slider::-moz-range-track { height: 10px; border-radius: 999px; background: var(--ink-border); }
.pgr__slider::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--teal); }
.pgr__slider::-moz-range-thumb {
  width: 30px; height: 30px; border: 4px solid var(--teal);
  border-radius: 50%; background: var(--white); box-shadow: var(--shadow-md);
}
.pgr__slider:focus-visible::-moz-range-thumb { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ── Ergebnis ── */
.pgr__result { margin-top: var(--spacing-xl); }
.pgr__result-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-2xl);
  border: 2px dashed var(--ink-border); border-radius: var(--radius-lg);
  color: var(--ink-muted);
}
.pgr__result-empty p { margin: 0; }
.pgr__result-empty svg { color: var(--blue); }
.pgr__result-card {
  border: 1px solid var(--ink-border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.pgr__result-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
  padding: var(--spacing-xl);
  background: var(--teal-ghost);
  border-bottom: 1px solid var(--ink-border);
}
.pgr__result-eyebrow {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em; color: var(--teal);
}
.pgr__result-total {
  font-family: var(--font-heading);
  font-size: 2.5rem; font-weight: var(--fw-bold); color: var(--ink);
  line-height: 1.1;
}
.pgr__result-total-unit { font-size: 1.25rem; color: var(--ink-muted); font-weight: var(--fw-semibold); }
.pgr__result-total-year { font-size: var(--fs-sm); color: var(--ink-muted); }
.pgr__result-note {
  display: flex; align-items: flex-start; gap: var(--spacing-xs);
  margin: 0; padding: var(--spacing-md) var(--spacing-lg);
  background: var(--blue-soft); color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.pgr__result-note svg { flex: 0 0 auto; margin-top: 3px; color: var(--blue); }
.pgr__result-list { list-style: none; margin: 0; padding: 0; }
.pgr__result-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--ink-border);
}
.pgr__result-item:last-child { border-bottom: 0; }
.pgr__result-item--highlight { background: rgba(201, 123, 58, 0.08); }
.pgr__result-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pgr__result-item-name { font-weight: var(--fw-semibold); color: var(--ink); }
.pgr__result-item-sub { font-size: var(--fs-sm); color: var(--ink-muted); }
.pgr__result-item-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pgr__result-item-betrag {
  font-family: var(--font-heading); font-size: 1.25rem;
  font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap;
}
.pgr__result-item-tag { font-size: .8125rem; color: var(--ink-light); text-align: right; }
.pgr__result-item--highlight .pgr__result-item-tag { color: var(--amber-dark); font-weight: var(--fw-semibold); }
.pgr__result-cta {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--ink-bg);
}
.pgr__result-cta-text { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); max-width: 44ch; }

/* ── Fußnote ── */
.pgr__footnote {
  display: flex; align-items: flex-start; gap: var(--spacing-xs);
  margin: var(--spacing-lg) 0 0;
  font-size: var(--fs-sm); color: var(--ink-light); line-height: 1.5;
}
.pgr__footnote svg { flex: 0 0 auto; margin-top: 3px; }

@media (max-width: 640px) {
  .pgr { padding: var(--spacing-lg); }
  .pgr__grade-face { min-height: 52px; font-size: 1.25rem; }
  .pgr__slider-value { font-size: 1.5rem; }
  .pgr__result-total { font-size: 2rem; }
  .pgr__result-item { flex-wrap: wrap; }
  .pgr__result-item-right { align-items: flex-start; }
  .pgr__result-item-tag { text-align: left; }
}

/* DEPRECATED: .wizard – ersetzt durch .pgr (Pflegegeld-Rechner 2026).
   Markup/JS entfernt; diese Regeln sind ungenutzt und koennen spaeter entfernt werden. */
/* ─────────────────────────────────────────────────────────
   LEISTUNGS-FINDER WIZARD
   Schrittweiser Fragebogen zur personalisierten Leistungsberechnung
   ───────────────────────────────────────────────────────── */

/* Wrapper-Box des gesamten Wizards */
.wizard {
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-3xl);
  box-shadow: var(--shadow-lg);
  margin-top: var(--spacing-3xl);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Fortschrittsleiste ──────────────────────────────── */

.wizard__progress {
  margin-bottom: var(--spacing-3xl);
}

/*
 * wizard__progress-track: Wrapper, der Balken und Bubbles übereinanderlegt.
 * Der Balken liegt als normaler Block-Element, die Bubbles werden absolut
 * auf dem Balken positioniert, gleichmäßig über die volle Breite verteilt.
 */
.wizard__progress-track {
  position: relative;
  /* Vertikaler Platz, damit die Bubbles (36px hoch) nicht abgeschnitten werden */
  padding: 18px 0;
  margin-bottom: var(--spacing-sm);
}

.wizard__progress-bar {
  height: 6px;
  background: var(--ink-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  /* Vertikale Mitte des track-Containers – Bubbles sitzen darauf */
  position: absolute;
  top: 50%;
  left: 16px;   /* halbe Bubble-Breite – Balken startet/endet an Bubble-Mitte */
  right: 16px;
  transform: translateY(-50%);
  margin: 0;
}

.wizard__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  border-radius: var(--radius-pill);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Bubbles: gleichmäßig über die volle Breite verteilt.
 * justify-content: space-between sorgt dafür, dass Bubble 1 am linken Rand,
 * Bubble 3 am rechten Rand sitzt – kein Leerraum rechts.
 */
.wizard__progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* liegt über dem absolut positionierten Balken */
  z-index: 1;
}

.wizard__progress-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-family: var(--font-body);
  background: var(--ink-border);
  color: var(--ink-light);
  transition: background var(--transition-base), color var(--transition-base),
              box-shadow var(--transition-base);
  flex-shrink: 0;
  /* Weißer Ring damit die Bubble visuell vom Balken abgehoben wird */
  outline: 3px solid var(--white);
  outline-offset: 0;
}

.wizard__progress-step.is-active {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(80, 121, 165, 0.18);
}

.wizard__progress-step.is-done {
  background: var(--teal);
  color: var(--white);
}

.wizard__progress-label {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  font-weight: var(--fw-medium);
  margin: 0;
}

/* ── Wizard-Schritt Container ────────────────────────── */

.wizard__step {
  /* Sichtbarer Zustand – .is-active steuert Sichtbarkeit, hidden-Attr. entfernt aus DOM-Flow */
  animation: wizardStepIn 0.35s ease both;
}

@keyframes wizardStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Step-Layout: Options bekommen volle Breite ──────── */
/*
 * Das frühere 1fr 300px-Grid wurde aufgelöst. Die Auswahlkarten
 * nutzen jetzt die volle Wizard-Breite. Das Aside-Panel erscheint
 * als schmale Info-Leiste unterhalb der Karten.
 */

/* ── Inline-Info-Leiste (Aside unterhalb der Options) ── */

.wizard__step-aside--inline {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  background: #e8eeff;
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  /* Kein box-shadow – wirkt als eingebetteter Hinweis, nicht als Karte */
}

.wizard__aside-inline-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--blue);
}

.wizard__aside-inline-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wizard__aside-inline-label {
  font-size: 0.875rem; /* 14px */
  font-weight: var(--fw-semibold);
  color: var(--blue-dark);
  line-height: 1.3;
}

.wizard__aside-inline-text {
  font-size: 0.875rem; /* 14px */
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
}

/* ── Step 2 Tipp-Box ─────────────────────────────────── */

.wizard__step2-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  background: var(--ink-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-xl);
  border-left: 3px solid var(--teal);
}

.wizard__step2-tip svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--teal);
}

/* ── Fragen-Text ─────────────────────────────────────── */

.wizard__question {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: var(--spacing-2xl);
  line-height: var(--lh-tight);
}

/* ── Options: 2-spaltig (Schritt 1) ─────────────────── */

.wizard__options {
  display: grid;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.wizard__options--2col {
  grid-template-columns: 1fr 1fr;
}

.wizard__options--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Option-Buttons (Schritt 1 + 3) ─────────────────── */

.wizard__option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-lg);
  background: var(--ink-bg);
  border: 2px solid var(--ink-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
  min-height: 130px;
  justify-content: center;
}

.wizard__option-btn:hover,
.wizard__option-btn:focus-visible {
  background: var(--blue-ghost);
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-primary);
}

.wizard__option-btn--secondary:hover,
.wizard__option-btn--secondary:focus-visible {
  background: var(--teal-ghost);
  border-color: var(--teal);
  box-shadow: var(--shadow-secondary);
}

.wizard__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--white);
  border-radius: var(--radius-circle);
  color: var(--blue);
  flex-shrink: 0;
  transition: background var(--transition-base), color var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.wizard__option-btn:hover .wizard__option-icon,
.wizard__option-btn:focus-visible .wizard__option-icon {
  background: var(--blue);
  color: var(--white);
}

.wizard__option-btn--secondary .wizard__option-icon {
  color: var(--teal);
}

.wizard__option-btn--secondary:hover .wizard__option-icon,
.wizard__option-btn--secondary:focus-visible .wizard__option-icon {
  background: var(--teal);
  color: var(--white);
}

.wizard__option-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  line-height: 1.4;
  font-family: var(--font-body);
}

/* ── Pflegegrad-Buttons (Schritt 2) ─────────────────── */

.wizard__options--5col {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-md);
}

.wizard__pg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-sm);
  background: var(--ink-bg);
  border: 2px solid var(--ink-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
  min-height: 110px;
  justify-content: center;
}

.wizard__pg-btn:hover,
.wizard__pg-btn:focus-visible {
  border-color: var(--blue);
  background: var(--blue-ghost);
  transform: translateY(-4px);
  box-shadow: var(--shadow-primary);
}

.wizard__pg-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-family: var(--font-body);
  flex-shrink: 0;
  transition: background var(--transition-base), transform var(--transition-base);
}

/* Farbige Kreise je Pflegegrad */
.wizard__pg-btn[data-wizard-pg="1"] .wizard__pg-number { background: #7CB9E8; }
.wizard__pg-btn[data-wizard-pg="2"] .wizard__pg-number { background: var(--blue); }
.wizard__pg-btn[data-wizard-pg="3"] .wizard__pg-number { background: var(--amber); }
.wizard__pg-btn[data-wizard-pg="4"] .wizard__pg-number { background: #C0602A; }
.wizard__pg-btn[data-wizard-pg="5"] .wizard__pg-number { background: #9B2226; }

.wizard__pg-btn:hover .wizard__pg-number,
.wizard__pg-btn:focus-visible .wizard__pg-number {
  transform: scale(1.1);
}

.wizard__pg-label {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  line-height: 1.3;
  font-family: var(--font-body);
}

/* ── Kein-PG Info-Box ────────────────────────────────── */

.wizard__info-box {
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.wizard__info-box--green {
  background: var(--teal-ghost);
  border: 1px solid rgba(61, 138, 138, 0.2);
}

.wizard__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-circle);
  background: var(--white);
  color: var(--teal);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.wizard__info-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-tight);
}

.wizard__info-text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.wizard__info-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
}

/* ── Zurück-Button ───────────────────────────────────── */

.wizard__back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 10px var(--spacing-md);
  margin-top: var(--spacing-xl);
  background: var(--blue-ghost);
  border: 1.5px solid rgba(80, 121, 165, 0.25);
  color: var(--blue);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  min-height: 48px;
}

.wizard__back-btn svg {
  width: 18px;
  height: 18px;
}

.wizard__back-btn:hover {
  color: var(--blue-dark);
  background: var(--blue-ghost);
  border-color: var(--ink-border);
}

.wizard__back-btn--inline {
  color: var(--ink-muted);
  border: 1.5px solid var(--ink-border);
  border-radius: var(--radius-full);
  padding: 10px var(--spacing-lg);
}

.wizard__back-btn--inline:hover {
  color: var(--ink);
  background: var(--bg-section);
  border-color: var(--ink-light);
}

/* ── Ergebnis-Anzeige ────────────────────────────────── */

.wizard__result {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.wizard__result-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--ink-border);
}

.wizard__result-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--blue);
  color: var(--white);
  flex-shrink: 0;
}

.wizard__result-eyebrow {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--spacing-xs);
}

.wizard__result-title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-tight);
}

/* Leistungs-Items im Ergebnis */
.wizard__result-leistungen {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.wizard__result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--ink-bg);
  border-radius: var(--radius-md);
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.wizard__result-item--highlight {
  background: var(--blue-ghost);
  border: 1px solid rgba(80, 121, 165, 0.2);
}

.wizard__result-item--secondary {
  background: var(--teal-ghost);
  border: 1px solid rgba(61, 138, 138, 0.15);
}

.wizard__result-item-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0;
  flex: 1;
  min-width: 0;
}

.wizard__result-item-name svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--blue);
}

.wizard__result-item--secondary .wizard__result-item-name svg {
  color: var(--teal);
}

.wizard__result-item-betrag {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--blue);
  white-space: nowrap;
  font-family: var(--font-body);
}

.wizard__result-item--secondary .wizard__result-item-betrag {
  color: var(--teal);
}

.wizard__result-item-betrag--amber {
  color: var(--amber-dark);
}

/* Gesamt-Box */
.wizard__result-gesamt {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl) var(--spacing-2xl);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Footer-Zeile: Note links, Restart rechts */
.wizard__result-gesamt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

/* "Neu starten" – Text-Link-Stil, kein Rahmen */
.wizard__result-gesamt-restart {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
  min-height: 32px;
}

.wizard__result-gesamt-restart:hover,
.wizard__result-gesamt-restart:focus-visible {
  color: var(--white);
  outline: none;
  text-decoration: underline;
}

.wizard__result-gesamt-label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.9);
  margin: 0;
}

.wizard__result-gesamt-betrag {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  font-family: var(--font-body);
  white-space: nowrap;
}

.wizard__result-gesamt-note {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* Aktions-Bereich Ergebnis */
.wizard__result-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: stretch;
}

.wizard__result-actions .btn {
  width: 100%;
  justify-content: center;
}

.wizard__result-actions .wizard__back-btn {
  margin-top: 0;
  align-self: center;
}

/* Hinweis-Text Ergebnis */
.wizard__result-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.6;
}

.wizard__result-hinweis svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--ink-light);
}

/* ── Wizard: Toggle-Karten & neue Elemente ────────────── */

.wizard__step-subtitle {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  margin: calc(var(--spacing-xs) * -1) 0 var(--spacing-lg);
  line-height: 1.6;
}

/* Toggleable Item-Layout (Hauptinhalt + rechte Seite) */
.wizard__result-item--toggleable {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-sm);
}

.wizard__result-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.wizard__result-item-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Subtext (Berechnungshinweis) */
.wizard__result-item-sub {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}

/* Warnhinweis UW */
.wizard__result-item-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-sm);
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 8px 12px;
  margin: var(--spacing-xs) 0 0;
  line-height: 1.5;
}

.wizard__result-item-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #d97706;
}

/* Inaktiver Zustand (ausgeblendet) */
.wizard__result-item--inactive {
  opacity: 0.45;
  background: var(--bg-section) !important;
  border-color: var(--ink-border) !important;
}

.wizard__result-item--inactive .wizard__result-item-betrag {
  color: var(--ink-muted) !important;
  text-decoration: line-through;
}

/* Toggle-Button */
.wizard__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  min-height: 36px;
}

.wizard__toggle-btn:hover {
  background: var(--blue);
  color: var(--white);
}

.wizard__toggle-btn--teal {
  border-color: var(--teal);
  color: var(--teal);
}

.wizard__toggle-btn--teal:hover {
  background: var(--teal);
  color: var(--white);
}

.wizard__toggle-btn--off {
  border-color: var(--ink-light);
  color: var(--ink-muted);
}

.wizard__toggle-btn--off:hover {
  background: var(--ink-light);
  color: var(--white);
}


/* Name-Zeile mit ?-Button nebeneinander */
.wizard__result-item-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wizard__result-item-name-row .wizard__result-item-name {
  margin: 0;
  flex: 1;
}

/* Pill-Button "Wie berechnet? ▾ / ▴ Schließen" */
.wizard__calc-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--teal);
  background: transparent;
  color: var(--teal);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  min-height: 30px;
}

.wizard__calc-btn:hover,
.wizard__calc-btn.is-active {
  background: var(--teal);
  color: var(--white);
}

/* Aufgeklappte Formelzeile */
.wizard__vp-calc {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--blue-dark);
  background: var(--blue-soft);
  border: 1px solid var(--ink-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 6px;
  line-height: 1.5;
}

.wizard__vp-calc svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #0d9488;
}

/* ─────────────────────────────────────────────────────────
   PFLEGEGRADE TAB-STEPPER
   5 klickbare Tabs oben, darunter ein Content-Panel.
   Mobil: Tabs stapeln vertikal als Akkordeon.
   ───────────────────────────────────────────────────────── */

.pg-tabs {
  margin-top: var(--spacing-3xl);
}

/* ── Tab-Leiste ─────────────────────────────────────────── */
.pg-tabs__nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}

.pg-tabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--spacing-md) var(--spacing-sm);
  border: none;
  background: var(--white);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  border-right: 1px solid var(--ink-border);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  min-height: 72px;
  position: relative;
  color: var(--ink-muted);
}

.pg-tabs__tab:last-child {
  border-right: none;
}

.pg-tabs__tab:hover:not(.is-active) {
  background: var(--ink-bg);
  color: var(--ink);
}

/* Aktiver Tab: Primary Blue Hintergrund, weißer Text */
.pg-tabs__tab.is-active {
  color: var(--white);
  border-bottom-color: transparent;
  position: relative;
  z-index: 1;
}

/* Aktive Tab-Farben per PG */
.pg-tabs__tab--pg1.is-active { background: var(--pg1-color); }
.pg-tabs__tab--pg2.is-active { background: var(--pg2-color); }
.pg-tabs__tab--pg3.is-active { background: var(--pg3-color); }
.pg-tabs__tab--pg4.is-active { background: var(--pg4-color); }
.pg-tabs__tab--pg5.is-active { background: var(--pg5-color); }

/* Hover auf inaktiven Tabs: Leichte Farbtönung */
.pg-tabs__tab--pg1:hover:not(.is-active) { border-bottom-color: var(--pg1-color); color: var(--pg1-color); }
.pg-tabs__tab--pg2:hover:not(.is-active) { border-bottom-color: var(--pg2-color); color: var(--pg2-color); }
.pg-tabs__tab--pg3:hover:not(.is-active) { border-bottom-color: var(--pg3-color); color: var(--pg3-color); }
.pg-tabs__tab--pg4:hover:not(.is-active) { border-bottom-color: var(--pg4-color); color: var(--pg4-color); }
.pg-tabs__tab--pg5:hover:not(.is-active) { border-bottom-color: var(--pg5-color); color: var(--pg5-color); }

.pg-tabs__tab-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1;
  background: rgba(0, 0, 0, 0.07);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.pg-tabs__tab.is-active .pg-tabs__tab-num {
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
}

.pg-tabs__tab-label {
  font-size: 1rem; /* 16px – Senioren-Mindestschrift (vorher 12px); Desktop hat Platz */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ── Panel-Bereich ──────────────────────────────────────── */
.pg-tabs__panels {
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.pg-tabs__panel {
  display: none;
}

.pg-tabs__panel.is-active {
  display: block;
  animation: pgPanelFadeIn 0.3s ease forwards;
}

@keyframes pgPanelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Innerer Flex-Container: links Info, rechts Chips */
.pg-tabs__panel-inner {
  display: flex;
  gap: var(--spacing-3xl);
  padding: var(--spacing-3xl);
  align-items: flex-start;
}

.pg-tabs__panel-info {
  flex: 1;
  min-width: 0;
}

/* Header: Badge + Titel nebeneinander */
.pg-tabs__panel-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.pg-tabs__panel-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.pg-tabs__panel-badge--pg1 { background: var(--pg1-color); }
.pg-tabs__panel-badge--pg2 { background: var(--pg2-color); }
.pg-tabs__panel-badge--pg3 { background: var(--pg3-color); }
.pg-tabs__panel-badge--pg4 { background: var(--pg4-color); }
.pg-tabs__panel-badge--pg5 { background: var(--pg5-color); }

.pg-tabs__panel-title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 4px;
  line-height: var(--lh-tight);
}

.pg-tabs__panel-punkte {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.pg-tabs__panel-desc {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Leistungs-Bereich (rechts) */
.pg-tabs__panel-leistungen {
  flex-shrink: 0;
  width: 300px;
}

.pg-tabs__panel-leistungen-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 var(--spacing-md);
}

/* Leistungs-Chips */
.pg-tabs__chips {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.pg-tabs__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  min-height: 48px;
}

.pg-tabs__chip--primary {
  background: var(--blue-ghost);
  border-color: rgba(80, 121, 165, 0.18);
}

.pg-tabs__chip--secondary {
  background: var(--teal-ghost);
  border-color: rgba(61, 138, 138, 0.18);
}

.pg-tabs__chip--note {
  background: var(--ink-bg);
  border-color: var(--ink-border);
}

.pg-tabs__chip-label {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.pg-tabs__chip-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
}

.pg-tabs__chip--primary .pg-tabs__chip-value {
  color: var(--blue-dark);
}

.pg-tabs__chip--secondary .pg-tabs__chip-value {
  color: var(--teal-dark);
}

.pg-tabs__chip--note .pg-tabs__chip-value {
  color: var(--ink-light);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}


/* ─────────────────────────────────────────────────────────
   LEISTUNGSTABELLE – Konsistenz-Fixes
   ───────────────────────────────────────────────────────── */

/* Jahresbetrags-Zeilen: KEIN warmer Hintergrund mehr, gleich wie andere Zeilen */
.leistungs-tabelle__row--jahresbetrag {
  background: var(--white);
}

.leistungs-tabelle__row--jahresbetrag:hover {
  background: var(--ink-bg);
}

/* colspan-Zelle für Jahresbeträge: einheitliche Border-Farbe wie alle anderen Zellen */
.leistungs-tabelle__cell-betrag--jahresspanne {
  background: transparent;
  border-left: 1px solid var(--ink-border);
}

/* Tabellen-Rahmen: Outer Border-Radius konsistent mit dem Wrap-Container abschneiden */
.leistungs-tabelle-wrap {
  border-radius: var(--radius-xl);
}

.leistungs-tabelle {
  border-radius: 0;
}

/* ─────────────────────────────────────────────────────────
   ANTRAGSTELLUNG – Schritt-für-Schritt-Prozess
   ───────────────────────────────────────────────────────── */

/* Nummerierte Schrittliste */
.antrag-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-3xl);
  counter-reset: none; /* Nummern via HTML-Elemente */
}

.antrag-step {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  position: relative;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.antrag-step:hover {
  border-color: var(--blue-soft);
  box-shadow: var(--shadow-sm);
}

/* Verbindungslinie zwischen den Schritten */
.antrag-steps .antrag-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--spacing-2xl) + 24px); /* zentriert unter Nummer */
  bottom: calc(-1 * var(--spacing-xl));
  width: 3px;
  height: var(--spacing-xl);
  background: linear-gradient(180deg, var(--blue-soft), var(--ink-border));
  border-radius: var(--radius-pill);
}

.antrag-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-circle);
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-primary);
  flex-shrink: 0;
}

.antrag-step__content {
  flex: 1;
  min-width: 0;
}

.antrag-step__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0 0 var(--spacing-sm);
  line-height: var(--lh-tight);
}

.antrag-step__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── Die 6 Begutachtungsmodule ─────────────────────────── */
.antrag-module-section {
  margin-bottom: var(--spacing-2xl);
}

.antrag-module-section__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 var(--spacing-sm);
  text-align: center;
}

.antrag-module-section__intro {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--spacing-2xl);
}

.antrag-module-grid {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile-first; ab 640px → 3-spaltig in responsive.css */
  gap: var(--spacing-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.antrag-module-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--blue-ghost);
  border: 1px solid rgba(80, 121, 165, 0.15);
  border-radius: var(--radius-lg);
  min-height: 64px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ink);
  line-height: 1.35;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.antrag-module-item:hover {
  background: rgba(80, 121, 165, 0.13);
  box-shadow: var(--shadow-sm);
}

.antrag-module-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius-circle);
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(80, 121, 165, 0.15);
  flex-shrink: 0;
}

.antrag-module-item__label {
  flex: 1;
  min-width: 0;
}

/* ── Info-Hinweis „Gut zu wissen" (ersetzt Inline-Styles, alte Wix-Farben) ── */
.info-note {
  margin: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--blue-ghost);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.7;
}

/* ── Inhaltskarte (INT-648: .card hatte kein CSS) ──────────
   Text-Karten sind ruhig; nur Link-Karten (a.card) reagieren auf Hover/Fokus. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
}

.card--highlight {
  box-shadow: var(--shadow-sm);
}

.card strong {
  color: var(--ink);
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background: var(--teal);
  color: var(--white);
}

.card__icon--blue {
  background: var(--blue);
}

.card__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.card__text,
.card__list {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: 1.7;
}

.card__list {
  display: grid;
  gap: var(--spacing-sm);
  padding-left: var(--spacing-lg);
}

/* Einfache Aufzählung im Fließtext (Karriere, Datenschutz) – ersetzt Inline-Styles (INT-666) */
.text-list {
  margin: var(--spacing-md) 0;
  padding-left: 1.5rem;
}

.text-list--spaced {
  display: grid;
  gap: 0.75rem;
}

.feature-card .text-list {
  color: var(--ink-muted);
}

.card__cta {
  align-self: flex-start;
}

/* Link-Karte: ganze Karte ist der Link (z. B. Formulare der Kassen) */
a.card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

a.card svg {
  flex-shrink: 0;
  color: var(--blue);
}

.card__name {
  display: block;
  font-size: var(--fs-lg);
}

.card__meta {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.card__meta span {
  white-space: nowrap;
}

@media (hover: hover) {
  a.card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-md);
  }
}

a.card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  a.card {
    transition: none;
  }
}

/* ── Sonderregelungen-Box ──────────────────────────────── */
.antrag-sonder-box {
  background: linear-gradient(135deg, rgba(80, 121, 165, 0.06) 0%, rgba(80, 121, 165, 0.02) 100%);
  border: 1px solid var(--blue-soft);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl) var(--spacing-2xl);
}

.antrag-sonder-box__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--blue-dark);
  margin: 0 0 var(--spacing-md);
}

.antrag-sonder-box__title svg {
  color: var(--blue);
  flex-shrink: 0;
}

.antrag-sonder-box__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.antrag-sonder-box__list li {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  padding-left: var(--spacing-lg);
  position: relative;
}

.antrag-sonder-box__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--blue);
  flex-shrink: 0;
}

/* INT-663: Links in der Box – --blue auf Box-Tönung nur 4.2:1 → --blue-dark (6:1) + Unterstrich */
.antrag-sonder-box__list a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* INT-663: Hinweiszeile unter der Kurzfassung (Datenschutz) */
.antrag-sonder-box__note {
  margin: var(--spacing-md) 0 0;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--ink-border);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* ─────────────────────────────────────────────────────────
   WIDERSPRUCH
   ───────────────────────────────────────────────────────── */

/* Frist-Banner (Amber-Warnung) */
.widerspruch-frist {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  background: rgba(201, 123, 58, 0.10);
  border: 1px solid rgba(201, 123, 58, 0.30);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.widerspruch-frist__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-circle);
  background: var(--amber);
  color: var(--white);
  flex-shrink: 0;
}

.widerspruch-frist__text {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--amber-dark);
  line-height: var(--lh-normal);
}

/* 2-Spalten-Layout: Gründe + Schritte */
.widerspruch-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

/* Wann lohnt sich ein Widerspruch */
.widerspruch-gruende {
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
}

.widerspruch-gruende__title,
.widerspruch-steps__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0 0 var(--spacing-lg);
}

.widerspruch-gruende__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.widerspruch-gruende__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
  min-height: 48px;
}

.widerspruch-gruende__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--radius-circle);
  background: rgba(201, 123, 58, 0.10);
  color: var(--amber-dark);
  flex-shrink: 0;
}

/* Widerspruch-Schritte */
.widerspruch-steps {
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
}

.widerspruch-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.widerspruch-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
}

.widerspruch-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--radius-circle);
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 2px;
}

.widerspruch-step__content {
  flex: 1;
  min-width: 0;
}

/* Widerspruch-CTA */
.widerspruch-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  text-align: center;
  padding: var(--spacing-2xl);
  background: var(--blue-ghost);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(80, 121, 165, 0.15);
}

.widerspruch-cta__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-normal);
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(80, 121, 165, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--blue-dark);
}

/* On mobile, place above the floating phone button */
@media (max-width: 767px) {
  .back-to-top {
    bottom: 5.5rem;
    right: 1.25rem;
    /* Etwas kleiner auf Mobile, damit Overlap mit Floating-Button minimal */
    width: 48px;
    height: 48px;
  }
}

/* ============================================================
   PLZ-CHECKER (standorte.html)
   ============================================================ */
.plz-checker {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.plz-checker__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.plz-checker__label {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  cursor: default;
  display: block;
}

.plz-checker__hint {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  max-width: 480px;
  line-height: var(--lh-normal);
  margin: 0;
}

.plz-checker__field-wrap {
  width: 100%;
  max-width: 320px;
}

.plz-checker__input {
  display: block;
  width: 100%;
  padding: 18px 24px;
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  text-align: center;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  min-height: 64px;
}

.plz-checker__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(80, 121, 165, 0.15);
}

.plz-checker__feedback {
  width: 100%;
  transition: all var(--transition-base);
}

.plz-checker__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-xl);
  text-align: center;
  animation: plzFadeInUp 0.3s ease forwards;
}

.plz-checker__result--match {
  background: var(--blue-ghost);
  border: 1.5px solid rgba(80, 121, 165, 0.3);
}

.plz-checker__result--no-match {
  background: rgba(249, 173, 77, 0.1);
  border: 1.5px solid rgba(249, 173, 77, 0.4);
}

.plz-checker__result-icon {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.plz-checker__result--match .plz-checker__result-icon {
  color: var(--teal);
}

.plz-checker__result--no-match .plz-checker__result-icon {
  color: var(--amber);
}

.plz-checker__result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--fs-base);
  color: var(--ink);
}

.plz-checker__result-content strong {
  font-size: var(--fs-lg);
  color: var(--ink);
}

.plz-checker__region-name {
  font-weight: var(--fw-semibold);
  color: var(--teal);
}

@keyframes plzFadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   KONTAKT-VORAUSWAHL (kontakt.html)
   ============================================================ */
.kontakt-vorauswahl {
  margin-bottom: var(--spacing-2xl);
}

.kontakt-vorauswahl__heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--spacing-md);
  margin-top: 0;
}

.kontakt-vorauswahl__buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.kontakt-vorauswahl__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  background: var(--ink-bg);
  border: 2px solid var(--ink-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
  text-align: center;
  line-height: var(--lh-tight);
  transition: all var(--transition-base);
  min-height: 100px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.kontakt-vorauswahl__btn:hover,
.kontakt-vorauswahl__btn:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
  outline: none;
}

.kontakt-vorauswahl__btn.is-active {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-primary);
}

.kontakt-vorauswahl__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  background: var(--white);
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.kontakt-vorauswahl__btn.is-active .kontakt-vorauswahl__btn-icon {
  background: rgba(255, 255, 255, 0.2);
}

.kontakt-vorauswahl__btn-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* --- Mid-Page CTA (kostenuebernahme.html) --- */
.mid-cta-section {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  padding: var(--spacing-3xl) 0;
}

.mid-cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

.mid-cta__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--spacing-xs);
}

.mid-cta__title {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: var(--lh-tight);
  margin: 0 0 var(--spacing-lg);
}

.mid-cta__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.mid-cta__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--spacing-md);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--white);
}

.mid-cta__chip svg {
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}

.mid-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
}

.mid-cta__actions .btn-primary {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}

.mid-cta__actions .btn-primary:hover {
  background: var(--ink-bg);
  border-color: var(--ink-bg);
}

.mid-cta__actions .btn-outline {
  background-color: transparent; /* INT-658: Basis ist weiß – hier Fläche durchscheinen lassen */
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
}

.mid-cta__actions .btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
}

@media (min-width: 768px) {
  .mid-cta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3xl);
  }

  .mid-cta__body {
    flex: 1;
  }

  .mid-cta__actions {
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 260px;
  }

  .mid-cta__title {
    font-size: var(--fs-4xl);
  }
}

/* Dezente Variante: helle Reassurance-Fläche statt Vollblau –
   vermeidet zwei fast identische blaue Vollbänder kurz vor dem Schluss-CTA.
   Genutzt auf Seiten, wo der mid-cta nah am finalen CTA steht. */
.mid-cta-section--soft {
  background: var(--blue-soft);
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
}
.mid-cta-section--soft .mid-cta__eyebrow { color: var(--blue-dark); }
.mid-cta-section--soft .mid-cta__title { color: var(--ink); }
.mid-cta-section--soft .mid-cta__chip {
  background: var(--white);
  border-color: var(--ink-border);
  color: var(--ink);
}
.mid-cta-section--soft .mid-cta__chip svg { color: var(--blue); }
.mid-cta-section--soft .mid-cta__actions .btn-primary {
  background: var(--blue-dark);
  color: var(--white);
  border-color: var(--blue-dark);
}
.mid-cta-section--soft .mid-cta__actions .btn-primary:hover {
  background: var(--blue);
  border-color: var(--blue);
}
.mid-cta-section--soft .mid-cta__actions .btn-outline {
  border-color: var(--blue-dark);
  color: var(--blue-dark);
}
.mid-cta-section--soft .mid-cta__actions .btn-outline:hover {
  background: var(--blue-ghost);
  border-color: var(--blue-dark);
}


/* --- Zielgruppen-Box (vor Wizard, kostenuebernahme.html) --- */
.zielgruppe-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.zielgruppe-card {
  background: var(--ink-bg);
  border: 1.5px solid var(--ink-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.zielgruppe-card--alt {
  background: var(--white);
  border-color: var(--blue);
  border-width: 2px;
}

.zielgruppe-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--blue-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
}

.zielgruppe-card--alt .zielgruppe-card__icon {
  background: rgba(80, 121, 165, 0.12);
}

.zielgruppe-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-tight);
}

.zielgruppe-card__text {
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  flex: 1;
}

.zielgruppe-card .btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 48px;
}

@media (min-width: 768px) {
  .zielgruppe-box {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   REGIONEN-RASTER (standorte.html) – INT-217
   ============================================================ */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-3xl);
}

.region-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 168px;
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  text-align: center;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.region-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.region-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-soft);
}

.region-card:hover::before {
  opacity: 1;
}

.region-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--blue-ghost);
  border-radius: var(--radius-circle);
  color: var(--blue);
  transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.region-card:hover .region-card__icon {
  background-color: var(--blue);
  color: var(--white);
  transform: scale(1.08);
}

.region-card__icon svg {
  width: 28px;
  height: 28px;
}

.region-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* Zusatz-Ort (z. B. "inkl. Moosburg") unter dem Regionsnamen */
.region-card__note {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* INT-297: Niederlassung Vitalis West als volle-Breite-Band UNTER dem PLZ-Panel
   (früher Sonderkachel .region-card--branch mitten im Auswahl-Grid). Icon + Text links,
   Link rechts; stapelt auf Mobile. Kein Grid-Bezug mehr → trennt Auswahl nicht von Ausgabe. */
.branch-band {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  border-radius: var(--radius-lg);
  color: var(--white);
  text-decoration: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.branch-band:hover {
  box-shadow: var(--shadow-primary);
  transform: translateY(-2px);
}

.branch-band__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-circle);
  color: var(--white);
  transition: background-color var(--transition-base);
}

.branch-band:hover .branch-band__icon {
  background-color: rgba(255, 255, 255, 0.25);
}

.branch-band__icon svg {
  width: 28px;
  height: 28px;
}

.branch-band__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
}

.branch-band__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.branch-band__name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--white);
}

.branch-band__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--white);
}

.branch-band__link svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.branch-band:hover .branch-band__link svg {
  transform: translate(2px, -2px);
}

@media (max-width: 560px) {
  .branch-band {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
  }
}

/* ============================================================
   REGION-CTA "Ihr Ort ist nicht dabei?" (standorte.html) – INT-217
   ============================================================ */
.region-cta {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-2xl);
  background: var(--blue-soft);
  border: 1px solid rgba(80, 121, 165, 0.18);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
  overflow: hidden;
}

.region-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.region-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-md);
  background-color: var(--blue);
  color: var(--white);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-primary);
}

.region-cta__icon svg {
  width: 30px;
  height: 30px;
}

.region-cta__title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--blue-dark);
  margin-bottom: var(--spacing-sm);
}

.region-cta__text {
  font-size: var(--fs-lg);
  color: var(--ink-muted);
  max-width: 520px;
  margin: 0 auto var(--spacing-xl);
}

/* Karte: mapyx.io-Export als statisches Bild (INT-217) */
.region-map {
  margin-top: var(--spacing-3xl);
}

.region-map__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.region-map__caption {
  margin-top: var(--spacing-md);
  font-size: var(--fs-sm);
  color: var(--ink-light);
  text-align: center;
}

/* Karten-Consent-Gate (DSGVO, INT-279) */
.region-map__frame {
  position: relative;
}
.map-consent {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  /* Vorschau der Einzugsgebiete: rein lokales, gedaempftes SVG (aus js/regionen-geo.js
     vorgebacken, kein externer Call vor Einwilligung). Neu erzeugen bei PLZ-Aenderung. */
  background: var(--ink-bg) url("../images/einzugsgebiet-preview.svg") center / contain no-repeat;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  color: var(--blue);
}
/* [hidden] muss die .map-consent display:flex-Regel schlagen (Spezifität),
   sonst bleibt die Consent-Box nach Karten-Aktivierung sichtbar. Vgl. .step2-panel[hidden]. */
.map-consent[hidden] { display: none; }

/* INT-337: sichtbare Fehlermeldung, wenn die Karte nicht geladen werden kann. */
.map-consent__error {
  margin-top: var(--spacing-md);
  max-width: 30rem;
  color: var(--color-danger);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.map-consent__error[hidden] { display: none; }

/* INT-298: „Gesamtübersicht"-Button – schwebt über der Karte (oben rechts, außerhalb
   der Leaflet-Zoom-Controls oben links). Zoomt auf alle Regionen zurück. */
.map-overview {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000; /* über Leaflet-Kacheln & -Controls */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px; /* Senioren-Touch-Target ≥48px, auch auf Mobile */
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  background: #ffffff;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.map-overview:hover { background: var(--ink-bg); box-shadow: var(--shadow-lg); }
.map-overview:active { transform: translateY(1px); }
.map-overview:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.map-overview[hidden] { display: none; }
.map-overview svg { flex-shrink: 0; }
@media (max-width: 767px) {
  /* Auf Mobile knapper, damit der Button die kleine Karte nicht verdeckt. */
  .map-overview { top: 8px; right: 8px; padding: 8px 12px; font-size: 15px; }
}
.map-consent__inner {
  max-width: 460px;
  text-align: center;
  /* Text-Kaertchen ueber der blassen Karten-Vorschau, damit Text/Button lesbar bleiben. */
  background: rgba(255, 255, 255, 0.86);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.map-consent__text {
  margin: var(--spacing-md) 0 var(--spacing-lg);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ── INT-285b: Karten-Labels, Hover-Tooltip & klickbare Regionsliste ───────── */

/* Permanentes Region-Label (weiße Pille), mittig in der Fläche – sofort ohne Hover lesbar. */
.leaflet-tooltip.region-label {
  background: rgba(255, 255, 255, 0.93);
  border: 1.5px solid rgba(28, 43, 58, 0.35);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  pointer-events: none; /* Taps gehen auf die Fläche darunter durch */
}
.leaflet-tooltip.region-label::before { display: none; } /* kein Pfeil */

/* Hover-Detail am Cursor: konkreter Ort + PLZ (getrennt vom Regions-Label). */
.leaflet-tooltip.map-tip {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  padding: 7px 11px;
  box-shadow: var(--shadow-md);
  line-height: 1.35;
}
.leaflet-tooltip.map-tip .map-tip__ort { display: block; font-weight: 700; font-size: 15px; }
.leaflet-tooltip.map-tip .map-tip__meta { display: block; font-size: 13px; opacity: 0.8; }
.leaflet-tooltip.map-tip.leaflet-tooltip-top::before { border-top-color: var(--ink); }

/* Auswählbare Region-Kacheln: übernehmen die frühere Akkordeon-Funktion.
   Klick markiert die Kachel und füllt das Detail-Panel darunter. */
.region-card--select {
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.region-card--select .region-card__icon { color: var(--region-color); }
.region-card--select:hover {
  transform: translateY(-3px);
  border-color: var(--region-color);
  box-shadow: var(--shadow-md);
}
.region-card--select:focus-visible {
  outline: 3px solid var(--region-color);
  outline-offset: 2px;
}
/* „Orte anzeigen"-Hinweis unten in der Kachel. Dunkel statt Region-Farbe (Kontrast ≥ 4,5:1;
   Gold/Terracotta auf Weiß würden reißen). Nur das Icon trägt die Region-Farbe. */
.region-card__cta {
  margin-top: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-muted);
}
/* Aktive (gewählte) Kachel: farbiger Rahmen + Ring UND dunkles „✓ Ausgewählt" (2. Signal, nicht nur Farbe). */
.region-card--select.is-active {
  border-color: var(--region-color);
  box-shadow: 0 0 0 3px var(--region-color) inset, var(--shadow-md);
}
.region-card--select.is-active .region-card__cta { color: var(--ink); }

/* Detail-Panel: Orte + PLZ der gewählten Region (ersetzt das frühere Akkordeon). */
.region-detail {
  margin-top: var(--spacing-lg);
  border: 1.5px solid var(--ink-border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.region-detail__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 14px var(--spacing-md);
  background: var(--ink-warm);
  border-bottom: 1.5px solid var(--ink-border);
}
.region-detail__swatch {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid rgba(28, 43, 58, 0.25);
}
.region-detail__title {
  flex: 1 1 auto;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}
.region-detail__count {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-muted);
}
.region-detail__orte {
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  columns: 2;
  column-gap: var(--spacing-xl);
}
/* Block-Zeile: Ort + PLZ inline; lange PLZ-Listen (z. B. München) umbrechen sauber statt zu überlaufen. */
.region-detail__orte li {
  break-inside: avoid;
  padding: 7px 0;
  border-bottom: 1px solid var(--ink-bg);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.region-detail__ort { color: var(--ink); font-weight: 600; margin-right: 0.5em; }
.region-detail__plz {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) { .region-detail__orte { columns: 1; } }

/* ══ WEGWEISER-KARTEN (Hub kostenuebernahme.html · INT-214) ═══════════════ */
.hub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}
.hub-card {
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .hub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.hub-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  flex-shrink: 0;
}
.hub-card__icon svg { width: 30px; height: 30px; stroke: var(--blue-dark); fill: none; stroke-width: 1.8; }
.hub-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold, 600);
  color: var(--ink);
  margin: 0 0 var(--spacing-xs);
}
.hub-card__text { color: var(--ink-muted); font-size: var(--fs-base); line-height: 1.6; margin: 0; }
.hub-card__list { list-style: none; margin: var(--spacing-md) 0 var(--spacing-lg); padding: 0; flex: 1; }
.hub-card__list li {
  position: relative;
  padding: 6px 0 6px 28px;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.hub-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
.hub-card .btn { width: 100%; justify-content: center; }
@media (max-width: 820px) { .hub-cards { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   Sprungnavigation / Inhaltsübersicht  (INT-301)
   Mobil & Tablet  → klebende Klappleiste (Variante C)
   Wide-Desktop ≥1600px → fixe Rand-Rail (Variante B)
   Ein DOM-Block, per Media-Query zwei Erscheinungsformen.
   ═══════════════════════════════════════════════════════════════ */
.page-toc {
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-overlay);        /* 30: unter Nav (40), über Inhalt */
  background: rgba(238, 244, 250, 0.97);   /* INT-338: --blue-soft getönt, hebt Balken vom weißen Inhalt ab */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--blue);    /* INT-338: war 1px --ink-border – jetzt klar als Navigation erkennbar */
}
.page-toc__eyebrow { display: none; } /* nur Desktop-Rail */

/* ── Klappleiste (C) ── */
.page-toc__toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* 56px Touch-Target. Höhe klein halten: Nav (80) + Balken (56) < scroll-padding-top
     (144, main.css) – sonst verschwindet die angesprungene Überschrift hinter dem Balken. */
  min-height: 56px;
  padding: 0 var(--container-padding);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.page-toc__toggle-icon    { color: var(--blue); flex-shrink: 0; }
.page-toc__toggle-label   {
  flex: 1;
  text-align: left;
  white-space: nowrap;          /* INT-338: „Auf dieser Seite" führt, Abschnitt-Zusatz kürzt statt umzubrechen –
                                   hält den Balken einzeilig (Nav 80 + Balken 56 < scroll-padding-top 144). */
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-toc__here { color: var(--ink-muted); font-weight: 400; }   /* INT-338: aktiver Abschnitt als sekundärer Zusatz */
.page-toc__toggle-chevron {
  color: var(--blue);           /* INT-338: war --ink-muted – klarer Aufklapp-Hinweis */
  flex-shrink: 0;
  width: 32px; height: 32px;
  padding: 6px;
  box-sizing: border-box;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(20, 43, 58, .14);
  transition: transform var(--transition-base);
}
.page-toc__toggle:hover,
.page-toc__toggle:focus-visible { background: var(--blue-ghost); }   /* INT-338: sichtbarer Antippbar-Zustand */
.page-toc__toggle[aria-expanded="true"] .page-toc__toggle-chevron {
  transform: rotate(180deg);
}

.page-toc__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--spacing-sm) var(--spacing-xs);
  list-style: none;
  display: none;
}
.page-toc[data-open="true"] .page-toc__list { display: block; }

.page-toc__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 48px;
  padding: 0 var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.page-toc__link:hover { background: var(--blue-ghost); color: var(--blue-dark); }
.page-toc__link.is-active {
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: var(--fw-semibold);
}
.page-toc__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-border);
  flex-shrink: 0;
  transition: background var(--transition-base);
}
.page-toc__link.is-active .page-toc__dot { background: var(--blue); }

/* ── Rand-Rail (B) – nur wo echter Gutter-Platz ist, kein Overlap ── */
@media (min-width: 1680px) {
  .page-toc {
    /* INT-326 (Karim P9): echtes position:sticky statt fixed/top:50%.
       Die Rail klebt oben unter der Nav, scrollt mit und läuft bis ans Ende
       von <main> mit (Footer liegt außerhalb → keine Überlappung).
       height:0 + overflow:visible → sie reserviert KEINEN vertikalen Platz
       (liegt im linken Gutter, Sektionen rücken nicht nach unten); die Liste
       ragt sichtbar nach unten heraus. margin-left schiebt sie in den Gutter. */
    position: sticky;
    top: calc(var(--nav-height) + 1rem);
    margin-left: calc((100vw - var(--container-max)) / 2 - 176px);
    height: 0;
    overflow: visible;
    /* 156px, damit „Auf dieser Seite" + längstes Label einzeilig bleiben (Bedarf 153px);
       am engsten Fall (1680px) bleiben 24px Rand links, Abstand zum Inhalt konstant 20px. */
    width: 156px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    z-index: var(--z-sticky);
    /* Rail startet unsichtbar und erscheint erst, wenn der blaue Hero
       vorbeigescrollt ist (main.js: .is-revealed) – sonst dunkler Text auf Blau. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .page-toc.is-revealed {
    opacity: 1;
    visibility: visible;
  }
  .page-toc__toggle { display: none; }
  .page-toc__eyebrow {
    display: block;
    /* Etwas Luft nach oben, damit die Rail nicht bündig an der Section-Oberkante
       klebt (Section hat 96px padding-top → sonst wirkt der Versatz als Stufe). */
    margin-top: var(--spacing-lg);
    padding: 0 var(--spacing-md) var(--spacing-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-light);
  }
  .page-toc__list {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--ink-border);
  }
  .page-toc__link {
    min-height: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-left: -2px;
    border-left: 2px solid transparent;
    border-radius: 0;
    font-size: var(--fs-sm);
  }
  .page-toc__link .page-toc__dot { display: none; }
  .page-toc__link:hover { background: none; color: var(--blue-dark); }
  .page-toc__link.is-active {
    background: none;
    border-left-color: var(--blue);
    color: var(--blue-dark);
    font-weight: var(--fw-semibold);
  }
}

/* Ohne JS wird .is-revealed nie gesetzt → Rail bliebe unsichtbar. Fallback:
   Sprungnav dann dauerhaft zeigen (Projektkonvention, vgl. main.css scripting:none). */
@media (min-width: 1680px) and (scripting: none) {
  .page-toc { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .page-toc { transition: none; }
}

/* Sprung-Offset: das globale scroll-padding-top (html, main.css) genügt –
   kein zusätzliches scroll-margin-top nötig (sonst addieren sich beide). */