@charset "UTF-8";
:root {
    --background-color: #fff;
    --background-color-light:rgb(223, 226, 231);
    --background-color-verylight:rgb(234,238,240);
    --background-color-trans: hsla(180, 10%, 100%, 0.75);
    --background-color-trans2: hsla(180, 10%, 100%, 0.9);
    --background-color-even: #eee;
    --background-color-cyan:#07A9CB;
    --link-color: #333;
    --text-color: hsl(0, 0%, 20%);
    --text-color-inverted:#000;
    --text-color-medium: hsl(0, 0%, 40%);
    --text-color-heading: hsl(0, 0%, 26.7%);
    --text-color-coolgray: hsl(240, 2.3%, 56.7%);
    --inverse-text-color: hsl(0, 0%, 100%);
    --inverse-link-color: #0b81d0;
    --box-shadow:inset rgba(255,255,255,1) 0px 0px 20px 10px;
    --light-shadow:rgba(0,0,0,0.15) 0 2px 5px;
     --blue:#2897D7;
     --light-blue:#41BCF1;
     --dark-grey:#595959;
     --light-grey:#EAEEF0;
}

@media(prefers-color-scheme:dark) {
    :root {
        --background-color: hsl(180, 20%, 15%);
	    --background-color-light: hsl(180, 10%, 25%);
        --background-color-verylight:hsl(180, 10%, 22%);
	    --background-color-trans: hsla(180, 10%, 20%, 0.75);
	    --background-color-trans2: hsla(180, 10%, 20%, 0.9);
	    --background-color-even: hsl(180, 10%, 25%);
      --background-color-cyan:#007E99;
      --link-color: hsl(180, 0%, 100%);
      --text-color: hsl(180, 0%, 85%);
	    --text-color-inverted: hsl(0, 0%, 20%);
        --text-color-medium: hsl(0, 0%, 60%);
        --text-color-heading: hsl(120, 100%, 99.8%);
        --text-color-coolgray: hsl(240, 2.3%, 56.7%);
        --inverse-text-color: hsl(0, 0%, 100%);
        --inverse-link-color: hsl(206.7, 100%, 70%);
       --box-shadow:inset hsl(180, 20%, 15%) 0px 0px 20px 10px;
       --light-shadow:rgba(255,255,255,0.5) 0 2px 15px;
       --blue:#0085C3;
     --light-blue:#41BCF1;
     --dark-grey:#595959;
     --light-grey:#EAEEF0;
    }
}

.clearfix:before {
    display: table;
	content: " ";
}
.clearfix:after {
    display: table;
	content: " ";
    clear:both;
}
body
{
margin: 0;
padding: 0;
font-family: 'open_sansregular', sans-serif;
font-size: 90%;
display: flex;
flex-flow: column;
min-height: 100vh;
background-color: #fff;
background-color: var(--background-color);
color: hsl(0, 0%, 20%);
color: var(--text-color);
}
 header {
    height: 100vmax;
    max-height: 500px;
    background: url(/images/background-overlay2.png),url(/images/background-header2.jpg);
    background-size: cover;
    background-position-y: -15vw;
    position: relative;
    overflow: hidden;
}
@media(prefers-color-scheme:dark) {
    header {
    background: url(/images/background-overlay2-dark.png),url(/images/background-header2-dark.jpg);    
    background-size: cover;
    background-position-y: -15vw;
    }
}
@media(min-width:768px){
 header {
        height: 40vw;
    }
}
#gdpr-cookie-message {
	position:absolute;
	z-index: 1000;
	top:50px;
	background: rgba(255,255,255,0.9);
	padding: 5px 2vw;
	font-size: 90%;
	box-shadow: rgba(0,0,0,0.3) 0 03px 10px
	}

#gdpr-cookie-message button {
    display: inline-block;
    margin: 0 10px 0 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #4494cf;
    border-color: #4493cf;
}
#gdpr-cookie-message button:first-of-type {
    background-color: #5bc0de;
    border-color: #46b8da;
}
#gdpr-cookie-message ul li:first-child {
    display:none
}

p {
     -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'open_sanssemibold';
    font-weight: normal!important;
    -moz-hyphens: none;
    -o-hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

}
h1
{
    margin: 5px 0 8px 0;

}
h2 {font-size: 1.4rem}
h3 {font-size: 1.2rem;margin: 30px 0 20px 0;}
h4 {font-size: 1.15rem;}
h5 {font-size: 1.05rem;}
h6, p, ul, ol {font-size: 1rem;}
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {margin-top: 1.5em}
table + p {margin-top: 1.5em}
p.announce {
    padding: 10px 0;
    font-weight: 600;

}
p.large {font-size: 1.2rem; line-height: 2rem}
table th,
table td {padding: 0.25em 0.5em 0 0}
a, a:hover {color: inherit;text-decoration:none}
a.int-link {
    text-decoration: none;
    cursor: pointer;
    font-family: 'open_sanssemibold';
    color: var(--inverse-link-color);
}
a.ext-link {
    text-decoration: none;
    cursor: pointer;
    font-family: 'open_sanssemibold';
    color: var(--inverse-link-color);
    border-bottom:none!important;
}
a.ext-link:before {
    content:'\f360\2000';font-family: 'Font Awesome 5 Free'; font-style:normal!important
}

a[href^="http://"],a[href^="https://"] {
        border-bottom: 1px dotted var(--text-color);
}
a[href^="http://"]:hover,a[href^="https://"]:hover {
        color: var(--inverse-link-color);
}
a[href^="http://"].no-border,a[href^="https://"].no-border,
.row-badges a {border:none!important}

.small, small, figcaption {font-size: 85%;}
img.text-icon {width: 1.2rem}
strong, .strong {font-weight: 600}
normal, .normal {font-weight:400}
light, .light {font-weight:200}
a.int-link:hover {color:var(--link-color)!important}
a.int-link:after {content:none!important}
ol.nolist {list-style-type:none; margin:0;padding: 0;}
.static {position:static!important}
.relative {position:relative!important}
.absolute {position:absolute!important}
.text-white {color: #fff!important}
.btn {border-radius: 3px; box-shadow: rgba(0,0,0,0.25)0 2px 5px}
.btn-primary {
    color: #fff;
    background-color: #187DBA;
    border-color: #187DBA;
}
.btn.btn-warning {color:#fff}
.btn-lg {padding: 10px 25px; }
.btn-lg img {height: 38px;margin: 0px 25px 0 -10px;vertical-align: middle;}
.popover-header {
  padding: 0 0.75rem;
  margin: 0.5rem 0 0 0;
  background-color: transparent;
  border-bottom: none;
}
.contact {font-weight: 600;cursor:pointer; white-space: nowrap;color:var(--inverse-link-color); }
.contact:hover {color:var(--inverse-link-color)}
svg.at-sign,img.at-sign {height: 0.85em;width: 1em;vertical-align: text-bottom;margin: 0 0 0.15em 0;padding: 0 2px;fill: var(--link-color);color:inherit}
.martop_5 {margin-top: 5px!important}
.martop_10 {margin-top: 10px!important}
.martop_20 {margin-top: 20px!important}
.martop_30 {margin-top: 30px!important}
.martop_40 {margin-top: 40px!important}
.martop_60 {margin-top: 60px!important;}
.martop_80 {margin-top: 80px!important}
.marbottom_10 {margin-bottom: 10px!important}
.marbottom_20 {margin-bottom: 20px!important}
.marbottom_30 {margin-bottom: 30px!important}
.marbottom_40 {margin-bottom: 40px!important}
.marbottom_60 {margin-bottom: 60px!important}
.marbottom_80 {margin-bottom: 80px!important}
.float-right {float:right}
img.float-right {margin:  2px 0 10px 20px;}
.float-left {float:left}
img.float-left {margin:  2px 20px 10px 0;}
img.img-fluid-50,
.img-fluid-33 {width:100%; height: auto;}
img.img-maxwidth200-300 {max-width:200px;}

input.p100_minus20 {
    width: calc(100% - 45px);
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;

}

@media (min-width:600px){
  img.img-maxwidth200-300 {max-width:300px;width: 100%;}
}
img.img-maxwidth400 {max-width:400px;width: 80%;}
img.img-maxwidth800 {width: 80%;max-width:800px}
@media(min-width:600px){
img.img-fluid-33 {width:33%; height: auto;float:left; margin: 5px 20px 20px 0;}
img.img-fluid-50 {width:50%; height: auto;float:left; margin: 5px 20px 20px 0;}
}
sup {cursor:pointer; margin-left: 0.15rem}
.main {flex:1;}
.main ul {margin: 20px 0; padding: 0;list-style-type:none;}
.main ul li {margin: 0 0 10px 0; padding: 0;list-style-type:none;}
.main ul li.locked {display:inline-block;background: #ccc;background:url(/images/icon-wib.png) no-repeat right center;padding-right: 30px; background-size: 20px }

img.framed {border: 1px solid #ccc;border-radius: 2px;box-shadow:var(--light-shadow)}

footer {background:#dedede;background:var(--background-color-light);padding: 10px 0;margin-top: 20px;z-index: 1;font-size:13px}
body.map footer {background:#dedede;background:var(--background-color-light);padding-top: 10px;margin-top: 20px;position:fixed;bottom: 0;width: 100%;}
footer .text-right.footernav {text-align:left!important;}
footer .text-right.footernav a {margin: 5px;}
.row.stretch {display:flex; align-items:stretch;padding: 0 -15px 0 0px;}
.row.stretch div.stretch {margin:15px;;}

@media(min-width: 500px) {
	.halb {width: 50%}
	.drittel {width: 33%}
	.text-center .halb,
	.text-center .drittel {margin: 0 auto}
}
/* flexbox vertical */
.align-vertical {display: block;text-align:left;}
@media(min-width:768px) {
	.align-vertical {display: flex;align-items:center;text-align:left;}
	.align-bottom {display: flex;align-items:flex-end; text-align:left}
.row.stretch div.stretch {display: flex;align-items:center;margin:4px 0 10px 15px;max-width: calc(50% - 30px);}
}

/* bootstrap modals */
.modal.fade .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0); 
      transform: translate(0, 0);

 }
.modal-body img.img-responsive {width:100%}
.modal-body div.caption {width: 100%!important;text-align:center;margin: 5px 0 -5px 0!important;}

/*### map #########################################*/

body.map form#waterform {
    position: relative;
    z-index: 1;
    top: 50px;
    background: var(--background-color);
    padding: 20px 0 10px;

}
body.map .form-control,body.map .form-select {
    background-color:var(--background-color-even)!important; 
    color: var(--text-color)!important
}
body.map .btn-help {width: 100%;font-family: 'open_sanssemibold';border-color: #eee;}
body.map label {display:block;margin-bottom:5px;}

body.map .row .info {padding-right:0;}
body.map .row.form-group.pulldown {
    margin: 0;

}
body.map .row.form-group.pulldown > div {
    padding-right: 0px;
    margin-bottom: 10px;

}

@media(min-width:576px){
body.map .row.form-group.pulldown {
        margin: 0;
    
    }

}
    body.map .btn-help {
        max-width: 35px;
        font-family: 'open_sansbold';
        background-color:var(--background-color-even)!important; 
        background-color: var(--blue)!important;
        border-color: var(--blue)!important;
        border-radius: 5px;
        color: #fff;
    }

 #map .geocoder {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 240px;

}
 #map .mapboxgl-ctrl-geocoder {
      min-width: 100%;
  }
#map .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
    /* display:none */

}



/*## Big overview map #####################*/

div#map.overview {
    border: 1px solid #ccc;
    overflow: visible;
    margin: 50px 10px;
    width: 98.5%;
    height: 80vh;
    position: relative;

}
div#map.overview .mapboxgl-popup {
    text-align: center;
    font-size: 110%;
    position: absolute;
    color: #333;

}
div#map.overview .mapboxgl-popup .mapboxgl-popup-content {
    padding: 5px 8px!important;
    font-size:0.6rem;
    font-weight:normal;
    font-family:'open_sansregular';
}
div#map.overview .mapboxgl-popup a.btn.edit {margin: 10px 0 5px}

