@import "_reset.css";

/*Basic Einstellunegn*/

/*
1vw = 1% bildschirmbreite
1vh = 1% bildschirmhöhe
*/

html {
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 0.9em; 
    font-family: 'Minipax', serif;
    
    font-style: normal;
    font-weight: 100;
    /*scroll-behavior: smooth;*/
}

body {
    font-size: 0.9em; /* 15px */
    line-height: 1.3;
}

#pagetitle {
    cursor: pointer;
    display: inline-block;
    position:fixed;
}

#discription {
    padding-top: 1.4em;
display: none;
line-height: 1.4;
    
}

header {
    font-size: 0.9em; 
    padding: 1em;
    color: #FC3737;
}

/*Einstellungen für Übersicht auf dem Handy*/

.preview {
     display: none;
}


/*Einstellungen für Projekt ansicht*/



  h3{
text-align:center;
}

h4 { display: none;}
/*Horizontales Scrollen*/




/*Horizontales Scrollen*/

.scrolling-inhalt {
 display: flex;
    width: 100%}


.scrolling-wrapper {
  overflow-x: auto;
  width: 100%;
    padding-top: 2em;}



.projektbeschreibung{
    text-align: left;
    font-weight: 100;
    font-size: 0.9em;
    padding-right: 2em;
    padding-left: 1.2em;
    min-width: 23em;
    letter-spacing:0.1px;
   
}


/*Hier stell ich ein wie groß die Bilder minimal sind  */

/*Bilder Neuburg */
.projektgross {
    min-width: 100%;
    }

.projektgross img {
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
  }

/*Einzelne Anpassungen für bestimmte Bilder*/

.projektgross.E {
    min-width: 58%;
    padding-top: 1em;}

.projektgross.D {
    padding-top: 1em;}

.projektgross.V {
    width: 110%;
    padding-top: 1em;}

.projektgross.F {
    width: 110%;
    padding-top: 0.4em;}

.projektgross.S {
    min-width: 58%;}




/*Bilder Müllviecher Karten */

.projektgrossmuellviecher {
    min-width: 100%;}

.projektgrossmuellviecher img {
     width: 100%;
    padding-left: 2em;
    padding-right: 2em;}


/*Einzelne Anpassungen für bestimmte Bilder*/

.projektgrossmuellviecher.E {
   min-width: 80%; 
    padding-top: 2em;
    }
.projektgrossmuellviecher.Z {
   min-width: 75%; 
}
.projektgrossmuellviecher.D {
   min-width: 70%;
padding-top: 4em;}

.projektgrossmuellviecher.V {
   min-width: 90%;
padding-top: 3em;}




/*Bilder Wohnheim */
.projektgrosswohnheim {
      min-width: 100%;}

.projektgrosswohnheim img {
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;}

/*Einzelne Anpassungen für bestimmte Bilder*/

.projektgrosswohnheim.E {
      min-width: 96%;
padding-top: 1em;}

.projektgrosswohnheim.Z {
        min-width: 93%;
      padding-top: 1em;}


.projektgrosswohnheim.D {
        min-width: 93%;
      padding-top: 1em;}

.projektgrosswohnheim.V {
        min-width: 93%;
    padding-top: 1em;
}

.projektbeschreibung.W {
  padding-top: 2em;  
    
}



/*Bilder Müllviecher Flyer */
.projektgrossmuelviecherflyer {
      min-width: 100%;}

.projektgrossmuelviecherflyer img {
     padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    width: 100%;}

/*Einzelne Anpassungen für bestimmte Bilder*/
.projektgrossmuelviecherflyer.E {
     min-width: 70%;
    padding-top: 2em;;
    }
.projektgrossmuelviecherflyer.Z {
     min-width: 33%;
    }

.projektgrossmuelviecherflyer.D {
     min-width: 60%;
    }

.projektgrossmuelviecherflyer.V {
     min-width: 44%;
    }


/*Bilder Parcours */
.projektgrossparcours{
      min-width: 50%;}

.projektgrossparcours img {
    width: 100%;}


/*Bilder Liza */
.projektgrossliza{
    min-width: 100%;
padding-left: 2em;
padding-right: 2em;}

.projektgrossliza img {
    padding-bottom: 1em;
    padding-top: 1em;
    width: 100%;}

/*Einzel Anpassungen */

.projektgrossliza.L {
  
    min-width: 35%; 
    
}
.projektgrossliza.D {
     min-width:74%;  }
 
.projektgrossliza.V {
     min-width:80%; }
 





/*Responsive / Media */


/*So sehen Projekte auf mobile aus */

.projects {
        display: block;
        position: relative;
         }

.project {
    display: flex;
    justify-content: center;
}

.project img {
    object-fit: contain;
    cursor: pointer;
}


    

    
/*So dann in zweier Rheie (für IPad etc.) */
/*
___________________________________ */

