:root{
    --background: white;
    --h1text: white;
    --dbrown: #493C35;
    --lbrown: #B5A594;
    --beige: #dad2c9;

}

html {
    scroll-behavior: smooth;
}
  

/*LEGENDE
    cb - xte color box (aufmacher ausgenommen)
    sec - xtes textfeld (aufmacher ausgenommen)
    pic - xtes bild auf seite (aufmacher ausgenommen)

    pl - planung (shooting)
    abl - ablauf (shooting)

    ab 1800px ist ein mediaq eingebaut, damit die ansicht auf schmaleren Bildschirmen klappt
*/


/*erstmal für alles Geschriebene eine Schriftart & Farbe Festlegen*/
body {
    background-color: var(--background);
    font-family: 'Playfair Display', serif;
    color: var(--dbrown);
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
}


a{ /* alle Links haben keinen Unterstrich*/
    text-decoration: none;
    color: var(--dbrown);
}


/*wenn man auf Links geht werden sie leicht transparent*/
main, footer{
    a:hover, a:focus, a:active {
        /*font-weight: 700;*/
            opacity: 0.7;
    }
}


nav{
    /* Listenelemente in NAV Leiste anpassen*/
    font-family: 'Playfair Display SC', serif;
    font-weight: 400;
    color: var(--h1text);
    li{ list-style: none; }
    a{color: white;
    }
}

footer{
    /*keine Listenpunkte im Footer*/
    li{ list-style: none; }
}

h1{
    font-family: 'Playfair Display SC', serif;
    font-weight: 400;
    font-size: 4.5rem;
    color: var(--h1text);
    opacity: 80%;
    margin: 0;
}

h2{
    font-family: 'Playfair Display SC', serif;
    font-weight: 400;
    font-size: 2rem;
    color: var(--dbrown);
}

.unterueberschrift{
    color: var(--h1text);
    text-align: center ;
    opacity: 80%;
}

h3{
    font-family: 'Playfair Display SC', serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--dbrown);
}

img{
    display: flex;
    max-width: 100%;
    object-fit: cover;
}

/*icon, um nach oben zu kommen*/
    .up{
        width: 2rem;
        height: 0.23rem;
        background-color: white;
        opacity: 100%;
    }

    .eins{ /*linker strich von pfeil*/
        transform: rotate(-48deg) translateY(0.55rem);
        z-index: 5;
    }
    .zwei{ /*rechter strich von pfeil*/
        transform: rotate(48deg) translateY(0.55rem);
        z-index: 5;
    }

    .cb-up{
        z-index: 4;
        background-color: var(--dbrown);
        opacity: 30%;
        width: 3.5rem;        
        height: 3.5rem;
        border-radius: 2.5rem;

        position: fixed; 
        bottom: 2.8rem;   
        right: 2.24rem;   
    }

    .iconup{
        display: flex;
        flex-direction: row;
        justify-content:flex-end;
        align-items: right;
        cursor: pointer;
        position: fixed; 
        bottom: 5rem;   
        right: 2rem;     /* Abstand vom rechten Rand */
    }

    /*Anker oben am bildschirmrand zu dem man kommt, wenn man icon klickt*/
    #top {
        position: absolute;
        top: 0;
      }


/*NAVIGATIONSLEISTE*/

.wtm{
    height: 3rem;
}

/* Halbtransparenter Balken Navigationsleiste */
.color-block {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;        
    height: 4rem;
    background-color: var(--dbrown);
    opacity: 30%;
}

/*Hamburger Menu Verstecken*/
@media(min-width:801px){
    .ham-menu, .menu-toggle{
        display: none;
    }
}

.navigationselemente{
    margin: 0;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;

    li {
        position: relative;
    }

    li:first-child {
        margin-right: auto;
        padding: 0.5rem 1rem;
    }

    li:not(:first-child) {
        margin-right: 2rem;
    }

    a:hover {
        color: transparent;
        font-weight: 400;
        &::after {
            display: inline;
            color: var(--h1text);
        }
            
     }

     a::after {
         content: attr(data-label);
         position: absolute;
         left: 50%;
         translate: -50% 0;
         font-weight: 700;
         display: none;
    }
}


.headerpic{
    width: 100%;
    height: 100vh;
   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    z-index: -2; /* Das Bild wird unter dem Text angezeigt */
}

