html {
    color-scheme: light dark;
    --cities-color-accent: #731108;
    --cities-color-button: #731108;

    --cities-color-custom-1: #731108;
    --cities-color-custom-2: #005ed1;
    --cities-color-custom-3: #278901;
    --cities-color-custom-4: #db0067;

    --cities-color-opener-bg: rgba(115, 17, 8, 0.6);
    --cities-color-partner-bg: #e5d2d1;
    --cities-color-sitemap-bg: #e5d2d1;

    --cities-color-news-button-bg: #565656;
}

@media (prefers-color-scheme: dark) {
    html {
        --cities-color-partner-bg: #444444;
        --cities-color-sitemap-bg: #444444;
    }
}

.header {
    background-image: url("../images/silhouette-rochlitz-breit.svg");
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
    .header {
        background-image: url("../images/silhouette-rochlitz-breit-weiss.svg");
    }
}

.breadcrumbs {
    margin: 0 1em;
}

.footer-nav {
    background-image: url("../images/footer-background.jpg");
}

.tiles [class*="icon-"]::before {
    font: 5rem/1.5 Material;
    width: 1.5em;
    height: 1.5em;
}

.teaser > a::before, .teaser-news > a::before, .teaser-events > a::before {
    font: 1.3125em/1.05em Material;
    border: none;
}

.teaser-news .meta::before, .teaser-events .meta::before {
    font: 2em/1.5 Material;
}

.section-controls > .button::after {
    content: "\e5c8" / '';
}

.teaser > a::before, .teaser-news > a::before, .teaser-events > a::before {
    right: .5em;
    bottom: .5em;
}

.teaser-news, .teaser-events {
    border-bottom: 1px solid var(--cities-color-news-text, #fff);
    border-left: 3px solid var(--cities-color-news-text, #fff);
    margin-top: 2em;
}

.teaser-events {
    border-left-width: 1px;
}

.teaser-news:first-of-type, .teaser-events:first-of-type {
    border-top: none;
}

.teaser-news > a, .teaser-events > a {
    padding: 0 0 1.5em 1.5em;
}

.teaser-news > a::before, .teaser-events > a::before {
    right: .5em;
    bottom: .5em;
}

.section-controls > .button {
    margin: 1em 1em 1em 0;
    background-color: #eee;
}

.section-controls > .button::after {
    vertical-align: text-top;
    margin-top: .2em;
    margin-left: .5em;
}

.teaser-news > a:focus::before, .teaser-news > a:hover::before, .teaser-events > a:focus::before, .teaser-events > a:hover::before {
    background-color: var(--cities-color-news-button-bg, #565656);
}

.teaser-news > a:focus::before, .teaser-news > a:hover::before, .teaser-events > a:focus::before, .teaser-events > a:hover::before {
    backgroound-color: #565656 !important;
    color: #FFF;

}

.partner > div, .sitemap > div {
    padding: 2em 0;
}

@media only screen and (min-width: 64.0625em) {

    .header {
        padding: 1em 2em .5em;
    }

    .header .menu-panel {
        margin-top: 1em;
        padding: 0 1em;
    }

    .header .menu-panel .menu-item-toggle {
        max-width: 116em;
        padding: 0 .5em .25em .5em;
    }

    .menu > .menu-panel .submenu {
        top: calc(100% + .5em);
        left: -2em;
        right: -2em;
        width: calc(100% + 4em);
        height: calc(100vh - (var(--cities-logo-top, 0em) + var(--cities-logo-height, 5em) + 2em));
    }

    .tiles > li {
        width: 10%;
    }
}

.content .section {
    padding: 1.5em 0;
}

.content .section-full {
    max-width: 116em;
}

.footer-nav > div {
    min-height: 6em;
}


/**
 * Rochlitz
 */

.teaser {
    border-radius: 0 0 1em;
}

.teaser-news, .teaser-events {
    border-radius: 1em;
}