body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* * * * * ehemalige interne Styles * * * * */

/*

Lustat Contao Theme - Seitenlayouts und Styles

Gemäss Auswertung binden alle Seitenlayouts, die noch auf die internen Styles zurückgreifen, auch die Datei layout.css ein. Deshalb können die internen Styles in den Anfang übernommen werden (die internen Styles wurden jeweils vor den externen geladen)

Betroffene Layouts:
- Analysen - Querschnittsthemen - Regionale Disparitäten 2020
- Analysen - Webartikel - Corona Reporting
- Analysen - Webartikel (Seitenspalte für Navigation und andere Webartikel)
- Erhebung Gemeindefinanzen
- Homepage
- Homepage Kopie für Eckdaten (Kombination mit altem Layout)
- Indikatoren (angepasste Navigation ab der dritten Ebene)
- Indikatoren statische Seiten (angepasste Navigation ab der dritten Ebene)
- Inhalte - Kontakte
- Inhalte - Team
- Inhalte (Navigation auf der linken Seite)
- Mobile App - Artikel
- Spitex
- Startseite

*/


/* * * ehemalige interne Styles: Inhalte * * */

a.tooltips {
    position: relative;
}

a.tooltips span {
    width: 400px;
    position: absolute;
    display: none;
    padding: .5em 1em;
    background-color: rgba(111, 111, 111, .95);
    border: 1px solid rgba(196, 196, 196, .95);
    border-radius: 6px;
    color: #fff;
}

a.tooltips span:after {
    width: 0;
    height: 0;
    left: 10%;
    top: 100%;
    position: absolute;
    content: '';
    border-top: 8px solid rgba(111, 111, 111, .95);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

a:hover.tooltips span {
    bottom: 100%;
    display: block;
    margin-bottom: .5em;
    margin-left: -2em;
    z-index: 999;
}

div.ce_lustat_indikator div.highchart {
    width: 100%;
    margin: 2em auto;
}

img {
    display: block;
}

.content-gallery img,
p img {
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
}

div.ce_indikatoren_icon {
    float: left;
    padding: .5em 1.5em 1em 1em;
}

div.content-image.block + div.content-text > p:first-child {
    margin-top: 2em;
}


/* * * ehemalige interne Styles: Layout_Desktop_0000 * * */

#container {
    margin-top: 20px;
}

#header {
    padding-top: 10px;
    border-bottom: 1px solid #c4c4c4;
}

main#main div.inside {
    font-size: 100%;
    line-height: 1.7em;
    font-weight: normal;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

aside#left div.inside {
    margin-top: 68px;
    padding-right: 40px;
}

*[class*="grid"],
.mod_article *[class*="content-"],
.mod_article *[class*="mod_"] {
    margin-right: 10px;
    margin-left: 10px;
}

/* Korrektur der vorangegangenen Anweisung: Ausnahme für Akkordeon */
.mod_article div.ui-accordion-content-active {
    margin-right: 0;
    margin-left: 0;
}

.mod_article div.ce_table {
    margin: 0;
}

#header-slider [class*="ce_"] {
    margin: 0;
}

.slider-wrapper .content-text {
    margin-right: 0;
    margin-left: 0;
}

ul,
li {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: square;
}

li {
    margin-left: 2em;
}

#wrapper-footer {
    padding-top: 20px;
    padding-bottom: 30px;
}

#wrapper-footer .clear {
    height: 40px;
    margin-right: 10px;
    margin-left: 10px;
    border-bottom: 1px solid #c4c4c4;
}

.content-gallery > ul > li {
    float: none;
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
}


/* * * ehemalige interne Styles: Layout_Desktop_0768 * * */

@media (min-width: 768px) {

    #wrapper,
    #wrapper-header,
    #wrapper-footer {
        width: 744px;
        margin: 0 auto;
    }

    #wrapper-header .inside {
        margin-right: 10px;
        margin-left: 10px;
    }

    *[class*="grid"] {
        float: left;
        display: inline;
    }

    .grid2 {
        width: 228px;
        min-height: 220px;
    }

    .grid4 {
        width: 352px;
    }

    .grid6 {
        width: 724px;
    }

    .mod_article.grid1,
    .mod_article.grid2,
    .mod_article.grid3,
    .mod_article.grid4,
    .mod_article.grid5,
    .mod_article.grid6,
    .mod_article.grid7,
    .mod_article.grid8,
    .mod_article.grid9,
    .mod_article.grid10,
    .mod_article.grid11,
    .mod_article.grid12 {
        margin-right: 0;
        margin-left: 0;
    }

    .content-gallery > ul {
        margin-right: -10px;
        margin-left: -10px;
    }

    .content-gallery > ul > li,
    .content-gallery > ul > li.col_first {
        float: left;
        clear: none;
        margin-right: 10px;
        margin-left: 10px;
    }

    .content-gallery > ul > li {
        width: 212px;
    }
}


/* * * ehemalige interne Styles: Layout_Desktop_0960 * * */

@media (min-width: 960px) {

    #wrapper,
    #wrapper-header,
    #wrapper-footer {
        width: 960px;
    }

    .grid2,
    .grid4 {
        width: 300px;
    }

    .grid6 {
        width: 460px;
    }

    #footer div.anmeldung > p {
        text-align: right;
    }

    .content-gallery > ul > li {
        width: 206px;
    }
}


/* * * ehemalige interne Styles: Layout_Desktop_1200 * * */

@media (min-width: 1200px) {

    #wrapper,
    #wrapper-header,
    #wrapper-footer {
        width: 1200px;
    }

    .grid2 {
        width: 180px;
    }

    .grid4 {
        width: 380px;
    }

    .grid6 {
        width: 580px;
    }

    .content-gallery > ul > li {
        width: 210px;
    }
}


/* * * * * bestehende externe Styles * * * * */

/* * * * * * * * * * Schrift: Source Sans Pro * * * * * * * * * */

/* source-sans-pro-200italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 200;
    src: local(''),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-200 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 200;
    src: local(''),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-300 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-300italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 300;
    src: local(''),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-regular - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: local(''),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-600 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: local(''),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-600italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 600;
    src: local(''),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-700 - latin */
/*@font-face {*/
/*    font-family: 'Source Sans Pro';*/
/*    font-style: normal;*/
/*    font-weight: 700;*/
/*    src: local(''),*/
/*    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'), !* Chrome 26+, Opera 23+, Firefox 39+ *! url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-700.woff') format('woff'); !* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *!*/
/*}*/

/* source-sans-pro-700italic - latin */
/*@font-face {*/
/*    font-family: 'Source Sans Pro';*/
/*    font-style: italic;*/
/*    font-weight: 700;*/
/*    src: local(''),*/
/*    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-700italic.woff2') format('woff2'), !* Chrome 26+, Opera 23+, Firefox 39+ *! url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-700italic.woff') format('woff'); !* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *!*/
/*}*/

/* source-sans-pro-900 - latin */
/*@font-face {*/
/*    font-family: 'Source Sans Pro';*/
/*    font-style: normal;*/
/*    font-weight: 900;*/
/*    src: local(''),*/
/*    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-900.woff2') format('woff2'), !* Chrome 26+, Opera 23+, Firefox 39+ *! url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-900.woff') format('woff'); !* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *!*/
/*}*/

/* source-sans-pro-900italic - latin */
/*@font-face {*/
/*    font-family: 'Source Sans Pro';*/
/*    font-style: italic;*/
/*    font-weight: 900;*/
/*    src: local(''),*/
/*    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-900italic.woff2') format('woff2'), !* Chrome 26+, Opera 23+, Firefox 39+ *! url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-900italic.woff') format('woff'); !* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *!*/
/*}*/


/* * * * * * * * * * LUSTAT Logo * * * * * * * * * */

