/**
 * /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 {

    /* 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 */

    /* Höhe des Sucheingabefeldes */
    .ym-searchform {
        height: 42px;
    }

    /* Zeilenhöhe im Sucheingabefeld */
    .ym-searchform .ym-searchfield {
        line-height: 1.2em;
    }

    /* 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;
        border: 0px solid transparent;
    }

    /* 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 */

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

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

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

    /* 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 und Instagram ergaenzen */
    .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;
    }

    /* 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;
    }
    /* Ende Matomo Consent */

    .modFooterSocial a.footer-instagram::before {
        content: '\f16d';
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .modFooterSocial a.footer-instagram::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;
    }

    /* 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 */
}


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

}


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

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

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

    /* Für Seiten mit Voicereader */
    .vrweb_player_main {
        float: right;
    }

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

    /* 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%;
    }

    /* Für Seiten mit Voicereader */
    .vrweb_player_main {
        float: right;
    }

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

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

}