/* Individual-CSS für das Projekt "37_feuerwehr" */


/* SCHRIFTFORMATIERUNG (inkl. Icons) ALLER BEREICHE (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und HINTERGRUNDFARBEN */


/* Reihenfolge für Pseudo-Klassen beachten :link :visited :hover :focus :active */

a {
    color: #660000; /* Farbe der Links - wird im Navigationsbereich überschrieben. */
}

#brot a::before /* Breadcrumbs */
{
    color: #660000;
}

/* Icons für Links IM TEXT (also KEINE Linklisten) */
a.intern::before,
a.extern::before,
a.pdf::before,
a.mail::before,
a.top::before,
p.csc-linkToTop a::before,
a.pagetotop_link::before, /* Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente) für u.a. Presseamt */
a.back::before,
.dekobild /* > p:after*/ .enlarge::before /* Für Bilder im Text mit Bildunterschrift, geändert am 3.2. E.E. */
{
    color: #660000;
}

/* Icons für Listen/Linklisten */
ul li::before, /* "normaler" Listenpunkt */
ul li.intern::before,
ul li.extern::before,
ul li.pdf::before,
ul li.punkt::before,
ul li.mail::before,
ul li.sprung::before {
    color: #660000;
}

/* Rolli-Icons */
.rolli-picto i {
    color: #660000;
}


.streifen /* Trennstreifen zwischen Kopf und Inhalt */
{
    background-color: #660000;
}

#navi-spalte /* Hintergrundfarbe Navi-Spalte */
{
    background-color: #C7C8CA; /* Bei Änderungen nicht vergessen den responsive-Border der Info-Spalte anzupassen! */
    background-image: none;
    background-position: top left;
    background-repeat: repeat;
}

#inhalts-spalte /* Hintergrundfarbe Inhalts-Spalte */
{
    background-color: #ffffff;
    background-image: none;
    background-position: top left;
    background-repeat: repeat;
}

#info-spalte /* Hintergrundfarbe Info-Spalte */
{
    background-color: #C7C8CA;
    background-image: none;
    background-position: top left;
    background-repeat: repeat;
}

@media screen and (min-width: 785px) and (max-width: 1024px) {
    #info-spalte { /* WICHTIG: die Farbe MUSS der Hintergrundfarbe der Navi-Spalte entsprechen! */
        border-left: 220px solid #C7C8CA;
    }
}


/* Navigation 1. Ebene */

#navi-spalte nav li {
    background-color: #be0a0a;
}

#navi-spalte nav li a {
    color: #ffffff;
}

#navi-spalte nav a.aktiv,
#navi-spalte nav li a:hover,
#navi-spalte nav li a:focus,
#navi-spalte nav li a:active {
    background-color: #660000;
    color: #ffffff;
}

/* Navigation 2. Ebene */

#navi-spalte nav li ul li {
    background-color: #f0f0f0;
}

#navi-spalte nav li ul li a {
    color: #000;
}

#navi-spalte nav li ul a.aktiv,
#navi-spalte nav li ul li a:hover,
#navi-spalte nav li ul li a:focus,
#navi-spalte nav li ul li a:active {
    color: #000;
    background-color: #cccccc;
}

/* Navigation 3. Ebene */

#navi-spalte nav li ul li ul li {
    background-color: #f0f0f0;
}

#navi-spalte nav li ul li ul li a {
    color: #444;
}

#navi-spalte nav li ul li ul a.aktiv,
#navi-spalte nav li ul li ul li a:hover,
#navi-spalte nav li ul li ul li a:focus,
#navi-spalte nav li ul li ul li a:active {
    background-color: #f9f9fa;
    color: #990000;
}


/* Für das Aussehen des Pömpels. Achtung: Werden Größe oder vertical-align geändert, muss auch die Positionierung angepasst werden! */
#navi-spalte nav li ul li ul a.aktiv::before,
#navi-spalte nav li ul li ul li a:hover::before,
#navi-spalte nav li ul li ul li a:focus::before,
#navi-spalte nav li ul li ul li a:active::before {
    color: #990000;
}


main a:hover,
main a:focus,
main a:active,
aside a:hover, /* Hovern auch in der rechten Spalte */
aside a:focus,
aside a:active {
    background-color: #e5e5e5;
}


main {
    color: #444;
}

main h1,
main h2,
main h3,
main h4 {
    color: #660000;
}

main h2.aktuell {
    background-color: #e1e1e1;
}

main h2.marker,
main h3.marker,
main h4.marker {
    background-color: #e1e1e1; /* entspricht standardmäßig der Hintergrundfarbe der Navigation */
}

/* Zitate */
main .zitat {
    background-color: #ebebeb;
}

main .zitat h3 {
    color: #00639d;
}

