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

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

@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'),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-200italic.woff') format('woff');
}

@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'),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-200.woff') format('woff');
}

@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'),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-300.woff') format('woff');
}

@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'),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-300italic.woff') format('woff');
}

@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'),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
}

@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'),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-italic.woff') format('woff');
}

@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'),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
}

@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'),
    url('../../files/themes/lustat/fonts/source-sans-pro-v14-latin-600italic.woff') format('woff');
}

/* Maximale Breiten anderer Portale: Tagesschau 1200px, SRF 1280px, Kanton Luzern 1920px, Wikipedia volle Breite */

body {
    background-color: hsl(0, 0%, 100%);
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "main"
        "footer";
}

header {
    grid-area: header;
}

@media screen and (max-width: 1199px) {
    aside#seitennavigation {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    aside#seitennavigation {
        background-color: hsl(0, 0%, 100%);
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        top: 50%;
        transform: translate(0, -50%);
        box-shadow: 0 0 0.3rem 0 hsl(0, 0%, 30%);
        opacity: 0.8;
        padding: 0.5em 1em;
        position: fixed;
        left: 0;
        transition: all ease-in-out 1s;
        z-index: 99;
    }
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}


/* * * * * * * * * * Container für Top-Link (Sprung zum Seitenanfang) * * * * * * * * * */

div#top-link-container {
    background-color: hsl(0, 0%, 100%);
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    bottom: 3rem;
    box-shadow: 0 0 0.3rem 0 hsl(0, 0%, 30%);
    display: none;
    opacity: 0.8;
    padding: 10px 30px 10px 10px;
    position: fixed;
    right: -1rem;
    transition: all ease-in-out 1s;
    z-index: 99;
}

/* Grösse, Abstände und Farbe */
div#top-link-container a {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 30px;
    cursor: pointer;
    display: block;
    height: 30px;
    width: 30px;
}

header {
    background-color: #ffffff;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "mitglied"
        "logo"
        "hauptnavigation";
    padding: 1rem 2rem;
    transition: all ease-in-out 1s;
}

header.reduziert {
    opacity: 0.8;
    transition: all ease-in-out 1s;
}

@media only screen and (max-width: 800px) {

    /* Servicenavigation auf kleinen Viewports nicht anzeigen */
    header nav.mod_customnav {
        display: none;
    }
}

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

    /* ausführlicher Header mit Logo und Navigationszeilen */
    header {
        box-shadow: 0 -1rem 1rem 1rem #3e3e3e;
        grid-template-rows: 50px 50px;
        grid-template-columns: minmax(110px, 2fr) 9fr;
        grid-template-areas:
        "logo mitglied"
        "logo hauptnavigation";
        z-index: 1;
    }

    /* * * * * Header nach dem Scrollen der Seite reduzieren * * * * */
    header.reduziert {
        position: sticky;
        top: -80px;
    }

    /* Servicenavigation ausblenden */
    header.reduziert nav.mod_customnav {
        display: none;
    }

    /* Logo ausblenden */
    header.reduziert div#logo {
        transition: all ease-in-out 1s;
        opacity: 0;
    }
}

/* * * * * Sub-Grid Header * * * * */

div#logo {
    grid-area: logo;
}

header div#logo {
    transition: all ease-in-out 1s;
}

@media only screen and (max-width: 800px) {
    div#logo {
        height: 100px;
        padding: 10px;
    }

    div#logo img {
        margin: auto;
    }
}

div#mitglied {
    grid-area: mitglied;
}

nav#servicenavigation {
    grid-area: servicenavigation;
}

nav#hauptnavigation {
    align-self: end;
    grid-area: hauptnavigation;
}

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

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


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

/* Hintergrundfarbe */
nav#hauptnavigation {
    background-color: #6f6f6f;
}

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

nav#hauptnavigation a.invisible {
    display: none;
}

