/* ========================================
   VITALIS SENIORENDIENST - RESPONSIVE CSS
   Mobile-first Media Queries
   ======================================== */

/* --- Base (Mobile: < 480px) --- */
/* Heading-Skala +~8-10% angehoben für Senioren (INT #11); --fs-hero nur leicht,
   damit Hero-Headline auf 375px nicht umbricht/überläuft. */
:root {
  --fs-hero: 2.375rem;   /* war 2.25rem */
  --fs-4xl: 2rem;        /* war 1.875rem (h2 / .section-header__title) */
  --fs-3xl: 1.75rem;     /* war 1.625rem */
  --fs-2xl: 1.5rem;      /* war 1.375rem (h3) */
  --spacing-section: 3.5rem;
  --container-padding: 1.25rem;
  --nav-height: 70px;
}

/* Nav: Mobile Grundzustand */
.nav__links {
  display: none;
}

.nav__actions .btn {
  display: none;
}

.nav__phone {
  display: none;
}

/* Hamburger + Suche als Gruppe rechts (nicht mittig via space-between).
   margin-left:auto auf dem Suchbutton schiebt beide Icons an den rechten Rand;
   order sorgt dafür, dass der Hamburger ganz außen (rechts) sitzt. */
.nav__hamburger {
  display: flex;
  order: 2;
}

/* Search-Button: Kein display:none auf Mobile – Symbol bleibt zugänglich */
.nav__search-btn {
  display: flex;
  order: 1;
  margin-left: auto;
}

/* Mobile Navigation: Offener Zustand */
body.nav-open {
  overflow: hidden;
}

/* backdrop-filter auf .nav erzeugt einen Containing-Block, der den
   position:fixed-Drawer sonst im 70px hohen Nav-Balken einsperrt.
   Im offenen Zustand entfernen, damit der Drawer am Viewport hängt. */
body.nav-open .nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobil-Menü (INT-660): blaues Blatt (Blau der Trust-Bar) gleitet von rechts, große Serifen-Links,
   Kontakt-Fuß (Telefon, Öffnungszeiten, Beratung) klebt unten. */
body.nav-open .nav__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  /* --header-h wird per JS auf die reale Header-Höhe gesetzt (Fallback 118px) */
  top: var(--header-h, 118px);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--teal);
  z-index: var(--z-mobile-menu);
  padding: var(--spacing-md) 0 0;
  gap: 0;
  overflow-y: auto;
  animation: nav-sheet-in .34s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes nav-sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.nav-open .nav__links { animation: none; }
}

body.nav-open .nav__links li {
  display: block;
  width: 100%;
}
body.nav-open .nav__links li:not(.nav-extra) {
  padding: 0 var(--container-padding);
}

body.nav-open .nav__link {
  display: flex;
  align-items: center;
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  padding: 0 0 0 var(--spacing-lg);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  min-height: 58px;
  color: var(--white);
  white-space: normal;
}
body.nav-open .nav__link::after { display: none; }
body.nav-open .nav__link:hover { color: var(--white); background: rgba(255, 255, 255, .06); }
body.nav-open .nav__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

/* Aktive Seite: fett + gelber Balken (Gelb nur dekorativ auf dunklem Grund) – nicht nur Farbe */
body.nav-open .nav__link.is-active {
  color: var(--white);
  font-weight: var(--fw-semibold);
}
body.nav-open .nav__link.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 5px;
  background: var(--yellow);
  border-radius: 3px;
}

/* Kontakt-Fuß: letzter Listenpunkt, nur im offenen Mobil-Menü sichtbar */
.nav-extra { display: none; }
body.nav-open .nav-extra {
  display: block;
  position: sticky;
  bottom: 0;
  margin-top: auto;
}
.nav-extra__foot {
  background: var(--teal-dark);
  padding: var(--spacing-md) var(--container-padding) calc(var(--spacing-md) + env(safe-area-inset-bottom));
  display: grid;
  gap: var(--spacing-xs);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .18);
}
.nav-extra__phone {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 48px;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--white);
  text-decoration: none;
}
.nav-extra__hours { margin: 0; font-size: var(--fs-sm); color: var(--white); }
.nav-extra__cta {
  margin-top: var(--spacing-xs);
  width: 100%;
  min-height: 52px;
  background: var(--white);
  color: var(--teal-dark);
  border: 2px solid var(--white);
}
.nav-extra__cta:hover,
.nav-extra__cta:focus-visible { background: var(--blue-soft); color: var(--teal-dark); }

/* Schwebender Telefon-Knopf lag über dem Menü – im Menü steht das Telefon ja schon */
body.nav-open .floating-phone-btn { display: none; }

/* Niedrige Handys: Links 48 px, Fuß kompakter → alles passt, der Fuß überdeckt nichts */
@media (max-height: 720px) {
  body.nav-open .nav__links { padding-top: var(--spacing-xs); }
  body.nav-open .nav__link { min-height: 48px; font-size: 1.3125rem; }
  body.nav-open .nav__link.is-active::before { top: 10px; bottom: 10px; }
  .nav-extra__foot {
    padding-top: var(--spacing-sm);
    padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom));
    gap: 0;
  }
  .nav-extra__cta { min-height: 48px; }
}
/* Noch niedriger: Fuß klebt nicht, sondern folgt den Links (nie Überdeckung) */
@media (max-height: 600px) {
  body.nav-open .nav-extra { position: static; }
}

