*,
*::before,
*::after {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: "M PLUS Code Latin", monospace;
    font-size: 14px;
    font-weight: 300;
    line-height: 25px;
    color: #000000;
    background: #F5F5F5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;


    .primary-blue-txt {
        color: #2D6FA8;
    }

    /* Typo */

    b, strong {
        font-weight: 400;
    }

    p {
        margin: 0 0 5px 0;
    }

    h1, h2, h3, h4 {
        margin-bottom: 5px;
        font-weight: 400;
    }

    h1 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    h2 {
        font-size: 30px;
        margin-bottom: 50px;
    }

    h3 {

    }

    .subhead {
        font-size: 17px;
        margin-bottom: 20px;
        font-weight: 400;
    }

    .col.entree {
        width: 70%;
        margin-bottom: 20px;
    }

    /* Header */

    .site-header {
        position: fixed;
        top: 0;
        z-index: 1000;
        width: 100%;
        background: rgba(245, 245, 245, 0.80);
        backdrop-filter: saturate(140%) blur(6px);
        padding: 30px;
    }


    .logo {
        max-height: 40px;
    }

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


    .menu {
        display: flex;
        gap: 1rem;
        align-items: center;
        border-radius: 30px;
        background: #FFF;
        font-weight: 400;
        padding: 5px;
    }

    .menu a {
        padding: 3px 10px;
        text-decoration: none;
        border-radius: 30px;
        color: #000000;
    }

    .menu a:hover, .menu a.active {
        background: #2D6FA8;
        color: #ffffff;
    }

    .menu a.active svg, .menu a:hover svg {
        fill: #fff;
    }


    /* Layout */

    .wrap {
        /*max-width: 1920px;*/
        margin-inline: auto;
    }

    section {
        min-height: 100vh;
        max-height: auto;
        display: block;
    }

    .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        min-height: 100vh;
    }

    .col {
        display: flex;
        padding: 3rem;
    }

    .panel {
        width: 100%;
        padding: clamp(1.25rem, 3vw, 1.75rem);
        align-content: center;
    }


    .center-v {
        display: grid;
        place-items: center;
    }

    .media {
        padding: 0;
        overflow: hidden;
    }

    .muted {
        color: #666;
    }


    /* Buttons */

    .btn {
        display: flex;
        border-radius: 5px;
        padding: 5px 20px;
        font-weight: 200;
        text-decoration: none;
        border: none;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-size: 14px;
        transition: 0.3s;
        height: 40px;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .btn object {
        margin: 0 3px;
    }

    .btn--primary {
        background: #2D6FA8;
        color: #fff;
    }

    .btn--primary:hover {
        filter: brightness(.75);
    }


    .actions {
        display: flex;
        gap: .6rem;
        margin-top: .75rem;
        line-height: normal;
    }

    /* Media */

    .col.image {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 14px;
    }

    #entree, #about, #kontakt {
        background: #fff;
    }

    #referenzen, #leistungen, #about {
        text-align: center;
    }

    /* Portrait */


    .col.portrait {
        background-image: url("images/ralf-dinkhoff-portrait.jpg");
    }

    /* Leistungen */

    .col.leistungen {
        background-image: url("images/laptop.jpg");
        background-attachment: fixed;
    }


    .cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }

    .card {
        background: #fff;
        border-radius: 10px;
        padding: 30px;
        text-align: center;
    }

    .card p {
        margin: 0;
    }

    .card object {
        max-width: 45px;
    }


    /* Über mich */

    .col.about {
        background-image: url("images/dinkoff-laptop.jpg");
        background-attachment: fixed;
    }


    #about strong {
        color: #2D6FA8;
    }

    #about p {
        max-width: 80%;
        margin: 0 auto;
    }

    .bullets {
        margin: 30px 0 0;
        padding-left: 0;
    }

    .bullets li {
        margin: .35rem 0;
        list-style: none;
    }

    /* Referenzen */


    .col.referenzen {
        background-image: url("images/pencil.jpg");
        background-attachment: fixed;
    }

    .logos {
        display: flex;
        gap: 1.25rem;
        list-style: none;
        margin: .75rem 0 1rem;
        padding: 20px 40px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 60px;
    }

    .logos img {
        height: 35px;
    }


    .ref-links {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .ref-links h4 {
        color: #2D6FA8;
        text-decoration: underline;
    }


    /* Kontakt */

    #kontakt .actions {
        display: flex;
        flex-direction: column;
        line-height: normal;
    }

    .col.contact {
        background-image: url("images/tastatur.jpg");
        background-attachment: fixed;
    }

    .contactbox {
        display: grid;
        place-items: center;
        text-align: center;
    }

    .avatar {
        width: 255px;
        height: 255px;
        border-radius: 999px;
        object-fit: cover;
        margin-bottom: .5rem;
    }

    .legal {
        margin-top: 50px;
    }

    .legal a {
        color: #4a4a4a;
        text-decoration: underline;
    }


    /* Mobil */
    @media (max-width: 1200px) {

        .site-header {
            padding: 20px 30px;
        }


        section {
            min-height: fit-content;
        }

        .row {
            grid-template-columns: 1fr;
            height: auto;
        }

        .col {
            padding: 2rem;
        }

        .col.image {
            display: none;
        }

        .col.image.portrait {
            display: block;
            min-height: 600px;
        }


    }


    /* Mobil */
    @media (max-width: 630px) {

        .site-header {
            padding: 10px 20px;
        }

        .nav {
            flex-direction: column;
            row-gap: 10px;
        }

        .actions {
            flex-direction: column;
            row-gap: 10px;
        }

        .cards {
            grid-template-columns: 1fr;
        }

    }
}