/*--------------------------------------------------------------------- */
/*------------------------ Farben Einstellung ------------------------- */
/*--------------------------------------------------------------------- */
/*:root {
    --fontfamily: "Roboto",sans-serif;*/
    /* Blau */
    /*--blau: #7ab8eb;
    --blauHover: #52a3e5;
    --blau-rgb: 122, 184, 235,;*/
    /* Rot */
    /*--rot: #dc3545;
    --rotHover: #f80c35;
    --rot-rgb: 220, 53, 69,;*/
    /* Grün */
    /*--gruen: #5CB85C;
    --gruenHover: #00b74a;
    --gruen-rgb: 0, 183, 74,;*/
    /* Lila */
    /*--lila: #6F42C1;
    --lilaHover: #6B38C1;
    --lila-rgb: 111, 66, 193,;*/
    /* Gelb */
    /*--gelb: #FFA900;
    --gelbHover: #E8870C;
    --gelb-rgb: 201, 207, 39,;*/
    /* Orange */
    /*--orange: #FFA900;
    --orangeHover: #E8870C;
    --orange-rgb: 255, 169, 0,;*/
    /* Grau */
    /*--grau-bg: #E9ECEF;
    --grau-border: #BDBDBD;
    --grau-rgb: 189, 189, 189,;
    --grau-border-boots: #DADADA;
    --grau-text: #4F4F4F;
    --grau-text-2: #8c8c8c;
    --grau-helptext: #757575;*/
    /* Hintergrund */
    /*--hintergrund0: #f9f9f9;
    --hintergrund0-rgb: 249, 249, 249,;
    --hintergrund-blau: #f1f7fd;
    --hintergrund1: rgba(241,240,239, 0.95);
    --hintergrund-2-80: rgba(255,255,255, 0.80);
    --hintergrund-2-90: rgba(255,255,255, 0.90);
    --hintergrund-3: #FFF;
    --hintergrund-3-rgb: 255, 255, 255,;*/
    /* Fixe Farben */
    /*--weiss: #FFF;
    --weiss-rgb: 255, 255, 255,;
    --schwarz: #000;
    --schwarz-rgb: 0, 0, 0,;*/
    /* Textgröße */
    /*--font-size-klein: 16px;
    --font-size-normal: 20px;
    --font-size-gross: 25px;
    --font-size-xl: 28px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;*/
    /* Weitere Einstellungen */
    /*--box-shadow: 0 0 0;
    --transition: all 0.3s;
    --filter: 0%;
    --backdrop-filter: blur(4px);
    --border-radius: 12px;
}*/

/* Dark mode */
/*.nl-dark {*/
    /* Blau */
    /*--blau: #7ab8eb;
    --blauHover: #52a3e5;
    --blau-rgb: 41, 98, 158,;*/
    /* Rot */
    /*--rot: #f93154;
    --rotHover: #f80c35;
    --rot-rgb: 249, 49, 84,;*/
    /* Grün */
    /*--gruen: #5CB85C;
    --gruenHover: #00b74a;
    --gruen-rgb: 0, 183, 74,;*/
    /* Lila */
    /*--lila: #6F42C1;
    --lilaHover: #6B38C1;
    --lila-rgb: 111, 66, 193,;*/
    /* Gelb */
    /*--gelb: #FFA900;
    --gelbHover: #E8870C;
    --gelb-rgb: 201, 207, 39,;*/
    /* Orange */
    /*--orange: #FFA900;
    --orangeHover: #E8870C;
    --orange-rgb: 255, 169, 0,;*/
    /* Grau */
    /*--grau-bg: #595A5E;
    --grau-border: #CDCDCE;
    --grau-rgb: 205, 205, 206,;
    --grau-border-boots: #464646;
    --grau-text: #E1E2E3;
    --grau-text-2: #dedede;
    --grau-helptext: #757575;*/
    /* Hintergrund */
    /*--hintergrund0: #181818;
    --hintergrund0-rgb: 47, 49, 54,;
    --hintergrund-blau: #2F3136;
    --hintergrund1: rgba(32,32,32, 0.95);
    --hintergrund-2-80: rgba(12,12,12, 0.80);
    --hintergrund-2-90: rgba(12,12,12, 0.90);
    --hintergrund-3: #000;
    --hintergrund-3-rgb: 0, 0, 0,;*/
    /* Fixe Farben */
    /*--weiss: #FFF;
    --weiss-rgb: 255, 255, 255,;
    --schwarz: #000;
    --schwarz-rgb: 0, 0, 0,;*/
    /* Textgröße */
    /*--font-size-klein: 16px;
    --font-size-normal: 20px;
    --font-size-gross: 25px;
    --font-size-xl: 28px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;*/
    /* Weitere Einstellungen */
    /*--box-shadow: 255 255 255;
    --transition: all 0.3s ease;
    --filter: 100%;
    --backdrop-filter: blur(4px);
    --border-radius: 12px;
}*/

:root {
    --fontfamily: "Roboto", sans-serif;
    /* Blau */
    --blau: #4A90E2;
    --blauHover: #357ABD;
    --blau-rgb: 74, 144, 226,;
    /* Rot */
    --rot: #E94F37;
    --rotHover: #D7382B;
    --rot-rgb: 233, 79, 55,;
    /* Grün */
    --gruen: #27AE60;
    --gruenHover: #1E8449;
    --gruen-rgb: 39, 174, 96,;
    /* Lila */
    --lila: #8E44AD;
    --lilaHover: #732D91;
    --lila-rgb: 142, 68, 173,;
    /* Gelb */
    --gelb: #F1C40F;
    --gelbHover: #D4AC0D;
    --gelb-rgb: 241, 196, 15,;
    /* Orange */
    --orange: #E67E22;
    --orangeHover: #CA6F1E;
    --orange-rgb: 230, 126, 34,;
    /* Grau */
    --grau-bg: #F4F4F5;
    --grau-border: #D1D1D6;
    --grau-rgb: 209, 209, 214,;
    --grau-border-boots: #C4C4C6;
    --grau-text: #2C3E50;
    --grau-text-2: #7F8C8D;
    --grau-helptext: #95A5A6;
    /* Hintergrund */
    --hintergrund0: #FAFAFA;
    --hintergrund0-rgb: 250, 250, 250,;
    --hintergrund-blau: #ECF5FC;
    --hintergrund1: rgba(236, 245, 252, 0.95);
    --hintergrund-2-80: rgba(255, 255, 255, 0.80);
    --hintergrund-2-90: rgba(255, 255, 255, 0.90);
    --hintergrund-3: #FFFFFF;
    --hintergrund-3-rgb: 255, 255, 255,;
    /* Fixe Farben */
    --weiss: #FFFFFF;
    --weiss-rgb: 255, 255, 255,;
    --schwarz: #000000;
    --schwarz-rgb: 0, 0, 0,;
    /* Textgröße */
    --font-size-klein: 16px;
    --font-size-normal: 20px;
    --font-size-gross: 25px;
    --font-size-xl: 28px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;
    /* Weitere Einstellungen */
    --box-shadow: 0 0 0;
    --transition: all 0.3s;
    --filter: 0%;
    --backdrop-filter: blur(4px);
    --border-radius: 12px;
}

/* Dark mode */
.nl-dark {
    /* Blau */
    --blau: #3A78C2;
    --blauHover: #2B5D9A;
    --blau-rgb: 58, 120, 194,;
    /* Rot */
    --rot: #E94F37;
    --rotHover: #D7382B;
    --rot-rgb: 233, 79, 55,;
    /* Grün */
    --gruen: #27AE60;
    --gruenHover: #1E8449;
    --gruen-rgb: 39, 174, 96,;
    /* Lila */
    --lila: #8E44AD;
    --lilaHover: #732D91;
    --lila-rgb: 142, 68, 173,;
    /* Gelb */
    --gelb: #F1C40F;
    --gelbHover: #D4AC0D;
    --gelb-rgb: 241, 196, 15,;
    /* Orange */
    --orange: #E67E22;
    --orangeHover: #CA6F1E;
    --orange-rgb: 230, 126, 34,;
    /* Grau */
    --grau-bg: #2C3E50;
    --grau-border: #7F8C8D;
    --grau-rgb: 127, 140, 141,;
    --grau-border-boots: #3B3B3B;
    --grau-text: #ECF0F1;
    --grau-text-2: #D0D3D4;
    --grau-helptext: #95A5A6;
    /* Hintergrund */
    --hintergrund0: #181A1B;
    --hintergrund0-rgb: 24, 26, 27,;
    --hintergrund-blau: #23272A;
    --hintergrund1: rgba(35, 39, 42, 0.95);
    --hintergrund-2-80: rgba(12, 12, 12, 0.80);
    --hintergrund-2-90: rgba(12, 12, 12, 0.90);
    --hintergrund-3: #000000;
    --hintergrund-3-rgb: 0, 0, 0,;
    /* Fixe Farben */
    --weiss: #FFFFFF;
    --weiss-rgb: 255, 255, 255,;
    --schwarz: #000000;
    --schwarz-rgb: 0, 0, 0,;
    /* Textgröße */
    --font-size-klein: 16px;
    --font-size-normal: 20px;
    --font-size-gross: 25px;
    --font-size-xl: 28px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;
    /* Weitere Einstellungen */
    --box-shadow: 255 255 255;
    --transition: all 0.3s ease;
    --filter: 100%;
    --backdrop-filter: blur(4px);
    --border-radius: 12px;
}


/*#region Allgemein */
/*--------------------------------------------------------------------- */
/*----------------------------- Allgemein ----------------------------- */
/*--------------------------------------------------------------------- */
.nl-body {
    background: var(--hintergrund0) !important;
    font-family: var(--fontfamily);
}

.nl-bg {
    background: var(--hintergrund0);

    /*border-radius: 2rem;*/
    margin: 50px 0px 0px 0px;
    padding: 50px 0px 0px 0px;
    overflow: hidden;
    box-shadow: 0px -10px 15px 10px var(--hintergrund0);
}

@media (max-width: 991px) {
    .nl-bg {
        margin: -80px 0px 0px 0px;
        padding: 30px 0px 0px 0px;
    }
}

.nl-none {
    display: none !important;
}

.nl-deaktiviert {
    pointer-events: none;
    opacity: 0.6;
}

.nl-cursor-pointer {
    cursor: pointer !important;
}

.nl-keinUmbruch {
    white-space:nowrap;
}

/*--------------------------------------------------------------------- */
/*------------------------------ Breite ------------------------------- */
/*--------------------------------------------------------------------- */

.nl-w100 {
    width: 100%;
}

.nl-w50 {
    width: 50%;
}

.nl-w25 {
    width: 25%;
}

@media (max-width: 1299px) {
    .nl-w50 {
        width: 100%;
    }

    .nl-w25 {
        width: 50%;
    }
}

@media (max-width: 991px) {
    .nl-w25 {
        width: 100%;
    }
}

/*--------------------------------------------------------------------- */
/*----------------------- Überschriften, Texte ------------------------ */
/*--------------------------------------------------------------------- */
h1 {
    color: var(--blau);
    font-weight: bold;
}

a {
    color: var(--blau);
}

    a.nl-link {
        text-decoration: none;
        position: relative;
        transition: var(--transition);
        text-wrap: nowrap;
    }

    a.nl-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        height: 2px;
        background: var(--blauHover);
        transition: var(--transition);
    }

    a.nl-link:hover::after {
        width: 100%;
    }

/*--------------------------------------------------------------------- */
/*------------------------------- Alert ------------------------------- */
/*--------------------------------------------------------------------- */
.nl-alert-wrapper {
    position: fixed;
    bottom: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 11;
    opacity: 0.95;
}

.nl-alert {
    border: 0;
    color: var(--hintergrund0);
    padding: 10px;
    display: none;
}

.nl-alert-inhalt-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-direction: column;
}

.nl-alert-icon {
    border-radius: 50px;
    padding: 5px;
    z-index: 11;
    position: relative;
    border: 2px solid rgba(var(--spezfarbealert) 1);
    box-shadow: 0 4px 10px 0 rgb(var(--spezfarbealert) .4), 0 4px 20px 0 rgb(var(--spezfarbealert) .2);
    background: rgba(var(--spezfarbealert) .9);
}

.nl-alert-text {
    padding: 1em 0.5em 1em 2em;
    border-radius: 0.5rem;
    z-index: 12;
    background: rgba(var(--spezfarbealert) 1);
    box-shadow: 0 4px 10px 0 rgb(var(--spezfarbealert) .4), 0 4px 20px 0 rgb(var(--spezfarbealert) .2);
}

/*--------------------------------------------------------------------- */
/*------------------------- Form Überschrift -------------------------- */
/*--------------------------------------------------------------------- */
.nl-form-bg {
    background-color: transparent;
    padding: 15px 10px;
    display: flex;
    flex-wrap: wrap;
}

    .nl-form-bg > div {
        padding: 5px 3px 10px 3px;
    }

.nl-form-Titel {
    flex: 0 0 100%;
    width: 100%;
    padding: 5px;
}

    .nl-form-Titel h2 {
        font-weight: bold;
        margin-bottom: 10px;
        padding-bottom: 10px;
        position: relative;
        color: var(--blau);
    }

        .nl-form-Titel h2::after {
            content: '';
            position: absolute;
            display: block;
            width: 100%;
            height: 3px;
            bottom: 0;
            border-radius: 10rem;
            background: linear-gradient(90deg, rgba(var(--blau-rgb) 0.75), rgba(var(--gruen-rgb) 0.55));
        }

    .nl-form-Titel h4 {
        font-weight: bold;
        margin-bottom: 10px;
        padding-bottom: 10px;
        position: relative;
        color: var(--blauHover);
    }

