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

}

:root{
  --kp-primary: #00A3E4;
  --kp-primary-dark: #0089c0;
  --kp-maxwidth: 1200px;
  --kp-gap: 16px;
}

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%;
}

.flex-container {
  display:flex;     
}

.gridBodyContainer{
  width: 100%;
  min-height: 100vh;
  display: block;
}


#bodyContend{
  background-color: white;
  width: 100%;
}

.bodyContainer {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 0px auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
  "kunde"
  "button"
  "contend"
  "footer";
}


.bodyFilterContend {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
  "formular map"
  "formular tabelle";
  gap: 16px;
  align-items: start;
}

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



#showButtonMapContend{
    grid-area: map;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: underline;
    color: blue;
}

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

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



#menue{
  grid-area:button;
  width: 100%;
  height: 100%;
  background-color:white;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Start/Einrichtungen-Umschalter (dxTabs): an Inhaltsbreite ausrichten,
   Tabs inhaltsbreit + linksbuendig statt 50/50 ueber volle Breite */
#startHauptSwitch{
  width: 100%;
  background-color: #537ec1;
}
#startHauptSwitch .dx-tabs-wrapper{
  justify-content: flex-start;
  padding-left: max(0px, calc((100% - var(--kp-maxwidth)) / 2));
  background-color: transparent;
}
/* Beide Tabs (Start/Einrichtungen) gleiche Hintergrundfarbe, weisser Text */
#startHauptSwitch .dx-tab,
#startHauptSwitch .dx-tab.dx-tab-selected,
#startHauptSwitch .dx-tab.dx-state-selected{
  flex: 0 0 auto;
  min-width: 150px;
  background-color: #537ec1;
  color: #ffffff;
}
#startHauptSwitch .dx-tab .dx-tab-text{ color: #ffffff; }
#startHauptSwitch .dx-tab.dx-state-hover{ background-color: #4a72b0; }

/* Mobil: seit dem dritten Punkt ("Eigene Daten", nur eingeloggt) reicht die Breite nicht mehr —
   3 x min-width:150px = 450px passen nicht in ein 390px-Display, die Leiste wuerde scrollen.
   Unterhalb des Mobil-Breakpoints teilen sich die Punkte deshalb die Breite gleichmaessig. */
@media screen and (max-width: 630px){
  #startHauptSwitch .dx-tab,
  #startHauptSwitch .dx-tab.dx-tab-selected,
  #startHauptSwitch .dx-tab.dx-state-selected{
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  #startHauptSwitch .dx-tab .dx-tab-text{
    font-size: 13px;
    white-space: nowrap;
  }
}

.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;
}
/* DB-Kopfbild (ANMELDUNG_KOPF_BILD): max. 400px hoch, formatfuellend + zentriert (nicht verzerrt) */
#willkommenStadtBanner img{
    display: block;
    width: 100%;
    height: 400px;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
}
#willkommenSprache{
    grid-area: willkSprache;
    padding: 10px;
}

#willkommenWarpper{
     width: 100%;
     max-width: var(--kp-maxwidth);
     margin: 0 auto;
     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;    */
  font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif;        
}
#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 kontoText kontoText"
        "regisText regisText addKindText addKindText";
}

#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%;
  max-width: var(--kp-maxwidth);
  margin: 0 auto;
}


#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: 10px;
   /*  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;
  height: 400px;
}


#tabelle{
  grid-area:tabelle;
}

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

}

footer{
  grid-area: footer;
  width: 100%;
  background-color: #f5f7fa;
  border-top: 1px solid #e2e8f0;
}
footer #footerContent{
  max-width: var(--kp-maxwidth);
  margin: 0 auto;
}

/* Hinweis auf funktionale Cookies (Banner unten) */
#kpdCookieHinweis{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10000;
  background: #1f2937;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  box-shadow: 0 -2px 8px rgba(0,0,0,.2);
}
#kpdCookieHinweis .kpdCookieText{ max-width: 900px; }
#kpdCookieHinweis .kpdCookieOk{
  background: var(--kp-primary);
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
#kpdCookieHinweis .kpdCookieOk:hover{ background: var(--kp-primary-dark); }

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

}
  


.headerMenueGrid{
  display: grid;
  max-width: var(--kp-maxwidth);
  margin: 0 auto;
  padding: 6px 16px;
  align-items: center;
  grid-column-gap: 12px;
  grid-template-columns: auto auto 1fr 500px;
  grid-template-rows: minmax(64px, auto);
  grid-template-areas:
   "logo kundeBitmap sprache loginMenue";
}

/* Benutzer-/Login-Menue rechtsbuendig im Header */
#headerToolbarContent{
  grid-area: loginMenue;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* Logo / Kunden-Bitmap (aus DB) vertikal einpassen */
#logoAnmeldung, #kundeBitmap{
  display: flex;
  align-items: center;
}

/* Benutzer-/Login-Menue Feinschliff: Elemente vertikal zentriert,
   Login/User-Dropdown (dxMenu) mit Button-Anmutung + dezenter Hover */
#headerToolbar .dx-toolbar-item{
  align-self: center;
}
#headerToolbar .dx-menu-horizontal .dx-menu-item{
  border-radius: 6px;
}
#headerToolbar .dx-menu-horizontal .dx-menu-item.dx-menu-item-has-text:hover{
  background-color: rgba(0,163,228,.10);
}
#headerToolbar .dx-menu-horizontal .dx-menu-item .dx-icon{
  color: var(--kp-primary);
}

#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 1fr;
  grid-template-areas:           
  "bild tabContainer"
  "memo memo"
  ". .";   
  background-color: #ffffff;   
   
}   
.tabHauptContainerGrau {
  height: 330px;
  width: auto;
  margin-bottom: 10px;
  display: grid;
  grid-template-rows: auto 5em 10px;
  grid-template-columns:  200px 1fr;
  grid-template-areas:           
  "bild tabContainer"
  "memo memo"
  ". .";        
  background-color: #f7f7f7;   
}                    

.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: 240px 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
  grid-template-areas:
   "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: 1fr 200px;
  grid-template-areas:           
  "traeger entfernung"
  "oeffnung form"
  "oeffnung form"
  "oeffnung favorit"
  "oeffnung favorit2";
}

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

.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;
}
/* Nimmt in der Handyansicht das Kita-Bild auf. Auf dem Desktop steht das Bild in der
   linken Bildspalte (.tabHaupPicture), deshalb hier ausgeblendet. Das Bild selbst wird
   von kp_anmeldung.js zwischen beiden Containern hin- und hergeschoben. */
.tabHauptContainerBildMobil{
 grid-area: bildmobil;
 display: none;
 align-items: center;
 justify-content: center;
}
.tabHauptContainerBildMobil img{ max-width: 100%; height: auto; border-radius: 6px; }

/* Zweiter "Kita Info"-Button, unterste Zeile unter "Favoriten". Auf dem Desktop steht der
   Button in der Bildspalte (.tabHaupBild), deshalb hier ausgeblendet; erst wenn
   die Bildspalte ab 930px verschwindet, wird dieser hier eingeblendet. */
.tabHauptContainerInfo{
 grid-area:info;
 height: 100%;
 display: none;
 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 auto;  
  grid-template-columns: 1fr; 
  grid-row-gap: 10px; 
  grid-template-areas:
  "tabelleFavoriten"  
  "favoritenStammdaten" 
  "favoritenHinweis"      
  "anfahrtmapRouteFavoriten"    
  "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;
}

#menueFavoritenBeschrebungFormContend{
  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;  
}
#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: #D3E0EC;
}


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

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

#hinweisAuswContend{
   /* grid-area: favoritenHinweis;  */
   grid-area: auswBtn; 
}
#hinweisAusw{
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}


.tabMemoText{
    white-space:nowrap;
}

