/* CSS Datei Leichlingen Stand 13.5.19 */

/* Umrechnung rem in Pixel:   px = 16 * rem * font-size
/* Box Model */
*, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* Small screens (default) */
html { font-size: 16px; font size 100%}
/*.untermenuepunkt li{ font-size: 90%; } */
table.termine th { display: none; }
table.termine td { font-size: 80%; }
#standortauswahl { display: block; }
.untermenuepunkt {padding-left: 0px;}
.cal td { height: 1.5rem }
/* div#noportrait { display: block; }  */
.untermenuepunkt {padding-left: 0px; }
#terminformular input { width: 280px; width: 17.5rem; } 

fieldset#datenerfassung label span{ display: inline-block; background-color: transparent; font-weight: bold; color: #011f5d;}
fieldset#datenausgabe label {display: block; background-color:  white; font-weight: bold; color: #011f5d;}
fieldset#datenerfassung label span a{ color: #011f5d; text-decoration: underline; }

@media (max-width: 980px) {
   .navMain-container { display: none; }
   #navTop { flex-direction: column; margin-right: 25px; align-items: flex-start; }
   .fa-facebook-square { padding: 0; }
   #kalender { padding-right: 20px; }
   #breadcrumb { padding-left: 10px; }
}

/* M.Wende: Fuer alles kleiner als Large screens (1024px) */
@media (max-width: 1023px) /* 64rem ?? */{
   body { background-image: none; padding: 0; }
   html { background-image: none; }
   .container { margin: 0; padding: 0; width: 100% !important; }
   .brand { float: left; }
   .nav-logo {padding-left: 28px; }
   .brand-de { font-size: 16px; line-height: 16px; }
   .row { margin: 0; padding: 0; }
   #header { padding: 0 15px; }
   #logo img { margin: 0; }
   #top-nav2 { width: 100% }
/*   #breadcrumb { display: none; } */

   .brand { width: 100%; line-height: 1; }

   .main-nav { height: 90px; }

.navbar-right {
   display: block;
   background: #3a8fd6;
   padding-left: 20px;
   width: 100%;
/* float: left;
display: table;
color: white; */
/* display: block; position: relative; padding: 0; margin: 0; width: 100% */
 }

.navbar-right ul li a, navbar-right a:hover, .navbar-right a:link:hover {
   line-height: 22px;
   padding: 4px 8px 8px 8px;
   text-align: left;
   margin: 0;
   font-size: 16px;
   font-weight: 300;
   font-stretch: normal;
   font-variant-caps: normal;
}

.navbar-right ul {
   padding: 0;
   position: relative;
   top: auto;
   left: auto;
}

.navbar-right li {
   box-shadow: none;
   padding: 0;
   margin: 0; */
   padding-top: 6px;
   display: inline-block;
   position: static;
   line-height: 22px;
   text-align: left;
}

.navbar-right A:hover {
text-decoration: underline;
background: transparent !important;
}

.innercontainer { width: 100%; }
#navundcontent { margin: 0; padding: 0px; }
h1 { font-size: 28px; }
h3 { font-size: 14px; }
form { padding: 0; }

div#content { padding: 0px 10px 10px 28px; }
div#navigation { padding: 10px 28px 10px 10px; }

#navigation h3 { 
/* height: 100%;
   line-height: 150%;
   font-size: 14px;
   color: white;
   background-color: #6FB725;
   border-radius: 10px 10px 0 0;
   padding: 5px 5px 5px 10px;
   margin: 0; */
   font-size: 18px;
}

#footer { margin-top: 10px; padding: 0 20px; }
#footer a , #footer span { font-size: 12px; margin-right: 10px; }
#bubble { top: -100px; right: 20px; }
#bubble img { width: 220px; }

/* #navigation p { margin-bottom: 0; }
#navigation .indent { display: block; margin-left: 10px; margin-right: 10px; }
#navigation a { padding-left: 10px; padding-right: 10px; }
a.infolinkx::after { content: " >> "; } */

fieldset#datenausgabe label { min-width: 100px; }
fieldset#datenerfassung input { width: 100%; }

} /* ENDE VON KLEINER ALS "LARGE SCREENS" */

/* M. Wende iPhones usw. */
@media (max-width: 640px) {
   .main-nav { height: 75px; }
   .nav-logo {padding-left: 17px; }
   .brand-de { font-size: 16px; line-height: 16px; }
   div#logo { margin-left: 15px; }
   div#content, div#navigation, #kalender { padding: 10px 10px 7px 10px; }
   div#navigation { float: left; width: 100%; margin-bottom: 0px; }
   .navbar-right a, .navbar-right a:link:hover {
       letter-spacing: 0.16px !important;
       font-size: 9px !important;
       line-height: 13px !important;
       padding: 1px 2px 7px 2px !important;
   }
   #standortauswahl { display: block; }
   .tooltip:hover span.info { width:100px; font-size:6pt; }
   #grafik img { width: 280px; height: auto; }
   #RATHAUS { left: 88px !important; top: 53px !important; }
   #RATHAUS img { width: 60px; }
   #NORF { left: 146px !important; top: 155px !important; }
   #NORF img { width: 60px; }
   #HOLZHEIM { left: 44px !important; top: 128px !important; }
   #HOLZHEIM img { width: 60px; }
   table input[type=text] { width: 100%; }

   /* ORDERED FLEX CONTAINER */
   div#navundcontent { flex-direction: column; }
   div#navigation { order: 1; }
   div#content { order: 2; }
   div#kalender { order: 3; }
   /* TEXT IN NAV-LEISTE ANPASSEN FUER 1.SPALT ANSICHT */
   .navangabe span { display: none; }
   span.unten.navangabe:after { content: "unten"; }
   span.oben.navangabe:after { content: "oben"; }
   .untermenuepunkt li { font-size: 16px; } /* >=16 Vermeidet iPhone zoom !! */
   .selection > option { font-size: 16px; } /* >=16 Vermeidet iPhone zoom !! */
   /* WG. SAUBERE iPHONE DARSTELLUNG */
   input#confirm { white-space: normal; word-wrap: break-word; -webkit-appearance: none; background-color: #E8E8E8; }
   input#confirm[disabled] { background-color: white; color: grey; }
}


