@charset "utf-8";
*{
  margin: 0;
  padding: 0;

}

body{

}


h1, .h1 {
    font-size: 1.8rem;
    font-weight: 400;
}

h2, .h2 {
    font-size: 1.3rem;  
}

h3, .h3 {
    font-size: 1.2rem;
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1.2;
}


body{
  position: relative;  
  height: 100%;
  font-family:  'Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif;
}

.flex-container {
  display:flex;     
}

.gridBodyContainer{
  width: 100%;
  height: 100%;       
  display: flex;
  align-items: center;
  justify-content: center;
  
}

#headerContent{
    background-color: white;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #c9cfcc;
    position: sticky;
  top: 0;         
  z-index: 10;
}

#bodyContend{
  background-color: white;
  
  padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    
}

.bodyContainer { 

  height:100%; 
  display: grid; 
  grid-template-rows: 0px auto auto; 
  grid-template-columns:  450px 450px;
  grid-template-areas:           
  "kunde kunde"
  "button button"
  "contend contend"; 
} 


.bodyFilterContend { 
  height:100%; 
  display: grid; 
  grid-template-rows: 300px auto 1fr ; 
  grid-template-columns:  50% 50%;
  grid-template-areas:           
  "formular map"
  "auswBtn auswBtn"
  "tabelle tabelle";   
} 

#auswBtnContend{
    grid-area: auswBtn;
    position: -webkit-sticky;
    position: sticky;
        top: 0;
        z-index: 5;
}


#showButtonMapContend{
    text-decoration: underline;
    color: blue;
}

#showButtonMapContend:hover{
   cursor: pointer; 
    color: darkblue;
}

#kunde{
  grid-area:kunde;
  width: 100%;
  height: 100%;
  background-color: #00A3E4;
}

#footerNeunkirchenWarpper{
    margin-right: 15px;
}



#menue{
  grid-area:button;
  width: 100%;
  height: 100%;
  background-color:white;    
 /* position: sticky;
  top: 0;         
  z-index: 10;   */
}

.willkommenContentClass{
    height:100%;
      width: 100%; 
      display: grid; 
      grid-template-rows: auto; 
      grid-template-columns: 50% 50%;
      grid-template-areas: 
        "willkBanner willkBanner"
        "willkSprache willkSprache";
}

#willkommenErsteForm{
    grid-area: willkErsteForm;
    padding: 10px;
    border: 1px solid #cfcfcf;
    border-radius: 0px;
}

#willkommenStadtBanner{
    grid-area: willkBanner;
    padding: 5px;
}
#willkommenSprache{
    grid-area: willkSprache;
    padding: 10px;
}

#willkommenWarpper{
     width: 100%;             
     grid-area: content;  
     grid-column-start:1;
     grid-column-end: 3;
     grid-row-start: 3;    
     grid-row-end: 4;
     height: 100%; 
}
#willkommenContentWarpper{
    width: 100%;
    height: auto; 
  /*  background-color: #F2F2F2;    */
          
}
#willkommenButton{
    height: auto;
    width: 100%;             
    padding-top: 10px;    
    padding-bottom: 10px;      
}
#willkommenContend{
    height: 100%;
    width: 100%;                 
    text-align: center; 
    padding-top: 20px;
    padding-bottom: 20px;
} 
#willkommeButtonDown{
   height: auto;
   width: 100%;             
   padding-top: 10px;
   padding-bottom: 10px; 
}

.willkLinksContainerClass{
    height:100%;
      width: 100%; 
      display: grid; 
      grid-template-rows: auto auto; 
      grid-template-columns: 25% 25% 25% 25%; 
      grid-template-areas:
        "sucheText sucheText auswText kontoText"
        "regisText regisText addKindText spracheCont";
}

#willkommenLinks{
    margin-top: 35px;
    height: auto;
    width: 100%;                 
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

