/* ============================================= */
/* ============== 1. CSS-Reset & Font Load ================ */
/* ============================================= */

* {
    box-sizing: border-box;
}

/* Reset default browser styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button {
    all: unset; /* Entfernt alle Standard-Styles
    background: none; /* Optional: Entfernt den backgroundarea */
    border: none; /* Optional: Entfernt den Rand */
    padding: 0; /* Optional: Entfernt Innenabstand */
    font: inherit; /* Optional: Erbt die Schriftart vom übergeordneten Element */
    color: inherit; /* Optional: Erbt die Textfarbe */
    cursor: pointer; /* Stellt sicher, dass der Button immer einen klickbaren Cursor hat */
}


/* @import url(reset.css); */

@font-face {
  font-family: NunitoSans;
  src: url(/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf);
    font-weight: 100 900;
    font-display: auto;
}

@font-face {
  font-family: SourceSans3;
  src: url(/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf);
  font-weight: 200 900;
  font-stretch: normal;
  font-display: auto;
}

/* ============================================= */
/* ====== 2. Globale Variablen & Utilities ===== */
/* ============================================= */

:root {

    /* Spacing */
    --spacing-xxs: 0.1875rem;
    --spacing-xs: 0.25rem;
    --spacing-s: 0.5rem;
    --spacing-m: 1rem;
    --spacing-l: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 4rem;

    /* Border radius */
    --btn-border-radius-default: 1.5rem;
    --border-radius-xxs: 0.0625rem; 
    --border-radius-xs: 0.125rem;
    --border-radius-s: 0.25rem;
    --border-radius-m: 0.325rem;

    /* Colors */
    --primary-100-color: #1790e1cf;
    --primary-200-color: hsl(307, 60%, 57%);
    --primary-300-color: #eda81e;
    --primary-400-color: #0fd49c;
    --semantic-100-color: #45a24e;
    --semantic-200-color: #c57723;
    --semantic-300-color: #be3c3c;
    --primary-color: var(--primary-100-color); /* Changes to primary color variations depending on body class - see beow root scope */

    /* --primary-gradient: linear-gradient(180deg, #00bfff 0%, #3fc1f9 27.88%, #00bbff 44.23%, hsl(203, 100%, 45%) 100%); */
    --neutral-000-color: #ffffff;
    --neutral-050-color: #b2b2b2;
    --neutral-100-color: #919191;
    --neutral-200-color: #5f5f5f;
    --neutral-250-color: #6a6a6a;
    --neutral-300-color: #393939;

    /* Font families */
    --font-primary: 'NunitoSans', helvetica, arial, sans-serif;
    --font-secondary: 'SourceSans3', helvetica, arial, sans-serif;

    /* Type Scale */
    --display-lg-size: 2.75rem;
    --display-lg-weight: 800;
    --display-lg-line-height: 1.6;
    --display-lg-letter-spacing: 0.025em;

    --display-md-size: 1.25rem;
    --display-md-weight: 800;
    --display-md-line-height: 1.6;
    --display-md-letter-spacing: 0.025em;

    --h1-size: 2.75rem;
    --h1-weight: 400;
    --h1-line-height: 1;
    --h1-letter-spacing: -0.01em;

    --hsub-size: 0.99rem;
    --hsub-weight: 680;
    --hsub-line-height: 1.6;
    --hsub-letter-spacing: -0.02em;

    --h2-size: 3.8rem;
    --h2-weight: 700;
    --h2-line-height: 1.6;
    --h2-letter-spacing: -0.015em;
    --h2-text-rendering: "optimizeLegibility";

    --h3-size: 1.1rem;
    --h3-weight: 600;
    --h3-line-height: 1.6;
    --h3-letter-spacing: 0.03em;

    --h4-size: 1.07rem;
    --h4-weight: 500;
    --h4-line-height: 1.6;
    --h4-letter-spacing: 0.03em;

    --h5-size: 1.05rem;
    --h5-weight: 500;
    --h5-line-height: 1.6;
    --h5-letter-spacing: 0.03em;

    --h6-size: 1.03rem;
    --h6-weight: 500;
    --h6-line-height: 1.6;
    --h6-letter-spacing: 0.03em;

    --body-xl-size: 1.02rem;
    --body-xl-weight: 400;
    --body-xl-line-height: 1.6;
    --body-xl-letter-spacing: 0.03em;

    --body-size: 1rem;
    --body-weight: 400;
    --body-line-height: 1.6;
    --body-letter-spacing: 0.03em;
    --body-text-rendering: "optimizeLegibility";

    --body-sm-size: 0.875rem;
    --body-sm-weight: 400;
    --body-sm-line-height: 1.45;
    --body-sm-letter-spacing: 0.03em;

    --caption-lg-size: 0.97rem;
    --caption-lg-weight: 400;
    --caption-lg-line-height: 1.65;
    --caption-lg-letter-spacing: 0.03em;

    --caption-size: 0.75rem;
    --caption-weight: 200;
    --caption-line-height: 1.65;
    --caption-letter-spacing: 0.03em;

    --caption-sm-size: 0.94rem;
    --caption-sm-weight: 300;
    --caption-sm-line-height: 1.65;
    --caption-sm-letter-spacing: 0.03em;

    --overline-size: 0.92rem;
    --overline-weight: 500;
    --overline-line-height: 1.65;
    --overline-letter-spacing: 0.03em;

    --bright-gradient: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(213 213 230) 88%);
    /* --dark-gradient: radial-gradient(circle, #131313 0%, #333335 88%) 50%; */
    --dark-gradient: radial-gradient(circle, #202020 0%, #111111 88%) 50%;
    --shadow-bright: drop-shadow(0px 1px 2px #b1b1b1);
    --shadow-dark: drop-shadow(0px 1px 4px #000000);  
    
    --artwork-shadow: var(--shadow-bright);
    --background-bright-color: rgba(255,250,255,0.25);
    --background-dark-color: rgba(255,255,255,0.03);
    --btn-height-default: 2.5rem;
    --btn-height-mobile: 2.75rem;

    /* Tokens */
    --font-body-color: var(--neutral-250-color);
    --page-background: var(--bright-gradient);
    --mainframe-background-color: var(--background-bright-color);
    --progressbar-height: var(--spacing-m);
    --btn-height: var(--btn-height-default);
    --btn-font-size-default: var(--body-size);
    --nav-subcategories-gap: var(--spacing-xs);
    --nav-subcategories-tab-height: var(--btn-height-default);
}
/* Mainnavi enlargement for startpage */
#startpage {
    /* padding: var(--spacing-l); */

    font-size: calc(pow(1,0.1) * 3vw);

    @media (max-width: 768px) {
        font-size: 130%;
    }
    .colortab__rectangle{
        height: calc(var(--hsub-size)*0.8);
    }
    .colortab__label{
        height: fit-content;
    }
    .headline-1{
        height: auto;
        color: var(--font-body-color);
        font-variation-settings: "wght" 200;
    }
    .mainnavi, .mainnavi__tabgroup{
        width: auto;
        height: auto;
        padding-bottom: 5.5vh;
    }

    .footer-nav{
        display: inline-flex;
        & ul{
            flex-direction: row;

        }
        padding-bottom: var(--spacing-m);
        font-size: 16px;
    }
}

 /* Coloring depending on maincategory class in body tag */
body.grahics{
    --primary-color: var(--primary-100-color);
}

body.photo{
    --primary-color: var(--primary-200-color);
}

body.film{
    --primary-color: var(--primary-300-color);
}

body.\33 d-graphics{
    --primary-color: var(--primary-400-color);
}

body.contact, body.impressum {
    --primary-color: var(--semantic-100-color);
}

/* Calculates the buttons gradient color values on the base of the primary color override  before */
body {
  --step-1: color-mix(in srgb, var(--primary-color), white 10%);
  --step-2: color-mix(in srgb, var(--primary-color), black 2%);
  --step-3: color-mix(in srgb, var(--primary-color), black 15%);

  --primary-gradient: linear-gradient(
    180deg,
    var(--primary-color) 0%,
    var(--step-1) 27.88%,
    var(--step-2) 44.23%,
    var(--step-3) 100%
  );
}

/* Mainnavi */
.mainnavi{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    justify-content: center;
    gap: calc(var(--spacing-xs)/2);
    width: 202px;
    height: 76px;
    & a{
        text-decoration: none;
    }
}

.mainnavi__tabgroup{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xxs);
    /* width: 202px; */
    height: 30px;
    overflow: hidden;
    object-fit: contain;
    justify-content: center;
}

