/**
 * =============================================================================
 * Anpassungen in diese Datei - Adjustments to this file
 * ==========================================================================
 */

/* fuer alle Geraete-Klassen */



.myClass p {
    color: #ff0000;
}


 :root {
      --scroll-duration: 5s; 
    }






/* Galerie-Item */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s forwards;

}

/* Fade-In Animation mit leichtem Delay */
.gallery-item:nth-child(1) { animation-delay: 0s; }
.gallery-item:nth-child(2) { animation-delay: 0.1s; }
.gallery-item:nth-child(3) { animation-delay: 0.2s; }
.gallery-item:nth-child(4) { animation-delay: 0.3s; }

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

/* Bild-Style */
.gallery-item img {
  width: 98%;
  height: auto;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: grayscale(70%);
     margin-bottom:1%;
    margin-top:1%;
}

/* Hover-Zoom & Schatten */
.gallery-item:hover img {
  transform: scale(1.1);
  filter: grayscale(0%);
    width: 98%;
    margin-bottom:1%;
    margin-top:1%;
}

.gallery-item:hover {
  box-shadow: 0 15px 25px rgba(0,0,0,0.3);
}





.bildbewegung {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  margin: 1rem 2rem 0 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display: grid;
  place-items: left;
  background: #0f172a; 
  will-change: transform, border-radius;
  top:50px;
}

.bildbewegung img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: center;
}

/* Animation nur bei Sichtbarkeit */
.bildbewegung.animate {
  animation: moveUp var(--scroll-duration) ease-out 1 forwards;
}

@keyframes moveUp {
  from {
    transform: translateY(0);
    border-radius: 20% 50%; 
  }
  to {
    transform: translateY(-100px);
    border-radius: 50%; 
  }
}

/* Blauer Kreis */
.blauerkreis {
  width: 250px;
  height: 200px; 
  border-radius: 20% 50%;
  will-change: transform, border-radius;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  position: absolute;
  left: 180px;
  z-index: 1;
}

.blauerkreis img {
  width: 250px;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

/* Animation nur bei Sichtbarkeit */
.blauerkreis.animate {
  animation: moveDiagonal 6s ease-in-out 1 forwards;
}

@keyframes moveDiagonal {
  from {
    transform: translate(0, 0);
    border-radius: 20% 50%;
  }
  to {
    transform: translate(80px, -150px);
    border-radius: 50%;
  }
}



.rightcolumn #main .inside {
  padding: 40px 0px 20px 20px;
}

aside .inside {
  padding: 40px 10px 30px 30px;
}

h1, h2, h3, h4, body{
  hyphens: auto;

} 
h1 {
  position: relative;
font-family: 'Open-sans-light', sans-serif !important;
line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 160%;
}

.headercontainer .inside {
  padding-top: 20px;
  padding-bottom: 20px;
}

.ce_ctscontact .contact {
  font-size: 80%;
}

.dekolinie {
  width: 48%;
  right: 26%;
  position: absolute;
  border-bottom: 1px solid #003882;
  bottom: 1px;
  content: "";
}

.mobile_menu_trigger {
    cursor:pointer;
}

#main .mod_article [class*="ce_"] p {
  line-height: 1.7 !important;
}

.mainmenu > ul > li:hover > a, .mainmenu > ul > li > a.trail, .mainmenu > ul li > a.active, .mainmenu > ul > li > strong {
  color: #003882;
  border-radius: 0;
  text-decoration: none;
  transition: All 0.4s ease;
  border-bottom: 1px solid #003882;
  background-color: #f3f5f7;
}