@media (min-width: 600px) {
    
    .preview {
        
        display: block;
    }
    
    h3{
            display: none;}
    
     .projects {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1em;
    }
    
    .project {
        width: 50%;
        padding-left: 1em;
    }

    .full-project {
        display: none;
    padding-bottom: 1em;}
        height: 100vh;
    
    



    h3{display:none;}

    h4{ display: block;
       text-align:center; 
        font-size: 0.9em;
        
    padding-top: 2em;
        
        }

    #pagetitle {
        z-index:1;
    }


    .uebersichtsbild { 
        display: flex;
        padding-top: 2em;
        align-items:center;
        justify-content: space-around;
        width: 90%;
        align-content: space-around;

       } 


    /*Anpassungen für bestimmte Bilder auf der Übersicht*/

    
     .uebersichtsbild.E {
        width: 110%; 
         padding-left: 3em;
         padding-right: 3em; 
    }  

    .uebersichtsbild.Z {
        width: 85%; 
         padding-left: 2.6em;
        padding-top: 5em;
    }            


    .uebersichtsbild.D {
        width: 100%;
        padding-top: 0em;
        padding-left: 1em;
    }

    .uebersichtsbild.V {
        width: 65%; 
        padding-top:2em;
    }

    .uebersichtsbild.F {
        width: 50%;
        padding-top:4.5em;
        }

    .uebersichtsbild.S {
        width: 35%; 
        padding-top: 5em;}
  
    

    
  /*Scroll Container */

        .projektgrosswohnheim.E {
              min-width: 80%;
    padding-top: 2em;}

    
        .projektgrosswohnheim.Z {
                min-width: 80%;
             }


        .projektgrosswohnheim.D {
                min-width: 80%;
              }

        .projektgrosswohnheim.V {
                min-width: 80%;
        }
    
              /*Liza Dries */

        .projektgrossliza.L {
            min-width: 35%; 

        }
        .projektgrossliza.D {
             min-width: 70%;  }

        .projektgrossliza.V {
             min-width:80%; }

    
    .projektbeschreibung {
        padding-left: 1em;
        min-width: 18em;
        
    }

}


/*So dann in dreier Rheie (für PC großer Bildschrim) 
___________________________________ */

@media (min-width: 1000px) {
        .project {
            width: 33.33%;}

    
    

        h3{
            display: none;}


        h4{
            text-align: center;
            padding-top: 8em;
            padding-right: 0.7em;
           }

.projektbeschreibung {
     letter-spacing:0.1px;
        min-width: 20em;
        
    }

    /*Übersichtsseite */

        .uebersichtsbild { 
            display: flex;
            align-items:center;
            justify-content: space-around;
            width: 90%;
           padding-top:5em;
            padding-bottom: -2em;
            align-content: space-around;
            }    

        /*Anpassungen für bestimmte Bilder auf der Übersicht*/
         .uebersichtsbild.E {
            width: 100%; 
        
             padding-left: 1em;
        }  

         .uebersichtsbild.Z {
            width: 92%; 
             padding-left: 2.6em;
             padding-top: 1em;
        }            


        .uebersichtsbild.D {
            width: 100%;
            padding-top: 1em;
            padding-right: 2em;
        }

        .uebersichtsbild.V {
            width: 77%; 
            padding-top: 2em;
            padding-left: 1em;
        }

        .uebersichtsbild.F {
            width: 68%;
            padding-left: 4em;
            padding-top: 2em;
            }

        .uebersichtsbild.S {
            width: 45%; 
            padding-top:2em;
            padding-left: 2em;}


       /*Scroll-Container */ 

        .scrolling-wrapper {
            padding-top: 3em; 
        }

    
     .full-project {
         height: 100vh;}
    
    

            /*Neuburg*/

        .projektgross.E {
            min-width: 35%;
            padding-top: 1em;}

            .projektgross.Z {
            min-width: 63%;
            padding-top: 0em;}

        .projektgross.D {
            min-width: 63%;
            padding-top: 1em;}

        .projektgross.V {
           min-width: 63%;
            padding-top: 1em;}

        .projektgross.F {
            min-width: 63%;
            padding-top: 0.4em;}

            .projektgross.SE {
            min-width: 63%;
            padding-top: 0.4em;}

        .projektgross.S {
            min-width: 35%;}


        /*TAR*/

        .projektgrossmuellviecher.E {
           min-width: 50%; 
            }
        .projektgrossmuellviecher.Z {
           min-width: 35%;
               padding-top: 1em; 
        }
        .projektgrossmuellviecher.D {
           min-width: 37%;
        padding-top: 3em;}

        .projektgrossmuellviecher.V {
           min-width: 70%;
        padding-top: 2em;}



        /*Wohnheim*/

        .projektgrosswohnheim.E {
              min-width: 58%;}

        .projektgrosswohnheim.Z {
                min-width: 58%;
             }


        .projektgrosswohnheim.D {
                min-width: 58%;
              }

        .projektgrosswohnheim.V {
                min-width: 58%;
        }



            /*Flyer*/
        .projektgrossmuelviecherflyer.E {
             min-width: 43%;
            }
        .projektgrossmuelviecherflyer.Z {
             min-width: 17%;
            padding-top: 3em;
            }

        .projektgrossmuelviecherflyer.D {
             min-width: 30%;
            padding-top: 3em;
            }

        .projektgrossmuelviecherflyer.V {
             min-width: 20%;
            padding-top: 3em;
            }


            /*Bilder Parcours */
        .projektgrossparcours{
              min-width: 30%;}



            /*Liza Dries */

        .projektgrossliza.L {
            min-width: 25%; 

        }
        .projektgrossliza.D {
             min-width:44%;  }

        .projektgrossliza.V {
             min-width:50%; }


}