/* Ebene 1: Schriftgrösse und Schriftstil */
nav#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 */
nav#hauptnavigation ul.level_1 > li > a,
nav#hauptnavigation ul.level_1 > li > strong {
    color: #c4c4c4;
    font-weight: bold;
    line-height: 2em;
}

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

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


/* * * * * * * * * * Servicenavigation im Header * * * * * * * * * */

nav#servicenavigation {
    color: hsl(0, 0%, 40%);
    font-size: 0.9rem;
    font-weight: normal;
}

nav#servicenavigation ul {
    float: right;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav#servicenavigation ul > li {
    float: left;
    margin: 0;
    padding: 0;
}

nav#servicenavigation ul > li:after {
    content: '|';
    margin: 0 10px;
}

nav#servicenavigation ul > li:last-child:after {
    content: '';
    margin: 0;
}

nav#servicenavigation a {
    color: hsl(0, 0%, 40%);
}

nav#servicenavigation a.invisible {
    display: none;
}


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

@media only screen and (max-width: 800px) {

    nav#hauptnavigation ul.level_1 > li > a,
    nav#hauptnavigation ul.level_1 > li > strong {
        line-height: 1.2em;
    }
}

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

    /* * * * * * * * * * Hauptnavigation (Ebenen 1 und 2) * * * * * * * * * */
    /* Hintergrundfarbe und Ausrichtung nach unten */
    nav#hauptnavigation {
        background-color: #ffffff;
        margin-bottom: -0.65em;
    }

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

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

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

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

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

    /* Ebene 1: Zweite Ebene bei Mouse Over einblenden */
    nav#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 */
    nav#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 */
    nav#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 */
    nav#hauptnavigation ul.level_2 > li:first-child {
        border-top: 0;
    }

    /* Ebene 2: Schriftfarbe und Abstände gegenüber Mobile anpassen */
    nav#hauptnavigation ul.level_2 > li > a,
    nav#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 */
    nav#hauptnavigation ul.level_2 > li > a:focus,
    nav#hauptnavigation ul.level_2 > li > a:hover,
    nav#hauptnavigation ul.level_2 > li > a.trail,
    nav#hauptnavigation ul.level_2 > li > strong.active,
    nav#hauptnavigation ul.level_2 > li > strong.forward {
        background-color: #5f5f5f;
        color: #ffffff;
    }
}

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

    /* Hintergrundfarbe und Ausrichtung nach unten */
    nav#hauptnavigation {
        margin-bottom: -0.75em;
    }

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

main {
    background-color: #fdfeff;
    padding: 3rem 2rem 6rem 2rem;
}

/* Artikel als Container mit Maximalbreite */
div.mod_article {
    margin-inline: auto;
    width: min(100%, 1000px);
}

footer {
    background-image: linear-gradient(30deg, hsl(0, 0%, 20%), hsl(0, 0%, 30%));
    border-top: 1px solid hsl(0, 0%, 70%);
    font-size: 0.8rem;
    padding: 1rem 2rem;
}

footer > .schluss {
    border-top: 1px solid hsl(0, 0%, 70%);
    margin-top: 1rem;
}

/* Schriftfarbe im Footer */
footer p,
footer a,
footer span,
footer h2,
footer h3 {
    color: hsl(0, 0%, 90%);
}

footer h2,
footer h3 {
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: 1.5em;
}

footer a:hover {
    color: hsl(203, 80%, 70%);
    text-decoration: none;
}


/* * * * * Social Sharing * * * * */

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

footer div.social-sharing a svg {
    stroke: hsl(0, 0%, 90%);
}

footer div.social-sharing a:hover svg {
    stroke: hsl(203, 80%, 70%);
}

footer div.social-sharing a:hover p {
    color: hsl(203, 80%, 70%);
}

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

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

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

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

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

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

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;
}


/* * * * * Listen / Navigation * * * * */

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

/* Listenelemente gestalten */
footer nav li {
    border-top: 1px solid hsl(0, 0%, 70%);
    margin: 0;
}

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

