*{
 font-family: sans-serif;
 margin: 0px;
}

:root{
  --main-color: #b2d4b2;
  --secondaryColor: #6a93b0;
  --mainColorBlur: rgba(178, 212, 178, 0.765);
  --secondaryColorBlur: rgba(106, 147, 176, 0.492);
}

a{
  color: black;
  text-decoration: none;
}

/*Mobile Layout*/

.container-fluidIndex{
  display: grid;
  height: 225vh;

  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 0.2fr 145px 2fr 2fr 150px 0.5fr 0.2fr;

  grid-template-areas: "header header"
                       "nav nav"
                       "article article"
                       "GoogleMaps noIdea"
                       "links links"
                       "footer footer"
                       "footer2 footer2";
}

@media only screen and (max-width: 25em){
  .IphoneSE{
    display: none;
  }

  .container-fluidIndex{
    height: 300vh;

    grid-template-rows: 60px 120px 2fr 2fr 0.5fr 0.5fr 0.2fr;
  }
}

/*Desktop*/

@media only screen and (min-width: 80em){
  .container-fluidIndex{
    display: grid;
    height: 144vh; 
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 60px 140px 0.5fr 1.5fr 0.1fr 0.5fr 0.1fr; 
    grid-template-areas: 
      "header header header header header"
      "nav nav nav nav nav"
      "article article article noIdea noIdea"
      "article article article GoogleMaps GoogleMaps"
      "article article article links links"
      "footer footer footer footer footer"
      "footer2 footer2 footer2 footer2 footer2";
  }
}

@media only screen and (max-width: 70em) {

  .desktop{
    display: none;
  }
  
}

@media only screen and (min-width: 70em){
  .mobile{
    display: none;
  }
}


/*Generel*/

.mobile{
  z-index: 9;

}

.header{
  grid-area: header;
  
}

.nav{
  grid-area: nav;

  position: sticky;
  top: 0px;
  z-index: 11;

  background-color: var(--main-color);
}

.article{
  grid-area: article;
}

.googleMaps{
  grid-area: GoogleMaps;
  border: 2px solid var(--secondaryColor);
  
}

.links{
  grid-area: links;
  background-color: var(--secondaryColor);
}

.noIdea{
  grid-area: noIdea;

  background-color: var(--secondaryColor);
}

.footer{
  grid-area: footer;

  background-color: var(--main-color);
}

.footer2{
  grid-area: footer2;

}

/*Index*/

.indexNavigationMainText{
  font-weight: 32px;
  font-size: 32px;
  color: black;
  text-decoration: none;
  display: flex;
  justify-content: center;
}

.indexNavigationMainText:hover{
  color: black;
}

ul{
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 24px;
}

li{
  list-style: none;
  margin-right: 20px;
}

li a{
  text-decoration: none;
  color: black;
}

li a:hover{
  color: black;
}

li:hover{
  cursor: pointer;
  border-bottom: 2px solid black;
}

.dropdown{
  padding-bottom: 40px;
}

.noBold{
  font-weight: normal;
}

#noStuff{
  border-bottom: none;
}


/*index Article*/


.IndexArticleDisplayFlex{
  display: grid;  
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "Picture Aside";
}

@media only screen and (max-width: 70em){
 
 .IndexArticleDisplayFlex{
  grid-template-rows: 0.5fr 0.2fr;

  grid-template-areas: "Pictrue Picture"
                       "Aside Aside";
 }

 .IndexArticleMainPictureAside{
    margin-bottom: 20px;
 }

 .IndexArticleMainPictureDiv{
  padding-right: 10%;


 }

}

.IndexArticleDisplayFlex{
  margin-top: 20px;
}

.article{
  display: flex;
  align-items: center;
}

.IndexArticleMainPictureDiv{
  margin-top: 40px;
  margin-left: 10px;

  grid-area: Picture;
}

.IndexArticleMainPictureAside{
  background-color: var(--secondaryColorBlur);
}

.IndexArticleMainPictureAside p{
  font-size: 20px;
}

.IndexArticleMainPictureAside{
  margin-top: 40px;
  margin-left: 10px;
  margin-right: 20px;
  grid-area: Aside;
}

.IndexArticleMainPictureAside div{
  text-align: end;
}

