/* KI-generiertes CSS – css/ai_css.css */
/* KI-generiertes CSS !1 css/ai_css.css */
.dunkler {
  background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
  color: #003366;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 51, 102, 0.1);
}

body {
  background: linear-gradient(180deg, #ffffff 0%, #e6f0ff 100%);
  color: #000000;
  font-family: 'OpenSans', 'Open Sans', OpenSans, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

footer {
  background: linear-gradient(180deg, #0a1e3a 0%, #122a55 100%);
  color: #111111;
  padding-left: 3rem;
  padding-right: 3rem;
}

footer h5 {
  color: #ffffff;
}
footer a, footer p, address, small {
  color: #dddddd;
}

.card {
  background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
  color: #003366;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 51, 102, 0.15);
  padding: 1.5rem;
  margin: 1rem 0;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  font-family: 'OpenSans', 'Open Sans', OpenSans, Arial, Helvetica, sans-serif;
  min-width: 290px;
  max-width: 330px;
}

.card:hover {
  box-shadow: 0 10px 25px rgba(0, 51, 102, 0.3);
  transform: translateY(-5px);
}

.card h3 {
  margin-top: 0;
  color: #002244;
  font-weight: 700;
}

.card p {
  color: #003366;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.card a {
  color: #0044cc;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.card a:hover {
  border-color: #002244;
  color: #002244;
}

.card ul, .card ol {
  padding-left: 1.25rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #003366;
}

.card ul {
  list-style-type: disc;
}

.card ol {
  list-style-type: decimal;
}

.card li {
  margin-bottom: 0.25rem;
}

/* Verwendete und installierte Schriften im Projekt */
/* Aktuell verwendet in CSS: 'OpenSans', 'Open Sans', OpenSans, Arial, Helvetica, sans-serif */
/* Installierte lokale Fonts: Fontawesome, Fontsawesome, OpenSans, OpenSans Condensed, OpenSans SemiCondensed, Rokkitt */
/* Verfügbare g2ngige Web-Schriftarten: Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman, Courier New */

/* =========================================================
   Accon Hero-Slideshow und Standortkarten
   ========================================================= */

.cms-hero-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 3rem;
}

/* =========================================================
   Slideshow
   ========================================================= */

#cmsTopSlideshow {
  width: 100%;
}

#cmsTopSlideshow .carousel-inner {
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

#cmsTopSlideshow .carousel-item {
  width: 100%;
  transition: transform 1s ease-in-out;
  position: relative;
}

#cmsTopSlideshow .carousel-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(360px, 52vw, 1000px);
  object-fit: cover;
  object-position: center;
}

#cmsTopSlideshow .carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 0 1rem;
  max-width: 90%;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

@media (max-width: 767.98px) {
  .hero-title {
    font-size: 2rem;
  }
}

.cms-hero-wrap{
    position:relative;
}

/* =========================================================
   Carousel-Overlay-Text
   ========================================================= */

.cms-hero-overlay{
    position:absolute;
    top:28px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    padding:18px 30px;

    background:rgba(255,255,255,.05);
    backdrop-filter:blur(1px);
    box-shadow:none;

    border-radius:20px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.cms-hero-logo{
    height:65px;
    width:auto;
    margin-bottom:10px;
}

.cms-hero-overlay h2{
    margin:0;
    color:#fff;

    font-size:1.3rem;
    font-weight:700;

    text-shadow:
        0 2px 8px rgba(0,0,0,.7);
}

.cms-hero-overlay p{
    margin-top:8px;

    color:#fff;

    font-size:1rem;
    font-weight:500;

    text-shadow:
        0 2px 6px rgba(0,0,0,.7);
}

@media (max-width:768px){

    .cms-hero-overlay{
        width:92%;
        padding:14px;
        top:15px;
    }

    .cms-hero-logo{
        height:45px;
        display: none
    }

    .cms-hero-overlay h2{
        font-size:1.0rem;
    }

    .cms-hero-overlay p{
        font-size:.85rem;
    }

}

/* =========================================================
   Carousel-Pfeile
   ========================================================= */

#cmsTopSlideshow .carousel-control-prev,
#cmsTopSlideshow .carousel-control-next {
  width: 8%;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0.9;
  z-index: 30;
}

#cmsTopSlideshow .carousel-control-prev:hover,
#cmsTopSlideshow .carousel-control-next:hover,
#cmsTopSlideshow .carousel-control-prev:focus,
#cmsTopSlideshow .carousel-control-next:focus {
  opacity: 1;
}