footer nav a.invisible {
    display: none;
}

/* 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: hsl(203, 80%, 70%);
    font-weight: normal;
}


/* * * * * Grid / Boxen * * * * */

/* Artikel als Container mit den Inhaltselementen für Boxen */
footer > div.boxen {
    display: grid;
    gap: 2em;
    grid-auto-columns: 1fr;
    grid-template-areas:
            '.'
            '.'
            '.'
            '.'
            '.'
            '.';
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Grid in den Boxen (Positionierung von Inhalten und Link-Symbolen) */
footer > div.boxen > .box {
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    display: unset;
}

footer > div.boxen > .box:hover {
    box-shadow: none;
}

@media screen and (min-width: 700px) {
    footer > div.boxen {
        gap: 3em;
        grid-template-areas:
                '. . .'
                '. . .';
    }
}

@media screen and (min-width: 1200px) {
    footer > div.boxen {
        grid-template-areas:
                '. . . . . .';
    }
}

/* CSS Variables (https://www.w3schools.com/css/css3_variables.asp) */
:root {
    --color-text: hsl(0, 0%, 20%);
    --color-dunkelblau: hsl(203, 100%, 30%);
}

* {
    box-sizing: border-box;
}

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


/* * * * * * * * * * Bilder * * * * * * * * * */

figure,
picture,
img {
    display: block;
    margin: 0;
    padding: 0;
}

picture,
img {
    height: auto;
}

picture {
    width: 100%;
}

img {
    max-width: 100%;
}


/* * * * * * * * * * Schriftart und Schriftfarbe * * * * * * * * * */

body {
    color: var(--color-text);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 100%;
    font-weight: normal;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
}

@media only screen and (max-width: 800px) {
    header {
        padding: 0;
    }
}

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


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

/* Ebene 1 */
h1 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    /* Idee von Kevin Powell, um Schriftgrösse in Abhängigkeit des Viewports zu setzen. */
    /* (https://www.youtube.com/watch?v=7Q7qlquojQk&list=WL&index=67) */
    font-size: clamp(2rem, calc(1.5rem + 1vw), 4rem);
    line-height: 1em;
    font-weight: normal;
}

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

/* Ebene 2 */
h2 {
    /* border-bottom: 2px solid hsl(203, 100%, 40%); */
    color: var(--color-dunkelblau);
    font-size: clamp(1.4rem, calc(1rem + 0.8vw), 2.8rem);
    font-weight: normal;
    margin-bottom: 0.5em;
    margin-top: 2.5em;
}

/* Ebene 3 */
h3 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    padding: 0;
    font-size: clamp(1rem, calc(1rem + 0.4vw), 2rem);
    font-weight: normal;
}

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

div.hinweis > h3,
div.kapitelboxen h3 {
    font-size: 1rem;
    font-weight: bold;
}


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

/* mehrspaltige Texte */
/* https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie/Spalten */
/* https://www.html-seminar.de/webdesign-zeilenlaenge-zeilenabstand.htm */

/*
Für Druckerzeugnisse sind 55 bis 60 Buchstaben pro Zeile gut. Solche schmalen Spalten haben wir bei Websites seltener
und sind auch nicht sinnvoll für diese. Die Begründung gegen den Einsatz von zu schmalen Zeilenlänge ist, dass wir im
Browser keine Silbentrennung haben und dadurch wir bei kurzen Zeilenbreiten sehr unschöne Umbrüche und Löcher im Text
bekommen.

Auf Websites kann gut mit einer Zeilenlänge von 30 – 35em gearbeitet werden (em siehe das entsprechende Kapitel). Aber
bitte testen, da wirklich die gewählte Schriftart und Schriftgröße hier eine Rolle spielt!

Was ziehen wir für Schlüsse aus dem bisher geschriebenen für unsere Zeilenlänge:
- Textzeilen sollten weder zu kurz noch zu lange sein
- eine Zeilenlänge von 8 – 12 Wörtern ist gut lesbar
- Wortumrisse müssen sehr gut erkennbar sein (sprich keine Kapitälchen oder GROSSBUCHSTABEN oder Sperrung)
*/