.mainmenu > ul > li:hover > a::before , .mainmenu > ul > li > a.trail::before , .mainmenu > ul li > a.active::before , .mainmenu > ul > li > strong::before {
top: 13px;
left: 0px;
border-width: 5px 0 5px 5px;
border-left-color: #003882;
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: #fff;
  border-left-color: rgba(255, 255, 255, 0);
border-left-color: #003882;
}
/* 
.mainmenu > ul > li:hover > a::after, .mainmenu > ul > li > a.trail::after, .mainmenu > ul li > a.active::after, .mainmenu > ul > li > strong::after {
top: 13px;
right: 0px;
border-width: 5px 0 5px 5px;
border-left-color: #003882;
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: #fff;
  border-left-color: rgba(255, 255, 255, 0);
border-left-color: #003882;
transform: rotate(180deg);
}
*/

.btn-hell {
  display: inline-block;
  position: relative; /* Wichtig für ::before / ::after */
  padding: 12px 12px 12px 12px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
  overflow: hidden; /* sorgt dafür, dass die Animationen im Rahmen bleiben */
  z-index: 0;
}

.btn-hell a {
  font-size: 20px !important;
  text-decoration: none; /* kein Unterstrich */
  color: #003882 !important;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2; /* über den Pseudo-Elementen */

  display: inline-block;
}

/* Pseudo-Elemente für Hover-Effekte */
.btn-hell::before,
.btn-hell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 8px;
  z-index: 1;
}

/* Heller Overlay-Effekt */
.btn-hell::before {
  background-color: #ffffff;
}

/* Rahmen-Effekt */
.btn-hell::after {
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);

}

/* Hover-Zustand */
.btn-hell:hover {
  background-color: #003882;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);

}

.btn-hell:hover::before {
  opacity: 0;
  transform: scale(0.5);
}

.btn-hell:hover::after {
  opacity: 1;
  transform: scale(1);
}

.btn-hell:hover a {
  color: #ffffff !important;
  text-decoration: none !important; /* hier: kein Unterstrich beim Hover */
}


.mainmenu ul li.submenu:hover a::after, .mainmenu ul li.submenu:hover strong::after {
  content: "";
  margin-left: 5px;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.ce_text.ce-slider .slider-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  line-height: 1.2;
  font-weight: bold;
}

.ce_text.ce-slider .slider-text {
  position: relative;
  top: 50%;
  max-width: 1240px;
  display: flex;
  margin: 0 auto;
  padding: 30px;
  overflow: hidden;
  transform: translateY(-50%);
}

.slider-hg {
  background: rgba(0,52,113,0.6);
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}


/*
.textimslider {
  margin-top: 17%;
  position: relative;
  color: #fff;
  overflow: visible;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 10px;
padding-bottom: 10px;
font-weight: lighter;
font-size: 180%;
font-family: 'Open-sans-light';
} */

.textimslider {
  top: 60%;
  position: absolute;
  color: #fff;
  overflow: visible;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: lighter;
  font-size: 180%;
  font-family: 'Open-sans-light';
  display: flex;
  margin-left:10%;
}

.slideraktuelles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  overflow: visible;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 130%;
  line-height: 140%;
}



.slideraktuelles-hg {
  background: rgba(256,256,256,0.8);
  border-top: 1px solid white;
  border-bottom: 1px solid white;

}

.slider-control .slider-menu b.active, .slider-control .slider-menu b, .slider-control{
  display: none;
  
}

header .top .inside {
  justify-content: right;
  font-size: 16px;
}

[class*="ce_"].bg-blue .inner {
  background-color: #003882;
  color: #fff;
  border-right:1px solid #fff;
}

[class*="ce_"].bg-hellblau-rechts .inner {
  color: #003882;
  border: 2px dotted rgba(130,0,28,0.5);
  border-radius: 80px 0px 80px 0px;

}

[class*="ce_"].bg-hellblau-links .inner {
  color: #003882;
  border: 2px dotted rgba(28,110,164,0.5);
  border-radius: 0px 80px 0px 80px;

}

.right {
  float: right;
}

.dunkler-text {
  color: #003882 !important;
}

.ce_text.iconboxtop .inner p:last-child a {
  background-color: #003882;
}

