/* 
    CSS RESET
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 100%;
}

ul,
ol {
    list-style: none;
}

video {
    width: 100%;
}


/*
    CSS STYLES
*/

@font-face {
    font-family: "NeutralFace";
    src: url("../fonts/NeutralFace.woff") format("woff");
}

body {
    width: 100%;
    overflow-x: hidden;
    font-family: "NeutralFace", Helvetica, sans-serif;
    font-size: 10vw;
    text-transform: uppercase;
    text-align: center;
}

.flex {
    display: flex; 
    align-items: flex-start;
}


.Bild {
    max-width: 100%;
    display: block;
    height: auto;
}

button {
    all: unset;
    cursor: pointer;
}

video {
    width: 60vw;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

dialog[popover] {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

section {
    min-height: 100vh;
    background-repeat: repeat;
    background-size: 100vw auto;
}

h1 {
    margin-top: 13vh;
    margin-bottom: 10vh;
}

.beschreibung p {
    margin: 0;
    padding: 0;
    line-height: 1.1;
    font-size: 2.2vw;
}

.sound {
  position: relative; 
}

.player-sticky {
  position: sticky;
  top: 50%;             
  left: 0;    
  transform: translateY(-50%);
  width: 50px;
}

.player-sticky audio {
  width: 100%;         
  display: block;
}

/*chili------------------------------------------------------------*/

#chili {
    background-image: url(../../content/svg/chili.svg);
    position: relative;
    padding-bottom: 20vh;
    margin-top: 40vh;
}

#chili audio {
    z-index: 10;
    width: clamp(100px, 5vw, 320px);
    top: 7vh;
    left: 40.8vw;
}

.Kartoffel_1 {
    margin-left: 60vw;
    width: 28vw;
    position: relative;
    margin-top: 10vh;
}

.button-kartoffel {
    width: 50vw;
    display: block;
    position: relative;
    left: 5vw;
} 

.Kartoffel_Ringe { 
    margin-left: 10vw;
    width: 30vw;
}

.Topf_Leer { 
    width: 50vw;
    margin-top: 10vh;
}

.Topf_Kartoffel {
    width: 40vw;
    margin-top: 15vh;
}

.Pilze_Box { 
    width: 30vw;
    margin-left: 20vw;
}

.button-zwiebel { 
    width: 13vw;
    display: block;
    position: relative;
    left: 70vw;
}

.Zwiebel_3 { 
    position: relative;
    left: 20vw;
    width: 25vw;
}


.Pilze_Ringe { 
    margin-top: 0vh; 
    left: 0vw;
    width: 40vw;
}

.button-pfanne { 
    width: 45vw;
    display: block;
    margin-left: 20vw;
}

.Ei_Unfertig { 
    margin-left: 3vw;
    width: 30vw;
    margin-top: 10vh;
}

.Ei_Fertig {  
    margin-left: 20vw;
    width: 30vw;
}

.Pfanne_Pilze_Fertig { 
    margin-top: 15vh;
    width: 46vw;
}

.button-hack { 
    width: 57vw;
    display: block;
    margin-left: 40vw;
}

.Topf_Kartoffel_Fertig { 
    margin-left: 3vw;
    width: 40vw;
}

.Oel { 
    margin-left: 15vw;
    width: 25vw;
    margin-top: 20vh;
}

.Form { 
    margin-left: 3vw;
    width: 40vw;
    margin-top: 10vh;
}


.Pfanne_Hack_Fertig { 
    margin-top: 25vh;
    width: 55vw;
}

.Bohnendosen { 
    margin-left: 10vw;
    width: 23vw;
}

.Bohnen_Offen { 
    margin-left: 20vw;
    width: 23vw;
}

.Pfanne_Bohnen {  
    margin-left: -5vw;
    width: 52vw;
    margin-top: 20vh;
}

.button-pulver { 
    width: 20vw;
    display: block;
    margin-left: 20vw;
    margin-top: 25vh;
}

.Waschbecken_Voll { 
    margin-left: 0vw;
    width: 70vw;
}

.Pfanne_Alles_Fertig { 
    margin-left: 40vw;
    width: 55vw;
}

.Form_1_Schicht { 
    margin-left: 5vw;
    width: 44vw;
}

.button-2schicht {  
    width: 45vw;
    display: block;
    position: relative;
    left: 48vw;
    margin-top: 2vh;
}

.Form_3_Schicht { 
    margin-top: 3vh; 
    margin-left: 2vw;
    width: 44vw;
}

.Form_4_Schicht { 
    margin-top: 3vh; 
    margin-left: 46vw;
    width: 50vw;
}

.Chili_Kaese { 
    margin-left: 0vw;
    width: 50vw;
    margin-top: 20vh;
}

.button-kaese { 
    width: 25vw;
    display: block;
    margin-left: 13vw;
    margin-top: 20vh;
}

.Handschuh { 
    margin-top: 20vh; 
    margin-left: 15vw;
    width: 20vw;
}

.Chili_Ofen {  
    width: 55vw;
    margin-top: 40vh;
}

.Chili_Gebacken { 
    margin-top: 15vh; 
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;
}

/*pasta-------------------------------------------------*/

#pasta {
    background-image: url(../../content/svg/pasta.svg);
}

.videotopf { 
    margin-top: 0vh; 
    margin-left: 0vw;
    width: 40vw;
    display: block;
}