#willkommenSpracheContainer{
    grid-area: spracheCont;  
    paddding: 10px;
}
#willkommenSpracheIcon{
 /*  grid-area: sucheIcon; */ 
    paddding: 10px;  
}    
#willkommenSpracheText{
  /*  grid-area: sucheText;  */
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px; 
}

#willkommenSucheContainer{
    grid-area: sucheText; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;
}
#willkommenSucheIcon{
 /*  grid-area: sucheIcon;   */
    paddding: 10px;  
}    
#willkommenSucheText{
  /*  grid-area: sucheText;  */
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px; 
}

#willkommenKontoContainer{
   grid-area: kontoText; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px; 
}
#willkommenKontoIcon{           
    paddding: 10px;  
}    
#willkommenKontoText{           
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px; 
}

#willkommenAddKindContainer{
   grid-area: addKindText; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px; 
}
#willkommenAddKindIcon{           
    paddding: 10px;  
}    
#willkommenAddKindText{           
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px; 
}


#willkommenAuswContainer{
    grid-area: auswText; 
    paddding: 10px;
    margin-bottom: 10px;   
    margin-right: 15px;
}
#willkommenAuswIcon{
   /* grid-area: auswIcon;   */
    paddding: 10px;
}
#willkommenAuswText{
  /*  grid-area: auswText; */
    paddding: 10px;
    margin-bottom: 10px;   
    margin-right: 15px;   
}

#willkommenRegisContainer{
      grid-area: regisText;
     paddding: 10px;
     margin-bottom: 10px;  
     margin-right: 15px;
}
#willkommenRegisIcon{
    /* grid-area: regisIcon;   */
     paddding: 10px;
}
#willkommenRegisText{
 /*    grid-area: regisText;  */
     paddding: 10px;
     margin-bottom: 10px;  
     margin-right: 15px;     
}

#willkommenAnmeldContainer{
     grid-area: anmeldText;
     paddding: 10px;
     margin-bottom: 10px; 
     margin-right: 15px;
}
#willkommenAnmeldIcon{
 /*    grid-area: anmeldIcon;       */
     paddding: 10px;
}
#willkommenAnmeldText{
   /*  grid-area: anmeldText;  */
     paddding: 10px;
     margin-bottom: 10px; 
     margin-right: 15px;   
}


#willkommenEinleitung{
    margin-top: 5px; 
    margin-bottom: 5px;
    height: auto;
    padding: 5px;
    width: 100%;                    
    text-align: center;
}
#willkommenHilfe{
    margin-top: 5px;
    margin-bottom: 5px;
    height: auto;
    width: 100%;
    padding: 5px;                          
    text-align: center;
}
#willkommenKontakt{
    margin-top: 5px;
    margin-bottom: 5px;
   /* padding: 5px;     */
    padding-left: auto;
    padding-right: auto;
    height: auto;
    width: 100%;                     
    text-align: center;
}


#hauptWarpper{
grid-area:contend;
  width: 100%;
  margin-top: 0px;  
}


#block1Warpper{
  width: 100%;
}

#header{
 width: 100%;
 background-color:lavenderblush;
 height: 200px;
 margin-top: 4px;
}

#tab{
  width: 100%;
  height: 45px;                                 
  background-color:lavender;
}

#headerToolbarContent{  
    grid-area: loginMenue; 
    width: 100%;
     height: 45px;
     margin-top: auto;
     margin-bottom: auto;
   /*  background-color:floralwhite; */         
           
}
#headerToolbar{
  /*  background-color:floralwhite;   */
}
#headerLoginButton{
    background-color:white;
}  

#menueToolbarContent{   
  width: 100%;
  height: 45px; 
  margin-top: 10px;           
}


#formular{
  grid-area:formular;
  width: 100%;
  height: 100%;
}

#mapContend{
  grid-area:map;
}


#tabelle{
  grid-area:tabelle;
}

#footer{
  grid-area:footer;
  height: 100px; 
  width: 100%;
  background-color: blanchedalmond;
  position: bottom;   

}    

.tabTemp{
  height: 100px; 
  width: 100%;
  background-color:blue;

}