div.content-text > div.rte {
    /*column-gap: 2em;*/
    /*column-rule: 1px solid #0072ba;*/
    /*column-width: 30em;*/
}

/* Abstände und Silbentrennung bei Absätzen */
p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    margin-top: 1em;
    margin-bottom: 1em;
}

p.fussnote {
    font-size: 90%;
    margin: 0.5em 0;
}

/* Abstände bei sortierten und unsortierten Listen */
ol,
ul {
    margin: 1em 0;
    padding: 0;
}

/* Gestaltung bei unsortierten Listen */
ul {
    list-style-type: square;
}

/* Abstände bei Listenelementen */
li {
    margin: 0 0 0 1.5em;
    padding: 0.2em 0;
}

li:first-of-type {
    padding-top: 0;
}

li:last-of-type {
    padding-bottom: 0;
}

code {
    color: hsl(120, 30%, 40%);
    font-family: 'Source Code Pro', monospace;
    font-size: 90%;
}


/* Spezielle Formatierungen für die Dokumentation */
div.dokumentation.erledigt {
    color: #00b400;
}

div.dokumentation.bearbeitung {
    color: #e80000;
}

div.dokumentation.inaktiv {
    color: #c4c4c4;
}

/* Blocksatz */
div.content-text > div.rte > p {
    text-align: justify;
}


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

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

a:hover {
    text-decoration: underline;
}

h1 > a,
h2 > a {
    color: #3e3e3e;
}

h1 > a:hover,
h2 > a:hover {
    color: #0072ba;
    text-decoration: none;
}


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

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

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

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

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

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


/* * * * * * * * * * Boxen mit Hinweisen * * * * * * * * * */

div.hinweis {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    margin: 1rem 0;
    padding: 1em;
}

/* Hinweis-Boxen innerhalb von Formularabschnitten benötigen links und rechts einen Abstand */
fieldset > div.hinweis {
    margin-left: 1em;
    margin-right: 1em;
}

div.hinweis > h3 {
    margin-top: 0;
}

div.hinweis > p {
    margin: 0;
}

/*
 * LUSTAT Grau (TM) für neutrale Ausgaben
 * RGB: #7f7f7f
 * HSL: hsl(0, 0%, 50%)
 */
div.neutral {
    background-color: hsl(0, 0%, 95%);
    border-color: hsl(0, 0%, 85%);
    color: hsl(0, 0%, 20%);
}

/*
 * LUSTAT Blau (A4) für Hinweise
 * RGB: #0072ba
 * HSL: hsl(203, 100%, 36%)
 */
div.info {
    background-color: hsl(203, 100%, 95%);
    border-color: hsl(203, 100%, 85%);
    color: hsl(203, 100%, 20%);
}

/*
 * LUSTAT Grün (TM) für Bestätigungen
 * RGB: #00b400
 * HSL: hsl(120, 100%, 35%)
 */
div.ok {
    background-color: hsl(120, 100%, 95%);
    border-color: hsl(120, 100%, 85%);
    color: hsl(120, 100%, 20%);
}

/*
 * LUSTAT Orange (TM) für Warnungen
 * RGB: #ffa500
 * HSL: hsl(39, 100%, 50%)
 */
div.warnung {
    background-color: hsl(39, 100%, 95%);
    border-color: hsl(39, 100%, 85%);
    color: hsl(39, 100%, 20%);
}

/*
 * LUSTAT Rot (TM) für Fehler
 * RGB: #e80000
 * HSL: hsl(0, 100%, 45%)
 */
div.fehler {
    background-color: hsl(0, 100%, 95%);
    border-color: hsl(0, 100%, 85%);
    color: hsl(0, 100%, 20%);
}


