/* ============================================================
 * responsive-fixes-2026.css — Minimal-invasive Responsive-Fixes
 * ============================================================
 * WICHTIG: Enthält ausschließlich Regeln im Tablet-Range (<=960px)
 * oder body.no-sky/has-sky-Kontext.
 * Keine Desktop-Regeln (> 960 px) ausser explizit dokumentiert.
 * Keine globalen Typo-Änderungen.
 * Bleibt klein (< 200 Zeilen).
 * ============================================================
 *
 * Baseline-Defekte (aus artifacts/responsive-baseline/):
 *   61 hScroll-Defekte:
 *   - showcompany* x tablet (alle Banner-States, 60 Defekte):
 *     .content-inner fehlt max-width:100%; sc-outer-layout stapelt nicht
 *   - insider x tablet (3 Defekte): Tabelle 900px in 820px Viewport
 *   - finfluencer x tablet (3 Defekte): 8px Overflow, Inline-Element
 *   - termine x desktop: nicht-deterministisch (dynamisches JS-Widget)
 * ============================================================ */

/* ============================================================
 * Fix A: Content-inner Width-Constraint auf Tablet/Mobile
 *
 * Das bestehende @media (max-width:960px) in design2026.css setzt
 * .content auf flex-direction:column + align-items:center, aber
 * vergisst max-width:100% auf .content-inner. Das lässt .content-inner
 * auf seine intrinsische Breite (bis 1066px) aufgehen und zentriert
 * es in der 820px-Viewport → scrollWidth 943px.
 * ============================================================ */
@media (max-width: 960px) {
  .content-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
 * Fix B: Showcompany sc-outer-layout — vertikal stapeln auf Tablet
 *
 * .sc-outer-layout (sidebar 160px + gap 16px + main) bleibt auf
 * Tablet horizontal und presst .sc-main auf 612px, während Tabs
 * und Kurs-Bar 858px min-content benötigen.
 * Fix: layout auf Tablet auf column umschalten.
 * ============================================================ */
@media (max-width: 960px) {
  body.page-showcompany .sc-outer-layout {
    flex-direction: column;
  }
  body.page-showcompany .sc-sidebar {
    width: 100%;
    max-width: 100%;
  }
  body.page-showcompany .sc-main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto; /* Tabs/Kursbar können noch schmaler werden */
  }
  /* Tabs auf Tablet: horizontal scrollbar statt Überlauf ins Dokument */
  body.page-showcompany ul.tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    max-width: 100%;
  }
}

/* ============================================================
 * Fix C: Insider-Seite — Tabellen-Overflow auf Tablet
 *
 * .page-insider enthält eine 900px-Tabelle. Content-inner Fix A
 * begrenzt den Container, aber die Tabelle braucht overflow-x:auto.
 * ============================================================ */
@media (max-width: 960px) {
  .page-insider {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-insider table {
    min-width: max-content;
  }
}

/* ============================================================
 * Fix D: Sky-Right-Banner auf Tablet ausblenden
 *
 * design2026.css versteckt #right_ad bereits bei max-width:960px.
 * Zusätzlich werden hier alternative Selektoren abgedeckt.
 * ============================================================ */
@media (max-width: 960px) {
  #right_ad,
  #banner_sky_right,
  .banner-sky-right,
  .gba-banner-sky {
    display: none !important;
  }
}

/* ============================================================
 * Fix F: Footer #redbottom — Legacy Fixed Width Override
 *
 * menu_forum.css (geladen auf Showcompany-Unterseiten nach
 * diesem File) setzt #redbottom { width:894px; float:left }.
 * Auf Tablet (820px) verursacht das 74px hScroll.
 * !important überwindet das spätere Laden von menu_forum.css.
 * ============================================================ */
#redbottom {
  width: auto !important;
  float: none !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
 * Fix G: Termine-side — 3rd-party iframe max-width
 *
 * sslecal2.forexprostools.com iframe hat hardcoded width="650",
 * aber .termine-side ist nur 340px breit (overflow:visible).
 * Im no-sky-Zustand am Desktop schiebt das Grid .termine-side
 * weit nach rechts → iframe-Rechtsseite bei 1718px.
 * max-width:100% beschränkt den iframe auf Container-Breite.
 * ============================================================ */
.termine-side iframe {
  max-width: 100%;
}

/* ============================================================
 * Fix E: Tablet Padding-Reclaim
 *
 * design2026.css setzt .content-inner { padding: 10px 16px 0 }
 * bei max-width:960px. Auf Mobile (<=600px) brauchen wir noch
 * weniger Seitabstand.
 * v2 (2026-04-24): Seitenpadding 8px → 3px nach User-Feedback
 * „Zu große seitliche Abstände" (mobile-2026.css §20 setzt das
 * gleiche — hier zusätzlich, weil diese Datei nachgeladen wird
 * und sonst die §20-Regel überschreiben würde).
 * ============================================================ */
@media (max-width: 600px) {
  .content-inner {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}