#cmsTopSlideshow .carousel-control-prev-icon,
#cmsTopSlideshow .carousel-control-next-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  background-size: 52% 52%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/*
 * Alte, manuell per ::before erzeugte Pfeile deaktivieren.
 * Dadurch erscheinen keine CSS- oder ASCII-Codes.
 */
#cmsTopSlideshow .carousel-control-prev::before,
#cmsTopSlideshow .carousel-control-next::before {
  display: none;
  content: none;
}

/* =========================================================
   Kartenbereich
   ========================================================= */

.cms-floating-cards {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1160px;
  margin: -60px auto 0;
  padding: 0 1rem;
}

.cms-floating-cards .row {
  align-items: stretch;
}

.cms-floating-cards [class*="col-"] {
  display: flex;
}

/*
 * Desktop:
 * Bootstrap col-lg-3 ergibt vier Karten nebeneinander.
 */
.cms-floating-cards .col-lg-3 {
  max-width: 285px;
}

/* =========================================================
   Einzelne Standortkarte
   ========================================================= */

.cms-location-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 1.35rem;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.cms-location-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
}

.cms-location-card-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 145px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   Karteninhalt
   ========================================================= */

.cms-location-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 285px;
  padding: 1.15rem;
  text-align: center;
}

.cms-location-card-body h4 {
  min-height: 3.2rem;
  margin: 0 0 0.9rem;
  color: #123c69;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
}

.cms-location-contact {
  margin-bottom: 1rem;
}

.cms-location-card-body p {
  margin: 0 0 0.55rem;
  color: #333333;
  font-size: 0.92rem;
  line-height: 1.4;
}

.cms-location-card-body strong {
  font-weight: 700;
}

.cms-location-card-body a {
  color: #0b5ea8;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: normal;
}

.cms-location-card-body a:hover {
  text-decoration: underline;
}

.cms-contact-placeholder {
  visibility: hidden;
}

/* =========================================================
   Kartenbutton
   ========================================================= */

.cms-location-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: #0b5ea8;
  color: #ffffff !important;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(11, 94, 168, 0.28);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cms-location-btn:hover {
  background: #083f72;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(11, 94, 168, 0.34);
}

.cms-location-btn:focus-visible {
  outline: 3px solid rgba(11, 94, 168, 0.35);
  outline-offset: 3px;
}

/* =========================================================
   Kleinere Desktop-Bildschirme
   ========================================================= */

@media (max-width: 1199.98px) {
  #cmsTopSlideshow .carousel-item img {
    height: clamp(340px, 54vw, 620px);
  }

  .cms-floating-cards {
    margin-top: -90px;
  }

  .cms-location-card-body {
    min-height: 270px;
  }
}

/* =========================================================
   Tablets
   Zwei Karten nebeneinander
   ========================================================= */

@media (max-width: 991.98px) {
  #cmsTopSlideshow .carousel-item img {
    height: clamp(300px, 58vw, 520px);
  }

  #cmsTopSlideshow .carousel-control-prev,
  #cmsTopSlideshow .carousel-control-next {
    width: 12%;
  }

  .cms-floating-cards {
    max-width: 760px;
    margin-top: -55px;
    padding: 0 1rem;
  }

  /*
   * col-6 bleibt bei 50 Prozent.
   * Die frühere max-width-Regel für Desktop wird aufgehoben.
   */
  .cms-floating-cards .col-lg-3 {
    width: 50%;
    max-width: 50%;
  }

  .cms-location-card-img {
    height: 175px;
  }

  .cms-location-card-body {
    min-height: 250px;
  }
}

/* =========================================================
   Smartphones
   Weiterhin zwei Karten nebeneinander
   ========================================================= */

