/* ═══════════════════════════════════════════════════════════════════════════
   heimseiten.de — THEME-NEUBAU: Seitengerüst & Artikel-System
   Werte = EFFEKTIVER Bestand (Konsolidierung live-design [614ff] + heimseiten-
   Overrides — z. B. Alternierung odd=var(--c-bg), NICHT surface-2!).
   Lädt NACH heimseiten.css (Reihenfolge load-bearing, s. Twig-Kommentar).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grundgerüst ── */
#container, .inside { position: relative; }
#main, #left, #right { float: left; position: relative; }
#main { width: 100%; }
#main .inside { min-height: 1px; }
#container::after, .custom::after { content: ""; display: table; clear: both; }
/* Theme-Gruppen-Wrapper transparent (Stufe 13 aus heimseiten): CSS greift direkt
   auf #header/.inside > Logo/Nav bzw. #footer/.inside */
.hs-header, .hs-footer { display: contents; }
#container { margin-bottom: 0; margin-top: var(--header_height); }
@media (max-width: 1023px) {
  #container { margin-top: var(--header_height_mobile); }
  #wrapper { overflow: hidden; }
}
@media (max-width: 767px) {
  #wrapper { margin: 0; width: auto; }
  #container { padding-left: 0; padding-right: 0; }
  #main, #left, #right { float: none; width: auto; }
}

/* ── Artikel: Fläche, Trennlinie, Alternierung ──
   Basis weiß (--c-surface), ungerade Artikel var(--c-bg) #f8f8f8 (effektiver
   Bestands-Sieger), gray/white = CMS-Klassen. Dark: alles #161616, odd #1b1b1b. */
.mod_article {
  position: relative;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  outline: none;
}
.mod_article.hs-bg-gray { background: var(--c-surface-2); }
.mod_article.hs-bg-white { background: var(--c-surface); }
/* Alternierung ZULETZT (Bestand: heimseiten-Regel lud nach gray/white und gewann auch
   auf odd-Artikeln MIT Klasse — gray/white wirken effektiv nur auf geraden Artikeln!) */
.mod_article:nth-child(odd) { background: var(--c-bg); }
@media (min-width: 1024px) {
  /* --padding-*-Vars kommen aus article-cc.css (generiert, pro Artikel) */
  .mod_article { padding-top: var(--padding-top, 60px); padding-bottom: var(--padding-bottom, 60px); }
}
@media (max-width: 1023px) {
  .mod_article { padding-top: var(--padding-top-mobile, 20px); padding-bottom: var(--padding-bottom-mobile, 20px); }
  .mod_article > div { max-width: var(--max-width-mobile) !important; width: var(--max-width-mobile) !important; }
}

/* (Artikel-Innenbreite .mod_article > * + full_width: FRÜH-gebunden in base.css —
   stand am ANFANG von live-design und muss spätere live-design-Regeln gleicher
   Spezifität [z. B. .hs-referenzen > *] weiter VERLIEREN lassen… bzw. selbst verlieren.) */
.mod_article.hs-full-width { padding: 0; }

/* Breiten-Modifier (CMS-Klassen; volle 50er-Skala — Editor-tippbar, DB nutzt 800/1000/1300) */
.mod_article .Breite750, .mod_article.Breite750 > * { max-width: 100%; width: 750px; margin-left: auto; margin-right: auto; }
.mod_article .Breite800, .mod_article.Breite800 > * { max-width: 100%; width: 800px; margin-left: auto; margin-right: auto; }
.mod_article .Breite850, .mod_article.Breite850 > * { max-width: 100%; width: 850px; margin-left: auto; margin-right: auto; }
.mod_article .Breite900, .mod_article.Breite900 > * { max-width: 100%; width: 900px; margin-left: auto; margin-right: auto; }
.mod_article .Breite950, .mod_article.Breite950 > * { max-width: 100%; width: 950px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1000, .mod_article.Breite1000 > * { max-width: 100%; width: 1000px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1050, .mod_article.Breite1050 > * { max-width: 100%; width: 1050px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1100, .mod_article.Breite1100 > * { max-width: 100%; width: 1100px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1150, .mod_article.Breite1150 > * { max-width: 100%; width: 1150px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1200, .mod_article.Breite1200 > * { max-width: 100%; width: 1200px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1250, .mod_article.Breite1250 > * { max-width: 100%; width: 1250px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1300, .mod_article.Breite1300 > * { max-width: 100%; width: 1300px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1350, .mod_article.Breite1350 > * { max-width: 100%; width: 1350px; margin-left: auto; margin-right: auto; }
.mod_article .Breite1400, .mod_article.Breite1400 > * { max-width: 100%; width: 1400px; margin-left: auto; margin-right: auto; }

/* ── Artikel-Hintergründe (.bg: Bild/Video, Parallax-Fallback via --scrolled_since_element) ── */
.mod_article > .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; z-index: 1; }
.mod_article > .bg .inside { min-height: 100% !important; }
.mod_article > .bg.parallax .inside { transform: translateY(min(8.5vw, calc(var(--scrolled_since_element) / 6))); } /* Deckel wie hs-bg-parallax-Keyframes */
@media (max-width: 1200px) {
  .mod_article > .bg .inside { margin-top: -25% !important; }
}
.mod_article > .bg img { object-fit: cover; min-height: 100%; width: 100%; }
.mod_article > .bg video { min-height: 100%; min-width: 100%; object-fit: cover; display: block; /* Inline-Baseline-Spalt: 3px-Lücke überm Video (Nutzer 2026-07-16) */ }
@media (max-width: 1023px) {
  /* Sichtbarkeit mobil via article-cc-Vars; heimseiten-Mobilfix erzwingt Vollflächen-Darstellung */
  .mod_article > .bg.image { display: var(--background-image-mobile); }
  .mod_article > .bg.video { display: var(--background-video-mobile); }
}