.durchsichtig{
    opacity: 0%;
}

h1 {
    margin-top: 70dvh; /* Höhe */
    display: flex;
    justify-content: center;
}

/* Trennlinie nach Aufmacher auf allen Seiten*/
.trenner-linie-oben, .trenner-linie-wenigabstand{
    margin: 0;
    margin-top: 10rem;
    border-width: 0.1rem 0 0 0;
    border-style: solid;
    border-color: var(--dbrown);

    grid-column-start: 3; 
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
}

/*ABOUT*/

.about-content{
    margin-top: 10dvh;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    /*grid-auto-rows: minmax(8rem, auto);*/
    grid-template-rows: auto auto 100px auto 100px 180px 100px auto 100px;
    column-gap: 2rem;

    /*Zeilenabstand für about*/
    line-height: 1.5;
}

.about-seceins{
    text-align: center;
    margin-top: 10rem;
    margin-bottom: 15rem;
    grid-column-start: 2; 
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 2;
}

.about-piceins{
    grid-column-start: 1; 
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 4;
}

.about-seczwei{
    h2{
        color: var(--background);
        margin-bottom: 4rem;
    }
    color: var(--background);

    padding-top: 4rem;
    padding-bottom: 4rem;

    grid-column-start: 3; 
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 4;
    margin-right: 10rem;
    margin-left: 10rem;
}

.about-secdrei{
    h2, a{
        color: var(--background);   
    }
    color: var(--background);

    padding-top: 4rem;
    padding-bottom: 4rem;
    
    grid-column-start: 1; 
    grid-column-end: 5;
    grid-row-start: 8;
    grid-row-end: 8;
    margin-left: 20rem;
    margin-right: 10rem;
}

.about-piczwei{
    grid-column-start: 5; 
    grid-column-end: 7;
    grid-row-start: 7;
    grid-row-end: 10;
}

.about-cb-eins{
    z-index: -1;
    background-color: var(--lbrown);
    grid-column-start: 2; 
    grid-column-end: 7;
    grid-row-start: 3;
    grid-row-end: 6;
}

.about-cb-zwei{
    z-index: -1;
    width: 100%;        
    height: 100%;
    background-color: var(--lbrown);
    grid-column-start: 1; 
    grid-column-end: 7;
    grid-row-start: 8;
    grid-row-end: 10;
}


/*SHOOTING*/

.shooting-content{
    margin-top: 10dvh;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(8rem, auto);
    column-gap: 6rem;
    row-gap: 10rem;

    line-height: 1.5;
}

.shooting-piceins{
    margin-left: 10rem;
    margin-right: 5rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;
}

.shooting-seceins{
    margin-right: 20rem;
    margin-top: 0;
    margin-bottom: 0;
    grid-column-start: 4; 
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 2;
}

.trenner-linie-sh-mitte{
    margin: 0;
    margin-top: 5rem;
    border-width: 0.1rem 0 0 0;
    border-style: solid;
    border-color: var(--dbrown);

    grid-column-start: 3; 
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 3;
}

.shooting-piczwei{
    margin-right: 10rem;
    margin-left: 5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    grid-column-start: 4; 
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 4;
}

.shooting-seczwei{
    margin-left: 20rem;
    margin-top: 0;
    margin-bottom: 0;
    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 4;
}


.shooting-picdrei{
    margin-top: 10rem;
    margin-bottom: 10rem;
    grid-column-start: 1; 
    grid-column-end: 7;
    grid-row-start: 5;
    grid-row-end: 5;
}

.planung-content{
    margin-top: 10dvh;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(8rem, auto);
    row-gap: 6rem;

    line-height: 1.5;

    /*Varbiblen für Margins*/
    --randtext: 14rem;
    --mitte: 6rem; /*2,4 (ml), 5,7,9 (mr)*/
    --textzustrich: 8rem; /*2,4 (mr), 5,7,9 (ml)*/

}


.pl-seite {
    margin-left: 2rem;
    grid-column-start: 5; 
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 1;

}

.pl-linie{
    margin: 0;
    margin-bottom: 18rem;
    border-width: 0 0 0 0.1rem;
    border-style: solid;
    border-color: var(--dbrown);

    grid-column-start: 5; 
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 3;
}

.pl-eins{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-left: var(--randtext);  

    grid-column-start: 1; 
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}