/* Header: Bereich für das Logo */
#header #logo {
    height: 59px;
    margin: auto;
    width: 77px;
}

/* Header: Logo als Blockelement und Grösse definieren */
#header #logo img {
    display: block;
    width: 100%;
}


/* Vertikalen Scroll-Balken immer zeigen */
html {
    overflow-y: scroll;
}

/* * * * * * * * * * Schriftart und Schriftfarbe * * * * * * * * * */
body {
    font: 100% 'Source Sans Pro';
    color: #3e3e3e;
}


/* * * * * * * * * * Überschriften * * * * * * * * * */

/* Ebene 1 */
h1 {
    margin-top: 1.5em;
    margin-bottom: .5em;
    font-size: 200%;
    line-height: 1em;
    font-weight: bold;
}

/* Spezielles Titelformat aus kombinierten Überschriften der Ebene 3 über der Ebene 1 */
h3 + h1 {
    margin-top: 0;
}

/* Ebene 2 */
h2 {
    margin-top: 3em;
    padding-bottom: .5em;
    border-bottom: 1px solid #c4c4c4;
    font-size: 100%;
    font-weight: bold;
}

/* Ebene 2 im Footer */
footer h2 {
    border-bottom: 0;
}

/* Ebene 3 */
h3 {
    margin-top: 2em;
    margin-bottom: .5em;
    padding: 0;
    font-size: 1rem;
    font-weight: bold;
}

/* Ebene 3 - Abstand direkt nach einer H2-Überschrift verkleinern */
h2 + div > h3,
h2 + h3 {
    margin-top: 0;
}


/* * * * * * * * * * Text * * * * * * * * * */

/* Abstände bei Absätzen */
p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Abstände bei sortierten Listen */
ol {
    margin: 0;
    padding: 0;
}


/* * * * * * * * * * Tabellen * * * * * * * * * */

div.ce_basis_mitarbeiterKontaktinformationen {
    overflow-x: auto;
}

div.ce_table.ce_basis_mitarbeiterKontaktinformationen {
    margin-top: 3em;
}

table#kontaktinformationen {
    margin-left: 10px;
    white-space: nowrap;
    width: calc(100% - 20px);
}

table#kontaktinformationen th {
    cursor: pointer;
    padding-left: 0.5em;
    padding-right: 1em;
    text-align: left;
}

table#kontaktinformationen > tbody > tr {
    transition: 0.5s;
}

table#kontaktinformationen > tbody > tr:hover {
    background-color: #86bce1;
    cursor: default;
}

table.webartikel {
    margin-bottom: 2em;
    width: calc(100% - 2px);
}

table.webartikel th {
    background-color: #e4e4e4;
    border: 1px solid #c4c4c4;
    padding-left: 0.5em;
    padding-right: 0.5em;
    vertical-align: top;
}

table.webartikel td.zweispalten {
    width: 50%;
}

table.webartikel td.dreispalten {
    width: 30%;
}

table.webartikel td.vierspalten {
    width: 25%;
}

table.webartikel td.entwicklung-positiv {
    color: #00b400;
}

table.webartikel td.entwicklung-negativ {
    color: #e80000;
}

table.webartikel th.text,
table.webartikel td.text {
    text-align: left;
}

table.webartikel th.zahl,
table.webartikel td.zahl {
    text-align: right;
}

table.webartikel td.abstand {
    column-span: 2;
    border: none;
    height: 10px;
}

/* * * * * * * * * * Links * * * * * * * * * */

a {
    text-decoration: none;
    color: #0072ba;
}

a.ohnelink {
    color: #3e3e3e;
}

a:hover {
    text-decoration: underline;
}

a.ohnelink:hover {
    text-decoration: none;
}


/* * * * * * * * * * Links mit Symbolen * * * * * * * * * */

/* Grösse, Abstände und Farbe */
div.content-download a,
div.content-downloads a,
div.content-hyperlink a,
div.download a,
div.link > a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 38px;
    vertical-align: baseline;
    background-repeat: no-repeat;
    line-height: 40px;
    text-decoration: none;
    color: #3e3e3e;
    background-size: 30px;
    background-position: left center;
}

/* Farbe (Hover) */
div.content-download a:hover,
div.content-downloads a:hover,
div.content-hyperlink a:hover,
div.download a:hover,
div.link > a:hover {
    color: #0072ba;
}

/* Formatierung der Dateigrösse */
div.content-download a span,
div.content-downloads a span {
    font-size: 70%;
}

/* Liste: Abstände und Listensymbol */
div.content-downloads ul {
    margin: 0;
    list-style-type: none;
}

/* Listenelemente: Abstände */
div.content-downloads ul li {
    margin: 0;
}


/* * * * * * * * * * * * * * * * * * * * Media Queries * * * * * * * * * * * * * * * * * * * */

@media (min-width: 768px) {

    /* * * * * * * * * * LUSTAT Logo * * * * * * * * * */
    /* Header: Bereich für das Logo */
    #header #logo {
        float: left;
        height: 84px;
        margin-left: 0;
        width: 110px;
    }
}

/* * * * * Cookie-Hinweis * * * * */

.cookiebar {
    z-index: 100;
}


/* * * * * Fixed Footer * * * * */

#footer {
    background-color: #f3f3f3;
    border-top: 1px solid #c4c4c4;
    font-size: 0.8rem;
    margin-top: 100px;
    padding-bottom: 20px;
}

/* * * * * * * * * * Navigation * * * * * * * * * */

/* Listensymbol für alle Navigationselemente deaktivieren */
nav ul {
    list-style-type: none;
}

/* Abstände zurücksetzen */
nav li {
    margin: 0;
    padding: 0;
    text-align: left;
}


/* * * * * * * * * * Hauptnavigation (Ebenen 1 und 2) * * * * * * * * * */

/* Hintergrundfarbe */
#hauptnavigation {
    margin-top: 10px;
    background-color: #6f6f6f;
}

/* Ebene 1: Elemente als Block, mit Innenabständen und ohne Unterstreichung */
#hauptnavigation a,
#hauptnavigation strong {
    display: block;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-decoration: none;
}

/* Ebene 1: Schriftgrösse und Schriftstil */
#hauptnavigation ul.level_1 > li {
    border-top: 1px solid #c4c4c4;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

/* Ebene 1: Schriftfarbe */
#hauptnavigation ul.level_1 > li > a,
#hauptnavigation ul.level_1 > li > strong {
    color: #c4c4c4;
    font-weight: bold;
}

/* Ebene 1: Schriftfarbe (Hover) */
#hauptnavigation ul.level_1 > li > a:focus,
#hauptnavigation ul.level_1 > li > a:hover,
#hauptnavigation ul.level_1 > li > a.trail,
#hauptnavigation ul.level_1 > li > strong.active,
#hauptnavigation ul.level_1 > li > strong.forward {
    background-color: #5f5f5f;
    color: #ffffff;
}

/* Ebene 2: ausblenden */
#hauptnavigation ul.level_2 {
    display: none;
}


/* * * * * * * * * * Navigation Links * * * * * * * * * */

/* Linker Abstand */
#left {
    padding-left: 10px;
}

/* Menüpunkte gestalten */
#left nav.mod_navigation a,
#left nav.mod_navigation strong {
    color: #3e3e3e;
    display: block;
    font-weight: normal;
    margin: 0;
    padding: 0.5em 0;
    text-decoration: none;
}

/* Aktiven Menüpunkt hervorheben */
#left nav.mod_navigation a:focus,
#left nav.mod_navigation a:hover,
#left nav.mod_navigation a.trail,
#left nav.mod_navigation strong.active,
#left nav.mod_navigation strong.forward {
    color: #0072ba;
}

