/* 
 *  davjzk.de - Stylesheet
 *  2025er Edition
 * (c) Copyright 2025 David Jendreizak
 *  https://www.davjzk.de
*/

@charset "utf-8";

@import url(./fonts.css);
@import url(./spacing.css);

/* Grundeinstellungen */

:root {
    --version: "2025.005";
    --primary-color: #0E0E0E;
    --secondary-color: #ffffff;
    --akzent-color: #20E485;

    --primary-font: ;
    --selection-color: rgb(255, 255, 255);
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    background: var(--primary-color);
    color: var(--secondary-color);
    font-size: clamp(16px, 1.5vw, 20px);
    font-optical-sizing: auto;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    height: 100%;
    scroll-behavior: smooth;

    & body {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        overflow-x: hidden;

        & main p {
            font-weight: 300;
        }

        & aside {
            position: relative;
            border-left: .05em solid rgb(255 255 255 / 10%);
            height: 100%;
            width: 30vw;
            padding: .5em;

            & ul.pills {
                text-decoration: none;
                list-style-type: none;
                margin: 1em 0;
            }

            & ul.pills li {
                display: inline-block;
                padding: .35em 1.5em;
                border-radius: .3em;
                border: .05em solid var(--akzent-color);
                color: var(--akzent-color);
                font-size: .85rem;
                background-color: color-mix(in srgb, var(--akzent-color) 10%, transparent);
                /* NEU: Erstmal beobachten ob überall stabil läuft und unterstützt ist */
            }

            a.btn {
                display: block;
                background-color: var(--akzent-color);
                border-radius: .3em;
                color: var(--primary-color);
                font-weight: 700;
                padding: .5em 1.5em;

                &:hover {
                    background-color: var(--secondary-color);
                    color: var(--primary-color);
                }
            }
        }
    }

    body#bg-akzent {
        background-color: var(--akzent-color);
        color: var(--secondary-color);

        & main {
            min-height: 100vh;
        }

        & ul.breadcrumb {

            & li+li:before {
                padding: .25em;
                color: rgb(255 255 255 / 40%);
                content: "/\00a0";
            }
        }
    }

    & footer {
        padding: 5em 0;

        & h2 {
            text-align: center;
        }

        & .container {
            display: flex;
            justify-content: space-between;
        }
    }

    & a {
        color: var(--secondary-color);
        text-decoration: none;
        font-weight: 300;
        transition:
            transform 0.3s ease-in-out,
            text-underline-offset 0.3s ease-in-out,
            color 0.3s ease-in-out;

        &:hover {
            text-decoration: underline;
            text-decoration-thickness: .1em;
            text-underline-offset: .1em;
            transform: translateY(-.15em);
        }

        &:visited {
            color: var(--secondary-color);
        }

        &:active,
        :focus {
            color: var(--akzent-color);
        }
    }

    & .container {
        max-width: clamp(16rem, 90vw, 92rem);
        margin-inline: auto;
        padding-inline: 1rem;
    }

    & .flex-project-header {
        width: 100vw;
        height: 500px;
        position: relative;
        overflow: hidden;
        margin-left: calc(-50vw + 50%);
        margin-bottom: 5em;
        /* Trick: gleicht zentrierte Container aus */
    }

    & .flex-project-header img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* wie background-size: cover */
        object-position: top;
        display: block;
    }

    & .flex-project {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    & ::selection {
        background: var(--secondary-color);
        color: var(--primary-color);
    }

    & #version::before {
        display: inline-block;
        position: relative;
        content: var(--version);
        opacity: .2;
    }

    & #logo {
        content: url(../images/logo_neg.svg);
        height: 2em;
        width: auto;
        display: block;
        position: relative;
        transition: scale .3s ease-in-out;

        &:hover {
            scale: 1.05;
        }
    }

    & .social-links {
        display: flex;
        justify-content: flex-start;
        margin-top: 5em;

        &.social-links a:first-of-type {
            margin-right: 3em;
        }
    }
}


/* Navigation */

header {
    height: auto;
    padding: 2em 2em;

    & .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    & .flex-start {
        display: flex;
        justify-content: flex-start;
    }

    & ul.breadcrumb {
        padding: .5em 1em;
        list-style: none;

        & li {
            display: inline;
        }

        li+li:before {
            padding: .25em;
            color: rgb(255 255 255 / 10%);
            content: "/\00a0";
        }

        li a {
            color: var(--secondary-color);
            text-decoration: none;
            opacity: .75;
        }

        li:last-of-type a {
            text-decoration: underline;
            opacity: 1;
        }

        li a:hover {
            color: var(--akzent-color);
            text-decoration: underline;
            opacity: 1;
        }
    }
}

/* Typographie */

h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 300;
}

h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
}

h3 {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
}

h4 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h5 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
}

h6 {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
}


/* Animationen */

.animate {
    animation-duration: 0.5s;
    animation-name: fadeMe;
    animation-delay: 0.5s;
    animation-fill-mode: backwards;
}

.animate.pop {
    animation-name: popAnim;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
}

.delay-1 {
    animation-delay: 0.6s;
}

.delay-2 {
    animation-delay: 0.7s;
}

.delay-3 {
    animation-delay: 0.8s;
}

.delay-4 {
    animation-delay: 1.2s;
}

@keyframes float {
    0% {
        top: 0;
    }

    25% {}

    50% {
        top: 1em;
    }

    75% {}

    100% {
        top: 0em;
    }
}

@keyframes navFadeIn {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fadeMe {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popAnim {
    0% {
        opacity: 0;
        transform: scale(0.8, 0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes FadeIn {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}



/* Icons */

/* Alerts */

/* Responsive-Einstellungen */

@media (max-width: 768px) {
    html {
        & .flex-project {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
        }

        & body {
            & main p {
                margin-bottom: 1em;
            }

            & aside {
                width: auto;
            }

        }

    }
}