.mainnavi__colortab{
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-xxs));
}

.colortab__rectangle{
    display: inline-block;
    /* height: calc(var(--spacing-xs)*3); */
    height: 12px;
    width: 100%;
    background-color: var(--neutral-100-color);
    border-radius: var(--border-radius-xxs);
}

.colortab__label{
    font-family: var(--headline-2);
    text-decoration: none;
    font-family: var(--font-secondary);
    font-size: var(--hsub-size);
    text-transform: uppercase;
    letter-spacing: var(--hsub-letter-spacing);
    font-variation-settings: "wght" var(--hsub-weight),"wdth" 10;
    white-space: nowrap;
}

.mainnavi__colortab.grafiktab{
    /* width: 49px; */
    color: var(--neutral-300-color);
    & .colortab__rectangle{
        background-color: var(--neutral-300-color);
    }
}

.mainnavi__colortab.fototab{
    /* width: 36px; */
    color: var(--neutral-250-color);
    & .colortab__rectangle{
        background-color: var(--neutral-200-color);
    }
}

.mainnavi__colortab.filmtab{
    /* width: 32px; */
    color: var(--neutral-100-color);
    & .colortab__rectangle{
        background-color: var(--neutral-100-color);
    }
}

.mainnavi__colortab.cgrafiktab{
    /* width: 72px; */
    color: var(--neutral-050-color);
    & .colortab__rectangle{
        background-color: var(--neutral-050-color);
    }
}           

/* .graphics .mainnavi__colortab.grafiktab, .photo .mainnavi__colortab.fototab, .film .mainnavi__colortab.filmtab, .\33 d-graphics .mainnavi__colortab.cgrafiktab { */
.mainnavi__colortab.markcolored{
    color: var(--primary-color);
    & .colortab__rectangle{
        background-color: var(--primary-color);
    }
}

.mainnavi__colortab {
    /* Grafik Tab */
    &.grafiktab:hover {
        color: var(--primary-100-color);
        & .colortab__rectangle {
            background-color: var(--primary-100-color);
        }
    }

    /* Foto Tab */
    &.fototab:hover {
        color: var(--primary-200-color);
        & .colortab__rectangle {
            background-color: var(--primary-200-color);
        }
    }

    /* Film Tab */
    &.filmtab:hover {
        color: var(--primary-300-color);
        & .colortab__rectangle {
            background-color: var(--primary-300-color);
        }
    }

    /* C-Grafik Tab */
    &.cgrafiktab:hover {
        color: var(--primary-400-color);
        & .colortab__rectangle {
            background-color: var(--primary-400-color);
        }
    }
}