.nl-form-text-hinweis {
    color: var(--grau-text-2);
    font-style: italic;
}

.nl-form-text-fehler {
    color: var(--rot);
    font-style: italic;
}

/*--------------------------------------------------------------------- */
/*----------------------------- Model css ----------------------------- */
/*--------------------------------------------------------------------- */
.nl-model-bearbeiten {
    background-color: rgba(var(--blau-rgb) 1);
    color: var(--weiss);
    display: flex;
    justify-content: center;
}

.nl-model-bearbeiten-gelb {
    background-color: rgba(var(--orange-rgb) 1);
    color: var(--weiss);
    display: flex;
    justify-content: center;
}

.nl-model-entfernen {
    background-color: rgba(var(--rot-rgb) 1);
    color: var(--weiss);
    display: flex;
    justify-content: center;
}

.nl-model-hinzufuegen, .nl-model-speichern {
    background-color: rgba(var(--gruen-rgb) 1);
    color: var(--weiss);
    display: flex;
    justify-content: center;
}

.nl-model-status {
    background-color: rgba(var(--spezfarbestatus) 1);
    color: var(--weiss);
    display: flex;
    justify-content: center;
}

.nl-model-footer {
    display: flex;
    justify-content: center;
}

/*--------------------------------------------------------------------- */
/*----------------------- Allgemein Überschrift ----------------------- */
/*--------------------------------------------------------------------- */
.nl-Titel {
    text-align: center;
    padding-bottom: 70px;
}

    .nl-Titel h2 {
        font-weight: 700;
        position: relative;
        color: var(--grau-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .nl-Titel h2:before,
        .nl-Titel h2:after {
            content: "";
            width: 5%;
            height: 2px;
            background: var(--blau);
            display: inline-block;
        }

        .nl-Titel h2:before {
            margin: 0 15px 10px 0;
        }

        .nl-Titel h2:after {
            margin: 0 0 10px 15px;
        }

    .nl-Titel p {
        margin: 0 auto 0 auto;
    }

@media (min-width: 1199px) {
    .nl-Titel p {
        max-width: 60%;
    }
}

/*--------------------------------------------------------------------- */
/*---------------------------- Titel Seite ---------------------------- */
/*--------------------------------------------------------------------- */
.nl-Seiten-titel {
    width: 100%;
    height: 90vh;
    margin-bottom: -200px;
    border-radius: 0 0 5rem 5rem;
    box-shadow: 0 4px 10px 0 rgb(var(--box-shadow) / 20%), 0 4px 20px 0 rgb(var(--box-shadow) / 10%);
    background-size: cover;
}

    .nl-Seiten-titel .maske {
        width: 100%;
        height: 100%;
        display: flex !important;
        align-items: center !important;
        text-align: center;
        background-attachment: fixed;
        background-color: var(--hintergrund-2-80);
    }

    .nl-Seiten-titel .containers {
        position: relative;
        /*background: linear-gradient(358deg, rgba(var(--blau-rgb) 0.1) 10%, rgba(var(--hintergrund-3-rgb) 0.8));
        backdrop-filter: var(--backdrop-filter);
        box-shadow: 0 4px 10px 0 rgba(var(--blau-rgb) 0.1), 0 4px 20px 0 rgba(var(--blau-rgb) 0.1);
        border-radius: var(--border-radius);*/
        padding: 20px 40px 20px 40px;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .nl-Seiten-titel .titel-icon {
        height: 75px;
        width: 75px;
        color: var(--blau);
        opacity: 0.5;
    }

    .nl-Seiten-titel h1 {
        margin: 0;
        font-size: var(--font-size-xxxl);
        line-height: 56px;
        text-transform: uppercase;
        text-shadow: 0 0 1px var(--hintergrund0), 0 0 3px var(--blau);
        word-break: break-word;
    }

        .nl-Seiten-titel h1:after {
            content: "";
            position: absolute;
            display: block;
            width: 80px;
            height: 4px;
            background: var(--blau);
            left: 0;
            right: 0;
            margin: auto;
            margin-top: 10px;
            border-radius: var(--border-radius);
        }

    .nl-Seiten-titel h2 {
        margin: 0;
        color: var(--blau);
        font-size: var(--font-size-gross);
        text-shadow: 0 0 1px var(--hintergrund0), 0 0 3px var(--blau);
    }

@media (min-width: 1024px) {
    .nl-Seiten-titel {
        background-attachment: fixed;
    }
}

@media (max-width: 991px) {
    .nl-Seiten-titel {
        margin-bottom: 0;
        height: 100vh;
    }

        .nl-Seiten-titel .container {
            margin: auto;
        }

        .nl-Seiten-titel h1 {
            font-size: var(--font-size-xl);
            line-height: 36px;
        }

        .nl-Seiten-titel h2 {
            font-size: var(--font-size-normal);
            line-height: 24px;
        }
}

@media (max-height: 600px) {
    .nl-Seiten-titel {
        height: 110vh;
    }
}

.nl-Seiten-titel a {
    margin-top: 15px;
    width: fit-content;
}

/*--------------------------------------------------------------------- */
/*------------------------------- Farben ------------------------------ */
/*--------------------------------------------------------------------- */
.nl-danger-text {
    color: var(--rot) !important;
}

.nl-success-text {
    color: var(--gruen) !important;
}

.nl-information-text {
    color: var(--gelb) !important;
}

.nl-primary-text {
    color: var(--blau) !important;
}

.nl-lila-text {
    color: var(--lila) !important;
}

.nl-danger-bg {
    background-color: rgba(var(--rot-rgb) 1) !important;
}

.nl-success-bg {
    background-color: rgba(var(--gruen-rgb) 1) !important;
}

.nl-information-bg {
    background-color: rgba(var(--orange-rgb) 1) !important;
}

.nl-primary-bg {
    background-color: rgba(var(--blau-rgb) 1) !important;
}

.nl-lila-bg {
    background-color: rgba(var(--lila-rgb) 1) !important;
}

/*--------------------------------------------------------------------- */
/*--------------------------------- Themes ---------------------------- */
/*--------------------------------------------------------------------- */
:root {
    --wert1: 0.35;
    --wert2: 0.45;
    --wert3: 0.85;
}

.blau {
    --farbe: var(--blau-rgb);
    --farbe_alt: var(--blauHover);
    --farbe1: rgba(var(--farbe) var(--wert1));
    --farbe2: rgba(var(--farbe) var(--wert2));
    --farbe3: rgba(var(--farbe) var(--wert3));
}

.gruen {
    --farbe: var(--gruen-rgb);
    --farbe_alt: var(--gruenHover);
    --farbe1: rgba(var(--farbe) var(--wert1));
    --farbe2: rgba(var(--farbe) var(--wert2));
    --farbe3: rgba(var(--farbe) var(--wert3));
}

.rot {
    --farbe: var(--rot-rgb);
    --farbe_alt: var(--rotHover);
    --farbe1: rgba(var(--farbe) var(--wert1));
    --farbe2: rgba(var(--farbe) var(--wert2));
    --farbe3: rgba(var(--farbe) var(--wert3));
}

.gelb {
    --farbe: var(--gelb-rgb);
    --farbe_alt: var(--gelbHover);
    --farbe1: rgba(var(--farbe) var(--wert1));
    --farbe2: rgba(var(--farbe) var(--wert2));
    --farbe3: rgba(var(--farbe) var(--wert3));
}

.orange {
    --farbe: var(--orange-rgb);
    --farbe_alt: var(--orangeHover);
    --farbe1: rgba(var(--farbe) var(--wert1));
    --farbe2: rgba(var(--farbe) var(--wert2));
    --farbe3: rgba(var(--farbe) var(--wert3));
}

.lila {
    --farbe: var(--lila-rgb);
    --farbe_alt: var(--lilaHover);
    --farbe1: rgba(var(--farbe) var(--wert1));
    --farbe2: rgba(var(--farbe) var(--wert2));
    --farbe3: rgba(var(--farbe) var(--wert3));
}

/*--------------------------------------------------------------------- */
/*------------------------------- Dropdown ---------------------------- */
/*--------------------------------------------------------------------- */
.dropdown-toggle {
    padding: .5rem 1.5625rem .5rem !important;
}

.dropdown-menu.show, .dropdown-menu.animation {
    max-height: 200px !important;
    overflow-y: auto !important;
}

.dropdown-item {
    cursor: pointer;
    border-top: 2px solid rgba(var(--blau-rgb) 0.4);
    display: flex;
    align-items: center;
    padding: 0.5rem calc(1rem + 3px);
}

.dropdown-menu > li i {
    transform: scale(1, 1);
    transition: var(--transition);
}

.dropdown-menu > li:hover i {
    transform: scale(0.9, 0.9);
}

.dropdown-menu > li span {
    padding-left: 0px;
    transition: var(--transition);
}

.dropdown-menu > li:hover span {
    padding-left: 3px;
}

.dropdown-menu > li:first-child,
.dropdown-menu > li:first-child .dropdown-item,
.dropdown-menu > .dropdown-divider ~ .dropdown-item {
    border-top: 0px;
}

/*--------------------------------------------------------------------- */
/*------------------------------- Button ------------------------------ */
/*--------------------------------------------------------------------- */
.btn {
    text-transform: none;
    align-items: center;
    display: flex;
    justify-content: center;
    transition: var(--transition);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    font-size: var(--font-size-klein);
}

    .btn i {
        transform: scale(1, 1);
        transition: var(--transition);
    }

    .btn:hover i {
        transform: scale(0.9, 0.9);
    }

    .btn::after {
        content: "";
        position: absolute;
        inset: -50%;
        background: linear-gradient( 60deg, transparent 40%, rgba(var(--weiss-rgb) 0.25) 50%, transparent 60% );
        transform: translateX(-100%);
        transition: transform 0.8s ease;
        z-index: 2;
    }

    .btn:hover {
        transform: translateY(-2px) !important;
    }

        .btn:hover::after {
            transform: translateX(100%);
        }

/*--------------------------------------------------------------------- */
/*-------------------------- Form Einstellung ------------------------- */
/*--------------------------------------------------------------------- */


/*--------------------------------------------------------------------- */
/*-------------------------- Date Einstellung ------------------------- */
/*--------------------------------------------------------------------- */
input[type=time]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
}

/*--------------------------------------------------------------------- */
/*------------------------ Checkbox Einstellung ----------------------- */
/*--------------------------------------------------------------------- */
.nl-check-container {
    max-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 15px !important;
}

@media (min-height: 1000px) {
    .nl-check-container {
        max-height: 300px;
    }
}

.nl-check-lg .form-check-input {
    top: 0.8rem;
    transform: scale(1.2);
    margin-right: 0.7rem;
}

.nl-check-lg .form-check-label {
    padding-top: 13px;
}

.nl-check-label {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
}

.form-check > .form-check-label i {
    transform: scale(1, 1);
    transition: var(--transition);
}

.form-check > .form-check-input:hover + .form-check-label i,
.form-check > .form-check-label:hover i {
    transform: scale(0.9, 0.9);
}

.form-check > .form-check-label span {
    padding-left: 0px;
    transition: var(--transition);
}

.form-check > .form-check-input:hover + .form-check-label span,
.form-check > .form-check-label:hover span {
    padding-left: 3px;
}

/*--------------------------------------------------------------------- */
/*------------------------- Switch Einstellung ------------------------ */
/*--------------------------------------------------------------------- */
.form-switch > .form-check-label {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
    position: relative;
    transition: var(--transition);
    transform: scale(1);
}

    /* Hover Scale */
    .form-switch > .form-check-label:hover {
        transform: translateY(-2px);
    }

    /* Underline Element */
    .form-switch > .form-check-label::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -4px;
        width: 100%;
        height: 2px;
        background: var(--blau);
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: var(--transition);
    }

    /* Animate von Mitte nach außen */
    .form-switch > .form-check-label:hover::after {
        transform: translateX(-50%) scaleX(1);
    }

/*--------------------------------------------------------------------- */
/*-------------------------- Input Einstellung ------------------------ */
/*--------------------------------------------------------------------- */
.form-outline input {
    padding-right: 35px !important;
}

.form-outline input:focus.nl-input-zaehler-sm {
    padding-right: 100px !important;
}

    .form-outline input:focus.nl-input-zaehler-md {
        padding-right: 125px !important;
    }

.nl-input-zaehler-box-sm, .nl-input-zaehler-box-md {
    width: auto !important;
    top: 25%;
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
    pointer-events: none;
    transition: var(--transition);
    opacity: 0;
}

.nl-input-zaehler-box-sm {
    right: 35px;
}

.nl-input-zaehler-box-md {
    right: 55px;
}

input:focus + .nl-input-zaehler-box-sm,
input:focus + .nl-input-zaehler-box-md {
    transition: var(--transition);
    opacity: 1;
}

input[readonly] {
    background-color: rgba(var(--blau-rgb) 0.1) !important;
    cursor: default;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    /* Textfarbe */
    -webkit-text-fill-color: var(--grau-text) !important;
    /* Box-Shadow Trick: Farbe transparent setzen */
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    /* Hintergrund als Verlauf setzen */
    transition: background-color 5000s ease-in-out 0s !important;
    /* optional: Farbüberlagerung für Verlauf */
    position: relative;
}

/*--------------------------------------------------------------------- */
/*------------------------- Textarea Einstellung ---------------------- */
/*--------------------------------------------------------------------- */
.form-outline textarea {
    padding-right: 30px !important;
}

    .form-outline textarea:focus.nl-textarea-zaehler-sm {
        padding-right: 105px !important;
    }
.nl-textarea-zaehler-box-sm {
    width: auto !important;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
    pointer-events: none;
    transition: var(--transition);
    opacity: 0;
}

.nl-textarea-zaehler-box-sm {
    right: 40px;
}
textarea:focus + .nl-textarea-zaehler-box-sm{
    transition: var(--transition);
    opacity: 1;
}

/*--------------------------------------------------------------------- */
/*-------------------------- Tooltip Einstellung ---------------------- */
/*--------------------------------------------------------------------- */
.tooltip-inner {
    border-radius: var(--border-radius);
    backdrop-filter: var(--backdrop-filter);
    box-shadow: 0 10px 20px -3px rgba(var(--grau-rgb) 0.2);
    background: var(--hintergrund0);
    border: 1px solid rgba(var(--blau-rgb) 0.2);
    color: var(--grau-text);
}

/*#endregion*/

/*#region Navbar*/
/*--------------------------------------------------------------------- */
/*----------------------------- Allgemein ----------------------------- */
/*--------------------------------------------------------------------- */
.nl-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(var(--hintergrund0-rgb) 0.8); 
    backdrop-filter: var(--backdrop-filter);
    box-shadow: 0 2px 10px rgba(var(--grau-rgb) 0.2);
    z-index: 1000;
    transition: var(--transition);
    padding: .5rem .75rem;
}
    /* Chrome, Edge, Safari */
    .nl-navbar::-webkit-scrollbar {
        height: 0.7rem;
    }

