/*Gælder for ALT*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
 
}
                              /*Fonts*/
@font-face{
    font-family: 'Higuen Elegant';
    src: url(fonts/Higuen\ Serif.otf) format('truetype');
}

@font-face {
    font-family: 'InterBold';
    src: url(fonts/Inter_18pt-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'InterRegular';
    src: url(fonts/Inter_18pt-Regular.ttf) format('truetype'); 
}

@font-face{
    font-family: 'Cinzelbold';
    src: url(fonts/CinzelDecorative-Bold.ttf) format('truetype');
}
@font-face{
    font-family: 'cinzelregular';
    src: url(fonts/CinzelDecorative-Regular.ttf)format('truetype');
}

                       /*Generelle regler for tekst*/
p{
    font-family: 'Interregular', sans-serif;
    font-size: 15px;
}

h2{
    font-family:'InterBold';
    font-size: 1.2rem;
}

h1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 1%;
    width: 100%;
    font-family: 'cinzelbold';
}
h3{
    font-family: 'InterBold';
    font-size: 15px;
}

        /*gentagende billeder*/
.bue img{
    width: 100%;
    margin-top: 10%;
    margin-bottom: 1%;
}



body{
    background-color: #fffaf2; /*Baggrundfarve på alle sider*/
}




                            /*Forside*/

.forsidevideo{
    top: 10px;
    height: 30vh; /*Position relative*/  /*Position, absolute til knapper*/
}
#forsidebillede section{
    display: none;
}


.overskrift {
    margin-top: 5rem;
    font-weight: bold;
    width: 100%;
}

.overskrift section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem; 
}

.overskrift section div {
    flex: 1;
    text-align: center;
}

.overskrift a {
    color: #000000;
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1.5;
    font-family: 'cinzelbold';
    position: relative;
    transition: 0.3s ease;
}

.overskrift a:hover{
    color: #0603aa;
}


.overskrift a::after {/* Hover-stregen under links */
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.overskrift a:hover::after {/* Hovereffekt: glider ind */
    transform: scaleX(1);
}

.anmeldelser{
    display: flex;
    width: 95%;
    flex-direction: row;
    justify-content: space-between;
    background-color: #e2f6fb;
    margin-left: 2rem;    
    margin-right: 2rem;
    margin-top: 5rem;
}

.anmeldelser img{
    width: 35%;
}

.anmeldelser div h2, .anmeldelser div p{
    margin-top: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    width: 65%;
    padding-left: 2rem;
}

.anmeldelser div h2{
    font-size: 1.5rem;
}

.anmeldelser div{
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.pilhøjre img{
    padding-top: 12rem;
    padding-left: 20px;
    padding-right: 10px;
    width: 70%;
}

/*Typer indeling på Gode Dryp*/
#typer{
    width: 90%;
    display: flex;
    padding-top: 10%;
    padding-bottom: 10%;
    justify-content: space-between;
    align-items: center;
    margin: 5%;
}

#typer div h2{
    font-size: 1.5rem;
    text-align: center;
    flex-direction: column;
}
#typer p{
    text-align: center;
    width: 80%;
}

#typer div{
    display: flex;
    width: 90%;
    align-items: center;
    justify-content: space-between;
    gap: 5%; 
}

.typerafsnit{
    flex-direction: column;
    justify-content: center;
}

#typer img{
    width: 70%;
    justify-content: center;
    align-items: center;
    margin-left: 15%;
    
}

#typer .knap{ /*Se vin - knap*/     
    padding-top: 10%;
    justify-content: center;
    text-align: center;
}


                     /*50/50 - Afsnit til alle undersider*/
.fittyfittyhero{  /*Herobilleder*/
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
}


.fittyfittyhero img{
    width: 100%;
}

.fittyfittyhero section{
    display: flex;
    width: 50%;
}

        /*ALLE fittyfitty afsnit*/   /*Først de enkeltes regler, derefter fællesregler */
