/**
 * Loaded after Breakdance global-settings.css + post-*.css (wp_head priority 100000).
 * Global Typography setzt Poppins + H1-Farbe — ohne das wirkt -webkit-text-stroke wie Vollfläche.
 */

.breakdance h1.bde-heading.eff-heading.eff-heading--stroke,
.breakdance h2.bde-heading.eff-heading.eff-heading--stroke,
.breakdance .bde-heading.eff-heading.eff-heading--stroke {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-color: var(--eff-white, #fff) !important;
  -webkit-text-stroke-width: var(--eff-stroke-width, 2px) !important;
  paint-order: stroke fill;
  font-family: var(--eff-font-display, "Open Sans", sans-serif) !important;
  font-style: italic !important;
}

.breakdance h1.bde-heading.eff-heading--stroke.eff-heading--hero,
.breakdance h2.bde-heading.eff-heading--stroke.eff-heading--hero {
  -webkit-text-stroke-width: clamp(1px, 0.032em, 2px) !important;
}

/* Spans: kein transparent !important — sonst blockiert es eff-heading-fill-in */

.breakdance .eff-heading--hero .eff-heading-fill,
.breakdance .eff-hero-animate .eff-heading--stroke .eff-heading-fill {
  animation: eff-heading-fill-in var(--eff-fill-duration) var(--eff-motion-ease) forwards;
  animation-delay: calc(var(--eff-fill-delay) + var(--eff-fill-i, 0) * var(--eff-fill-stagger));
}

@keyframes eff-heading-fill-in {
  from {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  to {
    color: var(--eff-white, #fff);
    -webkit-text-fill-color: var(--eff-white, #fff);
    -webkit-text-stroke-color: var(--eff-white, #fff);
  }
}

/*
 * Hero (Section 686): Mobile padding-top am section-container, Hintergrund aber am Kind-Div —
 * oben bleibt sonst weißer Streifen (Overlay-Header). Abstand für Inhalt am Text-Wrapper.
 */
@media (max-width: 767px) {
  .breakdance .bde-section-64-686 .section-container {
    padding-top: 0 !important;
  }

  .breakdance .bde-section-64-686 .bde-div-64-688 {
    padding-top: 100px;
  }
}

/* Bild-Stack: Breakdance layout_v2 / Column-Flex überschreibt sonst row + negative Margins */
.breakdance .eff-image-stack.bde-div,
.breakdance .bde-div.eff-image-stack {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

.breakdance .eff-image-stack > .eff-image-stack__front,
.breakdance .eff-image-stack > .bde-image2.eff-image-stack__front {
  position: relative !important;
  z-index: 99 !important;
  flex: 0 0 auto !important;
  margin: 0 -310px -120px 0 !important;
  padding: 5px 5px 0 0 !important;
  background-color: #fff !important;
  overflow: hidden !important;
  box-sizing: content-box !important;
  width: 360px !important;
  max-width: min(360px, 42vw) !important;
  height: 340px !important;
  object-fit: cover !important;
}

.breakdance .eff-image-stack > .eff-image-stack__main,
.breakdance .eff-image-stack > .bde-div.eff-image-stack__main {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
  /* Breite/Höhe: Breakdance am Div eff-image-stack__main (Design → Size) */
}

/* Im Stack kein Ken-Burns-Start 1.3 — sonst wirkt das Team-Foto „eingezoomt/klein“ */
.breakdance .eff-image-stack__main.eff-media .eff-media__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: unset !important;
  object-fit: cover !important;
  transform: scale(1) !important;
}

.breakdance .eff-image-stack__main.eff-media.is-inview .eff-media__img {
  transform: scale(1) !important;
}

@media (max-width: 991px) {
  .breakdance .eff-image-stack.bde-div,
  .breakdance .bde-div.eff-image-stack {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .breakdance .eff-image-stack > .eff-image-stack__front,
  .breakdance .eff-image-stack > .bde-image2.eff-image-stack__front {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    order: 2 !important;
  }

  .breakdance .eff-image-stack > .eff-image-stack__main,
  .breakdance .eff-image-stack > .bde-div.eff-image-stack__main {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 479px) {
  .breakdance .eff-image-stack > .eff-image-stack__front,
  .breakdance .eff-image-stack > .bde-image2.eff-image-stack__front {
    display: none !important;
  }
}

/*
 * effenzio-rollo-menu (Global Settings): Hamburger geschlossen weiß;
 * Links Open Sans 800 italic — Barlow Condensed ist nicht eingebunden.
 */
.breakdance .effenzio-rollo-menu .breakdance-menu-toggle:not([aria-expanded="true"]) .breakdance-menu-toggle-lines,
.breakdance .effenzio-rollo-menu .breakdance-menu-toggle:not([aria-expanded="true"]) .breakdance-menu-toggle-lines::before,
.breakdance .effenzio-rollo-menu .breakdance-menu-toggle:not([aria-expanded="true"]) .breakdance-menu-toggle-lines::after {
  background-color: #fff !important;
}

.breakdance .effenzio-rollo-menu .breakdance-menu-list > li > .breakdance-menu-link,
.breakdance .effenzio-rollo-menu .breakdance-menu-list > li > a {
  font-family: var(--eff-font-display, "Open Sans", sans-serif) !important;
  font-weight: 800 !important;
  font-style: italic !important;
}

/* Squeeze-Toggle: Global Settings macht middle transparent + before sichtbar → nur Schrägstrich */
.breakdance .effenzio-rollo-menu .breakdance-menu-toggle--squeeze[aria-expanded="true"] .breakdance-menu-toggle-lines,
.breakdance .effenzio-rollo-menu nav.breakdance-responsive-menu--open .breakdance-menu-toggle--squeeze .breakdance-menu-toggle-lines {
  background-color: #222 !important;
  transform: rotate(45deg) !important;
}

.breakdance .effenzio-rollo-menu .breakdance-menu-toggle--squeeze[aria-expanded="true"] .breakdance-menu-toggle-lines::before,
.breakdance .effenzio-rollo-menu nav.breakdance-responsive-menu--open .breakdance-menu-toggle--squeeze .breakdance-menu-toggle-lines::before {
  top: 0 !important;
  opacity: 0 !important;
}

.breakdance .effenzio-rollo-menu .breakdance-menu-toggle--squeeze[aria-expanded="true"] .breakdance-menu-toggle-lines::after,
.breakdance .effenzio-rollo-menu nav.breakdance-responsive-menu--open .breakdance-menu-toggle--squeeze .breakdance-menu-toggle-lines::after {
  bottom: 0 !important;
  transform: rotate(-90deg) !important;
  opacity: 1 !important;
  background-color: #222 !important;
}

/*
 * Rollo-Topbar: Global Settings blendet Logo aus (Desktop nutzt eigentlich Header-Toggle).
 * Header-Logo ist weiß → auf weißem Overlay unsichtbar. Graues Topbar-Logo einblenden.
 */
.breakdance .effenzio-rollo-menu nav.breakdance-responsive-menu--open .breakdance-menu-list > .breakdance-menu-topbar,
.breakdance .effenzio-rollo-menu .breakdance-menu-toggle[aria-expanded="true"] + .breakdance-menu-list > .breakdance-menu-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 12 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: max(20px, calc(env(safe-area-inset-top, 0px) + 12px)) clamp(32px, 5.5vw, 100px) 16px !important;
  border-bottom: 1px solid var(--effenzio-menu-blue, #1249a3) !important;
  background: #fff !important;
  opacity: 1 !important;
  transform: none !important;
}

.breakdance .effenzio-rollo-menu .breakdance-menu-list > .breakdance-menu-topbar .breakdance-menu-topbar-logo {
  display: flex !important;
  align-items: center !important;
}

.breakdance .effenzio-rollo-menu .breakdance-menu-list > .breakdance-menu-topbar .breakdance-menu-topbar-logo img {
  display: block !important;
  width: auto !important;
  height: 40px !important;
  max-width: min(220px, 32vw) !important;
  object-fit: contain !important;
}

.breakdance .effenzio-rollo-menu .breakdance-menu-list > .breakdance-menu-topbar .breakdance-menu-close-button {
  display: none !important;
}

.breakdance .bde-header-builder-1298-143:has(.effenzio-rollo-menu .breakdance-menu-toggle[aria-expanded="true"]) .bde-container-link-1298-159 {
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Mobile: Topbar im Flow (nicht fixed) — sonst überlappt HOME die fixierte Kopfzeile.
 */
@media (max-width: 767px) {
  .breakdance .effenzio-rollo-menu nav.breakdance-responsive-menu--open .breakdance-menu-list > .breakdance-menu-topbar,
  .breakdance .effenzio-rollo-menu .breakdance-menu-toggle[aria-expanded="true"] + .breakdance-menu-list > .breakdance-menu-topbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: max(14px, calc(env(safe-area-inset-top, 0px) + 10px)) 56px 14px 0 !important;
  }

  .breakdance .effenzio-rollo-menu .breakdance-menu-list > .breakdance-menu-topbar .breakdance-menu-topbar-logo img {
    height: 36px !important;
    max-width: min(46vw, 180px) !important;
  }

  .breakdance .effenzio-rollo-menu .breakdance-menu-list {
    justify-content: flex-start !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    padding-right: 22px !important;
    padding-bottom: 24px !important;
    padding-left: 22px !important;
  }
}

@media (max-width: 479px) {
  .breakdance .effenzio-rollo-menu .breakdance-menu-list > li > .breakdance-menu-link,
  .breakdance .effenzio-rollo-menu .breakdance-menu-list > li > a {
    min-height: 58px !important;
  }
}