.alignnone{margin:.35em 1.35em 1.35em 0} .aligncenter,div.aligncenter{display:block;margin:.35em auto} .alignright{float:right;margin:.35em 0 1.35em 1.35em} .alignleft{float:left;margin:.35em 1.35em 1.35em 0} a img.alignright{float:right;margin:.35em 0 1.35em 1.35em} a img.alignnone{margin:.35em 1.35em 1.35em 0} a img.alignleft{float:left;margin:.35em 1.35em 1.35em 0} a img.aligncenter{display:block;margin-left:auto;margin-right:auto} .breadcrumb{font-size:.8em;margin:.5em 0} .wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:.35em .2em .65em;text-align:center} .wp-caption.alignnone{margin:.35em 1.35em 1.35em 0} .wp-caption.alignleft{margin:.35em 1.35em 1.35em 0} .wp-caption.alignright{margin:.35em 0 1.35em 1.35em} .wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto} .wp-caption p.wp-caption-text{font-size:.75em;line-height:1.5;margin:0;padding:0 .3em .35em} .container{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box} .column,.columns{width:100%;float:left;box-sizing:border-box} @media (min-width: 550px) { .container{width:90%} .column,.columns{margin-left:4%} .column:first-child,.columns:first-child{margin-left:0} .one.column,.one.columns{width:4.66666666667%} .two.columns{width:13.3333333333%} .twohalf.columns{width:16%} .three.columns{width:22%} .four.columns{width:30.6666666667%} .five.columns{width:39.3333333333%} .six.columns{width:48%} .seven.columns{width:56.6666666667%} .eight.columns{width:65.3333333333%} .nine.columns{width:74%} .ten.columns{width:82.6666666667%} .eleven.columns{width:91.3333333333%} .twelve.columns{width:100%;margin-left:0} .one-third.column{width:30.6666666667%} .two-thirds.column{width:65.3333333333%} .one-half.column{width:48%} .offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%} .offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%} .offset-by-three.column,.offset-by-three.columns{margin-left:26%} .offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%} .offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%} .offset-by-six.column,.offset-by-six.columns{margin-left:52%} .offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%} .offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%} .offset-by-nine.column,.offset-by-nine.columns{margin-left:78%} .offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%} .offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%} .offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%} .offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%} .offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%} /* Zwischenabstand mindern */ .smallmargin .columns { margin-left: 2%; } .smallmargin .columns:first-child, .smallmargin .columns.left0 { margin-left: 0; } .smallmargin .one.columns { width: 6.5%; } .smallmargin .two.columns { width: 15%; } .smallmargin .three.columns { width: 23.5%; } .smallmargin .four.columns { width: 32%; } .smallmargin .five.columns { width: 40.5%; } .smallmargin .six.columns { width: 49%; } .smallmargin .seven.columns { width: 57.5%; } .smallmargin .eight.columns { width: 66%; } .smallmargin .nine.columns { width: 74.5%; } .smallmargin .ten.columns { width: 83%; } .smallmargin .eleven.columns { width: 91.5%; } .smallmargin .twelve.columns { width: 100%; margin-left:0 } /* Ohne Zwischenabstand */ .nomargin .columns, .nomargin .columns:first-child, .nomargin .columns.left0 { margin-left: 0; } .nomargin .one.columns { width: 8.3333333%; } .nomargin .two.columns { width: 16.6666667%; } .nomargin .three.columns { width: 25%; } .nomargin .four.columns { width: 33.3333333%; } .nomargin .five.columns { width: 41.66666665%; } .nomargin .six.columns { width: 50%; } .nomargin .seven.columns { width: 58.3333333%; } .nomargin .eight.columns { width: 66.6666667%; } .nomargin .nine.columns { width: 75%; } .nomargin .ten.columns { width: 83.3333333%; } .nomargin .eleven.columns { width: 91.66666665%; } .nomargin .twelve.columns { width: 100%; } } /* Skeleton update */ .container .columns, .container:last-child .twelve.columns { margin-bottom: 4%; } .container .columns.headline, /* Einleitung Flexible Inhalte */ .container:last-child .columns.headline, .container.einleitung .twelve.columns, /* Einleitung */ .container:last-child .columns, .container:last-child .twelve.columns:last-child { /* Section Abstand */ margin-bottom: 0; } /* Fall: columns in columns */ .container .columns .columns, .container .columns .twelve.columns:last-child { margin-bottom: 0; } @media only screen and (max-width: 550px) { /* columns fullwidth */ .container:last-child .columns { margin-bottom: 4%; } .container:last-child .columns:last-child { margin-bottom: 0%; } /* Section Abstand */ } /* Zwischenschritt fuer mobile Ansichten */ @media only screen and (min-width: 551px) and (max-width: 1024px) { .container { width: 96%; } .break-tablet .three.columns, .break-tablet.elem2 .one.column, .break-tablet.elem2 .one.columns, .break-tablet.elem2 .two.columns { width: 48%; margin-bottom: 4%; margin-left: 4%; } .break-tablet .three.columns:nth-child(odd) { margin-left: 0; } .break-tablet.elem2 .seven.columns, .break-tablet.elem2 .eight.columns, .break-tablet.elem2 .nine.columns, .break-tablet.elem2 .ten.columns, .break-tablet.elem2 .eleven.columns{ width: 100%; margin-left: 0; } .break-tablet-3er .one.column, .break-tablet-3er .one.columns, .break-tablet-3er .two.columns { width: 30.6666667%; margin-bottom: 4%; margin-left: 4%; } .break-tablet-3er.vorelem0 .one.column:nth-child(3n+1), .break-tablet-3er.vorelem0 .one.columns:nth-child(3n+1), .break-tablet-3er.vorelem0 .two.columns:nth-child(3n+1){ margin-left: 0; } .break-tablet-3er.vorelem1 .one.column:nth-child(3n+2), .break-tablet-3er.vorelem1 .one.columns:nth-child(3n+2), .break-tablet-3er.vorelem1 .two.columns:nth-child(3n+2){ margin-left: 0;} .break-tablet-3er.vorelem2 .one.column:nth-child(3n+3), .break-tablet-3er.vorelem2 .one.columns:nth-child(3n+3), .break-tablet-3er.vorelem2 .two.columns:nth-child(3n+3){ margin-left: 0; } .break-tablet-3er.vorelem3 .one.column:nth-child(3n+4), .break-tablet-3er.vorelem3 .one.columns:nth-child(3n+4), .break-tablet-3er.vorelem3 .two.columns:nth-child(3n+4){ margin-left: 0; } } @media only screen and (min-width: 551px) and (max-width: 768px) { .container.smallmargin .one.column, .container.smallmargin .one.columns, .container.smallmargin .two.columns, .container.smallmargin .three.columns { width: 49%; margin-bottom: 2%; margin-left: 2%; } } @media only screen and (min-width: 551px) and (max-width: 768px) { .container.nomargin .one.column, .container.nomargin .one.columns, .container.nomargin .two.columns, .container.nomargin .three.columns { width: 49%; margin-bottom: 2%; margin-left: 2%; } } html{font-size:62.5%} body{font-size:1.5em;font-weight:400;color:#222} body{-webkit-text-size-adjust: none;} h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300} h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem} h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem} h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem} h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem} h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem} h6{font-size:1.5rem;line-height:1.6;letter-spacing:0} @media (min-width: 550px) { h1{font-size:5rem} h2{font-size:4.2rem} h3{font-size:3.6rem} h4{font-size:3rem} h5{font-size:2.4rem} h6{font-size:1.5rem} } p{margin-top:0;line-height:1.5} input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select,.wpcf7 textarea,.wpcf7 select{height:38px;padding:6px 10px;background-color:transparent;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box} input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],.wpcf7 textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none} textarea{min-height:65px;padding-top:6px;padding-bottom:6px} input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{border:1px solid #ddd;outline:none;} label,legend{display:block;margin-bottom:.5rem;} fieldset{padding:0;border-width:0} input[type="checkbox"],input[type="radio"]{display:inline} label > .label-body{display:inline-block;margin-left:.5rem;font-weight:400} .u-full-width{width:100%;box-sizing:border-box;padding:0} .u-max-full-width{max-width:100%;box-sizing:border-box} .u-pull-right{float:right} .u-pull-left{float:left} .container:after,.row:after,.u-cf{content:"";display:table;clear:both}* { touch-action: manipulation; } *, ::before, ::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-display: swap; } body { border: 0 none; overflow-x: hidden; margin: 0; padding: 0; /* font-family: "Open Sans", Helvetica, Arial, sans-serif; Options*/ background: #ffffff; font-size: 15px; line-height: 1.5; color: #000000; } a, a:visited { outline: 0 none; text-decoration: none; color: #000000; } a:hover, a:focus { text-decoration: none; color: #000000; } p a, p a:visited { line-height: inherit; } /* Headlines */ h1, h2, h3, h4, h5, h6 { text-transform: none; overflow-wrap: break-word; letter-spacing: 0.001em; font-weight: 400; line-height: 1.6; margin-bottom: 0.3vw; } h1, h2 { font-weight: 600; } h1 { font-size: 2.4em; } h2 { font-size: 2.0em; } h3 { font-size: 1.8em; } h4 { font-size: 1.6em; } h5 { font-size: 1.4em; } h6 { font-size: 1.2em; } ul { line-height: 1.5em; margin: 0 0 0 1em; padding: 0; list-style-position: inside; } ul li { position: relative; padding: 0; } hr { clear: both; border-top: 1px solid #dddddd; margin: 0 auto; } hr.kurz { clear: both; border: 3px solid #dddddd; margin: 0 auto; height: auto; width: 60px; } .hr1 { margin: 3em auto; border: 0; border-top: 1px solid #CCC; } .hr2 { margin: 3em auto; border: 0; border-top: 1px dashed #CCC; } .hr3 { margin: 3em auto; border: 0; height: 2px; background-image: linear-gradient(to right, transparent, #CCC, transparent); } .hr4 { margin: 3em auto; border: 0; border-top: 1px dashed #CCC; border-bottom: 2px solid #CCC; height: 3px; } .hr5 { margin: 3em auto; border: 0; border-top: medium double #CCC; height: 1px; overflow: visible; padding: 0; color: #CCC; text-align: center; } .hr5::after { content: "¶"; display: inline-block; position: relative; top: -0.7em; font-size: 1.4em; padding: 0 0.3em; background: white; } /* Images */ img { display: block; height: auto; width: auto; max-width: 100%; box-sizing: border-box; } .mtop { margin: 4em 0 0 0; } .mtopbottom { margin: 4em 0 4em 0; } .full-width { height: auto; width: 100%; overflow: hidden; } .single h1, .single h2 { font-weight: normal; } .clear { clear: both; } .left0 { margin-left: 0; } .bottom2 { margin-bottom: 2% !important; } .bottom4 { margin-bottom: 4% !important; } .up { text-transform: uppercase; } .centered, .center { text-align: center; } .align-left, .links { text-align: left; } .align-right, .rechts { text-align: right; } .right { text-align: right; } .bggrau { background-color: #dddddd; } .bghell { background-color: #f2f2f2; } .floatright { float: right } .floatleft { float: left } .fa-brands, .fa-solid, .fa, .fab, .fal, .far, .fas { color: #000000; margin-right: 0.3em; } .blur .icons i { background-color: #000000; } .footerbox { padding: 0em 0 3em 0; } .event { padding: 0em 0 3em 0; } @media only screen and (min-width: 1025px) { .anker { position: absolute; top: -180px; } /* Ankers wegen header */ } /* Content */ .box, .box-module { position: relative; overflow: hidden; margin: 0; } /* Einleitung */ .container.einleitung { margin-bottom: 1.5em; } .einleitung .desc { margin-top: 1.5em; } .container.einleitung .columns { margin-bottom:0 !important; } .image-editor p { margin-top: 0.5em; margin-bottom: 1.5em; } .image-box { padding: 0.5em; } .containerbox .columns .headline, .containerbox .columns .textbox { padding: 0.5em; } .box, .box-module, .module-box, .wpbox { padding: 5em 0 5em 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .box, .box-module, .module-box, .wpbox { padding: 4em 0 4em 0; } } @media only screen and (max-width: 767px) { .box, .box-module, .module-box, .wpbox { padding: 3em 0 3em 0; } } .nopadding { padding: 0; } .columns.secthead, .columns.conthead { margin-bottom: 1.5em; } .hinweis_datenverarbeitung { padding: 3em 0 3em 0; max-width: 70%; font-style: italic; } .editor-editor > .columns > i { font-size: 8em; } .flex, .container.flex { display: flex; flex-wrap: wrap; align-items: center; } .flexcenter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .flexbottom { display: flex; flex-wrap: wrap; align-items:flex-end; } .container.fullwidth { width: 100%; max-width: 100%; padding: 0;} .padd { padding-left: 4%; padding-right: 4%; } .paddleft { padding-left: 4%; } .paddright { padding-right: 4%; } @media only screen and (max-width: 550px) { .padd, .paddleft, .paddright { padding: 0; } .fullwidth .inhalt.editor, .fullwidth .headline { padding: 0 20px; } } /* WP Galerie*/ .gallery-item { margin: 0 !important; } .gallery-item img { border: none !important; } .gallery-columns-2 .gallery-item img { max-width: 99%; } .gallery-columns-3 .gallery-item img { max-width: 98.5%; } .gallery-columns-4 .gallery-item img { max-width: 98%; } .shadow { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); background-color: #ffffff; } .shadow-bold { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .shadow .sliderbox-inhalt, .shadow .product-inhalt, .shadow .contentbox-inhalt, .shadow .inhalt, .shadow .box-inhalt, .box-bg .sliderbox-inhalt, .box-bg .product-inhalt, .box-bg .contentbox-inhalt, .box-bg .inhalt, .box-bg .top-title, .box-bg .box-inhalt, .box-bgimg .sliderbox-inhalt, .box-bgimg .product-inhalt, .box-bgimg .contentbox-inhalt, .box-bgimg .inhalt, .box-bgimg .top-title, .box-bgimg .box-inhalt { position: relative; padding: 1em 1em 0; } /* Header & Slider */ header { display: block; width: 100%; top: 0; left: 0; z-index: 999; background-color: #ffffff; } header .container .columns, header .container:last-child .twelve.columns { margin-bottom: 0; } .topinfo { padding: 0.5em 0; } .topinfo .columns.links span, .topinfo .columns.links a, .topinfo .columns.links .header-social { margin: 0 auto 0 0; } .topinfo .columns.center span, .topinfo .columns.center a, .topinfo .columns.center .header-social { margin: 0 auto; } .topinfo .columns.rechts span, .topinfo .columns.rechts a, .topinfo .columns.rechts .header-social { margin: 0 0 0 auto; } .header_topline { padding: 0.5em 0; } .header_topline i { margin-right: 0.2em; } header .container { display: flex; flex-wrap: wrap; } header .columns { display: flex; flex-wrap: wrap; align-items: center; } header .container .columns, header .container:last-child .columns { margin-bottom: 0; } header .right span { margin-left: auto; } header .left span { margin-right: auto; } header .columns.widget-bottom { justify-content:flex-end; } header .columns.widget-bottom > div, header .columns.widget-bottom .custom-html-widget { margin-left: 0; } @media only screen and (max-width: 1024px) { .header_topline { display: none; } } /* Header mit Varianten */ header.sticky #navigation > div > ul > li > a { padding: 1.3em 1em; } /* header.mit-elemente .nine.columns { display: block; } */ header.mit-elemente .header-elemente { display: flex; flex-wrap: wrap; align-items: center; width: auto; float: right; margin: 0 0 0 auto; } header.mit-elemente .phone, header.mit-elemente .mail, header.mit-elemente .header-social, header.mit-elemente .js-search, header.mit-elemente .search-form, header.mit-elemente .custom-html-widget { float: right; margin: 0.5vw 0 0.5vw 2vw; } header.mit-elemente .one .js-search { /* neben menu */ margin: 0.5em 0 0.5em auto; } header.header2 .header-elemente .js-search { margin: 0.5em 0 0.5em 2em; } header.header3 .search-form { margin: 0.5em 0 0.5em auto; } header.header3 .header-elemente .search-form { margin: 0.5em 0 0.5em 2em; } header.mit-elemente .center .header-elemente { float: none; margin: 0 auto; } #logorechts .header-elemente, .nav1.links .header-elemente { float: left; margin: 0 auto 0 0; } #logorechts .phone, #logorechts .mail, #logorechts .header-social, .nav1.links .phone, .nav1.links .mail { float: left; margin: 0.5em 2em 0.5em 0; } #logorechts .custom-html-widget, #logorechts .search { margin: 0.5em auto 0.5em 0; } #logocenter .logo { float: none; } #logocenter .center { margin: 0 auto; /* flex-center */ } /**/ #logocenter .nav1, #logocenter .nav2 { width: 100%; } #logocenter .center #navigation { float: none; margin: 0 auto; } #logocenter .center #navigation .menu { display: inline-block; } #logocenter .nav1 { margin: 0 auto 0 0; } #logocenter .nav1 #navigation, #logocenter .nav1 .header-elemente { float: left; margin: 0 auto 0 0; } #logocenter .nav2 #navigation, #logocenter .nav2 .header-elemente .custom-html-widget { float: right; margin: 0 0 0 auto; } #logocenter .header-elemente { min-height: 45px; } #logocenter .nav1 .header-elemente span { margin: 0 2em 0 0; } #logocenter .nav1 .header-elemente > div { margin-left: 0; } #logocenter .nav2 { margin: 0 0 0 auto; } /* Logo Header + Ausrichtung */ .logo, .logoscroll, .logomobil { margin: 0.5em 0; padding: 0; float: left; /* Verkleinen mit Effect */ -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; max-height: 90px; } .logolinks { justify-content: flex-start; } .logocenter { justify-content: center; } .logorechts { justify-content: flex-end; } /* Header scroll effect*/ .logoscroll { display: none; } .logomobil { display: none; } header.oncroll .logo { display: block; } header.oncroll .logoscroll { display: none; } header.sticky .logoscroll { display: block; } header.sticky .logo { display: none; } header.sticky { background-color: #ffffff; } header.sticky .logo { transition: max-width 300ms ease; max-height: 66px; } .header-elemente .pc-hide { display: none; } @media only screen and (max-width: 1024px) { .logo, header.oncroll .logo { display: none; } .logoscroll, header.oncroll .logoscroll { display: none; } .logomobil { display: block; } header .navline { display: none; } header .phone, header .mail, header .header-social, header .js-search, header .search-form, header .custom-html-widget { display: none; } #logolinks .columns { width: 60%; margin-left: 0; } #logolinks .columns:first-child { width: 40%; } #logolinks .columns.search-box { display: none; } } @media only screen and (min-width: 769px) and (max-width: 1024px) { .tablet-view, .phone.tablet-view , .mail.tablet-view, .header-social.tablet-view, .js-search.tablet-view, .search-form.tablet-view, .custom-html-widget.tablet-view, .custom-html-widget.tablet-view .custom-html-widget { display: block; } } @media only screen and (max-width: 768px) { .phone-view, .phone.phone-view , .mail.phone-view, .header-social.phone-view, .js-search.phone-view , .search-form.phone-view, .custom-html-widget.phone-view, .custom-html-widget.phone-view .custom-html-widget { display: block; } } @media only screen and (max-width: 767px) { header .container .columns { margin-bottom: 0; } } /* Header - Logo links - Kontaktdaten*/ .header-links-2 .kontaktdaten { position: relative; display: block; float: right; margin: 0 0 0 auto; padding-top: 15px; font-weight: 600; font-size: 0.9em; text-align: right; margin-left: 5em; } .header-links-2 .kontaktdaten .telefon { margin-left: 2em; } .header-links-2 .header-social { position: relative; display: block; float: right; padding-top: 15px; text-align: right; } .header-links-2 .header-social i { position: relative; display: inline-block; font-size: 1.2em; margin-left: 1em; } /* Header - Logo rechts */ #logorechts .logo { float: right; } #logorechts #navigation { float: left; margin: 0 auto 0 0; } /* Header Positionen */ header.fixed { position: fixed; top: 0; left: 0; z-index: 999; } header.absolute { position: absolute; top: 0; left: 0; z-index: 999; } header.relative { position: relative; } .search-form { position: relative; width: 100%; max-width: 100%; } .search-form .search-field { width: 100%; } .search-form .search-submit { position: absolute; top: 1px; bottom: 1px; right: 5px; background-color: inherit; border: none; padding: 0 4px; font-size: 1.2em; vertical-align: middle; } #sidebar .search-form { margin-bottom: 2em; } @media only screen and (min-width: 801px) and (max-width: 1024px) { .container.menu-t-m-oben .columns { width: 100%; margin-left: 0; } .container.menu-t-oben-m-aus .columns { width: 100%; margin-left: 0; } .container.menu-t-m-aus > .three { display: none; } .container.menu-t-m-aus > .nine { width: 100%; margin-left: 0; } } @media only screen and (min-width: 551px) and (max-width: 800px) { .container.menu-default > .three { display: none; } .container.menu-default .columns { width: 100%; margin-left: 0; } .container.menu-t-oben-m-aus > .three { display: none; } .container.menu-t-oben-m-aus > .nine { width: 100%; margin-left: 0; } .container.menu-t-m-aus > .three { display: none; } .container.menu-t-m-aus > .nine { width: 100%; margin-left: 0; } } @media only screen and (max-width: 550px) { .container.menu-default > .three, .container.menu-t-oben-m-aus > .three, .container.menu-t-m-aus > .three { display: none; } } /* Header search */ header .search { clear: none; float: right; max-width: 160px; margin: 6px 0 0 12px; line-height: 1; } header input[type="search"] { height: auto; line-height: 1.5; border: 1px solid #D1D1D1; border-radius: 0px; background-color: transparent; font-size: 15px; padding: 4px 10px; font-weight: 600; } header .search .search-submit { font-size: 0.9em; height: auto; background-color: transparent; } header input::-webkit-input-placeholder { color: #000000; } header input::-moz-placeholder { color: #000000; } header input:-moz-placeholder { color: #000000; } header input:-ms-input-placeholder { color: #000000; } header .spicewpsearchform input::-webkit-input-placeholder { color: #000000; opacity: 1; } header .spicewpsearchform input::-moz-placeholder { color: #000000; opacity: 1; } header .spicewpsearchform input:-moz-placeholder { color: #000000; opacity: 1; } header .spicewpsearchform input:-ms-input-placeholder { color: #000000; opacity: 1; } /* Header - mobile Ansicht */ @media only screen and (max-width: 1024px) { .logo { max-width: 240px; max-height: 80px; padding: 0.5em 0 0 0; float: none; } } @media only screen and (max-width: 767px) { .logo { max-width: 200px; max-height: 60px; } } @media only screen and (max-width: 600px) { header .kontaktdaten { display: none; } header .header-social { display: none; } } /* js header Suche */ .js-search .fa-search { padding: 6px; color: #000000; border: 1px solid #000000; } .fa-search:hover, .fa-xmark:hover { cursor: pointer; } header .spicewpsearchform .search { position: relative; display: block; width: 100%; max-width: 100%; margin: 0 !important; padding: 0; } .spicewpsearchform input[type="search"], .spicewpsearchform .fa-search, .spicewpsearchform .fa-xmark { border: none; } .spicewpsearchform .search .search-field { width: 95%; } header .spicewpsearchform .fa-search, header .spicewpsearchform .fa-xmark { font-size: 1.1em; margin: 0; padding: 0.3em; } .spicewpsearchform .search .search-submit, .spicewpsearchform .close, .spicewpsearchform .menusearchclose { position: absolute; top: 0; right: 0; border: none; padding: 0; font-size: 1.1em; background-color: transparent; } .spicewpsearchform .close, .spicewpsearchform .menusearchclose { right: 0.3em;} .spicewpsearchform { position: absolute; display: block; right: 0; top: 100%; height: auto; z-index: 1; background-color: #ffffff; padding: 0; width: calc(100vw - 17px); margin-left: calc(-100vw / 2 + (100% + 17px) / 2); margin-right: calc(-100vw / 2 + (100% + 17px) / 2); border: none; border-top: 1px solid #000000; max-width: 100vw; } .spicewpsearchform .container { margin: 1em auto; } /* end js header suche */ #mobile { display: none; } /* Mobile Menu verstecken */ /* Navigation Header */ #navigation { position: relative; float: right; margin: 0 0 0 auto; display: block; clear: both; } #navigation ul, #navigation ul li, #navigation ul li a, #navigation #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1.5; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #navigation ul li { /* display: inline-block; */ float: left; } #navigation > div > ul > li > ul { opacity: 0; transform: translateY(5%); transition: all 300ms ease; pointer-events: none; z-index: 2; } #navigation > div > ul > li:hover > ul { opacity: 1; transform: translateY(0%); pointer-events: auto; } #navigation > div > ul > li:first-child > a { padding-left: 0 !important; } #navigation > div > ul > li:last-child > a { padding-right: 0 !important; } #navigation:after, #navigation > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #navigation #menu-button { display: none; background-color: #ffffff; } #navigation ul li a { /* font-family: "Open Sans", Helvetica, Arial, sans-serif; Options */ padding: 1em 1em; font-weight: 400; /* text-transform: uppercase; */ font-size: 1em; text-decoration: none; letter-spacing: 1px; white-space: nowrap; /* color: #000000; Options */ } #navigation ul li a:hover { color: #000000; } #navigation > ul > li { float: left } /* Level 1 */ #navigation > div > ul > li > a { font-size: 1em; letter-spacing: 1px; text-decoration: none; padding: 2.4em 1em; color: #000000; } #navigation > div > ul > li > a:hover { color: #000000; } /* Last Submenus right */ #navigation > div > ul > li:last-child ul ul { right: 100%; width: 100%; } /* level 2 */ #navigation ul ul { position: absolute; left: -9999px } #navigation.align-right ul ul { text-align: right } #navigation ul ul li { display: block; height: 0; text-align: left; min-width: 100%; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); } #navigation li:hover > ul { left: auto } #navigation.align-right li:hover > ul { left: auto; right: 0 } #navigation li:hover > ul > li { height: auto; } #navigation ul ul ul { margin-left: 100%; top: 0 } #navigation.align-right ul ul ul { margin-left: 0; margin-right: 100% } #navigation ul ul li a, #navigation ul ul ul li a { padding: 0.8em 2em 0.8em 1em; width: auto; font-size: 1.0em; text-decoration: none; font-weight: 400; z-index: 1000 !important; background: #ffffff; color: #000000; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } #navigation ul ul li:last-child > a, #navigation ul ul li.last-item > a { border-bottom: 0; } #navigation ul ul li:hover > a, #navigation ul ul li a:hover, #navigation ul ul li.current-menu-item a { color: #000000; } #navigation ul ul li.menu-item-has-children > a::after { position: absolute; top: 22px; right: 12px; width: 8px; height: 2px; display: block; background: #000000; content: ''; } #navigation ul ul li.menu-item-has-children > a::before { position: absolute; top: 19px; right: 15px; display: block; width: 2px; height: 8px; background: #000000; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #navigation ul ul > li.menu-item-has-children:hover > a::before { top: 16px; height: 0 } .searchresultlist { padding: 0.5em 0 0.5em 0; } .searchresultlist li { list-style: none; padding: 0.2em 0 0.2em 0.2em; line-height: 1.8em; } .searchresultlist span { margin-bottom: 0.2em; } /* Pagination */ .numeric ul { padding-left: 0; margin: 0.8em auto; } .numeric ul li { padding-left: 0 !important; } .numeric li a, .numeric li a:hover, .numeric li.active a, .numeric li.disabled { color: #ffffff; text-decoration: none; list-style: none; } .numeric li { display: inline; } .numeric li a, .numeric li a:hover, .numeric li.active a, .numeric li.disabled { background-color: #000000; border-radius: 3px; cursor: pointer; font-size: 1.2em; font-weight: 600; line-height: 2em; padding: 0.4em 0.5em; } .numeric li a.button { padding: 0 1em; } .numeric li a:hover, .numeric li.active a { background-color: #000000; } .numeric ul li::before { content: none !important; } @media only screen and (min-width: 1161px) and (max-width: 1320px) { #navigation > div > ul > li > a { font-size: 0.95em !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } } @media only screen and (min-width: 1025px) and (max-width: 1160px) { #navigation > div > ul > li > a { font-size: 0.9em !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } } .intro, .introdefault, .introsingle, .slider { position: relative; margin: 0; min-height: 100px; } .introleer { position: relative; min-height: 0; } @media only screen and (max-width: 1024px) { .intro, .introleer, .introdefault, .introsingle, .slider { margin: 0 !important; } } /* Intro Formular */ .intro .wpcf7 { padding: 2em; background-color: rgba(0, 0, 0, 0.2); } .intro .wpcf7 input, .intro .wpcf7 textarea { height: auto; padding: 3px 5px; line-height: 1.8; font-size: 0.8em; } .intro .wpcf7 textarea { height: 150px; min-height: 150px; } .intro .wpcf7-list-item { text-align: left; margin-left: 0.5em; } .intro .wpcf7-not-valid-tip, .intro .wpcf7-response-output { padding: 3px 5px; line-height: 1.2; color: #ffffff; font-size: 0.8em; } .intro .wpcf7 input[type="submit"], .intro .wpcf7 input[type="submit"]:focus, .intro .wpcf7 input[type="submit"]:visited { background-color: transparent; border: 2px solid #000000; color: #000000; padding: 5px 10px; margin: 1em auto 0; line-height: 1.5; } .intro .wpcf7 input[type="submit"]:hover { background-color: #000000; border: 2px solid #000000; color: #ffffff; } .intro .wpcf7 label, .intro .wpcf7 legend { margin: 0.4em auto; } .intro .wpcf7 p { line-height: 1.2; margin: 0; } .intro .wpcf7 span, .intro .wpcf7 a { color: #ffffff; } .intro .columns.caption { margin-top: 2em; margin-bottom: 2em; } .flex, .container.flex, .caption-wrap .caption { display: flex; flex-wrap: wrap; align-items: center; } .caption-wrap .caption, .introcaption, .caption, .caption.flex-center, .flex-center .caption { position: relative; } .flex-center { margin: 0 auto; /* flex-center */ } .text-center, .caption.text-center, .text-center .caption { text-align: center; } .caption-wrap .caption { top: 0; } .introcaption { top: 0; } .flex-left, .caption.flex-left, .flex-left .caption { margin: 0 auto 0 0; } .text-left, .caption.text-left, .text-left .caption { text-align: left; } .flex-right, .caption.flex-right, .flex-right .caption { margin: 0 0 0 auto; } .text-right, .caption.text-right, .text-right .caption { text-align: right; } .text-right .flex-direction-nav .flex-prev { text-align: left; /* for arrow */ } /* Slider/Intro Position */ .satzlinks .caption-wrap .caption, .introcaption.satzlinks { text-align: left; margin-left: 19%; } .satzrechts .caption-wrap .caption, .introcaption.satzrechts { text-align: right; margin-right: 19%; } /* Slider/Intro Headlines */ .intro .caption h1, .caption-wrap h1, .slickbox h1, .introcaption h1 { color: #ffffff; font-size: 2em; letter-spacing: 0.05em; font-weight: 600; line-height: 1.2; margin-bottom: 0.1em; } .intro .caption h2, .caption-wrap h2, .slickbox h2, .introcaption h2 { color: #ffffff; font-size: 1.8em; letter-spacing: 0.05em; font-weight: 400; line-height: 1.2; } @media only screen and (min-width : 1224px) and (max-width : 1824px) { .intro .caption h1, .caption-wrap h1, .slickbox h1, .introcaption h1 { font-size: 2.0em; } .intro .caption h2, .caption-wrap h2, .slickbox h2, .introcaption h2 { font-size: 1.8em; } } @media only screen and (min-width : 1025px) and (max-width : 1224px) { .intro .caption h1, .caption-wrap h1, .slickbox h1, .introcaption h1 { font-size: 2.0em; } .intro .caption h2, .caption-wrap h2, .slickbox h2, .introcaption h2 { font-size: 1.8em; } } @media only screen and (max-width: 1024px) { header .topinfo { display: none; } .header-links-2 .header-social, .header-links-2 .kontaktdaten { display: none; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .intro .caption h1, .caption-wrap h1, .slickbox h1, .introcaption h1 { font-size: 2em; } .intro .caption h2, .caption-wrap h2, .slickbox h2, .introcaption h2 { font-size: 1.6em; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .intro .caption h1, .caption-wrap h1, .slickbox h1, .introcaption h1 { font-size: 2em; } .intro .caption h2, .caption-wrap h2, .slickbox h2, .introcaption h2 { font-size: 1.4em; } } @media only screen and (max-width: 479px) { .intro .caption h1, .caption-wrap h1, .slickbox h1, .introcaption h1 { font-size: 1.8em; } .intro .caption h2, .caption-wrap h2, .slickbox h2, .introcaption h2 { font-size: 1.4em; } } /* Intro */ .intro, .introdefault, .introsingle { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; /* Gleiche Hoehe für Columns */ flex-wrap: wrap; align-items: center; overflow: hidden; margin: 0; padding: 0; background-attachment: scroll; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .intro.fullscreenintro { min-height: 100vh; height: 100vh; margin: 0; padding: 0; } .introcaption { position: relative; display: block; } .intro .caption img { margin: 0; } @media only screen and (min-width: 1025px){ .intro .container.monitor { display: flex; } .intro .container.tablet { display: none; } .intro .container.mobile { display: none; } } @media only screen and (min-width: 551px) and (max-width: 1024px) { .intro .container.monitor { display: none; } .intro .container.tablet { display: flex; } .intro .container.mobile { display: none; } } @media only screen and (max-width: 550px) { .intro .container.monitor { display: none; } .intro .container.tablet { display: none; } .intro .container.mobile { display: block; } } /* Fade Effects */ .fadeOutBottom div:nth-child(1), .fadeOutBottom div:nth-child(1) div:nth-child(1) { animation:fadeOutBottom 2s both 0s; /* mit Wartung 2s*/ } .fadeOutBottom div:nth-child(2), .fadeOutBottom div:nth-child(1) div:nth-child(2) { animation:fadeOutBottom2 1s both 2s; } .fadeOutBottom div:nth-child(3), .fadeOutBottom div:nth-child(1) div:nth-child(3) { animation:fadeOutBottom2 1s both 3s; } .fadeOutBottom div:nth-child(4) { animation:fadeOutBottom2 1s both 4s; } .fadeOutBottom div:nth-child(5) { animation:fadeOutBottom2 1s both 5s; } /* Fade Effects - Slick Slider */ .slick-current .fadeBottom .slickslogan div:nth-child(1) { animation:fadeOutBottom 2s both 0s; /* mit Wartung 2s*/ } .slick-current .fadeBottom .slickslogan div:nth-child(2) { animation:fadeOutBottom2 1s both 2s; } .slick-current .fadeBottom .slickslogan div:nth-child(3){ animation:fadeOutBottom2 1s both 3s; } .slick-current .fadeBottom .slickslogan div:nth-child(4) { animation:fadeOutBottom2 1s both 4s; } .slick-current .fadeBottom .slickslogan div:nth-child(5) { animation:fadeOutBottom2 1s both 5s; } @keyframes fadeOutBottom { 0% { opacity: 0; visibility: hidden; transform: translate3d(0px, -85px, 0px); } 100% { opacity: 1; visibility:visible; transform: translate3d(0px, 0px, 0px); } } @keyframes fadeOutBottom2 { 0% { opacity: 0; visibility: hidden; transform: translate3d(0px, -50px, 0px); } 100% { opacity: 1; visibility:visible; transform: translate3d(0px, 0px, 0px); } } .fadeOutLeft div:nth-child(1), .fadeOutLeft div:nth-child(1) div:nth-child(1) { animation:fadeOutLeft 2s both 0s; } .fadeOutLeft div:nth-child(2), .fadeOutLeft div:nth-child(1) div:nth-child(2) { animation:fadeOutLeft 1s both 2s; } .fadeOutLeft div:nth-child(3), .fadeOutLeft div:nth-child(1) div:nth-child(3) { animation:fadeOutLeft 1s both 3s; } .fadeOutLeft div:nth-child(3) { animation:fadeOutLeft 1s both 4s; } .fadeOutLeft div:nth-child(3) { animation:fadeOutLeft 1s both 5s; } /* Fade Effects - Slick Slider */ .slick-current .fadeLeft .slickslogan div:nth-child(1) { animation:fadeOutLeft 2s both 0s; /* mit Wartung 2s*/ } .slick-current .fadeLeft .slickslogan div:nth-child(2) { animation:fadeOutLeft 1s both 2s; } .slick-current .fadeLeft .slickslogan div:nth-child(3){ animation:fadeOutLeft 1s both 3s; } .slick-current .fadeLeft .slickslogan div:nth-child(4) { animation:fadeOutLeft 1s both 4s; } .slick-current .fadeLeft .slickslogan div:nth-child(5) { animation:fadeOutLeft 1s both 5s; } @keyframes fadeOutLeft { 0% { opacity: 0; visibility: hidden; transform: translate3d(-100px, 0px, 0px); } 100% { opacity: 1; visibility:visible; transform: translate3d(0px, 0px, 0px); } } .fadeOutRight div:nth-child(1), .fadeOutRight div:nth-child(1) div:nth-child(1) { animation:fadeOutRight 2s both 0s; } .fadeOutRight div:nth-child(2), .fadeOutRight div:nth-child(1) div:nth-child(2) { animation:fadeOutRight 1s both 2s; } .fadeOutRight div:nth-child(3), .fadeOutRight div:nth-child(1) div:nth-child(3) { animation:fadeOutRight 1s both 3s; } .fadeOutRight div:nth-child(4) { animation:fadeOutRight 1s both 4s; } .fadeOutRight div:nth-child(5) { animation:fadeOutRight 1s both 5s; } /* Fade Effects - Slick Slider */ .slick-current .fadeRight .slickslogan div:nth-child(1) { animation:fadeOutRight 2s both 0s; /* mit Wartung 2s*/ } .slick-current .fadeRight .slickslogan div:nth-child(2) { animation:fadeOutRight 1s both 2s; } .slick-current .fadeRight .slickslogan div:nth-child(3){ animation:fadeOutRight 1s both 3s; } .slick-current .fadeRight .slickslogan div:nth-child(4) { animation:fadeOutRight 1s both 4s; } .slick-current .fadeRight .slickslogan div:nth-child(5) { animation:fadeOutRight 1s both 5s; } @keyframes fadeOutRight { 0% { opacity: 0; visibility: hidden; transform: translate3d(50px, 0px, 0px); } 100% { opacity: 1; visibility:visible; transform: translate3d(0px, 0px, 0px); } } /* Container */ .flexcss { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .columns.topflex { display: flex; flex-wrap: wrap; justify-content: center; /* align horizontal */ align-items: flex-start; /* align vertical */ } .columns.middleflex { display: flex; flex-wrap: wrap; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ text-align: center; } .columns.bottomflex { display: flex; flex-wrap: wrap; justify-content: center; /* align horizontal */ align-items: flex-end; /* align vertical */ } .flexcss .columns p { width: auto; } .flexcss .button i { display: inline-block; font-size: 1em; width: auto; } p.btn { margin-bottom: 0; } .flexcss .btn.center { float: none; margin: 0.5em auto; text-align: center; } .flexcss .btn.links { text-align: left; margin: 0.5em auto 0.5em 0; } .flexcss .btn.rechts { float: right; margin: 0.5em 0 0.5em auto; } .last-flex { align-self: flex-end; margin: 0 0 -0.5em 0; } .box-module.sliderboxen, .box-module.contentboxen, .box-module .contentboxen{ overflow: visible; } .sliderboxen .container, .contentboxen .container, .container.contentboxen { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; /* Gleiche Hoehe für Columns */ flex-wrap: wrap; } .sliderboxen .columns, .contentboxen .columns { position: relative; display: flex; /* Ausrichtung: Content(start) & Button(end) */ flex-wrap: wrap; } .sliderboxen .two.columns, .contentboxen .two.columns { display: block; } .sliderboxen .twelve.columns, .contentboxen .twelve.columns { display: block; } .sliderboxen .product-content, .contentboxen .product-content { position: relative; display: flex; flex-wrap: wrap; /*align-self:flex-start; /* Alle Elemente von oben nach unten */ align-self: baseline; /* Contetn nach mittlere Element ausrichten. Hier: Überschrift */ } .sliderboxen .btn-position, .contentboxen .btn-position { align-self: flex-end; padding: 0; z-index: 2; } .shadow .btn-position, .box-bg .btn-position, .box-bgimg .btn-position, .sliderboxen .shadow .btn-position, .sliderboxen .box-bg .btn-position, .sliderboxen .box-bgimg .btn-position, .contentboxen .shadow .btn-position, .contentboxen .box-bg .btn-position, .contentboxen .box-bgimg .btn-position { padding: 1em; } .contentboxen .inhalt .btn-position { padding: 1em 0 1em; } .btn-position .button.first { margin-right:0.5em; margin-top:0.5em } .btn-position .button.first:last-child { margin-right:0; } .sliderboxen .product-content, .sliderboxen .product-title, .sliderboxen .product-desc, .sliderboxen i, .sliderboxen .btn-position { width: 100%; /* wegen flex, damit elemente intern anpassen */ } .contentboxen .product-content, .contentboxen .title, .contentboxen .contentbox-inhalt, .contentboxen i, .contentboxen .btn-position { width: 100%; /* wegen flex, damit elemente intern anpassen */ } .sliderboxen .imgbox, .contentboxen .imgbox { width: 100%; overflow: hidden; margin-bottom: 0; } .imgbox .caption { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 1em; z-index: 3; } .imgbox .caption * { margin: 0; } .imgbox .left.flexcenter > *, .imgbox .left.flexbottom * { margin: 0 auto 0 0; } .imgbox .right.flexcenter *, .imgbox .right.flexbottom * { margin: 0 0 0 auto; } .sliderboxen .iconbox, .contentboxen .iconbox { width: 100%; text-align: center; } .sliderboxen .product-inhalt, .contentboxen .product-inhalt { padding: 1em; } .sliderboxen h3, .contentboxen h3 { margin-bottom: 0.3em; } .sliderboxen img, .contentboxen img { margin: 0 auto; } .sliderboxen i, .contentboxen i { display: inline-block; width: auto; font-size: 6em; padding: 0.2em; margin: 2vw auto; text-align: center; } .sliderboxen .button i, .contentboxen .button i { display: inline; width: auto; font-size: 1em; margin: 0.5em auto; } .sliderbox-inhalt, .contentbox-inhalt { width: auto; } @media only screen and (max-width: 1024px) { .sliderboxen i, .contentboxen i { font-size: 4em;} .sliderboxen .gridboxen, .contentboxen .gridboxen { margin-top: 0 !important; } } @media only screen and (max-width: 768px) { .sliderboxen i, .contentboxen i { font-size: 3.2em; } } @media only screen and (max-width: 767px) { .sliderboxen i, .contentboxen i { font-size: 6em; } } #sidebar .search-submit i { font-size: 1em; margin: 0.2em auto; } /* Bilderboxen */ .bilderboxen .columns { justify-content: center; } .bilderboxen .bilderbox-inhalt { width: 100%; } .bilderboxen .imgbox { border: 1px solid #ffffff; box-sizing: border-box; overflow: hidden; margin-bottom: 1em; } /* Scale */ .effect1 .imgbox img { display: block; margin: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .effect1 .imgbox img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .dreieckb { position: absolute; left: 50%; margin-left: -40px; top: 0; width: 0px; height: 0px; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-style: solid; border-width: 40px 40px 20px; border-color: #ffffff transparent transparent transparent; } /* Video beim Parallax mit Buttons einbiden */ .video-topabstand { margin-top: 3em; } .video-botabstand { margin-bottom: 3em; } .video-wrapper { width: 100%; max-width: 560px; height: auto; margin: 0 auto; } .video { position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-wall div { display: flex; flex-direction: column; min-height: 100px; top: 30%; bottom: auto; } @media only screen and (min-width: 1200px) and (max-width: 1440px) { .video-wall div { top: 25%; } .four .video-wall div { top: 10%; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .container.filmgalerie { width: 100%; } .video-wall div { top: 20%; } .six .video-wall div { top: 10%; } .four .video-wall div { top: 2%; } } @media only screen and (max-width: 767px) { .filmgalerie .columns { width: 100%; margin-left: 0; text-align: center; } } @media only screen and (min-width: 550px) and (max-width: 767px) { .six .video-wall div { top: 2%; } } /* Bildboxen Reihe */ .bildreihe { position: relative; display: block; z-index: 1; color: #ffffff; padding: 0; } .bildreihe .einleitung { margin-top: 5em; } .bildreihe .bildbox { position: relative; float: left; display: flex; flex-wrap: wrap; background-color: #ffffff; box-sizing: border-box; padding: 0; width: 100%; min-height: 400px; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bildreihe .bg { /*background-color: rgba(0, 0, 0, 0.3);*/ display: flex; flex-wrap: wrap; align-content: center; text-align: center; color: #ffffff; width: 100%; padding: 1em; /* -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; */ } .bildreihe .vierbilder { width: 25%; } .bildreihe .dreibilder { width: 33.333333%; } .bildreihe .zweibilder { width: 50%; } .bildreihe .bildbox h3 { color: #ffffff; text-shadow: 2px 2px 4px #444; } .bildreihe .bildbox:hover .bg, .bildreihe .bildbox:hover .bg h3 { /*background-color: rgba(0, 0, 0, 0);*/ color: transparent; text-shadow: none; } .bildreihe .title { margin: 0 auto; } .bildreihe .bildbox .bg span { text-shadow: 2px 2px 4px #444; } .bildreihe .bildbox:hover .bg span { text-shadow: none; } @media only screen and (min-width: 551px) and (max-width: 1024px) { .bildreihe .bildbox.vierbilder { width: 50% !important; margin: 0 !important; } .bildreihe.imgmargin .bildbox.vierbilder { width: 48% !important; margin: 1% !important; } } @media only screen and (min-width: 551px) and (max-width: 767px) { .bildreihe .bildbox.dreibilder { width: 100% !important; margin: 0 !important; } .bildreihe.imgmargin .bildbox.dreibilder { width: 98% !important; margin: 1% !important; } } @media only screen and (max-width: 550px) { .bildreihe .bildbox { width: 100% !important; margin: 0 !important; } .bildreihe.imgmargin .bildbox { width: 98% !important; margin: 1% !important; } } /* Ende Bildboxen Reihe */ /* Bildboxen 2 Reihe */ .bildboxen img { width: 100%; } .bildboxen .container, .bildboxen .container .columns, .bildboxen .columns img { margin-bottom: 0; } .bildboxen .container.einleitung { margin-bottom: 3em; } .bildboxen .columns .bildbox { position: relative; margin-bottom: 1vw; } .bildboxen .columns .bildbox:last-child { position: relative; margin-bottom: 2vw; } .bildboxen.style1 .boxcontent{ font-size: 0.92em; padding: 0.1em 0.9em 0.1em; border-left: 1px solid #000000; margin-top: -5px; /* wegen bild */ } .bildboxen.style1 .columns .bildbox:last-child .boxcontent{ min-height: 115px; display: flex; flex-wrap: wrap; align-items: flex-end; } .bildboxen.style1 .boxcontent::after { content: ''; position: absolute; display: block; left: 0; bottom: 0; background-color: #000000; width: 50px; height: 1px; } .bildboxen.style1 .bildbox { margin-bottom: 1.7vw; } .bildboxen.style2 .bildbox { display: flex; flex-wrap: wrap; margin-bottom: 1.7vw; } .bildboxen.style2 .boxcontent { position: absolute; display: flex; flex-wrap: wrap; left: 0; bottom: 0; width: 100%; height: 100%; text-align: center; /*background-color: rgba(0,0,0,0.3);*/ } .bildboxen.style2 .bildbox img{ margin-bottom: 0 !important; } .bildboxen.style2 .boxcontent * { margin: auto; } @media only screen and (min-width: 551px) and (max-width: 1024px) { .bildboxen .container .three.columns { width: 49% !important; margin-left: 2% !important; } .bildboxen .container .three.columns:nth-child(odd) { margin-left: 0 !important; } } @media only screen and (max-width: 550px) { .bildboxen.style2 .bildbox { margin-bottom: 3vw; } /* .bildboxen .columns { width: 48%; margin-left: 4%; margin-bottom: 0; } */ .bildboxen .container .columns:first-child, .bildboxen .container .columns { width: 100% !important; margin-left: 0 !important; } .bildboxen .columns .bildbox, .bildboxen .columns .bildbox:last-child { margin-bottom: 2em; } } /* Ende Bildboxen2 Reihe */ /* Kundenstimmen */ .box.kundenstimmen { margin: 0; padding: 5em 0 5em; } .box.kundenstimmen header .twelve { margin-top: 0; } @media only screen and (max-width: 1200px) { .box.kundenstimmen .container { width: 90%; } } .box.kundenstimmen ul li { padding-left: 0; line-height: 1; } .kundenstimmen .rundbild { border-radius: 100%; margin: 0em auto 1em; max-width: 200px; } .kundenstimmen ul li::before { content:none !important; } .kundenstimmen p { font-style: italic; } .kundenstimmen span { font-size: 1.4em; text-transform: uppercase; color: #888; } /* Kundenstimmen Slick Slider */ .kundenstimmen .slick-slide { outline: none !important; } .carousel-kundenstimmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top:3em; } .kundenstimmen .slick-prev::before, .kundenstimmen .slick-next::before { font-family: "Font Awesome 6 Free" !important; font-weight: bold !important; font-size: 30px !important; height: 30px !important; color: #999999 !important; top: 47%; } .kundenstimmen .slick-prev::before { content: "\f104" !important; } .kundenstimmen .slick-next::before { content: "\f105" !important; } .kundenstimmen .slick-prev { left: -30px; } .kundenstimmen .slick-next { right: -30px; } .kundenstimmen .slick-dots { width: auto; margin: 0 auto; bottom: -35px; } .kundenstimmen .slick-dots li button { border: 1px solid #000000; border-radius: 10px; } .kundenstimmen .flex { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; } .kundenstimmen .slick-slide img { margin: 0 auto 0.5em; max-width: 200px; } .kundenstimmen .bewertung { width: 80%; margin: 0 auto; max-width: 800px; } /* .carousel-kundenstimmen .blockquote { position: relative; display: block; width: 100%; } .carousel-kundenstimmen .blockquote::before, .carousel-kundenstimmen .blockquote::after { position: absolute; font-family: "Font Awesome 5 Free" !important; font-weight: bold !important; font-size: 2em; color: #999999; opacity: 0.3; z-index: 1; } .carousel-kundenstimmen .blockquote::before{ content: "\f10d" !important; top: -15px; left: -36px; } .carousel-kundenstimmen .blockquote::after{ content: "\f10e" !important; bottom: -15px; right: 0; } @media screen and (max-width: 550px){ .carousel-kundenstimmen .blockquote::before{ left: 0; } } */ /* END Slick Slider */ /* Breadcrumb */ .breadcrumb { margin: 0; padding: 0.8em 0; font-weight: normal; letter-spacing: .1rem; text-decoration: none; white-space: normal; line-height: 2em; font-size: 1em; } .breadcrumb .container .twelve.columns { margin-bottom: 0 !important; } .produkte-box { margin: 0; padding: 3em 0 0 0; overflow: hidden; } #arrow { border-right: 2px solid black; border-bottom: 2px solid black; width: 10px; height: 10px; transform: rotate(-45deg); margin-top: 40px; } .topbox { margin: 0; padding: 5em 0 3em 0; overflow: hidden; } .bigbox { margin: 0; padding: 7em 0 7em 0; overflow: hidden; } .smallbox { margin: 0; padding: 3em 0 3em 0; overflow: hidden; } .sortimentbox { background: #f2f2f2; padding: 1.5em 0 1.5em 0; } .sortimentbox h2 { margin: 0 0 1em 0; } .sortimentbox p { padding: 1em 0 1em 0; margin: 0 auto; max-width: 50%; text-align: center; } .sortimentbox img { max-width: 100%; max-height: 100%; } .abstand { height: 2.5em; display: block; clear: both; } /* Button Allgemein */ .button { font-family: "Open Sans", Helvetica, Arial, sans-serif; display: inline-block; height: auto; padding: 0 1em; color: #000000; text-align: center; font-size: 1.1em; font-weight: 600; line-height: 2em; text-transform: uppercase; text-decoration: none; white-space: wrap; background-color: transparent; border: 1px solid #000000; cursor: pointer; box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; letter-spacing: 1px; border-radius: 0px; margin-top: 0.5em; margin-bottom: 0.5em; } .button i { margin-right: 0.2em; } @media only screen and (max-width: 1024px) { .button { font-size: 1em; } } .button.first { color: #ffffff; background-color: #000000; border: 2px solid #000000; margin-right: 0.5em; } .button.first i { color: #ffffff; } .button.first:hover, .button.first.active { color: #ffffff; background-color: #000000; border: 2px solid #000000; } .button.first:hover i { color: #ffffff; } .button.second { color: #000000; background-color: transparent; border: 2px solid #000000; } .button.second i { color: #000000; } .button.second:hover { color: #ffffff; background-color: #000000; border: 2px solid #000000; } .button.second:hover i { color: #ffffff; } .button.grey { color: #ffffff; background-color: #000000; border: 2px solid #000000; margin-left: 0.5em; } .button.grey i { color: #ffffff; } .button.grey:hover { color: #ffffff; background-color: #000000; border: 2px solid #000000; } .button.grey:hover i { color: #ffffff; } .linieleft:after { content: ''; display: block; height: 6px; background-color: #dddddd; width: 60px; margin: 0.7em 0; } .liniecenter:after { content: ''; display: block; height: 6px; background-color: #dddddd; width: 60px; margin: 0.7em auto; } .linieright:after { content: ''; display: block; height: 6px; background-color: #dddddd; width: 60px; margin: 0.7em 0 0.7em auto; } .zertifikate .columns { margin-top: 3em; } .zertifikate img { margin: 0 auto; } /* Parallax Boxen */ .cta, .bgimg { position: relative; padding: 5em 0 5em; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; } .box-bgimg { /* Columns */ background-repeat: no-repeat; background-size: cover; background-position: center center; } .cta:before, .bgimg:before, .box-bgimg:before { position: absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; } .cta::before, .cta-parallax::before, .bgimg:before, .box-bgimg:before { background-color: #ffffff; background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.38) -22%, rgba(0, 0, 0, 0.16) 91%); background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.38) -22%, rgba(0, 0, 0, 0.16) 91%); background: linear-gradient(0deg, rgba(0, 0, 0, 0.38) -22%, rgba(0, 0, 0, 0.16) 91%); } .cta-parallax { padding: 3em 0 3em; text-align: left; } .cta-parallax .cta1spalte { border-left: 3px dotted #333333; padding-left: 3em; } .cta-parallax h4 { font-size: 2em; margin: 0.5em 0; font-weight: 600; line-height: 1.5; } .cta-parallax h5 { font-size: 1.6em; margin-bottom: 0.5em; font-weight: 400; line-height: 1.5; } .cta.pattern { background-repeat: repeat; background-size: auto auto; background-attachment: scroll; } @media only screen and (max-width: 1024px) { .cta-parallax .cta1spalte { padding-left: 1em; } } /* Leistungen Module*/ .box.leistung { margin: 0; padding: 5em 0 5em 0; overflow: hidden } .container.leistungen { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; /* Gleiche Hoehe für Columns */ flex-wrap: wrap; } .leistungen .columns { position: relative; display: flex; /* Ausrichtung: Content(start) & Button(end) */ flex-wrap: wrap; } .leistungen .product-content { position: relative; display: flex; flex-wrap: wrap; /*align-self:flex-start; /* Alle Elemente von oben nach unten */ align-self: baseline; /* Contetn nach mittlere Element ausrichten. Hier: Überschrift */ } .leistungen .product-content > div { width: 100%; text-align: center; } .leistungen .product-content > div img { float: none; max-height: 300px; } .leistungen .btn-position { align-self: flex-end; padding: 1em; } .leistungen .product-content, .leistungen .product-title, .leistungen .product-desc, .leistungen .btn-position { width: 100%; /* wegen flex, damit elemente intern anpassen */ } .leistungen > .columns { margin-bottom: 2em; background-color: #ffffff; } .leistungen > .columns .whitebox { margin-bottom: 2em; background: #ffffff; } .leistungen img { margin: 0 auto 0.5em 0; } .leistungen i { display: block; font-size: 6em; margin: 0.9em auto; text-align: center; } .leistungen .button i { display: inline; font-size: 1em; margin: 0.5em auto; } /* Leistungen image Scale */ .leistungen .product-content > div { overflow: hidden; } .leistungen .product-content > div img { float: left; margin: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .leistungen .product-content > div img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /* Leistungen Awesome */ .leistungen-awesome .six.columns { display: flex; flex-wrap: wrap; } .leistungen-awesome .six.columns .columns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .leistungen-awesome i { font-size: 4em; } .leistungen-awesome h3 { width: 100%; } .leistungen-awesome .button.first { margin-top: 2em; } @media only screen and (max-width: 1024px) { .leistungen i { font-size: 4em; } } @media only screen and (max-width: 768px) { .leistungen i { font-size: 3.2em; } } @media only screen and (max-width: 479px) { .leistungen .three.columns, .leistungen .four.columns, .leistungen .six.columns { width: 100% !important; margin-left: 0; } .leistungen i { font-size: 6em; } } /* Template Service/Module*/ .service-lestungen > .columns { margin-bottom: 2em; } .service-lestungen h3 { width: 100%; font-weight: 600; margin-bottom: 0.3em; } .service-lestungen img { margin: 0.5em auto; } /* BOX NEWS */ .news { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin: 2em auto; } .news .thumbnail { text-align: center; display: flex; align-items: center; justify-content: center; } .news .beitragsdatum { box-sizing: border-box; width: 100%; background-color: #f2f2f2; display: block; text-align: center; border-bottom: 4px solid #dddddd; padding: 2em; white-space: normal; } .news .beitragsdatum h4 { font-size: 2.7em; margin-bottom: 0; font-weight: 300; line-height: 1; } .news .beitragsdatum h6 { font-size: 22px; margin-bottom: 0; font-weight: 400; } .news .beitragsdatum span { font-size: 17px; font-weight: 300; opacity: 0.7; } /* Button Kontaktformular */ #button { background-color: #888888; width: auto; height: auto; margin: 0.5em 0; border: none; border-radius: 0.2em; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; text-transform: none; font-size: 1em; line-height: 1.2; font-weight: normal; padding: 0.6em 1em; text-shadow: 1px 1px rgba(0, 0, 0, 0.4); color: #ffffff; } #button:hover { background-color: #999999; } #button a:hover { color: #ffffff; } /* Team */ .team .container { margin-top: 3em; } .team .container:first-child { margin-top: 0; } .team .teamrow, .teamrow .mitarbeiter { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin-bottom: 3em; } .container.teamrow { margin-top: 3em; } .teamrow .mitarbeiter .userkontakt { align-self: flex-end; } .teamrow .userinfo, .teamrow .userkontakt { width: 100%; } .teamrow .userinfo, .teamrow .userinfo h2, .teamrow .userinfo h5, .teamrow .mitarbeiter img { margin-bottom: 10px; } /* Footer */ footer { position: relative; clear: both; border-top: 2px solid #000000; background-color: #000000; font-size: 1.0em; margin: 0 auto; padding: 4em 0em; color: #fff; line-height: 1.7; } footer a, footer a:visited { color: #dddddd; } footer a:hover, footer a:focus { color: #ffffff; } /* FOOTER 7 */ .footer-7 { clear: both; font-size: 0.9em; font-weight: 600; margin: 0 auto; padding: 3em 0em 3em 0em; line-height: 1.7; text-transform: none; letter-spacing: 0.1rem; } #footermenu-7 { margin-top: 3em; font-size: 0.9em; line-height: 1.2; text-shadow: none; margin-right: 2.2em; } #footermenu-7 ul { margin: 0 auto; padding: 0; list-style: none; } #footermenu-7 ul li { margin: 0; padding: 0 0.2em 0 0; display: inline; } #footermenu-7 li a { font-size: 1em; background-image: none; display: inline; margin: 0; padding: 0; text-decoration: none; letter-spacing: 0.1rem; text-transform: uppercase; } #footermenu-7 li a:after { content: " | "; } #footermenu-7 li:last-child a:after { content: ""; } /* Copyright */ .footer-line-1 { text-align: left; padding: 0.6em 0 0.3em 0; } .footer-line-2 { text-align: center; padding: 0.6em 0 0.3em 0; } .footer-line-3 { text-align: center; padding: 0.6em 0 0.3em 0; } .footer-line-4 { text-align: center; padding: 0.6em 0 0.3em 0; } .footer-line-5 { text-align: center; padding: 0.6em 0 1em 0; } .footer-line-6 { font-size: 0.8em; text-align: center; padding: 1em 0 1em 0; } .footer-line-7 { font-size: 0.8em; text-align: center; padding: 1em 0 1em 0; } /* Footer DC Logo */ .dc { position: absolute; right: 1em; bottom: 1em; } img.dc { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); opacity: 0.55; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; width: 40px; height: auto; } img.dc:hover { -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); opacity: 1; } .box.error { padding: 15em 0; min-height: 80vh; } .box.error .search-form { max-width: 50%; margin: 3em auto; } /* Mobile Ansicht */ /*