.ff{
    background-image: url(imagesweb/lysbølge3.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 7rem;
    padding-top: 7%;
    margin-top: 3rem;
}

.ff section{
    padding-top: 2%;
    padding-bottom: 4%;
    padding-left: 5%;
    width: 40%;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* ← Centrerer indhold horisontalt */
}
.ff3{ /*Quiz afsnit*/
    display: flex;
    width: 90%;
    background-image: url(imagesweb/quizbølge.webp);
    background-repeat: no-repeat;
    background-size: contain; /*Hele elipsen kan ses*/
    padding-bottom: 7rem;
    padding-top: 5%;
    margin-top: 3rem;
    margin-left: 6rem;
    margin-bottom: 10%;
}

.ff3 section{
    width: 80%;
    padding-top: 3%;
    padding-left: 15%;
    justify-content: center;
    text-align: center;
}
.ff3 div{
    justify-content: center;
    align-items: center;
    margin-right: 12rem;
    padding-top: 8%;
}

.ff3 section h2{
    font-family: 'cinzelBold';
}

.ff11{
    background-image: url(imagesweb/lysbølge2.webp); /*lysbølge2 er lidt større end lysbølge3*/
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 7rem;
    padding-top: 9%;
    margin-top: 3rem;
}

.ff2{
    background-image: url(imagesweb/elipsebeigeforsøg4.webp); /*Mørk beige bølge*/
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 5%;
    padding-bottom: 8rem;
    margin-top: 6rem;
}

.ffgrøn{
    background-color: #e6f2e7;
    margin-top: 10%;
    width: 100%;
    display: flex;
    padding-bottom: 5%;
}

.ffbrun{
    background-color: #c9b8a4;
    margin-top:10%;
    width: 100%;
    display: flex;
    padding-bottom: 5%;
}

.ffblå, .ffblå2{ /*ffblå2 = Blåt afsnit med knap*/
    background-color: #e2f6fb;
    margin-top:10%;
    width: 100%;
    display: flex;
    padding-bottom: 5%;
}

.ffblå2 div img{
    width: 100%;
    margin-top: 15%;
    margin-bottom: 10%;
    padding-right: 10%;
    padding-left: 10%;
}

.ffbrun2{
    background-color: #c9b8a4;
    margin-top: 10%;
    width: 100%;
    display: flex;
}

.ffblå3{ /*2 kolloner blåt afsnit*/
    background-color: #e2f6fb;
    margin-top:10%;
    width: 100%;
    display: flex;
    padding-bottom: 5%;
}

.ffgrøn2{ /*2 kolonner grønt afsnit*/
    background-color: #e6f2e7;
    margin-top:10%;
    width: 100%;
    display: flex;
    padding-bottom: 5%;
}

.ffsie{
    background-image: url(imagesweb/elipsebeigeforsøg4.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 7rem;
    padding-top: 7%;
    margin-top: 3rem;
}

    /*Kontakt afsnit*/
.ffkontakt div img{
    width: 40%;
    justify-content: center;
    margin-left: 14.5rem;
    margin-top: 5rem;
    border-radius: 100%;
}

.ffkontakt div h2{
    justify-content: center;
    text-align: center;
}

.ffkontakt section{
    width: 100%;
    padding-top: 6rem;
    padding-right: 5rem;
}

            /**/

            /*Fælles regler for 50/50*/
.ffværdier, .ffvision, .ffjohan{
    background-image: url(imagesweb/lysbølge2.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 7rem;
    padding-top: 7%;
    margin-top: 3rem;
}

.ffværdier section, .ffmission section, .ffvision section, .ffjohan section, .ffsie section{ /*større elipseafsnit med venstrestillet tekst*/
    padding-top: 4%;
    padding-bottom: 4%;
    padding-left: 5%;
    width: 40%;
    justify-content: flex-start; /*content starter fra venstre*/
}

.ffmission, .ffkontakt{
    background-image: url(imagesweb/elipsebeigeforsøg4.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 5%;
    padding-bottom: 9rem;
    margin-top: 6rem;
}


.ff, .ff11, .ff2, .ffgrøn, .ffgrøn2, .ffbrun, .ffblå, .ffblå2, .ffblå3, .ffbrun2, .ffværdier, .ffmission, .ffvision, .ffkontakt, .ffjohan, .ffsie{ /*ALLE 50/50*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.ff h2, .ff11 h2, .ff2 h2, .ff3 h2, .ffgrøn h2, .ffgrøn2 h2, .ffbrun h2, .ffblå h2, .ffblå2 h2, .ffblå3 h2, .ffbrun2 h2, .ffværdier h2, .ffmission h2, .ffvision h2, .ffjohan h2, .ffsie h2{ /*ALLE 50/50*/
    color: #000000;
    margin-top: 5%; 
    font-size: 1.2rem;
}


.ff p, .ff11 p, .ff2 p, .ff3 p, .ffgrøn p, .ffgrøn2 p, .ffbrun p, .ffblå p, .ffblå2 p, .ffblå3 p, .ffbrun2 p, .ffværdier p,.ffmission p, .ffvision p, .ffkontakt p, .ffjohan p, .ffsie p{ /*Alle 50/50*/
    font-family: 'Interregular', sans-serif;
    color: #000000; 
    font-size: 15px;
    line-height: 1.5;
    margin-top: 5%;
} 


.ff11 section, .ff2 section{ 
    padding-top: 4%;
    padding-bottom: 4%;
    padding-left: 5%;
    width: 40%;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* ← Centrerer indhold horisontalt */
}


.ff div, .ff11 div, .ffværdier div, .ffvision div, .ffjohan div, .ffsie div{
    padding-top: 4%;
    padding-right: 5%;
    padding-bottom: 4%;
    width: 40%;
    margin-top: 2%;
}


.ff div img, .ff11 div img, .ff2 div img, .ffgrøn div img, .ffgrøn2 div img, .ffbrun div img, .ffblå div img, .ffblå2 div img,.ffblå3 div img, .ffbrun2 div img, .ffværdier div img, .ffmission div img, .ffvision div img, .ffjohan div img, .ffsie div img{ /*Næsten alle 50/50*/
    width: 100%;
    justify-content: center;
    align-items: center;
}

.ff2 section, .ffmission section{
    padding-top: 8%;
    padding-bottom: 4%;
    padding-right: 5%;
    width: 50%;
}


.ff2 div, .ffmission div{
    padding-top: 5%;
    padding-left: 5%;
    padding-bottom: 4%;
    width: 40%;
    margin-top: 2%;
}


.ffgrøn div, .ffbrun div, .ffblå div, .ffblå2 div, .ffbrun2 div{
    width: 50%;
}

.ffgrøn section, .ffgrøn2 section, .ffbrun section, .ffblå section, .ffblå2 section,.ffblå3 section, .ffbrun2 section{
    padding-top: 3%;
    padding-right: 5%;
    width: 50%;
    padding-left: 5%;
}

.ffgrøn div img, .ffbrun div img, .ffblå div img{ 
    width: 100%;
    margin-top: 30%;
    margin-bottom: 10%;
    padding-right: 10%;
    padding-left: 10%;
}

.ffblå3 div img, .ffgrøn2 div img{
    width: 100%;
    margin-top: 15%;
    margin-bottom: 10%;
    padding-right: 10%;
    padding-left: 10%;
}


                            /*Generelle gentagenede regler*/
     /*Knapper*/
.tiltoppen{
    position: fixed;
    bottom: 3%;
    right: 2%;
    z-index: 9;
    background-color: #835332;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.tiltoppen a{
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 2%;
    width: 100%;
    text-align: center;
}
.tiltoppen:hover{
    background-color: #c9b8a4;
}

    /*Call to action - knapper*/
.knap, .knap2{
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%

}  

.knap2{
    margin-left: 10rem;
}

.knap3{
    display: flex;
    width: 90%;
    margin-bottom: 10px;
    justify-content: right;
    padding-right: 2%;
    gap: 1%;
}

.knap a, .knap2 a, .knap3 a{
    position: relative;
    background-color: #06550c;
    color:white;
    text-decoration: none;
    border-radius: 15rem;
    padding: 1rem 4rem;
    box-shadow: rgb(0, 0, 0, 0.5) 0px 5px 10px;
    text-transform: uppercase;
    font-family: 'InterRegular', sans-serif; 
    font-size: 14px;
    transform: scale(1);
    text-align: center;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.knap a:hover, .knap2 a:hover, .knap3 a:hover{
    background-color: #0603aa;
}

.knap:hover, .knap2:hover, .knap3:hover{
    transition: transform 0.5s ease;
    transform: scale(1.05);
}


                                        /*Mobil*/
@media screen and (max-width:600px) {
    /*Forside*/ 
    .forsidevideo{
        height: 35vh;
        margin-top: -15%;
    }

    #forsidebillede section{
        display: flex;
        font-family: 'CinzelBold';
        justify-content: center;
        text-align: center;
        margin-top: 10%;
        font-size: 2rem;
    }

    .knap3{
        margin-left: 10%;
    }   

    .anmeldelser{
        display: block;
        width: 88%;
    }
    .anmeldelser div h2{
        text-align: center;
        width: 85%;
    }

    .anmeldelser img{
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .anmeldelser div img{
        display: none;
    }

    /*resten undersider*/

    .overskrift section{
        flex-direction: column;
        margin-top: -10%;
        justify-content: center;
        align-items: center;
    }
    .overskrift a:hover{
        display: none;
    }
    .overskrift div{    
        background-color: #c9b8a4;
        border-radius: 15rem;
        padding: 1rem 3rem;
        width: 50%;
        margin-bottom: -5%;
    }

    .overskrift a{
        font-size: 15px;
    }

    #typer{ /*Kan ikke få disse til at være centrerede på fysisk mobil enhed*/
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70%;
    }

    #typercontainer{
        flex-wrap: wrap;
        width: 70%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .typerafsnit{
        width: 30%;
        margin-top: 10%;
        margin-bottom: 10%;
    }
    

    #typer .knap{
        justify-content: center;
        align-items: center;
        margin-left: -15%;
    }
    



    /*ff afsnits*/
    .ff, .ff11, .ff2, .ffgrøn, .ffbrun, .ffblå, .ffbrun2, .ffværdier, .ffmission, .ffvision, .ffblå2, .ffkontakt, .ffjohan, .ffsie{
        display: block;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .ff, .ff11, .ffværdier{
        background-image: url(imagesweb/Frame\ 63.webp);
        width: 100%;
        height: 50rem;
        padding-bottom: 52rem;
    }

    .ffvision, .ffjohan{ /*Samme som ovenover?*/
        background-image: url(imagesweb/Frame\ 63.webp);
        width: 100%;
        height: 55rem;
        padding-bottom: 50rem;
    }

    .ff section, .ff11 section, .ffgrøn section, .ffblå section, .ffbrun2 section, .ffværdier section, .ffvision section, .ffblå2 section, .ffjohan section, .ffsie section{
        margin-top: 4rem;
        width: 95%;
    }

    .ffbrun section, .ffmission section{
        width: 100%;
        margin-bottom: 4rem;
    }

    .ff2, .ffmission, .ffsie{
        background-image: url(imagesweb/Frame\ 63mørk.webp);
        width: 100%;
    }

    .ff2 section{
        width: 100%;
    }

    .ff2 div img, .ffmission div img{
        width: 200%;
        justify-content: center;
        align-items: center;
        margin-left: 3.5rem;
        margin-top: 4rem;
    }
    .ff div img, .ff11 div img, .ffværdier div img, .ffvision div img, .ffjohan div img, .ffsie div img{
        width: 200%;
        justify-content: center;
        align-items: center;
        margin-left: 4.5rem;
    }

    .ffgrøn div img, .ffbrun div img, .ffblå div img, .ffbrun2 div img, .ffblå2 div img{
        width: 150%;
        margin-left: 4rem;
        padding-top: 5%;
    }


    .ffkontakt{
        display: flex;
        background-image: url(imagesweb/mobilbeige.webp);
        background-repeat: no-repeat;
        background-size: contain;
        width: 90%;
        flex-direction: column;
        height: 55rem;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: 5%;
        margin-top: 30%;
    }

    .ffkontakt div img{
        justify-content: center;
        align-items: center;
        margin-left: 5%;
    }

    .ffkontakt section{
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
        padding: 15%;   
    }

    .ff3 section{
        display: block;
        justify-content: center;
        text-align: center;
        width: 100%;
        padding: 10%
    }

    .ff3{
        background-image: url(imagesweb/ny3.webp);
        background-repeat: no-repeat;
        background-size: contain;
        width: 90%;
        margin: 7%;
        display: block;
        height: 40rem;
        text-align: center;
    }

    .knap3{
        margin-left: 2%;
        margin-top: 0;
    }



    /*Kanpper*/
    
    .knap, .knap2, .knap3{
        justify-content: center;
        align-items: center;
        padding-left: 2rem;
    }
    
    .knap a, .knap2 a, .knap3 a{
        transition: none;
        transform: none;
    }
    .knap a:hover, .knap2 a:hover, .knap3 a:hover{
        background-color: #06550c;
        transition: none;
        transform: none;
    }

    .knap:hover, .knap2:hover, .knap3:hover{
        transition: none;
        transform: none;
    }
}