#favoritenWarpper{
  height: 100%;

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

}

#kindDokumenteListe{
    max-width: 450px;
}
#kindDokumenteHinweis{
    margin-top: 20px;
    margin-bottom: 10px;
}

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

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


/* ===== Leaflet-Karten unter dem Header halten =====
   Leaflet vergibt intern feste z-index-Werte (Panes 200-700, Controls 800, Ecken 1000).
   Der sticky Header (#menue) liegt nur bei z-index 10 -> die Karte schob sich beim Scrollen
   darueber. Statt die Header-Werte hochzubieten (Wettruesten mit DevExtreme-Overlays)
   bekommen die Kartencontainer einen eigenen Stacking-Context: position+z-index erzeugen ihn,
   danach gelten Leaflets Werte nur noch INNERHALB der Karte. */
#mapContend,
#favoritenMapRoute{
  position: relative;
  z-index: 0;
}

/* ===== Anschrift/Modus-Zeile der Favoritenseite ===== */
/* Der Container ist ein Flex-Row. Auf schmalen Displays muss er umbrechen duerfen,
   sonst quetscht er das Formular zusammen bzw. laeuft aus dem Viewport. */
#menueFavoritenMapRouteAdresse{ flex-wrap: wrap; gap: 8px; }
#menueFavoritenMapEdit{ flex: 1 1 320px; min-width: 0; }

@media screen and (max-width: 630px){
  #menueFavoritenMapEdit{ flex: 1 1 100%; }
  #menueFavoritenMapEdit .dx-texteditor,
  #menueFavoritenMapEdit .dx-selectbox{ width: 100% !important; }
}

/* ===== Fahrstrecke/Fussweg (OSRM) auf der Favoriten-/Info-Seite ===== */
#menueFavoritenFahrstrecke{
  margin: 8px 0 4px;
}
#menueFavoritenFahrstrecke .favStreckeWert{
  display: inline-block;
  background: #eaf5fc;
  border: 1px solid #b9e0f3;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  color: var(--kp-primary);
}

/* ===== Registrierung – moderne Kartenansicht (Desktop + Mobil) ===== */
#registrierungContainer{
  max-width: 920px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}
#menueRegistrierungSeite1,
#menueRegistrierungSeite2{
  padding-left: 5px;
  padding-right: 5px;
}
.registKopf{
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
/* Formulare als weisse Karte */
#articleVoranmeldungNewErz1,
#articleVoranmeldungCheckForm{
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 18px 20px;
  box-sizing: border-box;
}
/* Gruppen-Ueberschriften als Sektionstitel */
#articleVoranmeldungNewErz1 .dx-form-group-caption,
#articleVoranmeldungCheckForm .dx-form-group-caption{
  font-size: 16px;
  font-weight: 600;
  color: #222222;
}
/* Aufklaerungstext + Datenschutz-Checkbox */
#registrierungAufklaerungsText1,
#registrierungAufklaerungsText2{
  margin-top: 18px;
}
#registrierungAufklaerungCheck1{
  margin-top: 16px;
  margin-bottom: 16px;
}
/* Toolbars: Registrieren/Fertigstellen (loginPrimaryBtn) + Abstand */
#registrierungToolbar1,
#registrierungToolbar2{
  margin-top: 18px;
}
#registrierungToolbar1 .dx-button,
#registrierungToolbar2 .dx-button{
  border-radius: 8px;
}

/* Mobil: einspaltig, Buttons gestapelt & voll breit, kein Ueberlauf */
@media screen and (max-width: 630px){
  #registrierungContainer{ padding: 10px 10px 24px; }
  #articleVoranmeldungNewErz1,
  #articleVoranmeldungCheckForm{ padding: 14px 14px 6px; }
  #articleVoranmeldungNewErz1 .dx-texteditor,
  #articleVoranmeldungCheckForm .dx-texteditor{ width: 100% !important; }
  /* Toolbar-Box muss mitwachsen, sonst ragen die gestapelten Buttons heraus und ueberlappen den Footer */
  #registrierungToolbar1, #registrierungToolbar2,
  #registrierungToolbar1 .dx-toolbar, #registrierungToolbar2 .dx-toolbar,
  #registrierungToolbar1 .dx-toolbar-items-container,
  #registrierungToolbar2 .dx-toolbar-items-container{ height: auto !important; }
  #registrierungToolbar1 .dx-toolbar-before,
  #registrierungToolbar2 .dx-toolbar-before{
    width: 100% !important; position: static !important;
    transform: none !important; float: none !important; display: block !important;
  }
  #registrierungToolbar1 .dx-toolbar-item,
  #registrierungToolbar2 .dx-toolbar-item{
    display: block !important; width: 100% !important; padding: 0 0 10px 0 !important;
  }
  #registrierungToolbar1 .dx-button,
  #registrierungToolbar2 .dx-button{ width: 100% !important; }
}
#menueLoginSeite2ButtonGroup{
  margin-top: 20px;
}

#kundeDatenContend{
    min-height: 700px;
}

#kundeDataMenueContend{

  grid-area:kundeMenue;
}
#kundeDataButtonMenueContend{
  grid-area:kundeButtonMenue;  
  text-align: center;
}
#kundeDataButtonMenue{
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ---- Benutzerkonto: Textnavigation (Browser links / Mobil-Liste) ---- */
#kundeDataButtonMenue .kundeKontoIconClass{ display: none; }      /* grosse Icons entfernen */
#kundeDataButtonMenue > div{                                      /* Nav-Zeilen */
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  text-align: left;
}
#kundeDataButtonMenue > div:hover{ background: #f2f7fb; }
#kundeDataButtonMenue .kundeKontoTextClass{ margin: 0; }
.kundeNavLabel{ font-size: 1rem; font-weight: 500; color: #333; }
.kundeNavActive{ background: #eaf5fc; border-left: 3px solid var(--kp-primary); }
.kundeNavActive .kundeNavLabel{ font-weight: 700; color: var(--kp-primary); }
#kundeDataBackBtnContainer .kundeNavLabel{ color: var(--kp-primary); }   /* "Zurueck zu Einrichtungen" */
.kundeNavBack{ font-size: 1rem; font-weight: 600; color: var(--kp-primary); }
#kundeDataBackBtnMenuContainer{ display: none; }                  /* nur mobil + sectionOpen sichtbar */

/* Kinder-Untermenue unter "Kinderliste/Anmeldungen" */
#kundeDataButtonMenue > #kundeDataKindSubMenu{ display: none; padding: 0; border-bottom: 0; cursor: default; }
#kundeDataButtonMenue > #kundeDataKindSubMenu:hover{ background: transparent; }
.kundeNavSubRow{                                                  /* Kind-Unterpunkt (eingerueckt) */
  margin: 0;
  padding: 10px 14px 10px 32px;
  border-bottom: 1px solid #eeeeee;
  cursor: pointer;
  text-align: left;
  background: #fafafa;
}
.kundeNavSubRow:hover{ background: #f2f7fb; }
.kundeNavSubRow .kundeNavLabel{ font-size: 0.95rem; font-weight: 400; }
.kundeNavSubRow.kundeNavActive .kundeNavLabel{ font-weight: 700; color: var(--kp-primary); }
.kundeNavSubEmpty{ cursor: default; }
.kundeNavSubEmpty .kundeNavLabel{ font-style: italic; color: #888888; }
#kinderListetTab{ display: none; }                                /* Kinder-Grid rechts entfaellt (nur Datenquelle) */

/* Konto-Listen als Karten (mobil): Zell-Label nur mobil sichtbar, Desktop = normale Tabelle */
.gridCellLabel{ display: none; }
.gridCellValue{ white-space: normal; }

/* Zweite Anschrift-Gruppe (Geschlecht/Geboren/Telefon/Email): keine sichtbare doppelte Ueberschrift,
   aber auf Desktop die Caption-Hoehe reservieren, damit die Felder auf Hoehe von "Anrede" starten. */
.kundeAnschriftGroup2 .dx-form-group-caption{ visibility: hidden; }

.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 (Anmeldedaten) und #kundeDataPassBtnContainer (Passwort)
    entfallen: Anmeldedaten haengen jetzt am Menuepunkt "Persönliche Daten", Passwort liegt
    im Kopfmenue als Dialog. Die Elemente werden in kp_vertragspartner.js entfernt, ihre
    Regeln hier waeren tot. */
 #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;
}

#kundeDataDokumenteBtnContainer{
    grid-area: dokumente; 
    paddding: 10px;
    margin-bottom: 10px;  
    margin-right: 15px;
}

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

}


#kontaktdatenAnschriftContend{
  width: 100%;;
}

