@charset "UTF-8";
:root {
    --background-color: #fff;
    --background-color-light:#EAEEF0;
    --background-color-trans: 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-heading: #595959;
    --inverse-text-color: hsl(0, 0%, 100%);
    --inverse-link-color: #0085C3;
    --box-shadow:rgba(0,0,0,0.25) 0px 2px 10px;
    --light-shadow:rgba(0,0,0,0.15) 0 2px 5px;
    --blue:#0085C3;
    --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-trans: 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-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:rgba(0,0,0,0.35) 0px 5px 10px;
    --light-shadow:rgba(255,255,255,0.5) 0 2px 15px;
    --blue:#0085C3;
    --light-blue:#41BCF1;
    --dark-grey:#595959;
    --light-grey:#EAEEF0;
    }
}

/* SPAM Schutz*/

.lnkMail {
    unicode-bidi: bidi-override;
    direction: rtl;
}
input[name='ort']{opacity: 0; display:none; position:absolute;top: -100000;}

/* Bootstrap popover */
.popover {background:var(--blue); box-shadow: var(--box-shadow)}
.popover .arrow::after {border-top-color:var(--blue)!important}

.clearfix:before {
    display: table;
	content: " ";
}
.popover-header,.popover-body {color: #fff}
.popover img.at-sign {
    height: 0.85em;
    width: 1em;
    vertical-align: text-bottom;
    margin: 0 0 0.15em 0;
    padding: 0 2px;
    fill: var(--blue);
    color: inherit;
}

.clearfix:after {
    display: table;
	content: " ";
    clear:both;
}
body
{
margin: 0;
padding: 0;
font-family: 'open_sansregular', sans-serif;
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);
}
#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
}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
position: absolute!important;
width: 1px!important;
height: 1px!important;
padding: 0!important;
margin: -1px!important;
overflow: hidden!important;
clip: rect(0,0,0,0)!important;
white-space: nowrap!important;
border: 0!important;
}

p {
     -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}
h1,h2,h3,h4,h5,h6 {
	-moz-hyphens: none;
    -o-hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  font-weight:600;
  	margin: 0.5rem 0 1rem 0;

	color: var(--text-color-heading);
}
h1
{
	font-weight: 600;
	margin: 1rem 0;
}
h1,.h1 {font-size: 1.8rem;}
h2,.h2 {font-size: 1.5rem;}
h3,.h3 {font-size: 1.25rem;}
h4,.h4 {font-size: 1.15rem;}
h5,.h5 {font-size: 1.05rem;}
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {margin-top: 1.5em}
table + p {margin-top: 1.5em}
p.announce {padding: 10px;font-weight:600;}
table th,
table td {padding: 0.25em 0.5em 0 0}
a, a:hover {color: inherit;text-decoration:none}
.main a {
    text-decoration: none;
    cursor: pointer;
    font-family: 'open_sanssemibold';
    color: var(--inverse-link-color);
}
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 {border:none!important}

.small, small, figcaption {font-size: 90%}
.small, small, figcaption {font-size: 90%;}
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: var(--box-shadow)}
.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_0 {margin-top: 0px!important}
.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_0 {margin-bottom: 0px!important}
.marbottom_5 {margin-bottom: 5px!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}

sup {cursor:pointer; margin-left: 0.15rem}
.main {flex:1;}
.main ul {margin: 0; padding: 0;}
.main ul li {margin: 0 0 5px 0; padding: 0;list-style-type:none;}
.main ul.dots li {
  margin: 0 0 10px 0;
}
.main ul.dots li:before {
  content:"";
  display:block;
  float:left;
  width:0.75rem;
  height:0.75rem;
  margin: 6px 10px 0 0;
  background: var(--blue)
}

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


 footer,.footer {background:#dedede;background:var(--background-color-light);margin-top: 20px;z-index: 1;font-size:11px!important;}
.footer a {color:var(--text-color); font-family: 'open_sansregular';font-size:11px!important;}
 .footer .text-right.footernav {
    text-align: left!important;
    font-size: 11px!important;
     margin: 10px 0
}
 .footer .text-right.footernav a {margin: 15px 0 5px 10px;font-size:11px!important;}
 .footer .text-center.footernav {
    text-align: right!important;
}
 .footer .text-right.footernav a {margin: 15px 10px 5px 0;}
 .footer .text-right.footernav span.copy {float:right}

 @media(min-width:768px){
 .footer .text-right.footernav {text-align:right!important;padding-right: 15px;margin: 10px 0}
     .footer .text-right.footernav a {margin: 5px 0 5px 10px;}
.footer .text-right.footernav span.copy {display:block;float:none}
 .footer .text-center.footernav {text-align: center!important;}
 }


.row.stretch {display:flex; align-items:stretch;padding: 0 -15px 0 0px;}
.row.stretch div.stretch {margin:15px;;}

/* flexbox vertical */
.align-vertical {display: block;text-align:left;}
@media(min-width:768px) {
	.align-vertical {display: flex;align-items:center;}
	.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;}

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


.mapboxgl-ctrl-top-right .mapboxgl-ctrl {float: none; margin: 10px auto;top:50px}

  @media all and (min-width:500px){
	.mapboxgl-ctrl-top-right {right: 0;}
	.mapboxgl-ctrl-top-right .mapboxgl-ctrl {float: right; margin: 10px;}
}
	

	.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 .modal-body .info {
    position: absolute;
    background: var(--background-color-trans);
    padding: 20px;
    font-size: 0.8rem;
    top: 0;
    color: var(--text-color);
    width: 200px;
    z-index: 10;
    border-radius: 5px;
}
@media(min-width:768px){
    #m-map .modal-body .info{
        width: 390px;
    }
}
@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%;border: 1px solid transparent;}
a[data-toggle='modal'][data-type='image']:hover {border: 1px solid var(--blue);}
a[data-toggle='modal'][data-type='image']:after {
	content:'+';
	color: #fff;
	position: absolute;
	background:var(--blue);;
	width: 25px;
	line-height: 22px;
	text-align:center;
	border-radius: 100%;
	font-size: 29px;
	right: -13px;
	top: -13px;
	opacity:0.5;
	height: 25px;
	font-weight: 700;
}
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;}

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


 .row {
	margin: 25px -15px;
	position:relative;
	}
 .row.kontakt {
	margin: 0;
  padding: 25px 10px 30px;
	background:var(--background-color-light);
	}
