/**
 * /res/ism/css/ism.css (screen)
 *
 * Hier werden alle statischen CSS-Einträge für den Standardmandanten erfasst, die bei allen
 * Kunden wirksam sein müssen.
 *
 * Anpassungen, die nur für einige Kunden relevant sind, müssen in die ism_customer_static.css
 * (des Kunden) geschrieben werden.
 *
 * Style-Anpassungen z.B. für die Breiten der Hauptmenü-Felder werden weiterhin über die ISMA in die
 * customer.css geschrieben.
 *
 */


/* ---------- viewport all ---------- */
@media all {

    /* Größe des PIWIK-Optout-Iframes */
    .piwik_optout_iframe {
        border: 0;
        height: 220px;
        width: 100%;
    }

    /* Für Seiten mit Voicereader */
        .vrweb_player_main {
            z-index: 100;
            margin-bottom:10px;
        }
    .modHeader div.header-navigation ul li div.vrweb_player_main a {
        display: contents;
    }

    /* Elemente in modContent immer in voller Breite anzeigen */
    .modContent {
        display: block;
    }

    /* Tabellen mit Ãœberbreite scrollen */
    .tableOversized {
        display: block;
        overflow-y: auto;
    }

    /* Suchbegriff in Trefferliste fett */
    .searchresult .highlight {
        font-weight: bold;
    }

    /* fuer Webreader */
    .modContent .rsbtn ul li {
        left: auto;
        width: auto;
    }

    /* Fuer Content-Bild */
    .sidebar_image img {
        width:300px;
    }

    .content_image img {
        max-width:600px;
    }

    .content_image i, .content_image small.copyright {
        width:auto !important;
    }

    a.content_image:hover , a.content_image:focus {
        color: #3f3f3f;
    }
    /* Ende Fuer Content-Bild */

    /* Formatierungen für Header und zweites Logo */
    .modHeader {
        height: 100%;
        min-height: 141px;
        line-height: 0px;
    }

    .modHeader div.logo span.show-in-screen {
        display: inline-block;
        color: black;
        margin-right: 10px;
        color: #008dc9;
        font-size: 17px;
        line-height: normal;
        text-align: right;
        vertical-align: 0.3em;
    }

    .modHeader div.logo a, .modHeader div.logo img {
        display: inline-block;
    }


    /* Formatierungen für großes Headerbild */
    .modHeader > img {
        min-height: auto;
    }

    /* Formatierung des Copyright-Vermerks in der Zitatbox
    .modSidebarMinistry ul li > i {
        display: block;
        text-align: right;
        padding-right: 5px;
        font-size: 94%;
    }
    /*

    /* Formatierung Vorschläge der FTS */
    .ui-autocomplete {
        background: #FFFFFF;
        border: 1px solid #008DC9;
        border-top: none;
    }

    .ui-menu-item {
        background: #ECECEC;
    }

    /* Formatierung der Termine */
    .modSidebarDates ul li {
        padding: 15px 10px;
        width: 280px;
    }

    .modSidebarDates ul li.more {
        width: 300px;
    }

    .modSidebarDates ul li b, .modSidebarDates ul li small {
        min-width: 200px;
    }

    /* Formatierung Cookiebar */
    .modCookieBar {
        background-color: rgba(232, 237, 241, 0.95);
    }
    .modCookieBar p {
        width: 95%;
    }
    .modCookieBar ul {
        display: table;
        padding: 1em;
    }
    .modCookieBar li {
        display: table-cell;
        vertical-align: middle;
    }
    .modCookieBar button {
        cursor: pointer;
    }


    /* Formatierung für Themen A-Z
    .modTopicsAZ ol li {
        margin: 0 10px 0 0;
    }

    */

    /* Linker Abstand der Hauptnavigationsflächen
    .modMainNavigation .ym-hlist ul li a {
        padding-left: 7px;
        width: 153px;
    }
    */

    /* Ausrichtung erster Menuepunkt der dritten Ebene
    .modSidebarNavigation ul ul li.first > a {
        padding: 7px 0 7px 0;
    }
    */

    /* Suchformulare */
    /* Position des Pfeils in Button, Höhe des Buttons
    .ym-button, .ym-form button, .ym-form input[type="button"], .ym-form input[type="reset"], .ym-form input[type="submit"] {
        background-position: -1175px 10px;
        line-height: 1.6em;
        padding: 0 1.5em;
        height: 2.6em;
    }
    .ym-button:focus, .ym-form button:focus, .ym-form input[type="button"]:focus, .ym-form input[type="reset"]:focus, .ym-form input[type="submit"]:focus,
    .ym-button:active, .ym-form button:active, .ym-form input[type="button"]:active, .ym-form input[type="reset"]:active, .ym-form input[type="submit"]:active {
        background-position: -1175px 10px;
    }
    */

    /* Lupe ich Suchformular
    .modForm .ym-form .ym-searchfield {
        padding: 0 0.3em;
        line-height: 2em;
        height: 2.6em;
    }

    .modForm .ym-form .ym-searchbutton {
        background-position:10px -32px;
        height:28px;
        right:16px;
        top:14px;
        width:50px;
        position:absolute;
        border:none;
    }
    .modForm .ym-form .ym-searchbutton:focus, .modForm .ym-form .ym-searchbutton:active {
        position:absolute !important;
        top:14px;
    }

    */

    /* ENDE Suchformulare */


    /* Abstand für IFrame
    iframe {
        margin-bottom:1.5em;
    }
    ENDE Abstand für IFrame */

    /* Seitenurheber unten rechts */
    div.page_creation_text {
        text-align:right;
        font-size:75%;
    }

    /* Infobox in Randspalte */

    div.modSidebarInfobox > ul ul {
        list-style-type: none;
        list-style-position: outside;
        list-style-image: url(../img/icons/list_square.gif);
        margin-left: 1em;
    }
    div.modSidebarInfobox > ul li ul li {
        border-bottom: 0;
        margin-bottom: initial;
        margin-left: 1em;
    }
    div.modSidebarMinistryInfobox > ul li ul li:after {
        content: none;
    }
    .modSidebarInfobox img {
        width: initial;
    }
    /* Ende Infobox in Randspalte */

    /* Social Toolbar um Twitter, Instagram und LinkedInergaenzen */
    .modFooterSocial a.footer-twitter::before {
        content: '\f304';
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .modFooterSocial a.footer-twitter::before {
        font-family: custom-icon-font;
        font-style: normal;
        speak: none;
        display: inline;
        text-decoration: none;
        width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        text-indent: 0;
        float: left;
        margin: 0;
        font-size: 2em;
        color: #fff;
        font-weight: 400;
    }

    .modFooterSocial a.footer-instagram:before {
        content: '\f16d';
    }

    .modFooterSocial a.footer-instagram:before {
        font-style: normal;
        speak: none;
        display: inline;
        text-decoration: none;
        width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-touch-callout: none;
        text-indent: 0;
        float: left;
        margin: 0;
        font-size: 2em;
        font-weight: 400;
        font-family: custom-icon-font;
        color: #fff;
    }

    .modFooterSocial a.footer-linkedin:before {
        background-image: url('data:@file/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAABaUlEQVRIic2X/U3DMBDFH1b+b5iAsEGYgLBBNmAEYAIyQrpBu0FHCBOQDVo2aCc4dOiMTpbtuMVNeJIVy7Hvl4/ny+WGiJCgCkArrQawcpacAIwAdtIOkyEZHGk1EQ10vgZZG4wdOlESUX8B0FUvsZLAPHHMALUaffBrQ4PwOaBeuAb73umGiBoiaonomAHeu+A6MFFfWJcBTNbtRnZVH9htpepXKRs+QT8sTiAccB+Y/wVgI9DnTGDWfSHZKKQ7AO8ZgVatmQA/qbaVsa0ae5N0ycdbfoIy/jEFxoRbfebq1FgtjvcloliqPRpPwj9H9sPQAHh11nWROKviD1ArdumL9Ct1AUNskYmdTFCloJBPZpJygC+SEVfOrZMRg8yt0Ygr59ZuMXAhhRlnmkfPhEb1K3W0466LS2eNT8w62CqTA3xmu5+4Huw7hhhsPQN0/Wvm/1D6LFbsLVreLlrQ63a1X5hlftoAfAOSRMRoWgoxXgAAAABJRU5ErkJggg==');
    }

    .modFooterSocial a.footer-linkedin:before {
        content: "";
        width: 27px;
        height: 27px;
        background-size: contain;
        speak: none;
        display: inline;
        text-decoration: none;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        text-indent: 0;
        float: left;
        margin: 0;
        font-size: 2em;
        color: #fff;
        font-weight: 400;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Matomo Consent */
    .modMatomoConsent button {
        text-align: center;
        color: #fff;
        background-color: #008dc9;
        border: none;
        padding: 5px 10px 5px 5px;
        margin-top: 1em;
    }
    #matomo_consent {
        background-color: #e9eef2;
        border-radius: 15px;
        padding: 1em;
        font-size: 1em;
        line-height: 1.5em;
        margin: 0 0 1.5em;
    }

    .contrastMode #matomo_consent {
        background-color: #fff;
        border-radius: 15px;
        padding: 1em;
        border-color: #000;
        border-width: 2px;
        border-style: solid;
    }

    .contrastMode #matomo_consent button {
        background-color: #000;
    }

    .contrastMode #matomo_consent button:hover {
        background-color: #fff;
        color: #000;
        border: 2px solid #000;
    }    /* Ende Matomo Consent */

    /* Interne und E-Mail-Links in IWE mit Symbol versehen */

    a.email:before, a.internal:before, a.external:before {
        font-family:custom-icon-font;
        font-style:normal;
        font-weight:400;
        speak:none;
        display:inline;
        text-decoration:none;
        width:1em;
        margin-right:.2em;
        text-align:center;
        font-variant:normal;
        text-transform:none;
        line-height:1em;
        margin-left:.2em;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
    }
    .modCookieBar a.email, .modCookieBar a.external, .modCookieBar a.internal {
        text-decoration: none;
    }
    a.email:hover {
        text-decoration: underline;
    }
    a.email:before {
        content:'\e83a';
        -ms-user-select:none;
        user-select:none;
        display: inline-block;
    }
    a.internal:before {
        content:'\e831';
        -ms-user-select:none;
        user-select:none;
        display: inline-block;
    }
    a.external:before, .modContent a.external:before  {
        content:'\e82f';
        -ms-user-select:none;
        user-select:none;
        display: inline-block;
    }
    /* Ende Interne und E-Mail-Links in IWE mit Symbol versehen */

    .modContent > ol a {
        text-decoration: underline;
    }

    /* Listenpunkte bei den Bildergalerien ausblenden */
    .modContent .es-carousel ul {
        list-style: none;
    }

    /* Newsletter An-/Abmelde-Buttons rechts anordnen */
    div.newsletter_an_abmelden {
        text-align: right;
    }

    div.newsletter_an_abmelden input {
        float: initial !important;
    }
    /* Ende: Newsletter An-/Abmelde-Buttons rechts anordnen */

    /* Rekursive PDF-Liste */
    .pdfliste_rekursiv li {
        list-style: none;
    }
    /* Ende rekursive PDF-Liste */

    /* Für Sliderbild ohne Link */
    .modHeader section#modHeaderStage ul li figure img {
        display: inherit;
        width: 100%;
    }
    /* Ende */

    /* Rahmen für Flexmodul Bild */
    .image_border_flex {
        border: 1px solid rgb(128, 128, 128);
    }

    /* Sidebar image_links */
    .modSidebarBanner.image_links ul ul {
        background-color: #f3f3f3;
        border-bottom: 1px solid #e1e7f0;
        margin-bottom: 20px;
    }

    .modSidebarBanner.image_links ul {
        list-style-type: none;
    }

    .modSidebarBanner.image_links ul ul li{
        padding:3px 10px;
    }

    /* Ende Sidebar image_links */


}