.headerMenueGrid{
  display: grid; 
  padding: 2px;
  grid-template-columns: 5px 350px auto 500px; /* loginMenue vorher 600px*/
  grid-template-rows: 80px;
  grid-row-gap: 0px;
  grid-template-areas:
   "logo kundeBitmap sprache loginMenue"; 
}  

#logoAnmeldungContend{
  background-image: url(../images/logo.png);
  background-size: 167px 140px;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;             
}

#menueContend{
    
}
    
#logoAnmeldung{
  grid-area:logo;   
}

#kundeBitmap{
   grid-area: kundeBitmap; 
} 
#kundeBitmapContend{
   height: 80px; 
} 
#kundeBitmapContend.background-image{
    width: 100%;
    height: 100%;
}  

#contendWarpper{
  height: 100%; 

}

#buttonSprache{
  grid-area:sprache;
  height: 100%;  
  padding-top: 20px;     
}

#headerMenueLogin{
  grid-area:loginMenue;
  height: 100%;          
}

#buttonSpracheContend{
  height: 40px;           
}                                                              

#headerContend{
  height: 100%;
}

#formularContend{
  padding: 5px;
}

#filterContend{
  margin-top: 10px;
}

.menueButton{
   width: 280px; 
    
}
#mapContend{
}


#helpContend{
    height: 100%;
    width: 100%; 
  /*  object-fit: contain;  */             
}
#helpContentWarpper{
    grid-area: content;  
     grid-column-start:1;
     grid-column-end: 3;
     grid-row-start: 3;    
     grid-row-end: 4;
}
#helpContendBack{    
    
}

.helpImgClass{
     /* Umbrechen langer Wörter oder ______ */
    word-break: break-word;
}                                               
.helpImgClass img{
    width: 100%;
    height: auto;
    max-width: 800px;
    /*Bilder zentriert, aber einmal verschwand der obere Teil*/   
    display: block;
    margin: auto;   
}

#helpContendButton{
   
    height: 50px;
}
#helpBackButtonUp{
    
}    


#tabelleContend{
  margin-top: 10px;
}

.tabHauptContainer { 
  height: 330px; 
  width: auto;
  margin-bottom: 10px;
  display: grid; 
  grid-template-rows: auto 5em 10px; 
  grid-template-columns:  200px 700px;
  grid-template-areas:           
  "bild tabContainer"
  "memo memo"
  ". .";                     
 /* background-color: #e0efde;   */
  background-color: #ffffff;
  border-top: 1px dashed #dedede; 
}   
.tabHauptContainerGrau { 
  height: 330px; 
  width: auto;
  margin-bottom: 10px;
  display: grid; 
  grid-template-rows: auto 5em 10px; 
  grid-template-columns:  200px 700px;
  grid-template-areas:           
  "bild tabContainer"
  "memo memo"
  ". .";        
 /* background-color: #f7f7f7;   */  
  background-color: #ffffff; 
  border-top: 1px dashed #dedede;
}                    

.tabHaupBild {
  grid-area: bild;
  height: 100%;
  width: 100%;
  padding: 5px;
  padding-top: 14px;
  display: grid; 
  grid-template-rows: auto auto; 
  grid-template-columns:  auto;
  grid-template-areas:           
  "picture"
  "button";
}
.tabHaupPicture{
   grid-area: picture; 
}
.tabHaupButton{
  grid-area: button; 
}

 .tabHaupTabContainer{
 grid-area:tabContainer;
 height: 100%;
 width: 100%;
  
}


.kundeMenueGrid{
  height:100%; 
  display: grid; 
  padding: 2px;
  grid-template-columns: 100%;
  grid-template-rows: /* 50px */ auto auto;
  grid-row-gap: 0px;
  grid-template-areas:
 /*  "kundeMenue"  */
   "kundeButtonMenue"
   "kundeContent"; 
}


 .tabHaupMemo{
   grid-area:memo;
   white-space: pre-line;
   overflow: auto;
   padding-top: 5px;
   padding-left: 10px;
  /* background-color: rgb(255,255,244);   */
 }