/*--------------------------------------------------------------------- */
/*-------------------------------- Text ------------------------------- */
/*--------------------------------------------------------------------- */

/*.nl-navbar-text a {
    color: var(--grau-text);
    font-size: var(--font-size-normal);
    border-radius: 15px;
    text-decoration: none;
    margin: 0px 10px;
    padding: 5px 5px;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

    .nl-navbar-text a i {
        transform: scale(1, 1);
        transition: var(--transition);
    }

    .nl-navbar-text a:hover i {
        transform: scale(0.9, 0.9);
    }

@media screen and (min-width: 991px) {
    .nl-navbar-text a:before, .nl-navbar-text a:after {
        position: absolute;
        opacity: 0.5;
        height: 100%;
        width: 2px;
        content: '';
        transition: var(--transition);
    }

    .nl-navbar-text a:before {
        background-color: var(--grau-text);
        left: 0px;
        top: 0px;
    }

    .nl-navbar-text a:after {
        background-color: var(--grau-text);
        right: 0px;
        bottom: 0px;
    }

    .nl-navbar-text a:hover:before, .nl-navbar-text a:hover:after, .nl-navbar-text .aktiv a:before, .nl-navbar-text .aktiv a:after {
        background-color: var(--blau);
        opacity: 1;
        height: 2px;
        width: 100%;
    }

    .nl-navbar-text .aktiv a:hover:before {
        top: -2px;
    }

    .nl-navbar-text .aktiv a:hover:after {
        bottom: -2px;
    }
}

.nl-navbar-text a:hover, .nl-navbar-text .aktiv a {
    color: var(--blau) !important;
}*/

.nl-navbar-text {
    display: flex;
    margin: 0px auto;
    transition: var(--transition);
    row-gap: 10px;
}

    .nl-navbar-text a {
        color: var(--grau-text);
        font-size: var(--font-size-normal);
        border-radius: 12px;
        text-decoration: none;
        margin: 0 10px;
        padding: 5px 10px;
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: fit-content;
    }

        /* Icon Animation */
        .nl-navbar-text a i {
            display: inline-block;
            transition: var(--transition);
        }

        /* Icon leicht skalieren beim Hover */
        .nl-navbar-text a:hover i {
            transform: scale(1.2);
        }

        /* Unterline Effekt mit pseudo-elementen */
        .nl-navbar-text a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            width: 0%;
            background-color: var(--blau);
            transition: var(--transition);
        }

        /* Hover oder aktiv */
        .nl-navbar-text a:hover::after,
        .nl-navbar-text .aktiv a::after {
            width: 100%;
        }

        /* Textfarbe beim Hover / aktiv */
        .nl-navbar-text a:hover,
        .nl-navbar-text .aktiv a {
            color: var(--blau);
        }

    .nl-navbar-text span {
        width: auto;
        opacity: 1;
    }

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .nl-navbar-text span {
        width: 0px;
        opacity: 0;
    }
}

/*--------------------------------------------------------------------- */
/*----------------------------- Logo Button---------------------------- */
/*--------------------------------------------------------------------- */
.nl-navbar-logo-btn {
    display: block;
    border-radius: var(--border-radius);
    margin-right: 0.5rem !important;
    height: 36px;
    width: auto;
    max-width: 77px;
    min-width: 60px;
    padding: 2px 5px;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(var(--blau-rgb) 0.2);
    cursor: pointer;
}

    .nl-navbar-logo-btn img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        display: block;
    }

    .nl-navbar-logo-btn:hover {
        transform: rotate(-2deg) scale(1.05);
        box-shadow: 0 8px 20px rgba(var(--blau-rgb) 0.2), 0 0 12px rgba(var(--blau-rgb) 0.1);
    }

/*--------------------------------------------------------------------- */
/*--------------------------- Button rechts --------------------------- */
/*--------------------------------------------------------------------- */
.nl-navbar-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .nl-navbar-buttons .btn .nl-i2, .nl-navbar-buttons .btn:hover .nl-i {
        display: inline-block;
        opacity: 0;
        transform: scaleX(0);
        width: 0px;
    }

    .nl-navbar-buttons .btn:hover .nl-i2, .nl-navbar-buttons .btn .nl-i {
        width: auto;
        opacity: 1;
        transform: scaleX(1);
    }

@media screen and (max-width: 991px) {
    .nl-navbar-buttons {
        margin-top: 10px;
    }
}

/*--------------------------------------------------------------------- */
/*-------------------------- Toggle Button ---------------------------- */
/*--------------------------------------------------------------------- */
.nl-navbar-toggle-btn {
    width: 46px;
    height: 31px;
    display: flex;
    align-items: center;
}

    .nl-navbar-toggle-btn:hover .nl-navbar-toggle-icon:before{
        top: -11px;
    }

    .nl-navbar-toggle-btn:hover .nl-navbar-toggle-icon:after{
        top: 11px;
    }

    .nl-navbar-toggle-btn.show {
        width: 30px;
        margin-right: 8px;
        margin-left: 8px;
        height: 31px;
    }

    .nl-navbar-toggle-btn.show .nl-navbar-toggle-icon {
        -webkit-transform: rotate(180deg);
        background-color: transparent;
        right: 30px;
    }

    .nl-navbar-toggle-btn.show .nl-navbar-toggle-icon:before {
        -webkit-transform: rotate(45deg); 
        top: 0;
    }

    .nl-navbar-toggle-btn.show .nl-navbar-toggle-icon:after {
        -webkit-transform: rotate(-45deg);
         top: 0;
    }

    .nl-navbar-toggle-btn.show:hover .nl-navbar-toggle-icon:before {
        top: 2px;
    }

    .nl-navbar-toggle-btn.show:hover .nl-navbar-toggle-icon:after {
        top: 2px;
    }

.nl-navbar-toggle-icon {
    -webkit-transition: all 0.25s;
    position: absolute;
    width: 30px;
    height: 2px;
    border-radius: 50px;
    right: 15px;
    background-color: var(--grau-text);
}

    .nl-navbar-toggle-icon:before, .nl-navbar-toggle-icon:after {
        -webkit-transition: all 0.25s;
        width: 30px;
        border-radius: 50px;
        height: 2px;
        right: 10px;
        background: var(--grau-text);
        position: absolute;
        content: '';
    }

    .nl-navbar-toggle-icon:before {
        top: -9px;
    }

    .nl-navbar-toggle-icon:after {
        top: 9px;
    }

/*#endregion Navbar*/

/*#region Scrollbar + Button */
/*--------------------------------------------------------------------- */
/*------------------------ Scroll Einstellung ------------------------- */
/*--------------------------------------------------------------------- */
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: var(--hintergrund0);
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: var(--blau);
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--blauHover);
    }

/*--------------------------------------------------------------------- */
/*------------------------ Scroll Top Button -------------------------- */
/*--------------------------------------------------------------------- */
.nl-scroll-top {
    display: flex;
    position: fixed;
    bottom: -50px;
    right: -50px;
    z-index: 1;
    width: 50px;
    height: 50px;
    opacity: 0;
    color: var(--weiss);
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    box-shadow: 0 1px 2px 0 var(--lilaHover), 0 1px 5px 0 var(--lilaHover);
    background-color: var(--lila);
    transition: .5s;
}

    .nl-scroll-top:hover {
        cursor: pointer;
        color: var(--weiss);
        box-shadow: 0 2px 5px 0 var(--lilaHover), 0 2px 10px 0 var(--lilaHover);
        background-color: var(--lilaHover);
    }

    .nl-scroll-top.aktiv {
        bottom: 15px;
        right: 15px;
        opacity: 1;
    }

/*#endregion*/

/*#region Footer */
/*--------------------------------------------------------------------- */
/*---------------------- Allgemeine Einstellung ----------------------- */
/*--------------------------------------------------------------------- */
.nl-footer {
    background-color: var(--hintergrund1) !important;
    padding: 1.5rem 0 1rem 0;
    margin: 1.5rem 0 0 0;
}

.nl-footer-icon-liste {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.nl-footer-link-liste {
    display: flex;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    justify-content: center;
    align-items: center;
}

    .nl-footer-link-liste a {
        border-left: 2px solid var(--grau-border-boots);
        padding-left: 5px;
        margin-left: 5px;
        align-items: center;
        display: flex;
        column-gap: 5px;
    }

        .nl-footer-link-liste a i {
            transform: scale(1, 1);
            transition: var(--transition);
        }

        .nl-footer-link-liste a:hover i {
            transform: scale(0.9, 0.9);
        }

/*#endregion*/

/*#region Form*/
/*--------------------------------------------------------------------- */
/*--------------------- Pflichtfeld Einstellung ----------------------- */
/*--------------------------------------------------------------------- */
.nl-pflicht label::after{
    content: " *";
    color: var(--rot);
}

/*--------------------------------------------------------------------- */
/*---------------------------- Autocomplete --------------------------- */
/*--------------------------------------------------------------------- */
/*input:-webkit-autofill,
input:hover:-webkit-autofill,
input:focus:-webkit-autofill {
    -webkit-text-fill-color: var(--grau-text);
    -webkit-box-shadow: 0 0 0px 1000px var(--hintergrund0) inset !important;
    box-shadow: 0 0 0px 1000px var(--hintergrund0) inset !important;
    background-color: var(--hintergrund0) !important;
}*/

/*#endregion*/

/*#region Liste*/
/*--------------------------------------------------------------------- */
/*------------------------ Liste Einstellung -------------------------- */
/*--------------------------------------------------------------------- */
.nl-liste-container {
    display: flex;
    flex-direction: column;
    margin: 2%;
    padding: 10px;
    row-gap: 20px;
}

.nl-liste-box {
    display: flex;
    border: 1px solid rgba(var(--spezfarbeListe) 1);
    box-shadow: 0 2px 7px -3px rgba(var(--spezfarbeListe) 0.2), 0 10px 10px -2px rgba(var(--spezfarbeListe) 0.1);
    transition: var(--transition);
}

    .nl-liste-box:hover {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-left-radius: 0px;
        box-shadow: 0 2px 10px -3px rgba(var(--spezfarbeListe) 0.4), 0 10px 12px -2px rgba(var(--spezfarbeListe) 0.2);
    }

@media (max-width: 767px) {
    .nl-liste-box {
        flex-direction: column;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
    }
}

@media (min-width: 768px) {
    .nl-liste-box {
        flex-direction: row;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
    }
}

/*--------------------------------------------------------------------- */
/*----------------------- Buttons Einstellung ------------------------- */
/*--------------------------------------------------------------------- */
.nl-liste-btn-wrapper {
    display: flex;
    padding: 10px;
    z-index: 2;
}

@media (max-width: 767px) {
    .nl-liste-btn-wrapper {
        column-gap: 5px;
        flex-direction: row;
        width: 100%;
    }

        .nl-liste-btn-wrapper .btn {
            flex: 1;
        }

    .nl-liste-btn-text {
        display: block;
    }
}

@media (min-width: 768px) {
    .nl-liste-btn-wrapper {
        flex-direction: column;
        justify-content: center;
        row-gap: 5px;
        width: 90px;
        max-width: 90px;
        min-width: 90px;
    }

    .nl-liste-btn-text {
        display: none;
    }
}

/*--------------------------------------------------------------------- */
/*--------------------- Liste Head Einstellung ------------------------ */
/*--------------------------------------------------------------------- */
.nl-liste-head {
    display: flex;
}

.nl-liste-icon-wrapper {
    margin: auto;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(var(--spezfarbeListe) 1);
    border-radius: 25px;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 15px -3px rgba(var(--spezfarbeListe) 0.2), 0 10px 20px -2px rgba(var(--spezfarbeListe) 0.1);
    transition: var(--transition);
}

.nl-liste-box:hover .nl-liste-icon-wrapper {
    box-shadow: 0 2px 20px -3px rgba(var(--spezfarbeListe) 0.4), 0 10px 25px -2px rgba(var(--spezfarbeListe) 0.2);
}

@media (max-width: 767px) {
    .nl-liste-head {
        border-bottom: 1px solid rgba(var(--spezfarbeListe) 1);
        flex-direction: column;
        padding: 10px;
    }
}

@media (min-width: 768px) {
    .nl-liste-head {
        border-right: 1px solid rgba(var(--spezfarbeListe) 1);
        flex-direction: row;
        height: 150px;
        min-height: 150px;
        width: 200px;
        min-width: 200px;
        margin-left: -90px;
        padding-left: 80px;
    }
}

/*--------------------------------------------------------------------- */
/*-------------------- Liste Inhalt Einstellung ----------------------- */
/*--------------------------------------------------------------------- */
.nl-liste-inhalt {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    padding: 10px;
}

.nl-liste-titel, .nl-liste-text, .nl-liste-zusatztext {
    margin: 0px;
    cursor: default;
}

.nl-liste-titel-border {
    display: inline;
    border-bottom: 4px solid rgba(var(--spezfarbeListe) 1);
    border-radius: 2px;
}

.nl-liste-text, .nl-liste-zusatztext {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--grau-helptext);
}

