/*======================================================
  KENOBI69
  STYLE.CSS
  VERSION 6.0
======================================================*/

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Cormorant Garamond',serif;

    color:#F3D37B;

    background:
    radial-gradient(circle at top,
    #332608 0%,
    #181818 45%,
    #050505 100%);

    min-height:100vh;

    overflow-x:hidden;

}

/*==============================
HERO
==============================*/

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    padding:45px 20px;

    isolation:isolate;

}

/*==============================
LICHT IM HINTERGRUND
==============================*/

.hero::before{

    content:"";

    position:absolute;

    width:760px;

    height:760px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,210,90,.22) 0%,

    rgba(255,190,70,.12) 35%,

    rgba(255,180,60,.05) 58%,

    transparent 72%);

    filter:blur(85px);

    animation:

    heroGlow 10s ease-in-out infinite alternate;

    z-index:-2;

}

/*==============================
STERNE
==============================*/

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(circle,#ffffff 1px,transparent 1px),

    radial-gradient(circle,#d7b15d 1px,transparent 1px);

    background-size:

    180px 180px,

    260px 260px;

    background-position:

    0 0,

    90px 120px;

    opacity:.08;

    animation:

    starsMove 90s linear infinite;

    pointer-events:none;

    z-index:-1;

}

/*==============================
HERO BILD
==============================*/

.hero-image{

    width:310px;

    height:310px;

    object-fit:cover;

    border-radius:50%;

    border:3px solid rgba(245,214,120,.92);

    position:relative;

    z-index:5;

    box-shadow:

    0 0 18px rgba(255,210,100,.28),

    0 0 40px rgba(255,210,100,.18),

    0 0 75px rgba(255,210,100,.10);

    animation:

    floatingPortrait 7s ease-in-out infinite;

    transition:

    transform .45s ease,

    box-shadow .45s ease;

}

.hero-image:hover{

    transform:

    scale(1.02);

    box-shadow:

    0 0 22px rgba(255,220,120,.35),

    0 0 55px rgba(255,220,120,.22);

}
/*==============================
ÜBERSCHRIFT
==============================*/

.hero h1{

    position:relative;

    z-index:5;

    margin-top:30px;

    font-family:'Cinzel',serif;

    font-size:2.45rem;

    font-weight:700;

    letter-spacing:2.5px;

    line-height:1.25;

    color:#F5D98A;

    text-shadow:

    0 0 6px rgba(255,220,130,.25),

    0 0 14px rgba(255,200,90,.18);

}

/*==============================
GOLDGLANZ
==============================*/

.hero h1::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent 0%,

        rgba(255,255,255,.65) 50%,

        transparent 100%

    );

    transform:skewX(-25deg);

    animation:

    shineTitle 9s linear infinite;

}

/*==============================
WILLKOMMEN
==============================*/

.welcome{

    position:relative;

    z-index:5;

    margin-top:20px;

    max-width:700px;

    padding:0 20px;

    font-size:1.30rem;

    line-height:1.8;

    color:#E8D7B0;

    letter-spacing:.4px;

    text-shadow:

    0 0 6px rgba(255,220,120,.10);

}

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

.button{

    position:relative;

    z-index:5;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:40px;

    padding:16px 46px;

    border-radius:50px;

    text-decoration:none;

    font-family:'Cinzel',serif;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#2B1B00;

    background:

    linear-gradient(

        180deg,

        #FFF4D0 0%,

        #F2CF73 45%,

        #C88D19 100%

    );

    border:1px solid rgba(255,230,170,.35);

    box-shadow:

    0 8px 22px rgba(0,0,0,.35),

    0 0 20px rgba(255,210,100,.22);

    overflow:hidden;

    transition:

    all .35s ease;

}

/*==============================
BUTTON GLANZ
==============================*/

.button::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:40%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.80),

        transparent

    );

    transform:skewX(-25deg);

    transition:left .8s ease;

}