div#map.overview .legend {
    position: absolute;
    top: 2px;
    left: 2px;
    background: rgb(255,255,255);
    padding: 1px;
    z-index: 1;
    color: #333;
    border: 1px solid #ddd;

}

.legend>span {white-space:nowrap;display:inline-block;margin: 0 5px}

span.dot
{
	background: #fff;
	width: 10px!important;
	height: 10px;
	display: inline-block;
	margin-right: 4px;
}

.dot.not {
    background: rgb(200,200,200);
}

/*haerte */
.dot.wm-h1,.dot.time1 { background: rgb(90, 200, 50); }
.dot.wm-h2,.dot.time2 { background: rgb(245,225,110); }
.dot.wm-h3,.dot.time3 { background: rgb(235,75,75); }

/*nitrat*/
.dot.dw-h0 { background: rgb(24, 216, 116); }
.dot.dw-h1 { background: rgb(7, 169, 203);}
.dot.dw-h2 { background: rgb(136, 107, 225);}
.dot.dw-h3 { background: rgb(230, 52, 216); }
.dot.dw-h4 { background: rgb(239, 0, 0); }

/*chlorid */
.dot.wm-cl100plus { background: rgba(180,0,0,1); }
.dot.wm-cl100- { background: rgba(255,0,0,1); }


/* menubutton mit Infospalte */

#menu a
{
	font-size: 13px;
	display: block;
	margin: 10px 0;
	padding: 10px;
	text-decoration: none;
	color: #fff;
	background:rgba(30, 177, 208, 0.7);
	text-align: center;
}

#menu a:hover
{
	color: #fff;
}
@media(min-width:768px){
	#menu a:hover {	
	background-color: rgba(51, 202, 52, 0.85);
	color: rgba(90, 227, 255, 0.0);
}
}
#menu a.active
{
	background-color: rgba(51, 202, 52, 0.85);
	color: #fff;
}

#menu a.active:hover {color: #fff;}
@media (min-width:512px){
	#menu a.active:hover {
		background:rgba(30, 177, 208, 0.7);
		color: rgba(51, 202, 52, 0);}

}
/* ohne Infospalte */

#menu.open a
{
	color: #fff;
	background: #00A9CB;
}

#menu.open a:hover
{
	background-color: #00A9CB;
	color: #65c800;
}
#menu a:hover::after {color: #fff;}

#menu.open a.active
{
	background-color: #00A9CB;
	background: #65c800;
	color: #fff;
}

#menu.open a.active:hover { /* background: #65c800; */color: #07A9CB; }

	.mobile-close { display: none; }
	/*div.linke-spalte, div.infospalte {width: 360px;}*/
	body.regions div.linke-spalte,body.regions div.linke-spalte div.infospalte {width: 240px;}
	
	.tooltip
	{
		transition: .5s cubic-bezier(0, 0, 0.5, 1) transform;
		transform-origin: 0 1em;
		opacity: 1;
		display: block!important;
	}
	
	div.open-button:not(:hover) div.tooltip:not(:hover), div.close-button:not(:hover) div.tooltip:not(:hover)
	{
		transform: scale(0);
		transition: .25s transform;
		opacity: 0;
	}

	.caption>span {/* margin-right: 10px; */display:inline-block;font-size: 90%;}