.tabHauptContainerTraegerInfo{
  height: 100%;
  width: 100%;
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  grid-template-columns: 500px 200px;
  grid-template-areas:           
  "traeger entfernung"
  "oeffnung form"
  "oeffnung form"
  "oeffnung favorit"
  "oeffnung favorit2";
}

 .tabHauptContainerTraeger{
 grid-area:traeger;
 height: 100%;
 text-align: left;
 color : black;/* rgb(255 182 0);    */
 display: flex;
 align-items: center;
/* justify-content: center;   */
padding-left: 25px;
 color: #008836; 
}

.tabHauptContainerEntfernung{
 grid-area:entfernung;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.tabEntfernung{
  font-size: 16px;
  font-weight: bolder;
  color : black; /* rgb(255 182 0);  */
}

.tabHauptContainerOeffnung{
 grid-area:oeffnung;
 height: 100%;
  
}

.tabHauptContainerForm{
 grid-area:form;
 height: 100%;
 padding-left: 12px;
 padding-top: 0px;
}

.tabHauptContainerFavorit{
 grid-area:favorit;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.tabHauptContainerFavorit2{
 grid-area:favorit2;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}

th {
  text-align: left;
  padding-left: 25px;
  
}



#favoritenContend{
   height: 100%; 
}


.favoritenContent{
  height: 100%; 
  display: grid; 
  grid-template-rows: auto auto auto auto auto;  
  grid-template-columns: 1fr; 
  grid-row-gap: 10px; 
  grid-template-areas:
  "tabelleFavoriten"  
  "favoritenStammdaten"       
  "anfahrtmapRouteFavoriten" 
  "formularFavoritenBilder"   
  "formularFavoriten"   
  "favoritenIndividuellBeschreibung" ;
   
}



.favoritenBeschreibung{
  display: grid;
  grid-template-rows: 50px 1fr ;  
  grid-template-columns: 300px  1fr; 
  grid-template-areas:
  "beschreibungKopf beschreibungKopf" 
  "beschreibungBilder beschreibungMemo"; 
   
}

#menueFavoritenTabelleContend{
  grid-area:tabelleFavoriten;

}

#menueFavoritenMapRouteContend{
  grid-area:anfahrtmapRouteFavoriten;
  height: 100%;
  width: 100%;
}


#menueFavoritenMapRouteAdresse{
  margin-top: 10px;
  margin-left: 10px;

}

#favoritenMapRoute{
  width: 100%;
  margin-top: 10px;
}



#menueFavoritenFormContend{
  padding: 10px;
  grid-area:formularFavoriten;
}

#menueFavoritenBilder{
 padding: 10px;
  grid-area:formularFavoritenBilder;  
  height: 300px; 
}

#menueFavoritenBeschrebung{
  grid-area:favoritenIndividuellBeschreibung;
}

.favoritenBeschreibungTab{
 padding-bottom: 20px;  


}

#menueFavoritenStammdatenContend{
  padding-left: 10px;
  padding-top: 10px;
  grid-area:favoritenStammdaten;
  
  display: grid; 
  grid-template-rows:  auto;  
  grid-template-columns: 50% 50%; 
  grid-row-gap: 10px; 
  grid-template-areas:
  "stammForm stammTab"  ;
}
#menueFavoritenStammdatenContendForm{
  grid-area:stammForm;  
  margin-right: 20px;
}
#menueFavoritenStammdatenContendTab{
  grid-area:stammTab;  
  font-family: 'Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif;
}
#menueFavoritenStammdatenContendTabStufe{
    margin-top: 10px;
    margin-bottom: 15px;
}
#menueFavoritenStammdatenContendTabForm{
    margin-top: 20px;
}

