/* ==========================================================================
   DIVI 5 – Optimiertes Custom CSS
   Roboto Flex Variable Font + Typography + UI-Effekte
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (zentrale Steuerung)
   -------------------------------------------------------------------------- */
:root {
  /* Farben – angelehnt an DIVI 5 Global Colors */
  --color-primary: #1d48c0;       /* Primärfarbe */
  --color-secondary: #00ff9f;     /* Sekundärfarbe / Highlight */
  --color-heading: #0a0808;       /* Überschriftentextfarbe */
  --color-body: #0a0808;          /* Fließtextfarbe */
  --color-link: #2ea3f2;          /* Link Color */
  --color-bg-01: #f7f5f2;         /* Background 01 */
  --color-bg-02: #ded6cc;         /* Background 02 */

  /* Typografie */
  --font-family-base: 'Roboto Flex', Helvetica, Arial, Lucida, sans-serif;
  --font-weight-body: 250;
  --font-weight-heading: 750;
  --font-stretch-body: 120%;
  --font-stretch-heading: 150%;
  --line-height-body: 1.5;
  --line-height-heading: 1.1;

  /* Font-Größen Desktop */
  --fs-h1: 2.75rem;   /* 44px */
  --fs-h2: 2rem;       /* 32px */
  --fs-h3: 2rem;       /* 32px */
  --fs-h4: 1.25rem;    /* 20px */
  --fs-h5: 1.25rem;    /* 20px */
  --fs-h6: 1rem;       /* 16px */
  --fs-body: 1rem;     /* 16px */

  /* Transitions */
  --transition-speed: 0.3s;
  --transition-ease: ease;
}

/* Tablet und kleiner */
@media (max-width: 767px) {
  :root {
    --fs-h1: 2rem;       /* 32px */
    --fs-h2: 1.625rem;   /* 26px */
    --fs-h3: 1.625rem;   /* 26px */
  }
}


/* --------------------------------------------------------------------------
   Variable Font
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Roboto Flex';
  src: url('../fonts/roboto-flex-variable.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   Basis-Typografie
   -------------------------------------------------------------------------- */
html {
  /* 100% statt fixer px: rem respektiert die Browser-Grundschrift (barrierefrei); Default = 16px */
  font-size: 100%;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--fs-body);
  font-weight: var(--font-weight-body);
  font-stretch: var(--font-stretch-body);
  line-height: var(--line-height-body);
  color: var(--color-body);
}

/* Zentrale Typografie = Single Source of Truth (rem-basiert, siehe :root).
   Schriftgrößen hier pflegen, NICHT im Divi-Modul (würde hiervon überschrieben). */
p {
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
}


/* --------------------------------------------------------------------------
   Überschriften
   !important nötig, da DIVI 5 pro Modul nummerierte Klassen generiert
   (z.B. .et_pb_text_0 .et_pb_text_inner h1 → Spezifität 0-2-1)
   die sich nicht generisch überschreiben lassen.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base) !important;
  font-weight: var(--font-weight-heading) !important;
  font-stretch: var(--font-stretch-heading) !important;
  line-height: var(--line-height-heading) !important;
  color: var(--color-heading) !important;
  margin: 0 0 0.5em !important;
}

h1,
.hero h2 {
  font-size: var(--fs-h1) !important;
}

h2 { font-size: var(--fs-h2) !important; }
h3 { font-size: var(--fs-h3) !important; }

h4,
h5 { font-size: var(--fs-h4) !important; }

h6 { font-size: var(--fs-h6) !important; }


/* --------------------------------------------------------------------------
   Highlight-Effekt (schräger grüner Balken)
   -------------------------------------------------------------------------- */
.highlight {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.highlight::before {
  content: "";
  position: absolute;
  inset-inline: -8px;
  bottom: 10%;
  height: 50%;
  background: var(--color-secondary);
  z-index: -1;
  transform: skewX(20deg);
}


/* --------------------------------------------------------------------------
   Hover-Underline (wiederverwendbar)
   -------------------------------------------------------------------------- */
.hover-border {
  display: inline-block;
  position: relative;
  width: fit-content;
  color: inherit;
  transition: color var(--transition-speed) var(--transition-ease);
}

.hover-border::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--transition-speed) var(--transition-ease);
}

.hover-border:hover {
  color: var(--color-primary);
}

.hover-border:hover::after {
  width: 100%;
}


/* --------------------------------------------------------------------------
   Menü-Hover – DIVI 5
   -------------------------------------------------------------------------- */
.et_pb_menu__menu > nav > ul > li > a {
  position: relative;
  display: inline-block;
  color: var(--color-heading) !important;
  opacity: 1 !important;
  transition: color var(--transition-speed) var(--transition-ease);
}

.et_pb_menu__menu > nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--transition-speed) var(--transition-ease);
}

.et_pb_menu__menu > nav > ul > li > a:hover {
  color: var(--color-primary) !important;
  opacity: 1 !important;
}

.et_pb_menu__menu > nav > ul > li > a:hover::after {
  width: 100%;
}

/* Aktiver Menüpunkt */
.et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  color: var(--color-primary) !important;
}

.et_pb_menu__menu > nav > ul > li.current-menu-item > a::after {
  width: 100%;
}


/* ==========================================================================
   MEGA MENU – Pure CSS, kein Plugin
   Nutzt die WP-Menü-Klassen: .trigger-publisher, .trigger-advertiser,
   .trigger-resources + deren Untermenüpunkte.

   WordPress-Menü-Setup:
   - Aktiviere unter "Ansicht anpassen" (oben rechts) → "Beschreibung"
   - Jeder Untermenüpunkt bekommt:
     • Navigationsbeschreibung = Titel der Karte (z.B. "DOOH")
     • Beschreibung = Kartentext (z.B. "Monetize, manage and optimize...")
     • URL = Zielseite
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mega Menu Variablen
   -------------------------------------------------------------------------- */
:root {
  --mega-bg: var(--color-bg-01);       /* Panel-Hintergrund: warm/beige */
  --mega-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  --mega-radius: 16px;
  --mega-card-bg: #ffffff;              /* Karten-Hintergrund: weiß */
  --mega-card-radius: 12px;
  --mega-card-padding: 1.5rem;
  --mega-max-width: 1100px;
  --mega-gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trigger-Items: Position relativ für Dropdown-Positionierung
   -------------------------------------------------------------------------- */
.trigger-publisher,
.trigger-advertiser,
.trigger-resources {
  position: static !important;
}

/* Hover-Underline bei Trigger-Links deaktivieren (kollidiert mit Mega-Menü) */
.trigger-publisher > a::after,
.trigger-advertiser > a::after,
.trigger-resources > a::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Dropdown-Panel (das <ul class="sub-menu">)
   -------------------------------------------------------------------------- */
.trigger-publisher > .sub-menu,
.trigger-advertiser > .sub-menu,
.trigger-resources > .sub-menu {
  /* Versteckt, aber vorbereitet */
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(10px);

  /* Positionierung: Zentriert unter der ganzen Navigation */
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px);
  top: 100% !important;

  /* Layout */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--mega-gap) !important;
  width: 90vw !important;
  max-width: var(--mega-max-width) !important;
  padding: 2rem 2rem 2rem 2rem !important;

  /* Styling */
  background: var(--mega-bg) !important;
  border-radius: var(--mega-radius) !important;
  box-shadow: var(--mega-shadow) !important;
  border: none !important;

  /* Transition */
  transition: opacity var(--transition-speed) var(--transition-ease),
              visibility var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease) !important;

  /* Reset DIVI Standard-Dropdown-Styles */
  list-style: none !important;
  z-index: 9999 !important;
}