.kontakt .row{
	margin: 5px -16px 15px;
	}
footer .row{
	margin: 15px -15px;
	}

.row.picture {margin: 40px -15px 60px;}

.row-headline {
 	margin: 20px 0px;
 	}
.row-headline>div>* {
 	margin: 15px 0;
  font-weight:600;
 	color: inherit;
 	}

    /* Keywords */
.row.keywords div.d-flex {display:block!important;}

@media(min-width:500px){
  .row.keywords div.d-flex {display:flex!important;}
  .row.keywords div.d-flex .text-blue.h2 {display:block; font-size: 20px;}
}
@media(min-width: 768px){
.trow.keywords div.d-flex .text-blue.h2 { font-size: 24px;}
}
/*#############################################################*/
/*### Intro header ############################################*/
/*#############################################################*/
header {
 height: 250px;
   background: url(/images/header-leitungswasser.jpg)no-repeat  30% 50px;
         background-size: auto;
     background-size: cover;
     position: relative;
 }
 @media(min-width:768px){
     header {
     height:  25vmax;
     min-height:250px;
     max-height: 400px;
  
     }
 
 }


 .logo {margin-left: 15px;height: 80%;top: 10%;}
.title {color: #fff; font-size: 2.2vw; font-weight: 600;}
@media(min-width:1024px){
  .title {font-size: 24px}
}
 .stoerer {
    background: var(--dark-grey);
    text-align: center;
}
 .button {
 color: #fff;
  margin: 10px 0;
 }


/*## Querformat #######################################################*/

@media(orientation:landscape){
}
@media(orientation:landscape) and (min-width:600px){
}  

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


/* Footnote */
.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:none;margin: 0;width: 100%;overflow: hidden;}
.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)}

form-control::placeholder {
  color: #999;
}

.row.alert {padding: 0; margin:-10px 0 10px;}
.row.alert>div  {padding: 0; margin:0}
div.alertbox {position:relative; min-height: 40px; }
div.alertbox span.alert {padding: 0; position:absolute; color: rgb(203,0,0);}
/* 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:var(--blue);color: #fff;}
.text-blue {color:var(--blue);}
div.blue {background:#4394D4;color: #fff;}
h3.blue,h2.blue {color: #fff!important; line-height: 30px; padding: 10px 0;}
h3.cyan,h2.cyan {color: #fff!important; line-height: 25px; padding: 10px 5px;}
.text-cyan {color:#07A9CB!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.haerte1,.dot.wasserhaerte0 { background: #6AB42D; }
.dot.haerte2,.dot.wasserhaerte1 { background: #F7EA51; }
.dot.haerte3,.dot.wasserhaerte2 { background: #CC1417; }

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



.container-fluid.nav
{
	background: var(--blue);
	padding:  0;
	width: 100%;
	z-index: 15;
	top: 0;
	bordernone;
}
.container-fluid.nav>nav
{
	position: relative;
	height: 70px;
}




nav > ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 0;
}

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

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

nav > ul > li a
{
	font-size: 17px;
	display: block;
	color: #fff;
	text-align: center;
	padding: 20px 10px 0 10px;
	line-height: 25px;
	text-decoration: none!important;
}
@media(min-width:768px) {
nav > ul > li a {padding: 0 10px 0 10px;}
}
body.home nav > ul > li a {padding: 20px 10px 0 10px;}

nav > ul > li a:hover {
    color: #fff;
}

nav > ul > li.contactlink
{
	background:var(--dark-grey);
  padding: 0 40px;
  position:relative
}
nav > ul > li.contactlink::before {
  content:url(/images/kontakt-under.svg);
  position:absolute;
  width:100%;
  left:0;
  top:70px;
  /*! z-index:-1; */
}
nav > ul > li.contactlink img.contact-icon
{
width: 20px; margin: 5px 5px -5px 5px;
position: relative;
}

footer .text-right.footernav {text-align:right!important;font-size: 14px;}

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






@media (max-width: 767px) {
  nav .title {display:none;}
  nav .logo {float:left; margin-top: 6px}
	nav > ul > li.contactlink {padding: 0 20px;}
	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;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: 0;
    top: 5px;
}

}



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


nav.inverse > ul > li a
{
	display: block;
	color: #333;
	font-size: 1.5rem;
}



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


/*### 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.FR,
.pie-chart .col-4.LI
{
	display:none
}

{
	text-align: center;
	margin-bottom: 10px;
}

.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:10px;}
.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;
	display: none;
}
.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;
}

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

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

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

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 30px 0;}
span.searchterm.wrapper {display:flex}
span.searchterm.wrapper:first-child{display:none; visibility:hidden}
#searchterm.daten {margin-right: 10px;width:calc(100% - 50px);display: inline-block;vertical-align: middle;color:var(--text-color);background:var(--background-color-even)}
.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";
 }

@media all and (min-width:768px) {
.ui-autocomplete { padding: 0px; width:30vw!important; min-width: 430px!important;max-width: 500px;}
}	
@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}
}