/* mobile.css – Styles NUR für kleine Bildschirme und Touch-Geräte. */

/* Safe Areas: Toast über dem Home-Indicator halten (0 auf Geräten ohne Notch) */
.toast { bottom: calc(26px + env(safe-area-inset-bottom)) }

/* Touch-Geräte (unabhängig von der Breite, greift auch auf Tablets):
   unsichtbar vergrößerte Tippflächen – Optik bleibt unverändert */
@media (pointer: coarse) {

  .dpnav, .calhead .nav, .dddel { position: relative }

  /* Pfeile: 32/36px sichtbar -> ~48px tippbar */
  .dpnav::after, .calhead .nav::after {
    content: "";
    position: absolute;
    inset: -8px;
  }

  /* Löschen-✕: vertikal nur -6px, damit sich benachbarte Zeilen nicht überlappen */
  .dddel::after {
    content: "";
    position: absolute;
    inset: -6px -8px;
  }
}

@media (max-width: 480px) {

  /* kompaktere Abstände, damit bei 320px genug Inhaltsbreite bleibt */
  body {
    padding: 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .card { padding: 16px; border-radius: 16px }

  /* Einheit eintragen: Datum & Aktivität untereinander */
  .card-elevated .row { flex-direction: column; gap: 0 }

  /* Duell: weniger Lücke zwischen den Karten */
  .twin { gap: 32px }
}