.IndexArticleMainPictureAside top{
  position: relative;
  top: -30px;
}

.IndexArticleMainPictureAside p , .IndexArticleMainPictureAside h2{
  padding-left: 10px;
}

/*Index Aside*/

.IndexAsideFlex{
  display: flex;
}

.IndexAsideFlex div{
  margin-top: 20px;
  margin-left: 20px;
}


.IndexAsideFlex a{
  display: block;
  text-decoration: none;
  color: black;
}

/*Index Links*/

.IndexLinks{
  margin-top: 20px;
}

.IndexLinksHeadline{
  margin-top: 20px;
  margin-left: 5px;

}

.IndexLinksInstagram{
  margin: 25px;
  margin-left: 35px;
}

.IndexLinksFacebook{
  margin-top: 17px;
  margin-bottom: 15px;
  margin-left: 40px;
}

.indexAsideLinksText{
  display: flex;
}

.indexAsideLinksText p{
  padding-right: 5px;
  padding-left: 10px;
  position: relative;
  top: -20px;
}

/*Index GoogleMaps*/

.width-685{
  display: none;
}

.mobileOpen{
  display: inline;
}

.mobileOpen div{
  padding-left: 20px;
}

.mobileOpen h2{
  color: var(--main-color);
  padding-right: 10px;
}

@media only screen and (min-width: 42em){

  .width-685{
    display: inline;
  }

  .mobileOpen{
    display: none;
  }
}

@media only screen and (max-width: 42em) {
  .width-685 {
    display: none;
  }

  .mobileOpen{
    display: inline;
  }
}

.indexGoogleMapsOpen{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.5fr 1fr;
  grid-template-areas: "headline headline"
                       "days hours";

  padding-top: 20px;
  margin: 0 auto;

}

.indexGoogleMapsHeadline{
  grid-area: headline;
  color: var(--main-color);
}

.indexGoogleMapsDays{
  grid-area: days;
  text-align: center;
}

.indexGoogleMapsHours{
  grid-area: hours;
}


.indexGoogleMapsOpen h2{
  text-align: center;
  padding-top: 10px;
}

/*Index Footer*/

@media only screen and (max-width: 29em){
  .footer img{
    display: none;
  }

  .IndexFooterH2 {
    text-align: center;
  }
  
  .footer div p {
    display: inline-block;
    margin: 0 10px; /* Abstand zwischen den Links */
  }
  
  .footer div {
    text-align: center;
  }
}

.footer div {
  float: right;
  margin-top: 10px;
  margin-right: 40px;
}

.footer div p{
  font-weight: bold;
}

.footer div p:hover{
  cursor: pointer;
}

.footer a{
  text-decoration: none;
  color: black;
}

/*Index Footer2*/

.footer2 p{
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
}

/*Bibiliothek Änderungen*/

.dropdown img{
  display: flex;
  margin-top: 30px;
  margin-left: 20px;
}

.dropdown button:hover{
  background-color: var(--main-color);
}

.dropdown:hover button{
  background-color: var(--main-color);
}


.dropdown .content{
  width: 250px;

  background-color: var(--main-color);
  box-shadow: none;
}

.dropdown button{
  margin-top: 35px;
  margin-left: 20px;
  background-color: var(--main-color);
  color: black;
  font-size: 30px;
}

.dropdown .content input:active{
  display: block;
}

/*Unser Angebot*/

.container-fluidUnserAngebot{
  display: grid;
 grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 60px 140px 1fr 1fr 1fr 1fr 1fr 1fr 0.3fr 0.1fr;
  grid-template-areas: "header header"
                       "nav nav"
                       "Hose Hose"
                       "Roecke Roecke"
                       "Sakko Sakko"
                       "Kleid Kleid"
                       "Hemden Hemden"
                       "Bluse Bluse"
                       "TShirt TShirt"
                       "nonSense nonSense" 
                       "footer footer"
                       "footer2 footer2";
}

@media only screen and (min-width: 70em){
  .container-fluidUnserAngebot{
    height: 300vh;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 60px 140px 1fr 1fr 1fr 1fr 1fr 1fr 0.3fr 0.1fr;
    grid-template-areas: "header header"
                         "nav nav"
                         "Hose Roecke"
                         "Sakko Kleid"
                         "Hemden Bluse"
                         "TShirt nonSense"
                         "footer footer"
                         "footer2 footer2";
  }
}

