/*
*
*
*
*
*
*Diese Datei ist urheberrechtlich geschützt von weik.online GmbH | www.weik.online
*
*
*
*
*
*/
/*Templatefarbe: #58585a */
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
/**/
/* GLOBAL--------------------------------------*/
:root {
/*
--templatefarbe_hex: #e2001a !important;
--templatefarbe_rgb: 226,0,26 !important;
*/
--templatefarbe_hex: #58585a !important;
--templatefarbe_rgb: 201,2,26 !important;
--akzentfarbe_hex: var(--templatefarbe_hex) !important;
--akzentfarbe_rgb: var(--templatefarbe_rgb) !important;
--buttonfarbe_hex: var(--templatefarbe_hex) !important;
--buttontextfarbe_hex: #fff !important;
--hinweisboxfarbe_rgb: var(--templatefarbe_rgb) !important;
--hinweisboxtextfarbe_hex: #fff !important;
--welcomeboxhintergrundfarbe_rgb: var(--templatefarbe_rgb) !important;
--welcomeboxhintergrundfarbe_hell_rgb: 255,255,255 !important;
--welcomeboxtextfarbe_hex: #fff !important;
--welcomeboxtextfarbe_hell_hex: var(--textfarbe_hex) !important;
--infobarhintergrundfarbe_hex: #070808 !important;
--infobarhintergrundfarbe_rgb: 7,7,8 !important;
--infobartextfarbe_hex: #fdfdfd !important;
--footerhintergrundfarbe_hex: var(--infobarhintergrundfarbe_hex) !important;
--footertextfarbe_hex: var(--infobartextfarbe_hex) !important;
--textfarbe_hex: #030303 !important;
--untermenutextfarbe_hex: #030303 !important;
--hintergrundfarbe_hex: #ffffff !important;
--hintergrundfarbe_rgb: 255,255,255 !important;
--rahmenhintergrundfarbe_hex: #ffffff !important;
--rahmenhintergrundfarbe_grau_hex: #ededee !important;
--rahmenhintergrundfarbe_dunkel_hex: #444445 !important;
--menuhintergrundfarbe_hex: var(--hintergrundfarbe_hex);
--menuhintergrundfarbe_rgb: var(--hintergrundfarbe_rgb);
--highlightboxhintergrundfarbe_rgb: 250,250,250 !important;
--kachelboxenfarbe_rgb: 255,255,255 !important;
--winkelfarbe_rgb: var(--highlightboxhintergrundfarbe_rgb) !important;
--boxfarbe_hex: #efefef !important;
--claimslidefarbe_hex: var(--templatefarbe_hex) !important;
--claimboxinnerfarbe_hex: #f9f9f9 !important;
--claimboxtextfarbe_hex: var(--akzentfarbe_hex) !important;
--boxverlauf_dunkel_rgb: 240,240,240 !important;
--boxverlauf_hell_rgb: 255,255,255 !important;
}
* {
padding: 0;
margin: 0 auto;
/*border: 0;*/
background-repeat: no-repeat;
background-position: center center;
}
html {
overflow-y: scroll;
}
body {
font-family: Arial, Helvetica, Geneva, sans-serif;
color: #4d4d4d;
line-height: 1.7em;
margin: 0;
background-color: #fff;
width: 100%;
font-size: 16px;
}
#body-wissenlightframe,
#wrapper-wissenlightframe,
#innerwrapper-wissenlightframe,
#hauptbereich-wissenlightframe,
#innerhauptbereich-wissenlightframe {
width: 590px !important;
background-color: #fff !important;
background-image: none !important;
margin: 0 auto !important;
}
/* BOOTSTRAP-GRID--------------------------------------*/
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 768px) {
.container {
width: 750px;
padding-right: 25px;
padding-left: 25px;
}
.row {
margin-right: -25px;
margin-left: -25px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 25px;
padding-left: 25px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1352px;
max-width: 100%;
}
}
@media (max-width: 400px) { /*Fensterübersicht*/
.hidden-400 {
display: none;
}
}
/* FORMATIERUNGEN--------------------------------------*/
.margintop05em {
margin-top:0.5em !important;
}
.margintop1em {
margin-top:1em !important;
}
.margintop15em {
margin-top:1.5em !important;
}
.margintop2em {
margin-top:2em !important;
}
.margintop25em {
margin-top:2.5em !important;
}
.margintop3em {
margin-top:3em !important;
}
.margintop35em {
margin-top:3.5em !important;
}
.margintop4em {
margin-top:4em !important;
}
.margintop45em {
margin-top:4.5em !important;
}
.margintop5em {
margin-top:5em !important;
}
.marginbottom05em {
margin-bottom:0.5em !important;
}
.marginbottom1em {
margin-bottom:1em !important;
}
.marginbottom15em {
margin-bottom:1.5em !important;
}
.marginbottom2em {
margin-bottom:2em !important;
}
.marginbottom25em {
margin-bottom:2.5em !important;
}
.marginbottom3em {
margin-bottom:3em !important;
}
.marginbottom35em {
margin-bottom:3.5em !important;
}
.marginbottom4em {
margin-bottom:4em !important;
}
.marginbottom45em {
margin-bottom:4.5em !important;
}
.marginbottom5em {
margin-bottom:5em !important;
}
.marginright05em {
margin-right:0.5em !important;
}
.marginright1em {
margin-right:1em !important;
}
.marginright15em {
margin-right:1.5em !important;
}
.marginright2em {
margin-right:2em !important;
}
.marginright25em {
margin-right:2.5em !important;
}
.marginright3em {
margin-right:3em !important;
}
.marginright35em {
margin-right:3.5em !important;
}
.marginright4em {
margin-right:4em !important;
}
.marginright45em {
margin-right:4.5em !important;
}
.marginright5em {
margin-right:5em !important;
}
.marginleft05em {
margin-left:0.5em !important;
}
.marginleft1em {
margin-left:1em !important;
}
.marginleft15em {
margin-left:1.5em !important;
}
.marginleft2em {
margin-left:2em !important;
}
.marginleft25em {
margin-left:2.5em !important;
}
.marginleft3em {
margin-left:3em !important;
}
.marginbleft35em {
margin-left:3.5em !important;
}
.marginleft4em {
margin-left:4em !important;
}
.marginleft45em {
margin-left:4.5em !important;
}
.marginleft5em {
margin-left:5em !important;
}
.nomargintop {
margin-top: 0 !important;
}
.nomarginright {
margin-right: 0 !important;
}
.nomarginbottom {
margin-bottom: 0 !important;
}
.nomarginleft {
margin-left: 0 !important;
}
.nopaddingtop {
padding-top: 0 !important;
}
.nopaddingright {
padding-right: 0 !important;
}
.nopaddingbottom {
padding-bottom: 0 !important;
}
.nopaddingleft {
padding-left: 0 !important;
}
/* LAYOUTELEMENTE--------------------------------------*/
.centerbox {
text-align: center !important;
}
.center {
margin: 0 auto;
text-align: center !important;
}
.untertitelbox {
text-align: center !important;
}
.untertitelbox img {
margin-bottom: 10px !important;
}
.untertitelbox p{
margin: 5px 0 50px 0;
}
@media (min-width: 768px) {
.untertitelbox p{
margin: 10px 0 50px 0;
}
}
@media (min-width: 992px) {
.untertitelbox p{
margin: 10px 0 20px 0;
}
}
#clear {
clear: both;
}
.clear {
clear: both;
}
.hinweisbox {
padding: 2em 1em;
background-color: #EFEFEF;
}
.kde-header { /* kennstdueinen-Farbe */
background-color: #e2001a !important;
}
/* LAYOUT--------------------------------------*/
.margintop-05em {
margin-top:0.5em !important;
}
.margintop-1em {
margin-top:1em !important;
}
.margintop-2em {
margin-top:2em !important;
}
.margintop-3em {
margin-top:3em !important;
}
.margintop-4em {
margin-top:4em !important;
}
.margintop-5em {
margin-top:5em !important;
}
.marginbottom-05em {
margin-bottom:0.5em !important;
}
.marginbottom-1em {
margin-bottom:1em !important;
}
.marginbottom-2em {
margin-bottom:2em !important;
}
.marginbottom-3em {
margin-bottom:3em !important;
}
.marginbottom-4em {
margin-bottom:4em !important;
}
.marginbottom-5em {
margin-bottom:5em !important;
}
.nomargintop {
margin-top: 0 !important;
}
.nomarginright {
margin-right: 0 !important;
}
.nomarginbottom {
margin-bottom: 0 !important;
}
.nomarginleft {
margin-left: 0 !important;
}
.nopaddingtop {
padding-top: 0 !important;
}
.nopaddingright {
padding-right: 0 !important;
}
.nopaddingbottom {
padding-bottom: 0 !important;
}
.nopaddingleft {
padding-left: 0 !important;
}
.centerbox {
text-align: center;
}
.center {
margin: 0 auto;
padding-top: 0em;
}
.untertitelbox {
text-align: center !important;
}
.untertitelbox img {
margin-bottom: 10px;
}
.untertitelbox p{
margin: 0.5em 0 4em 0;
}
@media (min-width: 992px) {
.untertitelbox p{
margin: 1em 0;
}
}
.untertitelbox {
text-align: center !important;
}
.untertitelbox img {
margin-bottom: 10px;
}
.untertitelbox p{
margin: 0.5em 0 4em 0;
}
@media (min-width: 992px) {
.untertitelbox p{
margin: 1em 0;
}
}
.untertitelbox {
text-align: center !important;
}
.untertitelbox img {
margin-bottom: 10px !important;
}
.untertitelbox p{
margin: 5px 0 50px 0;
}
@media (min-width: 768px) {
.untertitelbox p{
margin: 10px 0 50px 0;
}
}
@media (min-width: 992px) {
.untertitelbox p{
margin: 10px 0 20px 0;
}
}
#clear {
clear: both;
}
.clear {
clear: both;
}
.hinweisbox {
padding: 2em 1em;
background-color: #EFEFEF;
}
/* ÜBERSCHRIFTEN--------------------------------------*/
h1,
.h1 {
font-size:21px;
}
h2,
.h2 {
font-size: 19px;
}
h3,
.h3 {
font-size: 17px;
}
h4,
.h4 {
font-size: 15px;
}
h5,
.h5 {
font-size: 14px;
}
h6,
.h6 {
font-size: 13px;
}
@media (min-width: 1200px) {
h1,
.h1 {
font-size:28px;
}
h2,
.h2 {
font-size: 23px;
}
h3,
.h3 {
font-size: 21px;
}
h4,
.h4 {
font-size: 19px;
}
h5,
.h5 {
font-size: 18px;
}
h6,
.h6 {
font-size: 17px;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: inherit;
font-weight: 700;
line-height: 1.5em;
color: inherit;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
margin-top: 1.3em;
margin-bottom: 0.5em;
}
@media (min-width: 1200px) {
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
margin-top: 2em;
margin-bottom: 0.7em;
}
}
.produktauswahlh6 {
margin-top: 7px;
}
.pagetitle-contentfull {
font-size: 21px;
font-family: inherit;
font-weight: 700;
line-height: 1.1em;
color: inherit;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.pagetitle-contentfullimg {
font-size: 21px;
font-family: inherit;
font-weight: 700;
line-height: 1.1em;
color: inherit;
margin-top: 1em;
margin-bottom: 0.5em;
}
@media (min-width: 768px) {
.pagetitle-contentfull {
margin-top: 0em;
font-size: 24px;
}
}
@media (min-width: 768px) {
.pagetitle-contentfullimg {
margin-top: 2em;
font-size: 24px;
}
}
.pagetitle {
font-size: 21px;
font-family: inherit;
font-weight: 700;
line-height: 1.3em;
color: inherit;
margin-top: 0em;
margin-bottom: 0.2em;
}
@media (min-width: 768px) {
.pagetitle {
font-size: 26px;
font-family: inherit;
font-weight: 700;
line-height: 1.3em;
color: inherit;
margin-top: 0em;
margin-bottom: 0.2em;
}
}
@media (min-width: 992px) {
.pagetitle {
font-size: 26px;
font-family: inherit;
font-weight: 700;
line-height: 1.2em;
color: inherit;
margin-top: 0em;
margin-bottom: 0.3em;
}
}
@media (min-width: 1200px) {
.pagetitle {
font-size: 26px;
font-family: inherit;
font-weight: 700;
line-height: 1.3em;
color: inherit;
margin-top: 0em;
margin-bottom: 0.2em;
}
}
.pagesubtitle {
font-size: 17px;
font-family: inherit;
font-weight: 700;
line-height: 1.5em;
color: inherit;
margin-top: 0em;
margin-bottom: 0.6em;
}
@media (min-width: 768px) {
.pagesubtitle {
font-size: 20px;
margin-bottom: 0.8em;
}
}
/* FLIEßTEXT------------------------------------------*/
p,
li {
font-size: 17px;
line-height: 1.3em;
}
p.smallp {
font-size: 14px;
line-height: 1.2em;
}
@media (min-width: 1200px) {
p,
li {
font-size: 19px;
line-height: 1.4em;
}
p.smallp {
font-size: 15px;
}
}
p {
margin: 0 0 1.1em;
}
.bold {
font-weight: bold;
}
.kursiv {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.notextdecoration {
text-decoration: none;
}
.tief {
letter-spacing: 2px;
vertical-align: -1px;
font-size : 0.8em;
}
del {
display: none;
}
.float-none {
float: none;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* LINKS----------------------------------------------*/
a {
color: inherit;
text-decoration: underline;
}
a:link {
outline: none;
}
a:hover,
a:focus {
color: #737373;
text-decoration: underline;
}
a.nolink:hover,
a.nolink:focus,
a.nolink:active {
text-decoration: none !important;
}
.tellink {
text-decoration: none;
}
.tellink:hover,
.tellink:focus,
.tellink:active {
text-decoration: none;
cursor: default;
}
.tellink:hover,
.tellink:focus,
.tellink:active {
color: inherit !important;
}
/* BILDER---------------------------------------------*/
.respimg {
max-width: 100%;
height: auto;
}
.row img {
margin-bottom: 10px;
}
@media (min-width: 768px) {
.row img {
/*! margin-bottom: 20px; */
}
}
.startbild {
margin-top: 20px;
padding: 5px;
background: #fff;
}
@media (min-width: 768px) {
.startbild {
margin-top: 40px;
padding: 20px 20px 0 20px;
}
}
.bildlinks {
float: left;
margin-right: 35px;
}
.bildlinks2 {
float: left;
margin-right: 50px;
}
#crossslide{
max-width: 100%;
height: auto;
position:relative;
overflow: hidden;
display: block;
}
#crossslide img{
max-width: 100%;
height: auto;
}
iframe {
border: none;
}
.youtube,
.youtube-klein {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 88%;
}
@media (min-width: 768px) {
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 93%;
}
}
.youtube-klein iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85%;
}
@media (min-width: 768px) {
.youtube-klein iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 87%;
}
}
@media (min-width: 992px) {
.youtube-klein iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 86%;
}
}
@media (min-width: 1200px) {
.youtube-klein iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 91%;
}
}
.dsgvo-block,
.youtube-block {
text-align: center;
margin: 2em 0;
padding: 0em 1em 2em 1em;
background-color: #f9f9f9;
}
.dsgvo-block img,
.youtube-block img {
margin: 0 auto;
max-width: 100%;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 88%;
}
@media (min-width: 768px) {
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 93%;
}
}
.referenzen img {
margin-bottom: 15px;
}
.border {
border: 1px #ccc solid;
}
.rounded5 {
border-radius: 5px;
}
.rounded10 {
border-radius: 10px;
}
.rounded15 {
border-radius: 15px;
}
.applook {
border-radius: 15px;
border: 1px solid #ccc;
-webkit-box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86);
-moz-box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86);
box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86);
}
.shadow {
-webkit-box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86);
-moz-box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86);
box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86);
}
@media (max-width: 767px) {
.produktauswahlmenu img {
width: 450px !important;
height: auto;
}
}
/* AUFZÄHLUNGEN---------------------------------------*/
ul{
list-style-type: disc;
margin: 1em 0 1em 1.1em;
}
.listcontenteinzug {
font-size: 0.9em;
line-height: 1.5em;
margin-left: 3em;
list-style:circle;
}
.startaufzaehlung {
margin-top: 35px !important;
margin-bottom: 50px !important;
}
.startaufzaehlung li {
margin-bottom: 15px;
}
ul.hakenliste {
margin-top: 3em;
margin-right: 0;
margin-left: 0;
margin-bottom: 2em;
}
ul.hakenliste li {
list-style-type: none;
margin-bottom: 1.5em;
}
ul.hakenliste img {
margin-top: -1px;
margin-right: 15px;
margin-bottom: 10px;
float: left;
}
ul.hakenliste .haken2 { /*eingerückt*/
margin-left: 2.5em;
}
ul.hakenliste h4 {
margin-top: 1em;
}
ul.hakenliste-neu {
margin-top: 1.5em;
margin-right: 0.3em;
margin-left: 0.2em;
margin-bottom: 0em;
}
ul.hakenliste-neu li {
list-style-type: none;
margin-bottom: 1.5em;
padding-left: 1.5em;
text-indent: -1em;
}
ul.hakenliste-neu i {
color: #d2021a!important;
width: 15px;
text-align: center;
}
@media (min-width: 1300px) {
ul.hakenliste-neu i { /* Extra Abstand speziell für Überschrift-Hakenlisten mit
für 2. Zeile in großer Bildschirmgröße */
margin-right: 0.2em;
}
}
table.bildtabelle {
width: 100%;
margin-top: 10px;
}
table.bildtabelle td{
padding-bottom: 30px;
}
table.bildtabelle td.bildtabelletd1 {
width: 20%;
vertical-align: top;
}
table.bildtabelle td.bildtabelletd2 {
width: 80%;
vertical-align: top;
}
table.bildtabelle img {
padding: 5px 0;
max-width: 75%;
height: auto;
}
@media (min-width: 768px) {
table.bildtabelle img {
padding: 5px 0;
max-width: 90%;
height: auto;
}
}
/* TABELLEN------------------------------------------*/
/* PRODUKTAUFZÄHLUNG */
table.produktaufzaehlung {
width: 100%;
margin-top: 10px;
}
table.produktaufzaehlung td.produktaufzaehlungtd1 {
width: 30%;
vertical-align: middle;
}
table.produktaufzaehlung td.produktaufzaehlungtd2 {
width: 70%;
vertical-align: middle;
}
table.produktaufzaehlung img{
padding: 15px 0 15px 0;
max-width: 90%;
height: auto;
}
table.produktaufzaehlung h4{
font-size: 13px;
line-height: 1.2em;
margin-top: 0;
}
@media (min-width: 768px) {
table.produktaufzaehlung h4{
font-size: 15px;
line-height: 1.5em;
margin-top: 0;
}
}
@media (min-width: 992px) {
table.produktaufzaehlung h4{
font-size: 17px;
line-height: 1.5em;
margin-top: 0;
}
}
table.produktaufzaehlung p{
font-size: 14px;
line-height: 1.4em;
margin-bottom: 2em;
}
@media (min-width: 768px) {
table.produktaufzaehlung p{
font-size: 15px;
line-height: 1.5em;
margin-bottom: 0em;
}
}
/* PRODUKTÜBERSICHT */
#produktuebersicht-start {
width: 100%;
text-align: center !important;
margin-top: 30px;
margin-bottom: 20px;
}
@media (min-width: 768px) {
#produktuebersicht-start {
margin-top: 30px;
margin-bottom: 20px;
}
}
@media (min-width: 992px) {
#produktuebersicht-start {
margin-top: 30px;
margin-bottom: 30px;
}
}
@media (min-width: 1200px) {
#produktuebersicht-start {
margin-top: 30px;
margin-bottom: 40px;
}
}
@media (min-width: 768px) {
#produktuebersicht-start {
text-align: left;
}
}
#produktuebersicht-start img{
width: 450px;
height: auto;
}
/*#produktuebersicht-start h3 {
margin-top: 0em !important;
margin-bottom: 2em !important;
}
@media (min-width: 768px) {
#produktuebersicht-start h3 {
margin-top: 1em !important;
margin-bottom: 2.5em !important;
}
}*/
#produktuebersicht-start h3 { /* Links in Produktübersichten */
margin-top: 0.5em !important;
margin-bottom: 2em !important;
}
@media (min-width: 768px) {
#produktuebersicht-start h3 {
margin-top: 0.5em !important;
margin-bottom: 2.5em !important;
font-size: 16px !important;
}
}
@media (min-width: 992px) {
#produktuebersicht-start h3 {
margin-top: 0.5em !important;
margin-bottom: 2.5em !important;
font-size: 18px !important;
}
}
.produktauswahlmenu {
text-align: center;
}
.produktauswahlmenu h3,
.produktauswahlmenu img {
text-align: center;
}
@media (max-width: 767px) {
.produktauswahlmenu img {
width: 450px !important;
height: auto;
}
}
.produktauswahlmenu a {
text-decoration: none !important;
}
.produktuebersicht a,
.produktuebersicht a:hover,
.produktuebersicht a:focus {
text-decoration: none;
}
table.produktuebersicht {
width: 100%;
margin-top: 16px;
margin-bottom: 16px;
border-collapse: collapse;
text-align: center;
table-layout: fixed;
}
.zweiprodukte {
margin: 0 auto;
padding-left: 8%;
padding-right: 8%;
vertical-align: top;
}
.dreiprodukte,
.vierprodukte {
margin: 0 auto;
padding-left: 4%;
padding-right: 4%;
vertical-align: top;
}
.zweiprodukte {
width: 34%;
}
.dreiprodukte {
width: 29%;
}
.dreiprodukte-text {
padding: 0 20px;
vertical-align: top;
}
.vierprodukte {
width: 21%;
}
.zweiprodukte h2 {
font-size: 16px;
margin-top: 0.6em;
margin-bottom: 1.2em;
}
.dreiprodukte h2,
.vierprodukte h2 {
font-size: 12px;
margin-top: 0.6em;
margin-bottom: 1.2em;
}
@media (min-width: 768px) {
.dreiprodukte h2,
.vierprodukte h2 {
font-size: 15px;
}
}
.partner-ueberblick { /*Tabelle auf Über-Uns-Seite*/
width: 100%;
border: none;
margin-top: 20px;
}
.partner-ueberblick td{
vertical-align: top;
}
td.partner-ueberblicktd1 {
width: 20%;
}
/* ÖFFNUNGSZEITEN
------------------------------------------------- */
.zeiten p {
margin: 0;
}
.zeiten td{
vertical-align: top;
}
.zeiten {
float: left;
font-size: 15px;
}
@media (min-width: 768px) {
.zeiten {
font-size: 15px;
}
}
@media (min-width: 992px) {
.zeiten {
font-size: 15px;
}
}
@media (min-width: 1200px) {
.zeiten {
float: left;
font-size: 19px;
}
.zeiten td{
padding-right: 40px;
vertical-align: top;
}
}
@media (min-width: 1440px) {
.zeiten {
font-size: 19px;
}
}
/* ÖFFNUNGSZEITEN */
/*
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
LAYOUT
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/
/* KOPFBEREICH ----------------------------------------*/
/* KOPFBEREICH ----------------------------------------*/
/* KOPFBEREICH ----------------------------------------*/
#kopfbereichwrap {
width: 100%;
/* padding: 0 20px 10px 20px; */
background-color: transparent;
}
@media (min-width: 768px) {
#kopfbereichwrap {
/* padding: 0 80px 40px 80px; */
}
}
/* NAVIGATIONEN ALLGEMEIN------------------------------*/
/* NAVIGATIONEN ALLGEMEIN------------------------------*/
/* NAVIGATIONEN ALLGEMEIN------------------------------*/
#naviwrap{
text-align: center;
margin: 0 auto;
background-color: #ededed;
}
@media (min-width: 768px) {
#naviwrap{
}
}
#innernaviwrap{
background-color: #fff;
}
@media (min-width: 768px) {
#innernaviwrap{
padding: 0;
}
}
@media (min-width: 992px) {
#innernaviwrap{
padding: 0;
}
}
/*INNERNAVIWRAP-AUFTEILUNG*/
#navibox {
}
@media (min-width: 768px) {
#navibox {
float: right;
background: transparent;
}
}
@media (min-width: 992px) {
#navibox {
}
}
#telefon{
text-align: right;
background-color: #fff;
}
#telefon .navbar-text {
text-align: left;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#telefon p {
font-size: 12px;
line-height: 40px;
font-weight: bold;
color: #4d4d4d;
}
@media (min-width: 768px) {
#telefon .navbar-text {
margin-top: 2px;
margin-right: 0;
float: left;
}
#telefon p {
font-size: 11px;
}
}
@media (min-width: 992px) {
#telefon .navbar-text {
margin-top: 3px;
margin-right: 0;
float: left;
}
#telefon p {
font-size: 13px;
}
}
@media (min-width: 1200px) {
#telefon .navbar-text {
margin-top: 4px;
margin-right: 0;
float: left;
font-size: 15px;
}
#telefon p {
font-size: 14px;
}
}
#logowrap{
background: url(../img/bgeffect.jpg) top repeat-x;
}
@media (min-width: 792px) {
#logowrap .container {
padding: 0 !important;
}
}
#innerlogowrap{
background: url(../img/bgeffect.jpg) top repeat-x;
}
#logo{
padding-top: 15px;
padding-bottom: 15px;
padding-left: 0px !important;
padding-right: 0px !important;
width: 100%;
}
#logo img {
max-width: 100%;
height: auto;
}
@media (min-width: 768px) {
#logo{
padding-top: 0px;
padding-bottom: 0px;
}
#logo img {
max-width: 100%;
height: auto;
}
}
@media (min-width: 992px) {
#logo{
}
#logo img {
max-width: 100%;
height: auto;
}
}
#logo .navbar-brand {
padding: 0px;
float: none;
}
.pointer {
cursor: pointer !important;
}
.nav li {
position: relative;
display: block;
}
.nav li a {
position: relative;
display: block;
padding: 6px 12px;
text-decoration: none;
}
@media (min-width: 768px) {
.nav li a {
padding: 4px 2px;
}
}
@media (min-width: 992px) {
.nav li a {
padding: 5px 4px;
}
}
@media (min-width: 1200px) {
.nav li a{
padding: 6px 13px;
}
}
.navbar {
position: relative;
margin: 0;
border: none;
display: block;
background-color: #fff;
}
.navbar-collapse {
padding-right: 0px;
padding-left: 0px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: none;
/* -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); entfernt hellen strich über toggle-menu*/
box-shadow: none;
}
.hauptnav-toggle-wrap{
text-align: right;
display: inline-block;
margin: 0 auto;
position: absolute;
right: 15px;
top: -42px;
}
/*TOGGLE-SYMBOL*/
#naviwrap .navbar-toggle {
position: relative;
float: none;
padding: 7px;
margin-top: 7px;
margin-right: 0px;
background-color: transparent;
background-image: none;
border: 1px solid #ccc;
border-radius: 3px;
display: inline-block;
}
#naviwrap .togglehead{
color: #fff !important;
display: inline-block !important;
position: absolute;
top: 12px;
right: 47px;
}
@media (min-width: 768px) {
#naviwrap .togglehead{
display:none !important;
}
}
#naviwrap .togglehead p{
color: #4d4d4d !important;
font-size: 12px;
font-weight: bold;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #fff;
}
/* HAUPTNAVIGATION OBEN-------------------------------*/
/* HAUPTNAVIGATION OBEN-------------------------------*/
/* HAUPTNAVIGATION OBEN-------------------------------*/
#naviwrap .navbar-default { /*Navbar-Hintergrundfarbe*/
background-color: inherit;
}
/*AUSGEKLAPPTE TOGGLE-HAUPTNAVIGATION OBEN*/
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #444;
background-color: #fff;
width: 100%;
}
@media (min-width: 768px) {
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
background-color: transparent;
}
}
@media (max-width: 767px) {
#naviwrap .navbar-collapse ul { /*zentriert die ausgeklappte Navigation */
width: 100%;
background-color: #fafafa;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
text-align: center;
border-bottom: 15px solid #fff;
}
#naviwrap .navbar-collapse .navbar-nav > li {/*zentriert die ausgeklappte Navigation */
float: none;
display: block;
width: 100%;
}
#naviwrap .navbar-nav li a {
line-height: 2em;
font-size: 17px;
color: #4d4d4d !important;
}
#naviwrap .navbar-nav li a:hover,
#naviwrap .navbar-nav li a:focus {
line-height: 2em;
font-size: 17px;
color: #fff !important;
}
#naviwrap .navbar-nav > li > a.active {
font-weight: bold;
background-color: #58585a!important;
color: #fff !important;
}
}
/*HORIZONTALE HAUPTNAVIGATION OBEN*/
@media (min-width: 768px) {
#naviwrap .navbar-header { /*deaktiviert navbar-header, indem sich toogle-Menu befindet*/
display: none;
}
#naviwrap .navbar-toggle {
display: none;
}
}
@media (min-width: 768px) {
#naviwrap .navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#naviwrap .navbar-collapse.collapse {
display: block !important;
float: left;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
#naviwrap .navbar-collapse.in {
overflow-y: visible;
}
}
#naviwrap .navbar-nav {
margin: 0 0 0px 0px;
}
@media (min-width: 768px) {
#naviwrap .navbar-nav {
margin: 7px 0px;
}
}
@media (min-width: 992px) {
#naviwrap .navbar-nav {
margin: 7px 0px;
}
}
#naviwrap .navbar-nav {
display: inline-block;
background-color: inherit;
}
#naviwrap .navbar-nav > li { /*zentriert die horizontale Navigation */
float: none !important;
display: inline-block;
}
@media (min-width: 768px) {
#naviwrap .navbar-nav > li > a {
font-size: 12px;
}
}
@media (min-width: 992px) {
#naviwrap .navbar-nav > li > a {
font-size: 15px;
font-weight: bold;
}
}
@media (min-width: 1200px) {
#naviwrap .navbar-nav > li > a {
font-size: 15px;
font-weight: bold;
}
}
#hauptnavigation > ul > li:nth-child(8) > a {
font-weight: bold;
color: #d2021a!important;
text-transform: uppercase;
border: 1px solid #d2021a;
}
#hauptnavigation > ul > li:nth-child(8) > a:hover,
#hauptnavigation > ul > li:nth-child(8) > a:focus {
background-color: #d2021a!important;
color: #fff!important;
}
#naviwrap .navbar-default .navbar-nav > li > a {
color: #4d4d4d;
}
#naviwrap .navbar-default .navbar-nav li a.active,
#naviwrap .navbar-default .navbar-nav li a.active:hover,
#naviwrap .navbar-default .navbar-nav li a.active:focus {
color: #fff;
background-color: #58585a;
cursor: default;
}
#naviwrap .navbar-default .navbar-nav li a:hover,
#naviwrap .navbar-default .navbar-nav li a:focus {
text-decoration: none;
color: #fff;
background-color: #58585a;
}
/* TEASER --------------------------*/
#teaser {
clear: both;
background-color: #ededed;
}
@media (min-width: 768px) {
#teaser {
}
}
#teaser .container {
background-color: #fff;
}
#innerteaser {
clear: both;
background-color: #fff;
text-align: center;
padding-top: 15px;
}
@media (min-width: 768px) {
#innerteaser {
clear: both;
text-align: center;
padding-top: 25px;
}
}
/* HAUPTBEREICH STARTSEITE----------------------------------------*/
/* HAUPTBEREICH STARTSEITE----------------------------------------*/
/* HAUPTBEREICH STARTSEITE----------------------------------------*/
#hauptbereichwrap-start {
width: 100%;
background-color: #ededed;
}
#hauptbereichwrap-start .container{
background-color: #fff;
}
#hauptbereich-start {
clear: both;
padding: 0;
background-color: #fff;
}
@media (min-width: 768px) {
#hauptbereich-start {
padding: 0;
}
}
@media (min-width: 992px) {
#hauptbereich-start {
padding: 0;
}
}
#innerhauptbereich-start {
/* max-width:100%;*/
background-repeat: repeat-x;
background-position: top;
overflow: hidden;
background-color: #fff;
padding: 0 0 15px 0;
}
@media (min-width: 768px) {
#innerhauptbereich-start {
padding: 0 0 25px 0;
}
}
#innerhauptbereich {
padding: 30px 0 15px 0;
}
@media (min-width: 768px) {
#innerhauptbereich {
padding: 40px 0 25px 0;
}
}
/* HAUPTBEREICH----------------------------------------*/
/* HAUPTBEREICH----------------------------------------*/
/* HAUPTBEREICH----------------------------------------*/
#hauptbereichwrap {
width: 100%;
}
@media (min-width: 768px) {
#hauptbereichwrap {
background-color: #ededed;
}
}
@media (min-width: 992px) {
#hauptbereichwrap {
}
}
#hauptbereichwrap .container {
background-color: #fff;
}
#hauptbereich {
clear: both;
background-color: #fff;
}
.quelle {
font-size: 13px;
font-style: italic;
margin-top: 1em;
}
.kontaktaufruf {
margin-top: 4em;
margin-bottom: 3em;
}
.nachoben {
text-align: right;
margin-top: 4em;
margin-bottom:0em;
color: #fff;
}
.nachoben-start {
margin-bottom: 0em !important;
}
.nachoben a {
text-decoration: none;
color: #fff;
text-align: center;
padding: 6px 10px;
background: #58585a;
width: 100px;
}
.nachoben a:hover,
.nachoben a:focus {
background: #adadad;
}
/* PRODUKTSEITE LAYOUT----------------------------------*/
/* PRODUKTSEITE LAYOUT----------------------------------*/
/* PRODUKTSEITE LAYOUT----------------------------------*/
@media (min-width: 992px) {
.produktseite .col-md-3 {
padding-right: 8px !important; /*entfernt rechtes col-padding und fügt hinzu = Rand*/
}
}
@media (min-width: 1200px) {
.produktseite .col-md-3 {
padding-right: 8px !important; /*entfernt rechtes col-padding und fügt hinzu = Rand*/
}
}
/* SIDEBAR ---------------------------------------------*/
/* SIDEBAR ---------------------------------------------*/
/* SIDEBAR ---------------------------------------------*/
#sidebar h1 {
margin-top: 0px;
margin-bottom: 0px;
}
@media (min-width: 992px) {
#sidebar h1 {
margin-top: 0px;
margin-bottom: 34px;
}
}
#sidebar .sidebarnavititle {
font-size: 26px;
font-weight: bold;
color: inherit;
text-decoration: none;
}
@media (min-width: 1200px) {
#sidebar a.sidebarnavititle {
font-size: 28px;
}
}
#sidebar .navbar-default { /*Navbar-Hintergrundfarbe*/
background-color: inherit;
margin-bottom: 1em; /*Abstand unter Produktmenü*/
}
#sidebar ul {
margin: 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
/* Ebene 1: Fenster, Türen...*/
#sidebar ul li a{
color: inherit;
font-size:16px;
}
/* Ebene 2*/
#sidebar ul li ul li a{
color: inherit;
font-size: 14px;
}
/* Ebene 3*/
#sidebar ul li ul li ul li a{
color: inherit;
font-size: 14px;
}
/* Ebene 4*/
#sidebar ul li ul li ul li ul li a{
color: inherit;
font-size: 13px;
}
@media (min-width: 1200px) {
/* Ebene 1: Fenster, Türen...*/
#sidebar ul li a{
font-size: 21px;
}
/* Ebene 2*/
#sidebar ul li ul li a{
font-size: 19px;
}
/* Ebene 3*/
#sidebar ul li ul li ul li a{
font-size: 19px;
}
/* Ebene 4*/
#sidebar ul li ul li ul li ul li a{
font-size: 18px;
}
}
#sidebar .nav li a {
padding: 9px 18px 9px 12px !important;
}
#sidebar .nav li a.nav-zwei {
padding: 9px 5px 9px 16px !important;
}
#sidebar .nav li ul li a.nav-drei {
padding: 6px 18px 6px 30px !important;
}
#sidebar .nav li ul li ul li a.nav-vier {
padding: 9px 18px 9px 42px !important;
}
#sidebar .nav li a.active, /* Aktives Navi-Element außerhalb der grauen Box*/
#sidebar .nav li a.active:hover,
#sidebar .nav li a.active:focus {
color: #fff;
font-weight: bold;
background-color: #58585a;
cursor: default;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#sidebar .nav li a:hover, /* Hover außerhalb der grauen Box in Templatefarbe */
#sidebar .nav li a:focus {
color: #fff;
font-weight: bold;
background-color: #58585a;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#sidebar .nav-pills li {
font-weight: normal;
}
#sidebar .nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
/* graue Box*/
ul.produkthauptseite { /* graue Box auf Produkthauptseite* */
background-color: #f0f0f0;
border-radius: 0px;
}
#sidebar .nav .grau { /*regelt border-radius der kompletten grauen Box*/
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background-color: #f0f0f0;
}
#sidebar .nav li.grau > a.active,
#sidebar .nav li.grau > a.active:hover,
#sidebar .nav li.grau > a.active:focus { /*regelt obersten Punkt der grauen Box, wenn active*/
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
border-radius: 0px 0px 0 0;
background-color: #d2021a;
}
#sidebar .nav li.grau ul li a.active { /*regelt alle mittleren aktiven Punkte*/
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
text-decoration: none; /*betrifft alle aktiven Punkte*/
}
#sidebar .nav li.grau a.lastgrau,
#sidebar .nav li.grau a.lastgrau:hover,
#sidebar .nav li.grau a.lastgrau:focus { /*regelt border-radius des letzten Unterpunktes der grauen Box*/
-moz-border-radius: 0 0 0px 0px !important;
-webkit-border-radius: 0 0 0px 0px !important;
border-radius: 0 0 0px 0px !important;
}
#sidebar .nav li.grau a:hover, /*regelt Hover innerhalb der grauen Box */
#sidebar .nav li.grau a:focus {
font-weight: normal;
text-decoration: none;
color: inherit;
background-color: #e3e3e3;
-moz-border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
#sidebar .nav li.grau a.active,
#sidebar .nav li.grau a.active:hover, /*regelt Hover innerhalb der grauen Box */
#sidebar .nav li.grau a.active:focus {
font-weight: bold;
text-decoration: none;
color: #fff;
background-color: #58585a;
-moz-border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
#sidebar .nav li.grau > a:hover,
#sidebar .nav li.grau > a:focus { /*regelt Hover des obersten Punkt der grauen Box*/
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
border-radius: 0px 0px 0 0;
}
#sidebar .nav .hellgrau {
background-color: #fafafa;
}
#sidebar .nav li a.activeparent, /*regelt den Elternlink des aktiven li (in der grauen Box)*/
#sidebar .nav li a.activeparent:hover,
#sidebar .nav li a.activeparent:focus {
cursor: pointer;
font-weight: bold;
}
/*SIDEBAR-TOGGLE*/
@media (min-width: 992px) {
#sidebar .navbar-header { /*deaktiviert navbar-header, indem sich toogle-Menu befindet*/
display: none;
}
}
/*SYMBOL*/
.produktauswahl-toggle-wrap {
width: 185px;
text-align: left;
display: inline-block;
}
@media (min-width: 992px) {
#sidebar .produktauswahl-toggle-wrap{
display:none !important;
}
}
#sidebar .navbar-toggle {
position: relative;
float: left;
padding: 7px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
background-color: transparent;
background-image: none;
border: 1px solid #ccc;
border-radius: 3px;
display: inline-block;
}
#sidebar .togglehead{
color: inherit !important;
margin-left: 8px;
display: inline-block !important;
position: absolute;
top: 5px;
}
#sidebar .togglehead p{
color: inherit !important;
font-size: 16px;
font-weight: bold;
}
/*AUSGEKLAPPTE TOGGLE-PRODUKTNAVIGATION SIDEBAR*/
@media (max-width: 991px) {
#sidebar .navbar-collapse { /*Navbar-Hintergrundfarbe*/
background-color: inherit;
margin-bottom: 40px; /*Abstand unter dem ausgeklappten Produktmenü*/
}
#sidebar .navbar-collapse ul { /*zentriert die ausgeklappte Navigation */
width: 100%;
background-color: #fafafa; /* bei ausgeklappter Produktnavi: macht desamte Box hellgrau */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#sidebar .navbar-collapse .navbar-nav > li { /*zentriert die ausgeklappte Navigation */
float: none;
display: block;
width: 100%;
}
#sidebar .navbar-collapse ul li.grau a { /* bei ausgeklappter Produktnavi: macht graue Box etwas dunkler */
background-color: #f0f0f0;
}
#sidebar .navbar-collapse ul li.grau ul li + li { /*entfernt 2px Abstand innerhalb der grauen Box, durch den der hellere Jintergrund durchkam */
margin-top: 0px !important;
}
#sidebar .nav > li > a.nav-zwei {
padding: 9px 18px 9px 30px !important;
}
#sidebar .nav > li > ul > li> a.nav-drei {
padding: 6px 18px 6px 40px !important;
}
#sidebar .nav > li > ul > li> ul > li> a.nav-vier {
padding: 9px 18px 9px 45px !important;
}
}
#sidebarlogo{
width: 100px;
height: 38px;
text-align: right;
position: absolute;
right: 20px;
top: -2px;
}
@media (min-width: 992px) {
#sidebarlogo{
text-align: center;
width: 100%;
height: auto;
position: relative;
right: 0;
top: 0;
margin-top: 50px;
}
}
#sidebar img {
max-width: 100%;
max-height: 100%;
text-align: right;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@media (min-width: 992px) {
#sidebar img {
max-height: 100%;
max-width: 100%;
margin: 0 auto;
text-align: center;
position: relative;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
/* CONTENT --------------------------------------------*/
/* CONTENT --------------------------------------------*/
/* CONTENT --------------------------------------------*/
#contentfull-img {
width: 100%;
padding: 0;
}
#contentfull-start {
padding: 0;
}
@media (min-width: 992px) {
#contentfull-start {
}
}
@media (min-width: 1200px) {
#contentfull-start {
}
}
/* PRODUKTSUBNAVIGATION ------------------------------------------------- */
nav.produktsubnav {
width: 100%;
}
nav.produktsubnav::after {
display: block;
clear: both;
content: "";
}
nav.produktsubnav ul {
width: 100%;
float: left;
margin: 10px 0 20px 0;
padding-bottom: 10px;
border-bottom: #ccc 2px solid;
line-height: 1.5em;
}
@media (min-width: 768px) {
nav.produktsubnav ul {
width: 100%;
float: left;
margin: 10px 0 30px 0;
padding-bottom: 15px;
border-bottom: #ccc 2px solid;
}
}
/*RSP*/
nav.produktsubnav ul li{
float:left;
display: inline;
background-color: #f2f2f2;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
nav.produktsubnav ul li.produktsub1{
width: 32%;
}
nav.produktsubnav ul li.produktsub2{
width: 32%;
margin-left: 2% !important;
}
nav.produktsubnav ul li.produktsub3{
width: 32%;
margin-left: 2% !important;
}
nav.produktsubnav ul li.produktsub4{
width: 49%;
margin-top: 15px;
}
nav.produktsubnav ul li.produktsub5{
width: 49%;
margin-top: 15px;
margin-left: 2% !important;
}
nav.produktsubnav .nav-pills > li + li {
margin-left: 0;
}
@media (min-width: 768px) {
nav.produktsubnav ul li{
float:left;
display: inline;
background-color: #f0f0f0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
nav.produktsubnav ul li.produktsub1{
width: 13.2%;
}
nav.produktsubnav ul li.produktsub2{
width: 20.2%;
}
nav.produktsubnav ul li.produktsub3{
width: 20.2%;
margin-top: 0px;
}
nav.produktsubnav ul li.produktsub4{
width: 20.2%;
margin-top: 0px;
}
nav.produktsubnav ul li.produktsub5{
width: 20.2%;
margin-top: 0px;
}
nav.produktsubnav .nav-pills > li + li {
margin-left: 1% !important;
}
}
nav.produktsubnav ul li a{
color: inherit;
font-size: 12px;
text-align: center;
text-decoration: none;
}
@media (min-width: 768px) {
nav.produktsubnav ul li a{
color: inherit;
font-size: 15px;
text-align: center;
}
}
nav.produktsubnav ul.nav > li > a {
padding: 6px 8px !important;
}
@media (min-width: 991px) and (max-width: 1199px){
nav.produktsubnav ul.nav > li > a {
padding: 6px 7px !important;
}
}
nav.produktsubnav .nav-pills li {
font-weight: bold;
}
nav.produktsubnav ul.nav li a:hover,
nav.produktsubnav ul.nav li a:focus {
background-color: transparent;
text-decoration: underline;
border-radius: 0px;
}
nav.produktsubnav ul.nav li a.active,
nav.produktsubnav ul.nav li a.active:hover,
nav.produktsubnav ul.nav li a.active:focus {
color: #fff;
background-color: var(--templatefarbe_hex);
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
text-decoration: none;
cursor: default;
}
.sichtbar {
display: block !important;
}
.unsichtbar {
display: none !important;
}
.nav-pills li {
cursor: pointer;
}
/* NEUES GRÖßERES NAVPILL MENÜ */
nav.produktsubnavbig {
width: 100%;
}
nav.produktsubnavbig ul li a {
background-color: #f2f2f2;
}
nav.produktsubnavbig ul li{
float:left;
display: inline;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
padding-bottom: 10px;
}
nav.produktsubnavbig .nav-pills > li + li {
margin-left: 0;
}
@media (min-width: 768px) {
nav.produktsubnavbig ul li{
float:left;
display: inline;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
padding-bottom: 15px;
}
nav.produktsubnavbig ul li a{
background-color: #f0f0f0;
}
}
nav.produktsubnavbig ul li a{
color: inherit;
font-size: 12px;
text-align: center;
text-decoration: none;
}
@media (min-width: 768px) {
nav.produktsubnavbig ul li a{
color: inherit;
font-size: 15px;
text-align: center;
}
}
nav.produktsubnavbig ul.nav > li > a {
padding: 6px 8px !important;
}
@media (min-width: 991px) and (max-width: 1199px){
nav.produktsubnavbig ul.nav > li > a {
padding: 6px 7px !important;
}
}
nav.produktsubnavbig .nav-pills li {
font-weight: bold;
}
nav.produktsubnavbig ul.nav li a:hover,
nav.produktsubnavbig ul.nav li a:focus {
background-color: #e6e6e6;
text-decoration: underline;
border-radius: 0px;
}
nav.produktsubnavbig ul.nav li a.active,
nav.produktsubnavbig ul.nav li a.active:hover,
nav.produktsubnavbig ul.nav li a.active:focus {
color: #fff;
background-color: var(--templatefarbe_hex);
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
text-decoration: none;
cursor: default;
}
/* PRODUKTSUBNAVIGATION ENDE */
/* KONTAKT------------------------------------------------*/
/* KONTAKT------------------------------------------------*/
/* KONTAKT------------------------------------------------*/
label {
display: inline-block;
max-width: 100%;
margin-top: 10px;
margin-bottom: 5px;
font-weight: bold;
}
span.rechnung {
margin-left: 15px;
font-size: 1.1em;
}
.form-control {
border-color: #4d4d4d;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.form-control:focus {
border-color: #d2021a;
border-width: 1px;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-kontakt {
background:#d2021a;
border-color: transparent;
color: #fff;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
box-shadow: none;
}
.sendbutton button {
color: #fff;
font-weight: normal;
}
.sendbutton .btn:hover,
.sendbutton .btn:focus {
color: #fff;
font-weight: normal;
text-decoration: none;
}
.btn-kontakt:hover,
.btn-kontakt:focus {
background-color: #999;
background-position: 0 -15px;
}
.btn-kontakt:active,
.btn-kontakt.active {
background-color: #ccc;
border-color: #dbdbdb;
}
labelred {
font-size: 0.9em;
color: #F00;
}
/* Dieser Abschnitt ist fuer das Skript wichtig */
.form input, .form textarea {
position: static !important;
display: block !important;
speak: normal !important;
}
#error-Box {
border: 0.01em solid #f00;
background: #f1e7e6;
font-weight: bold;
color: #f00;
padding: 0.5em;
text-align: center;
margin-bottom: 1em;
font-size: 0.8em;
}
/* neuer markilux-konfigurator 2021 */
#markilux-konfigurator div.youtube {
width: 100%!important;
height: 650px!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
@media (min-width: 768px) {
#markilux-konfigurator div.youtube {
width: 100%!important;
height: 650px!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
}
@media (min-width: 992px) {
#markilux-konfigurator div.youtube {
width: 100%!important;
height: 700px!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
}
@media (min-width: 1200px) {
#markilux-konfigurator div.youtube {
width: 100%!important;
height: 750px!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
}
/* cookiebanner DSGVO 2020/2021 */
.cookieConsentContainer {
z-index: 9500;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: #242424;
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a,
.cookieConsentContainer .cookieTitle a:hover {
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 22px;
line-height: 20px;
display: block;
cursor: auto;
text-decoration: none;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 15px;
line-height: 20px;
display: block;
margin-top: 10px;
} .cookieConsentContainer .cookieDesc a {
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
text-decoration: underline;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
font-family: OpenSans, arial, "sans-serif";
color: #0F0F0F;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: #ccc;
box-sizing: border-box;
padding: 10px 14px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover {
cursor: pointer;
background: #eee;
}
@media (max-width: 991px) {
.cookieConsentContainer {
bottom: 0px !important;
left: 0px !important;
width: 100% !important;
}
}
/* start consent-tools DSGVO 2020/2021 */
.yt-video-consent-wrapper,
.vimeo-video-consent-wrapper,
.markilux-banner-consent-wrapper,
.markilux-configurator-consent-wrapper,
.markilux-consent-wrapper,
.neutral1-consent-wrapper,
.neutral2-consent-wrapper {
padding: 15px 15px 5px 15px;
background-color: #EFEFEF;
}
.yt-video-consent-wrapper-pic,
.vimeo-video-consent-wrapper-pic,
.markilux-banner-consent-wrapper-pic,
.markilux-configurator-consent-wrapper-pic,
.markilux-consent-wrapper-pic,
.neutral1-consent-wrapper-pic,
.neutral2-consent-wrapper-pic {
cursor: pointer;
max-width: 100%;
height: auto;
}
.yt-video-consent-check-wrap,
.vimeo-video-consent-check-wrap,
.markilux-banner-consent-check-wrap,
.markilux-configurator-consent-check-wrap,
.markilux-consent-check-wrap,
.neutral1-consent-check-wrap,
.neutral2-consent-check-wrap {
padding: 0px 15px 15px 15px;
background-color: #EFEFEF;
margin-bottom: 30px;
}
.yt-video-consent-text,
.vimeo-video-consent-text,
.markilux-banner-consent-text,
.markilux-configurator-consent-text,
.markilux-consent-text,
.neutral1-consent-text,
.neutral2-consent-text {
width: 100%;
height: auto;
}
.yt-video-consent-text p,
.vimeo-video-consent-text p,
.markilux-banner-consent-text p,
.markilux-configurator-consent-text p,
.markilux-consent-text p,
.neutral1-consent-text p,
.neutral2-consent-text p {
margin: auto;
}
.yt-video-consent-wrapper iframe,
.vimeo-video-consent-wrapper iframe,
.markilux-banner-consent-wrapper iframe,
.markilux-configurator-consent-wrapper iframe,
.markilux-consent-wrapper iframe,
.neutral1-consent-wrapper iframe,
.neutral2-consent-wrapper iframe {
height: 0px;
width: 0px;
}
/* end consent-tools */
/* DATENSCHUTZERKLÄRUNG--------------------------------------*/
.datenschutzdiv h2 {
margin-top: 3.5em !important;
margin-bottom: 0.1em !important;
}
.datenschutzdiv h3 {
margin-top: 2.5em !important;
margin-bottom: 0.5em !important;
}
/* FROALA VEREINH.
------------------------------------------------- */
.fr-view .fr-file::after {
content: none!important;
}
.fr-popup .fr-input-line input[type="text"],
.fr-popup .fr-input-line textarea {
font-size: 16px !important;
height: 70px !important;
}
#froala-editor ul { /* Resettet den Abstand der Listen so dass man die Zahlen sieht und die Bullets eingerückt sind */
padding: 0 0 1.5em 1.5em;
}
#froala-editor ol {
padding: 0 0 1.5em 2.5em;
}
.fr-view h2,
.fr-view h3,
.fr-view h4,
.startnews h2,
.startnews h3,
.startnews h4 {
margin-top: 0 !important;
}
.fr-view iframe {
width: 100%;
display: block;
}
/* FROALA VEREINH. ENDE */
/* FROALA */
.fr-popup .fr-input-line input[type="text"],
.fr-popup .fr-input-line textarea {
font-size: 16px !important;
height: 70px !important;
}
@media (max-width: 767px) {
.fr-view img {
width: 100% !important;
}
}
/* AKTUELLES
------------------------------------------------- */
div.rand {
width: 700px;
padding: 10px;
border-left-style: solid;
border-left-width: 20px;
border-left-color: #F6F6F2;
background-color: white;
text-align: left;
}
input.mini {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: gray;
border-style: dashed;
border-width: 1px;
border-color: #F6F6F2;
font-size: 8pt;
}
.linie {
border-top-style: solid;
border-top-width: 1px;
border-color: silver;
}
table {
background-color: white;
}
input.area {
font-family: Arial, Helvetica, Geneva, sans-serif;
border: inherit solid 1px;
width: 180px;
font-size: 0.9em;
padding: 5px;
margin: 0;
margin-top: 5px;
color: #333;
line-height: 0.9em;
}
input.areaheadline {
font-family: Arial, Helvetica, Geneva, sans-serif;
border: inherit solid 1px;
width: 360px;
font-size: 0.9em;
padding: 5px;
margin: 0;
margin-top: 5px;
color: #333;
line-height: 0.9em;
}
.red {
color: #F00;
}
#news h2,
.startnews h2{
margin-bottom: 0.6em;
}
#news h3,
.startnews h3{
margin-bottom: 0.4em;
}
#news p {
line-height: 1.5em;
}
.headline {
font-weight: bold;
margin-top: 0.2em !important;
}
.headline2 {
font-size: 16px !important;
font-weight: bold;
}
.bildunterschrift {
text-align: center !important;
font-size: 12px !important;
display: block !important;
margin-top: -10px;
}
.deleteformat {
text-align: left !important;
font-size: 14px !important;
font-weight: normal !important;
}
.newsli {
margin-top: 2em;
margin-bottom: 4em;
padding: 1em;
background: rgb(240,240,240);
background: -moz-linear-gradient(170deg, rgba(var(--boxverlauf_dunkel_rgb),1) 0%, rgba(var(--boxverlauf_hell_rgb),1) 79%);
background: -webkit-linear-gradient(170deg, rgba(var(--boxverlauf_dunkel_rgb),1) 0%, rgba(var(--boxverlauf_hell_rgb),1) 79%);
background: linear-gradient(170deg, rgba(var(--boxverlauf_dunkel_rgb),1) 0%, rgba(var(--boxverlauf_hell_rgb),1) 79%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1);
}
.startseite .newsli {
margin-bottom: 2em;
}
.listNews a:link,
.listNews a:visited,
.listNews a:hover,
.listNews a:active,
.listNews a:focus {
outline: none;
color: inherit;
text-decoration: underline;
}
.listNews {
list-style-type: none;
}
ul.listNews {
margin: 0;
}
.datumsangabe {
color: var(--templatefarbe_hex);
margin: 0 !important;
}
.autor {
font-size: 14px !important;
line-height: 1.4em;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: inherit;
padding-bottom: 8px;
font-style: italic;
margin: 0 !important;
}
/* AKTUELLES ENDE */
/* STARTNEWS */
/* STARTNEWS */
/* STARTNEWS */
#startnews {
background-color: #f9f9f9;
padding: 15px;
margin-bottom: 30px;
}
@media (min-width: 768px) {
#startnews {
padding: 30px;
margin-bottom: 60px;
}
}
#startnews h2,
#startnews .h2 {
font-size:21px;
}
@media (min-width: 1200px) {
#startnews h2,
#startnews .h2 {
font-size:24px;
}
}
#startnews h2 {
margin-top: 0;
}
#startnews h4 {
margin-top: 1em;
border-top: 2px solid #c1c1c1;
padding-top: 3em;
}
#startnews h4:first-of-type {
border-top: 2px none;
padding-top: 1em;
}
/* TINY ---------------------------------------------*/
/* TINY ---------------------------------------------*/
/* TINY ---------------------------------------------*/
.tinyhinweis{
font-size: 12px !important;
font-style: italic;
font-weight: bold;
}
.tinybildbox {
text-align: center;
}
.tinybild{
margin: 0 auto;
padding: 0;
max-width: 100%;
height: auto;
}
/* GOOGLE MAPS---------------------------------------------*/
/* GOOGLE MAPS---------------------------------------------*/
/* GOOGLE MAPS---------------------------------------------*/
#googlemap iframe{
width: 100%;
height: 350px;
border: none;
margin: 0;
}
@media (min-width: 768px) {
#googlemap iframe{
height: 560px;
}
}
/* SLIDEBOX ---------------------------------------------*/
/* SLIDEBOX ---------------------------------------------*/
/* SLIDEBOX ---------------------------------------------*/
#slidebox{
width:315px;
padding:35px 15px 30px 30px;
background-color:#fff;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow: 0px 0px 3px #4d4d4d;
-webkit-box-shadow: 0px 0px 3px #4d4d4d;
box-shadow: 0px 0px 3px #4d4d4d;
behavior: url(/js/pie/PIE.htc);
z-index: 150;
}
#slidebox p {
font-size:13px;
font-weight: bold;
text-transform:uppercase;
font-family: Arial, Helvetica, Geneva, sans-serif;
letter-spacing:1px;
line-height: 1.5;
color:inherit;
}
#slidebox img {
margin: 5px 0 20px 0;
}
a.more{
font-size:11px;
font-weight: bold;
text-transform:uppercase;
font-family: Arial, Helvetica, Geneva, sans-serif;
letter-spacing:1px;
line-height: 1.5;
color:inherit;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color:#58585a;
font-size:18px;
line-height: 1.3;
margin:10px 20px 10px 0px;
}
a.closebutton{
background:transparent url(../../img/slidebox/closebutton.gif) no-repeat top left;
width:80px;
height:20px;
position:absolute;
cursor:pointer;
top:10px;
right:10px;
}
a.closebutton:hover{
}
/* SITEMAP----------------------------------------------*/
/* SITEMAP----------------------------------------------*/
/* SITEMAP----------------------------------------------*/
#sitemapliste ul {
margin: 0;
}
#sitemapliste a {
line-height: 1.7em;
}
.sitemap1, .sitemap2, .sitemap3, .sitemap4, .sitemap5 ,.sitemap6, .sitemap7, .sitemap8 {
list-style-type: none;
}
.sitemap1 a, .sitemap2 a, .sitemap3 a, .sitemap4 a, .sitemap5 a, .sitemap6 a, .sitemap7 a, .sitemap8 a {
color: inherit;
}
.sitemap1 {
margin-left: 0;
font-size: 1.2em;
line-height: 1.4em;
}
.sitemap2 {
margin-left: 1em;
font-size: 1.1em;
line-height: 1.4em;
}
.sitemap3 {
margin-left: 2em;
font-size: 1em;
line-height: 1.4em;
}
.sitemap4 {
margin-left: 3em;
font-size: 1em;
line-height: 1.4em;
}
.sitemap5 {
margin-left: 4em;
font-size: 1em;
line-height: 1.4em;
}
.sitemap6 {
margin-left: 5em;
font-size: 1em;
line-height: 1.4em;
}
.sitemap7 {
margin-left: 6em;
font-size: 0.95em;
line-height: 1.4em;
}
.sitemap8 {
margin-left: 7em;
font-size: 0.9em;
line-height: 1.4em;
}
/* ENDE SITEMAP*/
/* FOOTER----------------------------------------------------*/
/* FOOTER----------------------------------------------------*/
/* FOOTER----------------------------------------------------*/
#footer {
width: 100%;
background: url(../img/bgeffect.jpg) top repeat-x;
}
#innerfooter {
background: url(../img/bgeffect.jpg) top repeat-x;
padding: 0 0px;
}
@media (min-width: 768px) {
#innerfooter {
background: url(../img/bgeffect.jpg) top repeat-x;
padding: 0 0px;
}
}
#footer .list-inline > li {
display: inline-block;
padding-right: 4px;
padding-left: 4px;
}
#footer ul {
text-align: center;
}
#footer p {
font-size: 12px;
line-height: 1.5em;
color: #fff;
margin-bottom:0;
margin-top: 12px;
margin-left: 0px;
text-align: center;
}
@media (min-width: 1200px) {
#footer ul {
text-align: right;
}
#footer p {
text-align: left;
}
}
.adresse {
margin-bottom: 25px;
}
@media (min-width: 1200px) {
.adresse {
margin-bottom: 0px;
}
}
/* BUTTON FOOTER */
#footer .btn {
display: inline-block;
padding: 5px 8px;
margin-bottom: 0;
font-size: 13px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-decoration: none;
}
#footer .btn-footer {
color: #fff;
}
@media (min-width: 1200px) {
#footer .btn,
#footer .btn-footer {
font-size: 15px;
}
}
#footer .btn-footer:hover,
#footer .btn-footer:focus,
#footer .btn-footer.focus,
#footer .btn-footer:active,
#footer .open > .dropdown-toggle.btn-footer {
color: inherit;
background-color: #fff;
border-color: #fff;
cursor: pointer;
}
#footer .btn-footer.active {
color: inherit;
background-color: #fff;
border-color: #fff;
cursor: default;
}
.adresse p {
font-size: 12px;
margin-top: 13px;
line-height: 1.5em;
margin-bottom:0;
text-align: center;
font-weight: bold;
}
@media (min-width: 1200px) {
.adresse p {
font-size: 15px!important;
}
}
/* SLIDESHOW TEXTBOX----------------------------------------------------*/
/* SLIDESHOW TEXTBOX----------------------------------------------------*/
/* SLIDESHOW TEXTBOX----------------------------------------------------*/
#slider-container .ws-title {
background:#58585a; /*Templatefarbe*/
}
.produktslider {
margin-top: 2em !important;
margin-bottom: 4em !important;
}
.produktslider a{
cursor: default;
}
/*COLORBOX CSS*/
/* --------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------- */
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../../img/colorboximages/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(../../img/colorboximages/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(../../img/colorboximages/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(../../img/colorboximages/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(../../img/colorboximages/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(../../img/colorboximages/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(../../img/colorboximages/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(../../img/colorboximages/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(../../img/colorboximages/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px; margin-top: 60px;}
#cboxTitle{position:absolute; top:4px; left:0; text-align:center; width:100%; color:#666;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(../../img/colorboximages/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../../img/colorboximages/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(../../img/colorboximages/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(../../img/colorboximages/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; top:0; right:0; background:url(../../img/colorboximages/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*SLIDER STYLE CSS*/
/* --------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------- */
/*
* generated by WOW Slider 7.6
* template Shady
*/
#slider-container {
display: table;
zoom: 1;
position: relative;
width: 100%;
/* max-width: 1060px;*/
max-width: 100%;
/* max-height:516px;*/
max-height: 600px;
z-index:90;
text-align:left; /* reset align=center */
font-size: 10px;
text-shadow: none; /* fix some user styles */
/* reset box-sizing (to boostrap friendly) */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
* html #slider-container{ width:1060px }
#slider-container .ws_images ul{
position:relative;
width: 10000%;
height:100%;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#slider-container .ws_images ul li{
position: relative;
width:1%;
height:100%;
line-height:0; /*opera*/
overflow: hidden;
float:left;
/*font-size:0;*/
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#slider-container .ws_images{
position: relative;
left:0;
top:0;
height:100%;
/* max-height:516px;*/
max-height: 600px;
/* max-width: 1060px;*/
max-width: 100%;
vertical-align: top;
border:none;
overflow: hidden;
}
#slider-container .ws_images ul a{
width:100%;
height:100%;
max-height:516px;
display:block;
color:transparent;
}
#slider-container img{
max-width: none !important;
}
#slider-container .ws_images .ws_list img,
#slider-container .ws_images > div > img{
width:100%;
border:none 0;
max-width: none;
padding:0;
margin:0;
}
#slider-container .ws_images > div > img {
/* max-height:516px;*/
max-height: 600px;
}
#slider-container .ws_images iframe {
position: absolute;
z-index: -1;
}
#slider-container .ws-title > div {
display: inline-block !important;
}
#slider-container a{
text-decoration: none;
outline: none;
border: none;
}
#slider-container .ws_bullets {
float: left;
position:absolute;
z-index:70;
}
#slider-container .ws_bullets div{
position:relative;
float:left;
font-size: 0px;
}
/* compatibility with Joomla styles */
#slider-container .ws_bullets a {
line-height: 0;
}
#slider-container .ws_script{
display:none;
}
#slider-container sound,
#slider-container object{
position:absolute;
}
/* prevent some of users reset styles */
#slider-container .ws_effect {
position: static;
width: 100%;
height: 100%;
}
#slider-container .ws_photoItem {
background: #fff;
}
#slider-container .ws_photoItem > div {
left: 2em;
right: 2em;
top: 2em;
bottom: 2em;
}
#slider-container.ws_gestures {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT/v/n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe/tTRGCGogLk02tFctiW/SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII="), move;
}
#slider-container.ws_gestures.ws_grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move;
}
/* hide controls when video start play */
#slider-container.ws_video_playing .ws_bullets {
display: none;
}
#slider-container.ws_video_playing:hover .ws_bullets {
display: block;
}
/* IE fix because it don't show controls on hover if frame visible */
#slider-container.ws_video_playing_ie .ws_bullets,
#slider-container.ws_video_playing_ie a.ws_next,
#slider-container.ws_video_playing_ie a.ws_prev {
display: block;
}
/* youtube/vimeo buttons */
#slider-container .ws_video_btn {
position: absolute;
display: none;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 55;
}
#slider-container .ws_video_btn.ws_youtube,
#slider-container .ws_video_btn.ws_vimeo {
display: block;
}
#slider-container .ws_video_btn div {
position: absolute;
background-image: url(./playvideo.png);
background-size: 200%;
top: 50%;
left: 50%;
width: 7em;
height: 5em;
margin-left: -3.5em;
margin-top: -2.5em;
}
#slider-container .ws_video_btn.ws_youtube div {
background-position: 0 0;
}
#slider-container .ws_video_btn.ws_youtube:hover div {
background-position: 100% 0;
}
#slider-container .ws_video_btn.ws_vimeo div {
background-position: 0 100%;
}
#slider-container .ws_video_btn.ws_vimeo:hover div {
background-position: 100% 100%;
}
#slider-container .ws_playpause.ws_hide {
display: none !important;
}
#slider-container .ws_bullets {
padding: 10px;
}
#slider-container .ws_bullets a {
margin-left:4px;
width:22px;
height:20px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
color:transparent;
}
#slider-container .ws_bullets a.ws_selbull, #slider-container .ws_bullets a:hover{
background-position: 0 100%;
}
#slider-container a.ws_next, #slider-container a.ws_prev {
background-size: 200%;
position:absolute;
top:50%;
margin-top:-2.8em;
z-index:60;
height: 5em;
width: 5.1em;
background-image: url(../js/slider/arrows.png);
/*max-height:20%;
max-width:12%;
background-size:200% 200%;*/
opacity: 0.5; /*RNWK*/
}
#slider-container a.ws_next{
background-position: 100% 0;
right:1em;
}
#slider-container a.ws_prev {
left:1em;
background-position: 0 0;
}
#slider-container a.ws_next:hover{
background-position: 100% 100%;
}
#slider-container a.ws_prev:hover {
background-position: 0 100%;
}
/*playpause*/
#slider-container .ws_playpause {
width: 5.1em;
height: 5em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -2.5em;
margin-top: -2.5em;
z-index: 59;
}
#slider-container .ws_pause {
background-size: 100%;
background-image: url(./pause.png);
}
#slider-container .ws_play {
background-size: 100%;
background-image: url(./play.png);
}
#slider-container .ws_pause:hover, #slider-container .ws_play:hover {
background-position: 100% 100% !important;
}/* top right*/
#slider-container .ws_bullets {
top:0;
right: 0;
}
#slider-container .ws-title{ /* obere Überschrift */
position: absolute;
font: 12px Arial, Helvetica, sans-serif;
z-index: 50;
padding:0.7em 1.5em 0.7em 0.7em;
color: #ffffff;
text-transform:uppercase;
line-height: 1em;
opacity:1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
text-align: left; /*RNWK*/
margin-right:0em; /*RNWK margin-right:0.7em;*/
bottom:0%; /*RNWK bottom:15%;*/
left: 0; /*RNWK left: 0;*/
cursor: default; /*RNWK*/
font-weight: normal !important; /*RNWK*/
box-sizing: content-box; /*RNWK, damit box nicht springt - überschreibt bootstrap-standard*/
}
#slider-container .ws-title .h3{
font-weight: normal !important; /*RNWK*/
font-size: 11px !important; /*RNWK*/
}
@media (min-width: 480px) { /* 2. Überschrift */
#slider-container .ws-title{
font: 16px Arial, Helvetica, sans-serif;
opacity:0.9;
}
#slider-container .ws-title .h3{
font-size: 13px !important; /*RNWK*/
}
}
@media (min-width: 768px) { /* 2. Überschrift */
#slider-container .ws-title{
font: 19px Arial, Helvetica, sans-serif;
opacity:0.9;
}
#slider-container .ws-title .h3{
font-size: 16px !important; /*RNWK*/
}
}
@media (min-width: 992px) { /* 2. Überschrift */
#slider-container .ws-title{
font: 23px Arial, Helvetica, sans-serif;
opacity:0.9;
}
#slider-container .ws-title .h3{
font-size: 19px !important; /*RNWK*/
}
}
#slider-container .ws-title .h3{
font-weight: normal !important; /*RNWK*/
}
#slider-container .ws-title a:hover, /*RNWK*/
#slider-container .ws-title a:focus{
color: #ffffff !important;
}
#slider-container .ws-title div{
padding-top:0.4em;
font-size: 0.722em;
text-transform:none;
}#slider-container .ws_images > ul{
animation: wsBasic 17.1s infinite;
-moz-animation: wsBasic 17.1s infinite;
-webkit-animation: wsBasic 17.1s infinite;
}
@keyframes wsBasic{0%{left:-0%} 16.96%{left:-0%} 33.33%{left:-100%} 50.29%{left:-100%} 66.67%{left:-200%} 83.63%{left:-200%} }
@-moz-keyframes wsBasic{0%{left:-0%} 16.96%{left:-0%} 33.33%{left:-100%} 50.29%{left:-100%} 66.67%{left:-200%} 83.63%{left:-200%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 16.96%{left:-0%} 33.33%{left:-100%} 50.29%{left:-100%} 66.67%{left:-200%} 83.63%{left:-200%} }
#slider-container .ws_bulframe div div{
height: auto;
}
@media all and (max-width:760px) {
#slider-container .ws_fullscreen {
display: block;
}
}
@media all and (max-width:400px){
#slider-container .ws_controls,
#slider-container .ws_bullets,
#slider-container .ws_thumbs{
display: none
}
}
/* LIEFERANTEN-LOGOS --------------------------------------------------------------------------------------------------------------------- */
/* ROMA */
.roma-logo {
max-width: 40px;
height: auto;
position: absolute;
right: 15px;
top: -5px;
}
@media (min-width: 992px) {
.roma-logo {
margin-top: 30px;
margin-left: 64px;
height: auto;
float: none;
position: relative;
max-width: 100%;
width: 100px;
height: auto;
}
}
@media (min-width: 1200px) {
.roma-logo {
margin-top: 30px;
margin-left: 79px;
height: auto;
float: none;
position: relative;
max-width: 100%;
}
}
/* WERU */
.weru-logo {
max-width: 90px;
height: auto;
position: absolute;
right: 15px;
top: 3px;
}
@media (min-width: 992px) {
.weru-logo {
margin-top: 30px;
margin-left: 32px;
height: auto;
float: none;
position: relative;
max-width: 100%;
}
}
@media (min-width: 1200px) {
.weru-logo {
margin-top: 30px;
margin-left: 49px;
height: auto;
float: none;
position: relative;
max-width: 100%;
}
}
/* markilux */
.markilux-logo {
max-width: 90px;
height: auto;
position: absolute;
right: 22px;
top: 3px;
}
@media (min-width: 992px) {
.markilux-logo {
margin-top: 30px;
margin-left: 41px;
height: auto;
float: none;
position: relative;
max-width: 100%;
}
}
@media (min-width: 1200px) {
.markilux-logo {
margin-top: 30px;
margin-left: 58px;
height: auto;
float: none;
position: relative;
max-width: 100%;
}
}
/* LIEFERANTEN-FORMATIERUNGEN --------------------------------------------------------------------------------------------------------------------- */
.schmal {
padding: 0 20px;
}
/* ROMA */
.ziffer {
margin-left: -1px;
margin-bottom: 10px;
margin-right: 10px;
}
/* FACEBOOK */
.facebookbox {
width: 300px;
height: 35px;
margin-top: -54px;
float: left;
text-align: center;
}
@media (min-width: 768px) {
.facebookbox {
margin-top: -56px;
}
}
.facebookbox img{
width: 25px;
height: 25px;
margin-right: 8px;
padding: 0 !important;
float: left;
}
@media (min-width: 768px) {
.facebookbox img{
width: 29px;
height: 29px;
margin-right: 15px;
}
}
.facebookbox p {
text-align: left;
margin-top: 4px;
font-size: 9px;
}
@media (min-width: 500px) {
.facebookbox p {
font-size: 12px;
}
}
@media (min-width: 768px) {
.facebookbox p {
font-size: 13px;
}
}
/* DATENSCHUTZERKLÄRUNG--------------------------------------*/
.datenschutzdiv h2 {
margin-top: 3.5em !important;
margin-bottom: 0.1em !important;
}
.datenschutzdiv h3 {
margin-top: 2.5em !important;
margin-bottom: 0.5em !important;
}
/*MARKILUX UPDATED CSS - START*/
/*responsively lazy*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.responsively-lazy {
opacity: 1 !important;
}
}
/*border*/
.border {
border: 1px #ccc solid;
}
/*produktsubnav*/
.sichtbar {
display: block !important;
}
.unsichtbar {
display: none !important;
}
.nav-pills li {
cursor: pointer;
}
/*bilder*/
img {
max-width: 100%;
height: auto;
text-align: center;
}
.produktbild {
width: 100%;
}
.produktbild:hover {
transform: scale(1.1);
}
.nooverflow {
overflow: hidden;
}
/*YOUTUBE*/
nav.produktsubnav::after {
display: block;
clear: both;
content: "";
}
/*margins*/
.margintop-3em {
margin-top:3em;
}
.margintop-4em {
margin-top:4em;
}
/*produktübersicht*/
div.produktuebersicht {
width: 100%;
text-align: center;
margin-top: 2em;
margin-bottom: 1em;
}
div.produktuebersicht img {
height: auto;
margin-bottom: 0;
}
/*div.produktuebersicht h3 {
margin-top: 0.5em !important;
margin-bottom: 2em !important;
}
@media (min-width: 768px) {
div.produktuebersicht h3 {
margin-top: 0.5em !important;
margin-bottom: 2.5em !important;
font-size: 16px !important;
}
}
@media (min-width: 992px) {
div.produktuebersicht h3 {
margin-top: 0.5em !important;
margin-bottom: 2.5em !important;
font-size: 18px !important;
}
}*/
div.produktuebersicht h2 { /* Links in Produktübersichten */
margin-top: 0.5em !important;
margin-bottom: 2em !important;
}
@media (min-width: 768px) {
div.produktuebersicht h2 {
margin-top: 0.5em !important;
margin-bottom: 2.5em !important;
font-size: 17px !important;
}
}
@media (min-width: 1200px) {
div.produktuebersicht h2 {
margin-top: 0.5em !important;
margin-bottom: 2.5em !important;
font-size: 19px !important;
}
}
div.produktuebersicht h3 { /* Links in Produktübersichten */
margin-top: 0.5em !important;
margin-bottom: 2em !important;
}
@media (min-width: 768px) {
div.produktuebersicht h3 {
margin-top: 0.5em !important;
margin-bottom: 2.5em !important;
font-size: 16px !important;
}
}
@media (min-width: 992px) {
div.produktuebersicht h3 {
margin-top: 0.5em !important;
margin-bottom: 2.5em !important;
font-size: 18px !important;
}
}
h1.produktuebersicht-h1 { /* Überschrift auf Produktseite */
font-size: 14px !important;
margin-bottom: 1em !important;
}
@media (min-width: 768px) {
h1.produktuebersicht-h1 {
font-size: 16px !important;
margin-top: 0.4em !important;
margin-bottom: 3em !important;
}
}
@media (min-width: 1200px) {
h1.produktuebersicht-h1 {
font-size: 18px !important;
margin-top: 0.4em !important;
margin-bottom: 3em !important;
}
}
h2.produktuebersicht-h2 { /* Überschrift auf Produktseite */
font-size: 14px !important;
margin-bottom: 1em !important;
}
@media (min-width: 768px) {
h2.produktuebersicht-h2 {
font-size: 16px !important;
margin-top: 0.4em !important;
margin-bottom: 3em !important;
}
}
@media (min-width: 1200px) {
h2.produktuebersicht-h2 {
font-size: 18px !important;
margin-top: 0.4em !important;
margin-bottom: 3em !important;
}
}
div.fullcontent h1 {
font-size: 21px;
margin-top: 0em;
margin-bottom: 0.2em;
}
@media (min-width: 768px) {
div.fullcontent h1 {
font-size: 26px;
margin-bottom: 0.5em;
}
}
@media (min-width: 1200px) {
div.fullcontent h1 {
font-size: 32px;
margin-bottom: 0.5em;
}
}
div.fullcontent h2{
font-size: 16px;
margin-top: -0.6em;
margin-bottom: 2em;
}
@media (min-width: 768px) {
div.fullcontent h2 {
font-size: 20px;
margin-top: -0.6em;
margin-bottom: 1em;
}
}
@media (min-width: 1200px) {
div.fullcontent h2 {
font-size: 26px;
margin-top: -0.6em;
margin-bottom: 1em;
}
}
/*hakenliste*/
ul.hakenliste {
margin-top: 1.5em;
margin-right: 0;
margin-left: 0;
margin-bottom: 0em;
}
ul.hakenliste li {
list-style-type: none;
margin-bottom: 1.5em;
}
ul.hakenliste img {
margin-top: -3px;
margin-right: 15px;
margin-bottom: 10px;
float: left;
}
ul.hakenliste .haken2 { /*eingerückt*/
margin-left: 2.5em;
}
ul.hakenliste h4 {
margin-top: 1em;
}
ul.hakenliste i {
color: #d2021a!important;
width: 15px;
text-align: center;
margin-right: 15px;
}
.fa-check-circle{
color: #d2021a!important;
}
/*********** LP ***********/
/*********** LP ***********/
/*********** LP ***********/
body.landingpage div.cc-bottom {
z-index: 11000 !important;
}
body.landingpage .breadcrumb {
display: none !important;
}
@media (min-width: 768px) {
body.landingpage .back-to-top-button {
display: none !important;
}
}
.kontakt-button-lp {
margin-top: 30px;
}
.kontakt-button-lp p {
margin-bottom: 0 !important;
}
button.kontakt-button-lp,
.kontakt-button-lp a {
background-color: #d2021a; /*KUNDENFARBE*/
color: #fff;
padding: 10px;
border-radius: 4px;
}
button.kontakt-button-lp:hover,
button.kontakt-button-lp:focus,
button.kontakt-button-lp:active,
.kontakt-button-lp a:hover,
.kontakt-button-lp a:focus,
.kontakt-button-lp a:active {
background-color: #adadad;
color: #fff !important;
cursor: pointer;
}
button.kontakt-button-lp i,
.kontakt-button-lp a i {
margin-right: 5px;
}
.kontaktaufruf-oben {
background-color: #d2021a; /*KUNDENFARBE*/
color: #fff;
height: 40px;
padding: 10px 20px;
}
.kontaktaufruf-oben .links {
float: left;
}
.kontaktaufruf-oben .rechts {
float: none;
text-align: center;
}
@media (min-width: 768px) {
.kontaktaufruf-oben .rechts {
float: right;
}
}
.kontaktaufruf-oben .rechts a:hover,
.kontaktaufruf-oben .rechts a:focus,
.kontaktaufruf-oben .rechts a:active {
color: #fff;
text-decoration: none;
}
.kontaktaufruf-block {
background-color: #f0f0f0;
padding: 20px 20px 15px 20px;
}
@media (min-width: 768px) {
.kontaktaufruf-block {
padding: 20px 20px 0px 20px;
}
}
.kontaktaufruf-block h3 {
margin-top: 5px;
}
@media (min-width: 1200px) {
.kontaktaufruf-block h3 {
margin-top: 15px;
}
}
.kontaktaufruf-block p .kontakt-button-lp:hover,
.kontaktaufruf-block p .kontakt-button-lp:focus,
.kontaktaufruf-block p .kontakt-button-lp:active {
background-color: #d2021a; /*KUNDENFARBE*/
}
.telefonaufruf {
border: 3px solid #58585a; /*KUNDENFARBE*/
margin-top: 2em;
margin-bottom: 4em;
padding: 1em;
background-color: #58585a; /*KUNDENFARBE*/
}
.telefonaufruf p {
font-size: 20px;
color: #fff;
}
@media (min-width: 576px) {
.telefonaufruf p {
font-size: 25px;
}
}
@media (min-width: 768px) {
.telefonaufruf p {
font-size: 30px;
}
}
@media (min-width: 1200px) {
.telefonaufruf p {
font-size: 40px;
}
}
.telefonaufruf a:hover,
.telefonaufruf a:focus,
.telefonaufruf a:active {
cursor: pointer;
color: #f2f2f2;
}
.btn-cta {
color: #fff;
background-color: #d2021a !important; /*KUNDENFARBE*/
border-color: transparent !important;
text-decoration: none !important;
margin: 5px;
}
.btn-cta:hover,
.btn-cta:focus,
.btn-cta.focus,
.btn-cta:active,
.btn-cta.active {
color: #fff;
background-color: #030303 !important;
border-color: transparent !important;
}
.btn-cta:active,
.btn-cta.active {
background-image: none;
}
.btn-cta2 {
color: #fff;
background-color: transparent !important;
border: #d2021a 3px solid !important; /*KUNDENFARBE*/
text-decoration: none !important;
margin: 5px;
}
.btn-cta2:hover,
.btn-cta2:focus,
.btn-cta2.focus,
.btn-cta2:active,
.btn-cta2.active {
color: #fff;
background-color: #d2021a !important; /*KUNDENFARBE*/
border: #030303 3px solid !important;
text-decoration: none !important;
margin: 5px;
}
.btn-coloured-font {
color: #d2021a !important; /*KUNDENFARBE*/
background-color: #ffffff !important;
}
.btn-coloured-font:hover,
.btn-coloured-font:focus,
.btn-coloured-font.focus,
.btn-coloured-font:active,
.btn-coloured-font.active {
color: #d2021a !important; /*KUNDENFARBE*/
background-color: #e6e6e6 !important;
border: #d2021a 3px solid !important; /*KUNDENFARBE*/
text-decoration: none !important;
margin: 5px;
}
.ueber-uns-kasten {
padding: 45px;
background-color: #ccc;
color: #fff;
}
.ueber-uns-kasten .row,
.ueber-uns-kasten p {
margin-bottom: 0 !important;
}
.nopointer,
.nopointer:hover {
cursor: default !important;
}
/* CSS ZÄHLER */
.zaehler {
text-align: center;
}
.zaehler i {
margin-top: 0.5em;
}
.count-number,
.zaehler-einheit {
display: inline-block;
margin-top: 2em;
}
/* CSS CONTACTBAR */
.contactbarwrap {
display: none !important;
}
body.landingpage .contactbarwrap {
display: none !important;
}
@media (min-width: 768px) {
body.landingpage .contactbarwrap {
display: block !important;
}
}
.contactbarwrap {
width: 100%;
background: #d2021a; /* KUNDENFARBE */
z-index: 10000;
}
.contactbar-box {
text-align: center;
margin: 0 auto;
}
.contactbar-txt {
color: #fff; /* #030303 oder #fff */
font-size: 1.2em;
line-height: 1.2em;
margin: 1em 0;
}
.contactbar-btn button {
color: #fff;
display: block;
padding: 15px 0;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
text-decoration:none;
transition:all .5s ease;
overflow:hidden;
position:relative;
z-index:2;
text-align: center;
margin: 0 auto;
background-color: transparent !important;
outline: none !important;
border: none !important;
}
.contactbar-btn {
background: #030303;
outline: none !important;
}
.contactbar-btn:hover {
background: #3d3d3d;
outline: none !important;
}
@media (min-width: 768px){
.contactbar-btn {
background: #030303;
outline: none !important;
height: 77px;
}
}
@media (min-width: 992px){
.contactbar-btn {
background: #030303;
outline: none !important;
height: 75px;
}
}
@media (min-width: 1200px){
.contactbar-btn {
background: #030303;
outline: none !important;
height: 57px;
}
}
/* CSS RÜCKRUFFORMULAR */
#sidenav-toggle {
border: none;
font-size: 18px;
margin-top: 1em !important;
}
.rw-sidenav.open {
right: 0;
}
.rw-sidenav {
width: 400px;
height: 100%;
position: fixed;
z-index: 99999;
top: 0;
right: -400px;
background: #fff;
padding: 2rem 45px;
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: right 0.25s ease-in-out;
transition: right 0.25s ease-in-out;
color: #b7b6b6;
box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.15);
font-family: BrandonText, BrandonRegular, sans-serif;
}
.rw-sidenav .close {
background: #2d2d2d;
border-radius: 50px;
position: absolute;
top: 10px;
right: 10px;
text-shadow: none;
color: #fff;
width: 22px;
height: 22px;
line-height: 22px;
-webkit-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
font-size: 2rem;
opacity: 1;
font-weight: lighter;
}
.rw-sidenav .close:hover,
.rw-sidenav .close:focus{
background: #333;
outline: none;
}
.sidebar-logo{
width: 100%;
text-align: center;
}
.rw-sidenav-logo {
max-width: 19rem;
}
.rw-sidenav form {
max-width: 290px;
margin: 0 auto;
display: block;
padding-top: 15px;
}
.btn-wrap{
text-align: center;
display: block;
}
.rw-sidenav h2{
font-weight: normal;
font-size: 22px;
color: #000;
}
.rw-sidenav-overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.50);
overflow-y: auto;
overflow-x: hidden;
text-align: center;
opacity: 0;
transition: opacity 1s;
}
.rw-sidenav p{
font-size: 16px;
color: #2d2d2d;
}
.mtb-15{
margin-top: 15px;
margin-bottom: 15px;
}
.sidebar-input{
color: #2d2d2d;
padding: 8px;
width: 100%;
display: block;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
margin: 0 auto;
max-width: 290px;
width: 100%;
height: 40px;
border: 1px solid rgba(0,0,0, 0.9);
box-shadow: none !important;
}
.sidebar-input::placeholder {
color: #000!important;
}
.sidebar-input:-ms-input-placeholder {
color: #000!important;
}
.sidebar-input::-ms-input-placeholder {
color: #000!important;
}
.sidebar-input:active,
.sidebar-input:focus {
outline: none;
box-shadow: none;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.senden-button {
background-color: #d2021a;
color: #fff;
border: 1px solid rgba(0, 0, 0, 0.28);
font-size: 18px;
text-align: center;
width: 100%;
transition: .8s;
margin: 0 auto;
max-width: 290px;
display: block;
}
.rw-sidenav .form-group{
position: relative;
margin-bottom: 10px;
}
.error-required-msg {
margin: 0 auto;
max-width: 290px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
color: #CE3736;
font-family: BrandonMedium, sans-serif;
font-size: 14px;
width: 100%;
height: 100%;
padding: 8px;
box-sizing: border-box;
background: #fff;
text-align: left;
border: 2px solid #CE3736;
border-radius: 4px;
display: none;
line-height: 19px;
}
.Invalid-error .error-required-msg{
display: block;
}
.senden-button.button-error {
background-color: #CE3736 !important;
color: #fff !important;
text-transform: uppercase;
}
.error-checked {
width: 20px;
height: 22px;
left: 0;
right: inherit;
}
.rw-sidenav p.sidebar-form-label{
font-size: 14px;
color: #2d2d2d;
margin-bottom: 5px;
}
.sidebar-dialog-success{
width: auto;
text-align: center;
}
.sidebar-dialog-success h1{
margin-top: 20px;
color: #5C5C5C;
}
.sidebar-dialog-success .fa-check{
color: #41ab34;
width: 50px;
height: 50px;
font-size: 30px;
border: 4px solid #41ab34;
border-radius: 100px;
line-height: 42px;
margin-top: 20px;
}
/* CSS SHAKING */
@keyframes shake {
0% {
transform:rotate(0deg)
}
25% {
transform:rotate(0deg)
}
50% {
transform:rotate(1.5deg)
}
75% {
transform:rotate(-1.5deg)
}
100% {
transform:rotate(0deg)
}
}
.shaking:hover {
animation:none !important
}
.shaking {
animation:shake 2s infinite;
transition:.2s
}
.rw-sidenav-open:hover {
cursor: pointer;
}
div.rw-sidenav.open div.modal-content {
border: 10px solid #06c258 !important;
}
div.rw-sidenav.open div.modal-content i {
color: #06c258;
font-size: 6em;
margin-bottom: 15px;
}
/* CSS EXIT-POPUP */
.modal {
z-index: 10000;
}
.modal-content {
border: 10px solid #030303;
}
.modal-body i {
font-size: 5em;
}
/* CSS SHAKING */
@keyframes shake {
0% {
transform:rotate(0deg)
}
25% {
transform:rotate(0deg)
}
50% {
transform:rotate(1.5deg)
}
75% {
transform:rotate(-1.5deg)
}
100% {
transform:rotate(0deg)
}
}
.shaking:hover {
animation:none !important
}
.shaking {
animation:shake 2s infinite;
transition:.2s
}
.rw-sidenav-open:hover {
cursor: pointer;
}
div.rw-sidenav.open div.modal-content {
border: 10px solid #06c258 !important;
}
div.rw-sidenav.open div.modal-content i {
color: #06c258;
font-size: 6em;
margin-bottom: 15px;
}
/* CSS EXIT-POPUP */
.modal {
z-index: 10000;
}
.modal-content {
border: 10px solid #030303;
}
.modal-body i {
font-size: 5em;
}
.separator {
display: inline-block;
vertical-align: middle;
width: 80px;
height: 2px;
margin-top: 10px;
margin-bottom: 30px;
background-color: #d2021a;
}
.startsymbole .fas,
.startsymbole .far,
.startsymbole .fab,
.startsymbole .fal {
color: #d2021a;
font-size: 100px;
}
.startsymbole a,
.kachel-textbox a{
text-decoration: none;
}
@media (min-width: 992px) {
body.landingpage #footerwrap{
padding-bottom: 65px;
}
}
@media (min-width: 1200px) {
body.landingpage #footerwrap{
padding-bottom: 50px;
}
}
.startsymbole-unterseite .fas,
.startsymbole-unterseite .far,
.startsymbole-unterseite .fab,
.startsymbole-unterseite .fal {
color: #d2021a ; /* Kundenfarbe */
font-size: 70px;
}
/* STÖRER*/
.stoererdiv {
position: relative;
}
.stoerer {
position: absolute;
z-index: 5000;
bottom: -401px;
right: -90px;
background: transparent;
}
/* ALARMBOX */
/* ALARMBOX */
/* ALARMBOX */
.alarmbox {
background-color: #d2021a;
color: #fff;
padding: 2em 1em;
margin-bottom: 30px;
}
@media (min-width: 768px) {
.alarmbox {
padding: 2em 1em;
}
}
.alarmbox h4,
.alarmbox p {
font-size: 16px;
margin: 0 !important;
font-weight: bold;
}
@media (min-width: 768px) {
.alarmbox h4,
.alarmbox p {
font-size: 18px;
}
}
.weru-btn {
text-align: left;
color: #fff;
margin-bottom: 0em;
margin-top: 1em;
}
.weru-btn a {
text-decoration: none;
color: #fff;
text-align: center;
padding: 10px 14px;
background: #d2021a;
width: 100px;
border-radius: 1px;
}
.weru-btn a:hover,
.weru-btn a:focus {
background: #adadad;
}
.btn-default
{
background-color: #d2021a!important; /* Templatefarbe */
border-color: #d2021a!important;
color:#FFF;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
background-color: #ccc!important;
border-color: #ccc!important;
color:#FFF;
}
.btn-default a,
.btn-default a:hover,
.btn-default a:focus {
text-decoration: none;
color:#FFF;
}
/* iconbox-Box */
.iconbox {
background-color: #d2021a;
color: #fff;
font-weight: bold;
padding: 2em 1em;
margin-bottom: 30px;
text-align: left !important;
}
@media (min-width: 768px) {
.iconbox {
padding: 2em 1em;
}
}
.iconbox h2,
.iconbox h2 i {
font-size: 30px;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: left !important;
}
.iconbox h3,
.iconbox h3 i {
font-size: 25px;
margin-top: 2em !important;
margin-bottom: 0 !important;
text-align: left !important;
}
.iconbox h4,
.iconbox h4 i {
font-size: 17px;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: left !important;
}
@media (min-width: 768px) {
.iconbox h2,
.iconbox h2 i {
font-size: 30px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h3,
.iconbox h3 i {
font-size: 20px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h4,
.iconbox h4 i {
font-size: 17px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (min-width: 992px) {
.iconbox h2,
.iconbox h2 i {
font-size: 35px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h3,
.iconbox h3 i {
font-size: 25px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h4,
.iconbox h4 i {
font-size: 18px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (min-width: 1200px) {
.iconbox h2,
.iconbox h2 i {
font-size: 40px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h3,
.iconbox h3 i {
font-size: 30px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h4,
.iconbox h4 i {
font-size: 20px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (min-width: 1400px) {
.iconbox h2,
.iconbox h2 i {
font-size: 45px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h3,
.iconbox h3 i {
font-size: 35px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h4,
.iconbox h4 i {
font-size: 22px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
.iconbox h2 i,
.iconbox h3 i,
.iconbox h4 i {
margin-left: 0.5em;
color: #fff!important;
}
.iconbox i {
font-size: 4em;
color: #fff;
}
@media (min-width: 768px) {
.iconbox i {
font-size: 6em;
}
}
@media (min-width: 992px) {
.iconbox i {
font-size: 8em;
}
}
@media (min-width: 1200px) {
.iconbox i {
font-size: 9em;
}
}
@media (min-width: 1400px) {
.iconbox i {
font-size: 10em;
}
}
.divider {
background: radial-gradient(circle at top left, #FAB800, #f8d882 90%);
padding:10px 10px 10px 10px;
margin-left: 0px;
margin-top: 3em !important;
color: white;
position: relative;
}
@media (min-width: 992px) {
.divider {
background: radial-gradient(circle at top left, #FAB800, #f8d882 90%);
padding:10px 10px 10px 28px;
margin-left: -28px;
margin-top: 3em !important;
}
}
.greybox {
background: #F5F5F5;
padding: 2em 1em;
margin-bottom: 30px;
}
.hinweisbox-markilux {
padding: 15px;
background-color: #fff;
border: solid 5px #e2001a;
}
@media (min-width: 992px) {
.hinweisbox-markilux {
padding: 30px;
}
}
.hinweisbox-markilux img {
margin-bottom: 30px;
}
@media (min-width: 768px) {
.hinweisbox-markilux img {
margin: 0 !important;
}
}
.hinweisbox-markilux .kontaktaufruf a {
background: #e2001a !important;
}
.hinweisbox-markilux .hinweisbox-links{
border-right: 0px solid #ccc;
}
@media (min-width: 768px) {
.hinweisbox-markilux .hinweisbox-links{
border-right: 1px solid #ccc;
padding-right: 30px;
}
}
@media (min-width: 768px) {
.hinweisbox-markilux .hinweisbox-rechts{
padding-left: 30px;
}
}
.hinweisbox-markilux .kontaktaufruf{
font-size: 1.1em !important;
}
/* CSS SHAKING */
@keyframes shake {
0% {
transform:rotate(0deg)
}
25% {
transform:rotate(0deg)
}
50% {
transform:rotate(1.5deg)
}
75% {
transform:rotate(-1.5deg)
}
100% {
transform:rotate(0deg)
}
}
.shaking:hover {
animation:none !important
}
.shaking {
animation:shake 2s infinite;
transition:.2s
}
.kontaktaufruf {
font-size: 13px;
margin-bottom: 1em;
height: 30px;
line-height: 30px;
text-align: left;
}
.kontaktaufruf a {
text-decoration: none;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 20px 10px 18px;
width: 100px;
background: var(--templatefarbe_hex);
}
.kontaktaufruf a:hover,
.kontaktaufruf a:focus {
background: #adadad;
}
/* KACHELBOXEN + STARTSYMBOLE
------------------------------------------------- */
.separator {
display: inline-block;
vertical-align: middle;
width: 80px;
height: 2px;
margin-top: 10px;
margin-bottom: 30px;
background-color: var(--akzentfarbe_hex);
}
.startsymbole .fas,
.startsymbole .far,
.startsymbole .fab,
.startsymbole .fal {
color: var(--akzentfarbe_hex);
font-size: 100px;
}
.startsymbole a,
.kachel-textbox a{
text-decoration: none;
}
.startsymbole-unterseite .fas, /* große FA-Icons auf Produktseiten */
.startsymbole-unterseite .far,
.startsymbole-unterseite .fab,
.startsymbole-unterseite .fal {
color: var(--akzentfarbe_hex);
font-size: 70px;
}
.unterseite h1 {
font-size: 18px;
margin-top: 0em;
margin-bottom: 0.2em;
}
@media (min-width: 768px) {
.unterseite h1 {
font-size: 26px;
margin-bottom: 0.5em;
}
}
@media (min-width: 1200px) {
.unterseite h1 {
font-size: 28px;
margin-bottom: 0.5em;
}
}
.unterseite h2, .startseite .produktuebersicht h2{
font-size: 16px;
margin-top: 0.4em;
margin-bottom: 1.5em;
}
@media (min-width: 768px) {
.unterseite h2, .startseite .produktuebersicht h2 {
font-size: 20px;
margin-top: -0.6em;
margin-bottom: 1em;
}
}
@media (min-width: 1200px) {
.unterseite h2, .startseite .produktuebersicht h2 {
font-size: 23px;
margin-top: -0.6em;
margin-bottom: 1em;
}
}
#productcontent h1 {
font-size: 18px;
margin-top: 0em;
margin-bottom: 0.2em;
}
@media (min-width: 768px) {
#productcontent h1 {
font-size: 26px;
margin-bottom: 0.5em;
}
}
@media (min-width: 1200px) {
#productcontent h1 {
font-size: 28px;
margin-bottom: 0.5em;
}
}
#productcontent h2{
font-size: 16px;
margin-top: 0.4em;
}
@media (min-width: 768px) {
#productcontent h2 {
font-size: 20px;
margin-top: -0.6em;
}
}
@media (min-width: 1200px) {
#productcontent h2 {
font-size: 22px;
margin-top: -0.6em;
}
}
h2.with-icon{
margin-top: 1em !important;
}
.no-gutters {
padding-left: 0 !important;
padding-right: 0 !important;
}
.nomarginbottom img {
margin-bottom: 0 !important;
}
.kachel-textbox {
height: 100%;
width: 95%;
vertical-align: middle;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
@media (min-width: 992px) {
.kachel-textbox {
width: 80%;
}
}
@media (min-width: 1200px) {
.kachel-textbox {
width: 80%;
}
}
@media (min-width: 1300px) {
.kachel-textbox {
width: 80%;
}
}
@media (min-width: 1440px) {
.kachel-textbox {
width: 70%;
}
}
.kachelboxen {
background-color: rgba(var(--kachelboxenfarbe_rgb), 0.8);
}
.kachelboxen h3 {
margin-top: 0 !important;
}
.kachelboxen .btn-lg {
color: #fff;
background-color: var(--akzentfarbe_hex);
border-color: var(--akzentfarbe_hex);
font-size: 12px;
}
@media (min-width: 576px) {
.kachelboxen .btn-lg {
font-size: 13px;
}
}
@media (min-width: 768px) {
.kachelboxen .btn-lg {
font-size: 14px;
}
}
@media (min-width: 992px) {
.kachelboxen .btn-lg {
font-size: 15px;
}
}
@media (min-width: 1200px) {
.kachelboxen .btn-lg {
font-size: 16px;
}
}
.kachelboxen .btn-lg:hover,
.kachelboxen .btn-lg:focus,
.kachelboxen .btn-lg:active {
color: #fff;
background-color: #888;
border-color: #888;
}
.kachel-textrahmen {
text-align: center !important;
padding: 30px;
overflow: hidden
}
.kachel-textrahmen button {
cursor: pointer;
}
.kachel-textrahmen h2 {
font-size: 22px;
color: var(--templatefarbe_hex);
margin-top: 0;
margin-bottom: 0.1em;
}
.kachel-textrahmen h3 {
font-size: 18px;
font-weight: normal;
padding: 0 0 20px 0!important;
margin: 0;
color: var(--textfarbe_hex);
}
@media (min-width: 768px) {
.kachel-textrahmen h2 {
font-size: 28px;
color: var(--templatefarbe_hex);
margin-top: 0;
margin-bottom: 0.1em;
}
.kachel-textrahmen h3 {
font-size: 18px;
font-weight: normal;
padding: 0 0 20px 0!important;
margin: 0;
color: var(--textfarbe_hex);
}
}
@media (min-width: 992px) {
.kachel-textrahmen h2 {
font-size: 27px;
}
.kachel-textrahmen h3 {
font-size: 21px;
}
}
@media (min-width: 1200px) {
.kachel-textrahmen h2 {
font-size: 32px;
}
.kachel-textrahmen h3 {
font-size: 27px;
}
}
@media (min-width: 1440px) {
.kachel-textrahmen h2 {
font-size: 36px;
}
.kachel-textrahmen h3 {
font-size: 30px;
}
}
/* KACHELBOXEN + STARTSYMBOLE ENDE------------------------------------------------- */
/* PARALLAX BOXEN
------------------------------------------------- */
.background-attachment-fixed {
background-attachment: fixed;
}
.parallax-slide {
width: 100%;
background-position: center;
background-repeat: no-repeat;
}
.parallax-slide .container {
margin: 0px 15px;
}
/* CLAIMS */
.claim-slide{
background-image: url(../img/parallax/effekt1.png);
}
@media (min-width: 768px) {
.claim-slide{
background-image: url(../img/parallax/effekt2.png);
}
}
@media (min-width: 992px) {
.claim-slide{
background-image: url(../img/parallax/effekt3.png);
}
}
@media (min-width: 1200px) {
.claim-slide{
background-image: url(../img/parallax/effekt4.png);
}
}
.claim-slide {
background-color: var(--claimslidefarbe_hex);
height: auto;
margin: 0 auto;
overflow: hidden;
padding: 40px 15px;
}
@media (min-width: 992px) {
.claim-slide {
padding: 60px 15px;
}
}
@media (min-width: 992px) {
.claim-slide {
padding: 80px 15px;
}
}
.claim-slide .container,
.parallax-slide .container{
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.claim-slide .container,
.parallax-slide .container {
width: 730px;
max-width: 100%;
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 992px) {
.claim-slide .container,
.parallax-slide .container {
width: 930px;
max-width: 100%;
}
}
@media (min-width: 1200px) {
.claim-slide .container,
.parallax-slide .container {
width: 1110px;
max-width: 100%;
}
}
.claimbox {
text-align: center;
width: 100%;
padding: 15px 15px;
background-color: var(--claimboxinnerfarbe_hex);
height: auto;
margin: auto;
overflow: hidden;
}
.claimbox a {
text-decoration: none;
}
.claimbox h2 {
font-size: 24px;
color: var(--claimboxtextfarbe_hex);
margin-top: 0;
margin-bottom: 0.1em;
}
.claimbox h3 {
font-size: 17px;
font-weight: normal;
padding: 0!important;
margin: 0;
color: var(--textfarbe_hex);
}
@media (min-width: 576px) {
.claimbox {
padding: 20px 20px;
}
}
@media (min-width: 768px) {
.claimbox {
padding: 30px 30px;
}
.claimbox h2 {
font-size: 32px;
}
.claimbox h3 {
font-size: 20px;
}
}
@media (min-width: 992px) {
.claimbox h2 {
font-size: 38px;
}
.claimbox h3 {
font-size: 32px;
}
}
@media (min-width: 1200px) {
.claimbox h2 {
font-size: 40px;
}
.claimbox h3 {
font-size: 32px;
}
}
div.parallax-slide .claimbox {
background-color: rgba(255,255,255,0.85) !important;
}
/* PARALLAX BOXEN ENDE */
/* PARALLAX BILDER */
.slide1-roma {
background-image: url(/config-templates/roma/img/parallax/parallax01-xs.jpg);
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
@media (min-width: 576px) {
.slide1-roma {
background-image: url(/config-templates/roma/img/parallax/parallax01-sm.jpg);
height: 400px;
}
}
@media (min-width: 768px) {
.slide1-roma {
background-image: url(/config-templates/roma/img/parallax/parallax01-lg.jpg);
height: 500px;
}
}
@media (min-width: 992px) {
.slide1-roma {
background-image: url(/config-templates/roma/img/parallax/parallax01-xl.jpg);
height: 600px;
}
}
/* align = right */
.slide2-roma {
background-image: url(/config-templates/roma/img/parallax/parallax02-xs.jpg);
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
@media (min-width: 576px) {
.slide2-roma {
background-image: url(/config-templates/roma/img/parallax/parallax02-sm.jpg);
height: 400px;
}
}
@media (min-width: 768px) {
.slide2-roma {
background-image: url(/config-templates/roma/img/parallax/parallax02-lg.jpg);
height: 500px;
}
}
@media (min-width: 992px) {
.slide2-roma {
background-image: url(/config-templates/roma/img/parallax/parallax02-xl.jpg);
height: 600px;
}
}
/* align = left */
.slide3-roma {
background-image: url(/config-templates/roma/img/parallax/parallax03-xs.jpg);
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
@media (min-width: 576px) {
.slide3-roma {
background-image: url(/config-templates/roma/img/parallax/parallax03-sm.jpg);
height: 400px;
}
}
@media (min-width: 768px) {
.slide3-roma {
background-image: url(/config-templates/roma/img/parallax/parallax03-lg.jpg);
height: 500px;
}
}
@media (min-width: 992px) {
.slide3-roma {
background-image: url(/config-templates/roma/img/parallax/parallax03-xl.jpg);
height: 600px;
}
}
/* align = left */
.slide4-roma {
background-image: url(/config-templates/roma/img/parallax/parallax04-xs.jpg);
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
@media (min-width: 576px) {
.slide4-roma {
background-image: url(/config-templates/roma/img/parallax/parallax04-sm.jpg);
height: 400px;
}
}
@media (min-width: 768px) {
.slide4-roma {
background-image: url(/config-templates/roma/img/parallax/parallax04-lg.jpg);
height: 500px;
}
}
@media (min-width: 992px) {
.slide4-roma {
background-image: url(/config-templates/roma/img/parallax/parallax04-xl.jpg);
height: 600px;
}
}
/* align = left */
.slide5-roma {
background-image: url(/config-templates/roma/img/parallax/-xs.jpg);
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
@media (min-width: 576px) {
.slide5-roma {
background-image: url(/config-templates/roma/img/parallax/-sm.jpg);
height: 400px;
}
}
@media (min-width: 768px) {
.slide5-roma {
background-image: url(/config-templates/roma/img/parallax/-lg.jpg);
height: 500px;
}
}
@media (min-width: 992px) {
.slide5-roma {
background-image: url(/config-templates/roma/img/parallax/-xl.jpg);
height: 600px;
}
}
/* align = left */
.slide6-roma {
background-image: url(/config-templates/roma/img/parallax/-xs.jpg);
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
@media (min-width: 576px) {
.slide6-roma {
background-image: url(/config-templates/roma/img/parallax/-sm.jpg);
height: 400px;
}
}
@media (min-width: 768px) {
.slide6-roma {
background-image: url(/config-templates/roma/img/parallax/-lg.jpg);
height: 500px;
}
}
@media (min-width: 992px) {
.slide6-roma {
background-image: url(/config-templates/roma/img/parallax/-xl.jpg);
height: 600px;
}
}
/* Kachelboxen: schwacher Hintergrund */
div.kachelbg1,
div.kachelbg2,
div.kachelbg3,
div.kachelbg4,
div.kachelbg5,
div.kachelbg6 {
position: relative;
}
@media (max-width: 991px) {
div.kachelbg1::before,
div.kachelbg2::before,
div.kachelbg3::before,
div.kachelbg4::before,
div.kachelbg5::before,
div.kachelbg6::before {
background: none !important;
}
}
div.kachelbg1::before {
content: "";
background: url(/config-templates/roma/img/kachelboxen/kachelbox01-md.jpg);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
transform: scale(1.4);
}
div.kachelbg2::before {
content: "";
background: url(/config-templates/roma/img/kachelboxen/kachelbox02-md.jpg);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
transform: scale(1.4);
}
div.kachelbg3::before {
content: "";
background: url(/config-templates/roma/img/kachelboxen/kachelbox03-md.jpg);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
transform: scale(1.4);
}
div.kachelbg4::before {
content: "";
background: url(/config-templates/roma/img/kachelboxen/kachelbox04-md.jpg);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
transform: scale(1.4);
}
div.kachelbg5::before {
content: "";
background: url(/config-templates/roma/img/kachelboxen/kachelbox05-md.jpg);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
transform: scale(1.4);
}
div.kachelbg6::before {
content: "";
background: url(/config-templates/roma/img/kachelboxen/kachelbox06-md.jpg);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
transform: scale(1.4);
}
/* NEU 2023 */
/* NEU 2023 */
/* NEU 2023 */
div.kachelboxen .row {
display: flex;
flex-wrap: wrap;
}
div.kachelboxen .row:nth-child(2) div:nth-child(2) {
order: 1;
}
div.kachelboxen .row:nth-child(2) div:nth-child(1) {
order: 2;
}
div.kachelboxen .row:nth-child(4) div:nth-child(2) {
order: 1;
}
div.kachelboxen .row:nth-child(4) div:nth-child(1) {
order: 2;
}
@media (min-width: 992px) {
div.kachelboxen .row {
display: flex;
flex-wrap: nowrap;
}
div.kachelboxen .row:nth-child(2) div:nth-child(2) {
order: 2;
}
div.kachelboxen .row:nth-child(2) div:nth-child(1) {
order: 1;
}
div.kachelboxen .row:nth-child(4) div:nth-child(2) {
order: 2;
}
div.kachelboxen .row:nth-child(4) div:nth-child(1) {
order: 1;
}
}
.no-gutters,
.no-gutters .col-lg-6 {
padding-left: 0 !important;
padding-right: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
/* startheaders*/
@media (min-width: 1200px) {
.startheaders h1 {
font-size: 32px;
}
}
/*Kontaktformular*/
@media (min-width: 1200px) {
.form-control {
height: 40px;
font-size: 17px;
}
}
/* iconbox-Box */
.iconbox .row {
margin-bottom: 0 !important;
}
.equal-height-box .iconbox {
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: center;
}
@media (min-width: 992px) {
.equal-height-box .iconbox {
display: grid;
text-align: left;
}
}
.equal-height-box {
margin-bottom: 10px !important;
}
@media (min-width: 992px) {
.equal-height-box {
margin-bottom: 0px !important;
}
}
.iconbox {
background: rgb(var(--hinweisboxfarbe_rgb),1);
background: -moz-linear-gradient(170deg, rgba(var(--hinweisboxfarbe_rgb),1) 0%, rgba(var(--hinweisboxfarbe_rgb),0.8) 79%);
background: -webkit-linear-gradient(170deg, rgba(var(--hinweisboxfarbe_rgb),1) 0%, rgba(var(--hinweisboxfarbe_rgb),0.8) 79%);
background: linear-gradient(170deg, rgba(var(--hinweisboxfarbe_rgb),1) 0%, rgba(var(--hinweisboxfarbe_rgb),0.8) 79%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1);
color: var(--hinweisboxtextfarbe_hex);
font-weight: bold;
padding: 2em 2em;
margin-top: 2em;
margin-bottom: 2em;;
}
@media (min-width: 768px) {
.iconbox {
padding: 2em 2em;
}
}
.iconbox h2 {
font-size: 30px;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: center !important;
}
.iconbox h3 {
font-size: 24px;
margin-top: 1em !important;
margin-bottom: 0.3em !important;
text-align: center !important;
line-height: 1.3em;
}
.iconbox h4 {
font-size: 17px;
margin-top: 1em !important;
margin-bottom: 0 !important;
text-align: center !important;
}
@media (min-width: 768px) {
.iconbox h2 {
font-size: 30px;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: center !important;
}
.iconbox h3 {
font-size: 24px;
margin-top: 0 !important;
margin-bottom: 0.4em !important;
text-align: center !important;
}
.iconbox h4 {
font-size: 17px;
margin-top: 1em !important;
margin-bottom: 0 !important;
text-align: center !important;
}
}
@media (min-width: 992px) {
.iconbox h2 {
font-size: 35px;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: left !important;
}
.iconbox h3 {
font-size: 25px;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: left !important;
}
.iconbox h4 {
font-size: 18px;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: left !important;
}
}
@media (min-width: 1200px) {
.iconbox h2 {
font-size: 40px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h3 {
font-size: 27px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h4 {
font-size: 20px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (min-width: 1400px) {
.iconbox h2 {
font-size: 45px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h3 {
font-size: 30px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.iconbox h4 {
font-size: 22px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
.iconbox i {
font-size: 4em;
}
@media (min-width: 768px) {
.iconbox i {
font-size: 5em;
}
}
@media (min-width: 992px) {
.iconbox i {
font-size: 5em;
}
}
@media (min-width: 1200px) {
.iconbox i {
font-size: 7em;
}
}
@media (min-width: 1440px) {
.iconbox i {
font-size: 8em;
}
}
.iconbox img {
margin-bottom: 0 !important;
}
/* pagination */
.page-item.active .page-link {
color: var(--hinweisboxtextfarbe_hex) !important;
background-color: rgba(var(--hinweisboxfarbe_rgb), 1) !important;
}
.page-item.disabled .page-link { /*pagination*/
color: var(--textfarbe_hex) !important;
background-color: var(--hintergrundfarbe_hex) !important;
border: none;
}
.pagination {
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
.page-item {
margin: 0;
}
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
border: none;
}
.justify-content-center {
justify-content: center !important;
}
/* ALARMBOX
------------------------------------------------- */
.alarmbox {
background: rgb(var(--templatefarbe_rgb));
background: -moz-linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.8) 79%);
background: -webkit-linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.8) 79%);
background: linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.8) 79%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1);
color: #fff;
padding: 2em 1em;
margin-bottom: 30px;
}.alarmbox-dunkel {
background: rgb(var(--infobarhintergrundfarbe_rgb));
background: -moz-linear-gradient(170deg, rgba(var(--infobarhintergrundfarbe_rgb),1) 0%, rgba(var(--infobarhintergrundfarbe_rgb),0.8) 79%);
background: -webkit-linear-gradient(170deg, rgba(var(--infobarhintergrundfarbe_rgb),1) 0%, rgba(var(--infobarhintergrundfarbe_rgb),0.8) 79%);
background: linear-gradient(170deg, rgba(var(--infobarhintergrundfarbe_rgb),1) 0%, rgba(var(--infobarhintergrundfarbe_rgb),0.8) 79%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1);
color: #fff;
padding: 2em 1em;
margin-bottom: 30px;
}
@media (min-width: 768px) {
.alarmbox,
.alarmbox-dunkel {
padding: 2em 1em;
}
}
.alarmbox h4,
.alarmbox-dunkel h4,
.alarmbox p,
.alarmbox-dunkel p {
font-size: 16px;
margin: 0 !important;
font-weight: bold;
}
@media (min-width: 768px) {
.alarmbox h4,
.alarmbox-dunkel h4,
.alarmbox p,
.alarmbox-dunkel p {
font-size: 18px;
}
}
.servicedownloads {
color: #fff;
}
/* ALARMBOX ENDE */
/* HIGHLIGHTBOX
------------------------------------------------- */
.highlightbox {
display: flex;
}
.highlightbox .align-self-center {
-ms-flex-item-align: center !important;
align-self: center !important;
}
.highlightbox {
background-color: rgba(var(--highlightboxhintergrundfarbe_rgb),0.5);
padding: 30px;
}
@media (min-width: 992px) {
.highlightbox {
background-color: rgba(var(--highlightboxhintergrundfarbe_rgb),0.5);
}
}
.highlightbox table {
background-color: rgba(var(--highlightboxhintergrundfarbe_rgb),0.5);
width: 100%;
}
#highlight1,
#highlight2 {
border-right: 0px;
padding-right: 10px;
padding-bottom: 20px;
}
@media (min-width: 992px) {
#highlight1,
#highlight2 {
border-right: 1px solid #ccc;
padding-right: 20px;
paddin-bottom: 0px;
}
}
#highlight1 img,
#highlight2 img{
margin-bottom: 0px;
margin-top: 1em;
width: 100%;
}
.highlightrechts {
border-right: 0px;
padding-right: 10px;
padding-bottom: 20px;
}
@media (min-width: 992px) {
.highlightrechts {
border-bottom: 0px;
padding-right: 20px;
paddin-bottom: 0px;
}
}
.highlightrechts img,
.highlightrechts p {
margin-bottom: 0px;
margin-top: 1em;
width: 100%;
}
.highlight-kontakt {
width: 60%;
margin: 0 auto;
}
.highlight-kontakt h3 {
margin-top: 0 !important;
}
.highlight-zeiten td{
vertical-align: top;
padding-right: 20px;
}
.highlight-zeiten {
float: left;
}
@media (min-width: 576px) {
.highlight-zeiten td{
padding-right: 10px;
}
}
@media (min-width: 768px) {
.highlight-zeiten td{
padding-right: 15px;
}
}
@media (min-width: 992px) {
.highlight-zeiten td{
padding-right: 8px;
}
}
@media (min-width: 1200px) {
.highlight-zeiten td{
padding-right: 10px;
}
}
.highlight-zeiten tr td:first-child {
}
.highlight-zeiten tr td:last-child {
padding-right: 0 !important;
}
/* HIGHLIGHTBOX ENDE */
/* BUTTONS
------------------------------------------------- */
.facebook-button, .instagram-button {
font-size: 13px;
height: 30px;
line-height: 30px;
text-align: left;
}
.facebook-button a {
text-decoration: none;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 20px 10px 18px;
width: 100px;
background: #3b5998;
}
.instagram-button a {
text-decoration: none;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 20px 10px 18px;
width: 100px;
background-color: #ffd522;
background-image: -webkit-linear-gradient(341deg, #ffd522 0%, #fa7012 18%, #FF0000 50%, #e40033 72%, #d80055 87%, #c90082 100%);
background-image: -o-linear-gradient(341deg, #ffd522 0%, #fa7012 18%, #FF0000 50%, #e40033 72%, #d80055 87%, #c90082 100%);
background-image: linear-gradient(71deg, #ffd522 0%, #fa7012 18%, #FF0000 50%, #e40033 72%, #d80055 87%, #c90082 100%);
}
.facebook-button a:hover,
.facebook-button a:focus,
.instagram-button a:hover,
.instagram-button a:focus {
background: #adadad;
}
.kontaktaufruf {
font-size: 13px;
margin-bottom: 1em;
height: 30px;
line-height: 30px;
text-align: left;
}
.kontaktaufruf a {
text-decoration: none;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 20px 10px 18px;
width: 100px;
background: var(--akzentfarbe_hex);
}
.kontaktaufruf a:hover,
.kontaktaufruf a:focus {
background: #adadad;
}
@media (min-width: 768px){
.kontakt-float {
float: left;
margin-right: 5px;
}
}
.back-to-top-button { /* neuer nach Oben button mit Pfeil */
background: rgba(var(--akzentfarbe_rgb), 0.8);
position: fixed;
padding: 12px 15px;
bottom: 15px;
right: 15px;
font-size: 30px;
color: #fff;
margin: 0;
border-radius: 2px;
z-index: 8000;
}
.back-to-top-button:hover {
background: rgba(var(--akzentfarbe_rgb), 0.9);
}
.telefon-button { /* neuer Telefon-Button */
background: rgba(var(--akzentfarbe_rgb), 0.8);
position: fixed;
padding: 12px;
bottom: 15px;
left: 15px;
font-size: 30px;
color: #fff;
margin: 0;
border-radius: 2px;
z-index: 8000;
}
@media (max-width: 575px) {
.telefon-button,
.back-to-top-button {
bottom: 50px;
}
}
a.back-to-top-button:hover,
a.back-to-top-button:focus,
a.telefon-button:hover,
a.telefon-button:focus {
color: #fff;
background: rgba(var(--akzentfarbe_rgb), 0.9);
}
/* Colour Bootstrap Default Button in Kundenfabe */
.btn-default
{
background-color: var(--templatefarbe_hex)!important;
border-color: var(--templatefarbe_hex)!important;
color:#FFF;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
background-color: #ccc!important;
border-color: #ccc!important;
color:#FFF;
}
.btn-default a,
.btn-default a:hover,
.btn-default a:focus {
text-decoration: none;
color:#FFF;
}
button a {
text-decoration: none!important;
}
/* BUTTONS ENDE */