/* --------------------------------------------------------------------------
   Dropdown einblenden bei Hover
   -------------------------------------------------------------------------- */
.trigger-publisher:hover > .sub-menu,
.trigger-advertiser:hover > .sub-menu,
.trigger-resources:hover > .sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* --------------------------------------------------------------------------
   Mega-Menü Header (per JS injiziert)
   -------------------------------------------------------------------------- */
.mega-menu-header {
  grid-column: 1 / -1 !important;    /* Volle Breite */
  background: transparent !important;
  padding: 0 0 0.5rem 0 !important;
  text-align: center !important;
  list-style: none !important;
}

.mega-menu-header__title {
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-stretch-heading);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.mega-menu-header__desc {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-body);
  opacity: 0.75;
  max-width: 600px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Karten (jedes <li> im Mega-Menü, außer Header)
   -------------------------------------------------------------------------- */
.trigger-publisher > .sub-menu > li,
.trigger-advertiser > .sub-menu > li,
.trigger-resources > .sub-menu > li {
  background: var(--mega-card-bg) !important;
  border-radius: var(--mega-card-radius) !important;
  padding: var(--mega-card-padding) !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  transition: box-shadow var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease) !important;
}

.trigger-publisher > .sub-menu > li:hover,
.trigger-advertiser > .sub-menu > li:hover,
.trigger-resources > .sub-menu > li:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   Karten-Links (der <a> in jedem <li>)
   Flex-Order: Titel (0) → Akzent-Linie (1) → Beschreibung (2)
   -------------------------------------------------------------------------- */
.trigger-publisher > .sub-menu > li > a,
.trigger-advertiser > .sub-menu > li > a,
.trigger-resources > .sub-menu > li > a {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  color: var(--color-heading) !important;
  font-size: 1.25rem !important;
  font-weight: var(--font-weight-heading) !important;
  text-decoration: none !important;
  background: transparent !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

/* Kein Underline-Effekt in Mega-Menü-Karten */
.trigger-publisher > .sub-menu > li > a::after,
.trigger-advertiser > .sub-menu > li > a::after,
.trigger-resources > .sub-menu > li > a::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Untertitel (WordPress "Title-Attribut"-Feld, optional)
   Per JS als <span class="menu-item-subtitle"> in den Link injiziert.
   Order 0 = direkt nach dem Kartentitel, vor der Akzent-Linie.
   -------------------------------------------------------------------------- */
.trigger-publisher .menu-item-subtitle,
.trigger-advertiser .menu-item-subtitle,
.trigger-resources .menu-item-subtitle {
  display: block !important;
  font-weight: var(--font-weight-body) !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: var(--color-body) !important;
  opacity: 0.6;
  margin-top: 0.15rem;
  order: 0 !important;
}

/* --------------------------------------------------------------------------
   Beschreibungstext (WordPress "Beschreibung"-Feld)
   Per JS als <span class="menu-item-description"> in den Link injiziert.
   Order 2 = nach der Akzent-Linie (order 1).
   -------------------------------------------------------------------------- */
.trigger-publisher .menu-item-description,
.trigger-advertiser .menu-item-description,
.trigger-resources .menu-item-description {
  display: block !important;
  font-weight: var(--font-weight-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: var(--color-body) !important;
  opacity: 0.75;
  margin-top: 0;
  order: 2 !important;
}

/* Beschreibung im Nav-Bar-Link der Trigger ausblenden (Sicherheit, falls Walker doch greift) */
.trigger-publisher > a > .menu-item-description,
.trigger-advertiser > a > .menu-item-description,
.trigger-resources > a > .menu-item-description {
  display: none !important;
}

/* "Learn more →" nur bei Karten OHNE Sub-Sub-Menü */
.trigger-publisher > .sub-menu > li:not(.mega-menu-header):not(.mega-visual):not(.menu-item-has-children) .menu-item-description::after,
.trigger-advertiser > .sub-menu > li:not(.mega-menu-header):not(.mega-visual):not(.menu-item-has-children) .menu-item-description::after,
.trigger-resources > .sub-menu > li:not(.mega-menu-header):not(.mega-visual):not(.menu-item-has-children) .menu-item-description::after {
  content: "Learn more \2192";
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
  opacity: 1;
}

/* Sub-Sub-Menü bekommt order 3 (nach Beschreibung) */
.trigger-publisher > .sub-menu > li > .sub-menu,
.trigger-advertiser > .sub-menu > li > .sub-menu,
.trigger-resources > .sub-menu > li > .sub-menu {
  order: 3 !important;
}

/* --------------------------------------------------------------------------
   Sub-Sub-Links (3. Menü-Ebene → Link-Listen in Karten)

   WordPress-Struktur:
   Resources (trigger-resources)
     ├── News & Insights          ← Karten-Titel (Level 2)
     │   └── Newsroom             ← Sub-Sub-Link (Level 3)
     ├── Inventories
     │   ├── DOOH
     │   ├── OOH
     │   └── Radio
     └── Services
         ├── Managed Service
         ├── Programmatic Expert
         └── Business Case Check
   -------------------------------------------------------------------------- */

/* Sub-Sub <ul> Reset */
.trigger-publisher > .sub-menu > li > .sub-menu,
.trigger-advertiser > .sub-menu > li > .sub-menu,
.trigger-resources > .sub-menu > li > .sub-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0.5rem 0 0 0 !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width: auto !important;
}

/* Sub-Sub <li> */
.trigger-publisher > .sub-menu > li > .sub-menu > li,
.trigger-advertiser > .sub-menu > li > .sub-menu > li,
.trigger-resources > .sub-menu > li > .sub-menu > li {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Sub-Sub <li> kein Hover-Effekt auf Karten-Ebene */
.trigger-publisher > .sub-menu > li > .sub-menu > li:hover,
.trigger-advertiser > .sub-menu > li > .sub-menu > li:hover,
.trigger-resources > .sub-menu > li > .sub-menu > li:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Sub-Sub Links */
.trigger-publisher > .sub-menu > li > .sub-menu > li > a,
.trigger-advertiser > .sub-menu > li > .sub-menu > li > a,
.trigger-resources > .sub-menu > li > .sub-menu > li > a {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--color-primary) !important;
  padding: 0.2rem 0 !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Pfeil nach jedem Sub-Sub Link */
.trigger-publisher > .sub-menu > li > .sub-menu > li > a::after,
.trigger-advertiser > .sub-menu > li > .sub-menu > li > a::after,
.trigger-resources > .sub-menu > li > .sub-menu > li > a::after {
  content: " \2192" !important;
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
}

/* Hover auf Sub-Sub Links */
.trigger-publisher > .sub-menu > li > .sub-menu > li > a:hover,
.trigger-advertiser > .sub-menu > li > .sub-menu > li > a:hover,
.trigger-resources > .sub-menu > li > .sub-menu > li > a:hover {
  opacity: 0.7 !important;
}

/* --------------------------------------------------------------------------
   Akzent-Linie zwischen Kartentitel und Beschreibung
   Order: Titel (auto/0) → Linie (1) → Beschreibung (2)
   -------------------------------------------------------------------------- */
.trigger-publisher > .sub-menu > li:not(.mega-menu-header):not(.mega-visual) > a::before,
.trigger-advertiser > .sub-menu > li:not(.mega-menu-header):not(.mega-visual) > a::before,
.trigger-resources > .sub-menu > li:not(.mega-menu-header):not(.mega-visual) > a::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-primary);
  margin: 0.5rem 0 0.75rem 0;
  border-radius: 2px;
  order: 1 !important;  /* Nach dem Titel, vor der Beschreibung */
}

