/* ==========================================================================
   MARTREXO – Zentrales Design-System für Divi 5.11
   Single Source of Truth für Farben, Typografie, Form & Komponenten.
   Basis: Martrexo_StyleGuide_22.pdf (Stand 11.07.2023)

   WICHTIG – Arbeitsweise mit Divi 5:
   Divi vergibt jedem Modul automatisch eigene Strukturklassen
   (et_pb_section, et_pb_button, et_pb_fullwidth_header …). Dieses
   Stylesheet spricht GENAU DIESE Klassen an. Dadurch tragen normale
   Divi-Standardmodule das Martrexo-Design AUTOMATISCH – ohne dass pro
   Modul eine CSS-Klasse eingetragen werden muss.

   Divi nutzt Inline-Styles + !important. Deshalb arbeiten die Regeln
   hier mit erhöhter Spezifität (body …) und !important, wo nötig.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS  (zentral anpassbar)
   ========================================================================== */
:root {
  --mx-violett:            #472583;
  --mx-orange:             #e84d0e;

  --mx-violett-100:        #75529d;
  --mx-violett-300:        #472583;
  --mx-violett-600:        #2b1657;
  --mx-violett-900:        #17002c;

  --mx-orange-100:         #f39332;
  --mx-orange-300:         #e84d0e;

  --mx-rot-300:            #a61611;
  --mx-rot-600:            #711205;

  --mx-gruen-050:          #ecf5ed;
  --mx-gruen-100:          #cbe5d8;
  --mx-gruen-300:          #7cc5ad;
  --mx-gruen-600:          #007f5a;
  --mx-gruen-900:          #003f27;

  --mx-weiss:              #ffffff;
  --mx-hell:               #f7f5fb;
  --mx-hell-200:           #ede9f4;
  --mx-text:               #211433;
  --mx-text-mute:          #6a6180;
  --mx-text-invert:        #ffffff;

  --mx-font:               "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mx-fw-light:           300;
  --mx-fw-regular:         400;
  --mx-fw-medium:          500;
  --mx-fw-bold:            700;

  --mx-lh-tight:           1.12;
  --mx-lh-snug:            1.3;
  --mx-lh-body:            1.65;

  --mx-fs-hero:            clamp(2.4rem, 5vw, 4rem);
  --mx-fs-h2:              clamp(1.9rem, 3.4vw, 2.9rem);
  --mx-fs-h3:              clamp(1.2rem, 1.6vw, 1.45rem);
  --mx-fs-lead:            clamp(1.1rem, 1.5vw, 1.3rem);
  --mx-fs-body:            clamp(1.0rem, 1.03rem + 0.3vw, 1.2rem);
  --mx-fs-small:           clamp(0.98rem, 1.0rem + 0.2vw, 1.1rem);
  --mx-radius-btn:         999px;
  --mx-radius-card:        28px;
  --mx-radius-media:       32px;
  --mx-radius-badge:       999px;
  --mx-radius-sm:          14px;

  --mx-space-2:            1rem;
  --mx-space-3:            1.5rem;
  --mx-space-4:            2.5rem;
  --mx-section-y:          clamp(3.5rem, 7vw, 6.5rem);

  --mx-shadow-card:        0 18px 44px -22px rgba(23, 0, 44, 0.28);
  --mx-shadow-btn:         0 10px 24px -12px rgba(232, 77, 14, 0.55);
  --mx-ease:               220ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. TYPOGRAFIE – Ubuntu auf Divi-Textelemente
   ========================================================================== */
body,
body .et_pb_module,
body .et_pb_text,
body p,
body li {
  font-family: var(--mx-font);
}

body .et_pb_text,
body .et_pb_module p {
  font-weight: var(--mx-fw-regular);
  line-height: var(--mx-lh-body);
  font-size: var(--mx-fs-body);
}

/* Divi erlaubt pro Textmodul eine feste, kleinere Schriftgröße als
   Override ("Small"-Variante, z.B. 16px statt der fluiden Body-Größe).
   Dadurch wirkt Fließtext an manchen Stellen ohne erkennbaren Grund
   kleiner als der Rest der Seite (u.a. "Für wen ist dieses Angebot
   gedacht?"-Listen). Body-Text soll immer die Design-System-Größe
   nutzen -- bewusst kleinere Bausteine (Karten, Footer, Preisvergleich)
   tragen eigene mx-* Klassen und werden weiter unten (Abschnitt 7)
   gezielt wieder ausgenommen. */
body .et_pb_text p,
body .et_pb_text li,
body .et_pb_module p,
body .et_pb_module li {
  font-size: var(--mx-fs-body) !important;
  line-height: var(--mx-lh-body) !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .et_pb_module_header,
body .et_pb_module h1, body .et_pb_module h2, body .et_pb_module h3 {
  font-family: var(--mx-font);
  font-weight: var(--mx-fw-bold);
  line-height: var(--mx-lh-snug);
  letter-spacing: -0.01em;
  color: var(--mx-violett);
}

body h1,
body .et_pb_fullwidth_header .et_pb_module_header {
  font-size: var(--mx-fs-hero);
  line-height: var(--mx-lh-tight);
}

body h2 { font-size: var(--mx-fs-h2); }

body h3, body h4 {
  font-size: var(--mx-fs-h3);
  font-weight: var(--mx-fw-medium);
}

/* Auf dunklem Divi-Hintergrund: Überschriften weiß */
body .et_pb_bg_layout_dark h1,
body .et_pb_bg_layout_dark h2,
body .et_pb_bg_layout_dark h3,
body .et_pb_bg_layout_dark h4,
body .et_pb_bg_layout_dark .et_pb_module_header,
body .et_pb_section.mx-dark h1,
body .et_pb_section.mx-dark h2,
body .et_pb_section.mx-dark h3,
body .et_pb_section.mx-dark .et_pb_module_header {
  color: var(--mx-text-invert);
}


/* ==========================================================================
   3. BUTTONS – Martrexo-Look auf Divi's et_pb_button
   ========================================================================== */
body .et_pb_button,
body .et_pb_button_module_wrapper .et_pb_button {
  font-family: var(--mx-font) !important;
  font-weight: var(--mx-fw-medium) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  padding: 0.95em 1.9em !important;
  border-radius: var(--mx-radius-btn) !important;
  border: 2px solid transparent !important;
  transition: transform var(--mx-ease), box-shadow var(--mx-ease),
              background var(--mx-ease), color var(--mx-ease) !important;
}

body .et_pb_button:after,
body .et_pb_button:before {
  display: none !important;
}

/* PRIMÄR – orange gefüllt */
body .et_pb_button,
body .et_pb_bg_layout_light .et_pb_button,
body .et_pb_bg_layout_dark  .et_pb_button {
  background-color: var(--mx-orange) !important;
  color: var(--mx-weiss) !important;
  box-shadow: none !important;
}
body .et_pb_button:hover {
  background-color: var(--mx-orange-100) !important;
  color: var(--mx-weiss) !important;
  transform: translateY(-2px);
}

/* SEKUNDÄR – zweiter Button im Header, oder mx-btn-ghost */
body .et_pb_button.et_pb_button_two,
body .et_pb_button.mx-btn-ghost {
  background-color: transparent !important;
  color: var(--mx-violett) !important;
  border-color: var(--mx-violett) !important;
  box-shadow: none !important;
}
body .et_pb_button.et_pb_button_two:hover,
body .et_pb_button.mx-btn-ghost:hover {
  background-color: var(--mx-violett) !important;
  color: var(--mx-weiss) !important;
  border-color: var(--mx-violett) !important;
}

/* SEKUNDÄR auf dunklem Grund. Zwei unabhängige "ist dunkel"-Signale
   gleichzeitig abdecken: Divis eigenes et_pb_bg_layout_dark (spiegelt
   nur die Hintergrundfarbe DES MODULS selbst, z.B. beim Hero) UND
   unsere eigene mx-dark-Sektionsklasse. Beide mit BEIDEN Button-
   Varianten kombiniert -- sonst bleibt z.B. ein et_pb_button_two in
   einer mx-dark-Sektion (oder umgekehrt ein mx-btn-ghost auf einem als
   "dark" erkannten Modul) beim violetten Rand statt Weiß hängen. */
body .et_pb_bg_layout_dark .et_pb_button.et_pb_button_two,
body .et_pb_bg_layout_dark .et_pb_button.mx-btn-ghost,
body .mx-dark .et_pb_button.et_pb_button_two,
body .mx-dark .et_pb_button.mx-btn-ghost {
  color: var(--mx-weiss) !important;
  border-color: rgba(255,255,255,0.55) !important;
}
body .et_pb_bg_layout_dark .et_pb_button.et_pb_button_two:hover,
body .et_pb_bg_layout_dark .et_pb_button.mx-btn-ghost:hover,
body .mx-dark .et_pb_button.et_pb_button_two:hover,
body .mx-dark .et_pb_button.mx-btn-ghost:hover {
  background-color: var(--mx-weiss) !important;
  color: var(--mx-violett) !important;
  border-color: var(--mx-weiss) !important;
}

/* Abstand zwischen den zwei Buttons im Fullwidth-Header (Hero/CTA) --
   sitzen sonst ohne jeden Zwischenraum direkt aneinander. Als Flex mit
   gap, damit der Abstand auch dann stimmt, wenn die Buttons (z. B. in
   einer schmaleren Hero-Spalte) untereinander statt nebeneinander
   landen. */
body .et_pb_header_button_wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
}


/* ==========================================================================
   4. SEKTIONEN – Hintergründe
   ========================================================================== */

/* Fullwidth-Header hat einen EIGENEN Hintergrund (Divi-Default, oft blau).
   Transparent setzen, damit die Sektions-Hintergrundfarbe durchkommt. */
body .et_pb_fullwidth_header,
body .et_pb_fullwidth_header .et_pb_fullwidth_header_container {
  background-color: transparent !important;
}

body .et_pb_section.mx-dark {
  background-color: var(--mx-violett-900) !important;
}
body .et_pb_section.mx-dark,
body .et_pb_section.mx-dark p,
body .et_pb_section.mx-dark .et_pb_text {
  color: rgba(255,255,255,0.85) !important;
}

body .et_pb_section.mx-violett {
  background-color: var(--mx-violett) !important;
}
body .et_pb_section.mx-violett,
body .et_pb_section.mx-violett p,
body .et_pb_section.mx-violett .et_pb_text {
  color: rgba(255,255,255,0.9) !important;
}

body .et_pb_section.mx-light {
  background-color: var(--mx-hell) !important;
}


/* ==========================================================================
   5. KARTEN – et_pb_blurb mit Klasse mx-card
   ========================================================================== */
/* mx-card kann an .et_pb_blurb ODER an einem inneren Element landen.
   Deshalb breit selektieren: das Blurb-Modul, das die Klasse enthält
   ODER ein Blurb, in dem ein Element mit mx-card steckt. */
body .et_pb_blurb.mx-card,
body .et_pb_column.mx-card,
body .et_pb_blurb:has(.mx-card),
body .mx-card {
  background: var(--mx-weiss) !important;
  border: 1px solid var(--mx-hell-200) !important;
  border-radius: var(--mx-radius-card) !important;
  padding: clamp(1.5rem, 2.5vw, 2.2rem) !important;
  box-shadow: var(--mx-shadow-card) !important;
  transition: transform var(--mx-ease), box-shadow var(--mx-ease);
}
body .et_pb_blurb.mx-card:hover,
body .et_pb_column.mx-card:hover,
body .mx-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 54px -24px rgba(23, 0, 44, 0.34) !important;
}
body .et_pb_blurb.mx-card .et_pb_module_header,
body .mx-card .et_pb_module_header,
body .et_pb_blurb.mx-card h4 {
  color: var(--mx-violett) !important;
}
/* Karten-Titel/Text bündig, wenn Blurb-Standardabstände stören */
body .mx-card .et_pb_blurb_content { text-align: left; }

