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

main {
    background-color: #fdfeff;
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem 2rem 6rem 2rem;
}

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

p.breadcrumb {
    color: hsl(0, 0%, 50%);
    margin-bottom: 3rem;
    margin-top: 0;
}

/* Container für die Kopfdaten auf den Kapitel-Seiten */
div.kopfdaten {
    display: grid;
    gap: 1.5rem;
    grid-auto-columns: 1fr;
    grid-template-areas:
       '.';
    margin: -1rem 0; /* Den Abstand der enthaltenen Tabellen ausgleichen, damit eine einzelne Kopfdaten-Tabelle die gleichen Abständenach oben und unten hat wie zwei Tabellen in diesem DIV */
    width: 100%;
}

@media screen and (min-width: 800px) {
    div.kopfdaten {
        grid-template-areas:
          ". .";
    }
}

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

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

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

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

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

div.filter {
    background-color: hsl(0, 0%, 90%);
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 5px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: 0.5rem;
}

div.filter > form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

div.filter span.element {
    margin: 5px;
    width: 100%;
}

@media screen and (min-width: 800px) {
    div.filter span.element {
        width: calc(50% - 10px);
    }
}

@media screen and (min-width: 1200px) {
    div.filter span.element {
        width: calc(25% - 10px);
    }
}

div.filter span.element label {
    font-size: 0.9rem;
    line-height: 1.7em;
}

div.filter span.element input[type="text"],
div.filter span.element select {
    width: 100%;
}

/* * * * * * * * * * Anzeige Prozessphase * * * * * * * * * */

div.prozessphase {
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 70%);
    border-radius: 12px;
    display: inline-block;
    margin-bottom: -6px; /* damit lässt sich die Verschiebung durch inline-block ausgleichen */
    padding: 1px;
    width: 200px;
}

div.prozessphase > div {
    background-color: hsl(0, 0%, 60%);
    border-radius: 10px;
    height: 20px;
}

div.prozessphase > div.phase_1 {
    width: 20%;
}

div.prozessphase > div.phase_2 {
    width: 40%;
}

div.prozessphase > div.phase_3 {
    width: 60%;
}

div.prozessphase > div.phase_4 {
    width: 80%;
}

div.prozessphase > div.phase_5 {
    width: 100%;
}

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

div.fortschritt > div {
    background-color: hsl(0, 0%, 50%);
    border-radius: 10px;
    height: 20px;
    width: 0;
}

/* * * * * * * * * * Balken für die Auswertung der Phasen (Seite Erhebung) * * * * * * * * * */

div.auswertung_phase {
    display: inline-block;
    margin-left: 0.5rem;
    width: 300px;
}

div.auswertung_phase > div {
    background-color: hsl(203, 100%, 40%);
    border-radius: 2px;
    height: 10px;
    width: 0;
}

/* * * * * * * * * * Anzeige Datenqualität * * * * * * * * * */

div.kapitel-box > div.datenqualitaet {
    position: absolute;
    top: 10px;
    right: 10px;
}

div.kapitel-box div.datenqualitaet {
    background-color: hsl(0, 0%, 100%);
    padding: 1px;
}

div.datenqualitaet {
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 70%);
    border-radius: 12px;
    display: inline-block;
    margin-bottom: -6px; /* damit lässt sich die Verschiebung durch inline-block ausgleichen */
    padding: 1px;
}

div.datenqualitaet > div {
    border-radius: 10px;
    width: 20px;
    height: 20px;
}

div.datenqualitaet > div.stufe_1 {
    background-color: hsl(0, 100%, 45%);
}

div.datenqualitaet > div.stufe_2 {
    background-color: hsl(39, 100%, 50%);
}

div.datenqualitaet > div.stufe_3 {
    background-color: hsl(120, 100%, 35%);
}

div.datenqualitaet > div.stufe_9 {
    background-color: hsl(0, 0%, 60%);
}


/* * * * * * * * * * Anzeige Status * * * * * * * * * */

div.status {
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 40%);
    border-radius: 12px;
    display: inline-block;
    margin-bottom: -6px; /* damit lässt sich die Verschiebung durch inline-block ausgleichen */
    padding: 1px;
}

div.status > div {
    border-radius: 10px;
    width: 20px;
    height: 20px;
}

div.status > div.neutral {
    background-color: hsl(0, 0%, 95%);
}