/* --------------------------------------------------------------------------
   Logo-Karten (.mega-card-logo)

   WordPress-Setup:
   Menüpunkt bekommt ZWEI CSS-Klassen (Leerzeichen getrennt):
     mega-card-logo mega-card-adserver
   - mega-card-logo  → aktiviert Logo-Modus (Text verstecken, Bild zeigen)
   - mega-card-*     → bestimmt welches Logo angezeigt wird

   Beispiel CSS-Klassen-Feld: mega-card-logo mega-card-adserver
   -------------------------------------------------------------------------- */

/* Linktext bei Logo-Karten verstecken */
.mega-card-logo > a {
  font-size: 0 !important;
  color: transparent !important;
}

/* Logo-Bild statt Text anzeigen */
.mega-card-logo > a::before {
  width: 100% !important;
  height: 40px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 3px solid var(--color-primary) !important;
  border-radius: 0 !important;
  order: 0 !important;
}

/* Logo-Bilder werden dynamisch aus functions.php geladen (Mediathek-URLs)
   → Siehe divi_child_mega_menu_logo_vars() in functions.php */

/* Beschreibung bei Logo-Karten braucht explizite font-size */
.mega-card-logo .menu-item-description {
  font-size: 0.875rem !important;
}

/* --------------------------------------------------------------------------
   Grafik-Karte (.mega-visual)

   WordPress-Setup:
   Lege als LETZTEN Untermenüpunkt einen "Individuellen Link" an:
   - URL: #  (oder die gewünschte Zielseite)
   - Linktext: leer lassen oder Leerzeichen
   - CSS-Klasse: mega-visual
   Das Bild wird per CSS als background-image gesetzt.

   Für verschiedene Trigger-Menüs verschiedene Bilder:
   .trigger-publisher .mega-visual  → Platform-Screenshot
   .trigger-advertiser .mega-visual → Advertiser-Screenshot
   -------------------------------------------------------------------------- */
.mega-visual {
  grid-column: -2 / -1 !important;  /* Immer letzte Spalte */
  grid-row: 1 / -1 !important;      /* Volle Höhe über alle Zeilen */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  min-height: 250px !important;
  padding: 0 !important;
  border-radius: var(--mega-card-radius) !important;
  overflow: hidden !important;
}

/* Linktext und Akzent-Linie ausblenden */
.mega-visual > a {
  font-size: 0 !important;
  color: transparent !important;
  padding: 0 !important;
}

.mega-visual > a::before {
  display: none !important;
}

.mega-visual .menu-item-description {
  display: none !important;
}

/* Visual-Bilder werden dynamisch aus functions.php geladen (Mediathek-URLs)
   → Siehe divi_child_mega_menu_logo_vars() in functions.php */

/* Mobil: Grafik ausblenden */
@media (max-width: 980px) {
  .mega-visual {
    display: none !important;
  }
}

/* ==========================================================================
   NEWSROOM PAGE
   Sektionen: Hero-Stats, Partner-Logos, Artikel-Grid
   ========================================================================== */

/* --------------------------------------------------------------------------
   Newsroom Variablen
   -------------------------------------------------------------------------- */
