@charset "UTF-8";

@font-face {
    font-family: 'SWR-VAR-Sans';
    font-weight: 100 900;
    src: local("SWR-VAR-Sans"), url("../fonts/SWR-VAR-Sans.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: 'SWR-VAR-Text';
    font-weight: 100 900;
    src: local("SWR-VAR-Text"), url("../fonts/SWR-VAR-Text.woff2") format("woff2");
    font-display: swap;
}

:root {
    --sds-color-page-background-primary: #fff;
    --sds-color-text-01-default: #0c0c0c;
    --sds-color-text-02-default: #6b6b6a;
    --sds-color-miscellaneous-interactive-background-active: rgba(191, 180, 166, 0.4);
    --sds-color-button-tertiary-label-neutral: #0c0c0c;
    --sds-color-button-tertiary-invert-label: #f8f7f5;
    --sds-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --sds-color-border-tertiary-default: #dbd5cd;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sds-color-page-background-primary: #0c0c0c;
        --sds-color-text-01-default: #f8f7f5;
        --sds-color-text-02-default: #bfb4a6;
        --sds-color-miscellaneous-interactive-background-active: rgba(255, 255, 255, 0.15);
        --sds-color-button-tertiary-label-neutral: #f8f7f5;
        --sds-color-button-tertiary-invert-label: #f8f7f5;
        --sds-color-border-tertiary-default: #393a3b;
    }
}

@media (max-width: 1023px) {
    :root {
    --sds-number-article-typo-topline: 0.875rem;
        --sds-number-article-typo-headline: 1.75rem;
        --sds-number-article-typo-leadtext: 1.125rem;
        --sds-number-article-typo-quote: 1.25rem;
        --sds-number-article-typo-copy: 1.125rem;
        --sds-number-article-typo-h2: 1.5rem;
        --sds-number-article-typo-h3: 1.25rem;
        --sds-number-article-typo-h4: 1.125rem;
        --sds-number-article-typo-info-1: 1rem;
        --sds-number-article-typo-info-2: 0.875rem;
        --sds-number-article-spacing-between-elements: 24px;
        --sds-number-article-typo-linkbox: 1rem;
    }
}

@media (min-width: 1024px) {
    :root {
    --sds-number-article-typo-topline: 1.25rem;
        --sds-number-article-typo-headline: 2.5rem;
        --sds-number-article-typo-leadtext: 1.25rem;
        --sds-number-article-typo-quote: 1.5rem;
        --sds-number-article-typo-copy: 1.25rem;
        --sds-number-article-typo-h2: 2rem;
        --sds-number-article-typo-h3: 1.5rem;
        --sds-number-article-typo-h4: 1.25rem;
        --sds-number-article-typo-info-1: 1.125rem;
        --sds-number-article-typo-info-2: 1rem;
        --sds-number-article-spacing-between-elements: 32px;
        --sds-number-article-typo-linkbox: 1.125rem;
    }
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
    tab-size: 2;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    font-family: SWR-VAR-Sans, Thesis, helvetica, roboto, "droid sans", arial, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: var(--sds-color-page-background-primary);
    color: var(--sds-color-text-01-default);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    hyphens: auto;
    text-rendering: optimizeSpeed;
    min-height: 100vh;

    /* ==============================================
    NOTE: Kann auch später entfernt werden.
          Sorgt dafür, dass auch bei wenig Inhalt
          die Seite immer gestreckt wird.
    ============================================== */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

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

a:active,
a:focus,
a:hover {
    text-decoration: underline;
}

:where(p, li, figcaption) {
    text-wrap: pretty;
}

img {
    width: 100%;
    border: none;
    display: block;
}

/* visuell verstecken - für Screenreader, wenn aria-label nicht genutzt werden kann */
.sr-only {
    width: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}


/* ==== Seitenwrapper */

#content-wrapper {
    overflow-x: hidden;
}

.container {
    margin: 0 auto;
    padding-right: 10px;
    padding-left: 10px;
    min-height: 0.1px;
}

@media (max-width:767px) {
    .container {
        width: 100%;
        max-width: 510px;
    }

    .innerWrapper {
        width: 100%;
    }
}

@media (min-width:992px) {
    .container {
        width: 750px;
        max-width: 750px;
    }
}

@media (min-width:1200px) {
    .container {
        width: 996px;
        max-width: inherit;
    }
}

