/* Template © admotion*/


html 
{
   height:			100%;
}


body
{
   height:			100%;
   margin:			0px;
   padding:			0px;
   font-family:		'Klavika', sans-serif;
   font-weight:		300;
   font-size:		16px;
   color:			#000;
   line-height:		145%;
   letter-spacing:	0.02em;
}


#system-message { margin: 0px; }
/* bootstrap import */
*, ::after, ::before {
  box-sizing: revert;
}

.breadcrumb-item + .breadcrumb-item::before {display: none;}
img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: transparent;}
.nav > li > a {display: block;}
li { line-height: 145%;}
.nav {list-style: none; padding: 0; margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}

/* ---------------------------------- */

    #desktop { display: none; }
    #mobile { display: block; }   


#jona #check-anschlusskosten {display: none; }


.hide { display: none;}

/* Spalten */



/* Main Code */

header { width: 100%; position: absolute; top: 0; padding: 20px 5%; display: flex; justify-content: space-between; box-sizing: border-box; z-index: 1000;}
header:hover { z-index: 1002;}

#logo { width: 160px; }


#thema-icon { display: none;}

#inhalt { width: 90%; margin: 100px auto 0; position: relative; z-index: 10;}

.blog-item { padding: 50px 0; border-bottom: 2px solid #9dcc36;}
.blog-item:first-child { padding: 0px 0 50px; border-bottom: 2px solid #9dcc36;}
.blog-item:last-child { border-bottom: 0px solid #9dcc36;}

.com-content-article__body { padding-bottom: 50px; }

.uk-scope .uk-border-rounded { border-radius: 20px; }

#showbox  {  width: 100%; position: relative;}
#showbox img {  min-height: 300px; object-fit: cover;}
#showbox .welle  {  width: 100%; position: absolute; bottom: 0; height: auto; min-height: 40px; object-fit:fill;}


#interesse { width: 90%; margin: 0px auto; position: relative; padding-top: 100px; border-top: 2px solid #9dcc36; }

.uk-scope em { color: #000;}

.box {background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); margin-bottom: 20px;}

.runde-ecken { border-radius: 20px;}
.nomargin {margin: 0 !important;}

.button {background: #2c5dad;  border-radius: 20px; transition: 0.2s; text-transform: uppercase; letter-spacing: 1px; color: #fff; display: inline-block; margin-right: 10px; margin-bottom: 10px; }
.button a {text-transform: uppercase; letter-spacing: 1px; color: #fff;padding: 8px 20px;display: block; color: #fff !important;}
.button:hover {background: #8c0343;}
.button:hover a {color: #fff;}




button {background: #2c5dad;  border-radius: 20px; transition: 0.2s; text-transform: uppercase; letter-spacing: 1px; color: #fff; display: inline-block; margin-right: 10px; border: 0;padding: 8px 20px; font-size: 1em; font-family: 'Klavika'; line-height: normal;}
button:hover {background: #8c0343; color: #fff; cursor: pointer;}




#container-footer  {  width: 100%; background: #fff; }
#footer  {  width: 90%; margin: 100px auto 0px; padding-bottom: 50px; }
#footer .wf-column { padding-top: 30px; border-top: 2px solid #2c5dad;}

#footer .socialsfooter { display: flex; justify-content: space-between;align-items: flex-start;}
#footer .socialsfooter img {width: 45px;}
#footer .adresse a {color: #9dcc36; font-weight: 700;}
#footer .adresse a:hover {color: #8c0343;}

#footer .rechtliches a  { color: #000;}
#footer .rechtliches a:hover  { color: #8c0343;}



#newsletter-anmelden iframe {border: 0; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); width: 100%; max-width: 600px;}


/* Untermenu teaser */

.box-teaser {background: #fff; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); margin-bottom: 30px; transition: 0.2s;}
.box-teaser:last-child { margin-bottom: 00px;}
.box-teaser:hover {background: #2c5dad; color: #fff;}
.box-teaser a {color: #2c5dad; display: block; padding: 20px;}
.box-teaser:hover a {color: #fff;}
.box-teaser h4 {margin: 0;}




/* Nummer Liste */

ol {padding-left: 15px; margin: 0;}
ol li {margin: 5px 0;}
ol li::marker {font-weight: 700;}


ul.gruen li {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAaUlEQVQYV2NkAIK5p80a/jMy+DAyMBj/Z2A4y/ifYUuy6akGkBwMMIIUMTAy1CMLgtn/GRqRFTPOOWN2BmQSukKQySkmp0wQJp4xA4phB8kmp4BmQAAJJhLrRqJ9jct96OJwxxLSQLRCAJvRLgudpjc0AAAAAElFTkSuQmCC); margin: 10px 0; padding: 0 !important; border: 0 !important; }
ul.gruen {padding-left: 20px; margin: 0;}
ul.gruen li::before {display: none !important;}


/* Checkmark Liste */

ul.checkmark-liste li {padding: 10px 0 15px 40px; border-bottom: 2px solid #9dcc36;}


ul.checkmark-liste {
	list-style:none; margin: 0; padding: 0;
}
ul.checkmark-liste li::before {
	content: '' !important;
	background-image: url(/images/_Icons/checkmark.svg);
	margin: 0px 10px -8px -40px;
	background-size: cover;
	display: inline-block;
	height: 30px;
	width: 30px;
}

/* Linie Liste */

ul.linie-liste {
	list-style:none; margin: 0; padding: 0;
}

ul.linie-liste li {padding: 15px 0; border-bottom: 2px solid #9dcc36;}



/* Arrow Liste */

ul.arrow-liste li {padding: 10px 0 15px 40px; border-bottom: 2px solid #9dcc36;}


ul.arrow-liste {
	list-style:none; margin: 0; padding: 0;
}
ul.arrow-liste li::before {
	content: '' !important;
	background-image: url(/images/_Icons/arrow.svg);
	margin: 0px 10px -8px -40px;
	background-size: cover;
	display: inline-block;
	height: 30px;
	width: 30px;
}



/* Arrow Preise */

ul.arrow-preise li {padding: 10px 0 15px 15px;}


ul.arrow-preise {
	list-style:none; margin: 0; padding: 0; font-size: 13px;
}
ul.arrow-preise li::before {
	content: '' !important;
	background-image: url(/images/_Icons/arrow.svg);
	margin: 0px 10px -8px -31px;
	background-size: cover;
	display: inline-block;
	height: 20px;
	width: 20px;
}







/* Breadcrumbs */

#breadcrumbs { width: 90%; margin: 0 auto; font-size: 15px; }
#breadcrumbs ol {padding: 0 !important; margin: 0; display: flex; justify-content: flex-start; flex-wrap: wrap;} 
#breadcrumbs li {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAANElEQVQYV2Oc2Vn4P728n5EBBwBL4FME14lLEYrR2BRh2I2uiHgT8LoBry+ICgdcgQQSBwBUbyQLZ+sSVQAAAABJRU5ErkJggg==); margin-left: 15px; margin-right: 8px; padding-left: 5px !important;}
#breadcrumbs li:first-child {display: none;}
#breadcrumbs li:nth-child(2) {list-style: none; margin-left: 0;}
#breadcrumbs li a {color: #998971;}
#breadcrumbs li.active, #breadcrumbs li:hover a {color: #8c0343;}





/* Kontakt Icons */

#contact {position: fixed; line-height: 1; z-index: 997; right: 5%; top: 86px; transition: 0.5s ease-out;}
.scrolled #contact {right: -200px;}
#contact a {color: #fff;}

#mail, #phone, #search, #pikettdienst, #portal {position: relative; transition: 0.3s ease-out; margin-bottom: 20px;}
.contact-img { background: #2c5dad; border-radius: 50px; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; text-align: center; z-index: 2; position: relative;}

.contact-text {  border-radius: 50px; width: 0px; overflow: hidden; height: 45px; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0; z-index: 1; position: absolute; top: 0; right: 15px;transition: 0.3s ease-out; color: #fff;}

#mail:hover .contact-text { padding: 0 55px 0 20px; width: auto; right: 0;background: #8c0343;}
#mail:hover .contact-img {background: #8c0343;}

#phone:hover .contact-text { padding: 0 55px 0 20px; width: auto; right: 0;background: #8c0343;}
#phone:hover .contact-img {background: #8c0343;}

#portal:hover .contact-text { padding: 0 55px 0 20px; width: auto; right: 0;background: #8c0343;}
#portal:hover .contact-img {background: #8c0343;}

#search:hover .contact-text { padding: 0 55px 0 20px; width: auto; right: 0;background: #8c0343;}
#search:hover .contact-img {background: #8c0343;}

#pikettdienst:hover .contact-text { padding: 0 55px 0 20px; width: auto; right: 0;background: #8c0343;}
#pikettdienst:hover .contact-img {background: #8c0343;}



#contact-mobile {display: flex; position: fixed; top: -150px; transition: 0.5s ease-out; right: calc(5% + 65px); z-index: 998;}
.scrolled #contact-mobile {position: fixed; top: 20px; transition: 0.5s ease-out; z-index: 1200;}

#contact-mobile .contact-text{display: none; }
#contact-mobile #phone {margin-left: 20px;;}



#pikettdienst .contact-img {color: #fff; height: 190px;}
#pikettdienst .contact-text {  border-radius: 20px; width: 0px; overflow: hidden; height: 100%; display: flex; right: 15px; line-height: 2;}


/* Ansprechperson */

#ansprechperson { border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); position: relative; overflow: hidden;}
#ansprechperson-img  { position: relative; width: 100%;}
#ansprechperson-img img { width: 100%;}
#ansprechperson-img-welle img {  width: 100%; position: absolute; bottom: 0; height: auto; min-height: 30px; object-fit:fill;}
#ansprechperson-text  {padding: 10px 30px 30px;}


#ansprechperson-icon-container {position: absolute; right: 20px; margin-top: -45px; display: flex;}
.ansprechperson-icon { background: #2c5dad; border-radius: 50px; width: 45px; height: 45px; margin-left: 20px; transition: 0.2s; padding: 10px; box-sizing: border-box;}
.ansprechperson-icon:hover { background: #8c0343;}


.tooltip { visibility: hidden; color: #fff; background: #2c5dad; border-radius: 50px; padding: 8px 15px; position: absolute; margin-top: 20px; right: 0px; white-space: nowrap; opacity: 0; display: inline; font-family: 'Klavika'; font-size: 1em;}
.tooltip a {color: #fff !important;}
#ansprechperson-icon-container p:hover .tooltip { visibility: visible;margin-top: -55px; opacity: 1;}
#ansprechperson2-icon-container p:hover .tooltip { visibility: visible;margin-top: -35px; opacity: 1;}

/* Ansprechperson 2x */

#ansprechperson2 { border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); position: relative; overflow: hidden;}
#ansprechperson2-img  { position: relative; width: 100%;}
#ansprechperson2-img img { width: 100%;}
#ansprechperson2-img-welle img {  width: 100%; position: absolute; bottom: 0; height: auto; min-height: 30px; object-fit:fill;}
#ansprechperson2-text  {padding: 10px 30px 30px; position: relative;}


#ansprechperson2-icon-container {position: absolute; right: 20px; margin-top: -45px; display: flex; top: 0;}


/* Inhalt Teaser */

#inhalt-teaser{border-radius: 20px; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.2); margin-bottom: 50px; width: 100%; }
#inhalt-teaser-img {width: 100%; height: 150px; position: relative;}
#inhalt-teaser-img::after {content: ''; position: absolute; top: auto; bottom: 0; right: 0; width: 100%; height: 40%; background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
#inhalt-teaser-img img {position: absolute; width: 100%; height: 100%; object-fit: cover;}
#inhalt-teaser-text {width: 100%; height: auto; padding: 20px; box-sizing: border-box;}



/* Suchen Seite */
.com-finder__search-legend {display: none;}
#suchen .com-finder__search { padding: 0; border: 0;}
#suchen input { padding: 10px 20px; border: 0; border-radius: 50px; box-shadow: 0 0 20px rgba(0,0,0,0.2); margin-right: 20px; margin-top: 20px; font-family: 'Klavika'; font-size: 1em;}
.btn.btn-primary { background: #2c5dad; border-radius: 50px; padding: 10px 20px; border: 0; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; font-family: 'Klavika'; transition: 0.2s;}
.btn.btn-primary:hover { background: #8c0343; cursor: pointer;}



/* BLOG */
.article-info-term {display: none;}
.published {margin: 0; font-style: italic; font-size: 14px;}
.article-info {margin: 0 0 10px;}
#tinymce #system-readmore {margin: 20px 0; border: 0; border-top: dotted red 3px;}
#tinymce #system-readmore::after {content: 'Weiterlesen Trennlinie'; color: red; font-size: 12px;}

#blog .blog-item {display: flex; justify-content: space-between; flex-wrap: wrap;}
#blog .left.item-image {width: 66%; }
#blog .left.item-image img {border-radius: 20px; }
#blog .item-content {width: 100%;}

.btn-secondary {background: #2c5dad; padding: 10px 20px;  border-radius: 20px; transition: 0.2s; text-transform: uppercase; letter-spacing: 1px; color: #fff; display: inline-block; margin-top: 10px; }
.btn-secondary:hover {background: #8c0343; color: #fff;}



/* Tabelle linie */

table.tabelle-linie {border-collapse: collapse;}
table.tabelle-linie td { padding: 10px 0; border-bottom: 1px solid #9dcc36; }


/* Tabelle breit mobile scroll */
.mobile-scroll-notif {position: relative; }

.mobile-scroll-notif::after {content: 'scroll ↓'; color: #2c5dad; position: absolute;transform: rotate(-90deg);right: -15px;top: 45%;z-index: 10;}
.mobile-scroll-notif::before {content: ''; position: absolute;right: 0;top: 0; width: 50px; height: 100%; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);z-index: 10; }
.mobile-scroll-container {overflow-x: auto; position: relative;}

table.mobile-scroll {min-width: 700px;}





/* Investoren */

.finanzzahl { color: #9dcc36; font-size: 80px; line-height: 1.1;}
#investoren .box .button {display: block; margin: 0;}

/* Aktien Chart */


#container { width: 50%; padding: 50px; box-sizing: border-box; margin-left: 25%;}

#canvas { width: 100%;}





/* Gitter Tabelle */

table.gitter-tabelle {border-collapse: collapse; border-style: hidden;}
table.gitter-tabelle td {border: 2px solid #9dcc36; padding: 30px 20px;}






/* Fernwärme */

#fernwaerme-uebersicht { background: linear-gradient(0deg, rgba(0,105,180,1) 60%, rgba(157,196,26,1) 100%); border-radius: 30px;}
.grau {filter: saturate(0); transition: 0.2s; opacity: 0.5;}

.hovered { transform: scale(1.2); transition: transform 0.3s ease-in-out;}

#fernwaerme-menu { position: fixed; top: -200px; z-index: 995; transition: 0.5s ease; display: none;}
.fernmenu {top: 20px !important;}

.fernmenu-hvr a {background: #2c5dad !important; color: #fff !important;}

.anker {position: absolute; margin-top: -130px;}

.wf-columns-gap-large.vorteile {gap:0;}

.ContactForm {overflow: visible !important;}

@media(min-width:960px){
        .wf-columns-gap-large.vorteile {gap:2rem;}
}

@media(min-width:1250px){
    #fernwaerme-menu {display: block;}
}


/* Roadmap */
@media(max-width:1250px){
    #roadmap {overflow-x: scroll; padding-bottom: 15px;} 
   #roadmap::after {content: 'Hinweis: Hin und her scrollen'; font-size: 13px;} 
}

table.roadmap td {position: relative;}
table.roadmap td:last-child { padding: 10px 0; border-bottom: 2px solid #9dcc36;}
table.roadmap td:first-child { width: 50px;}
.roadmap .roadmap-kreis { width: 26px; height: 26px; border-radius: 100%; border: 2px solid #2c5dad; background: white; position: absolute; top: 10px; left: 3px;z-index: 2;}
.roadmap .roadmap-linie {position: absolute; width: 2px; height: 100%; background: #2c5dad; left: 17px; top: 10px; z-index: 1;}

.roadmap .roadmap-kreis.active { width: 30px; height: 30px; left: 0; border: 2px solid #2c5dad; background: #2c5dad;}
.roadmap .roadmap-linie.active {left: 16px; width: 3px;}


table.roadmap-quer td {position: relative;}
table.roadmap-quer tr:last-child td { padding: 0px 20px 10px; border-bottom: 2px solid #2c5dad;border-left: 2px solid #2c5dad;}
table.roadmap-quer tr:last-child td:first-child {border-left: 0px solid #9dcc36;}
table.roadmap-quer tr:first-child td {height: 50px;}
table.roadmap-quer tr:last-child::after {content: '▶'; color: #2c5dad; position: absolute; bottom: -14px; right: 10px;}
table.roadmap-quer tr {position: relative; }

.roadmap-quer .roadmap-kreis { width: 26px; height: 26px; border-radius: 100%; border: 2px solid #2c5dad; background: white; position: absolute; top: 8px; left: -15px;z-index: 2;}
.roadmap-quer .roadmap-linie {position: absolute; width: 2px; height: 100%; background: #2c5dad; left: -1px; top: 8px; z-index: 1;}

.roadmap-quer .roadmap-kreis.active { width: 30px; height: 30px; left: -17px; border: 2px solid #2c5dad; background: #2c5dad;}
.roadmap-quer .roadmap-linie.active {}


ul.baustellenliste {padding: 0; margin: 0; position: relative;}
ul.baustellenliste li { margin: 0; list-style: none;position: relative; padding: 0px 0 50px 50px; }
ul.baustellenliste li:first-child::before { background: #2c5dad;}
ul.baustellenliste li::before {content:''; width: 26px; height: 26px; border-radius: 100%; border: 2px solid #2c5dad; background: white; position: absolute; top: -5px; left: 0px;z-index: 2;}
ul.baustellenliste li::after {content:''; width: 2px; height: 100%; background: #2c5dad; position: absolute; top: 0px; left: 14px;z-index: 1;}

ul.baustellenliste p.small {margin-bottom: 20px; font-size: 14px;}






/* Download*/

#downloadbereich { }
.download { margin-bottom: 50px;}
.download a { font-size: 14px; line-height: 1.3;}
.download p { font-size: 14px; line-height: 1.3; margin-bottom: 10px;}

.dwnld-img { box-shadow: 0 0 10px rgba(0,0,0,0.2); margin-bottom: 15px; transition: 0.2s;}
.download:hover .dwnld-img { box-shadow: 0 0 20px rgba(0,0,0,0.2);}








/* ----------- Widgetkit --------------- */
.uk-scope b, .uk-scope strong {font-weight: 700;}
.uk-scope .uk-link-toggle:hover .uk-link, .uk-scope .uk-link:hover, .uk-scope a:hover { text-decoration: none;}
.uk-scope address, .uk-scope dl, .uk-scope fieldset, .uk-scope figure, .uk-scope ol, .uk-scope p, .uk-scope pre, .uk-scope ul { margin: 0;}

.uk-scope .uk-h2, .uk-scope h2 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 30px; line-height: 110%; font-weight: 300; letter-spacing: 3px; color: #9dcc36; text-transform: uppercase;font-family: 'Klavika';}


.uk-scope .uk-h3, .uk-scope h3 {margin: 0px 0px 15px 0px; padding: 0px; font-size: 25px; line-height: 130%; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; font-family: 'Klavika';}

.uk-scope .uk-h4, .uk-scope h4 {font-family: 'Klavika'; font-weight: 700; font-size: 1em; letter-spacing: 0; margin: 0;}

.uk-scope .uk-button-default {background: #2c5dad;  border-radius: 20px; transition: 0.2s; text-transform: uppercase; letter-spacing: 1px; color: #fff; display: inline-block; margin-right: 10px; color: #fff; border: 0px solid #e5e5e5; text-transform: uppercase; font-size: 1em;}
.uk-scope .uk-button-default:hover {background: #8c0343;color: #fff;}
.uk-scope .uk-link, .uk-scope a {color: #2c5dad;}
.uk-scope .uk-link:hover, .uk-scope a:hover {color: #8c0343;}

    /* Accordion */
.uk-accordion li { background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.2); padding: 20px; border-radius: 20px; transition: 0.2s;}
.uk-accordion li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.uk-accordion p {line-height: 1.45;}
a.uk-accordion-title { font-weight: 700; font-size: 1em; color: #2c5dad !important; text-transform: uppercase; letter-spacing: 1px;}
.uk-scope .uk-accordion-title::before {content: '+'; background: none; font-size: 40px; font-weight: 400; line-height: 21px; width: 30px; height: auto;} 
.uk-open .uk-accordion-title::before {content: '–'; background: none; font-size: 40px; font-weight: 400; line-height: 21px; width: 30px; height: auto;} 
.uk-scope .uk-accordion > :nth-child(n+2) { margin-top: 35px;}

.uk-accordion-content li {box-shadow: 0 0 0px rgba(0,0,0,0.2); padding: 0px; border-radius: 0px; }
.uk-accordion-content li:hover {box-shadow: 0 0 0px rgba(0,0,0,0.2); }


#cta-accordion .uk-accordion li { background: #8c0343; box-shadow: 0 0 20px rgba(0,0,0,0.2); padding: 20px; border-radius: 20px; transition: 0.2s;}
#cta-accordion a.uk-accordion-title {color: #fff !important;}

#cta-accordion .uk-accordion li:hover {  background: #2c5dad; box-shadow: 0 0 10px rgba(0,0,0,0.2);}

#cta-accordion .uk-accordion li.uk-open { background: #fff;}
#cta-accordion .uk-accordion li.uk-open  a.uk-accordion-title {color: #2c5dad !important;}





/* Interesse */

#interesse
.interesse {margin-top: 40px !important;}
.interesse .uk-panel {border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); overflow: hidden;}
.interesse h3 {padding: 20px !important; white-space: nowrap;}
.interesse .uk-inline-clip::after {content: ''; position: absolute; top: 0; left: 0; width: 90%; height: 100%; background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}

.interesse .uk-panel .uk-grid .uk-first-column { z-index: 10;}
.interesse .uk-inline-clip {display: none;}





 /* Mitarbeiter */

.team .uk-panel { border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); background: #fff;}
.team .uk-panel #ansprechperson { box-shadow: 0 0 0px rgba(0,0,0,0.2);}



  

/* News */

.uk-subnav { margin-bottom: 70px !important;}
.uk-subnav a { padding: 5px 15px; box-shadow: 0 0 10px rgba(0,0,0,0.2); background: #fff; color: #2c5dad !important; text-transform: none !important;  border-radius: 20px; margin-bottom: 10px;}
.uk-subnav .uk-active a { background: #2c5dad; color: #fff !important;}
.uk-subnav a:hover { background: #2c5dad; color: #fff !important;}

.news .uk-panel {box-shadow: 0 0 20px rgba(0,0,0,0.2); border-radius: 20px; padding: 20px 20px 50px;; position: relative;}

.news-content {margin-top: 30px;}
.news-infos {position: absolute; bottom: -25px;}
.news-date {float: left; background: #9dcc36; border-radius: 20px; padding: 3px 15px; color: #fff; font-size: 13px;margin-right: 15px;margin-bottom: 10px;}
.news-tag {float: left; background: #9dcc36; border-radius: 20px; padding: 3px 15px; color: #fff; font-size: 13px; }

.news .uk-grid-margin, .uk-scope .uk-grid + .uk-grid, .uk-scope .uk-grid > .uk-grid-margin {  margin-top: 50px;}

.news-link { margin-top: 20px;}

figure.left.item-image {margin: 0 0 30px;}
figcaption {font-size: 13px;}
.eapps-facebook-feed-extra-small {box-shadow: 0 0 20px rgba(0,0,0,0.2); border-radius: 20px; }
.fa-2x { font-size: 1em !important;}

#newsroom #breadcrumbs li:nth-child(4) {display: none;}



/* Filter */
ul.filter  { display: flex; padding: 0; margin: 0; flex-wrap: wrap;}
ul.filter li {list-style: none;}
ul.filter li a { padding: 9px 15px; box-shadow: 0 0 10px rgba(0,0,0,0.2); background: #fff; color: #2c5dad; text-transform: none !important;  border-radius: 20px; margin-bottom: 10px; margin-right: 20px; font-size: 14px; display: block;}

ul.filter li a:hover { background: #2c5dad; color: #fff !important;}






/* RSForm Pro */

select, input, textarea { border-radius: 20px !important; box-shadow: 0 0 10px rgba(0,0,0,0.2); border: 0px !important; color: #000; font-size: 1em; font-family: 'Klavika'; }

.form-control, .form-select { padding: 10px 20px; color: #000; font-size: 1em;}
.mb-3 { margin-bottom: 20px !important;}

#userForm * {
  box-sizing: border-box;
}
.yui-calendar { font-family: 'Klavika';}
.yui-calendar td.calcell.selected {
	color:#fff;
	background-color:#2c5dad;
	border:1px solid #2c5dad;
}.yui-calendar td.calcell.selected a {color:#fff;}


.yui-calendar td.calcell.calcellhover {
	cursor:pointer;
	color:#FFF;
	background-color:#9dcc36;
	border:1px solid #9dcc36;
}
.rsform-upload-box {box-shadow: 0 0 0;border-radius: 0 !important; }
.form-control:disabled, .form-control[readonly] { background-color: #fafafa;}
.uk-scope :focus:not([tabindex^="-"]) {
  outline: 0px solid #333;
  outline-offset: 1px;
}
.btnCal.rsform-calendar-button {border-radius: 50px !important; margin-left: 5px !important;}
.form-label.formControlLabel {font-weight: bold;}





/* Gas Zuhause Ein- Ausblenden */

.triggers img {width: 50px;}

.triggers td {color: #9dcc36; transition: 0.2s; padding: 10px !important;}
.triggers td:hover {background: #9dcc36; color: #fff; cursor: pointer;}
.triggers td:hover img {filter: brightness(100);}

td.t-active {background: #9dcc36; color: #fff;}
td.t-active img {filter: brightness(100);}


#content1, #content2, #content3, #content4, #content5, #content6 {display: none;}
.show {display: block !important;}

.gascontent {display: flex; align-items: center;}










/* Krisenseite */
#krisencontainer {position: fixed; top: 20px; left: 20px; right: 20px; bottom: 20px; background:#2c5dad; padding: 30px; border-radius: 20px; z-index: 9999999; overflow-y: scroll;}
#krisenbg {position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background:rgba(0,0,0,0.7); z-index: 999999;}
#krisenseite {color: white;}
#krisenseite a {color: white;}
.kriseicon {margin-bottom: 15px;}
#krisenseite .box {color: black;}
#krisenseite h1 {color: white;}
#krisenseite h2 {color: white;}
#krise-close {width: 45px; height: 45px; border-radius: 100%; z-index: 99999999; background: #8c0343 url(../images/menu-close.svg) no-repeat center center; position: fixed; transition: 
    0.2s; top: 5px; right: 5px;}
#krise-close:hover {cursor: pointer; transform: scale(1.1);}

.krisenmeldung {color: white; background: #8c0343; padding: 30px; border-radius: 20px; position: relative;}
.krisenmeldung::after {
  content: "";
  position: absolute;
  inset: 0;                 /* exakt so gross wie das Element */
  border-radius: inherit;   /* Ecken übernehmen */
  pointer-events: none;     /* klickt nicht dazwischen */
  animation: pulse-shadow 1.5s ease-out infinite;
}

@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0 #8c0343;
    opacity: 1;
  }
 90% {
    /* Spread ist der 4. Wert: expandiert gleichmässig nach aussen */
    box-shadow: 0 0 0 18px #8c0343;
    opacity: 0; /* optionales weiches Ausblenden */
  }
100% {
    /* Spread ist der 4. Wert: expandiert gleichmässig nach aussen */
    box-shadow: 0 0 0 0px #8c0343;
    opacity: 0; /* optionales weiches Ausblenden */
  }

}







/* Fonts */


h1 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 30px; line-height: 110%; font-weight: 300; letter-spacing: 3px; color: #9dcc36; text-transform: uppercase;}
h2 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 30px; line-height: 110%; font-weight: 300; letter-spacing: 3px; color: #9dcc36; text-transform: uppercase;}
h3 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 25px; line-height: 130%; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;}
h4 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 18px; line-height: 130%; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2c5dad;}


a { text-decoration: none; outline: none; color: #2c5dad;  }
a:hover { text-decoration: none; color: #8c0343; }
a:focus { text-decoration: none; outline: none; }

p {margin: 0; }
strong {font-weight: 700;}

p.small {font-size: 13px; line-height: 1.3;}

b {font-weight: 700;}


/* Small Stuff */
.map {border-radius: 20px;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); }
.video-responsive {border-radius: 20px;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); }

.avPlayerWrapper .avPlayerContainer .avPlayerBlock { padding: 56.25% 0 0 0 !important;border-radius: 20px;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);}

.mceSplitButtonMenu { max-height: auto !important;}


#webdesign  { margin-top: 140px; background: #2c5dad url(../images/webdesign-admotion.png); position: absolute; right: 0px; width: 25px; height: 91px;}
#webdesign p  { margin: 0px; }
#webdesign a  { width: 25px; height: 91px; display: block; }


.clear { line-height: 0; }

#scrollup {opacity: 0; border-radius: 50%; position: fixed; bottom: 10px; right: 10px; z-index: 99; border: none; outline: none; background-color: #9dcc36; color: white; cursor: pointer; padding: 4px; width: 25px; height: 25px; margin: 0; font-size: 13px; transition: 0.5s; text-align: center; }
#scrollup:hover { background-color: #8c0343;}
.scrolled #scrollup {opacity: 1;}




@media(min-width:500px){
    
#downloadbereich { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.download { width: 188px; margin-right: 50px; margin-bottom: 50px;}

}




@media(min-width:768px){
    
#downloadbereich { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.download { width: 188px; margin-right: 50px; margin-bottom: 50px;}
    
    #desktop { display: block; }
    #mobile { display: none; }

    #left { width: 48%; float: left; margin-right: 4%; }
    #right { width: 48%; float: left; margin-top: 0; } 

    #cookiesck { width: 400px; }


    #ansprechperson2 {display: flex; justify-content: space-between; align-items: stretch; border-radius: 20px; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.2); }
    #ansprechperson2-img {width: 40%; height: auto; position: relative;}
    #ansprechperson2-img::after {content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
    #ansprechperson2-img img {position: absolute; width: 100%; height: 100%; object-fit: cover;}
    #ansprechperson2-text {width: 60%; height: auto; padding: 50px 50px 50px 80px; box-sizing: border-box;}

    #ansprechperson2 .ansprechperson-icon {margin-left: 0; margin-right: 20px; margin-top: 20px;}
    #ansprechperson2-img-welle {display: none;}
    #ansprechperson2-icon-container {position: relative; margin-top: 0px;right: auto;}

  #blog .left.item-image {width: 30%; }
  #blog .item-content {width: 100%;}
  
#krisencontainer { padding: 50px; }


}

@media(min-width:960px){
    
    #logo { width: 260px; }

    body { font-size: 18px;}
    h1 { font-size: 66px;margin-bottom: 55px;}
    h2 { font-size: 50px; margin-bottom: 35px;}
    h3 { font-size: 35px;}
    
    .uk-scope .uk-h2, .uk-scope h2 { font-size: 50px; margin-bottom: 35px;}

    .interesse .uk-inline-clip {display: block;}

    .com-finder > * + *, .com-finder__results > * + * { margin-top: 55px;}

     #inhalt-teaser{display: flex; justify-content: space-between; align-items: stretch; border-radius: 20px; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.2); margin-bottom: 50px; }
    #inhalt-teaser-img {width: 40%; height: auto; position: relative;}
    #inhalt-teaser-img::after {content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
    #inhalt-teaser-img img {position: absolute; width: 100%; height: 100%; object-fit: cover;}
    #inhalt-teaser-text {width: 60%; height: auto; padding: 50px 50px 50px 80px; box-sizing: border-box;}

    
    .box-teaser { margin-bottom: 40px;}
    .box-teaser:last-child { margin-bottom: 20px;}


    
    #webdesign  { margin-top: 130px;}
    
    .triggers img {width: 100px;}
    .triggers td {padding: 30px 20px !important;}
    
    .finanzzahl { font-size: 111px;}


        #ansprechperson2-img::after {width: 0%;}
        #ansprechperson2-text {padding: 20px;}

    .mobile-scroll-notif::after {display: none;}
.mobile-scroll-notif::before {display: none; }
    table.mobile-scroll {min-width: 100%;}
  
 #blog .item-content {width: 66%;}

}



@media(min-width:1250px){
    
    header {padding: 20px 50px;}

    #breadcrumbs { width: 1200px; margin: 0 auto;  }
    #inhalt { width: 1200px; margin: 130px auto 0;  }
    #interesse { width: 1200px; padding-top: 130px; }
    #footer  {  width: 1200px; margin: 130px auto 0px; }

    .blog-item { padding: 130px 0; border-bottom: 2px solid #9dcc36;}
    .blog-item:first-child { padding:0 0 130px; border-bottom: 2px solid #9dcc36;}
    .com-content-article__body { padding-bottom: 130px; }

    .box {padding: 30px;}
    
    
    .tsr-hinwil {margin-left: 50px;}
    
    .button a {padding: 8px 40px;}
    

    .news .uk-panel {padding: 30px 30px 60px;}
    .news-content { display: flex; justify-content: space-between;}
    .news-img { width: 30%; }
    .news-img img { border-radius: 20px;}
    .news-text { width: 66%;}
    .news-date { padding: 5px 20px; color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 1px;}
    .news-tag {padding: 5px 20px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
    
    
    
    #krisencontainer { top: 50px; left: 50px; right: 50px; bottom: 50px;  padding: 100px;}
    #krise-close { top: 30px; right: 30px;}

    
    
}

@media(min-width:1400px){
    
     #contact { right: 50px; top: 115px; z-index: 1001;}
    .scrolled #contact { right: 50px; }
    
    #contact-mobile {display: none;}
    
}

@media(min-width:1450px){
    #breadcrumbs { width: 1266px; margin: 0 auto;  }
    #inhalt { width: 1266px; }
    #interesse { width: 1266px; }
    #footer { width: 1266px; }
    
    .wf-columns-gap-large { gap: 4rem;}
    .wf-columns-gap-large.vorteile {gap:4rem;}

    
}

@media(min-width:1650px){

    #thema-icon {height: 215px; border-right: 2px solid #9dcc36; position: absolute; top: 10px; right: calc(100% + 50px); width: 125px; display: block;}
    #thema-icon img {width:50px; padding-right: 50px; float: right;}

    
}

@media(max-height:860px) and (min-width:1250px){
    .triggers img {width: 50px;}

}


/*------TOOLTIP----*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}



/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
.ui-tooltip-content {margin-left: -80px !important;	background: #2c5dad;border-radius: 50px; padding: 8px 15px; }

/* Component containers
----------------------------------*/
.ui-widget {
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 0px solid #c5c5c5;
}
.ui-widget-content { 
	border: 0px solid #dddddd;
	color: #fff; 
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 0px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 0px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 0px solid #cccccc;

}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 0px 0px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}