:root {
  --news-card-bg: #ffffff;
  --news-card-radius: 12px;
  --news-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --news-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Sektion 1: "Who we are" – Stats-Kennzahlen
   DIVI 5: Zeile mit 3 Blurb- oder Number-Counter-Modulen
   CSS-Klasse auf der Sektion: newsroom-stats
   -------------------------------------------------------------------------- */
.newsroom-stats {
  background: var(--color-bg-01) !important;
}

.newsroom-stats .et_pb_blurb {
  text-align: center !important;
}

/* Icon/Bild über der Kennzahl */
.newsroom-stats .et_pb_main_blurb_image {
  margin-bottom: 1rem !important;
}

.newsroom-stats .et_pb_main_blurb_image img {
  max-height: 60px !important;
  width: auto !important;
}

/* Große Zahl */
.newsroom-stats .et_pb_blurb_content h4,
.newsroom-stats .et_pb_module_header {
  font-size: 2.5rem !important;
  font-weight: var(--font-weight-heading) !important;
  font-stretch: var(--font-stretch-heading) !important;
  color: var(--color-primary) !important;
  line-height: 1.1 !important;
  margin-bottom: 0.25rem !important;
}

/* Label unter der Zahl */
.newsroom-stats .et_pb_blurb_description {
  font-size: 0.9rem !important;
  font-weight: var(--font-weight-body) !important;
  color: var(--color-body) !important;
  opacity: 0.75;
}

/* Number Counter Modul (Alternative) */
.newsroom-stats .et_pb_number_counter {
  text-align: center !important;
}

.newsroom-stats .percent p {
  font-size: 2.5rem !important;
  font-weight: var(--font-weight-heading) !important;
  font-stretch: var(--font-stretch-heading) !important;
  color: var(--color-primary) !important;
}

.newsroom-stats h3 {
  font-size: 0.9rem !important;
  font-weight: var(--font-weight-body) !important;
  color: var(--color-body) !important;
  opacity: 0.75;
  margin-top: 0.25rem !important;
}

/* --------------------------------------------------------------------------
   Sektion 2: "Who we work with" – Partner-Logo-Grid
   DIVI 5: Gallery-Modul oder Bild-Module in Zeilen
   CSS-Klasse auf der Sektion: newsroom-partners
   -------------------------------------------------------------------------- */
.newsroom-partners {
  background: #ffffff !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* Sektions-Überschrift */
.newsroom-partners h2 {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

/* Logo-Grid: DIVI Gallery oder Image-Module */
.newsroom-partners .et_pb_gallery_items,
.newsroom-partners .partner-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.5rem 2rem !important;
}

.newsroom-partners .et_pb_gallery_item,
.newsroom-partners .et_pb_image {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 140px !important;
}

.newsroom-partners .et_pb_gallery_item img,
.newsroom-partners .et_pb_image img {
  max-height: 45px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: grayscale(100%) !important;
  opacity: 0.6;
  transition: filter var(--transition-speed) var(--transition-ease),
              opacity var(--transition-speed) var(--transition-ease) !important;
}

.newsroom-partners .et_pb_gallery_item:hover img,
.newsroom-partners .et_pb_image:hover img {
  filter: grayscale(0%) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Sektion 3: "One Tech Group in the media" – Artikel-Grid
   DIVI 5: Blog-Modul (Grid-Layout)
   CSS-Klasse auf der Sektion: newsroom-articles
   CSS-Klasse auf dem Blog-Modul: newsroom-blog
   -------------------------------------------------------------------------- */
.newsroom-articles {
  background: var(--color-bg-01) !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* Sektions-Überschrift */
.newsroom-articles h2 {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

/* Blog-Modul: Nur Spaltenanzahl + klickbare Karten.
   Alles andere (Bilder, Abstände, Farben, Schatten) macht DIVI. */
.newsroom-blog .et_pb_blog_posts.et_grid_module,
.newsroom-blog .et_pb_ajax_pagination_container {
  --column-count: 3 !important;
}

/* Ganze Karte klickbar + Hover-Effekt */
.newsroom-blog .et_pb_post {
  position: relative !important;
  cursor: pointer !important;
  transition: box-shadow var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease) !important;
}

.newsroom-blog .et_pb_post:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px) !important;
}

/* Bild-Zoom beim Hover */
.newsroom-blog .et_pb_post .et_pb_image_container {
  overflow: hidden !important;
}

.newsroom-blog .et_pb_post img {
  transition: transform var(--transition-speed) var(--transition-ease) !important;
}

.newsroom-blog .et_pb_post:hover img {
  transform: scale(1.03) !important;
}

.newsroom-blog .et_pb_post .entry-title a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* ==========================================================================
   SINGLE POST (normaler WP-Beitrag, OHNE DIVI Builder)
   Greift auf der Einzelansicht eines Beitrags.
   ========================================================================== */

/* Beitragsbild: Volle Breite
   Das Bild sitzt im DIVI-Content-Container (max-width begrenzt).
   Wir brechen es per 100vw + negativem Margin aus dem Container aus.
   Variante A: Volle Viewport-Breite (kein Rand links/rechts)
   Variante B: Volle Container-Breite (Bild füllt den Container)
   → Wir nehmen Variante B (sauberer, kein Overflow) */

/* Beitragsbild: Volle Breite
   DIVI setzt #left-area auf 79.125% → Bild bleibt zu schmal.
   Das <img> sitzt direkt in .et_post_meta_wrapper ohne Link-Wrapper.
   Lösung: #left-area auf 100% für Single Posts. */
.single-post #left-area {
  width: 100% !important;
  float: none !important;
}

/* Trennlinie links neben Content ausblenden */
.single-post #main-content .container:before {
  display: none !important;
}

/* Bild selbst: immer 100% */
.single-post .et_post_meta_wrapper > img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important;
  margin-bottom: 1rem !important;
}

/* Autor komplett ausblenden (inkl. "von |" Text-Nodes)
   HTML: <p class="post-meta"> von <span class="author vcard">...</span> | <span class="published">...</span> | <a>Kategorie</a></p>
   Trick: font-size:0 auf .post-meta versteckt alle Text-Nodes ("von", " | "),
   dann gezielt Datum und Kategorie wieder einblenden. */
.single-post .post-meta {
  font-size: 0 !important;
}

.single-post .post-meta .published {
  font-size: 0.85rem !important;
  font-weight: var(--font-weight-body) !important;
  color: var(--color-body) !important;
  opacity: 0.5;
}

.single-post .post-meta a[rel="category tag"] {
  font-size: 0.85rem !important;
  font-weight: var(--font-weight-body) !important;
  color: var(--color-primary) !important;
  opacity: 0.7;
}

/* Autor-Span verstecken (Sicherheit) */
.single-post .post-meta .author.vcard {
  display: none !important;
}

/* Beitrags-Titel */
.single-post .entry-title,
.single-post .et_post_meta_wrapper h1 {
  font-family: var(--font-family-base) !important;
  font-size: var(--fs-h1) !important;
  font-weight: var(--font-weight-heading) !important;
  font-stretch: var(--font-stretch-heading) !important;
  line-height: var(--line-height-heading) !important;
  color: var(--color-heading) !important;
  margin-bottom: 0.75rem !important;
}

/* Datum (font-size wird oben über .post-meta gesteuert) */

/* Beitrags-Text */
.single-post .entry-content,
.single-post .entry-content p {
  font-family: var(--font-family-base) !important;
  font-size: var(--fs-body) !important;
  font-weight: var(--font-weight-body) !important;
  line-height: var(--line-height-body) !important;
  color: var(--color-body) !important;
}

/* Beitrags-Zwischenüberschriften */
.single-post .entry-content h2 {
  font-size: var(--fs-h2) !important;
  margin-top: 2rem !important;
}

.single-post .entry-content h3 {
  font-size: var(--fs-h3) !important;
  margin-top: 1.5rem !important;
}


/* --------------------------------------------------------------------------
   Newsroom Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .newsroom-blog .et_pb_blog_posts.et_grid_module,
  .newsroom-blog .et_pb_ajax_pagination_container {
    --column-count: 1 !important;
  }

  .newsroom-stats .et_pb_blurb_content h4,
  .newsroom-stats .et_pb_module_header,
  .newsroom-stats .percent p {
    font-size: 2rem !important;
  }

  .newsroom-partners .et_pb_gallery_item,
  .newsroom-partners .et_pb_image {
    max-width: 100px !important;
  }

  .newsroom-partners .et_pb_gallery_item img,
  .newsroom-partners .et_pb_image img {
    max-height: 35px !important;
  }
}


/* --------------------------------------------------------------------------
   Tablet / Mobil: Mega-Menü als einfache Liste
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .trigger-publisher > .sub-menu,
  .trigger-advertiser > .sub-menu,
  .trigger-resources > .sub-menu {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    background: transparent !important;
  }

  .trigger-publisher > .sub-menu > li,
  .trigger-advertiser > .sub-menu > li,
  .trigger-resources > .sub-menu > li {
    border-radius: 8px !important;
    padding: 1rem !important;
  }

  .trigger-publisher:hover > .sub-menu,
  .trigger-advertiser:hover > .sub-menu,
  .trigger-resources:hover > .sub-menu {
    transform: none !important;
  }
}

/* ==========================================================================
   FOOTER (Theme Builder) — nur Abstände, kein Restyling
   ========================================================================== */
/* Abstand unter den Spalten-Überschriften (h5 bringt padding + margin mit) */
.et-l--footer h5 {
  padding-bottom: 0 !important;
  margin-bottom: 1rem !important;
}
/* Link-Zeilen enger (Divi-Default padding-bottom:1em entfernen) */
.et-l--footer .et_pb_text p {
  padding-bottom: 0 !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.45 !important;
}

