/*
 * DEPLA Theme: Seitenlayout, Container, Artikel-Optionen, Raster und Utility-Klassen
 * Klassenliste und Mapping alt zu neu: docs/build/utility-klassen.md
 * Klassen werden im Backend ins Feld "CSS-Klasse" (cssID) von Artikel oder Element eingetragen.
 */

/* ---------------------------------------------------------------------------
 * Container
 * ------------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

@media (max-width: 767px) {
  .container {
    padding-inline: var(--container-pad-mobile);
  }
}

/* ---------------------------------------------------------------------------
 * Seitenbereiche
 * ------------------------------------------------------------------------ */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1 0 auto;
}

/* ---------------------------------------------------------------------------
 * Artikel (Contao: <div class="mod_article block ...">)
 * Hintergrund laeuft immer ueber die volle Breite, der Inhalt sitzt per
 * Innenabstand in der Inhaltsbreite. So braucht es kein Wrapper-Template.
 * Standard (= Legacy fullwidth-boxed): Inhalt 1160px.
 * ------------------------------------------------------------------------ */

.mod_article {
  --article-content: var(--content-max);
  --article-pad: var(--container-pad);
  position: relative;
  padding-inline: max(var(--article-pad), (100% - var(--article-content)) / 2);
}

.mod_article.fullwidth {
  padding-inline: 0;
}

.mod_article.smallwidth,
.mod_article.fullwidth-boxed-medium {
  --article-content: var(--content-small);
}

.mod_article.xsmallwidth {
  --article-content: var(--content-xsmall);
}

@media (max-width: 767px) {
  .mod_article {
    --article-pad: var(--container-pad-mobile);
  }
}

/* Sektionsabstaende (Messwerte live, Eclipse-Logik):
 * Artikel ohne fullwidth haben standardmaessig 100px oben und unten, mit article-pt/-pb (ohne Groesse) ab 768px 160px.
 * Bei fullwidth wirken article-pt/-pb ohne Groesse nicht, nur die Groessen article-pt-xxs bis -xxl.
 * Mobil (bis 767px): Standard und alle Groessen 50px, -0 bleibt 0, fullwidth ohne Groesse 0. */
.mod_article:not(.fullwidth) {
  padding-top: var(--section-base);
  padding-bottom: var(--section-base);
}

@media (min-width: 768px) {
  .mod_article:not(.fullwidth).article-pt { padding-top: var(--section-default); }
  .mod_article:not(.fullwidth).article-pb { padding-bottom: var(--section-default); }
}

.mod_article.article-pt-0 { padding-top: 0; }
.mod_article.article-pt-xxs { padding-top: var(--section-xxs); }
.mod_article.article-pt-xs { padding-top: var(--section-xs); }
.mod_article.article-pt-s { padding-top: var(--section-s); }
.mod_article.article-pt-m { padding-top: var(--section-m); }
.mod_article.article-pt-l { padding-top: var(--section-l); }
.mod_article.article-pt-xl { padding-top: var(--section-xl); }
.mod_article.article-pt-xxl { padding-top: var(--section-xxl); }

.mod_article.article-pb-0 { padding-bottom: 0; }
.mod_article.article-pb-xxs { padding-bottom: var(--section-xxs); }
.mod_article.article-pb-xs { padding-bottom: var(--section-xs); }
.mod_article.article-pb-s { padding-bottom: var(--section-s); }
.mod_article.article-pb-m { padding-bottom: var(--section-m); }
.mod_article.article-pb-l { padding-bottom: var(--section-l); }
.mod_article.article-pb-xl { padding-bottom: var(--section-xl); }
.mod_article.article-pb-xxl { padding-bottom: var(--section-xxl); }

@media (max-width: 767px) {
  .mod_article:not(.fullwidth) {
    padding-top: var(--section-mobile);
    padding-bottom: var(--section-mobile);
  }

  .mod_article:is(.article-pt-xxs, .article-pt-xs, .article-pt-s, .article-pt-m, .article-pt-l, .article-pt-xl, .article-pt-xxl) {
    padding-top: var(--section-mobile);
  }

  .mod_article:is(.article-pb-xxs, .article-pb-xs, .article-pb-s, .article-pb-m, .article-pb-l, .article-pb-xl, .article-pb-xxl) {
    padding-bottom: var(--section-mobile);
  }

  .mod_article.article-pt-0 { padding-top: 0; }
  .mod_article.article-pb-0 { padding-bottom: 0; }
}

