/* ========== Blogbeitrag ohne Rahmen & Badge ========== */
.article-list .article {
  border: none;
  margin-bottom: 0.1rem;
}

.featured-article-badge {
  display: none;
}

@media (max-width: 767px) {
  /* Zwingt den Hauptcontainer, sich nach dem Inhalt zu richten */
  .sppb-addon-carousel .sppb-carousel-inner,
  .sppb-addon-carousel .sppb-carousel-item,
  .sppb-addon-carousel .sppb-carousel-pro-text,
  .sppb-addon-slideshow .sppb-slideshow-fullwidth-item {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Verhindert, dass absolute Positionierung den Text aus dem Fluss nimmt */
  .sppb-carousel-item .sppb-carousel-content,
  .sppb-carousel-item .sppb-carousel-text {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    padding-bottom: 30px !important; /* Platz für die Slider-Pfeile/Punkte */
  }
}

@media (max-width: 767px) {
  .swiper-slide {
    height: auto !important;
  }
  .swiper-wrapper {
    align-items: stretch !important;
  }
}

/* ========== Footer-Zentrierung ========== */
.sp-footer {
  text-align: center !important;
  justify-content: center;
  margin: 0 auto;
}

/* ========== Menüanpassung ========== */
.sp-megamenu-wrapper .sp-megamenu-parent > li > a {
  font-size: 1.3em;
}

/* =========================================================
   CONTENT-BOTTOM: Grid für Module mit Suffix mod_beratung
   Ziel: max 300px Breite, Inhalt + Bilder zentriert,
         nebeneinander, Wrap wenn zu wenig Platz
   ========================================================= */

/* 1) Den typischen "Column-Wrapper" in content-bottom zum Flex-Container machen
      (Helix/Bootstrap können hier unterschiedlich verschachteln) */
#sp-content-bottom .sp-column,
#sp-content-bottom .row > [class*="col-"],
[id^="sp-content-bottom"] .sp-column,
[id^="sp-content-bottom"] .row > [class*="col-"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* zentriert die Reihe */
  gap: 18px;                /* Abstand zwischen Boxen */
  align-items: stretch;
  text-align: center;       /* für Inline-Inhalte */
}

/* 2) Die Ziel-Module selbst: max 300px */
#sp-content-bottom .sp-module.mod_beratung,
#sp-content-bottom .sp-module.mod-beratung,
#sp-content-bottom .moduletable.mod_beratung,
#sp-content-bottom .moduletable.mod-beratung,
[id^="sp-content-bottom"] .sp-module.mod_beratung,
[id^="sp-content-bottom"] .sp-module.mod-beratung,
[id^="sp-content-bottom"] .moduletable.mod_beratung,
[id^="sp-content-bottom"] .moduletable.mod-beratung {
  flex: 0 1 400px;          /* bis 300px, sonst kleiner */
  max-width: 400px;
  width: 100%;
  margin: 0;                /* Flex + gap regeln Abstände */
  box-sizing: border-box;

  /* Falls irgendein Wrapper die Module auf 100% zwingt: */
  display: block;
}

/* 3) Inhalt im Modul wirklich mittig ausrichten */
#sp-content-bottom .sp-module.mod_beratung .sp-module-content,
#sp-content-bottom .sp-module.mod-beratung .sp-module-content,
#sp-content-bottom .moduletable.mod_beratung .moduletable-inner,
#sp-content-bottom .moduletable.mod-beratung .moduletable-inner,
[id^="sp-content-bottom"] .sp-module.mod_beratung .sp-module-content,
[id^="sp-content-bottom"] .sp-module.mod-beratung .sp-module-content,
[id^="sp-content-bottom"] .moduletable.mod_beratung .moduletable-inner,
[id^="sp-content-bottom"] .moduletable.mod-beratung .moduletable-inner {
  display: flex;
  flex-direction: column;
  align-items: center;      /* zentriert auch Buttons/Bilder */
}

/* 4) Bilder: immer zentriert + responsive */
#sp-content-bottom .sp-module.mod_beratung img,
#sp-content-bottom .sp-module.mod-beratung img,
#sp-content-bottom .moduletable.mod_beratung img,
#sp-content-bottom .moduletable.mod-beratung img,
[id^="sp-content-bottom"] .sp-module.mod_beratung img,
[id^="sp-content-bottom"] .sp-module.mod-beratung img,
[id^="sp-content-bottom"] .moduletable.mod_beratung img,
[id^="sp-content-bottom"] .moduletable.mod-beratung img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* 5) Mobile Feinschliff */
@media (max-width: 420px) {
  #sp-content-bottom .sp-column,
  #sp-content-bottom .row > [class*="col-"],
  [id^="sp-content-bottom"] .sp-column,
  [id^="sp-content-bottom"] .row > [class*="col-"] {
    gap: 12px;
  }

  /* Auf sehr kleinen Screens nicht "quetschen" */
  #sp-content-bottom .sp-module.mod_beratung,
  #sp-content-bottom .sp-module.mod-beratung,
  #sp-content-bottom .moduletable.mod_beratung,
  #sp-content-bottom .moduletable.mod-beratung,
  [id^="sp-content-bottom"] .sp-module.mod_beratung,
  [id^="sp-content-bottom"] .sp-module.mod-beratung,
  [id^="sp-content-bottom"] .moduletable.mod_beratung,
  [id^="sp-content-bottom"] .moduletable.mod-beratung {
    flex-basis: min(92vw, 300px);
  }
}