#kontaktdatenAnschriftForm{
}

#kontaktdatenAnmeldedatentContend{
  width: 100%;
  display: grid; 
      grid-template-rows: auto ; 
      grid-template-columns: 50% 50%; 
      grid-template-areas:
        "anmeldeDtn documente"; 
}

#kontaktdatenAnmeldedatentForm{
    grid-area: anmeldeDtn;
}
#kontaktdatenAnmeldedatentDocumente{
   grid-area: documente; 
}

#kontaktdatenPasswordtContend{
}

#kinderListetContend{
}

#kinderNeuanlagetContend{
}

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

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

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

#historieListe {
   
}

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

/* Jeder Historie-Eintrag ist ein eigenes <tbody>. Im Tabellenlayout richtete sich jede
   Sektion nach ihrem eigenen Inhalt aus — die Eintraege waren unterschiedlich breit
   (gemessen 537 / 853 / 529px), auch mit table-layout:fixed. Seit es nur noch EINE Spalte
   gibt, wird das Tabellenlayout nicht mehr gebraucht: als Bloecke ist die Breite eindeutig.
   Die Mobilansicht macht das weiter unten ohnehin schon so. */
#historieListe .dx-datagrid-rowsview table,
#historieListe tbody.historie,
#historieListe tbody.historie tr,
#historieListe tbody.historie td{
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Kopfzeile eines Historie-Eintrags: Datum dezent davor, Betreff hervorgehoben.
   (Frueher zwei Tabellenspalten mit Ueberschriften — jetzt eine Spalte, siehe
   kp_vertragspartner.js) */
#historieListe .historieDatum{
    color: #777777;
    font-size: 13px;
    margin-right: 12px;
    white-space: nowrap;
}
#historieListe .historieBetreff{
    font-weight: 600;
    color: #222222;
}

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

#historieListe tr.memo-row td {
    /* WICHTIG min-height statt height: als Tabellenzelle war "height" eine Mindesthoehe,
       seit die Eintraege als Bloecke gerendert werden (siehe oben) waere es eine feste
       Hoehe — laengere Mailtexte wurden dadurch abgeschnitten. */
    min-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 {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 0px auto 1fr auto;
    grid-template-columns:  100%;
    grid-template-areas:
    "kunde"
    "button"
    "contend"
    "footer";
  }
 
  
  .headerMenueGrid{
    display: grid;
    padding: 6px 12px;
    grid-template-columns: auto auto 0px minmax(0, 1fr);
    grid-template-rows: minmax(56px, auto);
    grid-column-gap: 8px;
    align-items: center;
    grid-template-areas:
    "logo kundeBitmap sprache loginMenue";
  }
  /* Toolbar darf schrumpfen -> DevExtreme klappt Items ins Ueberlaufmenue (⋮) ein */
  #headerToolbarContent{ min-width: 0; }
  #headerToolbar{ width: 100%; }
  /* Anmelden/Ihr-Konto mobil: nur Icon (Text ausblenden), Icon etwas groesser */
  #headerToolbar .dx-menu-horizontal .dx-menu-item .dx-menu-item-text{ display: none; }
  #headerToolbar .dx-menu-horizontal .dx-menu-item .dx-icon{ font-size: 22px; width: 22px; height: 22px; margin-right: 0; }
  
  .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: Basis ist jetzt flex-column (vertikale Textliste) -
   frueherer Grid-Override hier entfaellt. */
   
   .tabHauptContainer {
    height: 440px;   /* 380px + eine Zeile fuer den "Kita Info"-Button */
    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: 440px;   /* 380px + eine Zeile fuer den "Kita Info"-Button */


  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 1fr 1fr;
    grid-template-columns: 67% 33%;
    grid-template-areas:
    "traeger entfernung"
    "oeffnung form"
    "oeffnung form"
    "oeffnung favorit"
    "oeffnung favorit2"
    "oeffnung info";
  }

  /* Ab hier ist die Bildspalte samt "Kita Info" ausgeblendet -> Ersatzbutton zeigen. */
  .tabHauptContainerInfo{
    display: flex;
  }
  
  .tabHaupMemo{
   grid-area:memo;
   height: 100%;
  }
  
  .tabOeffnungszeiten{
    padding-left: 0px;;
  }
  
  #helpContend{
    height: 100%;
    width: 100%;
                   
}
 
  
}
@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){

  /* Benutzerkonto mobil: einspaltig, Liste <-> Inhalt + "< Zurueck" */
  .kundeMenueGrid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "kundeButtonMenue"
      "kundeContent";
  }
  #kundeDataContent{ display: none; padding: 0 10px; box-sizing: border-box; }   /* Default: nur Liste; mobil etwas Seitenabstand */
  #kundeDataMenueWapper.sectionOpen .kundeNavRow{ display: none; }        /* Liste ausblenden */
  #kundeDataMenueWapper.sectionOpen #kundeDataContent{ display: block; }  /* Inhalt zeigen */
  #kundeDataMenueWapper.sectionOpen #kundeDataBackBtnMenuContainer{ display: block; }  /* "< Zurueck" */

  /* Konto-Listen als Karten statt gequetschter Tabelle (Anmeldungen/Dokumente/Historie).
     Die Grid-Tabelle wird von table-layout:fixed auf Block-Fluss umgestellt, damit jede
     Zeile eine volle Karte wird und der Text nicht mehr abgeschnitten (ellipsis) wird. */
  #kinderAnmeldungenTab .dx-datagrid-headers,
  #dokumenteListeTab .dx-datagrid-headers,
  #historieListe .dx-datagrid-headers{ display: none; }

  #kinderAnmeldungenTab .dx-datagrid-content-fixed,
  #dokumenteListeTab .dx-datagrid-content-fixed,
  #historieListe .dx-datagrid-content-fixed{ display: none !important; }

  /* feste Grid-Hoehe + inneren Scroll aufheben, damit variabel hohe Karten (v.a. Historie-Memo)
     natuerlich fliessen und sich nicht ueberlappen */
  #kinderAnmeldungenTab .dx-datagrid-rowsview,
  #dokumenteListeTab .dx-datagrid-rowsview,
  #historieListe .dx-datagrid-rowsview,
  #kinderAnmeldungenTab .dx-scrollable-container,
  #dokumenteListeTab .dx-scrollable-container,
  #historieListe .dx-scrollable-container,
  #kinderAnmeldungenTab .dx-scrollable-content,
  #dokumenteListeTab .dx-scrollable-content,
  #historieListe .dx-scrollable-content{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #historieListe tbody.historie .main-row td{ display: block !important; }

  #kinderAnmeldungenTab .dx-datagrid-rowsview table,
  #dokumenteListeTab .dx-datagrid-rowsview table,
  #historieListe .dx-datagrid-rowsview table,
  #kinderAnmeldungenTab .dx-datagrid-rowsview tbody,
  #dokumenteListeTab .dx-datagrid-rowsview tbody,
  #historieListe .dx-datagrid-rowsview tbody{
    display: block !important;
    width: 100% !important;
  }

  #kinderAnmeldungenTab .dx-data-row,
  #dokumenteListeTab .dx-data-row,
  #historieListe tbody.historie{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    border: 0.5px solid #dddddd;
    border-radius: 12px;
    margin: 0 0 10px 0;
    padding: 8px 12px;
    background: #ffffff;
  }
  #kinderAnmeldungenTab .dx-data-row > td,
  #dokumenteListeTab .dx-data-row > td,
  #historieListe tbody.historie tr,
  #historieListe tbody.historie td{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    border: 0 !important;
    padding: 4px 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    text-align: left !important;
  }
  #kinderAnmeldungenTab .gridCellLabel,
  #dokumenteListeTab .gridCellLabel{
    display: inline;
    color: var(--kp-primary);
    font-weight: 600;
    margin-right: 6px;
  }
  /* Mobil: Betreff in Primaerfarbe hervorheben, Datum bleibt dezent. Frueher faerbte die
     Regel die ganze erste Zelle — seit Datum und Betreff in EINER Zelle stehen, wuerde
     das auch das Datum treffen. Datum darunter statt daneben (Platz). */
  #historieListe .historieBetreff{ color: var(--kp-primary); font-weight: 600; }
  #historieListe .historieDatum{ display: block; margin: 0 0 2px; }

  /* Formular-Sektionen (Anschrift/Anmeldedaten/Passwort/Neuanlage) mobil als Karte
     -> einheitlich mit den Listen-Karten */
  #kundeDataContent .dx-form-group{
    background: #ffffff;
    border: 0.5px solid #dddddd;
    border-radius: 12px;
    padding: 8px 14px 12px;
    margin: 0 0 12px 0;
  }
  /* leere Formular-Gruppen (0 Felder) nicht als leeren Rahmen anzeigen */
  #kundeDataContent .dx-form-group:not(:has(.dx-field-item)){ display: none; }
  /* mobil stapeln die Gruppen -> die (ohnehin unsichtbare) zweite Caption ganz entfernen (kein Leerraum) */
  .kundeAnschriftGroup2 .dx-form-group-caption{ display: none; }
  /* verschachtelte Gruppen (z.B. HsNr/Zusatz bei Anschrift) ohne eigenen Rahmen -> nicht getrennt */
  #kundeDataContent .dx-form-group .dx-form-group{
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  /* ERZ1/ERZ2: beide Gruppen sind je EIN Formular -> eine Karte statt zwei gestapelter.
     Den Rahmen traegt der Wrapper (#kontaktdatenAnschriftKarte / #kontaktdatenErz2Karte),
     damit die Speichern-Leiste mit drin sitzt (Gegenstueck zur Desktop-Regel). */
  #kontaktdatenAnschriftKarte,
  #kontaktdatenErz2Karte{
    border-width: 0.5px;
    border-color: #dddddd;
    box-shadow: none;
    padding: 8px 14px 12px;
    margin: 0 0 12px 0;
  }
  #kontaktdatenAnschriftForm .dx-form-group,
  #kontaktdatenErz2Form .dx-form-group{
    background: transparent; border: 0; padding: 0; margin: 0;
  }
  /* Labels stehen mobil ueber den Feldern (labelLocation:'top' via JS, applyKontoFormLabels) */
  #kundeDataContent .dx-field-item-content .dx-texteditor,
  #kundeDataContent .dx-field-item-content .dx-dropdowneditor{ width: 100% !important; }
  /* Anmeldedaten-Container ist ein 50/50-Grid (rechte Haelfte leer) -> mobil Block-Fluss, damit
     das Formular volle Breite nutzt UND die Button-Toolbar (Speichern/Abbruch) sichtbar bleibt
     (im Grid landete sie in einer impliziten 0px-Spalte) */
  #kontaktdatenAnmeldedatentContend{
    display: block;
  }