@media (max-width: 767.98px) {
  .cms-hero-wrap {
    margin-bottom: 2rem;
  }

  #cmsTopSlideshow {
    margin-bottom: 1rem !important;
  }

  #cmsTopSlideshow .carousel-inner {
    border-radius: 0;
  }

  #cmsTopSlideshow .carousel-item img {
    height: clamp(220px, 62vw, 360px);
  }

  #cmsTopSlideshow .carousel-control-prev,
  #cmsTopSlideshow .carousel-control-next {
    width: 16%;
  }

  #cmsTopSlideshow .carousel-control-prev-icon,
  #cmsTopSlideshow .carousel-control-next-icon {
    width: 42px;
    height: 42px;
  }

  .cms-floating-cards {
    max-width: 620px;
    margin-top: 1rem;
    padding: 0 0.5rem;
  }

  .cms-floating-cards .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .cms-floating-cards .col-6,
  .cms-floating-cards .col-lg-3 {
    width: 50%;
    max-width: 50%;
  }

  .cms-location-card {
    border-radius: 1rem;
  }

  .cms-location-card-img {
    height: 150px;
  }

  .cms-location-card-body {
    min-height: 265px;
    padding: 0.85rem;
  }

  .cms-location-card-body h4 {
    min-height: 2.7rem;
    margin-bottom: 0.7rem;
    font-size: 1.05rem;
  }

  .cms-location-card-body p {
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .cms-location-btn {
    min-height: 40px;
    padding: 0.6rem 0.5rem;
    font-size: 0.85rem;
  }
}

/* Kleine Smartphones */
@media (max-width: 420px) {
  #cmsTopSlideshow .carousel-item img {
    height: 240px;
  }

  #cmsTopSlideshow .carousel-control-prev-icon,
  #cmsTopSlideshow .carousel-control-next-icon {
    width: 38px;
    height: 38px;
  }

  .cms-floating-cards {
    padding: 0 0.25rem;
  }

  .cms-floating-cards .row {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.65rem;
  }

  .cms-location-card-img {
    height: 120px;
  }

  .cms-location-card-body {
    min-height: 270px;
    padding: 0.7rem;
  }

  .cms-location-card-body h4 {
    min-height: 2.5rem;
    font-size: 0.95rem;
  }

  .cms-location-card-body p {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .cms-location-btn {
    min-height: 38px;
    padding: 0.55rem 0.35rem;
    font-size: 0.78rem;
  }
}

/* =========================================================
   Sehr schmale Displays
   Weiterhin zwei Karten nebeneinander
   ========================================================= */

@media (max-width: 350px) {
  .cms-floating-cards {
    padding: 0 0.15rem;
  }

  .cms-floating-cards .row {
    --bs-gutter-x: 0.35rem;
  }

  .cms-location-card-img {
    height: 105px;
  }

  .cms-location-card-body {
    min-height: 275px;
    padding: 0.55rem;
  }

  .cms-location-card-body h4 {
    font-size: 0.88rem;
  }

  .cms-location-card-body p {
    font-size: 0.7rem;
  }

  .cms-location-btn {
    font-size: 0.72rem;
  }
}


/* =========================================================
   Leistungen
   ========================================================= */

#Leistungen {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.cms-services-heading {
  margin-bottom: 2rem;
  text-align: center;
}

.cms-services-heading h1 {
  margin: 0;
}

/*
 * Überschreibt die globale .card-Regel mit:
 * min-width: 290px;
 * max-width: 330px;
 */
#Leistungen .cms-service-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Alle Spalten sollen ihre Karten gleichmäßig ausfüllen */
#Leistungen .row > [class*="col-"] {
  display: flex;
  min-width: 0;
}

/* Einheitliche Bildhöhe */
#Leistungen .cms-service-card-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
}

/* Karteninhalt */
#Leistungen .card-body {
  min-width: 0;
  padding: 1.5rem;
}

#Leistungen .card-body h3 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

#Leistungen .card-body p {
  margin-bottom: 1rem;
  line-height: 1.55;
}

#Leistungen .card-body .btn {
  width: 100%;
}

/* =========================================================
   Tablets
   Drei Karten nebeneinander
   ========================================================= */

@media (min-width: 768px) {
  #Leistungen .cms-service-card-img {
    height: 210px;
  }
}

/* =========================================================
   Smartphones
   Immer zwei Karten nebeneinander
   ========================================================= */

@media (max-width: 767.98px) {
  #Leistungen {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  #Leistungen .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  #Leistungen .col-6 {
    width: 50%;
    max-width: 50%;
  }

  #Leistungen .cms-service-card {
    border-radius: 1rem;
  }

  #Leistungen .cms-service-card-img {
    height: 150px;
  }

  #Leistungen .card-body {
    padding: 0.85rem;
  }

  #Leistungen .card-body h3 {
    margin-bottom: 0.7rem;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
  }

  #Leistungen .card-body p {
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  #Leistungen .card-body .btn {
    padding: 0.6rem 0.4rem;
    font-size: 0.82rem;
  }
}

