/* ========== Styling für den Call-to-Action Button ========== */

.cta-button-container {
  text-align: center; /* Zentriert den Button im Container */
  margin-top: 25px;   /* Sorgt für Abstand nach oben */
  margin-bottom: 25px;/* Sorgt für Abstand nach unten */
}

.cta-button {
  display: inline-block; /* Erlaubt Padding und Margin */
  background-color: rgba(33,90,134,1.0); /* Primärfarbe (Blau aus Ihrem Logo) */
  color: #ffffff!important;
  padding: 15px 30px;
  font-size: 1.3rem; /* Leicht vergrößerte Schrift */
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px; /* Moderne abgerundete Ecken */
  border: 2px solid transparent;
  transition: all 0.3s ease; /* Sanfte Übergänge für Hover-Effekte */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Dezenter Schatten für Tiefe */
}

/* Zustand, wenn die Maus über den Button fährt */
.cta-button:hover {
  background-color: #00446e; /* Etwas dunkleres Blau */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    color: white;
}

/* Zustand, wenn der Button per Tastatur fokussiert wird (WICHTIG für Barrierefreiheit!) */
.cta-button:focus {
  outline: 3px solid #707173; /* Deutlicher Fokus-Ring in Grau (aus Logo) */
  outline-offset: 3px;
  background-color: #00446e;
}

/* Styling für das Icon im Button */
.cta-button .cta-icon {
  width: 1em; /* Passt sich der Schriftgröße an */
  height: 1em;
  vertical-align: middle;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.cta-button:hover .cta-icon {
  transform: translateX(5px); /* Bewegt den Pfeil bei Hover nach rechts */
}

/* ========== Styling für den Call-to-Action Button ENDE ========== */


  #ContentContainerLay2 {
    background-color:rgba(255,255,255,0);
  }

#BottContHtmlDiv {
    background-color: rgba(255,255,255,0);
}
#BottContHtmlDiv_Re {
     background-color: rgba(255,255,255,0.9);
    border-radius: 10px;
    padding: 2%;
    width:auto;
    max-width: 500px;
}

/* BACKGROUND ANIMIERT MIT LOTTIEPLAYER */
    /* 1. Grund-Styling fuer den Container */
    #LottieBackgroundContainer {
        z-index: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        overflow: hidden; /* Verhindert moegliches ueberlaufen der Animation */
    }

    /* Styling fuer den Player selbst */
    #LottieBackgroundContainer lottie-player {
        width: 100%;
        height: auto;
        opacity: 1.0;
    }

    /* Stellt sicher, dass der darueberliegende Inhalts-Container durchsichtig ist */
    #ContentContainerLay2 {
        background-color: transparent !important;
    }

    /* --- PERFORMANCE & BARRIEREFREIHEIT --- */

    /* 2. Deaktiviert die Animation, wenn der Benutzer 'Bewegung reduzieren' wuenscht */
    @media (prefers-reduced-motion: reduce) {
        #LottieBackgroundContainer {
            display: none;
        }
    }

    /* 3. Deaktiviert die Animation auf mobilen Geraeten (bis 768px Breite) zur Performance-Steigerung */
    @media (max-width: 768px) {
        #LottieBackgroundContainer {
            display: none;
        }
    }

#hintLottie {
position:relative;
width:100%;
margin-left:auto;
margin-right:auto;
float:none;
height: auto;
background-color:rgba(0,0,0,0);
opacity: 1.0;
}
/* BACKGROUND ANIMIERT MIT LOTTIEPLAYER ENDE */


/*TOPLOGO*/

#OverTopHtmlContDIV.fixed svg {
        max-width: 120px;
        width: 100%;
    }

#TopLogo {
  max-height: 130px;
  display: inline-block;
  outline: none; /* Wichtig für eigenes Focus-Styling */
}

#TopLogo a {
  display: inline-block; /* Stellt sicher, dass der Link um das Bild herum einen Fokusrahmen hat */
  outline: none; /* entfernt Standardfokus */
}

#TopLogo a:focus {
  outline: 0px dotted rgba(0, 0, 0, 1); /* Sichtbarer gepunkteter Rahmen bei Fokus */
  outline-offset: 2px; /* Abstand zum Bild */