/* Basis: Elemente sind zunächst "zu" */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  filter: blur(8px);
  transition: opacity 600ms ease, transform 700ms ease, filter 700ms ease;
  will-change: opacity, transform, filter;
}

/* Sichtbar nach Trigger */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Optional: „aufklappen“ über Clip-Path (wirkt wie unfolding) */
.reveal--fold {
  clip-path: inset(0 0 100% 0 round 16px);
  transition: clip-path 700ms ease, opacity 600ms ease, transform 700ms ease, filter 700ms ease;
}

.reveal--fold.is-visible {
  clip-path: inset(0 0 0 0 round 16px);
}

/* Accessibility: weniger Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible, .reveal--fold, .reveal--fold.is-visible {
    transition: none;
    transform: none;
    filter: none;
    opacity: 1;
    clip-path: none;
  }
}

/* ========== Sonstige Anpassungen ========== */
.modal-footer .btn-primary {
  position: relative !important;
  z-index: 1001;
}

#offcanvas-toggler > i {
  color: #ffffff !important;
}

.leaflet-control-locate {
  display: none !important;
}
/* === Accessibility-Icon */

/* Kreis + Position + altes Symbol verstecken */
/* =========================================================
   20. CONSENT-TRIGGER-BUTTON
   ========================================================= */
.cc-trigger.cc-trigger-icon {
  bottom: 100px !important;
  right: 1px !important;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  transform: scale(1);
}

.cc-trigger.cc-trigger-icon:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: scale(1.07) !important;
}

.cc-trigger.cc-trigger-icon svg {
  width: 50px;
  height: 50px;
  display: block;
}

.cc-trigger.cc-trigger-icon svg path {
  fill: #ffffff;
}


/* =========================================================
   21. ACCESSIBILITY-WIDGET
   ========================================================= */
i._access-icon._access {
  position: fixed;
  bottom: 100px !important;
  left: 1px !important;
  z-index: 9999;
  width: 50px;
  height: 50px;
  background-color: #ffffff !important;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0 !important;
}

i._access-icon._access::before {
  content: "accessibility_new";
  font-family: "Material Icons Round", "Material Icons";
  font-size: 40px;
  line-height: 1;
  display: block;
  color: #5d83b4 !important;
}

body:has(._access-menu:not(.close)) i._access-icon._access {
  top: 50%;
}

body.site ._access-menu,
body.site ._access-menu *,
._access-menu,
._access-menu *,
body.site ._access-scrollbar,
body.site ._access-scrollbar *,
._access-scrollbar,
._access-scrollbar * {
  color: #000000 !important;
}

html {
    scroll-behavior: smooth; }

:target { scroll-margin-top: 120px; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1px; /* Sticky Header Offset */
}