/**
 * /res/ism/css/ism_customer_static.css (screen)
 *
 * Diese Datei bitte leer lassen (dient als Platzhalter, falls im Customer-Bereich keine vorhanden ist)!!!
 *
 * Wenn hier Einträge notwendig sind, bitte im jeweiligen Customer-Bereich anlegen!
 *
 *
 */

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

    /* Container für Inhaltsverzeichnis */

    .bwContent {
        margin-left: 250px;
        margin-right: -50px;
    }

    h1 {
        color: red;
    }

    /* Spezielle Formatierung für Anzeige der Inhaltsübersichten */
    .bwContent h2 {
        margin-bottom: -0.5em;
    }

    .bwContent p {
        margin: 0.5em 0 -0.7em 2.7em;
    }



    /* ##### oeg-mod ##### */


    h1, h2, h3 {
        color: red;
    }

    a.toggle-more:hover {
        color: #333;
    }

    /* ### body ### */
    body {
        background-image: url("../img/backgrounds/bgBrandwacht.jpg");
    }


    /* # Suche-Box # */

    .modHeader form .ym-searchfield {
        border: 1px solid #888 !important;
        color: #888 !important;
    }


    /* bei hoover und active hell-rote Schrift und Rahmen */
    .modHeader form .ym-searchfield:hover {
        border: 1px solid #FB5D68 !important;
        color: #FB5D68 !important;
    }

    .modHeader form .ym-searchfield:active {
        border: 1px solid #FB5D68 !important;
        color: #FB5D68 !important;
    }





    /* # header Wort-Bild # */

    .modHeader div.logo span.show-in-screen {
        color: #008dc9;
        /* #  color: #ec1c2a; # */
        /* # muss immer und überall blau sein # */

    }


    /* # header helper # */

    [tabindex]:focus, [tabindex]:focus img, a:focus, a:focus img, button:focus, button:focus img, label:focus, label:focus img {
        border-color: #02a1e6 !important;
        background-color: #ec1c2a !important;
    }



    /* # header navigation # */


    .modHeader div.header-navigation ul li.accessibility a {
        background: #ec1c2a;
    }

    .modHeader div.header-navigation ul li.accessibility a:hover {
        background: #FB5D68;
    }


    .modMainNavigation ul.nav-level-1 > li > a {
        border-left: solid 1px black;
        border-right: solid 1px black;
        background: #ec1c2a;
    }


    .modMainNavigation ul.nav-level-1 > li.active > a {
        background: #FB5D68;
        border: 1px solid #FB5D68 !important;
    }


    .modMainNavigation ul.nav-level-1 > li > a:focus, .modMainNavigation ul.nav-level-1 > li > a:hover {
        background: white;
        color: red;
        border: 1px solid #FB5D68 !important;
    }


    /* # header navigation Zweite Ebene # */


    .modSidebarNavigation ul.nav-level-1 > li > a:active, .modSidebarNavigation ul.nav-level-1 > li > a:focus, .modSidebarNavigation ul.nav-level-1 > li > a {
        color:  #ec1c2a;
    }
    .modSidebarNavigation ul.nav-level-1 > li > a:active, .modSidebarNavigation ul.nav-level-1 > li > a:focus, .modSidebarNavigation ul.nav-level-1 > li > a:hover {
        color: #FB5D68;
    }
    .modSidebarNavigation ul.nav-level-1 > li.active > a {
        color: #ec1c2a;
    }
    .modSidebarNavigation ul.nav-level-1 > li.active > a:hover {
        color: #FB5D68;
    }


    .modSidebarNavigation ul.nav-level-1 ul.nav-level-2 li.active > a {
        color: #ec1c2a;
    }
    .modSidebarNavigation ul.nav-level-1 ul.nav-level-2 li.active >  a:hover {
        color: #FB5D68;
    }

    .modSidebarNavigation ul.nav-level-1 ul.nav-level-2 li a:active, .modSidebarNavigation ul.nav-level-1 ul.nav-level-2 li a:focus, .modSidebarNavigation ul.nav-level-1 ul.nav-level-2 li a {
        color: #ec1c2a;
    }


    .modSidebarNavigation ul.nav-level-1 ul.nav-level-2 li a:active, .modSidebarNavigation ul.nav-level-1 ul.nav-level-2 li a:focus, .modSidebarNavigation ul.nav-level-1 ul.nav-level-2 li a:hover {
        color: #FB5D68;
    }



    /* ### SidebarMinistry ### */

    .modSidebarMinistry ul li .button:hover, .modSidebarMinistry ul li a:hover, .modSidebarMinistry ul li button {
        color:  red;
        background-color: white;
        border: 1px solid #FB5D68;
    }

    .modSidebarMinistry ul li .button, .modSidebarMinistry ul li a, .modSidebarMinistry ul li button {
        color: white;
        background-color: red;
        border: 1px solid #FB5D68;
    }




    /* ### footer ### */

    .modFooter {
        background: #ec1c2a;
    }

    .modFooter .button:hover, .modFooter a:hover, .modFooter button:hover {
        color: #fff;
        background-color: #FB5D68;
    }

    /* ---------- Sidebar Untermenüs blau durch rot ersetzen  ---------- */

    #main [tabindex]:focus, #main a:focus, #main button:focus, #main label:focus {
        background-color: red !important;
    }


    .modSidebarSubject .toggle-title {
        border: 1px solid white;

        border-bottom-color: red;
        border-bottom: solid 1px red;
        cursor: pointer;
        font-size: 113%;
        overflow: hidden;
        color: #fff;
        background-color: red;
    }

    /* ---------- accordion blau durch rot ersetzen   ---------- */
    .modSidebarSubject .toggle-title .button:hover, .modSidebarSubject .toggle-title a:hover, .modSidebarSubject .toggle-title button:hover {
        color: red;
        background-color: #fff;
    }
    .modSidebarSubject .toggle-box .button:hover, .modSidebarSubject .toggle-box a:hover, .modSidebarSubject .toggle-box button:hover {
        color: red;
        background-color: #f3f3f3;
    }



    .modFocus .toggle-title .button, .modFocus .toggle-title a, .modFocus .toggle-title button {
        color: white;
        background-color: red;
        border: 1px solid #FB5D68;

    }
    .modFocus .toggle-title .button:hover, .modFocus .toggle-title a:hover, .modFocus .toggle-title button:hover {
        color: red;
        background-color: white;
        border: 1px solid #FB5D68;
    }

    /* --- Abstand Seitenüberschrift zum oberen Menü --- */
    .ym-grid {
        margin-top: 25px;
    }


    /* --- accordion toggle-box pappt Pfeil am Text --- */
    .modSidebarSubject .toggle-title a span {
        margin-right: 15px;
    }


    /* --- BurgerMenü --- */
    /* --- normal --- */

    .modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role="main-navigation"] ul.nav-level-1 > li > a {
        background:red;
        color: white;
        border: 1px solid #FB5D68;
    }
    /* --- hover --- */
    .modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role="main-navigation"] ul.nav-level-1 > li > a:active, .modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role="main-navigation"] ul.nav-level-1 > li > a:focus, .modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role="main-navigation"] ul.nav-level-1 > li > a:hover {
        background: white !important;
        color: red !important;
    }
    /* --- active --- */
    .modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role="main-navigation"] ul.nav-level-1 > li.active:not(.open) > a, .modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role="main-navigation"] ul.nav-level-1 > li.open:not(.active) > a {
        background: #FB5D68;
    }


    /* SuchergebnisSeite - Suche-Button */

    .ym-button, .ym-form button, .ym-form input[type="button"], .ym-form input[type="reset"], .ym-form input[type="submit"] {
        background-color: red;
    }

    .ym-button:active, .ym-button:hover, .ym-form button:active, .ym-form button:hover, .ym-form input[type="button"]:active, .ym-form input[type="button"]:hover, .ym-form input[type="reset"]:active, .ym-form input[type="reset"]:hover, .ym-form input[type="submit"]:active, .ym-form input[type="submit"]:hover {
        background: white;
        color: red;
        border: 1px solid #FB5D68;
    }
    /* SuchergebnisSeite - Suche-Eingabe-Feld */

    .modForm .ym-form .ym-searchfield:active, .modForm .ym-form .ym-searchfield:focus, .modForm .ym-form .ym-searchfield:hover {
        color: red;
        border: 1px solid #FB5D68;
    }

    .modForm .ym-form .ym-searchfield:active, .modForm .ym-form .ym-searchfield:focus, .modForm .ym-form .ym-searchfield:active {
        border: 1px solid red !important;
        color: red;
    }


    /* SuchergebnisSeite - Auswahl-Treffer-pro-Seite */

    .custom-select > span:hover {
        border: 1px solid red !important;
        color: red;
    }

    .custom-select > span:active {
        border: 1px solid red !important;
        color: red;
    }

    .custom-select.active > span {
        border: 1px solid red !important;
        color: red;
    }

    /* SuchergebnisSeite - Erweiterte Suche Text */
    .ym-form .button:hover, .ym-form a:hover, .ym-form button:hover {
        color: red;
    }

    /* SuchergebnisSeite - Paginierung */
    .modPagination .active {
        color: red;
    }
}


/* ---------- viewport desktop ---------- */
@media screen {
    /* ##### oeg-mod ##### */

    /* # Sidebar Überschriften und Bilder bündig # */
    .ym-g960-4, .ym-gr{
        margin-top: 0px;
    }

    .modSidebarMinistry img {
        width: 100%;
        margin-top: 27px;
    }



    /* ---------- neu Abstand Homepage vor Mit besten Grüßen ---------- */

    .gruesse_abstand{
        margin-top: -50px;
    }
}


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


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

    /* PDF-Icon in normaler Größe darstellen */
    .imgPdfBw {
        width: auto !important;
    }

    /* Container für Inhaltsverzeichnis */

    .bwContent {
        margin-left: 0px;
        clear: both;
    }

    .bwContent img {
        width: auto;
    }


    .bwTitle {
        padding: 0 0.75em;
    }

}