/*General*/

.UnserAngebotHose{
  grid-area: Hose;
  border: 4px solid var(--secondaryColor);
  border-radius: 30px;
  margin: 20px;
}

.UnserAngebotRoecke{
  grid-area: Roecke;
  border: 4px solid var(--secondaryColor);
  border-radius: 30px;
  margin: 20px;
}

.UnserAngebotSakko{
  grid-area: Sakko;
  border: 4px solid var(--secondaryColor);
  border-radius: 30px;
  margin: 20px;
}

.UnserAngebotKleid{
  grid-area: Kleid;
  border: 4px solid var(--secondaryColor);
  border-radius: 30px;
  margin: 20px;
}

.UnserAngebotHemden{
  grid-area: Hemden;
  border: 4px solid var(--secondaryColor);
  border-radius: 30px;
  margin: 20px;
}

.UnserAngebotBluse{
  grid-area: Bluse;
  border: 4px solid var(--secondaryColor);
  border-radius: 30px;
  margin: 20px;
}

.UnserAngebotTShirt{
  grid-area: TShirt;
  border: 4px solid var(--secondaryColor);
  border-radius: 30px;
  margin: 20px;
}

.UnserAngebotNoSense{
  grid-area:nonSense;
  background-color: var(--secondaryColor);
}

.UnserAngebotNoSense h4{
  color: darkred;
  padding-right: 10px;
  padding-bottom: 10px;
}

/*Card*/


.UnserAngebotInhalt{
  display: grid;
  grid-template-columns: none;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "Carusel"
                       "linetext";
}

  
@media only screen and (min-width: 50em){

  .UnserAngebotInhalt{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas: "Carusel linetext";
  }
}


.UnserAngebotCards h3{
  text-align: right;
  margin-right: 20px;
  margin-top: 5px;
  font-size: 35px;
}

.UnserAngebotCards h3:hover{
  margin-right: 20px;
  cursor: pointer;
  color: var(--main-color);
}

.UNserAngebotText{
  grid-area: linetext;
  margin-left: 20px;
  margin-top: 120px;

  font-size: large;
}

/*Card Text Mobile and Desktop*/

.gridCardText{
  display: grid;
  grid-template-columns: 2fr 0.8fr;
  grid-template-rows: none;
  grid-template-areas: "textCard price";
}

.UnserAngebotTexttext{
  grid-area: textCard;
}

.UnserAngebotTextPrice{
  grid-area: price;
}

.desktopCard{
  display: none;
}

.mobileCard{
  display: inline;
}

@media only screen and (min-width: 440px) {
  .desktopCard{
    display: inline;
  }
  
  .mobileCard{
    display: none;
  }
}

@media only screen and (max-width: 440px) {
  .desktopCard{
    display: none;
  }
  
  .mobileCard{
    display: inline;
  }
}