/* Footer-Claim: Stützsatz abgesetzt + gedämpft (Klasse manuell vergeben) */
.et-l--footer .footer-claim-sub {
  margin-top: 0.6rem !important;
  font-size: 0.95rem !important;
  color: var(--color-body) !important;
  opacity: 0.65;
  line-height: 1.55 !important;
}

/* ==========================================================================
   MOBIL-MEGA-MENÜ: Klick-Akkordeon (gesteuert von megamenu.js via .otg-open)
   Nur im Divi-Mobilmenü (.et_mobile_menu) — Desktop-Hover-Menü unberührt.
   ========================================================================== */
/* Panels standardmäßig zu */
.et_mobile_menu .trigger-publisher > .sub-menu,
.et_mobile_menu .trigger-advertiser > .sub-menu,
.et_mobile_menu .trigger-resources > .sub-menu {
  display: none !important;
}
/* Geöffnetes Panel */
.et_mobile_menu .trigger-publisher.otg-open > .sub-menu,
.et_mobile_menu .trigger-advertiser.otg-open > .sub-menu,
.et_mobile_menu .trigger-resources.otg-open > .sub-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Trigger als klar tippbare Zeile + dezenter +/- Hinweis */
.et_mobile_menu .trigger-publisher > a,
.et_mobile_menu .trigger-advertiser > a,
.et_mobile_menu .trigger-resources > a {
  cursor: pointer;
  position: relative;
}
.et_mobile_menu .trigger-publisher > a::after,
.et_mobile_menu .trigger-advertiser > a::after,
.et_mobile_menu .trigger-resources > a::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  font-weight: 400;
}
.et_mobile_menu .trigger-publisher.otg-open > a::after,
.et_mobile_menu .trigger-advertiser.otg-open > a::after,
.et_mobile_menu .trigger-resources.otg-open > a::after {
  content: "–";
}

/* Testimonial-Zitat mobil etwas kleiner — Klasse 'testimonials' am Karussell-Modul vergeben */
@media (max-width: 980px) {
  .testimonials .et_pb_text p,
  .testimonials p {
    font-size: 0.875rem; /* 14px */
  }
}

/* ==========================================================================
   RESOURCES-MEGA-PANEL kompakter (nur .trigger-resources, Desktop)
   Überschriften + Schriftgrößen bleiben KONSISTENT zu Publisher/Advertiser;
   reduziert wird nur der Abstand ZWISCHEN den Links (kürzt die hohen Spalten).
   ========================================================================== */
.trigger-resources > .sub-menu {
  gap: 0.75rem !important;
  padding: 1.5rem !important; /* von 2rem -> niedriger */
}
.trigger-resources > .sub-menu > li {
  padding-top: 1rem !important;    /* von 1.5rem -> niedrigere Karten */
  padding-bottom: 1rem !important;
}
.trigger-resources > .sub-menu > li > .sub-menu {
  margin-top: 0.4rem !important;
  gap: 0 !important;
}
.trigger-resources > .sub-menu > li > .sub-menu > li > a {
  padding: 0.06rem 0 !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   FIX Hover-Bug: versteckte Mega-Panels dürfen keine Maus-Events abfangen.
   Ursache: Sub-Sub-Menüs sind visibility:visible; opacity:0 macht unsichtbar,
   schaltet aber pointer-events NICHT ab -> das verdeckte (zuletzt im DOM =
   Resources, z-index 9999) Panel lag unsichtbar über den anderen und fing
   den Hover ab. Lösung: nur das gehoverte/offene Panel ist klickbar.
   ========================================================================== */
.trigger-publisher > .sub-menu,
.trigger-advertiser > .sub-menu,
.trigger-resources > .sub-menu {
  pointer-events: none;
}
.trigger-publisher:hover > .sub-menu,
.trigger-advertiser:hover > .sub-menu,
.trigger-resources:hover > .sub-menu {
  pointer-events: auto;
}
/* Mobil-Akkordeon: offenes Panel klickbar halten */
.et_mobile_menu .trigger-publisher.otg-open > .sub-menu,
.et_mobile_menu .trigger-advertiser.otg-open > .sub-menu,
.et_mobile_menu .trigger-resources.otg-open > .sub-menu {
  pointer-events: auto !important;
}

/* ==========================================================================
   HEADER-NAV: Dropdown-Chevron an den Mega-Triggern + Login wie Nav-Link
   ========================================================================== */
/* Chevron an Publisher/Advertiser/Resources (nur Desktop-Menü); dreht beim Öffnen */
.et_pb_menu__menu .trigger-publisher > a::after,
.et_pb_menu__menu .trigger-advertiser > a::after,
.et_pb_menu__menu .trigger-resources > a::after {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  background: none !important;
  width: 0.4em !important;
  height: 0.4em !important;
  margin-left: 0.45em;
  border: 0 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-0.18em) rotate(45deg);
  transition: transform var(--transition-speed) var(--transition-ease);
}
.et_pb_menu__menu .trigger-publisher:hover > a::after,
.et_pb_menu__menu .trigger-advertiser:hover > a::after,
.et_pb_menu__menu .trigger-resources:hover > a::after {
  transform: translateY(0.05em) rotate(-135deg);
}

/* Login wie die anderen Nav-Links + Personen-Icon (Klasse 'nav-login' am Text-Modul) */
.nav-login a {
  color: var(--color-heading) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important; /* wie die Nav-Links (waren 600 vs. Login 250) */
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  transition: color var(--transition-speed) var(--transition-ease);
}
.nav-login a::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-login a:hover {
  color: var(--color-primary) !important;
}
.nav-login a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--transition-speed) var(--transition-ease);
}
.nav-login a:hover::after {
  width: 100%;
}

/* ==========================================================================
   HEADER: Contact-us-Button moderner Hover (Lift + Schatten + Tick dunkler)
   ========================================================================== */
