/* ============================================================
   CLXON24 – Einheitliche Seitenbreite (site-wide)
   Eine Spalte: --site-max (1280px), zentriert, gleiches Padding
   ============================================================ */

:root {
  --site-max: 1280px;
  --max: var(--site-max);
  --content-pad: var(--pad);
}

/* Top-Strip: volle Breite Hintergrund, Inhalt wie Header (1280px) */
.top-strip {
  display: block;
  padding: 0;
  overflow: visible;
}

.top-strip-inner {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
  padding: 6px var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.top-strip-inner > a:not(.top-strip-link) {
  margin-left: auto;
}

/* Fallback ohne JS-Wrapper */
.top-strip:not(:has(.top-strip-inner)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px max(var(--pad), calc(50% - min(var(--site-max), 100%) / 2));
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Standard-Container – überall gleich */
.wrap,
.site-wrap,
.footer-inner {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
}

/* Volle Sektionsbreite nur für Hintergrund; Inhalt in .wrap */
.premium-section > .wrap,
.premium-section > .material-section__inner,
.shop-layout > .wrap,
.cart-page,
.checkout-wrap {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
}

.checkout-wrap {
  max-width: none;
}

.material-section__inner {
  max-width: none;
}

/* Unterseiten-Hero: gleiche Breite wie Rest der Site */
.page-hero > div {
  width: min(var(--site-max), 100%);
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Shop */
.shop-hero .wrap {
  max-width: none;
  width: min(var(--site-max), 100%);
}

/* Recht / Sidebar-Layout */
.content {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.content section {
  max-width: none;
}

/* Ratgeber-Hub ohne extra .wrap im Markup */
.rg-hub {
  padding-top: clamp(20px, 2.5vw, 32px);
  padding-bottom: clamp(28px, 3.5vw, 40px);
  padding-left: 0;
  padding-right: 0;
}

.rg-hub > .rg-intro,
.rg-hub > .rg-featured,
.rg-hub > .rg-grid {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
  padding-inline: var(--pad);
  box-sizing: border-box;
}

.rg-intro {
  max-width: none;
  margin-bottom: clamp(14px, 2vw, 20px);
}

.rg-facts-inner {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
  padding-inline: var(--pad);
  box-sizing: border-box;
}

/* Artikel: volle Containerbreite (Lesbarkeit über Zeilenlänge im Fließtext) */
.article-inner {
  max-width: none;
  width: min(var(--site-max), 100%);
  margin-inline: auto;
  padding-inline: var(--pad);
  box-sizing: border-box;
}

.article {
  padding-left: 0;
  padding-right: 0;
}

.article-inner p,
.article-inner li,
.article-lead {
  max-width: 65ch;
}

/* Homepage: keine schmalen Intro-Spalten */
.premium-section .page-head,
.premium-section .page-head--center,
.premium-section .faq-intro.page-head {
  max-width: none;
  width: 100%;
}

.premium-section.final-cta .wrap {
  max-width: none;
  width: 100%;
}

/* Sonstige alte Limits neutralisieren */
.seo-intro,
.intent-head {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
}

.category-ratgeber-lead {
  max-width: none;
}

.cart-hero-lead,
.checkout-section-lead {
  max-width: none;
}

@media (max-width: 720px) {
  .top-strip-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 5px var(--pad);
    min-height: 32px;
  }

  .top-strip-inner::-webkit-scrollbar {
    display: none;
  }

  .top-strip-inner > a:not(.top-strip-link) {
    margin-left: 0;
  }

  .content {
    width: 100%;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .article-inner {
    padding-inline: var(--pad);
  }

  .rg-hub > .rg-intro,
  .rg-hub > .rg-featured,
  .rg-hub > .rg-grid {
    padding-inline: var(--pad);
  }
}