@media (max-width: 767px) {
    .nl-liste-inhalt {
        justify-content: center;
        row-gap: 10px;
    }
}

@media (min-width: 768px) {
    .nl-liste-inhalt {
        justify-content: space-evenly;
    }
}

.nl-liste-text span, .nl-liste-zusatztext span {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: var(--font-size-klein);
    font-weight: 700;
    color: var(--grau-text);
    border: 1px solid rgba(var(--spezfarbeListeText) 1);
    box-shadow: 0 2px 7px -3px rgba(var(--spezfarbeListeText) 0.2), 0 10px 10px -2px rgba(var(--spezfarbeListeText) 0.1);
}

/*#endregion*/

/*#region Startseite*/
/*--------------------------------------------------------------------- */
/*----------------------- Information Anzeige  ------------------------ */
/*--------------------------------------------------------------------- */
.nl-info-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 30px;
    margin: 60px 0px;
    gap: 2px;
}

.nl-info-buttons-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 3;
    top: 130px;
    left: 15px;
    row-gap: 5px;
}

.nl-info-titel {
    box-shadow: 0 2px 15px -3px rgb(var(--box-shadow) / 7%), 0 10px 20px -2px rgb(var(--box-shadow) / 4%);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--hintergrund0) 0%, color-mix(in srgb, var(--blau), transparent 90%) 100%);
    border-left: 4px solid rgba(var(--blau-rgb) 0.2);
    backdrop-filter: var(--backdrop-filter);
    transition: var(--transition);
    width: 75%;
    display: flex;
    flex-direction: row;
}

    .nl-info-titel:hover {
        box-shadow: 0 2px 20px -3px rgb(var(--box-shadow) / 7%), 0 10px 25px -2px rgb(var(--box-shadow) / 4%);
        border-left: 4px solid rgba(var(--blau-rgb) 1);
    }

        .nl-info-titel:hover .nl-Titel {
            transform: scale(1.1);
        }

    .nl-info-titel .nl-Titel {
        padding: 10px;
        margin: 10px;
        width: 100%;
        transition: var(--transition);
    }

        .nl-info-titel .nl-Titel h2 {
            margin: 0px;
        }

.nl-info-titel-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
}

.nl-info-titel-icon i {
    width: 60px;
    height: 60px;
    background: rgba(var(--blau-rgb) 0.2);
    backdrop-filter: var(--backdrop-filter);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xxl);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(4);
    }

    50% {
        transform: translateY(-4px);
    }
}

.nl-info-bg-wrapper {
    overflow: hidden;
    z-index: 2;
    display: flex;
    justify-content: center;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 15px -3px rgba(var(--grau-rgb) 0.1), 0 10px 20px -2px rgba(var(--grau-rgb) 0.1);
    flex: 0 0 auto;
    width: 75%;
}

    .nl-info-bg-wrapper::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: var(--transition);
        background: linear-gradient(to top, color-mix(in srgb, var(--blau) 40%, transparent) 0%, transparent 60%);
        z-index: 3;
    }

    .nl-info-bg-wrapper:hover {
        box-shadow: 0 2px 20px -3px rgba(var(--blau-rgb) 0.1), 0 10px 25px -2px rgba(var(--blau-rgb) 0.1);
    }

        .nl-info-bg-wrapper:hover img {
            transform: scale(1.02);
        }

        .nl-info-bg-wrapper:hover::before {
            opacity: 1;
        }

    .nl-info-bg-wrapper img {
        transition: var(--transition);
        width: 100%;
        height: auto;
        max-height: 615px;
    }


.nl-info-wrapper {
    box-shadow: 0 2px 15px -3px rgba(var(--grau-rgb) 0.1), 0 10px 20px -2px rgba(var(--grau-rgb) 0.1);
    border-radius: 2rem;
    z-index: 3;
    background: linear-gradient(135deg, var(--hintergrund0) 0%, color-mix(in srgb, var(--blau), transparent 90%) 100%);
    backdrop-filter: var(--backdrop-filter);
    overflow: auto;
    padding: 10px 20px;
    transition: var(--transition);
    border: 1px solid var(--grau-border-boots);
    flex: 1 0 0%;
    margin: auto 10px auto -100px;
}

    .nl-info-wrapper:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 2px 20px -3px rgba(var(--blau-rgb) 0.1), 0 10px 25px -2px rgba(var(--blau-rgb) 0.1);
    }

@media (max-width: 991px) {
    .nl-info-titel {
        width: 100%;
        flex-direction: column;
        border-left: 0px;
        border-top: 4px solid rgba(var(--blau-rgb) 0.2);
    }

        .nl-info-titel:hover {
            box-shadow: 0 2px 20px -3px rgb(var(--box-shadow) / 7%), 0 10px 25px -2px rgb(var(--box-shadow) / 4%);
            border-left: 0px;
            border-top: 4px solid rgba(var(--blau-rgb) 1);
        }

    .nl-info-titel-icon {
        width: 100%;
        margin: 10px 0px 10px 0px;
    }

    .nl-info-bg-wrapper {
        width: 100%;
        text-align: center;
        border-radius: var(--border-radius);
    }

        .nl-info-bg-wrapper img {
            max-height: 300px;
        }

    .nl-info-wrapper {
        text-align: center;
        border-radius: 0px 0px 2rem 2rem;
        margin: -20px 0px 0px 0px;
        border-radius: var(--border-radius);
    }
}

/*--------------------------------------------------------------------- */
/*------------------- Terminkalender Einstellung ---------------------- */
/*--------------------------------------------------------------------- */
.nl-kalender-gross {
    max-height: 70%;
    overflow: scroll;
}

/*@media (max-width: 650px) {
    .nl-kalender-gross {
        display: none;
    }
}

@media (min-width: 650px) {
    .nl-kalender-klein {
        display: none;
    }
}

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 10px;
    height: 0;
    overflow: hidden;
}

    .responsive-iframe-container iframe,
    .vresponsive-iframe-container object,
    .vresponsive-iframe-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }*/
/*#endregion*/

/*#region Über uns*/
/*--------------------------------------------------------------------- */
/*--------------------------- Seiten Aufbau --------------------------- */
/*--------------------------------------------------------------------- */
.nl-ueberuns-container {
    display: flex;
    margin: 4% 5%;
    gap: 1%;
    flex-direction: row;
}

.nl-ueberuns-spiegelverkehrt {
    flex-direction: row-reverse;
}

.nl-ueberuns-links, .nl-ueberuns-rechts {
    display: flex;
    flex-direction: column;
    flex: 49.5%;
    overflow: hidden;
    padding: 30px;
}

.nl-ueberuns-links {
    text-align: left;
}

.nl-ueberuns-rechts {
    text-align: right;
}

.nl-ueberuns-bg {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    background-image: var(--spezbild);
}

    .nl-ueberuns-bg::after {
        content: "";
        position: absolute;
        inset: -50%;
        background: linear-gradient( 60deg, transparent 40%, rgba(var(--weiss-rgb) 0.25) 50%, transparent 60% );
        transform: translateX(-100%);
        transition: transform 0.8s ease;
        z-index: 2;
    }

    .nl-ueberuns-bg:hover {
        transform: translateY(-3px) !important;
        filter: saturate(1.1) contrast(1.05);
        box-shadow: 0 10px 30px rgba(var(--blau-rgb) 0.25), 0 0 0 1px rgba(var(--weiss-rgb) 0.08) inset;
    }

        .nl-ueberuns-bg:hover::after {
            transform: translateX(100%);
        }

@media (max-width: 1299px) {
    .nl-ueberuns-container {
        flex-direction: column;
    }

    .nl-ueberuns-spiegelverkehrt {
        flex-direction: column;
    }

    .nl-ueberuns-links, .nl-ueberuns-rechts {
        text-align: center;
        flex: 100%;
    }

    .nl-ueberuns-bg {
        height: 50vw;
    }

        .nl-ueberuns-bg:hover {
            transform: translateY(8px) !important;
        }
}

.nl-ueberuns-titel-wrapper {
    text-align: center;
    color: var(--blau);
    margin: 20px 0px;
}

.nl-ueberuns-text-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 3rem;
}

.nl-ueberuns-text strong {
    font-weight: bold;
    background: linear-gradient(90deg, var(--blau), var(--blauHover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: var(--transition);
}

    .nl-ueberuns-text strong:hover {
        transform: scale(1.05);
        text-shadow: 2px 2px 8px rgba(var(--blau-rgb) 0.3);
        cursor: default;
    }

/*#endregion*/

/*#region JuGu */
/*--------------------------------------------------------------------- */
/*--------------------------- Seiten Aufbau --------------------------- */
/*--------------------------------------------------------------------- */
.nl-jugu-container {
    display: flex;
    margin: 2% 5%;
    gap: 1%;
    justify-content: center;
}

/*#endregion*/

/*#region Anmeldung*/
/*--------------------------------------------------------------------- */
/*------------------------- Anmeldung Fenster ------------------------- */
/*--------------------------------------------------------------------- */
.nl-anmeldung-container {   
    margin-top: 60px; 
    display: flex;
    width: 100%;
    min-height: 100%;
    background-position: center;
    background-size: cover;
    overflow: auto;
    background-image: radial-gradient(circle at 30% 86%, rgba(var(--blau-rgb) 0.03) 0%, rgba(var(--lila-rgb) 0.03) 8%,transparent 8%, transparent 92%),
                      radial-gradient(circle at 55% 100%,rgba(var(--blau-rgb) 0.03) 0%, rgba(var(--lila-rgb) 0.03) 8%,transparent 8%, transparent 92%),
                      radial-gradient(circle at 40% 75%, rgba(var(--blau-rgb) 0.03) 0%, rgba(var(--lila-rgb) 0.03) 6%,transparent 6%, transparent 94%),
                      radial-gradient(circle at 7% 99%, rgba(var(--blau-rgb) 0.03) 0%, rgba(var(--lila-rgb) 0.03) 6%,transparent 6%, transparent 94%),
                      radial-gradient(circle at 69% 76%, rgba(var(--blau-rgb) 0.03) 0%, rgba(var(--lila-rgb) 0.03) 6%,transparent 6%, transparent 94%),
                      radial-gradient(circle at 2% 35%, rgba(var(--blau-rgb) 0.03) 0%, rgba(var(--lila-rgb) 0.03) 6%,transparent 6%, transparent 94%),
                      radial-gradient(circle at 14% 48%, rgba(var(--blau-rgb) 0.03) 0%, rgba(var(--lila-rgb) 0.03) 6%,transparent 6%, transparent 94%),
                      radial-gradient(circle at 28% 87%, rgba(var(--blau-rgb) 0.04) 0%, rgba(var(--lila-rgb) 0.04) 4%,transparent 4%, transparent 96%),
                      radial-gradient(circle at 65% 14%, rgba(var(--blau-rgb) 0.04) 0%, rgba(var(--lila-rgb) 0.04) 4%,transparent 4%, transparent 96%),
                      radial-gradient(circle at 51% 36%, rgba(var(--blau-rgb) 0.04) 0%, rgba(var(--lila-rgb) 0.04) 4%,transparent 4%, transparent 96%),
                      radial-gradient(circle at 6% 93%,  rgba(var(--blau-rgb) 0.04) 0%, rgba(var(--lila-rgb) 0.04) 4%,transparent 4%, transparent 96%),
                      radial-gradient(circle at 75% 40%,  rgba(var(--blau-rgb) 0.04) 0%, rgba(var(--lila-rgb) 0.04) 10%,transparent 10%, transparent 96%),
                      radial-gradient(circle at 100% 100%,  rgba(var(--blau-rgb) 0.04) 0%, rgba(var(--lila-rgb) 0.04) 4%,transparent 4%, transparent 96%),
                      linear-gradient(135deg, var(--hintergrund-blau), var(--hintergrund1));
    flex-direction: row;
}

.nl-anmeldung-text, .nl-anmeldung-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2%;
    padding: 0 5%;
}

.nl-anmeldung-text {
    text-align: center;
    flex: 49.5%;
}

.nl-anmeldung-wrapper {
    text-align: left;
    flex: 49.5%;
}

.nl-anmeldung-maske {
    padding: 5% 5%;
    margin: 1% 0;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 5px 0 rgb(var(--box-shadow) / 20%), 0 2px 10px 0 rgb(var(--box-shadow) / 10%);
    width: 100%;
    display: none;
}

    .nl-anmeldung-maske:hover {
        box-shadow: 0 4px 10px 0 rgb(var(--box-shadow) / 20%), 0 4px 20px 0 rgb(var(--box-shadow) / 10%);
    }

@media (max-width: 991px) {
    .nl-anmeldung-container {
        flex-direction: column;
    }

    .nl-anmeldung-text, .nl-anmeldung-wrapper {
        text-align: center;
        flex: 100%;
    }
}

.nl-anmeldung-text .titel-icon {
    height: 75px;
    width: 75px;
    color: var(--blau);
    opacity: 0.5;
}

.nl-anmeldung-text h2 {
    margin: 0;
    font-weight: 700;
    line-height: 56px;
    text-transform: uppercase;
    color: var(--blau);
    text-shadow: 0 0 1px var(--hintergrund0), 0 0 3px var(--blau);
}

.nl-Passwort-maske {
    display: none;
    width: auto;
    position: absolute;
    margin: 50px 1% 0px 1%;
    background-color: var(--hintergrund1);
    border: 1px solid var(--rot);
    box-shadow: 0 2px 15px -3px rgb(var(--box-shadow) / 7%), 0 10px 20px -2px rgb(var(--box-shadow) / 4%);
    border-radius: 10px;
    z-index: 1;
    padding: 1.5% 1.2%;
    color: var(--grau-text);
}

.nl-Passwort-min, .nl-Passwort-gross, .nl-Passwort-ziffer, .nl-Passwort-zeichen {
    display: flex;
    align-items: center;
}

.nl-Passwort-success {
    display: none;
    color: var(--gruen);
    margin-right: .5rem !important;
}

.nl-Passwort-error {
    display: inline;
    color: var(--rot);
    margin-right: 1rem !important;
}
/*#endregion*/

/*#region Datenschutz*/
/*--------------------------------------------------------------------- */
/*----------------------------- Stammbaum  ---------------------------- */
/*--------------------------------------------------------------------- */
.stammbaum .stammbaum-title {
    font-size: var(--font-size-gross);
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--blauHover);
}

