@media only screen and (max-width: 500px) {
            :root {
                --title-font-size: 22px;
                --title-indent-font-size: 18px;
                --text-font-size: 14px;
                --small-text-font-size: 12px;
            }
        }

        @media only screen and (min-width: 500px) {
            :root {
                --title-font-size: 24px;
                --title-indent-font-size: 20px;
                --text-font-size: 16px;
                --small-text-font-size: 14px;
            }
        }

        @media only screen and (max-width: 500px) {
            :root {
                --header-text-font-size: 34px;
            }
        }

        @media only screen and (min-width: 500px) and (max-width: 750px) {
            :root {
                --header-text-font-size: 36px;
            }
        }

        @media only screen and (min-width: 750px) and (max-width: 1000px) {
            :root {
                --header-text-font-size: 38px;
            }
        }

        @media only screen and (min-width: 1000px) and (max-width: 1250px) {
            :root {
                --header-text-font-size: 40px;
            }
        }

        @media only screen and (min-width: 1250px) and (max-width: 1500px) {
            :root {
                --header-text-font-size: 42px;
            }
        }

        @media only screen and (min-width: 1500px) {
            :root {
                --header-text-font-size: 44px;
            }
        }

        :root {
            --body-background-color: #f5f5f5;
            --header-background-color: #ffffff;
            --basic-font-color: #001e42;
            --reverse-basic-font-color: #ffffff;
            --logo-color: #ff3000;
            --footer-background-color: #ffffff;
            --rights-color: #5e5e56;
            --a-background-color: #8F8F8F;
            --box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.05);
        }

        .dark-mode {
            --body-background-color: hsl(213, 100%, 13%);
            --header-background-color: hsl(215, 55%, 21%);
            --basic-font-color: #ffffff;
            --reverse-basic-font-color: #001e42;
            --logo-color: #ffffff;
            --footer-background-color: hsl(215, 55%, 21%);
            --rights-color: #a1a1a9;
            --a-background-color: #ffffff;
            --box-shadow: 0 30px 90px -20px rgba(255,255,255,0.3), 0 0 1px 1px rgba(255,255,255,0.05);
        }

        

        

        a, button {
            cursor: pointer;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: start;
            justify-content: start;
            flex-direction: column;
            width: 100%;
            background-color: var(--body-background-color);
            color: var(--basic-font-color);
            transition: background-color 0.3s ease;
            overflow: hidden;
        }

        body.scroll {
            overflow: auto;
        }

        body div.form-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            margin: 50px 0;
        }

        body div.form-container form#contact {
            margin-left: -20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: calc(100vw * 0.8);
            text-align: center;
        }

        body div.form-container h1 {
            text-align: center;
            width: 100%;
            margin-bottom: 30px;
        }

        body div.form-container form#contact button {
            background-color: var(--logo-color);
            color: var(--reverse-basic-font-color);
            border: none !important;
            outline: none !important;
            padding: 8px;
            margin: 10px 0 0 20px;
            font-weight: 500;
            font-size: 18px;
        }

        body div.form-container form#contact div.table {
            display: flex;
            flex-wrap: wrap;
        }

        body div.form-container form#contact div.table div.input-item {
            display: flex;
            flex-direction: column;
            align-items: start;
            margin-left: 20px;
            margin-bottom: 20px;
        }

        body div.form-container form#contact div.table div.input-item label {
            font-weight: 500;
        }

        body div.form-container form#contact div.table div.input-item input {
            background-color: transparent;
            border: 1.5px solid #d9d9da;
            padding: .8em 15px;
            color: var(--basic-font-color);
            width: calc(((100vw * 0.8) - 40px) * 0.5);
            outline: none !important;
        }

        body div.form-container form#contact div.table div.input-item textarea {
            background-color: transparent;
            border: 1.5px solid #d9d9da;
            padding: .8em 15px;
            color: var(--basic-font-color);
            width: calc((100vw * 0.8) - 20px);
            outline: none !important;
            resize: none;
            height: 104.5px;
        }

        body div.form-container form#contact div.table div.input-item textarea:hover, body div.form-container form#contact div.table div.input-item input:hover {
            border-color: #abacad;
        }

        body div.form-container form#contact div.table div.input-item textarea:focus, body div.form-container form#contact div.table div.input-item input:focus {
            border-color: var(--basic-font-color);
        }

        /* HEADER { */

            div.header {
                display: flex;
                height: 80px;
                background-color: var(--header-background-color);
                justify-content: center;
                align-items: center;
                width: 100%;
                border-bottom: .0625rem solid rgba(0, 0, 0, .05);
                transition: background-color 0.3s ease, transform 0.3s ease;
                transform: translateY(0%);
                position: fixed;
                z-index: 2;
            }

            div.header div.inner {
                display: flex;
                height: 80px;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                max-width: 1500px;
            }

            div.header.transparent {
                background-color: transparent;
                color: #fff;
            }

            div.header.opacity.transparent {
                background-color: var(--header-background-color);
            }

            div.header.header-hidden {
                transform: translateY(-100%);
            }

            div.header.fixed.header-hidden {
                transform: translateY(0%);
            }

            div.header div.inner div.left {
                
            }

            div.header div.inner div.left button.toggleSidebar {
                font-family: 'Material Symbols Outlined';
                font-size: 28px;
                margin: 0 0 0 20px;
                padding: 8px 5px;
                border: none !important;
                outline: none !important;
                background-color: transparent;
                cursor: pointer;
                transform: rotate(0deg);
                color: var(--basic-font-color);
                transition: transform 0.3s ease, color 0.3s ease;
            }

            div.header.transparent div.inner div.left button.toggleSidebar {
                color: #fff;
            }

            div.header.opacity.transparent div.inner div.left button.toggleSidebar {
                color: var(--basic-font-color);
            }

            div.header div.inner div.left button.toggleSidebar.active {
                transform: rotate(90deg);
                color: var(--basic-font-color);
            }

            div.header div.inner div.logo {
                height: 100%;
                display: flex;
                align-items: center;
            }

            div.header div.inner div.logo svg {
                cursor: pointer;
            }

            div.header div.inner div.logo svg path, div.header.opacity.transparent div.inner div.logo svg path {
                fill: var(--logo-color);
            }

            div.header.transparent div.inner div.logo svg path {
                fill: #fff;
            }

            div.header div.inner div.right {

            }

            div.header div.inner div.right button.darkMode {
                font-family: 'Material Symbols Outlined';
                font-size: 28px;
                margin: 0 20px 0 0;
                padding: 8px 5px;
                border: none !important;
                outline: none !important;
                background-color: transparent;
                cursor: pointer;
                transform: rotate(0deg);
                color: #001e42;
                transition: transform 0.3s ease, color 0.3s ease;
            }

            div.header.transparent div.inner div.right button.darkMode {
                color: #fff;
            }

            div.header.opacity.transparent div.inner div.right button.darkMode {
                color: #001e42;
            }

            div.header.opacity.transparent div.inner div.right button.darkMode.dark {
                color: #fff;
            }

            div.header div.inner div.right button.darkMode.dark {
                transform: rotate(180deg);
                color: #fff;
            }

        /* HEADER } */

        div.main {
            margin: 100px 0 0 0;
            background-color: var(--body-background-color);
            width: 100%;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        div.main item.main {
            display: flex;
            flex-direction: column;
            width: auto;
            align-items: center;
        }

        div.main item.main titel {
            text-align: center;
            font-size: var(--title-font-size);
            padding: 10px;
            font-weight: 600;
            max-width: 650px;
        }

        div.main item.main.indent titel {
            font-size: var(--title-indent-font-size);
            font-weight: 500;
        }

        div.main item.main text {
            text-align: center;
            font-size: var(--text-font-size);
            max-width: 650px;
        }

        div.footer {
            background-color: var(--footer-background-color);
            width: 100%;
            transition: background-color 0.3s ease, transform 0.3s ease;
            padding: 40px 20px;
            margin: 60px 0 0 0;
        }

        div.footer div.footer-lines {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
        }

        div.footer div.footer-lines div.source-item {
            display: flex;
            align-items: center;
            color: var(--rights-color);
        }

        div.footer div.footer-lines div.source-item div.count {
            margin: 0 5px 0 0;
        }

        div.footer div.footer-lines div.source-item div.source {
            cursor: pointer;
        }

        div.footer div.footer-lines div.source-item div.source:hover {
            text-decoration: underline;
        }

        div.footer div.end {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        div.footer div.end div.owners {
            padding-top: 30px;
            margin-top: 30px;
            width: 100%;
            text-align: center;
            border-top: 1px solid var(--rights-color);
            font-size: 14px;
            color: var(--rights-color);
        }

        div.footer div.end div.owners div.name {
            margin: 8px 0;
        }

        div.footer div.end div.rights {
            font-size: 12px;
            color: var(--rights-color);
            padding-top: 30px;
            margin-top: 30px;
            width: 100%;
            text-align: center;
            border-top: 1px solid var(--rights-color);
        }

        div.footer div.links {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding-top: 30px;
            margin-top: 30px;
            border-top: 1px solid var(--rights-color);
        }

        div.footer div.links div.link {
            text-align: center;
            color: var(--rights-color);
            font-size: 14px;
            width: 100px;
            cursor: pointer;
            padding: 8px;
        }

        div.footer div.links div.link:hover, div.footer div.links div.link:active {
            text-decoration: underline;
        }

        div.footer h3 {
            text-align: center;
            color: var(--rights-color);
            padding: 0 0 20px 0;
            text-transform: uppercase;
        }

        div.sources {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0%;
            left: 0%;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            background-color: var(--header-background-color);
            z-index: 3;
            overflow-y: auto;
        }

        div.sources::-webkit-scrollbar {
            display: none;
        }

        div.sources spacer {
            width: 100%;
            background-color: transparent;
            min-height: 75px;
        }

        div.sources button.exit {
            font-family: 'Material Symbols Outlined';
            font-size: 32px;
            cursor: pointer;
            background-color: transparent;
            border: none !important;
            outline: none !important;
            padding: 12px 7.5px;
            position: fixed;
            top: 0%;
            right: 0%;
            margin: 20px 30px 0 0;
            color: var(--basic-font-color);
        }

        div.sources h1 {
            text-align: center;
            color: var(--basic-font-color);
            padding: 40px 0 20px 0;
        }

        div.sources h3 {
            text-align: center;
            padding: 20px 0;
        }

        div.sources div.source {
            text-decoration: underline;
            text-align: center;
            cursor: pointer;
            padding: 5px;
            margin: 0 0 10px 0;
            font-size: 14px;
            width: fit-content;
            width: -moz-fit-content;
        }

        div.sources.active {
            transform: translateX(0%);
        }

            div.sidebar-overlay {
                height: 0px;
                transition: height 300ms ease;
                position: fixed;
                overflow: hidden;
                width: 100%;
                transform: translateY(80px);
                background-color: var(--header-background-color);
                color: var(--basic-font-color);
                z-index: 2;
                display: flex;
                justify-content: center;
            }

            div.sidebar-overlay.active {
                height: calc(100vh - 80px);
            }

            div.sidebar-overlay div.inner {
                display: flex;
                padding: 65px 12px 35px;
                overflow: hidden;
                height: 100%;
                max-width: 1500px;
                width: 100%;
            }

            div.sidebar-overlay.active div.inner {
                overflow: auto;
            }

            @media only screen and (min-width: 1000px) {
                div.sidebar-overlay div.inner div.main-nav.mobile, div.sidebar-overlay div.inner div.side-nav.mobile, div.sidebar-overlay div.inner div.side-nav mobile {
                    display: none !important;
                }
                div.sidebar-overlay div.inner div.main-nav.desktop {
                    display: flex;
                }
            }

            @media only screen and (max-width: 1000px) {
                div.sidebar-overlay div.inner div.main-nav.mobile, div.sidebar-overlay div.inner div.side-nav mobile {
                    display: flex;
                }
                div.sidebar-overlay div.inner div.main-nav.desktop, div.sidebar-overlay div.inner div.side-nav.desktop {
                    display: none !important;
                }
            }

            @media only screen and (min-width: 1500px) {
                div.sidebar-overlay div.inner div.main-nav.desktop {
                    width: calc((1500px / 2) - 32px);
                }
            }

            @media only screen and (max-width: 1500px) {
                div.sidebar-overlay div.inner div.main-nav.desktop {
                    width: calc((100vw / 2) - 32px);
                }
            }

            div.sidebar-overlay div.inner div.main-nav.desktop {
                flex-direction: column;
            }

            div.sidebar-overlay div.inner div.main-nav.mobile {
                width: 100%;
                flex-direction: column;
            }

            div.sidebar-overlay div.inner div.main-nav.hidden {
                display: none;
            }

            div.sidebar-overlay div.inner div.main-nav item {
                display: flex;
                padding: 10px 0;
                cursor: pointer;
            }

            div.sidebar-overlay div.inner div.main-nav item text {
                display: flex;
                color: #8F8F8F;
                font-size: 28px;
                cursor: pointer;
                transition: color 300ms ease;
                letter-spacing: -1px;
            }

            div.sidebar-overlay div.inner div.main-nav item arrow {
                font-family: 'Material Symbols Outlined';
                font-size: 44px;
                background-color: transparent;
                margin-left: 5px;
                transition: margin-left 300ms ease, color 300ms ease;
                max-height: 42px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 175;
                color: #8f8f8f;
            }

            div.sidebar-overlay div.inner div.main-nav item.active arrow, div.sidebar-overlay div.inner div.main-nav item.active text, div.sidebar-overlay div.inner div.main-nav item:hover text, div.sidebar-overlay div.inner div.main-nav item:hover arrow, div.sidebar-overlay div.inner div.main-nav item[active="true"] arrow, div.sidebar-overlay div.inner div.main-nav item[active="true"] text {
                color: var(--basic-font-color);
            }

            div.sidebar-overlay div.inner div.side-nav.desktop {
                display: none;
                width: calc((100vw / 2) - 32px);
                flex-direction: column;
            }

            div.sidebar-overlay div.inner div.side-nav.mobile {
                display: none;
                width: 100%;
                flex-direction: column;
            }

            div.sidebar-overlay div.inner div.side-nav.desktop:hover {
                display: flex;
            }

            div.sidebar-overlay div.inner div.side-nav.active {
                display: flex;
            }

            div.sidebar-overlay div.inner div.side-nav item {
                display: flex;
                padding: 10px 0;
                cursor: pointer;
            }

            div.sidebar-overlay div.inner div.side-nav mobile {
                flex-direction: column;
            }

            div.sidebar-overlay div.inner div.side-nav mobile item[back="true"] {
                display: flex;
                padding: 10px 0;
                cursor: pointer;
                margin: 10px 0 0 0;
            }

            div.sidebar-overlay div.inner div.side-nav mobile item[back="true"] text {
                display: flex;
                color: var(--basic-font-color);
                font-size: 28px;
                cursor: pointer;
                transition: color 300ms ease;
                letter-spacing: -1px;
            }

            div.sidebar-overlay div.inner div.side-nav mobile item[back="true"] arrow {
                font-family: 'Material Symbols Outlined';
                font-size: 44px;
                background-color: transparent;
                margin-right: 5px;
                transition: margin-left 300ms ease, color 300ms ease;
                max-height: 42px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 175;
                color: var(--basic-font-color);
            }

            div.sidebar-overlay div.inner div.side-nav item text {
                display: flex;
                color: #8F8F8F;
                font-size: 24px;
                cursor: pointer;
                transition: color 300ms ease;
                letter-spacing: -1px;
            }

            div.sidebar-overlay div.inner div.side-nav item.active text, div.sidebar-overlay div.inner div.side-nav item:hover text, div.sidebar-overlay div.inner div.side-nav item.active text {
                color: var(--basic-font-color);
            }

    


        table[myTable], table[myTable] th, table[myTable] td {
        	border: thin solid var(--basic-font-color);
        	border-collapse: separate;
        }

        table[myTable] th, table[myTable] td {
            border-bottom: none;
        	border-right: none;
        	padding: 4px 0 0 4px;
        }

        table[myTable] th {
        	border-left: none;
        }

        table[myTable] tr[first] th, table[myTable] tr[first] td {
            border-top: none;
        }

    


        scrollsby {
            display: flex;
            background-color: transparent;
            width: 100%;
            padding: 24px;
        }

        @media only screen and (max-width: 500px) {
            scrollsby {
                flex-direction: column;
            }
            scrollsby bar {
                border-bottom: 1px solid var(--basic-font-color);
                width: 100%;
                padding: 0;
                margin: 0 0 15px 0;
            }
            scrollsby items {
                width: 100%;
            }
            scrollsby items item {
                margin: 0 16px 48px 16px;
            }
            div.main item {
                margin: 0 16px 48px 16px;
            }
        }

        @media only screen and (min-width: 500px) {
            scrollsby {
                flex-direction: row;
            }
            scrollsby bar {
                border-right: 1px solid var(--basic-font-color);
                width: calc(((100vw - 50px) / 16) * 5);
                padding: 0 24px 0 0;
                margin: 0;
            }
            scrollsby items {
                width: calc(((100vw - 50px) / 16) * 11);
            }
            scrollsby items item {
                margin: 0 32px 48px 32px;
            }
            div.main item {
                margin: 0 32px 48px 32px;
            }
        }

        scrollsby bar {
            padding: 10px 0;
            scrollbar-width: none;
        }

        scrollsby bar::-webkit-scrollbar {
            display: none;
        }

        scrollsby bar button {
            outline: none !important;
            border: none !important;
            display: flex;
            background-color: transparent;
            border-radius: 8px;
            color: var(--basic-font-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 8px;
            transition: background-color 300ms ease, color 300ms ease;
            text-decoration: none;
            width: calc(100% - 48px);
            margin-right: 48px;
        }
        
        scrollsby bar button.active {
            background-color: var(--logo-color);
            color: var(--header-background-color);
        }
        
        scrollsby bar button.indent {
            margin: 4px 0 4px 24px;
            width: calc(100% - 72px);
        }
        
        scrollsby items {
            padding: 0 0 0 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: auto;
            max-height: 520px;
            scrollbar-width: none;
        }

        scrollsby items::-webkit-scrollbar {
            display: none;
        }

        scrollsby items item {
            display: flex;
            flex-direction: column;
            width: auto;
        }

        scrollsby items item titel {
            text-align: center;
            font-size: var(--title-font-size);
            padding: 10px;
            font-weight: 600;
            max-width: 650px;
        }

        scrollsby items item[father] titel {
            font-size: var(--title-indent-font-size);
            font-weight: 500;
        }

        scrollsby items item text {
            text-align: center;
            font-size: var(--text-font-size);
            max-width: 650px;
        }

    


        @media only screen and (min-width: 1120px) {
            slideshow img {
                width: 100vw;
                height: calc((100vw / 16) * 9);
            }
            slideshow {
                height: calc((100vw / 16) * 9);
            }
            slideshow div.image-overlay {
                padding-top: calc((100% / 4) - 5%);
            }
        }

        @media only screen and (max-width: 1120px) {
            slideshow img {
                width: 1120px;
                height: 630px;
            }
            slideshow {
                height: 630px;
            }
            slideshow div.image-overlay {
                padding-top: 225px;
            }
        }

        slideshow {
            width: 100%;
            overflow: hidden;
            position: relative
        }

        slideshow div.image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
            display: flex;
            text-align: center;
            color: #fff;
            align-items: center;
            flex-direction: column;
            letter-spacing: 4px;
            font-weight: 500;
            font-size: var(--header-text-font-size);
            padding-left: 5%;
            padding-right: 5%;
        }

        slideshow div.image-overlay div.small-text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: auto;
            height: auto;
            z-index: 1;
            color: rgba(255, 255, 255, 0.75);
            padding: 0 0 5px 5px;
            font-size: var(--small-text-font-size);
            letter-spacing: normal;
        }
        
        slideshow img {
            opacity: 0;
            transition: opacity 1s ease-out;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        slideshow img.active {
            opacity: 1;
        }
    


        zitation[count] {
            display: inline-flex;
            position: relative;
        }

        zitation[count] name {
            font-size: var(--text-font-size);
            cursor: pointer;
            color: var(--basic-font-color);
            font-weight: 450;
        }

        zitation[count] div.overlay {
            opacity: 0;
            transition: opacity 300ms ease-in, visibility 300ms ease-in, margin-top 250ms ease;
            position: absolute;
            top: 0%;
            display: flex;
            flex-direction: column;
            text-align: left;
            visibility: hidden;
            background-color: var(--body-background-color);
            color: var(--basic-font-color);
            box-shadow: var(--box-shadow);
            padding: 16px 0 50px 16px;
            max-width: 250px;
            width: 250px;
            margin-top: 80px;
            z-index: 10000;
            font-size: var(--text-font-size);
            font-weight: 400;
        }

        zitation[count] div.overlay div.source {
            text-decoration: underline;
            cursor: pointer;
            padding: 5px;
            margin: 0 0 10px 0;
            width: fit-content;
            width: -moz-fit-content;
        }

        zitation[count] div.overlay div.redirect {
            text-decoration: none;
            cursor: pointer;
            padding: 5px;
            margin: 20px 20px -40px auto;
            display: flex;
            align-items: center;
        }

        zitation[count] div.overlay div.redirect div.icon {
            font-family: 'Material Symbols Outlined';
            font-size: 18px;
        }

        zitation[count]:hover div.overlay, zitation[count]:active div.overlay, zitation[count].active div.overlay {
            opacity: 1;
            visibility: visible;
            margin-top: 30px;
        }