/* ------------ ZENTRALES STYLESHEET -------------- */
/* ************ ZUNAME VORNAME  ******************* */
/* ------------------------------------------------ */

/* ------------------ Schriften -------------------- */



@font-face {
  font-family: 'FinalSix-Thin';
  src: url('/fonts/FinalSix Thin.ttf') format('truetype');
 
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'FinalSix-Light';
  src: url('/fonts/FinalSix Light.ttf') format('truetype');
 
  font-weight: 300;
  font-style: normal;
}


@font-face {
  font-family: 'FinalSix-Bold';
  src: url('/fonts/FinalSix Bold.ttf') format('truetype');
 
  font-weight: 600;
  font-style: normal;
}


/*
FinalSix Thin
font-family: "finalsix", sans-serif;
font-weight: 200;
font-style: normal;

FinalSix Light
font-family: "finalsix", sans-serif;
font-weight: 300;
font-style: normal;

FinalSix Bold
font-family: "finalsix", sans-serif;
font-weight: 600;
font-style: normal;
*/
/* ------------ Allgemeine Formatierung -------------- */
.clearing {
  clear: both;
}
html {
  font-size: 16px;
}
:root{


    /* ------------ Text Größen -------------- */
    /*
    --fontsize-XXXL: clamp(2.5rem, 6vw + 1rem, 6rem); 
    --fontsize-XXL: clamp(2rem, 5vw + 0.5rem, 4.5rem);
    --fontsize-XL: clamp(1.75rem, 4vw + 0.25rem, 3.5rem);
    --fontsize-L: clamp(1.5rem, 3.5vw + 0.2rem, 2.5rem);
    --fontsize-M: clamp(1.25rem, 3vw, 2rem);
    --fontsize-S: clamp(1rem, 2.5vw, 1.5rem);
    --fontsize-XS: clamp(0.875rem, 2vw, 1.25rem);
    */

  --fontsize-XXXL: clamp(2rem, 6vw + 1rem, 3.5rem);
  --fontsize-XXL:  clamp(1.75rem, 4vw + 0.75rem, 3rem);
  --fontsize-XL: clamp(1.5rem, 3.5vw + 0.5rem, 2.5rem);
  --fontsize-L: 2rem;
  --fontsize-M: 1.5rem;
  --fontsize-S: clamp(1rem, 2.5vw, 1.5rem);
  --fontsize-XS: 1rem;




   /* ------------ Farbe
   /* ------------ Farben -------------- */
   --Farbe-Blau: #295FA6;
   --Farbe-Grün: #09A603;
   --Farbe-Rot: #BF0404;
   --Farbe-Schwarz: #000000;
   --Farbe-Grau: #F0F0F0;
   --Farbe-Weiß: #FFFFFF;

  
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ------------------ Text Style Start -------------------- */
h1, h2, h3 {
  font-family: "FinalSix-Bold", sans-serif;

}


p{

  font-family: "FinalSix-Light", sans-serif;





}



a{
  font-family: "FinalSix-Thin", sans-serif;

  text-decoration: none;

}
/* ------------------ Text Style Ende -------------------- */


/* ------------------ Text Größe Start -------------------- */
h1 {
  font-size: var(--fontsize-XXXL);
}

h2{
  font-size: var(--fontsize-XXL);
}

h3 {
  font-size: var(--fontsize-XL);
}


a{

  font-size: var(--fontsize-M);
 

}
p{
  font-size: var(--fontsize-S);
}

/* ------------------ Text Größe Ende -------------------- */


/* ------------ Allgemeine Klassen ------------------- */
.clearing {
  clear: both;
}


.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

}

/* ---------------------- Body Start ----------------------- */
body {

  font-family: "FinalSix-Light", sans-serif;
  





}
.btn-edit-profil{

  font-family: "FinalSix-Light", sans-serif;

}

/* ---------------------- Body Ende ----------------------- */

/* ---------------------- Main Start ----------------------- */
main {
  
    position: relative;


    flex: 1;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20vh;
   
}

/* ---------------------- Main Ende ----------------------- */


/* ---------------------- Header Start ----------------------- */

header {

  z-index: 999;
  padding-top: 2vh;
 
  display: flex;
  flex-direction: column;
   height: 30vh;






}

.LogoPlace{

  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  


}
.navigationPlace{

  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F0F0F0; 

  



}
.logo{

  height: 100%;
  
}