.videpilze-waschen { 
    margin-top: 15vh;
    width: 35vw;
    margin-left: 5vw;
    display: block;
}

.pilze { 
    width: 26vw;
    margin-left: 20vw;  
}

.videobrett { 
    margin-left: 50vw;
    width: 30vw;
    display: block;
}

.pilze_ringe { 
    margin-left: 10vw;
    width: 35vw;
}

.topf_kocht { 
    margin-left: 0vw;
    width: 40vw;
}

.nudel { 
    width: 20vw;
    margin-left: 25vw;
}

.nudel_unfertig { 
    margin-top: 15vh; 
    width: 45vw;
    margin-left: 30vw;
}

.videopfanne-pilze { 
    width: 44vw;
    display: block;
}

.videoknoblauch { 
    margin-top: 10vh;
    width: 8vw;
    display: block;
    margin-left: 30vw;
}

.salz { 
    margin-left: 60vw;
    width: 13vw;
}

.videopfeffer { 
    margin-top: 10vh; 
    margin-left: 10vw;
    width: 13vw;
    display: block;
}

.videonudel-fertig { 
    margin-left: 30vw;
    margin-top: 20vh;
    width: 44vw;
    display: block;
}

.thunfisch { 
    margin-top: 20vh; 
    margin-left: 10vw;
    width: 15vw;
}

.videosahne { 
    margin-top: 15vh; 
    margin-left: 30vw;
    width: 13vw;
    display: block;
}

.videopfanne-sahne { 
    margin-right: 0vw;
    margin-top: 15vh;
    width: 44vw;
    display: block;
}

.videozange { 
    margin-left: 20vw;
    width: 13vw;
    display: block;
    margin-top: 20vh;
}

.videoteller { 
    margin-top: 20vh; 
    margin-left: 25vw;
    width: 55vw;
    display: block;
}

/*PFANNKUCHEN-----------------------------------*/

#pfannkuchen {
    background-image: url(../../content/svg/pfannkuchen.svg);
    padding-bottom: 19vh;
    position: relative;
}

#pfannkuchen audio {
    z-index: 10;
    width: clamp(100px, 5vw, 320px);
    top: 7vh;
    left: 40.8vw;
}

.FORM {
    width: 35vw;
    margin-left: 10vw;
    margin-top: 20vh;
}

.videoeier {
    width: 20vw;
    margin-left: 15vw;
    margin-top: 10vh;
    display: block;
}

.LOEFFEL {
    width: 8vw;
    margin-left: 30vw;
    margin-top: 20vh;
}

.videoSALZ {
    width: 15vw;
    margin-left: 30vw;
    margin-top: 50vh;
    display: block;
}

.videoZUCKER {
    width: 22vw;
    margin-left: 30vw;
    margin-top: 10vh;
    display: block;
}

.BESEN {
    width: 10vw;
    margin-left: 10vw;
    margin-top: 15vh;
}

.videoOEL {
    width: 10vw;
    margin-left: 50vw;
    margin-top: 10vh;
    display: block;
}

.videoMEHL {
    width: 22vw;
    margin-left: 40vw;
    margin-top: 10vh;
    display: block;
}

.videoSIEB {
    width: 22vw;
    margin-left: 10vw;
    margin-top: 15vh;
    display: block;
}

.videoGLAS {
    width: 14vw;
    margin-left: 20vw;
    margin-top: 40vh;
    display: block;
}

.MILCH {
    width: 11vw;
    margin-left: 20vw;
    margin-top: 15vh;
}

.videoWASSERKOCHER {
    width: 30vw;
    margin-left: 30vw;
    margin-top: 20vh;
    display: block;
}

.videoFORMEIER {
    width: 35vw;
    margin-left: 30vw;
    margin-top: 10vh;
    display: block;
}

.PFANNE{
    width: 44vw;
    margin-left: 5vw;
    margin-top: 15vh;
}

.videoPINSEL {
    width: 6vw;
    margin-left: 30vw;
    margin-top: 10vh;
    display: block;
}

.GESCHIRR {
    width: 30vw;
    margin-left: 55vw;
    margin-top: 15vh;
}

.WASCHBECKEN {
    width: 60vw;
    margin-left: 3vw;
    margin-top: 15vh;
    margin-bottom: 30vh;
}

.videoSCHOEPFKELLE {
    width: 13vw;
    margin-left: 15vw;
    display: block;
}

.PFANNENWENDER {
    width: 10vw;
    margin-left: 40vw;
    margin-top: 25vh;
}

.videoPFANNEKUCHEN {
    width: 44vw;
    margin-left: 30vw;
    display: block;
}

.videoPFANNEKUCHEN2{
    width: 44vw;
    margin-left: 3vw;
    margin-top: 15vh;
    display: block;
}

.TELLERKUCHEN {
    width: 35vw;
    margin-left: 20vw;
    margin-top: 35vh;
}

.BUTTER {
    width: 20vw;
    margin-left: 20vw;
    margin-top: 15vh;
}

.videoBUTTERGABEL {
    width: 10vw;
    margin-left: 30vw;
    margin-top: 25vh;
    display: block;
}

.videoPFANNKUCHEN {
    margin:0 auto;
    margin-top: 25vh;
    display: block;
    width: 60vw;
}