/* ==========================================================================
   smartEngin – Theme-Styles
   Alles wird über CSS-Variablen (--se-*) gesteuert. Die Standardwerte hier
   werden von der smartEngin-Einstellungsseite live überschrieben (Schieberegler,
   Farbwähler usw.). Nichts hier muss von Hand geändert werden.
   ========================================================================== */

:root {
  /* --- Markenfarben (Startwerte) --- */
  --se-color-primary:        #37B971;
  --se-color-primary-hover:  #2ea863;
  --se-color-secondary:      #4ED66F;
  --se-color-dark-1:         #102332;
  --se-color-dark-2:         #11314A;
  --se-color-neutral:        #EAECE7;
  --se-color-white:          #FFFFFF;
  --se-color-on-primary:     #FFFFFF;

  /* --- Rollen --- */
  --se-color-body-bg:        var(--se-color-neutral);
  --se-color-body-text:      var(--se-color-dark-2);
  --se-color-heading:        var(--se-color-dark-1);
  --se-color-link:           var(--se-color-primary);
  --se-color-link-hover:     var(--se-color-dark-2);

  /* --- Abstände (8px-Skala) --- */
  --se-space-xs:   8px;
  --se-space-s:   16px;
  --se-space-m:   24px;
  --se-space-l:   32px;
  --se-space-xl:  48px;
  --se-space-2xl: 64px;
  --se-space-3xl: 96px;
  --se-space-gutter: 24px;          /* seitlicher Innenabstand */

  /* --- Layout --- */
  --se-menu-width: 1200px;          /* max. Breite Hauptmenü/Container */
  --se-content-width: 760px;

  /* --- Schrift --- */
  --se-font-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --se-font-size-base: 16px;
  --se-line-height-base: 1.3;
  --se-font-weight-heading: 600;

  /* --- Buttons --- */
  --se-radius-button: 999px;
  --se-radius-card:    16px;
  --se-kachel-radius-home: 16px;   /* Eckenrundung der Kacheln auf der Startseite */
  --se-btn-padding-y:  12px;
  --se-btn-padding-x:  24px;
  --se-btn-padding-y-lg: 16px;
  --se-btn-padding-x-lg: 32px;
  --se-btn-border-width: 2px;
  --se-color-outline:  var(--se-color-dark-2);
  --se-color-outline-hover: var(--se-color-dark-2);
  /* CTA-Button (Header, oben rechts) */
  --se-cta-bg:        var(--se-color-primary);
  --se-cta-text:      var(--se-color-on-primary);
  --se-cta-hover-bg:  var(--se-color-primary-hover);
  --se-cta-border:    var(--se-color-primary);

  /* --- Header-Bereiche --- */
  --se-topbar-bg:       var(--se-color-dark-2);
  --se-topbar-text:     var(--se-color-white);
  --se-topbar-font-size: 13px;
  --se-topbar-padding-y: 8px;
  --se-topbar-justify:  flex-end;

  --se-header-bg:       var(--se-color-white);
  --se-header-text:     var(--se-color-dark-2);
  --se-header-padding-y: 16px;
  --se-logo-base:       44px;   /* Grundhöhe Logo bei 100 % */
  --se-logo-scale:      100;    /* Logo-Größe in % (über Einstellungen) */
  --se-nav-gap:         28px;
  --se-nav-font-size:   16px;
  --se-nav-font-weight: 600;

  --se-breadcrumb-bg:   var(--se-color-neutral);
  --se-breadcrumb-text: var(--se-color-dark-2);
  --se-breadcrumb-font-size: 13px;
  --se-breadcrumb-padding-y: 10px;

  /* --- Footer --- */
  --se-footer-bg:       var(--se-color-dark-1);
  --se-footer-text:     #C7D2DC;
  --se-footer-heading:  var(--se-color-white);
  --se-footer-link:     #C7D2DC;
  --se-footer-link-hover: var(--se-color-secondary);
  --se-footer-padding-y: 64px;
  --se-footer-col-gap:  32px;
  --se-footer-link-gap: 10px;
  --se-footer-logo-scale: 100;
  --se-footer-btn-bg:    var(--se-color-primary);
  --se-footer-btn-hover: var(--se-color-primary-hover);
  --se-footer-btn-text:  #FFFFFF;

  /* --- Effekte --- */
  --se-shadow-soft:   0 4px 16px rgba(16,35,50,0.10);
  --se-shadow-medium: 0 8px 28px rgba(16,35,50,0.16);
  --se-glow:          0 0 24px rgba(78,214,111,0.45);
  --se-transition:    180ms ease;
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
body {
  font-family: var(--se-font-base);
  font-size: var(--se-font-size-base);
  line-height: var(--se-line-height-base);
  color: var(--se-color-body-text);
  background-color: var(--se-color-body-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--se-font-base);
  font-weight: var(--se-font-weight-heading);
  color: var(--se-color-heading);
  line-height: 1.2;
}

a { color: var(--se-color-link); transition: color var(--se-transition); }
a:hover { color: var(--se-color-link-hover); }

/* zentrale Breite für Header/Footer-Innenbereiche */
.se-container {
  max-width: var(--se-menu-width);
  margin-inline: auto;
  padding-inline: var(--se-space-gutter);
}

/* --------------------------------------------------------------------------
   Header-Wrapper – keine Abstände zwischen den drei Leisten
   (Topbar- und Breadcrumb-Leiste werden von den Blöcken gestylt: blocks.css)
   -------------------------------------------------------------------------- */
.se-site-header { gap: 0 !important; }
.se-site-header > * { margin-block: 0 !important; }

/* Alle drei Leisten nutzen denselben zentrierten Container – dadurch fluchten
   Topbar-Links, Hauptmenü-Inhalt und Breadcrumb exakt untereinander. */
.se-site-header .se-container {
  max-width: var(--se-menu-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--se-space-gutter, 24px);
  box-sizing: border-box;
  width: 100%;
}

/* WICHTIG: WordPress setzt zwischen Header und Inhalt einen globalen
   Block-Abstand. Der erzeugt unter der Breadcrumb eine neutrale Lücke, die
   wie eine zu hohe Leiste aussieht. Hier komplett entfernen. */
.se-site-header { margin-block: 0 !important; }
.se-main { margin-block-start: 0 !important; padding-block-start: 0 !important; }
.se-site-header + * { margin-block-start: 0 !important; }

/* --------------------------------------------------------------------------
   Header – Zeile 2: Hauptmenü
   -------------------------------------------------------------------------- */
.se-header {
  background: var(--se-header-bg);
  color: var(--se-header-text);
  position: relative;
  z-index: 50;
  width: 100%;
}
.se-header .se-container {
  display: flex;
  align-items: center;            /* vertikal mittig */
  justify-content: space-between;
  gap: var(--se-space-l);
  padding-block: var(--se-header-padding-y);
  min-height: 0;
}
.se-header .wp-block-site-logo,
.se-header .wp-block-site-logo a { display: flex; align-items: center; }
.se-header .wp-block-site-logo img,
.se-header .custom-logo {
  height: calc(var(--se-logo-base, 44px) * var(--se-logo-scale, 100) / 100);
  width: auto;
  display: block;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Hauptmenü (smartengin/main-nav) – Menüpunkte, Untermenü & Mega-Menü
   kommen aus smartEngin → Header → Menüleiste 2.
   -------------------------------------------------------------------------- */
.se-main-nav {
  font-size: var(--se-nav-font-size);
  font-weight: var(--se-nav-font-weight);
  position: relative;
}
.se-main-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--se-header-text);
  cursor: pointer;
  padding: 4px;
}
.se-main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--se-nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.se-main-nav__item { position: relative; }
.se-main-nav__link { color: var(--se-header-text); text-decoration: none; display: inline-flex; align-items: center; }
.se-main-nav__link:hover { color: var(--se-color-primary); }
.se-main-nav__toggle-sub {
  background: transparent; border: 0; padding: 0 0 0 4px; margin: 0; cursor: pointer;
  color: inherit; font-size: 12px; line-height: 1; vertical-align: middle;
}