.menueButton{
   width: 140px;
    
}
  #headerSpracheButton{
        width: 100px;   
  }              
  
  #logoAnmeldungContend{
    display: none;
  }
  
  
  
  .tabHauptContainer {
    height: auto;
    display: grid;
    grid-template-rows: auto 42px 6px;
    grid-template-columns: 100%;
    grid-template-areas:
    "tabContainer"
    "memo"
    ".";
    background-color: #ffffff;
   }
      .tabHauptContainerGrau {
  height: auto;
  display: grid;
  grid-template-rows: auto 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 130px 25px 150px 114px 56px 56px 56px;
    grid-template-columns: 100%;
    grid-template-areas:
    "traeger"
    "bildmobil"
    "entfernung"
    "oeffnung"
    "form"
    "favorit"
    "favorit2"
    "info";
  }

  /* Handyansicht: Bild einblenden (auf dem Desktop steht es in der Bildspalte). */
  .tabHauptContainerBildMobil{ display: flex; }

  /* Abgemeldet: "Favorit setzen" und "Favoriten" wuerden ohnehin nur zum Anmelden
     auffordern — auf dem schmalen Schirm kosten sie zwei Zeilen. Beide Zeilen fallen
     mitsamt ihren Grid-Bereichen weg, "Kita Info" rueckt nach oben. */
  .tabHauptContainerTraegerInfo.ohneAnmeldung{
    grid-template-rows: 50px 130px 25px 150px 114px 56px;
    grid-template-areas:
    "traeger"
    "bildmobil"
    "entfernung"
    "oeffnung"
    "form"
    "info";
  }
  .tabHauptContainerTraegerInfo.ohneAnmeldung .tabHauptContainerFavorit,
  .tabHauptContainerTraegerInfo.ohneAnmeldung .tabHauptContainerFavorit2{ display: none; }
  
  .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: 6px 12px;
    grid-template-columns: auto auto 0px minmax(0, 1fr);
    grid-template-rows: minmax(56px, auto);
    grid-column-gap: 8px;
    align-items: center;
    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"
        "beschreibungBilder"
        "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"
        "beschreibungBilder"
        "beschreibungMemo";
}

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


}

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

.menueButton{
   width: 90px;

}

}

/* Download-Bereich fuer die PDF-Formulare aus /docdownload */
.downloadDokumenteBlock{
    margin: 5px 0 15px 0;
}

.downloadDokumenteListe{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.downloadDokumenteLink{
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background-color: #f7f7f7;
    color: #333;
    text-decoration: none;
    font-size: 15px;
}

.downloadDokumenteLink:hover{
    background-color: #eaeaea;
    border-color: #b0b0b0;
}

/* ===== Favoriten modern (Desktop zweispaltig, mobil Karten) ===== */
.favoritenContent{
  grid-template-columns: 320px 1fr;
  grid-template-rows: none;
  grid-template-areas: none;
  column-gap: 20px;
  grid-row-gap: 16px;
  align-items: start;
  padding: 16px;
  box-sizing: border-box;
}
#menueFavoritenTabelle{ grid-column: 1; }
#menueFavoritenStammdaten,
#menueFavoritenMapRoute,
#menueFavoritenForm,
#menueFavoritenBeschrebung{ grid-column: 2; }

/* Sektionen als Karten */
#menueFavoritenTabelle,
#menueFavoritenStammdaten,
#menueFavoritenForm,
#menueFavoritenBeschrebung{
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 14px 16px;
  box-sizing: border-box;
}
/* Stammdaten-Innengrid nutzt jetzt die Karte -> kein doppelter Rahmen/Padding */
#menueFavoritenStammdatenContend{ padding: 0; }

