:root {
    --global-color-blue-border: #18517A;
    --global-menu-width: 210px;
    --global-menu-colapsed-width: 100px;
    --global-header-height: 0px; /*eigentlich 190*/
    --global-footer-height: 40px; /*eigentlich 100*/
    --global-menu-margin-left: 40px;
    --global-app-content-margin-top: 35px;
    --global-app-content-margin-left: 15px;
    --global-app-content-margin-right: 55px;
    --global-navigation-topmargin: 181px; /*eigentlich 0*/
    --global-navigation-bottommargin: 100px; /*eigentlich 0*/
    /*Telerik*/
    --global-grid-checkbox-column-width: 75px;
    /**/
    --unnamed-character-spacing-0-32: 0.32px;
    --width-telerik-combo-def: 100%;
    --simplefileupload_col1witdh: 55px;
    --simplefileupload_col2witdh: 350px;
    --simplefileupload_col3witdh: auto;
    --default-margin: 20px;
    --default-large-margin: 40px;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding-left: 201px;
    overflow: hidden;
}

main {
    height: 100vh;
    margin-bottom: -40px;
    background-color: #0B5380;
}

    main.with-footer {
        height: calc(100vh-100px) !important;
    }

.logo-elba {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 168px;
}

.logo-vpi {
    position: absolute;
    bottom: 42px;
    left: 60px;
}

    .logo-vpi svg {
        width: 52px;
        height: 52px;
        fill-rule: evenodd;
        clip-rule: evenodd;
        stroke-linejoin: round;
        stroke-miterlimit: 2;
    }

.sidelinks {
    position: absolute;
    bottom: 132px;
    left: 42px;
}

    .sidelinks p.link {
        background-color: transparent;
        margin-top: 20px;
        width: 125px;
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-20) var(--unnamed-font-family-barlow-semi-condensed);
        letter-spacing: var(--unnamed-character-spacing-0-16);
        color: var(--blue-dark);
        text-align: left;
        font: normal normal medium 16px/20px Barlow Semi Condensed;
        letter-spacing: 0.16px;
        color: #004B72;
        cursor: pointer;
    }

        .sidelinks p.link a {
            display: inline-flex; /* macht aus Icon + Text einen flex-Container */
            align-items: center;
            text-decoration: none;
            color: var(--blue-dark);
            max-width: 200px; /* Breite begrenzen, damit Umbruch daneben stattfindet */
        }

            .sidelinks p.link a:hover {
                border-bottom: solid;
                border-bottom-color: var(--blue-dark);
                border-bottom-width: 1px;
            }

            .sidelinks p.link a::before {
                font-family: 'elba-feather-icons-v1';
                font-size: 24px;
                margin-right: 8px; /* etwas Abstand zum Text */
                flex-shrink: 0; /* Icon behält immer seine Breite */
                line-height: 1; /* verhindert, dass Icon zu hoch wird */
            }

            .sidelinks p.link a.login::before {
                content: '\e909';
            }

            .sidelinks p.link a.whatis::before {
                content: '\e882';
            }

            .sidelinks p.link a.back::before {
                content: '\e810';
            }

.logo-vpi svg path.p998 {
    fill: #00988a;
    fill-rule: nonzero;
}

.logo-vpi svg path.pnz {
    fill-rule: nonzero;
}

.logo-superzeichen {
    position: absolute;
    top: 20px;
    right: 75px;
    width: 100px
}

    .logo-superzeichen svg .st0 {
        fill: #49b7a6;
    }

    .logo-superzeichen svg .st1 {
        fill: white;
    }

    .logo-superzeichen svg .st2 {
        fill: #eb5e45;
    }

#content {
    width: 100%;
    height: 100vh;
    background-color: #0B5380;
}

div.welcome {
    position: absolute;
    top: 100px;
    left: 350px;
}

    div.welcome > p {
        White-space: nowrap;
        overflow-wrap: normal;
        margin-top: 0px;
        margin-bottom: 0px;
        color: var(--white);
        text-align: left;
        letter-spacing: var(--unnamed-character-spacing-0-32);
    }

    div.welcome p.welcomeline {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-64)/var(--unnamed-line-spacing-64) var(--unnamed-font-family-barlow);
        text-shadow: 0px 5px 50px #00000029;
    }

    div.welcome p.subline {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-18)/var(--unnamed-line-spacing-22-5) var(--unnamed-font-family-barlow-semi-condensed);
        letter-spacing: var(--unnamed-character-spacing-0-36);
        color: var(--white);
        text-align: left;
        font: normal normal medium 18px/23px Barlow Semi Condensed;
        letter-spacing: 0.36px;
        color: #FFFFFF;
    }

        div.welcome p.subline.first {
            margin-top: 40px;
        }

.modulheader {
    padding-top: 40px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-18)/var(--unnamed-line-spacing-22-5) var(--unnamed-font-family-barlow-semi-condensed);
    letter-spacing: var(--unnamed-character-spacing-0-72);
    color: var(--white);
    text-align: left;
    font: normal normal medium 18px/23px Barlow Semi Condensed;
    letter-spacing: 0.72px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff
}

    .modulheader.largepad {
        padding-top: 80px;
    }


.modulauswahl {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: .25rem 3rem; /* Zeilen- und Spaltenabstände */
    list-style: none;
    padding: 0;
    margin: 0;
}

    .modulauswahl li {
        break-inside: avoid; /* Elemente nicht zwischen Spalten trennen */
        padding-top: 20px;
    }

        .modulauswahl li a {
            text-decoration: none;
            font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-20) var(--unnamed-font-family-barlow-semi-condensed);
            letter-spacing: var(--unnamed-character-spacing-0-32);
            color: var(--white);
            text-align: left;
            font: normal normal medium 16px/20px Barlow Semi Condensed;
            letter-spacing: 0.32px;
            color: #FFFFFF;
        }

            .modulauswahl li a:hover {
                color: var(--unnamed-color-44b8a6);
                color: #44B8A6;
            }