.pl-zwei{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-left: var(--mitte);
    margin-right: var(--textzustrich);

    grid-column-start: 3; 
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
}


.pl-drei{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-left: var(--randtext);    

    grid-column-start: 1; 
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
}


.pl-vier{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-left: var(--mitte);
    margin-right: var(--textzustrich);

    grid-column-start: 3; 
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 2;
}


.shooting-picvier{
    margin-top: 10rem;
    margin-bottom: 10rem;
    grid-column-start: 1; 
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 3;
}


.abl-seite {
    text-align: center;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 4;

}

.abl-linie{
    margin: 0;
    margin-bottom: 18rem;
    border-width: 0 0.1rem 0 0;
    border-style: solid;
    border-color: var(--dbrown);

    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 6;
}

.abl-fuenf{
    background-color: var(--beige);
    padding: 4rem;
    
    text-align: center;
    margin-right: var(--mitte);
    margin-left: var(--textzustrich);

    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 4;
}

.abl-sechs{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-right: var(--randtext);

    grid-column-start: 4; 
    grid-column-end: 6;
    grid-row-start: 4;
    grid-row-end: 4;
}

.abl-sieben{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-right: var(--mitte);
    margin-left: var(--textzustrich);

    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 5;
}

.abl-acht{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-right: var(--randtext);

    grid-column-start: 4; 
    grid-column-end: 6;
    grid-row-start: 5;
    grid-row-end: 5;
}

.abl-neun{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-right: var(--mitte);
    margin-left: var(--textzustrich);

    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 6;
    grid-row-end: 6;
}

.abl-zehn{
    background-color: var(--beige);
    padding: 4rem;

    text-align: center;
    margin-right: var(--randtext);

    grid-column-start: 4; 
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 6;
}



/*PORTFOLIO*/


.container-gallery{
    max-width: auto;
    width: 90%;
    margin: auto;
    margin-top: 8rem;
    margin-bottom: 60%;

    display: flex;
    gap: 4%;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 1%;
}

.column img {
    width: 100%;
    height: 100%;
}


/*LEISTUNGEN*/


.leistungen-content{
    margin-top: 10dvh;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto 180px auto 180px 180px 180px auto 180px 180px 180px auto 180px auto auto auto auto auto auto;

    line-height: 2;
}