/* Favoriten-Liste: kompakte, auswaehlbare Karten (dataRowTemplate) */
#menueFavoritenTabelleContend .dx-datagrid-headers{ display: none; }
#menueFavoritenTabelleContend .dx-datagrid-rowsview table,
#menueFavoritenTabelleContend .dx-datagrid-rowsview tbody{ display: block; width: 100%; }
#menueFavoritenTabelleContend .favRow{
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0.5px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 8px;
  background: #ffffff;
  cursor: pointer;
}
#menueFavoritenTabelleContend .favRow > tr,
#menueFavoritenTabelleContend .favRow td{ display: block; border: 0 !important; padding: 0; }
#menueFavoritenTabelleContend .favRow td{ padding: 10px 12px; }
#menueFavoritenTabelleContend .favRow:hover{ background: #f2f7fb; }
#menueFavoritenTabelleContend .favRow.favRowSelected{
  border: 2px solid #00A3E4;
  background: #d6effb;
  box-shadow: 0 0 0 2px rgba(0,163,228,0.35);
}
#menueFavoritenTabelleContend .favRow.favRowSelected td{ background: transparent !important; }
#menueFavoritenTabelleContend .favRow.favRowSelected .favRowName{ color: #075a80; }
.favRowName{ font-weight: 600; font-size: 15px; color: #222222; }
.favRowSub{ font-size: 12px; color: #777777; margin-top: 2px; }

/* Leiste unter den Stammdaten: links "Zurueck zu Einrichtungen" (nur aus der Kita-Info
   heraus), in der Mitte der Favoriten-Schalter. Frueher stand hier ein einzelner
   Cyan-Primaerbutton ("Kind in Einrichtung anmelden") — die feste Einfaerbung wuerde die
   beiden neuen Buttons ununterscheidbar machen, deshalb nur noch die Kantenrundung. */
#menueFavoritenStammdatenButton{ margin-top: 12px; }
#menueFavoritenStammdatenButton .dx-button{ border-radius: 8px; }

/* Ohne Favoritenliste (Konto-Ansicht: die Liste steht im Untermenue links) nutzt die
   Kita-Anzeige die volle Breite. */
.favoritenContent.favOhneListe{ grid-template-columns: 1fr; }
.favoritenContent.favOhneListe #menueFavoritenStammdaten,
.favoritenContent.favOhneListe #menueFavoritenMapRoute,
.favoritenContent.favOhneListe #menueFavoritenForm,
.favoritenContent.favOhneListe #menueFavoritenBeschrebung{ grid-column: 1; }

/* Betreuungsformen/-zeiten als Chips */
#menueFavoritenStammdatenContendTab .favChipGroupLabel{ font-size: 13px; color: #777777; margin: 12px 0 6px; }
#menueFavoritenStammdatenContendTab .favChipGroup{ display: flex; flex-wrap: wrap; gap: 6px; }
.favChip{ display: inline-block; background: #e6f5fc; color: #0c5f85; font-size: 12px; padding: 4px 10px; border-radius: 20px; }
/* Kontakt-Feld-Icons im Stammdaten-Formular */
.favFieldIcon{ color: #888888; margin-right: 6px; font-size: 15px; vertical-align: -2px; }

/* Mobil: einspaltig, Button volle Breite */
@media screen and (max-width: 750px){
  .favoritenContent{ grid-template-columns: 1fr; column-gap: 0; padding: 10px; }
  #menueFavoritenTabelle,
  #menueFavoritenStammdaten,
  #menueFavoritenMapRoute,
  #menueFavoritenForm,
  #menueFavoritenBeschrebung{ grid-column: 1; }
  /* dxToolbar setzt "before"/"after" auf position:absolute und laesst nur "center" im
     Fluss. Auf schmalen Schirmen legt sich "< Zurueck zu Einrichtungen" damit ueber
     "Favorit setzen". Deshalb hier untereinander: Favoriten-Schalter oben (mittig),
     Zurueck darunter (linksbuendig). */
  #menueFavoritenStammdatenButton{ height: auto; }
  #menueFavoritenStammdatenButton .dx-toolbar-items-container{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  #menueFavoritenStammdatenButton .dx-toolbar-before,
  #menueFavoritenStammdatenButton .dx-toolbar-center,
  #menueFavoritenStammdatenButton .dx-toolbar-after{
    position: static;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
  }
  /* Die Toolbar-Items sind von Haus aus table-cell und richten sich damit immer links
     aus, egal was am Bereich als text-align steht -> auf inline-block umstellen. */
  #menueFavoritenStammdatenButton .dx-toolbar-item{ display: inline-block; }
  #menueFavoritenStammdatenButton .dx-toolbar-center{ order: 1; text-align: center; }
  #menueFavoritenStammdatenButton .dx-toolbar-before{ order: 2; margin-top: 8px; text-align: left; }
  #menueFavoritenStammdatenButton .dx-toolbar-after{ order: 3; }
}

/* ===== "Kind für Einrichtung registrieren" – moderne Kartenansicht ===== */
#kindAnmeldennContainer{
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Formular-Gruppe als Karte */
#kindAnmeldennForm .dx-form-group-with-caption{ margin: 0; }
#kindAnmeldennForm .dx-form-group{
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 14px 16px 4px;
}
#kindAnmeldennForm .dx-form-group-caption{
  font-size: 16px;
  font-weight: 600;
  color: #222222;
}
#kindAnmeldennForm .dx-texteditor{ width: 100% !important; }
/* Sektionen (Download / hochgeladene Dokumente / Upload) als Karten */
#kindDokumenteDownload,
#kindDokumenteListe,
#kindDokumente,
.kindAnmeldungCheckboxes{
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 14px 16px;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
}
#kindDokumenteListe{ max-width: 100%; }
#kindDokumenteHinweis{ margin-top: 0; }
/* Toolbar-Buttons: gestapelt, volle Breite */
#kindAnmeldennToolbar1{ width: 100%; }
#kindAnmeldennToolbar1 .dx-toolbar-items-container{ height: auto !important; }
#kindAnmeldennToolbar1 .dx-toolbar-before{
  width: 100% !important;
  position: static !important;
  transform: none !important;
  float: none !important;
  display: block !important;
}
#kindAnmeldennToolbar1 .dx-toolbar-item{
  display: block !important;
  width: 100% !important;
  padding: 0 0 10px 0 !important;
}
#kindAnmeldennToolbar1 .dx-button{ width: 100% !important; border-radius: 8px; }

@media screen and (max-width: 630px){
  #kindAnmeldennContainer{ padding: 10px; }
}

/* ===== Benutzerkonto Desktop modernisiert (Anschrift/Anmeldedaten/Passwort/
   Kinderliste/Neuanlage/Historie/Dokumente) – Karten-Look wie die übrigen Seiten ===== */