/* ============================================= */
/* ========== 3. Layout & Struktur =========== */
/* ============================================= */

/* * {
    box-sizing: content-box;
} */

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
	margin:0;
	width:100%;
	font-family: var(--font-primary);
    color: var(--font-body-color);
	font-weight:var(--body-weight);
    letter-spacing: var(--body-letter-spacing);
    background: var(--page-background);
	background-position:center;
    transition: all 1s;
}

#mainframe {
	position: relative;
    border-radius: var(--spacing-m);
    background: var(--mainframe-background-color);
    box-shadow: 0 5px 30px rgba(101, 107, 110, 0.2);
}

.grid {
    display:grid;
    box-sizing: border-box;
    width:88vw;
    width:88dvw;
    height: 82vh;
    height: 82dvh;
    grid-template-columns: 200px 1fr 160px;
    grid-template-rows: min-content 1fr min-content min-content;
    gap: 4% var(--spacing-xxl);
    padding: 2.7% 3.5% 3.1% 3.5%;
    border: none;
    overflow: hidden;
    transition: box-shadow .8s cubic-bezier(0.4, 0, 0.2, 1), background-color cubic-bezier(0.4, 0, 0.2, 1);
}

.grid {
    &.grid--imprint-dataprotection, &.grid--contact {
        /* display: grid;
        grid-template-columns: min-content minmax(auto, 1fr);
        grid-template-rows: min-content 1fr;
        gap: var(--spacing-l) var(--spacing-xxl);
        font-weight: var(--body-weight); */

        @media (max-width: 1024px) {
            row-gap: var(--spacing-xxl);
            height: fit-content !important;
            grid-column: revert;
            grid-template-rows: 1fr;
            .wordmark.wordmark--bodycolor {
                justify-self: center;
                font-size: calc(var(--hsub-size) * 2);
                grid-column: 1 / 2;
                .contact__wordmark {
                    grid-row: 2 / 3;
                }
            }
        }
        .imprint,
        .data-protection {
            display: flex;
            gap: var(--spacing-l);
            flex-direction: column;
            justify-items: flex-end;
            align-self: flex-end;
            max-height: 100%;
        }
        /* --- Block: Imprint --- */
        .imprint-footer, .contact-footer {
            @media (max-width: 1024px) {
                align-self: center;
                flex-direction: column-reverse;
                gap: var(--spacing-l);
                .adress, .footer-nav{
                    grid-area: 4 / 1 / 5 / 2;
                    
                }
                .imprint__wordmark {
                    grid-area: 3 / 1 / 4 / 2;
                }
            } 
            .imprint, .imprint + .wordmak {
                grid-column: 1 / 2;
                grid-row: 1 / 3;

                @media (max-width: 1024px) {
                    grid-column: 1 / 3;
                    grid-row: 2 / 3;
                    width: max-content;
                    /* flex-direction: column-reverse; */
                    justify-self: center;
                    text-align: center;
                }
            }

            /* .imprint__infos {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-s);
            } */

            .address, .imprint__headline {
                line-height: var(--body-sm-line-height);
                padding-bottom: var(--spacing-s);
                grid-area: 3 / 1 / 4 / 2;
                justify-self: flex-end;
                align-self: flex-end;
                
                @media (max-width: 1024px) {
                    text-align: center;
                    text-justify: inter-word;
                    -webkit-hyphens: auto;
                    -ms-hyphens: auto;
                    hyphens: auto;
                }
            }
        }

        .imprint__wordmark {
            @media (max-width: 1024px) {
                justify-self: center;
                font-size: calc(var(--hsub-size) * 2);
            }
        }
        /* --- Block: Data-Protection --- */
        .data-protection {
            grid-row: 4 / 5;
        }
        .data-protection, .contact-form {
            grid-column: 2 / 3;
            grid-row: 1 / 5;
            max-width: 100ch;
            align-self: flex-end;

            @media (max-width: 1024px) {
                grid-column: 1 / 3;
                grid-row: 4 / 5;
                flex-direction: column-reverse;
                justify-self: center;
            }

            .contact-form__wrapper {
                align-items: center;
                height: 100%;
                justify-content: flex-start;
            }

            /* Contact form */
            .modal {
                border-radius: var(--spacing-m);
                max-width: 60ch;
                header {
                    padding-bottom: var(--spacing-l);
                }

            }

            .honeypot-field { 
                position: absolute; 
                left: -9999px; 
                top: -9999px; 
                width: 1px; 
                height: 1px; 
                overflow: hidden; 
            }
            .close-button { 
                position: absolute; 
                top: 18px; right: 18px; 
                width: 38px; height: 38px; 
                border: none; border-radius: 50%; 
                background: rgba(0,0,0,0.08); 
                color: #000; font-size: 1.35rem; 
                cursor: pointer; 
            }
            .close-button:hover { 
                background: rgba(0,0,0,0.14); 
            }
            label {
                position: relative;
                top: -(var(--spacing-xs));
                display: block; 
                margin-bottom: var(--spacing-xs);
                font-weight: 600; 
            }
            input, textarea {
                width: 100%;
                padding: var(--spacing-s); 
                margin-bottom: 16px; 
                border: 1px solid #ccc; 
                border-radius: var(--border-radius-m);
                font-size: var(--body-size);
                opacity: 0.8;
            }

            textarea { 
                min-height: 150px; resize: vertical;
                font-family: var(--font-primary);
            }

            button[type="submit"]{
                border-radius: var(--border-radius-m);
                @media screen and (max-width: 1024px){
                    max-width: 100%;
                    justify-self: center;
                }
            }
            .message { 
                margin-bottom: 18px; 
                padding: 14px 18px; 
                border-radius: 8px; 
            }
            .message.error { 
                background: #ffe5e5; color: #8b0000; 
            }
            .message.success { 
                background: #e9f9e9; 
                color: #0b6623; 
            }
            .message ul { 
                margin: 8px 0 0; 
                padding-left: 20px; 
            }
            .small-note {
                margin-top: var(--spacing-m);
                font-size: var(--body-sm-size);
                @media (max-width: 1024px) {
                    justify-self: center;
                }
            }

            /* Data protection */

            .data-protection__headline {
                padding-bottom: var(--spacing-s);
                font-weight: 800;
                font-size: 1.25rem;
                break-after: avoid;
            }

            .data-protection-infos{
                font-size: var(--body-sm-size);
                font-weight: var(--body-sm-weight);
                line-height: var(--body-sm-line-height);
                letter-spacing: var(--body-sm-letter-spacing);
            }

            .data-protection__term{ 
                font-weight: var(--h2-weight);
                line-height: var(--subtitle-line-height);
                letter-spacing: var(--h4-letter-spacing);
                padding-bottom: var(--spacing-s);
                break-after: avoid;
            }

            .data-protection__definition {
                padding-bottom: var(--spacing-l);

            }

            .data-protection-intro{
                font-weight: var(--weight-900);
            }

            .data-protection__infos, .contact-form__wrapper {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-s);
                line-height: var(--body-sm-line-height);
                overflow-y: auto;

                .data-protection__intro{
                    font-weight: var(--body-sm-weight);

                }
                .data-protection__list{
                    column-count: auto;
                    padding-top: var(--spacing-m);
                    column-gap: var(--spacing-xl);
                    overflow-y: auto;
                }
            }
        }
    }

        /* Mobile Anpassungen für Text-Elemente über BEM-Klassen */
        @media (max-width: 1024px) {
            .data-protection__headline, 
            .data-protection__intro, 
            .data-protection__term {
                justify-self: center;
                text-align: center;
            }

            .data-protection__definition {
                justify-self: center;
                text-align: justify;
                text-justify: inter-word;
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;  
            }
        }

        .data-protection__footer {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-self: flex-end;
            @media (max-width: 1024px) {
                align-self: center;
            }   
        }

        .data-protection__wordmark {
            @media (max-width: 1024px) {
                justify-self: center;
                font-size: calc(var(--hsub-size) * 2);
            }
        }
    }
