/*ALLGEMEIN*/

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

body{
    /*background-color: #1e274a;*/
    scroll-behavior: smooth;
    overflow-x: hidden;
}

main{
    display: block;
    position: relative; 
}

header{
    position: sticky;
    top: 0; 
    z-index: 1000;
}


li{
    list-style: none;
}

img {
    width:100%;
    height:auto;
} 

h2{
    font-family: superior title;
    font-weight: lighter;
    font-style: italic;
    font-size: 5rem;
}

h3 {
    font-family: superior title;
    font-weight: lighter;
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

h4{
    font-family: altivo;
    font-weight: lighter;
    font-size: 1.5rem;
}

p{
    font-family: altivo;
    font-weight: lighter;
    font-size: 1.3rem;
}

section:not(section.übermich, section.willkommen) {
    padding: 5rem 10rem 5rem 10rem;
}

/* Navikation Allgemein */

.nav-allgemein{
    position: absolute;
    top: 4rem;
    right: 2rem;
}

.burger-icon {
    /* Style für das Icon-Viereck */
    position: relative;
    width: 4vw;
    height: 3vw;
    cursor: pointer;
    z-index: 1100;
}
  
.line {
    /* Style für die einzelnen Linien */
    position: absolute;
    width: 100%;
    height: 0.5vw;
    background-color: #ff3c3c;
    transition: all 0.3s ease; /* Für Animationen */
}
  
.line:nth-child(1) { top: 0; }
.line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.line:nth-child(3) { bottom: 0; }
  
.burger-icon.active .line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.burger-icon.active .line:nth-child(2) {
    opacity: 0; /* Linie ausblenden */
}
.burger-icon.active .line:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}

/* Vollbild Overlay Menü */
.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fd8888df;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1000;
}
  
.nav-menu li a {
    color: white;
    font-size: 3rem;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: superior title;
    font-weight: lighter;
    font-style: italic;
}
  
.nav-menu li a:hover {
    color: #1e274a;
}
  
.nav-menu.active {
    opacity: 1;
    pointer-events: all;
}
  

/* Navikation Arbeitsproben*/

.nav-arbeitsproben ul{
    display:flex;
    justify-content: space-between;
    padding: 0 10rem 0 10rem;
    background-color: #1e274a;
}

.nav-arbeitsproben a{
    padding:0.5rem 0 0.5rem 0;
	display:block;
    font-family: altivo;
    font-weight: lighter;
    font-size: 1.3rem;
    color: #808bb8;
    text-decoration: none;

}

.nav-arbeitsproben a:hover{
    color: #ff3c3c;
    cursor: pointer;
}

.nav-arbeitsproben li.active a {
    color: #ff3c3c;
}


/* FOOTER */

footer{
    padding: 5rem 10rem 5rem 10rem;
    position: relative;
    height: 30vw;
    background-color: #1e274a;
}

footer h2{
    font-family: superior title;
    font-weight: lighter;
    color: white;
    font-size: 2.5rem;
    line-height: 1.5;
    margin-bottom:1rem;
}

footer p{
    font-family: altivo;
    font-weight: lighter;
    font-size: 1.1rem;
    color: white;
}

footer a{
    text-decoration: none;
    color: white;
}

footer  a:hover{
    color: #ff3c3c;
    cursor: pointer;
}

footer img{
    position: absolute;
    right: 6vw;
    top: 1vw;
    width: 25vw;
    height: 27vw;

}

hr{
    width: 50vw;
    margin: 3rem 0rem 1rem 0rem;
    border: 0.2vw solid #ff3c3c;
}


/* STARTSEITE */

/*WILLKOMMEN SECTION*/

.hauptseite{
    background-color: #1e274a;
}

.willkommen{
    /*background-color: #1e274a;*/
    padding: 5rem 10rem 0rem 0rem;
    height: 100vh;
    position: relative;
}

h1{
    font-family: fleur;
    font-size: 13rem;
    color: white;
    text-align: right;
    line-height: 0.7;
}

.willkommen p{
    color: white;
    text-align: right;
    font-family: altivo;
    font-weight: 100;
    font-size: 1.5rem;
    padding: 5rem 0rem 0rem 0rem;
}

.willkommen img{
    position: absolute;
    top: 10rem;
    /*right: 800;*/
    width: 47vw;
    height: 50vw;
}

/* ÜBER MICH SECTION*/

