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

/* * * * * Styles der Container überschreiben * * * * */

main {
    background-color: hsl(0, 0%, 95%);
    padding: 0;
}


/* * * * * Grid Container * * * * */

/* Artikel als Container ohne Maximalbreite */
div.mod_article.homepage {
    width: 100%;
}

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

/* Hintergrundfarben */
main div.hintergrund-blau {
    background-color: hsl(203, 50%, 90%);
}

main div.hintergrund-grau {
    background-color: hsl(0, 0%, 90%);
}

/* Themenüberschriften */
main div.homepage > h2 {
    text-align: center;
    font-weight: 300;
    margin: 0;
    margin-inline: auto;
    padding: 1rem;
}

main div.homepage > h2 + div.boxen.grid {
    padding-top: 0;
}

/* Hintergrundabhängige Farben für die Themenüberschriften */
main div.homepage.hintergrund-blau > h2 {
    color: hsl(203, 50%, 50%);
}

main div.homepage.hintergrund-grau > h2 {
    color: hsl(0, 0%, 50%);
}


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

/* Grid in den Boxen (Positionierung von Inhalten) */
main div.boxen > .box {
    border: 1px solid;
    border-top-color: hsl(0, 0%, 80%);
    border-right-color: hsl(0, 0%, 70%);
    border-bottom-color: hsl(0, 0%, 70%);
    border-left-color: hsl(0, 0%, 80%);
    border-radius: 0.5rem;
    cursor: pointer;
    display: grid;
    grid-template-areas:
        'inhalt';
    grid-template-rows: 1fr auto;
}

main div.boxen > .bildbox {
    grid-template-areas:
        'bild'
        'inhalt';
    grid-template-rows: auto 1fr auto;
}

main div.boxen > .box > .inhalt {
    border-radius: 0.5rem 0.5rem 0 0;
    grid-area: inhalt;
    padding: 1rem;
}

main div.boxen a,
main div.boxen a:hover {
    text-decoration: none;
}

main div.boxen h2.aussage {
    border: none;
    color: hsl(0, 0%, 30%);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

main div.boxen h6.thema {
    border: none;
    color: hsl(203, 100%, 30%);
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.inhalt p,
.inhalt li {
    font-size: 1rem;
    margin-top: 0.5rem;
}

main div.boxen img {
    border-radius: 0.4rem 0.4rem 0 0;
    height: auto;
    width: 100%;
}


/* * * * * Formate für die Boxen: Breite und Höhe * * * * */

.b1h1 {
    grid-column: span 1;
    grid-row: span 1;
}


/* * * * * Farbkombination für die Boxen: Hintergrund und Schrift * * * * */

/* Weiss #FFFFFF */
.box.weiss {
    background-color: #FFFFFF;
    color: #3E3E3E;
}


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

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

    main div.boxen.grid {
        gap: 2rem;
        grid-template-areas:
         '. . . . . .';
        padding: 5rem 3rem;
        width: min(calc(100% - 20px), 1480px);
    }

    main div.boxen > .box {
        box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(0, 0%, 50%);
        transition: all 300ms ease-in-out;
    }

    main div.boxen > .box:hover {
        border: 1px solid;
        border-top-color: hsl(203, 100%, 50%);
        border-right-color: hsl(203, 100%, 40%);
        border-bottom-color: hsl(203, 100%, 40%);
        border-left-color: hsl(203, 100%, 50%);
        box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(0, 0%, 30%);
        transition: all 300ms ease-in-out;
    }

    /* Themenüberschriften */
    main div.homepage > h2 {
        padding: 2rem 3rem;
        width: min(calc(100% - 20px), 1480px);
    }

    .b1h1 {
        grid-column: span 3;
        grid-row: span 1;
    }

    /* Variante */
    .klein {
        grid-column: span 6;
        grid-row: span 1;
    }

    .mittel {
        grid-column: span 6;
        grid-row: span 1;
    }

    .gross {
        grid-column: span 6;
        grid-row: span 1;
    }
}

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

    .b1h1 {
        grid-column: span 2;
    }

    /* Variante */
    .klein {
        grid-column: span 2;
        grid-row: span 1;
    }

    .mittel {
        grid-column: span 3;
        grid-row: span 1;
    }

    .gross {
        grid-column: span 6;
        grid-row: span 1;
    }

    main div.boxen > .box > .inhalt {
        padding: 1.5rem;
    }

    main div.boxen > .bildbox.gross {
        grid-template-areas:
        'bild inhalt';
        grid-template-columns: 2fr 1fr;
    }

    main div.boxen .bildbox.gross img {
        border-radius: 0.5rem 0 0 0.5rem;
        height: auto;
        width: 100%;
    }

    .inhalt p,
    .inhalt li {
        font-size: 1.1rem;
    }
}