/* Liste gestalten */
#left nav.mod_navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Listenelemente gestalten */
#left nav.mod_navigation li {
    border-top: 1px solid #c4c4c4;
}


/* * * * * Navigation Links Ebene 1 * * * * */

/* Ebene 1: Erstes Listenelement gestalten */
#left nav.mod_navigation ul.level_1 > li:first-of-type {
    border-top: 0;
}


/* * * * * Navigation Links Ebene 2 * * * * */

/* Ebene 2: Ebene ausblenden */
#left nav.mod_navigation ul.level_2 {
    display: none;
}

/* Ebene 2: Ebene einblenden, wenn Element selbst oder Eltern-Element aktiv ist */
#left nav.mod_navigation li.active ul.level_2,
#left nav.mod_navigation li.trail ul.level_2 {
    display: block;
}

/* Ebene 2: Unterpunkte links einrücken */
#left nav.mod_navigation ul.level_2 > li > a,
#left nav.mod_navigation ul.level_2 > li > strong {
    font-size: 0.9rem;
    font-weight: normal;
    margin-left: 1em;
}


/* * * * * Navigation Links Ebene 3 * * * * */

/* Ebene 3: Ebene ausblenden */
#left nav.mod_navigation ul.level_3 {
    display: none;
}

/* Ebene 3: Ebene einblenden, wenn Element selbst oder Elternelement aktiv ist */
#left nav.mod_navigation ul.level_2 > li.active > ul.level_3,
#left nav.mod_navigation ul.level_2 > li.trail > ul.level_3 {
    display: block;
}

/* Ebene 3: Unterpunkte links einrücken */
#left nav.mod_navigation ul.level_3 > li > a,
#left nav.mod_navigation ul.level_3 > li > strong {
    font-size: 0.8rem;
    margin-left: 2em;
}


/* * * * * * * * * * Navigation Service (Header) * * * * * * * * * */

/* Liste mit den Navigationselementen */
#header nav.mod_customnav ul {
    float: right;
    list-style-type: none;
    padding: 0;
    width: auto;
}

/* Listenelemente nebeneinander ausrichten */
#header .mod_customnav li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Inhalte der einzelnen Navigationselemente */
#header .mod_customnav a,
#header .mod_customnav strong {
    color: #6f6f6f;
    display: block;
    font-size: 80%;
    font-weight: normal;
    line-height: 1.7em;
    margin-right: 2em;
    text-decoration: none;
}

/* Rechten Abstand für das letzte Navigationselements entfernen */
#header nav.mod_customnav li:last-child a,
#header nav.mod_customnav li:last-child strong {
    margin-right: 0;
}

/* Aktive Elemente durch Unterstreichung hervorheben */
#header .mod_customnav a:focus,
#header .mod_customnav a:hover,
#header .mod_customnav a.trail,
#header .mod_customnav strong.active,
#header .mod_customnav strong.trail {
    text-decoration: underline;
}


/* * * * * * * * * * Footer: Allgemein * * * * * * * * * */

/* Schriftfarbe im Footer */
footer p,
footer a,
footer span,
footer h2 {
    color: #6f6f6f;
}

/* Überschrift 2 im Footer */
footer h2 {
    border-bottom: 0;
}

/* Aktiven Menüpunkt hervorheben */
footer a:hover {
    text-decoration: none;
    color: #0072ba;
}


/* * * * * * * * * * Footer: Navigation * * * * * * * * * */

/* Liste gestalten */
footer nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* Listenelemente gestalten */
footer nav li {
    border-top: 1px solid #c4c4c4;
    margin: 0;
}

footer nav li a,
footer nav li strong {
    padding: 0.5em 0;
    display: block;
}

/* Erstes Listenelement gestalten */
footer nav li:first-child {
    border-top: 0;
}

/* Aktiven Menüpunkt hervorheben */
footer nav li a:focus span,
footer nav li a:hover span,
footer nav li a.trail span,
footer nav li strong.active,
footer nav li strong.forward {
    color: #0072ba;
    font-weight: normal;
}


/* * * * * * * * * * * * * * * * * * * * Media Queries * * * * * * * * * * * * * * * * * * * */

@media (max-width: 767px) {

    /* * * * * * * * * * Servicenavigation (Header) * * * * * * * * * */
    /* Auf Mobiles nicht anzeigen */
    #header nav.mod_customnav {
        display: none;
    }
}


@media (min-width: 768px) {

    /* * * * * * * * * * Hauptnavigation (Ebenen 1 und 2) * * * * * * * * * */
    /* Hintergrundfarbe und Abstand nach oben */
    #hauptnavigation {
        background-color: #ffffff;
        margin-top: 69px;
    }

    /* Ebene 1: Liste Navigationselementen rechts ausrichten */
    #hauptnavigation ul.level_1 {
        float: right;
    }

    /* Ebene 1: Listenelemente nebeneinander ausrichten sowie Schriftgrösse, Abstand der Navigationselemente und Rahmen entfernen */
    #hauptnavigation ul.level_1 > li {
        border: 0;
        float: left;
        font-size: 0.9rem;
        margin-right: 1.5em;
        width: auto;
    }

    /* Ebene 1: rechten Abstand des letzten Navigationselements entfernen */
    #hauptnavigation ul.level_1 > li:last-of-type {
        margin-right: 0;
    }

    /* Ebene 1: Schriftfarbe und Abstände gegenüber Mobile anpassen */
    #hauptnavigation ul.level_1 > li > a,
    #hauptnavigation ul.level_1 > li > strong {
        color: #6f6f6f;
        padding: 0 0 10px;
    }

    /* Ebene 1: Hintergrund und Schriftfarbe (Hover) gegenüber Mobile anpassen */
    #hauptnavigation ul.level_1 > li > a:focus,
    #hauptnavigation ul.level_1 > li > a:hover,
    #hauptnavigation ul.level_1 > li > a.trail,
    #hauptnavigation ul.level_1 > li > strong.active,
    #hauptnavigation ul.level_1 > li > strong.forward {
        background-color: #ffffff;
        color: #0072ba;
    }

    /* Ebene 1: Zweite Ebene bei Mouse Over einblenden */
    #hauptnavigation ul.level_1 > li:hover ul.level_2 {
        background-color: rgba(111, 111, 111, .95);
        border: 1px solid rgba(196, 196, 196, .95);
        border-radius: 6px;
        display: block;
        margin-left: -142px;
        padding: 5px;
        position: absolute;
        width: 270px;
        z-index: 1000;
    }

    /* Ebene 1: Für zweite Pfeil an der der Box */
    #hauptnavigation ul.level_1 > li:hover ul.level_2:after {
        border-bottom: 8px solid rgba(111, 111, 111, .95);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        content: '';
        height: 0;
        left: 138px;
        position: absolute;
        top: -8px;
        width: 0;
    }

    /* Ebene 2: Aussenabstand auf der rechten Seite zurücksetzen, Elemente untereinander, Trennlinien zwischen den Elementen, Schriftgrössen */
    #hauptnavigation ul.level_2 > li {
        border-top: 1px solid #c4c4c4;
        clear: both;
        font-size: 1rem;
        font-weight: normal;
        letter-spacing: 0;
        margin-right: 0;
        text-transform: none;
        width: 100%;
    }

    /* Ebene 2: Trennlinie vor dem ersten Element entfernen */
    #hauptnavigation ul.level_2 > li:first-child {
        border-top: 0;
    }

    /* Ebene 2: Schriftfarbe und Abstände gegenüber Mobile anpassen */
    #hauptnavigation ul.level_2 > li > a,
    #hauptnavigation ul.level_2 > li > strong {
        color: #e4e4e4;
        font-weight: normal;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    /* Ebene 2: Hintergrund und Schriftfarbe (Hover) gegenüber Mobile anpassen */
    #hauptnavigation ul.level_2 > li > a:focus,
    #hauptnavigation ul.level_2 > li > a:hover,
    #hauptnavigation ul.level_2 > li > a.trail,
    #hauptnavigation ul.level_2 > li > strong.active,
    #hauptnavigation ul.level_2 > li > strong.forward {
        background-color: #5f5f5f;
        color: #ffffff;
    }
}