/* Hamburger X-Animation via nav-open */
body.nav-open .nav__hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
body.nav-open .nav__hamburger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav__hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Nav Overlay
   Muss UNTER dem .nav-Stacking-Context (z-index:40) liegen: der Drawer
   (.nav__links) sitzt innerhalb von .nav und kann daher mit seinem z-index:50
   nicht über ein Overlay auf Header-Ebene steigen. Lag das Overlay höher (49),
   fing es alle Klicks auf die Menü-Links ab. */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: calc(var(--z-nav) - 1);
}

body.nav-open .nav-overlay {
  display: block;
  /* erst unter dem Header beginnen: Trust-Bar + Logo bleiben hell (INT-660) */
  top: var(--header-h, 118px);
}

/* .nav braucht eine eigene Ebene über dem Overlay – sonst malte das positionierte
   Overlay (z 39) über die nicht positionierte .nav und färbte die Kopfzeile grau */
body.nav-open .nav {
  position: relative;
  z-index: var(--z-nav);
}

.hero {
  min-height: 100svh;
  padding: var(--spacing-3xl) 0;
}

.hero__inner {
  gap: var(--spacing-2xl);
  text-align: center;
}

.hero__actions {
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Hero-CTAs mobil kompakter: .btn-lg wäre sonst zu wuchtig und bricht um */
.hero__actions .btn {
  width: 100%;
  /* min(): verhindert Randberührung auf 360px-Geräten (vorher ragten 340px + Padding raus) */
  max-width: min(340px, calc(100vw - 40px));
  margin-inline: auto;
  padding: 14px 24px;
  font-size: var(--fs-base);
  min-height: 52px;
  text-wrap: balance; /* gleichmäßigerer Umbruch langer Labels ("Jetzt kostenlos beraten lassen") */
}

.hero__trust {
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Stats: 3 KPI-Karten vertikal gestapelt (übersichtlich statt gequetscht), Inhalt zentriert */
.hero__stats {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--spacing-sm);
  min-width: 0; /* direktes Grid-Item: darf schrumpfen statt den Track zu dehnen */
}

.hero__stat {
  min-width: 0;
  /* volle Breite → saubere vertikale Stapelung der 3 Karten */
  flex: 1 1 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  padding: var(--spacing-md) var(--spacing-xs);
  padding-top: calc(var(--spacing-md) + 3px);
}

.hero__stat-number {
  font-size: var(--fs-xl);
}

/* Labels umbrechen zwischen Wörtern über die volle Kartenbreite – nie clippen */
.hero__stat-label {
  text-align: center;
  width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  font-size: 0.75rem;
  line-height: 1.25;
}

/* Trust-Bar: kompakte, einzeilige Scroll-Leiste statt 4 gestapelter Zeilen */
.trust-bar {
  font-size: 0.8125rem;
  position: relative;
}

/* Rechter Fade als Scroll-Affordance: signalisiert, dass weitere Badges scrollbar sind
   (Zielgruppe 65+ erkennt sonst die versteckte Scrollbar nicht) */
.trust-bar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(80, 121, 165, 0) 0%, var(--blue) 92%);
  z-index: 1;
}

.trust-bar__inner {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--spacing-md);
  padding: 0 var(--container-padding);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}

.trust-bar__inner::-webkit-scrollbar {
  display: none;
}

.trust-bar__item {
  scroll-snap-align: start;
}

.trust-bar__item svg {
  width: 15px;
  height: 15px;
}

.trust-bar__divider {
  display: block;
  height: 14px;
}

.grid-2,
.grid-3,
.grid-4 {
  grid-template-columns: 1fr;
}

