/******** STYLING KLASSEN *******/

/* Farben */

.background--color-primary {
    --color-background: var(--color-primary);
    --color-text: var(--color-white);
    --color-headings-primary: var(--color-text);
    --color-headings-secondary: var(--color-text);

    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));
}

.background--placeholder {
    --color-background: var(--color-placeholder);
    --color-text: var(--color-black);
    
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));
}

.background--special {
    background: var(--background-special);
}

.background--intense {
    --color-background: var(--color-dark);
    --color-text: var(--color-light);
    --color-headings-primary: var(--color-white);
    --color-headings-secondary: var(--color-very-light);

    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));
}

.background--grey {
    --color-background: var(--color-grey);
    --color-text: var(--color-white);
    --color-headings-primary: var(--color-white);
    --color-headings-secondary: var(--color-white);

    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));
}

/* Formen */

.shape__definitions {
    position: absolute;
    top: -10000px;
    left: 0;
}

.shape {
    position: absolute;
    left: 0;
    right: 0;
    height: 6.5vw;
    max-height: 3em;
    width: 100%;
    z-index: 200;
    box-sizing: border-box;
}

.shape--subtile {
    max-height: 2em;
}

.shape::before,
.shape::after {
    background-color: rgb(var(--color-shape));
}

.shape::before {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100% - 1em);
    left: 0;
}

.shape::after {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(1em + 2px);
    left: 0;
}

.shape--position-top,
.shape--position-top::after {
    top: 0;
}

.shape--position-top::before {
    bottom: 0;
    transform: rotate(180deg);
    transform-origin: center;
}

.shape--position-bottom,
.shape--position-bottom::after {
    bottom: 0;
}

.shape--position-bottom::before {
    top: 0;
}

.shape--header::before {
    -webkit-clip-path: var(--shape-header);
    -moz-clip-path: var(--shape-header);
    -ms-clip-path: var(--shape-header);
    -o-clip-path: var(--shape-header);
    clip-path: var(--shape-header);
}

.shape--content-1::before {
    -webkit-clip-path: var(--shape-content-1);
    -moz-clip-path: var(--shape-content-1);
    -ms-clip-path: var(--shape-content-1);
    -o-clip-path: var(--shape-content-1);
    clip-path: var(--shape-content-1);
}

.shape--content-2::before {
    -webkit-clip-path: var(--shape-content-2);
    -moz-clip-path: var(--shape-content-2);
    -ms-clip-path: var(--shape-content-2);
    -o-clip-path: var(--shape-content-2);
    clip-path: var(--shape-content-2);
}

.shape--images-1 {
    -webkit-clip-path: var(--shape-images-1);
    -moz-clip-path: var(--shape-images-1);
    -ms-clip-path: var(--shape-images-1);
    -o-clip-path: var(--shape-images-1);
    clip-path: var(--shape-images-1);  
}

/* Schatten */

.shadow {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    transition: filter var(--transition-fast) ease-out;
}

.shadow--very-light {
    filter: drop-shadow(0 0 10px rgba(var(--color-shadow), .02));
}

.shadow--light {
    filter: drop-shadow(0 0 18px rgba(var(--color-shadow), .05));
}

.shadow--medium {
    filter: drop-shadow(5px 4px 0 rgba(var(--color-shadow), .15)) drop-shadow(0 0 25px rgba(var(--color-shadow), .1));
}

.shadow--medium--subtile {
    filter: drop-shadow(0 0 13px rgba(var(--color-shadow), .5));
}

.shadow--intense {
    filter: drop-shadow(6px 5px 0 rgba(var(--color-shadow), .15)) drop-shadow(0 0 30px rgba(var(--color-shadow), .3));
}

.shadow--hover:not(:hover) {
    filter: drop-shadow(0 0 0 transparent);
}

.shadow--text {
    filter: drop-shadow(0 0 4px rgba(var(--color-shadow), .7));
}

/******** KERNSTRUKTUR *******/

html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));
    font-family: var(--font-base);
}

body {
    width: 100%;
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .title {
    line-height: 1.4;
}

h1, h2, h3 {
    color: rgb(var(--color-headings-primary));
}

h4, h5, h6 {
    color: rgb(var(--color-headings-secondary));
}

.anchor:target:before {
    content:"";
    display:block;
    height: 2em;
    margin-top: -2em;
}

p, ul, ol, blockquote, .text {
    line-height: 1.625;
}

blockquote {
    margin-left: 0;
    margin-right: 0.5em;
    padding-left: 1em;
    border-left: 3px solid rgb(var(--color-primary));
}

iframe {
    border: none;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

pre {
    padding: 1.5em 1em 1.2em 1.25em;
    background-color: rgb(var(--color-dark));
    color: rgb(var(--color-white));
}

.text--clearfix::after {
    content: '';
    clear: both;
    display: table;
}

@media (min-width: 85rem) {
    .anchor:target:before {
        height: 10em;
        margin-top: -10em;
    }
}

/******** ALLGEMEINE ELEMENTE *******/

.scroll-wrapper {
    overflow-y: auto;
}

/* Buttons */

.button {
    display: block;
    background-color: rgb(var(--color-secondary));
    -webkit-clip-path: var(--shape-button-1);
    -moz-clip-path: var(--shape-button-1);
    -ms-clip-path: var(--shape-button-1);
    -o-clip-path: var(--shape-button-1);
    clip-path: var(--shape-button-1);
    transition: background-color var(--transition-fast) ease-out;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    visibility: visible;
    opacity: 1;
    transition: opacity var(--transition-fast) ease-out 0s, visibility 0s linear var(--transition-fast);
}

.button--icon {
    padding: 1em;
    display: flex;
    background-color: transparent;
    border: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
}

.button--disabled {
    cursor: not-allowed;
}

.button--hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast) ease-out 0s, visibility 0s linear var(--transition-fast);
}

.button--color-inverted {
    background-color: rgb(var(--color-text));
    color: rgb(var(--color-background));
}