/* } */

.header {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-content: center;
    align-items: center;
    overflow: visible;
} 


/* Subnavi */
.nav-subcategories {
    display: flex;
    flex-direction: column;
    gap: var(--nav-subcategories-gap);
    justify-content: flex-start;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    overflow: visible;
    .nav-subcategories__tab{
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        height: var(--nav-subcategories-tab-height);
        border-radius: var(--border-radius-xs);
        background: var(--primary-gradient);
        left: 0px;
        padding-left: var(--spacing-m);
        padding-right: var(--spacing-m);
        gap: var(--spacing-s);
        justify-content: flex-start;
        font-size: var(--hsub-size);
        font-weight: 600;
        color: var(--neutral-000-color);
        text-align: left;
        text-decoration: none;
        cursor:pointer;
        alignment-baseline: alphabetic;
    }
    :not(:hover) .nav-subcategories__number{
        /* display: none; */
        opacity: 0;
        font-weight: var(--caption-weight);
        transition: opacity 1.3s ease-in-out;
    }
    .markCurrentSection {
        .nav-subcategories__number{
                    /* display: inline-flex;      */
                    opacity: 1;
                    font-weight: 500;
                    transition: opacity 1s ease-in-out;
        } 
        flex-direction: row-reverse;
    }
    .nav-subcategories__number{
        display: inline-flex;
        font-size: var(--caption-size);
        alignment-baseline: alphabetic;
        font-weight: var(--caption-weight);
    }
    .nav-subcategories__number{
        transition: opacity 0.3s ease;
    }
}



.artwork {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

figure {
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

img, video{ 
    max-width: 100%;
    height: fit-content;
    max-height: 100%;
    object-fit: contain;
    /* overflow: hidden; */
}

video {
        image-rendering: -webkit-optimize-contrast;
}

svg {
  shape-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
}

.custom-controls{
    position:absolute;
    z-index: 10;
    bottom: 5rem;
    display: none;
    flex-direction: row;
    gap: var(--spacing-m);
    align-items: center;
    justify-items: center;
    margin-top: -2rem;
    background: rgb(0, 0, 0);
    padding:  var(--spacing-m) var(--spacing-l);
    color: var(--neutral-000-color);
    border-radius: var(--btn-border-radius-default);
    opacity: 0.8;
    #volumeBar{
        min-width: 3rem;
    }
    .btn-play .fa.fa-caret-left{
        display: none;
    }
}

.custom-controls__volume{
    display: inline-flex;
    flex-direction: row;
    gap: var(--spacing-m);
    border-right: 1px solid var(--neutral-200-color);
    padding-right: var(--spacing-m);
}

/* Fullscreeen Rules */
.ios-fullscreen-fallback {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: var(--page-background);
}

/* Hide the 'Exit' icon by default */
#fullscreen-close-icon {
  display: none;
}

/* When the wrapper is fullscreen... */
:fullscreen, .ios-fullscreen-fallback {
    background: var(--page-background);
    /* When the wrapper is fullscreen... */
    #fullscreen-close-icon {
    display: block;
    }
    /* ...and hide the 'Enter' icon */
    #fullscreen-open-icon  {
    display: none;
    }
    #btn-play{
        display: none;
    }
}

