.iconContainer img#components-reconnect-modal{
    display: none !important;
}

/* Stil für den Button mit Hintergrundfarbe lightgreen */
.green-button {
    background-color: lightgreen;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 10px 20px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    /* Optional: Hinzufügen von Hover-Effekten für eine verbesserte Benutzerinteraktion */
    .green-button:hover {
        background-color: darkgreen; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }

/* Stil für den Button mit Hintergrundfarbe lightcoral */
.coral-button {
    background-color: lightcoral;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 10px 20px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    .coral-button:hover {
        background-color: darkred; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }

.green-button-small {
    background-color: lightgreen;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 10px 20px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    /* Optional: Hinzufügen von Hover-Effekten für eine verbesserte Benutzerinteraktion */
    .green-button-small:hover {
        background-color: darkgreen; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }

/* Stil für den Button mit Hintergrundfarbe lightcoral */
.coral-button-small {
    background-color: lightcoral;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 5px 10px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    .coral-button-small:hover {
        background-color: darkred; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }


.yellow-button-small {
    background-color: yellow;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 5px 10px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    .yellow-button-small:hover {
        background-color: darkred; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }

.yellow-button {
    background-color: yellow;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 10px 20px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    .yellow-button:hover {
        background-color: darkred; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }

.grey-button {
    background-color: lightgray;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 10px 20px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    .grey-button:hover {
        background-color: grey; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }

.grey-button-small {
    background-color: lightgray;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 5px 10px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    .grey-button-small:hover {
        background-color: grey; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }


.violet-button {
    background-color: blueviolet;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 10px 20px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    .violet-button:hover {
        background-color: darkviolet; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }

.violet-button-small {
    background-color: blueviolet;
    color: white; /* Textfarbe anpassen, um gut sichtbar zu sein */
    padding: 5px 10px; /* Anpassen der Polsterung nach Bedarf */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px; /* Anpassen der Schriftgröße nach Bedarf */
    color: black;
}

    .violet-button-small:hover {
        background-color: darkviolet; /* Ändere die Hintergrundfarbe im Hover-Zustand */
        color: white !important;
    }


h1 {
    color: white;
}

/* Stile für die Datumsauswahl */
.date-picker {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .date-picker label {
        margin-right: 10px;
    }

    .date-picker input[type="date"] {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

/* Stile für die Produktliste */
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    /* Stile für die Produktinformationen */
    li span {
        font-weight: bold;
        color: #007bff;
    }

    /* Hover-Effekt für die Produktliste */
    li:hover {
        /*background-color: dimgrey;*/
        /*cursor: pointer;*/
    }

/* Media Query für mobile Ansicht */
@media screen and (max-width: 770px) {
    .date-picker {
        flex-direction: column;
    }

        .date-picker label {
            margin-bottom: 5px;
        }
}

.banner {
    display: none;
    background-color: green;
    color: white;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin-top: 80vh;
}

.bannerError {
    display: none;
    background-color: red;
    color: white;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin-top: 80vh;
}

.show {
    display: block;
}

.close-btn {
    color: white;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 10px;
}

/* Allgemeine Stile für das gesamte Dokument */
html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
}

.maincontent {
    z-index: 10;
    height: calc(var(--vh, 1vh) * 100 - 125px); /* Dynamisch berechnete Höhe */
    width: 100%;
    position: absolute;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 125px;
}


@media (min-width: 770px) { /* Desktop */
    .maincontent {
        height: calc(100vh - 125px);
    }
}


@media (min-width: 980px) {
    .burger-menue {
        display: none;
    }
}

@media (max-width: 980px) {
    .burger-menue {
        margin-left: auto;
    }
}


/* Hintergrundbereich mit Bild und schwarzem Overlay */
.HPage-background {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-image: url('https://eventify-verleih.de/IMG_1452_small.jpeg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.HPage-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.80);
    z-index: 1;
}

@media (max-width: 980px) 
{
    .HPage-overlay {
        height: 100%;
    }
}

    /* Logo in der Mitte des Bildschirms */
.HPage-logo-container {
    /*position: absolute;*/
    top: 30%;
    left: 50%;
    transform: scale(0.7);
    z-index: 2;
    text-align: -webkit-center;
}

    .HPage-logo {
        min-width: 150px;
        /*width: 60vw;*/
        height: auto;
        max-width: 250px;
    }

@media (min-width: 980px) {
    .landing-logo-margin {
        margin-top: 150px !important;
    }
}

.HPage-logo-Big {
    min-width: 150px;
    width: 60vw;
    height: auto;
    max-width: 400px;
}

    /* Allgemeine Stile */
    .HPage-header {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 3;
        align-items: center;
    }

.HPage-minirow {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    height: 35px;
    background: linear-gradient(to right, #3ea0e6, #f047ff);
    display: flex;
    align-items: center;
}

    .email-minirow {
        margin-left: 30px;
    }

        .email-minirow a {
            text-decoration: none;
            color: white;
            font-size: 12px;
        }

@media (max-width: 980px) {
    .onlydesktop-minirow {
        display: none;
    }
}

.onlydesktop-minirow {
    margin-right: 30px;
}

    .onlydesktop-minirow a {
        text-decoration: none;
        color: white;
        font-size: 12px;
    }

    .location-minirow {
        margin-left: 20px;
    }

        .location-minirow a {
            text-decoration: none;
            color: white;
            font-size: 12px;
            /*margin-left: 20px;*/
        }

.HPage-nav {
    display: flex;
    justify-content: space-between;
    /*backdrop-filter: blur(5px);*/
    /*-webkit-backdrop-filter: blur(5px);*/ /* Webkit-specific */
    color: white;
    margin-top: 1%;
    position: fixed;
    width: 100%;
    height: 10%;
    height: 100px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 5px;
}

@media (max-width: 980px) {
    .HPage-nav {
        margin-top: 6%;
        /*backdrop-filter: blur(5px);*/
        /*-webkit-backdrop-filter: blur(5px);*/ /* Webkit-specific */
    }
}

.HPage-company-name {
    /*font-weight: bold;*/
    margin-top: auto;
    font-size: 23px;
    width: 70%;
    height: auto;
    margin-top: 20px;
}

    .HPage-menu {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        align-items: end;
        border: none;
        margin-left: auto;
        margin-right: 4%;
    }

        .HPage-menu li {
            margin-right: 20px;
            border-left: none;
            border-right: none;
            border-top: none;
        }

            .HPage-menu li a {
                text-decoration: none;
                padding: 10px;
                color: white;
                cursor: pointer;
            }

    /* Mobile Anpassungen */
    @media (max-width: 980px) {
        /* Initial hide the navigation menu */
        #nav-menu {
            display: none;
        }

        /* Display burger menu icon on mobile */
        #burger-menu {
            display: block;
            background: transparent;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 24px;
        }

        /* Styling for the navigation menu on mobile */
        #nav-menu.active {
            display: block;
            flex-direction: column;
            position: absolute;
            top: 50px; /* Adjust as needed */
            right: 20px; /* Adjust as needed */
            background-color: rgba(0, 0, 0, 0.8);
            padding: 10px;
            border-radius: 5px;
            width: 120px;
            font-weight: 200;
        }

        /* Styling for menu items */
        .HPage-menu li {
            margin-right: 0;
            margin-bottom: 10px;
        }
    }

    /* Hide burger menu icon on larger screens */
    @media (min-width: 980px) {
        #burger-menu {
            display: none;
        }
    }

    /* Standardstile */
    #nav-toggle {
        display: none; /* Ausblenden des Burger-Icons */
        background-color: transparent;
        color: white;
        height: 50px;
        width: 50px;
        border-color: white;
    }

    /* Mobile-Ansicht: Burger-Icon sichtbar und Menü versteckt */
    @media (max-width: 980px) {
        #nav-toggle {
            display: block; /* Burger-Icon anzeigen */
        }

        #nav-menu {
            display: none; /* Menü verstecken */
        }

            #nav-menu.active {
                display: block; /* Menü anzeigen, wenn aktiv */
            }
    }




    .articlelist {
    }

        .articlelist :hover {
            background-color: black !important;
        }

.menutext {
    color: white !important;
    font-weight: 200;
}

.iconContainer {
    top: 60%;
    /*position: absolute;*/
    z-index: 3;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 200px;
}

.iconContainerForSpace {
    display: none;
}

    @media (max-width: 750px) {
        .iconContainer {
            flex-direction: column; /* Bilder untereinander anordnen */
            top: 20%;
            height: auto;
            margin-top: 0px;
        }

        .iconContainerForSpace {
            display: block;
            height: 100px;
        }

            .iconContainer img {
                margin-top: 30px;
            }

        .HPage-logo-container {
            top: 15%;
        }

        .textContainer:last-of-type {
            margin-bottom: 30px;
        }

        .textContainer {
            margin-bottom: 50px;
        }
    }

    .textContainer {
        text-align: center;
    }

    .iconContainer img {
        /*width: 130px;*/
        height: 142px;
        cursor: pointer;
        object-fit: cover;
    }

        .iconContainer img :hover 
        {
            transform: scale(1.1);
        }

    .iconContainer h5 {
        margin-top: 8px;
        cursor: pointer;
    }

.iconImages :hover {
    transform: scale(1.1);
}

.MessegeKontakt{
    margin-left: 1.5%;
}

.TextWithSpacing {
    line-height: 25px;
}

.artikelWrapper {
    width: 90%;
    margin-left: 5%;
}

.articelImgSize {
    height: 80px;
    width: 80px;
    object-fit: cover;
}

@media (max-width: 619px) 
{
    .artikelCachel{
        display: flex !important;
    }

    .imgcontainer {
        min-width: 128px;
    }

    .hideArtikelSearchElements {
        display: none !important;
    }

    .breakElement {
        white-space: break-spaces !important;
    }

    .showArtikelSearchElements {
        display: block !important;
    }

    .paddingleft075 {
        padding-left: 0.75em !important;
    }

    .autowith {
        width: auto !important;
    }
}

@media (min-width: 620px) 
{
    .showArtikelSearchElements {
        display: none !important;
    }
}

.bottom-content {
    margin-top: auto; /* Pushes this div to the bottom */
}



@media (max-width: 619px) 
{
    .meineartikeldiv {
        margin-top: 50px !important;
    }
}

    .ql-size-10px {
        font-size: 10px;
    }

    .ql-size-12px {
        font-size: 12px;
    }

    .ql-size-13px {
        font-size: 13px;
    }

    .ql-size-14px {
        font-size: 14px;
    }

    .ql-size-16px {
        font-size: 16px;
    }

    .ql-size-18px {
        font-size: 18px;
    }

    .ql-size-20px {
        font-size: 20px;
    }

    .ql-size-24px {
        font-size: 24px;
    }

    .ql-size-30px {
        font-size: 30px;
    }

    .ql-size-36px {
        font-size: 36px;
    }

    .ql-size-48px {
        font-size: 48px;
    }

    .ql-size .ql-picker-label::before,
    .ql-size .ql-picker-item::before {
        content: attr(data-value);
        font-size: 14px;
    }



    .small-popup-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: black;
        color: white;
        padding: 15px 25px;
        border-radius: 8px;
        font-size: 16px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, transform 0.5s ease;
        text-align: center;
        min-width: 200px;
    }

    /* Einblenden */
    .small-popup-show {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }


    .whatsappicon {
        display: none;
    }

    @media (max-width: 1300px) {
        .whatsappicon {
            display: block;
        }
    }


    .anfrageform {
        display: flex;
    }

    @media (max-width: 1300px) {
        .anfrageform {
            display: block;
            padding-top: 0px !important;
        }
    }


    .anfrageformdiv {
        width: 50%;
    }

    @media (max-width: 1300px) {
        .anfrageformdiv {
            width: 100%;
        }

        .mobilmain {
            padding-top: 0px !important;
        }
    }

    .kontakt-textarea {
        background-color: rgba(45, 45, 45, 0.8) !important;
        border: white solid 2px !important;
        border-radius: 10px !important;
        width: 100% !important;
        padding: 8px !important;
    }