/* configuration */
/* ============= */

    /* lengths and sizes */
    /* ----------------- */

    /* dimension */
    :root{
        --button-border-width: 0.15rem;
        --button-border-width-big: 0.2rem;
        --range-height: 0.7rem;
        --input-max-width: 30rem;
        --layout-border-width: 0.15rem;
        --interactives-border-width: var(--button-border-width);
    }

    /* font and text settings */
    :root{
        --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --titles-font: var(--text-font);
        --code-font: "Consolas", "Roboto Mono", "Ubuntu Monospace", "Menlo", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --base-font-size: 1.2rem;
        --font-size: 1em;
        --line-height: 1.3em;
    }

    /* spacing */
    :root{
        --typography-spacing: 1.5em;
        --figure-margin: 1em 1em;
        --figure-margin-landscape: 1em 2.5em;
    }

    /* build */

    :root{
        --left-margin: 5rem;
        --content-margin-left: 2em;
        --content-margin-top: 1em;
        --content-margin-bottom: 5em;
    }


    /* color scheme */
    /* ------------ */

    /* theme light */
    :root:not([theme=dark]),
    [theme=light] {
        --text-color:#2c2525;
        --border-color: var(--text-color);
        --background-color: #efede7;
        --shadow-color: #2c2525;
        --light-color: #efede7;
        --bg-pattern: var(--bg-pattern-light);
        --pattern-color: #2c252536;

        --image-filter: ;
        --font-weight: 400;
    }

    /* theme dark */
    @media only screen and (prefers-color-scheme:dark) {
        :root:not([theme=light]) {
            --text-color: #f2eeee;
            --border-color: var(--text-color);
            --background-color: #1b1e13;
            --shadow-color: #191919;
            --light-color: #f2eeee;
            --bg-pattern: var(--bg-pattern-dark);
            --pattern-color: #000;

            --image-filter: brightness(.8) contrast(1.2);
            --font-weight: 367;
        }
    }

    [theme=dark] {
        --text-color:#EBEBEB;
        --border-color:#EBEBEB;
        --background-color: #1b1e13;
        --shadow-color: #191919;
        --light-color: #f2eeee;
        --bg-pattern: var(--bg-pattern-dark);
        --pattern-color: #000;

            --image-filter: brightness(.8) contrast(1.2);
            --font-weight: 350;
    }

    /* global colors */
    :root {
        color-scheme: light dark;
        --focus-color: #F08383;
        --drop-shadow-outside: -5px -5px 20px var(--light-color), 5px 5px 20px var(--shadow-color);
        --drop-shadow-inside: inset 3px 3px 10px var(--shadow-color), inset -5px -5px 10px var(--light-color);
        --black-color: #030303;
    }

    :focus{
        outline-style: solid;
        outline-color: var(--focus-color);
        outline-width: 0.2rem;
    }
    ::selection{
        color: var(--background-color);
        background-color: var(--text-color);
    }


    /* extras */
    /* ------ */

    /*:root{
        --bg-pattern-dark: url(../img/pattern_projects.svg);
        --bg-pattern-light: url(../img/pattern_projects_light.svg);
    }*/