/* * * * * * * * * * Texte mit farblichen Hinweisen * * * * * * * * * */

span.hinweis {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    padding: 0.1em 0.3em;
}

span.hinweis.info {
    background-color: hsl(203, 100%, 98%);
    color: hsl(203, 100%, 35%);
}

span.hinweis.ok {
    background-color: hsl(120, 100%, 98%);
    color: hsl(120, 100%, 35%);
}

span.hinweis.warnung {
    background-color: hsl(39, 100%, 98%);
    color: hsl(39, 100%, 45%);
}

span.hinweis.fehler {
    background-color: hsl(0, 100%, 98%);
    color: hsl(0, 100%, 45%);
}


/* * * * * * * * * * Fortschritt (im Antragsformular) * * * * * * * * * */

div.fortschritt {
    background-color: hsl(0, 0%, 97%);
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 5px;
    margin: 2rem 0;
    padding: 1px;
    width: 100%;
}

div.fortschritt > div {
    background-color: hsl(120, 100%, 80%);
    border-radius: 4px;
    height: 8px;
    width: 0;
}


/* * * * * Sprungmarken * * * * */

.sprungmarke::before {
    display: block;
    content: "";
    height: 70px;
    margin-top: -70px;
    visibility: hidden;
}


/* * * * * * * * * * Wartung * * * * * * * * * */

/* * * * * Prozessschritte * * * * */

div#prozessschritte {
    margin-bottom: 40px;
}

div#prozessschritte span {
    border-radius: 5px;
    margin-right: 0.5em;
    padding: 0.3em 0.6em;
}

div#prozessschritte span.aktiv {
    background-color: hsl(203, 100%, 85%);
    color: hsl(203, 100%, 20%);
}

div#prozessschritte span.inaktiv {
    background-color: hsl(0, 0%, 85%);
    color: hsl(0, 0%, 20%);
}

/* * * * * * * * * * Fieldset * * * * * * * * * */

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

/* Formatierung für Fieldset mit Ausnahme der Checkbox-Gruppen (Klasse fieldset.checkbox_container) */
form fieldset:not(.checkbox_container) {
    background-color: hsl(0, 0%, 97%);
    border: 1px solid hsl(0, 0%, 75%);
    border-radius: 5px;
    margin: 3rem 0;
}

form fieldset legend {
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 75%);
    border-radius: 5px;
    font-size: 1.1em;
    letter-spacing: 0.1em;
    margin-left: 1em;
    padding: 0.2em 0.6em;
}

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

form fieldset.radio_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1em;
}

form.symbol-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}


/* * * * * * * * * * Widget * * * * * * * * * */

/* Aussenabstand für Widget mit Ausnahme der Radio-Gruppen */
form div.widget {
    margin: 1em;
}

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

/* * * * * * * * * * Formulare * * * * * * * * * */

label {
    font-size: 1rem;
    line-height: 1.7em;
}

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

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

label.mandatory {
    font-weight: bold;
}

label.mandatory > span.invisible {
    display: none;
}


/* * * * * * * * * * Felder * * * * * * * * * */

form input.text,
form input[type=text],
form select,
form textarea {
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 5px;
    box-sizing: border-box;
    color: hsl(0, 0%, 20%);
    font: 100% 'Source Sans Pro';
    height: 2em;
    padding: 0.4em;
    width: 100%;
}

form input[type=file] {
    color: hsl(0, 0%, 20%);
    font: 100% 'Source Sans Pro';
    height: 2em;
    padding: 0;
    width: 100%;
}

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

form select {
    padding: 0 0 0 0.5em;
}

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

/* inaktive Felder */
form div.inaktiv input.text,
form div.inaktiv label {
    color: hsl(0, 0%, 60%);
}


/* * * * * * * * * * Button * * * * * * * * * */