/* Untermenü (Dropdown) – Inhalt normal (nicht fett wie das Hauptmenü) */
.se-main-nav__dropdown,
.se-main-nav__mega { font-weight: 400; }

.se-main-nav__dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 10px;
  min-width: 220px; background: #fff; color: var(--se-color-body-text);
  border-radius: var(--se-radius-card, 12px); box-shadow: var(--se-shadow-medium, 0 8px 28px rgba(16,35,50,0.16));
  list-style: none; padding: 10px 0; margin-inline-start: 0;
  display: none; z-index: 100;
}
.se-main-nav__dropdown li { margin: 0; }
.se-main-nav__dropdown a { display: block; padding: 8px 20px; color: var(--se-color-body-text); text-decoration: none; }
.se-main-nav__dropdown a:hover { color: var(--se-color-primary); background: var(--se-color-neutral, #EAECE7); }

/* Mega-Menü: volle Bildschirmbreite, Oberkante per JS direkt unter die
   Breadcrumb (Header-Unterkante) gesetzt. Inhalt bleibt zentriert. */
.se-main-nav__mega {
  position: fixed;
  top: 0; /* wird per main-nav.js auf die Header-Unterkante gesetzt */
  left: 0; right: 0; width: 100%;
  min-height: var(--se-submenu-min-height, 0);
  background: #fff; color: var(--se-color-body-text);
  box-shadow: var(--se-shadow-medium, 0 8px 28px rgba(16,35,50,0.16));
  padding: var(--se-space-l, 32px) 0;
  display: none; z-index: 200;
}
.se-main-nav__mega-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr) minmax(260px, 1fr);
  gap: var(--se-space-l, 32px);
  max-width: var(--se-menu-width, 1200px);
  margin: 0 auto;
  padding: 0 var(--se-space-gutter, 24px);
}

