.v2 .alt {
    position: fixed;
    z-index: 999;
    top: 112px;
    right: 0;
    padding: 1.00em;
    background-color: pink;
    color: white;
}

    .v2 .alt:before {
        content: 'alt';
    }

/* --- */

html, body {
    width: 100.0%;
}

body {
    overflow-y: scroll;
    overflow-x: hidden;
}

*, :before, :after {
    margin: 0;
    padding: 0;
    border: 0;
    border-style: solid;
    transition: all 150ms ease-in-out 0ms;
    box-sizing: border-box;
}

img, ul, ol {
    display: block;
    width: 100%
}

hr {
    width: 100.0%;
    display: block;
    margin: 1.00em auto;
    border-top-width: 1px;
}

iframe {
    width: 100.0%;
}

.box {
    position: relative;
    padding: 1.00em;
    border-width: 2px;
    border-radius: 0.125em;
}

img.indicator {
    width: auto;
    height: 5.00em;
    margin-bottom: 1.00em;
    opacity: 1.00;
}

/* --- Scroll --- */

.scrollsnaps {
    width: 100.0%;
    height: 100.00%;
    display: flex;
    overflow: auto;
    scroll-snap-type: x mandatory;
}

    .scrollsnaps > * {
        position: relative;
        min-width: 100.0%;
        padding-bottom: 1.00em;
        scroll-snap-align: start;
        counter-increment: posMarkup;
    }

        .scrollsnaps > *:before {
            content: counter(posMarkup, decimal);
            position: absolute;
            top: 0;
            right: 0;
            width: 2.25em;
            height: 2.25em;
            padding-top: 0.375em;
            border-width: 1px;
            border-radius: 100.0%;
        }

.scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--gray) var(--light);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    cursor: n-resize;
}

    .scroll::-webkit-scrollbar {
        width: 6px;
    }

    .scroll::-webkit-scrollbar-track {
        background: var(--light);
        border-radius: 3px;
    }

    .scroll::-webkit-scrollbar-thumb {
        background-color: var(--gray);
        border: transparent;
        border-radius: 15px;
    }

/* --- Grid + Flex --- */

.grid {
    width: 100.00%;
    display: grid;
    gap: 2.00em; /*grid-template-columns:	repeat(3, 1fr);*/
    grid-template-columns: repeat(auto-fill, minmax(20.00em, 1fr));
}

    .grid .grid {
        gap: 2.00em;
    }

    .grid + .grid {
        margin-top: 4.00em;
    }

    .grid.small {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid > .full {
        grid-column: 1 / -1;
    }

    .grid > .big {
        grid-column-end: span 2;
    }

    .grid > .bigger {
        grid-column-end: span 3;
    }

    .grid > .large {
        grid-column: 2 / -1;
    }

    .grid .ecare {
        height: 2.50em;
        padding: 0 0 0 8.00em;
        border-bottom-width: 1px;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: auto 2.00em;
        background-image: url('../img/ID_eCARE.svg');
    }

#dashboardChartsOverview > div > .grid {
    grid-template-columns: repeat(auto-fit, minmax(20.00em, 1fr));
    gap: 4.00em;
}

#content > div > div > form > .grid {
    grid-template-columns: repeat(auto-fit, minmax(20.00em, 1fr));
}

.flex {
    width: 100.0%;
    gap: 2.00em;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}

    .flex .flex {
        gap: 1.00em 2.00em;
    }

    .flex > * {
        flex: 1 1 10.00%; /*min-width: 24.00em;*/
    }

    .flex > .full {
        flex: 1 1 100.0%;
    }

    .flex > .big {
        flex: 2 1 20.00%;
    }

    .flex > .bigger {
        flex: 4 1 40.00%;
    }

/* --- NEW +++ Summenblock mit Chart --- */

.sum {
    position: relative;
    flex: 1 1 20.00%;
    display: flex;
    gap: 1.00em;
    flex-flow: column wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
    cursor: pointer;
}

    .sum > div {
        padding: 1.00em 0.50em;
        position: relative;
        min-width: 15.00em;
        border-width: 1px;
    }

        .sum > div:nth-child(2) {
            padding-top: 0.50em;
        }

            .sum > div:nth-child(2) .trend6mtl {
                position: relative;
                width: 100.0%;
                height: 3.00em;
                margin-top: 0.75em;
                display: flex;
                gap: 0 1.5px;
                flex-flow: row wrap;
                justify-content: space-between;
                align-content: stretch;
                align-items: stretch;
            }

                .sum > div:nth-child(2) .trend6mtl > span {
                    position: relative;
                    flex: 1 1 10.00%;
                    height: 100.0%;
                    padding-top: 1.25em;
                    display: flex;
                    gap: 0 1.5px;
                    flex-flow: column wrap;
                    justify-content: flex-end;
                    align-content: stretch;
                    align-items: stretch;
                    background-color: var(--light);
                }

                    .sum > div:nth-child(2) .trend6mtl > span > span {
                        position: relative;
                    }

                        .sum > div:nth-child(2) .trend6mtl > span > span:before {
                            position: absolute;
                            top: -1.25em;
                            left: 0;
                            width: 100.0%;
                            display: flex;
                            flex-flow: row wrap;
                            justify-content: center;
                            align-content: center;
                            align-items: center;
                            transform: scale(0.75);
                        }

/* Values */

.trend6mtl > span:nth-child(1) > span {
    background: var(--sofa-10);
}

.trend6mtl > span:nth-child(2) > span {
    background: var(--sofa-10);
}

.trend6mtl > span:nth-child(3) > span {
    background: var(--sofa-10);
}

.trend6mtl > span:nth-child(4) > span {
    background: var(--sofa-20);
}

.trend6mtl > span:nth-child(5) > span {
    background: var(--sofa-30);
}

.trend6mtl > span:nth-child(6) > span {
    background: var(--sofa-40);
}

.trend6mtl.task > span:nth-child(1) > span {
    height: calc((22.2 * (100 / 32.8)) * 1%);
}

    .trend6mtl.task > span:nth-child(1) > span:before {
        content: '22.2%';
    }

.trend6mtl.task > span:nth-child(2) > span {
    height: calc((29.4 * (100 / 32.8)) * 1%);
}

    .trend6mtl.task > span:nth-child(2) > span:before {
        content: '29.4%';
    }

.trend6mtl.task > span:nth-child(3) > span {
    height: calc((32.8 * (100 / 32.8)) * 1%);
}

    .trend6mtl.task > span:nth-child(3) > span:before {
        content: '32.8%';
    }

.trend6mtl.task > span:nth-child(4) > span {
    height: calc((24.3 * (100 / 32.8)) * 1%);
}

    .trend6mtl.task > span:nth-child(4) > span:before {
        content: '24.3%';
    }

.trend6mtl.task > span:nth-child(5) > span {
    height: calc((16.5 * (100 / 32.8)) * 1%);
}

    .trend6mtl.task > span:nth-child(5) > span:before {
        content: '16.5%';
    }

.trend6mtl.task > span:nth-child(6) > span {
    height: calc(( 8.0 * (100 / 32.8)) * 1%);
}

    .trend6mtl.task > span:nth-child(6) > span:before {
        content: ' 8.0%';
    }

.trend6mtl.ecare > span:nth-child(1) > span {
    height: calc(( 1.0 * (100 /  8.7)) * 1%);
}

    .trend6mtl.ecare > span:nth-child(1) > span:before {
        content: ' 1.0%';
    }

.trend6mtl.ecare > span:nth-child(2) > span {
    height: calc(( 3.3 * (100 /  8.7)) * 1%);
}

    .trend6mtl.ecare > span:nth-child(2) > span:before {
        content: ' 3.3%';
    }

.trend6mtl.ecare > span:nth-child(3) > span {
    height: calc(( 7.0 * (100 /  8.7)) * 1%);
}

    .trend6mtl.ecare > span:nth-child(3) > span:before {
        content: ' 7.0%';
    }

.trend6mtl.ecare > span:nth-child(4) > span {
    height: calc(( 8.7 * (100 /  8.7)) * 1%);
}

    .trend6mtl.ecare > span:nth-child(4) > span:before {
        content: ' 8.7%';
    }