video:not([poster*="causelmann"])~ .custom-controls .custom-controls__volume{
    display: none;
}

input[type='range']::-webkit-slider-thumb {
	appearance: none;
	background-color: cornflowerblue;
	border: 2px solid #0d9624;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  background: orange;
  border: 2px solid var(--me-highlight);
  width: 30px;
  height: 30px;
  border-radius: 15px;
  cursor: pointer;
}

.artwork iframe {
    width: 100%;
    max-width: 100%;
    max-height: 100%;

}

.aside {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
    display: inline-flex;
    flex-direction: column;
    justify-items: flex-start;
    /* box-sizing: content-box;
    padding-bottom: 15%; */
    transition: height ease 0.2s;
    align-self: center;
}

.aside .info-txt::after {
    position: relative;
    display: inline-block;
    content: "";
    height: 0;
    width: 100%;
}

.controls {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    justify-content: center;
    align-items: flex-end;
    -ms-flex-direction: row;
}

footer {
    display: contents;
    justify-self: center;
    /* gap: var(--spacing-l);
    grid-template-columns: subgrid;
    grid-template-rows: subgrid; */
}

footer .wordmark {
    grid-row: 4 / 5;
}

@media (min-width: 1024px) {
    footer .footer-nav {
        grid-row: 3 / 4;
    }
}

@media (min-width:1280px) and (max-height: 860px) {
    body:not(.impressum):not(.contact) {
        footer .footer-nav {
            grid-row: 4 / 5;
            grid-column: 3 / 4;
            justify-self: flex-start;
        }
    }
}

@media (pointer: coarse) {
    .nav-subcategories, .btn-default {
        --btn-height: var(--btn-height-mobile);
        --nav-subcategories-tab-height: var(--btn-height-mobile);
    }
    .custom-controls{
        height: 3rem;
    }   
}
/* --- Breakpoint 1280 --- */
@media all and (max-width: 1280px) {

    #mainframe {
        padding: var(--spacing-xl) calc(var(--spacing-s) * 6);
    }

    .grid {
        width: 92dvw;
        height: 88dvh;
        grid-template-columns: min-content 1fr;
        gap: var(--spacing-xl) var(--spacing-xl);
    }

    .nav-subcategories {
        display: none !important;
        /* position: fixed; */
        justify-content:top;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 1;
        width: max-content;
        height: 0;
        overflow: hidden !important;
    }

    .nav-subcategories--showmobile {
        display: flex !important;
        align-items: center;
        justify-self: center;
        z-index: 100;
        margin-top: 5.25rem;
        height: calc-size(max-content, size);
        overflow: hidden;
        animation: rollout 1s ease-in-out forwards;
        > * {
            width: 180px;
        } ~ .aside{
            display: none;
        }
    }

    .nav-subcategories--hidemobile {
        /* display: none !important; */
        align-items: center;
        justify-self: center;
        z-index: 100;
        margin-top: 5.25rem;
        overflow: hidden;
        animation: rollout-hide 0.5s ease-in-out forwards;
    } 

    @keyframes rollout-hide {
        0% {
            transform: translateY(0%);
            opacity: 1;
            height: 330px;
        }
        100% {
            transform: translateY(-100%);
            opacity: 0;
            height: 0px;
        }
    }

    @keyframes rollout {
        0% {
            transform: translateY(-100%);
            opacity: 0;
            height: 0px;
        }
        100% {
            transform: translateY(0%);
            opacity: 1;
            height: 330px;
        }
    }

    /* footer {
        display: flex;
        flex-direction: column;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 5;
        align-items: flex-start;
        overflow: hidden;
        position: absolute;
        bottom: 0px;
    } */

    .artwork {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 4;
        #videoStage + .btn-play  {
            padding: var(--spacing-m);
        }
        /* align-self:  center; */
    }

    /* figure {
        display: flex;
        flex-direction: column;
        justify-items: center;
        justify-content: center;
        align-items: center;
        > img { 
            max-width: 100%;
            height: auto;   
        }
    } */

    .aside {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
        min-height: 0;
        max-height: 100%;
        overflow-y: auto;
        -webkit-mask-image: linear-gradient(180deg, black 88%, transparent);
        mask-image: linear-gradient(180deg, black 88%, transparent);
    }

   /* #info_txt{
        max-width: 100% !important;
        text-align: left;
    } */



    /* .controls {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
    } */
}

/* --- Breakpoint Height 841  --- */
/* @media all and (max-height: 841px) {
    #mainframe{
        height: 88dvh;
    }
    .nav-subcategories .nav-subcategories__tab{
        height: var(--btn-height-default);
    }
} */