.favoritenBeschreibungKopf{
  grid-area:beschreibungKopf;
    padding-top: 8px;   
    font-size: 1.5em;
    font-weight: bold;
    color: black;
    text-shadow: 1px 1px 4px  white;    
  
  text-align: center;
  background-color: #e0efde; /* #D3E0EC;    */
} 


.favoritenBeschreibungBild{
  grid-area:beschreibungBilder;
  background-color: #F8F9FA;
}

.favoritenBeschreibungMemo{
  grid-area:beschreibungMemo;
  background-color:#F8F9FA;
}


.tabMemoText{
    white-space:nowrap;
}

#favoritenWarpper{
  height: 100%;

}
#favoritenContend{
  height: 100%;
}
#menueFavoriten{
  height: 100%;

}

.dx-scrollable-native.dx-scrollable-native-ios .dx-scrollable-content {                                  
    min-height: 100%;
}

.dx-texteditor.dx-state-readonly {
    border-style:none;
}

.kindAnmeldungCheckboxes{
    display: block;
    margin-top: 20px;
    margin-bottom:  20px;
}

#kindAnmeldennAufklaerungCheck1{
  margin-top: 20px;
  margin-bottom:  20px;

}

#registrierungAufklaerungCheck1{
  margin-top: 20px;
  margin-bottom:  20px;

}

#registrierungToolbar2{
  margin-top: 20px;
}

#menueRegistrierungSeite1{
  padding-left: 5px;
  padding-right: 5px;

}

#menueRegistrierungSeite2{
  padding-left: 5px;
  padding-right: 5px;

}


.registKopf{
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  
}



  
#registrierungAufklaerungsText1{
  margin-top: 20px;
}

#registrierungAufklaerungsText2{
  margin-top: 20px;
}
#menueLoginSeite2ButtonGroup{
  margin-top: 20px;
}



#kundeDataMenueContend{

  grid-area:kundeMenue;
}
#kundeDataButtonMenueContend{
  grid-area:kundeButtonMenue;  
  text-align: center;
}
#kundeDataButtonMenue{
    margin-top: 15px;
    height:100%;
      width: 100%; 
      display: grid; 
      grid-template-rows: auto auto auto; 
      grid-template-columns: 33% 34% 33%; 
      grid-template-areas:
        ". backBtn backBtnMenu"
        "anschrift anmeldeData changePW"
        "kindListe kindNeu historie"; 
}

.kundeKontoIconClass{           
    paddding: 10px;  
}    
.kundeKontoTextClass{           
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px; 
}
 #kundeDataBackBtnContainer{
   grid-area: backBtn; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;  
 }
  #kundeDataBackBtnMenuContainer{
   grid-area: backBtn; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;   
 }
 #kundeDataAnschrBtnContainer{
    grid-area: anschrift; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;
}
 #kundeDataAnmelBtnContainer{
    grid-area: anmeldeData; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;
}
 #kundeDataPassBtnContainer{
    grid-area: changePW; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;
}
 #kundeDataKindListBtnContainer{
    grid-area: kindListe; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;
} 
 #kundeDataKindNeuBtnContainer{
    grid-area: kindNeu; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;
}

#kundeDataHistoryBtnContainer{
    grid-area: historie; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;
}

#kundeDataContent{
    margin-top: 20px;
  grid-area:kundeContent;

}


#kontaktdatenAnschriftContend{
  width: 100%;;
}

#kontaktdatenAnschriftForm{
}

#kontaktdatenAnmeldedatentContend{
  width: 100%;;
}

#kontaktdatenPasswordtContend{
}

#kinderListetContend{
}

#kinderNeuanlagetContend{
}

#kinderAnmeldungentContend{
  height: 300px;
  width: 100%;;
  background-color:deepskyblue;
}

#historieListetContend{
  height: 100%;
  width: 100%;;                          
}

#historieListe {
   
}
    /*
.dx-row img {
    height: auto;
}         */

#historieListe tr.main-row td:not(:first-child) {
    height: 21px;
}

#historieListe tr.memo-row {
    white-space: normal;
    vertical-align: top;
}

