.body_index {
    background: linear-gradient(to right, #c9d4d1, #5286B5);
}




/* Standard für kleinere Bildschirme */


.center_img {
    width: 105%;
    margin-left: 1%;
}





.scrolledFont {
    font-size: 120%;
    font-family: var(--text-style);
}

a {
	text-decoration: none;
	margin-left: 16%;
	font-weight: bold;
}

.navbar-toggler {
    color: white !important;
    box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset,
    -5px -5px 10px white inset;
}

.navbar-nav {
    color: #f9f9f9;
    justify-content: center;
    align-items: center;
    font-weight: 600%;
    font-family: var(--text-style);
    max-width: 100%;           /* Bild wird nicht breiter als der Container */
    max-height: 100vh;         /* Bild wird nicht höher als der Container */
    width: auto;               /* Behalte die Proportionen bei */
    height: auto;              /* Behalte die Proportionen bei */
}


.flexBoxAdresse {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}


.container_carousell {
    max-width: 100%;
    max-width: 100%;
    width: auto;               /* Behalte die Proportionen bei */
    height: auto;    
}

.background_picture {
    max-width: 100%;           /* Bild wird nicht breiter als der Container */
    height: auto;              /* Behalte die Proportionen bei */
    z-index: 1;
}

h1 {
    color: white !important;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 1); /* Dunkler Schatten hinter dem Text */
}

h2 {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 2); /* Dunkler Schatten hinter dem Text */
}

.btn {
    background-color: var(--secondary-text-color) !important;
    border-image:linear-gradient(to right, black, black) 0 0 0 0 !important;
 
}


.btn:hover {
    background-color: var(--primary-text-color) !important;
    border-image: linear-gradient(to right, white, white) 0 0 0 0  !important;
}

.special_button {
    width: 100%;
    padding: 15px;
    font-size: 1.5rem;
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
}



.special_button:hover {
    background-color: #451F55;
}

.container_special {
    background-color: 2px transparent; /* Hintergrundfarbe */
    border-radius: 5px; /* Abgerundete Ecken für den Kasten */
    border: 1px solid transparent; /* Rand kleiner */
    position: relative; /* Relative Positionierung für Pseudoelemente */
    padding: 5px; /* Innenabstand verringert, um weniger vom Container sichtbar zu machen */
    display: inline-block; /* Damit der Kasten um den Button passt */
    overflow: hidden; /* Überlauf verbergen */
 
}

.container_special:hover {
    transition: border-color 0.3s; /* Übergangseffekt */
}

.special_button a {
    text-decoration: none; /* Entferne die Unterstreichung */
    color: inherit; /* Erbe die Farbe vom Elternelement */
    font-style: var(--text-style);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


.container_special::before {
    --angle: 0deg;
    content: '';
    position: absolute;
    height: calc(100% + 20px); /* Höhe für den Rand-Effekt */
    width: calc(100% + 20px); /* Breite für den Rand-Effekt */
    background-image: conic-gradient(from var(--angle), transparent 0%, #724E91, #451F55, white); /* Farben wechseln */
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 5px; /* Abgerundete Ecken für den Rand */
    animation: 3s spin linear infinite; /* Animation für den Rand */
    z-index: -1; /* Z-Index niedriger */
}

@keyframes spin {
    from {
        --angle: 0deg; /* Startwinkel */
    }

    to {
        --angle: 360deg; /* Endwinkel */
    }
}


/* cards Elemente */
.card {
    background-color: transparent !important;
    border: none !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
}

.card-body {
    text-align: center !important;
    max-width: 100% !important;
}

.rounden {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
}


.container2 {
    position: relative;
    overflow: hidden; /* Verhindert, dass überflüssiger Inhalt angezeigt wird */
    width: 100%;
}

.video_container {
    position: absolute; /* Positioniert das Video absolut */
    top: 0; /* Setzt die Position auf den oberen Rand */
    left: 0; /* Setzt die Position auf den linken Rand */
    width: 100%; /* Breite des Videos auf 100% */
    height: 100%; /* Höhe des Videos auf 100% */
    object-fit: cover; /* Sorgt dafür, dass das Video das Container vollständig ausfüllt */
    z-index: -1; /* Video hinter den sozialen Medien */
}

.social-media {
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px); /* Blur-Effekt für den Hintergrund */
    -webkit-backdrop-filter: blur(10px) !important;
    position: relative; /* Ermöglicht das Z-Index Management */
    z-index: 100; /* Über dem Video */
    color: white; /* Textfarbe der Links */
    padding: 20px; /* Abstand zum Rand */
}

.social-media a:hover {
    color: black !important; /* Textfarbe beim Hover */
    backdrop-filter: blur(10px) !important; /* Blur beim Hover */
    -webkit-backdrop-filter: blur(10px) !important;
}

.social-icon {
    width: 30px; /* Größe der sozialen Icons */
    height: auto; /* Automatische Höhe */
    margin: 0 10px; /* Abstand zwischen den Icons */
}

.big_devices ,.small_devices{
    position: relative;
    height: auto;
    overflow: hidden;
}

.myName {
    color: gold;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); /* Dunkler Schatten hinter dem Text */
}