.UnserAngebotCarusel{
  grid-area: Carusel;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

.UnserAngebotButton{
  margin-bottom: 20px;
  margin-right: 20px;
  margin-left: 20px;
  background-color: var(--main-color);
  border-radius: 20px;
  border: 1px solid var(--main-color);
  height: 50px;
  width: 150px;
  font-size: large;
  float: right;
}

.UnserAngebotButton a{
  text-decoration: none;
  color: black;
}

.UnserAngebotButton:hover{
  height: 45px;
  width: 145px;
}

/*Unser Angebot No Sence*/

.UnserAngebotNoSense h3{
  margin-left: 20px;
  margin-top: 20px;
  color: white;
}

.UnserAngebotNoSense p{
  margin-bottom: 5px;
  padding-right: 10px;
  font-size: larger;
}

.UnserAngebotNoSenseGrid{
  margin-top: 100px;
  align-items: center;
  display: grid;
  grid-template-columns: none;
  grid-template-rows: 1.5fr 1fr;
  grid-template-areas: "Pic"
                       "TextNoSence";
}


@media only screen and (min-width: 50em){
  .UnserAngebotNoSenseGrid{
    display: grid;
    margin-top: 50px;
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas: "Pic TextNoSence";
    height: 46vh;
  }

  .UnserAngebotNoSensePicture{
    grid-area: Pic;
    margin-left: 100px;
  }
}



.UnserAngebotNoSenseText{
  grid-area: TextNoSence;
  text-align: center;
}

.UnserAngebotNoSensePicture{
  grid-area: Pic;
  text-align: center;
}

/*About me*/

.container-fluidAboutUS{
  display: grid;
  height: 200vh;
  grid-template-rows: 60px 140px 500px 600px 160px 50px;
  grid-template-areas: "header"
                       "nav"
                       "searchform"
                       "AboutUsAside"
                       "footer"
                       "footer2";
}

@media only screen and (min-width: 70em){
  .container-fluidAboutUS{
    height: 200vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 60px 140px 1000px 160px 50px;
    grid-template-areas: "header header"
                         "nav nav"
                         "searchform AboutUsAside"
                         "footer footer"
                         "footer2 footer2";
  }

  .ContactFile{
    padding-right: 20px;
  }

}

/*Generel*/

.ContactFile{
  grid-area: searchform;
  margin: 20px;
}

.AboutUsAside{
  grid-area: AboutUsAside;
  background-color: var(--secondaryColor);
}

/*Aside*/

.AboutUsAside h2{
  margin-top: 10px;
  margin-left: 20px;
  color: white;
}

.AboutUsAside p{
  padding-left: 15px;
  margin-left: 25px;
  margin-right: 5px;
  font-size: larger;
}

.AboutUsAside{
  display: grid;
  grid-template-columns: none;
  grid-template-rows: 1fr 2fr;
  grid-template-areas: "AboutUsText"
                       "AboutUsPic";
}

@media only screen and (max-width: 70em){
  .AboutUsAside{
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 1fr 0.5fr;
    grid-template-areas: "AboutUsText AboutUsText"
                         "AboutUsPic AboutUsPic";
  }

  .AboutUsAsidePicture{
    margin-top: 20px;
  }
}

.aboutUsAsideText{
  grid-area: AboutUsText;
}

.AboutUsAsidePicture{
  grid-area: AboutUsPic;

  text-align: center;
}

.AboutUsAsidePicture img{
  padding-bottom: 20px;
}


@media only screen and (max-width: 70em){
  .AboutUsAside p{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 30px;
  }

}

.ContactFile{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr 1fr 1fr;

  grid-template-areas: "AUIMG1 AUIMG2"
                       "AUIMG3 AUIMG4"
                       "AUVIDEO AUVIDEO";

  padding-right: 20px;
}

.ContactFile img{
  padding-top: 20px;
  padding-left: 20px;
}

.ContactFile{
    text-align: center;
}

.AboutUSPic1{
  grid-area: AUIMG1;

}

.AboutUSPic2{
  grid-area: AUIMG2;
}

.AboutUSPic3{
  grid-area: AUIMG3;
}

.AboutUSPic4{
  grid-area: AUIMG4;
}

.AboutUSIMG{
  grid-area: AUVIDEO;
}

/*__--Produkte--__*/

.container-fluidProdukte{
  display: grid;
  height: 320vh;
  grid-template-columns: 1fr;
  grid-template-rows: 80px 140px 1fr 1fr 1fr 0.5fr 60px;
  grid-template-areas: "header"
                       "nav"
                      "ProdukteMasschneiderei"
                      "ProdukteunserAngebot"
                      "Plotter"
                      "footer"
                      "footer2";
}


@media only screen and (min-width: 70em){
  .container-fluidProdukte{
    display: grid;
    height: 150vh;
    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: 60px 140px 1fr 1fr 0.5fr 60px;
    grid-template-areas: "header header header"
                         "nav nav nav"
                         "ProdukteMasschneiderei ProdukteunserAngebot Plotter"
                         "ProdukteMasschneiderei ProdukteunserAngebot Plotter"
                         "footer footer footer"
                         "footer2 footer2 footer2";
  }
}

.ProdukteMasschneiderei{
  grid-area: ProdukteMasschneiderei;
  border: 4px solid var(--secondaryColor);
  border-radius: 20px;
  margin: 20px;

}

.ProdukteÄnderungen{
  grid-area: ProdukteunserAngebot;
  border: 4px solid var(--secondaryColor);
  border-radius: 20px;
  margin: 20px;
}

.ProduktePlotter{
  grid-area: Plotter;
  border: 4px solid var(--secondaryColor);
  border-radius: 20px;
  margin: 20px;
}

.ProduktePlotter p{
  position: relative;
  top: -10px;
}

.ProduktCard{
  display: grid;
  grid-template-areas: "ProduktMassbekleigungh2"
                       "ProduktMassbekleigungImg"
                       "ProduktMassbekleigungP";
}

@media only screen and (min-width: 70em){
  .ProduktCard p{
    margin-top: 100px;
  }

  .ProduktCard img{
    margin-top: 40px;
  }
}

.ProduktCard a{
  color: black;
  text-decoration: none;

  font-size: 16px;
}

.ProduktCard .img{

  text-align: center;
  grid-area: ProduktMassbekleigungImg;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;

}

.ProduktCard h2{
  justify-self: end;
  grid-area: ProduktMassbekleigungh2;
  margin-right: 25px;
  margin-top: 10px;
}

.ProdukteÄnderungen h2{
  text-align: end;
}

.ProduktCard h2:hover{
  color: var(--main-color);
}

.ProduktCard div p{
  margin-left: 20px;
  margin-right: 10px;
  font-size: 16px;
  grid-area: ProduktMassbekleigungP;
}

.ProduktCard button{
  height: 50px;
  width: 150px;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-right: 25px;
  justify-self: flex-end;

  background-color: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 20px;
}

.ProduktCard button:hover{
  height: 45px;
  width: 145px;
}

/*PopUpMassbekleidung*/

.disable{
  display: none;
}

.dialogCard{
  width: 1fr;
  height: 800px;

  margin-left: 20px;

  border: 4px solid var(--secondaryColor);
  background-color: var(--secondaryColor);
  border-radius: 20px;

  z-index: 11;
}

@media only screen and (min-width: 70em){
  .dialogCard{
    height: 650px;
  }
}

dialog button{
  float: right;
  color: white;
  font-size: large;
  border: none;
  background-color: var(--secondaryColor);

  width: 100px;
  height: 100px;
}

dialog button img{
  height: 50px;
  width: 50px;
}



dialog button:hover img{
  width: 45px;
  height: 45px;
}


/*Grid layout*/

/*Mobile Layout*/

.CardGrid{
  display: grid;
  grid-template-rows: 1fr 1fr 0.2fr;
  height: 70%;
  grid-gap: 2cap;

  grid-template-areas: "ProduktVideo ProduktText"
                       "ProduktVideo Img2"
                       "H2 H2";
}



.dialogCard{
  height: 80%;
  width: 60%;
}

@media only screen and (max-width: 70em){


  .dialogCard{
    width: 91%;
    height: 100%;
  }

  .ProdukteImg3, .ProdukteImg4, .ProdukteImg1{
    display: none;
  }

}

@media only screen and (max-width: 29em){ /*Layout for Smartphones because 2 Pictures are width for the screen*/
  .CardGrid{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 0.2fr;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%;
    grid-template-areas: "ProduktText ProduktText"
                         "ProduktText ProduktText"
                         "Img1 Img2"
                         "H2 H2" ;
  }

  .dialogCard{
    height: 94%;
    width: 79%;
  }

  .CardVideo{
    display: none;
  }

  .dialogCard{
    margin-right: 20px;
  }
}

/*Desktop*/

@media only screen and (min-width: 70em) {

  .CardGrid{
    display: grid;
    height: 600px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 2fr 6fr 1fr 0.2fr;
    grid-gap: 2cap;


    grid-template-areas: "ProduktVideo ProduktText ProduktText ProduktText ProduktText"
                         "ProduktVideo  ProduktText ProduktText ProduktText ProduktText"
                         "ProduktVideo  Img3 Img4 Img1 Img2" 
                         "H2 H2 H2 H2 H2";
  
  }
  
  .dialogCard{
    height: 90%;
    width: 94%;
  }

}

.CardVideo{
  text-align: center;
  grid-area: ProduktVideo;
}

.CardVideo video{
  width: 100%;
  /*height: 200%;*/
  object-fit: cover;
}

#ProdukteImg1{
  grid-area: Img1;
}


