/* ============================================================
   responsive.css – Vollständige Mobile/Tablet Responsivität
   Höhere CSS-Spezifität via body-Präfix überschreibt alle
   seiten-spezifischen Inline-Styles sicher.
   ============================================================ */

/* ===== GLOBAL: Bilder skalieren immer mit ===== */
body img {
  max-width: 100%;
  height: auto;
}

/* Kein horizontaler Scroll ===== */
html, body {
  overflow-x: hidden;
}

/* ============================================================
   TABLET + MOBILE: alles unter 999px
   (5grid hat keine Breakpoints unter 1000px geladen)
   ============================================================ */
@media (max-width: 999px) {

  /* ===== 5grid-Layout Container: Fixbreite 1000px aufheben ===== */
  body .\35 grid-layout {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* ===== 5grid: Alle Spalten auf volle Breite stapeln ===== */
  body .\35 grid .\31 u,
  body .\35 grid .\32 u,
  body .\35 grid .\33 u,
  body .\35 grid .\34 u,
  body .\35 grid .\35 u,
  body .\35 grid .\36 u,
  body .\35 grid .\37 u,
  body .\35 grid .\38 u,
  body .\35 grid .\39 u,
  body .\35 grid .\31 0u,
  body .\35 grid .\31 1u,
  body .\35 grid .\31 2u {
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    box-sizing: border-box !important;
  }

  body .\35 grid {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Letztes Element kein Abstand unten */
  body .\35 grid > *:last-child {
    margin-bottom: 0 !important;
  }

  /* ===== Site-Header: Kein festes Maß, kein Abschneiden ===== */
  body #site-header {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 12px 0 14px !important;
    box-sizing: border-box !important;
  }

  body #site-header .inner {
    padding: 0 16px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  body #site-header .logo img {
    width: 260px !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  body #site-header h1 {
    font-size: 1.35rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-top: 0 !important;
    line-height: 1.25 !important;
  }

  /* ===== Old-Header (#header) ebenfalls responsiv ===== */
  body #header {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 14px 0 !important;
  }

  body #header h1 {
    font-size: 1.4rem !important;
  }

  /* ===== Alte Wrapper-Sektionen: Kein Overflow ===== */
  body #main-wrapper,
  body #banner-wrapper,
  body #featured-wrapper,
  body #footer-wrapper {
    overflow: visible !important;
  }

  /* ===== Sidebar: Unter den Inhalt ===== */
  body #sidebar {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ===== Inhalt-Boxen: Volle Breite ===== */
  body .content-box,
  body #content .content-box {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* ===== Tabellen: Horizontal scrollbar wenn nötig ===== */
  body table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   TABLET: 641px – 999px
   ============================================================ */
@media (min-width: 641px) and (max-width: 999px) {
  body #site-header .logo img {
    width: 320px !important;
  }

  body #site-header h1 {
    font-size: 1.55rem !important;
  }

}

/* ============================================================
   SMARTPHONE: bis 640px
   ============================================================ */
@media (max-width: 640px) {

  body #site-header .logo img {
    width: 200px !important;
    margin-left: 0 !important;
  }

  body #site-header h1 {
    font-size: 1.1rem !important;
  }

  /* ===== Navigation CTA verstecken wenn zu eng ===== */
  body #site-nav .inner {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  body #site-nav .nav-links {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ===== content-box Padding reduzieren ===== */
  body .content-box {
    padding: 16px !important;
  }

  /* ===== Style2 Sidebar-Liste ===== */
  body ul.style2 li {
    padding: 12px 0 !important;
  }
}