@media screen and (min-width: 631px){
  /* Inhaltsspalte begrenzen + Luft, damit Karten nicht über die volle Breite laufen */
  #kundeDataContent{ max-width: 960px; padding-right: 12px; box-sizing: border-box; }

  /* Formular-Sektionen als weiße Karte, Group-Caption = Kartentitel */
  #kundeDataContent .dx-form-group{
    background: #ffffff;
    border: 0.5px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 18px 22px 10px;
    margin: 0 0 16px;
  }
  #kundeDataContent .dx-form-group > .dx-form-group-caption{
    font-size: 17px; font-weight: 600; color: #222222; margin-bottom: 10px;
  }
  /* verschachtelte Gruppen (z.B. HsNr/Zusatz) ohne eigenen Rahmen */
  #kundeDataContent .dx-form-group .dx-form-group{
    background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
  }
  /* leere Gruppen (0 Felder) nicht als leeren Rahmen zeigen */
  #kundeDataContent .dx-form-group:not(:has(.dx-field-item)){ display: none; }
  /* Standard-Caption-Trennlinie entfernen: Titel sitzt direkt über den Feldern.
     Beseitigt die verwaiste Linie in der titellosen 2. Anschrift-Karte. */
  #kundeDataContent .dx-form-group-with-caption > .dx-form-group-content{ border-top: 0; }

  /* ERZ1/ERZ2: die beiden nebeneinander liegenden Gruppen (links Name/Adresse, rechts
     Geschlecht/Geburtstag/Kontakt) sind fachlich EIN Formular und bekommen keine eigenen
     Rahmen. Den Karten-Look traegt seit ERZ2 der Wrapper (#kontaktdatenAnschriftKarte /
     #kontaktdatenErz2Karte, weiter unten), damit die Speichern-Leiste mit in der Karte
     sitzt — das Formular selbst darf deshalb KEINEN eigenen Rahmen mehr haben,
     sonst liegen zwei Rahmen ineinander. */
  #kontaktdatenAnschriftForm .dx-form-group,
  #kontaktdatenErz2Form .dx-form-group{
    background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
  }

  /* Anmeldedaten liegen jetzt im Dialog; der alte 50/50-Grid (rechte Haelfte war fuer
     ein auskommentiertes Dokumente-Feld gedacht) wuerde die Felder dort auf halbe Breite
     stauchen. Gegenstueck zur bereits vorhandenen Mobil-Regel. */
  #kontaktdatenAnmeldedatentContend{ display: block; }

  /* Daten-Grids als Karte (Kinderliste-Anmeldungen/Historie/Dokumente-Liste) */
  #kinderAnmeldungenTab, #historieListe, #dokumenteListeTab, #kinderListetTab{
    background: #ffffff;
    border: 0.5px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    margin: 0 0 16px;
  }
  /* harten Eigenrahmen der Grids entfernen, damit die Karte sauber wirkt */
  #kinderAnmeldungenTab .dx-datagrid, #historieListe .dx-datagrid,
  #dokumenteListeTab .dx-datagrid, #kinderListetTab .dx-datagrid{ border: 0; }
  /* Titel + äußere Zellen von den Kartenrändern absetzen (Titel/Spaltenköpfe klebten am Rand).
     Nur First/Last-Zelle einrücken -> innere Spaltenabstände bleiben normal. */
  #kinderAnmeldungenTab .dx-datagrid-header-panel,
  #historieListe .dx-datagrid-header-panel,
  #dokumenteListeTab .dx-datagrid-header-panel{ padding: 8px 16px 2px; }
  #kinderAnmeldungenTab .dx-row > td:first-child,
  #historieListe .dx-row > td:first-child,
  #dokumenteListeTab .dx-row > td:first-child{ padding-left: 16px !important; }
  #kinderAnmeldungenTab .dx-row > td:last-child,
  #historieListe .dx-row > td:last-child,
  #dokumenteListeTab .dx-row > td:last-child{ padding-right: 16px !important; }

  /* Dokumente: Download- und Upload-Bereich als Karte */
  #dokumenteDownload, #dokumenteUpload{
    background: #ffffff;
    border: 0.5px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 16px 20px;
    margin: 0 0 16px;
  }

  /* Primärbutton (Speichern = dx-icon-todo, sowie Passwort-/Neuanlage-„Übernehmen") cyan */
  #kundeDataContent .dx-button:has(.dx-icon-todo),
  #kontaktdatenPasswordButton .dx-button,
  #kinderNeuanlageButton .dx-button{
    background-color: var(--kp-primary) !important;
    border-color: var(--kp-primary) !important;
    border-radius: 8px;
  }
  #kundeDataContent .dx-button:has(.dx-icon-todo) .dx-button-text,
  #kundeDataContent .dx-button:has(.dx-icon-todo) .dx-icon,
  #kontaktdatenPasswordButton .dx-button .dx-button-text,
  #kontaktdatenPasswordButton .dx-button .dx-icon,
  #kinderNeuanlageButton .dx-button .dx-button-text,
  #kinderNeuanlageButton .dx-button .dx-icon{ color: #ffffff !important; }
  #kundeDataContent .dx-button:has(.dx-icon-todo).dx-state-hover,
  #kontaktdatenPasswordButton .dx-button.dx-state-hover,
  #kinderNeuanlageButton .dx-button.dx-state-hover{
    background-color: #0092cc !important; border-color: #0092cc !important;
  }
  /* deaktivierter Speichern-Button nicht voll-cyan (soll nicht aktiv wirken) */
  #kundeDataContent .dx-button:has(.dx-icon-todo).dx-state-disabled{ opacity: 0.45; }
}
/* ===== Passwort-aendern-Dialog =====================================================
   #kontaktdatenPasswordtContend wurde aus #kundeDataContent in ein dxPopup verschoben
   (Kopfmenue "Ihr Konto > Passwort aendern"). Damit greifen die Konto-Karten-Regeln
   dort nicht mehr — der Dialog braucht seine eigene, schlichte Darstellung. */
.passwortDialogWrapper .dx-popup-content{ padding: 16px 20px 20px; }
/* Gruppen-Titel entfaellt: der Popup-Titel sagt bereits "Passwort aendern" */
.passwortDialogWrapper .dx-form-group-caption{ display: none; }
.passwortDialogWrapper .dx-form-group,
.passwortDialogWrapper .dx-form-group-with-caption > .dx-form-group-content{
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
}
/* leere Platzhalter-Gruppe (2. Spalte des Formulars) nicht als Luecke zeigen */
.passwortDialogWrapper .dx-form-group:not(:has(.dx-field-item)){ display: none; }
.passwortDialogWrapper .dx-field-item-content .dx-texteditor{ width: 100% !important; }
.passwortDialogWrapper #kontaktdatenPasswordButton{ margin-top: 14px; }
/* "Uebernehmen" als Primaerbutton — wie im Benutzerkonto zuvor */
.passwortDialogWrapper #kontaktdatenPasswordButton .dx-button{
  background-color: var(--kp-primary) !important;
  border-color: var(--kp-primary) !important;
  border-radius: 8px;
}
.passwortDialogWrapper #kontaktdatenPasswordButton .dx-button .dx-button-text{ color: #ffffff !important; }
.passwortDialogWrapper #kontaktdatenPasswordButton .dx-button.dx-state-hover{
  background-color: #0092cc !important; border-color: #0092cc !important;
}

/* ===== Stammdaten des Kindes ueber der Anmeldungen-Liste ==========================
   Das Formular liegt in #kinderListetContend zwischen der (unsichtbaren) Kinder-Grid
   und #kinderAnmeldungenTab. Der Hinweis bei uebernommenem Kind ist die letzte Zeile
   IM Formular (Item "hinweisGesperrt"), damit er wenig Platz braucht. */
.kindHinweisZeile{
  font-size: 13px;
  line-height: 1.4;
  color: #8a6100;
  background: #fff8e1;
  border-left: 3px solid #ffb300;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 2px;
}
/* Nur-lesbare Felder klar als solche erkennbar (sonst wirken sie wie leer bedienbar) */
#kindDatenForm .dx-state-readonly .dx-texteditor-input{ color: #555555; }

/* Formular UND Speichern/Abbruch liegen in EINER Karte (#kindDatenKarte), damit die
   Buttons zum Formular gehoerig wirken. Den Karten-Look traegt deshalb der Wrapper,
   nicht mehr die Formular-Gruppe. */
#kindDatenKarte{
    background: #ffffff;
    border: 0.5px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 18px 22px 14px;
    margin: 0 0 16px;
}
#kindDatenKarte .dx-form-group{
    background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
}
/* rbfunc.js setzt margin-left/-top inline fuer die frueher freistehende Leiste */
#kindDatenKarte #kindDatenFormToolbar{
    margin-left: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding-top: 10px;
    border-top: 1px solid #ececec;   /* dezent von den Feldern abgesetzt */
}