/* Aufzählungen in Karten immer linksbündig: Divi zentriert den Text-Modul-
   Inhalt auf Mobile (siehe media query unten), aber die Bullet-Marker
   bleiben am linken Rand der Box stehen – Text mittig + Marker links sieht
   dann "verrutscht" aus. */
body .mx-card ul,
body .mx-card ol {
  text-align: left !important;
}
body .mx-card li {
  text-align: left !important;
}


/* ==========================================================================
   6. BILDER – Rundung (Styleguide)
   ========================================================================== */
body .et_pb_image img,
body .et_pb_module.mx-round img {
  border-radius: var(--mx-radius-media);
}


/* ==========================================================================
   7. HELFER – Zusatzklassen (mx-*) für Sonderfälle
     mx-dark / mx-violett / mx-light   an Section
     mx-btn-ghost                      an Button (sekundär)
     mx-card                           an Blurb (Karten-Optik)
     mx-round                          an Image
     mx-badge (+ --orange / --green)   an Text-Modul (Pill)
   ========================================================================== */
body .mx-badge {
  display: inline-block;
  font-size: var(--mx-fs-small);
  font-weight: var(--mx-fw-medium);
  padding: 0.4em 0.95em;
  border-radius: var(--mx-radius-badge);
  background: var(--mx-hell-200);
  color: var(--mx-violett);
}
body .mx-badge.mx-badge--orange { background: rgba(232,77,14,0.12); color: var(--mx-orange); }
body .mx-badge.mx-badge--green  { background: var(--mx-gruen-050);  color: var(--mx-gruen-600); }

