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

}

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

.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: 100px; /* Passe die maximale Breite des Logos an */
    height: auto;     /* Behalte das Seitenverhältnis des Logos bei */
    fill:white
    
}

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

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

.rowU {
    display: flex;
    justify-content: space-between;
    margin: 20px;
}

.column {
    flex: 1;
    padding: 20px;
    margin: 10px;

}

select {
    border-radius: 9px !important;
    height:9px; /* Höhe der Select-Box */
}

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

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

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


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

.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;
    margin-right: 5%;
    margin-left: 5%;
    text-align: center;
}

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

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

.kontakt_formular{
    margin-left: 15%;
    margin-right: 15%;
}

.kontakt_formular2{
    margin-left: 1%;
    margin-right: 1%;
}

.contact-form h2 {
    align-items: center;
}


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

.schnellkontakt_h1 {
    color: white;
    font-family: var(--text-style);
    font-size: 300%;
    text-align: center;

}

.schnellkontakt_h3 {
    color: white;
    font-family: var(--text-style);
    text-align: center;
}



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

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

.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(30px) !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;

}

.schnellkontakt {
    margin: 5%;  
}

.accordion-button {
    width: 100%;
    padding: 15px;
    border: none;
    background:  linear-gradient(to right, white, #84A2c6);  /* Weiß mit 30% Deckkraft */
    color: #333;
    font-size: 18px;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: background 0.3s ease;
    backdrop-filter: blur(5px); /* Optional: Blur-Effekt für den Button */
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Stil für den Button im Hover-Zustand */
.accordion-button:hover {
    background: rgba(255, 255, 255, 0.5); /* Weiß mit 50% Deckkraft beim Hover */
}

/* Stil für den Button im aktiven Zustand */
.accordion-button:active {
    background: rgba(255, 255, 255, 0.4); /* Weiß mit 40% Deckkraft, wenn der Button gedrückt wird */
}

/* Stil für den Accordion-Body */
.accordion-body {
    position: relative; /* Ermöglicht das Positionieren des Formulars relativ zum Container */
    padding: 0; /* Entfernt zusätzliches Padding */
    box-sizing: border-box;
}


/* Stil für das Bild im Accordion */
.accordion-img {
    max-width: 100%;
    height: auto; /* Bewahrt das Seitenverhältnis des Bildes */
    display: block; /* Entfernt eventuelle Abstände unter dem Bild */
    position: absolute; /* Macht das Bild absolut positionierbar */
    margin: 0 auto;
    top: 0;
    left: 0;
    z-index: 1; /* Stellt sicher, dass das Bild hinter dem Formular liegt */
    overflow: hidden;
}

.accordion-img2 {
    max-width: 100%;
    height: auto; /* Bewahrt das Seitenverhältnis des Bildes */
    display: block; /* Entfernt eventuelle Abstände unter dem Bild */
    position: absolute; /* Macht das Bild absolut positionierbar */
    margin: 0 auto;
    top: 0;
    left: 0;
    z-index: 1; /* Stellt sicher, dass das Bild hinter dem Formular liegt */
    overflow: hidden;
}



/* Stil für das Kontaktformular ohne Formularelemente */
.contact-form {
    position:relative; /* Positioniert das Formular relativ zum Accordion-Body */
    padding: 5%;
    background: rgba(255, 255, 255, 0.05); /* Weiß mit 80% Deckkraft für das Formular */
    backdrop-filter: blur(10px); /* Blur-Effekt für das Formular */
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 50px;
    z-index: 2; /* Stellt sicher, dass das Formular über dem Bild liegt */
    margin-top: 2%;
}


select {
    background-color: transparent;
    color: white;
    height: 63%;
    

}

select option {
    background-color: black;
}

/* Stil für den Titel des Kontaktformulars */
.contact-form h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 24px;
    color: #333;
}

.col {
    margin: 3%;
}

textarea {
    background: transparent;
    transition: all 1s ease;
}

::placeholder {
    color: white;
    opacity: 0.4;
    font-style: italic;
}




/* Stil für die Eingabegruppen */
.input-group {
    margin-bottom: 15px;
}

/* Stil für Labels */
.input-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: white;
}

/* Stil für Eingabefelder */
.input-group input,

.input-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
    color: white;
}

/* Fokus-Effekt für Eingabefelder */
.input-group input:focus,
.input-group textarea:focus {
    border-color: red;
}

input[type="text"] {
    color: #fff !important;
    border-radius: 9px;
    background: transparent;
    transition: all 1s ease;
    outline: none;
    
}



input[type="text"]:focus {
    border-color: red;
}

.h3 {
    color: white !important;

}

/* Stil für den Senden-Button */
button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: linear-gradient(to right, rgba(54, 53, 53, 0.308), rgb(0, 0, 0));
    color: white;
    font-size: 16px;
    border-color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover-Effekt für den Senden-Button */
button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Maximierte Höhe für Accordion, wenn es geöffnet ist */
.accordion-wrapper.open .accordion-content {
    max-height: 1000px; /* Höhe anpassen, je nach Inhalt */
}

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

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

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

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


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


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


button {
   font-weight: 800;
}

html {
    height: 100%;
}


 footer {
    margin-top: 23%;
}

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


@media (max-width: 1024px) {

    
    .accordion-img-SD {
        z-index:1;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        background-position: center;
        height: 100%;
        width: 100%;
        display: block;

    }

    .accordion-img {
        max-width: 100%;
        height: auto; /* Bewahrt das Seitenverhältnis des Bildes */
        display: block; /* Entfernt eventuelle Abstände unter dem Bild */
        position: absolute; /* Macht das Bild absolut positionierbar */
        margin: 0 auto;
        top: 0;
        left: 0;
        z-index: 1; /* Stellt sicher, dass das Bild hinter dem Formular liegt */
        
    }


    .schnellkontakt_h1_SD {
        text-align: center;
    }

    .space {
        margin-top: 5%;
    }

    .border {
        margin-left: 1%;
        margin-right: 1%;
        border-radius: 5%;
        margin-bottom: 2%;
        
    }

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

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

    .big_devices {
        display: none;
    }

    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(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        position: relative;
        z-index: 100;
    }


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


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

    .small_devices {
        display: none;
    }



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

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


}