/* Kompakte Darstellung auf dem Handy: weniger Leerraum, weniger Scrollen.
   Gilt nur für schmale Bildschirme – die Ansicht am PC bleibt unverändert.
   Wird auf allen Seiten als letztes Stylesheet geladen. */
@media (max-width: 640px) {
  /* Abschnitte */
  html body section { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }
  html body .sec-title { margin-bottom: .25rem; }
  html body .sec-sub { margin-bottom: 1rem !important; }
  html body .svc-hero { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }

  /* Preistabellen: Preis bleibt in einer Zeile, die Leistung bricht um */
  html body .price-table td, html body .price-table th { padding: .55rem .7rem !important; line-height: 1.4 !important; }
  html body .price-table td:last-child, html body .price-table th:last-child { white-space: nowrap; width: 1%; vertical-align: top; }
  html body .price-desc { margin-top: .15rem; }

  /* Leistungskarten: Symbol links neben dem Text statt darüber */
  html body .svc-grid { gap: .6rem !important; }
  html body .svc-card { padding: .85rem .9rem !important; display: grid !important; grid-template-columns: 40px 1fr; column-gap: .75rem; align-items: start; }
  html body .svc-card > * { grid-column: 2; }
  html body .svc-card > .svc-icon { grid-column: 1; grid-row: 1 / span 4; width: 40px !important; height: 40px !important; font-size: 1.15rem !important; margin: 0 !important; border-radius: 10px; }
  html body .svc-card > br { display: none; }
  html body .svc-card h3 { margin: 0 0 .15rem !important; }
  html body .svc-card p { margin: 0 !important; }

  /* „Warum wir“, Vertrauensleiste, Kacheln */
  html body .why-grid { gap: .6rem !important; }
  html body .why-item { padding: .9rem 1rem !important; }
  html body .why-num { margin-bottom: .2rem !important; }
  html body .trust-inner { gap: .4rem 1rem !important; }

  /* Häufige Fragen */
  html body .faq-q { padding-top: .75rem !important; padding-bottom: .75rem !important; }

  /* Fußzeile: zwei Spalten statt untereinander */
  html body footer { padding: 1.4rem 1rem 1rem !important; }
  html body .foot-inner { grid-template-columns: 1fr 1fr !important; gap: .9rem 1rem !important; }
  html body .foot-inner > div:first-child { grid-column: 1 / -1; }
  html body .foot-col ul li { margin-bottom: .2rem; }
  html body .foot-bottom { margin-top: 1rem !important; }
}
@media (max-width: 640px) {
  /* Ganze Karte ist ein Link: „Mehr erfahren“ als kleiner Pfeil am Titel */
  html body a.svc-card > span:last-child { display: none !important; }
  html body a.svc-card h3::after { content: " →"; color: var(--blue); font-weight: 700; }
}
@media (max-width: 640px) {
  /* Anfahrtsfotos: zum Wischen nebeneinander statt untereinander */
  html body .anfahrt-bilder { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem !important; padding-bottom: .4rem; -webkit-overflow-scrolling: touch; }
  html body .anfahrt-bilder > figure { flex: 0 0 80%; scroll-snap-align: start; margin: 0; }

  /* Grundsätze und „Warum wir“: Nummer neben dem Titel */
  html body .philo-grid { gap: .6rem !important; }
  html body .philo-card { padding: .9rem 1rem !important; }
  html body .philo-card-num, html body .why-num { float: left; margin: 0 .55rem 0 0 !important; }
  html body .philo-card h3, html body .why-item h3 { margin: .1rem 0 .35rem !important; }
  html body .philo-card p, html body .why-item p { clear: both; }
}
@media (max-width: 640px) {
  /* Familienalbum: Handy-Bilder zum Wischen, Funktionskarten mit Symbol links */
  html body .fa-handys { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem !important; padding-bottom: .4rem; }
  html body .fa-handys > figure { flex: 0 0 62%; scroll-snap-align: start; }
  html body .fa-funktionen, html body .fa-schutz, html body .fa-tage { gap: .6rem !important; }
  html body .fa-funktionen > div { padding: .8rem .9rem !important; display: grid; grid-template-columns: 2rem 1fr; column-gap: .6rem; }
  html body .fa-funktionen > div > span { grid-row: 1 / span 2; font-size: 1.35rem !important; }
  html body .fa-funktionen h3 { margin: 0 0 .2rem !important; }
  html body .fa-schutz > div, html body .fa-tage > div { padding: .8rem .9rem !important; }
}