/*----------------------------------------------------------------------------------*/
/* #region BODY */
        body {
            margin: 0;
            font-family: 'Open Sans Light', sans-serif;
        }
/* #endregion BODY */

/*----------------------------------------------------------------------------------*/
/* #region Kopfzeile */
    .header-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        background-color: rgba(60, 2, 83, 1); /* Beispielhintergrundfarbe */
        color: white;
        top: 0; /* Setzt die Kopfzeile an den oberen Bildschirmrand */
        left: 50%; /* Stellt sicher, dass die Kopfzeile am linken Rand beginnt */
        right: 50%;
        width: 1600px;
        min-height:40px;
        max-width: 100%;
        margin: 0;
        position: fixed; /* Fixiert die Kopfzeile am oberen Bildschirmrand */
        z-index: 1000; /* Stellt sicher, dass die Kopfzeile über anderen Inhalten liegt */
        transform: translateX(-50%); /* Korrigiert die horizontale Zentrierung */

        box-sizing: border-box;
    }
    /* Burger-Menü Stile */
    .burger-menu-button {
        display: none;
        font-size: 14px;
        cursor: pointer;
        padding: 10px;
        background-color: rgba(60, 2, 83, 1);
        color: white;

        z-index: 1001; /* Erhöht den z-index */
        position: fixed; /* Stellt sicher, dass der Button fixiert ist */

        top: 50%;
        right: env(safe-area-inset-right); /* Nutzt den sicheren Bereich auf Geräten mit Kerbe oder abgerundeten Ecken */
    }

    .burger-menu-content {
        display: none;
        font-size: 14px;
        cursor: pointer;
        padding: 10px;
        background-color: rgba(60, 2, 83, 0.9);
        color: white;

        z-index: 1001; /* Erhöht den z-index */
        position: fixed;

        top: 40px;
        right: env(safe-area-inset-right);

        width: 120px;
        height: 700%;
    }

    .burger-menu-content a {
        color: white;
        padding: 10px;
        display: block;
        text-decoration: none;
    }

    .burger-menu-content a:hover {
        background-color: rgba(168, 6, 233, 0.7);
    }

    @media (max-width: 3000px) {
        .burger-menu-button {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 100;
        }
    }
/* #endregion Kopfzeile */

/*----------------------------------------------------------------------------------*/        
/* #region Anpassungen für den Slider, um ihn nach unten zu verschieben*/
    .header {
            margin-top: 40px; /* Stellen Sie den Wert so ein, dass er zur Höhe Ihrer Kopfzeile passt */
        }
/* #endregion */

/*----------------------------------------------------------------------------------*/
/* #region Swiper Organisation*/

    .swiper-container {
        width: 100%; /* Breite des Karussells */
        height: auto; /* Höhe des Karussells, auto für responsive Höhe */
        min-width: 100px; /* Minimale Höhe des Headers */
        max-width: 1600px; /* Maximale Breite des Headers */
        min-height: 10px; /* Minimale Höhe des Headers */
        max-height: 800px;
        margin: auto; /* Zentriert den Header */
        position: relative; /* Für die absolute Positionierung der Textelemente */
        overflow: hidden; /* Verhindert das Anzeigen von außerhalb des Headers */
        transform: translateZ(0);
    }

    .swiper-slide {
        text-align: center; /* Zentriert den Inhalt horizontal */
        font-size: 0px;
        height: 100%;
        background: #2a002d; /* Hintergrundfarbe, falls benötigt */
        min-height: 50px; /* Minimale Höhe des Headers */
        /* Flexbox für die vertikale Ausrichtung */
        display: flex;
        justify-content: center;
        align-items: center;
        min-width:100px;
        max-height: 800px;
    }
    .swiper-wrapper 
    {
        width: auto; /* Breite des Bildes */
        height: auto; /* Höhe des Bildes, auto für beibehalten der Proportionen */


    }
    .swiper-slide img {
        width: 100%; /* Breite des Bildes */
        height: auto; /* Höhe des Bildes, auto für beibehalten der Proportionen */
        object-fit: cover; /* Stellt sicher, dass das Bild den Slide-Bereich ausfüllt */
        min-height:50px;
        max-height:800px;
        min-width:100px;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none; /* Versteckt die Standard-Pfeile */
    }

    .swiper-button-next::after, .swiper-button-prev::after {
        color:#ffffff; /* Ersetzen Sie #IhreFarbe mit dem gewünschten Farbcode */
        font-size: 20px!important; /* Größe des Pfeilzeichens */
        /* Weitere Stile nach Bedarf, wie Positionierung, etc. */
    }


