/* ============================================================
   browser-compat.css — Browser- und Mobile-Optimierungen
   ============================================================
   Bewusst OHNE Build-Schritt: Das Projekt wird als Zip ausgeliefert,
   es gibt kein Autoprefixer/PostCSS. Alles hier ist handgeschrieben
   und wird von der Test-Suite geprueft.

   Abgedeckt:
     1. Touch (Tap-Verzoegerung, Highlight, Scrollen)
     2. iOS-Safari-Eigenheiten (Adressleiste, Zoom, Safe-Area)
     3. Formularfelder auf Mobilgeraeten
     4. Bewegung reduzieren (Barrierefreiheit)
     5. Konsistentes Box-Modell und Schriftglaettung
   ============================================================ */

/* ── 1. Grundlagen ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS: kein Auto-Zoom im Querformat */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;  /* kein blauer Kasten beim Tippen */
}

body {
  -webkit-font-smoothing: antialiased;      /* saubere Schrift auf macOS/iOS */
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;              /* kein Ueberziehen/Pull-to-Refresh */
}

/* ── 2. Touch-Ziele und Tap-Verhalten ───────────────────── */
/* touch-action: manipulation entfernt die 300ms-Verzoegerung beim Tippen,
   die aeltere Browser fuer den Doppeltipp-Zoom reservieren. Ohne das fuehlt
   sich JEDER Klick auf dem Handy traege an. */
a, button, [role="button"], input[type="submit"],
.sb-link, .blp-btn, .blp-sw-btn, .fw-btn, .kl-btn, .mp-btn,
.hdr-search-btn, .theme-toggle-btn, .lang-switch-btn, .ssn-mob-toggle {
  touch-action: manipulation;
}

/* Mindestgroesse fuer Touch-Ziele (Empfehlung: 44x44 px).
   Gilt nur auf Zeigegeraeten ohne feine Steuerung -> Maus bleibt unberuehrt. */
@media (hover: none) and (pointer: coarse) {
  .sb-link, .blp-sw-btn, .blp-btn,
  .theme-toggle-btn, .lang-switch-btn, .hdr-search-btn {
    min-height: 44px;
  }
  .blp-pl-item { min-height: 44px; }
}

/* ── 3. Formulare auf Mobilgeraeten ─────────────────────── */
/* iOS zoomt automatisch hinein, wenn ein Eingabefeld kleiner als 16px ist.
   Das verschiebt das Layout und wirkt wie ein Fehler. */
input, select, textarea, button {
  font-family: inherit;
  font-size: max(16px, 1em);
}
input, textarea, select {
  -webkit-appearance: none;      /* iOS: eigene Rundungen/Schatten entfernen */
  appearance: none;
  border-radius: inherit;
}
/* Ausnahme: Umschalter/Checkboxen sollen ihr Systemaussehen behalten */
input[type="checkbox"], input[type="radio"], input[type="range"] {
  -webkit-appearance: auto;
  appearance: auto;
}

/* ── 4. Scrollen ────────────────────────────────────────── */
.blp-pl-list, .fw-matrix-scroll, .ssn-nav, .shared-sidenav {
  -webkit-overflow-scrolling: touch;   /* Schwung-Scrollen auf aelterem iOS */
}
/* Waagerecht scrollbare Bereiche: nicht die ganze Seite mitziehen */
.fw-matrix-scroll { overscroll-behavior-x: contain; }

/* ── 5. iOS: Safe Area (Notch / Home-Indikator) ─────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  #bl-audio-player {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .shared-sidenav {
    padding-left: env(safe-area-inset-left);
  }
}

/* ── 6. Bewegung reduzieren ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 7. Bilder ──────────────────────────────────────────── */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ── 8. Druck ───────────────────────────────────────────── */
@media print {
  .shared-sidenav, #bl-audio-player, .ssn-topbar,
  #bl-search-overlay, .ssn-mob-toggle { display: none !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}