.et_pb_button[class*="_tb_header"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.et_pb_button[class*="_tb_header"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(29, 72, 192, 0.28) !important;
  background-color: #173a9c !important;
}

/* ==========================================================================
   STICKY HEADER: dezenter Schatten nur im geklebten Zustand
   Divi setzt beim Scrollen et_pb_sticky(+--top) auf die fixierte Header-Section.
   ========================================================================== */
[class*="_tb_header"].et_pb_sticky {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.25s ease !important;
}

/* ==========================================================================
   MOBIL-MENÜ kompakt (wie alte Seite): nur Sektion + Links, keine Karten/Texte
   Scope: .et_mobile_menu — Desktop-Mega-Menü bleibt unberührt
   ========================================================================== */
/* schwere Inhalte raus (Header, Beschreibungen, Untertitel) */
.et_mobile_menu .mega-menu-header,
.et_mobile_menu .menu-item-description,
.et_mobile_menu .menu-item-subtitle {
  display: none !important;
}
/* Karten -> schlichte Liste (kein Karten-Hintergrund/Schatten/Radius) */
.et_mobile_menu .trigger-publisher > .sub-menu > li,
.et_mobile_menu .trigger-advertiser > .sub-menu > li,
.et_mobile_menu .trigger-resources > .sub-menu > li {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.25rem 0 !important;
}
/* Akzentlinie unter Karten-Titel raus */
.et_mobile_menu .trigger-publisher > .sub-menu > li > a::before,
.et_mobile_menu .trigger-advertiser > .sub-menu > li > a::before,
.et_mobile_menu .trigger-resources > .sub-menu > li > a::before {
  display: none !important;
}

/* Utility: Element nur auf Mobil zeigen (z.B. Contact us / Login als Menüpunkte) */
@media (min-width: 981px) {
  .mobile-only {
    display: none !important;
  }
}

/* ==========================================================================
   MOBIL-DROPDOWN: aus der Spalte herausbrechen -> fast volle Breite, runde
   Ecken, Schatten + zweistufige Link/Header-Optik. (Erster Pass, top ggf. anpassen)
   ========================================================================== */
@media (max-width: 980px) {
  .et_pb_menu .et_mobile_menu {
    position: fixed !important;
    top: 84px !important;            /* unter der Header-Leiste – bei Bedarf anpassen */
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100vh - 104px) !important;
    overflow-y: auto !important;
    border: none !important;
    border-radius: var(--card-radius) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
    padding: 0.4rem 0 !important;
  }
  /* Leaf-Links (Publisher/Advertiser: DOOH/OOH/Radio …) als Link-Optik */
  .et_mobile_menu .trigger-publisher > .sub-menu > li:not(.menu-item-has-children) > a,
  .et_mobile_menu .trigger-advertiser > .sub-menu > li:not(.menu-item-has-children) > a {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--color-link) !important;
  }
  /* Resources: Gruppen-Titel (Platform, News & Insights …) als dezenter Header */
  .et_mobile_menu .trigger-resources > .sub-menu > li.menu-item-has-children > a {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-heading) !important;
    opacity: 0.55;
  }
  /* Resources: Sub-Sub-Links (ADSERVER1 …) als Link-Optik */
  .et_mobile_menu .trigger-resources > .sub-menu > li > .sub-menu > li > a {
    font-size: 1rem !important;
    font-weight: 400 !important;
  }
}

/* ==========================================================================
   MOBIL-MENÜ Feinschliff: Resources-Untergruppen einklappbar, Link-Optik,
   Chevron-Indikatoren. (gesteuert von megamenu.js via .otg-open / .otg-sub-open)
   ========================================================================== */
@media (max-width: 980px) {
  /* Resources-Untergruppen standardmäßig ZU, per Tipp auf */
  .et_mobile_menu .trigger-resources > .sub-menu > li.menu-item-has-children > .sub-menu {
    display: none !important;
  }
  .et_mobile_menu .trigger-resources > .sub-menu > li.menu-item-has-children.otg-sub-open > .sub-menu {
    display: block !important;
  }

  /* Links: dunkel statt hellblau, eingerückt */
  .et_mobile_menu .trigger-publisher > .sub-menu > li:not(.menu-item-has-children) > a,
  .et_mobile_menu .trigger-advertiser > .sub-menu > li:not(.menu-item-has-children) > a,
  .et_mobile_menu .trigger-resources > .sub-menu > li > .sub-menu > li > a {
    color: var(--color-heading) !important;
    font-weight: 400 !important;
    padding-left: 1.5rem !important;
  }
  /* die "→"-Pfeile im Mobilmenü ausblenden */
  .et_mobile_menu .trigger-resources > .sub-menu > li > .sub-menu > li > a::after {
    content: none !important;
    display: none !important;
  }
  /* Gruppen-Header (Platform …) eingerückt */
  .et_mobile_menu .trigger-resources > .sub-menu > li.menu-item-has-children > a {
    padding-left: 1.25rem !important;
  }

  /* Chevron-Indikator an Top-Level + Resources-Gruppen, dreht beim Öffnen */
  .et_mobile_menu .trigger-publisher > a,
  .et_mobile_menu .trigger-advertiser > a,
  .et_mobile_menu .trigger-resources > a,
  .et_mobile_menu .trigger-resources > .sub-menu > li.menu-item-has-children > a {
    position: relative;
  }
  .et_mobile_menu .trigger-publisher > a::after,
  .et_mobile_menu .trigger-advertiser > a::after,
  .et_mobile_menu .trigger-resources > a::after,
  .et_mobile_menu .trigger-resources > .sub-menu > li.menu-item-has-children > a::after {
    content: "" !important;
    display: inline-block !important;
    position: absolute !important;
    right: 1.25rem;
    top: 50%;
    width: 0.45em !important;
    height: 0.45em !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    background: none !important;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.6;
  }
  .et_mobile_menu .trigger-publisher.otg-open > a::after,
  .et_mobile_menu .trigger-advertiser.otg-open > a::after,
  .et_mobile_menu .trigger-resources.otg-open > a::after,
  .et_mobile_menu .trigger-resources > .sub-menu > li.menu-item-has-children.otg-sub-open > a::after {
    transform: translateY(-35%) rotate(-135deg);
  }

  /* Scrollbalken visuell ausblenden (Touch-Scroll bleibt) -> kein Flash beim Öffnen */
  .et_pb_menu .et_mobile_menu {
    scrollbar-width: none;
  }
  .et_pb_menu .et_mobile_menu::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   MOBIL-HEADER: Hamburger -> X, Login-Icon, Contact-Button
   ========================================================================== */
/* Hamburger wechselt im offenen Zustand zum X (ETmodules-Glyph) */
.mobile_nav.opened .mobile_menu_bar::before {
  content: "M" !important;
}

/* Login mit Männchen-Icon (Klasse 'menu-login' am Menüpunkt) */
.et_mobile_menu .menu-login > a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
}
.et_mobile_menu .menu-login > a::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Contact us als Button (Klasse 'menu-contact' am Menüpunkt) */
.et_mobile_menu .menu-contact > a {
  display: block !important;
  margin: 0.6rem 1rem !important;
  padding: 0.7rem 1rem !important;
  background: var(--color-primary) !important;
  color: #ffffff !important;
  text-align: center !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease !important;
}
.et_mobile_menu .menu-contact > a:hover {
  color: #ffffff !important;
  background: #173a9c !important;
}

/* ==========================================================================
   MOBIL-MENÜ: einheitliche Link-Einrückung (Advertiser-Ebene == Resources-Sub)
   Divis Extra-Verschachtelungs-Einrückung neutralisieren, damit alle Ziel-Links
   gleich eingerückt sind (die padding-left:1.5rem an den Links bestimmt die Tiefe).
   ========================================================================== */