/* Öffnen NUR per Klick/Tap (JS setzt .is-open) – nicht beim bloßen Überfahren */
.se-main-nav__item.is-open > .se-main-nav__dropdown,
.se-main-nav__item.is-open > .se-main-nav__mega {
  display: block;
}

/* CTA-Button vertikal mittig, bündig rechts, ohne Eigenabstände */
.se-header .se-cta { display: flex; align-items: center; margin: 0; margin-left: auto; }
.se-header .se-cta .wp-block-button { margin: 0; display: flex; align-items: center; }
.se-header .se-cta .wp-block-button__link { margin: 0; }

/* Konfigurierbarer CTA-Button (smartEngin → Header → CTA-Button) */
.se-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--se-font-base);
  font-weight: 600;
  border-radius: var(--se-radius-button);
  padding: var(--se-btn-padding-y) var(--se-btn-padding-x);
  background: var(--se-cta-bg);
  color: var(--se-cta-text);
  border: var(--se-btn-border-width, 2px) solid var(--se-cta-border);
  text-decoration: none;
  box-shadow: var(--se-shadow-soft);
  transition: background var(--se-transition), color var(--se-transition), border-color var(--se-transition);
}
.se-cta-btn:hover { background: var(--se-cta-hover-bg); color: var(--se-cta-text); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.se-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--se-font-base);
  font-weight: 600;
  border-radius: var(--se-radius-button);
  padding: var(--se-btn-padding-y) var(--se-btn-padding-x);
  background: var(--se-color-primary);
  color: var(--se-color-on-primary);
  text-decoration: none;
  border: var(--se-btn-border-width, 2px) solid transparent;
  transition: background var(--se-transition), color var(--se-transition), box-shadow var(--se-transition);
  cursor: pointer;
}
.wp-block-button__link:hover,
.se-btn:hover { background: var(--se-color-primary-hover); color: var(--se-color-on-primary); }

