/* ── Gemeinsame Modal-Basis ──────────────────────────────────────────────
   Genutzt von allen echten Overlay-Modals (#profile-pick-modal, #settings-panel,
   #install-prompt-modal, #donation-modal, #data-issue-modal, #bug-report-modal,
   #image-source-modal, #followup-modal) sowie vom Profil-Schnellwähler
   (#profile-switcher, s. profile-switcher-overlay.css für dessen Abweichungen).
   Oeffnen/Schliessen (ESC, Fokus-Trap, Fokus-Rueckgabe) via modal.js. */

.prefs-modal-overlay {
  position: fixed;
  /* Startet erst ab der Haelfte der (echten, per JS gemessenen) Header-Hoehe -
     das Panel darunter kann den Header dadurch nie mehr als zur Haelfte
     verdecken (in der fullscreen-PWA gibt es keine Browser-Chrome, die das
     sonst abfedern wuerde). --app-header-h wird in screen-management.js gesetzt. */
  top: calc(var(--app-header-h, 64px) * .5);
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  box-sizing: border-box;
}
.prefs-modal-overlay.open { display: flex; }
.prefs-modal-backdrop { position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.5); }
.prefs-modal-panel {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  width: 100%;
  max-width: 320px;
  /* Hoehe klar begrenzt statt "fast Vollbild": maximal 50% der sichtbaren
     Viewport-Hoehe (dvh = tatsaechlich sichtbarer Bereich, vh als Fallback fuer
     Browser ohne dvh-Support), zusaetzlich nie ueber die vom Overlay bereits
     reservierte Flaeche hinaus (deckt den Header-Abstand von oben nochmal ab). */
  max-height: min(50vh, 100%);
  max-height: min(50dvh, 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  /* Fokus-Ziel fuer modal.js, falls das Panel selbst den initialen Fokus
     bekommt (kein fokussierbares Element im Inhalt vorhanden). */
  outline: none;
}
.prefs-modal-panel h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--text);
}

/* Kleines X oben rechts, optional - nur fuer Modals ohne dedizierten
   Abbrechen/Schliessen-Button im Footer (z.B. Bildquelle, Nachfrage-Modal). */
.modal-close-btn {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}
.modal-close-btn:hover { background: rgba(255,255,255,.08); color: var(--text); }
.prefs-modal-panel.has-close-btn { position: relative; padding-right: 2.4rem; }

/* Nur fuer Screenreader sichtbar, z.B. <label> ohne sichtbaren Platz im Layout. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}