button {
    background-color: hsl(0, 0%, 95%);
    border: 1px solid hsl(0, 0%, 50%);
    border-radius: 5px;
    box-sizing: border-box;
    color: hsl(0, 0%, 30%);
    cursor: pointer;
    font-size: 100%;
    height: auto;
    padding: 0.5em 1em;
    width: auto;
}

button:hover {
    background-color: hsl(203, 100%, 90%);
    border-color: hsl(203, 100%, 35%);
    color: hsl(203, 100%, 20%);
}

button.achtung:hover {
    background-color: hsl(0, 100%, 90%);
    border: 1px solid hsl(0, 100%, 35%);
    color: hsl(0, 100%, 20%);
}

button:active {
    background-color: hsl(0, 0%, 70%);
    border-color: hsl(0, 0%, 50%);
    color: hsl(0, 0%, 20%);
}

button:disabled {
    background-color: hsl(0, 0%, 97%);
    border: 1px solid hsl(0, 0%, 75%);
    color: hsl(0, 0%, 75%);
    cursor: auto;
}

button.zurueck {
    margin-top: 2rem;
}

button.svg-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    /* line-height: 1 verhindert unerwünschten zusätzlichen vertikalen Raum. */
    line-height: 1;
    display: inline-flex;
    /* inline-flex mit align-items: center sorgt dafür, dass der SVG-Inhalt mittig im Button sitzt. */
    align-items: center;
    justify-content: center;
    /* vertical-align: middle hilft dem Button, sich innerhalb des <td> korrekt zu positionieren. */
    vertical-align: middle;
    height: 100%;
}

button.svg-button svg {
    display: block;
    /* Initialen Wert für Fill (statt none) setzen, damit Transition funktioniert. */
    fill: hsl(0, 0%, 100%);
    transition: 1.0s;
}

button.svg-button:hover svg {
    fill: hsl(203, 100%, 85%);
}

/* Ausrichtung der Buttons für Aktionen */
div.aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
    margin: 3rem 0;
    width: auto;
}

h2 + div.aktionen {
    margin-top: 0;
}


/* * * * * * * * * * Media Query * * * * * * * * * */

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

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

    form input.text,
    form select,
    form textarea {
        width: calc(70% - 20px);
    }

    form.wartung input.text,
    form.wartung select {
        width: 30%;
    }
}


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

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

div.mod_login div.widget,
div.mod_lostPassword div.widget {
    margin: 1rem 0;
    padding: 0;
}

div.mod_login div.widget label,
div.mod_lostPassword div.widget label {
    float: left;
    margin-right: 10px;
    width: 120px;
}

div.mod_login input.text,
div.mod_lostPassword 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,
div.passwort_vergessen.content-text,
div.passwordreset.content-text {
    margin-left: 130px;
}

/* Button Abmelden im Login-Modul links ausrichten */
div.logout div.widget-submit button {
    margin-left: 0;
}


/* * * * * * * * * * Formular Passwort vergessen * * * * * * * * * */

div.mod_lostPassword span.invisible {
    display: none;
}


/* * * * * * * * * * Formular Mitglieder 2FA * * * * * * * * * */

form.tl_two_factor_form div.widget {
    margin: 2em 0;
}


/* * * * * * * * * * Formulare allgemein * * * * * * * * * */

/* Buttons mit Abstand rechts, falls mehrere Buttons nebeneinander auszugeben sind */
div.widget-submit button {
    margin-right: 1rem;
}

/* * * * * * * * * * Tabellen Reset * * * * * * * * * */

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}


/* * * * * * * * * * Tabellen Standard * * * * * * * * * */

table.allgemein tr {
    transition: 0.5s;
}

table.allgemein thead tr {
    background-color: hsl(203, 100%, 30%);
    color: hsl(0, 100%, 100%);
}

table.allgemein tbody tr:nth-child(even) {
    background-color: hsl(0, 0%, 97%);
}

table.allgemein tbody tr:hover {
    background-color: hsl(203, 100%, 95%);
    cursor: default;
}

table.allgemein thead th {
    border: 1px solid hsl(203, 100%, 30%);
}