.trend6mtl.ecare > span:nth-child(5) > span {
    height: calc(( 6.5 * (100 /  8.7)) * 1%);
}

    .trend6mtl.ecare > span:nth-child(5) > span:before {
        content: ' 6.5%';
    }

.trend6mtl.ecare > span:nth-child(6) > span {
    height: calc(( 2.0 * (100 /  8.7)) * 1%);
}

    .trend6mtl.ecare > span:nth-child(6) > span:before {
        content: ' 2.0%';
    }

.trend6mtl.sezu > span:nth-child(1) > span {
    height: 0;
}

    .trend6mtl.sezu > span:nth-child(1) > span:before {
        content: ' 0.0%';
    }

.trend6mtl.sezu > span:nth-child(2) > span {
    height: 0;
}

    .trend6mtl.sezu > span:nth-child(2) > span:before {
        content: ' 0.0%';
    }

.trend6mtl.sezu > span:nth-child(3) > span {
    height: 0;
}

    .trend6mtl.sezu > span:nth-child(3) > span:before {
        content: ' 0.0%';
    }

.trend6mtl.sezu > span:nth-child(4) > span {
    height: 0;
}

    .trend6mtl.sezu > span:nth-child(4) > span:before {
        content: ' 0.0%';
    }

.trend6mtl.sezu > span:nth-child(5) > span {
    height: 0;
}

    .trend6mtl.sezu > span:nth-child(5) > span:before {
        content: ' 0.0%';
    }

.trend6mtl.sezu > span:nth-child(6) > span {
    height: 0;
}

    .trend6mtl.sezu > span:nth-child(6) > span:before {
        content: ' 0.0%';
    }

.trend6mtl.csc > span:nth-child(1) > span {
    height: calc(( 0 * (100 / 50.0)) * 1%);
}

    .trend6mtl.csc > span:nth-child(1) > span:before {
        content: ' 0.0%';
    }

.trend6mtl.csc > span:nth-child(2) > span {
    height: calc((10 * (100 / 50.0)) * 1%);
}

    .trend6mtl.csc > span:nth-child(2) > span:before {
        content: '10.0%';
    }

.trend6mtl.csc > span:nth-child(3) > span {
    height: calc((20 * (100 / 50.0)) * 1%);
}

    .trend6mtl.csc > span:nth-child(3) > span:before {
        content: '20.0%';
    }

.trend6mtl.csc > span:nth-child(4) > span {
    height: calc((30 * (100 / 50.0)) * 1%);
}

    .trend6mtl.csc > span:nth-child(4) > span:before {
        content: '30.0%';
    }

.trend6mtl.csc > span:nth-child(5) > span {
    height: calc((40 * (100 / 50.0)) * 1%);
}

    .trend6mtl.csc > span:nth-child(5) > span:before {
        content: '40.0%';
    }

.trend6mtl.csc > span:nth-child(6) > span {
    height: calc((50 * (100 / 50.0)) * 1%);
}

    .trend6mtl.csc > span:nth-child(6) > span:before {
        content: '50.0%';
    }

/* --- Header --- */

header > div,
header > div > span,
header > div > span > a {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}

header {
    position: relative;
    top: 0;
    z-index: 5;
    width: 100.0%;
}

    header > div {
        position: relative;
        width: 100.0%;
        height: 70px;
        border-bottom-width: 1px;
        background-image: url(../img/Logo_Toyota-TASK.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 50.00%;
    }

        header > div > span {
            margin-left: 3.00%;
        }

            header > div > span > span {
                align-content: center;
                align-items: center;
            }

            header > div > span > a {
                position: relative;
                width: 54px;
                border-left-width: 1px;
                justify-content: center;
                align-content: center;
                align-items: center;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 1.50em;
            }

                header > div > span > a.dealer {
                    padding-right: 1.00em;
                    padding-left: 2.00em;
                    width: auto;
                    background-position: left center;
                    border-left-width: 0;
                }

                header > div > span > a.ecare {
                    background-size: 2.00em;
                }

                header > div > span > a:hover {
                    opacity: 0.50;
                }

                header > div > span > a.nav {
                    width: 70px;
                    background-size: 30px;
                }

                header > div > span > a > span {
                    position: absolute;
                    top: 0.25em;
                    right: 0.25em;
                    width: 1.375em;
                    aspect-ratio: 1 / 1;
                    padding: 0 0 0.125em 0.025em;
                    border-radius: 100.0%;
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: center;
                    align-content: center;
                    align-items: center; /**/
                    background-color: lime;
                    Color: white;
                }

    header .logo {
        opacity: 1.00;
        width: auto;
        margin-right: 30px;
        border-left-width: 0;
    }

        header .logo > img {
            width: 48px;
            height: auto;
        }

    header .dealer, .search {
        background-image: url(../img/picts/black/location_on.svg);
    }

    header .dash {
        background-image: url(../img/picts/black/dashboard.svg);
    }

    header .tmp {
        background-image: url(../img/picts/black/tmp_logo.svg);
    }

    header .settings {
        background-image: url(../img/picts/black/settings.svg);
    }

    header .hotline {
        background-image: url(../img/picts/black/contact_support.svg);
    }

    header .locator {
        background-image: url(../img/picts/black/location_on.svg);
    }

    header .ecare {
        background-image: url(../img/Logo_Toyota-eCare_small.svg);
    }

    header .logout {
        background-image: url(../img/picts/black/logout.svg);
    }

    header .nav {
        background-image: url(../img/picts/black/menu.svg);
        opacity: 1.00;
    }

.navon header .nav {
    background-image: url(../img/picts/black/close.svg);
}

.toggle-left.ico.left {
    background-image: url(../img/picts/black/keyboard_arrow_left.svg);
    position: fixed;
    z-index: 3;
    top: calc(50.00% - 1.00em);
    left: 0;
    height: 2.00em;
    width: 2.00em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.left-out .toggle-left.ico.left {
    background-image: url(../img/picts/black/keyboard_arrow_right.svg);
}

.left-out #content > div:nth-of-type(1) {
    flex: 0 0 0;
    overflow: hidden;
}

/* --- Support --- */

#hotline {
    position: relative;
    width: 100.0%;
    height: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    overflow: hidden;
}

.hotlineon header > div {
    border-bottom-width: 0;
}

.hotlineon header .hotline {
    background-image: url(../img/picts/white/close.svg);
    opacity: 1.0;
}

.hotlineon #hotline {
    height: 42px;
}

#hotline a[href^="../"] {
    margin: 0 1.00em;
    padding: 0.45em 1.00em 0.55em;
    border-radius: 0.25em;
}

/* --- Glossar --- */

.glossar {
    columns: 5 22.50em;
    gap: 4.00em;
    column-rule: 1px solid var(--border);
    column-fill: balance-all;
}

    .glossar * {
        break-inside: avoid;
    }

    .glossar span {
        position: relative;
        display: block;
        width: 100.0%;
        margin-bottom: 2.00em;
        border-top-width: 1px;
        counter-increment: abc;
    }

        .glossar span:before {
            content: counter(abc, upper-alpha);
            position: absolute;
            top: 0;
            right: 0;
            font-size: 2.00em;
            opacity: 0.125;
        }

    .glossar * + span {
        margin-top: 2.50em;
    }

/* --- Store Locator (nur Header DL) --- */

#dealerlocator {
    position: relative;
    width: 100.0%;
    height: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    overflow: hidden;
}

    #dealerlocator > span {
        width: 100.0%;
        height: 100.0%;
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }

    #dealerlocator input[type=search] {
        display: block;
        width: calc(100.0% - 70px - 2.00em);
        height: 100.0%;
        border-width: 0;
        box-shadow: none;
        text-align: right;
    }

    #dealerlocator .ico {
        width: calc(70px - 2.10em);
        height: 100.0%;
        padding-top: 0;
        background-position: center;
        background-size: 2.00em;
    }

.dealerlocatoron header .locator {
    background-image: url(../img/picts/black/close.svg);
    opacity: 1.0;
}

.dealerlocatoron #dealerlocator {
    height: 42px;
}

/* --- Nav --- */

nav {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    width: 100.0%;
    height: 0;
    overflow: hidden;
    transition: height 600ms ease-in-out 0ms;
}

    nav > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100.0%;
        padding: 130px 5.00% 60px;
    }

    nav a {
        display: block;
    }

    nav img {
        max-width: 20.00em;
    }