@media (min-width: 960px) {

    /* * * * * * * * * * Hauptnavigation (Ebenen 1 und 2) * * * * * * * * * */
    /* Abstand nach oben */
    #hauptnavigation {
        margin-top: 65px;
    }

    /* Ebene 1: Schriftgrösse */
    #hauptnavigation ul.level_1 > li {
        font-size: 1.1rem;
    }
}


@media (min-width: 1200px) {

    /* * * * * * * * * * Hauptnavigation (Ebenen 1 und 2) * * * * * * * * * */
    /* Abstand nach oben */
    #hauptnavigation {
        margin-top: 62px;
    }

    /* Ebene 1: Schriftgrösse */
    #hauptnavigation ul.level_1 > li {
        font-size: 1.3rem;
    }
}

/* Volle Breite */
table {
    width: 100%;
    border-collapse: collapse;
}

/* Rahmen und Abstände der Zellen */
table td {
    padding-right: .5em;
    padding-left: .5em;
    vertical-align: top;
    text-align: left;
    border: 1px solid #c4c4c4;
}

/* Rahmen pro Zelle */
table.streifen {
    width: 100%;
    border-collapse: separate;
}

/* Ungerade Zeilen */
table.streifen > tbody > tr:nth-child(odd) {
    background-color: rgba(228, 228, 228, .2);
}

/* Gerade Zeilen */
table.streifen > tbody > tr:nth-child(even) {
    background-color: rgba(228, 228, 228, .6);
}

/* Zellen im Tabellenkopf */
table.streifen > thead > tr > td {
    padding-right: .5em;
    padding-left: .5em;
    text-align: left;
    background-color: #7f7f7f;
    border: 0;
    color: #fff;
}

/* Zellen im Tabellenrumpf */
table.streifen > tbody > tr > td {
    padding-right: .5em;
    padding-left: .5em;
    vertical-align: middle;
    text-align: left;
    border: 0;
}

/* * * * * * * * * * Download CSV * * * * * * * * * */

div.content-download a.csv,
div.content-downloads a.csv,
div.link > a.csv {
    background-image: url("/files/themes/lustat/symbole/download_csv_3e3e3e.svg");
}

div.content-download a.csv:hover,
div.content-downloads a.csv:hover,
div.link > a.csv:hover {
    background-image: url("/files/themes/lustat/symbole/download_csv_0072ba.svg");
}


/* * * * * * * * * * Download DOC * * * * * * * * * */

div.content-download a.docx,
div.content-downloads a.docx,
div.link > a.word {
    background-image: url("/files/themes/lustat/symbole/download_doc_3e3e3e.svg");
}

div.content-download a.docx:hover,
div.content-downloads a.docx:hover,
div.link > a.word:hover {
    background-image: url("/files/themes/lustat/symbole/download_doc_0072ba.svg");
}


/* * * * * * * * * * Download PDF * * * * * * * * * */

.download-element.ext-pdf a,
div.content-downloads a.pdf,
div.download > a.pdf,
div.link > a.pdf {
    background-image: url("/files/themes/lustat/symbole/download_pdf_3e3e3e.svg");
}

.download-element.ext-pdf a:hover,
div.content-downloads a.pdf:hover,
div.download > a.pdf:hover,
div.link > a.pdf:hover {
    background-image: url("/files/themes/lustat/symbole/download_pdf_0072ba.svg");
}


/* * * * * * * * * * Download XLS * * * * * * * * * */

div.content-download .ext-xls a,
div.content-downloads .ext-xls a,
div.content-download .ext-xlsx a,
div.content-downloads .ext-xlsx a,
div.content-hyperlink.excel a,
div.download > a.excel,
div.link > a.excel {
    background-image: url("/files/themes/lustat/symbole/download_xls_3e3e3e.svg");
}

div.content-download .ext-xls a:hover,
div.content-downloads .ext-xls a:hover,
div.content-download .ext-xlsx a:hover,
div.content-downloads .ext-xlsx a:hover,
div.content-hyperlink.excel a:hover,
div.download > a.excel:hover,
div.link > a.excel:hover {
    background-image: url("/files/themes/lustat/symbole/download_xls_0072ba.svg");
}


/* * * * * * * * * * Download XSD * * * * * * * * * */

div.content-download a.xsd,
div.content-downloads a.xsd,
div.link > a.xsd {
    background-image: url("/files/themes/lustat/symbole/download_xsd_3e3e3e.svg");
}

div.content-download a.xsd:hover,
div.content-downloads a.xsd:hover,
div.link > a.xsd:hover {
    background-image: url("/files/themes/lustat/symbole/download_xsd_0072ba.svg");
}


/* * * * * * * * * * Download ZIP * * * * * * * * * */

div.content-download a.zip,
div.content-downloads a.zip,
div.link > a.zip {
    background-image: url("/files/themes/lustat/symbole/download_zip_3e3e3e.svg");
}

div.content-download a.zip:hover,
div.content-downloads a.zip:hover,
div.link > a.zip:hover {
    background-image: url("/files/themes/lustat/symbole/download_zip_0072ba.svg");
}


/* * * * * * * * * * Link Allgemein (Pfeil nach rechts) * * * * * * * * * */

div.content-hyperlink.allgemein a,
div.link > a.allgemein {
    background-image: url("/files/themes/lustat/symbole/link_allgemein_rechts_3e3e3e.svg");
}

div.content-hyperlink.allgemein a:hover,
div.link > a.allgemein:hover {
    background-image: url("/files/themes/lustat/symbole/link_allgemein_rechts_0072ba.svg");
}


/* * * * * * * * * * Link Allgemein (Pfeil nach links) * * * * * * * * * */

div.content-hyperlink.allgemein-back a,
div.link > a.allgemein-back {
    background-image: url("/files/themes/lustat/symbole/link_allgemein_links_3e3e3e.svg");
}

div.content-hyperlink.allgemein-back a:hover,
div.link > a.allgemein-back:hover {
    background-image: url("/files/themes/lustat/symbole/link_allgemein_links_0072ba.svg");
}


/* * * * * * * * * * Link Anker in derselben Seite (Pfeil nach unten) * * * * * * * * * */

div.content-hyperlink.anker a,
div.link > a.anker {
    background-image: url("/files/themes/lustat/symbole/link_anker_3e3e3e.svg");
}

div.content-hyperlink.anker a:hover,
div.link > a.anker:hover {
    background-image: url("/files/themes/lustat/symbole/link_anker_0072ba.svg");
}

/* * * * * * * * * * Link Anker in derselben Seite (Pfeil nach oben) * * * * * * * * * */

div.content-hyperlink.top a,
div.link > a.top {
    background-image: url("/files/themes/lustat/symbole/link_top_3e3e3e.svg");
}

div.content-hyperlink.top a:hover,
div.link > a.top:hover {
    background-image: url("/files/themes/lustat/symbole/link_top_0072ba.svg");
}


/* * * * * * * * * * Link Extern * * * * * * * * * */

div.content-hyperlink.extern a,
div.link > a.extern {
    background-image: url("/files/themes/lustat/symbole/link_www_3e3e3e.svg");
}

div.content-hyperlink.extern a:hover,
div.link > a.extern:hover {
    background-image: url("/files/themes/lustat/symbole/link_www_0072ba.svg");
}


/* * * * * * * * * * Chart * * * * * * * * * */

div.content-hyperlink.chart a,
div.download > a.chart,
div.link > a.chart {
    background-image: url("/files/themes/lustat/symbole/link_chart_3e3e3e.svg");
}