@media (max-width: 980px) {
  .et_mobile_menu .trigger-resources > .sub-menu > li > .sub-menu,
  .et_mobile_menu .trigger-resources > .sub-menu > li > .sub-menu > li {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   MOBIL-MENÜ: Einrückung wasserdicht vereinheitlichen
   Alle verschachtelten Listen ohne Eigen-Einrückung; jeder Eintrag (Header
   wie Link) einheitlich 1.5rem. (überschreibt frühere Einzel-Paddings)
   ========================================================================== */
@media (max-width: 980px) {
  .et_mobile_menu [class*="trigger-"] .sub-menu,
  .et_mobile_menu [class*="trigger-"] .sub-menu li {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .et_mobile_menu [class*="trigger-"] .sub-menu a {
    padding-left: 1.5rem !important;
  }
}

/* ==========================================================================
   MOBIL-MENÜ: einheitliche Schrift für alle Sub-Links (Größe/Stärke)
   Karten-Titel (1.25rem) und Sub-Sub (0.9rem) auf gemeinsames 1rem bringen.
   ========================================================================== */
@media (max-width: 980px) {
  .et_mobile_menu [class*="trigger-"] .sub-menu a {
    font-size: 1rem !important;
    font-weight: 400 !important;
  }
  /* Resources Gruppen-Header = klare Sektions-Labels (kein Link-Look):
     kleiner + fett + Trennlinie darüber + etwas Luft. Normale Schreibweise. */
  .et_mobile_menu .trigger-resources > .sub-menu > li.menu-item-has-children > a {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--color-heading) !important;
    opacity: 0.9 !important;
    padding-top: 1.05rem !important;
    padding-bottom: 0.5rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
  }
}

/* ==========================================================================
   MOBIL-MENÜ: Ziel-Links DEFINITIV identisch
   Höhere Spezifität als die Mega-Basisregeln (die haben font-size:0.9rem/1.25rem
   !important). Advertiser-Leaf == Resources-Sub-Sub: gleiche Größe/Stärke/Farbe.
   ========================================================================== */
@media (max-width: 980px) {
  .et_mobile_menu .trigger-publisher > .sub-menu > li > a,
  .et_mobile_menu .trigger-advertiser > .sub-menu > li > a,
  .et_mobile_menu .trigger-resources > .sub-menu > li > .sub-menu > li > a {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--color-heading) !important;
    line-height: 1.4 !important;
  }
}

/* ==========================================================================
   STARTSEITE – Prototyp
   Vertikaler Rhythmus: einheitliches Sektions-Padding (80px Desktop → ~48px Mobil)
   Zentrale Variable, smooth via clamp(). Hintergründe (Creme/Sand/Weiß) bleiben.
   ========================================================================== */
:root {
  --section-pad-y: clamp(48px, 6vw, 80px);
}

/* alle Inhalts-Sektionen auf gleichen Rhythmus */
.home-partners,
.home-solutions,
.home-platform,
.home-stats,
.home-services,
.home-testimonials {
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important;
}

/* Hero: oben kleiner (sitzt unter dem Sticky-Header), unten im Rhythmus */
.home-hero {
  padding-bottom: var(--section-pad-y) !important;
}

/* --------------------------------------------------------------------------
   STARTSEITE – Hero Feinschliff
   -------------------------------------------------------------------------- */
/* Abstand Headline -> Untertitel straffen (Untertitel = 2. Text-Modul im Hero) */
.home-hero .et_pb_text_1 {
  margin-top: -24px !important;
}

/* Hero-CTAs: identischer Hover wie der Contact-Button im Header (Konsistenz) */
.home-hero .et_pb_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(29, 72, 192, 0.28) !important;
  background-color: #173a9c !important;
}

/* ==========================================================================
   EYEBROW – kurzer Kicker über Sektions-Überschriften (Broadsign-Stil)
   Wiederverwendbar: Text-Modul über der Überschrift, CSS-Klasse "eyebrow".
   Schlicht, solide Brand-Blau (Broadsign-Stil).
   ========================================================================== */
.eyebrow,
.eyebrow p,
.eyebrow span{
  display:inline-block;
  margin:0 0 .25rem !important;
  font-size:.72rem !important;
  font-weight:700 !important;
  font-stretch:125% !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  color:#1d48c0 !important;
}

/* ==========================================================================
   STARTSEITE – Discover our solution (3 Lösungs-Karten)
   Klasse "feature-card" sitzt auf der SPALTE (+ feature-card-dooh|-retail|-agencies).
   Hover-Lift + Schatten (wie schwebende Hero-Karten), Button-Hover wie Hero-CTAs.
   ========================================================================== */
/* Basis: einheitlicher Radius + weicher Grund-Schatten + smooth Übergänge */
.feature-card{
  gap: 16px !important;            /* gleichmäßiger Abstand der inneren Module */
  display:flex !important;
  flex-direction:column !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}
/* sanftes Anheben + tieferer Schatten beim Mouseover */
.feature-card:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
/* "Learn more"-Buttons: identischer Hover wie die Hero-CTAs (Konsistenz) */
.feature-card .et_pb_button{
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.feature-card .et_pb_button:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(29,72,192,.28) !important;
  background-color:#173a9c !important;
}

/* Karten-Label enger an seinen Titel ziehen (Label = Mini-Kicker zum Titel) */
.feature-card-label{ margin-bottom:-8px !important; }

/* Button immer am Kartenboden – letztes Element der Flex-Karte nach unten schieben.
   (greift unabhängig davon, auf welcher Ebene feature-card-cta sitzt) */
.feature-card > *:last-child,
.feature-card .et_pb_button_module_wrapper:last-child,
.feature-card-cta{ margin-top:auto !important; }

/* Karten-Titel: nur an Leerzeichen umbrechen, keine hässlichen Wort-Trennungen */
.feature-card-title{
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

/* ==========================================================================
   BTN-PRIMARY – wiederverwendbarer Primär-Button (Brand-Blau)
   Klasse "btn-primary" aufs Button-Modul. Einheitlicher Hover wie Hero/Karten.
   ========================================================================== */
.btn-primary.et_pb_button,
.btn-primary{
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.btn-primary.et_pb_button:hover,
.btn-primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(29,72,192,.28) !important;
  background-color:#173a9c !important;
}

/* ==========================================================================
   STARTSEITE – Stat-Karten (home-stats) an die Solutions-Karten angleichen
   stat-card sitzt auf der Spalte (×3). Gleicher Radius/Schatten/Hover/Rhythmus.
   ========================================================================== */
.stat-card{
  gap:16px !important;                  /* statt 30px – gleicher Rhythmus wie feature-card */
  border-radius:var(--card-radius) !important;        /* statt 25px */
  box-shadow:var(--card-shadow) !important;
  transition:transform .28s ease, box-shadow .28s ease !important;
}
.stat-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--card-shadow-hover) !important;
}
/* große Zahl unten bündig – wie der Button bei den Solutions-Karten */
.stat-card > .et_pb_number_counter{ margin-top:auto !important; }

/* Stat-Karten-Titel als Label (kein H3 mehr) – Look der bisherigen H3 1:1 erhalten.
   Klasse "stat-title" aufs Titel-Text-Modul; Tag in Divi auf "Absatz" stellen. */
.stat-title,
.stat-title p{
  font-size:32px !important;
  font-weight:750 !important;
  font-stretch:150% !important;
  line-height:1.1 !important;
  color:#0a0808 !important;
  text-align:center !important;
  margin:0 !important;
}