#ProdukteImg2{
  grid-area: Img2;
}

#ProdukteImg3{
  grid-area: Img3;
}

#ProdukteImg4{
  grid-area: Img4;
}

.CardText{
  grid-area: ProduktText;
  margin-bottom: 20px;
}

.dialogCard img{
  margin-top: 20px;
}

.CardText p{
  padding-top: 100px;
  padding-left: 30px;

  font-size: larger;
}

.CardText button{
  cursor: pointer;
}

.dialogCard h2{
  text-align: end;
  margin-top: 20px;
  grid-area: H2;
}

/*Impressum*/

.containerImpressum{
  display: grid;
  height: 125vh;
  grid-template-rows: 60px 140px 1fr 160px 60px;
  grid-template-columns: 1fr;
  grid-template-areas: "header"
                       "nav"
                       "impressum"
                       "footer"
                       "footer2";
}

.impressumArticle{
  grid-area: impressum;
  border: 4px solid var(--secondaryColor);
  border-radius: 20px;
  margin: 20px;

}

.impressumArticle p{
  padding-left: 30px;
}

.impressumArticle h1{
  padding-left: 20px;
}

.impressumArticle div{
  width: 365px;
}

.impressumArticle b{
  padding-left: 20px;
}

/*__--Blog / Galarie--__*/