/* ===== Kind-Neuanlage-Dialog ("Neues Kind anlegen") ================================
   #kinderNeuanlagetContend wurde aus #kundeDataContent in ein dxPopup verschoben, die
   Konto-Karten-Regeln greifen dort nicht mehr. */
.kindNeuDialogWrapper .dx-popup-content{ padding: 16px 20px 20px; }

/* (Gruppen-Ueberschrift kommt gar nicht mehr aus dem Formular — siehe kp_vertragspartner.js;
   die Untergruppe "Abweichende Adresse" behaelt ihre Ueberschrift bewusst) */
.kindNeuDialogWrapper .dx-form-group,
.kindNeuDialogWrapper .dx-form-group-with-caption > .dx-form-group-content{
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
}
.kindNeuDialogWrapper .dx-field-item-content .dx-texteditor,
.kindNeuDialogWrapper .dx-field-item-content .dx-dropdowneditor{ width: 100% !important; }
.kindNeuDialogWrapper #kinderNeuanlageButton{ margin-top: 14px; }
.kindNeuDialogWrapper #kinderNeuanlageButton .dx-button{
  background-color: var(--kp-primary) !important;
  border-color: var(--kp-primary) !important;
  border-radius: 8px;
}
.kindNeuDialogWrapper #kinderNeuanlageButton .dx-button .dx-button-text{ color: #ffffff !important; }
.kindNeuDialogWrapper #kinderNeuanlageButton .dx-button.dx-state-hover{
  background-color: #0092cc !important; border-color: #0092cc !important;
}
/* Hinweis "noch kein Kind angelegt" oben im Dialog */
#kindNeuHinweis{
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-left: 4px solid #1e88e5;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 16px;
  color: #0d47a1;
  line-height: 1.45;
}

/* Button "Neues Kind anlegen" ueber den Kind-Stammdaten */
#kindNeuButton{ margin: 0 0 16px; }

/* ===== Persönliche Daten: ERZ1 + ERZ2 als je eine Karte ===========================
   Jede Karte umschliesst ihr Formular UND die von rbfunc.js dahinter gehaengte
   Speichern-Leiste (gleiches Muster wie #kindDatenKarte) — bei zwei Formularen
   untereinander waere sonst nicht erkennbar, welche Leiste zu welchem Datensatz
   gehoert. Den Karten-Look traegt deshalb der Wrapper, nicht die Formular-Gruppe. */
#kontaktdatenAnschriftKarte,
#kontaktdatenErz2Karte{
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 18px 22px 14px;
  margin: 0 0 16px;
}
#kontaktdatenAnschriftKarte .dx-form-group,
#kontaktdatenErz2Karte .dx-form-group{
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
}
/* rbfunc.js setzt margin-left/-top inline fuer die frueher freistehende Leiste */
#kontaktdatenAnschriftKarte #kontaktdatenAnschriftFormToolbar,
#kontaktdatenErz2Karte #kontaktdatenErz2FormToolbar{
  margin-left: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  padding-top: 10px;
  border-top: 1px solid #ececec;
}

/* Button "Anmeldedaten bearbeiten" ueber den Daten von ERZ1 */
#anmeldedatenButton{ margin: 0 0 16px; }

/* ===== Anmeldedaten-Dialog ========================================================
   #kontaktdatenAnmeldedatentContend wurde aus #kundeDataContent in ein dxPopup
   verschoben, die Konto-Karten-Regeln greifen dort nicht mehr. */
.anmeldedatenDialogWrapper .dx-popup-content{ padding: 16px 20px 20px; }
/* Gruppen-Ueberschrift entfaellt: der Popup-Titel sagt bereits, worum es geht */
.anmeldedatenDialogWrapper .dx-form-group > .dx-form-group-caption{ display: none; }
.anmeldedatenDialogWrapper .dx-form-group,
.anmeldedatenDialogWrapper .dx-form-group-with-caption > .dx-form-group-content{
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
}
.anmeldedatenDialogWrapper .dx-field-item-content .dx-texteditor,
.anmeldedatenDialogWrapper .dx-field-item-content .dx-dropdowneditor{ width: 100% !important; }
.anmeldedatenDialogWrapper #kontaktdatenAnmeldedatentFormToolbar{
  margin-left: 0 !important;
  margin-top: 14px !important;
}

/* ===== Anmeldungen eines Kindes als Formulare =====================================
   Das DataGrid #kinderAnmeldungenTab dient nur noch als Datenquelle (wie
   #kinderListetTab bei der Kinderliste); gerendert wird je Anmeldung eine Karte mit
   der Einrichtung als Ueberschrift. */
#kinderAnmeldungenTab{ display: none !important; }

.anmeldungKarte{
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 18px 22px 14px;
  margin: 0 0 16px;
}
.anmeldungTitel{
  font-size: 17px;
  font-weight: 600;
  color: #222222;
  margin: 0 0 12px;
}
.anmeldungKarte .dx-form-group{
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
}
/* Speichern-Leiste dezent von den Feldern abgesetzt, sitzt IN der Karte */
.anmeldungLeiste{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ececec;
}
.anmeldungLeiste .dx-button{ border-radius: 8px; }

@media screen and (max-width: 630px){
  .anmeldungKarte{
    border: 0.5px solid #dddddd;
    box-shadow: none;
    padding: 8px 14px 12px;
    margin: 0 0 12px 0;
  }
  .anmeldungKarte .dx-field-item-content .dx-texteditor,
  .anmeldungKarte .dx-field-item-content .dx-dropdowneditor{ width: 100% !important; }
}

/* Anmeldungs-Formular zweispaltig (links Form/Stufe, rechts Wunschbetreuung/Prioritaet):
   die beiden inneren Gruppen duerfen keine eigenen Abstaende bekommen. */
.anmeldungKarte .dx-form-group .dx-form-group{
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
}
/* nur zur Anzeige gedachte Prioritaet klar als solche erkennbar */
.anmeldungKarte .dx-state-readonly .dx-texteditor-input{ color: #555555; }

/* Hinweis "Kind bereits übernommen" steht UNTER den Buttons — sowohl bei den
   Kind-Stammdaten (#kindDatenHinweis in #kindDatenKarte) als auch bei jeder
   Einrichtungs-Karte (.anmeldungHinweis). Die Buttons bleiben dabei sichtbar,
   nur dauerhaft deaktiviert. */
#kindDatenHinweis,
.anmeldungHinweis,
#kontaktdatenErz1Hinweis,
#kontaktdatenErz2Hinweis{
  margin-top: 10px;
}

/* Mobil: dxToolbar legt seine Items als table-cell nebeneinander und bricht deshalb NIE
   um. Bei den Anmeldungen ragte "Löschen" (dritter Button) auf einem 375px-Display ueber
   den Kartenrand (gemessen 47px Ueberstand, Leiste wurde scrollbar); bei den Kinddaten
   passierte das mit nur zwei Buttons ab ~320px. Unterhalb des Mobil-Breakpoints daher
   fuer ALLE Speichern-Leisten in Karten Flexbox mit Umbruch. */
@media screen and (max-width: 630px){
  .anmeldungLeiste .dx-toolbar-before,
  #kindDatenFormToolbar .dx-toolbar-before,
  #kontaktdatenAnschriftFormToolbar .dx-toolbar-before,
  #kontaktdatenErz2FormToolbar .dx-toolbar-before,
  #kontaktdatenAnmeldedatentFormToolbar .dx-toolbar-before{
    display: flex !important;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 6px;
  }
  .anmeldungLeiste .dx-toolbar-before .dx-toolbar-item,
  #kindDatenFormToolbar .dx-toolbar-before .dx-toolbar-item,
  #kontaktdatenAnschriftFormToolbar .dx-toolbar-before .dx-toolbar-item,
  #kontaktdatenErz2FormToolbar .dx-toolbar-before .dx-toolbar-item,
  #kontaktdatenAnmeldedatentFormToolbar .dx-toolbar-before .dx-toolbar-item{
    display: block !important;
    padding: 0 !important;
  }
}

