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

/* Aufbau einer Kachel: Bild + Angaben, darunter der Infotext, ganz unten die Schalter.
   Der Infotext (grid-area memo) war mit 5em rund dreieinhalb Zeilen hoch — die Texte aus
   KPD_KITA_BASIS_TEXT.MEMO waren damit fast vollstaendig weggescrollt. 8em zeigt etwa fuenf
   bis sechs Zeilen; der Rest bleibt scrollbar (overflow:auto weiter unten).
   Hoehe bewusst auto: die Zeilen sind unterschiedlich hoch (Adressblock mit/ohne Homepage,
   eine oder zwei Schaltflaechen), eine feste Hoehe liess unten Luft oder schnitt ab. */
.tabHauptContainer {
  height: auto;
  width: auto;
  margin-bottom: 10px;
  display: grid;
  grid-template-rows: auto 8em auto 10px;
  grid-template-columns:  200px 1fr;
  grid-template-areas:
  "bild tabContainer"
  "memo memo"
  "knoepfe knoepfe"
  ". .";
  background-color: #ffffff;

}
.tabHauptContainerGrau {
  height: auto;
  width: auto;
  margin-bottom: 10px;
  display: grid;
  grid-template-rows: auto 8em auto 10px;
  grid-template-columns:  200px 1fr;
  grid-template-areas:
  "bild tabContainer"
  "memo memo"
  "knoepfe knoepfe"
  ". .";
  background-color: #f7f7f7;
}

/* Schalterleiste, immer die unterste Zeile der Kachel. Frueher standen die Schalter
   verteilt: "Kita Info" in der Bildspalte, "Favorit setzen" rechts neben dem Adressblock —
   der Infotext lag darunter. Jetzt eine Reihe fuer alle Breiten, mittig. */
.tabHauptButtonLeiste{
 grid-area: knoepfe;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 12px;
 padding: 8px 8px 12px;
}

/* Nur noch das Bild — der "Kita Info"-Button stand frueher hier darunter und sitzt jetzt
   in der Schalterleiste am Fuss der Kachel (.tabHauptButtonLeiste). */
.tabHaupBild {
  grid-area: bild;
  height: 100%;
  width: 100%;
  padding: 5px;
  padding-top: 14px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns:  auto;
  grid-template-areas:
  "picture";
}
.tabHaupPicture{
   grid-area: picture;
}

 .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: auto 1fr;
  grid-template-columns: 1fr 200px;
  grid-template-areas:
  "traeger entfernung"
  "oeffnung form";
}

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

/* Abgemeldet gibt es keinen Wohnort, zu dem sich eine Entfernung rechnen liesse — in der
   Zeile stand dann bei jeder Kita "Entfernung -- km". Der Platzhalter faellt weg und
   erscheint erst nach dem Anmelden. Die Klasse "ohneAnmeldung" setzt kp_anmeldung.js an der
   KACHEL (sie muss auch die Schalterleiste erreichen, die neben dem Innencontainer liegt);
   setLogin()/setLogOff() zeichnen die Liste neu, sie bleibt damit aktuell. */
.ohneAnmeldung .tabHauptContainerEntfernung{ display: none; }
/* Ohne die Entfernung bliebe die rechte Spalte der obersten Zeile leer und der Name der
   Kita stuende sichtbar links der Mitte. Er nimmt die Zeile daher ganz ein. */
.ohneAnmeldung .tabHauptContainerTraegerInfo{
  grid-template-areas:
  "traeger traeger"
  "oeffnung form";
}

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

/* Beide Schalter sind jetzt Flex-Elemente der Leiste am Fuss der Kachel, kein Grid-Bereich
   des Innencontainers mehr. */
.tabHauptContainerFavorit{
 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;
}
/* Feste Hoehe passend zur Grid-Zeile (130px). Ohne sie richtet sich die Hoehe nach dem
   Seitenverhaeltnis der Datei — bei den Wiesbadener Bildern waren das 143px, die Zeile
   lief damit ueber. object-fit:cover schneidet zu, statt das Bild zu verzerren. */
.tabHauptContainerBildMobil img{
 width: 190px;
 max-width: 100%;
 height: 120px;
 object-fit: cover;
 border-radius: 6px;
}

