/* iPhone mit Dynamic Island / Notch: Die App vom Home-Bildschirm läuft im Vollbild mit durchsichtiger Statusleiste
   (viewport-fit=cover). Damit nichts unter Uhrzeit, Insel oder Akku-Anzeige liegt, rücken Kopfzeile, Vollbild-Fenster
   und Dialoge um den sicheren Bereich nach unten (und im Querformat zur Seite). Am PC sind alle Werte 0.
   Muss als letzte CSS-Datei geladen werden. */
:root { --sat: env(safe-area-inset-top, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }

.app { grid-template-rows: calc(58px + var(--sat)) minmax(0, 1fr); }
.topbar { padding-top: var(--sat); padding-left: max(14px, var(--sal)); padding-right: max(16px, var(--sar)); }

@media (max-width: 860px) {
  .app { grid-template-rows: calc(52px + var(--sat)) minmax(0, 1fr) auto; }
  .topbar { padding-left: max(12px, var(--sal)); padding-right: max(8px, var(--sar)); }
  .tabbar { padding-left: max(4px, var(--sal)); padding-right: max(4px, var(--sar)); }

  /* Leadliste und Lead-Details füllen am Handy den ganzen Bildschirm: oben Platz für die Statusleiste lassen */
  .lead-overlay, .list-overlay { padding-top: var(--sat); background: var(--rail); }

  /* Dialoge kommen von unten – nie höher als bis knapp unter die Statusleiste */
  .overlay { padding-top: calc(8px + var(--sat)); }
  .modal, .modal-wide, .modal.cd-modal, .modal.s3-editor, .modal.s3-fileview, .modal.vi-modal.vi-full { max-height: calc(100dvh - 8px - var(--sat)); }
  .modal.cd-modal, .modal.s3-fileview { height: calc(100dvh - 8px - var(--sat)); }

  .login-art { padding-top: calc(28px + var(--sat)); }
}