/* Kleine Smartphones */
@media (max-width: 420px) {
  #Leistungen {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }

  #Leistungen .row {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.65rem;
  }

  #Leistungen .cms-service-card-img {
    height: 120px;
  }

  #Leistungen .card-body {
    padding: 0.7rem;
  }

  #Leistungen .card-body h3 {
    font-size: 0.92rem;
  }

  #Leistungen .card-body p {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  #Leistungen .card-body .btn {
    font-size: 0.75rem;
  }
}

#Leistungen .cms-benefit-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 51, 102, 0.12);
  background: linear-gradient(145deg, #ffffff 0%, #eaf1ff 100%);
  box-shadow: 0 10px 28px rgba(0, 51, 102, 0.11);
}

#Leistungen .cms-benefit-card::after {
  position: absolute;
  right: 22%;
  bottom: 0;
  left: 22%;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #0d6efd, #003366);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#Leistungen .cms-benefit-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

#Leistungen .cms-benefit-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.6rem;
  text-align: center;
}

#Leistungen .cms-benefit-icon {
  display: grid;
  width: 88px;
  height: 88px;
  margin: 0 auto 1.35rem;
  color: #ffffff;
  background: linear-gradient(145deg, #0d6efd 0%, #003366 100%);
  border: 6px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 9px 22px rgba(0, 51, 102, 0.24);
  place-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#Leistungen .cms-benefit-icon i {
  font-size: 2.15rem;
  line-height: 1;
}

#Leistungen .cms-benefit-card:hover .cms-benefit-icon {
  box-shadow: 0 12px 28px rgba(0, 51, 102, 0.32);
  transform: translateY(-4px) scale(1.05);
}

#Leistungen .cms-benefit-card .card-body h3 {
  margin-bottom: 1rem;
  color: #002244;
  text-align: center;
}

#Leistungen .cms-benefit-card .card-body p {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
}

#Leistungen .cms-benefit-card .card-body p + p {
  margin-top: 1rem;
}

#Leistungen .cms-benefit-card .card-body ul {
  align-self: center;
  margin: 0.75rem 0 0;
  text-align: left;
}

@media (max-width: 767.98px) {
  #Leistungen .cms-benefit-card .card-body {
    padding: 1.25rem 0.75rem;
  }

  #Leistungen .cms-benefit-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 1rem;
    border-width: 4px;
  }

  #Leistungen .cms-benefit-icon i {
    font-size: 1.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #Leistungen .cms-benefit-card::after,
  #Leistungen .cms-benefit-icon {
    transition: none;
  }
}