.übermich{
    width: 80%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
    height: 100vh;
}

.übermich h2{
   
    color: white;
    position: absolute;
    left: 27vw;
    top: 1vw;
    z-index: 2;
    background-color: #1e274a;
    padding: 0.3vw;
}

.bild1{
    position: absolute;
    right: 50vw;
    top: 7vw;
    border: 1vw #1e274a solid;
    z-index: 1;
    height: 17vw;
}

.bild1 img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    transition: all 1s ease-in-out;
    height: 15vw;
    width: 15vw;
  }

.bild1 img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}

.bild2{
    position: absolute;
    right: 13vw;
    border: 1vw #1e274a solid;
    z-index: 1;
    height: 17vw;
}

.bild2 img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    transition: all 1s ease-in-out;
    height: 15vw;
    width: 15vw;
}

.bild2 img:hover {
    filter: none;
  -webkit-filter: grayscale(0%);
}

.bild3{
    position: absolute;
    right: 18vw;
    bottom: 6vw;
    border: 1vw #1e274a solid;
    z-index: 1;
    height: 17vw;
}

.bild3 img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    transition: all 1s ease-in-out;
    height: 15vw;
    width: 15vw;
}

.bild3 img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}

.bild4{
    position: absolute;
    right: 24.5vw;
    top: 9vw;
    z-index: 0;
   
}

.bild4 img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    transition: all 1s ease-in-out;
    width: 32vw;
    height: 32vw;
  }

.bild4 img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}

.text1{
    font-family: altivo;
    font-weight: lighter;
    font-size: 1.3rem;
    color: white;
    text-align: right;
    position: absolute;
    left: 1.5vw;
    bottom: 19vw;
    padding:1vw;
    background-color: #1e274a;
    z-index: 2;
    
}

.text2{
    font-family: altivo;
    font-weight: lighter;
    font-size: 1.3rem;
    color: white;
    position: absolute;
    right: 2vw;
    bottom: 24vw;
    padding: 1vw;
    background-color: #1e274a;
    z-index: 2;
    
}

/* LEBENSLAUF SECTION */

.lebesnlauf{
    /* padding: 5rem 10rem 5rem 10rem; */
    position: relative;
    background-color: white;
}



.lebesnlauf h2{
    color:#1e274a ;
    line-height: 1.5;
    background-color: white;
}

.lebesnlauf h3{
    color: #1e274a;
}

.lebesnlauf h4{
    
    color: #808bb8;
    line-height: 1.5;
}

.lebesnlauf p{
    color: #1e274a;
}

.lebesnlauf div{
    padding: 1rem 0rem 1rem 0rem;
}

.lebesnlauf img{
    position: absolute; 
    top: 0;
    right: 2vw;
    width: 70vw;
    height: 90vw;
}

/* FÄHIGKEITEN SECTION*/

.fähigkeiten{
    /* padding: 5rem 10rem 5rem 10rem; */
    position: relative;
}

.fähigkeiten h2{
    color: white;
}

.fähigkeiten h3{
    font-family: superior title;
    font-weight: lighter;
    color: white;
    font-size: 2rem;
    line-height: 1.5;
}

.fähigkeiten2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    padding: 1rem 0rem 0rem 0rem;
    gap: 2rem;
 }

.skill {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 15px;
    justify-content: flex-start;
  }
  
.label {
    /* flex: 0 0 200px; Feste Breite für Beschriftung */
    font-family: altivo;
    font-weight: lighter;
    font-size: 1.3rem;
    color: white;
    width: 45%;
}
  
.bar {
    /* flex: 0 0 18vw; */
    height: 0.7rem;
    background: linear-gradient(to right, #ff3c3c var(--rot, 0%), #5968b5 var(--rot, 0%), #5968b5 100%);
    width: 45%;
}

/* ARBEITSPROBEN SECTION */

.arbetsbroben{
    padding: 0rem 10rem 5rem 10rem;
    
}    
.arbetsbroben h2{
    font-family: fleur;
    font-size: 13rem;
    color:white;
    text-align: right;
    line-height: 10rem;
    font-style: normal;
}

.div{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 5vw;
    grid-column-gap: 8vw;
    padding: 5rem 0rem 0rem 0rem;
}


/* Grid Positionen */
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }

figcaption {
    font-family: altivo;
    font-weight: lighter;
    font-size: 1.3rem;
    color: white;
    position: absolute;
    top: 21vw;
}

