/**
 * uaplus.css version 0.3.0
 */

@layer {
    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }

    :focus-visible {
        outline-offset: 3px;
    }

    html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;

        line-height: 1.5;
        scrollbar-gutter: stable;
    }

    h1 {
        font-size: 2em;
        margin-block: 0.67em;
    }

    abbr[title] {
        cursor: help;
        text-decoration-line: underline;
        text-decoration-style: dotted;
    }

    @media (forced-colors: active) {
        mark {
            color: HighlightText;
            background-color: Highlight;
        }
    }

    audio,
    iframe,
    img,
    svg,
    video {
        max-block-size: 100%;
        max-inline-size: 100%;
    }

    fieldset {
        min-inline-size: 0;
    }

    label:has(+ input:not([type="radio"], [type="checkbox"]), select, textarea) {
        display: block;
    }

    textarea:not([rows]) {
        min-block-size: 6em;
    }

    button,
    input,
    select,
    textarea {
        font-family: inherit;
        font-size: inherit;
    }

    [type="search"] {
        -webkit-appearance: textfield;
    }

    @supports (-webkit-touch-callout: none) {
        [type="search"] {
            border: 1px solid -apple-system-secondary-label;
            background-color: canvas;
        }
    }

    input:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
        direction: ltr;
    }

    table {
        border-collapse: collapse;
        border: 1px solid;
    }

    th,
    td {
        border: 1px solid;
        padding: 0.25em 0.5em;
        vertical-align: top;
    }

    dialog::backdrop {
        background: oklch(0% 0 0 / 0.3);
    }

    dialog,
    [popover],
    dialog::backdrop {
        opacity: 0;
        transition: opacity 150ms ease-out, display 150ms allow-discrete,
        overlay 150ms allow-discrete;
    }

    dialog[open],
    :popover-open,
    dialog[open]::backdrop {
        opacity: 1;
    }

    @starting-style {
        dialog[open],
        :popover-open,
        dialog[open]::backdrop {
            opacity: 0;
        }
    }

    [hidden]:not([hidden="until-found"]) {
        display: none !important;
    }

    img, video {
        display: block;
        height: auto;
    }

    summary {
        cursor: default;
    }

    iframe {
        border: none;
    }

    @supports(position-area: block-end span-inline-end) {
        [popover] {
            margin: 0;
            position-area: block-end span-inline-end;
        }
    }

    h1, h2, h3, h4, h5, h6{ font-weight: normal; }
    h1, h2, h3, h4, h5, h6, p, ul, ol{  margin: 0; padding: 0; }
}