/* ==========================================================================
   ACCORDION – Divi-Toggle im KARTEN-Look (wie feature-card/stat-card), wiederverwendbar.
   Klasse "accordion" aufs Toggle-Modul. Titel ist H3 -> font-stretch bleibt 150%
   (Heading-Konvention), nur die GRÖSSE wird gesetzt.
   ========================================================================== */
.accordion.et_pb_toggle{
  border:0 !important;
  border-radius:var(--card-radius) !important;
  background:#fff !important;
  box-shadow:var(--card-shadow) !important;
  margin-bottom:16px !important;
  padding:0 !important;
  transition:transform .28s ease, box-shadow .28s ease !important;
}
.accordion.et_pb_toggle:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--card-shadow-hover) !important;
}
/* Titel: NUR Größe (font-stretch NICHT anfassen -> bleibt 150%) */
.accordion .et_pb_toggle_title{
  font-size:1.25rem !important;
  line-height:1.3 !important;
  margin:0 !important;
  padding:18px 52px 18px 22px !important;
  color:var(--otg-ink, #1a1a1a) !important;
}
/* Chevron sauber zentrieren + Inset rechts (statt Divi-Default right:-10px/top:11px) */
.accordion .et_pb_toggle_title:before{
  top:50% !important;
  transform:translateY(-50%) !important;
  right:18px !important;
  margin:0 !important;
}
.accordion .et_pb_toggle_content{ padding:0 22px 20px !important; }

/* ==========================================================================
   BUTTONS site-weit schlanker (weniger massiv) – Stretch 120% bleibt unangetastet.
   Vorher 20px/Höhe ~46px -> jetzt 16px/~37px wie auf der alten Seite.
   ========================================================================== */
.et_pb_button{
  font-size:16px !important;
  line-height:1.6 !important;
}
/* Padding: muss Divis Icon-!important-Regel (Spezifität 0,4,0) ÜBERBIETEN.
   5x .et_pb_button = (0,5,0) -> gewinnt, ganz ohne Icon/Pfeil. Eltern-unabhängig. */
.et_pb_button.et_pb_button.et_pb_button.et_pb_button.et_pb_button{
  padding:6px 28px !important;
}

/* ==========================================================================
   PAGE-HERO – großzügiges Vertikal-Padding für Unterseiten-Hero-Sektionen
   (alt: 100px o/u). Wiederverwendbar: Klasse "page-hero" auf die Hero-Sektion.
   ========================================================================== */
.page-hero{
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* ==========================================================================
   PAGE-HERO-TEXT – Textspalte der Unterseiten-Heroes: oben-bündig statt
   vertikal zentriert + gleichmäßiger Modul-Abstand. Klasse auf die Text-Spalte.
   ========================================================================== */
.page-hero-text{
  justify-content:flex-start !important;   /* oben-bündig statt center */
  row-gap:16px !important;                  /* gleichmäßiger Abstand der Module */
}
.page-hero-text .accordion.et_pb_toggle{ margin-bottom:0 !important; }  /* Gap übernimmt Abstand, kein Doppel */
/* H1/H2 in der Hero-Textspalte: Divi-eigene Margins/Paddings raus -> nur der
   Flex-Gap bestimmt die Abstände (H1 hatte 22px margin + 10px padding unten!).
   ACHTUNG: nicht h3 (= Akkordeon-Titel). */
.page-hero-text h1,
.page-hero-text h2{ margin:0 !important; padding:0 !important; }
/* Titel + Akzentlinie als enger Block: Linie nah am Titel */
.page-hero-text .et_pb_divider{ margin-top:-8px !important; margin-bottom:-8px !important; }

/* ==========================================================================
   PRODUCT-LIST – pro Zeile: Produktlogo (feste Höhe, alle gleich) + Beschreibung.
   Für den "Available Products"-Akkordeon-Inhalt. Wiederverwendbar.
   ========================================================================== */
.product-list p{ margin:0 0 14px; font-size:.95rem; line-height:1.4; color:#444; }
.product-list p:last-child{ margin-bottom:0; }
.product-list p img{
  height:18px !important;        /* alle Logos gleich hoch */
  width:auto !important;
  vertical-align:middle;
  margin-right:10px;
  position:relative; top:-1px;
}

/* ==========================================================================
   LOGO-SLIDER – Partner-Logos vertikal zentrieren (niedrigere Logos klebten oben).
   Greift auf der Startseite (.home-partners) + überall via Klasse "logo-slider".
   ========================================================================== */
.home-partners .et_pb_group_carousel_track,
.logo-slider .et_pb_group_carousel_track{
  align-items:center !important;     /* Slides vertikal zentrieren -> niedrige Logos mittig, Größe bleibt */
}

/* ==========================================================================
   KARTEN-SYSTEM – globale Stellschrauben (eine Stelle für alle Content-Boxen)
   Radius/Schatten/Padding hier ändern -> wirkt auf alle Karten mit den Variablen.
   ========================================================================== */
:root{
  --card-radius: 16px;
  --card-shadow: 0 10px 30px -16px rgba(20,30,60,.18);
  --card-shadow-hover: 0 18px 40px -18px rgba(20,30,60,.30);
  --card-pad: 32px;
  --card-bg: #f4f2ec;
}
/* Produkt-Karte (Klasse "product-card" auf die Spalte) – nutzt die globalen Variablen */
.product-card{
  display:flex; flex-direction:column;
  background: var(--card-bg) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  padding: var(--card-pad) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}
.product-card:hover{ transform: translateY(-6px) !important; box-shadow: var(--card-shadow-hover) !important; }
/* Beschreibung füllt die Höhe -> Trenner / Product Benefits / Liste / Button
   fluchten über alle Karten (Klasse "product-desc" aufs Beschreibungs-Textmodul). */
.product-desc{ flex:1 1 auto !important; }
.product-desc, .product-desc p{ font-size:14px !important; line-height:1.5 !important; }

/* Produkt-Karte: "Product Benefits"-Label (H4) hat eigenes Margin+Padding unten
   -> raus, damit es näher an den Bullets sitzt (Grün-Highlight bleibt, sitzt am Span). */
.product-card h4{ margin-bottom:0 !important; padding-bottom:0 !important; }

/* ==========================================================================
   UTILITIES – Section-Rhythmus + visuell versteckte Headline (SEO/A11y)
   ========================================================================== */
/* gleicher Vertikal-Rhythmus wie die Startseiten-Sektionen */
.section-pad{
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important;
}
/* sr-only: für Screenreader/SEO sichtbar, optisch versteckt (echte H3 ohne Layout-Einfluss) */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   BENEFITS-LABEL – "Product Benefits" als Label (kein Heading mehr).
   Klasse aufs Text-Modul. Reproduziert den H4-Look (das Grün sitzt am span.highlight).
   ========================================================================== */
.benefits-label p,
.benefits-label h4{
  font-size:20px !important;
  font-weight:750 !important;
  font-stretch:150% !important;
  line-height:1.15 !important;
  color:#0a0808 !important;
  margin:0 !important;
}