/* Checkliste (Preisvergleich): mx-check-list an ul, mx-check-list--accent
   färbt die Punkte orange statt violett (für die hervorgehobene Spalte) */
body ul.mx-check-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
body ul.mx-check-list li {
  position: relative;
  padding: 0.5em 0 0.5em 1.7em;
  border-bottom: 1px solid var(--mx-hell-200);
  font-size: var(--mx-fs-small) !important;
  line-height: 1.4 !important;
}
body ul.mx-check-list li:last-child { border-bottom: none; }
body ul.mx-check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--mx-violett);
}
body ul.mx-check-list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 1.02em;
  width: 7px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
body ul.mx-check-list.mx-check-list--accent li::before { background: var(--mx-orange); }

/* Klemmbrett-Karte ("Ebenfalls an Bord"): schmale Karte mit Clip-Optik
   oben, statt einer Karte über die volle Sektionsbreite. Kombiniert mit
   mx-check-list für die Häkchen-Punkte. */
body .mx-clipboard {
  position: relative;
  max-width: 420px;
  margin-top: 18px;
}
body .mx-clipboard::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 26px;
  background: var(--mx-violett);
  border-radius: 7px;
}
body .mx-clipboard::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 13px;
  background: var(--mx-hell);
  border: 2px solid var(--mx-violett);
  border-radius: 4px;
}
body .mx-clipboard h4 {
  margin-top: 0.2em;
}