.button:hover{

    transform:

    translateY(-3px)

    scale(1.02);

    box-shadow:

    0 14px 30px rgba(0,0,0,.40),

    0 0 28px rgba(255,215,120,.35);

}

.button:hover::before{

    left:160%;

}

.button:active{

    transform:scale(.98);

}/*==============================
ANIMATIONEN
==============================*/

@keyframes floatingPortrait{

    0%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(-10px);
    }

    100%{
        transform:
        translateY(0px);
    }

}

@keyframes heroGlow{

    0%{

        transform:
        scale(1);

        opacity:.30;

    }

    100%{

        transform:
        scale(1.08);

        opacity:.45;

    }

}

@keyframes shineTitle{

    0%{

        left:-150%;

    }

    100%{

        left:170%;

    }

}

@keyframes starsMove{

    0%{

        transform:
        translateY(0);

    }

    100%{

        transform:
        translateY(-180px);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(35px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

/*==============================
EINBLENDUNG
==============================*/

.hero-image{

    animation:

    floatingPortrait 7s ease-in-out infinite,

    fadeUp 1.1s ease;

}

.hero h1{

    animation:

    fadeUp 1.5s ease;

}

.welcome{

    animation:

    fadeUp 1.9s ease;

}

.button{

    animation:

    fadeUp 2.3s ease;

}

/*==============================
SANFTE ÜBERGÄNGE
==============================*/

.hero-image,
.hero h1,
.welcome,
.button{

    transition:

    all .35s ease;

}

/*==============================
FOKUS
==============================*/

.button:focus{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(255,214,110,.28),

    0 0 24px rgba(255,214,110,.35);

}

/*==============================
TEXTMARKIERUNG
==============================*/

::selection{

    background:#D5A33A;

    color:#111;

}

::-moz-selection{

    background:#D5A33A;

    color:#111;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#101010;

}

::-webkit-scrollbar-thumb{

    background:

    linear-gradient(

    #D9B25C,

    #8E651A);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:

    linear-gradient(

    #F0D488,

    #B27D21);

}
/*==============================
RESPONSIVE
==============================*/

@media (max-width:1200px){

.hero-image{

    width:290px;
    height:290px;

}

.hero h1{

    font-size:2.25rem;

}

.welcome{

    font-size:1.22rem;

}

}

@media (max-width:992px){

.hero{

    padding:40px 20px;

}

.hero-image{

    width:260px;
    height:260px;

}

.hero h1{

    margin-top:28px;

    font-size:2rem;

    letter-spacing:2px;

}

.welcome{

    margin-top:18px;

    font-size:1.15rem;

    max-width:600px;

}

.button{

    margin-top:35px;

    padding:15px 40px;

}

}

@media (max-width:768px){

.hero{

    padding:35px 18px;

}

.hero::before{

    width:580px;
    height:580px;

}

.hero-image{

    width:220px;
    height:220px;

}

.hero h1{

    font-size:1.75rem;

    line-height:1.35;

}

.welcome{

    font-size:1.05rem;

    line-height:1.7;

    padding:0 10px;

}

.button{

    font-size:.90rem;

    padding:14px 34px;

}

}

@media (max-width:480px){

.hero{

    padding:25px 15px;

}

.hero::before{

    width:420px;
    height:420px;

}

.hero-image{

    width:180px;
    height:180px;

}

.hero h1{

    margin-top:24px;

    font-size:1.45rem;

    letter-spacing:1px;

}

.welcome{

    margin-top:16px;

    font-size:.95rem;

    line-height:1.6;

}

.button{

    margin-top:30px;

    width:240px;

    max-width:90%;

    padding:13px 20px;

    font-size:.85rem;

}

}

/*==============================
DESKTOP HÖHE
Verhindert Scrollbalken
==============================*/

@media (min-width:992px) and (min-height:700px){

.hero{

    min-height:100svh;

    padding-top:35px;

    padding-bottom:35px;

}

}

/*==============================
ENDE
==============================*/