background-color:rgba(0,0,0,0.1);
}

#TopLogo img {
margin-left:auto;
margin-right:auto;
  width: 100%;
  height: auto;
  display: block; /* Verhindert zusätzliche Abstände unter dem Bild */
}

@media screen and (max-width: 959px) {
  #TopLogo, #TopLogo svg {
max-width: 100%;
      width: 100%;
      max-height: inherit;
}
    
    #OverTopHtmlContDIV. #OverTopHtmlContDIV.fixed {
        max-width: 90%!important;
        width: 90%!important;
    }
}

/*TOPLOGO ENDE*/

#ContLay21InfoImgDiv {
  margin-top:0%!important
}

/* ################## Navigation Umstyling*/

#navigationV4 li a > span {
    font-size: 1.1rem; /*Schriftgroesse 1. Ebene veraendern*/
}
#navigationV4 li ul li a > span {
    font-size: 1.0rem; /*Schriftgroesse weitere Ebenen veraendern*/
    font-weight: normal;
}

ul.FM_CSS_navigationV4 li span {
font-family:"Ubuntu Condensed",Arial,sans-serif!important;
}

ul.FM_CSS_navigationV4 li ul {
font-family:"Ubuntu Condensed",Arial,sans-serif!important;
     background-color: rgba(255,255,255,1.0); /*Ebene 2 + 3 UL-Hintergrund*/
}
ul.FM_CSS_navigationV4 > li > ul > li > ul {
  left: 40%; /*Unternavi 3. Ebene Position*/
}


#NavipunktContainer li {
background-color: rgba(255,255,255,0); /*1. Ebene */
    outline: 0px dotted rgba(33,90,134,0.7);
}
#NavipunktContainer li>a span {
color: rgba(0,0,0,0.9);  /*1. Ebene */
}

ul.FM_CSS_navigationV4 ul li a {
  background-color: rgba(33,90,134,1.0)!important;      /*2. EBENE Button Hintergrundfarbe */
}
ul.FM_CSS_navigationV4 ul li a>span {
  color: rgba(255,255,255,1.0)!important;      /*2. EBENE Button Hintergrundfarbe */
}
ul.FM_CSS_navigationV4 ul li a:hover {
  background-color: rgba(33,90,134,0.5)!important;      /*2. EBENE Button Hintergrundfarbe Hover */
}
ul.FM_CSS_navigationV4 ul li a:hover span {
  color: rgba(0,0,0,1)!important;              /* ueberschreibt Schrift-Farbe bei hover 2. Ebene */
}

/*Hintergrundfarbe für Navileiste fixed*/
#NavipunktContainer.fixed {
 background: rgba(255,255,255,1.0)!important;
  border-bottom: 0px;
}

#NavipunktContainer {
    top: 0!important; /*Aendert Abstand zum Content*/
}
#NavipunktContainer.fixed {
    top: 0!important;
}

#NavipunktContainer.fixed li {
  background-color: rgba(255,255,255,1)!important;
  border-bottom: 0px;
}

#navactive {
  background-color: rgba(255,255,255,0.2)!important;
   /* background-image:url(/lib/imgAllg/dreieckUn.svg);*/
  background-position:50% 0;
  background-size:10px 15px;
  background-repeat:no-repeat
    border-radius: 0!important;
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
      transition-property:all;
  -webkit-transition-property:all;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out
}
#navactive span {
    color: rgba(33,90,134,1)!important;
}
#navactive:hover {
  background-color: rgba(33,90,134,0)!important;
    outline: 1px dotted rgba(33,90,134,1)!important;
  border-radius: 0px!important;
  -moz-border-radius: 0px!important;
  -webkit-border-radius: 0px!important;
      transition-property:all;
  -webkit-transition-property:all;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out
}

/*Navigation Umstyling Ende*/


/*NEWS-TEIL Startseite*/
/* Der aeußere Container, der als 171px hohes Fenster dient */
#NewsStart1 {
    height: 171px;
    overflow: hidden; /* Schneidet alles ab, was überlaeuft */
    
    /* Ihre restlichen Styles */
    position: relative;
    top: -20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/*verhindere Scrollen, sodass nur 2 News sichtbar sind*/


