/* ============================================================
   ROWOS – Handy-Optimierung für die ganze Website
   Wird über /backend/mobil_check.php auf allen Seiten eingebunden.
   Greift nur bis 820 px Breite und fasst das Design am Rechner nicht an.
   ============================================================ */

/* ── Gilt überall: nichts darf seitlich aus der Seite laufen ── */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
img, video, iframe, embed, object, canvas, svg {
  max-width: 100%;
  height: auto;
}
img[width][height] { height: auto; }

@media (max-width: 820px) {

  /* ── Grundlagen ───────────────────────────────────────── */
  body { -webkit-text-size-adjust: 100%; }

  /* Lange Wörter, Mailadressen und Links umbrechen statt überstehen */
  p, li, td, th, dd, dt, figcaption, blockquote, label, a, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  a[href^="mailto:"], a[href^="http"], code, pre {
    overflow-wrap: anywhere;
  }
  pre { overflow-x: auto; }

  /* ── Tabellen: seitlich scrollbar statt die Seite zu sprengen ── */
  .table-responsive, .tabelle-scroll { -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }
  table:not(.table-responsive table):not(.vm-table) { display: block; overflow-x: auto; white-space: nowrap; }

  /* ── Eingabefelder: kein Zoom beim Antippen auf dem iPhone ── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea, button {
    font-size: 16px;
    max-width: 100%;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea {
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Tippflächen groß genug ───────────────────────────── */
  button, .btn, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  nav a, .nav-link, footer a { padding-top: 6px; padding-bottom: 6px; display: inline-block; }

  /* ── Abstände und Schriftgrößen entschärfen ───────────── */
  h1 { font-size: clamp(1.75rem, 7.5vw, 2.4rem); line-height: 1.15; }
  h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: 1.2; }
  h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .display-1, .display-2, .display-3, .display-4 { font-size: clamp(1.9rem, 8vw, 2.6rem); }

  .container, .container-fluid, .wrap, .inner {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  }

  /* ── Feste Breiten, die am Handy nie passen ───────────── */
  [style*="width:"][style*="px"], [width] { max-width: 100%; }

  /* ── Mehrspaltiges wird einspaltig, wenn es zu eng wird ── */
  .row > [class*="col-"] { min-width: 0; }   /* Bootstrap: Inhalt darf schrumpfen */
  .grid-2, .grid-3, .grid-4, .zwei-spalten, .drei-spalten { grid-template-columns: 1fr !important; }

  /* ── Karten und Kacheln ───────────────────────────────── */
  .card, .box, .kachel, .tile { max-width: 100%; }
}

/* ── Sehr schmale Geräte (iPhone SE und kleiner) ────────── */
@media (max-width: 380px) {
  .container, .container-fluid, .wrap, .inner { padding-left: 13px; padding-right: 13px; }
  h1 { font-size: 1.65rem; }
}

/* ── Querformat auf dem Handy: Kopfbereiche nicht bildschirmhoch ── */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) {
  .hero, .page-hero, .ko-hero, .og-hero { min-height: 0 !important; padding-top: 28px; padding-bottom: 32px; }
}

/* ── Für Leute, die Animationen abgeschaltet haben ──────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}