/* --- Breakpoint 1024  --- */
@media all and (max-width: 1024px){
    :root{
        --progressbar-height: var(--spacing-s);
    }

    #color-theme-switch{
        top: var(--progressbar-height) !important;
        right: 0px !important;
        width: 2rem !important;
        border-radius: var(--border-radius-s);
    }

    #mainframe {
        border: none;
        width: 100vw;
        width: 100dvw;
        width:100vw;
        height: 100dvh;
        padding: var(--spacing-l);
        border-radius: 0;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr;
        /* grid-template-rows: max-content min-content auto min-content var(--spacing-xl); */
        grid-template-rows: min-content 6fr minmax(4ch, 3fr) min-content min-content;
        row-gap: var(--spacing-l);
        column-gap: 0;
        padding: var(--spacing-l) var(--spacing-l);
        box-sizing: border-box;
    }

    .header {
        grid-column-start: 1;
        grid-column-end: 3;
        align-items: center;
        justify-self: center;
        position: sticky;
        top: 0;
    }

    .nav-subcategories {
        display: none !important;
        justify-content:top;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 1;
        width: max-content;
        height: 0;
    } 

    .nav-subcategories--showmobile {
        display: flex !important;
        align-items: center;
        justify-self: center;
        z-index: 100;
        overflow: hidden;
        animation: rollout 1s ease-in-out forwards;
        > * {
            width: 180px;
        }
    }

    .nav-subcategories--hidemobile {
        align-items: center;
        justify-self: center;
        z-index: 100;
        overflow: hidden;
        animation: rollout-hide 1s ease-in-out forwards;
    } 

    .artwork {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        /* height: 40dvh;
        @media screen and (min-aspect-ratio: 2/3) {
            height: 60dvh;
        } */
    }

    figure {
        display: flex;
        flex-direction: column;
        justify-items: center;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        > img { 
            max-width: 100%;
            height: auto;   
        }
    }

    .aside {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
        justify-self: center;
        align-self: flex-start;
    }

   .info-txt{
        font-size: var(--body-sm-size);
        max-width: 50ch;
        gap: var(--spacing-s);
        align-items: center;
        justify-content: flex-start !important;
        * {
            text-align: center;
        }
        .info-txt__project{
            gap: var(--spacing-s);
            .info-txt__tools > * {
                display: inline;
            }
            /* .info-txt__project__description {
                min-height: 0;
                max-height: 100%;
                overflow-y: auto;
                -webkit-mask-image: linear-gradient(180deg, black 88%, transparent);
                mask-image: linear-gradient(180deg, black 88%, transparent);
            } */
        }
    }

    .info-txt__tools > * {
        display: inline;
    }

    .info_txt__counter{
        justify-content: center;
    }

    footer {
        font-size: var(--body-sm-size);
        .wordmark:not(.wordmark--bodycolor) {
            display: none;
        }
        .footer-nav {
            display: inline-flex;
            align-self: flex-end;
            justify-self: center;
        }
        .footer-nav__link.link-contact {
            display: none;
        }
    }

    .controls {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 4;
        grid-row-end: 5;
        align-self: flex-end;
    }
}

/* Asset custom size corrections */
/* img[src*="logo"]{
    shape-rendering: geometricPrecision;
    max-width: 80%;
    height: 85%;
} */


/* ============================================= */
/* ========== 4. Typografie & Links & Icons ========== */
/* ============================================= */
.body{
    font-family: 'NunitoSans', helvetica, arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--neutral-200-color);
    line-height: 1.5;
    letter-spacing: 0.01rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

.headline-1 {
    /* width: 202px; */
    height: 44px;
    font-family: var(--font-secondary);
    font-size: var(--h1-size);
    font-variation-settings: "wght" 200, "wdth" 83;
    text-transform: uppercase;
    color: var(--font-body-color);
    font-kerning: auto;
    letter-spacing: var(--h1-letter-spacing);
    margin-left: -0.1rem;
}

.wordmark {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: var(--font-secondary);
    font-size: var(--h2-size);
    text-transform: uppercase;
    color: var(--primary-color);
    letter-spacing: var(--h2-letter-spacing);
    font-variation-settings: "wght" var(--h2-weight),"wdth" 10;
    /* font-kerning: auto; */
    text-rendering: var(--h2-text-rendering);
    line-height: 75% !important;
    vertical-align: text-bottom;
    /* text-edge: cap;
    leading-trim: both; */
}

.wordmark.wordmark--bodycolor {
    color: var(--font-body-color);
}

.\33 d-graphics .wordmark, .wordmark.wordmark--bodycolor {
        font-size: var(--h1-size);
        text-wrap: nowrap;
}

.headline-3 {
    font-family: 'NunitoSans', helvetica, arial, sans-serif;
    font-size: var(--h3-size);
    font-variation-settings: "wght" 700, "wdth" 95;
    /* text-transform: uppercase; */
    color: var(--font-body-color);
    font-kerning: auto;
    line-height: 1.3;
}

.headline-4 {
    font-size: 1rem;
    font-kerning: auto;
    line-height: 1.3;
    color: var(--primary-color);
    font-variant-ligatures: common-ligatures;
    padding-bottom: var(--spacing-xs);
}

.info-txt__tools{
    color: var(--primary-color);
}

.info-txt__tools__title{
    text-wrap: nowrap;
    padding-bottom: var(--spacing-xs);
    font-weight: 640;
}

/* .category-txt img {
    display: none;
} */

*:focus-visible {
    outline: 0.2rem solid var(--neutral-100-color);
    outline-offset: 0.15rem;
    z-index: 10;
}
.fa{
    width: calc((var(--body-size))*1.5);
    height: calc((var(--body-size))*1.5);
    background-color: var(--primary-color);
    display: inline-flexbox;
}

/* DARKMODE */
body {
    /* Transitions colors, backgrounds, and filters */
    transition: background 0.8s ease, color 0.8s ease, filter 0.8s ease;
}