/* #endregion Swiper Organisation*/

/*----------------------------------------------------------------------------------*/
/* #region Grid-Container */

    .grid-container {
        display: grid;
        grid-template-columns: 1fr; /* Standard: Eine Kachel pro Reihe */
        gap: 0;
        padding: 0;
        max-width: 1600px;
        min-width: 200px;
        margin: auto;
        transition: transform 0.5s ease-in-out;
    }
    @media (min-width: 400px) {
        .grid-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (min-width: 800px) {
        .grid-container {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media (max-width: 600px) {
        .grid-item .item-video {
            display: block; /* Zeigt das Video auf Mobilgeräten an */
        }
    }
/* #endregion*/    

/*----------------------------------------------------------------------------------*/
/* #region Grid-items*/

    .grid-item {
        position: relative;
        height: 0;
        padding-bottom: 100%; /* Erzeugt ein Quadrat */
        justify-content: center; /* Zentriert den Inhalt horizontal */
        align-items: center; /* Zentriert den Inhalt vertikal */
        text-align: center; /* Stellt sicher, dass der Text zentriert ist, falls er mehrere Zeilen umfasst */
        overflow: hidden; /* Verhindert, dass Inhalte außerhalb der Grenzen sichtbar sind */
        background-size: cover;
        background-position: center;
        cursor: pointer;
        transition: transform 0.5s; /* Entfernen oder anpassen nach Bedarf */
    }
    .item-video {
        width: 100%; /* Stellt die Breite des Videos auf die volle Breite des Elternelements ein */
        height: 100%; /* Optional: Stellt die Höhe des Videos auf die volle Höhe des Elternelements ein */
        max-width:100%; /* Passt die Breite des Videos an die Grid-Element-Breite an */
        object-fit: cover; /* Stellt sicher, dass das Video den Bereich vollständig ausfüllt */
        display: none; /* Versteckt das Video zunächst */
        position:absolute;
        top: 0;
        left: 0;
    }
    .grid-item .item-video {
        display: none; /* Versteckt das Video zunächst */
        /* ... andere Stile ... */
        max-width:100%; /* Passt die Breite des Videos an die Grid-Element-Breite an */
        object-fit: cover; /* Stellt sicher, dass das Video den Bereich vollständig ausfüllt */
        position:absolute;
    }
    .item-text {
        font-family: 'Open Sans', sans-serif;
        position: absolute;
        bottom: 10px; /* Startposition am unteren Rand der Kachel */
        left: 0;
        right: 0;
        color:rgb(255, 255, 255);
        font-size: 1em; /* Startgröße des Textes */
        text-align: center;
        transition: all 0.5s ease; /* Animationseffekt */
        z-index: 2;
    }
    .item-background {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0; /* Startet unsichtbar */
        background-color: rgba(60, 2, 83, 0.7); /* Hintergrundfarbe */
        transition: height 0.5s ease; /* Animationseffekt */
        z-index: 1;
    }
    .meta-info {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .meta-en, .meta-de {
        font-size: 0.8em; /* Kleinere Schriftgröße für Meta-Informationen */
        margin-top: 5px; /* Abstand zwischen den Sprachversionen */
    }

    .meta-de {
        font-style: italic; /* Optional: Deutsche Meta-Informationen kursiv darstellen */
    }
    .grid-item:hover .background-image {
        display: none; /* Versteckt das Vorschaubild */
    }
    .grid-item:hover .item-video {
        display: block; /* Zeigt das Video an */
    }
    .grid-item:hover .item-text{
        bottom: 5%; /* Hebt den Text an */
        font-size: 1.5em; /* Macht den Text größer */
    }
    .grid-item:hover .item-background {
        transform: translateY(0); /* Verschiebt den Text nach oben, um ihn sichtbar zu machen */
        height: 20%; /* Hintergrund füllt die gesamte Höhe der Kachel */
        background-color: rgba(84, 1, 84, 0.7); /* Hintergrundfarbe beim Hover */
    }

/*#endregion Grid-items*/

/*----------------------------------------------------------------------------------*/
/* #region FarbKacheln*/

    .clearpanel-container {
        display: grid; /* Verwendet das Grid-Layout */
        place-items: center; /* Zentriert den Inhalt sowohl horizontal als auch vertikal */
        width: 100%; /* Setzt die Breite des Containers auf die volle Breite des Grid-Elements */
        height: 100%; /* Setzt die Höhe des Containers auf die volle Höhe des Grid-Elements */
    }

    .clearpanel-text {
        font-family: 'Open Sans', sans-serif;
        position: absolute;
        top: 50%; /* Vertikal in der Mitte der Kachel positionieren */
        left: 50%; /* Horizontal in der Mitte der Kachel positionieren */
        transform: translate(-50%, -50%); /* Zentriert den Container sowohl horizontal als auch vertikal */
        color: rgb(255, 255, 255);
        font-size: 1em; /* Startgröße des Textes */
        line-height:200%;
        padding: 5px; /* Kleines Padding um den Text */
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0); /* Hintergrundfarbe mit Transparenz */
        width: 50%; /* Breite auf 50% der Kachel einstellen */
        text-align: center; /* Setzt den Text linksbündig innerhalb des Containers */
    }
/* #endregion Farbkacheln*/

/*----------------------------------------------------------------------------------*/
/* #region Header Organisation*/
    /* Rest Ihres CSS für Grid-Container, Grid-Items, etc. */
    .left-arrow {
        left: 10px;
    }

    .right-arrow {
        right: 10px;
    }
    .header-texts {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10; /* Stellt sicher, dass der Text über den Slides liegt */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Verteilt die oberen und unteren Texte gleichmäßig */
        pointer-events: none;
    }

/* #endregion Header Organisation*/        

/*----------------------------------------------------------------------------------*/
/* #region Header Infotext*/
    .header-text {
        margin: 0 10px;
    }
    .header-infotext{
        font-family: 'Open Sans', sans-serif;
        color:#ffffff; /* Ersetzen Sie #IhreFarbe mit dem gewünschten Farbcode */
        position: absolute;
        padding: 10px; /* Kleines Padding um den Text */
        top: 20%;
        left: 10%;
        width: 300px;
        height: auto;
        z-index: 10; /* Stellt sicher, dass der Text über den Slides liegt */
        background-color: rgba(84, 1, 84, 0.864); /* Hintergrundfarbe beim Hover */
        display: flex;
        flex-direction: column;
        justify-content:space-evenly; /* Verteilt die oberen und unteren Texte gleichmäßig */
        pointer-events: none;
    }

    .header-infotext::first-line {
        font-family: 'Open Sans Bold', sans-serif;
        font-size: 1.2em; /* Größere Schrift für die erste Zeile */

    }

    .header-infotext-title {
        font-family: 'Open Sans Bold', sans-serif;
        font-size: 1.2em; /* Größere Schrift für den Titel */
        /* Weitere Stile nach Bedarf */
    }

    .header-infotext-content {
        font-family: 'Open Sans Light', sans-serif;
        font-size: 1em; /* Standard Schriftgröße für den restlichen Text */
        text-align: left;    /* Weitere Stile nach Bedarf */
    }
/* #endregion Header Infotext*/

/*----------------------------------------------------------------------------------*/
/* #region FOOTER*/
    .site-footer {
        background-color: rgba(60, 2, 83, 1); /* Dunkler Hintergrund */
        color: #fff; /* Weiße Schrift */
        padding: 20px;
        font-family: 'Open Sans', sans-serif;
    }

    .footer-grid {
        display: grid;
        margin: auto;
        grid-template-columns: 1fr; /* Standard: Eine Kachel pro Reihe */
        gap: 0;
        padding: 0;
        max-width: 1600px;
        min-width: 200px;
        margin: auto;
        transition: transform 0.5s ease-in-out;
        text-align: left; /* Sorgt für linksbündige Ausrichtung */
    }

    .footer-grid div {
    display: flex;
    flex-direction: column;
    }

    .footer-menu a, .social-media a, .footer-links a {
    color: #fff; /* Weiße Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    margin-bottom: 10px; /* Abstand zwischen den Links */
    }

    .footer-menu a:hover, .social-media a:hover, .footer-links a:hover {
    text-decoration: underline; /* Unterstreichung beim Hover */
    }

    @media (min-width: 400px) {
        .footer-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (min-width: 800px) {
        .footer-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    

/* #endregion FOOTER*/