/* Bild-Hover Funktion */
.hover-img {
    position: relative;
    width: 20vw;
    height: 20vw;
}

.hover-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.4s ease;
}

.hover-img img.color {
    opacity: 0;
    z-index: 2;
}

.hover-img img.sw {
    z-index: 1;
}

.hover-img:hover img.color {
    opacity: 1;
    cursor: pointer;
}




/*WEIßER HINDERGRUND*/

.weiß2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    
}

.div-weiß1 { grid-area: 1 / 1 / 2 / 2; }
.div-weiß2 { grid-area: 1 / 2 / 2 / 3; }

.weiß2 h2{
    color: #1e274a;
    padding: 5rem 0rem 0rem 0rem;
}

.weiß2 h3{
    color: #1e274a;
}

.weiß2 p{
    color: #1e274a;
}

.weiß3{
    position: relative;
}

/* BLAUER HINDERGRUND*/

.blau2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    
}

.div-blau1 { grid-area: 1 / 1 / 2 / 2; }
.div-blau2 { grid-area: 1 / 2 / 2 / 3; }

.blau2 h2{
    color: white;
    padding: 5rem 0rem 0rem 0rem;
}

.blau2 h3{
    color: white;
}

.blau2 p{
    color: white;
}

.blau3{
    position: relative;
}

/* STADT FREIBERG */

.freiberg{
    background-color: white;
    height: 67vw;
}

.freiberg img{
    width: 40vw;
    height: 40vw;
}

.freiberg-bild img{
    position: absolute;
    top: 40vw;
    width: 80vw;
    height: 25vw;
}

.button-arbeitsproben-freiberg{
    display: none;
}



/* NATURNNAH-HOF*/

.nnh{
    background-color: white;
    height: 100vw;
}

.nnh-bild3{
    width: 35vw;
    height: 43vw;
}

.nnh-bild1{
    position: absolute;
    top: 30vw;
    width: 45vw;
    height: 45vw;
}

.nnh-bild2{
    position: absolute;
    right: 13vw;
    top: 55vw;
    width: 40vw;
    height: 40vw;
}

.button-arbeitsproben-nnh{
    display: none;
}

/* ELBFLORENZ CITY TOUR*/

.ect{
    height: 120vw;
}

.ect-body{
    background-color: #1e274a;
}

.ect-bild1{
    width: 43vw;
    height: 43vw;
}

.ect-bild2{
    width: 80vw;
    height: 60vw;
}

.button-arbeitsproben-ect{
    display: none;
}

/* ARGENTI LUNA */

.argenti-luna{
    background-color: white;
    height: 50vw;
}

.argenti-luna img {
    width: 45vw;
    height: 45vw;
}

.button-arbeitsproben-luna{
    display: none;
}

/* PDF-STANDARDS */

.pdf{
    height: 60vw;
}

.pdf-body{
    background-color: #1e274a;
}

.bilder-pdf{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 0px;
    padding: 5vw 0 0 0 ;
}

.pdf-bild1{
    width: 24vw;
    height: 24vw;
}

.pdf-bild2{
    width: 24vw;
    height: 24vw;
}

.pdf-bild3{
    width: 24vw;
    height: 24vw;
}

.button-arbeitsproben-pdf{
    display: none;
}

/* FESTIVAL "KING'S LAIR" */

.kings-lair{
    background-color: white;
    height: 155vw;
}

.kl-bild1 {
    width: 35vw;
    height: 35vw;
}

.kl-dachmarke h3{
    color: #1e274a;
}

.kl-logos{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px; 
}

.logo1 { grid-area: 1 / 1 / 3 / 3; }
.logo2 { grid-area: 1 / 3 / 2 / 4; }
.logo3 { grid-area: 1 / 4 / 2 / 5; }
.logo4 { grid-area: 2 / 3 / 3 / 4; }
.logo5 { grid-area: 2 / 4 / 3 / 5; }

.logo1 img{
    width: 35vw;
    height: 30vw;
}

.logo2 img{
    width: 17vw;
    height: 13vw;
}

.logo3 img{
    width: 17vw;
    height: 13vw;
}

.logo4 img{
    width: 21vw;
    height: 16vw;
}

.logo5 img{
    width: 17vw;
    height: 13vw;
}

.kl-zeichnungen{
    position: relative;
}