div.content-hyperlink.chart a:hover,
div.download > a.chart:hover,
div.link > a.chart:hover {
    background-image: url("/files/themes/lustat/symbole/link_chart_0072ba.svg");
}


/* * * * * * * * * * Tabelle * * * * * * * * * */

div.content-hyperlink.daten a,
div.link > a.tabelle {
    background-image: url("/files/themes/lustat/symbole/link_tabelle_3e3e3e.svg");
}

div.content-hyperlink.daten a:hover,
div.link > a.tabelle:hover {
    background-image: url("/files/themes/lustat/symbole/link_tabelle_0072ba.svg");
}


/* * * * * * * * * * Monitoring und Indikatoren * * * * * * * * * */

div.content-hyperlink.monitoring a,
div.download > a.monitoring,
div.link > a.monitoring {
    background-image: url("/files/themes/lustat/symbole/link_monitoring_3e3e3e.svg");
}

div.content-hyperlink.monitoring a:hover,
div.download > a.monitoring:hover,
div.link > a.monitoring:hover {
    background-image: url("/files/themes/lustat/symbole/link_monitoring_0072ba.svg");
}


/* * * * * * * * * * Karte * * * * * * * * * */

div.content-hyperlink.karte a,
div.link > a.karte {
    background-image: url("/files/themes/lustat/symbole/link_karte_3e3e3e.svg");
}

div.content-hyperlink.karte a:hover,
div.link > a.karte:hover {
    background-image: url("/files/themes/lustat/symbole/link_karte_0072ba.svg");
}


/* * * * * * * * * * Medienmitteilung * * * * * * * * * */

div.content-hyperlink.medienmitteilung a,
div.download > a.medienmitteilung,
div.link > a.medienmitteilung {
    background-image: url("/files/themes/lustat/symbole/link_medienmitteilung_3e3e3e.svg");
}

div.content-hyperlink.medienmitteilung a:hover,
div.download > a.medienmitteilung:hover,
div.link > a.medienmitteilung:hover {
    background-image: url("/files/themes/lustat/symbole/link_medienmitteilung_0072ba.svg");
}


/* * * * * * * * * * Link opendata.swiss * * * * * * * * * */

div.content-hyperlink.opendata a,
div.download > a.opendata,
div.link > a.opendata {
    background-image: url("/files/themes/lustat/symbole/link_opendata_3e3e3e.svg");
}

div.content-hyperlink.opendata a:hover,
div.download > a.opendata:hover,
div.link > a.opendata:hover {
    background-image: url("/files/themes/lustat/symbole/link_opendata_0072ba.svg");
}


/* * * * * * * * * * Infografik * * * * * * * * * */

div.content-hyperlink.infografik a,
div.download > a.infografik,
div.link > a.infografik {
    background-image: url("/files/themes/lustat/symbole/link_infografik_3e3e3e.svg");
}

div.content-hyperlink.infografik a:hover,
div.download > a.infografik:hover,
div.link > a.infografik:hover {
    background-image: url("/files/themes/lustat/symbole/link_infografik_0072ba.svg");
}


/* * * * * * * * * * Publikation * * * * * * * * * */

div.content-hyperlink.publikation a,
div.download > a.publikation,
div.link > a.publikation {
    background-image: url("/files/themes/lustat/symbole/link_publikation_3e3e3e.svg");
}

div.content-hyperlink.publikation a:hover,
div.download > a.publikation:hover,
div.link > a.publikation:hover {
    background-image: url("/files/themes/lustat/symbole/link_publikation_0072ba.svg");
}


/* * * * * * * * * * Video * * * * * * * * * */

div.content-hyperlink.video a,
div.link > a.video {
    background-image: url("/files/themes/lustat/symbole/link_video_3e3e3e.svg");
}

div.content-hyperlink.video a:hover,
div.link > a.video:hover {
    background-image: url("/files/themes/lustat/symbole/link_video_0072ba.svg");
}


/* * * * * * * * * * Teilen (Social Media) * * * * * * * * * */

div.content-hyperlink.sharing a,
div.link > a.sharing {
    background-image: url("/files/themes/lustat/symbole/link_teilen_3e3e3e.svg");
    cursor: pointer;
}

div.content-hyperlink.sharing a:hover,
div.link > a.sharing:hover {
    background-image: url("/files/themes/lustat/symbole/link_teilen_0072ba.svg");
    cursor: pointer;
}


/* * * * * * * * * * Druck der Symbole sicherstellen * * * * * * * * * */

@media print {
    div.content-hyperlink.daten a {
        /* Test ... hat keine Auswirkung */
        background-image: url("/files/themes/lustat/symbole/link_tabelle_3e3e3e.svg");
    }

    div.content-hyperlink.daten a {
        /* Test ... Schriftfarbe kann geändert oder Anzeige unterdrückt werden ... Hintergrund hat keine Auswirkung */
        /* color: red; */
        /* background-color: yellow; */
        display: none;
    }
}


/* * * * * * * * * * Ausrichtung von Symbolen untereinander in einer Box (z.B. Statistikportal) * * * * * * * * * */

/* In der schmalen Ansicht erscheinen die Links generell untereinander */
@media (min-width: 768px) {

    /* Link Oben: bei drei Links */
    div.mod_article.grid4 > div.content-hyperlink#vertical-top {
        margin-bottom: 80px;
    }

    /* Link Mitte: bei zwei und drei Links */
    div.mod_article.grid4 > div.content-hyperlink#vertical-middle {
        margin-bottom: 40px;
    }

    /* Link Unten: kann bei nur einem Link weggelassen werden */
    div.mod_article.grid4 > div.content-hyperlink#vertical-bottom {
        margin-bottom: 0;
    }
}

/* * * * * * * * * * Ausrichtung von Symbolen ohne Text nebeneinander bei Daten und Analysen * * * * * * * * * */

div.ce_daten_daten > div.container-analysen > div.publikation > div.container > div.text > div.link,
div.ce_daten_daten > div.container-analysen > div.publikation > div.container > div.text > div.download,
div.ce_daten_daten > div.container-daten > div div.link,
div.ce_daten_daten > div.container-daten > div div.download,
div.ce_daten_daten div.box div.link,
div.ce_daten_daten div.box div.download,
div.ce_daten_objekt > div.container-daten > div div.link,
div.ce_daten_objekt > div.container-daten > div div.download,
div.ce_analysen_analysen > div.publikation > div.container div.link,
div.ce_analysen_analysen > div.publikation > div.container div.download,
div.ce_analysen_analysen_objekt > div.publikation > div.container div.link,
div.ce_analysen_analysen_objekt > div.publikation > div.container div.download {
    width: 32px;
    height: 50px;
    overflow: hidden;
    display: inline;
    margin-top: 10px;
    margin-right: 5px;
}

/* Für die Boxen im Bereich Daten: Grösse, Abstände und Farbe */
div.box div.download > a,
div.box div.link > a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 48px;
    vertical-align: baseline;
    background-repeat: no-repeat;
    line-height: 50px;
    text-decoration: none;
    color: #3e3e3e;
    background-size: 40px;
    background-position: left center;
}

/* * * * * Social Media Symbole * * * * */

div.teilen {
    text-align: right;
}

ul.symbole li {
    display: inline;
    list-style-type: none;
    margin-left: 10px;
}

ul.symbole li a:hover {
    text-decoration: none;
}

svg.icon {
    stroke: #3e3e3e;
}

svg.icon:hover {
    stroke: #0072ba;
}


/* * * * * Social Media Symbole * * * * */

/* Farbe des Symbols für Facebook */
div.box-information-lustat div.content-hyperlink.facebook a {
    background-image: url("/files/themes/lustat/symbole/social_facebook_3e3e3e.svg");
}

