/**
 * Solo #main-container – Werbung 300 | Content 1180 | Werbung 300.
 *
 * Responsive wie article-layout / st-content-layout:
 * - ≥ 1681px: drei Spalten (feste Tracks)
 * - ≤ 1680px: seitliche Werbung aus, nur Content (max. 1180px)
 *
 * active-main-N liegt auf #main-container (Solo-Standard).
 */

#sidebar-box-first,
#sidebar-box-second {
  max-width: var(--st-main-ad-column-max, 300px);
  width: 100%;
  min-width: 0;
}

#sidebar-box-main {
  max-width: var(--st-main-content-column-max, 1180px);
  width: 100%;
  min-width: 0;
}

/* Volles 3-Spalten-Layout nur wenn Viewport die Summe aufnehmen kann */
@media (min-width: 1681px) {
  #main-container.active-main-3 > #main-container-inner.solo-col,
  #main-container.active-main-3 > #main-container-inner.left-main-right,
  #main-container.active-main-3 > #main-container-inner.main-left-right,
  #main-container.active-main-3 > #main-container-inner.left-right-main,
  #main-container.active-main-3 > #main-container-inner.right-left-main,
  #main-container.active-main-3 > #main-container-inner.main-right-left {
    display: grid !important;
    grid-auto-flow: row;
    grid-template-columns:
      minmax(0, var(--st-main-ad-column-max, 300px))
      minmax(0, var(--st-main-content-column-max, 1180px))
      minmax(0, var(--st-main-ad-column-max, 300px)) !important;
    grid-template-areas: none !important;
    justify-content: center;
    gap: var(--solo-gap, 1rem);
    width: 100%;
    max-width: min(
      100%,
      calc(
        2 * var(--st-main-ad-column-max, 300px) + var(--st-main-content-column-max, 1180px)
          + 2 * var(--solo-gap, 1rem)
      )
    );
    margin-inline: auto;
    box-sizing: border-box;
  }

  #main-container.active-main-3 > #main-container-inner > #sidebar-box-first {
    display: block !important;
    grid-area: auto !important;
    grid-column: 1;
    grid-row: 1;
  }

  #main-container.active-main-3 > #main-container-inner > #sidebar-box-main {
    grid-area: auto !important;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  #main-container.active-main-3 > #main-container-inner > #sidebar-box-second {
    display: block !important;
    grid-area: auto !important;
    grid-column: 3;
    grid-row: 1;
  }
}

/* Unter 1681px: keine quetschten Werbe-Spalten – ausblenden (nicht skalieren) */
@media (max-width: 1680px) {
  #main-container.active-main-3 > #main-container-inner > #sidebar-box-first,
  #main-container.active-main-3 > #main-container-inner > #sidebar-box-second {
    display: none !important;
  }

  #main-container.active-main-3 > #main-container-inner.solo-col,
  #main-container.active-main-3 > #main-container-inner.left-main-right,
  #main-container.active-main-3 > #main-container-inner.main-left-right,
  #main-container.active-main-3 > #main-container-inner.left-right-main,
  #main-container.active-main-3 > #main-container-inner.right-left-main,
  #main-container.active-main-3 > #main-container-inner.main-right-left {
    display: grid !important;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    justify-content: center;
    width: 100%;
    max-width: min(100%, var(--st-main-content-column-max, 1180px));
    margin-inline: auto;
    box-sizing: border-box;
  }

  #main-container.active-main-3 > #main-container-inner > #sidebar-box-main {
    grid-column: 1 !important;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }
}

/* Startseite: seitliche Werbung früher aus (wie st-content-layout @ 1199px) */
@media (max-width: 1199px) {
  .path-frontpage #main-container.active-main-3 > #main-container-inner > #sidebar-box-first,
  .path-frontpage #main-container.active-main-3 > #main-container-inner > #sidebar-box-second,
  .page-wrapper.has-hero-page-bg #main-container.active-main-3 > #main-container-inner > #sidebar-box-first,
  .page-wrapper.has-hero-page-bg #main-container.active-main-3 > #main-container-inner > #sidebar-box-second {
    display: none !important;
  }
}

/* Startseite: Innenabstand Content-Spalte (fluid bis 110px @ 2056px vw) */
.path-frontpage #sidebar-box-main > .sidebar-box-main-inner,
.page-wrapper.has-hero-page-bg #sidebar-box-main > .sidebar-box-main-inner {
  padding: var(--st-main-content-padding, 110px) !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .path-frontpage #sidebar-box-main > .sidebar-box-main-inner,
  .page-wrapper.has-hero-page-bg #sidebar-box-main > .sidebar-box-main-inner {
    padding-inline: 20px !important;
  }
}