.kl-zeichnungen h3{
    color: #1e274a;  
}

.div-kl-zeichnungen{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 2vw;
    align-items: center;
}

.zeichnung1 { grid-area: 1 / 1 / 2 / 2; }
.zeichnung2 { grid-area: 1 / 2 / 2 / 3; }
.zeichnung3 { grid-area: 1 / 3 / 2 / 4; }
.zeichnung4 { grid-area: 2 / 1 / 3 / 2; }
.zeichnung5 { grid-area: 2 / 2 / 3 / 3; }
.zeichnung6 { grid-area: 2 / 3 / 3 / 4; }

.zeichnung1 img{
    width: 25vw;
    height: 25vw;
}

.zeichnung2 img{
    width: 28vw;
    height: 28vw;
}

.zeichnung3 img{
    width: 20vw;
    height: 20vw;
}

.zeichnung4 img{
    width: 27vw;
    height: 27vw;
}

.zeichnung5 img{
    width: 20vw;
    height: 20vw;
}

.zeichnung6 img{
    width: 27vw;
    height: 27vw;
}

/* Impressum + Datenschutz Seite*/

.IDSeite h3{
    font-family: superior title;
    color: #1e274a;
    font-weight: lighter;
    font-style: italic;
    font-size: 3rem;
    padding: 0rem 0rem 1rem 0rem;  
}

.IDSeite p{
    color: #1e274a;
}

.Datenschutz h3{
    padding: 3rem 0rem 0rem 0rem;
}

.Datenschutz h4{
    color: #808bb8;
    padding: 2rem 0rem 0.5rem 0rem;
}

/* MEDIA QUERIES */


/*1500px*/

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

   
    
    /* ARBEITSPROBEN SECTION */
    figcaption{
        top: 20vw;
    }

    /*Arbeitsproben*/
    /* STADT FREIBERG */

    .freiberg-bild img{
        position: absolute;
        top: 40vw;
        width: 80vw;
        height: 25vw;
    }

    /* NATURNNAH-HOF*/
    .nnh-bild1{
        top: 35vw;
    }
    
    /* ELBFLORENZ CITY TOUR*/
    .ect-bild1{
        width: 38vw;
        height: 38vw; 
    }

    /* ARGENTI LUNA */
    .argenti-luna img {
        width: 40vw;
        height: 40vw;
    }

    /* PDF-STANDARDS */
    .pdf{
        height: 70vw;
    }

    /* FESTIVAL "KING'S LAIR" */
    .kings-lair{
        height: 165vw;
    }

}

/*1400px*/

@media screen and (max-width:1400px) {
    /*ALLGEMEIN*/
    h2{
        font-size: 4rem;
    }

    /*WILLKOMMEN SECTION*/
    h1{
        font-size: 11rem;
    }
   
    /* ARBEITSPROBEN SECTION */
    .arbetsbroben h2 {
        font-size: 9rem;
        line-height: 8rem;
    }

    /* Navikation Arbeitsproben*/
    .nav-arbeitsproben a{
        font-size: 1.1rem;
    }

    /*ARBEITSPROBEN UNTERSEITEN*/
    /* STADT FREIBERG */
    .freiberg{
        height: 70vw;
    }

    .freiberg-bild img{
        top: 44vw;
    }

    /* ELBFLORENZ CITY TOUR*/
    .ect{
        height: 120vw;
    }

    /* ARGENTI LUNA */
    .argenti-luna{
        height: 55vw;
    }

    /* PDF-STANDARDS */
    .pdf{
        height: 75vw;
    }

    /* FESTIVAL "KING'S LAIR" */
    .kings-lair{
        height: 175vw;
    }
}

/*1300px*/
@media screen and (max-width:1300px){
    /*ALLGEMEIN*/

    h2{
        font-size: 3rem;
    }

    h3{
        font-size: 1.5rem;
    }
    h4{
        font-size: 1.3rem;
    }

    p{
        font-size: 1.2rem;
    }

    /* FÄHIGKEITEN SECTION*/
    .label{
        font-size: 1.2rem;
    }

    /* ARBEITSPROBEN SECTION */
    figcaption{
        font-size: 1.2rem;
    }
}