.LogoPlace img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  }


/* ---------------------- Header Ende ----------------------- */


/* ---------------------- Navigation Start ----------------------- */







nav{
  width: 100%;
  height: 100%;
  

}
.nav-bar {

  width: 100%;
  height: 100%;

  display: flex;

  justify-content: space-between;
  align-items: center;
 
  list-style: none;
  position: relative;


  
}

.menu{

width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem 3rem;
}

.menu li a {


color: var(--Farbe-Schwarz);
position: relative;
}







.menu li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  display: block;
  margin-top: 5px;
  right: 0;
  transition: width 0.5s ease-out;
}


.menu li a.underline-red::after { background: var(--Farbe-Rot); }
.menu li a.underline-blue::after { background: var(--Farbe-Blau); }
.menu li a.underline-green::after { background: var(--Farbe-Grün); }


.menu li a:hover::after {
  width: 100%;
  left: 0;
}

.menu li a.AktiveSeite.underline-red::after { width: 100%; background: var(--Farbe-Rot); }
.menu li a.AktiveSeite.underline-blue::after { width: 100%; background: var(--Farbe-Blau); }
.menu li a.AktiveSeite.underline-green::after { width: 100%; background: var(--Farbe-Grün); }



.menu:hover > :not(:hover){

  opacity: 0.5;

}






.hamburger{

  display: none;
  cursor: pointer;
  
  }
  
  
  .bar{
  
  
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
  
  }

  
@media(max-width: 768px){

 
  .nav-bar {

 
    justify-content: end;
    padding: 0 24px;
   
 
  
    
  }

  .hamburger{
  
      display: block;
  
  
  }
  
  
  
  .hamburger.active .bar:nth-child(2){
  
  
      opacity: 0;
  }
  
  .hamburger.active .bar:nth-child(1){
  
  
      transform: translateY(8px) rotate(45deg);
  }
  
  .hamburger.active .bar:nth-child(3){
  
  
      transform: translateY(-8px) rotate(-45deg);
  }
}  


/* ---------------------- Navigation Ende ----------------------- */

/* ---------------------- Footer Start ----------------------- */

footer{
  z-index: 1000000;
  margin-top: 0.6vw;
  border-top: 1.5px solid black;

 
  padding-left: 3vw ;
  padding-right: 3vw;
  min-height: auto;

  flex-basis: 7vh;
  overflow: visible;



  box-sizing: border-box;
}

.footer-links{

  flex-wrap: wrap;
}


/* ---------------------- Footer Ende ----------------------- */


/* ---------------------- Slider Start ----------------------- */
/*
.slideshow {
  background-color: #F0F0F0;
  width: 100%;
  height: 100%;

  position: absolute;
}

.slide {
  display: grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in;
}
.slide-bild {
  grid-column: 1 / 2;
  grid-row: 1/ 5;

  width: 100%;
  border-radius: 10px;
  
  aspect-ratio: 16/9;

  
}
.slide-bild img{

  width: 100%;
  height: 100%;
  object-fit: cover;

}

.slide-text{
  
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content:center;


}

.slide-text p{

  
}



.slide.active{


  opacity: 1 !important;
  z-index: 500;

}

*/


.slideshow {
  position: relative;
  width: 100%;
  height: 80vh; /* Höhe anpassbar */
  overflow: hidden; /* Überschüssige Teile des Bildes ausblenden */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Das Bild wird zugeschnitten, um den Container auszufüllen */
  object-position: center; /* Zentriert den sichtbaren Teil des Bildes */
}

.slide-text {
  position: absolute;
  z-index: 10;
  color: white;
  text-align: center;
  background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
  padding: 1rem;
  border-radius: 8px;
}


/* ---------------------- Slider Ende ----------------------- */

/* ---------------------- Animationen Start ----------------------- */
.transitionX_from_left_to_rigt_class{

  animation: transitionX_from_left_to_rigt ease-out 0.75s;


}

.transitionX_from_right_to_left_class{


  animation: transitionX_from_right_to_left ease-out 0.75s;

}

.transitionY_from_down_to_up_class{

  animation: transitionY_from_down_to_up ease-out 0.75s;


}
.transitionY_from_up_to_down_class{

  animation: transitionY_from_up_to_down ease-out 0.75s;


}







