@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css); .container > *, .row > * { margin: 0; padding: 0; font-family: 'Red Hat Text', sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; } .container { margin: 0 auto; } .logo { margin: 0; padding: 2rem; text-align: center; background: #333; } .logo img { margin: 0 auto; } .categories { background: #0055A4; border-top: 1px solid #e9e9e9; margin-bottom: 20px; } .categories-table { display: table; margin: 0 auto; } .categories ul { margin: 0 auto; padding: 0; height: 60px; list-style: none; position: relative; } .categories ul li { display: inline; float: left; margin: 0; list-style-type: none; line-height: 50px; position: relative; top: -4px; width: 100%; background: #333333; border-bottom: 1px solid #aaa; } .categories ul li a { margin: 0; padding: 0; color: #eeeeee; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; padding-left: 2rem; display: block; } ul.main-nav > li > a:after { content: ''; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #60b4ff; box-shadow: 0 0 8px #ffffff, 0 0 16px #03bcf4, 0 0 32px #03bcf4, 0 0 64px #03bcf4, 0 0 120px #03bcf4; height: 2px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } ul.main-nav > li > a:hover:after, ul.main-nav > li > a:focus:after, ul.main-nav > li > a:active:after { right: 0; } .categories ul ul { display: none; position: absolute; height: auto; background: #5c5d5d; top: 10px; left: 80%; z-index: 16; list-style-type: none; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02); transition: 0.5s; } .categories ul li:hover > ul { display: inherit; } .categories ul ul li { min-width: 100%; width: auto; float: none; display: block; position: relative; font-weight: 600; text-transform: uppercase; padding: 15px 0; margin: 0; font-size: 11px; background: #5c5d5d; list-style-type: none; line-height: 40px; } .categories ul ul li:before, div.categories ul ul li a:before { display: none; } .categories ul ul li a { display: block; margin: 0; font-size: 11px; padding: 0 30px; font-weight: 600; color: #FFFFFF !important; text-transform: uppercase; line-height: 1.1; } .categories ul ul li:hover { background: #fff; color: #0055A4; } .categories ul ul li:hover a { color: #222 !important; text-decoration: none; } .slider-bg { margin: 0 0 30px 0; padding: 0; background: #f2f2f2; overflow: hidden; } .carousel { position: relative; margin: 0; } .slider-inner { position: relative; overflow: hidden; width: 100%; } .slider-open:checked + .slider-item { position: relative; opacity: 100; } .slider-item { position: absolute; opacity: 0; -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; text-align: center; } .slider-item img { display: block; height: auto; max-width: 100%; margin: 0 auto; } .slider-control { opacity: 0; background: rgba(0, 0, 0, 0.1); border-radius: 50%; color: #fff; cursor: pointer; display: none; font-size: 40px; height: 40px; line-height: 35px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; } .slider-bg:hover .slider-control { opacity: 1; } .slider-control.prev { left: 1%; } .slider-control.next { right: 1%; } .slider-control:hover { background: rgba(0, 0, 0, 0.2); color: #fff; } #carousel-1:checked ~ .control-1, #carousel-2:checked ~ .control-2, #carousel-3:checked ~ .control-3 { display: block; } .slider-nav { opacity: 0; list-style: none; margin: 0; padding: 0; position: absolute; bottom: 2%; left: 0; right: 0; text-align: center; z-index: 10; } .slider-bg:hover .slider-nav { opacity: 1; } .slider-nav li { display: inline-block; margin: 0 5px; } .slider-bullet { color: #fff; cursor: pointer; display: block; font-size: 35px; } .slider-bullet:hover { color: #aaaaaa; } #carousel-1:checked ~ .control-1 ~ .slider-nav li:nth-child(1) .slider-bullet, #carousel-2:checked ~ .control-2 ~ .slider-nav li:nth-child(2) .slider-bullet, #carousel-3:checked ~ .control-3 ~ .slider-nav li:nth-child(3) .slider-bullet { color: #ccc; } img { max-width: 100%; height: auto; } .itemimages.galery { display: inline-block; position: relative; width: 100%; height: auto; text-align: center; } .itemimages.galery > .anchor { display: none; } .itemimages.galery > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; height: auto; overflow: hidden; white-space: nowrap; } .itemimages.galery > ul > .slide.img img { width: 100%; height: auto; } .itemimages.galery > ul > .slide { position: relative; display: inline-block; width: 100%; height: auto; overflow: hidden; line-height: normal; white-space: normal; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .itemimages.galery > .thumb { position: absolute; left: 0; width: 100%; height: auto; z-index: 6; text-align: center; } .itemimages.galery > .thumb > div { margin-left: -50%; width: 100%; } .itemimages.galery > .thumb > label { position: relative; display: inline-block; cursor: pointer; } .itemimages.galery > .thumb { bottom: 5px; margin-bottom: 5px; } .itemimages.galery > .thumb > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: none; } .itemimages.galery > .thumb > label > .anchor { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .itemimages.galery > .thumb > label:hover > .anchor, .itemimages.galery > #slide1:checked ~ .thumb > label.pic1 > .anchor, .itemimages.galery > #slide2:checked ~ .thumb > label.pic2 > .anchor, .itemimages.galery > #slide3:checked ~ .thumb > label.pic3 > .anchor, .itemimages.galery > #slide4:checked ~ .thumb > label.pic4 > .anchor, .itemimages.galery > #slide5:checked ~ .thumb > label.pic5 > .anchor, .itemimages.galery > #slide6:checked ~ .thumb > label.pic6 > .anchor, .itemimages.galery > #slide7:checked ~ .thumb > label.pic7 > .anchor, .itemimages.galery > #slide8:checked ~ .thumb > label.pic8 > .anchor, .itemimages.galery > #slide9:checked ~ .thumb > label.pic9 > .anchor, .itemimages.galery > #slide10:checked ~ .thumb > label.pic10 > .anchor, .itemimages.galery > #slide11:checked ~ .thumb > label.pic11 > .anchor, .itemimages.galery > #slide12:checked ~ .thumb > label.pic12 > .anchor, .itemimages.galery > #slide13:checked ~ .thumb > label.pic13 > .anchor, .itemimages.galery > #slide14:checked ~ .thumb > label.pic14 > .anchor, .itemimages.galery > #slide15:checked ~ .thumb > label.pic15 > .anchor, .itemimages.galery > #slide16:checked ~ .thumb > label.pic16 > .anchor { background: none; } .itemimages.galery { height: auto; max-height: auto; margin-bottom: 0; text-align: center; } .itemimages.galery img { border-radius: 3px; } .itemimages.galery .thumb { position: relative; width: 100%; text-align: left; margin-top: 10px; } .itemimages.galery > .thumb > label { box-sizing: border-box; border-radius: none; margin: 0 auto; padding: 5px; background: none; text-align: center; } .itemimages.galery > .thumb > label img { margin: 0 auto; max-height: 115px; width: auto; } .itemimages.galery > ul > .slide.img img { width: auto; max-width: 100%; max-height: 100%; margin: 0 auto; } .itemimages.galery > ul > .slide { text-align: center; } .itemimages.galery img { box-shadow: none; width: 100%; height: auto; max-width: 100%; } .itemimages.galery > #slide1:checked ~ ul > .slide.pic1, .itemimages.galery > #slide2:checked ~ ul > .slide.pic2, .itemimages.galery > #slide3:checked ~ ul > .slide.pic3, .itemimages.galery > #slide4:checked ~ ul > .slide.pic4, .itemimages.galery > #slide5:checked ~ ul > .slide.pic5, .itemimages.galery > #slide6:checked ~ ul > .slide.pic6, .itemimages.galery > #slide7:checked ~ ul > .slide.pic7, .itemimages.galery > #slide8:checked ~ ul > .slide.pic8, .itemimages.galery > #slide9:checked ~ ul > .slide.pic9, .itemimages.galery > #slide10:checked ~ ul > .slide.pic10, .itemimages.galery > #slide11:checked ~ ul > .slide.pic11, .itemimages.galery > #slide12:checked ~ ul > .slide.pic12, .itemimages.galery > #slide13:checked ~ ul > .slide.pic13, .itemimages.galery > #slide14:checked ~ ul > .slide.pic14, .itemimages.galery > #slide15:checked ~ ul > .slide.pic15, .itemimages.galery > #slide16:checked ~ ul > .slide.pic16 { opacity: 1; z-index: 2; } .itemimages.galery > ul > .slide { display: inline-block; position: absolute; left: 0; top: 0; opacity: 0; z-index: 1; -webkit-transition: opacity 1250ms ease; transition: opacity 1250ms ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); } @-webkit-keyframes fade { 0%, 37.254901960784316%, 100% { opacity: 0; } 12.254901960784315%, 25% { opacity: 1; } 0%, 24.999% { z-index: 2; } 25.001%, 100% { z-index: 1; } } @keyframes fade { 0%, 37.254901960784316%, 100% { opacity: 0; } 12.254901960784315%, 25% { opacity: 1; } 0%, 24.999% { z-index: 2; } 25.001%, 100% { z-index: 1; } } .itemimages.galery { max-width: 520px; } .itemimages.galery > ul { height: 520px; } .itemimages.galery > ul > .slide.img img { max-height: 520px; width: auto; margin: 0 auto; } .itemimages.galery > .thumb > label img { max-height: 115px; width: auto; margin: 0 auto; } @media (min-width: 992px) and (max-width: 1200px) { .itemimages.galery { max-width: 400px; } .itemimages.galery > ul { height: 400px; } .itemimages.galery > ul > .slide.img img { max-height: 400px; width: auto; margin: 0 auto; } .itemimages.galery > .thumb > label img { max-height: 80px; width: auto; margin: 0 auto; } } @media (max-width: 768px) { .itemimages.galery { max-width: 300px; } .itemimages.galery > ul { height: 300px; } .itemimages.galery > ul > .slide.img img { max-height: 300px; width: auto; margin: 0 auto; } .itemimages.galery > .thumb > label img { max-height: 55px; width: auto; margin: 0 auto; } } .itempic { margin: 0; padding: 0 20px; text-align: center; } .dsc { margin: 0; padding: 20px 10px 20px 0; letter-spacing: 1.2px; font-weight: 400; color: #414042; font-size: 13px; text-align: left; } .dsc p, .tab-content p { margin: 0; padding: 0 0 4px 0; letter-spacing: 1.2px; font-weight: 500; color: #222; font-size: 13px; } .dsc h1, .tab-content h1, .dsc h2, .tab-content h2, .dsc h3, .tab-content h3, .dsc h4, .tab-content h4 { margin: 0; padding: 0 0 10px 0; } .tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4 { margin: 10px 0 0 0; padding: 0 0 10px 0; } .dsc h1, .tab-content h1 { color: #000; font-size: 16px; font-weight: 600; letter-spacing: 1.2px; } .dsc h2, .tab-content h2 { color: #000; font-size: 18px; font-weight: 400; letter-spacing: 1.2px; } .dsc h3, .tab-content h3 { color: #000; font-size: 16px; font-weight: 400; letter-spacing: 1.2px; } .dsc h4, .tab-content h4 { color: #000; font-size: 14px; font-weight: 400; letter-spacing: 1.2px; } .dsc h5, .tab-content h5 { color: #000; font-size: 12px; font-weight: 400; letter-spacing: 1.2px; } .dsc h6, .tab-content h6 { color: #000; font-size: 10px; font-weight: 400; letter-spacing: 1.2px; } .dsc h1:after { display: block; content: ''; width: 120px; height: 1px; background: #e9e9e9; padding: 0; margin: 10px 0; } .dsc ul, .tab-content ul { margin: 0 0 20px 0; padding: 0; padding-left: 2rem; } .dsc ul li, .tab-content ul li { margin: 0; padding: 0.5em 0; list-style-type: none; letter-spacing: 1.2px; font-weight: 400; color: #414042; font-size: 13px; text-align: left; text-indent: -0.95em; padding-left: 1.2em; border-bottom: 1px dotted #f5f5f5; } .dsc ul li:last-child, .tab-content ul li:last-child { border: none; } .dsc ul li:before, .tab-content ul li:before { font-family: 'FontAwesome'; content: '\f105'; font-size: 13px; padding-right: 7px; color: #ccc; position: absolute; } span.var { display: inline-block; min-width: 60px; padding: 10px; margin: 3px 5px; color: #414042; border: 1px solid #f5f5f5; text-align: center; cursor: default; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .kaufenbox { margin-top: 20px; padding: 25px 20px; background: #fff; } .preis { margin: 0; padding: 0 10px 0 0; cursor: default; } .priceWrapper { display: flex; gap: 10px; flex-wrap: wrap; } .preis p { margin: 0; padding: 0; color: #000; font-size: 25px; font-weight: 600; text-align: left; } .preis p.rrp { text-decoration: line-through; color: #8e979f; font-size: 20px } .preis h1:after { display: none; } .preis h2 { margin: 0; padding: 5px 0 0 0; color: #444; font-size: 12px; font-weight: 300; text-align: left; } a.skb { display: block; margin: 0 0 10px 0; line-height: 50px; color: #fff; text-align: center; background: #0055A4; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; font-weight: 500; text-decoration: none !important; text-transform: uppercase; letter-spacing: 1.2px; transition: all 0.3s ease; } a.skb:hover { background: #414042; color: #fff; transition: all 0.3s ease; } a.beo, a.fsb { display: inline-block; margin: 0; padding: 0 15px 0 0; color: #444; font-weight: 400; text-decoration: none !important; letter-spacing: 1.2px; transition: all 0.3s ease; } a.beo i, a.fsb i { color: #999; padding: 0; } a.beo:hover, a.fsb:hover { color: #000; } a.beo:hover i, a.fsb:hover i { color: #000; } .tabs { margin: 50px 0; padding: 0; background: none; text-align: center; } .tabs input[type='radio'] { display: none; } .tabs label { width: auto; color: #414042; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-decoration: none; text-align: center; cursor: pointer; background: #fff; padding: 12px 16px; margin: 0 10px 0 0; overflow: hidden; text-transform: uppercase; } .tabs label span { display: inline-block; } .tabs label:hover { color:#0055A4; } .tabs label { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .tabs label:before { content: ''; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #0055A4; height: 2px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .tabs label:hover:before, .tabs label:focus:before, .tabs label:active:before { right: 0; } .tabs [id^='tab']:checked + label { color: #0055A4; } .tabs [id^='tab']:checked + label:before { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; background: #0055A4; height: 2px; } .tab-content { display: none; width: 100%; float: left; padding: 20px 6px; box-sizing: border-box; background: #fff; border-top: 1px solid #e9e9e9; margin-top: 0; text-align: left; } .tab-content th, .tab-content td { padding: 12px; vertical-align: top; } .tab-content table { border-collapse: separate; border-spacing: 3px; border: none; font-size: 16px; width: 100%; } @media (min-width: 992px) { .tab-content table { width: 50%; } } @media (min-width: 1200px) { .tabs label { top: -1px; } } #tab1:checked ~ #tab-content1, #tab2:checked ~ #tab-content2, #tab3:checked ~ #tab-content3, #tab4:checked ~ #tab-content4, #tab5:checked ~ #tab-content5, #tab6:checked ~ #tab-content6, #tab7:checked ~ #tab-content7, #tab8:checked ~ #tab-content8, #tab9:checked ~ #tab-content9 { display: block; -webkit-animation: fadein 1.5s; -moz-animation: fadein 1.5s; -ms-animation: fadein 1.5s; -o-animation: fadein 1.5s; animation: fadein 1.5s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .tabs:after { content: ''; display: table; clear: both; } .tab-content table, .dsc table { margin: 10px 0; cursor: default; color: #414042; font-family: 'Roboto', sans-serif; letter-spacing: 1.2px; font-weight: 400; } .tab-content table tr, .dsc table tr { border-bottom: 1px solid #f5f5f5; } .tab-content table tr:nth-child(odd), .dsc table tr:nth-child(odd) { background: #f5f5f5; } .tab-content table tr:last-child, .dsc table tr:last-child { border-bottom: none; } .tab-content table td, .dsc table td { padding: 10px; } blockquote { display: block; margin: 10px 0; padding: 20px; font-size: 14px; color: #414042; background: #f5f5f5; border-left: 3px solid #414042; font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 1.2px; font-weight: 400; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } code { display: block; margin: 10px 0; padding: 20px; color: #fff; font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 1.2px; font-weight: 400; background: #414042; border-left: 3px solid #000; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } mark { color: #414042; background: #fff5e6; font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 1.2px; font-weight: 400; } small { font-size: 12px; color: #999; font-family: 'Roboto', sans-serif; letter-spacing: 1.2px; font-weight: 400; } kbd { background: #414042; color: #fff; font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 1.2px; font-weight: 400; box-shadow: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } @media (max-width: 991px) { .crossell-wrapper { display: flex; flex-direction: column; gap: 1rem; height: 100%; margin-bottom: 20px; } .crossell-item { width: 100%; } } @media (min-width: 992px) { .crossell-wrapper { display: flex; flex-direction: row; display: flex; gap: 1rem; height: 100%; margin-bottom: 20px; } .crossell-item { width: 50%; } } .crossell-item { flex-grow: 1; min-height: 180px; margin: 0; padding: 40px; background: #0055A4; display: flex; } .crossell .crossell-text a { display: inline-block; padding: 10px 20px; margin: 0; margin-top: 2rem; color: #FFF; font-size: 13px; letter-spacing: 1.2px; border: 1px solid #f5f5f5; text-align: center; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .crossell .crossell-img img { max-width: 100px; height: auto; border: none; margin: 0 auto; position: absolute; left: 10%; transform: scale(1); transition: all 0.3s ease; } .crossell-2 .crossell-text { float: left; width: 270px; } .crossell .crossell-text h1 { text-align: left; color: #FFF; margin: 0; font-size: 28px; font-weight: 400; } .crossell .crossell-img { width: 50%; position: relative } .crossell-2:hover .crossell-img img { transform: scale(1.1); } .crossell-text a:hover { background: #414042; color: #fff; text-decoration: none; transition: all 0.3s ease; } .crossell-single { margin: 40px 0; padding: 0 10px; text-align: center; } .crossell-single img { max-height: 300px; width: auto; margin: 0 auto; border: 1px solid #fff; opacity: 1; } .crossell-single:hover img { opacity: 0.8; transition: opacity 0.3s ease; } .crossell-single h1 { display: block; margin: 20px 0 10px 0; padding: 0; font-size: 13px; color: #414042; letter-spacing: 1.2px; text-align: center; font-weight: 600; } .crossell-single h2 { display: block; margin: 0; padding: 0; font-size: 13px; color: #999; letter-spacing: 1.2px; text-align: center; font-weight: 400; } .crossell-single:hover h1 { color: #000; } .crossell-single h3 { position: absolute; top: -2%; right: 7%; background: #fff; display: inline-block; color: #000; font-size: 13px; letter-spacing: 1.2px; text-align: center; font-weight: 600; line-height: 25px; padding: 0 10px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03); } .usp { height: 100%; text-align: left; } .usp-box i { width: 50px; float: left; display: block; color: #000; margin: 0 5px 10px 0; font-size: 32px; padding: 4px 0 0 0; } .usp-box span { display: block; margin: 0; padding: 0 0 2px 0; color: #000; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; } @media (max-width: 991px) { .usp-box-wrapper { display: flex; flex-direction: column; gap: 1rem; height: 100%; } .usp-box, .inspo-box { width: 100%; height: 200px; overflow: hidden; } .inspo-box img { width: 100%; height: 100%; object-fit: cover; display: block; } } @media (min-width: 992px) { .usp-box-wrapper { flex-direction: row; display: flex; gap: 1rem; height: 100%; } .usp-box, .inspo-box { width: 33%; height: 200px; overflow: hidden; } .inspo-box img { width: 100%; height: 100%; object-fit: cover; display: block; } } @media (max-width: 779px) { .inspiration-box-wrapper { display: flex; flex-direction: column; gap: 1rem; height: 100%; margin-bottom: 16px; } } @media (min-width: 780px) { .inspiration-box-wrapper { flex-direction: row; display: flex; gap: 1rem; height: 100%; margin-bottom: 16px; } } .usp-box { margin: 0; padding: 20px 30px; color: #8b8b8b; background: #f5f5f5; font-size: 12px; font-weight: 400; letter-spacing: 1.2px; border-right: 1px solid #e5e5e5; text-align: left; display: flex; flex-grow: 1; align-items: center; } .usp-box:hover span { color: #8b8b8b; cursor: default; transition: all 0.3s ease; } .usp-box:last-child { border: none; } .footer { margin: 0; padding: 40px; color: #414042; letter-spacing: 1.2px; font-weight: 400; font-size: 13px; } .footer h1 { margin: 0; padding: 10px 0; color: #000; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; } .footer ul { margin: 0; padding: 0; } .footer ul li { list-style-type: none; text-align: left; margin: 0; padding: 0; margin-right: 15px; } .footer ul li a { display: block; margin: 0; padding: 5px 0; color: #414042; letter-spacing: 1.2px; font-weight: 400; font-size: 13px; } .footer ul li a:hover { color: #000; text-decoration: none; } a.kontakt { display: block; max-width: 250px; padding: 0 0 0 20px; margin: 20px 0; color: #414042; font-size: 13px; border: 1px solid #f5f5f5; text-align: left; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; line-height: 40px; } a.kontakt:hover { text-decoration: none; transition: all 0.3s ease; } a.kontakt:after { font-family: 'FontAwesome'; content: '\f105'; font-size: 14px; padding: 0; margin: 0; display: block; background: #000; color: #fff; width: 40px; float: right; text-align: center; } a.kontakt:hover:after { background: #333; color: #fff; } @media (min-width: 992px) and (max-width: 1200px) { .tabs label { top: -1px; } } @media (min-width: 768px) and (max-width: 992px) { .tabs label { top: -1px; } .dsc { padding: 30px 0 0 0; margin: 0; } .usp-box i { margin-bottom: 40px; } .footer { padding: 40px 10px; } a.kontakt { max-width: 210px; font-size: 10px; } } @media (max-width: 768px) { .tabs { margin-top: 10px; } .tabs label { background: #0055A4; color: white; margin: 0; margin-bottom: 2px; width: 100%; display: block; float: left; } .tabs label:before { display: none; } .tabs label:hover { background: #414042 !important; color: #fff !important; } .tabs [id^='tab']:checked + label { color: #FFF; background: #333; } .dsc { margin: 0; padding: 20px; } a.skb { margin-top: 25px; } .kaufenbox { margin-top: 0; } a.beo { display: block; padding: 2px 0; } .item { margin: 20px 0 0 0; } } @media (max-width: 992px) { .categories { border-bottom: 1px solid #e9e9e9; padding: 0; } .categories ul { display: block; width: 100%; margin: 0; padding: 0; } .categories ul li { display: block; margin: 0; padding: 0; width: 100%; border-top: 1px solid #e9e9e9; line-height: 15px; } .categories ul li:hover { background: #0055A4 !important; } .categories ul li:hover a, .categories ul ul li:hover a { color: #FFF !important; text-decoration: none !important; } .categories ul li a { display: block; margin: 0; padding: 15px; width: 100%; line-height: 15px; } .categories ul li:last-child { border-bottom: none; } .categories ul li a:before, .categories ul li:before, .categories ul li a:after, .categories ul li:after { display: none; } .categories ul ul { display: block; position: inherit; margin-top: 5px; top: 0; left: 0; box-shadow: none; } .categories ul ul li { display: block; line-height: 15px; margin: 0; padding: 0; } .categories ul ul li a { display: block; line-height: 15px; padding: 15px 40px; } .toggle-box *, .toggle-box *:before, .toggle-box *:after { box-sizing: border-box; } .toggle-box { width: 100%; } .toggle-box input[name='panel'] { display: none; } .toggle-box label { height: 50px; position: relative; display: block; padding: 0; margin: 0; line-height: 50px; background: none; border: none; color: #FFF; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; cursor: pointer; transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87); text-transform: uppercase; text-align: center; } .toggle-box label:after { content: '\f107'; font-family: 'FontAwesome'; position: absolute; top: 12px; right: 40px; font-size: 14px; width: 25px; height: 25px; line-height: 25px; color: #fff; text-align: center; border-radius: 50%; background: #414042; padding: 0; } .toggle-box label:hover { color: #FFF; } .toggle-box input:checked + label { color: #FFF; } .toggle-box input:checked + label:after { content: '\f106'; font-family: 'FontAwesome'; } .toggle-box .toggle-content { overflow: hidden; max-height: 0em; position: relative; padding: 0; background: #414042; color: #414042; transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87); } .toggle-box .toggle-content:not(:last-of-type) { } .toggle-box .toggle-content .toggle-body { padding: 0; } input[name='panel']:checked ~ .toggle-content { max-height: 595px; overflow-y: scroll; overflow-x: hidden; } } /* Basis-Stile für alle Zeilen und Zellen */ .ITSr1, .ITSr0, .ITSn, .ITSv { padding: 4px 20px; overflow: hidden; /* Hinzugefügtes Overflow-Attribut */ word-wrap: break-word; /* Hinzugefügt, um lange Wörter umzubrechen */ text-overflow: ellipsis; /* Hinzugefügt, um abgeschnittene Texte mit Ellipsen anzuzeigen */ } /* Container für die Tabelle */ .ITSs { display: block; width: 100%; box-sizing: border-box; /* Hinzugefügt, um Padding und Border in der Breite einzuschließen */ } /* Zeilen-Stile */ .ITSr1, .ITSr0 { display: flex; /* Änderung auf Flexbox */ justify-content: space-between; /* Abstand zwischen .ITSr1 und .ITSr0 auf großen Bildschirmen */ align-items: center; /* Vertikale Ausrichtung in der Mitte */ width: 100%; } .ITSr1:nth-child(even), .ITSr0:nth-child(even) { background-color: #f9f9f9; /* Hintergrundfarbe für jede zweite Zeile (helles Grau) */ } /* Header-Zellen (bold und kleiner Text) */ .ITSg { font-weight: bold; font-size: small; padding: 10px 20px; } /* Zellen für Inhalt */ .ITSn { display: block; color: #555; padding: 4px 20px; white-space: normal; overflow: hidden; width: 48%; /* 48% für .ITSn und .ITSv, um Platz für Abstand zu lassen */ } /* Zellen für Inhalt */ .ITSv { display: block; color: #555; padding: 4px 20px; white-space: normal; /* Ändern auf nowrap, um einzelne Wörter in einer Zeile zu behalten */ overflow: hidden; width: auto; /* Ändern von fester Breite auf automatische Breite */ } /* Zellen-Abstand für kleinere Bildschirme */ @media only screen and (max-width: 600px) { .ITSr1, .ITSr0 { display: block; /* Änderung auf Block für kleine Bildschirme */ } .ITSr1:nth-child(even), .ITSr0:nth-child(even) { background-color: #f9f9f9; /* Hintergrundfarbe für jede zweite Zeile (helles Grau) */ } .ITSn, .ITSv { width: 100%; /* 100% Breite für kleine Bildschirme */ } } /* Topbar */ #template-topbar { height: 10px; background: #0055A4; } /* Header */ .header { height: 90px; background: #333 } .vertical-center { display: flex; align-items: center; } /* Logo */ .logo img { max-width: 80px; height: auto; } /* USP Bereich */ .header-usp { font-size: 14px; color: #FFF; background: #333; height: 100%; } @media (max-width: 991px) { .header-usp { display: flex; flex-direction: column; justify-content: center; align-items:flex-end; } } @media (min-width: 992px) { .header-usp .usp-wrapper { display: flex; justify-content: flex-end; text-align: right; } .header-usp { display: flex; justify-content: flex-end; align-items: center; } } .usp-item { display: flex; align-items: center; margin-right: 2rem; white-space: nowrap; } .usp-item .icon { margin-right: 5px; font-size: 16px; } @media (min-width: 992px) { #content-wrapper { display: flex } } .led-light { position: relative; width: 10px; height: 10px; margin-right: 1rem; border-radius: 50%; background: #60b4ff; box-shadow: 0 0 8px #ffffff, 0 0 16px #03bcf4, 0 0 32px #03bcf4, 0 0 64px #03bcf4, 0 0 120px #03bcf4; } .led-light::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(3, 188, 244, 0.35); filter: blur(12px); } .main-nav i { margin-left: 1rem; }