.container-fluidGalarie{
  display: grid;
  grid-template-columns: none;
  grid-template-rows: 60px 140px 1fr 1fr 2fr 160px 60px;
  grid-template-areas: "header"
                       "nav"
                       "galarieVideo"
                       "galarieBilder"
                       "galarieBlog"
                       "footer"
                       "footer2";
  height: 350vh;
}

@media only screen and (min-width: 70em){
  .container-fluidGalarie{
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 60px 145px 1fr 1.2fr 160px 60px;
    grid-template-areas: "header header"
                         "nav nav"
                         "galarieVideo galarieBilder"
                         "galarieBlog galarieBlog"
                         "footer footer"
                         "footer2 footer2";
    height: 250vh;
  }
}

.galarieVideo{
  grid-area: galarieVideo;
}

.galarieBilder{
  grid-area: galarieBilder;
}

.galarieBlog{
  grid-area: galarieBlog;
}

/*Galarie - Video section*/

.galarieVideo h2{
  margin-top: 10px;
  margin-left: 20px;

  color: var(--secondaryColor);
}

.galarieVideo video{
  height: 80%;
  width: 90%;

  margin-top: 10px;
  margin-left: 20px;
}

/*Galarie - Bilder Section*/

.galarieBilder{
  display: grid;
  grid-template-columns: none;
  grid-template-areas: "galarieh2"
                       "galrieMobileCarusel";
}

@media only screen and (min-width: 70em){
  .galarieBilder{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "galarieh2 galarieh2 galarieh2"
                         "galarieBild1 galarieBild2 galarieBild3";

  }

  .mobileCarusel{
    display: none;
  }
}

.mobileCarusel{
  margin: 0 auto;

  width: 75%;

  margin-bottom: 20px;
}

@media only screen and (max-width: 70em){

  .galarieBild1Div{
    display: none;
  }

  .galarieBild2Div{
    display: none;
  }

  .galarieBild3Div{
    display: none;
  }

  .galarieVideo{
    text-align: center;
    margin-right: 20px;
  }

  .galarieVideo h2{
    text-align: start;
  }
}

.mobileCarusel{
  grid-area: galrieMobileCarusel;
}

.galarieBild1Div{
  grid-area: galarieBild1;
  text-align: center;

}

.galarieBild2Div{
  grid-area: galarieBild2;
  text-align: center;

}

.galarieBild3Div{
  grid-area: galarieBild3;
  text-align: center;

}

.galarieBilder h2{
  grid-area: galarieh2;
  justify-self: start;
  margin-left: 50px;
  margin-top: 10px;
  color: var(--secondaryColor);
}


/*Galarie - Blog Section*/

.BlogHeadline{
  grid-area: BlogHeadline;

  margin: 20px;
  margin-top: 40px;
  color: var(--secondaryColor);
}