/* 1. Desktop-Stil (Standard ab 960px Breite): 
   Feste Höhe von 171px, kein Scrollen. */
#NewsStart1 .iframe-wrapper {
    height: 105px;
    overflow: hidden; /* Überlauf wird abgeschnitten */
    position: relative;
    /* Sanfter Übergang, wenn sich die Höhe ändert */
    transition: height 0.3s ease; 
}

#NewsStart1 .iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* 2. Mobile-Stil (Greift bei 959px Breite und darunter):
   Höherer Container, Scrollen ist aktiviert. */
@media (max-width: 959px) {
    #NewsStart1 {
    height: inherit;
    overflow: inherit; /* zeigt wieder alles, was ueberlaeuft, scrollt */
}
    #NewsStart1 .iframe-wrapper {
        /* Hoehe für mobile Geräte. */
        height: 202px; /* Passen Sie diesen Wert bei Bedarf an */
        
        /* Erlaubt das Scrollen innerhalb des Containers. */
        overflow-y: auto; /* Zeigt eine vertikale Scroll-Leiste nur bei Bedarf */

        /* Verbessert das Scroll-Gefühl auf iOS (iPhone/iPad) erheblich. */
        -webkit-overflow-scrolling: touch;
    }
}

/*verhindere Scrollen, sodass nur 2 News sichtbar sind ENDE*/


/*NEWS-TEIL Startseite ENDE*/

/*FOOTER-TEIL*/
#BottomAdresse {
  padding: 1%;
  outline: 1px dotted rgba(0,0,0,1);
  outline-offset: 2px;
}
#BottomAdresse .ueberschrift {
    font-size: 1.2em;
    font-weight: bold;
    font-family: "Ubuntu Condensed";
    margin-bottom: 2%;
}

#BottomImpressum {
  margin-top: 20px;
}

.search-container {
  margin-top: 20px;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(33, 90, 134, 1);
  /* Optional: Fügt einen weichen Übergang für den Hover-Effekt hinzu */
  transition: background-color 0.3s ease;
}

.search-container a {
  /* Macht den Link zu einem Block-Element, damit er den Container ausfüllt */
  display: block;
  /* Wendet das Padding hier an, damit der gesamte Bereich klickbar ist */
  padding: 5px;
  font-weight: bold;
  color: white;
  /* Optional: Entfernt die Standard-Unterstreichung des Links */
  text-decoration: none;
}

/* Da der a-Link nun den gesamten Container ausfüllt, funktioniert der
   Hover-Effekt auf dem Container wie gewünscht. */
.search-container:hover {
  background-color: rgba(33, 90, 134, 0.5);
}


/*FOOTER-TEIL ENDE*/



#prim2 {
    /* z-index: 0;
    position:relative; 
    width: 100%;
    min-height: 80vw;
    overflow: hidden;
    max-width: 1500px;
    float:none; 
    margin-left:auto; 
    margin-right:auto; 
    clear:both;*/
  
   background-color:rgba(255,255,255,0.4);
    border-left: 0px solid rgba(0,0,0,0.1);
   
     box-shadow:0px 0px 0px #999; 
   -moz-box-shadow: 0px 0px 0px #999;
    -webkit-box-shadow: 0px 0px 0px #999;
    box-shadow:0px 0px 0px #999;
    
   /*     -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    
    -webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
    
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
  animation-name: fadeIn;*/
    
}
/* gesamten Inhalt positionieren ENDE */

.primaryContainer0,
.primaryContainer2,
.primaryContainer3,
.primaryContainer4,
.primaryContainer6,
.primaryContainer10,
.primaryContainer22,
.primaryContainer23,
.primaryContainer24,
.primaryContainer33 {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 100%;
   /*background-image: url("/lib/2018017/ms02Pics/body_back0.jpg");*/
    background-color:transparent;
    background-attachment: fixed;
   -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
    position: relative;
    background-position: 0% 0%;
    background-repeat: no-repeat no-repeat;
    
     -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    
    -webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
    
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
  animation-name: fadeIn;
}