/* Benefit-Icons: dezent animieren (ohne Vollrotation) */
.cms-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cms-benefit-icon .bi {
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  display: inline-block;
  transition: transform 0.35s ease, filter 0.35s ease;
  transform: translateY(0);
}
.cms-benefit-card:hover .cms-benefit-icon .bi {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
/* Optional: Kreis nur leicht „atmen“, Icon bleibt stabil */
.cms-benefit-icon {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.cms-benefit-card:hover .cms-benefit-icon {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
}

/* =========================================================
   Hochkantbilder in cards
   ========================================================= */

/* Bild der Leistungskarten */
#Leistungen .cms-service-card-img {
    display: block;
    width: 100%;
    height: 450px;          /* Höhe des Bildbereichs */
    object-fit: cover;      /* komplette Breite ausfüllen */
    object-position: center 25%; /* etwas weiter nach unten */
}

/* =========================================================
   Google-Maps in Footer
   ========================================================= */

.google-maps-consent-placeholder {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #eeeeF2;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.google-maps-load-btn {
  width: 100%;
  height: 100%;
  border: 0;
  background: #eeeeF2;
  color: #000000;
  font-size: 1rem;
  cursor: pointer;
}

.google-maps-load-btn:hover,
.google-maps-load-btn:focus {
  background: #ddddE5;
}

.google-maps-consent-placeholder iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* Neue Styles für Team-Bilder und Text */
img.img-fluid.rounded.shadow-sm {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}
img.img-fluid.rounded.shadow-sm:hover {
  transform: scale(1.05);
}

h2.display-4 {
  color: #0b3d91;
  text-transform: capitalize;
  letter-spacing: 0.05em;
}

p {
  color: #444;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}



/* =========================================================
   Navigation / Pull-down
   ========================================================= */
.main-navigation .dropdown-menu {
  --bs-dropdown-bg: #edf4ff;
  --bs-dropdown-link-color: #17365d;
  --bs-dropdown-link-hover-bg: #0d6efd;
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-active-bg: #063f98;
  --bs-dropdown-link-active-color: #ffffff;
  min-width: 310px;
  margin-top: 0.7rem;
  padding: 0.6rem;
  border: 1px solid rgba(13, 110, 253, 0.18);
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff 0%, #edf4ff 100%) !important;
  box-shadow: 0 16px 38px rgba(0, 51, 102, 0.22);
}
.main-navigation .dropdown-item {
  margin: 0.15rem 0;
  padding: 0.75rem 0.9rem;
  border-radius: 9px;
  color: #17365d;
  background-color: transparent;
  font-family: 'OpenSans', 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.main-navigation .dropdown-item:hover,
.main-navigation .dropdown-item:focus {
  color: #ffffff;
  background: linear-gradient(135deg, #0d6efd 0%, #0754c7 100%);
  transform: translateX(4px);
}

.main-navigation .dropdown-item:active,
.main-navigation .dropdown-item.active {
  color: #ffffff;
  background: #063f98;
}

.main-navigation .navbar-toggler {
  padding: 0.55rem 0.7rem;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.main-navigation .navbar-toggler:hover,
.main-navigation .navbar-toggler:focus {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.main-navigation .navbar-toggler-icon {
  width: 1.35em;
  height: 1.35em;
  opacity: 1;
  filter: brightness(0) invert(1);
}

@media (min-width: 992px) {
  .main-navigation .dropdown-menu.show {
    animation: mainNavigationDropdown 0.22s ease-out;
  }

  @keyframes mainNavigationDropdown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 991.98px) {
  .main-navigation.navbar {
    min-height: 78px;
    padding: 0.7rem 1rem;
  }
  .main-navigation .navbar-brand {
    min-height: 46px;
    margin-right: 1rem;
  }
  .main-navigation .navbar-brand img,
  .main-navigation .navbar-brand .img-fluid {
    max-width: 175px;
    max-height: 52px;
  }
  .main-navigation .navbar-collapse {
    margin-top: 0.75rem;
    padding: 0.5rem 0.4rem;
    border-radius: 14px;
    background-color: rgba(0, 32, 80, 0.42);
    backdrop-filter: blur(6px);
  }
  .main-navigation .navbar-nav {
    align-items: stretch;
    gap: 0.15rem;
  }
  .main-navigation .nav-link {
    padding: 0.7rem 0.85rem !important;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.92) !important;
  }
  .main-navigation .nav-link:hover,
  .main-navigation .nav-link:focus,
  .main-navigation .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
  }
  .main-navigation .nav-link.active::before,
  .main-navigation .dropdown-menu::before {
    display: none;
  }
  /* Pull-down: kein weißer Kasten, eingepasst ins Menü */
  .main-navigation .dropdown-menu {
    --bs-dropdown-bg: transparent;
    --bs-dropdown-link-color: #ffffff;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.16);
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-active-bg: rgba(255, 255, 255, 0.22);
    --bs-dropdown-link-active-color: #ffffff;
    min-width: 0;
    margin: 0.15rem 0 0.35rem;
    padding: 0.2rem 0.35rem 0.35rem;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none;
  }
  .main-navigation .dropdown-item {
    margin: 0.1rem 0;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    background: transparent;
    font-weight: 600;
    white-space: normal;
  }
  .main-navigation .dropdown-item:hover,
  .main-navigation .dropdown-item:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    transform: none;
  }
  .main-navigation .dropdown-item:active,
  .main-navigation .dropdown-item.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
  }
}

@media (max-width: 420px) {
  .main-navigation.navbar {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .main-navigation .navbar-brand img,
  .main-navigation .navbar-brand .img-fluid {
    max-width: 145px;
    max-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-navigation .dropdown-menu.show {
    animation: none;
  }

  .main-navigation .nav-link,
  .main-navigation .dropdown-item,
  .main-navigation .dropdown-toggle::after {
    transition: none;
  }
}

/* =========================================================
   Kontaktseite: aktuellen Empfänger hervorheben
   Die bestehenden Card-Einstellungen bleiben erhalten.
   ========================================================= */

.standort-card--aktiv {
  position: relative;
  outline: 3px solid #b1252b;
  outline-offset: -3px;
  box-shadow:
    0 10px 25px rgba(0, 51, 102, 0.18),
    0 0 0 5px rgba(177, 37, 43, 0.08);
}

.standort-card__status {
  display: none;
}

.standort-card--aktiv .standort-card__status {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: #b1252b;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.standort-card--aktiv .standort-card__status::before {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: #ffffff;
  content: "";
}

@media (prefers-reduced-motion: reduce) {
  .standort-card--aktiv {
    transition: none;
  }
}

/* =========================================================
   Responsive Navigation – korrigierte finale Überschreibung
   ========================================================= */
@media (max-width: 991.98px) {
  .main-navigation.navbar {
    position: relative;
    z-index: 1000;
    flex-wrap: wrap;
    width: 100%;
    min-height: 72px;
    padding: 0.7rem 1rem;
  }

  .main-navigation .navbar-brand {
    min-width: 0;
    min-height: 46px;
    margin-right: 0.75rem;
  }

  .main-navigation .navbar-brand img,
  .main-navigation .navbar-brand .img-fluid {
    display: block;
    width: auto;
    max-width: 175px;
    max-height: 52px;
  }

  .main-navigation .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .main-navigation .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.55rem;
    overflow: visible;
    border-radius: 14px;
    background: rgba(0, 32, 80, 0.94);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
  }

  .main-navigation .navbar-collapse.collapsing,
  .main-navigation .navbar-collapse.show {
    display: block;
  }

  .main-navigation .navbar-nav,
  .main-navigation .nav-item {
    width: 100%;
  }

  .main-navigation .navbar-nav {
    display: flex;
    align-items: stretch;
    margin: 0;
    gap: 0.15rem;
  }

  .main-navigation .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0.85rem !important;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.95) !important;
    white-space: normal;
  }

  .main-navigation .nav-link:hover,
  .main-navigation .nav-link:focus,
  .main-navigation .nav-link.active,
  .main-navigation .nav-link.show {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.14);
  }

  .main-navigation .nav-link.active::before,
  .main-navigation .dropdown-menu::before {
    display: none;
  }

  .main-navigation .dropdown-toggle::after {
    flex: 0 0 auto;
    margin-left: 0.75rem;
  }

  .main-navigation .dropdown-menu {
    position: static !important;
    inset: auto !important;
    float: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0.2rem 0 0.4rem;
    padding: 0.25rem 0.35rem 0.35rem;
    overflow: visible;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: none;
    transform: none !important;
  }

  .main-navigation .dropdown-item {
    display: block;
    width: 100%;
    margin: 0.1rem 0;
    padding: 0.6rem 0.85rem;
    overflow-wrap: anywhere;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    background: transparent;
    font-weight: 600;
    white-space: normal;
  }

  .main-navigation .dropdown-item:hover,
  .main-navigation .dropdown-item:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    transform: none;
  }

  .main-navigation .dropdown-item:active,
  .main-navigation .dropdown-item.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.23);
  }
}