#m-map .modal-body {padding: 0;}
#m-map .modal-body #map.mapboxgl-map {border-radius: 10px;height: 95vh}
#m-map .modal-body canvas {border-radius: 5px;}
#m-map .modal-body .infobereich {z-index: 1;position: absolute;width: 240px;padding: 10px;background:rgba(255,255,255,0.75);border-radius: 5px;}
#m-map .modal-body .infobereich h5 {margin: 0 0 10px 0}
#m-map .modal-body .infobereich .umschalter label {display:inline-block;font-weight: normal;width: 200px;}
#m-map .modal-body .infobereich .umschalter input:after {font-size: 9px!important}
#m-map .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {/* margin: 25px!important */}
.mapboxgl-popup>div {color: #333!important;}

@media(orientation:portrait){
  #m-map .mapboxgl-ctrl-top-right {bottom: 90px;left: 20px;top: auto;right: 0;}
  #m-map .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {max-width: 100%;width: 90vw;}
}
a[data-toggle='modal'][data-type='image'] {position:relative;float:left;width: 100%;}
a[data-toggle='modal'][data-type='image']:after {
	content:'+';
	color: #fff;
	position: absolute;
	background:#000;;
	width: 18px;
	line-height: 18px;
	text-align:center;
	border-radius: 100%;
	font-size: 20px;
	left: 10px;
	top: 10px;
	opacity:0.2;
}
a[data-toggle='modal'][data-type='image']:hover:after {
	opacity:1;
}
.close-modal,.next-modal,.previous-modal {
  position: absolute;
  width: 35px;
  height: 35px;
  padding:3px 2px 0 1px;
  background-color: #026DBB;
  top: 25px;
  right: 25px;
  cursor: pointer;
  z-index: 1;
  opacity: 0.5;
  border-radius:  5px;
}
.close-modal:hover,.next-modal:hover,.previous-modal:hover {
  opacity: 1;
}
.close-modal .lr {
  height: 30px;
  width: 2px;
  margin-left: 16px;
  background-color: #fff;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}
.close-modal .lr .rl {
  height: 30px;
  width: 2px;
  background-color: #fff;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}
/* next-modal*/
.next-modal {
  height: 60px;
  padding:3px 2px 0 1px;
  background-color: #026DBB;
  top: calc(50% - 35px);
  right: 25px;
}
.next-modal .lr {
  height: 30px;
  width: 2px;
  margin-left: 16px;
  background-color: #fff;
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  /* IE 9 */
  -webkit-transform: rotate(135deg);
  /* Safari and Chrome */
  z-index: 1051;
}

.next-modal .rl {
  height: 30px;
  width: 2px;
  background-color: #fff;
  transform: rotate(45deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1052;
  margin:-8px 0 0 15px
}
/* previous-modal*/
.previous-modal {
  height: 60px;
  padding:3px 2px 0 1px;
  background-color: #026DBB;
  top: calc(50% - 35px);
  left: 25px;
  right:auto;
}
.previous-modal .lr {
  height: 30px;
  width: 2px;
  margin-left: 16px;
  background-color: #fff;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}

.previous-modal .rl {
  height: 30px;
  width: 2px;
  background-color: #fff;
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  /* IE 9 */
  -webkit-transform: rotate(135deg);
  /* Safari and Chrome */
  z-index: 1052;
  margin:-8px 0 0 15px
}

.next-modal a:after,.previous-modal a:after{content:none!important}

@media (min-width: 768px) {
.modal-dialog {width: 80%;max-width:80%;margin: 30px auto;}
}
.popup {
	display: none;
	position:absolute;
	bottom: 0;
	background: #fff;
	border: 1px solid #dedede;
	box-shadow: rgba(0,0,0,0.25)0 2px 10px;
	padding: 2%;
	width: 90%;
	max-width: 600px;
}
.popup.right {right: 20px;}
.popup.left {right: 10px;}
.popup.grundwasser {
    top: 70px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100vh - 100px);
    max-width:100%
}

.fade_in {opacity: 0}

table.colored {color: #fff; width: 100%}
table.colored th,
table.colored td {padding: 5px; text-align: right;border: 1px solid #fff; border-width: 2px 0}
table.colored th:first-child,
table.colored td:first-child {text-align: left;}
table.colored.pink-cyan th {background:#FF4BC4;}
table.colored.pink-cyan td {background:#07A9CB;}
table.colored td.no-color {background:none; color: #333;padding: 1em 0;}
@media(min-width:360px){
	table.colored th,
	table.colored td  {padding: 5px 10px;}
}

@media(min-width:600px){
		table.colored {width: auto}
}


/*** Startseite ***/
 .row-1,
 .row-2,
 .row-3,
 .row-4,
 .row-5,
 .row-6,
 .row-7,
 .row-8,
 .row-9,
 .row-10,
 .row-wib,
 .row-blog,
 .row-barchart,
 .row-text
 {
    margin: 15px 15px;
    position: relative;

}
figure .row {margin: 20px -15px}
.dart-left {
    margin-top: 40px;
    margin-right: 0;
    margin-left: 20px;
    margin-bottom: 0;
}
.dart-left:before {
	display:inline-block;
	content:url(/images/pfeil-links.png);
	margin: 0 20px 0 -80px;
	vertical-align: middle;
	}
.dart-right {margin: 0px 0 0 20px}
.dart-right:after {
	display:inline-block;
	content:url(/images/pfeil-rechts.png);
	margin: 0 -80px 0 20px;
	padding: inherit0px;
	vertical-align: middle;
	}
img.no3, img.dh {width: 60%; height: auto}
 .background {position:absolute;margin: 0;z-index:-1;}
 .background img {width: auto; height: 20vw;z-index:-1}
 .background.nitrat img {margin: -180% 0 0 0;width: auto;height: 14vw;}
 .background.haerte img {margin: -180% 0 0 0;height: 14vw;}
@media(min-width:768px) {
	 .background.nitrat img {margin: -16vmax 0 0 10vw;} .background.haerte img {margin: -15vmax 0 0 10vw;} }
@media(min-width:1200px) { .background.nitrat img {/* margin: 500px 0 0 0 */}}
 h2 {
    margin: 0.5em 0 1rem 0;
    /* width: 70vw; */

}
 h3 {
    color: #555;
    color: var(--text-color-light);
    margin-top: 0.5em;

}
 h4 {fcolor: #555; color:var(--text-color-light); margin-top: 0.5em}
 h5 {color: #555; color:var(--text-color-light); margin-top: 0.5em}
 h6 {color: #555; color:var(--text-color-light); margin-top: 0.5em}

/*#############################################################*/
/*### header ############################################*/
/*#############################################################*/

 .logo {
    position: absolute;
    width: 100%;
    top: 70px;
    text-align: center;
}
.logo h1 {
    font-size: 1.5rem;
    line-height: 30px
margin: 0 auto;
    display: inline-block;
    position: relative;
    left: -2vw;
    color: var(--text-color);

}
    
 .logo img {
    width: 40px;
    margin-bottom: 20px
    height: auto;
}

@media(min-width:768px){
   .logo {
        top: 6vw;
        font-size: 2.5vw;
    
    }
 .logo h1 {
    margin: 0 auto 0 -10vw;
    }  
 .logo img {
    width: 4.5vw;

}
}

@media(min-width:1600px){
.logo {
        font-size: 2.5rem;
        top: 100px;
    
    }
 .logo img {width: 70px}
    
}
 .poligones {
    display: none;

}

 .smartphone-header {
}
.row.background {width: calc(100% + 30px)!important;margin-left: -15px; margin-right: -15px}

 .row.intro .textblock {
    padding: 10px 15px 0 15px;
    overflow: hidden;
    background: var(--background-color-trans);
    position: absolute;
    bottom: 0;
    width: 100%;

}	
   .row.intro .textblock h2{
    font-size: 4vw;
    line-height: 150%;
    width: 75vw;

}	
   .row.intro .textblock h3{
    font-size: 3.5vw;
    line-height: 130%;
    width: 90vw;

}


media (min-width:400px) {
	 .row.intro .textblock {
        overflow: hidden;
    
    }
	.row.intro .textblock h2 {
        /* font-size: 4vw; */
    
    }
    .row.intro .textblock h3 {
        /* font-size: 3.5vw; */
    
    }
}
@media (min-width:500px) {
	.row.intro .textblock h2 {
        /* font-size: 1.25rem; */
    
    }
    .row.intro .textblock h3 {
        /* font-size: 1.1rem; */
    
    }
}

@media (min-width:768px) {

   .poligones {
        display: block;
        margin: 40px 0 2vw 4vw;
        height: 16vw;

    }
  .row.intro .textblock {
        width: 55vw;
        position: relative;
    
    }	
.row.intro .textblock h2 {
        font-size: 1.6vw;
        width: auto;
    
    }
.row.intro .textblock h3 {
        font-size: 1.5vw;
        width: auto;
    
    }
   .smartphone-header {
        transform: rotate(0deg);
        margin: 50px 10vw -40px;
        max-width: 100%;
        display: inline-block;
    
    }
}
@media(min-width:1024px){
}
@media (min-width:1200px){
    .poligones {height: 200px;margin: 40px 0 4vw 4vw;}

   .row.intro .textblock h2{font-size: 1.2rem}	
   .row.intro .textblock h3{font-size: 1.1rem}
}
/*## Querformat #######################################################*/

  @media(orientation:landscape) and (min-width:600px){
  }  
  @media(orientation:landscape) and (min-width:1024px){
  }
  @media(orientation:landscape) and (min-width:1200px){
       .row.intro .textblock{}
  }
  @media(orientation:landscape) and (min-width:1600px){
  }



.smartphone-container {
    width: 100%;
    margin: 20px 0;
    position: relative;
    text-align:center;
    margin: 40px 0;

}
    header .smartphone-container {margin: 150px 0 0 100px;}

@media(min-width:768px) {
.smartphone-container {
        margin: 0;
    }
    header .smartphone-container {text-align:right;}
}

.smartphone-container.big {margin: 0 0 0 15%;}
.smartphone-container.big .with_shadow {position:absolute;z-index: -1; width: 150%; right: 0;bottom: -20px;}
.smartphone-container.big .smartphone {width: 100%;}

}
@media(min-width:1200px){
	.smartphone-container {
        width: 100%;
        margin: 0 0 0 0;
        position: relative;
    
    }
.smartphone-container .with_shadow {position:absolute;z-index: -1;width: 100%;/* right: 140px; */bottom: -40px;}
.smartphone-container.big .with_shadow {position:absolute;z-index: -1; width: 100%; right: 30%;bottom: -20px;}
.smartphone-container.big .smartphone {width: 70%;}

}
@media(min-width:1200px){
	.smartphone-container {
        margin: 0 auto;
    
    }
.smartphone-container .with_shadow {position:absolute;z-index: -1;width: 100%;right: 70px;bottom: -40px;}
.smartphone-container.big .with_shadow {position:absolute;z-index: -1; width: 100%; right: 30%;bottom: -20px;}
.smartphone-container.big .smartphone {width: 70%;}

}

.smartphone-container img {
    height: 70vw;
    max-height: 440px;
    width: auto;
    max-width: 95vw;

}

/* row-1 */

.row-1 h2 {font-size: 5vw}
@media (min-width:360px) {
  .row-1 h2 {
        font-size: 3.5vw;
    
    }
}
@media (min-width:640px) {
.row-1 {margin-top: 30px;}
div.balls {position: absolute;z-index: 9;width: 100%;}
div.balls img {width: auto;margin: 20px!important;position:absolute}
div.balls img.ball-1 {width: 80px;left: 0;}
div.balls img.ball-2 {width: 70px;right: 70px;}
div.balls img.ball-3 {width: 60px;left: 15%;top: 80px}
div.balls img.ball-4 {width: 90px;right: 20%;top: 120px;}
div.balls img.ball-5 {width: 50px;right: 25px;top: 100px}
 .row-1 h2 {
        font-size: 1.3rem;
    
    }
 .row-1 p {color:#666;color:var(--text-color-medium);margin-top: 10px}
}

@media (min-width:768px){
.row-1 {
        margin-top: 20px;
    
    }
 .row-1 h2 {
        font-size: 1.3rem;
    
    }
 .row-1 p {font-size: 16px}
}

@media (min-width:1200px){
 .row-1 p {font-size: 20px;margin-top: 20px;-moz-hyphens: none;-o-hyphens: none;-webkit-hyphens: none;-ms-hyphens: none;hyphens: none;}
}


/* row-2 */
body.home	.row.row-2 figure {margin-top: 30px;max-height:500px;overflow:hidden;display:flex;align-items: center}

/* row-3 */

@media(min-width:768px) {
body.home	.background.transform .white {/*! width: 60%; */text-align:left;}
body.home	.background.transform .white h3 {font-size: 3vmax;}
body.home	.background.transform .white p {font-size: 1.5vmax;}
	}
.transform {
	top: 0px;
	padding: 10px 0 20px 0;
	transform: skewY(-7deg);
	width: calc(100% + 15px)!important;
	}
	.background.transform .white * {color: #fff;}

/* row-4 */
body.home .row-4 .box.light-grey {
    background: var(--background-color-verylight);
    padding: 20px 5px 5px 5px;
    margin: 0;

}

.dart-left {
	margin: 30px 0;
	color: #333!important;
  color:var(--text-color)!important;
	font-size: 20px;
	line-height: 18px;
}
.dart-left:before {display:none;}

.dart-right{margin-bottom: 50px;font-size: 22px;}
.dart-right:after {display:none;}

@media(min-width:768px){
body.home .row-4 {}
body.home .row-8 {margin: -70px 0 40px 0;}
body.home	.row-4 .smartphone-container {margin: 10px 0 0 0;}
.dart-left {
	position: relative;
	margin: 0 0 60px 80px;
	color: #333!important;
	color: var(--text-color-light) !important;
	}
	.dart-right {
	position: relative;
	margin: 0 80px 60px 0;
	color: #333!important;
	color: var(--text-color-light) !important;
	}
	.dart-left:before,.dart-right:after {
		margin-top: 0px;
		display:inline-block;
	}

}
@media(min-width:1200px){
body.home .row-4 .smartphone-container {margin: 0 0 0 5vw;}
body.home .row-8 {margin: -100px 0 40px 0;}

.dart-left {font-size: 20px;margin-right: 0;margin-left: 10vmax;}
.dart-right{margin-bottom: 30px;font-size: 20px}

body.home .row-4 .text-right {text-align: left!important;}

	}
/* row-text */
 .row-text {/*! margin: 10px; */}
@media (min-width:768px) { .row-text {
        margin: 20px 15px;
    
    }}

/* row-5 */
body.home .row-5 {margin: 0 -15px;}
@media (min-width:768px) {body.home .row-5 {margin: 0px -15px 60px -15px;}}
@media (min-width:920px) {body.home .row-5 {margin: 60px -15px 60px -15px;}}
@media (min-width:1200px) {body.home .row-5 {margin: -20px -15px 100px -15px;}}

/* row-blog */
 .row-blog {
    margin: 20px 15px;

}

/* row-7 */
.icon-wasserinfo {width: 60px;height: 56px;padding: 10px;position:relative;margin: 20px auto 40px auto;/*! box-shadow: rgba(0,0,0,0.25) 0 1px 10px; */}
.icon-wasserinfo img {height: 100%; width:auto}
/* row-8 */
img.link-gemeindeseite {margin: 10px 10px -10px 10px; width: 15vw; min-width: 120px;max-width: 160px;height: auto}

@media(min-width:768px) {
	/* row nitrat */
.nitrat .mar-top {margin-top: -140px}
.nitrat .mar-bottom {padding-top: 120px}
	/* row haerte */
.haerte .mar-top {margin-top: -180px}
.haerte .mar-bottom {padding-top: 40px}

}

/* row-9 */
body.home .row-9 {margin: 20px -15px;}
@media (min-width:768px) { .row-9 {margin: 0}}
@media (min-width:1200px) { .row-9 {margin: 60px 0}}

/* .row-wib */
.row-wib img.blatt {mim-width: 140px !important;width:7vw !important; height: auto!important}
.row-wib img.wib {height: auto;width: 25vw;min-width: 180px;max-width: 300px;}
.row-wib {padding: 20px 0;}
@media(min-width:500px){
.row-wib {}	
}
@media(min-width:768px){
.row-wib {padding: 20px 0;}	
}
@media(min-width:1200px){
.row-wib {padding: 30px 0;}	
}

/* row-12 */
body.home .row-12 {margin: -40px 0;}	


/*  row-16 */
img.euro {width: 50%;max-width: 80px; height: auto;position:absolute;left:0;bottom:-200px}
img.pfeil-links {
	width: 100%;
	max-width: 30px!important;
	height: auto;
	position: absolute;
	right: 3%;
	top: 45%;
	display:none;
	}
/* row-badges */
 .row-badges {margin: 0 0 10px 0;}
 .row-badges img {margin: 20px 5px; height: 40px}

@media (min-width:768px) {
   .row-badges {margin: 0 0 20px 0}
   .row-badges img {margin: 10px 20px 10px auto; height: 50px}
}
@media (min-width:1200px) {
   .row-badges img {height: 60px}
}

@media (min-width:500px) {
	img.euro {width: 40%;max-width: 60px; height: auto;position:absolute;left:0;bottom:0}
	}
@media (min-width:768px) {
	img.pfeil-links{display:block;}
	img.euro {width: 80%;max-width: 200px; height: auto;position:relative;}
	}

/* Quellen */
.footnote {margin: 0 0 0 0px;}
.footnote ul,.footnote ol,ul.footnote {font-size: 90%;margin: 0; padding: 0;}
.footnote ul li, .footnote ol li, ul.footnote li {
    list-style-type: inherit;
    margin: 5px 0 0 1.2em;;
}
.footnote ul li.closed, ul.footnote li.closed, ol.footnote li.closed {cursor:pointer;height: 1.5em;overflow:visible; overflow-y: hidden}
@media(min-width:600px){.footnote ul li, ul.footnote li, ol.footnote li {margin: 5px 0}}
.footnote.more ul li.full {height: auto;margin-right: 15px;}
.footnote.more ul li::before {content:"...mehr"; display:block; float:right;color: #999;}
.footnote.more ul li.full::before {content:""}

.footnote ul a, ul.footnote a, ol.footnote a {color:inherit;font-style:italic;border-bottom: 1px dotted var(--text-color)}

/*### end startseite ################################################################################*/

/*### Adressabfrage #################################################################################*/

/*body.adress h1 {z-index: 1000;font-size: 1.3rem;margin: 12px 0 0 60px;position: absolute;top: 0;}
body.adress .nav ul li:not(.home) {display:none!important}
body.adress .nav ul li.home a {}
body.adress .nav ul li.home a:after {content:'(zur Wassertipps Webseite)'; display:inline-block; margin-left: 5px;font-size: 1rem; color: #666}
*/

body.adress .form-group {width: 100%; margin-bottom: 2rem;}
body.adress input.form-control {width: 100%;}
body.adress input.btn {width: 100%; margin-top: 20px}
@media(min-width:600px){
	body.adress input.form-control {width: calc(100% - 180px);margin-right: 10px;}
body.adress input.btn {width: 170px; margin:0}
}
body.adress .color {border-top: 5px solid var(--background-color)}
body.adress .color td {padding: 2px 10px 5px;margin-bottom: 10px;/* display:inline-block; */font-size: 0.9rem;}
body.adress .color td.wert {text-align:right}

body.adress .erklaerung p {margin: 0; font-size: 0.9rem; color: #666}
body.adress .erklaerung p:first-child {margin-top: 0.5rem;padding-top: 1.25rem;border-top: 1px solid #ccc;}
@media(min-width:768px){
	body.adress .erklaerung p:first-child {margin-top: 1rem;padding-top: 1.5rem;border-top: 1px solid #ccc;}
}

/*### apps ##########################################################################################*/
.row-text-pic {margin-top:30px}
@media(min-width:768px){
.container-lg-10 .row-text-pic:nth-child(2) img {margin-top: -40px}
.row-next {margin-top: -30px;}
}
  body.apps .row.intro .textblock {margin-left: -20px}

body.apps .row.intro h2.app-icon {font-size: 22px;color: #fff; text-transform: uppercase; padding-left: 30px;background-size: 22px;background-repeat:no-repeat; background-position: 0 2px}
body.apps .row.intro h2.app-icon.wassertipps {background-image:url(/images/icon-app-wassertipps.png)}
body.apps .row.intro h2.app-icon.baby {background-image:url(/images/icon-app-wassertipps_baby.png)}
@media(min-width:440px){
  body.apps .row.intro h2.app-icon {background-position: left center}
}
.tv-zeitbombe {width: 25%;height: auto;-webkit-transition: 0.5s ease-in-out;-moz-transition: 0.5s ease-in-out;-o-transition: 0.5s ease-in-out;transition: 0.5s ease-in-out;margin: -10px -40px -10px 40px;}
.tv-zeitbombe:hover {transform: scale(1.2)}

.container-zf {width:100%}
.container-zf .textblock {margin-left: -20px; bottom: 20px;}

@media(min-width:768px){
    .tv-zeitbombe {width: 100%;max-width: 300px;margin: -30vw 0px -10vw 40px;}
}

@media(min-width:992px){
.container-zf {width:83.333333%;margin: 0 auto;position: relative;}
 body.apps .row.intro .textblock {margin-left: 6.5vw}
body.apps .row.intro h2.app-icon {font-size: 2.5vw;color: #fff; text-transform: uppercase; padding-left: 4vw;background-size: 3vw;background-repeat:no-repeat; }
body.apps .row.intro h2.app-icon.wassertipps {background-image:url(/images/icon-app-wassertipps.png)}
body.apps .row.intro h2.app-icon.baby {background-image:url(/images/icon-app-wassertipps_baby.png)}
.tv-zeitbombe {width: 100%;margin: -15vw 0px 0 40px;}
}

@media(min-width:1200px){
  .container-zf .textblock {left: -40px}

body.apps .row.intro .textblock {margin-left: 7vw}
body.apps .row.intro h2.app-icon {font-size: 32px;color: #fff; text-transform: uppercase; padding-left: 50px;background-size: 36px;background-repeat:no-repeat; }
body.apps .row.intro h2.app-icon.wassertipps {background-image:url(/images/icon-app-wassertipps.png)}
body.apps .row.intro h2.app-icon.baby {background-image:url(/images/icon-app-wassertipps_baby.png)}
.tv-zeitbombe {right: 0;width: 20vw;bottom: 30px;max-width: 300px;}
}
@media(min-width:1600px){
	.tv-zeitbombe {right: 16vw; margin-right: 30px;}
body.apps .row.intro .textblock {margin-left: 7.5vw}
}

.row.icon-infobox {margin-bottom: 10px;}
.row.icon-infobox .icon-info {margin:5px 0 0}

/*### Härte ##########################################################################################*/

@media(min-width:440px){
body.haerte .row-3 {margin:10px 0;}
body.haerte .row-3a {margin-left: 0px; margin-bottom: 10px}
body.haerte .row-3a>div {padding-left: 0px}
body.haerte .row-3 h2 {font-size:45px; font-weight: 700; margin: 1vw 0 1.5vw;color: #fff;}
body.haerte .row-3a p { font-size: 120%}
}
@media(min-width:768px){
body.haerte .row-3 h2 {font-size:60px; font-weight: 700;}
}
@media(min-width:992px){
body.haerte .row-3 h2 {font-size: 75px; font-weight: 700;}
body.haerte .row-3a p { font-size: 110%}
body.haerte .text-cyan {width: 100%}
}
@media(min-width:1200px){
body.haerte .row-3 h2 {font-size: 75px; font-weight: 700;}
body.haerte .row-3a p {font-size: 110%}
body.haerte .text-cyan {width: 100%}
}


/*### b2b ############################################################################################*/

body.b2b .row.row-boxes {margin: 20px -15px}
body.b2b .row.row-boxes .box {border: 15px solid var(--background-color)}
body.b2b .row.row-pics {white-space: nowrap; margin: 40px -15px}
body.b2b .row.row-pics img {margin: 0;width:20.5%}
body.b2b .row.row-pics picture:nth-child(3) img {margin: 0;width: 14%}
@media(min-width:992px){
 body.b2b .row.row-pics img {margin: 0.2vw;width:calc(21% - 0.4vw)}
 body.b2b .row.row-pics picture:nth-child(3) img {margin: 0;width: 14%}
}
.referenzen {display:flex;align-items: center;justify-content:space-between; margin-bottom: 1rem}
.referenzen img {width: auto;max-width: 15%; }
.popup.hide {
	opacity: 0;
	transition: opacity 2s;
}
#map
{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    /* z-index: 1; */

}

.mapboxgl-ctrl-top-right .mapboxgl-ctrl {float: none; margin: 9px auto;}
.mapboxgl-ctrl-top-right {
    top: inherit;
    bottom: 50px;
    left: 0%;
    right: 0%;
    width: 100%;

}
@media(min-width:600px){
    .mapboxgl-ctrl-top-right {
        top: -8px;
        bottom: inherit;
        left: inherit;
        right: 0px;
        width: auto;
    
    }

}


body.map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,body.map) .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin-bottom: 70px!important;}

@media(min-width: 576px){
	body.map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,body.map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin-bottom: 50px!important;}
}
@media(min-width: 1024px){
	body.map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,body.map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin-bottom: 10px!important;}
}

input::placeholder {
  color: #fff;
}
.mapboxgl-popup { text-align: center; }

.mapboxgl-popup-content
{
	text-align: center;
	padding: 5px;
}

/* Farben */

.white {color:#fff}
.green {background:#6AB42D;color:#6AB42D}
.haerte1 {background:#6AB42D;color:#fff!important}
.yellow {background:#F7EA51;color:#F7EA51}
.haerte2 {background:#F7EA51;color:#000!important}
.red {background:#CC1417;color:#CC1417}
.haerte3 {background:#CC1417;color:#fff!important}
.cyan {background:#07A9CB;color:#07A9CB}
.row.cyan {background:#07A9CB;background:#07A9CB;color:#07A9CB}
.nitrat0 {background: #18d874;color:#fff!important}
.nitrat1 {background:#07A9CB;color:#fff!important}
.lila {background:#8770FF;color:#8770FF}
.nitrat2 {background:#886BE1;color:#fff!important}
.pink {background:#FF4BC4;color:#FF4BC4}
.nitrat3 {background: #e634d9;color:#fff!important;}
.nitrat4 {background: #ef0000;color:#fff!important;}
.blue {background:#4394D4;color: #4394D4;}
div.blue {background:#4394D4;color: #fff;}
h3.blue,h2.blue {color: #fff!important; line-height: 35px; padding: 5px 0}
h3.cyan,h2.cyan {color: #fff!important; line-height: 25px; padding: 10px 5px;}
.text-cyan {color:#07A9CB!important}
.text-blue {color:#4394D4!important}
.dot.nitrat-no { background: #b5b5b5; }
.dot.nitrat0 { background: #18d874; }
.dot.nitrat1 { background: #07A9CB; }
.dot.nitrat2 { background: #886BE1; }
.dot.nitrat3 {background: #e634d8;}
.dot.nitrat4 { background: #ef0000; }

.dot.gwnitrat1 { background: #65CB00; }
.dot.gwnitrat2 { background: #FFAE14;width: 11px; height:11px }
.dot.gwnitrat3 { background: #FF6E4C;width: 12px; height:12px }
.dot.gwnitrat4 { background: #FF0000;width: 13px; height:13px  }
.dot.gwnitrat5 { background: #E60000;width: 14px; height:14px  }
.dot.gwnitrat6 { background: #B30000;width: 15px; height:15px;margin-bottom: -1px   }
.dot.gwnitrat7 { background: #790000;width: 16px; height:16px;margin-bottom: -2px  }


.dot.haerte1,.dot.wasserhaerte0 { background: #6AB42D; }
.dot.haerte2,.dot.wasserhaerte1 { background: #F7EA51; }
.dot.haerte3,.dot.wasserhaerte2 { background: #CC1417; }

#logo {
    height: 15px;
    margin: -2px 5px 2px 0;

}



.container-fluid.nav
{
    background: rgba(255,255,255,0.85);
    background: var(--background-color-light);
    padding-left: 0;
    position: fixed;
    width: 100vw;
    height: 50px;
    z-index: 15;
    top: 0;
    border-bottom: 1px solid #ccc;
    display: block;

}
.container-fluid.nav.static {position:absolute}
.container-fluid.nav>nav
{
    background: rgba(255,255,255,0) url(/images/logo-wassertipps.png) no-repeat;
    background-size: 30px;
    background-position: 10px center;
    left: 5px;
    position: relative;
    font-variant: JIS90;
    max-width: 99vw;

}

/*### map #########################################*/
body.map.chlorid .nav,
body.map.chlorid h1.map-logo {display:none}
body.map.chlorid form#waterform {padding-top:0; margin-top:-30px}
body.map.chlorid .mapboxgl-ctrl-top-right {top:-65px}

body.map h1.map-logo {
    position: absolute;
    z-index: 100000;
    padding: 10px 10px 15px 15px;
    font-size: 24px;
}
body.map h1.map-logo .xsplus {display:none}
@media(min-width:380px){
    body.map h1.map-logo .xsplus {display:inline}
}
body.map .container-fluid.nav>nav
{
	background:none!important;
}
body .container-fluid.nav > nav,
footer .container {max-width:100% }
body:not(.map):not(.home):not(.apps) .main .container {max-width: 100%}

@media(min-width:1025px){
body .container-fluid.nav > nav,
footer .container {max-width:83vw }
body:not(.map):not(.home):not(.apps) .main .container {max-width: 83vw}
}
#menu
{
    margin-bottom: 20px;
    padding: 0;
    border: none;
    background: none;
    display: block;
    width: 90%;
    position: absolute;
    z-index: 1010;
    left: 28px;
    top: 52px;

}
#menu.open {
    left: 10px;
    top: 50px;
    width: 96%;
    /* display: none; */
    position: relative;

}
/* menubutton mit Infospalte */

#menu a
{
	font-size: 13px;
	display: block;
	margin: 10px 0;
	padding: 10px;
	text-decoration: none;
	color: #fff;
	
	text-align: center;
}
/* Nitrat */
#menu:not('.open') a {background: hsla(190, 93%, 41%, 0.5);}
#menu:not('.open') a:hover {background: hsla(93, 60%, 44%, 0.65);}
#menu.open a {background: #07A9CB;}
@media(min-width:512px){
#menu.open a:hover {background: #65c800;}
#menu a:hover::after {content:"umschalten zur Wasserhärte"; color: #fff;position: absolute;left: 0%; width: 100%; text-align:center; font-size: 90%; font-style: italic}
body.en #menu a:hover::after {content:"switch to water hardness";}

}
/* Wasserhärte */

#menu:not('.open') a.active {background: hsla(93, 60%, 44%, 0.65);}
#menu:not('.open') a.active:hover {background: hsla(190, 93%, 41%, 0.5);}
#menu.open a.active {background:#65c800;}
@media(min-width:512px){
#menu.open a.active:hover {background: #07A9CB!important;}
#menu a.active:hover::after {content:"umschalten zu Nitratwerten";} 
body.en #menu a:hover::after {content:"switch to nitrate levels";}

}
nav
{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 380px;
	right: 0;
	height: 50px;
	background: rgba(255,255,255,0.85) url(/images/logo-wassertipps.png) no-repeat;
	background-size: 30px;
	background-position: 35px center;
}

nav
{
	left: 0;
	padding-left: 40px;
}

nav > ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 49px;

}

nav.right>ul { float: right;position: relative;background: none; }

nav > ul > li
{
	display: block;
	float: left;
}

nav > ul > li a
{
    font-size: 15px;
    display: block;
    color: #444;
    color: var(--text-color);
    text-align: center;
    padding: 0 5px;
    line-height: 50px;
    text-decoration: none!important;

}
nav > ul > li a + ul
{
	display: block;
	position: relative;
	padding-left: 0;
}

@media(min-width:992px){
	nav > ul > li a
{
	font-size: 17px;
	display: block;
	color: #444;
	color: var(--text-color);
	text-align: center;
	padding: 0 10px;
	line-height: 50px;
	text-decoration: none!important;

}
}
nav > ul > li a:hover {
    color: #444;
    color: var(--text-color);
}

nav > ul > li a + ul li a
{
	line-height:1.5em!important;
	margin:10px 0
}
@media (min-width:769px){
nav > ul > li.lang a {
        margin-left: 10px;
        color: var(--text-color-medium);
    
    }
nav > ul > li.active > a {background: #ececec;color: var(--text-color-inverted);}
  nav > ul > li:hover > a{background: #efefef;color: var(--text-color-inverted);}
nav > ul > li a + ul
{
	position: absolute;
	margin: 0px 0 0 1px;
	padding: 0;
	border: 1px solid #fff;
	background: rgba(255,255,255,0.95);
	box-shadow: rgba(0,0,0,0.15)0px 2px 5px;
	}
nav > ul > li a + ul
{
	display: none;
}
nav > ul > li a + ul.subnav
{
	display: block;
	position: relative;
	box-shadow: none;
	margin: -15px 0 -10px 10px;
  background:none;

}
  nav > ul > li a + ul.subnav li
{
	white-space: nowrap
}

nav > ul > li:hover >  ul
{
	display: block;
	position: absolute;
	padding-left: 0;
}
}
nav > ul > li a + ul li
{
	margin-top: 1px;
	list-style-type: none;
	width:100%;
}
nav > ul > li.active a + ul li
{
	background-image: none;
}

nav > ul > li a + ul li a
{
	text-align: left;
	line-height: 30px;
	font-size: 13px;
  color: var(--text-color);
}

nav > ul > li a + ul li a .fa
{
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 0;
}

nav > ul > li a + ul li a:hover { background: none; }
@media (min-width:576px){
	nav ul#main li.kontakt,
	nav ul#main li.datenschutz {display:none}
	.main {margin-bottom: 70px;}
	footer {
		position:fixed;
		bottom:0;
		width: 100%
	}
	footer .text-right.footernav {text-align:right!important}
}
ul.footnote {font-size: 90%;margin: 20px 0 0 0; padding: 0;overflow: hidden;}
ul.footnote li {list-style-type:none;margin: 0 0 5px 0;white-space: nowrap;/* max-width: 100px; */}
ul.footnote a {color:inherit;font-family: inherit;margin: 0;display:inline;}


.animap {min-height:440px;}
@media (min-width:420px){.animap {min-height:580px;}}
@media (min-width:480px){.animap {min-height:620px;}}
@media (min-width:768px){.animap {min-height:420px;}}
@media (min-width:992px){.animap {min-height:420px;}}
@media (min-width:1200px){.animap {min-height:560px;}}

@media (max-width: 768px) {
	nav > ul >li {display: none}
	nav ul#main.show {display: block;float: none;width: 100%;margin: 50px 0 0 0;}
	nav ul#main.show  li {display: block;float: none;background: #fff;/* margin-right: -50px; */border-bottom: 1px solid #ccc;background: var(--background-color);}
	nav ul#main.show  li ul li {border-bottom: none;}
	nav ul#main.show  li ul li a {text-align: center;font-size: 15px;}
	nav div.hamburger {
    width: 30px;
    /* float:  right; */
    margin:  10px;
    /* position: absolute; */
    right: 5px;
    top: 5px;
}
	nav div.hamburger>span {display: block;background: #000;background:var(--text-color);width: 100%;height: 2px;margin: 5px 0;}
	nav>ul>li.more a {display:none!important}
}
nav div.hamburger.close {position:absolute;top:5px}
	nav div.hamburger.close>span {
		background: #000;
		width: 100%;
		height: 2px;
		margin: 5px 0;
		background: var(--text-color);
		}
	nav div.hamburger.close>span:nth-child(1) {
		transform:rotate(45deg);
		transform-origin: 35% 50%;
		}
	nav div.hamburger.close>span:nth-child(2) {
		display:none;
		}
	nav div.hamburger.close>span:nth-child(3) {
		transform:rotate(-45deg);
		transform-origin: 35% 50%;
		}

.main {
	margin-top: 70px;
	}
.main.show {opacity:0.15}

body.home .main,
body.apps .main{margin-top: 0;overflow: hidden;}
@media(min-width:768px){
   body.home .main,
body.apps .main{overflow: visible;}
}
nav.inverse > ul > li a
{
	display: block;
	color: #333;
	font-size: 1.5rem;
}
div.bg-visible {
    position:absolute;
    top:0;
    left: 0;
    width:100%;
    height: 50px;
    z-index: 15;
    background: var(--background-color-trans);
}
div.infopopup
{
    display: none;
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: 1000;
    position: absolute;
    padding: 35px 20px 20px 20px;
    background: rgba(255,255,255,0.9);
    top: 50px;
    left: 0px;

}
div.infopopup div.close {
    position:absolute;
    top: 2px;
    right: 36px;
    font-size: 1.2rem;
    transform:scale(1.3,1);
    color: #666;
    cursor:pointer;
}

@media(min-width:1024px) {
    div.infopopup
{
    z-index: 100;
    width: 70%;
    max-width:900px;
    top: 148px;
    left: 23px;
    padding: 35px 10px 0 10px;
}
div.infopopup div.close {
    right: 20px;
    top: 5px;
}

}
div.infopopup.open {display:block;}

div.infospalte.open
{
	height: 100%;
	overflow: visible;
	z-index: 15;
}
@media (min-width: 500px){
 div.infospalte.open
    {height: auto;}
}
div.open-button
{
    cursor: pointer;
    position: absolute;
    left: 0px;
    top: 62px;
    z-index: 1;
    border: 1px solid #999;
    width: 20px;
    height: 40px;
    padding: 4px 5px;
    background: rgba(255,255,255,0.95);

}
div.close-button
{
    cursor: pointer;
    position: absolute;
    top: 61px;
    left: 360px;
    z-index: 10;
    display: none!important;
    border: 1px solid #aaa;
    width: 20px;
    height: 40px;
    padding: 4px 14px 4px 0;
    background: rgba(255,255,255,0.85);

}
div.close-button.wide{left: 400px;}
@media(min-width:1024px){div.close-button.wide{left: 480px;}}
@media(min-width:500px){
div.open-button
	{left: -5px;}
div.close-button {display:block!important}
body.regions div.open-button
	{left: 0px;}
body.regions div.close-button
	{left: 260px;}
body.regions.intern div.close-button
	{
		height: 30px;
		top: 0px;
		width: 5px;
		}
body.regions.intern .mapboxgl-ctrl-top-right {
    top: 0;
    right: 0;
}		
body.regions.intern .mapboxgl-ctrl-top-right .mapboxgl-ctrl {top:0}
}

.caret
{
	position: absolute;
	color: #666;
	display: inline-block;
	width: 0;
	height: 0;
	margin-top: 6px;
	right: -6px;
	vertical-align: middle;
}

.caret.left
{
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid transparent;
	border-right: 8px dashed;
	border-right: 8px solid\9;
	right: 6px;
}

.caret.right
{
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid transparent;
	border-left: 8px dashed;
	border-left: 8px solid\9;
}

div.tooltip
{
	position: absolute;
	top: 0;
	line-height: 20px;
	margin: 0 0 0 28px;
	background: #333;
	padding: 4px 8px;
	white-space: nowrap;
	color: #fff;
	font-weight: 200;
	font-size: 11px;
}

div.open-button:not(:hover) div.tooltip:not(:hover), div.close-button:not(:hover) div.tooltip:not(:hover) { opacity: 1; }

div.tooltip
{
	transition: .5s cubic-bezier(0, 0, 0.5, 1) transform;
	transform-origin: 0 1em;
	opacity: 0;
	display: none;
}

div.linke-spalte
{
    background: rgba(255,255,255,0.9);
    background: var(--background-color-trans2);
    position: static;
    z-index: 1;
    top: 0px;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    max-height: calc(100% - 58px);
    overflow-x: visible;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    padding: 110px 10px 10px 10px;
    color: #000;
    color: var(--text-color);
    line-height: 1.5em;
}
div.linke-spalte p {
    font-size:90%;
    margin: 0 0 5px 0;
    line-height: 140%
}
div.linke-spalte select {
    font-size: 90%;
    padding: 0;
    line-height: 100%
}
div.linke-spalte .view-switch{margin: 0 0 5px 0}
body.map div.session {position:absolute;top: 50px; width: 280px;right: 0;background: rgba(255,255,255,0.75);border: 1px solid #ccc;padding: 10px;z-index: 1;border-radius: 5px;box-shadow: rgba(0,0,0,0.15) 0 2px 5px;margin: 10px;}
body.map div.session.chart {margin-top: 100px;}
body.map .session input {display:block;width:97%;margin: 10px 0 5px 0;}
.mobile-close
{
    position: absolute;
    top: 13px;
    right: 10px;
    width: 100px;
    display: block;
    z-index: 15;
}

@media(min-width: 500px){
    div.linke-spalte{width: 360px;}
    div.linke-spalte.wide{width: 400px;}
    body.map.grundwasser div.linke-spalte h1 {margin-bottom: 20px}
	.mobile-close {display:none!important}
}
@media(min-width:1024px){
    div.linke-spalte.wide{width: 480px;}

}
.mobile-close .square
{
	position: relative;
	float: right;
	width: 28px;
	height: 28px;
	padding: 2px 3px;
	border: 1px solid #999;
	background: #333;
}
.mobile-close .hide-nav
{
	width: 80%;
	position: absolute;
	height: 2px;
	background: #ccc;
	margin: 10px 5px 0 0;
}
.mobile-close .hide-nav.first
{
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.mobile-close .hide-nav.second
{
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
div.square::before
{
	position:absolute;
	right: 40px;
	line-height: 24px;
	white-space: nowrap;
	content: "zur Karte";
	color:#777;
}

.umschalter {width: 100%;position:relative}
.umschalter span.dot {margin-right: 10px}
.umschalter input {width: auto; margin:4px 0 -4px;float:right}
.umschalter input:after {
	content:'ein/ausblenden:';
	position:absolute;
	right:20px;
	font-size:12px
	}
/*### Tortengrafik ###*/

/* Korrektur Spaltenverhalten xs */

.pie-chart .col-xs-4 {float: left;width: 33.3%;}
@media (min-width:500px) {.pie-chart .col-xs-4 {float:left; width: 33.333%}}

.pie-chart
{
	text-align: center;
	margin-bottom: 10px;
}
.pie-chart:last-of-type {margin-bottom: 40px}

.pie-chart .col-4 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width:25%
}

.pie-chart .col-4.us
{
    display: none;
}

.pie-chart h5
{
	margin: 20px 0 10px;
	font-weight: bold;
	font-size: 12px;
	max-width: 100%;
	overflow: hidden;
	height: 20px;
}

.piearound
{
	position: relative;
	width: 20vw;
	height: 20vw;
	margin: 0 auto;
}
.pie
{
	width: 100%;
	height: 100%;
	display: inline-block;
	transform: rotate(-90deg);
}

.piehole
{
	position: absolute;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 60%;
	background: #fff;
	border-radius: 50%;
	line-height: 12.5vw;
	font-size: 4vw;
	text-align: center;
	color: #666;
}
.piehole span
{
	opacity: 0;
	animation: visibility 1s 1 linear;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}

.pie svg { border-radius: 50%; }

circle
{
	fill: #D9D9D9;
	stroke: #4394D4;
	stroke-width: 18;
	animation: grow 2s 1 linear reverse;
}


@media (min-width: 600px) {
.pie-chart h5
{
	margin: 20px 0;
	font-weight: bold;
	position:relative;
	/*! height: 25px; */
}

.piearound
{
	position: relative;
	width: 18vw;
	height: 18vw;
	margin: 0 auto;
}
    .piehole
{
	font-size: 3vw;
	top: 22%;
	left: 22%;
	width: 56%;
	height: 56%;
	line-height: 10vw;
  }

}
@media (min-width: 992px) {
.pie-chart h5
{
	white-space: nowrap;
	position:static;
	height: auto;
}

.piearound
{
	position: relative;
	width: 140px;
	height: 140px;
	margin: 0 auto;
}
.piehole {line-height:80px;font-size: 1.5rem;}
}
.bar-chart p {margin: 0 0 4px 0}
.barchart.land {overflow:visible;height:30px;background: #d9d9d9;}
.barchart.land p {margin:0}
.bar.land {background: #4394d4;display: block;height: 100%;color: #fff;font-size: 12px;line-height:30px;}
.bar-chart.light .barchart.land {height:5px;}
.bar-chart.light p {margin:0;padding:0; font-size: 90%; font-weight: 400}

@keyframes grow { to { stroke-dasharray: 1 100 } }
@keyframes visibility { to { opacity: 1 } }

/** * animated barchart */
.bar-chart h5
{
	white-space: nowrap;
	margin: 20px 0;
	/* font-weight: bold; */
}
.barchart
{
	width: 0;
	height: 30px;
	/* background: #ef0000; */
	overflow: hidden;
	white-space: nowrap;
	animation: start 1s 1 linear;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	border-radius: 0;
	margin-bottom: 10px;
}
    
.bar-chart .wert {width:100%}
.barchart.direkt {animation-delay: 0s;}
    
.barchart.single {margin-bottom: 20px;}
.charts .barchart {margin-bottom: 5px;}
.charts .barchart:last-of-type {margin-bottom:10px}
.barchart.no-delay
{
	animation: start 0.5s 1 linear;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

.bar, .bar2
{
	display: inline-block;
	float: left;
	line-height: 30px;
	font-size: 13px;
}
.history .barchart {height:24px;margin-bottom: 1px;}
.history .barchart {border-radius: 0;}
.history .barchart:first-of-type {border-radius: 3px 3px 0 0;}
.history .barchart:last-of-type {border-radius: 0 0 3px 3px;}

.history .bar,
.history .bar2
{
	display: inline-block;
	float: left;
	line-height: 24px;
	height: 30px;
}

.history .bar.haerte1 span,
.history .bar.nitrat1 span
{
	margin-left: 10px;
}

.bar span
{
	margin-left: 10px;
}
.bar span.land
{
	position:absolute;
  left: -15px;
}
.bar.haerte1 span,
.bar.nitrat1 span
{
  margin-left: 40px;
  text-shadow:rgb(0,0,0) 2px 1px;
}

.bar.haerte2
{
  text-align:center;
  text-shadow:#fff -1px -2px;
}
.bar.haerte2 span
{
  display:inline-block;
  margin-top: 1px
}
.bar.nitrat2
{
  text-align:center;
  text-shadow:#000 2px 1px;
}
.bar.haerte3,
.bar.nitrat3
{
	text-align:right
}

.bar.haerte3 span,
.bar.nitrat3 span
{
	margin-right: 2px;
  /*! float:right; */
  text-shadow:rgb(0,0,0) 2px 1px;
}
.bar.haerte3 span
{
  float:right;
}
div.land
{
	font-weight: bold;
	float: left;
	line-height: 30px;
}


body.regions .images,
body.blog .images {overflow:hidden; margin: 30px 0 30px 0}
body.regions .images a,
body.blog .images a {width: 33%}
body.regions .images a img,
body.blog .images a img {width: 100%; height: auto;}

body.regions .bar {
box-shadow: 0 0 0 1px #fff;
}
.barchart2 {margin-bottom: 10px;height: 30px;margin-left: 30px;overflow: visible;width: calc(100% - 30px);}
.caption {margin: 10px 0 10px 0px;overflow: hidden;width: 100%;}
.caption2 {margin:10px 0 30px 0px;overflow: hidden;width:100%;}
.subtitle {font-size: 85%; margin-bottom: 15px}
.caption.value5 {margin: 0 0 10px 30px;width: calc(100% - 40px);}
.caption span.value {display:block;float:left;width: 100%;text-align:left}
body.regions .caption span.value:nth-child(5) {text-align:left;}
body.regions .caption3 {margin:0 0 10px 0}
body.regions .caption3 span.value {float:left;width: 60px;text-align:left}

@media(min-width: 768px){
.caption span:nth-child(1) {text-align:left;width: 35%;display:inline-block}
.caption span:nth-child(2) {width: 33%;display:inline-block;text-align:center}
.caption span:nth-child(3) {text-align:right;width: 30%;display:inline-block}
body.regions .caption span:nth-child(1) {width: 15%;}
body.regions .caption span:nth-child(2) {width: 21%;text-align:left}
body.regions .caption span:nth-child(3) {width: 21%;text-align:left}
body.regions .caption span:nth-child(4) {width: 21%;text-align:center}}
body.regions .caption span.value:nth-child(5) {text-align:right;width: 20.5%;}

.caption.value5 span {text-align:left;width: 20%;display:inline-block}
}
.bar2 {box-shadow:0 0 0 1px #fff;}
.bar2 span {font-size: 85%; margin: 0 0 0 20%;visibility:hidden}
.bar2 span.land {margin-left: -40px; color: #000; font-weight: 700; font-size: 100%}

.barchart2 .nitrat1:nth-child(1) {background: #18d874;color:#fff!important}
.barchart2 .nitrat1:nth-child(2) {background: #07A9CB;color:#fff!important}

.bar span.year,.bar2 span.year
{
	margin-left: 10px;
	float: left;
}

/* Daten Tabelle */
table.daten, body.regions .figure,body.regions .images {margin: 0px 0 10px 0;overflow:hidden}
table.daten {width: 100%; border: 1px solid #777;caption-side: bottom}
table.daten tr th {color: #fff;background: #4695D2;padding: 3px 0;text-align: center;border-left: 1px solid #777;border-bottom: 1px solid #777;width: 20%;}
table.daten tr td {padding: 3px 10px;text-align: right; border-left: 1px solid #777;}
table.daten tr td.text-center {text-align: center;}
table.daten tr th:first-child,
table.daten tr td:first-child {font-weight: bold;width: 0;}
table.daten tr:nth-child(even) td {background: #eee;background: var(--background-color-even)}

@media (orientation:portrait){
body.regions.study .main{overflow:hidden}
table.daten.wide {/*! display:block; */width:100%!important;overflow:hidden;position:relative;}
}
@media (orientation:portrait) and (max-width:500px){
table.daten.wide:after {
  content:'Bitte drehen Sie das Smartphone für eine komplette Ansicht der Tabelle';
  position: absolute;
  top: 50%;
  width: 90%;
  left: 5%;
  background: var(--background-color);
  color:var(--text-color);
  border: 1px solid #666;
  padding: 5px;
  box-shadow: rgba(0,0,0,0.25)0 0 5px;
  }
}
.barchart.big {height: 40px;}
.barchart.big .bar {line-height: 40px}

@keyframes start {from {width: 0;} to{width:100%;}}

.caption {margin-bottom: 10px;}
.caption>span {white-space:nowrap;display:block;}


span.dot
{
	background: #fff;
	width: 10px!important;
	height: 10px;
	display: inline-block;
	margin-right: 4px;
}
body:not(.regions) .linke-spalte span.dot {border-radius: 50%}
.teaser {
	background: #f3f3f5;
	background:var(--background-color-even);
	color: #666;
	color: var(--text-color);
	padding: 5px 15px;
	font-weight: bold;
	line-height: 2em;
	margin: 20px 0;
	border: 2px solid #07a8cb;
	border-radius: 3px;
	animation: teaser 1s 1 cubic-bezier(0.5, 0, 1, 1);
	}
.teaser p {margin: 10px 0}

@keyframes teaser {from {opacity: 0;} to{opacity:1;}}

ul.nolist {margin: 20px 0 40px 10px; padding: 0;}
ul.nolist.nomargin {margin: 20px 0 40px 0; padding: 0;}
ul.nolist li {margin: 20px 0; list-style-type: none}
ul.nolist li h4 {margin-left: -10px;}

/* Suchfeld */
div.search {margin: 0 0 20px 0}
span.searchterm.wrapper {display:flex}
span.searchterm.wrapper:first-child{display:none; visibility:hidden}
#searchterm.daten {
    width: calc(84vw - 40px);
    min-width: calc(100% - 40px);
    display: inline-block;
    vertical-align: middle;
    margin-right: 1vw;

}
.ui-helper-hidden-accessible {display:none}
.ui-autocomplete-loading {
background: white url('/images/admin/ui-anim_basic_16x16.gif') right center no-repeat;
}

.ui-autocomplete {
background:#fff;
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
font-size: 10px!important;
box-shadow: rgba(0,0,0,0.5) 3px 3px 15px;
-moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 15px;
-webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 15px;
padding: 0px; 
width: calc(100% - 40px)!important; 
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 300px;
}
body .ui-autocomplete {
  max-height: 300px;
  font-size: 14px!important;
  z-index: 1000;
}

.ui-autocomplete li {list-style-type:none; margin: 0; padding: 2px 5px;color:var(--text-color)}
.ui-autocomplete li:nth-child(odd) {background: #eee;background:var(--background-color);color:var(--text-color)}
.ui-autocomplete li:nth-child(even) {color:var(--text-color);background: var(--background-color-even);}
.ui-autocomplete li div {width: 20px; height: 12px;float:left;margin: 4px 5px 4px 0; border:1px solid #999}
.ui-autocomplete li .nitrat0 { background: #18d874; }
.ui-autocomplete li .nitrat1 { background: #07A9CB; }
.ui-autocomplete li .nitrat2 { background: #6F6AAE; }
.ui-autocomplete li .nitrat3 { background: #D55D9E; }
.ui-autocomplete li .nitrat4 { background: #fb0088; }
.ui-autocomplete li .haerte1 { background: #6AB42D; }
.ui-autocomplete li .haerte2 { background: #F7EA51; }
.ui-autocomplete li .haerte3 { background: #CC1417; }
.ui-autocomplete li div:hover:after {
content:"";
display:block;
position:absolute;
margin-left: 25px;
margin-top: -5px;
padding: 0 3px;
color: #333;
background: #fff;
box-shadow:rgba(0,0,0,0.3) 0px 0px 5px;
 }
.ui-autocomplete li .nitrat1:hover:after {
content:"Nitrat: 0-10 mg/l";
 }
.ui-autocomplete li .nitrat2:hover:after {
content:"Nitrat: 10-25 mg/l";
 }
.ui-autocomplete li .nitrat3:hover:after {
content:"Nitrat: 25-50 mg/l";
 }
.ui-autocomplete li .nitrat4:hover:after {
content:"Nitrat: über 50 mg/l";
 }
.ui-autocomplete li .haerte1:hover:after {
content:"Weiches Wasser";
 }
.ui-autocomplete li .haerte2:hover:after {
content:"Mittelhartes Wasser";
 }
.ui-autocomplete li .haerte3:hover:after {
content:"Hartes Wasser";
 }
/*### WIB ###############################################*/
img.wib-logo {width:100%; margin: 0 0 20px 0}
@media(min-width:600px){
  img.wib-logo {width:220px; margin: 0 30px 20px 0}
}
/*### Blog ##############################################*/

body.blog .date {font-size: 0.9rem;font-family: 'open_sansregular';}
body.blog article>h3 {margin: 30px 0 20px 0;font-size:1.4rem}
body.blog article .text {margin-top: 20px;}

ul.blog-uebersicht {list-style-type:none; padding: 0;}
ul.blog-uebersicht li {font-family: 'open_sansbold';font-size: 1rem;list-style-type:none;padding: 10px 50px 10px 10px;line-height: 20px;position:relative;}
ul.blog-uebersicht a {position:relative; z-index: 1000; text-decoration: none;}
ul.blog-uebersicht a:hover li {background: #07a8cb!important; color: #fff}

ul.blog-uebersicht li.pin:before {
	content:'\f004';
	color:  #fff;
	position:absolute;
	top: 4px;
	left: 8px;
	z-index:1;
	font-family: 'Font Awesome 5 Free';
	font-size: 12px;
}
@media(min-width:600px){
ul.blog-uebersicht li.pin:before {
	top: 2px;
	font-size: 11px;
}
}
@media(min-width:768px){
ul.blog-uebersicht li.pin:before {
	font-size: 12px;
}
}
@media(min-width:1200px){
	ul.blog-uebersicht li.pin:before {
	top: 4px;
	left: 8px;
	font-size: inherit;
}
body.blog ul.blog-uebersicht li.pin:before {
	top: 4px;
	left: 8px;
	font-size: 14px;
}
}
/* Rasterdarstellung */

ul.blog-uebersicht {display:grid;grid-template-columns: 1fr;grid-gap: 12px;border: none;}
ul.blog-uebersicht li {height:200px;border:1px solid #999;color: #fff;color: var(--link-color);position:relative;overflow:hidden;padding: 12px 15px 15px;background: #fff;background: var(--background-color);}
ul.blog-uebersicht li *  {color: #666;color:var(--text-color);z-index:0!important;}
ul.blog-uebersicht .more {position:absolute; bottom:0; right:0;background: inherit; width: 100%;text-align:right;padding: 7px 20px; font-family:'open_sansregular';font-size: 0.9rem}
ul.blog-uebersicht .more a {display: inline-block;width: 18px;padding-left:  3px;height: 36px;bottom: 14px;position: relative;line-height: 36px;text-align: center;background:#adb5bd}
ul.blog-uebersicht .more a i{color: #fff!important}

ul.blog-uebersicht li.cat1 .datebox {background:#E462A9;}
ul.blog-uebersicht li.cat2 .datebox{background:#65A4D3}
ul.blog-uebersicht li.cat3 .datebox{background:#64B8CC}
ul.blog-uebersicht li.cat4 .datebox{background:#80B555}
ul.blog-uebersicht li.cat5 .datebox{background:#adb5bd}
ul.blog-uebersicht li .headline {font-family: 'open_sansbold';line-height: 20px!important;font-size: 15px!important;}
ul.blog-uebersicht li .text {margin-top: 10px}
ul.blog-uebersicht li .text * {font-family: 'open_sansregular';line-height: 20px;font-size:14px!important;}
ul.blog-uebersicht li .text sup {font-size:10px!important;}
ul.blog-uebersicht li .text .date {float: left;margin-top: 0!important;margin-right:5px;font-style: italic;font-size: 13px!important;}


ul.blog-uebersicht li h3,
ul.blog-uebersicht li h4,
ul.blog-uebersicht li .footnote{display:none;}
ul.blog-uebersicht li .text img {width:33%;margin: 5px 10px 0 0;float: left;}
ul.blog-uebersicht li .text img.img-fluid {width:100%;margin: -5px 10px 10px 0;}

ul.blog-uebersicht .datebox { width: 60px; height:55px;padding: 10px;margin: -15px 15px 10px -15px;font-size: 22px;background:#f6b903;color: #fff!important;display:flex;justify-content:center;align-items:flex-end;text-transform:uppercase;float:left;}
ul.blog-uebersicht .more {position:absolute; bottom:0; right:0;background: inherit; width: 100%;height:22px;text-align:right;padding: 0;}
ul.blog-uebersicht .more img {display:block; height:35px;float:right;margin-top:-12px}

/* Startseite */
body.home ul.blog-uebersicht {margin-top: 30px;}
body.home ul.blog-uebersicht li {width: 100%; height:200px; border:1px solid #999; color: #fff;position:relative;overflow:hidden;padding: 12px 15px 15px;}
body.home ul.blog-uebersicht li *  {color: var(--text-color);z-index:0!important;}

@media(min-width:600px){
	ul.blog-uebersicht {grid-template-columns: 1fr 1fr;}
	ul.blog-uebersicht li {height:240px;}
	ul.blog-uebersicht li .text {margin-top: 15px}
	ul.blog-uebersicht li .headline {line-height: 18px!important;font-size: 15px!important;}
	ul.blog-uebersicht li .text * {line-height: 18px;font-size:14px!important;}
	ul.blog-uebersicht li .text sup {font-size:8px!important;}
	ul.blog-uebersicht li .text .date {font-size: 13px!important;}
	ul.blog-uebersicht .datebox { width: 50px; height:50px;padding: 10px;margin: -15px 10px 10px -15px;font-size: 18px;}
	body.home ul.blog-uebersicht li {height:300px;}
	body.home ul.blog-uebersicht .more a {height: 32px;width: 16px;bottom: 10px;line-height: 32px;}
}
@media(min-width:768px){
	ul.blog-uebersicht {grid-template-columns: 1fr 1fr 1fr;}
	body.home ul.blog-uebersicht {grid-template-columns: 1fr 1fr;}
	ul.blog-uebersicht li {height:220px;}
	ul.blog-uebersicht li .text {margin-top: 15px}
	ul.blog-uebersicht li .headline {line-height: 18px!important;font-size: 15px!important;}
	ul.blog-uebersicht li .text * {line-height: 19px;font-size:14px!important;}
	ul.blog-uebersicht li .text sup {font-size:8px!important;}
	ul.blog-uebersicht li .text .date {font-size: 13px!important;}
	ul.blog-uebersicht .datebox { width: 55px; height:53px;padding: 10px;margin: -15px 10px 10px -15px;font-size: 19px;}
	body.home ul.blog-uebersicht li {height:380px;}
	body.home ul.blog-uebersicht .more {height:30px;}
	body.home ul.blog-uebersicht .more a {height: 40px;width: 20px;bottom: 10px;line-height: 40px;font-size: 20px;}
}

@media(min-width:992px){
	ul.blog-uebersicht {display: grid;}
	ul.blog-uebersicht li {height:280px;padding: 15px 20px 20px;}
	ul.blog-uebersicht li .text {margin-top: 20px}
	ul.blog-uebersicht li .headline {line-height: 22px!important;font-size: 15px!important;}
	ul.blog-uebersicht li .text * {line-height: 22px;font-size:15px!important;}
	ul.blog-uebersicht li .text sup {font-size:10px!important;}
	ul.blog-uebersicht li .text .date {font-size: 14px!important;}
	ul.blog-uebersicht .datebox {width: 60px;height:55px;padding: 10px;margin: -15px 15px 0px -20px;font-size: 21px;}
	body.home ul.blog-uebersicht li {height:420px;padding: 20px 30px 30px;}
	body.home ul.blog-uebersicht .datebox {width: 60px;height:55px;padding: 10px;margin: -20px 15px 0px -30px;font-size: 21px;}
	body.home ul.blog-uebersicht .more a {height: 40px;width: 24px;bottom: 10px;line-height: 40px;font-size: 22px;}
}
@media(min-width:1200px){
	ul.blog-uebersicht {grid-template-columns: 1fr 1fr 1fr 1fr;}
}

.blog-eintrag .header {padding: 10px; color:#fff; line-height: 1.5rem;}
.blog-eintrag .header a {padding: 6px 8px 9px 8px; color:#fff!important; font-size: 1.2rem; margin-left: -7px;text-decoration: none}
.blog-eintrag .header a:hover {background:rgba(0,0,0,0.25)}
.blog-eintrag .header.cat1 {background:#E462A9}
.blog-eintrag .header.cat2 {background:#65A4D3}
.blog-eintrag .header.cat3 {background:#64B8CC}
.blog-eintrag .header.cat4 {background:#80B555}
.blog-eintrag .header .tags{font-family:'open_sansbold';margin-left: 5px;text-transform: lowercase;}
.blog-eintrag .header .page-nav a{white-space:nowrap; font-size: 1rem;}
.blog-eintrag .header .page-nav a i {font-size: 1.3rem;vertical-align:middle; margin-right: 5px}
.blog-eintrag .header .page-nav a:before {content:'';}

.blog-eintrag ul {padding: 0; list-style-type: none;list-style-position: inside;}
.blog-eintrag ol {padding: 0;list-style-position: inside;}
.blog-eintrag ol.footnote {margin-left: 0}
.blog-eintrag ol.footnote li {font-size: 80%;line-height: 1.2em; margin-left: 0}

.blog-eintrag a {color: #0B81D0!important;color: var(--inverse-link-color)!important;}
.blog-eintrag p a:not(.int-link):before {content:'\f360\2000';font-family: 'Font Awesome 5 Free'; font-style:normal!important}

.blog-eintrag .kommentare {margin: 20px 0 0 0;padding-top: 20px;border-top: 1px solid #ccc;clear: left;}
.blog-eintrag .kommentare h3 {font-size: 100%;color: #777;color: var(--text-color);margin: 0 0 1em 0;}
.blog-eintrag .kommentare p {font-size: 90%;color: #777;color: var(--text-color);margin: 0 0 0.5em 0;}
.blog-eintrag .kommentare .kommentar {margin: 0 0 2em 0}
.blog-eintrag .kommentare form {margin-top: 20px}
.blog-eintrag .kommentare .form-group {margin: 10px 0;}
.blog-eintrag .kommentare .form-group label {width: 100%}
.blog-eintrag .kommentare .form-group input.form-control {font-size: 14px}
.blog-eintrag .kommentare .form-group textarea.form-control {height: 120px!important; font-size: 14px}
.blog-eintrag .kommentare .form-group.form-horizontal {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: 0;
	padding-left: 0;
	margin-right: -15px;
}
.blog-eintrag .kommentare .form-group.form-horizontal label {padding:0; margin: 0;}
.blog-eintrag .kommentare input.submit {margin-top: 10px; background-color:#0c80d0}

.blog-eintrag .kommentare .success,
.blog-eintrag .kommentare .error {margin-top: 10px; border:1px solid #0c80d0; padding:10px 10px 5px 10px; font-weight: bold}
.blog-eintrag .kommentare .error {border-color: #E462A9; color: #000!important;}

@media(max-width:599px){
.blog-eintrag .header .text-right{text-align:left!important;}
.blog-eintrag .header .text-right .tags{display:block;}
}
@media all and (min-width:500px) {
#searchterm.daten {
        margin-right: 10px;
        width: 30.2vw;
        min-width: 430px;
        max-width: 500px;
        display: inline-block;
        vertical-align: middle;
        color: var(--text-color);
        background: var(--background-color);
    
    }
.ui-autocomplete { padding: 0px; width:30vw!important; min-width: 430px!important;max-width: 500px;}
	body.regions div.linke-spalte h1 {margin-bottom: 30px;}
    #menu {
        width: 300px;
        left: 25px;
        top: 52px;
    
    }
    #menu.open {width: 340px;display: block;}
    #menu.wide.open {width: 380px;display: block;}

}
@media(min-width:1024px){#menu.wide.open {width: 460px;}}
@media print {
	 header {
	background-image: url(/images/bg-header.png)!important;
	background-size:100%;
}
	.container-fluid.nav>nav {
    	background: rgba(255,255,255,1) url(/images/logo-wassertipps.png) no-repeat!important;
    	background-size: 50px!important;
    	background-position: 18px!important;
    	width: 100%;
 }
	.container-fluid.nav>nav:after {
		content:"Wassertipps - www.wassertipps.de";
		margin: 10px 90px;
		font-size: 18px;
		color: #777!important;
		}
	.nav ul#main {display:none}
	.btn.testdrive, div.zitat {display:none}
}