.stammbaum .stammbaum-item {
    padding: 0 0 20px 20px;
    margin-top: -2px;
    border-left: 2px solid var(--blauHover);
    position: relative;
}

    .stammbaum .stammbaum-item h4 {
        line-height: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .stammbaum .stammbaum-item h5 {
        background: #effbf9;
        padding: 5px 15px;
        display: inline-block;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--blauHover);
    }

    .stammbaum .stammbaum-item ul, .stammbaum-item p {
        padding-left: 20px;
    }

        .stammbaum .stammbaum-item ul li {
            padding-bottom: 10px;
        }

    .stammbaum .stammbaum-item:last-child {
        padding-bottom: 0;
    }

    .stammbaum .stammbaum-item::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50px;
        left: -9px;
        top: 0;
        background: var(--hintergrund1);
        border: 2px solid var(--blauHover);
    }
/*#endregion*/

/*#region Impressum*/
/*--------------------------------------------------------------------- */
/*------------------------------ Kontakt  ----------------------------- */
/*--------------------------------------------------------------------- */
.kontakt-container {
    box-shadow: 0 2px 15px -3px rgb(var(--box-shadow) / 7%), 0 10px 20px -2px rgb(var(--box-shadow) / 4%);
    border-radius: 2rem;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 30px;
    margin: 30px 0px;
    gap: 20px;
    width: 100%;
}

    .kontakt-container:hover {
        box-shadow: 0 2px 20px -3px rgb(var(--box-shadow) / 7%), 0 10px 25px -2px rgb(var(--box-shadow) / 4%);
    }

@media (min-width: 768px) {
    .kontakt-icon-wrapper {
        flex: 0 0 auto;
    }
}

@media (max-width: 767px) {
    .kontakt-icon-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

.kontakt-icon {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0px 0px -6px 0px;
    color: var(--blau);
    transition: transform 0.8s;
    transform: scale(1, 1);
}

.kontakt-container:hover .kontakt-icon {
    transition: transform 0.8s;
    transform: scale(0.9, 0.9);
    color: var(--blauHover);
}

@media (min-width: 768px) {
    .impressum .kontakt-text-wrapper {
        flex: 1 0 0%;
        margin: auto;
    }
}

@media (max-width: 767px) {
    .impressum .kontakt-text-wrapper {
        width: 100%;
        text-align: center;
    }
}

.kontakt-text-wrapper h4 {
    color: var(--blau);
}

.kontakt-container:hover h4 {
    color: var(--blauHover);
}

/*--------------------------------------------------------------------- */
/*----------------------------- Techniken  ---------------------------- */
/*--------------------------------------------------------------------- */
#TechnikenModal .modal-body {
    padding: 0px;
}

.nl-techniken-wrapper {
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow-y: auto;
    padding: 1rem;
}

    .nl-techniken-wrapper .kontakt-container {
        box-shadow: 0 2px 7px -3px rgb(var(--box-shadow) / 7%), 0 5px 10px -2px rgb(var(--box-shadow) / 4%);
        margin: 10px 0px;
    }

        .nl-techniken-wrapper .kontakt-container:hover {
            box-shadow: 0 2px 10px -3px rgb(var(--box-shadow) / 7%), 0 5px 12px -2px rgb(var(--box-shadow) / 4%);
        }

    .nl-techniken-wrapper .kontakt-text-wrapper {
        display: flex;
        align-items: center;
    }

/*#endregion*/

/*#region Fehlerseite */
.nl-Fehler-titel {
    width: auto;
    height: 100vh;
    background-position: center;
    background-size: cover;
}

    .nl-Fehler-titel .maske {
        width: 100%;
        height: 100%;
        display: flex !important;
        text-align: center;
        background-attachment: fixed;
        background-color: var(--hintergrund-2-80);
    }

    .nl-Fehler-titel .containers {
        position: relative;
        padding: 20px 40px 20px 40px;
        margin: auto;
    }

    .nl-Fehler-titel .titel-icon {
        opacity: 0.9;
        border-radius: 50px;
        margin-bottom: 20px;
        height: 400px;
        width: auto;
    }

@media screen and (max-width: 991px) {
    .nl-Fehler-titel .titel-icon {
        height: auto;
        width: 100%;
    }
}

.nl-Fehler-titel h1 {
    margin: 0;
    line-height: 56px;
    text-transform: uppercase;
    color: var(--rot);
    text-shadow: 0 0 1px var(--hintergrund0), 0 0 3px var(--rot);
}

.nl-Fehler-titel h2 {
    color: var(--rot);
    margin: 10px 0 0 0;
    text-shadow: 0 0 1px var(--hintergrund0), 0 0 3px var(--rot);
}
/*#endregion */

/*#region Informationsseite*/
/*--------------------------------------------------------------------- */
/*--------------------------- Boxen anpassen -------------------------- */
/*--------------------------------------------------------------------- */
.nl-tab-info {
    display: flex;
    column-gap: 20px;
    row-gap: 20px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 30px;
}

.nl-tab-info .nl-tab-media-block {
    box-shadow: 0 2px 15px -3px rgba(var(--spezfarbeinfo) 0.2), 0 10px 20px -2px rgba(var(--spezfarbeinfo) 0.2) !important;
    border: 1px solid rgba(var(--spezfarbeinfo) 1) !important;
}

    .nl-tab-info .nl-tab-media-block:hover {
        box-shadow: 0 2px 20px -3px rgba(var(--spezfarbeinfo) 0.4), 0 10px 25px -2px rgba(var(--spezfarbeinfo) 0.4) !important;
    }

.nl-tab-info .nl-tab-media-block-status {
    color: rgba(var(--spezfarbeinfo) 1);
    border: 1px solid rgba(var(--spezfarbeinfo) 1);
    box-shadow: 0 2px 15px -3px rgba(var(--spezfarbeinfo) 0.2), 0 10px 20px -2px rgba(var(--spezfarbeinfo) 0.2) !important;
}

    .nl-tab-info .nl-tab-media-block:hover .nl-tab-media-block-status {
        box-shadow: 0 2px 20px -3px rgba(var(--spezfarbeinfo) 0.3), 0 10px 25px -2px rgba(var(--spezfarbeinfo) 0.3) !important;
    }

.nl-tab-info .nl-tab-media-block-titel {
    background: rgba(var(--spezfarbeinfo) 1);
}

.nl-tab-info .nl-tab-media-block-icon {
    color: rgba(var(--spezfarbeinfo) 1);
}

.nl-tab-info .nl-tab-media-block-text {
    text-align: center;
}

/*#endregion*/

/* #region Personen Slider */
/*--------------------------------------------------------------------- */
/*------------------------------ Person ------------------------------- */
/*--------------------------------------------------------------------- */
.nl-person-container {
    display: flex;
    width: 100%;
    background-image: linear-gradient(to bottom, var(--hintergrund0), var(--hintergrund-2-80), var(--hintergrund-2-80), var(--hintergrund0)), url('../03_UeberUns/Img/Leiterschaft_Hintergrund.jpg');
    background-size: cover;
    align-items: center;
}

.nl-person-buttons-wrapper {
    display: flex;
    position: relative;
}

.nl-person-wrapper {
    display: flex;
    width: 90%;
    height: 70%;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    border: 1px solid var(--grau-border);
    background: rgba(var(--weiss-rgb) .04);
    backdrop-filter: var(--backdrop-filter);
    box-shadow: 0 20px 40px rgba(var(--blau-rgb) .1), inset 0 0 0 1px rgba(var(--weiss-rgb) .05);
}

.nl-person-titel {
    display: flex;
    align-items: center;
    height: 15%;
    font-size: var(--font-size-xxxl);
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--blau);
    text-shadow: 0 0 5px rgba(var(--blau-rgb), .6), 0 0 20px rgba(var(--blau-rgb), .35);
}

.nl-person-inhalt {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    justify-content: space-around;
    gap: 10px;
}

.nl-person-text-wrapper {
    background: rgba(var(--blau-rgb), .1);
    border: 2px solid var(--blau);
    box-shadow: 0 10px 30px rgba(var(--blau-rgb), .4);
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(135deg, var(--hintergrund0) 0%, color-mix(in srgb, var(--blau), transparent 90%) 100%);
    transition: var(--transition);
}

    .nl-person-text-wrapper:hover {
        transform: translateY(-4px) !important;
    }

.nl-person-text {
    padding: 10px;
}

.nl-person-pfeil {
    content: '';
    display: flex;
    background-color: var(--blau);
}

@media (max-width: 1301px) {
    .nl-person-container, .nl-person-inhalt {
        flex-direction: column;
        justify-content: center;
    }

    .nl-person-container {
    }

    .nl-person-inhalt {
    }

    .nl-person-buttons-wrapper {
        flex-direction: column;
        justify-content: space-between;
        width: 60px;
        padding-right: 5px;
    }

        .nl-person-buttons-wrapper button {
            height: 30%;
        }

    .nl-person-text-wrapper {
        margin-top: 10px;
    }

    .nl-person-titel, .nl-ueberuns-container {
        overflow: hidden;
    }

    .nl-person-pfeil {
        height: 100%;
        width: 2px;
    }

    .nl-person-indicator-wrapper {
        flex-direction: row;
        width: 100%;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .nl-person-indicator-pfeil {
        height: 2px;
        width: 40px;
        min-width: 40px;
        margin: auto 0px auto 0px;
    }

    .nl-person-indicator-text-wrapper {
        display: none;
    }
}

@media (min-width: 1302px) {
    .nl-person-container, .nl-person-inhalt {
        flex-direction: row;
        justify-content: space-around;
    }

    .nl-person-container {
        height: 120%;
    }

    .nl-person-inhalt {
        height: 85%;
    }

    .nl-person-buttons-wrapper {
        flex-direction: row;
        justify-content: center;
        column-gap: 5px;
        padding-bottom: 5px;
    }

    .nl-person-text-wrapper {
        margin-left: 20px;
    }

    .nl-person-pfeil {
        height: 2px;
        width: 100%;
    }

    .nl-person-indicator-wrapper {
        flex-direction: column;
        min-width: 330px;
        width: 330px;
        margin-right: 20px;
        height: 100%;
        z-index: 1;
        box-sizing: border-box;
    }

    .nl-person-indicator-pfeil {
        height: 60px;
        min-height: 60px;
        width: 2px;
        margin-left: 52px;
    }

    .nl-person-indicator-text-wrapper {
        display: block;
    }
}

.nl-person-bild-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(var(--blau-rgb), .6);
    box-shadow: 0 10px 30px rgba(var(--blau-rgb), .4), 0 0 0 2px rgba(var(--blau-rgb), .4);
    transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
    will-change: transform;
}

@media (max-width: 1300px) and (max-height: 600px), (min-width: 1301px) and (max-height: 600px), (max-width: 1300px) and (min-height: 601px) {
    .nl-person-bild-wrapper {
        height: 300px;
        min-height: 300px;
        width: 300px;
        min-width: 300px;
    }
}

@media (max-width: 1300px) and (max-height: 700px) {
    .nl-person-bild-wrapper {
        height: 150px;
        min-height: 150px;
        width: 150px;
        min-width: 150px;
    }
}