.feature-section {
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

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

.vorteile-list {
  grid-template-columns: 1fr;
}

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

.steps {
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

.steps::before {
  display: none;
}

.target-cards {
  grid-template-columns: 1fr;
}

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

.form-row {
  grid-template-columns: 1fr;
}

.footer__grid {
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

.footer__bottom-inner {
  flex-direction: column;
  gap: var(--spacing-sm);
  text-align: center;
}

.footer__bottom-links {
  flex-wrap: wrap;
  justify-content: center;
}

.cookie-banner__inner {
  flex-direction: column;
  text-align: center;
}

/* INT-321: Knöpfe auch mobil nebeneinander, gleich breit → Banner halb so hoch */
.cookie-banner__actions {
  width: 100%;
}

.cookie-banner__actions .btn {
  flex: 1;
}

.trust-badges {
  flex-direction: column;
  align-items: stretch;
}

.trust-badge {
  justify-content: center;
}

.partner-logos {
  gap: var(--spacing-xl);
}

.partner-logos img {
  height: 32px;
}

.data-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 480px+ (Large Phones) --- */
@media (min-width: 480px) {
  :root {
    --fs-hero: 2.625rem;   /* war 2.5rem */
    --fs-4xl: 2.125rem;    /* war 2rem */
  }

  .hero__actions {
    flex-direction: row;
  }

  .hero__actions .btn {
    width: auto;
  }

  .trust-badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .cookie-banner__actions {
    flex-direction: row;
    width: auto;
  }

  .cookie-banner__actions .btn {
    flex: none;
  }
}

/* --- 768px+ (Tablets) --- */
@media (min-width: 768px) {
  :root {
    --fs-hero: 2.875rem;   /* war 2.75rem */
    --fs-4xl: 2.5rem;      /* war 2.25rem (h2 / .section-header__title) */
    --fs-3xl: 2rem;        /* war 1.875rem */
    --fs-2xl: 1.625rem;    /* war 1.5rem (h3) */
    --spacing-section: 4.5rem;
    --container-padding: 2rem;
  }

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

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

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

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

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

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

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

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

  .trust-bar__inner {
    flex-direction: row;
    gap: var(--spacing-xl);
  }

  .trust-bar__divider {
    display: block;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__bottom-inner {
    flex-direction: row;
    gap: 0;
    text-align: left;
  }

  .cookie-banner__inner {
    flex-direction: row;
    text-align: left;
  }

  /* INT-321: Banner am Computer einzeilig wie das Wix-Original (16 px) */
  .cookie-banner__text {
    font-size: var(--fs-sm);
  }
}

/* --- 1024px+ (Desktop) --- */
@media (min-width: 1024px) {
  :root {
    --fs-hero: 3.625rem;   /* war 3.5rem – nur leicht, Hero soll nicht überlaufen */
    --fs-4xl: 2.75rem;     /* war 2.5rem (h2 / .section-header__title, +10%) */
    --fs-3xl: 2.25rem;     /* war 2rem */
    --fs-2xl: 1.875rem;    /* war 1.75rem (h3) */
    --spacing-section: 6rem;
    --container-padding: 1.5rem;
    --nav-height: 80px;
  }

  .nav__links {
    display: flex;
  }

  .nav__actions .btn {
    display: inline-flex;
  }

  .nav__hamburger {
    display: none;
  }

  .nav__phone {
    display: flex;
  }

  .mobile-menu {
    display: none;
  }

  .hero {
    min-height: 600px;
    padding: var(--spacing-5xl) 0;
  }

  .hero__inner {
    grid-template-columns: 1.4fr 0.6fr;
    text-align: left;
  }

  .hero__content {
    max-width: 620px;
  }

  /* Desktop: 3 KPI-Karten vertikal gestapelt in der rechten Hero-Spalte (übersichtlich) */
  .hero__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    align-self: center;
    max-width: 340px;
    width: 100%;
  }

  /* Karten vertikal (Zahl oben, Label darunter): Label bekommt die volle
     Kartenbreite und bricht sauber um – kein horizontales Clipping in den
     schmalen 2-Spalten-Karten (INT #16). */
  .hero__stat {
    min-width: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: var(--spacing-md) var(--spacing-sm);
    padding-top: calc(var(--spacing-md) + 3px);
  }

  .hero__stat-number {
    font-size: var(--fs-xl);
  }

  .hero__stat-label {
    text-align: center;
    font-size: var(--fs-xs);
    /* volle Kartenbreite nutzen, sauber umbrechen statt clippen */
    width: 100%;
    overflow-wrap: break-word;
    hyphens: none;
  }

  .hero__trust {
    flex-direction: row;
  }

  .feature-section {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
  }

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

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

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

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

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

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

  /* 4 Bewertungen → ausgewogenes 2×2 auf Desktop (begrenzte Breite) */
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 940px;
    margin-inline: auto;
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps::before {
    display: block;
  }

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

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

  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer bleibt bis 1280px 2-spaltig (Marke volle Breite),
     damit Kontaktspalte auf Laptops nicht umbricht (INT-158). */
}

/* --- 1280px+ (Large Desktop) --- */
@media (min-width: 1280px) {
  :root {
    --container-padding: 2rem;
  }

  .hero__title {
    font-size: 3.75rem;
  }

  .footer__grid {
    grid-template-columns: 1.3fr 1fr 1.6fr 0.9fr;
    gap: var(--spacing-2xl);
  }

  .footer__brand {
    grid-column: auto;
  }
}


/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover,
  .testimonial-card:hover,
  .vorteile-item:hover,
  .target-card:hover,
  .btn:hover,
  .btn:active {
    transform: none;
  }

  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .scale-in {
    opacity: 1;
    transform: none;
  }
}

/* --- Print Styles --- */
@media print {
  .nav,
  .trust-bar,
  .mobile-menu,
  .cookie-banner,
  .skip-link,
  .btn-phone {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .hero {
    background: none;
    color: #000;
    padding: 1cm 0;
  }

  .hero__title,
  .hero__subtitle {
    color: #000;
  }

  .section {
    padding: 1cm 0;
    page-break-inside: avoid;
  }

  .footer {
    background: none;
    color: #000;
    border-top: 1px solid #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }
}

/* ── Floating Phone Button – nur auf Mobile sichtbar ── */
@media (max-width: 767px) {
  .floating-phone-btn { display: flex; }
}

/* ── Engagement Banner – Mobile ──────────────────────── */
@media (max-width: 480px) {
  .engagement-banner__box {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }
  .engagement-banner__title { font-size: var(--fs-xl); }
}

/* ── Leistungstabelle & Pflegegrade-Stepper – Responsive ─────────────────
   Leistungstabelle:
   ─  Mobile  (<680px):  horizontal scrollbar (min-width: 680px auf Tabelle)
   ─  Alle Breiten:      Wrap-Container scrollt, Tabelle behält Struktur
   Pflegegrade-Cards:
   ─  Mobile  (<480px):  Kompakte Karten, kleinere Badge
   ─  Tablet  (≥680px):  2-Spalten-Grid
   ─  Desktop (≥1100px): Karten etwas luftiger
   ───────────────────────────────────────────────────────────────────────── */

/* ── Mobile: Pflegegrad-Karten kompakter ───────────────────────────────── */
@media (max-width: 479px) {
  .pg-card {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 4px);
  }

  .pg-card__badge {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .pg-card__title {
    font-size: var(--fs-base);
  }

  .pg-card__desc {
    font-size: var(--fs-xs);
  }
}

/* ── Tablet ab 680px: 2 Karten nebeneinander ────────────────────────────── */
@media (min-width: 680px) {
  .pg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  /* PG 5 bekommt volle Breite als letzte Karte */
  .pg-card--pg5 {
    grid-column: 1 / -1;
  }
}

/* ── Desktop ab 1100px: 3 Karten, letzte 2 auf eine Zeile ───────────────── */
@media (min-width: 1100px) {
  .pg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }

  /* PG 4 und PG 5 teilen sich die letzte Zeile */
  .pg-card--pg4 {
    grid-column: auto;
  }

  .pg-card--pg5 {
    grid-column: auto;
  }

  /* Wizard: 5-spaltige PG-Buttons passen auf Desktop gut */
  .wizard__options--5col {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1280px) {
  /* Leistungstabelle: Betragsspalten etwas luftiger */
  .leistungs-tabelle__cell-betrag {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  .leistungs-tabelle__wert {
    font-size: 1.5rem;               /* 24px auf breiten Screens */
  }

  .pg-card {
    padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-xl) calc(var(--spacing-2xl) + 4px);
  }

  .pg-card__title {
    font-size: var(--fs-xl);
  }

  .pg-card__badge {
    width: 50px;
    height: 50px;
    font-size: 1.375rem;
  }
}

/* ── Page Header – Mobile Padding-Korrektur ─────────── */
/* Auf kleinen Screens das Padding reduzieren,
   damit der Header nicht übermäßig viel Raum einnimmt */
@media (max-width: 767px) {
  .page-header {
    padding: var(--spacing-3xl) 0 calc(var(--spacing-2xl) + 48px);
  }

  .page-header__title {
    font-size: var(--fs-3xl); /* von --fs-4xl auf --fs-3xl verkleinert */
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: var(--spacing-2xl) 0 calc(var(--spacing-xl) + 48px);
  }

  .page-header__title {
    font-size: var(--fs-2xl);
  }

  .page-header p {
    font-size: var(--fs-base);
  }
}


/* ── Wizard – Responsive ─────────────────────────────────
   Der Wizard ist Desktop-first, aber soll auch auf Mobile
   gut funktionieren.
   ─────────────────────────────────────────────────────── */

/* Tablet (<768px): 2col-Options reduzieren */
@media (max-width: 767px) {
  /* Das frühere 2-Spalten-Grid wurde aufgelöst – keine Overrides mehr nötig.
     Die Inline-Info-Leiste (.wizard__step-aside--inline) ist bereits
     block-level und stellt sich unterhalb der Options-Karten dar. */

  .wizard__step-aside--inline {
    /* Auf schmalen Viewports Padding leicht reduzieren */
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .wizard {
    padding: var(--spacing-2xl) var(--spacing-xl);
    margin-top: var(--spacing-2xl);
  }

  .wizard__question {
    font-size: var(--fs-xl);
  }

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

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

  /* PG 4 und 5 werden in der 2. Zeile der 3er-Reihe gestapelt –
     damit keine einsame halbe Karte: alle auf auto-flow */
  .wizard__pg-btn[data-wizard-pg="4"],
  .wizard__pg-btn[data-wizard-pg="5"] {
    grid-column: auto;
  }

  .wizard__result-gesamt {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .wizard__result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wizard__result-actions .btn {
    text-align: center;
    justify-content: center;
  }

  .wizard__info-actions {
    flex-direction: column;
  }

  .wizard__info-actions .btn {
    text-align: center;
    justify-content: center;
  }
}

/* Mobile (<480px): 2col-Options auch 1-spaltig */
@media (max-width: 479px) {
  .wizard {
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: var(--radius-lg);
  }

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

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

  .wizard__option-btn {
    min-height: 100px;
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .wizard__pg-btn {
    min-height: 90px;
    padding: var(--spacing-md) var(--spacing-xs);
  }

  .wizard__pg-label {
    font-size: 0.6875rem;
  }

  .wizard__result-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .wizard__result-item-betrag {
    font-size: var(--fs-lg);
  }

  .wizard__result-gesamt-betrag {
    font-size: var(--fs-2xl);
  }
}


/* ── Pflegegrade Tab-Stepper – Responsive ────────────────
   Desktop:  5-spaltige Tabs + 2-spaltiges Panel (Info | Chips)
   Tablet:   Schmälere Chips-Spalte
   Mobile:   Tabs werden zu vertikalen Akkordeon-Elementen
   ──────────────────────────────────────────────────────── */

/* Tablet: Panel-Layout anpassen */
@media (max-width: 900px) {
  .pg-tabs__panel-inner {
    gap: var(--spacing-2xl);
    padding: var(--spacing-2xl);
  }

  .pg-tabs__panel-leistungen {
    width: 230px;
  }

  .pg-tabs__tab-label {
    font-size: 0.875rem; /* 14px – 5 enge Spalten lassen 16px nicht zu; darf umbrechen */
    line-height: 1.2;
  }
}

/* Tablet 640px: Tab-Grid 3+2, Panel wechselt auf column */
@media (max-width: 767px) {
  /* Tabs: 3 in Zeile 1, 2 in Zeile 2 – aber alle gleich groß */
  .pg-tabs__nav {
    grid-template-columns: repeat(3, 1fr);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* PG 4 und PG 5 bekommen je 1.5-breite Spalten in zweiter Zeile */
  .pg-tabs__tab--pg4,
  .pg-tabs__tab--pg5 {
    /* Beide nehmen zusammen 3 Spalten ein */
    grid-column: span 1;
  }

  /* Zweite Reihe (PG 4 + 5): über volle Breite verteilen */
  .pg-tabs__tab:nth-child(4),
  .pg-tabs__tab:nth-child(5) {
    /* 2 Tabs teilen 3 Spalten = je 1.5 → CSS grid kann das über 2-col auto */
    grid-column: span 1;
  }

  /* Panel: vertikal stapeln */
  .pg-tabs__panel-inner {
    flex-direction: column;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
  }

  .pg-tabs__panel-leistungen {
    width: 100%;
  }

  .pg-tabs__panel-title {
    font-size: var(--fs-xl);
  }

  .pg-tabs__panels {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

/* Mobile 480px: kompakte Tabs, kleinere Schrift */
@media (max-width: 479px) {
  .pg-tabs__nav {
    /* 5 Tabs bleiben in einer Zeile, werden sehr schmal */
    grid-template-columns: repeat(5, 1fr);
  }

  .pg-tabs__tab {
    min-height: 60px;
    padding: var(--spacing-sm) 4px;
    gap: 2px;
  }

  .pg-tabs__tab-num {
    width: 26px;
    height: 26px;
    font-size: var(--fs-sm);
  }

  .pg-tabs__tab-label {
    font-size: 0.875rem; /* 14px – 5 Spalten auf 375px; 16px passt hier nicht, darf umbrechen */
    line-height: 1.15;
  }

  .pg-tabs__panel-inner {
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
  }

  .pg-tabs__panel-badge {
    width: 42px;
    height: 42px;
    font-size: var(--fs-lg);
  }

  .pg-tabs__panel-title {
    font-size: var(--fs-lg);
  }

  .pg-tabs__chip {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: auto;
    padding: var(--spacing-sm);
  }

  .pg-tabs__chip-value {
    font-size: var(--fs-base);
  }
}

/* ─────────────────────────────────────────────────────────
   ANTRAGSTELLUNG / WIDERSPRUCH – Responsive
   ───────────────────────────────────────────────────────── */

/* Tablet und größer: Modul-Grid 3-spaltig */
@media (min-width: 640px) {
  .antrag-module-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop: Widerspruch 2-spaltig */
@media (min-width: 768px) {
  .widerspruch-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop: Antrag-Steps kompakter */
@media (min-width: 768px) {
  .antrag-step {
    padding: var(--spacing-2xl) var(--spacing-3xl);
  }

  /* Verbindungslinie-Offset anpassen */
  .antrag-steps .antrag-step:not(:last-child)::after {
    left: calc(var(--spacing-3xl) + 24px);
  }
}

/* Sehr kleines Mobile: einige Anpassungen */
@media (max-width: 479px) {
  .antrag-step {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
  }

  .antrag-steps .antrag-step:not(:last-child)::after {
    display: none; /* Verbindungslinie entfällt bei gestapeltem Layout */
  }

  .antrag-module-grid {
    grid-template-columns: 1fr;
  }

  .antrag-module-item {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .widerspruch-frist {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .antrag-sonder-box {
    padding: var(--spacing-lg);
  }

  .widerspruch-gruende,
  .widerspruch-steps {
    padding: var(--spacing-lg);
  }

  .widerspruch-cta {
    padding: var(--spacing-lg);
  }
}


/* ══════════════════════════════════════════════════════════
   MOBILE LAYOUT AUDIT FIXES
   Vollständige Überarbeitung aller mobilen Layout-Probleme.
   ══════════════════════════════════════════════════════════ */

/* ── Trust Bar: Overflow auf sehr kleinen Screens verhindern ── */
@media (max-width: 479px) {
  .trust-bar__inner {
    padding: var(--spacing-xs) var(--container-padding);
  }

  /* Einzeilige, horizontal scrollbare Leiste – Items bleiben in einer Zeile */
  .trust-bar__item {
    white-space: nowrap;
    justify-content: flex-start;
  }
}

/* ── Nav: Such-Overlay auf Mobile korrekt positionieren ─────── */
@media (max-width: 767px) {
  /* Suche wird auf Mobile zur vollflächigen, deckenden Leiste zwischen den
     Seitenrändern. Sie hat eine eigene X-Schließen-Schaltfläche, daher werden
     Logo und Hamburger währenddessen verdeckt bzw. ausgeblendet – kein
     Überlappen mehr (INT-158). */
  .nav.is-searching .nav__search-wrap {
    width: calc(100% - 2 * var(--container-padding));
    right: var(--container-padding);
  }

  /* Hamburger hat höhere z-index als die Suchleiste und würde sonst
     durchscheinen – während der Suche komplett ausblenden. */
  .nav.is-searching .nav__hamburger {
    opacity: 0;
    pointer-events: none;
  }

  /* Nav Actions: Suchbutton bleibt sichtbar, alle anderen Aktionen versteckt */
  .nav__actions {
    gap: var(--spacing-xs);
  }

  /* Floating Phone Button + Back-to-top: Kein Überlappen */
  .back-to-top {
    bottom: 5.5rem; /* Bereits in components.css, hier bekräftigt */
    right: 1.25rem;
    width: 48px;
    height: 48px;
  }

  .floating-phone-btn {
    bottom: 1.5rem;
    right: 1.25rem;
    width: 56px;
    height: 56px;
  }

  /* Standorte Karte: Höhe auf Mobile reduzieren */
  #map {
    height: 360px !important;
  }

  /* INT-337: Der fixierte Cookie-Banner ist auf Mobile hoch (Text + 2 gestapelte Buttons)
     und verdeckte die Karte samt „Karte aktivieren"-Button. Solange er sichtbar ist, unten
     Platz schaffen, damit sich Karte/Button über den Banner scrollen und tippen lassen.
     Nur auf der Karten-Seite (#map existiert ausschließlich dort) – sonst entstünde auf
     allen Seiten leerer Scrollraum. Ohne :has()-Support bleibt das bisherige Verhalten. */
  body:has(.cookie-banner.is-visible):has(#map) {
    padding-bottom: 20rem;
  }
  .region-map__frame {
    scroll-margin-bottom: 20rem;
  }

  /* INT-285c: Permanente Region-Pillen auf Mobile ausblenden – sie stapeln sich
     und decken die farbigen Flächen zu. Die gewählte Region ist über die Kachel
     („✓ Ausgewählt") + das Detail-Panel klar benannt; auf der Karte wird sie gezoomt. */
  .leaflet-tooltip.region-label {
    display: none !important;
  }

  /* Engagement Banner: volle Breite auf kleinen Screens */
  .engagement-banner {
    padding: var(--spacing-md);
  }

  /* Midpage CTA: Padding im Container statt außerhalb */
  .midpage-cta {
    margin: var(--spacing-2xl) 0;
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  /* Leistungs-Trio: 1 Spalte auf Mobile */
  .leistungs-trio__grid {
    grid-template-columns: 1fr;
  }

  .leistungs-trio__headline {
    font-size: var(--fs-2xl);
  }

  .leistungs-trio__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .leistungs-trio__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Einzugsgebiet-Band: 1 Spalte auf Mobile, Buttons volle Breite */
  .ortsband__grid {
    grid-template-columns: 1fr;
  }

  .ortsband__actions {
    flex-direction: column;
    align-items: stretch;
  }

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

  /* CTA Section: weniger vertikales Padding auf Mobile */
  .cta-section {
    padding: var(--spacing-3xl) 0;
  }

  .cta-section__title {
    font-size: var(--fs-3xl);
  }

  /* Acquisition-Box: Padding reduzieren */
  .acquisition-box {
    padding: var(--spacing-2xl) var(--spacing-xl);
  }

  .acquisition-box__title {
    font-size: var(--fs-2xl);
  }

  /* Feature-Section: Gap auf Mobile reduzieren */
  .feature-section {
    gap: var(--spacing-2xl);
  }

  /* Vorteile-Item: Kompakteres Layout */
  .vorteile-item {
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
  }

  /* Section Header: Schrift und Abstand auf Mobile anpassen */
  .section-header__text {
    font-size: var(--fs-base);
  }

  /* Feature-Card: Padding und Abstände auf mittleren Mobile-Screens anpassen */
  .feature-card {
    padding: var(--spacing-2xl);
  }

  .feature-card__icon {
    margin-bottom: var(--spacing-lg);
  }

  .feature-card__title {
    margin-bottom: var(--spacing-md);
  }

  .feature-card__text {
    font-size: var(--fs-base);
  }

  /* Testimonial-Card: Padding reduzieren */
  .testimonial-card {
    padding: var(--spacing-xl);
  }

  /* Target-Card: Padding reduzieren */
  .target-card {
    padding: var(--spacing-xl);
  }

  /* Footer Contact-Item: nowrap aufheben */
  .footer__contact-item {
    white-space: normal;
  }

  /* Footer: Marken-Bereich zentrieren */
  .footer__brand {
    max-width: 100%;
    text-align: center;
  }

  .footer__logo {
    justify-content: center;
  }

  .footer__social {
    justify-content: center;
  }

  /* Section-Wave: Kein Leerraum durch falsche Höhenberechnung */
  .section-wave {
    height: 40px;
  }

  /* Hero Stats: Kompaktere Karten auf Mobile */
  .hero__stat {
    padding: var(--spacing-sm) var(--spacing-md);
    min-width: 100px;
  }

  .hero__stat-number {
    font-size: var(--fs-xl);
  }

  .hero__stat-label {
    font-size: var(--fs-xs);
  }

  /* Hero Subtitle: Schriftgröße anpassen */
  .hero__subtitle {
    font-size: var(--fs-base);
  }

  /* Hero Badge: kleinere Padding auf Mobile */
  .hero__badge {
    font-size: var(--fs-xs);
    padding: 6px var(--spacing-md);
  }

  /* Steps Nummerkreise: Größe auf Mobile */
  .step__number {
    width: 56px;
    height: 56px;
    font-size: var(--fs-lg);
  }

  /* Wizard Buttons: Mindestbreite sicherstellen */
  .wizard__result-actions .btn {
    min-height: 52px;
  }

  /* Contact Form: Padding reduzieren */
  .contact-form {
    padding: var(--spacing-xl);
  }

  /* Hinweis-Box: Padding reduzieren */
  .hinweis-box {
    padding: var(--spacing-xl);
  }
}

/* ── Sehr kleine Screens (<480px): Extra-Komprimierung ─────── */
@media (max-width: 479px) {
  /* Nav: Logo-Bild etwas kleiner damit Platz für Hamburger */
  .nav__logo-img {
    height: 36px;
  }

  .nav__inner {
    gap: var(--spacing-xs);
  }

  /* Hero: Noch kompakteres Padding */
  .hero {
    padding: var(--spacing-2xl) 0;
  }

  .hero__title {
    font-size: var(--fs-3xl);
  }

  /* Section-Header: kompakter */
  .section-header {
    margin-bottom: var(--spacing-2xl);
  }

  /* Sections: Weniger vertikales Padding */
  .section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
  }

  .section-sm {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }

  /* Feature-Card: Kompakt auf sehr kleinen Screens */
  .feature-card {
    padding: var(--spacing-xl);
  }

  .feature-card__icon {
    width: 52px;
    height: 52px;
    margin-bottom: var(--spacing-md);
  }

  .feature-card__title {
    font-size: var(--fs-lg);
    margin-bottom: var(--spacing-sm);
  }

  .feature-card__text {
    font-size: var(--fs-sm);
  }

  /* Testimonial-Card: Kompakt */
  .testimonial-card {
    padding: var(--spacing-lg);
  }

  /* Vorteile */
  .vorteile-item {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .vorteile-item__icon {
    width: 40px;
    height: 40px;
  }

  /* Target Cards */
  .target-card {
    padding: var(--spacing-lg);
  }

  .target-card__icon {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-md);
  }

  /* CTA Section */
  .cta-section {
    padding: var(--spacing-2xl) 0;
  }

  .cta-section__text {
    font-size: var(--fs-base);
  }

  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-section__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Acquisition Box */
  .acquisition-box {
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: var(--radius-lg);
  }

  /* Midpage CTA */
  .midpage-cta {
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
  }

  .midpage-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .midpage-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* FAQ Item Question: Smaller padding */
  .faq-item__question {
    padding: var(--spacing-lg);
    font-size: var(--fs-base);
    min-height: 56px;
  }

  .faq-item__answer-inner {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
  }

  /* Steps: Kompakteres Layout auf kleinen Screens */
  .step {
    padding: var(--spacing-md);
  }

  .step__number {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
  }

  /* Contact Form: Noch kompakter */
  .contact-form {
    padding: var(--spacing-lg);
  }

  .form-input,
  .form-textarea,
  .form-select {
    padding: 12px 14px;
    min-height: 48px;
  }

  /* Footer: Kleinere Schrift im Footer-Bottom */
  .footer__bottom-inner {
    font-size: var(--fs-xs);
  }

  /* Back-to-top Button */
  .back-to-top {
    width: 44px;
    height: 44px;
    bottom: 5rem;
    right: 1rem;
  }

  .floating-phone-btn {
    width: 52px;
    height: 52px;
    bottom: 1.25rem;
    right: 1rem;
  }

  /* Hinweis-Box */
  .hinweis-box {
    padding: var(--spacing-lg);
  }

  /* Contact-Grid Info-Badge: voll breite und stapeln auf Mobile */
  .contact-card {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .contact-card__icon {
    width: 48px;
    height: 48px;
  }

  /* Wizard Result Gesamt */
  .wizard__result-gesamt {
    padding: var(--spacing-lg);
  }

  .wizard__result-gesamt-betrag {
    font-size: var(--fs-2xl);
  }
}

/* ── Tablet 768px: Spezielle Anpassungen ─────────────────── */
@media (min-width: 480px) and (max-width: 767px) {
  /* Hero Stats: Tablet 480–767px → 3 Karten vertikal gestapelt */
  .hero__stats {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    max-width: 420px;
    margin: 0 auto;
  }

  .hero__stat {
    /* volle Breite → saubere vertikale Stapelung der 3 Karten */
    flex: 1 1 100%;
    min-width: 0;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* CTA Actions: 2-spaltig auf mittleren Phones */
  .cta-section__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Feature Cards: 2-spaltig ab 480px */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Acquisition Box: mittel */
  .acquisition-box {
    padding: var(--spacing-2xl);
  }
}

/* ── Standorte Karte: Höhe responsive ───────────────────── */
@media (max-width: 480px) {
  #map {
    height: 340px !important;
  }
}

/* ── Grid Auto: Minimum-Breite auf Mobile anpassen ──────── */
@media (max-width: 767px) {
  .grid-auto {
    grid-template-columns: 1fr;
  }
}

/* ── Footer: Mobile Verbesserungen ───────────────────────── */
@media (max-width: 767px) {
  /* Footer Contact Items: white-space:nowrap aufheben */
  .footer__contact-item {
    white-space: normal;
    word-break: break-word;
  }

  /* Footer Grid: Einzelne Spalte mit mehr Abstand */
  .footer__grid {
    gap: var(--spacing-2xl);
  }

  /* Footer Logo-Bereich zentrieren */
  .footer__brand {
    text-align: center;
    max-width: 100%;
  }

  .footer__logo {
    justify-content: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__muenchen-badge {
    display: block;
    margin: var(--spacing-md) auto 0;
    text-align: center;
  }
}

/* ── Nav-Aktionen auf Mobile schlanker ───────────────────── */
@media (max-width: 1023px) {
  /* Zwischen 768px und 1023px (kein Desktop) zeigen wir
     weder Hamburger noch full Nav. Dieser Zustand existiert
     nicht – Nav springt direkt von Hamburger (< 1024px) auf Desktop. */
  /* Suchbutton bleibt auf allen Breakpoints sichtbar */
  .nav__search-btn {
    display: flex;
  }
}

/* ── Leistungstabelle: Extra-Hinweis für Mobile-Scroll ──── */
@media (max-width: 679px) {
  .leistungs-tabelle-wrap::before {
    content: '← Tabelle horizontal scrollbar →';
    display: block;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--ink-light);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--ink-bg);
    border-bottom: 1px solid var(--ink-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

/* ── Section Waves: sauberer Übergang auf Mobile ─────────── */
@media (max-width: 767px) {
  .section-wave {
    height: 40px;
    max-height: 40px;
  }
}

/* ── Kontakt-Seite: Formular-Checkbox Touch-Target ──────── */
@media (max-width: 767px) {
  .contact-form label input[type="checkbox"] {
    min-width: 22px;
    min-height: 22px;
    width: 22px;
    height: 22px;
  }
}

/* ── Touch-Devices: Hover-Animationen deaktivieren ───────
   Auf Touchscreens bleiben :hover-Zustände „kleben".
   Daher transform-Effekte für reine Pointer-Devices reservieren.
   ──────────────────────────────────────────────────────── */
@media (hover: none) {
  .feature-card:hover,
  .testimonial-card:hover,
  .vorteile-item:hover,
  .target-card:hover,
  .contact-card:hover,
  .hinweis-box:hover,
  .pg-card:hover,
  .antrag-step:hover,
  .trust-badge:hover {
    transform: none;
    box-shadow: none;
  }

  /* Btn hover auf Touch: kein translateY, nur Farbwechsel */
  .btn:hover {
    transform: none;
    box-shadow: none;
  }

  .btn-primary:hover {
    box-shadow: var(--shadow-primary);
  }
}

/* ── PLZ-Checker ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .plz-checker__label {
    font-size: var(--fs-2xl);
  }
  .plz-checker__input {
    font-size: var(--fs-lg);
    letter-spacing: 0.08em;
  }
}

/* ── Kontakt-Vorauswahl ───────────────────────────────────── */
@media (max-width: 767px) {
  .kontakt-vorauswahl__buttons {
    grid-template-columns: 1fr;
  }
  .kontakt-vorauswahl__btn {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
    min-height: 72px;
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .kontakt-vorauswahl__btn-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   INT-152 · Mobile-Design-Verbesserungen (≤767px)
   Overflow-Beseitigung + 44px Touch-Targets (Senioren-A11y).
   Alle Regeln bewusst auf ≤767px begrenzt → kein Desktop-Regress.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Buttons dürfen umbrechen statt den Viewport zu sprengen ──
     Ursache Overflow kostenuebernahme: langer nowrap-Button (409px). */
  .btn {
    white-space: normal;
    max-width: 100%;
  }

  /* ── Breadcrumb: linksbündig + Umbruch statt Clipping ──
     Ursache: zentrierter Flex-Container ohne Wrap schnitt 3-stufige
     Breadcrumbs an beiden Rändern ab (INT-305-Folgefund). */
  .page-header__breadcrumb {
    justify-content: flex-start;
  }

  /* ── Breadcrumb-Links: 44px Touch-Höhe ── */
  .page-header__breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Footer-Kontaktlinks (Tel/E-Mail): 44px Touch-Höhe ── */
  .footer__contact-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── Nav-Such-Buttons: 44px Touch-Targets ── */
  .nav__search-btn {
    width: 44px;
    height: 44px;
  }
  .nav__search-close {
    width: 44px;
    height: 44px;
  }

  /* ── Inline-Links in der Leistungstabelle: 44px Touch-Höhe ── */
  .leistungs-tabelle__inline-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* ── Mobil ruhiger: weniger Deko (A: linke Balken · B: Hero-Zahlen · C: bunte Oberkanten · D: Rand statt Schatten) ── */
@media (max-width: 767px) {
  /* A · Linke Akzentbalken raus */
  .hausnotruf-unterlagen {
    border: 0;
    border-top: 1px solid var(--ink-border);
    border-radius: 0;
    background: transparent;
    padding: var(--spacing-lg) 0 0;
  }
  .antrag-sonder-box {
    border: 1px solid var(--ink-border);
    background: var(--ink-bg);
    padding: var(--spacing-lg);
  }
  .info-note {
    border-left: 0;
    border: 1px solid var(--ink-border);
  }
  .testimonial-card__quote {
    border-left: 0;
    padding-left: 0;
  }

  /* B · Hero-Zahlen: Streifen, Glanz, Schatten raus */
  .hero__stat {
    box-shadow: none;
    padding-top: var(--spacing-md);
  }
  .hero__stat::before,
  .hero__stat::after { display: none; }

  /* C · Regionen-Karten: bunter Oberrand raus – Regionsfarbe bleibt im Icon */
  .ortsband__card {
    border: 1px solid var(--ink-border);
    box-shadow: none;
  }

  /* D · Rand statt Schatten */
  .hub-card, .svc-card, .pgr, .contact-form, .region-cta,
  .map-consent__inner, .leistungs-tabelle-wrap, .pg-tabs__panels,
  .feature-section__image, .story-grid__image, .card--highlight {
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile CTAs einheitlich (≤767px): volle Breite, eine Zeile, ~52px hoch.
   Vorher 59–116px (btn-lg 20px Schrift/20px Padding, lange Labels 2–3-zeilig).
   Hohe Spezifität, damit Bereichsregeln (.hero__actions .btn usw.) nicht abweichen.
   48px-Touch-Target bleibt (Senioren-A11y); btn-sm/btn-nav unverändert.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body .btn:not(.btn-sm):not(.btn-nav) {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 12px 16px;
    font-size: 1.0625rem; /* 17px – Labels passen einzeilig */
    min-height: 52px;
  }

  /* Karten mit 48px-Innenabstand ließen nur ~237px für den Knopf → Label brach um */
  .zielgruppe-card, .region-cta {
    padding: var(--spacing-lg);
  }
}

/* Sehr schmale Handys (360px): längste Labels („Passende Kassenleistung anfragen") sonst 2-zeilig */
@media (max-width: 379px) {
  body .btn:not(.btn-sm):not(.btn-nav) {
    padding-inline: 12px;
    font-size: 1rem; /* 16px – Senioren-Minimum */
  }
}