/* ============================================================
   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 ===== */
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 (Header/Nav + 5grid-Spalten)
   ============================================================ */
@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;
  }

  /* ===== Nav-Buttons kompakter auf Tablet ===== */
  body #site-nav .nav-links a {
    font-size: 14px !important;
    padding: 6px 10px !important;
  }

  /* ===== 5grid: Sidebar + Inhalt auf Tablet nebeneinander halten =====
     Überschreibt core-mobile.css (Spezifität 0,2,0 = 20) mit 0,2,1 = 21.
     Preisspalten (#banner .row > .4u, Spezifität 1,2,0 = 120) bleiben flex. */
  body [class~="5grid"] [class~="4u"] {
    float: left !important;
    width: 30% !important;
    margin: 1% 0 1% 2% !important;
    box-sizing: border-box !important;
  }
  body [class~="5grid"] [class~="8u"] {
    float: left !important;
    width: 64% !important;
    margin: 1% 0 1% 2% !important;
    box-sizing: border-box !important;
  }
  /* Clearfix für .row (core-desktop.css lädt auf Tablet nicht) */
  body [class~="5grid"] .row::after {
    content: '' !important;
    display: block !important;
    clear: both !important;
    height: 0 !important;
  }
}

/* ============================================================
   TOUCH-OPTIMIERUNG: Accordion-Kacheln auf iOS/Android
   touch-action: manipulation entfernt den 300ms-Tap-Delay
   (iOS setzt ihn, wenn init.js maximum-scale=1.0 einträgt)
   ============================================================ */
.faq-card,
.content-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   PREISSPALTEN — Tablet + Desktop: 3 Spalten nebeneinander
   Kein Breakpoint-Limit nach oben: gilt für ALLE Viewports,
   Portrait UND Querformat, unabhängig von init.js-Viewport.
   [class~="4u"] = Attribut-Selektor, kein CSS-Escape nötig,
   100% browserkompatibel.
   Spezifität #banner .row > [class~="4u"] = (1,2,0) = 120
   >> core-mobile.css Spezifität (0,2,0) = 20 → gewinnt immer.
   ============================================================ */
#banner .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
#banner .row::after {
  display: none !important;
}
#banner .row > [class~="4u"] {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 34% !important;
  float: none !important;
  width: auto !important;
  margin: 0 1% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#banner .row > [class~="4u"]:first-child {
  margin-left: 0 !important;
}
#banner .row > [class~="4u"]:last-child {
  margin-right: 0 !important;
}

/* ============================================================
   FAQ-RASTER: 1 Spalte auf Tablet + Smartphone
   index.html hat diese Regel inline — hier für alle anderen Seiten
   ============================================================ */
@media (max-width: 999px) {
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SMARTPHONE-AUSNAHME: Preisspalten wieder stapeln
   Gilt bis 767px — deckt Portrait UND Querformat auf Handys ab.
   Spezifität body #banner .row > [class~="4u"] = (1,2,1) = 121
   > globale Regel (1,2,0) = 120 → Ausnahme gewinnt auf Handy.
   ============================================================ */
@media (max-width: 767px) {
  body #banner .row {
    display: block !important;
    overflow: visible !important;
  }
  body #banner .row > [class~="4u"] {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 16px 0 !important;
  }
}

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

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

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

  /* ===== Navigation: Buttons kompakt wrappen ===== */
  body #site-nav .inner {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 6px 10px !important;
    gap: 4px !important;
  }

  body #site-nav .nav-links {
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }

  body #site-nav .nav-links a {
    font-size: 13px !important;
    padding: 5px 9px !important;
    min-height: 36px !important;
  }

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

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