/* general elements */
/* ================ */

    /* general */
    /* ------- */

        html{
            font-size: var(--font-size);
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: var(--text-font);
            font-weight: var(--font-weight);
        }


        /* browser consistency */

        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        main,
        menu,
        nav,
        section {
            display: block;
        }
        button,
        input {
            overflow: visible;
            cursor: pointer;
        }
        button,
        select {
            text-transform: none;
        }
        [type="search"] {
            -webkit-appearance: textfield;
        }
        [type="search"]::-webkit-search-cancel-button,
        [type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
        }
        ::-webkit-input-placeholder {
            color: inherit;
            opacity: 0.54;
        }

        /* make clickable items styleable in mobile browsers */
        button,
        html [type="button"],
        [type="reset"],
        [type="submit"] {
            -webkit-appearance: button;
        }
        ::-webkit-file-upload-button {
            -webkit-appearance: button;
            font: inherit;
        }

        /* hide SVG overflow in IE. */
        svg:not(:root) {
            overflow: hidden;
        }

    /* content */
    /* ------- */

        a[href]{
            color: var(--text-color);
            text-decoration: underline;
            text-underline-position: under;
            text-decoration-style: solid;
            text-decoration-thickness: 0.1em;
            text-decoration-color: var(--text-color);
            transition-duration: 0.15s;
            transition-timing-function: ease-in-out;
            transition-property: text-decoration-color, text-decoration-thickness, outline;
        }
        a[href]:hover{
            text-decoration-color: var(--focus-color);
            text-decoration-thickness: 0.2em;
        }
        a[href]>img,
        a[href]>svg{
            width: 1.3ch;
            display: inline;
            margin: 0;
        }
        a[href]>svg{
            fill: var(--text-color);
        }

        a[href].ic{
            display: inline-block;
            padding-right: 1.3ch;
        }
        a[href].ic>svg{
            display: inline-block;
            width: 1.3ch;
            height: 1.3ch;
            margin-right: -1.3ch;

        }

        /* endnotes */

        a[role="doc-noteref"]:target,
        li[role="doc-footnote"]:target{
            background-color: var(--text-color);
            color: var(--background-color);
        }
        a[role="doc-noteref"]:target a[href],
        li[role="doc-footnote"]:target a[href]{
            color: var(--background-color);
            text-decoration-color: var(--background-color);
        }
        li[role="doc-footnote"]:target a[href]:hover{
            text-decoration-color: var(--focus-color);
        }

        li[role="doc-footnote"]:target::marker{
            color: var(--text-color);
        }

        .endnotes li{
            padding: 0.3em;
        }
        .endnotes li,
        a[role="doc-noteref"],
        h1,
        h2,
        h3,
        article { 
            scroll-margin-top: 10vh;
        }
        .endnotes li+li{
            margin-top: 0.3em;
        }

        /* headlines */

        h2+a[href]{
            position: relative;
            top: -0.7em;
        }

        h3{
            margin-bottom: 0em;
        }
        h3+p{
            margin-top: 0.2em;
        }

        /* rest */

        p{
            line-height: 1.4em;
        }
        p:last-child{
            margin-bottom: 0;
        }
        article{
            border-top: solid var(--layout-border-width) var(--border-color);
            margin-bottom: var(--content-margin-bottom);
            margin-left: calc(var(--content-margin-left)*-1);
            padding-left: var(--content-margin-left);
            margin-top: var(--content-margin-top);
            scroll-margin-top: var(--content-margin-bottom);
        }

        address{
            display: inline-block;
            padding: 0.5em 0.8em;
            font-style: normal;
            line-height: 1.5em;
        }


    /* media */
    /* ----- */

        /* IE 10- fix */
        img,
        svg,
        audio,
        canvas,
        progress {
            display: block;
            width: auto;
            max-width: 100%;
            height: auto;
            margin: 0 auto;
            border-style: none;
        }

        img,
        iframe{
            border:none;
        }

        embed,
        object,
        video {
            display: block;
            width: 100%;
            height: auto;
        }
        embed.portrait,
        object.portrait,
        video.portrait {
            height: 70vh;
        }

        .tabs>section,
        .tabs>section>pre{
            max-height: 20rem;
        }

        figure{
        	margin: var(--figure-margin);
        }

        figure img, figure video {
            filter: var(--image-filter);
        }

        article>figure>figcaption{
            opacity: 0.85;
        }

        @media (prefers-reduced-motion: reduce) {
            /* disable animations for accessibility reasons (with tiny duration to keep JS-event listeners intact */
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        @media only screen and (min-width: 769px) {
        	figure{
        		margin: var(--figure-margin-landscape);
        	}
        }

    /* buttons, switches, etc. */
    /* ----------------------- */
        
        /* switch */

        .switch-container>span{
            display: inline;
        }

        .switch-container>div.switch{
            padding: 0;
            display: inline-flex;
            border: solid var(--button-border-width) var(--border-color);
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .switch-container>div.switch:hover,
        .switch-container>div.switch:focus-within{
            box-shadow: 2px 2px var(--focus-color);
        }
        .switch-container>div.switch>label{
            padding: 0.5em;
            display: inline-block;
            /*font-size: 0.8em;*/
            transition-property: background-color, color;
            transition-duration: 0.15s;
            transition-timing-function: ease-in-out;
        }

        .switch-container>div.switch>input[type="radio"]{
            position: absolute;
            /*top: -9999px;*/
            left: -9999px;
        }

        /* active */
        .switch-container>div.switch>input[type="radio"]:checked+label {
            color: var(--background-color);
            background-color: var(--text-color);
            box-shadow: inset 0 0 0 2px var(--background-color);
        }

        button,
        .switch{
            color: var(--background-color);
            background-color: var(--text-color);
            border: solid transparent 0;
            border-radius: var(--interactives-border-width);
            padding: 1.2em;
            justify-self: left;
            font-weight: bold;
            text-transform: uppercase;
            font-size: calc(0.75*var(--font-size));
            font-family: var(--text-font);;
            transition-duration: 0.15s;
            transition-timing-function: ease-in-out;
            transition-property: box-shadow, outline;
            margin-bottom: var(--typography-spacing);
            margin-right: 1em;
            width: auto;
        }
        button:hover{
            box-shadow: 2px 2px var(--focus-color);
        }

        button svg{
            width: unset;
            height: 100%;
            display: inline-block;
            height: 1.5em;
        }
        .switch svg{
            width: unset;
            height: 1.5em;
        }



    /* Visibility */
    /* ---------- */

        /* ### language */

        .DE.disp{
            display: none !important;
        }

        :root[lang="de"] .DE.disp{
            display: unset !important;
        }

        :root[lang="de"] .EN.disp{
            display: none !important;
        }

        :root[lang="de"] .DE.disp.block{
            display: block !important;
        }

        :root[lang="de"] .DE.disp.inline{
            display: inline !important;
        }

        :root[lang="de"] .DE.disp.inline.block{
            display: inline-block !important;
        }


        /* ### JavaScript */

        /* Elements with class `.js-only` are initially disabled and enabled with
           JavaScript. */

        .js-only{
            display: none;
        }

        /* ### content */

        .focus-only, .visually-hidden {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .focus-only:focus{
            position: unset;
            top: unset;
            left: unset;
            background-color: var(--background-color);
            color: unset;
        }

        [hidden]{
        	display: none
        }

/* specific elements */
/* ================= */

    body{
        margin: 0;
    }

    body>div{
        border-left: solid var(--layout-border-width) var(--border-color);
        overflow: auto;
    }

    main{
        margin: var(--content-margin-left);
    }
    #pattern{
        position: absolute;
        width: 100vw;
        height: 3.5rem;
        z-index: -1;
        top: 0;
    }

    footer{
        border-top: solid var(--layout-border-width) var(--border-color);
        margin-top: var(--content-margin-bottom);
        padding-left: 0.5em;
        padding-right: 3em;
        padding-bottom: var(--content-margin-left);
    }
    footer section{
        max-width: 45em;
    }
    footer h3 {
        margin-top: 2em;
    }


    /* landscape */
    @media only screen and (min-width: 769px) {
        html{
            /*font-size: max(min(calc(1vw + 0.52em),2vh),var(--font-size));*/
            font-size: clamp(var(--font-size), calc(1vw + 0.52em), 2vh);
            background-image: var(--bg-pattern);
            background-position-x: 0.6rem;
        }
        body{
            /*border-left: solid var(--layout-border-width) var(--border-color);*/
            /*border-right: solid var(--layout-border-width) var(--border-color);*/
            /*width: calc(100vw - 5rem - 2*var(--layout-border-width));*/
            padding-left: var(--left-margin);
            margin-right: auto;
            min-height: 100vh;
            position: relative;
            /*background-color: var(--background-color);*/
        }
        main{
            max-width: 45em;
        }
        body>div{
            background-color: var(--background-color);
            border-right: solid var(--layout-border-width) var(--border-color);
        }

        #pattern{
            margin-left: calc(var(--left-margin)*-1);
            height: 100%;
        }
    }


    /* navigation bar */
    /* -------------- */

    nav ul{

        /*border-bottom: solid 1px var(--text-color);*/
        padding:0;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        margin-top: 0;
        margin-bottom: 0;
    }

    nav ul li{
        display: inline-block;
        padding: 0;
        /*margin-left: -1px;*/
        background-color: var(--background-color);
        border-top: solid var(--layout-border-width) var(--border-color);
        /*border-right: solid var(--layout-border-width) var(--border-color);*/
        border-left: solid var(--layout-border-width) var(--border-color);
        border-bottom: solid var(--layout-border-width) var(--border-color);
    }

    nav ul li:last-child{
        border-right: 0;
    }

    nav ul li.here{
        /*border-bottom: solid var(--layout-border-width) var(--background-color);*/
        /*margin-bottom: -1px;*/
        border-bottom: 0;
    }

    nav>ul>li>a, 
    nav>ul>li>span{
        display: block;
        padding: 1em;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        text-align: center;
    }

    /* landscape */
    @media only screen and (min-width: 769px) {
        nav ul{
            grid-template-columns: auto auto auto 1fr;
        }
        nav ul::after{
            content: "";
            display: block;
            border-left: solid var(--layout-border-width) var(--border-color);
            border-bottom: solid var(--layout-border-width) var(--border-color);
            /*background-image: var(--bg-pattern);*/
        }
        nav>ul>li>a,
        nav>ul>li>span{
            padding: 1em 3em;
        }
    }

    /* left-margin */
    /* ----------- */

    #left-margin{
        display: none;
    }

    /*#pattern-left{
        display: none;
        position: absolute;
        box-sizing: border-box;
        left: 0;
        top: 0;
        height:  2.4em;
        width: 100vw;
        z-index: -1;
        fill: var(--black-color);
        opacity: 1;
    }

    @keyframes appear{
        from{opacity: 0}
        to{opacity: 1}
    }*/


    /* landscape */
    @media only screen and (min-width: 769px) {
        #left-margin{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: var(--left-margin);
            height: 100%;
            background-image: url(../img/circle.svg);
        }
        /*#pattern-left{
            display: block;
            position: fixed;
            height: 100vh;
            width: var(--left-margin);
        }*/
    }