/* Kachel-Raster "In jedem Tarif enthalten": mx-inc-grid > mx-inc-item
   (Icon + Titel + Text). Ungerade letzte Kachel spannt volle Breite. */
body .mx-inc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
body .mx-inc-item {
  background: var(--mx-weiss);
  border: 1px solid var(--mx-hell-200);
  border-radius: 22px;
  padding: 26px 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
body .mx-inc-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
body .mx-inc-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(71, 37, 131, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
}
body .mx-inc-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--mx-violett);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body .mx-inc-item h4 {
  margin: 0 0 4px;
  color: var(--mx-text);
  font-weight: var(--mx-fw-medium);
  font-size: 1.05rem;
}
body .mx-inc-item p {
  margin: 0;
  color: var(--mx-text-mute);
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}
@media (max-width: 767px) {
  body .mx-inc-grid { grid-template-columns: 1fr; }
}

/* Preiskarten (Drei Tarife / Leistungsvergleich): mx-tier-card im Inhalt +
   mx-tier-cta am CTA-Absatz drücken den Button in jeder Karte auf die
   gleiche Höhe (unabhängig von der Textlänge darüber).
   Wichtig: htmlAttributes.class (Advanced > CSS Class) wird von diesem
   Divi-5.11-Setup beim direkten Schreiben ins post_content NICHT gerendert
   (weder an Section, Column noch Text-Modul – geprüft) – daher hier KEINE
   eigene Klasse, sondern :only-child (Divis Spalte ist bereits von Haus aus
   display:flex/flex-direction:column; das einzige Text-Modul darin bekommt
   flex:1, um die volle, durch die Row gleich gestreckte Spaltenhöhe
   auszufüllen). Bewusst ohne :has(), das u.a. in Firefox < 121 fehlt. */
body .et_pb_column > .et_pb_module:only-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body .et_pb_column > .et_pb_module:only-child > .et_pb_text_inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
body .mx-tier-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
body .mx-tier-card .mx-tier-cta { margin-top: auto; }

/* Kicker-Label über Tarifnamen/Karten-Titeln (z.B. "Newsletter &
   Kampagnen", "B2B2C-Enablement"): im Content uneinheitlich mit 12-13px
   und 0.06-0.08em Laufweite direkt ausgezeichnet -- hier vereinheitlicht
   und die Laufweite eingefangen, da Buchstabenabstand in dieser Größe
   schnell zu weit wirkt. */
body .et_pb_text p[style*="uppercase"] {
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}

/* Mini-Buttons für Preiskarten-CTAs (mx-mini-btn / --primary) */
body a.mx-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-weight: var(--mx-fw-medium);
  font-size: 0.95rem;
  padding: 0.7em 1.6em;
  border-radius: var(--mx-radius-btn);
  border: 2px solid var(--mx-violett);
  color: var(--mx-violett) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background var(--mx-ease), color var(--mx-ease),
              transform var(--mx-ease), box-shadow var(--mx-ease);
}
body a.mx-mini-btn:hover {
  background: var(--mx-violett);
  color: var(--mx-weiss) !important;
  transform: translateY(-2px);
}
body a.mx-mini-btn.mx-mini-btn--primary {
  background: var(--mx-orange);
  border-color: var(--mx-orange);
  color: var(--mx-weiss) !important;
  box-shadow: var(--mx-shadow-btn);
}
body a.mx-mini-btn.mx-mini-btn--primary:hover {
  background: var(--mx-orange-100);
  border-color: var(--mx-orange-100);
  color: var(--mx-weiss) !important;
}

/* ===== Text-Links (Fließtext) =====
   Divi setzt für <a> in Textmodulen keine eigene Farbe – ohne dieses
   Override blieben Links im Standard-Browser-Blau. Analog zur
   Überschriften-Regel oben: heller Grund -> dunkles Lila, dunkler Grund
   (mx-dark bzw. von Divi selbst als "dunkel" erkannter Modul-Hintergrund)
   -> Weiß wie im Footer. */
body .et_pb_text a,
body .et_pb_blurb_content a,
body .et_pb_toggle_content a,
body .et_pb_tab_content a {
  color: var(--mx-violett);
}
body .et_pb_text a:hover,
body .et_pb_blurb_content a:hover,
body .et_pb_toggle_content a:hover,
body .et_pb_tab_content a:hover {
  color: var(--mx-orange);
}

/* et_pb_bg_layout_dark sitzt bei Divi teils direkt AM Textmodul (nicht nur
   an einem umschließenden Container) – deshalb hier ohne Einschränkung auf
   .et_pb_text etc., sonst greift die Regel bei "gleichem Element" nicht. */