/* Artikel um 60px nach oben versetzt (Legacy-Template mod_article_offset_top), live ohne vertikalen Innenabstand */
.mod_article.article-offset-top {
  position: relative;
  top: calc(-1 * var(--article-offset-top));
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hero-Slot (Legacy-Spalte slider): Artikel-Innenabstaende wirken live nicht (G3 Patch 1, G4 Patch 4) */
.site-hero > .mod_article {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Innenabstaende fuer Elemente und Container: pt-* / pb-* (gleiche Skala) */
.pt-0, .pt-no { padding-top: 0 !important; }
.pt-xxs { padding-top: var(--section-xxs) !important; }
.pt-xs { padding-top: var(--section-xs) !important; }
.pt-s { padding-top: var(--section-s) !important; }
.pt-m { padding-top: var(--section-m) !important; }
.pt-l { padding-top: var(--section-l) !important; }
.pt-xl { padding-top: var(--section-xl) !important; }
.pt-xxl { padding-top: var(--section-xxl) !important; }

.pb-0, .pb-no { padding-bottom: 0 !important; }
.pb-xxs { padding-bottom: var(--section-xxs) !important; }
.pb-xs { padding-bottom: var(--section-xs) !important; }
.pb-s { padding-bottom: var(--section-s) !important; }
.pb-m { padding-bottom: var(--section-m) !important; }
.pb-l { padding-bottom: var(--section-l) !important; }
.pb-xl { padding-bottom: var(--section-xl) !important; }
.pb-xxl { padding-bottom: var(--section-xxl) !important; }

/* Tablet und Phone: eigene Skala wie live */
@media (min-width: 768px) and (max-width: 1024px) {
  .pt-xxs { padding-top: var(--pad-tablet-xxs) !important; }
  .pt-xs { padding-top: var(--pad-tablet-xs) !important; }
  .pt-s { padding-top: var(--pad-tablet-s) !important; }
  .pt-m { padding-top: var(--pad-tablet-m) !important; }
  .pt-l { padding-top: var(--pad-tablet-l) !important; }
  .pt-xl { padding-top: var(--pad-tablet-xl) !important; }
  .pt-xxl { padding-top: var(--pad-tablet-xxl) !important; }
  .pb-xxs { padding-bottom: var(--pad-tablet-xxs) !important; }
  .pb-xs { padding-bottom: var(--pad-tablet-xs) !important; }
  .pb-s { padding-bottom: var(--pad-tablet-s) !important; }
  .pb-m { padding-bottom: var(--pad-tablet-m) !important; }
  .pb-l { padding-bottom: var(--pad-tablet-l) !important; }
  .pb-xl { padding-bottom: var(--pad-tablet-xl) !important; }
  .pb-xxl { padding-bottom: var(--pad-tablet-xxl) !important; }
}

@media (max-width: 767px) {
  .pt-xxs { padding-top: var(--pad-phone-xxs) !important; }
  .pt-xs { padding-top: var(--pad-phone-xs) !important; }
  .pt-s { padding-top: var(--pad-phone-s) !important; }
  .pt-m { padding-top: var(--pad-phone-m) !important; }
  .pt-l { padding-top: var(--pad-phone-l) !important; }
  .pt-xl { padding-top: var(--pad-phone-xl) !important; }
  .pt-xxl { padding-top: var(--pad-phone-xxl) !important; }
  .pb-xxs { padding-bottom: var(--pad-phone-xxs) !important; }
  .pb-xs { padding-bottom: var(--pad-phone-xs) !important; }
  .pb-s { padding-bottom: var(--pad-phone-s) !important; }
  .pb-m { padding-bottom: var(--pad-phone-m) !important; }
  .pb-l { padding-bottom: var(--pad-phone-l) !important; }
  .pb-xl { padding-bottom: var(--pad-phone-xl) !important; }
  .pb-xxl { padding-bottom: var(--pad-phone-xxl) !important; }
}

/* ---------------------------------------------------------------------------
 * Hintergrund- und Textfarben (Artikel und Elemente)
 * ------------------------------------------------------------------------ */

.bg-white { background-color: var(--color-white); }
.bg-gray { background-color: var(--color-surface-muted); }
.bg-second { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-primary); }

/* Kinder per :where(): die Abschnittsfarbe vererbt sich auf Text, Ueberschriften und Links,
 * eigene Farben der Elemente (Klassen, Spezifitaet ab 0,1,0) gewinnen (G2 Patch 7). */
.color-white,
.color-white :where(h1, h2, h3, h4, h5, h6, p, li, a:not([class*='btn'])) {
  color: var(--color-white);
}

.color-accent,
.color-accent :where(h1, h2, h3, h4, h5, h6, p, li, a) {
  color: var(--color-primary);
}

.color-lightgray,
.color-lightgray :where(p, li) {
  color: var(--color-text-light);
}

.color-darkgray,
.color-darkgray :where(p, li) {
  color: var(--color-text-dark);
}

.color-gray,
.color-gray :where(h1, h2, h3, h4, h5, h6, p, li, a) {
  color: var(--color-text-gray);
}

/* Legacy color-white-trnp-50: live Weiss 80 % */
.color-white-50,
.color-white-50 :where(h1, h2, h3, h4, h5, h6, p, li, a:not([class*='btn'])) {
  color: var(--color-on-dark-strong);
}

.color-default {
  color: var(--color-text);
}

/* Trennlinie unten (Legacy bb-dark) */
.bb-dark {
  border-bottom: 1px solid var(--color-border-light);
}

/* ---------------------------------------------------------------------------
 * Elementabstaende mt-* / mb-* (Desktop und mobil) und Mobil-Varianten *-m
 * ------------------------------------------------------------------------ */

.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-xxs { margin-top: var(--space-xxs) !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-s { margin-top: var(--space-s) !important; }
.mt-m { margin-top: var(--space-m) !important; }
.mt-l { margin-top: var(--space-l) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mt-xxl { margin-top: var(--space-xxl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-xxs { margin-bottom: var(--space-xxs) !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-s { margin-bottom: var(--space-s) !important; }
.mb-m { margin-bottom: var(--space-m) !important; }
.mb-l { margin-bottom: var(--space-l) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.mb-xxl { margin-bottom: var(--space-xxl) !important; }

/* Tablet (768 bis 1024px) und Phone (bis 767px): kleinere Skala wie live; die Mobil-Klassen *-m folgen danach und gewinnen */
@media (min-width: 768px) and (max-width: 1024px) {
  .mt-xxs { margin-top: var(--space-tablet-xxs) !important; }
  .mt-xs { margin-top: var(--space-tablet-xs) !important; }
  .mt-s { margin-top: var(--space-tablet-s) !important; }
  .mt-m { margin-top: var(--space-tablet-m) !important; }
  .mt-l { margin-top: var(--space-tablet-l) !important; }
  .mt-xl { margin-top: var(--space-tablet-xl) !important; }
  .mt-xxl { margin-top: var(--space-tablet-xxl) !important; }
  .mb-xxs { margin-bottom: var(--space-tablet-xxs) !important; }
  .mb-xs { margin-bottom: var(--space-tablet-xs) !important; }
  .mb-s { margin-bottom: var(--space-tablet-s) !important; }
  .mb-m { margin-bottom: var(--space-tablet-m) !important; }
  .mb-l { margin-bottom: var(--space-tablet-l) !important; }
  .mb-xl { margin-bottom: var(--space-tablet-xl) !important; }
  .mb-xxl { margin-bottom: var(--space-tablet-xxl) !important; }
}

@media (max-width: 767px) {
  .mt-xxs { margin-top: var(--space-phone-xxs) !important; }
  .mt-xs { margin-top: var(--space-phone-xs) !important; }
  .mt-s { margin-top: var(--space-phone-s) !important; }
  .mt-m { margin-top: var(--space-phone-m) !important; }
  .mt-l { margin-top: var(--space-phone-l) !important; }
  .mt-xl { margin-top: var(--space-phone-xl) !important; }
  .mt-xxl { margin-top: var(--space-phone-xxl) !important; }
  .mb-xxs { margin-bottom: var(--space-phone-xxs) !important; }
  .mb-xs { margin-bottom: var(--space-phone-xs) !important; }
  .mb-s { margin-bottom: var(--space-phone-s) !important; }
  .mb-m { margin-bottom: var(--space-phone-m) !important; }
  .mb-l { margin-bottom: var(--space-phone-l) !important; }
  .mb-xl { margin-bottom: var(--space-phone-xl) !important; }
  .mb-xxl { margin-bottom: var(--space-phone-xxl) !important; }
}

@media (max-width: 767px) {
  .mt-no-m { margin-top: 0 !important; }
  .mb-no-m { margin-bottom: 0 !important; }
  .mt-0-m { margin-top: 0 !important; }
  .mt-xxs-m { margin-top: var(--space-xxs) !important; }
  .mt-xs-m { margin-top: var(--space-xs-mobile) !important; }
  .mt-m-m { margin-top: var(--space-m-mobile) !important; }
  .mt-l-m { margin-top: var(--space-l) !important; }
  .mt-xl-m { margin-top: var(--space-xl) !important; }
  .mt-xxl-m { margin-top: var(--space-xxl) !important; }

  .mb-0-m { margin-bottom: 0 !important; }
  .mb-xxs-m { margin-bottom: var(--space-xxs) !important; }
  .mb-xs-m { margin-bottom: var(--space-xs-mobile) !important; }
  .mb-m-m { margin-bottom: var(--space-m-mobile) !important; }
  .mb-l-m { margin-bottom: var(--space-l) !important; }
  .mb-xl-m { margin-bottom: var(--space-xl) !important; }
  .mb-xxl-m { margin-bottom: var(--space-xxl) !important; }
}

/* ---------------------------------------------------------------------------
 * Ausrichtung und Breite
 * ------------------------------------------------------------------------ */

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

.align-center :is(img, picture, figure) {
  margin-inline: auto;
}

.align-right :is(img, picture, figure) {
  margin-left: auto;
}

@media (max-width: 767px) {
  .align-left-m { text-align: left !important; }
  .align-center-m { text-align: center !important; }
  .align-right-m { text-align: right !important; }
}

/* Maximalbreite fuer Text und Ueberschriften (Legacy width-l), zentriert mit align-center */
.width-l { max-width: 700px; }
.width-l.align-center { margin-inline: auto; }

/* ---------------------------------------------------------------------------
 * Typografie fuer Fliesstext-Elemente (Legacy font-size-*, font_headline)
 * ------------------------------------------------------------------------ */

.lead-xxs { font-size: var(--fs-lead-xxs); line-height: var(--lh-base); }
.lead-xs { font-size: var(--fs-lead-xs); line-height: var(--lh-lead); }
.lead-s { font-size: var(--fs-lead-s); line-height: var(--lh-lead); }
.lead-m { font-size: var(--fs-lead-m); line-height: var(--lh-lead); }
.lead-l { font-size: var(--fs-lead-l); line-height: var(--lh-lead); }

@media (max-width: 767px) {
  .lead-xxs { font-size: var(--fs-lead-xxs-mobile); }
  .lead-xs { font-size: var(--fs-lead-xs-mobile); }
  .lead-s { font-size: var(--fs-lead-s-mobile); }
  .lead-m { font-size: var(--fs-lead-m-mobile); }
  .lead-l { font-size: var(--fs-lead-l-mobile); }
}

.font-heading,
.font-heading :is(p, li) {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------------------------
 * Sichtbarkeit
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * Raster: 12 Spalten, Gutter 30px, Tablet 768 bis 1024px, mobil 100%
 * <div class="grid"> mit Kindern .col-1 bis .col-12, optional .col-t-N (Tablet), .col-m-N (mobil)
 * Varianten: .gutter-none, .gutter-s (15px), .gutter-l (40px), .same-height
 * ------------------------------------------------------------------------ */

.grid {
  --grid-gap: var(--gutter-m);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
}

.grid > * {
  grid-column: span 12;
  min-width: 0;
}

.grid.gutter-none { --grid-gap: 0px; }
.grid.gutter-s { --grid-gap: var(--gutter); }
.grid.gutter-l { --grid-gap: var(--gutter-l); }

.grid.same-height > * > * {
  height: 100%;
}

.grid > .col-1 { grid-column: span 1; }
.grid > .col-2 { grid-column: span 2; }
.grid > .col-3 { grid-column: span 3; }
.grid > .col-4 { grid-column: span 4; }
.grid > .col-5 { grid-column: span 5; }
.grid > .col-6 { grid-column: span 6; }
.grid > .col-7 { grid-column: span 7; }
.grid > .col-8 { grid-column: span 8; }
.grid > .col-9 { grid-column: span 9; }
.grid > .col-10 { grid-column: span 10; }
.grid > .col-11 { grid-column: span 11; }
.grid > .col-12 { grid-column: span 12; }

/* Vorlagen fuer zweispaltige Raster (Legacy autogrid_grid d_33_66, d_50_50) */
.grid.grid-33-66 { grid-template-columns: 1fr 2fr; }
.grid.grid-50-50 { grid-template-columns: 1fr 1fr; }
.grid.grid-33-66 > *,
.grid.grid-50-50 > * { grid-column: auto; }

@media (min-width: 768px) and (max-width: 1024px) {
  .grid > .col-t-3 { grid-column: span 3; }
  .grid > .col-t-4 { grid-column: span 4; }
  .grid > .col-t-6 { grid-column: span 6; }
  .grid > .col-t-12 { grid-column: span 12; }
}

@media (max-width: 767px) {
  .grid {
    row-gap: 25px;
  }

  .grid > [class*='col-'] { grid-column: span 12; }
  .grid > .col-m-6 { grid-column: span 6; }

  .grid.grid-33-66,
  .grid.grid-50-50 { grid-template-columns: 1fr; }
}