/* =========================================================
   WP-OVERRIDES — gewinnt gegen Elementor / altes Theme-Kit
   ---------------------------------------------------------
   Diese Datei wird ZULETZT geladen. Sie stellt die wichtigsten
   Theme-Regeln mit !important wieder her, damit globale CSS aus
   Elementor (Global Fonts, Link-Styles, Header-Hintergrund) das
   Theme nicht überschreibt.
   NUR im WordPress-Kontext nötig — der statische Prototyp braucht
   diese Datei nicht.
   ========================================================= */

/* ---------- 1) SCHRIFTEN (kein fremder Brush-/Heading-Font) ---------- */
body,
.site-content,
p, li, td, th, figcaption, blockquote, input, button, select, textarea {
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.hero__title,
.hero__subtitle,
.intro__title,
.inhalt__hero-title,
.inhalt__block-title,
.alt-hero__title,
.alt-hero__subtitle,
.toc-acc__title,
.toc-acc__num,
.highlight-tile__title,
.highlight-tile__num,
.mega__visual-title,
.dl-card__title,
.dl-list__title,
.page-nav__title,
.nav__year {
  font-family: var(--font-display) !important;
}

/* Eyebrows / Versalien behalten ihren eigenen DIN-Black-Font */
.eyebrow,
.hero__eyebrow,
.inhalt__hero-eyebrow,
.inhalt__block-eyebrow,
.modal__eyebrow,
.dl-card__eyebrow {
  font-family: var(--font-eyebrow, var(--font-display)) !important;
}

/* Italic-Eyebrows der Highlight-Kacheln */
.highlight-tile__eyebrow,
.quick-tile__eyebrow {
  font-family: var(--font-display) !important;
}

/* ---------- 2) LINKS — keine fremden Unterstriche / Hover-Sprünge ---------- */
.site-header a,
.nav__link,
.mega a,
.hero a,
.hero__scroll,
.intro a,
.inhalt a,
.highlight-tile,
.toc-acc a,
.toc-acc__head,
.page-nav a,
.alt-hero a,
.dl-card,
.dl-list a,
.site-footer a,
.btn,
.m-nav a {
  text-decoration: none !important;
}
/* Im Hover nie unterstreichen. (KEIN font-size/letter-spacing-Reset — das hat
   vorher die Schrift beim Hover springen/schrumpfen lassen.) */
.site-header a:hover,
.nav__link:hover,
.mega a:hover,
.hero a:hover,
.intro a:hover,
.inhalt a:hover,
.highlight-tile:hover,
.toc-acc a:hover,
.page-nav a:hover,
.alt-hero a:hover,
.dl-card:hover,
.dl-list a:hover,
.site-footer a:hover,
.btn:hover {
  text-decoration: none !important;
}

/* Fließtext-Links im Editor-Inhalt dürfen unterstrichen sein (Lesbarkeit) */
.rich-text a,
.intro__lede a,
.alt-hero__content-body a {
  text-decoration: underline !important;
}

/* ---------- 3) HEADER — externer blauer Hintergrund raus ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.92) !important;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
}
.site-header.is-on-hero {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
.alt-page .site-header,
.alt-page .site-header.is-on-hero {
  background: #fff !important;
}

/* Nav-Links auf dem Hero wieder weiß (falls extern überschrieben) */
.site-header.is-on-hero .nav__link { color: var(--swh-white) !important; }
.site-header.is-on-hero .nav-toggle__bar { background: var(--swh-white) !important; }

/* ---------- 4) BUTTONS — Elementor-Button-Style überschreiben ----------
   WICHTIG: Basis-Regel NUR mit .btn (Spezifität 0,1,0), damit die Modifier
   (.btn.btn--ghost-light = 0,2,0) sicher gewinnen. */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  background: var(--swh-blue) !important;
  color: var(--swh-white) !important;
  border: 2px solid var(--swh-blue) !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
/* Ghost-Light (über dem Hero): transparent mit hellem Rand */
.btn.btn--ghost-light {
  background: transparent !important;
  color: var(--swh-white) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
}
.btn.btn--ghost-light:hover {
  background: var(--swh-white) !important;
  border-color: var(--swh-white) !important;
  color: var(--swh-blue-dark) !important;
}
.btn.btn--yellow {
  background: var(--swh-yellow) !important;
  border-color: var(--swh-yellow) !important;
  color: var(--swh-blue-dark) !important;
}
.btn--yellow {
  background: var(--swh-yellow) !important;
  border-color: var(--swh-yellow) !important;
  color: var(--swh-blue-dark) !important;
}
/* Button-Icon sichtbar halten (Elementor versteckt/skaliert SVGs sonst) */
.btn .btn__icon,
.btn svg.btn__icon {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  flex: 0 0 auto !important;
}

/* ---------- 5) MODAL — sicher ein-/ausblenden ---------- */
.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
}
.modal[aria-hidden="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.modal[aria-hidden="false"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.modal__panel { z-index: 1 !important; }
.modal .dl-list__title,
.modal .dl-card__title { text-decoration: none !important; }

/* ---------- 5b) FARBEN — Elementor erzwingt sonst eigene Heading-/Text-Farben ---------- */
/* Hero */
.hero__title { color: var(--swh-yellow) !important; }
.hero__eyebrow { color: var(--swh-white) !important; }
.hero__eyebrow .year { color: var(--swh-yellow) !important; }
.hero__subtitle { color: var(--swh-white) !important; }
.hero__scroll,
.hero__scroll:hover,
.hero__scroll:focus,
.hero__scroll-label { color: var(--swh-white) !important; }

/* Intro */
.intro__title { color: var(--swh-white) !important; }
.intro__title .accent { color: var(--swh-yellow) !important; }

/* Inhalt-Sektion */
.inhalt__hero-title { color: var(--swh-white) !important; }
.inhalt__hero-eyebrow { color: var(--swh-blue-dark) !important; background: var(--swh-yellow) !important; }
.inhalt__hero-sub { color: var(--swh-white) !important; }
.inhalt__block-eyebrow { color: var(--swh-blue) !important; }
.inhalt__block-title { color: var(--swh-blue-dark) !important; }

/* Highlight-Kacheln */
.highlight-tile__title { color: var(--swh-blue-dark) !important; }
.highlight-tile__eyebrow { color: var(--swh-blue-dark) !important; }
.highlight-tile__num { color: var(--swh-blue) !important; }

/* Inhaltsverzeichnis (Akkordeon) */
.toc-acc__num { color: var(--swh-blue) !important; }
.toc-acc__title { color: var(--swh-blue-dark) !important; }
.toc-acc__list a { color: var(--swh-blue-dark) !important; }
.toc-acc__list .num { color: var(--swh-blue) !important; }

/* Nav / Mega-Menü */
.nav__link { color: var(--swh-blue-dark) !important; }
.site-header.is-on-hero .nav__link { color: var(--swh-white) !important; }
.nav__year { color: var(--swh-blue-dark) !important; }
.mega__list a { color: var(--swh-blue-dark) !important; }
.mega__visual-title,
.mega__visual-tag { color: var(--swh-white) !important; }

/* Page-Nav unten */
.page-nav__title { color: var(--swh-blue-dark) !important; }
.page-nav__label { color: var(--swh-blue-dark) !important; }

/* Generische Headings (außer den oben gesetzten Sonderfällen) → Dunkelblau */
.inhalt h3, .rich-text h1, .rich-text h2, .rich-text h3 { color: var(--swh-blue-dark) !important; }

/* alt-hero (dunkler Hintergrund) → Headline & Untertitel WEISS */
.alt-hero__title { color: var(--swh-white) !important; }
.alt-hero__subtitle { color: var(--swh-white) !important; }
.alt-hero__list-title { color: var(--swh-white) !important; }
.alt-hero__list-text { color: rgba(255,255,255,0.8) !important; }
.alt-hero__crumb, .alt-hero__crumb a { color: rgba(255,255,255,0.85) !important; }
.alt-hero__nav-back { color: rgba(255,255,255,0.85) !important; }

/* ---------- 5c) HEADER auf alt-page (Hauptkapitel) — solide weiß, Logo sichtbar ----------
   Header bleibt solide weiß mit dunklem Text — auch wenn das Scroll-JS oben am
   Seitenanfang .is-on-hero togglet (sonst weißer Nav-Text auf weißem Header = unsichtbar).
   .is-on-hero-Varianten brauchen höhere Spezifität, um die globalen White-Regeln zu schlagen. */
.alt-page .site-header,
.alt-page .site-header.is-on-hero {
  background: #fff !important;
  border-bottom: 1px solid var(--swh-gray-200) !important;
}
.alt-page .nav__link,
.alt-page .nav__year,
.alt-page .site-header.is-on-hero .nav__link,
.alt-page .site-header.is-on-hero .nav__year { color: var(--swh-blue-dark) !important; }
.alt-page .nav-toggle__bar,
.alt-page .site-header.is-on-hero .nav-toggle__bar { background: var(--swh-blue-dark) !important; }
.alt-page .brand img,
.alt-page .site-header.is-on-hero .brand img { filter: none !important; display: block !important; }

/* ---------- 6) ELEMENTOR-CONTAINER NEUTRALISIEREN ---------- */
/* Falls Elementor max-width/padding auf den Hauptbereich legt */
.elementor-page main,
main#main {
  max-width: none !important;
}