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

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 */
#hauptnavigation {
    background-color: #6f6f6f;
}

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

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

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

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

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


/* * * * * * * * * * Benutzer: Login-Informationen im Header * * * * * * * * * */

div.mod_spitex_benutzer {
    color: hsl(0, 0%, 40%);
    font-size: 0.9rem;
    font-weight: normal;
}

div.mod_spitex_benutzer ul {
    float: right;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

div.mod_spitex_benutzer ul > li {
    float: left;
    margin: 0;
    padding: 0;
}

div.mod_spitex_benutzer ul > li:after {
    content: '|';
    margin: 0 10px;
}

div.mod_spitex_benutzer ul > li:last-child:after {
    content: '';
    margin: 0;
}


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

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

    #hauptnavigation ul.level_1 > li > a,
    #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 */
    #hauptnavigation {
        background-color: #ffffff;
        margin-bottom: -0.65em;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body {
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
        "header"
        "main"
        "aside"
        "footer";
}

aside {
    grid-area: aside;
}

@media screen and (min-width: 800px) {
    body {
        grid-template-rows: auto 1fr auto;
        /*
         * Die Navigation soll auf allen Unterseiten dieselbe Breite haben.
         *
         * Bei `1fr auto` wird die `main`-Spalte (`auto`) anhand ihres Inhalts bemessen. Die `aside`-Spalte (`1fr`)
         * erhält anschliessend nur den verbleibenden Platz und ist deshalb je nach Seite unterschiedlich breit.
         *
         * 18rem ist die feste Breite der Navigation. Die Inhalts-Spalte nimmt den übrigen verfügbaren Platz ein.
         */
        grid-template-columns: 18rem minmax(0, 1fr);
        grid-template-areas:
        "header header"
        "aside  main"
        "footer footer";
    }

    /* Verhindert, dass der minimale Inhaltsbedarf die Grid-Spalte aufweitet. */
    main {
        min-width: 0;
    }
}

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

/* Linker Abstand */
aside {
    background-color: hsl(203, 30%, 95%);
    padding: 3rem 2rem;
}

/* Menüpunkte gestalten */
aside nav#seitennavigation a,
aside nav#seitennavigation strong {
    color: hsl(0, 0%, 30%);
    display: block;
    font-weight: normal;
    margin: 0;
    padding: 0.5em;
    text-decoration: none;
}

/* Aktiven Menüpunkt hervorheben */
aside nav#seitennavigation a:focus,
aside nav#seitennavigation a:hover,
aside nav#seitennavigation a.trail,
aside nav#seitennavigation strong.active,
aside nav#seitennavigation strong.forward {
    color: hsl(203, 100%, 35%);
}

aside nav#seitennavigation a.invisible {
    display: none;
}

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

/* Listenelemente gestalten */
aside nav#seitennavigation li {
    border-top: 1px solid hsl(0, 0%, 75%);
}


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

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


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

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

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

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


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

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

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

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


/* * * * * Navigation Links Ebene 4 * * * * */

/* Ebene 4: Ebene ausblenden */
aside nav#seitennavigation ul.level_4 {
    display: none;
}

/* Ebene 4: Ebene einblenden, wenn Element selbst oder Elternelement aktiv ist */
aside nav#seitennavigation ul.level_3 > li.active > ul.level_4,
aside nav#seitennavigation ul.level_3 > li.trail > ul.level_4 {
    display: block;
}

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

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 h3 {
    color: hsl(0, 0%, 90%);
}

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


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

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

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

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


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

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

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


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

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

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


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

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

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

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

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

/* Ebene 4 - Abstand direkt nach einer H3-Überschrift verkleinern */
h3 + h4 {
    margin-top: 0;
}


/* * * * * * * * * * 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;
    max-width: 65rem;
}

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;
    max-width: 65rem;
    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;
}

div.hinweis.validierung {
    padding: 0 1rem;
}

div.hinweis.validierung > h3,
div.hinweis.validierung > p {
    margin: 1rem 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;
}


/* * * * * * * * * * Fortschritt bei der Validierung einer Lieferung * * * * * * * * * */

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

div.fortschritt.validierung > div {
    background-color: hsl(0, 0%, 50%);
    border-radius: 4px;
    height: 20px;
    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%);
}

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