/* * * * * * * * * * 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_lureg_mitglied {
    color: hsl(0, 0%, 40%);
    font-size: 0.9rem;
    font-weight: normal;
}

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

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

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

div.mod_lureg_mitglied 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: 5px;
        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;
    padding: 3rem 2rem 6rem 2rem;
}

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

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


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

/* 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 {
    background-image: url("/files/themes/lustat/symbole/download_pdf_3e3e3e.svg");
}

.download-element.ext-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%;
}

div.bildrahmen figure {
    border: 1px solid hsl(0, 0%, 70%);
    border-radius: 5px;
}

div.bildrahmen figure img {
    border-radius: 5px;
}


/* * * * * * * * * * 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: 1rem;
    font-weight: bold;
}

/* Ebene 3 - Abstand direkt nach einer H2-Überschrift verkleinern */
h2 + h3 {
    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;
}

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

/* 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.5em 0 0 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%);
}


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

/* * * * * * * * * * Tabellen (Standard) * * * * * * * * * */

div.content-table table,
table.allgemein {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1rem 0;
    width: 100%;
}

div.content-table table tr,
table.allgemein tr {
    transition: 0.5s;
}

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

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

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

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

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

div.content-table table .text,
table.allgemein .text {
    text-align: left;
}

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

/* https://www.youtube.com/watch?v=czZ1PvNW5hk&list=WL&index=93 */
@media screen and (max-width: 650px) {

    /* Überschriften ausblenden */
    div.content-table table th,
    table.allgemein th {
        display: none;
    }

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

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

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

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


/* * * * * * * * * * Tabellen mit Kopfdaten im Kundenportal * * * * * * * * * */

table.kopfdaten {
    margin: 1rem 0;
    width: auto;
}

table.kopfdaten tr,
table.kopfdaten tr:hover {
    background: none;
}

table.kopfdaten td {
    border: none;
    padding: 0;
}

table.kopfdaten td.bezeichnung {
    padding-right: 1em;
    vertical-align: top;
    width: auto;
}


/* * * * * * * * * * Tabellen mit Übersichten im Kundenportal * * * * * * * * * */

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

/* 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 .antrag-status,
table.auflistung .benutzer-status {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    /*display: inline-block;*/
    padding: 0.1em 0.3em;
    /*width: auto;*/
}

table.auflistung .antrag-status.neu {
    background-color: hsl(203, 100%, 98%);
    /*border-color: hsl(203, 100%, 85%);*/
    color: hsl(203, 100%, 35%);
}

table.auflistung .antrag-status.abgelehnt,
table.auflistung .benutzer-status.inaktiv {
    background-color: hsl(0, 100%, 98%);
    /*border-color: hsl(0, 100%, 85%);*/
    color: hsl(0, 100%, 45%);
}

table.auflistung .antrag-status.freigegeben,
table.auflistung .benutzer-status.aktiv {
    background-color: hsl(120, 100%, 98%);
    /*border-color: hsl(120, 100%, 85%);*/
    color: hsl(120, 100%, 35%);
}


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

table.zusammenfassung {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1rem 0;
    width: 100%;
}

table.zusammenfassung tr {
    background: none;
}

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

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

/* * * * * * * * * * Nachrichten * * * * * * * * * */

/* Abstände bei Listen */
div.mod_newslist ul,
div.mod_newslist ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Abstand zwischen den Nachrichten anpassen */
div.mod_newslist > div {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    margin: 2rem 0;
    padding: 1em;
    background-color: hsl(203, 100%, 95%);
    border-color: hsl(203, 100%, 85%);
    color: hsl(203, 100%, 20%);
}

/* Überschrift in der Nachrichtenliste (Titel der Nachricht) */
div.mod_newslist > div > h3 {
    margin-top: 0;
}

/* Meta-Informationen zur Nachricht über der Überschrift */
div.mod_newslist > div > p.info {
    color: hsl(0, 0%, 60%);
    font-size: 0.8em;
    margin: 0;
}

/* * * * * * * * * * Nachricht * * * * * * * * * */

/* Abstände bei Listen */
div.mod_newsreader ul,
div.mod_newsreader ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Aussenabstände des eingebetten Text-Elements entfernen */
div.mod_newsreader div.ce_text,
div.mod_newsreader div.ce_comments,
div.mod_newsreader div.ce_hyperlink {
    margin-left: 0;
    margin-right: 0;
}

/* Meta-Informationen zur Nachricht unter der Überschrift */
div.mod_newsreader > div > p.info {
    font-size: 0.8em;
}

div.mod_newsreader div.comment_default {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    margin: 2rem 0;
    padding: 0 1em;
    background-color: hsl(0, 0%, 95%);
    border-color: hsl(0, 0%, 85%);
    color: hsl(0, 0%, 20%);
}

div.mod_newsreader div.comment_default > p.info {
    font-weight: bold;
}

div.mod_newsreader div.widget {
    margin: 1em 0;
}

div.mod_newsreader div.widget-text input,
div.mod_newsreader div.widget-textarea textarea {
    width: 100%;
}

div.mod_newsreader div.widget-text label,
div.mod_newsreader div.widget-textarea label {
    width: 100%;
}

div.mod_newsreader div.widget-checkbox label {
    margin-left: 0.5em;
    margin-right: 0;
}