/* CSS Edingen-Nackarhausen 28.3.21 */

/* 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; color: black;}
fieldset#datenausgabe label {display: block; color: black; }
fieldset#datenerfassung label span a{ color: #009bbf; text-decoration: underline; }

/* M.Wende: Fuer alles kleiner als Large screens (1024px) */
@media (max-width: 1023px) /* 64rem ?? */{
   div#headerImage { height: 90px; }
   div#headerImage-x { background: url("../designs/edingen-neckarhausen/img/menue.png") no-repeat 98% 15px; }
   .navMain-container { display: none; } 
   .abschnitt { border: none; } 

    #navTop { padding: 0; }
    #navTop a { padding: 0 4px; }
    #navTop li:last-child { padding: 0; }
    #banner .euxino-top-bar-message { margin-left:0; }
   .logo { width: 32%; }
   .logo h1 a { font-size: 20.8px; line-height: normal; }
   body { padding: 0; }
   .container { margin: 0; padding: 0; width: 100% !important; }
   div#headerImage #mobile { display: block; }
   .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 12px; } */
h1 { font-size: 24px; line-height: 30px; }
h3 { font-size: 18px; }
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: 15px;
}

#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) {
   #banner { display: none; }
   .innercontainer { padding-left: 10px; padding-right: 10px; }
   .main-nav { height: 75px; }
   .nav-logo {padding-left: 17px; }
   .brand-de { font-size: 16px; line-height: 16px; }
   div#navundcontent { padding: 0; }
   div#content, div#navigation, #kalender, #standortauswahl {
        padding: 10px 10px 7px 10px;
   }
   h1 { font-size: 24px; font-weight: 300; }
   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;
   }
   div#standortauswahl { display: block; min-height: 500px; }
   .tooltip:hover span.info { width:100px; font-size:6pt; } 
   #grafik img { width: 300px; height: auto; }
   #LUENEN { left: 28px !important; top: 30px !important; }
   #LUENEN img { width: 70px; }
   #UNNA { left: 222px !important; top: 158px !important; }
   #UNNA img { width: 70px; }
   table input[type=text] { width: 100%; }
}


/* 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; }
   .xbtooltip { max-width: 250px !important; } /* TOOLTIP FENSTER BREITE */
}



/* 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; }
   fieldset#datenausgabe div { flex-direction: row; }
}
/* IPhone 569*320px und kleiner */ 
@media (max-width: 560px) {
   div#headerImage { height: 58px; }
   .navMain-container { display: none; } 
    div#navundcontent  {
        max-width: 500px;
   }
   div#headerImage #mobile img { padding: 0px 10px 15px 0; }
   #tempus { display: none; }
   #footer { padding: 0; }
   fieldset#datenerfassung label span { display: inline; }
   fieldset#datenerfassung input { margin-bottom: 5px; }
   .untermenuepunkt .mpunkt { max-width:75%; }
   .xbtooltip { max-width: 300px; } /* TOOLTIP FENSTER BREITE */
   fieldset#datenausgabe span { line-height: 1em; padding-top: 0; padding-bottom: 15px; }
}

 
/* 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) {
   div#navundcontent  {
       max-width: 660px;
   }
   h1 { font-size: 24px; font-weight: 300; }
   #standortauswahl { display: block; }
   #grafik img { width: 442px; height: auto; }
   #LUENEN { left: 50px !important; top: 52px !important; }
   #LUENEN img { height: 40px; width: auto; }
   #UNNA { left: 332px !important; top: 238px !important; }
   #UNNA img { height: 40px; width: auto; }
   .tooltip:hover span.info { width:100px; font-size:6pt; }
}
/* BREAK-POINT VECHTA */
@media (max-width: 768px) {
   #breadcrumb { font-size: 12.8px; } 
   .anzahlauswahl { width: 3rem; }
   .untermenuepunkt .mpunkt { max-width:75%; }
   #mainnavigation { display: none; }
   #breadcrumb { display: none; }
   div#headerImage { height: 70px; }
   div#headerBG { height: 400px; }
   div.logo { padding-left: 16px; }
   .logo img { width: 175px; }
/*   div#content { min-height: 50vh; } */
   .container { top: 400px; }

   /* ORDERED FLEX CONTAINER */
   div#navigation, div#kalender, div#content { width: 100%; margin-bottom: 0px; }
   div#navundcontent { display: flex; flex-direction: column; /*max-width: 715px; padding: 20px 15px 0 15px; */ margin-left: auto; margin-right: auto; }
   div#navigation { padding-left: 0; padding-right: 0; order: 5; }
   div#content { order: 2; }
   div#standortauswahl { order: 9; }
   div#kalender { order: 3; padding-left: 0; padding-right: 0; }
   /* 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 !! */
   .rechts { overflow:hidden; } /* Vermeidet iPhone h-scroll Problem */
   /* WG. SAUBERE iPHONE DARSTELLUNG */
   input#confirm { white-space: normal; word-wrap: break-word; -webkit-appearance: none; }
   .cal { font-size: 18px !important; }
   table.termine td { font-size: 16px !important; }
/*   .xbtooltip { display: none !important; } */ /* TOOLTIPS AUSSCHALTEN */
   .untermenuepunkt .mpunkt { padding-left: 7px; }
   .untermenuepunkt .rechts { padding-right: 7px; }
   .anzahlauswahl { width: 3rem; }
}

/* 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; }
   h1 { font-size: 24px; font-weight: 300; }
}

 
/* 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; }
   fieldset#datenerfassung input{padding-left: 0.3rem;}
   fieldset#datenerfassung label {}
   fieldset#datenerfassung label span a{ color:  #009bbf; text-decoration: underline; }
   fieldset#datenausgabe label {display: inline-block; }
}


/* 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 { }