@media screen and (min-width: 1901px) {
    .innerWrapper {
        width: 1424px;
    }
}

/* Basis eines Druckstylesheets */

@media print {

    #header,
    #site-footer {
        display: none;
    }

    .container {
        width: 96% !important;
    }

    a[href]:after,
    a[href^="#"]:after,
    a[href^="javascript:"]:after,
    abbr[title]:after {
        content: "";
    }

    .label {
        border: none;
    }
}

/* ====================================== */
/* ========== Header ==================== */
/* ====================================== */

body.rubrik-swrneuglobal #site-header {
    position: relative;
    width: 100%;
    z-index: 50;
    align-items: flex-start;
    background-color: #1D0B40;
    border-bottom: 1px solid rgba(255, 255, 255, 20%);
}

body.rubrik-swrneuglobal #site-header-inner {
    display: flex;
    align-items: center;
    justify-content: start;
    max-width: 1440px;
    margin: 0 auto;
    height: 48px;
}

body.rubrik-swrneuglobal #site-header-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

body.rubrik-swrneuglobal #site-header-logo img {
    width: auto;
    height: 24px;
    padding: 0 16px;
}

/* ========== Darkmode ========= */
body.invert.rubrik-swrneuglobal #site-header {
    border-bottom: 1px solid rgba(0, 0, 0, 15%);
}

/* ========== >= Tablet (Portrait) ========= */
@media (min-width:768px) {
    body.rubrik-swrneuglobal #site-header-inner {
        height: 64px;
    }

    body.rubrik-swrneuglobal #site-header-logo img {
        padding: 0 40px;
    }
}

/* ========== >= Desktop ========= */
@media (min-width:1200px) {
    body.rubrik-swrneuglobal #site-header-logo img {
        padding: 0 80px;
    }
}

/* ====================================== */
/* ========== Footer ==================== */
/* ====================================== */

#site-footer {
    background-color: #1D0B40;
}

#site-footer .innerWrapper {
    max-width: 1440px;
    margin: 0 auto;
}

.footer-legallist {
    list-style: none;
    color: #ffffff;
    display: grid;
    grid-template-columns: max-content max-content auto;
    padding: 0;
    margin: 40px 0 0 0;
    width: 100%;
    row-gap: 8px;
}

.footer-legallist::after {
    content: url("../images/SWR_secondary.svg");
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    grid-column: 1 / 4;
    grid-row: 2;
    top: 4px;
}

.footer-legallist a {
    font-size: 0.875rem;
    line-height: 1.094rem;
}

.footer-legallist a {
    color: #ffffff;
}

.footer-legallist a:focus {
    outline: 1px solid #ffffff;
}

.footer-privacy::after {
    content: "";
    display: block;
    position: absolute;
    border-left: 1px solid #ffffff;
    width: 1px;
    height: 20px;
    right: 0;
    opacity: 0.4;
    top: -1px;
}

.footer-privacy {
    grid-column: 1;
    grid-row: 1;
    position: relative;
}

.footer-privacy a {
    padding: 16px;
}

.footer-imprint {
    grid-column: 2;
    grid-row: 1;
}

.footer-imprint a {
    padding: 16px;
}

.footer-copyright {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    padding-right: 16px;
    font-size: 0.625rem;
    line-height: 1.094rem;
}

.logo-swr-ard {
    width: 126px;
    height: 56px;
    margin-top: 32px;
    margin-left: 16px;
    position: relative;
}

.logo-swr-ard svg {
    width: 100%;
    height: 100%;
    position: absolute;
}

@media screen and (min-width: 768px) {
    #site-footer {
        background-color: #1D0B40;
        background-image: url("../images/SWR_secondary.svg");
        background-size: 40% auto;
        background-repeat: no-repeat;
        background-position: bottom -2px right;
    }

    .footer-legallist {
        width: 60%;
        margin: 50px 0 40px 0;
    }

    .footer-legallist::after {
        display: none;
    }

    .footer-copyright {
        padding-right: 40px;
    }
}

@media screen and (min-width:992px) {
    .logo-swr-ard {
        width: 144px;
        height: 64px;
        margin-top: 64px;
        margin-left: 80px;
    }

    .footer-legallist {
        margin: 60px 0 40px 0;
    }

    .footer-privacy {
        padding-left: 80px;
    }

    .footer-privacy a {
        padding: 16px 16px 16px 0;
    }

    .footer-copyright {
        padding-right: 40px;
    }
}