/* ==========================================================================
   responsive.css – Optimierung für PC, Tablet und Handy (df2qz011)
   Wird NACH template.css geladen und überschreibt nur, was nötig ist.
   ========================================================================== */

/* ---------- Basis ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; overflow-wrap: break-word; }

img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }

/* Tabellen und Code dürfen scrollen statt die Seite zu sprengen */
#ttr_content table { max-width: 100%; }
#ttr_content pre { max-width: 100%; overflow-x: auto; }

/* Iframes (z. B. YouTube, Karten) */
#ttr_content iframe { max-width: 100%; }

/* "Back to top"-Button: auf dem Handy kleiner, nicht im Weg */
.back-to-top img { max-width: 40px; height: auto; }

/* Hintergrundbild: iOS/Android ruckeln bei background-attachment: fixed */
@media (max-width: 991px), (hover: none) {
  body { background-attachment: scroll; }
}

/* ---------- Header (Desktop bleibt unverändert, ab 992px greift template.css) ---------- */
@media (max-width: 991px) {

  /* Header: feste 250px + absolute Positionierung funktionieren mobil nicht */
  #ttr_header_inner {
    height: auto !important;
    min-height: 130px;
    padding: 1rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left !important;
    background-size: cover !important;
    background-position: 75% center !important;
  }

  .ttr_title_position,
  .ttr_slogan_position {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto;
    max-width: 100%;
  }

  /* Rufzeichen skaliert fließend: 48px (Handy) bis 100px (Tablet) */
  header#ttr_header .ttr_title_style,
  header#ttr_header .ttr_title_style a,
  header#ttr_header .ttr_title_style a:link,
  header#ttr_header .ttr_title_style a:visited,
  header#ttr_header .ttr_title_style a:hover {
    font-size: clamp(48px, 14vw, 100px) !important;
    line-height: 1.05;
    text-align: left !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
  }

  header#ttr_header .ttr_slogan_style {
    font-size: clamp(14px, 3.6vw, 28px) !important;
    line-height: 1.25;
    text-align: left !important;
    margin-top: .25rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
  }

  /* Logo-Container liegt absolut über dem Header – nicht klickbar blockieren */
  #ttr_header .ttr_images_container { pointer-events: none; }
  #ttr_header .ttr_images_container a { pointer-events: auto; }
}

/* ---------- Layout: Inhalt + Sidebar ---------- */

/* Tablet: Sidebar 20% ist zu schmal → Sidebar unter den Inhalt, volle Breite */
@media (min-width: 768px) and (max-width: 991px) {
  #ttr_content,
  #ttr_sidebar_right {
    float: none !important;
    width: 100% !important;
  }
  #ttr_content_and_sidebar_container { display: block; }
}

/* Etwas angenehmere Spaltenaufteilung auf kleineren Laptops */
@media (min-width: 992px) and (max-width: 1199px) {
  #ttr_content { width: 75%; }
  #ttr_sidebar_right { width: 25%; }
}

/* Innenabstände: Inhalt klebt mobil sonst am Rand */
@media (max-width: 767px) {
  #ttr_content_margin,
  #ttr_sidebar_right_margin { padding-left: 12px; padding-right: 12px; }
  #ttr_page { margin-top: 0; }
}

/* ---------- Lesbarkeit ---------- */
@media (max-width: 767px) {
  body { font-size: 16px; }              /* verhindert Zoom bei Fokus in iOS */
  #ttr_content h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; }
  #ttr_content h2 { font-size: clamp(1.3rem, 5vw, 1.7rem); line-height: 1.25; }
  #ttr_content h3 { font-size: clamp(1.15rem, 4.4vw, 1.4rem); }
  #ttr_content p, #ttr_content li { line-height: 1.55; }
}

/* ---------- Navigation: Touch-Ziele ≥ 44px ---------- */
@media (max-width: 991px) {
  #nav-expander { min-height: 44px; min-width: 44px; padding: .5rem .9rem; }
  #ttr_menu .ttr_menu_items > li > a,
  #ttr_menu .dropdown-menu > li > a,
  #ttr_sidebar_right .ttr_vmenu_items li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    line-height: 1.3 !important;
  }
}

/* ---------- Formulare & Buttons ---------- */
@media (max-width: 767px) {
  input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="url"], input[type="tel"],
  input[type="number"], select, textarea {
    font-size: 16px !important;          /* kein Auto-Zoom auf iPhones */
    min-height: 44px;
    max-width: 100%;
  }
  .btn, button, input[type="submit"] { min-height: 44px; }
}

/* ---------- Tabellen im Artikel horizontal scrollbar ---------- */
@media (max-width: 767px) {
  #ttr_content .table-responsive,
  #ttr_content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Footer ---------- */
@media (max-width: 1199px) {
  footer#ttr_footer,
  #ttr_footer .container,
  .footer-widget-area_inner .ttr_footer-widget-area_inner_above0 {
    width: auto !important;
    max-width: 100% !important;
  }
  .ttr_footer_bottom_footer,
  .ttr_footer_bottom_footer_inner {
    height: auto !important;
    min-height: 60px;
    padding: 1rem;
  }
  .ttr_footer_bottom_footer .ttr_images_container {
    position: static;
  }
}

/* ---------- Bewegung reduzieren (Barrierefreiheit/Akku) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}