/* ============================================================
   MOBILE-FIX: Blog-Content + Wallbox overflow auf 390px
   Re-Test #3 fand 54 Blog-Pages mit 166 fixed-width Styles
   Plus /wallbox.html separate hScroll
   ============================================================ */
@media (max-width: 768px) {
  .blog-post-content [style*="width:"]:not([style*="width:auto"]):not([style*="width:100%"]):not([style*="width:fit"]):not([style*="width:max"]),
  article [style*="width:"]:not([style*="width:auto"]):not([style*="width:100"]),
  main [style*="width:"]:not(svg):not([style*="width:100"]):not([style*="width:auto"]),
  .wallbox-page [style*="width:"]:not([style*="width:100"]):not([style*="width:auto"]) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  .blog-post-content img,
  .blog-post-content table,
  .blog-post-content figure,
  .blog-post-content video,
  .blog-post-content iframe,
  .blog-post-content pre {
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box;
  }
  .blog-post-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .blog-post-content pre,
  .blog-post-content code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  /* Allgemeiner Schutz */
  body { overflow-x: hidden; }
}

/* ============================================================
   FIX-ROUND 2 — 2026-05-27
   v12-orb, Tabellen, Top-Banner, allgemeine Mobile-Hygiene
   Audit-Findings: /wallbox.html 136px, foerderung-bafa 99px,
   balkonkraftwerk-2026 83px, wallbox-bad-pyrmont 66px,
   klimaanlage-bad-pyrmont 65px + Top-Banner 11.52px (zu klein)
   ============================================================ */
@media (max-width: 768px) {
  /* v12-orb Decoration-Divs — verstecken oder clampen */
  .v12-orb,
  [class*="v12-orb"],
  .decoration-orb,
  [class*="decoration-orb"] {
    max-width: 100vw !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    overflow: hidden;
  }
  /* FIX-A 2026-05-28: Orb-Container (position:fixed;inset:0) clippen.
     Die orbs sind position:absolute mit left:-100px / right:-150px und
     ragen aus dem fixed-Container → overflow:hidden am Container
     schneidet sie sauber am Viewport-Rand ab (Animation bleibt sichtbar,
     kein hScroll). Container ist exakt viewport-gross, daher unkritisch. */
  .v12-animated-bg,
  .v12-light-orbs {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  /* Tabellen: wrap mit overflow-x:auto wenn noetig */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-collapse: collapse;
  }
  table th,
  table td {
    min-width: auto !important;
    white-space: normal !important;
    word-wrap: break-word;
  }

  /* ----------------------------------------------------------------
     FIX-A + FIX-B 2026-05-28 — Tabellen-Scroll-Wrapper greift wirklich
     ------------------------------------------------------------------
     Problem: .wb-spec-table (wallbox.html) liegt in .table-scroll-wrapper
     und .v12-comp-table (foerderung/photovoltaik.html) in einem
     <div style="overflow-x:auto"> OHNE max-width. Ohne begrenzte
     Wrapper-Breite scrollt nichts — die Tabelle (560px / 422-432px)
     sprengt den 390px-Viewport.
     Fix: Wrapper = harte Scroll-Box (max-width:100%), Tabelle behaelt
     ihre natuerliche Breite (min-width:max-content) und scrollt INNEN.
     ---------------------------------------------------------------- */
  .table-scroll-wrapper,
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"] {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  /* Tabelle IM Wrapper: nicht block-shrinken, sondern natuerlich breit
     bleiben (display:table) damit der WRAPPER scrollt statt zu clippen.
     Wichtig: !important schlaegt die generische table-block-Regel oben. */
  .table-scroll-wrapper > table,
  [style*="overflow-x:auto"] > table,
  [style*="overflow-x: auto"] > table,
  .table-scroll-wrapper > .wb-spec-table,
  [style*="overflow-x:auto"] > .v12-comp-table,
  [style*="overflow-x: auto"] > .v12-comp-table {
    display: table !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow-x: visible !important;
  }
  /* Vergleichs-/Spec-Tabellen OHNE eigenen Scroll-Wrapper: Tabelle selbst
     wird zur Scroll-Box. (Wenn sie in einem Wrapper liegen, gewinnt die
     spezifischere Regel oben mit display:table.) */
  .wb-spec-table,
  .v12-comp-table,
  .spec-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Top-Banner Schrift min 14px */
  .top-cta-bar,
  .top-banner,
  [class*="top-banner"],
  [class*="top-cta"] {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .top-cta-bar > *,
  .top-banner > * {
    font-size: 14px !important;
  }
  /* Allgemeiner Mobile-Schutz: NICHTS darf breiter als viewport sein */
  body > *,
  main > *,
  article > *,
  section > * {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* Aber NICHT auf html (Pierre Memory feedback_overflow_touch.md) */
  /* Touch-Target Minimum fuer alle interactive elements */
  a[href],
  button,
  input[type="button"],
  input[type="submit"],
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Footer-Links extra check */
  footer a,
  footer button {
    padding: 12px 8px !important;
    min-height: 44px;
    display: inline-block;
  }
}