.dark-mode{
    --font-body-color: var(--neutral-050-color);
    --page-background: var(--dark-gradient);
    --mainframe-background-color: var(--background-dark-color);
    --artwork-shadow: var(--shadow-dark);

    #mainframe{
        box-shadow:  0 5px 30px #00000050;
        transition: box-shadow .8s cubic-bezier(0.4, 0, 0.2, 1), background-color cubic-bezier(0.4, 0, 0.2, 1);
    }
    .info-txt, .headline-3, .headline-1, .link-contact {
        filter: brightness(1.08);
        transition: filter 0.8s ease;
        .info_txt__counter__item-number{
            color: var(--neutral-000-color);
        }
    }
    .mainnavi__colortab:not(:hover):not(.markcolored){
        .colortab__rectangle, .colortab__label{
                filter: invert(100%) brightness(1.4);
        }
    }

    #color-theme-switch{
        filter: invert(100%) brightness(1.4);
        transition: filter 0.2s;
        &:hover{
            filter: invert(0);
        }
    }
    .markcolored{
        .colortab__rectangle, .colortab__label{
            filter:none;
        }
    }
    .btn-default{
        box-shadow: 0 1px 4px rgb(20, 20, 20);
    }
}

/* ============================================= */
/* ======= 5. Komponenten & BEM-Styles ======== */
/* ============================================= */

/* Buttons */
button:hover, .stdBtn:hover, div.grafiklink:hover, div.fotolink:hover, div.cglink:hover, div.filmlink:hover {
    background-blend-mode: darken;
    filter: saturate(0.8);
}
/* Button default */
.btn-default {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.25rem;
    min-width: 6rem;
    height: var(--btn-height);
    padding: 0 var(--spacing-l);
    font-size: var(--btn-font-size-default);
    color: var(--neutral-000-color);
    border: none;
    border-radius: var(--btn-border-radius-default);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background: var(--primary-gradient);
    box-shadow: #817f7f9e 0px 1px 3px;
}

.btn-default__label {
    display: flex;
    align-items: center;
    font-variation-settings: "wght" 700, "wdth" 83;
    line-height: 1.2;
    letter-spacing: 0.01rem;
    line-height: 0.5rem;
}

/* Buttons for next and back controls */
.btn-back {
    border-radius: 2px;
    border-top-left-radius: var(--btn-border-radius-default);
    border-bottom-left-radius: var(--btn-border-radius-default);
    padding-left: 0.75rem;
}

.btn-back .btn-default__label::before {
    display: flex;
    content: url('/assets/ui-icons/arrow-left-med-icon.svg');
    font-size: 0.8rem;
    margin-left: 0.2rem;
    color:#ffffff;
    transition: 0.3s;
}
@media (hover: hover) {
    .btn-back:hover .btn-default__label::before {
        position: relative;
        display: inline-block;
        content: url('/assets/ui-icons/arrow-left-med-active-icon.svg');
        left: -0.35rem;
        font-size: 0.8rem;
        margin-left: 0.2rem;
        color:#ffffff;
        transition: 50ms ease-in-out;
    }
}

@media (hover: none) {
    .btn-back:hover .btn-default__label::before {
        position: relative;
        display: inline-block;
        content: url('/assets/ui-icons/arrow-left-med-active-icon.svg');
        left: -0.35rem;
        font-size: 0.8rem;
        margin-left: 0.2rem;
        color:#ffffff;
        transition: ease-in-out;
    }
}

.btn-next:last-child {
    border-radius: 2px;
    border-top-right-radius: var(--btn-border-radius-default);
    border-bottom-right-radius: var(--btn-border-radius-default);
    padding-right: 0.75rem;
}

.btn-next .btn-default__label::after {
    display: flex;
    content: url('/assets/ui-icons/arrow-right-med-icon.svg');
    font-size: 0.8rem;
    margin-left: 0.2rem;
    color:#ffffff;
}
@media (hover: hover) {
    .btn-next:hover .btn-default__label::after {
        position: relative;
        display: inline-block;
        content: url('/assets/ui-icons/arrow-right-med-active-icon.svg');
        left: 0rem;
        font-size: 0.8rem;
        margin-left: 0.2rem;
        color:#ffffff;
    }
}

@media (hover: none) {
    .btn-next:active .btn-default__label::after {
        position: relative;
        display: inline-block;
        content: url('/assets/ui-icons/arrow-right-med-active-icon.svg');
        left: 0rem;
        font-size: 0.8rem;
        margin-left: 0.2rem;
        color:#ffffff;
    }
}

.btn-default:hover, .nav-subcategories__tab:hover {
    color: #fff;
    text-decoration: none;
    filter: saturate(120%);
    cursor: pointer;
    left:6px;
    animation: balkenAni 0.2s 1 ease-in-out;
}

body:not(.impressum) .progressbar{
    position: absolute;
    z-index: 2;
    top: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: var(--progressbar-height);
    width: 100%;
    justify-self: center;
    background-color: var(--neutral-050-color);
    .progress{
        width: 2%;
        height: 100%;
        background-color: var(--primary-color);
    }
}


/* Video Control Buttons */
.btn-play{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* padding: 1rem; */
    gap: var(--spacing-xxs);
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 600;
    &:hover{
        filter: saturate(140%);
    }
}

#videoStage + .btn-play{
    padding: var(--spacing-m) var(--spacing-m);
}

#videoStage .btn-play .fa{
    /* Targets the icon and the text label */
    background-color: var(--neutral-000-color);
}

#videoStage .btn-play svg,
#videoStage .btn-play svg path {
    /* Ensures SVGs use the variable for filling */
    fill: var(--neutral-000-color);
}

.fa-play, .fa-caret-right, #btn-play .fa-caret-left{
    mask-image: url("/assets/ui-icons/play-arrow-right-icon.svg");
}

.fa-pause{
    mask-image: url("/assets/ui-icons/play-pause-icon.svg");
}

.fa-caret-left {
    mask-image: url("/assets/ui-icons/play-arrow-left-icon.svg");
}