.navon nav {
    height: 100.0vh;
}

.navon {
    position: fixed;
}

/* --- Sub-Menu --- */

#submenu {
    position: sticky;
    z-index: 4;
    top: 0;
    margin: 0 auto;
    width: 100.0%;
    height: 42px;
}

    #submenu > div {
        width: 94.00%;
        height: 100.0%;
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: stretch;
        align-items: stretch;
    }

        #submenu > div span {
            display: flex;
            gap: 1.00em;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-content: center;
            align-items: center;
        }

            #submenu > div span + span {
                gap: 0;
                justify-content: flex-end;
            }

    #submenu a {
        position: relative;
        height: 100.0%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }

        #submenu a + a {
            margin-left: 1.20em;
        }

        #submenu a:before {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 3px;
            content: '';
        }

        #submenu a:hover:before, #submenu a.selected:before {
            width: 100.0%;
        }
    /*Zusätzliche Klasse für ausgewähltes Submenuitem*/
    #submenu .groupicon a:hover:before {
        width: 65.0%;
    }

    #submenu .groupicon a:last-child {
        margin-left: 1.20em;
        padding-left: 1.20em;
    }

        #submenu .groupicon a:last-child:before {
            margin-left: 1.20em;
        }

    #submenu > div > span:first-child > a:after {
        content: 'holiday_village';
        display: inline-block;
        margin-left: 0.25em;
    }

/* --- DealerSearch --- */

.dealersearch {
    background-color: white;
    box-shadow: 0.50em 1.50em 1.50em 0 rgba(0,0,0,0.6);
    height: 42px;
    left: 0;
    position: absolute;
    top: 71px;
    width: 100.0%;
    z-index: 4;
}

    .dealersearch > form {
        border-width: 0;
        height: 100%;
        width: 100%;
    }

        .dealersearch > form > div {
            align-content: center;
            align-items: center;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            height: 100.0%;
            justify-content: space-between;
            margin: 0 auto;
            width: 100.0%;
        }

            .dealersearch > form > div > input[type="search"] {
                border-width: 0;
                box-shadow: none;
                box-sizing: border-box;
                display: block;
                height: 100.0%;
                text-align: right;
                width: calc(100.0% - 70px - 2.00em);
            }

            .dealersearch > form > div > button[type="submit"] {
                background-position: center;
                background-size: 2.00em;
                border-radius: 0;
                box-sizing: content-box;
                height: 100.0%;
                padding-top: 0;
                padding-right: 0;
                width: calc(70px - 2.10em);
            }

.search-off + .dealersearch {
    box-shadow: none;
    top: 0;
}

/* --- Side-Menu --- */

.sideMenu {
    background-color: #282830;
    color: white;
    max-height: 3em;
    overflow: hidden;
    padding-bottom: 1em;
    position: fixed;
    right: 0;
    top: calc(50.00% - 16em);
    transform: rotate(-90deg);
    transform-origin: right 3em;
    width: 16em;
    z-index: 4;
}

    .sideMenu > a.toggle-quick {
        background-image: url(../img/picts/white/expand_less.svg);
        background-position: right center;
        background-size: 2em;
        height: 3em;
        justify-content: flex-end;
        margin-right: 1em;
        opacity: 1;
        padding-right: 3em;
        padding-left: 0;
    }

    .sideMenu > a {
        align-content: center;
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        color: white;
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 1.5em;
        height: 2.5em;
        justify-content: flex-start;
        margin: 0 1.5em;
        opacity: 0.8;
        padding-left: 2.75em;
        position: relative;
    }

    .sideMenu .ico.download {
        background-image: url(../img/picts/white/ic_download_white_24px.svg);
        display: grid;
    }

    .sideMenu .ico {
        display: inline-block;
        font-size: 0.9em;
        min-height: 2em;
        padding: 0.25em 0 0 2.5em;
        white-space: nowrap;
    }

    .sideMenu > a.toggle-quick:before {
        content: 'Funktionen + Links';
    }

    .sideMenu > div {
        margin: 0 2em 1em 4em;
        position: relative;
    }

        .sideMenu > div > p {
            color: white;
        }

            .sideMenu > div > p > a {
                color: #ff0022;
            }

.quick-on .sideMenu {
    width: 20.00em;
    max-height: 36.00em;
    transform: rotate(0deg);
    z-index: 7;
}

    .quick-on .sideMenu > a.toggle-quick {
        background-image: url("../img/picts/white/close.svg");
    }

        .quick-on .sideMenu > a.toggle-quick:before {
            content: 'Schließen';
            transform: scale(0.75);
        }

/* --- Quick --- */
#quick {
    position: absolute;
    z-index: 3;
    top: calc(50.00% - 20.00em);
    right: 0;
    width: 15.00em;
    max-height: 3.00em;
    padding-bottom: 1.00em;
    overflow: hidden;
    transform: rotate(-90deg);
    transform-origin: right 3.000em;
}

    #quick > a {
        opacity: 0.80;
        position: relative;
        height: 2.50em;
        margin: 0 1.50em;
        padding-left: 2.75em;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1.50em;
    }

        #quick > a:hover {
            opacity: 1.00;
        }

    #quick > div {
        position: relative;
        margin: 0 2.00em 1.00em 4.00em;
    }

    #quick > a.toggle-quick {
        opacity: 1.00;
        height: 3.00em;
        margin-right: 1.00em;
        padding-right: 3.00em;
        padding-left: 0;
        justify-content: flex-end;
        background-image: url(../img/picts/white/expand_less.svg);
        background-position: right center;
        background-size: 2.00em;
    }

        #quick > a.toggle-quick:before {
            content: 'Funktionen + Links';
        }

    #quick > a.download {
        background-image: url(../img/picts/white/download.svg);
    }

    #quick > a.settings {
        background-image: url(../img/picts/white/settings.svg);
    }

    #quick > a.supp {
        background-image: url(../img/picts/white/contact_page.svg);
        border-top-width: 1px;
        margin-top: 0.50em;
    }

    #quick > a.video {
        background-image: url(../img/picts/white/ondemand_video.svg);
    }

    #quick > a.hb {
        background-image: url(../img/picts/white/auto_stories.svg);
    }

    #quick > a.faq {
        background-image: url(../img/picts/white/contact_support.svg);
    }

    #quick > hr ~ a {
        display: inline-block;
        width: 6.00em;
        height: 3.00em;
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        background-position: left center;
    }

    #quick > hr ~ a {
        background-image: url(../img/Logo_Toyota-eCARE_inv.svg);
        margin-left: 4.00em;
        background-size: auto 1.50em;
    }

        #quick > hr ~ a + a {
            background-image: url(../img/Logo_Toyota-EFA_inv.svg);
            margin-left: 1.00em;
            background-size: auto 1.25em;
        }

.quick-on #quick {
    width: 20.00em;
    max-height: 40.00em;
    transform: rotate(0deg);
}

    .quick-on #quick > a.toggle-quick {
        background-image: url(../img/picts/white/close.svg);
    }

        .quick-on #quick > a.toggle-quick:before {
            content: 'Schließen';
            transform: scale(0.75);
        }

/* --- TXT Size --- */

#txtsize {
    position: absolute;
    z-index: 99;
    top: calc(50.00% - 30.00em);
    right: 0;
    width: 3.00em;
}

    #txtsize > * {
        position: relative;
        width: 100.0%;
        aspect-ratio: 1/1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 2.00em;
        border-width: 1px;
        background-color: white;
    }

        #txtsize > * + * {
            margin-top: 2px;
        }

    #txtsize #txt-small {
        background-image: url(../img/picts/black/text_decrease.svg);
    }

    #txtsize #txt-medium {
        background-image: url(../img/picts/black/text_increase2.svg);
    }

    #txtsize #txt-large {
        background-image: url(../img/picts/black/text_increase.svg);
    }

/* --- Helpboxx --- */

#helpboxx {
    position: fixed;
    z-index: 3;
    bottom: 7.50em;
    right: 2.00em;
    width: 22.50em;
    padding: 1.00em 2.00em 2.00em 7.00em;
    border-radius: 0.50em;
    background-repeat: no-repeat;
    background-position: top 1.00em left 1.00em;
    background-size: 5.00em;
    background-image: url(../img/MDI.png);
}

    #helpboxx > span {
        display: block;
        width: 100.0%;
        margin-top: 1.00em;
    }

    #helpboxx .btn {
        min-width: 100.0%;
    }

    #helpboxx .ico {
        position: absolute;
        top: 1.00em;
        right: 1.00em;
    }