.galarieBlog{
  display: grid;
  grid-template-rows: 0.2fr 1fr 1fr 1fr;
  grid-template-columns: none;
  grid-template-areas: "BlogHeadline"
                       "entry1"
                       "entry2"
                       "entry3";
}

@media only screen and (min-width: 70em){
  .galarieBlog{
    display: grid;
    grid-template-rows: 0.2fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "BlogHeadline BlogHeadline BlogHeadline"
                         "entry1 entry2 entry3";
    

  }
}   

.BlogEntry20240612{
  grid-area: entry1;
}

.BlogEntry20240512{
  grid-area: entry2;
}

.BlogEntry20240412{
  grid-area: entry3;
}

/*Galarie BlogCards*/

.BlogCard{
  display: grid;
  grid-template-rows: 0.5fr 1fr 0.2fr 2fr 0.2fr;
  grid-template-columns: none;

  grid-template-areas: "BlogCardHeadline"
  "BlogCardImg"
  "BlogCardh3"
  "BlogCardP"
  "BlogCardButton";

  border: 2px solid var(--secondaryColor);
  border-radius: 20px;
  margin: 20px;
  height: 88vh;

}

.BlogCardHeadline{
  grid-area: BlogCardHeadline;

  color: var(--secondaryColor);
  margin-left: 30px;
  margin-top: 20px;
}

.BlogCardImgDiv{
  grid-area: BlogCardImg;

  text-align: center;
}

.BlogCardh3{
  grid-area: BlogCardh3;

  color: var(--main-color);
  margin-left: 30px;
  margin-top: 30px;
}

.BlogCardpDiv{
  grid-area: BlogCardP;
}

.BlogCardp{
  margin-left: 40px;
}

.BlogCard button{
  grid-area: BlogCardButton;

  height: 50px;
  width: 150px;

  background-color: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 20px;
  font-size: large;
  justify-self: flex-end;
  margin: 20px;
}

.BlogCard button a{
  text-decoration: none;
  color: black;
}

.BlogCard button:hover{
  height: 45px;
  width: 145px;
}

/*Blog entry*/

.container-BlogEntry{
  display: grid;
  grid-template-rows: 60px 140px 1fr 0.5fr 160px 60px;
  grid-template-columns: none;
  grid-template-areas: "header"
                       "nav"
                       "BlogEntryArticle"
                       "BlogEntryPic"
                       "footer"
                      "footer2";
  height: 200vh;
}

@media only screen and (min-width: 70em){
  .container-BlogEntry{
    display: grid;
    grid-template-rows: 60px 140px 1fr 160px 60px;
    grid-template-columns: 1fr 0.5fr;
    grid-template-areas: "header header"
                         "nav nav"
                         "BlogEntryArticle BlogEntryPic"
                         "footer footer"
                        "footer2 footer2";
    height: 120vh;
  }

  .BlogEntryPictures{
    display: grid;
    grid-template-rows: 1fr 1fr ;
    grid-template-areas:
                         "BlogImg2"
                         "BlogImg3";
  }
  
}

.BlogEntryArticle{
  grid-area: BlogEntryArticle;
  margin: 20px;
  border: 2px solid var(--secondaryColor);
  border-radius: 20px;
}

.BlogEntryArticle h4{
  margin-left: 30px;
  margin-top: 20px;
}

.BlogEntryArticle p{
  margin-left: 40px;
  font-size: large;
}

.BlogEntryArticle a{
  font-weight: bold ;
}


.BlogEntryPictures{
    grid-area: BlogEntryPic;
}

.BlogEntryPictures img{
  margin-top: 20px;
}

@media only screen and (min-width: 48em){
  .BlogEntryPictures{
    display: grid;
    grid-template-columns: 1fr 1fr;

    grid-template-areas: "BlogImg2 BlogImg3";
  }

  .BlogAsideImg2Div{
    text-align: start;
  }

  .BlogAsideImg3Div{
    text-align: start;
  }
}

.BlogAsideImg2Div{
  text-align: center;
  grid-area: BlogImg2;
}

.BlogAsideImg3Div{
  text-align: center;
  grid-area: BlogImg3;
}

.BlogAsideImg3Div img{
  margin-bottom:20px ;
}