/* Sekundär: Outline (Kontur über smartEngin → Buttons konfigurierbar) */
.is-style-outline .wp-block-button__link,
.se-btn--secondary {
  background: transparent;
  color: var(--se-color-outline, #11314A);
  border-color: var(--se-color-outline, #11314A);
  border-width: var(--se-btn-border-width, 2px);
  border-style: solid;
}
.is-style-outline .wp-block-button__link:hover,
.se-btn--secondary:hover { background: var(--se-color-outline-hover, #11314A); color: var(--se-color-white); border-color: var(--se-color-outline-hover, #11314A); }

/* Groß (Hero-CTA) */
.se-btn--large { padding: var(--se-btn-padding-y-lg) var(--se-btn-padding-x-lg); font-size: 1.1rem; }

/* CTA im Header */
.se-header .se-cta .wp-block-button__link { box-shadow: var(--se-shadow-soft); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.se-footer {
  background: var(--se-footer-bg);
  color: var(--se-footer-text);
}
.se-footer .se-container { padding-block: var(--se-footer-padding-y); }
.se-footer h2, .se-footer h3, .se-footer h4,
.se-footer .se-footer-heading { color: var(--se-footer-heading); margin: 0 0 var(--se-space-s, 16px); }
.se-footer a { color: var(--se-footer-link); text-decoration: none; }
.se-footer a:hover { color: var(--se-footer-link-hover); }

/* Spalten-Raster */
.se-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--se-footer-col-gap, 32px);
}
.se-footer-col { flex-grow: 0; flex-shrink: 1; min-width: 180px; }

/* Logo & Intro */
.se-footer-logo {
  height: calc(44px * var(--se-footer-logo-scale, 100) / 100);
  width: auto; display: block; margin-bottom: var(--se-space-s, 16px);
}
.se-footer-tagline { margin: 0 0 var(--se-space-s, 16px); }
.se-footer-social { display: flex; gap: 14px; margin-top: var(--se-space-s, 16px); }
.se-footer-social a { font-size: 24px; line-height: 1; color: var(--se-footer-social-color, #FFFFFF); display: inline-flex; transition: color .15s ease, transform .15s ease; }
.se-footer-social a:hover,
.se-footer-social a:focus { color: var(--se-footer-link-hover, #4ED66F); transform: translateY(-1px); }

/* Link-Listen mit einstellbarem Zeilenabstand */
.se-footer-list { list-style: none; margin: 0; padding: 0; }
.se-footer-list li { margin-bottom: var(--se-footer-link-gap, 10px); }
.se-footer-list li:last-child { margin-bottom: 0; }
.se-footer-address { white-space: normal; line-height: 1.6; }

/* Newsletter-/Footer-Button (eigene Farben unter smartEngin → Footer) */
.se-footer .se-footer-btn {
  background: var(--se-footer-btn-bg, var(--se-color-primary));
  color: var(--se-footer-btn-text, #FFFFFF);
  border-color: transparent;
}
.se-footer .se-footer-btn:hover {
  background: var(--se-footer-btn-hover, var(--se-color-primary-hover));
  color: var(--se-footer-btn-text, #FFFFFF);
}

/* Newsletter-Anmeldung (E-Mail-Feld über dem Button) – alles über smartEngin → Footer steuerbar */
.se-newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: var(--se-newsletter-align, flex-start);
  gap: var(--se-newsletter-gap, 12px);
}
.se-newsletter-input {
  width: var(--se-newsletter-input-width, 100%);
  height: var(--se-newsletter-input-height, 48px);
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--se-newsletter-input-radius, 8px);
  background: var(--se-newsletter-input-bg, #FFFFFF);
  color: var(--se-newsletter-input-text, #11314A);
  font-size: 1rem;
  line-height: 1.3;
}
.se-newsletter-input::placeholder { color: var(--se-newsletter-input-text, #11314A); opacity: 0.55; }
.se-newsletter-input:focus {
  outline: none;
  border-color: var(--se-footer-btn-bg, var(--se-color-primary));
  box-shadow: 0 0 0 2px rgba(55, 185, 113, 0.25);
}
/* Anmelde-Button: eigene Größe (unabhängig von den globalen Buttons) */
.se-newsletter-form .se-newsletter-submit {
  cursor: pointer;
  border: 0;
  padding: var(--se-newsletter-btn-padding-y, 12px) var(--se-newsletter-btn-padding-x, 24px);
  font-size: var(--se-newsletter-btn-font, 16px);
}
/* DSGVO-Einwilligung (Checkbox unter dem E-Mail-Feld) */
.se-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--se-footer-text, #C7D2DC);
  cursor: pointer;
  text-align: left;
}
.se-newsletter-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.se-newsletter-consent a { color: var(--se-footer-link, #C7D2DC); text-decoration: underline; }
.se-newsletter-consent a:hover { color: var(--se-footer-link-hover, #4ED66F); }

/* Copyright */
.se-footer-copy { margin-top: var(--se-space-xl, 48px); opacity: 0.7; font-size: 0.85rem; text-align: center; }

/* --------------------------------------------------------------------------
   Karten (Block-Style "smartEngin Karte")
   -------------------------------------------------------------------------- */
.wp-block-group.is-style-se-card {
  border-radius: var(--se-radius-card);
  box-shadow: var(--se-kachel-shadow, var(--se-shadow-soft));
  height: 100%;
  transition: box-shadow var(--se-transition), transform var(--se-transition);
}
.wp-block-group.is-style-se-card:hover {
  box-shadow: var(--se-shadow-medium);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Startseiten-Kacheln – eigene Eckenrundung
   Die Startseite hat einen eigenen Regler (smartEngin → Design → Kacheln →
   „…Startseite"). Er greift auf beide Kachel-Varianten:
   - den Kachel-Block (.seb-kachel) und
   - den Block-Stil „smartEngin Karte" (.is-style-se-card), der aktuell auf der
     Startseite verwendet wird.
   body.home + höhere Spezifität als die Grundregeln → gewinnt auf der
   Startseite zuverlässig, ohne die Kacheln auf normalen Seiten zu verändern.
   -------------------------------------------------------------------------- */
body.home .seb-kachel,
body.home .wp-block-group.is-style-se-card {
  border-radius: var(--se-kachel-radius-home, 16px);
}

/* Leistungs-Kacheln gleich hoch */
.se-tiles { align-items: stretch; }
.se-tiles .wp-block-column { display: flex; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.se-hero { text-align: center; }
.se-hero .wp-block-buttons { justify-content: center; }

/* --------------------------------------------------------------------------
   Banner über den Kern-Block "Titelbild" (core/cover)
   Flexibler Seiten-Banner für Unterseiten (Vorlage "Seite ohne Titel").
   Ausrichtung "Volle Breite" (alignfull) bricht bis zum Bildschirmrand aus;
   der Vordergrund-Inhalt bleibt über das constrained-Innenlayout lesbar
   zentriert. Text/Überschriften/Spalten/Bilder/Buttons funktionieren wie im
   normalen Gutenberg-Editor.
   -------------------------------------------------------------------------- */

/* Kern-Default-Mindesthöhe (430px) im Seiteninhalt aufheben, damit Banner
   beliebig niedrig sein können (bis quasi 0). Der im Backend gesetzte
   Höhen-Wert (Inline-min-height) überschreibt dies weiterhin – kleine wie
   große Werte wirken also wie eingestellt. Im Editor bleibt der komfortable
   430px-Startwert erhalten (kein .se-main-Wrapper im Editor). */
.se-main .wp-block-cover,
.se-main .wp-block-cover-image { min-height: 0; }

/* Überschriften im Banner erben die (helle) Cover-Textfarbe, solange Pierre
   keine eigene Farbe wählt. Ohne dies erzwingt theme.json die dunkle
   Headline-Farbe → auf dunklem Overlay wäre der Titel unsichtbar. Sobald im
   Backend eine Textfarbe gewählt wird (.has-text-color), gewinnt diese. */
.wp-block-cover :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Diverses
   -------------------------------------------------------------------------- */
.se-footer-logo img { max-height: 56px; width: auto; }
.se-post-meta { gap: var(--se-space-s); color: var(--se-color-muted, #5B6B78); font-size: 0.9rem; }
.se-footer-copy { margin-top: var(--se-space-xl); opacity: 0.7; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Tablet UND Handy (< 1024px): Hauptmenü wird zum Hamburger-Menü.
   Menüpunkte als Liste; Untermenü/Mega klappen INLINE auf (Accordion).
   - Tablet (768–1024px): Mega-Kacheln als 2×2-Raster.
   - Handy (< 768px): Kacheln untereinander + CTA-Button unten im Menü.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --se-nav-gap: 18px; }

  /* Positionskontext für das aufklappbare Panel = ganze Menüzeile */
  .se-header .se-container { position: relative; }
  .se-main-nav { position: static; }
  .se-main-nav__toggle { display: inline-flex; }

  /* Menüliste = Panel in voller Containerbreite, unter der Menüzeile */
  .se-main-nav__list {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--se-header-bg);
    box-shadow: var(--se-shadow-medium, 0 8px 28px rgba(16,35,50,0.16));
    padding: var(--se-space-s, 16px) 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 200;
  }
  .se-main-nav.is-open .se-main-nav__list { display: flex; }

  /* Menüpunkt: Link + Pfeil in einer Zeile, Untermenü in voller Breite darunter */
  .se-main-nav__item {
    width: 100%;
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .se-main-nav__link {
    flex: 1 1 auto;
    padding: 14px var(--se-space-gutter, 24px);
    justify-content: flex-start;
  }
  .se-main-nav__toggle-sub {
    flex: 0 0 auto;
    padding: 14px var(--se-space-gutter, 24px);
    font-size: 16px;
    transition: transform 0.2s ease;
  }
  .se-main-nav__item.is-open > .se-main-nav__toggle-sub { transform: rotate(180deg); }

  /* Untermenü & Mega inline (Accordion) statt Overlay/Fixed */
  .se-main-nav__dropdown,
  .se-main-nav__mega {
    flex: 1 1 100%;
    position: static; top: auto; left: auto; right: auto; width: auto;
    transform: none; margin: 0; min-height: 0;
    box-shadow: none; border-radius: 0;
    background: var(--se-color-neutral, #EAECE7);
    display: none;
  }
  .se-main-nav__item.is-open > .se-main-nav__dropdown,
  .se-main-nav__item.is-open > .se-main-nav__mega { display: block; }
  .se-main-nav__mega { padding: var(--se-space-s, 16px) var(--se-space-gutter, 24px); }

  /* Tablet: Mega-Kacheln als 2×2-Raster */
  .se-main-nav__mega-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--se-space-s, 16px);
    max-width: none; padding: 0;
  }
}

@media (max-width: 768px) {
  .seb-topbar__inner { justify-content: flex-end; flex-wrap: wrap; }
  .se-header .se-container { gap: var(--se-space-s); }
  /* Footer-Spalten stapeln */
  .se-footer-col { flex-basis: 100% !important; }

  /* Handy: Mega-Kacheln alle untereinander */
  .se-main-nav__mega-tiles { grid-template-columns: 1fr; }

  /* Handy: CTA-Button aus der Menüzeile ausblenden – main-nav.js verschiebt
     ihn unten in das aufgeklappte Menü. */
  .se-header .se-container > .se-cta { display: none; }
  .se-main-nav__list > .se-cta {
    display: block;
    margin: var(--se-space-s, 16px) 0 0;
    padding: var(--se-space-m, 24px) var(--se-space-gutter, 24px) var(--se-space-s, 16px);
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .se-main-nav__list > .se-cta .se-cta-btn {
    display: flex; width: 100%;
    justify-content: center; text-align: center;
  }
}