.button.button--shape-2 {
    -webkit-clip-path: var(--shape-button-2);
    -moz-clip-path: var(--shape-button-2);
    -ms-clip-path: var(--shape-button-2);
    -o-clip-path: var(--shape-button-2);
    clip-path: var(--shape-button-2);   
}

.button.button--shape-3 {
    -webkit-clip-path: var(--shape-button-3);
    -moz-clip-path: var(--shape-button-3);
    -ms-clip-path: var(--shape-button-3);
    -o-clip-path: var(--shape-button-3);
    clip-path: var(--shape-button-3);   
}

.button__label {
    display: block;
    padding: 1rem 1.75rem;
    background-color: transparent;
    border: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.button--silhouette:not(:hover) {
    background-color: rgba(var(--color-black), 0.05) !important;
}

/* Listen */

.list--only-structure {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list--margin-medium > .list__item {
    margin-bottom: 1.15em;
}

.list--margin-small > .list__item {
    margin-right: 0.6em;
}

.list--horizontal,
.list--grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.list--horizontal.list--margin-medium > .list__item,
.list--grid.list--margin-medium > .list__item {
    margin-right: 1.15em;
}

.list--horizontal.list--margin-small > .list__item,
.list--grid.list--margin-small > .list__item {
    margin-right: 0.6em;
}

.list--horizontal.list--margin-medium > .list__item,
.list--horizontal.list--margin-small > .list__item {
    margin-bottom: 0;
}

.list--horizontal > .list__item:last-child {
    margin-right: 0;
}

.list--horizontal-scroll {
    flex-wrap: nowrap;
    width: -moz-fit-content;
    width: fit-content;
    padding-right: 4.25rem;
    scroll-behavior: smooth;
}

.list--center-items-vertically {
    align-items: center;
}

@media (min-width: 85rem) {
    .list--force-desktop-size {
        padding-right: 0;
    }
}

/* Karten */

.card {
    border: rgba(var(--color-text),0.1) 2px dashed;
    padding: 1.25em 1em 1em 1em;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    background: rgb(var(--color-background));
}

body.dark .card {
    border: rgba(var(--color-text),0.2) 2px dashed;
}

.card__featured-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.card__featured-image__placeholder {
    position: relative;
    left: calc(-1em - 2px);
    top: calc(-1.25em - 2px);
    width: calc(100% + 2em + 4px);
    margin-bottom: -0.3em;
    padding-top: 50%;
}

.card__title {
    margin-top: 0;
}

.card__meta {
    line-height: 1;
    width: 100%;
    font-size: 0.8em;
    color: rgba(var(--color-text), 0.6);
    justify-content: flex-end;
    margin-top: 0.5em;
}

.card__line {
    border: none;
    background-color: rgba(var(--color-text), 0.1);
    height: 1px;
    width: 90%;
    margin: 0.75em auto;
}

body.dark .card__line {
    background-color: rgba(var(--color-text), 0.2);
}

/* Modals */

.modal__background {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(var(--color-text), 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.modal__state:checked + .modal__background {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.modal__trigger {
    cursor: pointer;
}

.modal {
    background-color: rgb(var(--color-background));
    min-height: 15em;
    width: 80%;
    max-height: 80%;
    max-width: 35em;
    position: relative;
    display: flex;
}

.modal--type-person {
    max-width: 30em;
    max-height: 10em;
    max-height: calc(80% - 8em);
    margin-top: 8em;
}

.modal--type-person > .modal__title {
    max-width: calc(50% - 5em);
}

.modal__content {
    padding: 1em 1.5em 1.5em 1.5em;
}

.modal--type-person .modal__content {
    padding-top: 4em;
    
}

.modal__portrait {
    position: absolute;
    height: 10em;
    width: 10em;
    border-radius: 50%;
    margin: -5em;
    left: 50%;
    top: 0;
}

.modal__close {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    width: 3em;
    height: 3em;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* DSGVO Wrapper */

.dsgvo-wrapper {
    font-size: 0.8rem;
    box-sizing: border-box;
}

.dsgvo-wrapper--fill-parent {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dsgvo-wrapper--type-none {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
}

.dgsvo-wrapper--shaped-bottom {
    height: calc(100% - 2em);
}

.dsgvo-wrapper > p:first-child {
    margin-top: 0;
}

.dgsvo-wrapper__poster {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.dsgvo-wrapper__video-play {
    position: absolute;
    top: calc(50% - 0.5em);
    left: 50%;
    width: 4rem;
    height: 4rem;
    margin: -2rem;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 2.25em;
    cursor: pointer;
}

.dgsvo-wrapper__poster ~ .dsgvo-wrapper__video-play {
    opacity: 0.75;
    filter: drop-shadow(1px 1px 1px rgba(255,255,255,0.6)) drop-shadow(0px 0px 10px white);
}

.dsgvo-wrapper__text--bottom {
    position: absolute;
    max-width: 60em;
    margin: 0 auto;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    padding: 0 2rem;
}

.dgsvo-wrapper__poster ~ .dsgvo-wrapper__text--bottom {
    text-shadow: 1px 1px 1px white;
    line-height: 1.2;
    opacity: 0.75;
}

.dsgvo-wrapper__video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* Hinweise */

.hint {
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition-fast) ease-out 0s, visibility 0s linear var(--transition-fast);
    font-size: 0.9em;
}

.hint--visible {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

@keyframes swipedot {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        transform: translateX(-2em);
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    90% {
        transform: translateX(0);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.hint__swipe-dot {
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: rgb(var(--color-text));
    box-shadow: 0 0 3px rgb(var(--color-text));
    top: 50%;
    margin: -0.75em;
    left: -2em;
    animation-name: swipedot;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.hint__text {
    margin: 0;
}

.hint--slider-swipe {
    position: absolute;
    bottom: 4.2em;
    left: 0;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}

@media (max-width: 450px) {
    .hint--slider-swipe {
        bottom: 2.5em;
        width: 9em;
        left: 7em;
    }
}

/* Scroll Navigatoren */

.scroll-control__left,
.scroll-control__right {
    position: absolute;
    z-index: 200;
    font-size: 1.2em;
    width: 1em;
    margin-top: -1.5em;
    top: 50%;
    box-sizing: content-box;
    opacity: 0.4;
    transition: opacity var(--transition-fast) ease-out 0s;
    display: none;
    cursor: pointer;
}

.scroll-control__left.button--disabled,
.scroll-control__right.button--disabled {
    opacity: 0.1 !important;
    cursor: not-allowed;
}

.scroll-control__left:hover,
.scroll-control__right:hover {
    opacity: 1;
}

.scroll-control__left {
    left: 0;
}
.scroll-control__right {
    right: 0;
}

@media (min-width: 85rem) {
    .block__content--horizontal-scroll > .scroll-control__left,
    .block__content--horizontal-scroll > .scroll-control__right {
        display: block;
    }
}

/******** MAIN STRUKTUR *******/

main {
    width: 100%;
    overflow-x: hidden;
    flex: 1;
}

main a,
.link {
    border-bottom: rgb(var(--color-secondary)) dashed 1px;
    transition: border-bottom-color var(--transition-fast) ease-out;
}

main a:hover,
.link:hover {
    border-bottom-color: rgb(var(--color-accent));
}

.link--invisible {
    border-bottom: none;
    transition: none;
}

.link--wrapper {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
}

.link--hover {
    transition: color var(--transition-fast) ease-out 0s;
}

.link--hover:hover {
    color: rgb(var(--color-secondary));
}

main p,
.text {
    margin: 0.7em 0;
}

.text--adaptive-size {
    font-size: calc(16px + 2 * (100vw - 300px) / 1300);
}

.text--missing::after {
    content: '\2026';
}

main ul, 
main ol {
    margin: 0.9em 0;
}

main h1 {
    font-size: calc(28px + 13.6 * (100vw - 300px) / 1300);
    margin: 1em 0 0.5em 0;
    font-weight: 700;
    text-transform: uppercase;
}

main h2 {
    font-size: calc(24px + 8 * (100vw - 300px) / 1300);
    margin: 0.3em 0 0.2em 0;
    font-weight: 700;
}

main h3 {
    font-size: calc(20.8px + 4.8 * (100vw - 300px) / 1300);
    margin: 0.6em 0 0.3em 0;
    font-weight: 600;
}

main h4 {
    font-size: calc(20px + 0.8 * (100vw - 300px) / 1300);
    margin: 0.6em 0 0 0;
    font-weight: 500;
}

main h5 {
    font-size: 17.6px;
    font-weight: 400;
    margin: 0.6em 0 0 0;
    font-weight: normal;
}

main h6 {
    font-size: 16px;
    font-weight: normal;
    margin: 0.6em 0 0 0;
}

main h1 + p, 
main h2 + p, 
main h3 + p, 
main h4 + p, 
main h5 + p, 
main h6 + p {
    margin-top: 0.4em;
}

main p + h1, main ul + h1, main ol + h1, main blockquote + h1,
main p + h2, main ul + h2, main ol + h2, main blockquote + h2,
main p + h3, main ul + h3, main ol + h3, main blockquote + h3,
main p + h4, main ul + h4, main ol + h4, main blockquote + h4,
main p + h5, main ul + h5, main ol + h5, main blockquote + h5,
main p + h6, main ul + h6, main ol + h6, main blockquote + h6 {
    margin-top: 2em;
}

@media (min-width: 1600px) {
    main .text--adaptive-size {
        font-size: 18px;
    }

    main h1 {
        font-size: 41.6px;
    }

    main h2 {
        font-size: 32px;
    }

    main h3 {
        font-size: 25.6px;
    }

    main h4 {
        font-size: 20.8px;
    }  
}

@media (max-width: 300px) {
    main .text--adaptive-size {
        font-size: 16px;
    }

    main h1 {
        font-size: 28px;
    }

    main h2 {
        font-size: 24px;
    }

    main h3 {
        font-size: 20.8px;
    }

    main h4 {
        font-size: 20px;
    }  
}

.page-content--top-spacing {
    padding-top: calc(100vw / 15);
}

@media (min-width: 1501px) {
    .page-content--top-spacing {
        padding-top: 18em;
    }
}

/******** SEITENINHALT UND BLOCKS *******/

.page-content {
    width: 100%;
    overflow-x: hidden;
}

.block,
.block-group {
    position: relative;
    width: 100%;
}

.block--shaped {
    overflow: hidden;
}

.block--shape-space-top {
    padding-top: 5em;
}

.block--shape-space-bottom {
    padding-bottom: 5em;
}

.block__content {
    width: 100%;
    max-width: 85rem;
    margin: 0 auto;
    padding: 1.5em 5%;
    box-sizing: border-box;
}

.block__content--horizontal-scroll > .block__scroll-container {
    padding-left: 5vw;
    padding-right: 5vw;
}

.block__content--horizontal-scroll {
    max-width: none;
    overflow-x: auto;
    padding-left: 0;
    padding-right: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.block__content--horizontal-scroll::-webkit-scrollbar {
  display: none;
}

@media (min-width: 85rem) {
    .block__content {
        padding-left: 4.25rem;
        padding-right: 4.25rem;
    }

    .block__content--horizontal-scroll {
        padding-left: 0;
        padding-right: 0;
    }

    .block__content--horizontal-scroll > .block__scroll-container {
        padding-left: calc((100vw - 85rem) / 2 + 4.25rem);
        padding-right: calc((100vw - 85rem) / 2 + 4.25rem);
    }

    .block__content--horizontal-scroll::before,
    .block__content--horizontal-scroll::after {
        content: '';
        width: calc((100vw - 85rem) / 2 + 4.25rem);
        position: absolute;
        top: 0;
        height: 100%;
        pointer-events: none;
        z-index: 300;
    }

    .block__content--horizontal-scroll::before {
        left: 0;
        background: linear-gradient(-90deg, transparent, rgb(var(--color-background)));
    }

    .block__content--horizontal-scroll::after {
        right: 0;
        background: linear-gradient(90deg, transparent, rgb(var(--color-background)));
    }
}

@media (min-width: 85rem) {
    .block__content--force-desktop-size {
        max-width: 85rem;
        padding-right: 4.25rem;
        padding-left: 4.25rem;
    }

    .block__content--force-desktop-size > .block__scroll-container {
        padding-left: 0;
        padding-right: 0;
    }
}

.block__content--full-width {
    padding: 0;
    max-width: none;
}

/******** BLOCKS *******/

/* Seitentitel */

.block--type-page-title > .block__content {
    padding-bottom: 0;
}

.page-title {
    margin: 0 !important;
    padding: 0;
    line-height: 1.2;
}

.page-subtitle {
    text-transform: uppercase;
    margin-top: 0.2em;
    font-weight: normal;
}

.page-title-meta {
    margin-top: 0.5em;
    color: rgba(var(--color-text), 0.6);
}

/* Überschriften */

.block--type-heading .block__content {
    padding-bottom: 0.5em;
}

.block--type-heading h1,
.block--type-heading h2,
.block--type-heading h3 {
    margin: 0;
    padding: 0;
}

/* Text */

.block-text__text > :first-child {
    margin-top: 0;
}

.block-text__text > figure {
    margin-left: 0;
    margin-right: 0;
}

.block-text__text > figure > img {
    width: 100%;
}

@media (min-width: 85rem) {
    .block-text__text {
        max-width: 55rem;
    }
}

/* Bilder bzw. Gallerien und Medien */

.block--type-media > .block__content {
    width: 100%;
    margin: 0;
    z-index: 800;
}

.block--type-media.block-media--position-left > .block__content
.block--type-media.block-media--position-center > .block__content
.block--type-media.block-media--position-right > .block__content {
    padding-bottom: 0;
}

.block-media__gallery {
    position: relative;
    width: 100%;
    padding-top: 64%;
}

@media (max-width: 700px) {
    .block-media__gallery {
        -webkit-clip-path: none;
        -moz-clip-path: none;
        -ms-clip-path: none;
        -o-clip-path: none;
        clip-path: none;
    }
}

.block-media__embedded {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
}

.block-media__image,
.block-media__full,
.block-media__preview {
    width: 100%;
    height: 100%;
}

.block-media__image {
    position: absolute;
    left: 0; top: 0;
    margin: 0;
}

.block-media__preview {
    object-fit: cover;
    object-position: center;
}

.block-media__copyright {
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;
    font-size: 0.8em;
    color: rgb(var(--color-white));
}

.block-media--position-independently {
    margin: 1em 0;
}

.block-media--position-independently > .block__content {
    margin: 0 auto;
}

@media (min-width: 85rem) {
    .block--type-media > .block__content {
        position: relative;
        padding: 0;
    }

    /* Größen */

    .block-media--size-big > .block__content {
        width: 45vw;
    }

    .block-media--size-medium > .block__content {
        width: 35vw;
    }

    .block-media--size-small > .block__content {
        width: 25vw;
    }

    /* Positionen */

    .block-media--position-right > .block__content {
        float: right;
    }

    .block-media--position-left > .block__content {
        float: left;
    }

    .block-media--position-center  {
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    /* Zentriert */

    .block-media--position-center.block-media--size-big > .block__content {
        margin-left: calc((100vw - 85rem) / 2 + 2.5rem);
    }

    .block-media--position-center.block-media--size-medium > .block__content {
        margin-left: calc((100vw - 85rem) / 2 + 2.8rem);
    }

    .block-media--position-center.block-media--size-small > .block__content {
        margin-left: calc((100vw - 85rem) / 2 + 3.1rem);
    }

    /* Rechts */

    .block-media--position-right.block-media--size-big > .block__content {
        margin-left: 2em;
        margin-right: 6vw;
    }

    .block-media--position-right.block-media--size-medium > .block__content {
        margin-left: 2em;
        margin-right: 8.5vw;
        margin-top: 1em;
    }

    .block-media--position-right.block-media--size-small > .block__content {
        margin-left: 3em;
        margin-right: calc((100vw - 85rem) / 2 + 4.25rem);
        margin-top: 2em;
    }

    /* Links */

    .block-media--position-left.block-media--size-big > .block__content {
        margin-left: calc((100vw - 85rem) / 2 + 4.25rem - 4.5vw);
        margin-right: 3em;
    }

    .block-media--position-left.block-media--size-medium > .block__content {
        margin-left: calc((100vw - 85rem) / 2 + 4.25rem - 3vw);
        margin-right: 3em;
    }

    .block-media--position-left.block-media--size-small > .block__content {
        margin-left: calc((100vw - 85rem) / 2 + 2.25rem);
        margin-right: 3em;
        margin-top: 1em;
    }

    /* Unabhängig */

    .block-media--position-independently {
        margin: 3em 0;
    }

    /* Nebeneffekte */

    .block-media--position-left + .block--type-text .block-text__text {
        max-width: none;
    }

    .block--type-text + .block-media--position-left,
    .block--type-text + .block-media--position-center,
    .block--type-text + .block-media--position-right {
        margin-top: 3em;
    }

    .block--type-media + .block--type-text.text--clearfix {
        margin-bottom: 3em;
    }

    .block-media--position-left + .block--type-text .block-text__text,
    .block-media--position-right + .block--type-text .block-text__text {
        width: auto;
        overflow: hidden;
    }
}

@media (min-width: 125rem) {
    .block-media--size-big > .block__content {
        width: 56.25rem;
    }

    .block-media--size-medium > .block__content {
        width: 43.75rem;
    }

    .block-media--size-small > .block__content {
        width: 31.25rem;
    }
}

@media (max-width: 85rem) and (min-width: 700px) {
    .block-media--position-left.block-media--size-big > .block__content,
    .block-media--position-center.block-media--size-big > .block__content,
    .block-media--position-right.block-media--size-big > .block__content {
        margin-left: -1.5em;
    }

    .block-media--position-left.block-media--size-medium > .block__content,
    .block-media--position-center.block-media--size-medium > .block__content,
    .block-media--position-right.block-media--size-medium > .block__content {
        margin-left: -1em;
    }

    .block-media--position-left.block-media--size-small > .block__content,
    .block-media--position-center.block-media--size-small > .block__content,
    .block-media--position-right.block-media--size-small > .block__content {
        margin-left: -0.5em;
    }

    .block-media--size-big > .block__content {
        max-width: 60rem;
    }

    .block-media--size-medium > .block__content {
        max-width: 45rem;
    }

    .block-media--size-small > .block__content {
        max-width: 30rem;
    }
}

@media (max-width: 85rem) {
    .block-media--position-left > .block__content,
    .block-media--position-center > .block__content,
    .block-media--position-right > .block__content {
        padding-bottom: 0.3em;
    }
}

/* News */

@media (min-width: 85rem) {
    .block-news__item {
        flex: 1 0 0;
    }
}

@media (max-width: 85rem) {
    .block-news__message {
        width: 25em;
        max-width: calc(90vw - 2em);
    }
}

@media (min-width: 85rem) {
    .block-news__message {
        max-width: 26em;
        min-width: 20em;
    }
}

.block-news__related-list {
    margin-bottom: 1em;
}

.block-news__related {
    color: rgba(var(--color-text), 0.8);
}

.block-news__embedded-item {
    position: relative;
    margin-left: 0;
    margin-right: 0;
}

.block-news__embedded-item > .dsgvo-wrapper--type-video {
    font-size: 0.6em !important;
}

/* Kacheln */

.block-tiles__item {
    position: relative;
    width: 100%;
    height: calc(50vw + 2em);
}

.block-tiles__tile,
.block-tiles__link,
.block-tiles__image {
    width: 100%;
    height: 100%;
}

.block-tiles__image {
    object-fit: cover;
    object-position: center;
}

.block-tiles__description-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.block-tiles__description-wrapper::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background-color var(--transition-fast) ease-out 0s;
}

.block-tiles__item:hover .block-tiles__description-wrapper::before {
    background-color: rgba(var(--color-black), 0.6);
}

.block-tiles__description {
    width: 100%;
    transform: translateY(0);
    transition: transform var(--transition-fast) ease-out 0s;
}

.block-tiles__item:hover .block-tiles__description {
    transform: translateY(-3em);
}

.block-tiles__tag,
.block-tiles__tag-shape {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
}

.block-tiles__tag-shape {
    -webkit-clip-path: var(--shape-tag-1);
    -moz-clip-path: var(--shape-tag-1);
    -ms-clip-path: var(--shape-tag-1);
    -o-clip-path: var(--shape-tag-1);
    clip-path: var(--shape-tag-1);
}

.block-tiles__label {
    margin: 0;
    padding: 0.4em 1.5em;
}

.block-tiles__text {
    margin: 1em auto 0;
    color: rgb(var(--color-white));
    text-align: center;
    position: absolute;
    left: 0; right: 0;
    opacity: 0;
    width: 80%;
    max-width: 31em;
    transition: opacity var(--transition-fast) ease-out 0s;
}

.block-tiles__item:hover .block-tiles__text {
    opacity: 1;
}

@media (max-width: 1200px) {
    .block-tiles__item:first-child,
    .block-tiles__item:last-child {
        height: calc(50vw + 3em);
    }

    .block-tiles__item:first-child .block-tiles__description {
        margin-top: 1.5em;
    }

    .block-tiles__item:last-child .block-tiles__description {
        margin-bottom: 1.5em;
    }
}

@media (min-width: 1200px) {
    .block-tiles__content {
        /*transform: rotate(-2deg) scale(1.03);*/
    }

    .block-tiles__item {
        width: 50%;
        height: 25vw;
    }

    .block-tiles__item:nth-child(1) .block-tiles__description,
    .block-tiles__item:nth-child(2) .block-tiles__description {
        margin-top: 2em;
    }

    .block-tiles__item:nth-child(3) .block-tiles__description,
    .block-tiles__item:nth-child(4) .block-tiles__description {
        margin-bottom: 2em;
    }
}

/* FAQ */

.faq__details {
    margin-bottom: 1em;
}

.faq__question {
    font-weight: bold;
    padding: 0.5em 0;
    cursor: pointer;
}

/* SOCIAL MEDIA */

.block--type-social-media {
    z-index: 300;
}

.block-social-media__item {
    color: rgb(var(--color-text));
    width: 100%;
    position: relative;
}

.block-social-media__link {
    font-size: 1.1em;
    font-weight: 500;
    width: 100%;
    cursor: pointer;
    display: block;
    padding: 0.5em 0.75em;
    box-sizing: border-box;
    background-color: rgb(var(--color-background));
}

.block-social-media__content-wrapper {
    overflow-y: hidden;
    z-index: 301;
    width: 100%;
    background-color: rgb(var(--color-background));
}

.block-social-media__item--collapsed .block-social-media__content-wrapper {
    height: 0;
    z-index: initial;
}

.block-social-media__content {
    padding: 0 1em 1em 1em;
}

.block-social-media__code-image {
    width: 100%;
    max-width: 15em;
    max-height: 100vh;
    display: block;
    margin: 0.75em auto 0;
}

.block-social-media__description > p:last-child {
    margin-bottom: 0;
}

.block-social-media__content--type-embedded {
    padding: 0.5em;
}

.block-social-media__content--type-embedded > .dsgvo-wrapper {
    padding: 0.5em;
}

.block-social-media__content > iframe {
    min-height: 25em;
    min-width: 20em;
    margin: 0 auto;
    max-width: 100% !important;
}

@media (min-width: 1200px) {
    .block-social-media__item {
        flex: 1 0 0;
        width: auto;
    }

    .block-social-media__content-wrapper {
        position: absolute;
        min-width: 20em;
        width: auto;
    }

    .block-social-media__content {
        padding-top: 1em;
    }
}

@media (min-width: 900px) {
    .block--type-social-media {
        padding-bottom: 5em;
    }

    .block-social-media__item {
        width: 50%;
    }

    .block-social-media__content-wrapper {
        position: absolute;
    }

    .block-social-media__item:last-child .block-social-media__content-wrapper,
    .block-social-media__item:nth-last-child(2) .block-social-media__content-wrapper {
        right: 0;
    }
}

@media (max-width: 400px) {
    .block-social-media__content--type-embedded {
        overflow-y: scroll;
        padding: 0;
    }
}

/* LANDESVERBÄNDE */

.block--type-map > .block__content {
    max-width: 100rem;
    display: flex;
    flex-direction: row;
}

.block-map__map {
    width: 50%;
    text-align: center;
}

.block-map__map-svg {
    max-height: 75vh;
}

.block-map__map-svg path {
    cursor: pointer;
    stroke: rgb(var(--color-background));
    stroke-width: 1px;
    fill: rgb(var(--color-very-light));
    transition: fill 0.3s ease-out 0s;
}

.block-map--invert-color .block-map__map-svg path {
    fill: rgb(var(--color-primary));
}

.block-map__map-svg path:hover {
    fill: rgb(var(--color-accent));
}

.block-map__descriptions {
    width: 45%;
    margin-left: 5%;
}

@media (max-width: 1200px) {
    .block--type-map > .block__content {
        flex-direction: column;
    }

    .block-map__map,
    .block-map__descriptions {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* PROJEKTE */

.block-projects__project {
    width: 22em;
}

/* UNTERSEITEN */

.block-subpages__card {
    width: 22em;
}

/* LOGOS */

.block-logos__logo {
    max-width: 12em;
    max-height: 6em;
}

.block-logos--size-small .block-logos__logo {
    max-width: 8em;
    max-height: 4em;
}

/* PROGRAMM */

.block-program__image {
    overflow-y: auto;
}

.block-program__blocks-title {
    margin-bottom: 0.5em;
}

/* FILE */

.block-file__object {
    max-width: 100%;
}

.block-file__object--fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}


/* REFERENT*INNEN-BOX */

.speaker-box {
    width: 11em;
    height: 11em;
    padding: 1.25em;
    box-sizing: border-box;
    margin: 0;
    background-size: cover;
    background-position: center;
    background-color: #eee; /* TODO: Better gray */
    position: relative;
}

.speaker-box--size-small {
    width: 8em;
    height: 8em;
}

.speaker-box--fit-image {
    background-size: contain;
    background-repeat: no-repeat;
}

.speaker-box__wrapper {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 1em 1em 0;
}

.speaker-box__name {
    position: absolute;
    bottom: 0.5em;
    padding: 0;
    margin: 0;
    left: 0.9em;
    width: calc(100% - 1.8em);
    text-align: left;
    color: white;
    font-weight: bold;
    line-height: 1.3;
    opacity: 1;
    text-align: right;
}

/******** ANDERE DESIGN ELEMENTE *******/

/* ICONS */

.icon {
    margin-right: 0.5em;
}

.icon--fixed-width {
    min-width: 0.9em;
    text-align: center;
}

/* EVENT BOX */

.event-box {
    --color-text: var(--color-white);

    padding: 0.85em;
    box-sizing: border-box;
    color: rgb(var(--color-text));
    background-color: rgb(var(--color-dark));
    height: 10em;
    min-width: 11em;
    max-width: 17em;
    width: -moz-available;
    position: relative;
}

.event-box__title {
    font-size: 1.05em;
    margin: 0;
    color: inherit;
    font-weight: 600;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 4.3em;
}

.event-box__description {
    font-size: 0.9em;
}

.event-box__series {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.85em;
    left: 0;
    text-align: right;
    bottom: 0;
    color: rgba(var(--color-text), 0.5);
    font-size: 0.9em;
}

/* JOB BOX AND FILE BOX */

.job-box,
.file-box {
    --color-text: var(--color-white);

    padding: 0.85rem;
    box-sizing: border-box;
    color: rgb(var(--color-text));
    background-color: rgb(var(--color-dark));
    min-width: 9rem;
    max-width: 14rem;
    position: relative;
}

.job-box__title,
.file-box__title {
    font-size: 1.05rem;
    margin: 0;
    color: inherit;
    font-weight: 600;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 4.3em;
}

.job-box__description {
    font-size: 0.9rem;
}

/* FILE BOX */

.file-box {
    padding-right: 3rem;
    padding-bottom: 2rem;
    background-color: rgb(var(--color-primary));
}

.file-box__icon {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.file-box__kind {
    position: absolute;
    box-sizing: border-box;
    padding: 0 0.85rem;
    left: 0;
    text-align: right;
    bottom: 0;
    color: rgba(var(--color-text), 0.5);
    font-size: 0.9em;
}

/******** NAVIGATION *******/

/** GLOBAL **/

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    color: rgb(var(--color-white));
    z-index: 900;
    will-change: transform;
    display: block !important;
}

.navigation--alternative-style .button {
    background-color: rgb(var(--color-primary));
}

/* SEKUNDÄR */

.navigation__websites__item__label {
    font-size: 0.8em;
    white-space: nowrap;
}

.navigation__secondary__item-list {
    font-size: 1.08em;
    line-height: 1;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.navigation__secondary__item__link {
    padding: 0.5em 0.75em;
    display: block;
}

/* PRIMÄR */

.navigation__logo {
    cursor: pointer;
}

/** MODIFIKATOREN **/

.navigation--sliceable {
    overflow-y: hidden;
}

/** RESPONSIVE **/

@media (min-width: 1501px) {
    /** GLOBAL **/

    .navigation {
        top: 1.5em;
        left: -5px;
        pointer-events: none;
    }

    .navigation__open,
    .navigation__close {
        display: none;
    }

    /** INHALT **/

    .navigation__content {
        position: relative;
        width: calc(100% - 2em);
        max-width: 1440px;
    }

    /* HINTERGRUND */

    .navigation__background-wrapper {
        width: 100%;
        z-index: 910;
    }

    .navigation__background {
        width: 100%;
        fill: rgb(var(--color-primary));
    }

    .navigation--alternative-style .navigation__background {
        fill: rgb(var(--color-secondary));
    }

    .navigation__background__path {
        pointer-events: auto;
    }

    /* SEKUNDÄR */

    .navigation__secondary-row {
        position: absolute;
        width: 96%;
        height: 36%;
        top: 0;
        left: 0;
        padding: 1.5rem 0 1rem 3rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        visibility: visible;
        opacity: 1;
        z-index: 920;
        overflow-x: hidden;
    }

    .navigation__websites {
        overflow-y: hidden;
        pointer-events: auto;
    }

    .navigation__websites,
    .navigation__websites__item-list,
    .navigation__websites__item,
    .navigation__websites__item__link {
        height: 100%;
    }

    .navigation__websites__item {
        margin-right: 2em;
        display: inline-block;
    }

    .navigation__websites__item__link {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .navigation__websites__item__logo {
        min-height: 2em;
        height: 91%;
        min-width: 2em;
        max-width: 5em;
        margin-right: 0.75em;
    }

    .navigation__secondary {
        height: -moz-fit-content;
        height: fit-content;
        margin-left: auto;
        pointer-events: auto;
    }

    /* PRIMÄR */

    .navigation__primary-row {
        position: absolute;
        width: 96%;
        height: 54%;
        top: 36%;
        left: 0;
        padding: 0.5em 1em 1em 3em;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        z-index: 940;
    }

    .navigation__logo {
        height: 100%;
        margin-right: 3em;
        min-width: 12em;
        pointer-events: auto;
    }

    .navigation__primary {
        height: -moz-fit-content;
        height: fit-content;
        line-height: 1.3;
        padding-bottom: 0.5em;
        pointer-events: auto;
    }

    .navigation__primary__item-list {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
    }

    .navigation__primary__item {
        position: relative;
        margin-right: 1em;
    }

    .navigation__primary__item__link {
        font-size: 1.4rem;
        font-weight: bold;
        line-height: 1;
        white-space: nowrap;
    }

    .navigation__dropdown {
        position: absolute;
        top: 3.5rem;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-medium) ease-out 0s, visibility 0s linear var(--transition-medium);
        min-width: 100%;
    }

    .navigation__dropdown::before {
        content: '';
        position: absolute;
        top: 0.8em;
        left: 2rem;
        border: rgb(var(--color-very-light)) 1.5em solid;
        transform: rotate(45deg);
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    body.dark .navigation__dropdown::before {
        border-color: rgb(var(--color-very-dark));
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .navigation__primary__item:hover .navigation__dropdown {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .navigation__dropdown__content {
        margin-top: 0.75em;
        -webkit-clip-path: var(--shape-navigation-dropdown-1);
        -moz-clip-path: var(--shape-navigation-dropdown-1);
        -ms-clip-path: var(--shape-navigation-dropdown-1);
        -o-clip-path: var(--shape-navigation-dropdown-1);
        clip-path: var(--shape-navigation-dropdown-1);
        background-color: rgb(var(--color-very-light));
        color: rgb(var(--color-primary));
    }

    .navigation--alternative-style .navigation__dropdown__content {
        color: rgb(var(--color-secondary));
    }

    body.dark .navigation__dropdown__content {
        background-color: rgb(var(--color-very-dark));
        color: rgb(var(--color-light));
    }

    .navigation__primary__item:nth-child(2n + 1) .navigation__dropdown__content {
        -webkit-clip-path: var(--shape-navigation-dropdown-2);
        -moz-clip-path: var(--shape-navigation-dropdown-2);
        -ms-clip-path: var(--shape-navigation-dropdown-2);
        -o-clip-path: var(--shape-navigation-dropdown-2);
        clip-path: var(--shape-navigation-dropdown-2);
    }

    .navigation__dropdown--type-superdropdown .navigation__dropdown__content {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        position: relative;
        left: -25rem;
        min-height: 17rem;
        -webkit-clip-path: var(--shape-navigation-superdropdown);
        -moz-clip-path: var(--shape-navigation-superdropdown);
        -ms-clip-path: var(--shape-navigation-superdropdown);
        -o-clip-path: var(--shape-navigation-superdropdown);
        clip-path: var(--shape-navigation-superdropdown);
    }

    .navigation__dropdown__item-list {
        padding: 0.75rem 2.75rem 0.9rem 1.5rem;
        font-size: 1.15rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .navigation__dropdown--type-superdropdown .navigation__dropdown__item-list {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        margin-left: 25rem;
    }

    .navigation__dropdown__item__link {
        padding: 0.25rem;
        display: block;
    }

    .navigation__dropdown__description-list {
        width: 25rem;
        height: 100%;
        position: absolute;
        pointer-events: none;
    }

    .navigation__dropdown__description {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        opacity: 0;
        transition: opacity var(--transition-medium) ease-out 0s, visibility 0s linear var(--transition-medium);
    }

    .navigation__dropdown__description--state-visible {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }

    .navigation__dropdown__text {
        font-size: 0.9rem;
        margin: 0;
        color: rgb(var(--color-black));
    }

    body.dark .navigation__dropdown__text {
        color: rgb(var(--color-light));
    }

    .navigation__dropdown__description--type-featured {
        display: flex;
        flex-direction: column;
    }

    .navigation__dropdown__image {
        flex: 1 0 auto;
        width: 100%;
        height: 0;
        object-fit: cover;
        -webkit-clip-path: var(--shape-navigation-superdropdown-image);
        -moz-clip-path: var(--shape-navigation-superdropdown-image);
        -ms-clip-path: var(--shape-navigation-superdropdown-image);
        -o-clip-path: var(--shape-navigation-superdropdown-image);
        clip-path: var(--shape-navigation-superdropdown-image);
    }

    .navigation__dropdown__text {
        padding: 1em 1em 1em 1.2em;
    }

    .navigation__dropdown__logo-wrapper {
        padding: 2em 3em 1em 3em;
        width: 100%;
        height: 8em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navigation__dropdown__logo {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    /** MINIFIED **/

    .navigation,
    .navigation__background,
    .navigation__primary-row,
    .navigation__websites,
    .navigation__secondary {
        transform: translateY(0);
    }

    .navigation--animateable,
    .navigation--animateable .navigation__background,
    .navigation--animateable .navigation__primary-row,
    .navigation--animateable .navigation__websites,
    .navigation--animateable .navigation__secondary {
        transition: transform var(--transition-slow) ease-in-out 0s;
    }

    .navigation--animateable .navigation__secondary-row {
        transition: opacity var(--transition-slow) ease-in-out 0s, visibility 0s linear 0s;
    }

    .navigation--state-minified {
        transform: translateY(-0.5em);
    }

    .navigation--state-minified .navigation__background,
    .navigation--state-minified .navigation__primary-row,
    .navigation--state-minified .navigation__websites,
    .navigation--state-minified .navigation__secondary {
        transform: translateY(-4.5em);
    }
}

@media (max-width: 1500px) {
    /** GLOBAL **/

    .navigation {
        transform: translate(100vw, -100vh);
        background-color: rgb(var(--color-primary));
        height: 100vh;
    }

    .navigation::before {
        content: '';
        position: absolute;
        top: 0;
        left: -4rem;
        width: 4rem;
        height: 100vh;
        background-color: rgb(var(--color-primary));
    }

    .navigation::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: -4rem;
        height: 4rem;
        width: 100vw;
        background-color: rgb(var(--color-primary));
    }

    .navigation--alternative-style,
    .navigation--alternative-style::before,
    .navigation--alternative-style::after {
        background-color: rgb(var(--color-secondary));
    }

    /* MOBILE BUTTONS */

    .navigation__open,
    .navigation__close {
        position: absolute;
        height: 4rem;
        width: 4rem;
        box-sizing: border-box;
        font-size: 1.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding-left: 0.2rem;
        padding-bottom: 0.2rem;
    }

    .navigation__open {
        bottom: -4rem;
        left: -4rem;
        -webkit-clip-path: var(--shape-navigation-open);
        -moz-clip-path: var(--shape-navigation-open);
        -ms-clip-path: var(--shape-navigation-open);
        -o-clip-path: var(--shape-navigation-open);
        clip-path: var(--shape-navigation-open);
        background-color: rgb(var(--color-primary));
        color: rgb(var(--color-white));
    }

    .navigation--alternative-style .navigation__open {
        background-color: rgb(var(--color-secondary));
    }

    .navigation__close {
        position: absolute;
        right: 0;
        top: 0;
    }

    /** INHALT **/

    .navigation__content {
        padding: 3em 2em 0 8vw;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* HINTERGRUND */

    .navigation__background {
        display: none;
    }

    /* PRIMÄR */

    .navigation__logo {
        width: 100%;
        max-width: 19em;
        margin-bottom: 1.5em;
    }

    .navigation__primary__item-list {
        flex-direction: column;
        align-items: start;
    }

    .navigation__primary__item {
        font-weight: bold;
        margin-bottom: 0.5em;
    }

    .navigation__primary__item__link {
        font-size: 1.2em;
        width: min-content;
        white-space: nowrap;
    }

    .navigation__dropdown {
        filter: none;
    }

    .navigation__dropdown__item-list {
        padding: 0.25rem 4.75rem 0.75rem 1.5rem;
    }

    .navigation__dropdown__item {
        white-space: normal;
        line-height: 1.3;
        font-weight: normal;
    }

    .navigation__dropdown__item__link {
        font-size: 1.1em;
        padding: 0.25rem;
        display: block;
    }

    .navigation__dropdown__description-list {
        display: none;
    }

    /* SEKUNDÄR */

    .navigation__secondary-row {
        margin-top: 3.5em;
        padding-bottom: 6em;
        padding-left: 0.5em;
    }

    .navigation__websites {
        padding-left: 0.75em;
    }

    .navigation__websites__item-list {
        align-items: center;
    }

    .navigation__websites__item {
        margin-bottom: 1em;
        margin-right: 3em;
    }

    .navigation__websites__item__link {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .navigation__websites__item__logo {
        max-width: 5em;
        max-height: 2.75em;
        margin-right: 1em;
    }

    .navigation__secondary {
        margin-top: 2em;
    }

    .navigation__secondary__item {
        font-size: 0.9em;
    }

    /** MODIFIKATOREN **/

    .navigation--state-open.navigation {
        transform: translate(0,0);
    }

    .navigation--animateable {
        transition: transform var(--transition-slow) ease-in-out 0s;
    }
}

/******** FOOTER *******/

.footer-wrapper {
    margin-top: 2em;
    padding-top: 3.75em;
}

.footer {
    --color-background: var(--color-grey);

    margin-top: 3em;
    margin-top: calc(100vw / 30);
    color: rgb(var(--color-white));
    overflow: hidden;
}

body.dark .footer {
    --color-background: var(--color-dark);
}

.footer__background {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 400;
}

.footer__background::after {
    content: '';
    flex: 1;
    background-color: rgb(var(--color-background));
}

.footer__background__shape {
    width: 100%;
    fill: rgb(var(--color-background));
    transform-origin: 16.9% top;
    flex: none;
}

.footer__background__lines {
    fill: rgb(var(--color-primary));
}

.footer__content {
    position: relative;
    top: 0;
    width: 100%;
    padding-left: calc(16% - 1.5em);
    padding-right: 15%;
    padding-bottom: calc(1em + 2%);
    padding-top: calc(3em + 5%);
    box-sizing: border-box;
    z-index: 410;
}

.footer__logo {
    width: 34%;
    max-width: 27em;
    min-width: 20em;
}

.footer__address {
    font-style: normal;
    font-size: 0.9em;
    line-height: 1.3;
}

.footer__address__title {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 1.2em;
    line-height: 1.6;
    font-weight: bold;
}

.footer__address__icon {
    margin-right: 0.4em;
}

.footer__address__item {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.15em 0.4em 0.15em 0;
}

.footer__social-media {
    list-style: none;
    padding: 0;
    margin: 1em 0;
    font-size: 1.3em;
}

.footer__social-media__item {
    display: inline-block;
    margin-right: 0.7em;
}

.footer__navigation {
    list-style: none;
    margin: 2em 0 0 0;
    font-size: 0.9em;
    padding: 0;
}

.footer__navigation__item {
    display: inline-block;
    margin-right: 1em;
}