/* Hummelberg — gemeinsames Styling (Tailwind-CDN-Supplement) */

/* Touch-Targets immer >= 44px */
nav a {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Smooth Scroll für Anker; Scrollbar-Platz reservieren, damit der
   Body-Scroll-Lock beim Modal kein Layout-Shift (Breitensprung) erzeugt */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* Modal offen: Hintergrund-Scroll sperren (kein Scroll-Chaining — die
   Liste im Hintergrund darf sich nicht mitbewegen). */
body.modal-open {
  overflow: hidden;
}

/* Modal-Sheet: Wheel/Touch am Scroll-Ende nicht auf die Seite durchreichen */
.modal > div:last-child {
  overscroll-behavior: contain;
}

/* Modals: mobil = Bottom-Sheet, ab 768px vertikal zentriert.
   Alle Modals haben dieselbe Struktur (Backdrop = 1. Kind, Sheet = letztes
   Kind) — deshalb zentral hier, kein HTML/JS-Edit nötig. */
@media (min-width: 768px) {
  .modal > div:last-child {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    max-height: 85vh;
    overflow-y: auto;
    border-width: 1px;
    border-radius: 1.5rem;
  }
}

/* Formular-Modals (Tastatur-Fix, 2026-08-01): mobil oben verankern statt
   Bottom-Sheet — sonst verdeckt die Smartphone-Tastatur die Eingabefelder.
   Klasse `modal-sheet-top` ans Sheet (letztes Kind) der Formular-Modals:
   Skill/Werkzeug eintragen (skills.html/werkzeuge.html), Login + Anfrage
   (app.js). Desktop bleibt unverändert zentriert. */
@media (max-width: 767px) {
  .modal > div:last-child.modal-sheet-top {
    bottom: auto;
    top: 0;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 0 0 1.5rem 1.5rem;
  }
}