/* ===== "Kind in Kita anmelden" ====================================================
   Der Button sitzt in der rechten oberen Ecke der Kind-Karte, auf Hoehe der
   Ueberschrift (= Vorname des Kindes). Absolut positioniert, weil die Ueberschrift
   von DevExtreme im Formular erzeugt wird und dort kein Platz fuer eigene Elemente ist. */
#kindDatenKarte{ position: relative; }
#kindAnmeldenLeiste{
  position: absolute;
  top: 14px;
  right: 22px;
  z-index: 1;
}
#kindAnmeldenLeiste .dx-button{ border-radius: 8px; }

/* Dialog: dxPopup rendert unter <body>, Selektoren auf die ID greifen dort nicht. */
.kindAnmeldenDialogWrapper .dx-popup-content{ padding: 16px 20px 20px; }
#kindKitaAnmeldenKopf{ margin-bottom: 12px; }
/* Die Aktionsleiste ist eine dxPopup-Bottom-Toolbar und liegt damit AUSSERHALB des
   scrollenden Inhalts — bei vielen Favoriten wanderte sie sonst aus dem Bild. */
.kindAnmeldenDialogWrapper .dx-popup-bottom{
  padding-top: 10px;
  border-top: 1px solid #ececec;
}
.kindAnmeldenDialogWrapper .dx-popup-bottom .dx-button{ border-radius: 8px; }
/* Auswahlkaestchen und Einrichtungsname in einer Zeile */
.kindAnmeldenTitel{
  display: flex;
  align-items: center;
  gap: 10px;
}
.kindAnmeldenBox{ flex: 0 0 auto; }

@media screen and (max-width: 630px){
  /* Auf schmalen Schirmen wuerde der absolut gesetzte Button die Ueberschrift
     ueberdecken - dort steht er wieder im Fluss ueber dem Formular. */
  #kindAnmeldenLeiste{
    position: static;
    margin: 0 0 10px;
  }
}

/* Bislang ohne eigene Regel (nur Rohtext). Dezente Grundform, damit Kopfzeile des
   Anmelde-Dialogs und der Leer-Hinweis der Favoriten lesbar wirken. */
.kindHinweisText{
  font-size: 14px;
  line-height: 1.5;
  color: #444444;
}

/* #menueFavoritenForm ist dauerhaft leer: das dazugehoerige dxForm in kp_favoriten.js
   ist seit Langem auskommentiert. Als Karte mit Rahmen stand dort nur ein leerer Kasten —
   seit die Kita-Daten die volle Breite nutzen, faellt er deutlich auf. */
#menueFavoritenForm{ display: none; }

/* ===== Anmelde-Dialog, Schritt 2: Reihenfolge = Priorität ==========================
   Die Position in der Liste ist die Priorität (oberste = 1); verschoben wird über die
   Pfeil-Buttons rechts. */
.anmPrioHinweis{ margin-bottom: 12px; }
.anmPrioZeile{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 8px 10px 8px 14px;
  margin-bottom: 8px;
}
.anmPrioNummer{
  flex: 0 0 auto;
  min-width: 24px;
  font-weight: 600;
  color: #00A3E4;
}
.anmPrioName{
  flex: 1 1 auto;
  font-size: 15px;
  color: #222222;
  overflow-wrap: anywhere;
}
.anmPrioButtons{
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}

/* Einrichtungs-Karte: Überschrift und Reihenfolge-Pfeile in einer Zeile. Die Reihenfolge
   der Karten ist die Priorität — verschoben wird direkt hier. */
.anmeldungTitelZeile{
  display: flex;
  align-items: center;
  gap: 10px;
}
.anmeldungTitelText{ flex: 1 1 auto; overflow-wrap: anywhere; }
.anmeldungPrioButtons{
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}

/* "Alleiniges Sorgerecht" steht als eigenes Element zwischen den ERZ1-Feldern und der
   Speicherleiste (nicht im Formular — siehe kp_vertragspartner.js). */
#erz1SorgerechtZeile{ margin: 4px 0 2px; }

/* "Spezielle Kriterien": gleiche Karte wie die Erziehungsberechtigten. */
#kontaktdatenSpkKarte{
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 18px 22px 14px;
  margin: 0 0 16px;
}
#kontaktdatenSpkKarte .dx-form-group{
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;
}
#kontaktdatenSpkLeiste{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ececec;
}
#kontaktdatenSpkLeiste .dx-button{ border-radius: 8px; }

/* ===== Registrierung (nur E-Mail + Freischaltungslink) ============================
   Gleiche zentrierte Karte wie die Login-Maske. */
#registrierungNeuSeite{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px) minmax(0, 1fr);
  padding: 24px 12px;
}
#registrierungNeuKarte{
  grid-column: 2;
  /* Ohne min-width:0 waere die Spur so breit wie der min-content der Karte. Seit die
     Leiste nicht mehr position:absolute ist, zaehlt sie dabei mit, und ueber die
     100%-Breiten ihrer Buttons rastete die Spur auf der zuletzt genutzten Breite ein
     (620px) — die Karte ragte damit weit ueber den Handybildschirm hinaus. */
  min-width: 0;
  background: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 24px 24px 20px;
}
.regNeuTitelText{
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #222222;
  margin-bottom: 10px;
}
.regNeuHinweis{
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
  margin-bottom: 18px;
}
/* Passwortkriterien unter dem Hinweistext */
.regNeuRegeln{
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: #555555;
  background: #f4f8fa;
  border-left: 3px solid #0c5f85;
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
  margin: -8px 0 18px;
}
#registrierungNeuLeiste{ margin-top: 16px; }
/* Buttons gestapelt und über die volle Breite — wie in der Login-Karte.
   position:static ist Pflicht: dxToolbar setzt .dx-toolbar-before/-after auf absolute,
   die Bereiche tragen dann nichts zur Hoehe bei — der Leisten-Container blieb 0px hoch
   und beide Buttons hingen unterhalb der Karte in der Luft. */
#registrierungNeuLeiste .dx-toolbar,
#registrierungNeuLeiste .dx-toolbar-items-container{ height: auto !important; }
#registrierungNeuLeiste .dx-toolbar-before,
#registrierungNeuLeiste .dx-toolbar-center,
#registrierungNeuLeiste .dx-toolbar-after,
#registrierungNeuLeiste .dx-toolbar-item,
#registrierungNeuLeiste .dx-toolbar-button{
  position: static;
  display: block !important;
  width: 100% !important;
  /* DevExtreme haengt rechts 5px (Item) bzw. 15px (Bereich) an — die Buttons endeten
     dadurch vor der rechten Kartenkante und waren zudem unterschiedlich breit. */
  padding: 0;
  transform: none;
}
#registrierungNeuLeiste .dx-toolbar-item{ margin-bottom: 8px; }
#registrierungNeuLeiste .dx-button{ width: 100%; border-radius: 8px; }
/* Damit die 100%-Breiten nicht ueber die Karte hinausrechnen */
#registrierungNeuLeiste,
#registrierungNeuLeiste .dx-toolbar-items-container,
#registrierungNeuLeiste .dx-toolbar-before,
#registrierungNeuLeiste .dx-toolbar-center,
#registrierungNeuLeiste .dx-toolbar-after,
#registrierungNeuLeiste .dx-toolbar-item{ min-width: 0; box-sizing: border-box; }

@media screen and (max-width: 630px){
  #registrierungNeuSeite{ grid-template-columns: minmax(0, 1fr); padding: 12px 10px; }
  #registrierungNeuKarte{ grid-column: 1; padding: 18px 14px 16px; }
}