.rs-columns { clear: both; display: inline-block; width: 100%; } .rs-column { float: left; width: 100%; margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: left; } .rs-column.-large-last { margin-right: -5px; } .rs-column.-large-first-row { margin-top: 0; } .rs-column.-large-col-1-1 { width: 100%; } .rs-column.-large-col-2-1 { width: 46.15385%; } .rs-column.-large-col-2-2 { width: 100%; } .rs-column.-large-col-3-1 { width: 28.20513%; } .rs-column.-large-col-3-2 { width: 64.10256%; } .rs-column.-large-col-3-3 { width: 100%; } .rs-column.-large-col-4-1 { width: 19.23077%; } .rs-column.-large-col-4-2 { width: 46.15385%; } .rs-column.-large-col-4-3 { width: 73.07692%; } .rs-column.-large-col-4-4 { width: 100%; } .rs-column.-large-col-5-1 { width: 13.84615%; } .rs-column.-large-col-5-2 { width: 35.38462%; } .rs-column.-large-col-5-3 { width: 56.92308%; } .rs-column.-large-col-5-4 { width: 78.46154%; } .rs-column.-large-col-5-5 { width: 100%; } .rs-column.-large-col-6-1 { width: 10.25641%; } .rs-column.-large-col-6-2 { width: 28.20513%; } .rs-column.-large-col-6-3 { width: 46.15385%; } .rs-column.-large-col-6-4 { width: 64.10256%; } .rs-column.-large-col-6-5 { width: 82.05128%; } .rs-column.-large-col-6-6 { width: 100%; } @media screen and (max-width: 900px) { .rs-column { margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: none; } .rs-column.-large-last { margin-right: 7.69231%; } .rs-column.-large-first-row { margin-top: 7.69231%; } .rs-column.-medium-first { clear: left; } .rs-column.-medium-last { margin-right: -5px; } .rs-column.-medium-first-row { margin-top: 0; } .rs-column.-medium-col-1-1 { width: 100%; } .rs-column.-medium-col-2-1 { width: 46.15385%; } .rs-column.-medium-col-2-2 { width: 100%; } .rs-column.-medium-col-3-1 { width: 28.20513%; } .rs-column.-medium-col-3-2 { width: 64.10256%; } .rs-column.-medium-col-3-3 { width: 100%; } .rs-column.-medium-col-4-1 { width: 19.23077%; } .rs-column.-medium-col-4-2 { width: 46.15385%; } .rs-column.-medium-col-4-3 { width: 73.07692%; } .rs-column.-medium-col-4-4 { width: 100%; } .rs-column.-medium-col-5-1 { width: 13.84615%; } .rs-column.-medium-col-5-2 { width: 35.38462%; } .rs-column.-medium-col-5-3 { width: 56.92308%; } .rs-column.-medium-col-5-4 { width: 78.46154%; } .rs-column.-medium-col-5-5 { width: 100%; } .rs-column.-medium-col-6-1 { width: 10.25641%; } .rs-column.-medium-col-6-2 { width: 28.20513%; } .rs-column.-medium-col-6-3 { width: 46.15385%; } .rs-column.-medium-col-6-4 { width: 64.10256%; } .rs-column.-medium-col-6-5 { width: 82.05128%; } .rs-column.-medium-col-6-6 { width: 100%; } } @media screen and (max-width: 599px) { .rs-column { margin-right: 7.69231%; } .rs-column.-medium-first { clear: none; } .rs-column.-medium-last { margin-right: 7.69231%; } .rs-column.-medium-first-row { margin-top: 7.69231%; } .rs-column.-small-first { clear: left; } .rs-column.-small-last { margin-right: -5px; } .rs-column.-small-first-row { margin-top: 0; } .rs-column.-small-col-1-1 { width: 100%; } .rs-column.-small-col-2-1 { width: 46.15385%; } .rs-column.-small-col-2-2 { width: 100%; } .rs-column.-small-col-3-1 { width: 28.20513%; } .rs-column.-small-col-3-2 { width: 64.10256%; } .rs-column.-small-col-3-3 { width: 100%; } .rs-column.-small-col-4-1 { width: 19.23077%; } .rs-column.-small-col-4-2 { width: 46.15385%; } .rs-column.-small-col-4-3 { width: 73.07692%; } .rs-column.-small-col-4-4 { width: 100%; } .rs-column.-small-col-5-1 { width: 13.84615%; } .rs-column.-small-col-5-2 { width: 35.38462%; } .rs-column.-small-col-5-3 { width: 56.92308%; } .rs-column.-small-col-5-4 { width: 78.46154%; } .rs-column.-small-col-5-5 { width: 100%; } .rs-column.-small-col-6-1 { width: 10.25641%; } .rs-column.-small-col-6-2 { width: 28.20513%; } .rs-column.-small-col-6-3 { width: 46.15385%; } .rs-column.-small-col-6-4 { width: 64.10256%; } .rs-column.-small-col-6-5 { width: 82.05128%; } .rs-column.-small-col-6-6 { width: 100%; } } /* Swipe 2.0, (C) Brad Birdsall 2012, MIT license */ .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666} /* MediaElement.js, (c) 2010-2014 John Dyer, MIT license */ .mejs-offscreen{position:absolute !important;top:-10000px;left:-10000px;overflow:hidden;width:1px;height:1px}.mejs-container{position:relative;background:#000;font-family:Helvetica,Arial;text-align:left;vertical-align:top;text-indent:0}.mejs-audio{margin-top:18px}.me-plugin{position:absolute}.mejs-embed,.mejs-embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs-fullscreen{overflow:hidden !important}.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width:100%;height:100%}.mejs-clear{clear:both}.mejs-background{position:absolute;top:0;left:0}.mejs-mediaelement{position:absolute;top:0;left:0;width:100%;height:100%}.mejs-poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat}:root .mejs-poster img{display:none}.mejs-poster img{border:0;padding:0;border:0}.mejs-overlay{position:absolute;top:0;left:0}.mejs-overlay-play{cursor:pointer}.mejs-overlay-button{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:url("../../assets/jquery/mediaelement/2.16.4/images/bigplay.svg") no-repeat}.no-svg .mejs-overlay-button{background-image:url("../../assets/jquery/mediaelement/2.16.4/images/bigplay.png")}.mejs-overlay:hover .mejs-overlay-button{background-position:0 -100px}.mejs-overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:#333;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(0,0,0,0.9);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,0.9)),to(rgba(0,0,0,0.9)));background:-webkit-linear-gradient(top,rgba(50,50,50,0.9),rgba(0,0,0,0.9));background:-moz-linear-gradient(top,rgba(50,50,50,0.9),rgba(0,0,0,0.9));background:-o-linear-gradient(top,rgba(50,50,50,0.9),rgba(0,0,0,0.9));background:-ms-linear-gradient(top,rgba(50,50,50,0.9),rgba(0,0,0,0.9));background:linear-gradient(rgba(50,50,50,0.9),rgba(0,0,0,0.9))}.mejs-overlay-loading span{display:block;width:80px;height:80px;background:transparent url("../../assets/jquery/mediaelement/2.16.4/images/loading.gif") 50% 50% no-repeat}.mejs-container .mejs-controls{position:absolute;list-style-type:none;margin:0;padding:0;bottom:0;left:0;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(0,0,0,0.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,0.7)),to(rgba(0,0,0,0.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,0.7),rgba(0,0,0,0.7));background:-moz-linear-gradient(top,rgba(50,50,50,0.7),rgba(0,0,0,0.7));background:-o-linear-gradient(top,rgba(50,50,50,0.7),rgba(0,0,0,0.7));background:-ms-linear-gradient(top,rgba(50,50,50,0.7),rgba(0,0,0,0.7));background:linear-gradient(rgba(50,50,50,0.7),rgba(0,0,0,0.7));height:30px;width:100%}.mejs-container .mejs-controls div{list-style-type:none;background-image:none;display:block;float:left;margin:0;padding:0;width:26px;height:26px;font-size:11px;line-height:11px;font-family:Helvetica,Arial;border:0}.mejs-controls .mejs-button button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:7px 5px;padding:0;position:absolute;height:16px;width:16px;border:0;background:transparent url("../../assets/jquery/mediaelement/2.16.4/images/controls.svg") no-repeat}.no-svg .mejs-controls .mejs-button button{background-image:url("../../assets/jquery/mediaelement/2.16.4/images/controls.png")}.mejs-controls .mejs-button button:focus{outline:dotted 1px #999}.mejs-container .mejs-controls .mejs-time{color:#fff;display:block;height:17px;width:auto;padding:10px 3px 0 3px;overflow:hidden;text-align:center;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.mejs-container .mejs-controls .mejs-time a{color:#fff;font-size:11px;line-height:12px;display:block;float:left;margin:1px 2px 0 0;width:auto}.mejs-controls .mejs-play button{background-position:0 0}.mejs-controls .mejs-pause button{background-position:0 -16px}.mejs-controls .mejs-stop button{background-position:-112px 0}.mejs-controls div.mejs-time-rail{direction:ltr;width:200px;padding-top:5px}.mejs-controls .mejs-time-rail span,.mejs-controls .mejs-time-rail a{display:block;position:absolute;width:180px;height:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer}.mejs-controls .mejs-time-rail .mejs-time-total{margin:5px;background:#333;background:rgba(50,50,50,0.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,0.8)),to(rgba(60,60,60,0.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,0.8),rgba(60,60,60,0.8));background:-moz-linear-gradient(top,rgba(30,30,30,0.8),rgba(60,60,60,0.8));background:-o-linear-gradient(top,rgba(30,30,30,0.8),rgba(60,60,60,0.8));background:-ms-linear-gradient(top,rgba(30,30,30,0.8),rgba(60,60,60,0.8));background:linear-gradient(rgba(30,30,30,0.8),rgba(60,60,60,0.8))}.mejs-controls .mejs-time-rail .mejs-time-buffering{width:100%;background-image:-o-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);-webkit-background-size:15px 15px;-moz-background-size:15px 15px;-o-background-size:15px 15px;background-size:15px 15px;-webkit-animation:buffering-stripes 2s linear infinite;-moz-animation:buffering-stripes 2s linear infinite;-ms-animation:buffering-stripes 2s linear infinite;-o-animation:buffering-stripes 2s linear infinite;animation:buffering-stripes 2s linear infinite}@-webkit-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-moz-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-ms-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-o-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}.mejs-controls .mejs-time-rail .mejs-time-loaded{background:#3caac8;background:rgba(60,170,200,0.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(44,124,145,0.8)),to(rgba(78,183,212,0.8)));background:-webkit-linear-gradient(top,rgba(44,124,145,0.8),rgba(78,183,212,0.8));background:-moz-linear-gradient(top,rgba(44,124,145,0.8),rgba(78,183,212,0.8));background:-o-linear-gradient(top,rgba(44,124,145,0.8),rgba(78,183,212,0.8));background:-ms-linear-gradient(top,rgba(44,124,145,0.8),rgba(78,183,212,0.8));background:linear-gradient(rgba(44,124,145,0.8),rgba(78,183,212,0.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-current{background:#fff;background:rgba(255,255,255,0.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,0.9)),to(rgba(200,200,200,0.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,0.9),rgba(200,200,200,0.8));background:-moz-linear-gradient(top,rgba(255,255,255,0.9),rgba(200,200,200,0.8));background:-o-linear-gradient(top,rgba(255,255,255,0.9),rgba(200,200,200,0.8));background:-ms-linear-gradient(top,rgba(255,255,255,0.9),rgba(200,200,200,0.8));background:linear-gradient(rgba(255,255,255,0.9),rgba(200,200,200,0.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-handle{display:none;position:absolute;margin:0;width:10px;background:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;border:solid 2px #333;top:-2px;text-align:center}.mejs-controls .mejs-time-rail .mejs-time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:solid 1px #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs-controls .mejs-time-rail .mejs-time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs-controls .mejs-time-rail .mejs-time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:solid 5px #eee;border-color:#eee transparent transparent transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:15px;left:13px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float{width:48px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current{width:44px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner{left:18px}.mejs-controls .mejs-fullscreen-button button{background-position:-32px 0}.mejs-controls .mejs-unfullscreen button{background-position:-32px -16px}.mejs-controls .mejs-mute button{background-position:-16px -16px}.mejs-controls .mejs-unmute button{background-position:-16px 0}.mejs-controls .mejs-volume-button{position:relative}.mejs-controls .mejs-volume-button .mejs-volume-slider{display:none;height:115px;width:25px;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(50,50,50,0.7);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:-115px;left:0;z-index:1;position:absolute;margin:0}.mejs-controls .mejs-volume-button:hover{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,0.5);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,0.9);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle{position:absolute;left:4px;top:-3px;width:16px;height:6px;background:#ddd;background:rgba(255,255,255,0.9);cursor:N-resize;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;margin:0}.mejs-controls a.mejs-horizontal-volume-slider{height:26px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#333;background:rgba(50,50,50,0.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,0.8)),to(rgba(60,60,60,0.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,0.8),rgba(60,60,60,0.8));background:-moz-linear-gradient(top,rgba(30,30,30,0.8),rgba(60,60,60,0.8));background:-o-linear-gradient(top,rgba(30,30,30,0.8),rgba(60,60,60,0.8));background:-ms-linear-gradient(top,rgba(30,30,30,0.8),rgba(60,60,60,0.8));background:linear-gradient(rgba(30,30,30,0.8),rgba(60,60,60,0.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#fff;background:rgba(255,255,255,0.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,0.9)),to(rgba(200,200,200,0.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,0.9),rgba(200,200,200,0.8));background:-moz-linear-gradient(top,rgba(255,255,255,0.9),rgba(200,200,200,0.8));background:-o-linear-gradient(top,rgba(255,255,255,0.9),rgba(200,200,200,0.8));background:-ms-linear-gradient(top,rgba(255,255,255,0.9),rgba(200,200,200,0.8));background:linear-gradient(rgba(255,255,255,0.9),rgba(200,200,200,0.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle{display:none}.mejs-controls .mejs-captions-button{position:relative}.mejs-controls .mejs-captions-button button{background-position:-48px 0}.mejs-controls .mejs-captions-button .mejs-captions-selector{visibility:hidden;position:absolute;bottom:26px;right:-51px;width:85px;height:100px;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(50,50,50,0.7);border:solid 1px transparent;padding:10px 10px 0 10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-captions-button .mejs-captions-selector ul{margin:0;padding:0;display:block;list-style-type:none !important;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li{margin:0 0 6px 0;padding:0;list-style-type:none !important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{width:55px;float:left;padding:4px 0 0 0;line-height:15px;font-family:helvetica,arial;font-size:10px}.mejs-controls .mejs-captions-button .mejs-captions-translations{font-size:10px;margin:0 0 5px 0}.mejs-chapters{position:absolute;top:0;left:0;-xborder-right:solid 1px #fff;width:10000px;z-index:1}.mejs-chapters .mejs-chapter{position:absolute;float:left;background:#222;background:rgba(0,0,0,0.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,0.7)),to(rgba(0,0,0,0.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,0.7),rgba(0,0,0,0.7));background:-moz-linear-gradient(top,rgba(50,50,50,0.7),rgba(0,0,0,0.7));background:-o-linear-gradient(top,rgba(50,50,50,0.7),rgba(0,0,0,0.7));background:-ms-linear-gradient(top,rgba(50,50,50,0.7),rgba(0,0,0,0.7));background:linear-gradient(rgba(50,50,50,0.7),rgba(0,0,0,0.7));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr=#323232,endColorstr=#000000);overflow:hidden;border:0}.mejs-chapters .mejs-chapter .mejs-chapter-block{font-size:11px;color:#fff;padding:5px;display:block;border-right:solid 1px #333;border-bottom:solid 1px #333;cursor:pointer}.mejs-chapters .mejs-chapter .mejs-chapter-block-last{border-right:0}.mejs-chapters .mejs-chapter .mejs-chapter-block:hover{background:#666;background:rgba(102,102,102,0.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(102,102,102,0.7)),to(rgba(50,50,50,0.6)));background:-webkit-linear-gradient(top,rgba(102,102,102,0.7),rgba(50,50,50,0.6));background:-moz-linear-gradient(top,rgba(102,102,102,0.7),rgba(50,50,50,0.6));background:-o-linear-gradient(top,rgba(102,102,102,0.7),rgba(50,50,50,0.6));background:-ms-linear-gradient(top,rgba(102,102,102,0.7),rgba(50,50,50,0.6));background:linear-gradient(rgba(102,102,102,0.7),rgba(50,50,50,0.6));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr=#666666,endColorstr=#323232)}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{font-size:12px;font-weight:bold;display:block;white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px 0;line-height:12px}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{font-size:12px;line-height:12px;margin:3px 0 4px 0;display:block;white-space:nowrap;text-overflow:ellipsis}.mejs-captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs-captions-layer a{color:#fff;text-decoration:underline}.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:normal}.mejs-captions-position{position:absolute;width:100%;bottom:15px;left:0}.mejs-captions-position-hover{bottom:35px}.mejs-captions-text{padding:3px 5px;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(20,20,20,0.5);white-space:pre-wrap}.me-cannotplay a{color:#fff;font-weight:bold}.me-cannotplay span{padding:15px;display:block}.mejs-controls .mejs-loop-off button{background-position:-64px -16px}.mejs-controls .mejs-loop-on button{background-position:-64px 0}.mejs-controls .mejs-backlight-off button{background-position:-80px -16px}.mejs-controls .mejs-backlight-on button{background-position:-80px 0}.mejs-controls .mejs-picturecontrols-button{background-position:-96px 0}.mejs-contextmenu{position:absolute;width:150px;padding:10px;border-radius:4px;top:0;left:0;background:#fff;border:solid 1px #999;z-index:1001}.mejs-contextmenu .mejs-contextmenu-separator{height:1px;font-size:0;margin:5px 6px;background:#333}.mejs-contextmenu .mejs-contextmenu-item{font-family:Helvetica,Arial;font-size:12px;padding:4px 6px;cursor:pointer;color:#333}.mejs-contextmenu .mejs-contextmenu-item:hover{background:#2c7c91;color:#fff}.mejs-controls .mejs-sourcechooser-button{position:relative}.mejs-controls .mejs-sourcechooser-button button{background-position:-128px 0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector{visibility:hidden;position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(50,50,50,0.7);border:solid 1px transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul{margin:0;padding:0;display:block;list-style-type:none !important;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{margin:0 0 6px 0;padding:0;list-style-type:none !important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{width:100px;float:left;padding:4px 0 0 0;line-height:15px;font-family:helvetica,arial;font-size:10px}.mejs-postroll-layer{position:absolute;bottom:0;left:0;width:100%;height:100%;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(50,50,50,0.7);z-index:1000;overflow:hidden}.mejs-postroll-layer-content{width:100%;height:100%}.mejs-postroll-close{position:absolute;right:0;top:0;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(50,50,50,0.7);color:#fff;padding:4px;z-index:100;cursor:pointer}div.mejs-speed-button{width:46px !important;position:relative}.mejs-controls .mejs-button.mejs-speed-button button{background:transparent;width:36px;font-size:11px;line-height:normal;color:#fff}.mejs-controls .mejs-speed-button .mejs-speed-selector{visibility:hidden;position:absolute;top:-100px;left:-10px;width:60px;height:100px;background:url("../../assets/jquery/mediaelement/2.16.4/images/background.png");background:rgba(50,50,50,0.7);border:solid 1px transparent;padding:0;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-speed-button:hover>.mejs-speed-selector{visibility:visible}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected{color:rgba(33,248,248,1)}.mejs-controls .mejs-speed-button .mejs-speed-selector ul{margin:0;padding:0;display:block;list-style-type:none !important;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li{margin:0 0 6px 0;padding:0 10px;list-style-type:none !important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px;display:none}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label{width:60px;float:left;padding:4px 0 0 0;line-height:15px;font-family:helvetica,arial;font-size:11.5px;color:white;margin-left:5px;cursor:pointer}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover{background-color:#c8c8c8 !important;background-color:rgba(255,255,255,.4) !important}.mejs-controls .mejs-button.mejs-skip-back-button{background:transparent url("../../assets/jquery/mediaelement/2.16.4/images/skipback.png") no-repeat;background-position:3px 3px}.mejs-controls .mejs-button.mejs-skip-back-button button{background:transparent;font-size:9px;line-height:normal;color:#fff} /* ColorBox, (c) 2011 Jack Moore, MIT license */ #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}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url("../../assets/jquery/colorbox/1.6.1/images/loading.gif") no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url("../../assets/jquery/colorbox/1.6.1/images/controls.png") no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url("../../assets/jquery/colorbox/1.6.1/images/controls.png") no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url("../../assets/jquery/colorbox/1.6.1/images/controls.png") no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} /** * Contao Open Source CMS * * Copyright (c) 2005-2015 Leo Feyer * * @license LGPL-3.0+ */ table.sortable thead th { background-image:url("../../assets/jquery/tablesorter/2.0.5/images/default.gif"); background-repeat:no-repeat; background-position:center right; } table.sortable thead th.headerSortDown { background-image:url("../../assets/jquery/tablesorter/2.0.5/images/asc.gif"); } table.sortable thead th.headerSortUp { background-image:url("../../assets/jquery/tablesorter/2.0.5/images/desc.gif"); } /* Created on : 25.02.2016, 16:45:26 Author : Carsten Schober Die CSS Files von [contao-bootstrap] sind im Seitenlayout der Themes im Head eingebunden: composer/vendor/components/bootstrap/css/bootstrap.css composer/vendor/components/bootstrap/css/bootstrap-theme.css In dieser CSS werden diese Styles nach Bedarf überschrieben font-family: 'Orbitron', sans-serif; font-family: 'Michroma', sans-serif; font-family: 'Khand', sans-serif; */ /*Header*/ .jumbotron{ padding:0 !important; background-image:url("../../files/filesZweirad/img/zweirad_schael_headline.png"); margin: 0 0 5px 0 !important; background-position: bottom right; background-repeat: no-repeat; border-radius: 0 !important; background-color: #F7F7F7; } @media(max-width: 765px){ .jumbotron{ background-image:url("../../files/filesZweirad/img/zweirad_schael_headline_loRes.png"); } } #containerHauptnavi .jumbotron{ background: none; } /*Hauptnavigation (Produkte))*/ /*Navbar breit*/ .navbar-default{ box-shadow: none !important; -webkit-box-shadow:none !important; border-radius: 0px !important; margin-left: 25px; margin-right: 20px; } .pageProduktSub .navbar-default li.active a{ background: none !important; background-color: #ffcc33 !important } @media(max-width: 765px){ .navbar-default a{ margin-left: 15px; margin-right: 15px; } } #navbarProdukte.navbar{ border-radius: 0; } #navbarProdukte a, #navbarProdukte .navbar-collapse { color:#FFF; border-color: #000; background-color: #144177; font-size: 1.2em; font-family: 'Michroma', sans-serif; box-shadow: none !important; -moz-box-shadow: none !important; } @media (max-width: 1200px) { #navbarProdukte a, #navbarProdukte .navbar-collapse { font-size: 1.1em; } } /*Navbar kollabiert*/ #navbarProdukte{ background-color: #144177; background-image: none; border:none; margin-bottom: 5px; } .navbar-toggle { border-color: #5d7fc3; background: #FFFFFF !important; } .navbar-toggle .icon-bar { background-color: #144177; } .navbar-toggle:hover{ background: #fcc200 !important; } @media(max-width: 765px){ #navbarProdukte li{ max-width: 400px; } } /*DropDown*/ .form-control{ padding: 6px 0px 6px 4px !important; } /*Zustände*/ #navbarProdukte .trail *{ color: #000 } #navbarProdukte a:hover{ background: #ffcc33; color: #000; } #navbarProdukte li.active a{ color:#144177; /*font-weight: bold;*/ background: #FFF; cursor: default; box-shadow: none; -moz-box-shadow: none; } .last{ margin-right: -15px !important; } .helper01{ padding-right:30px !important; } /*Subnavigation (sonstige Seiten)*/ #navbarSub{ background:none; border: none; box-shadow: none !important; -moz-box-shadow: none !important; border-radius: 0; min-height: 20px; /*background-color:blueviolet;*/ margin: 0; margin-right: -25px; padding: 5px 10px 5px 0; position: relative } #navbarSub .level_1 a.dropdown-toggle, #navbarSub .level_1 a{ padding: 6px 10px 5px 17px; } @media(max-width: 765px){ #navbarSub{ display: none; } } #navbarSub .last{ margin-right: 0 !important; } .container-fluid{ padding-right: 0 !important } li.active .dropdown-toggle{ box-shadow:none !important; background-color: #FFF !important } li.active a.dropdown-toggle{ background: none !important; background-color: #fc3 !important; color: #000 !important; } /*Breadcrumb*/ #breadCrumbs{ margin-left: -15px; margin-right: -15px; width:470px; margin-bottom: -62px; background-image:url("../../files/filesZweirad/img/icoHome.png"); background-repeat: no-repeat; background-position: 13px 10px; position: relative; z-index: 10 } @media(max-width: 765px){ #breadCrumbs{ margin-bottom: 0; } } .breadcrumb{ background: none !important; } .breadcrumb a{ color:#000 } .breadcrumb li.first{ width:20px; text-indent: -9999px } .breadcrumb li.first a{ display: block; width:20px; overflow: hidden; } /* ===== ZWEIRAD SCHAEL ONE UI 9 DESIGN LAYER v2.0 ===== */ /* ======================================================================= ZWEIRAD SCHAEL – ONE UI 9 / ANDROID 17 INSPIRED DESIGN LAYER Version 2.0 – complete component coverage Design intent: - Keep all original brand colours and image assets unchanged. - Keep content order, containers, Bootstrap columns, grid definitions, element positions and PHP behaviour intact. - Modernise surfaces, typography rendering, controls, focus, elevation, visual hierarchy and touch comfort. - The visual language follows Samsung One UI principles: focused content, natural interaction, readable hierarchy and adaptive presentation. ======================================================================= */ :root { --zs-ui-radius-xs: 8px; --zs-ui-radius-sm: 12px; --zs-ui-radius-md: 16px; --zs-ui-radius-lg: 20px; --zs-ui-radius-xl: 24px; --zs-ui-radius-pill: 999px; --zs-ui-shadow-1: 0 1px 3px rgba(0, 0, 0, .055), 0 2px 8px rgba(0, 0, 0, .035); --zs-ui-shadow-2: 0 4px 14px rgba(0, 0, 0, .075), 0 1px 3px rgba(0, 0, 0, .045); --zs-ui-shadow-3: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04); --zs-ui-transition: 180ms cubic-bezier(.2, .7, .2, 1); --zs-ui-transition-soft: 240ms cubic-bezier(.2, .65, .25, 1); } /* 01 – BASE / TYPE ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p, li, figcaption { text-wrap: pretty; } hr { opacity: .72; } /* 02 – MAIN SHELL / CONTENT AREAS --------------------------------------- */ #main { border-radius: var(--zs-ui-radius-xl); box-shadow: var(--zs-ui-shadow-1); } #containerHauptnavi, #containerHauptnavi .jumbotron, .jumbotron { border-radius: var(--zs-ui-radius-lg); } .pageTitle { border-radius: var(--zs-ui-radius-sm); } .pageAllgemein .mod_article, .pageProdukt .mod_article, .pageStartStd .ce_text, .pageStartStd .ce_text.block, .pageStartStd.ce_text.last.block { border-radius: var(--zs-ui-radius-lg); } .grey, .ce_text, .mod_article { border-radius: var(--zs-ui-radius-md); } .image_container, .ce_image, .ce_gallery, .thumbnail { border-radius: var(--zs-ui-radius-md); } /* 03 – NAVIGATION / WAYFINDING ------------------------------------------ */ #navbarProdukte, #navbarProdukte .navbar-collapse, #navbarSub, #naviProdukteFooter, #navbarNaviComplete, #navbarNaviKlassen, #naviFooter, #naviFooter .inside, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } #naviFooter .inside, #naviFooterMobile { overflow: hidden; } #navbarProdukte a, #navbarSub a, #navbarNaviComplete a, #navbarNaviKlassen a, #naviProdukteFooter a, #naviFooter a, #naviFooterMobile a { border-radius: var(--zs-ui-radius-sm); transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition), box-shadow var(--zs-ui-transition), opacity var(--zs-ui-transition); } #navbarProdukte a:hover, #navbarSub a:hover, #navbarNaviComplete a:hover, #navbarNaviKlassen a:hover, #naviProdukteFooter a:hover, #naviFooter a:hover, #naviFooterMobile a:hover { text-decoration: none; } .navbar-default, .navbar, .navbar-collapse { box-shadow: none; } .navbar-toggle { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .navbar-toggle:active { transform: scale(.98); } .dropdown-menu { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-3); overflow: hidden; } .dropdown-menu > li > a { transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition); } .breadcrumb { border-radius: var(--zs-ui-radius-pill); } /* 04 – BUTTONS / ACTIONS ----------------------------------------------- */ .btn, button.btn, input.btn, button, input[type="submit"], input[type="button"], input[type="reset"], .wildButton, .button, a.button { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition), filter var(--zs-ui-transition), background-color var(--zs-ui-transition); } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wildButton:hover, a.button:hover { box-shadow: var(--zs-ui-shadow-1); } .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active, .wildButton:active { transform: translateY(1px) scale(.99); } .btn-group > .btn:first-child, .btn-group > .btn:last-child, .input-group .btn { border-radius: var(--zs-ui-radius-sm) !important; } .wildButton { background-position: 28px center; } /* 05 – FORM CONTROLS / FILTERS ----------------------------------------- */ .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]), #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea, #finanzierungsrechner input, #finanzierungsrechner select, .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition), background-color var(--zs-ui-transition); } .form-control:focus, select:focus, textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 65, 119, .12); } input[type="checkbox"], input[type="radio"] { accent-color: #144177; } label { text-underline-offset: .16em; } .form-group { min-width: 0; } fieldset { border-radius: var(--zs-ui-radius-md); } /* 06 – ALERTS / PANELS / ACCORDIONS ------------------------------------ */ .alert, .panel, .panel-default, .panel-heading, .panel-body, .well, .tab-content, .tab-pane, .tab-container, .toggler, .hinweis, .ergebnis, .rate, .message-box { border-radius: var(--zs-ui-radius-md); } .alert, .panel, .well, .hinweis, .ergebnis { box-shadow: var(--zs-ui-shadow-1); } .panel-heading, .toggler { transition: filter var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .panel-heading:hover, .toggler:hover { box-shadow: var(--zs-ui-shadow-1); } /* 07 – PRODUCT CATEGORY CARDS / HOMEPAGE PRODUCT TILES ------------------ */ .box3Artikel, .box4Artikel, .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox, .fahrradZufallBox .box, .kachel, .warengruppe, .thumb, #altArt .thumb, #wrapKacheln .kachel { border-radius: var(--zs-ui-radius-lg); } .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox .box, .thumb, #altArt .thumb, .kachel, .warengruppe { box-shadow: var(--zs-ui-shadow-1); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } .box3Artikel .box:hover, .box4Artikel .box:hover, .fahrradZufallBox .box:hover, .thumb:hover, #altArt .thumb:hover, .kachel:hover, .warengruppe:hover { box-shadow: var(--zs-ui-shadow-2); } .box .overlay, .box4Artikel .overlay, .overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .produktname, .produktklasse, .markeModell, .modell, .thumb .marke, .thumb .modell { border-radius: 0 0 var(--zs-ui-radius-md) var(--zs-ui-radius-md); } .preis, .empf, .preisTotal, .rate-display { font-variant-numeric: tabular-nums; } .preis { border-radius: var(--zs-ui-radius-sm); } .empf { opacity: .88; } .zs-sale-corner, .detail-sale-badge { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); } /* Category grids with their own inline CSS – colour values remain original */ .schael-kachelgrid, .schael-ebike-kachelgrid, .schael-kachelgrid-mobile, .schael-ebike-kachelgrid-mobile { isolation: isolate; } .schael-kachelgrid .schael-kachel, .schael-ebike-kachelgrid .schael-ebike-kachel, .schael-kachelgrid-mobile .schael-kachel-mobile, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile { border-radius: var(--zs-ui-radius-lg); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .schael-kachelgrid .schael-kachel:hover, .schael-ebike-kachelgrid .schael-ebike-kachel:hover, .schael-kachelgrid-mobile .schael-kachel-mobile:hover, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile:hover { box-shadow: var(--zs-ui-shadow-2); transform: translateY(-2px); } .schael-kachelbild, .schael-ebike-kachelbild, .schael-kachelbild-mobile, .schael-ebike-kachelbild-mobile { overflow: hidden; } .schael-kachelbild img, .schael-ebike-kachelbild img, .schael-kachelbild-mobile img, .schael-ebike-kachelbild-mobile img { transition: transform var(--zs-ui-transition-soft); } .schael-kachelgrid a:hover img, .schael-ebike-kachelgrid a:hover img, .schael-kachelgrid-mobile a:hover img, .schael-ebike-kachelgrid-mobile a:hover img { transform: scale(1.025); } .schael-kacheltitel, .schael-ebike-kacheltitel, .schael-kacheltitel-mobile, .schael-ebike-kacheltitel-mobile { border-radius: 0 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg); letter-spacing: -.01em; font-weight: 600; } /* 08 – PRODUCT DETAIL ----------------------------------------------- */ .produktDetail { border-radius: var(--zs-ui-radius-xl); } .produktDetail .bild, .produktDetail .bild img, .produktBild, #altArt .produktBild { border-radius: var(--zs-ui-radius-lg); } #wrapBeschreibung, .produkt-aktionen, .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich, .produkt-merkmale-bereich { border-radius: var(--zs-ui-radius-lg); } .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich { box-shadow: var(--zs-ui-shadow-1); } .verfuegbarkeit-zeile, .wrapAmpel, .ampelInline, .ampel { border-radius: var(--zs-ui-radius-sm); } .verfuegbarkeit-status, .ampelLabel, .heightRahmen { line-height: 1.45; } .produkt-merkmale-kopf { border-radius: var(--zs-ui-radius-md); } .produkt-merkmal-card { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .produkt-merkmal-card:hover { box-shadow: var(--zs-ui-shadow-2); } .produkt-merkmal-label { letter-spacing: -.01em; } .produkt-merkmal-icon { border-radius: var(--zs-ui-radius-pill); } .weitere-varianten-list { border-radius: var(--zs-ui-radius-md); } .weitere-variante-bild { border-radius: var(--zs-ui-radius-sm); overflow: hidden; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .weitere-variante-bild:hover { box-shadow: var(--zs-ui-shadow-2); } /* 09 – LISTING / FILTER / PRICE RANGE ----------------------------------- */ .article-filter-panel, .article-filter-content, .article-filter-toggle, #article-filter-content, #wrapSearchResult, #wrapSearchResult .row, #noResult, .paginierung, #slider-range { border-radius: var(--zs-ui-radius-lg); } .article-filter-panel, .article-filter-content { box-shadow: var(--zs-ui-shadow-1); } .article-filter-toggle { box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .article-filter-toggle:hover { box-shadow: var(--zs-ui-shadow-2); } .article-filter-content select.form-control, .article-filter-content .form-control { border-radius: var(--zs-ui-radius-sm); } .article-filter-actions .btn, .article-filter-content .formButtons .btn { border-radius: var(--zs-ui-radius-sm) !important; } .article-filter-price { border-radius: var(--zs-ui-radius-md); } #slider-range .ui-slider-handle, .ui-slider .ui-slider-handle { border-radius: var(--zs-ui-radius-pill); box-shadow: var(--zs-ui-shadow-1); cursor: grab; } #slider-range .ui-slider-handle:active, .ui-slider .ui-slider-handle:active { cursor: grabbing; } .paginierung, .paginierung a, input.paginierung { border-radius: var(--zs-ui-radius-pill); } .thumb .img, .thumb .img img { border-radius: var(--zs-ui-radius-md); } #wrapSearchResult { box-shadow: var(--zs-ui-shadow-1); } #wrapSearchResult .row, .searchItemResult { border-radius: var(--zs-ui-radius-lg); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #wrapSearchResult .row:hover, .searchItemResult:hover { box-shadow: var(--zs-ui-shadow-2); } .zs-search-image-wrap, .zs-search-image-wrap img { border-radius: var(--zs-ui-radius-md); } /* 10 – FINANCING CALCULATOR --------------------------------------------- */ .finanz-modul-wrap, .finanz-layout, .calc-wrapper, .calc-form, .result-box, .result-warning, .radio-tabs, .radio-tab, .radio-tab-content, .result-grid { border-radius: var(--zs-ui-radius-lg) !important; } .calc-wrapper, .calc-form, .result-box, .result-warning { box-shadow: var(--zs-ui-shadow-1) !important; } .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; } .radio-tab-content { border-radius: var(--zs-ui-radius-sm) !important; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition) !important; } .radio-tab input[type="radio"]:checked + .radio-tab-content { box-shadow: 0 0 0 1px currentColor inset !important; } .result-box { overflow: hidden; } .rate-display { letter-spacing: -.035em; } .result-grid > div { border-radius: var(--zs-ui-radius-sm); } .result-warning { overflow: hidden; } /* 11 – SERVICE / CONTACT / CONTENT -------------------------------------- */ #naviServicePoints, #naviServicePoints.container, #serviceListe, #serviceListe table, .service table, .kontaktDaten, .kontaktDaten .item, .kontakt .tab-content, .karriere .tab-content, #stammdaten .stammdatenInside, #bildercheck, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, #galerieLaden, .prospekt, #prospekteAll, .event { border-radius: var(--zs-ui-radius-lg); } #naviServicePoints, #serviceListe table, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, .prospekt { box-shadow: var(--zs-ui-shadow-1); } #naviServicePoints a, .kontaktDaten a, #mitarbeiter .item a, .prospekt a { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } #naviServicePoints a:hover, .kontaktDaten a:hover, #mitarbeiter .item a:hover, .prospekt a:hover { opacity: .92; } #naviFooter, #naviFooterMobile, #stammdaten .stammdatenInside { overflow: hidden; } #naviFooter > ul.level_1 > li, #naviFooterMobile ul.level_1 > li { border-radius: var(--zs-ui-radius-sm); } #stammdaten .container { border-radius: var(--zs-ui-radius-lg); overflow: hidden; } #mitarbeiter .image_container img, #mitarbSlider .image_container img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-md); } .prospekt img { border-radius: var(--zs-ui-radius-sm); } .prospekt .overlay { border-radius: 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg) 0; } /* 12 – TABLES / PAGINATION / DATA --------------------------------------- */ table { border-collapse: separate; border-spacing: 0; } #serviceListe table, .service table, #bildercheck table, #bildercheck .panel { overflow: hidden; } #serviceListe td, .service td, #bildercheck table td { vertical-align: middle; } #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md) var(--zs-ui-radius-md) 0 0; } /* 13 – ACCESSIBILITY / FOCUS -------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffcc33; outline-offset: 2px; } /* 14 – RESPONSIVE FINISHING --------------------------------------------- */ @media (max-width: 767px) { html, body { max-width: 100%; } #main { border-radius: var(--zs-ui-radius-lg); } #containerHauptnavi, #navbarProdukte, #navbarProdukte .navbar-collapse, #naviProdukteFooter, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } .btn, button, input[type="submit"], input[type="button"], .navbar-toggle { min-height: 42px; } .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]) { font-size: 16px; } .box3Artikel .box, .box4Artikel .box { width: min(400px, 100%); max-width: 100%; } .box3Artikel .produktname, .box4Artikel .produktname { max-width: 100%; } .produkt-aktionen .btn { min-height: 42px; } .article-filter-content .formButtons .btn { min-height: 44px; } .prospekt, .searchItemResult, #wrapSearchResult .row { border-radius: var(--zs-ui-radius-md); } } @media (max-width: 420px) { .produkt-merkmal-card { min-width: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .navbar-default, #navbarProdukte, #naviFooter, #stammdaten .stammdatenInside { border-radius: var(--zs-ui-radius-lg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 15 – REMAINING SITE MODULES / LEGACY COMPONENTS ----------------------- */ #suche, #nachfrageFormular, #bildercheck, #mitarbeiter, #mitarbSlider, #galerieLaden, #wrapKacheln, #prospekteAll, #serviceListe, #stammdaten, .kontakt, .karriere, .impressum, .pageTitle, .hl_mobile, .topBild, .facts-list-wrap, .facts-list, .row.statistic, .rate, .gewaehr, .empf, .markeModell, .produktRubrikHeader, .produkt-merkmal-card, .produkt-aktionen, .produkt-hinweis-container, .weitere-varianten-bereich, .weitere-variante-bild, .wrapAmpel, .ampel, #finanzierungsrechner, #naviServicePoints, #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md); } #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #galerieLaden img, .topBild img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-lg); } #finanzierungsrechner { box-shadow: var(--zs-ui-shadow-1); } #mitarbSlider .carousel-control, .slick-prev, .slick-next, .rsts-prev, .rsts-next, .rsts-nav a { border-radius: var(--zs-ui-radius-pill); transition: opacity var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .slick-dots li button:before { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } .slick-dots li.slick-active button:before { transform: scale(1.08); } #breadCrumbs, .breadcrumb { border-radius: var(--zs-ui-radius-pill); } #stammdaten .stammdatenInside, #naviFooter .inside, #naviFooterMobile { box-shadow: var(--zs-ui-shadow-1); } .kontaktDaten .item, #mitarbeiter .item, #galerieLaden, #prospekteAll .prospekt { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #mitarbeiter .item:hover, #prospekteAll .prospekt:hover { box-shadow: var(--zs-ui-shadow-2); } .markenLogo, .produkt-merkmal-icon, .header-badge, .badge-text { border-radius: var(--zs-ui-radius-pill); } @media print { html { scroll-behavior: auto; } #main, #finanzierungsrechner, #naviFooter .inside, #naviFooterMobile, .produktDetail, .produkt-merkmal-card, .result-box, .panel, .alert, .prospekt, #mitarbeiter .item, #naviServicePoints { box-shadow: none !important; } } /* Created on : 29.02.2016, 11:10:30 Author : Carsten Schober */ /*Grundeinstellungen*/ body, html{ background-image: url("../../files/files/filesZweirad/img/Background-Schael.jpg"); !important; no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } margin: 0; padding: 0; -webkit-font-smoothing: antialiased; width: 100%; height: 100% !important; /*font-family: 'Open Sans', sans-serif !important;*/ } #main{ border: solid 15px #FFF; background-color: #FFF; } .container-fluid{ background-color: #FFF; } #containerHauptnavi{ margin-bottom: -20px; } .pageTitle{ text-align: right; margin: 5% 20px 3% 25px; /* margin-top: 5%; margin-bottom: 3%; margin-right: 20px;*/ padding-bottom: 5px; border-bottom: solid 2px #eee; } h1, h2, h3, h4, h5{ font-family: 'Michroma', sans-serif !important; margin: 0; padding: 0; } .standardFont h4{ font-family: Arial, Helvetica, sans-serif !important } a,a:link,a:visited{outline:none !important;} .ce_text h2{ margin-bottom: 30px; } .termine .ce_text h2{ padding-bottom: 10px; border-bottom: 5px solid rgb(255, 255, 255); } /*Fonts*/ /* khand-regular - latin */ @font-face { font-family: 'Khand'; font-style: normal; font-weight: 400; src: url("../../files/filesZweirad/fonts/khand-v14-latin-regular.eot"); /* IE9 Compat Modes */ src: local(''), url("../../files/filesZweirad/fonts/khand-v14-latin-regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("../../files/filesZweirad/fonts/khand-v14-latin-regular.woff2") format('woff2'), /* Super Modern Browsers */ url("../../files/filesZweirad/fonts/khand-v14-latin-regular.woff") format('woff'), /* Modern Browsers */ url("../../files/filesZweirad/fonts/khand-v14-latin-regular.ttf") format('truetype'), /* Safari, Android, iOS */ url("../../files/filesZweirad/fonts/khand-v14-latin-regular.svg#Khand") format('svg'); /* Legacy iOS */ } /* michroma-regular - latin */ @font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; src: url("../../files/filesZweirad/fonts/michroma-v16-latin-regular.eot"); /* IE9 Compat Modes */ src: local(''), url("../../files/filesZweirad/fonts/michroma-v16-latin-regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("../../files/filesZweirad/fonts/michroma-v16-latin-regular.woff2") format('woff2'), /* Super Modern Browsers */ url("../../files/filesZweirad/fonts/michroma-v16-latin-regular.woff") format('woff'), /* Modern Browsers */ url("../../files/filesZweirad/fonts/michroma-v16-latin-regular.ttf") format('truetype'), /* Safari, Android, iOS */ url("../../files/filesZweirad/fonts/michroma-v16-latin-regular.svg#Michroma") format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url("../../files/filesZweirad/fonts/open-sans-v34-latin-regular.eot"); /* IE9 Compat Modes */ src: local(''), url("../../files/filesZweirad/fonts/open-sans-v34-latin-regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("../../files/filesZweirad/fonts/open-sans-v34-latin-regular.woff2") format('woff2'), /* Super Modern Browsers */ url("../../files/filesZweirad/fonts/open-sans-v34-latin-regular.woff") format('woff'), /* Modern Browsers */ url("../../files/filesZweirad/fonts/open-sans-v34-latin-regular.ttf") format('truetype'), /* Safari, Android, iOS */ url("../../files/filesZweirad/fonts/open-sans-v34-latin-regular.svg#OpenSans") format('svg'); /* Legacy iOS */ } /* orbitron-regular - latin */ @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400; src: url("../../files/filesZweirad/fonts/orbitron-v25-latin-regular.eot"); /* IE9 Compat Modes */ src: local(''), url("../../files/filesZweirad/fonts/orbitron-v25-latin-regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("../../files/filesZweirad/fonts/orbitron-v25-latin-regular.woff2") format('woff2'), /* Super Modern Browsers */ url("../../files/filesZweirad/fonts/orbitron-v25-latin-regular.woff") format('woff'), /* Modern Browsers */ url("../../files/filesZweirad/fonts/orbitron-v25-latin-regular.ttf") format('truetype'), /* Safari, Android, iOS */ url("../../files/filesZweirad/fonts/orbitron-v25-latin-regular.svg#Orbitron") format('svg'); /* Legacy iOS */ } /*Artikelsuche*/ #suche{ position: absolute; margin-top: 4px } /*Hilfsklassen*/ .center{ margin: 0 auto; display: block; text-align: center; } .fl{ float: left } .fr{ float: right; } .cb{ clear: both !important; } .wd50{ width: 50% !important; } .wd25{ width: 25% !important; } .wd35{ width: 35% !important; } .wd75{ width: 75% !important; } .block{ display: block } /*Wild Button*/ .wildButton{ display: block; padding: 30px 100px 30px 110px; /*border: solid 1px #CCC;*/; background-color: #efefef; font-family: 'Michroma', sans-serif !important; font-size: 1.5em; background-repeat: no-repeat; background-position: 30px center; background-size: 75px; color: #333 } .wildButton:hover{ background-color: #fc3; } .wildButton.leihrad{ background-image:url("../../files/filesZweirad/img/Icon-Probefahrt.png"); } /*Abstände der Blöcke un weiteres*/ .pageAllgemein .mod_article, .pageProdukt .mod_article{ padding: 0 50px; } .grey{ background-color: #9F9F9F; padding: 10px 50px 50px 50px } .grey *{ color: #FFF } /*Navigation im Footer*/ #naviFooter{ min-height: 170px; } #naviFooter .sibling{ min-width: 150px } #naviFooter .container{ width:auto; position: relative; padding-left: 490px; } #naviFooter .inside{ background-color: #0E2B4E; padding: 20px !important; width: auto } #naviFooter *{ margin:0; padding:0; list-style: none; color: #FFF; } #naviFooter > ul.level_1{ display: table-row; } #naviFooter > ul.level_1 > li{ display: block; font-size: 1.2em; /*min-width: 300px;*/ display: table-cell; border-left: solid 1px #2B4565; padding:5px 20px 5px 20px; } #naviFooter > ul.level_1 > li.last{ border-left: none; } #naviFooter > ul.level_1 > li >a, #naviFooter > ul.level_1 > li >span{ font-size: 1.2em; font-weight: bold; text-decoration:underline } @media(max-width: 1200px){ #naviFooter .container{ padding-left: 380px; } } @media(max-width: 992px){ #naviFooter .container{ padding: 0; } } #naviFooter .galerieLaden{ display: none } /*Produkte im Footer*/ #naviProdukteFooter ul{ position: absolute; left: -440px; top:0; font-size: 2em; line-height: 1.2em; } #naviProdukteFooter a:hover{ background: #ffcc33; color: #000; } @media(max-width: 1200px){ #naviProdukteFooter ul{ left: -340px; top:10px; } } @media(max-width: 992px){ #naviProdukteFooter ul{ position: relative; left: 0; margin-left: 20px; margin-bottom: 20px; border-bottom: solid 1px #2B4565; padding-bottom: 20px; } } /*Stammdaten im Footer*/ #stammdaten h2{ margin-top: 0; } #stammdaten a{ display: inline; color: #FFF; } #stammdaten *{ margin: 0 } #stammdaten hr{ margin: 20px 0; } #stammdaten h3{ margin-top: 10px; } #stammdaten .container{ width:auto; position: relative; border-top:solid 2px #FFF; padding:0 } #stammdaten .stammdatenInside{ padding: 50px; background-color: #0A1D33; border-bottom: solid 10px #000; color: #FFF } #stammdaten hr{ border-color: #41556C; } @media(max-width: 765px){ #stammdaten .inside{ background-color: #0A1D33; } } /*Tabelle Serviceliste*/ #serviceListe table{ margin:50px 50px 0 100px } #serviceListe td{ padding:5px 10px } #serviceListe table h3{ margin: -2px 0 2px 0 } /*Finanzierungsrechner*/ #finanzierungsrechner{ border: solid 1px #CCC; padding: 50px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } @media(min-width: 1000px){ #finanzierungsrechner{ margin-top: -50px; } } #finanzierungsrechner label{ display: block; width: 300px; text-align: right; font-family: 'Michroma', sans-serif !important; font-weight: normal; font-size: .8em } #finanzierungsrechner select, #finanzierungsrechner input{ width:120px; padding: 3px 6px; } input[type="submit"], input[type="button"]{ margin-top: 20px } .hinweis{ font-style: italic; color: #8A7F7F; font-size: .9em; } .ergebnis{ font-size: 1.2em } .rate{ font-size: 2em; font-family: 'Michroma', sans-serif !important; } /*Topfoto*/ .bildLeihrad img, .bildFiliale img{ width:100%; height: 100%; -webkit-box-shadow: 4px 4px 5px -4px rgba(186,186,186,1); -moz-box-shadow: 4px 4px 5px -4px rgba(186,186,186,1); box-shadow: 4px 4px 5px -4px rgba(186,186,186,1); border: solid 4px #FFF; margin-top: 25px } /*Kontaktseite*/ .kontaktDaten .label{ color: #FFF !important; font-size: .8em; letter-spacing: .05em; width:100px; text-align: center; display: block; float: left; margin-right: 1em } .kontaktDaten .item{ margin-top: 3px; font-size: 1.2em; clear: both } .kontaktDaten h3{ margin-top: -8px } .toggler{ cursor: pointer !important; } .kontaktDaten .panel-body{ padding: 50px 20px 50px 75px !important } .kontakt .kontaktDaten *{ /*font-family: 'Open Sans', sans-serif !important;*/ text-decoration: none; color: #333 } .kontakt .kontaktDaten a:hover{ text-decoration: underline } .panel-body{ padding: 50px 75px 20px 75px !important } .kontakt .tab-content{ border: solid 1px #ddd; border-top: none; /*margin-top: -20px;*/ padding-top: 20px; padding-bottom: 50px; } .kontakt .tab-pane{ padding: 0px 20% 0px 80px; } .kontakt .tab-container{ margin-bottom: 30px } /*Karriere*/ .karriere .tab-content{ border: solid 1px #ddd; border-top: none; /*margin-top: -20px;*/ padding-top: 20px; padding-bottom: 50px; } .karriere .tab-pane{ padding: 0px 20% 0px 80px; } .karriere .ce_semantic_html5{ border: solid 1px #ddd; padding: 20px 0 50px 70px } /*Impressum*/ .impressum .mod_article{ padding: 0 200px 0 100px } .impressum .kontaktDaten *{ color: #333 } /*Check-Tool*/ #bildercheck table{ border-spacing: 2px; border-collapse: separate; } #bildercheck table td{ border: 1px solid #eee; border-collapse: separate; padding: 3px 1px 3px 10px; max-width: 200px; } #bildercheck .zelleLeer{ border:solid 1px red !important; } #bildercheck .zelleRed{ background-color:tomato; color: #FFF; font-weight: bold } #bildercheck .zelleYello{ background-color:#FC3; color:#585858 } #bildercheck .zelleGreen{ background-color: yellowgreen; color: #FFF; font-weight: bold } /*Bilder-Check-Tool*/ #bildercheck{ margin-right: 80px !important; margin-left: 50px !important; } #bildercheck .panel-default, #bildercheck .panel{ -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0) !important; -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0) !important; box-shadow: 0 0 0 rgba(255, 255, 255, 0) !important; background: none; margin-bottom: 3px; } #bildercheck .panel-heading{ /*background: none;*/ padding: 5px 0 3px 15px; } #bildercheck .panel-heading:hover{ background: none; background-color:darkorange; color: #FFF } /*Mitglieder Login*/ .mod_login #password, .mod_login #username{ max-width: 400px } #suche{ margin-left: -15px } /*Gewähleistungstext*/ .gewaehr{ padding: 0 !important; padding-left: 20px !important; background: none !important; margin-top: 8px !important; color:#333; font-size: .8em; font-style:italic } .gewaehr *{ display: inline; } #nachfrageFormular{ width:50% } /*Mitarbeiterseite*/ .pageAllgemein .leitung{ background-color: #f5f5f5; padding: 20px } .pageAllgemein .leitung.first{ border-bottom:#ccc solid 3px; padding:2px 5px 0 30px; margin-bottom:3px; } .pageAllgemein #mitarbeiter .ce_text h2{ margin-bottom: 5px !important; /*margin-top: 100px;*/ background-color: #f5f5f5; padding:14px 0 18px 27px; } .pageAllgemein #mitarbeiter .ce_text.first h2{ margin-bottom: 5px !important; margin-top: 0; } .pageAllgemein #mitarbeiter ul{ list-style: none; padding: 0 } .pageAllgemein #mitarbeiter .item{ width: 160px; height: 230px; text-align: center; float: left; line-height: 1em; color: #585858 } .pageAllgemein #mitarbeiter .item.first{ width:265px; height: 265px; margin-left: -15px; margin-right: 15px; } .pageAllgemein #mitarbeiter .item .file img{ width: 150px; height: auto; padding-bottom: 5px; border-bottom: #e1e1e1 solid 2px; } .pageAllgemein #mitarbeiter .item.first img, .pageAllgemein #mitarbeiter .image_container a img{ width: 250px; border: solid 4px #FC3; padding:0 } .pageAllgemein #mitarbeiter .mitarbName{ font-weight: bold; color:#0E2B4E } .pageAllgemein #mitarbeiter .mitarbname .value{ margin-top: -5px } .pageAllgemein #mitarbeiter .mitarbPosition{ font-size:.9em; } @media(max-width: 1200px){ .pageAllgemein #mitarbeiter .item.first{ width:180px; height: 300px; margin-left: -15px; margin-right: 15px; } .pageAllgemein #mitarbeiter .item.first img{ width: 180px; border: solid 4px #FC3; padding:0 } } @media(max-width: 992px){ .pageAllgemein #mitarbeiter .item, .pageAllgemein #mitarbeiter .item.first{ width: 100px; height: 160px; line-height: 1em; font-size: .7em; margin-right: 1px } .pageAllgemein #mitarbeiter .item .file img, .pageAllgemein #mitarbeiter .item.first .file img, .pageAllgemein #mitarbeiter .image_container a img{ width: 100px; height: auto; border: none } .pageAllgemein #mitarbeiter .item.first{ width:100px; height: 150px; margin-left: 0; } } .mitarbeiterStellengebot{ background-color: #eef9e5; padding: 18px 10px 7px 30px; border: dashed 2px #deead4; } #mitarbSlider .carousel-inner{ height: 250px; /*margin-bottom: 20px;*/ /*margin-top: -20px !important*/ } #mitarbSlider{ height: 250px; margin-bottom: 20px; background-color: #144177; } #mitarbSlider .item{ width:100% !important; } #mitarbSlider .item{ padding: 0 !important margin: 0 !important } #mitarbSlider .item h2{ text-align: left; background-color:#ffcc33 !important; margin: 0 /* text-shadow:1px 2px 7px rgba(72,88,117,1); color: #FFF*/ } #mitarbSlider .item p{ text-align: left; font-size: 1.5em; line-height:normal; padding-right:50px; padding-top: 20px; color: #FFF } #mitarbSlider .item .image_container img{ min-height: 250px; width: auto; border-right:5px solid #FFF } #mitarbSlider .carousel-control{ background: none } /*Galerie Laden*/ #galerieLaden{ margin-right: 15px !important; } #galerieLaden img{ max-height: 170px !important; width:auto; } @media(max-width: 1200px){ #galerieLaden img{ max-height: 130px !important; width:auto; } } @media(max-width: 992px){ #galerieLaden img{ max-height: 94px !important; width:auto; } } #galerieLaden .pagination li{ margin-right: 4px !important; display: block; float: left } /*Bildunterschriften*/ .caption{ margin-top: 3px; margin-right:5px; text-align: right; font-size: .8em } /*Helfer*/ .clearfix:after { content: "."; clear: both; display: block; visibility: hidden; height: 0px; } /*XML update*/ .btn.xml{ margin-bottom: 50px; } .xmlRight{ text-align: right; width: 100%; padding-right: 20px; } div.khand{ font-family: 'Khand'; } div.michroma{ font-family: 'Michroma'; } div.opensans{ font-family: 'Open Sans'; } div.orbitron{ font-family: 'Orbitron'; } /* ===== ZWEIRAD SCHAEL ONE UI 9 DESIGN LAYER v2.0 ===== */ /* ======================================================================= ZWEIRAD SCHAEL – ONE UI 9 / ANDROID 17 INSPIRED DESIGN LAYER Version 2.0 – complete component coverage Design intent: - Keep all original brand colours and image assets unchanged. - Keep content order, containers, Bootstrap columns, grid definitions, element positions and PHP behaviour intact. - Modernise surfaces, typography rendering, controls, focus, elevation, visual hierarchy and touch comfort. - The visual language follows Samsung One UI principles: focused content, natural interaction, readable hierarchy and adaptive presentation. ======================================================================= */ :root { --zs-ui-radius-xs: 8px; --zs-ui-radius-sm: 12px; --zs-ui-radius-md: 16px; --zs-ui-radius-lg: 20px; --zs-ui-radius-xl: 24px; --zs-ui-radius-pill: 999px; --zs-ui-shadow-1: 0 1px 3px rgba(0, 0, 0, .055), 0 2px 8px rgba(0, 0, 0, .035); --zs-ui-shadow-2: 0 4px 14px rgba(0, 0, 0, .075), 0 1px 3px rgba(0, 0, 0, .045); --zs-ui-shadow-3: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04); --zs-ui-transition: 180ms cubic-bezier(.2, .7, .2, 1); --zs-ui-transition-soft: 240ms cubic-bezier(.2, .65, .25, 1); } /* 01 – BASE / TYPE ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p, li, figcaption { text-wrap: pretty; } hr { opacity: .72; } /* 02 – MAIN SHELL / CONTENT AREAS --------------------------------------- */ #main { border-radius: var(--zs-ui-radius-xl); box-shadow: var(--zs-ui-shadow-1); } #containerHauptnavi, #containerHauptnavi .jumbotron, .jumbotron { border-radius: var(--zs-ui-radius-lg); } .pageTitle { border-radius: var(--zs-ui-radius-sm); } .pageAllgemein .mod_article, .pageProdukt .mod_article, .pageStartStd .ce_text, .pageStartStd .ce_text.block, .pageStartStd.ce_text.last.block { border-radius: var(--zs-ui-radius-lg); } .grey, .ce_text, .mod_article { border-radius: var(--zs-ui-radius-md); } .image_container, .ce_image, .ce_gallery, .thumbnail { border-radius: var(--zs-ui-radius-md); } /* 03 – NAVIGATION / WAYFINDING ------------------------------------------ */ #navbarProdukte, #navbarProdukte .navbar-collapse, #navbarSub, #naviProdukteFooter, #navbarNaviComplete, #navbarNaviKlassen, #naviFooter, #naviFooter .inside, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } #naviFooter .inside, #naviFooterMobile { overflow: hidden; } #navbarProdukte a, #navbarSub a, #navbarNaviComplete a, #navbarNaviKlassen a, #naviProdukteFooter a, #naviFooter a, #naviFooterMobile a { border-radius: var(--zs-ui-radius-sm); transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition), box-shadow var(--zs-ui-transition), opacity var(--zs-ui-transition); } #navbarProdukte a:hover, #navbarSub a:hover, #navbarNaviComplete a:hover, #navbarNaviKlassen a:hover, #naviProdukteFooter a:hover, #naviFooter a:hover, #naviFooterMobile a:hover { text-decoration: none; } .navbar-default, .navbar, .navbar-collapse { box-shadow: none; } .navbar-toggle { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .navbar-toggle:active { transform: scale(.98); } .dropdown-menu { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-3); overflow: hidden; } .dropdown-menu > li > a { transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition); } .breadcrumb { border-radius: var(--zs-ui-radius-pill); } /* 04 – BUTTONS / ACTIONS ----------------------------------------------- */ .btn, button.btn, input.btn, button, input[type="submit"], input[type="button"], input[type="reset"], .wildButton, .button, a.button { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition), filter var(--zs-ui-transition), background-color var(--zs-ui-transition); } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wildButton:hover, a.button:hover { box-shadow: var(--zs-ui-shadow-1); } .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active, .wildButton:active { transform: translateY(1px) scale(.99); } .btn-group > .btn:first-child, .btn-group > .btn:last-child, .input-group .btn { border-radius: var(--zs-ui-radius-sm) !important; } .wildButton { background-position: 28px center; } /* 05 – FORM CONTROLS / FILTERS ----------------------------------------- */ .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]), #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea, #finanzierungsrechner input, #finanzierungsrechner select, .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition), background-color var(--zs-ui-transition); } .form-control:focus, select:focus, textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 65, 119, .12); } input[type="checkbox"], input[type="radio"] { accent-color: #144177; } label { text-underline-offset: .16em; } .form-group { min-width: 0; } fieldset { border-radius: var(--zs-ui-radius-md); } /* 06 – ALERTS / PANELS / ACCORDIONS ------------------------------------ */ .alert, .panel, .panel-default, .panel-heading, .panel-body, .well, .tab-content, .tab-pane, .tab-container, .toggler, .hinweis, .ergebnis, .rate, .message-box { border-radius: var(--zs-ui-radius-md); } .alert, .panel, .well, .hinweis, .ergebnis { box-shadow: var(--zs-ui-shadow-1); } .panel-heading, .toggler { transition: filter var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .panel-heading:hover, .toggler:hover { box-shadow: var(--zs-ui-shadow-1); } /* 07 – PRODUCT CATEGORY CARDS / HOMEPAGE PRODUCT TILES ------------------ */ .box3Artikel, .box4Artikel, .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox, .fahrradZufallBox .box, .kachel, .warengruppe, .thumb, #altArt .thumb, #wrapKacheln .kachel { border-radius: var(--zs-ui-radius-lg); } .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox .box, .thumb, #altArt .thumb, .kachel, .warengruppe { box-shadow: var(--zs-ui-shadow-1); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } .box3Artikel .box:hover, .box4Artikel .box:hover, .fahrradZufallBox .box:hover, .thumb:hover, #altArt .thumb:hover, .kachel:hover, .warengruppe:hover { box-shadow: var(--zs-ui-shadow-2); } .box .overlay, .box4Artikel .overlay, .overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .produktname, .produktklasse, .markeModell, .modell, .thumb .marke, .thumb .modell { border-radius: 0 0 var(--zs-ui-radius-md) var(--zs-ui-radius-md); } .preis, .empf, .preisTotal, .rate-display { font-variant-numeric: tabular-nums; } .preis { border-radius: var(--zs-ui-radius-sm); } .empf { opacity: .88; } .zs-sale-corner, .detail-sale-badge { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); } /* Category grids with their own inline CSS – colour values remain original */ .schael-kachelgrid, .schael-ebike-kachelgrid, .schael-kachelgrid-mobile, .schael-ebike-kachelgrid-mobile { isolation: isolate; } .schael-kachelgrid .schael-kachel, .schael-ebike-kachelgrid .schael-ebike-kachel, .schael-kachelgrid-mobile .schael-kachel-mobile, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile { border-radius: var(--zs-ui-radius-lg); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .schael-kachelgrid .schael-kachel:hover, .schael-ebike-kachelgrid .schael-ebike-kachel:hover, .schael-kachelgrid-mobile .schael-kachel-mobile:hover, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile:hover { box-shadow: var(--zs-ui-shadow-2); transform: translateY(-2px); } .schael-kachelbild, .schael-ebike-kachelbild, .schael-kachelbild-mobile, .schael-ebike-kachelbild-mobile { overflow: hidden; } .schael-kachelbild img, .schael-ebike-kachelbild img, .schael-kachelbild-mobile img, .schael-ebike-kachelbild-mobile img { transition: transform var(--zs-ui-transition-soft); } .schael-kachelgrid a:hover img, .schael-ebike-kachelgrid a:hover img, .schael-kachelgrid-mobile a:hover img, .schael-ebike-kachelgrid-mobile a:hover img { transform: scale(1.025); } .schael-kacheltitel, .schael-ebike-kacheltitel, .schael-kacheltitel-mobile, .schael-ebike-kacheltitel-mobile { border-radius: 0 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg); letter-spacing: -.01em; font-weight: 600; } /* 08 – PRODUCT DETAIL ----------------------------------------------- */ .produktDetail { border-radius: var(--zs-ui-radius-xl); } .produktDetail .bild, .produktDetail .bild img, .produktBild, #altArt .produktBild { border-radius: var(--zs-ui-radius-lg); } #wrapBeschreibung, .produkt-aktionen, .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich, .produkt-merkmale-bereich { border-radius: var(--zs-ui-radius-lg); } .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich { box-shadow: var(--zs-ui-shadow-1); } .verfuegbarkeit-zeile, .wrapAmpel, .ampelInline, .ampel { border-radius: var(--zs-ui-radius-sm); } .verfuegbarkeit-status, .ampelLabel, .heightRahmen { line-height: 1.45; } .produkt-merkmale-kopf { border-radius: var(--zs-ui-radius-md); } .produkt-merkmal-card { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .produkt-merkmal-card:hover { box-shadow: var(--zs-ui-shadow-2); } .produkt-merkmal-label { letter-spacing: -.01em; } .produkt-merkmal-icon { border-radius: var(--zs-ui-radius-pill); } .weitere-varianten-list { border-radius: var(--zs-ui-radius-md); } .weitere-variante-bild { border-radius: var(--zs-ui-radius-sm); overflow: hidden; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .weitere-variante-bild:hover { box-shadow: var(--zs-ui-shadow-2); } /* 09 – LISTING / FILTER / PRICE RANGE ----------------------------------- */ .article-filter-panel, .article-filter-content, .article-filter-toggle, #article-filter-content, #wrapSearchResult, #wrapSearchResult .row, #noResult, .paginierung, #slider-range { border-radius: var(--zs-ui-radius-lg); } .article-filter-panel, .article-filter-content { box-shadow: var(--zs-ui-shadow-1); } .article-filter-toggle { box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .article-filter-toggle:hover { box-shadow: var(--zs-ui-shadow-2); } .article-filter-content select.form-control, .article-filter-content .form-control { border-radius: var(--zs-ui-radius-sm); } .article-filter-actions .btn, .article-filter-content .formButtons .btn { border-radius: var(--zs-ui-radius-sm) !important; } .article-filter-price { border-radius: var(--zs-ui-radius-md); } #slider-range .ui-slider-handle, .ui-slider .ui-slider-handle { border-radius: var(--zs-ui-radius-pill); box-shadow: var(--zs-ui-shadow-1); cursor: grab; } #slider-range .ui-slider-handle:active, .ui-slider .ui-slider-handle:active { cursor: grabbing; } .paginierung, .paginierung a, input.paginierung { border-radius: var(--zs-ui-radius-pill); } .thumb .img, .thumb .img img { border-radius: var(--zs-ui-radius-md); } #wrapSearchResult { box-shadow: var(--zs-ui-shadow-1); } #wrapSearchResult .row, .searchItemResult { border-radius: var(--zs-ui-radius-lg); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #wrapSearchResult .row:hover, .searchItemResult:hover { box-shadow: var(--zs-ui-shadow-2); } .zs-search-image-wrap, .zs-search-image-wrap img { border-radius: var(--zs-ui-radius-md); } /* 10 – FINANCING CALCULATOR --------------------------------------------- */ .finanz-modul-wrap, .finanz-layout, .calc-wrapper, .calc-form, .result-box, .result-warning, .radio-tabs, .radio-tab, .radio-tab-content, .result-grid { border-radius: var(--zs-ui-radius-lg) !important; } .calc-wrapper, .calc-form, .result-box, .result-warning { box-shadow: var(--zs-ui-shadow-1) !important; } .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; } .radio-tab-content { border-radius: var(--zs-ui-radius-sm) !important; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition) !important; } .radio-tab input[type="radio"]:checked + .radio-tab-content { box-shadow: 0 0 0 1px currentColor inset !important; } .result-box { overflow: hidden; } .rate-display { letter-spacing: -.035em; } .result-grid > div { border-radius: var(--zs-ui-radius-sm); } .result-warning { overflow: hidden; } /* 11 – SERVICE / CONTACT / CONTENT -------------------------------------- */ #naviServicePoints, #naviServicePoints.container, #serviceListe, #serviceListe table, .service table, .kontaktDaten, .kontaktDaten .item, .kontakt .tab-content, .karriere .tab-content, #stammdaten .stammdatenInside, #bildercheck, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, #galerieLaden, .prospekt, #prospekteAll, .event { border-radius: var(--zs-ui-radius-lg); } #naviServicePoints, #serviceListe table, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, .prospekt { box-shadow: var(--zs-ui-shadow-1); } #naviServicePoints a, .kontaktDaten a, #mitarbeiter .item a, .prospekt a { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } #naviServicePoints a:hover, .kontaktDaten a:hover, #mitarbeiter .item a:hover, .prospekt a:hover { opacity: .92; } #naviFooter, #naviFooterMobile, #stammdaten .stammdatenInside { overflow: hidden; } #naviFooter > ul.level_1 > li, #naviFooterMobile ul.level_1 > li { border-radius: var(--zs-ui-radius-sm); } #stammdaten .container { border-radius: var(--zs-ui-radius-lg); overflow: hidden; } #mitarbeiter .image_container img, #mitarbSlider .image_container img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-md); } .prospekt img { border-radius: var(--zs-ui-radius-sm); } .prospekt .overlay { border-radius: 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg) 0; } /* 12 – TABLES / PAGINATION / DATA --------------------------------------- */ table { border-collapse: separate; border-spacing: 0; } #serviceListe table, .service table, #bildercheck table, #bildercheck .panel { overflow: hidden; } #serviceListe td, .service td, #bildercheck table td { vertical-align: middle; } #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md) var(--zs-ui-radius-md) 0 0; } /* 13 – ACCESSIBILITY / FOCUS -------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffcc33; outline-offset: 2px; } /* 14 – RESPONSIVE FINISHING --------------------------------------------- */ @media (max-width: 767px) { html, body { max-width: 100%; } #main { border-radius: var(--zs-ui-radius-lg); } #containerHauptnavi, #navbarProdukte, #navbarProdukte .navbar-collapse, #naviProdukteFooter, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } .btn, button, input[type="submit"], input[type="button"], .navbar-toggle { min-height: 42px; } .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]) { font-size: 16px; } .box3Artikel .box, .box4Artikel .box { width: min(400px, 100%); max-width: 100%; } .box3Artikel .produktname, .box4Artikel .produktname { max-width: 100%; } .produkt-aktionen .btn { min-height: 42px; } .article-filter-content .formButtons .btn { min-height: 44px; } .prospekt, .searchItemResult, #wrapSearchResult .row { border-radius: var(--zs-ui-radius-md); } } @media (max-width: 420px) { .produkt-merkmal-card { min-width: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .navbar-default, #navbarProdukte, #naviFooter, #stammdaten .stammdatenInside { border-radius: var(--zs-ui-radius-lg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 15 – REMAINING SITE MODULES / LEGACY COMPONENTS ----------------------- */ #suche, #nachfrageFormular, #bildercheck, #mitarbeiter, #mitarbSlider, #galerieLaden, #wrapKacheln, #prospekteAll, #serviceListe, #stammdaten, .kontakt, .karriere, .impressum, .pageTitle, .hl_mobile, .topBild, .facts-list-wrap, .facts-list, .row.statistic, .rate, .gewaehr, .empf, .markeModell, .produktRubrikHeader, .produkt-merkmal-card, .produkt-aktionen, .produkt-hinweis-container, .weitere-varianten-bereich, .weitere-variante-bild, .wrapAmpel, .ampel, #finanzierungsrechner, #naviServicePoints, #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md); } #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #galerieLaden img, .topBild img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-lg); } #finanzierungsrechner { box-shadow: var(--zs-ui-shadow-1); } #mitarbSlider .carousel-control, .slick-prev, .slick-next, .rsts-prev, .rsts-next, .rsts-nav a { border-radius: var(--zs-ui-radius-pill); transition: opacity var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .slick-dots li button:before { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } .slick-dots li.slick-active button:before { transform: scale(1.08); } #breadCrumbs, .breadcrumb { border-radius: var(--zs-ui-radius-pill); } #stammdaten .stammdatenInside, #naviFooter .inside, #naviFooterMobile { box-shadow: var(--zs-ui-shadow-1); } .kontaktDaten .item, #mitarbeiter .item, #galerieLaden, #prospekteAll .prospekt { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #mitarbeiter .item:hover, #prospekteAll .prospekt:hover { box-shadow: var(--zs-ui-shadow-2); } .markenLogo, .produkt-merkmal-icon, .header-badge, .badge-text { border-radius: var(--zs-ui-radius-pill); } @media print { html { scroll-behavior: auto; } #main, #finanzierungsrechner, #naviFooter .inside, #naviFooterMobile, .produktDetail, .produkt-merkmal-card, .result-box, .panel, .alert, .prospekt, #mitarbeiter .item, #naviServicePoints { box-shadow: none !important; } } /* Created on : 24.03.2016, 14:47:37 Author : Carsten Schober */ #termine-aktionen{ margin: 0 70px 50px 50px !important; } #termine-aktionen h2{ font-size: 1.7em !important; margin-top: 50px } .location{ font-size: 1.1em; border-bottom: solid 1px #6d747d } /* ===== ZWEIRAD SCHAEL ONE UI 9 DESIGN LAYER v2.0 ===== */ /* ======================================================================= ZWEIRAD SCHAEL – ONE UI 9 / ANDROID 17 INSPIRED DESIGN LAYER Version 2.0 – complete component coverage Design intent: - Keep all original brand colours and image assets unchanged. - Keep content order, containers, Bootstrap columns, grid definitions, element positions and PHP behaviour intact. - Modernise surfaces, typography rendering, controls, focus, elevation, visual hierarchy and touch comfort. - The visual language follows Samsung One UI principles: focused content, natural interaction, readable hierarchy and adaptive presentation. ======================================================================= */ :root { --zs-ui-radius-xs: 8px; --zs-ui-radius-sm: 12px; --zs-ui-radius-md: 16px; --zs-ui-radius-lg: 20px; --zs-ui-radius-xl: 24px; --zs-ui-radius-pill: 999px; --zs-ui-shadow-1: 0 1px 3px rgba(0, 0, 0, .055), 0 2px 8px rgba(0, 0, 0, .035); --zs-ui-shadow-2: 0 4px 14px rgba(0, 0, 0, .075), 0 1px 3px rgba(0, 0, 0, .045); --zs-ui-shadow-3: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04); --zs-ui-transition: 180ms cubic-bezier(.2, .7, .2, 1); --zs-ui-transition-soft: 240ms cubic-bezier(.2, .65, .25, 1); } /* 01 – BASE / TYPE ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p, li, figcaption { text-wrap: pretty; } hr { opacity: .72; } /* 02 – MAIN SHELL / CONTENT AREAS --------------------------------------- */ #main { border-radius: var(--zs-ui-radius-xl); box-shadow: var(--zs-ui-shadow-1); } #containerHauptnavi, #containerHauptnavi .jumbotron, .jumbotron { border-radius: var(--zs-ui-radius-lg); } .pageTitle { border-radius: var(--zs-ui-radius-sm); } .pageAllgemein .mod_article, .pageProdukt .mod_article, .pageStartStd .ce_text, .pageStartStd .ce_text.block, .pageStartStd.ce_text.last.block { border-radius: var(--zs-ui-radius-lg); } .grey, .ce_text, .mod_article { border-radius: var(--zs-ui-radius-md); } .image_container, .ce_image, .ce_gallery, .thumbnail { border-radius: var(--zs-ui-radius-md); } /* 03 – NAVIGATION / WAYFINDING ------------------------------------------ */ #navbarProdukte, #navbarProdukte .navbar-collapse, #navbarSub, #naviProdukteFooter, #navbarNaviComplete, #navbarNaviKlassen, #naviFooter, #naviFooter .inside, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } #naviFooter .inside, #naviFooterMobile { overflow: hidden; } #navbarProdukte a, #navbarSub a, #navbarNaviComplete a, #navbarNaviKlassen a, #naviProdukteFooter a, #naviFooter a, #naviFooterMobile a { border-radius: var(--zs-ui-radius-sm); transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition), box-shadow var(--zs-ui-transition), opacity var(--zs-ui-transition); } #navbarProdukte a:hover, #navbarSub a:hover, #navbarNaviComplete a:hover, #navbarNaviKlassen a:hover, #naviProdukteFooter a:hover, #naviFooter a:hover, #naviFooterMobile a:hover { text-decoration: none; } .navbar-default, .navbar, .navbar-collapse { box-shadow: none; } .navbar-toggle { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .navbar-toggle:active { transform: scale(.98); } .dropdown-menu { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-3); overflow: hidden; } .dropdown-menu > li > a { transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition); } .breadcrumb { border-radius: var(--zs-ui-radius-pill); } /* 04 – BUTTONS / ACTIONS ----------------------------------------------- */ .btn, button.btn, input.btn, button, input[type="submit"], input[type="button"], input[type="reset"], .wildButton, .button, a.button { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition), filter var(--zs-ui-transition), background-color var(--zs-ui-transition); } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wildButton:hover, a.button:hover { box-shadow: var(--zs-ui-shadow-1); } .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active, .wildButton:active { transform: translateY(1px) scale(.99); } .btn-group > .btn:first-child, .btn-group > .btn:last-child, .input-group .btn { border-radius: var(--zs-ui-radius-sm) !important; } .wildButton { background-position: 28px center; } /* 05 – FORM CONTROLS / FILTERS ----------------------------------------- */ .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]), #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea, #finanzierungsrechner input, #finanzierungsrechner select, .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition), background-color var(--zs-ui-transition); } .form-control:focus, select:focus, textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 65, 119, .12); } input[type="checkbox"], input[type="radio"] { accent-color: #144177; } label { text-underline-offset: .16em; } .form-group { min-width: 0; } fieldset { border-radius: var(--zs-ui-radius-md); } /* 06 – ALERTS / PANELS / ACCORDIONS ------------------------------------ */ .alert, .panel, .panel-default, .panel-heading, .panel-body, .well, .tab-content, .tab-pane, .tab-container, .toggler, .hinweis, .ergebnis, .rate, .message-box { border-radius: var(--zs-ui-radius-md); } .alert, .panel, .well, .hinweis, .ergebnis { box-shadow: var(--zs-ui-shadow-1); } .panel-heading, .toggler { transition: filter var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .panel-heading:hover, .toggler:hover { box-shadow: var(--zs-ui-shadow-1); } /* 07 – PRODUCT CATEGORY CARDS / HOMEPAGE PRODUCT TILES ------------------ */ .box3Artikel, .box4Artikel, .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox, .fahrradZufallBox .box, .kachel, .warengruppe, .thumb, #altArt .thumb, #wrapKacheln .kachel { border-radius: var(--zs-ui-radius-lg); } .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox .box, .thumb, #altArt .thumb, .kachel, .warengruppe { box-shadow: var(--zs-ui-shadow-1); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } .box3Artikel .box:hover, .box4Artikel .box:hover, .fahrradZufallBox .box:hover, .thumb:hover, #altArt .thumb:hover, .kachel:hover, .warengruppe:hover { box-shadow: var(--zs-ui-shadow-2); } .box .overlay, .box4Artikel .overlay, .overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .produktname, .produktklasse, .markeModell, .modell, .thumb .marke, .thumb .modell { border-radius: 0 0 var(--zs-ui-radius-md) var(--zs-ui-radius-md); } .preis, .empf, .preisTotal, .rate-display { font-variant-numeric: tabular-nums; } .preis { border-radius: var(--zs-ui-radius-sm); } .empf { opacity: .88; } .zs-sale-corner, .detail-sale-badge { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); } /* Category grids with their own inline CSS – colour values remain original */ .schael-kachelgrid, .schael-ebike-kachelgrid, .schael-kachelgrid-mobile, .schael-ebike-kachelgrid-mobile { isolation: isolate; } .schael-kachelgrid .schael-kachel, .schael-ebike-kachelgrid .schael-ebike-kachel, .schael-kachelgrid-mobile .schael-kachel-mobile, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile { border-radius: var(--zs-ui-radius-lg); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .schael-kachelgrid .schael-kachel:hover, .schael-ebike-kachelgrid .schael-ebike-kachel:hover, .schael-kachelgrid-mobile .schael-kachel-mobile:hover, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile:hover { box-shadow: var(--zs-ui-shadow-2); transform: translateY(-2px); } .schael-kachelbild, .schael-ebike-kachelbild, .schael-kachelbild-mobile, .schael-ebike-kachelbild-mobile { overflow: hidden; } .schael-kachelbild img, .schael-ebike-kachelbild img, .schael-kachelbild-mobile img, .schael-ebike-kachelbild-mobile img { transition: transform var(--zs-ui-transition-soft); } .schael-kachelgrid a:hover img, .schael-ebike-kachelgrid a:hover img, .schael-kachelgrid-mobile a:hover img, .schael-ebike-kachelgrid-mobile a:hover img { transform: scale(1.025); } .schael-kacheltitel, .schael-ebike-kacheltitel, .schael-kacheltitel-mobile, .schael-ebike-kacheltitel-mobile { border-radius: 0 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg); letter-spacing: -.01em; font-weight: 600; } /* 08 – PRODUCT DETAIL ----------------------------------------------- */ .produktDetail { border-radius: var(--zs-ui-radius-xl); } .produktDetail .bild, .produktDetail .bild img, .produktBild, #altArt .produktBild { border-radius: var(--zs-ui-radius-lg); } #wrapBeschreibung, .produkt-aktionen, .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich, .produkt-merkmale-bereich { border-radius: var(--zs-ui-radius-lg); } .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich { box-shadow: var(--zs-ui-shadow-1); } .verfuegbarkeit-zeile, .wrapAmpel, .ampelInline, .ampel { border-radius: var(--zs-ui-radius-sm); } .verfuegbarkeit-status, .ampelLabel, .heightRahmen { line-height: 1.45; } .produkt-merkmale-kopf { border-radius: var(--zs-ui-radius-md); } .produkt-merkmal-card { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .produkt-merkmal-card:hover { box-shadow: var(--zs-ui-shadow-2); } .produkt-merkmal-label { letter-spacing: -.01em; } .produkt-merkmal-icon { border-radius: var(--zs-ui-radius-pill); } .weitere-varianten-list { border-radius: var(--zs-ui-radius-md); } .weitere-variante-bild { border-radius: var(--zs-ui-radius-sm); overflow: hidden; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .weitere-variante-bild:hover { box-shadow: var(--zs-ui-shadow-2); } /* 09 – LISTING / FILTER / PRICE RANGE ----------------------------------- */ .article-filter-panel, .article-filter-content, .article-filter-toggle, #article-filter-content, #wrapSearchResult, #wrapSearchResult .row, #noResult, .paginierung, #slider-range { border-radius: var(--zs-ui-radius-lg); } .article-filter-panel, .article-filter-content { box-shadow: var(--zs-ui-shadow-1); } .article-filter-toggle { box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .article-filter-toggle:hover { box-shadow: var(--zs-ui-shadow-2); } .article-filter-content select.form-control, .article-filter-content .form-control { border-radius: var(--zs-ui-radius-sm); } .article-filter-actions .btn, .article-filter-content .formButtons .btn { border-radius: var(--zs-ui-radius-sm) !important; } .article-filter-price { border-radius: var(--zs-ui-radius-md); } #slider-range .ui-slider-handle, .ui-slider .ui-slider-handle { border-radius: var(--zs-ui-radius-pill); box-shadow: var(--zs-ui-shadow-1); cursor: grab; } #slider-range .ui-slider-handle:active, .ui-slider .ui-slider-handle:active { cursor: grabbing; } .paginierung, .paginierung a, input.paginierung { border-radius: var(--zs-ui-radius-pill); } .thumb .img, .thumb .img img { border-radius: var(--zs-ui-radius-md); } #wrapSearchResult { box-shadow: var(--zs-ui-shadow-1); } #wrapSearchResult .row, .searchItemResult { border-radius: var(--zs-ui-radius-lg); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #wrapSearchResult .row:hover, .searchItemResult:hover { box-shadow: var(--zs-ui-shadow-2); } .zs-search-image-wrap, .zs-search-image-wrap img { border-radius: var(--zs-ui-radius-md); } /* 10 – FINANCING CALCULATOR --------------------------------------------- */ .finanz-modul-wrap, .finanz-layout, .calc-wrapper, .calc-form, .result-box, .result-warning, .radio-tabs, .radio-tab, .radio-tab-content, .result-grid { border-radius: var(--zs-ui-radius-lg) !important; } .calc-wrapper, .calc-form, .result-box, .result-warning { box-shadow: var(--zs-ui-shadow-1) !important; } .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; } .radio-tab-content { border-radius: var(--zs-ui-radius-sm) !important; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition) !important; } .radio-tab input[type="radio"]:checked + .radio-tab-content { box-shadow: 0 0 0 1px currentColor inset !important; } .result-box { overflow: hidden; } .rate-display { letter-spacing: -.035em; } .result-grid > div { border-radius: var(--zs-ui-radius-sm); } .result-warning { overflow: hidden; } /* 11 – SERVICE / CONTACT / CONTENT -------------------------------------- */ #naviServicePoints, #naviServicePoints.container, #serviceListe, #serviceListe table, .service table, .kontaktDaten, .kontaktDaten .item, .kontakt .tab-content, .karriere .tab-content, #stammdaten .stammdatenInside, #bildercheck, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, #galerieLaden, .prospekt, #prospekteAll, .event { border-radius: var(--zs-ui-radius-lg); } #naviServicePoints, #serviceListe table, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, .prospekt { box-shadow: var(--zs-ui-shadow-1); } #naviServicePoints a, .kontaktDaten a, #mitarbeiter .item a, .prospekt a { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } #naviServicePoints a:hover, .kontaktDaten a:hover, #mitarbeiter .item a:hover, .prospekt a:hover { opacity: .92; } #naviFooter, #naviFooterMobile, #stammdaten .stammdatenInside { overflow: hidden; } #naviFooter > ul.level_1 > li, #naviFooterMobile ul.level_1 > li { border-radius: var(--zs-ui-radius-sm); } #stammdaten .container { border-radius: var(--zs-ui-radius-lg); overflow: hidden; } #mitarbeiter .image_container img, #mitarbSlider .image_container img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-md); } .prospekt img { border-radius: var(--zs-ui-radius-sm); } .prospekt .overlay { border-radius: 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg) 0; } /* 12 – TABLES / PAGINATION / DATA --------------------------------------- */ table { border-collapse: separate; border-spacing: 0; } #serviceListe table, .service table, #bildercheck table, #bildercheck .panel { overflow: hidden; } #serviceListe td, .service td, #bildercheck table td { vertical-align: middle; } #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md) var(--zs-ui-radius-md) 0 0; } /* 13 – ACCESSIBILITY / FOCUS -------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffcc33; outline-offset: 2px; } /* 14 – RESPONSIVE FINISHING --------------------------------------------- */ @media (max-width: 767px) { html, body { max-width: 100%; } #main { border-radius: var(--zs-ui-radius-lg); } #containerHauptnavi, #navbarProdukte, #navbarProdukte .navbar-collapse, #naviProdukteFooter, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } .btn, button, input[type="submit"], input[type="button"], .navbar-toggle { min-height: 42px; } .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]) { font-size: 16px; } .box3Artikel .box, .box4Artikel .box { width: min(400px, 100%); max-width: 100%; } .box3Artikel .produktname, .box4Artikel .produktname { max-width: 100%; } .produkt-aktionen .btn { min-height: 42px; } .article-filter-content .formButtons .btn { min-height: 44px; } .prospekt, .searchItemResult, #wrapSearchResult .row { border-radius: var(--zs-ui-radius-md); } } @media (max-width: 420px) { .produkt-merkmal-card { min-width: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .navbar-default, #navbarProdukte, #naviFooter, #stammdaten .stammdatenInside { border-radius: var(--zs-ui-radius-lg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 15 – REMAINING SITE MODULES / LEGACY COMPONENTS ----------------------- */ #suche, #nachfrageFormular, #bildercheck, #mitarbeiter, #mitarbSlider, #galerieLaden, #wrapKacheln, #prospekteAll, #serviceListe, #stammdaten, .kontakt, .karriere, .impressum, .pageTitle, .hl_mobile, .topBild, .facts-list-wrap, .facts-list, .row.statistic, .rate, .gewaehr, .empf, .markeModell, .produktRubrikHeader, .produkt-merkmal-card, .produkt-aktionen, .produkt-hinweis-container, .weitere-varianten-bereich, .weitere-variante-bild, .wrapAmpel, .ampel, #finanzierungsrechner, #naviServicePoints, #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md); } #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #galerieLaden img, .topBild img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-lg); } #finanzierungsrechner { box-shadow: var(--zs-ui-shadow-1); } #mitarbSlider .carousel-control, .slick-prev, .slick-next, .rsts-prev, .rsts-next, .rsts-nav a { border-radius: var(--zs-ui-radius-pill); transition: opacity var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .slick-dots li button:before { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } .slick-dots li.slick-active button:before { transform: scale(1.08); } #breadCrumbs, .breadcrumb { border-radius: var(--zs-ui-radius-pill); } #stammdaten .stammdatenInside, #naviFooter .inside, #naviFooterMobile { box-shadow: var(--zs-ui-shadow-1); } .kontaktDaten .item, #mitarbeiter .item, #galerieLaden, #prospekteAll .prospekt { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #mitarbeiter .item:hover, #prospekteAll .prospekt:hover { box-shadow: var(--zs-ui-shadow-2); } .markenLogo, .produkt-merkmal-icon, .header-badge, .badge-text { border-radius: var(--zs-ui-radius-pill); } @media print { html { scroll-behavior: auto; } #main, #finanzierungsrechner, #naviFooter .inside, #naviFooterMobile, .produktDetail, .produkt-merkmal-card, .result-box, .panel, .alert, .prospekt, #mitarbeiter .item, #naviServicePoints { box-shadow: none !important; } } /* Created on : 04.04.2016, 15:32:26 Author : Carsten Schober */ #termine-aktionen{ background-color: #eee; padding: 5px 0 5px 0; margin: 0 20px 0 20px !important } #termine-aktionen .ce_text{ margin: 15px 100px 50px 15px; font-size: 1.1em } .event{ padding: 5px; background-color: #FFF; margin: 15px; padding: 1px 40px 35px 70px } .event .ce_text{ margin-left: 20px !important; margin-bottom: 20px !important; font-size: 1em !important } .mod_eventlist{ clear: both } @media(max-width: 992px){ #termine-aktionen{ font-size: .8em !important } } /* ===== ZWEIRAD SCHAEL ONE UI 9 DESIGN LAYER v2.0 ===== */ /* ======================================================================= ZWEIRAD SCHAEL – ONE UI 9 / ANDROID 17 INSPIRED DESIGN LAYER Version 2.0 – complete component coverage Design intent: - Keep all original brand colours and image assets unchanged. - Keep content order, containers, Bootstrap columns, grid definitions, element positions and PHP behaviour intact. - Modernise surfaces, typography rendering, controls, focus, elevation, visual hierarchy and touch comfort. - The visual language follows Samsung One UI principles: focused content, natural interaction, readable hierarchy and adaptive presentation. ======================================================================= */ :root { --zs-ui-radius-xs: 8px; --zs-ui-radius-sm: 12px; --zs-ui-radius-md: 16px; --zs-ui-radius-lg: 20px; --zs-ui-radius-xl: 24px; --zs-ui-radius-pill: 999px; --zs-ui-shadow-1: 0 1px 3px rgba(0, 0, 0, .055), 0 2px 8px rgba(0, 0, 0, .035); --zs-ui-shadow-2: 0 4px 14px rgba(0, 0, 0, .075), 0 1px 3px rgba(0, 0, 0, .045); --zs-ui-shadow-3: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04); --zs-ui-transition: 180ms cubic-bezier(.2, .7, .2, 1); --zs-ui-transition-soft: 240ms cubic-bezier(.2, .65, .25, 1); } /* 01 – BASE / TYPE ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p, li, figcaption { text-wrap: pretty; } hr { opacity: .72; } /* 02 – MAIN SHELL / CONTENT AREAS --------------------------------------- */ #main { border-radius: var(--zs-ui-radius-xl); box-shadow: var(--zs-ui-shadow-1); } #containerHauptnavi, #containerHauptnavi .jumbotron, .jumbotron { border-radius: var(--zs-ui-radius-lg); } .pageTitle { border-radius: var(--zs-ui-radius-sm); } .pageAllgemein .mod_article, .pageProdukt .mod_article, .pageStartStd .ce_text, .pageStartStd .ce_text.block, .pageStartStd.ce_text.last.block { border-radius: var(--zs-ui-radius-lg); } .grey, .ce_text, .mod_article { border-radius: var(--zs-ui-radius-md); } .image_container, .ce_image, .ce_gallery, .thumbnail { border-radius: var(--zs-ui-radius-md); } /* 03 – NAVIGATION / WAYFINDING ------------------------------------------ */ #navbarProdukte, #navbarProdukte .navbar-collapse, #navbarSub, #naviProdukteFooter, #navbarNaviComplete, #navbarNaviKlassen, #naviFooter, #naviFooter .inside, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } #naviFooter .inside, #naviFooterMobile { overflow: hidden; } #navbarProdukte a, #navbarSub a, #navbarNaviComplete a, #navbarNaviKlassen a, #naviProdukteFooter a, #naviFooter a, #naviFooterMobile a { border-radius: var(--zs-ui-radius-sm); transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition), box-shadow var(--zs-ui-transition), opacity var(--zs-ui-transition); } #navbarProdukte a:hover, #navbarSub a:hover, #navbarNaviComplete a:hover, #navbarNaviKlassen a:hover, #naviProdukteFooter a:hover, #naviFooter a:hover, #naviFooterMobile a:hover { text-decoration: none; } .navbar-default, .navbar, .navbar-collapse { box-shadow: none; } .navbar-toggle { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .navbar-toggle:active { transform: scale(.98); } .dropdown-menu { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-3); overflow: hidden; } .dropdown-menu > li > a { transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition); } .breadcrumb { border-radius: var(--zs-ui-radius-pill); } /* 04 – BUTTONS / ACTIONS ----------------------------------------------- */ .btn, button.btn, input.btn, button, input[type="submit"], input[type="button"], input[type="reset"], .wildButton, .button, a.button { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition), filter var(--zs-ui-transition), background-color var(--zs-ui-transition); } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wildButton:hover, a.button:hover { box-shadow: var(--zs-ui-shadow-1); } .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active, .wildButton:active { transform: translateY(1px) scale(.99); } .btn-group > .btn:first-child, .btn-group > .btn:last-child, .input-group .btn { border-radius: var(--zs-ui-radius-sm) !important; } .wildButton { background-position: 28px center; } /* 05 – FORM CONTROLS / FILTERS ----------------------------------------- */ .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]), #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea, #finanzierungsrechner input, #finanzierungsrechner select, .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition), background-color var(--zs-ui-transition); } .form-control:focus, select:focus, textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 65, 119, .12); } input[type="checkbox"], input[type="radio"] { accent-color: #144177; } label { text-underline-offset: .16em; } .form-group { min-width: 0; } fieldset { border-radius: var(--zs-ui-radius-md); } /* 06 – ALERTS / PANELS / ACCORDIONS ------------------------------------ */ .alert, .panel, .panel-default, .panel-heading, .panel-body, .well, .tab-content, .tab-pane, .tab-container, .toggler, .hinweis, .ergebnis, .rate, .message-box { border-radius: var(--zs-ui-radius-md); } .alert, .panel, .well, .hinweis, .ergebnis { box-shadow: var(--zs-ui-shadow-1); } .panel-heading, .toggler { transition: filter var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .panel-heading:hover, .toggler:hover { box-shadow: var(--zs-ui-shadow-1); } /* 07 – PRODUCT CATEGORY CARDS / HOMEPAGE PRODUCT TILES ------------------ */ .box3Artikel, .box4Artikel, .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox, .fahrradZufallBox .box, .kachel, .warengruppe, .thumb, #altArt .thumb, #wrapKacheln .kachel { border-radius: var(--zs-ui-radius-lg); } .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox .box, .thumb, #altArt .thumb, .kachel, .warengruppe { box-shadow: var(--zs-ui-shadow-1); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } .box3Artikel .box:hover, .box4Artikel .box:hover, .fahrradZufallBox .box:hover, .thumb:hover, #altArt .thumb:hover, .kachel:hover, .warengruppe:hover { box-shadow: var(--zs-ui-shadow-2); } .box .overlay, .box4Artikel .overlay, .overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .produktname, .produktklasse, .markeModell, .modell, .thumb .marke, .thumb .modell { border-radius: 0 0 var(--zs-ui-radius-md) var(--zs-ui-radius-md); } .preis, .empf, .preisTotal, .rate-display { font-variant-numeric: tabular-nums; } .preis { border-radius: var(--zs-ui-radius-sm); } .empf { opacity: .88; } .zs-sale-corner, .detail-sale-badge { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); } /* Category grids with their own inline CSS – colour values remain original */ .schael-kachelgrid, .schael-ebike-kachelgrid, .schael-kachelgrid-mobile, .schael-ebike-kachelgrid-mobile { isolation: isolate; } .schael-kachelgrid .schael-kachel, .schael-ebike-kachelgrid .schael-ebike-kachel, .schael-kachelgrid-mobile .schael-kachel-mobile, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile { border-radius: var(--zs-ui-radius-lg); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .schael-kachelgrid .schael-kachel:hover, .schael-ebike-kachelgrid .schael-ebike-kachel:hover, .schael-kachelgrid-mobile .schael-kachel-mobile:hover, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile:hover { box-shadow: var(--zs-ui-shadow-2); transform: translateY(-2px); } .schael-kachelbild, .schael-ebike-kachelbild, .schael-kachelbild-mobile, .schael-ebike-kachelbild-mobile { overflow: hidden; } .schael-kachelbild img, .schael-ebike-kachelbild img, .schael-kachelbild-mobile img, .schael-ebike-kachelbild-mobile img { transition: transform var(--zs-ui-transition-soft); } .schael-kachelgrid a:hover img, .schael-ebike-kachelgrid a:hover img, .schael-kachelgrid-mobile a:hover img, .schael-ebike-kachelgrid-mobile a:hover img { transform: scale(1.025); } .schael-kacheltitel, .schael-ebike-kacheltitel, .schael-kacheltitel-mobile, .schael-ebike-kacheltitel-mobile { border-radius: 0 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg); letter-spacing: -.01em; font-weight: 600; } /* 08 – PRODUCT DETAIL ----------------------------------------------- */ .produktDetail { border-radius: var(--zs-ui-radius-xl); } .produktDetail .bild, .produktDetail .bild img, .produktBild, #altArt .produktBild { border-radius: var(--zs-ui-radius-lg); } #wrapBeschreibung, .produkt-aktionen, .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich, .produkt-merkmale-bereich { border-radius: var(--zs-ui-radius-lg); } .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich { box-shadow: var(--zs-ui-shadow-1); } .verfuegbarkeit-zeile, .wrapAmpel, .ampelInline, .ampel { border-radius: var(--zs-ui-radius-sm); } .verfuegbarkeit-status, .ampelLabel, .heightRahmen { line-height: 1.45; } .produkt-merkmale-kopf { border-radius: var(--zs-ui-radius-md); } .produkt-merkmal-card { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .produkt-merkmal-card:hover { box-shadow: var(--zs-ui-shadow-2); } .produkt-merkmal-label { letter-spacing: -.01em; } .produkt-merkmal-icon { border-radius: var(--zs-ui-radius-pill); } .weitere-varianten-list { border-radius: var(--zs-ui-radius-md); } .weitere-variante-bild { border-radius: var(--zs-ui-radius-sm); overflow: hidden; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .weitere-variante-bild:hover { box-shadow: var(--zs-ui-shadow-2); } /* 09 – LISTING / FILTER / PRICE RANGE ----------------------------------- */ .article-filter-panel, .article-filter-content, .article-filter-toggle, #article-filter-content, #wrapSearchResult, #wrapSearchResult .row, #noResult, .paginierung, #slider-range { border-radius: var(--zs-ui-radius-lg); } .article-filter-panel, .article-filter-content { box-shadow: var(--zs-ui-shadow-1); } .article-filter-toggle { box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .article-filter-toggle:hover { box-shadow: var(--zs-ui-shadow-2); } .article-filter-content select.form-control, .article-filter-content .form-control { border-radius: var(--zs-ui-radius-sm); } .article-filter-actions .btn, .article-filter-content .formButtons .btn { border-radius: var(--zs-ui-radius-sm) !important; } .article-filter-price { border-radius: var(--zs-ui-radius-md); } #slider-range .ui-slider-handle, .ui-slider .ui-slider-handle { border-radius: var(--zs-ui-radius-pill); box-shadow: var(--zs-ui-shadow-1); cursor: grab; } #slider-range .ui-slider-handle:active, .ui-slider .ui-slider-handle:active { cursor: grabbing; } .paginierung, .paginierung a, input.paginierung { border-radius: var(--zs-ui-radius-pill); } .thumb .img, .thumb .img img { border-radius: var(--zs-ui-radius-md); } #wrapSearchResult { box-shadow: var(--zs-ui-shadow-1); } #wrapSearchResult .row, .searchItemResult { border-radius: var(--zs-ui-radius-lg); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #wrapSearchResult .row:hover, .searchItemResult:hover { box-shadow: var(--zs-ui-shadow-2); } .zs-search-image-wrap, .zs-search-image-wrap img { border-radius: var(--zs-ui-radius-md); } /* 10 – FINANCING CALCULATOR --------------------------------------------- */ .finanz-modul-wrap, .finanz-layout, .calc-wrapper, .calc-form, .result-box, .result-warning, .radio-tabs, .radio-tab, .radio-tab-content, .result-grid { border-radius: var(--zs-ui-radius-lg) !important; } .calc-wrapper, .calc-form, .result-box, .result-warning { box-shadow: var(--zs-ui-shadow-1) !important; } .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; } .radio-tab-content { border-radius: var(--zs-ui-radius-sm) !important; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition) !important; } .radio-tab input[type="radio"]:checked + .radio-tab-content { box-shadow: 0 0 0 1px currentColor inset !important; } .result-box { overflow: hidden; } .rate-display { letter-spacing: -.035em; } .result-grid > div { border-radius: var(--zs-ui-radius-sm); } .result-warning { overflow: hidden; } /* 11 – SERVICE / CONTACT / CONTENT -------------------------------------- */ #naviServicePoints, #naviServicePoints.container, #serviceListe, #serviceListe table, .service table, .kontaktDaten, .kontaktDaten .item, .kontakt .tab-content, .karriere .tab-content, #stammdaten .stammdatenInside, #bildercheck, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, #galerieLaden, .prospekt, #prospekteAll, .event { border-radius: var(--zs-ui-radius-lg); } #naviServicePoints, #serviceListe table, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, .prospekt { box-shadow: var(--zs-ui-shadow-1); } #naviServicePoints a, .kontaktDaten a, #mitarbeiter .item a, .prospekt a { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } #naviServicePoints a:hover, .kontaktDaten a:hover, #mitarbeiter .item a:hover, .prospekt a:hover { opacity: .92; } #naviFooter, #naviFooterMobile, #stammdaten .stammdatenInside { overflow: hidden; } #naviFooter > ul.level_1 > li, #naviFooterMobile ul.level_1 > li { border-radius: var(--zs-ui-radius-sm); } #stammdaten .container { border-radius: var(--zs-ui-radius-lg); overflow: hidden; } #mitarbeiter .image_container img, #mitarbSlider .image_container img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-md); } .prospekt img { border-radius: var(--zs-ui-radius-sm); } .prospekt .overlay { border-radius: 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg) 0; } /* 12 – TABLES / PAGINATION / DATA --------------------------------------- */ table { border-collapse: separate; border-spacing: 0; } #serviceListe table, .service table, #bildercheck table, #bildercheck .panel { overflow: hidden; } #serviceListe td, .service td, #bildercheck table td { vertical-align: middle; } #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md) var(--zs-ui-radius-md) 0 0; } /* 13 – ACCESSIBILITY / FOCUS -------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffcc33; outline-offset: 2px; } /* 14 – RESPONSIVE FINISHING --------------------------------------------- */ @media (max-width: 767px) { html, body { max-width: 100%; } #main { border-radius: var(--zs-ui-radius-lg); } #containerHauptnavi, #navbarProdukte, #navbarProdukte .navbar-collapse, #naviProdukteFooter, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } .btn, button, input[type="submit"], input[type="button"], .navbar-toggle { min-height: 42px; } .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]) { font-size: 16px; } .box3Artikel .box, .box4Artikel .box { width: min(400px, 100%); max-width: 100%; } .box3Artikel .produktname, .box4Artikel .produktname { max-width: 100%; } .produkt-aktionen .btn { min-height: 42px; } .article-filter-content .formButtons .btn { min-height: 44px; } .prospekt, .searchItemResult, #wrapSearchResult .row { border-radius: var(--zs-ui-radius-md); } } @media (max-width: 420px) { .produkt-merkmal-card { min-width: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .navbar-default, #navbarProdukte, #naviFooter, #stammdaten .stammdatenInside { border-radius: var(--zs-ui-radius-lg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 15 – REMAINING SITE MODULES / LEGACY COMPONENTS ----------------------- */ #suche, #nachfrageFormular, #bildercheck, #mitarbeiter, #mitarbSlider, #galerieLaden, #wrapKacheln, #prospekteAll, #serviceListe, #stammdaten, .kontakt, .karriere, .impressum, .pageTitle, .hl_mobile, .topBild, .facts-list-wrap, .facts-list, .row.statistic, .rate, .gewaehr, .empf, .markeModell, .produktRubrikHeader, .produkt-merkmal-card, .produkt-aktionen, .produkt-hinweis-container, .weitere-varianten-bereich, .weitere-variante-bild, .wrapAmpel, .ampel, #finanzierungsrechner, #naviServicePoints, #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md); } #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #galerieLaden img, .topBild img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-lg); } #finanzierungsrechner { box-shadow: var(--zs-ui-shadow-1); } #mitarbSlider .carousel-control, .slick-prev, .slick-next, .rsts-prev, .rsts-next, .rsts-nav a { border-radius: var(--zs-ui-radius-pill); transition: opacity var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .slick-dots li button:before { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } .slick-dots li.slick-active button:before { transform: scale(1.08); } #breadCrumbs, .breadcrumb { border-radius: var(--zs-ui-radius-pill); } #stammdaten .stammdatenInside, #naviFooter .inside, #naviFooterMobile { box-shadow: var(--zs-ui-shadow-1); } .kontaktDaten .item, #mitarbeiter .item, #galerieLaden, #prospekteAll .prospekt { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #mitarbeiter .item:hover, #prospekteAll .prospekt:hover { box-shadow: var(--zs-ui-shadow-2); } .markenLogo, .produkt-merkmal-icon, .header-badge, .badge-text { border-radius: var(--zs-ui-radius-pill); } @media print { html { scroll-behavior: auto; } #main, #finanzierungsrechner, #naviFooter .inside, #naviFooterMobile, .produktDetail, .produkt-merkmal-card, .result-box, .panel, .alert, .prospekt, #mitarbeiter .item, #naviServicePoints { box-shadow: none !important; } } /* Created on : 24.03.2016, 18:01:31 Author : Carsten Schober */ #prospekteAll{ background-color: #eee; padding: 5px 0 5px 0; margin-left: -25px; } #prospekteAll *{ font-family: 'Open Sans', sans-serif; color: #585858; text-decoration: none; } .prospekt{ background-color: #FFF; padding: 20px 200px 0 20px; margin: 20px; position: relative } .prospekt h2{ font-size: 1.6em; display: block } .prospekt h3{ font-size: 1em; font-family: 'Open Sans', sans-serif !important; line-height: 1.3em } .prospekt .wrapPicture{ float: left; margin-right: 35px } .prospekt .wrapPicture *{ max-width: 150px; } .prospekt{ clear: both } .overlay{ background:rgba(0,0,0,.65); text-align:center; height:100%; overflow: hidden; bottom: 0; width: 20%; position: absolute; right:0; opacity:0; -webkit-transition: opacity .50s ease; -moz-transition: opacity .50s ease; background-position: center 36%; background-repeat: no-repeat; background-image: url("../../files/filesZweirad/img/Icon-PDF-Download.png"); background-size: 50%; } .content{ font-size: 1.8em; bottom: -65%; position: relative; display: block; color: #FFF !important; font-family: 'Michroma', sans-serif !important; } @media(max-width: 1200px){ .prospekt{ padding: 20px 10px 0 20px; } .overlay *{ font-size: 1em !important } } @media(max-width: 765px){ .prospekt h2{ font-size: 1.2em !important; } .prospekt h3{ font-size: 1em !important; } .prospekt .content{ font-size: .8em; } .prospekt img{ margin-bottom: 20px } .prospekt{ padding: 20px 10px 0 20px; } } .prospekt:hover .overlay { opacity:1; } .prospekt img{ -webkit-box-shadow: 4px 4px 5px 0px rgba(186,186,186,1); -moz-box-shadow: 4px 4px 5px 0px rgba(186,186,186,1); box-shadow: 4px 4px 5px 0px rgba(186,186,186,1); } /* ===== ZWEIRAD SCHAEL ONE UI 9 DESIGN LAYER v2.0 ===== */ /* ======================================================================= ZWEIRAD SCHAEL – ONE UI 9 / ANDROID 17 INSPIRED DESIGN LAYER Version 2.0 – complete component coverage Design intent: - Keep all original brand colours and image assets unchanged. - Keep content order, containers, Bootstrap columns, grid definitions, element positions and PHP behaviour intact. - Modernise surfaces, typography rendering, controls, focus, elevation, visual hierarchy and touch comfort. - The visual language follows Samsung One UI principles: focused content, natural interaction, readable hierarchy and adaptive presentation. ======================================================================= */ :root { --zs-ui-radius-xs: 8px; --zs-ui-radius-sm: 12px; --zs-ui-radius-md: 16px; --zs-ui-radius-lg: 20px; --zs-ui-radius-xl: 24px; --zs-ui-radius-pill: 999px; --zs-ui-shadow-1: 0 1px 3px rgba(0, 0, 0, .055), 0 2px 8px rgba(0, 0, 0, .035); --zs-ui-shadow-2: 0 4px 14px rgba(0, 0, 0, .075), 0 1px 3px rgba(0, 0, 0, .045); --zs-ui-shadow-3: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04); --zs-ui-transition: 180ms cubic-bezier(.2, .7, .2, 1); --zs-ui-transition-soft: 240ms cubic-bezier(.2, .65, .25, 1); } /* 01 – BASE / TYPE ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p, li, figcaption { text-wrap: pretty; } hr { opacity: .72; } /* 02 – MAIN SHELL / CONTENT AREAS --------------------------------------- */ #main { border-radius: var(--zs-ui-radius-xl); box-shadow: var(--zs-ui-shadow-1); } #containerHauptnavi, #containerHauptnavi .jumbotron, .jumbotron { border-radius: var(--zs-ui-radius-lg); } .pageTitle { border-radius: var(--zs-ui-radius-sm); } .pageAllgemein .mod_article, .pageProdukt .mod_article, .pageStartStd .ce_text, .pageStartStd .ce_text.block, .pageStartStd.ce_text.last.block { border-radius: var(--zs-ui-radius-lg); } .grey, .ce_text, .mod_article { border-radius: var(--zs-ui-radius-md); } .image_container, .ce_image, .ce_gallery, .thumbnail { border-radius: var(--zs-ui-radius-md); } /* 03 – NAVIGATION / WAYFINDING ------------------------------------------ */ #navbarProdukte, #navbarProdukte .navbar-collapse, #navbarSub, #naviProdukteFooter, #navbarNaviComplete, #navbarNaviKlassen, #naviFooter, #naviFooter .inside, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } #naviFooter .inside, #naviFooterMobile { overflow: hidden; } #navbarProdukte a, #navbarSub a, #navbarNaviComplete a, #navbarNaviKlassen a, #naviProdukteFooter a, #naviFooter a, #naviFooterMobile a { border-radius: var(--zs-ui-radius-sm); transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition), box-shadow var(--zs-ui-transition), opacity var(--zs-ui-transition); } #navbarProdukte a:hover, #navbarSub a:hover, #navbarNaviComplete a:hover, #navbarNaviKlassen a:hover, #naviProdukteFooter a:hover, #naviFooter a:hover, #naviFooterMobile a:hover { text-decoration: none; } .navbar-default, .navbar, .navbar-collapse { box-shadow: none; } .navbar-toggle { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .navbar-toggle:active { transform: scale(.98); } .dropdown-menu { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-3); overflow: hidden; } .dropdown-menu > li > a { transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition); } .breadcrumb { border-radius: var(--zs-ui-radius-pill); } /* 04 – BUTTONS / ACTIONS ----------------------------------------------- */ .btn, button.btn, input.btn, button, input[type="submit"], input[type="button"], input[type="reset"], .wildButton, .button, a.button { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition), filter var(--zs-ui-transition), background-color var(--zs-ui-transition); } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wildButton:hover, a.button:hover { box-shadow: var(--zs-ui-shadow-1); } .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active, .wildButton:active { transform: translateY(1px) scale(.99); } .btn-group > .btn:first-child, .btn-group > .btn:last-child, .input-group .btn { border-radius: var(--zs-ui-radius-sm) !important; } .wildButton { background-position: 28px center; } /* 05 – FORM CONTROLS / FILTERS ----------------------------------------- */ .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]), #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea, #finanzierungsrechner input, #finanzierungsrechner select, .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition), background-color var(--zs-ui-transition); } .form-control:focus, select:focus, textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 65, 119, .12); } input[type="checkbox"], input[type="radio"] { accent-color: #144177; } label { text-underline-offset: .16em; } .form-group { min-width: 0; } fieldset { border-radius: var(--zs-ui-radius-md); } /* 06 – ALERTS / PANELS / ACCORDIONS ------------------------------------ */ .alert, .panel, .panel-default, .panel-heading, .panel-body, .well, .tab-content, .tab-pane, .tab-container, .toggler, .hinweis, .ergebnis, .rate, .message-box { border-radius: var(--zs-ui-radius-md); } .alert, .panel, .well, .hinweis, .ergebnis { box-shadow: var(--zs-ui-shadow-1); } .panel-heading, .toggler { transition: filter var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .panel-heading:hover, .toggler:hover { box-shadow: var(--zs-ui-shadow-1); } /* 07 – PRODUCT CATEGORY CARDS / HOMEPAGE PRODUCT TILES ------------------ */ .box3Artikel, .box4Artikel, .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox, .fahrradZufallBox .box, .kachel, .warengruppe, .thumb, #altArt .thumb, #wrapKacheln .kachel { border-radius: var(--zs-ui-radius-lg); } .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox .box, .thumb, #altArt .thumb, .kachel, .warengruppe { box-shadow: var(--zs-ui-shadow-1); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } .box3Artikel .box:hover, .box4Artikel .box:hover, .fahrradZufallBox .box:hover, .thumb:hover, #altArt .thumb:hover, .kachel:hover, .warengruppe:hover { box-shadow: var(--zs-ui-shadow-2); } .box .overlay, .box4Artikel .overlay, .overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .produktname, .produktklasse, .markeModell, .modell, .thumb .marke, .thumb .modell { border-radius: 0 0 var(--zs-ui-radius-md) var(--zs-ui-radius-md); } .preis, .empf, .preisTotal, .rate-display { font-variant-numeric: tabular-nums; } .preis { border-radius: var(--zs-ui-radius-sm); } .empf { opacity: .88; } .zs-sale-corner, .detail-sale-badge { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); } /* Category grids with their own inline CSS – colour values remain original */ .schael-kachelgrid, .schael-ebike-kachelgrid, .schael-kachelgrid-mobile, .schael-ebike-kachelgrid-mobile { isolation: isolate; } .schael-kachelgrid .schael-kachel, .schael-ebike-kachelgrid .schael-ebike-kachel, .schael-kachelgrid-mobile .schael-kachel-mobile, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile { border-radius: var(--zs-ui-radius-lg); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .schael-kachelgrid .schael-kachel:hover, .schael-ebike-kachelgrid .schael-ebike-kachel:hover, .schael-kachelgrid-mobile .schael-kachel-mobile:hover, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile:hover { box-shadow: var(--zs-ui-shadow-2); transform: translateY(-2px); } .schael-kachelbild, .schael-ebike-kachelbild, .schael-kachelbild-mobile, .schael-ebike-kachelbild-mobile { overflow: hidden; } .schael-kachelbild img, .schael-ebike-kachelbild img, .schael-kachelbild-mobile img, .schael-ebike-kachelbild-mobile img { transition: transform var(--zs-ui-transition-soft); } .schael-kachelgrid a:hover img, .schael-ebike-kachelgrid a:hover img, .schael-kachelgrid-mobile a:hover img, .schael-ebike-kachelgrid-mobile a:hover img { transform: scale(1.025); } .schael-kacheltitel, .schael-ebike-kacheltitel, .schael-kacheltitel-mobile, .schael-ebike-kacheltitel-mobile { border-radius: 0 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg); letter-spacing: -.01em; font-weight: 600; } /* 08 – PRODUCT DETAIL ----------------------------------------------- */ .produktDetail { border-radius: var(--zs-ui-radius-xl); } .produktDetail .bild, .produktDetail .bild img, .produktBild, #altArt .produktBild { border-radius: var(--zs-ui-radius-lg); } #wrapBeschreibung, .produkt-aktionen, .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich, .produkt-merkmale-bereich { border-radius: var(--zs-ui-radius-lg); } .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich { box-shadow: var(--zs-ui-shadow-1); } .verfuegbarkeit-zeile, .wrapAmpel, .ampelInline, .ampel { border-radius: var(--zs-ui-radius-sm); } .verfuegbarkeit-status, .ampelLabel, .heightRahmen { line-height: 1.45; } .produkt-merkmale-kopf { border-radius: var(--zs-ui-radius-md); } .produkt-merkmal-card { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .produkt-merkmal-card:hover { box-shadow: var(--zs-ui-shadow-2); } .produkt-merkmal-label { letter-spacing: -.01em; } .produkt-merkmal-icon { border-radius: var(--zs-ui-radius-pill); } .weitere-varianten-list { border-radius: var(--zs-ui-radius-md); } .weitere-variante-bild { border-radius: var(--zs-ui-radius-sm); overflow: hidden; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .weitere-variante-bild:hover { box-shadow: var(--zs-ui-shadow-2); } /* 09 – LISTING / FILTER / PRICE RANGE ----------------------------------- */ .article-filter-panel, .article-filter-content, .article-filter-toggle, #article-filter-content, #wrapSearchResult, #wrapSearchResult .row, #noResult, .paginierung, #slider-range { border-radius: var(--zs-ui-radius-lg); } .article-filter-panel, .article-filter-content { box-shadow: var(--zs-ui-shadow-1); } .article-filter-toggle { box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .article-filter-toggle:hover { box-shadow: var(--zs-ui-shadow-2); } .article-filter-content select.form-control, .article-filter-content .form-control { border-radius: var(--zs-ui-radius-sm); } .article-filter-actions .btn, .article-filter-content .formButtons .btn { border-radius: var(--zs-ui-radius-sm) !important; } .article-filter-price { border-radius: var(--zs-ui-radius-md); } #slider-range .ui-slider-handle, .ui-slider .ui-slider-handle { border-radius: var(--zs-ui-radius-pill); box-shadow: var(--zs-ui-shadow-1); cursor: grab; } #slider-range .ui-slider-handle:active, .ui-slider .ui-slider-handle:active { cursor: grabbing; } .paginierung, .paginierung a, input.paginierung { border-radius: var(--zs-ui-radius-pill); } .thumb .img, .thumb .img img { border-radius: var(--zs-ui-radius-md); } #wrapSearchResult { box-shadow: var(--zs-ui-shadow-1); } #wrapSearchResult .row, .searchItemResult { border-radius: var(--zs-ui-radius-lg); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #wrapSearchResult .row:hover, .searchItemResult:hover { box-shadow: var(--zs-ui-shadow-2); } .zs-search-image-wrap, .zs-search-image-wrap img { border-radius: var(--zs-ui-radius-md); } /* 10 – FINANCING CALCULATOR --------------------------------------------- */ .finanz-modul-wrap, .finanz-layout, .calc-wrapper, .calc-form, .result-box, .result-warning, .radio-tabs, .radio-tab, .radio-tab-content, .result-grid { border-radius: var(--zs-ui-radius-lg) !important; } .calc-wrapper, .calc-form, .result-box, .result-warning { box-shadow: var(--zs-ui-shadow-1) !important; } .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; } .radio-tab-content { border-radius: var(--zs-ui-radius-sm) !important; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition) !important; } .radio-tab input[type="radio"]:checked + .radio-tab-content { box-shadow: 0 0 0 1px currentColor inset !important; } .result-box { overflow: hidden; } .rate-display { letter-spacing: -.035em; } .result-grid > div { border-radius: var(--zs-ui-radius-sm); } .result-warning { overflow: hidden; } /* 11 – SERVICE / CONTACT / CONTENT -------------------------------------- */ #naviServicePoints, #naviServicePoints.container, #serviceListe, #serviceListe table, .service table, .kontaktDaten, .kontaktDaten .item, .kontakt .tab-content, .karriere .tab-content, #stammdaten .stammdatenInside, #bildercheck, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, #galerieLaden, .prospekt, #prospekteAll, .event { border-radius: var(--zs-ui-radius-lg); } #naviServicePoints, #serviceListe table, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, .prospekt { box-shadow: var(--zs-ui-shadow-1); } #naviServicePoints a, .kontaktDaten a, #mitarbeiter .item a, .prospekt a { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } #naviServicePoints a:hover, .kontaktDaten a:hover, #mitarbeiter .item a:hover, .prospekt a:hover { opacity: .92; } #naviFooter, #naviFooterMobile, #stammdaten .stammdatenInside { overflow: hidden; } #naviFooter > ul.level_1 > li, #naviFooterMobile ul.level_1 > li { border-radius: var(--zs-ui-radius-sm); } #stammdaten .container { border-radius: var(--zs-ui-radius-lg); overflow: hidden; } #mitarbeiter .image_container img, #mitarbSlider .image_container img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-md); } .prospekt img { border-radius: var(--zs-ui-radius-sm); } .prospekt .overlay { border-radius: 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg) 0; } /* 12 – TABLES / PAGINATION / DATA --------------------------------------- */ table { border-collapse: separate; border-spacing: 0; } #serviceListe table, .service table, #bildercheck table, #bildercheck .panel { overflow: hidden; } #serviceListe td, .service td, #bildercheck table td { vertical-align: middle; } #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md) var(--zs-ui-radius-md) 0 0; } /* 13 – ACCESSIBILITY / FOCUS -------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffcc33; outline-offset: 2px; } /* 14 – RESPONSIVE FINISHING --------------------------------------------- */ @media (max-width: 767px) { html, body { max-width: 100%; } #main { border-radius: var(--zs-ui-radius-lg); } #containerHauptnavi, #navbarProdukte, #navbarProdukte .navbar-collapse, #naviProdukteFooter, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } .btn, button, input[type="submit"], input[type="button"], .navbar-toggle { min-height: 42px; } .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]) { font-size: 16px; } .box3Artikel .box, .box4Artikel .box { width: min(400px, 100%); max-width: 100%; } .box3Artikel .produktname, .box4Artikel .produktname { max-width: 100%; } .produkt-aktionen .btn { min-height: 42px; } .article-filter-content .formButtons .btn { min-height: 44px; } .prospekt, .searchItemResult, #wrapSearchResult .row { border-radius: var(--zs-ui-radius-md); } } @media (max-width: 420px) { .produkt-merkmal-card { min-width: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .navbar-default, #navbarProdukte, #naviFooter, #stammdaten .stammdatenInside { border-radius: var(--zs-ui-radius-lg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 15 – REMAINING SITE MODULES / LEGACY COMPONENTS ----------------------- */ #suche, #nachfrageFormular, #bildercheck, #mitarbeiter, #mitarbSlider, #galerieLaden, #wrapKacheln, #prospekteAll, #serviceListe, #stammdaten, .kontakt, .karriere, .impressum, .pageTitle, .hl_mobile, .topBild, .facts-list-wrap, .facts-list, .row.statistic, .rate, .gewaehr, .empf, .markeModell, .produktRubrikHeader, .produkt-merkmal-card, .produkt-aktionen, .produkt-hinweis-container, .weitere-varianten-bereich, .weitere-variante-bild, .wrapAmpel, .ampel, #finanzierungsrechner, #naviServicePoints, #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md); } #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #galerieLaden img, .topBild img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-lg); } #finanzierungsrechner { box-shadow: var(--zs-ui-shadow-1); } #mitarbSlider .carousel-control, .slick-prev, .slick-next, .rsts-prev, .rsts-next, .rsts-nav a { border-radius: var(--zs-ui-radius-pill); transition: opacity var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .slick-dots li button:before { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } .slick-dots li.slick-active button:before { transform: scale(1.08); } #breadCrumbs, .breadcrumb { border-radius: var(--zs-ui-radius-pill); } #stammdaten .stammdatenInside, #naviFooter .inside, #naviFooterMobile { box-shadow: var(--zs-ui-shadow-1); } .kontaktDaten .item, #mitarbeiter .item, #galerieLaden, #prospekteAll .prospekt { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #mitarbeiter .item:hover, #prospekteAll .prospekt:hover { box-shadow: var(--zs-ui-shadow-2); } .markenLogo, .produkt-merkmal-icon, .header-badge, .badge-text { border-radius: var(--zs-ui-radius-pill); } @media print { html { scroll-behavior: auto; } #main, #finanzierungsrechner, #naviFooter .inside, #naviFooterMobile, .produktDetail, .produkt-merkmal-card, .result-box, .panel, .alert, .prospekt, #mitarbeiter .item, #naviServicePoints { box-shadow: none !important; } } /* Created on : 09.01.2017, 14:04:33 Last Edit : 09.01.17 14:04 Author : Carsten Schober */ #wrapSearchResult a{ color:#8c8b8b !important } #wrapSearchResult a:hover{ color:#000 !important } #wrapSearchResult{ background-color: #eee; padding: 30px; margin: 5px 150px 5px 20px !important; font-family: 'Khand', sans-serif; } #wrapSearchResult .row{ background-color: #FFF; margin-bottom: 5px; border:solid 1px #ccc; max-width: 99% } #wrapSearchResult .daten{ padding-top: 10px; font-size: 1.3em; } #wrapSearchResult .merkmale{ padding-top: 10px; font-size: 1.1em; } #wrapSearchResult .preis > *{ font-size: .6em !important } #suche{ margin-top: 59px; margin-left: 10px; } /* ===== ZWEIRAD SCHAEL ONE UI 9 DESIGN LAYER v2.0 ===== */ /* ======================================================================= ZWEIRAD SCHAEL – ONE UI 9 / ANDROID 17 INSPIRED DESIGN LAYER Version 2.0 – complete component coverage Design intent: - Keep all original brand colours and image assets unchanged. - Keep content order, containers, Bootstrap columns, grid definitions, element positions and PHP behaviour intact. - Modernise surfaces, typography rendering, controls, focus, elevation, visual hierarchy and touch comfort. - The visual language follows Samsung One UI principles: focused content, natural interaction, readable hierarchy and adaptive presentation. ======================================================================= */ :root { --zs-ui-radius-xs: 8px; --zs-ui-radius-sm: 12px; --zs-ui-radius-md: 16px; --zs-ui-radius-lg: 20px; --zs-ui-radius-xl: 24px; --zs-ui-radius-pill: 999px; --zs-ui-shadow-1: 0 1px 3px rgba(0, 0, 0, .055), 0 2px 8px rgba(0, 0, 0, .035); --zs-ui-shadow-2: 0 4px 14px rgba(0, 0, 0, .075), 0 1px 3px rgba(0, 0, 0, .045); --zs-ui-shadow-3: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04); --zs-ui-transition: 180ms cubic-bezier(.2, .7, .2, 1); --zs-ui-transition-soft: 240ms cubic-bezier(.2, .65, .25, 1); } /* 01 – BASE / TYPE ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p, li, figcaption { text-wrap: pretty; } hr { opacity: .72; } /* 02 – MAIN SHELL / CONTENT AREAS --------------------------------------- */ #main { border-radius: var(--zs-ui-radius-xl); box-shadow: var(--zs-ui-shadow-1); } #containerHauptnavi, #containerHauptnavi .jumbotron, .jumbotron { border-radius: var(--zs-ui-radius-lg); } .pageTitle { border-radius: var(--zs-ui-radius-sm); } .pageAllgemein .mod_article, .pageProdukt .mod_article, .pageStartStd .ce_text, .pageStartStd .ce_text.block, .pageStartStd.ce_text.last.block { border-radius: var(--zs-ui-radius-lg); } .grey, .ce_text, .mod_article { border-radius: var(--zs-ui-radius-md); } .image_container, .ce_image, .ce_gallery, .thumbnail { border-radius: var(--zs-ui-radius-md); } /* 03 – NAVIGATION / WAYFINDING ------------------------------------------ */ #navbarProdukte, #navbarProdukte .navbar-collapse, #navbarSub, #naviProdukteFooter, #navbarNaviComplete, #navbarNaviKlassen, #naviFooter, #naviFooter .inside, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } #naviFooter .inside, #naviFooterMobile { overflow: hidden; } #navbarProdukte a, #navbarSub a, #navbarNaviComplete a, #navbarNaviKlassen a, #naviProdukteFooter a, #naviFooter a, #naviFooterMobile a { border-radius: var(--zs-ui-radius-sm); transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition), box-shadow var(--zs-ui-transition), opacity var(--zs-ui-transition); } #navbarProdukte a:hover, #navbarSub a:hover, #navbarNaviComplete a:hover, #navbarNaviKlassen a:hover, #naviProdukteFooter a:hover, #naviFooter a:hover, #naviFooterMobile a:hover { text-decoration: none; } .navbar-default, .navbar, .navbar-collapse { box-shadow: none; } .navbar-toggle { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .navbar-toggle:active { transform: scale(.98); } .dropdown-menu { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-3); overflow: hidden; } .dropdown-menu > li > a { transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition); } .breadcrumb { border-radius: var(--zs-ui-radius-pill); } /* 04 – BUTTONS / ACTIONS ----------------------------------------------- */ .btn, button.btn, input.btn, button, input[type="submit"], input[type="button"], input[type="reset"], .wildButton, .button, a.button { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition), filter var(--zs-ui-transition), background-color var(--zs-ui-transition); } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wildButton:hover, a.button:hover { box-shadow: var(--zs-ui-shadow-1); } .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active, .wildButton:active { transform: translateY(1px) scale(.99); } .btn-group > .btn:first-child, .btn-group > .btn:last-child, .input-group .btn { border-radius: var(--zs-ui-radius-sm) !important; } .wildButton { background-position: 28px center; } /* 05 – FORM CONTROLS / FILTERS ----------------------------------------- */ .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]), #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea, #finanzierungsrechner input, #finanzierungsrechner select, .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition), background-color var(--zs-ui-transition); } .form-control:focus, select:focus, textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 65, 119, .12); } input[type="checkbox"], input[type="radio"] { accent-color: #144177; } label { text-underline-offset: .16em; } .form-group { min-width: 0; } fieldset { border-radius: var(--zs-ui-radius-md); } /* 06 – ALERTS / PANELS / ACCORDIONS ------------------------------------ */ .alert, .panel, .panel-default, .panel-heading, .panel-body, .well, .tab-content, .tab-pane, .tab-container, .toggler, .hinweis, .ergebnis, .rate, .message-box { border-radius: var(--zs-ui-radius-md); } .alert, .panel, .well, .hinweis, .ergebnis { box-shadow: var(--zs-ui-shadow-1); } .panel-heading, .toggler { transition: filter var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .panel-heading:hover, .toggler:hover { box-shadow: var(--zs-ui-shadow-1); } /* 07 – PRODUCT CATEGORY CARDS / HOMEPAGE PRODUCT TILES ------------------ */ .box3Artikel, .box4Artikel, .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox, .fahrradZufallBox .box, .kachel, .warengruppe, .thumb, #altArt .thumb, #wrapKacheln .kachel { border-radius: var(--zs-ui-radius-lg); } .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox .box, .thumb, #altArt .thumb, .kachel, .warengruppe { box-shadow: var(--zs-ui-shadow-1); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } .box3Artikel .box:hover, .box4Artikel .box:hover, .fahrradZufallBox .box:hover, .thumb:hover, #altArt .thumb:hover, .kachel:hover, .warengruppe:hover { box-shadow: var(--zs-ui-shadow-2); } .box .overlay, .box4Artikel .overlay, .overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .produktname, .produktklasse, .markeModell, .modell, .thumb .marke, .thumb .modell { border-radius: 0 0 var(--zs-ui-radius-md) var(--zs-ui-radius-md); } .preis, .empf, .preisTotal, .rate-display { font-variant-numeric: tabular-nums; } .preis { border-radius: var(--zs-ui-radius-sm); } .empf { opacity: .88; } .zs-sale-corner, .detail-sale-badge { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); } /* Category grids with their own inline CSS – colour values remain original */ .schael-kachelgrid, .schael-ebike-kachelgrid, .schael-kachelgrid-mobile, .schael-ebike-kachelgrid-mobile { isolation: isolate; } .schael-kachelgrid .schael-kachel, .schael-ebike-kachelgrid .schael-ebike-kachel, .schael-kachelgrid-mobile .schael-kachel-mobile, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile { border-radius: var(--zs-ui-radius-lg); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .schael-kachelgrid .schael-kachel:hover, .schael-ebike-kachelgrid .schael-ebike-kachel:hover, .schael-kachelgrid-mobile .schael-kachel-mobile:hover, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile:hover { box-shadow: var(--zs-ui-shadow-2); transform: translateY(-2px); } .schael-kachelbild, .schael-ebike-kachelbild, .schael-kachelbild-mobile, .schael-ebike-kachelbild-mobile { overflow: hidden; } .schael-kachelbild img, .schael-ebike-kachelbild img, .schael-kachelbild-mobile img, .schael-ebike-kachelbild-mobile img { transition: transform var(--zs-ui-transition-soft); } .schael-kachelgrid a:hover img, .schael-ebike-kachelgrid a:hover img, .schael-kachelgrid-mobile a:hover img, .schael-ebike-kachelgrid-mobile a:hover img { transform: scale(1.025); } .schael-kacheltitel, .schael-ebike-kacheltitel, .schael-kacheltitel-mobile, .schael-ebike-kacheltitel-mobile { border-radius: 0 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg); letter-spacing: -.01em; font-weight: 600; } /* 08 – PRODUCT DETAIL ----------------------------------------------- */ .produktDetail { border-radius: var(--zs-ui-radius-xl); } .produktDetail .bild, .produktDetail .bild img, .produktBild, #altArt .produktBild { border-radius: var(--zs-ui-radius-lg); } #wrapBeschreibung, .produkt-aktionen, .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich, .produkt-merkmale-bereich { border-radius: var(--zs-ui-radius-lg); } .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich { box-shadow: var(--zs-ui-shadow-1); } .verfuegbarkeit-zeile, .wrapAmpel, .ampelInline, .ampel { border-radius: var(--zs-ui-radius-sm); } .verfuegbarkeit-status, .ampelLabel, .heightRahmen { line-height: 1.45; } .produkt-merkmale-kopf { border-radius: var(--zs-ui-radius-md); } .produkt-merkmal-card { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .produkt-merkmal-card:hover { box-shadow: var(--zs-ui-shadow-2); } .produkt-merkmal-label { letter-spacing: -.01em; } .produkt-merkmal-icon { border-radius: var(--zs-ui-radius-pill); } .weitere-varianten-list { border-radius: var(--zs-ui-radius-md); } .weitere-variante-bild { border-radius: var(--zs-ui-radius-sm); overflow: hidden; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .weitere-variante-bild:hover { box-shadow: var(--zs-ui-shadow-2); } /* 09 – LISTING / FILTER / PRICE RANGE ----------------------------------- */ .article-filter-panel, .article-filter-content, .article-filter-toggle, #article-filter-content, #wrapSearchResult, #wrapSearchResult .row, #noResult, .paginierung, #slider-range { border-radius: var(--zs-ui-radius-lg); } .article-filter-panel, .article-filter-content { box-shadow: var(--zs-ui-shadow-1); } .article-filter-toggle { box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .article-filter-toggle:hover { box-shadow: var(--zs-ui-shadow-2); } .article-filter-content select.form-control, .article-filter-content .form-control { border-radius: var(--zs-ui-radius-sm); } .article-filter-actions .btn, .article-filter-content .formButtons .btn { border-radius: var(--zs-ui-radius-sm) !important; } .article-filter-price { border-radius: var(--zs-ui-radius-md); } #slider-range .ui-slider-handle, .ui-slider .ui-slider-handle { border-radius: var(--zs-ui-radius-pill); box-shadow: var(--zs-ui-shadow-1); cursor: grab; } #slider-range .ui-slider-handle:active, .ui-slider .ui-slider-handle:active { cursor: grabbing; } .paginierung, .paginierung a, input.paginierung { border-radius: var(--zs-ui-radius-pill); } .thumb .img, .thumb .img img { border-radius: var(--zs-ui-radius-md); } #wrapSearchResult { box-shadow: var(--zs-ui-shadow-1); } #wrapSearchResult .row, .searchItemResult { border-radius: var(--zs-ui-radius-lg); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #wrapSearchResult .row:hover, .searchItemResult:hover { box-shadow: var(--zs-ui-shadow-2); } .zs-search-image-wrap, .zs-search-image-wrap img { border-radius: var(--zs-ui-radius-md); } /* 10 – FINANCING CALCULATOR --------------------------------------------- */ .finanz-modul-wrap, .finanz-layout, .calc-wrapper, .calc-form, .result-box, .result-warning, .radio-tabs, .radio-tab, .radio-tab-content, .result-grid { border-radius: var(--zs-ui-radius-lg) !important; } .calc-wrapper, .calc-form, .result-box, .result-warning { box-shadow: var(--zs-ui-shadow-1) !important; } .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; } .radio-tab-content { border-radius: var(--zs-ui-radius-sm) !important; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition) !important; } .radio-tab input[type="radio"]:checked + .radio-tab-content { box-shadow: 0 0 0 1px currentColor inset !important; } .result-box { overflow: hidden; } .rate-display { letter-spacing: -.035em; } .result-grid > div { border-radius: var(--zs-ui-radius-sm); } .result-warning { overflow: hidden; } /* 11 – SERVICE / CONTACT / CONTENT -------------------------------------- */ #naviServicePoints, #naviServicePoints.container, #serviceListe, #serviceListe table, .service table, .kontaktDaten, .kontaktDaten .item, .kontakt .tab-content, .karriere .tab-content, #stammdaten .stammdatenInside, #bildercheck, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, #galerieLaden, .prospekt, #prospekteAll, .event { border-radius: var(--zs-ui-radius-lg); } #naviServicePoints, #serviceListe table, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, .prospekt { box-shadow: var(--zs-ui-shadow-1); } #naviServicePoints a, .kontaktDaten a, #mitarbeiter .item a, .prospekt a { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } #naviServicePoints a:hover, .kontaktDaten a:hover, #mitarbeiter .item a:hover, .prospekt a:hover { opacity: .92; } #naviFooter, #naviFooterMobile, #stammdaten .stammdatenInside { overflow: hidden; } #naviFooter > ul.level_1 > li, #naviFooterMobile ul.level_1 > li { border-radius: var(--zs-ui-radius-sm); } #stammdaten .container { border-radius: var(--zs-ui-radius-lg); overflow: hidden; } #mitarbeiter .image_container img, #mitarbSlider .image_container img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-md); } .prospekt img { border-radius: var(--zs-ui-radius-sm); } .prospekt .overlay { border-radius: 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg) 0; } /* 12 – TABLES / PAGINATION / DATA --------------------------------------- */ table { border-collapse: separate; border-spacing: 0; } #serviceListe table, .service table, #bildercheck table, #bildercheck .panel { overflow: hidden; } #serviceListe td, .service td, #bildercheck table td { vertical-align: middle; } #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md) var(--zs-ui-radius-md) 0 0; } /* 13 – ACCESSIBILITY / FOCUS -------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffcc33; outline-offset: 2px; } /* 14 – RESPONSIVE FINISHING --------------------------------------------- */ @media (max-width: 767px) { html, body { max-width: 100%; } #main { border-radius: var(--zs-ui-radius-lg); } #containerHauptnavi, #navbarProdukte, #navbarProdukte .navbar-collapse, #naviProdukteFooter, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } .btn, button, input[type="submit"], input[type="button"], .navbar-toggle { min-height: 42px; } .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]) { font-size: 16px; } .box3Artikel .box, .box4Artikel .box { width: min(400px, 100%); max-width: 100%; } .box3Artikel .produktname, .box4Artikel .produktname { max-width: 100%; } .produkt-aktionen .btn { min-height: 42px; } .article-filter-content .formButtons .btn { min-height: 44px; } .prospekt, .searchItemResult, #wrapSearchResult .row { border-radius: var(--zs-ui-radius-md); } } @media (max-width: 420px) { .produkt-merkmal-card { min-width: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .navbar-default, #navbarProdukte, #naviFooter, #stammdaten .stammdatenInside { border-radius: var(--zs-ui-radius-lg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 15 – REMAINING SITE MODULES / LEGACY COMPONENTS ----------------------- */ #suche, #nachfrageFormular, #bildercheck, #mitarbeiter, #mitarbSlider, #galerieLaden, #wrapKacheln, #prospekteAll, #serviceListe, #stammdaten, .kontakt, .karriere, .impressum, .pageTitle, .hl_mobile, .topBild, .facts-list-wrap, .facts-list, .row.statistic, .rate, .gewaehr, .empf, .markeModell, .produktRubrikHeader, .produkt-merkmal-card, .produkt-aktionen, .produkt-hinweis-container, .weitere-varianten-bereich, .weitere-variante-bild, .wrapAmpel, .ampel, #finanzierungsrechner, #naviServicePoints, #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md); } #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #galerieLaden img, .topBild img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-lg); } #finanzierungsrechner { box-shadow: var(--zs-ui-shadow-1); } #mitarbSlider .carousel-control, .slick-prev, .slick-next, .rsts-prev, .rsts-next, .rsts-nav a { border-radius: var(--zs-ui-radius-pill); transition: opacity var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .slick-dots li button:before { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } .slick-dots li.slick-active button:before { transform: scale(1.08); } #breadCrumbs, .breadcrumb { border-radius: var(--zs-ui-radius-pill); } #stammdaten .stammdatenInside, #naviFooter .inside, #naviFooterMobile { box-shadow: var(--zs-ui-shadow-1); } .kontaktDaten .item, #mitarbeiter .item, #galerieLaden, #prospekteAll .prospekt { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #mitarbeiter .item:hover, #prospekteAll .prospekt:hover { box-shadow: var(--zs-ui-shadow-2); } .markenLogo, .produkt-merkmal-icon, .header-badge, .badge-text { border-radius: var(--zs-ui-radius-pill); } @media print { html { scroll-behavior: auto; } #main, #finanzierungsrechner, #naviFooter .inside, #naviFooterMobile, .produktDetail, .produkt-merkmal-card, .result-box, .panel, .alert, .prospekt, #mitarbeiter .item, #naviServicePoints { box-shadow: none !important; } } /* Created on : 13.10.2016, 14:18:22 Last Edit : 23.02.17 15:52 Author : Carsten Schober */ .pdf_link{ position: absolute; z-index: 100; margin-left: 27px; /*visibility: hidden*/ } .produktDetail{ font-family: michroma; /*background-color:orchid;*/ position: relative !important; min-height: 475px } .spalteLinks{ /*background-color:steelblue;*/ /*position: absolute !important;*/ /*bottom: 0*/ } .bild{ /*position: absolute !important;*/ /*bottom: 0;*/ /*margin-left: 30px*/ margin-top: 40px } .spalteRechts{ /*background-color:lawngreen;*/ /*float: right !important;*/ /*margin-right: 20px*/ } .produktDetail h2{ margin-top: -5px } .produktDetail h3{ font-size: 1.5em } .preis, .empf{ font-family: 'Khand', sans-serif; } .marke, .modell, .empf, .preis, .merkmale{ /*padding-left:50px*/ } .empf{ font-size: 1.4em; /* text-decoration: line-through; */ color: #c2c2c2; } .preis{ font-size: 1.8em; } .merkmale{ /*max-width: 300px*/ } .merkmale hr{ margin-top: 8px; margin-bottom: 8px; margin-right: 20px; border: 0; border-top: 1px solid #b5b5b5; } .merkmale ul{ padding-left: 20px; margin-top: 20px } .produktDetail .spalteLinks, .produktDetail .spalteRechts{ /*clear: both !important*/ } #wrapBeschreibung{ width: 85%; margin: 20px 0 72px 6%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #kurztext{ font-size: 1.5em; color: #144177 } #langtext:first-line{ /*font-size: 1.5em*/ } #mehrErfahren{ margin-top: 20px; } /*Kacheln für die alternativen Artikel unten*/ /*Produktfelder*/ #altArt .thumb{ float: left; width:32.85%; margin-right: 1px; border: solid 1px #efefef; overflow: hidden; position: relative; font-family: 'Michroma', sans-serif; margin-bottom: 10px } #altArt .thumb .img{ text-align: center !important; position: absolute; z-index: 0; width: 100% } #altArt .thumb .img img{ margin-top: 30px; margin-bottom: -30px; } @media(max-width: 1200px){ #altArt .thumb .img img{ width: 75%; height: 75% } } #altArt .preis{ position: absolute; left: 0; padding-top: 15px; padding-left: 7px; width: 187px; height:125px; z-index: 100; background-image:url("../../files/filesZweirad/img/preisEcke.png"); } @media(max-width: 1200px){ #altArt .preis{ font-size: 1.9em } } @media(max-width: 992px){ #altArt .preis{ font-size: 1.9em } } #altArt .empf{ font-size: .6em; /* text-decoration: line-through; */ margin-top: -5px; margin-bottom: -10px } #altArt .euroZeichen, .preisCent{ font-size: .6em; /*color: #ccc;*/ float: left } #altArt .euroZeichen{ line-height: 2.24em } #altArt .preisEuro{ float: left; color: #bdbdbd; text-shadow: 0px -1px 0 #333, -1px 2px 0 #fff; } #altArt .preisCent{ margin-top: 5px } #altArt .modell{ text-align: center; z-index: 10; position: relative; margin-top:75%; background: #f3f3f3; padding: 8px 0 ; display: block; font-size: .9em; color: #717171; letter-spacing: .05em; border-bottom: solid #ccc 1px; } #altArt .modell .ampel{ margin-top: -25px; margin-left: 6px } #altArt .modell .ampel img{ width: 12px; } @media(max-width: 1200px){ #altArt .modell{ font-size: .8em } } @media(max-width: 992px){ #altArt .modell{ font-size: .7em } } #altArt .marke{ position: absolute; right: 10px; top:5px; color: #333 } #altArt .euroZeichen, #altArt .preisEuro, #altArt .preisCent{ color: #777; } #altArt .preisCent{ margin-top: 2px } #altArt .euroZeichen{ margin-top: 2px } #altArt a:hover .thumb{ border:solid 1px #bbb; /* Firefox */ -moz-transition: all .2s ease-in; /* WebKit */ -webkit-transition: all .2s ease-in; /* Opera */ -o-transition: all .2s ease-in; /* Standard */ transition: all .2s ease-in; } #altArt a:hover .thumb *{ color:#777 !important } #altArt a:hover .markeModell{ background-color: #aaa; /* Firefox */ -moz-transition: all .2s ease-in; /* WebKit */ -webkit-transition: all .2s ease-in; /* Opera */ -o-transition: all .2s ease-in; /* Standard */ transition: all .2s ease-in; color: #FFFFFF !important } /*Bilder*/ #altArt .produktBild{ max-height: 230px; width: auto } .gewaehr{ width:350px } .anfrage{ margin-top: 0; margin-left: 19px; margin-bottom: 8px } /* Ampel */ .ampel{ display: flex; } .ampel .label{ color: #262525; font-weight: normal; line-height: 2.8; } /*Ampel für Rahmenhöhen*/ .wrapAmpel{ display: flex; } .wrapAmpel .heightRahmen{ width:90px; } .wrapAmpel .ampelInline img{ width: 12px; } .wrapAmpel .ampelLabel{ font-size: 1rem; } .rhoeIntArtNr{ font-size: .7em; color: #ccc; } /* ===== ZWEIRAD SCHAEL ONE UI 9 DESIGN LAYER v2.0 ===== */ /* ======================================================================= ZWEIRAD SCHAEL – ONE UI 9 / ANDROID 17 INSPIRED DESIGN LAYER Version 2.0 – complete component coverage Design intent: - Keep all original brand colours and image assets unchanged. - Keep content order, containers, Bootstrap columns, grid definitions, element positions and PHP behaviour intact. - Modernise surfaces, typography rendering, controls, focus, elevation, visual hierarchy and touch comfort. - The visual language follows Samsung One UI principles: focused content, natural interaction, readable hierarchy and adaptive presentation. ======================================================================= */ :root { --zs-ui-radius-xs: 8px; --zs-ui-radius-sm: 12px; --zs-ui-radius-md: 16px; --zs-ui-radius-lg: 20px; --zs-ui-radius-xl: 24px; --zs-ui-radius-pill: 999px; --zs-ui-shadow-1: 0 1px 3px rgba(0, 0, 0, .055), 0 2px 8px rgba(0, 0, 0, .035); --zs-ui-shadow-2: 0 4px 14px rgba(0, 0, 0, .075), 0 1px 3px rgba(0, 0, 0, .045); --zs-ui-shadow-3: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04); --zs-ui-transition: 180ms cubic-bezier(.2, .7, .2, 1); --zs-ui-transition-soft: 240ms cubic-bezier(.2, .65, .25, 1); } /* 01 – BASE / TYPE ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p, li, figcaption { text-wrap: pretty; } hr { opacity: .72; } /* 02 – MAIN SHELL / CONTENT AREAS --------------------------------------- */ #main { border-radius: var(--zs-ui-radius-xl); box-shadow: var(--zs-ui-shadow-1); } #containerHauptnavi, #containerHauptnavi .jumbotron, .jumbotron { border-radius: var(--zs-ui-radius-lg); } .pageTitle { border-radius: var(--zs-ui-radius-sm); } .pageAllgemein .mod_article, .pageProdukt .mod_article, .pageStartStd .ce_text, .pageStartStd .ce_text.block, .pageStartStd.ce_text.last.block { border-radius: var(--zs-ui-radius-lg); } .grey, .ce_text, .mod_article { border-radius: var(--zs-ui-radius-md); } .image_container, .ce_image, .ce_gallery, .thumbnail { border-radius: var(--zs-ui-radius-md); } /* 03 – NAVIGATION / WAYFINDING ------------------------------------------ */ #navbarProdukte, #navbarProdukte .navbar-collapse, #navbarSub, #naviProdukteFooter, #navbarNaviComplete, #navbarNaviKlassen, #naviFooter, #naviFooter .inside, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } #naviFooter .inside, #naviFooterMobile { overflow: hidden; } #navbarProdukte a, #navbarSub a, #navbarNaviComplete a, #navbarNaviKlassen a, #naviProdukteFooter a, #naviFooter a, #naviFooterMobile a { border-radius: var(--zs-ui-radius-sm); transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition), box-shadow var(--zs-ui-transition), opacity var(--zs-ui-transition); } #navbarProdukte a:hover, #navbarSub a:hover, #navbarNaviComplete a:hover, #navbarNaviKlassen a:hover, #naviProdukteFooter a:hover, #naviFooter a:hover, #naviFooterMobile a:hover { text-decoration: none; } .navbar-default, .navbar, .navbar-collapse { box-shadow: none; } .navbar-toggle { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .navbar-toggle:active { transform: scale(.98); } .dropdown-menu { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-3); overflow: hidden; } .dropdown-menu > li > a { transition: background-color var(--zs-ui-transition), color var(--zs-ui-transition); } .breadcrumb { border-radius: var(--zs-ui-radius-pill); } /* 04 – BUTTONS / ACTIONS ----------------------------------------------- */ .btn, button.btn, input.btn, button, input[type="submit"], input[type="button"], input[type="reset"], .wildButton, .button, a.button { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition), filter var(--zs-ui-transition), background-color var(--zs-ui-transition); } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wildButton:hover, a.button:hover { box-shadow: var(--zs-ui-shadow-1); } .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active, .wildButton:active { transform: translateY(1px) scale(.99); } .btn-group > .btn:first-child, .btn-group > .btn:last-child, .input-group .btn { border-radius: var(--zs-ui-radius-sm) !important; } .wildButton { background-position: 28px center; } /* 05 – FORM CONTROLS / FILTERS ----------------------------------------- */ .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]), #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea, #finanzierungsrechner input, #finanzierungsrechner select, .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; box-shadow: none; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition), background-color var(--zs-ui-transition); } .form-control:focus, select:focus, textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 65, 119, .12); } input[type="checkbox"], input[type="radio"] { accent-color: #144177; } label { text-underline-offset: .16em; } .form-group { min-width: 0; } fieldset { border-radius: var(--zs-ui-radius-md); } /* 06 – ALERTS / PANELS / ACCORDIONS ------------------------------------ */ .alert, .panel, .panel-default, .panel-heading, .panel-body, .well, .tab-content, .tab-pane, .tab-container, .toggler, .hinweis, .ergebnis, .rate, .message-box { border-radius: var(--zs-ui-radius-md); } .alert, .panel, .well, .hinweis, .ergebnis { box-shadow: var(--zs-ui-shadow-1); } .panel-heading, .toggler { transition: filter var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .panel-heading:hover, .toggler:hover { box-shadow: var(--zs-ui-shadow-1); } /* 07 – PRODUCT CATEGORY CARDS / HOMEPAGE PRODUCT TILES ------------------ */ .box3Artikel, .box4Artikel, .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox, .fahrradZufallBox .box, .kachel, .warengruppe, .thumb, #altArt .thumb, #wrapKacheln .kachel { border-radius: var(--zs-ui-radius-lg); } .box3Artikel .box, .box4Artikel .box, .fahrradZufallBox .box, .thumb, #altArt .thumb, .kachel, .warengruppe { box-shadow: var(--zs-ui-shadow-1); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } .box3Artikel .box:hover, .box4Artikel .box:hover, .fahrradZufallBox .box:hover, .thumb:hover, #altArt .thumb:hover, .kachel:hover, .warengruppe:hover { box-shadow: var(--zs-ui-shadow-2); } .box .overlay, .box4Artikel .overlay, .overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .produktname, .produktklasse, .markeModell, .modell, .thumb .marke, .thumb .modell { border-radius: 0 0 var(--zs-ui-radius-md) var(--zs-ui-radius-md); } .preis, .empf, .preisTotal, .rate-display { font-variant-numeric: tabular-nums; } .preis { border-radius: var(--zs-ui-radius-sm); } .empf { opacity: .88; } .zs-sale-corner, .detail-sale-badge { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); } /* Category grids with their own inline CSS – colour values remain original */ .schael-kachelgrid, .schael-ebike-kachelgrid, .schael-kachelgrid-mobile, .schael-ebike-kachelgrid-mobile { isolation: isolate; } .schael-kachelgrid .schael-kachel, .schael-ebike-kachelgrid .schael-ebike-kachel, .schael-kachelgrid-mobile .schael-kachel-mobile, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile { border-radius: var(--zs-ui-radius-lg); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .schael-kachelgrid .schael-kachel:hover, .schael-ebike-kachelgrid .schael-ebike-kachel:hover, .schael-kachelgrid-mobile .schael-kachel-mobile:hover, .schael-ebike-kachelgrid-mobile .schael-ebike-kachel-mobile:hover { box-shadow: var(--zs-ui-shadow-2); transform: translateY(-2px); } .schael-kachelbild, .schael-ebike-kachelbild, .schael-kachelbild-mobile, .schael-ebike-kachelbild-mobile { overflow: hidden; } .schael-kachelbild img, .schael-ebike-kachelbild img, .schael-kachelbild-mobile img, .schael-ebike-kachelbild-mobile img { transition: transform var(--zs-ui-transition-soft); } .schael-kachelgrid a:hover img, .schael-ebike-kachelgrid a:hover img, .schael-kachelgrid-mobile a:hover img, .schael-ebike-kachelgrid-mobile a:hover img { transform: scale(1.025); } .schael-kacheltitel, .schael-ebike-kacheltitel, .schael-kacheltitel-mobile, .schael-ebike-kacheltitel-mobile { border-radius: 0 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg); letter-spacing: -.01em; font-weight: 600; } /* 08 – PRODUCT DETAIL ----------------------------------------------- */ .produktDetail { border-radius: var(--zs-ui-radius-xl); } .produktDetail .bild, .produktDetail .bild img, .produktBild, #altArt .produktBild { border-radius: var(--zs-ui-radius-lg); } #wrapBeschreibung, .produkt-aktionen, .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich, .produkt-merkmale-bereich { border-radius: var(--zs-ui-radius-lg); } .produkt-verfuegbarkeit, .produkt-hinweis-container, .weitere-varianten-bereich { box-shadow: var(--zs-ui-shadow-1); } .verfuegbarkeit-zeile, .wrapAmpel, .ampelInline, .ampel { border-radius: var(--zs-ui-radius-sm); } .verfuegbarkeit-status, .ampelLabel, .heightRahmen { line-height: 1.45; } .produkt-merkmale-kopf { border-radius: var(--zs-ui-radius-md); } .produkt-merkmal-card { border-radius: var(--zs-ui-radius-md); box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .produkt-merkmal-card:hover { box-shadow: var(--zs-ui-shadow-2); } .produkt-merkmal-label { letter-spacing: -.01em; } .produkt-merkmal-icon { border-radius: var(--zs-ui-radius-pill); } .weitere-varianten-list { border-radius: var(--zs-ui-radius-md); } .weitere-variante-bild { border-radius: var(--zs-ui-radius-sm); overflow: hidden; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .weitere-variante-bild:hover { box-shadow: var(--zs-ui-shadow-2); } /* 09 – LISTING / FILTER / PRICE RANGE ----------------------------------- */ .article-filter-panel, .article-filter-content, .article-filter-toggle, #article-filter-content, #wrapSearchResult, #wrapSearchResult .row, #noResult, .paginierung, #slider-range { border-radius: var(--zs-ui-radius-lg); } .article-filter-panel, .article-filter-content { box-shadow: var(--zs-ui-shadow-1); } .article-filter-toggle { box-shadow: var(--zs-ui-shadow-1); transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition); } .article-filter-toggle:hover { box-shadow: var(--zs-ui-shadow-2); } .article-filter-content select.form-control, .article-filter-content .form-control { border-radius: var(--zs-ui-radius-sm); } .article-filter-actions .btn, .article-filter-content .formButtons .btn { border-radius: var(--zs-ui-radius-sm) !important; } .article-filter-price { border-radius: var(--zs-ui-radius-md); } #slider-range .ui-slider-handle, .ui-slider .ui-slider-handle { border-radius: var(--zs-ui-radius-pill); box-shadow: var(--zs-ui-shadow-1); cursor: grab; } #slider-range .ui-slider-handle:active, .ui-slider .ui-slider-handle:active { cursor: grabbing; } .paginierung, .paginierung a, input.paginierung { border-radius: var(--zs-ui-radius-pill); } .thumb .img, .thumb .img img { border-radius: var(--zs-ui-radius-md); } #wrapSearchResult { box-shadow: var(--zs-ui-shadow-1); } #wrapSearchResult .row, .searchItemResult { border-radius: var(--zs-ui-radius-lg); overflow: hidden; transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #wrapSearchResult .row:hover, .searchItemResult:hover { box-shadow: var(--zs-ui-shadow-2); } .zs-search-image-wrap, .zs-search-image-wrap img { border-radius: var(--zs-ui-radius-md); } /* 10 – FINANCING CALCULATOR --------------------------------------------- */ .finanz-modul-wrap, .finanz-layout, .calc-wrapper, .calc-form, .result-box, .result-warning, .radio-tabs, .radio-tab, .radio-tab-content, .result-grid { border-radius: var(--zs-ui-radius-lg) !important; } .calc-wrapper, .calc-form, .result-box, .result-warning { box-shadow: var(--zs-ui-shadow-1) !important; } .calc-form input[type="text"], .calc-form input[type="number"] { border-radius: var(--zs-ui-radius-sm) !important; } .radio-tab-content { border-radius: var(--zs-ui-radius-sm) !important; transition: box-shadow var(--zs-ui-transition), transform var(--zs-ui-transition) !important; } .radio-tab input[type="radio"]:checked + .radio-tab-content { box-shadow: 0 0 0 1px currentColor inset !important; } .result-box { overflow: hidden; } .rate-display { letter-spacing: -.035em; } .result-grid > div { border-radius: var(--zs-ui-radius-sm); } .result-warning { overflow: hidden; } /* 11 – SERVICE / CONTACT / CONTENT -------------------------------------- */ #naviServicePoints, #naviServicePoints.container, #serviceListe, #serviceListe table, .service table, .kontaktDaten, .kontaktDaten .item, .kontakt .tab-content, .karriere .tab-content, #stammdaten .stammdatenInside, #bildercheck, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, #galerieLaden, .prospekt, #prospekteAll, .event { border-radius: var(--zs-ui-radius-lg); } #naviServicePoints, #serviceListe table, #bildercheck .panel-default, #bildercheck .panel, #mitarbeiter .item, .prospekt { box-shadow: var(--zs-ui-shadow-1); } #naviServicePoints a, .kontaktDaten a, #mitarbeiter .item a, .prospekt a { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } #naviServicePoints a:hover, .kontaktDaten a:hover, #mitarbeiter .item a:hover, .prospekt a:hover { opacity: .92; } #naviFooter, #naviFooterMobile, #stammdaten .stammdatenInside { overflow: hidden; } #naviFooter > ul.level_1 > li, #naviFooterMobile ul.level_1 > li { border-radius: var(--zs-ui-radius-sm); } #stammdaten .container { border-radius: var(--zs-ui-radius-lg); overflow: hidden; } #mitarbeiter .image_container img, #mitarbSlider .image_container img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-md); } .prospekt img { border-radius: var(--zs-ui-radius-sm); } .prospekt .overlay { border-radius: 0 var(--zs-ui-radius-lg) var(--zs-ui-radius-lg) 0; } /* 12 – TABLES / PAGINATION / DATA --------------------------------------- */ table { border-collapse: separate; border-spacing: 0; } #serviceListe table, .service table, #bildercheck table, #bildercheck .panel { overflow: hidden; } #serviceListe td, .service td, #bildercheck table td { vertical-align: middle; } #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md) var(--zs-ui-radius-md) 0 0; } /* 13 – ACCESSIBILITY / FOCUS -------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffcc33; outline-offset: 2px; } /* 14 – RESPONSIVE FINISHING --------------------------------------------- */ @media (max-width: 767px) { html, body { max-width: 100%; } #main { border-radius: var(--zs-ui-radius-lg); } #containerHauptnavi, #navbarProdukte, #navbarProdukte .navbar-collapse, #naviProdukteFooter, #naviFooterMobile { border-radius: var(--zs-ui-radius-md); } .btn, button, input[type="submit"], input[type="button"], .navbar-toggle { min-height: 42px; } .form-control, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]) { font-size: 16px; } .box3Artikel .box, .box4Artikel .box { width: min(400px, 100%); max-width: 100%; } .box3Artikel .produktname, .box4Artikel .produktname { max-width: 100%; } .produkt-aktionen .btn { min-height: 42px; } .article-filter-content .formButtons .btn { min-height: 44px; } .prospekt, .searchItemResult, #wrapSearchResult .row { border-radius: var(--zs-ui-radius-md); } } @media (max-width: 420px) { .produkt-merkmal-card { min-width: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .navbar-default, #navbarProdukte, #naviFooter, #stammdaten .stammdatenInside { border-radius: var(--zs-ui-radius-lg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 15 – REMAINING SITE MODULES / LEGACY COMPONENTS ----------------------- */ #suche, #nachfrageFormular, #bildercheck, #mitarbeiter, #mitarbSlider, #galerieLaden, #wrapKacheln, #prospekteAll, #serviceListe, #stammdaten, .kontakt, .karriere, .impressum, .pageTitle, .hl_mobile, .topBild, .facts-list-wrap, .facts-list, .row.statistic, .rate, .gewaehr, .empf, .markeModell, .produktRubrikHeader, .produkt-merkmal-card, .produkt-aktionen, .produkt-hinweis-container, .weitere-varianten-bereich, .weitere-variante-bild, .wrapAmpel, .ampel, #finanzierungsrechner, #naviServicePoints, #bildercheck .panel-heading { border-radius: var(--zs-ui-radius-md); } #suche input, #nachfrageFormular input, #nachfrageFormular select, #nachfrageFormular textarea { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #galerieLaden img, .topBild img, .bildLeihrad img, .bildFiliale img { border-radius: var(--zs-ui-radius-lg); } #finanzierungsrechner { box-shadow: var(--zs-ui-shadow-1); } #mitarbSlider .carousel-control, .slick-prev, .slick-next, .rsts-prev, .rsts-next, .rsts-nav a { border-radius: var(--zs-ui-radius-pill); transition: opacity var(--zs-ui-transition), box-shadow var(--zs-ui-transition); } .slick-dots li button:before { transition: opacity var(--zs-ui-transition), transform var(--zs-ui-transition); } .slick-dots li.slick-active button:before { transform: scale(1.08); } #breadCrumbs, .breadcrumb { border-radius: var(--zs-ui-radius-pill); } #stammdaten .stammdatenInside, #naviFooter .inside, #naviFooterMobile { box-shadow: var(--zs-ui-shadow-1); } .kontaktDaten .item, #mitarbeiter .item, #galerieLaden, #prospekteAll .prospekt { transition: box-shadow var(--zs-ui-transition), border-color var(--zs-ui-transition); } #mitarbeiter .item:hover, #prospekteAll .prospekt:hover { box-shadow: var(--zs-ui-shadow-2); } .markenLogo, .produkt-merkmal-icon, .header-badge, .badge-text { border-radius: var(--zs-ui-radius-pill); } @media print { html { scroll-behavior: auto; } #main, #finanzierungsrechner, #naviFooter .inside, #naviFooterMobile, .produktDetail, .produkt-merkmal-card, .result-box, .panel, .alert, .prospekt, #mitarbeiter .item, #naviServicePoints { box-shadow: none !important; } }