/*1200px*/
@media screen and (max-width:1200px) {

    /*ALLGEMEIN*/
    section:not(section.übermich, section.willkommen) {
        padding: 5rem;
    }

    /* Navikation Arbeitsproben*/
    .nav-arbeitsproben ul{
        padding: 0 6rem 0 5rem;
    }

    /*FOOTER*/
    footer{
        padding: 5rem 5rem;
    }

    /*WILLKOMMEN SECTION*/
    .willkommen{
        padding: 5rem 5rem 0rem 0rem;
    }

  

    /* FÄHIGKEITEN SECTION*/
    .fähigkeiten2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .skill{
        gap: 0px;;
    }

    .bar{
        width: 100%;
    }


}

/*1100px*/
@media screen and (max-width:1100px){

    /* Navikation Arbeitsproben*/
    .nav-arbeitsproben a{
        font-size: 1rem;
    }
   
    /*WILLKOMMEN SECTION*/
    .willkommen p{
        padding: 10rem 0rem 0rem 0rem;
    }

    /* ÜBER MICH SECTION*/
    .text1{
        left: -6.5vw;
        bottom: 24vw;
    }

    .text2{
        right: -7vw;
    }

    /* STADT FREIBERG */
    .freiberg{
        height: 80vw;
    }

    .freiberg-bild img {
        top: 53vw;
    }

    /* NATURNNAH-HOF*/
    .nnh-bild1 {
        top: 45vw;
    }

    /* ARGENTI LUNA */
    .argenti-luna {
        height: 60vw;
    }

    /* PDF-STANDARDS */
    .pdf {
        height: 80vw;
    }

    /* FESTIVAL "KING'S LAIR" */
    .kings-lair {
        height: 190vw;
    }
}

/*1000px*/
@media screen and (max-width:1000px){
    /* Navikation Arbeitsproben*/
    .nav-arbeitsproben a{
        font-size: 0.9rem;
    }
    
    /*WILLKOMMEN SECTION*/
    h1{
        font-size: 9rem;
    }

    /* LEBENSLAUF SECTION */
    .lebesnlauf img{
        width: 75vw;
        height: 95vw;
    }

    /* ARBEITSPROBEN SECTION */
    .div{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-row-gap: 10vw; 
    }

    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 3; }
    .div3 { grid-area: 2 / 1 / 3 / 2; }
    .div4 { grid-area: 2 / 2 / 3 / 3; }
    .div5 { grid-area: 3 / 1 / 4 / 2; }
    .div6 { grid-area: 3 / 2 / 4 / 3; }

    .hover-img{
        width: 35vw;
        height: 35vw;  
    }

    figcaption {
        top: 35vw;
    }

    /*FOOTER*/
    footer{
        height: 35vw;
    }

   


    /* STADT FREIBERG */
    .freiberg{
        height: 85vw;
    }

    .freiberg-bild img {
        top: 58vw;
    }

    /* NATURNNAH-HOF*/
    .nnh-bild1 {
        top: 50vw;
    }

    /* ELBFLORENZ CITY TOUR*/
    .ect{
        height: 135vw;
    }

    /* ARGENTI LUNA */
    .argenti-luna{
        height: 70vw;
     }

    /* PDF-STANDARDS */
    .pdf{
        height: 90vw;
    }
}

/*900px*/
@media screen and (max-width:900px){

    /*Footer*/
    footer {
        height: 38vw;
    }

    /* Navikation Arbeitsproben*/
    .nav-arbeitsproben a {
        font-size: 0.8rem;
    }
    
    /*Lebenslauf Section*/
    .lebesnlauf img {
        width: 70vw;
        height: 120vw;
        right: -7vw;
    }

     /*WEIßER HINDERGRUND*/
     .weiß2{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        justify-items: center;
    }

    .div-weiß1 { grid-area: 1 / 1 / 2 / 2; }
    .div-weiß2 { grid-area: 2 / 1 / 3 / 2; }

    .weiß2 h2{
        padding: 0rem;
    }

    /* BLAUER HINDERGRUND*/
    .blau2{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        justify-items: center;
    }

    .div-blau1 { grid-area: 1 / 1 / 2 / 2; }
    .div-blau2 { grid-area: 2 / 1 / 3 / 2; }

    .blau2 h2{
        padding: 0rem;
    }

    /*Freiberg*/
    .freiberg {
        height: 105vw;
    }

    .freiberg-bild img {
        top: 78vw;
    }

    /*Naturnah-Hof*/
    .nnh {
        height: 135vw;
    }

    .nnh-bild1 {
        top: 84vw;
    }

    .nnh-bild2{
        top: 90vw;
    }

    /* ELBFLORENZ CITY TOUR*/
    .ect {
        height: 170vw;
    }

    /* ARGENTI LUNA */
    .argenti-luna {
        height: 90vw;
    }

    /* PDF-STANDARDS */
    .bilder-pdf{
        position: absolute;
        top: 30vw;
    }

    .pdf {
        height: 70vw;
    }

    /* FESTIVAL "KING'S LAIR" */
    .kings-lair {
        height: 220vw;
    }
    
}

