/*
 * responsive-base.css — globale Sicherheitsregeln für JEDE Seite (Ben 06.10.2026)
 * In jedes Projekt einbinden (als erste eigene CSS-Datei bzw. in globals.css importieren).
 * Ändert am Desktop mit Maus nichts Sichtbares – greift nur bei Touch-Geräten bzw. schmalen Breiten.
 * Gegenstück zur Prüfung: `ben-responsive <url> --crawl` (muss vor jedem Deploy bestehen).
 */

/* 1. Nie seitlich überlaufen: Breite bezieht Rahmen/Abstände ein, Medien schrumpfen mit. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: anywhere; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* 2. Breite Tabellen scrollen in sich statt die Seite zu sprengen.
      Besser: am Handy als Karten zeigen (siehe ResponsiveList im Kit). */
.rb-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 3. Touch-Geräte: Felder mit 16 px Schrift (sonst zoomt iOS beim Antippen) und große Tippflächen. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em); }
  button, [role=button], select, input[type=submit], input[type=button],
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]) { min-height: 44px; }
  /* Häkchen/Optionen: Beschriftung als große Klickfläche */
  label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; }
  /* iOS: Datum/Uhrzeit-Felder haben eine feste Mindestbreite → überlappen in schmalen Spalten (07.10.2026) */
  input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
    -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; text-align: left;
  }
  /* Einzelne Navigations-/Knopf-Links (nicht Links im Fließtext) */
  nav a, a.button, a[role=button], .rb-tap { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 4. Fest positionierte Leisten respektieren iPhone-Ränder (Notch, Home-Balken). */
.rb-safe-bottom { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
.rb-safe-top { padding-top: max(.5rem, env(safe-area-inset-top)); }

/* 5. Bewegung reduzieren, wenn das Gerät es wünscht. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}