div.status > div.info {
    background-color: hsl(203, 100%, 40%);
}

div.status > div.ok {
    background-color: hsl(120, 100%, 35%);
}

div.status > div.warnung {
    background-color: hsl(39, 100%, 50%);
}

div.status > div.fehler {
    background-color: hsl(0, 100%, 45%);
}

/* * * * * * * * * * Tooltips * * * * * * * * * */

/* Insgesamt kann display nicht auch inline-block gesetzt werden, da unter der Phase dann ein Abstand entsteht. */
div.tooltip {
    cursor: help;
    position: relative;
}

/* Damit der Tooltip mittig über dem Datum ausgerichtet wird. (Phase und Qualität haben im Gegensatz feste Breiten.) */
div.tooltip.frist {
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    background-color: hsl(0, 0%, 20%, 90%);
    border-radius: 5px;
    color: hsl(0, 0%, 90%);
    padding: 0.5em;
    text-align: center;
    visibility: hidden;
    width: 200px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
}

.tooltip .tooltiptext.phasenaenderung {
    width: 300px;
    margin-left: -150px;
}

.tooltip .tooltiptext.phasenaenderung p {
    font-size: 0.9rem;
    line-height: 1.2;
    margin: 0.4em 0;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: hsl(0, 0%, 20%, 90%) transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* * * * * * * * * * Kapitel-Boxen * * * * * * * * * */

/* Container für die Kapitel-Boxen */
div.kapitelboxen {
    display: grid;
    gap: 1.5rem;
    grid-auto-columns: 1fr;
    grid-template-areas:
       '.';
    width: 100%;
}

div.kapitelboxen > div.box {
    background-color: hsl(203, 10%, 90%);
    border: 1px solid hsl(203, 10%, 80%);
    border-radius: 5px;
    box-sizing: border-box;
    display: grid;
    grid-template-areas:
        'bezeichnung qualitaet'
        'buttons buttons'
        'kennzahlen kennzahlen';
    grid-template-rows: auto 1fr auto;
    transition: all 300ms ease-in-out;
    padding: 0.5rem;
}

div.kapitelboxen > div.box > div.bezeichnung {
    grid-area: bezeichnung;
    height: fit-content;
}

div.kapitelboxen > div.box > div.bezeichnung > h3 {
    margin: 0;
    padding: 0;
}

div.kapitelboxen > div.box > div.qualitaet {
    grid-area: qualitaet;
    height: fit-content;
    position: relative;
}

div.kapitelboxen > div.box > div.qualitaet > div.datenqualitaet {
    margin: 0;
    position: absolute;
    right: 0;
}

div.kapitelboxen > div.box > div.buttons {
    grid-area: buttons;
    padding: 1rem 0;
}

div.kapitelboxen > div.box > div.buttons button {
    margin: 0.25rem 0;
    width: 100%;
}

div.kapitelboxen > div.box > div.kennzahlen {
    align-self: end;
    grid-area: kennzahlen;
    height: fit-content;
    padding-top: 1rem;
}

div.kapitelboxen > div.box > div.kennzahlen > table {
    border-collapse: collapse;
    width: 100%;
}

div.kapitelboxen > div.box > div.kennzahlen > table tr {
    border-bottom: 1px solid hsl(203, 10%, 80%);
    border-top: 1px solid hsl(203, 10%, 80%);
}

div.kapitelboxen > div.box > div.kennzahlen > table tr:first-of-type {
    border-top: none;
}

div.kapitelboxen > div.box > div.kennzahlen > table tr:last-of-type {
    border-bottom: none;
}

div.kapitelboxen > div.box > div.kennzahlen > table td {
    line-height: normal;
    padding: 0.5em 0;
    vertical-align: top;
}

div.kapitelboxen > div.box > div.kennzahlen > table td.bezeichnung {
    font-size: 0.9rem;
    padding-right: 0.5em;
    text-align: left;
}

div.kapitelboxen > div.box > div.kennzahlen > table td.wert {
    font-size: 0.9rem;
    text-align: right;
}

@media screen and (min-width: 800px) {
    div.kapitelboxen {
        grid-template-areas:
          ". .";
    }
}

@media screen and (min-width: 1200px) {
    div.kapitelboxen {
        grid-template-areas:
          ". . . .";
    }
}