main th /* Spaltenueberschriften von Tabellen im Inhaltsbereich */
{
    color: #333333;
    background-color: #d9d9d9;
}

main th.zwischentitel {
    color: #333333;
    background-color: #E9E9E9;
}

main th,
main td {
    background-color: #eeeeee;
}

main .dekobild /* Workaround aufgrund alter HTML-Struktur der inneren Elemente. Im Dummy: .bild */
{
    background-color: #f0f0f0;
}

/* Zitate */
main .zitat {
    background-color: #ebebeb;
}

main .zitat h3 {
    color: #00639d;
}

/* ABC-Listen (inkl. Navigation) */
main #abc {
    text-align: center; /* zentriert die Liste, wenn diese ein inline-block Element ist */
}

main #abc ul li {
    background-color: #005b79;
}

main #abc ul li a {
    color: #fff;
}

main #abc ul li a.aktiv,
main #abc ul li a:hover,
main #abc ul li a:focus,
main #abc ul li a:active {
    background-color: #AAB315; /*#a2a800;*/
}

/* Akkordeon */

#inhalts-spalte .accordion h2.accord-closed {
    color: #000000;
    background-color: #eeeeee;
    border-bottom: 1px solid #e0e0e0;

}


#inhalts-spalte .accordion h2.accord-opened {
    background-color: #660000;
}

.accord-closed::after,
.accord-closed::before {
    color: #660000;
}

/* CSS für SCHRIFTFORMATIERUNG Formulare (alleinstehende und integrierte) */
/* Ehemalige form.css, ergänzt um Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) und CSS für alte, integrierte Formulare. */

main form {
    background-color: #e5e5e5; /* Muss der Farbe der checkbox-/radiobutton-Umrandung entsprechen. */
}

main form .type-text input:focus, /* Hierdurch wird das aktive Eingabeelement hervorgehoben */
main form .type-text textarea:focus,
main form .type-check textarea:focus,
main form .type-select select:focus,
main form .formular-element input:focus, /* input-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
main form .formular-element textarea:focus, /* textarea-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
main form .formular-element select:focus, /* selectbox-Auswahlfeld alter, integrierter Formulare (vor Form-Handler) */
main .tx-cq-image-gallery form input:focus /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
{
    background-color: #fff8d1;
}

/* Buttons (auch im Bestätigungs-Schritt) */
main form .submit-buttons .type-button .submit, /* Submit-/Abschicken-Button */
main .last-step .buttons .type-button .print, /* Print-Button in last-step */
main form .buttons input.submit, /* Submit-Button alter, integrierter Formulare (vor Form-Handler) */
main .tx-cq-image-gallery form .submit-buttons .submit-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
{
    background-color: #005395; /* wichtig bei last-step */
    color: #ffffff; /* wichtig bei last-step */
}

main form .submit-buttons .type-button .reset, /* Reset-/Löschen-Button */
main form .buttons input.reset, /* Reset-Button alter, integrierter Formulare (vor Form-Handler) */
main .tx-cq-image-gallery form .submit-buttons .reset-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
{
    color: #323232;
    background-color: #ffffff;
}

/* ENDE Buttons (auch im Bestätigungs-Schritt) */

main form label {
    display: inline-block;
    width: 6em;
}

main form .staedte label {
    display: inline-block;
    width: auto;
}

main form input {
    display: inline-block;
    width: 20em;
}

main form .staedte input {
    display: inline-block;
    width: 1.5em;
}

main form input.submit_c {
    background-color: #022a39;
    color: #ffffff;
    padding: 2px;
    width: 14em;
}

/* ENDE ehemalige form.css, ergänzt um Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) und CSS für alte, integrierte Formulare. */
/* ENDE CSS für SCHRIFTFORMATIERUNG Formulare (alleinstehende und integrierte) */


aside h3 {
    color: #fff;
    background-color: #990000;
}

aside > div > div /* Kasten-Element */
{
    background-color: #fff; /* Hintergrundfarbe */
}

/* Formular-Style Info-Spalte (inkl. Buttons) */

aside form input,
aside form select,
aside form textarea {
    background-color: #fff;
}

aside form input:focus,
aside form select:focus,
aside form textarea:focus {
    background-color: #fff8d1;
    border: 1px solid #005b79;
}

aside form .buttons input.submit {
    color: #ffffff;
    background-color: #005395;
}

aside form .buttons input.reset {
    color: #323232;
}


/* ENDE SCHRIFTFORMATIERUNG (inkl. Icons) ALLER BEREICHE (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und HINTERGRUNDFARBEN */


/* SEITENGERÜST (also auch Header) und ALLGEMEINES */

header .header-overlay /* transparenter Hintergrund für Overlay-Logo */
{
    background: rgba(255, 255, 255, 0.9);
}