/* ---------- viewport desktop ---------- */
@media screen {

    /* Default-Anpassung Höhe Hintergrundbild und Navigation, um Sprünge beim Seitenladen zu verringern */
    /* Bei Browservergleich immer den kleinsten Wert beim Customer (ism_customer_static.css) eintragen */
    /* Standardwerte für Bildhöhe 300px */

    body {
        background-size: 518px;
    }

    nav#hauptnavigation {
        /* ohne zweite horizontale Ebene: height: 65px; */
        /* mit zweiter horizontaler Ebene: height: 97.9844px; */
        height: 65px;
    }

    /* ENDE Anpassung Höhe Hintergrundbild und Navigation, um Sprünge beim Seitenladen zu verringern */

    /* Textoverlay Header-Bild */
    .ismHeaderOverlay {
        line-height: 1.5em;
        font-size: 25px;
        font-weight: bold;
        /*height: 40px;*/
        padding: 0 1em;
        text-align: center;
        color: white;
        background-color: hsl(213deg 55% 36%);
    }

    .ismHeaderOverlay span {
        display:none;
    }

    div.ismHeaderOverlayMobile {
        display: none;
    }

    /* Infoticker Größe anpassen */
    .infoTicker .ym-g960-8 {
        width: 940px !important;
    }

    .infoTicker .ym-g960-8 a {
        width: 800px;
    }

    .infoTicker h2 {
        width: 20%;
    }

    .infoTicker .ym-g960-8 .coma-g62 {
        width: 77%;
    }
    /* ENDE: Infoticker Größe anpassen */

    /* Info-Ticker Größe anpassen: Unterseiten */
    .infoTickerContent {
        clear: none !important;
        margin: 0 !important;
    }

    .infoTickerContent .ym-g960-8 {
        width: 620px !important;
        margin-left: 20px;
        margin-bottom: 1.25em;
    }
    /* ENDE: Info-Ticker Größe anpassen: Unterseiten */

    /* Liste geänderter Dokumente anpassen */
    ul.changed_documents {
        list-style: none !important;
        margin: 0px;
    }

    ul.changed_documents li {
        left: auto;
        width: auto;
    }

    ul.changed_documents h4 {
        margin: inherit;
    }

    ul.changed_documents h4 a {
        display: table-cell !important;
    }

    ul.changed_documents h4.flag_new a {
        text-decoration: none !important;
    }

    ul.changed_documents h4 a span {
        text-decoration: underline;
    }

    ul.changed_documents h4.flag_new::after {
        content: 'neu';
        display: table-cell;
        position: relative;
        left: 0.35em;
        top: -0.3em;
        font-size: 0.8em;
        color: red;
    }
    /* ENDE: Liste geänderter Dokumente anpassen */
}


