/* Robustheit über alle Bildschirmbreiten — ergänzt das Design aus der Preview,
   ändert es bei den üblichen Breiten aber nicht (Seitenhöhen bleiben pixelgleich). */

/* Rasterzellen dürfen schmaler werden als ihr Inhalt. Ohne das drückt z. B. das
   Kontaktformular auf dem iPad im Hochformat (834px) die Seite 38px über den Rand:
   Grid-Kinder haben von Haus aus min-width:auto. mobile.css regelt das nur unter 820px. */
[style*="display:grid"] > * { min-width: 0; }

/* Formularfelder und Medien sprengen nie ihren Kasten */
input, select, textarea { max-width: 100%; }
img, video, svg { max-width: 100%; }

/* Lange Wörter (Komposita, E-Mail-Adressen, URLs) umbrechen statt überlaufen */
h1, h2, h3, a, span, figcaption, blockquote { overflow-wrap: break-word; }

/* ── Aufklappmenü auf Touch-Geräten ─────────────────────────────────────────
   Die Preview öffnet die Untermenüs nur per :hover. Auf Android gibt es kein
   Hover: ein Tipp folgte sofort dem Link, die Unterpunkte sah man nie.
   site-Skript (Seite.astro) setzt .offen beim ersten Tipp; zweiter Tipp folgt dem Link. */
.na-dd.offen .na-dd-menu { display: flex; }
@media (max-width: 900px) {
  /* Menü nie breiter als der Bildschirm, lange Einträge umbrechen */
  .na-dd-menu { max-width: calc(100vw - 32px); min-width: min(235px, calc(100vw - 32px)); }
  .na-dd-menu a { white-space: normal; padding: 12px 12px; }
  /* bequeme Tippziele in der Hauptnavigation */
  .m-nav > a, .m-nav .na-dd > a { padding-top: 8px !important; padding-bottom: 8px !important; }
}
@media (max-width: 600px) {
  /* Auf dem Handy ragte das Untermenü rechts aus dem Bildschirm (gemessen: bis 469px bei
     390px Breite). Deshalb hängt es hier an der Navigation statt am Menüpunkt und klappt
     in voller Breite darunter auf. */
  .m-nav { position: relative; }
  .m-nav .na-dd { position: static; }
  .m-nav .na-dd-menu { left: 0; right: 0; max-width: none; min-width: 0; margin-top: 8px; }
}