table.allgemein th,
table.allgemein td {
    border: 1px solid hsl(0, 0%, 50%);
    padding: 0.5em;
    text-align: left;
    vertical-align: top;
}

table.allgemein .text {
    text-align: left;
}

table.allgemein .zahl,
table.allgemein .number,
table.auflistung .zahl {
    text-align: right;
}

@media screen and (max-width: 650px) {

    /* Überschriften ausblenden */
    table.allgemein th {
        display: none;
    }

    /* Tabellenspalten einer Zeile zusammenfassen */
    table.allgemein td {
        border: none;
        display: grid;
        grid-template-columns: 1fr 2fr;
        padding: 0;
    }

    table.allgemein td:first-child {
        padding-top: 0.5em;
    }

    table.allgemein td:last-child {
        padding-bottom: 0.5em;
    }

    table.allgemein td::before {
        content: attr(headers) ": ";
        font-weight: bolder;
        text-transform: capitalize;
    }
}


/* * * * * * * * * * Tabellen mit Kopfdaten * * * * * * * * * */

table.kopfdaten {
    height: fit-content; /* damit die Höhe im Grid zwei Tabellen nebeneinander nicht gestreckt wird */
    margin: 1rem 0;
}

table.kopfdaten tr,
table.kopfdaten tr:hover {
    background: none;
    border-bottom: 1px solid hsl(0, 0%, 70%);
}

table.kopfdaten tr:last-of-type {
    border-bottom: none;
}

table.kopfdaten td {
    border: none;
    padding: 0.3rem 0;
    vertical-align: top;
}

table.kopfdaten td.bezeichnung {
    text-align: left;
}

table.kopfdaten td.wert {
    text-align: right;
}

table.kopfdaten td.auswertung_phase {
    text-align: right;
}

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

    table.kopfdaten {
        width: min(100%, 450px);
    }

    table.kopfdaten.breit {
        width: min(100%, 800px);
    }

    table.kopfdaten:nth-of-type(2) {
        justify-self: right;
    }
}


/* * * * * * * * * * Tabellen mit Übersichten * * * * * * * * * */

table.auflistung {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1rem 0;
}

/* erhöht den Abstand vor und nach einer alleinstehenden Tabelle (ohne Überschrift oder folgenden Elementen) */
table.alleinstehend {
    margin: 3rem 0;
}

table.auflistung tr {
    background: none;
    transition: 0.5s;
}

table.auflistung tbody tr:hover {
    background-color: hsl(203, 100%, 95%);
    cursor: default;
}

table.auflistung th,
table.auflistung td {
    border: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: hsl(0, 0%, 70%);
    padding: 0.5em 1em 0.5em 0;
    text-align: left;
    vertical-align: middle;
}

table.auflistung th:last-of-type,
table.auflistung td:last-of-type {
    padding-right: 0;
}

table.auflistung th.formular,
table.auflistung td.formular {
    padding: 0;
    text-align: right;
}

table.auflistung td.formular div,
table.auflistung td.formular form {
    display: inline;
}

table.auflistung td.formular form {
    margin-right: 0.5em;
}

table.auflistung td.formular form:last-child {
    margin-right: 0;
}

table.auflistung button {
    margin: 0.5em 0;
    padding: 0.5em 1em;
}

table.auflistung button.svg-button {
    /* Abstand zwischen Margin und Padding aufgeteilt, um die Klickfläche um das Symbol zu vergrössern. :-) */
    margin: 0.3em;
    padding: 0.4em;
}


/* * * * * * * * * * Tabellen für die Zusammenfassung * * * * * * * * * */

table.zusammenfassung {
    margin: 1rem 0;
}

table.zusammenfassung tr {
    background: none;
}

table.zusammenfassung tr td:first-child {
    width: 200px;
}