/* Farbe des Symbols für Facebook (Hover) */
div.box-information-lustat div.content-hyperlink.facebook a:hover {
    background-image: url("/files/themes/lustat/symbole/social_facebook_0072ba.svg");
}

/* Farbe des Symbols für LinkedIn */
div.box-information-lustat div.content-hyperlink.linkedin a {
    background-image: url("/files/themes/lustat/symbole/social_linkedin_3e3e3e.svg");
}

/* Farbe des Symbols für LinkedIn (Hover) */
div.box-information-lustat div.content-hyperlink.linkedin a:hover {
    background-image: url("/files/themes/lustat/symbole/social_linkedin_0072ba.svg");
}

/* Farbe des Symbols für Twitter */
div.box-information-lustat div.content-hyperlink.twitter a {
    background-image: url("/files/themes/lustat/symbole/social_twitter_3e3e3e.svg");
}

/* Farbe des Symbols für Twitter (Hover) */
div.box-information-lustat div.content-hyperlink.twitter a:hover {
    background-image: url("/files/themes/lustat/symbole/social_twitter_0072ba.svg");
}

/* Symbol für Youtube */
div.box-information-lustat div.content-hyperlink.youtube a {
    background-image: url("/files/themes/lustat/symbole/social_youtube_grau.svg");
}

div.box-information-lustat div.content-hyperlink.youtube a:hover {
    background-image: url("/files/themes/lustat/symbole/social_youtube_blau.svg");
}


/* * * * * Social Media Symbole im Footer * * * * */

footer div.social-sharing {
    height: 110px;
    position: relative;
}

footer div.social-sharing svg.facebook {
    position: absolute;
    top: 0;
}

footer div.social-sharing svg.linkedin {
    position: absolute;
    top: 30px;
}

footer div.social-sharing svg.bluesky {
    position: absolute;
    top: 63px;
}

footer div.social-sharing svg.instagram {
    position: absolute;
    top: 92px;
}

footer div.social-sharing svg.youtube {
    position: absolute;
    top: 123px;
}

footer div.social-sharing svg.newsletter {
    position: absolute;
    top: 151px;
}

footer div.social-sharing p.facebook {
    padding-left: 6px;
    position: absolute;
    left: 16px;
    top: -5px;
}

footer div.social-sharing p.linkedin {
    padding-left: 6px;
    position: absolute;
    left: 16px;
    top: 25px;
}

footer div.social-sharing p.bluesky {
    padding-left: 6px;
    position: absolute;
    left: 16px;
    top: 55px;
}

footer div.social-sharing p.instagram {
    padding-left: 6px;
    position: absolute;
    left: 16px;
    top: 85px;
}

footer div.social-sharing p.youtube {
    padding-left: 6px;
    position: absolute;
    left: 16px;
    top: 115px;
}

footer div.social-sharing p.newsletter {
    padding-left: 6px;
    position: absolute;
    left: 16px;
    top: 145px;
}

footer div.social-sharing a svg {
    stroke: #3e3e3e;
}

footer div.social-sharing a:hover svg {
    stroke: #0072ba;
}

footer div.social-sharing a:hover p {
    color: #0072ba;
}


/* * * * * Social Media Symbole im fixierten Footer * * * * */

footer#fixed div.grid6 {
    padding-top: 10px;
}

footer#fixed svg {
    margin-right: 20px;
}

footer#fixed a svg {
    stroke: #ffffff;
}

footer#fixed a:hover svg {
    fill: #ffffff;
}

/* * * * * CSS für den Bereich Daten * * * * */

/* Abstände innerhalb der Ergebnis-Boxen */
div.ce_daten_daten > div.container-daten > div,
div.ce_daten_objekt > div.container-daten > div {
    background-color: #f3f3f3;
    border: #e4e4e4 1px solid;
    margin: 10px 0;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
}

/* Formatierung für das Pagination-DIV und das Abstands-DIV (über den Ergebnissen) zurücksetzen */
div.ce_daten_daten > div.container-daten > div.abstand,
div.ce_daten_daten > div.container-daten > div.pagination {
    background-color: #ffffff;
    border: none;
    margin: 0;
    padding: 0;
}

div.ce_daten_daten > div.container-daten > div.abstand,
div.ce_daten_objekt > div.abstand {
    height: 40px;
}

/* Abstände der Elemente innerhalb der Ergebnisboxen */
div.ce_daten_daten > div.container-daten > div > p,
div.ce_daten_objekt > div.container-daten > div > p {
    margin: 0;
}

div.ce_daten_daten > div.container-daten > div > form,
div.ce_daten_objekt > div.container-daten > div > form {
    margin-top: 5px;
}

div.ce_daten_daten > div.container-daten > div > form > select,
div.ce_daten_objekt > div.container-daten > div > form > select {
    margin-bottom: 5px;
}

div.ce_daten_daten > div.container-daten div.symbole,
div.ce_daten_objekt > div.container-daten div.symbole {
    float: left;
    margin-top: 17px;
}

