* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'KK-Topo', 'NewEdge666', Helvetica, Arial, sans-serif;
    /* font-family: 'DeFonte', sans-serif;s */
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 0.8;
}
@font-face {
    font-family: KK-Topo;
    src: url('/assets/fonts/KK-Topo-Regular.ttf');
}
@font-face {
    font-family: NewEdge666;
    src: url('/assets/fonts/NewEdge666-RegularRounded.otf');
}
@font-face {
    font-family: Arial-Rounded;
    src: url('/assets/fonts/Arial-Rounded-MT-Regular.ttf');
}
@font-face {
    font-family: PP-Mori;
    src: url('/assets/fonts/PPMori-SemiBold.otf');
}
@font-face {
    font-family: DeFonte;
    src: url('/assets/fonts/DeFonte\ reduced\ Normale.ttf');
}
.material-symbols-rounded {
    font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 24
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
/* Fabrvariablen */
:root {
    --colorTxt: #5C1730;
    --colorBg: #DEE8AD;
    --accent: #F08BF8;

    --neue1: #5C1730;
    --neue2: #EC622A;
    --neue3: #DEE8AD;
    --neue4: #7E81F4;
    --neue5: #F08BF8;
}
*::selection {
    color: var(--colorBg);
    background-color: var(--colorTxt);
}
html, body {
    background-color: var(--neue5);
    color: var(--colorTxt);
    min-height: 100vh;
    width: 100%;
    scrollbar-width: none;
    }
    nav {
        display: flex;
        z-index: 3;
        position: fixed;
        height: auto;
        background-color: var(--neue3);
        border-bottom: 1px solid var(--colorTxt);
        }
        .navContainer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: relative;
            width: 100%;
            margin: 0.25rem;
        }
        .navItem {
            display: flex !important;
            align-items: center;
            justify-content: center;
            z-index: 2;
            height: 100%;
            padding: clamp(0.7rem, 1.5vw, 1rem);
            border-radius: 34px;
            transition: scale 0.3s;
            user-select: none;
            cursor: pointer;
            /* font-family: 'KK-Topo', sans-serif;  */
        }

        /* .siteCategory:nth-child(2) { color: var(--neue4); }
        .siteCategory:nth-child(3) { color: var(--neue2); }
        .siteCategory:nth-child(4) { color: var(--neue5); }
        .siteCategory:nth-child(5) { color: var(--sceme4); } */

        .navIndicator {
            display: flex;
            z-index: 1;
            position: absolute;
            background-color: var(--neue5);
            transition: scale 0.3s;
            border: 1px solid var(--neue5);
            /* box-shadow: inset 10px 10px 10px var(--colorBg); */
        }
        .hover {
            cursor: pointer;
            transition: 0.3s all ease;
        }
        .hover:hover {
            scale: 0.95;
            color: var(--colorTxt);
        }

        header {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            }
            .header_name {
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 3;
                position: absolute;
            }
            .header_lastname {
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 0;
                position: absolute;
                margin-left: 0.25rem;
            }
        

    main {
        margin-top: clamp(53px, 7.5vw, 76px);
        /* min-height: calc(100vh - (2 * clamp(45px, 6.5vw, 68px)) - 0.5rem); */
        min-height: 100vh;
        opacity: 0;
        position: relative;
        overflow: hidden;
        transition: height 0.5s cubic-bezier(.77,0,.18,1);
        }
        @media only screen and (max-width: 600px) {
            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                background-color: var(--colorBg);
            }
            .content {
                display: grid;
                grid-template-columns: 1fr;
                padding: 0.25rem;
                min-height: 100vh;
                /* gap: 0.5rem; */
            }
        }
        @media only screen and (min-width: 601px) {
            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                background-color: var(--colorBg);
            }
            .content {
                display: grid;
                grid-template-columns: 2fr 50%;
                padding: 0.25rem;
                min-height: 100vh;
                /* gap: 0.5rem; */
            }
        }
        .page:nth-child(1) {
            z-index: 5;
        }
        .page:nth-child(2) {
            z-index: 4;
        }
        .page:nth-child(3) {
            z-index: 3;
        }
        .page:nth-child(4) {
            z-index: 2;
        }
        .page:nth-child(5) {
            z-index: 1;
        }

/* Seiten nebeneinander absolut positionieren */
/* .page.content {
    transition: left 0.5s cubic-bezier(.77,0,.18,1), opacity 0.5s, scale 0.5s;
} */
       

        .modal {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 10;
            position: fixed !important;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            background-color: var(--colorTxt);
            overflow: hidden;
            }
            .modal img, .modal video {
                height: calc(100% - 2 * (clamp(0.7rem, 1.5vw, 1rem)));
                width: calc(100% - 2 * (clamp(0.7rem, 1.5vw, 1rem)));
                object-fit: contain;
            }
            .modal .controls {
                position: absolute;
                bottom: 0;
                width: calc(100% - 2 * (clamp(0.7rem, 1.5vw, 1rem)));
                margin: clamp(0.7rem, 1.5vw, 1rem);
            }
            .modal .close-modal {
                position: absolute;
                height: 3rem;
                width: 3rem;
                top: 0.25rem;
                right: 0.25rem;
                background-color: transparent;
                border: none;
                color: var(--colorBg);
                font-size: clamp(2rem, 2vw, 5rem);
            }

    footer {
        display: flex;
        position: relative;
        height: clamp(53px, 7.5vw, 76px);
        }
        .footerContainer {
            display: flex;
            flex-direction: column;
            z-index: 5;
            background-color: var(--neue5);
            height: clamp(53px, 7.5vw, 76px);
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            overflow: scroll;
            scrollbar-width: none;
            border-top: 1px solid var(--colorTxt);
        }
        .footerItem {
            display: flex;
            align-items: center;
            height: clamp(53px, 7.5vw, 76px);
            position: absolute;
            padding: 0.25rem;
        }
        .footerItem:nth-child(1) {
            top: 0;
            left: 0;
        font-size: clamp(0.9rem, 2vw, 1.1rem);
        }
        .footerItem:nth-child(2) {
            top: 0;
            right: 0;
        font-size: clamp(0.9rem, 2vw, 1.1rem);
        }
        .footerContent {
            display: none;
            margin-top: clamp(53px, 7.5vw, 76px);
            padding: 0.25rem;
            flex-direction: column;
        }