table.zusammenfassung td {
    border-top: 1px solid hsl(0, 0%, 70%);
    border-right-style: none;
    border-bottom: 1px solid hsl(0, 0%, 70%);
    border-left-style: none;
    padding: 0.5em 1em 0.5em 0;
    text-align: left;
    vertical-align: top;
}


/* * * * * * * * * * Tabellen mit Formularen in den Kapiteln * * * * * * * * * */

table.formular tr {
    background: none;
    transition: 0.5s;
}

table.formular tr:hover {
    background-color: hsl(203, 100%, 95%);
}

table.formular td {
    padding: 0.5rem 0;
    vertical-align: top;
}

table.formular td.bezeichnung {
    width: 25%;
    min-width: 300px;
}

table.formular td.wert {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 25%;
    min-width: 300px;
}

table.formular td.wert input,
table.formular td.wert select {
    width: 100%;
}

table.formular td.verstoesse {
    width: auto;
}

table.formular td.verstoesse div.hinweis {
    margin: 0 0 1rem;
}

table.formular td.verstoesse div.hinweis textarea {
    margin-top: 0.5rem;
    width: 100%;
}

table.formular.dreispaltig td,
table.formular.vierspaltig td {
    padding: 0.5rem 0;
}

table.formular.dreispaltig div.checkbox,
table.formular.vierspaltig div.checkbox {
    float: left;
    width: 20px;
}

table.formular.dreispaltig div.label,
table.formular.vierspaltig div.label {
    float: left;
}

table.formular.dreispaltig td {
    width: 320px;
}

table.formular.dreispaltig div.label,
table.formular.dreispaltig div.label input {
    width: 280px;
}

table.formular.vierspaltig td {
    width: 240px;
}

table.formular.vierspaltig div.label,
table.formular.vierspaltig div.label input {
    width: 200px;
}

@media screen and (min-width: 1200px) {
    table.formular.dreispaltig td {
        width: 400px;
    }

    table.formular.dreispaltig div.label,
    table.formular.dreispaltig div.label input {
        width: 360px;
    }

    table.formular.vierspaltig td {
        width: 300px;
    }

    table.formular.vierspaltig div.label,
    table.formular.vierspaltig div.label input {
        width: 260px;
    }
}


/* * * * * * * * * * Tabellen auf den Wartungsseiten * * * * * * * * * */

table.wartung td.warnung {
    color: hsl(0, 100%, 45%);;
}

table.wartung td.ok {
    color: hsl(120, 100%, 35%);
}


/* * * * * * * * * * Tabellen mit Kennzahlen * * * * * * * * * */

table.kennzahlen {
    box-sizing: border-box;
    font-size: 90%;
    table-layout: fixed;
}

table.kennzahlen tbody tr:hover {
    background-color: hsl(203, 100%, 95%);
    cursor: default;
}

table.kennzahlen td,
table.kennzahlen th {
    border: 1px solid hsl(0, 0%, 70%);
    line-height: 1.2em;
    padding: 0.5em;
    vertical-align: top;
}

table.kennzahlen th {
    background-color: hsl(0, 0%, 90%);
    hyphens: auto;
    text-align: left;
}

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


/* * * * * * * * * * Tabellen mit Auswertungen * * * * * * * * * */

table.auswertungen {
    box-sizing: border-box;
    font-size: 90%;
}

table.auswertungen tbody tr:hover {
    background-color: hsl(203, 100%, 95%);
    cursor: default;
}

table.auswertungen td,
table.auswertungen th {
    border: 1px solid hsl(0, 0%, 70%);
    line-height: 1.2em;
    padding: 0.5em;
    vertical-align: top;
}

table.auswertungen th {
    background-color: hsl(0, 0%, 90%);
    hyphens: auto;
    text-align: left;
}

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


/* * * * * * * * * * Spezielle Feldformatierungen * * * * * * * * * */

td.feldname {
    width: 50%;
}

@media screen and (min-width: 960px) {
    td.feldname {
        width: 30%;
    }
}

td.mandatory {
    font-weight: bold;
}