@font-face {
    font-family: 'Fidel Grotesk';
    src: url("/assets/fidel-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fidel Grotesk';
    src: url("/assets/fidel-fett.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@layer fp{
html{

    --padding: 4vw;

    --nav-btn-size: 3rem;
    --header-height: calc( var( --nav-btn-size ) * ( 77 / 54) + var(--padding) + max( calc( var(--padding) * 1.2 ), 2rem ) );

    --color: #ffff00;

    --multiplier: 0.8;

    --font-size-copy: calc( 18rem / 16 * var( --multiplier ) );
    --font-size-title: calc( 24rem / 16 * var( --multiplier ) );

    --font-size-s: calc( 36rem / 16 * var( --multiplier ) );
    --font-size-m: calc( var( --font-size-s ) * 1.5 );
    --font-size-l: calc( var( --font-size-m ) * 1.5 );
    --font-size-xl: calc( var( --font-size-l ) * 1.5 );
    --font-size-xxl: calc( var( --font-size-xl ) * 1.5 );

    --font-size-nav: calc( 2rem * var( --multiplier ) );
    --font-size-fav: calc( 56rem / 16 * var( --multiplier ) );

    &:has(dialog[open]){
        overflow: hidden;
    }

    @media (max-width: 75rem){
        --padding: 4vw;
    }

    @media (max-width: 64rem){
        --multiplier: 0.7;

        --font-size-s: calc( 24rem / 16 * var( --multiplier ) );
    }

    @media (max-width: 43rem){
        --font-size-xxl: calc( var( --font-size-xl ) * 1.3 );

    }
}

body{
    font-family: 'Fidel Grotesk', sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;

    font-variant-ligatures: none;
}

.font-size-copy{ font-size: var( --font-size-copy ); line-height: 1.55; letter-spacing: 0.01em; }
.font-size-title{ font-size: var( --font-size-title ); line-height: 1.35; }
.font-size-s{ font-size: var( --font-size-s ); line-height: 1.4; }
.font-size-m{ font-size: var( --font-size-m ); line-height: 1.33; }
.font-size-l{ font-size: var( --font-size-l ); line-height: 1.33; }
.font-size-xl{ font-size: var( --font-size-xl ); line-height: 1.33; }
.font-size-xxl{ font-size: var( --font-size-xxl ); line-height: 1.33; }

.font-size-nav{ font-size: var( --font-size-nav ); line-height: 1.56; }
.font-size-fav{ font-size: var( --font-size-fav ); line-height: 1.175; }

a {
    cursor: pointer;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.3em;

    &:link, &:visited, &:hover, &:active{
        color: inherit;
    }

    &.no-underline{
        text-decoration: none;
    }

    &.underline-on-hover{
        text-decoration: none;

        &:hover{
            text-decoration: underline;
        }
    }
}

.text-center{
    text-align: center;
}

strong, .bold{
    font-weight: bold;
}

#skip-to-content-link {
    position: fixed;
    top: 0;

    background: black;
    color: white;
    left: 50%;
    padding: 8px;

    transform: translate(-50%, -150%);
    transition: transform 0.3s;
    z-index: 100;

    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;

    &:focus {
        transform: translate(-50%, 0);
    }
}

.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

button{
    cursor: pointer;
    border-radius: 0;
    background-color: transparent;
    border: none;
}

.nav-btn{
    width: var( --nav-btn-size );
    height: calc( var( --nav-btn-size ) * ( 54 / 77 ) );
    padding: 0;

    svg{
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    &:focus-visible{
        outline: 2px solid black;
    }
}


#hide-nav-btn{
    position: relative;
}

.top-container{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    max-width: 60rem;
}

#main-header{
    padding: var( --padding );
    padding-top: max( calc( var( --padding ) * 1.2 ), 2rem );
}

#main-nav{
    --nav-padding: 2rem;

    @media (max-width: 34rem){
        --nav-padding: 1rem;
    }

    background: var( --color );
    top: calc( var( --nav-padding ) * -1 );
    right: calc( var( --nav-padding ) * -1 );

    height: max-content;
    max-height: calc( 100vh - var( --padding)  );

    overflow-y: auto;
    scrollbar-width: none;
    border: none;
    overscroll-behavior: contain;

    padding: var( --nav-padding );
    padding-bottom: calc( var( --nav-padding ) * 1.3 );

    position-area: span-left span-bottom;

    @supports not (position-area: span-left span-bottom) {
        position-area: none;

        position: fixed;
        top: max( calc( var(--padding) * 1.2 ), 2rem );
        left: calc( 60rem - var( --padding ) + var( --nav-padding ) );
        right: auto;

        translate: -100% calc( var( --nav-padding ) * -1);
        margin: 0;

        @media (max-width: 60rem){
            left: auto;
            right: var( --padding );
            translate: var( --nav-padding ) calc( var( --nav-padding ) * -1);
        }
    }

    #search-form{
        max-width: 22.5rem;
        margin-block: 1lh;
        position: relative;

        input{
            border: none;
            padding: 0.25em;
            padding-right: 2em;

            text-box: trim-both cap alphabetic;
            width: 100%;

            &::placeholder{
                color: currentColor;
            }
        }

        button{
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            padding: 0.2em;

            svg{
                display: initial;
                height: 100%;
                width: auto;
            }
        }
    }

    ul{
        display: flex;
        flex-direction: column;
        gap: 0;
        translate: -0.25em 0;

        @supports (text-box: trim-both cap alphabetic) {
            gap: 0.1em;
        }
    }

    .social-media-portrait{
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1rem;
        align-items: center;

        text-align: center;
        margin-block: 0.7lh;

        .logo-link{
            background: black;
            border-radius: 0.3em;
            padding: 0.25em;
            width: max-content;
            margin-inline: auto;

            svg{
                display: block;
                height: max( 1em, 1.5rem );

                path{
                    fill: white;
                }
            }
        }

        .ig{
            grid-column-start: 3;
        }

        .portrait{
            grid-column-start: 2;
            grid-row-start: 1;

            width: 150px;

            img{
                width: 100%;
            }
        }
    }
}