.logo-container {
    position: fixed; /* Positioniert das Logo fest auf dem Bildschirm */
    top: 0;         /* Platziert es am oberen Rand */
    left: 1%;        /* Platziert es am linken Rand */
    padding: 0px;  /* Fügt einen Abstand um das Logo hinzu */
    z-index: 1000;  /* Stellt sicher, dass das Logo über anderen Elementen liegt */
}

.logo-container img {
    max-width: 120px; /* Passe die maximale Breite des Logos an */
    height: auto;     /* Behalte das Seitenverhältnis des Logos bei */
    fill:white
    
}


.center-flex {
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    flex-direction: column; /* Inhalt vertikal anordnen */
}

.container_adress {
    margin-bottom: 20px; /* Abstand unter der Karte */
}

.contact-container {
    width: 100%; /* Breite auf 100% */
}

.contact {
    padding: 15px; /* Innenabstand für den Kontaktbereich */
    text-align: center; /* Text zentrieren */
    color: white;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 1); /* Optional: leichter Schatten unter der Navbar */
 
}

.center {
    text-align: center;
}

.map-address-container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 100%;
  }
  
  .map-container {
    flex: 1 1 600px;
    max-width: 600px;
  }
  
  .address-container {
    flex: 1 1 300px;
    max-width: 600px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2; /* Setze die Adresse rechts */
}


  .containerForExtremeBigDevices {
    max-width: 2400px; /* Maximale Breite der Seite */
    width: 100%; /* Passt sich kleineren Bildschirmen an */
    justify-content: center !important;
    text-align: center !important;
}



@media (min-width: 2400px) {
    .scale_big_devices {
        margin: 0 auto; /* Zentriert den Container */
        padding: 0 5%; /* Dynamischer Abstand: 5% von links und rechts */
    }

    .scale_big_devices_carousell {
        margin: 0 auto;
        padding: 0;
    }

}