.leistungen-trenner-linie-oben{
    margin: 0;
    margin-top: 10rem;
    border-width: 0.1rem 0 0 0;
    border-style: solid;
    border-color: var(--dbrown);

    grid-column-start: 2; 
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

.leistungen-seceins{
    text-align: center;
    margin-top: 10rem;
    margin-bottom: 10rem;
    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.leistungen-piceins{
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 6;
}

.leistungen-seczwei{ /*Ü Paket1*/
    h2, h3{
        color: var(--lbrown);
    }
    margin-left: 6rem;
    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}
.leistungen-secdrei{ /*Infos Paket 1*/
    background-color: var(--lbrown);
    color: var(--background);

    padding-left: 12rem;
    padding-top: 6rem;
    padding-bottom: 6rem;

    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
}

.leistungen-secvier{ /*Ü Paket 2*/
    h2, h3{
        color: var(--lbrown);
    }
    margin-left: 6rem;
    grid-column-start: 1; 
    grid-column-end: 3;
    grid-row-start: 7;
    grid-row-end: 8;
}

.leistungen-secfuenf{ /* Infos Paket 2*/
    background-color: var(--lbrown);
    color: var(--background);

    padding-left: 12rem;
    padding-top: 6rem;
    padding-bottom: 6rem;

    grid-column-start: 1; 
    grid-column-end: 3;
    grid-row-start: 8;
    grid-row-end: 9;
}

.leistungen-piczwei{
    grid-column-start: 3; 
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 10;
}

.leistungen-secsechs{ /*Ü Paket3*/
    
    h2, h3{
        color: var(--lbrown);
    }
    margin-left: 6rem;
    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 11;
    grid-row-end: 12;
}
.leistungen-secsieben{ /*Infos Paket 3*/
    background-color: var(--lbrown);
    color: var(--background);

    padding-left: 12rem;
    padding-top: 6rem;
    padding-bottom: 6rem;

    margin-bottom: 10rem;

    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 12;
    grid-row-end: 13;
}

.leistungen-picdrei{ 
    margin-bottom: 10rem;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 11;
    grid-row-end: 14;
}

.leistungen-secacht{ /* zusatzbilder*/
    text-align: center;

    h3{
        margin: 0;
    }
    p{
        margin: 0;
        margin-bottom: 2rem;
    }
    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 14;
    grid-row-end: 15;
}

.leistungen-trenner-linie-mitte{
    margin: 0;
    margin-top: 8rem;
    border-width: 0.1rem 0 0 0;
    border-style: solid;
    border-color: var(--dbrown);

    grid-column-start: 2; 
    grid-column-end: 3;
    grid-row-start: 15;
    grid-row-end: 16;
}

.leistungen-secneun{ /* Gutschein Ü*/
    text-align: center;
    padding-top: 6rem;
    padding-bottom: 6rem;

    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 16;
    grid-row-end: 17;
}

.leistungen-seczehn{ /*Gutschein Info*/
    text-align: center;
    color: var(--background);
    background-color: var(--lbrown);
    padding: 6rem;
    padding-left: 35%;
    padding-right: 35%;


    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 17;
    grid-row-end: 18;
}

.leistungen-secelf{ /*kleinunternehmerregelung*/
    text-align: center;

    margin-top: 8rem;
    margin-bottom: 8rem;

    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 18;
    grid-row-end: 19;
}

.leistungen-seczwoelf{ /* b2b anfragen*/
    text-align: center;
    background-color: var(--lbrown);
    padding: 4rem;
    padding-left: 15%;
    padding-right: 15%;
    

    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 19;
    grid-row-end: 20;
}

.leistungen-secdreizehn{ /* Interesse?*/
    text-align: center;
    padding-top: 10rem;
    padding-bottom: 6rem;

    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 20;
    grid-row-end: 21;
}

.preise{
    font-family: 'Playfair Display SC', serif;
    font-weight: 400;
    font-size: 2rem;
    margin: 0;
    margin-top: 2rem;
    margin-left: 4rem;
}

.anfahrt{
    margin: 0;
    font-size: 1rem;
    margin-left: 4rem;
}


/*KONTAKT*/

.kontakt-content{
    margin-top: 10dvh;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(8rem, auto);
    gap: 2rem;
    margin-bottom: 20rem;
}

.kontakt-seceins{
    margin-top: 10rem;
    text-align: center;
    grid-column-start: 2; 
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 2;
}

.kontakt-seczwei{
    text-align: right;
    grid-column-start: 1; 
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 3;
}

.kontakt-secdrei{
    text-align: left;
    grid-column-start: 4; 
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 3;
}



/*IMPRESSUM*/

.impressum-content{
    margin-top: 10dvh;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(8rem, auto);
    gap: 2rem;
    margin-bottom: 20rem;
}

.impressum-seceins{
    margin-top: 8rem;
    text-align: center;
    grid-column-start: 2; 
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 2;
}

.impressum-seczwei{
    text-align: right;
    grid-column-start: 3; 
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 3;
}

.impressum-secdrei{
    text-align: left;
    grid-column-start: 4; 
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 3;
}
    

/*DATENSCHUTZ*/

.daten-content{
    margin-top: 10dvh;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(8rem, auto);
    gap: 2rem;
    margin-bottom: 5rem;
}

.daten-seceins{
    margin-top: 10rem;
    text-align: center;
    grid-column-start: 2; 
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 2;
}

.datenschutz{
    margin-left: 15rem;
    margin-right: 15rem;
    margin-bottom: 20rem;

    h3 {
        margin-top: 5rem;
    }
}

/*FOOTER*/

footer{
    margin: 0;
    margin-top: 8rem;
    padding: 4rem;
    padding-left: 10%;
    padding-right: 20%;

    /*Abgrenzungslinie zu Footer*/
    border-width: 0.2rem 0 0 0;
    border-style: solid;
    border-color: var(--dbrown);

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.footer-left {

    margin-bottom: 4rem ;
   
    img{
    padding: 1rem;
    padding-top: 0;
    width: 5rem;
    height: 5rem;
    }

    p {
        padding: 1rem;
    }
}

.socials {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: left;
}

.footer-right {

    margin-bottom: 4rem ;
    ul li {
        padding: 1rem;
    }
}


/* macht im Datenschutz und Impressum das * (Platzhalter) durchsichtig*/
.durchsichtig{
    color: var(--h1text);
    text-align: center ;
    opacity: 0%;
}