/* IPhone 320*480px */ 
@media (min-width: 320px) {
   html {font-size: 100%; }
/*   .innercontainer {padding-left: 0; } */
/*   .untermenuepunkt li{ font-size: 100%; } */
   table.termine th { display: none; }
   table.termine td { font-size: 80%; }
   .untermenuepunkt { padding-left: 1rem; }
}
/* IPhone 320*480px und kleiner */ 
@media (max-width: 320px) {
   div#content { padding: 10px 5px 10px 5px; }
   div#navigation { padding: 10px 5px 10px 0px; }
   .untermenuepunkt { word-break: break-word; }
}



/* IPhone 569*320px */ 
@media (min-width: 560px) {
   html {font-size: 100%; }
   table.termine th { display: none; }
   table.termine td { font-size: 80%; }
   fieldset.termindaten label span {display: block; background-color: transparent; font-weight: bold;}
   fieldset#datenausgabe label {display: block; background-color:  transparent; color: #011f5d;  }
   fieldset#datenausgabe div { flex-direction: row; }
}
/* IPhone 569*320px und kleiner */ 
@media (max-width: 560px) {
   #tempus { display: none; }
   #footer { padding: 0; }
   fieldset#datenerfassung label span { display: inline; }
   fieldset#datenerfassung input { margin-bottom: 5px; }
   .untermenuepunkt .mpunkt { max-width:75%; }
}

 
/* Medium screens (640px) */
@media (min-width: 640px) {
/*   html { font-size: 112%; } */
/*   table.termine th { display: table-cell; } */
   table.termine td { font-size: 100%; }
   .cal td { height: 1rem }
/*   #navigation { width: 40%; }
   #content { width: 60%; } */
/*   h1 { margin-top: 15px; } */
}

/* Screens zwichen 640px und 768px (iPad Vertikal) */
@media (min-width: 640px) and (max-width: 768px) {
   .selection { font-size: 10px; }
   #standortauswahl { display: block; }
   .tooltip:hover span.info { width:100px; font-size:6pt; }
   #grafik img { width: 362px; height: auto; }
   #RATHAUS { left: 117px !important; top: 75px !important; }
   #RATHAUS img { width: 70px; }
   #NORF { left: 191px !important; top: 206px !important; }
   #NORF img { width: 70px; }
   #HOLZHEIM { left: 61px !important; top: 170px !important; }
   #HOLZHEIM img { width: 70px; }
}

/* Screens zwichen 769px und 834px (iPad Pro Vertical) */
@media (min-width: 769px) and (max-width: 834px) {
   #standortauswahl { display: block; }
   .tooltip:hover span.info { width:100px; font-size:6pt; }
   #grafik img { width: 442px; height: auto; }
   #RATHAUS { left: 154px !important; top: 97px !important; }
   #RATHAUS img { width: 70px; }
   #NORF { left: 243px !important; top: 258px !important; }
   #NORF img { width: 70px; }
   #HOLZHEIM { left: 83px !important; top: 215px !important; }
   #HOLZHEIM img { width: 70px; }
}

/* Screens kleiner 768px (iPad Vertical) */
@media (max-width: 767px) {
   #mainnavigation { display: none; }
}

 
/* Large screens (1024px) */
@media (min-width: 1024px) /* 64rem ?? */{
   #content { width: 75%; }
   #navigation { width: 25%; }
   html { font-size: 120%; }
   table.termine th { display: table-cell; }
   table.termine td { font-size: 100%; }
   div#noportrait { display: none; }
   #top-nav { display: block; }
   #top-nav2 { display: table; }
   fieldset#datenerfassung label span{display: inline-block; color: #011f5d; }  /* AB 16.7.18: Backgroundfarbe entfernt */
   fieldset#datenerfassung input{padding-left: 0.3rem;}
   fieldset#datenerfassung label {}
   fieldset#datenerfassung label span a{ color:  #011f5d; text-decoration: underline; }
   fieldset#datenausgabe label {display: inline-block; color: #011f5d; font-weight: bold; } /* AB 16.7.18: Backgroundfarbe entfernt */
}


/* Fuer breite Bildschirme */
@media (min-width: 40rem) {
   .column {
/*	   float: left; */ /* UEBERFLUESSIG DURCH FLEX FRAMES */
	   padding-left: 1rem;
	   padding-right: 1rem;
   }
   .column.voll { width: 100% !important; }
   .column.zweidrittel { width: 66.7%; }
   .column.halb { width: 50%; }
   .column.drittel { width: 33.3%; }
   .column.viertel { width: 25%; }
   .column.dreiviertel { width: 75%; }
   .column.flow-opposite { float: right; }
   .column.schmal { width: 25%; }
   .column.breit { width: 75%; }
}


/* Clearfix by Nicolas Gallagher */
.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}
.clearfix:after {
   clear: both;
}
.clearfix {
   *zoom: 1;
}
/* Clearfix Ende */

.blau { }