/* Styles Index.html */

body {
    margin: 0px;
}

/*  Impressum plus Logo  */

.impressumdiv {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wrap - DIV mit den Drehkarten */

.spinnerdiv {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
    width: 980px;
   
}

/* Header - mit Hintergrundbild - Logo - NavBar */



.header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    /* background-image: url(img/lexago_background.jpg); */
    background-color: #fff;
    background-repeat: contain;
    background-size: cover;
    height: 100vh;
    
}

.headerimg img {
width: 300px;
}
.container_navbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    background-color: #87CEEB;
    backdrop-filter: blur(0); /* Initialer Blur-Effekt (kein Blur) */
    transition: backdrop-filter 0.3s;
    
}



/* Scroll-Effekt, der Blur-Effekt hinzufügt */
.scrolled-up .container_navbar {
    backdrop-filter: blur(10px); /* Hier kannst du den gewünschten Blur-Wert einstellen */
}



.container_navbar a {
    margin-right: 18px;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #000;
    font-weight: 400;
    font-size: 22px;
    transition: font-size 0.3s; /* Hinzugefügte Transition für eine sanfte Animation */
}

.container_navbar a:hover {
    text-decoration-color: #fff;
    font-size: 24px; /* Ändere die Größe nach Bedarf */
}

.container_navbar a.active {
    text-decoration-color: #fff; /* Farbe für den aktiven Link */
    font-size: 24px; /* Ändere die Größe nach Bedarf */
    /* text-decoration: underline;  Unterstreichung für den aktiven Link */
}

/* Animiertes Div, Flipp-motion */

.animationsdiv {
    position: absolute;
    height: 300px;
    width: 300px;
    right: 50vb;
    top: 25vh;
}

/* AI generierter code CSS für Flipp-motion */
.card-container {
    width: 200px;
    height: 200px;
    perspective: 1000px;
   /* position: absolute; */
    height: 300px;
    width: 300px;
    right: 10vb;
    top: 65px;
    margin: 12px;
  
}

.card-container2 {
    width: 200px;
    height: 200px;
    perspective: 1000px;
   /* position: absolute; */
    height: 300px;
    width: 300px;
    right: 50vb;
    top: 65px;
    margin: 12px;
}


.card-container3 {
    width: 200px;
    height: 200px;
    perspective: 1000px;
   /* position: absolute; */
    height: 300px;
    width: 300px;
    right: 90vb;
    top: 65px;
    margin: 12px;
}


.card-container4 {
    width: 200px;
    height: 200px;
    perspective: 1000px;
  /* position: absolute; */
    height: 300px;
    width: 300px;
    right: 10vb;
    bottom: 65px;
    margin: 12px;
}


.card-container5 {
    width: 200px;
    height: 200px;
    perspective: 1000px;
  /* position: absolute; */
    height: 300px;
    width: 300px;
    right: 50vb;
    bottom: 65px;
    margin: 12px;
}


.card-container6 {
    width: 200px;
    height: 200px;
    perspective: 1000px;
   /* position: absolute; */
    height: 300px;
    width: 300px;
    right: 90vb;
    bottom: 65px;
    margin: 12px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.card:hover .content {
    transform: rotateY(180deg);
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 0.5s;
   
   
   
}

.front,
.back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    
}

.front {
   
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.5); /* Hintergrund mit Transparenz */
    backdrop-filter: blur(10px); /* Blur-Effekt */
    pointer-events: none; /* Damit keine Interaktion mit dem Hintergrund möglich ist */
    border: #87CEEB;
    border-style: solid;

}

.back {
    background-color: #87CEEB;
    transform: rotateY(180deg);
    border-radius: 40px;
}

.back p {
font-size: 22px;
}


/* Optional: Add styling for better visual appearance */
.card-container {
    cursor: pointer;
}

.front,
.back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    color: #fff;
}


.back h1  {

    font-size: 24px;

}

.front h1, .front p  {
    color: #1D3557;
    font-size: 24px;

}

/* Standardcontainer mit eine Hälfte Bild, eine Hälfte Text */

.standardcontainer {
    height: 460px;
    display: flex;
    justify-content: center;

}


.standardcontainerbildleft {
    height: 460px;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    background-color: #87CEEB;
    border: #fff;
    border-style: double;
    border-right: none;
    border-left: none;
    border-width: 12px;
}

.half-width {
    flex: 1;
    width: 50%;
    /* Optional: Fügen Sie hier weitere Stile für die Hälften hinzu */
}

.half-width-logo {
    flex: 1;
    width: 50%;
    /* Optional: Fügen Sie hier weitere Stile für die Hälften hinzu */
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.half-width-text {
    flex: 1;
    width: 50%;
    /* Optional: Fügen Sie hier weitere Stile für die Hälften hinzu */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
   
}

.half-width-text p {
   margin-left: 56px;
   margin-right: 56px;
   
    font-size: 22px;
    text-align: justify;
}
.half-width-text h2 {
    margin-left: 56px;
   margin-right: 56px;
     font-size: 22px;
     text-align: center;
 }

/* Header bzw. Begrüßung mit Headline und Introtext */

.intropages {
background-color: #87CEEB;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border-style: double;
    /* background-color: #fff; */
    border-color: #fff;
    border-width: 12px;
    border-top: none;
    border-left: none;
   
        border-radius: 0 0 50% 50%;
    
    border-right: none;

}


.intropages h1  {
    color: #000;
    
}
.intropages p  {
    color: #000;
    margin-left: 56px;
    font-size: 20px;
    text-align: center;
    margin-right: 56px;
}

.headerpages {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: start;
   
}


.divline {
    border-style: solid;
    border: top;
    border-bottom: none;
    border-left: none;
    border-right: none;
    height: 8px;
    width: 80%;
}

.divlineintro {
    border-style: solid;
    border: top;
    border-bottom: none;
    border-left: none;
    border-right: none;
    height: 8px;
    width: 80%;
    border-color: #fff;
}


/* AGB P*/

.p {
    font-size: 18px;
    text-align: center;
    margin: 46px;
}