/*700px*/
@media screen and (max-width:700px){
    /*ALLGEMEIN*/
    h4 {
        font-size: 1.2rem;
    }

    p{
        font-size: 1rem;
    }

    .nav-menu li a{
        font-size: 2rem;
    }

    /* Navikation Arbeitsproben*/
    .nav-arbeitsproben{
        display: none;
    }

    /* FOOTER */
    footer {
        height: 50vw;
    }

    footer img{
        display: none;
    }

    /*WILLKOMMEN SECTION*/
    h1 {
        font-size: 6rem;
    }

    .willkommen p {
        padding: 5rem 0rem 0rem 0rem;
        font-size: 1rem;
    }

    /* FÄHIGKEITEN SECTION*/
    .label {
        font-size: 1rem;
    }

    /* ARBEITSPROBEN SECTION */
    .arbetsbroben h2 {
        font-size: 6rem;
        line-height: 5rem;
    }

    figcaption {
        font-size: 1rem;
    }

}

/* Mobile*/
/*600px*/
@media screen and (max-width:600px) {

    section:not(section.übermich, section.willkommen) {
        padding: 2rem 3.5rem 2rem 3.5rem;
    }

    /* Navikation Allgemein */
    .nav-allgemein{
        top: 1.5rem;
        right: 0.5rem; 
    }

    .burger-icon{
        width: 6vw;
        height: 5vw;
    }

    .line{
        height: 0.7vw;
    }

    .nav-menu li a{
        font-size: 2rem;
    }

    /* Navikation Arbeitsproben*/
    .nav-arbeitsproben{
        display: none;
    }

    /* FOOTER */
    footer{
        padding: 1rem 3.5rem 1rem 3.5rem;
        height: auto;  
    }

    footer h2{
        font-size: 2.2rem;
    }

    footer p{
        font-size: 1rem;
    }

    footer img{
        display: none;
    }

    hr{
        width: 80vw;
        margin: 30 0 10 0;
    }

    /* STARTSEITE */
    /*WILLKOMMEN SECTION*/
    .willkommen{
        padding: 5rem 3.5rem 0rem 3.5rem;
        height: 88vh;
    }

    h1{
        font-size: 6rem;
    }

    .willkommen p{
        font-size: 1.5rem;
        padding: 2rem 0 0 0;
    }

    .willkommen img{
        width: 87vw;
        height: 90vw;
        top:20rem;
        right:10rem;
    }

    /* ÜBER MICH SECTION*/
    #übermich{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
        height: 80vh;
    }
 
    .übermich h2 {
        grid-area: 2 / 1 / 3 / 2; 
        top: 0vw;
        left: 0px;
    }
    
    .bild4 { 
        grid-area: 1 / 1 / 2 / 2;
        right: 0vw;
        position: relative;
    }

    .bild4 img{
        width: 80vw;
        height: 80vw;
    }
    
    .text1 { 
        grid-area: 3 / 1 / 4 / 2; 
        left: 0vw;
        bottom: 10vw;
        text-align: left; 
        padding: 0;
    }
    
    .bild2 { 
        display: none;
    }
    
    .bild1 { 
        display: none;
    }
    
    .text2 { 
        grid-area: 4 / 1 / 5 / 2; 
        left: 0vw;
        bottom: 8vw;
        padding: 0;
    }

    .bild3{
        display: none;
    }

    .übermich br{
        display: none;
    }

    /* LEBENSLAUF SECTION */
    .lebesnlauf img{
        display: none;
    }

    /* FÄHIGKEITEN SECTION*/
    .label{
        font-size: 1rem;
    }

    .fähigkeiten2{
        grid-template-columns: repeat(1, 2fr);
    }

    .bar{
        flex: 0 0 43vw;
    }

    /* ARBEITSPROBEN SECTION */


    .arbetsbroben h2{
        font-size: 6rem;
        line-height: 5rem;
    }

    .div{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        grid-row-gap: 15vw;
        grid-column-gap: 8vw;
        padding: 2rem 0rem 0rem 0rem;
    }
   
    /* Grid Positionen */
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }
    .div3 { grid-area: 3 / 1 / 4 / 2; }
    .div4 { grid-area: 4 / 1 / 5 / 2; }
    .div5 { grid-area: 5 / 1 / 6 / 2; }
    .div6 { grid-area: 6 / 1 / 7 / 2; }

    figcaption{
        font-size: 1rem;
        top:81vw;
    }

    .hover-img{
        width: 80vw;
        height: 80vw;
    
    }

    /*ARBEITSPROBEN UNTERSEITEN*/

    /*WEIßER HINDERGRUND*/
    .weiß2{
        grid-template-columns:1fr ;
        grid-template-rows: repeat(1, 2fr); 
    }

    .div-weiß1 { grid-area: 1 / 1 / 2 / 2; }
    .div-weiß2 { grid-area: 2 / 1 / 3 / 2; }
    
    .weiß2 h2{
        padding: 0 0 0 0;       
    }

    /* BLAUER HINDERGRUND*/
    .blau2{
        grid-template-columns:1fr ;
        grid-template-rows: repeat(1, 2fr); 
    }

    .div-blau1 { grid-area: 1 / 1 / 2 / 2; }
    .div-blau2 { grid-area: 2 / 1 / 3 / 2; }

    .blau2 h2{
        padding: 0 0 0 0;
    }

    /* STADT FREIBERG */

    .freiberg{
        height: 140vw;
    }

    .freiberg img{
        width: 80vw;
        height: 80vw;
    }

    .freiberg-bild img{
       top: 150vw;
       width: 85vw;
       height: 30vw;
       display: none;
    }

    .button-arbeitsproben-freiberg{
        position: relative;
        top:-30vw;
        left: 60vw;
        font-family: superior title;
        font-weight: lighter;
        color: #1e274a;
        font-size: 1.2rem;
        display: block;
    }

    .button-arbeitsproben-freiberg a{
        text-decoration: none;
        color: #1e274a;
    }

    .button-arbeitsproben-freiberg:hover a{
        color: #ff3c3c;
        font-style: italic;
        cursor: pointer;
    }

    

    /* NATURNNAH-HOF*/
    .nnh{
        height: 150vw;
    }

    .nnh-bild3{
        width: 72vw;
        height: 80vw;
    }

    .nnh-bild1{
        display: none;
    }

    .nnh-bild2{
        display: none;
    }

    .button-arbeitsproben-nnh{
        position: relative;
        top:-16vw;
        left: 60vw;
        font-family: superior title;
        font-weight: lighter;
        color: #1e274a;
        font-size: 1.2rem;
        display: block;   
    }

    .button-arbeitsproben-nnh a{
        text-decoration: none;
        color: #1e274a;
    }

    .button-arbeitsproben-nnh:hover a{
        color: #ff3c3c;
        font-style: italic;
        cursor: pointer;
    }

    /* ELBFLORENZ CITY TOUR*/
    .ect{
        height: 150vw;
    }

    .ect-bild1{
        width: 83vw;
        height: 83vw;
    }

    .ect-bild2{
        display: none;
    }

    .button-arbeitsproben-ect{
        position: relative;
        top:-25vw;
        left: 60vw;
        font-family: superior title;
        font-weight: lighter;   
        font-size: 1.2rem;
        display: block;  
    }

    .button-arbeitsproben-ect a{
        text-decoration: none;
        color: white;
    }

    .button-arbeitsproben-ect:hover a{
        color: #ff3c3c;
        font-style: italic;
        cursor: pointer
    }

    /* ARGENTI LUNA */
    .argenti-luna{
        height: 140vw;
    }

    .argenti-luna img{
        width: 80vw;
        height: 80vw;
    }

    .button-arbeitsproben-luna{
        position: relative;
        top: -11vw;
        left: 60vw;
        font-family: superior title;
        font-weight: lighter;
        font-size: 1.2rem;
        display: block;
    }

    .button-arbeitsproben-luna a{
        text-decoration: none;
        color: #1e274a;
    }

    .button-arbeitsproben-luna:hover a{
        color: #ff3c3c;
        font-style: italic;
        cursor: pointer;

    }

    /* PDF-STANDARDS */
    .pdf{
        height:315vw;
    }

    .bilder-pdf{
        grid-template-columns: repeat(1, 3fr);
        grid-template-rows: 3fr;
        grid-row-gap: 30px; 
        top: 45vw;
    }

    .pdf-bild1{
        width: 80vw;
        height: 80vw;
    }

    .pdf-bild2{
        width: 80vw;
        height: 80vw;
    }

    .pdf-bild3{
        width: 80vw;
        height: 80vw;
    }

    .button-arbeitsproben-pdf{
        position: relative;
        top:252vw;
        left: 60vw;
        font-family: superior title;
        font-weight: lighter;
        font-size: 1.2rem;
        display: block;
    }

    .button-arbeitsproben-pdf a{
        text-decoration: none;
        color: white;
    }

    .button-arbeitsproben-pdf:hover a{
        color: #ff3c3c;
        font-style: italic;
        cursor: pointer;

    }

    /* FESTIVAL "KING'S LAIR" */
    .kings-lair{
        height: 565vw;
    }

    .kl-bild1 {
        width: 60vw;
        height: 60vw;
        
    }

    .kl-logos{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        justify-items: center;
    }

    .logo1 { grid-area: 1 / 1 / 2 / 3; }
    .logo2 { grid-area: 2 / 1 / 3 / 2; }
    .logo3 { grid-area: 2 / 2 / 3 / 3; }
    .logo4 { grid-area: 3 / 1 / 4 / 2; }
    .logo5 { grid-area: 3 / 2 / 4 / 3; }

    .logo1 img{
        padding: 0 100 0 100 ;
        width: 37vw;
        height: 32vw;
    }

    .logo2 img{
        width: 29vw;
        height: 25vw;
    }

    .logo3 img{
        width: 29vw;
        height: 25vw;
    }

    .logo4 img{
        width: 31vw;
        height: 26vw;
    }

    .logo5 img{
        width: 29vw;
        height: 25vw;
    }

    .div-kl-zeichnungen{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        justify-items: center;
    }

    .zeichnung1 { grid-area: 1 / 1 / 2 / 2; }
    .zeichnung2 { grid-area: 2 / 1 / 3 / 2; }
    .zeichnung3 { grid-area: 3 / 1 / 4 / 2; }
    .zeichnung4 { grid-area: 4 / 1 / 5 / 2; }
    .zeichnung5 { grid-area: 5 / 1 / 6 / 2; }
    .zeichnung6 { grid-area: 6 / 1 / 7 / 2; } 

    .zeichnung1 img{
        width: 45vw;
        height: 45vw;
       
    }

    .zeichnung2 img{
        width: 48vw;
        height: 48vw;
        
    }

    .zeichnung3 img{
        width: 40vw;
        height: 40vw;
        
    }

    .zeichnung4 img{
        width: 47vw;
        height: 47vw;
       
    }

    .zeichnung5 img{
        width: 40vw;
        height: 40vw;
        
    }

    .zeichnung6 img{
        width: 47vw;
        height: 47vw;
        
    }

    .button-arbeitsproben-kl{
        position: relative;
        top:-9vw;
        left: 60vw;
        font-family: superior title;
        font-weight: lighter;
        font-size: 1.2rem;
        display: block;
    }

    .button-arbeitsproben-kl a{
        text-decoration: none;
        color: #1e274a;
    }

    .button-arbeitsproben-kl:hover a{
        color: #ff3c3c;
        font-style: italic;
        cursor: pointer;

    }
}

/*500px*/
@media screen and (max-width:500px){

    /* ÜBER MICH SECTION*/
    #übermich{
        height: 100vh;
    }

    .text1{
        bottom: 20vw;
    }

    .text2{
        bottom: 14vw; 
    }
   
    /* STADT FREIBERG */
    .freiberg {
        height: 220vw;
    }

    /* NATURNNAH-HOF*/
    .nnh {
        height: 249vw;
    }

    /* ELBFLORENZ CITY TOUR*/
    .ect {
        height: 236vw;
    }

    /* ARGENTI LUNA */
    .argenti-luna {
        height: 231vw;
    }

     /* PDF-STANDARDS */
     .pdf {
        height: 390vw;
    }

    .bilder-pdf {
        top: 90vw;
    }

    /* FESTIVAL "KING'S LAIR" */
    .kings-lair {
        height: 697vw;
    }
}