@media (max-width: 420px) {
  .main-navigation.navbar {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .main-navigation .navbar-brand img,
  .main-navigation .navbar-brand .img-fluid {
    max-width: 145px;
    max-height: 48px;
  }

  .main-navigation .navbar-collapse {
    padding: 0.45rem;
  }

  .main-navigation .nav-link {
    padding: 0.7rem 0.75rem !important;
  }
}

/* Adressen in den Standortkarten gut lesbar darstellen */
.standort-card address {
  color: #003366;
  font-style: normal;
  line-height: 1.5;
}


/* P0 Fix: Benefit-Icons (Textbaustein 29) – leere cms-benefit-icon Divs */
#Leistungen .cms-benefit-icon::before {
  font-family: "bootstrap-icons";
  font-size: 2.15rem;
  line-height: 1;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#Leistungen .row.g-4 > div:nth-child(1) .cms-benefit-icon::before { content: "\f637"; }
#Leistungen .row.g-4 > div:nth-child(2) .cms-benefit-icon::before { content: "\f46b"; }
#Leistungen .row.g-4 > div:nth-child(3) .cms-benefit-icon::before { content: "\f4d0"; }
#Leistungen .row.g-4 > div:nth-child(4) .cms-benefit-icon::before { content: "\f76f"; }
#Leistungen .row.g-4 > div:nth-child(5) .cms-benefit-icon::before { content: "\f6fe"; }
#Leistungen .row.g-4 > div:nth-child(6) .cms-benefit-icon::before { content: "\f407"; }
#Leistungen .row.g-4 > div:nth-child(7) .cms-benefit-icon::before { content: "\f61c"; }
#Leistungen .row.g-4 > div:nth-child(8) .cms-benefit-icon::before { content: "\f709"; }
@media (max-width: 767.98px) {
  #Leistungen .cms-benefit-icon::before { font-size: 1.65rem; }
}