/*
 * TOOWIE LAYOUT-SYSTEM
 *
 * Eine gemeinsame horizontale Inhaltskante fuer Hero und Seitenabschnitte.
 * Der Hintergrund eines Abschnitts darf volle Breite haben; nur der eigentliche
 * Seiteninhalt sitzt in der gemeinsamen Shell.
 */

.layout-shell {
  --layout-shell-max: 1440px;
  --layout-shell-gutter: clamp(18px, 2.5vw, 24px);

  box-sizing: border-box !important;
  width: min(
    var(--layout-shell-max),
    calc(100% - (2 * var(--layout-shell-gutter)))
  ) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/*
 * IT-Betreuung ist bereits auf das neue System migriert.
 * Dieser Scope ist absichtlich spezifischer als die alten !important-Regeln
 * aus tech-mobile-layout.css, damit Hero und alle Folgeabschnitte garantiert
 * dieselbe linke und rechte Kante benutzen.
 */
#it-betreuung-page main :is(
  .page-hero.tech-service-hero,
  #themen.service-phase-section,
  .service-feature-section
) {
  padding-inline: 0 !important;
}

#it-betreuung-page main :is(
  .page-hero.tech-service-hero,
  #themen.service-phase-section,
  .service-feature-section
) > .layout-shell {
  --layout-shell-max: 1440px;
  --layout-shell-gutter: clamp(18px, 2.5vw, 24px);

  box-sizing: border-box !important;
  width: min(
    var(--layout-shell-max),
    calc(100% - (2 * var(--layout-shell-gutter)))
  ) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}