@media (max-width: 1300px) and (min-height: 701px) and (max-height: 850px) {
    .nl-person-bild-wrapper {
        height: 200px;
        min-height: 200px;
        width: 200px;
        min-width: 200px;
    }
}

@media (min-width: 1301px) and (max-width: 1500px) and (min-height: 601px) and (max-height: 900px), (min-width: 1300px) and (max-width: 1500px) and (min-height: 601px), (min-height: 601px) and (max-height: 900px) and (min-width: 1301px) {
    .nl-person-bild-wrapper {
        height: 400px !important;
        min-height: 400px !important;
        width: 400px !important;
        min-width: 400px !important;
    }
}

@media (min-width: 1501px) and (max-width: 2000px) and (min-height: 901px) {
    .nl-person-bild-wrapper {
        height: 600px;
        min-height: 600px;
        width: 600px;
        min-width: 600px;
    }
}

@media (min-width: 2001px) {
    .nl-person-bild-wrapper {
        height: 750px;
        min-height: 750px;
        width: 750px;
        min-width: 750px;
    }
}

.nl-person-bild-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 60px rgba(var(--blau-rgb), .6), 0 0 0 3px rgba(var(--blau-rgb), .8);
}

.nl-person-bild-wrapper::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient( 60deg, transparent 40%, rgba(var(--weiss-rgb) .2) 50%, transparent 60% );
    transform: translateX(-100%);
    transition: transform .8s ease;
    pointer-events: none;
}

.nl-person-bild-wrapper:hover::before {
    transform: translateX(100%);
}


.nl-person-bild-kreis {
    display: flex;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

    .nl-person-bild-kreis:before {
        content: "";
        border-top: 4px solid var(--blau);
        width: 100%;
        height: 100%;
        position: fixed;
        border-radius: 50%;
        animation: rotating 6s linear infinite;
    }

    .nl-person-bild-kreis:before {
        content: "";
        border-bottom: 4px solid var(--blau);
        width: 100%;
        height: 100%;
        position: fixed;
        border-radius: 50%;
        animation: rotating 6s linear infinite;
    }

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.nl-person-bild {
    width: 100%;
    height: 100%;
    transition: .4s;
}

.nl-person-indicator-wrapper {
    display: flex;
    overflow: auto;
    scroll-behavior: smooth;
}

    .nl-person-indicator-wrapper::-webkit-scrollbar {
        display: none;
    }

.nl-person-indicator-pfeil {
    content: '';
    display: flex;
    background-color: var(--blau);
}

.nl-person-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    transition: var(--transition);
    will-change: transform;
    border: 1px solid transparent;
}

    .nl-person-indicator.aktiv, .nl-person-indicator:hover {
        box-shadow: 0 2px 10px 0 var(--blau);
        border: 1px solid var(--blau);
        border-radius: var(--border-radius);
        cursor: pointer;
    }


    .nl-person-indicator:hover {
        transform: translateY(-2px) !important;
    }

        .nl-person-indicator:hover .nl-person-indicator-thumb {
            transform: scale(1.1, 1.1);
        }

.nl-person-indicator-thumb-wrapper {
    width: 100px;
    min-width: 100px;
    height: 100px;
    min-height: 100px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 2px 10px 0 var(--blau);
    border: 1px solid rgba(var(--blau-rgb) 0.9);
    pointer-events: none;
}

.nl-person-indicator-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: .4s;
}

.nl-person-indicator-text-wrapper {
    width: 100%;
}

.nl-person-indicator-text {
    color: var(--blau);
}

    .nl-person-indicator.aktiv .nl-person-indicator-text, .nl-person-indicator-text:hover {
        color: var(--blauHover);
    }

/* #endregion */

/* #region Carousel Slider */
/*--------------------------------------------------------------------- */
/*------------------------------ Carousel ----------------------------- */
/*--------------------------------------------------------------------- */
.nl-slider-container {
    display: flex;
    margin: auto 0px;
    flex-direction: column;
    margin: 2% 5%;
    gap: 1%;
    justify-content: center;
}

.carousel {
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    position: relative;
}

.carousel-item {
    height: 60vh;
    position: relative;
}

    .carousel-item img {
        height: 100%;
        object-fit: cover;
        filter: brightness(70%);
        transition: transform 6s ease;
    }

    .carousel-item.active img {
        transform: scale(1.05);
    }

/* Smoothere Fade Animation */
.carousel-fade .carousel-item {
    transition: opacity 0.8s ease-in-out !important;
}

/* ===== Titel ===== */
.nl-slider-titel {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(15px);
    background: rgba(var(--schwarz-rgb) 0.15);
    padding: 20px 50px;
    border-radius: var(--border-radius);
    color: var(--weiss);
    font-size: var(--font-size-xl);
    text-align: center;
    box-shadow: 0 10px 30px rgba(var(--box-shadow) 0.4);
}

/* ===== Links/Rechts Buttons ===== */
.carousel-control-prev,
.carousel-control-next, 
.carousel-control-prev:hover,
.carousel-control-next:hover {
    width: auto;
    opacity: 1;
}

.nl-slider-button {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(var(--schwarz-rgb) 0.15);
    backdrop-filter: var(--backdrop-filter);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(var(--box-shadow) 0.5);
    transition: var(--transition);
}

.carousel-control-prev {
    left: 20px;
}

.carousel-control-next {
    right: 20px;
}

@media(max-width: 768px) {
    .carousel-control-prev, .carousel-control-next {
        display: none;
    }
}

.nl-slider-button {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    position: relative;
}

    /* Pfeil */
    .nl-slider-button::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        border-left: 3px solid var(--weiss);
        border-bottom: 3px solid var(--weiss);
        transform: translate(-30%, -50%) rotate(45deg);
        transition: var(--transition);
    }

    /* Weiter Button drehen */
    .carousel-control-next .nl-slider-button::before {
        transform: translate(-70%, -50%) rotate(-135deg);
    }

    .nl-slider-button:hover, .carousel-control-prev:hover .nl-slider-button, .carousel-control-next:hover .nl-slider-button {
        background: linear-gradient(45deg, var(--blau), var(--lila));
        transform: translateY(-5px);
        box-shadow: 0 0 25px rgba(var(--blau-rgb) 0.8);
    }

        /* Pfeil bewegt sich in Fahrtrichtung */
        .carousel-control-prev:hover .nl-slider-button::before {
            transform: translate(-50%, -50%) rotate(405deg);
        }

        .carousel-control-next:hover .nl-slider-button::before {
            transform: translate(-50%, -50%) rotate(225deg);
        }

/* ===== Bilder wrapper ===== */
.nl-slider-bilder-wrapper {
    display: flex;
    width: 100%;
    gap: 20px;
    padding: 30px;
    overflow: auto;
    justify-content: space-evenly;
}

@media(max-width: 768px) {
    .nl-slider-bilder-wrapper::-webkit-scrollbar {
        display: none;
    }
}

.nl-slider-bild-wrapper {
    display: flex;
    overflow: auto;
    flex-direction: column;
    overflow: visible;
}

.nl-slider-bild {
    min-width: 200px;
    width: 200px;
    min-height: 100px;
    height: 100px;
    cursor: pointer;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

    .nl-slider-bild:hover, .nl-slider-bild.aktiv-bild {
        box-shadow: 0 10px 30px rgba(var(--blau-rgb) 0.25), 0 0 0 1px rgba(var(--weiss-rgb) 0.08) inset;
    }

    .nl-slider-bild::after {
        content: "";
        position: absolute;
        inset: -50%;
        background: linear-gradient( 60deg, transparent 40%, rgba(var(--weiss-rgb) 0.25) 50%, transparent 60% );
        transform: translateX(-100%);
        transition: transform 0.8s ease;
        z-index: 100;
    }

        .nl-slider-bild:hover::after {
            transform: translateX(100%);
        }

    .nl-slider-bild img {
        transition: var(--transition);
        border-radius: var(--border-radius);
        opacity: 0.6;
    }

    .nl-slider-bild:hover img, .nl-slider-bild.aktiv-bild img {
        opacity: 1;
        transform: scale(1.02);
    }

    .nl-slider-bild img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.nl-slider-buttons-wrapper {
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
    padding-bottom: 5px;
}

    .nl-slider-buttons-wrapper button {
        height: 90%;
        width: 60px;
    }

/* #endregion */

/*#region LadeAnzeige */
#nlLadeAnzeige {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--hintergrund-2-90);
}

.nl-show {
    display: display;
}

.nl-hide {
    display: none;
}

.nl-ladeAnzeige {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 75px;
    width: 75px;
    box-sizing: border-box;
}

    .nl-ladeAnzeige .loader {
        position: absolute;
        border: 2px solid var(--hintergrund-2-90);
    }

        .nl-ladeAnzeige .loader.loader1 {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--hintergrund-2-90);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--hintergrund-2-90);
            border-left: 2px solid var(--blauHover);
            border-top: 2px solid var(--blauHover);
            animation: animate1 2.5s linear infinite;
        }

        .nl-ladeAnzeige .loader.loader2 {
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            background: var(--hintergrund-2-90);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--hintergrund-2-90);
            border-right: 2px solid var(--rot);
            border-bottom: 2px solid var(--rot);
            animation: animate2 2.5s linear infinite;
        }

        .nl-ladeAnzeige .loader .circle {
            position: absolute;
            top: calc(50% - 1px);
            left: 50%;
            width: 50%;
            height: 2px;
            transform-origin: left;
        }

            .nl-ladeAnzeige .loader .circle::before {
                content: '';
                position: absolute;
                height: 12px;
                width: 12px;
                top: -4px;
                right: -6px;
                border-radius: 50%;
            }

        .nl-ladeAnzeige .loader.loader1 .circle {
            transform: rotate(-45deg);
        }

        .nl-ladeAnzeige .loader.loader2 .circle {
            transform: rotate(-45deg);
        }

        .nl-ladeAnzeige .loader.loader1 .circle::before {
            background: var(--blau);
            box-shadow: 0 0 20px var(--blau), 0 0 40px var(--blau), 0 0 60px var(--blau), 0 0 80px var(--blau), 0 0 100px var(--blau), 0 0 0 5px rgba(var(--blau-rgb) .1);
        }

        .nl-ladeAnzeige .loader.loader2 .circle::before {
            background: var(--rot);
            box-shadow: 0 0 20px var(--rot), 0 0 40px var(--rot), 0 0 60px var(--rot), 0 0 80px var(--rot), 0 0 100px var(--rot), 0 0 0 5px rgba(var(--rot-rgb) .1);
        }

@keyframes animate1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}
/*#endregion LadeAnzeige*/

/*#region Sidebar*/
.nl-sidebar-toggle-btn {
    margin: auto 0px;
    width: 46px;
    height: 31px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .nl-sidebar-toggle-btn:hover .nl-sidebar-toggle-icon:before {
        top: -11px;
    }

    .nl-sidebar-toggle-btn:hover .nl-sidebar-toggle-icon:after {
        top: 11px;
    }

    .nl-sidebar-toggle-btn.show {
        width: 30px;
        margin-right: 8px;
        margin-left: 8px;
        height: 31px;
    }

        .nl-sidebar-toggle-btn.show .nl-sidebar-toggle-icon {
            -webkit-transform: rotate(180deg);
            background-color: transparent;
            left: 30px;
        }

            .nl-sidebar-toggle-btn.show .nl-sidebar-toggle-icon:before {
                -webkit-transform: rotate(45deg);
                top: 0;
            }

            .nl-sidebar-toggle-btn.show .nl-sidebar-toggle-icon:after {
                -webkit-transform: rotate(-45deg);
                top: 0;
            }

        .nl-sidebar-toggle-btn.show:hover .nl-sidebar-toggle-icon:before {
            top: 2px;
        }

        .nl-sidebar-toggle-btn.show:hover .nl-sidebar-toggle-icon:after {
            top: 2px;
        }

.nl-sidebar-toggle-icon {
    -webkit-transition: all 0.25s;
    position: absolute;
    width: 30px;
    height: 2px;
    border-radius: 1px;
    left: 15px;
    background-color: var(--grau-text);
}

    .nl-sidebar-toggle-icon:before, .nl-sidebar-toggle-icon:after {
        -webkit-transition: all 0.25s;
        width: 30px;
        border-radius: 1px;
        height: 2px;
        left: 10px;
        background: var(--grau-text);
        position: absolute;
        content: '';
    }

    .nl-sidebar-toggle-icon:before {
        top: -9px;
    }

    .nl-sidebar-toggle-icon:after {
        top: 9px;
    }

.nl-sidebar {
    position: fixed;
    inset: 0px;
    top: 78px;
    transition: 0.5s;
    display: fixed;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width: 75px;
}

@media screen and (max-width: 991px) {
    .nl-sidebar {
        width: 0px;
    }
}

.nl-sidebar.show {
    width: 300px;
    display: block;
}

.nl-sidebar ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: calc(100vh - 88px);
    /*overflow-y: auto;*/
    /*min-height: fit-content;*/
    /* Scrollbar */
    /*    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;
    flex-grow: 1;
    max-height: calc(100vh - 90px);*/
}

    .nl-sidebar ul li a {
        background-color: rgba(var(--spezfarbe) 1);
        box-shadow: 0 2px 5px 0 rgb(var(--box-shadow) / 20%), 0 2px 10px 0 rgb(var(--box-shadow) / 10%);
        list-style: none;
        position: relative;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        transition: 0.5s;
        border-radius: 0px 5rem 5rem 0px;
    }

        .nl-sidebar ul li a:hover {
            box-shadow: 0 4px 10px 0 rgb(var(--box-shadow) / 20%), 0 4px 20px 0 rgb(var(--box-shadow) / 10%);
            transition: .9s;
            border-radius: 5rem;
            transform: translateX(10px);
            cursor: pointer;
        }

        .nl-sidebar ul li a.aktiv {
            transform: translateX(10px);
            border-radius: 5rem;
            transition: .9s;
        }