/* ---------- viewport tablet ---------- */
@media only screen and (min-width : 767px) and (max-width : 1024px) {

    /* Default-Anpassung Höhe Hintergrundbild und Navigation, um Sprünge beim Seitenladen zu verringern */
    /* Bei Browservergleich immer den kleinsten Wert eintragen */
    /* Standardwerte für Bildhöhe 300px */

    body {
        background-size: 406px;
    }

    nav#hauptnavigation {
        /* ohne zweite horizontale Ebene: height: 65px; */
        /* mit zweiter horizontaler Ebene: height: 97.9844px; */
        height: 65px;
    }

    /* ENDE Anpassung Höhe Hintergrundbild und Navigation, um Sprünge beim Seitenladen zu verringern */

    /*
    .modHeader div.logo {
        padding-right: 15px;
    }
    */


    /* Bild auf die gesamte Breite ausdehnen (ISM-156) */
    #main_header_picture {
        width: 620px;
    }

    /* Infobox in Randspalte */
    .modSidebarInfobox {
        margin: 0 0 1.25em 1em;
    }
    /* Ende Infobox in Randspalte */


    /* Textoverlay Header-Bild */
    .ismHeaderOverlay {
        line-height: 2.0em;
        font-size: 20px;
    }

    /* Infoticker Größe anpassen */
    .infoTicker .ym-g960-8 {
        width: 620px !important;
    }

    .infoTicker .ym-g960-8 a {
        width: 500px;
    }

    .infoTicker h2 {
        width: 20%;
    }

    .infoTicker .ym-g960-8 .coma-g62 {
        width: 77%;
    }
    /* ENDE: Infoticker Größe anpassen */

    /* Info-Ticker Größe anpassen: Unterseiten */
    .infoTickerContent {
        clear: both !important;
        margin: 0 0 1.25em !important;
    }
    /* ENDE: Info-Ticker Größe anpassen: Unterseiten */

    /* Schriftgröße verringert analog zur Wortbildmarke */
    .modHeader div.logo span.show-in-screen {
        font-size: 90%;
    }
    /* ENDE: Schriftgröße verringert analog zur Wortbildmarke */

}


