/* ==========================================================================
   10 · Layout – Abschnitte, Zeilen, Raster
   Alle Seiten bestehen aus UX-Builder-Abschnitten mit der Klasse .eso-demo.
   Abstände kommen ausschließlich aus den Tokens in style.css:
   --eso-container, --eso-container-inner, --eso-section-y(-compact), --eso-hero-y
   ========================================================================== */

/* Abschnitt ------------------------------------------------------------- */
.section.eso-demo {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 1px solid var(--eso-border);
  color: var(--eso-text);
}
.section.eso-demo.demo-pad,
.section.eso-demo.demo-final {
  padding-top: var(--eso-section-y) !important;
  padding-bottom: var(--eso-section-y) !important;
}
.section.eso-demo.demo-compact {
  padding-top: var(--eso-section-y-compact) !important;
  padding-bottom: var(--eso-section-y-compact) !important;
}

/* Zeilen ---------------------------------------------------------------- */
.eso-demo .section-content > .row {
  width: 100% !important;
  max-width: var(--eso-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 40px !important;
}
.eso-demo .section-content > .row + .row { margin-top: 0; }
.eso-demo .row::before,
.eso-demo .row::after { display: none !important; }
.eso-demo .col { padding: 0; min-width: 0; }
.eso-demo .col-inner { margin: 0 !important; }

/* Abstand zwischen zwei Zeilen eines Abschnitts (z. B. Überschrift → Raster) */
.eso-demo .section-content > .row.demo-heading-gap,
.eso-demo .section-content > .row.demo-row-gap { margin-top: 56px !important; }

/* Breadcrumb- und Hero-Zeilen ------------------------------------------ */
.eso-demo .section-content > .row.demo-breadcrumb-row { padding-top: 32px !important; }
.eso-demo .section-content > .row.demo-hero-row,
.eso-demo .section-content > .row.demo-plain-hero {
  padding-top: var(--eso-hero-y) !important;
  padding-bottom: var(--eso-hero-y) !important;
}
.eso-demo .section-content > .row.demo-breadcrumb-row + .row.demo-hero-row,
.eso-demo .section-content > .row.demo-breadcrumb-row + .row.demo-plain-hero {
  padding-top: calc(var(--eso-hero-y) * .6) !important;
}

/* Hero: Text + Bild, 50/50 */
.eso-demo .demo-hero-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 48px;
  align-items: center;
}
.eso-demo .demo-hero-row > .col { max-width: none !important; flex-basis: auto !important; }
.eso-demo .demo-hero-copy,
.eso-demo .demo-hero-image { grid-column: span 6; }
.eso-demo .demo-plain-hero > .col { max-width: 900px; }

/* Text + Bild (Split), optional Bild rechts mit .demo-reverse */
.eso-demo .demo-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}
.eso-demo .demo-split.demo-align-top { align-items: start; }
.eso-demo .demo-split > .col { max-width: none; flex-basis: auto; }
.eso-demo .demo-split.demo-reverse > .col:first-child { order: 2; }
.eso-demo .demo-split.demo-reverse > .col:last-child { order: 1; }

/* Zeile mit Überschrift links und Button rechts */
.eso-demo .demo-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}
.eso-demo .demo-heading-row > .col { max-width: none; flex-basis: auto; width: auto; }
.eso-demo .demo-heading-row > .col:last-child > .col-inner { text-align: right; }
.eso-demo .demo-heading-row .button { margin: 0; white-space: nowrap; }

/* Reiner Textblock in Lesebreite */
.eso-demo .demo-text-only { display: block; }
.eso-demo .demo-text-only > .col { max-width: 820px !important; }

/* Raster, die bündig zur Inhaltsbreite stehen (Karten, Kennzahlen, Zellen) */
.eso-demo .section-content > .row.demo-card-grid,
.eso-demo .section-content > .row.demo-figures,
.eso-demo .section-content > .row.demo-gsm-figures,
.eso-demo .section-content > .row.demo-benefit-cells,
.eso-demo .section-content > .row.demo-katalog-steps {
  width: calc(100% - 80px) !important;
  max-width: var(--eso-container-inner) !important;
  padding: 0 !important;
  margin-top: 48px !important;
}
.eso-demo .col-inner > .row.demo-card-grid,
.eso-demo .col-inner > .row.demo-figures,
.eso-demo .col-inner > .row.demo-gsm-figures {
  width: 100% !important;
  max-width: none !important;
  margin: 48px 0 0 !important;
  padding: 0 !important;
}

/* Tablet ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .eso-demo .section-content > .row { padding-left: 24px !important; padding-right: 24px !important; }
  .eso-demo .demo-hero-row { grid-template-columns: 1fr; }
  .eso-demo .demo-hero-copy,
  .eso-demo .demo-hero-image { grid-column: auto; }
  .eso-demo .demo-split { grid-template-columns: 1fr; gap: 48px; }
  .eso-demo .demo-split.demo-reverse > .col:first-child,
  .eso-demo .demo-split.demo-reverse > .col:last-child { order: initial; }
  .eso-demo .section-content > .row.demo-card-grid,
  .eso-demo .section-content > .row.demo-figures,
  .eso-demo .section-content > .row.demo-gsm-figures,
  .eso-demo .section-content > .row.demo-benefit-cells,
  .eso-demo .section-content > .row.demo-katalog-steps { width: calc(100% - 48px) !important; }
}

/* Mobil ----------------------------------------------------------------- */
@media (max-width: 767px) {
  .eso-demo .demo-heading-row { grid-template-columns: 1fr; gap: 24px; }
  .eso-demo .demo-heading-row > .col:last-child > .col-inner { text-align: left; }
}
@media (max-width: 639px) {
  .eso-demo .section-content > .row { padding-left: 16px !important; padding-right: 16px !important; }
  .eso-demo .section-content > .row.demo-card-grid,
  .eso-demo .section-content > .row.demo-figures,
  .eso-demo .section-content > .row.demo-gsm-figures,
  .eso-demo .section-content > .row.demo-benefit-cells,
  .eso-demo .section-content > .row.demo-katalog-steps { width: calc(100% - 32px) !important; }
}

/* Aliase einzelner Seiten (gleiche Bausteine, ältere Klassennamen im Inhalt) */
.eso-demo .demo-split.demo-gsm-reverse > .col:first-child { order: 2; }
.eso-demo .demo-split.demo-gsm-reverse > .col:last-child { order: 1; }
.eso-demo .demo-hero-row > .demo-katalog-hero-image { grid-column: span 6; }
.eso-demo .demo-products-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}
.eso-demo .demo-products-heading > .col { max-width: none; flex-basis: auto; width: auto; }
.eso-demo .demo-products-heading-cta > .col-inner { text-align: right; }
.eso-demo .demo-products-heading-cta .button { margin: 0; white-space: nowrap; }
/* Kartenraster als einzige/erste Zeile eines Abschnitts: kein Abstand oben */
.eso-demo .section-content > .row.demo-card-grid:first-child { margin-top: 0 !important; }
@media (max-width: 1023px) {
  .eso-demo .demo-split.demo-gsm-reverse > .col:first-child,
  .eso-demo .demo-split.demo-gsm-reverse > .col:last-child { order: initial; }
  .eso-demo .demo-hero-row > .demo-katalog-hero-image { grid-column: auto; }
}
@media (max-width: 767px) {
  .eso-demo .demo-products-heading { grid-template-columns: 1fr; gap: 24px; }
  .eso-demo .demo-products-heading-cta > .col-inner { text-align: left; }
}