/* AdoKa */
@import "colortheme.css";
@import "accent-colors.css";

/* =================================================== Spezial ====================================================== */
.li-bold {
    font-size: 1em;
    font-style: italic;
    font-weight: bold;
}


/* =================================================== GRID ========================================================= */
html {
}

aside, header, article, footer {
    border-radius: 0 0.5em 0.5em;
    padding-left: 0.5em;
    margin: 0px;
    border-width: 0.5em;
    border-top: inset;
    border-color: var(--background3-color);
    box-shadow: -0.1em .2em .6em 0 rgba(0, 0, 0, .35);
}

body {
    hyphens: auto;
    display: grid;
    grid-template-columns: 1fr 4fr 4fr 4fr 4fr;
    grid-template-rows: repeat(32, 1fr);
}

header {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 1;
}


nav {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 2;
}
ul {
    list-style-type: none;
    padding: 0.5em;
}

li {
    list-style-type: none;
    margin-left: 0em;
    margin-bottom: 0em;
    break-inside: avoid-column;
}

aside {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 3;
    padding-left: 0.3em;
    padding-right: 1em;
    min-width: 6.5em;
    /*max-width: 6.5em;*/
}
#aside_foto {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 3;
}
main {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 3;
}
    aside h3 {
        margin: 0.2em;
        padding: 0.1em;
        padding-left: 0.1em;
        cursor: pointer;
        font: normal 1.0em Arial, sans-serif;
        background-color: var(--background2-color);
        color: var(--background-color);
        border-radius: 0.25em;
        border-width: 0.25em;
        border-top: solid;
        border-color: var(--background3-color);
        border: dotted;
        border-color: transparent;
    }

        aside h3:hover {
            cursor: pointer;
            /*font: bold 1.0em Arial, sans-serif;*/
            border: solid;
            filter: brightness(1.15);
            border-color: var(--background3-color);
        }
          

    main ul {
        list-style-type: none;
    }
    
    article {
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 3;
    padding-left:0.5em;
    
}

footer {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 4;
    grid-row-end: 4;
}
    /* ********************************************************************************** */
    /* **************** Hilfs-Id's für Sichtbarkeit in Profil *************************** */
    /* ********************************************************************************** */
    #inhalt {
    }

    #daten {
        display: none;
    }

    #aufgaben {
        display: none;
    }

    #laufbahn {
        display: none;
    }

    #technologien {
        display: none;
    }

    #praxis {
        display: none;
    }

    #branchen {
        display: none;
    }

    #firmen {
        display: none;
    }

    #projekte {
        display: none;
    }

    /* ********************************************************************************** */
    /* ****************** Klassen für Spalten Media abhängig **************************** */
    /* ********************************************************************************** */

    .inhalt {
    }

    .daten {
        columns: 2 5em;
    }

    .aufgaben {
        columns: 2 5em;
    }

    .laufbahn {
        columns: 2 5em;
    }

    .technologien {
        columns: 2 5em;
    }

    .praxis {
        columns: 2 5em;
    }

    .branchen {
        columns: 2 5em;
    }

    .firmen {
        columns: 2 5em;
    }

    .projekte {
        columns: 2 5em;
    }

.scrollbox {
    overflow: auto;
    max-height: 30em;
}

@media screen and (min-width: 35em) {
    .inhalt {
    }

    .daten {
        columns: 3 5em;
    }

    .aufgaben {
        columns: 3 5em;
    }

    .laufbahn {
        columns: 2 5em;
    }

    .technologien {
        columns: 2 5em;
    }

    .praxis {
        columns: 2 5em;
    }

    .branchen {
        columns: 2 5em;
    }

    .firmen {
        columns: 2 5em;
    }

    .projekte {
        columns: 2 5em;
    }

    .scrollbox {
        overflow: auto;
        max-height: 30em;
    }
}
@media screen and (min-width: 45em) {
    .inhalt {
    }

    .daten {
        columns: 4 5em;
    }

    .aufgaben {
        columns: 3 5em;
    }

    .laufbahn {
        columns: 2 5em;
    }

    .technologien {
        columns: 2 5em;
    }

    .praxis {
        columns: 2 5em;
    }

    .branchen {
        columns: 2 5em;
    }

    .firmen {
        columns: 2 5em;
    }

    .projekte {
        columns: 2 5em;
    }

    .scrollbox {
        overflow: auto;
        max-height: 30em;
    }
}
@media screen and (min-width: 56em) {
    .inhalt {
    }

    .daten {
        columns: 5 5em;
    }

    .aufgaben {
        columns: 4 5em;
    }

    .laufbahn {
        columns: 2 5em;
    }

    .technologien {
        columns: 2 5em;
    }

    .praxis {
        columns: 2 5em;
    }

    .branchen {
        columns: 2 5em;
    }

    .firmen {
        columns: 2 5em;
    }

    .projekte {
        columns: 2 5em;
    }

    .scrollbox {
        overflow: auto;
        max-height: 30em;
    }}