/* ---------- viewport smartphone ---------- */
@media only screen and (min-width : 20px) and (max-width : 766px) {

    .modSidebarDates ul li {
        width: auto;
    }

    .modSidebarDates ul li.more {
        width: auto;
    }

    /* Größe des PIWIK-Optout-Iframes */
    .piwik_optout_iframe {
        height: 300px;
    }

    .content_image img {
        max-width:100%;
    }

    /* Infobox in Randspalte */
    .modSidebarInfobox {
        padding: 0.75em;
    }

    /* Textoverlay Header-Bild */
    .ismHeaderOverlay {
        display: none;
    }

    /* Textoverlay Header-Bild */
    div.ismHeaderOverlayMobile {
        display: block;
        float: right;
        padding-right: 25px;
        padding-bottom: 5px;
        line-height: 1.5em;
        font-size: 13px;
        color: #008dc9;
        background-color: white;
        text-align: right;
        right:20px;
        width: 100%;
    }

    div.ismHeaderOverlayMobile span {
        display: none;
    }

    div.logo.extra {
        display: inline;
    }
    .modCookieBar li {
        display: block;
        text-align: center;
    }

    .modHeader div.logo.extra {
        padding: 20px 0px 13px 0px;
        float: left !important;
        clear: none !important;
    }

    div#nav div.logo:first-child {
        padding-left: 0px;
    }


    /* Infoticker Größe anpassen */
    .infoTicker {
        display: block;
    }

    .infoTicker .ym-g960-8 {
        width: auto !important;
    }

    .infoTicker .ym-g960-8 a {
        width: auto;
    }

    .infoTicker h2 {
        width: 120px;
        padding-left: 10px;
    }

    .infoTicker .ym-g960-8 .coma-g62 {
        width: calc(85vw - 85px);
    }

    .infoTicker .ym-g960-8.ym-gl {
        height: 41px;
    }
    /* ENDE: Infoticker Größe anpassen */

    /* Info-Ticker Größe anpassen: Unterseiten */
    .infoTickerContent {
        clear: both !important;
        margin: 0 0 1.25em !important;
    }
    /* Größenkorrektur Bilder */
    .modContent .ym-gl img,
    .modContent img {
        height: unset;
    }
    /* Ende Größenkorrektur Bilder */

    /* Schriftgröße verringert analog zur Wortbildmarke */
    .modHeader div.logo span.show-in-screen {
        font-size: 90%;
    }
    /* ENDE: Schriftgröße verringert analog zur Wortbildmarke */

}