/* ============================================================
   demografieGate — dunkle „Tor"-Karte zum Demografie-Erklärstück
   Plain CSS (KEIN SCSS-Build nötig), analog zu about-modules.css.
   Nutzt ausschließlich bestehende Theme-Tokens aus _variables.scss.
   Stand: Juni 2026
   ============================================================ */

.module-demografieGate {
  padding: 0 var(--padding);
}
.module-demografieGate .dg-panel {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
  max-width: 1316px;
  padding: 56px 56px 52px;
  border-radius: 8px;
  background: var(--Brand-Colors-secondary, #222);
  color: var(--Neutral-white, #fff);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.module-demografieGate .dg-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.module-demografieGate .dg-panel:hover .dg-arrow {
  transform: translateX(5px);
}
.module-demografieGate .dg-lead .star-white {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  background-image: url("assets/img/whiteStar.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.module-demografieGate .dg-eyebrow {
  margin: 0;
  color: var(--Brand-Colors-primary, #fd6702);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.module-demografieGate .dg-headline {
  margin: 0;
  color: var(--Neutral-white, #fff);
  font-size: 32px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.module-demografieGate .dg-headline em {
  font-style: normal;
  color: var(--Brand-Colors-primary, #fd6702);
}
.module-demografieGate .dg-text {
  margin: 20px 0 0;
  max-width: 60ch;
  color: var(--Neutral-white, #fff);
  opacity: 0.82;
  font-size: 17px;
  font-weight: 400;
  line-height: 155%;
}
.module-demografieGate .dg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 14px 24px;
  border-radius: 8px;
  background: var(--Brand-Colors-primary, #fd6702);
  color: var(--Neutral-white, #fff);
  font-size: 15px;
  font-weight: 600;
  line-height: 180%;
  white-space: nowrap;
}
.module-demografieGate .dg-arrow {
  transition: transform 0.2s ease;
}

@media screen and (max-width: 900px) {
  .module-demografieGate .dg-panel {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px;
  }
  .module-demografieGate .dg-headline {
    font-size: 26px;
  }
}

/* ============================================================
   FIX — position:sticky im Scrollytelling auf Mobile
   ------------------------------------------------------------
   Das Theme setzt in styles.css:
       @media (max-width:767px){ #wrapper{ overflow:hidden; } }
   `#wrapper` ist ein Vorfahr von `.dw-root`. Ein Vorfahr mit
   `overflow:hidden` wird zum Clip-/Scroll-Container und deaktiviert
   `position:sticky` bei ALLEN Nachfahren — deshalb scrollen die
   Akt-Grafiken (Symptomkarten etc.) auf dem Handy durch, statt
   angepinnt zu bleiben.
   `overflow-x:clip` verhindert horizontalen Scroll genauso, erzeugt
   aber KEINEN Scroll-Container → sticky bleibt intakt.
   `:has(.dw-root)` scoped den Fix exakt auf die Erklärstück-Seite.
   ============================================================ */
@media only screen and (max-width: 767px) {
  /* Body-Class der Erklärstück-Seite (von WP aus dem Template erzeugt) +
     :has()-Fallback. So greift der Fix unabhängig davon, welcher der
     Container die overflow:hidden-Regel trägt, und ohne auf :has angewiesen
     zu sein. overflow-x:clip + overflow-y:visible bildet KEINEN
     Scroll-Container (anders als hidden) → sticky bleibt intakt. */
  .page-template-template-demografischer-wandel #wrapper,
  .page-template-template-demografischer-wandel #container,
  .page-template-template-demografischer-wandel #content,
  #wrapper:has(.dw-root),
  #container:has(.dw-root),
  #content:has(.dw-root) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}