/* =====================================================
   RESET
===================================================== */

:root{

    --transition:.35s;

    --font:system-ui,sans-serif;

    --card-dark:#3f679d;
    --card-light:#b9dce5;

    --text-dark:#ffffff;
    --text-light:#111111;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;
    overflow-x:hidden;

}

body{
    max-width:100vw;

    width:100%;
    min-height:100vh;

    overflow-x:hidden;

    font-family:var(--font);

    transition:
        background .35s,
        color .35s;

}

/* =====================================================
   BACKGROUND
===================================================== */

.background{

    position:fixed;

    inset:-200px;

    background-repeat:repeat;
    background-size:auto;

    pointer-events:none;

    animation:bgLoop 8s linear infinite alternate;

    transition:opacity .35s ease;

    z-index:-2;

}

.background-light{

    background-image:url("../../images/background/light.png");

}

.background-dark{

    background-image:url("../../images/background/dark.png");

}

body.dark-mode .background-dark{

    opacity:1;

}

body.dark-mode .background-light{

    opacity:0;

}

body.light-mode .background-dark{

    opacity:0;

}

body.light-mode .background-light{

    opacity:1;

}

@keyframes bgLoop{

    from{

        background-position:0 0;

    }

    to{

        background-position:-150px 150px;

    }

}

/* =====================================================
   PAGE
===================================================== */

.page{

    width:100%;
    min-height:100vh;

    display:flex;

    justify-content:center;
    align-items:center;

    padding:40px;

}

/* =====================================================
   ENTRY ANIMATION
===================================================== */

.slide-in{

    opacity:0;

    transform:translateX(80px);

}

.page-loaded .slide-in{

    animation:slideIn .7s cubic-bezier(.2,.9,.3,1) forwards;

}

@keyframes slideIn{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* =====================================================
   CARD
===================================================== */

.card{

    width:min(470px,95vw);

    border-radius:40px;

    padding:38px;

    display:flex;

    flex-direction:column;

    align-items:center;

    backdrop-filter:blur(22px);

    transition:
        background .35s,
        color .35s;

    box-shadow:

        0 20px 60px rgba(0,0,0,.28);

}

body.dark-mode .card{

    background:rgba(63,103,157,.94);

    color:white;

}

body.light-mode .card{

    background:rgba(185,220,229,.95);

    color:#111;

}

/* =====================================================
   PROFILE
===================================================== */

.profile-picture{

    width:135px;
    height:135px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:18px;

    border:6px solid rgba(255,255,255,.12);

}

h1{

    font-size:3rem;

    font-weight:800;

}

.subtitle{

    margin-top:10px;

    margin-bottom:35px;

    opacity:.85;

    font-size:1.05rem;

}

/* =====================================================
   BUTTONS
===================================================== */

.button-list{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.link-button{

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    padding:16px 18px;

    border-radius:22px;

    transition:
        transform .2s,
        background .3s,
        box-shadow .3s;

}

body.dark-mode .link-button{

    background:rgba(255,255,255,.08);

    color:white;

}

body.light-mode .link-button{

    background:rgba(255,255,255,.65);

    color:#111;

}

.link-button:hover{

    transform:translateY(-3px);

}

body.dark-mode .link-button:hover{

    background:rgba(255,255,255,.15);

    box-shadow:0 10px 25px rgba(0,0,0,.25);

}

body.light-mode .link-button:hover{

    background:white;

}

.link-button img{

    width:58px;

    height:58px;

    border-radius:18px;

    object-fit:cover;

    flex-shrink:0;

}

.button-text{

    display:flex;

    flex-direction:column;

}

.button-text .title{

    font-size:1.08rem;

    font-weight:700;

}

.button-text .description{

    margin-top:3px;

    opacity:.7;

    font-size:.9rem;

}

/* =====================================================
   THEME BUTTON
===================================================== */

.theme-toggle{

    position:fixed;

    left:20px;
    bottom:20px;

    width:58px;
    height:58px;

    border:none;
    border-radius:999px;

    cursor:pointer;

    z-index:1000;

    background-repeat:no-repeat;
    background-position:center;
    background-size:55%;

    transition:
        transform .2s ease,
        background-color .35s ease,
        background-image .35s ease,
        box-shadow .35s ease;

}

.theme-toggle:hover{

    transform:translateY(-2px);

}

body.dark-mode .theme-toggle{

    background-color:rgba(255,255,255,.12);

    background-image:url("../images/darklight/light.png");

    box-shadow:0 14px 30px rgba(0,0,0,.35);

}

body.light-mode .theme-toggle{

    background-color:rgba(0,0,0,.08);

    background-image:url("../images/darklight/dark.png");

    box-shadow:0 14px 30px rgba(0,0,0,.15);

}

/* =====================================================
   CARD FADE
===================================================== */

.card,
.link-button,
.profile-picture{

    transition:

        background .35s ease,
        color .35s ease,
        transform .2s ease,
        box-shadow .3s ease;

}

/* =====================================================
   TOP LOGO RESPONSIVE
===================================================== */

.top-logo-link {

    position: fixed;

    top: max(2vh, env(safe-area-inset-top));
    right: max(2vw, env(safe-area-inset-right));

    z-index: 1000;

    width: 20vw;
    max-width: 120px;
    min-width: 55px;

    /* verhindert, dass das Element durch Rundung/Scrollbar über den Rand ragt */
    max-width: min(120px, 20vw, calc(100vw - 20px));

}


.top-logo {

    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;

    transition:
        transform .25s ease,
        filter .25s ease;
}

.top-logo:hover {
    transform:scale(1.08) rotate(3deg);

    filter:drop-shadow(0 15px 25px rgba(0,0,0,.45));
}

/* =====================================================
   MOBILE LOGO
===================================================== */

@media(max-width:640px){

    .top-logo-link {

        top: max(2vh, env(safe-area-inset-top));
        right: max(2vw, env(safe-area-inset-right));

        width: 22vw;
        max-width: min(90px, calc(100vw - 16px));
        min-width: 55px;

    }

}


@media(max-width:380px){

    .top-logo-link {

        width: 20vw;
        max-width: min(70px, calc(100vw - 12px));

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .page{

        padding:20px;

    }

    .card{

        padding:28px;

        border-radius:28px;

    }

    .profile-picture{

        width:110px;
        height:110px;

    }

    h1{

        font-size:2.2rem;

    }

    .subtitle{

        font-size:.95rem;

        margin-bottom:28px;

    }

    .link-button{

        padding:14px;

        gap:14px;

    }

    .link-button img{

        width:50px;
        height:50px;

        border-radius:14px;

    }

    .button-text .title{

        font-size:1rem;

    }

    .button-text .description{

        font-size:.82rem;

    }

}

/* =====================================================
   SMALL PHONES
===================================================== */

@media(max-width:420px){

    .card{

        padding:22px;

    }

    h1{

        font-size:1.9rem;

    }

    .profile-picture{

        width:95px;
        height:95px;

    }

}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    border-radius:999px;

}

body.dark-mode::-webkit-scrollbar-thumb{

    background:#6d88b6;

}

body.light-mode::-webkit-scrollbar-thumb{

    background:#7ca9b8;

}

::-webkit-scrollbar-track{

    background:transparent;

}

/* =====================================================
   MOBILE LOGO FIX
===================================================== */

@media screen and (max-width: 380px) {

    .top-logo {

        width: 65px;

    }

}