:target#helpboxx {
    right: -25.00em;
}
/* --- Content --- */

#content {
    position: relative;
    width: 100.0%;
    min-height: calc(100.0vh - 122px - 2.50em);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}

    #content > div {
        position: relative;
        flex: 1 1 100px;
        padding: 3.00em 0 6.00em;
        overflow: hidden;
    }

        #content > div + div {
            position: relative;
            flex: 4 1 400px;
        }

        #content > div > div {
            position: relative;
            margin: 0 3.00vw; /*display: flow-root;  !!! */
        }

/* --- Dashboard--- */

.db {
    display: grid;
    grid-template-columns: 1fr 28.00em;
    gap: 0 3.00vw;
    align-content: flex-start;
    align-items: flex-start;
}

.potential {
    margin-bottom: -0.50vw;
    column-count: 3;
    column-width: 20.00em;
    gap: 2.00vw;
    column-rule: 2px dotted var(--border); /* column-fill: balance-all; */
}

    .potential > div {
        break-inside: avoid;
        padding: 0.50vw 0;
    }

        .potential > div .pad + .pad {
            margin-top: 1.00vw
        }

.db > div > div + div {
    margin-top: 3.00em;
}

.db .head {
    position: relative;
    height: 2.50em;
    margin-bottom: 2.00em;
    padding-top: 0.25em;
    border-bottom-width: 1px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto 2.00em;
}

    .db .head.sub {
        padding-top: 0;
        padding: 0 3.00em 0 8.00em;
        align-content: center;
        align-items: center;
        background-size: auto 100.0%;
    }

        .db .head.sub span {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
        }

        .db .head.sub.next {
            background-image: url('../img/ID_RELAX.svg');
        }

        .db .head.sub.ecare {
            background-image: url('../img/ID_eCARE.svg');
        }

        .db .head.sub.service {
            background-image: url('../img/ID_ZUSE.svg');
        }
        /* Neubenennung für Kategorien aus der Datenbank */
        .db .head.sub.qualitätsmaßnahmen {
            background-image: url('../img/ID_CSC.svg');
        }
    /* Neubenennung für Kategorien aus der Datenbank */

    /* --- FLaps --- */

    .db .head.toggle-flap-db-1,
    .db .head.toggle-flap-db-2,
    .db .head.toggle-flap-db-3,
    .db .head.toggle-flap-db-4 {
        padding-left: 3.00em;
        cursor: pointer;
        background-image: url(../img/picts/black/add_circle.svg);
    }

.db .toggle-flap-db-1 + div,
.db .toggle-flap-db-2 + div,
.db .toggle-flap-db-3 + div,
.db .toggle-flap-db-4 + div {
    max-height: 0;
    overflow: hidden;
}

.db .head.toggle-flap-db-1.flap-db-1-on,
.db .head.toggle-flap-db-2.flap-db-2-on,
.db .head.toggle-flap-db-3.flap-db-3-on,
.db .head.toggle-flap-db-4.flap-db-4-on {
    background-image: url(../img/picts/black/remove_circle.svg);
    border-bottom-width: 0;
}

.db .toggle-flap-db-1.flap-db-1-on + div,
.db .toggle-flap-db-2.flap-db-2-on + div,
.db .toggle-flap-db-3.flap-db-3-on + div,
.db .toggle-flap-db-4.flap-db-4-on + div {
    max-height: 1000.0em;
    overflow: visible;
}

/* --- Dashboard-Elements --- */

.scrollbox {
    position: relative;
    padding: 1.00em 0 0 1.00em;
    margin-bottom: 3.00em;
    border-width: 1px;
    overflow-x: hidden;
    background-color: white;
    min-height: 30em;
}
    /* mindesthöhe um freien platz immer auszufüllen */
    .scrollbox > div {
        height: calc(75.00vh - 112px - 35.00em);
        padding-top: 1.00em;
        padding-right: 1.00em;
        border-top-width: 1px;
        min-height: 30em;
    }

    .scrollbox.dl {
        margin-bottom: 0.00em;
    }

        .scrollbox.dl > div {
            height: calc(100.0vh - 112px - 16.50em);
        }

span.fixedTargetGroup {
    max-width: 80%;
    display: inline-block;
}
/* fixed Weite da alte Targetgroups zu lang sind */
h4.fixedTargetGroup {
    padding-bottom: 10px;
}
    /* padding nach unten wegen alten Targetgroups */
    h4.fixedTargetGroup > span {
        height: 32px;
        display: inline-block;
    }

/* --- Display --- */

.display {
    padding-top: 1.00em;
    display: flex;
    gap: 0.75em;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}

    .display > *:not(h4) {
        flex: 1 1 100.0%;
        margin: 0;
    }

    .display > a {
        flex: 1 1 40.00%;
        padding: 0.50em;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        border-radius: 0.25em;
        background-color: white;
        background-repeat: no-repeat;
        background-position: top 0.25em right 0.25em;
        background-size: 1.50em;
    }

        .display > a > span {
            flex: 0 0 2.00em;
            justify-content: flex-end;
            display: flex;
            flex-flow: row wrap;
            align-content: flex-start;
            align-items: flex-start;
            margin-right: 0.50em;
        }

            .display > a > span + span {
                flex: 1 1 2.00em;
                justify-content: flex-start;
            }

                .display > a > span + span > * {
                    width: 100.0%;
                    display: block;
                }

        .display > a:nth-child(2) {
            background-color: var(--sofa-3);
            background-image: url(../img/picts/white/car_crash.svg);
        }

            .display > a:nth-child(2) * {
                color: white;
            }

        .display > a:nth-child(3) {
            background-color: var(--sofa-2);
        }

        .display > a:nth-child(5) {
            background-color: var(--sofa-3);
        }

            .display > a:nth-child(5) * {
                color: white;
            }

        .display > a:nth-child(6) {
            background-color: var(--sofa-2);
        }

/* --- BKZ --- */

.set {
    position: relative;
    display: block;
}

    .set + .set {
        margin-top: 1.00em;
    }

    .set .cancel {
        position: absolute;
        top: -0.50em;
        right: 0;
    }

.bkz {
    display: flex;
    gap: 1.50em;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}

    .bkz + .bkz {
        margin-top: 1.50em;
    }

    .bkz > span:nth-child(1) {
        flex: 0 0 4.00em;
        aspect-ratio: 1 / 1;
        margin-right: 1.00em;
        border-radius: 100.0%;
    }

    .bkz > span:nth-child(2) {
        flex: 1 1 4.00em;
    }

        .bkz > span:nth-child(2) > span {
            display: block;
        }

        .bkz > span:nth-child(2) > h4 + span {
            margin-top: 0.25em;
        }

.trend {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/icon_trend.svg);
    background-size: 82.00% auto;
    background-color: var(--sofa-10);
}

    .trend.top {
        transform: rotate(-90.0deg);
    }

    .trend.plus {
        transform: rotate(-30.0deg);
    }

    .trend.minus {
        transform: rotate(30.0deg);
    }

    .trend.bad {
        transform: rotate(90.0deg);
    }

    .trend.blank {
        filter: grayscale(1.0);
    }

.bkz + .ico.cancel {
    position: absolute;
    top: -0.50em;
    right: 0;
}

/* --- Pads --- */

.pad {
    position: relative;
    padding: 1.00em 1.50em 1.25em;
    border-radius: 0.125em;
    display: flex;
    gap: 1.00em;
    flex-flow: column wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}

a.pad:hover {
    cursor: pointer;
    transform: scale(1.05);
}

.pad h4 {
    width: calc(100.0% - 7.50em);
}
/*	.pad > *			{ 	position: relative; z-index: 2; width: 100.0%; } 
	.pad form			{ 	margin: 0; } 
	.pad > div + div	{ 	margin-top: 0.25em;*/ /*background: pink; */ /*}*/
.pad > .grid {
    width: 100.0%;
}

.pad > span {
    width: 100.0%;
    position: relative;
    z-index: 2;
}

    .pad > span.smaller {
        font-size: 0.85em
    }