#btn-play  .fa-caret-right{
    display: none;
}

#videoStage .btn-play__label{
    display: none;
}



/* Links */

.footer-nav {
    ul {
        display: inline-flex;
        flex-direction: column;

        li {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1em;
        }
    }

    .footer-nav__link {
        display: inline-flex;
        color: var(--font-body-color);
        text-decoration: none;
        padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0 ;
        /* padding-right: var(--spacing-l); */
        align-items: baseline;
    }

    .footer-nav__link:hover {
        filter: saturate(120%);
        color: var(--primary-color);
    }

    .footer-nav__link::before {
        display: inline-flex;
        content: "";
        height: 0.75em;
        width: 0.75em;
        background-color: var(--primary-color);
        margin-right: var(--spacing-s);
    }
}

.impressum .footer-nav__link::before{
    background-color: var(--neutral-250-color);
}

/* Info-Text */
.info-txt {
    display: flex !important;
    flex-direction: column;
    gap: var(--spacing-m);
    text-align: left;
	letter-spacing: 1.6%;
	line-height:1.4;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.info-txt__project {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.info_txt__counter{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xxs);
    .info_txt__counter__item-number{
        font-weight: var(--body-weight);
        color: var(--neutral-300-color);
    }
    .info_txt__counter__item-amount, .info_txt__counter__divider{
        color: var(--neutral-100-color);
    }
}
.markCurrentSection {
    text-align:  right;
    left:6px !important;
    /* padding-right: 12px; */
}

@keyframes balkenAni {
    0% {
        left: 0;
    }
    100% {
        left:6px;
    }
}

.btn-color-theme {
	position:absolute;
	top: 0;
	right: 0;
	cursor:pointer;
    width: 2.25rem;
    padding: 0;
    border-radius: var(--border-radius-m);
    &:hover{
        filter: invert(100%) brightness(1.4);
    }
}

.u-animate-softblend-from-top, figure {
    opacity: 100%;
    /* height: 100%; */
    /* object-fit: contain; */
    /* mask-image: linear-gradient(180deg, black 100%, transparent);
    -webkit-mask-image: linear-gradient(180deg, black 100%, transparent); */
    filter: blur(0px);
    animation: softblend-from-top-animation 0.7s 1 ease-in-out;
}

@keyframes softblend-from-top-animation {
        0% {
            opacity: 0;
            -webkit-mask-image: linear-gradient(180deg, black 0%, transparent);
            filter: blur(8px);
            /* linear-gradient: (90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); */
        }     
        100% {
            opacity: 100%;
            webkit-mask-image: linear-gradient(180deg, black 100%, transparent);
            /* linear-gradient: (180deg, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 58%, rgba(0,0,0,1) 100%); */
            /* linear-gradient: (90deg, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%); */
            filter: blur(0px);
        }      
}

/*==================================================
 * Effects
 * ===============================================*/


 video[poster*="flavor"] {
  /* Pfad zur Alpha-Maske (z.B. PNG oder WebP) */
  mask-image: url('/assets/graphics/flavor-fusion-landingpage.webp');
  -webkit-mask-image: url('/assets/graphics/flavor-fusion-landingpage.webp'); /* Für Safari-Kompatibilität */
  
  /* Verhindert das Kacheln der Maske */
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  
  /* Passt die Maskengröße an das Video an */
  mask-size: cover;
  -webkit-mask-size: cover;
    /* scale: 1.1; */
}

 video[poster*="kaffee"] {
  /* Pfad zur Alpha-Maske (z.B. PNG oder WebP) */
  mask-image: url('/assets/graphics/kaffeedorfshop.webp');
  -webkit-mask-image: url('/assets/graphics/kaffeedorfshop.webp'); /* Für Safari-Kompatibilität */
  
  /* Verhindert das Kacheln der Maske */
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  
  /* Passt die Maskengröße an das Video an */
  mask-size: cover;
  -webkit-mask-size: cover;
  /* scale: 1.1; */
}

body #artwork.artwork:has(img:not([src*="logo" i]):not([src*="icon" i])), video {
    /* Applies shadow only if the container holds actual artwork */
    filter: var(--artwork-shadow);

    & img:not([src*="logo" i]):not([src*="icon" i]) {
        /* Rounds corners only for non-logo and non-icon images */
        border-radius: var(--border-radius-s);
    }
}

/* Bildspezifische Effekte */
.ecoso-iPhone::after {
    content: url(Inhalte/Grafikdesign/banner-startpage-iPhone-Animation.png);
    font-size: 58px;
    display: block;
    position: absolute;
    width: 16.37%;
    height: auto;
    top: 45%;
    right: 17.5%;
    z-index: 5;
    transform: rotate(3deg) scale(1);
    filter: drop-shadow(0.2vw 0.6vw 0.2vw #b7b7b7);
    /*filter: drop-shadow(0.2vw 0.1vw 0.6vw #aaa);*/
    animation: rotateAnimation 10s 1;
}

    @keyframes rotateAnimation {
      0% {
        transform: rotate(1deg) scale(0.85);
        filter: drop-shadow(0.2vw 0.6vw 0.3vw #aaa);
      }
      50% {
        transform: rotate(5deg) scale(1);
        filter: drop-shadow(0.3vw 0.1.2vw 1.5vw #bbb);
      }
      80% {
        transform: rotate(3deg) scale(0.98);
        filter: drop-shadow(0.2vw 1.2vw 0.4vw #ababab);
      }
      1000% {
        transform: rotate(3deg) scale(1);
        filter: drop-shadow(0.2vw 0.6vw 0.3vw #b7b7b7);
      }
}