#historieListe tr.memo-row td {
    height: 70px;
    color: #555;
}

.dark #historieListe tr.memo-row td {
    color: #666;
}

#historieListe tbody.historie:hover {
    background-color: #EBEBEB;
}

.dark #historieListe tbody.historie:hover {
    background-color: #484848;
}

#historieListe tbody.historie:hover tr.main-row td {
    color: #000;
}

.dark #historieListe tbody.historie:hover tr.main-row td {
    color: #CCC;
}

#historieListe tbody.historie:hover tr.memo-row td {
    color: #888;
}




#kundeDataMenue{
  margin-top: 15px;
}

.kundenMenueClass{
  background-color: #F1F0F0;
}

#kinderAnmeldungenTab{
  margin-top: 30px;
}

#kitaHomepage{
        
}
#kitaHomepage:hover{
    color:blue;
    text-decoration: underline;
}


.formUrlClass{
    
     color:blue;
}

.formUrlClass:hover{
    color:blue;
    text-decoration: underline;
    cursor: pointer;
}

 


@media screen and (max-width:930px){
    
.menueButton{
   width: 190px; 
    
}    
  
  #header{
    display: none;
  }
  
  th {
  text-align: left;
  padding-left: 0px;
}
  
  .tabHaupBild{
   display: none;
   grid-area:bild;
   height: 100%;
   width: 100%;
   padding: 5px;
  }
  .tabHauptContainerForm {
    padding-left: 41px;
    padding-top: 15px;
  }
  
  .tabHauptContainerOeffnung{
    padding-left: 12px;
    padding-top: 15px; 
    
  } 
  
  .bodyContainer { 
    height:100%; 
    display: grid; 
    grid-template-rows: 0px auto auto; 
    grid-template-columns:  100%;
    grid-template-areas:           
    "kunde"
    "button"
    "contend"; 
  }
 
  
  .headerMenueGrid{
    display: grid; 
    padding: 2px;
    grid-template-columns: 5px 300px auto 500px; /* vorher 400px*/
    grid-template-rows: 80px;
    grid-row-gap: 0px;
    grid-template-areas:
    "logo kundeBitmap sprache loginMenue"; 
  }
  
  .bodyFilterContend { 
    height:100%; 
    display: grid; 
    grid-template-rows: auto 400px auto; 
    grid-template-columns:  100%;
    grid-template-areas:           
    "formular"
    "map"
    "tabelle"   
  }
  
  .willkommenContentClass{
    height:100%;
      width: 100%; 
      display: grid; 
      grid-template-rows: auto; 
      grid-template-columns: auto;
      grid-template-areas: 
        "willkBanner"
        "willkErsteForm"
        "willkSprache";
}
.willkLinksContainerClass{
    height:100%;
      width: 100%; 
      display: grid; 
      grid-template-rows: auto auto; 
      grid-template-columns: 100%; 
      grid-template-areas:     
        
        "sucheText" 
        "auswText"
        "kontoText" 
        "regisText"
        "addKindText"
        "spracheCont" ;
}

#kundeDataButtonMenue{
    margin-top: 15px;
    height:100%;
      width: 100%; 
      display: grid; 
      grid-template-rows: auto auto auto auto auto auto auto; 
      grid-template-columns: 100%; 
      grid-template-areas:
        "backBtn"
        "anschrift"
        "anmeldeData"
        "changePW"
        "kindListe"
        "kindNeu"
        "historie"; 
}
   
   .tabHauptContainer { 
    height: 380px;
    display: grid; 
    grid-template-rows: auto 5em 10px; 
    grid-template-columns:  50% 50%;
    grid-template-areas:           
    "tabContainer tabContainer"
    "memo memo"
    ". .";
    background-color: #ffffff;
   }
   .tabHauptContainerGrau { 
  height: 380px; 
  
  
  display: grid; 
  grid-template-rows: auto 5em 10px; 
  grid-template-columns:  50% 50%;
  grid-template-areas:           
  "tabContainer tabContainer"
  "memo memo"
  ". .";        
  background-color: #f7f7f7;   
}
   
  .tabHauptContainerTraegerInfo{
    height: 350;
    display: grid; 
    grid-template-rows: 1fr 1fr 1fr 1fr;                                                                               
    grid-template-columns: 67% 33%;
    grid-template-areas:           
    "traeger entfernung"
    "oeffnung form"
    "oeffnung form"
    "oeffnung favorit"
    "oeffnung favorit2";
  }
  
  .tabHaupMemo{
   grid-area:memo;
   height: 100%;
  }
  
  .tabOeffnungszeiten{
    padding-left: 0px;;
  }
  
  #helpContend{
    height: 100%;
    width: 100%;
                   
}

 
  
}