body .et_pb_bg_layout_dark a,
body .et_pb_section.mx-dark a {
  color: rgba(255, 255, 255, 0.85);
}
body .et_pb_bg_layout_dark a:hover,
body .et_pb_section.mx-dark a:hover {
  color: #ffffff;
}

/* ===== Footer ===== */
.mx-footer-brand,
.mx-footer-nav,
.mx-footer-trust,
.mx-footer-bottom {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Spaltenüberschriften – aktuell zu dunkel */
.mx-footer-nav h4,
.mx-footer-trust h4 {
  color: #ffffff !important;
  font-weight: 700;
  margin-bottom: 0.6em;
}

/* Wordmark-Block */
.mx-footer-logo { color: #ffffff; font-weight: 700; font-size: 1.15rem; }
.mx-footer-sub  { color: rgba(255, 255, 255, 0.60); }
.mx-footer-desc { color: rgba(255, 255, 255, 0.72); }

/* Links */
.mx-footer-nav a,
.mx-footer-bottom a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
}
.mx-footer-nav a:hover,
.mx-footer-bottom a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Aufzählungspunkte in hellem Violett statt dunkel */
.mx-footer-nav ul,
.mx-footer-trust ul { list-style: none; padding-left: 0; }
.mx-footer-nav li,
.mx-footer-trust li { position: relative; padding-left: 1em; margin-bottom: 0.35em; }
.mx-footer-nav li::before,
.mx-footer-trust li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: #8f6fc4;
}

/* Bottom-Zeile etwas ruhiger */
.mx-footer-bottom { font-size: 0.9rem; color: rgba(255, 255, 255, 0.70) !important; }

/* ==========================================================================
   8. TABLET (768-980px) -- dreispaltige Reihen
   ========================================================================== */
/* Divi hält dreispaltige Reihen (jede Spalte 8 von 24 Grid-Einheiten,
   Klasse "..._8_24_tablet") bis zum Tablet-Breakpoint zusammen -- erst ab
   767px stapeln sie sich. Bei drei gleich breiten Spalten bleiben auf
   Tablet-Breite (768-980px) dadurch nur noch ca. 220-250px pro Karte,
   abzüglich Padding -- zu wenig für normalen Fließtext in den Tarif-
   und Leistungsvergleichs-Karten: einzelne (oft lange, zusammengesetzte)
   Wörter brechen mitten im Wort um, z.B. "Zentrales Asset-Management"
   oder "Automations" (siehe Preise-Seite "Drei Tarife" und "Detaillierter
   Leistungsvergleich", identisches Kartenschema auch auf der Startseite
   unter "martrexo passt immer"). Diese Spalten sollen wie auf Mobile
   bereits ab dem Tablet-Breakpoint untereinander stehen. Bewusst nur auf
   das dreispaltige 8/24-Schema begrenzt -- zweispaltige Reihen (12/24)
   haben auf 768px noch ausreichend Platz pro Spalte und bleiben nebenein-
   ander stehen. */
@media (max-width: 980px) {
    body .et_pb_row:has(> [class*="et_flex_column_"][class*="_8_24_tablet"]) {
        flex-wrap: wrap !important;
    }
    body [class*="et_flex_column_"][class*="_8_24_tablet"] {
        width: 100% !important;
        flex-basis: 100% !important;
    }
}


