/* responsive-fix.css – Ergänzung für Vestia-Template (wird NACH template.css geladen) */

html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* Kein seitliches Wackeln auf dem Handy */
html, body { max-width: 100%; overflow-x: hidden; }

/* background-attachment:fixed ruckelt/funktioniert auf iOS & Android nicht sauber */
body { background-attachment: scroll !important; }

/* Medien nie breiter als der Bildschirm */
img, video, iframe, embed, object, svg { max-width: 100%; }
img { height: auto; }
#ttr_content, #ttr_content .ttr_post { overflow-wrap: break-word; word-wrap: break-word; }

/* Header-Bild: nicht mehr verzerren (vorher 100% 100%), sondern zuschneiden */
header #ttr_header_inner { background-size: cover; }

/* Zwischen 992 und 1099 px war der 1100-px-Container breiter als der Bildschirm */
@media screen and (min-width: 992px) {
  .container { max-width: 100%; }
}

/* Tablet & Handy */
@media only screen and (max-width: 767px) {
  #ttr_content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #ttr_content pre { overflow-x: auto; }

  /* Touch-Ziele ca. 44 px, Formularfelder 16 px (verhindert Zoom auf dem iPhone) */
  .navbar-toggle, .navbar-toggler, .nav > li > a, .ttr_menu_items li a { min-height: 44px; }
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="password"], input[type="number"], select, textarea { font-size: 16px; }

  /* Optional: Header auf dem Handy flacher machen (derzeit fest 348 px hoch).
     Zum Testen die Zeile aktivieren:
  header #ttr_header_inner { height: clamp(220px, 62vw, 348px); }
  */
}