/* Responsiv anpassen */
@media (max-width: 1600px) {
    div.welcome {
        left: 270px;
    }
}

@media (max-width: 1440px) {
    .modulauswahl {
        grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    }
}

@media (max-width: 600px) {
    .modulauswahl {
        grid-template-columns: repeat(1, 1fr); /* 3 Spalten */
    }
}



/*europa*/
#content .europakarte {
    width: 100%;
    height: 100%;
}

    #content .europakarte path {
        stroke: white;
        stroke-opacity: 0.3;
    }

        #content .europakarte path.europa {
            stroke: white;
        }

/*deutschland*/
#content .deutschland path {
    fill: transparent;
    stroke-opacity: 1;
}

#content .europakarte g[data-name*="PIN"] path {
    stroke: transparent;
}

/*Footer*/
footer {
    background-color: yellow;
    height: 40px;
    background-color: #0B5380;
    color: var(--white);
    border-top: 1px solid var(--white);
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    font: var(--unnamed-font-style-normal) normal 500 var(--unnamed-font-size-12)/var(--unnamed-line-spacing-16) var(--unnamed-font-family-barlow);
    letter-spacing: var(--unnamed-character-spacing-0-36);
    color: var(--white);
}

    footer > div {
        padding-top: 10px;
    }

    footer a {
        text-transform: uppercase;
        text-decoration: none;
        color: inherit;
    }

        footer a:hover {
            text-decoration: underline;
            color: var(--white);
        }

.impressum {
    margin-left: auto;
    margin-right: var(--default-margin);
}

.hidden {
    display: none;
}

.copyright {
    margin-left: var(--default-margin);
}

/*einzelne Bundeslaender*/
#content [data-bundesland] {
    cursor: pointer;
}

/*standard*/
#content .modulauswahl a[data-bundesland].selected {
    color: var(--unnamed-color-44b8a6);
    color: #44B8A6;
}

#content path[data-bl],
#content [data-bl] path {
    fill: var(--unnamed-color-44b8a6);
}

    #content path[data-bl].selected,
    #content [data-bl].selected path {
        fill: var(--red-light);
    }

#content:not(.ib) [data-pin].selected path[data-name="Pfad 1047"] {
    fill: var(--white);
}

#content:not(.ib) [data-pin].selected path:not([data-name="Pfad 1047"]) {
    fill: var(--red-light);
}

/*sonderfälle*/
/*zB. SH ausgewählt -- HH Stroke*/
#content.sh #PIN_HH path[data-name="Pfad 1047"],
#content.bb #PIN_BE path[data-name="Pfad 1047"],
#content.rp #PIN_SL path[data-name="Pfad 1047"],
#content.ni #PIN_HB path[data-name="Pfad 1047"] {
    stroke: white;
}

#content:not(.ib) #PIN_IB,
#content:not(.ib) #LOGO_IB {
    display: none;
}

#content.ib #PIN_BE,
#content.ib #PIN_BB,
#content.ib #PIN_BY,
#content.ib #PIN_BW,
#content.ib #PIN_HB,
#content.ib #PIN_HH,
#content.ib #PIN_HE,
#content.ib #PIN_MV,
#content.ib #PIN_NI,
#content.ib #PIN_NW,
#content.ib #PIN_RP,
#content.ib #PIN_SL,
#content.ib #PIN_SN,
#content.ib #PIN_ST,
#content.ib #PIN_SH,
#content.ib #PIN_TH {
    display: none;
}

#content.ib .deutschland path {
    stroke: var(--unnamed-color-44b8a6);
}
/*Datenschutz*/
/*Druck*/
@media print {
    body {
        overflow: unset !important;
    }

    .noprint {
        display: none !important;
    }

    .print-nopad-left {
        padding-left: 5px !important;
    }

    div.nutzdatsch {
        padding-left: 5px;
        padding-right: 5px;
        overflow: visible !important;
        height: 100% !important;
    }
}

.flex-push-right {
    margin-left: auto;
}

div.nutzdatsch {
    background-color: white;
    margin-bottom: 50px;
    padding-bottom: 120px;
    margin-top: 120px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--blue-light);
    overflow: scroll;
}

.nutzdatsch .title {
    font-weight: 800;
    font-size: 32px;
    display: flex;
    flex-direction: row;
    font-family: var(--unnamed-font-family-barlow),'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.nutzdatsch .sub-title {
    font-weight: 500;
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: var(--unnamed-font-family-barlow),'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.nutzdatsch .text {
    margin-bottom: 5px;
    font-family: var(--unnamed-font-family-barlow),'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.nutzdatsch .subtext {
    margin-bottom: 5px;
    margin-left: 25px;
}

.jump2section {
    padding-right: 25px;
    padding-top: 20px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-20) var(--unnamed-font-family-barlow-semi-condensed);
    letter-spacing: var(--unnamed-character-spacing-0-16);
    color: var(--red-light);
    text-align: left;
    vertical-align: bottom;
    cursor: pointer;
}

    .jump2section a {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-20) var(--unnamed-font-family-barlow-semi-condensed);
        letter-spacing: var(--unnamed-character-spacing-0-16);
        color: var(--red-light);
        text-decoration: none;
    }

.nav-link .oi {
}

    .nav-link .oi::before {
        margin-left: 40px;
        margin-right: 11px;
        font-family: 'elba-feather-icons-v1';
        content: '\e894';
    }