/* "Kita Info" — einziger Info-Button der Kachel, fuer alle Breiten sichtbar. Frueher gab es
   ihn zweimal (Bildspalte + Ersatz darunter), weil die Bildspalte ab 930px wegfaellt. */
.tabHauptContainerInfo{
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Abgemeldet gibt es keine Favoriten — "Favorit setzen" wuerde nur zum Anmelden auffordern.
   Auf schmalen Schirmen faellt der Schalter deshalb weg; "Kita Info" bleibt allein zurueck
   und steht durch justify-content:center der Leiste von selbst mittig.
   Auf dem Desktop bleibt er stehen (ausdruecklicher Wunsch). */
@media screen and (max-width:930px){
  .ohneAnmeldung .tabHauptContainerFavorit{ display: none; }
}

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: auto;   /* Zeilen unterschiedlich hoch — siehe Grundregel */
    display: grid;
    grid-template-rows: auto 8em auto 10px;
    grid-template-columns:  50% 50%;
    grid-template-areas:
    "tabContainer tabContainer"
    "memo memo"
    "knoepfe knoepfe"
    ". .";
    background-color: #ffffff;
   }
   .tabHauptContainerGrau {
  height: auto;


  display: grid;
  grid-template-rows: auto 8em auto 10px;
  grid-template-columns:  50% 50%;
  grid-template-areas:
  "tabContainer tabContainer"
  "memo memo"
  "knoepfe knoepfe"
  ". .";
  background-color: #f7f7f7;
}
   
  .tabHauptContainerTraegerInfo{
    height: 100%;
    display: grid;
    grid-template-rows: 60px 200px auto;
    grid-template-columns: 67% 33%;
    grid-template-areas:
    "traeger entfernung"
    "bildmobil bildmobil"
    "oeffnung form";
  }

  /* Abgemeldet faellt die Entfernung weg — der Name nimmt die oberste Zeile ganz ein
     (siehe Grundregel weiter oben). */
  .ohneAnmeldung .tabHauptContainerTraegerInfo{
    grid-template-areas:
    "traeger traeger"
    "bildmobil bildmobil"
    "oeffnung form";
  }

  /* Ab hier ist die linke Bildspalte ausgeblendet — das Bild sitzt darunter zwischen dem
     Namen der Kita und der Entfernung. Frueher begann dieser Bereich erst bei 630px,
     zwischen 631 und 930px blieb also gar kein Bild uebrig.
     Die Breite folgt dem Kasten, wird aber gedeckelt: ueber die volle Tabletbreite waere
     der 190px hohe Ausschnitt ein sehr schmaler Streifen (bei 930px rund 5:1). Auf dem
     Handy greift der Deckel nicht, dort bleibt es bei der vollen Breite. */
  .tabHauptContainerBildMobil{
    display: flex;
    padding: 0px 8px;
  }
  /* Das Bild steckt in einer Zwischenhuelle (.tabImages). Als Flex-Element ist die nur so
     breit wie ihr Inhalt — die 100% des Bildes bezogen sich damit auf sich selbst und es
     blieb bei der Eigenbreite (gemessen 252px statt 414px). Huelle mitziehen. */
  .tabHauptContainerBildMobil .tabImages{
    width: 100%;
    max-width: 560px;
  }
  .tabHauptContainerBildMobil img{
    width: 100%;
    max-width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 6px;
  }

  .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 120px auto 6px;   /* Infotext: 42px waren ein bis zwei Zeilen */
    grid-template-columns: 100%;
    grid-template-areas:
    "tabContainer"
    "memo"
    "knoepfe"
    ".";
    background-color: #ffffff;
   }
      .tabHauptContainerGrau {
  height: auto;
  display: grid;
  grid-template-rows: auto 120px auto 6px;   /* Infotext: 42px waren ein bis zwei Zeilen */
  grid-template-columns:  100%;
  grid-template-areas:
  "tabContainer"
  "memo"
  "knoepfe"
  ".";
  background-color: #f7f7f7;
}

  /* Nur die Bildzeile bleibt fest (das Bild ist auf 190px zugeschnitten), alles andere
     richtet sich nach dem Inhalt. Vorher standen hier 50/25/150/114px: der Adressblock
     hatte je nach Kita drei bis sechs Zeilen und stand in einem 150px-Kasten (gemessen
     67px Inhalt), die Betreuungsformen ein bis vier Zeilen in 114px. Beides liess Luft —
     und bei langen Kita-Namen lief die 50px-Zeile ueber (gemessen 51px Inhalt). */
  .tabHauptContainerTraegerInfo {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 200px auto auto auto;
    grid-template-columns: 100%;
    grid-template-areas:
    "traeger"
    "bildmobil"
    "entfernung"
    "oeffnung"
    "form";
  }

  /* Bildbereich und Bildgroesse stehen im 930px-Block weiter oben und gelten hier mit,
     ebenso das Ausblenden von "Favorit setzen" im abgemeldeten Zustand. */

  /* Handyansicht: Schalter untereinander statt nebeneinander. Zwei 220px-Buttons haetten
     zwar nebeneinander gepasst, standen aber gedraengt am Rand. "Weitere Informationen"
     steht oben — es ist die DOM-Reihenfolge, column dreht sie nicht. */
  .tabHauptButtonLeiste{
    flex-direction: column;
    gap: 10px;
  }

  /* Ohne Wohnort gibt es keine Entfernung, dort stand nur "Entfernung -- km" — die Zeile
     faellt mitsamt ihrem Grid-Bereich weg. */
  .ohneAnmeldung .tabHauptContainerTraegerInfo{
    grid-template-rows: auto 200px auto auto;
    grid-template-areas:
    "traeger"
    "bildmobil"
    "oeffnung"
    "form";
  }

  /* Adresse und Umkreis stehen abgemeldet leer und gesperrt da (der Umkreis braucht den
     Wohnort als Bezugspunkt). Auf dem schmalen Schirm kosten sie nur Platz. Getragen wird
     der ANGEMELDETE Zustand: beim Laden der Seite laeuft weder setLogin() noch setLogOff(),
     ohne die Klasse ist also von selbst alles richtig (zeigeAdressFilter in kp_anmeldung.js). */
  #formularContend:not(.mitAnmeldung) .filterNurAngemeldet{ display: none; }

  /* "Nur Favoriten anzeigen" macht auf dem schmalen Schirm der Menuereiter "Meine
     Favoriten". Das Kaestchen selbst ist deshalb ausgeblendet — sein Wert steuert aber
     weiterhin den Filter, der Reiter setzt ihn (setzeFavoritenAnsicht in kp_anmeldung.js).
     Bewusst per CSS und nicht ueber itemOption('visible'): dxForm baut sonst keinen Editor,
     und der Reiter haette nichts mehr zum Umschalten. */
  .filterNurFavoriten{ display: none; }
  
  .tabHauptContainerForm{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
  }
  
  .tabHauptContainerOeffnung{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0px;

  }

  /* Adressblock: nur die Werte zeigen. Jede Zeile ist ‹tr>‹th>Bezeichner‹/th>‹th>Wert‹/th>,
     die erste Zelle faellt auf dem schmalen Schirm weg — "Bahnhofstraße 55-57" und
     "65185 Wiesbaden" sagen von sich aus, was sie sind, und die Spalte kostete gut ein
     Drittel der Breite. Auf dem Desktop bleiben die Bezeichner stehen. */
  .tabOeffnungszeiten th:first-child{
    display: none;
  }
  
  #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;
}
/* Hinweis ueber den Feldern zu Erziehungsberechtigtem 1. Steht als erstes Element in der
   Formulargruppe, damit er zu den Feldern gehoert und nicht zum Passwortabschnitt. */
.regNeuErzHinweis{
  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: 0 0 4px;
}
/* Die Gruppenueberschrift ("Angaben zu Erziehungsberechtigter 1") sitzt im dxForm sonst
   direkt auf den Passwortfeldern — etwas Luft macht die beiden Abschnitte unterscheidbar. */
#registrierungNeuForm .dx-form-group-with-caption{ padding-top: 8px; }
#registrierungNeuForm .dx-form-group-caption{ font-size: 15px; font-weight: 600; color: #222222; }
#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; }
}