.pad > .btn {
    width: auto;
}

.pad form {
    margin: 0;
}


.recommended-potentials {
    min-height: 13rem;
}

    .recommended-potentials > div {
        display: flex;
        flex-direction: column;
    }

        .recommended-potentials > div > div {
            height: 4rem;
        }

    .recommended-potentials > hr {
        width: 100%;
        margin: 0;
        margin-top: 0.5rem;
    }

.pad.recommended-potentials .btn {
    font-size: 0.65em;
}



.scrollbox.aktuell.bubble:after {
    content: '3';
}

.scrollbox.dealer.bubble:after {
    content: '50';
}

.scrollbox.contact.bubble:after {
    content: '153';
}

.extra {
    padding: 1.50em 1.50em 1.25em;
    border-radius: 0.30em;
}

    .extra > div:first-child {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
    }

        .extra > div:first-child > img {
            width: 90px;
            height: auto;
            margin-right: 1.00rem;
        }

        .extra > div:first-child > span {
            flex: 1 1 10.00%;
        }

.pad.video {
    justify-content: space-between;
}

    .pad.video > span {
    }

    .pad.video video {
        width: 100.0%;
        height: auto;
        margin-bottom: 1.00em;
    }

    .pad.video img {
        float: right;
        width: 7.00em;
        height: auto;
        margin-left: 1.00em;
    }

    .pad.video:target {
        transform: scale(1.05);
        box-shadow: 1.50em 1.50em 5.00em 1.00em var(--border), inset 0 0 0 0.50em white;
    }

    .pad.video .top {
        height: 4.00em;
        display: block;
        padding-bottom: 1.00em;
        padding-left: 4.00em;
        border-bottom-width: 0;
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        align-content: center;
        align-items: center;
        background-size: 3.00em auto;
        background-image: url(../img/picts/black/play_circle_outline.svg);
        background-repeat: no-repeat;
        background-position: top left;
    }

    .pad.video .bot {
        display: block;
        margin-top: 1.00em;
        padding-top: 1.00em;
        border-top-width: 1px;
        align-self: flex-end;
    }

.pad.faq {
    justify-content: flex-start;
}

.pad.epost {
    background-size: 3.50em auto;
    background-image: url("../img/Logo_ePost.svg");
    background-repeat: no-repeat;
    background-position: top right;
}

.pad.ecare {
    background-size: 5.50em auto;
    background-image: url(../img/Logo_eCARE.svg);
    background-repeat: no-repeat;
    background-position: top 1.00em right 1.50em;
}

    .pad.ecare .display > a.nodataClass:nth-child(2) {
        background-color: white;
    }

        .pad.ecare .display > a.nodataClass:nth-child(2) * {
            color: black;
        }

    .pad.ecare .display > a.nodataClass:nth-child(3) {
        background-color: white;
    }

.display > a.nodataClass:nth-child(5) {
    background-color: white;
}

    .display > a.nodataClass:nth-child(5) * {
        color: black;
    }

.display > a.nodataClass:nth-child(6) {
    background-color: white;
}


.pad.kundenbindung {
    background-image: url('../img/NLS_Bild.png');
}

.progress {
    position: relative;
    margin: 3.00em 0 2.00em;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    background-color: var(--sofa-10);
}

    .progress > span {
        flex: 1 1 10.00%;
        height: 0.75em;
        border-width: 1px;
    }

        .progress > span + span {
            border-left-width: 1px;
        }

    .progress:before {
        position: absolute;
        top: -2.00em;
        left: 0;
        content: 'Fortschritt';
    }

    .progress:after {
        position: absolute;
        top: -1.75em;
        right: 0;
    }

    .progress.step-13:after {
        content: 'Kunden freigeben!';
    }
    /* correct progress step names */
    .progress.step-20:after {
        content: 'Kunden freigeben!';
    }

    .progress.step-22:after {
        content: 'Kunden freigeben!';
    }

    .progress.step-23:after {
        content: 'Anschreiben erstellen!';
    }

    .progress.step-30:after {
        content: 'Aktion beenden!';
    }

    .progress.step-31:after {
        content: 'Kunden nachfassen!';
    }

    .progress.step-32:after {
        content: 'Kunden nachfassen!';
    }

    .progress.step-33:after {
        content: 'Kunden nachfassen!';
    }


    .progress.step-13 > span {
        background-color: var(--sofa-3);
    }

        .progress.step-13 > span + span {
            background-color: transparent;
        }

    .progress.step-20 > span {
        background-color: var(--sofa-30);
    }

        .progress.step-20 > span + span {
            background-color: var(--sofa-30);
        }

            .progress.step-20 > span + span + span {
                background-color: transparent;
            }

    .progress.step-22 > span {
        background-color: var(--sofa-30);
    }

        .progress.step-22 > span + span {
            background-color: var(--sofa-2);
        }

            .progress.step-22 > span + span + span {
                background-color: transparent;
            }

    .progress.step-23 > span {
        background-color: var(--sofa-30);
    }

        .progress.step-23 > span + span {
            background-color: var(--sofa-3);
        }

            .progress.step-23 > span + span + span {
                background-color: transparent;
            }

    .progress.step-30 > span {
        background-color: var(--sofa-30);
    }

        .progress.step-30 > span + span + span {
            background-color: var(--sofa-30);
        }

            .progress.step-30 > span + span + span + span {
                background-color: transparent;
            }

    .progress.step-31 > span {
        background-color: var(--sofa-30);
    }

        .progress.step-31 > span + span + span {
            background-color: var(--sofa-1);
        }

            .progress.step-31 > span + span + span + span {
                background-color: transparent;
            }

    .progress.step-32 > span {
        background-color: var(--sofa-30);
    }

        .progress.step-32 > span + span + span {
            background-color: var(--sofa-2);
        }

            .progress.step-32 > span + span + span + span {
                background-color: transparent;
            }

    .progress.step-33 > span {
        background-color: var(--sofa-30);
    }

        .progress.step-33 > span + span + span {
            background-color: var(--sofa-3);
        }

            .progress.step-33 > span + span + span + span {
                background-color: transparent;
            }

    .progress.step-40 > span {
        background-color: var(--sofa-30);
    }


.pad:before {
    position: absolute;
    top: -1.75em;
    right: 0;
    height: 1.50em;
    padding: 0 0 0.25em 2.00em;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1.50em auto;
}

.pad.brief:before,
.pad.call:before,
.pad.email:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 5.00em;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    opacity: 0.25;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 62.00% auto;
}

.pad.brief:before {
    background-image: url(../img/picts/black/mail_outline.svg);
}

.pad.call:before {
    background-image: url(../img/picts/black/perm_phone_msg.svg);
}

.pad.email:before {
    background-image: url(../img/picts/black/alternate_email.svg);
}

.pad > .btn {
    position: absolute;
    top: 0.50em;
    right: 0.50em;
}

.pad .num {
    height: 2.25em;
    padding-right: 1.00em;
    display: grid;
    place-items: center right;
    background-color: var(--sofa-10);
    margin-top: 0.25em;
}

.future:before {
    content: 'FUTURE';
    position: absolute;
    top: 1.00em;
    right: 0.50em;
    padding: 0.25em 0.50em 0.375em;
    transform: rotate(6deg);
    font-size: 0.75em;
    font-weight: bold;
    letter-spacing: 0.125em;
}

/* --- Footer --- */

footer {
    position: relative;
    z-index: 2;
    width: 100.0%;
    height: 2.50em;
    border-top-width: 1px;
}

    footer > div {
        position: relative;
        width: 94.00%;
        height: 100.0%;
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }

    footer .ico.backlink {
        position: absolute;
        z-index: 2;
        top: -3.50em;
        left: calc(50.00vw - 2.50em);
    }

.toplink {
    opacity: 0.50;
    position: fixed;
    z-index: 2;
    bottom: 3.50em;
    right: 0.30em;
    padding: 1.50em;
    border-radius: 0.50em;
    background: url(../img/picts/white/arrow_upward.svg) no-repeat center;
    background-size: 1.50em;
}

    .toplink:hover {
        opacity: 0.80;
    }

/* --- Overlay --- */

.overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100.0%;
    height: 100.0%;
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

    .overlay > div {
        position: relative;
        z-index: 2;
        width: 480px;
        height: auto;
        padding: 1.50em;
        border-radius: 0.125em;
    }

    .overlay.large > div {
        width: 960px;
        max-width: 90.00%;
    }

    .overlay.max > div {
        width: 960px;
        max-width: 90.00%;
        height: 82.00%;
    }

    .overlay > div > .box {
        margin-bottom: 2.00em;
    }

    .overlay > div > .scroll {
        margin-bottom: 2.00em;
        max-height: 50.00em;
        border-width: 1px 0 1px 1px;
    }

        .overlay > div > .scroll > *:first-child {
            margin-top: -1px;
        }

.overlay {
    transition: transform 150ms ease-in-out 150ms;
    transform: scale(0);
}

    .overlay:target {
        transition: transform ease-in-out 150ms;
        transform: scale(1);
    }



/* --- Aside (Flap) --- */

.aside {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    width: 0;
    height: 100.0%;
    overflow: hidden;
    transition: width 600ms ease-in-out 0ms;
}

.aside-on {
    position: fixed;
}

    .aside-on .aside {
        width: 100.0%;
    }

.aside > div {
    position: absolute;
    top: 0;
    right: 0;
    width: 700px;
    height: 100.0%;
}

    .aside > div:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100.0%;
        content: '';
    }

    .aside > div > div {
        width: calc(100.0% - 6.00em);
        height: calc(100.0% - 6.00em);
        margin: 3.00em;
    }

.aside .header {
    width: 100.0%;
    height: 2.00em;
    padding-bottom: 1.00em;
    border-bottom-width: 1px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

    .aside .header img {
        width: auto;
        height: 1.50em;
    }

#aside-efa .searchfix {
    width: 100.0%;
    height: 10.00em;
    padding: 1.00em;
    border-radius: 3px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

    #aside-efa .searchfix > div {
        width: 62.00%;
    }

        #aside-efa .searchfix > div > .span {
            display: block;
        }

        #aside-efa .searchfix > div > .searchbox {
            margin-top: 0.50em;
        }

#aside-efa .main {
    width: 100.0%;
    height: calc(100.0% - 10.00em);
    overflow: hidden;
}

    #aside-efa .main > .result {
        margin: 0 -10px;
        height: calc(50.00% - 10px);
        overflow: hidden;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: stretch;
        align-items: stretch;
    }

        #aside-efa .main > .result + .result {
            margin-top: 20px;
        }

        #aside-efa .main > .result > div {
            height: 100.0%;
            flex: 1 1 10.00%;
            margin: 0 10px;
        }

    #aside-efa .main .tablehead {
        width: 100.0%;
        height: 20px;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
    }

    #aside-efa .main .tablebox {
        height: calc(100.0% - 20px - 2px);
        border-top-width: 1px;
    }

        #aside-efa .main .tablebox.scroll {
            border-bottom-width: 1px;
        }

    #aside-efa .main > .result + .result > div {
        height: calc(100.0% - 20px - 20px - 2px);
    }

    #aside-efa .main > .result + .result > .full {
        flex: 1 1 100.0%;
        height: 20px;
        margin-bottom: 0;
        padding-bottom: 10px;
        border-bottom-width: 1px;
    }

/* --- Support (Manuls) --- */

a.support {
    padding-top: 1.00em;
    padding-bottom: 0.50em;
    display: block;
    min-height: 5.00em;
    padding-left: 4.00em;
    background-repeat: no-repeat;
    background-position: left top 1.00em;
    background-size: 3.00em auto;
}
    /* Stylinganpassung für einheitliche Größen */
    a.support + a {
        border-top-width: 1px;
    }
    /* Stylinganpassung für einheitliche Größen */
    a.support + .box {
        margin-top: 1.50em;
        padding-left: 3.00em;
        border-top-width: 0.50em;
        background-image: url(../img/picts/black/contact_support.svg);
        background-repeat: no-repeat;
        background-position: top 0.75em left 0.50em;
        background-size: 2.00em;
    }

    a.support.video {
        background-image: url(../img/picts/black/ondemand_video.svg);
    }

    a.support.hb {
        background-image: url(../img/picts/black/auto_stories.svg);
    }

    a.support.faq {
        background-image: url(../img/picts/black/help_outline.svg);
    }

ul.items {
    list-style: none;
    max-width: 40.00em;
    margin: 2.00em 0;
}

    ul.items li + li {
        margin-top: 1.00em;
    }

    ul.items li {
        position: relative;
        min-height: 3.00em;
        padding-left: 4.00em;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
        counter-increment: items;
    }

        ul.items li:before {
            opacity: 0.50;
            position: absolute;
            top: 0;
            left: 0;
            width: 2.00em;
            height: 2.00em;
            padding-bottom: 0.125em;
            border-radius: 100.0%;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-content: center;
            align-items: center;
            content: counter(items, decimal);
        }

        ul.items li.red:before {
            opacity: 1.00;
        }

.hb-img {
    width: 100.0%;
    height: auto;
    border-width: 2px;
}

    .hb-img.small {
        width: 50.00%;
    }

    .hb-img.nobo {
        border-width: 0;
    }

/* --- Doku --- */

.docu .scroll {
    height: calc(100.0vh - 70px - 2.50em - 34.00em);
}

.dokuhead {
    width: 100.0%;
    padding: 0 1.00em;
    border-width: 1px 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}

    .dokuhead > * {
        position: relative;
        flex: 0 0 12.50em;
        padding: 0.50em 0 0.50em 0.50em;
        white-space: pre;
        overflow: hidden;
        text-overflow: ellipsis;
        text-overflow: " ...";
    }

        .dokuhead > * + * {
            border-left-width: 1px;
        }

        .dokuhead > *:nth-child(1) {
            flex: 0 0 10.00em;
        }

        .dokuhead > *:nth-child(2) {
            flex: 0 0 5.50em;
        }

        .dokuhead > *:nth-child(6) {
            flex: 1 1 12.50em;
            padding-right: 3.00em;
        }

summary {
    width: 100.00%;
    border-top-width: 1px;
}

    summary.dokuhead {
        border-width: 0;
    }

        summary.dokuhead > * {
            padding: 1.00em 0.50em;
        }

            summary.dokuhead > *:nth-child(2):before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100.0%;
                height: 100.0%;
                opacity: 0.25;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 2.00em;
            }

.contact-auto > summary.dokuhead > *:nth-child(2):before {
    background-image: url(../img/picts/black/notification_add.svg);
}

.contact-call > summary.dokuhead > *:nth-child(2):before {
    background-image: url(../img/picts/black/perm_phone.svg);
}

.contact-email > summary.dokuhead > *:nth-child(2):before {
    background-image: url(../img/picts/black/alternate_email.svg);
}

.contact-meet > summary.dokuhead > *:nth-child(2):before {
    background-image: url(../img/picts/black/groups.svg);
}

.contact-video > summary.dokuhead > *:nth-child(2):before {
    background-image: url(../img/picts/black/video_camera_front.svg);
}

details {
    position: relative;
    width: 100.00%;
    border-bottom-width: 1px;
    background-image: url(../img/picts/black/unfold_less.svg);
    background-repeat: no-repeat;
    background-position: top 1.00em right 1.00em;
    background-size: 1.75em;
    cursor: pointer;
}

    details[open] {
        border-top-width: 1px;
        background-image: url(../img/picts/black/unfold_more.svg);
    }

    details > div {
        max-height: 0;
        padding: 1.00em 3.00em 1.00em 1.50em;
        border-width: 1px 0;
        width: 100.0%;
        overflow: hidden;
    }

    details[open] > div {
        max-height: 50.00em;
    }

    details[open]:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0.50em;
        height: 100.0%;
        opacity: 0.125;
        background-color: var(--dark);
    }

    details[open]:hover:before {
        opacity: 0.50;
    }

    details[open] > div.frame {
        padding: 0;
        height: 50.00em;
    }

        details[open] > div.frame > iframe {
            width: calc(100.00% - 3.00em);
            height: 50.00em;
        }

/* --- eCare --- */