header .header-overlay-logo.flexbox img {
    width: 200px;
    height: auto;
}

@media screen and (max-width: 500px) {
    header {
        height: auto;
    }

    header .header-overlay /* transparenter Hintergrund für Overlay-Logo */
    {
        display: block;
        position: static;
        width: 100%;
    }
}

@media screen and (max-width: 785px) {
    header .header-overlay-logo.flexbox {
        display: flex;
    }
}


/* ENDE SEITENGERÜST (also auch Header) und ALLGEMEINES */


/* HAUPTNAVIGATION */
/* ENDE HAUPTNAVIGATION */


/* INHALTS- und INFOBEREICH allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen) */
/* ENDE INHALTS- und INFOBEREICH allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen) */


/* INHALTSBEREICH */
/* ENDE INHALTSBEREICH */


/* INFOBEREICH ("rechte Spalte") */


/* Kasten Social Media (Info-Spalte) */
aside #c98518 div.ce-gallery {
    padding: 0.1em 0.2em 0.5em 0.6em;
}

aside #c98518 .ce-column {
    margin-right: 5px !important;
}


/* ENDE Kasten Social Media (Info-Spalte) */


/* ENDE INFOBEREICH ("rechte Spalte") */


/* INDIVIDUAL PRINT-STYLE */


/* ---------------- Print --------------------- */

@media print {
    body {
        background-color: #ffffff;
    }

    #seiten-wrapper {
        box-shadow: none;
    }

    header {
        height: 120px; /* Da die Kopfgrafiken im Print ausgeblendet werden, muss die height angepasst werden. */
    }

    header .amt {
        width: 200px; /* Wichtig, sonst hat die Amtskennung beim Print zu viel Platz. */
    }

    header .amt .amtsbezeichnung {
        font-size: 12px;
    }

    header .logos.flexbox /* Stadtlogo einrücken, damit vollständig. */
    {
        display: inline-block !important;
        float: right;
    }

    header .logos.flexbox .muenster-de /* muenster.de Schriftzug */
    {
        margin: 6px 25px 0 5px;
        float: left;
        font-size: 30px;
    }

    header .logos.flexbox .stadt-ms /* Stadt Münster Logo */
    {
        float: left;
    }


    header .content-header {
        display: none;
    }


    header .header-overlay {
        display: block;
        margin: 0;
        padding: 0;
        height: 50px;
        position: absolute;
        top: 75px;
        left: -10px;
        z-index: 999;
    }

    header .header-overlay-logo.flexbox img {
        width: 140px;
        height: auto;
        z-index: 999;
    }

    .streifen {
        height: 1px;
        margin: 0.1em 0 0.1em 0;
    }

    .footerlinks ul {
        display: none;
        height: 1px;
        margin: 0;
    }

    #info-spalte {
        background-color: #fff !important; /* !important muss sein, da sonst background-color in tourismus.css greift. */
        border-color: #fff !important; /* !important muss sein, da sonst background-color in tourismus.css greift. */
        width: 99%;
        page-break-before: auto;
        page-break-inside: avoid;
        margin-top: -30px;
    }

    #info-spalte aside {
        width: 99%;
        overflow: hidden; /* wichtig, damit dieser Container die Kindelemente umschließt (die Höhe wächst auf die Höhe des größten Kind-Elements). */
    }

    #info-spalte aside > div /* Verhalten/Aussehen von #rechts_1, #rechts_2, usw. */
    {
        float: left;
        margin: 0;
        width: auto;
    }

    #info-spalte aside > div > div /* Verhalten/Aussehen der Inhaltselemente (äußerer, umschließender div-Container) */
    {
        float: left;
        margin-top: 0.5em;
        margin-right: 6px;
        margin-bottom: 0;
        width: 195px;
    }

    /*
    Da die Browser beim Drucken häufig Hintergrundfarben-/bilder ausblenden, legen wir als
    Workaround Rahmen um die Kästen in der rechten Spalte. */
    #info-spalte aside > div > * /* Rahmen links/rechts */
    {
        border-left: 1px solid grey;
        border-right: 1px solid grey;
    }

    #info-spalte aside > div > div /* Rahmen oben/unten - oben ist wichtig, da es Elemente ohne Überschrift gibt! */
    {
        border-top: 1px solid grey;
        border-bottom: 1px solid grey;
    }

    /* "bugfixing" - nötig, da die HTML-Struktur der Kästen nicht einheitlich ist. */
    #info-spalte aside > div > div > .linklist,
    #info-spalte aside > div > div > .kasten {
        margin-top: 0;
        margin-bottom: 0;
    }


}


/* ENDE INDIVIDUAL PRINT-STYLE */