/* ===========================================================
   Grundeinstellungen
=========================================================== */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


/* ===========================================================
   Variablen
=========================================================== */

:root{

    --gold:#D6BE8A;
    --gold-light:#E6D7B2;

    --text-opacity:0.88;

    --ticker-width:21vw;

    --content-left:11vw;

    --content-top:-4vh;

}


/* ===========================================================
   Body
=========================================================== */

body{

    overflow:hidden;

    width:100vw;
    height:100vh;

    font-family:"Cormorant Garamond", serif;

    background:#000;

    color:var(--gold);

}


/* ===========================================================
   Haupttext
=========================================================== */

.hidden{

    opacity:0;

    transform:translateY(20px);

}


.visible{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity 2s ease,
        transform 2s ease;

}


/* ===========================================================
   Hintergrund
=========================================================== */

#background{

    position:fixed;

    inset:0;

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

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:-20;

}


/* ===========================================================
   Hauptbereich
=========================================================== */

#content{

    position:relative;

    z-index:60;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    width:100vw;
    height:100vh;

    padding-left:var(--content-left);

    transform:translateY(var(--content-top));

}


/* ===========================================================
   Willkommen
=========================================================== */

#welcome{

    width:55vw;

    text-align:center;

}


#welcome h1{

    font-family:"Cinzel", serif;

    font-size:clamp(64px,6vw,120px);

    font-weight:500;

    letter-spacing:8px;

    color:rgba(214,190,138,.92);

    text-shadow:
        2px 2px 8px rgba(0,0,0,.65);

}


.divider{

    width:220px;

    height:2px;

    margin:35px auto;

    background:rgba(214,190,138,.70);

}


#welcome h2{

    margin-top:10px;

    font-size:clamp(26px,2vw,42px);

    font-weight:300;

    color:rgba(230,215,178,.88);

}


#welcome p{

    margin-top:30px;

    font-size:clamp(22px,1.5vw,30px);

    line-height:1.8;

    color:rgba(230,215,178,.82);

}


/* ===========================================================
   Ticker
=========================================================== */

#ticker{

    position:fixed;

    top:0;
    right:0;

    width:var(--ticker-width);

    height:100vh;

    overflow:hidden;

    z-index:90;

    background:
        linear-gradient(
            to left,
            rgba(0,0,0,.28),
            rgba(0,0,0,.10),
            rgba(0,0,0,0)
        );

    opacity:0;

    transition:opacity 5s ease;

}


#ticker.active{

    opacity:1;

}


#ticker.fade-out{

    opacity:0;

}


/* ===========================================================
   Ticker-Fenster
=========================================================== */

#ticker-inner{

    position:absolute;

    inset:0;

    overflow:hidden;

}


/* ===========================================================
   Ticker-Inhalt
=========================================================== */

#ticker-content{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    text-align:center;

    color:rgba(214,190,138,.74);

    font-size:clamp(18px,1.25vw,26px);

    line-height:2.1;

    will-change:transform;

}


/* ===========================================================
   Ticker-Gruppe
=========================================================== */

.ticker-set{

    width:74%;

    margin:0 auto;

}


#ticker-content p{

    margin-bottom:28px;

}


/* ===========================================================
   Vorhang
=========================================================== */

#curtain{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    pointer-events:none;

    overflow:hidden;

    z-index:80;

}


/* ===========================================================
   Vorhanghälften
=========================================================== */

.curtain-half{

    position:absolute;

    top:0;

    width:50%;
    height:100%;

    overflow:hidden;

    transition:
        transform 3s ease-in-out;

}


/* ===========================================================
   Linke Hälfte – geöffnet
=========================================================== */

.curtain-left{

    left:0;

    transform:translateX(-100%);

}


/* ===========================================================
   Rechte Hälfte – geöffnet
=========================================================== */

.curtain-right{

    right:0;

    transform:translateX(100%);

}


/* ===========================================================
   Vorhangbilder
=========================================================== */

.curtain-half img{

    position:absolute;

    top:0;

    width:200%;
    height:100%;

    object-fit:cover;

    display:block;

}


.curtain-left img{

    left:0;

}


.curtain-right img{

    right:0;

}


/* ===========================================================
   Vorhang schließen
=========================================================== */

#curtain.close .curtain-left{

    transform:translateX(0);

}


#curtain.close .curtain-right{

    transform:translateX(0);

}


/* ===========================================================
   Vorhang ausblenden
=========================================================== */

#curtain.fade-out{

    opacity:0;

    transition:
        opacity 3s ease;

}


/* ===========================================================
   Schlussbild
=========================================================== */

#ending{

    position:fixed;

    inset:0;

    background:#000;

    z-index:40;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:
        opacity 3s ease;

    pointer-events:none;

}


#ending.visible{

    opacity:1;

}


#ending-text{

    max-width:70vw;

    text-align:center;

    font-family:"Cormorant Garamond", serif;

    font-size:clamp(28px,2.5vw,48px);

    color:rgba(214,190,138,.9);

    letter-spacing:2px;

}


/* ===========================================================
   Responsive
=========================================================== */

@media(max-width:1000px){

    :root{

        --ticker-width:28vw;

        --content-left:6vw;

    }


    #welcome{

        width:62vw;

    }

}


@media(max-width:700px){

    :root{

        --ticker-width:34vw;

        --content-left:4vw;

    }


    #welcome{

        width:60vw;

    }


    #welcome h1{

        letter-spacing:4px;

    }

}