/* NOEMA AI: einheitliche vertikale Abstaende auf Mobilgeraeten.
   Bewusst nur Layout, keine Typografie oder Desktop-Regeln. */
@media screen and (max-width: 720px) {
  :root {
    --mobile-section-space: 40px;
    --mobile-card-gap: 20px;
  }

  /* Die frueheren 72px je Abschnitt erzeugten grosse Leerraeume. */
  .section,
  .section.compact {
    padding-top: var(--mobile-section-space);
    padding-bottom: var(--mobile-section-space);
  }

  .section-head { margin-bottom: 24px; }
  .grid-3,
  .fact-grid { gap: var(--mobile-card-gap); }
  .card { padding: 22px; }
  .fact { padding: 20px; }

  /* Uebergang der letzten Kompetenzkarte zum Kontakt. */
  #ueber-uns { padding-bottom: 20px; }
  #kontakt { padding-top: 20px; }
  #kontakt .contact-box { padding: 24px; gap: 24px; }
  #kontakt .contact-box h2 { margin-bottom: 12px; }

  /* Gleicher Kartenabstand in der Leistungs-/Angebotsuebersicht. */
  #preise .price-overview { gap: var(--mobile-card-gap); }
  #preise .price-card { padding: 22px; }
}