@media (max-width: 767px) {
    /* Divi-Standard: Rows sind auf 80% Breite mit auto-margin zentriert
       (Desktop-Vorgabe, damit Vollbild-Sektionen einen Innenabstand
       bekommen). Auf Mobile bleiben dadurch beidseitig ~10% der
       Bildschirmbreite ungenutzt -- Text wirkt unnötig schmal und
       bricht sehr früh um. Rows sollen die volle Breite ausnutzen; der
       optische Rand kommt stattdessen aus einem festen, kompakteren
       Padding (nur auf oberster Ebene -- verschachtelte Rows sitzen
       bereits in einer Spalte mit eigenem Rand und bekommen sonst
       einen doppelten Einzug). Gilt für ALLE Sektionen/Seiten, nicht
       nur einzelne Row-Instanzen. */
    body .et_pb_row {
        width: 100% !important;
    }
    body .et_pb_row:not(.et_pb_row_nested) {
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box;
    }
    /* Der Hero (Fullwidth Header) bekommt sein Padding weiter unten
       selbst -- sonst addieren sich Row- und Hero-Padding zu einem
       doppelt so breiten Rand. */
    body .et_pb_row:has(.et_pb_fullwidth_header) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hero: horizontales Padding */
    body .et_pb_fullwidth_header_container {
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Hero: header-content muss volle Breite bekommen. Generisch auf
       die Modulklasse (nicht die Instanz "_0") gescoped, damit das auf
       jeder Seite greift, unabhängig davon, das wievielte Fullwidth-
       Header-Modul der Seite es ist. */
    body .et_pb_fullwidth_header .header-content-container,
    body .et_pb_fullwidth_header .header-content {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
    }

    /* Hero: Button-Wrapper muss selbst volle Breite haben */
    body .et_pb_header_button_wrapper {
        display: block !important;
        width: 100% !important;
    }

    /* Hero: Abstand zwischen den Buttons */
    body .et_pb_header_button_wrapper > *:not(:last-child) {
        margin-bottom: 16px !important;
    }

    /* Hero: dekoratives Hintergrundbild ausblenden. Viele Hero-Sektionen
       tragen einen horizontalen Verlauf (deckend links, transparent
       rechts) kombiniert mit einem großen Illustrationsbild, das rechts
       hinter dem Verlauf hervorblitzt -- auf Desktop ein gewollter
       Bildausschnitt, der neben dem schmaleren Textblock sitzt. Auf
       Mobile ist die Sektion selbst schon fast so schmal wie früher nur
       der transparente Verlaufsanteil -- das Bild landet dadurch
       zerschnitten und ohne erkennbaren Bildausschnitt als kleiner,
       unmotivierter Fleck am Rand (z.B. Service-Hero). Die Sektion hat
       immer zusätzlich eine eigene background-color als Fallback --
       Verlauf + Bild einfach entfernen, statt sie an die schmale Breite
       anzupassen. */
    body .et_pb_section:has(> .et_pb_row_inner .et_pb_fullwidth_header, > .et_pb_row .et_pb_fullwidth_header, > .et_pb_fullwidth_header) {
        background-image: none !important;
    }

    /* Headline-Größe */
    body h1,
    body .et_pb_fullwidth_header .et_pb_module_header {
        font-size: 34px !important;
        line-height: 42px !important;
    }

    /* Sicherheitsnetz: falls trotzdem mal ein Wort zu breit ist */
    body .et_pb_module_header {
        overflow-wrap: break-word;
    }

    /* Alle Mobile-Buttons außerhalb des Heros */
    body .et_pb_button {
        padding: 12px 24px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    /* Hero-Buttons: volle Breite, beide gleich lang.
       "white-space: nowrap" liess längere Button-Texte (z.B. "Technische
       Details", "Technische Fragen klären") aus dem Button-Rahmen
       herauslaufen, da der Text bei fester Breite nicht umbrechen durfte.
       Umbruch erlauben, damit der Text immer im Rahmen bleibt. */
    body .et_pb_header_button_wrapper .et_pb_button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
        font-size: 16px !important;
        padding: 12px 24px !important;
        margin-right: 0 !important;
    }

    /* Divi markiert Spalten, die auf Phone volle Breite bekommen sollen,
       selbst mit der Klasse "..._24_24_phone" (24 von 24 Grid-Einheiten
       = 100%). Genau diese Regel greift auf dieser Seite an mehreren
       Stellen nicht (Header, Footer, Hero-Spalte "martrexo passt immer",
       Button-Spalte "Technik & Betrieb" …) -> Spalten bleiben auf ihrer
       Desktop-Breite und die Seite nutzt auf Mobile nur einen Bruchteil
       der Breite aus. Divis eigene Kennzeichnung wird hier erzwungen. */
    body [class*="et_flex_column_"][class*="_24_24_phone"] {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Mehrere Rows stehen auf "flex-wrap: nowrap", wodurch ihre Spalten
       nicht untereinander umbrechen, sondern nebeneinander gequetscht
       werden bzw. (in Kombination mit obiger 100%-Breite) übereinander
       zu liegen kommen. Rows mit mehreren Spalten müssen auf Mobile
       umbrechen können. */
    body .et_pb_row {
        flex-wrap: wrap !important;
    }

    /* Mehrspaltige Rows haben eine feste Desktop-Höhe (z.B. für 3-4
       nebeneinanderstehende Kacheln). Auf Mobile stapeln sich die Spalten,
       aber die Row-Höhe bleibt fix -> Inhalt läuft aus der Row heraus und
       überlappt den nächsten Abschnitt bzw. sich selbst
       (u.a. "martrexo passt immer", "Was martrexo im Kern stark macht",
       "Ausgezeichnet. Zertifiziert."). Row muss ihrem gestapelten Inhalt
       folgen. */
    body .et_pb_row {
        height: auto !important;
        min-height: auto !important;
    }
    body .et_pb_row > .et_pb_column {
        height: auto !important;
        min-height: auto !important;
    }

    /* Textausrichtung ist uneinheitlich: manche Textblöcke sind (vom
       Desktop-Layout übernommen, wo sie z.B. neben einem Bild stehen)
       linksbündig, andere zentriert. Auf Mobile, wo alles einspaltig
       untereinander steht, wirkt das inkonsistent. Einheitlich zentrieren
       -- Header/Footer (eigene Theme-Builder-Vorlagen) ausgenommen, die
       ihre eigene, bewusst linksbündige Navigation/Struktur behalten. */
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_text_inner,
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_module_header {
        text-align: center !important;
    }

    /* Ausnahme 1 -- Fließtext: eine zentrierte Überschrift über kurzem
       Intro liest sich gut, aber mehrzeiliger Fließtext (mehrere Absätze
       oder eine Liste) wird zentriert deutlich schwerer lesbar als
       linksbündig. Textblöcke mit mehr als einem Absatz oder mit einer
       Liste gelten als Fließtext und werden linksbündig gestellt. */
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_text_inner:has(p ~ p),
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_text_inner:has(ul),
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_text_inner:has(ol) {
        text-align: left !important;
    }
    /* Divi/Autoren setzen bei mehreren Absätzen oft zusätzlich ein
       inline style="text-align:center" direkt am <p> (Desktop-Layout
       zentriert). Ein inline style schlägt Vererbung vom Container --
       ohne diese Regel bliebe genau der Fließtext zentriert, den obige
       Regel eigentlich linksbündig stellen soll. */
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_text_inner:has(p ~ p) p,
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_text_inner:has(ul) li,
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_text_inner:has(ol) li {
        text-align: left !important;
    }

    /* Abschluss-CTAs mit zwei eigenständigen Button-Modulen (statt
       Hero-buttonOne/buttonTwo) -- z.B. "Welche Struktur soll Martrexo
       tragen?" -> "Demo anfragen" + "Lösung besprechen". Divi speichert
       pro Button eine feste Ausrichtung, damit das Paar auf Desktop
       (nebeneinander, in zwei Spalten) wie ein zusammenhängendes Duo
       wirkt -- typischerweise rechtsbündig + linksbündig, sodass beide
       sich in der Mitte treffen. Diese Ausrichtung gilt seitenweit
       unverändert für alle Breakpoints: sobald die Spalten auf Mobile
       untereinander stapeln, klebt dadurch ein Button rechts und der
       andere links im jeweils vollbreiten Container, statt sauber
       untereinander zu stehen. Auf Mobile deshalb immer zentrieren. */
    body .et_pb_button_module_wrapper {
        text-align: center !important;
    }
    body .et_pb_button_module_wrapper .et_pb_button {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ausnahme 2 -- Hero (Fullwidth Header): Titel und Absatztext bilden
       einen zusammenhängenden Block. Divi richtet den Absatztext nach
       der pro Seite gewählten Ausrichtung (links/zentriert) aus, während
       obige Regel den Titel separat zentriert -- das ergibt auf manchen
       Seiten einen zentrierten Titel über linksbündigem Text. Der Titel
       folgt stattdessen der Ausrichtung des Hero-Absatzes (gleiche
       Selektor-Basis wie oben, damit die Spezifität überstimmt). */
    body .et_pb_section:not([class*="_tb_header"]):not([class*="_tb_footer"]) .et_pb_fullwidth_header .et_pb_module_header {
        text-align: inherit !important;
    }
}


/* ==========================================================================
   9. GATEWAY-SERVICES (Seite 244) -- "Vier gute Gründe"-Karten
   ========================================================================== */
/* Struktur: zwei Spalten, jede mit 2 Karten + einem eigenen CTA-Button
   darunter (Spalte 1: Datensouveränität, CSA-zertifiziert, "Gateway-
   Zugang anfragen" / Spalte 2: BSI Hall of Fame, M3AAWG-Mitglied,
   "White-Label / API ansehen"). Divi kennt keine spalten-übergreifende
   Zeilenausrichtung -- Kartenhöhe wächst rein mit dem eigenen Text. */
@media (min-width: 768px) and (max-width: 980px) {
    /* Tablet: die Spalten bleiben nebeneinander, aber schmaler Text
       bricht anders um als auf Desktop -- inhaltlich zusammengehörige
       Karten (gleiche Position in Spalte 1 und 2, z.B. "CSA-zertifiziert"
       neben dem deutlich längeren "M3AAWG-Mitglied") werden dadurch
       sichtbar unterschiedlich hoch. Fix: Spalten werden für das Layout
       unsichtbar (display:contents), die Zeile wird zum Grid mit
       spaltenweisem Auto-Flow -- das entspricht exakt der bestehenden
       DOM-Reihenfolge (erst beide Karten + Button von Spalte 1, dann von
       Spalte 2) und gleicht dabei automatisch die Höhe jeder Karten-Zeile
       über beide Spalten hinweg an. */
    body.page-id-244 .et_pb_row_7 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        column-gap: 5.5%;
        row-gap: 40px;
    }
    body.page-id-244 .et_pb_row_7 > .et_pb_column {
        display: contents;
    }
    body.page-id-244 .et_pb_row_7 .et_pb_text {
        height: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   10. HAMBURGER-ICON – Farbe unabhängig von der Bildschirmbreite
   ========================================================================== */
/* Divi hinterlegt für das Menü-Icon standardmäßig eine globale Farbe
   (--gcid-primary-color, hier Divi-Blau) ohne Media Query. Violett wird
   dafür nur über zwei eigene Divi-Regeln unterhalb von 1023px bzw. 767px
   nachgereicht. Sobald das horizontale Desktop-Menü selbst (weil die
   Menüpunkte nicht mehr nebeneinanderpassen) schon bei größerer Breite
   auf das Hamburger-Icon zurückfällt -- z.B. zwischen ca. 1024px und der
   eigentlichen Desktop-Breite, zwischen Tablet und Desktop -- greift
   keine der beiden Regeln mehr, und das Icon bleibt Divi-Blau statt
   Violett. Fix: Farbe unabhängig von der Bildschirmbreite fest setzen. */
body .mobile_nav .mobile_menu_bar::before {
    color: var(--mx-violett) !important;
}


@media (max-width: 767px) {
    /* Mobile: beide Spalten stapeln komplett (Spalte 1 komplett, dann
       Spalte 2) -- der erste CTA-Button landet dadurch mitten zwischen
       den vier Karten (nach Karte 2, vor Karte 3) statt am Ende. Gleicher
       display:contents-Kniff wie oben, diesmal als Flex-Spalte mit
       "order": alle vier Karten zuerst (order 1), beide Buttons ans Ende
       (order 2) -- innerhalb derselben Order-Gruppe bleibt die
       ursprüngliche Reihenfolge erhalten. */
    body.page-id-244 .et_pb_row_7 {
        display: flex !important;
        flex-direction: column;
        gap: 30px;
    }
    body.page-id-244 .et_pb_row_7 > .et_pb_column {
        display: contents;
    }
    body.page-id-244 .et_pb_row_7 .et_pb_text {
        order: 1;
    }
    body.page-id-244 .et_pb_row_7 .et_pb_button_module_wrapper {
        order: 2;
    }
}

/* a) grauen, fetten Eltern-Balken neutralisieren */
body .et_pb_menu .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent !important;
    font-weight: 600 !important;
}

/* b) Browser-Bullets im Mobilmenü abschalten */
body .et_pb_menu .et_mobile_menu,
body .et_pb_menu .et_mobile_menu li {
    list-style: none !important;
}

/* c) Unterpunkte als Ebene 2 kennzeichnen (Menütext ist rechtsbündig,
      der Einzug muss deshalb rechts sitzen) */
body .et_pb_menu .et_mobile_menu .sub-menu {
    padding-left: 0 !important;
}
body .et_pb_menu .et_mobile_menu .sub-menu > li > a {
    padding-right: 24px !important;
    opacity: 0.85;
}

/* ==========================================================================
   11. HAMBURGER-MENÜ – kein "Zwischenmenü"-Look
   ========================================================================== */
/* Ausgangslage: Das Hamburger-Menü ist NICHT erst auf Tablet/Phone aktiv,
   sondern schon ab 1300px. Das kommt aus handgeschriebenem CSS, das an ZWEI
   Stellen in der Datenbank liegt (identischer Block):
     - Divi -> Theme-Optionen -> Allgemein -> Benutzerdefiniertes CSS
     - Design -> Customizer -> Zusaetzliches CSS
   Es blendet in @media (min-width:981px) and (max-width:1300px)
   .et-menu / .et_pb_menu__menu aus und .et_mobile_nav_menu ein -- weil die
   fuenf Menuepunkte plus Logo plus CTA-Button in der 18/24-Spalte des Headers
   unterhalb von ~1300px nicht mehr einzeilig passen (bei 1024px braeuchte das
   Menue 728px, die Spalte ist aber nur 603px breit).

   Darin sehen "Gateway-Services" und "Deliverability" wie Ueberschriften einer
   zusaetzlichen Menueebene aus. Sie sind aber ganz normale Top-Level-Eintraege
   der WP-Navigation "Hauptnavigation" mit Unterpunkten -- Divi hinterlegt
   jeden Eintrag mit Unterpunkten grau und fett:
     .et_mobile_menu .menu-item-has-children > a {
        font-weight:700; background-color:rgba(0,0,0,.03) }
   Zusaetzlich fehlt im Divi-5-Menuemodul der list-style-Reset fuer
   ul.et_mobile_menu, deshalb sind die Browser-Bullets sichtbar.

   Fix unten: grauer Balken + Bullets weg, Unterpunkte stattdessen ueber
   leichten Einzug/Deckkraft als Ebene 2 erkennbar. Damit liest sich das Panel
   als EIN Menue statt als vorgeschaltetes Zwischenmenue. */

/* a) grauen, fetten Eltern-Balken neutralisieren */
body .et_pb_menu .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent !important;
    font-weight: 600 !important;
}

/* b) Browser-Bullets im Mobilmenue abschalten */
body .et_pb_menu .et_mobile_menu,
body .et_pb_menu .et_mobile_menu li {
    list-style: none !important;
}

/* c) Unterpunkte als Ebene 2 kennzeichnen (Menuetext ist rechtsbuendig,
      der Einzug muss deshalb rechts sitzen) */
body .et_pb_menu .et_mobile_menu .sub-menu {
    padding-left: 0 !important;
}
body .et_pb_menu .et_mobile_menu .sub-menu > li > a {
    padding-right: 24px !important;
    opacity: 0.85;
}