nav{
    ul{
        list-style-type: "";

        a{
            text-decoration: none;

            padding: 0.05em 0.2em;
            display: block;
            width: max-content;

            @supports (text-box: trim-both cap alphabetic) {
                padding: 0.25em 0.2em;
                text-box: trim-both cap alphabetic;
            }

            border: 2px solid transparent;
            border-radius: 0.3em;
            transition-duration: 0.2s;
            transition-timing-function: ease-out;
            transition-property: border, color, background-color;

            &:hover, &:focus-visible{
                border-color: black;
            }

            &[aria-current='page']{
                border-color: black;
                color: white;
                background: black;
            }
        }
    }
}


#main{
    padding: var( --padding );
    padding-top: 0;

    @media (max-width: 43rem){
        padding-top: 1rem;
    }
}

#main-footer{
    padding: var( --padding );

    .with-bg{
        background-color: var(--color );
        padding: calc( var( --padding ) * 0.7 ) var( --padding );

        @supports (text-box: trim-both cap alphabetic) {
            padding-block: calc( var( --padding ) * 1 ) var( --padding );
        }
    }

    nav{
        ul{
            list-style-type: "";
            display: flex;
            flex-wrap: wrap;
            gap: 0.5ch;
            justify-content: center;
            align-items: baseline;

            @supports (text-box: trim-both cap alphabetic) {
                line-height: 1.35;
            }

            @media (max-width: 43rem){
                row-gap: 0.2ch;
            }
        }
    }

    .copyright{
        margin-top: 1.5lh;
    }

    .legal-nav{
        margin-top: 0.5lh;
    }
}

.project-preview{
    outline: 1em solid transparent;

    transition-property: background, outline;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;

    position: relative;

    & > a{
        position: absolute;
        inset: 0;
    }

    .text-wrapper{
        padding: 1em;
        padding-bottom: 0.5em;
    }

    .title{
        display: inline;

        span{
            font-size: 0.95em;
        }
    }

    &:has(a:hover),
    &:has(a:focus){
        outline: 1em solid var( --color );
        background-color: var( --color );
    }
}

.project-grid{
    --gap: 2rem;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    column-gap: var( --gap );
    row-gap: calc( var( --gap ) * 1.5 );

    align-items: start;
    align-content: start;

    @media (max-width: 43rem){
        --gap: 1.5rem;
    }

    @supports( display: grid-lanes ){
        display: grid-lanes;
        flow-tolerance: 3em;
    }
}

dl{
    margin: 0;

    div{
        display: flex;
        gap: 0.3em;

    }

    dd{
        margin: 0;
    }
}

.teaser{
    margin-top: 0.5em;

    p + p {
        margin-top: 0.75lh;
    }
}

.content-blocks{
    p + p {
        margin-top: 0.75lh;
    }

    .quote-block{
        text-wrap: balance;
        text-wrap: pretty;

        padding: 0;
        margin-block: 3lh;
        text-align: center;


        font-variant-ligatures: common-ligatures;

        &:first-child{
            margin-top: 0;
        }

        .font-size-l,
        .font-size-xl,
        .font-size-xxl{
            letter-spacing: 0;
        }
    }

    .text-block{
        + .text-block{
            margin-top: 1lh;
        }

        ul{
            padding-left: 1em;

            &:not(:first-child){
                margin-top: 0.7lh;
            }

            &:not(:last-child){
                margin-bottom: 1lh;
            }
        }

        h3, h4{
            margin-top: 1lh;
            margin-bottom: 0.2lh;
            font-weight: bold;
        }
    }

    .image-block{
        display: grid;
        gap: 1em;
        --cols: 1;
        grid-template-columns: repeat(var( --cols ), minmax(0, 1fr));

        margin-block: 1lh;

        &:first-child{
            margin-top: 0;
        }

        &[data-cols="2"]{ --cols: 2;}
        &[data-cols="3"]{ --cols: 3;}
        &[data-cols="4"]{
            --cols: 4;

            @media (max-width: 64rem){
                --cols: 2;
            }
        }
        &[data-cols="5"]{
            --cols: 5;

            @media (max-width: 64rem){
                --cols: 2;
            }
        }

        @media (max-width: 43rem){
            --cols: 1!important;
        }

        img, video, picture{
            width: 100%;
        }

        & + p{
            margin-top: 1.5lh;
        }

        p + &{
            margin-top: 1.5lh;
        }
    }
}