/* Analysen: Vertikaler Abstand zwischen den Boxen mit den Publikationen */
div.ce_daten_daten > div.container-analysen > div.publikation {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Analysen: Vertikaler Abstand der ersten Box unter der Überschrift */
div.ce_daten_daten > div.container-analysen > h2 + div.publikation {
    margin-top: 0;
}

/* Analysen: Reihe und Datum über den Boxen mit den Publikationen */
div.ce_daten_daten > div.container-analysen > div.publikation > div.titel > p {
    margin-bottom: 0;
    color: #7f7f7f;
}

/* Analysen: Container für das optionale Bild und den Text zu einer Publikation */
div.ce_daten_daten > div.container-analysen > div.publikation > div.container {
    background-color: #f3f3f3;
    border: 1px solid #e4e4e4;
}

/* Analysen: Box für den Text zu einer Publikationen */
div.ce_daten_daten > div.container-analysen > div.publikation > div.container > div.text {
    padding: 10px 20px 15px;
}

/* Analysen: Titel einer Publikationen mit geringerem Abstand nach oben */
div.ce_daten_daten > div.container-analysen > div.publikation > div.container > div.text > h2 {
    margin-top: 1em;
    text-transform: none;
}

/* Pagination: zentrierte Ausrichtung */
div.ce_daten_daten > div.container-daten > div.pagination {
    text-align: center;
}

/* Pagination: Formatierung der Elemente */
div.ce_daten_daten > div.container-daten > div.pagination a,
div.ce_daten_daten > div.container-daten > div.pagination span {
    margin-right: .3em;
    margin-left: .3em;
    padding: .1em .3em;
    border: 1px solid #7f7f7f;
    border-radius: 4px;
    font-size: .8rem;
}

/* Pagination: Rahmenfarbe der Links */
div.ce_daten_daten > div.container-daten > div.pagination a {
    text-decoration: none;
    color: #7f7f7f;
}

/* Pagination: aktives Element und Hover */
div.ce_daten_daten > div.container-daten > div.pagination a:hover,
div.ce_daten_daten > div.container-daten > div.pagination span {
    border-color: #0072ba;
    color: #0072ba;
}

@media screen and (min-width: 960px) {

    /* Daten: Container für die Boxen mit den Daten (Hauptspalte) */
    div.ce_daten_daten > div.container-daten {
        width: 600px;
        float: left;
        margin-right: 30px;
    }

    /* Container für die Boxen mit den Analysen (Seitenspalte) */
    div.ce_daten_daten > div.container-analysen {
        width: 300px;
        float: left;
        margin-left: 10px;
    }
}

@media screen and (min-width: 1200px) {

    /* Daten: Container für die Boxen mit den Daten (Hauptspalte) */
    div.ce_daten_daten > div.container-daten {
        width: 760px;
    }

    /* Container für die Boxen mit den Analysen (Seitenspalte) */
    div.ce_daten_daten > div.container-analysen {
        width: 380px;
    }
}

/* * * * * CSS für den Bereich Analysen * * * * */

/* Vertikaler Abstand zwischen den Boxen mit den Publikationen */
div.ce_analysen_analysen > div.publikation,
div.ce_analysen_analysen_objekt > div.publikation {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Reihe und Datum über den Boxen mit den Publikationen */
div.ce_analysen_analysen > div.publikation > div.reihe > p,
div.ce_analysen_analysen_objekt > div.publikation > div.reihe > p {
    margin-bottom: 0;
    color: #7f7f7f;
}

/* Container für das optionale Bild und den Text zu einer Publikation */
div.ce_analysen_analysen > div.publikation > div.container,
div.ce_analysen_analysen_objekt > div.publikation > div.container {
    background-color: #f3f3f3;
    border: 1px solid #e4e4e4;
}

/* Box für den Text zu einer Publikationen */
div.ce_analysen_analysen > div.publikation > div.container > div.text,
div.ce_analysen_analysen_objekt > div.publikation > div.container > div.text {
    padding: 10px 20px 15px;
}

/* Titel einer Publikationen mit geringerem Abstand nach oben */
div.ce_analysen_analysen > div.publikation > div.container > div.text > h2,
div.ce_analysen_analysen_objekt > div.publikation > div.container > div.text > h2 {
    margin-top: 1em;
    text-transform: none;
}

/* Profil: Gestaltung des Wappens */
div.container-analysen > div.profil > div.gemeindewappen {
    width: 125px;
    height: 125px;
    float: left;
    margin-right: 20px;
    border: 1px solid #c4c4c4;
}

/* Profil: Clearfix */
div.container-analysen > div.profil > div.profil-text:after {
    height: 0;
    clear: both;
    display: block;
    content: ".";
    visibility: hidden;
}

/* Profil: Silbentrennung für Raumnamen entfernen */
div.container-analysen > div.profil > div.profil-text > p {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

@media screen and (min-width: 960px) {

    /* Box für das Bild zu einer Publikationen */
    div.ce_analysen_analysen > div.publikation > div.container > div.bild,
    div.ce_analysen_analysen_objekt > div.publikation > div.container > div.bild {
        width: 280px;
        float: left;
        padding: 20px;
    }

    /* Rahmen um das Bild */
    div.ce_analysen_analysen > div.publikation > div.container > div.bild > figure,
    div.ce_analysen_analysen_objekt > div.publikation > div.container > div.bild > figure {
        border: 1px solid #e4e4e4;
    }

    /* Titel als erstes Element in der Box ohne oberen Abstand */
    div.ce_analysen_analysen > div.publikation > div.container > div.text > p:first-child,
    div.ce_analysen_analysen_objekt > div.publikation > div.container > div.text > p:first-child {
        font-size: 1em;
    }

    /* Box für den Text (mit Bild) zu einer Publikationen */
    div.ce_analysen_analysen > div.publikation > div.container > div.text.mit-bild,
    div.ce_analysen_analysen_objekt > div.publikation > div.container > div.text.mit-bild {
        width: 578px;
        float: left;
    }
}

@media screen and (min-width: 1200px) {

    /* Box für das Bild zu einer Publikationen */
    div.ce_analysen_analysen > div.publikation > div.container > div.bild,
    div.ce_analysen_analysen_objekt > div.publikation > div.container > div.bild {
        width: 380px;
    }

    /* Box für den Text (mit Bild) zu einer Publikationen */
    div.ce_analysen_analysen > div.publikation > div.container > div.text.mit-bild,
    div.ce_analysen_analysen_objekt > div.publikation > div.container > div.text.mit-bild {
        width: 718px;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*                                     Boxen                                             */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/* Abstände */
div.mod_article.grid4 {
    margin: 40px 10px 10px 10px;
    padding: 0;
}

/* Hintergrundfarbe, Schatten und Bezugspunkt für die Ausrichtung der Link-Symbole */
div.box-information-bereich {
    background-color: #e4e4e4;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.75);
    position: relative;
}

/* Formatierung der Überschrift */
div.box-information-bereich h2 {
    border: 0;
    margin: .5em 0 0;
    padding: 0;
    text-transform: none;
}

/* Bilder über die volle Breite und oben mit runden Ecken anzeigen */
div.box-information-bereich div.content-image {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0;
}

/* Abstand der Links zum unteren Rand der Boxen und nur das Symbol und nicht den Linktext anzeigen */
div.box-information-bereich div.content-hyperlink {
    height: 40px;
    overflow: hidden;
    padding-bottom: 5px;
    width: 32px;
}

/* * * * * * * * * * Media Queries * * * * * * * * * */

@media screen and (min-width: 768px) {

    /* Höhe der Box */
    div.box-information-bereich {
        height: 390px;
    }

    /* Höhe der Bilder fixieren */
    div.box-information-bereich div.content-image {
        height: 185px;
    }

    /* Links in allen Boxen fest am unteren Rand ausrichten */
    div.box-information-bereich div.content-hyperlink {
        bottom: 0;
        height: 40px;
        position: absolute;
        width: 32px;
    }
}

@media screen and (min-width: 960px) {

    /* Höhe der Box */
    div.box-information-bereich {
        height: 380px;
    }

    /* Höhe der Bilder fixieren */
    div.box-information-bereich div.content-image {
        height: 158px;
    }
}

@media screen and (min-width: 1200px) {

    /* Höhe der Box */
    div.box-information-bereich {
        height: 400px;
    }

    /* Höhe der Bilder fixieren */
    div.box-information-bereich div.content-image {
        height: 200px;
    }
}

/* * * * * * * * * * Formular * * * * * * * * * */

button {
    background-color: #f3f3f3;
    border: 1px solid #7f7f7f;
    border-radius: 5px;
    box-sizing: border-box;
    color: #3e3e3e;
    cursor: pointer;
    font-size: 100%;
    height: auto;
    margin-top: 20px;
    padding: 0.5em 1em;
    width: auto;
}

button:hover {
    border-color: #0072ba
}

button:active {
    background-color: #c4c4c4
}

/* Rahmen und Abstände (bedingt durch User-Agent-Style-Sheet) entfernen */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* * * * * * * * * * Formular Login Mitglieder * * * * * * * * * */

div.mod_login form,
div.mod_lostPassword form {
    line-height: 2;
    margin: 1em 0;
}

div.mod_login label,
div.mod_lostPassword label,
div.mod_two_factor input.text {
    float: left;
    margin-right: 10px;
    width: 140px;
}

/* Breite der Text-Felder festlegen (für IE) */
div.mod_login input.text,
div.mod_lostPassword input.text,
div.mod_two_factor input.text {
    width: 200px;
}

div.mod_login div.widget-checkbox label,
div.mod_lostPassword div.widget-checkbox label {
    float: none;
    margin-left: 0.5em;
    margin-right: 0;
}

div.mod_login div.widget-checkbox input,
div.mod_login div.widget-submit button,
div.mod_lostPassword div.widget-submit button {
    margin-left: 150px;
}

/* Link zum Passwort-Reset ausrichten */
div.content-text.passwordreset {
    margin-left: 160px;
}

/* TODO: Wo wird das verwendet? */
div.mod_login div.widget-submit button[value="Abmelden"] {
    margin-left: 0;
}

/* * * * * * * * * * Formular Veranstaltung * * * * * * * * * */

/* Listensymbol für alle Navigationselemente deaktivieren */
form.veranstaltung fieldset {
    border: 1px solid #c4c4c4;
}

/* Rahmen und Abstände für Fieldsets um Radio-Buttons zurücksetzen */
form.veranstaltung fieldset.radio_container,
form.veranstaltung fieldset.checkbox_container {
    border: none;
    margin: 0;
    padding: 0;
}

form.veranstaltung input.text {
    width: 300px;
}

form.veranstaltung div.widget {
    margin-bottom: 1em;
    margin-top: 1em;
}

form.veranstaltung div.widget p.error {
    color: #cc0000;
    display: inline;
    float: right;
    margin: 0;
}

form.veranstaltung fieldset > legend,
form.veranstaltung label {
    float: left;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    width: 185px;
}

form.veranstaltung fieldset.radio_container label,
form.veranstaltung fieldset.checkbox_container label {
    float: none;
    margin-right: auto;
    width: auto;
}

form.veranstaltung fieldset.radio_container span {
    margin-right: 1em;
}


/* * * * * * * * * * Formular Umfrage * * * * * * * * * */

/* Formatierung für Fieldsets mit Ausnahme der Checkbox-Gruppen (Klasse fieldset.checkbox_container) */
form.umfrage fieldset:not(.checkbox_container) {
    background-color: #f3f3f3;
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    margin: 30px 0;
}

form.umfrage fieldset legend {
    background-color: #ffffff;
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    margin-left: 20px;
    padding: 5px 10px;
}

form.umfrage fieldset.radio_container legend {
    margin-left: 0;
}

form.umfrage fieldset.radio_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

/* Aussenabstand für Widgets mit Ausnahme der Radio-Gruppen */
form.umfrage div.widget {
    margin: 20px;
}

form.umfrage div.widget-radio {
    margin: 0;
}

/* Die Formatierung soll nicht für die Label von Checkbox-Gruppen gelten */
form.umfrage div.widget-select label,
form.umfrage div.widget-text label,
form.umfrage div.widget-textarea label {
    display: inline-block;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    width: 100%;
}

/* Formatierung für die Label von Checkbox-Gruppen */
form.umfrage div.widget-checkbox label {
    margin: 0;
    margin-left: 10px;
    padding: 0;
}

form.umfrage input.text,
form.umfrage select,
form.umfrage textarea {
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    box-sizing: border-box;
    color: #3e3e3e;
    font: 100% 'Source Sans Pro';
    height: 2em;
    width: 100%;
}

form.umfrage input.text,
form.umfrage textarea {
    padding: 0.5em;
}

form.umfrage select {
    padding: 0;
    padding-left: 0.5em;
}

form.umfrage textarea {
    height: 100px;
    resize: vertical;
}

/* Fehlermeldung Feld Validierung */
form.umfrage div.error p.error {
    background-color: hsl(0, 100%, 95%);
    border: 1px solid hsl(0, 100%, 85%);
    border-radius: 5px;
    color: hsl(0, 100%, 20%);
    margin: 1em 0;
    padding: 0.5em;
}

@media screen and (min-width: 1200px) {

    /* Die Formatierung soll nicht für die Label von Checkbox-Gruppen gelten */
    form.umfrage div.widget-select label,
    form.umfrage div.widget-text label,
    form.umfrage div.widget-textarea label {
        min-width: 320px;
        vertical-align: top;
        width: 30%;
    }

    form.umfrage input.text,
    form.umfrage select,
    form.umfrage textarea {
        max-width: calc(100% - 360px);
        width: 70%;
    }
}


/* * * * * * * * * * Formular Suche (Header) * * * * * * * * * */

/* Ausrichtung des Formulars */
#header div.mod_form {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}

#header #suchformular {
    margin: 0;
}

#header #suchformular input.suchfeld {
    color: #6f6f6f;
    font-size: 80%;
    margin: 0;
    padding: 0 0.25em;
    width: 125px;
}

#header #suchformular .lupe {
    height: 90%;
    position: absolute;
    right: 1%;
    top: 5%;
}

/* Suchbegriffe im Text hervorheben */
.mod_search .highlight {
    background-color: rgba(0, 180, 0, .4);
}

/* * * * * * * * * * * * * * * * * * * * Media Queries * * * * * * * * * * * * * * * * * * * */

@media (max-width: 767px) {

    /* * * * * * * * * * Suchformular (Header) * * * * * * * * * */
    /* Auf Mobiles nicht anzeigen */
    #header div.mod_form {
        display: none;
    }
}

/* TODO: Wo wird das verwendet? Eventuell Newsletteranmeldung */
.mod_subscribe,
.mod_unsubscribe {
    margin-bottom: 1em;
}

/* * * * * * * * * * Filter * * * * * * * * * */

/* Filter (schmal): Formular auf Seiten mit Seitennavigation */
form.filter-schmal {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #e4e4e4;
    border: 1px solid #c4c4c4;
}

/* Filter (schmal): Container für die Formularelemente */
form.filter-schmal > div.w50 {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
}

/* Filter (schmal): Sub-Container für die Formularelemente */
form.filter-schmal > div.w50 > div {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Filter (schmal): Label über den Formularfelder ausgeben */
form.filter-schmal label {
    display: block;
    font-size: 0.9rem;
}

/* Filter (schmal): Gestaltung der Formularelemente und volle Breite innerhalb des Containers zuweisen */
form.filter-schmal input,
form.filter-schmal select,
form.filter-schmal textarea {
    width: 100%;
    height: 2.4em;
    padding: 5px;
    background-color: #fefefe;
    border: 1px solid #7f7f7f;
    line-height: 1.4em;
    color: #444444;
    box-sizing: border-box;
}

/* Filter (schmal): Gestaltung inaktiver Formularelemente */
form.filter-schmal input[disabled],
form.filter-schmal select[disabled] {
    background-color: #f3f3f3;
    border-color: #c4c4c4;
    color: #7f7f7f;
}

/* Formular: Gestaltung Button */
input[type="submit"],
form.filter-schmal input[type="submit"] {
    width: auto;
    height: auto;
    margin-top: 20px;
    padding: 0.5em 1em;
    background-color: #f3f3f3;
    border: 1px solid #7f7f7f;
    border-radius: 5px;
    color: #444444;
    box-sizing: border-box;
    cursor: pointer;
}

/* Formular: Rahmenfarbe (Hover) */
input[type="submit"]:hover,
form.filter-schmal input[type="submit"]:hover {
    border-color: #86bce1;
}

/* Formular: Gestaltung Button (Active) */
input[type="submit"]:active,
form.filter-schmal input[type="submit"]:active {
    background-color: #c4c4c4;
}

/* Daten: Gestaltung der Formularelemente in den Standardobjekten */
form.daten select {
    width: 30%;
    height: 2em;
    margin-right: 2%;
    background-color: #fefefe;
    border: 1px solid #7f7f7f;
    font-size: 0.8rem;
    line-height: 1.4em;
    color: #444444;
    box-sizing: border-box;
}

@media (min-width: 960px) {

    /* Filter (schmal): zwei Container mit Formularelementen nebeneinander und mit jeweils halber Breite ausgeben */
    form.filter-schmal > div.w50 {
        width: 50%;
        float: left;
        display: inline;
    }
}

/* Enthält Styles für externe Erweiterungen */

/* * * * * * * * * * Erdmann und Freunde: Overlay * * * * * * * * * */

div#euf_overlay h1 {
    margin-top: 0;
}

div#euf_overlay div.euf_overlay__content {
    color: #3e3e3e;
}

div#euf_overlay div.widget {
    margin-top: 1em;
}

div#euf_overlay div.widget label {
    float: none;
    margin-left: 0.5em;
    margin-right: 0;
}

div#euf_overlay div.widget input[type="text"] {
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    box-sizing: border-box;
    color: #3e3e3e;
    font: 100% 'Source Sans Pro';
    height: 2em;
    width: 100%;
}

div#euf_overlay div.widget input[type="submit"] {
    width: 100%;
}