.boxmessage {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.message {
    opacity: 0.75;
    position: relative;
    width: 100.0%;
    padding: 0.50em 1.00em 1.00em 2.00em;
    border-radius: 3px;
    cursor: pointer;
    border-width: 1px;
}

    .message > * {
        order: 1;
    }

    .message + .message {
        margin-top: 0.25em;
    }

    .message > span {
        position: absolute;
        top: 0;
        left: 0;
        width: 1.00em;
        height: 100.0%;
        border-radius: 3px 0 0 3px;
    }

    .message > .ico.cancel {
        position: absolute;
        top: 0.50em;
        right: 0;
    }

#newmessage {
    opacity: 1.00;
    background-color: white;
    background-image: url('../img/picts/black/forward.svg');
    background-repeat: no-repeat;
    background-position: bottom 0.50em right 0.50em;
    background-size: 2.00em auto;
}

    #newmessage.no {
        background-image: none;
    }

    #newmessage:after {
        position: absolute;
        opacity: 0.75;
        bottom: calc(-1.00em - 2px);
        left: 0;
        width: 100.0%;
        height: 1px;
        content: '';
    }

#newmessageACN {
    opacity: 1.00;
    background-color: white;
    margin-bottom: 2em;
    background-repeat: no-repeat;
    background-position: bottom 0.5em right 0.5em;
    background-size: 2em auto;
}

/* --- Elemente --- */

/* --- End DEMO DB --- */

.bubble:after, .newsbubble {
    position: absolute;
    z-index: 2;
    top: 0.50em;
    right: 1.50em;
    padding: 0.20em 1.00em 0.40em;
    border-radius: 3.00em;
}
/* newsbubble da wir kein after element befüllen */
.pad.bubble:after {
    top: -2.00em;
    right: 0;
    padding: 0.375em 0 0.50em 2.50em;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100.0%;
    background-color: transparent;
}

.pad.bubble.eilt:after {
    background-image: url("../img/picts/red/speed_outline.svg");
    content: 'Dringend!';
    color: var(--sofa-3);
}

.pad.bubble.frist:after {
    background-image: url(../img/picts/black/alarm_outline.svg);
    content: 'Bis 00.00.20xx starten!';
}

.pad.bubble.new:after {
    background-image: url(../img/picts/black/grade_outline.svg);
    content: 'NEU!';
}


.control {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

    .control > * {
        max-width: 60.00%;
    }


p.tipp {
    border-left-width: 0.25em;
    padding-left: 1.25em;
}

.tippbox {
    padding-left: 3.50em;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 2.50em;
}

    .tippbox.repeat {
        background-image: url(../img/picts/black/repeat.svg);
    }

.ico {
    position: relative;
    display: inline-block;
    min-height: 2.00em;
    padding: 0.375em 0 0 2.50em;
    background-repeat: no-repeat;
    background-position: center left 0.25em;
    background-size: 1.75em; /* background-color: lime !important; */
}

    .ico.right {
        float: right;
    }

    .ico.add {
        background-image: url(../img/picts/black/add_circle.svg);
    }

    .ico.auto {
        background-image: url(../img/picts/black/notification_add.svg);
    }

    .ico.backlink {
        background-image: url(../img/picts/black/keyboard_backspace.svg);
    }

    .ico.call {
        background-image: url(../img/picts/black/perm_phone.svg);
    }

    .ico.close {
        background-image: url(../img/picts/black/close.svg);
    }

    .ico.cancel {
        background-image: url(../img/picts/black/cancel_outline.svg);
    }

    .ico.download {
        background-image: url(../img/picts/black/download.svg);
    }

    .ico.delete {
        background-image: url(../img/picts/black/delete_forever.svg);
    }

    .ico.mail {
        background-image: url(../img/picts/black/email-outline.svg);
    }

    .ico.email {
        background-image: url(../img/picts/black/alternate_email.svg);
    }

    .ico.forward {
        background-image: url(../img/picts/black/forward.svg);
    }

    .ico.launch {
        background-image: url(../img/picts/black/launch.svg);
    }

    .ico.mail {
        background-image: url(../img/picts/black/mail_outline.svg);
    }

    .ico.meet {
        background-image: url(../img/picts/black/groups.svg);
    }

    .ico.overview {
        background-image: url(../img/picts/black/remove_red_eye.svg);
    }

    .ico.refresh {
        background-image: url(../img/picts/black/refresh.svg);
    }

    .ico.repeat {
        background-image: url(../img/picts/black/repeat.svg);
    }

    .ico.save {
        background-image: url(../img/picts/black/save.svg);
    }

    .ico.search {
        background-image: url(../img/picts/white/search.svg);
    }

    .ico.start {
        background-image: url(../img/picts/black/rocket_launch.svg);
    }

    .ico.time {
        background-image: url(../img/picts/black/schedule.svg);
    }

    .ico.video {
        background-image: url(../img/picts/black/video_camera_front.svg);
    }

    .ico.alert {
        background-image: url(../img/picts/red/report_problem.svg);
    }

table .ico.alert {
    position: absolute;
    bottom: calc(50.00% - 1em);
    left: 100.0%;
    opacity: 1.00;
}

.ico.pdf {
    background-image: url('../img/picts/red/Icon-PDF_red.svg');
    background-size: 2.00em;
    padding-left: 3.00em;
}

.btn {
    height: 3.00em;
    position: relative;
    display: inline-block;
    width: auto;
    padding: 0.85em 2.00em 1.00em;
    border-radius: 0.125em;
}

    .btn + .btn {
        margin-left: 2.00em;
    }

    .btn.sec {
        padding: 0.85em 1.50em 0.85em 2.75em;
        background-color: transparent;
        display: inline-block;
        background-image: url(../img/picts/black/east.svg);
        background-repeat: no-repeat;
        background-position: center left 0.75em;
        background-size: 1.50em;
    }
    /*padding bottom damit derText mittig im Button ist*/
    .btn.right {
        float: right;
    }

    .btn.sec.add {
        background-image: url(../img/picts/black/add_circle.svg);
    }

    .btn.sec.auto {
        background-image: url(../img/picts/black/alarm_on.svg);
    }

    .btn.sec.close {
        background-image: url(../img/picts/black/close.svg);
    }

    .btn.sec.check {
        background-image: url(../img/picts/black/check.svg);
    }

    .btn.sec.delete {
        background-image: url(../img/picts/black/delete_forever.svg);
    }

    .btn.sec.download {
        background-image: url(../img/picts/black/download.svg);
    }

    .btn.sec.email {
        background-image: url(../img/picts/red/alternate_email.svg);
    }

    .btn.sec.file {
        background-image: url(../img/picts/red/attach_file.svg);
    }

    .btn.sec.mail {
        background-image: url(../img/picts/red/mail_outline.svg);
    }

    .btn.sec.save {
        background-image: url(../img/picts/black/save.svg);
    }

    .btn.sec.start {
        background-image: url(../img/picts/black/rocket_launch.svg);
    }

    .btn.sec.work {
        background-image: url(../img/picts/black/settings.svg);
    }

    .btn.sec.video {
        background-image: url(../img/picts/black/play_circle.svg);
    }

    .btn:hover, .ico:hover, .pad:hover .btn, .pad:hover td.status > a {
        opacity: 0.80;
    }

/* --- Tooltipp --- */

.tooltip {
    position: absolute;
    z-index: 6;
    top: 0.125em;
    right: 0.125em;
    width: 1.75em;
    aspect-ratio: 1 / 1;
    border-radius: 100.0%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.00em;
    background-image: url('../img/picts/black/info.svg');
    cursor: pointer;
}

    .tooltip.left {
        left: 0.125em;
        right: inherit;
    }

    .tooltip > span {
        position: absolute;
        z-index: 2;
        bottom: 2.00em;
        left: calc(50.00% - 7.50em);
        width: 15.00em;
        height: auto;
        max-height: 0;
        padding-bottom: 0;
        opacity: 0;
        transition: opacity 150ms ease-in-out 0ms;
        overflow: hidden;
    }

        .tooltip > span:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100.0%;
            height: calc(100.0% - 1.25em);
        }

        .tooltip > span:after {
            content: '';
            position: absolute;
            bottom: 0.50em;
            left: calc(50.00% - 1.00em);
            width: 2.00em;
            aspect-ratio: 1 / 1;
            transform: rotate(-45.00deg);
            transform-origin: center;
        }

        .tooltip > span > span {
            position: relative;
            z-index: 2;
            display: block;
            margin: 2px;
            padding: 0.75em 1.00em 1.00em;
        }

    .tooltip:hover > span {
        max-height: 20.00em;
        padding-bottom: 1.25em;
        opacity: 1.00;
    }