blockquote{
    margin-inline: 0;
}

.single-project{

    .project-article{
        display: grid;
        grid-template-columns: 20rem auto;
        grid-template-rows: auto 1fr;

        grid-template-areas:
                "header spalte2"
                "spalte1 spalte2"
                "footer footer";

        gap: var( --padding );


        @media (min-width: 75rem){
            grid-template-columns: 25% auto;
        }

        @media (max-width: 56rem){
            grid-template-columns: 1fr;
            grid-template-rows: initial;
            grid-template-areas: "header" "spalte1" "spalte2" "footer";
        }

        header{
            grid-area: header;

            h1{
                display: inline;
            }
        }

        .spalte{
            @media (max-width: 43rem){
                margin-top: 1rem;
            }
        }

        .spalte1{
            grid-row-start: 2;
            grid-area: spalte1;
        }

        .spalte2{
            grid-row: 1 / span 2;
            grid-column: 2;
            grid-area: spalte2;
        }

        footer{
            grid-area: footer;
            align-items: center;
            gap: 0.5rem;
        }
    }
}

.project-nav{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: baseline;

    .center-element{
        grid-column-start: 2;
        width: 3rem;

        svg{
            display: block;
            height: 99%;
            width: auto;
            overflow: visible;
        }
    }

    .prev-link{ text-align: right; margin-left: auto; }
    .next-link{ grid-column-end: -1; }

    a{
        text-decoration: none;
        line-height: 1;
        width: max-content;

        span{
            padding: 0.05em 0.2em;
            display: inline-block;
            width: max-content;

            @supports (text-box: trim-both cap alphabetic) {
                padding: 0.25em 0.2em;
                text-box: trim-both cap alphabetic;
            }

            border: 2.5px solid transparent;
            border-radius: 0.3em;
            transition-duration: 0.2s;
            transition-timing-function: ease-out;
            transition-property: border, color, background-color;
        }

        &:hover span,
        &:focus span{
            /* border-color: black; */
            background-color: var( --color );
        }
    }
}

.search{
    h1{
        margin-bottom: 1lh;
    }
}

p a{
    &:hover,
    &:focus-visible{
        background-color: var( --color );
    }
}

.imprint{
    article{

        width: 70ch;
        max-width: 100%;
        background-color: var( --color );

        padding: var( --padding );

        h1{
            margin-bottom: 1lh;
        }

        h2{
            margin-block: 1.5lh 1lh;
        }
    }
}

    #intro{
        --top: calc( max( calc( var(--padding) * 1.2 ), 2rem ) + var( --padding ) + ( calc( var(--nav-btn-size) * ( 54 / 77 ) ) ) );

        background: var( --color );
        border: none;
        margin: 0 var(--padding);
        max-width: calc( 100% - var(--padding) * 2 );
        max-height: calc( 100svh - var( --top ) - 2rem );
        overflow: auto;

        top: var( --top );

        font-size: max(2vw, 1rem);
        text-align: center;

        padding: var(--padding);
        padding-top: calc( var(--padding) * 1.2 );
        padding-bottom: calc( var(--padding) * 0.8 );

        @media (max-width: 43rem){
            padding-top: calc( var(--padding) * 1.4 );
            padding-bottom: calc( var(--padding) * 1.2 );
        }

        p + p{
            margin-top: 1lh;
        }

        a{
            text-decoration-thickness: 0.1em;
        }

        button{
            display: block;
        }

        .controls{
            margin-top: .7lh;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;

            .prev,
            .next{
                font-size: 1.4em;
                padding: 0;
                color: currentColor;

                @media (max-width: 43rem){
                    font-size: 1.8em;
                }
            }
        }

        form{
            button{
                border-radius: 0.45rem;
                outline-offset: -1px;
            }
        }

        &::backdrop{
            background: rgba(0, 0, 0, 0);
        }

        &:focus{
            outline: 2px solid var( --color );
            outline-offset: 0;
        }
    }
}