@media (min-width: 800px) {
    .small_devices {
        display: none;
    }

    .container_contact {
        display: flex;
        flex-direction: vertical;
        justify-content: center;
        align-items: center;
        gap: 50px; /* Abstand zwischen Überschrift und Button */
        margin-top: 5%;
        margin-right: 10%;
        margin-bottom: 5%;

    }
    
    /* Standard-Einstellungen für die Überschrift und den Button */
    .container_special {
        width: 100%;
        text-align: center;
    }

    .container_title {
        margin-top: 5%;
        width: 100%;
        text-align: center;
    }


    nav {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        width: 100%;
        height: 80px;            /* Höhe des Balkens festlegen */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: leichter Schatten unter der Navbar */
        z-index: 1000;           /* Über anderen Elementen anzeigen */
    }
    

    nav ul {
        display: flex;
        justify-content: space-between; /* Verteilt die Elemente gleichmäßig mit maximalem Platz zwischen ihnen */
        list-style: none; /* Entfernt die Standard-Aufzählungspunkte */
        padding: 0; /* Entfernt Standard-Padding */
        margin: 0; /* Entfernt Standard-Margin */
        margin-top: 1%;
        list-style-type: none;
    }

    nav ul li {
        flex: 1; /* Jeder li erhält den gleichen Platzanteil */
        text-align: center; /* Zentriert den Text im li */
    }

    nav ul li a {
        display: block; /* Damit der gesamte Bereich klickbar ist */
        padding: 10px 20px; /* Fügt innenliegendes Padding hinzu für bessere Klick-Fläche */
        text-decoration: none; /* Entfernt die Standard-Unterstreichung der Links */
        color: #f9f9f9;
    }

    nav ul li a:hover {
        box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.1) inset,
        -5px -5px 10px white inset;
    }

    .first-item {
        margin-left: 150px; /* Erstes Element beginnt weiter rechts */
    }
    
   


    .flex_item1:hover,
    .flex_item2:hover,
    .flex_item3:hover,
    .flex_item4:hover{
        transform: scale(1.05);
    }

    .flex_container {
        display: flex;
        padding: 10px;
        max-width: 100%;
        overlay: hidden;
        flex-wrap: wrap;
        justify-content: center;
    }


    /* Flex Item Styles */
    .flex_item1, .flex_item2, .flex_item3, .flex_item4 {
        margin: 5px;
        flex: 1;
        max-width: 50%;
        border-radius: 10%;
    }

    /* flex_item1 spezifische Styles */
    .flex_item1 {
        background-color: #E69E67;
    }

    .card-title-item1 {
        color: #4e1404;
        text-align: center;
    }

    .btn-item1 {
        color: #4d4d4d!important;
        background-color: #859c81 !important;
        border: none;
        outline: none;
        padding: 2%;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .btn-item1:hover {
        background-color: #4d4d4d !important;
        color: #859c81 !important;
    }

    /* flex_item2 spezifische Styles */
    .flex_item2 {
        background-color: #B3B4B2;
    }

    .card-title-item2 {
        color: #542515;
        text-align: center;
    }

    .btn-item2 {
        color: #1c1718 !important;
        background-color: #eace46 !important;
        border: none;
        outline: none;
        padding: 2%;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .btn-item2:hover {
        background-color: #1c1718 !important;
        color: #eace46 !important;
    }

    /* flex_item3 spezifische Styles */
    .flex_item3 {
        background-color: #1A1D23;
    }

    .card-title-item3 {
        color: #f5a300;
        text-align: center;
    }

    .btn-item3 {
        color: #013665 !important;
        background-color: #eace46 !important;
        border: none;
        outline: none;
        padding: 2%;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .btn-item3:hover {
        background-color: #013665 !important;
        color: #eace46 !important;
    }

    /* flex_item4 spezifische Styles */
    .flex_item4 {
        background-color: #D8DCE5;
        align-items: center;
        justify-content: center;
    }

    .card-title-item4 {
        color: #343434;
        text-align: center;
    }

    .btn-item4 {
        color: #8a97a7 !important;
        background-color: #1c0f13 !important;
        border: none;
        outline: none;
        padding: 2%;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .btn-item4:hover {
        background-color: #8a97a7 !important;
        color: #1c0f13 !important;
    }


    .container_center {
        text-align: center;
    }

    .space_margin_top {
        margin-top: 3%;
    }
    

    text {
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 1); /* Dunkler Schatten hinter dem Text */
    }


    




}

@media (max-width: 799px) {
/*
    .navbar-nav {
        color: #f9f9f9;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-family: var(--text-style);
        max-width: 100%;           /* Bild wird nicht breiter als der Container */
      /*  max-height: 100vh;        /* Bild wird nicht höher als der Container */
    /*    width: auto;               /* Behalte die Proportionen bei */
    /*    height: auto;              /* Behalte die Proportionen bei */
    /*} */

    .img {
        width: 2% !important;
        height: 20% !important;
    }

    nav {
        position: fixed;
        top: 0;
        left: 0;
        padding: 15px;
        border: 2 2 25px 0;
        
    }

    nav ul{
        display: none;
        flex-direction: column;
    }

    .navbar {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(10px) !important;
    }


   .navbar ul{
        
        max-width: 100%; 
        margin-right: 5%;
        width: auto;               /* Behalte die Proportionen bei */
        height: auto;              /* Behalte die Proportionen bei */
    }

    .navbar.fixed-top {
        padding: 5px 10px; /* Weniger Padding für kleine Bildschirme */
    }


    .big_devices {
        display: none;
    }

    .flex_container {
        flex-direction: column; /* Stapelt die Karten untereinander */
    }

    .flex_item1, .flex_item2, .flex_item3, .flex_item4 {
        max-width: 100%; /* Jede Karte nimmt die volle Breite ein */
    }

    .card-body {
        padding: 10px; /* Weniger Innenabstand auf kleinen Bildschirmen */
    }


    .offcanvas {
        width: 100vw  !important;           /* Bild wird nicht breiter als der Container */
        max-height: 100vh !important;         /* Bild wird nicht höher als der Container */
        backdrop-filter: blur(30px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: transparent !important;
    }
    
    .offcanvas-body li {
       margin-top: 5vh;
    
    }
    
    .offcanvas-body h1 {
        font-weight: 800;
        font-family: var(--text-style);
    
    }
    
    .online {
        color: black !important;
    }
    

    .offcanvas-body ul.navbar-nav {
        list-style: none;
        padding-left: 0;
        color: #f9f9f9;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-family: var(--text-style); /* Deine Schriftart */
        list-style-type: none;
    }

    .offcanvas-body ul.navbar-nav li {
        margin-top: 5vh;
        text-align: center;
    }

    .offcanvas-body ul.navbar-nav li a {
        text-decoration: none;
        font-size: 18px;
        color: #f9f9f9; /* Farbe der Links */
    }

    /* Online/Offline Links */
    .online {
        color: black !important;
        text-shadow: black;
    }
    
    .offline {
        color: white !important;
    }
    

    /* Small image container */
    .small_image-container {
        width: 100vw;
        height: 100vh;
    }

    .top_space {
        margin-top: 20%;
    }

    .flex_item1
    .flex_item2
    .flex_item3
    .flex_item4 {
        margin-top: 5% !important;
        size: 50% !important;
    }

    .shadow_box {
        width: 80%;
        margin: 0 auto;
        max-width: 1200px;
        box-shadow: black !important;
        border: black !important;
    }


    .card1{
    
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: #E69E67 !important; 
        border: transparent !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-align: center !important;
        box-shadow: black !important;
       
    }

    
    .card2{
    
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: #B3B4B2 !important; 
        border: transparent !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-align: center !important;
        box-shadow: black !important;
       
    }

    .card3{
    
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: #1A1D23 !important; 
        border: transparent !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-align: center !important;
        box-shadow: black !important;
       
    }

    .card4{
    
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: #D8DCE5 !important; 
        border: transparent !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-align: center !important;
        box-shadow: black !important;
       
    }

    h1 {
        margin-top: 2% !important;
    }

    text {
        color: white;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 1); /* Dunkler Schatten hinter dem Text */
        margin-bottom: 5%;
        text-align: left;
    }

    .center-mobile {
        text-align: center;
    }


    .social-media {
        margin-bottom: 1%;
    }


    .container_adress {
        margin-bottom: 10px; /* Weniger Abstand unter der Karte für mobile Geräte */
    }
    
    .contact {
        font-size: 0.9em; /* Kleinere Schriftgröße auf mobilen Geräten */
    }

    .container_contact {
        flex-direction: column;
        text-align: center;
        margin-right: 20%;
    }

    .container_title {
        text-align: center;
    }



}