/* ========================================================================================
   stadtportal.css: Stadtportal Rubrikfarben, SOS Iframe, Corona-Box
   ======================================================================================== */


/*
 * Rubrikfarben
 */

.rubric-1 {
    background-image: url(../images/stadtportal/bg_rubric_1.png); }

.rubric-2 {
    background-image: url(../images/stadtportal/bg_rubric_2.png); }

.rubric-3 {
    background-image: url(../images/stadtportal/bg_rubric_3.png); }

.rubric-4 {
    background-image: url(../images/stadtportal/bg_rubric_4.png); }

.rubric-5 {
    background-image: url(../images/stadtportal/bg_rubric_5.png); }

.rubric-0, .accent-rubric-0 {
    background-color: #464646; }

.rubric-1, .accent-rubric-1 {
    background-color: #8e026c; }

.rubric-2, .accent-rubric-2 {
    background-color: #737373; }

.rubric-3, .accent-rubric-3 {
    background-color: #5a7e15; }

.rubric-4, .accent-rubric-4 {
    background-color: #c25400; }

.rubric-5, .accent-rubric-5 {
    background-color: #007cad; }

.sos {
    background-color: #d70f00; }

/*
 * Sondermodule Stadtportal
 */

 .sos-iframe {
    border: none;
    float: left;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

/* Corona und Ukraine Hinweisbox */
/* Die Ukraine-Hinweisbox ist neuer und mit neutralen Klassen versehen.
 * Diese Klassen können daher auch für weitere Boxen verwendet werden.
 */

.notebox--corona {
    background-image: url(/images/stadtportal/corona_bg.jpg);
}
.notebox--ukraine {
    background-image: url(/images/stadtportal/ukraine_bg.jpg);
}
.notebox--energy-crisis {
    background-image: url(/images/stadtportal/energy_crisis_bg.jpg);
}

.notebox--corona,
.notebox--ukraine,
.notebox--energy-crisis {
    background-size: cover;
}

.notebox:hover {
    filter: none;
}

.notebox--corona__heading-wrapper /* Corona Hinweisbox mit Detail-Sprachlinks - Heading */ {
    padding: .125rem .5rem .125rem .5rem;
    position: relative;
}

.notebox--corona__heading-wrapper .notebox__icon--info {
    height: 30px;
    left: 1rem;
    top: calc(50% - 15px);
    width: 30px;
}

.notebox__link--corona /* Startseite Corona Hinweisbox - Heading */,
.notebox__link--heading /* Startseite Ukraine Hinweisbox - Heading */ {
    margin-bottom: .5rem;
    position: relative;
}

.notebox__link--corona:hover /* Startseite Corona Hinweisbox - Heading */,
.notebox__link--heading:hover /* Startseite Ukraine Hinweisbox - Heading */ {
    background: rgba(255, 255, 255, .1);
}

.notebox__link-wrapper /* Startseite Corona Hinweisbox - Buttons Wrapper */,
.notebox__sublink-wrapper /* Startseite Ukraine Hinweisbox - Buttons Wrapper */ {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: .5rem;
}

.notebox__link-lang /* Startseite Corona Hinweisbox - Buttons */,
.notebox__sublink /* Startseite Ukraine Hinweisbox - Buttons */ {
    background: #fff;
    border-radius: 5px;
    flex-grow: 1;
    font-size: 1.125rem;
    margin: 0 .5rem .5rem 0;
    padding: .5rem .5rem .5rem .5rem;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.notebox__link-lang--icon /* Startseite Corona Hinweisbox - Icons in Buttons */,
.notebox__sublink--icon /* Startseite Ukraine Hinweisbox - Icons in Buttons */ {
    padding-left: 2.75rem;
}

.notebox__link-lang--ls /* Corona */,
.notebox__link-lang--gs /* Corona */,
.notebox__link-lang--other /* Corona */,
.notebox__link-lang--item /* Corona */,
.notebox__sublink--l /* Ukraine */,
.notebox__sublink--r /* Ukraine */ {
    flex-basis: 90%;
}

.notebox__link-lang--other {
    overflow: hidden;
    text-overflow: ellipsis;
}

.notebox__link-lang:hover /* Corona */,
.notebox__sublink:hover /* Ukraine */ {
    color: #0080a3;
}

.notebox__svg-icon--ls /* Corona Hinweisbox mit Sprachlinks - Icons */,
.notebox__svg-icon--gs /* Corona Hinweisbox mit Sprachlinks - Icons */,
.notebox__svg-icon--lang /* Corona Hinweisbox mit Sprachlinks - Icons */,
.notebox__svg-icon--arrive /* Ukraine Hinweisbox mit Links zu Detailseiten - Icons */,
.notebox__svg-icon--help /* Ukraine Hinweisbox mit Links zu Detailseiten - Icons */ {
    display: block;
    fill: #005b80;
    left: .5rem;
}

.notebox__link--lang:hover .notebox__svg-icon--ls /* Corona Hinweisbox mit Detail-Sprachlinks */,
.notebox__link--lang:hover .notebox__svg-icon--gs /* Corona Hinweisbox mit Detail-Sprachlinks */,
.notebox__link--lang:hover .notebox__svg-icon--lang /* Corona Hinweisbox mit Detail-Sprachlinks */ {
    fill: #0080a3;
}

.notebox__svg-icon--ls /* Corona */ {
    height: 1.5rem;
    top: calc(50% - .85rem);
    width: 1.75rem;
}

.notebox__svg-icon--gs /* Corona */ {
    height: 1.75rem;
    top: calc(50% - .85rem);
    width: 1.5rem;
}

.notebox__svg-icon--lang /* Corona */ {
    height: 1.5rem;
    top: calc(50% - .75rem);
    width: 1.5rem;
}

.notebox__link-text--lang /* Corona */ {
    display: inline-block;
    text-align: center;
    width: 100%
}

.notebox__svg-icon--arrive /* Ukraine */ {
    height: 1.5rem;
    top: calc(50% - .85rem);
    width: 1.75rem;
}

.notebox__svg-icon--help /* Ukraine */ {
    height: 1.5rem;
    top: calc(50% - .85rem);
    width: 1.75rem;
}

/* Corona Contentnav*/
.corona-nav  /* Rahmen um Contentnav */ {
    margin-bottom: 2rem;
}

.content-nav__toggle /* Container mit Toggle-Funktion */ {
    color: #fff;
    cursor: pointer;
    padding: .1rem 1rem .1rem calc(30px + 1.5rem);
}

.content-nav__icon--toggle {
    height: 25px;
    left: .75rem;
    top: calc(1.25rem - 2px);
    width: 25px;
}

.content-nav-list__item {
    list-style: none;
    margin-top: 3px;
}

.content-nav__link {
    align-items: center;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    min-height: 3rem;
    padding-left: 0;
    padding-right: 3.25rem;
    position: relative;
    text-decoration: none;
}

.content-nav__link:hover {
    text-decoration: none;
}

.content-nav__text {
    font-size: 1.1rem;
    line-height: 1.5rem;
    margin-bottom: 0;
    padding-left: 1rem;
}

.content-nav__icon {
    fill: #005b80;
}

.content-nav__icon--deco {
    display: none;
}

.content-nav__icon--m {
    height: 2.5rem;
    left: .5rem;
    top: calc(50% - 1.5rem);
    width: 2.25rem;
}

.content-nav__icon--l {
    height: 2rem;
    left: .5rem;
    top: calc(50% - 1rem);
    width: 2.125rem;
}

.content-nav__icon--link {
    height: 1.85rem;
    right: .5rem;
    top: calc(50% - .9rem);
    width: 1.85rem;
}

.corona-nav + .list-links--content-skiplinks {
    display: none;
}

@media only all and (min-width: 18.125em) {
    .content-nav__link {
        padding-left: 3.25rem;
    }
    .content-nav__icon--deco {
        display: block;
    }
}

@media only all and (min-width: 21.563em) {
    .notebox--corona__heading-wrapper /* Ueberschrift unverlinkt */ {
        padding: .125rem .5rem .125rem 3.5rem;
    }
    .content-nav__toggle /* Container mit Toggle-Funktion */ {
        padding: .1rem 1rem .1rem calc(30px + 2rem);
    }
    .content-nav__icon--toggle {
        height: 30px;
        left: 1rem;
        top: calc(1.25rem - 5px);
        width: 30px;
    }
    .content-nav__icon--link {
        right: 1rem;
    }
    .content-nav__link {
        padding-right: 3.75rem;
    }
}

@media only all and (min-width: 24.6875em) {
    .notebox--corona__heading-wrapper /* Ueberschrift unverlinkt */ {
        padding: .25rem .5rem .25rem 3.5rem;
    }
    .content-nav__toggle /* Container mit Toggle-Funktion */ {
        padding: .1rem 1rem .1rem calc(30px + 2.5rem);
    }
}

@media only all and (min-width: 31.25em) {
    .notebox__link-lang--ls,
    .notebox__link-lang--gs,
    .notebox__link-lang--item,
    .notebox__sublink--l,
    .notebox__sublink--r {
          flex-basis: 45%;
    }
}

@media only all and (min-width: 36.875em) {
    .corona-nav /* ausgeblendet, sobald die Hauptnavigation sichtbar ist */{
        display: none;
    }
    .corona-nav + .list-links--content-skiplinks {
        display: block;
    }
}

/*
 * Eventlink voruebergehend ausblenden

.header-portal-link {
    display: table;
}

.event {
    display: none;
}
*/