html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font: 100.1% arial,helvetica,clean,sans-serif; font-size: 14px; color: #333 !important; background-color: #fff !important; position: relative; }
a { color: #333; text-decoration: none !important; }
a:hover { color: #005e1c; }
/*
h1 { margin: 0 0 20px 0 !important; text-transform: uppercase; color: #005e1c !important; padding: 0; margin: 0; }
h2 { margin: 0 0 20px 0 !important; color: #3399cc !important; padding: 0; margin: 0; text-transform: uppercase; }
h3 { color: #333; padding: 0; margin: 0; }
h4 { font-size: 110% !important; padding: 0; margin: 0; }
h5 { font-size: 100% !important; padding: 0; margin: 0; }
h6 { font-size: 90% !important; padding: 0; margin: 0; }
*/
h1, .h1 { font-size: 24px; margin-top: 0px;/*30px;*/ }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 15px; font-weight: bold; }
h5, .h5 { font-size: 13px; }
h6, .h6 { font-size: 11px; }
iframe { border: 0; width: 100%; height: 500px; }
/* MobileMenuDiv */
#mobileMenu { display: none;}
/* section */
section { width: 100%; position: relative; float: left; padding: 50px 0 50px 0; }
section.container-fluid.content h3 { padding: 0 0 15px 0; }
section.container-fluid.content .liste h3 { padding: 0; }
hr { clear: left; margin: 25px 0 25px 0; }
p { padding: 0 0 15px 0; }
section.container-fluid { position: relative; }
section.container-fluid > .container { position: relative; }
h2 > a { float: right; color: #333; font-size: 80%; }
h2 > span { padding-left: 15px; color: #333; font-size: 80%; }
/* Header */
section.container-fluid.head { padding: 15px 0 15px 0; color: #fff; background-image: linear-gradient(to bottom, #daf1b0 0px, #9ec15b 100%); background-repeat: repeat-x; }
img.logo { position: relative; margin-top: -35px; }
img.logo-lkspn { position: absolute; margin-top: 0px; right: 25px; }
img.bluepower { position: absolute; margin-top: 15px; right: 325px; height: 75%; }
.fadein { position:absolute; top: 5px; height: 90%; right: 125px; }
img.logo-durchatmen { position: absolute; right: 0px; height: 100%; -webkit-filter: drop-shadow(2px 2px 2px #fff); filter: drop-shadow(2px 2px 2px #fff); }
/* Suche */
form.suche { position: absolute; right: 104px; top: 30px; width: 300px; }
form.suche input { border-color: #398439; }
/* Topmenu */
section.container-fluid.topmenu { background-color: #fff; padding: 15px 0 15px 0; border-bottom: 1px solid #005e1c; height: 50px; }
section.container-fluid.topmenu nav { float: right; }
section.container-fluid.topmenu nav > ul { padding: 0 !important; margin: 0 !important; }
section.container-fluid.topmenu nav > ul > li { float: left; list-style-type: none; margin-left: 15px; }
section.container-fluid.topmenu nav > ul > li > a { font-size: 90%; }
section.container-fluid.topmenu .leitweg { float: right; font-size: 90%; padding: 2px 15px 0 0; }
section.container-fluid.topmenu img.logo { display: none; }
/* Hauptmenu */
section.container-fluid#menu { height: 50px; padding: 15px 0 15px 0; color: #fff; border: 1px solid #fff; border-width: 1px 0 1px 0; background-image: linear-gradient(to bottom, #0073cb 0px, #2b319f 100%); background-repeat: repeat-x; }
section.container-fluid#menu .menu > ul { padding: 0 !important; margin: 0 !important; }
section.container-fluid#menu .menu > ul > li { float: left; list-style-type: none; margin-right: 25px; position: relative; }
section.container-fluid#menu .menu > ul > li > a { display: block; text-transform: uppercase; color: #a4d3df !important; }
section.container-fluid#menu .menu > ul > li > a:hover, section.container-fluid.menu .menu > ul > li > a.activ { color: #fff !important; }
section.container-fluid#menu .menu > ul > li > a { display: block; text-transform: uppercase; color: #a4d3df !important; }
section.container-fluid#menu .menu > ul > li.p9 { float: right; text-align: right; margin-right: 0px;}
section.container-fluid#menu .menu > ul > li.p9 > a { color: #fff !important; font-weight: 600; float: right; }
section.container-fluid#menu .menu > ul ul { display: none; }
section.container-fluid#menu .menu > ul > li:hover ul { display: block; position: absolute; z-index: 200; margin: 0 !important; padding: 17px 0 0 0; width: 250px; }
section.container-fluid#menu .menu > ul > li ul > li { list-style-type: none; position: relative; background-color: #e2edf9; border: 1px solid #fff; border-width: 0 1px 1px 1px; }
section.container-fluid#menu .menu > ul > li ul > li.activ, section.container-fluid.menu .menu > ul > li ul > li:hover { background-color: #d1dddb; }
section.container-fluid#menu .menu > ul > li ul > li > a { display: block; color: #333 !important; font-size: 90%; padding: 10px 15px 10px 15px; }
section.container-fluid#menu.fixed { position: fixed; top: 0; width: 100%; z-index: 1000; }
/* Content */
section.container-fluid.content { padding: 0; background-color: #fff; line-height: 150%; min-height: 400px; }
section.container-fluid.content > .container > div.grid > div { min-height: 600px; }
section.container-fluid.content > .container > div.grid > div > div:nth-of-type(1) { background-color: #e2edf9; padding: 15px 0 15px 0 !Important; }
section.container-fluid.content > .container > div.grid > div > div:nth-of-type(2) { padding: 15px 0 15px 15px !Important; }
section.container-fluid.content nav > ul { padding: 0 !important; margin: 0 !important; border: 1px solid #e2edf9; border-width: 1px 0 1px 0; }
section.container-fluid.content nav > ul > li { list-style-type: none; background-color: #e2edf9; border: 1px solid #e2edf9; border-width: 0 0 0 1px; }
section.container-fluid.content nav > ul > li:hover, section.container-fluid.content nav > ul > li.activ { background-color: #fff; border: 1px solid #e2edf9; border-width: 0 0 0 1px; }
section.container-fluid.content nav > ul > li > a { display: block; color: #333 !important; padding: 5px 15px 5px 15px; }
section.container-fluid.content a:not(.btn) { text-decoration: underline; color: #005e1c; }
section.container-fluid.content a:hover:not(.btn) { text-decoration: underline !important; color: #000; }
/* Footer */
section.container-fluid.footer { padding: 15px 0 15px 0; background-color: #fff; background-image: linear-gradient(to bottom, #9ec15b 0px, #daf1b0 100%); background-repeat: repeat-x; border-top: 1px solid #005e1c; }
section.container-fluid.footer h3 { text-transform: uppercase; padding-bottom: 25px; font-size: 110% !important; }
/* Startseite */
.startseite h3, .startseite h5 { margin-top: 0; padding-top: 0; }
.startseite h3 > a { text-decoration: none !important; }
.startseite h3 > a { text-decoration: none !important; }
//.startseite .liste { position: relative; background-color: #fff; width: calc(25% - 11px); margin-left: 15px; margin-bottom: 15px; }
//.startseite .liste:nth-of-type(1), .startseite .liste:nth-of-type(5) { width: calc(25% - 12px); margin-left: 0; }
.startseite.row, .startseite .row { margin: 0 !important }
.startseite .liste { position: relative; background-color: #fff; width: calc(25% - 10px); margin-left: 10px; margin-bottom: 10px !important; border: 1px solid #dcdcdc; padding: 15px; }
.startseite .liste:nth-of-type(1), .startseite .liste:nth-of-type(5) { /*width: calc(50% - 12px);*/ margin-left: 0; }
/*.startseite .liste:nth-of-type(1), .startseite .liste:nth-of-type(2), .startseite .liste:nth-of-type(3), .startseite .liste:nth-of-type(4),
.startseite .liste:nth-of-type(1), .startseite .liste:nth-of-type(2), .startseite .liste:nth-of-type(3), .startseite .liste:nth-of-type(4) { margin-bottom: 15px !important; }*/
.startseite .liste.weitereseite { border-width: 0px !important; background-color: #f2f2f2; }
.startseite .liste:nth-of-type(8) { text-align: center; background-color: #daf1b0; }
.startseite .liste img { width: 90%; border: 1px solid #eee !important; padding: 3px; }
//.startseite .liste a.detail { float: left; margin-top: 50px; }
//.startseite .row.newsandinfo { padding: 0 0 25px 0; }
.startseite .row.newsandinfo > div > h3 { /*background-color: #4f6f1c; color: #fff; text-align: center; */padding: 15px 0 15px 0 !important; font-weight: 400; }
.startseite .row.newsandinfo > div.liste:nth-of-type(8) h3 { padding-top: 30px !important; }
.startseite .row.newsandinfo div.weitere a { display: block; /*margin-bottom: 15px;*/ }
section.download .card { width: calc(33.33333% - 10px); margin-left: 10px; }
section.download .card:nth-of-type(1), section.download .card:nth-of-type(4), section.download .card:nth-of-type(7) { /*width: calc(50% - 12px);*/ margin-left: 0; }
/* Section */
section.text { line-height: 150%; }
section.text p { text-align: justify; }
section.hervor { background-color: #daf1b0; }
section.gray { background-color: #f2f2f2; }
section.inhalt { background-color: #fff; margin-bottom: 50px; }
/* Suche */
section.search { padding-bottom: 25px; }
/* Schnelleinstieg */
section.fast { background-color: #daf1b0; min-height: 320px; margin: 5px 0 0 0; }
div.schnelleinstieg { float: left; width: 100%; text-align: center; padding-bottom: 50px; }
div.schnelleinstieg > h3 { font-size: 200%; font-weight: 500; }
div.schnelleinstieg > hr { border-top: 2px solid #666; }
div.schnelleinstieg > ul { float: left; margin: 0; padding: 0 !important; width: 100%; }
div.schnelleinstieg > ul > li { list-style-type: none; margin: 0; padding: 0; float: left; width: 14.285714285714%; text-align: center; }
div.schnelleinstieg > ul > li > a:first-of-type { display: inline-block; width: 100px; height: 100px; border: 2px solid #666; border-radius: 10px; }
div.schnelleinstieg > ul > li > a:first-of-type i { font-size: 300%; color: #666; }
div.schnelleinstieg > ul > li > a:first-of-type > i { margin-top: 30px; }
div.schnelleinstieg > ul > li > a:not(:first-of-type) { display: block; padding-top: 15px; color: #666; text-decoration: none; }
div.schnelleinstieg > ul > li:hover > a:first-of-type { border: 2px solid #000; }
div.schnelleinstieg > ul > li:hover > a:first-of-type i, div.schnelleinstieg > ul > li:hover > a { color: #000; }
h1.headline, h3.headline { font-size: 200%; font-weight: 500; text-align: center; padding: 50px 0 50px 0; color: #666; text-transform: uppercase; }
section h1.headline:first-of-type, section h3.headline:first-of-type { padding: 0 0 25px 0; }
h3.headline { color: #298912; }
/* Bilder + Panel */
section.bilder { background-color: #f2f2f2; margin: 5px 0 0 0; padding: 0; }
.bilder > .container { display: table; background-color: #f2f2f2; }
.bilder > .container > div { display: table-cell; vertical-align: top; background-color: #fff; }
.bilder > .container > .ticker { position: relative; width: 60%; z-index: 1; padding-left: 5px; /*border: 5px solid #fff; border-width: 0 5px 0 5px; left: -5px;*/ background-color: #fff; }
.bilder > .container > .ticker #myTicker .carousel-item { height: 400px; }
.bilder > .container > .ticker #myTicker .carousel-item .carousel-caption { /*background-color: #fff; opacity: 0.25;*/ color: #000; }
.bilder > .container > .ticker #myTicker .carousel-item > img:not(.center) { opacity: 0.5; }
.bilder > .container > .ticker #myTicker .carousel-indicators [data-bs-target] { background-color: #298912; }
.bilder > .container > .ticker #myTicker .carousel-item .carousel-caption .btn-secondary { color: #fff; }
.bilder > .container > .ticker #myTicker .carousel-item img.center { position:absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); }
.bilder > .container > .ticker #myTicker .carousel-item img.center.h { height: 75%; }
.bilder > .container > .ticker #myTicker .carousel-item img.center.w { width: 80%; }
.bilder > .container > .board { position: relative; /*width: calc(40% + 15px);*/ background-color: #fff; /*left: -10px; */padding-right: 5px; }
.bilder > .container > .board > div { float: left; box-sizing: border-box; width: calc(50% - 5px); height: 95px; background-color: #f2f2f2; text-align: center; margin: 5px 0 0 5px; }
.bilder > .container > .board > div:nth-of-type(1), .bilder > .container > .board > div:nth-of-type(2) { height: 100px; margin: 0 0 0 5px; }
.bilder > .container > .board > div:hover { background-color: #ccc; }
.bilder > .container > .board > div > a { display: block; height: 100%; color: #666; /*line-height: 98px;*/ }
.bilder > .container > .board > div:hover > a { color: #000; }
.bilder > .container > .board > div > a > i { float: left; width: 100%; padding-top: 30px; }
.bilder > .container > .board > div > a > span { float: left; width: 100%; }
/* FA */
.footer .fa, .content .fa { width: 30px; }
/* div layer as table */
.grid { clear: both; margin: 0 -10px 0 -10px; }
.asTable { display: table; border-spacing: 10px 0; border-collapse: separate; table-layout: fixed; width: 100%; }
.asTable > div { display: table-cell; float: none !Important; vertical-align: top; }
/* Formatierungen */
.p-all { padding: 15px !Important; }
.p-no { padding: 0 !important; }
.p-left { padding-left: 15px !important; }
.p-left-no { padding-left: 0 !important; }
.p-right { padding-right: 15px !important; }
.p-right-no { padding-right: 0 !important; }
.p-bottom-no { padding-bottom: 0 !important; }
.p-bottom { padding-bottom: 15px !Important; }
.p-bottom-l { padding-bottom: 50px !Important; }
.p-top { padding-top: 15px !Important; }
.p-top-l { padding-top: 50px !Important; }
.m-no { margin: 0 !important; }
.m-left { margin-left: 15px !Important; }
.m-top { margin-top: 15px !Important; }
.m-top-l { margin-top: 50px !Important; }
.m-bottom { margin-bottom: 15px !Important; }
/* Listen */
.liste { float: left; width: 100%; margin-bottom: 15px; }
.liste h5 { margin-bottom: 15px; }
.liste.liste-with-bg hr { border-color: #fff; }
.liste.liste-with-bg { border-top: 1px solid #dcdcdc; padding: 15px; background-color: #f2f2f2; }
.liste.liste-with-bg:hover { border-top: 1px solid #005e1c; }
.liste.liste-with-bg:hover h5 { color: #005e1c; }
.liste.liste-cell { margin-left: -5px; }
.liste.liste-cell > a { position: relative; display: block; float: left; text-align: center; padding-top: 40px; width: calc(33.3333333% - 5px); height: 120px; background-color: #e2edf9; border-top: 1px solid #e2edf9; margin: 0 0 5px 5px; }
.liste.liste-cell > a:hover { border-top: 1px solid #0073cb; text-decoration: none !important; }
.liste.liste-cell > a > span { /*position: absolute; width: 100%; text-align: center; bottom: 30px;*/ }
.liste.liste-cell > a:hover > span { color: #0073cb; }
/* Pagination */
ul.pagination { float: right; }
ul.pagination > li { background-color: transparent !important; border: none !important; }
ul.pagination > li.active a { background-color: #97A6A6 !important; border-color: #97A6A6 !important; }
ul.pagination > li:not(.active) > a { color: #000 !important; }
/* Galerie */
a.gallery { text-decoration: none !important; }
.gallery .pic { float: left; margin: 0 8px 8px 0; position: relative; }
.gallery .pic .textHover { position: absolute; display: none; top: 0px; right: 0px; width: 100%; z-index: 1000; background-color: #9ec15b; opacity: 0.5; padding: 1px 2px 1px 2px; font-size: 90%; color: #000; text-align: center; }
.gallery .pic:hover .textHover { opacity: 0.9; display: block; }
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #17a2b8; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 5px 15px 5px 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
opacity: 0.5;
}
#myBtn:hover {
opacity: 1.0;
}
/* Breite unter 1030px */
@media screen and (max-width: 1030px) {
section.container-fluid.topmenu nav, section.container-fluid.topmenu .leitweg { display: none; }
#mobileMenu { display: block; position: absolute; top: 5px; right: 0; width: 50px; height: 50px; z-index: 100000; }
a.mmenu { display: block; padding: 0 5px 0 5px; position: absolute; top: 10px; right: 15px; font-size: 200%; color: #dcdcdc; }
.mm-menu_opened ~ .header { margin-top: -30px; }
.list-group-item.mm-listitem { background-color: transparent;}
section.container-fluid#menu { top: 0px; display: none !important; }
section.container-fluid.head { padding: 0; }
section.container-fluid.topmenu { height: 50px; padding: 0; border-bottom: 1px solid #fff;/* display: none;*/ }
section.container-fluid.content > .container > div.grid > div > div:nth-of-type(1) { display: none; }
section.container-fluid.content > .container > div.grid > div > div:nth-of-type(2).p-no { width: 100%; padding: 15px 0px !important; }
.container { max-width: 100%; }
.row .col-3 { width: 50%; }
}
/* Breite unter 768px */
@media screen and (max-width: 768px) {
//section.container-fluid#menu { display: none; }
section.bilder { background-color: #fff; }
.bilder > .container { display: block; background-color: #fff; }
.bilder > .container > div { display: block; }
.bilder > .container > .ticker { width: 100%; padding-right: 5px; }
.bilder > .container > .ticker #myTicker .carousel-item { height: 350px; }
.bilder > .container > .board { /*display: none;*/ padding-top: 15px; }
.bilder > .container > .board > div { float: left; box-sizing: border-box; width: calc(50% - 5px); height: 75px; background-color: #f2f2f2; text-align: center; margin: 0 5px 5px 5px; }
.bilder > .container > .board > div:nth-of-type(1), .bilder > .container > .board > div:nth-of-type(2) { height: 75px; margin: 0 5px 5px 5px; }
.bilder > .container > .board > div:nth-of-type(2), .bilder > .container > .board > div:nth-of-type(4),
.bilder > .container > .board > div:nth-of-type(6), .bilder > .container > .board > div:nth-of-type(8) { margin: 0 0 5px 0; }
.bilder > .container > .board > div > a > i { padding-top: 15px; }
.bilder > .container > .ticker #myTicker .carousel-item .carousel-caption { font-size: 90%; }
.bilder > .container > .ticker #myTicker .carousel-item .carousel-caption h3 { font-size: 125%; }
div.schnelleinstieg > ul > li { width: 33%; height: 150px; }
h1.headline, h3.headline { padding: 25px 0 25px 0; font-size: 125%; }
section.container-fluid.content > .container div.grid, section.container-fluid.content > .container div.row { margin: 0; }
section.container-fluid.content > .container div.asTable { display: block; }
section.container-fluid.content > .container div.asTable > div { float: left !important; width: 100%; padding: 15px 0px !important; }
section.container-fluid.content > .container div.row > div { float: left !important; width: 100%; padding: 15px 0px !important; }
section.container-fluid.content > .container > div > div.grid > div.asTable > div { display: none; float: left !important; width: 100%; padding: 15px 0px !important; }
section.container-fluid.footer div.col-md-4 { font-size: 90%; width: 100%; font-size: 90%; margin-top: 15px; }
section.container-fluid.footer div.col-md-4 > h3 { padding: 10px 0 10px 0 !important; }
form.suche { display: none; }
img.logo { position: absolute; margin: 0px; height: 50px; top: 10px; left: 65px; z-index: 1000000; }
img.logo-lkspn { z-index: 1000000; left: 15px; right: auto; height: 50px; top: 10px; margin: 0; }
img.logo-durchatmen { z-index: 1000000; right: auto; height: 45px; top: 10px; margin: 0; }
img.bluepower { z-index: 1000000; right: 150px; height: 45px; top: 10px; margin: 0; }
.startseite .liste { margin-left: 0px; }
.startseite .row.newsandinfo > div { width: 100%; margin-bottom: 15px !important; margin-left: 0px; }
.startseite div.schnelleinstieg > ul > li > a:last-of-type { display: none; }
.row .col-6 { width: 100%; }
section.container-fluid.topmenu { border-bottom: 1px solid #005e1c; z-index: 20000; background-image: linear-gradient(to bottom, #daf1b0 0px, #9ec15b 100%); background-repeat: repeat-x; height: 75px; position: fixed; top: 0px; left: 0px; }
a.mmenu { top: 15px; right: 10px; font-size: 200%; color: #005e1c; }
img.logo, img.logo-lkspn, img.bluepower, img.logo-durchatmen { display: none; }
section.container-fluid.topmenu img.logo { display: block; margin-top: 5px; left: 10px; z-index: 20001; }
section.container-fluid.first { padding-top: 90px; }
section.container-fluid.text.first { padding-bottom: 0px; }
.row .col-3 { width: 100%; }
}
/* Breite unter 640px */
@media screen and (max-width: 640px) {
div.schnelleinstieg > ul > li { width: 50%; height: 150px; }
.bilder > .container > .ticker #myTicker .carousel-item .carousel-caption { font-size: 80%; }
.bilder > .container > .ticker #myTicker .carousel-item .carousel-caption h3 { font-size: 100%; }
.bilder > .container > .ticker #myTicker .carousel-item { height: 250px; }
}