.ce_text.bg-blue .inner p:last-child a {
  background-color: #fff !important;
  color: #003882 !important;
}

/*.slider-hg {
  background: rgba(0,52,113,0.2);

}*/
.ce_text.ce-slider .slider-text {
  top: 60%;
}

.ce_text.ce-slider .slider-inner {
  top: 10%; 
}

 
 
.textimsliderklein {
  margin-top: 17%; position: relative; color: #000; overflow: visible;font-size: 40% !important;
color: white;
 }

.ce_text.iconboxtop .inner .icon {
  font-size:  1.6667em;
  color: #003882;
  padding-bottom:5%;
}

.ce_text.iconboxtop .inner .text {
  height: auto;
}

.ce_text.iconboxtop .inner a:last-child {
  padding-top: 5%;
}


.abstandoben5 {
  margin-top:5%;
}

.abstand5 {
  margin-top:5%;
  margin-bottom:5%;
}

.paddingtop50 {
  padding-top:50px;
}



.mobile_menu .inner {
  background: #003882;
  color: #fff;
}

.mobile_menu #mainmobil li > a:hover {
  background: rgba(256, 256, 256, 0.8);
  color: #003882;
}



.mobile_menu #mainmobil li > strong.trail, .mobile_menu #mainmobil li > a.trail {
 
  color: #fff;
}


.mobile_menu #mainmobil ul ul li {
   background: rgba(256, 256, 256, 0.4);
  padding-left: 10px;
}


.mobile_menu #mainmobil li > strong.active {
  background: rgba(256, 256, 256, 0.8);
  color: #003882;
}






/* fuer tablets und groessere Displays*/
@media only screen and (min-width:768px) {

.myClass p {
    color: #00ff99;
}



}

/* fuer tablets und groessere Displays*/
@media (min-width: 500px) and (max-width: 1025px) {


.textimslider {
  font-size: 120%;
  margin-left: 5%;
}


}


/* fuer tablets und groessere Displays*/
@media only screen and (min-width:992px) {

.myClass p {
    color: #f300ff;
}

#iconboxtop .col-lg-3 {
    -ms-flex: 0 0 25%;
    -webkit-box-flex: 0;
            flex: 0 0 24%;
    max-width: 25%;
    margin: 0.5%;
  }


}

/* fuer desktop */
@media only screen and (min-width:1025px) {

.myClass p {
    color: #0800ff;
}


}


/* fuer Smartphones */
@media only screen and (max-width:992px) {

  
  .wenn-klein-weg {
  display:none;
}



.ce_gallery ul.cols_3 li {
  width: 50%;
}


}
/* fuer Smartphones */
@media only screen and (max-width:767px) {

#iconboxtop .col-sm-6 {
width: 96%;
min-height: 1px;
    margin: 2%;
  }
  
  .wenn-klein-weg {
  display:none;
}



.textimslider {
  display:none;
}

.top80 {
  margin-top: 0px;
}



.bildbewegung {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  margin: 1rem 2rem 0rem 0em;
}

.blauerkreis {

  height: 210px;
  left: 40px;
}

.blauerkreis img {
  width: 250px;
  height: 210px;
  object-fit: cover;
  object-position: center;
}


footer .right {
  float: left;
  margin-top: 20px;
}

#main .inside {
  padding: 1px 0;
}

.bottom80 {
  margin-bottom: 0px !important;
}

.slideraktuelles {
  position: absolute;

  left: 15%;
  transform: translate(-10%, -40%);
  color: #000;
  overflow: visible;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 10px;
  font-size: 90%;
  line-height: 140%;

}

}




@media only screen and (max-width:500px) {
  
  .ce_gallery ul.cols_3 li {
  width: 100%;
}



.slideraktuelles {
  position: absolute;

  left: 15%;
  transform: translate(-10%, -40%);
  color: #000;
  overflow: visible;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 10px;
  font-size: 70%;
  line-height: 140%;

}
}