@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
  
}

@keyframes transitionX_from_left_to_rigt {
  from    {

      opacity: 0;
    
      transform: translateX(-100px)
  }

  to{
      opacity: 1;
      transform: translateX(0);
   
  }
}
@keyframes transitionX_from_right_to_left {
  from    {

      opacity: 0;
    
      transform: translateX(+100px)
  }

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

@keyframes transitionY_from_down_to_up {
  from {
    opacity: 0;
    transform: translateY(50px);  
  }

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

@keyframes  transitionY_from_up_to_down {
  from    {

      opacity: 0;
  
      transform: translateY(-50px)
  }

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


/* ---------------------- Animationen Ende ----------------------- */


/* ---------------------- Allgemeine Seiten formatierung Start ----------------------- */
.content{

  margin-top: 3vh;
  margin-left: 6vw;
  margin-right: 6vw; 
  


 

}




.links{
  text-align: left;
 

}


.mitte{

  text-align: center;


}


.rechts{

  text-align: right;
  

}


.block{


   text-align: justify;
  

}






p{
  margin-top: 2.5vh;
  margin-bottom: 5vh;
  line-height: 1.6; 

  
  }

/* ---------------------- Allgemeine Seiten formatierung Ende ----------------------- */


/* ---------------------- Karussell Start ----------------------- */

.karussell {
  
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.karussell-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  
}

.karussell-item {
  position: absolute;

  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);

  opacity: 0;
  transform: translateX(-50%) scale(0.5);
  z-index: 0;
}

.karussell-item-left {
  transition: all 0.5s ease-in-out;
  left: 10%;
  transform: translateX(-50%) scale(1);
  opacity: 0.8;
  z-index: 1;
  height: 40vh;
}

.karussell-item-active {
  transition: all 0.5s ease-in-out;
  left: 50%;
  transform: translateX(-50%) scale(1);
  opacity: 1;
  z-index: 3;
  height: 80vh;
}

.karussell-item-right {
  transition: all 0.5s ease-in-out;
  left: 90%;
  transform: translateX(-50%) scale(1);
  opacity: 0.8;
  z-index: 1;
  height: 40vh;
}



/* ---------------------- Karussell Ende ----------------------- */




/* ---------------------- Galerie Start ----------------------- */

.Galerie-Grid{
  margin-top: 5vh;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  
}


  .Galerie-Bild-Rahmen{

    max-height: 70vh;


  }
.Galerie-bild{
  width: 100%;
    height: 100%;
    object-fit:contain;

  
}




.Aktives-Galerie-Bild {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 max-height: 90vh;
  width: auto;
  max-width: 90vw;
 
 
  
  z-index: 2000;
  animation: grow 0.5s ease-in-out forwards;
  
}
.Overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 900%;
  height: 900%;
  background: rgba(0, 0, 0, 1);
  z-index: 1500;
  display: none;
}

@keyframes grow {
    from {
        transform: translate(-50%, -50%) scale(0.5);
    }
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes shrink {
  from {
      transform: translate(-50%, -50%) scale(1);
  }
  to {
      transform: translate(-50%, -50%) scale(0.3);
  }
}

.shrink {
  animation: shrink 0.3s ease-in-out forwards;
}




  
/* ---------------------- Galerie Ende ----------------------- */

/* ---------------------- Element_1 Start ----------------------- */



.container{
  width: 100%;

display: flex;
gap: 3vw;
justify-content:space-evenly;
flex-direction:row;





}




.image-section img{

  width: 100%;
  height: 100%;
object-fit: cover;


}

.image-section{
  flex: 1;

  

}



.container .bildlinks{

  order: 1;


}
.container .bildrechts{

  order: 2;

}
.text-section{
  flex: 2;
  order: 1;

}


/* ---------------------- Element_1 Ende ----------------------- */



/* ---------------------- Element_2 Start ----------------------- */

.container2{

  width: 100%;
  height: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}


.bild-float-right {
  
  
}

.bild-float-left {

}


.container2 .bildlinks{

  float: left;
  width: 350px;
  height: auto;
  margin-right: 30px;



}
.container2 .bildrechts{
  
  float: right;
  width: 350px;
  height: auto;
  margin-left: 30px;


}




.Bild{



  width: 100%;
  height: 100%;
object-fit: cover;
}




/* ---------------------- Element_2 Start ----------------------- */





/* ---------------------- Handy formatierung Start ----------------------- */
@media (max-width: 1024px) {
 

  .karussell-item-left,
  
  .karussell-item-right {
    height: 30vh; 
  }

  .karussell-item-active{

    height: 60vh;


  }
}

@media (max-width: 768px) {
 

  .karussell-item-left,
 
  .karussell-item-right {
    height: 25vh; 
  }

  .karussell-item-active{

    height: 50vh; 

  }



}


@media (max-width: 550px) {


  .block{


    text-align: left;
   
  
  }


}


@media (max-width: 480px) {
 




  .karussell-item-left,
 
  .karussell-item-right {
    height: 15vh; /* Kleineres Karussell auf Smartphones */
  }

  .karussell-item-active{

    height: 30vh; 

  }



}

  @media(max-width: 768px){
   
   
    
  
 header .menu{
  position: absolute;
  left: -100%;
  top: 6vh;
  flex-direction: column;
  background: var(--Farbe-Grau);
  width: 100%;
  text-align: center;
  transition: 0.3s;
  
  padding-bottom: 30px;



}
header .menu.active{

            
  left: 0;
}


 
 .Galerie-Grid{


  grid-template-columns: repeat(2, 1fr);
  
  }
 
.menu:hover > :not(:hover){

  opacity: 1;

}







































.container2 .bildlinks {
  float: none;
  width: 100%;
  margin: 0 auto 20px;
}
.container2 .bildrechts {
  float: none;
  width: 100%;
  margin: 0 auto 20px;
}




.container{
flex-direction: column;

}
.container .bildrechts{

  order: 1;

}





























}
/* ---------------------- Handy formatierung Ende ----------------------- */



/* ---------------------- Admin formatierung Start ----------------------- */

/* ---------------------- Admin DatenEditor formatierung Start ----------------------- */
.editprofile {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 5px;
}

.editprofildiv {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content:center;
}

.LoeschProfil{

 width: 5%;

}

.editprofil {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 0.5px solid black;
  width: 60%;
  padding: 10px;
  gap: 10px; 
  margin-left: 20px;
}

.profilname {
  flex: 1; 
  text-align: left; 
  white-space: nowrap; 
}

.Auswahlbox {
  flex: 0 0 100px; /* Feste Breite für den Dropdown */
  border: 0.3px solid gray;
}




.btn-edit-profil {
  flex: 0 0 60px; 
  display: inline-block;


 
  color: black;
  background-color: #f3f3f3; 
  border: 1px solid #ccc; 
  border-radius: 3px; 
  text-align: center; 
  text-decoration: none; 
 
  font-size: var(--fontsize-XS);
  
}

.btn-edit-profil:hover {
  background-color: #e0e0e0; 
  border-color: #bbb; 
}

.btn-symbol{
 
  height: 100%;
  width: auto;
  background-color: transparent;
}

.profil-Neu{
  display: flex;
  align-items: center;


}
.btn-neues-profil{
  height: 40px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;


}

.VorschauBild {
  max-width: 150px; /* Breite des Bildes */
  max-height: 150px; /* Höhe des Bildes */
  display: block;
  margin: 10px auto; /* Zentrieren und etwas Abstand */
  object-fit: contain; /* Bild skalieren, ohne das Seitenverhältnis zu verzerren */
}


/* ---------------------- Admin DatenEditor formatierung Ende ----------------------- */


/* ---------------------- Admin NeueDaten formatierung Start ----------------------- */
.NeuerInhalt {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  margin: auto;
  width: 40%;
  height: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.NeueDatenForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}



.textareablock {
  width: 100%; 
  min-height: 400px; 
  padding: 10px; 
  font-size: 16px; 
  line-height: 1.5; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  background-color: #f9f9f9; 
  box-sizing: border-box;
  resize: vertical; 
}
/* ---------------------- Admin NeueDaten formatierung Ende ----------------------- */


/* ---------------------- Admin Login formatierung Start ----------------------- */

.Admin-Login-Form{

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  margin: auto;
  width: 40%;
  height: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;

}


.Admin-Login-Form input{


min-height: 50px;
min-width: 100px;

}


/* ---------------------- Admin Login formatierung Ende ----------------------- */
/* ---------------------- Admin formatierung Ende ----------------------- */