.intab .tooltip {
    top: -1.00em;
    right: -0.50em;
}

.tooltip > .rotated {
    transform: rotate(180deg);
    bottom: unset;
    top: 2em;
}
    /* gedrehter Tooltip damit er nicht unter dem submenu verschwindet */
    .tooltip > .rotated > span {
        transform: rotate(-180deg)
    }
/* gedrehter Text im gedrehten Tooltip */
.tooltip.wider > span {
    position: absolute;
    z-index: 2;
    bottom: 2.00em;
    left: 50%;
    transform: translateX(-50%);
    width: 30.00em;
    height: auto;
    max-height: 0em;
    padding-bottom: 0;
    opacity: 0;
    transition: opacity 150ms ease-in-out 0ms;
}

.tooltip.wider:hover > span {
    max-height: 20em;
    padding-bottom: 1.25em;
    opacity: 1;
}

/* --- Helppoints --- */

#layer-helppoints {
    position: fixed;
    z-index: 999;
    top: 69px;
    right: calc(50.00% - 7.50em);
    height: 43px;
    width: 14.00em;
    padding: 0 3.00em;
    border-radius: 3.00em;
    border-width: 0;
    box-shadow: 0.25em 0.25em 1.00em 0 #00000025;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    cursor: move;
    transition: none;
}

    #layer-helppoints a {
        position: absolute;
        top: 0;
        right: 0;
        height: 100.0%;
        aspect-ratio: 1 / 1;
        background-image: url(../img/picts/black/close.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.25em;
        cursor: pointer;
    }

    #layer-helppoints:before {
        content: '';
        position: absolute;
        top: calc(50.00% - 0.50em);
        left: 1.00em;
        width: 1.00em;
        aspect-ratio: 1 / 1;
        border-radius: 100.0%;
        background-color: var(--sofa-1);
    }

.toggle-helppoints:before {
    content: 'Help points on';
    cursor: pointer;
}

.helppoint {
    position: absolute;
    display: none;
    z-index: 2;
    top: -0.50em;
    right: -0.50em;
    width: 1.50em;
    aspect-ratio: 1 / 1;
    border-radius: 100.0%;
    overflow: hidden;
    background-color: var(--sofa-1);
}

    .helppoint:before {
        content: '!';
        position: absolute;
        top: -0.125em;
        right: 0;
        width: 100.0%;
        height: 100.0%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

.helppoint,
#layer-helppoints:before {
    animation: pulse 1500ms infinite;
}

@keyframes pulse {
    0% {
        box-shadow: #3fbfb2 0 0 0 0;
    }

    75% {
        box-shadow: #3fbfb200 0 0 0 1.00em;
    }
}

#layer-helppoints:target {
    display: none;
}

.helppoints-on .helppoint {
    display: block;
}

.helppoints-on #layer-helppoints:before {
    animation: 'none';
    background-color: var(--sofa-1);
}

.helppoints-on #layer-helppoints .toggle-helppoints:before {
    content: 'Help points off';
}

/* --- Imagebox --- */

.imgbox {
    width: 100.0%;
    display: block;
    margin-top: 1.00em;
}

    .imgbox > span + span {
        margin-top: 0.50em;
        display: grid;
        gap: 0.50em;
        grid-template-columns: repeat(2, 1fr);
    }

        .imgbox > span + span > .img {
            position: relative;
        }

            .imgbox > span + span > .img > img {
                width: 100.0%;
            }

            .imgbox > span + span > .img > .ico {
                position: absolute;
                z-index: 2;
                top: 0.50em;
                right: 0.50em;
                width: 2.00em;
                aspect-ratio: 1 / 1;
                padding: 0;
                opacity: 1;
                border-radius: 100.0%;
                background-position: center;
                background-color: white;
            }


/* --- Supportseite --- */
/* Manuelles styling */
#supportManuals div.form-label-group:last-of-type {
    height: 6em;
}

#supportManuals button.toggle-thank {
    margin-top: 1.5em;
}

#supportManuals .form-label-group {
    align-content: center;
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    justify-content: flex-start;
    height: 3em;
    margin: 0.9rem auto 0;
    position: relative;
    width: 100%;
}

    #supportManuals .form-label-group * ~ label {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 1.5em;
        cursor: text;
        transition: all 300ms ease-in-out 0ms;
        display: flex;
        flex-flow: row wrap;
        align-content: center;
        align-items: center;
        transform-origin: top right;
    }

        #supportManuals .form-label-group * ~ label:before {
            content: none;
        }

    #supportManuals .form-label-group *:placeholder-shown ~ label {
        color: #282830;
        transform: scale(1);
        justify-content: flex-start;
    }

    #supportManuals .form-label-group *:not(:placeholder-shown) ~ label, #supportManuals .form-label-group *:focus ~ label {
        justify-content: flex-end;
        transform: scale(0.75);
    }

.form-label-group + .form-label-group {
    margin-top: 0.5em;
}


/*	=================================
		END
	================================= */

body.blank {
    width: 100.0%;
    height: 100.0vh;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    box-shadow: inset 0 0 0 3.00em pink;
}

    body.blank a {
        display: block;
        width: 240px;
    }

        body.blank a svg {
            fill: pink
        }

nav summary + div {
    width: 100.0%;
    padding: 1.50em 1.50em 1.50em 3.00em;
    background-color: white;
}

    nav summary + div * {
        color: var(--dark);
    }

    nav summary + div a {
        color: var(--sofa-3);
        display: inline-block;
        white-space: nowrap;
    }



#busy {
    background-color: var(--bgcolor);
    color: white;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

    #busy .lds-spinner {
        color: white;
        display: inline-block;
        height: 64px;
        left: 50%;
        position: relative;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 64px;
    }

        #busy .lds-spinner div {
            transform-origin: 32px 32px;
            animation: lds-spinner 1.2s linear infinite;
        }

            #busy .lds-spinner div:after {
                content: " ";
                display: block;
                position: absolute;
                top: 3px;
                left: 29px;
                width: 5px;
                height: 14px;
                border-radius: 20%;
                background: #fff;
            }

            #busy .lds-spinner div:nth-child(1) {
                transform: rotate(0deg);
                animation-delay: -1.1s;
            }

            #busy .lds-spinner div:nth-child(2) {
                transform: rotate(30deg);
                animation-delay: -1s;
            }

            #busy .lds-spinner div:nth-child(3) {
                transform: rotate(60deg);
                animation-delay: -0.9s;
            }

            #busy .lds-spinner div:nth-child(4) {
                transform: rotate(90deg);
                animation-delay: -0.8s;
            }

            #busy .lds-spinner div:nth-child(5) {
                transform: rotate(120deg);
                animation-delay: -0.7s;
            }

            #busy .lds-spinner div:nth-child(6) {
                transform: rotate(150deg);
                animation-delay: -0.6s;
            }

            #busy .lds-spinner div:nth-child(7) {
                transform: rotate(180deg);
                animation-delay: -0.5s;
            }

            #busy .lds-spinner div:nth-child(8) {
                transform: rotate(210deg);
                animation-delay: -0.4s;
            }

            #busy .lds-spinner div:nth-child(9) {
                transform: rotate(240deg);
                animation-delay: -0.3s;
            }

            #busy .lds-spinner div:nth-child(10) {
                transform: rotate(270deg);
                animation-delay: -0.2s;
            }

            #busy .lds-spinner div:nth-child(11) {
                transform: rotate(300deg);
                animation-delay: -0.1s;
            }

            #busy .lds-spinner div:nth-child(12) {
                transform: rotate(330deg);
                animation-delay: 0s;
            }

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.txtcolor-red,
.red {
    color: #ff0022;
}

/*	=================================
		Spinner
	================================= */

.lds-ring {
    /* change color here */
    color: var(--bgcolor);
}

    .lds-ring,
    .lds-ring div {
        box-sizing: border-box;
        color: var(--bgcolor);
    }

.lds-ring {
    display: inline-block;
    position: relative;
    width: 2.5em;
    height: 2.5em;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 2em;
        height: 2em;
        margin: 5px;
        border: 4px solid currentColor;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: currentColor transparent transparent transparent;
        color: #d9d9d9;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

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