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


.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;
    }

}


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

.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 */
}

.container_small_devices {
    width: 100%;
    max-width: auto;
    margin: 0 auto;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 2%;
}

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

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

.font:hover {
    color: black !important;
}


header {
    padding: 100px 25;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.container {
    font-family: var(--text-style);
    color: black !important;
}


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

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

.body_agb_datenschutz_impressum {
    background: linear-gradient(to right, #84A2c6, #232E42);
}


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


.header_text {
    width: 850px;
    font-weight: 700;
}


body {
    background-color: #f9f9f9;
}

.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
    
}

.container_agb {
    margin-top: -13%;
}

.background_picture {
    max-width: 100%;           /* Bild wird nicht breiter als der Container */
    height:  100%;  /* Behalte die Proportionen bei */    
    margin-top: -20%;   
}

.image-container{
    display: flex;              /* Flexbox verwenden */
    justify-content: center;   /* Horizontal zentrieren */
    align-items: center;       /* Vertikal zentrieren */
    width: auto;               /* Volle Breite des Bildschirms */
    height: 100vh;              /* Volle Höhe des Bildschirms */
    overflow: hidden;          /* Verhindert, dass das Bild über den Container hinausgeht */
    margin-top: 5%;
    margin-left: 0%;
    margin-right: 0%;
}

.text-container{
    backdrop-filter: blur(100vw);
    -webkit-backdrop-filter: blur(10px); /* Unterstützung für ältere Webkit-Browser */
    border-radius: 15px; /* Abgerundete Ecken für ein moderneres Aussehen */
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
    color: white;
    text-align: center;
    margin-left: 15%;
    margin-right: 15%;
}

.text-container h2{
    margin-top: 5%;
}

.text-container h3{
    margin-top: 3%;
}


.text-container h1 {
    color: var(--primary-text-color);
}

.text-container text {
   font-weight: 100%;
   justify-content: center;
   align-items: center;
}

.text_area{
   display: inline-block;
   word-wrap: break-word;
   word-break: break-word;
   max-width: 100%;
   margin-right: 15%;
   margin-left: 15%;


}

.text-right {
    display: inline-block;
    text-align: left;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); /* Dunkler Schatten hinter dem Text */
}

.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;
}



.allgemeine_überschriftseinstellung {
    justify-content: center;   /* Horizontal zentrieren */
    align-items: center;       /* Vertikal zentrieren */
    font-family: var(--text-style);
    color: white;;
    max-width: 100%;   
    max-height: 100vh;    
    width: auto;               /* Behalte die Proportionen bei */
    height: auto;              /* Behalte die Proportionen bei */
    padding: 5%;
    hyphens: auto;
    word-wrap: break-word;
    margin-top: -10%;

}


.navbar-nav {
    background-color: transparent;
    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 */
}

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




.small_devices .social-media .img {
  
    width: 2% !important;
    height: 20% !important;
}



.video_container {
    z-index: -1;
    position: absolute;
    width: 100vw;
}

@media (max-width: 1024px) {

    .navbar ul {
        list-style: none !important;
        max-width: 100%;
        width: auto;
        height: auto;
    }

    .small_background_picture {
        max-width: 100vw;           /* 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 */
        z-index: -1;
        
    }

    .small_image-container{
        margin-top: 30%;
        display: flex;              /* Flexbox verwenden */
        justify-content: center;   /* Horizontal zentrieren */
        align-items: center;       /* Vertikal zentrieren */
        width: 100vw;               /* Volle Breite des Bildschirms */
        height: auto;              /* Volle Höhe des Bildschirms */
        overflow: hidden;          /* Verhindert, dass das Bild über den Container hinausgeht */
        width: auto;               /* Behalte die Proportionen bei */
        z-index: -1;
    }

    .big_devices {
        display: none;
        font-style: var(--text-style) !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(10px);
    -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 */
    }



    .social-media {
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        position: relative;
        z-index: 100;
    }



    .video_container {
        z-index: -1;
        position: absolute;
        width: 100vw;
    }

    .allgemeine_überschriftseinstellungSD {
        justify-content: center;   /* Horizontal zentrieren */
        align-items: center;       /* Vertikal zentrieren */
        font-family: var(--text-style);
        color: white;;
        max-width: 100%;   
        max-height: 100vh;    
        width: auto;               /* Behalte die Proportionen bei */
        height: auto;              /* Behalte die Proportionen bei */
        padding: 5%;
        hyphens: auto;
        word-wrap: break-word;
        margin-top: 10%;
        z-index: 100;
    
    }

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

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

    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;
    }


}