@media screen and (max-width:830px){
  
  #kundeBitmapContend{
    display: none;
  }
  .headerMenueGrid {
    display: grid;
    padding: 2px;
    grid-template-columns: auto auto auto 500px;
    grid-template-rows: 80px;
    grid-row-gap: 0px;
    grid-template-areas: "logo kundeBitmap sprache loginMenue";
}

}

@media screen and (max-width:750px){
    
    #menueFavoritenStammdatenContend{
      
      display: grid; 
      grid-template-rows:  auto auto;  
      grid-template-columns: auto; 
      grid-row-gap: 10px; 
      grid-template-areas:
      "stammForm"
      "stammTab"  ;
    }
}
@media screen and (max-width:630px){
  
  
.menueButton{
   width: 140px; 
    
}
  #headerSpracheButton{
        width: 100px;   
  }              
  
  #logoAnmeldungContend{
    display: none;
  }
  
  
  
  .tabHauptContainer { 
    height: 480px;
    display: grid;
    grid-template-rows: 1fr 42px 6px;
    grid-template-columns: 100%;
    grid-template-areas:
    "tabContainer"
    "memo"
    ".";
    background-color: #ffffff;
   }
      .tabHauptContainerGrau { 
  height: 480px;  
  display: grid; 
  grid-template-rows: 1fr 42px 6px; 
  grid-template-columns:  100%;
  grid-template-areas:           
  "tabContainer"
  "memo"
  ".";        
  background-color: #f7f7f7;   
}
  
  .tabHauptContainerTraegerInfo {
    width: 100%;
    height: 100%;
    display: grid; 
    grid-template-rows: 50px 25px 150px 114px 60px; 
    grid-template-columns: 100%;
    grid-template-areas:           
    "traeger"
    "entfernung"
    "oeffnung"
    "form"
    "favorit"
    "favorit2";
  }
  
   .tabHauptContainerTraeger{
 
 text-align: center;   
 justify-content: center;   

  
}
  
  .tabHauptContainerForm{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
  }
  
  .tabHauptContainerOeffnung{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    
  }
  
  #logoAnmeldung{
    display: none;
  }
  
 
  
  .headerMenueGrid {
    display: grid;
    padding: 2px;
    grid-template-columns: 0px 0px 0px auto; /* vorher 100%*/
    grid-template-rows: 80px;
    grid-row-gap: 0px;
    grid-template-areas: "logo kundeBitmap sprache loginMenue";
}

.gridFavoritenBeschreibungTab {
    display: grid;
    grid-template-rows: 50px 200px 1fr;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "beschreibungKopf"
        "beschreibungMemo"
        "beschreibungMemo";
}                                                         

.kitaListeMemo {
    padding: 5px;
}

.favoritenBeschreibungBild {
    background-color: #F8F9FA;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin-top: 5px;
}

.gridFavoritenBeschreibungTab {
    display: grid;
    grid-template-rows: 50px 238px 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "beschreibungKopf"
        "beschreibungMemo"
        "beschreibungMemo";
}

 
  
}
@media screen and (max-width:600px){
  
  #kundeBitmapContend{
    display: none;
  }


}

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

.menueButton{
   width: 90px; 
    
}

}