.nl-sidebar.show ul li a.aktiv {
    transform: translateX(10px);
    justify-content: flex-start;
}

.nl-sidebar ul li a::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    filter: blur(8px);
    opacity: 0.3;
    transition: 0.5s;
    background: rgba(var(--spezfarbe) 1);
}

.nl-sidebar ul li a {
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: flex-start;
    text-align: center;
    align-items: center;
    width: 100%;
}

    .nl-sidebar ul li a .icon {
        display: flex;
        min-width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        font-size: var(--font-size-gross);
        transition: 0.5s;
        color: var(--weiss);
        margin-left: 2px;
        align-items: center;
        justify-content: space-around;
        margin-left: 17px;
    }

@media screen and (max-width: 991px) {
    .nl-sidebar ul li a .icon {
        display: none;
    }
}

.nl-sidebar.show ul li a .icon {
    display: flex;
    margin-left: 0px;
}

.nl-sidebar ul li a.aktiv .icon {
    color: var(--weiss);
    background-color: rgba(var(--spezfarbe) 1);
    box-shadow: 0 4px 10px 0 rgb(var(--box-shadow) / 20%), 0 4px 20px 0 rgb(var(--box-shadow) / 10%);
}

.nl-sidebar.show ul li a.aktiv .icon {
    margin-left: 10px;
    display: flex;
}

.nl-sidebar ul li a.aktiv .icon::before {
    opacity: 0.5;
}

.nl-sidebar ul li a .text {
    font-size: var(--font-size-normal);
    position: relative;
    padding: 0 15px;
    height: 60px;
    align-items: center;
    color: var(--weiss);
    display: none;
}

.nl-sidebar.show ul li a .text {
    display: flex;
}

.nl-sidebar ul li a.aktiv .text {
    color: var(--weiss);
}
/*#endregion*/

/*#region UploadFile */
.nl-dz {
    margin: 0.1rem 1rem;
    width: auto;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--blau);
    border: 2px dashed var(--blau);
    border-radius: 10px;
}

    .nl-dz:hover.nl-dz-default {
        border: 2px dashed var(--blauHover);
        color: var(--blauHover);
        cursor: pointer;
    }

.nl-dz-disabled {
    border: 2px dashed var(--grau-border);
    cursor: default;
    background: var(--grau-bg);
    color: var(--grau-text)
}

.nl-dz-success {
    border: 2px dashed var(--gruen);
    color: var(--gruen);
    cursor: pointer;
}

.nl-dz:hover.nl-dz-success {
    border: 2px dashed var(--gruenHover);
    color: var(--gruenHover);
    cursor: pointer;
}

.nl-dz-text-error {
    display: none;
}

.nl-dz-error {
    border: 2px dashed var(--rot);
    color: var(--rot);
    cursor: pointer;
}

    .nl-dz-error .nl-dz-text {
        display: none;
    }

    .nl-dz-error .nl-dz-text-error {
        display: block;
    }


.nl-dz:hover.nl-dz-error {
    border: 2px dashed var(--rotHover);
    color: var(--rotHover);
    cursor: pointer;
}

.nl-dz.nl-dz-default.nl-dz-over, .nl-dz.nl-dz-success.nl-dz-over, .nl-dz.nl-dz-error.nl-dz-over {
    border-style: solid;
}

.nl-dz-input {
    display: none;
}

.nl-dz-thumb {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: transparent;
    background-size: cover;
    position: relative;
}

    .nl-dz-thumb::after {
        content: attr(data-label);
        position: absolute;
        bottom: -20px;
        left: -30px;
        right: -30px;
        padding: 0px;
        color: var(--hintergrund-2-90);
        background: var(--grau-bg);
        font-size: var(--font-size-klein);
        text-align: center;
        border-radius: 10px;
        box-shadow: 0 2px 15px -3px rgb(var(--box-shadow) / 7%), 0 10px 20px -2px rgb(var(--box-shadow) / 4%);
    }
/*#endregion*/

/*#region Zwischensequenz*/
/*--------------------------------------------------------------------- */
/*------------------------ Zwischensequenz ---------------------------- */
/*--------------------------------------------------------------------- */
.nl-zwischen-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
    background: var(--hintergrund-blau);
    display: flex;
    flex-direction: column;
    margin: 10% 0px;
}

.nl-zwischen-wellen-oben {
    display: block;
    width: 100%;
    height: 60px;
    z-index: 5;
    position: relative;
    background-color: var(--hintergrund0);
}

.nl-zwischen-wellen-unten {
    display: block;
    width: 100%;
    height: 60px;
    z-index: 5;
    position: relative;
}

.welle1 use {
    animation: bewegung1 10s linear infinite;
    animation-delay: -2s;
}

.welle2 use {
    animation: bewegung2 8s linear infinite;
    animation-delay: -2s;
}

.welle3 use {
    animation: bewegung3 6s linear infinite;
    animation-delay: -2s;
}

@keyframes bewegung1 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@keyframes bewegung2 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@keyframes bewegung3 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

.nl-zwischen-wrapper .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@keyframes up-down {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

.nl-zwischen-text-wrapper {
    display: flex;
    margin: 10px 5%;
    gap: 30px;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

@media (max-width: 991px) {
    .nl-zwischen-text-wrapper {
        flex-direction: column-reverse;
    }
}
/*#endregion*/

/*#region Vers des Tages*/
/*--------------------------------------------------------------------- */
/*---------------------------- Anpassungen ---------------------------- */
/*--------------------------------------------------------------------- */
.dailyVerses.bibleVerse {
    font-size: calc(1.325rem + .9vw);
    text-align: center;
    font-weight: 700;
    position: relative;
    color: var(--grau-text);
}

    .dailyVerses.bibleVerse:before,
    .dailyVerses.bibleVerse:after {
        content: "";
        width: 50px;
        height: 2px;
        background: var(--blau);
        display: inline-block;
    }

    .dailyVerses.bibleVerse:before {
        margin: 0 15px 10px 0;
    }

    .dailyVerses.bibleVerse:after {
        margin: 0 0 10px 15px;
    }

.dailyVerses.bibleText {
    font-size: calc(1.3rem + .6vw);
}

@media (min-width: 1200px){
    .dailyVerses.bibleText {
        font-size: var(--font-size-xl);
    }

    .dailyVerses.bibleVerse {
        font-size: var(--font-size-xxl);
    }
}
/*#endregion*/

/*#region Captcha*/
/*--------------------------------------------------------------------- */
/*------------------------------ Captcha ------------------------------ */
/*--------------------------------------------------------------------- */
.nl-captcha-wrapper {
    display: flex;
    width: 100%;
    flex-direction: row;
}

.nl-captcha-head-wrapper {
    flex-direction: row;
    display: flex;
    width: auto;
}

.nl-captcha-aktualisieren {
    width: 75px;
}

.nl-captcha-bild {
    width: 100px;
    height: 45px;
    border: 1px solid var(--grau-border);
    border-radius: 4px;
    display: flex;
    justify-content: center;
}

.nl-captcha-input-wrapper {
    width: 100%;
}

.nl-captcha-input {
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .nl-captcha-wrapper {
        flex-direction: column;
    }

    .nl-captcha-head-wrapper {
        margin-bottom: 5px;
    }

    .nl-captcha-aktualisieren {
        width: 30%;
    }

    .nl-captcha-bild {
        width: 70%;
    }
}
/*#endregion*/

/*#region Lightbox*/
/*--------------------------------------------------------------------- */
/*------------------------------ Lightbox ----------------------------- */
/*--------------------------------------------------------------------- */
#ModalBild .modal {
    
}

#ModalBild .modal-dialog {
    /*height: calc(100% - 60px) !important;*/
    max-width: 100%;
    height: inherit;
    margin: 0px;
}

.nl-lightbox {
    display: flex;
    /*min-height: calc(100% - 1rem);*/
    /*max-height: 100%;*/
    justify-content: center;
    align-items: center;
    padding: 1%;
    height: inherit;
}

.nl-lightbox-bild {
    border-radius: 2rem;
    /*max-width: 100%;*/
    max-width: 100%;
    max-height: 100vh; /* Als Fallback für andere Browser */
    max-height: -webkit-fill-available; /* Für WebKit-basierte Browser */
    max-height: -moz-available; /* Für ältere Versionen von Firefox */
    max-height: fill-available; /* Für neuere Versionen von Firefox */
}
/*#endregion*/

/*#region Tabs */
/*--------------------------------------------------------------------- */
/*------------------------------ Tabs Titel --------------------------- */
/*--------------------------------------------------------------------- */

.nl-tab-container {
    margin: 2% 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nl-tab-titel-container {
    box-shadow: 0 2px 15px -3px rgb(var(--box-shadow) / 7%), 0 10px 20px -2px rgb(var(--box-shadow) / 4%);
    border-radius: 2rem;
    background-color: var(--hintergrund-2-90);
    padding-top: 10px;
    position: absolute;
    width: 90%;
}

    .nl-tab-titel-container:hover {
        box-shadow: 0 2px 20px -3px rgb(var(--box-shadow) / 7%), 0 10px 25px -2px rgb(var(--box-shadow) / 4%);
    }

.nl-tab-button-container {
    overflow: hidden;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    max-width: 90%;
    margin: 50px 50px 0px 50px;
}

.nl-tab-button-wrapper {
    background-color: transparent;
    display: flex;
    flex-direction: row;
}

.nl-tab-button-container-zuruck, .nl-tab-button-container-vor {
    background-color: var(--blau);
    position: absolute;
    margin-top: 20px;
    width: 50px;
    height: 150px;
    border: 1px solid var(--grau-border);
    z-index: 2;
    transition: transform 0.1s;
}

    .nl-tab-button-container-zuruck:hover, .nl-tab-button-container-vor:hover {
        background-color: var(--blauHover);
        cursor: pointer;
    }

    .nl-tab-button-container-zuruck svg, .nl-tab-button-container-vor svg {
        transition: var(--transition);
        transform: scale(1, 1);
        color: var(--hintergrund0);
    }

    .nl-tab-button-container-zuruck:hover svg, .nl-tab-button-container-vor:hover svg {
        transform: scale(1.25, 1.25);
    }

.nl-tab-button-container-zuruck {
    left: calc(9.5% - 50px);
    border-radius: 20px 0px 0px 20px;
}

.nl-tab-button-container-vor {
    right: calc(9.5% - 50px);
    border-radius: 0px 20px 20px 0px;
}

.nl-tab-button {
    cursor: pointer;
    transition: var(--transition);
    width: 200px;
    min-width: 200px;
    height: 150px;
    border: 1px solid var(--grau-border);
    background-color: var(--hintergrund1);
    display: flex;
    justify-content: center;
    flex-direction: column;
    filter: grayscale(100%);
    margin: 20px 0px;
    z-index: 1;
    color: var(--grau-text);
    box-shadow: 0 2px 15px -3px rgb(var(--box-shadow) / 7%), 0 10px 20px -2px rgb(var(--box-shadow) / 4%);
}

    .nl-tab-button:hover, .nl-tab-button.aktiv {
        height: 190px;
        margin: 0px 0px;
        filter: none;
        color: var(--blau);
    }

    .nl-tab-button.aktiv {
        background-color: var(--hintergrund0);
        border-bottom: 0px;
    }

.nl-tab-button-icon {
    width: auto;
    max-height: 106px;
    height: 106px;
}

    .nl-tab-button img {
        background-image: linear-gradient(to bottom, var(--hintergrund0), var(--hintergrund-2-80), var(--hintergrund-2-80), var(--hintergrund0));
    }

.nl-tab-button-text {
    text-align: center;
    padding: 2px 0px;
}

@media (max-width: 991px) {
    .nl-tab-titel-container {
        width: 100%;
    }
}

/*--------------------------------------------------------------------- */
/*------------------------- Tabs Media Inhalt ------------------------- */
/*--------------------------------------------------------------------- */
.nl-tab-media-inhalt {
    display: flex;
    width: 90%;
    height: 70%;
    align-items: center;
    flex-direction: column;
}

.nl-tab-media-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0px;
    overflow: hidden;
    width: 100%;
    transition: var(--transition);
    height: 0px;
}

    .nl-tab-media-container.aktiv {
        border: 1px solid var(--grau-border);
        border-radius: 10px;
        height: auto;
        flex-direction: column;
    }

