@charset "UTF-8";

@font-face {
    font-family: TheMix;
    src: url(fonts/TheMixC5-3_Light.woff2) format("woff2"), url(fonts/TheMixB3-3_Light.woff) format("woff");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: TheMix;
    src: url(fonts/TheMixC5-4_SemiLight.woff2) format("woff2"), url(fonts/TheMixB3-4_SemiLight.woff) format("woff");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: TheMix;
    src: url(fonts/TheMixC5-5_Plain.woff2) format("woff2"), url(fonts/TheMixB3-5_Plain.woff) format("woff");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: TheMix;
    src: url(fonts/TheMixC5-6_SemiBold.woff2) format("woff2"), url(fonts/TheMixB3-6_SemiBold.woff) format("woff");
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: TheMix;
    src: url(fonts/TheMixC5-7_Bold.woff2) format("woff2"), url(fonts/TheMixC5-7_Bold.woff) format("woff");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: TheMix;
    src: url(fonts/TheMixC5-8_ExtraBold.woff2) format("woff2"), url(fonts/TheMixC5-8_ExtraBold.woff) format("woff");
    font-weight: 800;
    font-display: swap;
    font-style: normal;
}

* {
    box-sizing: border-box;
}
html {
    font-size: 16px;
    margin: 0;
    padding: 0;
}
body {
    font-family: TheMix, Thesis, helvetica, roboto, "droid sans", arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1em;
    background-color: #fff;
    color: #494949;
    margin: 0;
    padding: 0;

    /* ==============================================
    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: #494949;
    text-decoration: none;
}

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

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;}
}

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

#site-header,
#site-header-logo {
    height: 48px;
}


#site-header {
    position: relative;
    width: 100%;
    z-index: 50;
    background: linear-gradient(to right,#0096a0 0,#055a6e 37%,#0a1e3c 100%);
}

#site-header-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

#site-header-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

#site-header-logo:before {
    display: block;
    width: 280px;
    height: 46px;
}

/* Logoaustausch */
.rubrik-swrltwbw #site-header-logo:before {
    content: "";
    background: transparent url("logos/swraktuell_ltwbw21_einzeilig.svg") no-repeat center center;
}

.rubrik-swrltwrp #site-header-logo:before {
    content: "";
    background: transparent url("logos/swraktuell_ltwrp21_einzeilig.svg") no-repeat center center;
}


@media screen and (min-width:768px) {
    #site-header,
    #site-header-logo {
        height: 98px;
    }
    .navbar-brand:before {
        width: 140px;
    }

    /* Logoaustausch */
    .rubrik-swrltwbw #site-header-logo:before {
        content: "";
        background: transparent url("logos/swraktuell_ltwbw21_zweizeilig.svg") no-repeat center center;
    }
    .rubrik-swrltwrp #site-header-logo:before {
        content: "";
        background: transparent url("logos/swraktuell_ltwrp21_zweizeilig.svg") no-repeat center center;
    }
}

@media screen and (min-width:992px) {
    .navbar-brand:before {
        width: 180px;
    }
}


/* ====================================== */
/* ========== Footer ==================== */
/* ====================================== */
#site-footer {
	font-size: 1rem;
    background: #494949;
    overflow: hidden;
    color: #fff;
}

/* wrapper und innerwrapper  */
.wrapper {
    width: 100%;
    margin-bottom: 24px;
    display: block;
}
.innerWrapper {
    margin: 0 auto;
    width: 996px;
    display: block;
    padding: 16px 20px;
}
@media screen and (max-width: 1009px) {
    #site-footer .innerWrapper {max-width: 100%;}
}

/* Alles sind Listen .... */
#site-footer ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

#site-footer a {
    color: inherit;
    text-decoration: underline;
    font-size: 1rem;
    transition: text-decoration-color 300ms ease;
}
#site-footer a:hover,
#site-footer a:focus {
    text-decoration: none;
}

@supports (text-decoration-color: #999) {
    #site-footer a:hover,
    #site-footer a:focus {
        text-decoration: underline;
        text-decoration-color: #999;
    }
}
/* ========================== */
/* Die erste Reihe */
/* NOTE: In diesem Falle benötigen wir die höhere Spezifität. */
#site-footer .footer-legallist {
    margin-bottom: 16px;
}
.footer-legallist li {
    font-size: 0.9375em;
    padding: 16px 0 4px;
    margin-right: 16px;
}
.footer-legallist li:nth-last-of-type(-n + 2){
    margin-right: 0;
}
.footer-legallist li a {
    font-size: 1em;
    text-decoration: none;
    padding-right: 0;
}

.footer-copyright {
    color: #ccc;
    width: 100%;
    margin-top: 16px;
}

@media screen and (min-width: 520px) {
    .footer-copyright {
        margin-left: auto;
        width: auto;
        margin-top: 0;
    }

    .footer-legallist li a {
        padding-right: 24px;
    }
}

/* ========================== */
/* Die zweite Reihe */
.footer-copylist {
    border-top: 2px solid #ccc;
    padding-top: 16px;
    align-items: center;
}
/* NOTE: In diesem Falle benötigen wir die höhere Spezifität. */
#site-footer .footer-copylist {
    margin-top: 16px;
}
/* Das ARD-Logo */
.footer-ard {
    margin-right: 16px;
    margin-bottom: 8px;
}
@media screen and (min-width: 340px) {
    .footer-ard {
        margin-right: auto;
        margin-bottom: 0;
    }
}
.footer-ard svg {
    height: 32px;
}
/* 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;
    }
}