.nl-tab-media-accordion {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.nl-tab-media-accordion-titel {
    transition: var(--transition);
}

.nl-tab-media-accordion-titel-img-wrapper {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    display: flex;
}

@media (max-width: 767px) {
    .nl-tab-media-accordion-titel-img-wrapper {
        width: 60px;
        min-width: 60px;
    }
}

@media (min-width: 768px) {
    .nl-tab-media-accordion-titel-img-wrapper {
        width: 80px;
        min-width: 80px;
    }
}

.nl-tab-media-accordion-titel-img {
    height: 40px;
    max-height: 40px;
    width: 40px;
    max-width: 40px;
    transform: scale(1, 1);
    transition: var(--transition);
    filter: invert(var(--filter));
}

    .nl-tab-media-accordion-titel:hover .nl-tab-media-accordion-titel-img {
        transform: scale(0.9, 0.9);
    }

.nl-tab-media-accordion-titel-text {
    margin: 0px !important;
    transition: var(--transition);
}

    .nl-tab-media-accordion-titel:hover .nl-tab-media-accordion-titel-text {
        padding-left: 30px;
    }

.nl-tab-media-accordion-titel-helptext {
    font-size: var(--font-size-normal);
    color: var(--grau-helptext);
}

.nl-tab-media-accordion-inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-direction: row;
    padding: 10px 0px;
}

@media (max-width: 1099px) {
    .nl-tab-media-accordion-inhalt {
        flex-direction: column;
        row-gap: 10px;
    }
}

@media (min-width: 1100px) {
    .nl-tab-media-accordion-inhalt {
        flex-direction: row;
    }
}

.nl-tab-media-block-animation {
    display: block;
    height: 300px;
    min-height: 300px;
    width: 250px;
    min-width: 250px;
}

.nl-tab-media-block-buttons-wrapper {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 3;
    top: 70px;
    right: 3px;
    left: 3px;
    transition: var(--transition);
}

.nl-tab-media-block {
    position: absolute;
    width: inherit;
    min-width: inherit;
    height: inherit;
    min-height: inherit;
    border: 1px solid var(--grau-border);
    margin: auto;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 40px;
    transition: var(--transition);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 15px -3px rgb(var(--box-shadow) / 7%), 0 10px 20px -2px rgb(var(--box-shadow) / 4%);
    z-index: 1;
}

    .nl-tab-media-block:hover {
        border-bottom-left-radius: 0px;
        border-top-right-radius: 0px;
        cursor: pointer;
        text-decoration: none;
        box-shadow: 0 2px 20px -3px rgb(var(--box-shadow) / 7%), 0 10px 25px -2px rgb(var(--box-shadow) / 4%);
    }

.nl-tab-media-block-img {
    width: 100%;
    height: 80%;
    display: flex;
    padding: 20px;
    justify-content: center;
    transform: scale(1, 1);
    transition: var(--transition);
    z-index: 1;
}

.nl-tab-media-block-randlos {
    padding: 0px;
    transform: scale(1.1, 1.1) !important;
}

    .nl-tab-media-block:hover .nl-tab-media-block-randlos {
        transform: scale(1.0, 1.0) !important;
    }

.nl-tab-media-block-status-wrapper {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 5px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.nl-tab-media-block-status {
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 2px 15px -3px rgb(var(--box-shadow) / 7%), 0 10px 20px -2px rgb(var(--box-shadow) / 4%);
    background-color: var(--hintergrund-2-80);
    transition: var(--transition);
    transform: translateY(0);
}

    .nl-tab-media-block:hover .nl-tab-media-block-status {
        box-shadow: 0 2px 20px -3px rgb(var(--box-shadow) / 7%), 0 10px 25px -2px rgb(var(--box-shadow) / 4%);
        transform: translateY(5px);
    }

.nl-tab-media-block-icon {
    height: auto;
    display: flex;
    padding: 20px;
    transform: scale(1, 1);
    transition: var(--transition);
    color: var(--blau);
}

    .nl-tab-media-block:hover .nl-tab-media-block-img, .nl-tab-media-block:hover .nl-tab-media-block-icon {
        transform: scale(0.9, 0.9);
    }

.nl-tab-media-block-titel {
    width: 100%;
    height: 20%;
    position: absolute;
    background-color: var(--blau);
    color: var(--weiss);
    display: flex;
    align-items: center;
    padding-left: 20px;
    z-index: 2;
    transition: var(--transition);
}

    .nl-tab-media-block:hover .nl-tab-media-block-titel {
        padding-left: 30px;
    }

.nl-tab-media-block-text-wrapper {
    width: inherit;
    position: absolute;
    align-items: end;
    margin-right: 3px;
    height: inherit;
    display: flex;
    transform: scale(0, 0);
    transition: var(--transition);
    z-index: 3;
    padding: 5px;
}

    .nl-tab-media-block:hover .nl-tab-media-block-text-wrapper {
        transform: scale(1, 1);
    }

.nl-tab-media-block-text-wrapper img, .nl-tab-media-block-text-wrapper i {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 5px;
    bottom: 5px;
}

.nl-tab-media-block-text {
    width: 100%;
    max-height: 75%;
    overflow-y: auto;
    background: var(--hintergrund-2-90);
    border-radius: 5px 5px 0px 0px;
    margin-bottom: 25%;
    margin-right: 2px;
    padding: 5px;
    color: var(--grau-text);
}

/*#endregion*/

/*#region Bootstrap Komponete */
/*--------------------------------------------------------------------- */
/*----------------------- Bootstrap Einstellung ----------------------- */
/*--------------------------------------------------------------------- */
.accordion-item {
    background-color: transparent !important;
}

.accordion-button {
    background-color: transparent !important;
}

    .accordion-button:hover {
        background-color: var(--hintergrund1) !important;
    }

.accordion-button:not(.collapsed) {
    background-color: var(--hintergrund1) !important;
}

.accordion-flush {
    border-top: 1px solid var(--grau-border-boots);
    border-bottom: 1px solid var(--grau-border-boots);
}
/*#endregion*/

/*#region Profil */
/*--------------------------------------------------------------------- */
/*----------------------- Profil Box Einstellung ---------------------- */
/*--------------------------------------------------------------------- */
.nl-profil-liste-container {
    max-height: 450px;
    overflow-y: auto;
}

/*#endregion */

/*#region Logbuch */
/*--------------------------------------------------------------------- */
/*----------------------- Logbuch Box Einstellung ---------------------- */
/*--------------------------------------------------------------------- */
.nl-tab-klein {
    display: flex;
    column-gap: 20px;
    row-gap: 20px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex-direction: row;
    padding-bottom: 30px;
}

.nl-tab-klein-block-animation {
    width: 210px;
    min-width: 210px;
    height: 150px;
    min-height: 150px;
}

.nl-tab-klein-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: inherit;
    min-width: inherit;
    height: inherit;
    min-height: inherit;
    border-radius: 40px;
    transition: var(--transition);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 15px -3px rgba(var(--spezfarbekleinBox) 0.2), 0 10px 20px -2px rgba(var(--spezfarbekleinBox) 0.2) !important;
    z-index: 1;
    padding: 10px;
    border: 1px solid rgba(var(--spezfarbekleinBox) 1);
}

    .nl-tab-klein-block:hover {
        border-radius: 0px;
        cursor: pointer;
        text-decoration: none;
        box-shadow: 0 2px 15px -3px rgba(var(--spezfarbekleinBox) 0.2), 0 10px 20px -2px rgba(var(--spezfarbekleinBox) 0.2) !important;
    }

.nl-tab-klein-block-gif {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 5px;
    top: 5px;
    transition: var(--transition);
    transform: scale(0, 0);
}

    .nl-tab-klein-block:hover .nl-tab-klein-block-gif {
        transform: scale(1, 1);
    }

.nl-tab-klein-block-titel {
    transition: var(--transition);
    transform: scale(1, 1);
}

    .nl-tab-klein-block:hover .nl-tab-klein-block-titel {
        transform: scale(0.9, 0.9);
    }

.nl-tab-klein-block-titel-border {
    content: "";
    height: 2px;
    background-color: rgba(var(--spezfarbekleinBox) 1);
    width: 30px;
    transition: var(--transition);
}

    .nl-tab-klein-block:hover .nl-tab-klein-block-titel-border {
        width: 100%;
    }

.nl-tab-klein-block-text {
    padding-top: 20px;
    opacity: 0.7;
}
    .nl-tab-klein-block:hover .nl-tab-klein-block-text {
        opacity: 1;    
    }

.nl-lb-gebet-wrapper {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow: auto;
}

/*#endregion*/

/*#region Planung */
/*--------------------------------------------------------------------- */
/*----------------------------  Einstellung --------------------------- */
/*--------------------------------------------------------------------- */
.liste {
    margin: 2% 5%;
    display: flex;
    row-gap: 20px;
    column-gap: 20px;
    flex-wrap: wrap;
}

.liste .nl-tab-media-block-text-wrapper {
    transform: scale(1, 1);
    text-align: center;
}

    .liste .nl-tab-media-block:hover {
        cursor: default;
    }
/*#endregion*/

/*#region Block*/
/*--------------------------------------------------------------------- */
/*-------------------------------- Block ------------------------------ */
/*--------------------------------------------------------------------- */
/* Container Bereich */
.nl-block-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

    .nl-block-container .voll {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
    }

/* Hero Item Bereich */
.nl-block-hero-container {
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4vw;
    text-align: left;
}

.nl-block-hero-item {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 2rem;
    justify-content: center;
}

    .nl-block-hero-item h2 {
        font-weight: bold;
    }

    .nl-block-hero-item h1, .nl-block-hero-item h2, .nl-block-hero-item h5 {
        margin: 0;
    }

.nl-block-hero-tags {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

    .nl-block-hero-tags p {
        background: radial-gradient(1200px 1200px at 110% -10%, color-mix(in srgb, rgba(var(--farbe) 1), transparent 92%) 0%, transparent 50%) no-repeat, var(--hintergrund0);
        padding: 2rem;
        border-radius: var(--border-radius);
        border: 1px solid rgba(var(--farbe) 0.2);
        transition: var(--transition);
        box-shadow: 0 10px 20px rgba(var(--farbe) 0.1);
        line-height: 2.5;
        position: relative;
    }

        .nl-block-hero-tags p:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(var(--farbe) 0.2);
        }

    .nl-block-hero-tags strong {
        display: block;
        font-size: var(--font-size-normal);
    }

    .nl-block-hero-tags p span {
        display: block;
        font-weight: bold;
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: var(--farbe3);
        padding: 5px 10px;
        transition: var(--transition);
        border-radius: var(--border-radius);
        border: 1px solid rgba(var(--farbe) 0.2);
        transition: var(--transition);
        box-shadow: 0 10px 20px rgba(var(--farbe) 0.1);
        line-height: normal;
    }

    .nl-block-hero-tags p:hover span {
        transform: rotate(-2deg);
        box-shadow: 0 20px 40px rgba(var(--farbe) 0.2);
    }

/* Item Bereich */
.nl-block-item {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 2vw;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(var(--blau-rgb) 0.1);
    position: relative;
    overflow: hidden;
    background: linear-gradient(358deg, rgba(var(--blau-rgb) 0.1) 10%, rgba(var(--hintergrund-3-rgb) 0.01));
    transition: var(--transition);
    gap: 10px;
}

    .nl-block-item.klein {
        align-items: center;
        border: 1px solid rgba(var(--blau-rgb) 0.2);
        gap: 25px;
    }

    .nl-block-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px rgba(var(--blau-rgb) 0.2);
    }

    .nl-block-item::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 0.8vw;
        bottom: 12px;
        width: 3px;
        background: linear-gradient(180deg, rgba(var(--blau-rgb) 0.0), rgba(var(--blau-rgb) 0.50), rgba(var(--gruen-rgb) 0.50), rgba(var(--gruen-rgb) 0.0));
    }

/* Icon Bereich */
.nl-block-icon {
    width: 80px;
    min-width: 80px;
    height: 80px;
    min-height: 80px;
    background: rgba(var(--blau-rgb) 0.4);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xxxl);
    animation: schaukeln 2s ease-in-out infinite;
}

.nl-block-icon-alt {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xxxl);
    transition: var(--transition);
    font-style: normal;
}

.nl-block-item.klein:hover .nl-block-icon-alt {
    transform: rotate(8deg) scale(1.25);
}

@keyframes schaukeln {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Tags Bereich */
.nl-block-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

    .nl-block-tags span {
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        color: var(--weiss);
        background: linear-gradient(135deg, var(--farbe1), var(--farbe3));
        box-shadow: 0 4px 15px var(--farbe1);
        align-content: center;
        transition: var(--transition);
        user-select: none;
    }

        .nl-block-tags span:hover {
            box-shadow: 0 2px 20px -3px var(--farbe1), 0 10px 25px -2px var(--farbe1);
            transform: translateY(-3px);
        }

/* Text Bereich */
.nl-block-text {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.nl-block-text h5 a {
    text-decoration: none;
}

/* Nur Überschrift */
.nl-block-titel {
    display: flex;
    justify-content: center;
    gap: 1vw;
    margin: 4vw 0px 2vw 0px;
    align-items: center;
}

@media (max-width: 1200px) {
    .nl-block-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .nl-block-hero-container {
        grid-template-columns: 100%;
    }
}

@media (max-width: 768px) {
    .nl-block-container {
        grid-template-columns: 1fr;
    }

    .nl-block-item {
        padding: 4vw;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

        .nl-block-item.klein, .nl-block-hero-item, .nl-block-hero-tags {
            width: 90%;
            margin: auto;
        }

        .nl-block-item::before {
            background: linear-gradient(90deg, rgba(var(--blau-rgb) 0.0), rgba(var(--blau-rgb) 0.50), rgba(var(--gruen-rgb) 0.50), rgba(var(--gruen-rgb) 0.0));
            top: 1.8vw;
            left: 25px;
            right: 25px;
            height: 3px;
            width: auto;
        }
    
    .nl-block-tags {
        justify-content: center;
    }
}
/*#endregion*/